wrappers. Each utility re-scopes the theme tokens INSIDE that section so cards, buttons, borders and text automatically pick up the correct light-mode look without rewriting markup. */ .bg-paper, .bg-stone, .bg-snow, .bg-mist, .section-light { --bg: var(--_bg, #faf6ee); --bg-warm: var(--_bg, #faf6ee); --bg-alt: var(--_alt, #f0ece2); --bg-cream: var(--_card, #ffffff); --bg-raised: #ffffff; --bg-hi: #ffffff; --ink: var(--ink-deep); --text: var(--ink-deep); --text-soft: var(--ink-soft); --text-muted: var(--ink-muted); --border: var(--line-light); --border-strong:var(--line-light-strong); --shadow: var(--shadow-paper); --shadow-lg: 0 4px 12px rgba(40,30,20,.06), 0 28px 80px rgba(40,30,20,.12); /* Re-scope accent so any inline style="color:var(--accent)" stays readable */ --accent: #8a6a35; --accent-dark: #6e5328; --gold: #8a6a35; background: var(--bg); color: var(--ink); } .bg-paper { --_bg: var(--bg-paper); --_alt: var(--bg-mist); --_card: var(--bg-snow); } .bg-stone { --_bg: var(--bg-stone); --_alt: var(--bg-paper); --_card: var(--bg-snow); } .bg-snow { --_bg: var(--bg-snow); --_alt: var(--bg-paper); --_card: var(--bg-snow); } .bg-mist { --_bg: var(--bg-mist); --_alt: var(--bg-stone); --_card: var(--bg-snow); } /* Eyebrow + heading in light sections — readable warm bronze */ .bg-paper .eyebrow, .bg-stone .eyebrow, .bg-snow .eyebrow, .bg-mist .eyebrow, .section-light .eyebrow { color: #8a6a35; } /* Section divider strip — used between dark & light to soften the transition */ .section-divider { height: 80px; background: linear-gradient(180deg, var(--bg-warm) 0%, transparent 100%); margin-top: -80px; pointer-events: none; position: relative; z-index: 1; } .section-divider.invert { background: linear-gradient(0deg, var(--bg-warm) 0%, transparent 100%); margin-top: 0; margin-bottom: -80px; } /* Auto-bridge: any light section directly followed by .newsletter or .site-footer gets a subtle bottom shadow so the dark→light transition feels intentional */ .bg-paper + .newsletter, .bg-stone + .newsletter, .bg-snow + .newsletter, .bg-mist + .newsletter, .section-light + .newsletter { box-shadow: inset 0 60px 60px -60px rgba(0,0,0,.6); } .bg-paper + .site-footer, .bg-stone + .site-footer, .bg-snow + .site-footer, .bg-mist + .site-footer, .section-light + .site-footer { box-shadow: inset 0 80px 80px -80px rgba(0,0,0,.5); } /* Dark → Light crossfade — when a hero/announce/section-alt sits immediately above a cream section, fade the very top of the cream block from "almost dark" into cream so the seam reads as intentional gradient, not a hard line. */ .hero-slider + .bg-paper, .hero-slider + .bg-stone, .hero-slider + .bg-snow, .hero-slider + .bg-mist, .hero-slider + .section-light, .page-banner + .bg-paper, .page-banner + .bg-stone, .page-banner + .bg-snow, .page-banner + .bg-mist, .page-banner + .section-light, .section-alt + .bg-paper, .section-alt + .bg-stone, .section-alt + .bg-snow, .section-alt + .bg-mist, .section-alt + .section-light, .section + .bg-paper, .section + .bg-stone, .section + .bg-snow { position: relative; isolation: isolate; } .hero-slider + .bg-paper::before, .hero-slider + .bg-stone::before, .hero-slider + .bg-snow::before, .hero-slider + .bg-mist::before, .hero-slider + .section-light::before, .page-banner + .bg-paper::before, .page-banner + .bg-stone::before, .page-banner + .bg-snow::before, .page-banner + .bg-mist::before, .page-banner + .section-light::before, .section-alt + .bg-paper::before, .section-alt + .bg-stone::before, .section-alt + .bg-snow::before, .section-alt + .bg-mist::before, .section-alt + .section-light::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(15,13,12,.18) 0%, rgba(15,13,12,0) 100%); } /* Make sure section content stays above the gradient */ .bg-paper > *, .bg-stone > *, .bg-snow > *, .bg-mist > *, .section-light > * { position: relative; z-index: 1; } /* Accessibility: respect users who request reduced motion. - Kills decorative animations (skeleton shimmer, hover scaling, infinite loops) - Keeps essential transitions but trims them to 0.01ms - JS-driven auto-rotates also opt-out via the prefersReducedMotion flag */ @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; } .product-card .img-wrap { animation: none !important; background-image: none !important; } .product-card:hover .img-wrap { transform: none !important; } .icon-btn-burger:hover { transform: none !important; } .hero-slide { transition: opacity 0.2s linear !important; } } /* ========================================================================== v2 — Refined HEADER: scrolled state, glass on dark, tighter rhythm ========================================================================== */ .site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 90; background: rgba(15,13,12,0.92); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid rgba(255,255,255,.06); transition: background .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out), padding .25s var(--ease-out); } .site-header.is-scrolled { background: rgba(10,8,7,0.95); border-bottom-color: rgba(255,255,255,.10); box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 1px 0 rgba(201,169,97,.08); } .site-header.is-scrolled .header-main { padding: 0.55rem 0; } .site-header.is-scrolled .brand img { max-height: 42px; transition: max-height .25s var(--ease-out); } .brand img { transition: max-height .25s var(--ease-out); } /* Header link refinement */ .primary-nav a { color: var(--text-soft); font-weight: 500; transition: color .25s var(--ease-out); } .primary-nav a:hover { color: var(--ink); } .primary-nav a.is-current { color: var(--ink); } .primary-nav a.is-current::after { width: 70%; left: 15%; background: var(--accent); } /* Header CTA button — replace the "quote document" icon with a real CTA */ .header-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.1rem; margin-left: 0.4rem; background: var(--brand); color: #fff !important; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 2px; border: 1px solid var(--brand); transition: all .25s var(--ease-out); } .header-cta:hover { background: var(--brand-dark); border-color: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 12px 28px var(--brand-glow); color: #fff !important; } .header-cta svg { stroke-width: 2; } @media (max-width: 1100px) { .header-cta span { display: none; } .header-cta { padding: 0.55rem 0.8rem; } } /* The announce bar gets a subtle gradient */ .announce-bar { background: linear-gradient(90deg, #050403 0%, #0a0807 50%, #050403 100%); border-bottom: 1px solid rgba(201,169,97,.10); } .announce-bar strong { color: var(--accent); font-weight: 600; letter-spacing: 0.18em; } /* ========================================================================== v2 — Sticky MOBILE BOTTOM NAV (refined, with centre raised CTA) ========================================================================== */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: rgba(10,8,7,0.92); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); border-top: 1px solid rgba(201,169,97,.14); box-shadow: 0 -8px 28px rgba(0,0,0,.5); padding: 0.4rem 0.4rem; padding-bottom: max(0.4rem, env(safe-area-inset-bottom)); transform: translateY(0); transition: transform .35s var(--ease-out); } .mobile-bottom-nav.is-hidden { transform: translateY(120%); } @media (max-width: 900px) { .mobile-bottom-nav { display: flex; justify-content: space-around; align-items: center; gap: 0.2rem; } body { padding-bottom: 78px; } .mobile-bottom-nav .mbn-item { flex: 1; } } .mbn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.22rem; padding: 0.5rem 0.3rem; color: var(--text-muted); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; background: none; border: none; cursor: pointer; border-radius: 8px; transition: color .2s var(--ease-out), background .2s var(--ease-out), transform .2s var(--ease-out); position: relative; } .mbn-item svg { transition: transform .2s var(--ease-out); } .mbn-item:hover, .mbn-item:focus { color: var(--accent); } .mbn-item.is-active { color: var(--accent); } .mbn-item.is-active::before { content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px; background: var(--accent); border-radius: 0 0 4px 4px; } .mbn-item.is-active svg { transform: translateY(-1px); } /* Centre raised CTA item */ .mbn-cta { display: none; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: -22px; background: var(--brand); color: #fff; border-radius: 50%; font-size: 0; /* hide label visually */ box-shadow: 0 8px 22px rgba(247,1,1,.45), 0 0 0 4px rgba(10,8,7,.92); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); flex: 0 0 auto !important; } .mbn-cta svg { width: 24px; height: 24px; } .mbn-cta:hover, .mbn-cta:focus { background: var(--brand-dark); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 32px rgba(247,1,1,.55), 0 0 0 4px rgba(10,8,7,.92); } @media (max-width: 900px) { .mbn-cta { display: inline-flex; } } /* ========================================================================== v2 — Form polish for light sections ========================================================================== */ .bg-paper input[type="text"], .bg-paper input[type="email"], .bg-paper input[type="tel"], .bg-paper input[type="search"], .bg-paper input[type="number"], .bg-paper textarea, .bg-paper select, .bg-snow input[type="text"], .bg-snow input[type="email"], .bg-snow input[type="tel"], .bg-snow input[type="search"], .bg-snow input[type="number"], .bg-snow textarea, .bg-snow select, .bg-stone input[type="text"], .bg-stone input[type="email"], .bg-stone input[type="tel"], .bg-stone input[type="search"], .bg-stone input[type="number"], .bg-stone textarea, .bg-stone select, .section-light input, .section-light textarea, .section-light select { background: var(--bg-snow); border: 1px solid var(--line-light-strong); color: var(--ink-deep); border-radius: 3px; padding: 0.85rem 1rem; font-family: var(--font); font-size: 0.88rem; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); width: 100%; } .bg-paper input:focus, .bg-snow input:focus, .bg-stone input:focus, .bg-paper textarea:focus, .bg-snow textarea:focus, .bg-stone textarea:focus, .bg-paper select:focus, .bg-snow select:focus, .bg-stone select:focus, .section-light input:focus, .section-light textarea:focus, .section-light select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,169,97,.14); } /* Buttons in light sections — keep brand red */ .bg-paper .btn, .bg-snow .btn, .bg-stone .btn, .section-light .btn { color: #fff; } /* Cards / panels in light sections */ .bg-paper .card, .bg-snow .card, .bg-stone .card, .section-light .card, .section-light .panel { background: var(--bg-snow); border: 1px solid var(--line-light); box-shadow: var(--shadow-paper); border-radius: 4px; } /* ========================================================================== v2 — Polished responsive breakpoints ========================================================================== */ /* Tablet — header simplifies once mobile bottom-nav appears (<900px) */ @media (max-width: 900px) { .header-main { gap: 0.6rem; padding: 0.7rem 0; } .brand img { max-height: 42px; } .icon-btn { width: 38px; height: 38px; } /* Reclaim space: heart + CTA already exist in mobile bottom nav */ .header-icons .icon-btn[aria-label="My Enquiry List"] { display: none; } .header-cta { display: none; } /* Slimmer announce bar */ .announce-bar { font-size: 0.6rem; letter-spacing: 0.12em; padding: 0.35rem 0; } /* Body needs space for fixed bottom nav */ body { padding-bottom: 78px; } } /* Phone — 600px */ @media (max-width: 600px) { .header-main { padding: 0.55rem 0; gap: 0.4rem; } .brand img { max-height: 38px; } .icon-btn { width: 36px; height: 36px; } .header-icons { gap: 0.15rem; } .announce-bar { display: none; } /* reclaim space on small phones */ } /* Small phone — 380px */ @media (max-width: 380px) { .brand img { max-height: 32px; } .icon-btn { width: 34px; height: 34px; } .mbn-item span { font-size: 0.5rem; } .container { padding: 0 0.85rem; } } /* Hero/sections — improved on small screens */ @media (max-width: 600px) { .section-title h2 { font-size: clamp(1.6rem, 5vw + 0.6rem, 2.4rem); } .section-title { margin-bottom: 2rem; } .container { padding: 0 1rem; } } /* Section padding utility — used by .bg-paper sections */ .section-pad { padding: clamp(2rem, 4vw, 3.6rem) 0; } .section-pad-sm { padding: clamp(1.4rem, 3vw, 2.4rem) 0; } .section-pad-lg { padding: clamp(3rem, 6vw, 5rem) 0; } /* Cart-summary / contact-info / quote-row — light-section panel polish */ .bg-paper .cart-summary, .bg-snow .cart-summary, .bg-stone .cart-summary, .bg-paper .contact-info, .bg-snow .contact-info, .bg-stone .contact-info, .section-light .cart-summary, .section-light .contact-info { background: var(--bg-snow); border: 1px solid var(--line-light); box-shadow: var(--shadow-paper); border-radius: 4px; padding: 1.6rem; color: var(--ink-deep); } .bg-paper .cart-summary h3, .bg-snow .cart-summary h3, .bg-stone .cart-summary h3, .bg-paper .contact-info h3, .bg-snow .contact-info h3, .bg-stone .contact-info h3 { color: var(--ink-deep); font-size: 0.7rem; letter-spacing: 0.22em; margin: 1.2rem 0 0.5rem; } .bg-paper .cart-summary h3:first-child, .bg-paper .contact-info h3:first-child { margin-top: 0; } .bg-paper .quote-row, .bg-snow .quote-row, .bg-stone .quote-row { border-bottom: 1px solid var(--line-light); padding: 0.8rem 0; } .bg-paper .quote-row:last-child { border-bottom: 0; } .bg-paper .text-muted, .bg-snow .text-muted, .bg-stone .text-muted, .section-light .text-muted { color: var(--ink-muted); } /* Field labels in light sections */ .bg-paper .field label, .bg-snow .field label, .bg-stone .field label, .section-light .field label { color: var(--ink-soft); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 0.45rem; } /* Page banner that sits above a light section — keep it dark for contrast */ .page-banner + .bg-paper, .page-banner + .section-light { margin-top: 0; } /* Outline buttons in light sections — invert to dark border */ .bg-paper .btn-outline, .bg-snow .btn-outline, .bg-stone .btn-outline, .section-light .btn-outline { background: transparent; color: var(--ink-deep); border: 1.5px solid var(--ink-deep); } .bg-paper .btn-outline:hover, .bg-snow .btn-outline:hover, .bg-stone .btn-outline:hover, .section-light .btn-outline:hover { background: var(--ink-deep); color: #fff; } /* Ghost buttons in light sections — much stronger than the soft bronze default so "Book A Viewing", "See In 3D", "View In Virtual Kitchen" stay visible */ .bg-paper .btn-ghost, .bg-snow .btn-ghost, .bg-stone .btn-ghost, .bg-mist .btn-ghost, .section-light .btn-ghost { color: var(--ink-deep); border-color: var(--ink-deep); border-width: 1.5px; background: transparent; } .bg-paper .btn-ghost:hover, .bg-snow .btn-ghost:hover, .bg-stone .btn-ghost:hover, .bg-mist .btn-ghost:hover, .section-light .btn-ghost:hover { background: var(--ink-deep); color: #fff; border-color: var(--ink-deep); } /* Card "View Slab" button on light grids — dark on cream */ .bg-paper .card-atc-btn, .bg-snow .card-atc-btn, .bg-stone .card-atc-btn, .section-light .card-atc-btn { color: var(--ink-deep); border-color: var(--ink-deep); background: transparent; } .bg-paper .card-atc-btn:hover:not([disabled]), .bg-snow .card-atc-btn:hover:not([disabled]), .bg-stone .card-atc-btn:hover:not([disabled]), .section-light .card-atc-btn:hover:not([disabled]) { background: var(--brand); border-color: var(--brand); color: #fff; } /* Filter chips in light sidebar — much higher contrast */ .bg-paper .filter-chip, .bg-snow .filter-chip, .bg-stone .filter-chip, .section-light .filter-chip { color: var(--ink-deep); border: 1px solid var(--line-light-strong); background: var(--bg-snow); } .bg-paper .filter-chip:hover, .bg-snow .filter-chip:hover, .bg-stone .filter-chip:hover, .section-light .filter-chip:hover { border-color: var(--ink-deep); color: var(--ink-deep); } .bg-paper .filter-chip.is-active, .bg-snow .filter-chip.is-active, .bg-stone .filter-chip.is-active, .section-light .filter-chip.is-active { background: var(--brand); color: #fff; border-color: var(--brand); } /* Gallery thumbnails (product page) on cream — visible borders */ .bg-paper .gallery-thumb, .bg-snow .gallery-thumb, .bg-stone .gallery-thumb, .section-light .gallery-thumb { background: var(--bg-snow); border: 1px solid var(--line-light); } .bg-paper .gallery-thumb.active, .bg-paper .gallery-thumb:hover, .bg-snow .gallery-thumb.active, .bg-snow .gallery-thumb:hover, .bg-stone .gallery-thumb.active, .bg-stone .gallery-thumb:hover { border-color: var(--ink-deep); opacity: 1; } /* "Save to Enquiry List" link button on cream */ .bg-paper .btn-link-save, .bg-snow .btn-link-save, .bg-stone .btn-link-save, .section-light .btn-link-save { color: var(--ink-soft); } .bg-paper .btn-link-save:hover, .bg-paper .btn-link-save.is-saved, .bg-paper .btn-link-save.active, .bg-snow .btn-link-save:hover, .bg-snow .btn-link-save.is-saved, .bg-snow .btn-link-save.active, .bg-stone .btn-link-save:hover, .bg-stone .btn-link-save.is-saved, .bg-stone .btn-link-save.active, .section-light .btn-link-save:hover, .section-light .btn-link-save.is-saved, .section-light .btn-link-save.active { color: var(--brand); } /* Product card body text on cream — readable */ .bg-paper .product-card h3, .bg-snow .product-card h3, .bg-stone .product-card h3, .section-light .product-card h3 { color: var(--ink-deep); } .bg-paper .product-card .card-code, .bg-snow .product-card .card-code, .bg-stone .product-card .card-code, .section-light .product-card .card-code { color: var(--ink-muted); } .bg-paper .product-card .card-cat, .bg-snow .product-card .card-cat, .bg-stone .product-card .card-cat, .section-light .product-card .card-cat { color: var(--ink-muted); } .bg-paper .product-card .card-spec span, .bg-snow .product-card .card-spec span, .bg-stone .product-card .card-spec span, .section-light .product-card .card-spec span { color: var(--ink-soft); } /* Page-banner pieces visible on cream when product-detail uses bg-paper */ .bg-paper .breadcrumb, .section-light .breadcrumb { color: var(--ink-muted); } .bg-paper .breadcrumb a, .section-light .breadcrumb a { color: var(--ink-soft); } .bg-paper .breadcrumb a:hover, .section-light .breadcrumb a:hover { color: var(--brand); } /* Sort/count toolbar */ .bg-paper .shop-toolbar .count, .bg-snow .shop-toolbar .count, .bg-stone .shop-toolbar .count, .section-light .shop-toolbar .count { color: var(--ink-soft); } .bg-paper .shop-toolbar, .bg-snow .shop-toolbar, .bg-stone .shop-toolbar, .section-light .shop-toolbar { border-bottom-color: var(--line-light); } /* ========================================================================== CMS / editorial article — long-form pages (Inspiration, Trade, Showroom, etc.) ========================================================================== */ .cms-article { max-width: 760px; margin: 0 auto; color: var(--ink-deep); font-size: 1rem; line-height: 1.8; } .cms-article > * + * { margin-top: 1rem; } .cms-article h2 { font-family: var(--font-display); text-transform: none; font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); letter-spacing: 0.005em; margin: 2.6rem 0 0.8rem; color: var(--ink-deep); line-height: 1.2; } .cms-article h2:first-child { margin-top: 0; } .cms-article h3 { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--brand); margin: 2rem 0 0.6rem; } .cms-article p { margin: 0 0 1rem; color: var(--ink-soft); } .cms-article p.page-intro { font-family: var(--font-display); font-style: italic; font-size: 1.18rem; line-height: 1.6; color: var(--ink-deep); margin-bottom: 1.8rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line-light); } .cms-article ul, .cms-article ol { margin: 0.6rem 0 1.4rem; padding-left: 1.4rem; color: var(--ink-soft); } .cms-article ul li, .cms-article ol li { margin: 0.5rem 0; padding-left: 0.3rem; } .cms-article ul li::marker { color: var(--brand); } .cms-article ul.benefit-list li { list-style: none; position: relative; padding-left: 1.6rem; } .cms-article ul.benefit-list li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 700; } .cms-article a { color: var(--ink-deep); border-bottom: 1px solid var(--line-light-strong); transition: color .2s var(--ease-out), border-color .2s var(--ease-out); } .cms-article a:hover { color: var(--brand); border-bottom-color: var(--brand); } .cms-article strong { color: var(--ink-deep); font-weight: 600; } .cms-article em { font-family: var(--font-display); font-style: italic; } .cms-article hr { border: 0; border-top: 1px solid var(--line-light); margin: 2.4rem 0; } /* Buttons inside CMS articles — pop out of the inline link styling */ .cms-article a.btn, .cms-article a.btn-outline { display: inline-block; border-bottom: 1.5px solid; margin-top: 0.6rem; padding: 0.85rem 1.4rem; font-family: var(--font); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; border-radius: var(--radius); text-decoration: none; } .cms-article a.btn { background: var(--brand); color: #fff; border: 1.5px solid var(--brand); } .cms-article a.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; } .cms-article a.btn-outline { background: transparent; color: var(--ink-deep); border: 1.5px solid var(--ink-deep); } .cms-article a.btn-outline:hover { background: var(--ink-deep); color: #fff; border-color: var(--ink-deep); } @media (max-width: 600px) { .cms-article { font-size: 0.95rem; } .cms-article h2 { font-size: 1.5rem; margin-top: 2rem; } .cms-article p.page-intro { font-size: 1.05rem; } } /* Empty state in light sections */ .bg-paper .empty-state, .bg-snow .empty-state, .bg-stone .empty-state { background: var(--bg-snow); border: 1px solid var(--line-light); border-radius: 4px; padding: 3rem 2rem; text-align: center; box-shadow: var(--shadow-paper); } /* Flash messages — slightly tinted for light bg */ .bg-paper .flash, .bg-snow .flash, .bg-stone .flash { border-radius: 3px; } .bg-paper .flash-success { background: #e6f4eb; color: #1f6b40; border: 1px solid #c6e3d2; } .bg-paper .flash-error { background: #fde8e8; color: #8a1c1c; border: 1px solid #f3c5c5; } /* Section title inside light sections — keep premium gold accent */ .bg-paper .section-title h2::after, .bg-snow .section-title h2::after, .bg-stone .section-title h2::after, .section-light .section-title h2::after { background: var(--brand); } .bg-paper .section-title .section-num, .bg-snow .section-title .section-num, .bg-stone .section-title .section-num, .section-light .section-title .section-num { color: rgba(26,23,20,0.06); } /* Social row in light sections */ .bg-paper .social-row a, .bg-snow .social-row a, .bg-stone .social-row a { border-color: var(--line-light-strong); color: var(--ink-deep); } /* Newsletter form within light section override */ .bg-paper .newsletter-form input, .bg-snow .newsletter-form input, .bg-stone .newsletter-form input { background: var(--bg-snow); } /* ========================================================================== v3 — Admin Pro modules (SEO, Snippets, Activity, Diagnostic, Users, Backup, Redirects) ========================================================================== */ /* Sidebar divider label */ .admin-nav-divider { font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); padding: 1.4rem 1.2rem 0.4rem; border-top: 1px solid var(--border); margin-top: 0.4rem; } .admin-nav-divider:first-child { border-top: 0; margin-top: 0; } /* Toolbar with KPIs */ .admin-toolbar { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0; margin-bottom: 1.2rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .seo-stats { display: flex; gap: 0.6rem; flex-wrap: wrap; } .kpi { display: inline-flex; flex-direction: column; padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-cream); min-width: 96px; } .kpi-num { font-size: 1.2rem; font-weight: 600; color: var(--ink); line-height: 1.1; } .kpi-label { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.2rem; } /* SEO list — score / length pills */ .seo-score-pill, .seo-len-pill { display: inline-block; min-width: 28px; padding: 0.18rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-align: center; margin-right: 0.4rem; } .seo-score-pill.good, .seo-len-pill.good { background: rgba(76,175,122,.15); color: #4caf7a; } .seo-score-pill.ok { background: rgba(216,164,75,.15); color: #d8a44b; } .seo-score-pill.warn, .seo-len-pill.warn { background: rgba(255,93,93,.12); color: #ff8a8a; } .seo-score-pill.bad { background: rgba(255,255,255,.06); color: var(--text-muted); } /* SEO edit page */ .seo-edit-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; } @media (max-width: 1100px) { .seo-edit-grid { grid-template-columns: 1fr; } } .seo-fields .field { margin-bottom: 1.2rem; } .seo-counter { font-size: 0.66rem; letter-spacing: 0.14em; font-weight: 700; margin-left: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text-muted); } .seo-counter.good { background: rgba(76,175,122,.18); color: #4caf7a; } .seo-counter.warn { background: rgba(216,164,75,.18); color: #d8a44b; } .seo-counter.bad { background: rgba(255,93,93,.16); color: #ff8a8a; } .seo-sidebar { background: var(--bg-cream); border: 1px solid var(--border); border-radius: 4px; padding: 1.4rem; position: sticky; top: 90px; } .seo-sidebar h4 { font-size: 0.7rem; letter-spacing: 0.22em; color: var(--accent); margin: 0 0 0.6rem; } .seo-score-card { text-align: center; margin-bottom: 1.6rem; } .seo-score-ring { width: 110px; height: 110px; margin: 0 auto 0.8rem; border-radius: 50%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, var(--bg-cream) 70%, transparent 0 100%), conic-gradient(from -90deg, #4caf7a 0% calc(var(--p, 0) * 1%), rgba(255,255,255,.1) 0 100%); position: relative; } .seo-score-ring[data-score]::after { content: ""; position: absolute; inset: 0; } .seo-score-num { font-size: 1.8rem; font-weight: 700; color: var(--ink); line-height: 1; } .seo-score-label { font-size: 0.66rem; color: var(--text-muted); letter-spacing: 0.16em; } .seo-checklist { margin-bottom: 1.6rem; } .seo-checklist ul { list-style: none; padding: 0; margin: 0; } .seo-checklist li { padding: 0.4rem 0 0.4rem 1.6rem; position: relative; font-size: 0.78rem; color: var(--text-muted); border-bottom: 1px solid var(--border); } .seo-checklist li:last-child { border-bottom: 0; } .seo-checklist li::before { content: "○"; position: absolute; left: 0; top: 0.4rem; color: var(--text-muted); } .seo-checklist li.done { color: var(--ink); } .seo-checklist li.done::before { content: "●"; color: #4caf7a; } .seo-preview .serp-card { border: 1px solid var(--border); border-radius: 3px; background: var(--bg); padding: 0.85rem; } .serp-url { font-size: 0.7rem; color: #4caf7a; word-break: break-all; } .serp-title { font-size: 1rem; color: #8ab4f8; margin: 0.2rem 0; font-weight: 500; } .serp-desc { font-size: 0.78rem; color: var(--text-soft); line-height: 1.4; } /* Set the conic-gradient progress from JS-applied [data-score] */ .seo-score-ring { --p: 0; } /* Snippets / Users grid layout (form + list/aside) */ .admin-grid-shell { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; } @media (max-width: 1100px) { .admin-grid-shell { grid-template-columns: 1fr; } } .snippet-card { border: 1px solid var(--border); background: var(--bg-cream); padding: 0.8rem 0.9rem; border-radius: 4px; margin-bottom: 0.6rem; } .snippet-card.is-inactive { opacity: 0.55; } .snippet-card a { color: var(--ink); } .snippet-card a:hover { color: var(--accent); } .snippet-meta { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.4rem 0; } .snippet-meta .status-pill { font-size: 0.6rem; padding: 0.12rem 0.4rem; } .snippet-actions { display: flex; gap: 0.7rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .snippet-actions a:hover { color: var(--accent); } /* Verify gate (sudo-style password prompt) */ .verify-gate { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .verify-card { width: 100%; max-width: 420px; background: var(--bg-cream); border: 1px solid var(--border); border-radius: 4px; padding: 2.4rem 2rem; text-align: center; box-shadow: 0 18px 60px rgba(0,0,0,.45); } .verify-icon { font-size: 2.2rem; margin-bottom: 0.8rem; filter: grayscale(0.2); } .verify-card h2 { font-family: var(--font-display); text-transform: none; font-weight: 500; font-size: 1.5rem; letter-spacing: 0.005em; margin: 0 0 0.6rem; } .verify-card .field { margin: 1.4rem 0 1rem; text-align: left; } /* Diagnostic */ .diag-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.4rem; } @media (max-width: 1100px) { .diag-grid { grid-template-columns: 1fr; } } .diag-card { background: var(--bg-cream); border: 1px solid var(--border); border-radius: 4px; padding: 1.2rem; } .diag-card h3 { font-size: 0.78rem; letter-spacing: 0.22em; color: var(--accent); margin: 0 0 0.8rem; text-transform: uppercase; } .diag-list { list-style: none; padding: 0; margin: 0; font-size: 0.82rem; } .diag-list li { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); } .diag-fix-btn { padding: 0.3rem 0.7rem !important; font-size: 0.62rem !important; letter-spacing: 0.14em !important; white-space: nowrap; } .diag-fix-all-btn { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--brand) 0%, #d8a44b 100%); border: 0; color: #fff !important; padding: 0.7rem 1.2rem; font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; border-radius: 3px; box-shadow: 0 8px 20px rgba(247,1,1,.25); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); } .diag-fix-all-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(247,1,1,.4); color: #fff !important; } /* ========================================================================== v3 — Admin LIGHT theme (default) + admin theme-toggle button ========================================================================== */ /* Theme-toggle button */ .admin-theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--ink); cursor: pointer; transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out); margin-right: 0.5rem; } .admin-theme-toggle:hover { background: rgba(247,1,1,.08); border-color: rgba(247,1,1,.4); transform: rotate(20deg); } /* ----- LIGHT THEME — default for admin ----- */ body.admin-body.admin-theme-light { /* Surfaces */ --bg: #f6f1e6; --bg-warm: #f6f1e6; --bg-alt: #ece7dc; --bg-cream: #ffffff; --bg-raised: #ffffff; --bg-hi: #faf6ee; /* Ink */ --ink: #1a1714; --text: #1a1714; --text-soft: #4a4239; --text-muted: #857c70; /* Lines */ --border: rgba(26,23,20,.10); --border-strong:rgba(26,23,20,.18); --line: rgba(138,106,53,.20); /* Accent — deeper bronze for cream contrast */ --accent: #8a6a35; --accent-dark: #6e5328; --gold: #8a6a35; /* Shadows */ --shadow-sm: 0 1px 2px rgba(40,30,20,.06); --shadow: 0 2px 8px rgba(40,30,20,.06), 0 12px 32px rgba(40,30,20,.08); --shadow-lg: 0 4px 12px rgba(40,30,20,.06), 0 28px 70px rgba(40,30,20,.14); background: var(--bg); color: var(--ink); } /* Sidebar in light mode */ .admin-theme-light .admin-sidebar { background: #ffffff; border-right: 1px solid var(--border); box-shadow: 1px 0 0 rgba(0,0,0,.02); } .admin-theme-light .admin-brand { border-bottom: 1px solid var(--border); } .admin-theme-light .admin-brand span { color: var(--text-muted); } .admin-theme-light .admin-nav-link { color: var(--text-soft); border-left: 3px solid transparent; } .admin-theme-light .admin-nav-link:hover { background: rgba(0,0,0,.03); color: var(--ink); } .admin-theme-light .admin-nav-link.is-active { background: rgba(247,1,1,.06); color: var(--brand); border-left-color: var(--brand); } .admin-theme-light .admin-nav-divider { color: var(--accent); border-top: 1px solid var(--border); } .admin-theme-light .admin-sidebar-foot { border-top: 1px solid var(--border); background: #fafaf6; } .admin-theme-light .admin-sidebar-foot a { color: var(--text-soft); } .admin-theme-light .admin-sidebar-foot a:hover { color: var(--brand); } /* Topbar in light mode */ .admin-theme-light .admin-topbar { background: #ffffff; border-bottom: 1px solid var(--border); } .admin-theme-light .admin-page-title { color: var(--ink); } .admin-theme-light .admin-topbar-meta span { color: var(--text-soft); } .admin-theme-light .admin-mobile-toggle { color: var(--ink); } /* Main content area */ .admin-theme-light .admin-main { background: var(--bg); color: var(--ink); } /* Cards / panels */ .admin-theme-light .admin-card, .admin-theme-light .diag-card, .admin-theme-light .seo-sidebar, .admin-theme-light .snippet-card, .admin-theme-light .verify-card, .admin-theme-light .empty-state { background: var(--bg-cream); border: 1px solid var(--border); color: var(--ink); box-shadow: var(--shadow-sm); } /* KPIs */ .admin-theme-light .kpi { background: var(--bg-cream); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .admin-theme-light .kpi-num { color: var(--ink); } .admin-theme-light .kpi-label { color: var(--text-muted); } /* Tables */ .admin-theme-light .admin-table { background: var(--bg-cream); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .admin-theme-light .admin-table thead { background: #faf6ee; border-bottom: 1px solid var(--border); } .admin-theme-light .admin-table th { color: var(--text-soft); } .admin-theme-light .admin-table td { color: var(--ink); border-bottom: 1px solid var(--border); } .admin-theme-light .admin-table tr:hover td { background: #faf6ee; } .admin-theme-light .admin-table code, .admin-theme-light code { background: rgba(0,0,0,.04); color: var(--ink); padding: 1px 5px; border-radius: 2px; font-family: Consolas, Monaco, monospace; font-size: .82em; } /* Status pills */ .admin-theme-light .status-pill { background: rgba(0,0,0,.05); color: var(--text-soft); border: 1px solid var(--border); } /* Inputs */ .admin-theme-light input[type="text"], .admin-theme-light input[type="email"], .admin-theme-light input[type="tel"], .admin-theme-light input[type="search"], .admin-theme-light input[type="number"], .admin-theme-light input[type="password"], .admin-theme-light input[type="url"], .admin-theme-light input[type="date"], .admin-theme-light textarea, .admin-theme-light select { background: #ffffff; border: 1px solid var(--border-strong); color: var(--ink); border-radius: 3px; } .admin-theme-light input:focus, .admin-theme-light textarea:focus, .admin-theme-light select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,106,53,.16); } .admin-theme-light .field label, .admin-theme-light label { color: var(--text-soft); } /* Buttons (outline variant in light mode) */ .admin-theme-light .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .admin-theme-light .btn-outline:hover { background: var(--ink); color: #fff; } /* Diagnostic specifics */ .admin-theme-light .diag-list li { border-bottom: 1px solid var(--border); } .admin-theme-light .diag-detail { color: var(--text-muted); } .admin-theme-light .diag-list li.good .diag-icon { color: #2f8a4d; } .admin-theme-light .diag-list li.warn .diag-icon { color: #b07f1d; } .admin-theme-light .diag-list li.bad .diag-icon { color: #c43a3a; } /* SEO score / length pills in light mode */ .admin-theme-light .seo-score-pill.good, .admin-theme-light .seo-len-pill.good { background: #d6efe0; color: #1f6b40; } .admin-theme-light .seo-score-pill.ok { background: #fce8c4; color: #7c5a14; } .admin-theme-light .seo-score-pill.warn, .admin-theme-light .seo-len-pill.warn { background: #fdd6d6; color: #8a1c1c; } .admin-theme-light .seo-score-pill.bad { background: rgba(0,0,0,.06); color: var(--text-muted); } /* SERP preview in light mode */ .admin-theme-light .seo-preview .serp-card { background: #ffffff; border: 1px solid var(--border); } .admin-theme-light .serp-url { color: #006621; } .admin-theme-light .serp-title { color: #1a0dab; } .admin-theme-light .serp-desc { color: #4d5156; } /* Migration output / pre tags */ .admin-theme-light pre { background: #1a1714 !important; color: #d8d2c4 !important; } /* Tabs nav */ .admin-theme-light .tabs-nav { border-bottom: 1px solid var(--border); } .admin-theme-light .tabs-nav a { color: var(--text-soft); border-bottom-color: transparent; } .admin-theme-light .tabs-nav a.is-active { color: var(--ink); border-bottom-color: var(--brand); } /* Mobile drawer / sidebar collapse colours unaffected (it's the public site drawer) */ /* Snippet cards in light mode */ .admin-theme-light .snippet-card a { color: var(--ink); } .admin-theme-light .snippet-card a:hover { color: var(--brand); } .admin-theme-light .snippet-actions { color: var(--text-muted); } .admin-theme-light .snippet-actions a:hover { color: var(--brand); } /* SEO score ring in light mode (recompute base under conic) */ .admin-theme-light .seo-score-ring[data-score]:not([data-score="0"]) { background: radial-gradient(closest-side, var(--bg-cream) 70%, transparent 0 100%), conic-gradient(from -90deg, var(--ring-color, #2f8a4d) 0% calc(var(--p) * 1%), rgba(0,0,0,.08) 0 100%); } /* Flash messages — already had light versions via .bg-paper, replicate for admin-light */ .admin-theme-light .flash-success { background: #e6f4eb; color: #1f6b40; border: 1px solid #c6e3d2; border-left: 3px solid #2f8a4d; } .admin-theme-light .flash-error { background: #fde8e8; color: #8a1c1c; border: 1px solid #f3c5c5; border-left: 3px solid #c43a3a; } .admin-theme-light .flash-warn { background: #fcf3df; color: #7c5a14; border: 1px solid #ecd9a8; border-left: 3px solid #d8a44b; } /* SEO sidebar checklist in light mode */ .admin-theme-light .seo-checklist li { color: var(--text-muted); border-bottom: 1px solid var(--border); } .admin-theme-light .seo-checklist li.done { color: var(--ink); } .admin-theme-light .seo-checklist li.done::before { color: #2f8a4d; } /* Bar charts */ .admin-theme-light .bar-chart-col .bar { background: linear-gradient(180deg, var(--brand), var(--accent)); } /* Pagination buttons */ .admin-theme-light .pagination .btn-outline { background: var(--bg-cream); border-color: var(--border-strong); color: var(--ink); } /* Login page in light mode (if user toggles before logging out) */ .admin-theme-light .admin-login-main { background: var(--bg); } .admin-theme-light .login-card { background: var(--bg-cream); border: 1px solid var(--border); color: var(--ink); } /* --- DARK theme keeps existing styling — explicit class to mirror cookie state */ body.admin-body.admin-theme-dark { background: #0f0d0c; color: #f5f2ed; } .diag-list li:last-child { border-bottom: 0; } .diag-icon { text-align: center; font-weight: 700; } .diag-list li.good .diag-icon { color: #4caf7a; } .diag-list li.warn .diag-icon { color: #d8a44b; } .diag-list li.bad .diag-icon { color: #ff5d5d; } .diag-detail { color: var(--text-muted); font-size: 0.74rem; font-family: monospace; text-align: right; } /* Inline JS hook: set conic-gradient progress on the score ring */ .seo-score-ring[data-score="0"] { --p: 0; } .seo-score-ring[data-score]:not([data-score="0"]) { background: radial-gradient(closest-side, var(--bg-cream) 70%, transparent 0 100%), conic-gradient(from -90deg, var(--ring-color, #4caf7a) 0% calc(var(--p) * 1%), rgba(255,255,255,.1) 0 100%); } /* ========================================================================== v3 — Modern animated burger (asymmetric 3-line → ×) ========================================================================== */ .icon-btn-burger { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; cursor: pointer; transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out); padding: 0; } .icon-btn-burger:hover { background: rgba(247,1,1,0.12); border-color: rgba(247,1,1,0.45); transform: scale(1.04); } .icon-btn-burger:active { transform: scale(0.96); } .burger { position: relative; width: 18px; height: 14px; display: inline-flex; flex-direction: column; justify-content: space-between; } .burger > span { display: block; height: 1.6px; background: currentColor; border-radius: 2px; transform-origin: center; transition: transform .35s var(--ease-out), opacity .25s var(--ease-out), width .35s var(--ease-out), top .35s var(--ease-out), bottom .35s var(--ease-out); position: relative; } /* Asymmetric resting state — modern luxe accent: top full, mid 70%, bottom 45% */ .burger > span:nth-child(1) { width: 100%; align-self: flex-start; } .burger > span:nth-child(2) { width: 70%; align-self: flex-end; } .burger > span:nth-child(3) { width: 45%; align-self: flex-start; } /* Hover — lines settle to equal length */ .icon-btn-burger:hover .burger > span:nth-child(2) { width: 100%; } .icon-btn-burger:hover .burger > span:nth-child(3) { width: 100%; } /* Open state (drawer is open) — morph to × */ body.is-drawer-open .icon-btn-burger, .icon-btn-burger[aria-expanded="true"] { background: rgba(247,1,1,0.18); border-color: rgba(247,1,1,0.55); } body.is-drawer-open .icon-btn-burger .burger > span:nth-child(1), .icon-btn-burger[aria-expanded="true"] .burger > span:nth-child(1) { width: 100%; transform: translateY(6px) rotate(45deg); } body.is-drawer-open .icon-btn-burger .burger > span:nth-child(2), .icon-btn-burger[aria-expanded="true"] .burger > span:nth-child(2) { opacity: 0; width: 0; } body.is-drawer-open .icon-btn-burger .burger > span:nth-child(3), .icon-btn-burger[aria-expanded="true"] .burger > span:nth-child(3) { width: 100%; transform: translateY(-6px) rotate(-45deg); } /* Tighter mobile header spacing (icons sit closer together) */ @media (max-width: 900px) { .header-icons { gap: 0.35rem; } .icon-btn { width: 40px; height: 40px; } .icon-btn-burger { width: 42px; height: 42px; } } @media (max-width: 600px) { .header-icons { gap: 0.25rem; } .icon-btn { width: 38px; height: 38px; } .icon-btn-burger { width: 40px; height: 40px; } .burger { width: 16px; height: 12px; } .burger > span { height: 1.5px; } } /* ===== New Arrivals slider ===== */ .arrivals-slider { position: relative; margin-top: 1.5rem; } .arr-viewport { overflow: hidden; } .arr-track { display: flex; gap: 1.25rem; transition: transform 0.7s cubic-bezier(.22,.61,.36,1); will-change: transform; } .arr-slide { flex: 0 0 calc((100% - 3.75rem) / 4); min-width: 0; } .arr-slide .product-card { width: 100%; } .arr-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 6px 22px rgba(0,0,0,.12); font-size: 1.6rem; line-height: 1; color: #111; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; transition: background .25s, color .25s, transform .25s; } .arr-arrow:hover { background: var(--accent, #c8102e); color: #fff; transform: translateY(-50%) scale(1.06); } .arr-arrow.prev { left: -22px; } .arr-arrow.next { right: -22px; } .arr-arrow:disabled { opacity: 0.35; cursor: default; } .arr-arrow:disabled:hover { background: #fff; color: #111; transform: translateY(-50%); } .arr-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1.25rem; } .arr-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.18); cursor: pointer; transition: background .25s, transform .25s; } .arr-dots span.is-active { background: var(--accent, #c8102e); transform: scale(1.25); } @media (max-width: 1024px) { .arr-slide { flex: 0 0 calc((100% - 2.5rem) / 3); } .arr-track { gap: 1.25rem; } .arr-arrow.prev { left: -8px; } .arr-arrow.next { right: -8px; } } @media (max-width: 720px) { .arr-slide { flex: 0 0 calc((100% - 1rem) / 2); } .arr-track { gap: 1rem; } .arr-arrow { width: 38px; height: 38px; font-size: 1.3rem; } .arr-arrow.prev { left: 4px; } .arr-arrow.next { right: 4px; } } @media (max-width: 480px) { .arr-slide { flex: 0 0 100%; } } /* ===== Sample-request form (WP CF7-style layout) ===== */ .kss-form { max-width: 720px; margin: 0 auto; background: #fff; padding: 2.5rem 2.25rem; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 6px 28px rgba(0,0,0,.06); } .kss-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .kss-field { display: flex; flex-direction: column; margin-bottom: 1.1rem; } .kss-field label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #555; margin-bottom: .45rem; font-weight: 600; } .kss-field label .req { color: var(--accent, #c8102e); } .kss-field input, .kss-field textarea, .kss-field select { width: 100%; padding: .85rem 1rem; font: inherit; color: #111; border: 1px solid #d8d8d8; background: #fafafa; border-radius: 2px; transition: border-color .2s, background .2s, box-shadow .2s; } .kss-field input:focus, .kss-field textarea:focus, .kss-field select:focus { outline: none; border-color: var(--accent, #c8102e); background: #fff; box-shadow: 0 0 0 3px rgba(200,16,46,.08); } .kss-field textarea { resize: vertical; min-height: 92px; font-family: inherit; } .kss-form-actions { margin-top: 1.5rem; text-align: center; } .kss-form-actions .btn { min-width: 220px; } @media (max-width: 640px) { .kss-form { padding: 1.6rem 1.2rem; } .kss-form-row { grid-template-columns: 1fr; gap: 0; } } /* ===== Header CTA dropdown (Request → Sample / Booking) ===== */ .header-cta-wrap { position: relative; } .header-cta-wrap .header-cta { cursor: pointer; } .cta-caret { margin-left: .15rem; transition: transform .2s; opacity: .85; } .header-cta-wrap.is-open .cta-caret { transform: rotate(180deg); } .header-cta-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: .35rem; border-radius: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; } .header-cta-wrap.is-open .header-cta-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .header-cta-menu a { display: block; padding: .8rem 1rem; text-decoration: none; color: #111; border-radius: 4px; transition: background .15s; } .header-cta-menu a:hover { background: #f4f4f4; } .header-cta-menu a strong { display: block; font-size: .82rem; letter-spacing: .04em; font-weight: 600; } .header-cta-menu a small { display: block; font-size: .68rem; color: #888; margin-top: .15rem; letter-spacing: .04em; } /* ===== KSS-style request forms (Booking & Sample) ===== */ .kss-form-section { padding: 4rem 0 5rem; background: #fafafa; } .kss-form-card { max-width: 820px; margin: 0 auto; background: #fff; padding: 3rem 2.5rem; border-radius: 6px; box-shadow: 0 8px 36px rgba(0,0,0,.07); border: 1px solid rgba(0,0,0,.05); } .kss-form-title { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 500; text-align: center; margin: 0 0 .35rem; } .kss-form-title .accent { color: var(--accent, #c8102e); font-style: italic; font-weight: 600; } .kss-form-sub { text-align: center; color: #666; font-size: .92rem; margin: 0 0 2.2rem; } .kss-form-error { background: #fdecec; color: #b00020; border-left: 3px solid #b00020; padding: .85rem 1rem; margin-bottom: 1.5rem; font-size: .82rem; border-radius: 3px; } .kss-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .kss-field { display: flex; flex-direction: column; margin-bottom: 1.1rem; } .kss-field label { font-size: .8rem; color: #444; margin-bottom: .5rem; font-weight: 500; } .kss-field label .req, .kss-checkbox .req { color: var(--accent, #c8102e); margin-right: .15rem; } .kss-field input, .kss-field textarea { width: 100%; padding: .95rem 1.1rem; font: inherit; color: #111; border: 1px solid #e3e3e3; background: #fff; border-radius: 999px; transition: border-color .2s, box-shadow .2s; } .kss-field textarea { border-radius: 14px; resize: vertical; min-height: 110px; font-family: inherit; } .kss-field input:focus, .kss-field textarea:focus { outline: none; border-color: var(--accent, #c8102e); box-shadow: 0 0 0 3px rgba(200,16,46,.08); } .kss-checkbox { display: flex; align-items: flex-start; gap: .55rem; font-size: .82rem; color: #555; margin: 1rem 0 1.5rem; cursor: pointer; } .kss-checkbox input[type=checkbox] { margin-top: .2rem; accent-color: var(--accent, #c8102e); } .kss-checkbox a { color: var(--accent, #c8102e); } .kss-form-actions { text-align: left; } .kss-btn-send { background: var(--accent, #c8102e); color: #fff; border: 0; padding: .95rem 2.6rem; border-radius: 999px; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; font-weight: 600; } .kss-btn-send:hover { background: #a30d25; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(200,16,46,.28); } @media (max-width: 640px) { .kss-form-card { padding: 2rem 1.4rem; } .kss-form-row { grid-template-columns: 1fr; gap: 0; } } /* ===== Thank-you pages ===== */ .kss-thankyou-section { padding: 5rem 0 6rem; background: #fafafa; } .kss-thankyou-card { max-width: 720px; margin: 0 auto; background: #fff; padding: 3.5rem 2.5rem; border-radius: 6px; box-shadow: 0 8px 36px rgba(0,0,0,.07); border: 1px solid rgba(0,0,0,.05); text-align: center; } .kss-thankyou-icon { color: var(--accent, #c8102e); margin-bottom: 1rem; display: inline-flex; } .kss-thankyou-card h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 500; margin: .5rem 0 1rem; } .kss-thankyou-card p { color: #555; font-size: 1rem; max-width: 540px; margin: 0 auto 1.5rem; } .kss-thankyou-ref { display: inline-block; padding: .55rem 1.2rem; background: #f4f4f4; border-radius: 999px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #444; margin-bottom: 1.8rem; } .kss-thankyou-ref strong { color: var(--accent, #c8102e); margin-left: .35rem; letter-spacing: .04em; } .kss-thankyou-steps { list-style: none; padding: 1.4rem 1.6rem; margin: 0 auto 2rem; max-width: 540px; background: #fafafa; border-radius: 6px; text-align: left; } .kss-thankyou-steps li { padding: .55rem 0; font-size: .9rem; color: #444; border-bottom: 1px solid rgba(0,0,0,.05); } .kss-thankyou-steps li:last-child { border-bottom: 0; } .kss-thankyou-steps strong { color: #111; margin-right: .35rem; } .kss-thankyou-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; } @media (max-width: 640px) { .kss-thankyou-card { padding: 2.2rem 1.4rem; } } /* ===== Stone Collections grid (homepage) ===== */ .stone-collections-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.5rem; } .stone-collection-card { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: 4px; text-decoration: none; color: #fff; background: #1a1a1a; } .scc-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .9s var(--ease-out, cubic-bezier(.22,.61,.36,1)); filter: brightness(.7); } .scc-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7) 100%); } .stone-collection-card:hover .scc-img { transform: scale(1.07); filter: brightness(.85); } .scc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.3rem 1.3rem; z-index: 2; } .scc-body .eyebrow { color: var(--accent, #c8102e); font-size: .65rem; letter-spacing: .22em; } .scc-body h3 { font-size: clamp(1.1rem, .9rem + .5vw, 1.55rem); font-weight: 500; margin: .35rem 0 .35rem; color: #fff; } .scc-meta { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); display: block; margin-bottom: .8rem; } .scc-cta { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; opacity: .9; transition: letter-spacing .25s, opacity .25s; } .stone-collection-card:hover .scc-cta { opacity: 1; letter-spacing: .26em; } @media (max-width: 1000px) { .stone-collections-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stone-collections-grid { grid-template-columns: 1fr; } .stone-collection-card { aspect-ratio: 4/3; } } /* ===== Homepage inline request forms (Sample / Booking tabs) ===== */ .kss-home-forms { padding: 5rem 0 5.5rem; background: #fafafa; border-top: 1px solid rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.04); } .kss-home-forms-head { text-align: center; max-width: 640px; margin: 0 auto 2.2rem; } .kss-home-forms-head .eyebrow { color: var(--accent, #c8102e); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; } .kss-home-forms-head h2 { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 500; margin: .5rem 0 .55rem; line-height: 1.18; } .kss-home-forms-head h2 .accent { color: var(--accent, #c8102e); font-style: italic; font-weight: 600; } .kss-home-forms-head p { color: #666; font-size: .95rem; margin: 0; } .kss-tabs { display: flex; gap: .25rem; max-width: 820px; margin: 0 auto 1.4rem; background: #fff; padding: .35rem; border-radius: 999px; box-shadow: 0 4px 18px rgba(0,0,0,.05); } .kss-tab { flex: 1; padding: .9rem 1.2rem; border: 0; background: transparent; color: #555; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; cursor: pointer; border-radius: 999px; transition: background .25s, color .25s; } .kss-tab:hover { color: #111; } .kss-tab.is-active { background: var(--accent, #c8102e); color: #fff; box-shadow: 0 4px 14px rgba(200,16,46,.25); } .kss-tab-panel { display: none; } .kss-tab-panel.is-active { display: block; animation: kssFadeIn .35s ease; } @keyframes kssFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .kss-home-forms .kss-form-card { box-shadow: 0 10px 38px rgba(0,0,0,.08); } .kss-home-forms .kss-form-card .kss-form-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); } @media (max-width: 640px) { .kss-tabs { flex-direction: column; border-radius: 14px; } .kss-tab { border-radius: 10px; } .kss-home-forms { padding: 3rem 0 3.5rem; } } /* ===== Have-a-Question CTA strip (4 buttons) ===== */ .kss-cta-strip { position: relative; padding: 6rem 0; background-size: cover; background-position: center; background-color: #1a1a1a; overflow: hidden; } .kss-cta-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.7) 100%); } .kss-cta-strip .container { position: relative; z-index: 2; } .kss-cta-panel { max-width: 1080px; margin: 0 auto; padding: 3rem 2rem; background: rgba(20,20,20,.35); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); text-align: center; border-radius: 4px; } .kss-cta-panel h2 { color: #fff; font-weight: 600; text-transform: uppercase; font-size: clamp(1.1rem, .8rem + 1.1vw, 1.7rem); letter-spacing: .04em; line-height: 1.35; margin: 0 0 1.1rem; } .kss-cta-panel h2 span { display: inline-block; font-weight: 400; } .kss-cta-phone { color: #fff; font-size: 1rem; margin: 0 0 1.8rem; letter-spacing: .02em; } .kss-cta-phone a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; transition: border-color .2s, color .2s; } .kss-cta-phone a:hover { color: var(--accent, #c8102e); border-color: var(--accent, #c8102e); } .kss-cta-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: stretch; } .kss-cta-btn { flex: 1 1 200px; max-width: 240px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; padding: .9rem 1.4rem; background: transparent; color: #fff; border: 2px solid var(--accent, #c8102e); border-radius: 999px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; text-decoration: none; text-align: center; line-height: 1.25; transition: background .25s, color .25s, transform .2s, box-shadow .25s; } .kss-cta-btn:hover { background: var(--accent, #c8102e); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(200,16,46,.35); } @media (max-width: 720px) { .kss-cta-strip { padding: 4rem 0; } .kss-cta-panel { padding: 2.2rem 1.2rem; } .kss-cta-buttons { flex-direction: column; align-items: stretch; } .kss-cta-btn { max-width: none; flex: none; width: 100%; } } /* ===== Virtual Kitchen homepage preview ===== */ .vk-home-section { background: #0e0e0e; color: #f1eee7; } .vk-home-section .section-title h2, .vk-home-section .section-title .eyebrow, .vk-home-section .section-title .section-num, .vk-home-section .section-title .section-sub { color: inherit; } .vk-home-section .section-title .eyebrow { color: var(--accent, #c8102e); } .vk-home-section .section-title .section-sub { color: rgba(241,238,231,.7); } .vk-home-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2.5rem; align-items: stretch; margin-top: 2rem; } .vk-home-stage { position: relative; aspect-ratio: 16/10; background: #1a1a1a; border-radius: 4px; overflow: hidden; box-shadow: 0 18px 48px rgba(0,0,0,.5); } .vk-home-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s ease; } .vk-home-stage img.is-loading { opacity: .5; } .vk-home-launch { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; background: rgba(0,0,0,.65); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; backdrop-filter: blur(6px); transition: background .25s, border-color .25s; } .vk-home-launch:hover { background: var(--accent, #c8102e); border-color: var(--accent, #c8102e); } .vk-home-controls { display: flex; flex-direction: column; justify-content: center; } .vk-home-controls .eyebrow { color: var(--accent, #c8102e); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; } .vk-home-controls h3 { font-size: clamp(1.2rem, .95rem + .9vw, 1.7rem); font-weight: 500; line-height: 1.3; margin: .5rem 0 .85rem; color: #fff; } .vk-home-controls p { color: rgba(241,238,231,.7); font-size: .92rem; margin: 0 0 1.5rem; } .vk-home-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-bottom: 1.6rem; } .vk-home-swatch { display: block; padding: 0; background: transparent; border: 2px solid rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; cursor: pointer; transition: border-color .2s, transform .2s; text-align: center; } .vk-home-swatch img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; } .vk-home-swatch span { display: block; padding: .4rem .25rem; font-size: .65rem; letter-spacing: .08em; color: rgba(241,238,231,.85); background: rgba(255,255,255,.04); } .vk-home-swatch:hover { border-color: rgba(255,255,255,.4); transform: translateY(-2px); } .vk-home-swatch.is-active { border-color: var(--accent, #c8102e); box-shadow: 0 6px 18px rgba(200,16,46,.4); } .vk-home-swatch.is-active span { color: #fff; background: rgba(200,16,46,.15); } .vk-home-cta { align-self: flex-start; } @media (max-width: 1024px) { .vk-home-grid { grid-template-columns: 1fr; gap: 1.5rem; } .vk-home-controls { text-align: left; } } @media (max-width: 480px) { .vk-home-swatches { grid-template-columns: repeat(2, 1fr); } } /* ===== Contact + Map block (above footer) ===== */ .kss-contact-block { display: grid; grid-template-columns: 1fr 1fr; background: #181818; color: #f1eee7; border-top: 1px solid #232323; } .kss-contact-info { padding: 4rem 3rem; } .kss-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 760px; margin: 0 auto; } .kss-contact-h { font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; font-weight: 700; margin: 0 0 1rem; } .kss-contact-row { display: flex; align-items: flex-start; gap: .9rem; font-size: .92rem; line-height: 1.55; color: rgba(241,238,231,.78); } .kss-contact-row a { color: rgba(241,238,231,.85); text-decoration: none; transition: color .2s; } .kss-contact-row a:hover { color: var(--accent, #c8102e); } .kss-contact-icon { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--accent, #c8102e); } .kss-contact-sep { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 1.6rem 0; } .kss-contact-socials { display: flex; gap: .55rem; margin-top: .9rem; } .kss-contact-socials a { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); color: #fff; transition: background .2s, border-color .2s, color .2s, transform .2s; } .kss-contact-socials a:hover { background: var(--accent, #c8102e); border-color: var(--accent, #c8102e); color: #fff; transform: translateY(-2px); } .kss-contact-map { position: relative; min-height: 480px; background: #222; } .kss-contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 1024px) { .kss-contact-block { grid-template-columns: 1fr; } .kss-contact-info { padding: 3rem 1.5rem; } .kss-contact-grid { gap: 2.2rem; } .kss-contact-map { min-height: 360px; } } @media (max-width: 640px) { .kss-contact-grid { grid-template-columns: 1fr; gap: 1.6rem; } } /* ===== Footer (WP-style: brand col + 2 link cols) ===== */ .kss-footer { background: linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%) -10px 0/30px 30px, linear-gradient(135deg, transparent 75%, rgba(255,255,255,.025) 75%) -10px 0/30px 30px, #0c0c0c; color: rgba(255,255,255,.72); padding: 4.5rem 0 0; } .kss-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3.5rem; align-items: start; } .kss-footer-brand-col { text-align: center; } .kss-footer-brand img { max-height: 78px; width: auto; display: inline-block; margin-bottom: 1.2rem; } .kss-footer-socials { display: flex; gap: .55rem; justify-content: center; margin: .4rem 0 1.6rem; } .kss-footer-socials a { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent, #c8102e); color: #fff; transition: background .2s, transform .2s; } .kss-footer-socials a:hover { background: #fff; color: var(--accent, #c8102e); transform: translateY(-2px); } .kss-footer-contact { list-style: none; padding: 0; margin: 0; text-align: left; max-width: 320px; margin-inline: auto; } .kss-footer-contact li { display: flex; align-items: flex-start; gap: .7rem; padding: .45rem 0; font-size: .82rem; color: rgba(255,255,255,.7); } .kss-footer-contact li svg { flex: 0 0 14px; margin-top: 4px; color: rgba(255,255,255,.85); } .kss-footer-contact a { color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s; } .kss-footer-contact a:hover { color: var(--accent, #c8102e); } .kss-footer-col h4 { color: #fff; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin: .5rem 0 1.4rem; } .kss-footer-col ul { list-style: none; padding: 0; margin: 0; } .kss-footer-col ul li { padding: .4rem 0; } .kss-footer-col ul a { color: rgba(255,255,255,.7); text-decoration: none; font-size: .88rem; transition: color .2s, padding-left .2s; } .kss-footer-col ul a:hover { color: var(--accent, #c8102e); padding-left: 4px; } .kss-footer-base { margin-top: 3.5rem; padding: 1.4rem 2rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: rgba(255,255,255,.55); max-width: 1280px; margin-inline: auto; } .kss-footer-base-links a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s; } .kss-footer-base-links a:hover { color: var(--accent, #c8102e); } @media (max-width: 1024px) { .kss-footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .kss-footer-brand-col { grid-column: 1 / -1; } } @media (max-width: 640px) { .kss-footer-inner { grid-template-columns: 1fr; text-align: center; gap: 2.2rem; } .kss-footer-col ul a:hover { padding-left: 0; } .kss-footer-base { flex-direction: column; align-items: center; text-align: center; } } /* ===== Announce bar — white variant ===== */ .announce-bar, .announce-bar { /* override the v2 gradient further down the file */ background: #ffffff; color: #1a1a1a; border-bottom: 1px solid rgba(0,0,0,.08); } .announce-bar strong { color: var(--accent, #c8102e); font-weight: 700; letter-spacing: .18em; } .announce-bar a { color: var(--accent, #c8102e); text-decoration: none; border-bottom: 1px solid rgba(200,16,46,.4); padding-bottom: 1px; transition: color .2s, border-color .2s; } .announce-bar a:hover { color: #1a1a1a; border-color: #1a1a1a; } /* ===== Virtual Kitchen home section — responsive fixes ===== */ /* Tone down the giant decorative section-num on the dark VK section so it doesn't visually clash with the heading on smaller viewports. */ .vk-home-section .section-title .section-num { color: rgba(255,255,255,.04); font-size: clamp(4rem, 9vw, 7.5rem); top: -.8rem; } .vk-home-section .section-title { margin-bottom: 2rem; } /* Stage uses object-fit:cover but the SVG scene's intrinsic ratio differs from 16:10 — switch to "contain" so the whole kitchen always fits the stage box, and let the stage flex its height a little. */ .vk-home-stage { aspect-ratio: 16/10; min-height: 320px; } .vk-home-stage img { object-fit: cover; object-position: center; } /* Slightly less aggressive grid ratio so the right column has breathing room on common laptop widths (1280-1440). */ .vk-home-grid { grid-template-columns: 1.35fr 1fr; gap: 2rem; } /* New breakpoint just above 1024 keeps grid side-by-side on big tablets, stacks it sooner on smaller laptops where the right column was being squeezed. */ @media (max-width: 1180px) { .vk-home-grid { grid-template-columns: 1fr; gap: 1.6rem; } .vk-home-stage { aspect-ratio: 16/9; max-height: 540px; } .vk-home-controls { text-align: left; } .vk-home-swatches { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 720px) { .vk-home-section { padding-top: 3rem; padding-bottom: 3rem; } .vk-home-stage { aspect-ratio: 4/3; min-height: 240px; } .vk-home-launch { padding: .5rem .85rem; font-size: .65rem; } .vk-home-swatches { grid-template-columns: repeat(3, 1fr); gap: .5rem; } .vk-home-controls h3 { font-size: 1.15rem; } .vk-home-controls p { font-size: .88rem; } .vk-home-cta { width: 100%; text-align: center; } } @media (max-width: 420px) { .vk-home-swatches { grid-template-columns: repeat(2, 1fr); } .vk-home-swatch span { font-size: .6rem; } } /* ===== VK home stage — inline SVG variant ===== */ .vk-home-stage-inner { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s ease; } .vk-home-stage-inner > svg, .vk-home-stage-inner > * { width: 100% !important; height: 100% !important; display: block; } .vk-home-stage-inner.is-loading { opacity: .5; } /* ===== Primary nav dropdown (Stone Collection) ===== */ .primary-nav .has-dropdown { position: relative; } .primary-nav .has-dropdown > a { display: inline-flex; align-items: center; gap: .25rem; } .primary-nav .nav-caret { transition: transform .25s; opacity: .8; margin-top: 1px; } .primary-nav .has-dropdown:hover > a .nav-caret, .primary-nav .has-dropdown:focus-within > a .nav-caret { transform: rotate(180deg); } .primary-nav .nav-dropdown { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 200px; list-style: none; margin: 0; padding: .4rem; background: rgba(15,13,12,0.97); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 36px rgba(0,0,0,.5); border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; z-index: 60; } .primary-nav .has-dropdown:hover > .nav-dropdown, .primary-nav .has-dropdown:focus-within > .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .primary-nav .nav-dropdown li { display: block; } .primary-nav .nav-dropdown a { display: block; padding: .7rem 1rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); border-radius: 3px; transition: background .15s, color .15s; } .primary-nav .nav-dropdown a::after { display: none; } .primary-nav .nav-dropdown a:hover { background: var(--accent, #c8102e); color: #fff; } /* ===== Premium Stone Selection — video + dark marble copy panel ===== */ .kss-premium-strip { display: grid; grid-template-columns: 1fr 1.2fr; background: #0a0a0a; align-items: stretch; overflow: hidden; } .kss-premium-video { position: relative; min-height: 460px; background: #1a1a1a; } .kss-premium-video video, .kss-premium-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .kss-premium-copy { position: relative; background-color: #0a0a0a; background-image: linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 100%), radial-gradient(at 30% 20%, #2a2422 0%, #0a0a0a 70%); background-size: cover; background-position: center; display: flex; align-items: center; padding: 4rem 3rem; color: #fff; } .kss-premium-copy-inner { max-width: 540px; } .kss-premium-eyebrow { color: rgba(255,255,255,.8); font-size: .82rem; letter-spacing: .32em; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: .9rem; } .kss-premium-h { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 700; letter-spacing: .04em; line-height: 1.1; margin: 0 0 1.4rem; text-transform: uppercase; color: #fff; } .kss-premium-h .accent { color: var(--accent, #c8102e); } .kss-premium-copy p { font-size: .98rem; line-height: 1.7; color: rgba(255,255,255,.78); margin: 0 0 2rem; max-width: 460px; } .kss-premium-btn { display: inline-block; padding: .9rem 2rem; background: #fff; color: #1a1a1a; text-decoration: none; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; border-radius: 999px; transition: background .25s, color .25s, transform .25s, box-shadow .25s; } .kss-premium-btn:hover { background: var(--accent, #c8102e); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200,16,46,.35); } @media (max-width: 1024px) { .kss-premium-strip { grid-template-columns: 1fr; } .kss-premium-video { min-height: 320px; aspect-ratio: 16/10; } .kss-premium-copy { padding: 3rem 1.6rem; } .kss-premium-copy-inner { max-width: none; text-align: center; margin: 0 auto; } .kss-premium-copy p { margin-inline: auto; } }