/* ============================================================================ Clearline Partners - homepage (commercial lead-to-bind systems) 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. */ /* 46rem, the same cap as .sec__head above it. The deck used to sit 96px narrower than its own heading for no reason, which read as a pinched column wherever the deck ran long - #fit's is the longest on the page and rendered four lines at 40rem against content 1184px wide beneath it. 46rem puts it at three lines and 67 characters, still inside a comfortable measure. */ .sec__intro { margin: 1rem auto 0; max-width: 46rem; 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. */ /* Decks balance with their headings. pretty only prevents a one-word last line, so a four-line deck could still end on a short fragment under a balanced h2. Every deck on the page was measured with this on - no line ends on a stranded article, preposition or determiner. */ .sec__head .sec__intro, .sec__title, .job__name, .monthly__name, .addon__name, .tile :is(h3, h4), .step h3, .fit__col h3, .duel__cat h3, .pack h4, .ownerqs b, .promise h3, .sec__label, .gridlabel { 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, .hero__who, .outcomes__grid li, .checklist li, .ownerqs span, .queue__why, .step__cost, .duel__cell p { 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, .sec--amber .gridlabel { 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--slate was added after this rule and never picked up. Its one ghost button inherited --ink from the light-band default and rendered at 1.52:1 on the slate while its border sat at 6.86:1 - a visible outline around an unreadable label, which reads as a disabled control. */ .sec--dark .btn--ghost, .sec--slate .btn--ghost { border-color: rgba(244,241,234,.35); color: var(--on-dark); } .sec--dark .btn--ghost:hover, .sec--slate .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; } } / ============================================================================ 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. ========================================================================== / / A 2x2 HAIRLINE GRID, NOT FOUR STACKED CARDS. Stacked, each panel ran the full 1024px column and its bullets set as single unbroken 961px lines - 98 characters, about double a comfortable measure, so text-wrap: pretty had nothing to do. Four identical paper cards also carried the fifth, sixth, seventh and eighth copies of one shadow triple. Cells now run ~512px and the text ~412px, and the hairline-grid language that existed only on the dark bands reaches a light one. / .jobs { max-width: 64rem; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius, 14px); overflow: hidden; } @media (max-width: 820px) { .jobs { grid-template-columns: 1fr; } } .job { background: var(--paper); border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .jobhead { padding: clamp(1.5rem, 3vw, 2rem) clamp(1.3rem, 2.6vw, 1.9rem) 0; border-bottom: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem 1rem; } / The panel index. Pairs one-for-one with the 01-04 blanks in #problem: the reader meets four numbered gaps, then four numbered fills. / .jobix { font-family: var(--display); font-variation-settings: var(--display-vary); font-size: 1.05rem; line-height: 1; color: var(--amber-dk); font-variant-numeric: tabular-nums; margin-right: 0.5rem; } .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: 0.9rem clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.6rem, 3vw, 2rem); } .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); } / --amber-dk is right on the light bands and unreadable on the dark ones: it measures 2.5:1 on --ink, so the marks in #changes and #start were all but invisible while the text beside them sat at 15.4:1. --amber-lt is 8.5:1 there. .monthly already did this locally; the bands themselves never did. / .monthly .checks li::before, .sec--dark .checks li::before, .sec--slate .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); } .duelcat { display: flex; align-items: center; gap: 0.75rem; } .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; } / The columns are named ONCE at the top instead of on all eight cells. A per-cell eyebrow can label a cell but it cannot say what a COLUMN is, which is why "Often assumed" left the reader working out how to read across. Below the stacking breakpoint the rows become one column and the header is meaningless, so the two swap: header on wide, inline labels on narrow. / .duelhead { display: grid; grid-template-columns: 12rem 1fr 1fr; gap: 1.7rem; padding-block: 1.2rem 0.95rem; border-bottom: 1px solid var(--line); } .duelcol { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); } .duelcol--us { color: var(--amber-dk); } @media (max-width: 980px) { .duelhead { display: none; } } .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); } / AFTER the base rule, not before it. Same specificity, so source order decides, and an earlier display:none loses to the later display:block. / @media (min-width: 981px) { .duelwho { display: none; } } .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 { / Explicit, not inherited. The founding panel moved between a dark and a light surface during this rebuild; an inherited heading color follows the surface silently and only shows up as a contrast failure once somebody looks. / color: var(--ink); 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; } #websites .midcta { margin-top: clamp(2rem, 4vw, 3rem); } .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 START SECTION USED TO STACK THREE WIDTHS DOWN THE CENTER: a 736px header, then a 1024px panel holding four short lines, then a 416px form. The eye went narrow, wide, narrow, most of the panel was empty, and the form - the only thing on the page we want touched - was the smallest object in the section. One container, two columns, one left edge each. / .startgrid { max-width: 60rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(2rem, 5vw, 4rem); align-items: stretch; text-align: left; } / The heading lives IN the column, not centered above it. Every other section on the page opens with a centered head, but this one is a form: a centered headline over a left-aligned two-column body gives the section three different alignments and no shared edge. Here the label, headline, deck, list and delivery line all start at the same x, and the form starts at the other. / .startgridwhy { display: flex; flex-direction: column; text-align: left; max-width: none; margin: 0; } / --lg is sized for a 46rem centered head. In a 512px column it broke the headline over four lines, three of them fragments. / .startgridwhy .sectitle { margin-bottom: 0; font-size: clamp(1.9rem, 3.4vw, 2.55rem); letter-spacing: -0.018em; } .startgridwhy .secintro { margin: 1rem 0 0; max-width: none; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--on-dark-dim); } .startgridwhy .checks { gap: 0.7rem; } .startgridwhy h3 { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 1.15rem; font-family: var(--display); font-variation-settings: var(--display-vary); font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.25; color: var(--on-dark); border-bottom: 0; padding-bottom: 0; } .startgridwhy .checks li { color: var(--on-dark); } @media (max-width: 860px) { .startgrid { grid-template-columns: 1fr; gap: 1.75rem; align-items: start; } } / 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. / / THE FORM IS THE ACTION, so it is the object that carries the panel. It used to be 416px of bare fields sitting under a 1024px card that held four short lines, which put the visual weight on the explanation and none on the thing to do. / .startform { max-width: none; margin: 0; text-align: left; background: rgba(255,255,255,.05); border: 1px solid var(--line-dk); border-radius: var(--radius, 14px); padding: clamp(1.35rem, 3vw, 1.75rem); } .startform .ctanote { margin-top: 0.9rem; color: var(--on-dark-dim); } .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); } / #7A8497 measured 3.93:1 on the field fill, under the 4.5 floor. #8892A6 is 4.73:1, which clears it without making the hint as bright as a real answer. / .sec--dark .field input::placeholder { color: #8892A6; } .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 { display: grid; grid-template-columns: 1.5fr repeat(2, 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; } / The only textarea on the site matched no rule in any stylesheet and rendered UA-default: white, monospace 13px, 182px wide, gray 0-radius border, sitting on the ink band between two dark translucent inputs. / .field textarea { width: 100%; padding: 0.7rem 0.9rem; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 10px; resize: vertical; min-height: 5.5rem; transition: border-color 120ms ease; } .field textarea::placeholder { color: var(--muted); } .field textarea:hover, .field textarea:focus { border-color: var(--ink-2); } .sec--dark .field textarea { background: rgba(255,255,255,.06); border-color: var(--line-dk); color: var(--on-dark); } .sec--dark .field textarea::placeholder { color: #8892A6; } .sec--dark .field textarea:hover, .sec--dark .field textarea:focus { border-color: var(--on-dark-dim); } / "Optional" inherited the label's 600 weight and read as part of the question. / .field label span { margin-left: 0.45rem; font-weight: 400; color: var(--muted); } .sec--dark .field label span { color: var(--on-dark-dim); } / ============================================================================ 13 · MOTION ========================================================================== / @media (prefers-reduced-motion: reduce) { .tile, .step, .class, .class::before { transition: none; } .tile:hover, .step:hover, .class:hover { transform: none; } } / Who the page is for, above the headline. The hero named the mechanism and the company but never the buyer, so a commercial agency owner had to infer that the page was addressed to him. / .herowho { margin: 0 0 1rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-dk); } / ============================================================================ 14 · THE CONSEQUENCE LINE (the operating gap) ---------------------------------------------------------------------------- #problem carries NO exhibit. Three were built for it - a two-column recorded versus not-recorded table, a blank account sheet, a dashed timeline - and all three were decoration around an argument the copy already completes: the heading poses the question, the deck grounds it, the line below lands it. Leaving it out also makes .queue in #visibility the first diagram a visitor meets rather than the third. ========================================================================== / / The consequence line. Bigger than body copy, because the section exists to land it and a reader who skims everything else should still catch it. / .implication { max-width: 44rem; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; text-align: center; font-family: var(--display); font-size: clamp(1.2rem, 2.5vw, 1.6rem); line-height: 1.35; color: var(--on-dark); text-wrap: balance; } .implication b { color: var(--amber-lt); font-weight: inherit; } / ---------------------------------------------------------------------------- WHAT IS TRUE WHEN WE FINISH - the completion promise, given its own object ---------------------------------------------------------------------------- This was the last paragraph before a button and read as a caption. It is the only place the page says what the buyer actually ends up with, so it gets a surface of its own. -------------------------------------------------------------------------- / .promise { max-width: 64rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; background: var(--ink); color: var(--on-dark); border-radius: var(--radius, 14px); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.4vw, 2.6rem); } .promise h3 { margin: 0 0 1.25rem; font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.25; color: var(--on-dark); border-bottom: 0; padding-bottom: 0; } / The panel is a dark fill inside an amber band, so no .sec--dark rule reaches it. The text here was already switched to --on-dark; the mark was left at --amber-dk and measured 2.5:1 against the panel. / / The four roles under .promise. Two columns like the checks they replaced, but role-first instead of marked, so this list and the nine checkmarks in the cards above read as two different things. / .roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem clamp(1.5rem, 3vw, 2.5rem); } .roles li { font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark-dim); } .roles b { display: block; font-family: var(--text); font-variation-settings: normal; font-weight: 600; color: var(--on-dark); } @media (max-width: 640px) { .roles { grid-template-columns: 1fr; } } / ---------------------------------------------------------------------------- OWNER QUESTIONS - the problem, stated as four things a principal asks ---------------------------------------------------------------------------- Replaces the two-column account comparison. That version used a fabricated account (named insured, premium, effective date) which, on a page with no client work behind it yet, reads uncomfortably like manufactured proof. Four questions carry the same argument and invent nothing. -------------------------------------------------------------------------- / .ownerqs { max-width: 58rem; margin: 0 auto; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(244,241,234,.16); border: 1px solid rgba(244,241,234,.16); border-radius: var(--radius, 14px); overflow: hidden; } .ownerqs li { background: rgba(255,255,255,.045); padding: clamp(1.3rem, 2.8vw, 1.9rem) clamp(1.3rem, 2.8vw, 2rem); display: grid; gap: 0.6rem; align-content: start; } / THE QUESTION IS THE CONTENT, THE ROLE IS THE LABEL. This was the other way round - the job title set at 20.8px in the display face and the question at 15px dim - so a reader scanned four job titles rather than four things nobody in the building can answer. / .ownerqs b { font-family: var(--text); font-variation-settings: normal; font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.11em; text-transform: uppercase; color: var(--on-dark-dim); } .ownerqs span { font-family: var(--display); font-variation-settings: var(--display-vary); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.3; color: var(--on-dark); } / THE OWNER RUNS FULL WIDTH BENEATH THE OTHER THREE. He is the buyer, and his is the question that costs money: hire, or fix the work. In a 2x2 it sat bottom right, the last place a reader looks, so the page put its conclusion in its weakest position. Three roles report symptoms; the fourth asks what to do. / .ownerqs li:last-child { grid-column: 1 / -1; background: rgba(232,169,79,.10); border-top: 1px solid rgba(232,169,79,.30); } .ownerqs li:last-child b { color: var(--amber-lt); } .ownerqs li:last-child span { font-size: clamp(1.25rem, 2.8vw, 1.7rem); } @media (max-width: 860px) { .ownerqs { grid-template-columns: 1fr; } } / The questions the empty record raises. A wrapped row of chips, not a bulleted list - this page already carries enough lists, and centered chips read as a caption under the exhibit rather than as another section of content. / / FOUNDER BLOCK. The portrait is the only human on the page and it carries the section: an agency principal is deciding whether to trust a person, and until there are client outcomes that person is the entire proof. The two lists of what the agency gets and gives are gone, so the block is a portrait beside a bio of roughly equal height. align-items is center rather than start: with nothing running below the photo, matching their midlines reads deliberate where a top-aligned pair leaves one side hanging. / .founder { max-width: 52rem; margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0; display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); / Top-aligned, not centered: the bio runs well past the photo now, and centering floats the portrait in the middle of the column with dead space above and below it. This puts the face beside the opening line. / gap: clamp(1.75rem, 4vw, 3rem); align-items: start; } / The subject wears a dark shirt, so the lower half of the crop dissolves into the ink band and the portrait reads as a half-loaded image. Two fixes: a border firm enough to hold the frame without help from the image, and a caption strip that gives the card a bottom edge that is obviously intentional. / .founderphoto { margin: 0; border-radius: var(--radius, 14px); overflow: hidden; border: 1px solid rgba(244,241,234,.22); background: rgba(255,255,255,.05); } .founderphoto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 18%; } .founderphoto figcaption { padding: 0.6rem 0.85rem 0.65rem; border-top: 1px solid rgba(244,241,234,.16); font-size: 0.8125rem; line-height: 1.35; color: var(--on-dark-dim); } .founderphoto figcaption b { display: block; font-weight: 600; color: var(--on-dark); } / The only long-form prose on a dark band. #A9B2C2 on ink is 7.4:1, AA at this size. / .founderbio { display: grid; gap: 0.85rem; } .founderbio p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--on-dark-dim); } .founderbio p:first-child { color: var(--on-dark); } @media (max-width: 720px) { .founder { grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2rem); justify-items: start; } .founderphoto { max-width: 11.5rem; } } / ============================================================================ 14 · THE PIPELINE (the operating gap) ---------------------------------------------------------------------------- FIVE STOPS, AND THE RECORD OPENS AT THE LAST ONE. Four exhibits came before this - a two-column table, a blank account sheet, a stacked six-stage timeline, a bare two-segment axis - and each failed the same way: they drew the argument as something to be read rather than something to be seen. THE TRACK IS TWO ABSOLUTE SEGMENTS, not a border on the list. With five equal columns the node centers land at 10%, 30%, 50%, 70% and 90%, so the dashed run is exactly 10% to 70% and the solid run exactly 70% to 90%. Drawing it that way means the split lands ON the fourth node rather than near it, at every width, with no per-breakpoint tuning. IT SITS IN THE WRAP. An earlier version broke the wrap and ran the diagram edge to edge; full bleed made it unmistakably a figure and also made it the only element on the page that ignores the page's own measure. The recessed plate does the same job inside the column: no border and no shadow, so it reads as cut into the band rather than as a sixth card. ========================================================================== / .pipe { max-width: 52rem; margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0; padding: clamp(1.9rem, 4vw, 2.9rem) clamp(1.1rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.2rem); background: rgba(0,0,0,.20); border-radius: var(--radius, 14px); } / THE FIVE STOPS SIT AT EXACT QUARTER POINTS: 0, 25, 50, 75 and 100 percent. A five-column grid cannot do this - equal columns put the nodes at the column starts (0, 20, 40, 60, 80) or their centers (10, 30, 50, 70, 90), and either way the last node lands short of the right edge while the brackets below run the full width, so the diagram has a left edge and no right one. Absolute placement fixes the points and hangs each stop off its own anchor: the first from its left, the middle three from their centers, the last from its right, so nothing overflows the plate at either end. / .pipestops { position: relative; list-style: none; margin: 0; padding: 0; height: 3rem; --n: 0.9rem; } .pipestops::before, .pipestops::after { content: ""; position: absolute; top: calc(var(--n) / 2); height: 0; } .pipestops::before { left: 0; width: 50%; border-top: 2px solid var(--amber); } .pipestops::after { left: 50%; width: 50%; border-top: 2px dashed rgba(244,241,234,.30); } .pipestops li { position: absolute; top: 0; display: grid; justify-items: center; gap: 0.7rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-dim); white-space: nowrap; } .pipestops li:nth-child(1) { left: 0; justify-items: start; } .pipestops li:nth-child(2) { left: 25%; transform: translateX(-50%); } .pipestops li:nth-child(3) { left: 50%; transform: translateX(-50%); } .pipestops li:nth-child(4) { left: 75%; transform: translateX(-50%); } .pipestops li:nth-child(5) { left: 100%; transform: translateX(-100%); justify-items: end; } .pipenode { width: var(--n); height: var(--n); border-radius: 999px; border: 2px solid rgba(244,241,234,.42); background: var(--ink); } .pipestops li.is-pivot { color: var(--on-dark); } .pipestops li.is-pivot .pipenode { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 0 4px rgba(208,138,44,.18); } / NO COLUMN GAP. A gap makes the second column start at 3/4 of (width - gap) plus the gap rather than at 75%, which pushes the second bracket off the node it belongs under. The two rules meet instead, and the color change at the join IS the boundary - the diagram's whole point, so it wants a seam, not a space. / .pipespans { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; margin-top: clamp(1.6rem, 3.2vw, 2.2rem); } .pipespan:first-child > { padding-right: clamp(1rem, 2.5vw, 1.75rem); } /* The bracket over each run, so the two states are named instead of inferred. / .pipespan { padding-top: 0.85rem; border-top: 1px solid rgba(244,241,234,.14); } .pipespan--ours { border-top-color: rgba(208,138,44,.55); } .pipestate { margin: 0 0 0.3rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--on-dark-dim); } .pipespan--ours .pipestate { color: var(--amber-lt); } .pipefields { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark-dim); text-wrap: pretty; } .pipespan--ours .pipefields { color: var(--on-dark); } @media (max-width: 640px) { / Five uppercase labels collide across 300px, so the stops become a column with the track down their left. Absolute placement is dropped - a vertical stack wants normal flow - and the nth-child offsets are unset with it. / .pipestops { height: auto; display: grid; grid-template-columns: 1fr; gap: 1.15rem; } .pipestops li, .pipestops li:nth-child(1), .pipestops li:nth-child(2), .pipestops li:nth-child(3), .pipestops li:nth-child(4), .pipestops li:nth-child(5) { position: static; left: auto; transform: none; display: grid; grid-auto-flow: column; grid-template-columns: var(--n) auto; justify-items: start; align-items: center; gap: 0.85rem; } .pipestops::before { left: calc(var(--n) / 2 - 1px); top: 0.45rem; width: 0; height: 62%; border-top: 0; border-left: 2px dashed rgba(244,241,234,.30); } .pipestops::after { left: calc(var(--n) / 2 - 1px); top: auto; bottom: 0.45rem; width: 0; height: 20%; border-top: 0; border-left: 2px solid var(--amber); } .pipespans { grid-template-columns: 1fr; } .pipespan:first-child > { padding-right: 0; } .pipespan--ours { margin-top: 1.1rem; } } /* Two columns because a list this long in one column reads as a wall. .checks supplies the mark; this only sets the grid and the on-dark color, since .checks li is --ink for the light bands. Now carries the founding-program points in #about - the pilot measurements moved to .measures. / .metrics { max-width: 52rem; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr 1fr; gap: 0.75rem clamp(1.5rem, 3vw, 2.75rem); } .sec--dark .metrics li, .sec--slate .metrics li { color: var(--on-dark); } @media (max-width: 640px) { .metrics { grid-template-columns: 1fr; } } / The founding-group terms. A panel of their own so they read as commitments attached to the founder above rather than four fragments floating between the bio and the button. Same 52rem measure as .founder. The mark is --amber-lt, not the --amber-dk .checks uses: on this slate that dark amber measures 1.64:1 and the ticks are effectively invisible. / .terms { max-width: 52rem; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; padding: 1.35rem 1.5rem 1.5rem; background: rgba(244,241,234,.05); border: 1px solid rgba(244,241,234,.14); border-radius: var(--radius, 14px); } .termslabel { margin: 0 0 1rem; font-family: var(--text); font-variation-settings: normal; font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-lt); } .terms ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem clamp(1.5rem, 3vw, 2.5rem); } .terms li { position: relative; padding-left: 1.65rem; font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark); } .terms li::before { content: "\2713"; content: "\2713" / ""; position: absolute; left: 0.05rem; top: -0.02em; font-weight: 700; color: var(--amber-lt); } @media (max-width: 640px) { .terms ul { grid-template-columns: 1fr; } } / The numbers a pilot is judged on, on the same measure as the steps above so the section reads as one block rather than two widths. Every one of these should get smaller, but nothing on the page says so, and an arrow that means "lower is better" without that sentence reads as a result we have not earned. The icons identify the measure instead and claim nothing. No figures either: a row of numerals here would read as results, and there are none yet. Filled cells rather than raised ones, so they do not read as a second set of the cards in #changes. / .measures { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 0.75rem; } .measures li { display: grid; gap: 0.7rem; align-content: start; padding: 1.15rem 1.15rem 1.25rem; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius, 14px); font-size: 0.9375rem; line-height: 1.45; color: var(--ink); } .measures li svg { box-sizing: content-box; width: 1.05rem; height: 1.05rem; padding: 0.35rem; border-radius: 50%; background: rgba(208,138,44,.14); color: var(--amber-dk); stroke-width: 1.9; } / The timeline needs air before the divider that labels what follows it. The label carried no top margin at all, so it sat against step 4's last line while floating 40px above the list it labels. / .steps + .gridlabel { margin-top: clamp(3rem, 6vw, 4.5rem); } .measures + .midcta { margin-top: clamp(2.5rem, 5vw, 3.5rem); } / Stacked, the badge-over-label cell is 101px tall to hold one line of text, and five of those is a lot of scrolling for five short labels. Narrow screens get the badge beside the label instead. / @media (max-width: 640px) { .measures li { grid-template-columns: auto 1fr; align-items: center; align-content: center; gap: 0.85rem; padding: 0.95rem 1.1rem; } } / ============================================================================ 14b · SEVEN-SECTION REBUILD (owner-first copy) ---------------------------------------------------------------------------- New classes only. The page dropped from ten substantive sections to seven by merging what-gets-installed with measurement, category with fit, and founder with websites, so most of what these support is existing components used in new places. Nothing above is redefined. ========================================================================== / / The narrative paragraph under a section head, before its exhibit. .gridafter is centered and sized for a closing line, which is the same shape. / .gridafter--lead { max-width: 46rem; margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem); font-size: 1.0625rem; line-height: 1.6; color: var(--on-dark-dim); text-align: center; } / The one place AI is named in the narrative, so the qualifier sits with it rather than in a boundary section of its own. / / Same measure as .promise below it. The tiles were taking the full wrap at 1104px while the panel sat at 64rem, so two blocks stacked on each other disagreed about both their width and their left edge. / #changes .tiles { max-width: 64rem; margin-inline: auto; grid-template-rows: auto auto; } / Subgrid so all three headings share one row box. "When the account is being prepared" wraps to two lines while its neighbours fit on one, which pushed its body copy 23px below theirs. / #changes .tile { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; } / The human boundary. It was one dim sentence at the bottom of this panel - the objection automation raises in a licensed business, answered in a footnote. Two columns, stated before the role outcomes rather than after them. / .boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem clamp(1.5rem, 3vw, 2.75rem); } .boundarylabel { margin: 0 0 0.75rem; font-family: var(--text); font-variation-settings: normal; font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.11em; text-transform: uppercase; color: var(--amber-lt); } .boundary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .boundary li { position: relative; padding-left: 1rem; font-size: 0.9375rem; line-height: 1.45; color: var(--on-dark); } .boundary li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--amber-lt); } / The mechanism, directly under the two columns: the reader has just been told what runs without a person and immediately asks what it runs on. "What software and AI handle" was the earlier label and implied Clearline supplies the software, which contradicts the whole "you probably have enough software" argument. / .promisenote { margin: 1.35rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--on-dark-dim); } / Separates the boundary above from the role outcomes below, so the panel reads as two claims rather than one long list. / .promisesub { margin: 1.75rem 0 1rem; padding-top: 1.35rem; border-top: 1px solid rgba(244,241,234,.16); font-family: var(--text); font-variation-settings: normal; font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.11em; text-transform: uppercase; color: var(--on-dark-dim); } @media (max-width: 640px) { .boundary { grid-template-columns: 1fr; } } / The three things we actually do, one per column, directly under the objection they answer. Label over sentence is the shape .ownerqs already uses, so the page reads as one system. A hairline rule rather than a card: the fit panel below is this section's filled component, and two filled blocks stacked would flatten both. Same 56rem measure as that panel. / .whatwedo { list-style: none; padding: 0; max-width: 56rem; margin: 0 auto clamp(2.25rem, 4.5vw, 3.25rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); } .whatwedo li { display: grid; gap: 0.45rem; align-content: start; padding-top: 0.85rem; border-top: 2px solid var(--amber); } .whatwedo b { font-family: var(--text); font-variation-settings: normal; font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.11em; text-transform: uppercase; color: var(--amber-dk); } .whatwedo span { font-size: 0.9375rem; line-height: 1.55; color: var(--body); } @media (max-width: 760px) { .whatwedo { grid-template-columns: 1fr; gap: 1.35rem; } } / The website offer is one paragraph inside the About section now, not a section of its own. The rule above it is what keeps it visibly secondary. / .webnote { max-width: 46rem; margin: clamp(2.25rem, 4.5vw, 3.25rem) auto 0; padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--line-dk); text-align: center; } .webnote h3 { margin: 0 0 0.7rem; font-family: var(--display); font-variation-settings: var(--display-vary); font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.25; color: var(--on-dark); border-bottom: 0; padding-bottom: 0; } .webnote p { margin: 0 0 1.4rem; font-size: 0.9375rem; line-height: 1.6; color: var(--on-dark-dim); } .webnote .btn-row { justify-content: center; } / ============================================================================ 15 · THE OWNER QUEUE (owner visibility) ---------------------------------------------------------------------------- REPLACES THE SCORECARD: six exception names beside four synonyms for "we do this". The owner read it and asked what it was supposed to represent, and he was right on four counts - the right-hand column carried no data, the caption promised a view and delivered a glossary, the six rows were the sentence above them in the same order, and the heading makes a claim about TIME while the exhibit contained none. SO THIS IS THE LIST ITSELF. Open commercial work on the left, days on the right, sorted oldest first. It is the only place on the page where the owner sees the OUTPUT of the work instead of a description of it - #problem draws the gap, #offer lists what gets installed, #process lists the steps, #what handles category confusion - and that is what earns the band. THE DAY COLUMN IS A BARE NUMERAL IN A FIXED TRACK. Set as "16 days" and right-aligned, 4 and 2 indent a full digit against 16 and 11, so the digits never form a column - the one thing this exhibit exists to deliver. The unit is labeled once, in the header row, directly above the numerals. RECESSED, NOT LIFTED, AND THAT IS A CONTRAST DECISION. Every other dark panel on this page sits on a white lift of about 5%. On the slate band that lift puts --amber-lt at 4.78:1, and 3.84:1 under the band's radial highlight - a fail for the day counts, which are the whole exhibit. Darkening instead takes the same amber to 6.46:1, worst case 5.41:1. It also reads as a screen the owner reads rather than as a sixth card. NO WINDOW CHROME, NO BUTTONS, NO LOGO, NO APP NAME. Clearline configures the AMS, CRM and inboxes the agency already runs, so anything that looks like a Clearline application implies a product that does not exist. NOTHING IN HERE IS CLIENT DATA. A live list carries a named insured and a producer name; this one carries a class of business and a stage. Do not add an agency name, a company name, a premium, a hit ratio, or a count of anything. ========================================================================== / / NO CLASSES OF BUSINESS IN THE ROWS. They used to read trucking fleet, contractor general liability, habitational property and restaurant package - four unrelated classes, which told a principal the agency in the picture writes everything and, worse, that it is not his book. The identity is the STAGE instead: every commercial agency has a new inquiry, an account being worked up, one at market and one quoted, whatever it writes. It also costs nothing, because the stage was already the second half of every row. / .queue { max-width: 52rem; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; } .queuepanel { background: rgba(0,0,0,.18); border: 1px solid rgba(244,241,234,.16); border-radius: var(--radius, 14px); overflow: hidden; } / Two items and space-between, never margin-left:auto. An auto margin holds the second item flush right the moment the pair wraps, stranding it under a flush-left title with nothing to align to. space-between puts a lone item on its own line flush left, which is correct at every width and needs no breakpoint to maintain. / .queuebar { padding: 0.85rem clamp(1rem, 2.4vw, 1.5rem); background: rgba(0,0,0,.24); border-bottom: 1px solid rgba(244,241,234,.14); } .queuename { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--on-dark); } / NAME THE AXIS BEFORE DRAWING IT. The fault the old exhibit could not recover from was that nothing on it said what was being measured. This row shares the row grid, so "DAYS" lands directly over the numerals it labels. / .queuecols { display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem; align-items: baseline; gap: 0.5rem 1.25rem; padding: 0.9rem clamp(1rem, 2.4vw, 1.5rem); border-bottom: 1px solid rgba(244,241,234,.14); } .queueaxis { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--on-dark-dim); } .queueunit { justify-self: end; text-align: right; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-dim); } / An
, because the order is the argument. styles.css only zeroes `ul`, and list-style:none drops list semantics in Safari, so role="list" rides along in the markup - the same pairing every other suppressed list on this page uses. / .queuerows { list-style: none; margin: 0; padding: 0; } .queuerow { display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem; align-items: center; gap: 0.5rem 1.25rem; padding: clamp(0.95rem, 2vw, 1.15rem) clamp(1rem, 2.4vw, 1.5rem); border-bottom: 1px solid rgba(244,241,234,.10); } .queuerow:last-child { border-bottom: 0; } / The grid track is capped at minmax(0,1fr), but the item inside it still defaults to min-width:auto and would push past the track on a long class name. This is what makes it wrap instead. / .queuewhat { min-width: 0; } / THE ACCOUNT IS THE BRIGHT LINE AND THE REASON IS THE SUPPORT. Inverted from the first draft, which set the reason at 17px in bone over a 13px dim class name: a reader met four complaints before four accounts, which drifts back toward the glossary this replaces. An owner scanning a worklist reads WHAT it is first and WHY it is here second. / .queueid { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--on-dark); } .queueid span { font-weight: 400; color: var(--on-dark-dim); } .queuewhy { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--on-dark-dim); } / The numeral in the display face and the accent, right-aligned in a fixed track, so 16, 11, 4 and 2 land on one right edge and the aging reads before a word does. 3.25rem clears two digits at the largest step with room for the Georgia fallback, and tabular-nums is carried for the same reason .record and .blindspot carry it - a three-digit value must not shift the column. / .queueage { justify-self: end; text-align: right; font-family: var(--display); font-variation-settings: var(--display-vary); font-size: clamp(1.6rem, 3.8vw, 2.25rem); font-weight: 600; line-height: 1; color: var(--amber-lt); font-variant-numeric: tabular-nums; } / The exit rule. Without it four rows read as a backlog; with it they read as a list with a way off it, which is the thing being sold. It is deliberately a rule about THIS list, not a guarantee about every record that is not on it - that would be a promise about producer behavior we do not control. / .queuefoot { margin: 0; padding: clamp(0.95rem, 2vw, 1.15rem) clamp(1rem, 2.4vw, 1.5rem); border-top: 1px solid rgba(244,241,234,.16); background: rgba(0,0,0,.14); font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark); } / 480px, and it is load-bearing rather than cosmetic: the text column is ~229px at 375, so the day track and the gutters give ground to keep the reason line off a fourth wrap. This is also the file's only max-width:480px query - the scorecard used to own it and the test suite asserts that one exists. / @media (max-width: 480px) { .queuecols, .queuerow { grid-template-columns: minmax(0, 1fr) 2.75rem; gap: 0.4rem 0.85rem; } .queueid { font-size: 1rem; } } / ============================================================================ 16 · TWO SMALL MODIFIERS (new selectors only - nothing above is redefined) ========================================================================== / / The four jobs carry one list each, not an included/add-on split, so the panel body is a single column here. / .jobbody--one { grid-template-columns: 1fr; } / An exact two-up, for the website branch. .tiles auto-fits and would drop to one column too early with only two children. */ .tiles--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 760px) { .tiles--2 { grid-template-columns: 1fr; } }