/* Font loading via @import (not a ) so this whole block works when pasted as a single Webflow Embed, which has no of its own. For best performance on the live site, you can instead add Space Grotesk and Inter through Webflow's own Fonts panel — see the Webflow guide — in which case this @import is simply redundant and harmless. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap'); /* ========================================================================== 0. DESIGN TOKENS ========================================================================== */ :root{ --bg: #F5F6F9; --surface: #FFFFFF; --surface-alt: #EEF1F6; --navy-900: #0A1830; --navy-800: #122544; --navy-700: #1C3660; --teal-600: #0D6E6C; --teal-500: #148F8A; --teal-100: #E1F2F0; --amber-600: #A8710F; --amber-100: #FBF0DC; --red-600: #AD2B22; --red-100: #FBE6E3; --green-600: #1E7A4C; --green-100: #E2F4EA; --ink-900: #0C1524; --ink-700: #303B4E; --ink-500: #616F84; --ink-400: #8994A6; --border: #DDE2EA; --border-strong: #C4CBD8; --font-display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(10,24,48,.06), 0 1px 1px rgba(10,24,48,.04); --shadow-md: 0 8px 24px rgba(10,24,48,.10); --shadow-lg: 0 24px 64px rgba(10,24,48,.22); --focus-ring: 0 0 0 3px rgba(20,143,138,.35); } /* ========================================================================== 1. RESET & BASE ========================================================================== */ *, *::before, *::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font-body); color:var(--ink-900); background:var(--bg); line-height:1.5; overflow-x:hidden; } img,svg{ display:block; max-width:100%; } button{ font-family:inherit; } h1,h2,h3,h4,p,ul{ margin:0; } ul{ padding:0; list-style:none; } a{ color:inherit; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } :focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:6px; } button:focus-visible, [role="radio"]:focus-visible, [tabindex]:focus-visible, input:focus-visible{ outline:2px solid var(--teal-600); outline-offset:2px; } /* Scoped under #saw-root via native CSS nesting so these component selectors (.btn, .modal, .container, .field, etc.) always beat the app's own DaisyUI/Tailwind classes of the same name — this stylesheet is only ever linked on /events/assessment, but without this the app's global CSS bundle (loaded on every route) fights it on class name collisions alone (measured: DaisyUI's .modal directly sets pointer-events:none, which beat this file's inherited pointer-events before scoping, since a direct match always wins over inheritance). */ #saw-root { .visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; } /* ========================================================================== 2. TOP NAV ========================================================================== */ .site-header{ padding:22px 0; border-bottom:1px solid var(--border); background:var(--surface); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--navy-900); letter-spacing:-0.01em; } .brand-mark{ width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg, var(--teal-600), var(--navy-800)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.95rem; flex-shrink:0; } .nav-cta{ border:1.5px solid var(--navy-900); background:transparent; color:var(--navy-900); padding:10px 18px; border-radius:999px; font-weight:600; font-size:.92rem; cursor:pointer; transition:background .15s ease, color .15s ease; } .nav-cta:hover{ background:var(--navy-900); color:#fff; } /* ========================================================================== 3. HERO ========================================================================== */ .hero{ padding:64px 0 72px; background: radial-gradient(1100px 480px at 82% -10%, rgba(20,143,138,.10), transparent 60%), var(--bg); } .hero .container{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; } .hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:var(--teal-600); margin-bottom:18px; } .hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal-500); } .hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.06; letter-spacing:-0.015em; color:var(--navy-900); max-width:14ch; } .hero-sub{ margin-top:20px; font-size:1.08rem; color:var(--ink-500); max-width:44ch; line-height:1.6; } .hero-actions{ margin-top:32px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:999px; cursor:pointer; font-weight:600; font-size:1rem; line-height:1.2; padding:16px 30px; transition:transform .12s ease, box-shadow .12s ease, background .15s ease; /* This app's own app.css has ".btn{height:2.25rem !important; min-height: 2.25rem !important}" — an intentional platform-wide DaisyUI normalization (src/app.css, "Normalize .btn height to match input/select height"), loaded globally on every route. !important beats specificity outright, so #saw-root scoping alone can never win against it — every button using the plain .btn class was being forced to a fixed 36px box regardless of its own padding, which is what actually made the text sit low/off-center (the padding no longer fit inside the forced height, so the box grew past it unevenly instead of centering cleanly). auto + !important here lets height come from padding+content again, the way this file assumes throughout. */ height:auto !important; min-height:52px !important; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--navy-900); color:#fff; box-shadow:var(--shadow-md); } .btn-primary:hover{ background:var(--navy-800); } .btn-accent{ background:var(--teal-600); color:#fff; box-shadow:var(--shadow-md); } .btn-accent:hover{ background:var(--teal-500); } .btn-ghost{ background:transparent; color:var(--navy-900); border:1.5px solid var(--border-strong); } .btn-ghost:hover{ background:var(--surface-alt); } .btn-block{ width:100%; } .btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; } .btn-lg{ padding:20px 34px; font-size:1.08rem; height:auto !important; min-height:60px !important; } .hero-trust{ margin-top:14px; font-size:.85rem; color:var(--ink-400); } /* QR panel */ .qr-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-md); text-align:center; } .qr-panel h2{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--navy-900); } .qr-panel .qr-desc{ margin-top:6px; font-size:.9rem; color:var(--ink-500); } .qr-code-wrap{ margin:20px auto 14px; width:196px; height:196px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; overflow:hidden; } .qr-code-wrap img, .qr-code-wrap canvas, .qr-code-wrap table{ width:180px !important; height:180px !important; } .qr-fallback{ font-size:.78rem; color:var(--ink-500); padding:12px; line-height:1.5; } .qr-url{ font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--teal-600); word-break:break-all; } /* Event mode hero variant */ .hero.event-mode .container{ grid-template-columns:1fr; text-align:center; } .hero.event-mode h1{ max-width:none; margin:0 auto; } .hero.event-mode .hero-sub{ margin-left:auto; margin-right:auto; } .hero.event-mode .hero-actions{ justify-content:center; } .hero.event-mode .btn{ height:auto !important; min-height:64px !important; padding:20px 34px; font-size:1.1rem; } .hero.event-mode .qr-panel{ max-width:340px; margin:36px auto 0; } /* ========================================================================== 4. FEATURE STRIP ========================================================================== */ .strip{ padding:48px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); } .strip .container{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .strip-item h3{ font-family:var(--font-display); font-size:1.02rem; font-weight:600; color:var(--navy-900); } .strip-item p{ margin-top:8px; font-size:.92rem; color:var(--ink-500); line-height:1.55; } .site-footer{ padding:40px 0; text-align:center; color:var(--ink-400); font-size:.85rem; } /* ========================================================================== 5. MODAL ========================================================================== */ .modal-overlay{ position:fixed; inset:0; background:rgba(9,17,33,.6); display:flex; align-items:center; justify-content:center; padding:28px; z-index:999999; /* high on purpose: sits above Webflow nav/sticky bars */ opacity:0; pointer-events:none; transition:opacity .18s ease; } .modal-overlay.is-open{ opacity:1; pointer-events:auto; } .modal{ /* This app also ships DaisyUI, whose own .modal component sets position:fixed, inset:0, margin, z-index, pointer-events AND align-items (a separate :where(.modal){align-items:center} rule, zero-specificity but uncontested since nothing here used to declare align-items) on the bare .modal class — loaded globally on every route. That align-items:center is what made .modal-head/.modal-body shrink-to-fit and center as a narrow column instead of stretching edge-to-edge, throwing off the tabs/close-button and nav-row spacing. #saw-root scoping raises specificity enough to win for properties declared below, but they must actually BE declared here or DaisyUI's values leak straight through uncontested. */ position:relative; inset:auto; margin:0; z-index:auto; pointer-events:none; align-items:stretch; width:100%; max-width:980px; height:min(92vh, 820px); background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; transform:translateY(14px) scale(.98); opacity:0; transition:transform .2s ease, opacity .2s ease; } .modal-overlay.is-open .modal{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; } .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 0 24px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; } .modal-tabs{ display:flex; gap:4px; } .modal-tab{ background:transparent; border:none; cursor:pointer; padding:14px 18px; font-size:.94rem; font-weight:600; color:var(--ink-500); border-bottom:2.5px solid transparent; border-radius:8px 8px 0 0; transition:color .15s ease, background .15s ease; } .modal-tab:hover{ background:var(--surface-alt); } .modal-tab[aria-selected="true"]{ color:var(--navy-900); border-bottom-color:var(--teal-600); } .modal-close{ background:transparent; border:none; cursor:pointer; color:var(--ink-500); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s ease, color .15s ease; } .modal-close:hover{ background:var(--surface-alt); color:var(--navy-900); } .modal-body{ flex:1; overflow-y:auto; padding:26px 40px 20px; -webkit-overflow-scrolling:touch; } /* ---- intro view ---- */ .view-intro{ max-width:560px; margin:20px auto; text-align:center; } .view-intro .intro-icon{ width:56px; height:56px; border-radius:16px; margin:0 auto 20px; background:var(--teal-100); color:var(--teal-600); display:flex; align-items:center; justify-content:center; } .view-intro h2{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--navy-900); } .view-intro p{ margin-top:12px; color:var(--ink-500); font-size:1rem; line-height:1.6; } .intro-meta{ margin:24px 0 28px; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-500); } .intro-meta strong{ display:block; color:var(--navy-900); font-family:var(--font-display); font-size:1.15rem; } /* ---- question view ---- */ .progress-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .progress-label{ font-size:.85rem; font-weight:600; color:var(--ink-500); } .progress-track{ height:6px; border-radius:999px; background:var(--surface-alt); overflow:hidden; margin-bottom:18px; } .progress-fill{ height:100%; background:linear-gradient(90deg, var(--teal-600), var(--teal-500)); border-radius:999px; transition:width .25s ease; } .question-category{ font-size:.82rem; font-weight:600; color:var(--teal-600); margin-bottom:8px; } .question-text{ font-family:var(--font-display); font-weight:600; font-size:1.32rem; color:var(--navy-900); line-height:1.3; max-width:60ch; margin-bottom:16px; } .answer-list{ display:flex; flex-direction:column; gap:10px; } .answer-card{ display:flex; align-items:center; gap:14px; border:1.5px solid var(--border); border-radius:var(--radius-md); padding:13px 18px; cursor:pointer; background:var(--surface); transition:border-color .12s ease, background .12s ease; text-align:left; width:100%; } .answer-card:hover{ border-color:var(--border-strong); background:var(--surface-alt); } .answer-card .radio-dot{ width:22px; height:22px; border-radius:50%; border:2px solid var(--border-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:border-color .12s ease; } .answer-card .radio-dot::after{ content:''; width:10px; height:10px; border-radius:50%; background:var(--teal-600); transform:scale(0); transition:transform .12s ease; } .answer-card .answer-label{ font-size:.98rem; color:var(--ink-700); font-weight:500; } .answer-card[aria-checked="true"]{ border-color:var(--teal-600); background:var(--teal-100); } .answer-card[aria-checked="true"] .radio-dot{ border-color:var(--teal-600); } .answer-card[aria-checked="true"] .radio-dot::after{ transform:scale(1); } .answer-card[aria-checked="true"] .answer-label{ color:var(--navy-900); font-weight:600; } .question-error{ display:none; margin-top:14px; color:var(--red-600); font-size:.88rem; font-weight:600; } .question-error.is-visible{ display:block; } .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); } .nav-row .btn{ min-width:120px; } /* ---- locked result view ---- */ .view-locked{ max-width:560px; margin:6px auto; text-align:center; } .view-locked h2{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--navy-900); } .locked-card{ position:relative; margin-top:22px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--surface-alt); padding:34px 24px 30px; overflow:hidden; } .locked-content{ filter:blur(7px); user-select:none; pointer-events:none; } .locked-score{ font-family:var(--font-display); font-size:3.2rem; font-weight:700; color:var(--navy-900); } .locked-score span{ font-size:1.3rem; color:var(--ink-500); } .locked-tier{ margin-top:6px; font-weight:700; font-size:1.1rem; color:var(--teal-600); } .locked-lines{ margin-top:22px; display:flex; flex-direction:column; gap:10px; align-items:center; } .locked-lines .bar{ height:12px; border-radius:6px; background:var(--border-strong); } .lock-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; text-align:center; } .lock-icon{ width:52px; height:52px; border-radius:50%; background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); } .lock-overlay .unlock-title{ font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--navy-900); } .lock-overlay .unlock-desc{ font-size:.9rem; color:var(--ink-500); max-width:36ch; line-height:1.5; } .lock-overlay .btn{ margin-top:6px; } /* ---- lead form view ---- */ .view-form{ max-width:480px; margin:6px auto; } .view-form h2{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--navy-900); text-align:center; } .view-form .form-sub{ margin-top:8px; text-align:center; color:var(--ink-500); font-size:.95rem; } .field{ margin-top:20px; } .field label{ display:block; font-size:.85rem; font-weight:600; color:var(--navy-900); margin-bottom:7px; } .field input{ width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--border-strong); font-size:1rem; font-family:var(--font-body); color:var(--ink-900); background:var(--surface); transition:border-color .12s ease, box-shadow .12s ease; } .field input:focus{ border-color:var(--teal-600); outline:none; box-shadow:var(--focus-ring); } .field input[aria-invalid="true"]{ border-color:var(--red-600); } .field-error{ display:none; margin-top:6px; font-size:.82rem; color:var(--red-600); font-weight:600; } .field-error.is-visible{ display:flex; align-items:center; gap:6px; } .consent{ margin-top:20px; font-size:.8rem; color:var(--ink-400); line-height:1.55; } .view-form .btn{ margin-top:24px; } .form-back{ margin-top:14px; text-align:center; } .form-back button{ background:none; border:none; color:var(--ink-500); font-size:.86rem; cursor:pointer; text-decoration:underline; } /* ---- revealed result view ---- */ .view-result{ max-width:640px; margin:0 auto; } .result-head{ text-align:center; } .result-head .kicker{ font-size:.85rem; font-weight:600; color:var(--ink-500); } .result-visual{ display:flex; align-items:center; justify-content:center; gap:26px; margin:24px 0 6px; flex-wrap:wrap; } .score-ring-wrap{ position:relative; width:168px; height:168px; flex-shrink:0; } .score-ring-wrap svg{ width:168px; height:168px; transform:rotate(-90deg); } .score-ring-track{ fill:none; stroke:var(--surface-alt); stroke-width:12; } .score-ring-fill{ fill:none; stroke:var(--teal-600); stroke-width:12; stroke-linecap:round; transition:stroke-dashoffset .7s ease; } .score-ring-number{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .score-ring-number .num{ font-family:var(--font-display); font-weight:700; font-size:2.1rem; color:var(--navy-900); } .score-ring-number .of100{ font-size:.78rem; color:var(--ink-400); margin-top:-2px; } .tier-badge{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; font-weight:700; font-size:.95rem; margin-top:6px; } .tier-badge .tier-dot{ width:9px; height:9px; border-radius:50%; } .tier-low, .tier-exam-ready{ background:var(--green-100); color:var(--green-600); } .tier-low .tier-dot, .tier-exam-ready .tier-dot{ background:var(--green-600); } .tier-moderate, .tier-developing{ background:var(--amber-100); color:var(--amber-600); } .tier-moderate .tier-dot, .tier-developing .tier-dot{ background:var(--amber-600); } .tier-elevated, .tier-prepared{ background:var(--teal-100); color:var(--teal-600); } .tier-elevated .tier-dot, .tier-prepared .tier-dot{ background:var(--teal-600); } .tier-high, .tier-early-stage{ background:var(--red-100); color:var(--red-600); } .tier-high .tier-dot, .tier-early-stage .tier-dot{ background:var(--red-600); } .category-bars{ margin-top:30px; display:flex; flex-direction:column; gap:14px; } .category-bar-row{ display:flex; align-items:center; gap:14px; } .category-bar-row .cat-name{ width:180px; flex-shrink:0; font-size:.85rem; font-weight:600; color:var(--ink-700); } .category-bar-track{ flex:1; height:9px; border-radius:999px; background:var(--surface-alt); overflow:hidden; } .category-bar-fill{ height:100%; border-radius:999px; background:var(--teal-500); } .category-bar-row .cat-score{ width:38px; text-align:right; font-size:.82rem; color:var(--ink-500); font-variant-numeric:tabular-nums; } .result-section{ margin-top:32px; } .result-section h3{ font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--navy-900); } .result-list{ margin-top:14px; display:flex; flex-direction:column; gap:10px; } .result-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.94rem; color:var(--ink-700); line-height:1.55; padding:13px 15px; background:var(--surface-alt); border-radius:var(--radius-sm); } .result-list li .marker{ flex-shrink:0; width:20px; height:20px; margin-top:1px; } .result-actions{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; } .email-note{ margin-top:18px; text-align:center; font-size:.85rem; color:var(--teal-600); font-weight:600; display:flex; align-items:center; justify-content:center; gap:7px; } .restart-row{ margin-top:26px; text-align:center; } .restart-row button{ background:none; border:none; color:var(--ink-500); font-size:.86rem; cursor:pointer; text-decoration:underline; } /* ========================================================================== 6. RESPONSIVE ========================================================================== */ @media (max-width:1024px){ .hero .container{ grid-template-columns:1fr; } .qr-panel{ max-width:340px; margin:0 auto; } .strip .container{ grid-template-columns:1fr; gap:24px; } } @media (max-width:768px){ .modal-overlay{ padding:0; } .modal{ max-width:none; height:100dvh; border-radius:0; } .modal-body{ padding:24px 20px 100px; } .nav-row{ position:sticky; bottom:0; background:var(--surface); margin-top:24px; padding:16px 0; } .category-bar-row .cat-name{ width:120px; font-size:.8rem; } .hero{ padding:40px 0 48px; } .hero-actions{ flex-direction:column; align-items:stretch; } .hero-actions .btn{ width:100%; } } @media (max-width:480px){ .container{ padding:0 18px; } .modal-head{ padding:12px 12px 0 16px; } .modal-tab{ padding:12px 12px; font-size:.88rem; } .question-text{ font-size:1.14rem; max-width:none; } .result-visual{ flex-direction:column; } .locked-score{ font-size:2.6rem; } } }