/** * sizeswapper.com — Premium Warm Minimal UI * Architecture: Mobile-first, Adaptive Card, Accessible Focus & Overlays */ /* ========================================================================== FONTS & TOKENS ========================================================================== */ :root { /* Premium Editorial Palette */ --color-bg: #F7F3EE; --color-surface: #FFFFFF; --color-text: #191716; --color-muted: #6F6A64; --color-border: #E6DED5; /* Primary Action */ --color-primary: #8A5A44; --color-primary-hover: #734937; /* Logo wordmark accent — deliberately stronger/more saturated than --color-primary, used only for the "Size" half of the wordmark so the logo has more visual presence than the rest of the UI's calmer accent. */ --color-logo-accent: #A94F32; /* Trust & Status */ --color-trust: #2F6F68; --color-trust-bg: #E8F0EF; --color-warning: #E6A23C; --color-warning-bg: #FFF4D8; --color-warning-text: #6D4B00; --color-error: #B00020; --color-error-bg: #FBE5E9; /* Geometry */ --radius-card: 16px; --radius-control: 12px; --radius-pill: 20px; /* Shadows & Elevations */ --shadow-sm: 0 2px 8px rgba(25, 23, 22, 0.04); --shadow-md: 0 8px 24px rgba(25, 23, 22, 0.08); --shadow-overlay: 0 -4px 24px rgba(25, 23, 22, 0.12); /* Transitions */ --transition-fast: 0.15s ease; --transition-drawer: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #171412; --color-surface: #211D1A; --color-text: #F7F3EE; --color-muted: #B9AEA5; --color-border: #3A332D; --color-primary: #D6A17F; --color-primary-hover: #E2B293; --color-logo-accent: #E08B62; --color-trust: #8CCBC2; --color-trust-bg: #173532; --color-warning: #F2C572; --color-warning-bg: #3A2D12; --color-warning-text: #FFE5A3; --color-error: #FF9CAA; --color-error-bg: #3A1E22; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-overlay: 0 -4px 24px rgba(0, 0, 0, 0.42); } } /* Manual theme override via data-theme attribute on , set by the anti-flash inline script in index.html's and toggled in app.js. Mirrors the media-query values above exactly — keep both in sync if either palette changes. data-theme="system" is intentionally absent: "system" means no attribute at all, which falls through to the prefers-color-scheme media query above. */ :root[data-theme="dark"] { --color-bg: #171412; --color-surface: #211D1A; --color-text: #F7F3EE; --color-muted: #B9AEA5; --color-border: #3A332D; --color-primary: #D6A17F; --color-primary-hover: #E2B293; --color-logo-accent: #E08B62; --color-trust: #8CCBC2; --color-trust-bg: #173532; --color-warning: #F2C572; --color-warning-bg: #3A2D12; --color-warning-text: #FFE5A3; --color-error: #FF9CAA; --color-error-bg: #3A1E22; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-overlay: 0 -4px 24px rgba(0, 0, 0, 0.42); } :root[data-theme="light"] { --color-bg: #F7F3EE; --color-surface: #FFFFFF; --color-text: #191716; --color-muted: #6F6A64; --color-border: #E6DED5; --color-primary: #8A5A44; --color-primary-hover: #734937; --color-logo-accent: #A94F32; --color-trust: #2F6F68; --color-trust-bg: #E8F0EF; --color-warning: #E6A23C; --color-warning-bg: #FFF4D8; --color-warning-text: #6D4B00; --color-error: #B00020; --color-error-bg: #FBE5E9; --shadow-sm: 0 2px 8px rgba(25, 23, 22, 0.04); --shadow-md: 0 8px 24px rgba(25, 23, 22, 0.08); --shadow-overlay: 0 -4px 24px rgba(25, 23, 22, 0.12); } /* ========================================================================== RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } .sz-skip-link { position: absolute; left: 16px; top: 16px; z-index: 1000; transform: translateY(-150%); background: var(--color-text); color: var(--color-surface); padding: 10px 14px; border-radius: var(--radius-control); font-weight: 700; } .sz-skip-link:focus-visible { transform: translateY(0); } body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--color-bg); color: var(--color-text); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Body Scroll Lock for Overlays */ body.sz-lock-scroll { overflow: hidden; } /* Accessible Focus States */ *:focus-visible { outline: 3px solid var(--color-trust); outline-offset: 3px; } /* Utility Classes */ .sz-hidden { display: none !important; } .sz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================== LAYOUT ========================================================================== */ .sz-site-header { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); } .sz-site-header-inner { max-width: 600px; margin: 0 auto; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sz-site-logo { font-size: clamp(1.55rem, 2.1vw, 2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; text-decoration: none; display: inline-flex; } .sz-logo-accent { color: var(--color-logo-accent); font-weight: 900; } .sz-logo-base { color: var(--color-text); } .sz-site-logo:hover .sz-logo-accent, .sz-site-logo:focus-visible .sz-logo-accent { color: var(--color-primary); } .sz-site-logo:hover .sz-logo-base, .sz-site-logo:focus-visible .sz-logo-base { color: var(--color-text); } .sz-site-nav { display: flex; align-items: center; gap: 20px; } .sz-site-nav a { display: inline-flex; align-items: center; height: 36px; font-size: 0.9375rem; font-weight: 500; color: var(--color-muted); text-decoration: none; } .sz-site-nav a:hover, .sz-site-nav a:focus-visible { color: var(--color-primary); } .sz-theme-toggle { position: relative; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; width: 44px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-bg); color: var(--color-text); cursor: pointer; line-height: 1; transition: var(--transition-fast); } .sz-theme-toggle:hover, .sz-theme-toggle:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } .sz-theme-toggle svg { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; flex-shrink: 0; display: none; } .sz-theme-toggle svg.sz-theme-icon-active { display: block; } .sz-container { max-width: 600px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; } .sz-card { background-color: var(--color-surface); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); } #sz-assistant-card { border-top: 4px solid var(--color-primary); } .sz-hero { padding: 8px 4px 0; } .sz-tool-title { font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 700; line-height: 1.3; color: var(--color-text); margin: 0 0 8px; } .sz-page-intro { font-size: 0.9375rem; line-height: 1.55; color: var(--color-muted); margin: 0 0 16px; } .sz-chip-label { display: block; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin: 0 0 8px; } .sz-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .sz-chip { display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-pill); background-color: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; white-space: nowrap; } a.sz-chip:hover, a.sz-chip:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } .sz-chip-static { white-space: normal; cursor: default; } .sz-request-block { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: 16px; } .sz-request-block .sz-chip-label { margin-bottom: 12px; } .sz-request-links { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 0.8125rem; } .sz-link-btn { background: none; border: none; padding: 0; font: inherit; font-size: inherit; color: var(--color-primary); text-decoration: underline; cursor: pointer; } .sz-link-btn:hover, .sz-link-btn:focus-visible { color: var(--color-primary-hover); } .sz-section { margin-bottom: 24px; } .sz-section:last-child { margin-bottom: 0; } /* ========================================================================== TYPOGRAPHY ========================================================================== */ h2, h3 { margin: 0 0 12px 0; font-weight: 600; color: var(--color-text); } h2 { font-size: 1.5rem; } h3 { font-size: 1.125rem; } p { margin: 0 0 12px 0; } .sz-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 8px; color: var(--color-text); } .sz-label-spacer { visibility: hidden; } .sz-helper-text { font-size: 0.875rem; color: var(--color-muted); margin: 0; } /* ========================================================================== CONTROLS (Pills) ========================================================================== */ .sz-control-block { margin-bottom: 20px; } .sz-control-block-unlabeled { margin-top: -20px; } .sz-pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .sz-control-block-stacked .sz-pill-group { flex-direction: column; align-items: stretch; gap: 12px; } .sz-pill-pair { display: flex; flex-direction: column; } .sz-control-block-stacked .sz-pill { text-align: left; } .sz-pill-helper-text { font-size: 0.8125rem; line-height: 1.4; color: var(--color-muted); margin: 6px 0 0; } .sz-pill { appearance: none; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 0.875rem; font-weight: 500; color: var(--color-muted); cursor: pointer; transition: all var(--transition-fast); } /* Active State: Cocoa primary, not generic black */ .sz-pill[aria-pressed="true"], .sz-pill.is-active { background: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); } .sz-pill:hover:not(.is-active) { border-color: var(--color-muted); } /* ========================================================================== INPUTS & COMBOBOX ========================================================================== */ .sz-input { width: 100%; padding: 14px 16px; font-size: 1rem; font-family: inherit; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .sz-input:focus { outline: none; border-color: var(--color-trust); box-shadow: 0 0 0 3px var(--color-trust-bg); } .sz-input::placeholder { color: var(--color-muted); opacity: 0.6; } /* Error States */ .sz-input[aria-invalid="true"], .sz-input.sz-input-error { border-color: var(--color-error); } .sz-input[aria-invalid="true"]:focus, .sz-input.sz-input-error:focus { box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.1); } .sz-error-text { color: var(--color-error); font-size: 0.875rem; margin-top: 6px; display: block; } .sz-field-row { display: flex; gap: 8px; align-items: center; } .sz-measurement-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 480px) { .sz-measurement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Combobox */ .sz-combobox-wrapper { position: relative; margin-bottom: 16px; } .sz-listbox { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); box-shadow: var(--shadow-md); margin: 0; padding: 8px 0; list-style: none; z-index: 100; } .sz-listbox [role="option"] { padding: 12px 16px; cursor: pointer; font-size: 1rem; border-bottom: 1px solid var(--color-bg); } .sz-listbox [role="option"]:last-child { border-bottom: none; } /* Accessible Active Combobox State (Keyboard + Hover) */ .sz-listbox [role="option"]:hover, .sz-listbox [role="option"][aria-selected="true"], .sz-listbox [role="option"].is-active { background-color: var(--color-bg); color: var(--color-primary); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent); } .sz-listbox [role="option"].is-disabled { color: var(--color-muted); cursor: default; } /* ========================================================================== BUTTONS & ACTIONS ========================================================================== */ .sz-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 16px; font-size: 1rem; font-weight: 600; border-radius: var(--radius-control); border: none; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .sz-btn-primary { background-color: var(--color-primary); color: var(--color-surface); } .sz-btn-primary:hover:not(:disabled) { background-color: var(--color-primary-hover); } .sz-btn-primary:disabled { background-color: var(--color-border); color: var(--color-muted); cursor: not-allowed; } /* WCAG 2.2 Text Button Touch Targets */ .sz-utility-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); } .sz-btn-text { background: none; border: none; color: var(--color-muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; min-height: 44px; /* Accessible touch target */ padding: 10px 12px; border-radius: 8px; } .sz-btn-text:hover { background-color: var(--color-bg); color: var(--color-text); } /* ========================================================================== RESULT CARD & BADGES ========================================================================== */ /* Mobile First: Column layout for header to prevent badge crushing */ .sz-result-header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; } #sz-result-match { display: block; font-size: 2.25rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; } #sz-result-size { font-family: 'SF Mono', 'Cascadia Code', 'Consolas', 'Roboto Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 800; } .sz-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); } .sz-badge::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .sz-badge[data-risk="low"]::before { background-color: var(--color-trust); } .sz-badge[data-risk="medium"]::before { background-color: var(--color-warning); } .sz-badge[data-risk="high"]::before { background-color: var(--color-error); } .sz-badge[data-risk="low"] { background-color: var(--color-trust-bg); border-color: var(--color-trust); color: var(--color-trust); } .sz-badge[data-risk="medium"] { background-color: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning-text); } .sz-badge[data-risk="high"] { background-color: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); } .sz-info-box { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: 16px; margin-bottom: 16px; font-size: 0.9375rem; } /* Between-sizes insight panel: deliberately distinct from the plain .sz-info-box and from .sz-info-box-warning. This is helpful guidance, not a caution, so it borrows the primary accent (left border) rather than the warning palette. */ .sz-result-explainer { font-size: 0.8125rem; color: var(--color-muted); margin: 0 0 16px; } .sz-result-brand-label { font-size: 0.8125rem; color: var(--color-muted); margin: -8px 0 4px; } #sz-between-sizes-box { background-color: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); } #sz-between-sizes-box .sz-between-sizes-heading { display: block; margin-bottom: 4px; } #sz-between-sizes-box .sz-between-sizes-body { display: block; } .sz-info-box-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-text); } .sz-editorial-text { color: var(--color-muted); font-style: italic; font-size: 0.9375rem; margin-bottom: 24px; } .sz-sizing-system-note { color: var(--color-muted); font-size: 0.8125rem; margin: -16px 0 24px; } .sz-banner { background-color: var(--color-warning-bg); color: var(--color-warning-text); padding: 12px 16px; border-radius: var(--radius-control); font-size: 0.875rem; margin-bottom: 24px; font-weight: 500; } /* ========================================================================== OVERLAYS: DRAWERS & MODALS ========================================================================== */ .sz-drawer, .sz-modal { position: fixed; inset: 0; z-index: 1000; display: flex; background: rgba(25, 23, 22, 0.4); backdrop-filter: blur(2px); /* Pure state transitions, no !important display hacks */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-drawer), visibility var(--transition-drawer); } /* Modal specific alignment */ .sz-modal { align-items: center; justify-content: center; padding: 16px; } /* Drawer specific alignment (bottom sheet on mobile) */ .sz-drawer { align-items: flex-end; } .sz-drawer.is-open, .sz-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .sz-drawer-content, .sz-modal-content { background: var(--color-surface); width: 100%; position: relative; box-shadow: var(--shadow-overlay); transition: transform var(--transition-drawer); } .sz-drawer-content { max-height: 85vh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 32px 24px; transform: translateY(100%); } .sz-modal-content { max-width: 400px; border-radius: var(--radius-card); padding: 32px 24px; transform: scale(0.95); } .sz-drawer.is-open .sz-drawer-content { transform: translateY(0); } .sz-modal.is-open .sz-modal-content { transform: scale(1); } #sz-request-body .sz-input, #sz-request-body select.sz-input { margin-bottom: 16px; } #sz-request-body .sz-label { margin-top: 4px; } .sz-btn-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--color-muted); cursor: pointer; padding: 8px; border-radius: 50%; } .sz-btn-close:hover { background: var(--color-bg); color: var(--color-text); } .sz-link-full { display: inline-block; margin-top: 16px; color: var(--color-primary); font-weight: 600; text-decoration: none; } .sz-link-full:hover, .sz-link-full:focus-visible { text-decoration: underline; } .sz-footer { text-align: center; font-size: 0.8125rem; color: var(--color-muted); padding: 16px; } #sz-pre-result-trust, #sz-post-result-trust { /* Reserves space for this text so swapping from the fallback font to Inter (font-display: swap) doesn't reflow the page. Sized for the two-line wrapped length of the actual copy at common viewport widths; revisit if the copy length changes meaningfully. */ min-height: 2.6em; } #sz-pre-result-trust { /* Methodology text reads as real explanatory content, not fine print — sized larger than the footer default. min-height is deliberately generous (not precisely tuned to a measured line count, since that can't be verified without a real browser layout engine) so a larger-than-expected wrap still doesn't reintroduce the font-swap CLS issue this rule exists to prevent. Re-check against a real Lighthouse run after deploying, same as the original CLS fix. */ font-size: 0.9375rem; line-height: 1.55; min-height: 3.4em; } .sz-footer a { color: var(--color-trust); text-decoration: none; font-weight: 500; } .sz-footer a:hover, .sz-footer a:focus-visible { text-decoration: underline; } .sz-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); } .sz-btn-action { background: var(--color-primary); color: var(--color-surface); } .sz-btn-action:hover { background: var(--color-primary-hover); } .sz-no-result-option { color: var(--color-primary); font-weight: 600; } /* ========================================================================== MEDIA QUERIES ========================================================================== */ @media (min-width: 640px) { /* Desktop Result Header */ .sz-result-header { flex-direction: row; align-items: center; } /* Desktop Drawer scales to Modal-like center */ .sz-drawer { align-items: center; justify-content: center; padding: 24px; } .sz-drawer-content { max-width: 500px; border-radius: var(--radius-card); transform: translateY(20px) scale(0.95); } .sz-drawer.is-open .sz-drawer-content { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Static SEO tables generated by build.js */ .sz-static-seo-content { margin-top: 24px; } .sz-faq-item { border-bottom: 1px solid var(--color-border); padding: 14px 0; } .sz-faq-item summary { font-weight: 600; font-size: 1rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--color-text); } .sz-faq-item summary::-webkit-details-marker { display: none; } .sz-faq-item summary::after { content: '+'; font-size: 1.25rem; line-height: 1; color: var(--color-muted); flex-shrink: 0; } .sz-faq-item[open] summary::after { content: '\2212'; } .sz-faq-item summary:focus-visible { outline: 2px solid var(--color-trust); outline-offset: 2px; border-radius: var(--radius-control); } .sz-faq-item p { margin: 12px 0 0; color: var(--color-muted); line-height: 1.55; } .sz-table-wrap { width: 100%; overflow-x: auto; margin: 16px 0; } .sz-static-table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; font-size: 0.9375rem; } .sz-static-table th, .sz-static-table td { padding: 12px 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; } .sz-static-table th { color: var(--color-text); font-weight: 600; background: var(--color-bg); } #sz-standard-result .sz-static-table { min-width: 0; max-width: 320px; } #sz-standard-result .sz-standard-result-source { background: var(--color-trust-bg); } #sz-standard-result .sz-standard-result-source td { color: var(--color-trust); font-weight: 600; } .sz-table-wrap { position: relative; } .sz-table-wrap::after { content: "Swipe table →"; display: block; font-size: 0.8125rem; color: var(--color-muted); margin-top: 6px; } @media (min-width: 760px) { .sz-table-wrap::after { content: ""; display: none; } } /* ========================================================================== AD SLOTS ========================================================================== */ /* Inactive (no approved AdSense ID yet): zero footprint, no layout shift when ads.js later activates these slots. */ .sz-ad-slot { width: 100%; overflow: hidden; } .sz-ad-slot-inactive { display: none; } .sz-ad-slot-leaderboard { max-width: 728px; min-height: 90px; margin: 0 auto; } .sz-ad-slot-rectangle { max-width: 336px; min-height: 280px; margin: 0 auto; } .sz-ad-slot-in-article { margin: 24px 0; min-height: 100px; } /* Sticky mobile footer ad — fixed, mobile only, hidden until active and never overlaps the skip link or any focusable control. */ .sz-ad-slot-sticky-footer { display: none; } @media (max-width: 640px) { .sz-ad-slot-sticky-footer:not(.sz-ad-slot-inactive) { display: block; position: fixed; bottom: 0; left: 0; right: 0; min-height: 50px; background: var(--color-surface); border-top: 1px solid var(--color-border); z-index: 900; } } /* ========================================================================== CONTENT-ONLY PAGES ========================================================================== */ /* Pages like /faq/, /privacy/, /about/, /contact/ are pure content — they don't need the full interactive converter sitting above the actual page content. Pages where the converter is meant to be pre-filled and useful (tool, hub, brand, comparison) are unaffected since they use a different data-page-type value and this selector list never matches them. */ body[data-page-type="faq"] #sz-assistant-card, body[data-page-type="faq"] .sz-ad-slot-leaderboard, body[data-page-type="privacy"] #sz-assistant-card, body[data-page-type="privacy"] .sz-ad-slot-leaderboard, body[data-page-type="affiliate-disclosure"] #sz-assistant-card, body[data-page-type="affiliate-disclosure"] .sz-ad-slot-leaderboard, body[data-page-type="about"] #sz-assistant-card, body[data-page-type="about"] .sz-ad-slot-leaderboard, body[data-page-type="about-methodology"] #sz-assistant-card, body[data-page-type="about-methodology"] .sz-ad-slot-leaderboard, body[data-page-type="how-to-measure"] #sz-assistant-card, body[data-page-type="how-to-measure"] .sz-ad-slot-leaderboard, body[data-page-type="contact"] #sz-assistant-card, body[data-page-type="contact"] .sz-ad-slot-leaderboard, body[data-page-type="brands"] #sz-assistant-card, body[data-page-type="brands"] .sz-ad-slot-leaderboard, body[data-page-type="404"] #sz-assistant-card, body[data-page-type="404"] .sz-ad-slot-leaderboard { display: none; }