/* ==========================================================================
Kilfilum Ltd - kilfilum.ie
Hand-written stylesheet. No framework, no build step.
Deploy: upload everything in this folder to Hostinger public_html.
DESIGN SYSTEM
-------------
Theme : light-first, with dark ink bookends (hero + footer).
Sections never invert mid-page. Section tints stay in theme.
Palette : deep ink navy base, neutral bone paper, ONE accent (ember).
Type : Bricolage Grotesque (display) / Archivo (body) / JetBrains Mono (labels).
All three self-hosted in /assets/fonts. No Google Fonts .
Radius : 0. One radius for the entire site. Everything is square.
Motion : entrance-only. transform / opacity / clip-path only, never
layout. Nothing loops. Nothing is driven by a scroll listener:
scroll-linked motion uses CSS scroll-driven animations, which
the browser runs off the main thread. Deliberately NOT disabled
under prefers-reduced-motion (client instruction); every
animation ends in its resting state, so a browser that drops
the animation still shows the finished page.
BREAKPOINT MAP
--------------
1200 wide desktop -> compact desktop
980 two-column splits stack
900 strips / metrics / footer -> two columns, bento -> two cells
760 navigation becomes a panel, hero and buttons go full width
640 everything single column
========================================================================== */
/* 1. FONTS -----------------------------------------------------------------
@font-face blocks live in css/fonts.css so this file stays readable. */
/* 2. TOKENS ---------------------------------------------------------------- */
:root {
/* Ink family */
--ink: #0C1720;
--ink-2: #132330;
--ink-3: #1B2E3C;
--ink-line: rgba(255, 255, 255, 0.14);
/* Paper family (neutral, deliberately not warm-cream) */
--paper: #FAFAF8;
--bone: #EFEFEC;
--bone-2: #E4E5E2;
--bone-line: #D3D5D0;
/* Text */
--text: #101C25;
--muted: #55626B;
--muted-dark: #9BA7AE;
/* Single accent */
--ember: #C0522B;
--ember-text: #9C4220;
--ember-soft: rgba(192, 82, 43, 0.10);
/* Type scale */
--fs-display: clamp(2.5rem, 6.2vw, 5.35rem);
--fs-h1: clamp(2rem, 4.2vw, 3.4rem);
--fs-h2: clamp(1.55rem, 2.5vw, 2.3rem);
--fs-h3: clamp(1.1rem, 1.4vw, 1.3rem);
--fs-body: clamp(1rem, 1.05vw, 1.075rem);
--fs-small: 0.875rem;
--fs-mono: 0.6875rem;
/* Space */
--gutter: clamp(1.5rem, 4.5vw, 3.5rem);
--sec-y: clamp(4.25rem, 9vw, 8.5rem);
--shell: 1400px;
--measure: 65ch;
--nav-h: 68px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* 3. RESET ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
body {
background: var(--bone);
color: var(--text);
font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--fs-body);
line-height: 1.62;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, picture, iframe { display: block; max-width: 100%; }
/* `display:contents` on keeps the inner ![]()
as the real layout
child, so absolutely-positioned full-bleed photos size correctly. */
picture { display: contents; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ember); color: #fff; }
/* Focus visibility: never removed, just restyled. */
:focus-visible {
outline: 2px solid var(--ember);
outline-offset: 3px;
}
/* 4. TYPE ------------------------------------------------------------------ */
h1, h2, h3, h4 {
font-family: "Bricolage Grotesque", "Archivo", sans-serif;
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.025em;
text-wrap: balance;
margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.06; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.015em; }
p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 1em; }
/* Mono label. Used sparingly: max one eyebrow per three sections. */
.mono {
font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: 0.17em;
text-transform: uppercase;
line-height: 1.4;
}
.eyebrow { color: var(--ember-text); }
.on-dark .eyebrow, .eyebrow--light { color: #E1A184; }
.lede { font-size: clamp(1.075rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--muted); }
.on-dark .lede { color: var(--muted-dark); }
.muted { color: var(--muted); }
.on-dark .muted { color: var(--muted-dark); }
.accent { color: var(--ember-text); }
.on-dark .accent { color: #E1A184; }
/* 5. LAYOUT ---------------------------------------------------------------- */
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
/* max() keeps the gutter intact on desktop and clears the notch / home bar
on phones held in landscape. */
padding-inline: max(var(--gutter), env(safe-area-inset-left))
max(var(--gutter), env(safe-area-inset-right));
}
.section { padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.bg-paper { background: var(--paper); }
.bg-bone2 { background: var(--bone-2); }
.on-dark { background: var(--ink); color: var(--bone); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.hairline { border-top: 1px solid var(--bone-line); }
.on-dark .hairline { border-top-color: var(--ink-line); }
/* Screen-reader only */
.sr {
position: absolute; width: 1px; height: 1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Skip link */
.skip {
position: absolute; top: -100px; left: var(--gutter); z-index: 200;
background: var(--ember); color: #fff; padding: 0.7rem 1.1rem;
text-decoration: none; transition: top 0.25s var(--ease);
}
.skip:focus { top: 0.75rem; }
/* 6. HEADER / NAV ---------------------------------------------------------- */
.nav {
position: fixed; inset: 0 0 auto 0; z-index: 100;
height: var(--nav-h);
display: flex; align-items: center;
transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
backdrop-filter 0.4s var(--ease);
border-bottom: 1px solid transparent;
}
.nav__inner {
width: 100%; max-width: var(--shell); margin-inline: auto;
padding-inline: max(var(--gutter), env(safe-area-inset-left))
max(var(--gutter), env(safe-area-inset-right));
display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}
/* Nav is transparent over the photographic hero, solid once scrolled past it. */
.nav.is-stuck {
background: rgba(12, 23, 32, 0.92);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom-color: var(--ink-line);
}
/* Reading progress hairline. Pure CSS scroll-driven animation: no scroll
listener, no rAF loop, no main-thread work of any kind. Browsers without
scroll-driven animation support simply never draw the bar. */
@supports (animation-timeline: scroll()) {
.nav::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--ember);
transform: scaleX(0); transform-origin: 0 50%;
animation: navProgress linear both;
animation-timeline: scroll(root block);
}
@keyframes navProgress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
}
.brand {
display: inline-flex; align-items: center; gap: 0.7rem;
text-decoration: none; margin-right: auto;
color: #fff;
}
.brand__mark {
width: 30px; height: 30px; flex: none;
background: var(--ember); color: #fff;
display: grid; place-items: center;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800; font-size: 1.05rem; letter-spacing: -0.04em;
line-height: 1;
}
.brand__word {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1;
}
.brand__sub {
display: block; margin-top: 3px;
font-family: "JetBrains Mono", monospace; font-size: 0.5625rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.56);
}
.nav.is-stuck .brand__sub { color: var(--muted-dark); }
.nav__links {
display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem);
list-style: none; padding: 0;
}
.nav__link {
text-decoration: none; color: rgba(255, 255, 255, 0.82);
font-size: 0.9375rem; font-weight: 500;
padding-block: 0.35rem; position: relative;
white-space: nowrap;
}
.nav__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform 0.4s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link:hover { color: #fff; }
.nav.is-stuck .nav__link { color: rgba(255, 255, 255, 0.78); }
.nav__toggle {
display: none; background: none; border: 0; cursor: pointer;
padding: 0.5rem; margin-left: 0.5rem;
}
.nav__bars { display: block; width: 22px; height: 12px; position: relative; }
.nav__bars span {
position: absolute; left: 0; right: 0; height: 1.5px;
background: #fff; transition: transform 0.35s var(--ease), opacity 0.2s linear;
}
.nav__bars span:nth-child(1) { top: 0; }
.nav__bars span:nth-child(2) { bottom: 0; }
.nav__toggle[aria-expanded="true"] .nav__bars span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars span:nth-child(2) { transform: translateY(-5.25px) rotate(-45deg); }
/* 7. BUTTONS ---------------------------------------------------------------
Shape lock: square, radius 0, like everything else on the site. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
padding: 0.95rem 1.5rem;
background: var(--ember); color: #fff;
border: 1px solid var(--ember);
text-decoration: none; cursor: pointer;
font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.005em;
white-space: nowrap; /* CTA labels never wrap */
transition: background 0.28s var(--ease), border-color 0.28s var(--ease),
transform 0.28s var(--ease);
}
.btn:hover { background: #A8411F; border-color: #A8411F; transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--ghost {
background: transparent; color: #fff;
border-color: rgba(255, 255, 255, 0.42);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.7); }
.btn--dark {
background: var(--ink); border-color: var(--ink); color: #fff;
}
.btn--dark:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--sm { padding: 0.7rem 1.15rem; font-size: 0.875rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow, .link:hover .arrow { transform: translateX(4px); }
/* Quiet inline link with a rule under it. */
.link {
display: inline-flex; align-items: center; gap: 0.45rem;
color: var(--ember-text); font-weight: 600; text-decoration: none;
border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.on-dark .link { color: #E1A184; }
.link:hover { color: var(--text); }
.on-dark .link:hover { color: #fff; }
/* 8. HERO ------------------------------------------------------------------ */
.hero {
position: relative;
min-height: clamp(560px, 92dvh, 880px);
display: flex; align-items: flex-end;
background: var(--ink);
overflow: hidden;
isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%;
/* One slow push-in, once, then it stops. Motivated: it settles the eye on the
frame instead of leaving a dead photograph behind the headline. */
animation: heroDrift 22s var(--ease) forwards;
}
@keyframes heroDrift {
from { transform: scale(1.06); }
to { transform: scale(1); }
}
/* Two-layer scrim: horizontal for the headline side, vertical to seat the
copy on the image and to hide the silo decals in the source photograph. */
.hero__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(100deg, rgba(8,15,21,0.94) 0%, rgba(8,15,21,0.82) 30%,
rgba(8,15,21,0.46) 62%, rgba(8,15,21,0.62) 100%),
linear-gradient(to top, rgba(8,15,21,0.92) 0%, rgba(8,15,21,0.12) 46%, rgba(8,15,21,0.30) 100%);
}
.hero__inner {
position: relative; z-index: 2;
width: 100%; max-width: var(--shell); margin-inline: auto;
padding-inline: max(var(--gutter), env(safe-area-inset-left))
max(var(--gutter), env(safe-area-inset-right));
/* Hero top padding stays capped; the copy seats to the bottom, not mid-viewport. */
padding-top: calc(var(--nav-h) + 4rem);
padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.hero__stack { max-width: 44ch; color: var(--bone); }
.hero__eyebrow { color: #E1A184; margin-bottom: 1.5rem; }
.hero h1 {
font-size: var(--fs-display);
color: #fff;
letter-spacing: -0.035em;
margin-bottom: 1.35rem;
text-wrap: balance;
}
.hero__sub {
font-size: clamp(1.02rem, 1.35vw, 1.2rem);
color: rgba(255, 255, 255, 0.86);
max-width: 46ch;
margin-bottom: 2rem;
}
.hero__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; flex-wrap: wrap;
margin-top: clamp(2rem, 5vw, 3.5rem);
padding-top: 1.5rem;
border-top: 1px solid var(--ink-line);
}
.hero__scroll {
color: rgba(255, 255, 255, 0.5);
font-family: "JetBrains Mono", monospace;
font-size: var(--fs-mono); letter-spacing: 0.17em; text-transform: uppercase;
}
.hero__badges { display: flex; gap: clamp(1.25rem, 4vw, 3rem); flex-wrap: wrap; }
.hero__badge {
font-family: "JetBrains Mono", monospace; font-size: var(--fs-mono);
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
/* 8.1 HERO ENTRANCE -------------------------------------------------------
A one-shot stagger on load. It lives in CSS rather than JS so it can never
be left half-applied by a script that fails, and it ends in the resting
state, so a browser that ignores the animation still shows the full hero. */
.hero__eyebrow, .hero h1, .hero__sub, .hero .btn-row, .hero__foot {
animation: heroRise 0.95s var(--ease) both;
}
.hero__eyebrow { animation-delay: 0.10s; }
.hero h1 { animation-delay: 0.22s; animation-name: heroHeadline; }
.hero__sub { animation-delay: 0.46s; }
.hero .btn-row { animation-delay: 0.58s; }
.hero__foot { animation-delay: 0.74s; }
@keyframes heroRise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
/* The headline uncovers from its top edge rather than fading, which reads as a
printed line being revealed and gives the hero its weight. */
@keyframes heroHeadline {
from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(0.3em); }
to { opacity: 1; clip-path: inset(0 0 -0.25em 0); transform: none; }
}
/* 9. STAT STRIP -----------------------------------------------------------
Hairlines only. No cards. */
.strip { background: var(--paper); border-bottom: 1px solid var(--bone-line); }
.strip__grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.strip__cell {
padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem);
border-left: 1px solid var(--bone-line);
}
.strip__cell:first-child { border-left: 0; padding-left: 0; }
.strip__val {
font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1;
letter-spacing: -0.03em; color: var(--ink);
}
.strip__val small { font-size: 0.5em; font-weight: 600; color: var(--muted); }
.strip__label { margin-top: 0.6rem; color: var(--muted); }
/* 10. SPLIT ---------------------------------------------------------------- */
.split {
display: grid; grid-template-columns: repeat(12, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.split__text { grid-column: 1 / span 5; }
.split__text--wide { grid-column: 1 / span 6; }
.split__media { grid-column: 7 / span 6; }
.split__media--lead { grid-column: 1 / span 6; }
.split__text--trail { grid-column: 7 / span 6; }
.split--flip .split__text { grid-column: 7 / span 5; }
.split--flip .split__media { grid-column: 1 / span 6; }
/* Offsets give the composition asymmetry instead of centred symmetry. */
.offset-up { margin-top: clamp(-4rem, -4vw, -1rem); }
.offset-down { margin-top: clamp(1.5rem, 4vw, 4rem); }
.frame { position: relative; overflow: hidden; background: var(--bone-2); }
.frame img { width: 100%; transition: transform 0.8s var(--ease); }
.frame--tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.frame--wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.frame--sq img { aspect-ratio: 1 / 1; object-fit: cover; }
.frame__cap {
margin-top: 0.9rem; color: var(--muted);
font-family: "JetBrains Mono", monospace;
font-size: var(--fs-mono); letter-spacing: 0.11em; text-transform: uppercase;
}
/* 11. SECTION HEAD --------------------------------------------------------- */
.head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head h2 { margin-top: 1rem; }
.head p { margin-top: 1.15rem; }
/* 12. PROCESS RAIL --------------------------------------------------------- */
.rail {
display: grid; grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--bone-line);
}
.rail__step {
padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2.5vw, 2.25rem) 0 0;
border-left: 1px solid var(--bone-line);
padding-left: clamp(1rem, 2.5vw, 2.25rem);
position: relative;
}
.rail__step:first-child { border-left: 0; padding-left: 0; }
.rail__step::before {
content: ""; position: absolute; top: -5px; left: 0;
width: 9px; height: 9px; background: var(--ember);
}
.rail__step:first-child::before { left: 0; }
.rail__name {
font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -0.02em;
color: var(--ink); line-height: 1;
}
.rail__meta {
margin-top: 0.65rem; color: var(--ember-text);
font-family: "JetBrains Mono", monospace; font-size: var(--fs-mono);
letter-spacing: 0.14em; text-transform: uppercase;
}
.rail__body { margin-top: 1.05rem; color: var(--muted); max-width: 34ch; }
/* 13. MEDIA BAND (full-bleed image + overlaid copy) ------------------------ */
.band {
position: relative; isolation: isolate; overflow: hidden;
min-height: clamp(460px, 74dvh, 720px);
display: flex; align-items: center;
background: var(--ink); color: var(--bone);
}
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(255deg, rgba(8,15,21,0.94) 0%, rgba(8,15,21,0.80) 34%,
rgba(8,15,21,0.34) 74%, rgba(8,15,21,0.55) 100%);
}
.band__inner {
position: relative; z-index: 2; width: 100%;
max-width: var(--shell); margin-inline: auto;
padding-inline: max(var(--gutter), env(safe-area-inset-left))
max(var(--gutter), env(safe-area-inset-right));
padding-block: clamp(3.5rem, 8vw, 6rem);
display: flex; justify-content: flex-end;
}
.band__copy { max-width: 46ch; }
.band__copy h2 { color: #fff; margin-top: 1rem; }
.band__copy p { color: rgba(255, 255, 255, 0.84); margin-top: 1.1rem; }
/* 14. METRIC GRID ---------------------------------------------------------- */
.metrics {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; border-top: 1px solid var(--bone-line);
}
.metric {
padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem) 0;
border-left: 1px solid var(--bone-line);
padding-left: clamp(1rem, 2vw, 1.75rem);
}
.metric:first-child { border-left: 0; padding-left: 0; }
.metric__val {
font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 0.95;
letter-spacing: -0.04em; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.metric__val span { font-size: 0.44em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.metric__label { margin-top: 0.8rem; color: var(--text); font-weight: 500; font-size: 0.9375rem; }
.metric__note { margin-top: 0.35rem; color: var(--muted); font-size: var(--fs-small); }
.source-note {
margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.25rem;
border-top: 1px solid var(--bone-line);
color: var(--muted); font-size: var(--fs-small); max-width: 78ch;
}
/* 15. BENTO --------------------------------------------------------------- */
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(0, auto);
gap: 1px; background: var(--bone-line);
border: 1px solid var(--bone-line);
}
.cell {
background: var(--paper);
padding: clamp(1.6rem, 3vw, 2.5rem);
display: flex; flex-direction: column;
}
.cell--a { grid-column: span 4; }
.cell--b { grid-column: span 2; background: var(--ink); color: var(--bone); }
.cell--c { grid-column: span 2; }
.cell--d { grid-column: span 4; }
.cell--media { padding: 0; justify-content: flex-end; position: relative; min-height: 260px; overflow: hidden; }
.cell--media img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform 0.8s var(--ease);
}
.cell--media .cell__caption {
position: relative; z-index: 1; margin: 1.25rem; padding: 0.6rem 0.8rem;
background: rgba(8,15,21,0.82);
color: rgba(255,255,255,0.88);
font-family: "JetBrains Mono", monospace; font-size: var(--fs-mono);
letter-spacing: 0.12em; text-transform: uppercase; align-self: flex-start;
}
.cell__num {
font-family: "JetBrains Mono", monospace; font-size: var(--fs-mono);
letter-spacing: 0.17em; color: var(--ember-text); margin-bottom: 1.25rem;
}
.cell--b .cell__num { color: #E1A184; }
.cell h3 { margin-bottom: 0.85rem; }
.cell p { color: var(--muted); max-width: 42ch; }
.cell--b p { color: var(--muted-dark); }
.cell h3 { color: var(--ink); }
.cell--b h3 { color: #fff; }
/* 16. SPEC CARDS ----------------------------------------------------------
Used instead of a hairline-per-row spec table. */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bone-line); border: 1px solid var(--bone-line); }
.spec { background: var(--paper); padding: clamp(1.4rem, 2.5vw, 2rem); }
.spec__val {
font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -0.02em; color: var(--ink);
line-height: 1.1;
}
.spec__name {
margin-top: 0.55rem; color: var(--ember-text);
font-family: "JetBrains Mono", monospace; font-size: var(--fs-mono);
letter-spacing: 0.14em; text-transform: uppercase;
}
.spec__why { margin-top: 0.85rem; color: var(--muted); font-size: 0.9375rem; max-width: 40ch; }
/* 17. QUOTE --------------------------------------------------------------- */
.quote { max-width: 58ch; }
.quote blockquote {
margin: 0;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 600;
font-size: clamp(1.35rem, 2.5vw, 2.05rem);
line-height: 1.22; letter-spacing: -0.025em;
color: var(--ink);
text-wrap: balance;
}
.on-dark .quote blockquote { color: #fff; }
.quote__attr {
margin-top: 1.5rem; padding-top: 1.1rem;
border-top: 1px solid var(--bone-line);
color: var(--muted); font-size: 0.9375rem;
}
.on-dark .quote__attr { border-top-color: var(--ink-line); color: var(--muted-dark); }
.quote__attr strong { color: var(--ink); font-weight: 600; }
.on-dark .quote__attr strong { color: var(--bone); }
/* 18. ACCORDION (native details, so it works with JS off) ----------------- */
.acc { border-top: 1px solid var(--bone-line); }
.acc details { border-bottom: 1px solid var(--bone-line); }
.acc summary {
list-style: none; cursor: pointer;
padding: clamp(1.15rem, 2.2vw, 1.6rem) 3rem clamp(1.15rem, 2.2vw, 1.6rem) 0;
position: relative;
font-family: "Bricolage Grotesque", sans-serif; font-weight: 600;
font-size: clamp(1.02rem, 1.35vw, 1.2rem); letter-spacing: -0.015em;
color: var(--ink);
transition: color 0.25s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
content: ""; position: absolute; right: 0.35rem; top: 50%;
width: 11px; height: 11px; margin-top: -6px;
border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
transform: rotate(45deg); transition: transform 0.35s var(--ease);
}
.acc details[open] summary::after { transform: rotate(-135deg); }
.acc summary:hover { color: var(--ember-text); }
.acc__body { padding: 0 0 clamp(1.35rem, 2.5vw, 1.9rem); max-width: 74ch; color: var(--muted); }
.acc__body p + p { margin-top: 0.9rem; }
/* Smooth open/close where the browser can animate to auto. Everywhere else it
simply snaps open, which is exactly what did before. */
@supports (interpolate-size: allow-keywords) {
:root { interpolate-size: allow-keywords; }
.acc details::details-content {
block-size: 0;
overflow: hidden;
transition: block-size 0.42s var(--ease),
content-visibility 0.42s allow-discrete;
}
.acc details[open]::details-content { block-size: auto; }
}
/* 19. FORM ----------------------------------------------------------------- */
.form { display: grid; gap: 1.35rem; }
.field { display: grid; gap: 0.55rem; }
.field label { font-size: 0.9375rem; font-weight: 500; color: var(--text); }
.field .hint { color: var(--muted); font-size: var(--fs-small); }
.field input, .field select, .field textarea {
width: 100%; padding: 0.85rem 0.95rem;
background: var(--paper); color: var(--text);
border: 1px solid var(--bone-line); border-radius: 0;
font: inherit; font-size: 1rem;
transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
-webkit-appearance: none; appearance: none;
}
.field select {
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 2.5rem;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7C878E; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--ember); background: #fff;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
outline: 2px solid var(--ember); outline-offset: 1px;
}
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: #A3271B; }
.field__error { color: #A3271B; font-size: var(--fs-small); display: none; }
.field--invalid .field__error { display: block; }
.hp { position: absolute; left: -9999px; }
.form__foot { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.form__foot .hint { max-width: 34ch; }
.form-status {
margin-top: 1.25rem; padding: 1rem 1.1rem; border-left: 3px solid var(--ember);
background: var(--ember-soft); color: var(--text); font-size: 0.9375rem;
}
.form-status[hidden] { display: none; }
/* 20. CONTACT DETAILS ------------------------------------------------------ */
.details { display: grid; gap: 1.75rem; }
.detail { padding-top: 1.25rem; border-top: 1px solid var(--bone-line); }
.detail__label { color: var(--ember-text); margin-bottom: 0.6rem; }
.detail__val { font-size: 1.02rem; line-height: 1.5; overflow-wrap: break-word; }
.detail__val a { text-decoration: none; border-bottom: 1px solid var(--bone-line); }
.detail__val a:hover { border-bottom-color: var(--ember); color: var(--ember-text); }
/* 21. MAP ------------------------------------------------------------------ */
.map {
position: relative; min-height: 380px; background: var(--ink-2);
border: 1px solid var(--bone-line);
display: grid; place-items: center; text-align: center; padding: 2rem;
overflow: hidden;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__prompt { color: var(--bone); max-width: 34ch; }
.map__prompt p { margin: 0.75rem auto 1.25rem; color: var(--muted-dark); font-size: 0.9375rem; }
/* 22. CTA + FOOTER --------------------------------------------------------- */
.cta {
position: relative; isolation: isolate; overflow: hidden;
background: var(--ink); color: var(--bone);
padding-block: clamp(4.5rem, 9vw, 7.5rem);
}
.cta__media { position: absolute; inset: 0; z-index: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg, rgba(8,15,21,0.95) 0%, rgba(8,15,21,0.84) 46%, rgba(8,15,21,0.66) 100%);
}
.cta__inner { position: relative; z-index: 2; }
.cta__grid {
display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem);
align-items: end;
}
.cta h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.04; }
.cta p { color: rgba(255,255,255,0.82); margin-top: 1.1rem; }
.foot {
background: var(--ink); color: var(--bone);
padding-block: clamp(3rem, 6vw, 5rem);
padding-bottom: calc(clamp(3rem, 6vw, 5rem) + env(safe-area-inset-bottom));
}
.foot__grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
gap: clamp(2rem, 4vw, 3.5rem);
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.foot__col h3 {
font-family: "JetBrains Mono", monospace; font-weight: 500;
font-size: var(--fs-mono); letter-spacing: 0.17em; text-transform: uppercase;
color: var(--muted-dark); margin-bottom: 1.15rem;
}
.foot__col ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.foot__col li { overflow-wrap: break-word; }
.foot__col a { color: rgba(255,255,255,0.84); text-decoration: none; }
.foot__col a:hover { color: #fff; border-bottom: 1px solid var(--ember); }
.foot__col p { color: var(--muted-dark); font-size: 0.9375rem; }
.foot__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.15rem; }
.foot__brand .brand__mark { width: 34px; height: 34px; font-size: 1.15rem; }
.foot__brand .brand__word { color: #fff; font-size: 1.3rem; }
.foot__bottom {
border-top: 1px solid var(--ink-line);
padding-top: 1.75rem;
display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
color: var(--muted-dark); font-size: var(--fs-small);
}
.foot__bottom p { max-width: 70ch; }
/* 23. REVEALS --------------------------------------------------------------
Armed only when JS is present (html.js), so a failed script can never leave
the page blank. Entrance motion only: nothing loops, nothing re-animates,
nothing is driven by a scroll listener. */
.js .reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* Headline figures resolve out of a soft blur rather than snapping. */
.js .metric__val, .js .strip__val {
filter: blur(7px);
transition: filter 0.9s var(--ease) var(--d, 0ms);
}
.js .reveal.is-in .metric__val, .js .reveal.is-in .strip__val { filter: blur(0); }
/* Photographs uncover left to right inside the frame that holds them. */
.js .reveal .frame img {
clip-path: inset(0 100% 0 0);
transition: clip-path 1.15s var(--ease) calc(var(--d, 0ms) + 120ms),
transform 0.8s var(--ease);
}
.js .reveal.is-in .frame img { clip-path: inset(0 0 0 0); }
/* 23.1 SCROLL-LINKED MOTION -----------------------------------------------
Both of these use CSS scroll-driven animations, so the browser runs them off
the main thread. There is no scroll listener and no rAF loop anywhere in
this project. Browsers without support (currently Firefox) simply get the
static, fully-visible version - the photographs are never left cropped. */
@supports (animation-timeline: view()) {
.band__media, .cta__media {
animation: uncoverX linear both;
animation-timeline: view();
animation-range: entry 5% cover 42%;
}
.band__media img, .cta__media img {
animation: driftY linear both;
animation-timeline: view();
animation-range: cover;
}
@keyframes uncoverX {
from { clip-path: inset(0 0 0 100%); }
to { clip-path: inset(0 0 0 0); }
}
/* 6% of overscan, so the slower travel never exposes an edge. */
@keyframes driftY {
from { transform: translateY(-3%) scale(1.06); }
to { transform: translateY(3%) scale(1.06); }
}
}
/* 23.2 POINTER MOTION -----------------------------------------------------
Only where there is a real pointer. Touch devices get nothing, which is
what keeps the hover states from sticking after a tap on mobile. */
@media (hover: hover) and (pointer: fine) {
.cell, .spec { transition: transform 0.45s var(--ease); }
.cell:hover, .spec:hover { transform: translateY(-3px); }
.frame:hover img, .cell--media:hover img { transform: scale(1.035); }
.metric, .rail__step { transition: transform 0.45s var(--ease); }
.metric:hover, .rail__step:hover { transform: translateY(-2px); }
}
/* 24. GRAIN ----------------------------------------------------------------
Fixed, pointer-events-none pseudo layer. Never on a scrolling container. */
.grain {
position: fixed; inset: 0; z-index: 90; pointer-events: none;
opacity: 0.32; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
/* 25. PAGE HEAD ------------------------------------------------------------ */
.phead {
position: relative; isolation: isolate; overflow: hidden;
background: var(--ink); color: var(--bone);
padding-top: calc(var(--nav-h) + clamp(3.5rem, 8vw, 6.5rem));
padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.phead--media { padding-bottom: clamp(5rem, 12vw, 9rem); }
.phead__media { position: absolute; inset: 0; z-index: 0; }
.phead__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.phead__scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top, rgba(8,15,21,0.96) 0%, rgba(8,15,21,0.72) 52%, rgba(8,15,21,0.86) 100%);
}
.phead__inner { position: relative; z-index: 2; }
.phead h1 { color: #fff; font-size: var(--fs-display); letter-spacing: -0.035em; max-width: 22ch; }
.phead p { margin-top: 1.35rem; max-width: 52ch; color: rgba(255,255,255,0.84); }
.phead .eyebrow { margin-bottom: 1.35rem; }
/* Page heads fade up in sequence on arrival, the same way the hero does. */
.phead__inner > * { animation: heroRise 0.9s var(--ease) both; }
.phead__inner > *:nth-child(1) { animation-delay: 0.06s; }
.phead__inner > *:nth-child(2) { animation-delay: 0.16s; animation-name: heroHeadline; }
.phead__inner > *:nth-child(3) { animation-delay: 0.30s; }
.phead__inner > *:nth-child(4) { animation-delay: 0.40s; }
/* Breadcrumb-free, but pages carry a small section index when useful. */
.crumbs { margin-top: 1.75rem; color: var(--muted-dark); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: #fff; }
/* 26. UTILITIES ------------------------------------------------------------ */
.stack-sm > * + * { margin-top: 1rem; }
.stack > * + * { margin-top: 1.75rem; }
.stack-lg > * + * { margin-top: 2.75rem; }
.mt-sm { margin-top: 1rem; }
.mt { margin-top: 1.75rem; }
.mt-lg { margin-top: 2.75rem; }
.center { text-align: center; margin-inline: auto; }
/* 27. RESPONSIVE -----------------------------------------------------------
See the breakpoint map in the header comment. Every multi-column layout
declares its own collapse here - nothing is left to "it'll probably work". */
/* Compact desktop */
@media (max-width: 1200px) {
.split__text, .split__text--wide { grid-column: 1 / span 6; }
.split__media, .split__text--trail { grid-column: 7 / span 6; }
.split__media--lead { grid-column: 1 / span 6; }
.split--flip .split__text { grid-column: 7 / span 6; }
.split--flip .split__media { grid-column: 1 / span 6; }
}
/* Splits stop being two-column */
@media (max-width: 980px) {
.split__text, .split__text--wide, .split__text--trail,
.split__media, .split__media--lead,
.split--flip .split__text, .split--flip .split__media { grid-column: 1 / -1; }
.split--flip .split__media { order: -1; }
.offset-up, .offset-down { margin-top: 0; }
.split { gap: clamp(1.75rem, 4vw, 3rem); }
.cta__grid { grid-template-columns: 1fr; align-items: start; }
}
/* Tablet */
@media (max-width: 900px) {
:root { --nav-h: 62px; --sec-y: clamp(3.5rem, 8vw, 6rem); }
.strip__grid, .metrics { grid-template-columns: repeat(2, 1fr); }
.strip__cell:nth-child(odd), .metric:nth-child(odd) { border-left: 0; padding-left: 0; }
.strip__cell:nth-child(n + 3), .metric:nth-child(n + 3) { border-top: 1px solid var(--bone-line); }
.foot__grid { grid-template-columns: repeat(2, 1fr); }
.rail { grid-template-columns: 1fr; border-top: 0; }
.rail__step {
border-left: 0; border-top: 1px solid var(--bone-line);
padding: 1.5rem 0 1rem 1.35rem;
}
.rail__step:first-child { padding-left: 1.35rem; padding-top: 1.5rem; }
.rail__step::before { top: 1.65rem; left: 0; }
.bento { grid-template-columns: repeat(2, 1fr); }
.cell--a, .cell--b, .cell--c, .cell--d { grid-column: span 1; }
.cell--media { min-height: 220px; }
.band__inner { justify-content: flex-start; }
.map { min-height: 300px; }
}
/* Phone: navigation becomes a panel, hero and buttons go full width */
@media (max-width: 760px) {
/* The closed panel is `display: none`, not merely transparent: a menu that is
not on screen cannot leak into a screenshot, a printout or the tab order.
It still animates in, with a short stagger on the links. */
.nav__links {
position: fixed; inset: var(--nav-h) 0 auto 0;
max-height: calc(100dvh - var(--nav-h));
overflow-y: auto;
flex-direction: column; align-items: flex-start; gap: 0;
background: var(--ink); padding: 0.5rem var(--gutter) 1.75rem;
border-bottom: 1px solid var(--ink-line);
display: none;
}
.nav__links.is-open { display: flex; }
.nav__links.is-open li { animation: menuIn 0.45s var(--ease) both; }
.nav__links.is-open li:nth-child(1) { animation-delay: 0.03s; }
.nav__links.is-open li:nth-child(2) { animation-delay: 0.08s; }
.nav__links.is-open li:nth-child(3) { animation-delay: 0.13s; }
.nav__links.is-open li:nth-child(4) { animation-delay: 0.18s; }
@keyframes menuIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
.nav__links li { width: 100%; border-bottom: 1px solid var(--ink-line); }
.nav__link { display: block; padding: 1rem 0; font-size: 1.0625rem; }
.nav__link::after { display: none; }
.nav__toggle { display: block; }
.nav__cta { display: none; } /* the panel carries it instead */
.nav__links .nav__cta-m { display: inline-flex; margin-top: 1.35rem; }
.hero { min-height: clamp(500px, 86dvh, 700px); }
.hero h1 { font-size: clamp(2.15rem, 9.2vw, 3rem); }
.hero__stack, .hero__sub { max-width: 100%; }
.hero__sub { font-size: 1rem; }
.hero__foot { flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 2rem; }
.hero__badges { gap: 0.5rem 1.25rem; }
.hero__scroll { display: none; } /* decorative locale strip */
.phead--media { padding-bottom: clamp(2.25rem, 7vw, 4rem); }
.phead h1 { font-size: clamp(2rem, 9vw, 2.9rem); }
.head { margin-bottom: 2rem; }
.cta h2 { font-size: clamp(1.65rem, 7.4vw, 2.2rem); }
.quote blockquote { font-size: clamp(1.2rem, 4.6vw, 1.5rem); }
.btn-row .btn { width: 100%; }
.btn { min-height: 50px; }
/* 16px minimum stops iOS Safari zooming the page when a field is focused. */
.field input, .field select, .field textarea { font-size: 16px; }
.acc summary { padding-block: 1.15rem; padding-right: 2.5rem; }
.acc__body { padding-bottom: 1.5rem; }
.foot__bottom { flex-direction: column; gap: 0.6rem; }
}
/* Small phone: everything single column */
@media (max-width: 640px) {
.strip__grid, .metrics, .bento, .specs, .foot__grid { grid-template-columns: 1fr; }
.strip__cell, .metric { border-left: 0; padding-left: 0; }
.strip__cell + .strip__cell, .metric + .metric { border-top: 1px solid var(--bone-line); }
.cell--a, .cell--b, .cell--c, .cell--d { grid-column: 1 / -1; }
.foot__grid { gap: 1.75rem; }
.hero__badges { gap: 0.4rem 1rem; }
}
/* The desktop navigation carries its own CTA, so the panel's copy stays hidden
above the panel breakpoint. */
@media (min-width: 761px) { .nav__links .nav__cta-m { display: none; } }
/* 28. PRINT ---------------------------------------------------------------- */
@media print {
.nav, .grain, .hero__media, .band__media, .cta__media, .map, .skip { display: none !important; }
/* Kill every entrance animation so nothing prints half-faded or cropped. */
* { animation: none !important; clip-path: none !important; filter: none !important; }
body { background: #fff; color: #000; }
.hero, .band, .cta, .phead, .foot { background: #fff !important; color: #000 !important; }
.hero h1, .band h2, .cta h2, .phead h1, .on-dark h2 { color: #000 !important; }
.js .reveal { opacity: 1 !important; transform: none !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}
/* 29. FORCED COLORS -------------------------------------------------------- */
@media (forced-colors: active) {
.btn, .cell, .spec, .frame, .shot { border: 1px solid CanvasText; }
.grain { display: none; }
}
/* 30. FROM THE FARM (client-supplied photography) -------------------------
A mosaic of real photographs taken at the unit. Cells are figure elements
holding nothing but an absolutely positioned image and a caption, so the
row height comes from min-height and every frame crops to a tidy block. */
.shots {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: clamp(0.6rem, 1.1vw, 1rem);
}
.shot {
position: relative; overflow: hidden;
background: var(--bone-2); min-height: clamp(210px, 22vw, 360px);
}
.shot img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform 0.9s var(--ease);
}
.shot:hover img { transform: scale(1.045); }
.shot--xl { grid-column: span 4; }
.shot--sm { grid-column: span 2; }
.shot--lg { grid-column: span 3; }
.shot__cap {
position: absolute; left: 1rem; bottom: 1rem; z-index: 1;
padding: 0.55rem 0.8rem; background: rgba(8, 15, 21, 0.82);
color: rgba(255, 255, 255, 0.9);
font-family: "JetBrains Mono", monospace; font-size: var(--fs-mono);
letter-spacing: 0.12em; text-transform: uppercase;
}
.shot--note {
grid-column: span 3; background: var(--bone-2);
padding: clamp(1.4rem, 2.5vw, 2rem); display: flex; flex-direction: column;
justify-content: flex-end; min-height: clamp(210px, 22vw, 360px);
}
.shot--note .eyebrow { margin-bottom: 0.9rem; }
.shot--note p { color: var(--muted); max-width: 40ch; }
@media (max-width: 900px) {
.shots { grid-template-columns: repeat(2, 1fr); }
.shot--xl, .shot--lg, .shot--note { grid-column: 1 / -1; }
.shot--sm { grid-column: span 1; }
}
@media (max-width: 640px) {
.shots { grid-template-columns: 1fr; }
.shot--xl, .shot--sm, .shot--lg, .shot--note { grid-column: 1 / -1; }
}