/* ============================================================= ZARAS — Home atmosphere v5 Per-section dark tonal scenes for index.html only. v5 (2026-06-02): Removed every rule that targeted the home "How access works" (.how-access*) and "Closing" (.closing, .closing > .shell) sections. Those two end sections were merged into one self-contained finale (css/home-close.v1.css,
), which carries its own atmosphere arc, connector spine, and teal conversion bloom and consumes no home-atmosphere tones. Deleted here: the .how-access/.closing entries in the base + radial-glow pseudo groups, the .closing::before mask override, both tone blocks, the .how-access-head headline grid, the .how-access::after workflow grid, and the .closing > .shell completion-wire pseudos. KEPT: .closing-modules / .cm-item — the new section reuses them verbatim for its final capability rail. v4 (2026-06-01): Removed every rule that targeted the home Platform teaser section. That teaser was refreshed into the self-contained css/home-platform.v1.css module ("Board -> one record"), which carries its own atmosphere + glass and consumes no home-atmosphere tones. Deleted here: the Platform entries in the base + radial-glow pseudo groups, the PLATFORM tone block, the route-grid / route-hint stage signatures (the old blue cockpit backdrop), the full-bleed stage layout wrappers, and the dispatch surface frame. The section selector no longer appears in this file at all. v3 (2026-05-20): Deleted dead `body[data-page="home"] .hero { ... }` block. Home renders
, not .hero — the selector matched no element. The values it set were also identical to the fallback defaults in the consumer rules (line ~83-85), so the block was doubly inert. Cleanup folded into the hero/zoom-resilience pass. v2 history (preserved): Per-section dark tonal scenes for index.html only. Tuned for v3 preview. Architecture: 1. Each section gets position:relative + isolation:isolate. 2. A shared ::before pseudo paints a full-bleed atmospheric layer (radial glow + linear top→bottom dark wash). The per-section tone is set via CSS custom properties: --home-tone-rgb — "R G B" triplet for the glow color --home-tone-alpha — peak alpha of the radial glow --home-glow-x / -y — center of the radial glow (%) --home-tone-top — color stop at section top --home-tone-bottom — color stop at section bottom 3. Section signatures (constellation, ops-stage grid, scale line, workflow grid, completion wire) layer on top of the atmosphere via additional pseudos. 4. The closing section also hosts a new modules row (Dispatch · Estimates · Invoices · Payments · Reports) as the page-end signature beat. Tones follow the home-page review (SD Direction doc): Hero - subtle teal operational horizon Platform - blue/teal cockpit charcoal Industries - warmer dark steel/earth Pricing - dark navy/violet-gray financial How Access - muted teal workflow rail Closing - strongest controlled teal conversion glow Conventions: - All rules scoped under body[data-page="home"] so other pages cannot accidentally inherit. Atmosphere is a home-page-only system; extending to other pages later requires explicit opt-in. - Loaded AFTER page-glow.v2 so the home atmosphere can coexist with the existing body-bottom teal glow without fighting it. body::after handles the global bottom bloom; this file handles per-section tonal variation. ============================================================= */ /* -------- Defensive: prevent 100vw from causing a horizontal scrollbar. Each atmospheric ::before uses width:100vw + translateX(-50%) to escape the .shell width constraint; without overflow:clip on html/body, that overshoots by the vertical scrollbar's width and forces a horizontal scrollbar. `clip` is preferred over `hidden` because it doesn't create a scroll context (better behavior with position:fixed descendants like the nav drawer). ------------------------- */ html { overflow-x: clip; } body[data-page="home"] { overflow-x: clip; } /* ============================================================= 1. Atmosphere base — shared across all sections ============================================================= */ body[data-page="home"] .hero, body[data-page="home"] #trades { position: relative; isolation: isolate; } body[data-page="home"] .hero::before, body[data-page="home"] #trades::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: -1; pointer-events: none; background: /* Section-tone radial glow */ radial-gradient( ellipse 70% 55% at var(--home-glow-x, 50%) var(--home-glow-y, 22%), rgb(var(--home-tone-rgb, 118 199 178) / var(--home-tone-alpha, 0.10)) 0%, rgb(var(--home-tone-rgb, 118 199 178) / 0.045) 35%, transparent 72% ), /* Top→bottom dark wash for depth */ linear-gradient( 180deg, var(--home-tone-top, transparent) 0%, var(--home-tone-bottom, transparent) 100% ); /* Soft taper at section edges so adjacent sections blend instead of butting hard at boundaries. */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%); } /* Hero is the page opener — no top-mask fade (would hide the first ~7% of the warm horizon at top of page). */ body[data-page="home"] .hero::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%); } /* ============================================================= 2. Per-section tones ============================================================= */ /* v3: HERO section block deleted. Home renders
, not .hero — the selector `body[data-page="home"] .hero` matched no element. Variables matched the consumer-rule fallbacks (118 199 178 / 0.10) so the block was inert in two ways. The .home-hero section's atmospheric glow lives in css/home-hero.v4.css (substrate-zones). */ /* INDUSTRIES — warmer dark steel/earth. Field/service world: shop floors, vans, light through warehouse windows. Glow source from upper-left balances the centered glow above on Platform. */ body[data-page="home"] #trades { --home-tone-rgb: 172 130 74; --home-tone-alpha: 0.085; --home-glow-x: 30%; --home-glow-y: 18%; --home-tone-top: rgba(16, 13, 9, 0.72); --home-tone-bottom: rgba(9, 12, 11, 0.20); } /* (HOW ACCESS WORKS + CLOSING tone blocks removed — both sections were merged into the self-contained css/home-close.v1.css module, which carries its own atmosphere arc + teal conversion bloom and consumes no home-atmosphere tones.) */ /* ============================================================= 3. Section signatures — quiet decoratives that map each section to its content theme. All procedural (CSS + SVG data URLs); none compete with text or controls. ============================================================= */ /* ---- INDUSTRIES — section signature retired ------------------- The old #trades teaser (earth-tone constellation + lane-convergence topology + shapes-line) was replaced by the full-bleed home-industries.v1.css module, which is fully self-contained and neutralizes any inherited ::after via #trades.zi::after. The warm ambient #trades::before glow + the #trades --home-tone-* block above are KEPT — the new section relies on them. */ /* (HOW ACCESS WORKS headline-hierarchy + workflow-grid signatures removed with the merged-section rework — see css/home-close.v1.css.) */ /* ============================================================= 4. CLOSING — modules row Moved to the shared css/access-close.v1.css so the home close (.zc .closing-modules, home-close.v5.css) and the /platform close share one definition. The .zc-scoped overrides still live in home-close.v5.css. ============================================================= */