/* ==========================================================================
Enkindle AI — website styles
V5 "Pinned Chapters" (2026-07-31). Zero build step, zero dependencies,
zero external requests. One JS file, and it only adds reveal classes.
Rules and rationale live in DESIGN.md; decisions live in BUILD-NOTES.md.
========================================================================== */
/* --------------------------------------------------------------------------
0. Poppins, self-hosted (Phase 4 — SEO/AEO audit #17)
Through Phases 2–3.7 this was three s to fonts.googleapis.com in every
: a render-blocking stylesheet on a third-party origin, and the only
external request the site made. Two weights, ~16KB of woff2 between them — the
dependency cost more than the bytes did. It was also the one launch-day failure
mode owned by somebody else.
`unicode-range` is copied verbatim from Google's own latin subset and is
load-bearing, not decoration. Only the latin subset is shipped, because every
glyph in the approved copy lives in it (including the em dash, en dash and
curly apostrophe, all inside U+2000–206F). Keeping the descriptor means that if
a latin-ext character ever does reach a heading, the browser skips Poppins for
that one glyph and falls back to system-ui — a clean substitution rather than a
missing-glyph box. Drop the descriptor and that failure becomes tofu.
font-display: swap matches what the Google stylesheet was already requesting,
so first-paint behaviour is unchanged: system-ui renders immediately, Poppins
swaps in. The 700 face is preloaded from each because it sets every
heading including the hero
; 600 is below-the-fold only and is not.
Licence: SIL OFL 1.1, see assets/fonts/OFL.txt. Self-hosting is expressly
permitted; the licence text ships alongside because the OFL requires it.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../assets/fonts/poppins-600.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../assets/fonts/poppins-700.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
/* --- Brand hexes (D0, frozen) --- */
--navy: #14293D;
--cream: #F1EAD3;
--teal: #6D93A3;
/* Was #E67E2A. The site shipped two oranges — the CTA's #E67E2A and the
flame's, which the lockup paints as #FF6708 on its two solid paths and
#FF6608 on the gradient path. 2026-07-30 resolved it in favour of #FF6608,
and the Brand Design Playbook's D0 table was updated the same day so the two
do not drift.
V5 promotes this from a control colour to a SURFACE colour — the hero spec
band and the whole closing band are orange grounds now. The hard rule that
survives that promotion unchanged: orange fill + navy ink only. Never orange
with white (2.94:1), never orange text on cream (2.44:1), and never cream on
an orange ground, which is why --focus flips to navy inside .band-orange. */
--orange: #FF6608;
/* Arrives with the flame lockup, which replaced the orange-diamond mark. Not
part of the frozen four above — it is the mark's own cyan, lifted out of the
SVG so the footer tagline can be set as text instead of baked-in paths.
6.31:1 on --navy-deep, 5.44:1 on --navy — clears AA on both. */
--cyan: #00AAD4;
/* --- Derivatives (white / near-black + two AA-forced teal shades) ---
--navy-deep near-black navy. The DEFAULT page ground as of V5.
--teal-ink brand teal darkened to clear WCAG AA (4.5:1) on cream.
Brand teal on cream is 2.75:1; the demo's on-light teal
(#4E7180) is 4.36:1 — both fail. #4A6875 = 4.95:1 on cream,
5.95:1 on white. Same hue (197.8), same saturation.
--teal-lift brand teal lightened by ~1% L to clear AA on navy
(#6D93A3 on navy = 4.49:1, one hundredth short). 4.62:1.
See BUILD-NOTES.md for the full ratio table. */
--white: #FFFFFF;
--navy-deep: #0E1C2B;
--teal-ink: #4A6875;
--teal-lift: #7095A5;
/* Hairlines / scrims — brand hexes at alpha, no new hues */
--rule-on-light: rgba(20, 41, 61, 0.14);
--rule-on-dark: rgba(241, 234, 211, 0.18);
--card-on-dark: rgba(241, 234, 211, 0.06);
/* --- Type (D3 / D3a) --- */
--font-display: "Poppins", system-ui, sans-serif; /* headings + display only */
--font-body: system-ui, sans-serif; /* body, UI, forms */
--font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* .eyebrow only */
/* --- Display scale (V5) ---
Every clamp here is measured from the approved reference, not invented, and
each one belongs to exactly one place on the page. Two of them are new
ceilings the old scale could not reach: the hero wall at 9rem and the
closing band at 5rem.
What is deliberately NOT here: a token for the chapter/proof/FAQ body copy.
Those resolve to --size-lead, --size-body and --size-small below, which the
reference's flat 1.375rem / 1.0625rem / 1rem values are the endpoints of. */
/* Floor is 2.25rem, not the handoff's 2.75rem, and only the floor moved — the
preferred and maximum terms are the reference's exactly, so this is
identical at every width above ~428px where the floor stops binding.
Measured: at 2.75rem the middle span "costing you hours" needs 364px of ink
against 335px of column at 375px wide, so it wrapped and left "costing"
alone on a line — a composed three-line headline turning into a four-line
accident on the most common phone width. At 2.25rem the preferred term
(39.5px) governs there instead and all three spans hold one line each.
Handoff open item 1: mobile was not designed, and 2.75rem is a desktop
number that happened to be written as a floor. */
--size-hero-wall: clamp(2.25rem, 0.5rem + 8.4vw, 9rem); /* hero
*/
--size-h2-lg: clamp(1.875rem, 1rem + 3vw, 3.5rem); /* #work, page h1s */
--size-chapter: clamp(1.75rem, 1rem + 2.4vw, 3rem); /* chapters, spec */
--size-row-h3: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); /* #svc rows */
--size-h2-sm: clamp(1.25rem, 1rem + 1vw, 1.75rem); /* FAQ questions */
--size-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
--size-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
--size-small: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); /* never below 16px */
--size-label: 0.8125rem;
--lh-heading: 1.14;
--lh-body: 1.62;
/* --- Space --- */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--section-y: clamp(3rem, 6vw, 5rem);
--gutter: clamp(1.25rem, 3vw, 2.5rem);
/* The editorial spine — the eyebrow column and the gutter beside it. Named
rather than typed inline because the pair defines where body copy starts
wherever the spine is used (#about, #faq, the contact and case-study pages),
and a value that decides a page-wide edge should be readable as one. */
--spine-col: 15rem;
--spine-gap: clamp(2rem, 4vw, 4rem);
/* 80rem, up from 72rem in V5. Deliberately ONE container width for the whole
site rather than the handoff's suggested --wrap / --wrap-wide pair: two
widths would put the header's logo at a different left edge from the body
copy on contact.html and case-study.html. Readability is protected by
--measure, which is what actually caps running prose. */
--wrap: 80rem;
--measure: 62ch;
/* 14px containers (proof cards, case-study figures). 10px now has exactly ONE
consumer left — the dashed "screenshot pending" token — because V5 squares
every button and chip-style control. It is kept, not deleted, and this is
the note that says why it looks orphaned. */
--radius: 14px;
--radius-sm: 10px;
/* The rendered height of the lockup. A token rather than a bare value in .logo
so that --header-h below is a stated sum instead of a remembered one, and so
that changing the lockup's size forces a look at both.
Worth knowing when you do: the wordmark's baseline is the BOTTOM EDGE of
this box — the glyph bottoms sit at y=225.81 in a viewBox that ends at
225.8, and ENKINDLE has no descenders — which is what §6's nav links align
themselves to. */
--logo-h: 34px;
/* Sticky-header height. Measured, not guessed: .header-home's padding-block
(2 * --s-3) + --logo-h + the 1px bottom border = 12 + 34 + 12 + 1 = 59px.
THREE consumers depend on it being true — §14b subtracts it from every
pinned chapter, anchor targets use it as scroll-margin-top, and the
thank-you page centres against it. Re-measure if the logo height or the
header's padding changes.
Unlike the pre-V5 header this does NOT step up at 45rem: the logo is 34px
at every width now, so this is a single constant for the first time. */
--header-h: 59px;
/* --- Surface defaults ---
V5 inverts the site: the default ground is navy-deep, and cream/white are
the bands that interrupt it. Every one of these is re-pointed by a .band-*
class below, so children never special-case their own surface. */
--bg: var(--navy-deep);
--fg: var(--cream);
--eyebrow-color: var(--teal-lift);
--ink-quiet: var(--teal-lift);
--rule: var(--rule-on-dark);
--focus: var(--cream);
}
/* Bands re-point the same six variables. --ink-quiet is the AA-corrected teal
for whichever ground it lands on (link underlines, chip borders, qualifiers),
and it exists so those consumers stop carrying per-band overrides of their own.
--eyebrow-color tracks it everywhere EXCEPT orange, where a teal eyebrow on an
orange ground would be both illegible and off-system: it goes navy instead. */
.band-deep {
--bg: var(--navy-deep);
--fg: var(--cream);
--eyebrow-color: var(--teal-lift);
--ink-quiet: var(--teal-lift);
--rule: var(--rule-on-dark);
--focus: var(--cream);
}
.band-navy {
--bg: var(--navy);
--fg: var(--cream);
--eyebrow-color: var(--teal-lift);
--ink-quiet: var(--teal-lift);
--rule: var(--rule-on-dark);
--focus: var(--cream);
}
.band-cream {
--bg: var(--cream);
--fg: var(--navy);
--eyebrow-color: var(--teal-ink);
--ink-quiet: var(--teal-ink);
--rule: var(--rule-on-light);
--focus: var(--navy);
}
.band-white {
--bg: var(--white);
--fg: var(--navy);
--eyebrow-color: var(--teal-ink);
--ink-quiet: var(--teal-ink);
--rule: var(--rule-on-light);
--focus: var(--navy);
}
/* --focus is NAVY here, not cream. The handoff says "cream on the dark and
orange grounds"; cream on #FF6608 measures below the 3:1 WCAG 1.4.11 floor for
non-text contrast — it is the same pair DESIGN.md already forbids for text.
Navy on orange is 5.06:1 and clears it with room. */
.band-orange {
--bg: var(--orange);
--fg: var(--navy);
--eyebrow-color: var(--navy);
--ink-quiet: var(--teal-ink);
--rule: var(--rule-on-light);
--focus: var(--navy);
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--navy-deep);
color: var(--cream);
font-family: var(--font-body);
font-size: var(--size-body);
line-height: var(--lh-body);
text-rendering: optimizeLegibility;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 700;
line-height: var(--lh-heading);
margin: 0;
text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
strong { font-weight: 700; }
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
border-radius: 2px;
}
/* Motion lives in §14, at the bottom of this file — including its
`prefers-reduced-motion` handling, which sits beside the rules it turns off
rather than up here, so you can never change one without seeing the other.
Nothing between here and §14 animates, transforms or pins. */
/* --------------------------------------------------------------------------
3. Layout primitives
-------------------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
background: var(--bg);
color: var(--fg);
padding-block: var(--section-y);
}
.section + .section { border-top: 1px solid var(--rule); }
/* Anchor targets clear the sticky header rather than landing underneath it.
This is layout, not motion — it applies to instant jumps too, so it belongs
here and not in §14 with the smooth-scroll gate. */
#main,
.section,
.chapters,
.chapter,
.work,
.svc,
.faq,
.cta { scroll-margin-top: var(--header-h); }
/* Editorial spine: eyebrow parks in a narrow left column from 62rem up. */
.layout > * + * { margin-top: var(--s-5); }
@media (min-width: 62rem) {
.layout {
display: grid;
grid-template-columns: var(--spine-col) minmax(0, 1fr);
column-gap: var(--spine-gap);
align-items: start;
}
.layout > * + * { margin-top: 0; }
.layout > .eyebrow { grid-column: 1; grid-row: 1; padding-top: 0.55rem; }
.layout > .layout-body { grid-column: 2; grid-row: 1; }
/* Blocks that need the whole measure — card grids, figure lists — break out
of the spine and run the full container width on their own row.
`grid-row: auto` is load-bearing, not tidy-up. An element carrying BOTH
.layout-body and .span-full (case-study.html:275 is the one on the site)
matches the rule above too, at equal specificity — so it correctly takes
grid-column: 1 / -1 from here, but silently keeps grid-row: 1 from there and
is placed ON TOP of the spine's first row. It rendered as two paragraphs
overlapping, and it predates V5; it only became obvious once that section
moved onto a cream band. Resetting the row here fixes the pair without
making either rule care about the other. */
.layout > .span-full { grid-column: 1 / -1; grid-row: auto; margin-top: var(--s-7); }
.layout > .span-full + .span-full { margin-top: var(--s-6); }
}
.layout-body > * + * { margin-top: var(--s-5); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
/* --------------------------------------------------------------------------
4. Eyebrow labels (D3a — the ONLY monospace on the site)
-------------------------------------------------------------------------- */
/* font-weight and text-wrap are pinned here, not inherited: most eyebrows are
real
s (they are their section's heading), so without these they would
pick up the base h1,h2,h3 rule's 700 weight and balanced wrapping and stop
matching the
eyebrows beside them. */
.eyebrow {
font-family: var(--font-mono);
font-size: var(--size-label);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--eyebrow-color);
margin: 0;
text-wrap: wrap;
}
/* Visually hidden, still read by screen readers and parsers.
Added 2026-07-30 (SEO/AEO audit #7). Section eyebrows carry two spans: the
visible , marked aria-hidden, and a plain-language heading in here, so
a screen reader never announces "" as a heading and a parser
gets something it can key off.
Do NOT swap this for display:none — that would hide it from assistive tech and
search engines alike, which is the opposite of the point. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
5. Buttons + links
V5 squares the buttons and replaces the fill/text inversion with a single
instant hover shadow. Both are deliberate breaks with the pre-V5 system and
both are written up in DESIGN.md rather than left to be "fixed" later:
• radius 0, not 10px — the 10px control radius now has one consumer left,
the dashed pending token, and that is documented at --radius-sm.
• one hover box-shadow, no transition, no transform, no colour change. The
Flat Ground Rule was amended to permit exactly this and nothing else;
shadow still never expresses elevation anywhere on the site.
-------------------------------------------------------------------------- */
.btn {
display: inline-block;
font-family: var(--font-body);
font-size: var(--size-small);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
text-decoration: none;
padding: 1rem 1.6rem;
border-radius: 0;
/* Transparent rather than absent so .btn-primary and .btn-ghost share an
identical box and never shift by 4px when one replaces the other. */
border: 2px solid transparent;
cursor: pointer;
}
/* Header CTA. 0.65rem, not the reference's 0.6rem, and the 0.05rem is the whole
point: at 0.6rem this control computes to 43.6px tall at the 16px type floor,
just under the 44px touch target the rest of the site holds. 0.65rem lands it
at exactly 44px. Two-tenths of a millimetre of visual difference, one
accessibility floor kept. */
.btn-compact { padding: 0.65rem 1.1rem; }
/* Primary — orange fill + navy ink, 5.06:1. */
.btn-primary {
background: var(--orange);
color: var(--navy);
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
/* On the orange bands an orange button is not a button. The band re-points it
to a navy fill with cream ink rather than the page introducing a second
primary-button variant — same mechanism every other surface uses. */
.band-orange .btn-primary {
background: var(--navy);
color: var(--cream);
}
.band-orange .btn-primary:hover { box-shadow: 0 8px 22px rgba(14, 28, 43, 0.5); }
/* Secondary — deliberately subordinate, and never orange. No shadow: a shadow
under a transparent fill reads as a bug, and the amended Flat Ground Rule
permits the hover shadow on primary buttons only. The border carries it. */
.btn-ghost {
background: transparent;
color: var(--fg);
border-color: var(--ink-quiet);
}
.btn-ghost:hover { border-color: currentColor; }
.text-link {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--ink-quiet);
text-underline-offset: 0.28em;
text-decoration-thickness: 2px;
}
.text-link:hover { text-decoration-color: currentColor; }
/* Unfilled copy tokens (R0.7) — must never ship silently.
check-placeholders.sh fails the build on this class, so it is a deploy gate
with a paint job, not decoration. */
.placeholder {
background: transparent;
color: inherit;
font-weight: 700;
font-size: 0.94em;
letter-spacing: 0.02em;
padding: 0.1em 0.45em;
border: 1px dashed var(--ink-quiet);
border-radius: 5px;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
6. Skip link + header + footer
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
left: var(--s-4);
top: -100%;
z-index: 10;
background: var(--orange);
color: var(--navy);
font-weight: 600;
font-size: var(--size-small);
padding: 0.75rem 1.1rem;
text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }
/* The skip link lands on the navy-deep header, where a navy ring would vanish —
the cream halo keeps the indicator visible on either surface. This box-shadow
is a FOCUS-VISIBILITY device, not elevation, and remains the documented
exception it has always been. */
.skip-link:focus-visible {
outline: 3px solid var(--navy);
outline-offset: 0;
box-shadow: 0 0 0 6px var(--cream);
}
/* The z-index is the one exception to §14b's "paint order is DOM order" rule and
it is required: the pinned chapters come later in the DOM, so without it they
would paint straight over the header they are supposed to tuck under.
5 keeps it below .skip-link's 10, so the skip link still lands on top of the
header when focused. */
.site-header {
position: sticky;
top: 0;
padding: 6px 0 12px 0;
z-index: 5;
background: var(--navy-deep);
color: var(--cream);
border-bottom: 1px solid var(--rule-on-dark);
--focus: var(--cream);
--ink-quiet: var(--teal-lift);
}
/* padding-block: 0 is deliberate and is what makes --header-h come out at 59px.
The 12px top and bottom the header reads as live on .header-home and on the
nav links instead, NOT here. Put them back on this element and every nav link
gains 24px it does not need while the bar grows to 83px — which is exactly
what the pre-V5 header did. The reference reaches 59px by giving its nav links
no padding at all; that costs the >=44px touch target, so the padding moved
rather than disappeared. */
.site-header .wrap {
display: flex;
align-items: center;
gap: var(--s-6);
padding-block: 0;
}
.logo { height: var(--logo-h); width: auto; }
/* 12px + 34px + 12px = 58px, + the 1px border = the 59px in --header-h.
This element is the header's height. Change its padding or .logo's height and
--header-h is wrong until you re-measure it. */
.header-home { display: inline-block; padding-block: var(--s-3); }
/* The two