/* * Design tokens — all semantic UI colors, shadows, and accents live here. * `` is set by ThemeProvider (resolved value). * See docs/DESIGN_SYSTEM.md for how to extend the system without one-off colors. */ [data-theme='light'] { color-scheme: light; --text: #5b5366; --text-muted: #7a7285; --text-h: #0c0a12; /* Opaque warm off-white canvas (was #fffff5f7 — alpha washed to pure white over the browser default) */ --bg: #f6f5ef; --surface: #ffffff; --border: #e4e2e8; --code-bg: #edeaf2; --element-bg: #e5e3dd; --toggle-selected-bg: #c7c5bf; --toggle-selected-fg: var(--text); --toggle-selected-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22); --accent: #3a55ed; --accent-hover: #6d28d9; /* Text-style links / wordmark — hover uses grey, not accent */ --text-interactive-hover: #33313a; /* Home “Trial Viva” pill */ --cta-pill-bg: #1a1a1a; --cta-pill-bg-hover: #333333; --cta-pill-fg: #ffffff; --cta-pill-fg-hover: #ffffff; --site-index-bg: #f6f5ef; /* Home draggable overlays on hero / post-lede photos — layered depth */ --elevated-photo-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 10px 36px -10px rgba(0, 0, 0, 0.22), 0 36px 100px -40px rgba(0, 0, 0, 0.2); /* Reserved for accent-filled UI (e.g. future chip); primary CTAs use --cta-pill-fg */ --on-accent: #ffffff; --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.08); /* Wash over hero / post-lede photography */ --media-photo-wash: rgba(255, 255, 255, 0.3); --shadow-card-soft: 0 1px 2px color-mix(in srgb, var(--text-h) 4%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--text-h) 8%, transparent); /* Ghost controls: heading-colored label, slightly softer on hover */ --text-choice-hover: #3a3a42; /* Selection / picked-state accent (not used for keyboard focus outlines) */ --focus-ring-color: #0a0a0a; /* Verdict / readiness status (progress dashboard) */ --status-pass-fg: #15803d; --status-pass: #2a9d5c; --status-borderline-fg: #b45309; --status-borderline: #c9921a; --status-fail-fg: #c0392b; --status-fail: #c0392b; /* Trial mic — active (listening) state */ --trial-mic-accent: #2a6bc9; --trial-mic-accent-rgb: 42 107 201; /* QR code quiet zone — always white for scan reliability */ --qr-surface: #ffffff; /* Progress dashboard panels — matches directory-card depth */ --progress-panel-shadow: 0 0 0 1px color-mix(in srgb, var(--text-h) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.14), 0 10px 28px -6px rgba(0, 0, 0, 0.32), 0 22px 48px -14px rgba(0, 0, 0, 0.22); --progress-panel-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--text-h) 12%, transparent), 0 4px 8px rgba(0, 0, 0, 0.18), 0 14px 36px -8px rgba(0, 0, 0, 0.38), 0 28px 56px -16px rgba(0, 0, 0, 0.28); } [data-theme='dark'] { color-scheme: dark; --text: #a1a1aa; --text-muted: #71717a; --text-h: #fafafa; --bg: #11110c; --surface: #161612; --border: #2c2b24; --code-bg: #1e1e19; --element-bg: #262520; --toggle-selected-bg: #1a1916; --toggle-selected-fg: var(--text); --toggle-selected-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55); --accent: #a78bfa; --accent-hover: #c4b5fd; --text-interactive-hover: #d4d4d8; --cta-pill-bg: #fafafa; --cta-pill-bg-hover: #e8e8e8; --cta-pill-fg: #0a0a0a; --cta-pill-fg-hover: #0a0a0a; --site-index-bg: #1c1b16; --elevated-photo-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 12px 48px -12px rgba(0, 0, 0, 0.65), 0 48px 120px -48px rgba(0, 0, 0, 0.55); /* Reserved for accent-filled UI; primary CTAs use --cta-pill-fg */ --on-accent: #ffffff; --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.24); --media-photo-wash: rgba(255, 255, 255, 0.3); --shadow-card-soft: 0 1px 0 color-mix(in srgb, var(--text-h) 5%, transparent), 0 12px 32px -12px rgba(0, 0, 0, 0.45); --text-choice-hover: #b6b6be; /* Raised cards / panels in dark mode (pricing, FAQ, etc.) */ --shadow-panel-raised: 0 1px 0 color-mix(in srgb, var(--text-h) 6%, transparent), 0 18px 48px -20px rgba(0, 0, 0, 0.65); --focus-ring-color: #f4f4f5; --status-pass-fg: #4ade80; --status-pass: #22c55e; --status-borderline-fg: #fbbf24; --status-borderline: #d97706; --status-fail-fg: #f87171; --status-fail: #ef4444; --trial-mic-accent: #7eb8ff; --trial-mic-accent-rgb: 126 184 255; --qr-surface: #ffffff; --progress-panel-shadow: 0 0 0 1px color-mix(in srgb, var(--text-h) 12%, transparent), 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 24px 52px -14px rgba(0, 0, 0, 0.5); --progress-panel-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--text-h) 16%, transparent), 0 4px 10px rgba(0, 0, 0, 0.5), 0 16px 40px -10px rgba(0, 0, 0, 0.65), 0 30px 60px -16px rgba(0, 0, 0, 0.55); } :root { /* cursor.com uses proprietary CursorGothic; Inter matches that neutral UI sans role */ --sans: 'Inter', ui-sans-serif, system-ui, sans-serif; --heading: 'Inter', ui-sans-serif, system-ui, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; font: 16px/148% var(--sans); letter-spacing: -0.0105em; font-optical-sizing: auto; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Keyboard focus rings disabled sitewide (see app.css cascade override). */ :focus-visible { outline: none; } html { color: var(--text); /* Force opaque so any legacy alpha on `--bg` cannot wash the site to browser-white */ background-color: rgb(from var(--bg) r g b / 1); /* Prevent iOS from inflating type (feels like the page loaded zoomed in). */ -webkit-text-size-adjust: none; text-size-adjust: none; /* Clip sub-pixel horizontal bleed from full-bleed `100vw` sections on mobile. */ overflow-x: clip; /* Avoid double-tap zoom; keeps the layout viewport at device width on load. */ touch-action: manipulation; } html, body, #root { height: 100%; } body { margin: 0; width: 100%; overflow-x: clip; -webkit-text-size-adjust: none; text-size-adjust: none; } /* iOS Safari zooms focused fields below 16px and can keep that zoom on later loads. */ @media (max-width: 639px) { input:not( [type='checkbox'], [type='radio'], [type='range'], [type='hidden'], [type='button'], [type='submit'], [type='reset'], [type='file'], [type='image'] ), textarea, select { font-size: 1rem; } } #root { display: flex; flex-direction: column; min-height: 100%; } h1 { font-family: var(--heading); font-weight: 600; color: var(--text-h); font-size: 1.825rem; letter-spacing: -0.029em; margin: 0 0 0.925rem; } code { font-family: var(--mono); padding: 0.15em 0.4em; border-radius: 4px; background: var(--code-bg); color: var(--text-h); } .companion-link-layout { display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg); color: var(--text); } .companion-link-layout__header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 0.75rem; padding: max(0.55rem, env(safe-area-inset-top, 0px)) max(var(--page-inline), env(safe-area-inset-right, 0px)) 0.55rem max(var(--page-inline), env(safe-area-inset-left, 0px)); border-bottom: 1px solid color-mix(in srgb, var(--text-h) 8%, transparent); background: color-mix(in srgb, var(--bg) 92%, var(--site-index-bg) 8%); } .companion-link-layout__main { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .companion-link-layout__main > * { flex: 1 1 auto; min-height: 0; } .reactEasyCrop_Container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; user-select: none; touch-action: none; cursor: move; display: flex; justify-content: center; align-items: center; } .reactEasyCrop_Image, .reactEasyCrop_Video { will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */ } .reactEasyCrop_Contain { max-width: 100%; max-height: 100%; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .reactEasyCrop_Cover_Horizontal { width: 100%; height: auto; } .reactEasyCrop_Cover_Vertical { width: auto; height: 100%; } .reactEasyCrop_CropArea { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.5); box-sizing: border-box; box-shadow: 0 0 0 9999em; color: rgba(0, 0, 0, 0.5); overflow: hidden; } .reactEasyCrop_CropAreaRound { border-radius: 50%; } .reactEasyCrop_CropAreaGrid::before { content: ' '; box-sizing: border-box; position: absolute; border: 1px solid rgba(255, 255, 255, 0.5); top: 0; bottom: 0; left: 33.33%; right: 33.33%; border-top: 0; border-bottom: 0; } .reactEasyCrop_CropAreaGrid::after { content: ' '; box-sizing: border-box; position: absolute; border: 1px solid rgba(255, 255, 255, 0.5); top: 33.33%; bottom: 33.33%; left: 0; right: 0; border-left: 0; border-right: 0; } /** * Application styles — import order matters for cascade. * Tokens: theme/theme.css (via index.css). Layers: layout → primitives → routes. */ /* Shell: header, main, global page column, footer bar, theme toggle */ .layout { display: flex; flex-direction: column; min-height: 100%; /* Equal horizontal inset (header, main, footers); ~10% wider than prior */ --page-inline-base: calc((1.5rem + 6rem / 2 + 1vw) * 1.1); --page-inline-factor: 1; --page-inline: calc(var(--page-inline-base) * var(--page-inline-factor)); /* Header row height budget (picker / sign-in); ~20% shorter than 1.62rem slot era */ --site-header-slot-h: 1.3rem; /* Full fixed header block: vertical padding + tallest control (+3px) + vertical padding */ --site-header-chrome-h: calc(0.8rem + var(--site-header-slot-h) + 3px + 0.8rem); /* Clearance under fixed header for main content (was 3.35rem) */ --site-header-clearance: 2.68rem; } /* Below Tailwind `sm` (640px): side margins 80% smaller (20% of default formula). */ @media (max-width: 639px) { .layout { --page-inline-base: calc((1.5rem + 5.25rem / 2 + 1vw) * 1.1); --page-inline-factor: 0.2; } } .site-header { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 1000; flex-shrink: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1.1rem; row-gap: 0.6rem; padding: 0.8rem calc(var(--page-inline) + env(safe-area-inset-right, 0px)) 0.8rem calc(var(--page-inline) + env(safe-area-inset-left, 0px)); box-sizing: border-box; /* `--bg` can include alpha (e.g. light theme); keep the chrome fully opaque */ background: rgb(from var(--bg) r g b / 1); overflow: visible; } /* Marketing shell: hamburger + drawer below this width; inline nav only when there is room */ /* Keep in sync: `max-width` here = one less than `min-width` for desktop marketing rules + mobile-nav hide */ .site-header__menu-toggle { display: none; flex-shrink: 0; align-items: center; justify-content: center; margin: 0; padding: 0.35rem; border: none; border-radius: 8px; background: transparent; color: var(--text-h); cursor: pointer; line-height: 0; } .site-header__menu-toggle:hover { color: var(--text-interactive-hover); } .site-header__menu-toggle:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } @media (max-width: 959px) { .site-header--marketing { display: flex; flex-wrap: nowrap; align-items: center; column-gap: 0.5rem; row-gap: 0; } .site-header--marketing .site-header__start { flex: 0 1 auto; min-width: 0; /* Avoid line-box / baseline strut so the compact mic mark lines up with Sign in + menu */ display: flex; align-items: center; } .site-header--marketing .site-header__center { display: none !important; } /* Trailing region grows; college + Sign in + menu bunched at the right edge */ .site-header--marketing .site-header__end { flex: 1 1 auto; min-width: 0; justify-content: flex-end; } .site-header--marketing .site-header__marketing-actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.35rem; width: auto; max-width: 100%; min-width: 0; } .site-header--marketing .site-header__marketing-actions > * { flex: 0 0 auto; min-width: 0; } .site-header--marketing .site-header__menu-toggle { display: inline-flex; } } /* Desktop marketing: full center nav; college + sign-in stay on one row (no wrap before nav collapses) */ @media (min-width: 960px) { .site-header--marketing .site-header__center { flex-wrap: nowrap; } .site-header--marketing .site-header__end { flex-wrap: nowrap; } .site-header--marketing .site-header__marketing-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.42rem; } } .site-header-mobile-nav[hidden] { display: none !important; } .site-header-mobile-nav:not([hidden]) { position: fixed; inset: 0; z-index: 1500; pointer-events: auto; } .site-header-mobile-nav__backdrop { position: absolute; inset: 0; margin: 0; padding: 0; border: none; border-radius: 0; background: color-mix(in srgb, var(--text-h) 28%, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; } .site-header-mobile-nav__sheet { position: absolute; top: 0; right: 0; bottom: 0; box-sizing: border-box; width: min(20.5rem, calc(100% - 1.25rem)); max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); padding: calc(0.85rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px)); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--elevated-photo-shadow); overflow: auto; overscroll-behavior: contain; } .site-header-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .site-header-mobile-nav__title { margin: 0; font-family: var(--heading); font-size: 1.05rem; font-weight: 600; color: var(--text-h); } .site-header-mobile-nav__close { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0.35rem; border: none; border-radius: 8px; background: transparent; color: var(--text-h); cursor: pointer; line-height: 0; } .site-header-mobile-nav__close:hover { color: var(--text-interactive-hover); } .site-header-mobile-nav__nav { display: flex; flex-direction: column; gap: 0.35rem; } .site-header-mobile-nav__group-label { margin: 1rem 0 0.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .site-header-mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; } .site-header-mobile-nav__link { display: block; padding: 0.75rem 0.85rem; /* larger tap target for mobile (~48px effective) */ font-size: 0.95rem; font-weight: 400; line-height: 1.45; color: var(--text-h); text-decoration: none; border-radius: 8px; min-height: 44px; /* ensure good touch target */ display: flex; align-items: center; } .site-header-mobile-nav__link:hover { color: var(--text-interactive-hover); } .site-header-mobile-nav__link--active { font-weight: 600; } @media (min-width: 960px) { .site-header-mobile-nav { display: none !important; } } .site-header__start { justify-self: start; } .site-header__center { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45rem 1.9rem; transition: opacity 0.24s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.24s ease; } .site-header__dropdown { position: relative; display: flex; align-items: center; } .site-header__dropdown-trigger { margin: 0; padding: 0.2rem 0; border: none; background: none; font-family: inherit; font-size: 0.85625rem; font-weight: 400; letter-spacing: inherit; color: var(--text); cursor: pointer; white-space: nowrap; border-radius: 4px; } a.site-header__dropdown-trigger { text-decoration: none; cursor: pointer; } .site-header__dropdown-trigger:hover { color: var(--text-interactive-hover); text-decoration: underline; text-underline-offset: 2px; } .site-header__dropdown-trigger:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .site-header__dropdown-trigger--active { color: var(--text-h); } /* Hit area between trigger and panel so hover isn’t dropped */ .site-header__dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 0.45rem; z-index: 1; } .site-header__dropdown-panel { position: absolute; top: calc(100% + 0.35rem); left: 50%; transform: translateX(-50%); z-index: 1100; min-width: 11.5rem; max-width: min(18rem, calc(100vw - 2rem)); padding: 0.35rem 0; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--elevated-photo-shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease, visibility 0.12s ease; } .site-header__dropdown--open .site-header__dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; } .site-header__dropdown-list { list-style: none; margin: 0; padding: 0; } .site-header__dropdown-list li { margin: 0; } .site-header__dropdown-link { display: block; padding: 0.4rem 1rem; font-size: 0.85625rem; font-weight: 400; line-height: 1.45; color: var(--text-h); text-decoration: none; } .site-header__dropdown-link:hover { color: var(--text-interactive-hover); background: color-mix(in srgb, var(--text-h) 5%, transparent); } .site-header__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem 1.375rem; justify-self: end; } @media (max-width: 720px) { .site-header:not(.site-header--marketing) { grid-template-columns: 1fr auto; grid-template-rows: auto auto; } .site-header:not(.site-header--marketing) .site-header__start { grid-column: 1; grid-row: 1; } .site-header:not(.site-header--marketing) .site-header__end { grid-column: 2; grid-row: 1; } .site-header:not(.site-header--marketing) .site-header__center { grid-column: 1 / -1; grid-row: 2; } } /* Logged-in workspace shell — primary row (logo | modes or title | theme + user) */ .site-header--workspace { --site-header-workspace-control-gap: 0.42rem; display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; } .site-header__workspace-primary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1.1rem; width: 100%; } /* Station / Viva / Progress workspace routes: logo + controls only */ .site-header__workspace-primary--no-center { grid-template-columns: 1fr auto; } .site-header--workspace .site-header__start { justify-self: start; } .site-header--workspace .site-header__workspace-modes { justify-self: center; display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem 1rem; min-width: 0; } .site-header--workspace .site-header__page-title-slot, .site-header--workspace .site-header__workspace-modes { transition: opacity 0.24s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.24s ease; } /* Mic-only mark (≤720px): reveal wordmark on hover/focus and tuck center nav / title aside */ .site-header:has(.site-logo--compact-mark:hover) .site-header__center, .site-header:has(.site-logo--compact-mark:focus-visible) .site-header__center, .site-header:has(.site-logo--compact-mark:focus-within) .site-header__center, .site-header:has(.site-logo--compact-mark:hover) .site-header__page-title-slot, .site-header:has(.site-logo--compact-mark:focus-visible) .site-header__page-title-slot, .site-header:has(.site-logo--compact-mark:focus-within) .site-header__page-title-slot, .site-header:has(.site-logo--compact-mark:hover) .site-header__workspace-modes, .site-header:has(.site-logo--compact-mark:focus-visible) .site-header__workspace-modes, .site-header:has(.site-logo--compact-mark:focus-within) .site-header__workspace-modes { opacity: 0; visibility: hidden; transform: translateY(-0.18rem) scale(0.98); pointer-events: none; } /* Equal spacing: theme ↔ session / a11y / builder settings ↔ account (matches in-slot gap) */ .site-header--workspace .site-header__end { justify-self: end; gap: var(--site-header-workspace-control-gap); } .site-header--workspace .site-header__theme-slot { display: flex; align-items: center; gap: var(--site-header-workspace-control-gap); flex: 0 0 auto; position: relative; } /* Application route: optional session countdown (accessibility “Timer”), left of session info */ .site-header__application-viva-timer { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; flex: 0 0 auto; max-width: 0; min-width: 0; opacity: 0; overflow: hidden; transform: translateX(6px); transition: max-width 0.28s ease, opacity 0.22s ease, transform 0.28s ease; pointer-events: none; } .site-header__application-viva-timer--visible { max-width: 5.75rem; opacity: 1; transform: translateX(0); } .site-header__application-viva-timer-face { font-size: 0.85625rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .site-header__application-viva-timer { transition: opacity 0.15s ease; transform: none; } .site-header__application-viva-timer--visible { transform: none; } .site-header--workspace .site-header__page-title-slot, .site-header--workspace .site-header__workspace-modes { transition: opacity 0.15s ease; transform: none; } .site-header:has(.site-logo--compact-mark:hover) .site-header__center, .site-header:has(.site-logo--compact-mark:focus-visible) .site-header__center, .site-header:has(.site-logo--compact-mark:focus-within) .site-header__center, .site-header:has(.site-logo--compact-mark:hover) .site-header__page-title-slot, .site-header:has(.site-logo--compact-mark:focus-visible) .site-header__page-title-slot, .site-header:has(.site-logo--compact-mark:focus-within) .site-header__page-title-slot, .site-header:has(.site-logo--compact-mark:hover) .site-header__workspace-modes, .site-header:has(.site-logo--compact-mark:focus-visible) .site-header__workspace-modes, .site-header:has(.site-logo--compact-mark:focus-within) .site-header__workspace-modes { transform: none; } } .site-header__session-info { position: relative; display: inline-flex; align-items: center; } .site-header__session-info-trigger { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 2.12rem; height: calc(var(--site-header-slot-h) + 3px); margin: 0; padding: 1.5px; border: 1px solid var(--border); border-radius: 9999px; color: var(--text-muted); background: var(--element-bg); cursor: pointer; transition: color 0.15s ease; } .site-header__session-info-trigger:hover { color: var(--text-h); } .site-header__session-info--open .site-header__session-info-trigger { color: var(--text); } .site-header__session-info-icon { display: flex; width: 1.05rem; height: 1.05rem; } .site-header__session-info-icon svg { width: 100%; height: 100%; } .site-header__session-info-trigger:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .site-header__session-info-panel { position: absolute; top: calc(100% + 0.45rem); right: 0; z-index: 1200; width: min(22.5rem, calc(100vw - 2rem)); padding: 0.65rem 0.72rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--elevated-photo-shadow); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease; } .site-header__session-info-panel p { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--text); } .site-header__session-info-panel p + p { margin-top: 0.55rem; } .site-header__session-info--open .site-header__session-info-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Hover/focus hint under header icon buttons (same box as theme picker tooltip) */ .site-header__control-hint { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200; padding: 0.35rem 0.55rem; font-size: 0.75rem; font-weight: 500; line-height: 1.2; color: var(--text); background: var(--element-bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--elevated-photo-shadow); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; } /* Hover only: focus stays on the trigger after click; :focus-within would keep the hint visible without hover */ .site-header__session-info:hover .site-header__control-hint { opacity: 1; visibility: visible; transform: translateY(0); } .site-header__session-info--open .site-header__control-hint, .site-header__session-info--open:hover .site-header__control-hint, .site-header__session-info--open:focus-within .site-header__control-hint { opacity: 0; visibility: hidden; transform: translateY(4px); } /* After trigger click: hide hint until pointer leaves anchor (new hover), like theme picker */ .site-header__session-info--suppress-hint .site-header__control-hint, .site-header__session-info--suppress-hint:hover .site-header__control-hint, .site-header__session-info--suppress-hint:focus-within .site-header__control-hint { opacity: 0; visibility: hidden; transform: translateY(4px); } /* Application route: accessibility options (subtitles, timer) between session info and theme. Builder session menu (/viva-builder, /station-builder) reuses the same chrome. */ .site-header__app-accessibility, .site-header__builder-session { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; } /* Station Voice / Written segmented control — "Mode" + icons; expands to Voice/Written */ .site-header__station-mode { position: relative; display: inline-flex; align-items: stretch; flex: 0 0 auto; height: calc(var(--site-header-slot-h) + 6px); padding: 2px; border: 1px solid var(--border); border-radius: 9999px; background: color-mix(in srgb, var(--element-bg) 88%, var(--text-h) 4%); box-sizing: border-box; } .site-header__station-mode-caption { display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 3.25rem; margin: 0; padding: 0 0.2rem 0 0.55rem; overflow: hidden; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; color: var(--text-muted); opacity: 1; transition: max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1), padding 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease; } .site-header__station-mode:hover .site-header__station-mode-caption, .site-header__station-mode:focus-within .site-header__station-mode-caption { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; } .site-header__station-mode-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: stretch; flex: 0 0 auto; width: 4.5rem; min-width: 4.5rem; transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), min-width 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .site-header__station-mode:hover .site-header__station-mode-switch, .site-header__station-mode:focus-within .site-header__station-mode-switch { width: 11rem; min-width: 11rem; } .site-header__station-mode-thumb { position: absolute; inset: 0 auto 0 0; width: 50%; border-radius: 9999px; background: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--text-h) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 0; } .site-header__station-mode-thumb--written { transform: translateX(100%); } .site-header__station-mode-option { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; width: 100%; height: 100%; min-height: 0; gap: 0; margin: 0; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: var(--text-muted); cursor: pointer; line-height: 1; transition: color 0.15s ease, gap 0.28s cubic-bezier(0.22, 1, 0.36, 1), padding 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .site-header__station-mode:hover .site-header__station-mode-option, .site-header__station-mode:focus-within .site-header__station-mode-option { gap: 0.32rem; padding: 0 0.5rem; } .site-header__station-mode-option:hover { color: var(--text-h); } .site-header__station-mode-option--on { color: var(--text-h); } .site-header__station-mode-option:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: 2px; } .site-header__station-mode-option-art { display: flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; line-height: 0; } .site-header__station-mode-art { display: block; width: 100%; height: 100%; } .site-header__station-mode-option-label { display: inline-flex; align-items: center; max-width: 0; margin: 0; overflow: hidden; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; opacity: 0; transition: max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease; } .site-header__station-mode:hover .site-header__station-mode-option-label, .site-header__station-mode:focus-within .site-header__station-mode-option-label { max-width: 4.25rem; opacity: 1; } @media (max-width: 639px) { .site-header__station-mode:hover .site-header__station-mode-caption, .site-header__station-mode:focus-within .site-header__station-mode-caption { max-width: 3.25rem; padding: 0 0.2rem 0 0.55rem; opacity: 1; } .site-header__station-mode:hover .site-header__station-mode-switch, .site-header__station-mode:focus-within .site-header__station-mode-switch { width: 4.5rem; min-width: 4.5rem; } .site-header__station-mode:hover .site-header__station-mode-option, .site-header__station-mode:focus-within .site-header__station-mode-option { gap: 0; padding: 0; } .site-header__station-mode-option-label { display: none; } } @media (prefers-reduced-motion: reduce) { .site-header__station-mode-caption, .site-header__station-mode-switch, .site-header__station-mode-option, .site-header__station-mode-option-label, .site-header__station-mode-thumb { transition: none; } } .site-header__app-accessibility-trigger, .site-header__builder-session-trigger { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 2.12rem; height: calc(var(--site-header-slot-h) + 3px); margin: 0; padding: 1.5px; border: 1px solid var(--border); border-radius: 9999px; color: var(--text-muted); background: var(--element-bg); cursor: pointer; transition: color 0.15s ease; } .site-header__app-accessibility-trigger:hover, .site-header__builder-session-trigger:hover { color: var(--text-h); } .site-header__app-accessibility--open .site-header__app-accessibility-trigger, .site-header__builder-session--open .site-header__builder-session-trigger { color: var(--text); } .site-header__app-accessibility-trigger-icon, .site-header__builder-session-trigger-icon { display: flex; width: 1.05rem; height: 1.05rem; } .site-header__app-accessibility-trigger-svg, .site-header__builder-session-trigger-svg { width: 100%; height: 100%; } .site-header__app-accessibility-trigger:focus-visible, .site-header__builder-session-trigger:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .site-header__app-accessibility-panel { position: absolute; top: calc(100% + 0.45rem); right: 0; z-index: 1200; min-width: 12.5rem; padding: 0.5rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--elevated-photo-shadow); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease; } .site-header__app-accessibility--open .site-header__app-accessibility-panel, .site-header__builder-session--open .site-header__app-accessibility-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .site-header__app-accessibility:hover .site-header__control-hint, .site-header__builder-session:hover .site-header__control-hint { opacity: 1; visibility: visible; transform: translateY(0); } .site-header__app-accessibility--open .site-header__control-hint, .site-header__app-accessibility--open:hover .site-header__control-hint, .site-header__app-accessibility--open:focus-within .site-header__control-hint, .site-header__builder-session--open .site-header__control-hint, .site-header__builder-session--open:hover .site-header__control-hint, .site-header__builder-session--open:focus-within .site-header__control-hint { opacity: 0; visibility: hidden; transform: translateY(4px); } .site-header__app-accessibility--suppress-hint .site-header__control-hint, .site-header__app-accessibility--suppress-hint:hover .site-header__control-hint, .site-header__app-accessibility--suppress-hint:focus-within .site-header__control-hint, .site-header__builder-session--suppress-hint .site-header__control-hint, .site-header__builder-session--suppress-hint:hover .site-header__control-hint, .site-header__builder-session--suppress-hint:focus-within .site-header__control-hint { opacity: 0; visibility: hidden; transform: translateY(4px); } .site-header__app-accessibility-row { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) 2.35rem; align-items: center; gap: 0.45rem 0.55rem; padding: 0.38rem 0.2rem; } .site-header__app-accessibility-row + .site-header__app-accessibility-row { border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent); margin-top: 0.12rem; padding-top: 0.5rem; } .site-header__app-accessibility-row-lead { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.2rem; height: 1.2rem; color: var(--text-h); } .site-header__app-accessibility-option-t { font-size: 0.95rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-family: system-ui, sans-serif; } .site-header__app-accessibility-option-svg { width: 1.05rem; height: 1.05rem; } .site-header__app-accessibility-row-label { font-size: 0.8rem; line-height: 1.25; color: var(--text); } .site-header__app-accessibility-switch { position: relative; flex-shrink: 0; justify-self: end; width: 2.35rem; height: 1.28rem; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--border) 90%, var(--text-h)); border-radius: 9999px; background: color-mix(in srgb, var(--text-h) 8%, var(--element-bg)); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .site-header__app-accessibility-switch:hover { border-color: color-mix(in srgb, var(--text-h) 35%, var(--border)); } .site-header__app-accessibility-switch:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: 2px; } .site-header__app-accessibility-switch-thumb { position: absolute; top: 50%; left: 2px; width: 0.92rem; height: 0.92rem; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--text-h) 18%, transparent); transform: translateY(-50%); transition: transform 0.15s ease; pointer-events: none; } .site-header__app-accessibility-switch--on { background: color-mix(in srgb, var(--text-h) 42%, var(--element-bg)); border-color: color-mix(in srgb, var(--text-h) 45%, var(--border)); } .site-header__app-accessibility-switch--on .site-header__app-accessibility-switch-thumb { transform: translate(1.05rem, -50%); } .site-header__app-accessibility-switch--locked, .site-header__app-accessibility-switch--locked:hover { opacity: 0.55; cursor: not-allowed; pointer-events: none; border-color: color-mix(in srgb, var(--border) 90%, var(--text-h)); } .site-header__app-accessibility-row--locked .site-header__app-accessibility-row-label { opacity: 0.72; } .site-header__app-accessibility-row--locked { position: relative; } .site-header__builder-session-row-hint { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1300; padding: 0.3rem 0.5rem; font-size: 0.72rem; font-weight: 500; line-height: 1.2; color: var(--text); background: var(--element-bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--elevated-photo-shadow); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(2px); transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; } .site-header__app-accessibility-row--locked:hover .site-header__builder-session-row-hint, .site-header__app-accessibility-row--locked:focus-within .site-header__builder-session-row-hint, .site-header__builder-voice-row--min-selected:hover .site-header__builder-session-row-hint, .site-header__builder-voice-row--min-selected:focus-within .site-header__builder-session-row-hint { opacity: 1; visibility: visible; transform: translateY(0); } .site-header__builder-session-panel { max-height: min(70vh, 28rem); overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; } .site-header__builder-voice-row { grid-template-columns: minmax(0, 1fr) 2.35rem; } .site-header__builder-session-voices-loading { margin: 0; padding: 0.2rem 0.2rem; font-size: 0.75rem; color: var(--text); opacity: 0.75; } .site-header__workspace-mode-link { font-size: 0.85625rem; font-weight: 400; color: var(--text); text-decoration: none; white-space: nowrap; border-radius: 4px; } .site-header__workspace-mode-link--outlined { padding: 0.3rem 0.75rem; border: 1px solid color-mix(in srgb, var(--text-h) 28%, var(--border)); border-radius: 9999px; font-weight: 600; color: var(--text-h); } .site-header__workspace-mode-link:hover { color: var(--text-interactive-hover); text-decoration: underline; text-underline-offset: 2px; } .site-header__workspace-mode-link--outlined:hover { color: var(--text-h); border-color: color-mix(in srgb, var(--text-h) 42%, var(--border)); text-decoration: none; } .site-header__workspace-mode-link:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .site-header__workspace-mode-link--active { color: var(--text-h); font-weight: 600; } /* Workspace pages with a route title in the shared header */ .site-header--workspace-viva-builder .site-header__workspace-primary { grid-template-columns: 1fr auto 1fr; /* Centre logo (wordmark or mic), page title / feedback toggle, and theme + account on one axis */ align-items: center; } .site-header--workspace-viva-builder .site-header__start { grid-column: 1; justify-self: start; } .site-header--workspace-viva-builder .site-header__page-title-slot { grid-column: 2; justify-self: center; min-width: 0; } .site-header__page-title-slot--with-nav { display: flex; align-items: center; gap: 0.75rem 1rem; } .site-header--workspace-viva-builder .site-header__end { grid-column: 3; justify-self: end; align-self: center; } .site-header__page-heading { margin: 0; font-family: var(--heading); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.029em; line-height: 1.35; color: var(--text-h); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(55vw, 18rem); } /* /feedback — same affordance as former in-page title toggle */ .site-header__feedback-scope-toggle { margin: 0; padding: 0; max-width: 100%; appearance: none; background: none; border: none; border-radius: 6px; font: inherit; font-weight: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; text-align: center; cursor: pointer; transition: color 0.2s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-header__feedback-scope-toggle:hover { color: var(--text-interactive-hover); } .site-header__feedback-scope-toggle:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } /* Workspace header account: icon + shared `.site-header__control-hint` label (see `WorkspaceUserAccount`) */ .site-header__user-account { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; } .site-header__user-account-trigger { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 2.12rem; height: calc(var(--site-header-slot-h) + 3px); margin: 0; padding: 1.5px; border: 1px solid var(--border); border-radius: 9999px; color: var(--text-muted); background: var(--element-bg); cursor: pointer; transition: color 0.15s ease; } .site-header__user-account-trigger:hover { color: var(--text-h); } .site-header__user-account-trigger:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .site-header__user-account--open .site-header__user-account-trigger { color: var(--text); } .site-header__user-account-icon { display: flex; width: 1.05rem; height: 1.05rem; } .site-header__user-account-icon svg { width: 100%; height: 100%; } .site-header__user-account:hover .site-header__control-hint { opacity: 1; visibility: visible; transform: translateY(0); } .site-header__user-account--suppress-hint .site-header__control-hint, .site-header__user-account--suppress-hint:hover .site-header__control-hint, .site-header__user-account--suppress-hint:focus-within .site-header__control-hint { opacity: 0; visibility: hidden; transform: translateY(4px); } .site-header__user-account--open .site-header__control-hint, .site-header__user-account--open:hover .site-header__control-hint, .site-header__user-account--open:focus-within .site-header__control-hint { opacity: 0; visibility: hidden; transform: translateY(4px); } /* Workspace account: full-screen dimmed backdrop + large tile (see `WorkspaceUserAccount`) */ .account-modal { position: fixed; inset: 0; z-index: 1600; box-sizing: border-box; } .account-modal__backdrop { position: absolute; inset: 0; margin: 0; padding: 0; border: none; border-radius: 0; background: color-mix(in srgb, var(--text-h) 52%, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; } .account-modal__frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); pointer-events: none; } .account-modal__tile { pointer-events: auto; box-sizing: border-box; width: min(100%, min(92vw, 44rem)); max-height: min(88vh, 44rem); overflow: auto; overscroll-behavior: contain; padding: 1.15rem 1.2rem 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--elevated-photo-shadow); } .account-modal__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.15rem; } .account-modal__title { margin: 0; font-family: var(--heading); font-size: 1.25rem; font-weight: 600; color: var(--text-h); } .account-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 1.5rem; line-height: 1; color: var(--text-muted); background: transparent; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .account-modal__close:hover { color: var(--text-h); background: color-mix(in srgb, var(--text-h) 6%, transparent); } .account-modal__close:focus, .account-modal__close:focus-visible { outline: none; } .account-modal__body { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem 1.25rem; align-items: start; } @media (max-width: 520px) { .account-modal__body { grid-template-columns: 1fr; justify-items: center; text-align: center; } .account-modal__fields { width: 100%; } .account-modal__dd--subscription { justify-content: center; text-align: center; } } .account-modal__photo-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .account-modal__photo-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .account-modal__photo-button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0; border: none; background: none; cursor: pointer; color: inherit; } .account-modal__photo-button:focus { outline: none; } .account-modal__photo-button:focus-visible .account-modal__photo, .account-modal__photo-button:focus-visible .account-modal__photo--placeholder { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); } .account-modal__photo-button:disabled { cursor: not-allowed; opacity: 0.72; } .account-modal__photo-hint { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .account-modal__photo-button:hover:not(:disabled) .account-modal__photo-hint, .account-modal__photo-button:focus-visible .account-modal__photo-hint { color: var(--text-interactive-hover); } .account-modal__photo-error { margin: 0; max-width: 12rem; font-size: 0.75rem; line-height: 1.35; text-align: center; color: #7f1d1d; } .account-modal__photo { display: block; width: 5.5rem; height: 5.5rem; border-radius: 9999px; object-fit: cover; border: 1px solid var(--border); background: var(--element-bg); } .account-modal__photo--placeholder { display: flex; align-items: center; justify-content: center; } .account-modal__photo-initials { font-size: 1.35rem; font-weight: 600; color: var(--text-h); letter-spacing: 0.03em; } .account-modal__fields { margin: 0; display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; } .account-modal__field { margin: 0; } .account-modal__dt { margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .account-modal__dd { margin: 0; font-size: 0.95rem; line-height: 1.35; color: var(--text); word-break: break-word; } .account-modal__input { display: block; width: 100%; margin: 0; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--element-bg); } .account-modal__input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .account-modal__profile-error { margin-top: 0.75rem; max-width: none; text-align: left; } .account-modal__profile-success { margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: #166534; } .account-modal__empty { color: var(--text-muted); font-style: italic; } .account-modal__hint { margin: 0.25rem 0 0; font-size: 0.75rem; line-height: 1.35; color: var(--text-muted); } .account-modal__dd--subscription { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.75rem; } .account-modal__subscription-label { min-width: 0; } .account-modal__upgrade { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-h); text-decoration: none; white-space: nowrap; padding: 0.28rem 0.55rem; border-radius: 7px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text-h) 5%, transparent); } .account-modal__upgrade:hover { color: var(--text-interactive-hover); border-color: color-mix(in srgb, var(--text-h) 28%, var(--border)); text-decoration: none; } .account-modal__upgrade:focus, .account-modal__upgrade:focus-visible { outline: none; } .account-modal__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.65rem; margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px solid var(--border); } .account-modal__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; padding: 0.4rem 1rem; border-radius: 8px; font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .account-modal__btn--secondary { border: 1px solid var(--border); color: var(--text); background: var(--element-bg); } .account-modal__btn--secondary:hover { border-color: color-mix(in srgb, var(--text-h) 22%, var(--border)); color: var(--text-h); } .account-modal__btn--secondary:focus, .account-modal__btn--secondary:focus-visible { outline: none; } .account-modal__btn--primary { border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--text-h); background: color-mix(in srgb, var(--accent) 14%, var(--element-bg)); } .account-modal__btn--primary:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); background: color-mix(in srgb, var(--accent) 22%, var(--element-bg)); } .account-modal__btn--primary:disabled { cursor: not-allowed; opacity: 0.72; } .account-modal__btn--primary:focus, .account-modal__btn--primary:focus-visible { outline: none; } .account-modal__btn--danger { border: 1px solid color-mix(in srgb, #c53030 45%, var(--border)); color: #c53030; background: color-mix(in srgb, #c53030 6%, transparent); } .account-modal__btn--danger:hover { background: color-mix(in srgb, #c53030 12%, transparent); } .account-modal__btn--danger:focus, .account-modal__btn--danger:focus-visible { outline: none; } /* Avatar crop modal (opens above account modal) */ .avatar-crop-modal { position: fixed; inset: 0; z-index: 1700; box-sizing: border-box; } .avatar-crop-modal__backdrop { position: absolute; inset: 0; margin: 0; padding: 0; border: none; border-radius: 0; background: color-mix(in srgb, var(--text-h) 58%, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; } .avatar-crop-modal__backdrop:disabled { cursor: not-allowed; } .avatar-crop-modal__frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); pointer-events: none; } .avatar-crop-modal__tile { pointer-events: auto; box-sizing: border-box; width: min(100%, min(92vw, 28rem)); max-height: min(92vh, 40rem); overflow: auto; overscroll-behavior: contain; padding: 1.15rem 1.2rem 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--elevated-photo-shadow); } .avatar-crop-modal__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; } .avatar-crop-modal__title { margin: 0; font-family: var(--heading); font-size: 1.15rem; font-weight: 600; color: var(--text-h); } .avatar-crop-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 1.5rem; line-height: 1; color: var(--text-muted); background: transparent; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .avatar-crop-modal__close:hover:not(:disabled) { color: var(--text-h); background: color-mix(in srgb, var(--text-h) 6%, transparent); } .avatar-crop-modal__close:disabled { cursor: not-allowed; opacity: 0.72; } .avatar-crop-modal__close:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .avatar-crop-modal__hint { margin: 0 0 0.85rem; font-size: 0.8125rem; line-height: 1.4; color: var(--text-muted); } .avatar-crop-modal__crop-area { position: relative; width: 100%; height: min(52vw, 18rem); margin-bottom: 0.85rem; border-radius: 10px; overflow: hidden; background: var(--element-bg); border: 1px solid var(--border); } .avatar-crop-modal__zoom-label { display: block; margin-bottom: 0.35rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .avatar-crop-modal__zoom { display: block; width: 100%; margin: 0 0 0.85rem; accent-color: var(--accent); } .avatar-crop-modal__error { margin: 0 0 0.85rem; font-size: 0.8125rem; line-height: 1.35; color: #7f1d1d; } .avatar-crop-modal__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.65rem; padding-top: 0.15rem; } .avatar-crop-modal__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; padding: 0.4rem 1rem; border-radius: 8px; font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .avatar-crop-modal__btn:disabled { cursor: not-allowed; opacity: 0.72; } .avatar-crop-modal__btn--secondary { border: 1px solid var(--border); color: var(--text); background: var(--element-bg); } .avatar-crop-modal__btn--secondary:hover:not(:disabled) { border-color: color-mix(in srgb, var(--text-h) 22%, var(--border)); color: var(--text-h); } .avatar-crop-modal__btn--primary { border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--surface); background: var(--accent); } .avatar-crop-modal__btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--text-h)); } .avatar-crop-modal__btn:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } @media (max-width: 720px) { .site-header__workspace-primary { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 0.35rem; } /* Let the logo link shrink so wordmark can ellipsis beside the mic */ .site-header--workspace .site-header__start { min-width: 0; } .site-header--workspace:not(.site-header--workspace-viva-builder) .site-header__start { grid-column: 1; grid-row: 1; } .site-header--workspace:not(.site-header--workspace-viva-builder) .site-header__end { grid-column: 2; grid-row: 1; } .site-header--workspace:not(.site-header--workspace-viva-builder) .site-header__workspace-modes { grid-column: 1 / -1; grid-row: 2; justify-self: center; } .site-header__workspace-primary--no-center { grid-template-rows: auto; row-gap: 0; } .site-header__workspace-primary--no-center .site-header__start { grid-column: 1; grid-row: 1; } .site-header__workspace-primary--no-center .site-header__end { grid-column: 2; grid-row: 1; } .site-header--workspace-viva-builder .site-header__workspace-primary { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 0.35rem; align-items: center; } .site-header--workspace-viva-builder .site-header__start { grid-column: 1; grid-row: 1; } .site-header--workspace-viva-builder .site-header__end { grid-column: 2; grid-row: 1; align-self: center; } .site-header--workspace-viva-builder:not(.site-header--workspace-feedback) .site-header__page-title-slot { grid-column: 1 / -1; grid-row: 2; justify-self: center; } /* /feedback — one row with mic | Feedback (ellipsis) | theme + account */ .site-header--workspace-viva-builder.site-header--workspace-feedback .site-header__workspace-primary { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; row-gap: 0; align-items: center; } .site-header--workspace-viva-builder.site-header--workspace-feedback .site-header__start { grid-column: 1; grid-row: 1; } .site-header--workspace-viva-builder.site-header--workspace-feedback .site-header__page-title-slot { grid-column: 2; grid-row: 1; justify-self: stretch; min-width: 0; width: 100%; max-width: 100%; } .site-header--workspace-viva-builder.site-header--workspace-feedback .site-header__end { grid-column: 3; grid-row: 1; flex-shrink: 0; } .site-header--workspace-viva-builder.site-header--workspace-feedback .site-header__page-heading--feedback { max-width: 100%; width: 100%; min-width: 0; text-align: center; } .site-header--workspace-viva-builder.site-header--workspace-feedback .site-header__feedback-scope-toggle { display: block; width: 100%; min-width: 0; box-sizing: border-box; } .site-header__page-title-slot--with-nav { flex-wrap: wrap; justify-content: center; } .site-header__page-heading { max-width: min(92vw, 20rem); font-size: clamp(1.1rem, 4.5vw, 1.35rem); } } .site-logo { font-size: 0.9375rem; font-weight: 600; color: var(--text-h); text-decoration: none; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.35rem; min-width: 0; } .site-logo:hover { color: var(--text-interactive-hover); } .site-logo__mark-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; line-height: 0; } .site-logo__mark-svg { width: 1.2rem; height: 1.35rem; display: block; } .site-logo__wordmark { display: inline-block; overflow: hidden; white-space: nowrap; transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } @media (max-width: 720px) { .site-logo--compact-mark .site-logo__wordmark { max-width: 0; opacity: 0; transform: translateX(-0.25rem); } .site-logo--compact-mark:hover .site-logo__wordmark, .site-logo--compact-mark:focus-visible .site-logo__wordmark, .site-logo--compact-mark:focus-within .site-logo__wordmark { max-width: 9rem; opacity: 1; transform: translateX(0); } /* Same outer height as `.site-header__signin` so the mic lines up with the pill row */ .site-header--marketing .site-logo--compact-mark { min-height: calc(var(--site-header-slot-h) + 3px); box-sizing: border-box; } } @media (prefers-reduced-motion: reduce) { .site-header__center, .site-logo__wordmark { transition: opacity 0.15s ease; transform: none; } .site-logo--compact-mark .site-logo__wordmark, .site-logo--compact-mark:hover .site-logo__wordmark, .site-logo--compact-mark:focus-visible .site-logo__wordmark, .site-logo--compact-mark:focus-within .site-logo__wordmark { transform: none; } } /* Feedback header title: shorter label, smaller type; toggle unchanged */ .site-header__page-heading--feedback { font-size: clamp(0.92rem, 3vw, 1.2rem); line-height: 1.25; max-width: min(40vw, 9rem); } .site-header__page-heading--feedback .site-header__feedback-scope-toggle { font-size: inherit; } /* * Sign in: same outer height as college picker (slot 1.62rem + 2×2px padding), * same colours and type as primary pill CTAs (.btn--primary). */ .site-header__signin { display: inline-flex; align-items: center; justify-content: center; margin: 0; box-sizing: border-box; height: calc(var(--site-header-slot-h) + 3px); min-height: calc(var(--site-header-slot-h) + 3px); padding: 0 0.68rem; border: none; border-radius: 9999px; font: inherit; font-size: 0.925rem; font-weight: 600; line-height: 1.2; text-decoration: none; color: var(--cta-pill-fg); background: var(--cta-pill-bg); box-shadow: none; cursor: pointer; transition: background 0.28s ease, color 0.2s ease; } .site-header__signin:hover { color: var(--cta-pill-fg-hover); background: var(--cta-pill-bg-hover); } .site-header__signin:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } /* Reserves one row in the header; pill grows downward from this corner (does not change header height) */ .site-college-picker-anchor { --site-college-slot-h: var(--site-header-slot-h); position: relative; flex: 0 0 auto; width: 2.12rem; height: calc(var(--site-college-slot-h) + 3px); margin-right: 0.35rem; box-sizing: border-box; overflow: visible; } /* Segmented vertical pill — same top/left when collapsed or open so it expands & retracts in place */ .site-college-picker { display: inline-flex; flex-direction: column; align-items: stretch; width: 100%; padding: 1.5px; border-radius: 9999px; border: 1px solid var(--border); background: var(--element-bg); box-sizing: border-box; } .site-college-picker--collapsed, .site-college-picker--open { position: absolute; top: 0; left: 0; width: 100%; transform: none; } .site-college-picker--collapsed { justify-content: flex-start; gap: 0; } .site-college-picker--open { z-index: 1100; justify-content: flex-start; gap: 1px; box-shadow: var(--elevated-photo-shadow); } .site-college-picker__slot { flex-shrink: 0; display: flex; justify-content: center; overflow: hidden; max-height: var(--site-college-slot-h); opacity: 1; transition: max-height 0.34s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.26s ease; } .site-college-picker--collapsed .site-college-picker__slot:not(.site-college-picker__slot--active) { max-height: 0; min-height: 0; opacity: 0; pointer-events: none; } .site-college-picker--collapsed .site-college-picker__slot--active { max-height: var(--site-college-slot-h); } .site-college-picker__btn { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0.2rem 0.28rem; border: none; border-radius: 9999px; background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.15s ease; } .site-college-picker__btn:hover:not(.site-college-picker__btn--active) { color: var(--text-h); } .site-college-picker__btn:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .site-college-picker__btn--active { color: var(--text); background: transparent; box-shadow: none; } .site-college-picker__icon { display: flex; width: 1.05rem; height: 1.05rem; } .site-college-picker__icon svg { width: 100%; height: 100%; } .site-college-picker__tooltip { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200; padding: 0.35rem 0.55rem; font-size: 0.75rem; font-weight: 500; line-height: 1.2; color: var(--text); background: var(--element-bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--elevated-photo-shadow); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; } .site-college-picker-anchor:hover .site-college-picker__tooltip, .site-college-picker-anchor:focus-within .site-college-picker__tooltip { opacity: 1; visibility: visible; transform: translateY(0); } /* After click opens the menu, hide the hint even if pointer is still over the anchor */ .site-college-picker-anchor:has(.site-college-picker--open) .site-college-picker__tooltip { opacity: 0; visibility: hidden; transform: translateY(4px); } /* After choosing an option, hide hint until pointer leaves or focus leaves the anchor */ .site-college-picker-anchor--suppress-hint .site-college-picker__tooltip, .site-college-picker-anchor--suppress-hint:hover .site-college-picker__tooltip, .site-college-picker-anchor--suppress-hint:focus-within .site-college-picker__tooltip { opacity: 0; visibility: hidden; transform: translateY(4px); } /* Footer (and shared pattern with header college picker): segmented control in a pill */ .theme-toggle { display: inline-flex; align-items: center; padding: 2px; border-radius: 9999px; border: 1px solid var(--border); background: var(--element-bg); gap: 1px; } .theme-toggle__btn { margin: 0; padding: 0.2rem 0.28rem; border: none; border-radius: 9999px; font: inherit; color: var(--text-muted); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .theme-toggle__btn:hover:not(.theme-toggle__btn--active) { color: var(--text-h); background: color-mix(in srgb, var(--text-h) 9%, transparent); } .theme-toggle__btn:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .theme-toggle__btn--active { color: var(--toggle-selected-fg); background: var(--toggle-selected-bg); box-shadow: var(--toggle-selected-shadow); transition: none; } .theme-toggle__icon { display: flex; width: 1.15rem; height: 1.15rem; } .theme-toggle__svg { width: 100%; height: 100%; } .site-footer-bar { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-left: calc(-1 * (var(--page-inline) + env(safe-area-inset-left, 0px))); margin-right: calc(-1 * (var(--page-inline) + env(safe-area-inset-right, 0px))); padding: 1.25rem calc(var(--page-inline) + env(safe-area-inset-right, 0px)) 1.5rem calc(var(--page-inline) + env(safe-area-inset-left, 0px)); background: var(--bg); } .site-footer-bar--in-index { margin-inline: 0; margin-top: 2rem; padding: 1.25rem 0 0; background: transparent; } .site-footer-bar__legal { display: flex; flex-direction: column; gap: 0.2rem; } .site-footer-bar__copyright, .site-footer-bar__abn { margin: 0; font-size: 0.83125rem; color: var(--text-muted); } .site-main { flex: 1; display: flex; flex-direction: column; min-height: 0; /* Fixed header + prior top gap; content scrolls under header */ padding-top: calc(2rem + var(--site-header-clearance) + env(safe-area-inset-top, 0px)); padding-right: calc(var(--page-inline) + env(safe-area-inset-right, 0px)); padding-bottom: 0; padding-left: calc(var(--page-inline) + env(safe-area-inset-left, 0px)); } /* viva-builder ?embed=1 — no workspace header; drop main top padding that assumed fixed header */ .layout--workspace-no-header .site-main { padding-top: max(1rem, env(safe-area-inset-top, 0px)); } /* Marketing preview iframes: header is decorative; only the theme toggle stays interactive. */ .layout:has(.site-header--marketing-iframe-embed) { --page-inline-factor: 1; } /* Narrow marketing iframe (`embedMobile=1`): minimal horizontal inset inside scaled chrome. */ .layout:has(.site-header--marketing-iframe-embed).layout--marketing-embed-mobile { --page-inline: 4px; } .layout:has(.site-header--marketing-iframe-embed).layout--marketing-embed-mobile .site-main { padding-top: calc(var(--site-header-chrome-h) + env(safe-area-inset-top, 0px)); padding-inline: 4px; } .site-header--marketing-iframe-embed .site-header__start, .site-header--marketing-iframe-embed .site-header__page-title-slot, .site-header--marketing-iframe-embed .site-header__end > :not(.site-header__theme-slot), .site-header--marketing-iframe-embed .site-header__theme-slot > :not(.site-college-picker-anchor) { pointer-events: none; cursor: default; } .site-header--marketing-iframe-embed .site-header__theme-slot .site-college-picker-anchor, .site-header--marketing-iframe-embed .site-header__theme-slot .site-college-picker-anchor * { cursor: pointer; } /* Grow route content so the footer bar stays at the bottom of the viewport on short pages */ .site-main > :first-child { flex: 1 1 auto; min-height: 0; } /* Standalone pages — keep space below content */ .site-main > .page { padding-bottom: 3rem; } .page { max-width: 42rem; } /* Better mobile: tighter column on phones, reduced padding for readability */ @media (max-width: 480px) { .page { max-width: 100%; padding-inline: 1rem; } .page p { line-height: 1.6; font-size: 0.95rem; } } .page h1 { margin-top: 0; } .page p { margin: 0 0 1rem; line-height: 1.55; } .page code { font-size: 0.89em; } /* Terms / Privacy — compact left nav so body sits ~50% further left vs former 1:2 grid */ .page.legal-page { max-width: none; width: 100%; margin-inline: 0; box-sizing: border-box; } .legal-page__layout { --legal-nav-w: 12rem; --legal-col-gap: clamp(1rem, 2.5vw, 2rem); display: grid; grid-template-columns: minmax(0, var(--legal-nav-w)) minmax(0, 1fr); gap: var(--legal-col-gap); align-items: start; } @media (max-width: 640px) { .legal-page__layout { grid-template-columns: 1fr; } } .legal-page__nav { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.15rem; } @media (min-width: 641px) { .legal-page__nav { position: sticky; top: calc(2rem + var(--site-header-clearance) + env(safe-area-inset-top, 0px)); } } .legal-page__nav-link { font-size: 0.9125rem; font-weight: 400; line-height: 1.35; color: var(--text); text-decoration: none; } .legal-page__nav-link:hover { color: var(--text-interactive-hover); text-decoration: underline; text-underline-offset: 2px; } .legal-page__nav-link[aria-current='page'] { color: var(--text-h); font-weight: 600; } .legal-page__body { min-width: 0; } /* Match right inset to nav column + gap so prose isn’t flush to the main column edge */ @media (min-width: 641px) { .legal-page__body { padding-right: calc(var(--legal-nav-w) + var(--legal-col-gap)); } } .page.legal-page h2 { font-size: 1.0625rem; font-weight: 600; margin: 1.75rem 0 0.5rem; color: var(--text-h); } .page.legal-page h3 { font-size: 0.9875rem; font-weight: 600; margin: 1.25rem 0 0.4rem; color: var(--text-h); } .page.legal-page section:first-of-type h2 { margin-top: 1.25rem; } .page.legal-page ul { margin: 0 0 1rem; padding-left: 1.35rem; line-height: 1.55; } .page.legal-page li { margin-bottom: 0.35rem; } .legal-page__body a { color: var(--accent); } .legal-page__body a:hover { color: var(--accent-hover); } /* Shared button primitives */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.15rem; border-radius: 8px; font: inherit; font-size: 0.9125rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .btn:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } /* Primary = marketing pill (--cta-pill-*); use on