/* ========================================================================== AI Brain Rot Quiz — site styles. Built only from brand-tokens.css. Per-site accent: Terracotta. Quiz-flow components (progress bar, question card, score meter, dimension bars) are new — assembled from existing tokens, no fourth color, no gradient, no glass, no background-size: cover. ========================================================================== */ :root { --site-accent: #B5462E; /* Terracotta */ } /* Screens are swapped by quiz.js; [hidden] hides the inactive ones. */ .screen[hidden] { display: none; } /* data-theme swaps the --fg token, but `color` is inherited as a computed value from (cream never reaches here otherwise). Re-assert it so the navy hero's headings pick up cream. */ [data-theme="navy"] { color: var(--fg); } /* Headings receive focus programmatically on screen change for screen-reader continuity — they are not interactive, so suppress the visible focus ring. */ h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; } .container.narrow { max-width: 720px; } /* -------------------------------------------------------------------------- Pattern blocks — scrim must fill the parent (flex) or raw pattern leaks. -------------------------------------------------------------------------- */ .pattern, .pattern-navy, .pattern-gold { display: flex; } .pattern .pattern-scrim, .pattern-navy .pattern-scrim, .pattern-gold .pattern-scrim { flex: 1; display: flex; align-items: center; } /* -------------------------------------------------------------------------- 1. Intro — navy hero -------------------------------------------------------------------------- */ .hero { min-height: 100vh; } .hero-inner { padding-block: var(--s-9); text-align: center; max-width: 680px; } .emblem { margin: 0 auto var(--s-5); height: 82px; width: auto; } /* In navy, terracotta fails contrast — the eyebrow rule uses Streamline yellow. */ .eyebrow { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3); } .hero-inner .eyebrow { justify-content: center; } .rule-streamline { display: inline-block; width: 32px; border-top: var(--bw-3) solid var(--streamline); } .rule-accent { display: inline-block; width: 32px; border-top: var(--bw-3) solid var(--site-accent); } .hero-inner h1 { margin-bottom: var(--s-5); } .hero-inner .lede { margin-inline: auto; margin-bottom: var(--s-6); } .hero-inner .btn { margin-bottom: var(--s-4); } .hero-note { margin-inline: auto; } /* -------------------------------------------------------------------------- 2. Questions -------------------------------------------------------------------------- */ .progress { margin-bottom: var(--s-6); } .progress-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); } .progress-meta .eyebrow { margin: 0; } .progress-meta .caption { margin: 0; } .progress-track { height: 8px; background: var(--bg-inset); border-radius: var(--r-pill); overflow: hidden; } .progress-fill { height: 100%; width: 12.5%; background: var(--site-accent); border-radius: var(--r-pill); transition: width var(--t-base) var(--ease-out); } .question-card { padding: var(--s-7); } .question-card h2 { font-size: var(--fs-xl); line-height: var(--lh-snug); margin-bottom: var(--s-6); } .option-group { display: grid; gap: var(--s-3); } /* Options are real buttons in a radiogroup with aria-checked. */ .option { display: flex; align-items: center; gap: var(--s-4); width: 100%; text-align: left; padding: var(--s-4) var(--s-5); min-height: 56px; background: var(--field); color: var(--fg); border: var(--bw-2) solid var(--border); border-radius: var(--r-md); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-snug); cursor: pointer; transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .option:hover { border-color: var(--border-strong); } .option.is-selected { border-color: var(--site-accent); background: var(--bg-inset); } .option-key { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--bg-inset); border: var(--bw-1) solid var(--border); font-size: var(--fs-sm); font-weight: 700; color: var(--fg-muted); } .option.is-selected .option-key { background: var(--site-accent); border-color: transparent; color: var(--space); } .option-label { flex: 1; } .option-hint { margin-top: var(--s-4); margin-bottom: 0; } .back-btn { margin-top: var(--s-5); } /* -------------------------------------------------------------------------- 3. Email gate -------------------------------------------------------------------------- */ .gate-card { max-width: 620px; margin-inline: auto; } .gate-form { margin-top: var(--s-6); } .field { margin-bottom: var(--s-4); max-width: none; } .field-optional { font-weight: 400; color: var(--fg-subtle); } .gate-error { color: var(--danger); font-size: var(--fs-sm); font-weight: 700; min-height: 1.2em; margin: 0 0 var(--s-3); } .gate-form .btn { width: 100%; } .gate-fineprint { text-align: center; margin-top: var(--s-4); margin-bottom: 0; } /* -------------------------------------------------------------------------- 4. Results -------------------------------------------------------------------------- */ .result-summary { text-align: center; margin-bottom: var(--s-8); } /* Tier ramp — existing status tokens only. */ .tier-success { --tier: var(--success); } .tier-streamline{ --tier: var(--streamline); } .tier-warn { --tier: var(--warn); } .tier-danger { --tier: var(--danger); } .tier-badge { display: inline-block; padding: 8px var(--s-5); border-radius: var(--r-pill); background: var(--tier); font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); margin-bottom: var(--s-5); } .text-on-cream { color: var(--space); } .text-on-navy { color: var(--process); } /* yellow tier takes navy text */ .score-line { display: flex; align-items: baseline; justify-content: center; gap: var(--s-2); margin-bottom: var(--s-4); } .score-number { font-family: var(--font-display); font-size: var(--fs-5xl); line-height: 1; color: var(--fg); } .score-outof { font-size: var(--fs-xl); color: var(--fg-muted); } .score-meter { height: 14px; max-width: 420px; margin: 0 auto var(--s-5); background: var(--bg-inset); border-radius: var(--r-pill); overflow: hidden; } .score-meter-fill { height: 100%; background: var(--tier); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); } .result-summary .lede { margin-inline: auto; } .result-block { margin-bottom: var(--s-8); } .result-block h2 { font-size: var(--fs-2xl); margin-bottom: var(--s-5); } /* Per-dimension bars */ .breakdown { display: grid; gap: var(--s-5); } .breakdown-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); } .breakdown-label { font-weight: 700; } .breakdown-score { margin-left: auto; color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 700; } .breakdown-flag { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--space); background: var(--site-accent); padding: 2px var(--s-2); border-radius: var(--r-pill); } .dim-bar { height: 12px; background: var(--bg-inset); border-radius: var(--r-pill); overflow: hidden; } .dim-bar-fill { height: 100%; background: var(--process-40); border-radius: var(--r-pill); transition: width var(--t-base) var(--ease-out); } .breakdown-row.is-weakest .dim-bar-fill { background: var(--site-accent); } /* Focus card */ .focus-card { padding: var(--s-7); margin-bottom: var(--s-8); } .focus-card h3 { margin-bottom: var(--s-4); } .focus-rule { font-size: var(--fs-md); } .focus-assignment, .focus-reading { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--bw-1) solid var(--border); } .focus-assignment p:last-child, .focus-reading .link-list { margin-bottom: 0; } .link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); } .link-list li { position: relative; padding-left: var(--s-4); } .link-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--site-accent); } /* Pillars reuse the token .steps list; accent markers come from --site-accent. */ .pillars li { font-size: var(--fs-md); } /* Closing CTA band (cream pattern) */ .cta-band { margin-top: var(--s-9); } .cta-band .cta-inner { text-align: center; padding-block: var(--s-9); } .cta-inner h2 { font-size: var(--fs-2xl); margin-bottom: var(--s-5); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer-inner { text-align: center; } .emblem-sm { margin: 0 auto var(--s-3); height: 45px; width: auto; } .footer-tagline { font-family: var(--font-display); margin-bottom: var(--s-2); max-width: none; } .footer-copy { margin: var(--s-3) auto; text-align: center;; } .footer-links { display: flex; gap: var(--s-5); justify-content: center; flex-wrap: wrap; max-width: none; margin: 0; } /* -------------------------------------------------------------------------- Small screens -------------------------------------------------------------------------- */ @media (max-width: 600px) { .hero-inner { padding-block: var(--s-8); } .question-card { padding: var(--s-5); } .focus-card { padding: var(--s-5); } .score-number { font-size: var(--fs-4xl); } }