/* BYZ.ro Sunny — child theme styles * Ported from prototype styles.css. Prototype scaffolding removed: * .page-nav, .tweaks-panel, .page wrappers, .page.active toggles. * Keeps the four palettes so the sunny scope resolves identically; only * data-palette="sunny" ships (set by functions.php on ). */ :root, [data-palette="sunny"] { --paper: oklch(0.985 0.018 95); --paper-2: oklch(0.96 0.035 90); --paper-3: oklch(0.92 0.05 85); --ink: oklch(0.22 0.06 30); --ink-2: oklch(0.38 0.06 35); --ink-3: oklch(0.58 0.05 40); --rule: oklch(0.85 0.03 80); --accent: oklch(0.72 0.18 45); --accent-ink: oklch(0.2 0.08 30); --accent-soft: oklch(0.93 0.06 55); --c-pink: oklch(0.8 0.14 15); --c-yellow: oklch(0.9 0.15 95); --c-mint: oklch(0.84 0.11 165); --c-sky: oklch(0.82 0.1 230); --c-lilac: oklch(0.82 0.09 310); --c-berry: oklch(0.65 0.18 0); --ok: oklch(0.65 0.14 150); --radius: 14px; --radius-lg: 22px; --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dur-fast: 150ms; --dur-med: 200ms; --dur-slow: 250ms; } [data-palette="light"] { --paper: oklch(0.975 0.008 80); --paper-2: oklch(0.94 0.01 80); --paper-3: oklch(0.89 0.012 80); --ink: oklch(0.18 0.01 60); --ink-2: oklch(0.32 0.01 60); --ink-3: oklch(0.52 0.01 60); --rule: oklch(0.82 0.012 70); --accent: oklch(0.68 0.19 50); --accent-ink: oklch(0.22 0.09 45); --accent-soft: oklch(0.93 0.04 60); } [data-palette="dark"] { --paper: oklch(0.16 0.008 60); --paper-2: oklch(0.21 0.01 60); --paper-3: oklch(0.26 0.012 60); --ink: oklch(0.96 0.008 80); --ink-2: oklch(0.82 0.01 80); --ink-3: oklch(0.62 0.01 80); --rule: oklch(0.32 0.012 70); --accent: oklch(0.72 0.19 50); --accent-ink: oklch(0.98 0.04 80); --accent-soft: oklch(0.28 0.06 50); } [data-palette="contrast"] { --paper: oklch(0.99 0.004 80); --paper-2: oklch(0.95 0.006 80); --paper-3: oklch(0.88 0.008 80); --ink: oklch(0.12 0.005 60); --ink-2: oklch(0.22 0.008 60); --ink-3: oklch(0.45 0.01 60); --rule: oklch(0.12 0.005 60); --accent: oklch(0.62 0.22 30); --accent-ink: oklch(0.99 0.004 80); --accent-soft: oklch(0.92 0.04 30); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; font-size: 15px; line-height: 1.5; } .mono { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-feature-settings: 'ss02', 'zero'; } .tabular { font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ---------- Layout scaffolds ---------- */ .container { max-width: 1360px; margin: 0 auto; padding: 0 32px; } .rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } .rule-thick { border: 0; border-top: 2px solid var(--ink); margin: 0; } .eyebrow { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .display { font-size: clamp(48px, 7.5vw, 108px); line-height: 0.92; letter-spacing: -0.035em; font-weight: 500; margin: 0; } .display em { font-style: italic; font-family: 'Instrument Serif', 'Times New Roman', serif; font-weight: 400; } .h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; margin: 0; } .h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; margin: 0; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 0; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; transition: transform .15s ease, background .15s ease, color .15s ease; position: relative; overflow: hidden; } .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); } .btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn.accent:hover { box-shadow: 4px 4px 0 var(--accent-ink); } .btn.ghost { background: transparent; color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--paper); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); } .btn .arrow { transition: transform .15s ease; } .btn:hover .arrow { transform: translateX(4px); } .btn.sm { padding: 8px 14px; font-size: 13px; } /* ---------- Header ---------- */ .topbar { background: var(--ink); color: var(--paper); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .topbar .container { display: flex; justify-content: space-between; align-items: center; height: 34px; } .topbar .ticker { display: flex; gap: 32px; overflow: hidden; } .topbar .ticker span { white-space: nowrap; opacity: 0.9; } .topbar .ticker .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin: 0 10px 2px; vertical-align: middle; } .masthead { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 50; } .masthead .row1 { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 18px 0; } .logo { display: flex; align-items: baseline; gap: 2px; font-weight: 600; font-size: 24px; letter-spacing: -0.04em; } .logo .dot { color: var(--accent); } .logo .sub { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; margin-left: 8px; } .search { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--ink); padding: 10px 14px; background: var(--paper); } .search input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14px; width: 100%; color: var(--ink); } .search input::placeholder { color: var(--ink-3); } .search .kbd { font-family: 'Geist Mono', monospace; font-size: 11px; padding: 2px 6px; border: 1px solid var(--rule); color: var(--ink-3); } .nav-icons { display: flex; align-items: center; gap: 18px; } .nav-icons a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .nav-icons .cart { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1.5px solid var(--ink); } .nav-icons .cart .count { background: var(--accent); color: var(--accent-ink); font-family: 'Geist Mono', monospace; font-size: 11px; padding: 2px 6px; } .mainnav { border-top: 1px solid var(--rule); } .mainnav ul { display: flex; gap: 0; padding: 0; margin: 0; list-style: none; } .mainnav li { position: relative; } .mainnav li a { display: flex; align-items: center; gap: 6px; padding: 14px 20px; font-size: 13px; font-weight: 500; border-right: 1px solid var(--rule); transition: background .15s ease; } .mainnav li:first-child a { border-left: 1px solid var(--rule); } .mainnav li a:hover { background: var(--ink); color: var(--paper); } .mainnav li a:hover .chev { color: var(--accent); } .mainnav .chev { color: var(--ink-3); font-size: 10px; } .mainnav .highlight { color: var(--accent); font-weight: 600; } /* ---------- Placeholder image (prototype only — real in production) ---------- */ .ph { position: relative; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,0.04) 10px 11px), var(--paper-2); border: 1px solid var(--rule); overflow: hidden; display: flex; align-items: center; justify-content: center; } .ph-dark { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,0.04) 10px 11px), oklch(0.22 0.008 60); color: oklch(0.82 0.008 80); } .ph .lbl { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 6px 10px; background: var(--paper); border: 1px solid var(--rule); } .ph-dark .lbl { background: oklch(0.18 0.008 60); border-color: oklch(0.32 0.012 70); color: oklch(0.72 0.01 80); } .ph .corner { position: absolute; top: 8px; left: 8px; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; } .ph .corner.r { left: auto; right: 8px; } .ph .corner.b { top: auto; bottom: 8px; } /* ---------- Hero ---------- */ .hero { position: relative; border-bottom: 1px solid var(--rule); } .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 640px; } .hero-left { padding: 72px 32px 56px 32px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: space-between; } .hero-left .top { display: flex; gap: 10px; flex-wrap: wrap; } .hero-left .mid { padding-top: 40px; } .hero-left .display-line { display: block; } .hero-left .copy { max-width: 520px; margin-top: 28px; font-size: 16px; line-height: 1.55; color: var(--ink-2); } .hero-left .ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-left .foot { display: flex; gap: 40px; padding-top: 40px; border-top: 1px solid var(--rule); margin-top: 56px; } .hero-left .foot .num { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; } .hero-left .foot .lbl { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; } .hero-right { position: relative; } .hero-right .ph { width: 100%; height: 100%; min-height: 640px; } .hero-right .sticker { position: absolute; top: 24px; right: 24px; background: var(--ink); color: var(--paper); padding: 12px 16px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .hero-right .sticker .big { display: block; font-family: 'Geist', sans-serif; font-size: 28px; letter-spacing: -0.02em; text-transform: none; margin-top: 4px; } .hero-right .spec-card { position: absolute; bottom: 24px; left: 24px; background: var(--paper); border: 1.5px solid var(--ink); padding: 16px 18px; min-width: 220px; } .hero-right .spec-card .lbl { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; } .hero-right .spec-card .name { font-weight: 500; font-size: 16px; margin-top: 4px; letter-spacing: -0.01em; } .hero-right .spec-card .row { display: flex; justify-content: space-between; font-family: 'Geist Mono', monospace; font-size: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); } /* Category chips row */ .cat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); background: var(--paper-2); } .cat-strip a { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-right: 1px solid var(--rule); font-weight: 500; font-size: 16px; transition: background .15s ease, color .15s ease; } .cat-strip a:last-child { border-right: 0; } .cat-strip a:hover { background: var(--ink); color: var(--paper); } .cat-strip a .num { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); } .cat-strip a:hover .num { color: var(--accent); } .cat-strip a .arrow { font-size: 14px; transition: transform .15s ease; } .cat-strip a:hover .arrow { transform: translateX(4px); } /* ---------- Section headers ---------- */ .section { padding: 96px 0; border-bottom: 1px solid var(--rule); } .section.tight { padding: 64px 0; } .section-head { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end; margin-bottom: 48px; } .section-head .ttl .eyebrow { display: block; margin-bottom: 10px; } .section-head .ttl .h2 { max-width: 700px; } .section-head .sub { color: var(--ink-2); max-width: 360px; padding-bottom: 8px; } .section-head .seemore { padding-bottom: 8px; } /* ---------- Product cards ---------- */ .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); } .product-card { position: relative; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 20px; display: flex; flex-direction: column; background: var(--paper); transition: background .18s ease; cursor: pointer; } .product-card:hover { background: var(--paper-2); } .product-card .tag { display: inline-flex; align-items: center; gap: 6px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .product-card .tag .idx { color: var(--accent); } .product-card .img-wrap { aspect-ratio: 1 / 1; margin: 0 -20px 16px -20px; border-bottom: 1px solid var(--rule); background: var(--paper-2); display: flex; align-items: center; justify-content: center; position: relative; } .product-card .img-wrap .ribbon { position: absolute; top: 12px; left: 12px; background: var(--accent); color: var(--accent-ink); padding: 4px 8px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } .product-card .img-wrap .ribbon.dark { background: var(--ink); color: var(--paper); } .product-card h3 { font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; margin: 0 0 12px 0; min-height: 2.6em; } .product-card .specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); } .product-card .specs span { padding: 2px 6px; background: var(--paper-2); border: 1px solid var(--rule); } .product-card .price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--rule); } .product-card .price { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; } .product-card .price .cur { font-size: 12px; color: var(--ink-3); margin-left: 2px; } .product-card .add { display: inline-flex; align-items: center; gap: 6px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); opacity: 0.5; transition: opacity .15s ease, color .15s ease; } .product-card:hover .add { opacity: 1; color: var(--accent-ink); } .product-card .add .plus { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); } .product-card:hover .add .plus { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .prod-svg { width: 64%; aspect-ratio: 1; opacity: 0.88; } /* ---------- Feature callout ---------- */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .feature-row .fr-copy { padding: 72px 48px; border-right: 1px solid var(--ink); display: flex; flex-direction: column; justify-content: space-between; min-height: 520px; } .feature-row .fr-copy .eyebrow { margin-bottom: 24px; } .feature-row .fr-copy .h2 { max-width: 520px; } .feature-row .fr-copy .lead { margin-top: 20px; max-width: 460px; color: var(--ink-2); } .feature-row .fr-specs { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); } .feature-row .fr-specs .k { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .feature-row .fr-specs .v { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-top: 6px; } .feature-row .fr-media { position: relative; } .feature-row .fr-media .ph { height: 100%; min-height: 520px; } .feature-row .fr-media .tag { position: absolute; top: 24px; left: 24px; } /* ---------- Brands ---------- */ .brands { padding: 48px 0; border-bottom: 1px solid var(--rule); } .brands .grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--rule); } .brands .grid .cell { padding: 28px 20px; border-right: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; color: var(--ink-2); transition: color .15s ease; } .brands .grid .cell:last-child { border-right: 0; } .brands .grid .cell:hover { color: var(--accent); } /* ---------- Trust strip ---------- */ .trust { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); } .trust .cell { padding: 28px 24px; border-right: 1px solid var(--rule); display: flex; gap: 16px; align-items: flex-start; } .trust .cell:last-child { border-right: 0; } .trust .cell .ic { width: 36px; height: 36px; flex-shrink: 0; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; } .trust .cell h4 { font-size: 14px; font-weight: 500; margin: 0 0 4px 0; } .trust .cell p { font-size: 13px; color: var(--ink-3); margin: 0; line-height: 1.4; } /* ---------- Editorial ---------- */ .edit-split { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); } .edit-split .cell { padding: 40px 32px; border-right: 1px solid var(--rule); } .edit-split .cell:last-child { border-right: 0; } .edit-split .cell .ph { aspect-ratio: 4/3; margin-bottom: 20px; } .edit-split .cell .eyebrow { margin-bottom: 10px; display: block; } .edit-split .cell h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 10px 0; line-height: 1.15; } .edit-split .cell p { color: var(--ink-2); font-size: 14px; margin: 0 0 16px 0; } .edit-split .cell .more { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 2px; } /* ---------- Mega CTA ---------- */ .mega-cta { background: var(--ink); color: var(--paper); padding: 96px 0; position: relative; overflow: hidden; } .mega-cta .container { position: relative; z-index: 2; } .mega-cta .grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; } .mega-cta .eyebrow { color: oklch(0.65 0.1 50); } .mega-cta .h2 { color: var(--paper); max-width: 720px; } .mega-cta .right { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } .mega-cta .meta { display: flex; gap: 32px; padding-top: 32px; margin-top: 40px; border-top: 1px solid oklch(0.32 0.012 70); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.72 0.01 80); } .mega-cta .glow { position: absolute; right: -200px; top: -200px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 60%); opacity: 0.15; pointer-events: none; } /* ---------- Footer ---------- */ footer.site-footer, footer { background: var(--paper); padding-top: 72px; border-top: 1px solid var(--rule); } footer .top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--rule); } footer h5 { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px 0; font-weight: 500; } footer ul { list-style: none; padding: 0; margin: 0; } footer ul li { margin-bottom: 10px; font-size: 14px; } footer ul li a:hover { color: var(--accent); } footer .brand-col .logo { margin-bottom: 18px; } footer .brand-col p { color: var(--ink-2); font-size: 14px; max-width: 280px; } footer .bottom { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } footer .bottom .links { display: flex; gap: 24px; } /* ---------- PLP ---------- */ .plp-head { padding: 48px 0 32px; border-bottom: 1px solid var(--rule); } .plp-head .crumbs { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; } .plp-head .crumbs .sep { margin: 0 10px; } .plp-head h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin: 0; } .plp-head .meta { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 20px; } .plp-head .meta .count { font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--ink-2); } .plp-body { display: grid; grid-template-columns: 260px 1fr; border-bottom: 1px solid var(--rule); } .plp-filters { border-right: 1px solid var(--rule); padding: 32px 24px; } .plp-filters .group { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); } .plp-filters .group:last-child { border-bottom: 0; } .plp-filters h4 { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px 0; font-weight: 500; display: flex; justify-content: space-between; align-items: center; } .plp-filters h4 .count { color: var(--ink-3); } .plp-filters .check { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; cursor: pointer; } .plp-filters .check .box { width: 14px; height: 14px; border: 1.5px solid var(--ink); flex-shrink: 0; } .plp-filters .check.on .box { background: var(--accent); border-color: var(--accent); } .plp-filters .check.on .box::after { content: '✓'; color: var(--accent-ink); font-size: 10px; display: flex; align-items: center; justify-content: center; height: 100%; } .plp-filters .check .n { margin-left: auto; color: var(--ink-3); font-family: 'Geist Mono', monospace; font-size: 11px; } .plp-filters .range { display: flex; gap: 8px; margin-top: 8px; } .plp-filters .range input { flex: 1; padding: 6px 8px; border: 1px solid var(--rule); font-family: inherit; font-size: 12px; background: var(--paper); color: var(--ink); } .plp-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--rule); } .plp-toolbar .sort { display: flex; align-items: center; gap: 10px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); } .plp-toolbar .sort select { border: 1px solid var(--ink); padding: 6px 10px; background: var(--paper); font-family: inherit; color: var(--ink); font-size: 11px; } .plp-toolbar .view { display: flex; gap: 4px; } .plp-toolbar .view button { width: 28px; height: 28px; border: 1px solid var(--rule); background: var(--paper); font-size: 12px; } .plp-toolbar .view button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .plp-grid { display: grid; grid-template-columns: repeat(3, 1fr); } /* ---------- PDP ---------- */ .pdp-hero { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); } .pdp-media { padding: 32px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 16px; } .pdp-media .main { aspect-ratio: 1; } .pdp-media .thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .pdp-media .thumbs .ph { aspect-ratio: 1; cursor: pointer; } .pdp-media .thumbs .ph.active { border-color: var(--ink); border-width: 2px; } .pdp-info { padding: 48px 48px 32px; } .pdp-info .crumbs { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; } .pdp-info h1 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 16px 0; } .pdp-info .lead { color: var(--ink-2); font-size: 16px; margin: 0 0 28px 0; max-width: 520px; } .pdp-info .price-block { display: flex; gap: 16px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .pdp-info .price-block .now { font-size: 40px; font-weight: 500; letter-spacing: -0.03em; } .pdp-info .price-block .was { font-size: 16px; text-decoration: line-through; color: var(--ink-3); } .pdp-info .price-block .save { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 4px 8px; margin-left: auto; } .pdp-info .variant { margin: 28px 0; } .pdp-info .variant h4 { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 10px 0; font-weight: 500; display: flex; justify-content: space-between; } .pdp-info .variant h4 .sel { color: var(--ink-3); } .pdp-info .variant .chips { display: flex; gap: 8px; flex-wrap: wrap; } .pdp-info .variant .chip { padding: 10px 14px; border: 1.5px solid var(--rule); font-size: 13px; cursor: pointer; background: var(--paper); transition: all .12s ease; } .pdp-info .variant .chip.active { border-color: var(--ink); background: var(--ink); color: var(--paper); } .pdp-info .variant .swatches { display: flex; gap: 10px; } .pdp-info .variant .sw { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--rule); cursor: pointer; position: relative; } .pdp-info .variant .sw.active::after { content: ''; position: absolute; inset: -5px; border: 1.5px solid var(--ink); border-radius: 50%; } .pdp-info .buy-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 28px 0 20px; } .pdp-info .qty { display: flex; align-items: center; border: 1.5px solid var(--ink); } .pdp-info .qty button { width: 40px; height: 44px; border: 0; background: var(--paper); font-size: 16px; } .pdp-info .qty button:hover { background: var(--ink); color: var(--paper); } .pdp-info .qty .n { padding: 0 16px; font-family: 'Geist Mono', monospace; } .pdp-info .buy-row .btn { width: 100%; justify-content: center; padding: 16px 20px; } .pdp-info .buy-row .wish { width: 46px; height: 46px; border: 1.5px solid var(--ink); background: var(--paper); display: flex; align-items: center; justify-content: center; } .pdp-info .bullets { list-style: none; padding: 20px 0 0 0; margin: 0; border-top: 1px solid var(--rule); } .pdp-info .bullets li { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--ink-2); } .pdp-info .bullets li .i { font-family: 'Geist Mono', monospace; color: var(--accent); } .pdp-specs { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid var(--rule); } .pdp-specs .side { padding: 48px 32px; border-right: 1px solid var(--rule); background: var(--paper-2); } .pdp-specs .side .eyebrow { display: block; margin-bottom: 12px; } .pdp-specs .side h2 { font-size: 32px; font-weight: 500; letter-spacing: -0.025em; margin: 0; } .pdp-specs .table { padding: 48px 32px; } .pdp-specs .table .row { display: grid; grid-template-columns: 200px 1fr; padding: 12px 0; border-bottom: 1px dashed var(--rule); font-size: 14px; } .pdp-specs .table .row .k { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; } .pdp-specs .table .row .v { color: var(--ink); } /* ---------- Cart ---------- */ .cart-head { padding: 48px 0 32px; border-bottom: 1px solid var(--rule); } .cart-head h1 { font-size: clamp(36px, 4.2vw, 56px); font-weight: 500; letter-spacing: -0.03em; margin: 0; } .cart-head .steps { display: flex; gap: 32px; margin-top: 20px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .cart-head .steps .s { display: flex; align-items: center; gap: 8px; color: var(--ink-3); } .cart-head .steps .s .n { width: 22px; height: 22px; border: 1px solid var(--ink-3); display: flex; align-items: center; justify-content: center; border-radius: 50%; } .cart-head .steps .s.active { color: var(--ink); } .cart-head .steps .s.active .n { background: var(--ink); color: var(--paper); border-color: var(--ink); } .cart-body { display: grid; grid-template-columns: 1fr 400px; border-bottom: 1px solid var(--rule); } .cart-items { border-right: 1px solid var(--rule); padding: 32px 0; } .cart-item { display: grid; grid-template-columns: 120px 1fr auto auto auto; gap: 24px; padding: 24px 32px; border-bottom: 1px dashed var(--rule); align-items: center; } .cart-item .ph { aspect-ratio: 1; } .cart-item .meta .tag { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .cart-item .meta h4 { font-weight: 500; font-size: 15px; margin: 0 0 6px 0; } .cart-item .meta .opts { font-size: 12px; color: var(--ink-3); font-family: 'Geist Mono', monospace; } .cart-item .price { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .cart-item .remove { color: var(--ink-3); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; background: none; border: 0; } .cart-item .remove:hover { color: var(--accent); } .cart-summary { padding: 32px; background: var(--paper-2); position: sticky; top: 180px; height: fit-content; } .cart-summary h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 20px 0; } .cart-summary .row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; } .cart-summary .row.total { border-top: 1.5px solid var(--ink); margin-top: 8px; padding-top: 16px; font-weight: 500; font-size: 20px; letter-spacing: -0.01em; } .cart-summary .promo { display: flex; gap: 8px; margin: 16px 0; } .cart-summary .promo input { flex: 1; padding: 10px 12px; border: 1.5px solid var(--rule); font-family: inherit; background: var(--paper); color: var(--ink); font-size: 13px; } .cart-summary .promo button { padding: 10px 14px; border: 1.5px solid var(--ink); background: var(--paper); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .cart-summary .btn { width: 100%; justify-content: center; margin-top: 16px; padding: 16px; } .cart-summary .help { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 16px; text-align: center; } /* ---------- Mobile ---------- */ @media (max-width: 900px) { .container { padding: 0 20px; } .hero-grid { grid-template-columns: 1fr; } .hero-left { border-right: 0; border-bottom: 1px solid var(--rule); padding: 40px 20px; } .hero-right .ph { min-height: 400px; } .cat-strip { grid-template-columns: 1fr 1fr; } .cat-strip a { border-bottom: 1px solid var(--rule); } .products-grid { grid-template-columns: 1fr 1fr; } .feature-row { grid-template-columns: 1fr; } .feature-row .fr-copy { border-right: 0; border-bottom: 1px solid var(--ink); padding: 40px 20px; min-height: auto; } .brands .grid { grid-template-columns: repeat(3, 1fr); } .brands .grid .cell { border-bottom: 1px solid var(--rule); } .trust { grid-template-columns: 1fr 1fr; } .mega-cta { padding: 64px 0; } .mega-cta .grid { grid-template-columns: 1fr; } .edit-split { grid-template-columns: 1fr; } .edit-split .cell { border-right: 0; border-bottom: 1px solid var(--rule); } footer .top { grid-template-columns: 1fr 1fr; gap: 32px; } .mainnav { display: none; } .section { padding: 56px 0; } .section-head { grid-template-columns: 1fr; gap: 16px; } .plp-body { grid-template-columns: 1fr; } .plp-filters { border-right: 0; border-bottom: 1px solid var(--rule); } .plp-grid { grid-template-columns: 1fr 1fr; } .pdp-hero { grid-template-columns: 1fr; } .pdp-media { border-right: 0; border-bottom: 1px solid var(--rule); } .pdp-info { padding: 32px 20px; } .pdp-specs { grid-template-columns: 1fr; } .pdp-specs .side { border-right: 0; border-bottom: 1px solid var(--rule); padding: 32px 20px; } .pdp-specs .table { padding: 32px 20px; } .cart-body { grid-template-columns: 1fr; } .cart-items { border-right: 0; } .cart-item { grid-template-columns: 80px 1fr; padding: 16px 20px; gap: 16px; } .cart-item .price, .cart-item .remove { grid-column: 2; } .cart-item .qty { grid-column: 2; } } /* ========== SUNNY TREATMENT ========== */ [data-palette="sunny"] body, body[data-palette="sunny"] { background: var(--paper); } [data-palette="sunny"] .btn { border-radius: 999px; border-width: 2px; transition: transform .18s var(--ease-spring), box-shadow .18s ease, background .15s ease; } [data-palette="sunny"] .btn:hover { transform: translate(-2px, -2px) rotate(-0.5deg); box-shadow: 4px 4px 0 var(--ink); } [data-palette="sunny"] .btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--ink); } [data-palette="sunny"] .btn.ghost:hover { transform: translate(-2px, -2px) rotate(-0.5deg); } [data-palette="sunny"] .badge { border-radius: 999px; background: var(--paper-2); border-color: var(--ink); } [data-palette="sunny"] .search { border-radius: 999px; border-color: var(--ink); background: var(--paper-2); } [data-palette="sunny"] .nav-icons .cart { border-radius: 999px; } [data-palette="sunny"] .nav-icons .cart .count { border-radius: 999px; background: var(--c-berry); color: #fff; } [data-palette="sunny"] .mainnav li a { transition: background .15s ease, color .15s ease, transform .2s ease; } [data-palette="sunny"] .mainnav li a:hover { background: var(--c-yellow); color: var(--ink); transform: translateY(-1px); } [data-palette="sunny"] .mainnav .highlight { color: var(--c-berry); } [data-palette="sunny"] .topbar { background: var(--ink); } [data-palette="sunny"] .topbar .ticker .dot { background: var(--c-yellow); } [data-palette="sunny"] .logo .dot { color: var(--c-berry); } [data-palette="sunny"] .hero { background: radial-gradient(circle at 15% 20%, var(--c-yellow) 0%, transparent 45%), radial-gradient(circle at 85% 80%, var(--c-pink) 0%, transparent 50%), var(--paper); } [data-palette="sunny"] .hero-left .display em { color: var(--c-berry); } [data-palette="sunny"] .hero-right .sticker { background: var(--c-berry); border-radius: var(--radius-lg); transform: rotate(-3deg); } [data-palette="sunny"] .hero-right .spec-card { border-radius: var(--radius); border-color: var(--ink); border-width: 2px; } [data-palette="sunny"] .cat-strip { background: transparent; } [data-palette="sunny"] .cat-strip a:nth-child(1) { background: var(--c-yellow); } [data-palette="sunny"] .cat-strip a:nth-child(2) { background: var(--c-mint); } [data-palette="sunny"] .cat-strip a:nth-child(3) { background: var(--c-sky); } [data-palette="sunny"] .cat-strip a:nth-child(4) { background: var(--c-pink); } [data-palette="sunny"] .cat-strip a:hover { background: var(--ink) !important; color: var(--paper); transform: translateY(-2px); } [data-palette="sunny"] .cat-strip a { transition: transform .2s ease, background .2s ease; } [data-palette="sunny"] .trust { background: transparent; } [data-palette="sunny"] .trust .cell:nth-child(1) { background: var(--c-mint); } [data-palette="sunny"] .trust .cell:nth-child(2) { background: var(--c-yellow); } [data-palette="sunny"] .trust .cell:nth-child(3) { background: var(--c-lilac); } [data-palette="sunny"] .trust .cell:nth-child(4) { background: var(--c-pink); } [data-palette="sunny"] .trust .cell .ic { border-radius: 50%; background: var(--paper); border-color: var(--ink); } [data-palette="sunny"] .products-grid { gap: 16px; border: 0; padding: 8px; } [data-palette="sunny"] .product-card { border: 2px solid var(--ink); border-radius: var(--radius); transition: transform .25s var(--ease-spring), box-shadow .2s ease, background .2s ease; } [data-palette="sunny"] .product-card:hover { transform: translate(-3px, -3px) rotate(-0.6deg); box-shadow: 6px 6px 0 var(--ink); } [data-palette="sunny"] .product-card .img-wrap { border-radius: var(--radius) var(--radius) 0 0; margin: 0 -20px 16px -20px; padding-top: 20px; border-bottom: 2px dashed var(--rule); } [data-palette="sunny"] .product-card:nth-child(5n+1) .img-wrap { background: var(--c-yellow); } [data-palette="sunny"] .product-card:nth-child(5n+2) .img-wrap { background: var(--c-mint); } [data-palette="sunny"] .product-card:nth-child(5n+3) .img-wrap { background: var(--c-sky); } [data-palette="sunny"] .product-card:nth-child(5n+4) .img-wrap { background: var(--c-pink); } [data-palette="sunny"] .product-card:nth-child(5n+5) .img-wrap { background: var(--c-lilac); } [data-palette="sunny"] .product-card .img-wrap .ribbon { border-radius: 999px; background: var(--ink); color: var(--paper); transform: rotate(-4deg); border: 2px solid var(--paper); } [data-palette="sunny"] .product-card .img-wrap .ribbon.dark { background: var(--c-berry); color: #fff; } [data-palette="sunny"] .product-card .specs span { border-radius: 999px; background: var(--paper-2); border-color: var(--ink); } [data-palette="sunny"] .product-card .add .plus { border-radius: 50%; border-color: var(--ink); width: 22px; height: 22px; } [data-palette="sunny"] .product-card:hover .add .plus { background: var(--c-berry); color: #fff; border-color: var(--c-berry); } [data-palette="sunny"] .product-card .tag .idx { color: var(--c-berry); font-weight: 600; } [data-palette="sunny"] .feature-row { background: var(--c-mint); border: 0; border-radius: var(--radius-lg); margin: 24px 32px; } [data-palette="sunny"] .feature-row .fr-copy { border-right: 2px dashed var(--ink); } [data-palette="sunny"] .brands .grid .cell { transition: background .2s ease, color .2s ease, transform .2s ease; } [data-palette="sunny"] .brands .grid .cell:hover { background: var(--c-yellow); transform: translateY(-2px); color: var(--ink); } [data-palette="sunny"] .edit-split .cell:nth-child(1) .ph { background-color: var(--c-yellow); } [data-palette="sunny"] .edit-split .cell:nth-child(2) .ph { background-color: var(--c-sky); } [data-palette="sunny"] .edit-split .cell:nth-child(3) .ph { background-color: var(--c-pink); } [data-palette="sunny"] .edit-split .cell .ph { border-radius: var(--radius); border-color: var(--ink); border-width: 2px; } [data-palette="sunny"] .edit-split .cell .more { border-bottom-color: var(--c-berry); color: var(--c-berry); } [data-palette="sunny"] .mega-cta { background: var(--c-berry); color: var(--paper); } [data-palette="sunny"] .mega-cta .glow { background: radial-gradient(circle, var(--c-yellow), transparent 60%); opacity: 0.3; } [data-palette="sunny"] .mega-cta .eyebrow { color: var(--c-yellow); } [data-palette="sunny"] footer { background: var(--paper-2); } [data-palette="sunny"] .plp-filters .check .box { border-radius: 5px; border-color: var(--ink); } [data-palette="sunny"] .plp-filters .check.on .box { background: var(--c-berry); border-color: var(--c-berry); } [data-palette="sunny"] .pdp-media .main { border-radius: var(--radius-lg); background-color: var(--c-yellow); } [data-palette="sunny"] .pdp-media .thumbs .ph { border-radius: var(--radius); } [data-palette="sunny"] .pdp-info .price-block .save { border-radius: 999px; background: var(--c-berry); color: #fff; } [data-palette="sunny"] .pdp-info .variant .chip { border-radius: 999px; border-color: var(--ink); } [data-palette="sunny"] .pdp-info .variant .chip.active { background: var(--c-berry); border-color: var(--c-berry); } [data-palette="sunny"] .pdp-info .qty { border-radius: 999px; border-color: var(--ink); } [data-palette="sunny"] .pdp-info .buy-row .wish { border-radius: 50%; border-color: var(--ink); } [data-palette="sunny"] .pdp-specs .side { background: var(--c-yellow); } [data-palette="sunny"] .cart-summary { background: var(--c-mint); border-radius: var(--radius-lg); margin: 32px; } [data-palette="sunny"] .cart-summary .btn { border-radius: 999px; } [data-palette="sunny"] .cart-item .ph { border-radius: var(--radius); } [data-palette="sunny"] .section-head .ttl em { display: inline-block; color: var(--c-berry); transition: transform .3s var(--ease-spring); } [data-palette="sunny"] .section-head:hover .ttl em { transform: rotate(-4deg) scale(1.05); } [data-palette="sunny"] .hero { position: relative; } [data-palette="sunny"] .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(2px 2px at 18% 30%, var(--c-berry), transparent 50%), radial-gradient(3px 3px at 72% 18%, var(--c-sky), transparent 50%), radial-gradient(2px 2px at 40% 85%, var(--c-mint), transparent 50%), radial-gradient(2.5px 2.5px at 88% 60%, var(--c-lilac), transparent 50%), radial-gradient(2px 2px at 55% 50%, var(--c-yellow), transparent 50%); opacity: 0.8; } /* ---------- WooCommerce out-of-stock state ---------- */ .product-card.outofstock .img-wrap img, .product-card.outofstock .byz-card-img { opacity: 0.5; filter: grayscale(0.4); } .product-card.outofstock .price { color: var(--ink-3); text-decoration: line-through; } /* ---------- WordPress / WooCommerce adapters ---------- */ .product-card .byz-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .product-card .img-wrap img, .product-card .byz-card-img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; padding: 20px; } .product-card .byz-card-atc { display: none; } /* Accessible skip link (hidden until focused) */ .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; word-wrap: normal !important; } .skip-link:focus { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); clip: auto; clip-path: none; height: auto; width: auto; padding: 10px 16px; left: 12px; top: 12px; z-index: 9999; font-weight: 500; } /* Hamburger — hidden on desktop, shown on mobile */ .byz-hamburger { display: none; background: transparent; border: 1.5px solid var(--ink); width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 999px; color: var(--ink); } @media (max-width: 900px) { .byz-hamburger { display: inline-flex; } .masthead .row1 { grid-template-columns: auto 1fr auto; gap: 12px; } .masthead .search { display: none; } } /* ---------- Small-phone pass (down to 360px) ---------- */ @media (max-width: 520px) { .container { padding: 0 16px; } .hero-left { padding: 32px 16px; } .hero-left .foot { gap: 20px; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; } .hero-left .foot .num { font-size: 22px; } .hero-left .ctas { flex-direction: column; align-items: stretch; } .hero-left .ctas .btn { justify-content: center; } .hero-right .ph { min-height: 320px; } .hero-right .spec-card { left: 16px; right: 16px; min-width: 0; bottom: 16px; } .hero-right .sticker { top: 16px; right: 16px; padding: 10px 12px; } .hero-right .sticker .big { font-size: 20px; } .cat-strip { grid-template-columns: 1fr; } .products-grid { grid-template-columns: 1fr; } .plp-grid { grid-template-columns: 1fr; } .trust { grid-template-columns: 1fr; } .brands .grid { grid-template-columns: repeat(2, 1fr); } .section { padding: 40px 0; } .section-head { margin-bottom: 28px; } .feature-row .fr-copy { padding: 32px 16px; } [data-palette="sunny"] .feature-row { margin: 16px; } [data-palette="sunny"] .cart-summary { margin: 20px; } .cart-head .steps { gap: 16px; overflow-x: auto; padding-bottom: 4px; } .cart-item { padding: 16px; gap: 12px; } .pdp-info { padding: 24px 16px; } .pdp-info .price-block .now { font-size: 32px; } .pdp-info .price-block { flex-wrap: wrap; } .pdp-info .price-block .save { margin-left: 0; margin-top: 8px; } .pdp-info .buy-row { grid-template-columns: auto 1fr; } .pdp-info .buy-row .wish { grid-column: 1 / -1; width: 100%; height: 44px; border-radius: 999px; } footer .top { grid-template-columns: 1fr; } } /* ---------- Sticky mobile CTA (PDP / cart) ---------- */ @media (max-width: 900px) { body.single-product .pdp-info .buy-row { position: sticky; bottom: 0; background: var(--paper); padding: 12px 16px; margin: 16px -16px -16px; border-top: 2px solid var(--ink); z-index: 30; box-shadow: 0 -6px 0 var(--ink); } body.woocommerce-cart .cart-summary { position: sticky; bottom: 0; margin: 0 !important; border-radius: 0; box-shadow: 0 -6px 0 var(--ink); z-index: 30; } } /* ---------- Reduced motion (ANPC accessibility, CLAUDE.md) ---------- */ @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; } .btn:hover, .product-card:hover, .mainnav li a:hover, .cat-strip a:hover, .brands .grid .cell:hover, .hero-right .sticker, [data-palette="sunny"] .section-head:hover .ttl em, [data-palette="sunny"] .product-card .img-wrap .ribbon { transform: none !important; } } /* Fix trust strip icon visibility */ .trust .cell .ic svg { display: block; color: var(--ink); } /* Enhanced trust strip icon visibility */ .trust .cell .ic { background: var(--paper); border-radius: 50 .trust .cell .ic { background: var(--paper) !important; border-radius: 50%; } .trust .cell .ic svg { stroke: var(--ink) !important; stroke-width: 2px; }