/* ─────────────────────────────────────────────────────────────────────────
Keel Audio — shared component styles (single source of truth).
This file is linked LAST in every page's , so its rules override the
older per-page inline copies (which caused buttons/containers to drift).
It relies on the CSS variables each page defines in :root
(--brand, --brand-2, --ink, --muted, --line, etc.).
Add shared components here (buttons, etc.) rather than re-defining them
inline per page — that's what keeps the site consistent.
───────────────────────────────────────────────────────────────────────── */
/* Anchored scrolls (#privacy, #faq, …) must clear the 62px sticky header, or
the target heading lands hidden behind it. Applies to every page. */
html {
scroll-padding-top: 74px;
}
/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
display: inline-block;
padding: 14px 22px;
border-radius: 11px;
font-weight: 650;
font-size: 1rem;
line-height: 1.2;
cursor: pointer;
border: 1px solid transparent;
text-align: center;
text-decoration: none;
}
.btn-primary {
background: linear-gradient(180deg, var(--brand-2), var(--brand));
color: #04141a;
box-shadow: 0 6px 24px #2ba85c33;
}
.btn-primary:hover {
filter: brightness(1.06);
}
.btn-ghost {
background: transparent;
border-color: var(--line);
color: var(--ink);
margin-left: 0; /* kill a stray margin some pages put on the ghost button */
}
.btn-ghost:hover {
background: #ffffff0a;
}
/* ── Button group (.btns) ─────────────────────────────────────────────────
Row on desktop, full-width stack on mobile — so two CTAs always line up the
same way. NOTE: only `.btns` is the button-group class. Do NOT add `.cta`
here — `.cta` is a section-banner wrapper on some pages (e.g. case-study),
not a button row; styling it as flex breaks those layouts. Pages that group
buttons should use class="btns". */
.btns {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
}
@media (max-width: 640px) {
.btns {
flex-direction: column;
align-items: stretch;
}
.btns > .btn {
width: 100%;
margin: 0;
}
/* ── Mobile nav drawer — REAL glass, matching the header ──────────────────
The drawer used to go see-through because backdrop-filter can't blur
through a backdrop-filter ancestor (the header). Fixed below by moving the
header's blur onto header.nav::before (a pseudo-element, NOT an ancestor of
the drawer) — so the drawer can have its own working blur. */
.nav nav {
background: rgba(10, 19, 15, 0.62);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
}
/* ── Header glass via a pseudo-element ──────────────────────────────────────
header.nav itself carries NO backdrop-filter (so it isn't a backdrop-root
for the drawer); its glass is painted by ::before, which blurs the content
behind the bar exactly like before. Applies on every page. */
header.nav {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
header.nav::before {
content: "";
position: absolute;
inset: 0;
background: #0a130fcc;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: -1;
pointer-events: none;
}
/* ── Back / breadcrumb arrow — rendered as a centered SVG (not a text glyph) ──
Text arrow glyphs sit at a font-dependent height that never lines up with the
text. Hiding the glyph and masking in a square SVG arrow lets flexbox center
it perfectly, on every page, at any size. Colour follows the link text. */
.nav .back {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--muted);
font-size: 0.92rem;
}
.nav .back:hover {
color: var(--ink);
text-decoration: none;
}
.nav .back span {
display: inline-block;
width: 0.85rem;
height: 0.85rem;
font-size: 0; /* hide the literal ← character */
transform: none; /* neutralize the old per-page pixel nudge */
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* ══════════════════════════════════════════════════════════════════════════
LIGHT THEME (2026-08 redesign). This sheet is linked LAST on every sub-page,
so these rules override each page's older dark inline :root + components.
(index.html is self-contained and does NOT link this — it carries its own copy.)
══════════════════════════════════════════════════════════════════════════ */
/* self-hosted fonts */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-grotesque.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/hanken-grotesk.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrains-mono.woff2) format("woff2")}
/* light palette — overrides each sub-page's dark inline :root */
:root{
--bg:#eef2ec; --bg2:#f7faf6; --card:#ffffff; --line:#dde5de;
--ink:#0c1913; --muted:#4a6055; --brand:#14894e; --brand-2:#14894e; --accent:#b07d1c; --radius:16px;
--display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
--sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
body{ background:var(--bg)!important; color:var(--ink); font-family:var(--sans); }
h1,h2,h3{ font-family:var(--display); }
.brand{ font-family:var(--display); white-space:nowrap; color:var(--ink); }
strong{ color:var(--ink); }
/* solid header (sub-pages set header.nav bg + blur directly) */
header.nav{ background:#f6f9f7!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; border-bottom:1px solid var(--line); }
header.nav::before{ background:#f6f9f7!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
/* buttons */
.btn{ border-radius:11px; transition:transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand)!important; color:#fff!important; box-shadow:0 2px 6px -1px rgba(12,25,19,.22); }
.btn-primary:hover{ background:#0f7a44!important; filter:none; transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(20,137,78,.55); }
.btn-ghost{ background:var(--card); border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--card); border-color:var(--brand); color:var(--ink); transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(12,25,19,.22); }
/* form fields on light (contact page) */
input,select,textarea{ background:#ffffff!important; border-color:var(--line); color:var(--ink); }
input:focus,select:focus,textarea:focus{ border-color:var(--brand)!important; box-shadow:0 0 0 3px rgba(20,137,78,.18)!important; }
/* ── columned footer (shared markup ported onto every page) ── */
footer{ border-top:1px solid var(--line); background:var(--bg); padding:46px 0 28px; color:var(--muted); text-align:left; margin-top:0; }
footer .wrap{ max-width:1080px; }
.foot{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:30px 40px; align-items:start; }
.foot-brand-col{ display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; align-self:stretch; gap:12px; max-width:300px; text-align:left; }
.foot-logo{ margin:0; display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; font-family:var(--display); font-size:1.05rem; }
.foot-logo .footer-logo{ width:26px; height:26px; display:block; }
.foot-tag{ margin:0; color:var(--ink); font-size:1.28rem; font-style:italic; line-height:1.4; letter-spacing:-.01em; }
.foot-dl{ margin:0; color:var(--brand); font-weight:600; font-size:.95rem; }
.foot-dl:hover{ text-decoration:underline; }
.foot-col{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; text-align:left; }
.foot-col h4{ margin:0 0 5px; font-family:var(--sans); font-weight:600; font-size:.82rem; color:var(--ink); }
.foot-col a{ margin:0; color:var(--muted); font-size:.92rem; }
.foot-col a:hover{ color:var(--ink); }
.foot-legal{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin-top:32px; padding-top:16px; border-top:1px solid var(--line); text-align:center; }
.foot-legal span{ color:#8a9c92; font-size:.8rem; }
@media(max-width:760px){ .foot{ grid-template-columns:1fr 1fr; gap:28px 24px; } .foot-brand-col{ grid-column:1 / -1; max-width:none; } }