/* ========================================================================== Sunny Varkey K — Ink & Cobalt tokens.css — palette, type scale, spacing scale, grid, motion, focus. One file. Every value below is referenced by components.css; nothing in components.css invents a colour, a size or a space of its own. ========================================================================== */ /* -------------------------------------------------------------------------- 1. PALETTE Warm off-white paper against cool ink. The blues are held to text, rules, actions and two small surfaces so that the photographs, the book cover and the YouTube thumbnails stay the strongest colour on every page. -------------------------------------------------------------------------- */ :root { /* Paper — warm, quiet, never stark white */ --paper: oklch(0.9785 0.0055 85); /* page ground #faf8f4 */ --paper-2: oklch(0.9605 0.0075 82); /* alternating band #f4f1ea */ /* Ink — deep blue-black for type */ --ink: oklch(0.285 0.048 258); /* primary text #1c2a47 */ --ink-2: oklch(0.468 0.036 258); /* secondary text #4d5a76 */ --ink-3: oklch(0.612 0.028 258); /* metadata, disabled #77839c */ /* Cobalt — actions, selected navigation, links */ --cobalt: oklch(0.502 0.178 262); /* action #2a4fc9 */ --cobalt-deep: oklch(0.418 0.155 262); /* action, pressed #1e3ba1 */ --cobalt-soft: oklch(0.902 0.038 254); /* selected wash #dbe3f7 */ /* Mist — the only tinted surfaces */ --mist: oklch(0.9385 0.0225 252); /* restrained surface #e5eaf6 */ --rule: oklch(0.8865 0.0165 254); /* hairline #d3dae9 */ --rule-strong: oklch(0.795 0.0275 256); /* emphasised hairline #b2bdd4 */ /* Amber — the single warm counter-accent. Used only where it does real hierarchy work: the "latest" marker and the edition tag. Never a surface. */ --amber: oklch(0.6115 0.1265 62); /* warm counter-accent #a4652a */ /* Photograph ground — behind uncropped archive images in the lightbox */ --shade: oklch(0.2125 0.032 258); --shade-veil: oklch(0.2125 0.032 258 / 0.94); /* -------------------------------------------------------------------------- 2. TYPEFACES Literata (OFL, TypeTogether) — drawn for long-form reading on screen. Low stroke contrast and sturdy serifs, so it stays a reading face when it is set large. Chosen deliberately against the high-contrast display serif that a site like this usually gets: the content here is prose and example sentences, so the display face is a reading face promoted, not a fashion face shrunk. Archivo (OFL, Omnibus-Type) — a grotesque with tight, even sidebearings that stays legible at 13px. Carries navigation, labels, captions, counts and dates, where neutrality and tabular figures matter. -------------------------------------------------------------------------- */ --font-read: "Literata", "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif; --font-ui: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; /* -------------------------------------------------------------------------- 3. TYPE SCALE — 320 → 768px segment Every step is continuous at 768px with the desktop segment below, so no size ever jumps at a tablet width. Across the common phone range the display grows 38 → 39px (320 → 430px): line wrapping and section height stay stable, which is the whole point. -------------------------------------------------------------------------- */ --fs-display: clamp(38px, 35.143px + 0.8929vw, 42px); --fs-h1: clamp(29px, 26.857px + 0.6696vw, 32px); --fs-h2: clamp(22px, 20.571px + 0.4464vw, 24px); --fs-h3: clamp(18.5px, 18.143px + 0.1116vw, 19px); --fs-lead: clamp(17px, 16.286px + 0.2232vw, 18px); --fs-body: clamp(16.5px, 16.143px + 0.1116vw, 17px); --fs-small: 14.5px; --fs-micro: 13px; /* Leading */ --lh-display: 1.045; --lh-h: 1.16; --lh-lead: 1.48; --lh-body: 1.62; --lh-small: 1.45; /* Tracking */ --tr-display: -0.021em; --tr-h: -0.014em; --tr-body: 0; --tr-micro: 0.055em; /* Measure */ --measure-lead: 44ch; --measure-body: 60ch; --measure-narrow: 46ch; /* -------------------------------------------------------------------------- 4. SPACING SCALE One 4px-based scale. --space-section and --space-block are the only fluid spaces; everything else is fixed so that small components keep the same rhythm at every width. -------------------------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 104px; --space-section: clamp(44px, 32.571px + 3.5714vw, 60px); --space-block: clamp(24px, 18.286px + 1.7857vw, 32px); /* -------------------------------------------------------------------------- 5. GRID --gutter is the single left/right anchor. Header, hero, every section opening, gallery captions and the footer all resolve to it, so the page has one vertical alignment line at every width. -------------------------------------------------------------------------- */ --gutter: clamp(20px, 5.714px + 4.4643vw, 40px); --measure-page: 1200px; /* one container width for every section and rule */ /* Fixed component metrics */ --header-h: 64px; --tap: 44px; /* minimum interactive target */ --portrait: 150px; /* the source photograph is 150x150. Never upscaled. */ /* Focus */ --focus: 2px solid var(--cobalt); --focus-offset: 3px; /* Motion */ --ease: cubic-bezier(0.2, 0.6, 0.25, 1); --dur: 160ms; } /* Desktop segment: 768 → 1440px. Each clamp starts at exactly the value the phone segment ended on, so the transition across 768px is continuous. */ @media (min-width: 768px) { :root { --fs-display: clamp(42px, 12.286px + 3.869vw, 68px); --fs-h1: clamp(32px, 18.286px + 1.7857vw, 44px); --fs-h2: clamp(24px, 17.143px + 0.8929vw, 30px); --fs-h3: clamp(19px, 15.571px + 0.4464vw, 22px); --fs-lead: clamp(18px, 15.714px + 0.2976vw, 20px); --fs-body: clamp(17px, 16.429px + 0.0744vw, 17.5px); --fs-small: clamp(14.5px, 13.929px + 0.0744vw, 15px); --fs-micro: clamp(13px, 12.429px + 0.0744vw, 13.5px); --space-section: clamp(60px, 41.714px + 2.381vw, 76px); --space-block: clamp(32px, 18.286px + 1.7857vw, 44px); --gutter: clamp(40px, 30.857px + 1.1905vw, 48px); --header-h: 76px; } } /* -------------------------------------------------------------------------- 6. BREAKPOINTS (documentation — the values used throughout components.css) 400px the four book counts turn from one column into an aligned 2x2 520px teaching gallery goes from 2 to 3 columns 600px action group turns from a stacked pair into a row; the hero fact row appears as three columns 620px photograph strips go to 3 columns; footer to 2 768px type scale enters its desktop segment; full navigation appears; the name's baseline and the portrait's bottom edge meet on one rule 900px the notes index goes to two columns 1024px feature blocks split into media + text; footer to 4 columns 1200px teaching gallery reaches 4 columns; page caps at 1200px 1440px type scale and section rhythm reach their maximum; nothing grows beyond this, so 1920px is the same composition with wider margins -------------------------------------------------------------------------- */