/* =========================================================================
Runeflake — landing page
Recreation of the supplied desktop presentation in HTML/CSS/vanilla JS.
Sections: hero, services, features/bento, reviews, ethics, built-for, CTA, footer
========================================================================= */
/* ---------- fonts ---------- */
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('../fonts/figtree-latin.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: 'Figtree';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- tokens ---------- */
:root {
--bg: #f4f2f6;
--surface: #ffffff;
--ink: #141218;
--ink-soft: #6c6875;
--ink-faint: #97939f;
--line: rgba(20, 18, 24, .10);
--dark: #0d0d11;
--dark-soft: #17171d;
--dark-line: rgba(255, 255, 255, .10);
--on-dark: #ffffff;
--on-dark-soft:rgba(255, 255, 255, .60);
--violet: #8b84f7;
--violet-lift: #a9a3fb;
--violet-deep: #5f55e4;
--lime: #d9f26b;
--lime-deep: #c6e553;
--pink: #ff3fa4;
--shell: 1400px;
--radius-panel:clamp(20px, 2.4vw, 30px);
--radius-card: clamp(16px, 1.6vw, 22px);
--pad-section: clamp(56px, 7.6vw, 108px);
--ease: cubic-bezier(.22, .61, .36, 1);
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.55;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg { display: block; }
:focus-visible {
outline: 2px solid var(--violet-deep);
outline-offset: 3px;
border-radius: 6px;
}
.skip-link {
position: fixed; top: 10px; left: 50%; transform: translate(-50%, -160%);
z-index: 100; padding: 10px 18px; border-radius: 999px;
background: var(--ink); color: #fff; font-size: 14px;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }
/* ---------- layout helpers ---------- */
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 28px);
}
.section { padding-block: var(--pad-section); }
/* header is a constant 68px now that .is-stuck no longer resizes it */
[id] { scroll-margin-top: 76px; }
.section--flush { padding-block: clamp(8px, 1.6vw, 20px); }
.section--tight { padding-block: clamp(28px, 3.4vw, 52px); }
/* a section that introduces the one below it sits closer to it */
.section--pairTop { padding-bottom: clamp(18px, 2.4vw, 34px); }
.section__cta { margin-top: clamp(28px, 3.2vw, 42px); }
/* wide enough that the rules flanking a long ruled heading still have room */
.centered { text-align: center; max-width: 880px; margin-inline: auto; }
.centered__lede { margin-inline: auto; }
/* ---------- typography ---------- */
.h2 {
font-size: clamp(1.95rem, 3.7vw, 3.35rem);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.032em;
}
.h2--light { color: var(--on-dark); }
.h2--ruled {
display: flex; align-items: center; justify-content: center;
gap: clamp(14px, 3vw, 30px); margin-block: 18px 16px;
}
.h2--ruled::before, .h2--ruled::after {
content: ""; height: 1px; flex: 1 1 auto; max-width: 210px;
background: linear-gradient(90deg, transparent, rgba(20, 18, 24, .22));
}
.h2--ruled::after { background: linear-gradient(90deg, rgba(20, 18, 24, .22), transparent); }
/* 0 1 auto, not 0 0 auto: the heading must still be able to shrink and wrap
once the viewport is narrower than the text, or it pushes the page sideways */
.h2--ruled > span { flex: 0 1 auto; min-width: 0; }
.lede {
color: var(--ink-soft);
font-size: clamp(.92rem, 1.05vw, 1rem);
line-height: 1.7;
max-width: 52ch;
}
.lede--light { color: var(--on-dark-soft); }
.pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 16px 7px 12px;
border: 1px solid rgba(255, 255, 255, .85);
border-radius: 999px;
background: rgba(255, 255, 255, .72);
backdrop-filter: blur(10px) saturate(1.4);
-webkit-backdrop-filter: blur(10px) saturate(1.4);
box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 10px 24px -18px rgba(70, 48, 110, .7);
font-size: .72rem; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-soft);
}
.pill__icon { width: 13px; height: 13px; color: var(--violet-deep); }
.pill__icon--heart { color: var(--pink); }
.pill--onDark {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .16);
box-shadow: none;
color: rgba(255, 255, 255, .72);
}
.pill--onDark .pill__icon { color: var(--violet-lift); }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 13px 24px;
border-radius: 999px;
font-size: .875rem; font-weight: 500; letter-spacing: -.01em;
border: 1px solid transparent;
}
.btn--sm { padding: 9px 18px; font-size: .8rem; }
.btn--dark {
background: linear-gradient(180deg, #2a2733, #141218 62%);
color: #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset,
0 12px 28px -14px rgba(20, 18, 24, .95),
0 2px 6px -3px rgba(20, 18, 24, .5);
}
.btn--light { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn:hover { transform: translateY(-2px); }
.btn--dark:hover { background: linear-gradient(180deg, #37333f, #201d27 62%); }
.btn--light:hover { background: #f2f0f5; }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.btn:active { transform: translateY(0); }
/* ---------- panels & texture ---------- */
.panel {
position: relative;
border-radius: var(--radius-panel);
overflow: hidden;
isolation: isolate;
}
.panel--dark {
background: var(--dark);
padding: clamp(34px, 5vw, 70px) clamp(18px, 3.4vw, 46px) clamp(28px, 3.6vw, 44px);
}
.panel--dark::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(58% 46% at 14% 0%, rgba(255, 90, 160, .18), transparent 70%),
radial-gradient(58% 46% at 86% 0%, rgba(124, 108, 246, .18), transparent 70%);
}
.grain::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
pointer-events: none; opacity: .3; mix-blend-mode: overlay; z-index: 3;
background-image: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
/* =========================================================================
HEADER
========================================================================= */
/* The header is sticky, therefore IN FLOW: shrinking its padding on scroll moved
every element below it up by 12px and scored as real CLS on the first scroll.
The stuck state now changes only paint properties, never layout. */
.site-header {
position: sticky; top: 0; z-index: 50;
padding-block: 14px;
}
.site-header.is-stuck {
background: rgba(255, 255, 255, .78);
backdrop-filter: saturate(1.6) blur(14px);
-webkit-backdrop-filter: saturate(1.6) blur(14px);
box-shadow: 0 1px 0 var(--line), 0 14px 40px -34px rgba(20, 18, 24, .8);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo {
font-weight: 800; font-size: .95rem;
letter-spacing: .12em; text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: clamp(14px, 2.1vw, 30px); }
/* Not --ink-soft: while the header is still transparent these sit on the hero's
lavender bloom, where #6c6875 measures 3.96:1. #5f5b68 clears AA there. */
.nav > a:not(.btn) {
font-size: .85rem; color: #5f5b68;
}
.nav > a:not(.btn):hover { color: var(--ink); }
.nav__cta { margin-left: clamp(4px, 1vw, 14px); }
/* ---------- nav dropdown ---------- */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__trigger {
display: inline-flex; align-items: center; gap: 6px;
font-size: .85rem; color: #5f5b68;
}
.nav__trigger svg {
width: 11px; height: 11px; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nav__trigger:hover,
.nav__group.is-open .nav__trigger { color: var(--ink); }
.nav__group.is-open .nav__trigger svg { transform: rotate(180deg); }
.nav__menu {
position: absolute; top: calc(100% + 16px); left: 50%;
z-index: 5;
display: grid; gap: 2px;
width: min(340px, 82vw);
padding: 8px;
border-radius: 18px;
background: rgba(255, 255, 255, .93);
backdrop-filter: blur(18px) saturate(1.6);
-webkit-backdrop-filter: blur(18px) saturate(1.6);
border: 1px solid var(--line);
box-shadow: 0 34px 64px -38px rgba(20, 18, 24, .6), 0 2px 8px -5px rgba(20, 18, 24, .3);
opacity: 0; visibility: hidden; pointer-events: none;
transform: translate(-50%, -8px);
}
.nav__group.is-open .nav__menu {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translate(-50%, 0);
}
.nav__menu a {
display: grid; gap: 3px;
padding: 12px 14px;
border-radius: 12px;
}
.nav__menu a:hover { background: rgba(20, 18, 24, .05); }
.nav__menu a[aria-current] { background: rgba(124, 108, 246, .1); }
.nav__menuTitle { font-size: .88rem; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.nav__menuText { font-size: .755rem; line-height: 1.45; color: var(--ink-soft); }
.burger { display: none; width: 44px; height: 44px; padding: 12px 9px; border-radius: 10px; }
.burger span {
display: block; height: 1.6px; background: var(--ink); border-radius: 2px;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
/* =========================================================================
HERO
========================================================================= */
.hero { position: relative; padding-block: clamp(54px, 9.6vw, 138px) clamp(58px, 8.6vw, 122px); }
/* --- hero scene: colour blooms, light shafts, a soft aura and fine grain --- */
.hero__bg {
/* runs past the section bottom so the fade finishes inside the box, not at its edge */
position: absolute; inset: -110px 0 -70px; z-index: -1; overflow: hidden;
isolation: isolate;
}
/* The bloom stack itself, shared by the hero and by any panel that opts in with
.scene — this is the whole point of the class: one definition of "the Runeflake
light", used in two places, so they cannot drift apart. */
.hero__bg, .scene {
background:
/* luminous core the copy sits on — kept translucent so the shafts read through it */
radial-gradient(52% 40% at 50% 37%, rgba(255, 255, 255, .74), rgba(255, 255, 255, 0) 74%),
/* colour blooms — warm gold, with one cool bloom kept bottom-right so the
scene still has depth instead of reading as a flat yellow wash */
radial-gradient(42% 40% at 22% 2%, rgba(255, 233, 168, .70), rgba(255, 233, 168, 0) 74%),
radial-gradient(46% 52% at 4% 84%, rgba(253, 205, 116, .60), rgba(253, 205, 116, 0) 72%),
radial-gradient(44% 50% at 97% 24%, rgba(255, 222, 145, .52), rgba(255, 222, 145, 0) 72%),
radial-gradient(58% 46% at 80% 99%, rgba(196, 184, 250, .34), rgba(196, 184, 250, 0) 74%),
/* warm wash underneath, settling into the page grey at the far end */
linear-gradient(122deg,
#fdf2d8 0%, #fdefcf 20%, #fbf0dd 42%,
#f7efe6 64%, #f3edf3 82%, #f7f5fa 100%);
}
/* Shafts of light. Pixel stops (not %) so the oversized box does not stretch them,
and an uneven three-band period so they read hand-placed rather than mechanical. */
.hero__rays, .scene__rays {
position: absolute; inset: -14% -16%; z-index: 2;
background:
repeating-linear-gradient(118deg,
rgba(255, 255, 255, 0) 0px,
rgba(255, 255, 255, .78) 34px,
rgba(255, 255, 255, 0) 74px,
rgba(255, 255, 255, 0) 98px,
rgba(255, 255, 255, .44) 124px,
rgba(255, 255, 255, 0) 158px,
rgba(255, 255, 255, 0) 184px,
rgba(255, 255, 255, .92) 214px,
rgba(255, 255, 255, 0) 252px,
rgba(255, 255, 255, 0) 292px);
-webkit-mask-image: radial-gradient(96% 92% at 50% 42%, #000 46%, rgba(0, 0, 0, .55) 74%, transparent 96%);
mask-image: radial-gradient(96% 92% at 50% 42%, #000 46%, rgba(0, 0, 0, .55) 74%, transparent 96%);
}
/* .scene: the hero's light, dropped into a panel. Sits behind the panel's own
content, clipped to its rounded corners. */
.scene {
position: absolute; inset: 0; z-index: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.scene__rays { inset: -20% -18%; }
/* highlight that drifts toward the pointer */
.hero__aura {
position: absolute; left: 50%; top: 36%; z-index: 1;
width: min(820px, 82%); aspect-ratio: 1.45;
transform: translate3d(calc(-50% + var(--ax, 0px)), calc(-50% + var(--ay, 0px)), 0);
background: radial-gradient(closest-side, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 74%);
}
.hero__grain {
position: absolute; inset: 0; z-index: 3;
opacity: .38; mix-blend-mode: soft-light;
background-image: 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* fade into the page background, painted ON TOP of the vignette so the
vignette cannot tint the last few pixels and leave a seam */
.hero__bg::after {
content: ""; position: absolute; inset: 0; z-index: 4;
background:
linear-gradient(180deg, rgba(244, 242, 246, 0) 62%, rgba(244, 242, 246, .78) 84%, var(--bg) 94%),
radial-gradient(118% 76% at 50% 40%, transparent 54%, rgba(124, 96, 42, .085) 100%);
}
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__title {
margin-block: clamp(20px, 2.6vw, 30px) 0;
font-size: clamp(2.5rem, 5.9vw, 5.25rem);
font-weight: 400;
line-height: 1.02;
letter-spacing: -.042em;
color: #16131c;
}
.hero__lede {
margin-top: clamp(16px, 2.1vw, 24px);
max-width: 48ch;
font-size: clamp(.95rem, 1.1vw, 1.06rem);
color: #56525e;
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin-top: clamp(26px, 3.2vw, 38px); }
/* glassier secondary button over the hero scene only */
.hero__actions .btn--light {
background: rgba(255, 255, 255, .82);
backdrop-filter: blur(12px) saturate(1.5);
-webkit-backdrop-filter: blur(12px) saturate(1.5);
border-color: rgba(255, 255, 255, .92);
box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 30px -20px rgba(70, 48, 110, .6);
}
.hero__actions .btn--light:hover { background: #fff; }
/* =========================================================================
SERVICES (dark panel + cards)
========================================================================= */
.panel__statement {
max-width: 62ch;
margin: 0 auto clamp(30px, 3.8vw, 52px);
text-align: center;
font-size: clamp(1.08rem, 1.6vw, 1.5rem);
line-height: 1.5;
letter-spacing: -.018em;
color: rgba(255, 255, 255, .9);
}
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 1.3vw, 16px);
}
.card {
display: flex; flex-direction: column;
min-height: clamp(230px, 24vw, 290px);
padding: clamp(18px, 1.9vw, 26px);
border-radius: var(--radius-card);
position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); }
.card--dark {
background:
linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012) 46%),
var(--dark-soft);
border: 1px solid var(--dark-line);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
color: var(--on-dark);
}
.card--violet {
background:
radial-gradient(120% 110% at 88% 6%, var(--violet-lift), transparent 58%),
linear-gradient(160deg, #948df8 0%, #837bf5 52%, #7a72f2 100%);
color: #fff;
/* the highlighted card stands slightly proud of its neighbours */
margin-block: -13px;
box-shadow: 0 26px 50px -30px rgba(96, 84, 220, .9);
}
/* --- stat cards --- */
.stat { overflow: hidden; }
/* a pool of light under the figure, so the card is lit rather than flat */
.stat::before {
content: ""; position: absolute; inset: auto -30% -55% -30%; height: 78%;
background: radial-gradient(50% 60% at 50% 100%, rgba(255, 255, 255, .12), transparent 72%);
pointer-events: none;
}
.card--violet.stat::before {
background: radial-gradient(52% 62% at 50% 100%, rgba(255, 255, 255, .3), transparent 72%);
}
.stat__icon {
position: relative; z-index: 1;
display: grid; place-items: center;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
color: #fff;
}
.stat__icon svg {
width: 18px; height: 18px; fill: none; stroke: currentColor;
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.card--violet .stat__icon {
background: rgba(13, 13, 17, .28);
border-color: rgba(255, 255, 255, .22);
}
.stat__value {
position: relative; z-index: 1;
margin-top: auto;
font-size: clamp(2.7rem, 4.6vw, 4.15rem);
font-weight: 500; line-height: .92; letter-spacing: -.05em;
font-variant-numeric: tabular-nums;
/* gradient fill reads richer than flat white at display size.
background-IMAGE, not the background shorthand: the shorthand resets
background-clip, which turns the figure into a solid painted block. */
background-image: linear-gradient(176deg, #fff 26%, rgba(255, 255, 255, .58));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.card--violet .stat__value { background-image: linear-gradient(176deg, #fff 30%, rgba(255, 255, 255, .74)); }
.stat__rule {
position: relative; z-index: 1;
height: 1px; margin: clamp(16px, 1.8vw, 22px) 0 clamp(13px, 1.5vw, 17px);
background: linear-gradient(90deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .04) 72%, transparent);
}
.card--violet .stat__rule {
background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .1) 72%, transparent);
}
.stat__label {
position: relative; z-index: 1;
font-size: .715rem; font-weight: 500;
letter-spacing: .13em; text-transform: uppercase;
line-height: 1.55;
color: var(--on-dark-soft);
max-width: 24ch;
}
.card--violet .stat__label { color: rgba(255, 255, 255, .84); }
/* =========================================================================
SPLIT HEADERS + TABS
========================================================================= */
/* --- the two directions, as tabs --- */
.tabs__bar {
display: inline-flex; gap: 4px;
padding: 5px;
margin-bottom: clamp(16px, 2vw, 24px);
border-radius: 999px;
background: rgba(255, 255, 255, .7);
border: 1px solid var(--line);
box-shadow: 0 10px 26px -20px rgba(70, 48, 110, .7);
}
.tabs__tab {
padding: 10px 20px;
border-radius: 999px;
font-size: .85rem; font-weight: 500; letter-spacing: -.01em;
color: var(--ink-soft);
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab.is-active { background: var(--ink); color: #fff; }
.tabs__panel {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
gap: clamp(10px, 1.1vw, 14px);
min-height: clamp(340px, 34vw, 430px);
}
/* [hidden] loses to display:grid, so restate it */
.tabs__panel[hidden] { display: none; }
.tabs__copy {
position: relative; overflow: hidden;
display: flex; align-items: center;
padding: clamp(22px, 2.6vw, 38px);
border-radius: var(--radius-card);
}
.tabs__copy--violet {
background: linear-gradient(146deg, #8d86f8 0%, #7b72f2 48%, #6c62ef 100%);
color: #fff;
}
.tabs__copy--lime {
background: linear-gradient(146deg, #e2f582 0%, var(--lime) 46%, var(--lime-deep) 100%);
color: #23300a;
}
.tabs__copyBody { position: relative; z-index: 1; max-width: 46ch; }
.tabs__copyBody h3 { font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 500; letter-spacing: -.025em; }
.tabs__copyBody p { margin-top: 12px; font-size: .88rem; line-height: 1.65; opacity: .82; }
.tabs__copyBody .btn { margin-top: clamp(18px, 2.2vw, 26px); }
.tabs__media { overflow: hidden; border-radius: var(--radius-card); background: #e7e4ec; }
.tabs__media img { width: 100%; height: 100%; object-fit: cover; }
.tabs__media:hover img { transform: scale(1.035); }
/* Soft corner sheen on the two colour tiles, not a hard sphere. */
.blob {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(88% 68% at 104% -8%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 62%),
radial-gradient(52% 40% at 88% 12%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%);
}
.tabs__copy--lime .blob {
background:
radial-gradient(88% 68% at 104% -8%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 60%),
radial-gradient(46% 36% at 86% 14%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 72%);
}
/* =========================================================================
SERVICE PAGES
========================================================================= */
.hero--page { padding-block: clamp(26px, 4vw, 54px) clamp(46px, 6.4vw, 92px); }
.hero--page .hero__title { font-size: clamp(2.1rem, 4.7vw, 4rem); }
.hero--page .hero__lede { max-width: 56ch; }
/* the four leak / automation cards */
.leaks {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(12px, 1.3vw, 16px);
margin-top: clamp(30px, 3.6vw, 48px);
}
.leak {
position: relative; overflow: hidden;
display: flex; flex-direction: column;
min-height: clamp(250px, 23vw, 310px);
padding: clamp(20px, 2.1vw, 28px);
border-radius: var(--radius-card);
color: #1b1820;
}
.leak:hover { transform: translateY(-4px); }
.leak__num {
position: relative; z-index: 1;
display: grid; place-items: center;
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(27, 24, 32, .1);
font-size: .7rem; font-weight: 600; letter-spacing: .06em;
}
.leak__body { position: relative; z-index: 1; margin-top: auto; padding-top: 34px; }
.leak__body h3 { font-size: clamp(1.02rem, 1.25vw, 1.2rem); font-weight: 500; letter-spacing: -.02em; }
.leak__body p { margin-top: 10px; font-size: .82rem; line-height: 1.62; color: rgba(27, 24, 32, .72); }
.leak--yellow { background: linear-gradient(152deg, #f7f0a2 0%, #ecdf6c 100%); }
.leak--lavender { background: linear-gradient(152deg, #ded8fd 0%, #c1b9fa 100%); }
.leak--blue { background: linear-gradient(152deg, #d2e3fd 0%, #a8c8fa 100%); }
.leak--pink { background: linear-gradient(152deg, #fbd6e8 0%, #f6b6d4 100%); }
/* four-up steps on the service pages.
Doubled class: the base .steps rule is declared later in this file, so an
equal-specificity modifier would lose the cascade. */
.steps.steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--four .step__num { margin-bottom: clamp(22px, 2.4vw, 34px); }
/* what you can count on */
.assure {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 1.3vw, 16px);
margin-top: clamp(30px, 3.6vw, 48px);
}
.assure li {
display: grid; grid-template-columns: auto minmax(0, 1fr);
align-items: start; gap: clamp(13px, 1.4vw, 17px);
padding: clamp(19px, 2vw, 26px);
border-radius: var(--radius-card);
background: var(--surface);
border: 1px solid var(--line);
font-size: .92rem; line-height: 1.6; color: #3b3742;
}
.assure li:hover { border-color: rgba(20, 18, 24, .16); box-shadow: 0 26px 44px -40px rgba(20, 18, 24, .7); }
.assure__tick {
display: grid; place-items: center;
width: 30px; height: 30px; flex: 0 0 auto;
border-radius: 50%;
background: rgba(124, 108, 246, .12);
color: #4c41c9;
}
.assure__tick svg {
width: 15px; height: 15px; fill: none; stroke: currentColor;
stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* FAQ reuses the accordion, without the media column */
.acc--faq { margin-top: clamp(28px, 3.4vw, 44px); }
.acc--faq .acc__head { grid-template-columns: minmax(0, 1fr) auto; }
.acc--faq .acc__title { font-size: clamp(1rem, 1.3vw, 1.25rem); }
.acc--faq .acc__inner { grid-template-columns: minmax(0, 1fr); }
.acc--faq .acc__inner > p {
max-width: 78ch;
margin-bottom: clamp(20px, 2.3vw, 28px);
font-size: .92rem; line-height: 1.72; color: var(--ink-soft);
}
/* =========================================================================
REVIEWS / CAROUSEL
========================================================================= */
.carousel {
position: relative;
margin-top: clamp(30px, 4vw, 48px);
/* three cards fill the shell exactly, so neighbours sit flush at the edges */
--gap: clamp(14px, 1.6vw, 20px);
--card: calc((100% - var(--gap) * 2) / 3);
}
/* A real scroll container, not a transformed track: the reader can drag, swipe
or trackpad-scroll it, and the JS keeps enough identical sets on either side
that an end can never come into view. The scrollbar is hidden because the
cards themselves already show there is more to the sides. */
.carousel__stage {
overflow-x: auto;
overflow-y: hidden;
padding-block: 14px;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge */
}
.carousel__stage::-webkit-scrollbar { width: 0; height: 0; display: none; }
.carousel__stage:focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 4px; border-radius: var(--radius-card); }
/* No width: max-content here. --card is a percentage of the track's own box, so
sizing the track to its content makes the two depend on each other and the
cards blow up (measured: a 65,085px track at 1366). Left at its default the
track fills the stage, the percentage resolves against that, and the
non-shrinking cards simply overflow — which is what the stage scrolls. */
.carousel__track {
display: flex;
gap: var(--gap);
}
.quote {
flex: 0 0 auto;
width: var(--card);
padding: clamp(18px, 1.9vw, 24px);
border-radius: var(--radius-card);
background: var(--surface);
border: 1px solid var(--line);
opacity: .34;
transform: scale(.95);
user-select: none;
scroll-snap-align: center;
}
/* No drop shadow: the active card is already distinguished by full opacity and
full scale against dimmed, scaled-down neighbours. */
.quote.is-active {
opacity: 1; transform: scale(1);
}
.quote__head { display: flex; align-items: center; gap: 11px; }
/* a neutral profile mark, not a stock portrait: the testimonials are placeholder
copy, so borrowing real faces to stand behind them would be a lie */
.quote__avatar {
flex: 0 0 auto;
display: grid; place-items: center;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(20, 18, 24, .05);
border: 1px solid var(--line);
color: var(--ink-soft);
}
.quote__avatar svg {
width: 19px; height: 19px;
fill: none; stroke: currentColor;
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.quote__who { display: flex; flex-direction: column; line-height: 1.3; }
.quote__who strong { font-size: .88rem; font-weight: 600; letter-spacing: -.01em; }
.quote__who small { font-size: .72rem; color: var(--ink-faint); }
.quote__text { margin-top: 16px; font-size: .84rem; line-height: 1.65; color: #46424f; }
.carousel__btn {
position: absolute; top: 50%; z-index: 4;
display: grid; place-items: center;
width: 38px; height: 38px;
border-radius: 11px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 12px 30px -18px rgba(20, 18, 24, .7);
transform: translateY(-50%);
}
.carousel__btn:hover { background: var(--ink); color: #fff; transform: translateY(-50%) scale(1.06); }
.carousel__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* the two square controls straddle the active card, as in the design */
.carousel__btn--prev { left: calc(50% - var(--card) / 2 - 19px); }
.carousel__btn--next { right: calc(50% - var(--card) / 2 - 19px); }
.proof { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(22px, 2.6vw, 32px); }
.proof p { font-size: .8rem; color: var(--ink-soft); }
.proof strong { color: var(--ink); font-weight: 600; }
.proof--hero { margin-top: clamp(26px, 3vw, 40px); }
.proof--hero p { max-width: 64ch; margin-inline: auto; text-align: center; }
/* =========================================================================
CASE STUDIES (accordion)
========================================================================= */
/* a stack of cards rather than bare hairline rows */
.acc { display: grid; gap: clamp(8px, .9vw, 12px); }
/* the case-study header is a .centered block, which has no bottom margin —
the .split it replaced did. Same top margin as .leaks / .steps / .assure. */
.acc--cases { margin-top: clamp(30px, 3.6vw, 48px); }
.acc__item {
position: relative;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: rgba(255, 255, 255, .5);
}
/* a wash of colour across the open card, so it reads as the active one */
.acc__item::before {
content: ""; position: absolute; inset: 0; z-index: 0;
border-radius: inherit; pointer-events: none;
background: radial-gradient(58% 72% at 100% 0%, rgba(124, 108, 246, .1), transparent 62%);
opacity: 0;
}
.acc__item.is-open::before { opacity: 1; }
.acc__row, .acc__panel { position: relative; z-index: 1; }
.acc__item:hover { background: rgba(255, 255, 255, .82); border-color: rgba(20, 18, 24, .16); }
.acc__item.is-open {
background: var(--surface);
border-color: transparent;
box-shadow: 0 34px 60px -46px rgba(20, 18, 24, .62), 0 2px 6px -4px rgba(20, 18, 24, .2);
}
.acc__row { margin: 0; font-size: inherit; font-weight: inherit; }
.acc__head {
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: clamp(14px, 1.8vw, 24px);
width: 100%;
padding: clamp(18px, 2.1vw, 26px) clamp(18px, 2.2vw, 30px);
text-align: left;
border-radius: inherit;
}
.acc__num {
font-size: .74rem; font-weight: 600; letter-spacing: .1em;
color: var(--ink-faint);
}
.acc__heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.acc__title {
font-size: clamp(1.05rem, 1.5vw, 1.45rem); font-weight: 500; letter-spacing: -.025em;
}
.acc__tag {
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(20, 18, 24, .03);
font-size: .68rem; font-weight: 500;
letter-spacing: .09em; text-transform: uppercase;
color: var(--ink-soft);
}
.acc__head:hover .acc__num { color: var(--violet-deep); }
.acc__item.is-open .acc__num { color: var(--violet-deep); }
.acc__item.is-open .acc__tag {
background: rgba(124, 108, 246, .11);
border-color: rgba(124, 108, 246, .2);
color: #4c41c9;
}
.acc__icon {
position: relative;
width: 34px; height: 34px; flex: 0 0 auto;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--surface);
}
.acc__icon::before, .acc__icon::after {
content: ""; position: absolute; inset: 50% 10px auto 10px;
height: 1.5px; border-radius: 2px; background: var(--ink);
transform: translateY(-50%);
}
.acc__icon::after { transform: translateY(-50%) rotate(90deg); }
.acc__item.is-open .acc__icon { background: var(--ink); border-color: var(--ink); transform: rotate(180deg); }
.acc__item.is-open .acc__icon::before,
.acc__item.is-open .acc__icon::after { background: #fff; }
.acc__item.is-open .acc__icon::after { transform: translateY(-50%) rotate(0deg); }
/* 0fr -> 1fr animates to the panel's natural height without measuring it in JS.
Gated on .js exactly like .reveal is: only JS can add .is-open, so an
ungated collapse leaves every answer clipped to 0px and unopenable when the
script is blocked or throws. Without .js the rows size naturally = all open. */
.js .acc__panel {
display: grid; grid-template-rows: 0fr;
}
.js .acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
/* Two columns inside the panel, like the rows in the source design.
Bottom spacing lives on the children: padding on .acc__inner itself would
survive the 0fr collapse and leave a gap under every closed item. */
.acc__inner {
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
gap: clamp(20px, 3.4vw, 48px);
align-items: stretch;
padding-inline: clamp(18px, 2.2vw, 30px);
}
/* copy at the top, headline number at the bottom, both flush with the photo */
.acc__text {
display: flex; flex-direction: column;
margin-bottom: clamp(22px, 2.6vw, 32px);
}
.acc__metric { margin-top: auto; }
.acc__text > p {
max-width: 44ch;
font-size: .95rem; line-height: 1.7; color: var(--ink-soft);
}
/* the outcome, lifted out of the paragraph and set as the headline number */
.acc__metric {
display: grid; grid-template-columns: auto minmax(0, 1fr);
align-items: center; gap: clamp(14px, 1.6vw, 20px);
padding-top: clamp(18px, 2vw, 24px);
border-top: 1px solid var(--line);
max-width: 44ch;
}
.acc__figure {
font-size: clamp(2.3rem, 3.4vw, 3.2rem);
font-weight: 500; line-height: .9; letter-spacing: -.05em;
font-variant-numeric: tabular-nums;
background-image: linear-gradient(168deg, var(--ink) 22%, #5b4fe0);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.acc__caption {
font-size: .82rem; line-height: 1.5; color: var(--ink-soft);
}
.acc__media {
position: relative;
overflow: hidden;
border-radius: var(--radius-card);
aspect-ratio: 2.2 / 1;
margin-bottom: clamp(22px, 2.6vw, 32px);
background: #e7e4ec;
}
.acc__media img {
width: 100%; height: 100%; object-fit: cover;
}
.acc__item.is-open .acc__media:hover img { transform: scale(1.04); }
/* a touch of depth so the photo sits in the card rather than on it */
.acc__media::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(20, 18, 24, .07);
background: linear-gradient(190deg, rgba(255, 255, 255, .14), transparent 38%);
}
/* =========================================================================
HOW IT WORKS
========================================================================= */
.centered__h2 { margin-top: 16px; }
.steps {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 1.3vw, 16px);
margin-top: clamp(30px, 3.6vw, 48px);
counter-reset: step;
}
.step {
position: relative;
padding: clamp(22px, 2.4vw, 32px);
border-radius: var(--radius-card);
background: var(--surface);
border: 1px solid var(--line);
}
.step:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -40px rgba(20, 18, 24, .7); }
.step__num {
display: grid; place-items: center;
width: 38px; height: 38px; margin-bottom: clamp(26px, 3vw, 44px);
border-radius: 50%;
background: rgba(20, 18, 24, .05);
font-size: .74rem; font-weight: 600; letter-spacing: .06em;
color: var(--ink-soft);
}
.step h3 { font-size: clamp(1.05rem, 1.3vw, 1.25rem); font-weight: 500; letter-spacing: -.02em; }
.step p { margin-top: 8px; font-size: .85rem; line-height: 1.62; color: var(--ink-soft); }
/* The ramp is dark enough that white body copy clears 4.5:1 on its LIGHTEST
pixel. The old #948df8 top stop measured 2.4-3.0:1 and failed AA outright. */
.step--accent {
background:
radial-gradient(120% 110% at 88% 6%, #5f55e4, transparent 58%),
linear-gradient(160deg, #564cd8 0%, #4f45cf 52%, #4a40c6 100%);
border-color: transparent; color: #fff;
box-shadow: 0 26px 50px -30px rgba(96, 84, 220, .9);
}
/* a light chip on this ramp cannot reach 4.5:1 for the numeral — darken it instead */
.step--accent .step__num { background: rgba(13, 13, 17, .28); color: #fff; }
.step--accent p { color: rgba(255, 255, 255, .92); }
.trust {
max-width: 72ch;
margin: clamp(26px, 3vw, 38px) auto 0;
text-align: center;
font-size: .88rem; line-height: 1.7; color: var(--ink-soft);
}
/* =========================================================================
CTA
========================================================================= */
.panel--cta {
background: #100b12;
text-align: center;
padding: clamp(46px, 7vw, 96px) clamp(20px, 4vw, 40px);
}
.panel--cta::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(70% 120% at 50% 118%, rgba(255, 62, 150, .30), transparent 62%),
radial-gradient(50% 90% at 16% 8%, rgba(124, 108, 246, .18), transparent 68%),
linear-gradient(180deg, #140d16, #0d090f);
}
.panel--cta .pill { margin-bottom: clamp(16px, 2vw, 22px); }
.cta__lede { margin: 14px auto 0; max-width: 48ch; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(22px, 2.8vw, 32px); }
/* =========================================================================
FOOTER
========================================================================= */
/* The hero's scene runs full-bleed behind the footer band; the dark panel sits
on top of it, unchanged. Padding is what lets the light show around the panel. */
.site-footer {
position: relative;
isolation: isolate;
/* even top and bottom: the scene dissolves into the page at BOTH ends, and a
fade needs room on each side to read as a fade rather than an edge */
padding-block: clamp(92px, 10.5vw, 168px);
}
.site-footer > .shell { position: relative; z-index: 1; }
.scene--footer { border-radius: 0; }
/* The band used to stop dead on a hard line where the gold met the page grey.
This dissolves the last stretch of it into --bg instead. Anchored in px from
the bottom, not in %, so the fade covers the same strip whatever the panel
above it happens to measure. z-index 4 puts it over the shafts; it stays
inside .scene's own stacking context, so it never touches the dark panel. */
.scene--footer::after {
content: "";
position: absolute; inset: 0; z-index: 4;
pointer-events: none;
/* A steep ramp, not a long wash: the gold holds full strength across most of
the strip and drops away hard over the last ~110px. Long-and-gentle removed
the hard line but left the band looking washed out. */
background:
linear-gradient(to top,
var(--bg) 0,
rgba(244, 242, 246, .94) 16px,
rgba(244, 242, 246, .62) 44px,
rgba(244, 242, 246, .26) 76px,
rgba(244, 242, 246, 0) 116px),
linear-gradient(to bottom,
var(--bg) 0,
rgba(244, 242, 246, .94) 14px,
rgba(244, 242, 246, .62) 40px,
rgba(244, 242, 246, .26) 70px,
rgba(244, 242, 246, 0) 108px);
}
.panel--footer {
background: var(--dark);
color: var(--on-dark);
padding: clamp(32px, 4.4vw, 56px) clamp(20px, 3.4vw, 46px) 0;
}
/* max-width: 700px stuffed three columns into the left 57% of a 1218px panel and
left 518px of dead space beside them. Spread them instead. */
.footer__cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, max-content));
justify-content: space-between;
align-items: start;
gap: clamp(20px, 3vw, 40px);
}
.footer__col h2 {
font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
/* .38 measured 3.57:1 on --dark and failed AA; --on-dark-soft is 7.16:1 */
color: var(--on-dark-soft); margin-bottom: 14px;
}
.footer__col li + li { margin-top: 12px; }
.footer__col a {
font-size: .85rem; color: rgba(255, 255, 255, .82);
}
.footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__bar {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 12px;
margin-top: clamp(30px, 4vw, 52px);
padding-top: 18px;
border-top: 1px solid var(--dark-line);
font-size: .74rem; color: rgba(255, 255, 255, .5);
}
.footer__top:hover { color: #fff; }
.wordmark {
position: relative;
margin-top: clamp(18px, 2.4vw, 30px);
text-align: center;
overflow: hidden;
}
.wordmark__glow {
position: absolute; left: 50%; bottom: -34%;
width: min(96%, 1000px); height: 150%;
transform: translateX(-50%);
background: radial-gradient(58% 62% at 50% 74%, rgba(255, 63, 164, .95), rgba(255, 63, 164, .32) 42%, rgba(255, 63, 164, 0) 72%);
filter: blur(2px);
pointer-events: none;
}
.wordmark__text {
position: relative;
display: block;
/* Fallback: a viewport-based size cannot track the panel exactly (the shell caps
at 1400px while vw keeps growing, so the panel:viewport ratio falls from .89 at
1366 to .65 at 1920), so this is tuned to the WIDEST case and never spills.
Binding constraint is 1920px, where the panel takes at most 15.36vw. */
font-size: clamp(3rem, 15vw, 18rem);
font-weight: 800;
letter-spacing: -.045em;
line-height: 1;
color: #fff;
/* trim the descender space so the baseline lands on the panel edge */
margin-bottom: -.105em;
}
/* Preferred: size the wordmark off the panel itself, so it fills edge to edge at
every width. 1cqw = 1% of the footer panel's content box. */
@supports (container-type: inline-size) {
.panel--footer { container-type: inline-size; }
/* MEASURE THE WORD, NEVER CARRY THE OLD NUMBER OVER. The factor is 100/em-width,
so it belongs to the specific string: "Ballpitt" 3.05em -> 33.2cqw,
"LeaksAI" 3.40em -> 29.4cqw, "Runeflake" 4.246em -> 23.5cqw (measured at
1920/1366/430/390/360/320, constant to 3dp; letter-spacing -.045em included).
The 2026-08-24 rename rewrote this comment's brand name by search-and-replace
but left 29.4cqw in place, which rendered the wordmark at 124.8% of the panel:
clipped left and right by .wordmark's overflow:hidden, and the oversized line
box pushed the whole footer taller. Re-measure with a Range around the text
contents gated on document.fonts.ready - the block element's own rect is
always 100% and tells you nothing. */
.wordmark__text { font-size: 23.5cqw; }
}
/* =========================================================================
MOTION
========================================================================= */
/* Reveal-on-scroll was removed with the rest of the motion: .reveal is now
an inert hook left on the markup, and content simply renders. This also
retires the old failure mode where a broken main.js left the page blank. */
/* =========================================================================
RESPONSIVE
========================================================================= */
/* four-up card rows pair off before the main breakpoint — at ~1024 they are cramped */
@media (max-width: 1120px) {
.leaks, .steps.steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the cards go 2-up here, so the tall min-height has to relax here too —
at ~1024 it left 250px boxes holding ~190px of content */
.leak { min-height: 0; }
}
@media (max-width: 1000px) {
.cards { grid-template-columns: 1fr; }
.card { min-height: 0; }
.card--violet { margin-block: 0; }
.stat__value { margin-bottom: 14px; }
.tabs__panel { grid-template-columns: 1fr; min-height: 0; }
.tabs__media { aspect-ratio: 16 / 10; }
.steps { grid-template-columns: 1fr; }
/* two classes, not one: .steps--four .step__num sets this at (0,2,0) and a
media query adds no specificity, so the single-class form never applied */
.steps--four .step__num { margin-bottom: 20px; }
.acc__inner { grid-template-columns: 1fr; gap: 20px; }
.acc__text { margin-bottom: 0; }
.acc__text > p, .acc__metric { max-width: none; }
.leak__body { padding-top: 26px; }
}
@media (max-width: 860px) {
.burger { display: block; }
.nav {
position: absolute; top: calc(100% + 6px); left: clamp(16px, 4vw, 28px); right: clamp(16px, 4vw, 28px);
flex-direction: column; align-items: stretch; gap: 2px;
padding: 14px;
border-radius: 18px;
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--line);
box-shadow: 0 30px 60px -34px rgba(20, 18, 24, .7);
opacity: 0; visibility: hidden; transform: translateY(-8px);
/* The panel is absolutely positioned inside a sticky header, so it is pinned
to the viewport and page scrolling can never reveal its overflow. Without
this, landscape phones and 200% zoom cut off the "Book a free call" CTA
entirely. No-op in portrait, where the content is shorter than the cap. */
max-height: calc(100dvh - 72px);
overflow-y: auto;
overscroll-behavior: contain;
}
.nav.is-open { opacity: 1; visibility: visible; transform: none; }
.nav > a:not(.btn) { padding: 11px 8px; font-size: .95rem; border-radius: 10px; }
.nav > a:not(.btn):hover { background: rgba(20, 18, 24, .05); }
.nav__cta { margin: 8px 0 0; }
/* the dropdown expands in place inside the burger panel */
.nav__group { display: block; }
.nav__trigger {
width: 100%; justify-content: space-between;
padding: 11px 8px; border-radius: 10px; font-size: .95rem;
}
.nav__trigger:hover { background: rgba(20, 18, 24, .05); }
.nav__menu {
position: static; transform: none; width: auto;
margin: 2px 0 6px 10px; padding: 2px 0 2px 12px;
border: 0; border-left: 1px solid var(--line); border-radius: 0;
background: none; box-shadow: none;
backdrop-filter: none; -webkit-backdrop-filter: none;
opacity: 1; visibility: visible; pointer-events: auto;
display: none;
}
/* the open-state rule below is two classes deep, so the centring transform has to
be undone at the same specificity or the panel sits half a width off-screen */
.nav__group.is-open .nav__menu { display: grid; transform: none; }
.nav__menu a { padding: 9px 10px; }
.site-header { position: sticky; }
.header-inner { position: relative; }
.h2--ruled::before, .h2--ruled::after { display: none; }
/* one card in view; the controls follow it because they key off --card */
.carousel { --card: min(78vw, 340px); }
.footer__bar { justify-content: flex-start; }
}
@media (max-width: 560px) {
.footer__cols { grid-template-columns: 1fr 1fr; }
.hero__actions .btn, .cta__actions .btn { flex: 1 1 auto; }
/* Every reading surface here is clamp(small, Nvw, large): at phone widths the
vw term collapses, so the smallest device got the smallest type. Backwards. */
.leak__body p, .step p, .assure li,
.acc--faq .acc__inner > p, .lede, .hero__lede { font-size: 1rem; }
.footer__col a { font-size: .95rem; }
/* hit boxes grown without moving the text off its baseline grid */
.footer__col a, .footer__top { display: inline-block; padding-block: 7px; }
.footer__col li + li { margin-top: 2px; }
.proof { flex-direction: column; gap: 8px; text-align: center; }
.tabs__bar { display: flex; width: 100%; }
.tabs__tab { flex: 1 1 0; padding: 10px 12px; font-size: .78rem; }
.acc__head { gap: 12px; }
.acc__media { aspect-ratio: 3 / 2; }
.leaks, .assure, .steps.steps--four { grid-template-columns: 1fr; }
}
/* =========================================================================
UX AUDIT PASS — 2026-08-12
Progressive-enhancement fallbacks, density and emphasis.
No copy was changed anywhere in this pass.
========================================================================= */
/* ---------- no-JS / failed-JS fallbacks ----------
The inline head script sets .js before first paint, so CSS that hides things
must be gated on it. These rules cover the case where scripting is off
entirely: the burger can never open, so the panel must not be a panel. */
html:not(.js) .burger { display: none; }
html:not(.js) .nav {
position: static; flex-direction: row; flex-wrap: wrap;
opacity: 1; visibility: visible; transform: none;
max-height: none; overflow: visible;
padding: 0; border: 0; background: none; box-shadow: none;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:not(.js) .nav__menu { display: grid; position: static; transform: none;
opacity: 1; visibility: visible; pointer-events: auto; }
/* ---------- dropdown: hover bridge ----------
16px of dead space sat between the trigger and its menu. Crossing it slowly
closed the menu, and a closed menu is pointer-events:none, so it could not be
re-entered — the pointer had to travel all the way back to the trigger. */
.nav__group.is-open::after {
content: ""; position: absolute; top: 100%; left: 50%;
width: min(340px, 82vw); height: 22px;
transform: translateX(-50%);
}
/* ---------- mobile nav backdrop ----------
Gives the dismissing tap a target of its own, so it no longer lands on
whatever link happens to sit under the panel. */
.nav__backdrop {
position: fixed; inset: 0; z-index: 40;
background: rgba(13, 13, 17, .34);
opacity: 0; visibility: hidden;
}
.nav__backdrop.is-on { opacity: 1; visibility: visible; }
body.is-navOpen { overflow: hidden; }
@media (min-width: 861px) {
.nav__backdrop { display: none; }
.nav__group.is-open::after { display: block; }
}
@media (max-width: 860px) { .nav__group.is-open::after { display: none; } }
/* ---------- paint cost ----------
backdrop-filter on every .pill meant four guaranteed-invisible blur passes
per page (blurring a flat background), plus the header's, during scroll. */
.pill { backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero .pill, .pill--onDark {
backdrop-filter: blur(10px) saturate(1.4);
-webkit-backdrop-filter: blur(10px) saturate(1.4);
}
/* promoted the wrong element: .btn is hover-only, .hero__aura is the one JS
mutates every frame */
.btn { will-change: auto; }
.hero__aura { will-change: transform; }
/* ---------- FAQ: eye travel ----------
Full-shell rows put the +/- control up to 1072px away from its label. The
component was built for three elements per row; the FAQ variant ships one. */
.acc--faq { max-width: 860px; margin-inline: auto; }
/* all four rows ship closed, so the section rendered as four hairline outlines */
.acc--faq .acc__item { background: var(--surface); }
/* ---------- assurance rows ---------- */
.assure__tick { margin-top: -3px; }
/* the money-back guarantee is the strongest asset on the page and rendered at
the exact weight of "it fits the tools you already have" */
.assure li:last-child {
background: var(--dark); color: var(--on-dark);
border-color: transparent;
}
.assure li:last-child .assure__tick {
background: rgba(255, 255, 255, .14); color: #fff;
}
.assure li:last-child:hover { border-color: transparent; }
/* =========================================================================
SERVICE-PAGE DENSITY (.page-service only — the homepage keeps its rhythm)
========================================================================= */
/* 207px of empty flat grey sat at three of the four section boundaries; total
section padding was 870px, a fifth of the page. */
.page-service { --pad-section: clamp(48px, 5.4vw, 80px); }
/* only 37px separated the dark CTA panel from the dark footer panel, so the
closing ask dissolved into the footer instead of reading as the moment */
.page-service .site-footer { padding-block: clamp(92px, 10.5vw, 168px); }
/* The card's top slot held a 34px chip and the bottom held 13px copy, with 98px
of empty colour between them — the push-to-bottom idiom borrowed from .stat,
where the payload below it is a 4rem figure. Give the numeral the weight. */
.page-service .leak__num {
width: auto; height: auto; place-items: start;
background: none; border-radius: 0;
font-size: clamp(2.2rem, 3.2vw, 3.4rem); font-weight: 500;
line-height: .9; letter-spacing: -.05em;
color: rgba(27, 24, 32, .3);
}
.page-service .leak { min-height: clamp(210px, 18vw, 250px); }
.page-service .leak__body { padding-top: clamp(16px, 1.8vw, 24px); }
/* a second, non-colour differentiator: the four pastels are equal in luminance,
so hue alone flattened the cards to swatches */
@media (min-width: 1121px) {
.page-service .leaks .leak:nth-child(2n) { margin-top: clamp(14px, 1.8vw, 24px); }
}
/* the hero title was only 1.27x its own section headings, and lighter than them;
on the homepage that ratio is 1.60x */
.page-service .hero--page .hero__title { font-size: clamp(2.1rem, 5.2vw, 4.5rem); }
/* The hard
in the h1 leaves "you," orphaned on its own line once the clamp
floor wins. This MUST sit after the rule above: both are (0,3,0), a media
query adds no specificity, so source order is the only thing deciding it —
written earlier in the responsive section it was silently a no-op. */
@media (max-width: 480px) {
.page-service .hero--page .hero__title { font-size: clamp(1.75rem, 8vw, 2.1rem); }
}
/* =========================================================================
CTA ENQUIRY FORM (added 2026-08-12)
Before this, all three CTAs pointed at #contact and the one INSIDE #contact
pointed at itself, so the page had no way to convert.
========================================================================= */
.cta__form {
width: min(560px, 100%);
margin: clamp(26px, 3.2vw, 38px) auto 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
text-align: left;
}
.field--wide, .cta__form .cta__actions, .cta__status { grid-column: 1 / -1; }
/* off-screen rather than display:none — a bot reading the DOM still sees it */
.cta__hp {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field label {
font-size: .78rem; font-weight: 500; letter-spacing: .04em;
color: rgba(255, 255, 255, .78);
}
.field__opt {
font-weight: 400; letter-spacing: 0; text-transform: none;
color: var(--on-dark-soft);
}
.field input, .field textarea {
width: 100%;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .06);
color: #fff;
font: inherit; font-size: 1rem; /* 16px: anything smaller zooms iOS on focus */
line-height: 1.5;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .4); }
.field input:hover, .field textarea:hover { border-color: rgba(255, 255, 255, .3); }
.field input:focus, .field textarea:focus {
outline: none;
border-color: rgba(255, 255, 255, .6);
background: rgba(255, 255, 255, .1);
}
/* the global ring is violet-on-dark at 3.58:1; white is far clearer here */
.field input:focus-visible, .field textarea:focus-visible {
outline: 2px solid #fff; outline-offset: 2px;
}
.field.is-bad input, .field.is-bad textarea { border-color: #ff8fbe; }
.cta__form .cta__actions { margin-top: 4px; }
.cta__form button[type="submit"] { width: 100%; padding-block: 15px; }
.cta__form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }
.cta__status { margin: 0; font-size: .9rem; min-height: 0; }
.cta__status:empty { display: none; }
.cta__status--ok { color: #c9f7d8; }
.cta__status--bad { color: #ffc2d8; }
/* the whole panel is replaced by the confirmation once JS submits it */
.cta__done { display: grid; gap: 10px; justify-items: center; text-align: center;
margin-top: clamp(26px, 3.2vw, 38px); }
.cta__done p { color: rgba(255, 255, 255, .82); font-size: 1rem; }
@media (max-width: 560px) {
.cta__form { grid-template-columns: 1fr; }
}
/* The form now has a panel to itself on /runeflake/contact/ rather than sitting
under a heading and lede inside the service pages' CTA panel. The panel is
pulled in to the form's own measure — left at full shell width it framed a
560px form with ~375px of dead dark either side. */
.cta__form--page { margin-block: 0; width: 100%; }
.panel--cta:has(> .cta__form--page) {
max-width: 720px;
margin-inline: auto;
padding: clamp(28px, 3.6vw, 46px) clamp(20px, 3vw, 44px);
}
/* :has() is well supported now, but the fallback keeps the panel from swallowing
the form on anything that does not understand it */
@supports not selector(:has(*)) {
.contact-panel { max-width: 720px; margin-inline: auto; }
}
/* =========================================================================
RESPONSIVE PASS — 2026-08-12
No overflow or clipping existed at any width from 320 to 1024; these fix
layouts that were technically fine but wasted the narrow viewport.
========================================================================= */
/* The hard
in the homepage h1 stranded "and hours" on a line of its own at
phone widths. Dropping the break lets the words rebalance across three even
lines instead. Scoped to the homepage hero (.hero without .hero--page): the
service-page h1s are shrunk at <=480 instead and already sit on two lines, so
removing their break would push them back to three.
The markup carries a space before that
. Without it, hiding the break
welds "hours" and "you're" into one word — and whitespace before a line break
is collapsed, so the space is invisible while the break is still shown. */
.hero__title { text-wrap: balance; }
@media (max-width: 560px) {
.hero:not(.hero--page) .hero__title br { display: none; }
}
/* Three short stat cards collapsed to a single full-width column at 1000px, so
each became a ~640x200 letterbox holding a left-aligned figure with a large
void beside it. They stay three-up until they genuinely stop fitting. */
@media (min-width: 641px) and (max-width: 1000px) {
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { min-height: clamp(190px, 26vw, 240px); }
}
/* Below that the card goes wide-and-short, so the figure sits beside its icon
instead of under it with the width unused. */
@media (max-width: 640px) {
.card.stat {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 16px; row-gap: 10px;
}
.stat .stat__icon { grid-column: 1; grid-row: 1; }
.stat .stat__value { grid-column: 2; grid-row: 1; margin-top: 0; margin-bottom: 0; }
.stat .stat__rule { grid-column: 1 / -1; margin: 0; }
.stat .stat__label { grid-column: 1 / -1; }
}
/* =========================================================================
COOKIE NOTICE (assets/js/consent.js)
Bottom-anchored and non-blocking — the site sets no cookies, so nothing is
withheld until the reader answers and there is no scrim.
========================================================================= */
.cookie {
position: fixed;
left: clamp(12px, 3vw, 22px);
right: clamp(12px, 3vw, 22px);
bottom: clamp(12px, 3vw, 22px);
z-index: 90;
}
.cookie__inner {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap;
gap: clamp(14px, 2vw, 28px);
max-width: var(--shell);
margin-inline: auto;
padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.2vw, 26px);
border-radius: var(--radius-card);
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(18px) saturate(1.5);
-webkit-backdrop-filter: blur(18px) saturate(1.5);
border: 1px solid var(--line);
box-shadow: 0 30px 60px -34px rgba(20, 18, 24, .7), 0 2px 8px -5px rgba(20, 18, 24, .3);
}
.cookie__text { flex: 1 1 340px; min-width: 0; }
.cookie__title {
font-size: .72rem; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 6px;
}
.cookie__text p:not(.cookie__title) {
font-size: .88rem; line-height: 1.6; color: #3b3742;
}
.cookie__text a {
color: var(--violet-deep);
text-decoration: underline; text-underline-offset: 3px;
}
.cookie__text a:hover { color: var(--ink); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.cookie__decline {
background: transparent;
color: var(--ink-soft);
border-color: var(--line);
}
.cookie__decline:hover { color: var(--ink); border-color: rgba(20, 18, 24, .24); }
/* Keep the notice clear of the back-to-top row while it is on screen. */
.has-cookieNotice .site-footer { padding-bottom: clamp(96px, 14vw, 132px); }
@media (max-width: 620px) {
.cookie__inner { padding: 16px; }
.cookie__actions { width: 100%; }
.cookie__actions .btn { flex: 1 1 0; }
}
/* 44px targets for the notice buttons on touch screens — btn--sm lands at 40 */
@media (max-width: 620px) {
.cookie__actions .btn { padding-block: 12px; }
}
/* =========================================================================
WORKED EXAMPLE — before / after (AI Automations page)
Two columns of timestamped moments. "After" takes the dark surface so the
contrast between the two is the first thing read, not the last.
========================================================================= */
.wex {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 1.3vw, 16px);
margin-top: clamp(30px, 3.6vw, 48px);
align-items: stretch;
}
.wex__col {
display: flex; flex-direction: column;
padding: clamp(20px, 2.2vw, 30px);
border-radius: var(--radius-card);
background: var(--surface);
border: 1px solid var(--line);
}
.wex__col--after {
background: var(--dark);
border-color: transparent;
color: var(--on-dark);
}
.wex__label {
font-size: .72rem; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: clamp(16px, 1.8vw, 22px);
}
.wex__col--after .wex__label { color: var(--violet-lift); }
.wex__steps { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.wex__steps li {
display: grid;
grid-template-columns: minmax(0, 84px) minmax(0, 1fr);
gap: clamp(12px, 1.4vw, 18px);
align-items: baseline;
}
.wex__time {
font-size: .78rem; font-weight: 500;
font-variant-numeric: tabular-nums;
/* not --ink-faint: it measures 3:1 on the white card, and the times are
content here rather than decoration, so they have to clear AA */
color: var(--ink-soft);
}
.wex__col--after .wex__time { color: var(--on-dark-soft); }
.wex__steps p { font-size: .92rem; line-height: 1.6; color: #3b3742; }
.wex__col--after .wex__steps p { color: rgba(255, 255, 255, .88); }
.wex__foot {
margin-top: auto;
padding-top: clamp(18px, 2vw, 24px);
border-top: 1px solid var(--line);
font-size: .92rem; font-weight: 500; color: var(--ink);
}
.wex__col--after .wex__foot {
border-top-color: var(--dark-line);
color: #fff;
}
/* the rule has to clear the last row, not hug it */
.wex__steps + .wex__foot { margin-top: clamp(20px, 2.4vw, 28px); }
.wex__out {
max-width: 62ch;
margin: clamp(24px, 2.8vw, 34px) auto 0;
text-align: center;
font-size: clamp(.95rem, 1.15vw, 1.08rem);
line-height: 1.65;
color: var(--ink-soft);
}
@media (max-width: 760px) {
.wex { grid-template-columns: 1fr; }
/* a fixed time column wastes a third of a phone screen on "6:10pm" */
.wex__steps li { grid-template-columns: minmax(0, 68px) minmax(0, 1fr); }
}
/* Matches the rest of the site's phone type size. It has to live HERE, after
the .wex__steps p base rule: the same declaration added to the earlier
max-width:560px block was silently dead, because both are (0,1,1) and this
block is later in the file. */
@media (max-width: 560px) {
.wex__steps p { font-size: 1rem; }
}
@media (max-width: 420px) {
.wex__steps li { grid-template-columns: 1fr; gap: 2px; }
}
/* =========================================================================
HERO LOAD-IN
The one piece of motion on the site, by request. It plays once, on load.
Two deliberate choices: it is gated on `no-preference`, so anyone who has
asked their OS for less motion gets the hero static rather than a shortened
version of it; and the keyframe declares only a FROM state with `backwards`
fill, so the settled hero IS the element's normal styling. If the animation
never runs — old browser, animations disabled, stylesheet half-applied — the
content is simply already there, never stuck at opacity 0.
========================================================================= */
/* The shafts drift slowly across both scenes, so the light is alive rather than
a still image. Only the RAYS move — never .scene itself, because the edge fade
lives on .scene::after and must stay pinned to the band's edges. The layer is
inset well past its box (-20% / -18%), so it can travel without exposing a
seam. Reduced motion gets the still version. */
@keyframes sceneDrift {
from { transform: translate3d(-2.6%, -1.2%, 0) rotate(-.35deg); }
to { transform: translate3d(2.6%, 1.2%, 0) rotate(.35deg); }
}
@media (prefers-reduced-motion: no-preference) {
.hero__rays, .scene__rays {
animation: sceneDrift 24s ease-in-out infinite alternate;
}
}
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes heroBgIn { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
/* the scene washes in behind the copy */
.hero__bg { animation: heroBgIn .8s ease-out backwards; }
.hero__inner > * {
animation: heroIn .62s cubic-bezier(.22, .61, .36, 1) backwards;
}
/* pill, heading, lede, buttons, proof line — in that order */
.hero__inner > *:nth-child(1) { animation-delay: .08s; }
.hero__inner > *:nth-child(2) { animation-delay: .16s; }
.hero__inner > *:nth-child(3) { animation-delay: .24s; }
.hero__inner > *:nth-child(4) { animation-delay: .32s; }
.hero__inner > *:nth-child(5) { animation-delay: .40s; }
}
/* =========================================================================
DRAWN UNDERLINE — the hero's opening words
A stroke that draws itself under "Win back" once the headline has landed.
The words stay real text: only a positioned