/* * Design tokens — doventry.com * * Single source of truth for color, typography, spacing, radii, shadows, * and z-index. Every other stylesheet references these custom properties; * raw values are rejected there by `stylelint-declaration-strict-value` * (see .stylelintrc.json). This file is the one exemption, since these are * where the raw values are legitimately defined. See CLAUDE.md §3. * * Palette and type from the Claude Design source for doventry.com * (`Home.dc.html`), exported 2026-08-31. Newsreader Light for display and * body copy, Work Sans for uppercase UI labels. * * TWO SURFACES, ONE PALETTE. The site is parchment (#F2EDE4) with ink text * (#1C1A17); the Book Tracker — and the design's own "Message in a bottle" * band — inverts that to ink ground with parchment text. These are the same * colors in swapped roles, so the semantic tokens are defined twice: * * :root the light site (default) * .theme-ink the dark surface (opt in per or per section) * * Only the color tokens are redefined under `.theme-ink`; type, spacing, * radii and motion are shared. Never define a color anywhere but here, and * never reference a literal hex outside this file. * * The accent differs by surface ON PURPOSE, and this is a real accessibility * fix rather than a preference: the light-ground terracotta (#A85A38) fails * contrast on the ink ground, and the dark-ground terracotta (#C98A68) fails * on parchment. Scoping them means neither can be used on the wrong surface. * * History: an earlier Gilda Display / Cormorant Garamond / Lato theme over a * gold-accented near-black ground was matched by eye from a screenshot and is * retired — do not reintroduce it. The live WordPress site is dark and gold; * this cream scheme is a deliberate redesign, not a mismatch. See CLAUDE.md. * * Newsreader, Work Sans, and Caveat are loaded from Google Fonts in the * base template — this file only references the family names. */ :root { /* --------------------------------------------------------------------- * Color — surfaces (LIGHT: the doventry.com site default) * ------------------------------------------------------------------- */ --color-bg: #f2ede4; /* page background — parchment */ --color-bg-raised: #eae3d7; /* cards, panels, form fields */ --color-bg-sunken: #e6dfd2; /* image wells, poster backgrounds */ --color-bg-overlay: rgb(28 26 23 / 45%); /* modal / dialog backdrop */ /* The two ground colors, named absolutely rather than by role, for the * rare case where a value must not flip with the surface. */ --color-parchment: #f2ede4; --color-ink: #1c1a17; /* Color — text */ --color-text: #1c1a17; /* headings, high-emphasis text, filled-button bg */ --color-text-muted: #3a362f; /* body copy, lead paragraphs */ --color-text-subtle: #6b655c; /* captions, arrows, eyebrow labels */ --color-text-on-accent: #f2ede4; /* text on an ink/accent surface */ /* Color — accent (terracotta). The DARKER terracotta: the only one that * meets contrast on parchment. */ --color-accent: #a85a38; --color-accent-hover: #1c1a17; /* the design darkens links to ink on hover */ --color-accent-active: #8f4a2d; --color-accent-muted: rgb(168 90 56 / 12%); /* accent tints/washes */ /* Color — borders (hairlines on the parchment ground) */ --color-border: rgb(28 26 23 / 14%); --color-border-subtle: rgb(28 26 23 / 9%); /* header rule, section divider */ --color-border-strong: rgb(28 26 23 / 28%); --color-border-accent: #a85a38; /* Color — feedback (distinct from --color-accent so brand emphasis and * status feedback never get visually confused) */ --color-danger: #b3261e; --color-danger-muted: rgb(179 38 30 / 12%); --color-success: #2f6f4f; --color-success-muted: rgb(47 111 79 / 12%); --color-warning: #8a6118; --color-warning-muted: rgb(138 97 24 / 12%); /* Color — focus ring */ --color-focus-ring: #a85a38; /* --------------------------------------------------------------------- * Typography * ------------------------------------------------------------------- */ --font-display: "Newsreader", georgia, "Times New Roman", serif; --font-body: "Newsreader", georgia, "Times New Roman", serif; /* Uppercase, letter-spaced UI labels (nav, buttons, eyebrows). */ --font-label: "Work Sans", system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif; /* Handwriting simulation — the values overlaid on the QR page photo, * standing in for pen-on-paper rather than the site's own brand type. */ --font-handwriting: "Caveat", cursive; --font-weight-light: 300; /* Newsreader display + body weight */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 600; --leading-tight: 1.06; /* display headings */ --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.62; /* lead paragraphs */ /* Type scale — 1rem = 16px. The fluid steps are the exact clamp() * expressions from the design source. */ --text-2xs: 0.6875rem; /* 11px — the smallest text on the site; fine print attached to a field, not for anything read on its own */ --text-xs: 0.75rem; /* 12px — captions, fine print */ --text-sm: 0.875rem; /* 14px — labels, secondary text */ --text-base: 1rem; /* 16px — body */ --text-trail-meta: 0.9375rem; /* 15px — trail row release line (owner, 2026-09-06); a half-step down from text-base, between it and text-sm */ --text-lg: 1.25rem; /* 20px — lead paragraphs, emphasis */ --text-xl: 1.5rem; /* 24px — h3 */ --text-2xl: 2rem; /* 32px — h2 */ --text-3xl: 2.5rem; /* 40px — h1 (page/section titles) */ --text-4xl: 4rem; /* 64px — hero headings */ --text-eyebrow: clamp(11px, 2.6vw, 13px); /* 03 — MESSAGE IN A BOTTLE */ --text-label: clamp(13px, 3vw, 14px); /* nav links, pill buttons */ --text-lead: clamp(15px, 3.6vw, 20px); /* section lead paragraph */ --text-action: clamp(15px, 3.4vw, 19px); /* action-link rows */ --text-display: clamp(36px, 4.4vw, 60px); /* section headline */ --text-arrow: 1rem; /* inline arrow glyphs */ --text-field-label: clamp(11px, 2.6vw, 12px); /* form field labels */ /* Tracking */ --tracking-tight: -0.02em; /* display headings */ --tracking-label: 0.08em; /* pill buttons */ --tracking-nav: 0.06em; /* nav links */ --tracking-eyebrow: 0.18em; /* eyebrow labels */ --tracking-field-label: 0.14em; /* form field labels */ /* --------------------------------------------------------------------- * Spacing — 4px base unit, plus the exact steps used by the design * ------------------------------------------------------------------- */ --space-px: 1px; /* hairlines and the visually-hidden clip box */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-hairline: 4px; /* the 4px inset on action-link rows */ --space-gap-sm: 12px; /* icon/label gap; hover indent */ --space-gap: 20px; /* row label ↔ arrow gap */ --space-block: 26px; /* eyebrow ↔ headline ↔ lead */ --space-block-lg: 38px; /* lead ↔ button */ --space-row: 26px; /* action-link vertical padding */ --space-btn-y: 17px; /* pill button vertical padding */ --space-btn-x: 32px; /* pill button horizontal padding */ --space-btn-y-sm: 12px; /* small pill button vertical padding (home page inline CTA row) */ --space-btn-x-sm: 22px; /* small pill button horizontal padding */ --space-section-y: 108px; /* section vertical padding (desktop) */ --space-section-x: 40px; /* section horizontal padding (desktop) */ --space-section-y-sm: 64px; /* section vertical padding (mobile) */ --space-section-x-sm: 24px; /* section horizontal padding (mobile) */ --space-column-gap: 80px; /* two-column grid gap (desktop) */ --space-column-gap-sm: 48px; /* stacked gap (mobile) */ /* Measure */ --measure-lead: 52ch; /* lead paragraph max-width */ --measure-page: 1240px; /* section content max-width */ --measure-copy-lookup-input-sm: 5.5rem; /* compact copy-lookup input, home page CTA row only — room for the 6-char number, nothing more */ /* --------------------------------------------------------------------- * Radii * ------------------------------------------------------------------- */ --radius-sm: 4px; /* inputs, small controls */ --radius-md: 8px; /* cards */ --radius-lg: 16px; /* modals, large panels */ --radius-full: 999px; /* pills — all buttons on doventry.com are pills */ /* --------------------------------------------------------------------- * Motion * ------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --duration-fast: 0.25s; --duration-slow: 0.9s; /* --------------------------------------------------------------------- * Shadows — subtle; a dark shadow reads as depth on any background * ------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgb(0 0 0 / 12%); --shadow-md: 0 4px 12px rgb(0 0 0 / 14%); --shadow-lg: 0 8px 24px rgb(0 0 0 / 18%); --shadow-book: 0 26px 60px -22px rgb(28 26 23 / 40%); /* the Healing cover */ --shadow-nav: 0 14px 26px -18px rgb(28 26 23 / 35%); /* open mobile nav */ /* --------------------------------------------------------------------- * Home page — type scale * * The design sizes everything with clamp() rather than breakpoints, so a * heading grows continuously with the viewport. Values are taken from * Home.dc.html; the names describe the role, not the size. * ------------------------------------------------------------------- */ --text-hero: clamp(56px, 7vw, 104px); /* "I'm a simple storyteller." */ --text-hero-sm: clamp(40px, 12vw, 104px); /* same, under 560px */ --text-section: clamp(34px, 4vw, 54px); /* Short Films / Memoir / ... */ --text-item: clamp(28px, 7vw, 46px); /* Love Story, Healing */ --text-card-title: clamp(20px, 4.5vw, 27px); /* screenplay card titles */ --text-brand: clamp(16px, 3.4vw, 21px); /* AnhTuấn Ðỗ, in the header */ --text-footer-name: clamp(18px, 4vw, 24px); --text-page-title: clamp(48px, 6vw, 84px); /* "Say hello." */ --text-input: 18px; /* form inputs and contact rows */ --measure-contact-lead: 42ch; --text-body-lg: clamp(16px, 4vw, 22px); /* opening line of a section */ --text-body: clamp(15px, 3.4vw, 19px); /* section prose */ --text-hero-lead: clamp(17px, 4vw, 21px); /* "I Dream. I Write. I Hope." */ --text-row: clamp(14px, 3vw, 17px); /* buy-link rows */ --text-meta: clamp(12px, 3vw, 14px); /* footer fine print */ --text-card-meta: clamp(13px, 3vw, 15px); /* "Feature · Drama" */ --text-arrow-sm: 15px; /* trailing arrow on buy rows */ --text-arrow-lg: 16px; /* trailing arrow on journey rows */ /* Home page — tracking and leading */ --leading-hero: 0.98; --tracking-section: -0.01em; --tracking-brand: 0.04em; --tracking-section-label: 0.16em; /* "01 — SCREENING" */ /* --------------------------------------------------------------------- * Home page — spacing and layout * ------------------------------------------------------------------- */ --space-header-height: 74px; --space-contact-gap: 96px; /* the contact page's two columns */ --space-form-padding: 44px; /* the form panel */ --space-form-padding-sm: 28px; /* the form panel, under 560px */ --space-field-gap: 26px; /* between fields */ --space-label-gap: 10px; /* label ↔ input */ --space-input-y: 13px; /* input vertical padding */ --space-nav-gap: 34px; --space-hero-y: 96px; /* hero top padding */ --space-hero-y-end: 110px; /* hero bottom padding */ --space-section-y-lg: 110px; /* Memoir block */ --space-media-gap: 76px; /* poster ↔ prose */ --space-card-gap: 34px; /* screenplay grid gap */ --space-hero-frame-offset: 22px; /* the offset rule behind the headshot */ --space-row-y: 20px; /* buy-link row padding */ --space-rule-gap: 22px; /* section rule ↔ heading */ --space-heading-gap: 34px; /* hero headline ↔ lead */ --space-footer-y: 64px; --space-footer-y-end: 48px; --space-footer-gap: 28px; /* Measures — the design constrains prose by character count, not pixels */ --measure-hero-lead: 50ch; --measure-prose: 44ch; --measure-prose-wide: 46ch; --measure-prose-narrow: 34ch; --measure-poster: 340px; --measure-card-min: 200px; /* screenplay grid minimum cell */ --measure-consent-button: 7rem; /* Yes/No — equal width, so neither answer is visually favoured over the other */ --measure-copy-lookup-input: 12rem; /* copy lookup field — a copy number is 6 characters, so the box is sized to what it holds, not the row */ /* Breakpoints, for reference — media queries cannot use custom * properties, so these are documentation, not usable values. * Nav collapse: 860px. Small-phone adjustments: 560px. */ /* --------------------------------------------------------------------- * Radii — image corners are tighter than UI corners in this design * ------------------------------------------------------------------- */ --radius-image: 3px; /* --------------------------------------------------------------------- * Aspect ratios * ------------------------------------------------------------------- */ --ratio-poster: 3 / 4; /* --------------------------------------------------------------------- * Z-index scale * ------------------------------------------------------------------- */ --z-dropdown: 1000; --z-sticky: 1100; --z-modal-backdrop: 1200; --z-modal: 1300; --z-toast: 1400; } /* * The ink surface. * * Applied to for every Book Tracker page, and to any single section of * the light site that inverts — the design's own "Message in a bottle" band * is exactly that. Because only colors are redefined, a `.theme-ink` section * dropped inside a light page picks up the dark palette and keeps the shared * type and spacing. * * Anything added to the light block above needs its counterpart here, or it * will silently inherit a light value onto a dark ground. */ .theme-ink { /* Color — surfaces */ --color-bg: #1c1a17; /* page background — dark ink */ --color-bg-raised: #26231f; /* cards, panels, form fields */ --color-bg-sunken: #141210; /* footer, deep sections */ --color-bg-overlay: rgb(28 26 23 / 60%); /* Color — text */ --color-text: #f2ede4; --color-text-muted: rgb(242 237 228 / 72%); --color-text-subtle: rgb(242 237 228 / 55%); --color-text-on-accent: #1c1a17; /* Color — accent. The LIGHTER terracotta: the only one that meets * contrast on ink. */ --color-accent: #c98a68; --color-accent-hover: #d9a183; --color-accent-active: #a85a38; --color-accent-muted: rgb(201 138 104 / 15%); /* Color — borders (hairlines on the dark ground) */ --color-border: rgb(242 237 228 / 18%); --color-border-subtle: rgb(242 237 228 / 12%); --color-border-strong: rgb(242 237 228 / 30%); --color-border-accent: #c98a68; /* Color — feedback, lightened for the dark ground */ --color-danger: #e5484d; --color-danger-muted: rgb(229 72 77 / 15%); --color-success: #4caf7d; --color-success-muted: rgb(76 175 125 / 15%); --color-warning: #e0b166; --color-warning-muted: rgb(224 177 102 / 15%); /* Color — focus ring */ --color-focus-ring: #c98a68; background-color: var(--color-bg); color: var(--color-text-muted); }