get the colour/size so the global .article-content paragraph styles don't bleed through. Stage 9.28's block intended cream/85; the now-removed Stage 9.7 !important on .theme-hero--has-bg .theme-hero__intro had been winning and rendering full cream — that's the look we preserve. */ body.single-theme .theme-hero.theme-hero--has-bg .theme-hero__intro, body.single-theme .theme-hero.theme-hero--has-bg .theme-hero__intro p { margin: 0; font-size: 13px; line-height: 1.625; color: var(--cream); max-width: 42rem; text-shadow: none; text-align: left; } body.single-theme .theme-hero.theme-hero--has-bg .theme-hero__intro { margin-top: 16px; } /* Right column: image card. Aspect 3:2, 2px charcoal border on a charcoal background, image cover. justify-self: end matches Lov's `justify-self-end` on the 420px column at lg+ (no-op below). */ body.single-theme .theme-hero.theme-hero--has-bg .theme-hero__media { aspect-ratio: 3 / 2; width: 100%; max-width: 420px; margin: 0; padding: 0; border: 2px solid var(--charcoal); background: var(--charcoal); overflow: hidden; justify-self: end; border-radius: 0; box-shadow: none; position: relative; } body.single-theme .theme-hero.theme-hero--has-bg .theme-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: 0; position: static; } /* Dark-text variant — flip copy from cream to charcoal for light gradients (Cream 100, Desert sand, Steel ice, Coral peach, Amber/burnt orange). Toggled by single-theme.php when _theme_hero_text_dark = 1. */ body.single-theme .theme-hero.theme-hero--has-bg.theme-hero--text-dark .theme-hero__meta { color: var(--charcoal); } body.single-theme .theme-hero.theme-hero--has-bg.theme-hero--text-dark .theme-hero__chip { color: var(--cherry); } body.single-theme .theme-hero.theme-hero--has-bg.theme-hero--text-dark .theme-hero__title { color: var(--charcoal); } body.single-theme .theme-hero.theme-hero--has-bg.theme-hero--text-dark .theme-hero__intro, body.single-theme .theme-hero.theme-hero--has-bg.theme-hero--text-dark .theme-hero__intro p { color: var(--charcoal); } /* Reviewer card on theme pages — match the width of the Browse-by-Spec panel sitting directly above it. Lov's card spans the full content-column width; ours was capped at 48rem. Remove that cap on theme pages so the card fills the .theme-layout__main column edge-to-edge. */ body.single-theme .reviewer-bio--editor .reviewer-bio__card, body.single-theme .reviewer-bio__card { max-width: none; } /* Featured strip — make .related-slot-card's image area fill aspect-3/2 with the imported key art. (Falls back to first-letter sticker when image_id=0.) */ body.single-theme .theme-featured__grid .related-slot-card__media { background: var(--charcoal); } body.single-theme .theme-featured__grid .related-slot-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Browse-by-Spec — when a card-media img is present, fill the 16:9 area with the attribute artwork instead of the centered slot-reel SVG. */ body.single-theme .theme-browse-spec__card-media:has(.theme-browse-spec__card-img) { /* Anchor for the absolutely-positioned IMG below. The base media rule keeps `display: flex` for the SVG-icon variant, but when there's a real the flex layout was passing the IMG's intrinsic height (200px) up to the parent — even with `aspect-ratio: 16/9` set — via `min-height: auto` on the flex item, which gave a 3:2 paint. Switching the IMG to position:absolute removes it from the parent's layout contribution so the 16/9 aspect-ratio actually resolves. */ position: relative; background: var(--cream-100); padding: 0; } body.single-theme .theme-browse-spec__card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } body.single-theme .theme-browse-spec { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border); } .theme-browse-spec__title { margin: 0 0 1.5rem; } .theme-browse-spec__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { .theme-browse-spec__grid { grid-template-columns: repeat(3, 1fr); } } .theme-browse-spec__card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); overflow: hidden; } .theme-browse-spec__card-media { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cream-100) 0%, var(--cream) 100%); color: color-mix(in oklab, var(--charcoal) 22%, transparent); } .theme-browse-spec__card-body { padding: 1.25rem; } .theme-browse-spec__card-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--charcoal); } .theme-browse-spec__card-text { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--muted-foreground); } .theme-browse-spec__card-cta { margin-top: 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); } /* =========================================================================== STAGE 9.9 — single-theme.php 2-column layout + Featured tabs + reviewer "Edited by" variant + WTP no-panel variant. Matches Lov's /themes/fruit-slots desktop layout: 220px sticky TOC sidebar + 1fr body. =========================================================================== */ /* 2-col grid wrapper. Stacks on , not inline. font-size 0.75rem (= 10.2px at 85% root) matches Lov's text-xs. */ display: block; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #fcd34d; line-height: 1; text-shadow: none; } body.term-pragmatic-play .theme-hero.theme-hero--has-bg .theme-hero__title { /* mt-3 = 0.75rem (10.2px) gap from eyebrow per Lov. !important needed because global h1 rules carry !important on font-size/line-height. */ margin: 0.75rem 0 0 !important; font-size: 36px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--cream); text-shadow: none; text-align: left; max-width: none; } @media (min-width: 1024px) { body.term-pragmatic-play .theme-hero.theme-hero--has-bg .theme-hero__title { font-size: 48px; } } body.term-pragmatic-play .theme-hero.theme-hero--has-bg .theme-hero__intro, body.term-pragmatic-play .theme-hero.theme-hero--has-bg .theme-hero__intro p { /* 0.95rem ≈ 12.92px at 85% root — matches Lov's inherited text-base. 85% alpha cream over the orange gradient. */ margin: 0; font-size: 0.95rem; line-height: 1.625; color: color-mix(in oklab, var(--cream) 85%, transparent); max-width: 48rem; text-shadow: none; text-align: left; } body.term-pragmatic-play .theme-hero.theme-hero--has-bg .theme-hero__intro { /* mt-4 = 1rem (13.6px) gap from h1. */ margin-top: 1rem; } /* Logo box — 3:2 aspect, dark or cream variant, padded contain. Lov live shows rounded-2xl resolving to ~8px (project --radius:0rem); keep matching radius. Audit confirmed no shadow. */ body.tax-provider .theme-hero__media--logo, body.term-pragmatic-play .theme-hero__media--logo { aspect-ratio: 3 / 2; width: 100%; max-width: 420px; margin: 0; padding: 32px; overflow: hidden; justify-self: center; border-radius: 0; box-shadow: none; position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } @media (min-width: 1024px) { body.tax-provider .theme-hero__media--logo, body.term-pragmatic-play .theme-hero__media--logo { justify-self: end; } } body.tax-provider .theme-hero__media--logo-dark, body.term-pragmatic-play .theme-hero__media--logo-dark { background: #141418; border: 1px solid color-mix(in oklab, var(--cream) 20%, transparent); } body.tax-provider .theme-hero__media--logo-cream, body.term-pragmatic-play .theme-hero__media--logo-cream { background: var(--cream); border: 1px solid var(--border); } body.tax-provider .theme-hero__media--logo img, body.term-pragmatic-play .theme-hero__media--logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; margin: 0; padding: 0; border: 0; position: static; } /* Provider body — linear single-column layout (no TOC sidebar). 1280 max, responsive padding, vertical rhythm between sections. min-width: 0 + max-width: 100% on direct children prevent the article body's tables from blowing the column wider than the viewport at mobile widths. Padding 2.5rem 1rem (=34/13.6px) and gap 4rem (=54.4px) at 85% root match Lov's py-10 px-4 and space-y-16. */ body.tax-provider .provider-body { max-width: 1280px; margin: 0 auto; /* Horizontal padding lives on the outer .container (style.css L207 — 27.2px each side at lg+). Adding more here was double-padding the strip down to 1171px when Lov renders 1225.6px. Vertical rhythm only. */ padding: 2.5rem 0; display: flex; flex-direction: column; gap: 4rem; min-width: 0; } body.tax-provider .provider-body > * { min-width: 0; max-width: 100%; } body.tax-provider .provider-body .article-content { min-width: 0; max-width: 100%; } /* Wide tables inside the article body scroll horizontally inside their own wrapper rather than expanding the column. */ body.tax-provider .provider-body .article-content table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } /* Release the 880-cap that body.single-theme .theme-featured imposes via the Stage 9.7 group rule. On provider pages each strip spans the full provider-body width (Lov ~1225px at 1280 viewport), and the strip's own 48px margin-top is zeroed because flex gap handles the rhythm. */ body.tax-provider .provider-body .theme-featured, body.tax-provider .provider-body .theme-featured--strip { max-width: none; margin-inline: 0; margin-top: 0; } /* TOC list left rail (Lov's refreshed provider sidebar adds border-l + pl-3 on the ul). Scoped to tax-provider so feature/attribute/single- theme TOCs aren't touched. */ body.tax-provider .theme-toc__list { border-left: 1px solid var(--border); padding-left: 0.75rem; } /* Browse by Theme — 3 chip cards at 4:3 aspect, image + dark gradient overlay + bottom-left label. Sharp corners (radius 0) per the standing sharp-corner pattern carried from megaways/high-volatility builds. */ body.tax-provider .provider-browse-theme__title { margin: 0 0 24px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; text-align: center; } body.tax-provider .provider-browse-theme__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } body.tax-provider .provider-browse-theme__card { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border); border-radius: 0; text-decoration: none; color: var(--cream); display: block; background-position: center; background-size: cover; } body.tax-provider .provider-browse-theme__card--placeholder { cursor: default; } body.tax-provider .provider-browse-theme__card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease; } body.tax-provider .provider-browse-theme__card:hover .provider-browse-theme__card-img { transform: scale(1.03); } body.tax-provider .provider-browse-theme__card-overlay { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in oklab, var(--charcoal) 85%, transparent) 0%, color-mix(in oklab, var(--charcoal) 20%, transparent) 60%, transparent 100% ); pointer-events: none; } body.tax-provider .provider-browse-theme__card-label { position: absolute; left: 12px; bottom: 12px; font-size: 16px; font-weight: 700; color: var(--cream); z-index: 2; } /* Related Providers — 4 logo chips at 16:9 aspect with sharp corners. Fills the .theme-layout__main column edge-to-edge so its left/right edges line up flush with the Browse-by-Theme cards above. (Was max-w-880 + centered in 0.9.40–0.9.44 — that left it visually narrower than the Browse section. User-requested fix: edges aligned, cards widen accordingly.) */ body.tax-provider .provider-related { width: 100%; max-width: none; margin-inline: 0; box-sizing: border-box; } body.tax-provider .provider-related__title { margin: 0 0 24px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; text-align: center; } body.tax-provider .provider-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; /* 10.2px at 85% root — matches Lov gap-3 */ } @media (min-width: 768px) { body.tax-provider .provider-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body.tax-provider .provider-related__card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 0; background: var(--white); /* was cream — Lov uses pure white */ overflow: hidden; text-decoration: none; color: inherit; transition: border-color 150ms ease; } body.tax-provider .provider-related__card:hover { border-color: color-mix(in oklab, var(--cherry) 40%, transparent); } body.tax-provider .provider-related__card--placeholder { cursor: default; } body.tax-provider .provider-related__card--placeholder:hover { border-color: var(--border); } body.tax-provider .provider-related__card-logo { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; padding: 0.75rem; /* 10.2px at 85% root */ } body.tax-provider .provider-related__card-logo--cream { background: var(--cream-100); } body.tax-provider .provider-related__card-logo--dark { background: #141418; } body.tax-provider .provider-related__card-logo-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } body.tax-provider .provider-related__card-body { padding: 6px 8px; border-top: 1px solid var(--border); } body.tax-provider .provider-related__card-name { /* 0.75rem = 10.2px at 85% root, matches Lov's text-xs. (0.9.41 bumped this to 0.95rem on a misread of Lov; the 0.9.41 reverify confirmed Lov is 10.2px not 12.92px.) */ font-size: 0.75rem; font-weight: 700; color: var(--charcoal); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.tax-provider .provider-related__card-meta { margin-top: 2px; font-size: 0.625rem; /* 8.5px at 85% root */ color: var(--muted-foreground); } /* Stage 9.28's body.single-theme.postid-25 hero overrides were promoted to the shared `body.single-theme .theme-hero.theme-hero--has-bg` block earlier in this file (0.9.84 — theme hero refactor). Fruit Slots' gradient now comes from the _theme_hero_bg meta; the layout is driven by --has-bg + the optional --text-dark modifier. */ /* =========================================================================== STAGE 9.46 — /themes hub (archive-theme.php). Scoped to body.post-type-archive-theme so the archive's curated hub markup only paints on the directory page, not on individual theme posts. Sections (top→bottom): 1. .themes-hub-hero — full-bleed felt bg with 1fr/300px grid 2. .themes-hub-featured — 6 cards, 16:10 image tiles 3. .themes-hub-all — 26 cards, 4:3 image tiles 4. .themes-hub-spotlights — 4 prose+table blocks 5. .themes-hub-prose — editorial paragraphs 6. .themes-hub-cross — 3 cross-discovery cards 7. .themes-hub-faq — reuses .faq-accordion chrome 8. .themes-hub-byline — reuses .reviewer-bio--editor chrome =========================================================================== */ /* ---- Outer main padding — the theme's default .site-main carries padding-block: 1.7rem (27.2px) which on the themes hub creates an empty cream band ABOVE the felt-green hero (no equivalent on Lov). Zero it for the hub so the green starts flush under the header, and zero the bottom too so the footer sits flush against the last hub section just like Lov. Scoped to this body class so every other template keeps its main-padding rhythm. ------------- */ body.post-type-archive-theme .site-main { padding-top: 0; padding-bottom: 0; } /* ---- 1. Hero (full-bleed felt-green) ---------------------------------- */ body.post-type-archive-theme .themes-hub-hero { background: var(--felt); border-bottom: 1px solid var(--felt); color: var(--cream); } body.post-type-archive-theme .themes-hub-hero__inner { max-width: 1280px; margin-inline: auto; padding: 1.25rem 1rem; } @media (min-width: 1024px) { body.post-type-archive-theme .themes-hub-hero__inner { padding: 1.5rem 2rem; min-height: 280px; display: flex; flex-direction: column; justify-content: center; } } /* Dark-tone breadcrumb inside the hero — overrides the default chrome colour. The breadcrumb partial uses .breadcrumb-wrap > .breadcrumb. */ body.post-type-archive-theme .themes-hub-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0; } body.post-type-archive-theme .themes-hub-hero .breadcrumb { color: color-mix(in oklab, var(--cream) 70%, transparent); font-size: 0.75rem; } body.post-type-archive-theme .themes-hub-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.post-type-archive-theme .themes-hub-hero .breadcrumb li { display: inline; } body.post-type-archive-theme .themes-hub-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--cream) 55%, transparent); } body.post-type-archive-theme .themes-hub-hero .breadcrumb a { color: color-mix(in oklab, var(--cream) 70%, transparent); text-decoration: none; } body.post-type-archive-theme .themes-hub-hero .breadcrumb a:hover { color: var(--gold); } body.post-type-archive-theme .themes-hub-hero .breadcrumb [aria-current="page"] { color: var(--cream); font-weight: 500; } body.post-type-archive-theme .themes-hub-hero__grid { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } @media (min-width: 1024px) { body.post-type-archive-theme .themes-hub-hero__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; } } /* Grid children must be free to shrink past their min-content (the spotlight card has a 120px image media + nowrap subtitle that would otherwise force the 1fr track wider than the viewport at 375). */ body.post-type-archive-theme .themes-hub-hero__grid > * { min-width: 0; max-width: 100%; } body.post-type-archive-theme .themes-hub-hero__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); font-weight: 700; } body.post-type-archive-theme .themes-hub-hero__title { margin: 0.5rem 0 0 !important; /* Lov uses Tailwind text-4xl/lg:text-5xl which renders 22.5/32px at the site's 85% root. Was 36/48 in 0.9.46/47 — too heavy; that's what made the green hero feel "long" and the next section "separated" from it. */ font-size: 22.5px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: var(--cream) !important; line-height: 1.1 !important; } @media (min-width: 1024px) { body.post-type-archive-theme .themes-hub-hero__title { font-size: 32px !important; } } body.post-type-archive-theme .themes-hub-hero__lede { margin: 1rem 0 0; max-width: 56rem; color: color-mix(in oklab, var(--cream) 85%, transparent); font-size: 0.95rem; line-height: 1.65; } /* Hero spotlight card (right column @ lg+) — mirrors Lov's HubSpotlight featured variant: 2px charcoal border, sharp corners, white card, 80×120 image media, cherry "Play Now →" pill. */ body.post-type-archive-theme .themes-hub-hero__spotlight { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-width: 0; max-width: 100%; } @media (min-width: 1024px) { body.post-type-archive-theme .themes-hub-hero__spotlight { align-items: flex-end; } } body.post-type-archive-theme .themes-hub-hero__spotlight-eyebrow { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; font-family: var(--font-sans); } body.post-type-archive-theme .themes-hub-hero__spotlight-rule { height: 2px; width: 1.5rem; background: var(--gold); } body.post-type-archive-theme .themes-hub-hero__spotlight-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cream); } body.post-type-archive-theme .themes-hub-hero__spotlight-sep { color: color-mix(in oklab, var(--cream) 60%, transparent); font-size: 10px; } body.post-type-archive-theme .themes-hub-hero__spotlight-sublabel { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--cream) 60%, transparent); } body.post-type-archive-theme .themes-hub-hero__spotlight-card { display: flex; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; background: var(--card); border: 2px solid var(--charcoal); border-radius: 0; text-decoration: none; color: inherit; transition: transform 200ms ease; } @media (min-width: 1024px) { body.post-type-archive-theme .themes-hub-hero__spotlight-card { max-width: 380px; } } body.post-type-archive-theme .themes-hub-hero__spotlight-card:hover { transform: translate(-2px, -2px); } body.post-type-archive-theme .themes-hub-hero__spotlight-media { position: relative; flex-shrink: 0; width: 120px; height: 80px; border: 2px solid var(--charcoal); overflow: hidden; margin: 10px; } body.post-type-archive-theme .themes-hub-hero__spotlight-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.post-type-archive-theme .themes-hub-hero__spotlight-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 10px 0; } body.post-type-archive-theme .themes-hub-hero__spotlight-title { font-family: var(--font-display); font-size: 10px; line-height: 1.12; font-weight: 700; color: var(--charcoal); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } body.post-type-archive-theme .themes-hub-hero__spotlight-sub { font-size: 12px; font-style: italic; color: var(--muted-foreground); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.post-type-archive-theme .themes-hub-hero__spotlight-meta { margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--charcoal) 75%, transparent); } body.post-type-archive-theme .themes-hub-hero__spotlight-cta-wrap { margin-top: 8px; } body.post-type-archive-theme .themes-hub-hero__spotlight-cta { display: inline-flex; align-items: center; gap: 4px; background: var(--cherry); color: var(--cream); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; border: 2px solid var(--charcoal); } /* ---- 2-8. Body container (880-narrow content column) ------------------ */ body.post-type-archive-theme .themes-hub-body { max-width: 880px; } body.post-type-archive-theme .themes-hub-section { padding-block: 3rem; } body.post-type-archive-theme .themes-hub-section:first-child { padding-top: 3rem; } body.post-type-archive-theme .themes-hub-section__title { margin: 0 0 1.5rem !important; /* Lov h2 renders 24px desktop / 20px mobile (matches the global style.css heading scale at L144-152). Was 1.875rem (25.5px) — a hair larger than Lov; clamp to the heading-scale default by dropping the explicit override and letting the base !important rule from style.css L144 apply. */ font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } @media (max-width: 767px) { body.post-type-archive-theme .themes-hub-section__title { font-size: 20px !important; } } /* ---- 2. Featured Themes grid (6 cards, 16:10) ------------------------- */ body.post-type-archive-theme .themes-hub-featured__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { body.post-type-archive-theme .themes-hub-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.post-type-archive-theme .themes-hub-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- 3. All Themes grid (26 cards, 4:3) ------------------------------- */ body.post-type-archive-theme .themes-hub-all__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 768px) { body.post-type-archive-theme .themes-hub-all__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.post-type-archive-theme .themes-hub-all__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Card chrome — sharp corners, 1px border, image fills, dark gradient overlay. Live Lov render confirms border-radius:0 even though the Tailwind classes say rounded-xl/rounded-2xl — the global SlotRover --radius: 0 reset wins on the live build, and we match. */ body.post-type-archive-theme .themes-hub-tile { position: relative; display: block; overflow: hidden; border: 1px solid var(--border); border-radius: 0; text-decoration: none; color: var(--cream); background-position: center; background-size: cover; } body.post-type-archive-theme .themes-hub-tile--featured { aspect-ratio: 16 / 10; } body.post-type-archive-theme .themes-hub-tile--small { aspect-ratio: 4 / 3; } body.post-type-archive-theme .themes-hub-tile--placeholder { cursor: default; } body.post-type-archive-theme .themes-hub-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease; } body.post-type-archive-theme a.themes-hub-tile:hover .themes-hub-tile__img { transform: scale(1.03); } body.post-type-archive-theme .themes-hub-tile__overlay { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in oklab, var(--charcoal) 90%, transparent) 0%, color-mix(in oklab, var(--charcoal) 30%, transparent) 55%, transparent 100% ); pointer-events: none; } body.post-type-archive-theme .themes-hub-tile__overlay--soft { background: linear-gradient( to top, color-mix(in oklab, var(--charcoal) 85%, transparent) 0%, color-mix(in oklab, var(--charcoal) 20%, transparent) 55%, transparent 100% ); } body.post-type-archive-theme .themes-hub-tile__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; color: var(--cream); } body.post-type-archive-theme .themes-hub-tile__body--sm { padding: 0.75rem; } body.post-type-archive-theme .themes-hub-tile__title { font-family: var(--font-display); font-weight: 700; color: var(--cream); margin: 0; } body.post-type-archive-theme .themes-hub-tile__title--lg { font-size: 1.5rem; line-height: 1.2; } body.post-type-archive-theme .themes-hub-tile__title--sm { font-size: 1rem; line-height: 1.15; } body.post-type-archive-theme .themes-hub-tile__meta { margin-top: 4px; color: color-mix(in oklab, var(--cream) 90%, transparent); } body.post-type-archive-theme .themes-hub-tile__meta--lg { font-size: 0.75rem; } body.post-type-archive-theme .themes-hub-tile__meta--sm { font-size: 10px; color: color-mix(in oklab, var(--cream) 85%, transparent); line-height: 1.3; } body.post-type-archive-theme .themes-hub-tile__cta { margin-top: 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; } /* ---- 4. Spotlights (prose + table) ------------------------------------ */ body.post-type-archive-theme .themes-hub-spotlights__list { display: flex; flex-direction: column; gap: 3rem; } body.post-type-archive-theme .themes-hub-spotlights__item { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media (min-width: 1024px) { body.post-type-archive-theme .themes-hub-spotlights__item { grid-template-columns: 1fr 1.4fr; } } body.post-type-archive-theme .themes-hub-spotlights__h { margin: 0 !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } body.post-type-archive-theme .themes-hub-spotlights__body { margin: 0.75rem 0 0; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; font-size: 0.875rem; } body.post-type-archive-theme .themes-hub-spotlights__table-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: 0; } body.post-type-archive-theme .themes-hub-spotlights__table { width: 100%; display: table; border-collapse: collapse; font-size: 0.875rem; } body.post-type-archive-theme .themes-hub-spotlights__table thead { background: color-mix(in oklab, var(--cream-100) 60%, transparent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); } body.post-type-archive-theme .themes-hub-spotlights__table th, body.post-type-archive-theme .themes-hub-spotlights__table td { text-align: left; padding: 0.75rem; border-bottom: 0; } body.post-type-archive-theme .themes-hub-spotlights__table tbody tr { border-top: 1px solid var(--border); } body.post-type-archive-theme .themes-hub-spotlights__td-name { font-weight: 600; } body.post-type-archive-theme .themes-hub-spotlights__td-name a { color: var(--foreground); text-decoration: none; } body.post-type-archive-theme .themes-hub-spotlights__td-name a:hover { color: var(--cherry); } body.post-type-archive-theme .themes-hub-spotlights__td-rtp { font-variant-numeric: tabular-nums; } body.post-type-archive-theme .themes-hub-spotlights__td-note { color: color-mix(in oklab, var(--foreground) 80%, transparent); } /* ---- 5. Prose (4 paragraphs) ------------------------------------------ */ body.post-type-archive-theme .themes-hub-prose__body { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } /* Explicit margin between paras (rather than relying on flex gap) — the 0.9.47 audit caught margin-bottom 0 on WP vs 13.6 on Lov; flex gap is correct but some browser tools and screen-readers read p margin too. */ body.post-type-archive-theme .themes-hub-prose__body p { margin: 0 0 1rem; } body.post-type-archive-theme .themes-hub-prose__body p:last-child { margin-bottom: 0; } body.post-type-archive-theme .themes-hub-prose__link { color: var(--cherry); font-weight: 600; text-decoration: none; } body.post-type-archive-theme .themes-hub-prose__link:hover { text-decoration: underline; } body.post-type-archive-theme .themes-hub-prose__strong { font-weight: 600; color: var(--foreground); } /* ---- 6. Cross-discovery (3 cards) ------------------------------------- */ body.post-type-archive-theme .themes-hub-cross__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { body.post-type-archive-theme .themes-hub-cross__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.post-type-archive-theme .themes-hub-cross__card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 1.5rem; text-decoration: none; color: inherit; transition: transform 200ms ease, border-color 200ms ease; } body.post-type-archive-theme .themes-hub-cross__card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--cherry) 40%, transparent); } body.post-type-archive-theme .themes-hub-cross__card-title { font-size: 1.125rem; font-weight: 700; color: var(--foreground); } body.post-type-archive-theme .themes-hub-cross__card-body { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; } body.post-type-archive-theme .themes-hub-cross__card-cta { margin-top: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cherry); font-weight: 700; } /* ---- 7. FAQ (reuse existing .faq-accordion) --------------------------- */ body.post-type-archive-theme .themes-hub-faq .faq-accordion { margin-top: 0; } /* ---- 8. Byline (reuse .reviewer-bio--editor) -------------------------- */ /* Lov's byline card is a white-on-cream frame: 1px parchment border, 17px (≈p-5 @ 85% root) padding all sides, sharp corners (the brutalist tokens override Tailwind's rounded-2xl), 68px round avatar. 0.9.48 mistakenly stripped this to transparent/zero-border — the correction audit at 0.9.49 confirmed Lov actually renders the frame. */ body.post-type-archive-theme .reviewer-bio--editor { margin-top: 0; padding: 0; background: transparent; } body.post-type-archive-theme .reviewer-bio--editor .reviewer-bio__card { background: var(--white); border: 1px solid var(--border); border-radius: 0; padding: 17px; display: flex; align-items: flex-start; gap: 1rem; } body.post-type-archive-theme .reviewer-bio--editor .reviewer-bio__photo { width: 68px; height: 68px; flex-shrink: 0; border-radius: 9999px; overflow: hidden; background: linear-gradient(135deg, var(--cherry), var(--gold)); } body.post-type-archive-theme .reviewer-bio--editor .reviewer-bio__img { width: 100%; height: 100%; object-fit: cover; display: block; /* Belt-and-braces: __photo wrapper already clips to a circle, but stamping the radius on the img too matches Lov's rendered output verbatim (avatar IMG carries border-radius: 9999px directly). */ border-radius: 9999px; } body.post-type-archive-theme .reviewer-bio--editor .reviewer-bio__body { flex: 1; min-width: 0; } body.post-type-archive-theme .reviewer-bio--editor .reviewer-bio__editor-heading { font-size: 1rem; font-weight: 700; } body.post-type-archive-theme .reviewer-bio--editor .reviewer-bio__headline { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted-foreground); } body.post-type-archive-theme .reviewer-bio--editor .reviewer-bio__text { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } /* Meta row — Lov uses inline-flex with separators that wrap together (gap-x-2 gap-y-1 + flex-wrap). The default reviewer-bio__meta uses block layout and lets whitespace control wrap, which produces a different break point than Lov. */ body.post-type-archive-theme .reviewer-bio--editor .reviewer-bio__meta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; font-size: 0.75rem; } body.post-type-archive-theme .reviewer-bio--editor .reviewer-bio__meta-item, body.post-type-archive-theme .reviewer-bio--editor .reviewer-bio__meta-link { display: inline-flex; align-items: center; gap: 0.25rem; } body.post-type-archive-theme .themes-hub-byline__disclosure { margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; } /* =========================================================================== STAGE 9.50 — /providers hub (page-providers.php). Scoped to body.page-template-page-providers (WP derives this from the page-providers.php filename — see archive-theme.php precedent which scoped to body.post-type-archive-theme). Modelled on the themes hub at 0.9.49 — same overall shape (hero + featured + all + spotlights + prose + cross + faq + byline), but with provider-specific chrome: - dark charcoal hero + gold pinstripe (vs themes' felt-green) - 16:9 LOGO WELLS instead of image illustrations - bi-tone logo backgrounds (#141418 dark / cream-100 light) - 3 sub-groups under the "All 14" section - spotlight deep-dives carry a logo chip + provider name =========================================================================== */ /* ---- Outer main padding — zero so the dark hero starts flush under the header (matches the themes-hub fix at 0.9.49). ------------- */ body.page-template-page-providers .site-main { padding-top: 0; padding-bottom: 0; } /* ---- 1. Hero (full-bleed charcoal + gold pinstripe) ------------------ */ body.page-template-page-providers .providers-hub-hero { position: relative; background-color: var(--charcoal); background-image: repeating-linear-gradient( 90deg, color-mix(in oklab, var(--gold) 8%, transparent) 0 1px, transparent 1px 9px ); border-bottom: 1px solid var(--charcoal); color: var(--cream); } body.page-template-page-providers .providers-hub-hero__inner { position: relative; max-width: 1280px; margin-inline: auto; padding: 1.25rem 1rem; } @media (min-width: 1024px) { body.page-template-page-providers .providers-hub-hero__inner { padding: 1.5rem 2rem; min-height: 280px; display: flex; flex-direction: column; justify-content: center; } } /* Dark-tone breadcrumb inside the hero. */ body.page-template-page-providers .providers-hub-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0; } body.page-template-page-providers .providers-hub-hero .breadcrumb { color: color-mix(in oklab, var(--cream) 70%, transparent); font-size: 0.75rem; } body.page-template-page-providers .providers-hub-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-providers .providers-hub-hero .breadcrumb li { display: inline; } body.page-template-page-providers .providers-hub-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--cream) 55%, transparent); } body.page-template-page-providers .providers-hub-hero .breadcrumb a { color: color-mix(in oklab, var(--cream) 70%, transparent); text-decoration: none; } body.page-template-page-providers .providers-hub-hero .breadcrumb a:hover { color: var(--gold); } body.page-template-page-providers .providers-hub-hero .breadcrumb [aria-current="page"] { color: var(--cream); font-weight: 500; } body.page-template-page-providers .providers-hub-hero__grid { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } @media (min-width: 1024px) { body.page-template-page-providers .providers-hub-hero__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; } } body.page-template-page-providers .providers-hub-hero__grid > * { min-width: 0; max-width: 100%; } body.page-template-page-providers .providers-hub-hero__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); font-weight: 700; } body.page-template-page-providers .providers-hub-hero__title { margin: 0.5rem 0 0 !important; font-size: 22.5px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: var(--cream) !important; line-height: 1.1 !important; } @media (min-width: 1024px) { body.page-template-page-providers .providers-hub-hero__title { font-size: 32px !important; } } body.page-template-page-providers .providers-hub-hero__lede { margin: 1rem 0 0; max-width: 56rem; color: color-mix(in oklab, var(--cream) 85%, transparent); font-size: 0.95rem; line-height: 1.65; } /* Hero spotlight card — same brutalist 2px-charcoal-frame card as the themes hub spotlight. Pragmatic Play featured tile. */ body.page-template-page-providers .providers-hub-hero__spotlight { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-width: 0; max-width: 100%; } @media (min-width: 1024px) { body.page-template-page-providers .providers-hub-hero__spotlight { align-items: flex-end; } } body.page-template-page-providers .providers-hub-hero__spotlight-eyebrow { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; font-family: var(--font-sans); } body.page-template-page-providers .providers-hub-hero__spotlight-rule { height: 2px; width: 1.5rem; background: var(--gold); } body.page-template-page-providers .providers-hub-hero__spotlight-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cream); } body.page-template-page-providers .providers-hub-hero__spotlight-sep { color: color-mix(in oklab, var(--cream) 60%, transparent); font-size: 10px; } body.page-template-page-providers .providers-hub-hero__spotlight-sublabel { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--cream) 60%, transparent); } body.page-template-page-providers .providers-hub-hero__spotlight-card { display: flex; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; background: var(--card); border: 2px solid var(--charcoal); border-radius: 0; text-decoration: none; color: inherit; transition: transform 200ms ease; } @media (min-width: 1024px) { body.page-template-page-providers .providers-hub-hero__spotlight-card { max-width: 380px; } } body.page-template-page-providers .providers-hub-hero__spotlight-card:hover { transform: translate(-2px, -2px); } body.page-template-page-providers .providers-hub-hero__spotlight-media { position: relative; flex-shrink: 0; width: 120px; height: 80px; border: 2px solid var(--charcoal); overflow: hidden; margin: 10px; } /* Lov fills the 120×80 media box with the logo via absolute inset-0 + object-cover, so the gradient bg is masked by the image and there's no visible inset frame. Mine was contain + 6px padding, which left the blue gradient showing as a frame around the logo — the "extra blue box" the user flagged at 0.9.50. */ body.page-template-page-providers .providers-hub-hero__spotlight-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } body.page-template-page-providers .providers-hub-hero__spotlight-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 10px 0; } body.page-template-page-providers .providers-hub-hero__spotlight-title { font-family: var(--font-display); font-size: 10px; line-height: 1.12; font-weight: 700; color: var(--charcoal); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } body.page-template-page-providers .providers-hub-hero__spotlight-sub { font-size: 12px; font-style: italic; color: var(--muted-foreground); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page-template-page-providers .providers-hub-hero__spotlight-meta { margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--charcoal) 75%, transparent); } body.page-template-page-providers .providers-hub-hero__spotlight-cta-wrap { margin-top: 8px; } body.page-template-page-providers .providers-hub-hero__spotlight-cta { display: inline-flex; align-items: center; gap: 4px; background: var(--cherry); color: var(--cream); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; border: 2px solid var(--charcoal); } /* ---- 2-8. Body container (880-narrow content column) ----------------- */ body.page-template-page-providers .providers-hub-body { max-width: 880px; } body.page-template-page-providers .providers-hub-section { padding-block: 3rem; } body.page-template-page-providers .providers-hub-section__title { margin: 0 0 1.5rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } @media (max-width: 767px) { body.page-template-page-providers .providers-hub-section__title { font-size: 20px !important; } } /* ---- 2. Featured grid (6 cards, 16:9 logo wells) --------------------- */ body.page-template-page-providers .providers-hub-featured__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { body.page-template-page-providers .providers-hub-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.page-template-page-providers .providers-hub-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- 3. All grid (3 groups, 4-col compact) --------------------------- */ body.page-template-page-providers .providers-hub-all__groups { display: flex; flex-direction: column; gap: 2.5rem; } body.page-template-page-providers .providers-hub-all__group-h { margin: 0 !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } body.page-template-page-providers .providers-hub-all__group-intro { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); } body.page-template-page-providers .providers-hub-all__grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 768px) { body.page-template-page-providers .providers-hub-all__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.page-template-page-providers .providers-hub-all__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---- Tile chrome (logo well + body) — sharp corners across the board. Featured tiles get a deeper logo well + larger body padding; small tiles get a compact variant for the 4-col grid. ---------- */ body.page-template-page-providers .providers-hub-tile { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 0; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 200ms ease; } body.page-template-page-providers a.providers-hub-tile:hover { border-color: color-mix(in oklab, var(--cherry) 40%, transparent); } body.page-template-page-providers .providers-hub-tile--placeholder { cursor: default; } body.page-template-page-providers .providers-hub-tile__well { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; } body.page-template-page-providers .providers-hub-tile__well--featured { padding: 1.5rem; } body.page-template-page-providers .providers-hub-tile__well--small { padding: 1rem; } body.page-template-page-providers .providers-hub-tile__well--dark { background: #141418; } body.page-template-page-providers .providers-hub-tile__well--cream { background: var(--cream-100); } body.page-template-page-providers .providers-hub-tile__logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } body.page-template-page-providers .providers-hub-tile__body { border-top: 1px solid var(--border); } body.page-template-page-providers .providers-hub-tile__body--featured { padding: 1rem; } body.page-template-page-providers .providers-hub-tile__body--small { padding: 0.75rem; } body.page-template-page-providers .providers-hub-tile__name { font-family: var(--font-display); font-weight: 700; color: var(--foreground); margin: 0; } body.page-template-page-providers .providers-hub-tile__name--lg { font-size: 1.125rem; line-height: 1.2; } body.page-template-page-providers .providers-hub-tile__name--sm { font-size: 0.875rem; line-height: 1.15; } body.page-template-page-providers .providers-hub-tile__meta { color: var(--muted-foreground); } body.page-template-page-providers .providers-hub-tile__meta--lg { margin-top: 4px; font-size: 0.75rem; } body.page-template-page-providers .providers-hub-tile__meta--sm { margin-top: 2px; font-size: 10px; line-height: 1.3; } body.page-template-page-providers .providers-hub-tile__cta { margin-top: 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cherry); font-weight: 700; } /* ---- 4. Spotlights (prose + chip + top-3 slot table) ----------------- */ body.page-template-page-providers .providers-hub-spotlights__list { display: flex; flex-direction: column; gap: 3rem; } body.page-template-page-providers .providers-hub-spotlights__item { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media (min-width: 1024px) { body.page-template-page-providers .providers-hub-spotlights__item { grid-template-columns: 1fr 1.4fr; } } body.page-template-page-providers .providers-hub-spotlights__chip { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 1rem; border: 1px solid var(--border); border-radius: 0; margin-bottom: 0.75rem; } body.page-template-page-providers .providers-hub-spotlights__chip-logo { max-height: 2rem; max-width: 140px; width: auto; height: auto; object-fit: contain; } body.page-template-page-providers .providers-hub-spotlights__h { margin: 0 !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } body.page-template-page-providers .providers-hub-spotlights__body { margin: 0.75rem 0 0; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; font-size: 0.875rem; } body.page-template-page-providers .providers-hub-spotlights__cta { display: inline-block; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--cherry); text-decoration: none; } body.page-template-page-providers .providers-hub-spotlights__cta:hover { text-decoration: underline; } body.page-template-page-providers .providers-hub-spotlights__cta--soon { cursor: default; } body.page-template-page-providers .providers-hub-spotlights__cta--soon:hover { text-decoration: none; } body.page-template-page-providers .providers-hub-spotlights__table-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: 0; } body.page-template-page-providers .providers-hub-spotlights__table { width: 100%; display: table; border-collapse: collapse; font-size: 0.875rem; } body.page-template-page-providers .providers-hub-spotlights__table thead { background: color-mix(in oklab, var(--cream-100) 60%, transparent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); } body.page-template-page-providers .providers-hub-spotlights__table th, body.page-template-page-providers .providers-hub-spotlights__table td { text-align: left; padding: 0.75rem; border-bottom: 0; } body.page-template-page-providers .providers-hub-spotlights__table tbody tr { border-top: 1px solid var(--border); } body.page-template-page-providers .providers-hub-spotlights__td-name { font-weight: 600; } body.page-template-page-providers .providers-hub-spotlights__td-name a { color: var(--foreground); text-decoration: none; } body.page-template-page-providers .providers-hub-spotlights__td-name a:hover { color: var(--cherry); } body.page-template-page-providers .providers-hub-spotlights__td-empty { padding: 1rem; color: var(--muted-foreground); font-size: 0.875rem; } /* ---- 5. Prose (4 paragraphs) ----------------------------------------- */ body.page-template-page-providers .providers-hub-prose__body { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-providers .providers-hub-prose__body p { margin: 0 0 1rem; } body.page-template-page-providers .providers-hub-prose__body p:last-child { margin-bottom: 0; } body.page-template-page-providers .providers-hub-prose__link { color: var(--cherry); font-weight: 600; text-decoration: none; } body.page-template-page-providers .providers-hub-prose__link:hover { text-decoration: underline; } body.page-template-page-providers .providers-hub-prose__strong { font-weight: 600; color: var(--foreground); } /* ---- 6. Cross-discovery (4 cards) ------------------------------------ */ body.page-template-page-providers .providers-hub-cross__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { body.page-template-page-providers .providers-hub-cross__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.page-template-page-providers .providers-hub-cross__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body.page-template-page-providers .providers-hub-cross__card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 1.5rem; text-decoration: none; color: inherit; transition: transform 200ms ease, border-color 200ms ease; } body.page-template-page-providers .providers-hub-cross__card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--cherry) 40%, transparent); } body.page-template-page-providers .providers-hub-cross__card-title { font-size: 1.125rem; font-weight: 700; color: var(--foreground); } body.page-template-page-providers .providers-hub-cross__card-body { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; } body.page-template-page-providers .providers-hub-cross__card-cta { margin-top: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cherry); font-weight: 700; } /* ---- 7. FAQ — reuses .faq-accordion -------------------------------- */ body.page-template-page-providers .providers-hub-faq .faq-accordion { margin-top: 0; } /* ---- 8. Byline — reuses .reviewer-bio--editor (themes-hub pattern) --- */ body.page-template-page-providers .reviewer-bio--editor { margin-top: 0; padding: 0; background: transparent; } body.page-template-page-providers .reviewer-bio--editor .reviewer-bio__card { background: var(--white); border: 1px solid var(--border); border-radius: 0; padding: 17px; display: flex; align-items: flex-start; gap: 1rem; } body.page-template-page-providers .reviewer-bio--editor .reviewer-bio__photo { width: 68px; height: 68px; flex-shrink: 0; border-radius: 9999px; overflow: hidden; background: linear-gradient(135deg, var(--cherry), var(--gold)); } body.page-template-page-providers .reviewer-bio--editor .reviewer-bio__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9999px; } body.page-template-page-providers .reviewer-bio--editor .reviewer-bio__body { flex: 1; min-width: 0; } body.page-template-page-providers .reviewer-bio--editor .reviewer-bio__editor-heading { font-size: 1rem; font-weight: 700; } body.page-template-page-providers .reviewer-bio--editor .reviewer-bio__headline { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted-foreground); } body.page-template-page-providers .reviewer-bio--editor .reviewer-bio__text { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } body.page-template-page-providers .reviewer-bio--editor .reviewer-bio__meta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; font-size: 0.75rem; } body.page-template-page-providers .reviewer-bio--editor .reviewer-bio__meta-item, body.page-template-page-providers .reviewer-bio--editor .reviewer-bio__meta-link { display: inline-flex; align-items: center; gap: 0.25rem; } body.page-template-page-providers .providers-hub-byline__disclosure { margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; } /* =========================================================================== STAGE 9.52 — /features hub (page-features.php). Scoped to body.page-template-page-features (set by body_class filter in page-features.php; WP does NOT auto-add it from the template hierarchy match). Modelled on themes + providers hubs. Unique to features hub: - GOLD hero (no pinstripe — solid bg-gold; charcoal text on gold) - Image-tile cards (NOT logo wells) — uses image+gradient pattern from themes hub - Adds a "Feature Buy in the UK" warning callout (left-rail warning border + AlertTriangle icon) - 4 spotlight deep-dives (Bonus Buy spotlight carries a warning icon inline with H3) =========================================================================== */ /* ---- Zero .site-main padding so the gold hero starts flush. --------- */ body.page-template-page-features .site-main { padding-top: 0; padding-bottom: 0; } /* ---- 1. Hero (full-bleed gold) --------------------------------------- */ body.page-template-page-features .features-hub-hero { background: var(--gold); border-bottom: 1px solid color-mix(in oklab, var(--charcoal) 20%, transparent); color: var(--charcoal); } body.page-template-page-features .features-hub-hero__inner { position: relative; max-width: 1280px; margin-inline: auto; padding: 1.25rem 1rem; } @media (min-width: 1024px) { body.page-template-page-features .features-hub-hero__inner { padding: 1.5rem 2rem; min-height: 280px; display: flex; flex-direction: column; justify-content: center; } } /* Gold-tone breadcrumb (charcoal text on gold bg). */ body.page-template-page-features .features-hub-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0; } body.page-template-page-features .features-hub-hero .breadcrumb { color: color-mix(in oklab, var(--charcoal) 70%, transparent); font-size: 0.75rem; } body.page-template-page-features .features-hub-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-features .features-hub-hero .breadcrumb li { display: inline; } body.page-template-page-features .features-hub-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--charcoal) 55%, transparent); } body.page-template-page-features .features-hub-hero .breadcrumb a { color: color-mix(in oklab, var(--charcoal) 70%, transparent); text-decoration: none; } body.page-template-page-features .features-hub-hero .breadcrumb a:hover { color: var(--charcoal); } body.page-template-page-features .features-hub-hero .breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; } body.page-template-page-features .features-hub-hero__grid { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } @media (min-width: 1024px) { body.page-template-page-features .features-hub-hero__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; } } body.page-template-page-features .features-hub-hero__grid > * { min-width: 0; max-width: 100%; } body.page-template-page-features .features-hub-hero__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--charcoal); font-weight: 700; } body.page-template-page-features .features-hub-hero__title { margin: 0.5rem 0 0 !important; font-size: 22.5px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: var(--charcoal) !important; line-height: 1.1 !important; } @media (min-width: 1024px) { body.page-template-page-features .features-hub-hero__title { font-size: 32px !important; } } body.page-template-page-features .features-hub-hero__lede { margin: 1rem 0 0; max-width: 56rem; color: color-mix(in oklab, var(--charcoal) 85%, transparent); font-size: 0.95rem; line-height: 1.65; } /* Hero spotlight card — Megaways featured-pick. */ body.page-template-page-features .features-hub-hero__spotlight { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-width: 0; max-width: 100%; } @media (min-width: 1024px) { body.page-template-page-features .features-hub-hero__spotlight { align-items: flex-end; } } body.page-template-page-features .features-hub-hero__spotlight-eyebrow { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; font-family: var(--font-sans); } body.page-template-page-features .features-hub-hero__spotlight-rule { height: 2px; width: 1.5rem; background: var(--cherry); } body.page-template-page-features .features-hub-hero__spotlight-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--charcoal); } body.page-template-page-features .features-hub-hero__spotlight-sep { color: color-mix(in oklab, var(--charcoal) 60%, transparent); font-size: 10px; } body.page-template-page-features .features-hub-hero__spotlight-sublabel { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--charcoal) 60%, transparent); } body.page-template-page-features .features-hub-hero__spotlight-card { display: flex; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; background: var(--card); border: 2px solid var(--charcoal); border-radius: 0; text-decoration: none; color: inherit; transition: transform 200ms ease; } @media (min-width: 1024px) { body.page-template-page-features .features-hub-hero__spotlight-card { max-width: 380px; } } body.page-template-page-features .features-hub-hero__spotlight-card:hover { transform: translate(-2px, -2px); } body.page-template-page-features .features-hub-hero__spotlight-media { position: relative; flex-shrink: 0; width: 120px; height: 80px; border: 2px solid var(--charcoal); overflow: hidden; margin: 10px; } body.page-template-page-features .features-hub-hero__spotlight-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } body.page-template-page-features .features-hub-hero__spotlight-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 10px 0; } body.page-template-page-features .features-hub-hero__spotlight-title { font-family: var(--font-display); font-size: 10px; line-height: 1.12; font-weight: 700; color: var(--charcoal); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } body.page-template-page-features .features-hub-hero__spotlight-sub { font-size: 12px; font-style: italic; color: var(--muted-foreground); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page-template-page-features .features-hub-hero__spotlight-meta { margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--charcoal) 75%, transparent); } body.page-template-page-features .features-hub-hero__spotlight-cta-wrap { margin-top: 8px; } body.page-template-page-features .features-hub-hero__spotlight-cta { display: inline-flex; align-items: center; gap: 4px; background: var(--cherry); color: var(--cream); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; border: 2px solid var(--charcoal); } /* ---- 2-9. Body container ---------------------------------------------- */ body.page-template-page-features .features-hub-body { max-width: 880px; } body.page-template-page-features .features-hub-section { padding-block: 3rem; } body.page-template-page-features .features-hub-section__title { margin: 0 0 1.5rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } @media (max-width: 767px) { body.page-template-page-features .features-hub-section__title { font-size: 20px !important; } } /* ---- 2. Featured Features grid (6 cards, 16:10 image tiles) ---------- */ body.page-template-page-features .features-hub-featured__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { body.page-template-page-features .features-hub-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.page-template-page-features .features-hub-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- 3. All grid (16 cards, 4:3, alphabetical) ----------------------- */ body.page-template-page-features .features-hub-all__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 768px) { body.page-template-page-features .features-hub-all__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.page-template-page-features .features-hub-all__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Image tiles — sharp corners, dark gradient overlay, cream title text at bottom (same chrome as themes hub .themes-hub-tile). */ body.page-template-page-features .features-hub-tile { position: relative; display: block; overflow: hidden; border: 1px solid var(--border); border-radius: 0; text-decoration: none; color: var(--cream); background: linear-gradient(135deg, #1a1a1a, #3a1a1a); } body.page-template-page-features .features-hub-tile--featured { aspect-ratio: 16 / 10; } body.page-template-page-features .features-hub-tile--small { aspect-ratio: 4 / 3; } body.page-template-page-features .features-hub-tile--placeholder { cursor: default; } body.page-template-page-features .features-hub-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease; } body.page-template-page-features a.features-hub-tile:hover .features-hub-tile__img { transform: scale(1.03); } body.page-template-page-features .features-hub-tile__overlay { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in oklab, var(--charcoal) 90%, transparent) 0%, color-mix(in oklab, var(--charcoal) 30%, transparent) 55%, transparent 100% ); pointer-events: none; } body.page-template-page-features .features-hub-tile__overlay--soft { background: linear-gradient( to top, color-mix(in oklab, var(--charcoal) 85%, transparent) 0%, color-mix(in oklab, var(--charcoal) 20%, transparent) 55%, transparent 100% ); } body.page-template-page-features .features-hub-tile__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; color: var(--cream); } body.page-template-page-features .features-hub-tile__body--sm { padding: 0.75rem; } body.page-template-page-features .features-hub-tile__title { font-family: var(--font-display); font-weight: 700; color: var(--cream); margin: 0; } body.page-template-page-features .features-hub-tile__title--lg { font-size: 1.5rem; line-height: 1.2; } body.page-template-page-features .features-hub-tile__title--sm { font-size: 1rem; line-height: 1.15; } body.page-template-page-features .features-hub-tile__meta { color: color-mix(in oklab, var(--cream) 90%, transparent); } body.page-template-page-features .features-hub-tile__meta--lg { margin-top: 4px; font-size: 0.75rem; } body.page-template-page-features .features-hub-tile__meta--sm { margin-top: 2px; font-size: 10px; color: color-mix(in oklab, var(--cream) 85%, transparent); line-height: 1.3; } body.page-template-page-features .features-hub-tile__cta { margin-top: 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; } /* ---- 4. Spotlights (prose + table) ----------------------------------- */ body.page-template-page-features .features-hub-spotlights__list { display: flex; flex-direction: column; gap: 3rem; } body.page-template-page-features .features-hub-spotlights__item { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media (min-width: 1024px) { body.page-template-page-features .features-hub-spotlights__item { grid-template-columns: 1fr 1.2fr; } } body.page-template-page-features .features-hub-spotlights__h { margin: 0 !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; display: flex; align-items: center; gap: 0.5rem; } body.page-template-page-features .features-hub-spotlights__h--warning { color: var(--charcoal); } body.page-template-page-features .features-hub-spotlights__warn-icon { color: var(--warning); flex-shrink: 0; } body.page-template-page-features .features-hub-spotlights__body { margin: 0.75rem 0 0; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; font-size: 0.875rem; } body.page-template-page-features .features-hub-spotlights__table-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: 0; } body.page-template-page-features .features-hub-spotlights__table { width: 100%; display: table; border-collapse: collapse; font-size: 0.875rem; } body.page-template-page-features .features-hub-spotlights__table thead { background: color-mix(in oklab, var(--cream-100) 60%, transparent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); } body.page-template-page-features .features-hub-spotlights__table th, body.page-template-page-features .features-hub-spotlights__table td { text-align: left; padding: 0.75rem; border-bottom: 0; } body.page-template-page-features .features-hub-spotlights__table tbody tr { border-top: 1px solid var(--border); } body.page-template-page-features .features-hub-spotlights__td-name { font-weight: 600; } body.page-template-page-features .features-hub-spotlights__td-name a { color: var(--foreground); text-decoration: none; } body.page-template-page-features .features-hub-spotlights__td-name a:hover { color: var(--cherry); } /* ---- 5. Prose (4 paragraphs) ----------------------------------------- */ body.page-template-page-features .features-hub-prose__body { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-features .features-hub-prose__body p { margin: 0 0 1rem; } body.page-template-page-features .features-hub-prose__body p:last-child { margin-bottom: 0; } body.page-template-page-features .features-hub-prose__strong { font-weight: 600; color: var(--foreground); } /* ---- 6. UK Feature Buy callout — warning border-left bar + AlertTriangle */ body.page-template-page-features .features-hub-callout-section { /* Inherits .features-hub-section padding-block 3rem */ } body.page-template-page-features .features-hub-callout { background: color-mix(in oklab, var(--warning) 5%, transparent); border-left: 4px solid var(--warning); border-radius: 0; padding: 1.5rem; display: flex; align-items: flex-start; gap: 0.75rem; } body.page-template-page-features .features-hub-callout__icon { color: var(--warning); flex-shrink: 0; margin-top: 0.25rem; } body.page-template-page-features .features-hub-callout__body { flex: 1; min-width: 0; } body.page-template-page-features .features-hub-callout__h { margin: 0 !important; font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } body.page-template-page-features .features-hub-callout__paragraphs { margin-top: 1rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; font-size: 0.875rem; } body.page-template-page-features .features-hub-callout__paragraphs p { margin: 0 0 1rem; } body.page-template-page-features .features-hub-callout__paragraphs p:last-child { margin-bottom: 0; } /* ---- 7. Cross-discovery (3 cards) ------------------------------------ */ body.page-template-page-features .features-hub-cross__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { body.page-template-page-features .features-hub-cross__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.page-template-page-features .features-hub-cross__card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 1.5rem; text-decoration: none; color: inherit; transition: transform 200ms ease, border-color 200ms ease; } body.page-template-page-features .features-hub-cross__card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--cherry) 40%, transparent); } body.page-template-page-features .features-hub-cross__card-title { font-size: 1.125rem; font-weight: 700; color: var(--foreground); } body.page-template-page-features .features-hub-cross__card-body { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; } body.page-template-page-features .features-hub-cross__card-cta { margin-top: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cherry); font-weight: 700; } /* ---- 8. FAQ — reuses .faq-accordion -------------------------------- */ body.page-template-page-features .features-hub-faq .faq-accordion { margin-top: 0; } /* ---- 9. Byline — reuses .reviewer-bio--editor ----------------------- */ body.page-template-page-features .reviewer-bio--editor { margin-top: 0; padding: 0; background: transparent; } body.page-template-page-features .reviewer-bio--editor .reviewer-bio__card { background: var(--white); border: 1px solid var(--border); border-radius: 0; padding: 17px; display: flex; align-items: flex-start; gap: 1rem; } body.page-template-page-features .reviewer-bio--editor .reviewer-bio__photo { width: 68px; height: 68px; flex-shrink: 0; border-radius: 9999px; overflow: hidden; background: linear-gradient(135deg, var(--cherry), var(--gold)); } body.page-template-page-features .reviewer-bio--editor .reviewer-bio__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9999px; } body.page-template-page-features .reviewer-bio--editor .reviewer-bio__body { flex: 1; min-width: 0; } body.page-template-page-features .reviewer-bio--editor .reviewer-bio__editor-heading { font-size: 1rem; font-weight: 700; } body.page-template-page-features .reviewer-bio--editor .reviewer-bio__headline { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted-foreground); } body.page-template-page-features .reviewer-bio--editor .reviewer-bio__text { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } body.page-template-page-features .reviewer-bio--editor .reviewer-bio__meta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; font-size: 0.75rem; } body.page-template-page-features .reviewer-bio--editor .reviewer-bio__meta-item, body.page-template-page-features .reviewer-bio--editor .reviewer-bio__meta-link { display: inline-flex; align-items: center; gap: 0.25rem; } body.page-template-page-features .features-hub-byline__disclosure { margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; } /* =========================================================================== STAGE 9.53 — /attributes hub (page-attributes.php). Scoped to body.page-template-page-attributes (injected by body_class filter). Modelled on themes + providers + features hubs. Unique to attributes: - Cherry-red hero (no pinstripe — solid bg-cherry; cream-on-red, eyebrow GOLD) - 6 sub-grouped quick-filter grids (Reels / Paylines / Ways / RTP / Layout / Volatility) instead of one flat "all" - RTP-tier semantic table (RTP Tier / Slots / Anchor Slots) - Reels editorial with pill-chip anchor links - "Paylines vs Ways" prose section - GB Stake Caps tinted callout (cherry/5 bg + 4px cherry left-rail) =========================================================================== */ /* ---- Zero .site-main padding so the red hero starts flush. ----------- */ body.page-template-page-attributes .site-main { padding-top: 0; padding-bottom: 0; } /* ---- 1. Hero (full-bleed cherry red) -------------------------------- */ body.page-template-page-attributes .attributes-hub-hero { background: var(--cherry); border-bottom: 1px solid var(--cherry-dark); color: var(--cream); } body.page-template-page-attributes .attributes-hub-hero__inner { position: relative; max-width: 1280px; margin-inline: auto; padding: 1.25rem 1rem; } @media (min-width: 1024px) { body.page-template-page-attributes .attributes-hub-hero__inner { padding: 1.5rem 2rem; min-height: 280px; display: flex; flex-direction: column; justify-content: center; } } /* Dark-tone breadcrumb (cream on red). */ body.page-template-page-attributes .attributes-hub-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0; } body.page-template-page-attributes .attributes-hub-hero .breadcrumb { color: color-mix(in oklab, var(--cream) 70%, transparent); font-size: 0.75rem; } body.page-template-page-attributes .attributes-hub-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-attributes .attributes-hub-hero .breadcrumb li { display: inline; } body.page-template-page-attributes .attributes-hub-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--cream) 55%, transparent); } body.page-template-page-attributes .attributes-hub-hero .breadcrumb a { color: color-mix(in oklab, var(--cream) 70%, transparent); text-decoration: none; } body.page-template-page-attributes .attributes-hub-hero .breadcrumb a:hover { color: var(--gold); } body.page-template-page-attributes .attributes-hub-hero .breadcrumb [aria-current="page"] { color: var(--cream); font-weight: 500; } body.page-template-page-attributes .attributes-hub-hero__grid { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } @media (min-width: 1024px) { body.page-template-page-attributes .attributes-hub-hero__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; } } body.page-template-page-attributes .attributes-hub-hero__grid > * { min-width: 0; max-width: 100%; } body.page-template-page-attributes .attributes-hub-hero__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); font-weight: 700; } body.page-template-page-attributes .attributes-hub-hero__title { margin: 0.5rem 0 0 !important; font-size: 22.5px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: var(--cream) !important; line-height: 1.1 !important; } @media (min-width: 1024px) { body.page-template-page-attributes .attributes-hub-hero__title { font-size: 32px !important; } } body.page-template-page-attributes .attributes-hub-hero__lede { margin: 1rem 0 0; max-width: 56rem; color: color-mix(in oklab, var(--cream) 90%, transparent); font-size: 0.95rem; line-height: 1.65; } /* Hero spotlight card — High Volatility featured-pick. */ body.page-template-page-attributes .attributes-hub-hero__spotlight { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-width: 0; max-width: 100%; } @media (min-width: 1024px) { body.page-template-page-attributes .attributes-hub-hero__spotlight { align-items: flex-end; } } body.page-template-page-attributes .attributes-hub-hero__spotlight-eyebrow { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; font-family: var(--font-sans); } body.page-template-page-attributes .attributes-hub-hero__spotlight-rule { height: 2px; width: 1.5rem; background: var(--gold); } body.page-template-page-attributes .attributes-hub-hero__spotlight-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cream); } body.page-template-page-attributes .attributes-hub-hero__spotlight-sep { color: color-mix(in oklab, var(--cream) 60%, transparent); font-size: 10px; } body.page-template-page-attributes .attributes-hub-hero__spotlight-sublabel { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--cream) 60%, transparent); } body.page-template-page-attributes .attributes-hub-hero__spotlight-card { display: flex; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; background: var(--card); border: 2px solid var(--charcoal); border-radius: 0; text-decoration: none; color: inherit; transition: transform 200ms ease; } @media (min-width: 1024px) { body.page-template-page-attributes .attributes-hub-hero__spotlight-card { max-width: 380px; } } body.page-template-page-attributes .attributes-hub-hero__spotlight-card:hover { transform: translate(-2px, -2px); } body.page-template-page-attributes .attributes-hub-hero__spotlight-media { position: relative; flex-shrink: 0; width: 120px; height: 80px; border: 2px solid var(--charcoal); overflow: hidden; margin: 10px; } body.page-template-page-attributes .attributes-hub-hero__spotlight-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } body.page-template-page-attributes .attributes-hub-hero__spotlight-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 10px 0; } body.page-template-page-attributes .attributes-hub-hero__spotlight-title { font-family: var(--font-display); font-size: 10px; line-height: 1.12; font-weight: 700; color: var(--charcoal); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } body.page-template-page-attributes .attributes-hub-hero__spotlight-sub { font-size: 12px; font-style: italic; color: var(--muted-foreground); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page-template-page-attributes .attributes-hub-hero__spotlight-meta { margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--charcoal) 75%, transparent); } body.page-template-page-attributes .attributes-hub-hero__spotlight-cta-wrap { margin-top: 8px; } body.page-template-page-attributes .attributes-hub-hero__spotlight-cta { display: inline-flex; align-items: center; gap: 4px; background: var(--cherry); color: var(--cream); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; border: 2px solid var(--charcoal); } /* ---- 2-9. Body container --------------------------------------------- */ body.page-template-page-attributes .attributes-hub-body { max-width: 880px; } body.page-template-page-attributes .attributes-hub-section { padding-block: 3rem; } body.page-template-page-attributes .attributes-hub-section__title { margin: 0 0 1.5rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } @media (max-width: 767px) { body.page-template-page-attributes .attributes-hub-section__title { font-size: 20px !important; } } /* ---- 2. Quick filter grid — 6 sub-groups ----------------------------- */ body.page-template-page-attributes .attributes-hub-quick__groups { display: flex; flex-direction: column; gap: 2.5rem; } body.page-template-page-attributes .attributes-hub-quick__group-h { margin: 0 0 0.75rem !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; } body.page-template-page-attributes .attributes-hub-quick__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 768px) { body.page-template-page-attributes .attributes-hub-quick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.page-template-page-attributes .attributes-hub-quick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Image tile chrome — sharp corners, dark base, gradient overlay, cream title text at bottom. Mirrors themes/features tile pattern. */ body.page-template-page-attributes .attributes-hub-tile { position: relative; display: block; overflow: hidden; border: 1px solid var(--border); border-radius: 0; text-decoration: none; color: var(--cream); background: var(--charcoal); aspect-ratio: 4 / 3; } body.page-template-page-attributes .attributes-hub-tile--placeholder { cursor: default; } body.page-template-page-attributes .attributes-hub-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease; } body.page-template-page-attributes a.attributes-hub-tile:hover .attributes-hub-tile__img { transform: scale(1.05); } body.page-template-page-attributes .attributes-hub-tile__overlay { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in oklab, var(--charcoal) 90%, transparent) 0%, color-mix(in oklab, var(--charcoal) 30%, transparent) 55%, transparent 100% ); pointer-events: none; } body.page-template-page-attributes .attributes-hub-tile__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 0.75rem; color: var(--cream); } body.page-template-page-attributes .attributes-hub-tile__title { font-family: var(--font-display); font-weight: 700; color: var(--cream); margin: 0; font-size: 1rem; line-height: 1.15; } body.page-template-page-attributes .attributes-hub-tile__meta { margin-top: 2px; font-size: 10px; color: color-mix(in oklab, var(--cream) 85%, transparent); line-height: 1.3; } /* ---- 3. High RTP table ----------------------------------------------- */ body.page-template-page-attributes .attributes-hub-rtp__lede { margin: 0 0 1.5rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-attributes .attributes-hub-rtp__table-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: 0; } body.page-template-page-attributes .attributes-hub-rtp__table { width: 100%; display: table; border-collapse: collapse; font-size: 0.875rem; } body.page-template-page-attributes .attributes-hub-rtp__table thead { background: color-mix(in oklab, var(--cream-100) 60%, transparent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); } body.page-template-page-attributes .attributes-hub-rtp__table th, body.page-template-page-attributes .attributes-hub-rtp__table td { text-align: left; padding: 0.75rem; border-bottom: 0; } body.page-template-page-attributes .attributes-hub-rtp__table tbody tr { border-top: 1px solid var(--border); } body.page-template-page-attributes .attributes-hub-rtp__td-tier { font-weight: 600; } body.page-template-page-attributes .attributes-hub-rtp__td-tier a { color: var(--foreground); text-decoration: none; } body.page-template-page-attributes .attributes-hub-rtp__td-tier a:hover { color: var(--cherry); } body.page-template-page-attributes .attributes-hub-rtp__td-count { font-variant-numeric: tabular-nums; } body.page-template-page-attributes .attributes-hub-rtp__td-anchors a { color: var(--foreground); text-decoration: none; text-underline-offset: 2px; } body.page-template-page-attributes .attributes-hub-rtp__td-anchors a:hover { color: var(--cherry); text-decoration: underline; } body.page-template-page-attributes .attributes-hub-rtp__after { margin: 1.25rem 0 0; font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } /* ---- 4. Reels editorial ---------------------------------------------- */ body.page-template-page-attributes .attributes-hub-reels__list { display: flex; flex-direction: column; gap: 2rem; } body.page-template-page-attributes .attributes-hub-reels__h { margin: 0 !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } body.page-template-page-attributes .attributes-hub-reels__body { margin: 0.5rem 0 0; font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-attributes .attributes-hub-reels__chips { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } body.page-template-page-attributes .attributes-hub-reels__chip { display: inline-block; font-size: 0.75rem; padding: 0.375rem 0.75rem; background: var(--cream-100); border-radius: 9999px; font-weight: 500; color: var(--foreground); text-decoration: none; transition: background-color 150ms ease; } body.page-template-page-attributes a.attributes-hub-reels__chip:hover { background: color-mix(in oklab, var(--cherry) 10%, transparent); } body.page-template-page-attributes .attributes-hub-reels__tail { margin: 0; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.65; } /* ---- 5. Prose (Paylines vs Ways) ------------------------------------ */ body.page-template-page-attributes .attributes-hub-prose__body { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-attributes .attributes-hub-prose__body p { margin: 0 0 1rem; } body.page-template-page-attributes .attributes-hub-prose__body p:last-child { margin-bottom: 0; } /* ---- 6. GB Stake Caps callout (cherry/5 bg + 4px cherry left-rail) -- */ body.page-template-page-attributes .attributes-hub-callout { background: color-mix(in oklab, var(--cherry) 5%, transparent); border-left: 4px solid var(--cherry); border-radius: 0; padding: 1.5rem; } body.page-template-page-attributes .attributes-hub-callout__h { margin: 0 !important; font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } body.page-template-page-attributes .attributes-hub-callout__paragraphs { margin-top: 1rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; font-size: 0.875rem; } body.page-template-page-attributes .attributes-hub-callout__paragraphs p { margin: 0 0 1rem; } body.page-template-page-attributes .attributes-hub-callout__paragraphs p:last-child { margin-bottom: 0; } /* ---- 7. Cross-discovery (3 cards) ------------------------------------ */ body.page-template-page-attributes .attributes-hub-cross__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { body.page-template-page-attributes .attributes-hub-cross__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.page-template-page-attributes .attributes-hub-cross__card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 1.5rem; text-decoration: none; color: inherit; transition: transform 200ms ease, border-color 200ms ease; } body.page-template-page-attributes .attributes-hub-cross__card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--cherry) 40%, transparent); } body.page-template-page-attributes .attributes-hub-cross__card-title { font-size: 1.125rem; font-weight: 700; color: var(--foreground); } body.page-template-page-attributes .attributes-hub-cross__card-body { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; } body.page-template-page-attributes .attributes-hub-cross__card-cta { margin-top: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cherry); font-weight: 700; } /* ---- 8. FAQ — reuses .faq-accordion -------------------------------- */ body.page-template-page-attributes .attributes-hub-faq .faq-accordion { margin-top: 0; } /* ---- 9. Byline — reuses .reviewer-bio--editor (same chrome) --------- */ body.page-template-page-attributes .reviewer-bio--editor { margin-top: 0; padding: 0; background: transparent; } body.page-template-page-attributes .reviewer-bio--editor .reviewer-bio__card { background: var(--white); border: 1px solid var(--border); border-radius: 0; padding: 17px; display: flex; align-items: flex-start; gap: 1rem; } body.page-template-page-attributes .reviewer-bio--editor .reviewer-bio__photo { width: 68px; height: 68px; flex-shrink: 0; border-radius: 9999px; overflow: hidden; background: linear-gradient(135deg, var(--cherry), var(--gold)); } body.page-template-page-attributes .reviewer-bio--editor .reviewer-bio__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9999px; } body.page-template-page-attributes .reviewer-bio--editor .reviewer-bio__body { flex: 1; min-width: 0; } body.page-template-page-attributes .reviewer-bio--editor .reviewer-bio__editor-heading { font-size: 1rem; font-weight: 700; } body.page-template-page-attributes .reviewer-bio--editor .reviewer-bio__headline { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted-foreground); } body.page-template-page-attributes .reviewer-bio--editor .reviewer-bio__text { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } body.page-template-page-attributes .reviewer-bio--editor .reviewer-bio__meta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; font-size: 0.75rem; } body.page-template-page-attributes .reviewer-bio--editor .reviewer-bio__meta-item, body.page-template-page-attributes .reviewer-bio--editor .reviewer-bio__meta-link { display: inline-flex; align-items: center; gap: 0.25rem; } body.page-template-page-attributes .attributes-hub-byline__disclosure { margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; } /* =========================================================================== STAGE 9.54 — /slots hub (archive-slot.php). CPT archive — WordPress auto-sets `body.post-type-archive-slot`; no body_class filter required (same pattern as themes hub at body.post-type-archive-theme). Modelled on the four other hubs. Unique to slots: - Dark charcoal hero (NO pinstripe; no gold) with Razor Shark featured-pick spotlight on the right - 4-pill SORT bar (Top Ranked / Newest / A–Z / Highest RTP) with client-side DOM re-order — the ONLY interactive control on the page besides FAQ - 5-col compact slot card grid (square 2px-charcoal-bordered

-style tiles with image + RoverScore badge + title overlay; letter fallback for slots without art) - "Featured This Month" editor's-pick row with sticker + italic note - "Or Browse by Category" 3-card cross-hub block (gradient cards, not flat) — distinct from the other hubs' flat cross-discovery =========================================================================== */ /* ---- Zero .site-main padding so the dark hero starts flush. --------- */ body.post-type-archive-slot .site-main { padding-top: 0; padding-bottom: 0; } /* ---- 1. Hero (full-bleed charcoal) ----------------------------------- */ body.post-type-archive-slot .slots-hub-hero { background: var(--charcoal); border-bottom: 1px solid var(--charcoal); color: var(--cream); } body.post-type-archive-slot .slots-hub-hero__inner { position: relative; max-width: 1280px; margin-inline: auto; padding: 1.25rem 1rem; } @media (min-width: 1024px) { body.post-type-archive-slot .slots-hub-hero__inner { padding: 1.5rem 2rem; min-height: 280px; display: flex; flex-direction: column; justify-content: center; } } /* Dark-tone breadcrumb. */ body.post-type-archive-slot .slots-hub-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0; } body.post-type-archive-slot .slots-hub-hero .breadcrumb { color: color-mix(in oklab, var(--cream) 70%, transparent); font-size: 0.75rem; } body.post-type-archive-slot .slots-hub-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.post-type-archive-slot .slots-hub-hero .breadcrumb li { display: inline; } body.post-type-archive-slot .slots-hub-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--cream) 55%, transparent); } body.post-type-archive-slot .slots-hub-hero .breadcrumb a { color: color-mix(in oklab, var(--cream) 70%, transparent); text-decoration: none; } body.post-type-archive-slot .slots-hub-hero .breadcrumb a:hover { color: var(--gold); } body.post-type-archive-slot .slots-hub-hero .breadcrumb [aria-current="page"] { color: var(--cream); font-weight: 500; } body.post-type-archive-slot .slots-hub-hero__grid { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } @media (min-width: 1024px) { body.post-type-archive-slot .slots-hub-hero__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; } } body.post-type-archive-slot .slots-hub-hero__grid > * { min-width: 0; max-width: 100%; } body.post-type-archive-slot .slots-hub-hero__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); font-weight: 700; } body.post-type-archive-slot .slots-hub-hero__title { margin: 0.5rem 0 0 !important; font-size: 22.5px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: var(--cream) !important; line-height: 1.1 !important; } @media (min-width: 1024px) { body.post-type-archive-slot .slots-hub-hero__title { font-size: 32px !important; } } body.post-type-archive-slot .slots-hub-hero__lede { margin: 1rem 0 0; max-width: 56rem; color: color-mix(in oklab, var(--cream) 85%, transparent); font-size: 0.95rem; line-height: 1.65; } /* Hero spotlight — Razor Shark featured-pick. Mirrors other hubs but slot-spotlight body adds an RTP/Max stat row. */ body.post-type-archive-slot .slots-hub-hero__spotlight { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-width: 0; max-width: 100%; } @media (min-width: 1024px) { body.post-type-archive-slot .slots-hub-hero__spotlight { align-items: flex-end; } } body.post-type-archive-slot .slots-hub-hero__spotlight-eyebrow { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; font-family: var(--font-sans); } body.post-type-archive-slot .slots-hub-hero__spotlight-rule { height: 2px; width: 1.5rem; background: var(--gold); } body.post-type-archive-slot .slots-hub-hero__spotlight-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cream); } body.post-type-archive-slot .slots-hub-hero__spotlight-sep { color: color-mix(in oklab, var(--cream) 60%, transparent); font-size: 10px; } body.post-type-archive-slot .slots-hub-hero__spotlight-sublabel { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--cream) 60%, transparent); } body.post-type-archive-slot .slots-hub-hero__spotlight-card { display: flex; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; background: var(--card); border: 2px solid var(--charcoal); border-radius: 0; text-decoration: none; color: inherit; transition: transform 200ms ease; } @media (min-width: 1024px) { body.post-type-archive-slot .slots-hub-hero__spotlight-card { max-width: 380px; } } body.post-type-archive-slot .slots-hub-hero__spotlight-card:hover { transform: translate(-2px, -2px); } body.post-type-archive-slot .slots-hub-hero__spotlight-media { position: relative; flex-shrink: 0; width: 120px; height: 80px; border: 2px solid var(--charcoal); overflow: hidden; margin: 10px; } body.post-type-archive-slot .slots-hub-hero__spotlight-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } body.post-type-archive-slot .slots-hub-hero__spotlight-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 10px 0; } body.post-type-archive-slot .slots-hub-hero__spotlight-title { font-family: var(--font-display); font-size: 10px; line-height: 1.12; font-weight: 700; color: var(--charcoal); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } body.post-type-archive-slot .slots-hub-hero__spotlight-sub { font-size: 12px; font-style: italic; color: var(--muted-foreground); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.post-type-archive-slot .slots-hub-hero__spotlight-stats { margin-top: 6px; display: flex; align-items: center; gap: 0.5rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--charcoal) 75%, transparent); } body.post-type-archive-slot .slots-hub-hero__spotlight-stat-label { color: var(--muted-foreground); } body.post-type-archive-slot .slots-hub-hero__spotlight-stat-value { font-weight: 700; color: var(--foreground); } body.post-type-archive-slot .slots-hub-hero__spotlight-cta-wrap { margin-top: 8px; } body.post-type-archive-slot .slots-hub-hero__spotlight-cta { display: inline-flex; align-items: center; gap: 4px; background: var(--cherry); color: var(--cream); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; border: 2px solid var(--charcoal); } /* ---- 2. Body container ----------------------------------------------- */ body.post-type-archive-slot .slots-hub-body { max-width: 880px; } body.post-type-archive-slot .slots-hub-section { padding-block: 2.5rem; } body.post-type-archive-slot .slots-hub-section__title { margin: 0 0 1.5rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } @media (max-width: 767px) { body.post-type-archive-slot .slots-hub-section__title { font-size: 20px !important; } } /* ---- Sort + Grid (catalogue) ---------------------------------------- */ body.post-type-archive-slot .slots-hub-catalogue { scroll-margin-top: 1.5rem; } body.post-type-archive-slot .slots-hub-catalogue__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; } body.post-type-archive-slot .slots-hub-catalogue__tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--cream-100); border: 1px solid var(--border); border-radius: 0; } body.post-type-archive-slot .slots-hub-catalogue__tab { padding: 8px 16px; border: 1px solid transparent; border-radius: 0; background: transparent; font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); cursor: pointer; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; } body.post-type-archive-slot .slots-hub-catalogue__tab:hover { color: var(--foreground); } body.post-type-archive-slot .slots-hub-catalogue__tab.is-active { background: var(--card); color: var(--cherry); border-color: color-mix(in oklab, var(--cherry) 40%, transparent); } body.post-type-archive-slot .slots-hub-catalogue__count { font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); } body.post-type-archive-slot .slots-hub-catalogue__grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; } @media (min-width: 640px) { body.post-type-archive-slot .slots-hub-catalogue__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { body.post-type-archive-slot .slots-hub-catalogue__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.post-type-archive-slot .slots-hub-catalogue__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---- Slot card (compact, square 2px-charcoal-bordered) ------------ */ body.post-type-archive-slot .slots-hub-card, body.page-template-page-best-slots .slots-hub-card, body.page-template-page-new-slots .slots-hub-card { display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--charcoal); border-radius: 0; text-decoration: none; color: inherit; overflow: hidden; transition: transform 150ms ease; } body.post-type-archive-slot a.slots-hub-card:hover, body.page-template-page-best-slots a.slots-hub-card:hover, body.page-template-page-new-slots a.slots-hub-card:hover { transform: translateY(-2px); } body.post-type-archive-slot .slots-hub-card--placeholder, body.page-template-page-best-slots .slots-hub-card--placeholder, body.page-template-page-new-slots .slots-hub-card--placeholder { cursor: default; } body.post-type-archive-slot .slots-hub-card__media, body.page-template-page-best-slots .slots-hub-card__media, body.page-template-page-new-slots .slots-hub-card__media { position: relative; aspect-ratio: 3 / 2; width: 100%; border-bottom: 2px solid var(--charcoal); display: flex; align-items: center; justify-content: center; overflow: hidden; } body.post-type-archive-slot .slots-hub-card__img, body.page-template-page-best-slots .slots-hub-card__img, body.page-template-page-new-slots .slots-hub-card__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; display: block; } /* Letter fallback for slots without art (Cleopatra, Fire Joker, etc.). Lov uses themed SVG icons in a 48×48 box; the visible crown silhouette renders ~29px ink-tall. User brief at 0.9.58: "not smaller than [Lov's icon scale]". 32px Inter 800 → ~28-29px ink, matching Lov's crown ink height almost exactly. (0.9.55 dropped to 26px = 19px ink which was smaller than Lov's icon. 0.9.54 was 36px = ~32px ink, slightly larger.) Scoped so single-theme .related-slot-card__media-fallback is untouched. */ body.post-type-archive-slot .slots-hub-card__fallback, body.page-template-page-best-slots .slots-hub-card__fallback, body.page-template-page-new-slots .slots-hub-card__fallback { font-size: 32px; line-height: 1; font-weight: 800; font-family: var(--font-display); color: color-mix(in oklab, var(--cream) 80%, transparent); } body.post-type-archive-slot .slots-hub-card__score, body.page-template-page-best-slots .slots-hub-card__score, body.page-template-page-new-slots .slots-hub-card__score { position: absolute; top: 4px; right: 4px; /* Live measurement at 0.9.57 (vs Lov /slots card grid): Lov score chip renders 40×32 with a brutalist 3px hard-offset shadow. Was 48×36 no-shadow — +8w/+4h vs Lov. */ width: 40px; height: 32px; background: var(--cherry); color: var(--cream); border: 2px solid var(--charcoal); border-radius: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13.6px; line-height: 1; z-index: 2; } /* Title strip — Lov renders this at 10px / line-height 1.15 / total strip 26px tall. WP was inheriting the global `h3 { font-size: 18px !important }` rule from style.css L145, stretching the strip to 59px and adding +32px to the whole card height. !important here beats the heading-scale override on body.post-type-archive-slot only. */ body.post-type-archive-slot .slots-hub-card__title, body.page-template-page-best-slots .slots-hub-card__title, body.page-template-page-new-slots .slots-hub-card__title { margin: 0 !important; padding: 8px !important; font-size: 10px !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--charcoal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } /* ---- 3. Featured This Month (Editor's Pick band) -------------------- */ body.post-type-archive-slot .slots-hub-featured { padding-block: 1rem; } body.post-type-archive-slot .slots-hub-featured__inner { background: color-mix(in oklab, var(--cream-100) 40%, transparent); border-radius: 0; padding: 2rem 1.5rem; } body.post-type-archive-slot .slots-hub-featured__eyebrow { display: flex; align-items: center; gap: 0.5rem; color: var(--cherry); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; } body.post-type-archive-slot .slots-hub-featured__h { margin: 0.5rem 0 0 !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } body.post-type-archive-slot .slots-hub-featured__lede { margin: 0.75rem 0 0; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; font-size: 0.9375rem; } body.post-type-archive-slot .slots-hub-featured__grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; } @media (min-width: 640px) { body.post-type-archive-slot .slots-hub-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { body.post-type-archive-slot .slots-hub-featured__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body.post-type-archive-slot .slots-hub-featured__item { position: relative; } body.post-type-archive-slot .slots-hub-featured__sticker { position: absolute; top: 8px; left: 8px; z-index: 5; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; background: var(--cherry); color: var(--white); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; border-radius: 4px; } body.post-type-archive-slot .slots-hub-featured__note { margin: 0.5rem 4px 0; font-size: 0.75rem; font-style: italic; color: var(--muted-foreground); line-height: 1.4; } body.post-type-archive-slot .slots-hub-featured__catalogue-link { margin: 2rem 0 0; } body.post-type-archive-slot .slots-hub-featured__catalogue-link a { font-size: 0.875rem; font-weight: 600; color: var(--cherry); text-decoration: none; } body.post-type-archive-slot .slots-hub-featured__catalogue-link a:hover { text-decoration: underline; } /* ---- 4. About catalogue (2-col prose) -------------------------------- */ body.post-type-archive-slot .slots-hub-about__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } @media (min-width: 1024px) { body.post-type-archive-slot .slots-hub-about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.post-type-archive-slot .slots-hub-about__grid p { margin: 0; } body.post-type-archive-slot .slots-hub-about__link { color: var(--cherry); font-weight: 600; text-decoration: none; } body.post-type-archive-slot .slots-hub-about__link:hover { text-decoration: underline; } /* ---- 5. FAQ ---------------------------------------------------------- */ body.post-type-archive-slot .slots-hub-faq .faq-accordion { margin-top: 0; } /* ---- 6. Browse by Category — 3 gradient cards ----------------------- */ body.post-type-archive-slot .slots-hub-browse__h { margin: 0 0 1rem !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; } body.post-type-archive-slot .slots-hub-browse__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { body.post-type-archive-slot .slots-hub-browse__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.post-type-archive-slot .slots-hub-browse__card { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--border); border-radius: 0; text-decoration: none; color: var(--cream); background-position: center; background-size: cover; } body.post-type-archive-slot .slots-hub-browse__card-overlay { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in oklab, var(--charcoal) 90%, transparent) 0%, color-mix(in oklab, var(--charcoal) 30%, transparent) 55%, transparent 100% ); pointer-events: none; } body.post-type-archive-slot .slots-hub-browse__card-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; color: var(--cream); } body.post-type-archive-slot .slots-hub-browse__card-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--cream); margin: 0; } body.post-type-archive-slot .slots-hub-browse__card-count { margin-top: 4px; font-size: 0.75rem; color: color-mix(in oklab, var(--cream) 90%, transparent); } body.post-type-archive-slot .slots-hub-browse__card-desc { margin: 0.5rem 0 0; font-size: 0.875rem; color: color-mix(in oklab, var(--cream) 90%, transparent); line-height: 1.5; } body.post-type-archive-slot .slots-hub-browse__card-cta { margin-top: 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; opacity: 0; transition: opacity 200ms ease; } body.post-type-archive-slot .slots-hub-browse__card:hover .slots-hub-browse__card-cta { opacity: 1; } /* ---- 7. Byline — reuses .reviewer-bio--editor frame chrome ---------- */ body.post-type-archive-slot .reviewer-bio--editor { margin-top: 0; padding: 0; background: transparent; } body.post-type-archive-slot .reviewer-bio--editor .reviewer-bio__card { background: var(--white); border: 1px solid var(--border); border-radius: 0; padding: 17px; display: flex; align-items: flex-start; gap: 1rem; } body.post-type-archive-slot .reviewer-bio--editor .reviewer-bio__photo { width: 68px; height: 68px; flex-shrink: 0; border-radius: 9999px; overflow: hidden; background: linear-gradient(135deg, var(--cherry), var(--gold)); } body.post-type-archive-slot .reviewer-bio--editor .reviewer-bio__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9999px; } body.post-type-archive-slot .reviewer-bio--editor .reviewer-bio__body { flex: 1; min-width: 0; } body.post-type-archive-slot .reviewer-bio--editor .reviewer-bio__editor-heading { font-size: 1rem; font-weight: 700; } body.post-type-archive-slot .reviewer-bio--editor .reviewer-bio__headline { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted-foreground); } body.post-type-archive-slot .reviewer-bio--editor .reviewer-bio__text { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } body.post-type-archive-slot .reviewer-bio--editor .reviewer-bio__meta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; font-size: 0.75rem; } body.post-type-archive-slot .reviewer-bio--editor .reviewer-bio__meta-item, body.post-type-archive-slot .reviewer-bio--editor .reviewer-bio__meta-link { display: inline-flex; align-items: center; gap: 0.25rem; } body.post-type-archive-slot .slots-hub-byline__disclosure { margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; } /* =========================================================================== STAGE 9.59 — /best-slots hub (page-best-slots.php). Body class `page-template-page-best-slots` injected by body_class filter. Sibling of /slots — the compact card chrome is shared via comma-joined selectors in Stage 9.54 (cards now apply on both body scopes). This Stage adds only the best-slots-specific pieces: - GOLD hero (charcoal text on gold) instead of charcoal hero - Catalogue grid (no sort pill bar — single static RoverScore order) - "How We Rank" 3-para prose block - byline disclosure + FAQ scope shared with /slots via .faq-accordion =========================================================================== */ /* Zero .site-main padding so the gold hero starts flush. */ body.page-template-page-best-slots .site-main { padding-top: 0; padding-bottom: 0; } /* ---- 1. Gold hero (mirrors /features gold hero chrome with the /slots-style spotlight card on the right). --------------------- */ body.page-template-page-best-slots .best-slots-hub-hero { background: var(--gold); border-bottom: 1px solid var(--gold); color: var(--charcoal); } body.page-template-page-best-slots .best-slots-hub-hero__inner { position: relative; max-width: 1280px; margin-inline: auto; padding: 1.25rem 1rem; } @media (min-width: 1024px) { body.page-template-page-best-slots .best-slots-hub-hero__inner { padding: 1.5rem 2rem; min-height: 280px; display: flex; flex-direction: column; justify-content: center; } } /* Gold-tone breadcrumb (charcoal on gold). */ body.page-template-page-best-slots .best-slots-hub-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0; } body.page-template-page-best-slots .best-slots-hub-hero .breadcrumb { color: color-mix(in oklab, var(--charcoal) 70%, transparent); font-size: 0.75rem; } body.page-template-page-best-slots .best-slots-hub-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-best-slots .best-slots-hub-hero .breadcrumb li { display: inline; } body.page-template-page-best-slots .best-slots-hub-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--charcoal) 55%, transparent); } body.page-template-page-best-slots .best-slots-hub-hero .breadcrumb a { color: color-mix(in oklab, var(--charcoal) 70%, transparent); text-decoration: none; } body.page-template-page-best-slots .best-slots-hub-hero .breadcrumb a:hover { color: var(--charcoal); } body.page-template-page-best-slots .best-slots-hub-hero .breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; } body.page-template-page-best-slots .best-slots-hub-hero__grid { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } @media (min-width: 1024px) { body.page-template-page-best-slots .best-slots-hub-hero__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; } } body.page-template-page-best-slots .best-slots-hub-hero__grid > * { min-width: 0; max-width: 100%; } body.page-template-page-best-slots .best-slots-hub-hero__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--charcoal); font-weight: 700; } body.page-template-page-best-slots .best-slots-hub-hero__title { margin: 0.5rem 0 0 !important; font-size: 22.5px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: var(--charcoal) !important; line-height: 1.1 !important; } @media (min-width: 1024px) { body.page-template-page-best-slots .best-slots-hub-hero__title { font-size: 32px !important; } } body.page-template-page-best-slots .best-slots-hub-hero__lede { margin: 1rem 0 0; max-width: 56rem; color: color-mix(in oklab, var(--charcoal) 85%, transparent); font-size: 0.95rem; line-height: 1.65; } /* Hero spotlight — Razor Shark Top-Rated Pick. Mirrors /slots spotlight chrome (white card on charcoal frame, 120×80 media well + body with RTP/Max stat row + Play Now CTA). Different eyebrow label only. */ body.page-template-page-best-slots .best-slots-hub-hero__spotlight { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-width: 0; max-width: 100%; } @media (min-width: 1024px) { body.page-template-page-best-slots .best-slots-hub-hero__spotlight { align-items: flex-end; } } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-eyebrow { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; font-family: var(--font-sans); } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-rule { height: 2px; width: 1.5rem; background: var(--cherry); } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--charcoal); } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-sep { color: color-mix(in oklab, var(--charcoal) 60%, transparent); font-size: 10px; } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-sublabel { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--charcoal) 60%, transparent); } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-card { display: flex; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; background: var(--card); border: 2px solid var(--charcoal); border-radius: 0; text-decoration: none; color: inherit; transition: transform 200ms ease; } @media (min-width: 1024px) { body.page-template-page-best-slots .best-slots-hub-hero__spotlight-card { max-width: 380px; } } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-card:hover { transform: translate(-2px, -2px); } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-media { position: relative; flex-shrink: 0; width: 120px; height: 80px; border: 2px solid var(--charcoal); overflow: hidden; margin: 10px; } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 10px 0; } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-title { font-family: var(--font-display); font-size: 10px; line-height: 1.12; font-weight: 700; color: var(--charcoal); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-sub { font-size: 12px; font-style: italic; color: var(--muted-foreground); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-stats { margin-top: 6px; display: flex; align-items: center; gap: 0.5rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--charcoal) 75%, transparent); } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-stat-label { color: var(--muted-foreground); } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-stat-value { font-weight: 700; color: var(--foreground); } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-cta-wrap { margin-top: 8px; } body.page-template-page-best-slots .best-slots-hub-hero__spotlight-cta { display: inline-flex; align-items: center; gap: 4px; background: var(--cherry); color: var(--cream); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; border: 2px solid var(--charcoal); } /* ---- 2-5. Body container -------------------------------------------- */ body.page-template-page-best-slots .best-slots-hub-body { max-width: 880px; } body.page-template-page-best-slots .best-slots-hub-section { padding-block: 2.5rem; } body.page-template-page-best-slots .best-slots-hub-section__title { margin: 0 0 1.5rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } @media (max-width: 767px) { body.page-template-page-best-slots .best-slots-hub-section__title { font-size: 20px !important; } } /* ---- 2. Catalogue grid — same 2/3/4/5-col as /slots, no sort pills - */ body.page-template-page-best-slots .best-slots-hub-catalogue__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; } @media (min-width: 640px) { body.page-template-page-best-slots .best-slots-hub-catalogue__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { body.page-template-page-best-slots .best-slots-hub-catalogue__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.page-template-page-best-slots .best-slots-hub-catalogue__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---- 3. How We Rank prose (2-col grid at lg, stacks below) ---------- */ body.page-template-page-best-slots .best-slots-hub-rank__body { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-best-slots .best-slots-hub-rank__body p { margin: 0 0 1rem; } body.page-template-page-best-slots .best-slots-hub-rank__body p:last-child { margin-bottom: 0; } body.page-template-page-best-slots .best-slots-hub-rank__link { color: var(--cherry); font-weight: 600; text-decoration: none; } body.page-template-page-best-slots .best-slots-hub-rank__link:hover { text-decoration: underline; } /* ---- 4. FAQ — reuses .faq-accordion -------------------------------- */ body.page-template-page-best-slots .best-slots-hub-faq .faq-accordion { margin-top: 0; } /* ---- 5. Byline — reuses .reviewer-bio--editor frame chrome ---------- */ body.page-template-page-best-slots .reviewer-bio--editor { margin-top: 0; padding: 0; background: transparent; } body.page-template-page-best-slots .reviewer-bio--editor .reviewer-bio__card { background: var(--white); border: 1px solid var(--border); border-radius: 0; padding: 17px; display: flex; align-items: flex-start; gap: 1rem; } body.page-template-page-best-slots .reviewer-bio--editor .reviewer-bio__photo { width: 68px; height: 68px; flex-shrink: 0; border-radius: 9999px; overflow: hidden; background: linear-gradient(135deg, var(--cherry), var(--gold)); } body.page-template-page-best-slots .reviewer-bio--editor .reviewer-bio__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9999px; } body.page-template-page-best-slots .reviewer-bio--editor .reviewer-bio__body { flex: 1; min-width: 0; } body.page-template-page-best-slots .reviewer-bio--editor .reviewer-bio__editor-heading { font-size: 1rem; font-weight: 700; } body.page-template-page-best-slots .reviewer-bio--editor .reviewer-bio__headline { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted-foreground); } body.page-template-page-best-slots .reviewer-bio--editor .reviewer-bio__text { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } body.page-template-page-best-slots .reviewer-bio--editor .reviewer-bio__meta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; font-size: 0.75rem; } body.page-template-page-best-slots .reviewer-bio--editor .reviewer-bio__meta-item, body.page-template-page-best-slots .reviewer-bio--editor .reviewer-bio__meta-link { display: inline-flex; align-items: center; gap: 0.25rem; } body.page-template-page-best-slots .best-slots-hub-byline__disclosure { margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; } /* =========================================================================== STAGE 9.60 — /new-slots hub (page-new-slots.php). Body class `page-template-page-new-slots` injected by body_class filter. Sibling of /best-slots — compact card chrome shared via 3rd-comma in the Stage 9.54/9.58 .slots-hub-card rules. This Stage adds only the new-slots-specific pieces: - CHERRY-RED hero (vs gold); cream-on-red text + GOLD eyebrow - Catalogue subtitle ("{N} slots — newest first") - "Why Play New Slots?" 3-para prose block - FAQ + Byline (Tony Sartori) reuse shared .faq-accordion + .reviewer-bio =========================================================================== */ body.page-template-page-new-slots .site-main { padding-top: 0; padding-bottom: 0; } /* ---- 1. Cherry-red hero --------------------------------------------- */ body.page-template-page-new-slots .new-slots-hub-hero { background: var(--cherry); border-bottom: 1px solid var(--cherry); color: var(--cream); } body.page-template-page-new-slots .new-slots-hub-hero__inner { position: relative; max-width: 1280px; margin-inline: auto; padding: 1.25rem 1rem; } @media (min-width: 1024px) { body.page-template-page-new-slots .new-slots-hub-hero__inner { padding: 1.5rem 2rem; min-height: 280px; display: flex; flex-direction: column; justify-content: center; } } /* Dark-tone breadcrumb (cream on red — same as attributes hub). */ body.page-template-page-new-slots .new-slots-hub-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0; } body.page-template-page-new-slots .new-slots-hub-hero .breadcrumb { color: color-mix(in oklab, var(--cream) 70%, transparent); font-size: 0.75rem; } body.page-template-page-new-slots .new-slots-hub-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-new-slots .new-slots-hub-hero .breadcrumb li { display: inline; } body.page-template-page-new-slots .new-slots-hub-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--cream) 55%, transparent); } body.page-template-page-new-slots .new-slots-hub-hero .breadcrumb a { color: color-mix(in oklab, var(--cream) 70%, transparent); text-decoration: none; } body.page-template-page-new-slots .new-slots-hub-hero .breadcrumb a:hover { color: var(--gold); } body.page-template-page-new-slots .new-slots-hub-hero .breadcrumb [aria-current="page"] { color: var(--cream); font-weight: 500; } body.page-template-page-new-slots .new-slots-hub-hero__grid { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } @media (min-width: 1024px) { body.page-template-page-new-slots .new-slots-hub-hero__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; } } body.page-template-page-new-slots .new-slots-hub-hero__grid > * { min-width: 0; max-width: 100%; } body.page-template-page-new-slots .new-slots-hub-hero__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); font-weight: 700; } body.page-template-page-new-slots .new-slots-hub-hero__title { margin: 0.5rem 0 0 !important; font-size: 22.5px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: var(--cream) !important; line-height: 1.1 !important; } @media (min-width: 1024px) { body.page-template-page-new-slots .new-slots-hub-hero__title { font-size: 32px !important; } } body.page-template-page-new-slots .new-slots-hub-hero__lede { margin: 1rem 0 0; max-width: 56rem; color: color-mix(in oklab, var(--cream) 85%, transparent); font-size: 0.95rem; line-height: 1.65; } /* Hero spotlight — Razor Shark "Latest Review · Editorial". Same chrome as best-slots/slots spotlight (white card on charcoal frame). */ body.page-template-page-new-slots .new-slots-hub-hero__spotlight { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-width: 0; max-width: 100%; } @media (min-width: 1024px) { body.page-template-page-new-slots .new-slots-hub-hero__spotlight { align-items: flex-end; } } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-eyebrow { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; font-family: var(--font-sans); } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-rule { height: 2px; width: 1.5rem; background: var(--gold); } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cream); } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-sep { color: color-mix(in oklab, var(--cream) 60%, transparent); font-size: 10px; } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-sublabel { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--cream) 60%, transparent); } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-card { display: flex; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; background: var(--card); border: 2px solid var(--charcoal); border-radius: 0; text-decoration: none; color: inherit; transition: transform 200ms ease; } @media (min-width: 1024px) { body.page-template-page-new-slots .new-slots-hub-hero__spotlight-card { max-width: 380px; } } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-card:hover { transform: translate(-2px, -2px); } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-media { position: relative; flex-shrink: 0; width: 120px; height: 80px; border: 2px solid var(--charcoal); overflow: hidden; margin: 10px; } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 10px 0; } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-title { font-family: var(--font-display); font-size: 10px; line-height: 1.12; font-weight: 700; color: var(--charcoal); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-sub { font-size: 12px; font-style: italic; color: var(--muted-foreground); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-stats { margin-top: 6px; display: flex; align-items: center; gap: 0.5rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--charcoal) 75%, transparent); } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-stat-label { color: var(--muted-foreground); } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-stat-value { font-weight: 700; color: var(--foreground); } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-cta-wrap { margin-top: 8px; } body.page-template-page-new-slots .new-slots-hub-hero__spotlight-cta { display: inline-flex; align-items: center; gap: 4px; background: var(--cherry); color: var(--cream); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; border: 2px solid var(--charcoal); } /* ---- 2-5. Body container -------------------------------------------- */ body.page-template-page-new-slots .new-slots-hub-body { max-width: 880px; } body.page-template-page-new-slots .new-slots-hub-section { padding-block: 2.5rem; } body.page-template-page-new-slots .new-slots-hub-section__title { margin: 0 0 0.75rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } @media (max-width: 767px) { body.page-template-page-new-slots .new-slots-hub-section__title { font-size: 20px !important; } } /* ---- 2. Catalogue grid (2/3/4/5 cols, gap 0.625rem; same as best-slots — card chrome is shared via .slots-hub-card scope). ------------- */ body.page-template-page-new-slots .new-slots-hub-catalogue__sub { margin: 0 0 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); } body.page-template-page-new-slots .new-slots-hub-catalogue__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; } @media (min-width: 640px) { body.page-template-page-new-slots .new-slots-hub-catalogue__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { body.page-template-page-new-slots .new-slots-hub-catalogue__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.page-template-page-new-slots .new-slots-hub-catalogue__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---- 3. Why Play New Slots? prose ----------------------------------- */ body.page-template-page-new-slots .new-slots-hub-why__body { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-new-slots .new-slots-hub-why__body p { margin: 0 0 1rem; } body.page-template-page-new-slots .new-slots-hub-why__body p:last-child { margin-bottom: 0; } body.page-template-page-new-slots .new-slots-hub-why__link { color: var(--cherry); font-weight: 600; text-decoration: none; } body.page-template-page-new-slots .new-slots-hub-why__link:hover { text-decoration: underline; } /* ---- 4. FAQ — reuses .faq-accordion -------------------------------- */ body.page-template-page-new-slots .new-slots-hub-faq .faq-accordion { margin-top: 0; } /* ---- 5. Byline — reuses .reviewer-bio--editor frame chrome ---------- */ body.page-template-page-new-slots .reviewer-bio--editor { margin-top: 0; padding: 0; background: transparent; } body.page-template-page-new-slots .reviewer-bio--editor .reviewer-bio__card { background: var(--white); border: 1px solid var(--border); border-radius: 0; padding: 17px; display: flex; align-items: flex-start; gap: 1rem; } body.page-template-page-new-slots .reviewer-bio--editor .reviewer-bio__photo { width: 68px; height: 68px; flex-shrink: 0; border-radius: 9999px; overflow: hidden; background: linear-gradient(135deg, var(--cherry), var(--gold)); } body.page-template-page-new-slots .reviewer-bio--editor .reviewer-bio__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9999px; } body.page-template-page-new-slots .reviewer-bio--editor .reviewer-bio__body { flex: 1; min-width: 0; } body.page-template-page-new-slots .reviewer-bio--editor .reviewer-bio__editor-heading { font-size: 1rem; font-weight: 700; } body.page-template-page-new-slots .reviewer-bio--editor .reviewer-bio__headline { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted-foreground); } body.page-template-page-new-slots .reviewer-bio--editor .reviewer-bio__text { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } body.page-template-page-new-slots .reviewer-bio--editor .reviewer-bio__meta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; font-size: 0.75rem; } body.page-template-page-new-slots .reviewer-bio--editor .reviewer-bio__meta-item, body.page-template-page-new-slots .reviewer-bio--editor .reviewer-bio__meta-link { display: inline-flex; align-items: center; gap: 0.25rem; } body.page-template-page-new-slots .new-slots-hub-byline__disclosure { margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.6; } /* =========================================================================== STAGE 9.61 — /about page (page-about.php). Editorial-prose page; no slot grid, no FAQ accordion. Scoped to body.page-template-page-about. Layout: cream page bg (no tinted hero), 880-narrow centered reading column. Sections: Hero (eyebrow + H1 + stamp) → Lead 3 paras → 4 Editorial Values pillar cards (2x2) → 6 numbered steps "How We Rate Slots" → Meet the Editorial Team (3-col cards with photos) → Responsible Gambling prose + 4-link list → Affiliate Disclosure → centered footer compliance line. =========================================================================== */ /* ---- Outer chrome (cream page bg, narrow centered column). ---------- */ body.page-template-page-about .about-page { max-width: 880px; color: var(--charcoal); } /* Hero — no tinted bg. Breadcrumb (added 0.9.73 mirroring refreshed Lov) + eyebrow + H1 + last-updated stamp on cream. The breadcrumb chrome matches the .legal-hero pattern (transparent wrap, ›-separated inline list, muted-foreground links cherry on hover). Hero pt reduced 3rem → 2.5rem to compensate for the added breadcrumb row (Lov went from pt-12 → pt-10 for the same reason). */ body.page-template-page-about .about-hero { padding-block: 2.5rem 2rem; } body.page-template-page-about .about-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0 0 1.5rem; } body.page-template-page-about .about-hero .breadcrumb { color: var(--muted-foreground); font-size: 0.75rem; } body.page-template-page-about .about-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-about .about-hero .breadcrumb li { display: inline; } body.page-template-page-about .about-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--charcoal) 40%, transparent); } body.page-template-page-about .about-hero .breadcrumb a { color: var(--muted-foreground); text-decoration: none; } body.page-template-page-about .about-hero .breadcrumb a:hover { color: var(--cherry); } body.page-template-page-about .about-hero .breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; } body.page-template-page-about .about-hero__eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cherry); } body.page-template-page-about .about-hero__title { margin: 0.75rem 0 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.05 !important; color: var(--charcoal) !important; } @media (min-width: 768px) { body.page-template-page-about .about-hero__title { font-size: 48px !important; } } body.page-template-page-about .about-hero__stamp { margin-top: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); } /* Section spacing. */ body.page-template-page-about .about-section { padding-block: 2rem; } body.page-template-page-about .about-section__title { margin: 0 0 0.75rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: var(--charcoal) !important; } body.page-template-page-about .about-section__intro { margin: 0 0 1.5rem; font-size: 0.9375rem; line-height: 1.65; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } /* Generic prose block (Lead + RG + AffDisc). */ body.page-template-page-about .about-prose { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-about .about-prose p { margin: 0 0 1rem; } body.page-template-page-about .about-prose p:last-child { margin-bottom: 0; } body.page-template-page-about .about-prose a { color: var(--cherry); font-weight: 600; text-decoration: none; } body.page-template-page-about .about-prose a:hover { text-decoration: underline; } /* ---- 3. Editorial Values pillars (2x2 cream cards, sharp corners). - */ body.page-template-page-about .about-values__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { body.page-template-page-about .about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.page-template-page-about .about-values__card { background: var(--cream); border: 2px solid var(--charcoal); border-radius: 0; padding: 1.25rem; transition: border-color 200ms ease; } @media (min-width: 768px) { body.page-template-page-about .about-values__card { padding: 1.5rem; } } body.page-template-page-about .about-values__card:hover { border-color: var(--cherry); } body.page-template-page-about .about-values__icon { width: 40px; height: 40px; object-fit: contain; } body.page-template-page-about .about-values__h { margin: 1rem 0 0 !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; color: var(--charcoal) !important; } body.page-template-page-about .about-values__body { margin: 0.5rem 0 0; font-size: 14px; line-height: 1.6; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } /* ---- 4. How We Rate — 6 numbered steps with cherry numerals. ------ */ body.page-template-page-about .about-rate__steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } body.page-template-page-about .about-rate__step { display: flex; gap: 1.25rem; align-items: flex-start; border-top: 2px solid color-mix(in oklab, var(--charcoal) 10%, transparent); padding-top: 1rem; } body.page-template-page-about .about-rate__step:first-child { border-top: 0; padding-top: 0; } body.page-template-page-about .about-rate__num { font-size: 1.875rem; font-weight: 800; color: var(--cherry); font-variant-numeric: tabular-nums; line-height: 1; flex-shrink: 0; width: 3.5rem; } @media (min-width: 768px) { body.page-template-page-about .about-rate__num { font-size: 2.25rem; } } body.page-template-page-about .about-rate__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--charcoal); } body.page-template-page-about .about-rate__body strong { font-weight: 700; } body.page-template-page-about .about-rate__cta { margin: 1.5rem 0 0; } body.page-template-page-about .about-rate__cta a { font-weight: 600; color: var(--cherry); text-decoration: none; } body.page-template-page-about .about-rate__cta a:hover { text-decoration: underline; } /* ---- 5. Meet the Editorial Team (3-col cards, same chrome). ------- */ body.page-template-page-about .about-team__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { body.page-template-page-about .about-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.page-template-page-about .about-team__card { background: var(--cream); border: 2px solid var(--charcoal); border-radius: 0; padding: 1.25rem; display: flex; flex-direction: column; transition: border-color 200ms ease; } @media (min-width: 768px) { body.page-template-page-about .about-team__card { padding: 1.5rem; } } body.page-template-page-about .about-team__card:hover { border-color: var(--cherry); } body.page-template-page-about .about-team__photo { width: 96px; height: 96px; border-radius: 9999px; overflow: hidden; background: linear-gradient(135deg, var(--cherry), var(--gold)); flex-shrink: 0; } body.page-template-page-about .about-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9999px; } body.page-template-page-about .about-team__name { margin: 1rem 0 0 !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; color: var(--charcoal) !important; } body.page-template-page-about .about-team__role { margin-top: 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); } body.page-template-page-about .about-team__bio { margin: 0.75rem 0 0; font-size: 13px; line-height: 1.6; color: color-mix(in oklab, var(--charcoal) 80%, transparent); flex: 1; } body.page-template-page-about .about-team__verified { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid color-mix(in oklab, var(--charcoal) 10%, transparent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 0.25rem; } body.page-template-page-about .about-team__verified svg { color: var(--cherry); flex-shrink: 0; } body.page-template-page-about .about-team__footer { margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } body.page-template-page-about .about-team__x { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); text-decoration: none; } body.page-template-page-about .about-team__x:hover { color: var(--cherry); } body.page-template-page-about .about-team__profile { font-size: 13px; font-weight: 600; color: var(--cherry); text-decoration: none; } body.page-template-page-about .about-team__profile:hover { text-decoration: underline; } /* ---- 6. Responsible Gambling support-org list. -------------------- */ body.page-template-page-about .about-rg__list { list-style: disc; padding-left: 1.25rem; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; line-height: 1.6; } body.page-template-page-about .about-rg__list strong { font-weight: 700; color: var(--charcoal); } body.page-template-page-about .about-rg__list a { color: var(--cherry); text-decoration: none; } body.page-template-page-about .about-rg__list a:hover { text-decoration: underline; } /* ---- 7. Affiliate Disclosure CTA --------------------------------- */ body.page-template-page-about .about-aff__cta { font-weight: 600; color: var(--cherry); text-decoration: none; } body.page-template-page-about .about-aff__cta:hover { text-decoration: underline; } /* ---- 8. Footer compliance line — centered single-paragraph strip. - */ body.page-template-page-about .about-footnote { padding: 0.5rem 0 3rem; } body.page-template-page-about .about-footnote p { margin: 0; text-align: center; font-size: 12px; line-height: 1.6; color: color-mix(in oklab, var(--charcoal) 70%, transparent); } body.page-template-page-about .about-footnote a { color: var(--cherry); text-decoration: none; } body.page-template-page-about .about-footnote a:hover { text-decoration: underline; } /* =========================================================================== STAGE 9.62 — /authors index (page-authors.php). Editorial Team directory. Scoped to body.page-template-page-authors. Card chrome is a COMPACT variant of About's Editorial Team cards — different enough (337×287 vs 271×544, centered photo + name + role, short specialism, no "Verified Editor" row, "Read profile →" CTA uppercase) that it lives under its own .authors-team__* family rather than extending .about-team__* via the comma-scope trick. Visual language still matches About (cream bg, 2px charcoal border, sharp corners, cherry hover) for consistency. =========================================================================== */ body.page-template-page-authors .authors-page { max-width: 880px; color: var(--charcoal); } /* ---- 1. Hero — breadcrumb + eyebrow + H1 + 1-line lede ------------- */ body.page-template-page-authors .authors-hero { padding-block: 2rem 1.5rem; } body.page-template-page-authors .authors-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0 0 1rem; } body.page-template-page-authors .authors-hero .breadcrumb { color: var(--muted-foreground); font-size: 0.75rem; } body.page-template-page-authors .authors-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-authors .authors-hero .breadcrumb li { display: inline; } body.page-template-page-authors .authors-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--charcoal) 40%, transparent); } body.page-template-page-authors .authors-hero .breadcrumb a { color: var(--muted-foreground); text-decoration: none; } body.page-template-page-authors .authors-hero .breadcrumb a:hover { color: var(--cherry); } body.page-template-page-authors .authors-hero .breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; } body.page-template-page-authors .authors-hero__eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cherry); } body.page-template-page-authors .authors-hero__title { margin: 0.75rem 0 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.05 !important; color: var(--charcoal) !important; } @media (min-width: 768px) { body.page-template-page-authors .authors-hero__title { font-size: 40px !important; } } body.page-template-page-authors .authors-hero__lede { margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.65; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } /* ---- 2. Intro / 4. Standards prose ---------------------------------- */ body.page-template-page-authors .authors-section { padding-block: 1.5rem; } body.page-template-page-authors .authors-section__title { margin: 0 0 0.75rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: var(--charcoal) !important; } body.page-template-page-authors .authors-intro p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-authors .authors-standards__body { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-authors .authors-standards__body p { margin: 0 0 1rem; } body.page-template-page-authors .authors-standards__body p:last-child { margin-bottom: 0; } body.page-template-page-authors .authors-standards__link { color: var(--cherry); font-weight: 600; text-decoration: none; } body.page-template-page-authors .authors-standards__link:hover { text-decoration: underline; } /* ---- 3. Team grid — 3-col compact cards (max-w-1100, gap 1.25rem). - */ body.page-template-page-authors .authors-team { padding: 1rem 1rem 1.5rem; } @media (min-width: 1024px) { body.page-template-page-authors .authors-team { padding: 1rem 2rem 1.5rem; } } body.page-template-page-authors .authors-team__grid { max-width: 1100px; margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { body.page-template-page-authors .authors-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Compact author card — cream bg, 2px charcoal border (matches About token palette), sharp corners, centered content. */ body.page-template-page-authors .authors-team__card { background: var(--cream); border: 2px solid var(--charcoal); border-radius: 0; padding: 1.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: border-color 200ms ease; } @media (min-width: 768px) { body.page-template-page-authors .authors-team__card { padding: 1.5rem; } } body.page-template-page-authors .authors-team__card:hover { border-color: var(--cherry); } body.page-template-page-authors .authors-team__card--placeholder { cursor: default; } body.page-template-page-authors .authors-team__photo { width: 109px; height: 109px; border-radius: 9999px; overflow: hidden; background: linear-gradient(135deg, var(--cherry), var(--gold)); flex-shrink: 0; margin-inline: auto; } body.page-template-page-authors .authors-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9999px; } body.page-template-page-authors .authors-team__name { margin: 1.25rem 0 0 !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; color: var(--charcoal) !important; text-align: center; } body.page-template-page-authors .authors-team__role { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); text-align: center; } body.page-template-page-authors .authors-team__bio { margin: 0.75rem 0 0; font-size: 13px; line-height: 1.6; color: color-mix(in oklab, var(--charcoal) 80%, transparent); text-align: center; flex: 1; } body.page-template-page-authors .authors-team__footer { margin-top: 1rem; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } body.page-template-page-authors .authors-team__x { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); text-decoration: none; } body.page-template-page-authors .authors-team__x:hover { color: var(--cherry); } body.page-template-page-authors .authors-team__cta { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cherry); text-decoration: none; } body.page-template-page-authors a.authors-team__cta:hover { text-decoration: underline; } /* Placeholder CTA — same colour + typography as the live link so the visual treatment is identical, but no hover affordance and no pointer cursor. Auto-promotes to once the matching slug is on $slotrover_published_author_profiles. */ body.page-template-page-authors .authors-team__cta--placeholder { cursor: default; opacity: 0.85; } /* =========================================================================== STAGE 9.63 — /authors/{slug}/ profile (author.php). Scoped to body.author-profile (injected via body_class filter inside author.php). Pure-prose editorial layout (no cards, no chips). 8 sections in a 1100-wide centered column: 1. Hero — 160 round photo + name + role + (optional) location + headline + UKGC Verified badge 2. Biography 3. Editorial Profile 4. Credentials & Career Timeline — cherry left-rail items 5. Review Methodology — bold-label + body items 6. Specialisations — bulleted list 7. Editorial Accountability — paragraph + /editorial-policy link 8. Connect & Verify — X handle link + verification statement =========================================================================== */ body.author-profile .author-profile-page { max-width: 1100px; } /* ---- Hero ---------------------------------------------------------- */ body.author-profile .author-profile-hero { padding-block: 2.5rem 1.5rem; } /* Muted breadcrumb (Home › Authors › {name}). */ body.author-profile .author-profile-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0; } body.author-profile .author-profile-hero .breadcrumb { color: var(--muted-foreground); font-size: 0.75rem; } body.author-profile .author-profile-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.author-profile .author-profile-hero .breadcrumb li { display: inline; } body.author-profile .author-profile-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--charcoal) 40%, transparent); } body.author-profile .author-profile-hero .breadcrumb a { color: var(--muted-foreground); text-decoration: none; } body.author-profile .author-profile-hero .breadcrumb a:hover { color: var(--cherry); } body.author-profile .author-profile-hero .breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; } body.author-profile .author-profile-hero__row { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; } @media (min-width: 640px) { body.author-profile .author-profile-hero__row { flex-direction: row; align-items: flex-start; } } body.author-profile .author-profile-hero__photo { width: 160px; height: 160px; border-radius: 9999px; overflow: hidden; background: linear-gradient(135deg, var(--cherry), var(--gold)); flex-shrink: 0; } body.author-profile .author-profile-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9999px; } body.author-profile .author-profile-hero__meta { flex: 1; min-width: 0; } body.author-profile .author-profile-hero__eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cherry); } body.author-profile .author-profile-hero__name { margin: 0.5rem 0 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.1 !important; color: var(--charcoal) !important; } @media (min-width: 1024px) { body.author-profile .author-profile-hero__name { font-size: 40px !important; } } body.author-profile .author-profile-hero__role { margin: 0.5rem 0 0; font-size: 1.0625rem; color: var(--muted-foreground); } body.author-profile .author-profile-hero__location { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); } body.author-profile .author-profile-hero__headline { margin: 1rem 0 0; font-size: 1rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.author-profile .author-profile-hero__badge { margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cherry); } /* ---- Sections ----------------------------------------------------- */ body.author-profile .author-profile-section { padding-block: 2rem; } body.author-profile .author-profile-section__title { margin: 0 0 1.25rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: var(--charcoal) !important; } @media (min-width: 1024px) { body.author-profile .author-profile-section__title { font-size: 28px !important; } } body.author-profile .author-profile-section__body { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.author-profile .author-profile-section__body p { margin: 0 0 1rem; } body.author-profile .author-profile-section__body p:last-child { margin-bottom: 0; } body.author-profile .author-profile-link { color: var(--cherry); text-decoration: none; } body.author-profile .author-profile-link:hover { text-decoration: underline; } body.author-profile .author-profile-link--strong { font-weight: 600; } /* ---- 4. Career Timeline (cherry left-rail items) ------------------ */ body.author-profile .author-profile-timeline { display: flex; flex-direction: column; gap: 1.25rem; } body.author-profile .author-profile-timeline__item { border-left: 2px solid color-mix(in oklab, var(--cherry) 40%, transparent); padding-left: 1rem; } body.author-profile .author-profile-timeline__label { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cherry); } body.author-profile .author-profile-timeline__body { margin: 0.375rem 0 0; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } /* ---- 5. Methodology (bold-label + body) --------------------------- */ body.author-profile .author-profile-methodology { display: flex; flex-direction: column; gap: 0.75rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.author-profile .author-profile-methodology p { margin: 0; } body.author-profile .author-profile-methodology strong { font-weight: 700; color: var(--foreground); } /* ---- 6. Specialisations bulleted list ----------------------------- */ body.author-profile .author-profile-specialisations { list-style: disc; padding-left: 1.5rem; margin: 0; display: flex; flex-direction: column; gap: 0.375rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.6; } /* =========================================================================== STAGE 9.64 — /how-we-rate page (page-how-we-rate.php). The RoverScore methodology. Scoped to body.page-template-page-how-we-rate. Layout: pillar/criterion/step cards (cream and white bg, 2px charcoal border, sharp corners, no shadow) + bands table + sticky sub-nav. 880px single-column body width throughout. Cherry weight badges. =========================================================================== */ body.page-template-page-how-we-rate .how-we-rate-page { max-width: 880px; margin: 0 auto; padding-inline: var(--container-padding-x); color: var(--charcoal); } @media (min-width: 768px) { body.page-template-page-how-we-rate .how-we-rate-page { padding-inline: var(--container-padding-x-md); } } /* ---- 1. Hero ---------------------------------------------------- */ body.page-template-page-how-we-rate .how-we-rate-hero { max-width: 880px; margin: 0 auto; padding-inline: var(--container-padding-x); } @media (min-width: 768px) { body.page-template-page-how-we-rate .how-we-rate-hero { padding-inline: var(--container-padding-x-md); } } body.page-template-page-how-we-rate .how-we-rate-hero__inner { padding-block: 2.5rem 1.5rem; } body.page-template-page-how-we-rate .how-we-rate-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0 0 1.5rem; } body.page-template-page-how-we-rate .how-we-rate-hero .breadcrumb { color: var(--muted-foreground); font-size: 0.75rem; } body.page-template-page-how-we-rate .how-we-rate-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-how-we-rate .how-we-rate-hero .breadcrumb li { display: inline; } body.page-template-page-how-we-rate .how-we-rate-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--charcoal) 40%, transparent); } body.page-template-page-how-we-rate .how-we-rate-hero .breadcrumb a { color: var(--muted-foreground); text-decoration: none; } body.page-template-page-how-we-rate .how-we-rate-hero .breadcrumb a:hover { color: var(--cherry); } body.page-template-page-how-we-rate .how-we-rate-hero .breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; } body.page-template-page-how-we-rate .how-we-rate-hero__eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cherry); } body.page-template-page-how-we-rate .how-we-rate-hero__title { margin: 0.75rem 0 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.05 !important; color: var(--charcoal) !important; } @media (min-width: 1024px) { body.page-template-page-how-we-rate .how-we-rate-hero__title { font-size: 48px !important; } } body.page-template-page-how-we-rate .how-we-rate-hero__lede { margin: 1.5rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 85%, transparent); } /* ---- 2. Sticky sub-nav ------------------------------------------ */ body.page-template-page-how-we-rate .how-we-rate-subnav { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--cream) 95%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 2px solid var(--charcoal); border-bottom: 2px solid var(--charcoal); } body.page-template-page-how-we-rate .how-we-rate-subnav__inner { max-width: 880px; margin: 0 auto; padding: 0.75rem var(--container-padding-x); display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: 0.5rem; font-size: 0.75rem; font-weight: 600; } @media (min-width: 768px) { body.page-template-page-how-we-rate .how-we-rate-subnav__inner { padding-inline: var(--container-padding-x-md); font-size: 0.875rem; } } body.page-template-page-how-we-rate .how-we-rate-subnav__link { color: var(--charcoal); text-decoration: none; transition: color 150ms ease; } body.page-template-page-how-we-rate .how-we-rate-subnav__link:hover { color: var(--cherry); } /* ---- 3-8. Section spacing + heads ------------------------------- */ body.page-template-page-how-we-rate .how-we-rate-section { padding-block: 2.5rem; } body.page-template-page-how-we-rate .how-we-rate-section__head { margin-bottom: 1.5rem; } body.page-template-page-how-we-rate .how-we-rate-section__title { margin: 0 !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: var(--charcoal) !important; /* scroll-margin so sticky sub-nav doesn't cover the heading on jump. */ scroll-margin-top: 5rem; } @media (min-width: 1024px) { body.page-template-page-how-we-rate .how-we-rate-section__title { font-size: 28px !important; } } body.page-template-page-how-we-rate .how-we-rate-section__sub { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 80%, transparent); } /* ---- Card chrome (criterion / pillar / step). Sharp brutalist 2px charcoal border, no radius, no shadow. ------------------- */ body.page-template-page-how-we-rate .how-we-rate-card { background: var(--cream); border: 2px solid var(--charcoal); border-radius: 0; padding: 1.5rem; } body.page-template-page-how-we-rate .how-we-rate-card--step { background: var(--white); } body.page-template-page-how-we-rate .how-we-rate-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } body.page-template-page-how-we-rate .how-we-rate-card__title-row { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; } body.page-template-page-how-we-rate .how-we-rate-card__icon { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; } body.page-template-page-how-we-rate .how-we-rate-card__h { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; color: var(--charcoal) !important; } body.page-template-page-how-we-rate .how-we-rate-card--criterion .how-we-rate-card__h { font-size: 20px !important; } body.page-template-page-how-we-rate .how-we-rate-card__weight { flex-shrink: 0; background: var(--cherry); color: var(--white); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.625rem; } body.page-template-page-how-we-rate .how-we-rate-card__step-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; } body.page-template-page-how-we-rate .how-we-rate-card__step-num { font-size: 1.5rem; font-weight: 900; color: var(--cherry); font-variant-numeric: tabular-nums; line-height: 1; } body.page-template-page-how-we-rate .how-we-rate-card__body { margin: 0; font-size: 0.875rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 85%, transparent); } /* ---- Framework grid + Pillars grid + Steps grid (2-col @ md+). - */ body.page-template-page-how-we-rate .how-we-rate-framework__grid, body.page-template-page-how-we-rate .how-we-rate-steps__grid, body.page-template-page-how-we-rate .how-we-rate-pillars__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { body.page-template-page-how-we-rate .how-we-rate-framework__grid, body.page-template-page-how-we-rate .how-we-rate-steps__grid, body.page-template-page-how-we-rate .how-we-rate-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- 4. Bands table ----------------------------------------------- */ body.page-template-page-how-we-rate .how-we-rate-bands__wrap { overflow-x: auto; border: 2px solid var(--charcoal); -webkit-overflow-scrolling: touch; } body.page-template-page-how-we-rate .how-we-rate-bands__table { width: 100%; display: table; border-collapse: collapse; font-size: 0.875rem; } body.page-template-page-how-we-rate .how-we-rate-bands__table thead { background: var(--charcoal); color: var(--white); } body.page-template-page-how-we-rate .how-we-rate-bands__table th { text-align: left; padding: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; } body.page-template-page-how-we-rate .how-we-rate-bands__table tbody tr { background: var(--white); } body.page-template-page-how-we-rate .how-we-rate-bands__table tbody tr.how-we-rate-bands__row--alt { background: var(--cream); } body.page-template-page-how-we-rate .how-we-rate-bands__table td { padding: 0.75rem; vertical-align: top; } body.page-template-page-how-we-rate .how-we-rate-bands__band { font-weight: 700; white-space: nowrap; } body.page-template-page-how-we-rate .how-we-rate-bands__band img { width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.375rem; } body.page-template-page-how-we-rate .how-we-rate-bands__range { font-family: var(--font-mono); white-space: nowrap; } body.page-template-page-how-we-rate .how-we-rate-bands__after { margin: 1.25rem 0 0; font-size: 0.875rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 80%, transparent); } /* ---- 7. Limits — cherry left-rail bullets ----------------------- */ body.page-template-page-how-we-rate .how-we-rate-limits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-how-we-rate .how-we-rate-limits li { padding-left: 1.25rem; border-left: 2px solid var(--cherry); } body.page-template-page-how-we-rate .how-we-rate-limits strong { font-weight: 700; color: var(--charcoal); } /* ---- 8. Disclosure --------------------------------------------- */ body.page-template-page-how-we-rate .how-we-rate-disclosure { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.65; } body.page-template-page-how-we-rate .how-we-rate-disclosure p { margin: 0 0 1rem; } body.page-template-page-how-we-rate .how-we-rate-disclosure p:last-child { margin-bottom: 0; } body.page-template-page-how-we-rate .how-we-rate-disclosure__cta { font-weight: 600; color: var(--cherry); text-decoration: none; } body.page-template-page-how-we-rate .how-we-rate-disclosure__cta:hover { text-decoration: underline; } /* ---- 9. Footer compliance line ---------------------------------- */ body.page-template-page-how-we-rate .how-we-rate-footnote { padding: 0.5rem 0 3rem; } body.page-template-page-how-we-rate .how-we-rate-footnote p { margin: 0; text-align: center; font-size: 0.75rem; line-height: 1.65; color: var(--muted-foreground); border-top: 2px solid var(--charcoal); padding-top: 1.5rem; } body.page-template-page-how-we-rate .how-we-rate-footnote a { color: var(--cherry); text-decoration: none; } body.page-template-page-how-we-rate .how-we-rate-footnote a:hover { text-decoration: underline; } /* =========================================================================== STAGE 9.66 — /editorial-policy page (page-editorial-policy.php). Scoped to body.page-template-page-editorial-policy. PURE PROSE layout — no cards, no pillars, no sticky sub-nav, no accordion. Narrow 880px article column with H2/H3 typographic hierarchy + ordered/bulleted lists. Footer compliance line inside the article with a top border. Namespace `.editorial-policy-*` confirmed collision-free at 0.9.66 discovery (vs Stage 61 `.how-we-rate-*` / Stage 62 `.uk-reg-section` / `.editorial-team-section` legacy blocks). =========================================================================== */ /* ---- 1. Hero ---------------------------------------------------- */ body.page-template-page-editorial-policy .editorial-policy-hero { max-width: 880px; margin: 0 auto; padding-inline: var(--container-padding-x); } @media (min-width: 768px) { body.page-template-page-editorial-policy .editorial-policy-hero { padding-inline: var(--container-padding-x-md); } } body.page-template-page-editorial-policy .editorial-policy-hero__inner { padding-block: 2.5rem 1.5rem; } body.page-template-page-editorial-policy .editorial-policy-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0 0 1.5rem; } body.page-template-page-editorial-policy .editorial-policy-hero .breadcrumb { color: var(--muted-foreground); font-size: 0.75rem; } body.page-template-page-editorial-policy .editorial-policy-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-editorial-policy .editorial-policy-hero .breadcrumb li { display: inline; } body.page-template-page-editorial-policy .editorial-policy-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--charcoal) 40%, transparent); } body.page-template-page-editorial-policy .editorial-policy-hero .breadcrumb a { color: var(--muted-foreground); text-decoration: none; } body.page-template-page-editorial-policy .editorial-policy-hero .breadcrumb a:hover { color: var(--cherry); } body.page-template-page-editorial-policy .editorial-policy-hero .breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; } body.page-template-page-editorial-policy .editorial-policy-hero__eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cherry); } body.page-template-page-editorial-policy .editorial-policy-hero__title { margin: 0.75rem 0 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.05 !important; color: var(--charcoal) !important; } @media (min-width: 1024px) { body.page-template-page-editorial-policy .editorial-policy-hero__title { font-size: 48px !important; } } body.page-template-page-editorial-policy .editorial-policy-hero__lede { margin: 1.5rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 85%, transparent); } /* ---- 2. Article body — narrow prose column --------------------- */ body.page-template-page-editorial-policy .editorial-policy-article { max-width: 880px; margin: 0 auto; padding-inline: var(--container-padding-x); padding-bottom: 4rem; color: var(--charcoal); } @media (min-width: 768px) { body.page-template-page-editorial-policy .editorial-policy-article { padding-inline: var(--container-padding-x-md); } } /* ---- 3. Typography (H2 with optional 36×36 icon, H3, P, lists) - */ body.page-template-page-editorial-policy .editorial-policy-h2 { margin: 3rem 0 1rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: var(--charcoal) !important; display: flex; align-items: center; gap: 0.75rem; scroll-margin-top: 1.5rem; } @media (min-width: 1024px) { body.page-template-page-editorial-policy .editorial-policy-h2 { font-size: 28px !important; } } body.page-template-page-editorial-policy .editorial-policy-h2__icon { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; } body.page-template-page-editorial-policy .editorial-policy-h3 { margin: 1.5rem 0 0.5rem !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; color: var(--charcoal) !important; } body.page-template-page-editorial-policy .editorial-policy-p { margin: 1rem 0 0; font-size: 15px; line-height: 1.7; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-editorial-policy .editorial-policy-p:first-child { margin-top: 0; } body.page-template-page-editorial-policy .editorial-policy-p a, body.page-template-page-editorial-policy .editorial-policy-list a { color: var(--cherry); text-decoration: none; } body.page-template-page-editorial-policy .editorial-policy-p a:hover, body.page-template-page-editorial-policy .editorial-policy-list a:hover { text-decoration: underline; } body.page-template-page-editorial-policy .editorial-policy-list { margin: 1rem 0 0; padding-left: 1.5rem; display: flex; flex-direction: column; } body.page-template-page-editorial-policy .editorial-policy-list--ol { list-style: decimal; gap: 0.75rem; } body.page-template-page-editorial-policy .editorial-policy-list--ul { list-style: disc; gap: 0.5rem; } body.page-template-page-editorial-policy .editorial-policy-list li { font-size: 15px; line-height: 1.7; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-editorial-policy .editorial-policy-list strong { font-weight: 700; color: var(--charcoal); } /* ---- 4. Footer compliance line (inside article, border-top) ---- */ body.page-template-page-editorial-policy .editorial-policy-footnote { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.75rem; line-height: 1.65; color: var(--muted-foreground); } body.page-template-page-editorial-policy .editorial-policy-footnote a { color: var(--cherry); text-decoration: none; } body.page-template-page-editorial-policy .editorial-policy-footnote a:hover { text-decoration: underline; } /* =========================================================================== STAGE 9.67 — /responsible-gambling page (page-responsible-gambling.php). Scoped to body.page-template-page-responsible-gambling. Long-form editorial article — 5 H2 sections, 13 H3 subheads, mixed prose + OL/UL. Two visual cards: (1) National Gambling Helpline callout INSIDE the Expert Support section (cream-100 bg, charcoal 2px border, oversized cherry phone number); (2) Page-bottom 18+ compliance card. No FAQ, no byline, no icons. Namespace `.rg-*` confirmed collision-free at 0.9.67 discovery vs main.css. `.about-rg__list` uses a different prefix on the /about page so no leak risk. SAFETY: the helpline number 0808 8020 133 inside .rg-callout__phone was independently verified at 0.9.67 against nhs.uk's gambling addiction page. Do not edit the number string without re-verifying. =========================================================================== */ /* ---- 1. Hero ---------------------------------------------------- */ body.page-template-page-responsible-gambling .rg-hero { max-width: 880px; margin: 0 auto; padding-inline: var(--container-padding-x); } @media (min-width: 768px) { body.page-template-page-responsible-gambling .rg-hero { padding-inline: var(--container-padding-x-md); } } body.page-template-page-responsible-gambling .rg-hero__inner { padding-block: 2.5rem 1.5rem; } body.page-template-page-responsible-gambling .rg-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0 0 1.5rem; } body.page-template-page-responsible-gambling .rg-hero .breadcrumb { color: var(--muted-foreground); font-size: 0.75rem; } body.page-template-page-responsible-gambling .rg-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-responsible-gambling .rg-hero .breadcrumb li { display: inline; } body.page-template-page-responsible-gambling .rg-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--charcoal) 40%, transparent); } body.page-template-page-responsible-gambling .rg-hero .breadcrumb a { color: var(--muted-foreground); text-decoration: none; } body.page-template-page-responsible-gambling .rg-hero .breadcrumb a:hover { color: var(--cherry); } body.page-template-page-responsible-gambling .rg-hero .breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; } body.page-template-page-responsible-gambling .rg-hero__eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cherry); } body.page-template-page-responsible-gambling .rg-hero__title { margin: 0.75rem 0 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.05 !important; color: var(--charcoal) !important; } @media (min-width: 1024px) { body.page-template-page-responsible-gambling .rg-hero__title { font-size: 48px !important; } } body.page-template-page-responsible-gambling .rg-hero__lede { margin: 1.5rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 85%, transparent); } /* ---- 2. Article column ----------------------------------------- */ body.page-template-page-responsible-gambling .rg-article { max-width: 880px; margin: 0 auto; padding-inline: var(--container-padding-x); padding-bottom: 4rem; color: var(--charcoal); } @media (min-width: 768px) { body.page-template-page-responsible-gambling .rg-article { padding-inline: var(--container-padding-x-md); } } /* ---- 3. Typography (H2 with charcoal top border, H3, P, lists) - */ body.page-template-page-responsible-gambling .rg-h2 { margin: 3rem 0 1rem !important; padding-top: 2rem !important; border-top: 2px solid var(--charcoal); font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: var(--charcoal) !important; scroll-margin-top: 1.5rem; } @media (min-width: 1024px) { body.page-template-page-responsible-gambling .rg-h2 { font-size: 28px !important; } } body.page-template-page-responsible-gambling .rg-h3 { margin: 1.5rem 0 0.5rem !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; color: var(--charcoal) !important; } body.page-template-page-responsible-gambling .rg-p { margin: 1rem 0 0; font-size: 15px; line-height: 1.7; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-responsible-gambling .rg-p a, body.page-template-page-responsible-gambling .rg-list a { color: var(--cherry); text-decoration: none; } body.page-template-page-responsible-gambling .rg-p a:hover, body.page-template-page-responsible-gambling .rg-list a:hover { text-decoration: underline; } body.page-template-page-responsible-gambling .rg-list { margin: 1rem 0 0; padding-left: 1.5rem; display: flex; flex-direction: column; } body.page-template-page-responsible-gambling .rg-list--ol { list-style: decimal; gap: 0.75rem; } body.page-template-page-responsible-gambling .rg-list--ul { list-style: disc; gap: 0.5rem; } body.page-template-page-responsible-gambling .rg-list li { font-size: 15px; line-height: 1.7; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-responsible-gambling .rg-list strong { font-weight: 700; color: var(--charcoal); } /* ---- 4. National Gambling Helpline callout (SAFETY-CRITICAL) --- */ body.page-template-page-responsible-gambling .rg-callout { margin: 2rem 0 0; padding: 1.75rem 1.5rem; background: var(--cream-100); border: 2px solid var(--charcoal); text-align: center; } body.page-template-page-responsible-gambling .rg-callout__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--charcoal); } body.page-template-page-responsible-gambling .rg-callout__phone { display: inline-block; margin-top: 0.5rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(28px, 5vw, 42px); font-weight: 800; line-height: 1.1; color: var(--cherry); text-decoration: none; letter-spacing: -0.01em; } body.page-template-page-responsible-gambling .rg-callout__phone:hover { color: var(--cherry-dark); text-decoration: underline; } body.page-template-page-responsible-gambling .rg-callout__note { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); } /* ---- 5. 18+ compliance footer card ----------------------------- */ body.page-template-page-responsible-gambling .rg-compliance { margin: 4rem 0 0; padding: 1.5rem; background: var(--cream-100); border: 2px solid var(--charcoal); } body.page-template-page-responsible-gambling .rg-compliance__body { margin: 0; font-size: 0.8125rem; line-height: 1.65; color: var(--charcoal); } body.page-template-page-responsible-gambling .rg-compliance__body a { color: var(--cherry); text-decoration: none; } body.page-template-page-responsible-gambling .rg-compliance__body a:hover { text-decoration: underline; } /* =========================================================================== STAGE 9.68 — /affiliate-disclosure page (page-affiliate-disclosure.php). Scoped to body.page-template-page-affiliate-disclosure. Long-form prose article. 2 intro paragraphs + 7 H2 sections, 5 H3 subheads, multiple OL/UL lists. Two H2s have 36x36 icons (Editorial Independence, Regulatory Compliance). No FAQ, no byline, no cards. Namespace `.affiliate-disclosure-*` confirmed collision-free at 0.9.68 discovery — `.disclosure-footer` is the only existing `.disclosure-*` rule and uses an unrelated word-boundary suffix, no leak risk. NB: `.ad-*` would also be CSS-clean but routinely blocked by adblock filter lists, so we use the longer namespace for safety. =========================================================================== */ /* ---- 1. Hero ---------------------------------------------------- */ body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero { max-width: 880px; margin: 0 auto; padding-inline: var(--container-padding-x); } @media (min-width: 768px) { body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero { padding-inline: var(--container-padding-x-md); } } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero__inner { padding-block: 2.5rem 1.5rem; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0 0 1.5rem; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero .breadcrumb { color: var(--muted-foreground); font-size: 0.75rem; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero .breadcrumb li { display: inline; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--charcoal) 40%, transparent); } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero .breadcrumb a { color: var(--muted-foreground); text-decoration: none; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero .breadcrumb a:hover { color: var(--cherry); } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero .breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero__eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cherry); } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero__title { margin: 0.75rem 0 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.05 !important; color: var(--charcoal) !important; } @media (min-width: 1024px) { body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero__title { font-size: 48px !important; } } body.page-template-page-affiliate-disclosure .affiliate-disclosure-hero__lede { margin: 1.5rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 85%, transparent); } /* ---- 2. Article column ----------------------------------------- */ body.page-template-page-affiliate-disclosure .affiliate-disclosure-article { max-width: 880px; margin: 0 auto; padding-inline: var(--container-padding-x); padding-bottom: 4rem; color: var(--charcoal); } @media (min-width: 768px) { body.page-template-page-affiliate-disclosure .affiliate-disclosure-article { padding-inline: var(--container-padding-x-md); } } /* ---- 3. Typography (H2 with optional 36x36 icon, H3, P, lists) - */ body.page-template-page-affiliate-disclosure .affiliate-disclosure-h2 { margin: 3rem 0 1rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: var(--charcoal) !important; display: flex; align-items: center; gap: 0.75rem; scroll-margin-top: 1.5rem; } @media (min-width: 1024px) { body.page-template-page-affiliate-disclosure .affiliate-disclosure-h2 { font-size: 28px !important; } } body.page-template-page-affiliate-disclosure .affiliate-disclosure-h2__icon { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-h3 { margin: 1.5rem 0 0.5rem !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; color: var(--charcoal) !important; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-p { margin: 1rem 0 0; font-size: 15px; line-height: 1.7; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-affiliate-disclosure .affiliate-disclosure-p:first-child { margin-top: 0; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-p a, body.page-template-page-affiliate-disclosure .affiliate-disclosure-list a { color: var(--cherry); text-decoration: none; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-p a:hover, body.page-template-page-affiliate-disclosure .affiliate-disclosure-list a:hover { text-decoration: underline; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-list { margin: 1rem 0 0; padding-left: 1.5rem; display: flex; flex-direction: column; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-list--ol { list-style: decimal; gap: 0.75rem; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-list--ul { list-style: disc; gap: 0.5rem; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-list li { font-size: 15px; line-height: 1.7; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-affiliate-disclosure .affiliate-disclosure-list strong { font-weight: 700; color: var(--charcoal); } /* ---- 4. Footer compliance line --------------------------------- */ body.page-template-page-affiliate-disclosure .affiliate-disclosure-footnote { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.75rem; line-height: 1.65; color: var(--muted-foreground); } body.page-template-page-affiliate-disclosure .affiliate-disclosure-footnote a { color: var(--cherry); text-decoration: none; } body.page-template-page-affiliate-disclosure .affiliate-disclosure-footnote a:hover { text-decoration: underline; } /* =========================================================================== STAGE 9.69 — /privacy, /terms, /contact pages (3 templates). Scoped via COMMA-JOINED body class selectors so the shared prose chrome stays DRY without leaking to any other page: body.page-template-page-privacy, body.page-template-page-terms, body.page-template-page-contact. Shared `.legal-*` class namespace — confirmed collision-free at 0.9.69 discovery (.legal-/.privacy-/.terms-/.contact-/.pp-/.tos- all reported 0 matches against existing main.css). Layout: hero (breadcrumb + eyebrow + H1 + last-updated stamp + lede) + 880px article column + numbered H2 sections + footer compliance line. /privacy/ adds a 2-column legal-basis table inside section 4. No icons, no FAQ accordion, no byline, no cards. =========================================================================== */ /* ---- 1. Hero ---------------------------------------------------- */ body.page-template-page-privacy .legal-hero, body.page-template-page-terms .legal-hero, body.page-template-page-contact .legal-hero, body.page-template-page-cookies .legal-hero { max-width: 880px; margin: 0 auto; padding-inline: var(--container-padding-x); } @media (min-width: 768px) { body.page-template-page-privacy .legal-hero, body.page-template-page-terms .legal-hero, body.page-template-page-contact .legal-hero, body.page-template-page-cookies .legal-hero { padding-inline: var(--container-padding-x-md); } } body.page-template-page-privacy .legal-hero__inner, body.page-template-page-terms .legal-hero__inner, body.page-template-page-contact .legal-hero__inner, body.page-template-page-cookies .legal-hero__inner { padding-block: 2.5rem 1.5rem; } body.page-template-page-privacy .legal-hero .breadcrumb-wrap, body.page-template-page-terms .legal-hero .breadcrumb-wrap, body.page-template-page-contact .legal-hero .breadcrumb-wrap, body.page-template-page-cookies .legal-hero .breadcrumb-wrap { background: transparent; border: 0; padding: 0; margin: 0 0 1.5rem; } body.page-template-page-privacy .legal-hero .breadcrumb, body.page-template-page-terms .legal-hero .breadcrumb, body.page-template-page-contact .legal-hero .breadcrumb, body.page-template-page-cookies .legal-hero .breadcrumb { color: var(--muted-foreground); font-size: 0.75rem; } body.page-template-page-privacy .legal-hero .breadcrumb ol, body.page-template-page-terms .legal-hero .breadcrumb ol, body.page-template-page-contact .legal-hero .breadcrumb ol, body.page-template-page-cookies .legal-hero .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } body.page-template-page-privacy .legal-hero .breadcrumb li, body.page-template-page-terms .legal-hero .breadcrumb li, body.page-template-page-contact .legal-hero .breadcrumb li, body.page-template-page-cookies .legal-hero .breadcrumb li { display: inline; } body.page-template-page-privacy .legal-hero .breadcrumb li + li::before, body.page-template-page-terms .legal-hero .breadcrumb li + li::before, body.page-template-page-contact .legal-hero .breadcrumb li + li::before, body.page-template-page-cookies .legal-hero .breadcrumb li + li::before { content: "›"; margin: 0 0.375rem; color: color-mix(in oklab, var(--charcoal) 40%, transparent); } body.page-template-page-privacy .legal-hero .breadcrumb a, body.page-template-page-terms .legal-hero .breadcrumb a, body.page-template-page-contact .legal-hero .breadcrumb a, body.page-template-page-cookies .legal-hero .breadcrumb a { color: var(--muted-foreground); text-decoration: none; } body.page-template-page-privacy .legal-hero .breadcrumb a:hover, body.page-template-page-terms .legal-hero .breadcrumb a:hover, body.page-template-page-contact .legal-hero .breadcrumb a:hover, body.page-template-page-cookies .legal-hero .breadcrumb a:hover { color: var(--cherry); } body.page-template-page-privacy .legal-hero .breadcrumb [aria-current="page"], body.page-template-page-terms .legal-hero .breadcrumb [aria-current="page"], body.page-template-page-contact .legal-hero .breadcrumb [aria-current="page"], body.page-template-page-cookies .legal-hero .breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; } body.page-template-page-privacy .legal-hero__eyebrow, body.page-template-page-terms .legal-hero__eyebrow, body.page-template-page-contact .legal-hero__eyebrow, body.page-template-page-cookies .legal-hero__eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cherry); } body.page-template-page-privacy .legal-hero__title, body.page-template-page-terms .legal-hero__title, body.page-template-page-contact .legal-hero__title, body.page-template-page-cookies .legal-hero__title { margin: 0.75rem 0 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.05 !important; color: var(--charcoal) !important; } @media (min-width: 1024px) { body.page-template-page-privacy .legal-hero__title, body.page-template-page-terms .legal-hero__title, body.page-template-page-contact .legal-hero__title, body.page-template-page-cookies .legal-hero__title { font-size: 48px !important; } } body.page-template-page-privacy .legal-hero__updated, body.page-template-page-terms .legal-hero__updated, body.page-template-page-contact .legal-hero__updated, body.page-template-page-cookies .legal-hero__updated { margin: 0.75rem 0 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); } body.page-template-page-privacy .legal-hero__lede, body.page-template-page-terms .legal-hero__lede, body.page-template-page-contact .legal-hero__lede, body.page-template-page-cookies .legal-hero__lede { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 85%, transparent); } /* ---- 2. Article column ----------------------------------------- */ body.page-template-page-privacy .legal-article, body.page-template-page-terms .legal-article, body.page-template-page-contact .legal-article, body.page-template-page-cookies .legal-article { max-width: 880px; margin: 0 auto; padding-inline: var(--container-padding-x); padding-bottom: 4rem; color: var(--charcoal); } @media (min-width: 768px) { body.page-template-page-privacy .legal-article, body.page-template-page-terms .legal-article, body.page-template-page-contact .legal-article, body.page-template-page-cookies .legal-article { padding-inline: var(--container-padding-x-md); } } /* ---- 3. Typography --------------------------------------------- */ body.page-template-page-privacy .legal-h2, body.page-template-page-terms .legal-h2, body.page-template-page-contact .legal-h2, body.page-template-page-cookies .legal-h2 { margin: 3rem 0 1rem !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: var(--charcoal) !important; scroll-margin-top: 1.5rem; } @media (min-width: 1024px) { body.page-template-page-privacy .legal-h2, body.page-template-page-terms .legal-h2, body.page-template-page-contact .legal-h2, body.page-template-page-cookies .legal-h2 { font-size: 28px !important; } } body.page-template-page-privacy .legal-p, body.page-template-page-terms .legal-p, body.page-template-page-contact .legal-p, body.page-template-page-cookies .legal-p { margin: 1rem 0 0; font-size: 15px; line-height: 1.7; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-privacy .legal-p:first-child, body.page-template-page-terms .legal-p:first-child, body.page-template-page-contact .legal-p:first-child, body.page-template-page-cookies .legal-p:first-child { margin-top: 0; } body.page-template-page-privacy .legal-p a, body.page-template-page-terms .legal-p a, body.page-template-page-contact .legal-p a, body.page-template-page-cookies .legal-p a, body.page-template-page-privacy .legal-list a, body.page-template-page-terms .legal-list a, body.page-template-page-contact .legal-list a, body.page-template-page-cookies .legal-list a { color: var(--cherry); text-decoration: none; } body.page-template-page-privacy .legal-p a:hover, body.page-template-page-terms .legal-p a:hover, body.page-template-page-contact .legal-p a:hover, body.page-template-page-cookies .legal-p a:hover, body.page-template-page-privacy .legal-list a:hover, body.page-template-page-terms .legal-list a:hover, body.page-template-page-contact .legal-list a:hover, body.page-template-page-cookies .legal-list a:hover { text-decoration: underline; } body.page-template-page-privacy .legal-list, body.page-template-page-terms .legal-list, body.page-template-page-contact .legal-list, body.page-template-page-cookies .legal-list { margin: 1rem 0 0; padding-left: 1.5rem; display: flex; flex-direction: column; } body.page-template-page-privacy .legal-list--ol, body.page-template-page-terms .legal-list--ol, body.page-template-page-contact .legal-list--ol, body.page-template-page-cookies .legal-list--ol { list-style: decimal; gap: 0.75rem; } body.page-template-page-privacy .legal-list--ul, body.page-template-page-terms .legal-list--ul, body.page-template-page-contact .legal-list--ul, body.page-template-page-cookies .legal-list--ul { list-style: disc; gap: 0.5rem; } body.page-template-page-privacy .legal-list li, body.page-template-page-terms .legal-list li, body.page-template-page-contact .legal-list li, body.page-template-page-cookies .legal-list li { font-size: 15px; line-height: 1.7; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-privacy .legal-list strong, body.page-template-page-terms .legal-list strong, body.page-template-page-contact .legal-list strong, body.page-template-page-cookies .legal-list strong, body.page-template-page-privacy .legal-p strong, body.page-template-page-terms .legal-p strong, body.page-template-page-contact .legal-p strong, body.page-template-page-cookies .legal-p strong { font-weight: 700; color: var(--charcoal); } /* ---- 4. Privacy legal-basis table ------------------------------ */ /* Override the global `table { display: block }` so the legal-basis table actually renders as a 2-column table on /privacy/. */ body.page-template-page-privacy .legal-table-wrap { margin: 1.5rem 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } body.page-template-page-privacy .legal-table { display: table !important; width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; } body.page-template-page-privacy .legal-table th, body.page-template-page-privacy .legal-table td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-privacy .legal-table th { background: var(--cream-100); font-weight: 700; color: var(--charcoal); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; } /* ---- 5. Footer compliance line --------------------------------- */ body.page-template-page-privacy .legal-footnote, body.page-template-page-terms .legal-footnote, body.page-template-page-contact .legal-footnote, body.page-template-page-cookies .legal-footnote { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.75rem; line-height: 1.65; color: var(--muted-foreground); } body.page-template-page-privacy .legal-footnote a, body.page-template-page-terms .legal-footnote a, body.page-template-page-contact .legal-footnote a, body.page-template-page-cookies .legal-footnote a { color: var(--cherry); text-decoration: none; } body.page-template-page-privacy .legal-footnote a:hover, body.page-template-page-terms .legal-footnote a:hover, body.page-template-page-contact .legal-footnote a:hover, body.page-template-page-cookies .legal-footnote a:hover { text-decoration: underline; } /* =========================================================================== STAGE 9.70 — /cookies page-specific card grid. Scoped ONLY to body.page-template-page-cookies. Privacy/terms/contact do not use .legal-card* classes. Lov renders #types as a responsive 2-column grid of 4 CookieCard components (not a real HTML table). Each card has a title + optional badge, description, and bullet list. Category 1 (Strictly Necessary) carries the `--active` accent (cherry border + cream-100 bg). The Stage 9.69 shared `.legal-*` chrome (hero/article/h2/h3/p/list/ footnote) was extended earlier in this stage to include the cookies body class via comma-joined scope — 35 of 35 contact selectors paired with a matching cookies selector. =========================================================================== */ body.page-template-page-cookies .legal-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0 0; } @media (min-width: 768px) { body.page-template-page-cookies .legal-cards { grid-template-columns: 1fr 1fr; gap: 1.25rem; } } body.page-template-page-cookies .legal-card { display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.5rem; background: var(--white); border: 1px solid var(--border); } body.page-template-page-cookies .legal-card--active { background: var(--cream-100); border-color: var(--cherry); border-width: 2px; } body.page-template-page-cookies .legal-card__title { margin: 0 0 0.5rem !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; color: var(--charcoal) !important; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } body.page-template-page-cookies .legal-card__title-text { flex: 1 1 auto; } body.page-template-page-cookies .legal-card__badge { display: inline-block; padding: 0.25rem 0.5rem; background: var(--cherry); color: var(--white); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; } body.page-template-page-cookies .legal-card__badge--muted { background: color-mix(in oklab, var(--charcoal) 10%, transparent); color: var(--muted-foreground); } body.page-template-page-cookies .legal-card__desc { margin: 0.25rem 0 0; font-size: 14px; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 85%, transparent); } body.page-template-page-cookies .legal-card__desc a { color: var(--cherry); text-decoration: none; } body.page-template-page-cookies .legal-card__desc a:hover { text-decoration: underline; } body.page-template-page-cookies .legal-card__list { margin: 0.75rem 0 0; padding-left: 1.25rem; list-style: disc; display: flex; flex-direction: column; gap: 0.375rem; } body.page-template-page-cookies .legal-card__list li { font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--foreground) 80%, transparent); } /* --------------------------------------------------------------------------- 58b. Featured-month placeholder — non-clickable filler card Keeps the 4-up grid full when fewer than 4 featured slot posts exist. --------------------------------------------------------------------------- */ .featured-month-card--placeholder .slot-card { cursor: default; } .slot-card--placeholder { opacity: 0.55; pointer-events: none; } .slot-card--placeholder .slot-card__title--placeholder { color: color-mix(in oklab, var(--charcoal) 55%, transparent); font-style: italic; font-weight: 600; } .slot-card--placeholder .slot-card__provider--placeholder { min-height: 1.2em; } /* --------------------------------------------------------------------------- 90. Hub pages (taxonomy-slot_category.php) — unified landing for every slot_category term (virtual / container / leaf). Replaces the per-page styles that lived in 7 separate page templates. --------------------------------------------------------------------------- */ .hub-page { background: var(--cream); color: var(--charcoal); } .hub-hero { border-bottom: 2px solid var(--charcoal); padding: 0; } .hub-hero__inner { max-width: 1280px; margin-inline: auto; padding: 3.5rem 1rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 1024px) { .hub-hero__inner { grid-template-columns: 1.3fr 1fr; gap: 3.5rem; padding: 5rem 2rem; } } .hub-hero__eyebrow { display: inline-block; padding: 0.25rem 0.625rem; background: var(--felt); color: var(--cream); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; } .hub-hero__title { margin: 0 0 1rem; font-size: clamp(32px, 5.5vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; } .hub-hero__lede { margin: 0; max-width: 60ch; font-size: 1.0625rem; line-height: 1.6; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } .hub-hero__promo .slot-card { max-width: 380px; margin-inline: auto; } .hub-grid { background: var(--cream); } .hub-grid__inner { max-width: 1280px; margin-inline: auto; padding: 3rem 1rem; } @media (min-width: 1024px) { .hub-grid__inner { padding: 4rem 2rem; } } .hub-grid__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; font-size: 0.875rem; font-weight: 600; color: color-mix(in oklab, var(--charcoal) 70%, transparent); text-transform: uppercase; letter-spacing: 0.06em; } .hub-grid__cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; } @media (min-width: 640px) { .hub-grid__cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .hub-grid__cards { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .hub-grid__cards { grid-template-columns: repeat(4, 1fr); } } .hub-grid__cards .slot-card { height: 100%; display: flex; flex-direction: column; } .hub-grid__cards .slot-card .slot-card__body { flex: 1 1 auto; display: flex; flex-direction: column; } .hub-grid__cards .slot-card .slot-card__stats { margin-top: auto; } .hub-grid__empty { padding: 3rem 1rem; text-align: center; border: 2px dashed color-mix(in oklab, var(--charcoal) 30%, transparent); background: var(--cream-100); color: color-mix(in oklab, var(--charcoal) 70%, transparent); } .hub-term-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem 1.25rem; background: var(--cream); border: 2px solid var(--charcoal); text-decoration: none; color: var(--charcoal); transition: transform 0.12s ease; min-height: 96px; } .hub-term-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--charcoal); } .hub-term-card__name { font-size: 1.0625rem; font-weight: 800; } .hub-term-card__count { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in oklab, var(--charcoal) 60%, transparent); } .hub-pagination { margin-top: 2.5rem; display: flex; justify-content: center; gap: 0.375rem; flex-wrap: wrap; } .hub-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.75rem; border: 2px solid var(--charcoal); background: var(--cream); color: var(--charcoal); font-weight: 700; text-decoration: none; } .hub-pagination .page-numbers.current { background: var(--charcoal); color: var(--cream); } .hub-pagination a.page-numbers:hover { background: var(--cream-100); } .hub-body { background: var(--cream-100); border-top: 2px solid var(--charcoal); } .hub-body__inner { max-width: 760px; margin-inline: auto; padding: 3rem 1rem; font-size: 1.0625rem; line-height: 1.7; } .hub-body__inner h2 { font-size: 1.75rem; font-weight: 900; margin: 2rem 0 0.75rem; } .hub-body__inner h3 { font-size: 1.25rem; font-weight: 800; margin: 1.5rem 0 0.5rem; } .hub-body__inner p { margin: 0 0 1rem; } .hub-body__inner a { color: var(--cherry); text-decoration: underline; } .hub-faq { background: var(--cream); } .hub-faq__inner { max-width: 760px; margin-inline: auto; padding: 3rem 1rem 4rem; } .hub-faq__title { font-size: clamp(24px, 3vw, 32px); font-weight: 900; margin: 0 0 1.5rem; } .hub-faq__list { display: flex; flex-direction: column; gap: 0.75rem; } .hub-faq__item { border: 2px solid var(--charcoal); background: var(--cream); } .hub-faq__q { cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; list-style: none; } .hub-faq__q::-webkit-details-marker { display: none; } .hub-faq__q::after { content: '+'; float: right; font-weight: 900; font-size: 1.25rem; line-height: 1; } .hub-faq__item[open] .hub-faq__q::after { content: '−'; } .hub-faq__a { padding: 0 1.25rem 1.25rem; font-size: 1rem; line-height: 1.6; color: color-mix(in oklab, var(--charcoal) 80%, transparent); } .hub-faq__a p { margin: 0 0 0.75rem; } /* --------------------------------------------------------------------------- 90b. Hub hero text-colour variants + image term cards (Phase 4A). Carries the per-template light/dark palettes from the legacy page-*.php scopes onto the unified template via ACF hero_text_color. --------------------------------------------------------------------------- */ .hub-hero--text-cream .hub-hero__eyebrow { background: var(--cream); color: var(--charcoal); } .hub-hero--text-cream .hub-hero__lede { color: color-mix(in oklab, var(--cream) 85%, transparent); } .hub-hero--text-charcoal .hub-hero__eyebrow { background: var(--charcoal); color: var(--cream); } .hub-hero--text-charcoal .hub-hero__lede { color: color-mix(in oklab, var(--charcoal) 80%, transparent); } .hub-term-card--with-image { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 180px; padding: 0; overflow: hidden; border: 2px solid var(--charcoal); text-decoration: none; color: var(--cream); background: var(--charcoal); } .hub-term-card--with-image .hub-term-card__media { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .hub-term-card--with-image .hub-term-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--charcoal) 88%, transparent) 0%, color-mix(in oklab, var(--charcoal) 40%, transparent) 50%, transparent 100%); } .hub-term-card--with-image .hub-term-card__body { position: relative; z-index: 1; padding: 1rem 1.25rem 1.125rem; display: flex; flex-direction: column; gap: 0.25rem; } .hub-term-card--with-image .hub-term-card__name { font-size: 1.375rem; font-weight: 900; letter-spacing: -0.01em; color: var(--cream); } .hub-term-card--with-image .hub-term-card__count { color: color-mix(in oklab, var(--cream) 75%, transparent); } .hub-term-card--with-image:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--charcoal); } @media (min-width: 900px) { .hub-term-card--with-image { min-height: 220px; } }