/* ==========================================================================
KREATED V2 — THE GLOBAL FOOTER
Loaded LAST on every one of the 17 routes, so this file is the single
definition of the footer regardless of which page system the route belongs
to. Before this existed the site had two different footers — four columns
plus a legal row on three pages, and a wordmark with "Raleigh, NC" on the
other fourteen — so a visitor who arrived on About, Method, Contact, Work or
any service page reached what felt like an incomplete mini-site with no way
to find pricing, the phone number or the privacy page.
The footer is a trust surface. It is the last thing a comparing buyer reads,
and it is where they check that a company is real. It carries the contact
details, every route, the five services and the two ways to start — and
nothing else. 🚫 No social icons, no newsletter, no badges, no awards.
========================================================================== */
/* ⚠ The ground used to be a flat fill plus a 1px border-top, and --ink was
undefined on the 14 routes that do not load styles.css — so they fell back to
#070707, a near-black outside this palette entirely, and the footer read as a
black rectangle stuck onto a navy page. --ink is now defined in both
stylesheets, and the fill ARRIVES: transparent at the top edge, so the page
ground above shows through, settling into the footer ground over ~130px. The
closing glow in .close::before runs down into that band, so the footer is
entered rather than butted against. 🚫 Do not put the border-top back. */
.foot{
/* ⚠ ONE GROUND, 2026-08-31. The footer used to settle onto --ink, a step
darker than the page above it, so a visible horizontal colour split ran
across the full width where the two met — the footer read as a separate
black block bolted to the bottom of a navy page.
It now sits on the PAGE's own ground and paints nothing of its own. The
regions inside it are told apart by spacing, scale and label case, which
is what was already doing the work; the colour change was redundant and
it was the only thing producing a seam.
Transparent, not a repeated fill: whatever light the section above ends
with — the closing glow on the homepage, .close::before on every other
route — continues straight through into the footer instead of being
stopped at its top edge.
🚫 Do not put a background-color, a background-image or a border-top back
on .foot. Both were removed for the same reason. */
background:transparent;
padding:clamp(64px,7.4vw,104px) 0 40px}
/* THE CLOSING LIGHT — one source, every route, anchored to the bottom.
It reaches UP out of the footer into the closing section above, which is why
the handoff between them has no edge: the light's box ends where the page
ends, so its falloff is never cut.
⚠ The gradient reaches TRUE ZERO inside its own box in every direction —
centre at (0%, 108%) with the stops closing by 78% of the radius. That is the
property that was missing before, and its absence is what produced the hard
horizontal line across the footer that read as a second background colour.
🚫 If you retune this, re-check that the last stop lands inside the box. */
.foot{position:relative;isolation:isolate}
/* ⚠ .foot::before WAS REMOVED, 2026-09-01. It was a glow scoped to one section, so its
falloff was clipped at that section's edges — with the theme flip the ground
either side of it is a different colour, and the clip became a hard
horizontal line across the full width at the closing CTA / footer boundary. Section-scoped
light produced every seam fixed in August and it produced this one.
There is now exactly ONE light source on the site: the fixed .atmos layer
in theme.css, which is behind the whole document and has no edges to clip
against. 🚫 Do not add a section-scoped glow to any section, ever. */
.foot__in{display:block;max-width:1440px;margin:0 auto;
padding-inline:var(--gutter);width:100%}
.foot__brand{margin-bottom:clamp(36px,4.6vw,60px)}
.foot__mark{display:block;margin:0 0 10px;
font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:30px;
letter-spacing:.22em;margin-right:-.22em;color:var(--ink-1);text-decoration:none}
.foot__mark .mk{display:none}
.foot__line{margin:0;font-size:15px;line-height:1.5;color:var(--ink-3)}
.foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(24px,4vw,64px);max-width:1080px}
/* column labels are , not
, since 2026-09-16: four footer h2s on every page
made them part of each page's outline. Two classes beat `.foot__cols p` below. */
.foot__cols .foot__colh{margin:0 0 14px;font:600 12px/1 'General Sans',system-ui;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.foot__cols p{margin:0 0 9px;font-size:14.5px;line-height:1.5;
color:var(--ink-2)}
/* inline-block, not inline: vertical padding on an inline box does not grow
the hit area, and these measured 20px — under the 24px minimum. As
inline-block the padding counts and every footer link clears it. */
.foot__cols a{display:inline-block;color:inherit;text-decoration:none;
padding-block:4px;transition:color .2s}
.foot__cols a:hover{color:var(--ink-1)}
.foot__cols a:focus-visible{outline:2px solid var(--cobalt-lift,#5B86FF);
outline-offset:3px;border-radius:2px}
.foot__legal{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
margin:clamp(40px,5vw,64px) 0 0;padding-top:20px;
border-top:1px solid color-mix(in srgb, var(--ink-1) 8%, transparent);
/* .38 measured 3.52:1 — under AA at this size. .48 clears it. */
font-size:12.5px;color:var(--ink-4)}
.foot__legal a{display:inline-block;color:inherit;text-decoration:none;padding-block:6px}
.foot__legal a:hover{color:var(--ink-1)}
.foot__legal a:focus-visible{outline:2px solid var(--cobalt-lift,#5B86FF);
outline-offset:3px;border-radius:2px}
.foot__mark:focus-visible{outline:2px solid var(--cobalt-lift,#5B86FF);
outline-offset:4px;border-radius:2px}
/* the leaf pages' old one-line footer element, now unused */
.foot__where{display:none}
@media (max-width:900px){
.foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 28px}
}
@media (max-width:520px){
.foot__cols{grid-template-columns:1fr;gap:26px}
}
/* ==========================================================================
MOBILE — 2026-09-02. The email and phone links are the only footer entries a
visitor taps with intent rather than to navigate, and they measured 26px.
⚠ Scoped to href^=mailto / href^=tel ON PURPOSE. Giving all nineteen footer
links a 44px box would add roughly 340px of footer to every phone page to
fix two controls that matter; the nav columns are secondary and already have
comfortable gaps between rows.
========================================================================== */
@media (max-width:900px){
.foot a[href^="mailto:"],.foot a[href^="tel:"]{
display:inline-flex;align-items:center;min-height:44px;
}
}
/* ==========================================================================
INSTAGRAM — the only external profile the site links to, added 2026-09-02.
⚠ rel="noopener me": `me` is the XFN token that marks this as the site
owner's own profile. It is the visible half of the bidirectional link that
Organization.sameAs makes machine-readable — keep the URL identical in both
places or the two stop corroborating each other.
🚫 Do not add empty social icons beside it. One real profile is a signal;
a row of dead icons is noise.
========================================================================== */
/* ⚠ .foot__cols a — NOT .foot__ig alone. The column rule `.foot__cols a`
(0,1,1) sets display:inline-block and outranks a bare `.foot__ig` (0,1,0),
so the icon and the handle broke onto two lines. Match its specificity. */
.foot__social{margin-top:14px}
.foot__cols a.foot__ig{display:inline-flex;align-items:center;gap:8px;
white-space:nowrap}
.foot__igmark{flex:none;opacity:.85;transition:opacity var(--t-hover,.18s ease)}
.foot__ig:hover .foot__igmark{opacity:1}
/* ==========================================================================
THE FOOTER IN DAY TERRITORY — 2026-09-06
The rule above keeps .foot transparent so the page ground runs through it,
and that is right on the sixteen routes that end at night: the footer is the
bottom of one continuous room.
/work/ is the first route that ENDS in day, and there the same rule produced
a footer on #F4F5FA — the only pale footer on the site, and the one place a
comparing buyer checks that a company is real. bx.studio, which this page is
modelled on, paints its footer #020C2E on a #F3F3F3 page for exactly this
reason: the light page is the work, the dark block is the company.
⚠ This does NOT undo the 🚫 above. That rule exists because the footer used
to sit a step DARKER than a navy page and split it with a seam. Here there
is no seam to make — the arrival gradient means the navy is reached over
140px rather than butted on, which is the same behaviour the note describes
wanting. Night territory is untouched: the selector needs .day-start.
⚠ THE INKS COME BACK WITH IT. Re-declaring the four journey variables on
.foot puts the whole subtree back in night, so every k-aware token inside it
— --ink-1..4, --stroke, --accent, --cta-fill — resolves the way it does on
the other sixteen routes. The three legacy literals are restored alongside
them or the day remap in theme.css would leave dark text on the navy.
🚫 Do not style the footer's children individually to fix this. There are
forty of them and they are already correct; it is the context that moved.
========================================================================== */
:root.day-start .foot{
/* ⚠ REDECLARING --k HERE IS NOT ENOUGH, and the first version of this block
got it wrong. --ink-1..4 are declared on :root as color-mix() expressions
containing var(--k). A custom property resolves its own var() references
against the element it is DECLARED on — :root — and the resolved colour is
what inherits down. Setting --k on .foot therefore changes nothing that was
already computed upstream: the footer kept day ink on navy and the wordmark
rendered #141414 on #020C2E.
Each token the footer actually reads is restored to its night value here,
expressed as the --bx-* endpoint it resolves to at p2=1 rather than as a
literal, so a change to the palette still reaches this block.
🚫 Do not add tokens to this list speculatively. It is exactly the set
`grep -oE "var\(--[a-z0-9-]+" footer.css` returns; anything else is dead
weight that will drift out of step with the file above it. */
--k:1;
--ink-1:var(--bx-ink-night); /* #FFFFFF */
--ink-2:var(--bx-sec-night); /* #D1D1D1 */
--ink-3:#B9BFD4; /* the night end of --ink-3, theme.css */
--ink-4:#A9B0B7; /* the night end of --ink-4, theme.css */
--white:#FFFFFF;
--warm:#EDE8DE;
--gray:#888FA3;
color:var(--ink-1);
/* ⚠ SOLID, not a fade. The first version arrived over 140px and the wordmark
— which sits about 110px into the footer — was rendered white on a band
that was still three-quarters paper, so it vanished. Rather than tune the
stop against the position of one element, the edge is hard: which is also
what the reference does, #F3F3F3 meeting #020C2E with nothing between.
A hard edge between a light page and a dark footer is structure. The seam
the note above forbids was between navy and a DARKER navy, which is a
mistake; this is not the same thing. */
background:var(--bx-night);
}