/* ========================================================================== LATAMARKO — landing page styles 1. Fonts & tokens 5. Sections 2. Reset & base 6. Contact & form 3. Utilities 7. Footer & floating UI 4. Chrome (header/nav) 8. Responsive & motion ========================================================================== */ /* 1. Fonts & tokens ------------------------------------------------------- */ @font-face{ font-family:'Estedad'; src:url('../fonts/Estedad-VF.woff2') format('woff2-variations'); font-weight:100 900; font-display:swap; unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF,U+0020-007F; } @font-face{ font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-VF.woff2') format('woff2-variations'); font-weight:100 900; font-display:swap; unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF,U+0020-007F; } :root{ color-scheme:dark; /* Brand */ --accent:#e8a34c; --accent-soft:rgba(232,163,76,.16); --accent-line:rgba(232,163,76,.45); --gold-ink:#241503; /* text on top of a gold fill */ /* Ink — one family, because the whole page is a dark journey. */ --ink:#f7f1e6; --muted:rgba(247,241,230,.70); --faint:rgba(247,241,230,.52); --line:rgba(247,241,230,.14); --line-strong:rgba(247,241,230,.26); --danger:#ff9a9e; /* ---- Scroll-driven background journey ------------------------------- `--tone` walks the page through the life of the bean: green → washed → honey → roast → espresso. Every stop and every interpolated step between stops was verified to keep body ink at AAA (worst case 14.9:1) and muted text plus the gold accent at AA, so the colour can move freely without ever breaking contrast. ---------------------------------------------- */ --tone-default:#141712; --tone:var(--tone-live,var(--tone-default)); --shadow:0 30px 70px -35px rgba(0,0,0,.7); /* Type */ --font-display:'Estedad','Vazirmatn',system-ui,sans-serif; --font-body:'Vazirmatn','Estedad',system-ui,sans-serif; /* Shape & rhythm */ --radius:24px; --radius-sm:14px; --header-h:76px; --header-h-scrolled:64px; --section-pad:clamp(4.5rem,10vw,9rem); --ease-out:cubic-bezier(.22,.61,.36,1); /* Image placeholders (dominant colour of each derivative) */ --img-hero:#908781; --img-lots:#362217; --img-cupping:#745e4a; --img-screening:#877870; --img-origin:#453a35; --img-proforma:#87766d; --img-domestic:#716461; /* Layers */ --z-grain:5; --z-header:80; --z-wa:70; --z-menu:90; --z-preloader:250; --z-cursor:300; --z-skip:400; } /* Surfaces derive from --tone, so one animated value re-tints the whole page. The derivation is repeated on [data-tone] because custom properties are substituted at computed-value time: without re-declaring, sections would inherit the root's already-resolved colours instead of their own. */ :root, [data-tone]{ --bg:var(--tone); --panel:color-mix(in srgb,var(--tone) 96%,#fff); --panel-strong:color-mix(in srgb,var(--tone) 93%,#fff); --panel-glass:color-mix(in srgb,var(--tone) 84%,transparent); --header-bg:color-mix(in srgb,var(--tone) 88%,transparent); --hero-tint-a:color-mix(in srgb,var(--tone) 58%,transparent); --hero-tint-b:color-mix(in srgb,var(--tone) 95%,transparent); --scrim:color-mix(in srgb,var(--tone) 90%,transparent); } /* color-mix() is ~96% supported; these keep older engines fully readable. */ @supports not (background:color-mix(in srgb,red 50%,blue)){ :root, [data-tone]{ --panel:rgba(255,255,255,.04); --panel-strong:rgba(255,255,255,.07); --panel-glass:rgba(20,16,11,.84); --header-bg:rgba(20,16,11,.88); --hero-tint-a:rgba(20,16,11,.58); --hero-tint-b:rgba(20,16,11,.95); --scrim:rgba(20,16,11,.9); } } /* Per-section stops of the journey. These declarations are the single source of truth: main.js reads them once at start-up and then interpolates between them by setting `--tone-live` on . The fallback chain needs no class toggling: • JS present → --tone-live wins everywhere, giving one continuous fade • JS absent → each section falls back to its own --tone-stop So the background still changes as you scroll without scripting, just in steps instead of a gradient. */ [data-tone]{ --tone:var(--tone-live,var(--tone-stop,var(--tone-default))); background:var(--tone); } [data-tone="hero"]{--tone-stop:#141712} [data-tone="advantage"]{--tone-stop:#161a14} [data-tone="quality"]{--tone-stop:#101a1b} [data-tone="story"]{--tone-stop:#141a18} [data-tone="selection"]{--tone-stop:#1d1a10} [data-tone="buying"]{--tone-stop:#241a10} [data-tone="price"]{--tone-stop:#2a1a12} [data-tone="origins"]{--tone-stop:#241410} [data-tone="steps"]{--tone-stop:#1e1310} [data-tone="faq"]{--tone-stop:#191110} [data-tone="contact"]{--tone-stop:#14100b} [data-tone="footer"]{--tone-stop:#14100b} /* آخرین پله‌ی سفر رنگ؛ چون contact و footer هر دو #14100b هستند، نگه‌داشتن رنگ خودشان هیچ تغییر بصری ندارد و اسکریم تمام‌صفحه از مسیر re-raster هر فریم خارج می‌شود. */ [data-tone="contact"], [data-tone="footer"]{--tone:var(--tone-stop)} /* 2. Reset & base --------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} [hidden]{display:none!important} html{ scrollbar-width:thin; scrollbar-color:#6b5238 #14100b; -webkit-text-size-adjust:100%; background:var(--tone-default); /* Native smooth scrolling is the default. main.js removes it via .smooth-js when it takes over the scroll, because two animators driving the same scrollTop make the wheel feel stuck. */ scroll-behavior:smooth; } html.smooth-js{scroll-behavior:auto} html.lock,html.lock body{overflow:hidden} /* The JS scroller needs the document to stay a plain, unclipped scroller. */ html.smooth-js, html.smooth-js body{height:auto;overflow:visible} body{ font-family:var(--font-body); background:var(--tone-default); color:var(--ink); line-height:1.8; font-size:1rem; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* `overflow-x:hidden` makes a scroll container in some engines, which swallows wheel deltas. With JS driving the scroll, clip instead — same visual result, no scroll port. */ html.smooth-js body{overflow-x:clip} ::selection{background:var(--accent);color:var(--gold-ink)} ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#6b5238;border-radius:99px;border:2px solid var(--bg)} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px} :focus:not(:focus-visible){outline:none} img,svg{max-width:100%;display:block} img{height:auto;} a{color:inherit;text-decoration:none} button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;background:none;border:0} ul,ol{list-style:none} i,b{font-style:normal} h1,h2,h3,h4{text-wrap:balance} p{text-wrap:pretty} :target{scroll-margin-top:calc(var(--header-h) + 12px)} /* 3. Utilities ------------------------------------------------------------ */ .container{width:min(1180px,calc(100% - clamp(40px,8vw,96px)));margin-inline:auto} .container-narrow{width:min(800px,calc(100% - clamp(40px,8vw,96px)))} section[id]{scroll-margin-top:calc(var(--header-h) + 8px)} .sr-only{ position:absolute!important;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .skip-link{ position:fixed;top:-100px;inset-inline-start:1rem;z-index:var(--z-skip); background:var(--accent);color:var(--gold-ink); font-weight:700;font-size:.9rem; padding:.8em 1.5em;border-radius:0 0 12px 12px; transition:top .3s var(--ease-out); } .skip-link:focus{top:0} .btn{ position:relative; display:inline-flex;align-items:center;justify-content:center;gap:.6em; padding:.95em 1.9em;border-radius:999px;border:1px solid transparent; font-family:var(--font-body);font-size:.95rem;font-weight:700;line-height:1; min-height:48px; transition:transform .35s var(--ease-out),box-shadow .35s,background-color .35s,color .35s,border-color .35s; white-space:nowrap; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)} .btn-primary{background:var(--accent);color:var(--gold-ink)} .btn-primary:hover{box-shadow:0 14px 34px -12px rgba(232,163,76,.55);background:#f0b268} .btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn-sm{padding:.68em 1.4em;font-size:.85rem;min-height:42px} .btn-lg{width:100%;padding:1.1em;font-size:1rem;min-height:54px} .btn-lg-inline{padding:1.1em 2.6em;font-size:1rem} .btn-block{width:100%} .btn[disabled]{cursor:not-allowed} .btn.loading{pointer-events:none;opacity:.85} .btn.loading::after{ content:'';width:1em;height:1em;border-radius:50%; border:2px solid rgba(36,21,3,.25);border-top-color:var(--gold-ink); animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .i-badge{ flex-shrink:0;display:grid;place-items:center; width:52px;height:52px;border-radius:16px; color:var(--accent); border:1.5px solid var(--accent-line); background:var(--accent-soft); transition:transform .4s var(--ease-out),background-color .35s,color .35s; } .i-badge svg{width:24px;height:24px} .chapter-tag{display:inline-flex;align-items:center;gap:.75em;margin-bottom:1.1rem;flex-wrap:wrap} .chapter-tag i{ font-size:.72rem;font-weight:700;letter-spacing:.14em; color:var(--accent);border:1px solid var(--accent-line); padding:.4em 1em;border-radius:999px;background:var(--accent-soft); } .chapter-tag span{font-size:.85rem;color:var(--muted);letter-spacing:.04em} .section-title{ font-family:var(--font-display); font-size:clamp(1.9rem,4.2vw,3.1rem); font-weight:850;line-height:1.4; margin-bottom:.5rem; } .section-sub{color:var(--muted);max-width:75ch;line-height:2.1;font-size:.98rem} .section-head{margin-bottom:clamp(2.6rem,5vw,4rem);position:relative} .section-head::before{ content:attr(data-num); position:absolute;top:-1.1em;inset-inline-end:-.04em;z-index:0; font-family:var(--font-display);font-weight:900;line-height:1; font-size:clamp(4.6rem,9vw,8rem);letter-spacing:.02em; color:transparent;-webkit-text-stroke:1.5px var(--line); opacity:.55;pointer-events:none;user-select:none; } .section-head > *{position:relative;z-index:1} .section-foot{margin-top:clamp(2.4rem,5vw,3.4rem);display:grid;justify-items:start} .section-foot.center{justify-items:center} /* 4. Chrome: preloader, cursor, header, menus ---------------------------- */ .preloader{ position:fixed;inset:0;z-index:var(--z-preloader); background:#131009;color:var(--ink); display:grid;place-items:center; } /* Without JS the preloader must never trap the page. */ html:not(.js) .preloader{display:none} .preloader-inner{display:grid;justify-items:center;gap:.4rem;text-align:center} .preloader-mark{position:relative;width:88px;height:88px;display:grid;place-items:center;margin-bottom:1rem} .preloader-mark::before{ content:'';position:absolute;inset:0;border:1px dashed rgba(232,163,76,.4); border-radius:50%;animation:spin 9s linear infinite; } .bean-icon{color:var(--accent)} .preloader-mark .bean-icon{width:42px;height:42px;animation:beanPulse 1.6s ease-in-out infinite} @keyframes beanPulse{0%,100%{transform:scale(1) rotate(-8deg)}50%{transform:scale(1.12) rotate(8deg)}} .preloader-brand{font-weight:900;font-size:.95rem;letter-spacing:.35em;text-indent:.35em;color:var(--accent)} .preloader-label{font-size:.82rem;color:rgba(247,241,230,.62);letter-spacing:.12em} .preloader-curtain{position:absolute;inset:0;background:var(--accent);transform:translateY(101%)} .grain{ position:fixed;inset:-100%;z-index:var(--z-grain);pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); animation:grain 7s steps(10) infinite; } @keyframes grain{ 0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-8%)}20%{transform:translate(4%,3%)} 30%{transform:translate(-3%,6%)}40%{transform:translate(6%,-4%)} 50%{transform:translate(-6%,2%)}60%{transform:translate(3%,7%)} 70%{transform:translate(-4%,-5%)}80%{transform:translate(5%,5%)} 90%{transform:translate(-2%,-7%)} } .cursor{ position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none; width:34px;height:34px;border:1.5px solid var(--accent);border-radius:50%; opacity:0; transition:opacity .3s,width .3s,height .3s,background-color .3s; } .cursor.is-visible{opacity:1} .cursor.is-hover{width:56px;height:56px;background:rgba(232,163,76,.14)} .cursor.is-down{scale:.8} @media (pointer:coarse),(max-width:1024px){.cursor{display:none}} .header{ position:fixed;top:0;left:0;right:0;z-index:var(--z-header); transition:background-color .4s,border-color .4s,backdrop-filter .4s; border-bottom:1px solid transparent; } .header.scrolled{ background:var(--header-bg); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); } .header-inner{ width:min(1320px,calc(100% - clamp(32px,6vw,80px))); margin-inline:auto;height:var(--header-h); display:flex;align-items:center;gap:clamp(1rem,3vw,2rem); transition:height .4s; } .header.scrolled .header-inner{height:var(--header-h-scrolled)} .logo{display:flex;align-items:center;gap:.75rem;flex-shrink:0} .logo .bean-icon{width:30px;height:30px;color:var(--accent);transition:transform .5s var(--ease-out)} .logo:hover .bean-icon{transform:rotate(-20deg) scale(1.08)} .logo-text{display:grid;line-height:1;font-family:var(--font-display);font-weight:900;font-size:1.14rem;text-align:start} .logo-text i{font-size:.5rem;letter-spacing:.44em;color:var(--muted);margin-top:.45em;font-weight:600} .nav{display:flex;gap:clamp(1rem,2vw,1.7rem);margin-inline-start:auto} .nav a{ position:relative;font-size:.9rem;font-weight:500;color:var(--muted); padding-block:.45rem;transition:color .3s;white-space:nowrap; } .nav a::after{ content:'';position:absolute;bottom:0;inset-inline-start:0; width:100%;height:2px;border-radius:2px;background:var(--accent); transform:scaleX(0);transform-origin:inline-end center; transition:transform .35s var(--ease-out); } .nav a:hover,.nav a:focus-visible{color:var(--ink)} .nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="true"]::after{transform:scaleX(1)} .nav a[aria-current="true"]{color:var(--ink)} .header-actions{display:flex;align-items:center;gap:.9rem;margin-inline-start:auto} .nav + .header-actions{margin-inline-start:0} .burger{ display:none;width:46px;height:46px; flex-direction:column;align-items:center;justify-content:center;gap:5px; border:1px solid var(--line-strong);border-radius:12px; transition:border-color .3s,background-color .3s; } .burger:hover{border-color:var(--accent)} .burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease-out),opacity .3s} body.menu-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)} body.menu-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)} .mobile-menu-close{ position:absolute;top:calc((var(--header-h) - 46px)/2);inset-inline-end:clamp(16px,3vw,40px); width:46px;height:46px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line-strong);border-radius:12px;background:transparent; transition:border-color .3s; } .mobile-menu-close:hover,.mobile-menu-close:focus-visible{border-color:var(--accent)} .mobile-menu-close span{position:absolute;width:18px;height:2px;border-radius:2px;background:var(--ink)} .mobile-menu-close span:first-child{transform:rotate(45deg)} .mobile-menu-close span:last-child{transform:rotate(-45deg)} .mobile-menu{ position:fixed;inset:0;z-index:var(--z-menu);background:var(--bg); display:flex;flex-direction:column;justify-content:center; padding:calc(var(--header-h) + 2rem) clamp(1.6rem,8vw,4rem) 2.4rem; opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s .45s; } body.menu-open .mobile-menu{opacity:1;visibility:visible;transition-delay:0s} .mobile-menu nav{display:grid;gap:.3rem} .mobile-menu nav a{ display:flex;align-items:baseline;gap:1.1rem; font-family:var(--font-display);font-weight:850; font-size:clamp(1.5rem,6vw,2.3rem);line-height:1.5; padding-block:.5rem;color:var(--ink); translate:0 34px;opacity:0; transition:translate .6s var(--ease-out),opacity .6s,color .3s; } .mobile-menu nav a:hover{color:var(--accent)} .mobile-menu nav a i{font-size:.9rem;color:var(--accent);letter-spacing:.1em;min-width:2.4ch} body.menu-open .mobile-menu nav a{translate:0;opacity:1} body.menu-open .mobile-menu nav a:nth-child(1){transition-delay:.08s} body.menu-open .mobile-menu nav a:nth-child(2){transition-delay:.13s} body.menu-open .mobile-menu nav a:nth-child(3){transition-delay:.18s} body.menu-open .mobile-menu nav a:nth-child(4){transition-delay:.23s} body.menu-open .mobile-menu nav a:nth-child(5){transition-delay:.28s} body.menu-open .mobile-menu nav a:nth-child(6){transition-delay:.33s} .mobile-menu-foot{ margin-top:auto;padding-top:1.4rem;border-top:1px solid var(--line); display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; color:var(--muted);font-size:.85rem; } .mobile-menu-foot a:hover{color:var(--accent)} /* 5. Sections ------------------------------------------------------------- */ /* Hero */ .hero{ position:relative;min-height:100svh; display:flex;align-items:flex-end; overflow:clip; padding-top:calc(var(--header-h) + 2rem); padding-bottom:clamp(2.4rem,6vh,5rem); color:var(--ink); } .hero-bg{position:absolute;inset:0;z-index:0;overflow:clip;background:var(--img-hero)} .hero-bg picture{display:block;height:100%} .hero-bg-img{ position:absolute;top:-8%;left:0; width:100%;height:116%; object-fit:cover;object-position:center 30%; will-change:transform; } /* The tint is built from --tone, so the hero photo blends into whatever colour the journey is currently showing instead of sitting on a fixed dark plate. */ .hero-bg-tint{ position:absolute;inset:0; background: radial-gradient(90% 70% at 70% 18%,var(--hero-tint-a),transparent 70%), linear-gradient(to top,var(--hero-tint-b) 4%,var(--hero-tint-a) 46%,var(--hero-tint-a)); } .hero-watermark{ position:absolute;bottom:-4%;left:-1%;z-index:1; font-family:var(--font-display);font-weight:900;line-height:1; font-size:clamp(7rem,26vw,24rem);letter-spacing:.02em; color:transparent;-webkit-text-stroke:1px rgba(247,241,230,.09); user-select:none;pointer-events:none;white-space:nowrap; } .hero-inner{position:relative;z-index:2;display:grid;gap:clamp(1.1rem,2.4vh,1.8rem);justify-items:start} .hero-eyebrow{ display:inline-flex;align-items:center;gap:.7em; font-size:.85rem;letter-spacing:.05em;color:rgba(247,241,230,.88); border:1px solid rgba(247,241,230,.22);border-radius:999px; padding:.55em 1.3em;backdrop-filter:blur(6px); background:rgba(20,16,11,.35); } .chip-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0} .chip-dot::after{ content:'';position:absolute;inset:-4px;border-radius:50%; border:1px solid var(--accent);animation:ping 1.8s ease-out infinite; } @keyframes ping{0%{scale:.5;opacity:1}100%{scale:1.5;opacity:0}} .hero-title{ font-family:var(--font-display); font-size:clamp(2.7rem,7.6vw,6.4rem); font-weight:900;line-height:1.24; } .hero-title .line{display:block;overflow:clip;padding-block:.06em} .hero-title .w{display:inline-block;will-change:transform} .hero-title .accent{color:var(--accent)} .hero-sub{ max-width:68ch;font-size:clamp(.95rem,1.6vw,1.08rem); line-height:2.1;color:#f6f2e9; } .hero-badge{ display:inline-flex;align-items:center;gap:.8em; font-size:.85rem;font-weight:700;letter-spacing:.06em; color:var(--accent); border:1px solid rgba(232,163,76,.45);border-radius:999px; padding:.5em 1.4em;background:rgba(232,163,76,.1); backdrop-filter:blur(6px); } .hero-badge i{opacity:.55} .hero-cta{display:flex;gap:1rem;flex-wrap:wrap} .hero-foot{ display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap; width:100%;margin-top:clamp(.6rem,2vh,1.6rem); } .hero-mini-stats{display:flex;flex-wrap:wrap;gap:1.4rem} .hero-mini-stats li{ display:grid;gap:.15rem;padding-inline-start:1.4rem; border-inline-start:1px solid rgba(247,241,230,.24); } .hero-mini-stats b{font-family:var(--font-display);font-weight:850;font-size:1.25rem;line-height:1.3} .hero-mini-stats span{font-size:.8rem;color:rgba(247,241,230,.68)} .scroll-hint{display:grid;justify-items:center;gap:.7rem;color:rgba(247,241,230,.68)} .scroll-hint span{font-size:.74rem;letter-spacing:.22em} .scroll-line{position:relative;width:1px;height:48px;background:rgba(247,241,230,.24);overflow:clip} .scroll-line::after{ content:'';position:absolute;top:-40%;left:0;width:100%;height:40%; background:var(--accent);animation:scrollLine 1.8s ease-in-out infinite; } @keyframes scrollLine{to{top:110%}} /* Marquee */ .marquee{ border-block:1px solid rgba(247,241,230,.12); padding-block:1.15rem;overflow:clip; /* Slightly deeper than the surrounding tone so the band reads as a seam. */ background:color-mix(in srgb,var(--tone) 88%,#000); color:var(--ink); position:relative;z-index:3; } .marquee-track{display:flex;width:max-content;will-change:transform;animation:marquee 38s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-set{display:flex;align-items:center} .marquee-set li{ font-family:var(--font-display);font-weight:800; font-size:clamp(1.35rem,3vw,2.1rem);white-space:nowrap; padding-inline:1.6rem;display:flex;align-items:center;gap:3.2rem; } .marquee-set li::after{content:'✦';color:var(--accent);font-size:clamp(.8rem,1.6vw,1.1rem)} @keyframes marquee{from{translate:0}to{translate:50% 0}} /* Advantage */ .advantage{padding-block:var(--section-pad)} .adv-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem} .adv-card{ display:flex;flex-direction:column;gap:1rem; background:var(--panel-strong);border:1px solid var(--line); border-radius:var(--radius);padding:2rem 1.8rem; transition:border-color .4s,transform .5s var(--ease-out),box-shadow .5s; position:relative;overflow:clip; } .adv-card::after{ content:'';position:absolute;bottom:0;inset-inline:0;height:3px; background:linear-gradient(to left,var(--accent),transparent 70%); opacity:0;transition:opacity .4s; } .adv-card:hover{border-color:var(--accent-line);transform:translateY(-6px);box-shadow:var(--shadow)} .adv-card:hover::after{opacity:1} .adv-card:hover .i-badge{transform:translateY(-4px) rotate(-6deg);background:var(--accent);color:var(--gold-ink)} .adv-card h3{font-family:var(--font-display);font-weight:850;font-size:1.32rem} .adv-card p{color:var(--muted);font-size:.93rem;line-height:2.05} .wide-fig{ position:relative;margin-top:1.4rem; border-radius:var(--radius);overflow:clip; box-shadow:var(--shadow);background:var(--img-lots); } .wide-fig img{width:100%;aspect-ratio:21/8;object-fit:cover} .wide-fig figcaption{ position:absolute;inset-inline:0;bottom:0; display:flex;align-items:center;gap:.8em; padding:1.4rem 1.8rem; background:linear-gradient(to top,rgba(10,8,5,.9),transparent); color:var(--ink);font-size:.85rem; } .wide-fig figcaption svg{width:20px;height:20px;flex-shrink:0;color:var(--accent)} /* Quality */ .quality{padding-block:var(--section-pad)} .q-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.6rem,6vw,5rem);align-items:start} .q-fig{ position:sticky;top:calc(var(--header-h) + 24px); border-radius:var(--radius);overflow:clip;box-shadow:var(--shadow); background:var(--img-cupping); } .q-fig img{width:100%;aspect-ratio:4/3.4;object-fit:cover;transition:transform .9s var(--ease-out)} .q-fig:hover img{transform:scale(1.04)} .q-fig figcaption{ position:absolute;inset-inline:0;bottom:0; display:flex;align-items:center;gap:.7em; padding:1.3rem 1.5rem; background:linear-gradient(to top,rgba(10,8,5,.9),transparent); color:var(--ink);font-size:.85rem; } .q-fig figcaption svg{width:19px;height:19px;flex-shrink:0;color:var(--accent)} .q-rows{display:grid;gap:1.2rem} .q-row{ display:flex;gap:1.2rem;align-items:flex-start; background:var(--panel-strong);border:1px solid var(--line); border-radius:var(--radius-sm);padding:1.4rem 1.5rem; transition:border-color .4s,transform .5s var(--ease-out); } .q-row:hover{border-color:var(--accent-line);transform:translateX(-5px)} .q-row h3{font-family:var(--font-display);font-weight:800;font-size:1.15rem;margin-bottom:.3rem} .q-row p{color:var(--muted);font-size:.9rem;line-height:2} .std-chips{margin-top:1.6rem;display:flex;align-items:center;flex-wrap:wrap;gap:.8rem} .std-chips li{ font-family:var(--font-display);font-weight:800;font-size:.9rem;letter-spacing:.08em; color:var(--accent);border:1px solid var(--accent-line); border-radius:999px;padding:.55em 1.6em;background:var(--accent-soft); } /* Story */ .story{padding-block:var(--section-pad)} .story-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.6rem,6vw,5.5rem);align-items:center} .story-fig{position:relative;border-radius:var(--radius);overflow:clip;box-shadow:var(--shadow);background:var(--img-origin)} .story-fig::after{ content:'';position:absolute;inset:0; border:1px solid rgba(247,241,230,.08);border-radius:inherit;pointer-events:none; } .story-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s var(--ease-out)} .story-fig:hover img{transform:scale(1.05)} .story-badge{ position:absolute;bottom:1.2rem;inset-inline-start:1.2rem;z-index:2; display:flex;align-items:center;gap:.7em; background:rgba(20,16,11,.8);border:1px solid rgba(232,163,76,.35); border-radius:999px;padding:.55em 1.3em; color:var(--ink);font-size:.82rem;font-weight:600; backdrop-filter:blur(8px); } .story-badge svg{width:18px;height:18px;color:var(--accent);flex-shrink:0} .story-body .section-title{margin-bottom:1.1rem} .story-lead{font-size:1.02rem;line-height:2.25;color:var(--ink);max-width:54ch} .story-text{margin-top:1rem;color:var(--muted);font-size:.95rem;line-height:2.15;max-width:54ch} .story-body .btn{margin-top:1.8rem} /* Selection */ .selection{padding-block:var(--section-pad)} .sel-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.4rem,5vw,4.5rem);align-items:start} .spec-rows{border-top:1px solid var(--line)} .spec-row{ display:grid;grid-template-columns:minmax(40px,56px) minmax(90px,150px) 1fr auto; align-items:baseline;gap:1.1rem; padding:1.55rem .2rem;border-bottom:1px solid var(--line); transition:background-color .35s,padding .35s var(--ease-out); } .spec-row:hover{background:var(--panel);padding-inline:.9rem;border-radius:14px} .spec-num{font-family:var(--font-display);font-weight:850;font-size:.95rem;color:var(--accent)} .spec-label{font-size:.85rem;font-weight:700;color:var(--muted);letter-spacing:.06em} .spec-value{ font-family:var(--font-display);font-weight:800; font-size:1rem;line-height:1.8; } .spec-latin{font-size:.72rem;letter-spacing:.14em;color:var(--muted)} .sel-side{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:1.2rem} .sel-fig{position:relative;border-radius:var(--radius);overflow:clip;box-shadow:var(--shadow);background:var(--img-screening)} .sel-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--ease-out)} .sel-fig:hover img{transform:scale(1.05)} .sel-fig figcaption{ position:absolute;inset-inline:0;bottom:0; padding:1.2rem 1.4rem; background:linear-gradient(to top,rgba(10,8,5,.88),transparent); color:var(--ink);font-size:.8rem; } /* Buying routes */ .buying{padding-block:var(--section-pad)} .buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem} .buy-card{ position:relative;display:flex;flex-direction:column;gap:.9rem; background:var(--panel-strong);border:1px solid var(--line); border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.2rem); transition:border-color .4s,transform .5s var(--ease-out),box-shadow .5s; overflow:clip; } .buy-card::before{ content:'';position:absolute;top:0;inset-inline:0;height:3px; background:linear-gradient(to left,var(--accent),transparent 70%); opacity:0;transition:opacity .4s;z-index:2; } .buy-card:hover{border-color:var(--accent-line);transform:translateY(-6px);box-shadow:var(--shadow)} .buy-card:hover::before{opacity:1} .buy-fig{margin:0 0 .6rem;border-radius:18px;overflow:clip;background:var(--img-proforma)} .buy-fig img{width:100%;aspect-ratio:16/6.5;object-fit:cover;transition:transform .9s var(--ease-out)} .buy-card:hover .buy-fig img{transform:scale(1.06)} .buy-card:last-child .buy-fig{background:var(--img-domestic)} .buy-tag{ width:max-content;font-size:.64rem;font-weight:700;letter-spacing:.3em; color:var(--accent);border:1px solid var(--accent-line); border-radius:999px;padding:.5em 1.2em;background:var(--accent-soft); } .buy-card h3{font-family:var(--font-display);font-weight:850;font-size:clamp(1.4rem,2.6vw,1.85rem)} .buy-card > p{color:var(--muted);font-size:.94rem;line-height:2.1;max-width:52ch} .buy-list{display:grid;gap:.55rem;margin-block:.4rem .6rem} .buy-list li{position:relative;padding-inline-start:1.5rem;font-size:.9rem;color:var(--ink)} .buy-list li::before{ content:'';position:absolute;inset-inline-start:0;top:.72em; width:8px;height:8px;border-radius:50%;border:1.5px solid var(--accent); } .buy-card .btn{margin-top:auto;align-self:flex-start} /* Price */ .price{padding-block:var(--section-pad)} .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .price-card{ display:flex;flex-direction:column;gap:1rem; background:var(--panel-strong);border:1px solid var(--line); border-radius:var(--radius);padding:2rem 1.8rem; transition:border-color .4s,transform .5s var(--ease-out),box-shadow .5s; } .price-card:hover{border-color:var(--accent-line);transform:translateY(-6px);box-shadow:var(--shadow)} .price-card h3{font-family:var(--font-display);font-weight:850;font-size:1.25rem} .price-card p{color:var(--muted);font-size:.92rem;line-height:2.05} .price-note{ margin:clamp(2rem,4vw,3rem) auto 0; display:flex;align-items:center;gap:.9em; border:1px dashed var(--accent-line); border-radius:18px;padding:1.15em 1.7em; color:var(--muted);font-size:.9rem;line-height:1.9; background:rgba(232,163,76,.07); max-width:860px; } .price-note svg{width:22px;height:22px;flex-shrink:0;color:var(--accent)} /* Origins */ .origins{padding-block:var(--section-pad)} .origins-map{ border-radius:var(--radius);overflow:clip; margin-bottom:clamp(2rem,4vw,3rem); background:linear-gradient(160deg,#1b1512,#241c16 60%,#1b1512); border:1px solid var(--line); position:relative; } .map-svg{width:100%;height:auto;display:block} .map-belt rect{fill:rgba(232,163,76,.05)} .map-belt line{stroke:rgba(232,163,76,.35);stroke-width:1} .map-continents path{fill:rgba(247,241,230,.07);stroke:rgba(247,241,230,.13);stroke-width:1} .map-pin circle{ fill:var(--accent);stroke:rgba(20,16,11,.9);stroke-width:2; transition:r .3s var(--ease-out); } .map-pin text{ fill:var(--ink);font-family:var(--font-body);font-size:15px;font-weight:600; text-anchor:middle;paint-order:stroke; stroke:rgba(20,16,11,.85);stroke-width:4px;stroke-linejoin:round; } .map-pin:hover circle{r:10} .origins-map figcaption{ display:grid;gap:.15rem; padding:1.3rem 1.8rem 1.6rem; border-top:1px solid var(--line); background:rgba(10,8,5,.4); color:var(--ink); } .origins-map figcaption b{font-family:var(--font-display);font-weight:850;font-size:1.2rem} .origins-map figcaption span{font-size:.82rem;color:rgba(247,241,230,.72);max-width:60ch} .flow-chips{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:clamp(2.4rem,5vw,3.6rem);margin-top: 10px;} .flow-chips li{ display:inline-flex;align-items:center;gap:.7em; background:var(--panel-strong);border:1px solid var(--line); border-radius:999px;padding:.6em 1.5em; font-size:.9rem;font-weight:600; transition:border-color .35s,transform .35s var(--ease-out); } .flow-chips li:hover{border-color:var(--accent-line);transform:translateY(-3px)} .flow-chips li i{ display:grid;place-items:center;width:26px;height:26px; font-size:.72rem;font-weight:700; color:var(--gold-ink);background:var(--accent);border-radius:50%; } .o-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .o-card{ --oc-c:var(--oc,#e8a34c); display:flex;flex-direction:column;gap:1rem; background:var(--panel-strong);border:1px solid var(--line); border-radius:var(--radius);padding:1.7rem; transition:border-color .4s,transform .5s var(--ease-out),box-shadow .5s; position:relative;overflow:clip; } .o-card::after{ content:'';position:absolute;top:0;inset-inline:0;height:3px; background:var(--oc-c);opacity:0;transition:opacity .4s; } .o-card::before{ content:attr(data-code); position:absolute;bottom:-1.2rem;inset-inline-end:.3rem;z-index:0; font-family:var(--font-display);font-weight:900;line-height:1; font-size:4.6rem;letter-spacing:.02em; color:transparent;-webkit-text-stroke:1px var(--oc-c); opacity:.16;pointer-events:none;user-select:none; transition:opacity .4s,transform .5s var(--ease-out); } .o-card:hover{border-color:var(--oc-c);transform:translateY(-6px);box-shadow:var(--shadow)} .o-card:hover::after{opacity:1} .o-card:hover::before{opacity:.4;transform:translateY(-4px)} .o-head{display:flex;align-items:center;gap:1rem;position:relative;z-index:1} .o-flag{ flex-shrink:0;width:62px;height:42px; border-radius:10px;overflow:clip; border:1px solid var(--line-strong); box-shadow:0 4px 12px -6px rgba(0,0,0,.35); transition:transform .4s var(--ease-out),box-shadow .4s; } .o-flag svg{width:100%;height:100%} .o-card:hover .o-flag{transform:scale(1.08) rotate(-3deg);box-shadow:0 8px 18px -8px rgba(0,0,0,.45)} .o-head h3{font-family:var(--font-display);font-weight:850;font-size:1.4rem;line-height:1.3} .o-latin{font-size:.62rem;letter-spacing:.3em;color:var(--muted)} .o-vars{display:flex;flex-wrap:wrap;gap:.45rem;position:relative;z-index:1} .o-vars li{ font-size:.78rem;color:var(--muted); border:1px solid var(--line);border-radius:999px;padding:.38em 1em; transition:border-color .3s,color .3s; } .o-card:hover .o-vars li{border-color:color-mix(in srgb,var(--oc-c) 45%,transparent);color:var(--ink)} .o-meta{display:grid;gap:.4rem;padding-top:.4rem;border-top:1px dashed var(--line);position:relative;z-index:1} .o-meta div{display:flex;align-items:baseline;gap:.7rem;font-size:.82rem} .o-meta dt{color:var(--muted);min-width:4.5ch;letter-spacing:.04em} .o-meta dd{font-weight:600} .o-cta{ margin-top:auto;align-self:flex-start;position:relative;z-index:1; display:inline-flex;align-items:center;gap:.55em; font-size:.88rem;font-weight:700;color:var(--ink); min-height:44px; transition:color .3s,transform .35s var(--ease-out); } .o-cta::before{content:'';width:14px;height:1.5px;background:currentColor;transition:width .35s var(--ease-out)} .o-cta:hover{color:var(--oc-c);transform:translateX(-4px)} .o-cta:hover::before{width:22px} /* Steps */ .steps{padding-block:var(--section-pad)} .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem} .step{position:relative;padding-top:1.7rem;border-top:1px solid var(--line);transition:border-color .4s} .step::before{ content:'';position:absolute;top:-4.5px;inset-inline-start:0; width:9px;height:9px;border-radius:50%;background:var(--accent); transition:scale .35s var(--ease-out); } .step:hover{border-top-color:var(--accent-line)} .step:hover::before{scale:1.5} .step .i-badge{margin-bottom:1.2rem} .step:hover .i-badge{transform:translateY(-4px);background:var(--accent);color:var(--gold-ink)} .step-num{display:block;font-size:.8rem;letter-spacing:.24em;color:var(--accent);margin-bottom:.8rem;font-weight:700} .step h3{font-family:var(--font-display);font-weight:800;font-size:1.18rem;margin-bottom:.55rem} .step p{color:var(--muted);font-size:.92rem;line-height:2.05} /* FAQ */ .faq{padding-block:clamp(4.5rem,10vw,8rem)} .faq .section-head{margin-bottom:2.4rem} .accordion{border-top:1px solid var(--line)} .acc{border-bottom:1px solid var(--line)} .acc summary{ list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.2rem; padding:1.45rem .2rem;cursor:pointer; font-family:var(--font-body);font-weight:700;font-size:1.03rem; transition:color .3s; } .acc summary::-webkit-details-marker{display:none} .acc summary::marker{content:''} .acc summary:hover{color:var(--accent)} .acc[open] summary{color:var(--accent)} .acc-icon{ position:relative;flex-shrink:0;width:36px;height:36px; border:1px solid var(--line-strong);border-radius:50%; transition:rotate .4s var(--ease-out),background-color .35s,border-color .35s,color .35s; } .acc-icon::before,.acc-icon::after{ content:'';position:absolute;top:50%;left:50%; width:13px;height:1.6px;border-radius:2px;background:currentColor; translate:-50% -50%; } .acc-icon::after{rotate:90deg} .acc[open] .acc-icon{rotate:135deg;background:var(--accent);border-color:var(--accent);color:var(--gold-ink)} .acc-body{overflow:hidden} .acc-body p{padding:0 .2rem 1.6rem;color:var(--muted);line-height:2.15;max-width:85ch;font-size:.95rem} /* Native open/close animation where supported; JS is not required. */ @supports (interpolate-size:allow-keywords){ :root{interpolate-size:allow-keywords} .acc-body{height:0;transition:height .38s var(--ease-out)} .acc[open] .acc-body{height:auto} } /* 6. Contact & form ------------------------------------------------------ */ .contact{position:relative;overflow:clip;padding-block:clamp(5rem,11vw,10rem)} .contact-bg{ position:absolute;inset:0;z-index:0; background-color:#352117; background-image: url('../img/r/contact-bg-1920.webp'); background-position:center;background-size:cover;background-repeat:no-repeat; opacity:.3; } /* Scrim derived from --tone: the photo sinks into the current journey colour. */ .contact-bg::after{ content:'';position:absolute;inset:0; background: radial-gradient(85% 75% at 72% 12%,var(--hero-tint-a),var(--scrim) 82%), linear-gradient(to bottom,var(--hero-tint-a),var(--hero-tint-b)); } .contact-grid{ position:relative;z-index:1; display:grid;grid-template-columns:1.05fr 1fr; gap:clamp(3rem,6vw,6rem);align-items:start; } .contact-title{ font-family:var(--font-display);font-weight:900; font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.45; margin-bottom:1.1rem;color:var(--ink); } .contact-sub{color:rgba(247,241,230,.78);line-height:2.15;max-width:46ch;font-size:.97rem} .contact-hints{ margin-top:2rem; background:rgba(255,255,255,.045); border:1px solid rgba(247,241,230,.14); border-radius:18px;padding:1.4rem 1.6rem; backdrop-filter:blur(6px); } .contact-hints b{display:block;font-size:.88rem;color:var(--accent);margin-bottom:.7rem} .contact-hints ul{display:grid;gap:.4rem} .contact-hints li{ position:relative;padding-inline-start:1.3rem; font-size:.86rem;color:rgba(247,241,230,.82);line-height:1.9; } .contact-hints li::before{ content:'';position:absolute;inset-inline-start:0;top:.75em; width:6px;height:6px;border-radius:50%;background:var(--accent); } .contact-rows{margin-top:2.2rem;display:grid;gap:.9rem;grid-template-columns: repeat(2, 1fr)} .c-row{ display:flex;align-items:center;gap:1.05rem; padding:.5rem 0; transition:transform .35s var(--ease-out); } .c-row:hover{transform:translateX(-5px)} .c-row > svg{ width:44px;height:44px;flex-shrink:0;padding:10px; border:1px solid rgba(247,241,230,.18);border-radius:12px;color:var(--accent); } .c-row-body{display:grid;gap:.1rem} .c-row-body b{font-size:1rem;letter-spacing:.03em;color:var(--ink)} .c-row-body small{font-size:.8rem;color:rgba(247,241,230,.7)} .contact-form{ display:grid;gap:1.15rem; background:rgba(255,255,255,.045); border:1px solid rgba(247,241,230,.14); border-radius:28px; padding:clamp(1.6rem,3.4vw,2.5rem); backdrop-filter:blur(8px); } .form-context{ display:flex;align-items:center;justify-content:space-between;gap:1rem; background:rgba(232,163,76,.11); border:1px dashed rgba(232,163,76,.5); border-radius:14px;padding:.7em 1.1em; font-size:.88rem;color:var(--accent);font-weight:600; } .form-context button{ flex-shrink:0;display:grid;place-items:center; width:30px;height:30px;border-radius:50%; border:1px solid rgba(232,163,76,.45); color:var(--accent); transition:background-color .3s,color .3s; } .form-context button svg{width:14px;height:14px} .form-context button:hover{background:var(--accent);color:var(--gold-ink)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem} .field{display:grid;gap:.45rem} .field > label{font-size:.82rem;color:rgba(247,241,230,.78);letter-spacing:.03em} .field .req{color:var(--accent)} .field .opt{color:rgba(247,241,230,.55);font-size:.94em} .field input, .field textarea, .field select{ width:100%;font:inherit;font-size:.95rem;color:var(--ink); background:rgba(255,255,255,.05); border:1px solid rgba(247,241,230,.16);border-radius:13px; padding:.85em 1.05em;min-height:50px; transition:border-color .3s,box-shadow .3s,background-color .3s; } .field textarea{resize:vertical;min-height:112px} .field ::placeholder{color:rgba(247,241,230,.5);opacity:1} .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{ outline:none;border-color:var(--accent); box-shadow:0 0 0 3.5px rgba(232,163,76,.2); background:rgba(255,255,255,.07); } .select-wrap{position:relative;display:block} .select-wrap::after{ content:'';position:absolute;inset-inline-end:1.1rem;top:50%; width:9px;height:9px;margin-top:-6px; border-inline-end:2px solid var(--accent);border-bottom:2px solid var(--accent); rotate:45deg;pointer-events:none; } .field select{appearance:none;padding-inline-end:2.6rem;cursor:pointer} .field select option{background:#1d1712;color:var(--ink)} .field.error input, .field.error textarea, .field.error select{border-color:var(--danger);box-shadow:0 0 0 3.5px rgba(255,138,143,.16)} .field-error{font-size:.78rem;color:var(--danger);line-height:1.7} .hp-field{ position:absolute!important;width:1px;height:1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap;inset-inline-start:-9999px; } .form-note{font-size:.8rem;color:rgba(247,241,230,.62);text-align:center} .form-alert{ display:flex;align-items:center;gap:.6em; border:1px solid rgba(255,138,143,.4);background:rgba(255,138,143,.1); color:#ffb9bc;border-radius:13px;padding:.85em 1.1em;font-size:.88rem; } .form-success{ justify-items:center;text-align:center;display:grid;gap:.6rem; padding:2.2rem 1rem; } .form-success svg{width:56px;height:56px;color:var(--accent)} .form-success b{font-family:var(--font-display);font-weight:850;font-size:1.25rem} .form-success span{color:rgba(247,241,230,.75);font-size:.92rem} .form-success .btn{margin-top:.6rem} .contact-form.sent > *:not(.form-success){display:none} /* 7. Footer & floating UI ------------------------------------------------ */ .footer{ position:relative;overflow:clip; border-top:1px solid var(--line); padding-top:clamp(3.4rem,7vw,5rem); background:var(--bg); } .footer-grid{ display:grid;grid-template-columns:1.5fr 1fr 1fr; gap:clamp(2rem,5vw,4rem);padding-bottom:clamp(2.6rem,5vw,4rem); } .footer-brand p{color:var(--muted);font-size:.9rem;line-height:2.15;margin-top:1.2rem;max-width:36ch} .footer-nav,.footer-contact{display:grid;gap:.75rem;align-content:start} .footer-nav h2,.footer-contact h2{ font-size:.78rem;letter-spacing:.2em;color:var(--accent); margin-bottom:.5rem;font-weight:700;font-family:var(--font-body); } .footer-nav a,.footer-contact a{ width:max-content;color:var(--muted);font-size:.92rem; transition:color .3s,transform .3s var(--ease-out); } .footer-nav a:hover{color:var(--accent);transform:translateX(-4px)} .footer-contact a:hover{color:var(--accent)} .footer-bottom{ border-top:1px solid var(--line); padding-block:1.4rem; display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-size:.8rem;color:var(--muted); } .footer-made{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase} .footer-watermark{ font-family:var(--font-display);font-weight:900;line-height:.78; font-size:clamp(4rem,15vw,12rem);text-align:center; color:transparent;-webkit-text-stroke:1px var(--line); translate:0 30%; user-select:none;pointer-events:none; } .wa-float{ position:fixed;bottom:1.4rem;inset-inline-end:1.4rem;z-index:var(--z-wa); display:inline-flex;align-items:center;gap:.65em; background:#0e7a42;color:#fff;font-weight:700;font-size:.9rem;line-height:1; border-radius:999px;padding:1em 1.5em;min-height:52px; box-shadow:0 14px 34px -12px rgba(14,122,66,.7); transition:transform .35s var(--ease-out),box-shadow .35s,background-color .35s; } .wa-float::before{ content:'';position:absolute;inset:-3px;border-radius:999px; border:2px solid rgba(37,211,102,.5); animation:waPing 2.2s ease-out infinite; } .wa-float svg{width:21px;height:21px;flex-shrink:0} .wa-float:hover{transform:translateY(-3px);background:#0f8a4a;box-shadow:0 18px 40px -12px rgba(14,122,66,.75)} @keyframes waPing{0%{opacity:.75;scale:1}70%,100%{opacity:0;scale:1.18}} /* 8. Responsive & motion ------------------------------------------------- */ @media (max-width:1080px){ .nav{display:none} .burger{display:flex} } @media (max-width:1060px){ .adv-wrap{grid-template-columns:1fr} .q-wrap{grid-template-columns:1fr} .q-fig{position:static;max-width:640px} .sel-wrap{grid-template-columns:1fr} .sel-side{position:static} .o-grid{grid-template-columns:repeat(2,1fr)} .steps-grid{grid-template-columns:repeat(2,1fr);gap:2.2rem 1.6rem} .buy-grid{grid-template-columns:1fr} .price-grid{grid-template-columns:1fr} .price-note{align-items:flex-start} .story-grid{grid-template-columns:1fr} .story-fig{max-width:640px} .contact-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:span 2} .map-pin text{font-size:19px} } @media (max-width:640px){ .header-inner{ width:100%;padding-inline:10px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center; } .logo{grid-column:2;grid-row:1;justify-self:center} .header-actions{grid-column:3;grid-row:1;justify-self:end;margin:0} .mobile-menu-close{inset-inline-end:10px} .hero{padding-bottom:2.4rem} .hero-cta{width:100%} .hero-cta .btn{flex:1 1 auto;min-width:max-content} .hero-foot{flex-direction:column;align-items:flex-start} .scroll-hint{display:none} .hero-mini-stats{gap:1rem} .hero-mini-stats li{padding-inline-start:1rem} .hero-mini-stats b{font-size:1.05rem} .o-grid{grid-template-columns:1fr} .steps-grid{grid-template-columns:1fr} .spec-row{grid-template-columns:1fr;gap:.2rem;padding-block:1.25rem} .spec-num,.spec-latin{display:none} .form-row{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .footer-brand{grid-column:span 1} .header-actions .btn-sm{display:none} .section-head::before{font-size:4rem;top:-.7em} .price-note{flex-direction:column;align-items:flex-start} .map-pin text{font-size:26px} .wa-float{padding:1em;inset-inline-end:1rem;bottom:1rem} .wa-float .wa-tip{display:none} .wa-float svg{width:24px;height:24px} } /* Anything that only exists for decoration stops moving on request. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .grain,.cursor{display:none} .marquee-track{animation:none} [data-reveal],[data-hero-fade]{opacity:1!important;translate:none!important;transform:none!important} } @media (max-width: 600px) { .contact-rows { grid-template-columns: 1fr; /* تو موبایل یه ستونه */ } } /* Without JS every progressive enhancement must resolve to a visible state. */ html:not(.js) [data-reveal], html:not(.js) [data-hero-fade]{opacity:1;translate:none;transform:none} html:not(.js) .cursor, html:not(.js) .grain{display:none}