/* re:cognition theme. Maps the design tokens from /DESIGN.md into the starter template's token system. Includes @font-face declarations for Opificio (local). DM Sans and Roboto Mono are loaded via Google Fonts; the href is set in src/content/settings/site.json (design.googleFontsHref). Opificio licensing: the OTF files in /fonts/opificio/ are the FREE DEMO version. Local development only. Do NOT deploy publicly until the Monofonts WEB license is purchased and licensed WOFF2 files are installed in their place. */ /* ------------------------------------------------------------------ */ /* Opificio — local @font-face */ /* ------------------------------------------------------------------ */ @font-face { font-family: "Opificio"; src: url("/fonts/opificio/Opificio_Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Opificio"; src: url("/fonts/opificio/Opificio_regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Opificio"; src: url("/fonts/opificio/Opificio_light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ */ /* Tokens */ /* ------------------------------------------------------------------ */ :root { /* --- Core palette (from PDF extraction) --- */ --color-ink: #0f1b29; --color-paper: #ffffff; --color-coral: #d81d4a; --color-teal: #00b3b1; /* --- Neutrals --- */ --color-ink-80: #3f4854; --color-ink-60: #575f69; --color-ink-40: #878d94; --color-ink-30: #9fa4aa; --color-cream: #efeadf; /* --- Tints --- */ --color-teal-20: #e2f3f2; --color-teal-60: #99e0df; --color-teal-110: #339796; --color-coral-40: #efa4b6; --color-coral-80: #e9736c; --color-coral-110: #e04a6e; /* --- Starter template token mapping --- */ --color-background: var(--color-paper); --color-foreground: var(--color-ink); --color-primary: var(--color-teal); --color-primary-hover: var(--color-teal-110); --color-primary-foreground: var(--color-paper); --color-accent: var(--color-coral); --color-muted: var(--color-cream); --color-muted-foreground: var(--color-ink-60); --color-border: var(--color-ink-30); /* --- Typography --- */ --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Opificio", "DM Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* --- Type scale (see DESIGN.md §3 for the full mapping) --- */ --text-d1: 5rem; /* 80px — hero phrase */ --text-stat-1: 3.75rem; /* 60px — headline stats */ --text-d2: 3.25rem; /* 52px — section headlines */ --text-stat-2: 3rem; /* 48px */ --text-stat-3: 2.625rem;/* 42px */ --text-d3: 2.375rem; /* 38px */ --text-d4: 2.25rem; /* 36px */ --text-d5: 2.125rem; /* 34px */ --text-h1: 2rem; /* 32px */ --text-brand: 1.75rem; /* 28px — re | define | work */ --text-d6: 1.75rem; /* 28px */ --text-h2: 1.5rem; /* 24px */ --text-d7: 1.5rem; /* 24px */ --text-lead: 1.5rem; /* 24px */ --text-quote: 1.4375rem;/* 23px — italic pull quotes */ --text-tag-1: 1.375rem; /* 22px — section tags */ --text-cta: 1.25rem; /* 20px */ --text-h3: 1.1875rem; /* 19px */ --text-body: 1.125rem; /* 18px — workhorse body */ --text-link: 1.125rem; /* 18px */ --text-meta: 1.0625rem; /* 17px */ --text-base: 1rem; /* 16px */ --text-caps: 0.875rem; /* 14px — small all-caps strip text (trust strip etc.) */ --text-stat-l: 0.9375rem;/* 15px */ --text-tag-2: 0.875rem; /* 14px */ --text-nav: 0.8125rem; /* 13px */ --text-fine: 0.6875rem; /* 11px */ /* --- Semantic headline tokens --- Every

/

/

in block components references one of these. Adjusting a value here cascades through every section that uses it, no per-component edits. Components keep their own min sizes and vw scaling — only the MAX (the desktop size) is centralised here. */ --text-headline-hero: var(--text-d1); /* 80px — Hero H1 only */ --text-headline-primary: var(--text-d2); /* 52px — primary H2s (re:define, re:set, re:flections, re:sults, re:direct, re:work, Qualifications) */ --text-headline-secondary: 2.5rem; /* 40px — softer H2s (re:cognised, re:markable, re:built, re:verb, CTA banner) */ --text-headline-closing: 4.5rem; /* 72px — closing emphasis (ClosingCTA "Start where you are.") */ --text-headline-card: var(--text-d7); /* 24px — card titles (H3) */ --text-card-body: var(--text-meta); /* 17px — body copy inside cards (slightly tighter than --text-body so card grids read denser) */ /* --- Section rhythm --- Modular ladder for vertical row padding. Every section picks the tier that matches its content density; adjacent rows meet at 2× the shared tier, so the page rhythm stays consistent globally. Tier ladder (each ~1.6× the previous): strip (16–24px) — trust strip, tag pills (not "rows") y (24–40px) — default content rows (cards, text, lists) y-lg (48–80px) — feature rows (re:define, qualifications, hero-adjacent) y-wave (96–160px) — rows that follow a wave/protrusion above To merge two rows into one perceptual unit, the LOWER row sets mergeWithAbove → top padding = 0, so the gap collapses to the UPPER row's bottom padding (a single tier value, not 2×). */ --space-section-strip: clamp(8px, 1vw, 12px); --space-section-y: clamp(24px, 3vw, 40px); --space-section-y-lg: clamp(48px, 6vw, 80px); --space-section-y-wave: clamp(96px, 12vw, 160px); /* Page-width tokens. Two tiers so the choice is consistent across blocks. Narrow = default content rows (text, cards, lists, hero headlines). Wide = feature/wall rows that benefit from breathing room (testimonial walls, multi-card grids, full-bleed-ish sections). */ --page-max: 1280px; --page-max-wide: 1850px; /* --- Line heights --- */ --leading-display: 1.05; --leading-heading: 1.2; --leading-body: 1.55; --leading-tag: 1.4; /* --- Radius --- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 28px; /* Card-level rounded corners (matches PDF). */ /* --- Elevation --- Shared card shadows so every "white card on white" block reads with the same depth. Adjust here, all card grids update. */ --shadow-card-sm: 0 1px 2px rgba(15, 27, 41, 0.04), 0 4px 12px rgba(15, 27, 41, 0.05); --shadow-card-md: 0 0 24px rgba(15, 27, 41, 0.05), 0 0 56px rgba(15, 27, 41, 0.04), 0 12px 32px rgba(15, 27, 41, 0.06), 0 32px 64px rgba(15, 27, 41, 0.05); }