/* ════════════════════════════════════════════════════════════════════ CANONICAL APP HEADER — styles Single source of truth for the header that ships on all 5 SAFE-section static guides. Self-contained design tokens scoped under .app-header so it renders pixel-identical regardless of the host page's own theme vars. Light vs dark theme is driven by set by the host page's theme-toggle script — same convention all 5 guides already use. ════════════════════════════════════════════════════════════════════ */ /* ── Canonical header tokens (DARK = default) ───────────────────────── */ .app-header { --hdr-bg: hsl(228 18% 6%); --hdr-surface-2: hsl(228 12% 13%); --hdr-surface-3: hsl(228 10% 17%); --hdr-border: hsl(228 10% 19%); --hdr-border-strong: hsl(228 10% 28%); --hdr-fg: hsl(220 20% 97%); --hdr-muted: hsl(220 8% 60%); --hdr-primary: hsl(150 70% 48%); --hdr-primary-soft: hsl(150 70% 48% / .14); --hdr-primary-soft-strong: hsl(150 70% 48% / .24); --hdr-success: hsl(150 70% 48%); --hdr-success-soft: hsl(150 70% 48% / .14); --hdr-success-border: hsl(150 70% 48% / .34); --hdr-danger: hsl(0 75% 60%); --hdr-danger-soft: hsl(0 75% 60% / .14); --hdr-danger-border: hsl(0 75% 60% / .32); --hdr-grad: linear-gradient(135deg, hsl(150 70% 48%) 0%, hsl(180 80% 50%) 100%); --hdr-on-primary: hsl(228 30% 6%); --hdr-r-sm: 6px; --hdr-r-md: 10px; --hdr-r-full: 999px; --hdr-dur: 220ms; --hdr-ease-out: cubic-bezier(.16, 1, .3, 1); --hdr-shadow-lg: 0 24px 50px -16px hsl(0 0% 0% / .65), 0 0 0 1px hsl(228 10% 19%); --hdr-font-display: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif; } /* ── Light theme overrides ──────────────────────────────────────────── */ html[data-theme="light"] .app-header { --hdr-bg: hsl(220 25% 98%); --hdr-surface-2: hsl(220 20% 97%); --hdr-surface-3: hsl(220 15% 94%); --hdr-border: hsl(220 15% 88%); --hdr-border-strong: hsl(220 15% 78%); --hdr-fg: hsl(220 30% 14%); --hdr-muted: hsl(220 12% 45%); --hdr-primary: hsl(220 75% 38%); --hdr-primary-soft: hsl(220 75% 38% / .10); --hdr-primary-soft-strong: hsl(220 75% 38% / .18); --hdr-success: hsl(160 65% 38%); --hdr-success-soft: hsl(160 65% 38% / .12); --hdr-success-border: hsl(160 65% 38% / .30); --hdr-danger: hsl(0 75% 50%); --hdr-danger-soft: hsl(0 75% 50% / .10); --hdr-danger-border: hsl(0 75% 50% / .30); --hdr-grad: linear-gradient(135deg, hsl(220 75% 38%) 0%, hsl(195 85% 42%) 100%); --hdr-on-primary: #fff; --hdr-shadow-lg: 0 18px 40px -12px hsl(220 30% 14% / .18), 0 6px 16px hsl(220 30% 14% / .06); } /* ── App header shell ───────────────────────────────────────────────── */ .app-header { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--hdr-bg) 80%, transparent); backdrop-filter: saturate(170%) blur(14px); -webkit-backdrop-filter: saturate(170%) blur(14px); border-bottom: 1px solid var(--hdr-border); color: var(--hdr-fg); font-family: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif; } .app-header__inner { max-width: 1320px; margin: 0 auto; padding: 14px 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; } .app-header__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; } .app-header__progress::after { content: ''; display: block; height: 100%; width: var(--p, 0%); background: var(--hdr-grad); transition: width 600ms var(--hdr-ease-out); } /* ── Brand ──────────────────────────────────────────────────────────── */ .app-header .brand { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--hdr-fg); text-decoration: none; } .app-header .brand__mark { width: 36px; height: 36px; border-radius: 10px; background: var(--hdr-grad); display: grid; place-items: center; color: var(--hdr-on-primary); font-weight: 700; font-size: 14px; font-family: var(--hdr-font-display); box-shadow: 0 8px 24px -6px hsl(220 75% 38% / .45); position: relative; overflow: hidden; } .app-header .brand__mark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .25), transparent 60%); } .app-header .brand__name { font-family: var(--hdr-font-display); font-size: 17px; letter-spacing: -.01em; } .app-header .brand__name b { font-weight: 700; } .app-header .brand__name .gradient-text { background: var(--hdr-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 700; } /* ── Site nav ───────────────────────────────────────────────────────── */ .app-header .site-nav { display: flex; align-items: center; justify-content: center; gap: 48px; flex: 1; } .app-header .site-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--hdr-muted); background: none; border: 0; cursor: pointer; white-space: nowrap; transition: color var(--hdr-dur); text-decoration: none; } .app-header .site-nav__link:hover { color: var(--hdr-fg); } .app-header .site-nav__link svg { width: 14px; height: 14px; flex-shrink: 0; } .app-header .site-nav__chev { transition: transform var(--hdr-dur); } .app-header .site-nav__dd { position: relative; } .app-header .site-nav__dd > summary { list-style: none; } .app-header .site-nav__dd > summary::-webkit-details-marker { display: none; } .app-header .site-nav__dd[open] > summary { color: var(--hdr-fg); } .app-header .site-nav__dd[open] .site-nav__chev { transform: rotate(180deg); } .app-header .site-nav__menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 192px; background: var(--hdr-surface-2); border: 1px solid var(--hdr-border); border-radius: var(--hdr-r-md); box-shadow: var(--hdr-shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 1px; z-index: 60; animation: hdrFadeUp 180ms var(--hdr-ease-out) both; } .app-header .site-nav__menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 14px; color: var(--hdr-fg); border-radius: var(--hdr-r-sm); transition: background var(--hdr-dur); text-decoration: none; } .app-header .site-nav__menu a:hover { background: var(--hdr-surface-3); } .app-header .site-nav__menu a svg { width: 16px; height: 16px; color: var(--hdr-muted); flex-shrink: 0; } .app-header .site-nav__menu hr { border: 0; border-top: 1px solid var(--hdr-border); margin: 4px 0; } @media (max-width: 880px) { .app-header .site-nav { display: none; } } /* ── Header right cluster ───────────────────────────────────────────── */ .app-header .header-right { display: flex; align-items: center; gap: 10px; } /* ── Score pill ─────────────────────────────────────────────────────── */ .app-header .score-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; background: var(--hdr-primary-soft); border: 1px solid var(--hdr-primary-soft-strong); border-radius: var(--hdr-r-full); font-size: 12px; font-weight: 600; white-space: nowrap; } .app-header .score-pill__label { font-family: var(--hdr-font-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hdr-primary); } .app-header .score-pill__bar { width: 48px; height: 5px; background: var(--hdr-surface-3); border: 1px solid var(--hdr-border); border-radius: var(--hdr-r-full); overflow: hidden; } .app-header .score-pill__fill { height: 100%; background: var(--hdr-grad); border-radius: var(--hdr-r-full); transition: width 0.6s ease; width: 0%; } .app-header .score-pill__pct { color: var(--hdr-primary); font-variant-numeric: tabular-nums; font-weight: 700; } .app-header .score-pill--bad { background: var(--hdr-danger-soft); border-color: var(--hdr-danger-border); } .app-header .score-pill--bad .score-pill__label { color: var(--hdr-danger); } .app-header .score-pill--bad .score-pill__fill { background: linear-gradient(135deg, var(--hdr-danger) 0%, hsl(15 80% 55%) 100%); } .app-header .score-pill--bad .score-pill__pct { color: var(--hdr-danger); } .app-header .score-pill--good { background: var(--hdr-success-soft); border-color: var(--hdr-success-border); } .app-header .score-pill--good .score-pill__label { color: var(--hdr-success); } .app-header .score-pill--good .score-pill__fill { background: linear-gradient(135deg, var(--hdr-success) 0%, hsl(180 80% 50%) 100%); } .app-header .score-pill--good .score-pill__pct { color: var(--hdr-success); } /* ── Icon button (theme toggle, etc.) ───────────────────────────────── */ .app-header .icon-btn { appearance: none; background: var(--hdr-surface-2); border: 1px solid var(--hdr-border); color: var(--hdr-fg); width: 38px; height: 38px; border-radius: var(--hdr-r-md); display: inline-grid; place-items: center; cursor: pointer; transition: all var(--hdr-dur); } .app-header .icon-btn:hover { border-color: var(--hdr-border-strong); background: var(--hdr-surface-3); } .app-header .icon-btn:active { transform: scale(.96); } .app-header .icon-btn svg { width: 17px; height: 17px; } /* ── Auth button + user dropdown ────────────────────────────────────── */ .app-header .auth-btn { text-decoration: none; } .app-header .auth-dd { position: relative; } .app-header .auth-dd > summary { list-style: none; display: inline-grid; place-items: center; } .app-header .auth-dd > summary::-webkit-details-marker { display: none; } .app-header .auth-dd[open] > summary { border-color: var(--hdr-border-strong); background: var(--hdr-surface-3); } .app-header .auth-dd__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--hdr-surface-2); border: 1px solid var(--hdr-border); border-radius: var(--hdr-r-md); box-shadow: var(--hdr-shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 1px; z-index: 60; animation: hdrFadeUpRight 180ms var(--hdr-ease-out) both; } .app-header .auth-dd__menu a, .app-header .auth-dd__menu button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 14px; font-family: inherit; color: var(--hdr-fg); background: none; border: 0; border-radius: var(--hdr-r-sm); transition: background var(--hdr-dur); text-decoration: none; cursor: pointer; text-align: left; width: 100%; } .app-header .auth-dd__menu a:hover, .app-header .auth-dd__menu button:hover { background: var(--hdr-surface-3); } .app-header .auth-dd__menu a svg, .app-header .auth-dd__menu button svg { width: 16px; height: 16px; color: var(--hdr-muted); flex-shrink: 0; } .app-header .auth-dd__menu hr { border: 0; border-top: 1px solid var(--hdr-border); margin: 4px 0; } .app-header .auth-dd__email { font-size: 11px; font-weight: 600; color: var(--hdr-muted); padding: 6px 10px 2px; letter-spacing: .02em; word-break: break-all; } /* ── Mobile-only utility (React-side use) ───────────────────────────── */ .app-header .mg-mobile-only { display: none; } @media (max-width: 880px) { .app-header .mg-mobile-only { display: inline-flex; } .app-header #tweaksBtn { display: none; } } /* ── Animations ─────────────────────────────────────────────────────── */ @keyframes hdrFadeUp { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes hdrFadeUpRight { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }