/* ══════════════════════════════════════════════════════════════════════════ brand.css — shared visual system for MARKETING pages only. IMPORTANT: this file must NEVER affect the test player (reading-player.html). Two safeguards: 1. reading-player.html does not this file at all. 2. Everything visual here is scoped under the .mkt wrapper class, which only marketing pages put on . There are no bare element selectors (h1{}, p{}, a{}…) that could leak styling, so even if this file were linked somewhere by accident, nothing applies unless the page opts in with class="mkt". The :root custom properties below are inert on their own (just named values); they only take effect where a .mkt rule references them. ══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root{ /* Brand palette (given) */ --primary-deep:#1d1147; --accent-violet:#7c3aed; --secondary-indigo:#4f46e5; --secondary-blue:#2563eb; --gradient-signature:linear-gradient(135deg,#1e40af,#7c3aed); --bg-tint:#faf8ff; --text-body:#334155; --surface:#ffffff; /* Derived support tokens (for borders, muted text, spacing, chrome) */ --mkt-border:#e6e1f2; --mkt-muted:#64748b; --mkt-heading-soft:#3b2d63; --r-sm:8px;--r-md:14px;--r-lg:22px;--r-xl:30px; --sh-sm:0 1px 3px rgba(29,17,71,.07); --sh-md:0 6px 20px rgba(29,17,71,.10); --sh-lg:0 18px 50px rgba(29,17,71,.14); --font-brand:'Plus Jakarta Sans',system-ui,sans-serif; } /* ── Base ─────────────────────────────────────────────────────────────────── */ .mkt{ font-family:var(--font-brand); color:var(--text-body); background:var(--surface); line-height:1.6; -webkit-font-smoothing:antialiased; } .mkt *,.mkt *::before,.mkt *::after{box-sizing:border-box;margin:0;padding:0} .mkt a{color:inherit;text-decoration:none} .mkt img{max-width:100%;display:block} /* Headings use --primary-deep */ .mkt h1,.mkt h2,.mkt h3,.mkt h4{ font-family:var(--font-brand); color:var(--primary-deep); line-height:1.15; font-weight:800; letter-spacing:-.02em; } .mkt .container{max-width:1120px;margin:0 auto;padding:0 1.5rem} .mkt .tint{background:var(--bg-tint)} /* soft-tint section background */ /* ── Buttons ──────────────────────────────────────────────────────────────── */ .mkt .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--font-brand);font-weight:700;font-size:.95rem;line-height:1; padding:.85rem 1.6rem;border-radius:var(--r-md);border:2px solid transparent; cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease; } /* Signature gradient reserved for PRIMARY CTAs only (and the hero). */ .mkt .btn-primary{background:var(--gradient-signature);color:#fff} .mkt .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .mkt .btn-outline{background:var(--surface);border-color:var(--mkt-border);color:var(--primary-deep)} .mkt .btn-outline:hover{border-color:var(--accent-violet);color:var(--accent-violet)} .mkt .btn-ghost{background:transparent;color:var(--text-body)} .mkt .btn-ghost:hover{color:var(--primary-deep)} /* ── Independence banner (injected by nav.js, sits above the header) ──────── */ /* Deliberately above the fold on every page: this site uses a government assessment's name, so the "not affiliated" statement has to be visible without scrolling rather than sitting only in the footer. */ .mkt .site-banner{ background:var(--primary-deep);color:#cbd5e1; font-size:.78rem;font-weight:600;line-height:1.4; text-align:center;padding:.55rem 1.5rem; } /* ── Shared header (injected by nav.js) ───────────────────────────────────── */ .mkt .site-header{ position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92); backdrop-filter:blur(12px);border-bottom:1px solid var(--mkt-border); } .mkt .site-header .container{display:flex;align-items:center;justify-content:space-between;height:66px} .mkt .brand-logo{font-weight:800;font-size:1.3rem;color:var(--primary-deep);letter-spacing:-.02em} .mkt .brand-logo span{ background:var(--gradient-signature);-webkit-background-clip:text; background-clip:text;-webkit-text-fill-color:transparent; } .mkt .nav-links{display:flex;align-items:center;gap:1.75rem;list-style:none} .mkt .nav-links a{font-size:.92rem;font-weight:600;color:var(--text-body);transition:color .15s} .mkt .nav-links a:hover{color:var(--accent-violet)} .mkt .nav-right{display:flex;align-items:center;gap:1rem} .mkt .nav-login{font-size:.92rem;font-weight:700;color:var(--primary-deep)} .mkt .nav-login:hover{color:var(--accent-violet)} /* Mobile menu toggle (hidden on desktop) */ .mkt .nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:.4rem} .mkt .nav-toggle span{display:block;width:22px;height:2px;background:var(--primary-deep);border-radius:2px} /* ── Shared footer (injected by nav.js) ───────────────────────────────────── */ .mkt .site-footer{background:var(--primary-deep);color:#cbd5e1;padding:3rem 0 2.5rem;margin-top:4rem} .mkt .site-footer a{color:#cbd5e1;transition:color .15s} .mkt .site-footer a:hover{color:#fff} .mkt .footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;align-items:center;margin-bottom:2rem} .mkt .footer-logo{font-weight:800;font-size:1.2rem;color:#fff} .mkt .footer-nav{display:flex;flex-wrap:wrap;gap:1.5rem;list-style:none} .mkt .footer-nav a{font-size:.9rem;font-weight:600} .mkt .footer-disclaimer{ font-size:.82rem;line-height:1.6;color:#94a3b8; border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem;max-width:760px; } /* ── Responsive header ────────────────────────────────────────────────────── */ @media(max-width:820px){ .mkt .nav-toggle{display:flex} .mkt .nav-links{ display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column; align-items:flex-start;gap:0;background:var(--surface); border-bottom:1px solid var(--mkt-border);padding:.5rem 1.5rem 1rem; } .mkt .site-header.open .nav-links{display:flex} .mkt .nav-links a{padding:.7rem 0;width:100%} /* keep Log in visible in the top bar; hide only the section links behind the toggle */ }