/* ============================================================ Tier-adaptive presentation. `data-band` on is derived from the active profile's tier (see src/curriculum/tiers.js). Rather than forking components we re-map a handful of tokens, so a preschooler and a staff engineer use the same code with very different ergonomics. ============================================================ */ /* --- Band: early (tier 0) ages ~3-5 ------------------------- */ html[data-band="early"] { --scale: 1.28; --density: 1.25; --hit: 68px; --r-sm: 16px; --r-md: 22px; --r-lg: 28px; --r-xl: 34px; --accent: #ffb03b; --accent-contrast: #2a1500; --beam-soft: #ffb03b2e; --layout-max: 1000px; } html[data-band="early"] .btn { font-weight: 800; letter-spacing: 0.01em; } html[data-band="early"] .btn--primary { --btn-bg: linear-gradient(180deg, #ffc861, #f59317); box-shadow: 0 4px 0 #b96a06, 0 8px 22px #f5931747; } html[data-band="early"] .btn--primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #b96a06; } html[data-band="early"] .card { border-width: 2px; } html[data-band="early"] .page-head .lede { font-size: var(--fs-xl); } html[data-band="early"] .chip { font-size: var(--fs-2xs); padding: 5px var(--sp-3); } /* Quieter, friendlier chrome: hide the denser navigation entries */ html[data-band="early"] .nav-link[data-band-min="explorer"], html[data-band="early"] .nav-link[data-band-min="junior"] { display: none; } /* --- Band: junior (tier 1) ages ~5-8 ------------------------ */ html[data-band="junior"] { --scale: 1.14; --density: 1.12; --hit: 56px; --r-sm: 13px; --r-md: 18px; --accent: #4fd6b8; --accent-contrast: #032420; --beam-soft: #4fd6b82e; --layout-max: 1080px; } html[data-band="junior"] .btn--primary { --btn-bg: linear-gradient(180deg, #6ee7c8, #22a98e); box-shadow: 0 3px 0 #147a65, 0 6px 18px #22a98e42; } html[data-band="junior"] .btn--primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #147a65; } html[data-band="junior"] .nav-link[data-band-min="explorer"] { display: none; } /* --- Band: explorer (tiers 2-3) ages ~8-14 ------------------ */ html[data-band="explorer"] { --scale: 1.04; --density: 1.04; --hit: 48px; --accent: #45c8ff; } /* --- Band: adept (tiers 4-5) --------------------------------- */ html[data-band="adept"] { --scale: 1; --density: 1; --accent: #45c8ff; } /* --- Band: pro (tiers 6-7) ----------------------------------- */ html[data-band="pro"] { --scale: 0.96; --density: 0.86; --hit: 40px; --r-xs: 4px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --accent: #6ee7ff; --layout-max: 1320px; } html[data-band="pro"] body::before { opacity: 0.42; } html[data-band="pro"] .card { box-shadow: none; } html[data-band="pro"] .card--link:hover { transform: none; box-shadow: var(--shadow-2); } html[data-band="pro"] .page-head .lede { font-size: var(--fs-md); } html[data-band="pro"] h1 { font-size: var(--fs-2xl); } html[data-band="pro"] .stat-value { font-size: var(--fs-xl); } html[data-band="pro"] .brand-mark { filter: none; } /* --- User text-size preference stacks on top of the band ----- */ html[data-textsize="large"] { --scale: calc(var(--band-scale, 1) * 1.15); } html[data-textsize="xlarge"] { --scale: calc(var(--band-scale, 1) * 1.32); } html[data-band="early"] { --band-scale: 1.28; } html[data-band="junior"] { --band-scale: 1.14; } html[data-band="explorer"] { --band-scale: 1.04; } html[data-band="adept"] { --band-scale: 1; } html[data-band="pro"] { --band-scale: 0.96; } /* --- Tier colour keys (used by cards, maps, chips) ----------- */ .tier-0 { --tier-color: #ff8fd1; } .tier-1 { --tier-color: #ffb03b; } .tier-2 { --tier-color: #5fe3a1; } .tier-3 { --tier-color: #45c8ff; } .tier-4 { --tier-color: #7aa2ff; } .tier-5 { --tier-color: #a97bff; } .tier-6 { --tier-color: #ff7fa8; } .tier-7 { --tier-color: #ff6b4a; } .tier-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tier-color, var(--beam)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier-color, var(--beam)) 22%, transparent); flex: 0 0 auto; }