/* ============================================================ VerdictDesk — 20 Switchable Themes (auto-generated by gen-themes.mjs) Switch via . This file is GENERATED. Edit themes.config.mjs, not this file. ============================================================ */ /* ---- Baby & Parenting (industry) · ref: 参考 Consumer Reports / What to Expect 的柔和关怀感 ---- */ [data-style="baby"] { --fs-display: clamp(2.4rem, 5.5vw, 3.6rem); --fs-heading: 1.75rem; --fs-body: 1.12rem; --fs-small: 0.8rem; --lh-body: 1.8; --heading-weight: 600; --gap-base: 1.75rem; --section-base: 3.5rem; --card-base: 1.75rem; } [data-style="baby"] { --color-bg: #FFF7F9; --color-surface: #FFFFFF; --color-surface-2: #FBEFF2; --color-ink: #3A2E33; --color-ink-soft: #8A7680; --color-line: #F0DDE4; --color-line-strong: #E4CBD4; --color-accent: #E86A9E; --color-accent-ink: #C24B7E; --color-accent-tint: #FCE4EE; --color-highlight: #6FB7C9; --color-highlight-ink: #3E8597; --color-highlight-tint: #E2F2F5; --on-accent: #FFFFFF; --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 18px; --shadow-sm: 0 1px 2px rgba(58,46,51,.06); --shadow: 0 8px 22px rgba(58,46,51,.08); --shadow-lg: 0 20px 50px rgba(58,46,51,.14); --maxw: 1180px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line); } [data-style="baby"][data-theme="dark"] { --color-bg: #1E1620; --color-surface: #281D29; --color-surface-2: #32242F; --color-ink: #F6E9EE; --color-ink-soft: #C2A8B2; --color-line: #3C2C38; --color-line-strong: #4A3744; --color-accent: #F58FBE; --color-accent-ink: #FFD3E5; --color-accent-tint: #3A2233; --color-highlight: #7FC9DA; --color-highlight-ink: #B8E6EF; --color-highlight-tint: #20323A; --on-accent: #2A1620; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 22px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-line); } [data-style="baby"] .site-header { position: sticky; top: 0; } [data-style="baby"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="baby"] .layout { grid-template-columns: 1fr 260px; } [data-style="baby"] .sidebar { display: block; } [data-style="baby"] .score { display: none !important; } [data-style="baby"] .score--stars { display: inline-flex !important; } [data-style="baby"] .table-wrap { display: none !important; } [data-style="baby"] .compare--cards { display: grid !important; } /* ---- Electronics & Tech (industry) · ref: 参考 RTINGS / TechRadar 的数据驱动精密感 ---- */ [data-style="electronics"] { --fs-display: clamp(2.2rem, 5vw, 3.3rem); --fs-heading: 1.6rem; --fs-body: 1.05rem; --fs-small: 0.8rem; --lh-body: 1.6; --heading-weight: 600; --gap-base: 1.5rem; --section-base: 3rem; --card-base: 1.5rem; } [data-style="electronics"] { --color-bg: #F7F9FC; --color-surface: #FFFFFF; --color-surface-2: #EEF3F8; --color-ink: #11203A; --color-ink-soft: #5A6B85; --color-line: #DCE6F0; --color-line-strong: #C6D4E2; --color-accent: #1B5FE3; --color-accent-ink: #1349B5; --color-accent-tint: #E2ECFC; --color-highlight: #00B8A9; --color-highlight-ink: #007E74; --color-highlight-tint: #DDF6F3; --on-accent: #FFFFFF; --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, sans-serif; --radius: 10px; --shadow-sm: 0 1px 2px rgba(17,32,58,.06); --shadow: 0 8px 22px rgba(17,32,58,.10); --shadow-lg: 0 20px 50px rgba(17,32,58,.16); --maxw: 1240px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line); } [data-style="electronics"][data-theme="dark"] { --color-bg: #0C1320; --color-surface: #121C2E; --color-surface-2: #1A2740; --color-ink: #E7EEF8; --color-ink-soft: #9DB0CC; --color-line: #23314A; --color-line-strong: #33445F; --color-accent: #4C86F0; --color-accent-ink: #A9C6FF; --color-accent-tint: #15233C; --color-highlight: #2BD4C4; --color-highlight-ink: #A6F2EA; --color-highlight-tint: #10302C; --on-accent: #0C1320; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 8px 22px rgba(0,0,0,.5); --shadow-lg: 0 20px 50px rgba(0,0,0,.65); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-line); } [data-style="electronics"] .site-header { position: sticky; top: 0; } [data-style="electronics"] .listing-grid { grid-template-columns: repeat(4, 1fr); } [data-style="electronics"] .layout { grid-template-columns: 260px 1fr; } [data-style="electronics"] .sidebar { display: block; order: -1; } [data-style="electronics"] .score { display: none !important; } [data-style="electronics"] .score--radar { display: inline-flex !important; } /* ---- Furniture & Home (industry) · ref: 参考 Wirecutter / Apartment Therapy 的温暖自然感 ---- */ [data-style="furniture"] { --fs-display: clamp(2.3rem, 5vw, 3.3rem); --fs-heading: 1.6rem; --fs-body: 1.06rem; --fs-small: 0.8rem; --lh-body: 1.6; --heading-weight: 700; --gap-base: 1.5rem; --section-base: 3rem; --card-base: 1.5rem; } [data-style="furniture"] { --color-bg: #FAF6EF; --color-surface: #FFFFFF; --color-surface-2: #F0E9DD; --color-ink: #2E271E; --color-ink-soft: #7A6E5C; --color-line: #E6DCCB; --color-line-strong: #D4C6AE; --color-accent: #B07A3C; --color-accent-ink: #8A5E27; --color-accent-tint: #F1E6D3; --color-highlight: #5E7C4F; --color-highlight-ink: #43603A; --color-highlight-tint: #E4ECDD; --on-accent: #FFFFFF; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 14px; --shadow-sm: 0 1px 2px rgba(46,39,30,.06); --shadow: 0 8px 22px rgba(46,39,30,.08); --shadow-lg: 0 20px 50px rgba(46,39,30,.14); --maxw: 1180px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 2px solid var(--color-ink); } [data-style="furniture"][data-theme="dark"] { --color-bg: #1C1813; --color-surface: #261F17; --color-surface-2: #302619; --color-ink: #F3ECDF; --color-ink-soft: #C3B49C; --color-line: #3A3122; --color-line-strong: #4A3E29; --color-accent: #D49B56; --color-accent-ink: #F0C98A; --color-accent-tint: #332717; --color-highlight: #83A56F; --color-highlight-ink: #B6D3A3; --color-highlight-tint: #222E1C; --on-accent: #1C1813; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 22px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 2px solid var(--color-ink); } [data-style="furniture"] .site-header { position: static; } [data-style="furniture"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="furniture"] .review-card { flex-direction: row; } [data-style="furniture"] .review-card__media { flex: 0 0 38%; aspect-ratio: 4/3; min-width: 0; } [data-style="furniture"] .review-card__body { flex: 1; } [data-style="furniture"] .layout { grid-template-columns: 1fr; } [data-style="furniture"] .sidebar { display: none; } [data-style="furniture"] .score { display: none !important; } [data-style="furniture"] .score--number { display: inline-flex !important; } [data-style="furniture"] .table-wrap { display: none !important; } [data-style="furniture"] .compare--cards { display: grid !important; } /* ---- Outdoor & Fitness (industry) · ref: 参考 OutdoorGearLab / REI 的硬朗户外感 ---- */ [data-style="outdoor"] { --fs-display: clamp(2.2rem, 5vw, 3.3rem); --fs-heading: 1.6rem; --fs-body: 1.02rem; --fs-small: 0.75rem; --lh-body: 1.5; --heading-weight: 700; --gap-base: 1.25rem; --section-base: 2.75rem; --card-base: 1.4rem; } [data-style="outdoor"] { --color-bg: #F5F8F2; --color-surface: #FFFFFF; --color-surface-2: #EAF1E4; --color-ink: #1F2A1C; --color-ink-soft: #5E6B55; --color-line: #DCE7D3; --color-line-strong: #C6D6B8; --color-accent: #3F7D34; --color-accent-ink: #2C5A24; --color-accent-tint: #E4F0DD; --color-highlight: #E08A1E; --color-highlight-ink: #A8650F; --color-highlight-tint: #FBEEDD; --on-accent: #FFFFFF; --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 12px; --shadow-sm: 0 1px 2px rgba(31,42,28,.06); --shadow: 0 8px 22px rgba(31,42,28,.09); --shadow-lg: 0 20px 50px rgba(31,42,28,.15); --maxw: 1200px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line); } [data-style="outdoor"][data-theme="dark"] { --color-bg: #121A10; --color-surface: #1B2518; --color-surface-2: #243019; --color-ink: #EAF1E2; --color-ink-soft: #A9BBA0; --color-line: #2A3A22; --color-line-strong: #3A4D2E; --color-accent: #5FA84E; --color-accent-ink: #A9E095; --color-accent-tint: #1E2E18; --color-highlight: #F2A23C; --color-highlight-ink: #F8CF8E; --color-highlight-tint: #2C2316; --on-accent: #121A10; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 8px 22px rgba(0,0,0,.5); --shadow-lg: 0 20px 50px rgba(0,0,0,.65); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-line); } [data-style="outdoor"] .site-header { position: sticky; top: 0; } [data-style="outdoor"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="outdoor"] .listing-grid { display: block; column-count: 3; column-gap: var(--space-4); } [data-style="outdoor"] .listing-grid > * { break-inside: avoid; margin-bottom: var(--space-4); width: 100%; } [data-style="outdoor"] .review-card { display: block; } [data-style="outdoor"] .review-card__media { aspect-ratio: 16/10; } [data-style="outdoor"] .layout { grid-template-columns: 1fr; } [data-style="outdoor"] .sidebar { display: none; } [data-style="outdoor"] .score { display: none !important; } [data-style="outdoor"] .score--stars { display: inline-flex !important; } [data-style="outdoor"] .table-wrap { display: none !important; } [data-style="outdoor"] .compare--accordion { display: block !important; } /* ---- Beauty & Skincare (industry) · ref: 参考 Allure / Sephora editorial 的优雅玫瑰金感 ---- */ [data-style="beauty"] { --fs-display: clamp(2.2rem, 5vw, 3.2rem); --fs-heading: 1.6rem; --fs-body: 1.05rem; --fs-small: 0.8rem; --lh-body: 1.65; --heading-weight: 600; --gap-base: 1.5rem; --section-base: 3rem; --card-base: 1.5rem; } [data-style="beauty"] { --color-bg: #FBF6F4; --color-surface: #FFFFFF; --color-surface-2: #F4E9E6; --color-ink: #3A2A2E; --color-ink-soft: #8A7078; --color-line: #ECDDD9; --color-line-strong: #DCC6C0; --color-accent: #C46B86; --color-accent-ink: #9E4E68; --color-accent-tint: #F6E3E9; --color-highlight: #C9A24B; --color-highlight-ink: #9A7726; --color-highlight-tint: #F5ECD6; --on-accent: #FFFFFF; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 16px; --shadow-sm: 0 1px 2px rgba(58,42,46,.06); --shadow: 0 8px 22px rgba(58,42,46,.09); --shadow-lg: 0 20px 50px rgba(58,42,46,.15); --maxw: 1180px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: none; } [data-style="beauty"][data-theme="dark"] { --color-bg: #1E1719; --color-surface: #281E20; --color-surface-2: #322225; --color-ink: #F6E8EA; --color-ink-soft: #C5A8AE; --color-line: #3C2C30; --color-line-strong: #4C3840; --color-accent: #DF8FA6; --color-accent-ink: #F6C7D5; --color-accent-tint: #3A2630; --color-highlight: #E0BE6B; --color-highlight-ink: #F2DEA4; --color-highlight-tint: #2E2616; --on-accent: #1E1719; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 22px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: none; } [data-style="beauty"] .site-header { position: sticky; top: 0; } [data-style="beauty"] .listing-grid { grid-template-columns: repeat(4, 1fr); } [data-style="beauty"] .layout { grid-template-columns: 1fr 260px; } [data-style="beauty"] .sidebar { display: block; } [data-style="beauty"] .score { display: none !important; } [data-style="beauty"] .score--number { display: inline-flex !important; } /* ---- Pet Supplies (industry) · ref: 参考 The Spruce Pets 的友好活泼感 ---- */ [data-style="pet"] { --fs-display: clamp(2.3rem, 5vw, 3.4rem); --fs-heading: 1.65rem; --fs-body: 1.06rem; --fs-small: 0.82rem; --lh-body: 1.6; --heading-weight: 700; --gap-base: 1.5rem; --section-base: 3rem; --card-base: 1.5rem; } [data-style="pet"] { --color-bg: #FFF9EF; --color-surface: #FFFFFF; --color-surface-2: #FFF1DC; --color-ink: #33281A; --color-ink-soft: #84735C; --color-line: #F2E5CE; --color-line-strong: #E6D2B1; --color-accent: #E8842B; --color-accent-ink: #B9641A; --color-accent-tint: #FDEBD6; --color-highlight: #4FA86B; --color-highlight-ink: #357A4C; --color-highlight-tint: #E2F2E7; --on-accent: #FFFFFF; --font-display: 'Syne', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 18px; --shadow-sm: 0 1px 2px rgba(51,40,26,.06); --shadow: 0 8px 22px rgba(51,40,26,.08); --shadow-lg: 0 20px 50px rgba(51,40,26,.14); --maxw: 1180px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 2px dashed var(--color-accent); } [data-style="pet"][data-theme="dark"] { --color-bg: #1E180F; --color-surface: #281E14; --color-surface-2: #322418; --color-ink: #F6EAD9; --color-ink-soft: #C5AE8E; --color-line: #3C2E1E; --color-line-strong: #4C3A26; --color-accent: #F4A04C; --color-accent-ink: #FBD0A0; --color-accent-tint: #332516; --color-highlight: #6FC28A; --color-highlight-ink: #AEE0BC; --color-highlight-tint: #1E2E20; --on-accent: #1E180F; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 22px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 2px dashed var(--color-accent); } [data-style="pet"] .site-header { position: sticky; top: 0; } [data-style="pet"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="pet"] .layout { grid-template-columns: 260px 1fr; } [data-style="pet"] .sidebar { display: block; order: -1; } [data-style="pet"] .score { display: none !important; } [data-style="pet"] .score--stars { display: inline-flex !important; } [data-style="pet"] .table-wrap { display: none !important; } [data-style="pet"] .compare--cards { display: grid !important; } /* ---- Food & Drink (industry) · ref: 参考 Serious Eats / Wirecutter Kitchen 的食欲暖色 ---- */ [data-style="food"] { --fs-display: clamp(2.3rem, 5vw, 3.3rem); --fs-heading: 1.6rem; --fs-body: 1.06rem; --fs-small: 0.8rem; --lh-body: 1.6; --heading-weight: 700; --gap-base: 1.5rem; --section-base: 3rem; --card-base: 1.5rem; } [data-style="food"] { --color-bg: #FDF6F2; --color-surface: #FFFFFF; --color-surface-2: #FBEDE6; --color-ink: #2E1C16; --color-ink-soft: #815F52; --color-line: #F2DCD2; --color-line-strong: #E6C3B3; --color-accent: #D6452B; --color-accent-ink: #A8331E; --color-accent-tint: #FBE0D8; --color-highlight: #E0A21E; --color-highlight-ink: #A8760F; --color-highlight-tint: #FBEFD3; --on-accent: #FFFFFF; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 14px; --shadow-sm: 0 1px 2px rgba(46,28,22,.06); --shadow: 0 8px 22px rgba(46,28,22,.09); --shadow-lg: 0 20px 50px rgba(46,28,22,.15); --maxw: 1200px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 2px solid var(--color-ink); } [data-style="food"][data-theme="dark"] { --color-bg: #1E130F; --color-surface: #281811; --color-surface-2: #321E15; --color-ink: #F7E6DD; --color-ink-soft: #C8A092; --color-line: #3C261D; --color-line-strong: #4C3225; --color-accent: #F06A4E; --color-accent-ink: #FBC2B2; --color-accent-tint: #3A211A; --color-highlight: #F2BE4C; --color-highlight-ink: #F8DDA0; --color-highlight-tint: #2E2316; --on-accent: #1E130F; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 22px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 2px solid var(--color-ink); } [data-style="food"] .site-header { position: sticky; top: 0; } [data-style="food"] .listing-grid { grid-template-columns: repeat(4, 1fr); } [data-style="food"] .listing-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-4); padding-bottom: var(--space-3); } [data-style="food"] .listing-grid > * { scroll-snap-align: start; flex: 0 0 82%; } [data-style="food"] .layout { grid-template-columns: 1fr; } [data-style="food"] .sidebar { display: none; } [data-style="food"] .score { display: none !important; } [data-style="food"] .score--bar { display: inline-flex !important; } /* ---- Books & Education (industry) · ref: 参考 Goodreads / Common Sense Media 的沉静学者感 ---- */ [data-style="books"] { --fs-display: clamp(2.4rem, 5.5vw, 3.6rem); --fs-heading: 1.75rem; --fs-body: 1.12rem; --fs-small: 0.8rem; --lh-body: 1.8; --heading-weight: 600; --gap-base: 1.75rem; --section-base: 3.5rem; --card-base: 1.75rem; } [data-style="books"] { --color-bg: #F7F6F2; --color-surface: #FFFFFF; --color-surface-2: #EFEEE8; --color-ink: #23222B; --color-ink-soft: #6A6878; --color-line: #E4E2DA; --color-line-strong: #D2CFC4; --color-accent: #5B4B8A; --color-accent-ink: #433568; --color-accent-tint: #ECE8F5; --color-highlight: #C2693F; --color-highlight-ink: #8F4A28; --color-highlight-tint: #F4E6DC; --on-accent: #FFFFFF; --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 10px; --shadow-sm: 0 1px 2px rgba(35,34,43,.06); --shadow: 0 8px 22px rgba(35,34,43,.08); --shadow-lg: 0 20px 50px rgba(35,34,43,.13); --maxw: 1140px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line); } [data-style="books"][data-theme="dark"] { --color-bg: #16151C; --color-surface: #1F1D27; --color-surface-2: #292732; --color-ink: #EDEAF4; --color-ink-soft: #B0ACC2; --color-line: #2E2C38; --color-line-strong: #3E3B4C; --color-accent: #8E7CC9; --color-accent-ink: #C9BEF0; --color-accent-tint: #262238; --color-highlight: #D98A5F; --color-highlight-ink: #EEB593; --color-highlight-tint: #2A2018; --on-accent: #16151C; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 22px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-line); } [data-style="books"] .site-header { position: static; } [data-style="books"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="books"] .listing-grid { grid-template-columns: 1fr; } [data-style="books"] .review-card { flex-direction: row; } [data-style="books"] .review-card__media { flex: 0 0 30%; aspect-ratio: 4/3; min-width: 0; } [data-style="books"] .review-card__body { flex: 1; } [data-style="books"] .layout { grid-template-columns: 1fr 260px; } [data-style="books"] .sidebar { display: block; } [data-style="books"] .score { display: none !important; } [data-style="books"] .score--number { display: inline-flex !important; } [data-style="books"] .table-wrap { display: none !important; } [data-style="books"] .compare--accordion { display: block !important; } /* ---- Auto & Garage (industry) · ref: 参考 Car and Driver / CR Autos 的硬派钢蓝感 ---- */ [data-style="auto"] { --fs-display: clamp(2.2rem, 5vw, 3.3rem); --fs-heading: 1.6rem; --fs-body: 1.05rem; --fs-small: 0.8rem; --lh-body: 1.6; --heading-weight: 600; --gap-base: 1.5rem; --section-base: 3rem; --card-base: 1.5rem; } [data-style="auto"] { --color-bg: #F6F7F9; --color-surface: #FFFFFF; --color-surface-2: #ECEEF1; --color-ink: #1C2128; --color-ink-soft: #5C6470; --color-line: #DDE1E6; --color-line-strong: #C7CDD5; --color-accent: #C0392B; --color-accent-ink: #97271C; --color-accent-tint: #F7DDD9; --color-highlight: #2C3E50; --color-highlight-ink: #1C2A38; --color-highlight-tint: #E2E7EC; --on-accent: #FFFFFF; --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 8px; --shadow-sm: 0 1px 2px rgba(28,33,40,.07); --shadow: 0 8px 22px rgba(28,33,40,.10); --shadow-lg: 0 20px 50px rgba(28,33,40,.16); --maxw: 1240px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line); } [data-style="auto"][data-theme="dark"] { --color-bg: #101316; --color-surface: #171C20; --color-surface-2: #1F262B; --color-ink: #E6EAEE; --color-ink-soft: #9AA4AE; --color-line: #2A3238; --color-line-strong: #3A454D; --color-accent: #E04B3C; --color-accent-ink: #F5B0A7; --color-accent-tint: #2E1B18; --color-highlight: #42617F; --color-highlight-ink: #9CC0DC; --color-highlight-tint: #16222C; --on-accent: #101316; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 8px 22px rgba(0,0,0,.5); --shadow-lg: 0 20px 50px rgba(0,0,0,.65); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-line); } [data-style="auto"] .site-header { position: sticky; top: 0; } [data-style="auto"] .listing-grid { grid-template-columns: repeat(4, 1fr); } [data-style="auto"] .review-card { flex-direction: row; } [data-style="auto"] .review-card__media { flex: 0 0 38%; aspect-ratio: 4/3; min-width: 0; } [data-style="auto"] .review-card__body { flex: 1; } [data-style="auto"] .layout { grid-template-columns: 260px 1fr; } [data-style="auto"] .sidebar { display: block; order: -1; } [data-style="auto"] .score { display: none !important; } [data-style="auto"] .score--bar { display: inline-flex !important; } /* ---- Health & Medical (industry) · ref: 参考 Mayo / Healthline / CR Health 的洁净临床感 ---- */ [data-style="medical"] { --fs-display: clamp(2rem, 4.5vw, 3rem); --fs-heading: 1.5rem; --fs-body: 1rem; --fs-small: 0.75rem; --lh-body: 1.7; --heading-weight: 500; --gap-base: 2rem; --section-base: 4rem; --card-base: 2rem; } [data-style="medical"] { --color-bg: #F6FAFB; --color-surface: #FFFFFF; --color-surface-2: #EAF4F6; --color-ink: #14282C; --color-ink-soft: #587680; --color-line: #DCEAEE; --color-line-strong: #C5DCE2; --color-accent: #1F8A8C; --color-accent-ink: #146263; --color-accent-tint: #DEF1F1; --color-highlight: #2E7DD1; --color-highlight-ink: #1E5B9C; --color-highlight-tint: #E2EEFA; --on-accent: #FFFFFF; --font-display: 'Hanken Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 12px; --shadow-sm: 0 1px 2px rgba(20,40,44,.06); --shadow: 0 8px 22px rgba(20,40,44,.08); --shadow-lg: 0 20px 50px rgba(20,40,44,.14); --maxw: 1180px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line); } [data-style="medical"][data-theme="dark"] { --color-bg: #0E181A; --color-surface: #15211F; --color-surface-2: #1C2C29; --color-ink: #E2F0F1; --color-ink-soft: #9CC0C2; --color-line: #22342F; --color-line-strong: #324A43; --color-accent: #3FB4B5; --color-accent-ink: #A6ECED; --color-accent-tint: #132624; --color-highlight: #4E9BEC; --color-highlight-ink: #B2D4F7; --color-highlight-tint: #16293A; --on-accent: #0E181A; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 22px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-line); } [data-style="medical"] .site-header { position: sticky; top: 0; } [data-style="medical"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="medical"] .layout { grid-template-columns: 260px 1fr; } [data-style="medical"] .sidebar { display: block; order: -1; } [data-style="medical"] .score { display: none !important; } [data-style="medical"] .score--number { display: inline-flex !important; } /* ---- Minimal (style) · ref: 极简：大量留白、单一墨色强调、近乎无圆角 ---- */ [data-style="minimal"] { --fs-display: clamp(2rem, 4.5vw, 3rem); --fs-heading: 1.5rem; --fs-body: 1rem; --fs-small: 0.75rem; --lh-body: 1.7; --heading-weight: 500; --gap-base: 2rem; --section-base: 4rem; --card-base: 2rem; } [data-style="minimal"] { --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #F6F6F6; --color-ink: #111111; --color-ink-soft: #777777; --color-line: #EAEAEA; --color-line-strong: #DADADA; --color-accent: #111111; --color-accent-ink: #111111; --color-accent-tint: #F0F0F0; --color-highlight: #111111; --color-highlight-ink: #111111; --color-highlight-tint: #F0F0F0; --on-accent: #FFFFFF; --font-display: 'Hanken Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 4px; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow: 0 6px 18px rgba(0,0,0,.06); --shadow-lg: 0 18px 40px rgba(0,0,0,.10); --maxw: 1080px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line); } [data-style="minimal"][data-theme="dark"] { --color-bg: #0A0A0A; --color-surface: #141414; --color-surface-2: #1E1E1E; --color-ink: #F2F2F2; --color-ink-soft: #9A9A9A; --color-line: #262626; --color-line-strong: #383838; --color-accent: #FFFFFF; --color-accent-ink: #FFFFFF; --color-accent-tint: #222222; --color-highlight: #FFFFFF; --color-highlight-ink: #FFFFFF; --color-highlight-tint: #222222; --on-accent: #0A0A0A; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 6px 18px rgba(0,0,0,.5); --shadow-lg: 0 18px 40px rgba(0,0,0,.7); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-line); } [data-style="minimal"] .site-header { position: static; } [data-style="minimal"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="minimal"] .layout { grid-template-columns: 1fr; } [data-style="minimal"] .sidebar { display: none; } [data-style="minimal"] .score { display: none !important; } [data-style="minimal"] .score--number { display: inline-flex !important; } [data-style="minimal"] .table-wrap { display: none !important; } [data-style="minimal"] .compare--accordion { display: block !important; } /* ---- Modern (style) · ref: 现代：紫罗兰渐变感、几何无衬线、清晰网格 ---- */ [data-style="modern"] { --fs-display: clamp(2.2rem, 5vw, 3.3rem); --fs-heading: 1.6rem; --fs-body: 1.05rem; --fs-small: 0.8rem; --lh-body: 1.6; --heading-weight: 600; --gap-base: 1.5rem; --section-base: 3rem; --card-base: 1.5rem; } [data-style="modern"] { --color-bg: #FAFAFD; --color-surface: #FFFFFF; --color-surface-2: #F0F0F8; --color-ink: #181826; --color-ink-soft: #5A5A72; --color-line: #E6E6F0; --color-line-strong: #D2D2E2; --color-accent: #6D5BD0; --color-accent-ink: #4E3FA8; --color-accent-tint: #ECE9FA; --color-highlight: #E0518A; --color-highlight-ink: #B23A6C; --color-highlight-tint: #FBE6F0; --on-accent: #FFFFFF; --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 14px; --shadow-sm: 0 1px 2px rgba(24,24,38,.06); --shadow: 0 8px 22px rgba(109,91,208,.12); --shadow-lg: 0 20px 50px rgba(109,91,208,.18); --maxw: 1200px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line); } [data-style="modern"][data-theme="dark"] { --color-bg: #0E0E18; --color-surface: #16152A; --color-surface-2: #1F1D38; --color-ink: #ECEAF8; --color-ink-soft: #A9A6CC; --color-line: #282644; --color-line-strong: #383560; --color-accent: #9C8CF0; --color-accent-ink: #CFC5FF; --color-accent-tint: #211E3E; --color-highlight: #F07CB0; --color-highlight-ink: #FAC2DD; --color-highlight-tint: #33203A; --on-accent: #0E0E18; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 8px 22px rgba(0,0,0,.5); --shadow-lg: 0 20px 50px rgba(0,0,0,.7); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-line); } [data-style="modern"] .site-header { position: sticky; top: 0; } [data-style="modern"] .listing-grid { grid-template-columns: repeat(4, 1fr); } [data-style="modern"] .layout { grid-template-columns: 1fr 260px; } [data-style="modern"] .sidebar { display: block; } [data-style="modern"] .score { display: none !important; } [data-style="modern"] .score--bar { display: inline-flex !important; } [data-style="modern"] .table-wrap { display: none !important; } [data-style="modern"] .compare--cards { display: grid !important; } /* ---- Retro 70s (style) · ref: 复古：焦橙+牛油果绿、衬线大标题、暖米底 ---- */ [data-style="retro"] { --fs-display: clamp(2.3rem, 5vw, 3.3rem); --fs-heading: 1.6rem; --fs-body: 1.06rem; --fs-small: 0.8rem; --lh-body: 1.6; --heading-weight: 700; --gap-base: 1.5rem; --section-base: 3rem; --card-base: 1.5rem; } [data-style="retro"] { --color-bg: #F7F0E1; --color-surface: #FFFDF6; --color-surface-2: #EFE6D2; --color-ink: #3B2E1E; --color-ink-soft: #84735A; --color-line: #E2D4BA; --color-line-strong: #CDBA98; --color-accent: #C8791F; --color-accent-ink: #9A5C12; --color-accent-tint: #F6E6CC; --color-highlight: #7A8B3C; --color-highlight-ink: #566327; --color-highlight-tint: #E9EED6; --on-accent: #FFFFFF; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 8px; --shadow-sm: 0 1px 2px rgba(59,46,30,.07); --shadow: 0 8px 22px rgba(59,46,30,.10); --shadow-lg: 0 20px 50px rgba(59,46,30,.16); --maxw: 1160px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 2px solid var(--color-ink); } [data-style="retro"][data-theme="dark"] { --color-bg: #1E180E; --color-surface: #282014; --color-surface-2: #322819; --color-ink: #F4E9D2; --color-ink-soft: #C2AE88; --color-line: #3A2E1C; --color-line-strong: #4C3C26; --color-accent: #E0952F; --color-accent-ink: #F6C885; --color-accent-tint: #332513; --color-highlight: #A6BE5A; --color-highlight-ink: #D2E39A; --color-highlight-tint: #2A2E16; --on-accent: #1E180E; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 22px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 2px solid var(--color-ink); } [data-style="retro"] .site-header { position: static; } [data-style="retro"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="retro"] .layout { grid-template-columns: 1fr; } [data-style="retro"] .sidebar { display: none; } [data-style="retro"] .score { display: none !important; } [data-style="retro"] .score--stars { display: inline-flex !important; } /* ---- Brutalist (style) · ref: 粗野主义：高对比、等宽字体、零圆角、粗黑边框 ---- */ [data-style="brutalist"] { --fs-display: clamp(2.6rem, 6vw, 4rem); --fs-heading: 2rem; --fs-body: 1.05rem; --fs-small: 0.78rem; --lh-body: 1.45; --heading-weight: 800; --gap-base: 1rem; --section-base: 2.5rem; --card-base: 1.25rem; } [data-style="brutalist"] { --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #F2F2F2; --color-ink: #000000; --color-ink-soft: #555555; --color-line: #000000; --color-line-strong: #000000; --color-accent: #000000; --color-accent-ink: #000000; --color-accent-tint: #EAEAEA; --color-highlight: #FF3B00; --color-highlight-ink: #FF3B00; --color-highlight-tint: #FFE9E2; --on-accent: #FFFFFF; --font-display: 'Space Mono', ui-monospace, monospace; --font-body: 'Space Mono', ui-monospace, monospace; --radius: 0px; --shadow-sm: 4px 4px 0 #000; --shadow: 6px 6px 0 #000; --shadow-lg: 10px 10px 0 #000; --maxw: 1200px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 3px solid var(--color-ink); } [data-style="brutalist"][data-theme="dark"] { --color-bg: #000000; --color-surface: #0D0D0D; --color-surface-2: #1A1A1A; --color-ink: #FFFFFF; --color-ink-soft: #AAAAAA; --color-line: #FFFFFF; --color-line-strong: #FFFFFF; --color-accent: #FFFFFF; --color-accent-ink: #FFFFFF; --color-accent-tint: #222222; --color-highlight: #FF6A3D; --color-highlight-ink: #FF6A3D; --color-highlight-tint: #3A1A12; --on-accent: #000000; --shadow-sm: 4px 4px 0 #FFF; --shadow: 6px 6px 0 #FFF; --shadow-lg: 10px 10px 0 #FFF; --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 3px solid var(--color-ink); } [data-style="brutalist"] .site-header { position: static; } [data-style="brutalist"] .listing-grid { grid-template-columns: repeat(2, 1fr); } [data-style="brutalist"] .layout { grid-template-columns: 1fr; } [data-style="brutalist"] .sidebar { display: none; } [data-style="brutalist"] .score { display: none !important; } [data-style="brutalist"] .score--number { display: inline-flex !important; } [data-style="brutalist"] .card, [data-style="brutalist"] .review-card, [data-style="brutalist"] .verdict, [data-style="brutalist"] .chip, [data-style="brutalist"] .aim-review-content table, [data-style="brutalist"] .sidebar, [data-style="brutalist"] .compare-card { border-width:3px !important; border-color:var(--color-ink) !important; } [data-style="brutalist"] .btn--primary, [data-style="brutalist"] .btn--accent { border-radius:0 !important; box-shadow:4px 4px 0 var(--color-ink) !important; } [data-style="brutalist"] .btn--ghost { border-radius:0 !important; } [data-style="brutalist"] h1,h2,h3 { letter-spacing:-0.02em; text-transform:uppercase; } /* ---- Neumorphic (style) · ref: 新拟物：同色凹凸阴影、超大圆角、低对比粉蓝 ---- */ [data-style="neumorphic"] { --fs-display: clamp(2.1rem, 4.8vw, 3.1rem); --fs-heading: 1.55rem; --fs-body: 1.05rem; --fs-small: 0.8rem; --lh-body: 1.7; --heading-weight: 600; --gap-base: 1.5rem; --section-base: 3.25rem; --card-base: 1.6rem; } [data-style="neumorphic"] { --color-bg: #E8EBF0; --color-surface: #E8EBF0; --color-surface-2: #DFE3E9; --color-ink: #4A5568; --color-ink-soft: #7A8699; --color-line: #D5D9E0; --color-line-strong: #C8CDD6; --color-accent: #5B7CFA; --color-accent-ink: #3D5BD6; --color-accent-tint: #DDE3FB; --color-highlight: #F25C8A; --color-highlight-ink: #C73E68; --color-highlight-tint: #FBDDE7; --on-accent: #FFFFFF; --font-display: 'Hanken Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 22px; --shadow-sm: 5px 5px 10px #c8ccd4, -5px -5px 10px #ffffff; --shadow: 8px 8px 18px #c4c8d0, -8px -8px 18px #ffffff; --shadow-lg: 16px 16px 36px #bcc0c8, -16px -16px 36px #ffffff; --maxw: 1160px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: none; } [data-style="neumorphic"][data-theme="dark"] { --color-bg: #262B33; --color-surface: #262B33; --color-surface-2: #20252C; --color-ink: #C9D2E0; --color-ink-soft: #8893A4; --color-line: #1E222A; --color-line-strong: #171B21; --color-accent: #7C9BFF; --color-accent-ink: #B9CCFF; --color-accent-tint: #2E3440; --color-highlight: #F58AAE; --color-highlight-ink: #FBC1D5; --color-highlight-tint: #33242E; --on-accent: #262B33; --shadow-sm: 5px 5px 10px #1b1f25, -5px -5px 10px #313641; --shadow: 8px 8px 18px #181c22, -8px -8px 18px #343b47; --shadow-lg: 16px 16px 36px #14171c, -16px -16px 36px #383f4b; --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: none; } [data-style="neumorphic"] .site-header { position: sticky; top: 0; } [data-style="neumorphic"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="neumorphic"] .layout { grid-template-columns: 260px 1fr; } [data-style="neumorphic"] .sidebar { display: block; order: -1; } [data-style="neumorphic"] .score { display: none !important; } [data-style="neumorphic"] .score--bar { display: inline-flex !important; } [data-style="neumorphic"] .table-wrap { display: none !important; } [data-style="neumorphic"] .compare--cards { display: grid !important; } /* ---- Glassmorphism (style) · ref: 玻璃态：半透明磨砂、背景渐变模糊、紫粉光晕 ---- */ [data-style="glass"] { --fs-display: clamp(2.2rem, 5vw, 3.2rem); --fs-heading: 1.6rem; --fs-body: 1.05rem; --fs-small: 0.8rem; --lh-body: 1.65; --heading-weight: 600; --gap-base: 1.5rem; --section-base: 3rem; --card-base: 1.5rem; } [data-style="glass"] { --color-bg: #EEF2FF; --color-surface: #FFFFFF; --color-surface-2: #F3ECFB; --color-ink: #1B1730; --color-ink-soft: #5A5478; --color-line: #E2DBF2; --color-line-strong: #CFC5E8; --color-accent: #7C3AED; --color-accent-ink: #5B25C0; --color-accent-tint: #EAE0FB; --color-highlight: #EC4899; --color-highlight-ink: #C52E78; --color-highlight-tint: #FBE0EF; --on-accent: #FFFFFF; --font-display: 'Syne', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 20px; --shadow-sm: 0 4px 16px rgba(80,40,160,.10); --shadow: 0 10px 32px rgba(80,40,160,.16); --shadow-lg: 0 24px 64px rgba(80,40,160,.22); --maxw: 1180px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: none; } [data-style="glass"][data-theme="dark"] { --color-bg: #0B0A1A; --color-surface: #16132E; --color-surface-2: #1C1838; --color-ink: #ECE8FB; --color-ink-soft: #A89FCC; --color-line: #2A2450; --color-line-strong: #3A3270; --color-accent: #A78BFA; --color-accent-ink: #D6C7FF; --color-accent-tint: #221C44; --color-highlight: #F472B6; --color-highlight-ink: #FBC2DD; --color-highlight-tint: #2E1A30; --on-accent: #0B0A1A; --shadow-sm: 0 4px 16px rgba(0,0,0,.4); --shadow: 0 10px 32px rgba(0,0,0,.5); --shadow-lg: 0 24px 64px rgba(0,0,0,.6); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: none; } [data-style="glass"] .site-header { position: fixed; top: 0; left: 0; right: 0; } [data-style="glass"] body { padding-top: var(--header-h); } [data-style="glass"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="glass"] .layout { grid-template-columns: 1fr 260px; } [data-style="glass"] .sidebar { display: block; } [data-style="glass"] .score { display: none !important; } [data-style="glass"] .score--radar { display: inline-flex !important; } [data-style="glass"] .table-wrap { display: none !important; } [data-style="glass"] .compare--cards { display: grid !important; } [data-style="glass"] body { background:linear-gradient(135deg,#E2E8FF 0%,#FBE7F4 50%,#E6FBF7 100%) !important; } [data-style="glass"][data-theme="dark"] body { background:linear-gradient(135deg,#0B0A1A 0%,#1A1330 55%,#101A2E 100%) !important; } [data-style="glass"] .site-header, [data-style="glass"] .card, [data-style="glass"] .review-card, [data-style="glass"] .verdict, [data-style="glass"] .chip, [data-style="glass"] .sidebar, [data-style="glass"] .compare-card, [data-style="glass"] .newsletter, [data-style="glass"] .trust-band, [data-style="glass"] .toc { background:color-mix(in srgb, var(--color-surface) 62%, transparent) !important; backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border-color:color-mix(in srgb, var(--color-line) 70%, transparent) !important; } /* ---- Editorial Magazine (style) · ref: 杂志风：高对比衬线、首字下沉、非对称栏、铁锈红 ---- */ [data-style="editorial"] { --fs-display: clamp(2.4rem, 5.5vw, 3.6rem); --fs-heading: 1.75rem; --fs-body: 1.12rem; --fs-small: 0.8rem; --lh-body: 1.8; --heading-weight: 600; --gap-base: 1.75rem; --section-base: 3.5rem; --card-base: 1.75rem; } [data-style="editorial"] { --color-bg: #FCFAF5; --color-surface: #FFFFFF; --color-surface-2: #F3EEE2; --color-ink: #1E1B16; --color-ink-soft: #6B6253; --color-line: #E5DCC8; --color-line-strong: #D2C5A8; --color-accent: #B23A2E; --color-accent-ink: #8A2A20; --color-accent-tint: #F4E2DE; --color-highlight: #2F6F6A; --color-highlight-ink: #1F4F4B; --color-highlight-tint: #DDEDEB; --on-accent: #FFFFFF; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 6px; --shadow-sm: 0 1px 2px rgba(30,27,22,.06); --shadow: 0 8px 22px rgba(30,27,22,.09); --shadow-lg: 0 20px 50px rgba(30,27,22,.15); --maxw: 1120px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line); } [data-style="editorial"][data-theme="dark"] { --color-bg: #16130E; --color-surface: #201B14; --color-surface-2: #2A2318; --color-ink: #F3ECDF; --color-ink-soft: #C2B49A; --color-line: #332B1E; --color-line-strong: #463B28; --color-accent: #E06A5C; --color-accent-ink: #F4B3A9; --color-accent-tint: #33221C; --color-highlight: #5BA89E; --color-highlight-ink: #A7D8D0; --color-highlight-tint: #1E2E2A; --on-accent: #16130E; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 22px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-line); } [data-style="editorial"] .site-header { position: static; } [data-style="editorial"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="editorial"] .listing-grid { display: block; column-count: 3; column-gap: var(--space-4); } [data-style="editorial"] .listing-grid > * { break-inside: avoid; margin-bottom: var(--space-4); width: 100%; } [data-style="editorial"] .review-card { display: block; } [data-style="editorial"] .review-card__media { aspect-ratio: 16/10; } [data-style="editorial"] .layout { grid-template-columns: 1fr 260px; } [data-style="editorial"] .sidebar { display: block; } [data-style="editorial"] .score { display: none !important; } [data-style="editorial"] .score--number { display: inline-flex !important; } [data-style="editorial"] .table-wrap { display: none !important; } [data-style="editorial"] .compare--accordion { display: block !important; } [data-style="editorial"] .article-head h1 { font-size:var(--fs-3xl); } [data-style="editorial"] .aim-review-content > p:first-of-type::first-letter { font-family:var(--font-display); font-size:3.4rem; line-height:0.8; float:left; padding:0.1em 0.12em 0 0; color:var(--color-accent); font-weight:700; } /* ---- Swiss International (style) · ref: 瑞士国际主义：严格网格、瑞士红/黑、grotesque 字体 ---- */ [data-style="swiss"] { --fs-display: clamp(2.2rem, 5vw, 3.3rem); --fs-heading: 1.6rem; --fs-body: 1.02rem; --fs-small: 0.75rem; --lh-body: 1.5; --heading-weight: 700; --gap-base: 1.25rem; --section-base: 2.75rem; --card-base: 1.4rem; } [data-style="swiss"] { --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #F4F4F4; --color-ink: #111111; --color-ink-soft: #666666; --color-line: #111111; --color-line-strong: #111111; --color-accent: #D81E05; --color-accent-ink: #D81E05; --color-accent-tint: #FBE3E0; --color-highlight: #111111; --color-highlight-ink: #111111; --color-highlight-tint: #EEEEEE; --on-accent: #FFFFFF; --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Archivo', system-ui, sans-serif; --radius: 0px; --shadow-sm: 0 0 0 rgba(0,0,0,0); --shadow: 0 0 0 rgba(0,0,0,0); --shadow-lg: 0 0 0 rgba(0,0,0,0); --maxw: 1200px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line); } [data-style="swiss"][data-theme="dark"] { --color-bg: #0A0A0A; --color-surface: #141414; --color-surface-2: #1E1E1E; --color-ink: #FFFFFF; --color-ink-soft: #AAAAAA; --color-line: #FFFFFF; --color-line-strong: #FFFFFF; --color-accent: #FF4433; --color-accent-ink: #FF4433; --color-accent-tint: #330F0B; --color-highlight: #FFFFFF; --color-highlight-ink: #FFFFFF; --color-highlight-tint: #222222; --on-accent: #0A0A0A; --shadow-sm: 0 0 0 rgba(0,0,0,0); --shadow: 0 0 0 rgba(0,0,0,0); --shadow-lg: 0 0 0 rgba(0,0,0,0); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-line); } [data-style="swiss"] .site-header { position: static; } [data-style="swiss"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="swiss"] .layout { grid-template-columns: 1fr; } [data-style="swiss"] .sidebar { display: none; } [data-style="swiss"] .score { display: none !important; } [data-style="swiss"] .score--number { display: inline-flex !important; } [data-style="swiss"] .card, [data-style="swiss"] .review-card, [data-style="swiss"] .verdict, [data-style="swiss"] .chip, [data-style="swiss"] .sidebar, [data-style="swiss"] .compare-card { border:2px solid var(--color-ink) !important; } [data-style="swiss"] h1,h2,h3 { letter-spacing:-0.03em; } [data-style="swiss"] .eyebrow::before { background:var(--color-accent); width:40px; } /* ---- Dark Luxury (style) · ref: 暗色奢华：金+酒红、衬线大标题、深邃底 ---- */ [data-style="darklux"] { --fs-display: clamp(2.3rem, 5vw, 3.4rem); --fs-heading: 1.65rem; --fs-body: 1.06rem; --fs-small: 0.8rem; --lh-body: 1.7; --heading-weight: 600; --gap-base: 1.5rem; --section-base: 3.25rem; --card-base: 1.6rem; } [data-style="darklux"] { --color-bg: #FBF7EF; --color-surface: #FFFFFF; --color-surface-2: #F3ECDD; --color-ink: #2A2118; --color-ink-soft: #7A6A55; --color-line: #E8DCC4; --color-line-strong: #D6C5A4; --color-accent: #9A7B3F; --color-accent-ink: #7A5F2C; --color-accent-tint: #F4EAD4; --color-highlight: #7A1F2B; --color-highlight-ink: #5C1620; --color-highlight-tint: #F2DCDF; --on-accent: #FFFFFF; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --radius: 12px; --shadow-sm: 0 1px 2px rgba(42,33,24,.08); --shadow: 0 8px 24px rgba(42,33,24,.12); --shadow-lg: 0 22px 54px rgba(42,33,24,.20); --maxw: 1180px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 1px solid var(--color-line-strong); } [data-style="darklux"][data-theme="dark"] { --color-bg: #14110D; --color-surface: #1E1A14; --color-surface-2: #261F16; --color-ink: #F3E8D2; --color-ink-soft: #BBA77F; --color-line: #3A3022; --color-line-strong: #4C3E29; --color-accent: #C9A24B; --color-accent-ink: #E6C97E; --color-accent-tint: #2C2417; --color-highlight: #B23A4A; --color-highlight-ink: #E08A98; --color-highlight-tint: #2A1A1E; --on-accent: #1A140A; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 8px 24px rgba(0,0,0,.55); --shadow-lg: 0 22px 54px rgba(0,0,0,.7); --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 1px solid var(--color-accent); } [data-style="darklux"] .site-header { position: sticky; top: 0; } [data-style="darklux"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="darklux"] .review-card { flex-direction: row; } [data-style="darklux"] .review-card__media { flex: 0 0 38%; aspect-ratio: 4/3; min-width: 0; } [data-style="darklux"] .review-card__body { flex: 1; } [data-style="darklux"] .layout { grid-template-columns: 260px 1fr; } [data-style="darklux"] .sidebar { display: block; order: -1; } [data-style="darklux"] .score { display: none !important; } [data-style="darklux"] .score--number { display: inline-flex !important; } [data-style="darklux"] .table-wrap { display: none !important; } [data-style="darklux"] .compare--cards { display: grid !important; } [data-style="darklux"] .verdict { border:1px solid var(--color-accent-tint); } [data-style="darklux"] .brand__mark { background:var(--color-accent); } /* ---- Memphis (style) · ref: 孟菲斯：明快撞色、几何斑块、粗黑描边、好玩 ---- */ [data-style="memphis"] { --fs-display: clamp(2.3rem, 5vw, 3.4rem); --fs-heading: 1.65rem; --fs-body: 1.06rem; --fs-small: 0.82rem; --lh-body: 1.6; --heading-weight: 700; --gap-base: 1.5rem; --section-base: 3rem; --card-base: 1.5rem; } [data-style="memphis"] { --color-bg: #FFFDF5; --color-surface: #FFFFFF; --color-surface-2: #FFF4D6; --color-ink: #1A1A2E; --color-ink-soft: #6A6A8A; --color-line: #1A1A2E; --color-line-strong: #1A1A2E; --color-accent: #FF4F87; --color-accent-ink: #D6235F; --color-accent-tint: #FFD9E8; --color-highlight: #00C2C7; --color-highlight-ink: #00989C; --color-highlight-tint: #CCF2F3; --on-accent: #FFFFFF; --font-display: 'Syne', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, sans-serif; --radius: 4px; --shadow-sm: 3px 3px 0 #1A1A2E; --shadow: 5px 5px 0 #1A1A2E; --shadow-lg: 9px 9px 0 #1A1A2E; --maxw: 1180px; --space-gap: var(--gap-base); --space-section: var(--section-base); --space-card: var(--card-base); --card-border: 2px dashed var(--color-accent); } [data-style="memphis"][data-theme="dark"] { --color-bg: #12121F; --color-surface: #1B1B2C; --color-surface-2: #24243A; --color-ink: #F4F4FF; --color-ink-soft: #A9A9C8; --color-line: #F4F4FF; --color-line-strong: #F4F4FF; --color-accent: #FF6FA0; --color-accent-ink: #FFC2DA; --color-accent-tint: #33203A; --color-highlight: #3DE0E5; --color-highlight-ink: #BDF6F8; --color-highlight-tint: #102E30; --on-accent: #12121F; --shadow-sm: 3px 3px 0 #F4F4FF; --shadow: 5px 5px 0 #F4F4FF; --shadow-lg: 9px 9px 0 #F4F4FF; --space-gap: calc(var(--gap-base) * .82); --space-section: calc(var(--section-base) * .9); --space-card: calc(var(--card-base) * .9); --card-border: 2px dashed var(--color-accent); } [data-style="memphis"] .site-header { position: sticky; top: 0; } [data-style="memphis"] .listing-grid { grid-template-columns: repeat(3, 1fr); } [data-style="memphis"] .listing-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-4); padding-bottom: var(--space-3); } [data-style="memphis"] .listing-grid > * { scroll-snap-align: start; flex: 0 0 82%; } [data-style="memphis"] .layout { grid-template-columns: 1fr; } [data-style="memphis"] .sidebar { display: none; } [data-style="memphis"] .score { display: none !important; } [data-style="memphis"] .score--stars { display: inline-flex !important; } [data-style="memphis"] .table-wrap { display: none !important; } [data-style="memphis"] .compare--cards { display: grid !important; } [data-style="memphis"] .card, [data-style="memphis"] .review-card, [data-style="memphis"] .verdict, [data-style="memphis"] .chip, [data-style="memphis"] .compare-card { border:3px solid var(--color-ink) !important; } [data-style="memphis"] .btn--primary, [data-style="memphis"] .btn--accent { border-radius:4px !important; box-shadow:3px 3px 0 var(--color-ink) !important; } [data-style="memphis"] .site-header { border-bottom:3px solid var(--color-ink); }