tagged with .envelope OR
* matching one of the existing public envelope class hooks.
*
* Pattern: hide native marker, render a 1rem chevron on the right of the
* summary that rotates 90° between closed (▶ pointing right) and open
* (▼ pointing down). Hover lights up the row with a faint indigo tint
* + cursor:pointer so the row reads as a button. */
details.envelope > summary,
.college-dining-details > summary,
details.cs-type-group > summary {
list-style: none;
cursor: pointer;
user-select: none;
position: relative;
padding-right: 2.25rem; /* room for the chevron */
border-radius: var(--md3-shape-sm, 8px);
transition: background-color 150ms ease;
}
details.envelope > summary::-webkit-details-marker,
.college-dining-details > summary::-webkit-details-marker,
details.cs-type-group > summary::-webkit-details-marker {
display: none; /* Safari sees this; Chrome uses list-style:none above */
}
details.envelope > summary::after,
.college-dining-details > summary::after,
details.cs-type-group > summary::after {
content: '▼';
position: absolute;
right: .65rem;
top: 50%;
transform: translateY(-50%) rotate(0deg);
transition: transform 200ms ease;
color: var(--md3-on-surface-variant, #6b7280);
font-size: .9rem;
pointer-events: none; /* don't block summary clicks */
font-weight: 600;
}
/* When NOT open, rotate the chevron to point right (▶). Default state in
* the rule above is the open state. Using :not([open]) on the parent so
* each variant resolves cleanly without per-class duplication. */
details:not([open]).envelope > summary::after,
details:not([open]).college-dining-details > summary::after,
details:not([open]).cs-type-group > summary::after {
transform: translateY(-50%) rotate(-90deg);
}
details.envelope > summary:hover,
.college-dining-details > summary:hover,
details.cs-type-group > summary:hover {
background-color: rgba(99, 102, 241, .07); /* faint indigo tint */
}
details.envelope > summary:focus-visible,
.college-dining-details > summary:focus-visible,
details.cs-type-group > summary:focus-visible {
outline: 2px solid var(--md3-primary, #6366f1);
outline-offset: 2px;
}
/* Caller can opt out of the chevron when their summary already has a
* custom one (e.g. .brief-details-summary). Just don't add the .envelope
* class. */
.college-dining-card h2 { font-size: 1.05rem; color: #111827; }
/* ── 🦣 School-spirit welcome strip ────────────────────────────────────
Thin amber bar that fires once per browser session for signed-in users
we can identify by school. The whole element is sticky-top-pinned via
position:sticky so it doesn't take vertical space when collapsed but
stays in view as the user starts scrolling. Auto-dismisses after 8s
(toggled by JS removing .school-spirit-welcome-visible). */
.school-spirit-welcome {
position: sticky;
top: 0;
z-index: 950; /* below the top header (1000) so it doesn't cover nav */
background: linear-gradient(90deg, #fde68a 0%, #fcd34d 50%, #fde68a 100%);
color: #78350f;
border-bottom: 1px solid #fbbf24;
font-weight: 600;
font-size: .87rem;
text-align: center;
animation: schoolSpiritSlideIn .35s ease-out;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.school-spirit-welcome-inner {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
padding: .55rem .85rem;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.school-spirit-welcome-icon { font-size: 1.15rem; }
.school-spirit-welcome-text { line-height: 1.3; }
.school-spirit-welcome-text strong { font-weight: 800; }
.school-spirit-welcome-text .chant-text {
margin-left: .35rem;
font-style: italic;
color: #92400e;
}
.school-spirit-welcome-close {
position: absolute;
right: .65rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
color: #78350f;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
padding: .15rem .35rem;
border-radius: .25rem;
line-height: 1;
}
.school-spirit-welcome-close:hover { background: rgba(146, 64, 14, .12); }
@keyframes schoolSpiritSlideIn {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* On narrow screens, drop the close button to avoid wrap */
@media (max-width: 480px) {
.school-spirit-welcome-text { font-size: .82rem; }
.school-spirit-welcome-text .chant-text { display: none; }
}
/* Header invite pill (May 2026) — hover state pop */
.header-invite-pill {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
border: 0;
color: #fff;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
box-shadow: 0 2px 6px rgba(99, 102, 241, .35);
}
.header-invite-pill:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(99, 102, 241, .45); }
.header-invite-pill:active { transform: translateY(0); }
@media (max-width: 480px) {
.header-invite-pill > span:nth-child(2) { display:none; } /* hide "Invite" label */
.header-invite-pill .header-invite-pill-pts { display:none; } /* hide "+10pt" badge */
.header-invite-pill { padding: .4rem .55rem; }
}
/* Roommate Post button disabled state (Bug E QA round 2 fix, May 2026) */
#rm-form-submit.rm-submit-disabled,
#rm-form-submit:disabled {
background: #cbd5e1;
color: #475569;
cursor: not-allowed;
opacity: 0.85;
}
.official-links-section .section-title {
margin: 0 0 .85rem 0;
font-size: 1.05rem;
color: #111827;
display: flex;
align-items: center;
gap: .5rem;
}
.official-links-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: .65rem;
}
.official-link-card {
display: flex;
align-items: center;
gap: .6rem;
padding: .7rem .9rem;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: .55rem;
text-decoration: none;
color: #1f2937;
font-size: .88rem;
font-weight: 500;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.official-link-card:hover {
background: #eef2ff;
border-color: #a5b4fc;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(79, 70, 229, 0.12);
color: #3730a3;
}
.official-link-icon {
font-size: 1.05rem;
flex-shrink: 0;
}
.official-link-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.official-link-arrow {
color: #9ca3af;
font-size: .9rem;
flex-shrink: 0;
}
.official-link-card:hover .official-link-arrow { color: #6366f1; }
/* ---- A1: Sticky back-to-parent pill (dorm → college, room → dorm) ---- */
.back-to-college-pill {
position: sticky;
top: 58px;
z-index: 90;
display: inline-flex;
align-items: center;
gap: .35rem;
margin: .5rem 1.25rem;
padding: .4rem .9rem;
background: #e8edf8;
color: #3b5bdb;
border: 1.5px solid #c7d2f0;
border-radius: 999px;
font-size: .88rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
transition: background .15s ease, border-color .15s ease, transform .15s ease;
max-width: calc(100% - 2.5rem);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.back-to-college-pill:hover {
background: #d5dff5;
border-color: #a8b9e8;
}
.back-to-college-pill:active {
transform: translateY(1px);
}
@media (max-width: 640px) {
.back-to-college-pill {
margin: .5rem .75rem;
font-size: .82rem;
padding: .35rem .75rem;
}
}
/* ---- A2: Keyboard shortcuts cheatsheet modal ---- */
.cheatsheet-grid {
display: grid;
grid-template-columns: 1fr;
gap: .5rem;
margin: 1rem 0;
}
.cheatsheet-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem .75rem;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
gap: 1rem;
}
.cheatsheet-desc {
font-size: .9rem;
color: #1f2937;
}
.cheatsheet-keys {
display: inline-flex;
align-items: center;
gap: .25rem;
flex-shrink: 0;
}
.cheatsheet-keys kbd {
display: inline-block;
padding: .15rem .5rem;
background: #fff;
border: 1px solid #cbd5e1;
border-bottom-width: 2px;
border-radius: 4px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: .78rem;
font-weight: 600;
color: #334155;
box-shadow: 0 1px 0 rgba(0,0,0,.04);
min-width: 1.25rem;
text-align: center;
}
.cheatsheet-section-title {
font-size: .75rem;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: .05em;
margin: 1rem 0 .5rem;
}
.cheatsheet-section-title:first-child { margin-top: 0; }
/* ---- A3: Header user chip with avatar initials ---- */
.header-user-chip {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .25rem .75rem .25rem .25rem;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
color: #fff;
font-size: .88rem;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
text-decoration: none;
}
.header-user-chip:hover {
background: rgba(255,255,255,.2);
border-color: rgba(255,255,255,.3);
}
.header-user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
flex-shrink: 0;
text-transform: uppercase;
}
.header-user-name {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 640px) {
.header-user-name { display: none; }
.header-user-chip { padding: .15rem; border-radius: 50%; }
}
/* ---- B5: Wizard dot clickable-when-done ---- */
.wizard-dot.done {
cursor: pointer;
}
.wizard-dot.done:hover {
background: #16a34a;
border-color: #16a34a;
}
/* ---- B6: Upload progress bar ---- */
.upload-progress-wrap {
margin: .5rem 0;
display: flex;
align-items: center;
gap: .5rem;
}
.upload-progress-bar {
flex: 1;
height: 6px;
background: #e5e7eb;
border-radius: 999px;
overflow: hidden;
position: relative;
}
.upload-progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
border-radius: 999px;
transition: width .2s ease;
width: 0%;
}
.upload-progress-pct {
font-size: .75rem;
font-weight: 600;
color: #6366f1;
min-width: 2.5rem;
text-align: right;
}
.upload-progress-label {
font-size: .8rem;
color: #6b7280;
margin-bottom: .25rem;
}
.wizard-photo-progress-row {
padding: .5rem .75rem;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: .5rem;
}
/* ─── Wizard per-photo cards ─────────────────────────────────────── */
.wizard-photo-card {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: .6rem;
align-items: center;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: .5rem .6rem;
}
.wizard-photo-thumb {
width: 80px;
height: 60px;
object-fit: cover;
border-radius: 5px;
flex-shrink: 0;
}
.wizard-photo-meta {
display: flex;
flex-direction: column;
gap: .35rem;
min-width: 0;
}
.wizard-photo-meta .form-input {
width: 100%;
box-sizing: border-box;
}
.wizard-photo-remove {
background: none;
border: none;
cursor: pointer;
color: #6b7280;
font-size: 1rem;
padding: .25rem;
border-radius: 4px;
flex-shrink: 0;
transition: color .15s;
}
.wizard-photo-remove:hover { color: #dc2626; }
.wizard-photo-pdf-thumb {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .2rem;
width: 80px;
height: 60px;
border-radius: 5px;
background: #fef2f2;
border: 1px solid #fca5a5;
font-size: 1.4rem;
flex-shrink: 0;
overflow: hidden;
}
.wizard-photo-pdf-thumb span {
font-size: .58rem;
color: #991b1b;
line-height: 1.1;
text-align: center;
word-break: break-all;
padding: 0 .2rem;
max-width: 100%;
}
@media (max-width: 480px) {
.wizard-photo-card {
grid-template-columns: 64px 1fr auto;
}
.wizard-photo-thumb {
width: 64px;
height: 48px;
}
}
/* ─── Desktop photo upload affordances ───────────────────────────── */
/* On non-touch devices: hide the camera button (useless on Mac/Windows),
show the drag-and-drop zone instead */
@media (hover: hover) and (pointer: fine) {
.camera-btn { display: none !important; }
.wizard-photo-dropzone { display: flex !important; }
}
/* ─── HEIC preview placeholder (May 2026 mobile/PWA pass) ────────────
* Chrome/Firefox/Edge can't render HEIC/HEIF in ![]()
. We swap them for
* this labeled placeholder before upload (the server-side normalizer
* converts to JPEG, so the post-upload thumbnail is real).
*
* Sizing rules: a host class style="width:Npx;height:Npx" wins (callers
* pass the same dimensions they use for the ![]()
they replace, so the
* placeholder occupies the same slot). Without an inline size override
* it falls back to the .wizard-photo-thumb / general thumbnail look. */
.file-preview-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .15rem;
background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
border: 1px dashed #a5b4fc;
color: #4338ca;
font-size: .65rem;
font-weight: 600;
text-align: center;
padding: .25rem;
overflow: hidden;
box-sizing: border-box;
}
.file-preview-placeholder .fpp-icon {
font-size: 1.1rem;
line-height: 1;
}
/* Converting state (May 2026 — UX_TODO #62 / heic2any) — spin the ↻
* icon while heic2any chews on the HEIC bytes in the background. The
* placeholder swaps to a real ![]()
when conversion settles. */
.file-preview-placeholder.fpp-converting {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-color: #fbbf24;
color: #78350f;
}
.file-preview-placeholder.fpp-converting .fpp-icon {
animation: fppConvertSpin 1.1s linear infinite;
display: inline-block;
}
@keyframes fppConvertSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.file-preview-placeholder .fpp-name {
font-size: .58rem;
font-weight: 500;
color: #6366f1;
word-break: break-all;
line-height: 1.1;
max-width: 100%;
/* clamp to 2 lines so a long file name doesn't blow out the tile */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.file-preview-placeholder .fpp-note {
font-size: .55rem;
font-weight: 400;
color: #818cf8;
font-style: italic;
}
/* Inline-injected variant (used when JS auto-creates a placeholder next
* to an ![]()
) — defaults to a horizontal pill so it doesn't blow up
* surrounding layout. */
.file-preview-placeholder-inline {
display: inline-flex;
flex-direction: row;
gap: .35rem;
padding: .25rem .5rem;
border-radius: .35rem;
}
.wizard-photo-dropzone {
flex-direction: column;
align-items: center;
justify-content: center;
gap: .3rem;
border: 2px dashed #c7d2fe;
border-radius: 10px;
background: #eef2ff;
padding: 1.25rem 1rem;
text-align: center;
cursor: pointer;
transition: background .15s, border-color .15s;
margin-bottom: .5rem;
}
.wizard-photo-dropzone:hover,
.wizard-photo-dropzone.drag-over {
background: #e0e7ff;
border-color: #6366f1;
}
.wizard-dropzone-icon { font-size: 1.8rem; }
.wizard-dropzone-text {
font-weight: 600;
color: #4338ca;
font-size: .95rem;
}
.wizard-dropzone-sub {
font-size: .78rem;
color: #6b7280;
}
/* ─── Public mobile pass (April 2026) ──────────────────────────────────
Site-wide responsive cleanup focused on the highest-traffic public
surfaces. Goals: thumb-friendly tap targets, no iOS auto-zoom on form
focus, modals that don't get pushed off-screen by the keyboard, and
wide tables that gracefully horizontal-scroll inside their wrap. */
@media (max-width: 640px) {
/* iOS auto-zoom prevention — input font-size must be >=16px or Safari
zooms the page on focus. We can't blanket-set 16px because some UI
uses tiny text intentionally; scope to form inputs only. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
font-size: 16px;
}
/* Modal sizing — most modals declare max-width:520px or similar.
On a 360px phone that overflows the viewport. Force full-width
with a small gutter and a max-height that respects the keyboard. */
.modal-overlay .modal,
.modal {
width: 100%;
max-width: 100%;
margin: 0 .5rem;
max-height: 75vh;
max-height: 75dvh; /* mobile-keyboard-safe */
border-radius: .55rem;
}
.modal-overlay { padding: .5rem; align-items: flex-start; }
/* Tap targets — every primary action should be >=44px tall on
touch surfaces (Apple HIG / WCAG 2.5.5). Bump button + chip
min-heights without forcing all buttons to be huge. */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
button[type="submit"],
button[type="button"]:not(.btn-icon-only):not(.modal-close-btn):not(.tab-btn) {
min-height: 44px;
}
/* Modal close X stays compact but still tappable */
.modal-close-btn { min-width: 44px; min-height: 44px; }
/* Chips (compare, filters, etc.) also need a tap-friendly minimum */
.qf-chip,
.filter-chip,
.reviewer-context-tag {
min-height: 36px;
}
/* Hero photo aspect-ratio — the dorm/college hero photos can be huge
PNGs. Cap at 220px so they don't dominate above-the-fold on narrow
screens; let the rest of the hero (name, brief, actions) breathe. */
.college-hero-photo,
.dorm-hero-photo {
max-height: 220px;
object-fit: cover;
}
/* Wide tables (room compare, leaderboard, dorm compare) — wrap them
in horizontal scroll inside their existing parent. */
.table-wrap,
.room-compare-grid,
.dorm-compare-grid {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Bottom nav already exists from the earlier major UI update — but
ensure the body has enough padding-bottom that fixed bottom nav
doesn't cover content. */
body { padding-bottom: 4.5rem; }
/* Brief tile grid — the 17-tile strip can get cramped at 360px wide.
Force 4 columns instead of auto-fit so each tile stays >= 44px. */
.brief-strip .brief-icon-row,
.brief-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* The Brief bottom-sheet — full-bleed on mobile so the close button
is reachable with a thumb. */
.brief-sheet-backdrop .brief-sheet,
.bottom-sheet {
width: 100%;
max-width: 100%;
border-radius: .85rem .85rem 0 0;
}
}
/* ─── Dorm identity strip (Greek chapter dual-identity, Phase 5b) ───────── */
#dorm-identity-strip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
padding: 1.25rem;
background: white;
border-radius: .75rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
margin-bottom: 1.25rem;
}
.dorm-identity-slot {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .6rem;
}
.dorm-identity-logo {
width: 80px;
height: 80px;
object-fit: contain;
flex-shrink: 0;
}
.dorm-identity-name {
font-weight: 700;
font-size: 1rem;
line-height: 1.25;
color: #1f2937;
word-break: break-word;
}
.dorm-identity-caption {
font-size: .82rem;
color: #6b7280;
line-height: 1.4;
}
.dorm-identity-detail {
font-size: .75rem;
color: #6b7280;
margin-top: .15rem;
}
@media (max-width: 640px) {
#dorm-identity-strip {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
}
}
/* ─── Members-only warning banner (Phase 5b) ──────────────────────────────── */
#members-only-banner {
display: none;
background: #fef3c7;
border-left: 4px solid #fbbf24;
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
border-radius: .5rem;
font-size: .95rem;
line-height: 1.5;
color: #92400e;
gap: 1rem;
position: relative;
}
#members-only-banner.active {
display: flex;
align-items: flex-start;
}
.members-only-icon {
font-size: 1.5rem;
flex-shrink: 0;
line-height: 1;
}
.members-only-body {
flex: 1;
min-width: 0;
}
.members-only-body strong {
font-weight: 700;
display: block;
margin-bottom: .3rem;
}
.members-only-cta {
color: #b45309;
text-decoration: underline;
cursor: pointer;
font-weight: 500;
display: inline-block;
margin-top: .5rem;
}
.members-only-cta:hover {
color: #92400e;
}
.members-only-dismiss {
flex-shrink: 0;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #92400e;
padding: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.members-only-dismiss:hover {
opacity: 0.7;
}
@media (max-width: 640px) {
#members-only-banner {
flex-direction: column;
align-items: flex-start;
padding: .85rem 1rem;
}
.members-only-dismiss {
position: absolute;
top: .5rem;
right: .5rem;
}
.members-only-body {
padding-right: 2rem;
}
}
/* ─── Most-searched colleges home strip ───────────────────────────────────── */
.most-searched-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
@media (max-width: 768px) {
#most-searched-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 480px) {
#most-searched-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
#most-searched-grid img {
height: 60px !important;
}
}
/* ─── Website suggestion attachment previews ──────────────────────────────── */
#ws-file-previews {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.5rem;
padding: 0;
}
.ws-file-preview {
position: relative;
width: 80px;
height: 80px;
border-radius: 6px;
overflow: hidden;
background: #f3f4f6;
border: 1px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 0.75rem;
color: #6b7280;
}
.ws-file-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ws-file-icon {
font-size: 1.75rem;
}
.ws-file-name {
width: 100%;
padding: 0 0.25rem;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0.25rem;
}
.ws-file-remove {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #dc2626;
color: white;
border: none;
cursor: pointer;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
opacity: 0;
transition: opacity 120ms ease-out;
}
.ws-file-preview:hover .ws-file-remove {
opacity: 1;
}
/* ─── Wizard multi-comment UI ──────────────────────────────────────────────── */
.wizard-comment-row {
padding: 0.75rem;
background: #f9fafb;
border-radius: 6px;
border: 1px solid #e5e7eb;
}
.wizard-comment-row textarea {
font-family: inherit;
font-size: 0.875rem;
}
.wizard-comment-row select {
font-size: 0.875rem;
}
/* ── Campus Eateries (cafes, grab-n-go, etc.) — added 2026-04-27 ─────────── */
.eatery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 0.85rem;
}
.eatery-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
background: var(--ds-bg-elevated, #fff);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 10px;
padding: 0.85rem 1rem;
transition: border-color .15s ease, box-shadow .15s ease;
}
.eatery-card:hover {
border-color: #6366f1;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.10);
}
.eatery-name {
font-weight: 600;
font-size: 0.95rem;
color: var(--ds-text, #1f2937);
}
.eatery-building {
font-size: 0.78rem;
color: var(--ds-text-muted, #6b7280);
}
.eatery-meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.25rem;
}
.eatery-type-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.eatery-type-cafe { background: #f3e8ff; color: #6b21a8; }
.eatery-type-grab_and_go { background: #fef3c7; color: #92400e; }
.eatery-type-convenience { background: #dbeafe; color: #1e40af; }
.eatery-type-food_truck { background: #fee2e2; color: #991b1b; }
.eatery-type-food_court { background: #ffedd5; color: #9a3412; }
.eatery-type-restaurant { background: #dcfce7; color: #166534; }
.eatery-type-market { background: #e0e7ff; color: #3730a3; }
.eatery-type-dining_hall { background: #fef9c3; color: #854d0e; }
.eatery-type-other { background: #f3f4f6; color: #4b5563; }
.eatery-distance {
display: inline-block;
font-size: 0.7rem;
font-weight: 500;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: #ecfdf5;
color: #065f46;
}
.eatery-hours {
font-size: 0.78rem;
color: var(--ds-text-muted, #6b7280);
margin-top: 0.2rem;
}
.eatery-payments {
font-size: 0.7rem;
color: var(--ds-text-muted, #6b7280);
margin-top: 0.15rem;
}
.eatery-link {
font-size: 0.78rem;
color: #6366f1;
text-decoration: none;
margin-top: 0.25rem;
}
.eatery-link:hover {
text-decoration: underline;
}
/* ═════════════════════════════════════════════════════════════════════════
* MD3 — promoted to default 2026-04-30 (was previously the styles-md3.css
* preview layer, gated behind [data-md3="1"]). All selectors had that
* prefix stripped; the toggle button + URL param + localStorage flag +
* preview banner + body padding offset were all removed at the same time.
* Identity preserved: 8-12px corner radius (NOT MD3's full pill), indigo+
* amber palette, Inter font, emoji headers, Lucide outline icons.
* ═════════════════════════════════════════════════════════════════════════ */
/* ─── MD3 design tokens (root scope) ────────────────────────────────────── */
:root {
/* Color roles (mapped from existing DormScouter palette) */
--md-sys-color-primary: #6366f1;
--md-sys-color-on-primary: #ffffff;
--md-sys-color-primary-container: #eef2ff;
--md-sys-color-on-primary-container: #312e81;
--md-sys-color-secondary: #f59e0b;
--md-sys-color-on-secondary: #ffffff;
--md-sys-color-secondary-container: #fef3c7;
--md-sys-color-on-secondary-container: #78350f;
--md-sys-color-tertiary: #10b981;
--md-sys-color-on-tertiary: #ffffff;
--md-sys-color-tertiary-container: #d1fae5;
--md-sys-color-on-tertiary-container: #065f46;
--md-sys-color-error: #dc2626;
--md-sys-color-on-error: #ffffff;
--md-sys-color-error-container: #fee2e2;
--md-sys-color-on-error-container: #7f1d1d;
--md-sys-color-surface: #ffffff;
--md-sys-color-on-surface: #111827;
--md-sys-color-surface-variant: #f3f4f6;
--md-sys-color-on-surface-variant: #6b7280;
--md-sys-color-outline: #d1d5db;
--md-sys-color-outline-variant: #e5e7eb;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #fafafa;
--md-sys-color-surface-container: #f9fafb;
--md-sys-color-surface-container-high: #f3f4f6;
--md-sys-color-surface-container-highest: #e5e7eb;
/* Shape scale (corner radius) */
--md-sys-shape-corner-none: 0;
--md-sys-shape-corner-extra-small: 4px;
--md-sys-shape-corner-small: 8px;
--md-sys-shape-corner-medium: 12px;
--md-sys-shape-corner-large: 16px;
--md-sys-shape-corner-extra-large: 28px;
--md-sys-shape-corner-full: 9999px;
/* Elevation */
--md-sys-elevation-0: none;
--md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.10);
--md-sys-elevation-2: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.10);
--md-sys-elevation-3: 0 4px 8px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.08);
--md-sys-elevation-4: 0 6px 12px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.10);
--md-sys-elevation-5: 0 12px 24px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.12);
/* Motion: emphasized easing curves */
--md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.0);
--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
--md-sys-motion-duration-short1: 50ms;
--md-sys-motion-duration-short2: 100ms;
--md-sys-motion-duration-short3: 150ms;
--md-sys-motion-duration-short4: 200ms;
--md-sys-motion-duration-medium1: 250ms;
--md-sys-motion-duration-medium2: 300ms;
--md-sys-motion-duration-medium3: 350ms;
--md-sys-motion-duration-medium4: 400ms;
--md-sys-motion-duration-long1: 450ms;
--md-sys-motion-duration-long2: 500ms;
/* State layer opacities */
--md-sys-state-hover-opacity: 0.08;
--md-sys-state-focus-opacity: 0.12;
--md-sys-state-pressed-opacity: 0.12;
--md-sys-state-dragged-opacity: 0.16;
}
/* ─── Emphasized motion baseline on common interactive elements ────────── */
.btn,
.qf-chip,
.dorm-card,
.college-card,
.home-blog-card,
.freshness-chip,
.alumni-card-compact,
.eatery-card,
.brief-icon,
.oauth-btn {
transition-timing-function: var(--md-sys-motion-easing-emphasized) !important;
transition-duration: var(--md-sys-motion-duration-short3) !important;
}
.btn:active,
.qf-chip:active,
.oauth-btn:active {
transform: scale(0.97);
transition-duration: var(--md-sys-motion-duration-short2) !important;
}
/* MD3 focus ring — 3px outline at 80% primary opacity */
:focus-visible {
outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 80%, transparent) !important;
outline-offset: 2px;
border-radius: var(--md-sys-shape-corner-extra-small);
}
/* ─── Buttons (MD3 anatomy applied to existing .btn-* classes) ────────── */
.btn.btn-primary {
background: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
border: none;
border-radius: var(--md-sys-shape-corner-small);
padding: .55rem 1.4rem;
font-weight: 600;
letter-spacing: 0.02em;
box-shadow: var(--md-sys-elevation-0);
position: relative;
overflow: hidden;
}
.btn.btn-primary:hover {
box-shadow: var(--md-sys-elevation-2);
background: color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary));
}
.btn.btn-primary:active { box-shadow: var(--md-sys-elevation-1); }
.btn.btn-secondary {
background: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
border: none;
border-radius: var(--md-sys-shape-corner-small);
padding: .55rem 1.4rem;
font-weight: 600;
box-shadow: var(--md-sys-elevation-0);
}
.btn.btn-secondary:hover {
box-shadow: var(--md-sys-elevation-1);
background: color-mix(in srgb, var(--md-sys-color-secondary-container) 88%, var(--md-sys-color-on-secondary-container));
}
.btn.btn-outline {
background: transparent;
color: var(--md-sys-color-primary);
border: 1px solid var(--md-sys-color-outline);
border-radius: var(--md-sys-shape-corner-small);
padding: .55rem 1.4rem;
font-weight: 600;
}
.btn.btn-outline:hover {
background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
border-color: var(--md-sys-color-primary);
}
.btn.btn-outline:active {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
.btn.btn-ghost,
.btn.btn-text {
background: transparent;
color: var(--md-sys-color-primary);
border: none;
border-radius: var(--md-sys-shape-corner-small);
padding: .55rem 1rem;
font-weight: 600;
}
.btn.btn-ghost:hover,
.btn.btn-text:hover {
background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.btn.btn-danger {
background: var(--md-sys-color-error-container);
color: var(--md-sys-color-on-error-container);
border: none;
border-radius: var(--md-sys-shape-corner-small);
padding: .55rem 1.4rem;
font-weight: 600;
}
.btn.btn-danger:hover {
background: var(--md-sys-color-error);
color: var(--md-sys-color-on-error);
box-shadow: var(--md-sys-elevation-2);
}
/* Header buttons (white-on-dark) */
.btn.btn-outline-white {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--md-sys-shape-corner-small);
}
.btn.btn-outline-white:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.5);
}
.btn.btn-ghost-white {
background: transparent;
color: #ffffff;
border: none;
border-radius: var(--md-sys-shape-corner-small);
}
.btn.btn-ghost-white:hover { background: rgba(255, 255, 255, 0.08); }
/* ─── Cards (Outlined variant by default; elevate on hover) ───────────── */
.dorm-card,
.college-card,
.home-blog-card,
.alumni-card-compact,
.eatery-card,
.shortlist-card,
.profile-review-card,
.themed-card {
border-radius: var(--md-sys-shape-corner-medium);
border: 1px solid var(--md-sys-color-outline-variant);
box-shadow: var(--md-sys-elevation-1);
}
.dorm-card:hover,
.college-card:hover,
.home-blog-card:hover,
.alumni-card-compact:hover,
.eatery-card:hover,
.shortlist-card:hover,
.profile-review-card:hover {
box-shadow: var(--md-sys-elevation-3);
transform: translateY(-2px);
}
/* ─── Quick-filter chips ──────────────────────────────────────────────── */
.qf-chip {
border-radius: var(--md-sys-shape-corner-small);
border: 1px solid var(--md-sys-color-outline-variant);
background: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
padding: .35rem .85rem;
font-weight: 500;
}
.qf-chip:hover {
background: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface));
border-color: var(--md-sys-color-primary);
}
.qf-chip.active,
.qf-chip[aria-pressed="true"] {
background: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
border-color: var(--md-sys-color-secondary);
font-weight: 600;
}
/* ─── Modals — extra-large corner radius + elevation 3 ────────────────── */
.modal-overlay {
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal {
border-radius: var(--md-sys-shape-corner-extra-large) !important;
box-shadow: var(--md-sys-elevation-3) !important;
border: 1px solid var(--md-sys-color-outline-variant);
/* Modal scrolling: max-height set to 85vh to allow most content to fit
naturally. If content exceeds this, the modal scrolls internally with
overscroll-behavior: contain to prevent page scroll. overflow-x: hidden
preserves rounded-corner clipping. May 2026 — reduced from 90vh to give
content more breathing room and reduce scrolling frequency. */
max-height: 85vh;
max-height: 85dvh; /* mobile-keyboard-safe */
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
/* ─── The Brief icon tiles ─────────────────────────────────────────────── */
.brief-icon {
border-radius: var(--md-sys-shape-corner-medium);
position: relative;
}
.brief-icon:hover {
box-shadow: var(--md-sys-elevation-2);
transform: translateY(-1px);
}
.brief-icon:active {
box-shadow: var(--md-sys-elevation-1);
transform: scale(0.96);
}
/* ─── Card hover state-layer (subtle primary overlay) ─────────────────── */
.dorm-card,
.college-card,
.home-blog-card { position: relative; }
.dorm-card::before,
.college-card::before,
.home-blog-card::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: var(--md-sys-color-primary);
opacity: 0;
border-radius: inherit;
transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
z-index: 0;
}
.dorm-card:hover::before,
.college-card:hover::before,
.home-blog-card:hover::before {
opacity: var(--md-sys-state-hover-opacity);
}
.dorm-card > *,
.college-card > *,
.home-blog-card > * {
position: relative;
z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════════════════
* MD3 Phase 3 — 2026-04-30
* Snackbars, Segmented Buttons, Typography Scale, Bottom Sheet anatomy,
* Chip variants, Outlined Text Fields, Nav Bar active indicator, FAB types,
* Linear Progress, List anatomy. All additions are opt-in via new class
* names; existing surfaces continue to work unchanged.
* ═══════════════════════════════════════════════════════════════════════════ */
/* ─── (1) MD3 Snackbar ──────────────────────────────────────────────────── */
/* Bottom-center container that stacks multiple snackbars vertically. The
toast() helper in app.js was upgraded to render