/* --------------------------------------------------------------------------- Electro Shop — design tokens. The palette is deliberately cool and high-contrast: product photos are the colourful thing on a shop page, so the chrome around them stays neutral and lets the goods carry the colour. The visitor picks light/dark and one of five accents; both are applied as data attributes on by theme.js, which reads them from localStorage before first paint. --------------------------------------------------------------------------- */ :root { color-scheme: light; --ink: #14181f; --ink-soft: #3d4654; --muted: #6b7484; --paper: #ffffff; --surface: #f4f6f9; --surface-2: #e9edf3; --line: #dde3ec; --line-strong: #c3ccda; --header-bg: #14181f; --header-ink: #f1f4f8; --header-muted: #9aa5b5; --success: #17734b; --danger: #b02a37; --warning: #8a5a10; --sale: #c62c3f; --accent: #2f5fd6; --accent-dark: #22459c; --accent-soft: #e6ecfb; --accent-ink: #ffffff; --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06), 0 4px 14px rgba(20, 24, 31, 0.05); --shadow-md: 0 8px 28px rgba(20, 24, 31, 0.10); --shadow-lg: 0 18px 50px rgba(20, 24, 31, 0.16); --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --content: 1240px; --gap: 16px; --header-height: 60px; } [data-accent="violet"] { --accent: #6d3fc4; --accent-dark: #52289e; --accent-soft: #eee6fb; } [data-accent="green"] { --accent: #16764f; --accent-dark: #0f5b3c; --accent-soft: #e0f2ea; } [data-accent="orange"] { --accent: #c2600c; --accent-dark: #9b4b07; --accent-soft: #fceee0; } [data-accent="red"] { --accent: #bd2d3c; --accent-dark: #97202d; --accent-soft: #fbe7e9; } [data-theme="dark"] { color-scheme: dark; --ink: #eef2f8; --ink-soft: #c3ccda; --muted: #8d97a7; --paper: #171b22; --surface: #11141a; --surface-2: #232933; --line: #2b323e; --line-strong: #3d4552; --header-bg: #0c0f14; --header-ink: #eef2f8; --header-muted: #8d97a7; --success: #48c992; --danger: #f4808c; --warning: #e0aa52; --sale: #ff6b7b; --accent: #6f95f0; --accent-dark: #8fadf5; --accent-soft: #1d2740; --accent-ink: #0c0f14; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); } [data-theme="dark"][data-accent="violet"] { --accent: #ab86f0; --accent-dark: #c0a4f5; --accent-soft: #261c3d; } [data-theme="dark"][data-accent="green"] { --accent: #4ecb95; --accent-dark: #74dcae; --accent-soft: #102a20; } [data-theme="dark"][data-accent="orange"] { --accent: #f0a05c; --accent-dark: #f5b77f; --accent-soft: #33220f; } [data-theme="dark"][data-accent="red"] { --accent: #f2808d; --accent-dark: #f5a0aa; --accent-soft: #351b20; } /* --- base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; /* 320px is the narrowest phone we support; nothing may overflow it. */ min-width: 320px; overflow-x: hidden; color: var(--ink); background: var(--surface); font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; /* Words are never hyphenated or chopped mid-word: Ukrainian and Russian product names read badly when broken, and a chopped brand name looks like a rendering bug. Long unbreakable tokens (SKUs, URLs) get `.wrap-anywhere` explicitly where they appear. */ hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; } /* Every flex/grid child may shrink below its content width — this, not word-breaking, is what actually prevents horizontal overflow. */ .row > *, .grid > *, .flex > * { min-width: 0; } img, svg, video { max-width: 100%; height: auto; display: block; } button, input, textarea, select { font: inherit; color: inherit; } button, a, label, summary { -webkit-tap-highlight-color: transparent; } button { cursor: pointer; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } [hidden] { display: none !important; } h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; } h1 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); } h2 { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); } h3 { font-size: 1.05rem; } p { margin: 0 0 1em; max-width: 68ch; } .wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 10px 16px; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-sm); transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* --- layout -------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 12px; } @media (min-width: 640px) { .shell { padding: 0 20px; } } .section { margin: 28px 0; } .section-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .section-head h2 { margin: 0; } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } /* --- header -------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); color: var(--header-ink); } .header-bar { display: flex; align-items: center; gap: 8px; min-height: var(--header-height); max-width: var(--content); margin: 0 auto; padding: 8px 12px; } @media (min-width: 640px) { .header-bar { padding: 10px 20px; gap: 14px; } } .brand-mark { display: flex; align-items: center; gap: 8px; color: var(--header-ink); text-decoration: none; font-weight: 700; font-size: 1.05rem; white-space: nowrap; } .brand-mark:hover { text-decoration: none; } .brand-mark img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; } .brand-slogan { display: none; color: var(--header-muted); font-size: 0.8rem; font-weight: 400; } @media (min-width: 900px) { .brand-slogan { display: block; } } .header-search { flex: 1 1 140px; min-width: 0; position: relative; } .header-search input { width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; background: rgba(255, 255, 255, 0.12); color: var(--header-ink); } .header-search input::placeholder { color: var(--header-muted); } .header-search input:focus { background: var(--paper); color: var(--ink); } .suggest { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .suggest-group { padding: 6px 8px 2px; color: var(--muted); font-size: 0.75rem; } .suggest a { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--radius-sm); color: var(--ink); } .suggest a:hover, .suggest a:focus { background: var(--surface-2); text-decoration: none; } .suggest img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: var(--surface); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; min-height: 42px; padding: 0 10px; color: var(--header-ink); background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-sm); } .icon-btn:hover { background: rgba(255, 255, 255, 0.1); } .icon-btn .count { min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 700; line-height: 20px; text-align: center; } .header-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; } .pill-select { padding: 8px 6px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.12); color: var(--header-ink); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.85rem; } .pill-select option { color: var(--ink); background: var(--paper); } /* On a phone the language/currency/theme controls move into the drawer so the top bar keeps only: menu, logo, search, cart. */ .desktop-only { display: none; } @media (min-width: 900px) { .desktop-only { display: flex; } } /* --- category drawer ------------------------------------------------------ */ .drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(8, 10, 14, 0.5); } .drawer { position: fixed; z-index: 91; inset: 0 auto 0 0; width: min(86vw, 340px); padding: 14px; overflow-y: auto; background: var(--paper); box-shadow: var(--shadow-lg); } .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .drawer h3 { margin: 18px 0 8px; font-size: 0.8rem; color: var(--muted); font-weight: 600; } .tree { list-style: none; margin: 0; padding: 0; } .tree ul { list-style: none; margin: 0 0 0 12px; padding: 0; border-left: 1px solid var(--line); } .tree a { display: block; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--ink); } .tree a:hover, .tree a:focus { background: var(--surface-2); text-decoration: none; } .tree a.is-current { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; } /* --- buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-align: center; } .btn:hover { background: var(--accent-dark); text-decoration: none; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-secondary { background: var(--surface-2); color: var(--ink); border-color: var(--line); } .btn-secondary:hover { background: var(--line); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--surface-2); } .btn-danger { background: var(--danger); color: #fff; } .btn-sm { min-height: 36px; padding: 6px 12px; font-size: 0.875rem; } .btn-block { width: 100%; } /* --- forms ---------------------------------------------------------------- */ .field { display: block; margin-bottom: 14px; } .field > span { display: block; margin-bottom: 5px; font-size: 0.875rem; color: var(--ink-soft); font-weight: 500; } .input, input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], textarea, select { width: 100%; padding: 11px 12px; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); } textarea { min-height: 92px; resize: vertical; } .input:focus, input:focus, textarea:focus, select:focus { border-color: var(--accent); } .field-error { color: var(--danger); font-size: 0.85rem; margin-top: 4px; } .checkline { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .checkline input { width: 18px; height: 18px; } /* --- products ------------------------------------------------------------- */ .grid-products { display: grid; gap: 10px; /* Two columns even at 320px — a one-per-row phone grid wastes the screen. */ grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 560px) { .grid-products { gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1140px) { .grid-products { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .product-card { display: flex; flex-direction: column; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .product-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .product-card .thumb { position: relative; aspect-ratio: 1; background: var(--surface); display: flex; align-items: center; justify-content: center; } .product-card .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .product-card .body { display: flex; flex-direction: column; gap: 6px; padding: 10px; flex: 1; } .product-card .name { color: var(--ink); font-size: 0.9rem; line-height: 1.35; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .product-card .name:hover { color: var(--accent); text-decoration: none; } .product-card .brand { font-size: 0.75rem; color: var(--muted); } .product-card .prices { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .price { font-size: 1.05rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .price-old { font-size: 0.8rem; color: var(--muted); text-decoration: line-through; white-space: nowrap; font-variant-numeric: tabular-nums; } .badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; } .badge { padding: 2px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em; background: var(--surface-2); color: var(--ink-soft); } .badge-sale { background: var(--sale); color: #fff; } .badge-new { background: var(--success); color: #fff; } .stock-line { font-size: 0.78rem; color: var(--success); } .stock-line.is-low { color: var(--warning); } .stock-line.is-out { color: var(--muted); } /* --- catalog layout -------------------------------------------------------- */ .catalog-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 960px) { .catalog-layout { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } } .sidebar { display: none; } @media (min-width: 960px) { .sidebar { display: block; position: sticky; top: calc(var(--header-height) + 12px); } } .brand-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .brand-pill { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: 0.85rem; white-space: nowrap; } .brand-pill:hover { border-color: var(--accent); text-decoration: none; } .brand-pill.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .brand-pill .n { color: inherit; opacity: 0.65; font-size: 0.78rem; } .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } .toolbar .spacer { flex: 1 1 auto; } .toolbar select { width: auto; min-width: 150px; } .filter-block { padding: 14px; } .filter-block + .filter-block { margin-top: 12px; } .price-row { display: flex; gap: 8px; align-items: center; } .price-row input { min-width: 0; } .empty-state { padding: 40px 20px; text-align: center; background: var(--paper); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); } .empty-state h3 { margin-bottom: 6px; } .empty-state p { margin: 0 auto 16px; color: var(--muted); max-width: 42ch; } .pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 22px 0; } .pagination a, .pagination span { min-width: 42px; min-height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); } .pagination .is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 12px 0; font-size: 0.85rem; color: var(--muted); } .breadcrumbs a { color: var(--muted); } /* --- home ----------------------------------------------------------------- */ .hero { display: block; padding: 24px 18px; margin-bottom: 8px; border-radius: var(--radius-lg); color: var(--accent-ink); background: linear-gradient(120deg, var(--accent-dark), var(--accent)); min-height: 150px; } .hero:hover { text-decoration: none; } .hero h2 { margin: 0 0 6px; color: inherit; font-size: clamp(1.3rem, 1.05rem + 1.4vw, 2rem); } .hero p { margin: 0; color: inherit; opacity: 0.9; } .strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .strip::-webkit-scrollbar { height: 6px; } .strip::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } .strip > * { scroll-snap-align: start; flex: 0 0 auto; } .brand-chip { display: flex; align-items: center; justify-content: center; min-width: 108px; min-height: 58px; padding: 10px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); font-weight: 600; white-space: nowrap; } .brand-chip:hover { border-color: var(--accent); text-decoration: none; } .brand-chip img { max-height: 32px; width: auto; object-fit: contain; } .category-tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 620px) { .category-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .category-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); min-height: 88px; } .tile:hover { border-color: var(--accent); text-decoration: none; } .tile .tile-name { font-weight: 600; } .tile .tile-sub { font-size: 0.8rem; color: var(--muted); } /* --- product page ---------------------------------------------------------- */ .product-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 880px) { .product-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } } .gallery { position: relative; } .gallery-main { position: relative; aspect-ratio: 1; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .gallery-track { display: flex; height: 100%; transition: transform 0.25s ease; } .gallery-track > figure { flex: 0 0 100%; margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; } .gallery-track img { max-height: 100%; width: 100%; object-fit: contain; padding: 16px; } .gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); } .gallery-arrow[data-dir="prev"] { left: 8px; } .gallery-arrow[data-dir="next"] { right: 8px; } .gallery-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; } .gallery-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; background: var(--line-strong); } .gallery-dots button.is-on { background: var(--accent); width: 22px; border-radius: 5px; } .buy-box { padding: 18px; position: sticky; top: calc(var(--header-height) + 12px); } .buy-box .price { font-size: 1.7rem; } .qty-row { display: flex; align-items: center; gap: 8px; margin: 14px 0; } .qty-row input { width: 68px; text-align: center; } .spec-table { width: 100%; border-collapse: collapse; } .spec-table th, .spec-table td { padding: 9px 4px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 0.9rem; } .spec-table th { width: 45%; color: var(--muted); font-weight: 500; } /* --- cart ------------------------------------------------------------------ */ .cart-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 880px) { .cart-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } } .cart-line { display: grid; gap: 10px; padding: 12px; grid-template-columns: 64px minmax(0, 1fr); align-items: start; border-bottom: 1px solid var(--line); } @media (min-width: 620px) { .cart-line { grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; } } .cart-line img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--surface); border-radius: var(--radius-sm); } .cart-line .line-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; } .summary-row.total { font-size: 1.2rem; font-weight: 700; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; } .order-code { display: inline-block; padding: 8px 18px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-dark); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; } /* --- feedback -------------------------------------------------------------- */ .notice { padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; border: 1px solid; } .notice-error { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); color: var(--danger); } .notice-success { background: color-mix(in srgb, var(--success) 12%, transparent); border-color: var(--success); color: var(--success); } .notice-info { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); } .toast { position: fixed; z-index: 120; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; background: var(--ink); color: var(--paper); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius-sm); } @keyframes shimmer { to { background-position: -200% 0; } } .skeleton-card { aspect-ratio: 0.72; } /* --- footer ---------------------------------------------------------------- */ .site-footer { margin-top: 40px; padding: 26px 0 40px; background: var(--paper); border-top: 1px solid var(--line); color: var(--muted); } .footer-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .site-footer a { color: var(--ink-soft); } .site-footer h4 { color: var(--ink); margin-bottom: 8px; font-size: 0.9rem; } /* Bottom bar keeps the primary actions in thumb reach on a phone. */ .bottom-bar { position: fixed; z-index: 45; bottom: 0; left: 0; right: 0; display: flex; background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .bottom-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; color: var(--muted); font-size: 0.7rem; } .bottom-bar a.is-on { color: var(--accent); } .bottom-bar a:hover { text-decoration: none; } @media (min-width: 900px) { .bottom-bar { display: none; } } @media (max-width: 899px) { body { padding-bottom: 62px; } } .theme-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; padding: 0; } .swatch.is-on { border-color: var(--ink); } .swatch[data-accent="blue"] { background: #2f5fd6; } .swatch[data-accent="violet"] { background: #6d3fc4; } .swatch[data-accent="green"] { background: #16764f; } .swatch[data-accent="orange"] { background: #c2600c; } .swatch[data-accent="red"] { background: #bd2d3c; } /* 2026 refresh: airy surfaces, quiet borders, generous touch controls. */ :root { --radius-sm:12px; --radius-md:20px; --radius-lg:28px; --content:1320px; --header-height:80px; --surface:#f5f6fa; --line:#e5e8ef; --muted:#626d80; --shadow-sm:0 4px 20px #15214106; } body { background:var(--surface); line-height:1.6; } h1,h2,h3 { letter-spacing:-.035em; line-height:1.2; } h1 { font-size:clamp(1.6rem,3vw,2.5rem); } h2 { font-size:clamp(1.25rem,2vw,1.8rem); } button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; } button,a { touch-action:manipulation; } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; } .shell { padding-inline:24px; } .section { margin:36px 0; } .section-head { gap:12px; margin-bottom:20px; } .section-head > a { font-size:.85rem; font-weight:600; } .site-header { background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line); box-shadow:0 3px 20px #10203904; } .header-bar { padding:16px 24px; gap:16px; } .site-header .brand-mark { color:var(--ink); font-size:1.12rem; letter-spacing:-.04em; max-width:240px; min-width:0; } .brand-mark > span:last-child { overflow:hidden; text-overflow:ellipsis; } .brand-emblem { width:34px; height:38px; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); border-radius:11px; flex:none; } .brand-slogan { display:none; } .site-header .icon-btn { color:var(--ink); border-color:var(--line); min-width:44px; min-height:44px; padding:0 10px; } .site-header .icon-btn:hover { background:var(--surface-2); } .header-search input { background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:12px 16px; } .header-search input::placeholder { color:var(--muted); } .site-header .pill-select { width:auto; max-width:145px; padding:10px; color:var(--ink); background:var(--surface); border-color:var(--line); min-height:44px; } .mobile-language { display:none; } .btn { border-radius:12px; transition:background .18s,box-shadow .18s; } .btn-sm,.icon-btn,.brand-pill,.pagination a,.pagination span { min-height:44px; } .btn-sm { padding:9px 12px; } .product-card { box-shadow:0 2px 12px #15214103; transition:box-shadow .2s,border-color .2s,transform .2s; } .product-card .thumb { background:linear-gradient(145deg,var(--paper),var(--surface)); margin:8px; border-radius:14px; } .product-card .thumb img { padding:18px; } .product-card .body { padding:10px 16px 16px; gap:9px; } .product-card .name { font-weight:600; font-size:.94rem; min-height:2.6em; } .product-card .brand { text-transform:uppercase; letter-spacing:.09em; font-size:.65rem; } .product-card .price { font-size:1.2rem; letter-spacing:-.035em; } .product-card .btn { background:var(--accent-soft); color:var(--accent-dark); border:1px solid transparent; font-size:.84rem; line-height:1.3; } .product-card .btn:hover { background:var(--accent); color:var(--accent-ink); } .product-card .btn:disabled { background:var(--surface-2); color:var(--muted); } .badges { top:10px; left:10px; max-width:calc(100% - 20px); } .badge { padding:4px 9px; line-height:1.3; } .badge-new { background:var(--paper); color:var(--ink); border:1px solid var(--line); } .stock-line { display:flex; align-items:center; gap:5px; line-height:1.35; } .stock-line::before { content:""; width:5px; height:5px; background:currentColor; border-radius:50%; flex:none; } .hero { position:relative; isolation:isolate; overflow:hidden; min-height:360px; padding:48px; background:radial-gradient(ellipse at 80% 30%,#384977 0,transparent 55%),#101b32; color:#fff; display:flex; align-items:center; } .hero-copy { position:relative; z-index:2; width:58%; } .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.05em; color:#c9d9f6; margin-bottom:22px; } .hero h2 { font-size:clamp(2rem,4vw,3.55rem); letter-spacing:-.045em; max-width:16ch; line-height:1.08; margin-bottom:18px; } .hero p { max-width:42ch; color:#d8e2f5; font-size:.96rem; } .hero-cta { display:inline-flex; align-items:center; gap:24px; padding:12px 18px; margin-top:26px; border-radius:12px; background:#d6f59b; color:#1b2d17; font-weight:650; font-size:.86rem; } .hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; } .hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0b152ae6,#0b152a45); z-index:-1; } .hero-art { position:absolute; right:3%; top:0; bottom:0; width:40%; pointer-events:none; } .device { position:absolute; width:148px; height:275px; border:3px solid #9caac9; border-radius:29px; background:#192539; box-shadow:14px 22px 36px #0005; } .device-front { top:50%; left:50%; transform:translate(-30%,-45%) rotate(16deg); overflow:hidden; background:radial-gradient(ellipse at 0 100%,#b5ccff,transparent 60%),radial-gradient(ellipse at 80% 20%,#7b8bca,transparent 55%),#17284c; } .device-front::after { content:""; position:absolute; width:160px; height:230px; left:-45px; top:70px; border:1px solid #e1eaff65; border-radius:50%; transform:rotate(-35deg); box-shadow:0 0 0 22px #c5d2ff10,0 0 0 44px #c5d2ff08; } .device-back { top:50%; left:50%; transform:translate(-110%,-55%) rotate(-14deg); background:linear-gradient(145deg,#8a96ad,#394960); } .device-back::before { content:""; position:absolute; width:17px; height:17px; border-radius:50%; background:#142037; left:14px; top:15px; box-shadow:0 26px #142037,26px 12px #142037; border:3px solid #b4bdce; } .device-camera { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:48px; height:12px; border-radius:20px; background:#0e192b; } .orbit { position:absolute; width:340px; height:340px; border:1px solid #a4b7dd20; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); } .orbit-two { width:420px; height:420px; } .art-spark { position:absolute; top:16%; right:9%; color:#d6f59b; font-size:40px; } .category-tiles { gap:14px; } .tile { position:relative; padding:22px; min-height:140px; gap:10px; } .tile-icon { color:var(--accent-dark); background:var(--accent-soft); display:grid; place-items:center; width:48px; height:48px; border-radius:14px; margin-bottom:3px; } .tile-name { font-size:1rem; } .tile-sub { line-height:1.5; } .brand-chip { border-radius:12px; min-height:62px; min-width:130px; letter-spacing:-.03em; font-size:1.1rem; } .strip { gap:12px; } .catalog-layout { gap:24px; } .filter-block { padding:20px; } .toolbar { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:12px; gap:12px; } .toolbar select { max-width:100%; min-height:44px; } .breadcrumbs { margin:20px 0; } .buy-box { padding:28px; } .buy-box h1 { margin:12px 0; } .gallery-main { border-radius:24px; } .gallery-dots { gap:0; } .gallery-dots button,.gallery-dots button.is-on { width:44px; height:44px; border-radius:0; background:transparent; display:grid; place-items:center; } .gallery-dots button::after { content:""; width:7px; height:7px; border-radius:10px; background:var(--line-strong); } .gallery-dots button.is-on::after { width:22px; background:var(--accent); } .cart-line { padding:20px; gap:16px; } .cart-line:last-child { border-bottom:0; } .summary-row > :first-child { min-width:0; overflow-wrap:anywhere; } .summary-row > :last-child { flex-shrink:0; } .drawer { width:min(92vw,390px); padding:20px; overscroll-behavior:contain; padding-bottom:calc(24px + env(safe-area-inset-bottom)); } .drawer-head { position:sticky; top:-20px; z-index:1; padding:12px 0; background:var(--paper); border-bottom:1px solid var(--line); } .drawer-backdrop { backdrop-filter:blur(4px); } .language-list { display:grid; grid-template-columns:1fr; gap:4px; } .language-select-wrap { display:flex; align-items:center; gap:10px; min-height:48px; padding:5px 8px 5px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); } .language-current-code { flex:none; min-width:28px; font-size:.75rem; font-weight:800; color:var(--accent-dark); } .language-select { min-width:0; flex:1; width:100%; border:0; padding:7px 4px; background:transparent; color:var(--ink); font-size:.92rem; } .language-select:focus { outline:none; } .language-option { display:flex; gap:12px; align-items:center; width:100%; min-height:48px; border:0; border-radius:12px; padding:10px 12px; text-align:left; background:transparent; color:var(--ink); } .language-option:hover { background:var(--surface-2); } .language-option.is-on { background:var(--accent-soft); color:var(--accent-dark); } .language-code { width:30px; font-size:.75rem; font-weight:750; } .language-check { margin-left:auto; } .swatch { width:44px; height:44px; border:8px solid var(--paper); box-shadow:0 0 0 1px var(--line); } .swatch.is-on { border-color:var(--paper); box-shadow:0 0 0 2px var(--ink); } .site-footer { margin-top:64px; padding:40px 0; } .bottom-bar { box-shadow:0 -5px 24px #17274708; } .bottom-bar a { gap:5px; padding:11px 4px 9px; font-size:.66rem; line-height:1.2; min-width:0; text-align:center; } .bottom-bar a.is-on { position:relative; font-weight:700; } .bottom-bar a.is-on::before { content:""; width:25px; height:3px; position:absolute; top:0; border-radius:0 0 4px 4px; background:var(--accent); } .toast { bottom:calc(88px + env(safe-area-inset-bottom)); text-align:center; } @media (hover:hover) { .product-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); } .tile:hover { background:var(--accent-soft); } } @media (min-width:900px) { .grid-products { gap:18px; } .catalog-layout .grid-products { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:1200px) { .grid-products { grid-template-columns:repeat(4,minmax(0,1fr)); } .catalog-layout .grid-products { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (max-width:899px) { :root { --header-height:128px; } body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); } .shell { padding-inline:16px; } .header-bar { flex-wrap:wrap; gap:10px; padding:12px 16px; } .site-header .brand-mark { flex:1; font-size:1rem; max-width:none; } .brand-emblem { width:28px; height:32px; border-radius:9px; } .header-tools { gap:6px; } .header-search { flex:1 0 100%; order:5; } .header-search input { height:44px; padding:10px 14px; } .mobile-language { display:inline-flex; font-size:.73rem; gap:4px; } .hero { min-height:320px; padding:28px; } .hero-copy { width:65%; } .hero h2 { font-size:2.2rem; } .hero-art { right:-3%; width:36%; } .device { width:112px; height:210px; border-radius:24px; } .orbit { width:230px; height:230px; }.orbit-two { width:300px; height:300px; } .art-spark { right:3%; } .section { margin:28px 0; } .section-head { margin-bottom:16px; } .buy-box { position:static; } .brand-pills { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; } .brand-pill { flex-shrink:0; } } @media (max-width:559px) { .hero { min-height:370px; padding:26px 22px; align-items:flex-start; } .hero-copy { width:100%; } .hero-eyebrow { font-size:.65rem; margin-bottom:16px; max-width:100%; } .hero h2 { font-size:2rem; max-width:15ch; } .hero p { font-size:.85rem; max-width:26ch; } .hero-cta { margin-top:24px; gap:12px; max-width:64%; font-size:.76rem; padding:12px 14px; } .hero-art { width:32%; top:auto; bottom:6px; right:2%; height:160px; opacity:.9; } .device { width:70px; height:133px; border-radius:15px; border-width:2px; } .device-camera { width:28px; height:6px; top:7px; } .device-back::before { width:10px; height:10px; border-width:2px; top:9px; left:8px; box-shadow:0 16px #142037,16px 8px #142037; } .orbit { width:150px; height:150px; }.orbit-two { width:205px; height:205px; }.art-spark { font-size:24px; top:0; } .category-tiles { gap:10px; }.tile { padding:16px; min-height:145px; }.tile-name { font-size:.9rem; }.tile-sub { font-size:.75rem; } .grid-products { gap:10px; }.product-card { border-radius:16px; }.product-card .thumb { margin:5px; border-radius:11px; }.product-card .thumb img { padding:10px; } .product-card .body { padding:6px 10px 12px; gap:8px; }.product-card .name { font-size:.84rem; }.product-card .price { font-size:1.05rem; }.product-card .btn { padding:9px 6px; font-size:.78rem; min-height:46px; } .stock-line { font-size:.68rem; }.badge { font-size:.6rem; padding:3px 6px; }.badges { top:7px; left:7px; } .toolbar { gap:10px; }.toolbar select { width:100%; min-width:0; }.toolbar .spacer { display:none; } input,textarea,select,.input { font-size:16px; } .buy-box { padding:20px; }.cart-line { padding:16px; gap:12px; grid-template-columns:52px minmax(0,1fr); } .cart-line > .price { grid-column:2; }.cart-line .line-actions { gap:6px; }.cart-line [data-remove] { width:100%; } .site-footer { margin-top:36px; }.footer-grid { gap:24px; } } @media (max-width:359px) { .shell { padding-inline:12px; }.header-bar { padding-inline:12px; gap:6px; }.site-header .brand-mark { font-size:.86rem; gap:5px; }.brand-emblem { display:none; } .hero { padding:24px 18px; }.hero h2 { font-size:1.8rem; }.hero-cta { max-width:62%; gap:6px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } } .filter-toggle { display:none; } @media (max-width:959px) { .filter-toggle { display:inline-flex; } .sidebar.is-open { display:block; scroll-margin-top:calc(var(--header-height) + 16px); } .sidebar.is-open > .filter-toggle { margin-bottom:12px; } .toolbar .spacer { display:block; flex:1; font-size:.8rem; } } .home-categories { display:flex; gap:12px; overflow-x:auto; padding:1px 1px 12px; scroll-snap-type:x proximity; } .home-categories .tile { flex:0 0 150px; scroll-snap-align:start; min-height:150px; } @media (max-width:559px) { .home-categories .tile { flex-basis:132px; min-height:138px; } } input[type="file"] { display:block; width:100%; min-width:0; max-width:100%; font-size:.875rem; } input[type="file"]::file-selector-button { min-height:44px; max-width:100%; margin-right:8px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink); font:inherit; cursor:pointer; } @media (max-width:899px) { .hero-art { right:3%; }.orbit { display:none; } } /* The earlier design-token refresh intentionally tightened the light theme. Keep a second dark-theme block at the end so those later light defaults can never override the dark palette. Every surface, including the body, footer, cards, controls and mobile bottom bar, now follows one coherent dark canvas. */ [data-theme="dark"] { color-scheme: dark; --ink: #f5f7fb; --ink-soft: #d5dceb; --muted: #aeb8c9; --paper: #171d28; --surface: #0c111b; --surface-2: #242d3c; --line: #344052; --line-strong: #526076; --header-bg: #0a0f18; --header-ink: #f8faff; --header-muted: #bdc8d9; --success: #59d39a; --danger: #ff8794; --warning: #f2c36d; --sale: #ff6f82; --accent: #a98af3; --accent-dark: #c5b1ff; --accent-soft: #30234d; --accent-ink: #100d18; --shadow-sm: 0 4px 20px rgba(0,0,0,.28); --shadow-md: 0 10px 32px rgba(0,0,0,.38); --shadow-lg: 0 22px 60px rgba(0,0,0,.55); } [data-theme="dark"][data-accent="blue"] { --accent:#8eacf8; --accent-dark:#b9caff; --accent-soft:#1e315b; } [data-theme="dark"][data-accent="violet"] { --accent:#b493ff; --accent-dark:#d0baff; --accent-soft:#30204f; } [data-theme="dark"][data-accent="green"] { --accent:#62d7a0; --accent-dark:#9aebc2; --accent-soft:#143a2b; } [data-theme="dark"][data-accent="orange"] { --accent:#ffb16d; --accent-dark:#ffd0a0; --accent-soft:#4a2d16; } [data-theme="dark"][data-accent="red"] { --accent:#ff8e9b; --accent-dark:#ffbac2; --accent-soft:#4a2029; } [data-theme="dark"], [data-theme="dark"] body { background:var(--surface); color:var(--ink); } [data-theme="dark"] main { background:transparent; color:var(--ink); } [data-theme="dark"] .site-header { background:var(--header-bg); color:var(--header-ink); border-color:var(--line); } [data-theme="dark"] .site-header .icon-btn, [data-theme="dark"] .site-header .pill-select { color:var(--header-ink); background:#192231; border-color:#4b5a70; } [data-theme="dark"] .site-header .header-search input { background:#1a2331; border-color:#435168; color:var(--header-ink); } [data-theme="dark"] .site-header .header-search input::placeholder { color:#bac5d6; } [data-theme="dark"] .site-footer, [data-theme="dark"] .bottom-bar { background:var(--paper); color:var(--ink-soft); border-color:var(--line); } [data-theme="dark"] .card, [data-theme="dark"] .product-card, [data-theme="dark"] .brand-chip, [data-theme="dark"] .tile, [data-theme="dark"] .toolbar, [data-theme="dark"] .empty-state { background:var(--paper); border-color:var(--line); color:var(--ink); } [data-theme="dark"] .product-card .thumb { background:linear-gradient(145deg,#202a3a,#121924); } [data-theme="dark"] .product-card .btn { background:var(--accent-soft); color:var(--accent-dark); } [data-theme="dark"] .product-card .btn:hover { background:var(--accent); color:var(--accent-ink); } [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .input { background:#1a2331; color:var(--ink); border-color:#506078; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color:#aeb8c9; } [data-theme="dark"] .drawer { background:var(--paper); color:var(--ink); } [data-theme="dark"] .drawer-head { background:var(--paper); border-color:var(--line); } [data-theme="dark"] .drawer h3 { color:var(--muted); } [data-theme="dark"] .tree a, [data-theme="dark"] .language-select-wrap, [data-theme="dark"] .language-select { color:var(--ink); } [data-theme="dark"] .language-select-wrap { background:#202a39; border-color:#52627a; } [data-theme="dark"] .language-current-code { color:var(--accent-dark); } [data-theme="dark"] .drawer .btn-secondary { background:#273245; border-color:#53627a; color:var(--ink); } [data-theme="dark"] .drawer .btn-ghost { color:var(--ink); border-color:#53627a; } [data-theme="dark"] .drawer .swatch { border-color:var(--paper); } [data-theme="dark"] .drawer-backdrop { background:rgba(0,0,0,.68); } [data-theme="dark"] .suggest { background:var(--paper); color:var(--ink); border-color:var(--line-strong); } [data-theme="dark"] .suggest a { color:var(--ink); } [data-theme="dark"] .pagination a, [data-theme="dark"] .pagination span { background:var(--paper); color:var(--ink); border-color:var(--line-strong); } [data-theme="dark"] .spec-table th, [data-theme="dark"] .spec-table td { border-color:var(--line); }