/* ========================================================= STORM — PTLP HOMEPAGE THEME (October / Breast Cancer Awareness Month takeover) ----------------------------------------------------------- Loaded ONLY by Home/spi-homepage-ptlp.html, third and last: 1. base-web-style.css structure, grid, components 2. spi-homepage.css homepage-only components 3. spi-homepage-ptlp.css <- this file: color only THIS SHEET IS A THEME LAYER, NOT A STYLESHEET. It re-colors. It does not lay anything out. Nothing here re-declares a grid, a breakpoint, a padding scale, an aspect-ratio, or a transition that the two sheets above already own — so the PTLP homepage inherits every future fix to those sheets for free, and its responsive behavior is by definition identical to the standard homepage. The only layout rules in this file belong to the two components that do not exist on the standard homepage: .ptlp-home-band (donation total + ball card) and .ptlp-home-ribbon-bar (awareness strip). Both are additive October sections, so their layout has nowhere else to live. HOW THE RE-COLOR WORKS Most of it is free. base-web-style.css draws every component from --spi-* tokens, so remapping those tokens in :root repaints the page, the cards, the type, and the borders in one move. What needs explicit rules is only the handful of places the base or the homepage sheet hard-codes a color: - .btn.default and the on-imagery button variant (hard-coded, and shipped with !important) - the archetype cards' local --arc-* palette and the teal literals in their SVG fill classes - the archetype tabs' teal literals - .spi-brand-stripe's dark band Each of those is handled in its own numbered section below. THE VISUAL LANGUAGE IS NOT INVENTED HERE. Every value comes from the live Paint the Lanes Pink page (Paint the Lanes Pink/ptlp-style.css): the pink, the deep pink, the white-on-pink meter, the pill shape and its pink glow shadow. This file re-expresses that language through the homepage's components rather than restating it. CONTENTS 1. TOKENS — the whole re-color, in one block 2. PAGE GROUND + HERO DOTS 3. BUTTONS 4. ARCHETYPE CARDS (the teal component) 5. BRAND-TABBED BALL RACK (additive component) 6. IMAGE + PRODUCT CARDS 7. VIDEO ROW 8. LEARNING SECTION 9. PTLP BAND (additive component) 10. AWARENESS RIBBON (additive component) ========================================================= */ /* --------------------------------------------------------- 1. TOKENS `:root:root`, not `:root` — copied deliberately from ptlp-style.css, where the doubled pseudo-class is load- bearing and documented at length. base-web-style.css sets these same tokens in a plain `:root` (0,1,0). The host CMS page builder can inject the base AFTER a page's own sheet, and at equal specificity the base would then win on source order and silently revert every token here to the commerce defaults. Doubling makes this (0,2,0) so load order stops mattering. Keep every token override in this file at :root:root. --------------------------------------------------------- */ :root:root { /* ---- PTLP brand, carried over from ptlp-style.css ---- */ --ptlp-pink: #EC1A76; --ptlp-pink-deep: #C4055C; --ptlp-pink-lift: #FF4F9A; /* hover/active lift */ --ptlp-glow: rgba(236, 26, 118, 0.28); --ptlp-soft: rgba(236, 26, 118, 0.10); --ptlp-line: rgba(236, 26, 118, 0.35); /* ---- ground, dark per the mockup ---- */ --ptlp-bg: #000000; --ptlp-bg-soft: #0a0a0a; --ptlp-bg-card: #121212; --ptlp-bg-card-lift: #161616; /* ---- re-map the base's neutral tokens ---- This is the move that repaints the page. Every global component references these, so cards, type, borders and surfaces all follow without being named here. --spi-white is a SURFACE token in the base (card grounds), which is why it goes dark rather than staying white; text color is --spi-black, which goes white. Inverting the pair is how the tech skin does it too. */ --spi-white: var(--ptlp-bg-card); /* card surfaces */ --spi-black: #ffffff; /* primary text */ --spi-text-muted: rgba(255, 255, 255, 0.72); /* body copy */ --spi-border: #262626; /* hairlines */ --spi-gray-100: var(--ptlp-bg-card); --spi-gray-200: #0d0d0d; /* learning band */ --spi-gray-300: #1a1a1a; /* image plates */ /* The accent every .btn and accent rule in the base resolves through. One line is most of the pink on the page. */ --spi-accent: var(--ptlp-pink); /* Image-card scrim. The base's stock overlay tops out at 0.65, which on a black page leaves card titles sitting on mid-grey. The mockup runs the gradient to near-solid at the foot of the card so the white title and pink pill read cleanly. */ --spi-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 75%); } /* --------------------------------------------------------- 2. PAGE GROUND Black, with the same two-point pink atmosphere the PTLP page carries (ptlp-style.css) so the takeover reads as the campaign rather than as "the homepage, but dark". --------------------------------------------------------- */ body { background: var(--ptlp-bg); color: var(--spi-black); } /* The pink atmosphere. It lives on a fixed pseudo-element rather than on body with `background-attachment: fixed`, which is what this used to be. A fixed background attachment cannot take the browser's fast scroll path: it repaints a viewport-sized gradient on every scroll frame, and on a page this long (~14,000px on a phone) that is the single most expensive thing on the page while scrolling. A fixed-position layer paints once and is then just composited, and looks identical. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 12% 0%, rgba(236, 26, 118, 0.10), transparent 58%), radial-gradient(circle at 88% 38%, rgba(196, 5, 92, 0.08), transparent 60%); } /* The store template wraps CMS content in .main-container and paints it solid white — it sits between body and the sections and would hide the dark ground entirely. Same clear-out the tech skin needs, and the reason a CMS preview can look right while the published page does not. Scoped to pages that load this sheet. */ .main-container, .main-container.col1-layout { background: transparent !important; } /* Eyebrows carry the accent on this theme (they are muted grey in the base). Covers "Media", "Learn", and the band's own lockup. */ .spi-eyebrow { color: var(--ptlp-pink); } /* Hero carousel dots. The homepage sheet draws the resting dot as a half-opaque white and the current one as solid white — correct on the standard hero, but on this one the white dot is the same white as the banner artwork behind it and stops reading as a control. The current slide goes pink; the resting dots stay white so the pair still reads as "this one / the others". Both target ::before, not the