/* ========================================================================== Colby Otte — Design Tokens Single source of truth. Nothing in this project defines a raw hex value outside this file. ========================================================================== */ :root { /* --- Brand palette ----------------------------------------------------- Raw brand colors. Use for fills, surfaces, and rules. Do NOT use --color-accent or --color-neutral for text on light backgrounds — see the text-safe tokens below. */ --color-primary: #1C3557; /* Navy */ --color-accent: #C8891E; /* Amber */ --color-base: #F7F4EF; /* Warm White */ --color-neutral: #7389A0; /* Slate */ --color-dark: #111E2D; /* Ink */ /* --- Text-safe derivations --------------------------------------------- Same hues, darkened to the lightest value that clears WCAG AA (4.5:1) on --color-base. Verified, not eyeballed. */ --color-accent-text: #966717; /* 4.50:1 on base — small accent text (numerals) */ --color-neutral-text: #5D7289; /* 4.52:1 on base — captions, meta, labels */ /* --- Semantic aliases --------------------------------------------------- Components reference these, never the raw palette. Changing a brand color then propagates correctly. */ --bg-page: var(--color-base); --bg-surface: #FFFFFF; --bg-inverse: var(--color-dark); --bg-inverse-alt: var(--color-primary); --text-primary: var(--color-dark); /* 15.3:1 on base */ --text-secondary: var(--color-primary); /* 11.3:1 on base */ --text-muted: var(--color-neutral-text);/* 4.5:1 on base */ --text-on-inverse: var(--color-base); /* 11.3:1 on navy */ /* Added for case study pages (ink ground): captions, labels, meta. --text-muted is 3.6:1 on ink and fails there. */ --text-muted-on-inverse: #9AABBD; /* 7.2:1 on ink, 5.3:1 on navy */ --text-accent: var(--color-accent-text); /* Links on light ground: ink text, amber underline. The underline marks the link, so the text keeps full ink contrast, and amber here is decoration, not text — it doesn't count toward the three-use budget. Amber link text is for the ink ground only (--accent-on-ink). */ --link: var(--color-dark); --link-underline: var(--color-accent); --link-hover: var(--color-dark); --underline-offset: 0.15em; --focus-ring: var(--color-accent); /* on light: pair w/ offset */ --border-subtle: #E2DDD4; --border-strong: var(--color-neutral); --rule-accent: var(--color-accent); /* Amber on Ink is 5.7:1 — the one place amber is legal as text. Reserve it for the signature moments. */ --accent-on-ink: var(--color-accent); /* --- Typography --------------------------------------------------------- */ --font-display: 'Lato', system-ui, sans-serif; --font-body: 'Source Serif 4', Georgia, serif; --weight-black: 900; --weight-bold: 700; --weight-regular: 400; --weight-light: 300; /* Type scale — 1.25 major third, fluid between 375px and 1280px */ --step--1: clamp(0.83rem, 0.79rem + 0.17vw, 0.94rem); --step-0: clamp(1.00rem, 0.94rem + 0.27vw, 1.19rem); --step-1: clamp(1.20rem, 1.10rem + 0.43vw, 1.48rem); --step-2: clamp(1.44rem, 1.29rem + 0.66vw, 1.85rem); --step-3: clamp(1.73rem, 1.50rem + 0.97vw, 2.31rem); --step-4: clamp(2.07rem, 1.75rem + 1.39vw, 2.89rem); --step-5: clamp(2.49rem, 2.02rem + 1.96vw, 3.62rem); --leading-tight: 1.15; /* display */ --leading-snug: 1.35; /* subheads */ --leading-body: 1.6; /* serif body — serif needs the air */ --tracking-display: -0.02em; /* Lato Black tightens up well */ --tracking-eyebrow: 0.08em; --measure: 68ch; /* max line length for body copy */ /* --- Spacing — 4px base, geometric --------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; /* --- Layout -------------------------------------------------------------- */ --container: 72rem; --container-text: 42rem; /* Case studies: one frame for the title, text and every image — the width the near-full-bleed hero image already had. */ --container-case: calc(var(--container) + 2 * var(--space-xl)); --gutter: var(--space-m); /* --- Surface treatment --------------------------------------------------- Near-zero radius throughout: this is a print and cartography practice, not a SaaS app. Rounded cards read as generic. */ --radius-none: 0; --radius-sm: 2px; /* --- Rules and touch targets --------------------------------------------- Added for site.css. One heavy ink rule under the site header, hairlines everywhere else. Section rules default to ink; amber (--rule-accent) is opt-in per page because amber is capped at three uses per page. */ --border-ink: var(--color-dark); --rule-hairline: 1px; --rule-heavy: 2px; --rule-brand: 4px; /* the amber bar across the top of every page */ --tap-min: 2.75rem; /* 44px — minimum touch target */ /* Nav breakpoint is 48rem. Media queries cannot read custom properties, so site.css repeats that literal — keep the two in sync. */ /* --- Texture --------------------------------------------------------------- Contour lines behind the dark closing bands: warm white at this strength over ink. 0.22 reads as a deliberate texture and stays quiet; body text over the strongest line still measures 7.8:1 (line pixel #444D58). Above about 0.30 text over a line drops toward 6:1 and the lines start competing — don't go past that. */ --texture-contour-opacity: 0.22; /* --- Card media ----------------------------------------------------------- One shape for every case study card image and gallery tile, so a row of cards lines up whatever the artwork's own proportions. 4:3 sits between the wide pieces (screenshots and spreads, about 3:2 to 16:9) and the tall ones (wall maps and full-page ads, about 2:3 to 3:4), so neither group is cropped to a sliver. Images fill it with object-fit: cover; a gallery entry can aim the crop (focus) or opt out (fit: contain) in copy/gallery.md. Card grid breakpoints: two case study columns from 43.75rem (700px), featured gallery tiles and the About page's two columns from 56.25rem (900px); the About side column is sticky only on windows at least 45rem (720px) tall. Literals in site.css for the same reason as the nav breakpoint above. */ --ratio-card: 4 / 3; /* Photographs of the place on location pages, in a strip of three. Portrait, because the local photos were shot upright and three tall frames side by side read as a strip rather than a second gallery. */ --ratio-photo: 3 / 4; --shadow-card: 0 1px 2px rgb(17 30 45 / 0.06), 0 4px 12px rgb(17 30 45 / 0.05); /* --- Motion -------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 480ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* --- Base element defaults ------------------------------------------------ */ body { background: var(--bg-page); color: var(--text-primary); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-body); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--text-secondary); text-wrap: balance; } p { max-width: var(--measure); } a { color: var(--link); text-decoration-color: var(--link-underline); text-underline-offset: var(--underline-offset); text-decoration-thickness: 1px; } a:hover { color: var(--link-hover); text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--color-dark); outline-offset: 2px; }