/* ============================================================ Creation Education Museum — Design Tokens Direction: "Earth & Strata" — palette sampled from the Ohio hero image (sandstone, ochre, clay, slate, moss, cream). ============================================================ */ :root { /* --- Strata palette (light → deep, as if descending a rock face) --- */ --cream: #FAF5EA; --cream-2: #F2E9D7; --sand: #E2CEA6; --sandstone: #C9A063; /* SANDSTONE, LIGHTENED UNTIL IT SURVIVES CLAY. Added 2026-09-05. --sandstone is this site's small-caps colour and it measures 3.69:1 on --clay-deep, which is a FAIL for normal text. That one number is why the clay bands ended up entirely cream: .eyebrow--invert is declared `var(--sandstone)` but is overridden to muted cream inside a .band, and four separate rules in main.css (.why-q__cite, .why-q__def cite, .cs-verse cite, .cs-event__fact dt) each carry a comment saying sandstone was the reflex and had to be given up here. The user's diagnosis on 2026-09-05: "each page that has a clay section only has one color on it". Same hue as --sandstone (36deg), raised in lightness and dropped in saturation until it clears the bar: hsl(36, 65%, 66%) = 4.66:1 on --clay-deep. Chosen by the user from three candidates rendered on the real page; the brighter #E9B567 (4.79) and the tan #D5B990 (4.75) were the other two. IT IS A CLAY-BAND COLOUR AND NOTHING ELSE — on the sand it is 1.62:1 and cannot be text there. Do not reach for it outside .band--clay. */ --sandstone-lit: #E1B470; --ochre: #B0793C; --clay: #8C5729; --clay-deep: #6B3F1D; --moss: #7A8A50; --moss-deep: #4E5B32; /* THE DARK RAMP IS THE CEM LOGO OVAL'S BLUE, at the strength it was drawn. Re-toned 2026-09-01 and approved. This is not a new colour: the ramp was ALREADY at the oval's hue (207-212 against the oval's 210) and short only on saturation, running 7-11% against the oval's 24% and the owner's blue divider bar's 30%. Hue and lightness are HELD at each token's own measured value; only saturation moved, to 26%. Saturating a blue at fixed HSL lightness pulls red and green down while green carries most of the luminance weight, so three of the four get fractionally darker and the contrast arithmetic barely moves: --slate-deep #23282C 13.68:1 -> 13.97:1 (cream) --ink #191B1D 15.89:1 -> 15.80:1 <- the only decrease, 0.09 --slate-2 #3A4046 9.65:1 -> 9.80:1 --slate #5A6169 5.77:1 -> 6.05:1 Largest movement anywhere +0.29. Nothing that passed can fail. THE OLD VALUES, if this is ever to be undone: #5A6169 / #3A4046 / #23282C / #191B1D, and --text below goes back to var(--ink). */ --slate: #485F7A; /* hsl(212, 26%, 38%) */ --slate-2: #2F4050; /* hsl(210, 26%, 25%) */ --slate-deep: #1C2730; /* hsl(207, 26%, 15%) */ --ink: #151C23; /* hsl(210, 26%, 11%) */ /* The oval's LIT face, not the near-black seen through the small gear's hole (#131D26, which is that spot in shadow and reads as a hole, not as blue). The favicon's hub already uses this tone. It is the seam veins' colour. */ --oval-lit: #4E667E; /* The hero's own crystal highlights, sampled from hero-ohio.jpg where cool pixels are 3.35% of the frame. Nothing else on this site is cold, and that scarcity IS the mechanism: one cold colour reads as a signal the moment it appears. DARK GROUNDS ONLY — see the interaction block in main.css. */ --ice: #D3E0E6; /* --- Semantic --- The light grounds are warm parchment sampled toward the hero's sandstone, not near-white. Pure white surfaces and near-white page backgrounds read as stark and bright against the dark hero, visit bar and footer. NB: --cream stays bright because it doubles as text colour on dark. */ --bg: #E5D6B9; /* --bg AGAIN, at the alpha that sets how much of the sand texture shows. The light ground is the tile in assets/img/sand-tile.jpg with this veil laid over it, which composites to exactly the same thing as the tile at 0.10 opacity over --bg: 0.90 x --bg + 0.10 x tile. THE TWO MUST BE THE SAME COLOUR. Change --bg and this has to move with it or the textured ground and every flat --bg surface drift apart. The 0.10 is the user's own setting, 2026-08-28. See the ground block in main.css for the measurements it rests on. */ --bg-veil: rgba(229, 214, 185, 0.90); --bg-alt: #DBC9A4; --bg-deep: var(--slate-deep); --surface: #F2E9D5; /* PINNED, NOT `var(--ink)`, AND THIS IS LOAD-BEARING. The footer's ground and every paragraph of body copy on the sand used to be the same token. Once --ink carries the oval's blue, following it would tint all the light-side prose blue as well. Held at the ink value as it shipped before 2026-09-01. */ --text: #191B1D; --text-muted: #4B4941; /* darkened to hold contrast on the deeper sand */ --text-invert: var(--cream); --text-invert-muted: rgba(250, 245, 234, 0.72); --accent: var(--clay); --accent-hover: var(--clay-deep); --accent-2: var(--moss-deep); --rule: rgba(25, 27, 29, 0.14); --rule-invert: rgba(250, 245, 234, 0.22); /* --- Type --- */ --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* SCRIPTURE, AND NOTHING ELSE. Added 2026-08-30 after a site-wide audit found that scripture had no typographic voice of its own: ten of the site's 38 verses (the nine in the tract and the one on Partners) were set in Barlow at exactly the body size beside them, and the other 28 used --font-display, which is also every heading, every display coda and the founder's own spoken quotes on our-story.html. The user chose a third face for scripture. DO NOT reach for this anywhere else. The moment it styles something that is not the word of God it stops meaning anything, and the audit was about precisely that failure. Spoken quotes (.story-quote) stay --font-display, which is now the whole distinction between the two. The scripture CITES stay --font-body: the uppercase reference label is a separate idiom from the verse and is shared with every other cite. */ --font-scripture: "EB Garamond", Garamond, "Adobe Garamond Pro", "Iowan Old Style", Georgia, serif; /* MEASURED x-heights at 100px, not guessed: Barlow 51, Fraunces 44, EB Garamond 41. Garamond therefore reads a full size step DOWN from Barlow set at the same nominal size, which on the tract would have left scripture looking smaller than the prose beside it — the exact fault being fixed. 1.24 is 51/41, the factor that brings Garamond to x-height PARITY with Barlow. Every scripture block takes this multiplier rather than a hand-picked size, so the idiom retunes in one place. NB this also grows the two blocks that were previously Fraunces (.cs-verse and the footer verse) by about 16% optically. That is deliberate: they are scripture and they now carry the face that says so. */ --scripture-scale: 1.24; --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem); --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem); --step-1: clamp(1.25rem, 1.17rem + 0.38vw, 1.50rem); --step-2: clamp(1.56rem, 1.42rem + 0.70vw, 2.00rem); --step-3: clamp(1.95rem, 1.71rem + 1.20vw, 2.66rem); --step-4: clamp(2.44rem, 2.03rem + 2.04vw, 3.55rem); --step-5: clamp(3.05rem, 2.38rem + 3.35vw, 4.74rem); --tracking-eyebrow: 0.18em; /* --- Space --- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --space-2xl: 9rem; --measure: 62ch; --wrap: 1240px; --wrap-narrow: 780px; /* --- Rugged edges --------------------------------------------------- Masks and clip paths that give photographs a torn, quarried edge instead of a machine-cut rectangle. `preserveAspectRatio="none"` lets them stretch to any image proportion. */ --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H100 V92 L96,97 L92,93 L88,98 L84,94 L79,98 L74,93 L69,97 L64,92 L59,97 L54,93 L49,98 L44,94 L39,98 L34,93 L29,97 L24,92 L19,97 L14,93 L9,98 L4,94 L0,97 Z' fill='%23fff'/%3E%3C/svg%3E"); /* Irregular quarried edge on all four sides — used for framed photos */ --tear-all: polygon( 1.6% 2.2%, 13% 0.5%, 27% 2.6%, 40% 0.4%, 54% 2.4%, 68% 0.6%, 81% 2.8%, 93% 0.7%, 99.2% 3.2%, 98.4% 16%, 99.6% 29%, 97.6% 42%, 99.4% 56%, 97.4% 69%, 99.5% 83%, 98.2% 96.4%, 88% 98.6%, 74% 97.2%, 61% 99.3%, 47% 97.5%, 33% 99.5%, 19% 97.7%, 6.5% 99.2%, 0.8% 88%, 2.5% 74%, 0.5% 60%, 2.3% 46%, 0.4% 32%, 2.1% 18% ); /* Paper/stone grain, laid over photos at low opacity */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); /* --- Other --- */ --radius: 2px; /* geological, not bubbly — near-square corners */ /* The CEM logo's oval, measured off the artwork: its opaque bounding box is 476x201 and its width matches a true ellipse to within 0.1% across the whole middle band. So the curve is `border-radius: 50%` — but the PROPORTION matters just as much. At 50% radius a wide, short box reads as a stretched lens, not the logo's oval. Buttons therefore carry the logo's aspect ratio as well as its radius. */ --radius-oval: 50%; --oval-ratio: 476 / 201; /* 2.368:1 */ --shadow-card: 0 1px 2px rgba(25,27,29,0.06), 0 8px 24px rgba(25,27,29,0.08); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Respect users who don't want motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }