/* ============================================================================= SoloDrive Front CSS — HOME STAIRS (WO-2026-3905, Design; supersedes the WO-2026-2431 slab composition, which Mike liked as a concept and not as a result) LOAD SLOT: 20 (free since 2431 proposed it and never landed). Enqueue between 19-meet-marcus.css and 21-pricing.css. Scoped entirely under `.sd-home-v2`. WHAT IT DOES The home hero gets its visual hook: a staircase that climbs up and to the right, drawn in HTML/CSS with live text (no image, no SVG type, no web font, no network request). Two variants share one block, picked by a modifier class: .hv-stairs--tools Variant A: five tool slabs (the 2431 stack, re-drawn) .hv-stairs--ladder Variant B: three effort -> reward steps on a CONTROL foundation THE FOUR 2431 FAULTS, AND WHERE EACH ONE IS FIXED 1. media outranked the stack -> the stairs take the hero's graphic slot; the carousel leaves the first screen (phone) / the right column (desktop). §3, §5 2. 13px lean invisible -> the step run is 1/8 to 1/4 of the block width (34-56px slabs, 33% column-height steps). Reads at arm's length. §2a, §2b 3. white on cream, no weight -> solid teal ramp (dark at the bottom, brighter as it climbs), a lit tread edge, a cast shadow. §1 4. right-aligned micro copy -> gone. Each step carries a NAME (and, on B, one left-aligned effort/reward line). No spec-sheet rows. §2 STRUCTURAL RULES CARRIED FROM 2431 (do not lose these in the build) - The decorative staircase carries aria-hidden="true". Its text stays in the DOM (crawlable, selectable); it is removed from the accessibility tree only, so a screen reader does not hear every name twice. - The names ALSO exist as real links in `nav.hv-tools`, inside the copy column, AFTER the CTAs in source order. Link weight, never button weight. - The staircase markup sits AFTER .hv-hero__copy in source order. Headline, subhead and identity CTAs stay first for machines; the stairs are moved UP visually on phones with CSS `order` only (non-focusable content, so visual order != DOM order is not a keyboard trap). ============================================================================= */ .sd-home-v2 { /* §1 — the rising ramp. Every step colour carries WHITE text at >= 6.4:1 and the mint sub-line at >= 5.2:1 (measured, WCAG AA). Dark at the bottom, brighter as it climbs: the climb is also a value ramp, so it reads in greyscale. */ --stair-1: #0e4a43; /* bottom step white 10.1:1 */ --stair-2: #11524a; --stair-3: #135a51; /* middle white 8.05:1 */ --stair-4: #166257; --stair-5: #186a5f; /* top step white 6.43:1 */ --stair-ink: #ffffff; --stair-sub: #c9f1e8; /* sub-line on any step >= 5.28:1 */ --stair-base: var(--navy, #121b36); --stair-base-ink: var(--teal-on-navy, #5ad6c0); /* 9.56:1 on navy */ --stair-tread: inset 0 3px 0 rgba(255, 255, 255, .16); --stair-cast: 0 14px 28px rgba(13, 20, 40, .20), 0 2px 4px rgba(13, 20, 40, .12); } /* ---------------------------------------------------------------- the block */ .sd-home-v2 .hv-stairs { position: relative; width: 100%; margin: 0; font-family: var(--sans); -webkit-user-select: none; user-select: none; } .sd-home-v2 .hv-stairs ol, .sd-home-v2 .hv-stairs ul { list-style: none; margin: 0; padding: 0; } .sd-home-v2 .hv-stairs__k, .sd-home-v2 .hv-stairs__v { overflow-wrap: normal; word-break: normal; hyphens: manual; } .sd-home-v2 .hv-stairs__k { display: block; font-weight: 750; letter-spacing: -0.005em; line-height: 1.15; color: var(--stair-ink); } .sd-home-v2 .hv-stairs__v { display: block; margin-top: 3px; font-weight: 500; line-height: 1.25; color: var(--stair-sub); } /* the up-and-to-the-right arrow that caps the top step (pure CSS, decorative) */ .sd-home-v2 .hv-stairs__cap { position: absolute; width: 34px; height: 34px; border-radius: 999px; background: var(--clay); box-shadow: 0 8px 18px rgba(194, 97, 61, .35); } .sd-home-v2 .hv-stairs__cap::before { /* arrow shaft + head, 45deg */ content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -7px 0 0 -5px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; } .sd-home-v2 .hv-stairs__cap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2.5px; margin: -1px 0 0 -8px; background: #fff; transform: rotate(-45deg); transform-origin: center; } /* ============================================================================= §2a — VARIANT A: THE TOOL STACK (five slabs; left edge climbs to the right) Markup: ol.hv-stairs__steps > 5 × li.hv-stairs__step, listed TOP FIRST (2431 order: Booking page at the apex). No inline styles: the run and the ramp are keyed off position, so the count is fixed at five (memo §9: "six reads as a menu"). ============================================================================= */ .sd-home-v2 .hv-stairs--tools { --run: 52px; --h: 58px; --gap: 6px; padding-top: 20px; } .sd-home-v2 .hv-stairs--tools .hv-stairs__steps { display: flex; flex-direction: column; gap: var(--gap); } .sd-home-v2 .hv-stairs--tools .hv-stairs__step { height: var(--h); margin-left: calc(var(--run) * var(--i, 0)); /* THE STAIRCASE: big, visible run */ display: flex; align-items: center; padding: 0 20px; border-radius: 12px; box-shadow: var(--stair-tread), var(--stair-cast); font-size: 19px; } .sd-home-v2 .hv-stairs--tools .hv-stairs__step:nth-child(1) { --i: 4; background: var(--stair-5); z-index: 5; } .sd-home-v2 .hv-stairs--tools .hv-stairs__step:nth-child(2) { --i: 3; background: var(--stair-4); z-index: 4; } .sd-home-v2 .hv-stairs--tools .hv-stairs__step:nth-child(3) { --i: 2; background: var(--stair-3); z-index: 3; } .sd-home-v2 .hv-stairs--tools .hv-stairs__step:nth-child(4) { --i: 1; background: var(--stair-2); z-index: 2; } .sd-home-v2 .hv-stairs--tools .hv-stairs__step:nth-child(5) { --i: 0; background: var(--stair-1); z-index: 1; } .sd-home-v2 .hv-stairs--tools .hv-stairs__step { position: relative; } .sd-home-v2 .hv-stairs--tools .hv-stairs__cap { right: -10px; top: 0; } /* ============================================================================= §2b — VARIANT B: THE LADDER (three steps standing on the Control foundation) Markup: ol.hv-stairs__steps > 3 × li.hv-stairs__step, then p.hv-stairs__base. Control is the FOUNDATION: a full-width slab UNDER the steps, a different colour, never a fourth column. (Ruled, HOME-PAGE-COPY-WO-2259.md › THE LADDER.) ============================================================================= */ .sd-home-v2 .hv-stairs--ladder { --tall: 330px; --gap: 10px; padding-top: 22px; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: end; height: var(--tall); } .sd-home-v2 .hv-stairs--ladder .hv-stairs__step { display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 16px 14px; border-radius: 14px 14px 0 0; box-shadow: var(--stair-tread), var(--stair-cast); font-size: 18px; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__step:nth-child(1) { height: 36%; background: var(--stair-1); } .sd-home-v2 .hv-stairs--ladder .hv-stairs__step:nth-child(2) { height: 68%; background: var(--stair-3); } .sd-home-v2 .hv-stairs--ladder .hv-stairs__step:nth-child(3) { height: 100%; background: var(--stair-5); } .sd-home-v2 .hv-stairs--ladder .hv-stairs__v { font-size: .8em; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__n { /* "Step one" eyebrow */ display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--stair-sub); } .sd-home-v2 .hv-stairs--ladder .hv-stairs__base { position: relative; z-index: 1; margin: 0; padding: 14px 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-radius: 0 0 14px 14px; background: var(--stair-base); box-shadow: 0 18px 34px rgba(13, 20, 40, .22); font-size: 18px; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__base .hv-stairs__k { color: var(--stair-base-ink); letter-spacing: .12em; text-transform: uppercase; font-size: .78em; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__base .hv-stairs__v { margin: 0; color: #fff; font-weight: 600; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__cap { right: -12px; top: 4px; } /* ============================================================================= §3 — THE HERO COMPOSITION (desktop >= 861px) Copy column | stairs column. The carousel leaves the right column and becomes a full-width row of the four product screens under the hero grid (option C1). ============================================================================= */ .sd-home-v2 .hv-hero__grid > p:empty { display: none; } /* wpautop orphans in the body (flagged to FOS) */ @media (min-width: 861px) { /* the grid is shorter without the tall phone in it: give the lockup back its air */ .sd-home-v2 .hv-hero { padding-top: clamp(40px, 7vh, 80px); } .sd-home-v2 .hv-hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; } .sd-home-v2 .hv-hero__grid > .hv-hero__copy { grid-column: 1; grid-row: 1; } .sd-home-v2 .hv-hero__grid > .hv-stairs { grid-column: 2; grid-row: 1; } /* C1: the four screens, side by side, no scroller, no dots */ .sd-home-v2 .hv-hero__grid > .hv-carousel { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(16px, 3vw, 40px); } .sd-home-v2 .hv-hero__grid > .hv-carousel .hv-carousel__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 32px); overflow: visible; scroll-snap-type: none; } .sd-home-v2 .hv-hero__grid > .hv-carousel .hv-carousel__slide { width: auto; min-width: 0; flex: none; } .sd-home-v2 .hv-hero__grid > .hv-carousel .hv-carousel__img { width: 100%; max-width: 230px; margin-inline: auto; } .sd-home-v2 .hv-hero__grid > .hv-carousel .hv-carousel__cap { font-size: 14.5px; max-width: 26ch; margin-inline: auto; } .sd-home-v2 .hv-hero__grid > .hv-carousel .hv-carousel__dots { display: none; } } /* ============================================================================= §4 — the linked names (nav.hv-tools). LINK weight. Never a button, never clay fill. ============================================================================= */ .sd-home-v2 .hv-tools { margin-top: 18px; max-width: 420px; } .sd-home-v2 .hv-tools__label { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .sd-home-v2 .hv-tools__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; } .sd-home-v2 .hv-tools__list li { font-size: 14.5px; line-height: 1.9; color: var(--muted); } .sd-home-v2 .hv-tools__list li + li::before { content: "·"; padding: 0 9px; color: var(--faint); } .sd-home-v2 .hv-tools__list a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 4px; } .sd-home-v2 .hv-tools__list a:hover { color: var(--clay-ink); text-decoration-color: currentColor; } .sd-home-v2 .hv-tools__list a:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 3px; } /* ============================================================================= §5 — PHONE (<= 860px): THE FIRST SCREEN Order on screen: lockup -> STAIRS -> lead -> identity CTAs -> account line -> micro -> linked names -> carousel. The word "stack" is answered by the stack, directly under it. Budget at 390x844 (measured on the preview): Continue with Google sits fully above the fold with the stairs above it. ============================================================================= */ @media (max-width: 860px) { .sd-home-v2 .hv-hero { padding-top: 18px; } .sd-home-v2 .hv-hero__grid { row-gap: 0; } /* flatten the copy column so the stairs can sit between lockup and lead */ .sd-home-v2 .hv-hero__copy { display: contents; } /* `order` works on the flattened children; selectors stay DOM-true (copy > child) */ .sd-home-v2 .hv-hero__copy > * { order: 3; } .sd-home-v2 .hv-hero__copy > .hv-lockup { order: 1; margin-bottom: 14px; } .sd-home-v2 .hv-hero__grid > .hv-stairs { order: 2; margin-bottom: 18px; } .sd-home-v2 .hv-hero__grid > .hv-carousel { order: 4; } /* the lockup's column-relative size (11cqi) loses its container when the column is flattened; restate it against the viewport so it renders exactly as today */ .sd-home-v2 .hv-lockup span + span { font-size: clamp(30px, 9.6vw, 44px); } .sd-home-v2 .hv-lockup__brand { white-space: nowrap; } /* never "SOLODRIVE.PR / O" */ .sd-home-v2 .hv-hero .lead { font-size: 17px; line-height: 1.5; margin-bottom: 16px; } .sd-home-v2 .hv-stairs--tools { --run: 30px; --h: 34px; --gap: 4px; padding-top: 6px; } .sd-home-v2 .hv-stairs--tools .hv-stairs__step { padding: 0 12px; border-radius: 9px; font-size: 15px; } .sd-home-v2 .hv-stairs--tools .hv-stairs__cap { width: 26px; height: 26px; right: -4px; top: -10px; } .sd-home-v2 .hv-stairs--ladder { --tall: 150px; --gap: 6px; padding-top: 8px; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__step { padding: 9px 9px 8px; border-radius: 10px 10px 0 0; font-size: 14px; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__step:nth-child(1) { height: 44%; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__step:nth-child(2) { height: 72%; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__base .hv-stairs__k { font-size: 11.5px; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__n { display: none; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__v { font-size: 11.5px; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__base { padding: 8px 12px; gap: 8px; border-radius: 0 0 10px 10px; font-size: 13.5px; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__cap { width: 26px; height: 26px; right: -4px; top: -2px; } .sd-home-v2 .hv-stairs__cap::before { width: 9px; height: 9px; margin: -5px 0 0 -3px; border-width: 2px; } .sd-home-v2 .hv-stairs__cap::after { width: 11px; height: 2px; margin: -1px 0 0 -6px; } } @media (max-width: 370px) { .sd-home-v2 .hv-stairs--tools { --run: 26px; --h: 31px; } .sd-home-v2 .hv-stairs--ladder { --tall: 136px; } .sd-home-v2 .hv-stairs--ladder { --gap: 5px; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__step { padding: 8px 7px 7px; font-size: 12.5px; } .sd-home-v2 .hv-stairs--ladder .hv-stairs__v { font-size: 11px; } } /* Reduced motion: nothing here animates. Print: drop the decoration, keep the links. */ @media print { .sd-home-v2 .hv-stairs { display: none; } }