/* ========================================================================== DIGITALLY SOUND — Editorial Light + Spectrum Warm bone (#eeece9) + ink (#1e1e1e). Rainbow accents drawn from the logo. Fraunces (display) · Space Grotesk (UI) · Space Mono (labels) ========================================================================== */ /* ---- Fonts --------------------------------------------------------------- Self-hosted rather than pulled from fonts.googleapis.com. Two third-party requests per page are gone (one of them render-blocking), and no visitor's IP is handed to Google just for loading a typeface - which is what got hotlinked Google Fonts ruled a GDPR breach in Germany. Fraunces and Space Grotesk are variable fonts, so one file covers the whole weight range the site uses. Fraunces keeps its optical-size axis because .display sets font-optical-sizing: auto. The latin-ext faces only download if a page actually contains one of those characters, which is what the unicode-range is for. -------------------------------------------------------------------------- */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/fraunces-latin-ext-opsz-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/space-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/space-mono-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/space-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/space-mono-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; } /* ---- Tokens --------------------------------------------------------------- */ :root { --bone: #eeece9; /* page background */ --bone-2: #e6e3dd; /* raised surface */ --bone-3: #ddd9d2; /* media / placeholder base */ --ink: #1e1e1e; /* primary text */ --ink-2: #171717; /* dark surface (menu) */ --ink-3: #232323; --bone-dim: #5f5c55; /* secondary text */ --bone-mute:#625f57; /* tertiary text - >=4.5:1 on bone, bone-2 and bone-3 (was #98958c, 2.54:1) */ --line: rgba(30, 30, 30, 0.15); --line-soft:rgba(30, 30, 30, 0.08); /* Spectrum — sampled from the Digitally Sound logo */ --c-red: #e63329; --c-orange: #f47b20; --c-yellow: #f4b70e; --c-green: #59b73a; --c-teal: #12b0a6; --c-blue: #2f74d0; --c-indigo: #6a3fd0; --c-magenta:#d6389b; --c-pink: #ff4f9a; --c-red-ink:#d02218; /* text-safe red - 4.54:1 on bone; kept for --spectrum-text */ --c-teal-ink:#0c7771; /* text-safe teal - 4.58:1 on bone (brand #12b0a6 is 2.29:1) */ --c-orange-ink:#ae4f09; /* text-safe orange - 4.57:1 on bone (brand #f47b20 is 2.33:1) */ --c-indigo-ink:#693ed0; /* text-safe indigo - 5.53:1 on bone */ --c-green-ink:#3a7726; /* text-safe green - 4.63:1 on bone (brand #59b73a is 2.16:1) */ --c-blue-ink:#2a68bb; /* text-safe blue - 4.69:1 on bone (brand #2f74d0 is 3.93:1) */ --c-magenta-ink:#be2786;/* text-safe magenta - 4.66:1 on bone (brand #d6389b is 3.64:1) */ /* Accent is teal, not red: red reads as stop / error / slow, which pulls against the plain-English, safe-hands tone the copy sets. */ --accent: var(--c-teal-ink); --spectrum: linear-gradient(90deg, #e63329, #f47b20, #f4b70e, #59b73a, #12b0a6, #2f74d0, #6a3fd0, #d6389b); /* Text-safe spectrum: the same hues darkened so every stop clears 4.5:1 on bone. NOT currently applied - the vivid --spectrum is used for gradient text by design choice, which is a known, accepted WCAG 1.4.3 exception (the yellow stop reads about 1.53:1). Swap it in on `em` and `.grad-text` to make gradient text AA-compliant. */ --spectrum-text: linear-gradient(90deg, #d02218, #ae4f09, #886506, #3a7826, #0c7770, #2b6abf, #693ed0, #c12888); /* Gradient text on a dark surface. The vivid ramp falls to 2.57:1 at the indigo stop against --ink, below even the 3:1 large-text floor. Same hues lifted; every stop clears 4.5:1 on ink. Used by .band and by the Dark display preference. */ --spectrum-on-dark: linear-gradient(90deg, #ff6f61, #f79b4a, #e0bf4a, #7fd45f, #3fc9bd, #6fa3ee, #a184ee, #f072bd); /* Focus ring */ --focus-ring: #1e1e1e; --focus-ring-invert: #eeece9; --spectrum-conic: conic-gradient(from 210deg, #e63329, #f47b20, #f4b70e, #59b73a, #12b0a6, #2f74d0, #6a3fd0, #d6389b, #e63329); --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-ui: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace; /* The scale stopped at --step--1, but six rules were already asking for a --step--2. Two carried a fallback and quietly worked; four did not, and an undefined var() with no fallback does not fall back to the parent rule, it inherits from the parent ELEMENT: those four were rendering at 18.4px, well above the --step--1 they were meant to sit under. Defining it fixes all six and keeps the two that already had a fallback within a hair of where they were. */ --step--2: clamp(0.68rem, 0.645rem + 0.18vw, 0.8rem); --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); --step-1: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); --step-2: clamp(2rem, 1.6rem + 2vw, 3.25rem); --step-3: clamp(3rem, 2rem + 5vw, 6rem); --step-4: clamp(4rem, 2rem + 10vw, 12rem); --gutter: clamp(1.25rem, 4vw, 4rem); --maxw: 1600px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.7s; } /* ---- Base ----------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { background: var(--bone); color: var(--ink); font-family: var(--font-ui); font-size: var(--step-0); line-height: 1.5; overflow-x: hidden; cursor: none; } @media (hover: none) { body { cursor: auto; } } ::selection { background: var(--accent); color: #fff; } /* Spectrum brand ribbon, pinned to the very top */ html::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 300; background: var(--spectrum); background-size: 200% 100%; animation: ribbon 14s linear infinite; } @keyframes ribbon { to { background-position: 200% 0; } } /* Film grain */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0.04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Layout --------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(4.5rem, 10vw, 11rem); position: relative; } .divider { position: relative; border-top: 1px solid transparent; } .divider::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); } .divider.line-in::before { transform: scaleX(1); } /* ---- Typography ----------------------------------------------------------- */ .display { font-family: var(--font-display); font-weight: 340; line-height: 0.92; letter-spacing: -0.03em; font-optical-sizing: auto; } .display em { font-style: italic; font-weight: 340; } .d-xl { font-size: var(--step-4); } .d-lg { font-size: var(--step-3); } .d-md { font-size: var(--step-2); } .d-sm { font-size: var(--step-1); } /* a sub-heading inside a section whose h2 is already d-md */ .eyebrow { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.22em; color: var(--bone-dim); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before { content: ""; width: 1.8em; height: 3px; border-radius: 2px; background: var(--spectrum); } .lead { font-size: var(--step-1); line-height: 1.35; color: var(--ink); max-width: 34ch; } .muted { color: var(--bone-dim); } /* Answer-first "in short" facts row on the service pages (AEO quick answer) */ .answer-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.4rem 2rem; } .answer-facts .lbl { display: block; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--bone-dim); margin-bottom: 0.35rem; } .answer-facts p { max-width: 26ch; } .answer-facts .link { font-family: var(--font-mono); font-size: var(--step--1); } .accent-text { color: var(--accent); } /* Every emphasised (italic) word uses the spectrum gradient, site-wide. */ em { font-style: italic; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* Give the gradient paint-box room so italic overhang (slanted tops and bottom-left descenders) isn't clipped. Negative margins keep text flow. */ padding: 0.06em 0.14em 0.3em; margin: 0 -0.14em; } .grad-text { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: italic; display: inline-block; padding: 0.34em 0.14em 0.32em 16px; margin: -0.34em -0.14em -0.32em -16px; } /* ---- Buttons -------------------------------------------------------------- */ .btn { --pad: 1.05em; position: relative; display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; padding: var(--pad) calc(var(--pad) * 1.6); border: 1px solid var(--ink); border-radius: 100px; overflow: hidden; transition: color 0.5s var(--ease), border-color 0.5s var(--ease); will-change: transform; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); border-radius: 100px; transform: translateY(101%); transition: transform 0.55s var(--ease); } .btn:hover { color: var(--bone); border-color: var(--ink); } .btn:hover::before { transform: translateY(0); } .btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--spectrum-conic); } .btn--solid { background: var(--ink); border-color: var(--ink); color: var(--bone); } .btn--solid::before { background: var(--spectrum); } .btn--solid:hover { color: #fff; border-color: transparent; } .btn--solid .dot { background: var(--c-yellow); } /* Text link */ .link { position: relative; display: inline-block; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; } .link::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%; background: var(--spectrum); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); } /* A permanent spectrum rule under a word, for emphasis in running text. A background image rather than ::after, because ::after draws one bar the width of the whole element: if the phrase wraps, the underline lands under one line and floats past the other. A background repeats per line box. */ .uline { background-image: var(--spectrum); background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 100%; padding-bottom: 3px; } html[data-contrast="dark"] .uline { background-image: var(--spectrum-on-dark); } .link:hover::after { transform: scaleX(1); transform-origin: left; } /* ---- Custom cursor -------------------------------------------------------- */ .cursor, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; } .cursor { width: 46px; height: 46px; border: 1.5px solid var(--bone); transform: translate(-50%, -50%); opacity: 0; transition: width 0.35s var(--ease), height 0.35s var(--ease), opacity 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease); mix-blend-mode: difference; } .cursor-dot { width: 8px; height: 8px; background: var(--spectrum-conic); transform: translate(-50%, -50%); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .cursor.is-hover { opacity: 1; width: 64px; height: 64px; background: var(--bone); border-color: transparent; } .cursor-dot.is-hover { opacity: 0; } .cursor.is-hidden, .cursor-dot.is-hidden { opacity: 0; } @media (hover: none) { .cursor, .cursor-dot { display: none; } } /* ---- Navigation ----------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: clamp(1.1rem, 2.2vw, 1.7rem) var(--gutter); color: var(--ink); transition: transform 0.5s var(--ease); } .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(238, 236, 233, 0.6); border-bottom: 1px solid var(--line-soft); opacity: 0; transition: opacity 0.4s var(--ease); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } .nav.is-solid::before { opacity: 1; } .nav.is-hidden { transform: translateY(-115%); } .nav__logo { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5em; } .nav__logo .mark { width: 15px; height: 15px; border-radius: 50%; background: var(--spectrum-conic); box-shadow: 0 0 0 1px rgba(30,30,30,.08); } .nav__logo-img { height: clamp(40px, 4.4vw, 60px); width: auto; display: block; } .nav__links { display: flex; gap: clamp(1.2rem, 2.5vw, 2.6rem); align-items: center; } .nav__links a { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; position: relative; } /* Anchored to the top, not the bottom: the links are two lines now, and a line pinned to the bottom of a hinted link was drawn straight through its hint text, while the active link (which never has a hint) kept its line under the label. 1.5em is the label's own line box, so every underline sits in the same place whether the link has a second line or not. */ .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; top: calc(1.5em + 5px); height: 2px; background: var(--spectrum); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .nav__links a:hover::after, .nav__links a.active::after { transform: scaleX(1); transform-origin: left; } /* The same plain words the slide-out menu spells out inline. These used to be a tooltip that appeared on hover, which meant a mouse user saw them only if they happened to hover before deciding, and a touch user never saw them at all: there is no hover on a phone. Launch, Improve, Connect, Create and Care are invented words, so the bar was a guessing game for anyone who did not hover. They are a second line now, always there. ::before, because ::after is already the spectrum underline. */ .nav__links { align-items: flex-start; } /* The gap is where the hover/active underline lives, so it has to clear the label's descenders and the hint's ascenders both. */ .nav__links a { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .nav__links a[data-hint]::before { content: attr(data-hint); order: 2; /* under the label, whatever the source order */ font-family: var(--font-mono); font-size: 0.64rem; /* the size it was as a tooltip */ letter-spacing: 0.02em; text-transform: lowercase; white-space: nowrap; color: var(--bone-dim); font-weight: 400; /* 5.66:1 light, 8.42:1 dark */ } /* Blog and Contact need no translation, so they have no second line. Topping the row out keeps every label on one baseline rather than floating each one to the middle of a block only some of them have. */ .nav__toggle { display: none; } /* When the dark mobile menu is open, keep the nav controls visible on top of it */ body.menu-open .nav { transform: none !important; } body.menu-open .nav__logo { opacity: 0; visibility: hidden; } body.menu-open .nav__toggle { color: var(--bone); } /* Mobile menu — dark, for contrast */ .menu { position: fixed; inset: 0; z-index: 190; background: var(--ink-2); color: var(--bone); display: flex; flex-direction: column; justify-content: center; padding: clamp(4.5rem, 10vh, 7rem) var(--gutter) var(--gutter); clip-path: inset(0 0 100% 0); transition: clip-path 0.7s var(--ease); overflow-y: auto; } .menu.is-open { clip-path: inset(0 0 0 0); } .menu a { font-family: var(--font-display); font-size: clamp(1.7rem, 6.5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em; padding-block: 0.06em; display: flex; align-items: baseline; gap: 0.5em; transition: color 0.3s var(--ease); } .menu a:hover { color: var(--c-yellow); } .menu a .idx { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0; } /* Launch, Improve, Connect, Create and Care are our words, not the visitor's. Four plain ones beside each, so nobody has to guess which door is theirs. */ .menu a .hint { font-family: var(--font-mono); font-size: clamp(0.62rem, 0.5rem + 0.4vw, 0.78rem); letter-spacing: 0.04em; text-transform: lowercase; color: var(--bone-dim); margin-left: 0.15em; white-space: nowrap; } @media (max-width: 420px){ .menu a .hint { display: none; } } /* Optional-field marker and the decoder line under the service chips. */ .field__opt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-mute); border: 1px solid var(--line-soft); border-radius: 100px; padding: 0.1em 0.5em; margin-left: 0.4em; vertical-align: middle; } .field__hint { margin-top: 0.7rem; font-size: var(--step--1); color: var(--bone-mute); line-height: 1.5; max-width: 62ch; } .menu a:nth-child(1) .idx { color: var(--c-red); } .menu a:nth-child(2) .idx { color: var(--c-green); } .menu a:nth-child(3) .idx { color: var(--c-blue); } .menu a:nth-child(4) .idx { color: var(--c-magenta); } .menu a:nth-child(5) .idx { color: var(--c-orange); } .menu a:nth-child(6) .idx { color: var(--c-teal); } .menu a:nth-child(7) .idx { color: var(--c-indigo); } .menu a:nth-child(8) .idx { color: var(--c-red); } .menu__foot { margin-top: auto; display: flex; gap: 2rem; flex-wrap: wrap; color: rgba(238,236,233,.6); font-family: var(--font-mono); font-size: var(--step--1); } @media (max-width: 1150px) { .nav__links { display: none; } .nav__toggle { display: inline-flex; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; } } /* ---- Marquee -------------------------------------------------------------- */ .marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding-block: clamp(1rem, 2vw, 1.6rem); } .marquee__track { display: inline-flex; gap: 3rem; animation: marquee 32s linear infinite; will-change: transform; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee span { font-family: var(--font-display); font-size: clamp(1.05rem, 2.3vw, 1.5rem); font-weight: 400; letter-spacing: -0.01em; color: var(--bone-dim); display: inline-flex; align-items: center; gap: 2.4rem; } .marquee span::after { content: "✳"; font-size: 0.6em; } .marquee span:nth-child(6n+1)::after { color: var(--c-red); } .marquee span:nth-child(6n+2)::after { color: var(--c-orange); } .marquee span:nth-child(6n+3)::after { color: var(--c-green); } .marquee span:nth-child(6n+4)::after { color: var(--c-teal); } .marquee span:nth-child(6n+5)::after { color: var(--c-blue); } .marquee span:nth-child(6n)::after { color: var(--c-magenta); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---- Reveal --------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: 0.08s; } [data-reveal-delay="2"] { transition-delay: 0.16s; } [data-reveal-delay="3"] { transition-delay: 0.24s; } [data-reveal-delay="4"] { transition-delay: 0.32s; } .reveal-lines .line { display: block; overflow: hidden; padding-bottom: 0.34em; margin-bottom: -0.34em; } .reveal-lines .line > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); } .reveal-lines.in .line > span { transform: none; } .reveal-lines.in .line:nth-child(2) > span { transition-delay: 0.08s; } .reveal-lines.in .line:nth-child(3) > span { transition-delay: 0.16s; } .reveal-lines.in .line:nth-child(4) > span { transition-delay: 0.24s; } /* ---- Hero ----------------------------------------------------------------- */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: clamp(9.5rem, 18vh, 13rem); padding-bottom: clamp(2rem, 5vw, 4rem); position: relative; overflow-x: clip; } .hero__top { position: absolute; top: clamp(6rem, 14vh, 9rem); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .hero__title { font-size: var(--step-4); } /* The headline used to step down a size on phones to keep each line on one line. Dropped: every other page's headline is var(--step-4) and nine of the thirteen already wrap at 390px, so a smaller hero was the odd one out. */ @media (max-width: 560px) { /* On phones the hero behaves like .pagehead does on every other page: content starts under the nav instead of being pinned to the bottom of a 100svh box, and the eyebrows sit in the flow above the headline. Same padding-top as .pagehead's mobile value, so the rhythm matches. */ .hero { min-height: 0; justify-content: flex-start; padding-top: clamp(7.5rem, 17vh, 9.5rem); } .hero__top { position: static; inset: auto; gap: 0.3rem 1.5rem; margin-bottom: 0.6rem; } .hide-sm { display: none; } } .hero__meta { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-top: clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); padding-top: 1.5rem; } .hero__meta p { max-width: 40ch; color: var(--bone-dim); } .scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.2em; color: var(--bone-dim); } .scroll-cue .bar { width: 2px; height: 46px; background: var(--line); position: relative; overflow: hidden; border-radius: 2px; } .scroll-cue .bar::after { content: ""; position: absolute; inset: 0; background: var(--spectrum); background-size: 100% 300%; transform: translateY(-100%); animation: cue 2.4s var(--ease) infinite; } @keyframes cue { 0% { transform: translateY(-100%); } 45%,100% { transform: translateY(100%); } } /* Scroll cue sits mid-right, clear of the hero CTAs; hidden where space is tight */ .hero__scroll { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); } @media (max-width: 980px) { .hero__scroll { display: none; } } /* Homepage finder link — gentle infinite motion to catch the eye. It was --step--1 mono uppercase sitting beside a paragraph of body copy, which is smaller than the text it is competing with, so it receded. Now a step larger and in Space Mono's 700 weight, with the tracking pulled in a little because bold at this size does not need 0.14em to stay readable. */ .finder-cta { font-size: var(--step-0); font-weight: 700; letter-spacing: 0.1em; } /* A resting underline under the sweeping one. The sweep is absent for about a third of its cycle, so for that third the link had no underline at all and read as plain text. It matters more than that for anyone on reduced motion: the global animation-duration override freezes the sweep at its last keyframe, which is scaleX(0), so they never saw an underline. */ .finder-cta::before { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%; background: var(--spectrum); opacity: 0.4; } .finder-cta:hover::before { opacity: 0; } .finder-cta::after { animation: finderSweep 3.6s var(--ease) infinite; } @keyframes finderSweep { 0% { transform: scaleX(0); transform-origin: left; } 18% { transform: scaleX(1); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: right; } 70%, 100% { transform: scaleX(0); transform-origin: right; } } .finder-cta:hover::after { animation: none; transform: scaleX(1); transform-origin: left; } .finder-cta .arr { display: inline-block; animation: finderNudge 1.6s var(--ease) infinite; } @keyframes finderNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } .finder-cta:hover .arr { animation-play-state: paused; } /* ---- Media / covers ------------------------------------------------------- */ .media { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; border: 1px solid var(--line-soft); container-type: inline-size; } .media__img { position: absolute; inset: 0; transform: scale(1.05); transition: transform 1.1s var(--ease), filter 1.1s var(--ease); background-size: cover; background-position: center; filter: saturate(0.92) contrast(1.02); } .media:hover .media__img { transform: scale(1); filter: saturate(1.05) contrast(1); } /* A real rather than the .media__img background, because a background image cannot carry alt text, cannot be lazy-loaded natively and cannot negotiate AVIF. No hover zoom on these: the portraits are framed illustrations and scaling them would crop into the gold border. */ .media__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Matches the artwork's own 8:5, so nothing is cropped. The illustration was square in its first version and the tile was square with it; when the art changed the tile had to follow, or a 1:1 crop would have taken about a third off each side and both sleeves with it. */ .media--wide { aspect-ratio: 8 / 5; } /* The blog illustrations. Unlike a screenshot, which can be cropped from the bottom and still read, these are single compositions - two sleeves, a paw and a table of objects - and a crop takes a hand off the edge. So the tile carries the artwork's own 1586x992 and object-fit is contain, not cover: nothing is ever cut, and if a future drawing comes in at another ratio it letterboxes onto the bone ground rather than losing an edge. The ground is bone rather than the default ink because the art sits on cream - a dark tile flashed black for as long as the image took to arrive. */ .media--art { background: var(--bone-2); } .media--art .media__photo { object-fit: contain; } .media--link { display: flex; cursor: pointer; } /* The tag pill sits on top of the screenshot, so its job is to label the card, not to compete with it. Tags used to be two words; now that they name the platform as well ("WordPress · WooCommerce · B2B wholesale") the old size drew a black bar across the image. Smaller type, tighter tracking and a width cap, so a long tag wraps to a second line instead of spanning the picture. */ .media__tag { position: absolute; left: 0.7rem; top: 0.7rem; z-index: 3; max-width: calc(100% - 1.4rem); font-family: var(--font-mono); font-size: clamp(0.62rem, 0.58rem + 0.14vw, 0.72rem); line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ink); color: var(--bone); padding: 0.35em 0.7em; border-radius: 100px; } /* On the article cover the pill has more room and less to fight with. */ .article-cover .media__tag { font-size: clamp(0.68rem, 0.62rem + 0.18vw, 0.8rem); left: 1rem; top: 1rem; } /* Typographic gradient covers — brand stand-ins until real photography */ .cover { display: flex; align-items: flex-end; } /* The label sits bottom-left by default. Placed after .cover deliberately: both are single-class selectors, so whichever comes last wins. */ .cover--top { align-items: flex-start; } .cover::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--spectrum); z-index: 2; } .cover__label { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 340; letter-spacing: -0.02em; line-height: 1.04; color: var(--bone); font-size: clamp(1.05rem, 9cqi, 2.4rem); padding: clamp(0.8rem, 5cqi, 1.8rem); max-width: 16ch; text-wrap: balance; transition: transform 1.1s var(--ease); } .cover:hover .cover__label { transform: translateY(-3px); } /* The label was sized for the old tall banner: at full width it set 4rem type, which needs about 124px before it wraps, and any two-line title would have spilled straight out of a 150px strip. */ .article-cover.cover .cover__label { font-size: clamp(1.4rem, 3.4cqi, 2rem); padding: clamp(0.8rem, 2.5cqi, 1.2rem); } /* White chip, full vivid --spectrum as the text - the same treatment as `em` and `.grad-text` everywhere else on the site, and the same accepted WCAG 1.4.3 exception noted on --spectrum-text above. White text on the eight-stop spectrum was tried and abandoned: white measures 1.94:1 on the yellow stop, and orange, green and teal are barely better. The only ground that carries white across all eight hues is a darkened spectrum, which is the dark slab this started from. Two boxes, and that is load-bearing. background-clip:text paints the gradient into the element's BACKGROUND layer, so a ground drawn behind the text covers the glyphs and the label disappears. Ground on the outer span, clipped gradient on the inner one. */ .cover__label--chip { background: #fff; margin: clamp(0.9rem, 4cqi, 1.6rem); padding: 0.42em 0.8em 0.5em; border-radius: 12px; font-size: clamp(1rem, 4.6cqi, 1.7rem); max-width: 18ch; width: max-content; box-shadow: 0 8px 26px rgba(30, 30, 30, 0.20), inset 0 0 0 1px rgba(30, 30, 30, 0.07); } .cover__label--chip > span { background-image: var(--spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Without background-clip:text the glyphs would be invisible. */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .cover__label--chip > span { -webkit-text-fill-color: var(--ink); color: var(--ink); } } .ph-1 { background: radial-gradient(125% 125% at 14% 16%, rgba(230, 51, 41, 0.50), #1e1e1e 58%); } .ph-2 { background: radial-gradient(125% 125% at 14% 16%, rgba(47, 116, 208, 0.50), #1e1e1e 58%); } .ph-3 { background: radial-gradient(125% 125% at 14% 16%, rgba(89, 183, 58, 0.46), #1e1e1e 58%); } .ph-4 { background: radial-gradient(125% 125% at 14% 16%, rgba(106, 63, 208, 0.52), #1e1e1e 58%); } .ph-5 { background: radial-gradient(125% 125% at 14% 16%, rgba(18, 176, 166, 0.46), #1e1e1e 58%); } .ph-6 { background: radial-gradient(125% 125% at 14% 16%, rgba(214, 56, 155, 0.50), #1e1e1e 58%); } /* ---- Work grid ------------------------------------------------------------ */ .work { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem); } .work__item { grid-column: span 6; display: block; align-self: start; } .work__meta { margin-top: 1.15rem; } .work__meta h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 360; letter-spacing: -0.02em; line-height: 1.06; } .work__meta .cat { display: block; margin-top: 0.4rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--bone-dim); text-transform: uppercase; letter-spacing: 0.1em; } .work__num { display: block; margin-bottom: 0.4rem; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; color: var(--accent); } /* Real screenshots get a slow zoom on hover, like the gradient tiles */ .media__photo { transition: transform 1.1s var(--ease); } .work__item:hover .media--shot .media__photo { transform: scale(1.04); } /* Anchor screenshots to the top-left so the site's branding (logo, usually top-left) stays in frame no matter the tile's aspect ratio. Scoped to case-card shots so it never touches the centre-framed team portraits. */ .media--shot .media__photo { object-position: left top; } /* The ink variants, not the vivid palette. These are 14px mono numerals on bone: the brand green came out at 2.16:1 against a 4.5:1 requirement, and every theme reproduced the failure because each one swapped the vivid token for an equally light one. The step numbers and link-row tags were moved to ink for exactly this reason; these two were missed. */ .work__item:nth-child(6n+1) .work__num { color: var(--c-red-ink); } .work__item:nth-child(6n+2) .work__num { color: var(--c-orange-ink); } .work__item:nth-child(6n+3) .work__num { color: var(--c-green-ink); } .work__item:nth-child(6n+4) .work__num { color: var(--c-blue-ink); } .work__item:nth-child(6n+5) .work__num { color: var(--c-indigo-ink); } .work__item:nth-child(6n) .work__num { color: var(--c-magenta-ink); } @media (max-width: 720px) { .work__item, .work__item:nth-child(4n+1), .work__item:nth-child(4n+2), .work__item:nth-child(4n+3), .work__item:nth-child(4n) { grid-column: span 12; } /* Stack the title and category instead of sharing a row */ .work__meta { flex-direction: column; align-items: flex-start; gap: 0.3rem; } } /* ---- Editorial "magazine" grid (Success Stories + Shopify work) ----------- Same 12-col grid, but the tiles run in an asymmetric rhythm, wide 7 paired with narrow 5 and an even 6/6, so a long list reads like a spread instead of a uniform catalogue. Rows always sum to 12, so there are no gaps. Only the .work--mag grids opt in; the homepage rail keeps its own layout. No lead tile. There was a full-width first child, but work.php shuffles the order on every request, so it only ever promoted whichever story happened to land first. The pairs are phased to sum to 12 from item one: they used to start 6+7, which only worked because the lead absorbed slot one, and without it item 2 wrapped and left a six-column hole. Cycle is (7+5), (5+7), (6+6). */ .work--mag .work__item:nth-child(6n+1) { grid-column: span 7; } .work--mag .work__item:nth-child(6n+2) { grid-column: span 5; } .work--mag .work__item:nth-child(6n+3) { grid-column: span 5; } .work--mag .work__item:nth-child(6n+4) { grid-column: span 7; } .work--mag .work__item:nth-child(6n+5) { grid-column: span 6; } .work--mag .work__item:nth-child(6n) { grid-column: span 6; } /* Narrower columns get a slightly taller crop so they don't read as stubs */ .work--mag .work__item:nth-child(6n+2) .media, .work--mag .work__item:nth-child(6n+3) .media { aspect-ratio: 3 / 2; } @media (max-width: 720px) { .work--mag .work__item, .work--mag .work__item:nth-child(6n+1), .work--mag .work__item:nth-child(6n+2), .work--mag .work__item:nth-child(6n+3), .work--mag .work__item:nth-child(6n+4), .work--mag .work__item:nth-child(6n+5), .work--mag .work__item:nth-child(6n) { grid-column: span 12; } .work--mag .work__item .media, .work--mag .work__item:nth-child(6n+2) .media, .work--mag .work__item:nth-child(6n+3) .media { aspect-ratio: 16 / 9; } } /* A pair, not a spread. The magazine rhythm above needs a long list to read as a rhythm: with exactly two tiles, 7 + 5 and two different media ratios just look like one tile failed to grow, with a hole under the short one. Equal halves instead, and the media set to 8:5, which is the artwork's own 1200x750, so the two are the same height and neither is cropped. Bone, not ink, behind them: these are illustrations on cream and a dark tile flashed black for as long as the image took to arrive. */ #case-own .work__item, #case-own .work__item:nth-child(6n+1), #case-own .work__item:nth-child(6n+2) { grid-column: span 6; } #case-own .work__item .media, #case-own .work__item:nth-child(6n+2) .media { aspect-ratio: 8 / 5; background: var(--bone-2); } @media (max-width: 720px) { #case-own .work__item, #case-own .work__item:nth-child(6n+1), #case-own .work__item:nth-child(6n+2) { grid-column: span 12; } #case-own .work__item .media, #case-own .work__item:nth-child(6n+2) .media { aspect-ratio: 8 / 5; } } /* ---- Success-stories rail ------------------------------------------------ The same rail at every width. On a phone it is a thumb gesture and needs nothing else. On desktop it needs buttons, because a mouse has no sideways swipe and shift-scroll is a thing almost nobody discovers. The half-visible next card does the other half of the work: it says there is more without any furniture at all. The buttons are built by caseRail() in main.js rather than sitting in the HTML, so with no JavaScript the rail is still a plain scrollable strip, and they only appear when there is actually something to scroll to. --------------------------------------------------------------------- */ .rail { position: relative; } #case-featured, .work--rail { display: flex; align-items: flex-start; grid-template-columns: none; gap: clamp(1rem, 2vw, 1.75rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.75rem; } #case-featured::-webkit-scrollbar, .work--rail::-webkit-scrollbar { display: none; } #case-featured .work__item, #case-featured .work__item:nth-child(4n+2), #case-featured .work__item:nth-child(4n), .work--rail .work__item, .work--rail .work__item:nth-child(6n+1), .work--rail .work__item:nth-child(6n+2), .work--rail .work__item:nth-child(6n+3), .work--rail .work__item:nth-child(6n+4), .work--rail .work__item:nth-child(6n+5), .work--rail .work__item:nth-child(6n) { flex: 0 0 40%; scroll-snap-align: start; align-self: flex-start; grid-column: auto; } /* A rail of three on a phone wants most of the screen, not 40% of it. */ @media (max-width: 720px) { #case-featured .work__item, .work--rail .work__item { flex-basis: 78%; } } .rail__btn { display: none; } @media (min-width: 721px) { .rail--on .rail__btn { position: absolute; top: var(--rail-btn-y, 34%); transform: translateY(-50%); display: grid; place-items: center; width: 48px; height: 48px; /* Light, like .prefs-fab: these sit on top of artwork that is usually dark, so an ink button would disappear into it. */ border: 1px solid var(--line); border-radius: 50%; background: var(--bone); color: var(--ink); font-family: var(--font-mono); font-size: 1.15rem; line-height: 1; box-shadow: 0 10px 30px rgba(30, 30, 30, 0.22); cursor: pointer; z-index: 3; transition: opacity 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); } .rail--on .rail__btn--prev { left: -16px; } .rail--on .rail__btn--next { right: -16px; } .rail--on .rail__btn:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); } .rail--on .rail__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .rail--on .rail__btn:disabled { opacity: 0; pointer-events: none; } } /* Phone: wider cards, and the rail bleeds to the screen edges. Placed after the block above on purpose, a media query adds no specificity, so this has to come later in the file to win. */ @media (max-width: 720px) { #case-featured { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } #case-featured .work__item, #case-featured .work__item:nth-child(4n+2), #case-featured .work__item:nth-child(4n) { flex-basis: 80%; } } /* ---- Services list -------------------------------------------------------- */ .svc { border-top: 1px solid var(--line); } .svc__row { display: grid; grid-template-columns: 5rem 1fr auto; gap: clamp(1rem, 4vw, 4rem); align-items: center; padding-block: clamp(1.8rem, 4vw, 3rem); border-bottom: 1px solid var(--line); position: relative; transition: padding 0.5s var(--ease), color 0.5s var(--ease); } .svc__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease); } .svc__row:hover { color: var(--bone); padding-inline: clamp(1rem, 3vw, 2.5rem); } .svc__row:hover::before { transform: scaleY(1); transform-origin: top; } .svc__num { font-family: var(--font-mono); font-size: var(--step--1); } .svc__row:nth-child(1) .svc__num { color: var(--c-red); } .svc__row:nth-child(2) .svc__num { color: var(--c-green); } .svc__row:nth-child(3) .svc__num { color: var(--c-blue); } .svc__row:nth-child(4) .svc__num { color: var(--c-magenta); } .svc__row:nth-child(5) .svc__num { color: var(--c-indigo); } .svc__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 340; letter-spacing: -0.02em; } .svc__desc { max-width: 42ch; color: var(--bone-dim); transition: color 0.5s var(--ease); } .svc__row:hover .svc__desc { color: rgba(238,236,233,.75); } .svc__arrow { font-size: 1.6rem; transition: transform 0.5s var(--ease); } .svc__row:hover .svc__arrow { transform: translateX(0.4em) rotate(-45deg); } @media (max-width: 720px) { .svc__row { grid-template-columns: 1fr; gap: 0.6rem; } .svc__arrow { display: none; } } /* ---- Statement / band ----------------------------------------------------- */ .statement .display { max-width: 20ch; } .band { background: var(--ink); color: var(--bone); } .band .lead { color: var(--bone); } .band .eyebrow { color: color-mix(in srgb, var(--bone) 70%, transparent); } .band .btn { border-color: color-mix(in srgb, var(--bone) 38%, transparent); color: var(--bone); } .band .btn::before { background: var(--bone); } .band .btn:hover { color: var(--ink); border-color: var(--bone); } /* ---- Components inside a dark band --------------------------------------- .band inverts a section onto the ink surface. Several components were styled only for the light surface and need the band's palette here. color-mix keeps them tied to the tokens, so a band still inverts correctly under the Dark display preference, where --ink and --bone swap roles. -------------------------------------------------------------------------- */ /* background-IMAGE, never the `background` shorthand: the shorthand resets background-clip and would paint the gradient as a solid block. */ .band :is(em, .grad-text) { background-image: var(--spectrum-on-dark); } /* The price card takes the band's palette instead of punching a light card out of the middle of the section. */ .band .price { background: transparent; border-color: color-mix(in srgb, var(--bone) 34%, transparent); } .band .price .amt, .band .price li { color: var(--bone); } /* 14.14:1 on ink */ .band .price .kicker, .band .price .muted, .band .price .amt small { color: color-mix(in srgb, var(--bone) 72%, transparent); } .band .price li::before { color: var(--c-green); } /* 6.56:1 on ink */ /* Schedule rows. --accent is a deep teal tuned for the light surface and reaches only 3.09:1 here, so the emphasised final date uses the brand teal. */ .band .guide div { border-bottom-color: color-mix(in srgb, var(--bone) 20%, transparent); } .band .guide .p { color: var(--bone); } .band .guide .p b { color: var(--c-teal); } /* 6.18:1 on ink */ /* A band is always the inverse of the page, so in dark mode it is the LIGHT surface, and the brand teal above lands on it at 2.22:1. A darker teal there. Not --c-teal-ink: that token flips with the theme, so in dark mode it IS the brand teal. And not its light-mode value either, because the band ground in dark mode is --ink (#ece9e4), a shade off the page's own bone (#eeece9), which drops #0c7771 to 4.45:1 and just misses. #0b6f69 is 4.97:1 there. */ html[data-contrast="dark"] .band .guide .p b { color: #0b6f69; } /* .btn--solid is an ink-filled button, which vanishes on an ink band. Invert it: solid bone, outline on hover. The rainbow hover slide is dropped here because ink text over the indigo stop is only about 2.4:1. */ .band .btn--solid { background: var(--bone); border-color: var(--bone); color: var(--ink); } .band .btn--solid::before { display: none; } .band .btn--solid:hover { background: transparent; color: var(--bone); border-color: var(--bone); } .band .btn--solid .dot { background: var(--spectrum-conic); } /* ---- Stats ---------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .stat .num { font-family: var(--font-display); font-size: var(--step-3); font-weight: 340; letter-spacing: -0.03em; line-height: 1; } .stat:nth-child(1) .num { color: var(--c-red-ink); } .stat:nth-child(2) .num { color: var(--c-green-ink); } .stat:nth-child(3) .num { color: var(--c-blue-ink); } .stat:nth-child(4) .num { color: var(--c-magenta-ink); } .stat .num .accent-text { color: inherit; } .stat .lab { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--bone-dim); margin-top: 0.8rem; display: block; } @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; } } /* ---- Two-column ----------------------------------------------------------- */ .two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; } .two-col--rev { grid-template-columns: 0.9fr 1.1fr; } @media (max-width: 860px) { .two-col, .two-col--rev { grid-template-columns: 1fr; } } /* ---- Process steps -------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .step { background: var(--bone); padding: clamp(1.5rem, 3vw, 2.5rem); min-height: 15rem; display: flex; flex-direction: column; transition: background 0.5s var(--ease); } .step:hover { background: var(--bone-2); } .step .n { font-family: var(--font-mono); font-size: var(--step--1); } /* The step numbers used the vivid brand hues straight on bone, which is what Lighthouse fails: orange measured 2.33:1 and teal 2.29:1, well under the 4.5:1 floor for text this size. Same four hues, the text-safe versions. */ .step:nth-child(1) .n { color: var(--c-red-ink); } .step:nth-child(2) .n { color: var(--c-orange-ink); } .step:nth-child(3) .n { color: var(--c-teal-ink); } .step:nth-child(4) .n { color: var(--c-indigo-ink); } .step :is(h3, h4) { font-family: var(--font-display); font-size: var(--step-1); font-weight: 360; margin-top: auto; letter-spacing: -0.02em; } .step p { color: var(--bone-dim); margin-top: 0.7rem; font-size: var(--step--1); } @media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } } /* ---- Team ----------------------------------------------------------------- */ .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .team .media { aspect-ratio: 3 / 4; background: var(--bone-2); } .team :is(h3, h4) { font-family: var(--font-display); font-size: var(--step-1); font-weight: 360; margin-top: 1rem; letter-spacing: -0.02em; } .team .role { font-family: var(--font-mono); font-size: var(--step--1); color: var(--bone-dim); text-transform: uppercase; letter-spacing: 0.1em; } .team .role { display: block; min-height: 2.9em; } /* two lines reserved, so a long role never drops one bio below the others */ .team-bio { margin-top: 0.5rem; color: var(--bone-dim); font-size: var(--step--1); line-height: 1.55; } @media (max-width: 900px) { .team { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .team { grid-template-columns: 1fr; } } /* ---- Forms ---------------------------------------------------------------- */ .form { display: grid; gap: 2.2rem; max-width: 640px; } .field { position: relative; } .field label, .field .field__label { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--bone-dim); display: block; margin-bottom: 0.7rem; } .field input, .field textarea, .field select { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--font-ui); font-size: var(--step-1); padding: 0.6rem 0; transition: border-color 0.4s var(--ease); cursor: none; } .field textarea { resize: vertical; min-height: 6rem; } .field input:focus, .field textarea:focus, .field select:focus { border-image: var(--spectrum) 1; } .field input::placeholder, .field textarea::placeholder { color: var(--bone-mute); } .field select option { background: var(--bone); color: var(--ink); } .chips { display: flex; flex-wrap: wrap; gap: 0.7rem; } .chip { border: 1px solid var(--line); border-radius: 100px; padding: 0.6em 1.1em; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; transition: all 0.35s var(--ease); } .chip:hover, .chip.active { background: var(--ink); color: var(--bone); border-color: var(--ink); } /* ---- Footer --------------------------------------------------------------- */ .footer { padding-top: clamp(4rem, 8vw, 8rem); padding-bottom: 2.5rem; border-top: 1px solid var(--line); } .footer__cta { font-family: var(--font-display); font-size: var(--step-4); font-weight: 340; letter-spacing: -0.03em; line-height: 0.92; } .footer__cta a { display: inline-flex; align-items: center; gap: 0.2em; } .footer__cta a:hover em { color: var(--accent); } .footer__cta .line { padding-bottom: 0.5em; margin-bottom: -0.5em; } /* Five columns rather than four. The old Services column ran to nine links against four in every other one, because it was two different things in one list: the five service stages, and the platform pages people arrive on from search. Splitting them along the seam that was already there evens the footer up and makes both halves scannable. */ .footer__grid { display: grid; grid-template-columns: 1.7fr 0.85fr 1.15fr 0.95fr 1.1fr; gap: 2rem; margin-top: clamp(3rem, 7vw, 6rem); padding-top: 2.5rem; border-top: 1px solid var(--line); } .footer__grid :is(h2, h5) { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--bone-dim); margin-bottom: 1.2rem; } .footer__grid a { display: block; padding-block: 0.3rem; } .footer__grid a:hover { color: var(--accent); } .footer__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); font-family: var(--font-mono); font-size: var(--step--1); color: var(--bone-mute); text-transform: uppercase; letter-spacing: 0.1em; } /* Five columns need a real screen. Below that the blurb and the tool take a full row of their own and the four link columns share what is left. */ @media (max-width: 1200px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } .footer__grid > :first-child { grid-column: 1 / -1; } } @media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } } /* Below this a half column is narrower than hello@digitallysound.ie, and the address broke mid-word. One column reads better than a broken address. */ @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; } } /* A grid column will not shrink below its longest unbreakable word, and hello@digitallysound.ie is longer than half a 320px screen, so the whole footer pushed the page 14px wide on the smallest phones. Predates the five-column change, fixed while we are in here. */ .footer__grid > * { min-width: 0; } .footer__grid a { overflow-wrap: anywhere; } /* ---- Free-check nudge ------------------------------------------------------ A details element rather than a scripted panel, so it opens and closes on the keyboard for free and works with JavaScript off. column-reverse puts the panel above the tab, which is what a bottom-corner widget needs and what the source order cannot give you. Shares the corner and the z-index with .sticky-cta, and no page carries both. -------------------------------------------------------------------------- */ .nudge { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 180; width: min(330px, calc(100vw - 2rem)); display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 0.6rem; } .nudge[hidden] { display: none; } /* On a phone the notice and the nudge both want the bottom of the screen, and the notice has first claim: it is a question the visitor has to answer. One ask at a time. The accessibility panel already holds itself back the same way. Browsers without :has() get the old overlap for the few seconds the notice is up on a first visit, which is where this started. */ body:has(.cookie) .nudge { display: none; } /* Steps aside for the footer, like .sticky-cta. Hidden rather than faded, so it leaves the tab order too and nobody lands on an invisible control. */ .nudge.is-hidden { opacity: 0; visibility: hidden; transform: translateY(0.75rem); pointer-events: none; } .nudge { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s; } .nudge__tab { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.55em; background: var(--ink); color: var(--bone); border-radius: 100px; padding: 0.7em 1.1em; font-family: var(--font-mono); font-size: var(--step--1); box-shadow: 0 10px 40px rgba(30, 30, 30, 0.18); transition: transform 0.3s var(--ease), background 0.3s var(--ease); } .nudge__tab::-webkit-details-marker { display: none; } /* The dot is sized by .btn .dot, and this is a summary rather than a button, so it needs its own. flex: none keeps it round when the label is long. */ .nudge__tab .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-yellow); } .nudge__tab::marker { content: ""; } .nudge__tab:hover { transform: translateY(-2px); } /* Tucked away: the same control, quieter. Flagged on rather than on the element, so the inline pre-paint script can set it before anything is drawn. Setting it from main.js alone painted the loud tab for about 80ms on a slow connection before it shrank. Tucked away: the same control, quieter. Outline instead of solid, smaller text, a two-word label. Loud enough to find on purpose, quiet enough that saying "not now" meant something. */ .nudge__min { display: none; } html[data-nudge="min"] .nudge__full { display: none; } html[data-nudge="min"] .nudge__min { display: inline; } html[data-nudge="min"] .nudge__tab { background: var(--bone); color: var(--bone-dim); border: 1px solid var(--line); padding: 0.45em 0.9em; font-size: var(--step--2); box-shadow: none; } html[data-nudge="min"] .nudge__tab:hover { color: var(--ink); border-color: var(--accent); } html[data-nudge="min"] .nudge__tab .dot { background: var(--bone-dim); } html[data-nudge="min"] .nudge__tab:hover .dot { background: var(--c-yellow); } .nudge__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* No background change when it opens. --ink-2 is a fixed dark surface that does not flip with the theme, which is the trap .menu already carries an override for a few hundred lines down: in dark mode --bone is dark too, so this was dark text on a dark tab. The panel appearing is feedback enough. */ .nudge[open] .nudge__tab { box-shadow: 0 6px 20px rgba(30, 30, 30, 0.22); } .nudge__panel { background: var(--bone); border: 1px solid var(--line); border-radius: 16px; padding: 1.15rem 1.25rem; box-shadow: 0 18px 55px rgba(30, 30, 30, 0.20); width: 100%; animation: nudgein 0.3s var(--ease) both; } @keyframes nudgein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .nudge__kicker { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--bone-dim); margin-bottom: 0.4rem; } .nudge__title { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.15; } .nudge__body { font-size: var(--step--1); line-height: 1.55; color: var(--bone-dim); margin: 0.6rem 0 1rem; } .nudge__panel .btn { width: 100%; justify-content: center; } .nudge__close { display: block; width: 100%; margin-top: 0.6rem; padding: 0.4rem; border: none; background: none; cursor: pointer; font-family: var(--font-mono); font-size: var(--step--2); color: var(--bone-dim); text-decoration: underline; text-underline-offset: 3px; } .nudge__close:hover { color: var(--ink); } .nudge__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } html[data-motion="reduce"] .nudge__tab, html[data-motion="reduce"] .nudge__tab:hover { transform: none; transition: none; } html[data-motion="reduce"] .nudge__panel { animation: none; } /* On a phone the tab spans the width it needs and the panel sits above it. */ /* Full width on a phone, and lifted clear of the display-preferences button, which lives in the bottom-left corner and is 38px tall. Side by side there is not enough room for both, so they stack. */ @media (max-width: 480px) { .nudge { left: 1rem; right: 1rem; width: auto; bottom: 4.2rem; } .nudge__tab { font-size: var(--step--2); } } /* ---- Page header ---------------------------------------------------------- */ .pagehead { padding-top: clamp(9rem, 20vh, 14rem); padding-bottom: clamp(2rem, 5vw, 4rem); } .pagehead h1 { font-size: var(--step-4); } .pagehead .meta { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-top: clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); padding-top: 1.5rem; } /* Tighter top spacing on phones so page headings aren't pushed so far down */ @media (max-width: 640px) { .pagehead { padding-top: clamp(6rem, 13vh, 8rem); } .article-head { padding-top: clamp(6rem, 13vh, 8rem); } } /* ---- Preloader ------------------------------------------------------------ */ .preloader { position: fixed; inset: 0; z-index: 10000; background: var(--bone); display: flex; align-items: center; justify-content: center; padding: var(--gutter); transition: clip-path 1s var(--ease); } .preloader.done { clip-path: inset(0 0 100% 0); } /* The equaliser is already in the stylesheet for the band sections. Borrowing it here means the name finally has a picture, at no extra weight. */ .preloader__eq .eq { height: clamp(56px, 11vh, 104px); gap: clamp(4px, 0.7vw, 7px); } .preloader__eq .eq span { width: clamp(3px, 0.5vw, 5px); } .preloader__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(1rem, 4vw, 3rem); } .preloader__say { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .preloader__term { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.2em; color: var(--bone-dim); } .preloader__plain { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.15; letter-spacing: -0.01em; max-width: 30ch; text-wrap: balance; } /* Re-run on every stage change, so each translation arrives rather than blinks */ .preloader__say.is-new .preloader__term, .preloader__say.is-new .preloader__plain { animation: plsay 0.42s var(--ease) both; } .preloader__say.is-new .preloader__plain { animation-delay: 0.07s; } @keyframes plsay { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } } .preloader .count { font-family: var(--font-display); font-size: var(--step-4); line-height: 0.8; font-weight: 340; font-variant-numeric: tabular-nums; } /* The spectrum strip was a static 4px line. Now it is the progress. */ .preloader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; overflow: hidden; } .preloader__bar i { display: block; height: 100%; background: var(--spectrum); transform: scaleX(0); transform-origin: left; will-change: transform; } @media (max-width: 560px) { .preloader__foot { flex-direction: column; align-items: flex-start; gap: 0.9rem; } .preloader__plain { font-size: var(--step-0); } } /* ---- Utilities ------------------------------------------------------------ */ .stack > * + * { margin-top: 1.5rem; } .stack-lg > * + * { margin-top: clamp(2rem, 5vw, 4rem); } .flex-between { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; } .mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: clamp(2.5rem,6vw,5rem); } .text-right { text-align: right; } .badge { display: inline-block; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; border: 1px solid var(--line); border-radius: 100px; padding: 0.4em 1em; color: var(--bone-dim); } /* Cookie notice */ .cookie { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 9990; width: min(430px, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: 0.9rem; background: var(--bone); border: 1px solid var(--line); border-radius: 16px; padding: 1.15rem 1.25rem; box-shadow: 0 18px 55px rgba(30, 30, 30, 0.20); transform: translateY(180%); transition: transform 0.55s var(--ease); } .cookie.show { transform: translateY(0); } .cookie__text { font-size: var(--step--1); line-height: 1.55; color: var(--bone-dim); padding-right: 1.6rem; } .cookie__text a { text-decoration: underline; color: var(--ink); } .cookie__btns { display: flex; gap: 0.55rem; justify-content: flex-end; } .cookie .btn { padding: 0.55em 0.95em; } .cookie__close { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; border: none; background: none; color: var(--bone-dim); font-size: 1.5rem; line-height: 1; border-radius: 50%; transition: color 0.25s var(--ease), background 0.25s var(--ease); } .cookie__close:hover { color: var(--ink); background: var(--bone-2); } @media (max-width: 460px) { .cookie__btns .btn { flex: 1; justify-content: center; } } .footer__privacy { text-decoration: underline; } /* Quiet by design: it is a fact, not a boast. Tabular figures so the number does not jiggle if it updates when LCP settles. */ .footer__perf { font-variant-numeric: tabular-nums; cursor: help; } /* ========================================================================== SERVICE-PAGE COMPONENTS ========================================================================== */ /* Service sub-nav (Launch/Improve/Connect/Create pills) */ .subnav { display: flex; gap: 0.6rem; flex-wrap: wrap; } .subnav a { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; padding: 0.6em 1.15em; border: 1px solid var(--line); border-radius: 100px; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); } .subnav a:hover { border-color: var(--ink); } .subnav a.active { background: var(--ink); color: var(--bone); border-color: var(--ink); } /* Qualifier cards — "Is this for you?" */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.4rem, 2.5vw, 2rem); background: var(--bone); display: flex; flex-direction: column; min-height: 15rem; transition: transform 0.5s var(--ease), background 0.5s var(--ease); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--spectrum); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .card:hover { transform: translateY(-6px); background: var(--bone-2); } .card:hover::before { transform: scaleX(1); } .card .k { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--bone-dim); } .card :is(h3, h4) { font-family: var(--font-display); font-size: var(--step-1); font-weight: 360; letter-spacing: -0.02em; margin-top: 0.5rem; } .card ul { margin-top: auto; padding-top: 1.2rem; } .card li { font-size: var(--step--1); color: var(--bone-dim); padding-block: 0.18rem; } .card p { margin-top: 0.6rem; font-size: var(--step--1); line-height: 1.55; color: var(--bone-dim); } @media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .cards { grid-template-columns: 1fr; } } /* The bottom-alignment on .step h4 and .card ul is a FOUR-column device: at that width the panels are narrow, text wraps, and content nearly fills min-height, so aligning the headings tidies the row. Below four columns the panels get wide and the content short, and the same auto margin opens a void instead - measured at 70-99px on .step and 29-38px on .card in the two-column range, which is where it looks most broken. So each override is tied to its own grid leaving four columns: .steps at 860px, .cards at 900px. Placed after both .step and .card are defined, since a media query adds no specificity and source order decides. -------------------------------------------------------------------------- */ @media (max-width: 860px) { .step { min-height: 0; } .step :is(h3, h4) { margin-top: 0.6rem; } } @media (max-width: 900px) { .card { min-height: 0; } .card ul { margin-top: 0; padding-top: 0.9rem; } } /* Tag / pill list — "What we launch / connect" */ .taglist { display: flex; flex-wrap: wrap; gap: 0.8rem; } .tag { position: relative; border: 1px solid var(--line); border-radius: 100px; padding: 0.7em 1.25em; font-family: var(--font-ui); font-size: var(--step-0); cursor: pointer; user-select: none; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); } .tag::after { content: "+"; margin-left: 0.55em; font-family: var(--font-mono); color: var(--accent); opacity: 0.7; transition: transform 0.35s var(--ease), color 0.35s var(--ease); display: inline-block; } .tag:hover, .tag.is-active { background: var(--ink); color: var(--bone); border-color: var(--ink); } .tag:hover::after, .tag.is-active::after { color: var(--c-yellow); } .tag.is-active::after { transform: rotate(45deg); } /* Tag info popover */ .tagpop { position: fixed; z-index: 9997; width: min(300px, calc(100vw - 2rem)); background: var(--bone); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: 0 18px 55px rgba(30, 30, 30, 0.20); opacity: 0; transform: translateY(6px) scale(0.98); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); pointer-events: none; overflow: hidden; } .tagpop.show { opacity: 1; transform: none; pointer-events: auto; } .tagpop::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--spectrum); } .tagpop h5 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 360; letter-spacing: -0.01em; margin-bottom: 0.4rem; } .tagpop p { font-size: var(--step--1); color: var(--bone-dim); line-height: 1.55; } /* Vertical flow — automation chains */ .flow { display: grid; gap: 0; max-width: 560px; } .flow li { position: relative; padding: 0.9rem 0 0.9rem 2.2rem; border-left: 2px solid var(--line); } .flow li:last-child { border-left-color: transparent; } .flow li::before { content: ""; position: absolute; left: -8px; top: 1.25rem; width: 13px; height: 13px; border-radius: 50%; background: var(--bone); border: 2px solid var(--accent); } .flow li:nth-child(6n+1)::before { border-color: var(--c-red); } .flow li:nth-child(6n+2)::before { border-color: var(--c-orange); } .flow li:nth-child(6n+3)::before { border-color: var(--c-green); } .flow li:nth-child(6n+4)::before { border-color: var(--c-teal); } .flow li:nth-child(6n+5)::before { border-color: var(--c-blue); } .flow li:nth-child(6n)::before { border-color: var(--c-magenta); } .flow li strong { font-family: var(--font-display); font-weight: 360; font-size: var(--step-1); letter-spacing: -0.01em; } .flow li span { display: block; color: var(--bone-dim); font-size: var(--step--1); margin-top: 0.15rem; } /* Productised price card */ .price { border: 1px solid var(--ink); border-radius: 20px; padding: clamp(1.8rem, 4vw, 3rem); background: var(--bone); } .price .kicker { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--bone-dim); } .price .amt { font-family: var(--font-display); font-size: var(--step-3); font-weight: 340; letter-spacing: -0.03em; line-height: 1; margin: 0.4rem 0 1.4rem; } .price .amt small { font-size: 0.3em; color: var(--bone-dim); letter-spacing: 0; } .price ul { columns: 2; column-gap: 2rem; margin-bottom: 1.8rem; } .price li { break-inside: avoid; padding-block: 0.35rem; font-size: var(--step-0); } .price li::before { content: "✓"; color: var(--c-green); font-family: var(--font-mono); margin-right: 0.6em; } @media (max-width: 520px) { .price ul { columns: 1; } } /* Care-plan tiers */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .plan { border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.6rem, 3vw, 2.2rem); display: flex; flex-direction: column; transition: transform 0.5s var(--ease); } .plan:hover { transform: translateY(-6px); } .plan.featured { border-color: var(--ink); position: relative; } .plan.featured::after { content: "Most popular"; position: absolute; top: -0.75rem; left: clamp(1.6rem,3vw,2.2rem); background: var(--ink); color: var(--bone); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.35em 0.8em; border-radius: 100px; } .plan .tier { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; } /* The -ink variants, not the raw brand colours: brand orange is 2.33:1 and brand magenta 3.64:1 on bone, both of which fail at this size. The -ink tokens are the same hues tuned to pass, and they flip with the theme. */ .plan:nth-child(1) .tier { color: var(--c-orange-ink); } .plan:nth-child(2) .tier { color: var(--c-teal-ink); } .plan:nth-child(3) .tier { color: var(--c-magenta-ink); } .plan .amt { font-family: var(--font-display); font-size: var(--step-2); font-weight: 340; letter-spacing: -0.02em; margin: 0.5rem 0 1.2rem; } .plan .amt small { font-size: 0.35em; color: var(--bone-dim); } .plan ul { margin-bottom: 1.6rem; } .plan li { padding-block: 0.3rem; font-size: var(--step--1); color: var(--bone-dim); border-bottom: 1px solid var(--line-soft); } .plan .btn { margin-top: auto; } @media (max-width: 780px) { .plans { grid-template-columns: 1fr; } } /* FAQ accordion */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); padding: 1.4rem 0; } .faq summary { font-family: var(--font-display); font-size: var(--step-1); font-weight: 360; letter-spacing: -0.01em; cursor: none; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent); font-family: var(--font-mono); font-size: 1.4rem; transition: transform 0.35s var(--ease); } .faq details[open] summary::after { content: "–"; } .faq p { color: var(--bone-dim); margin-top: 1rem; max-width: 74ch; } .faq-block { margin-top: clamp(2.5rem, 6vw, 4rem); } .faq-block > h2 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 340; letter-spacing: -0.02em; margin-bottom: 1.2rem; } /* "What makes us different" strip */ .diff { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; } .diff div { background: var(--bone); padding: clamp(1.4rem, 2.5vw, 2rem); } .diff .n { font-family: var(--font-mono); font-size: var(--step--1); } .diff div:nth-child(1) .n { color: var(--c-red); } .diff div:nth-child(2) .n { color: var(--c-orange); } .diff div:nth-child(3) .n { color: var(--c-green); } .diff div:nth-child(4) .n { color: var(--c-blue); } .diff div:nth-child(5) .n { color: var(--c-magenta); } .diff p { margin-top: 0.8rem; font-size: var(--step--1); } @media (max-width: 900px) { .diff { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .diff { grid-template-columns: 1fr; } } /* Sticky corner CTA */ .sticky-cta { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 180; box-shadow: 0 10px 40px rgba(30,30,30,.18); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s; } /* Hidden, not just transparent: visibility takes it out of the tab order too, so nobody lands on an invisible button (see stickyCta in main.js). */ .sticky-cta.is-hidden { opacity: 0; visibility: hidden; transform: translateY(0.75rem); pointer-events: none; } /* What we actually built, per client. Not .flow: that draws a connecting line down the list, which says these things happened in order. They did not, they are fourteen separate jobs for fourteen separate clients. Same typography, no sequence implied. */ .built { display: grid; gap: 0; } .built li { padding: 1.05rem 0; border-bottom: 1px solid var(--line); } .built li strong { display: block; font-family: var(--font-display); font-weight: 360; font-size: var(--step-0); letter-spacing: -0.01em; } .built li span { display: block; margin-top: 0.2rem; color: var(--bone-dim); font-size: var(--step--1); line-height: 1.5; } @media (min-width: 760px) { .built { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); } } /* Price-guide rows */ .guide { display: grid; gap: 0; } .guide div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .guide .p { font-family: var(--font-mono); } .guide .p b { color: var(--accent); font-weight: 400; } /* ========================================================================== BLOG + ARTICLES ========================================================================== */ .post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .post-card { display: block; } /* 3/1, not 3/2. The cover is a typographic gradient panel, not a photograph, so height buys nothing - it just pushes the headline down the card. A letterbox keeps the category legible and puts three posts' worth of title and excerpt on screen at once. */ .post-card .media { aspect-ratio: 3 / 1; } /* ...but a card with real artwork shows all of it. The 3/1 above is right for a gradient panel, where height only pushes the headline down; it is wrong for a drawing, where it would crop about two thirds of the composition. */ .post-card .media--art { aspect-ratio: 1586 / 992; } .post-card__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bone-dim); } .post-card h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 360; letter-spacing: -0.02em; margin-top: 0.7rem; } .post-card p { margin-top: 0.6rem; font-size: var(--step-0); } .post-card:hover h3 { color: var(--accent); } /* The related-reading grids carry two or three posts, not ten, so the fixed three-column track left a dead column on the right - much more obvious now the cards are letterboxed. auto-fit collapses the empty tracks, so two posts fill the row and three still sit in three. The blog index keeps the fixed grid: ten posts fill it properly and the rhythm is the point there. */ #post-related { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } /* ---- Link hub (links.html) ---------------------------------------------- .svc__row is the right language for a list of destinations but far too tall for twenty of them - one row is up to 3rem of padding, and the whole point of this page is seeing everything at a glance. .linkrow is the same idea at a quarter of the height: the ink fill on hover, the spectrum-coloured tag in the left column, the arrow that leans on the way out. */ .links-head { padding-top: clamp(7rem, 16vh, 10rem); padding-bottom: clamp(1.5rem, 3vw, 2rem); } .links-sec { padding-block: clamp(1rem, 2vw, 1.5rem); } .links-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); } .links { border-top: 1px solid var(--line); margin-top: .7rem; } .linkrow { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 1rem; align-items: center; padding: .58rem .2rem; border-bottom: 1px solid var(--line); position: relative; isolation: isolate; color: inherit; text-decoration: none; transition: padding-inline .35s var(--ease), color .35s var(--ease); } .linkrow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease); } .linkrow:hover, .linkrow:focus-visible { color: var(--bone); padding-inline: clamp(.6rem, 2vw, 1.2rem); } .linkrow:hover::before, .linkrow:focus-visible::before { transform: scaleY(1); transform-origin: top; } .linkrow__tag { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .04em; text-align: center; white-space: nowrap; } .linkrow:nth-child(6n+1) .linkrow__tag { color: var(--c-red-ink); } .linkrow:nth-child(6n+2) .linkrow__tag { color: var(--c-orange); } .linkrow:nth-child(6n+3) .linkrow__tag { color: var(--c-green); } .linkrow:nth-child(6n+4) .linkrow__tag { color: var(--c-teal-ink); } .linkrow:nth-child(6n+5) .linkrow__tag { color: var(--c-blue); } .linkrow:nth-child(6n) .linkrow__tag { color: var(--c-magenta); } .linkrow:hover .linkrow__tag, .linkrow:focus-visible .linkrow__tag { color: var(--bone); } .linkrow__txt { display: flex; flex-direction: column; gap: .02rem; min-width: 0; line-height: 1.35; } .linkrow__txt b { font-family: var(--font-display); font-weight: 360; font-size: var(--step-0); letter-spacing: -.01em; } .linkrow__txt i { font-style: normal; font-size: var(--step--1); color: var(--bone-dim); transition: color .35s var(--ease); } .linkrow:hover .linkrow__txt i, .linkrow:focus-visible .linkrow__txt i { color: rgba(238,236,233,.72); } .linkrow__go { font-size: 1.1rem; transition: transform .35s var(--ease); } .linkrow:hover .linkrow__go { transform: translateX(.3em); } @media (max-width: 520px) { .linkrow { grid-template-columns: 2.6rem 1fr auto; gap: .7rem; } .linkrow__txt i { font-size: calc(var(--step--1) * .96); } } @media (max-width: 900px) { .post-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .post-list { grid-template-columns: 1fr; } } .article-head { padding-top: clamp(9rem, 20vh, 13rem); } .article-head h1 { max-width: 20ch; } /* The back link and the eyebrow were both inline-level, so they sat side by side on one line and the eyebrow's margin-top did nothing a line box would respect. The link is navigation, not part of the title block, so it gets its own row; the eyebrow becomes block-level flex so its margin applies. */ .article-head > .link { display: block; width: fit-content; } .article-head .eyebrow { display: flex; width: fit-content; margin-top: clamp(1.8rem, 3.5vw, 2.8rem); } .article-meta { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--bone-dim); margin-top: 1.2rem; } /* A banner strip, not a hero. It was 16/8, which on a desktop made the category label taller than the first two paragraphs of the article. aspect-ratio has to be cleared or it fights the fixed height. */ .article-cover { margin-top: clamp(2rem, 5vw, 3.5rem); aspect-ratio: auto; height: 150px; } /* A case study's hero was a 150px decorative strip, which is right for the typographic gradient panel and useless for a screenshot. When the hero actually carries a shot of the site we built, give it room to be looked at. Two classes, so it beats the rule above wherever either one moves. */ .article-cover.media--shot { height: auto; aspect-ratio: 1600 / 948; } /* Same argument for a post's hero illustration as for a case study's shot: a 150px strip is a decoration, and this one is worth looking at. But a case study's hero IS the payoff, where a post's is the doorway, so this one is capped and centred: at full measure a 1586x992 drawing stands 810px tall on a desktop and puts the opening paragraph below the fold. Capping the width rather than the height keeps the artwork's own ratio, so it is scaled down whole instead of letterboxed onto bone bars. */ .article-cover.media--art { height: auto; aspect-ratio: 1586 / 992; max-width: 840px; margin-left: auto; margin-right: auto; } /* The outbound link to the client's live site, rendered from cases.json's site field. Sits between the story and the questions, so it needs air above it and less below. */ .article-visit { margin-top: clamp(1.6rem, 3vw, 2.4rem); } /* The "try breaking our site" strip on the homepage. Reuses .chipish, the same control the Display panel's presets use, so pressing one here feels like the same object - it is the same setting underneath. */ .tryit { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; } /* A little air before the undo, without pushing it onto a line of its own. */ .tryit__btn--reset { margin-left: 0.4rem; } /* A