/* ehsto.dev — design system (framework primitives only) * * Apply data-theme="dark" or "light" on . This file is the * portable, exportable design system. ehsto.dev's own UI lives in a * separate app.css that's loaded only by index.html — consuming * projects don't need it. * * File layout: * SECTION 1 — Tokens, themes, base reset * SECTION 2 — Framework primitives * · Typography * · Layout regions, header, nav, footer * · App-shell, section-block, header-section, columns-block * · Card, form, button, table, empty-state, status / alerts * · Utilities * * Mobile-first throughout. Each component carries its own breakpoint * overrides locally — there are no monolithic "iPad" / "Desktop" blocks. */ /* ============================================================ * SECTION 1 — TOKENS, THEMES, BASE * ============================================================ */ /* ─── DESIGN TOKENS ──────────────────────────────────────── */ :root { /* Typography */ --font-family-01: Arial, Helvetica, sans-serif; --font-family-02: monospace; /* Spacing scale (multiples of 3) */ --space-3: 3px; --space-6: 6px; --space-9: 9px; --space-12: 12px; --space-15: 15px; --space-18: 18px; --space-21: 21px; --space-24: 24px; --space-30: 30px; --space-36: 36px; --space-42: 42px; --space-60: 60px; --space-90: 90px; /* Layout */ --gap: 9px; --secondary-header-height: 50px; --content-max: 1400px; /* Type scale — headings */ --fs-h0: 3.6rem; --fs-h1: 2.7rem; --fs-h2: 2.1rem; --fs-h3: 1.5rem; --fs-h4: 1.2rem; --fs-h5: 0.9rem; --fs-h6: 0.9rem; /* Type scale — body & components */ --fs-body: 0.9rem; --fs-small: 0.72rem; --fs-input: 0.72rem; --fs-input-focus: 0.8rem; --fs-button: 0.9rem; --fs-button-small: 0.8rem; --fs-table: 0.85rem; --fs-table-header: 0.82rem; } /* ─── COLOR THEMES ───────────────────────────────────────── */ html[data-theme="dark"] { --color-foreground: rgb(201, 201, 201); --color-foreground-rgb: 201, 201, 201; --color-foreground-brighter: rgb(255, 255, 255); --color-foreground-darker: rgb(99, 99, 99); --color-background: rgb(19, 19, 19); --color-background-rgb: 19, 19, 19; --color-background-brighter: rgb(51, 51, 51); --color-background-darker: rgb(15, 15, 15); --color-accent-01: rgba(150, 222, 162, 1); --color-accent-01-rgb: 150, 222, 162; --color-accent-01-brighter: rgba(150, 222, 162, 0.9); --color-accent-01-darker: rgb(18, 45, 30); --color-accent-02: rgb(228, 105, 105); --color-accent-02-rgb: 228, 105, 105; --color-accent-02-brighter: rgb(246, 135, 135); --color-accent-02-darker: rgb(153, 45, 45); --color-accent-03: rgb(201, 153, 78); --color-accent-03-rgb: 201, 153, 78; --color-accent-03-brighter: rgb(222, 186, 123); --color-accent-03-darker: rgb(154, 113, 51); } html[data-theme="light"] { --color-foreground: rgb(51, 51, 51); --color-foreground-rgb: 51, 51, 51; --color-foreground-brighter: rgb(0, 0, 0); --color-foreground-darker: rgb(162, 115, 103); --color-background: rgb(249, 238, 221); --color-background-rgb: 249, 238, 221; --color-background-brighter: rgb(224, 215, 204); --color-background-darker: rgb(255, 247, 235); --color-accent-01: rgb(56, 142, 80); --color-accent-01-rgb: 56, 142, 80; --color-accent-01-brighter: rgb(38, 110, 60); --color-accent-01-darker: rgb(190, 222, 200); --color-accent-02: rgb(184, 52, 29); --color-accent-02-rgb: 184, 52, 29; --color-accent-02-brighter: rgb(150, 40, 20); --color-accent-02-darker: rgb(240, 200, 195); --color-accent-03: rgb(154, 113, 51); --color-accent-03-rgb: 154, 113, 51; --color-accent-03-brighter: rgb(120, 85, 35); --color-accent-03-darker: rgb(232, 215, 180); } /* ─── BASE RESET ─────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { color: var(--color-foreground); font-family: var(--font-family-01); font-size: 1rem; line-height: 1.5; } /* ============================================================ * SECTION 2 — FRAMEWORK PRIMITIVES * ============================================================ */ /* ─── TYPOGRAPHY ─────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-01); color: var(--color-foreground); margin: var(--space-42) 0 var(--space-30) 0; /* When the page is anchor-scrolled (e.g. from sidebar nav), keep the * heading below the sticky header instead of behind it. */ scroll-margin-top: var(--space-90); } /* h0 is a ceremonial scale above h1 — used for the largest display text on * a page (hero headings, cover-page titles). Not a native HTML element; * apply as a class on any heading element where you want this scale. */ .h0 { font-family: var(--font-family-01); font-size: var(--fs-h0); font-weight: 600; line-height: 4.2rem; color: var(--color-foreground); margin: var(--space-30) 0 var(--space-30) 0; padding-top: var(--space-21); } /* Mobile-first: h1/h2/h3 use smaller base sizes for narrow viewports. At * ≥768px the media-query block below restores the desktop token sizes. * Line-heights flex with the font-size at each breakpoint. */ h1 { font-size: 1.9rem; font-weight: 600; line-height: 1.3; padding-top: var(--space-21); margin: var(--space-30) 0 var(--space-30) 0; } h2 { font-size: 1.6rem; font-weight: 600; border-top: 3px solid var(--color-foreground); line-height: 1.3; padding-top: 18px; margin: var(--space-60) 0 var(--space-42) 0; } h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.4; margin: var(--space-60) 0 var(--space-12) 0; } @media (min-width: 768px) { h1 { font-size: var(--fs-h1); line-height: 3.6rem; } h2 { font-size: var(--fs-h2); line-height: 2.1rem; } h3 { font-size: var(--fs-h3); line-height: 1.8rem; } } h4 { font-size: var(--fs-h4); line-height: 1.5rem; font-weight: 500; margin: var(--space-42) 0 var(--space-12) 0; } h5 { font-size: var(--fs-h5); line-height: 1.5rem; text-transform: uppercase; font-weight: 600; } h6 { font-size: var(--fs-h6); line-height: 1.5rem; margin: 0; padding: 0 0 var(--space-9) 0; } p { font-size: var(--fs-body); line-height: 1.6; letter-spacing: 0.01rem; margin: var(--space-12) 0; } strong { font-weight: 600; } em { font-style: italic; } a { color: var(--color-foreground); text-decoration: underline; text-underline-offset: 0.12rem; } a:hover { color: var(--color-foreground-brighter); } ul, ol { margin: var(--space-12) 0; padding-left: var(--space-18); } li { margin-bottom: var(--space-6); line-height: 1.5; } code { font-family: var(--font-family-02); font-size: 0.90em; background: var(--color-background-darker); padding: 0.2em 0.4em; border-radius: 2px; } pre.code-block { font-family: var(--font-family-02); font-size: var(--fs-small); background: var(--color-background-darker); border: 1px solid var(--color-background-brighter); padding: var(--space-12); margin: var(--space-12) 0; white-space: pre-wrap; overflow-x: auto; } /* Typography modifiers */ .text-muted { color: var(--color-foreground-darker); } .text-mono { font-family: var(--font-family-02); } .hint { font-size: var(--fs-small); letter-spacing: 0.03rem; color: var(--color-foreground); line-height: 1.4; opacity: 0.72; } .eyebrow { font-family: var(--font-family-01); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06rem; color: var(--color-foreground); } /* Brand mark */ .brand { font-family: var(--font-family-01); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 2.4rem; margin: 0; color: var(--color-foreground); border-top: 0; padding-top: 0; text-transform: lowercase; } .brand__secondary { padding-left: 1px; font-weight: 100; letter-spacing: 0.03rem; font-style: italic; color: var(--color-foreground-darker); } /* When the brand wraps a link to the home page, the anchor must inherit * the brand's font, weight, colour and tracking — otherwise the browser * applies its link colour and underline and breaks the wordmark. The * .brand__secondary span inside still wins on colour + style because its * own rules are more specific. */ .brand a { color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; } .brand a:hover { color: var(--color-foreground-brighter); } /* ─── LAYOUT REGIONS ─────────────────────────────────────── */ /* The whole page sits on --color-background-darker. * The header sits on the same darker background (no divider). *
is a lighter rectangle (--color-background) with a 6px gap on all * four sides — a "framed" layout where the darker background shows through. * Mobile-first: base styles target <768px, then upgrade at 768px and 1024px. */ html, body { background-color: var(--color-background-darker); } body { display: flex; flex-direction: column; min-height: 100vh; } /* The lighter rectangle that "floats" inside the darker page. * 6px gap on all sides via margin. No max-width. Full bleed. *
is also the mount target — the router writes each view's HTML * into it directly via innerHTML. */ main { margin: 0px; padding: var(--space-6); flex: 1 1 auto; } @media (min-width: 768px) { main { margin: 0 6px 6px 6px; } } /* ─── HEADER ─────────────────────────────────────────────── */ /* Sticky-on-scroll-up: header is always position: sticky; the * .header--hidden state class translates it off-screen when the user is * scrolling DOWN. When they scroll UP (or are at the top of the page), * the class is removed and the header slides back in. JS handles the * direction detection; CSS handles the transform + transition. */ header { background-color: var(--color-background-darker); padding: var(--space-12) var(--space-24); display: flex; align-items: center; justify-content: space-between; gap: var(--space-18); flex-wrap: nowrap; position: sticky; top: 0; z-index: 100; transition: transform 0.25s ease; } header.header--hidden { transform: translateY(-100%); } @media (min-width: 768px) { header { padding: var(--space-15) var(--space-30) var(--space-12) var(--space-30); } } /* Header nav — on mobile, hidden by default and revealed as a dropdown * panel below the header when .is-open is toggled by the hamburger. At * iPad+ (≥768px) it sits inline to the right of the brand. */ .header__nav { display: none; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-background-darker); border-bottom: 1px solid var(--color-background-brighter); padding: var(--space-9) var(--space-18); z-index: 100; } .header__nav.is-open { display: flex; } .header__nav a { font-family: var(--font-family-01); font-size: var(--fs-body); text-transform: uppercase; letter-spacing: 0.06rem; color: var(--color-foreground); text-decoration: none; transition: color 0.2s ease; opacity: 0.9; padding: var(--space-12) 0; } .header__nav a:last-child { border-bottom: 0; } .header__nav a:hover { color: var(--color-foreground-brighter); } .header__nav a.is-active { color: var(--color-foreground-brighter); } @media (min-width: 768px) { .header__nav { display: flex; flex-direction: row; align-items: center; gap: var(--space-21); position: static; background: transparent; border: 0; padding: 0; margin-right: auto; } .header__nav a { font-size: 11px; padding: 0; border-bottom: 0; } } /* Header action group — brand-side wrapper for theme toggle + hamburger. */ .header__actions { display: flex; align-items: center; gap: var(--space-9); flex: 0 0 auto; } /* Brand sizing inside the header (overrides the typography-section base * for the header context). iPad+ restores the larger line-height. */ .brand { font-size: 1rem; line-height: 1.6rem; } .brand__secondary { font-size: 0.9rem; } @media (min-width: 768px) { .brand { font-size: 1rem; line-height: 2.1rem; } .brand__secondary { font-size: inherit; } } /* Hamburger button — shown on mobile (sits to the right of the theme * toggle inside .header__actions), hidden on iPad+. Toggling adds * .is-open to .header__nav to reveal the dropdown. */ .hamburger { background: transparent; border: 0px solid var(--color-foreground-darker); color: var(--color-foreground); width: 32px; height: 32px; padding: 0; margin-right: -6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border-radius: 2px; transition: all 0.2s ease; } .hamburger:hover { color: var(--color-foreground-brighter); } /* When the menu is open, mark the button distinctly so users see it's * the active trigger. */ .hamburger[aria-expanded="true"] { color: var(--color-foreground-brighter); } @media (min-width: 768px) { .hamburger { display: none; } } /* Theme toggle — pair of icon buttons (sun / moon) in the header. */ .theme-toggle { display: inline-flex; gap: var(--space-9); align-items: center; align-self: center; } .theme-toggle button { background: transparent; color: var(--color-foreground-darker); border: 0; padding: var(--space-3); cursor: pointer; display: inline-flex; align-items: center; line-height: 1; opacity: 0.7; transition: opacity 0.2s ease, color 0.2s ease; } .theme-toggle button:hover { opacity: 1; color: var(--color-foreground-brighter); } .theme-toggle button.is-active { opacity: 1; color: var(--color-foreground-darker); } /* ─── NAVIGATION (tab strip) ──────────────────────────────── */ /* Generic tab pattern. A