/* ==========================================================================
Blueline Service Co LLC — site stylesheet
One bundled stylesheet: tokens, fonts, base, layout, chrome, components.
========================================================================== */
/* Blueline Service Co — color tokens. Brand blues sampled directly from the logo PNG. */
:root {
/* Brand blues (from logo) */
--blue-950: #050B26; /* near-black navy — droplet/wave shadows */
--blue-900: #0A1745; /* wordmark navy — headings, dark surfaces */
--blue-800: #0F2559;
--blue-700: #123A80;
--blue-600: #0B57B4; /* royal — primary brand color */
--blue-500: #0895E4; /* bright — primary CTA, links */
--blue-400: #22ABF4; /* sky — hover, accents on dark */
--blue-300: #5CD9F6; /* light — wave highlight, accents on dark */
--blue-100: #D6EDFC;
--blue-50: #EFF7FE;
/* Neutrals (cool, navy-tinted) */
--gray-950: #0D1220;
--gray-900: #1A2233;
--gray-700: #39435A;
--gray-500: #5D6880;
--gray-400: #8A94A8;
--gray-300: #C3CAD6;
--gray-200: #DDE2EA;
--gray-100: #EEF1F5;
--gray-50: #F7F9FB;
--white: #FFFFFF;
/* Semantic accents (used sparingly) */
--red-700: #A32B1E; /* emergency hover/pressed */
--red-600: #C4392B; /* emergency actions only */
--red-50: #FCEEEC;
--green-700:#116239;
--green-600:#177A46; /* availability, success */
--green-50: #EAF6EF;
--amber-600:#9A6A0B;
--amber-50: #FBF3E2;
/* Semantic aliases */
--color-brand: var(--blue-600);
--color-brand-bright: var(--blue-500);
--color-emergency: var(--red-600);
--color-success: var(--green-600);
--text-heading: var(--blue-900);
--text-body: var(--gray-700);
--text-muted: var(--gray-500);
--text-on-dark: #FFFFFF;
--text-on-dark-muted: #AFC2E4;
--text-link: var(--blue-600);
--text-link-hover: var(--blue-500);
--surface-page: #FFFFFF;
--surface-tint: var(--blue-50); /* alternating sections */
--surface-card: #FFFFFF;
--surface-navy: var(--blue-900); /* footer, hero, top bar */
--surface-inset: var(--gray-50);
--border-default: var(--gray-200);
--border-strong: var(--gray-300);
--border-on-dark: rgba(255,255,255,.14);
--focus-ring: var(--blue-400);
/* Brand gradients — echo the logo's wave and navy depth */
--grad-wave: linear-gradient(90deg, var(--blue-700), var(--blue-500) 55%, var(--blue-300)); /* @kind color */
--grad-navy: linear-gradient(180deg, #10265E, #081335); /* @kind color */
--grad-cta: linear-gradient(180deg, #1BA2EE, #0784CE); /* @kind color */
}
/* Blueline Service Co — typography tokens.
Display: Archivo (sturdy, civic grotesque — echoes the heavy logo wordmark).
Body: Source Sans 3 (humanist, highly legible at small mobile sizes).
Both loaded from Google Fonts (see fonts.css) — substitutes; no brand font files were provided. */
:root {
--font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
/* Scale — mobile-first: body never below 16px */
--text-xs: 13px;
--text-sm: 15px;
--text-md: 17px; /* default body */
--text-lg: 19px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 34px;
--text-4xl: 44px;
--text-5xl: 56px; /* hero, desktop only */
--leading-tight: 1.08;
--leading-snug: 1.25;
--leading-body: 1.55;
--tracking-display: -0.015em;
--tracking-caps: 0.09em; /* eyebrow labels, echoes "SERVICE CO LLC" lockup */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-display: 800; /* headings */
}
/* Blueline Service Co — spacing & layout tokens. 4px base. */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--container: 1160px; /* max content width */
--gutter: 20px; /* mobile side padding */
--gutter-desktop: 32px;
--section-pad: 64px; /* vertical rhythm between page sections (96px desktop) */
--tap-target: 44px; /* minimum interactive height — mobile-first rule */
}
/* Blueline Service Co — radii, shadows, motion. */
:root {
--radius-sm: 8px; /* inputs, badges */
--radius-md: 12px; /* buttons, small cards */
--radius-lg: 16px; /* cards, form panels */
--radius-xl: 24px; /* hero panels, images */
--radius-pill: 999px;/* phone CTA, tags */
/* Navy-tinted shadows — never pure black */
--shadow-sm: 0 1px 2px rgba(10, 23, 69, .08);
--shadow-md: 0 2px 8px -2px rgba(10, 23, 69, .10), 0 6px 20px -4px rgba(10, 23, 69, .10);
--shadow-lg: 0 4px 16px -4px rgba(10, 23, 69, .12), 0 18px 44px -10px rgba(10, 23, 69, .18);
--shadow-cta: 0 4px 14px -2px rgba(8, 149, 228, .40); /* glow under bright-blue CTAs */
--shadow-emergency: 0 4px 14px -2px rgba(196, 57, 43, .35);
--ring: 0 0 0 3px rgba(34, 171, 244, .35); /* focus ring, on --focus-ring color */
--ease-out: cubic-bezier(.2, .7, .3, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur: 200ms; /* @kind other */
}
/* Blueline Service Co — self-hosted webfonts.
Archivo (display) 500/700/800/900 + Source Sans 3 (body) 400/600/700.
Latin subset woff2, fetched from fonts.gstatic.com and stored in src/fonts/.
font-display: swap on every face so text renders in a fallback immediately. */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/archivo-500.woff2") format("woff2");
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/archivo-700.woff2") format("woff2");
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/fonts/archivo-800.woff2") format("woff2");
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/fonts/archivo-900.woff2") format("woff2");
}
@font-face {
font-family: "Source Sans 3";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
font-family: "Source Sans 3";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/source-sans-3-600.woff2") format("woff2");
}
@font-face {
font-family: "Source Sans 3";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/source-sans-3-700.woff2") format("woff2");
}
/* Minimal global element styles. */
body {
font-family: var(--font-body);
font-size: var(--text-md);
line-height: var(--leading-body);
color: var(--text-body);
background: var(--surface-page);
margin: 0;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--text-heading);
letter-spacing: var(--tracking-display);
line-height: var(--leading-tight);
margin: 0;
}
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
::selection { background: var(--blue-100); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
/* ==========================================================================
hero.css — Home hero V2: statement composition.
Two large cropped tools + one soft-focus depth element + a water sandwich
(back splash BEHIND the headline, front splash ACROSS it as glass).
Layers (z): 0 glow · 1 bg-depth + splash-back · 2 statement tools ·
3 content column · 4 curve. Inside the content column's stacking context:
h1 at content level (auto) · splash-front 5 · eyebrow/sub/CTAs/badges 6 —
so the front water paints above the headline and below every control.
All motion is transform/opacity only; every animation lives inside the
prefers-reduced-motion: no-preference block below.
========================================================================== */
/* --------------------------------------------------------------------------
FLOATING-ELEMENT SLOT CONTRACT (future 4K art swap) — V2 SLOT SET
Markup:
…inline SVG (today) or
(later)…
| slot | subject (art file) | aspect | layer |
|--------------|-------------------------------------|----------|------------------|
| wrench-hero | red pipe wrench (tool-wrench.svg) | 1:1 | z2, enters top-right, handle crops off the top edge |
| trap-corner | chrome P-trap (tool-pipe.svg) | 1:1 | z2, anchors lower-left corner, cropped off left+bottom |
| bg-depth | defocused valve (bg-valve.svg) | 1:1 | z1, dim soft-focus depth, upper-left |
| splash-back | wave-crown system (splash-back.svg) | 1440:620 | z1, spans hero width behind the headline |
| splash-front | water whip (splash-front.svg) | 720:560 | z5 inside the content column, crosses the headline's left third IN FRONT of the type |
- The .hero-float wrapper owns placement AND receives the JS motion
transforms (scroll drift + pointer parallax). Never position the art.
- Slot size/position live ONLY in the [data-slot="…"] rules below
(--w plus left/right/top/bottom and --ar aspect, overridden per
breakpoint). Swapping art never requires touching them.
- A future 4K render drops in as
inside .hero-float__bob — the CSS sizes ANY
child of __bob to 100% width at the slot's --ar aspect. Tool slots are
square transparent PNGs; splash-back renders at 4096x1762 and
splash-front at 2880x2240 (transparent).
- data-depth: scroll drift factor (negative rises, positive sinks; the
statement pieces are HEAVY — keep magnitudes ≤ 0.1). data-rot: degrees
per scrolled px (≤ 0.004 ≈ 3–4°/screen). data-pointer="0" opts out of
pointer parallax (bg-depth and splash-front stay planted so the
text-behind-water relationship never wanders).
- splash-front legibility guardrails live in the art file itself:
over-glyph fills #0895E4–#38B6F2 at .34–.42 opacity, nothing over the
eyebrow/CTAs/badges, sparkles off glyph centers. Keep them if the art
is ever regenerated.
-------------------------------------------------------------------------- */
.hero {
position: relative;
overflow: hidden;
/* Real worksite behind everything: dark out-of-focus plumber's workshop
plate under a navy scrim — same treatment the client approved on the
services band, graded darker so the water/tools/type stay in charge. */
background:
linear-gradient(180deg, rgba(16, 38, 94, .32) 0%, rgba(10, 23, 69, .5) 55%, rgba(8, 19, 53, .88) 100%),
url("/img/gen/bg-hero-worksite.jpg") center 40% / cover no-repeat,
var(--grad-navy);
display: flex;
align-items: center;
min-height: 88vh; /* fallback */
min-height: clamp(560px, calc(100svh - 116px), 1000px); /* 116px = topbar + header */
--hero-emphasis: linear-gradient(92deg, var(--blue-400), var(--blue-300) 78%);
--hero-curve-h: clamp(40px, 7vw, 96px);
}
/* ---------- Ambient glow + blueprint whisper (the flyer's navy DNA);
a deepening base roots the splash system in darkness. ---------- */
.hero__glow {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 62% 46% at 50% 40%, rgba(11, 87, 180, .22), transparent 68%),
radial-gradient(ellipse 40% 30% at 50% 44%, rgba(8, 149, 228, .14), transparent 70%),
linear-gradient(180deg, transparent 62%, rgba(3, 8, 28, .3) 100%),
repeating-linear-gradient(0deg, rgba(92, 217, 246, .045) 0 1px, transparent 1px 64px),
repeating-linear-gradient(90deg, rgba(92, 217, 246, .045) 0 1px, transparent 1px 64px);
}
/* ---------- Float wrappers (shared base — why-blueline reuses it) -------- */
.hero-float {
position: absolute;
z-index: 2;
width: var(--w, 100px);
pointer-events: none;
}
.hero-float__bob > * {
display: block;
width: 100%;
height: auto;
aspect-ratio: var(--ar, 1 / 1);
}
/* Grounding shadow: statement tools only — water and the defocused depth
element cast none (static filter; motion stays transform-only). */
.hero-float[data-slot="wrench-hero"] .hero-float__bob svg,
.hero-float[data-slot="wrench-hero"] .hero-float__bob img,
.hero-float[data-slot="trap-corner"] .hero-float__bob svg,
.hero-float[data-slot="trap-corner"] .hero-float__bob img {
filter: drop-shadow(0 18px 30px rgba(3, 8, 28, .55));
}
/* ---------- Slot placement (desktop-first) ---------- */
/* Protagonist: ~40vh tall, meaningfully cropped off the top-right. */
.hero-float[data-slot="wrench-hero"] {
--w: clamp(250px, 33vh, 430px);
right: -3%;
top: -5%;
}
.hero-float[data-slot="wrench-hero"] svg { transform: rotate(6deg); }
/* Secondary: chrome P-trap anchoring the opposite corner. */
.hero-float[data-slot="trap-corner"] {
--w: clamp(210px, 28vh, 360px);
left: -2%;
bottom: -3%;
z-index: 2;
}
.hero-float[data-slot="trap-corner"] img { transform: rotate(-6deg); }
/* Depth-of-field: dim, pre-blurred-by-construction, upper-left. */
.hero-float[data-slot="bg-depth"] {
--w: clamp(200px, 26vh, 340px);
left: 3%;
top: 6%;
z-index: 1;
opacity: .55;
}
/* Water, back layer: spans the hero width, rises behind the text. */
.hero-float[data-slot="splash-back"] {
--ar: 5504 / 3072;
width: auto;
left: -3%;
right: -3%;
bottom: -17%;
z-index: 1;
/* no opacity here — element opacity isolates compositing and would
defeat the img's screen blend (black background would reappear) */
}
/* Water, front layer: anchored to the SAME column as the headline so the
text-behind-glass relationship holds at every viewport. z5 — above the
h1 (content level), below the z6 controls. */
.hero-float[data-slot="splash-front"] {
--ar: 4800 / 3584;
--w: 70%;
left: -14%;
top: 104px;
z-index: 5;
}
/* Client feedback: full-strength water over the glyphs hurt readability —
the whip keeps crossing the headline, but as a lighter glass layer. */
.hero-float[data-slot="splash-front"] img { opacity: .58; }
/* ---------- Photographic art (Nano Banana renders) ----------
Water is shot on pure black and blended as LIGHT (screen) — genuinely
translucent over the navy and over the headline (screen can never darken
text, so legibility only improves). The defocused depth element fades
out at its edges via a radial mask so it melts into the gradient. */
.hero-float img { object-fit: contain; }
/* Both water layers ship as TRUE alpha (luminance-keyed WebP). Blend modes
are useless here: every z-indexed float wrapper is an isolated compositing
group, so mix-blend-mode sees no backdrop and renders the raw black. */
.hero-float[data-slot="bg-depth"] img {
mask-image: radial-gradient(closest-side, #000 55%, transparent 98%);
-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 98%);
}
/* ---------- Content column ---------- */
.hero__inner {
position: relative;
z-index: 3;
}
.hero__content {
position: relative; /* anchor for the splash-front slot */
max-width: 800px;
margin: 0 auto;
text-align: center;
padding-top: clamp(96px, 13svh, 132px);
padding-bottom: calc(var(--hero-curve-h) + clamp(56px, 9svh, 88px));
}
/* Controls ride above the front water; the h1 stays at content level so
the splash passes in front of it. */
.hero__eyebrow,
.hero__sub,
.hero__ctas,
.hero__badges {
position: relative;
z-index: 6;
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 18px;
padding: 8px 16px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .06);
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--blue-300);
}
.hero__eyebrow svg { width: 15px; height: 15px; flex: none; }
.hero__title {
color: #fff;
font-size: clamp(40px, 30px + 2.8vw, 64px);
font-weight: var(--weight-display);
line-height: 1.04;
letter-spacing: -0.02em;
margin: 0 0 20px;
/* lifts the type off the busy water behind/over it */
text-shadow: 0 2px 26px rgba(3, 8, 28, .6), 0 1px 5px rgba(3, 8, 28, .45);
}
.hero__sub { text-shadow: 0 1px 14px rgba(3, 8, 28, .55); }
.hero__title-line { display: block; text-wrap: balance; }
.hero__title-em {
/* solid fill — gradient-clipped text turns to mud when combined with the
title's text-shadow (shadow bleeds through transparent glyphs) */
color: var(--blue-300);
}
.hero__sub {
color: var(--text-on-dark-muted);
font-size: clamp(17px, 16px + .4vw, 20px);
line-height: 1.6;
max-width: 54ch;
margin: 0 auto 30px;
}
.hero__ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px 14px;
margin: 0 0 30px;
}
.hero .hero__cta-call {
height: 60px;
padding: 0 30px;
font-size: 20px;
letter-spacing: .01em;
}
.hero .hero__cta-call svg { width: 21px; height: 21px; }
.hero .hero__cta-request {
height: 60px;
padding: 0 26px;
font-size: 17px;
}
.hero .hero__cta-request svg { width: 18px; height: 18px; }
.hero__badges {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 26px;
margin: 0;
padding: 0;
}
.hero__badges li {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 14.5px;
color: var(--text-on-dark-muted);
white-space: nowrap;
}
.hero__badges svg { width: 16px; height: 16px; flex: none; color: var(--blue-400); }
.hero__badge-star svg { color: #FFC531; fill: currentColor; }
/* ---------- Bottom transition: a single shallow water horizon ---------- */
.hero__curve {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
z-index: 4;
height: var(--hero-curve-h);
pointer-events: none;
}
.hero__curve svg { width: 100%; height: 100%; display: block; }
/* ==========================================================================
Motion — retuned to MASS. Idle drifts run 15–22s at ±4–7px with ≤0.6°
of roll; the front splash barely breathes (±2px) so the text-behind-water
read stays stable. Every animation is declared ONLY under no-preference,
so prefers-reduced-motion gets a fully static composition for free.
The hero-bob-* keyframes are shared by the site-wide drift floats.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* Entrance stagger — pure CSS, done in <900ms, no scroll dependency */
.hero__content > * { animation: hero-rise 420ms var(--ease-out) both; }
.hero__content > :nth-child(2) { animation-delay: 70ms; }
.hero__content > :nth-child(3) { animation-delay: 140ms; }
.hero__content > :nth-child(4) { animation-delay: 210ms; }
.hero__content > :nth-child(5) { animation-delay: 270ms; }
.hero-float { animation: hero-fade 700ms ease-out both; will-change: transform; }
.hero-float[data-slot="bg-depth"] { animation-delay: 60ms; }
.hero-float[data-slot="splash-back"] { animation-delay: 140ms; }
.hero-float[data-slot="trap-corner"] { animation-delay: 220ms; }
.hero-float[data-slot="wrench-hero"] { animation-delay: 260ms; }
/* splash-front is both a content child and a JS-driven wrapper: its
entrance must stay opacity-only (hero-rise animates transform, which
would pin the JS drift once filled). */
.hero__content > .hero-float {
animation: hero-fade 900ms ease-out both;
animation-delay: 320ms;
}
/* Idle drift KILLED (client: self-moving frozen-splash photos read as
fake). The scene is a frozen photograph — the only motion is depth
parallax driven by the user's own scroll/cursor, which reads as camera
movement. Keyframes below stay defined for the site-wide accent floats. */
.hero-float__bob { animation: none; }
}
/* Outside the media query and ID-scoped: why-blueline.css re-assigns a bob
(wb-bob) to the same class later in the bundle — the frozen-photo scenes
must win on both pages, in every motion preference. */
#hero .hero-float__bob,
#wb-open .hero-float__bob { animation: none; }
@media (prefers-reduced-motion: no-preference) {
.hero-float[data-slot="wrench-hero"] { --bob-dur: 19s; --bob-delay: -6.2s; }
.hero-float[data-slot="trap-corner"] { --bob-dur: 22s; --bob-delay: -9s; }
.hero-float[data-slot="bg-depth"] { --bob-dur: 21s; --bob-delay: -4s; }
.hero-float[data-slot="splash-back"] { --bob-dur: 17s; --bob-delay: -11s; }
.hero-float[data-slot="splash-front"] { --bob-dur: 15s; --bob-delay: -5s; }
}
@keyframes hero-rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@keyframes hero-fade {
from { opacity: 0; }
}
/* Shared idle-drift keyframes (also used by story.css / services-index.css
drift floats) — massive, slow, minimal roll. */
@keyframes hero-bob-a {
from { transform: translate3d(0, -6px, 0) rotate(-.5deg); }
to { transform: translate3d(0, 7px, 0) rotate(.4deg); }
}
@keyframes hero-bob-b {
from { transform: translate3d(-5px, 4px, 0) rotate(.4deg); }
to { transform: translate3d(4px, -6px, 0) rotate(-.35deg); }
}
@keyframes hero-bob-c {
from { transform: translate3d(3px, 5px, 0) rotate(.25deg); }
to { transform: translate3d(-3px, -5px, 0) rotate(-.3deg); }
}
@keyframes hero-bob-d {
from { transform: translate3d(0, -2px, 0); }
to { transform: translate3d(0, 2px, 0); }
}
/* ==========================================================================
Mobile (≤720px) — same grammar, cropped harder. The wrench stays LARGE
off the top-right; the trap tucks into the lower-left corner; the front
splash narrows (reduced headline coverage) and ends above the CTA stack
so it can never cross the call button.
========================================================================== */
@media (max-width: 720px) {
.hero-float[data-slot="bg-depth"] { display: none; }
.hero-float[data-slot="wrench-hero"] { --w: 230px; right: -17%; top: -8%; }
.hero-float[data-slot="trap-corner"] { --w: 170px; left: -14%; bottom: -4%; }
.hero-float[data-slot="splash-back"] { left: -14%; right: -14%; }
.hero-float[data-slot="splash-front"] { --w: 96%; left: -24%; top: 96px; }
.hero__content {
padding-top: 140px;
padding-bottom: calc(var(--hero-curve-h) + 130px);
}
.hero__eyebrow { font-size: 12px; padding: 7px 13px; }
.hero__sub { margin-bottom: 26px; }
.hero__ctas { flex-direction: column; align-items: stretch; margin-bottom: 26px; }
.hero .hero__cta-call { width: 100%; }
.hero .hero__cta-request { width: 100%; }
.hero__badges { gap: 8px 18px; }
.hero__badges li { font-size: 13.5px; }
}
/* ==========================================================================
story.css — Home story bridge (#story) + home "life layer".
Three editorial beats threaded by THE BLUE LINE: a scroll-drawn wave path
whose draw progress is the section's --progress custom property (set by
scroll.js on [data-scrub-section] — pure CSS consumption, no extra JS).
Restyled hero art drifts in the margin; a whisper of blueprint grid gives
the white surface atmosphere. All motion transform/opacity + dashoffset
fed by --progress; reduced-motion and no-JS get the fully drawn line and
static, fully legible art.
========================================================================== */
/* --------------------------------------------------------------------------
DRIFT-FLOAT SLOT CONTRACT (shared: story bridge + services index)
Mirrors the hero's .hero-float contract for sections outside the hero:
Markup: (owns the coordinate space)
…inline SVG (today) or
…
- The .drift-float wrapper owns placement AND receives the JS scroll-drift
transform (src/js/floats.js, via window.BL_SCROLL). Never position art.
- Slot size/position live ONLY in [data-slot="…"] rules (below for story-*,
in services-index.css for svcx-*). Swapping art never touches them.
- Slots are square (1:1); a future 4K render drops in as
/ detail pages (breadcrumb, main column,
sticky sidebar). Everything here is scoped under .service-page so it can't
collide with other pages. Layout grid + card/btn/badge/alert primitives
are reused from site.css (.service-grid, .card, .btn, .badge, .alert) —
this file only adds what's specific to the service-detail layout.
========================================================================== */
/* ---------- Breadcrumb: horizontal scroll on narrow screens, no chrome ---------- */
.service-page .breadcrumb__row {
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge/IE */
}
.service-page .breadcrumb__row::-webkit-scrollbar { display: none; }
.service-page .breadcrumb__row svg { flex-shrink: 0; }
/* ---------- Main column ---------- */
.svc-main__points {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-6);
}
.svc-point {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 16.5px;
color: var(--text-body);
font-family: var(--font-body);
}
.svc-point__icon {
color: var(--color-success);
margin-top: 2px;
flex-shrink: 0;
display: flex;
}
.svc-point__icon svg { width: 19px; height: 19px; }
/* ---------- Reserved image slot ----------
NOTE for the later art pass: this is a placeholder panel only. To wire in
a real photo, replace the inner .img-slot__placeholder with:
replacing the inline