/* Alamly Academy — v2 design system (2026-08-16 redesign, LOCKED with Alam). Warm paper + two-tone lime + Fraunces/Figtree. See PLAN.md "LOCKED design system". NOT loaded by the old 34 pages (they use styles.css / the old indigo system). A page uses ONE of the two stylesheets, never both. Pages migrate here one at a time. Two-tone lime rule (read this before touching any color here): - --lime (bright) is a FILL color only — buttons, chips, highlights. Always paired with --ink text/icons on top (max contrast). Never used as text on paper. - --lime-text (deep) is a TEXT color only — links, active nav, the "ly" in the logo. Never used as a large fill; on paper it is the only lime that is readable as text. - On near-black surfaces only, bright --lime MAY be used as text (dark bg flips the rule). */ /* ============================================================================ ARCHITECTURE — read this before adding ANY rule. Layer order in this file: (1) tokens (2) base / element defaults (3) reusable components (4) page-layout compositions (5) responsive. Put a new rule in the layer it belongs to, never scattered. Style-guide-only scaffold (.sg-*) lives in its OWN file, styleguide.css, loaded only by styleguide.html — not here. TWO LAWS. These are what stop this file from rotting back into duplication: 1. ONE THING = ONE CLASS, DEFINED ONCE. "One thing" means one visual concept, not one HTML element. A button is one thing: .btn defines it, .btn-primary is a MODIFIER class on the same element (class="btn btn-primary"). Two classes on one element is correct. What is NOT allowed: a second class that re-declares something the base already owns. A topic-card and a quote-card are different CONTENT but share the one card skeleton (.card) — they must not each redraw a border / radius / background. 2. A PAGE OR CONTEXT TWEAK = PARENT SELECTOR + THE SAME CLASS, never a new class, never inline style="". Example: .footer .brand-sub { ... } re-colors the brand inside the footer without inventing a new class. If you are about to type style="..." on an element, stop — it belongs here as a scoped rule instead. ============================================================================ */ /* ---------------- fonts ---------------- */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Figtree:wght@400;500;600;700;800&display=swap'); /* ---------------- tokens ---------------- */ :root { --paper: #faf9f6; --paper-2: #f2f0e9; /* alt-section tint */ --ink: #1a1a1a; --ink-2: #4a4a48; --ink-3: #8a8a86; --line: #e7e5df; --line-2: #d8d5cd; --lime: #d5fc28; /* FILL only */ --lime-hover: #c3e922; --lime-text: #577609; /* TEXT only, on paper. 4.99:1 vs paper (WCAG AA), same green as the fill */ --lime-wash: #eaff8c; --money: #1a1a1a; /* enroll / pay / checkout — the only ink-solid button */ --money-hover:#000000; --money-ink: #ffffff; --surface: #ffffff; /* card / nav / modal / sidebar bg — always pure white, distinct from --paper */ /* semantic system feedback — distinct from brand lime, used for status only. Two-tone like lime: the plain token is text-safe (AA, 4.5:1+ on paper/white), the -vivid token is for icons/large fills only (3:1 threshold, genuinely bright). */ --ok: #15803d; --ok-vivid: #16a34a; --ok-wash: #e3f6ea; --warn: #b45309; --warn-vivid:#d97706; --warn-wash: #fdf0d9; --err: #dc2626; --err-wash: #fdeaea; --info: var(--lime-text); --info-wash: var(--lime-wash); --font-serif: "Fraunces", Georgia, serif; --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* TYPE SCALE — the only UI/body font-sizes (headings keep the h1/h2/h3 rules + display rems). Replaces the ~30 hand-picked sizes (incl. half-pixels like 12.5/13.5/15.5) with one ladder. A consistency pass snaps each old size to its nearest step here; nothing shifts more than ~0.5px. */ --text-xs: 12px; /* tiny uppercase labels */ --text-sm: 13px; /* chips (pill/tag), small meta */ --text-md: 14px; /* secondary meta */ --text-base: 15px; /* card body / descriptions */ --text-lg: 16px; /* standard body in components */ --text-xl: 18px; /* lead-ish / large body */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px; --shadow-sm: 0 6px 22px rgba(26,26,26,.06); --shadow-md: 0 10px 32px rgba(26,26,26,.09); --cap: 1600px; --nav-h: 78px; /* the one shared width for a centered narrative block (reframe statements, the closing band, an oversized pull-statement) — every such section uses this, never its own number. Left- aligned wide-paragraph contexts (.measure-lg) are a different, deliberately separate case. */ --measure: 900px; --measure-wide: 1100px; /* wider centered measure for section heads that sit over full-width content */ /* SPACING SCALE — the only spacing values allowed. Every gap, margin, and section padding resolves to one of these, so spacing is a system, never a guessed one-off number. 8px base. */ --sp-0: 0px; --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; /* half-steps on the 4px grid — the common in-between gaps (4/12/20/40) that were previously raw px. With these, the whole spacing system is 4/8/12/16/20/24/32/40/48/64/96; off-grid one-offs (10/14/18/26/30/36…) snap to the nearest of these during the consistency pass. */ --sp-05: 4px; --sp-15: 12px; --sp-25: 20px; --sp-45: 40px; /* Section rhythm: fixed vertical padding for every top-level page section (top AND bottom), so every public page breathes identically. 80px = 8px base x 10. One value, used everywhere. */ --section-y: 80px; /* STRUCTURAL WIDTHS — the repeated layout dimensions, named so pages stop inventing magic numbers. Rails are parameterized: a page sets --rail-w on .with-rail for its own width. */ --w-card: 460px; /* a focused single card: sign-in / sign-up / verify / modal */ --w-narrow: 720px; /* single-column reading width: account pages, legal body */ --rail-w: 410px; /* default sidebar/rail width for .with-rail (course/resource/event detail cards) */ } /* ---------------- base ---------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } /* NOTE: do not add overflow-x:hidden here. It forces overflow-y to compute as `auto` on both html and body (CSS overflow-x/y coupling), creating two nested scroll containers, which is the classic silent way position:sticky breaks (sidebar nav, sticky enroll box, course player sidebar, etc.). Real horizontal-overflow causes get fixed at the source (grid minmax(0,1fr) guards, button white-space) instead. */ html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); color: var(--ink-2); background: var(--paper); font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } a { color: var(--lime-text); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* every heading gets breathing room below it by default — components override this only when they have a real reason (documented at the override), never by accident. This is what used to be missing: each component invented its own margin-bottom (4/6/8/10/16/22px) instead of one heading ever having a sane default. */ h1,h2,h3,h4 { font-family: var(--font-serif); color: var(--ink); font-weight: 600; letter-spacing: -.015em; line-height: 1.08; margin-bottom: 16px; } h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); font-weight: 600; margin-bottom: 24px; } h2 { font-size: clamp(1.7rem, 2.8vw, 2.25rem); line-height: 1.5; margin-bottom: 20px; } h3 { font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 8px; } h4 { font-size: 1.125rem; line-height: 1.3; margin-bottom: 8px; } p { color: var(--ink-2); font-size: 17px; } strong { color: var(--ink); font-weight: 600; } code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; background: var(--paper-2); padding: 2px 6px; border-radius: 5px; color: var(--ink); } .wrap { width: 90%; max-width: var(--cap); margin: 0 auto; } @media (min-width: 1600px) { .wrap { width: 80%; } } /* footer stays at 90% even on very wide screens — deliberately exempt from the 80% shrink, nothing else should be. Higher specificity than plain .wrap wins regardless of media query. */ .footer .wrap { width: 90%; } /* ---- section: the one vertical-rhythm block every page is built from ---- */ .section { padding: var(--section-y) 0; } .section.tight { padding: var(--section-y) 0; } /* Section rhythm (public pages): the
s inside the public
auto-alternate paper / paper-2, so conditional or reordered sections never double up a background (no more manual `tint` juggling). Scoped to .site-main only, so app (.portal-main) and admin (.admin-main) shells are untouched even once they are
too; the
/