/* Azyvona business catalogue - public website styles. Plain CSS on purpose: no build step, no Node runtime on the host. Every colour is a token on :root so the whole site can flip to a dark palette without a second stylesheet. The theme follows the visitor's operating-system setting and can be overridden with the header toggle, which writes data-theme on . */ :root { color-scheme: light; --ink: #17221b; --ink-strong: #0d150f; --muted: #647169; --line: #e3e8e4; --line-strong: #cfd8d2; --bg: #fbfcfa; --surface: #ffffff; --surface-2: #f5f6f3; --soft: #f1f6f0; --accent: #2c7a4b; --accent-dark: #1d5f38; --accent-soft: #eef6f0; --accent-ink: #1d5f38; --wa: #127444; --wa-dark: #0f6a3d; --wa-ink: #ffffff; --wa-chip: #0f6a3d; --danger: #9d2525; --warn-bg: #fff2c6; --warn-ink: #644d00; --footer-bg: #111a14; --footer-ink: #aeb9b1; --highlight: #fff2a8; --overlay: rgba(12, 20, 15, .72); /* Full-width inverted slab (the wholesale block). Kept separate from --ink-strong so dark mode does not turn it into a glaring white band. */ --invert-bg: #0d150f; --invert-ink: #fbfcfa; --shadow: 0 18px 50px rgba(23, 34, 27, .08); --shadow-sm: 0 6px 18px rgba(23, 34, 27, .06); --shadow-lg: 0 30px 70px rgba(23, 34, 27, .16); --radius: 20px; --header-h: 78px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #e8efe9; --ink-strong: #ffffff; --muted: #94a49a; --line: #26332b; --line-strong: #35453a; --bg: #0f1712; --surface: #16211a; --surface-2: #1b2820; --soft: #16211a; --accent: #4cb87a; --accent-dark: #3da368; --accent-soft: #1a2c21; --accent-ink: #7ed7a2; --wa: #35b877; --wa-dark: #4cc98a; --wa-ink: #0d150f; --wa-chip: #5fd699; --danger: #ef8181; --warn-bg: #3a3117; --warn-ink: #f2d98a; --footer-bg: #0a100c; --footer-ink: #8fa096; --highlight: #6b5f18; --overlay: rgba(4, 8, 6, .8); --invert-bg: #1b2820; --invert-ink: #e8efe9; --shadow: 0 18px 50px rgba(0, 0, 0, .45); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35); --shadow-lg: 0 30px 70px rgba(0, 0, 0, .6); } } :root[data-theme="dark"] { color-scheme: dark; --ink: #e8efe9; --ink-strong: #ffffff; --muted: #94a49a; --line: #26332b; --line-strong: #35453a; --bg: #0f1712; --surface: #16211a; --surface-2: #1b2820; --soft: #16211a; --accent: #4cb87a; --accent-dark: #3da368; --accent-soft: #1a2c21; --accent-ink: #7ed7a2; --wa: #35b877; --wa-dark: #4cc98a; --wa-ink: #0d150f; --wa-chip: #5fd699; --danger: #ef8181; --warn-bg: #3a3117; --warn-ink: #f2d98a; --footer-bg: #0a100c; --footer-ink: #8fa096; --highlight: #6b5f18; --overlay: rgba(4, 8, 6, .8); --invert-bg: #1b2820; --invert-ink: #e8efe9; --shadow: 0 18px 50px rgba(0, 0, 0, .45); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .35); --shadow-lg: 0 30px 70px rgba(0, 0, 0, .6); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } body.is-locked { overflow: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { line-height: 1.15; margin-top: 0; color: var(--ink-strong); } h1 { font-size: clamp(38px, 5vw, 62px); letter-spacing: -.04em; margin: 14px 0 20px; } h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.028em; margin: 8px 0 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .container { width: min(1160px, calc(100% - 40px)); margin: auto; } .narrow { width: min(760px, calc(100% - 40px)); margin: auto; } .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; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink-strong); color: var(--bg); padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; } .skip-link:focus { left: 0; } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 800; color: var(--accent); } /* ---------- Scroll reveal (opt-in, motion-safe) ---------- Scoped to .js on purpose: the class is only added by the inline script in the layout, so with JavaScript off (or broken) the product grid and category cards stay visible instead of being stuck at opacity 0. */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .js [data-reveal].is-visible { opacity: 1; transform: none; } } /* ---------- Demo banner ---------- */ .demo-bar { background: var(--warn-bg); color: var(--warn-ink); text-align: center; padding: 7px 15px; font-size: 12px; font-weight: 700; letter-spacing: .03em; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 30; background: var(--bg); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .nav-wrap { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 11px; } .brand-mark { width: 42px; height: 42px; border-radius: 13px; background: var(--ink-strong); color: var(--bg); display: grid; place-items: center; font-family: Georgia, serif; font-size: 22px; font-weight: 700; flex: none; } .brand-logo { max-height: 46px; width: auto; object-fit: contain; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-text strong { font-size: 14px; } .brand-text small { color: var(--muted); font-size: 10px; margin-top: 3px; } .main-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 650; } .main-nav > a:not(.btn) { padding: 26px 0; border-bottom: 2px solid transparent; } .main-nav > a:not(.btn):hover { color: var(--accent); } .main-nav > a.active { color: var(--accent); border-color: var(--accent); } .nav-toggle { display: none; border: 0; background: none; color: inherit; font-size: 24px; cursor: pointer; padding: 6px 10px; } .header-tools { display: flex; align-items: center; gap: 8px; } /* Header search: collapses to an icon button under 1080px. */ .header-search { position: relative; width: 230px; } .header-search input { width: 100%; border: 1px solid var(--line); background: var(--surface); color: inherit; border-radius: 999px; padding: 9px 14px 9px 34px; font: inherit; font-size: 13px; } /* Border accent only - the global :focus-visible ring is deliberately left in place so keyboard focus stays visible (WCAG 2.4.7). */ .header-search input:focus { border-color: var(--accent); } .header-search .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; } .theme-toggle { width: 38px; height: 38px; flex: none; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: inherit; cursor: pointer; display: grid; place-items: center; font-size: 15px; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; } } /* ---------- Search suggestions ---------- */ .search-suggest { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; padding: 6px; max-height: 70vh; overflow-y: auto; } .search-suggest[hidden] { display: none; } .suggest-group-label { display: block; padding: 9px 12px 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .suggest-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px; font-size: 13.5px; cursor: pointer; width: 100%; text-align: left; border: 0; background: none; color: inherit; font-family: inherit; } .suggest-item:hover, .suggest-item.is-active { background: var(--accent-soft); } .suggest-item img, .suggest-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: var(--surface-2); flex: none; } .suggest-thumb { display: grid; place-items: center; color: var(--muted); font-size: 15px; } .suggest-item span { display: block; min-width: 0; } .suggest-item strong { display: block; font-size: 13.5px; font-weight: 650; } .suggest-item small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; } .suggest-item .suggest-price { color: var(--accent); font-weight: 750; } .suggest-item .suggest-price s { color: var(--muted); font-weight: 500; } .suggest-all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; } .suggest-all .suggest-item { color: var(--accent); font-weight: 750; justify-content: center; } .suggest-empty { padding: 18px 14px; text-align: center; color: var(--muted); font-size: 13px; } .suggest-skeleton { display: grid; gap: 8px; padding: 10px; } .suggest-skeleton span { display: block; height: 42px; border-radius: 11px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 300% 100%; animation: shimmer 1.2s infinite linear; } @keyframes shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 1px solid transparent; padding: 11px 17px; border-radius: 12px; font-size: 14px; font-weight: 750; cursor: pointer; text-align: center; font-family: inherit; transition: background .15s ease, transform .15s ease, border-color .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink-strong); color: var(--bg); } .btn-primary:hover { background: var(--accent-dark); color: #fff; } .btn-light { background: var(--surface); border-color: var(--line); color: var(--ink); } .btn-light:hover { border-color: var(--accent); color: var(--accent); } .btn-whatsapp { background: var(--wa); color: var(--wa-ink); } .btn-whatsapp:hover { background: var(--wa-dark); color: var(--wa-ink); } .btn-large { padding: 14px 22px; font-size: 15px; } .btn-full { width: 100%; } /* ---------- Hero ---------- */ .hero { padding: 80px 0 68px; background: linear-gradient(180deg, var(--bg) 0, var(--soft) 100%); background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 18%, transparent) 0, transparent 38%), linear-gradient(180deg, var(--bg) 0, var(--soft) 100%); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: center; } .hero-copy { font-size: 18px; color: var(--muted); max-width: 670px; } .hero-copy p:first-child { margin-top: 0; } .hero-search-wrap { position: relative; max-width: 660px; margin: 28px 0 18px; } .hero-search { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 6px; box-shadow: var(--shadow); } .hero-search input { flex: 1; border: 0; padding: 10px 13px; outline: none; font: inherit; font-size: 15px; background: transparent; color: inherit; } .hero-search button { border: 0; background: var(--accent); color: #fff; border-radius: 10px; padding: 10px 20px; font: inherit; font-weight: 700; cursor: pointer; } .hero-search button:hover { background: var(--accent-dark); } .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; } .hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; align-items: center; } .hero-chips .chip-label { font-size: 11px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .hero-chips a { font-size: 12.5px; font-weight: 650; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); } .hero-chips a:hover { border-color: var(--accent); color: var(--accent); } .hero-art { position: relative; min-height: 390px; } .art-card { position: absolute; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); font-size: 55px; } @media (prefers-reduced-motion: no-preference) { .art-card { animation: float 7s ease-in-out infinite; } .art-two { animation-delay: -2.3s; } .art-three { animation-delay: -4.6s; } @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } } .art-one { width: 230px; height: 290px; border-radius: 30px; left: 10px; top: 50px; rotate: -8deg; color: #5c7ac9; } .art-two { width: 215px; height: 270px; border-radius: 25px; right: 0; top: 0; rotate: 7deg; color: #d08a68; } .art-three { width: 180px; height: 200px; border-radius: 25px; right: 30px; bottom: 0; rotate: -4deg; color: #8b6ab4; } .hero-note { position: absolute; bottom: 20px; left: 0; background: var(--ink-strong); color: var(--bg); padding: 13px 16px; border-radius: 13px; font-size: 12px; font-weight: 700; max-width: 215px; z-index: 2; } /* ---------- Sections ---------- */ .section { padding: 72px 0; } .section.compact { padding: 26px 0; } .section-soft { background: var(--soft); } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; } .section-head > a { font-size: 14px; font-weight: 750; color: var(--accent); } .section-note { color: var(--muted); font-size: 13px; margin: 8px 0 0; } .row-title { font-size: 20px; margin: 0 0 14px; } .page-hero { padding: 52px 0; background: var(--soft); border-bottom: 1px solid var(--line); } .page-hero h1 { font-size: clamp(34px, 5vw, 54px); margin: 8px 0 12px; } .page-hero p, .page-hero .hero-copy { color: var(--muted); font-size: 16px; } /* ---------- Category cards ---------- */ .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .category-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; } .category-card:hover, .product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); } .category-card img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--surface-2); } .category-card-body { padding: 20px; } .category-card h3 { margin: 0 0 7px; font-size: 20px; } .category-card p { margin: 0; color: var(--muted); font-size: 13px; } .category-card-children { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 18px; } .category-card-children a { font-size: 12px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 5px 10px; font-weight: 650; } .category-card-children a:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } /* ---------- Product cards ---------- */ .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .product-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; position: relative; } .product-image { background: var(--surface-2); aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: scale .35s ease; } .product-card:hover .product-image img { scale: 1.05; } .no-image { color: var(--muted); font-size: 12px; font-weight: 650; } .product-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; } .product-meta { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 750; } .product-card h3 { font-size: 17px; margin: 8px 0 4px; } .product-sku { font-size: 11px; color: var(--muted); margin-bottom: 6px; } .product-card p { color: var(--muted); font-size: 13px; margin: 0 0 16px; } .product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 8px 0 22px; } .product-price del { color: var(--muted); font-size: 17px; text-decoration-thickness: 1.5px; } .product-price ins, .product-price .current-price { color: var(--accent-ink); font-size: 28px; font-weight: 850; text-decoration: none; letter-spacing: -.025em; } .discount-badge { background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 800; white-space: nowrap; } .product-price-compact { margin: 0 0 14px; gap: 7px; } .product-price-compact del { font-size: 12px; } .product-price-compact ins, .product-price-compact .current-price { font-size: 18px; } .product-price-compact .discount-badge { padding: 3px 7px; font-size: 10px; } .product-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; font-size: 12px; font-weight: 750; } .text-link { color: var(--accent); } .mini-wa { background: var(--accent-soft); color: var(--wa-chip); padding: 6px 10px; border-radius: 8px; } .mini-wa:hover { background: color-mix(in srgb, var(--wa) 22%, transparent); } .card-flag { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--ink-strong); color: var(--bg); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; } /* ---------- Wholesale block ---------- */ .wholesale { background: var(--invert-bg); color: var(--invert-ink); border-radius: 26px; padding: 44px; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; border: 1px solid var(--line); } .wholesale h2 { color: var(--invert-ink); } .wholesale .eyebrow { color: var(--accent); } /* Doubled class so this wins over the later, more generic .rich-content rule - otherwise the body copy renders in muted grey on the dark panel. */ .wholesale-copy.wholesale-copy { color: var(--invert-ink); color: color-mix(in srgb, var(--invert-ink) 80%, transparent); max-width: 700px; } .wholesale-copy p { margin: 12px 0 0; } .wholesale-copy a { color: var(--accent); text-decoration: underline; } .wholesale-copy h2, .wholesale-copy h3 { color: var(--invert-ink); } /* ---------- Home about / contact ---------- */ .about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; } .about-grid .btn { margin-top: 18px; } .contact-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); } .contact-panel h3 { font-size: 18px; margin: 0 0 16px; } .contact-list { list-style: none; margin: 0 0 20px; padding: 0; } .contact-list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .contact-list li:last-child { border-bottom: 0; } .contact-list li > span:first-child { color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 750; letter-spacing: .06em; padding-top: 3px; } .contact-list a { color: var(--accent); font-weight: 650; word-break: break-word; } .panel-actions { display: flex; gap: 10px; flex-wrap: wrap; } .social-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .social-chip { font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #dbe4dd; } .social-chip:hover { background: rgba(255, 255, 255, .18); } .social-chip.dark { background: var(--accent-soft); color: var(--accent-ink); } .social-chip.dark:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } /* ---------- Catalogue listing ---------- */ .catalogue-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; } .catalogue-sidebar { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 16px; } .sidebar-block { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; } .sidebar-block h2 { font-size: 15px; margin: 0 0 12px; } .sidebar-cta p { font-size: 13px; color: var(--muted); margin: 0 0 14px; } .category-tree, .category-tree ul { list-style: none; margin: 0; padding: 0; } .category-tree a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: 13.5px; color: var(--ink); } .category-tree a:hover { background: var(--soft); } .category-tree a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 750; } .category-tree ul { margin: 2px 0 6px 12px; border-left: 1px solid var(--line); padding-left: 8px; } .category-tree ul a { font-size: 12.5px; color: var(--muted); } .tree-count { color: var(--muted); font-size: 11px; font-weight: 650; } .catalog-filters { display: grid; grid-template-columns: minmax(0, 1fr) 190px 170px auto auto; gap: 10px; background: var(--surface); border: 1px solid var(--line); padding: 12px; border-radius: 15px; position: relative; } .catalog-filters input, .catalog-filters select { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); min-width: 0; } .catalog-filters input:focus, .catalog-filters select:focus { border-color: var(--accent); } .filter-search { position: relative; min-width: 0; } .filter-search input { width: 100%; } .inline-sort select { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; } .active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .filter-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px; padding: 6px 12px; } .filter-pill a { font-weight: 800; opacity: .7; } .filter-pill a:hover { opacity: 1; } .mobile-filter-btn { display: none; } .drawer-close { display: none; width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 10px; padding: 9px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; margin-bottom: 4px; } .drawer-backdrop { display: none; } .results-line { margin: 24px 0 16px; color: var(--muted); font-size: 13px; } .results-line strong { color: var(--ink); font-size: 15px; } .empty-state { text-align: center; border: 1px dashed var(--line-strong); border-radius: 18px; padding: 60px 20px; color: var(--muted); } .empty-state h2 { font-size: 22px; color: var(--ink); } .empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } /* ---------- Pagination ---------- */ .pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 34px; } .pager-pages { display: flex; gap: 6px; flex-wrap: wrap; } .pager-link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 8px 12px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; font-size: 13px; font-weight: 650; color: var(--ink); } .pager-link:hover { border-color: var(--accent); color: var(--accent); } .pager-link.is-current { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--bg); } .pager-link.is-disabled { opacity: .45; pointer-events: none; } .pager-gap { color: var(--muted); padding: 0 4px; } /* ---------- Breadcrumbs ---------- */ .breadcrumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 22px; } .breadcrumbs a { color: var(--accent); font-weight: 650; } /* ---------- Product detail ---------- */ .product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .product-gallery { display: grid; gap: 14px; align-content: start; position: sticky; top: calc(var(--header-h) + 20px); } .detail-image { border-radius: 24px; overflow: hidden; background: var(--surface-2); aspect-ratio: 1 / 1; display: grid; place-items: center; position: relative; } .detail-image img { width: 100%; height: 100%; object-fit: cover; } .zoom-hint { position: absolute; right: 14px; bottom: 14px; background: var(--overlay); color: #fff; font-size: 11px; font-weight: 700; padding: 7px 11px; border-radius: 999px; pointer-events: none; } .detail-image[data-lightbox-open] { cursor: zoom-in; } .gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; } .gallery-thumb { width: 74px; height: 74px; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: pointer; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumb.active { border-color: var(--accent); } .detail-copy h1 { font-size: clamp(32px, 4vw, 50px); margin: 10px 0 14px; } .product-facts { display: grid; gap: 0; margin: 0 0 22px; border-top: 1px solid var(--line); } .product-facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .product-facts dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 750; } .product-facts dd { margin: 0; font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .product-facts dd a { color: var(--accent); } .copy-btn { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 7px; padding: 2px 8px; font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; } .copy-btn:hover { border-color: var(--accent); color: var(--accent); } .copy-btn.is-done { border-color: var(--accent); color: var(--accent); } .lead { font-size: 18px; color: var(--muted); } .availability-note { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 12px 16px; font-size: 14px; color: var(--accent-ink); margin: 18px 0; } .hint { font-size: 12px; color: var(--muted); } .alt-contact a { color: var(--accent); font-weight: 650; } .share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .share-row span { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .share-btn { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .share-btn:hover { border-color: var(--accent); color: var(--accent); } .rich-content { color: var(--muted); } .rich-content h2, .rich-content h3 { color: var(--ink-strong); } .rich-content h2 { font-size: 24px; margin-top: 26px; } .rich-content h3 { font-size: 19px; margin-top: 22px; } .rich-content ul, .rich-content ol { padding-left: 22px; } .rich-content li { margin: 5px 0; } .rich-content a { color: var(--accent); text-decoration: underline; } .rich-content mark { background: var(--highlight); color: var(--ink); padding: 0 2px; } .related-nav .eyebrow { display: block; margin-bottom: 10px; } .subcat-row { display: flex; gap: 10px; flex-wrap: wrap; } .subcat-row a { border: 1px solid var(--line); background: var(--surface); padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 650; } .subcat-row a:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 90; background: var(--overlay); display: grid; grid-template-rows: 1fr auto; padding: 24px; gap: 16px; backdrop-filter: blur(4px); } .lightbox[hidden] { display: none; } .lightbox-stage { display: grid; place-items: center; min-height: 0; position: relative; } .lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; } .lightbox-close, .lightbox-nav { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 19px; display: grid; place-items: center; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, .28); } .lightbox-close { top: -8px; right: -8px; } .lightbox-nav.prev { left: -4px; top: 50%; translate: 0 -50%; } .lightbox-nav.next { right: -4px; top: 50%; translate: 0 -50%; } .lightbox-caption { text-align: center; color: #e6ece8; font-size: 13px; } .lightbox-count { display: block; color: #98a79e; font-size: 11px; margin-top: 4px; } /* ---------- Category index page ---------- */ .category-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .category-index-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .category-index-head { display: flex; gap: 16px; align-items: flex-start; } .category-index-head img { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; flex: none; } .category-index-head h2 { font-size: 21px; margin: 0; } .category-index-head p { color: var(--muted); font-size: 13px; margin: 6px 0 0; } .category-index-list, .category-index-list ul { list-style: none; margin: 16px 0 0; padding: 0; } .category-index-list > li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 650; } .category-index-list ul { margin: 4px 0 4px 14px; } .category-index-list ul li { font-weight: 400; font-size: 13px; color: var(--muted); padding: 3px 0; } .category-index-list a:hover { color: var(--accent); } /* ---------- Contact page ---------- */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .contact-card { border: 1px solid var(--line); background: var(--surface); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; } .contact-card span { font-size: 11px; color: var(--accent); text-transform: uppercase; font-weight: 800; letter-spacing: .08em; } .contact-card h2 { font-size: 20px; margin: 10px 0 8px; word-break: break-word; } .contact-card p { color: var(--muted); font-size: 13px; margin: 0 0 18px; } .contact-card .btn { margin-top: auto; } .map-embed { margin-top: 26px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); } .map-embed iframe { width: 100%; height: 380px; border: 0; display: block; } .social-block { margin-top: 34px; } .info-card { background: var(--soft); border: 1px solid var(--line); padding: 28px; border-radius: 20px; margin-top: 34px; } .info-card h3 { margin-top: 0; } /* ---------- Opening hours ---------- */ /* One row per group of days ("Monday - Friday | 9 am - 6 pm"), so the times line up in a column instead of wrapping mid-sentence. These rows appear in the footer of every page, including the narrow contact column, so the row has to degrade predictably rather than assume it fits. */ .hours-list { list-style: none; margin: 0; padding: 0; } /* There is no global "p { margin: 0 }" reset, so the browser's default 1em would push this down and leave the value sitting lower than its label - every other row in the contact list starts flush with the top of its cell. */ .hours-legacy { margin: 0; } .hours-list li { display: flex; justify-content: space-between; align-items: baseline; /* wrap: when the pair genuinely cannot fit, the time drops to its own line instead of the two colliding or pushing past the column. */ flex-wrap: wrap; gap: 0 14px; font-size: 13px; padding: 2px 0; } /* min-width:0 lets a long label shrink and wrap instead of forcing the row wider than its container - flex items refuse to shrink below content size. */ .hours-list li > :first-child { min-width: 0; } /* The time is a unit: "9 am - 6 pm" must never break across two lines. */ .hours-list li > :last-child { white-space: nowrap; } .hours-list li.is-closed { color: var(--muted); } .hours-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; } /* The footer sits on a dark panel, where --muted has too little contrast. */ .site-footer .hours-list li { color: var(--footer-ink); } .site-footer .hours-list li.is-closed, .site-footer .hours-note { color: var(--footer-ink); opacity: .8; } /* ---------- Error pages ---------- */ .error-page { text-align: center; max-width: 640px; padding: 40px 0; margin: auto; } .error-page .hero-search-wrap { margin-left: auto; margin-right: auto; } /* ---------- Footer ---------- */ .site-footer { background: var(--footer-bg); color: #fff; padding: 52px 0 22px; } .site-footer h4 { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 42px; } .footer-brand .brand-mark { background: #fff; color: #111a14; } .footer-brand .brand-text strong { color: #fff; } .footer-blurb { color: var(--footer-ink); font-size: 13px; margin: 16px 0 0; } .footer-grid h4 { font-size: 13px; margin-bottom: 12px; } .footer-grid a, .footer-grid p { display: block; color: var(--footer-ink); font-size: 13px; margin: 7px 0; } .footer-grid a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 38px; padding-top: 20px; color: #7f8d83; font-size: 11px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* ---------- Floating actions ---------- */ .floating-wa { position: fixed; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; background: var(--wa); color: var(--wa-ink); font-weight: 750; font-size: 13px; padding: 13px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); z-index: 35; } .floating-wa:hover { background: var(--wa-dark); } .to-top { position: fixed; right: 22px; bottom: 78px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 16px; box-shadow: var(--shadow-sm); z-index: 34; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .to-top.is-visible { opacity: 1; visibility: visible; } .to-top:hover { border-color: var(--accent); color: var(--accent); } /* Reading-progress bar under the sticky header. */ .read-progress { /* Full width, scaled with a transform: animating width would force a layout pass on every scroll frame. */ position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 40; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; background: linear-gradient(90deg, var(--accent), var(--accent-ink)); transition: transform .1s linear; } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .header-search { width: 180px; } .main-nav { gap: 18px; } } @media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(3, 1fr); } .catalogue-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; } .catalog-filters { grid-template-columns: minmax(0, 1fr) 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } .header-search { display: none; } } @media (max-width: 900px) { .nav-toggle { display: block; } .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 18px; box-shadow: var(--shadow); } .main-nav.open { display: flex; } .main-nav > a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--line); } .main-nav .btn { margin-top: 12px; } .hero { padding: 52px 0 44px; } .hero-grid { grid-template-columns: 1fr; gap: 34px; } .hero-art { display: none; } .section { padding: 48px 0; } .category-grid { grid-template-columns: repeat(2, 1fr); } .about-grid { grid-template-columns: 1fr; gap: 30px; } .product-detail-grid { grid-template-columns: 1fr; gap: 32px; } .product-gallery { position: static; } .category-index { grid-template-columns: 1fr; } .catalogue-layout { grid-template-columns: 1fr; } .wholesale { padding: 32px; } /* Category sidebar becomes a slide-in drawer opened from the filter bar. */ .mobile-filter-btn { display: inline-flex; width: 100%; margin-bottom: 12px; } .catalogue-sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 88vw); z-index: 45; background: var(--bg); border-right: 1px solid var(--line); padding: 18px; overflow-y: auto; display: none; align-content: start; box-shadow: var(--shadow-lg); } .catalogue-sidebar.open { display: grid; } .drawer-close { display: block; } .drawer-backdrop { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: 44; } .drawer-backdrop[hidden] { display: none; } } @media (max-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .category-grid { grid-template-columns: 1fr; } .catalog-filters { grid-template-columns: 1fr; } .catalog-filters .btn { width: 100%; } .footer-grid { grid-template-columns: 1fr; gap: 26px; } .contact-list li { grid-template-columns: 1fr; gap: 2px; } .product-facts > div { grid-template-columns: 1fr; gap: 2px; } .btn-full-mobile { width: 100%; } .floating-wa-text { display: none; } .floating-wa { padding: 15px; } .to-top { bottom: 76px; right: 20px; } .brand-text small { display: none; } .category-index-head { flex-direction: column; } .category-index-head img { width: 100%; height: 140px; } .lightbox { padding: 14px; } .lightbox-close { top: 0; right: 0; } } @media (max-width: 420px) { .product-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } @media print { .site-header, .site-footer, .floating-wa, .to-top, .catalogue-sidebar, .catalog-filters, .read-progress, .lightbox, .demo-bar { display: none !important; } body { background: #fff; color: #000; } .section { padding: 12px 0; } }