/* ========================================================= BASE FRAGRANCES — "Desert Noir" Design tokens ========================================================= */ :root{ --black:#000000; --charcoal:#161311; --charcoal-2:#1f1b17; --ivory:#efe8db; --ivory-dim:#a89f8d; --gold:#d4af37; --gold-bright:#f0d488; --gold-dim:#8a7028; --whatsapp:#25D366; --whatsapp-dark:#1da851; --serif:'Cinzel', serif; --sans:'Jost', sans-serif; --arabic:'Amiri', serif; --ease:cubic-bezier(.22,.61,.36,1); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;overflow-x:hidden;width:100%;} [id]{scroll-margin-top:100px;} body{ background:var(--black); color:var(--ivory); font-family:var(--sans); font-weight:300; overflow-x:hidden; width:100%; line-height:1.6; } a{color:inherit;text-decoration:none;} ul{list-style:none;} button{font-family:inherit;cursor:pointer;} ::selection{background:var(--gold);color:var(--black);} ::-webkit-scrollbar{width:8px;} ::-webkit-scrollbar-track{background:var(--black);} ::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:20px;} /* On touch devices, hide the custom gold scrollbar thumb/track on scrollable containers (the product modal's internal scroll area in particular). Mobile browsers already show their own transient OS scroll indicator, so the extra 8px gold bar was rendering as a permanent vertical gold stripe down the side of the modal on real phones. Desktop keeps the existing thin gold scrollbar. */ @media (hover:none) and (pointer:coarse){ ::-webkit-scrollbar{width:0;height:0;display:none;} } :focus-visible{outline:1.5px solid var(--gold);outline-offset:3px;} /* ========================================================= LOADER ========================================================= */ /* Set by an inline script in when the splash has already played once this browser session, so it doesn't replay on every internal page-to-page navigation across this multi-page site. */ .no-loader #loader{display:none!important;} #loader{ position:fixed;inset:0;background:#000; display:flex;align-items:center;justify-content:center; z-index:9999; animation:loaderOut .6s ease forwards; animation-delay:1s; } .loader-mark{ position:relative; width:440px;height:440px; } .loader-glow{ position:absolute;top:50%;left:50%; width:380px;height:380px; transform:translate(calc(-50% - 21px), calc(-50% + 41px)); background:radial-gradient(circle, rgba(212,175,55,.18) 0%, transparent 70%); opacity:0; animation:glowFade 1.5s ease forwards; animation-delay:.2s; } .loader-ring-outer{ position:absolute;top:50%;left:50%; width:440px;height:440px; opacity:0; animation:ringSpin 10s linear infinite, ringFadeOuter .8s ease forwards; animation-delay:0s, .1s; } .loader-ring-outer circle{ fill:none;stroke:var(--gold-dim);stroke-width:1; stroke-dasharray:6 10; } .loader-ring-ticks{ position:absolute;top:50%;left:50%; width:380px;height:380px; opacity:0; animation:ringSpinReverse 6s linear infinite, ringFadeInner .8s ease forwards; animation-delay:0s, .4s; } .loader-ring-ticks circle{ fill:none;stroke:var(--gold-dim);stroke-width:1; stroke-dasharray:1 7; } .loader-logo-wrap{ position:absolute;top:50%;left:50%; width:280px; transform:translate(-50%,-50%) scale(.85); opacity:0; animation:logoPopIn .65s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:.15s; } .loader-logo{ width:100%;height:auto;display:block; filter:drop-shadow(0 0 25px rgba(212,175,55,.4)); animation:logoGlow 2s ease-in-out infinite; animation-delay:.8s; } @keyframes glowFade{to{opacity:1;}} @keyframes ringFadeOuter{to{opacity:.5;}} @keyframes ringFadeInner{to{opacity:.35;}} @keyframes logoPopIn{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.85);} 100%{opacity:1;transform:translate(-50%,-50%) scale(1);} } @keyframes logoGlow{ 0%,100%{filter:drop-shadow(0 0 18px rgba(212,175,55,.3));} 50%{filter:drop-shadow(0 0 38px rgba(212,175,55,.65));} } @keyframes ringSpin{ from{transform:translate(calc(-50% - 21px), calc(-50% + 41px)) rotate(0deg);} to{transform:translate(calc(-50% - 21px), calc(-50% + 41px)) rotate(360deg);} } @keyframes ringSpinReverse{ from{transform:translate(calc(-50% - 21px), calc(-50% + 41px)) rotate(360deg);} to{transform:translate(calc(-50% - 21px), calc(-50% + 41px)) rotate(0deg);} } @keyframes loaderOut{to{opacity:0;visibility:hidden;pointer-events:none;}} /* ========================================================= HEADER ========================================================= */ #siteHeader{ position:fixed;top:0;left:0;width:100%;z-index:1000; background:rgba(0,0,0,.35);backdrop-filter:blur(18px); transition:.4s var(--ease); } #siteHeader.scrolled{ background:rgba(0,0,0,.85);backdrop-filter:blur(16px); } #siteHeader nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; padding:0 32px; } .logo{ display:flex; align-items:center; height:100%; } .logo-img{ height:68px; width:auto; display:block; } .logo span{ display:block;font-size:.55rem;letter-spacing:5px;color:var(--ivory-dim); font-family:var(--sans); } .nav-links{display:flex;gap:38px;} .nav-links a{ font-size:.85rem;letter-spacing:1.5px;color:var(--ivory-dim);position:relative; transition:.3s; } .nav-links a::after{ content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px; background:var(--gold);transition:.35s var(--ease); } .nav-links a:hover{color:var(--gold-bright);} .nav-links a:hover::after{width:100%;} .nav-links a.current{color:var(--gold-bright);} .nav-links a.current::after{width:100%;} .nav-whatsapp{ width:38px;height:38px;border-radius:50%;border:1px solid var(--gold-dim); display:flex;align-items:center;justify-content:center;transition:.35s; flex-shrink:0; } .nav-whatsapp svg{width:18px;height:18px;fill:var(--gold);} .nav-whatsapp:hover{background:var(--gold);border-color:var(--gold);} .nav-whatsapp:hover svg{fill:var(--black);} .nav-actions{display:flex;align-items:center;gap:14px;} .nav-cart{ position:relative; width:38px;height:38px;border-radius:50%;border:1px solid var(--gold-dim); display:flex;align-items:center;justify-content:center;transition:.35s; flex-shrink:0;background:transparent;color:var(--gold); } .nav-cart svg{width:18px;height:18px;} .nav-cart:hover{background:var(--gold);border-color:var(--gold);color:var(--black);} .cart-badge{ position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px; border-radius:50%;background:var(--gold);color:var(--black); font-size:.65rem;font-weight:600;line-height:18px;text-align:center; transform:scale(0);transition:.3s var(--ease);font-family:var(--sans); } .cart-badge.show{transform:scale(1);} .nav-account{ position:relative; width:38px;height:38px;border-radius:50%;border:1px solid var(--gold-dim); display:flex;align-items:center;justify-content:center;transition:.35s; flex-shrink:0;background:transparent;color:var(--gold); } .nav-account svg{width:18px;height:18px;} .nav-account:hover{background:var(--gold);border-color:var(--gold);color:var(--black);} #navToggle{ display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px; position:relative;z-index:2001; } #navToggle span{width:24px;height:1.5px;background:var(--gold);display:block;} /* ========================================================= CART DRAWER ========================================================= */ .cart-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px); z-index:2500;opacity:0;pointer-events:none;transition:.4s var(--ease); } .cart-overlay.show{opacity:1;pointer-events:auto;} .cart-drawer{ position:fixed;top:0;right:0;height:100vh;width:min(420px,92vw); background:linear-gradient(165deg,var(--charcoal-2),#0a0806); border-left:1px solid rgba(212,175,55,.2); z-index:2600;transform:translateX(100%);transition:.5s var(--ease); display:flex;flex-direction:column;padding:34px 26px 26px; } .cart-drawer.open{transform:translateX(0);} .cart-drawer-head{position:relative;margin-bottom:22px;padding-right:30px;} .cart-drawer-head .eyebrow{margin-bottom:6px;} .cart-drawer-head h3{ font-family:var(--serif);color:var(--gold);font-size:1.5rem;letter-spacing:1px; } .cart-drawer-head .close{ position:absolute;top:-6px;right:-6px;width:34px;height:34px;border-radius:50%; border:1px solid rgba(212,175,55,.3);background:transparent;color:var(--gold);font-size:20px; display:flex;align-items:center;justify-content:center;transition:.3s; } .cart-drawer-head .close:hover{background:var(--gold);color:var(--black);transform:rotate(90deg);} .cart-items{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-right:4px;} .cart-item{ display:flex;gap:14px;align-items:flex-start; border:1px solid rgba(212,175,55,.14);border-radius:8px;padding:12px; position:relative;background:rgba(255,255,255,.02); } .cart-item-media{ width:56px;height:70px;flex-shrink:0;border-radius:4px;overflow:hidden; display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3); } .cart-item-media img,.cart-item-media svg{width:100%;height:100%;object-fit:cover;} .cart-item-info{flex:1;min-width:0;} .cart-item-info h4{font-family:var(--serif);color:var(--gold-bright);font-size:1rem;letter-spacing:.5px;margin-bottom:2px;} .cart-item-variant{font-size:.75rem;color:var(--ivory-dim);margin-bottom:10px;text-transform:capitalize;} .cart-item-row{display:flex;align-items:center;justify-content:space-between;gap:10px;} .cart-qty{display:flex;align-items:center;gap:10px;} .qty-btn{ width:24px;height:24px;border-radius:50%;border:1px solid rgba(212,175,55,.3); background:transparent;color:var(--gold);font-size:.9rem;line-height:1; display:flex;align-items:center;justify-content:center;transition:.25s; } .qty-btn:hover{background:var(--gold);color:var(--black);} .cart-qty span{font-size:.85rem;color:var(--ivory);min-width:14px;text-align:center;} .cart-item-price{font-size:.85rem;color:var(--gold);font-weight:500;} .cart-item-remove{ position:absolute;top:8px;right:8px;background:none;border:none;color:var(--ivory-dim); font-size:18px;line-height:1;width:22px;height:22px;transition:.25s; } .cart-item-remove:hover{color:var(--gold-bright);} .cart-empty{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;} .cart-empty.show{display:flex;} .cart-empty p{color:var(--ivory-dim);font-size:.9rem;} .cart-empty-sub{font-size:.78rem !important;color:#7a7264 !important;} .cart-drawer-footer{display:none;flex-direction:column;gap:12px;padding-top:20px;margin-top:16px;border-top:1px solid rgba(212,175,55,.15);} .cart-drawer-footer.show{display:flex;} .cart-subtotal{ display:flex;justify-content:space-between;align-items:center; font-family:var(--serif);color:var(--ivory);font-size:1.05rem;margin-bottom:4px; } .cart-subtotal span:last-child{color:var(--gold);} .cart-shipping-row{ display:flex;justify-content:space-between;align-items:center; font-size:.85rem;color:var(--ivory-dim);margin-top:-6px; } .cart-shipping-note{font-size:.75rem;color:#7a7264;margin-top:-6px;} .cart-shipping-note.free{color:var(--whatsapp);} .cart-total-row{ display:flex;justify-content:space-between;align-items:center; font-family:var(--serif);color:var(--ivory);font-size:1.2rem; padding-top:12px;border-top:1px solid rgba(212,175,55,.15); } .cart-total-row span:last-child{color:var(--gold-bright);font-weight:600;} .cart-drawer-footer .btn{width:100%;text-align:center;justify-content:center;} .cart-clear-btn{ padding:11px 38px;font-size:.72rem;letter-spacing:1.5px; border-color:rgba(212,175,55,.2);color:var(--ivory-dim); touch-action:manipulation; } @media (hover:hover) and (pointer:fine){ .cart-clear-btn:hover{border-color:#a33;color:#e77;} } /* ========================================================= CLEAR CART CONFIRMATION MODAL Sits above the cart drawer (z-index 2600) so it can be triggered from inside it. Reuses the same visual language (charcoal gradient, gold hairline border, modalPop entrance) as the product modal for a consistent black/gold look. ========================================================= */ .confirm-modal{ position:fixed;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(14px); display:none;align-items:center;justify-content:center;padding:20px;z-index:3000; } .confirm-modal.active{display:flex;} .confirm-modal-box{ width:100%;max-width:380px;text-align:center; background:linear-gradient(155deg,var(--charcoal-2),#0a0806); border:1px solid rgba(212,175,55,.25);border-radius:10px;padding:32px 28px; animation:modalPop .35s var(--ease); } .confirm-modal-title{ font-family:var(--serif);color:var(--gold);font-size:1.35rem; letter-spacing:.5px;margin-bottom:12px; } .confirm-modal-text{color:var(--ivory-dim);font-size:.9rem;line-height:1.55;margin-bottom:26px;} .confirm-modal-actions{display:flex;gap:12px;} .confirm-modal-actions .btn{ flex:1;padding:13px 10px;font-size:.72rem;letter-spacing:1.5px; text-align:center;justify-content:center;touch-action:manipulation; } @media(max-width:480px){ .confirm-modal-box{padding:26px 20px;} .confirm-modal-actions{flex-direction:column;} } @media(max-width:640px){ .cart-drawer{padding:26px 18px 20px;} } /* ========================================================= HERO ========================================================= */ .hero{ position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center; text-align:center;padding:140px 8% 100px;overflow:hidden; background:radial-gradient(circle at 50% 30%,#1a1512 0%,#0a0806 45%,#000 100%); } .hero-parallax{ position:absolute;inset:0;will-change:transform; } .hero-glow{ position:absolute;top:-20%;left:50%;transform:translateX(-50%); width:900px;height:900px;border-radius:50%; background:radial-gradient(circle,rgba(212,175,55,.10),transparent 70%); filter:blur(60px);animation:goldPulse 9s ease-in-out infinite;pointer-events:none; } .hero-ring{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:640px;height:640px;pointer-events:none;animation:ringRotate 90s linear infinite; } .hero-ring svg{width:100%;height:100%;} .hero-ring circle{fill:none;stroke:rgba(212,175,55,.14);stroke-width:.6;} #particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;} .particle{ position:absolute;bottom:-10px;border-radius:50%;background:var(--gold); box-shadow:0 0 10px rgba(212,175,55,.8);animation:particleFloat linear infinite; } .hero-content{position:relative;z-index:5;max-width:820px;} /* The hero is the very first thing visitors see, on-screen from the instant the page paints - the usual 1s scroll-reveal fade (meant for sections further down, which the visitor hasn't reached yet) instead reads as the page being slow to load here, since nothing else is competing for attention. Same fade, just quick. */ .hero-content.reveal{transition-duration:.35s;} .hero-content .eyebrow b{font-weight:700;font-style:italic;} .eyebrow{ font-size:.75rem;letter-spacing:4px;color:var(--gold-dim);margin-bottom:22px; text-transform:uppercase; } .hero h1{ font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,5vw,4rem); letter-spacing:1px;line-height:1.25;color:var(--ivory); text-shadow:0 0 40px rgba(212,175,55,.15); } .hero-sub{ margin:26px auto 0;max-width:560px;color:var(--ivory-dim);font-size:1.05rem;font-weight:300; } .hero-sub span{color:var(--gold);font-style:italic;} .buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:44px;} .scroll-cue{ position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:5; } .scroll-cue span{ display:block;width:1px;height:46px;background:linear-gradient(var(--gold),transparent); animation:cueMove 2s ease-in-out infinite; } /* ========================================================= BUTTONS ========================================================= */ .btn{ position:relative;overflow:hidden;display:inline-block; padding:16px 38px;font-size:.85rem;letter-spacing:2px;font-weight:500; border-radius:2px;transition:.4s var(--ease);text-transform:uppercase; } .btn.gold{background:var(--gold);color:var(--black);border:1px solid var(--gold);} .btn.ghost{background:transparent;color:var(--ivory);border:1px solid var(--gold-dim);} .btn.whatsapp{ background:var(--whatsapp);color:#04160c;border:1px solid var(--whatsapp); display:inline-flex;align-items:center;gap:10px; } #contactWhatsapp svg{width:18px;height:18px;flex-shrink:0;fill:#04160c;} .btn::before{ content:"";position:absolute;top:0;left:-120%;width:55%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-25deg);transition:.7s; } /* Hover-only button styling — scoped to devices with a real hover capability (mouse/trackpad), same reasoning as the .card:hover fix above. Unscoped :hover rules on the "Add to Cart" / "View Details" buttons (.btn.gold / .btn.ghost) are what caused those buttons to need a first tap to "arm" the hover state and a second tap to actually fire the click on touch devices — the classic mobile ghost-hover-before-click quirk. Gating them here is what actually lets a single tap add to cart / open the modal on mobile, while desktop mouse users keep the exact same hover visuals as before. */ @media (hover:hover) and (pointer:fine){ .btn.gold:hover{background:transparent;color:var(--gold-bright);box-shadow:0 0 30px rgba(212,175,55,.25);} .btn.ghost:hover{border-color:var(--gold);color:var(--gold-bright);} .btn.whatsapp:hover{background:var(--whatsapp-dark);box-shadow:0 0 30px rgba(37,211,102,.25);} .btn:hover::before{left:170%;} } /* ========================================================= CONTACT PAGE — .account-card (message/reach-us panels) and .auth-error (inline form error banners). ========================================================= */ .auth-error{ background:rgba(200,60,60,.12);border:1px solid rgba(200,60,60,.35);color:#ff9d9d; padding:12px 16px;border-radius:8px;font-size:.85rem;margin-bottom:22px;display:none; } .auth-error.show{display:block;} .account-card{ background:linear-gradient(155deg,var(--charcoal-2),#0a0806); border:1px solid rgba(212,175,55,.15);border-radius:10px;padding:36px; } .account-card h2{font-family:var(--serif);color:var(--gold);font-size:1.25rem;margin-bottom:22px;font-weight:600;} /* ========================================================= 3D BOTTLE ========================================================= */ .bottle3d-wrap{max-width:900px;margin:0 auto;text-align:center;} .bottle3d-canvas-container{ position:relative;width:100%;max-width:440px;aspect-ratio:1/1.15;margin:0 auto 34px; background:radial-gradient(ellipse at center, rgba(212,175,55,.09), transparent 70%); border-radius:16px; } .bottle3d-canvas{width:100%;height:100%;display:block;touch-action:none;} .bottle3d-fallback{width:100%;height:100%;object-fit:contain;display:none;border-radius:16px;} .bottle3d-hint{ position:absolute;bottom:12px;left:50%;transform:translateX(-50%); font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ivory-dim); opacity:.6;pointer-events:none;margin:0; } .bottle3d-name{display:block;font-family:var(--serif);color:var(--gold-bright);font-size:1.4rem;margin-bottom:2px;} .bottle3d-family{ font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-dim);margin:0 0 16px; } .bottle3d-description{ max-width:520px;margin:0 auto 26px;color:#cfc7b8;font-size:.92rem;line-height:1.85; } .bottle3d-view-btn{display:inline-flex;margin-top:26px;} .bottle3d-notes{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;} .bottle3d-note-item{display:flex;flex-direction:column;gap:4px;} .bottle3d-note-item .label{ font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:500; } .bottle3d-note-item .value{color:var(--ivory-dim);font-size:.86rem;max-width:220px;} @media(max-width:640px){ .bottle3d-notes{gap:22px;} } /* ---- Coverflow-style carousel (Home): all 6 bottles in one row, the active one enlarged and interactive, others dimmed to the sides — click a side bottle or use the arrows to switch. ---- */ .bottle-carousel-viewport{ position:relative;height:420px;display:flex;align-items:center;justify-content:center; overflow:hidden;margin-bottom:30px; } .bottle-carousel-track{position:relative;width:100%;height:100%;} .bottle-carousel-slot{ position:absolute;top:50%;left:50%;width:250px;height:100%; transition:transform .5s var(--ease),opacity .5s var(--ease); cursor:pointer; } .bottle-carousel-slot.is-active{cursor:default;} .bottle-carousel-canvas{width:100%;height:100%;display:block;touch-action:none;} .bottle-carousel-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:200; width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-dim); background:rgba(0,0,0,.45);color:var(--gold);font-size:1.3rem;line-height:1; display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s; } .bottle-carousel-arrow:hover{background:var(--gold);color:var(--black);border-color:var(--gold);} .bottle-carousel-prev{left:2%;} .bottle-carousel-next{right:2%;} @media(max-width:640px){ .bottle-carousel-viewport{height:300px;} .bottle-carousel-slot{width:165px;} .bottle-carousel-arrow{width:36px;height:36px;font-size:1.05rem;} } /* ========================================================= SECTION SHELL ========================================================= */ section{padding:150px 8%;position:relative;} /* The bottle carousel section is already tall on its own (title + carousel + notes + button), so the standard 150px top/bottom on both it and the section after combine into a 300px void with no background texture to fill it - unlike the hero, it reads as broken rather than spacious. */ #bottle3d{padding-bottom:70px;} #origins{background:var(--charcoal);border-top:1px solid #6b5a24;} #collection{background:var(--black);border-top:1px solid #6b5a24;} #attar{background:var(--charcoal);border-top:1px solid #6b5a24;} #discovery{border-top:1px solid #6b5a24;} #instagram{background:var(--black);border-top:1px solid #6b5a24;} #contact{background:var(--charcoal);border-top:1px solid #6b5a24;} .section-title{text-align:center;max-width:640px;margin:0 auto 90px;} .section-title h1,.section-title h2{ font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--gold);margin:14px 0 16px; letter-spacing:1px;font-weight:600; } .section-title p{color:var(--ivory-dim);font-size:.98rem;} .section-title p.asas-note{ max-width:680px;margin:20px auto 0;color:#b9b0a0;font-size:.9rem;line-height:1.85; } .section-cta{text-align:center;margin-top:50px;} /* ========================================================= COLLECTION — SEARCH & FAMILY FILTER ========================================================= */ .filter-bar{ display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:center; max-width:680px;margin:0 auto 64px; } .search-wrap{position:relative;flex:1 1 260px;} .search-icon{ position:absolute;left:16px;top:50%;transform:translateY(-50%); color:var(--gold-dim);pointer-events:none; } #searchInput{ width:100%;background:transparent;border:1px solid rgba(212,175,55,.25);border-radius:2px; padding:14px 16px 14px 46px;color:var(--ivory);font-family:var(--sans);font-size:.9rem; transition:.3s var(--ease); } #searchInput::placeholder{color:var(--ivory-dim);opacity:.7;} #searchInput:focus{outline:none;border-color:var(--gold);} .filter-select-wrap{flex:0 0 auto;} .filter-select-wrap select{ appearance:none;-webkit-appearance:none; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7028' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; background-size:16px; border:1px solid rgba(212,175,55,.25);border-radius:2px; padding:14px 40px 14px 16px;color:var(--ivory);font-family:var(--sans);font-size:.85rem; letter-spacing:.3px;cursor:pointer;transition:.3s var(--ease); min-width:190px; } .filter-select-wrap select:focus{outline:none;border-color:var(--gold);} .filter-select-wrap select option{background:var(--charcoal-2);color:var(--ivory);} .filter-empty{ text-align:center;color:var(--ivory-dim);font-size:.95rem; padding:60px 20px;max-width:480px;margin:0 auto; } /* ========================================================= HOME — EXPLORE TILES ========================================================= */ .explore-tiles{ display:grid;grid-template-columns:repeat(3, 1fr);gap:24px; max-width:1100px;margin:0 auto; } .explore-tile{ display:block;padding:38px 30px;text-align:center; background:linear-gradient(160deg,#1a1611,#0c0a08); border:1px solid rgba(212,175,55,.15);border-radius:8px; transition:.35s var(--ease); } .explore-tile:hover{ border-color:rgba(212,175,55,.5);transform:translateY(-4px); } .explore-tile-num{ display:block;font-family:var(--serif);font-style:italic;color:var(--gold-dim); font-size:.95rem;margin-bottom:14px; } .explore-tile h3{ font-family:var(--serif);color:var(--ivory);font-size:1.25rem;margin:0 0 10px;letter-spacing:.5px; } .explore-tile p{color:var(--ivory-dim);font-size:.88rem;line-height:1.6;margin:0;} /* ========================================================= ORIGINS ========================================================= */ #origins{position:relative;overflow:hidden;} #origins::before{ content:'';position:absolute;top:-260px;left:50%;transform:translateX(-50%); width:900px;height:560px; background:radial-gradient(circle, rgba(212,175,55,.07), transparent 70%); pointer-events:none; } .origins-wrap{max-width:1040px;margin:auto;text-align:center;position:relative;} .origins-wrap h1,.origins-wrap h2{ font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--gold);margin:14px 0 0; font-weight:600;letter-spacing:.5px; } .origins-text{color:#cfc7b8;font-size:1.05rem;line-height:2;} .ornament{ width:130px;height:1px;margin:28px auto 54px;position:relative; background:linear-gradient(90deg,transparent,var(--gold-dim) 50%,transparent); } .ornament::before{ content:'';position:absolute;top:50%;left:50%;width:8px;height:8px; transform:translate(-50%,-50%) rotate(45deg); border:1px solid var(--gold);background:var(--charcoal); } .origins-columns{ display:grid;grid-template-columns:repeat(3,1fr);gap:60px; text-align:left;margin:0 0 10px; } .origins-col{position:relative;padding:0 4px;} .origins-col:not(:first-child)::before{ content:'';position:absolute;top:6px;bottom:6px;left:-30px;width:1px; background:linear-gradient(180deg,transparent,rgba(212,175,55,.3) 12%,rgba(212,175,55,.3) 88%,transparent); } .origins-col-num{ display:inline-block;font-family:var(--serif);font-style:italic;font-size:1.15rem; letter-spacing:2px;color:var(--gold);margin-bottom:18px;padding-bottom:12px;position:relative; } .origins-col-num::after{ content:'';position:absolute;left:0;bottom:0;width:30px;height:1px;background:var(--gold-dim); } .origins-col h3{ font-family:var(--serif);font-size:1.3rem;color:var(--gold);letter-spacing:.8px;margin-bottom:14px; } .origins-col p{color:#cfc7b8;font-size:.95rem;line-height:1.9;} .origins-signoff{ margin-top:74px;padding-top:38px;position:relative; color:var(--ivory);font-size:1.05rem;line-height:1.9; } .origins-signoff::before{ content:'';position:absolute;top:0;left:50%;transform:translateX(-50%); width:56px;height:1px;background:var(--gold-dim); } .origins-signoff strong{ display:block;font-family:var(--serif);font-size:1.35rem;letter-spacing:5px; color:var(--gold);margin-bottom:10px; } .origins-signoff em{color:var(--gold-bright);font-style:italic;letter-spacing:1px;} @media(max-width:860px){ .origins-columns{grid-template-columns:1fr;gap:44px;} .origins-col:not(:first-child)::before{ left:0;right:0;top:-22px;bottom:auto;width:auto;height:1px; background:linear-gradient(90deg,transparent,rgba(212,175,55,.3) 15%,rgba(212,175,55,.3) 85%,transparent); } } .origins-marks{ display:flex;justify-content:center;gap:60px;margin-top:70px;flex-wrap:wrap; padding-top:46px;border-top:1px solid rgba(212,175,55,.16); } .mark{display:flex;flex-direction:column;align-items:center;gap:16px;} .mark-circle{ width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center; border:1px solid var(--gold-dim); background:radial-gradient(circle at 50% 40%,rgba(212,175,55,.08),transparent 70%); transition:.35s var(--ease); } .mark:hover .mark-circle{ border-color:var(--gold);box-shadow:0 0 22px rgba(212,175,55,.25);transform:translateY(-4px); } .mark-ar{font-family:var(--arabic);font-size:2rem;color:var(--gold);line-height:1;} .mark-label{font-size:.75rem;letter-spacing:3px;color:var(--ivory-dim);text-transform:uppercase;} /* ========================================================= COLLECTION GRID / CARDS (shared by #collection and #attar — same markup, same class) ========================================================= */ .collection-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:48px; max-width:1280px; margin:auto; perspective:1400px; } /* Discovery Set has a single card — center it horizontally instead of letting it sit in the grid's first column. Width is computed with the same formula the shared 3/2-column grid uses, so the card's size stays identical to before; only its horizontal position changes. */ #discoveryGrid{ grid-template-columns:1fr; } #discoveryGrid .card{ width:460px; margin:0 auto; } @media(max-width:1024px){ #discoveryGrid .card{ width:calc((100% - 34px)/2); } } @media(max-width:640px){ /* Discovery Set is the one single-card section, so on mobile it gets to be a wide, premium "featured product" card instead of sitting at the same width a 2-up grid card would use — bigger bottle, more breathing room, using almost the full section width. */ #discoveryGrid .card{ width:100%; max-width:420px; margin:0 auto; padding:26px 20px 24px; } #discoveryGrid .bottle{ height:220px; margin:6px 0 16px; } } .card{ background:linear-gradient(180deg,var(--charcoal-2),#0c0a08); border:1px solid rgba(212,175,55,.1);border-radius:6px; padding:44px 34px 36px;text-align:center;position:relative;overflow:hidden; transition:.5s var(--ease);cursor:pointer;touch-action:manipulation; display:flex;flex-direction:column;height:100%; } /* Hover-only lift/glow effect — scoped to devices with a real hover capability (mouse/trackpad) so touch devices don't get stuck needing a first tap to "activate" hover before a second tap registers the actual click on nested buttons (Add to Cart / View Details). */ @media (hover:hover) and (pointer:fine){ .card:hover{ transform:translateY(-10px);border-color:rgba(212,175,55,.4); box-shadow:0 25px 50px rgba(0,0,0,.5),0 0 40px rgba(212,175,55,.1); } } .card-arabic{ font-family:var(--arabic);font-size:1.55rem;color:var(--gold-dim);letter-spacing:1px; } .discount-badge{ position:absolute;top:14px;left:14px;z-index:2; background:var(--gold);color:var(--black); font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.3px; padding:4px 8px;border-radius:3px; } @media(max-width:640px){ .discount-badge{ top:8px; left:8px; font-size:.38rem; padding:1px 4px; letter-spacing:.1px; line-height:1.2; } .card-arabic{ position:absolute; top:8px; right:8px; font-size:1.3rem; z-index:3; color:var(--gold-dim); white-space:nowrap; } } .bottle{ height:260px; width:100%; display:flex;align-items:center;justify-content:center; margin:18px 0 14px; overflow:hidden; border-radius:4px; } .bottle svg{ height:100%;width:auto;object-fit:contain; filter:drop-shadow(0 10px 25px rgba(212,175,55,.12)); transition:.5s; } .bottle img{ height:100%;width:100%;object-fit:contain; filter:drop-shadow(0 10px 25px rgba(212,175,55,.12)); transition:.5s; } #discoveryGrid .bottle svg, #discoveryGrid .bottle img{ display:block;margin-left:auto;margin-right:auto; } @media (hover:hover) and (pointer:fine){ .card:hover .bottle svg, .card:hover .bottle img{ filter:drop-shadow(0 10px 40px rgba(212,175,55,.3)); transform:translateY(-4px); } } .card h3{font-family:var(--serif);font-size:1.5rem;color:var(--gold);letter-spacing:1.5px;margin-bottom:6px;} .card .family{font-size:.78rem;color:var(--ivory-dim);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;} .card .notes-line{font-size:.85rem;color:#b9b0a0;margin-bottom:18px;line-height:1.8;} .card .notes-line b{color:var(--gold-bright);font-weight:500;} #discoveryGrid .notes-line{display:none;} .card .price{font-family:var(--serif);color:var(--ivory);font-size:1.05rem;margin-bottom:20px;} .card .price span{color:var(--ivory-dim);font-size:.75rem;font-family:var(--sans);} .price-current{color:var(--gold-bright);font-weight:500;} .price-original{color:var(--ivory-dim);font-size:.82em;margin-left:6px;text-decoration:line-through;font-family:var(--sans);} .price-off{ display:inline-block;margin-left:8px;font-family:var(--sans);font-size:.68rem; color:var(--whatsapp);letter-spacing:.3px; } .pill-strike{ color:var(--ivory-dim);font-size:.85em;margin-left:5px;opacity:.75;font-weight:400; } .cart-item-original{ display:block;color:var(--ivory-dim);font-size:.75em;margin-top:2px;font-weight:400; } .cart-savings{ display:none;font-size:.78rem;color:var(--whatsapp);margin-bottom:10px;text-align:center; } .cart-savings.show{display:block;} .checkout-item-original{ display:block;color:var(--ivory-dim);font-size:.78em;margin-top:2px;font-weight:400; } .checkout-savings{ display:block;color:var(--whatsapp);font-size:.85rem;margin-bottom:6px; } .card-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;} .card-actions .btn{width:100%;padding:13px 10px;font-size:.72rem;letter-spacing:1.5px;touch-action:manipulation;} .card-actions .btn.whatsapp{justify-content:center;} .card-actions .btn.whatsapp svg{width:15px;height:15px;fill:#04160c;} /* ========================================================= CONTACT ========================================================= */ .contact-box{max-width:640px;margin:auto;text-align:center;} .contact-box h1,.contact-box h2{font-family:var(--serif);color:var(--gold);font-size:clamp(1.8rem,3.2vw,2.4rem);margin:14px 0 20px;font-weight:600;} .contact-box p{color:var(--ivory-dim);margin-bottom:34px;} .contact-meta{margin-top:40px;display:flex;justify-content:center;gap:40px;flex-wrap:wrap;font-size:.9rem;color:#c9c1b2;} .contact-meta strong{color:var(--gold);font-weight:500;} .contact-meta a{border-bottom:1px solid var(--gold-dim);} .contact-meta-link{display:inline-flex !important;align-items:center;gap:6px;} .contact-meta-link svg{width:15px;height:15px;flex-shrink:0;fill:var(--gold-dim);transition:.3s;} .contact-meta-link:hover svg{fill:var(--gold-bright);} .contact-page-grid{ display:grid;grid-template-columns:1.15fr 1fr;gap:50px; max-width:1000px;margin:0 auto;align-items:start; } .contact-page-grid .account-card{width:100%;} .contact-info-list{display:flex;flex-direction:column;gap:22px;margin-top:28px;} .contact-info-row{display:flex;align-items:center;gap:14px;} .contact-info-row svg{width:20px;height:20px;flex-shrink:0;fill:var(--gold);color:var(--gold);} .contact-info-row div{display:flex;flex-direction:column;gap:3px;} .contact-info-row .label{font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ivory-dim);} .contact-info-row a{color:var(--ivory);font-size:.95rem;} .contact-info-row a:hover{color:var(--gold-bright);} .contact-success{ background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.3);color:#8fe0af; padding:14px 16px;border-radius:8px;font-size:.88rem;margin-bottom:20px;display:none; } .contact-success.show{display:block;} @media(max-width:860px){ .contact-page-grid{grid-template-columns:1fr;gap:28px;} } /* ========================================================= FOOTER ========================================================= */ footer{background:#050403;padding:80px 8% 30px;border-top:1px solid #6b5a24;} .footer-wrap{ max-width:1200px;margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:50px; padding-bottom:50px; } .footer-brand h2{font-family:var(--serif);color:var(--gold);font-size:1.5rem;letter-spacing:2px;display:flex;align-items:baseline;gap:8px;} .footer-brand span{color:var(--ivory);} .footer-wordmark-img{height:57px;width:auto;display:block;position:relative;top:8px;} .footer-brand p{color:var(--ivory-dim);margin-top:12px;font-size:.85rem;} .footer-links{display:flex;gap:60px;flex-wrap:wrap;} .footer-links h4{color:var(--gold);font-size:.78rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;font-weight:500;} .footer-links a{display:block;color:var(--ivory-dim);font-size:.88rem;margin-bottom:10px;transition:.3s;} .footer-links a:hover{color:var(--gold-bright);} .footer-social-link{display:flex !important;align-items:center;gap:9px;} .footer-social-icon{width:16px;height:16px;flex-shrink:0;fill:var(--gold-dim);transition:.3s;} .footer-social-link:hover .footer-social-icon{fill:var(--gold-bright);} .footer-copy{text-align:center;color:#5c564a;font-size:.78rem;letter-spacing:1px;} /* ========================================================= PRODUCT MODAL ========================================================= */ .modal{ position:fixed;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(14px); display:none;align-items:center;justify-content:center;padding:30px;z-index:9998; overflow-y:auto; } .modal.active{display:flex;} .modal-content{ width:100%;max-width:1040px;max-height:90vh;overflow-y:auto; background:linear-gradient(155deg,var(--charcoal-2),#0a0806); border:1px solid rgba(212,175,55,.25);border-radius:10px;padding:48px 56px;position:relative; display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:center; animation:modalPop .45s var(--ease); } .close{ position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%; border:1px solid rgba(212,175,55,.35);background:rgba(10,8,6,.6);color:var(--gold);font-size:22px; display:flex;align-items:center;justify-content:center;transition:.3s; z-index:5;line-height:1; } .close:hover{background:var(--gold);color:var(--black);transform:rotate(90deg);} /* ========================================================= PRODUCT DETAIL PAGE Reuses .modal-visual/.modal-info's element ids and styling (openModal() populates either context identically) laid out as normal in-flow page content instead of an overlay. ========================================================= */ .breadcrumb{ max-width:1200px;margin:0 auto 50px; font-size:.78rem;letter-spacing:1px;color:var(--ivory-dim); } .breadcrumb a{color:var(--gold-dim);transition:.3s;} .breadcrumb a:hover{color:var(--gold-bright);} .product-detail{ max-width:1200px;margin:0 auto; display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start; } .product-detail .modal-bottle{height:480px;} .product-detail .modal-bottle svg, .product-detail .modal-bottle img{max-width:460px;} .product-detail .modal-info h1{font-size:2.6rem;} .product-related{margin-top:150px;} @media(max-width:960px){ .product-detail{grid-template-columns:1fr;gap:20px;} .product-detail .modal-bottle{height:340px;} .product-related{margin-top:100px;} } /* ========================================================= MOBILE STICKY CART BAR ========================================================= */ .mobile-cart-bar{ display:none; position:fixed;left:0;right:0;bottom:0;z-index:1500; width:100%;padding:14px 20px; background:linear-gradient(180deg,rgba(10,8,6,.85),rgba(6,5,4,.98)); backdrop-filter:blur(16px); border-top:1px solid rgba(212,175,55,.25); align-items:center;gap:14px; transform:translateY(100%);transition:.45s var(--ease); } .mobile-cart-bar.show{transform:translateY(0);} .mobile-cart-bar-count{ font-size:.72rem;color:var(--ivory-dim);text-transform:uppercase;letter-spacing:1px; display:block; } .mobile-cart-bar-total{ font-family:var(--serif);color:var(--gold-bright);font-size:1.15rem; } .mobile-cart-bar-cta{ margin-left:auto;background:var(--gold);color:var(--black);font-weight:600; font-size:.82rem;letter-spacing:.5px;padding:12px 18px;border-radius:6px; white-space:nowrap; } @media(max-width:860px){ .mobile-cart-bar{display:flex;} body.has-mobile-cart .fab-wrap{bottom:96px;} body.has-mobile-cart #scrollTop{bottom:96px;} } .modal-visual{text-align:center;} .modal-bottle{ height:400px;display:flex;align-items:center;justify-content:center; transition:opacity .18s ease; } .modal-bottle.fading{opacity:0;} .modal-bottle svg, .modal-bottle img{ height:100%;width:auto;max-width:400px;object-fit:contain; filter:drop-shadow(0 15px 40px rgba(212,175,55,.25)); transition:transform .45s var(--ease); } .modal-arabic{display:block;margin-top:10px;font-family:var(--arabic);color:var(--gold-dim);font-size:1.9rem;} .gallery-dots{display:flex;justify-content:center;gap:8px;margin-top:10px;} .gallery-dots .dot{ width:6px;height:6px;border-radius:50%;background:rgba(212,175,55,.25); transition:.35s var(--ease); } .gallery-dots .dot.active{background:var(--gold);width:20px;border-radius:3px;} .modal-info h1,.modal-info h2{font-family:var(--serif);color:var(--gold);font-size:2.1rem;letter-spacing:1px;font-weight:600;} .modal-family{color:var(--ivory-dim);font-size:.8rem;letter-spacing:2px;text-transform:uppercase;margin:6px 0 16px;} #modalDescription{color:#cfc7b8;font-size:.98rem;line-height:1.75;margin-bottom:22px;} .notes-row{display:flex;gap:22px;margin-bottom:22px;flex-wrap:wrap;} .notes-row h4{color:var(--gold);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;font-weight:500;} .notes-row p{color:#b9b0a0;font-size:.9rem;line-height:1.7;} .size-row{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;} .size-pill{ border:1px solid rgba(212,175,55,.3);padding:8px 16px;border-radius:20px;font-size:.78rem; color:var(--ivory-dim);cursor:pointer;transition:.3s; } .size-pill.active,.size-pill:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(212,175,55,.08);} .size-pill.disabled{opacity:.45;cursor:not-allowed;pointer-events:none;} .size-pill--attar{ padding:14px 28px;font-size:1.05rem;font-weight:600; } .soon-tag{ display:block;font-size:.62rem;letter-spacing:1px;color:var(--gold-dim); margin-top:2px;text-transform:uppercase; } /* size pill + its quantity stepper, grouped so they wrap together */ .size-option{display:flex;align-items:center;gap:8px;} .qty-stepper{ display:flex;align-items:center;gap:6px; border:1px solid rgba(212,175,55,.3);border-radius:20px;padding:4px 8px; } .qty-mini-btn{ width:22px;height:22px;border-radius:50%;border:1px solid rgba(212,175,55,.3); background:transparent;color:var(--gold);font-size:.85rem;line-height:1; display:flex;align-items:center;justify-content:center;transition:.25s;flex-shrink:0; } .qty-mini-btn:hover{background:var(--gold);color:var(--black);} .qty-mini-val{font-size:.8rem;color:var(--ivory);min-width:14px;text-align:center;} .color-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;} .color-swatch{ width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.15); cursor:pointer;transition:.3s;padding:0;position:relative; } .color-swatch.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.18);} .color-swatch:hover{transform:scale(1.1);} .color-name{font-size:.8rem;color:var(--ivory-dim);margin-left:6px;} #whatsappOrder svg{display:none;} .modal-order-actions{display:flex;flex-direction:column;gap:10px;} .modal-order-actions .btn{width:100%;text-align:center;justify-content:center;} /* The card grid's "Add to Cart" already had touch-action:manipulation (see .card-actions .btn above), which is what makes it register on a single tap: it tells the browser this element is a plain tap target, not something that needs the standard double-tap-zoom / scroll-vs-tap disambiguation delay. #addToCartBtn never got that same rule, and it sits inside the modal's scrollable content (.modal-content has overflow-y:auto), so mobile browsers hold the first touch briefly to decide whether it's the start of a scroll — which is exactly the "first tap does nothing, second tap adds it" symptom. Adding it here brings this button in line with the card's, with no effect on desktop mouse clicks. */ #addToCartBtn{touch-action:manipulation;} #addToCartBtn.added{background:var(--whatsapp);border-color:var(--whatsapp);color:#04160c;} .btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none;box-shadow:none;} /* ===== Checkout modal ===== */ .checkout-content{ grid-template-columns:1fr;max-width:480px;margin:0 auto;padding:44px; } .checkout-info .eyebrow{margin-bottom:10px;} .checkout-info h2{ font-family:var(--serif);color:var(--gold-bright);font-size:1.5rem;letter-spacing:.5px;margin-bottom:4px; } .checkout-items-list{ display:flex;flex-direction:column;gap:8px;margin:14px 0 16px; border:1px solid rgba(212,175,55,.14);border-radius:8px;padding:14px 16px; max-height:180px;overflow-y:auto; } .checkout-item-row{ display:flex;justify-content:space-between;gap:10px;font-size:.85rem; color:#cfc7b8;line-height:1.5; } .checkout-item-row em{color:var(--ivory-dim);font-style:normal;} .checkout-item-price{color:var(--gold);white-space:nowrap;} .checkout-price{color:var(--ivory-dim);font-size:.95rem;margin-bottom:22px;} .checkout-price strong{color:var(--gold);} .checkout-shipping{display:block;color:var(--ivory-dim);font-size:.85rem;margin-bottom:6px;} .checkout-form{display:flex;flex-direction:column;gap:16px;} .checkout-form label{ display:flex;flex-direction:column;gap:6px;font-size:.75rem;letter-spacing:1px; text-transform:uppercase;color:var(--ivory-dim); } .checkout-form input, .checkout-form textarea{ background:rgba(255,255,255,.03);border:1px solid rgba(212,175,55,.25);border-radius:8px; padding:12px 14px;color:var(--ivory);font-family:var(--sans);font-size:.92rem;font-weight:300; letter-spacing:normal;text-transform:none; } .checkout-form input:focus, .checkout-form textarea:focus{border-color:var(--gold);outline:none;} .checkout-form textarea{min-height:80px;resize:vertical;} .checkout-form .qty-label input{width:90px;} .checkout-form .form-row{display:flex;gap:16px;} .checkout-form .form-row label{flex:1;min-width:0;} .checkout-form .form-half{width:50%;} .checkout-form .btn{margin-top:6px;width:100%;text-align:center;justify-content:center;border:none;} .checkout-note{font-size:.72rem;color:var(--ivory-dim);text-align:center;margin-top:4px;line-height:1.6;} .checkout-track-note{font-size:.78rem;color:var(--ivory-dim);text-align:center;margin-top:10px;line-height:1.6;} .checkout-result{ margin-top:22px;padding:22px;border:1px solid rgba(212,175,55,.3);border-radius:10px; background:rgba(212,175,55,.05); } .checkout-result.hidden{display:none;} .checkout-form.hidden{display:none;} .checkout-result h3{font-family:var(--serif);color:var(--gold-bright);font-size:1.15rem;margin-bottom:10px;} .checkout-result p{font-size:.88rem;color:var(--ivory-dim);margin-bottom:10px;line-height:1.7;} .checkout-result .upi-id{color:var(--gold);font-weight:500;letter-spacing:.5px;} .checkout-result .btn{width:100%;text-align:center;justify-content:center;margin-top:8px;} @media(max-width:640px){ .checkout-content{padding:28px 20px;} .checkout-form input, .checkout-form textarea{font-size:16px;} /* prevents iOS Safari from auto-zooming in on focus */ .checkout-form .form-row{flex-direction:column;gap:16px;} .checkout-form .form-half{width:100%;} } /* ========================================================= FLOATING WHATSAPP + SCROLL TOP ========================================================= */ .fab-wrap{position:fixed;bottom:28px;right:28px;z-index:900;display:flex;align-items:center;} .whatsapp-float{ width:62px;height:62px;border-radius:50%;background:var(--charcoal-2); border:1px solid var(--gold); display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.5); animation:fabPulse 3s ease-in-out infinite;transition:.3s; } .whatsapp-float svg{width:30px;height:30px;fill:var(--gold);transition:.3s;} .whatsapp-float:hover{transform:scale(1.08);background:var(--gold);} .whatsapp-float:hover svg{fill:var(--black);} .fab-tooltip{ position:absolute;right:76px;background:var(--charcoal-2);color:var(--ivory); border:1px solid rgba(212,175,55,.25);padding:12px 16px;border-radius:8px;font-size:.78rem; white-space:nowrap;opacity:0;pointer-events:none;transform:translateX(10px);transition:.3s; } .fab-wrap:hover .fab-tooltip{opacity:1;transform:translateX(0);} #scrollTop{ position:fixed;bottom:28px;right:104px;width:0;height:0;opacity:0;overflow:hidden; border:none;border-radius:50%;background:var(--gold);color:var(--black);font-size:18px; transition:.3s;z-index:900; } #scrollTop.show{width:46px;height:46px;opacity:1;} /* ========================================================= REVEAL ON SCROLL ========================================================= */ .reveal{opacity:0;transform:translateY(40px);transition:1s var(--ease);} .reveal.show{opacity:1;transform:translateY(0);} /* Subtle 3D card reveal — cards start turned slightly away in space and settle flat as they scroll into view. Kept understated: small rotation, modest depth, gentle stagger across the grid. */ .card-3d{ opacity:0; transform:perspective(1400px) rotateY(9deg) translateX(24px) translateZ(-70px); transition:opacity .5s var(--ease), transform .5s var(--ease); transform-style:preserve-3d; } .card-3d.show{ opacity:1; transform:perspective(1400px) rotateY(0deg) translateX(0) translateZ(0); } .card-3d:nth-child(3n+2){transform:perspective(1400px) rotateY(0deg) translateY(30px) translateZ(-70px);} .card-3d:nth-child(3n+2).show{transform:perspective(1400px) rotateY(0deg) translateY(0) translateZ(0);} .card-3d:nth-child(3n){transform:perspective(1400px) rotateY(-9deg) translateX(-24px) translateZ(-70px);} .card-3d:nth-child(3n).show{transform:perspective(1400px) rotateY(0deg) translateX(0) translateZ(0);} .card-3d:nth-child(1){transition-delay:0s;} .card-3d:nth-child(2){transition-delay:.05s;} .card-3d:nth-child(3){transition-delay:.1s;} .card-3d:nth-child(4){transition-delay:.05s;} .card-3d:nth-child(5){transition-delay:.1s;} .card-3d:nth-child(6){transition-delay:.15s;} @media(max-width:900px){ .card-3d, .card-3d:nth-child(3n+2), .card-3d:nth-child(3n){ transform:translateY(36px) translateZ(0); } .card-3d.show, .card-3d:nth-child(3n+2).show, .card-3d:nth-child(3n).show{ transform:translateY(0) translateZ(0); } } /* ========================================================= KEYFRAMES ========================================================= */ @keyframes glow{ 0%,100%{text-shadow:0 0 6px rgba(212,175,55,.5);} 50%{text-shadow:0 0 22px rgba(212,175,55,.8),0 0 50px rgba(212,175,55,.4);} } @keyframes goldPulse{ 0%,100%{transform:translateX(-50%) scale(.94);opacity:.6;} 50%{transform:translateX(-50%) scale(1.06);opacity:1;} } @keyframes ringRotate{to{transform:translate(-50%,-50%) rotate(360deg);}} @keyframes particleFloat{ 0%{transform:translateY(0);opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{transform:translateY(-100vh);opacity:0;} } @keyframes cueMove{ 0%{transform:translateX(-50%) scaleY(0);opacity:0;} 50%{transform:translateX(-50%) scaleY(1);opacity:1;} 100%{transform:translateX(-50%) scaleY(0);opacity:0;} } @keyframes fabPulse{ 0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 rgba(212,175,55,.4);} 50%{box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 12px rgba(212,175,55,0);} } @keyframes modalPop{ 0%{opacity:0;transform:scale(.92) translateY(30px);} 100%{opacity:1;transform:scale(1) translateY(0);} } @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important;} } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1024px){ .collection-grid{ grid-template-columns:repeat(2, 1fr); } } @media(max-width:900px){ .modal-content{grid-template-columns:1fr;} .modal-bottle{height:190px;} } @media(max-width:1100px) and (min-width:861px){ .nav-links{gap:20px;} .nav-links a{font-size:.78rem;letter-spacing:1px;} } @media(max-width:860px){ .nav-links{ position:fixed;top:0;right:0;height:100vh;width:min(78vw,320px); background:rgba(6,5,4,.98);backdrop-filter:blur(20px); flex-direction:column;justify-content:center;align-items:center;gap:34px; transform:translateX(100%);transition:.5s var(--ease);border-left:1px solid rgba(212,175,55,.15); z-index:2000; } .nav-links.open{transform:translateX(0);} #navToggle{display:flex;} .explore-tiles{grid-template-columns:1fr;gap:16px;} } @media(max-width:640px){ section{padding:90px 6%;} /* Grid-bearing sections get slimmer side padding than the rest of the page (hero/origins/contact keep the wider 6% for readable prose) so the 2-column product grid can use nearly the full screen width. */ #collection,#attar,#discovery{padding-left:3%;padding-right:3%;} .collection-grid{grid-template-columns:repeat(2, 1fr); gap:14px; padding-bottom:80px;} .origins-marks{gap:34px;} .mark-circle{width:72px;height:72px;} .mark-ar{font-size:1.6rem;} .fab-tooltip{display:none;} .contact-meta{flex-direction:column;gap:14px;} /* Spacious 2-per-row product cards — wider cards (thanks to the slimmer section padding above) with bigger bottles and less vertical padding, so the grid feels open rather than cramped while still fitting two comfortably side by side on a phone. */ .card{ padding:12px 10px 10px; } .card .bottle{ height:140px; margin:4px 0 6px; } .card h3{ font-size:1.15rem; margin-bottom:2px; } .card .family{ font-size:.64rem; letter-spacing:1px; margin-bottom:4px; line-height:1.35; min-height:24px; } .card .notes-line{ display:none; } .card .price{ font-size:.88rem; margin-bottom:6px; } .card-actions{ gap:8px; } .card-arabic{ position:absolute; top:14px; right:14px; font-size:1.35rem; color:var(--gold-dim); } } /* ========================================================= ADDITIONAL MOBILE POLISH ========================================================= */ @media(max-width:640px){ .buttons{ flex-direction:column; align-items:stretch; gap:14px; } .buttons .btn{ text-align:center; padding:16px 20px; } .logo-img{ height:52px; } .card-actions .btn{ padding:11px 8px; font-size:.74rem; } .modal{ padding:16px; } .modal-content{ padding:22px 16px; max-height:92vh; overflow-y:auto; gap:16px; } .modal-bottle{ height:190px; } .modal-info h2{ font-size:1.5rem; } .size-pill{ padding:10px 14px; font-size:.75rem; } .size-pill--attar{ padding:15px 22px; font-size:.95rem; } .size-option{ gap:6px; } .qty-stepper{ padding:5px 8px; } .qty-mini-btn{ width:28px; height:28px; font-size:1rem; } .footer-wrap{ flex-direction:column; text-align:center; gap:34px; } .footer-brand h2{ justify-content:center; } .footer-links{ justify-content:center; gap:34px; } .fab-wrap{ bottom:18px; right:18px; } .whatsapp-float{ width:54px; height:54px; } #scrollTop{ right:82px; bottom:18px; } .origins-text{ font-size:.95rem; line-height:1.85; } /* Larger touch targets so nothing feels fiddly to tap on a phone */ #siteHeader nav.wrap{ padding:0 20px; } .color-swatch{ width:36px; height:36px; } .qty-btn{ width:32px; height:32px; font-size:1rem; } .cart-item-remove{ width:28px; height:28px; font-size:20px; } /* Mobile hero: content anchored toward the lower third with the glow/rings visible above it, instead of dead-center like desktop — a distinct, more app-like composition rather than a squished version of desktop. */ .hero{ align-items:flex-end; justify-content:flex-start; padding:0 7% 130px; text-align:center; } .hero-content{ padding-top:18px; position:relative; } .hero-content::before{ content:""; display:block; width:44px;height:1px; margin:0 auto 26px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent); } .hero .eyebrow{margin-bottom:16px;} .hero-sub{margin-top:18px;} } @media(max-width:400px){ .hero h1{ font-size:1.8rem; } .hero-sub{ font-size:.95rem; } .section-title h2{ font-size:1.5rem; } .card h3{ font-size:1.25rem; min-height:32px; } .eyebrow{ letter-spacing:2px; font-size:.68rem; } .nav-links{ width:88vw; } } @media(max-height:480px) and (orientation:landscape){ .hero{ min-height:auto; padding:100px 8% 60px; } } /* ========================================================= MOBILE LOADER SCALING ========================================================= */ @media(max-width:480px){ .loader-mark{ width:280px;height:280px; transform:translateX(12px); } .loader-glow{ width:230px;height:230px; transform:translate(calc(-50% - 13px), calc(-50% + 26px)); } .loader-ring-outer{ width:280px;height:280px; } .loader-ring-ticks{ width:230px;height:230px; } .loader-logo-wrap{ width:180px; } @keyframes ringSpin{ from{transform:translate(calc(-50% - 13px), calc(-50% + 26px)) rotate(0deg);} to{transform:translate(calc(-50% - 13px), calc(-50% + 26px)) rotate(360deg);} } @keyframes ringSpinReverse{ from{transform:translate(calc(-50% - 13px), calc(-50% + 26px)) rotate(360deg);} to{transform:translate(calc(-50% - 13px), calc(-50% + 26px)) rotate(0deg);} } }