/** * SAT academic chrome — aligns SAT shell with STAAR-style deep blue tokens. * Opt-in: add class `sat-academic` on . Does not modify STAAR assets. */ body.sat-academic { --sat-chrome-deep: #082f4a; --sat-chrome-primary: #0d4f8c; --sat-chrome-mid: #1565c0; --sat-chrome-bright: #1e74d8; --sat-chrome-soft: #e8f2fc; --sat-gold-accent: #c9a227; --sat-shadow-rgb: 8, 47, 74; } /* ─── Sticky site chrome (landing, modules, onboarding, dashboard) ─── */ body.sat-academic .site-header { background: linear-gradient( 90deg, var(--sat-chrome-deep) 0%, var(--sat-chrome-primary) 42%, var(--sat-chrome-mid) 100% ); border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 2px 12px rgba(var(--sat-shadow-rgb), 0.22); } body.sat-academic .site-header .brand { color: #f0f7ff; } body.sat-academic .site-header .brand:hover { color: #fff; text-decoration: none; } body.sat-academic .site-header .brand__icon { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); } body.sat-academic .site-header .nav-links a { color: rgba(255, 255, 255, 0.82); border-bottom-color: transparent; } body.sat-academic .site-header .nav-links a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.5); text-decoration: none; } body.sat-academic .site-header .nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--sat-gold-accent); } body.sat-academic .site-header .btn-primary { background: #fff; color: var(--sat-chrome-deep); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } body.sat-academic .site-header .btn-primary:hover { background: #f0f7ff; color: var(--sat-chrome-deep); text-decoration: none; } body.sat-academic .site-header .btn-ghost { background: transparent; color: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.45); } body.sat-academic .site-header .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } /* Session platform header (shares .site-header) */ body.sat-academic .sat-platform-header { background: linear-gradient( 90deg, var(--sat-chrome-deep) 0%, var(--sat-chrome-primary) 42%, var(--sat-chrome-mid) 100% ); border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 2px 14px rgba(var(--sat-shadow-rgb), 0.28); } body.sat-academic .sat-platform-header .brand, body.sat-academic .sat-platform-header .brand:hover { color: #f0f7ff; text-decoration: none; } body.sat-academic .sat-platform-header .brand__icon { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); } body.sat-academic .sat-platform-header .nav-links a { color: rgba(255, 255, 255, 0.82); } body.sat-academic .sat-platform-header .nav-links a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.5); } body.sat-academic .sat-platform-header .nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--sat-gold-accent); } body.sat-academic .sat-platform-header .btn-portal { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.1); color: #fff; } body.sat-academic .sat-platform-header .btn-portal:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } /* Toolbar under main header */ body.sat-academic .session-toolbar { background: linear-gradient(180deg, #eef5fc 0%, #e8f0fa 100%); border-bottom: 1px solid rgba(13, 79, 140, 0.14); } body.sat-academic .btn-teacher-mode { border-color: var(--sat-chrome-mid); color: var(--sat-chrome-deep); background: #fff; } body.sat-academic .btn-teacher-mode[aria-pressed="true"] { background: linear-gradient(135deg, var(--sat-chrome-deep), var(--sat-chrome-primary)); color: #fff; border-color: var(--sat-chrome-deep); } body.sat-academic .toolbar-start-practice, body.sat-academic .nav-jump-teacher { color: var(--sat-chrome-primary); } body.sat-academic .nav-bar.session-jump-nav { background: linear-gradient( 90deg, var(--sat-chrome-deep) 0%, var(--sat-chrome-primary) 50%, var(--sat-chrome-mid) 100% ); border-bottom-color: rgba(255, 255, 255, 0.12); } body.sat-academic .session-nav-compact { color: #f0d978; } /* Session + landing hero (inline session styles keep layout/animation) */ body.sat-academic .hero { background: linear-gradient( 165deg, var(--sat-chrome-deep) 0%, var(--sat-chrome-primary) 42%, var(--sat-chrome-bright) 100% ); border-bottom: none; } body.sat-academic .hero h1 { color: #fff; } body.sat-academic .hero p { color: rgba(255, 255, 255, 0.88); } body.sat-academic .card, body.sat-academic .overview-flow, body.sat-academic .video-card, body.sat-academic .question-block { border-color: rgba(13, 79, 140, 0.1); box-shadow: 0 4px 18px rgba(var(--sat-shadow-rgb), 0.08); } body.sat-academic .card:hover, body.sat-academic .question-block:hover { box-shadow: 0 6px 26px rgba(var(--sat-shadow-rgb), 0.12); } body.sat-academic .section-label { color: var(--sat-chrome-mid); } body.sat-academic .section-label::before { background: var(--sat-chrome-bright); } body.sat-academic .q-tag { background: var(--sat-chrome-soft); color: var(--sat-chrome-primary); } body.sat-academic .q-passage { border-left-color: var(--sat-chrome-mid); } body.sat-academic .hero__eyebrow { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); } body.sat-academic .hero .btn-primary, body.sat-academic .hero__actions .btn-primary { background: #fff; color: var(--sat-chrome-deep); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18); } body.sat-academic .hero .btn-primary:hover, body.sat-academic .hero__actions .btn-primary:hover { background: #f0f7ff; color: var(--sat-chrome-deep); } body.sat-academic .hero .btn-ghost, body.sat-academic .hero__actions .btn-ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff; background: transparent; } body.sat-academic .hero .btn-ghost:hover, body.sat-academic .hero__actions .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } /* Hub module cards */ body.sat-academic .mod { border-top: 3px solid var(--sat-chrome-mid); box-shadow: 0 4px 18px rgba(var(--sat-shadow-rgb), 0.08); } body.sat-academic .path-card { border-top: 3px solid var(--sat-chrome-mid); box-shadow: 0 4px 16px rgba(var(--sat-shadow-rgb), 0.06); } /* Footer polish */ body.sat-academic .site-footer { background: #f8fafc; border-top-color: rgba(13, 79, 140, 0.12); } body.sat-academic .site-footer__links a:hover { color: var(--sat-chrome-primary); } /* ── Digital SAT premium chrome (purple + blue) — use body.sat-premium-chrome ── */ body.sat-premium-chrome.sat-academic .site-header { background: linear-gradient(105deg, #4c1d95 0%, #5b21b6 36%, #312e81 52%, #2563eb 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 4px 22px rgba(49, 46, 139, 0.22); } body.sat-premium-chrome.sat-academic .site-header .nav-links a { color: rgba(248, 250, 252, 0.88); } body.sat-premium-chrome.sat-academic .site-header .nav-links a:hover { color: #fff; border-bottom-color: rgba(253, 230, 138, 0.7); } body.sat-premium-chrome.sat-academic .site-header .btn-primary { background: #fff; color: #312e81; } body.sat-premium-chrome.sat-academic .site-header .btn-primary:hover { background: #f5f3ff; color: #1e1b4b; } body.sat-premium-chrome.sat-academic .site-header .btn-ghost { border-color: rgba(255, 255, 255, 0.45); color: rgba(248, 250, 252, 0.95); background: transparent; } body.sat-premium-chrome.sat-academic .site-header .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } body.sat-premium-chrome.sat-academic .hero__eyebrow { color: #fef9c3; }