/* ============================================================ IU MIEN WAAC — DESIGN TOKENS ------------------------------------------------------------ This file is YOUR customization surface. Every color, font, spacing unit, and motif size used anywhere in the site is defined here. Change a value here and it changes everywhere. THE SITE IS DARK — but not black. The comp is drawn on #000, and #000 is the one value a dark interface should not use for large surfaces: against it, light text blooms and edges vibrate, and there is no room left underneath to show depth. So the page sits just above black, and depth is carried by a LADDER OF SURFACES rather than by shadows (shadows barely read on a dark ground). Higher = lighter. That is the whole system: surface-0 the page itself surface-1 cards resting on it surface-2 raised things: inputs, table heads, chips surface-3 hover / active states surface-4 overlays: menus, popovers, modals The palette is still drawn from the Iu Mien women's dress — what changed is which part of the dress the PAGE is made of: - the black of the jacket body is now the page itself - silver ornament light became the hairline borders and text - the tassel red became the one accent, used sparingly ============================================================ */ :root { /* ---------- THE SURFACE LADDER ---------- A cool near-black base, lifted by increasing amounts of white. Keep the steps — flattening them is what made the inner pages read as an unlit hole. */ --surface-0: #07080b; /* the page */ --surface-1: #0e1015; /* cards */ --surface-2: #14171d; /* inputs, table heads, chips */ --surface-3: #1b1f27; /* hover / active */ --surface-4: #242933; /* overlays */ /* The home page's hero band is cinematic and sits nearer true black so the photograph carries the light instead of the UI. */ --stage: #030407; /* ---------- EDGES ---------- On a dark ground a 1px edge does more work than any shadow. --edge-bright is the comp's silver hairline; the numbered ones are the everyday structural borders. */ --edge-1: rgba(255, 255, 255, 0.07); --edge-2: rgba(255, 255, 255, 0.13); --edge-3: rgba(255, 255, 255, 0.22); --edge-bright: rgba(255, 255, 255, 0.68); --edge-hover: rgba(255, 255, 255, 0.92); /* ---------- TEXT ---------- */ --text: #f2f0ec; /* body copy — 17.4:1 on surface-0 */ --text-soft: #c2beb6; /* secondary — 10.5:1 */ --text-dim: #948f87; /* tertiary — 5.9:1; never below 16px */ /* ---------- THE DRESS: core identity colors ---------- */ --indigo-deep: #171b28; /* jacket body — near-black indigo */ --indigo: #232b42; /* turban cloth */ --indigo-soft: #39456b; /* embroidery ground */ /* The ruff in the photograph samples #7E0000-#900000. Straight red that dark reads at 1.8:1 on this background — unusable for an h1. #bf1a1f is the same rich family at 3.4:1, which clears the 3:1 large-text floor. Go darker here only if you accept that cost. */ --wordmark: #bf1a1f; --wordmark-lift: #d31a1e; /* the highlight in its glow */ /* Links and contact addresses, set to the wordmark red on request. Measured: 3.07:1 on a card surface, against the 4.5:1 that normal-size text needs. Underlines keep them findable, and it is 5.45:1 against the body text beside it. #f22127 is the nearest red of the same hue that clears 4.5:1, if that matters more. */ --wordmark-link: var(--wordmark); --crimson: #b50c0c; /* the comp's original wordmark red */ --red-tassel: #c0392f; /* the red ruff + sash tassels */ --red-deep: #8e2620; /* shadowed tassel red */ /* Saturated reds vibrate on a dark ground, so links and small accents use the desaturated, lifted version. */ --red-bright: #ef7c6f; --red-link: #f08a7e; --silver: #eceae2; /* neck ornaments, coin dangles */ --silver-shade: #c9c5b8; /* ---------- GLOW ---------- Everything luminous on this site is built from these. The comp blooms a soft grey light behind the hero and the card row; the crimson bloom is the accent version. */ --glow-silver: rgba(232, 236, 244, 0.20); --glow-ring: rgba(255, 255, 255, 0.34); /* Kept as aliases so nothing orphans, but the design is white-only now: the ONLY coloured light on the site is the wordmark's own. */ --glow-crimson: var(--glow-silver); --glow-indigo: var(--glow-silver); /* ---------- GLASS ---------- The card treatment: translucent white over a blurred ground, with a light 1px edge. Needs something behind it to refract, which is what the aurora under the card row is for. */ --glass-fill: rgba(255, 255, 255, 0.045); --glass-fill-2: rgba(255, 255, 255, 0.085); --glass-blur: 16px; /* ---------- LEGACY SURFACE ALIASES ---------- Components written for the old cream site reference these by name. Reach for the --surface-* / --text-* tokens above in anything new; these exist so nothing orphaned. */ --night: var(--surface-0); --night-1: var(--surface-1); --night-2: var(--surface-2); --night-3: var(--surface-2); --cream: var(--surface-0); --parchment: var(--surface-1); --taupe: var(--surface-2); --taupe-deep: var(--edge-1); --ink: var(--text); --ink-soft: var(--text-soft); --hairline: var(--edge-bright); --hairline-soft: var(--edge-2); --hairline-hover: var(--edge-hover); --glow-cool: var(--glow-silver); --glow-warm: var(--glow-crimson); /* ---------- THE MOUNTAINS: hero landscape SVGs ---------- */ --mist-far: #aebbcd; --mist-mid: #7c8da0; --ridge-green: #5d7263; --ridge-dark: #3c4f43; --sky: #f4f2ee; /* ---------- EMBROIDERY PATTERN ---------- */ --stitch-a: #c0392f; --stitch-b: #d9b23f; /* gold thread */ --stitch-c: #4f7ea3; /* blue thread */ --stitch-d: #eceae2; /* white thread */ /* ---------- TYPE ---------- Cormorant Garamond, self-hosted in ../fonts/ and @font-face'd at the top of styles.css. One family in every role. The comp sets its display type in EB Garamond ITALIC. Cormorant is the same Garamond lineage and is already here, licensed and offline-safe, so the site uses Cormorant italic for that role. Cormorant is a DISPLAY face with a small x-height: it renders smaller and lighter than a text face at the same pixel size. The scale below is already compensated, and the floors are binding: - body copy >= 18px at weight >= 500 - nothing below 15px anywhere - nothing below 16px lighter than weight 500 This site is read by elders. Do not shrink these. */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-mien: var(--font-body); /* swap here to give Iu Mien its own face */ /* The wordmark and the card labels are set in the Garamond italic, as in the comp. Kovanov is still bundled at fonts/kovanov-regular.woff2 but is no longer declared, so nothing downloads it — see the note at the top of styles.css to switch back. */ --font-mark: var(--font-display); /* ---------- TYPE SCALE ---------- */ --fs-xs: 0.9375rem; /* 15px — the absolute floor, weight 600+ only */ --fs-sm: 1rem; /* 16px — labels, weight 500+ only */ --fs-base: 1.125rem; /* 18px — body copy default */ --fs-lg: 1.375rem; /* 22px */ --fs-xl: 1.75rem; /* 28px */ --fs-2xl: 2.25rem; /* 36px */ --fs-3xl: 3rem; /* 48px — hero headline */ --fs-mark: clamp(2.5rem, 5vw, 4.15rem); /* the "Iu Mien Waac" wordmark */ /* ---------- THE SHELL ---------- One width governs the masthead, the card row and the photograph, so the three stack as a single column. The comp's own ratios: masthead 1789, photograph 1658, cards 1614 on a 1920 canvas — the masthead a little wider than the cards, the cards a little wider than the photograph. */ /* ---------- SCALE ---------- Two numbers, deliberately separate. --ui-scale is how wide the design sits: it multiplies the shell, and nothing else. 1 fills the rail as drawn; 0.75 holds the composition to three quarters of it, which is what stops the page running edge to edge on a large screen. --content-scale is how much larger the reading text on the inner pages is than the design's own scale. Those pages are mostly prose — definitions, notices, explanations — and --ui-scale had taken the body copy down to 13.5px along with the layout. It applies to the page body only: the masthead, the footer and the landing page keep the design's size, because they are composition rather than reading. It cannot be done by changing the root, which is what --ui-scale already uses; rem is absolute to the document. The tokens are restated inside .page-head and .content instead — see styles.css. */ --ui-scale: 0.75; --content-scale: 1.55; /* The measure for running prose, in ch so it tracks the type rather than a fixed width. 68 sits inside the 65-75 characters that reading research and the UX guidance both land on; the pages were running to 133 on a wide screen, which is what made the copy read as small and thin however large it was set. */ --measure: 68ch; --shell: calc(min(1580px, 95vw) * var(--ui-scale)); /* The masthead, the photograph and the card row share ONE width so their edges line up down the page. */ --rail: calc(var(--shell) * 0.918); /* The photograph and the card row step in from the masthead by the same amount, so they still line up with each other — the two are read together and their edges have to agree. The masthead keeps the full rail: it is the frame the page sits in, not part of the composition below it. Set both to var(--rail) to put everything back on one width. */ --shell-inset: 0.92; --shell-cards: calc(var(--rail) * var(--shell-inset)); /* Trying the photograph at the masthead's own width rather than stepped in with the card row. Put it back to calc(var(--rail) * var(--shell-inset)) to have the two line up with each other again. */ --shell-hero: var(--rail); /* ---------- SCALE ---------- */ --radius-card: 20px; --radius-hero: 26px; --radius-field: 30px; --radius-pill: 999px; --shadow-card: 0 2px 14px rgba(0, 0, 0, 0.55); --shadow-raise: 0 18px 50px rgba(0, 0, 0, 0.75); --max-width: 1140px; --band-height: 150px; /* height of tapestry story bands */ /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --dur-fast: 180ms; --dur-mid: 320ms; --dur-slow: 620ms; --dur-cine: 3800ms; /* the black-and-white -> color bloom */ }