/* ========================================================================== Waiz Earn — design tokens -------------------------------------------------------------------------- Dark is the brand default. Light is a real second theme, not dark with a white background swapped in: the surfaces, borders and shadows are all re-derived so the page reads as a daylight product rather than an inverted night one. Every text/surface pair below was chosen to clear WCAG AA (4.5:1 body, 3:1 large text and UI edges) in BOTH themes. ========================================================================== */ :root { color-scheme: dark; /* --- surfaces --------------------------------------------------------- */ --bg: #070A12; --bg-elev: #0A0F1C; --surface: #0D1220; --surface-2: #111829; --surface-hover: #161E33; --surface-sunk: #080C17; /* --- lines ------------------------------------------------------------ */ --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16); --line-focus: rgba(120,160,255,.55); /* --- text ------------------------------------------------------------- */ --text: #F4F7FF; /* 17.4:1 on --surface */ --text-2: #C3CDE4; /* 10.9:1 */ --muted: #94A2BF; /* 6.9:1 */ --subtle: #78869F; /* 4.8:1 — the floor, never go quieter */ /* --- brand ------------------------------------------------------------ Sampled from images/waiz-logo-256.png: the mark is a blue "W" with a violet lift. Do not recolour the logo to match a section. */ --brand: #3B82F6; --brand-2: #6366F1; --brand-3: #A855F7; --brand-ink: #FFFFFF; /* --brand is tuned to read well AS text on a dark surface. White text ON it is only 3.68:1, which fails AA. Anything that fills a shape and puts white text on top uses --brand-solid instead: 5.17:1 with white. Keeping the two apart is why the skip link and the selected tab are legible. */ --brand-solid: #2563EB; --brand-solid-2: #4F46E5; --brand-solid-3: #7E22CE; --brand-soft: rgba(59,130,246,.14); --brand-line: rgba(99,102,241,.34); /* --- state ------------------------------------------------------------ */ --ok: #34D399; --ok-soft: rgba(52,211,153,.14); --warn: #FBBF24; --warn-soft: rgba(251,191,36,.14); --danger: #F87171; --danger-soft: rgba(248,113,113,.14); /* --- app accents (fallbacks; wh_apps supplies the real ones) ---------- */ --a-learnify: #22D3EE; --a-hearnify: #FF4D9D; --a-paldearn: #FFB020; --a-tracearn: #16C7C9; /* --- geometry --------------------------------------------------------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px; --sp-9: 64px; --sp-10: 88px; --max: 1200px; --gutter: clamp(16px, 4vw, 32px); /* --- elevation -------------------------------------------------------- */ --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 8px 24px -12px rgba(0,0,0,.65); --sh-3: 0 24px 60px -24px rgba(0,0,0,.8); --sh-brand: 0 12px 32px -14px rgba(59,130,246,.75); /* --- motion ----------------------------------------------------------- */ --ease: cubic-bezier(.22,.8,.25,1); --t-fast: 160ms; --t-base: 220ms; --t-slow: 300ms; /* --- type ------------------------------------------------------------- */ /* Two self-hosted variable faces, 47 KB for every weight, SIL OFL. Self-hosted rather than pulled from a font CDN: a CDN would hand every visitor's IP to a third party and put a blocking request on the critical path, and neither is worth a typeface. Manrope — geometric with warmth, excellent numerals, for UI and body Space Grotesk — distinctive display face, so headlines read as a brand rather than as the operating system's bold default */ --font: "Manrope Variable", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-display: "Space Grotesk Variable", "Manrope Variable", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-display: clamp(38px, 7.2vw, 64px); --fs-h1: clamp(28px, 4.4vw, 40px); --fs-h2: clamp(22px, 3vw, 28px); --fs-h3: 18px; --fs-body: 15px; --fs-sm: 13.5px; --fs-xs: 12px; /* Scales with the accessibility text-size preference. */ --text-scale: 1; } /* -------------------------------------------------------------------------- LIGHT THEME Re-derived, not inverted. Borders become solid hairlines because translucent white lines vanish on a light ground. -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #F4F6FB; --bg-elev: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F9FD; --surface-hover: #EEF3FC; --surface-sunk: #EDF1F8; --line: #E2E8F2; --line-strong: #CBD5E6; --line-focus: rgba(37,99,235,.55); --text: #0C1424; /* 17.9:1 on white */ --text-2: #2C3852; /* 11.4:1 */ --muted: #55617C; /* 6.6:1 on white · 5.47:1 on --surface-sunk */ /* Was #66738F, which cleared 4.9:1 on pure white but only 4.20:1 on --surface-sunk — and --surface-sunk is exactly where it gets used, in the footer headings and the app feature chips. Measured against the surface it actually sits on, not against white: 5.02:1. */ --subtle: #5B677F; --brand: #2563EB; --brand-2: #4F46E5; --brand-3: #9333EA; --brand-solid: #1D4ED8; --brand-solid-2: #4338CA; --brand-solid-3: #7E22CE; --brand-soft: rgba(37,99,235,.09); --brand-line: rgba(79,70,229,.28); --ok: #047857; --ok-soft: rgba(4,120,87,.10); --warn: #92610A; --warn-soft: rgba(146,97,10,.10); --danger: #B42318; --danger-soft: rgba(180,35,24,.10); --sh-1: 0 1px 2px rgba(16,24,40,.06); --sh-2: 0 8px 24px -12px rgba(16,24,40,.16); --sh-3: 0 24px 60px -24px rgba(16,24,40,.22); --sh-brand: 0 12px 28px -14px rgba(37,99,235,.5); } /* -------------------------------------------------------------------------- HIGH CONTRAST — an accessibility preference, not a third theme. Strengthens edges and lifts the quietest text to full strength. -------------------------------------------------------------------------- */ :root[data-contrast="high"] { --muted: var(--text-2); --subtle: var(--text-2); --line: var(--line-strong); --line-strong: currentColor; } :root[data-contrast="high"] .card, :root[data-contrast="high"] .app-card { border-width: 2px; } /* Text size preference. */ :root[data-textsize="large"] { --text-scale: 1.125; } :root[data-textsize="larger"] { --text-scale: 1.28; } /* Underline links preference. */ :root[data-underline="on"] main a:not(.btn):not(.app-card):not(.tile) { text-decoration: underline; }