/* ============================================================ BOLT case study page Used by /case-studies/{client}/. Tokens and base components (nav, buttons, footer, typography) come from site.css. Page shape, same for every client: 1. Hero photo card + Tom's film side by side, stats beneath 3. Timeline variable number of events, unfolds on scroll 4. More work 5. CTA ============================================================ */ /* ------------------------------------------------------------ Page glow A designed white surface for the whole top of the page, nav bar included. Electric bloom low and left behind the headline, cool fall-off top right, dissolving back to canvas before the timeline. Low alpha on purpose: this reads as light, not as colour. Needs class="has-page-glow" on and as its first child. ------------------------------------------------------------ */ body.has-page-glow { position: relative; background: var(--color-canvas); } .page-glow { position: absolute; top: 0; left: 0; right: 0; height: 1040px; z-index: 0; pointer-events: none; background: radial-gradient(980px 660px at 2% 56%, rgba(226,223,249,.48) 0%, rgba(226,223,249,.18) 44%, rgba(226,223,249,0) 74%), radial-gradient(600px 440px at 12% 94%, rgba(95,90,187,.075) 0%, rgba(95,90,187,0) 70%), radial-gradient(1100px 700px at 98% 18%, rgba(224,224,238,.34) 0%, rgba(224,224,238,0) 66%), linear-gradient(100deg, #FFFFFF 0%, #FEFEFF 42%, #FAF9FD 100%); } .page-glow::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--color-canvas) 100%); } body.has-page-glow .nav-bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background 160ms ease, backdrop-filter 160ms ease; } body.has-page-glow .nav-bar.is-scrolled, body.has-page-glow .nav-bar[data-menu-open="true"] { background: rgba(255,255,255,0.92); backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); } /* Content sits above the glow. The nav is left alone: it is already position:sticky with its own stacking order, and overriding that here silently un-sticks it. */ body.has-page-glow > header, body.has-page-glow > section, body.has-page-glow > footer { position: relative; z-index: 1; } /* ------------------------------------------------------------ 1. Hero text (shared by the hero card below) ------------------------------------------------------------ */ .cs-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-slate); margin-bottom: var(--space-md); } /* The client name is the page title and always sits on one line. nowrap plus a viewport-scaled size is what guarantees that: no max-width, because a ch cap is what forced the wrap in the first place. */ .cs-hero-title { font-size: clamp(23px, 6.6vw, 54px); font-weight: 400; line-height: 1.05; letter-spacing: -1.5px; color: var(--color-ink); margin-bottom: var(--space-lg); white-space: nowrap; } .cs-hero-lede { font-size: 19px; line-height: 1.6; color: var(--color-graphite); max-width: 52ch; padding-top: var(--space-lg); border-top: 1px solid var(--color-hairline); } /* ------------------------------------------------------------ 2. Stat cards Flat by system rule: hairline outline, no shadow, no coloured border. Translucent fill so the glow reads through them. ------------------------------------------------------------ */ .cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .cs-stat { background: rgba(255,255,255,0.62); border: 1px solid var(--color-hairline); border-radius: var(--r-md); padding: var(--space-xl) var(--space-lg) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); } .cs-stat-value { font-size: 40px; font-weight: 400; line-height: 1.0; letter-spacing: -1.0px; color: var(--color-ink); } .cs-stat-label { font-size: 14px; line-height: 1.4; color: var(--color-slate); margin-top: auto; } /* ------------------------------------------------------------ 3. Timeline The story, told as dated events down a spine. Every client page uses this; only the number of events changes. Structure .cs-timeline .tl-spine hairline rail + ink progress line .tl-event one moment in the account .tl-copy time label, heading, prose, optional note .tl-media photo, browser frame, or chart ------------------------------------------------------------ */ /* No visible section header. The first event's date label tells the reader this is a timeline, so a "How it happened" heading was only taking up space. The h2 is kept for the document outline and screen readers. */ /* No top padding: the stats section above already supplies the gap, and doubling it pushed the first event below the fold on a large screen. */ .cs-timeline-section { padding: 0 0 var(--space-section-lg); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Narrow gutter. The date sits on the marker's row and the copy starts just below it, so the reading column stays close to the rail. */ .cs-timeline { position: relative; padding-left: 36px; } /* The rail. A quiet hairline the full height of the timeline, with an ink line drawn over it that tracks scroll position, so the story reads as unfolding rather than as a list that was always there. */ .tl-spine { position: absolute; top: 7px; bottom: 0; left: 5px; width: 1px; background: var(--color-hairline); } .tl-spine-progress { position: absolute; top: 0; left: 0; width: 1px; height: 0; background: var(--color-ink); transition: height 120ms linear; } /* ---- One event ------------------------------------------------------ Every event on every client page uses the same slot order, in this order, with nothing moved and nothing inserted between: 1 .tl-time when it happened always 2 h3 what happened always 3 .tl-lead the point, one paragraph always 4 .tl-body one more short paragraph optional .tl-media photo, frame or chart always That is the whole event. No lists, no stat blocks, no chips. Anything worth saying goes in the two paragraphs, and if it will not fit there it was not worth saying. Prose reads fast on a phone; the same content broken into lists and figure rows reads as furniture and gets skipped. -------------------------------------------------------------------- */ .tl-event { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-section-lg); align-items: start; padding-bottom: 160px; } .tl-event:last-child { padding-bottom: 0; } /* Marker sits on the rail, level with the date */ .tl-event::before { content: ''; position: absolute; left: -36px; top: 5px; width: 11px; height: 11px; border-radius: var(--r-full); background: var(--color-canvas); border: 1px solid var(--color-ash); transition: background 220ms ease, border-color 220ms ease; } .tl-event.is-in::before { background: var(--color-ink); border-color: var(--color-ink); } /* 1. When The date sits on the same row as the marker, so it reads as the label on a timeline node rather than as an eyebrow introducing the heading. The gap below it is deliberately large: it separates the date from the heading so the heading still opens its own event, and it lets the reading column sit close to the rail instead of being pushed out by a date column. */ .tl-time { font-size: 14px; line-height: 1.4; letter-spacing: 0; color: var(--color-slate); margin-bottom: var(--space-xxl); } .tl-copy { position: relative; } /* 2. What The headlines are written to be read on their own, in sequence, as a progressive story. Someone who reads nothing but the six headings should still get the whole case. They carry connectives ("Originally", "So", "Then", "And today") for that reason, so keep them in narrative order and do not rewrite one in isolation. */ .tl-copy h3 { font-size: 32px; font-weight: 400; line-height: 1.1; letter-spacing: -0.8px; color: var(--color-ink); margin-bottom: var(--space-lg); max-width: 26ch; } /* 3. The point, always one block, always ink, always directly under the heading. This is the line that carries the event if nothing else is read. */ .tl-lead { font-size: 19px; line-height: 1.55; color: var(--color-ink); max-width: 42ch; } /* 4. Supporting prose */ .tl-body { margin-top: var(--space-md); max-width: 46ch; } .tl-body p { font-size: 16px; line-height: 1.7; color: var(--color-graphite); margin-bottom: var(--space-md); } .tl-body p:last-child { margin-bottom: 0; } .tl-body strong { font-weight: 600; color: var(--color-ink); } /* Media column. 4:3 is the working ratio. Copy length varies from event to event and from client to client, so the media is centred against the copy rather than pinned to the top: any difference in height splits above and below the photograph instead of pooling underneath it. */ .tl-media { align-self: center; } .tl-media img { width: 100%; display: block; border-radius: var(--r-md); aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-surface-cool); } .tl-media--wide img { aspect-ratio: 2 / 1; } /* Captions sit on the photograph, not under it. Grey text floating below an image pulls the eye away from the copy column; laid into the bottom of the frame on a scrim gradient it reads as part of the picture. */ figure.tl-media { position: relative; border-radius: var(--r-md); overflow: hidden; } figure.tl-media img { border-radius: 0; } figure.tl-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-xxl) var(--space-lg) var(--space-lg); background: linear-gradient(to top, rgba(15,15,18,0.86) 0%, rgba(15,15,18,0.60) 42%, rgba(15,15,18,0) 100%); color: rgba(255,255,255,0.94); font-size: 14px; line-height: 1.45; } /* Exception, documented on purpose: a caption cannot be laid over a light card. The chart keeps its caption underneath. */ .tl-media-caption { margin-top: var(--space-md); font-size: 14px; line-height: 1.5; color: var(--color-slate); max-width: 44ch; } /* Scroll reveal. Each event fades and lifts once it enters the viewport. */ @media (prefers-reduced-motion: no-preference) { .tl-event .tl-copy, .tl-event .tl-media { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms cubic-bezier(.22,.61,.36,1); } .tl-event .tl-media { transition-delay: 90ms; } .tl-event.is-in .tl-copy, .tl-event.is-in .tl-media { opacity: 1; transform: none; } } /* ------------------------------------------------------------ Browser and phone frames, used inside a timeline event ------------------------------------------------------------ */ .cs-browser { border: 1px solid var(--color-hairline); border-radius: var(--r-md); overflow: hidden; background: var(--color-paper); } .cs-browser-bar { display: flex; align-items: center; gap: var(--space-sm); padding: 10px var(--space-md); background: var(--color-canvas-soft); border-bottom: 1px solid var(--color-hairline-soft); } .cs-browser-dots { display: flex; gap: 6px; flex: 0 0 auto; } .cs-browser-dots span { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--color-ash); display: block; } .cs-browser-url { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--color-slate); background: var(--color-paper); border: 1px solid var(--color-hairline-soft); border-radius: var(--r-full); padding: 4px var(--space-sm); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Show the top of the page and crop the rest, so the framed screenshot stands roughly as tall as a photo in the same slot. */ .cs-browser img { width: 100%; display: block; border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; } /* ------------------------------------------------------------ Chart, used inside a timeline event ------------------------------------------------------------ */ .cs-chart-wrap { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-md); padding: var(--space-lg); } .cs-chart { width: 100%; height: auto; display: block; } .cs-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-hairline); } .cs-chart-legend div { display: flex; align-items: center; gap: var(--space-xs); font-size: 13px; color: var(--color-slate); } .cs-chart-legend .swatch { width: 14px; height: 2px; background: var(--color-ink); display: block; } .cs-chart-legend .swatch.soft { background: var(--color-ash); height: 10px; width: 10px; } .cs-chart-note { font-size: 13px; line-height: 1.45; color: var(--color-slate); margin-top: var(--space-md); } /* ------------------------------------------------------------ Testimonial video frame and quote attribution Used in the hero. The films are shot vertically, so 9:16. ------------------------------------------------------------ */ .cs-video-frame { border-radius: var(--r-md); overflow: hidden; background: var(--color-surface-cool); aspect-ratio: 9 / 16; } .cs-video-frame .video-facade { width: 100%; height: 100%; } /* No portrait here. The speaker is on screen in the film beside the quote, so a thumbnail of the same face is a third copy of it. */ .cs-quote-attrib .name { font-size: 16px; font-weight: 600; color: var(--color-ink); } .cs-quote-attrib .role { font-size: 14px; color: var(--color-slate); margin-top: 2px; } /* ------------------------------------------------------------ 4. More work ------------------------------------------------------------ */ .cs-more-head { margin-bottom: var(--space-xxl); } .cs-more-head h2 { font-size: 36px; font-weight: 400; line-height: 1.05; letter-spacing: -0.9px; color: var(--color-ink); } .cs-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); align-items: stretch; } .cs-more-card { display: flex; flex-direction: column; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-md); overflow: hidden; } .cs-more-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-canvas-soft); } .cs-more-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cs-more-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding: var(--space-lg); flex: 1; } .cs-more-card .client { font-size: 14px; color: var(--color-slate); } .cs-more-card .result { font-size: 20px; font-weight: 400; letter-spacing: -0.3px; line-height: 1.25; color: var(--color-ink); } .cs-more-card .button-ghost { margin-top: auto; } /* Placeholder until the other case study pages exist. Looks like the real button, does not navigate, and is hidden from assistive tech as a control. */ .button-ghost.is-placeholder { opacity: .45; cursor: default; pointer-events: none; } /* ------------------------------------------------------------ 5. Final CTA ------------------------------------------------------------ */ /* The page opens and closes on light. The hero glow blooms low and left; this one mirrors it, blooming right and fading out at the top edge so the join to the section above is invisible. Same construction, same alphas, flipped. */ .cs-cta-wrap { padding: 0 0 var(--space-section); background: var(--color-canvas); position: relative; overflow: hidden; } .cs-cta-wrap::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 30%), radial-gradient(920px 620px at 98% 46%, rgba(226,223,249,.48) 0%, rgba(226,223,249,.18) 46%, rgba(226,223,249,0) 74%), radial-gradient(560px 420px at 90% 4%, rgba(95,90,187,.075) 0%, rgba(95,90,187,0) 70%), radial-gradient(1000px 640px at 0% 88%, rgba(224,224,238,.30) 0%, rgba(224,224,238,0) 66%), linear-gradient(260deg, #FFFFFF 0%, #FEFEFF 42%, #FAF9FD 100%); } .cs-cta-wrap > .container { position: relative; z-index: 1; } /* Dark, with a slow purple atmosphere. Left aligned: copy on the left, action on the right, same grid as before. The two light fields are Electric and Strike, blurred until they read as light rather than colour, drifting on long offset loops so the card is never quite still. design.md allows the purples here, and only here: see "Electric and Strike". */ .cs-cta-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1.3fr auto; gap: var(--space-xxl); align-items: center; background: var(--color-scrim); border-radius: var(--r-lg); padding: 80px 64px; } .cs-cta-card > * { position: relative; z-index: 2; } .cs-cta-card::before, .cs-cta-card::after { content: ''; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(80px); will-change: transform; } .cs-cta-card::before { width: 62%; height: 150%; left: -12%; top: -35%; background: radial-gradient(closest-side, rgba(95,90,187,0.8), rgba(95,90,187,0)); animation: cs-drift-a 16s ease-in-out infinite alternate; } .cs-cta-card::after { width: 58%; height: 160%; right: -10%; bottom: -55%; background: radial-gradient(closest-side, rgba(43,41,110,0.95), rgba(43,41,110,0)); animation: cs-drift-b 21s ease-in-out infinite alternate; } @keyframes cs-drift-a { 0% { transform: translate(0, 0) scale(1); opacity: .9; } 100% { transform: translate(22%, 14%) scale(1.18); opacity: 1; } } @keyframes cs-drift-b { 0% { transform: translate(0, 0) scale(1.05); } 100% { transform: translate(-20%, -12%) scale(0.95); } } @media (prefers-reduced-motion: reduce) { .cs-cta-card::before, .cs-cta-card::after { animation: none; } } .cs-cta-card h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; line-height: 1.05; letter-spacing: -1.0px; color: var(--color-paper); margin-bottom: var(--space-md); max-width: 20ch; } .cs-cta-card p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.74); max-width: 52ch; } .cs-cta-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; } /* ------------------------------------------------------------ Google Ads panel (stylised recreation, real account figures) ------------------------------------------------------------ */ .gads-panel { background: var(--color-canvas); border: 1px solid #DADCE0; border-radius: var(--r-md); overflow: hidden; } .gads-tiles { display: grid; grid-template-columns: repeat(4, 1fr); } .gads-tile { padding: 18px 16px 20px; color: #FFFFFF; min-width: 0; } .gads-tile--blue { background: #3B7DEA; } .gads-tile--red { background: #B93028; } .gads-tile--yellow { background: #EFAE1E; } .gads-tile--green { background: #1E7F3C; } .gads-tile-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1; opacity: .95; margin-bottom: 10px; white-space: nowrap; } .gads-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; flex: none; } .gads-tile-value { font-size: clamp(20px, 2vw, 26px); font-weight: 400; line-height: 1; letter-spacing: -0.5px; white-space: nowrap; } .gads-chart { padding: 20px 0 16px; } .gads-chart svg { display: block; width: 100%; height: auto; } /* ------------------------------------------------------------ Responsive ------------------------------------------------------------ */ @media (max-width: 1024px) { .cs-stats { grid-template-columns: repeat(2, 1fr); } .tl-event { grid-template-columns: 1fr; gap: var(--space-xl); padding-bottom: 120px; } .tl-media { order: -1; } .cs-cta-card { grid-template-columns: 1fr; gap: var(--space-xl); } .cs-more-grid { grid-template-columns: 1fr; } .tl-event > *, .cs-cta-card > * { min-width: 0; } .gads-tile-value { font-size: 22px; } } @media (max-width: 640px) { .cs-hero-title { letter-spacing: -0.6px; margin-bottom: var(--space-md); } .cs-hero-lede { font-size: 17px; } .page-glow { height: 760px; background: radial-gradient(680px 520px at 0% 52%, rgba(226,223,249,.34) 0%, rgba(226,223,249,0) 72%), radial-gradient(420px 340px at 8% 92%, rgba(95,90,187,.055) 0%, rgba(95,90,187,0) 70%), linear-gradient(160deg, #FFFFFF 0%, #FEFEFF 55%, #FBFAFE 100%); } .cs-stats { grid-template-columns: 1fr 1fr; gap: var(--space-sm); } .cs-stat { padding: var(--space-lg) var(--space-md) var(--space-md); } .cs-stat-value { font-size: 28px; letter-spacing: -0.6px; } .cs-stat-label { font-size: 13px; } .cs-timeline { padding-left: 26px; } .tl-spine { left: 4px; } .tl-event::before { left: -26px; width: 9px; height: 9px; } .tl-time { margin-bottom: var(--space-xl); font-size: 13px; } .tl-event { padding-bottom: 88px; } .tl-copy h3 { font-size: 26px; letter-spacing: -0.5px; } .tl-lead { font-size: 17px; } .tl-body p { font-size: 16px; } .cs-chart-wrap { padding: var(--space-md); } figure.tl-media figcaption { padding: var(--space-xl) var(--space-md) var(--space-md); font-size: 13px; } .cs-chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cs-chart-scroll .cs-chart { min-width: 620px; } .cs-cta-card { padding: 56px var(--space-lg); } .gads-tiles { grid-template-columns: repeat(2, 1fr); } .gads-tile { padding: 14px 12px 16px; } .gads-tile-value { font-size: 20px; } .gads-tile-label { font-size: 12px; } .cs-more-body { padding: var(--space-md); } /* Same pull-back as the top glow: these radials fill a phone screen */ .cs-cta-wrap::before { background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 26%), radial-gradient(680px 520px at 100% 48%, rgba(226,223,249,.34) 0%, rgba(226,223,249,0) 72%), radial-gradient(420px 340px at 92% 6%, rgba(95,90,187,.055) 0%, rgba(95,90,187,0) 70%), linear-gradient(200deg, #FFFFFF 0%, #FEFEFF 55%, #FBFAFE 100%); } } /* Ghost button on a dark surface, matching the homepage hero treatment */ .on-scrim .button-ghost { color: var(--color-paper); border-color: rgba(255,255,255,0.35); } .on-scrim .button-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); color: var(--color-paper); } /* ------------------------------------------------------------ Hero card: contained photographic module (design.md, "Photographic", rounded.lg on contained variants). The page stays light; only the card carries the photograph, with a scrim on the copy side for legibility. ------------------------------------------------------------ */ .cs-hero-card { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: clamp(520px, 70vh, 680px); display: flex; align-items: flex-end; background: var(--color-scrim); } .cs-hero-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cs-hero-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: /* The copy runs to roughly 60% of the card, so the scrim holds dark across that whole width and only then eases off. Stopping at half left the ends of the lede lines sitting on bright gravel and sky. */ linear-gradient(90deg, rgba(15,15,18,0.9) 0%, rgba(15,15,18,0.84) 38%, rgba(15,15,18,0.62) 58%, rgba(15,15,18,0.22) 76%, rgba(15,15,18,0) 90%), linear-gradient(0deg, rgba(15,15,18,0.72) 0%, rgba(15,15,18,0.38) 38%, rgba(15,15,18,0) 64%); } .cs-hero-card-copy { position: relative; z-index: 1; padding: var(--space-xxl); max-width: 760px; } .cs-hero-card-copy .cs-hero-lede { max-width: 56ch; } .cs-hero-card .cs-eyebrow { color: rgba(255,255,255,0.7); } .cs-hero-card .cs-hero-title { color: var(--color-paper); margin-bottom: var(--space-md); } .cs-hero-card .cs-hero-lede { color: rgba(255,255,255,0.9); font-size: 18px; border-top: 0; padding-top: 0; margin-bottom: 0; /* Belt and braces for bright patches in a photo the scrim cannot predict. */ text-shadow: 0 1px 14px rgba(15,15,18,0.45); } @media (max-width: 640px) { .cs-hero-card { min-height: 600px; border-radius: var(--r-md); } .cs-hero-card::after { background: linear-gradient(0deg, rgba(15,15,18,0.92) 0%, rgba(15,15,18,0.7) 50%, rgba(15,15,18,0.15) 82%, rgba(15,15,18,0) 100%); } .cs-hero-card-copy { padding: var(--space-lg); } .cs-hero-card .cs-hero-lede { font-size: 16px; } } /* ------------------------------------------------------------ Hero bento: photo card and Tom's film on one row, stats beneath. The film sets the row height and the card stretches to match, so the two always finish level. Side by side only where the card is still wide enough to keep the client name on one line; below that it stacks as card, stats, film. ------------------------------------------------------------ */ .cs-hero-bento { padding: var(--space-md) 0 var(--space-section); } .cs-bento { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "card video" "stats stats"; gap: var(--space-md); } .cs-bento .cs-hero-card { grid-area: card; min-height: 0; } .cs-bento .cs-stats { grid-area: stats; } .cs-hero-video-card { grid-area: video; margin: 0; display: flex; flex-direction: column; gap: var(--space-md); } .cs-hero-video-card .cs-video-frame { border-radius: var(--r-lg); } .cs-video-quote p { font-size: 17px; line-height: 1.4; letter-spacing: -0.2px; color: var(--color-ink); margin: 0 0 var(--space-sm); } .cs-video-quote .cs-quote-attrib .name { font-size: 14px; } .cs-video-quote .cs-quote-attrib .role { font-size: 13px; } @media (max-width: 1179px) { .cs-bento { grid-template-columns: 1fr; grid-template-areas: "card" "stats" "video"; } .cs-bento .cs-hero-card { min-height: 560px; } .cs-hero-video-card { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: var(--space-xl); margin-top: var(--space-xxl); } .cs-video-quote p { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3; } } @media (max-width: 640px) { .cs-bento .cs-hero-card { min-height: 600px; } .cs-hero-video-card { grid-template-columns: 1fr; gap: var(--space-lg); } .cs-hero-video-card .cs-video-frame { width: 220px; } } /* Smallest phones: the card's own padding eats into the width the one-line title needs, so step both down a notch. */ @media (max-width: 360px) { .cs-hero-card-copy { padding: 20px; } .cs-hero-card .cs-hero-title { font-size: 20px; letter-spacing: -0.4px; } } /* Budget comparison: two circles drawn to scale by area. */ .cs-budget-svg { display: block; width: 100%; height: auto; } .cs-budget-svg text { font-family: inherit; } /* Between the two-column breakpoint and a wide desktop the timeline's media column is narrow, so the Google Ads tiles tighten up to keep each figure on one line. */ @media (min-width: 1025px) and (max-width: 1320px) { .gads-tile { padding: 14px 12px 16px; } .gads-tile-value { font-size: 21px; } } @media (min-width: 1025px) and (max-width: 1140px) { .gads-tile-value { font-size: 19px; } } /* ------------------------------------------------------------ Lead log panel: a StrikeTwice lead table rebuilt in HTML from a real export, so it stays legible at column width. Same treatment as the Google Ads panel: real figures, the tool's look, no logo. ------------------------------------------------------------ */ .lt-panel { background: var(--color-paper); border: 1px solid #DADCE0; border-radius: var(--r-md); overflow: hidden; } .lt-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: 12px 16px; border-bottom: 1px solid #E8EAED; background: #F8F9FB; font-size: 13px; } .lt-account { color: #4A5BB5; font-weight: 600; } .lt-filter { color: var(--color-slate); white-space: nowrap; } .lt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .lt-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .lt-table th { text-align: left; font-weight: 600; color: var(--color-ink-soft); padding: 10px 12px; border-bottom: 1px solid #E8EAED; white-space: nowrap; } .lt-table td { padding: 9px 12px; border-bottom: 1px solid #F1F2F4; color: var(--color-graphite); white-space: nowrap; } .lt-table tr:last-child td { border-bottom: 0; } .lt-table .lt-money { text-align: right; } .lt-table td.lt-sale { color: #137333; font-weight: 600; } .lt-table td.lt-quote { color: #3C7A4E; } .lt-table .lt-sorted { color: #4A5BB5; } @media (max-width: 420px) { .lt-table { font-size: 12px; } .lt-table th, .lt-table td { padding: 8px 8px; } .lt-filter { display: none; } } /* Narrow columns: the sale value is the point of the panel, so the quote column is the one that gives way. */ @media (min-width: 1025px) and (max-width: 1140px) { .lt-table th, .lt-table td { padding: 9px 8px; } } @media (max-width: 560px) { .lt-table .lt-quote { display: none; } } @media (max-width: 360px) { .lt-table { font-size: 11.5px; } } /* The quote sits on the film's poster, inside the play button, so it goes when the film starts: site.js swaps the whole facade for the video. */ .cs-video-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: block; text-align: left; pointer-events: none; padding: 72px 20px 20px; background: linear-gradient(to top, rgba(15,15,18,0.88) 0%, rgba(15,15,18,0.55) 55%, rgba(15,15,18,0) 100%); color: var(--color-paper); } .cs-video-overlay-quote { display: block; font-size: 17px; line-height: 1.35; letter-spacing: -0.2px; margin-bottom: 12px; text-wrap: balance; } .cs-video-overlay-name { display: block; font-size: 14px; font-weight: 600; } .cs-video-overlay-role { display: block; font-size: 13px; color: rgba(255,255,255,0.72); margin-top: 2px; } /* Leads by treatment: plain horizontal bars on the ink/hairline ladder, the winning treatment in ink and the rest in a soft neutral. */ .cs-bars { display: flex; flex-direction: column; gap: 14px; padding: var(--space-xl); } .cs-bar-row { display: grid; grid-template-columns: 170px 1fr 52px; align-items: center; gap: var(--space-md); } .cs-bar-label { font-size: 14px; color: var(--color-graphite); line-height: 1.3; } .cs-bar-track { height: 10px; background: var(--color-canvas-soft); border-radius: var(--r-full); overflow: hidden; } .cs-bar-fill { height: 100%; background: #C6C6CE; border-radius: var(--r-full); } .cs-bar-fill.is-lead { background: var(--color-ink); } .cs-bar-value { font-size: 14px; color: var(--color-ink); text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .cs-bars { padding: var(--space-lg) var(--space-md); } .cs-bar-row { grid-template-columns: 1fr 44px; row-gap: 6px; } .cs-bar-label { grid-column: 1 / -1; font-size: 13px; } } /* Other results: four cards, one for every other case study */ .cs-more-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .cs-more-card .result { font-size: 18px; } @media (max-width: 1179px) { .cs-more-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cs-more-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ Results hub (/case-studies/) ------------------------------------------------------------ */ .cs-index-hero { padding: var(--space-xxl) 0 var(--space-xl); } .cs-index-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-slate); margin-bottom: var(--space-md); } .cs-index-title { font-size: clamp(40px, 6vw, 64px); font-weight: 400; line-height: 1.02; letter-spacing: -1.6px; color: var(--color-ink); margin-bottom: var(--space-lg); } .cs-index-lede { max-width: 620px; font-size: 18px; line-height: 1.5; color: var(--color-slate); } .cs-index-section { padding: var(--space-lg) 0 var(--space-xxl); } .cs-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .cs-index-card { display: flex; flex-direction: column; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--r-md); overflow: hidden; color: var(--color-ink); transition: border-color 150ms ease; } .cs-index-card:hover { border-color: var(--color-stone); } .cs-index-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-canvas-soft); } .cs-index-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; } .cs-index-card:hover .cs-index-media img { transform: scale(1.03); } .cs-index-body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); flex: 1; } .cs-index-client { font-size: 14px; color: var(--color-slate); } .cs-index-result { font-size: 22px; line-height: 1.25; letter-spacing: -0.4px; } .cs-index-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-sm) 0 var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-hairline-soft); } .cs-index-stat-value { font-size: 24px; letter-spacing: -0.6px; line-height: 1.1; } .cs-index-stat-label { font-size: 12.5px; color: var(--color-slate); margin-top: 4px; } .cs-index-link { margin-top: auto; font-size: 14px; font-weight: 500; } @media (max-width: 1024px) { .cs-index-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cs-index-grid { grid-template-columns: 1fr; } .cs-index-hero { padding: var(--space-xl) 0 var(--space-lg); } .cs-index-result { font-size: 20px; } } /* Mobile: the blur on the open nav turned it into the containing block for the fixed menu panel, so the panel collapsed to 80px and the page showed through. With the menu open the bar goes solid instead. */ @media (max-width: 900px) { body.has-page-glow .nav-bar[data-menu-open="true"] { background: var(--color-canvas); backdrop-filter: none; -webkit-backdrop-filter: none; } }