/* ============================================================ wbs-home-p3.css — Wide Blue Sound homepage product showcase ------------------------------------------------------------ Production stylesheet, fully scoped under .wbs-p3. Class-based (no IDs, no DOM-order reliance) so each piece maps cleanly to a native Elementor element when the page is rebuilt. Structure: .wbs-p3 (full-width section, p3 background) → .wbs-p3__grid (2-up desktop/tablet-landscape, 1-up mobile) → .wbs-p3-card .wbs-p3-card-- → .wbs-p3-card__pills (.wbs-p3-pill .wbs-p3-pill--new / --sale) → .wbs-p3-card__title → .wbs-p3-card__image → .wbs-p3-card__desc → .wbs-p3-card__foot → .wbs-p3-card__price (+ .wbs-p3-card__price-old) → .wbs-p3-card__ctas (.wbs-p3-btn .wbs-p3-btn--primary / --ghost) Card ordering (top → bottom): pills → title → image → desc → price+CTAs. Per-card gradient: image-derived OKLCH custom props on .wbs-p3-card--; the gradient covers the whole card and NEVER fades to black/page bg (locked DESIGN-NOTES rule). Fonts (load alongside this CSS — see p3-preview.html ): ============================================================ */ /* ------------------------------------------------------------ ROOT — tokens, fluid type scale, section canvas + background ------------------------------------------------------------ */ .wbs-p3 { /* ---- Fluid type scale (Utopia clamp) ---- */ --p3-step--2: clamp(0.70rem, 0.66rem + 0.18vw, 0.80rem); --p3-step--1: clamp(0.82rem, 0.78rem + 0.20vw, 0.92rem); --p3-step-0: clamp(0.93rem, 0.89rem + 0.22vw, 1.04rem); --p3-step-1: clamp(1.05rem, 0.99rem + 0.30vw, 1.20rem); --p3-step-2: clamp(1.25rem, 1.15rem + 0.50vw, 1.55rem); --p3-step-3: clamp(1.55rem, 1.35rem + 1.00vw, 2.15rem); --p3-step-4: clamp(2.05rem, 1.70rem + 1.75vw, 3.15rem); /* ---- Ink (tinted neutrals — never pure white/black) ---- */ --p3-ink: oklch(0.97 0.008 260); --p3-ink-soft: oklch(0.88 0.012 260); --p3-ink-mute: oklch(0.74 0.016 260); /* ---- Canvas + rules ---- */ --p3-canvas: oklch(0.11 0.022 268); --p3-rule: oklch(0.36 0.020 260 / 0.55); --p3-rule-soft: oklch(0.42 0.020 260 / 0.28); /* ---- Accents ---- */ --p3-cyan: oklch(0.78 0.14 225); --p3-cyan-soft: oklch(0.78 0.14 225 / 0.15); --p3-gold: oklch(0.83 0.13 76); /* ---- Type families ---- */ --p3-serif: 'Newsreader', 'Times New Roman', serif; --p3-sans: 'Satoshi', -apple-system, 'Inter', system-ui, sans-serif; /* ---- Layout ---- */ max-width: 2560px; margin: 0 auto; padding: clamp(16px, 2vw, 28px) clamp(44px, 5vw, 80px) clamp(64px, 8vw, 120px); background: radial-gradient(ellipse 90% 40% at 75% 10%, oklch(0.18 0.060 285 / 0.55) 0%, transparent 60%), radial-gradient(ellipse 60% 35% at 10% 30%, oklch(0.14 0.045 240 / 0.50) 0%, transparent 55%), radial-gradient(ellipse 70% 30% at 85% 60%, oklch(0.13 0.040 210 / 0.35) 0%, transparent 55%), radial-gradient(ellipse 50% 25% at 20% 80%, oklch(0.13 0.040 310 / 0.30) 0%, transparent 50%), linear-gradient(180deg, oklch(0.11 0.022 268) 0%, oklch(0.10 0.020 264) 35%, oklch(0.09 0.018 258) 70%, oklch(0.09 0.017 252) 100%); color: var(--p3-ink); font-family: var(--p3-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; position: relative; overflow: hidden; isolation: isolate; } .wbs-p3 *, .wbs-p3 *::before, .wbs-p3 *::after { box-sizing: border-box; } /* Film grain texture overlay */ .wbs-p3::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); z-index: 1; } /* ------------------------------------------------------------ GRID — 2-up desktop/tablet-landscape, equal-weight cards ------------------------------------------------------------ */ .wbs-p3__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; /* curated spacing, not tiled (GPT) */ } /* ------------------------------------------------------------ CARD — equal-weight, fixed internal row rhythm so descriptions and footers line up across a row regardless of copy length. ------------------------------------------------------------ */ .wbs-p3-card { position: relative; border-radius: 20px; overflow: hidden; min-height: 620px; max-height: min(820px, 92vh); height: clamp(620px, 76vh, 760px); display: grid; grid-template-rows: auto /* 1: title */ clamp(230px, 30vh, 320px) /* 2: image — fixed bounding box */ auto /* 3: description */ 1fr; /* 4: footer — pills (when present) + price + CTAs */ align-items: stretch; isolation: isolate; transition: box-shadow 260ms ease, filter 260ms ease; box-shadow: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 0 0 1px oklch(1 0 0 / 0.04) inset, 0 30px 60px -40px oklch(0 0 0 / 0.55); } /* Hairline inner ring — keeps the card edge readable on every bg */ .wbs-p3-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.06); z-index: 4; } /* Hover: gentle brightness lift — no transform, no color shift (Apple-style) */ .wbs-p3-card:hover { filter: brightness(1.07) saturate(1.03); box-shadow: 0 1px 0 oklch(1 0 0 / 0.08) inset, 0 0 0 1px oklch(1 0 0 / 0.05) inset, 0 32px 72px -20px oklch(0 0 0 / 0.82); } /* Whole card is clickable → product page (stretched link). The CTA buttons (Explore + Listen) sit above it so Listen stays independent (NHR). */ .wbs-p3-card__link { position: absolute; inset: 0; z-index: 3; /* above image (1) AND title (2) so the WHOLE card is clickable */ border-radius: inherit; color: inherit; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; } .wbs-p3-card__ctas .wbs-p3-btn { position: relative; z-index: 4; /* above the card link so Explore/Listen stay independent */ } /* Explicit grid-row assignments so all 5 rows stay locked regardless of how many elements a card has. */ .wbs-p3-card__title { grid-row: 1; } .wbs-p3-card__image { grid-row: 2; } .wbs-p3-card__desc { grid-row: 3; } .wbs-p3-card__foot { grid-row: 4; } /* ------------------------------------------------------------ PILLS — absolute badge in the upper-left corner of the card. Pointer-events none so the card link underneath stays active. ------------------------------------------------------------ */ .wbs-p3-card__pills { position: absolute; top: 22px; left: 24px; z-index: 5; pointer-events: none; display: flex; flex-flow: row wrap; align-items: center; gap: 6px; } .wbs-p3-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-family: var(--p3-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; white-space: nowrap; border: 1px solid oklch(1 0 0 / 0.22); background: oklch(1 0 0 / 0.07); color: oklch(0.96 0.01 80); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .wbs-p3-pill--new { border-color: oklch(0.82 0.14 85 / 0.55); color: oklch(0.92 0.12 88); background: oklch(0.82 0.14 85 / 0.08); } .wbs-p3-pill--new::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--p3-gold); box-shadow: 0 0 6px var(--p3-gold); } .wbs-p3-pill--sale { border-color: oklch(0.78 0.14 225 / 0.55); color: oklch(0.90 0.12 225); background: oklch(0.78 0.14 225 / 0.08); } /* ------------------------------------------------------------ NEW BADGE — bare glowing text treatment (option 10) Card gets a double gold ring; badge is pure text, no pill. ------------------------------------------------------------ */ .wbs-p3-card--new { box-shadow: 0 0 0 1.5px oklch(0.82 0.14 78 / 0.85), inset 0 0 0 1px oklch(0.82 0.14 78 / 0.18), 0 0 30px oklch(0.72 0.14 76 / 0.20), 0 30px 60px -40px oklch(0 0 0 / 0.55) !important; } .wbs-p3-card__new-badge { position: absolute; top: 22px; left: 24px; z-index: 5; pointer-events: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--p3-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--p3-gold); text-shadow: 0 0 12px oklch(0.72 0.14 76 / 0.65), 0 0 28px oklch(0.66 0.12 74 / 0.32); line-height: 1; white-space: nowrap; } .wbs-p3-card__new-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--p3-gold); box-shadow: 0 0 8px var(--p3-gold); flex-shrink: 0; } /* ------------------------------------------------------------ TITLE — big serif italic name. Fixed min-height so the image zone starts at the same y across a row even if a name wraps. ------------------------------------------------------------ */ .wbs-p3-card__title { position: relative; z-index: 2; /* Category is now absolute at top:22px — title contains only the product name, so min-height and padding are tightened accordingly (NHR 2026-05-24). */ padding: clamp(36px, 3.5vw, 60px) clamp(32px, 3vw, 52px) clamp(8px, 1vw, 14px); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; min-width: 0; min-height: clamp(100px, 9.5vw, 140px); } .wbs-p3-card__name { font-family: var(--p3-serif); font-style: italic; font-weight: 400; /* +100 over the thin draft for optical authority */ font-size: clamp(1.95rem, 1.40rem + 2.1vw, 3.20rem); line-height: 1.02; letter-spacing: -0.022em; color: var(--p3-ink); text-shadow: 0 2px 22px oklch(0 0 0 / 0.32); max-width: 18ch; text-wrap: balance; margin: 0; } /* Category eyebrow — absolute at the same vertical position as the NEW badge (top: 22px) but centred horizontally so it reads as ambient metadata, not a layout element. Removing it from the title flex flow eliminates the overflow-clip issue at height-constrained laptop viewports (NHR 2026-05-24). */ .wbs-p3-card__category { position: absolute; top: 22px; left: 0; right: 0; z-index: 5; pointer-events: none; text-align: center; font-family: var(--p3-sans); font-size: clamp(8.5px, 0.62vw, 10px); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: oklch(0.62 0.04 252 / 0.42); margin: 0; line-height: 1; } /* Long names (e.g. Audio Plugin Uninstaller) ramp down a step so they don't stretch into fine-print territory. */ .wbs-p3-card--uninstaller .wbs-p3-card__name { font-size: clamp(1.70rem, 1.25rem + 1.7vw, 2.70rem); } /* ------------------------------------------------------------ IMAGE — dedicated fit zone with a glow + hover floor shadow. ------------------------------------------------------------ */ .wbs-p3-card__image { --p3-ground-shadow-width: min(70%, 440px); --p3-ground-shadow-height: 24px; --p3-ground-shadow-visible-gap: 20px; --p3-ground-shadow-offset: 6px; --p3-ground-shadow-layout-gap: calc(var(--p3-ground-shadow-visible-gap) - var(--p3-ground-shadow-offset)); --p3-ground-shadow-gap: calc(var(--p3-ground-shadow-visible-gap) - var(--p3-alpha-bottom-pad, 0px) - var(--p3-ground-shadow-offset)); --p3-ground-shadow-reserve: calc(var(--p3-ground-shadow-height) + var(--p3-ground-shadow-layout-gap) + var(--p3-ground-shadow-offset)); --p3-ground-shadow-opacity: 0; --p3-ground-shadow-scale: 0.66; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(4px, 0.5vw, 8px) clamp(10px, 1.4vw, 22px); min-height: 0; } /* Soft halo behind the product */ .wbs-p3-card__image::before { content: ''; position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 50%, oklch(1 0 0 / 0.06) 0%, transparent 65%); filter: blur(30px); z-index: 0; pointer-events: none; } /* Floor shadow — deepens on hover (light-source shift, no translate) */ .wbs-p3-card__image::after { content: ''; position: relative; width: var(--p3-ground-shadow-width); height: var(--p3-ground-shadow-height); flex: 0 0 var(--p3-ground-shadow-height); margin-top: var(--p3-ground-shadow-gap); transform: translateY(var(--p3-ground-shadow-offset)) scaleY(var(--p3-ground-shadow-scale)); background: radial-gradient(ellipse 50% 50% at 50% 50%, oklch(0 0 0 / 0.74) 0%, oklch(0 0 0 / 0.54) 34%, transparent 72%); filter: blur(5px); opacity: var(--p3-ground-shadow-opacity); z-index: 0; pointer-events: none; transition: opacity 220ms ease, transform 220ms ease, width 220ms ease, filter 220ms ease; } .wbs-p3-card:hover .wbs-p3-card__image::after { --p3-ground-shadow-opacity: 0.86; --p3-ground-shadow-scale: 0.92; } .wbs-p3-card__image img { --p3-image-shadow-rest: drop-shadow(0 12px 18px oklch(0 0 0 / 0.40)); --p3-image-shadow-hover: drop-shadow(0 14px 18px oklch(0 0 0 / 0.52)); --p3-image-shadow: var(--p3-image-shadow-rest); position: relative; z-index: 1; max-width: 78%; max-height: calc(100% - var(--p3-ground-shadow-reserve)); width: auto; height: auto; object-fit: contain; filter: var(--p3-image-shadow); transition: filter 220ms ease; } .wbs-p3-card:hover .wbs-p3-card__image img { --p3-image-shadow: var(--p3-image-shadow-hover); } /* ------------------------------------------------------------ DESCRIPTION — readable centered tagline. Min-height keeps row baselines aligned when copy lengths differ. ------------------------------------------------------------ */ .wbs-p3-card__desc { position: relative; z-index: 2; padding: clamp(10px, 1.2vw, 18px) clamp(36px, 4vw, 64px) clamp(6px, 0.8vw, 12px); display: flex; justify-content: center; align-items: flex-start; min-height: clamp(64px, 7vw, 90px); } .wbs-p3-card__desc p { font-family: var(--p3-sans); font-weight: 400; font-size: clamp(1.02rem, 0.92rem + 0.30vw, 1.18rem); /* a touch larger + (GPT) */ line-height: 1.5; color: oklch(0.97 0.010 260 / 0.96); /* higher contrast (GPT) */ max-width: 36ch; text-align: center; margin: 0; text-wrap: balance; } /* ------------------------------------------------------------ FOOTER — price (gold) + CTAs, pinned to card bottom, centered. ------------------------------------------------------------ */ .wbs-p3-card__foot { position: relative; z-index: 4; padding: clamp(10px, 1.2vw, 16px) clamp(28px, 3vw, 48px) clamp(36px, 5vh, 60px); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: clamp(10px, 1vw, 14px); } .wbs-p3-card__price { display: inline-flex; align-items: baseline; justify-content: center; gap: 10px; transform: translateY(-8px); } .wbs-p3-card__price-old { font-family: var(--p3-serif); font-weight: 400; /* Same size as the sale price — dimmed + struck is enough to read as the old price (NHR). */ font-size: clamp(1.35rem, 1.12rem + 0.82vw, 1.80rem); line-height: 1; color: oklch(0.88 0.014 260 / 0.52); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: oklch(0.88 0.014 260 / 0.48); letter-spacing: -0.01em; font-feature-settings: "lnum" 1; } .wbs-p3-card__price-value { font-family: var(--p3-serif); font-weight: 400; /* Slightly trimmed so the serif NAME stays the hero of the card, while the price remains confident and unmistakably gold. */ font-size: clamp(1.35rem, 1.12rem + 0.82vw, 1.80rem); line-height: 1; color: var(--p3-gold); letter-spacing: -0.01em; font-feature-settings: "lnum" 1; } .wbs-p3-card__ctas { display: flex; gap: 8px; align-items: center; justify-content: center; } .wbs-p3-btn { appearance: none; border: 1px solid transparent; border-radius: 999px; padding: 5px 14px; font-family: var(--p3-sans); font-weight: 600; font-size: clamp(0.72rem, 0.68rem + 0.16vw, 0.80rem); letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; outline: none; } .wbs-p3-btn--primary { background: oklch(0.94 0.008 80); color: oklch(0.16 0.030 265); box-shadow: 0 6px 20px -14px oklch(0 0 0 / 0.50); } .wbs-p3-btn--primary:hover { background: oklch(1 0 0 / 1); box-shadow: 0 8px 24px -12px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(1 0 0 / 0.25); } .wbs-p3-btn--ghost { background: oklch(1 0 0 / 0.06); color: var(--p3-ink); border-color: oklch(1 0 0 / 0.48); } .wbs-p3-btn--ghost:hover { background: oklch(1 0 0 / 0.14); border-color: oklch(1 0 0 / 0.78); } .wbs-p3-btn svg { width: 9px; height: 9px; flex-shrink: 0; } /* Listen button: show play icon by default, hide pause icon */ .wbs-p3-btn--listen .wbs-p3-btn__stop-icon { display: none; } /* While playing: show pause icon, hide play icon; cyan border accent */ .wbs-p3-btn--listen.is-playing .wbs-p3-btn__stop-icon { display: inline-block; } .wbs-p3-btn--listen.is-playing .wbs-p3-btn__play-icon { display: none; } .wbs-p3-btn--listen.is-playing { border-color: oklch(0.78 0.14 225 / 0.72); background: oklch(0.78 0.14 225 / 0.10); } /* ---- Sonaar skin_button — styled to match .wbs-p3-btn--ghost ---- */ /* Container: strip all Sonaar wrapper chrome */ .wbs-p3-card__ctas .iron_widget_radio.srp_player_button { display: inline-flex; margin: 0; padding: 0; background: none; border: none; box-shadow: none; position: relative; /* establish stacking context */ z-index: 4; /* same as .wbs-p3-btn — above the card link overlay (z-index:3) */ } .wbs-p3-card__ctas .iron-audioplayer.srp_player_button { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; min-width: 0 !important; } .wbs-p3-card__ctas .iron-audioplayer .album-player { padding: 0 !important; margin: 0 !important; } .wbs-p3-card__ctas .iron-audioplayer .srp_control_box { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; } /* Sonaar hides srp_player_boxed in skin_button mode — show it */ .wbs-p3-card__ctas .srp_player_boxed { display: block !important; padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; box-shadow: none !important; width: auto !important; } /* Hide the wave, tracklist, and secondary controls we don't want */ .wbs-p3-card__ctas .iron-audioplayer .srp_wave_box, .wbs-p3-card__ctas .iron-audioplayer .playlist, .wbs-p3-card__ctas .iron-audioplayer .sonaar_fake_wave, .wbs-p3-card__ctas .iron-audioplayer .album-store, .wbs-p3-card__ctas .iron-audioplayer .srp_meta, .wbs-p3-card__ctas .iron-audioplayer .srp_main_control, .wbs-p3-card__ctas .iron-audioplayer .srp_player_meta, .wbs-p3-card__ctas .iron-audioplayer .sonaar-Artwort-box { display: none !important; } /* The button itself — ghost pill style */ .wbs-p3-card__ctas .srp-play-button-label-container { appearance: none; background: oklch(1 0 0 / 0.06) !important; color: var(--p3-ink) !important; border: 1px solid oklch(1 0 0 / 0.48) !important; border-radius: 999px; padding: 7px 16px !important; font-family: var(--p3-sans) !important; font-size: var(--p3-step--1) !important; font-weight: 600 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease !important; white-space: nowrap; display: inline-flex !important; align-items: center; gap: 6px; line-height: 1 !important; /* Reset any Sonaar defaults */ background-image: none !important; box-shadow: none !important; min-width: 0 !important; width: auto !important; height: auto !important; border-radius: 999px !important; } .wbs-p3-card__ctas .srp-play-button-label-container:hover { background: oklch(1 0 0 / 0.16) !important; border-color: oklch(1 0 0 / 0.78) !important; transform: scale(1.03); } /* Suppress the sricon-play ::before icon glyph */ .wbs-p3-card__ctas .srp-play-button-label-container.sricon-play::before, .wbs-p3-card__ctas .srp-play-button-label-container.sricon-play::after { display: none !important; content: none !important; } /* While playing — cyan accent border like the old button */ .wbs-p3-card__ctas .srp-play-button-label-container.pause { border-color: oklch(0.78 0.14 225 / 0.72) !important; } /* Show play label, hide pause label by default; swap when playing */ .wbs-p3-card__ctas .srp-pause-button-label { display: none; } .wbs-p3-card__ctas .srp-play-button-label-container.pause .srp-play-button-label { display: none; } .wbs-p3-card__ctas .srp-play-button-label-container.pause .srp-pause-button-label { display: inline; } /* ============================================================ PER-CARD GRADIENTS — image-derived OKLCH, full-card flow, NEVER fade to black/page bg. Each card exposes 3 custom props (--g-hi accent / --g-mid / --g-lo low end) so they're trivial to retune later. Anchor colors sourced from assets.md. ============================================================ */ .wbs-p3-card { /* Default fallback family (cool indigo) — overridden per card. --g-key positions the radial "key light" so it reads as art-directed cinematic lighting rather than a dead-centered glow; per-card overrides nudge it off-center. */ --g-hi: oklch(0.46 0.13 260 / 0.55); --g-mid: oklch(0.24 0.080 262); --g-lo: oklch(0.20 0.070 260); --g-key: 50% 40%; background: radial-gradient(ellipse 86% 58% at var(--g-key), var(--g-hi) 0%, transparent 72%), linear-gradient(165deg, var(--g-mid) 0%, var(--g-mid) 48%, var(--g-lo) 100%); } /* Tracer — bright amber/gold waveform on burnt-umber (assets.md: #F2A33C / #3A1E10). Kept at the warm-GOLD end (hue ~66) to separate it from Eclipse's red-orange. */ .wbs-p3-card--tracer { --g-hi: oklch(0.55 0.14 66 / 0.55); --g-mid: oklch(0.27 0.085 56); --g-lo: oklch(0.23 0.075 52); --g-key: 42% 36%; } /* Elysium — iridescent teal + magenta/violet (assets.md: #2BA8C4 / #7A3D8C) */ .wbs-p3-card--elysium { --g-hi: oklch(0.50 0.16 318 / 0.50); --g-mid: oklch(0.27 0.095 300); --g-lo: oklch(0.23 0.085 285); --g-key: 58% 38%; } /* Orbit — electric blue / deep navy (assets.md: #2E7BD6 / #16314F) */ .wbs-p3-card--orbit { --g-hi: oklch(0.52 0.15 252 / 0.55); --g-mid: oklch(0.26 0.090 250); --g-lo: oklch(0.22 0.078 250); --g-key: 44% 40%; } /* Eclipse — burnt RED-orange / deep maroon (assets.md: #D86A1E / #5A2310). Pushed toward red (hue ~40) so it reads distinctly hotter than Tracer's gold and Humanizer's amber — its own product world. */ .wbs-p3-card--eclipse { --g-hi: oklch(0.56 0.17 40 / 0.58); --g-mid: oklch(0.29 0.115 36); --g-lo: oklch(0.24 0.100 34); --g-key: 56% 42%; } /* Humanizer Pro — amber glow on warm charcoal (assets.md: #E8862A / #2E2620) */ .wbs-p3-card--humanizer { --g-hi: oklch(0.55 0.15 58 / 0.55); --g-mid: oklch(0.27 0.090 50); --g-lo: oklch(0.23 0.078 46); --g-key: 40% 42%; } /* Silencer — violet/purple Valhalla UI on slate (assets.md: #6E4FA8 / #2A2E3A) */ .wbs-p3-card--silencer { --g-hi: oklch(0.48 0.13 300 / 0.52); --g-mid: oklch(0.26 0.075 290); --g-lo: oklch(0.22 0.060 282); --g-key: 60% 40%; } /* Finder Audio Tools — electric cyan / deep teal-navy (assets.md: #3FC8F5 / #143247) */ .wbs-p3-card--finder { --g-hi: oklch(0.52 0.13 226 / 0.55); --g-mid: oklch(0.26 0.085 232); --g-lo: oklch(0.22 0.072 234); --g-key: 42% 38%; } /* Audio Plugin Uninstaller — indigo/blue / deep slate-indigo (assets.md: #3A4DA8 / #1E2440) */ .wbs-p3-card--uninstaller { --g-hi: oklch(0.50 0.14 276 / 0.55); --g-mid: oklch(0.26 0.090 276); --g-lo: oklch(0.22 0.078 276); --g-key: 58% 42%; } /* ------------------------------------------------------------ Warm-card price contrast — gold can read low against amber/orange gradients, so brighten the price on the two warmest cards. ------------------------------------------------------------ */ .wbs-p3-card--humanizer .wbs-p3-card__price-value, .wbs-p3-card--tracer .wbs-p3-card__price-value, .wbs-p3-card--eclipse .wbs-p3-card__price-value { color: oklch(0.96 0.09 88); } /* ------------------------------------------------------------ Per-product image sizing — normalize visual mass across cards. Boxshots (Elysium/Orbit/Eclipse), icons (Tracer/Finder), 3D render (Humanizer), and UI screenshots (Silencer/APU) have very different aspect ratios. ------------------------------------------------------------ */ /* App-icon squircle — Finder icon. Premium icon presentation: a smaller icon with a dramatic multi-layer glow fills the card with light rather than trying to fill it with pixels. */ .wbs-p3-card--finder .wbs-p3-card__image img { max-width: 44%; max-height: calc(90% - var(--p3-ground-shadow-reserve)); filter: drop-shadow(0 0 28px oklch(0.65 0.20 226 / 0.75)) drop-shadow(0 0 60px oklch(0.60 0.18 226 / 0.45)) drop-shadow(0 0 100px oklch(0.55 0.16 226 / 0.28)) var(--p3-image-shadow); } /* Humanizer 3D render — near-square hardware knob render. Warm glow matching the amber card gives it object presence. */ .wbs-p3-card--humanizer .wbs-p3-card__image img { max-width: 84%; max-height: calc(100% - var(--p3-ground-shadow-reserve)); filter: drop-shadow(0 0 24px oklch(0.62 0.14 58 / 0.52)) drop-shadow(0 0 50px oklch(0.55 0.12 56 / 0.30)) var(--p3-image-shadow); } /* ALL UI screenshots — one clean, consistent treatment: contained, small radius, single soft drop-shadow. NO edge feather, NO heavy bezel ("extra card"), NO overflow clip (NHR 2026-05-21). */ /* Elysium — composite packshot (box + synth UI, 3:2 landscape). */ .wbs-p3-card--elysium .wbs-p3-card__image img { max-width: 96%; max-height: calc(90% - var(--p3-ground-shadow-reserve)); filter: var(--p3-image-shadow); } /* Orbit/Eclipse — 2:1 panoramic screenshots, wider than tall. Near-full width so they read as cinematic product captures. 90% max-height (was 75%) — the wide AR means they fill width, not height, so a taller cap gives them much more visual mass. */ .wbs-p3-card--orbit .wbs-p3-card__image img, .wbs-p3-card--eclipse .wbs-p3-card__image img { max-width: 96%; max-height: calc(90% - var(--p3-ground-shadow-reserve)); border-radius: 6px; filter: var(--p3-image-shadow); } /* Tracer — oscilloscope screenshot on amber card. Warm brightness lift + amber rim glow so it reads cinematic, not like a freeware screenshot. */ .wbs-p3-card--tracer .wbs-p3-card__image img { max-width: 88%; max-height: calc(92% - var(--p3-ground-shadow-reserve)); border-radius: 6px; filter: brightness(1.10) contrast(1.04) drop-shadow(0 0 18px oklch(0.62 0.16 72 / 0.52)) drop-shadow(0 0 44px oklch(0.55 0.14 70 / 0.28)) var(--p3-image-shadow); outline: 1px solid oklch(0.50 0.12 68 / 0.40); } /* Silencer — dark plugin UI on dark purple card. Needs a rim glow so the screenshot separates from the card background. */ .wbs-p3-card--silencer .wbs-p3-card__image img { max-width: 90%; max-height: calc(94% - var(--p3-ground-shadow-reserve)); border-radius: 8px; filter: brightness(1.14) contrast(1.04) drop-shadow(0 0 18px oklch(0.58 0.14 292 / 0.55)) drop-shadow(0 0 40px oklch(0.52 0.12 292 / 0.35)) var(--p3-image-shadow); outline: 1px solid oklch(0.52 0.10 288 / 0.45); } /* APU — macOS window screenshot, plain treatment matching other UI screenshots. */ .wbs-p3-card--uninstaller .wbs-p3-card__image img { max-width: 92%; max-height: calc(90% - var(--p3-ground-shadow-reserve)); border-radius: 8px; filter: var(--p3-image-shadow); } /* ============================================================ SPACE CTA — compact bar above the product grid. GIF thumbnail on left, label + link on right. ============================================================ */ .wbs-p3__space-cta { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 24px); padding: clamp(12px, 1.5vh, 20px) clamp(20px, 2.5vw, 48px); margin-bottom: clamp(8px, 1vh, 16px); } .wbs-p3__space-preview { flex: 0 0 auto; } .wbs-p3__space-preview-gif { width: clamp(72px, 7vw, 112px); height: auto; border-radius: 8px; display: block; opacity: 0.92; } .wbs-p3__space-cta-content { display: flex; flex-direction: column; gap: 3px; } .wbs-p3__space-cta-label { font-family: var(--p3-font-sans); font-size: var(--p3-step--2); color: var(--p3-ink-mute); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; } .wbs-p3__space-cta-content a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--p3-font-sans); font-size: var(--p3-step-0); font-weight: 500; color: var(--p3-ink); text-decoration: none; transition: color 200ms ease; } .wbs-p3__space-cta-content a:hover { color: var(--p3-ink-soft); } /* ============================================================ SPACE CARD — full-width feature card with looping video background. Spans both columns. Text at bottom-left. ============================================================ */ .wbs-p3-card.wbs-p3-card--space { grid-column: 1 / -1; display: block; min-height: 0; max-height: none; height: 396px; position: relative; overflow: hidden; cursor: pointer; background: oklch(0.09 0.03 278); box-shadow: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 0 0 1px oklch(1 0 0 / 0.04) inset, 0 30px 60px -40px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.65 0.08 268 / 0.55); /* visible blue-tinted edge ring */ } .wbs-p3-card--space__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: brightness(0.80) contrast(0.90); } /* Cinematic bottom scrim — grounds text in darkness, fades to clear above */ .wbs-p3-card.wbs-p3-card--space::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to top, oklch(0.08 0.03 278 / 0.90) 0%, oklch(0.08 0.03 278 / 0.60) 28%, oklch(0.08 0.03 278 / 0.12) 52%, transparent 68% ); } /* Text body — bottom-left, matching product card padding rhythm */ .wbs-p3-card--space__body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(24px, 3vw, 40px) clamp(36px, 4.5vw, 64px) clamp(28px, 3.5vw, 48px); } /* Name — same typeface/weight/size as .wbs-p3-card__name, left-aligned */ .wbs-p3-card--space__name { font-family: var(--p3-serif); font-style: italic; font-weight: 400; font-size: clamp(1.95rem, 1.40rem + 2.1vw, 3.20rem); line-height: 1.02; letter-spacing: -0.022em; color: var(--p3-ink); text-shadow: 0 2px 22px oklch(0 0 0 / 0.32); margin: 6px 0 0; /* header down 6px */ } .wbs-p3-card--space__tagline { font-family: var(--p3-sans); font-size: var(--p3-step-0); font-weight: 400; color: oklch(0.88 0.012 260 / 0.90); margin: -4px 0 16px; /* description up 4px, 16px gap before button */ -webkit-font-smoothing: antialiased; } /* ============================================================ RESPONSIVE — breakpoints aligned to Elementor's defaults: Desktop ≥1025px (2-up), Tablet ≤1024px (1-col), Mobile ≤767px. Title-first ordering already reads correctly stacked. ============================================================ */ /* TABLET & below (Elementor tablet ≤1024) — collapse to a single column. The 2-up grid gets cramped on portrait tablets (synth screenshots + paired CTAs lose breathing room well before 1024), so the whole tablet range reads better as full-width cards. */ @media (max-width: 1024px) { .wbs-p3__grid { grid-template-columns: 1fr; } .wbs-p3-card { height: auto; max-height: none; min-height: 560px; } .wbs-p3-card__title { padding: clamp(36px, 4.5vw, 52px) 24px 8px; } .wbs-p3-card__image { min-height: 220px; } .wbs-p3-card__desc { padding: 12px 28px 4px; transform: translateY(30px); } .wbs-p3-card__foot { padding: 18px 24px 28px; } /* Space card: fixed height at tablet */ .wbs-p3-card.wbs-p3-card--space { height: 280px; } } /* MOBILE (Elementor mobile ≤767) — de-emphasize pills so the product name leads (DESIGN-NOTES). Space card hidden: /space/ is desktop-only. Aligned to Elementor's 767 breakpoint. */ @media (max-width: 767px) { .wbs-p3 { padding-left: 16px; /* ~4% on 390px iPhone — replaces the 44px desktop minimum */ padding-right: 16px; } .wbs-p3-card.wbs-p3-card--space { display: none; } .wbs-p3-card__pills { display: none; } } /* ============================================================ REDUCED MOTION — drop hover/transition motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .wbs-p3 *, .wbs-p3 *::before, .wbs-p3 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ============================================================ HEIGHT BREAKPOINTS — must come after all base declarations so they take precedence in the cascade (equal specificity, later position wins). ============================================================ */ @media (max-height: 860px) { .wbs-p3 { padding-top: 12px; } .wbs-p3-card.wbs-p3-card--space { max-height: 280px; } .wbs-p3-card { height: clamp(540px, 72vh, 580px); min-height: 520px; /* Shrink image row ~15px to compensate for the raised title min-height — keeps footer 1fr the same size as before, preserving bottom breathing room. */ grid-template-rows: auto clamp(210px, 28vh, 290px) auto 1fr; } .wbs-p3-card__title { padding-top: clamp(24px, 3vh, 40px); /* Raised so name (at flex-end) stays below the absolute category at top:22px */ min-height: clamp(115px, 16vh, 140px); } .wbs-p3-card__desc { min-height: clamp(48px, 7vh, 72px); } .wbs-p3-card__foot { padding-bottom: clamp(28px, 3.8vh, 40px); } } @media (max-height: 700px) { .wbs-p3-card { height: clamp(480px, 72vh, 540px); min-height: 480px; /* Shrink image row to compensate for raised title min-height */ grid-template-rows: auto clamp(185px, 26vh, 250px) auto 1fr; } .wbs-p3-card__title { padding-top: clamp(20px, 2.5vh, 32px); /* Raised to keep name clear of absolute category at top:22px */ min-height: clamp(110px, 17vh, 125px); } .wbs-p3-card__desc { min-height: clamp(40px, 6vh, 60px); } .wbs-p3-card__foot { padding-bottom: clamp(24px, 3.2vh, 32px); } }