/* ============================================================================ Clearline Partners - homepage (commercial insurance agencies) Loaded AFTER styles.css. Inherits the design tokens; overrides the layout. WHY THIS FILE EXISTS styles.css is built around split sections with the heading in a left rail. That reads like a newspaper. Real commercial agency sites put the heading at the top of the section and then show something - tiles, figures, a specialty band. This file provides those shapes. HOUSE RULES CARRIED OVER FROM styles.css one box primitive, an alternating background rhythm, no entrance animation. TWO THINGS THAT HAVE ALREADY BITTEN, DO NOT REPEAT THEM 1. styles.css already defines .group, and `.group h3` draws a 2px amber rule under every h3 inside it. Grep styles.css before inventing a class name. 2. This file used to be maintained by appending. Late rules silently undid earlier design decisions - .fit__col and .step both ended up as card shadows around transparent boxes. Every selector below is defined ONCE. Edit in place; do not append. ========================================================================== */ /* ============================================================================ 1 · SECTION SHELL ========================================================================== */ .sec { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1px solid var(--line); } /* styles.css scopes scroll-margin to .section[id]; without this every anchor jump parks its target under the 75px sticky header. The offer section's own targets (#packages, #monthly) sit on elements inside it. */ .sec[id], .job__zone[id], .monthly[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); } /* Skip link for keyboard users - first element in , visible only on focus. */ .skip { position: fixed; top: -100px; left: 1rem; z-index: 100; background: var(--ink); color: var(--on-dark); padding: 0.8rem 1.2rem; border-radius: 0 0 10px 10px; text-decoration: none; font-weight: 600; } .skip:focus { top: 0; } /* The base amber focus ring computes ~2.5:1 on the light surfaces. Darker ring on light, light ring on dark. */ :focus-visible { outline-color: var(--amber-dk); } .menu > summary:focus-visible { outline-color: var(--amber-dk); } .sec--dark :focus-visible, .sec--slate :focus-visible, .site-footer :focus-visible, .action-bar :focus-visible { outline-color: var(--amber-lt); } /* Heading block. Always at the top of the section, always centered - a heading in a side rail is what made the old layout read as a newspaper column. */ .sec__head { max-width: 46rem; margin: 0 auto clamp(2.25rem, 4vw, 3.25rem); text-align: center; } /* The label is a NAME, not an argument. Nobody reads it, so nothing the page needs lives here. One or two words. */ .sec__label { display: block; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; } /* Three heading tiers. Nine sections at one size means nothing is more important than anything else, which is most of why the page read flat. --lg the two load-bearing sections (Client tools, Start here) base standard sections --sm supporting sections (After go-live, Who it is for) */ .sec__title { font-family: var(--display); font-variation-settings: var(--display-vary); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.015em; margin: 0; } .sec__title--lg { font-size: clamp(2.25rem, 5.4vw, 3.6rem); letter-spacing: -0.022em; } .sec__title--sm { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.01em; } /* Deck. The missing step: without it a section drops straight from a 44px heading to 15px body and the whole page reads evenly gray. */ .sec__intro { margin: 1rem auto 0; max-width: 40rem; font-size: clamp(1.1875rem, 1.7vw, 1.375rem); line-height: 1.52; color: var(--body); } /* WORD ORPHANS `balance` evens out short headings so a two-line title does not run long-then-one-word. `pretty` stops a single word being stranded on the last line of body copy and lists. Both are progressive - browsers without support just wrap normally - so there is no fallback to maintain, and this keeps working when the copy changes instead of needing hand-tuned line lengths. */ .sec__title, .job__name, .monthly__name, .addon__name, .tile :is(h3, h4), .step h3, .fit__col h3, .duel__cat h3, .pack h4 { text-wrap: balance; } .sec__intro, .evidence__close, .job__sub, .monthly__sub, .monthly__after, .why__t, .checks li, .addon > p, .addon li, .tile p, .step p, .fit__col li, .duel__cell p, .stat__t, .stats__src, .evidence__lead, .finding__detail, .gridafter p, .midcta p, .cta__note { text-wrap: pretty; } /* ============================================================================ 2 · SURFACES Six surfaces, light to dark: hero, tint, paper, sand, slate, navy. Each is a two-stop gradient rather than a flat fill - a flat fill reads as paper stock, which was most of the remaining flatness. ========================================================================== */ .hero { background: linear-gradient(180deg, var(--paper) 0%, var(--bone) 62%); } .sec--tint { background: linear-gradient(180deg, #EEEADF 0%, var(--bone-2) 55%); } .sec--paper{ background: linear-gradient(180deg, var(--paper) 0%, #F5F2EA 100%); } /* Warm band, used by the add-on packages section. Amber at full strength across a whole section shouted - a saturated accent works at button scale and overwhelms at section scale. This is the same hue mixed into bone at ~12%. */ .sec--amber { background: linear-gradient(180deg, #F4EADC 0%, #EFE1CE 100%); border-top-color: transparent; } .sec--amber .sec__label { color: var(--amber-dk); } .sec--amber .sec__title, .sec--amber .sec__intro { color: var(--ink); } .sec--amber .cta__note { color: var(--body); } /* Slate is the mid-tone. It belongs to the site-tools mirror section: dark family for weight, but a step softer than the ink the problem section owns. The dim-text token is lightened on slate: #A9B2C2 computes right at 4.5:1 on the lifted tiles and under the radial highlight. */ .sec--slate { background: #2E3A4F; color: var(--on-dark); border-top-color: transparent; position: relative; isolation: isolate; --on-dark-dim: #C3CBD9; } .sec--dark { background: var(--ink); color: var(--on-dark); border-top-color: transparent; position: relative; isolation: isolate; } .sec--dark .sec__title, .sec--slate .sec__title { color: var(--on-dark); } .sec--dark .sec__label, .sec--slate .sec__label { color: var(--amber-lt); } .sec--dark .sec__intro, .sec--slate .sec__intro { color: var(--on-dark-dim); } .sec--dark .cta__note { color: var(--on-dark-dim); } /* styles.css handles ghost buttons on ITS dark surfaces (.section--dark); the start section here is .sec--dark, which it has never heard of. */ .sec--dark .btn--ghost { border-color: rgba(244,241,234,.35); color: var(--on-dark); } .sec--dark .btn--ghost:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); } /* Light on the dark bands. Flat navy across 1,400px has no dimension; a wide radial brighter at the top gives the band a light source. isolation (set in each block above) creates the stacking context so z-index:-1 sits above the background, below content. */ .sec--dark::before, .sec--slate::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, rgba(120,150,200,.16), transparent 62%); } /* Grain. #F4F1EA as a flat fill is a paint swatch; the same color with 3.5% noise reads as a material. Inline SVG, so no asset and no extra request. */ body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================================ 3 · HERO ========================================================================== */ /* Both sentences live in one

so the category - which is also the search phrase and what a screen reader announces - stays the page's identity. The claim is set smaller so the call to action stays above the fold. / .h1claim { display: block; font-size: 0.6em; line-height: 1.15; color: var(--muted); margin-top: 0.5rem; } @media (max-width: 640px) { .h1claim { font-size: 0.72em; } } / styles.css forces the hero button pair onto one line below 460px, sized for the old shorter labels. This pair needs ~344px against 335px at 375. / @media (max-width: 460px) { .hero .btn-row { flex-wrap: wrap; } } / ============================================================================ 4 · TILES (Client tools, After go-live) ========================================================================== / .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; } .tiles--3{ grid-template-columns: repeat(3, 1fr); } @media (max-width: 860px) { .tiles--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .tiles--3 { grid-template-columns: 1fr; } } .tile { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius, 14px); padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: 0.55rem; / inset highlight is what separates a card that looks raised from a rectangle that looks drawn on / box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,26,44,.045), 0 3px 10px rgba(16,26,44,.05); transition: box-shadow .12s ease, transform .12s ease; } .tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 4px rgba(16,26,44,.06), 0 12px 26px rgba(16,26,44,.10); } / Card titles are the TEXT face. The base h3 rule puts Fraunces on everything, which flattened the hierarchy: 30+ tiny serif headings meant the display face distinguished nothing. Cards get Inter; sections and pack names keep Fraunces. :is(h3,h4) because the tool tiles are h4 (they sit under a group h3). / .tile :is(h3, h4) { font-family: var(--text); font-variation-settings: normal; font-size: var(--fs-h3); margin: 0; line-height: 1.25; font-weight: 700; letter-spacing: -0.006em; color: var(--ink); border-bottom: 0; padding-bottom: 0; / defend against .group h3 in styles.css / } .tile p { margin: 0; font-size: 0.9375rem; color: var(--body); line-height: 1.55; } .tileico { width: 26px; height: 26px; color: var(--amber-dk); flex: none; } .tileico svg { width: 100%; height: 100%; display: block; } / Stroke compensation. The symbols carry no stroke-width attribute so these can reach them; without compensation a 1.6 stroke renders 1.33px at 20px and 2.13px at 32px - visibly mismatched line weights across one page. / .tileico svg { stroke-width: 1.7; } .class svg { stroke-width: 2; } / On dark surfaces a drop shadow is invisible, so depth comes from surface lift. / .sec--dark .tile, .sec--slate .tile { background: rgba(255,255,255,.055); border-color: var(--line-dk); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } .sec--dark .tile:hover, .sec--slate .tile:hover { transform: translateY(-2px); background: rgba(255,255,255,.085); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); } .sec--dark .tile :is(h3, h4), .sec--slate .tile :is(h3, h4) { color: var(--on-dark); } .sec--dark .tile p, .sec--slate .tile p { color: var(--on-dark-dim); } .sec--dark .tileico, .sec--slate .tileico { color: var(--amber-lt); } / ============================================================================ 5 · THE OFFER (What we offer) ONE component system, not four layouts. Every job is the same object: a panel with a header, a BUILD zone, and an ADD-ON zone. Hierarchy is carried by surface, not by chips: what every client gets sits on paper (bright, primary), what costs extra sits on a recessed tint. The monthly is deliberately NOT a job panel - it is the dark band underneath them all, which is exactly what it means. ========================================================================== / .jobs { max-width: 64rem; margin-inline: auto; display: grid; gap: clamp(1rem, 2vw, 1.35rem); } .job { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius, 14px); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,26,44,.045), 0 3px 10px rgba(16,26,44,.05); } .jobhead { padding: 1.15rem clamp(1.3rem, 2.6vw, 1.9rem); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; } .jobname { font-family: var(--display); font-variation-settings: var(--display-vary); font-size: clamp(1.25rem, 2.1vw, 1.55rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0; border-bottom: 0; padding-bottom: 0; } .jobsub { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); } / included zone wider than the add-on zone: what everyone buys gets the room / .jobbody { display: grid; grid-template-columns: 1.15fr 0.85fr; } .jobzone { padding: 1.35rem clamp(1.3rem, 2.6vw, 1.9rem) 1.55rem; } .jobzone--add { background: rgba(16,26,44,.035); border-left: 1px solid var(--line); } @media (max-width: 900px) { .jobbody { grid-template-columns: 1fr; } .jobzone--add { border-left: 0; border-top: 1px solid var(--line); } } .zonelabel { display: block; margin: 0 0 0.85rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; } .jobzone--inc .zonelabel { color: var(--amber-dk); } .jobzone--add .zonelabel { color: var(--muted); } / Checkmark rows. Gaps, not hairlines - inside a panel, a rule per row is noise, and the list is the skim layer. / .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .checks li { position: relative; padding-left: 1.65rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); } .checks li::before { content: "\2713"; content: "\2713" / ""; position: absolute; left: 0.05rem; top: -0.02em; font-weight: 700; color: var(--amber-dk); } / The renewal job has nothing in the included column - the website genuinely does not do this, which is the argument for the package. Same zone, new label. / .whyn { font-family: var(--display); font-variation-settings: var(--display-vary); font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 0.6rem; } .whyt { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--body); } / Add-ons: named, itemized, and quiet. No card inside a card. / .addon + .addon { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .addonname { font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; line-height: 1.3; margin: 0 0 0.3rem; color: var(--ink); border-bottom: 0; padding-bottom: 0; } .addon > p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--body); } .addon ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.35rem; } .addon li { position: relative; padding-left: 0.95rem; font-size: 0.875rem; line-height: 1.45; color: var(--muted); } .addon li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 999px; background: var(--line-2); } / A property of the package, so it rides on the name. It used to sit under the list as its own line, where - being the only add-on that has one - it read as a stray rather than a system. Amber-dk on the tint computes 5.4:1. / .addontag { display: inline-block; margin-left: 0.5rem; vertical-align: 0.1em; padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(208,138,44,.16); color: var(--amber-dk); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; } / The monthly: the dark band underneath everything, not a fourth job. / .monthly { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--on-dark); border-radius: var(--radius, 14px); padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.5rem, 3vw, 1.9rem); } .monthly::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% -20%, rgba(120,150,200,.18), transparent 62%); } .monthlyhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1.15rem; padding-bottom: 1.05rem; border-bottom: 1px solid var(--line-dk); } .monthlyname { font-family: var(--display); font-variation-settings: var(--display-vary); font-size: clamp(1.25rem, 2.1vw, 1.55rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--on-dark); border-bottom: 0; padding-bottom: 0; } .monthlysub { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--on-dark-dim); } / Columns, not a grid: in a 2-col grid the row height is set by the taller item, so a one-line entry beside a two-line entry leaves a visible hole. Columns flow the items instead and close the gaps. / .checks--2 { display: block; columns: 2; column-gap: clamp(1.5rem, 3vw, 2.5rem); } .checks--2 li { break-inside: avoid; margin-bottom: 0.6rem; } @media (max-width: 700px) { .checks--2 { columns: 1; } } .monthly .checks li { color: var(--on-dark); } .monthly .checks li::before { color: var(--amber-lt); } .monthlyafter { margin: 1.2rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark-dim); } / ============================================================================ 6 · STAT BAND (The problem) No boxes. Figures on the surface with a hairline between - nothing else on the page has this shape, which is the point. ========================================================================== / / Pinned to 3 - auto-fit wrapped 2+1 at tablet widths and the left-edge divider kept drawing beside nothing. Stacked on phones, the divider rotates flat. / .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .stat { position: relative; background: transparent; padding: 0.5rem 2rem; text-align: center; } .stat + .stat::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--line-2); } @media (max-width: 700px) { .stats { grid-template-columns: 1fr; gap: 1.75rem; } .stat { padding: 0.25rem 1rem; } .stat + .stat::before { left: 25%; right: 25%; top: -0.9rem; bottom: auto; width: auto; height: 1px; } } .statn { font-family: var(--display); font-variation-settings: var(--display-vary); font-size: clamp(3.5rem, 9vw, 5.5rem); line-height: 1; letter-spacing: -0.03em; margin: 0; color: var(--ink); } .statt { margin: 0.7rem auto 0; max-width: 15rem; font-size: 0.9375rem; color: var(--body); line-height: 1.45; } / .statssrc, not .statsrc - styles.css defines .statsrc at the same specificity and only load order kept this one winning. / .statssrc { margin: 0.7rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); text-align: center; } / The problem section sits on the ink band: bone numerals, dim captions. / .sec--dark .statn { color: var(--on-dark); } .sec--dark .statt, .sec--dark .statssrc { color: var(--on-dark-dim); } .sec--dark .stat + .stat::before { background: var(--line-dk); } / Evidence panel. "We pulled the code" set as the thing itself: a dark card in a light section, findings in the mono face. The only dark element outside the dark bands, which is what makes it read as an exhibit rather than a paragraph. / / A quiet inset panel - one step darker than the band, hairline border, the same row language the rest of the page uses. No window chrome, no mono: the findings read in the page's own voice. / .evidence { max-width: 46rem; margin: clamp(2.25rem, 4vw, 3rem) auto 0; background: #0B1322; color: var(--on-dark); border: 1px solid var(--line-dk); border-radius: var(--radius, 14px); padding: 1.6rem clamp(1.2rem, 4vw, 1.9rem); } / Two exhibits side by side, not a paragraph plus a list. Each one leads with the fact in bold so the eye can take both in at a glance; the specifics sit underneath for anyone who wants them. This is the first thing after the hero and it has to be readable in about two seconds. / .evidencelead { margin: 0 0 1.15rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-dk); font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark-dim); } .evidencegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } @media (max-width: 640px) { .evidencegrid { grid-template-columns: 1fr; gap: 1.25rem; } } .findingclaim { position: relative; margin: 0 0 0.35rem; padding-left: 1.5rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--on-dark); } .findingclaim::before { content: "\00D7"; content: "\00D7" / ""; / alt-text form silences the glyph for screen readers / position: absolute; left: 0.1rem; top: 0; font-size: 1.15em; color: var(--amber-lt); } .findingdetail { margin: 0; padding-left: 1.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark-dim); } / The consequence belongs to the evidence, not floating between the panel and the button. With the lead's rule above and this one below, the panel reads as a complete argument: what they find, then what it costs you. / .evidenceclose { margin: 1.2rem 0 0; padding-top: 1.05rem; border-top: 1px solid var(--line-dk); font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--on-dark); } / ============================================================================ 7 · SPECIALTIES (photo band) Each tile reads its photograph from --img, so swapping one is a single-line change: style="--img:url('/assets/classes/contractors.jpg')" Photographs are CC0 and show PLACES, never people - /proof calls out "stock photos of people who do not work there" as fake proof. ========================================================================== / .classes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; } @media (min-width: 1100px) { #classes .bleed .classes { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1500px) { #classes .bleed .classes { gap: 1rem; } } @media (max-width: 900px) { .classes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .classes { grid-template-columns: 1fr; } } .class { position: relative; overflow: hidden; min-height: 11rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0.55rem; padding: 1.1rem; border: 0; border-radius: var(--radius, 14px); background-color: var(--ink-2); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: #fff; / no inset-white highlight here - the photograph paints over it / box-shadow: 0 1px 2px rgba(16,26,44,.045), 0 3px 10px rgba(16,26,44,.05); transition: box-shadow .12s ease, transform .12s ease; } / Image lives on ::before so it can be filtered. The owner-selected Unsplash set is tonally consistent, so the treatment is light: a gentle desaturate and a touch of navy so twelve photographs sit on one page - NOT the heavy crush the old mismatched CC0 set needed. The photos should be visible. / .class::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--img); background-size: cover; background-position: center; filter: saturate(.78) contrast(1.03) brightness(.86); transition: filter .12s ease; } / Scrim: light at the top, dark only where the label sits. / .class::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,16,28,.06) 0%, rgba(10,16,28,.22) 48%, rgba(10,16,28,.82) 100%), linear-gradient(0deg, rgba(20,34,60,.14), rgba(20,34,60,.14)); } .class svg { position: relative; z-index: 1; width: 20px; height: 20px; flex: none; color: var(--amber-lt); } / The label was a bare text node, so it sat behind the scrim and vanished the moment the scrim got darker. It is a span now and positioned explicitly. / .classname { position: relative; z-index: 1; } / Brighten on hover, no Ken Burns zoom - the slow photo scale is a template tell. / .class:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(16,26,44,.10), 0 16px 32px rgba(16,26,44,.16); } .class:hover::before { filter: saturate(.95) contrast(1.03) brightness(.96); } / ============================================================================ 8 · PROCESS (How it works) Below 861px: three cards. Above: a connected timeline, where a step is a node on a line and NOT a card. Card styling here reintroduces boxes with a connector running behind them. ========================================================================== / .steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius, 14px); padding: 1.6rem 1.4rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,26,44,.045), 0 3px 10px rgba(16,26,44,.05); transition: box-shadow .12s ease, transform .12s ease; } .step h3 { font-family: var(--text); font-variation-settings: normal; font-size: var(--fs-h3); margin: 0 0 0.4rem; font-weight: 700; letter-spacing: -0.006em; } .step p { margin: 0; font-size: 0.9375rem; color: var(--body); line-height: 1.55; } .stepn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--ink); color: var(--bone); font-size: 0.875rem; font-weight: 700; margin-bottom: 0.9rem; } .stepcost { display: block; margin-top: 0.8rem; font-size: 0.8125rem; line-height: 1.5; font-weight: 600; color: var(--amber-dk); } @media (min-width: 861px) { / The connector is absolutely positioned on the parent while steps are static, so without a stacking context it paints OVER the numbered circles. The step background must stay transparent or it masks the line, not just the circle. Line sits at half the circle height minus half the line height. / .steps::before { content: ""; position: absolute; z-index: 0; left: 14%; right: 14%; top: calc(1.55rem - 1px); height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); } .step, .step:hover { position: relative; z-index: 1; background: transparent; border: 0; box-shadow: none; transform: none; padding: 0 1.25rem; text-align: center; } .stepn { width: 3.1rem; height: 3.1rem; font-size: 1.05rem; margin: 0 auto 1.15rem; box-shadow: 0 0 0 9px var(--bone); / opaque ring so the dashes stop either side / } .step p { max-width: 20rem; margin-inline: auto; } .stepcost { text-align: center; } } / ============================================================================ 8b · DUEL (The difference) Category-led rows: the dimension (medallion + name) anchors each row on the left, then two labeled blocks side by side - theirs dimmed, ours in ink. Every block carries its own eyebrow, so any row read alone is complete. ========================================================================== / .duel { max-width: 62rem; margin-inline: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius, 14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,26,44,.045), 0 3px 10px rgba(16,26,44,.05); padding: 0.6rem 2.1rem; } .duelrow { display: grid; grid-template-columns: 12rem 1fr 1fr; gap: 1.7rem; align-items: start; padding-block: 1.55rem; } .duelrow + .duelrow { border-top: 1px solid var(--line); } / The category lines up with the BODY COPY opposite it, not with the eyebrow label above it. Sitting level with "THE BIG VENDORS" made the title read as part of the column header rather than as the subject of the row. The offset is the eyebrow's line box plus its margin, less the baseline difference between 19px title and 15px body. Only above the stacking breakpoint - once the row is one column the title sits over its own content. / .duelcat { display: flex; align-items: center; gap: 0.75rem; } @media (min-width: 981px) { .duelcat { padding-top: 1.45rem; } } .duelcat h3 { font-family: var(--text); font-variation-settings: normal; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.006em; margin: 0; border-bottom: 0; padding-bottom: 0; } .duelico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--ink); color: var(--amber-lt); display: inline-flex; align-items: center; justify-content: center; } .duelico svg { width: 18px; height: 18px; stroke-width: 1.8; } .duelwho { display: block; margin-bottom: 0.4rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); } .duelwho--us { color: var(--amber-dk); } .duelcell p { margin: 0; font-size: 0.9375rem; line-height: 1.55; } .duelcell--them p { color: var(--muted); } .duelcell--us p { color: var(--ink); font-weight: 500; } @media (max-width: 980px) { .duel { padding: 0.4rem 1.4rem; } .duelrow { grid-template-columns: 1fr; gap: 0.9rem; padding-block: 1.25rem; } .duelico { width: 2.2rem; height: 2.2rem; } .duelico svg { width: 16px; height: 16px; } } / ============================================================================ 9 · FIT (Who it is for) One spec-sheet panel holding both columns. The section used to be two bare text columns - the only section on the page with no visual object - so it read as empty next to the tiles, the photo band, and the timeline. ========================================================================== / .fit { display: grid; grid-template-columns: 1fr 1fr; max-width: 56rem; margin-inline: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius, 14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,26,44,.045), 0 3px 10px rgba(16,26,44,.05); overflow: hidden; } .fitcol { position: relative; padding: 1.9rem 2.2rem; } / the "no" side sits a half-step back / .fit--no { background: rgba(16,26,44,.03); } .fitcol + .fitcol { border-left: 1px solid var(--line); } .fitcol h3 { font-family: var(--text); font-variation-settings: normal; font-size: var(--fs-h3); margin: 0 0 0.9rem; font-weight: 700; letter-spacing: -0.006em; display: flex; align-items: center; gap: 0.65rem; border-bottom: 0; padding-bottom: 0; } / marker discs on the column heads carry the yes/no at a glance / .fitcol h3::before { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; } .fit--yes h3::before { content: "\2713"; content: "\2713" / ""; background: var(--amber); color: var(--ink); } .fit--no h3::before { content: "\00D7"; content: "\00D7" / ""; background: transparent; color: var(--muted); border: 1px solid var(--line-2); } .fitcol ul { list-style: none; margin: 0; padding: 0; } .fitcol li { padding: 0.8rem 0; border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.55; color: var(--body); } .fitcol li:first-child { border-top: 0; } @media (max-width: 720px) { .fit { grid-template-columns: 1fr; } .fitcol { padding: 1.5rem 1.4rem; } .fitcol + .fitcol { border-left: 0; border-top: 1px solid var(--line); } } / ============================================================================ 10 · CALLS TO ACTION Four moments across the page, each attached to the argument just made. The free review is primary; a call is the higher-friction ask and only appears where someone is already convinced. ========================================================================== / .midcta { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--line); text-align: center; } .midcta p { margin: 0 0 1.1rem; font-size: var(--fs-lead); color: var(--body); } .midcta .btn-row { justify-content: center; } .sec--dark .midcta, .sec--slate .midcta { border-top-color: var(--line-dk); } .sec--dark .midcta p, .sec--slate .midcta p { color: var(--on-dark-dim); } / Where a closing line and a midcta stack, collapse the double gap so the section does not end twice. / .gridafter + .midcta { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); } / A bare midcta is just the button - no line above it, no closing text. / .midcta--bare { border-top: 0; padding-top: 0; } .cta { text-align: center; } .cta .btn-row { justify-content: center; margin-top: 1.75rem; } .ctanote { margin-top: 1.1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); } / The review form in #start. styles.css styles .form/.field for .section--dark; this page's dark band is .sec--dark, which it has never heard of. / .startform { max-width: 26rem; margin: 0 auto; text-align: left; } .startform .btn { width: 100%; justify-content: center; } .sec--dark .field label { color: var(--on-dark); } .sec--dark .field input { background: rgba(255,255,255,.06); border-color: var(--line-dk); color: var(--on-dark); } .sec--dark .field input::placeholder { color: #7A8497; } .sec--dark .field input:hover, .sec--dark .field input:focus { border-color: var(--on-dark-dim); } .sec--dark .formstatus { color: var(--on-dark-dim); } .sec--dark .formstatus[data-state="err"] { color: var(--amber-lt); } #start .ctanote { margin-top: 1.5rem; text-align: center; color: var(--on-dark-dim); } .ctalink { color: var(--amber-lt); text-decoration: underline; text-underline-offset: 2px; } .ctalink:hover { color: var(--on-dark); } / ============================================================================ 11 · GRID FURNITURE ========================================================================== / / Label above a grid. Small caps between two rules, so it reads as a divider rather than as a second paragraph competing with the section deck above it. / .gridlabel { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .gridlabel::before, .gridlabel::after { content: ""; height: 1px; background: var(--line); flex: 1; } .sec--dark .gridlabel { color: var(--on-dark-dim); } .sec--dark .gridlabel::before, .sec--dark .gridlabel::after { background: var(--line-dk); } / Closing line under a grid, with its own action. / .gridafter { margin-top: 2.25rem; text-align: center; } .gridafter p { margin: 0 0 1.1rem; font-size: var(--fs-lead); color: var(--body); } .gridafter p:last-child { margin-bottom: 0; } .gridafter .btn-row { justify-content: center; } .sec--dark .gridafter p, .sec--slate .gridafter p { color: var(--on-dark-dim); } / Full bleed. `margin-inline: calc(50% - 50vw)` is standard but 50vw includes the scrollbar, so it overflows by the scrollbar width. overflow-x: clip on main contains that WITHOUT creating a scroll container, which `hidden` would - and that would break the sticky header. / main { overflow-x: clip; } .bleed { margin-inline: calc(50% - 50vw); width: 100vw; } .bleed > { padding-inline: clamp(1rem, 4vw, 2.5rem); } /* ============================================================================ 12 · FOOTER styles.css declares .footer-grid as three columns and caps footer paragraphs at 32ch for the blurb under the logo. This page has four columns, and that 32ch cap also caught the copyright line - wrapping it to two lines while the links opposite stayed on one, so the two halves lost their shared baseline. ========================================================================== / @media (min-width: 900px) { .footer-grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem; } } @media (min-width: 720px) and (max-width: 899px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 3rem; } } .footer-bottom { align-items: baseline; } .footer-bottom p { max-width: none; margin-top: 0; } / One value step darker than the #start band above it - both were rgb(16,26,44) and the last 900px of the page read as a single dark slab. / .site-footer { background: #0B1322; } .footer-bottom a { display: inline-block; padding-block: 0.35rem; } / unlinked footer items (class pages that do not exist yet) keep the same vertical rhythm as the linked rows / .footer-grid li:not(:has(> a)) { padding-block: 0.35rem; } / ============================================================================ 13 · MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .tile, .step, .class, .class::before { transition: none; } .tile:hover, .step:hover, .class:hover { transform: none; } }