/* ==========================================================================
Fusco — Design Tokens
Editorial, warm, quietly confident. One accent, used with restraint.
========================================================================== */
/* Fonts are loaded via in each page's
(with preconnect) instead of @import — avoids the render-blocking import chain. */
:root {
color-scheme: light;
/* Palette primitives — exact values from Fusco-Studio-Brand-Book.pdf.
Forest / Amber / Sand / Rust / Plum on cream. */
--c-forest: #122520;
--c-forest-deep: #0E1A17;
--c-forest-lift: #234A3E; /* derived — no mid-green in the book */
--c-amber: #B9742A;
--c-amber-deep: #96591A; /* amber at text sizes */
--c-amber-light: #D08C3E;
--c-sand: #E5D1B3;
--c-sand-paper: #EDE7DA;
--c-rust: #954526;
--c-rust-lift: #C4693F;
--c-plum: #301B22;
--c-sage: #A9B0A6;
--c-ink: #14110C;
--c-muted: #6B6559;
--c-cream: #F4F0E7;
/* Color — cream paper, warm ink, amber accent deepening to rust */
--color-bg: #F4F0E7;
--color-bg-raised: #EDE7DA;
--color-bg-inverse: #122520;
--color-fg: #14110C;
--color-fg-inverse: #F4F0E7;
--color-muted: #6B6559;
--color-muted-inverse: rgba(244, 240, 231, 0.62);
--color-border: rgba(20, 17, 12, 0.11);
--color-border-inverse: rgba(244, 240, 231, 0.14);
--color-accent: #96591A;
--color-accent-fg: #F4F0E7;
--color-accent-soft: #F0E3CE; /* Sand, lightened toward paper for washes */
--color-accent-glow: rgba(185, 116, 42, 0.55);
--color-accent-rich: #954526;
--color-placeholder: #E5D1B3;
/* Type */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--step-xs: 0.75rem;
--step-sm: 0.9375rem;
--step-base: 1.0625rem;
--step-md: 1.25rem;
--step-lg: 1.75rem;
--step-xl: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
--step-2xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
--step-3xl: clamp(2.75rem, 1.4rem + 5.5vw, 6rem);
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
--space-24: 6rem;
--space-32: 8rem;
--space-40: 10rem;
--container-max: 1360px;
--border-hairline: 1px solid var(--color-border);
--border-hairline-inverse: 1px solid var(--color-border-inverse);
--radius-sm: 3px;
--radius-md: 8px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 200ms;
--dur-base: 450ms;
--dur-slow: 900ms;
}
[data-theme="dark"] {
color-scheme: dark;
--color-bg: #0E1A17;
--color-bg-raised: #14231F;
--color-bg-inverse: #0A1512;
--color-fg: #F4F0E7;
--color-fg-inverse: #14110C;
--color-muted: #A9B0A6;
--color-muted-inverse: rgba(20, 17, 12, 0.65);
--color-border: rgba(244, 240, 231, 0.13);
--color-border-inverse: rgba(20, 17, 12, 0.16);
--color-accent: #D08C3E;
--color-accent-fg: #0E1A17;
--color-accent-soft: rgba(208, 140, 62, 0.14);
--color-accent-rich: #E5D1B3;
--color-placeholder: #14231F;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-bg: #0E1A17;
--color-bg-raised: #14231F;
--color-bg-inverse: #0A1512;
--color-fg: #F4F0E7;
--color-fg-inverse: #14110C;
--color-muted: #A9B0A6;
--color-muted-inverse: rgba(20, 17, 12, 0.65);
--color-border: rgba(244, 240, 231, 0.13);
--color-border-inverse: rgba(20, 17, 12, 0.16);
--color-accent: #D08C3E;
--color-accent-fg: #0E1A17;
--color-accent-soft: rgba(208, 140, 62, 0.14);
--color-accent-rich: #E5D1B3;
--color-placeholder: #14231F;
}
}
/* ==========================================================================
Reset
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar { display: none; }
/* Anchor targets (#contact, #work, #packages, etc.) need room for the
sticky header, which overlays in-flow content rather than reserving
space for itself — without this, jumping to an anchor lands the
target's top edge exactly under the header instead of below it.
--nav-stack-h is measured in js/script.js (includes the currency
bar on pricing.html); 90px is the fallback before that JS runs. */
section[id] { scroll-margin-top: var(--nav-stack-h, 90px); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
margin: 0;
}
body {
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-fg);
font-size: var(--step-base);
font-weight: 300;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input, textarea, select {
font: inherit;
color: inherit;
background: none;
border: none;
}
button { cursor: pointer; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
}
em { font-style: italic; font-family: var(--font-display); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
.icon { width: 20px; height: 20px; flex-shrink: 0; }
/* ==========================================================================
Layout helpers
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-6);
}
@media (min-width: 768px) {
.container { padding-inline: var(--space-16); }
}
section { padding-block: var(--space-24); }
@media (max-width: 700px) {
section { padding-block: var(--space-16); }
}
.section-head {
max-width: 640px;
margin-bottom: var(--space-16);
}
.section-head--center {
margin-inline: auto;
text-align: center;
}
.eyebrow {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--step-xs);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: var(--space-6);
}
.section-head--center .eyebrow { justify-content: center; }
.section-title {
font-size: var(--step-2xl);
font-weight: 400;
max-width: 22ch;
}
.section-head--center .section-title { margin-inline: auto; }
.section-sub {
margin-top: var(--space-6);
color: var(--color-muted);
font-size: var(--step-md);
font-weight: 300;
max-width: 48ch;
}
.section-head--center .section-sub { margin-inline: auto; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-8);
font-family: var(--font-body);
font-size: var(--step-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid var(--color-fg);
border-radius: var(--radius-sm);
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: var(--color-fg);
color: var(--color-bg);
}
.btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-fg); }
.btn-on-image {
border-color: rgba(244, 240, 231, 0.65);
color: var(--color-fg-inverse);
}
.btn-primary-image { background: var(--color-fg-inverse); color: var(--color-bg-inverse); border-color: var(--color-fg-inverse); }
.btn-primary-image:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-fg); }
.btn-ghost-image:hover { background: rgba(244, 240, 231, 0.12); }
/* Reveal-on-scroll */
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; }
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.skip-link {
position: absolute;
top: -48px;
left: var(--space-6);
background: var(--color-fg);
color: var(--color-bg);
padding: var(--space-3) var(--space-6);
z-index: 200;
transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }
/* Beacon — signature pulse */
.beacon-dot {
position: relative;
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #B9742A;
flex-shrink: 0;
}
.beacon-dot::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid #B9742A;
opacity: 0;
animation: beacon-ping 2.6s var(--ease-out) infinite;
}
@keyframes beacon-ping {
0% { opacity: 0.55; transform: scale(0.5); }
80% { opacity: 0; transform: scale(1.8); }
100% { opacity: 0; transform: scale(1.8); }
}
/* Image placeholders */
.plate {
position: relative;
display: block;
background: var(--color-placeholder);
overflow: hidden;
}
.plate::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(20, 17, 12, 0.07);
pointer-events: none;
}
.plate__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.1s var(--ease-out);
}
.plate--portrait { aspect-ratio: 4 / 5; }
.plate--square { aspect-ratio: 1; }
.plate--wide { aspect-ratio: 16 / 9; }
/* ==========================================================================
Header
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-bg);
border-bottom: var(--border-hairline);
transition: box-shadow var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(0,0,0,0.25); }
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-4);
}
.brand {
display: inline-flex;
align-items: center;
}
.brand__word {
font-family: 'Jost', var(--font-body);
font-size: 1.0625rem;
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-fg);
}
.brand--on-dark .brand__word { color: var(--color-fg-inverse); }
.nav__list { display: none; }
@media (min-width: 900px) {
.nav__list {
display: flex;
align-items: center;
gap: var(--space-8);
font-size: var(--step-xs);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.nav__list a {
position: relative;
padding-block: var(--space-1);
}
.nav__list a::after {
content: '';
position: absolute;
left: 0; right: 100%;
bottom: -2px;
height: 1px;
background: var(--color-accent);
transition: right var(--dur-base) var(--ease-out);
}
.nav__list a:hover::after,
.nav__list a:focus-visible::after { right: 0; }
}
/* ==========================================================================
Services mega-menu (nav)
========================================================================== */
.nav__item--mega { position: relative; }
.nav__trigger {
display: inline-flex;
align-items: center;
gap: 6px;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
padding-block: var(--space-1);
}
.nav__trigger .icon { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease-out); }
.nav__item--mega.is-open .nav__trigger .icon { transform: rotate(180deg); }
@media (min-width: 900px) {
.mega-menu {
position: absolute;
top: calc(100% + var(--space-6));
left: 50%;
transform: translateX(-50%) translateY(6px);
width: min(300px, 88vw);
background: var(--color-bg);
border: var(--border-hairline);
border-radius: var(--radius-md);
box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.28);
padding: var(--space-6);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
z-index: 110;
text-align: left;
}
.mega-menu--wide { width: min(380px, 88vw); }
.nav__item--mega.is-open .mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Tradies flyout — nested one level inside the Industries panel, not a
sibling top-level item. Cascades to the right of the parent panel
rather than centering under the trigger like a top-level mega-menu. */
.mega-menu__item--flyout { position: relative; }
/* Split trigger: the label is a real link straight to the Tradies hub;
the chevron is a separate button that only toggles the flyout — so
"click Tradies" and "browse a specific trade" are two distinct,
unambiguous actions instead of one element trying to do both. */
.mega-menu__flyout-head {
display: flex;
align-items: stretch;
gap: var(--space-1);
margin-inline: calc(var(--space-3) * -1);
}
.mega-menu__flyout-link { flex: 1 1 auto; min-width: 0; margin-inline: 0; }
.mega-menu__flyout-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
flex: none;
border-radius: var(--radius-sm);
color: var(--color-muted);
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mega-menu__flyout-toggle:hover,
.mega-menu__flyout-toggle:focus-visible { background: var(--color-bg-raised); color: var(--color-fg); }
.mega-menu__flyout-arrow {
width: 12px;
height: 12px;
flex: none;
transform: rotate(-90deg);
transition: transform var(--dur-fast) var(--ease-out);
}
.mega-menu__item--flyout.is-open .mega-menu__flyout-arrow { transform: rotate(-90deg) scaleX(-1); }
.mega-menu--flyout {
top: calc(var(--space-3) * -1);
left: calc(100% + var(--space-4));
width: min(460px, 80vw);
/* Override the base .mega-menu's centering transform — this panel's
left edge is already positioned relative to its trigger, not
centered under it like a top-level mega-menu. */
transform: translateY(6px);
}
.mega-menu--flyout .mega-menu__list {
grid-template-columns: 1fr 1fr;
column-gap: var(--space-6);
}
.mega-menu--flyout .mega-menu__link--all { grid-column: auto; }
/* The general ".nav__item--mega.is-open .mega-menu" rule above also
matches this nested flyout (it's a descendant .mega-menu regardless
of depth) — re-hide it here so opening Industries alone doesn't
also reveal the flyout; only its own trigger should. */
.nav__item--mega.is-open .mega-menu--flyout {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.mega-menu__item--flyout.is-open .mega-menu--flyout {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
}
.mega-menu__list { display: grid; gap: var(--space-1); }
.mega-menu__link--all {
margin-top: var(--space-2);
padding-top: calc(var(--space-4) + var(--space-2));
border-top: var(--border-hairline);
}
.mega-menu__link {
display: block;
padding: var(--space-2) var(--space-3);
margin-inline: calc(var(--space-3) * -1);
border-radius: var(--radius-sm);
transition: background var(--dur-fast) var(--ease-out);
}
.mega-menu__link:hover,
.mega-menu__link:focus-visible { background: var(--color-bg-raised); }
.mega-menu__link:hover::after,
.mega-menu__link:focus-visible::after { content: none; }
.mega-menu__link-title {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--step-base);
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: var(--color-fg);
}
.mega-menu__badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border: 1px solid var(--color-accent);
border-radius: 999px;
background: transparent;
color: var(--color-accent);
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.5;
white-space: nowrap;
}
.mega-menu__link-desc {
display: block;
margin-top: 2px;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 300;
text-transform: none;
letter-spacing: normal;
color: var(--color-muted);
}
/* Mobile: Services/Industries become inline expandable sections within the full-screen nav */
@media (max-width: 899px) {
.nav__item--mega { display: flex; flex-direction: column; }
.nav__trigger { justify-content: space-between; width: 100%; }
.mega-menu {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.nav__item--mega.is-open .mega-menu { grid-template-rows: 1fr; }
.mega-menu__inner { overflow: hidden; }
.mega-menu__list { gap: var(--space-1); padding-top: var(--space-6); }
.mega-menu__link-title { font-size: var(--step-md); }
/* Tradies flyout on mobile: a nested inline accordion (indented, own
hairline), not an absolute flyout — matches how the outer
Services/Industries panels already collapse inline here. */
.mega-menu__flyout-head { padding-right: var(--space-3); }
.mega-menu--flyout {
position: static;
display: grid;
grid-template-rows: 0fr;
grid-template-columns: none;
transition: grid-template-rows var(--dur-base) var(--ease-out);
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
width: auto;
margin-left: var(--space-4);
padding: 0;
border: none;
border-left: var(--border-hairline);
box-shadow: none;
background: none;
}
.mega-menu__item--flyout.is-open .mega-menu--flyout { grid-template-rows: 1fr; }
.mega-menu--flyout .mega-menu__inner { overflow: hidden; }
.mega-menu--flyout .mega-menu__list { grid-template-columns: 1fr; padding-left: var(--space-4); }
}
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-4);
}
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--color-border);
color: var(--color-fg);
transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { background: var(--color-bg-raised); }
.theme-toggle .icon { width: 16px; height: 16px; }
.theme-toggle .icon--moon { display: none; }
[data-theme="dark"] .theme-toggle .icon--sun { display: none; }
[data-theme="dark"] .theme-toggle .icon--moon { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle .icon--sun { display: none; }
:root:not([data-theme="light"]) .theme-toggle .icon--moon { display: block; }
}
.header-cta { display: none; }
@media (min-width: 900px) {
.header-cta { display: inline-flex; }
}
.nav-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
position: relative;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle .icon { position: absolute; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.nav-toggle .icon--close { opacity: 0; transform: rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .icon--open { opacity: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .icon--close { opacity: 1; transform: rotate(0); }
@media (max-width: 899px) {
.nav {
position: fixed;
top: 65px; right: 0; bottom: 0; left: 0;
background: var(--color-bg);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out);
z-index: 90;
overflow-y: auto;
}
.nav.is-open { opacity: 1; pointer-events: auto; }
.nav__list {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-16) var(--space-6);
font-size: var(--step-lg);
font-family: var(--font-display);
font-weight: 400;
}
}
/* ==========================================================================
Hero
========================================================================== */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
overflow: hidden;
/* The hero always sits on a dark photo, so pin its light-on-dark colours
regardless of the light/dark theme — the title and buttons never invert. */
--color-fg-inverse: #F4F0E7;
--color-bg-inverse: #122520;
--color-accent: #B9742A;
--color-accent-fg: #14110C;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__img {
position: absolute;
inset: -6% -6%;
width: 112%;
height: 112%;
will-change: transform;
}
/* Hero reel — a single scroll-scrubbed video (no autoplay/loop/controls).
Sits inside .hero__img, which already carries the -6%/112% overhang and
the scroll parallax transform, so the video inherits both for free. */
.hero__video {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(18,37,32,0.82) 0%, rgba(18,37,32,0.4) 42%, rgba(18,37,32,0.12) 68%, rgba(18,37,32,0.28) 100%);
}
.hero__content {
position: relative;
z-index: 1;
width: 100%;
padding-top: var(--space-24);
padding-bottom: var(--space-24);
color: var(--color-fg-inverse);
}
@media (min-width: 768px) {
.hero__content { padding-bottom: var(--space-32); }
}
.hero__status {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.03em;
color: rgba(244, 240, 231, 0.85);
background: rgba(244, 240, 231, 0.08);
border: 1px solid rgba(244, 240, 231, 0.18);
border-radius: 999px;
padding: var(--space-2) var(--space-4);
margin-bottom: var(--space-8);
}
.hero__title {
font-size: var(--step-3xl);
font-weight: 400;
max-width: 16ch;
letter-spacing: -0.02em;
line-height: 1.14;
--morph: 0;
}
.hero__title em { color: #E5D1B3; text-shadow: 0 1px 24px rgba(18, 37, 32, 0.35); }
/* Title swap: "to Be Remembered." crossfades to "in 7 Days." as the
visitor scrolls the wheel at the top of the page — "Websites Built" is
static and never re-colours. Split into two independent swap units
("to Be" / "in 7" and "Remembered." / "Days.") rather than one long
phrase, so each wraps naturally with the surrounding text — "to Be"
sits right after "Built" exactly like the original static headline did.
Both units read the same --morph (set on .hero__title, inherited down)
so they stay perfectly in sync. Each pair sits stacked in the same
inline-grid cell and cross-fades via --morph (0→1), driven by JS in
script.js. */
.hero__swap { display: inline-grid; }
.hero__swap em {
grid-area: 1 / 1;
text-shadow: 0 1px 24px rgba(18, 37, 32, 0.35);
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.hero__swap .hero__swap-a {
color: #E5D1B3;
opacity: calc(1 - var(--morph));
transform: translateY(calc(var(--morph) * -0.4em));
}
.hero__swap .hero__swap-b {
color: #E5D1B3;
opacity: var(--morph);
transform: translateY(calc((1 - var(--morph)) * 0.4em));
pointer-events: none;
}
.hero__lede {
margin-top: var(--space-6);
font-size: var(--step-md);
font-weight: 300;
max-width: 44ch;
color: rgba(244, 240, 231, 0.88);
}
.hero__lede-strong { font-weight: 500; font-style: normal; color: rgba(244, 240, 231, 0.98); }
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-12);
}
/* ==========================================================================
Trusted / Technology
========================================================================== */
.trusted {
padding-block: var(--space-16);
border-bottom: var(--border-hairline);
}
.trusted__label {
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.04em;
color: var(--color-muted);
margin-bottom: var(--space-12);
text-align: center;
}
.trusted__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-12) var(--space-24);
}
.trusted__list li {
font-family: var(--font-display);
font-size: var(--step-lg);
font-weight: 400;
letter-spacing: 0.01em;
color: var(--color-muted);
opacity: 0.65;
transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.trusted__list li:hover { opacity: 1; color: var(--color-fg); }
/* ==========================================================================
Services
========================================================================== */
/* An editorial, single-column directory rather than a grid of boxes —
deliberately distinct from the card-grid treatments used elsewhere on
the homepage (Who We Build For's hairline grid), so two lists of six
things don't end up reading as the same component twice. Hover nudges
the whole row right (borrowed from .notes-list) instead of lifting a
box or washing a background. */
.services-list {
margin-top: var(--space-12);
border-top: var(--border-hairline);
}
.services-list__item { border-bottom: var(--border-hairline); }
.services-list__link {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-6);
padding: var(--space-8) var(--space-12) var(--space-8) 0;
color: inherit;
text-decoration: none;
transition: padding-left var(--dur-base) var(--ease-out);
}
.services-list__link:hover { padding-left: var(--space-4); }
.services-list__index {
flex: none;
padding-top: 0.3em;
font-family: var(--font-mono);
font-size: var(--step-xs);
color: var(--color-muted);
}
.services-list__icon {
flex: none;
width: 26px;
height: 26px;
color: var(--color-accent);
transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.services-list__link:hover .services-list__icon { transform: translateY(-2px); color: var(--color-accent-rich); }
.services-list__body { flex: 1; min-width: 0; }
.services-list__title {
font-size: var(--step-md);
font-weight: 400;
transition: color var(--dur-base) var(--ease-out);
}
.services-list__link:hover .services-list__title { color: var(--color-accent-rich); }
.services-list__desc {
margin-top: var(--space-2);
color: var(--color-muted);
font-size: var(--step-sm);
max-width: 56ch;
}
.services-list__price {
margin-top: var(--space-3);
font-family: var(--font-mono);
font-size: var(--step-xs);
color: var(--color-accent-rich);
}
.services-list__arrow {
position: absolute;
top: var(--space-8);
right: 0;
width: 16px;
height: 16px;
color: var(--color-muted);
opacity: 0;
transform: translate(-4px, 4px);
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.services-list__link:hover .services-list__arrow { opacity: 1; transform: translate(0, 0); color: var(--color-accent-rich); }
@media (max-width: 560px) {
.services-list__link { gap: var(--space-4); padding-right: var(--space-8); }
.services-list__icon { width: 22px; height: 22px; }
}
/* Services preview — a real photo doing real production work, not a
wireframe toy. The photo carries a continuous, very slow Ken Burns
drift so the panel feels alive even before anyone touches it; hovering
lifts the whole card with a soft shadow (the site's one deliberate use
of elevation), the headline reveals through a curtain-wipe mask, the
copy pulls into focus from a soft blur, and the button settles in with
a slight spring overshoot. Refresh uses a feathered mask-wipe (a soft
dissolve edge, not a hard slider line) to bring the refreshed page up
from underneath the dated one. Resting state is always the finished
page — nothing is ever blank — so hovering replays the reveal rather
than gating it. */
@property --sp-wipe {
syntax: '';
inherits: false;
initial-value: 108%;
}
.services-preview { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 640px) {
.services-preview {
display: block;
flex: none;
align-self: center;
width: 260px;
height: 196px;
border: var(--border-hairline);
border-radius: var(--radius-sm);
background: var(--color-bg-raised);
overflow: hidden;
position: relative;
transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.services-list__link:hover .services-preview {
transform: translateY(-4px);
box-shadow: 0 28px 44px -26px color-mix(in srgb, var(--color-fg) 38%, transparent);
}
.services-preview__chrome {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
height: 20px;
padding: 0 9px;
border-bottom: var(--border-hairline);
position: relative;
z-index: 3;
background: var(--color-bg-raised);
}
.services-preview__dots { display: flex; gap: 4px; }
.services-preview__dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--color-border); }
.services-preview__url { display: block; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.02em; color: var(--color-muted); }
.services-preview__photo {
display: block;
position: relative;
height: 122px;
background-size: cover;
background-position: center;
overflow: hidden;
animation: sp-kenburns 26s ease-in-out infinite alternate;
}
.services-preview__photo--old { filter: grayscale(78%) brightness(0.82) contrast(0.9); }
@keyframes sp-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.services-preview__scrim {
display: block;
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100%);
}
.services-preview__scrim--old { background: linear-gradient(0deg, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0) 75%); }
.services-preview__title-mask { display: block; position: absolute; left: 13px; right: 13px; bottom: 11px; overflow: hidden; }
.services-preview__title {
display: block;
font-family: var(--font-display);
font-size: 15px;
line-height: 1.2;
color: #F4F0E7;
clip-path: inset(0 0 0 0);
}
.services-preview__title--old { font-family: var(--font-body); font-size: 12px; color: rgba(244,240,231,0.85); }
@keyframes sp-title-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.services-list__link:hover .services-preview--refresh .services-preview__layer--new .services-preview__title { animation: sp-title-wipe 0.7s var(--ease-out) 1.05s both; }
/* Design's hero is an original line-art blueprint, not a photo — no
stock image can misbehave, and the "hover redraws it" motion fits
the idea of a page being drafted better than a photo ever could.
Resting state is fully drawn (the finished page); hovering resets
and redraws it, same "replay every time" pattern as the rest of
this component. */
.services-preview__blueprint { display: block; height: 122px; background: var(--color-accent-soft); }
.services-preview__blueprint--old { background: var(--color-bg-raised); }
.services-preview__blueprint svg { display: block; width: 100%; height: 100%; }
.bp-frame, .bp-header { opacity: 0.55; }
.bp-dot { opacity: 0.7; }
.bp-hero { stroke-dasharray: 280; stroke-dashoffset: 0; }
.bp-line { stroke-dasharray: 220; stroke-dashoffset: 0; }
.bp-cta { transform: scaleX(1); transform-origin: left; }
@keyframes bp-draw-hero { from { stroke-dashoffset: 280; } to { stroke-dashoffset: 0; } }
@keyframes bp-draw-line { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@keyframes bp-fill-cta { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.services-list__link:hover .services-preview--design .bp-hero { animation: bp-draw-hero 0.5s var(--ease-out) 0.1s both; }
.services-list__link:hover .services-preview--design .bp-line--1 { animation: bp-draw-line 0.4s var(--ease-out) 0.4s both; }
.services-list__link:hover .services-preview--design .bp-line--2 { animation: bp-draw-line 0.4s var(--ease-out) 0.52s both; }
.services-list__link:hover .services-preview--design .bp-line--3 { animation: bp-draw-line 0.4s var(--ease-out) 0.64s both; }
.services-list__link:hover .services-preview--design .bp-cta { animation: bp-fill-cta 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.78s both; }
.services-preview__heading-mask { display: block; overflow: hidden; }
.services-preview__heading {
display: block;
font-family: var(--font-display);
font-size: 15px;
line-height: 1.2;
color: var(--color-fg);
margin-bottom: 4px;
clip-path: inset(0 0 0 0);
}
.services-preview__heading--old { font-family: var(--font-body); font-size: 12px; color: var(--color-muted); }
.services-list__link:hover .services-preview--design .services-preview__heading { animation: sp-title-wipe 0.5s var(--ease-out) 0.9s both; }
.services-list__link:hover .services-preview--refresh .services-preview__layer--new .services-preview__heading { animation: sp-title-wipe 0.7s var(--ease-out) 1.05s both; }
.services-preview__content { display: block; padding: 11px 14px 13px; }
.services-preview__copy {
display: block;
font-family: var(--font-body);
font-size: 10px;
line-height: 1.45;
color: var(--color-fg);
filter: blur(0);
opacity: 1;
}
.services-preview__copy--old { color: var(--color-muted); }
@keyframes sp-copy-focus { from { filter: blur(6px); opacity: 0; transform: translateY(3px); } to { filter: blur(0); opacity: 1; transform: translateY(0); } }
.services-list__link:hover .services-preview--design .services-preview__copy { animation: sp-copy-focus 0.55s var(--ease-out) 1.35s both; }
.services-list__link:hover .services-preview--refresh .services-preview__layer--new .services-preview__copy { animation: sp-copy-focus 0.5s var(--ease-out) 1.25s both; }
.services-preview__cta {
display: inline-block;
margin-top: 9px;
padding: 5px 13px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 8.5px;
letter-spacing: 0.03em;
background: var(--color-accent);
color: var(--color-accent-fg);
transform: scale(1);
opacity: 1;
}
.services-preview__cta--old { border-radius: 3px; background: var(--color-border); color: var(--color-muted); }
@keyframes sp-cta-spring { 0% { transform: scale(0.7); opacity: 0; } 65% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.services-list__link:hover .services-preview--design .services-preview__cta { animation: sp-cta-spring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s both; }
.services-list__link:hover .services-preview--refresh .services-preview__layer--new .services-preview__cta { animation: sp-cta-spring 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both; }
/* Refresh: a feathered mask-wipe, not a hard slider line — the new
page dissolves up from underneath the old one across a soft 14%-wide
edge, animated via a registered custom property so the gradient
itself tweens smoothly. */
.services-preview--refresh .services-preview__body { display: block; position: relative; height: calc(100% - 20px); }
.services-preview__layer { position: absolute; inset: 0; }
.services-preview__layer--old { z-index: 1; }
.services-preview__layer--new {
z-index: 2;
background: var(--color-bg-raised);
--sp-wipe: 108%;
-webkit-mask-image: linear-gradient(90deg, black 0%, black calc(var(--sp-wipe) - 22%), transparent var(--sp-wipe));
mask-image: linear-gradient(90deg, black 0%, black calc(var(--sp-wipe) - 22%), transparent var(--sp-wipe));
}
@keyframes sp-wipe-soft { from { --sp-wipe: -8%; } to { --sp-wipe: 108%; } }
.services-list__link:hover .services-preview--refresh .services-preview__layer--new { animation: sp-wipe-soft 1.5s var(--ease-out) 0.5s both; }
.services-preview__wipe-label {
display: block;
position: absolute;
top: 30px;
font-family: var(--font-mono);
font-size: 6.5px;
letter-spacing: 0.06em;
padding: 2px 6px;
border-radius: 2px;
background: rgba(0,0,0,0.45);
color: #F4F0E7;
opacity: 0;
z-index: 4;
}
.services-preview__wipe-label--before { left: 13px; }
.services-preview__wipe-label--after { right: 13px; }
@keyframes sp-label-before { 0%, 6% { opacity: 0; } 14% { opacity: 1; } 38% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes sp-label-after { 0%, 62% { opacity: 0; } 74% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }
.services-list__link:hover .services-preview--refresh .services-preview__wipe-label--before { animation: sp-label-before 1.5s linear 0.5s both; }
.services-list__link:hover .services-preview--refresh .services-preview__wipe-label--after { animation: sp-label-after 1.5s linear 0.5s both; }
}
/* A quiet footnote below the two lead services — everything else Fusco
offers, kept deliberately small so Website Design/Refresh stay the
clear hero product rather than competing with four equal-weight
siblings. */
.services-more {
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: var(--border-hairline);
color: var(--color-muted);
font-size: var(--step-sm);
}
.services-more a { color: var(--color-accent-rich); border-bottom: 1px solid currentColor; }
.services-more a:hover { color: var(--color-accent); }
/* ==========================================================================
Trade grid (Tradies hub)
========================================================================== */
.trade-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--color-border);
border: var(--border-hairline);
margin-top: var(--space-8);
}
@media (min-width: 640px) {
.trade-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.trade-grid { grid-template-columns: repeat(3, 1fr); }
}
.trade-card { background: var(--color-bg); }
.trade-card__link {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
padding: var(--space-8) var(--space-6);
color: inherit;
text-decoration: none;
transition: background var(--dur-base) var(--ease-out);
}
.trade-card__link::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--color-accent); transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-base) var(--ease-out);
}
.trade-card__link:hover::before { transform: scaleX(1); }
.trade-card__link:hover {
background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-bg-raised) 140%);
}
.trade-card__index {
display: block;
font-family: var(--font-mono);
font-size: var(--step-xs);
color: var(--color-muted);
margin-bottom: var(--space-8);
}
.trade-card__title {
font-size: var(--step-md);
font-weight: 400;
margin-bottom: var(--space-3);
transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.trade-card__link:hover .trade-card__title { color: var(--color-accent-rich); transform: translateX(3px); }
.trade-card__desc {
color: var(--color-muted);
font-size: var(--step-sm);
max-width: 32ch;
}
.trade-card__arrow {
width: 16px;
height: 16px;
color: var(--color-muted);
margin-top: auto;
padding-top: var(--space-6);
transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.trade-card__link:hover .trade-card__arrow { transform: translate(2px, -2px); color: var(--color-accent); }
/* Homepage "Who We Build For" — same card styling as the Tradies hub
grid above, but exactly 4 items, so it gets its own column count
(the hub's 3-col breakpoint would strand a lone 4th tile alone on
its own row). This is the section right after the hero, so its own
entrance is deliberately more of a moment than most: the eyebrow,
headline and subtitle reveal in their own sequence (the headline
through a curtain-wipe, not a fade), and the cards travel further
and settle with a slight spring rather than a flat ease. */
.who-head__title[data-reveal] {
opacity: 1;
transform: none;
clip-path: inset(0 100% 0 0);
transition: clip-path 0.7s var(--ease-out) 0.12s;
}
.who-head__title[data-reveal].is-visible { clip-path: inset(0 0 0 0); }
.who-head .section-sub[data-reveal].is-visible { transition-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
.who-head__title[data-reveal] { clip-path: inset(0 0 0 0); }
}
.who-grid__prompt {
margin-top: var(--space-8);
font-family: var(--font-mono);
font-size: var(--step-xs);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-muted);
}
.who-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--color-border);
border: var(--border-hairline);
margin-top: var(--space-4);
}
@media (min-width: 640px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
/* Who We Build For — each card reveals its own industry's palette and
type mood on hover: the plain title crossfades into a styled headline
set in that industry's own font, a hairline rule tinted with the
industry's accent draws in beneath it, and a wash of that same colour
washes very faintly over the card — quiet, not a costume change.
Space is reserved at rest (fixed height, opacity-only animation) so
hovering one card in a shared grid row never shifts the others.
Scoped to .who-grid only — .trade-grid on the Tradies hub reuses
.trade-card and stays untouched. */
.who-grid .who-card__title-wrap { position: relative; display: block; margin-bottom: var(--space-3); }
.who-grid .trade-card__title { margin-bottom: 0; }
.who-grid .who-card__mood {
display: block;
position: absolute;
inset: 0;
font-size: var(--step-md);
color: var(--m1);
opacity: 0;
transform: translateY(3px);
}
.who-grid .who-card__swatches {
display: block;
width: 28px;
height: 1px;
margin-top: var(--space-2);
margin-bottom: var(--space-3);
background: var(--m1);
transform: scaleX(0);
transform-origin: left;
}
@media (hover: hover) and (pointer: fine) {
.who-grid .trade-card__link { transition: background var(--dur-base) var(--ease-out); }
.who-grid .trade-card__link:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--m1, var(--color-accent)) 8%, var(--color-bg)) 0%, var(--color-bg-raised) 140%); }
.who-grid .trade-card__link::before { background: var(--m1, var(--color-accent)); transition: transform var(--dur-slow) var(--ease-out); }
.who-grid .trade-card__index { transition: color var(--dur-base) var(--ease-out) 0.05s; }
.who-grid .trade-card__link:hover .trade-card__index { color: var(--m1); }
.who-grid .trade-card__link:hover .trade-card__arrow { color: var(--m1); }
.who-grid .trade-card__title { transition: opacity 0.2s var(--ease-out); }
.who-grid .who-card__mood { transition: opacity 0.35s var(--ease-out) 0.12s, transform 0.35s var(--ease-out) 0.12s; }
.who-grid .who-card__swatches { transition: transform 0.5s var(--ease-out) 0.3s; }
.who-grid .trade-card__link:hover .trade-card__title { opacity: 0; }
.who-grid .trade-card__link:hover .who-card__mood { opacity: 1; transform: translateY(0); }
.who-grid .trade-card__link:hover .who-card__swatches { transform: scaleX(1); }
}
@media (min-width: 1000px) { .who-grid { grid-template-columns: repeat(4, 1fr); } }
/* Cards cascade in one after another as the section arrives, rather than
the whole row appearing as one flat block — quiet and quick, not a
showpiece. */
.who-grid .trade-card[data-reveal] {
transform: translateY(34px) scale(0.96);
transition: opacity 0.6s var(--ease-out), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.who-grid .trade-card[data-reveal].is-visible { transform: none; }
.who-grid .trade-card:nth-child(1) { transition-delay: 0s; }
.who-grid .trade-card:nth-child(2) { transition-delay: 0.1s; }
.who-grid .trade-card:nth-child(3) { transition-delay: 0.2s; }
.who-grid .trade-card:nth-child(4) { transition-delay: 0.3s; }
/* A very small cursor-tilt on each card — a quiet extra bit of
interaction beyond the colour reveal, applied as an inline transform
by the script below so it can compose with the reveal's own
transform without one clobbering the other. */
@media (hover: hover) and (pointer: fine) {
.who-grid .trade-card__link { transition: background var(--dur-base) var(--ease-out), transform 0.15s var(--ease-out); }
.who-grid .trade-card__link { transform-style: preserve-3d; will-change: transform; }
}
/* ==========================================================================
Gallery / Recent Work (landing page)
========================================================================== */
.gallery { background: var(--color-bg-raised); }
.gallery__grid {
list-style: none;
margin: 0;
padding: 0;
margin-top: var(--space-16);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-16) var(--space-8);
}
@media (min-width: 640px) {
.gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
.gallery__card { display: block; text-decoration: none; color: inherit; }
.gallery__media {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
background: var(--color-placeholder);
}
.gallery__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms var(--ease-out);
}
.gallery__card:hover .gallery__media img,
.gallery__card:focus-visible .gallery__media img { transform: scale(1.045); }
.gallery__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-top: var(--space-5);
}
.gallery__title {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: var(--step-md);
color: var(--color-fg);
transition: color var(--dur-base) var(--ease-out);
}
.gallery__card:hover .gallery__title,
.gallery__card:focus-visible .gallery__title { color: var(--color-accent-rich); }
.gallery__arrow {
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-muted);
transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.gallery__arrow.icon { width: 14px; height: 14px; }
.gallery__card:hover .gallery__arrow,
.gallery__card:focus-visible .gallery__arrow {
background: var(--color-fg);
color: var(--color-bg);
border-color: var(--color-fg);
transform: rotate(45deg);
}
.gallery__meta {
display: block;
margin-top: var(--space-2);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-muted);
}
.gallery__media--all {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
background: transparent;
border: 1px dashed var(--color-border);
transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.gallery__card--all:hover .gallery__media--all,
.gallery__card--all:focus-visible .gallery__media--all {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.gallery__all-title {
font-family: var(--font-display);
font-style: italic;
font-size: var(--step-lg);
color: var(--color-fg);
}
.gallery__card--all .gallery__arrow { position: static; }
@media (prefers-reduced-motion: reduce) {
.gallery__media img, .gallery__title, .gallery__arrow { transition: none; }
}
/* Work index — Featured Projects, homepage only. Every project shown as
a raised card with its real photo, side by side in a grid. On
hover-capable devices a small cursor-tilt (see script.js, same pattern
as the "Who We Build For" trade cards) makes each card tip gently in
3D toward the pointer while its photo pushes in slightly underneath —
a tactile response rather than a flat hover state. Touch devices and
reduced motion just get the static card. */
.work-index__screens {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-6);
margin-top: var(--space-16);
}
.work-index__screen-item { display: block; text-decoration: none; color: inherit; }
.work-index__screen {
display: block;
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background: var(--color-bg-raised);
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--color-fg) 28%, transparent);
transition: transform 0.12s ease-out, box-shadow var(--dur-base) var(--ease-out);
will-change: transform;
}
.work-index__screen-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.work-index__screen-item:hover .work-index__screen {
box-shadow: 0 28px 48px -20px color-mix(in srgb, var(--color-fg) 40%, transparent);
}
.work-index__screen-item:hover .work-index__screen-img { transform: scale(1.06); }
}
.work-index__screen-caption {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-3);
font-family: var(--font-mono);
}
.work-index__screen-name { font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--color-fg); }
.work-index__screen-meta { font-size: 0.6875rem; letter-spacing: 0.01em; color: var(--color-muted); text-align: right; }
@media (max-width: 480px) {
.work-index__screen-caption { flex-direction: column; align-items: flex-start; gap: 2px; }
.work-index__screen-meta { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
.work-index__screen, .work-index__screen-img { transition: none; }
}
.work-index__all { margin-top: var(--space-12); text-align: center; }
/* ==========================================================================
Team
========================================================================== */
.team__grid {
display: grid;
gap: var(--space-16);
}
@media (min-width: 900px) {
.team__grid {
grid-template-columns: 0.85fr 1fr;
align-items: center;
gap: var(--space-32);
}
}
.team__lead {
font-size: var(--step-xl);
font-family: var(--font-display);
font-weight: 400;
line-height: 1.3;
max-width: 22ch;
}
.team__body {
margin-top: var(--space-6);
color: var(--color-muted);
max-width: 56ch;
}
.team__signature {
margin-top: var(--space-12);
padding-top: var(--space-8);
border-top: var(--border-hairline);
font-family: var(--font-display);
font-style: italic;
font-size: var(--step-md);
color: var(--color-fg);
}
.team__signature span {
display: block;
margin-top: var(--space-2);
font-family: var(--font-mono);
font-style: normal;
font-size: var(--step-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-muted);
}
/* ==========================================================================
Featured Projects
========================================================================== */
.case-list {
display: grid;
gap: var(--space-32);
margin-top: var(--space-8);
}
.case {
display: grid;
grid-template-columns: 1fr;
align-items: center;
}
.case__media { aspect-ratio: 4/3; }
.case__media .plate__img { transition: transform 1.1s var(--ease-out); }
.case__media:hover .plate__img { transform: scale(1.04); }
@media (min-width: 900px) {
.case { grid-template-columns: 1.15fr 1fr; gap: 0; }
.case__copy { padding-inline: var(--space-16) 0; }
.case--reverse { grid-template-columns: 1fr 1.15fr; }
.case--reverse .case__media { order: 2; }
.case--reverse .case__copy { padding-inline: 0 var(--space-16); }
}
.case__copy { padding-block: var(--space-8); }
@media (min-width: 900px) { .case__copy { padding-block: 0; } }
.case__title { font-size: var(--step-xl); font-weight: 400; }
.case__title a:hover { color: var(--color-accent); }
.case__desc {
margin-top: var(--space-4);
color: var(--color-muted);
max-width: 46ch;
}
.case__stats {
display: flex;
gap: var(--space-12);
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: var(--border-hairline);
}
.case__stats dt { font-size: var(--step-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.case__stats dd { margin-top: var(--space-1); font-family: var(--font-display); font-size: var(--step-lg); color: var(--color-accent); }
.case__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-8);
font-size: var(--step-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.case__link .icon { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.case__link:hover .icon { transform: translate(2px, -2px); }
/* ==========================================================================
Interactive project showcase (Recent work)
Hovering a project fills the whole section with that project's website hero.
========================================================================== */
.work { position: relative; overflow: hidden; }
/* Full-section background layer */
.work__bg {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out);
}
.work.is-showing .work__bg { opacity: 1; }
.work__bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.06);
transition: opacity var(--dur-slow) var(--ease-out), transform 1.8s var(--ease-out);
}
.work__bg-img.is-active { opacity: 1; transform: scale(1); }
.work__bg-scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(18, 37, 32, 0.68) 0%, rgba(18, 37, 32, 0.8) 100%);
}
.work__inner { position: relative; z-index: 1; }
/* Heading + list text turn light while a project background is showing */
.work.is-showing .eyebrow,
.work.is-showing .section-title,
.work.is-showing .showcase__num,
.work.is-showing .showcase__meta { color: rgba(244, 240, 231, 0.62); }
.work.is-showing .showcase__list,
.work.is-showing .showcase__row { border-color: rgba(244, 240, 231, 0.2); }
.showcase { position: relative; margin-top: var(--space-8); }
.showcase__list { border-top: var(--border-hairline); }
.showcase__row { border-bottom: var(--border-hairline); }
.showcase__link {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-4) var(--space-6);
padding-block: var(--space-8);
}
.showcase__num {
font-family: var(--font-mono);
font-size: var(--step-xs);
color: var(--color-muted);
align-self: start;
padding-top: 0.5em;
transition: color var(--dur-base) var(--ease-out);
}
.showcase__head { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.showcase__title {
font-family: var(--font-display);
font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--color-fg);
transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.showcase__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-muted);
transition: color var(--dur-base) var(--ease-out);
}
.showcase__stat {
color: var(--color-accent);
background: var(--color-accent-soft);
border-radius: 999px;
padding: 2px var(--space-3);
transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.work.is-showing .showcase__stat {
color: #F4F0E7;
background: rgba(244, 240, 231, 0.16);
}
.showcase__arrow {
width: 22px; height: 22px;
color: var(--color-muted);
align-self: center;
transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
/* Inline thumbnail — shown on touch / small screens as an accessible fallback */
.showcase__thumb {
display: none;
position: relative;
grid-column: 1 / -1;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-placeholder);
}
.showcase__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase__follow { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
/* While a background shows, dim every title; light the hovered one */
.work.is-showing .showcase__title { color: rgba(244, 240, 231, 0.4); }
.showcase__link:hover .showcase__title,
.showcase__link:focus-visible .showcase__title {
color: #F4F0E7;
transform: translateX(16px);
}
.showcase__link:hover .showcase__num,
.showcase__link:hover .showcase__meta,
.showcase__link:focus-visible .showcase__num,
.showcase__link:focus-visible .showcase__meta { color: rgba(244, 240, 231, 0.85); }
.showcase__link:hover .showcase__arrow,
.showcase__link:focus-visible .showcase__arrow {
color: #F4F0E7;
transform: translateX(4px);
}
/* Cursor-follow "View Project" cue — trails the pointer with a soft lag
while a row is hovered, echoing the site's restrained lerp-eased motion
rather than snapping straight to the cursor. */
.showcase__follow {
position: fixed;
top: 0;
left: 0;
z-index: 6;
display: block;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out);
will-change: transform;
}
.showcase__follow.is-visible { opacity: 1; }
.showcase__follow-inner {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4);
border-radius: 999px;
background: #F4F0E7;
color: #0A1512;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
transform: translate(-50%, -50%) scale(0.85);
transition: transform var(--dur-base) var(--ease-out);
}
.showcase__follow.is-visible .showcase__follow-inner { transform: translate(-50%, -50%) scale(1); }
.showcase__follow-inner .icon { width: 12px; height: 12px; }
}
/* Touch / no fine-pointer / narrow: show thumbnails, no background swap */
@media (hover: none), (pointer: coarse), (max-width: 899px) {
.work__bg { display: none !important; }
.showcase__link {
grid-template-columns: auto 1fr;
row-gap: var(--space-6);
}
.showcase__num { padding-top: 0.35em; }
.showcase__arrow { display: none; }
.showcase__thumb { display: block; margin-top: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
.work__bg-img { transition: opacity var(--dur-fast) linear; transform: none; }
.work__bg-img.is-active { transform: none; }
.showcase__link:hover .showcase__title,
.showcase__link:focus-visible .showcase__title { transform: none; }
.showcase__follow { display: none !important; }
}
/* ==========================================================================
Process — timeline
========================================================================== */
.timeline {
position: relative;
max-width: 760px;
margin-inline: auto;
margin-top: var(--space-16);
}
.timeline::before {
content: '';
position: absolute;
left: 27px;
top: 8px;
bottom: 8px;
width: 1px;
background: var(--color-border);
}
@media (min-width: 700px) {
.timeline::before { left: 50%; transform: translateX(-0.5px); }
}
.timeline__item {
position: relative;
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--space-6);
padding-block: var(--space-8);
}
.timeline__index {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-bg);
border: var(--border-hairline);
font-family: var(--font-mono);
font-size: var(--step-xs);
color: var(--color-accent);
}
.timeline__body h3 { font-size: var(--step-lg); font-weight: 400; }
.timeline__body p { margin-top: var(--space-2); color: var(--color-muted); max-width: 48ch; }
@media (min-width: 700px) {
.timeline__item { grid-template-columns: 1fr 56px 1fr; gap: var(--space-16); grid-auto-flow: row dense; }
.timeline__item:nth-child(odd) .timeline__body { grid-column: 1; text-align: right; }
.timeline__item:nth-child(odd) .timeline__index { grid-column: 2; }
.timeline__item:nth-child(odd)::after { grid-column: 3; content: ''; }
.timeline__item:nth-child(even) .timeline__index { grid-column: 2; }
.timeline__item:nth-child(even) .timeline__body { grid-column: 3; }
.timeline__item:nth-child(even)::before { grid-column: 1; content: ''; }
.timeline__item:nth-child(odd) .timeline__body p { margin-left: auto; }
}
/* ==========================================================================
Integrations — flow
========================================================================== */
.integrations { background: var(--color-bg-raised); }
.flow {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 0;
max-width: 900px;
margin-inline: auto;
margin-top: var(--space-16);
counter-reset: flow;
}
@media (min-width: 900px) {
.flow { grid-template-columns: repeat(8, 1fr); align-items: start; }
}
.flow__node {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-4);
padding: var(--space-6) 0;
text-align: left;
}
@media (min-width: 900px) {
.flow__node { flex-direction: column; text-align: center; padding: 0 var(--space-2); gap: var(--space-3); }
}
.flow__node .icon {
width: 22px;
height: 22px;
color: var(--color-accent);
flex-shrink: 0;
position: relative;
z-index: 1;
background: var(--color-bg-raised);
}
.flow__node span {
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.02em;
color: var(--color-fg);
}
/* connecting line: vertical on mobile, horizontal on desktop, with a beacon pulse */
.flow::before {
content: '';
position: absolute;
left: 11px;
top: 8px;
bottom: 8px;
width: 1px;
background: var(--color-border);
}
@media (min-width: 900px) {
.flow::before {
left: 6%;
right: 6%;
top: 11px;
bottom: auto;
width: auto;
height: 1px;
}
}
.flow__pulse {
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #B9742A;
box-shadow: 0 0 8px 1px rgba(185, 116, 42, 0.7);
left: 8px;
top: 8px;
offset-path: path('M 0 0 L 0 1000');
animation: flow-travel-v 5s linear infinite;
}
@media (min-width: 900px) {
.flow__pulse {
left: 6%;
top: 8px;
offset-path: path('M 0 0 L 1000 0');
animation: flow-travel-h 6s linear infinite;
}
}
@keyframes flow-travel-v {
0% { transform: translateY(0); opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { transform: translateY(calc(100% + 0px)); opacity: 0; }
}
@keyframes flow-travel-h {
0% { transform: translateX(0); opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { transform: translateX(88vw); opacity: 0; }
}
@media (min-width: 900px) {
@keyframes flow-travel-h {
0% { transform: translateX(0); opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { transform: translateX(min(760px, 88vw)); opacity: 0; }
}
}
@media (prefers-reduced-motion: reduce) {
.flow__pulse { display: none; }
}
/* ==========================================================================
Client voices / testimonials
Editorial: hairline-separated columns, Fraunces quotes, mono metadata.
No cards, stars, quote-mark graphics or headshots.
========================================================================== */
.testimonials { background: var(--color-bg-raised); }
@media (max-width: 599px) {
.testimonials .eyebrow { display: none; }
}
.voices {
display: grid;
grid-template-columns: 1fr;
max-width: 1120px;
margin-top: var(--space-16);
margin-inline: auto;
}
.voice__quote {
font-family: var(--font-display);
font-size: var(--step-md);
font-weight: 400;
line-height: 1.5;
color: var(--color-fg);
text-wrap: pretty;
}
.voice__attr {
margin-top: var(--space-8);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-fg);
}
.voice__loc {
margin-top: var(--space-2);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-muted);
}
/* Stacked on mobile, separated by a hairline rule */
.voice + .voice {
margin-top: var(--space-12);
padding-top: var(--space-12);
border-top: var(--border-hairline);
}
/* Three editorial columns on desktop, divided by vertical hairlines */
@media (min-width: 900px) {
.voices { grid-template-columns: repeat(3, 1fr); }
.voice { padding-inline: var(--space-12); }
.voice:first-child { padding-left: 0; }
.voice:last-child { padding-right: 0; }
.voice + .voice {
margin-top: 0;
padding-top: 0;
border-top: none;
border-left: var(--border-hairline);
}
}
/* ==========================================================================
FAQ
========================================================================== */
.faq__grid {
display: grid;
gap: var(--space-12);
}
@media (min-width: 900px) {
.faq__grid { grid-template-columns: 0.8fr 1fr; gap: var(--space-32); }
.faq__grid .section-head { margin-bottom: 0; position: sticky; top: 110px; align-self: start; }
}
.accordion__item { border-bottom: var(--border-hairline); }
.accordion__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding-block: var(--space-6);
text-align: left;
font-family: var(--font-display);
font-size: var(--step-md);
font-weight: 400;
}
.accordion__trigger .icon { width: 18px; height: 18px; color: var(--color-accent); transition: transform var(--dur-base) var(--ease-out); flex-shrink: 0; }
.accordion__trigger[aria-expanded="true"] .icon { transform: rotate(45deg); }
.accordion__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.accordion__panel > p {
overflow: hidden;
color: var(--color-muted);
max-width: 56ch;
padding-right: var(--space-8);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__item.is-open .accordion__panel > p { padding-bottom: var(--space-6); }
/* ==========================================================================
Always-dark surfaces (CTA / contact form, footer, pricing CTA)
These sit on dark backgrounds in BOTH themes, so pin light-on-dark colours
— otherwise the theme-flipping *-inverse tokens make their text dark-on-dark
in night mode (mirrors the hero fix).
========================================================================== */
.cta,
.footer,
.pricing-cta {
--color-fg-inverse: #F4F0E7;
--color-bg-inverse: #122520;
--color-accent: #D08C3E;
--color-accent-fg: #0E1A17;
}
/* ==========================================================================
Final CTA
========================================================================== */
.cta { position: relative; overflow: hidden; background: var(--color-bg-inverse); color: var(--color-fg-inverse); }
.cta .eyebrow { color: rgba(244, 240, 231, 0.65); }
.cta__media { position: absolute; inset: 0; }
.cta__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__scrim { position: absolute; inset: 0; background: rgba(18, 37, 32, 0.82); }
.cta__inner {
position: relative;
z-index: 1;
display: grid;
gap: var(--space-16);
}
@media (min-width: 900px) {
.cta__inner { grid-template-columns: 1fr 1fr; gap: var(--space-32); align-items: start; }
}
.cta__title {
font-size: var(--step-2xl);
font-weight: 400;
max-width: 14ch;
}
.cta__lede {
margin-top: var(--space-6);
color: rgba(244, 240, 231, 0.78);
font-size: var(--step-md);
max-width: 42ch;
}
.cta__right { display: grid; gap: var(--space-6); align-content: start; }
.cta__booking {
background: #FFFFFF;
border-radius: var(--radius-sm);
overflow: hidden;
align-self: start;
}
.cta__booking-frame { display: block; width: 100%; height: 720px; border: 0; }
.cta__booking-fallback {
padding: var(--space-3) var(--space-4);
font-size: var(--step-xs);
color: #6B6559;
border-top: 1px solid rgba(20, 17, 12, 0.1);
}
.cta__booking-fallback a { color: #14110C; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 899px) { .cta__booking-frame { height: 780px; } }
.cta__form {
display: grid;
gap: var(--space-5);
padding: var(--space-6);
background: #FFFFFF;
border-radius: var(--radius-sm);
color: #14110C;
}
.cta__form-title { font-family: var(--font-display); font-size: var(--step-lg); font-weight: 400; color: #14110C; }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-family: var(--font-mono); font-size: var(--step-xs); letter-spacing: 0.06em; text-transform: uppercase; color: #6B6559; }
.field input, .field textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
font: inherit;
font-size: var(--step-base);
color: #14110C;
background: #FFFFFF;
border: 1px solid rgba(20, 17, 12, 0.22);
border-radius: var(--radius-sm);
}
.field input:focus, .field textarea:focus { outline: none; border-color: #96591A; box-shadow: 0 0 0 3px rgba(150, 89, 26, 0.18); }
.field textarea { resize: vertical; min-height: 110px; }
.cta__submit { justify-self: start; }
.cta__status { font-size: var(--step-sm); color: #96591A; min-height: 1.2em; }
/* ==========================================================================
Footer
========================================================================== */
.footer { background: var(--color-bg-inverse); color: var(--color-fg-inverse); padding-top: var(--space-16); }
.footer__top {
display: grid;
gap: var(--space-12);
padding-bottom: var(--space-16);
border-bottom: var(--border-hairline-inverse);
}
@media (min-width: 700px) {
.footer__top { grid-template-columns: 1fr auto; }
}
.footer__tagline { margin-top: var(--space-4); color: rgba(244, 240, 231, 0.6); max-width: 32ch; font-weight: 300; }
.footer__nav { display: flex; gap: var(--space-16); flex-wrap: wrap; }
.footer__col h4 { font-family: var(--font-mono); font-size: var(--step-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(244, 240, 231, 0.5); margin-bottom: var(--space-4); }
.footer__col ul { display: grid; gap: var(--space-3); font-size: var(--step-sm); font-weight: 300; }
.footer__col a { display: inline-flex; align-items: center; gap: var(--space-2); }
.footer__col a .icon { width: 15px; height: 15px; }
.footer__col a:hover { color: var(--color-accent); }
.footer__location { display: flex; gap: var(--space-2); font-size: var(--step-sm); color: rgba(244, 240, 231, 0.6); font-weight: 300; }
.footer__location .icon { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; }
.footer__bottom {
padding-block: var(--space-8);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-4);
font-size: var(--step-xs);
color: rgba(244, 240, 231, 0.5);
font-weight: 300;
}
.footer__bottom-right { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
/* ONYA — sub-brand credit link, sitewide in the footer. Reproduces its
wordmark (bold word + dot) in the site's own body font rather than
loading ONYA's separate display font just for this one small link. */
.footer__onya { display: inline-flex; align-items: flex-end; gap: 4px; opacity: 0.8; transition: opacity var(--dur-fast) var(--ease-out); }
.footer__onya:hover { opacity: 1; }
.footer__onya-word { font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; color: #FF3B14; line-height: 1; }
.footer__onya-dot { width: 5px; height: 5px; border-radius: 50%; background: #FF3B14; margin-bottom: 1px; }
/* ==========================================================================
Pricing page
========================================================================== */
.pricing-scope { position: relative; }
/* Pricing hero + category quick-nav — three ways in, jumped to by anchor */
.pricing-hero { padding-top: var(--space-16); padding-bottom: var(--space-16); text-align: center; }
.pricing-hero__inner { max-width: 640px; margin-inline: auto; }
.pricing-hero .eyebrow { justify-content: center; }
.pricing-hero__title { font-size: var(--step-3xl); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; }
.pricing-hero__title em { color: var(--color-accent); }
.pricing-hero__lede { margin-top: var(--space-6); font-size: var(--step-md); font-weight: 300; color: var(--color-muted); }
.decision-finder { max-width: 640px; margin: var(--space-12) auto 0; }
.decision-finder__title {
font-family: var(--font-mono);
font-size: var(--step-xs);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-muted);
text-align: center;
margin-bottom: var(--space-4);
}
.decision-finder__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
border-bottom: var(--border-hairline);
}
.decision-finder__row:first-child { border-top: var(--border-hairline); }
.decision-finder__q { color: var(--color-muted); font-size: var(--step-sm); }
.decision-finder .category-nav__link { flex: none; }
@media (max-width: 640px) {
.decision-finder__row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}
.category-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }
.category-nav__link {
font-family: var(--font-mono);
font-size: var(--step-xs);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-fg);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: var(--space-3) var(--space-6);
box-shadow: 0 2px 10px -4px rgba(20, 17, 12, 0.12);
cursor: pointer;
transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.category-nav__link:hover {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-accent-fg);
transform: translateY(-2px);
box-shadow: 0 8px 20px -6px rgba(150, 89, 26, 0.4);
}
.category-nav__link.is-active {
background: var(--color-fg);
border-color: var(--color-fg);
color: var(--color-bg);
}
.category-nav__link.is-active:hover {
background: var(--color-fg);
border-color: var(--color-fg);
color: var(--color-bg);
transform: none;
box-shadow: 0 2px 10px -4px rgba(20, 17, 12, 0.12);
}
/* A section-level category header, reused identically for all three
pricing paths (New Website / Refresh / Monthly Care) so none reads as
more important than the others. */
.category-head { padding-top: var(--space-16); }
/* ==========================================================================
Website Refresh — entry offer + before/after comparison
========================================================================== */
@property --pos {
syntax: '';
inherits: true;
initial-value: 50%;
}
.refresh-top { padding-top: var(--space-16); padding-bottom: var(--space-24); position: relative; }
/* Reuses the same falling icon rain built for the homepage tradie
section (.mini-cta__floaties / .mini-cta__floaty, shared keyframes)
— those classes aren't scoped to .mini-cta, so dropping them into
any position:relative; overflow:hidden section works as-is. */
.refresh-top--rain { overflow: hidden; }
.refresh-top--rain > .container { position: relative; z-index: 1; }
/* This section runs much taller than the homepage/pricing mini-cta
(it has an example gallery above the price card), so the shared
540px fall distance stops well short of the bottom — extend it
here so the rain reaches all the way down to the price card. */
.refresh-top--rain .mini-cta__floaty { animation-name: mini-cta-rain-tall; }
@keyframes mini-cta-rain-tall {
0% { transform: translateY(0) rotate(var(--r, 0deg)); opacity: 0; }
8% { opacity: 0.9; }
70% { opacity: 0.9; }
100% { transform: translateY(1256px) rotate(calc(var(--r, 0deg) + 70deg)); opacity: 0; }
}
.refresh-top__intro { position: relative; }
.refresh__head { position: relative; z-index: 1; }
.refresh__title {
font-family: var(--font-display);
font-size: var(--step-3xl);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
max-width: 16ch;
}
.refresh__title em { color: var(--color-accent); }
.refresh__lede {
margin-top: var(--space-6);
color: var(--color-muted);
font-size: var(--step-md);
font-weight: 300;
max-width: 46ch;
}
.refresh__offer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-8) var(--space-12);
margin-top: var(--space-12);
padding-block: var(--space-8);
border-block: var(--border-hairline);
}
.refresh__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.refresh__price-name {
width: 100%;
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: var(--space-2);
}
.refresh__price-was {
font-family: var(--font-display);
font-size: var(--step-lg);
font-weight: 400;
color: var(--color-muted);
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, var(--color-muted) 70%, transparent);
text-underline-offset: 0;
}
.refresh__price-amount {
font-family: var(--font-display);
font-size: clamp(2.75rem, 2rem + 2.6vw, 4rem);
font-weight: 400;
line-height: 1;
color: var(--color-fg);
}
.refresh__price-note { font-size: var(--step-sm); color: var(--color-muted); }
.refresh__price-intro {
width: 100%;
margin-top: var(--space-3);
font-family: var(--font-display);
font-style: italic;
font-size: var(--step-sm);
color: var(--color-muted);
}
.refresh__price-intro .price-value {
font-style: normal;
color: var(--color-accent);
}
.refresh__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* "What We Refresh" — editorial hairline grid, no cards, no icons.
Matches the testimonials' divided-column language: thin rules do the
separating, typography (mono index, display title) does the rest. */
.refresh-includes { margin-top: var(--space-16); }
.refresh-includes__grid {
display: grid;
grid-template-columns: 1fr;
margin-top: var(--space-6);
border-top: var(--border-hairline);
list-style: none;
padding: 0;
}
.refresh-includes__item {
padding-block: var(--space-6);
border-bottom: var(--border-hairline);
transition: background var(--dur-fast) var(--ease-out);
}
.refresh-includes__item:hover { background: var(--color-bg-raised); }
.refresh-includes__index {
display: block;
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.04em;
color: var(--color-accent);
transition: color var(--dur-fast) var(--ease-out);
}
.refresh-includes__item:hover .refresh-includes__index { color: var(--color-accent-rich); }
.refresh-includes__title {
margin-top: var(--space-2);
font-family: var(--font-display);
font-size: var(--step-lg);
font-weight: 400;
color: var(--color-fg);
}
.refresh-includes__desc {
margin-top: var(--space-1);
font-size: var(--step-sm);
color: var(--color-muted);
}
@media (min-width: 900px) {
.refresh-includes__grid { grid-template-columns: repeat(3, 1fr); }
.refresh-includes__item { padding: var(--space-8); }
.refresh-includes__item:nth-child(3n+1) { padding-left: 0; }
.refresh-includes__item:nth-child(3n) { padding-right: 0; }
.refresh-includes__item:not(:nth-child(3n+1)) { border-left: var(--border-hairline); }
}
/* Before / after comparison slider — breaks out wider than the container.
A flex wrapper centers it so the reveal-on-scroll transform (used by
[data-reveal] on .compare itself) never has to share the transform
property with the centering logic. */
.compare-bleed {
display: flex;
justify-content: center;
margin-top: var(--space-16);
margin-bottom: var(--space-16);
}
.compare { width: 100%; max-width: 1500px; flex-shrink: 0; }
@media (min-width: 900px) {
.compare { width: 94vw; }
}
.compare__frame {
position: relative;
margin-inline: auto;
aspect-ratio: 5 / 3;
max-height: 82vh;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-placeholder);
cursor: ew-resize;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.compare__frame:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.compare__frame.is-nudging { transition: --pos 1.1s var(--ease-out); }
.compare__media { position: absolute; inset: 0; }
.compare__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* The before (existing site) layer is the base; after (Fusco) is
clipped to reveal only from the handle rightward — so the original
site sits on the left, Fusco's redesign on the right. Landing state
shows mostly "before"; dragging left reveals the transformation. */
.compare__media--before { z-index: 1; }
.compare__media--after {
z-index: 2;
clip-path: inset(0 0 0 var(--pos));
}
/* Full-width vignettes guarantee tag contrast no matter what's behind
them — the underlying screenshots range from near-white nav bars to
dark photo skies, so plain text + shadow alone isn't reliable. */
.compare__vignette { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.compare__vignette--top { top: 0; height: 30%; background: linear-gradient(180deg, rgba(10, 21, 18, 0.7) 0%, rgba(10, 21, 18, 0) 100%); }
.compare__vignette--bottom { bottom: 0; height: 30%; background: linear-gradient(0deg, rgba(10, 21, 18, 0.7) 0%, rgba(10, 21, 18, 0) 100%); display: none; }
/* Full frame width (not content width) so the clip-path percentages
below resolve against the same box the --pos boundary is measured
against — otherwise inset()'s "100%" means 100% of this small tag's
own box, clipping it far earlier than the actual reveal edge. Padding
holds the visual left/right inset that `left`/`right` used to give. */
.compare__tag {
position: absolute;
z-index: 4;
top: var(--space-6);
left: 0;
right: 0;
padding-inline: var(--space-8);
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--font-mono);
font-size: var(--step-sm);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #F4F0E7;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.compare__tag strong { font-family: var(--font-mono); font-style: normal; font-size: var(--step-base); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1; }
.compare__tag--before { align-items: flex-start; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__tag--after { text-align: right; align-items: flex-end; clip-path: inset(0 0 0 var(--pos)); }
.compare__handle {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 3;
width: 2px;
background: rgba(244, 240, 231, 0.85);
transform: translateX(var(--pos-px, 0px)) translateX(-50%);
pointer-events: none;
}
.compare__handle-grip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #F4F0E7;
color: #0A1512;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}
.compare__handle-grip .icon { width: 18px; height: 18px; }
.compare__caption { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--step-xs); font-family: var(--font-mono); letter-spacing: 0.02em; }
@media (max-width: 640px) {
.compare__frame { aspect-ratio: 3 / 4; max-height: none; }
/* Source photos are wide (5:3) — on a portrait crop, bias toward the
side that holds the headline / key UI rather than a dead-center crop. */
.compare__media--after img { object-position: 15% center; }
.compare__media--before img { object-position: 30% center; }
/* Not enough width for both tags on one edge — pin them to opposite
corners so they never collide regardless of handle position. */
.compare__tag--after { top: auto; bottom: var(--space-6); }
.compare__vignette--bottom { display: block; }
.refresh__offer { padding-block: var(--space-6); }
.refresh__actions { width: 100%; }
.refresh__actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.compare__media--after, .compare__handle { transition: none !important; }
}
/* Currency switcher — sticky through packages / hosting / services */
/* Second sticky bar, directly under the main nav — always fixed rather
than `position: sticky`, since it now lives outside the pricing scope
entirely (it's part of the persistent nav, not a pricing-section
companion) and needs to stay put across the whole page. --header-h is
set once in script.js from the real rendered header height. */
.currency-bar {
position: fixed;
top: var(--header-h, 73px);
left: 0;
right: 0;
z-index: 90;
background: var(--color-bg);
border-block: var(--border-hairline);
padding-block: var(--space-4);
}
/* Compensates for .currency-bar being removed from normal flow (fixed),
so page content starts below both stacked bars instead of under them.
--bar-h is set once in script.js from the bar's real rendered height. */
#main { padding-top: var(--bar-h, 65px); }
.currency-bar__inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.currency-bar__label {
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-muted);
}
.currency-switch {
position: relative;
display: inline-flex;
background: var(--color-bg-raised);
border-radius: 999px;
padding: 4px;
}
.currency-switch__btn {
position: relative;
z-index: 1;
padding: 8px 22px;
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.08em;
color: var(--color-muted);
border-radius: 999px;
transition: color var(--dur-fast) var(--ease-out);
}
.currency-switch__btn.is-active { color: var(--color-bg); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .currency-switch__btn.is-active { color: var(--color-bg); }
}
[data-theme="dark"] .currency-switch__btn.is-active { color: var(--color-bg); }
.currency-switch__thumb {
position: absolute;
top: 4px;
left: 0;
height: calc(100% - 8px);
background: var(--color-fg);
border-radius: 999px;
transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
z-index: 0;
}
/* First-visit currency hint — a small one-time callout pointing at the
switcher. Shown once via JS (see pricing.js), remembered in
localStorage so returning visitors never see it again. Sits on a
dark ground regardless of light/dark mode so it reads as a distinct
tooltip rather than part of the page surface. */
.currency-hint {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
z-index: 95;
display: flex;
align-items: center;
gap: var(--space-3);
width: max-content;
background: #14110C;
color: #F4F0E7;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--step-sm);
white-space: nowrap;
box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.currency-hint.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.currency-hint__arrow {
position: absolute;
top: -5px;
left: 50%;
width: 10px;
height: 10px;
transform: translateX(-50%) rotate(45deg);
background: #14110C;
}
.currency-hint p { margin: 0; }
.currency-hint__close {
flex: none;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
color: #F4F0E7;
opacity: 0.6;
transition: opacity var(--dur-fast) var(--ease-out);
}
.currency-hint__close:hover { opacity: 1; }
.currency-hint__close .icon { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .currency-hint { transition: none; } }
@media (max-width: 480px) {
.currency-hint { white-space: normal; width: 260px; max-width: calc(100vw - 32px); text-align: center; font-size: var(--step-xs); }
}
/* Animated price swap */
.price-value {
display: inline-block;
transition: opacity 140ms ease, transform 140ms ease;
}
.price-value--swapping {
opacity: 0;
transform: translateY(4px) scale(0.98);
}
/* Website packages */
.packages { position: relative; overflow: hidden; }
.packages::before {
content: '';
position: absolute;
inset: -10% -5% auto -5%;
height: 640px;
background:
radial-gradient(55% 55% at 25% 15%, var(--color-accent-soft), transparent 70%),
radial-gradient(45% 45% at 82% 5%, rgba(185, 116, 42, 0.14), transparent 70%);
pointer-events: none;
z-index: 0;
}
.packages .container { position: relative; z-index: 1; }
.package-grid {
display: grid;
gap: var(--space-8);
grid-template-columns: 1fr;
margin-top: var(--space-16);
align-items: stretch;
}
@media (min-width: 900px) {
.package-grid { grid-template-columns: repeat(3, 1fr); }
}
.reassurance-strip {
margin-top: var(--space-12);
text-align: center;
color: var(--color-muted);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.02em;
}
.package-card {
position: relative;
display: flex;
flex-direction: column;
background: color-mix(in srgb, var(--color-bg) 60%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-8) var(--space-6);
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.package-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.22);
border-color: var(--color-accent);
}
.package-card--featured {
border-color: var(--color-accent);
background: color-mix(in srgb, var(--color-bg) 78%, var(--color-accent-soft));
box-shadow: 0 28px 56px -30px rgba(150, 89, 26, 0.4);
}
@media (min-width: 900px) {
.package-card--featured { transform: translateY(-10px); }
.package-card--featured:hover { transform: translateY(-14px); }
}
.package-card__badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--color-accent);
color: var(--color-accent-fg);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 18px;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 10px 24px -10px rgba(150, 89, 26, 0.55);
}
/* Signature card — identical surface, structure and copy density to its
siblings. The only differences are typographic and spatial: an italic
name, a marginally firmer (still neutral ink, no new hue) border, and a
touch more room at the very bottom. No badge, no colour, no extra copy —
and title/price/button all stay lined up with the other two cards. */
.package-card--signature {
padding-bottom: calc(var(--space-8) + var(--space-3));
border-color: color-mix(in srgb, var(--color-fg) 20%, transparent);
}
.package-card--signature .package-card__name { font-style: italic; }
.package-card__name { font-size: var(--step-lg); font-weight: 400; }
.package-card__desc {
margin-top: var(--space-3);
color: var(--color-muted);
font-size: var(--step-sm);
min-height: 4.6em;
}
/* Every card reserves the same two-line price block (small prefix line +
number line), even when the prefix is empty — this is what keeps the
price numbers, and everything below them (the CTA button), aligned
across Starter / Professional / Signature regardless of copy length. */
.package-card__price {
margin-top: var(--space-6);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.package-card__prefix {
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted);
}
.package-card__prefix--was {
font-family: var(--font-display);
font-size: var(--step-md);
letter-spacing: normal;
text-transform: none;
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, var(--color-muted) 70%, transparent);
}
.package-card__price .price-value {
font-family: var(--font-display);
font-size: var(--step-2xl);
font-weight: 400;
color: var(--color-fg);
}
.package-card__currency {
font-family: var(--font-mono);
font-size: 0.35em;
font-weight: 400;
letter-spacing: 0.08em;
color: var(--color-muted);
margin-left: 6px;
vertical-align: middle;
}
.package-card__cta { margin-top: var(--space-6); width: 100%; justify-content: center; }
.package-card__features {
margin-top: var(--space-8);
display: grid;
gap: var(--space-3);
padding-top: var(--space-6);
border-top: var(--border-hairline);
}
.package-card__features li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--step-sm);
color: var(--color-fg);
}
.feature-check {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-accent-soft);
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.feature-check .icon { width: 12px; height: 12px; color: var(--color-accent); }
/* Website hosting */
.hosting-grid {
display: grid;
gap: var(--space-8);
grid-template-columns: 1fr;
margin-top: var(--space-16);
}
@media (min-width: 800px) {
.hosting-grid { grid-template-columns: repeat(2, 1fr); }
}
.hosting-card {
display: flex;
flex-direction: column;
background: color-mix(in srgb, var(--color-bg) 60%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-8) var(--space-6);
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.hosting-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.2);
}
.hosting-card--featured { border-color: var(--color-accent); }
.hosting-card__icon { width: 28px; height: 28px; color: var(--color-accent); margin-bottom: var(--space-4); }
.hosting-card__name { font-size: var(--step-md); font-weight: 400; }
.hosting-card__desc { margin-top: var(--space-3); color: var(--color-muted); font-size: var(--step-sm); }
.hosting-card__price {
margin-top: var(--space-6);
display: flex;
align-items: baseline;
gap: 4px;
padding-bottom: var(--space-6);
border-bottom: var(--border-hairline);
}
.hosting-card__price .price-value { font-family: var(--font-display); font-size: var(--step-xl); color: var(--color-fg); }
.hosting-card__suffix { color: var(--color-muted); font-size: var(--step-sm); }
.hosting-card__intro { margin-top: var(--space-6); font-size: var(--step-xs); font-weight: 500; color: var(--color-fg); }
.hosting-card__intro + .hosting-card__features { margin-top: var(--space-3); }
.hosting-card__features { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.hosting-card__features li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--step-sm); color: var(--color-fg); }
.hosting-card__note { margin-top: auto; padding-top: var(--space-6); font-size: var(--step-xs); color: var(--color-muted); font-style: italic; }
.hosting-card__best-when {
margin-top: var(--space-6);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-muted);
}
/* "Not sure which makes sense?" line beneath a comparison grid */
.compare-cta { margin-top: var(--space-12); text-align: center; color: var(--color-muted); font-size: var(--step-sm); }
.compare-cta__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-left: var(--space-2);
font-family: var(--font-mono);
font-size: var(--step-xs);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-fg);
padding-bottom: 2px;
border-bottom: 1px solid var(--color-fg);
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.compare-cta__link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.compare-cta__link .icon { width: 14px; height: 14px; }
/* Additional services table */
.table-wrap {
margin-top: var(--space-16);
overflow-x: auto;
border: var(--border-hairline);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-bg) 70%, transparent);
}
.pricing-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.pricing-table td {
padding: var(--space-4) var(--space-6);
border-bottom: var(--border-hairline);
font-size: var(--step-sm);
vertical-align: middle;
transition: background var(--dur-fast) var(--ease-out);
}
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table tr:hover td { background: var(--color-bg-raised); }
.pricing-table__name { color: var(--color-fg); }
.pricing-table__desc { margin-top: 2px; color: var(--color-muted); font-size: var(--step-xs); max-width: 46ch; }
.pricing-table__amount { text-align: right; font-family: var(--font-mono); color: var(--color-fg); white-space: nowrap; }
.pricing-table__hourly td { font-weight: 500; }
.pricing-table__hourly .pricing-table__desc { font-weight: 400; }
.pricing-table__suffix { color: var(--color-muted); margin-left: 3px; font-size: var(--step-xs); }
.pricing-table__from { display: block; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--step-xs); font-weight: 400; }
/* Below ~640px the two-column table no longer fits without horizontal
scroll once each row carries a description line, so rows stack instead
and the price sits under the description like a card meta line. */
@media (max-width: 640px) {
.pricing-table { min-width: 0; display: block; }
.pricing-table tbody { display: block; }
.pricing-table tr { display: block; padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline); }
.pricing-table tr:last-child { border-bottom: none; }
.pricing-table td { display: block; padding: 0; border-bottom: none; }
.pricing-table td:first-child { margin-bottom: var(--space-3); }
.pricing-table__amount { text-align: left; }
.pricing-table__from { display: inline; margin-right: 4px; }
}
/* Restrained secondary CTA band — "already have a website?" / "need more?" */
.mini-cta { border-top: var(--border-hairline); padding-block: var(--space-16); }
.mini-cta__inner { max-width: 560px; margin-inline: auto; text-align: center; }
.mini-cta__inner .eyebrow { justify-content: center; }
.mini-cta__title { font-family: var(--font-display); font-size: var(--step-xl); font-weight: 400; }
.mini-cta__lede { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--step-md); }
.mini-cta__body { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--step-sm); max-width: 48ch; margin-inline: auto; }
.mini-cta__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-8);
font-family: var(--font-mono);
font-size: var(--step-xs);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-fg);
padding-bottom: 2px;
border-bottom: 1px solid var(--color-fg);
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.mini-cta__link:hover { color: var(--color-accent); border-color: var(--color-accent); gap: var(--space-3); }
.mini-cta__link .icon { width: 14px; height: 14px; }
/* Tradie love section — a bright rain of heart and tool icons in a
curated warm palette, falling continuously behind the copy. Bold
and playful by request, a deliberate exception to the site's usual
restraint. Each icon starts fixed above the section (top: -60px)
and animates straight down past its bottom edge, looping — duration
and negative delay are staggered per icon so the rain never
synchronises into visible waves. */
.mini-cta--tradies { position: relative; overflow: hidden; padding-block: var(--space-24); }
.mini-cta--tradies .mini-cta__inner { position: relative; z-index: 1; }
.mini-cta__floaties { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mini-cta__floaty {
position: absolute;
top: -60px;
width: 40px;
height: auto;
opacity: 0;
animation: mini-cta-rain linear infinite;
}
.mini-cta__floaty--1 { left: 3%; width: 44px; color: #C4693F; --r: -10deg; animation-duration: 6.5s; animation-delay: -0.5s; }
.mini-cta__floaty--2 { left: 10%; width: 34px; color: #234A3E; --r: 16deg; animation-duration: 8s; animation-delay: -3s; }
.mini-cta__floaty--3 { left: 17%; width: 30px; color: #B9742A; --r: -22deg; animation-duration: 7s; animation-delay: -5.5s; }
.mini-cta__floaty--4 { left: 24%; width: 36px; color: #301B22; --r: 14deg; animation-duration: 9s; animation-delay: -1.5s; }
.mini-cta__floaty--5 { left: 31%; width: 28px; color: #A9B0A6; --r: 8deg; animation-duration: 6s; animation-delay: -4s; }
.mini-cta__floaty--6 { left: 38%; width: 38px; color: #C4693F; --r: 12deg; animation-duration: 8.5s; animation-delay: -6.5s; }
.mini-cta__floaty--7 { left: 45%; width: 26px; color: #234A3E; --r: -18deg; animation-duration: 7.5s; animation-delay: -2s; }
.mini-cta__floaty--8 { left: 52%; width: 32px; color: #B9742A; --r: 20deg; animation-duration: 6.8s; animation-delay: -7s; }
.mini-cta__floaty--9 { left: 59%; width: 36px; color: #A9B0A6; --r: -12deg; animation-duration: 9.5s; animation-delay: -3.5s; }
.mini-cta__floaty--10 { left: 66%; width: 30px; color: #301B22; --r: 26deg; animation-duration: 7.2s; animation-delay: -0.8s; }
.mini-cta__floaty--11 { left: 73%; width: 28px; color: #234A3E; --r: -15deg; animation-duration: 8.2s; animation-delay: -5s; }
.mini-cta__floaty--12 { left: 80%; width: 34px; color: #B9742A; --r: 10deg; animation-duration: 6.3s; animation-delay: -2.8s; }
.mini-cta__floaty--13 { left: 87%; width: 26px; color: #C4693F; --r: -20deg; animation-duration: 7.8s; animation-delay: -6s; }
.mini-cta__floaty--14 { left: 94%; width: 30px; color: #301B22; --r: 24deg; animation-duration: 9.2s; animation-delay: -1s; }
.mini-cta__floaty--15 { left: 6%; width: 24px; color: #234A3E; --r: -8deg; animation-duration: 6.6s; animation-delay: -4.5s; }
.mini-cta__floaty--16 { left: 96%; width: 26px; color: #A9B0A6; --r: 18deg; animation-duration: 8.8s; animation-delay: -3.2s; }
.mini-cta__floaty--17 { left: 14%; width: 28px; color: #B9742A; --r: 22deg; animation-duration: 7.4s; animation-delay: -8s; }
.mini-cta__floaty--18 { left: 28%; width: 26px; color: #C4693F; --r: -14deg; animation-duration: 6.9s; animation-delay: -2.4s; }
.mini-cta__floaty--19 { left: 42%; width: 24px; color: #234A3E; --r: 16deg; animation-duration: 8.6s; animation-delay: -5.8s; }
.mini-cta__floaty--20 { left: 56%; width: 30px; color: #301B22; --r: -20deg; animation-duration: 7.1s; animation-delay: -0.2s; }
.mini-cta__floaty--21 { left: 70%; width: 26px; color: #A9B0A6; --r: 12deg; animation-duration: 9.4s; animation-delay: -4.2s; }
.mini-cta__floaty--22 { left: 84%; width: 28px; color: #B9742A; --r: -10deg; animation-duration: 6.4s; animation-delay: -7.5s; }
@keyframes mini-cta-rain {
0% { transform: translateY(0) rotate(var(--r, 0deg)); opacity: 0; }
8% { opacity: 0.9; }
85% { opacity: 0.9; }
100% { transform: translateY(540px) rotate(calc(var(--r, 0deg) + 70deg)); opacity: 0; }
}
@media (max-width: 640px) { .mini-cta__floaties { display: none; } }
@media (prefers-reduced-motion: reduce) { .mini-cta__floaty { animation: none; opacity: 0; } }
/* Already have a website */
.migration-steps {
display: grid;
gap: var(--space-12);
grid-template-columns: 1fr;
margin-top: var(--space-16);
text-align: center;
}
@media (min-width: 700px) {
.migration-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}
.migration-step__index {
display: block;
font-family: var(--font-mono);
font-size: var(--step-xl);
color: var(--color-accent);
margin-bottom: var(--space-3);
}
.migration-step p { color: var(--color-muted); font-size: var(--step-sm); max-width: 26ch; margin-inline: auto; }
.migration-note {
margin-top: var(--space-16);
max-width: 640px;
margin-inline: auto;
display: flex;
gap: var(--space-4);
align-items: flex-start;
padding: var(--space-6);
background: var(--color-accent-soft);
border-radius: var(--radius-md);
}
.migration-note .icon { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px; }
.migration-note p { color: var(--color-fg); font-size: var(--step-sm); }
/* Payment terms */
.payment-terms { padding-block: var(--space-16); }
.payment-note {
max-width: 640px;
margin-inline: auto;
display: flex;
gap: var(--space-4);
align-items: flex-start;
padding: var(--space-6);
background: var(--color-accent-soft);
border-radius: var(--radius-md);
}
.payment-note .icon { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px; }
.payment-note__label {
font-family: var(--font-mono);
font-size: var(--step-xs);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
margin: 0 0 var(--space-2);
}
.payment-note__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-1);
color: var(--color-fg);
font-size: var(--step-sm);
}
/* Pricing final CTA */
.pricing-cta { position: relative; overflow: hidden; background: var(--color-bg-inverse); color: var(--color-fg-inverse); text-align: center; }
.pricing-cta__media { position: absolute; inset: 0; }
.pricing-cta__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pricing-cta__scrim { position: absolute; inset: 0; background: rgba(18, 37, 32, 0.82); }
.pricing-cta__inner { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.pricing-cta .eyebrow { justify-content: center; }
.pricing-cta__title { font-size: var(--step-2xl); font-weight: 400; }
.pricing-cta__lede { margin-top: var(--space-6); color: rgba(244, 240, 231, 0.78); font-size: var(--step-md); }
.pricing-cta .btn { margin-top: var(--space-8); }
.pricing-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-8); }
.pricing-cta__actions .btn { margin-top: 0; }
.pricing-cta__note { margin-top: var(--space-4); font-size: var(--step-xs); color: rgba(244, 240, 231, 0.6); }
/* ==========================================================================
Industries (homepage) — who we work with
========================================================================== */
.industries__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
margin-top: var(--space-16);
}
@media (min-width: 700px) {
.industries__grid { grid-template-columns: repeat(2, 1fr); }
}
.industry-card {
position: relative;
display: block;
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-placeholder);
}
@media (min-width: 700px) { .industry-card { aspect-ratio: 5 / 4; } }
.industry-card__media { position: absolute; inset: 0; }
.industry-card__media picture,
.industry-card__media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.1s var(--ease-out);
}
.industry-card:hover .industry-card__media img { transform: scale(1.05); }
.industry-card__scrim {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(10,9,7,0.94) 0%, rgba(10,9,7,0.8) 32%, rgba(10,9,7,0.42) 58%, rgba(10,9,7,0.08) 80%);
transition: background var(--dur-base) var(--ease-out);
}
.industry-card:hover .industry-card__scrim { background: linear-gradient(0deg, rgba(10,9,7,0.97) 0%, rgba(10,9,7,0.85) 32%, rgba(10,9,7,0.48) 58%, rgba(10,9,7,0.1) 80%); }
.industry-card__title,
.industry-card__eyebrow { text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35); }
.industry-card__content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-8);
color: #F4F0E7;
}
.industry-card__eyebrow {
font-family: var(--font-mono);
font-size: 0.875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(244, 240, 231, 0.85);
}
.industry-card__title {
margin-top: var(--space-2);
font-size: var(--step-xl);
font-weight: 400;
letter-spacing: -0.01em;
}
.industry-card__desc {
margin-top: var(--space-3);
font-size: var(--step-sm);
font-weight: 300;
color: rgba(244, 240, 231, 0.82);
max-width: 32ch;
}
.industry-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-6);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.industry-card__link .icon { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.industry-card:hover .industry-card__link .icon { transform: translate(2px, -2px); }
.industries__more {
margin-top: var(--space-8);
text-align: center;
color: var(--color-muted);
font-size: var(--step-sm);
}
.industries__more a { color: var(--color-accent); border-bottom: 1px solid currentColor; }
/* ==========================================================================
Service & landing pages (Phase 2)
Reuses the site's tokens and components; adds a few page-level patterns
so every service/market page shares one consistent, editorial system.
========================================================================== */
.page-hero { padding-top: var(--space-24); padding-bottom: var(--space-16); border-bottom: var(--border-hairline); }
@media (min-width: 768px) { .page-hero { padding-top: var(--space-32); } }
.page-hero__eyebrow { justify-content: flex-start; }
.page-hero__title {
font-size: var(--step-3xl);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.02em;
max-width: 20ch;
}
.page-hero__title em { color: var(--color-accent); }
.page-hero__lede {
margin-top: var(--space-6);
font-size: var(--step-md);
font-weight: 300;
color: var(--color-muted);
max-width: 54ch;
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }
/* Price display within a .page-hero — used by service pages with a flat, quoted fee */
.page-hero__price { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-10); }
.page-hero__price-amount { font-family: var(--font-display); font-size: var(--step-3xl); font-weight: 400; color: var(--color-fg); }
.page-hero__price-note { font-family: var(--font-mono); font-size: var(--step-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
/* Full-bleed photo hero for industry pages (Tradies, Hospitality, Yachting, Lifestyle) —
a shorter, editorial variant of the homepage .hero, so each industry gets a strong,
photography-led first impression rather than the plain-text .page-hero. */
.industry-hero {
position: relative;
min-height: min(50svh, 560px);
display: flex;
align-items: flex-end;
overflow: hidden;
--color-fg-inverse: #F4F0E7;
--color-bg-inverse: #122520;
--color-accent: #D08C3E;
--color-accent-fg: #0E1A17;
}
@media (min-width: 900px) { .industry-hero { min-height: min(58svh, 640px); } }
.industry-hero__media { position: absolute; inset: 0; overflow: hidden; }
.industry-hero__media picture,
.industry-hero__media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
max-width: none;
}
.industry-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(18,37,32,0.86) 0%, rgba(18,37,32,0.42) 46%, rgba(18,37,32,0.14) 68%, rgba(18,37,32,0.3) 100%);
}
.industry-hero__content {
position: relative;
z-index: 1;
width: 100%;
padding-top: var(--space-16);
padding-bottom: var(--space-12);
color: var(--color-fg-inverse);
}
@media (min-width: 768px) { .industry-hero__content { padding-bottom: var(--space-16); } }
.industry-hero__eyebrow {
display: inline-flex;
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(244, 240, 231, 0.85);
background: rgba(244, 240, 231, 0.08);
border: 1px solid rgba(244, 240, 231, 0.18);
border-radius: 999px;
padding: var(--space-2) var(--space-4);
margin-bottom: var(--space-8);
}
.industry-hero__title {
font-size: var(--step-3xl);
font-weight: 400;
max-width: 18ch;
letter-spacing: -0.02em;
line-height: 1.1;
}
.industry-hero__heart {
display: inline-block;
width: 0.6em;
height: 0.6em;
vertical-align: middle;
margin-left: 0.08em;
margin-bottom: 0.12em;
}
.industry-hero__lede {
margin-top: var(--space-6);
font-size: var(--step-md);
font-weight: 300;
max-width: 50ch;
color: rgba(244, 240, 231, 0.88);
}
/* ==========================================================================
Yacht hero — scroll-scrubbed video (yachting-marine-web-design.html only)
==========================================================================
Same colours/typography as .industry-hero above, but full-height and
built around a video instead of a static photo. The title/lede/actions
are visible immediately, exactly like a normal hero; only the video's
currentTime is driven by wheel position at the top of the page — see
the "Yacht hero" block in script.js. On a coarse pointer (touch) or
under reduced motion that JS never engages, so the video simply sits
on its poster frame while the page scrolls normally. */
.yacht-hero {
position: relative;
min-height: min(78svh, 760px);
display: flex;
align-items: flex-end;
overflow: hidden;
--color-fg-inverse: #F4F0E7;
--color-bg-inverse: #122520;
--color-accent: #D08C3E;
--color-accent-fg: #0E1A17;
}
.yacht-hero__media { position: absolute; inset: 0; overflow: hidden; }
.yacht-hero__video {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.yacht-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(18,37,32,0.86) 0%, rgba(18,37,32,0.42) 46%, rgba(18,37,32,0.14) 68%, rgba(18,37,32,0.3) 100%);
}
.yacht-hero__content {
position: relative;
z-index: 1;
width: 100%;
padding-top: var(--space-16);
padding-bottom: var(--space-12);
color: var(--color-fg-inverse);
}
@media (min-width: 768px) { .yacht-hero__content { padding-bottom: var(--space-16); } }
.yacht-hero__eyebrow {
display: inline-flex;
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(244, 240, 231, 0.85);
background: rgba(244, 240, 231, 0.08);
border: 1px solid rgba(244, 240, 231, 0.18);
border-radius: 999px;
padding: var(--space-2) var(--space-4);
margin-bottom: var(--space-8);
}
.yacht-hero__title {
font-size: var(--step-3xl);
font-weight: 400;
max-width: 18ch;
letter-spacing: -0.02em;
line-height: 1.1;
}
.yacht-hero__lede {
margin-top: var(--space-6);
font-size: var(--step-md);
font-weight: 300;
max-width: 50ch;
color: rgba(244, 240, 231, 0.88);
}
.yacht-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-12);
}
/* Tradie offer pill — same translucent-glass treatment as the eyebrow
tag above the title, so it reads as part of the hero's own chrome
instead of a foreign card dropped onto the photo. Sits in normal
document flow (no absolute positioning), so it never overlaps the
title regardless of viewport or how the title wraps. */
.tradie-offer-pill {
display: inline-flex;
align-items: flex-start;
gap: var(--space-2);
margin-top: var(--space-6);
padding: var(--space-3) var(--space-4);
font-size: 13px;
line-height: 1.5;
max-width: 100%;
color: rgba(244, 240, 231, 0.9);
background: rgba(244, 240, 231, 0.08);
border: 1px solid rgba(244, 240, 231, 0.18);
border-radius: var(--radius-md);
text-decoration: none;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@media (min-width: 560px) {
.tradie-offer-pill { align-items: center; padding: var(--space-2) var(--space-4); font-size: var(--step-sm); border-radius: 999px; white-space: nowrap; }
}
.tradie-offer-pill:hover { background: rgba(244, 240, 231, 0.14); border-color: rgba(244, 240, 231, 0.28); }
.tradie-offer-pill__heart { width: 16px; height: 16px; flex: none; margin-top: 0.2em; color: #C4693F; }
@media (min-width: 560px) { .tradie-offer-pill__heart { margin-top: 0; } }
.tradie-offer-pill__was { text-decoration: line-through; opacity: 0.6; }
.tradie-offer-pill__now { font-weight: 600; color: #C4693F; }
/* Light variant — for the pill sitting on the page's normal paper
background (e.g. the homepage's tradie mini-cta) rather than a dark
photo hero. Uses theme tokens, so it follows the site's own
light/dark toggle correctly, unlike the hero variant above which is
deliberately locked to fixed colours to survive a dark photo. */
.tradie-offer-pill--light {
margin-top: var(--space-6);
color: var(--color-fg);
background: var(--color-bg-raised);
border-color: var(--color-border);
}
.tradie-offer-pill--light:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }
.tradie-offer-pill--light .tradie-offer-pill__was { color: var(--color-muted); }
.tradie-offer-badge:hover { transform: translateY(-2px); }
.tradie-offer-badge__heart { width: 28px; height: 28px; color: #954526; margin-bottom: var(--space-3); }
.tradie-offer-badge__title { font-family: var(--font-display); font-size: var(--step-md); font-weight: 500; margin: 0 0 4px; color: #14110C; }
.tradie-offer-badge__body { font-size: 13px; line-height: 1.45; color: #6B6559; margin: 0 0 var(--space-4); }
.tradie-offer-badge__price { margin: 0; font-size: var(--step-lg); }
.tradie-offer-badge__was { text-decoration: line-through; color: #6B6559; font-size: var(--step-sm); margin-right: var(--space-2); }
.tradie-offer-badge__now { font-weight: 600; color: #954526; }
/* Long-form text */
.prose { max-width: 62ch; }
.prose p { color: var(--color-muted); }
.prose p + p { margin-top: var(--space-6); }
.prose a { color: var(--color-accent); border-bottom: 1px solid currentColor; }
/* Journal article body — extends .prose with headings, lists, blockquote */
.journal-body { max-width: 66ch; }
.journal-body > * + * { margin-top: var(--space-6); }
.journal-body p { color: var(--color-muted); font-size: var(--step-base); line-height: 1.7; }
.journal-body a { color: var(--color-accent); border-bottom: 1px solid currentColor; }
.journal-body h2 {
font-size: var(--step-xl);
font-weight: 400;
color: var(--color-fg);
margin-top: var(--space-16) !important;
padding-top: var(--space-8);
border-top: var(--border-hairline);
}
.journal-body > h2:first-child { margin-top: 0 !important; padding-top: 0; border-top: none; }
.journal-body h3 { font-size: var(--step-md); font-weight: 500; color: var(--color-fg); margin-top: var(--space-10) !important; }
.journal-body ul, .journal-body ol { padding-left: 1.25em; color: var(--color-muted); font-size: var(--step-base); line-height: 1.7; }
.journal-body ul { list-style: disc; }
.journal-body ol { list-style: decimal; }
.journal-body li + li { margin-top: var(--space-2); }
.journal-body li::marker { color: var(--color-accent); }
.journal-body strong { color: var(--color-fg); font-weight: 600; }
.journal-body blockquote {
border-left: 2px solid var(--color-accent);
padding-left: var(--space-6);
font-family: var(--font-display);
font-size: var(--step-lg);
font-weight: 400;
font-style: italic;
color: var(--color-fg);
line-height: 1.4;
}
/* Journal byline / meta row — category + read time, under the hero title */
.journal-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-8);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-muted);
}
.journal-meta__category { color: var(--color-accent-rich); }
.journal-meta__dot { opacity: 0.5; }
/* Journal index — flat, editorial list of articles (not a card grid) */
.journal-index { margin-top: var(--space-12); border-top: var(--border-hairline); max-width: 860px; }
.journal-index__item { border-bottom: var(--border-hairline); }
.journal-index__link {
display: block;
padding-block: var(--space-8);
transition: padding-left var(--dur-base) var(--ease-out);
}
.journal-index__link:hover { padding-left: var(--space-4); }
.journal-index__meta {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-accent-rich);
margin-bottom: var(--space-3);
}
.journal-index__title {
font-size: var(--step-lg);
font-weight: 400;
color: var(--color-fg);
max-width: 32ch;
transition: color var(--dur-base) var(--ease-out);
}
.journal-index__link:hover .journal-index__title { color: var(--color-accent-rich); }
.journal-index__dek { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--step-sm); max-width: 60ch; }
/* Journal article banner image — editorial figure, consistent crop regardless of source ratio */
.journal-figure { margin-top: var(--space-16); }
.journal-figure__frame {
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-placeholder);
}
.journal-figure__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journal-figure figcaption {
margin-top: var(--space-3);
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.02em;
color: var(--color-muted);
}
/* Related articles — small block at the foot of each article */
.journal-related { margin-top: var(--space-16); padding-top: var(--space-12); border-top: var(--border-hairline); }
.journal-related h2 { font-size: var(--step-md); font-weight: 400; margin-bottom: var(--space-6); }
.journal-related__list { display: grid; gap: var(--space-4); }
.journal-related__list a { display: block; color: var(--color-fg); font-size: var(--step-sm); border-bottom: var(--border-hairline); padding-bottom: var(--space-4); }
.journal-related__list a:hover { color: var(--color-accent-rich); }
/* Journal article tables — a real comparison table dressed in the same
.journal-body type system as prose, for articles that need one
(timelines, cost breakdowns) without importing the Guide template's
card-grid components. */
.journal-body table {
width: 100%;
margin-top: var(--space-6);
border-collapse: collapse;
font-size: var(--step-sm);
}
.journal-body th, .journal-body td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: var(--border-hairline); vertical-align: top; }
.journal-body thead th { font-family: var(--font-mono); font-size: var(--step-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.journal-body tbody tr:last-child td { border-bottom: none; }
.journal-body td:first-child, .journal-body th:first-child { color: var(--color-fg); font-weight: 500; }
.journal-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 var(--space-2); }
@media (max-width: 640px) { .journal-body table { min-width: 560px; } }
/* Editorial statement band */
.statement { background: var(--color-bg-raised); border-block: var(--border-hairline); }
.statement__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.statement__text {
font-family: var(--font-display);
font-size: var(--step-xl);
font-weight: 400;
line-height: 1.3;
}
.statement__text em { color: var(--color-accent); }
/* Notes list — used for "what's quietly costing you enquiries" etc.
Same treatment as the "Who It's For" list on web-design.html: a mono
index number in its own column and a quiet hover shift (indent, index
and title deepening to the accent colour) — since it's the same
row-of-editorial-content pattern reused site-wide. The index is a CSS
counter rather than markup so every existing page picks it up without
editing each one's list items individually. */
.notes-list { margin-top: var(--space-12); border-top: var(--border-hairline); max-width: 820px; counter-reset: notes-list; }
.notes-list > li {
position: relative;
padding-block: var(--space-6);
padding-left: 3.5rem;
border-bottom: var(--border-hairline);
counter-increment: notes-list;
transition: padding-left var(--dur-base) var(--ease-out);
}
.notes-list > li:hover { padding-left: calc(3.5rem + var(--space-4)); }
.notes-list > li::before {
content: counter(notes-list, decimal-leading-zero);
position: absolute; left: 0; top: var(--space-6);
font-family: var(--font-mono); font-size: var(--step-xs);
color: var(--color-muted);
transition: color var(--dur-base) var(--ease-out);
}
.notes-list > li:hover::before { color: var(--color-accent); }
.notes-list h3 { font-size: var(--step-md); font-weight: 400; transition: color var(--dur-base) var(--ease-out); }
.notes-list > li:hover h3 { color: var(--color-accent-rich); }
.notes-list p { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--step-sm); max-width: 60ch; }
/* ==========================================================================
Trade showcase — text column + device mockup (PROTOTYPE, Builders only)
========================================================================== */
.trade-showcase { display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
@media (min-width: 1080px) {
.trade-showcase { grid-template-columns: 1.05fr 1fr; align-items: start; gap: var(--space-12); }
.trade-showcase .notes-list { max-width: none; }
}
.trade-showcase__mockup { display: none; }
@media (min-width: 1080px) {
.trade-showcase__mockup { display: flex; align-items: flex-end; justify-content: center; position: relative; padding-bottom: var(--space-10); }
}
.device-mockup__laptop { position: relative; width: 480px; max-width: 100%; }
.device-mockup__laptop-frame {
background: #122520;
border-radius: 14px 14px 4px 4px;
padding: 12px 12px 0;
box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.4);
}
.device-mockup__laptop-base {
height: 12px;
background: linear-gradient(180deg, #14231F 0%, #122520 100%);
border-radius: 0 0 6px 6px;
position: relative;
}
.device-mockup__laptop-base::after {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 56px;
height: 4px;
background: #0A1512;
border-radius: 0 0 4px 4px;
}
.device-mockup__screen {
position: relative;
overflow: hidden;
background: var(--color-bg);
border-radius: 4px;
}
.device-mockup__laptop .device-mockup__screen { height: 300px; }
.device-mockup__scale { position: absolute; top: 0; left: 0; transform-origin: top left; }
.device-mockup__laptop .device-mockup__scale { width: 1440px; transform: scale(0.3333); }
.device-mockup__scroll { width: 1440px; animation: deviceMockupScroll var(--mockup-duration, 26s) ease-in-out infinite alternate; }
.device-mockup__scroll img { display: block; width: 1440px; height: var(--mockup-img-h, 2200px); object-fit: cover; object-position: top; }
@keyframes deviceMockupScroll {
0%, 4% { transform: translateY(calc(-1 * var(--mockup-skip, 0px))); }
96%, 100% { transform: translateY(calc(-1 * (var(--mockup-img-h, 2200px) - 900px))); }
}
@media (prefers-reduced-motion: reduce) {
.device-mockup__scroll { animation: none; }
}
.device-mockup__phone {
position: absolute;
right: -34px;
bottom: -34px;
width: 150px;
}
.device-mockup__phone-frame {
background: #122520;
border-radius: 24px;
padding: 9px;
box-shadow: 0 40px 70px -25px rgba(0, 0, 0, 0.45);
}
.device-mockup__phone .device-mockup__screen { height: 325px; border-radius: 16px; }
.device-mockup__phone .device-mockup__scale { width: 390px; transform: scale(0.3846); }
.device-mockup__phone .device-mockup__scroll {
width: 390px;
animation-name: deviceMockupScrollPhone;
animation-duration: var(--mockup-duration, 22s);
}
.device-mockup__phone .device-mockup__scroll img { width: 390px; height: var(--mockup-img-h, 1800px); }
@keyframes deviceMockupScrollPhone {
0%, 4% { transform: translateY(calc(-1 * var(--mockup-skip, 0px))); }
96%, 100% { transform: translateY(calc(-1 * (var(--mockup-img-h, 1800px) - 845px))); }
}
/* Two-column checklist — reuses .feature-check */
.checklist { display: grid; gap: var(--space-4); margin-top: var(--space-12); max-width: 700px; }
@media (min-width: 700px) { .checklist { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-12); } }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--step-sm); color: var(--color-fg); }
.checklist .feature-check { flex: none; margin-top: 1px; }
/* Tag pills — "who it's for" */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.tags li {
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-accent);
background: var(--color-accent-soft);
border-radius: 999px;
padding: var(--space-2) var(--space-4);
}
/* Inline proof / related work note */
.proof-note {
margin-top: var(--space-12);
padding: var(--space-6);
border: var(--border-hairline);
border-radius: var(--radius-md);
max-width: 640px;
display: flex;
gap: var(--space-4);
align-items: flex-start;
}
.proof-note .icon { color: var(--color-accent); flex: none; margin-top: 2px; }
.proof-note p { color: var(--color-muted); font-size: var(--step-sm); }
.proof-note a { color: var(--color-accent); border-bottom: 1px solid currentColor; }
/* Small helpful aside — scope clarifications, fine print */
.scope-note {
margin-top: var(--space-8);
padding: var(--space-6);
background: var(--color-bg-raised);
border-radius: var(--radius-md);
max-width: 700px;
color: var(--color-muted);
font-size: var(--step-sm);
}
/* Guide table of contents — website-refresh-guide.html */
.guide-toc { padding-block: var(--space-8); border-bottom: var(--border-hairline); }
.guide-toc__label {
font-family: var(--font-mono);
font-size: var(--step-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: var(--space-4);
}
.guide-toc__list {
display: grid;
gap: var(--space-2) var(--space-8);
grid-template-columns: 1fr;
counter-reset: toc;
}
@media (min-width: 700px) { .guide-toc__list { grid-template-columns: 1fr 1fr; } }
.guide-toc__list li { counter-increment: toc; font-size: var(--step-sm); }
.guide-toc__list li::before {
content: counter(toc, decimal-leading-zero) ' ';
font-family: var(--font-mono);
color: var(--color-muted);
}
.guide-toc__list a {
color: var(--color-fg);
border-bottom: 1px solid transparent;
transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.guide-toc__list a:hover { color: var(--color-accent); border-color: currentColor; }
/* Final CTA on the guide page — centers the reused price/actions components */
.guide-final-cta .refresh__price,
.guide-final-cta .page-hero__actions { justify-content: center; }