/* ========================================================================== Studio Naaz — Shared Luxury Theme Layer Loaded last (after style.min.css / custom.css) on every storefront page. Provides the shared palette, typography, button/card system, and subtle motion utilities used across the homepage, category, product, and collection templates. Straight-edged, minimal, centered headings. ========================================================================== */ :root { --sn-ink: #111111; --sn-paper: #FFFFFF; --sn-ivory: #FAF9F6; --sn-beige: #F1EDE4; --sn-grey: #E5E5E5; --sn-charcoal: #1A1A1A; --sn-gold: #C8A96A; --sn-gold-soft: rgba(200, 169, 106, 0.15); --sn-font-serif: 'Playfair Display', Georgia, serif; --sn-font-sans: 'Urbanist', sans-serif; --sn-radius: 2px; --sn-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Single scroll container (site-wide) ---------- The vendor theme CSS (default.css/style.min.css) gives BOTH and their own `overflow-y: auto`, making them two independent scroll containers. That breaks `position: sticky` anywhere on the site (it sticks relative to the nearest scrolling ancestor, and with two of them the browser can pick the wrong one). Let stay the one real scroll container. */ html { overflow: visible !important; } /* ---------- Global heading system: centered, serif, letter-spaced ---------- */ .section-title, .luxury-title-wrap, .product-detail-title { text-align: center; } .section-title h2, .section-title .title, .luxury-title, h2.head-title { font-family: var(--sn-font-serif); font-weight: 600; letter-spacing: 0.01em; color: var(--sn-ink); } .section-title .sub-title, .section-title p { font-family: var(--sn-font-sans); color: #6b6b6b; } .luxury-title-rule, .section-title-rule { display: block; width: 60px; height: 2px; background: var(--sn-gold); margin: 10px auto 30px; } /* ---------- Straight-edged surfaces: strip heavy rounding site-wide ---------- */ .axil-product, .product-style-one, .luxury-product, .category-card, .collection-tile, .main-image-wrapper, .main-image-container, .axil-btn, button.axil-btn, input.form-control, select.form-control, textarea.form-control { border-radius: var(--sn-radius) !important; } .thumbnail-item, .color-circle, .size-circle { /* Small circular controls (swatches, thumbnails) keep their circular form intentionally — only large surfaces/cards/buttons go straight-edged. */ border-radius: 50% !important; } /* ---------- Buttons: premium, straight-edged, letter-spaced ---------- */ a.axil-btn, button.axil-btn { font-family: var(--sn-font-sans); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; padding: 15px 34px; border: 1px solid var(--sn-ink); background: var(--sn-ink); color: var(--sn-paper); transition: background 0.3s var(--sn-ease), color 0.3s var(--sn-ease), border-color 0.3s var(--sn-ease), transform 0.25s var(--sn-ease); } a.axil-btn:hover, button.axil-btn:hover { background: transparent; color: var(--sn-ink); border-color: var(--sn-ink); transform: translateY(-2px); } /* ---------- Product cards (category grid / related products) ---------- */ .axil-product.product-style-one { box-shadow: 0 6px 20px rgba(17, 17, 17, 0.06); border: 1px solid rgba(17, 17, 17, 0.06); transition: box-shadow 0.35s var(--sn-ease), transform 0.35s var(--sn-ease); } .axil-product.product-style-one:hover { box-shadow: 0 20px 40px rgba(17, 17, 17, 0.14); transform: translateY(-4px); } .axil-product.product-style-one .thumbnail { background: var(--sn-ivory); } .axil-product.product-style-one .thumbnail img { transition: transform 0.6s var(--sn-ease); } .axil-product.product-style-one:hover .thumbnail img { transform: scale(1.06); } .axil-product.product-style-one .title a, .axil-product.product-style-one h5.title { font-family: var(--sn-font-serif); color: var(--sn-ink); } .axil-product.product-style-one .price.current-price, .axil-product.product-style-one .detail-stock-price { color: var(--sn-gold); font-weight: 700; letter-spacing: 0.02em; } /* ---------- Sticky filter sidebar (category listing) ---------- */ @media (min-width: 992px) { .axil-shop-sidebar { position: sticky; top: 130px; align-self: flex-start; } } .axil-shop-sidebar .toggle-list .title { font-family: var(--sn-font-serif); letter-spacing: 0.03em; } /* ---------- Breadcrumb ---------- */ .luxury-breadcrumb { font-family: var(--sn-font-sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 6px; } .luxury-breadcrumb a { color: #8a8a8a; transition: color 0.25s var(--sn-ease); } .luxury-breadcrumb a:hover { color: var(--sn-gold); } .luxury-breadcrumb .sep { margin: 0 8px; opacity: 0.5; } /* ---------- Subtle reveal-on-scroll utility ---------- */ .reveal-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--sn-ease), transform 0.7s var(--sn-ease); } .reveal-up.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1; transform: none; transition: none; } } /* ---------- Site-wide container width ---------- */ .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 90%; } /* ---------- Premium footer ---------- */ footer { background: var(--sn-charcoal) !important; padding: 64px 0 32px; } footer .footer-para, footer p { font-family: var(--sn-font-sans); color: rgba(255, 255, 255, 0.68); line-height: 1.7; } footer h4.title, footer h6 { font-family: var(--sn-font-serif); letter-spacing: 0.04em; color: var(--sn-paper) !important; } footer .footer-logo { width: 170px; max-width: 60%; margin-bottom: 20px; } /* Column heading with a short gold underline accent */ footer .footer-heading { font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 22px; padding-bottom: 12px; position: relative; } footer .footer-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--sn-gold); } footer .footer-ul { display: flex; flex-direction: column; gap: 10px; margin: 0; } footer .footer-ul a, footer ul li a { color: rgba(255, 255, 255, 0.68); font-size: 14px; display: inline-flex; align-items: center; transition: color 0.25s var(--sn-ease), padding-left 0.25s var(--sn-ease); } footer .footer-ul a:hover, footer ul li a:hover { color: var(--sn-gold); padding-left: 4px; } footer .footer-ul-icons a { gap: 10px; } footer .footer-icon-img { width: 16px; height: 16px; object-fit: contain; filter: brightness(0) invert(1) opacity(0.68); } footer .footer-ul-icons a:hover .footer-icon-img { filter: brightness(0) saturate(100%) invert(80%) sepia(24%) saturate(704%) hue-rotate(357deg) brightness(90%) contrast(90%); } /* Get-in-touch contact items */ footer .footer-contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.68); line-height: 1.6; } footer .footer-contact-item i { color: var(--sn-gold); margin-top: 3px; width: 16px; text-align: center; flex-shrink: 0; } footer .footer-contact-item a { color: rgba(255, 255, 255, 0.68); transition: color 0.25s var(--sn-ease); } footer .footer-contact-item a:hover { color: var(--sn-gold); } footer .opening-hour { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); } footer .opening-hour .title { font-size: 16px; margin-bottom: 6px !important; } footer .opening-hour .para-title { font-size: 13px; margin: 0 !important; color: rgba(255, 255, 255, 0.6); } footer .social-share { margin-top: 28px; } footer .social-share a { background: rgba(200, 169, 106, 0.12); color: var(--sn-gold); width: 38px; height: 38px; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; transition: background 0.3s var(--sn-ease), color 0.3s var(--sn-ease), transform 0.3s var(--sn-ease); } footer .social-share a:hover { background: var(--sn-gold); color: var(--sn-ink); transform: translateY(-3px); } .footer-middle { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 24px; margin-top: 48px; } .footer-middle p { letter-spacing: 0.04em; font-size: 13px; color: rgba(255, 255, 255, 0.6); } .footer-payments img { max-height: 28px; width: auto; } .footer-service { border-bottom: 1px solid rgba(17, 17, 17, 0.06); } @media (max-width: 767px) { footer { padding: 48px 0 24px; text-align: center; } footer .footer-col-brand, footer .footer-heading::after { margin-left: auto; margin-right: auto; } footer .footer-heading::after { left: 50%; transform: translateX(-50%); } footer .footer-contact-item { justify-content: center; } footer .social-share { justify-content: center; display: flex; } } /* ---------- Premium header polish (site-wide) ---------- */ .axil-header.fixed-top:not(.bg-black) { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); box-shadow: 0 2px 24px rgba(17, 17, 17, 0.06); transition: box-shadow 0.3s var(--sn-ease), transform 0.35s var(--sn-ease); } /* Hide the whole fixed header on scroll-down, reveal on scroll-up (toggled by public/assets/js/header.js) — same UX as jimmychoo.com. */ .axil-header.fixed-top { transition: box-shadow 0.3s var(--sn-ease), transform 0.35s var(--sn-ease); } .axil-header.fixed-top.header-hidden { transform: translateY(-100%); } .axil-header.bg-black { box-shadow: 0 2px 24px rgba(0, 0, 0, 0.2); } .axil-header .mainmenu > li > a { letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; font-weight: 600; position: relative; transition: color 0.25s var(--sn-ease); } .axil-header .mainmenu > li > a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--sn-gold); transition: width 0.3s var(--sn-ease); } .axil-header .mainmenu > li:hover > a::after { width: 100%; } .axil-header .mainmenu > li:hover > a { color: var(--sn-gold) !important; } .axil-header .axil-submenu { border-top: 2px solid var(--sn-gold); box-shadow: 0 12px 30px rgba(17, 17, 17, 0.12); } .axil-header .action-list a { transition: color 0.25s var(--sn-ease), transform 0.25s var(--sn-ease); } .axil-header .action-list a:hover { color: var(--sn-gold); transform: translateY(-2px); } .product-search-input { border-radius: 30px !important; }