/* ============================================================ ANUKAMPA INTERNATIONAL — Core Stylesheet "Essence of Excellence" ============================================================ */ /* Google Fonts now loaded via + in each page's instead of @import, to remove the extra render-blocking round-trip and improve FCP/LCP. See head of any .html file. */ :root{ /* ---- Brand palette (from logo) ---- */ --emerald-950:#06150F; --emerald-900:#0A2E22; --emerald-800:#0F3D2C; --emerald-700:#15543A; --emerald-600:#1C6B49; --gold-500:#C9A24B; --gold-400:#D9B96B; --gold-300:#E8D9A8; --gold-100:#F4ECD6; --ivory:#F6F2E7; --ivory-dim:#EDE6D2; --ink:#19211C; --ink-soft:#3C453E; --line-on-dark: rgba(201,162,75,0.28); --line-on-light: rgba(25,33,28,0.12); --font-display:'Cormorant Garamond', Georgia, serif; --font-body:'Jost', 'Helvetica Neue', Arial, sans-serif; --maxw: 1240px; --pad: clamp(20px, 5vw, 64px); --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--font-body); background:var(--ivory); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; font-weight:400; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; line-height:1.08; letter-spacing:.005em; } p{ margin:0; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:var(--gold-400); color:var(--emerald-950); } /* focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } /* ---- Layout helpers ---- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); } .section{ padding:clamp(64px,9vw,128px) 0; position:relative; } .section--dark{ background:var(--emerald-900); color:var(--ivory); } .section--deepest{ background:var(--emerald-950); color:var(--ivory); } .section--ivory{ background:var(--ivory); color:var(--ink); } .section--dim{ background:var(--ivory-dim); color:var(--ink); } .eyebrow{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; font-weight:500; color:var(--gold-500); display:inline-flex; align-items:center; gap:14px; margin-bottom:18px; } .eyebrow::before{ content:''; width:28px; height:1px; background:var(--gold-500); display:inline-block; } .section--dark .eyebrow, .section--deepest .eyebrow{ color:var(--gold-400); } .h1{ font-size:clamp(2.6rem,6vw,5rem); } .h2{ font-size:clamp(2.1rem,4.4vw,3.4rem); } .h3{ font-size:clamp(1.5rem,2.6vw,2rem); } .lede{ font-family:var(--font-display); font-size:clamp(1.15rem,1.8vw,1.45rem); font-style:italic; font-weight:500; color:var(--ink-soft); max-width:62ch; } .section--dark .lede, .section--deepest .lede{ color:var(--gold-100); } .body-lg{ font-size:1.08rem; color:var(--ink-soft); max-width:60ch; } .section--dark .body-lg, .section--deepest .body-lg{ color:rgba(246,242,231,.78); } .center{ text-align:center; margin-left:auto; margin-right:auto; } .grid{ display:grid; gap:var(--pad); } .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(4,1fr); } @media (max-width:980px){ .g3,.g4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .g2,.g3,.g4{ grid-template-columns:1fr; } } /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 32px; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500; border:1px solid transparent; border-radius:2px; transition:all .35s var(--ease); white-space:nowrap; } .btn-gold{ background:linear-gradient(135deg,var(--gold-400),var(--gold-500)); color:var(--emerald-950); } .btn-gold:hover{ background:linear-gradient(135deg,var(--gold-300),var(--gold-400)); transform:translateY(-2px); box-shadow:0 10px 28px rgba(201,162,75,.35); } .btn-line{ border-color:var(--gold-500); color:var(--gold-400); background:transparent; } .section--ivory .btn-line, .section--dim .btn-line{ color:var(--emerald-800); border-color:var(--emerald-800); } .btn-line:hover{ background:var(--gold-500); color:var(--emerald-950); border-color:var(--gold-500); } .btn svg{ width:14px; height:14px; transition:transform .35s var(--ease); } .btn:hover svg{ transform:translateX(4px); } /* ---- Ring motif (signature element from the logo) ---- */ .ring{ border-radius:50%; border:1px solid var(--gold-500); position:relative; } .ring-deco{ position:absolute; border:1px solid var(--line-on-dark); border-radius:50%; pointer-events:none; } /* ---- Header / Nav ---- */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(10,46,34,0); transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .3s var(--ease); padding:22px 0; } .site-header.scrolled{ background:rgba(6,21,15,.92); backdrop-filter:blur(14px); box-shadow:0 8px 30px rgba(0,0,0,.25); padding:13px 0; border-bottom:1px solid var(--line-on-dark); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand{ display:flex; align-items:center; gap:12px; } .brand img{ height:46px; width:auto; transition:height .3s var(--ease); } .scrolled .brand img{ height:38px; } .brand-text{ display:flex; flex-direction:column; line-height:1.1; } .brand-text strong{ font-family:var(--font-display); color:var(--gold-300); font-size:1.18rem; letter-spacing:.06em; font-weight:600; } .brand-text span{ font-family:var(--font-body); color:var(--gold-500); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; margin-top:3px; } .nav-main{ display:flex; align-items:center; gap:38px; } .nav-main a{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-100); opacity:.85; position:relative; padding:6px 0; transition:opacity .25s var(--ease); } .nav-main a:hover{ opacity:1; } .nav-main a.active{ opacity:1; color:var(--gold-400); } .nav-main a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold-400); transition:width .3s var(--ease); } .nav-main a:hover::after{ width:100%; } .nav-cta{ display:flex; align-items:center; gap:18px; } .nav-cta .btn{ padding:11px 22px; font-size:.7rem; } .nav-toggle{ display:none; } @media (max-width:980px){ .nav-main{ position:fixed; inset:0 0 0 auto; width:min(82vw,360px); height:100vh; background:var(--emerald-950); flex-direction:column; align-items:flex-start; padding:110px 36px 36px; gap:26px; transform:translateX(100%); transition:transform .45s var(--ease); border-left:1px solid var(--line-on-dark); } .nav-main.open{ transform:translateX(0); } .nav-main a{ font-size:1rem; } .nav-cta{ display:none; } .nav-toggle{ display:flex; flex-direction:column; gap:5px; width:30px; z-index:200; background:none; border:none; padding:6px; } .nav-toggle span{ height:1px; width:100%; background:var(--gold-300); transition:transform .3s var(--ease), opacity .3s var(--ease); } .nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .nav-toggle.open span:nth-child(2){ opacity:0; } .nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } } /* ---- Footer ---- */ .site-footer{ background:var(--emerald-950); color:var(--gold-100); padding:80px 0 28px; position:relative; overflow:hidden; } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:56px; padding-bottom:56px; border-bottom:1px solid var(--line-on-dark); } @media (max-width:880px){ .footer-top{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } } .footer-top h4{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-500); margin-bottom:20px; font-weight:500; } .footer-top a, .footer-top li{ font-size:.92rem; color:rgba(246,242,231,.75); margin-bottom:12px; display:block; } .footer-top a:hover{ color:var(--gold-400); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:26px; font-size:.78rem; color:rgba(246,242,231,.5); } .social-row{ display:flex; gap:16px; } .social-row a{ width:36px; height:36px; border:1px solid var(--line-on-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.3s var(--ease); } .social-row a:hover{ border-color:var(--gold-500); background:rgba(201,162,75,.1); } .social-row svg{ width:15px; height:15px; } /* ---- Cards ---- */ .card{ background:var(--ivory); border:1px solid var(--line-on-light); padding:40px 32px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(10,46,34,.1); border-color:var(--gold-500); } .card-dark{ background:var(--emerald-800); border:1px solid var(--line-on-dark); color:var(--ivory); } .card-dark:hover{ box-shadow:0 24px 48px rgba(0,0,0,.35); } /* ---- Reveal on scroll ---- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{ opacity:1; transform:translateY(0); } /* ---- WhatsApp floating button ---- */ .wa-float{ position:fixed; bottom:26px; left:26px; z-index:90; width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#25D366,#1DA851); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.3); animation:wa-pulse 2.6s infinite; } .wa-float svg{ width:28px; height:28px; fill:#fff; } @keyframes wa-pulse{ 0%,100%{ box-shadow:0 10px 30px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,.5); } 50%{ box-shadow:0 10px 30px rgba(0,0,0,.3), 0 0 0 12px rgba(37,211,102,0); } } /* ---- Breadcrumb / page hero (interior pages) ---- */ .page-hero{ background:var(--emerald-950); color:var(--ivory); padding:168px 0 88px; position:relative; overflow:hidden; } .page-hero .crumb{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-400); margin-bottom:18px; display:flex; gap:10px; align-items:center; } .page-hero .crumb a{ color:rgba(246,242,231,.6); } .page-hero .crumb a:hover{ color:var(--gold-300); } /* ---- Misc utility ---- */ .mt-xs{ margin-top:10px; } .mt-s{ margin-top:18px; } .mt-m{ margin-top:32px; } .mt-l{ margin-top:38px; } .mt-xl{ margin-top:88px; } .flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-s{ gap:12px; } .gap-m{ gap:24px; } .gap-l{ gap:40px; } .tag{ display:inline-block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:6px 14px; border:1px solid var(--gold-500); color:var(--gold-500); border-radius:999px; } .divider{ height:1px; background:var(--line-on-light); width:100%; } .section--dark .divider, .section--deepest .divider{ background:var(--line-on-dark); } .stat-num{ font-family:var(--font-display); font-size:clamp(2.4rem,4vw,3.4rem); color:var(--gold-400); font-weight:700; } .stat-label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(246,242,231,.7); margin-top:6px; } .skip-link{ position:absolute; left:-999px; top:0; background:var(--gold-500); color:var(--emerald-950); padding:12px 20px; z-index:1000; font-size:.85rem; } .skip-link:focus{ left:16px; top:16px; } /* ============ PHOTO IMAGERY STYLES ============ */ .photo-hero-overlay { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: 0.28; mix-blend-mode: luminosity; } .photo-panel { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 32px 64px rgba(10,46,34,.22); } .photo-panel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; } .photo-panel:hover img { transform: scale(1.04); } .photo-panel-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,46,34,0.72) 100%); pointer-events: none; } .photo-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .photo-gallery-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; overflow: hidden; border-radius: 8px; } .photo-strip > div { position: relative; aspect-ratio: 3/4; overflow: hidden; } .photo-strip > div img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; filter: saturate(0.9); } .photo-strip > div:hover img { transform: scale(1.08); } .photo-strip > div .strip-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 14px 14px; background: linear-gradient(transparent, rgba(10,46,34,0.85)); color: var(--gold-300); font-family: var(--font-display); font-style: italic; font-size: 1rem; text-align: center; } .scent-card-img { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; margin-bottom: 20px; } .scent-card-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.5s ease; } .scent-card-img:hover img { transform: scale(1.05); } .hero-photo-right { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; overflow: hidden; } .hero-photo-right::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--emerald-950) 0%, transparent 40%); z-index: 1; } .hero-photo-right img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; mix-blend-mode: multiply; } .img-rounded { border-radius: 8px; overflow: hidden; box-shadow: 0 24px 56px rgba(10,46,34,.18); } .img-rounded img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ MEGA MENU ============================================================ */ .has-mega{ position:relative; } .has-mega > a{ display:flex; align-items:center; gap:6px; cursor:pointer; } .has-mega > a svg{ width:11px; height:11px; transition:transform .3s var(--ease); } .has-mega:hover > a svg, .has-mega.open > a svg{ transform:rotate(180deg); } .mega-panel{ position:fixed; left:0; right:0; top:80px; background:rgba(6,21,15,.98); backdrop-filter:blur(20px); border-bottom:1px solid var(--line-on-dark); box-shadow:0 30px 60px rgba(0,0,0,.4); padding:48px 0 48px; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; z-index:99; max-height:85vh; overflow-y:auto; } .has-mega.open .mega-panel{ opacity:1; visibility:visible; transform:translateY(0); } .mega-panel .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px 32px; } .mega-cat{ display:flex; align-items:flex-start; gap:14px; padding:14px 10px; border-radius:8px; transition:background .25s var(--ease), transform .25s var(--ease); } .mega-cat:hover{ background:rgba(201,162,75,.08); transform:translateX(4px); } .mega-cat .mega-num{ font-family:var(--font-display); font-size:1.3rem; color:var(--gold-500); opacity:.55; min-width:28px; } .mega-cat strong{ display:block; font-family:var(--font-body); font-size:.86rem; color:var(--gold-100); font-weight:500; letter-spacing:.01em; } .mega-cat span{ display:block; font-size:.76rem; color:rgba(246,242,231,.55); margin-top:4px; line-height:1.5; } .mega-panel-footer{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line-on-dark); } .mega-panel-footer p{ font-family:var(--font-display); font-style:italic; color:var(--gold-300); font-size:1.02rem; } @media (max-width:980px){ .mega-panel{ position:static; opacity:1; visibility:visible; transform:none; max-height:0; overflow:hidden; padding:0; border:none; box-shadow:none; background:transparent; transition:max-height .4s var(--ease); } .has-mega.open .mega-panel{ max-height:2000px; padding:10px 0 20px; } .mega-panel .wrap{ grid-template-columns:1fr; padding:0; gap:0; } .mega-cat{ padding:12px 6px; border-bottom:1px solid rgba(201,162,75,.1); } .mega-panel-footer{ display:none; } } /* ============================================================ PRODUCT TOOLBAR: search + filters + sort ============================================================ */ .product-toolbar{ background:rgba(255,255,255,.65); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.5); box-shadow:0 20px 50px rgba(10,46,34,.08); border-radius:16px; padding:26px 28px; position:sticky; top:14px; z-index:40; margin-top:-64px; } @media (max-width:980px){ .product-toolbar{ margin-top:-40px; position:relative; top:0; } } .toolbar-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; } .search-box{ flex:1 1 260px; position:relative; display:flex; align-items:center; } .search-box svg{ position:absolute; left:16px; width:16px; height:16px; color:var(--emerald-700); opacity:.6; } .search-box input{ width:100%; padding:13px 16px 13px 44px; border-radius:999px; border:1px solid var(--line-on-light); background:rgba(255,255,255,.8); font-family:var(--font-body); font-size:.88rem; color:var(--ink); transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .search-box input:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(201,162,75,.14); } .select-pill{ padding:12px 36px 12px 18px; border-radius:999px; border:1px solid var(--line-on-light); background:rgba(255,255,255,.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F3D2C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; appearance:none; -webkit-appearance:none; font-family:var(--font-body); font-size:.82rem; color:var(--ink-soft); cursor:pointer; transition:border-color .3s var(--ease); } .select-pill:focus{ outline:none; border-color:var(--gold-500); } .results-count{ font-size:.78rem; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; white-space:nowrap; } .tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; } .filter-chip{ font-size:.72rem; letter-spacing:.06em; padding:7px 15px; border-radius:999px; border:1px solid var(--line-on-light); color:var(--ink-soft); background:rgba(255,255,255,.6); cursor:pointer; transition:all .25s var(--ease); white-space:nowrap; } .filter-chip:hover{ border-color:var(--gold-500); color:var(--emerald-800); } .filter-chip.active{ background:linear-gradient(135deg,var(--gold-400),var(--gold-500)); color:var(--emerald-950); border-color:var(--gold-500); font-weight:500; } /* ============================================================ PRODUCT GRID + CARDS ============================================================ */ .product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } @media (max-width:1080px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } } @media (max-width:560px){ .product-grid{ grid-template-columns:1fr; gap:20px; } } .pcard{ position:relative; background:rgba(255,255,255,.55); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.6); border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(10,46,34,.07); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); opacity:0; transform:translateY(24px); animation:pcard-in .7s var(--ease) forwards; } @keyframes pcard-in{ to{ opacity:1; transform:translateY(0); } } .pcard:hover{ transform:translateY(-10px); box-shadow:0 32px 64px rgba(10,46,34,.18); border-color:var(--gold-400); } .pcard-img-wrap{ position:relative; aspect-ratio:3/4; overflow:hidden; background:linear-gradient(160deg,#f4ecd6,#ede6d2); } .pcard-img-wrap img{ width:100%; height:100%; object-fit:contain; object-position:center; padding:14px; transition:transform .7s var(--ease), filter .5s var(--ease); } .pcard:hover .pcard-img-wrap img{ transform:scale(1.1); } .pcard-cat-badge{ position:absolute; top:14px; left:14px; z-index:3; background:rgba(10,46,34,.82); backdrop-filter:blur(6px); color:var(--gold-300); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px; border:1px solid rgba(201,162,75,.35); } .pcard-quick{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(-8px) scale(.85); transition:opacity .35s var(--ease), transform .35s var(--ease); border:none; box-shadow:0 8px 20px rgba(0,0,0,.18); } .pcard:hover .pcard-quick{ opacity:1; transform:translateY(0) scale(1); } .pcard-quick svg{ width:16px; height:16px; color:var(--emerald-800); } .pcard-quick:hover{ background:var(--gold-400); } .pcard-body{ padding:20px 20px 22px; position:relative; } .pcard-eyebrow{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-500); font-weight:500; } .pcard-title{ font-family:var(--font-display); font-size:1.18rem; font-weight:600; color:var(--emerald-900); --font-display: none; margin-top:6px; line-height:1.25; min-height:1.5em; } .pcard-apps{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .pcard-apps span{ font-size:.62rem; letter-spacing:.03em; color:var(--ink-soft); background:var(--ivory-dim); padding:3px 9px; border-radius:999px; } .pcard-actions{ display:flex; gap:8px; margin-top:16px; } .pcard-actions .btn{ flex:1; justify-content:center; padding:11px 10px; font-size:.66rem; letter-spacing:.1em; } .pcard-actions .btn-wa{ background:linear-gradient(135deg,#25D366,#1DA851); color:#fff; flex:0 0 44px; padding:11px; } .pcard-actions .btn-wa svg{ width:16px; height:16px; fill:#fff; margin:0 auto; } /* Skeleton loader */ .pcard-skel{ border-radius:18px; overflow:hidden; background:var(--ivory-dim); animation:skel-pulse 1.4s ease-in-out infinite; } .pcard-skel .sk-img{ aspect-ratio:3/4; background:#e4dcc4; } .pcard-skel .sk-line{ height:12px; background:#e4dcc4; margin:16px 20px; border-radius:4px; } @keyframes skel-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } } .no-results{ text-align:center; padding:80px 20px; color:var(--ink-soft); } .no-results svg{ width:48px; height:48px; color:var(--gold-500); margin-bottom:16px; opacity:.6; } /* ============================================================ QUICK VIEW MODAL ============================================================ */ .modal-overlay{ position:fixed; inset:0; z-index:300; background:rgba(6,21,15,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; } .modal-overlay.open{ opacity:1; visibility:visible; } .modal-box{ background:var(--ivory); border-radius:20px; max-width:920px; width:100%; max-height:88vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; position:relative; transform:scale(.92) translateY(20px); transition:transform .4s var(--ease); box-shadow:0 50px 100px rgba(0,0,0,.4); } .modal-overlay.open .modal-box{ transform:scale(1) translateY(0); } @media (max-width:760px){ .modal-box{ grid-template-columns:1fr; } } .modal-img{ background:linear-gradient(160deg,#f4ecd6,#ede6d2); display:flex; align-items:center; justify-content:center; padding:30px; } .modal-img img{ max-width:100%; max-height:60vh; object-fit:contain; } .modal-info{ padding:38px 34px; } .modal-close{ position:absolute; top:16px; right:16px; z-index:5; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.15); } .modal-close svg{ width:16px; height:16px; } .modal-info .pcard-eyebrow{ font-size:.7rem; } .modal-info h2{ font-family:var(--font-display); font-size:1.7rem; color:var(--emerald-900); margin-top:8px; } .modal-info p.desc{ font-size:.92rem; color:var(--ink-soft); margin-top:16px; line-height:1.7; } .modal-apps{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; } .modal-apps span{ font-size:.68rem; padding:6px 13px; border-radius:999px; background:var(--ivory-dim); color:var(--ink-soft); } .modal-sku{ font-size:.76rem; color:var(--ink-soft); margin-top:14px; } .modal-actions{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; } /* ============================================================ GALLERY: MASONRY + LIGHTBOX ============================================================ */ .masonry{ column-count:4; column-gap:20px; } @media (max-width:1080px){ .masonry{ column-count:3; } } @media (max-width:760px){ .masonry{ column-count:2; } } @media (max-width:480px){ .masonry{ column-count:1; } } .masonry-item{ break-inside:avoid; margin-bottom:20px; position:relative; border-radius:14px; overflow:hidden; box-shadow:0 12px 30px rgba(10,46,34,.1); cursor:zoom-in; opacity:0; transform:translateY(20px) scale(.97); animation:mfade .6s var(--ease) forwards; } @keyframes mfade{ to{ opacity:1; transform:translateY(0) scale(1); } } .masonry-item img{ width:100%; display:block; transition:transform .6s var(--ease), filter .5s ease; } .masonry-item:hover img{ transform:scale(1.08); } .masonry-caption{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; background:linear-gradient(180deg, transparent 45%, rgba(6,21,15,.88) 100%); opacity:0; transition:opacity .4s var(--ease); } .masonry-item:hover .masonry-caption{ opacity:1; } .masonry-caption strong{ color:var(--gold-300); font-family:var(--font-display); font-size:1.05rem; } .masonry-caption span{ color:rgba(246,242,231,.75); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-top:4px; display:block; } .masonry-zoom{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.8); transition:.35s var(--ease); } .masonry-item:hover .masonry-zoom{ opacity:1; transform:scale(1); } .masonry-zoom svg{ width:15px; height:15px; color:var(--emerald-800); } .lightbox{ position:fixed; inset:0; z-index:400; background:rgba(3,10,7,.96); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; padding:40px; } .lightbox.open{ opacity:1; visibility:visible; } .lightbox-img-wrap{ max-width:90vw; max-height:82vh; overflow:hidden; position:relative; cursor:zoom-in; border-radius:10px; } .lightbox-img-wrap img{ max-width:90vw; max-height:82vh; object-fit:contain; display:block; transition:transform .4s var(--ease); } .lightbox-img-wrap.zoomed{ cursor:zoom-out; } .lightbox-img-wrap.zoomed img{ transform:scale(1.9); } .lightbox-cap{ position:absolute; bottom:-52px; left:0; right:0; text-align:center; color:var(--gold-200); font-family:var(--font-display); font-size:1.1rem; font-style:italic; } .lightbox-close, .lightbox-nav{ position:fixed; z-index:5; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.3s var(--ease); backdrop-filter:blur(6px); } .lightbox-close:hover, .lightbox-nav:hover{ background:var(--gold-500); border-color:var(--gold-500); } .lightbox-close svg, .lightbox-nav svg{ width:18px; height:18px; color:#fff; } .lightbox-close{ top:26px; right:26px; } .lightbox-prev{ left:26px; top:50%; transform:translateY(-50%); } .lightbox-next{ right:26px; top:50%; transform:translateY(-50%); } @media (max-width:640px){ .lightbox-prev,.lightbox-next{ width:38px; height:38px; } .lightbox{ padding:16px; } } .gallery-loader{ text-align:center; padding:40px 0; color:var(--ink-soft); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; } .gallery-loader .spin{ width:22px; height:22px; border:2px solid var(--line-on-light); border-top-color:var(--gold-500); border-radius:50%; margin:0 auto 10px; animation:spin 0.9s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ============================================================ PRODUCT DETAIL PAGE ============================================================ */ .pdp-gallery{ position:sticky; top:110px; } @media (max-width:980px){ .pdp-gallery{ position: sticky;} } @media (max-width:640px){ .pdp-gallery{ position: static;} } .pdp-main-img{ border-radius:18px; overflow:hidden; background:linear-gradient(160deg,#f4ecd6,#ede6d2); aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; box-shadow:0 30px 70px rgba(10,46,34,.15); position:relative; cursor:zoom-in; } .pdp-main-img img{ width:100%; height:100%; object-fit:contain; padding:20px; transition:transform .5s var(--ease); } .pdp-main-img:hover img{ transform:scale(1.06); } .pdp-zoom-hint{ position:absolute; bottom:16px; right:16px; background:rgba(10,46,34,.8); color:var(--gold-300); font-size:.68rem; letter-spacing:.06em; padding:8px 14px; border-radius:999px; text-transform:uppercase; } .pdp-badge{ display:inline-block; background:linear-gradient(135deg,var(--gold-400),var(--gold-500)); color:var(--emerald-950); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px; font-weight:600; } .pdp-app-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; } .pdp-app-item{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line-on-light); border-radius:10px; padding:12px 14px; font-size:.84rem; color:var(--ink-soft); } .pdp-app-item svg{ width:16px; height:16px; color:var(--gold-500); flex-shrink:0; } .pdp-spec-row{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line-on-light); font-size:.88rem; } .pdp-spec-row strong{ color:var(--emerald-900); font-weight:500; } .pdp-spec-row span{ color:var(--ink-soft); padding-left: 8px; text-align: end; } .related-scroll{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } @media (max-width:980px){ .related-scroll{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .related-scroll{ grid-template-columns:1fr; } } /* glass utility */ .glass{ background:rgba(255,255,255,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.6); } .glass-dark{ background:rgba(10,46,34,.5); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(201,162,75,.2); } /* toast */ .toast{ position:fixed; bottom:100px; right:26px; z-index:500; background:var(--emerald-950); color:var(--gold-200); padding:14px 22px; border-radius:10px; font-size:.85rem; box-shadow:0 20px 40px rgba(0,0,0,.3); border:1px solid var(--line-on-dark); transform:translateY(20px); opacity:0; transition:.4s var(--ease); pointer-events:none; } .toast.show{ transform:translateY(0); opacity:1; } /* ============================================================ MOBILE RESPONSIVE FIXES — appended block Only touches small-screen (<=980px) behaviour + a global overflow safety-net. Nothing here changes desktop layout, colors, fonts, spacing, or JS-driven functionality. ============================================================ */ /* 1) Belt-and-braces: stop the page itself from ever scrolling sideways, on every device (html was missing overflow-x:hidden; only body had it, and some mobile browsers scroll instead of , which is what let the homepage scroll horizontally). */ html{ overflow-x:hidden; max-width:100%; } body{ max-width:100%; } /* Any accidentally-oversized embed/media gets clipped to the viewport instead of pushing the page wider. */ svg, video, iframe, table{ max-width:100%; } @media (max-width:980px){ /* 2) The mobile nav panel is `position:fixed; height:100vh` with no scroll of its own. With 7 main links + the 12-item Products mega-panel open, the content is taller than the screen and the lower items (and on short screens, even the Products toggle itself) end up unreachable — this is why "Products" and the submenu appeared not to open on phones. Making the panel scrollable internally fixes this without touching any markup or JS: */ .nav-main{ overflow-y:auto; -webkit-overflow-scrolling:touch; height:100vh; height:100dvh; /* accounts for mobile browser toolbars, falls back to 100vh above on older browsers */ padding-bottom:60px; } /* 3) Give the open panel and the hamburger button a z-index high enough to sit above other fixed elements on the page (the WhatsApp button, back-to-top button, etc.), so taps always reach the menu instead of whatever is layered on top of it. */ .nav-main{ z-index:1000; } .nav-toggle{ position:relative; z-index:1001; } /* 4) Let the Products submenu expand to its full height inside the now-scrollable nav panel, instead of being capped (it was already effectively hidden below the fold on most phones). */ .has-mega.open .mega-panel{ max-height:none; } /* 5) Hide floating action buttons (WhatsApp / back-to-top) while the mobile menu is open so they can never overlap/blockmenu taps. (Progressive enhancement — harmless if a browser doesn't support :has(), the menu still works via the scroll fix above.) */ body:has(.nav-main.open) .wa-float, body:has(.nav-main.open) .back-to-top{ display:none; } } /* 6) Narrow-phone tidy-ups (no layout/structure change, just preventing edge-to-edge overflow on very small widths). */ @media (max-width:480px){ .hero-glass-panel{ gap:18px 24px; padding:18px 20px; } .fp-track-wrap{ width:100%; } } /* Arrow pointer CSS */ .sparkle-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; background: transparent !important; } .sparkle-container canvas { display: block; width: 100%; height: 100%; background: transparent !important; } .arrow-cursor { position: fixed; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); font-size: 48px; filter: drop-shadow(0 2px 8px rgba(184, 134, 11, 0.3)); opacity: 0.95; }