/* ═══════════════════════════════════════════════════════════════
FYPIQ — Style Intelligence Design System
Loaded after style.css — maps editorial luxury design tokens
onto the Bootstrap base without touching the grid or JS hooks.
═══════════════════════════════════════════════════════════════ */
/* ─── 1. Design Tokens ──────────────────────────────────────────── */
:root {
/* Core palette from DESIGN.md (theme-agnostic) */
--ds-onyx: #0B0C10;
--ds-purple: #7B2FF7;
--ds-purple-dim: rgba(123, 47, 247, 0.15);
--ds-purple-glow: rgba(123, 47, 247, 0.35);
--ds-cyan: #00D4FF;
--ds-success: #00C896;
/* Typography */
--ds-font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
--ds-font-body: 'Inter', system-ui, -apple-system, sans-serif;
--ds-font-label: 'Montserrat', system-ui, sans-serif;
/* Transitions */
--ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
--ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
/* Brand aliases (shared) */
--gold: #7B2FF7;
--gold-light: #b772ff;
--gold-dark: #7B2FF7;
--coral: #00D4FF;
--teal: #00D4FF;
--accent-gold: #7B2FF7;
--accent-coral: #00D4FF;
}
/* Light mode surfaces — default + explicit light theme */
:root,
[data-theme="light"] {
--ds-surface-lowest: #f4f2fa;
--ds-surface: #ffffff;
--ds-surface-low: #f6f8fb;
--ds-surface-container: #eef0f6;
--ds-surface-high: #e4e8f0;
--ds-on-surface: #121520;
--ds-on-surface-muted: #5a6478;
--ds-silver: #121520;
--ds-glass-bg: rgba(0, 0, 0, 0.03);
--ds-glass-border: rgba(0, 0, 0, 0.08);
--ds-border-subtle: rgba(0, 0, 0, 0.07);
--ds-border-mid: rgba(0, 0, 0, 0.12);
--ds-hero-glow-purple: rgba(123, 47, 247, 0.1);
--ds-hero-glow-cyan: rgba(0, 212, 255, 0.08);
}
/* Dark mode surfaces */
html:is([data-theme="dark"], [data-bs-theme="dark"]) {
--ds-surface-lowest: #0d0e12;
--ds-surface: #121317;
--ds-surface-low: #1a1b20;
--ds-surface-container: #1f1f24;
--ds-surface-high: #292a2e;
--ds-on-surface: #e3e2e8;
--ds-on-surface-muted: #b8b0c8;
--ds-silver: #e8e6ed;
--ds-glass-bg: rgba(255, 255, 255, 0.04);
--ds-glass-border: rgba(255, 255, 255, 0.08);
--ds-border-subtle: rgba(255, 255, 255, 0.06);
--ds-border-mid: rgba(255, 255, 255, 0.12);
--ds-hero-glow-purple: rgba(123, 47, 247, 0.13);
--ds-hero-glow-cyan: rgba(0, 212, 255, 0.07);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ds-surface-lowest: #0d0e12;
--ds-surface: #121317;
--ds-surface-low: #1a1b20;
--ds-surface-container: #1f1f24;
--ds-surface-high: #292a2e;
--ds-on-surface: #e3e2e8;
--ds-on-surface-muted: #b8b0c8;
--ds-silver: #e8e6ed;
--ds-glass-bg: rgba(255, 255, 255, 0.04);
--ds-glass-border: rgba(255, 255, 255, 0.08);
--ds-border-subtle: rgba(255, 255, 255, 0.06);
--ds-border-mid: rgba(255, 255, 255, 0.12);
--ds-hero-glow-purple: rgba(123, 47, 247, 0.13);
--ds-hero-glow-cyan: rgba(0, 212, 255, 0.07);
}
}
/* ─── 2. Typography ─────────────────────────────────────────────── */
/* Headline font for editorial feel */
.hero-tagline,
.section-heading,
h1.page-headline,
.ds-headline {
font-family: var(--ds-font-headline) !important;
letter-spacing: -0.01em;
}
/* Card titles get editorial serif for that magazine masthead feel */
.card-title-link,
.also-card-title,
.video-card-title a {
font-family: var(--ds-font-headline);
font-weight: 600;
line-height: 1.35;
}
/* Article headings: Playfair for h2/h3, Inter stays for h4+ */
.content-article h2,
.content-article h3 {
font-family: var(--ds-font-headline) !important;
letter-spacing: -0.01em;
}
/* Label caps — Montserrat all-caps throughout */
.hero-badge,
.btn-explore,
.ds-chip,
.ds-section-label,
.ds-label,
.card-date,
.section-label {
font-family: var(--ds-font-label) !important;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ─── 3. Navigation — Glassmorphism overlay ─────────────────────── */
.site-navbar {
background: rgba(11, 12, 16, 0.85) !important;
backdrop-filter: blur(14px) saturate(160%) !important;
-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
transition: box-shadow 0.3s var(--ds-ease) !important;
}
.site-navbar.ds-nav-scrolled {
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5) !important;
}
/* Active link: electric purple underline */
.site-navbar .nav-link.active {
color: var(--ds-purple) !important;
border-bottom: 2px solid var(--ds-purple);
padding-bottom: calc(0.5rem - 2px);
}
/* Nav links: Montserrat caps */
.site-navbar .nav-link .nav-label {
font-family: var(--ds-font-label);
font-size: 0.7rem;
letter-spacing: 0.07em;
text-transform: uppercase;
}
/* "Discover" pill button in nav */
.site-navbar .btn-gold {
background: var(--ds-purple) !important;
border-color: var(--ds-purple) !important;
border-radius: 999px !important;
font-family: var(--ds-font-label) !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
[data-theme="light"] .site-navbar {
background: rgba(255, 255, 255, 0.88) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}
[data-theme="light"] .site-navbar .nav-link .nav-label,
[data-theme="light"] .site-navbar.navbar-dark .nav-link .nav-label {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .site-navbar .nav-link:hover .nav-label {
color: var(--ds-purple) !important;
}
[data-theme="light"] #mainNav.collapse.show,
[data-theme="light"] #mainNav.collapsing {
background: rgba(255, 255, 255, 0.98) !important;
border-top-color: var(--ds-border-subtle) !important;
}
/* ─── 4. Hero Section ────────────────────────────────────────────── */
.hero-section {
position: relative;
overflow: hidden;
}
/* Ambient radial glows from design system */
.hero-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 75% 15%, var(--ds-hero-glow-purple) 0%, transparent 55%),
radial-gradient(ellipse at 10% 85%, var(--ds-hero-glow-cyan) 0%, transparent 45%);
pointer-events: none;
z-index: 0;
}
.hero-section .hero-content {
position: relative;
z-index: 1;
}
/* Drop the "Style Intelligence" gradient text from the headline */
.hero-tagline-gradient {
background: linear-gradient(135deg, var(--ds-purple) 0%, var(--ds-cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-tagline-focus {
font-style: italic;
color: var(--ds-purple);
-webkit-text-fill-color: var(--ds-purple);
}
/* Hero CTA buttons */
.btn-hero-primary,
.btn-gold.btn-hero-primary {
background: var(--ds-purple) !important;
border-color: var(--ds-purple) !important;
border-radius: 999px !important;
font-family: var(--ds-font-label) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
transition: transform 0.2s var(--ds-ease), box-shadow 0.2s var(--ds-ease) !important;
}
.btn-hero-primary:hover,
.btn-gold.btn-hero-primary:hover {
transform: scale(1.04) !important;
box-shadow: 0 8px 28px rgba(123, 47, 247, 0.4) !important;
}
.btn-hero-ghost {
border: 1px solid rgba(255, 255, 255, 0.14) !important;
background: rgba(255, 255, 255, 0.04) !important;
backdrop-filter: blur(8px) !important;
border-radius: 999px !important;
font-family: var(--ds-font-label) !important;
font-size: 0.72rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--ds-silver) !important;
transition: background 0.2s var(--ds-ease), border-color 0.2s var(--ds-ease) !important;
}
.btn-hero-ghost:hover {
background: rgba(255, 255, 255, 0.09) !important;
border-color: rgba(255, 255, 255, 0.28) !important;
color: #fff !important;
}
[data-theme="light"] .btn-hero-ghost {
border-color: rgba(0, 0, 0, 0.14) !important;
background: rgba(0, 0, 0, 0.03) !important;
color: var(--navy) !important;
}
/* ─── 4b. Light mode — hero & editorial panels (contrast fix) ───── */
[data-theme="light"] .hero-section::before {
background:
radial-gradient(ellipse at 75% 15%, var(--ds-hero-glow-purple) 0%, transparent 55%),
radial-gradient(ellipse at 10% 85%, var(--ds-hero-glow-cyan) 0%, transparent 45%);
}
[data-theme="light"] .hero-section--split {
background:
radial-gradient(circle at 65% 5%, var(--ds-hero-glow-purple), transparent 55%),
linear-gradient(165deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 45%, var(--bg) 100%) !important;
}
[data-theme="light"] .hero-tagline--split,
[data-theme="light"] .hero-tagline--split.ds-headline {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .hero-tagline--split em,
[data-theme="light"] .hero-tagline--split .hero-tagline-focus {
color: var(--ds-purple) !important;
text-shadow: none !important;
-webkit-text-fill-color: var(--ds-purple) !important;
}
[data-theme="light"] .hero-section--split .hero-subtext {
color: var(--text-mid) !important;
}
[data-theme="light"] .hero-editorial-img-frame {
border-color: var(--ds-border-mid) !important;
box-shadow: var(--shadow-lg) !important;
}
[data-theme="light"] .hero-editorial-placeholder {
background:
radial-gradient(circle at 30% 25%, rgba(123, 47, 247, 0.12) 0%, transparent 55%),
radial-gradient(circle at 75% 75%, rgba(0, 212, 255, 0.08) 0%, transparent 55%),
linear-gradient(145deg, #f0eeff 0%, #e8ecf4 60%, #f6f8fb 100%) !important;
}
[data-theme="light"] .hero-float-card {
background: rgba(255, 255, 255, 0.96) !important;
border-color: var(--ds-border-mid) !important;
box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] .hero-float-title {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .hero-float-desc {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .article-hero-section {
background:
radial-gradient(circle at 85% 10%, var(--ds-hero-glow-purple), transparent 50%),
linear-gradient(180deg, var(--hero-grad-1) 0%, var(--bg) 100%) !important;
border-bottom-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .article-hero-section .section-heading,
[data-theme="light"] .article-hero-section .ds-headline {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .article-hero-section .text-muted {
color: var(--text-mid) !important;
}
[data-theme="light"] .article-hero-section .page-title-crumb .text-muted {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .article-hero-meta-row {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .article-hero-img-frame {
border-color: var(--ds-border-mid) !important;
box-shadow: var(--shadow-lg) !important;
}
[data-theme="light"] .article-hero-img-placeholder {
background:
radial-gradient(circle at 40% 40%, rgba(123, 47, 247, 0.14) 0%, transparent 55%),
radial-gradient(circle at 65% 65%, rgba(0, 212, 255, 0.1) 0%, transparent 55%),
linear-gradient(145deg, #f0eeff 0%, #e8ecf4 100%) !important;
}
[data-theme="light"] .article-hero-img-placeholder i {
color: rgba(123, 47, 247, 0.45) !important;
}
[data-theme="light"] .cat-stream-section {
border-top-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .cat-stream-heading {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .cat-stream-pill {
border-color: var(--ds-border-mid) !important;
background: var(--bg-card) !important;
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .cat-stream-pill:hover,
[data-theme="light"] .cat-stream-pill--active,
[data-theme="light"] .cat-stream-pill--live {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .discoveries-filter-inner {
background: rgba(255, 255, 255, 0.92) !important;
border-color: var(--ds-border-mid) !important;
box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .bento-cta-title {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .bento-cta-title em {
text-shadow: none !important;
}
[data-theme="light"] .mobile-bottom-nav {
background: rgba(255, 255, 255, 0.96) !important;
border-top-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .article-toc-nav {
border-left-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .article-toc-link {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .article-toc-link:hover,
[data-theme="light"] .article-toc-link.active {
color: var(--ds-purple) !important;
}
/* ─── 5. Bento Value-Prop Cards (homepage 3-up) ─────────────────── */
/* The "Fact vs Myth / Before vs After / IQ Upgrade" section */
.search-card {
background: var(--ds-glass-bg) !important;
border: 1px solid var(--ds-glass-border) !important;
border-radius: 14px !important;
transition:
background 0.3s var(--ds-ease),
transform 0.3s var(--ds-ease-out),
border-color 0.3s var(--ds-ease) !important;
overflow: hidden;
}
.search-card:hover {
background: rgba(255, 255, 255, 0.06) !important;
transform: translateY(-5px);
border-color: rgba(123, 47, 247, 0.32) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3) !important;
}
/* Image container: 4:3 aspect with zoom on hover */
.card-thumb-wrap {
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: 0; /* flush with card edges */
background: var(--ds-surface-high);
}
.card-thumb {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.65s var(--ds-ease-out) !important;
display: block;
}
.search-card:hover .card-thumb {
transform: scale(1.06) !important;
}
/* "Explore →" CTA link */
.btn-explore {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
color: var(--ds-purple) !important;
font-family: var(--ds-font-label) !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
background: none !important;
border: none !important;
padding: 0 !important;
transition: gap 0.2s var(--ds-ease), color 0.2s var(--ds-ease) !important;
}
.btn-explore:hover {
gap: 0.65rem !important;
color: var(--ds-cyan) !important;
}
/* Card meta / status chips */
.card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
[data-theme="light"] .search-card {
background: #ffffff !important;
border-color: rgba(0, 0, 0, 0.07) !important;
}
[data-theme="light"] .search-card:hover {
border-color: rgba(123, 47, 247, 0.22) !important;
background: rgba(123, 47, 247, 0.015) !important;
}
/* ─── 6. Category Chips ──────────────────────────────────────────── */
/* Usage: Women's Fashion
Trending Now
Accessories */
.ds-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.22rem 0.7rem;
background: rgba(123, 47, 247, 0.1);
border: 1px solid rgba(123, 47, 247, 0.38);
border-radius: 999px;
color: var(--ds-purple);
font-family: var(--ds-font-label);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s var(--ds-ease), border-color 0.2s var(--ds-ease);
cursor: pointer;
}
.ds-chip:hover {
background: rgba(123, 47, 247, 0.2);
border-color: var(--ds-purple);
color: var(--ds-purple);
text-decoration: none;
}
.ds-chip--cyan {
background: rgba(0, 212, 255, 0.08);
border-color: rgba(0, 212, 255, 0.35);
color: var(--ds-cyan);
}
.ds-chip--cyan:hover {
background: rgba(0, 212, 255, 0.15);
border-color: var(--ds-cyan);
color: var(--ds-cyan);
}
.ds-chip--success {
background: rgba(0, 200, 150, 0.1);
border-color: rgba(0, 200, 150, 0.35);
color: var(--ds-success);
}
/* Section eyebrow label (small caps line above a heading) */
.ds-section-label {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--ds-font-label);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--ds-purple);
margin-bottom: 0.85rem;
}
.ds-section-label::before {
content: '';
display: block;
width: 2.5rem;
height: 1px;
background: var(--ds-purple);
flex-shrink: 0;
}
.ds-section-label--cyan {
color: var(--ds-cyan);
}
.ds-section-label--cyan::before {
background: var(--ds-cyan);
}
/* ─── 7. Section Headers ─────────────────────────────────────────── */
.section-heading {
font-family: var(--ds-font-headline) !important;
font-weight: 700;
letter-spacing: -0.01em;
}
.section-subtext {
color: var(--ds-on-surface-muted);
}
/* ─── 8. Article Template ────────────────────────────────────────── */
/* Article headings inherit headline font */
.content-article h2 {
font-family: var(--ds-font-headline) !important;
font-weight: 700;
letter-spacing: -0.01em;
margin-top: 2.5rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.content-article h3 {
font-family: var(--ds-font-headline) !important;
font-weight: 600;
letter-spacing: -0.005em;
}
/* Remove the top border on the very first h2 (no rule above opening section) */
.content-article h2:first-child,
.content-article > *:first-child h2,
.content-article h2:first-of-type {
border-top: none;
padding-top: 0;
margin-top: 1rem;
}
[data-theme="light"] .content-article h2 {
border-top-color: rgba(0, 0, 0, 0.07);
}
/* Drop cap on first paragraph — editorial luxury magazine feel */
.content-article > p:first-of-type::first-letter,
.content-article .article-drop-cap::first-letter {
font-family: var(--ds-font-headline);
font-size: 3.5rem;
font-weight: 700;
color: var(--ds-purple);
float: left;
line-height: 0.85;
margin: 0.12rem 0.18rem 0 0;
}
/* Images in content: always rounded, never overflow */
.content-article img {
border-radius: 8px !important;
display: block;
}
/* Featured image floated at top-right */
.featured-image-wrap {
border-radius: 12px !important;
border: 1px solid var(--ds-glass-border);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="light"] .featured-image-wrap {
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}
/* ─── 9. Editorial IQ Callout (blockquote) ───────────────────────── */
/*
Any inside .content-article is treated as an
"Editorial IQ" callout — the brand insight format.
Generic: no heading-position logic, pure semantic HTML targeting.
*/
.content-article blockquote {
position: relative;
margin: 2rem 0;
padding: 1.25rem 1.5rem 1.25rem 1.75rem;
background: rgba(123, 47, 247, 0.05);
border-left: 4px solid var(--ds-purple);
border-radius: 0 10px 10px 0;
}
.content-article blockquote::before {
content: 'Editorial IQ';
display: block;
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ds-purple);
margin-bottom: 0.65rem;
opacity: 0.9;
}
.content-article blockquote p {
font-style: italic;
color: var(--ds-on-surface);
margin-bottom: 0;
line-height: 1.75;
}
[data-theme="light"] .content-article blockquote {
background: rgba(123, 47, 247, 0.04);
}
/* ─── 10. FAQ Accordion ──────────────────────────────────────────── */
.faq-accordion .accordion-item {
background: var(--ds-glass-bg) !important;
border: 1px solid var(--ds-glass-border) !important;
border-radius: 10px !important;
overflow: hidden;
transition: border-color 0.2s var(--ds-ease);
}
.faq-accordion .accordion-item:has(.show) {
border-color: rgba(123, 47, 247, 0.4) !important;
}
.faq-accordion .accordion-button {
background: transparent !important;
color: var(--ds-on-surface) !important;
font-family: var(--ds-font-headline);
font-size: 1rem;
font-weight: 600;
border: none !important;
box-shadow: none !important;
padding: 1.1rem 1.25rem;
}
.faq-accordion .accordion-button:not(.collapsed) {
color: var(--ds-purple) !important;
}
.faq-accordion .accordion-button::after {
filter: invert(1);
opacity: 0.6;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
filter: none;
opacity: 1;
}
.faq-accordion .accordion-body {
background: transparent;
color: var(--ds-on-surface-muted) !important;
line-height: 1.75;
border-top: 1px solid var(--ds-glass-border);
}
[data-theme="light"] .faq-accordion .accordion-item {
background: rgba(0, 0, 0, 0.02) !important;
border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .faq-accordion .accordion-button {
color: var(--text-dark) !important;
}
[data-theme="light"] .faq-accordion .accordion-button::after {
filter: none;
}
[data-theme="light"] .faq-accordion .accordion-body {
color: var(--text-mid) !important;
border-top-color: rgba(0, 0, 0, 0.06);
}
/* ─── 11. Related Articles (also-cards) ──────────────────────────── */
.also-card {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem;
background: var(--ds-glass-bg);
border: 1px solid var(--ds-glass-border);
border-radius: 10px;
text-decoration: none;
transition:
background 0.25s var(--ds-ease),
border-color 0.25s var(--ds-ease),
transform 0.25s var(--ds-ease-out);
}
.also-card:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(123, 47, 247, 0.3);
transform: translateY(-2px);
}
.also-card-img {
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.also-card-title {
font-family: var(--ds-font-headline);
font-weight: 600;
font-size: 0.9rem;
line-height: 1.4;
color: var(--ds-on-surface);
}
.also-card:hover .also-card-title {
color: var(--ds-purple);
}
.also-card-views {
font-size: 0.72rem;
color: var(--ds-on-surface-muted);
margin-top: 0.2rem;
}
[data-theme="light"] .also-card {
background: #fff;
border-color: rgba(0, 0, 0, 0.07);
}
[data-theme="light"] .also-card:hover {
border-color: rgba(123, 47, 247, 0.25);
background: rgba(123, 47, 247, 0.015);
}
[data-theme="light"] .also-card-title {
color: var(--text-dark);
}
/* ─── 12. Useful Links / Affiliate Aside ─────────────────────────── */
.useful-links-block {
background: var(--ds-glass-bg) !important;
border: 1px solid var(--ds-glass-border) !important;
border-radius: 12px !important;
}
[data-theme="light"] .useful-links-block {
background: #fff !important;
border-color: rgba(0, 0, 0, 0.08) !important;
}
/* ─── 13. Primary CTA Button ─────────────────────────────────────── */
.btn-gold {
background: var(--ds-purple) !important;
border-color: var(--ds-purple) !important;
font-family: var(--ds-font-label) !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
border-radius: 999px !important;
transition:
transform 0.2s var(--ds-ease),
box-shadow 0.2s var(--ds-ease),
background 0.2s var(--ds-ease) !important;
}
.btn-gold:hover {
background: #8f3fff !important;
border-color: #8f3fff !important;
transform: scale(1.03) !important;
box-shadow: 0 6px 22px rgba(123, 47, 247, 0.38) !important;
}
/* ─── 14. Footer ─────────────────────────────────────────────────── */
.site-footer {
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.footer-heading {
font-family: var(--ds-font-label) !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
}
.footer-links a {
transition: color 0.2s var(--ds-ease);
}
.footer-links a:hover {
color: var(--ds-purple) !important;
}
.footer-tagline .tagline-badge {
font-family: var(--ds-font-label);
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.footer-brand:hover {
opacity: 0.85;
}
/* ─── 15. Gamification / Level Badge ─────────────────────────────── */
/* Give the XP/level bar the purple brand colour */
.gm-xp-fill {
background: linear-gradient(90deg, var(--ds-purple), var(--ds-cyan)) !important;
}
.gm-level-badge {
border-color: rgba(123, 47, 247, 0.35) !important;
}
/* ─── 16. Discoveries/Search Page — Filter Bar ───────────────────── */
/* Pill-style filter chips on category/discoveries pages */
.ds-filter-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--ds-glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--ds-glass-border);
border-radius: 999px;
}
.ds-filter-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.9rem;
border-radius: 999px;
background: transparent;
border: 1px solid transparent;
color: var(--ds-on-surface-muted);
font-family: var(--ds-font-label);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.2s var(--ds-ease), border-color 0.2s var(--ds-ease), background 0.2s var(--ds-ease);
white-space: nowrap;
}
.ds-filter-btn:hover {
color: var(--ds-silver);
border-color: rgba(255, 255, 255, 0.2);
}
.ds-filter-btn.active,
.ds-filter-btn[aria-current="true"] {
background: rgba(123, 47, 247, 0.15);
border-color: var(--ds-purple);
color: var(--ds-silver);
}
/* ─── 17. Content — Generic Enrichment ───────────────────────────── */
/*
These rules enrich any HTML content from the DB generically.
No heading-position logic. Targets semantic HTML elements only.
*/
/* Lists: subtle left rule */
.content-article ul:not(.list-unstyled):not(.accordion):not([class]),
.content-article ol:not(.list-unstyled):not(.accordion):not([class]) {
border-left: 2px solid rgba(123, 47, 247, 0.2);
padding-left: 1.75rem;
margin-left: 0.25rem;
list-style: none;
}
.content-article ul:not(.list-unstyled):not(.accordion):not([class]) li::before {
content: '—';
color: var(--ds-purple);
font-weight: 700;
margin-right: 0.5rem;
margin-left: -1.3rem;
display: inline-block;
width: 1rem;
}
.content-article ol:not(.list-unstyled):not([class]) {
counter-reset: ds-ol;
}
.content-article ol:not(.list-unstyled):not([class]) li {
counter-increment: ds-ol;
}
.content-article ol:not(.list-unstyled):not([class]) li::before {
content: counter(ds-ol, decimal-leading-zero);
color: var(--ds-purple);
font-family: var(--ds-font-label);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.05em;
margin-right: 0.6rem;
margin-left: -1.5rem;
display: inline-block;
width: 1.2rem;
}
/* Horizontal rule: subtle divider */
.content-article hr {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.07);
margin: 2.5rem 0;
}
[data-theme="light"] .content-article hr {
border-top-color: rgba(0, 0, 0, 0.08);
}
/* Strong / emphasis: purple accent */
.content-article strong {
color: var(--ds-on-surface);
}
/* Inline code in articles */
.content-article code:not([class]) {
background: rgba(123, 47, 247, 0.1);
color: var(--ds-purple);
border-radius: 4px;
padding: 0.1em 0.4em;
font-size: 0.9em;
}
[data-theme="light"] .content-article strong {
color: var(--text-dark);
}
[data-theme="light"] .content-article ul:not(.list-unstyled):not(.accordion):not([class]),
[data-theme="light"] .content-article ol:not(.list-unstyled):not(.accordion):not([class]) {
border-left-color: rgba(123, 47, 247, 0.18);
}
/* ─── 18. Reveal Animations ──────────────────────────────────────── */
.ds-reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.65s var(--ds-ease),
transform 0.65s var(--ds-ease-out);
}
.ds-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered child delays */
.ds-reveal-group > *:nth-child(1) { transition-delay: 0.04s; }
.ds-reveal-group > *:nth-child(2) { transition-delay: 0.1s; }
.ds-reveal-group > *:nth-child(3) { transition-delay: 0.16s; }
.ds-reveal-group > *:nth-child(4) { transition-delay: 0.22s; }
.ds-reveal-group > *:nth-child(5) { transition-delay: 0.28s; }
.ds-reveal-group > *:nth-child(6) { transition-delay: 0.34s; }
.ds-reveal-group > *:nth-child(7) { transition-delay: 0.4s; }
.ds-reveal-group > *:nth-child(8) { transition-delay: 0.46s; }
.ds-reveal-group > *:nth-child(9) { transition-delay: 0.52s; }
/* Pulse animation for live indicators */
@keyframes ds-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.ds-pulse {
animation: ds-pulse 2s ease-in-out infinite;
}
/* ─── 19. Existing badge / chip refinement ──────────────────────── */
/*
Map Bootstrap badges and existing stat chips to the new design
tokens without changing their HTML or JS.
*/
.status-badge.bg-success {
background: rgba(0, 200, 150, 0.15) !important;
color: var(--ds-success) !important;
border: 1px solid rgba(0, 200, 150, 0.35);
font-family: var(--ds-font-label);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px !important;
}
.status-badge.bg-info {
background: rgba(0, 212, 255, 0.12) !important;
color: var(--ds-cyan) !important;
border: 1px solid rgba(0, 212, 255, 0.3);
font-family: var(--ds-font-label);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px !important;
}
.status-badge.bg-warning {
background: rgba(255, 182, 142, 0.15) !important;
color: #ffb68e !important;
border: 1px solid rgba(255, 182, 142, 0.3);
font-family: var(--ds-font-label);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px !important;
}
/* Stat chips and visit badges */
.stat-chip,
.visit-badge,
.reading-time {
font-family: var(--ds-font-label) !important;
font-size: 0.65rem !important;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Page tag pills: reuse ds-chip visuals without changing the class */
.page-tag-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
background: rgba(123, 47, 247, 0.08);
border: 1px solid rgba(123, 47, 247, 0.3);
border-radius: 999px;
color: var(--ds-purple);
font-family: var(--ds-font-label);
font-size: 0.63rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
text-decoration: none !important;
transition: background 0.2s var(--ds-ease), border-color 0.2s var(--ds-ease);
}
.page-tag-pill:hover {
background: rgba(123, 47, 247, 0.18);
border-color: var(--ds-purple);
color: var(--ds-purple);
}
/* ─── 21. Responsive adjustments ─────────────────────────────────── */
@media (max-width: 767.98px) {
.content-article > p:first-of-type::first-letter,
.content-article .article-drop-cap::first-letter {
font-size: 2.8rem;
}
.content-article h2 {
padding-top: 1.25rem;
margin-top: 2rem;
}
.ds-section-label {
font-size: 0.62rem;
letter-spacing: 0.2em;
}
.ds-filter-bar {
border-radius: 14px;
overflow-x: auto;
flex-wrap: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.ds-reveal,
.search-card,
.card-thumb,
.btn-gold,
.btn-hero-primary,
.also-card {
transition: none !important;
animation: none !important;
}
}
/* ══════════════════════════════════════════════════════════════
EXTENDED COMPONENT COVERAGE — all uncovered UI patterns
══════════════════════════════════════════════════════════════ */
/* ─── 22. Trending Ticker ────────────────────────────────────── */
.trending-section {
background: var(--ds-surface-lowest) !important;
border-top: 1px solid var(--ds-glass-border);
border-bottom: 1px solid var(--ds-glass-border);
}
.trending-label {
font-family: var(--ds-font-label) !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--ds-purple) !important;
border-right: 1px solid var(--ds-glass-border) !important;
white-space: nowrap;
}
.trending-label .fire-icon {
color: var(--ds-cyan) !important;
}
/* Ticker pills */
.trending-pill {
border: 1px solid var(--ds-glass-border) !important;
background: var(--ds-glass-bg) !important;
color: var(--ds-on-surface) !important;
border-radius: 999px !important;
font-family: var(--ds-font-body) !important;
font-size: 0.8rem !important;
transition: background 0.2s var(--ds-ease), border-color 0.2s var(--ds-ease), color 0.2s var(--ds-ease) !important;
}
.trending-pill:hover {
background: rgba(123, 47, 247, 0.15) !important;
border-color: var(--ds-purple) !important;
color: var(--ds-silver) !important;
}
/* nth-child hover overrides: remap to design tokens */
.trending-pill:nth-child(3n+1):hover {
background: rgba(123, 47, 247, 0.18) !important;
border-color: var(--ds-purple) !important;
color: #fff !important;
}
.trending-pill:nth-child(3n+2):hover {
background: rgba(0, 212, 255, 0.12) !important;
border-color: var(--ds-cyan) !important;
color: var(--ds-cyan) !important;
}
.trending-pill:nth-child(3n+3):hover {
background: rgba(0, 200, 150, 0.12) !important;
border-color: var(--ds-success) !important;
color: var(--ds-success) !important;
}
/* Rank number */
.trending-pill .rank {
font-family: var(--ds-font-label) !important;
font-size: 0.6rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
color: var(--ds-purple) !important;
background: rgba(123, 47, 247, 0.12) !important;
border-radius: 999px !important;
}
/* Meta view count */
.trending-pill-meta {
font-family: var(--ds-font-label) !important;
font-size: 0.58rem !important;
color: var(--ds-on-surface-muted) !important;
}
/* Featured star */
.trending-pill-star {
color: var(--ds-cyan) !important;
}
/* Featured pill variant: cyan border accent */
.trending-pill--featured {
border-color: rgba(0, 212, 255, 0.35) !important;
}
[data-theme="light"] .trending-section {
background: #f4f4f8 !important;
border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .trending-pill {
background: #fff !important;
border-color: rgba(0, 0, 0, 0.1) !important;
color: #222 !important;
}
[data-theme="light"] .trending-label {
border-color: rgba(0, 0, 0, 0.1) !important;
}
/* ─── 23. Trending Strip Wall ────────────────────────────────── */
.trending-strip-section {
background: var(--ds-surface-lowest) !important;
}
.trending-strip-heading {
font-family: var(--ds-font-headline) !important;
font-weight: 700;
letter-spacing: -0.01em;
}
.trending-strip-tile {
background: var(--ds-glass-bg) !important;
border: 1px solid var(--ds-glass-border) !important;
border-radius: 12px !important;
overflow: hidden;
transition: border-color 0.25s var(--ds-ease), transform 0.25s var(--ds-ease-out) !important;
}
.trending-strip-tile:hover {
border-color: rgba(123, 47, 247, 0.3) !important;
transform: translateY(-3px);
}
.trending-strip-tile--featured {
border-color: rgba(0, 212, 255, 0.3) !important;
}
.trending-strip-tile__title {
font-family: var(--ds-font-headline) !important;
font-weight: 600;
color: var(--ds-on-surface);
}
/* Metric pills on strip tiles */
.trending-strip-metric {
font-family: var(--ds-font-label) !important;
font-size: 0.58rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
border-radius: 999px !important;
}
.trending-strip-metric--focus {
border-color: var(--ds-purple) !important;
color: var(--ds-purple) !important;
background: rgba(123, 47, 247, 0.12) !important;
}
/* Comparative guides grid */
.trending-compare-card {
background: var(--ds-glass-bg) !important;
border: 1px solid var(--ds-glass-border) !important;
border-radius: 12px !important;
transition: border-color 0.2s var(--ds-ease), transform 0.2s var(--ds-ease-out) !important;
}
.trending-compare-card:hover {
border-color: rgba(123, 47, 247, 0.3) !important;
transform: translateY(-3px) !important;
}
.trending-compare-card__label {
font-family: var(--ds-font-label) !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
color: var(--ds-on-surface-muted) !important;
}
.trending-compare-guides__title {
font-family: var(--ds-font-headline) !important;
font-weight: 700;
}
/* Legend swatches: map to design token colors where possible */
.trending-strip-legend {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 0;
}
.trending-strip-legend__item {
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
display: flex;
align-items: center;
gap: 0.4rem;
}
.trending-strip-legend__item--focus {
color: var(--ds-purple);
}
/* ─── 24. Trending Leaderboard ───────────────────────────────── */
.gm-leaderboard {
list-style: none;
padding: 0;
margin: 0;
}
/* Row glass surface */
.gm-lb-row {
background: var(--ds-glass-bg) !important;
border-bottom: 1px solid var(--ds-glass-border) !important;
transition: background 0.2s var(--ds-ease) !important;
}
.gm-lb-row:hover {
background: rgba(255, 255, 255, 0.06) !important;
}
/* Rank badge */
.gm-lb-rank {
font-family: var(--ds-font-label) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
}
/* Top-3 podium colours → map to design tokens */
.gm-lb-row.gm-lb-top1 .gm-lb-rank {
background: linear-gradient(135deg, var(--ds-purple), var(--ds-cyan)) !important;
color: #fff !important;
}
.gm-lb-row.gm-lb-top2 .gm-lb-rank {
background: rgba(123, 47, 247, 0.35) !important;
color: var(--ds-silver) !important;
}
.gm-lb-row.gm-lb-top3 .gm-lb-rank {
background: rgba(0, 212, 255, 0.2) !important;
color: var(--ds-cyan) !important;
}
/* Score chip */
.gm-lb-score {
font-family: var(--ds-font-label) !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
color: var(--ds-purple) !important;
}
/* Featured pill */
.gm-lb-featured-pill {
background: rgba(0, 212, 255, 0.1) !important;
border: 1px solid rgba(0, 212, 255, 0.3) !important;
color: var(--ds-cyan) !important;
font-family: var(--ds-font-label) !important;
font-size: 0.58rem !important;
font-weight: 700 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
border-radius: 999px !important;
}
/* Container card */
#gm-leaderboard .rounded-3 {
background: var(--ds-glass-bg) !important;
border-color: var(--ds-glass-border) !important;
}
[data-theme="light"] .gm-lb-row {
background: #fff !important;
border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .gm-lb-row:hover {
background: rgba(123, 47, 247, 0.025) !important;
}
/* ─── 25. Lifestyle Hub — Design Token Overrides ─────────────── */
/*
lifestyle-hub.css uses old gold/navy/cream tokens.
These rules remap the hub to the electric purple / cyan palette.
Load order: design-system.css > lifestyle-hub.css is already inverted
because lifestyle_hub_block.php inlines the — use !important
selectively to win specificity.
*/
.lifestyle-hub {
background: linear-gradient(180deg, var(--ds-surface-low) 0%, var(--ds-surface) 100%) !important;
border-top: 2px solid var(--ds-purple) !important;
}
.lifestyle-hub::before {
background: radial-gradient(
ellipse 80% 60% at 50% 0%,
rgba(123, 47, 247, 0.12) 0%,
rgba(0, 212, 255, 0.04) 45%,
transparent 72%
) !important;
}
.hub-header__content {
background: linear-gradient(
165deg,
rgba(123, 47, 247, 0.07) 0%,
rgba(255, 255, 255, 0.02) 60%,
transparent 100%
) !important;
border-color: rgba(123, 47, 247, 0.22) !important;
}
.hub-eyebrow {
background: rgba(123, 47, 247, 0.1) !important;
border-color: rgba(123, 47, 247, 0.28) !important;
color: var(--ds-purple) !important;
font-family: var(--ds-font-label) !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
}
.hub-eyebrow i {
color: var(--ds-purple) !important;
}
.hub-title {
font-family: var(--ds-font-headline) !important;
color: var(--ds-on-surface) !important;
}
.hub-title::after {
background: linear-gradient(90deg, transparent, var(--ds-purple) 35%, var(--ds-cyan) 65%, transparent) !important;
}
.hub-title .gradient-text {
background: linear-gradient(135deg, var(--ds-purple) 0%, var(--ds-cyan) 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
filter: none !important;
}
.hub-subtitle {
color: var(--ds-on-surface-muted) !important;
}
/* Pulse bar */
.hub-pulse {
background: var(--ds-glass-bg) !important;
border-color: var(--ds-glass-border) !important;
}
.pulse-label {
color: var(--ds-on-surface) !important;
border-right-color: var(--ds-glass-border) !important;
font-family: var(--ds-font-label) !important;
font-size: 0.65rem !important;
letter-spacing: 0.12em !important;
}
.live-dot {
background: var(--ds-cyan) !important;
}
.pulse-item {
background: var(--ds-surface-high) !important;
border-color: var(--ds-glass-border) !important;
color: var(--ds-on-surface) !important;
font-size: 0.78rem !important;
}
.pulse-item:hover {
background: rgba(123, 47, 247, 0.15) !important;
border-color: var(--ds-purple) !important;
color: var(--ds-silver) !important;
}
.pulse-item i {
color: var(--ds-cyan) !important;
}
.pulse-more {
color: var(--ds-purple) !important;
font-family: var(--ds-font-label) !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.pulse-more:hover {
color: var(--ds-cyan) !important;
}
/* Category pills */
.cat-pill {
background: var(--ds-glass-bg) !important;
border-color: var(--ds-glass-border) !important;
transition: background 0.2s var(--ds-ease), border-color 0.2s var(--ds-ease), transform 0.2s var(--ds-ease-out) !important;
}
.cat-pill:hover {
background: rgba(123, 47, 247, 0.12) !important;
border-color: var(--ds-purple) !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(123, 47, 247, 0.2) !important;
}
.cat-pill__icon {
background: linear-gradient(135deg, var(--ds-purple) 0%, #a855f7 100%) !important;
color: #fff !important;
}
.cat-pill:hover .cat-pill__icon {
background: var(--ds-cyan) !important;
color: var(--ds-onyx) !important;
}
.cat-pill__label {
color: var(--ds-on-surface) !important;
font-family: var(--ds-font-body);
}
.cat-pill:hover .cat-pill__label {
color: var(--ds-silver) !important;
}
.cat-pill--all {
background: rgba(123, 47, 247, 0.12) !important;
border-color: rgba(123, 47, 247, 0.35) !important;
}
.cat-pill--all .cat-pill__icon {
background: rgba(123, 47, 247, 0.2) !important;
color: var(--ds-purple) !important;
}
.cat-pill--all .cat-pill__label {
color: var(--ds-purple) !important;
}
.cat-pill--all:hover {
background: var(--ds-purple) !important;
border-color: var(--ds-purple) !important;
}
.cat-pill--all:hover .cat-pill__icon {
background: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
}
.cat-pill--all:hover .cat-pill__label {
color: #fff !important;
}
/* Stats bar */
.hub-stat__num {
color: var(--ds-purple) !important;
font-family: var(--ds-font-headline) !important;
}
.hub-stat__label {
font-family: var(--ds-font-label) !important;
letter-spacing: 0.1em !important;
color: var(--ds-on-surface-muted) !important;
}
.hub-cta {
background: linear-gradient(135deg, var(--ds-purple) 0%, #a855f7 100%) !important;
box-shadow: 0 3px 12px rgba(123, 47, 247, 0.35) !important;
font-family: var(--ds-font-label) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
.hub-cta:hover {
box-shadow: 0 6px 24px rgba(123, 47, 247, 0.5) !important;
transform: translateY(-2px) !important;
}
[data-theme="light"] .lifestyle-hub {
background: linear-gradient(180deg, #f0eeff 0%, #fff 100%) !important;
}
[data-theme="light"] .hub-header__content {
background: linear-gradient(165deg, rgba(123,47,247,0.05) 0%, rgba(255,255,255,0.8) 100%) !important;
border-color: rgba(123, 47, 247, 0.15) !important;
}
[data-theme="light"] .cat-pill {
background: #fff !important;
border-color: rgba(0, 0, 0, 0.09) !important;
}
[data-theme="light"] .cat-pill:hover {
background: rgba(123, 47, 247, 0.06) !important;
border-color: rgba(123, 47, 247, 0.3) !important;
}
[data-theme="light"] .cat-pill__label {
color: #1a1a2e !important;
}
[data-theme="light"] .cat-pill:hover .cat-pill__label {
color: var(--ds-purple) !important;
}
[data-theme="light"] .cat-pill--all {
background: rgba(123, 47, 247, 0.08) !important;
}
/* ─── 26. Pagination ─────────────────────────────────────────── */
.p2m-pagination .page-link {
background: var(--ds-glass-bg) !important;
border-color: var(--ds-glass-border) !important;
color: var(--ds-on-surface) !important;
font-family: var(--ds-font-label) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
border-radius: 8px !important;
transition: background 0.2s var(--ds-ease), border-color 0.2s var(--ds-ease), color 0.2s var(--ds-ease) !important;
}
.p2m-pagination .page-link:hover {
background: rgba(123, 47, 247, 0.15) !important;
border-color: var(--ds-purple) !important;
color: var(--ds-silver) !important;
}
.p2m-pagination .page-item.active .page-link {
background: var(--ds-purple) !important;
border-color: var(--ds-purple) !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(123, 47, 247, 0.35) !important;
}
.p2m-pagination .page-item.disabled .page-link {
background: var(--ds-surface-lowest) !important;
border-color: var(--ds-glass-border) !important;
color: var(--ds-on-surface-muted) !important;
opacity: 0.5 !important;
}
[data-theme="light"] .p2m-pagination .page-link {
background: #fff !important;
border-color: rgba(0, 0, 0, 0.1) !important;
color: #1a1a2e !important;
}
[data-theme="light"] .p2m-pagination .page-item.disabled .page-link {
background: #f5f5f5 !important;
color: #aaa !important;
}
/* ─── 27. Skeleton Loaders ───────────────────────────────────── */
.skeleton-card {
background: var(--ds-surface-low) !important;
border-color: var(--ds-glass-border) !important;
}
.skeleton-img {
background: linear-gradient(
90deg,
var(--ds-surface-high) 25%,
var(--ds-surface-container) 50%,
var(--ds-surface-high) 75%
) !important;
background-size: 200% 100% !important;
}
.skeleton-line {
background: linear-gradient(
90deg,
var(--ds-surface-high) 25%,
var(--ds-surface-container) 50%,
var(--ds-surface-high) 75%
) !important;
background-size: 200% 100% !important;
}
[data-theme="light"] .skeleton-card {
background: #f0f0f5 !important;
border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .skeleton-img,
[data-theme="light"] .skeleton-line {
background: linear-gradient(90deg, #e8e8f0 25%, #d8d8e8 50%, #e8e8f0 75%) !important;
background-size: 200% 100% !important;
}
/* ─── 28. Video Cards ────────────────────────────────────────── */
.video-card {
background: var(--ds-glass-bg) !important;
border: 1px solid var(--ds-glass-border) !important;
border-radius: 14px !important;
transition:
background 0.25s var(--ds-ease),
border-color 0.25s var(--ds-ease),
transform 0.25s var(--ds-ease-out) !important;
}
.video-card:hover {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(123, 47, 247, 0.3) !important;
transform: translateY(-4px) !important;
}
.video-card-title {
font-family: var(--ds-font-headline) !important;
font-weight: 600;
line-height: 1.35;
}
.video-card-link {
color: var(--ds-on-surface) !important;
}
.video-card-link:hover {
color: var(--ds-purple) !important;
}
/* Play button overlay */
.video-card-play-btn {
background: rgba(123, 47, 247, 0.85) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(4px) !important;
transition: background 0.2s var(--ds-ease), transform 0.2s var(--ds-ease-out) !important;
}
.video-card:hover .video-card-play-btn {
background: var(--ds-purple) !important;
transform: scale(1.1) !important;
}
/* Source chip colours: keep rainbow but harmonize typography */
.video-source-chip,
.video-stat-chip {
font-family: var(--ds-font-label) !important;
font-size: 0.6rem !important;
font-weight: 700 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
border-radius: 999px !important;
}
/* Tag pills below video cards */
.video-tag-pill {
font-family: var(--ds-font-label) !important;
font-size: 0.6rem !important;
font-weight: 700 !important;
letter-spacing: 0.07em !important;
border-radius: 999px !important;
}
/* Featured video card: cyan accent line */
.search-card.video-card.video-card--featured {
border-color: rgba(0, 212, 255, 0.3) !important;
}
.search-card.video-card.video-card--featured:hover {
border-color: var(--ds-cyan) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 212, 255, 0.2) !important;
}
/* Videos filter panel */
.videos-page .videos-filter-panel {
background: var(--ds-glass-bg) !important;
border-color: var(--ds-glass-border) !important;
backdrop-filter: blur(12px) !important;
}
.videos-page .videos-filter-label {
font-family: var(--ds-font-label) !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
color: var(--ds-on-surface-muted) !important;
}
.videos-filter-chip {
font-family: var(--ds-font-label) !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
}
.videos-filter-chip.is-active {
border-color: var(--ds-purple) !important;
background: rgba(123, 47, 247, 0.15) !important;
color: var(--ds-silver) !important;
}
[data-theme="light"] .video-card {
background: #fff !important;
border-color: rgba(0, 0, 0, 0.07) !important;
}
[data-theme="light"] .video-card:hover {
border-color: rgba(123, 47, 247, 0.22) !important;
}
[data-theme="light"] .video-card-link {
color: #1a1a2e !important;
}
/* ─── 29. Gamification — Trophy / Badges ─────────────────────── */
/* Trophy FAB — theme-aware (matches nav utility buttons) */
.gm-trophy-fab,
#gmTrophyFab {
transition: transform 0.2s var(--ds-ease), box-shadow 0.2s var(--ds-ease), background 0.2s var(--ds-ease) !important;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-trophy-fab,
html:is([data-theme="dark"], [data-bs-theme="dark"]) #gmTrophyFab {
background: linear-gradient(145deg, rgba(123, 47, 247, 0.9) 0%, rgba(91, 33, 182, 0.95) 100%) !important;
color: #fff !important;
border: 1px solid rgba(220, 200, 255, 0.4) !important;
box-shadow: 0 4px 20px rgba(123, 47, 247, 0.45) !important;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-trophy-fab i,
html:is([data-theme="dark"], [data-bs-theme="dark"]) #gmTrophyFab i,
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-trophy-fab .bi,
html:is([data-theme="dark"], [data-bs-theme="dark"]) #gmTrophyFab .bi {
color: #fff !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-trophy-fab:hover,
html:is([data-theme="dark"], [data-bs-theme="dark"]) #gmTrophyFab:hover {
transform: scale(1.08) !important;
box-shadow: 0 6px 28px rgba(123, 47, 247, 0.55) !important;
border-color: rgba(242, 220, 160, 0.55) !important;
}
html[data-theme="light"] .gm-trophy-fab,
html[data-theme="light"] #gmTrophyFab {
background: var(--ds-surface) !important;
color: var(--ds-purple) !important;
border: 1px solid var(--ds-border-mid) !important;
box-shadow: 0 4px 20px rgba(18, 21, 32, 0.12) !important;
}
html[data-theme="light"] .gm-trophy-fab i,
html[data-theme="light"] #gmTrophyFab i,
html[data-theme="light"] .gm-trophy-fab .bi,
html[data-theme="light"] #gmTrophyFab .bi {
color: var(--ds-purple) !important;
filter: none !important;
}
html[data-theme="light"] .gm-trophy-fab:hover,
html[data-theme="light"] #gmTrophyFab:hover {
transform: scale(1.08) !important;
background: var(--ds-surface-low) !important;
border-color: rgba(123, 47, 247, 0.45) !important;
box-shadow: 0 6px 24px rgba(123, 47, 247, 0.2) !important;
}
/* Badge grid tiles */
.gm-badge-card {
background: var(--ds-surface-high) !important;
border-color: var(--ds-glass-border) !important;
color: var(--ds-on-surface-muted) !important;
transition: border-color 0.2s var(--ds-ease) !important;
}
.gm-badge-card i {
color: var(--ds-purple) !important;
}
.gm-badge-earned {
border-color: rgba(123, 47, 247, 0.5) !important;
box-shadow: 0 0 16px rgba(123, 47, 247, 0.25) !important;
background: rgba(123, 47, 247, 0.1) !important;
}
.gm-badge-earned i {
color: var(--ds-cyan) !important;
}
/* Badge overlay card */
#gmBadgeOverlayCard {
background: var(--ds-surface-low) !important;
border-color: var(--ds-purple) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(123, 47, 247, 0.3) !important;
}
#gmBadgeOverlayCard i {
color: var(--ds-purple) !important;
}
/* Streak toast */
.gm-toast {
background: var(--ds-surface-low) !important;
border: 1px solid var(--ds-glass-border) !important;
border-radius: 10px !important;
font-family: var(--ds-font-body);
}
/* Wheel modal */
.gm-wheel-modal {
background: var(--ds-surface-low) !important;
border: 1px solid var(--ds-glass-border) !important;
border-radius: 16px !important;
}
[data-theme="light"] .gm-badge-card {
background: #f5f4ff !important;
border-color: rgba(123, 47, 247, 0.1) !important;
color: #444 !important;
}
[data-theme="light"] .gm-badge-earned {
background: rgba(123, 47, 247, 0.06) !important;
border-color: rgba(123, 47, 247, 0.35) !important;
}
/* ─── 30. Subscribe Card ─────────────────────────────────────── */
.subscribe-card {
background: linear-gradient(
135deg,
rgba(123, 47, 247, 0.08) 0%,
rgba(0, 212, 255, 0.04) 100%
) !important;
border: 1px solid rgba(123, 47, 247, 0.22) !important;
border-radius: 16px !important;
}
.subscribe-icon {
color: var(--ds-purple) !important;
}
.subscribe-heading {
font-family: var(--ds-font-headline) !important;
font-weight: 700;
color: var(--ds-on-surface) !important;
}
.subscribe-desc {
color: var(--ds-on-surface-muted) !important;
}
.subscribe-desc strong {
color: var(--ds-on-surface) !important;
}
.subscribe-form-inner {
background: var(--ds-glass-bg) !important;
border-color: var(--ds-glass-border) !important;
}
.subscribe-input {
background: transparent !important;
color: var(--ds-on-surface) !important;
font-family: var(--ds-font-body) !important;
}
.subscribe-input:focus {
border-color: var(--ds-purple) !important;
box-shadow: 0 0 0 3px rgba(123, 47, 247, 0.15) !important;
}
.subscribe-btn {
background: var(--ds-purple) !important;
border-color: var(--ds-purple) !important;
font-family: var(--ds-font-label) !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
border-radius: 999px !important;
transition: background 0.2s var(--ds-ease), transform 0.2s var(--ds-ease), box-shadow 0.2s var(--ds-ease) !important;
}
.subscribe-btn:hover {
background: #8f3fff !important;
border-color: #8f3fff !important;
transform: scale(1.03) !important;
box-shadow: 0 6px 20px rgba(123, 47, 247, 0.38) !important;
}
.subscribe-msg.is-success {
color: var(--ds-success) !important;
}
.subscribe-msg.is-error {
color: #f87171 !important;
}
[data-theme="light"] .subscribe-card {
background: linear-gradient(135deg, rgba(123,47,247,0.04) 0%, rgba(0,212,255,0.02) 100%) !important;
border-color: rgba(123, 47, 247, 0.15) !important;
}
[data-theme="light"] .subscribe-heading {
color: #1a1a2e !important;
}
[data-theme="light"] .subscribe-input {
color: #1a1a2e !important;
}
/* ─── 31. Table of Contents ──────────────────────────────────── */
.toc-card {
background: var(--ds-glass-bg) !important;
border-color: var(--ds-glass-border) !important;
border-radius: 12px !important;
}
.toc-list a {
color: var(--ds-on-surface-muted) !important;
font-family: var(--ds-font-body);
}
.toc-list a:hover {
color: var(--ds-purple) !important;
}
.toc-list a::before {
color: var(--ds-purple) !important;
}
[data-theme="light"] .toc-card {
background: #fff !important;
border-color: rgba(0, 0, 0, 0.07) !important;
}
[data-theme="light"] .toc-list a {
color: #555 !important;
}
/* ─── 32. Sidebar Widget Headings ────────────────────────────── */
.sidebar-widget-heading {
font-family: var(--ds-font-label) !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ds-on-surface) !important;
border-bottom: 2px solid var(--ds-purple) !important;
padding-bottom: 0.65rem;
margin-bottom: 1rem;
}
.sidebar-widget-heading .bi {
color: var(--ds-purple) !important;
}
[data-theme="light"] .sidebar-widget-heading {
color: #1a1a2e !important;
}
[data-theme="light"] .sidebar-widget-heading .bi {
color: var(--ds-purple) !important;
}
/* ─── 33. Category Hub Cards ─────────────────────────────────── */
a.category-hub-card {
background: var(--ds-glass-bg) !important;
border: 1px solid var(--ds-glass-border) !important;
border-radius: 14px !important;
transition:
background 0.25s var(--ds-ease),
border-color 0.25s var(--ds-ease),
transform 0.25s var(--ds-ease-out) !important;
text-decoration: none !important;
overflow: hidden;
}
a.category-hub-card:hover {
background: rgba(255, 255, 255, 0.07) !important;
border-color: rgba(123, 47, 247, 0.3) !important;
transform: translateY(-5px) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="light"] a.category-hub-card {
background: #fff !important;
border-color: rgba(0, 0, 0, 0.07) !important;
}
[data-theme="light"] a.category-hub-card:hover {
border-color: rgba(123, 47, 247, 0.22) !important;
background: rgba(123, 47, 247, 0.02) !important;
}
/* ─── 34. Empty State ────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 3rem 1.5rem;
}
.empty-state .empty-icon {
display: block;
font-size: 3rem;
color: var(--ds-purple) !important;
opacity: 0.6;
margin-bottom: 1rem;
}
.empty-state h4 {
font-family: var(--ds-font-headline) !important;
color: var(--ds-on-surface) !important;
}
.empty-state p {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .empty-state h4 {
color: #1a1a2e !important;
}
/* ─── 35. Coming Soon Message ────────────────────────────────── */
.coming-soon-message {
background: linear-gradient(
135deg,
rgba(123, 47, 247, 0.12) 0%,
rgba(0, 212, 255, 0.06) 100%
) !important;
border: 1px solid rgba(123, 47, 247, 0.22) !important;
border-radius: 16px !important;
}
.coming-soon-message .cs-icon {
color: var(--ds-purple) !important;
}
.coming-soon-message h3 {
font-family: var(--ds-font-headline) !important;
font-weight: 700;
color: var(--ds-on-surface) !important;
}
.coming-soon-message p {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .coming-soon-message {
background: linear-gradient(135deg, rgba(123,47,247,0.06) 0%, rgba(0,212,255,0.03) 100%) !important;
color: #1a1a2e !important;
}
/* ─── 36. Page Title Area ────────────────────────────────────── */
.page-title-area {
background: linear-gradient(180deg, var(--ds-surface-low) 0%, transparent 100%) !important;
padding-top: 1rem !important; /* tighter than Bootstrap py-4 (1.5rem) — matches home page snugness */
}
.page-title-crumb {
font-family: var(--ds-font-label) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.page-title-crumb a {
color: var(--ds-purple) !important;
}
.page-title-crumb a:hover {
color: var(--ds-cyan) !important;
text-decoration: none !important;
}
/* Breadcrumb separators */
.breadcrumb-item.active {
color: var(--ds-on-surface-muted) !important;
}
.breadcrumb-item a {
color: var(--ds-purple) !important;
}
.breadcrumb-item a:hover {
color: var(--ds-cyan) !important;
}
[data-theme="light"] .page-title-area {
background: linear-gradient(180deg, #f0eeff 0%, transparent 100%) !important;
}
[data-theme="light"] .page-title-crumb a {
color: var(--ds-purple) !important;
}
/* ─── 37. Featured Card Accent ───────────────────────────────── */
.search-card.search-card--featured {
border-color: rgba(123, 47, 247, 0.38) !important;
box-shadow:
0 16px 34px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(123, 47, 247, 0.15) !important;
}
.search-card.search-card--featured::before {
opacity: 1;
height: 3px;
background: linear-gradient(90deg, var(--ds-purple), var(--ds-cyan)) !important;
}
.search-card.search-card--featured:hover {
border-color: rgba(123, 47, 247, 0.55) !important;
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(123, 47, 247, 0.3) !important;
}
/* Status badge — featured pill variant */
.status-badge.status-badge--featured {
background: linear-gradient(135deg, var(--ds-purple), var(--ds-cyan)) !important;
color: #fff !important;
font-family: var(--ds-font-label);
font-size: 0.6rem;
letter-spacing: 0.08em;
border-radius: 999px !important;
border: none !important;
}
/* ─── 39. Hero Split Layout ──────────────────────────────────── */
.hero-section--split {
background:
radial-gradient(circle at 65% 5%, var(--ds-hero-glow-purple), transparent 55%),
var(--ds-surface-lowest) !important;
min-height: 88vh;
display: flex;
align-items: center;
padding: 6rem 0 3rem !important;
position: relative;
overflow: visible;
}
.hero-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(120px);
}
.hero-glow--purple {
width: 580px;
height: 580px;
background: rgba(123,47,247,0.1);
top: 50%;
right: -80px;
transform: translateY(-50%);
}
.hero-glow--cyan {
width: 380px;
height: 380px;
background: rgba(0,212,255,0.07);
bottom: -80px;
left: -40px;
}
.hero-split-inner {
position: relative;
z-index: 2;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 1rem;
border: 1px solid rgba(123,47,247,0.32);
background: rgba(123,47,247,0.09);
border-radius: 999px;
font-family: var(--ds-font-label);
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ds-purple);
}
.hero-tagline--split {
font-family: var(--ds-font-headline) !important;
font-size: clamp(2rem, 4.5vw, 3.6rem) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: -0.02em;
color: var(--ds-on-surface) !important;
text-shadow: none !important;
margin: 0 !important;
}
.hero-tagline--split em,
.hero-tagline--split .hero-tagline-focus {
color: var(--ds-purple) !important;
font-style: italic;
text-shadow: 0 0 28px rgba(123,47,247,0.45);
}
.hero-editorial-wrap {
position: relative;
display: block;
width: 100%;
max-width: 420px;
margin-left: auto;
margin-right: 0;
overflow: visible;
}
.hero-section--split .col-lg-7 {
overflow: visible;
}
.hero-editorial-img-frame {
aspect-ratio: 3/4;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
transform: none;
transition: box-shadow 0.5s ease;
box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(123,47,247,0.08);
position: relative;
width: 100%;
}
.hero-editorial-img-frame:hover {
box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(123,47,247,0.15);
}
@keyframes heroImgShake {
0% { transform: rotate(0deg); }
10% { transform: rotate(-1.5deg); }
20% { transform: rotate(1.5deg); }
30% { transform: rotate(-1deg); }
40% { transform: rotate(1deg); }
50% { transform: rotate(-0.5deg); }
60% { transform: rotate(0.5deg); }
70% { transform: rotate(-0.25deg); }
80% { transform: rotate(0.25deg); }
100% { transform: rotate(0deg); }
}
.hero-editorial-img-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: none;
}
.hero-editorial-img-frame:hover img {
animation: heroImgShake 1.2s ease-in-out;
}
/* CSS-only editorial placeholder when no real image */
.hero-editorial-placeholder {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 25%, rgba(123,47,247,0.28) 0%, transparent 55%),
radial-gradient(circle at 75% 75%, rgba(0,212,255,0.18) 0%, transparent 55%),
linear-gradient(145deg, #1a1b20 0%, #0d0e12 60%, #120820 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.hero-editorial-placeholder img {
width: 140px;
opacity: 0.55;
filter: brightness(0) invert(1);
}
.hero-editorial-placeholder .editorial-tagline {
font-family: var(--ds-font-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(123,47,247,0.65);
}
.hero-float-card {
position: absolute;
bottom: 1.25rem;
left: 0;
transform: translateX(-50%);
background: rgba(13,14,18,0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
padding: 1rem 1.25rem;
width: min(240px, 52vw);
max-width: 240px;
box-shadow: 0 8px 32px rgba(0,0,0,0.55);
z-index: 4;
pointer-events: none;
}
.hero-float-title {
font-family: var(--ds-font-headline) !important;
font-size: 1.15rem !important;
font-weight: 700 !important;
color: var(--ds-silver) !important;
margin-bottom: 0.3rem !important;
line-height: 1.2;
}
.hero-float-desc {
font-size: 0.75rem;
color: var(--ds-on-surface-muted);
margin: 0;
line-height: 1.5;
}
/* Hero image column — mobile + tablet */
@media (max-width: 991.98px) {
.hero-section--split {
min-height: auto;
padding-top: 1.5rem !important; /* navbar ~52px + this 24px = snug but breathable */
padding-bottom: 2rem !important;
overflow-x: clip; /* hero-glow--purple (580px wide, right:-80px) causes horizontal scroll on mobile */
}
/* Compress Bootstrap mb-4 / mt-4 / mb-5 utilities inside the hero */
.hero-section--split .hero-eyebrow {
margin-bottom: 0.6rem !important;
}
.hero-section--split .hero-subtext {
margin-top: 0.75rem !important;
margin-bottom: 0 !important; /* gap handled by hero-actions margin-top */
margin-left: 0 !important;
text-align: left !important;
}
/* Slightly smaller headline on phones */
.hero-section--split .hero-tagline--split {
font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
line-height: 1.12 !important;
}
.hero-editorial-col {
margin-top: 0.25rem;
}
.hero-editorial-wrap {
max-width: min(320px, 86vw);
margin-left: auto;
margin-right: auto;
}
.hero-editorial-img-frame {
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}
.hero-float-card {
width: min(210px, 72vw);
bottom: 0.75rem;
left: 0.75rem;
transform: none; /* translateX(-48%) pushes card off viewport left on narrow screens */
}
.hero-section--split .hero-scroll-cue {
display: none;
}
/* Stacked buttons: centered */
.hero-section--split .hero-actions {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.65rem !important;
width: 100%;
margin-top: 1rem !important;
}
.hero-section--split .hero-actions .btn {
width: min(288px, 84vw) !important;
min-height: 48px !important;
font-weight: 700 !important;
letter-spacing: 0.025em !important;
font-size: 0.875rem !important;
white-space: nowrap;
}
/* ── Homepage section rhythm: tighten py-5 on mobile ── */
.home-value-section,
.cat-stream-section,
.gm-challenge-section {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
}
/* ─── 40. Category Stream Mini-Tiles ─────────────────────────── */
.cat-stream-section {
background: var(--ds-surface-lowest) !important;
border-top: 1px solid var(--ds-border-subtle) !important;
position: relative;
overflow: hidden;
}
.cat-stream-section::before {
content: '';
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 200px;
background: radial-gradient(ellipse, rgba(0,212,255,0.06), transparent 70%);
pointer-events: none;
}
.cat-stream-label {
font-family: var(--ds-font-label);
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--ds-cyan);
}
.cat-stream-heading {
font-family: var(--ds-font-headline) !important;
font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
font-weight: 700 !important;
color: var(--ds-on-surface) !important;
line-height: 1.2 !important;
}
.cat-stream-heading em {
color: var(--ds-purple);
font-style: italic;
}
.cat-stream-filter-row {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: center;
}
.cat-stream-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 1rem;
border-radius: 999px;
font-family: var(--ds-font-label);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.04);
color: var(--ds-on-surface-muted);
cursor: pointer;
transition: border-color 0.2s, color 0.2s, background 0.2s;
text-decoration: none !important;
}
.cat-stream-pill:hover,
.cat-stream-pill--active {
border-color: var(--ds-purple) !important;
background: rgba(123,47,247,0.13) !important;
color: var(--ds-silver) !important;
}
.cat-stream-pill--live {
border-color: var(--ds-purple) !important;
background: rgba(123,47,247,0.13) !important;
color: var(--ds-silver) !important;
}
.cat-stream-pill .live-dot {
display: inline-block;
width: 6px;
height: 6px;
background: #ef4444;
border-radius: 50%;
animation: livePulse 1.4s infinite;
}
@keyframes livePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.cat-stream-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 480px) {
.cat-stream-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
.cat-stream-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 992px) {
.cat-stream-grid { grid-template-columns: repeat(6, 1fr); }
}
.cat-stream-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 1.4rem 0.75rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
text-decoration: none !important;
transition: background 0.25s, border-color 0.25s, transform 0.25s;
color: var(--ds-silver);
}
.cat-stream-tile:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(123,47,247,0.3);
transform: translateY(-3px);
color: var(--ds-silver);
}
.cat-stream-tile i {
font-size: 1.6rem;
color: var(--ds-purple);
transition: color 0.25s;
}
.cat-stream-tile:hover i {
color: var(--ds-cyan);
}
.cat-stream-tile-label {
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
line-height: 1.3;
}
/* Article count + Growing badge on category tiles */
.cat-stream-tile-count {
font-size: 0.58rem;
color: var(--ds-on-surface-muted);
text-align: center;
margin-top: 0.15rem;
display: flex;
align-items: center;
gap: 0.3rem;
flex-wrap: wrap;
justify-content: center;
line-height: 1.2;
}
.cat-stream-tile-badge {
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(123,47,247,0.15);
color: var(--ds-purple);
border-radius: 3px;
padding: 1px 4px;
}
.cat-stream-tile--growing {
opacity: 0.75;
}
.cat-stream-tile--growing:hover {
opacity: 1;
}
[data-theme="light"] .cat-stream-tile-count {
color: var(--ds-on-surface-muted);
}
[data-theme="light"] .cat-stream-tile-badge {
background: rgba(123,47,247,0.1);
}
/* ─── 41. Discovery Card 4:5 Portrait Upgrade ────────────────── */
.disc-card-tall {
display: flex;
flex-direction: column;
}
.disc-card-tall .card-thumb-wrap {
display: block;
aspect-ratio: 4/5;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.05);
margin-bottom: 1rem;
position: relative;
}
.disc-card-tall .card-thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.disc-card-tall:hover .card-thumb-wrap img {
transform: scale(1.05);
}
.disc-card-tall .card-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin-bottom: 0.5rem;
}
.disc-card-tall .card-title-link {
font-family: var(--ds-font-headline) !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: var(--ds-silver) !important;
text-decoration: none !important;
transition: color 0.2s;
display: block;
margin-bottom: 0.35rem;
}
.disc-card-tall:hover .card-title-link {
color: var(--ds-purple) !important;
}
.disc-card-tall .btn-explore {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ds-purple) !important;
text-decoration: none !important;
padding: 0;
background: none;
border: none;
margin-top: 0.5rem;
transition: transform 0.2s;
}
.disc-card-tall:hover .btn-explore {
transform: translateX(4px);
}
/* Status badge overlay on card image */
.card-cat-badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
font-family: var(--ds-font-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 0.28rem 0.7rem;
border-radius: 999px;
background: rgba(10,10,14,0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.14);
color: #fff;
pointer-events: none;
}
/* ─── 42. Gamification Progress Block (redesign) ─────────────── */
.gm-progress-block {
background: linear-gradient(145deg, var(--ds-surface-container) 0%, var(--ds-surface) 100%);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 24px;
padding: 3rem;
position: relative;
overflow: hidden;
}
.gm-progress-block::before {
content: '';
position: absolute;
right: -80px;
bottom: -80px;
width: 350px;
height: 350px;
background: rgba(123,47,247,0.1);
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
.gm-progress-block-label {
font-family: var(--ds-font-label);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--ds-purple);
display: block;
margin-bottom: 0.75rem;
}
.gm-progress-block-title {
font-family: var(--ds-font-headline) !important;
font-size: clamp(1.5rem, 3vw, 2rem) !important;
font-weight: 700 !important;
color: var(--ds-silver) !important;
margin-bottom: 1.5rem !important;
line-height: 1.25 !important;
}
.gm-progress-bar-wrap {
margin-bottom: 1rem;
}
.gm-progress-bar-label {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-family: var(--ds-font-label);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.gm-progress-bar-label span:first-child { color: var(--ds-silver); }
.gm-progress-bar-label span:last-child { color: var(--ds-purple); }
.gm-progress-track {
height: 6px;
background: rgba(255,255,255,0.05);
border-radius: 999px;
overflow: hidden;
}
.gm-progress-fill {
height: 100%;
background: var(--ds-purple);
border-radius: 999px;
box-shadow: 0 0 10px rgba(123,47,247,0.6);
transition: width 1s ease;
}
.gm-badge-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.gm-badge-cell {
aspect-ratio: 1;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 0.5rem;
transition: background 0.25s;
}
.gm-badge-cell:hover { background: rgba(255,255,255,0.05); }
.gm-badge-cell--locked {
opacity: 0.3;
}
.gm-badge-cell i {
font-size: 2rem;
}
.gm-badge-cell--gold i { color: #f59e0b; }
.gm-badge-cell--purple i { color: var(--ds-purple); }
.gm-badge-cell--cyan i { color: var(--ds-cyan); }
.gm-badge-cell-name {
font-family: var(--ds-font-label);
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
text-align: center;
}
/* ─── 42b. Gamification Challenge Section (homepage redesign) ── */
.gm-challenge-section {
background: linear-gradient(180deg, var(--ds-surface-lowest) 0%, var(--ds-surface) 100%);
}
.gm-challenge-wrap {
background: linear-gradient(145deg, var(--ds-surface-container) 0%, rgba(18,19,23,0.9) 100%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 24px;
padding: 2.5rem;
position: relative;
overflow: hidden;
}
.gm-challenge-wrap::before {
content: '';
position: absolute;
top: -120px;
right: -80px;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(123,47,247,0.12) 0%, transparent 70%);
pointer-events: none;
}
.gm-challenge-strip {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
.gm-block-heading {
font-family: var(--ds-font-headline) !important;
font-size: clamp(1.4rem, 3vw, 1.9rem) !important;
font-weight: 700 !important;
color: var(--ds-silver) !important;
line-height: 1.2 !important;
margin-top: 0.35rem !important;
}
.gm-xp-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: rgba(123,47,247,0.12);
border: 1px solid rgba(123,47,247,0.3);
border-radius: 999px;
padding: 0.45rem 1rem;
font-family: var(--ds-font-label);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #d2bbff;
white-space: nowrap;
}
.gm-xp-pill i { color: var(--ds-purple); font-size: 0.78rem; }
.gm-xp-pill-sep { opacity: 0.4; }
.gm-active-challenge {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
padding: 1.5rem;
position: relative;
overflow: hidden;
}
.gm-active-challenge::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--ds-purple), var(--ds-cyan));
border-radius: 3px 0 0 3px;
}
.gm-active-challenge-eyebrow {
font-family: var(--ds-font-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-purple);
margin-bottom: 0.4rem;
}
.gm-active-challenge-title {
font-family: var(--ds-font-headline) !important;
font-size: 1.15rem !important;
font-weight: 600 !important;
color: var(--ds-silver) !important;
line-height: 1.3 !important;
margin: 0 0 0.5rem !important;
}
.gm-active-challenge-desc {
font-size: 0.82rem;
color: var(--ds-on-surface-muted);
line-height: 1.6;
margin: 0;
}
.gm-challenge-complete-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: rgba(52,211,153,0.12);
border: 1px solid rgba(52,211,153,0.3);
border-radius: 999px;
padding: 0.3rem 0.75rem;
font-family: var(--ds-font-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6ee7b7;
}
.gm-challenge-complete-badge:empty { display: none; }
.gm-quick-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.gm-quick-stat {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 1rem 0.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
text-align: center;
}
.gm-quick-stat-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
margin-bottom: 0.2rem;
}
.gm-quick-stat-icon--fire { background: rgba(245,158,11,0.12); color: #f59e0b; }
.gm-quick-stat-icon--cyan { background: rgba(0,212,255,0.1); color: var(--ds-cyan); }
.gm-quick-stat-icon--gold { background: rgba(250,204,21,0.1); color: #facc15; }
.gm-quick-stat-val {
font-family: var(--ds-font-headline);
font-size: 1.5rem;
font-weight: 700;
color: var(--ds-silver);
line-height: 1;
}
.gm-quick-stat-label {
font-family: var(--ds-font-label);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
}
.gm-badge-showcase { }
.gm-badge-showcase-label {
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin-bottom: 1rem;
}
@media (max-width: 575px) {
.gm-challenge-wrap { padding: 1.5rem 1.25rem; }
.gm-challenge-strip { flex-direction: column; align-items: flex-start; }
}
/* ─── 43. Categories Bento Grid ─────────────────────────────── */
.bento-section-heading {
font-family: var(--ds-font-headline) !important;
font-size: clamp(1.8rem, 4vw, 3rem) !important;
font-weight: 700 !important;
color: var(--ds-silver) !important;
line-height: 1.15 !important;
}
.bento-section-heading em {
color: var(--ds-purple);
font-style: italic;
}
/* Featured large card */
.bento-feature-card {
position: relative;
border-radius: 14px;
overflow: hidden;
background: var(--ds-surface-container);
transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s;
display: block;
text-decoration: none !important;
color: var(--ds-silver) !important;
}
.bento-feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 28px 60px rgba(0,0,0,0.6);
color: var(--ds-silver) !important;
}
.bento-img-frame {
width: 100%;
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
background: var(--ds-surface-low);
}
.bento-feature-card.bento-card--tall .bento-img-frame {
aspect-ratio: 3/4;
}
.bento-img-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s ease;
}
.bento-feature-card:hover .bento-img-frame img {
transform: scale(1.07);
}
/* CSS-only editorial image placeholder */
.bento-img-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.bento-img-placeholder--women {
background-image: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&q=80&auto=format&fit=crop');
background-size: cover;
background-position: center top;
}
.bento-img-placeholder--beauty {
background: radial-gradient(circle at 50% 50%, rgba(0,212,255,0.2) 0%, transparent 60%),
linear-gradient(145deg, #0d1a1e 0%, #0d0e12 100%);
}
.bento-img-placeholder--men {
background-image: url('https://images.unsplash.com/photo-1490578474895-699cd4e2cf59?w=800&q=80&auto=format&fit=crop');
background-size: cover;
background-position: center top;
}
.bento-img-placeholder--home {
background: radial-gradient(circle at 80% 30%, rgba(123,47,247,0.15) 0%, transparent 55%),
linear-gradient(145deg, #16121e 0%, #0d0e12 100%);
}
.bento-img-placeholder i {
font-size: 4rem;
color: rgba(123,47,247,0.4);
}
.bento-feature-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(11,12,16,0.97) 0%, rgba(11,12,16,0.5) 40%, transparent 75%);
}
.bento-feature-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem 1.75rem;
z-index: 2;
}
.bento-feature-title {
font-family: var(--ds-font-headline) !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
color: #fff !important;
margin-bottom: 0.5rem !important;
line-height: 1.2;
}
.bento-feature-tag {
display: inline-block;
font-family: var(--ds-font-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.2rem 0.65rem;
border-radius: 999px;
margin-right: 0.4rem;
margin-top: 0.25rem;
}
.bento-feature-tag--purple {
border: 1px solid var(--ds-purple);
color: var(--ds-purple);
}
.bento-feature-tag--cyan {
border: 1px solid var(--ds-cyan);
color: var(--ds-cyan);
}
.bento-feature-card--overlay .bento-feature-tag--purple {
background: rgba(123, 47, 247, 0.35) !important;
border-color: rgba(200, 160, 255, 0.55) !important;
color: #f3e8ff !important;
}
.bento-feature-card--overlay .bento-feature-tag--cyan {
background: rgba(0, 148, 180, 0.3) !important;
border-color: rgba(120, 220, 255, 0.5) !important;
color: #d4f7ff !important;
}
.bento-feature-explore {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--ds-font-label);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: var(--ds-purple);
border: none;
padding: 0.5rem 1.25rem;
border-radius: 999px;
margin-top: 0.75rem;
text-decoration: none !important;
transition: transform 0.2s;
}
.bento-feature-explore:hover {
transform: scale(1.05);
color: #fff !important;
}
/* ── Overlay variant: content sits inside the image at the bottom ── */
.bento-feature-card--overlay {
min-height: 320px;
display: block;
}
/* Image + gradient must cover the full card (overlay text sits on card bottom) */
.bento-feature-card--overlay .bento-img-frame--fill {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 320px;
aspect-ratio: unset;
overflow: hidden;
}
.bento-img-frame--fill {
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
}
.bento-img-frame--fill .bento-img-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Strong bottom gradient so text reads clearly */
.bento-img-frame--fill::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(11,12,16,1) 0%,
rgba(11,12,16,0.92) 25%,
rgba(11,12,16,0.55) 55%,
rgba(11,12,16,0.1) 80%,
transparent 100%);
z-index: 1;
}
.bento-overlay-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.75rem 2rem;
z-index: 2;
}
.bento-overlay-body--sm {
padding: 1.25rem 1.5rem;
}
.bento-overlay-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 1rem;
}
.bento-overlay-row-label {
font-family: var(--ds-font-label);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 0.5rem;
}
/* On image overlays only — never inherit light-theme dark tokens */
.bento-feature-card--overlay .bento-overlay-row-label {
color: rgba(255, 255, 255, 0.72) !important;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}
.bento-feature-card--overlay .bento-overlay-list li,
.bento-feature-card--overlay .bento-overlay-hot {
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
.bento-overlay-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.bento-overlay-list li {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.92);
cursor: default;
transition: color 0.2s;
}
.bento-feature-card--overlay:hover .bento-overlay-list li:hover {
color: var(--ds-purple);
}
.bento-overlay-hot {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.92);
line-height: 1.5;
}
.bento-overlay-pct {
color: var(--ds-cyan);
font-weight: 600;
}
.bento-overlay-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
background: var(--ds-purple);
padding: 0.55rem 1.25rem;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
transition: transform 0.2s, box-shadow 0.2s;
}
.bento-feature-card--overlay:hover .bento-overlay-cta {
transform: scale(1.04);
box-shadow: 0 4px 16px rgba(123,47,247,0.5);
}
.bento-overlay-desc {
font-size: 0.82rem;
color: rgba(224,224,224,0.65);
margin: 0.25rem 0 0;
line-height: 1.5;
}
/* Pipe-separated tags (Men's Fashion) */
.bento-pipe-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
margin-top: 0.6rem;
}
.bento-pipe-tag {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.88);
padding-right: 0.9rem;
margin-right: 0.9rem;
border-right: 1px solid rgba(255,255,255,0.2);
line-height: 1;
}
.bento-pipe-tag:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;
}
/* Beauty texture strip */
.bento-beauty-texture {
width: 100%;
height: 80px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.bento-beauty-texture-inner {
width: 100%;
height: 100%;
background: radial-gradient(ellipse at 40% 50%, rgba(123,47,247,0.35) 0%, rgba(0,212,255,0.2) 50%, transparent 80%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.bento-beauty-texture-inner::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 8px,
rgba(123,47,247,0.04) 8px,
rgba(123,47,247,0.04) 16px
);
}
/* Space Archetypes list (Home card) */
.bento-archetypes-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.bento-archetypes-list li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
font-size: 0.9rem;
color: var(--ds-silver);
cursor: default;
transition: color 0.2s, transform 0.2s;
}
.bento-archetypes-list li:last-child { border-bottom: none; }
.bento-archetypes-list li i {
opacity: 0;
font-size: 0.75rem;
transition: opacity 0.2s, transform 0.2s;
color: var(--ds-purple);
}
.bento-glass-card:hover .bento-archetypes-list li:hover {
color: var(--ds-purple);
}
.bento-glass-card:hover .bento-archetypes-list li:hover i {
opacity: 1;
transform: translateX(3px);
}
/* Data insight chip */
.bento-data-insight {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
padding: 1rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.bento-data-insight-label {
font-family: var(--ds-font-label);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin-bottom: 0.4rem;
}
.bento-data-insight-val {
font-family: var(--ds-font-headline);
font-size: 1.8rem;
font-weight: 700;
color: var(--ds-cyan);
line-height: 1;
margin-bottom: 0.3rem;
}
.bento-data-insight-desc {
font-size: 0.75rem;
color: var(--ds-silver);
line-height: 1.4;
}
/* Home photo strip */
.bento-home-photo {
width: 100%;
height: 80px;
border-radius: 8px;
background: radial-gradient(ellipse at 60% 50%, rgba(123,47,247,0.18) 0%, rgba(0,212,255,0.08) 50%, transparent 80%),
linear-gradient(135deg, rgba(22,18,30,0.95) 0%, rgba(13,14,18,0.95) 100%);
border: 1px solid rgba(255,255,255,0.05);
flex-shrink: 0;
}
/* Newsletter email form */
.bento-iq-form {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.bento-iq-input-wrap {
border-bottom: 1px solid rgba(224,224,224,0.3);
transition: border-color 0.2s;
}
.bento-iq-input-wrap:focus-within {
border-color: var(--ds-purple);
}
.bento-iq-input {
display: block;
width: 100%;
background: transparent;
border: none;
outline: none;
padding: 0.85rem 0;
color: var(--ds-silver);
font-size: 0.95rem;
caret-color: var(--ds-purple);
}
.bento-iq-input::placeholder { color: rgba(224,224,224,0.3); }
.bento-iq-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--ds-purple);
color: #fff !important;
font-family: var(--ds-font-label);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 1rem 2rem;
border-radius: 999px;
text-decoration: none !important;
transition: transform 0.2s, box-shadow 0.2s;
}
.bento-iq-btn:hover {
transform: scale(1.02);
box-shadow: 0 6px 24px rgba(123,47,247,0.45);
color: #fff !important;
}
/* Glass card variant */
.bento-glass-card {
background: rgba(255,255,255,0.04);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 2rem;
height: 100%;
transition: border-color 0.25s;
}
.bento-glass-card:hover {
border-color: rgba(123,47,247,0.28);
}
.bento-glass-card-title {
font-family: var(--ds-font-headline) !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
color: var(--ds-silver) !important;
margin-bottom: 0.75rem !important;
}
.bento-trend-item {
padding: 0.6rem 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
gap: 0.1rem;
transition: background 0.2s;
cursor: pointer;
}
.bento-trend-item:last-child { border-bottom: none; }
.bento-trend-item-title {
font-family: var(--ds-font-label);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-silver);
transition: color 0.2s;
}
.bento-trend-item:hover .bento-trend-item-title {
color: var(--ds-purple);
}
.bento-trend-item-sub {
font-size: 0.72rem;
color: var(--ds-on-surface-muted);
}
/* Medium bento card (image with overlay) */
.bento-card-medium {
position: relative;
border-radius: 14px;
overflow: hidden;
background: var(--ds-surface-container);
transition: transform 0.4s;
display: block;
text-decoration: none !important;
color: var(--ds-silver) !important;
}
.bento-card-medium:hover {
transform: translateY(-3px);
color: var(--ds-silver) !important;
}
.bento-card-medium .bento-img-frame {
aspect-ratio: 4/3;
}
.bento-card-medium:hover .bento-img-frame img {
transform: scale(1.05);
}
.bento-card-medium .bento-feature-body {
padding: 1.25rem 1.5rem;
}
.bento-card-medium .bento-feature-title {
font-size: 1.2rem !important;
}
.bento-sub-tags {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.bento-sub-tag {
font-size: 0.73rem;
color: var(--ds-silver);
opacity: 0.75;
border-right: 1px solid rgba(255,255,255,0.2);
padding-right: 0.75rem;
}
.bento-sub-tag:last-child {
border-right: none;
padding-right: 0;
}
/* Newsletter CTA card */
.bento-cta-card {
background: var(--ds-surface-high);
border-radius: 14px;
padding: 3rem;
position: relative;
overflow: hidden;
}
.bento-cta-card::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: rgba(123,47,247,0.12);
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
.bento-cta-title {
font-family: var(--ds-font-headline) !important;
font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
font-weight: 700 !important;
color: var(--ds-on-surface) !important;
}
.bento-cta-title em {
color: var(--ds-purple);
text-shadow: 0 0 20px rgba(123,47,247,0.5);
font-style: normal;
}
/* ─── 44. Article Page Redesign ─────────────────────────────── */
/* 2-col article hero */
.article-hero-section {
background:
radial-gradient(circle at 80% 20%, var(--ds-hero-glow-purple), transparent 50%),
var(--ds-surface-lowest) !important;
padding: 2rem 0 1.5rem !important;
border-bottom: 1px solid var(--ds-border-subtle) !important;
}
.article-hero-section .section-heading,
.article-hero-section .ds-headline {
color: var(--ds-on-surface) !important;
}
.article-hero-section .text-muted {
color: var(--ds-on-surface-muted) !important;
}
.article-hero-img-frame {
aspect-ratio: 4/3;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.07);
position: relative;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.article-hero-img-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: filter 0.4s;
filter: grayscale(0.15);
}
.article-hero-img-frame:hover img {
filter: grayscale(0);
}
.article-hero-img-glow {
position: absolute;
inset: -1rem;
background: rgba(123,47,247,0.12);
filter: blur(40px);
border-radius: 50%;
opacity: 0.4;
pointer-events: none;
z-index: -1;
}
.article-hero-img-placeholder {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 40% 40%, rgba(123,47,247,0.22) 0%, transparent 55%),
radial-gradient(circle at 65% 65%, rgba(0,212,255,0.14) 0%, transparent 55%),
linear-gradient(145deg, #1a1b20 0%, #0d0e12 100%);
display: flex;
align-items: center;
justify-content: center;
}
.article-hero-img-placeholder i {
font-size: 3.5rem;
color: rgba(123,47,247,0.35);
}
.article-hero-meta-row {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
font-family: var(--ds-font-label);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
}
.article-hero-meta-row i {
margin-right: 0.25rem;
}
/* TOC left sidebar */
.article-toc-sidebar {
position: sticky;
top: 5rem;
}
.article-toc-label {
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin-bottom: 1rem;
display: block;
}
.article-toc-nav {
display: flex;
flex-direction: column;
gap: 0.6rem;
border-left: 2px solid rgba(255,255,255,0.07);
}
.article-toc-link {
font-size: 0.78rem;
color: var(--ds-on-surface-muted);
text-decoration: none !important;
padding-left: 0.85rem;
line-height: 1.4;
transition: color 0.2s, border-color 0.2s;
border-left: 2px solid transparent;
margin-left: -2px;
}
.article-toc-link:hover,
.article-toc-link.is-active {
color: var(--ds-purple);
border-left-color: var(--ds-purple);
}
/* Community buttons sidebar row */
.article-community-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding-top: 1.5rem;
margin-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.05);
}
/* Article layout 3-col */
.article-3col-layout {
display: grid;
gap: 2rem;
}
@media (min-width: 992px) {
.article-3col-layout {
grid-template-columns: 180px 1fr 260px;
}
}
/* TOC active link JS scrollspy */
.article-toc-link.is-active {
color: var(--ds-purple) !important;
border-left-color: var(--ds-purple) !important;
}
/* Right sidebar widgets */
.article-sidebar-widget {
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 1.25rem;
margin-bottom: 1.25rem;
}
.article-sidebar-widget-title {
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin-bottom: 0.75rem;
display: block;
}
/* Drop cap for first paragraph */
.content-article > p:first-of-type::first-letter,
.content-article .article-drop-cap::first-letter {
font-family: var(--ds-font-headline);
font-size: 3.5rem;
font-weight: 700;
color: var(--ds-purple);
float: left;
line-height: 0.85;
margin-right: 0.12em;
margin-top: 0.08em;
}
/* ─── 45. Mobile Navigation Enhancement ─────────────────────── */
/* Enhance the existing Bootstrap navbar to match the design spec */
.site-navbar {
font-family: var(--ds-font-label) !important;
}
/* Nav links: Montserrat caps style */
.site-navbar .nav-link .nav-label {
font-family: var(--ds-font-label) !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
/* Active nav link: purple underline like design spec */
.site-navbar .nav-link.active .nav-label {
color: var(--ds-purple) !important;
}
.site-navbar .nav-link.active {
border-bottom: 2px solid var(--ds-purple) !important;
}
/* Mobile: full-width nav collapse with glass surface */
@media (max-width: 991.98px) {
#mainNav.collapse.show,
#mainNav.collapsing {
background: rgba(13,14,18,0.97) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
margin: 0 -12px !important;
padding: 1rem 1rem 1.5rem !important;
border-radius: 0 !important;
}
#mainNav .nav-link {
border-radius: 10px !important;
padding: 0.75rem 1rem !important;
display: flex !important;
align-items: center !important;
gap: 0.6rem !important;
border-bottom: none !important;
transition: background 0.2s !important;
}
#mainNav .nav-link:hover {
background: rgba(123,47,247,0.1) !important;
}
#mainNav .nav-link.active {
background: rgba(123,47,247,0.12) !important;
border-bottom: none !important;
}
#mainNav .nav-link.active .nav-label {
color: var(--ds-purple) !important;
}
#mainNav .nav-link i {
color: var(--ds-purple) !important;
font-size: 1rem;
}
/* "Discover" button in mobile menu */
#mainNav .btn-gold {
margin-top: 0.5rem;
width: 100%;
justify-content: center;
display: flex;
}
/* Gamification level/trophy in mobile */
#mainNav #gmLevelNav,
#mainNav #gmTrophyNav {
display: none !important;
}
/* Mobile toggler icon style */
.site-navbar .navbar-toggler {
padding: 0.25rem 0.5rem;
}
.site-navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(123,47,247,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
}
/* Discoveries filter bar (static — no floating) */
.discoveries-filter-bar {
padding: 0.75rem 0;
}
.discoveries-filter-inner {
background: rgba(18,19,23,0.9);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 999px;
padding: 0.6rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
overflow: hidden;
}
.discoveries-filter-pills {
display: flex;
align-items: center;
gap: 0.75rem;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
flex: 1;
}
.discoveries-filter-pills::-webkit-scrollbar {
display: none;
}
.discoveries-filter-pill {
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
background: none;
border: none;
padding: 0.35rem 0;
cursor: pointer;
white-space: nowrap;
transition: color 0.2s;
text-decoration: none !important;
}
.discoveries-filter-pill:hover,
.discoveries-filter-pill--active {
color: var(--ds-silver) !important;
}
.discoveries-filter-pill--active {
color: var(--ds-purple) !important;
border-bottom: 2px solid var(--ds-purple) !important;
}
.discoveries-filter-icons {
display: flex;
align-items: center;
gap: 0.75rem;
padding-left: 1rem;
border-left: 1px solid rgba(255,255,255,0.1);
color: var(--ds-on-surface-muted);
font-size: 1rem;
}
.discoveries-filter-icons i:hover {
color: var(--ds-silver);
cursor: pointer;
}
/* ─── 38. Reduced Motion (extended) ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.trending-pill,
.cat-pill,
.hub-cta,
.video-card,
.trending-strip-tile,
.trending-compare-card,
.a.category-hub-card,
.subscribe-btn,
.gm-trophy-fab {
transition: none !important;
animation: none !important;
transform: none !important;
}
.live-dot {
animation: none !important;
}
}
/* ─── 46b. Home Value Prop Cards ────────────────────────────── */
.home-value-card {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
padding: 1.75rem;
transition: border-color 0.25s;
}
.home-value-card:hover {
border-color: rgba(123,47,247,0.2);
}
.home-value-title {
font-family: var(--ds-font-headline) !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
color: var(--ds-silver) !important;
line-height: 1.3 !important;
margin-bottom: 0.6rem !important;
}
.home-value-text {
font-size: 0.85rem;
color: var(--ds-on-surface-muted);
line-height: 1.6;
margin: 0;
}
/* ─── 46. Search Results Redesign ─────────────────────────────── */
.search-results-hero {
background: radial-gradient(circle at 70% 10%, rgba(123,47,247,0.1), transparent 55%),
radial-gradient(circle at 10% 80%, rgba(0,212,255,0.06), transparent 50%),
var(--ds-surface-lowest) !important;
border-bottom: 1px solid rgba(255,255,255,0.05);
padding: 1.5rem 0 2.5rem !important;
}
.search-results-eyebrow {
font-family: var(--ds-font-label);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ds-purple);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-results-title {
font-family: var(--ds-font-headline) !important;
font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
color: var(--ds-silver) !important;
margin-bottom: 1.25rem !important;
letter-spacing: -0.02em;
}
.search-results-title em,
.search-query-highlight {
color: var(--ds-purple) !important;
font-style: italic;
text-shadow: 0 0 24px rgba(123,47,247,0.35);
}
.search-results-filter-row {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.search-filter-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.85rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
text-decoration: none !important;
transition: background 0.2s, border-color 0.2s, color 0.2s;
cursor: default;
}
.search-filter-pill--active {
background: rgba(123,47,247,0.15);
border-color: rgba(123,47,247,0.4);
color: var(--ds-purple) !important;
}
.search-filter-pill .pill-count {
background: rgba(123,47,247,0.25);
color: var(--ds-purple);
border-radius: 999px;
font-size: 0.58rem;
padding: 0.1em 0.5em;
font-weight: 800;
}
/* Market pulse metric strip */
.search-pulse-bar {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.9rem 1.25rem;
background: rgba(0,212,255,0.05);
border: 1px solid rgba(0,212,255,0.15);
border-radius: 10px;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.search-pulse-label {
font-family: var(--ds-font-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ds-cyan);
white-space: nowrap;
}
.search-pulse-metric {
font-family: var(--ds-font-headline);
font-size: 1.4rem;
font-weight: 700;
color: var(--ds-cyan);
line-height: 1;
}
.search-pulse-desc {
font-size: 0.78rem;
color: var(--ds-on-surface-muted);
}
/* Search result editorial cards */
.search-result-card {
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 14px;
overflow: hidden;
transition: border-color 0.25s, transform 0.25s;
height: 100%;
display: flex;
flex-direction: column;
text-decoration: none !important;
}
.search-result-card:hover {
border-color: rgba(123,47,247,0.25);
transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.search-result-card .src-img-wrap {
aspect-ratio: 16/9;
overflow: hidden;
position: relative;
flex-shrink: 0;
background: var(--ds-surface-lowest);
}
.search-result-card .src-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.search-result-card:hover .src-img-wrap img {
transform: scale(1.04);
}
.search-result-card .src-placeholder {
width: 100%;
height: 100%;
background: radial-gradient(circle at 40% 40%, rgba(123,47,247,0.2), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(0,212,255,0.1), transparent 60%),
var(--ds-surface-lowest);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.08);
font-size: 2.5rem;
}
.search-result-card .src-match-badge {
position: absolute;
top: 0.7rem;
right: 0.7rem;
background: rgba(0,200,150,0.18);
border: 1px solid rgba(0,200,150,0.35);
color: var(--ds-success);
font-family: var(--ds-font-label);
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.18rem 0.5rem;
border-radius: 999px;
}
.search-result-card .src-body {
padding: 1.1rem 1.25rem 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
}
.search-result-card .src-cat-tag {
font-family: var(--ds-font-label);
font-size: 0.56rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-purple);
margin-bottom: 0.55rem;
}
.search-result-card .src-title {
font-family: var(--ds-font-headline) !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--ds-silver) !important;
margin-bottom: 0.5rem;
text-decoration: none !important;
}
.search-result-card .src-title:hover {
color: var(--ds-purple) !important;
}
.search-result-card .src-desc {
font-size: 0.78rem;
color: var(--ds-on-surface-muted);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.75rem;
flex: 1;
}
.search-result-card .src-meta {
display: flex;
align-items: center;
gap: 0.75rem;
padding-top: 0.6rem;
border-top: 1px solid rgba(255,255,255,0.05);
font-size: 0.65rem;
color: var(--ds-on-surface-muted);
margin-top: auto;
}
.search-result-card .src-meta i {
font-size: 0.62rem;
margin-right: 0.2rem;
}
/* Related discoveries heading */
.search-related-heading {
font-family: var(--ds-font-label);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.search-related-heading::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255,255,255,0.07);
}
/* Empty state redesign */
.search-empty-state {
text-align: center;
padding: 4rem 2rem;
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 20px;
}
.search-empty-state .search-empty-icon {
font-size: 3rem;
color: var(--ds-on-surface-muted);
margin-bottom: 1rem;
display: block;
}
.search-empty-state h4 {
font-family: var(--ds-font-headline) !important;
font-size: 1.3rem !important;
color: var(--ds-silver) !important;
margin-bottom: 0.75rem;
}
.search-empty-state p {
color: var(--ds-on-surface-muted);
max-width: 420px;
margin: 0 auto 1.5rem;
}
/* Trending searches grid (no-query state) */
.search-trending-pill {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 1.1rem 0.75rem;
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
text-decoration: none !important;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
text-align: center;
}
.search-trending-pill:hover {
background: rgba(123,47,247,0.08);
border-color: rgba(123,47,247,0.3);
transform: translateY(-2px);
}
.search-trending-pill-text {
font-family: var(--ds-font-headline);
font-size: 0.88rem;
font-weight: 600;
color: var(--ds-silver);
}
.search-trending-pill-count {
font-family: var(--ds-font-label);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
}
/* ─── 47. About / Static Page Enhancement ─────────────────────── */
.about-section {
background: var(--ds-surface) !important;
padding: 1.5rem 0 5rem !important;
}
.about-card {
background: var(--ds-surface-container) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 20px !important;
padding: 3rem !important;
max-width: 880px;
margin: 0 auto;
}
.about-card h1.section-heading {
font-family: var(--ds-font-headline) !important;
font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
color: var(--ds-silver) !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
margin-bottom: 0.75rem !important;
}
.about-card .lead {
color: rgba(224,224,224,0.65) !important;
font-size: 0.95rem !important;
line-height: 1.7 !important;
}
.about-card .static-page-body h2 {
font-family: var(--ds-font-headline) !important;
font-size: 1.4rem !important;
color: var(--ds-silver) !important;
margin-top: 2.5rem !important;
margin-bottom: 0.85rem !important;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.about-card .static-page-body h3 {
font-family: var(--ds-font-headline) !important;
font-size: 1.1rem !important;
color: var(--ds-silver) !important;
margin-top: 1.5rem !important;
margin-bottom: 0.5rem !important;
}
.about-card .static-page-body p,
.about-card p:not(.page-title-crumb) {
color: rgba(224,224,224,0.75) !important;
line-height: 1.75 !important;
}
.about-card .static-page-body a {
color: var(--ds-purple) !important;
text-decoration: none !important;
}
.about-card .static-page-body a:hover {
color: var(--ds-cyan) !important;
text-decoration: underline !important;
}
.about-card .static-page-body ul,
.about-card .static-page-body ol {
color: rgba(224,224,224,0.75);
line-height: 1.75;
padding-left: 1.5rem;
}
.about-card .static-page-body li {
margin-bottom: 0.4rem;
}
.about-card .static-page-body blockquote {
border-left: 3px solid var(--ds-purple);
padding: 0.75rem 1.25rem;
margin: 1.5rem 0;
background: rgba(123,47,247,0.05);
border-radius: 0 8px 8px 0;
color: var(--ds-on-surface-muted);
font-style: italic;
}
.about-card hr {
border-color: rgba(255,255,255,0.07) !important;
}
/* Contact page form styling */
.contact-page-card .form-control {
background: var(--ds-surface-lowest) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
color: var(--ds-silver) !important;
border-radius: 8px !important;
padding: 0.65rem 1rem !important;
}
.contact-page-card .form-control:focus {
border-color: rgba(123,47,247,0.5) !important;
box-shadow: 0 0 0 3px rgba(123,47,247,0.1) !important;
background: var(--ds-surface-lowest) !important;
}
.contact-page-card .form-label {
color: var(--ds-on-surface-muted) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
margin-bottom: 0.4rem;
}
/* ─── 48. Style IQ Dashboard ──────────────────────────────────── */
.style-iq-page {
background: var(--ds-surface) !important;
min-height: 100vh;
}
.siq-profile-hero {
background: radial-gradient(circle at 60% 10%, rgba(123,47,247,0.12), transparent 55%),
var(--ds-surface-lowest);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 1.5rem 0 2.5rem;
}
.siq-avatar-wrap {
position: relative;
width: 96px;
height: 96px;
flex-shrink: 0;
}
.siq-avatar-img {
width: 96px;
height: 96px;
border-radius: 50%;
border: 3px solid var(--ds-purple);
background: radial-gradient(circle at 40% 40%, rgba(123,47,247,0.3), rgba(0,0,0,0.8));
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
color: rgba(255,255,255,0.5);
overflow: hidden;
}
.siq-level-badge {
position: absolute;
bottom: -4px;
right: -4px;
background: var(--ds-purple);
color: #fff;
font-family: var(--ds-font-label);
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.08em;
padding: 0.18rem 0.5rem;
border-radius: 999px;
border: 2px solid var(--ds-surface-lowest);
}
.siq-display-name {
font-family: var(--ds-font-headline) !important;
font-size: clamp(1.4rem, 3vw, 2rem) !important;
color: var(--ds-silver) !important;
line-height: 1.1;
margin: 0 0 0.25rem;
}
.siq-display-title {
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ds-purple);
}
.siq-xp-bar-wrap {
padding: 0.9rem 1.1rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
}
.siq-xp-bar-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.4rem;
}
.siq-xp-label {
font-family: var(--ds-font-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
}
.siq-xp-next {
font-family: var(--ds-font-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-purple);
}
.siq-xp-bar {
height: 8px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
}
.siq-xp-fill {
height: 100%;
background: linear-gradient(90deg, var(--ds-purple), #a855f7);
border-radius: 999px;
box-shadow: 0 0 10px rgba(123,47,247,0.5);
transition: width 1s ease;
width: 0%;
}
/* Stat grid */
.siq-stat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
@media (min-width: 768px) {
.siq-stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.siq-stat-card {
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 1.25rem 1rem;
position: relative;
overflow: hidden;
transition: border-color 0.25s;
}
.siq-stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
border-radius: 2px 2px 0 0;
}
.siq-stat-card--purple::before { background: var(--ds-purple); }
.siq-stat-card--cyan::before { background: var(--ds-cyan); }
.siq-stat-card--success::before { background: var(--ds-success); }
.siq-stat-card--gold::before { background: #f59e0b; }
.siq-stat-icon {
font-size: 1.1rem;
color: var(--ds-on-surface-muted);
margin-bottom: 0.65rem;
display: block;
}
.siq-stat-value {
font-family: var(--ds-font-headline);
font-size: 2rem;
font-weight: 700;
color: var(--ds-silver);
line-height: 1;
margin-bottom: 0.2rem;
}
.siq-stat-label {
font-family: var(--ds-font-label);
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
}
/* Trophy wall */
.siq-trophy-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem;
}
@media (min-width: 576px) {
.siq-trophy-grid { grid-template-columns: repeat(6, 1fr); }
}
.siq-badge-cell {
aspect-ratio: 1;
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.5rem;
text-align: center;
transition: border-color 0.25s;
}
.siq-badge-cell--earned {
border-color: rgba(123,47,247,0.3);
background: rgba(123,47,247,0.06);
}
.siq-badge-cell--locked {
opacity: 0.3;
}
.siq-badge-icon {
font-size: 1.4rem;
}
.siq-badge-name {
font-family: var(--ds-font-label);
font-size: 0.48rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
line-height: 1.2;
}
/* Weekly challenge card */
.siq-challenge-card {
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
padding: 1.75rem;
}
.siq-challenge-name {
font-family: var(--ds-font-headline) !important;
font-size: 1.4rem !important;
color: var(--ds-silver) !important;
font-style: italic !important;
margin-bottom: 0.25rem;
line-height: 1.2;
}
.siq-challenge-progress-bar {
height: 6px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
margin: 0.6rem 0;
}
.siq-challenge-progress-fill {
height: 100%;
background: var(--ds-purple);
border-radius: 999px;
box-shadow: 0 0 8px rgba(123,47,247,0.5);
transition: width 1s ease;
width: 0%;
}
/* Activity feed */
.siq-activity-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 0.85rem 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.siq-activity-item:last-child {
border-bottom: none;
}
.siq-activity-icon {
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(123,47,247,0.1);
border: 1px solid rgba(123,47,247,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
color: var(--ds-purple);
flex-shrink: 0;
}
.siq-activity-text {
font-size: 0.82rem;
color: rgba(224,224,224,0.8);
line-height: 1.4;
}
.siq-activity-text em {
color: var(--ds-silver);
font-style: italic;
}
.siq-activity-time {
font-size: 0.65rem;
color: var(--ds-on-surface-muted);
margin-top: 0.2rem;
}
/* Recommended card */
.siq-rec-card {
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
padding: 1.5rem;
position: relative;
overflow: hidden;
}
.siq-rec-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--ds-purple), var(--ds-cyan));
}
.siq-rec-tag {
font-family: var(--ds-font-label);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ds-cyan);
margin-bottom: 0.5rem;
}
.siq-section-heading {
font-family: var(--ds-font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin-bottom: 1.1rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.siq-section-heading::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255,255,255,0.07);
}
/* Dashboard grid layout */
.siq-main-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2rem 0;
}
@media (min-width: 992px) {
.siq-main-grid {
grid-template-columns: 1fr 340px;
gap: 2rem;
}
}
.siq-sidebar-stack {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Account settings / share links */
.siq-action-links {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: 1rem;
}
.siq-action-link {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.85rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
font-size: 0.78rem;
color: var(--ds-on-surface-muted) !important;
text-decoration: none !important;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.siq-action-link:hover {
background: rgba(123,47,247,0.08);
border-color: rgba(123,47,247,0.25);
color: var(--ds-silver) !important;
}
/* ── 49. Article 3-col grid fix — override style.css 2-col grid ─ */
/*
style.css forces .article-with-sidebar.row to display:grid with
2 columns (2fr 1fr). When a TOC sidebar (col-lg-2) is present there
are 3 children and the sidebar wraps. Override to 3 columns here.
*/
@media (min-width: 992px) {
.article-with-sidebar.row:has(> .col-lg-2) {
grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr) !important;
align-items: start !important;
}
/* sticky needs align-self:start on the grid cell, not just position:sticky on the child */
.article-with-sidebar.row:has(> .col-lg-2) > .col-lg-2 {
align-self: start !important;
position: sticky !important;
top: 5.5rem !important;
}
/* Sidebar column also sticky so widgets don't scroll away */
.article-with-sidebar.row:has(> .col-lg-2) > .col-lg-3 {
align-self: start !important;
}
}
/* ── 49b. Article page — dark theme overrides ────────────────── */
/* FAQ accordion */
.faq-accordion .accordion-item,
.faq-accordion-item {
background: var(--ds-surface-container) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 10px !important;
overflow: hidden !important;
}
.faq-accordion-btn,
.faq-accordion .accordion-button {
background: var(--ds-surface-container) !important;
color: var(--ds-silver) !important;
font-weight: 600 !important;
font-size: 0.97rem !important;
box-shadow: none !important;
border: none !important;
}
.faq-accordion-btn:not(.collapsed),
.faq-accordion .accordion-button:not(.collapsed) {
background: rgba(123,47,247,0.08) !important;
color: #fff !important;
}
.faq-accordion-btn::after,
.faq-accordion .accordion-button::after {
filter: invert(1) brightness(0.7);
}
.faq-accordion-body,
.faq-accordion .accordion-body {
background: rgba(255,255,255,0.02) !important;
color: var(--ds-on-surface-muted) !important;
font-size: 0.95rem !important;
line-height: 1.7 !important;
border-top: 1px solid rgba(255,255,255,0.05) !important;
}
/* Affiliate / useful links block */
.useful-links-block {
background: var(--ds-surface-container) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 12px !important;
padding: 1.25rem 1.5rem !important;
}
.useful-links-heading {
font-size: 0.85rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--ds-on-surface-muted) !important;
font-family: var(--ds-font-label) !important;
}
.useful-links-item {
color: var(--ds-cyan) !important;
font-size: 0.9rem;
transition: opacity 0.15s;
}
.useful-links-item:hover { opacity: 0.75; }
.useful-links-icon {
font-size: 0.72rem;
flex-shrink: 0;
opacity: 0.6;
}
/* Article drop cap */
.content-article > p:first-of-type::first-letter {
float: left;
font-family: var(--ds-font-headline);
font-size: 3.8rem;
line-height: 0.82;
padding-right: 0.15em;
padding-top: 0.05em;
color: var(--ds-purple);
font-weight: 700;
}
/* ── 50. Reader Poll widget — dark redesign ──────────────────── */
.poll-card {
background: var(--ds-surface-container) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 14px !important;
padding: 1.25rem 1.25rem 1rem !important;
box-shadow: none !important;
}
.poll-card::before { display: none !important; }
.poll-card .poll-card-head .sidebar-widget-heading,
.poll-card .sidebar-widget-heading {
color: var(--ds-on-surface-muted) !important;
font-family: var(--ds-font-label) !important;
font-size: 0.72rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
margin-bottom: 0.75rem !important;
}
.poll-question {
color: var(--ds-silver) !important;
font-size: 0.92rem !important;
font-weight: 500 !important;
line-height: 1.45 !important;
margin-bottom: 1rem !important;
}
.poll-options {
display: flex !important;
flex-direction: column !important;
gap: 0.7rem !important;
}
.poll-option {
position: relative !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
cursor: pointer !important;
gap: 0 !important;
}
.poll-option-label {
flex: 1 !important;
order: 1 !important;
position: relative !important;
z-index: 1 !important;
font-size: 0.85rem !important;
color: var(--ds-on-surface-muted) !important;
padding: 0 !important;
transition: color 0.15s !important;
}
.poll-option:hover:not(.voted) .poll-option-label { color: var(--ds-silver) !important; }
.poll-option-pct {
order: 2 !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
color: var(--ds-silver) !important;
font-family: var(--ds-font-label) !important;
min-width: 2.8rem !important;
text-align: right !important;
}
/* All nth-child color overrides removed — uniform style */
.poll-options .poll-option:nth-child(4n+1) .poll-option-pct,
.poll-options .poll-option:nth-child(4n+2) .poll-option-pct,
.poll-options .poll-option:nth-child(4n+3) .poll-option-pct,
.poll-options .poll-option:nth-child(4n+4) .poll-option-pct {
color: var(--ds-silver) !important;
}
.poll-bar {
order: 3 !important;
flex-basis: 100% !important;
position: static !important;
height: 2px !important;
border-radius: 999px !important;
background: rgba(255,255,255,0.12) !important;
margin-top: 5px !important;
transition: width 0.5s ease !important;
}
/* Leading option bar gets purple glow */
.poll-option.winner .poll-bar,
.poll-options .poll-option:nth-child(4n+1) .poll-bar,
.poll-options .poll-option:nth-child(4n+2) .poll-bar,
.poll-options .poll-option:nth-child(4n+3) .poll-bar,
.poll-options .poll-option:nth-child(4n+4) .poll-bar {
background: rgba(255,255,255,0.12) !important;
}
/* The bar element itself is the track; we use a pseudo to show the fill */
/* Actually JS sets width directly, so the bar IS the fill. Add a track via outline/bg */
.poll-option .poll-bar {
/* JS sets width; the bar is the fill. Show track by parent's bg via box-shadow */
box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset !important;
}
.poll-option.voted .poll-bar,
.poll-option.winner .poll-bar {
background: var(--ds-purple) !important;
box-shadow: 0 0 8px rgba(123,47,247,0.4) !important;
}
.poll-option.winner .poll-option-pct { color: var(--ds-purple) !important; }
/* Flat poll rows — kill boxed/border styles from style.css on every state */
.poll-card .poll-options .poll-option,
.poll-card .poll-options .poll-option:hover,
.poll-card .poll-options .poll-option.voted,
.poll-card .poll-options .poll-option.winner,
.poll-card .poll-options .poll-option.my-vote,
.poll-card .poll-options .poll-option.my-vote.winner,
.poll-card .poll-options .poll-option.my-vote.voted {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
transform: none !important;
}
/* Your vote — label emphasis + checkmark only (no box border) */
.poll-option.my-vote .poll-option-label {
color: var(--ds-silver) !important;
font-weight: 600 !important;
}
.poll-option.my-vote .poll-option-label::after {
content: '✓' !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1rem !important;
height: 1rem !important;
margin-left: 0.35rem !important;
font-size: 0.58rem !important;
font-weight: 700 !important;
line-height: 1 !important;
border-radius: 50% !important;
color: #fff !important;
background: var(--ds-purple) !important;
opacity: 1 !important;
vertical-align: middle !important;
}
.poll-card.poll--results-visible .poll-option.my-vote .poll-bar {
background: var(--ds-purple) !important;
box-shadow: 0 0 8px rgba(123, 47, 247, 0.35) !important;
}
/* Donut + legend (results panel) */
.poll-results-panel {
background: transparent !important;
}
.poll-donut {
border: none !important;
}
.poll-legend-item { color: var(--ds-on-surface-muted) !important; }
.poll-legend-pct { color: var(--ds-silver) !important; }
/* Toggle button */
.poll-toggle-results,
.btn-poll-toggle {
background: transparent !important;
border: 1px solid rgba(255,255,255,0.1) !important;
color: var(--ds-on-surface-muted) !important;
font-size: 0.72rem !important;
font-family: var(--ds-font-label) !important;
letter-spacing: 0.06em !important;
border-radius: 999px !important;
padding: 0.3rem 1rem !important;
transition: border-color 0.2s, color 0.2s !important;
}
.poll-toggle-results:hover,
.btn-poll-toggle:hover {
border-color: rgba(123,47,247,0.5) !important;
color: var(--ds-silver) !important;
background: transparent !important;
}
/* ── 51. Mystery Discovery (Pixazo) — dark redesign ─────────── */
.p2m-photo-widget {
width: 100% !important;
background: var(--ds-surface-container) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 14px !important;
padding: 1.25rem !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
.p2m-photo-widget::before {
content: 'Mystery Discovery';
display: block;
font-family: var(--ds-font-label) !important;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin-bottom: 0.5rem;
}
.p2m-photo-img-wrap {
position: relative !important;
width: 100% !important;
aspect-ratio: 4 / 3 !important;
border-radius: 8px !important;
overflow: hidden !important;
background: var(--ds-surface-lowest) !important;
margin-bottom: 0.75rem !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.p2m-photo-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
opacity: 0.65 !important;
transition: opacity 0.35s !important;
border-radius: 0 !important;
display: block !important;
margin: 0 auto !important;
}
.p2m-photo-img-wrap:hover .p2m-photo-img { opacity: 1 !important; }
.p2m-photo-prompt {
font-size: 0.88rem !important;
color: var(--ds-silver) !important;
margin-bottom: 0.75rem !important;
line-height: 1.4 !important;
}
.p2m-photo-next-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.4rem !important;
width: 100% !important;
padding: 0.55rem 1rem !important;
margin-bottom: 0.5rem !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 8px !important;
color: var(--ds-silver) !important;
font-size: 0.85rem !important;
cursor: pointer !important;
transition: background 0.2s !important;
}
.p2m-photo-next-btn:hover {
background: rgba(123,47,247,0.15) !important;
border-color: rgba(123,47,247,0.3) !important;
color: #fff !important;
}
/* Reactions: 2×2 grid */
.p2m-photo-reactions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.4rem !important;
margin-bottom: 0.5rem !important;
}
.p2m-photo-react-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.35rem !important;
padding: 0.45rem 0.5rem !important;
background: var(--ds-surface-lowest) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 6px !important;
font-size: 0.78rem !important;
color: var(--ds-on-surface-muted) !important;
cursor: pointer !important;
transition: border-color 0.2s, color 0.2s, background 0.2s !important;
white-space: nowrap !important;
}
.p2m-photo-react-btn:hover {
border-color: rgba(123,47,247,0.4) !important;
color: var(--ds-silver) !important;
background: rgba(123,47,247,0.06) !important;
}
.p2m-photo-react-btn.reacted {
border-color: rgba(123,47,247,0.6) !important;
color: #fff !important;
background: rgba(123,47,247,0.15) !important;
}
/* Actions row — Surprise me spans full width */
.p2m-photo-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.4rem !important;
}
.p2m-photo-action-btn--surprise {
flex: 1 1 100% !important;
width: 100% !important;
padding: 0.5rem !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
border-radius: 6px !important;
font-family: var(--ds-font-label) !important;
font-size: 0.72rem !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
color: var(--ds-silver) !important;
cursor: pointer !important;
transition: background 0.2s, border-color 0.2s !important;
}
.p2m-photo-action-btn--surprise:hover {
background: rgba(123,47,247,0.12) !important;
border-color: rgba(123,47,247,0.4) !important;
}
.p2m-photo-action-btn {
flex: 1 !important;
padding: 0.4rem !important;
background: transparent !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 6px !important;
font-size: 0.72rem !important;
color: var(--ds-on-surface-muted) !important;
cursor: pointer !important;
transition: color 0.2s, border-color 0.2s !important;
text-align: center !important;
}
.p2m-photo-action-btn:hover {
color: var(--ds-silver) !important;
border-color: rgba(255,255,255,0.18) !important;
}
.p2m-photo-vibe-stats-btn {
background: transparent !important;
border: none !important;
font-size: 0.75rem !important;
color: var(--ds-on-surface-muted) !important;
padding: 0.4rem 0 0 !important;
cursor: pointer !important;
display: block !important;
width: 100% !important;
text-align: left !important;
}
.p2m-photo-credit {
font-size: 0.68rem !important;
color: var(--ds-on-surface-muted) !important;
margin-top: 0.35rem !important;
opacity: 0.6 !important;
}
.p2m-photo-credit a { color: inherit !important; }
/* ── 52. Related Articles — full-width section ───────────────── */
.rel-articles-section {
background: var(--ds-surface-lowest);
border-top: none;
padding: 2rem 0 5rem;
}
.rel-articles-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 2rem;
gap: 1rem;
flex-wrap: wrap;
}
.rel-articles-heading {
font-family: var(--ds-font-headline) !important;
font-size: clamp(1.5rem, 3vw, 2rem) !important;
color: #fff !important;
margin: 0 0 0.25rem !important;
font-weight: 700 !important;
}
.rel-articles-sub {
font-size: 0.88rem;
color: var(--ds-on-surface-muted);
margin: 0;
}
.rel-articles-view-all {
font-family: var(--ds-font-label);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-purple) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--ds-purple);
padding-bottom: 2px;
white-space: nowrap;
transition: color 0.2s, border-color 0.2s;
}
.rel-articles-view-all:hover {
color: #fff !important;
border-color: #fff;
}
/* Card */
.rel-article-card {
display: flex;
flex-direction: column;
gap: 0.9rem;
height: 100%;
}
.rel-card-img-wrap {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.07);
background: var(--ds-surface-container);
text-decoration: none !important;
}
.rel-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease, opacity 0.3s;
opacity: 0.85;
}
.rel-card-img-wrap:hover .rel-card-img {
transform: scale(1.05);
opacity: 1;
}
.rel-card-img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ds-on-surface-muted);
font-size: 2rem;
opacity: 0.3;
}
.rel-card-badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
background: rgba(18,19,23,0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
font-family: var(--ds-font-label);
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.25rem 0.6rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
}
.rel-card-badge--featured {
background: rgba(123,47,247,0.3);
border-color: rgba(123,47,247,0.5);
color: #d2bbff;
}
.rel-card-body { flex: 1; }
.rel-card-title {
font-family: var(--ds-font-headline) !important;
font-size: 1.05rem !important;
line-height: 1.35 !important;
margin: 0 0 0.4rem !important;
font-weight: 600 !important;
}
.rel-card-title a {
color: var(--ds-silver) !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.rel-card-title a:hover { color: var(--ds-purple) !important; }
.rel-card-desc {
font-size: 0.83rem;
color: var(--ds-on-surface-muted);
line-height: 1.55;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── 53. Article Hero — square image with purple glow ────────── */
.article-hero-img-frame {
aspect-ratio: 1 / 1 !important;
border-radius: 16px !important;
overflow: hidden;
position: relative;
}
/* Purple ambient glow behind the hero image */
.article-hero-img-frame::before {
content: '';
position: absolute;
inset: -1.5rem;
background: radial-gradient(ellipse at center, rgba(123,47,247,0.18) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
border-radius: 50%;
filter: blur(24px);
}
.article-hero-img-frame img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.15);
transition: filter 0.5s ease;
}
.article-hero-img-frame:hover img { filter: grayscale(0); }
/* ── 54. Left TOC sidebar community buttons ──────────────────── */
.art-community-btn {
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
padding: 0.3rem 0.7rem;
color: var(--ds-on-surface-muted);
font-size: 0.72rem;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}
.art-community-btn i { font-size: 0.8rem; color: #e85b5b; }
.art-community-btn:nth-child(2) i { color: #ffb68e; }
.art-community-btn:hover {
border-color: rgba(123,47,247,0.4);
color: var(--ds-silver);
}
.art-community-count {
font-family: var(--ds-font-label);
font-size: 0.65rem;
letter-spacing: 0.04em;
color: var(--ds-on-surface);
font-weight: 700;
}
.engage-tray.art-community-highlight {
outline: 2px solid rgba(123, 47, 247, 0.45);
outline-offset: 4px;
border-radius: 12px;
transition: outline 0.25s ease;
}
/* ── 55. Market Pulse sidebar widget ─────────────────────────── */
.market-pulse-card {
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
padding: 1.1rem 1.25rem 1.25rem;
margin-bottom: 1.25rem;
}
.market-pulse-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.market-pulse-label {
font-family: var(--ds-font-label);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
}
.market-pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ds-cyan);
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.75); }
}
.market-pulse-item {
margin-bottom: 0.85rem;
}
.market-pulse-item:last-child { margin-bottom: 0; }
.market-pulse-item-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 5px;
}
.market-pulse-item-name {
font-size: 0.8rem;
color: var(--ds-on-surface-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-family: var(--ds-font-label);
}
.market-pulse-item-status {
font-size: 0.72rem;
font-family: var(--ds-font-label);
color: var(--ds-silver);
letter-spacing: 0.04em;
}
.market-pulse-track {
width: 100%;
height: 3px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
}
.market-pulse-bar {
height: 100%;
border-radius: 999px;
transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
/* ── 56. Bonus Tip Locked Card ───────────────────────────────── */
.bonus-tip-card {
background: var(--ds-surface-container);
border: 1px solid rgba(123,47,247,0.3);
border-radius: 14px;
padding: 1.25rem;
position: relative;
overflow: hidden;
}
/* Fade-out gradient at bottom */
.bonus-tip-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3.5rem;
background: linear-gradient(to bottom, transparent, rgba(13,14,18,0.92));
pointer-events: none;
}
.bonus-tip-header {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--ds-purple);
font-family: var(--ds-font-label);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.bonus-tip-text {
font-size: 0.85rem;
color: var(--ds-silver);
line-height: 1.55;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.bonus-tip-btn {
position: relative;
z-index: 2;
width: 100%;
padding: 0.65rem;
background: var(--ds-purple);
border: none;
border-radius: 8px;
color: #fff;
font-family: var(--ds-font-label);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 0 20px rgba(123,47,247,0.25);
transition: filter 0.2s, transform 0.1s;
}
.bonus-tip-btn:hover { filter: brightness(1.1); }
.bonus-tip-btn:active { transform: scale(0.97); }
/* ── 57. Editorial Team + Community Vibe section ─────────────── */
.article-editorial-section {
background: var(--ds-surface-lowest);
border-top: 1px solid rgba(255,255,255,0.05);
padding: 3rem 0 2rem;
}
.editorial-team-card {
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 20px;
padding: 2.25rem 2rem;
box-shadow: 0 24px 48px rgba(0,0,0,0.3);
}
.editorial-team-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.25rem;
}
.editorial-team-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(123,47,247,0.1);
border: 1px solid rgba(123,47,247,0.25);
display: flex;
align-items: center;
justify-content: center;
color: var(--ds-purple);
font-size: 1.6rem;
flex-shrink: 0;
}
.editorial-team-name {
font-family: var(--ds-font-headline) !important;
font-size: 1.3rem !important;
color: #fff !important;
margin: 0 0 0.2rem !important;
font-weight: 600 !important;
}
.editorial-team-role {
font-family: var(--ds-font-label);
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin: 0;
}
.editorial-team-desc {
font-size: 0.88rem;
color: var(--ds-silver);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.editorial-team-link {
font-family: var(--ds-font-label);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-purple) !important;
text-decoration: none !important;
transition: gap 0.2s, color 0.2s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.editorial-team-link:hover {
color: #fff !important;
gap: 0.7rem;
}
/* Community Vibe */
.community-vibe-block {
padding: 1.5rem;
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
}
.community-vibe-heading {
font-family: var(--ds-font-label) !important;
font-size: 0.72rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--ds-purple) !important;
margin-bottom: 1.25rem !important;
font-weight: 600 !important;
}
.community-vibe-emojis {
display: flex;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cvibe-emoji-btn {
font-size: 1.75rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 0.4rem 0.55rem;
cursor: pointer;
transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
line-height: 1;
}
.cvibe-emoji-btn:hover {
transform: scale(1.2);
background: rgba(123,47,247,0.15);
border-color: rgba(123,47,247,0.3);
}
.cvibe-emoji-btn:active { transform: scale(0.9); }
.cvibe-divider {
border: none;
border-top: 1px solid rgba(255,255,255,0.07);
margin: 1rem 0;
}
.cvibe-share-label {
font-family: var(--ds-font-label);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin-bottom: 0.6rem;
}
.cvibe-share-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.community-vibe-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding-top: 0.25rem;
}
.cvibe-action-btn {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
color: var(--ds-on-surface-muted);
font-family: var(--ds-font-label);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.2s;
padding: 0;
}
.cvibe-action-btn i { font-size: 1.1rem; }
.cvibe-action-btn:hover { color: #fff; }
/* ── 58. content-article table dark theme ────────────────────── */
.content-article table {
width: 100% !important;
border-collapse: collapse !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 12px !important;
overflow: hidden !important;
font-size: 0.9rem !important;
margin: 1.5rem 0 !important;
}
.content-article thead {
background: rgba(255,255,255,0.05) !important;
}
.content-article thead th {
font-family: var(--ds-font-label) !important;
font-size: 0.65rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--ds-on-surface-muted) !important;
padding: 0.75rem 1rem !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
font-weight: 700 !important;
}
.content-article tbody tr {
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.content-article tbody tr:last-child { border-bottom: none !important; }
.content-article tbody td {
padding: 0.7rem 1rem !important;
color: var(--ds-silver) !important;
vertical-align: top !important;
}
.content-article tbody td:first-child {
color: #fff !important;
font-weight: 500 !important;
}
/* ── 59. content-article editorial callout (blockquote/callout) ─ */
.content-article blockquote,
.content-article .editorial-callout {
background: var(--ds-surface-container) !important;
border-left: 4px solid var(--ds-purple) !important;
border-radius: 0 12px 12px 0 !important;
padding: 1.25rem 1.5rem !important;
margin: 1.75rem 0 !important;
font-style: italic !important;
color: var(--ds-silver) !important;
font-size: 1rem !important;
line-height: 1.7 !important;
position: relative !important;
}
/* "Editorial IQ: Regional Context" label above blockquotes */
.content-article blockquote::before {
content: '✦ Editorial IQ: Regional Context';
display: block !important;
font-style: normal !important;
font-family: var(--ds-font-label) !important;
font-size: 0.68rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--ds-purple) !important;
margin-bottom: 0.75rem !important;
font-weight: 600 !important;
}
.content-article blockquote p { margin: 0 !important; }
/* Numbered technique / product grid inside articles */
.content-article ol.technique-grid,
.content-article .p2m-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 1.25rem !important;
list-style: none !important;
padding: 0 !important;
margin: 1.75rem 0 !important;
counter-reset: technique-counter !important;
}
.content-article ol.technique-grid li,
.content-article .p2m-grid-item {
background: var(--ds-surface-container) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 12px !important;
padding: 1rem 1.1rem !important;
counter-increment: technique-counter !important;
}
.content-article ol.technique-grid li::before {
content: counter(technique-counter, decimal-leading-zero) !important;
display: block !important;
font-family: var(--ds-font-label) !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
color: var(--ds-purple) !important;
letter-spacing: 0.05em !important;
margin-bottom: 0.35rem !important;
}
.content-article ol.technique-grid li strong,
.content-article ol.technique-grid li b {
display: block !important;
font-size: 1.05rem !important;
color: #fff !important;
margin-bottom: 0.4rem !important;
}
@media (max-width: 575.98px) {
.content-article ol.technique-grid,
.content-article .p2m-grid {
grid-template-columns: 1fr !important;
}
}
/* ─── 60. Discoveries Hero ─────────────────────────────────── */
.disc-hero-section {
position: relative;
background: var(--ds-surface-lowest);
padding: 1.5rem 0 3rem;
overflow: hidden;
}
.disc-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 70% 50%, rgba(123,47,247,0.08) 0%, transparent 70%),
radial-gradient(ellipse 40% 60% at 20% 80%, rgba(0,212,255,0.05) 0%, transparent 60%);
pointer-events: none;
}
.disc-hero-inner { position: relative; z-index: 1; }
.disc-hero-crumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ds-font-label, 'Montserrat', sans-serif);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin-bottom: 2.5rem;
}
.disc-hero-crumb a {
color: var(--ds-purple);
text-decoration: none;
}
.disc-hero-crumb a:hover {
color: var(--ds-cyan);
text-decoration: none;
}
.disc-hero-headline {
font-family: var(--ds-font-headline) !important;
font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
font-weight: 700 !important;
color: var(--ds-silver) !important;
line-height: 1.1 !important;
letter-spacing: -0.02em !important;
margin-bottom: 1.25rem !important;
}
.disc-hero-headline em {
color: var(--ds-purple);
font-style: italic;
}
.disc-hero-subtext {
font-size: 1rem;
color: var(--ds-on-surface-muted);
line-height: 1.7;
max-width: 560px;
margin-bottom: 2rem;
}
.disc-hero-stats {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.disc-stat-chip {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 0.75rem 1.25rem;
min-width: 90px;
}
.disc-stat-chip--cyan { border-color: rgba(0,212,255,0.2); background: rgba(0,212,255,0.05); }
.disc-stat-chip--muted { border-color: rgba(255,255,255,0.05); }
.disc-stat-chip-val {
font-family: var(--ds-font-headline);
font-size: 1.4rem;
font-weight: 700;
color: var(--ds-silver);
line-height: 1.1;
}
.disc-stat-chip--cyan .disc-stat-chip-val { color: var(--ds-cyan); }
.disc-stat-chip-label {
font-family: var(--ds-font-label);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-on-surface-muted);
margin-top: 0.2rem;
}
/* Decorative card stack */
.disc-hero-deco {
position: relative;
height: 280px;
}
.disc-deco-card {
position: absolute;
background: var(--ds-surface-container);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.disc-deco-card--1 {
top: 0;
left: 0;
right: 60px;
z-index: 3;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.disc-deco-card--2 {
top: 60px;
left: 30px;
right: 0;
z-index: 2;
opacity: 0.7;
transform: rotate(2deg);
}
.disc-deco-card--3 {
top: 120px;
left: 60px;
right: 20px;
z-index: 1;
opacity: 0.45;
transform: rotate(-1.5deg);
}
.disc-deco-tag {
display: inline-flex;
align-items: center;
background: rgba(123,47,247,0.15);
border: 1px solid rgba(123,47,247,0.3);
border-radius: 999px;
padding: 0.25rem 0.7rem;
font-family: var(--ds-font-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #d2bbff;
width: fit-content;
}
.disc-deco-tag--cyan { background: rgba(0,212,255,0.1); border-color: rgba(0,212,255,0.25); color: var(--ds-cyan); }
.disc-deco-tag--gold { background: rgba(250,204,21,0.1); border-color: rgba(250,204,21,0.25); color: #facc15; }
.disc-deco-line {
height: 6px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
}
.disc-deco-line--lg { width: 100%; }
.disc-deco-line--md { width: 70%; }
.disc-deco-line--sm { width: 45%; }
/* ─── 61. Mobile Bottom Navigation ─────────────────────────── */
.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1050;
background: rgba(13,14,18,0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid rgba(255,255,255,0.07);
padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
}
@media (max-width: 991.98px) {
.mobile-bottom-nav { display: flex; }
body { padding-bottom: 68px; }
}
.mobile-bottom-nav-inner {
display: flex;
align-items: stretch;
justify-content: space-around;
width: 100%;
}
.mbn-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
padding: 0.4rem 0.25rem;
text-decoration: none;
color: var(--ds-on-surface-muted);
border: none;
background: none;
cursor: pointer;
transition: color 0.2s;
-webkit-tap-highlight-color: transparent;
}
.mbn-item:hover,
.mbn-item.active { color: var(--ds-purple); }
.mbn-item i {
font-size: 1.2rem;
line-height: 1;
}
.mbn-label {
font-family: var(--ds-font-label);
font-size: 0.54rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1;
}
/* ═══════════════════════════════════════════════════════════════
62. Light mode — widget & dark-first override fixes
Beats §49b+ rules that hardcode #fff / dark surfaces.
Dark mode unchanged: scoped to [data-theme="light"] only.
═══════════════════════════════════════════════════════════════ */
/* Navbar search + Guru level pill */
[data-theme="light"] .nav-search-wrap {
background: rgba(0, 0, 0, 0.04) !important;
border-color: var(--ds-border-mid) !important;
}
[data-theme="light"] .nav-search-wrap:focus-within {
background: rgba(123, 47, 247, 0.06) !important;
border-color: rgba(123, 47, 247, 0.35) !important;
}
[data-theme="light"] .nav-search-input {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .nav-search-input::placeholder {
color: var(--ds-on-surface-muted) !important;
opacity: 1;
}
[data-theme="light"] .nav-search-btn {
color: var(--ds-on-surface-muted) !important;
}
/* Guru pill + profile — solid purple on light navbar (beats navbar-dark white links) */
html[data-theme="light"] .site-navbar.navbar-dark #gmLevelNav .gm-level-badge,
html[data-theme="light"] .site-navbar #gmLevelNav .gm-level-badge {
background: var(--ds-purple) !important;
border: 1px solid #5f24c4 !important;
color: #fff !important;
text-shadow: none !important;
box-shadow: 0 2px 10px rgba(123, 47, 247, 0.35) !important;
font-weight: 700 !important;
}
html[data-theme="light"] .site-navbar #gmLevelNav .gm-level-name,
html[data-theme="light"] .site-navbar #gmLevelNav .gm-level-icon i {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
filter: none !important;
}
html[data-theme="light"] .site-navbar #gmLevelNav .gm-level-badge:hover,
html[data-theme="light"] .site-navbar #gmLevelNav .gm-level-wrap:hover .gm-level-badge,
html[data-theme="light"] .site-navbar #gmLevelNav .gm-level-wrap:focus-within .gm-level-badge {
background: #6920d4 !important;
border-color: #4c1899 !important;
color: #fff !important;
box-shadow: 0 0 0 2px rgba(123, 47, 247, 0.25), 0 4px 14px rgba(123, 47, 247, 0.4) !important;
}
html[data-theme="light"] .site-navbar.navbar-dark .nav-link.nav-profile-link,
html[data-theme="light"] .site-navbar .nav-link.nav-profile-link,
html[data-theme="light"] .site-navbar.navbar-dark #gmTrophyNav .nav-link,
html[data-theme="light"] .site-navbar #gmTrophyNav .nav-link {
color: #fff !important;
background: var(--ds-purple) !important;
border: 1px solid #5f24c4 !important;
border-radius: 999px !important;
min-width: 2.25rem;
min-height: 2.25rem;
display: inline-flex !important;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(123, 47, 247, 0.35) !important;
padding: 0.35rem 0.5rem !important;
}
html[data-theme="light"] .site-navbar .nav-link.nav-profile-link:hover,
html[data-theme="light"] .site-navbar .nav-link.nav-profile-link.active,
html[data-theme="light"] .site-navbar #gmTrophyNav .nav-link:hover,
html[data-theme="light"] .site-navbar #gmTrophyNav .nav-link:focus {
color: #fff !important;
background: #6920d4 !important;
border-color: #4c1899 !important;
}
html[data-theme="light"] .site-navbar .nav-link.nav-profile-link i,
html[data-theme="light"] .site-navbar #gmTrophyNav .nav-link i {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: 1.25rem !important;
filter: none !important;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar .gm-level-badge,
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar .gm-level-wrap:hover .gm-level-badge,
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar .gm-level-wrap:focus-within .gm-level-badge {
background: linear-gradient(145deg, rgba(123, 47, 247, 0.35) 0%, rgba(91, 33, 182, 0.55) 100%) !important;
border: 1px solid rgba(220, 200, 255, 0.55) !important;
color: #fff8f0 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar .gm-level-name {
color: #fff8f0 !important;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar .gm-level-icon i {
color: #fff !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar .nav-link.nav-profile-link,
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar #gmTrophyNav .nav-link {
color: #fff !important;
background: rgba(123, 47, 247, 0.28) !important;
border: 1px solid rgba(220, 200, 255, 0.4) !important;
border-radius: 999px !important;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar .nav-link.nav-profile-link:hover,
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar .nav-link.nav-profile-link.active,
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar #gmTrophyNav .nav-link:hover,
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar #gmTrophyNav .nav-link:focus {
color: #fff !important;
background: rgba(123, 47, 247, 0.42) !important;
border-color: rgba(242, 220, 160, 0.75) !important;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar .nav-link.nav-profile-link i,
html:is([data-theme="dark"], [data-bs-theme="dark"]) .site-navbar #gmTrophyNav .nav-link i {
color: #fff !important;
font-size: 1.2rem !important;
}
/* FAQ accordion (§49b sets white text on expanded state) */
[data-theme="light"] .faq-accordion .accordion-item,
[data-theme="light"] .faq-accordion-item {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
}
[data-theme="light"] .faq-accordion-btn,
[data-theme="light"] .faq-accordion .accordion-button {
background: #fff !important;
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .faq-accordion-btn:not(.collapsed),
[data-theme="light"] .faq-accordion .accordion-button:not(.collapsed) {
background: rgba(123, 47, 247, 0.08) !important;
color: var(--ds-purple) !important;
}
[data-theme="light"] .faq-accordion-btn::after,
[data-theme="light"] .faq-accordion .accordion-button::after {
filter: none !important;
opacity: 0.5 !important;
}
[data-theme="light"] .faq-accordion-btn:not(.collapsed)::after,
[data-theme="light"] .faq-accordion .accordion-button:not(.collapsed)::after {
opacity: 0.75 !important;
}
[data-theme="light"] .faq-accordion-body,
[data-theme="light"] .faq-accordion .accordion-body {
background: rgba(0, 0, 0, 0.015) !important;
color: var(--ds-on-surface-muted) !important;
border-top-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .useful-links-heading {
color: var(--ds-on-surface-muted) !important;
}
/* Reader poll */
[data-theme="light"] .poll-card {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
}
[data-theme="light"] .poll-card .sidebar-widget-heading {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .poll-question {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .poll-option-label {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .poll-option:hover:not(.voted) .poll-option-label {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .poll-option.my-vote .poll-option-label {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .poll-card.poll--results-visible .poll-option.my-vote .poll-bar {
background: var(--ds-purple) !important;
box-shadow: none !important;
}
[data-theme="light"] .poll-option-pct,
[data-theme="light"] .poll-options .poll-option:nth-child(4n+1) .poll-option-pct,
[data-theme="light"] .poll-options .poll-option:nth-child(4n+2) .poll-option-pct,
[data-theme="light"] .poll-options .poll-option:nth-child(4n+3) .poll-option-pct,
[data-theme="light"] .poll-options .poll-option:nth-child(4n+4) .poll-option-pct,
[data-theme="light"] .poll-legend-pct {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .poll-bar,
[data-theme="light"] .poll-option.winner .poll-bar,
[data-theme="light"] .poll-options .poll-option:nth-child(4n+1) .poll-bar,
[data-theme="light"] .poll-options .poll-option:nth-child(4n+2) .poll-bar,
[data-theme="light"] .poll-options .poll-option:nth-child(4n+3) .poll-bar,
[data-theme="light"] .poll-options .poll-option:nth-child(4n+4) .poll-bar {
background: rgba(0, 0, 0, 0.1) !important;
box-shadow: none !important;
}
[data-theme="light"] .poll-legend-item {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .poll-toggle-results,
[data-theme="light"] .btn-poll-toggle {
border-color: var(--ds-border-mid) !important;
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .poll-toggle-results:hover,
[data-theme="light"] .btn-poll-toggle:hover {
border-color: rgba(123, 47, 247, 0.4) !important;
color: var(--ds-purple) !important;
}
/* Mystery Discovery widget */
[data-theme="light"] .p2m-photo-widget {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
}
[data-theme="light"] .p2m-photo-widget::before {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .p2m-photo-prompt {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .p2m-photo-next-btn {
background: var(--ds-surface-low) !important;
border-color: var(--ds-border-mid) !important;
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .p2m-photo-next-btn:hover {
background: rgba(123, 47, 247, 0.08) !important;
color: var(--ds-purple) !important;
}
[data-theme="light"] .p2m-photo-react-btn {
background: var(--ds-surface-low) !important;
border-color: var(--ds-border-mid) !important;
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .p2m-photo-react-btn:hover {
color: var(--ds-on-surface) !important;
background: rgba(123, 47, 247, 0.06) !important;
}
[data-theme="light"] .p2m-photo-action-btn,
[data-theme="light"] .p2m-photo-action-btn--surprise {
background: var(--ds-surface-low) !important;
border-color: var(--ds-border-mid) !important;
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .p2m-photo-action-btn:hover,
[data-theme="light"] .p2m-photo-action-btn--surprise:hover {
color: var(--ds-purple) !important;
border-color: rgba(123, 47, 247, 0.35) !important;
}
[data-theme="light"] .p2m-photo-vibe-stats-btn,
[data-theme="light"] .p2m-photo-credit {
color: var(--ds-on-surface-muted) !important;
opacity: 1 !important;
}
/* TOC community counters */
[data-theme="light"] .article-community-row {
border-top-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .art-community-btn {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .art-community-btn:hover {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .art-community-count {
color: var(--ds-on-surface) !important;
}
/* Market Pulse */
[data-theme="light"] .market-pulse-card {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
}
[data-theme="light"] .market-pulse-label {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .market-pulse-item-name {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .market-pulse-item-status {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .market-pulse-track {
background: rgba(0, 0, 0, 0.08) !important;
}
/* Editorial team card */
[data-theme="light"] .editorial-team-card {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .editorial-team-name {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .editorial-team-role {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .editorial-team-desc {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .editorial-team-link:hover {
color: var(--ds-purple) !important;
}
/* Community vibe + sidebar widgets */
[data-theme="light"] .community-vibe-block,
[data-theme="light"] .article-sidebar-widget,
[data-theme="light"] .bonus-tip-card {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
}
[data-theme="light"] .cvibe-action-btn {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .cvibe-action-btn:hover {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .cvibe-emoji-btn {
background: var(--ds-surface-low) !important;
border-color: var(--ds-border-mid) !important;
}
/* Article tables */
[data-theme="light"] .content-article table {
border-color: var(--ds-border-mid) !important;
}
[data-theme="light"] .content-article thead {
background: var(--ds-surface-container) !important;
}
[data-theme="light"] .content-article thead th {
color: var(--ds-on-surface) !important;
border-bottom-color: var(--ds-border-mid) !important;
}
[data-theme="light"] .content-article tbody tr {
border-bottom-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .content-article tbody td {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .content-article tbody td:first-child {
color: var(--ds-on-surface) !important;
font-weight: 600 !important;
}
[data-theme="light"] .content-article blockquote,
[data-theme="light"] .content-article .editorial-callout {
background: var(--ds-surface-low) !important;
color: var(--ds-on-surface-muted) !important;
}
/* Discoveries hero decorative stack */
[data-theme="light"] .disc-hero-section {
background: var(--ds-surface-lowest) !important;
}
[data-theme="light"] .disc-hero-headline {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .disc-hero-crumb a {
color: var(--ds-purple) !important;
}
[data-theme="light"] .disc-hero-crumb a:hover {
color: var(--ds-cyan) !important;
}
[data-theme="light"] .disc-hero-subtext {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .disc-deco-card {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .disc-deco-tag {
background: rgba(123, 47, 247, 0.12) !important;
border-color: rgba(123, 47, 247, 0.28) !important;
color: #5a1fb8 !important;
}
[data-theme="light"] .disc-deco-tag--cyan {
background: rgba(0, 148, 180, 0.1) !important;
border-color: rgba(0, 148, 180, 0.28) !important;
color: #006b82 !important;
}
[data-theme="light"] .disc-deco-tag--gold {
background: rgba(160, 110, 0, 0.12) !important;
border-color: rgba(160, 110, 0, 0.3) !important;
color: #7a5200 !important;
}
[data-theme="light"] .disc-deco-line {
background: rgba(0, 0, 0, 0.09) !important;
}
[data-theme="light"] .disc-stat-chip {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
}
[data-theme="light"] .disc-stat-chip-val {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .disc-stat-chip--cyan .disc-stat-chip-val {
color: #007a94 !important;
}
[data-theme="light"] .disc-stat-chip-label {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .discoveries-filter-icons {
border-left-color: var(--ds-border-subtle) !important;
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .discoveries-filter-icons i:hover {
color: var(--ds-purple) !important;
}
/* Categories page — tile grid borders */
[data-theme="light"] .cat-stream-tile {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
color: var(--ds-on-surface) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .cat-stream-tile:hover {
background: rgba(123, 47, 247, 0.04) !important;
border-color: rgba(123, 47, 247, 0.35) !important;
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .cat-stream-tile-label {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .cat-stream-tile:hover .cat-stream-tile-label {
color: var(--ds-purple) !important;
}
/* Bento image overlays — always light text on dark gradient */
.bento-feature-card--overlay .bento-overlay-desc {
color: rgba(255, 255, 255, 0.85) !important;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}
.bento-feature-card--overlay .bento-overlay-list li {
color: rgba(255, 255, 255, 0.95) !important;
}
.bento-feature-card--overlay .bento-overlay-hot {
color: rgba(255, 255, 255, 0.92) !important;
}
.bento-feature-card--overlay .bento-overlay-pct {
color: #7ee8ff !important;
}
.bento-feature-card--overlay .bento-pipe-tag {
color: rgba(255, 255, 255, 0.9) !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
border-right-color: rgba(255, 255, 255, 0.35) !important;
}
.bento-feature-card--overlay .bento-overlay-bottom {
border-top-color: rgba(255, 255, 255, 0.18) !important;
}
.bento-feature-card--overlay .bento-img-frame--fill::after {
background: linear-gradient(to top,
rgba(11, 12, 16, 1) 0%,
rgba(11, 12, 16, 0.95) 28%,
rgba(11, 12, 16, 0.72) 52%,
rgba(11, 12, 16, 0.35) 75%,
transparent 100%) !important;
}
/* Glass bento cards (Beauty, Lifestyle) — light surfaces */
[data-theme="light"] .bento-glass-card {
background: #fff !important;
border-color: var(--ds-border-mid) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .bento-glass-card-title {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .bento-glass-card .bento-overlay-row-label {
color: var(--ds-on-surface-muted) !important;
text-shadow: none !important;
}
[data-theme="light"] .bento-archetypes-list li {
color: var(--ds-on-surface) !important;
border-bottom-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .bento-trend-item {
border-bottom-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .bento-trend-item-title {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .bento-trend-item-sub {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .bento-data-insight {
background: var(--ds-surface-low) !important;
border-color: var(--ds-border-mid) !important;
}
[data-theme="light"] .bento-data-insight-label {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .bento-data-insight-val {
color: #007a94 !important;
}
[data-theme="light"] .bento-data-insight-desc {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .bento-feature-explore {
color: #fff !important;
}
/* About / static / legal / contact content pages (§47 dark-first rules) */
[data-theme="light"] .about-section {
background: var(--ds-surface-lowest) !important;
}
[data-theme="light"] .about-card,
[data-theme="light"] .contact-page-card {
background: var(--ds-surface) !important;
border: 1px solid var(--ds-border-mid) !important;
border-radius: 20px !important;
box-shadow: 0 4px 24px rgba(18, 21, 32, 0.06) !important;
}
[data-theme="light"] .about-card h1.section-heading,
[data-theme="light"] .about-card .static-page-body h2,
[data-theme="light"] .about-card .static-page-body h3 {
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .about-card .static-page-body h2 {
border-bottom-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .about-card .lead,
[data-theme="light"] .about-card .text-muted {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .about-card .static-page-body p,
[data-theme="light"] .about-card p:not(.page-title-crumb),
[data-theme="light"] .about-card .static-page-body ul,
[data-theme="light"] .about-card .static-page-body ol,
[data-theme="light"] .about-card .static-page-body li {
color: var(--ds-on-surface-muted) !important;
}
[data-theme="light"] .about-card .static-page-body blockquote {
background: rgba(123, 47, 247, 0.06) !important;
color: var(--ds-on-surface) !important;
border-left-color: var(--ds-purple) !important;
}
[data-theme="light"] .about-card hr {
border-color: var(--ds-border-subtle) !important;
}
[data-theme="light"] .contact-page-card .form-control {
background: var(--ds-surface-low) !important;
border-color: var(--ds-border-mid) !important;
color: var(--ds-on-surface) !important;
}
[data-theme="light"] .contact-page-card .form-control:focus {
background: var(--ds-surface) !important;
border-color: rgba(123, 47, 247, 0.45) !important;
box-shadow: 0 0 0 3px rgba(123, 47, 247, 0.12) !important;
}
[data-theme="light"] .contact-page-card .form-label {
color: var(--ds-on-surface-muted) !important;
}
/* Trophy FAB on mobile — keep theme colors (style.css forces solid purple) */
@media (max-width: 991.98px) {
html[data-theme="light"] #gmTrophyFab,
html[data-theme="light"] .gm-trophy-fab {
background: var(--ds-surface) !important;
border-color: var(--ds-border-mid) !important;
color: var(--ds-purple) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html[data-theme="light"] #gmTrophyFab i,
html[data-theme="light"] .gm-trophy-fab i {
color: var(--ds-purple) !important;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) #gmTrophyFab,
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-trophy-fab {
background: linear-gradient(145deg, rgba(123, 47, 247, 0.9) 0%, rgba(91, 33, 182, 0.95) 100%) !important;
border-color: rgba(220, 200, 255, 0.4) !important;
color: #fff !important;
}
}