/* ═══════════════════════════════════════════════ SURAJMAL FULCHAND JEWELLERS — style.css Mobile-First Premium Luxury Theme New Palette: #C9A227 gold · #F5EFE6 cream · #2B2118 charcoal Breakpoints: 481px (tablet) · 1025px (desktop) · 1440px (wide) ═══════════════════════════════════════════════ */ /* ── FONTS loaded async from ── */ /* ── DESIGN TOKENS ──────────────────────────────── */ :root { color-scheme: light only; /* New richer gold palette */ --gold: #C9A227; --gold-light: #D4AF37; --gold-pale: #F0D98A; --charcoal: #2B2118; --slate: #5A4A3A; --warm-white: #FFFFFF; --cream: #F5EFE6; --cream-dark: #EDE3D3; --border: #E0D0BA; --ff-display: 'Cormorant Garamond', Georgia, serif; --ff-body: 'Jost', system-ui, -apple-system, sans-serif; /* Fluid type — clamp(min, preferred, max) */ --hero-size: clamp(1.75rem, 6vw, 4.5rem); --h1-size: clamp(1.5rem, 5vw, 4rem); --h2-size: clamp(1.25rem, 4vw, 2.5rem); --h3-size: clamp(1.05rem, 3vw, 1.5rem); --body-size: clamp(0.875rem, 3.5vw, 1rem); --caption-size: clamp(0.6875rem, 2.5vw, 0.75rem); /* Spacing */ --section-pad: clamp(2.5rem, 8vw, 6rem); --card-pad: clamp(0.875rem, 2vw, 1.25rem); --gap: clamp(1rem, 3vw, 1.5rem); --side-pad: clamp(1rem, 5vw, 2.5rem); --max-width: 1280px; /* UI */ --radius: 12px; --radius-sm: 8px; --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); --shadow: 0 2px 16px rgba(43, 33, 24, 0.08); --shadow-hover: 0 8px 32px rgba(43, 33, 24, 0.14); --nav-height: 60px; } /* ── RESET & BASE ───────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* Prevent horizontal scroll absolutely */ overflow-x: hidden; } body { font-family: var(--ff-body); background: var(--warm-white); color: var(--charcoal); font-size: var(--body-size); line-height: 1.7; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Safe area for notch/home-indicator devices */ padding-bottom: env(safe-area-inset-bottom); } img { width: 100%; max-width: 100%; height: auto; object-fit: cover; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button, input, select, textarea { font-family: inherit; } /* Word-break on all text — prevents overflow at any width */ h1, h2, h3, h4, p, li, a, span { word-break: break-word; overflow-wrap: anywhere; } /* ── CONTAINER ──────────────────────────────────── */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--side-pad); } /* ── SKIP LINK ─────────────────────────────────── */ .skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; padding: 0.5rem 1rem; background: var(--gold); color: #fff; z-index: 9999; font-size: 0.875rem; } /* ── NAVIGATION ─────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 900; background: rgba(245, 239, 230, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); /* Safe-area padding for notched devices */ padding-top: env(safe-area-inset-top); transition: box-shadow var(--transition); } .site-nav.scrolled { box-shadow: 0 2px 24px rgba(43, 33, 24, 0.1); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); gap: 1rem; } .nav-logo { font-family: var(--ff-display); font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 600; letter-spacing: 0.05em; color: var(--charcoal); white-space: nowrap; flex-shrink: 0; } .nav-logo span { color: var(--gold); } /* Desktop nav links — hidden on mobile */ .nav-links { display: none; align-items: center; gap: 2rem; } .nav-links a { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); position: relative; transition: color var(--transition); padding: 4px 0; min-height: 44px; display: flex; align-items: center; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--gold); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } /* Hamburger */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; min-width: 44px; background: none; border: none; cursor: pointer; padding: 10px; border-radius: var(--radius-sm); transition: background var(--transition); } .nav-toggle:hover { background: rgba(201, 162, 39, 0.1); } .nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--charcoal); transition: var(--transition); transform-origin: center; } /* ── MOBILE DRAWER ───────────────────────────────── */ .nav-drawer { display: none; position: fixed; inset: 0; z-index: 1000; pointer-events: none; } .nav-drawer.open { display: block; pointer-events: auto; } .nav-drawer-overlay { position: absolute; inset: 0; background: rgba(43, 33, 24, 0.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--transition); } .nav-drawer.open .nav-drawer-overlay { opacity: 1; } .nav-drawer-panel { position: absolute; top: 0; right: 0; width: min(320px, 85vw); height: 100%; background: var(--warm-white); padding: 2rem 1.5rem; padding-top: calc(2rem + env(safe-area-inset-top)); transform: translateX(100%); transition: transform var(--transition); display: flex; flex-direction: column; gap: 2rem; overflow-y: auto; } .nav-drawer.open .nav-drawer-panel { transform: translateX(0); } .nav-drawer-close { align-self: flex-end; width: 44px; height: 44px; background: none; border: none; cursor: pointer; font-size: 1.25rem; color: var(--charcoal); display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background var(--transition); } .nav-drawer-close:hover { background: var(--cream); } .nav-drawer-links { display: flex; flex-direction: column; gap: 0; } .nav-drawer-links a { display: flex; align-items: center; padding: 0.875rem 0; font-size: 1.125rem; font-family: var(--ff-display); font-weight: 500; border-bottom: 1px solid var(--border); color: var(--charcoal); transition: color var(--transition), padding-left var(--transition); min-height: 44px; } .nav-drawer-links a:hover { color: var(--gold); padding-left: 0.5rem; } /* ── HERO ────────────────────────────────────────── */ .hero { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 85vh; padding: 20px; background: var(--cream); position: relative; width: 100%; overflow: hidden; } .hero-bg-pattern { position: absolute; inset: 0; z-index: 2; } .hero-content { position: relative; z-index: 3; text-align: center; padding: 1.5rem 1rem; width: 90%; max-width: 700px; animation: heroFadeUp 0.9s ease both; } .hero-eyebrow { font-size: var(--caption-size); letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-family: var(--ff-body); font-weight: 500; } .hero-brand { font-family: var(--ff-display); font-size: var(--hero-size); font-weight: 400; letter-spacing: 0.05em; line-height: 1.08; color: var(--charcoal); margin-bottom: 1rem; } .hero-brand em { font-style: italic; color: var(--gold); } .hero-tagline { font-size: clamp(0.875rem, 2.5vw, 1.125rem); color: var(--slate); font-weight: 300; letter-spacing: 0.04em; margin-bottom: 1.5rem; line-height: 1.6; } .hero-divider { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; } .hero-divider-line { width: 40px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.8)); } .hero-divider-line:last-child { background: linear-gradient(90deg, rgba(201, 162, 39, 0.8), transparent); } .hero-divider-diamond { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ── CTA BUTTON ─────────────────────────────────── */ .hero-cta { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 1.5rem; background: var(--gold); color: #FFFFFF; font-size: clamp(0.7rem, 2.5vw, 0.8125rem); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; border-radius: var(--radius-sm); border: 1.5px solid var(--gold); transition: background var(--transition), transform var(--transition), box-shadow var(--transition); white-space: nowrap; } .hero-cta:hover { background: var(--charcoal); border-color: var(--charcoal); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(43, 33, 24, 0.2); } .hero-cta svg { width: 16px; height: 16px; flex-shrink: 0; } /* ── SECTION HEADER ─────────────────────────────── */ .section-header { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 3rem); } .section-eyebrow { font-size: var(--caption-size); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; font-weight: 500; } .section-title { font-family: var(--ff-display); font-size: var(--h2-size); font-weight: 400; color: var(--charcoal); letter-spacing: 0.03em; line-height: 1.2; margin-bottom: 0.75rem; } .section-sub { font-size: clamp(0.875rem, 2.5vw, 1rem); color: var(--slate); max-width: 600px; margin: 0 auto 1rem; line-height: 1.7; } .section-ornament { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; } .section-ornament-line { width: 48px; height: 1px; background: var(--border); } .section-ornament-dot { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); } /* ── FEATURED STRIP ─────────────────────────────── */ .featured-strip { padding: var(--section-pad) 0; background: var(--warm-white); } .featured-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); } .featured-item { display: block; border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow); transition: box-shadow var(--transition), transform var(--transition); } .featured-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .featured-img-wrap { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); } .featured-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .featured-item:hover .featured-img-wrap img { transform: scale(1.04); } .featured-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43, 33, 24, 0.55) 0%, transparent 50%); display: flex; align-items: flex-end; padding: 1.25rem; opacity: 0; transition: opacity var(--transition); } .featured-item:hover .featured-overlay { opacity: 1; } .featured-overlay-cta { font-family: var(--ff-body); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 2px; } .featured-caption { padding: 0.875rem var(--card-pad); background: var(--warm-white); } .featured-tag { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 500; } .featured-name { font-family: var(--ff-display); font-size: clamp(1rem, 3vw, 1.2rem); color: var(--charcoal); margin-top: 0.2rem; } /* ── PRODUCT / COLLECTION GRID ───────────────────── */ .products-section { padding: var(--section-pad) 0; background: var(--cream); border-top: 1px solid var(--border); } /* Mobile-first: 1 column */ .product-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .sections-container { display: flex; flex-direction: column; gap: clamp(40px, 8vw, 80px); margin-top: 40px; width: 100%; } .section { display: flex; gap: 40px; align-items: center; width: 100%; } .image { width: 50%; overflow: hidden; border-radius: var(--radius); } .text { width: 50%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } @media (max-width: 768px) { .section { flex-direction: column; gap: 20px; } .image, .text { width: 100%; } } .product-card { background: var(--warm-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: box-shadow var(--transition), transform var(--transition); border: 1px solid var(--border); } .product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .product-card-image-wrap { aspect-ratio: 4 / 5; overflow: hidden; position: relative; background: var(--cream); } .product-card-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .product-card:hover .product-card-image-wrap img { transform: scale(1.04); } .product-card-overlay { position: absolute; inset: 0; background: rgba(43, 33, 24, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); } .product-card:hover .product-card-overlay { opacity: 1; } .quick-view-btn { background: var(--gold); color: #fff; border: none; padding: 0.6rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; font-family: var(--ff-body); transition: background var(--transition); min-height: 44px; } .quick-view-btn:hover { background: var(--charcoal); } .product-card-body { padding: var(--card-pad); } .product-card-cat { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.25rem; } .product-card-name { font-family: var(--ff-display); font-size: clamp(1rem, 3vw, 1.25rem); color: var(--charcoal); font-weight: 400; } .product-card-count { font-size: 0.8125rem; color: var(--slate); margin-top: 0.25rem; } /* ── SKELETON LOADER ────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--cream) 25%, var(--cream-dark) 50%, var(--cream) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius); } .skeleton-card { aspect-ratio: 4 / 5; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── FEATURES STRIP ─────────────────────────────── */ .features-strip { padding: clamp(2rem, 5vw, 4rem) 0; background: var(--warm-white); border-top: 1px solid var(--border); } .features-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); } .feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius); background: var(--cream); transition: box-shadow var(--transition); } .feature-item:hover { box-shadow: var(--shadow); } .feature-icon { width: 40px; height: 40px; background: rgba(201, 162, 39, 0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feature-icon svg { width: 18px; height: 18px; stroke: var(--gold); } .feature-title { font-family: var(--ff-display); font-size: var(--h3-size); color: var(--charcoal); font-weight: 500; } .feature-desc { font-size: 0.875rem; color: var(--slate); line-height: 1.75; } /* ── CTA SECTION ────────────────────────────────── */ .cta-section { padding: var(--section-pad) 0; background: var(--charcoal); border-top: 2px solid var(--gold); } .cta-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; } .cta-title { font-family: var(--ff-display); font-size: var(--h2-size); color: #fff; font-weight: 400; line-height: 1.25; margin-bottom: 0.5rem; } .cta-section .section-eyebrow { color: var(--gold-light); } .cta-address { font-size: clamp(0.875rem, 2.5vw, 1rem); color: rgba(255, 255, 255, 0.7); line-height: 1.8; margin-top: 0.5rem; } .cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center; } .cta-browse-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1.5rem; border: 1.5px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); font-size: clamp(0.7rem, 2.5vw, 0.8125rem); letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-sm); font-weight: 500; transition: border-color var(--transition), color var(--transition); } .cta-browse-btn:hover { border-color: var(--gold); color: var(--gold); } /* ── TRUST MARQUEE ──────────────────────────────── */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── FILTER BAR (product.html) ──────────────────── */ .filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .filter-btn { padding: 0.5rem 1rem; min-height: 44px; border: 1px solid var(--border); background: var(--warm-white); border-radius: 2rem; font-size: 0.8125rem; font-family: var(--ff-body); color: var(--slate); cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition); } .filter-btn.active, .filter-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(201, 162, 39, 0.06); } /* ── EMPTY STATE ─────────────────────────────────── */ .empty-state { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--slate); } .empty-state-icon { font-size: 2rem; color: var(--gold); margin-bottom: 1rem; } .empty-state-title { font-family: var(--ff-display); font-size: 1.5rem; color: var(--charcoal); margin-bottom: 0.5rem; } /* ── FAQ (faq.html) ─────────────────────────────── */ .faq-list { display: flex; flex-direction: column; gap: 0; } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { padding: 1.125rem 0; font-family: var(--ff-display); font-size: var(--h3-size); color: var(--charcoal); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; } .faq-q::after { content: '+'; font-size: 1.25rem; color: var(--gold); flex-shrink: 0; transition: transform var(--transition); } details[open] .faq-q::after { transform: rotate(45deg); } .faq-a { padding: 0 0 1.25rem; color: var(--slate); font-size: var(--body-size); line-height: 1.8; } .faq-a p + p { margin-top: 0.75rem; } /* ── MODAL (quick view) ─────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(43, 33, 24, 0.75); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 1rem; } .modal-overlay.open { display: flex; } .modal-inner { background: var(--warm-white); border-radius: var(--radius); max-width: 560px; width: 100%; padding: 1.5rem; position: relative; box-shadow: var(--shadow-hover); } .modal-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; background: var(--cream); border: none; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--charcoal); display: flex; align-items: center; justify-content: center; } .modal-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 1rem; } .modal-cat { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .modal-title { font-family: var(--ff-display); font-size: 1.5rem; color: var(--charcoal); margin: 0.25rem 0 0.75rem; } .modal-link { color: var(--gold); font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; } /* ── PRODUCT DETAIL (product.html) ─────────────── */ .product-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; } .gallery-main { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--cream); } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; } .gallery-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: border-color var(--transition); flex-shrink: 0; } .gallery-thumb.active, .gallery-thumb:hover { border-color: var(--gold); } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .product-info { display: flex; flex-direction: column; gap: 1rem; } .product-info-breadcrumb { font-size: 0.8125rem; color: var(--slate); } .product-info-breadcrumb a { color: var(--gold); } .product-info-breadcrumb span { margin: 0 0.3rem; color: var(--border); } .product-info-title { font-family: var(--ff-display); font-size: clamp(1.5rem, 5vw, 2.5rem); color: var(--charcoal); font-weight: 400; line-height: 1.15; } .product-info-meta { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .product-info-meta-row { display: flex; justify-content: space-between; padding: 0.75rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--border); } .product-info-meta-row:last-child { border-bottom: none; } .product-info-meta-label { color: var(--slate); } .product-info-meta-value { color: var(--charcoal); font-weight: 500; } .product-desc { font-size: 0.9375rem; color: var(--slate); line-height: 1.8; } .btn-group { display: flex; flex-direction: column; gap: 0.75rem; } .whatsapp-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 1.5rem; background: #25d366; color: #fff; border-radius: var(--radius-sm); font-weight: 500; font-size: 0.9375rem; transition: background var(--transition), transform var(--transition); } .whatsapp-btn:hover { background: #1da851; transform: translateY(-2px); } .enquire-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 1.5rem; background: var(--cream); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-weight: 500; font-size: 0.9375rem; color: var(--charcoal); cursor: pointer; transition: border-color var(--transition), background var(--transition); font-family: var(--ff-body); } .enquire-btn:hover { border-color: var(--gold); background: rgba(201, 162, 39, 0.05); } /* ── BREADCRUMB ─────────────────────────────────── */ .breadcrumb { font-size: 0.8125rem; color: var(--slate); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .breadcrumb a { color: var(--gold); transition: color var(--transition); } .breadcrumb a:hover { color: var(--charcoal); } .breadcrumb-sep { color: var(--border); } /* ── FLOATING WHATSAPP BUTTON ───────────────────── */ .wa-float { position: fixed; bottom: calc(1.5rem + env(safe-area-inset-bottom)); right: 1.25rem; z-index: 800; width: 52px; height: 52px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: transform var(--transition), box-shadow var(--transition); color: #fff; } .wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5); } /* ── FOOTER ─────────────────────────────────────── */ footer { background: var(--charcoal); color: rgba(255, 255, 255, 0.7); border-top: 2px solid var(--gold); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); } footer a { transition: color var(--transition); } footer a:hover { color: var(--gold) !important; } /* ── ACCESSIBILITY ──────────────────────────────── */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; } /* ── UTILITIES ──────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ════════════════════════════════════════════════ TABLET — 481px+ ════════════════════════════════════════════════ */ @media (min-width: 481px) { .nav-links { display: flex; } .nav-toggle { display: none; } /* Hero: keep 4:5 on tablets too — switches to landscape only on desktop */ .featured-grid { grid-template-columns: repeat(2, 1fr); } .featured-item--large { grid-column: span 2; } .featured-item--large .featured-img-wrap { aspect-ratio: 16 / 7; } .product-grid { grid-template-columns: repeat(2, 1fr); } .features-grid { grid-template-columns: repeat(2, 1fr); } .cta-inner { flex-direction: row; text-align: left; justify-content: space-between; align-items: center; } .cta-text { max-width: 60%; } .product-layout { grid-template-columns: 1fr 1fr; } .btn-group { flex-direction: row; } } /* ════════════════════════════════════════════════ DESKTOP — 1025px+ ════════════════════════════════════════════════ */ @media (min-width: 1025px) { .nav-inner { height: 72px; } /* Desktop hero: 16:9 landscape */ .hero { aspect-ratio: 16 / 9; } /* Desktop: text left-aligned */ .hero-content { text-align: left; align-self: flex-end; padding: 5% 8%; max-width: 660px; margin-right: auto; } .hero-divider { justify-content: flex-start; } .featured-grid { grid-template-columns: repeat(3, 1fr); } .featured-item--large { grid-column: span 1; } .featured-item--large .featured-img-wrap { aspect-ratio: 4 / 5; } .product-grid { grid-template-columns: repeat(3, 1fr); max-width: var(--max-width); margin: 0 auto; } .features-grid { grid-template-columns: repeat(4, 1fr); } .cta-inner { gap: 3rem; } .cta-text { max-width: 55%; } .product-layout { grid-template-columns: 1.1fr 1fr; gap: 3rem; } } /* ════════════════════════════════════════════════ WIDE — 1440px+ ════════════════════════════════════════════════ */ @media (min-width: 1440px) { .product-grid { grid-template-columns: repeat(4, 1fr); } } /* ════════════════════════════════════════════════ REDUCED MOTION ════════════════════════════════════════════════ */ @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 PAGE CONSOLIDATED STYLES ──────────────── */ .nav{ position:fixed;top:0;left:0;right:0;height:var(--nav-height);z-index:900; display:flex;align-items:center; background:#fff; border-bottom:0.5px solid var(--border); transition:background .4s,box-shadow .4s; } .nav.stuck{ background:rgba(255,255,255,.96); backdrop-filter:blur(24px) saturate(1.5); box-shadow:0 2px 20px rgba(0,0,0,.06); } .nav__inner{ width:var(--max-width);margin-inline:auto; display:flex;align-items:center;justify-content:space-between;gap:1.5rem; } .nav__logo{display:flex;flex-direction:column;gap:1px;line-height:1} .nav__logo-en{font-family:var(--ff-display);font-size:1.05rem;font-weight:500;color:var(--charcoal);letter-spacing:.04em} .nav__logo-sub{font-family:var(--ff-body);font-size:.44rem;font-weight:300;letter-spacing:.38em;text-transform:uppercase;color:var(--gold)} .nav__links{display:flex;align-items:center;gap:2.5rem;list-style:none} .nav__links a{ font-family:var(--ff-body);font-size:.58rem;font-weight:400; letter-spacing:.2em;text-transform:uppercase;color:var(--slate); position:relative;transition:color .3s; } .nav__links a::after{ content:'';position:absolute;bottom:-4px;left:0;width:100%;height:1px; background:var(--gold);transform:scaleX(0);transition:transform .35s var(--transition); } .nav__links a:hover,.nav__links a.active{color:var(--gold)} .nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1)} /* -- Collections Dropdown -- */ .nav__dd{position:relative} .nav__dd-menu{ position:absolute;top:calc(100% + 14px);left:50%; transform:translateX(-50%) translateY(-6px); min-width:220px; background:#fff; border:0.5px solid var(--border); border-top:2px solid var(--gold); box-shadow:0 8px 32px rgba(0,0,0,.08); padding:.6rem 0; opacity:0;pointer-events:none; transition:opacity .28s var(--transition),transform .28s var(--transition); z-index:999; } .nav__dd:hover .nav__dd-menu,.nav__dd-menu:hover{ opacity:1;pointer-events:auto; transform:translateX(-50%) translateY(0); } .nav__dd-menu a{ display:block; font-family:var(--ff-body);font-size:.58rem;font-weight:400; letter-spacing:.18em;text-transform:uppercase; color:var(--charcoal)!important; padding:.56rem 1.3rem; transition:color .2s,background .2s; white-space:nowrap; } .nav__dd-menu a:hover{color:var(--gold)!important;background:rgba(201,169,110,.05)} .nav__dd-arrow{ display:inline-block;width:0;height:0; border-left:3px solid transparent; border-right:3px solid transparent; border-top:4px solid var(--gold); margin-left:.3rem;vertical-align:middle; transition:transform .25s; } .nav__dd:hover .nav__dd-arrow{transform:rotate(180deg)} /* -- Light theme text overrides -- */ .breadcrumb{color:var(--slate)!important;font-size:.7rem!important} .breadcrumb a{color:var(--gold)!important} .hero-single__eyebrow{color:var(--gold)!important} .hero-single__sub{color:var(--slate)!important;font-size:1rem!important} .col-toolbar__count{color:var(--slate)!important} .col-toolbar__sort{color:var(--charcoal)!important} .g-img-count{color:var(--slate)!important;font-size:.75rem!important} .g-img-title{color:var(--charcoal)!important} .footer__bot p{color:var(--slate)!important} .f-row{color:var(--slate)!important} .f-row a{color:var(--slate)!important} .f-row a:hover{color:var(--gold)!important} .info-sub .eyebrow{color:var(--gold)!important} .info-desc{color:var(--slate)!important;font-size:1rem!important} .info-tags span{color:var(--slate)!important} .col-label{color:var(--slate)!important;font-size:.85rem!important} .col-desc{color:var(--slate)!important;font-size:.85rem!important} .col-count{color:var(--slate)!important} .nav__cta{ display:flex;align-items:center;gap:.5rem; font-family:var(--ff-body);font-size:.55rem;font-weight:500; letter-spacing:.18em;text-transform:uppercase; color:#fff;background:var(--gold);padding:.6rem 1.3rem; border-radius:2px; transition:background .3s; } .nav__cta:hover{background:var(--gold)} .nav__cta svg{width:13px;height:13px;fill:currentColor;flex-shrink:0} .nav__burger{ display:none;flex-direction:column;gap:5px; background:none;border:none;padding:.4rem; } .nav__burger span{display:block;width:22px;height:1px;background:var(--charcoal);transition:transform .3s,opacity .3s} .nav__burger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)} .nav__burger.open span:nth-child(2){opacity:0} .nav__burger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)} /* ================================================================ MOBILE DRAWER ================================================================ */ .mob-ov{ position:fixed;inset:0;z-index:950; background:rgba(0,0,0,.82);backdrop-filter:blur(6px); opacity:0;pointer-events:none;transition:opacity .35s; } .mob-ov.open{opacity:1;pointer-events:auto} .mob-menu{ position:fixed;top:0;right:0;bottom:0; width:min(310px,82vw);z-index:960; background:var(--cream);border-left:1px solid var(--border); display:flex;flex-direction:column;padding:5.5rem 2rem 2.5rem; transform:translateX(100%);transition:transform .42s var(--snap); } .mob-menu.open{transform:translateX(0)} .mob-close{ position:absolute;top:1.4rem;right:1.4rem; background:none;border:1px solid var(--border); color:var(--slate);width:36px;height:36px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;transition:border-color .3s,color .3s; } .mob-close:hover{border-color:var(--gold);color:var(--gold)} .mob-brand{font-family:var(--ff-display);font-size:1rem;color:var(--charcoal);padding-bottom:1.4rem;border-bottom:1px solid var(--border);margin-bottom:2rem} .mob-nav{display:flex;flex-direction:column;gap:1.6rem} .mob-nav a{font-family:var(--ff-body);font-size:.7rem;font-weight:300;letter-spacing:.24em;text-transform:uppercase;color:var(--slate);transition:color .3s} .mob-nav a:hover{color:var(--gold)} .mob-wa{margin-top:auto;padding-top:2rem} .mob-wa a{ display:flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--ff-body);font-size:.58rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase; color:#fff;background:#25D366;padding:.9rem;transition:opacity .3s; } .mob-wa a:hover{opacity:.88} .mob-wa svg{width:14px;height:14px;fill:currentColor;flex-shrink:0} /* ================================================================ BREADCRUMB ================================================================ */ .bc-wrap{ width:var(--max-width);margin-inline:auto; padding:calc(var(--nav-height) + 1.4rem) 0 0; } .breadcrumb{ display:flex;align-items:center;flex-wrap:wrap;gap:.4rem; font-family:var(--ff-body);font-size:.5rem;font-weight:300; letter-spacing:.2em;text-transform:uppercase;color:var(--slate); } .breadcrumb a{color:var(--gold);transition:color .3s} .breadcrumb a:hover{color:var(--gold)} .breadcrumb__sep{color:var(--slate)} /* ================================================================ ╔══════════════════════════════════════╗ ║ SINGLE COLLECTION MODE ║ ╚══════════════════════════════════════╝ ================================================================ */ /* ---- HERO ---- */ .hero-single{ position:relative;overflow:hidden; padding-bottom:3rem; } .hero-single::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(200,168,75,.13) 0%,transparent 65%); pointer-events:none;z-index:0; } .hero-single__inner{ width:var(--max-width);margin-inline:auto; padding-top:1.8rem; position:relative;z-index:1; } .hero-single__meta{ display:flex;flex-direction:column;gap:.35rem;margin-bottom:2rem; } .hero-single__eyebrow{ font-family:var(--ff-body);font-size:.52rem;font-weight:300; letter-spacing:.44em;text-transform:uppercase;color:var(--gold); } .hero-single__h1{ font-family:var(--ff-display);font-weight:400; font-size:clamp(2.2rem,5vw,4rem);color:var(--charcoal);line-height:1.05; } .hero-single__mr{ font-family:var(--dev);font-size:clamp(.9rem,1.8vw,1.2rem); font-weight:300;color:var(--gold);letter-spacing:.04em; min-height:1.4rem; } .hero-single__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem} .hero-single__badge{ font-family:var(--ff-body);font-size:.44rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--gold); border:1px solid rgba(200,168,75,.25);background:rgba(200,168,75,.06); padding:.24rem .7rem; } /* ---- HERO SLIDER (first 4 images) ---- */ .hero-slider{ position:relative; margin-bottom:3rem; overflow:hidden; /* CLS fix: reserve height before images load */ contain:layout; } .hero-slider__track{ display:grid; grid-template-columns:repeat(4,1fr); gap:3px; /* Min-height prevents jump when images arrive */ min-height:240px; } /* On mobile collapse to 2x2 */ @media(max-width:700px){ .hero-slider__track{grid-template-columns:repeat(2,1fr);min-height:160px} } .hero-slide{ position:relative;aspect-ratio:3/4;overflow:hidden; background:var(--warm-white);cursor:zoom-in; border:1px solid transparent; transition:border-color .4s; animation:fadeUp .6s var(--snap) both; } .hero-slide:nth-child(1){animation-delay:0ms} .hero-slide:nth-child(2){animation-delay:80ms} .hero-slide:nth-child(3){animation-delay:160ms} .hero-slide:nth-child(4){animation-delay:240ms} .hero-slide:hover{border-color:rgba(200,168,75,.5)} .hero-slide::before{ content:'';position:absolute;inset:0;z-index:0; background:radial-gradient(ellipse 65% 65% at 50% 55%,rgba(200,168,75,.08) 0%,transparent 70%); pointer-events:none; } .hero-slide__img{ position:relative;z-index:1; width:100%;height:100%;object-fit:contain;padding:.6rem; transition:transform .65s var(--transition),filter .4s; filter:brightness(.88); } .hero-slide:hover .hero-slide__img{transform:scale(1.08);filter:brightness(1)} /* Gold top-line hover */ .hero-slide::after{ content:'';position:absolute;top:0;left:0;right:0;z-index:5; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); transform:scaleX(0);transform-origin:left; transition:transform .4s var(--transition); } .hero-slide:hover::after{transform:scaleX(1)} /* Index badge */ .hero-slide__num{ position:absolute;top:.5rem;left:.5rem;z-index:4; font-family:var(--ff-body);font-size:.38rem;font-weight:600; letter-spacing:.14em;color:rgba(255,255,255,0.9); background:rgba(7,6,5,.76);padding:.14rem .44rem; opacity:0;transform:translateY(-4px); transition:opacity .3s,transform .3s; } .hero-slide:hover .hero-slide__num{opacity:1;transform:none} /* Enquire overlay */ .hero-slide__ov{ position:absolute;inset:0;z-index:3; display:flex;align-items:flex-end; background:linear-gradient(0deg,rgba(7,6,5,.85) 0%,transparent 50%); opacity:0;transition:opacity .35s;padding:.8rem .9rem; } .hero-slide:hover .hero-slide__ov{opacity:1} .hero-slide__ov-btn{ display:inline-flex;align-items:center;gap:.4rem; font-family:var(--ff-body);font-size:.44rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase; color:#fff;background:#25D366;padding:.35rem .75rem; transition:opacity .2s; } .hero-slide__ov-btn:hover{opacity:.85} .hero-slide__ov-btn svg{width:10px;height:10px;fill:currentColor;flex-shrink:0} /* Featured label on first slide */ .hero-slide__feat{ position:absolute;top:.6rem;right:.6rem;z-index:4; font-family:var(--ff-body);font-size:.4rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase; color:var(--warm-white);background:var(--gold);padding:.2rem .6rem; } /* Toolbar between hero and gallery */ .col-toolbar{ width:var(--max-width);margin-inline:auto; display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:1rem; padding:2rem 0 1.4rem; border-bottom:1px solid var(--border); margin-bottom:1.8rem; } .col-toolbar__info{display:flex;flex-direction:column;gap:.2rem} .col-toolbar__count{ font-family:var(--ff-body);font-size:.5rem;font-weight:300; letter-spacing:.2em;text-transform:uppercase;color:var(--slate); } .col-toolbar__label{ font-family:var(--ff-display);font-size:1rem;color:var(--charcoal); } .col-toolbar__right{display:flex;align-items:center;gap:.8rem} .btn-sm-ghost{ font-family:var(--ff-body);font-size:.52rem;font-weight:300; letter-spacing:.18em;text-transform:uppercase; color:var(--slate);border:1px solid var(--border); padding:.52rem 1.1rem;transition:color .3s,border-color .3s; } .btn-sm-ghost:hover{color:var(--gold);border-color:var(--gold)} .btn-wa-sm{ display:flex;align-items:center;gap:.4rem; font-family:var(--ff-body);font-size:.52rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase; color:#fff;background:#25D366;padding:.52rem 1.1rem; transition:opacity .3s; } .btn-wa-sm:hover{opacity:.85} .btn-wa-sm svg{width:12px;height:12px;fill:currentColor;flex-shrink:0} /* ---- GALLERY GRID (remaining images, 5–50) ---- */ .gallery-wrap{width:var(--max-width);margin-inline:auto;padding-bottom:4rem} .gallery-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:3px; } @media(max-width:1100px){.gallery-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:800px){.gallery-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:500px){.gallery-grid{grid-template-columns:repeat(2,1fr)}} .g-tile{ position:relative;aspect-ratio:1;overflow:hidden; background:var(--warm-white);cursor:zoom-in; border:1px solid transparent; animation:fadeUp .5s var(--snap) both; transition:border-color .4s; } .g-tile:hover{border-color:rgba(200,168,75,.42);z-index:2} .g-tile::before{ content:'';position:absolute;inset:0;z-index:0; background:radial-gradient(ellipse 70% 70% at 50% 52%,rgba(200,168,75,.07) 0%,transparent 70%); pointer-events:none; } .g-tile__img{ position:relative;z-index:1; width:100%;height:100%;object-fit:contain;padding:.5rem; transition:transform .65s var(--transition),filter .4s; filter:brightness(.86); } .g-tile:hover .g-tile__img{transform:scale(1.07);filter:brightness(1)} .g-tile::after{ content:'';position:absolute;top:0;left:0;right:0;z-index:5; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); transform:scaleX(0);transform-origin:left; transition:transform .4s var(--transition); } .g-tile:hover::after{transform:scaleX(1)} .g-tile__num{ position:absolute;top:.4rem;right:.4rem;z-index:4; font-family:var(--ff-body);font-size:.37rem;font-weight:600; letter-spacing:.12em;color:rgba(255,255,255,0.9); background:rgba(7,6,5,.72);padding:.12rem .38rem; opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s; } .g-tile:hover .g-tile__num{opacity:1;transform:none} .g-tile__ov{ position:absolute;inset:0;z-index:3; display:flex;align-items:flex-end; background:linear-gradient(0deg,rgba(7,6,5,.82) 0%,transparent 55%); opacity:0;transition:opacity .35s;padding:.7rem .8rem; } .g-tile:hover .g-tile__ov{opacity:1} .g-tile__ov-btn{ display:inline-flex;align-items:center;gap:.35rem; font-family:var(--ff-body);font-size:.42rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase; color:#fff;background:#25D366;padding:.3rem .68rem; transition:opacity .2s; } .g-tile__ov-btn:hover{opacity:.85} .g-tile__ov-btn svg{width:10px;height:10px;fill:currentColor;flex-shrink:0} /* Placeholder */ .g-ph{ aspect-ratio:1;background:var(--warm-white); border:1px dashed rgba(200,168,75,.1); display:flex;align-items:center;justify-content:center; animation:fadeUp .5s var(--snap) both; } .g-ph__inner{display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:.14} .g-ph__icon{font-size:1.3rem} .g-ph__txt{font-family:var(--ff-body);font-size:.38rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)} /* View More */ .view-more-row{ grid-column:1/-1; display:flex;flex-direction:column;align-items:center;gap:.8rem; padding:2.2rem 0 .5rem; } .view-more-hint{ font-family:var(--ff-body);font-size:.5rem;font-weight:300; letter-spacing:.2em;text-transform:uppercase;color:var(--slate); } .btn-view-more{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--ff-body);font-size:.58rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase; color:var(--warm-white); background:linear-gradient(120deg,var(--gold-light) 0%,var(--gold) 50%,var(--gold) 100%); background-size:200%;background-position:0%; padding:.82rem 2.2rem;border:none; transition:background-position .5s,letter-spacing .3s,box-shadow .3s; } .btn-view-more:hover{ background-position:100%;letter-spacing:.26em; box-shadow:0 6px 30px rgba(200,168,75,.4); } /* ---- INFO STRIP ---- */ .info-strip{ background:var(--cream); border-top:1px solid var(--border);border-bottom:1px solid var(--border); } .info-strip__inner{ width:var(--max-width);margin-inline:auto; padding:3rem 0; display:grid;grid-template-columns:1fr 2fr;gap:4rem; } .ic-label{ font-family:var(--ff-body);font-size:.5rem;font-weight:600; letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem; } .ic-val{ font-family:var(--ff-display);font-size:1.1rem;color:var(--charcoal);line-height:1.4;margin-bottom:.35rem; } .ic-sub{ font-family:var(--ff-display);font-style:italic;font-size:.92rem;color:var(--slate);line-height:1.75; } @media(max-width:860px){.info-strip__inner{grid-template-columns:1fr;gap:2rem}} /* ---- CTA STRIP ---- */ .cta-strip{ text-align:center;padding:5rem 1rem; background:var(--cream);position:relative;overflow:hidden; } .cta-strip::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 55% 80% at 50% 50%,rgba(200,168,75,.055) 0%,transparent 70%); pointer-events:none; } .cta-eye{ font-family:var(--ff-body);font-size:.54rem;letter-spacing:.42em; text-transform:uppercase;color:var(--gold);margin-bottom:.9rem; } .cta-h2{ font-family:var(--ff-display);font-weight:400; font-size:clamp(1.7rem,4vw,3rem);color:var(--charcoal); max-width:22ch;margin:0 auto 1rem;line-height:1.15; } .cta-sub{ font-family:var(--ff-display);font-style:italic; font-size:clamp(.9rem,1.5vw,1.1rem);color:var(--slate);margin-bottom:2.2rem; } .cta-btns{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap} .btn-wa-lg{ display:inline-flex;align-items:center;gap:.65rem; font-family:var(--ff-body);font-size:.6rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase; color:#fff;background:#25D366;padding:.95rem 2.3rem;transition:opacity .3s; } .btn-wa-lg:hover{opacity:.87} .btn-wa-lg svg{width:16px;height:16px;fill:currentColor;flex-shrink:0} .btn-ghost-lg{ display:inline-flex;align-items:center; font-family:var(--ff-body);font-size:.6rem;font-weight:300; letter-spacing:.2em;text-transform:uppercase; color:var(--gold);border:1px solid var(--gold); padding:.95rem 2.3rem;transition:background .3s; } .btn-ghost-lg:hover{background:rgba(200,168,75,.1)} /* ================================================================ ╔══════════════════════════════════════╗ ║ ALL COLLECTIONS MODE ║ ╚══════════════════════════════════════╝ ================================================================ */ .page-head{ width:var(--max-width);margin-inline:auto; padding:1.6rem 0 2.4rem; } .page-head__eye{ font-family:var(--ff-body);font-size:.52rem;font-weight:300; letter-spacing:.44em;text-transform:uppercase;color:var(--gold); margin-bottom:.5rem; } .page-head__h1{ font-family:var(--ff-display);font-weight:400; font-size:clamp(2rem,4.5vw,3.4rem);color:var(--charcoal);line-height:1.08; } .page-head__sub{ font-family:var(--ff-display);font-style:italic; font-size:clamp(.95rem,1.6vw,1.1rem);color:var(--slate);margin-top:.5rem; } .page-head__bar{ display:flex;align-items:center;gap:1rem;margin-top:1.6rem; padding-top:1.2rem;border-top:1px solid var(--border); } .page-head__count{ font-family:var(--ff-body);font-size:.5rem;font-weight:300; letter-spacing:.2em;text-transform:uppercase;color:var(--slate); } /* ---- COLLECTION CARD GRID ---- */ .cols-grid{ width:var(--max-width);margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; padding-bottom:5rem; } @media(max-width:1000px){.cols-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.cols-grid{grid-template-columns:1fr}} .col-card{ display:flex;flex-direction:column; border:1px solid var(--border);overflow:hidden; position:relative;background:var(--warm-white); transition:border-color .4s,transform .4s,box-shadow .4s; animation:fadeUp .6s var(--snap) both; } .col-card:hover{ border-color:rgba(200,168,75,.45); transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(200,168,75,.1); } /* Top-line glow */ .col-card::before{ content:'';position:absolute;top:0;left:0;right:0;z-index:5; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); transform:scaleX(0);transform-origin:left; transition:transform .45s var(--transition); } .col-card:hover::before{transform:scaleX(1)} /* Thumbnail 2x2 grid */ .col-card__imgs{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; aspect-ratio:1; overflow:hidden; background:var(--warm-white); position:relative; } .col-card__imgs img{ width:100%;height:100%;object-fit:contain;padding:.4rem; transition:transform .6s var(--transition),filter .4s; filter:brightness(.84); } .col-card:hover .col-card__imgs img{filter:brightness(1)} .col-card:hover .col-card__imgs img:nth-child(1){transform:scale(1.06) rotate(-.5deg)} .col-card:hover .col-card__imgs img:nth-child(2){transform:scale(1.06) rotate(.5deg)} .col-card:hover .col-card__imgs img:nth-child(3){transform:scale(1.06) rotate(.5deg)} .col-card:hover .col-card__imgs img:nth-child(4){transform:scale(1.06) rotate(-.5deg)} /* Single image fallback */ .col-card__imgs.single{grid-template-columns:1fr} .col-card__imgs.single img{aspect-ratio:1;padding:1rem} /* Overlay badge count */ .col-card__badge{ position:absolute;bottom:.6rem;right:.6rem;z-index:3; font-family:var(--ff-body);font-size:.42rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase; color:var(--warm-white);background:var(--gold);padding:.2rem .6rem; } /* Card body */ .col-card__body{ padding:1.3rem 1.5rem 1.5rem; border-top:1px solid var(--border); display:flex;flex-direction:column;gap:.4rem; flex:1; } .col-card__name{ font-family:var(--ff-display);font-size:1.1rem;color:var(--charcoal);line-height:1.2; } .col-card__mr{ font-family:var(--dev);font-size:.78rem;color:var(--gold); line-height:1.4;min-height:1rem; } .col-card__desc{ font-family:var(--ff-display);font-style:italic; font-size:.85rem;color:var(--slate);line-height:1.65;margin-top:.2rem; } .col-card__foot{ display:flex;align-items:center;justify-content:space-between; margin-top:auto;padding-top:1rem;border-top:1px solid var(--border); } .col-card__cta{ font-family:var(--ff-body);font-size:.5rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase; color:var(--gold);display:flex;align-items:center;gap:.4rem; transition:gap .3s; } .col-card:hover .col-card__cta{gap:.7rem} .col-card__cta-arrow{display:block;width:18px;height:1px;background:var(--gold);transition:width .3s} .col-card:hover .col-card__cta-arrow{width:28px} .col-card__count{ font-family:var(--ff-body);font-size:.45rem;font-weight:300; letter-spacing:.18em;text-transform:uppercase;color:var(--slate); } /* ================================================================ SKELETON LOADER ================================================================ */ .skeleton{ position:fixed;inset:0;z-index:800; background:var(--warm-white); display:flex;align-items:center;justify-content:center; flex-direction:column;gap:1.2rem; transition:opacity .4s,visibility .4s; } .skeleton.hidden{opacity:0;visibility:hidden;pointer-events:none} .sk-logo{ font-family:var(--ff-display);font-size:1.1rem;color:var(--charcoal); letter-spacing:.06em;opacity:.5; } .sk-bar{ width:140px;height:1px;background:var(--border);position:relative;overflow:hidden; } .sk-bar::after{ content:'';position:absolute;inset:0; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:sk-slide 1.4s ease infinite; } @keyframes sk-slide{from{transform:translateX(-100%)}to{transform:translateX(100%)}} .sk-txt{ font-family:var(--ff-body);font-size:.48rem;font-weight:300; letter-spacing:.28em;text-transform:uppercase;color:var(--slate); } /* ================================================================ LIGHTBOX ================================================================ */ .lightbox{ position:fixed;inset:0;z-index:9999; background:rgba(0,0,0,.97); display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .3s; } .lightbox.open{opacity:1;pointer-events:auto} .lb-img{ max-width:90vw;max-height:88vh;object-fit:contain; border:1px solid rgba(200,168,75,.15); transition:opacity .2s; } .lb-close{ position:absolute;top:1.2rem;right:1.4rem; background:none;border:1px solid rgba(255,255,255,.16); color:#fff;width:42px;height:42px; display:flex;align-items:center;justify-content:center; font-size:1.2rem;transition:border-color .3s,color .3s; } .lb-close:hover{border-color:var(--gold);color:var(--gold)} .lb-nav{ position:absolute;top:50%;transform:translateY(-50%); background:rgba(200,168,75,.1);border:1px solid rgba(200,168,75,.28); color:var(--gold);width:46px;height:58px; display:flex;align-items:center;justify-content:center; font-size:1.5rem;transition:background .3s; } .lb-nav:hover{background:rgba(200,168,75,.26)} .lb-prev{left:1rem} .lb-next{right:1rem} .lb-cap{ position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%); font-family:var(--ff-body);font-size:.46rem;font-weight:300; letter-spacing:.2em;text-transform:uppercase;color:var(--slate); white-space:nowrap;background:rgba(7,6,5,.55);padding:.28rem .7rem; } /* ================================================================ FOOTER ================================================================ */ .footer{background:var(--cream);border-top:1px solid var(--border)} .footer__main{ width:var(--max-width);margin-inline:auto; padding:4rem 0 3rem; display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:3.5rem; } @media(max-width:860px){.footer__main{grid-template-columns:1fr;gap:2rem}} .f-name{font-family:var(--ff-display);font-size:1.2rem;color:var(--charcoal);display:block;margin-bottom:.2rem} .f-sub{font-family:var(--ff-body);font-size:.44rem;font-weight:200;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:1.2rem} .f-copy{font-family:var(--ff-display);font-style:italic;font-size:.88rem;color:var(--slate);line-height:1.8} .f-col-h{font-family:var(--ff-body);font-size:.5rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:1.2rem} .f-links{display:flex;flex-direction:column;gap:.72rem} .f-links a{font-family:var(--ff-display);font-size:.88rem;color:var(--slate);transition:color .3s,padding-left .3s} .f-links a:hover{color:var(--gold-light);padding-left:.4rem} .f-contact{display:flex;flex-direction:column;gap:.7rem} .f-row{display:flex;gap:.6rem;font-family:var(--ff-display);font-size:.85rem;color:var(--slate)} .f-row a{color:var(--slate);transition:color .3s} .f-row a:hover{color:var(--gold)} .footer__bot{ width:var(--max-width);margin-inline:auto; border-top:1px solid var(--border);padding-block:1.6rem; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem; } .footer__bot p{font-family:var(--ff-body);font-size:.5rem;font-weight:200;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)} .footer__bot .acc{color:var(--gold)} /* WhatsApp float */ .wa-bubble{ position:fixed;bottom:1.8rem;right:1.8rem;z-index:700; width:52px;height:52px;border-radius:50%;background:#25D366; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 22px rgba(37,211,102,.4); transition:transform .35s,box-shadow .35s; } .wa-bubble:hover{transform:scale(1.1);box-shadow:0 8px 36px rgba(37,211,102,.62)} .wa-bubble svg{width:26px;height:26px;fill:#fff} /* ================================================================ STATES ================================================================ */ .state-box{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1rem;padding:5rem 1rem; border:1px dashed var(--border); } .state-icon{font-size:2.5rem;opacity:.2} .state-txt{ font-family:var(--ff-body);font-size:.56rem;font-weight:300; letter-spacing:.22em;text-transform:uppercase;color:var(--slate); } .btn-retry{ font-family:var(--ff-body);font-size:.52rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase; color:var(--warm-white);background:var(--gold);border:none; padding:.6rem 1.6rem;cursor:pointer;margin-top:.4rem; transition:opacity .3s; } .btn-retry:hover{opacity:.85} /* ================================================================ ANIMATIONS ================================================================ */ @keyframes fadeUp{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} } /* ================================================================ RESPONSIVE EXTRAS ================================================================ */ @media(max-width:900px){ .nav__links,.nav__cta{display:none} .nav__burger{display:flex} } /* ================================================================ ANTI-GRAVITY FLOATING — Refined (max 8px, premium smooth) Individual CSS `translate` property — zero conflict with `transform`. Pure GPU composite. 60fps on all devices. ================================================================ */ /* ---- Keyframes — max 8px amplitude ---- */ @keyframes ag-float-hero { 0% { translate: 0 0px; } 35% { translate: 0 -8px; } 65% { translate: 0 -3px; } 100% { translate: 0 0px; } } @keyframes ag-float { 0%, 100% { translate: 0 0px; } 50% { translate: 0 -7px; } } @keyframes ag-float-sm { 0%, 100% { translate: 0 0px; } 50% { translate: 0 -5px; } } /* ---- Hero slide images ---- */ .hero-slide__img { animation: ag-float-hero 5s ease-in-out infinite; will-change: translate; transition: transform .55s var(--transition), filter .35s, translate .5s ease-in-out; } .hero-slide:nth-child(1) .hero-slide__img { animation-duration: 5.2s; animation-delay: 0s; } .hero-slide:nth-child(2) .hero-slide__img { animation-duration: 4.6s; animation-delay: -1.4s; } .hero-slide:nth-child(3) .hero-slide__img { animation-duration: 5.8s; animation-delay: -2.8s; } .hero-slide:nth-child(4) .hero-slide__img { animation-duration: 4.9s; animation-delay: -0.9s; } .hero-slide:hover .hero-slide__img { animation-play-state: paused; translate: 0 -5px; } /* Soft golden hover glow — not aggressive */ .hero-slide:hover { box-shadow: 0 12px 32px rgba(0,0,0,.42), 0 0 20px rgba(200,168,75,.10); } /* ---- Gallery tile images ---- */ .g-tile__img { animation: ag-float-sm 5.5s ease-in-out infinite; will-change: translate; transition: transform .55s var(--transition), filter .35s, translate .45s ease-in-out; } .g-tile:nth-child(3n+1) .g-tile__img { animation-delay: 0s; animation-duration: 5.5s; } .g-tile:nth-child(3n+2) .g-tile__img { animation-delay: -1.8s; animation-duration: 4.9s; } .g-tile:nth-child(3n) .g-tile__img { animation-delay: -3.4s; animation-duration: 5.8s; } .g-tile:hover .g-tile__img { animation-play-state: paused; translate: 0 -3px; } .g-tile:hover { box-shadow: 0 10px 28px rgba(0,0,0,.38), 0 0 16px rgba(200,168,75,.08); } /* ---- Collection card thumbnails ---- */ .col-card__imgs img { animation: ag-float-sm 5s ease-in-out infinite; will-change: translate; transition: transform .55s var(--transition), filter .35s, translate .45s ease-in-out; } .col-card__imgs img:nth-child(1) { animation-delay: 0s; animation-duration: 5.0s; } .col-card__imgs img:nth-child(2) { animation-delay: -1.6s; animation-duration: 5.5s; } .col-card__imgs img:nth-child(3) { animation-delay: -0.8s; animation-duration: 4.7s; } .col-card__imgs img:nth-child(4) { animation-delay: -2.4s; animation-duration: 5.2s; } .col-card:hover .col-card__imgs img { animation-play-state: paused; } .col-card:hover { box-shadow: 0 18px 48px rgba(0,0,0,.46), 0 0 0 1px rgba(200,168,75,.13), 0 0 36px rgba(200,168,75,.06); } /* ---- Mobile: reduce amplitude by 50% for comfort ---- */ @media (max-width: 768px) { @keyframes ag-float-hero { 0%,100%{translate:0 0} 50%{translate:0 -4px} } @keyframes ag-float { 0%,100%{translate:0 0} 50%{translate:0 -3px} } @keyframes ag-float-sm { 0%,100%{translate:0 0} 50%{translate:0 -2px} } /* Slower on mobile for battery/performance */ .hero-slide__img { animation-duration: 6s !important; } .g-tile__img { animation-duration: 7s !important; } } /* ---- Reduced-motion: honour OS accessibility setting ---- */ @media (prefers-reduced-motion: reduce) { .hero-slide__img, .g-tile__img, .col-card__imgs img { animation: none; translate: none; transition: transform .3s var(--transition), filter .3s; } } /* ── POLICY PAGES STYLING ────────────────────────── */ .wrap { width: var(--max-width); margin-inline: auto; padding-inline: var(--side-pad); } .content { padding-block: clamp(4rem, 10vw, 7rem) clamp(2rem, 5vw, 4rem); } .content h1 { font-family: var(--ff-display); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1.5rem; color: var(--gold); font-weight: 500; } .content h2 { font-family: var(--ff-display); font-size: clamp(1.25rem, 3vw, 1.8rem); margin-top: 2.5rem; margin-bottom: 1rem; color: var(--charcoal); font-weight: 500; } .content p { margin-bottom: 1.25rem; line-height: 1.8; color: var(--slate); } .content ul { margin-left: 2rem; margin-bottom: 1.5rem; list-style: disc; } .content li { margin-bottom: 0.5rem; color: var(--slate); } .f-row { display: flex; gap: 0.6rem; font-family: var(--ff-body); font-size: 0.95rem; color: var(--slate); margin-bottom: 1rem; } .f-row a { color: var(--gold); transition: color var(--transition); } .f-row a:hover { color: var(--gold-light); text-decoration: underline; } /* ── SECTION TEMPLATE STYLING (Task 6 & 7) ────────── */ .section { display: flex; gap: 40px; } .image-left { width: 50%; } .text-right { width: 50%; } .section img { width: 100%; height: auto; object-fit: cover; } @media (max-width: 768px) { .section { flex-direction: column; } .image-left, .text-right { width: 100%; } } /* ── HERO TEXT ONLY & CENTERING OVERRIDES ──────────────── */ .hero { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; min-height: 85vh !important; padding: 20px !important; background: var(--cream) !important; position: relative !important; width: 100% !important; overflow: hidden !important; aspect-ratio: auto !important; } .hero picture, .hero__image, .hero::before, .hero::after { display: none !important; } .hero-content { text-align: center !important; align-self: center !important; margin-inline: auto !important; max-width: 800px !important; padding: 20px !important; width: 100% !important; } .hero-brand { font-family: var(--ff-display) !important; font-size: clamp(28px, 5vw, 48px) !important; line-height: 1.2 !important; color: var(--charcoal) !important; margin-bottom: 1rem !important; text-shadow: none !important; } .hero-brand em { font-style: italic !important; color: var(--gold) !important; } .hero-tagline { font-size: clamp(14px, 2.5vw, 18px) !important; color: var(--slate) !important; font-weight: 300 !important; letter-spacing: 0.04em !important; margin-bottom: 1.5rem !important; line-height: 1.6 !important; max-width: 600px !important; margin-inline: auto !important; } .hero-divider { justify-content: center !important; } .buttons { display: flex !important; justify-content: center !important; gap: 12px !important; margin-top: 20px !important; flex-wrap: wrap !important; } .seo-hidden { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }