/* ============================================================ TEMP CAFE — Design System Premium specialty coffee brand. Warm, editorial, handcrafted. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400&family=Vazirmatn:wght@300;400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap'); :root{ /* ---- Color tokens — TEMP CAFE brand palette (5 colors only) ---- */ --dark:#2A1A12; /* Primary Dark — all body text, deepest surfaces */ --brown:#5A3323; /* Primary Brown — hero / footer / loader bg, primary buttons */ --brown2:#8E5A3C; /* Secondary Brown — cards, accents */ --tan:#C99A74; /* Light Brown — cards, hover, accents */ --bg:#F2E1D2; /* Background */ /* ---- Legacy aliases kept for internal consistency (mapped to the 5 tokens above) ---- */ --espresso:var(--dark); --roast:var(--brown); --roast-light:var(--brown2); --cream:var(--bg); --beige:var(--tan); --white:var(--bg); --crema:var(--tan); --crema-deep:var(--brown2); --line:rgba(42,26,18,.14); --line-strong:rgba(42,26,18,.28); --shadow-xs:0 2px 8px -4px rgba(42,26,18,.22); --shadow-soft:0 10px 30px -14px rgba(42,26,18,.3), 0 30px 60px -30px rgba(42,26,18,.24); --shadow-lift:0 20px 50px -18px rgba(42,26,18,.38), 0 50px 90px -35px rgba(42,26,18,.32); --shadow-glow:0 0 0 1px rgba(201,154,116,.35), 0 18px 46px -16px rgba(42,26,18,.42); /* ---- Type ---- */ --font-display:'Noto Naskh Arabic','Noto Serif',serif; --font-body:'Vazirmatn','Noto Naskh Arabic',sans-serif; /* ---- Rhythm ---- */ --container:1280px; --radius-s:8px; --radius-m:16px; --radius-l:32px; --ease:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.16,.84,.44,1); } ::selection{background:var(--crema);color:var(--white);} *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;} } body{ margin:0; background:var(--bg); color:var(--espresso); font-family:var(--font-body); direction:rtl; text-align:right; -webkit-font-smoothing:antialiased; line-height:1.75; overflow-x:hidden; font-size:16.5px; } h1,h2,h3,h4{ font-family:var(--font-display); color:var(--espresso); margin:0 0 .5em; line-height:1.22; font-weight:700; letter-spacing:-.015em; } h1{font-size:clamp(2.6rem,5.4vw,5.4rem);line-height:1.12;} h2{font-size:clamp(2rem,3.4vw,3.3rem);} h3{font-size:clamp(1.32rem,1.9vw,1.75rem);} p{margin:0 0 1em;color:var(--roast-light);text-align:justify;text-justify:inter-word;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} button{font-family:inherit;} :focus-visible{outline:2.5px solid var(--crema);outline-offset:3px;border-radius:4px;} .eyebrow{ font-family:var(--font-body); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--crema-deep); display:flex;align-items:center;gap:10px; margin-bottom:14px; } .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--crema);display:inline-block;} .container{max-width:var(--container);margin:0 auto;padding:0 36px;} @media (max-width:640px){.container{padding:0 22px;}} .section{padding:150px 0;} @media (max-width:900px){.section{padding:88px 0;}} /* ---- Signature divider: coffee "pour line" ---- */ .pour-divider{width:100%;height:34px;display:flex;align-items:center;justify-content:center;margin:8px 0;} .pour-divider svg{width:220px;height:20px;} .pour-divider path{stroke:var(--beige);stroke-width:1.4;fill:none;} /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:17px 36px; border-radius:999px; font-size:.95rem;font-weight:600; letter-spacing:.01em; border:1.5px solid transparent; cursor:pointer; transition:transform .45s cubic-bezier(.22,.9,.32,1.28),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .45s var(--ease-soft),letter-spacing .4s var(--ease); white-space:nowrap; position:relative; overflow:hidden; will-change:transform; } .btn-primary{background:var(--roast);color:var(--cream);box-shadow:var(--shadow-xs);} .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(201,154,116,.35),transparent);transform:translateX(-120%);transition:transform .7s var(--ease-soft);} .btn-primary:hover{background:var(--espresso);transform:translateY(-3px) scale(1.025);box-shadow:var(--shadow-glow),0 0 26px -8px rgba(142,90,60,.55);letter-spacing:.03em;} .btn-primary:hover::after{transform:translateX(120%);} .btn-primary:active{transform:translateY(-1px) scale(.975);transition-duration:.15s;} .btn-ghost{background:transparent;color:var(--roast);border-color:var(--line-strong);} .btn-ghost:hover{border-color:var(--roast);background:rgba(90,51,35,.06);transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-xs),0 0 18px -8px rgba(142,90,60,.4);} .btn-ghost:active{transform:translateY(-1px) scale(.975);transition-duration:.15s;} .btn-outline-light{background:transparent;color:var(--cream);border-color:rgba(242,225,210,.5);} .btn-outline-light:hover{background:rgba(242,225,210,.12);border-color:var(--cream);transform:translateY(-3px) scale(1.02);box-shadow:0 0 22px -8px rgba(242,225,210,.35);} .btn-outline-light:active{transform:translateY(-1px) scale(.975);transition-duration:.15s;} .btn-sm{padding:12px 24px;font-size:.83rem;} .btn-block{width:100%;} .btn[disabled]{opacity:.5;cursor:not-allowed;} /* ============================================================ NAV ============================================================ */ .site-nav{ position:fixed;top:0;left:0;right:0;z-index:900; padding:26px 0; transition:padding .5s var(--ease-soft),background .5s var(--ease-soft),box-shadow .5s var(--ease-soft); } .site-nav.is-scrolled{ padding:14px 0; background:rgba(242,225,210,.78); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%); box-shadow:0 1px 0 var(--line),0 12px 30px -20px rgba(42,26,18,.25); } .nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;} .nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--dark);} .nav-logo .brand-mark{width:23px;height:32px;flex:none;transition:transform .5s var(--ease-soft);} .nav-logo .brand-mark img{width:100%;height:100%;display:block;object-fit:contain;} .nav-logo:hover .brand-mark{transform:rotate(-8deg) scale(1.06);} .nav-logo small{display:block;font-family:var(--font-body);font-size:.83rem;font-weight:600;letter-spacing:.24em;color:var(--brown2);text-transform:uppercase;} .footer-brand .brand-mark{width:22px;height:30px;} /* ---- Horizontal toolbar navigation (desktop) ---- */ .nav-links{ list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;flex-wrap:nowrap; } @media (max-width:900px){.nav-links{display:none;}} .nav-item{position:relative;} .nav-link{ display:inline-flex;align-items:center;gap:5px; padding:10px 15px;border-radius:999px; font-family:inherit;font-size:.88rem;font-weight:600;color:var(--dark); background:transparent;border:none;cursor:pointer;white-space:nowrap; transition:background .3s var(--ease),color .3s var(--ease); } .nav-link:hover{background:rgba(142,90,60,.1);} .nav-link.active{background:var(--roast);color:var(--cream);} .dropdown-trigger::after{ content:'';width:6px;height:6px;margin-inline-start:3px;flex:none; border-inline-start:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:rotate(-45deg);transition:transform .3s var(--ease); } .dropdown-trigger[aria-expanded="true"]::after{transform:rotate(135deg);} .shop-dropdown{ position:absolute;top:calc(100% + 10px);inset-inline-start:0; min-width:230px; background:rgba(242,225,210,.88); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(242,225,210,.6); border-radius:var(--radius-m); box-shadow:var(--shadow-lift); padding:12px; display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .35s var(--ease-soft),transform .35s var(--ease-soft),visibility .35s; z-index:950; } .shop-dropdown.open{opacity:1;visibility:visible;transform:translateY(0);} .shop-dropdown a{ display:block;padding:10px 14px;border-radius:var(--radius-s); font-size:.88rem;color:var(--roast);transition:background .25s var(--ease),color .25s var(--ease); } .shop-dropdown a:hover{background:var(--tan);color:var(--espresso);} /* ---- Language switch ---- */ .lang-switch{ height:38px;padding:0 15px;border-radius:999px; border:1.5px solid var(--line-strong);background:transparent;color:var(--dark); font-family:inherit;font-weight:700;font-size:.78rem;letter-spacing:.04em;cursor:pointer; transition:background .3s var(--ease),transform .3s var(--ease-soft); } .lang-switch:hover{background:rgba(142,90,60,.1);transform:translateY(-2px);} /* ---- Mobile / tablet: horizontally scrollable nav row, no hamburger ---- */ .nav-scroll{ display:none; gap:6px;overflow-x:auto;overflow-y:hidden; padding:12px 20px 4px;margin-top:10px; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .nav-scroll::-webkit-scrollbar{display:none;} .nav-scroll a{ flex:none;padding:9px 16px;border-radius:999px; font-size:.84rem;font-weight:600;color:var(--dark); background:rgba(142,90,60,.08);white-space:nowrap; transition:background .3s var(--ease),color .3s var(--ease); } .nav-scroll a.active{background:var(--roast);color:var(--cream);} @media (max-width:900px){.nav-scroll{display:flex;}} .nav-icons{display:flex;align-items:center;gap:6px;} .icon-btn{ width:42px;height:42px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:transparent;border:1.5px solid transparent;color:var(--dark); cursor:pointer;position:relative;transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease-soft); } .icon-btn:hover{background:rgba(142,90,60,.12);border-color:var(--line);transform:translateY(-2px);box-shadow:var(--shadow-xs);} .icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;} .icon-badge{ position:absolute;top:2px;left:2px; background:var(--brown2);color:var(--bg); font-size:.62rem;font-weight:700; width:16px;height:16px;border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 0 0 2px var(--bg); } @media (max-width:560px){ #searchTrigger, .nav-icons a.icon-btn:nth-of-type(1), .nav-icons a.icon-btn:nth-of-type(2){display:none;} .lang-switch{padding:0 11px;font-size:.72rem;} .nav-logo small{display:none;} .nav-logo{font-size:1.12rem;gap:8px;} .nav-row{gap:12px;} } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; padding:150px 0 64px; background: radial-gradient(ellipse 90% 60% at 75% 15%, rgba(201,154,116,.22), transparent 60%), linear-gradient(165deg,#6B4128 0%,#5A3323 45%,#2A1A12 100%); color:var(--bg); overflow:hidden; } .hero-grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none;} .hero-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -160px 160px -100px rgba(42,26,18,.65),inset 0 160px 160px -120px rgba(42,26,18,.4);} .hero-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;} /* ---- Hero image slider ---- */ /* New source photos are landscape/square (~1.0–2.0 w/h ratio); the slider is sized to that family of ratios so each image displays with only a mild, even crop rather than the heavy crop a mismatched box would force. */ .hero-slider{ position:relative; width:100%; aspect-ratio:3/2; max-height:620px; margin:0 auto; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-lift); opacity:0;transform:scale(.97); animation:heroFadeUp .9s cubic-bezier(.16,.9,.3,1) .15s forwards; } .hero-slider::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,26,18,0) 60%,rgba(42,26,18,.35) 100%);pointer-events:none;z-index:1;} .hero-slide{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:center;opacity:0;transition:opacity 1.1s ease;} .hero-slide.active{opacity:1;} .hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:38px;} .hero-stats{display:flex;gap:36px;margin-top:40px;flex-wrap:wrap;justify-content:center;} /* ---- Hero entrance (staggered fade + rise, plays once on load) ---- */ .hero-slider,.hero-cta,.hero-stats{ opacity:0;transform:translateY(26px); animation:heroFadeUp .9s cubic-bezier(.16,.9,.3,1) forwards; } .hero-slider{animation-delay:.1s;transform:scale(.97);} .hero-cta{animation-delay:.4s;} .hero-stats{animation-delay:.56s;} @keyframes heroFadeUp{to{opacity:1;transform:translateY(0) scale(1);}} @media (prefers-reduced-motion:reduce){ .hero-slider,.hero-cta,.hero-stats{animation:none;opacity:1;transform:none;} .hero-slide{transition:none;} } .hero-stats div{border-right:1.5px solid rgba(242,225,210,.22);padding-right:22px;} .hero-stats div:first-child{border-right:none;padding-right:0;} .hero-stats strong{display:block;font-family:var(--font-display);font-size:1.35rem;color:var(--white);} .hero-stats span{font-size:.78rem;color:rgba(242,225,210,.6);} @media (max-width:640px){.hero{padding:130px 0 48px;}.hero-slider{aspect-ratio:4/3;max-height:320px;}.hero-stats{gap:22px;}.hero-stats div{padding-right:14px;}} /* ============================================================ CARDS — categories / products ============================================================ */ .grid{display:grid;gap:26px;} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} @media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}} @media (max-width:620px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}} .cat-card{ position:relative;border-radius:var(--radius-l);overflow:hidden; aspect-ratio:3/4;background:var(--roast); box-shadow:var(--shadow-soft); transition:box-shadow .5s var(--ease-soft),transform .5s var(--ease-soft); } .cat-card:hover{box-shadow:var(--shadow-glow);transform:translateY(-6px);} .cat-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-soft);} .cat-card:hover img{transform:scale(1.1);} .cat-card .cat-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,26,18,0) 38%,rgba(42,26,18,.86) 100%);} .cat-card .cat-label{position:absolute;right:24px;bottom:22px;left:24px;color:var(--white);transition:transform .5s var(--ease-soft);} .cat-card:hover .cat-label{transform:translateY(-4px);} .cat-card .cat-label span{font-size:.72rem;letter-spacing:.1em;color:var(--beige);text-transform:uppercase;} .cat-card .cat-label h3{color:var(--white);margin:4px 0 0;} .product-card{ background:linear-gradient(165deg,rgba(242,225,210,.55) 0%,transparent 40%),var(--tan); border-radius:var(--radius-l); border:1px solid var(--line);overflow:hidden; box-shadow:var(--shadow-xs); transition:box-shadow .55s var(--ease-soft),transform .55s var(--ease-soft),border-color .55s var(--ease-soft); display:flex;flex-direction:column; position:relative; } .product-card:hover{box-shadow:var(--shadow-glow);transform:translateY(-8px);border-color:transparent;} .product-media{position:relative;aspect-ratio:1/1;background:var(--brown2);overflow:hidden;} .product-media::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(242,225,210,.22) 0%,transparent 30%);pointer-events:none;opacity:0;transition:opacity .6s var(--ease-soft);z-index:1;} .product-card:hover .product-media::after{opacity:1;} .product-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-soft);} .product-card:hover .product-media img{transform:scale(1.07) rotate(-.5deg);} .product-tag{position:absolute;top:14px;right:14px;background:rgba(242,225,210,.94);backdrop-filter:blur(6px);padding:6px 13px;border-radius:999px;font-size:.7rem;font-weight:700;color:var(--dark);box-shadow:var(--shadow-xs);} .product-actions{position:absolute;bottom:14px;left:14px;right:14px;display:flex;gap:8px;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease-soft),transform .4s var(--ease-soft);} .product-card:hover .product-actions{opacity:1;transform:translateY(0);} .product-wish{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:50%;background:rgba(242,225,210,.92);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:transform .3s var(--ease-soft);} .product-wish:hover{transform:scale(1.1);} .product-wish svg{width:16px;height:16px;stroke:var(--dark);fill:none;stroke-width:1.7;transition:transform .4s var(--ease-soft);} .product-wish.active svg{fill:var(--brown);stroke:var(--brown);animation:wishPulse .45s var(--ease-soft);} @keyframes wishPulse{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}} .product-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1;} .product-origin{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dark);font-weight:700;opacity:.7;} .product-body h3{font-size:1.1rem;margin:0;} .product-meta{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px;} .chip{font-size:.68rem;background:var(--bg);color:var(--dark);padding:4px 11px;border-radius:999px;font-weight:600;} .product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;} .price{font-family:var(--font-display);font-weight:700;font-size:1.18rem;} .price small{font-family:var(--font-body);font-weight:500;font-size:.7rem;color:var(--roast-light);} /* ---- Roast scale (signature micro-component, replaces generic star ratings for roast) ---- */ .roast-scale{display:flex;gap:3px;align-items:center;} .roast-scale span{width:6px;height:14px;border-radius:2px;background:var(--line-strong);transition:background .3s var(--ease);} .roast-scale span.on{background:var(--roast);} /* ============================================================ MISC SECTIONS ============================================================ */ .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap;} .section-head .eyebrow{margin-bottom:10px;} .section-head h2{margin:0;max-width:640px;} .section-alt{background:rgba(142,90,60,.08);} .section-dark{background:var(--dark);color:var(--bg);} .section-dark h2,.section-dark h3{color:var(--bg);} .section-dark p{color:rgba(242,225,210,.72);} .origin-map-wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;} .origin-pins{position:relative;border-radius:var(--radius-l);overflow:hidden;aspect-ratio:16/11;box-shadow:var(--shadow-soft);} .origin-pins img{width:100%;height:100%;object-fit:cover;} .origin-pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--tan);border:3px solid var(--bg);cursor:pointer;box-shadow:0 4px 10px rgba(42,26,18,.35);transition:transform .3s;transform:translate(-50%,-50%);} .origin-pin:hover,.origin-pin.active{transform:translate(-50%,-50%) scale(1.4);background:var(--brown2);} .origin-detail{background:var(--tan);border-radius:var(--radius-l);padding:34px;border:1px solid var(--line);} .origin-detail dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-top:18px;font-size:.9rem;} .origin-detail dt{color:var(--crema-deep);font-weight:700;} .origin-detail dd{margin:0;color:var(--roast-light);} .brew-card{background:var(--tan);border:1px solid var(--line);border-radius:var(--radius-m);padding:28px;transition:box-shadow .35s,transform .35s;} .brew-card:hover{box-shadow:var(--shadow-soft);transform:translateY(-4px);} .brew-photo{aspect-ratio:4/3;border-radius:var(--radius-m) var(--radius-m) 0 0;overflow:hidden;margin:-28px -28px 18px;} .brew-photo img{width:100%;height:100%;object-fit:cover;} .brew-icon{width:52px;height:52px;border-radius:50%;background:var(--brown2);display:flex;align-items:center;justify-content:center;margin-bottom:18px;} .brew-icon svg{width:24px;height:24px;stroke:var(--bg);fill:none;stroke-width:1.5;} .brew-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:14px 0;font-size:.8rem;} .brew-specs b{display:block;color:var(--dark);font-weight:700;} .brew-specs span{color:var(--dark);opacity:.72;} .article-card{display:block;} .article-media{aspect-ratio:4/3;border-radius:var(--radius-m);overflow:hidden;margin-bottom:16px;} .article-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);} .article-card:hover .article-media img{transform:scale(1.05);} .article-card span.eyebrow{margin-bottom:8px;} .review-slider{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;} .review-slider::-webkit-scrollbar{height:5px;} .review-slider::-webkit-scrollbar-thumb{background:var(--beige);border-radius:4px;} .review-card{scroll-snap-align:start;min-width:340px;background:var(--tan);border-radius:var(--radius-m);padding:30px;border:1px solid var(--line);} .stars{color:var(--brown);letter-spacing:2px;margin-bottom:12px;} .insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;} .insta-grid a{aspect-ratio:1/1;overflow:hidden;position:relative;display:block;} .insta-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .5s;} .insta-grid a:hover img{transform:scale(1.1);} @media (max-width:900px){.insta-grid{grid-template-columns:repeat(3,1fr);}} .newsletter{background:var(--roast);border-radius:var(--radius-l);padding:64px;display:flex;align-items:center;justify-content:space-between;gap:40px;color:var(--cream);} .newsletter h2{color:var(--white);} .newsletter form{display:flex;gap:10px;min-width:340px;} .newsletter input{flex:1;min-width:0;padding:15px 20px;border-radius:999px;border:1.5px solid rgba(242,225,210,.35);background:transparent;color:var(--white);font-family:inherit;} .newsletter input::placeholder{color:rgba(242,225,210,.6);} @media (max-width:820px){.newsletter{flex-direction:column;text-align:center;padding:44px 28px;}.newsletter form{width:100%;min-width:0;}} /* ============================================================ FOOTER ============================================================ */ .site-footer{ background:linear-gradient(175deg,#6B4128 0%,var(--brown) 30%,#4A2A1B 100%); color:rgba(242,225,210,.78);padding:84px 0 28px;position:relative;overflow:hidden; } .site-footer::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .site-footer::after{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(201,154,116,.55),transparent); } .site-footer .container{position:relative;z-index:1;} .footer-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:36px;padding-bottom:56px;position:relative;} .footer-top::after{ content:"";position:absolute;bottom:0;left:8%;right:8%;height:1px; background:linear-gradient(90deg,transparent,rgba(201,154,116,.4) 20%,rgba(201,154,116,.4) 80%,transparent); } .footer-brand p{color:rgba(242,225,210,.62);max-width:280px;} .footer-col h4{color:var(--bg);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;font-family:var(--font-body);position:relative;padding-bottom:10px;} .footer-col h4::after{content:"";position:absolute;bottom:0;right:0;width:22px;height:2px;background:var(--tan);border-radius:2px;} .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:.9rem;} .footer-col ul a{position:relative;transition:color .3s var(--ease),padding-right .3s var(--ease-soft);} .footer-col ul a::before{content:"›";position:absolute;right:-14px;opacity:0;transition:opacity .3s var(--ease),right .3s var(--ease-soft);color:var(--tan);} .footer-col ul a:hover{color:var(--bg);padding-right:16px;} .footer-col ul a:hover::before{opacity:1;right:0;} .footer-social{display:flex;gap:10px;margin-top:16px;} .footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(242,225,210,.28);display:flex;align-items:center;justify-content:center;transition:background .35s var(--ease),transform .4s var(--ease-soft),border-color .35s var(--ease),box-shadow .35s var(--ease);} .footer-social a:hover{background:var(--tan);border-color:var(--tan);color:var(--dark);transform:translateY(-4px) scale(1.08);box-shadow:0 10px 22px -8px rgba(20,12,7,.5);} .footer-social svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;} .footer-sitemap{display:flex;flex-wrap:wrap;gap:8px 18px;padding:22px 0;border-bottom:1px solid rgba(242,225,210,.12);font-size:.78rem;} .footer-sitemap a{color:rgba(242,225,210,.55);transition:color .3s var(--ease);} .footer-sitemap a:hover{color:var(--tan);} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:.8rem;color:rgba(242,225,210,.5);flex-wrap:wrap;gap:12px;} @media (max-width:980px){.footer-top{grid-template-columns:1fr 1fr;}} @media (max-width:600px){.footer-top{grid-template-columns:1fr;}} /* ============================================================ Reveal-on-scroll ============================================================ */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);} .reveal.in{opacity:1;transform:translateY(0);} .reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);} .reveal-stagger.in > *{opacity:1;transform:translateY(0);} .reveal-stagger.in > *:nth-child(1){transition-delay:.03s;} .reveal-stagger.in > *:nth-child(2){transition-delay:.09s;} .reveal-stagger.in > *:nth-child(3){transition-delay:.15s;} .reveal-stagger.in > *:nth-child(4){transition-delay:.21s;} .reveal-stagger.in > *:nth-child(5){transition-delay:.27s;} .reveal-stagger.in > *:nth-child(6){transition-delay:.33s;} /* ---- Additional reveal variants for motion variety (optional, opt-in classes) ---- */ .reveal-scale{opacity:0;transform:scale(.92);transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft);} .reveal-scale.in{opacity:1;transform:scale(1);} .reveal-left{opacity:0;transform:translateX(-34px);transition:opacity .75s var(--ease-soft),transform .75s var(--ease-soft);} /* Phase 9 responsive fix: at narrow widths the full -34px pre-animation offset pushes content past the viewport edge before the reveal triggers (confirmed directly: -12px past the boundary at 375px on page load). Reduced only the distance, only below 640px — the animation itself (fade + slide, same easing/timing) is unchanged, it just travels a shorter distance on small screens so it never starts off past the edge. */ @media(max-width:640px){.reveal-left{transform:translateX(-16px);}} .reveal-left.in{opacity:1;transform:translateX(0);} .reveal-right{opacity:0;transform:translateX(34px);transition:opacity .75s var(--ease-soft),transform .75s var(--ease-soft);} .reveal-right.in{opacity:1;transform:translateX(0);} .reveal-soft{opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease),transform 1s var(--ease);} .reveal-soft.in{opacity:1;transform:translateY(0);} /* ============================================================ Page hero (interior pages) ============================================================ */ .page-hero{padding:180px 0 70px;background:linear-gradient(180deg,var(--cream) 0%,var(--bg) 100%);} .page-hero .eyebrow{justify-content:flex-start;} .breadcrumb{font-size:.82rem;color:var(--roast-light);margin-bottom:18px;} .breadcrumb a:hover{color:var(--crema-deep);} /* ============================================================ Forms (auth / checkout / contact) ============================================================ */ .auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;} .auth-visual{position:relative;background:linear-gradient(180deg,var(--brown),var(--dark));} .auth-visual img{width:100%;height:100%;object-fit:cover;opacity:.55;position:absolute;inset:0;} .auth-visual-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:60px;color:var(--white);} .auth-form-side{display:flex;align-items:center;justify-content:center;padding:60px 40px;} .auth-box{width:100%;max-width:400px;} .field{margin-bottom:18px;} .field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:7px;color:var(--espresso);} .field input,.field select,.field textarea{ width:100%;padding:13px 16px;border-radius:var(--radius-s);border:1.5px solid var(--line-strong); background:var(--white);font-family:inherit;font-size:.92rem;color:var(--espresso); transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .2s var(--ease-soft); } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brown2);outline:none; box-shadow:0 0 0 4px rgba(142,90,60,.16); } .field input:hover:not(:focus),.field select:hover:not(:focus),.field textarea:hover:not(:focus){border-color:rgba(142,90,60,.5);} input,textarea{transition:border-color .3s var(--ease),box-shadow .3s var(--ease);} input:focus,textarea:focus{outline:none;border-color:var(--brown2);box-shadow:0 0 0 4px rgba(142,90,60,.16);} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .form-foot-link{text-align:center;margin-top:22px;font-size:.88rem;color:var(--roast-light);} /* Phase 3 addition — required for real auth error messages (login/register/ reset failures) where no form-error pattern previously existed. Built entirely from existing tokens (--bg, --line-strong, --dark, --radius-s), matching the visual weight already used for card borders/radius elsewhere (e.g. .pay-method), so no new color is introduced. */ .auth-error{display:none;background:var(--bg);border:1.5px solid var(--line-strong);color:var(--dark);border-radius:var(--radius-s);padding:12px 16px;margin-bottom:18px;font-size:.85rem;font-weight:600;} .auth-error.show{display:block;} /* Phase 3 correction — moved out of inline style="" attributes per review. .hidden / .profile-form-panel / .auth-success are plain, generic show-hide utilities (no new colors, spacing values reused from elsewhere in this file: 18px already appears as a section gap in payment.html; .auth-success's centered/padded layout matches the pre-existing .success-box convention already used in checkout.html). */ .hidden{display:none;} .profile-form-panel{display:none;margin-top:18px;} .profile-form-panel.show{display:block;} .auth-success{display:none;text-align:center;padding:20px 0;} .auth-success.show{display:block;} .auth-success .btn{margin-top:16px;} .addr-card .chip{margin-inline-start:8px;} /* Phase 3 correction, round 2 — moved four more inline styles out of profile.html per review. Values are unchanged from what shipped inline (verified against the delivered zip before this edit) — this is a pure relocation, not a redesign. .checkbox-label matches the exact inline style register.html already uses for its own terms checkbox (left as inline there, per instruction, since it predates Phase 3); .form-actions matches checkout.html's existing button-row pattern; .addr-actions extends profile.html's original two-button `display:flex;gap:8px` row with wrapping, needed because an address card can now show a third (set-default) button. */ .checkbox-label{display:flex;align-items:center;gap:7px;color:var(--roast-light);font-size:.85rem;margin-bottom:22px;} .form-actions{display:flex;gap:10px;} .addr-actions{display:flex;gap:8px;flex-wrap:wrap;} .section-heading-spaced{margin-top:18px;} @media (max-width:900px){.auth-shell{grid-template-columns:1fr;}.auth-visual{display:none;}} .dashboard-shell{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start;} .dash-nav{background:rgba(142,90,60,.09);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px;position:sticky;top:110px;} .dash-nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-s);font-size:.9rem;color:var(--dark);opacity:.72;font-weight:600;} .dash-nav a.active,.dash-nav a:hover{background:var(--tan);color:var(--dark);opacity:1;} .dash-panel{background:rgba(142,90,60,.06);border:1px solid var(--line);border-radius:var(--radius-m);padding:36px;} @media (max-width:860px){.dashboard-shell{grid-template-columns:1fr;}.dash-nav{position:static;}} table.data-table{width:100%;border-collapse:collapse;font-size:.9rem;} table.data-table th{text-align:right;padding:12px 10px;color:var(--dark);opacity:.68;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1.5px solid var(--line-strong);} table.data-table td{padding:16px 10px;border-bottom:1px solid var(--line);color:var(--dark);} .status-pill{padding:5px 12px;border-radius:999px;font-size:.74rem;font-weight:700;} .status-pill.done{background:rgba(142,90,60,.18);color:var(--dark);} .status-pill.progress{background:rgba(201,154,116,.35);color:var(--dark);} .status-pill.cancel{background:rgba(42,26,18,.12);color:var(--dark);opacity:.75;} /* ============================================================ Cart / checkout ============================================================ */ .cart-line{display:grid;grid-template-columns:88px 1fr auto auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);} @media(max-width:480px){ /* Reflows the same four pieces of content (image, name, qty stepper, price) into two rows instead of four side-by-side columns — the qty-control and price columns' natural content width don't leave enough room at this width for all four to share one row without forcing the row wider than the viewport. Nothing about the components themselves changes (same stepper, same price formatting, same image) — only how they're arranged. */ .cart-line{ grid-template-columns:64px 1fr auto; grid-template-rows:auto auto; grid-template-areas:"img name name" "img qty price"; row-gap:10px;gap:10px 14px; } .cart-line > img{grid-area:img;width:64px;height:64px;object-fit:cover;border-radius:var(--radius-s);} .cart-line > div:nth-child(2){grid-area:name;} .cart-line > .qty-control{grid-area:qty;} .cart-line > .price{grid-area:price;justify-self:end;} } .cart-line img{width:88px;height:88px;border-radius:var(--radius-s);object-fit:cover;} .qty-control{display:flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:999px;overflow:hidden;width:fit-content;} .qty-control button{width:32px;height:32px;background:none;border:none;cursor:pointer;font-size:1rem;color:var(--dark);transition:background .25s var(--ease),transform .2s var(--ease-soft);} .qty-control button:hover{background:rgba(142,90,60,.14);} .qty-control button:active{transform:scale(.85);} .qty-control span{width:30px;text-align:center;font-weight:600;display:inline-block;} .qty-control span.qty-bump{animation:qtyBump .32s var(--ease-soft);} @keyframes qtyBump{0%{transform:scale(1);}45%{transform:scale(1.32);color:var(--brown2);}100%{transform:scale(1);}} /* ---- Add-to-cart button success state ---- */ .btn.is-added{background:var(--dark) !important;pointer-events:none;} /* ---- Cart icon badge bump ---- */ .icon-badge.bump{animation:badgeBump .4s cubic-bezier(.34,1.56,.64,1);} @keyframes badgeBump{0%{transform:scale(1);}40%{transform:scale(1.5);}100%{transform:scale(1);}} /* ---- Toast notifications ---- */ .toast-root{position:fixed;top:100px;left:50%;transform:translateX(-50%);z-index:2200;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;} .toast{ display:flex;align-items:center;gap:10px; background:var(--dark);color:var(--bg); padding:13px 22px;border-radius:999px; font-size:.86rem;font-weight:600; box-shadow:var(--shadow-lift); opacity:0;transform:translateY(-16px) scale(.94); transition:opacity .4s var(--ease-soft),transform .4s var(--ease-soft); white-space:nowrap; } .toast.show{opacity:1;transform:translateY(0) scale(1);} .toast-ic{width:18px;height:18px;color:var(--tan);flex:none;display:flex;} .toast-ic svg{width:100%;height:100%;} @media (max-width:480px){.toast{font-size:.8rem;padding:11px 18px;}} .summary-box{background:var(--tan);border:1px solid var(--line);border-radius:var(--radius-m);padding:28px;} .summary-row{display:flex;justify-content:space-between;font-size:.92rem;color:var(--roast-light);padding:9px 0;} .summary-row.total{border-top:1.5px solid var(--line-strong);margin-top:8px;padding-top:16px;font-weight:700;color:var(--espresso);font-size:1.05rem;} .checkout-steps{display:flex;gap:0;margin-bottom:44px;} .checkout-steps div{flex:1;text-align:center;padding-bottom:14px;border-bottom:3px solid var(--line);font-size:.85rem;font-weight:700;color:var(--roast-light);position:relative;} .checkout-steps div.active{color:var(--roast);border-color:var(--roast);} .checkout-steps div.done{color:var(--crema-deep);border-color:var(--crema);} /* ============================================================ Floating chat ============================================================ */ .live-chat{position:fixed;bottom:26px;left:26px;z-index:800;opacity:0;} .live-chat.entrance{animation:fabEntrance .85s cubic-bezier(.34,1.56,.64,1) .9s both;} .live-chat.idle{opacity:1;animation:fabFloat 3.2s ease-in-out infinite;} @keyframes fabEntrance{ 0%{transform:scale(0) translateY(50px);opacity:0;} 55%{transform:scale(1.14) translateY(-8px);opacity:1;} 80%{transform:scale(.96) translateY(2px);opacity:1;} 100%{transform:scale(1) translateY(0);opacity:1;} } @keyframes fabFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}} .chat-fab{ width:60px;height:60px;border-radius:50%;background:var(--roast);color:var(--cream);border:none; display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:var(--shadow-lift);position:relative; transition:transform .3s var(--ease-soft); animation:fabPulseRing 2.8s ease-out 1.8s infinite; } .chat-fab:hover{transform:scale(1.08);} .chat-fab svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.7;position:relative;z-index:1;} @keyframes fabPulseRing{ 0%,55%{box-shadow:var(--shadow-lift),0 0 0 0 rgba(142,90,60,.55);} 75%{box-shadow:var(--shadow-lift),0 0 0 15px rgba(142,90,60,0);} 100%{box-shadow:var(--shadow-lift),0 0 0 0 rgba(142,90,60,0);} } .chat-hint{ position:absolute;bottom:74px;left:0; background:var(--dark);color:var(--bg); padding:9px 16px;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap; box-shadow:var(--shadow-soft);pointer-events:none; opacity:0;transform:translateY(8px); animation:chatHintShow .5s var(--ease-soft) 2.1s forwards, chatHintHide .5s var(--ease) 6.5s forwards; } .chat-hint::after{content:"";position:absolute;bottom:-5px;left:22px;width:10px;height:10px;background:var(--dark);transform:rotate(45deg);} @keyframes chatHintShow{to{opacity:1;transform:translateY(0);}} @keyframes chatHintHide{to{opacity:0;transform:translateY(8px);}} .live-chat.dismissed .chat-hint,.chat-hint.dismissed{animation:chatHintHide .35s var(--ease) forwards;} @media (prefers-reduced-motion:reduce){ .live-chat.entrance{animation:none;opacity:1;} .live-chat.idle{animation:none;} .chat-fab{animation:none;} .chat-hint{animation:chatHintShow .3s ease .6s forwards;} } .chat-panel{position:absolute;bottom:74px;left:0;width:300px;background:var(--tan);border-radius:var(--radius-m);box-shadow:var(--shadow-lift);padding:22px;opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);transform-origin:bottom left;transition:.4s var(--ease);} .chat-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);} /* ---- Cart drawer ---- */ .drawer-overlay{position:fixed;inset:0;background:rgba(42,26,18,.45);z-index:960;opacity:0;visibility:hidden;transition:opacity .4s var(--ease);} .drawer-overlay.open{opacity:1;visibility:visible;} .cart-drawer{position:fixed;top:0;left:0;height:100vh;width:min(420px,92vw);background:var(--bg);z-index:970;transform:translateX(-100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;} .cart-drawer.open{transform:translateX(0);} .drawer-head{display:flex;justify-content:space-between;align-items:center;padding:26px;border-bottom:1px solid var(--line);} .drawer-body{padding:0 26px;overflow-y:auto;flex:1;} .drawer-foot{padding:24px 26px 30px;border-top:1px solid var(--line);} .badge-list{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;} .badge-list span{display:flex;align-items:center;gap:8px;font-size:.8rem;color:rgba(242,225,210,.75);} .badge-list svg{width:16px;height:16px;stroke:var(--crema);fill:none;stroke-width:1.8;} .timeline{position:relative;padding-right:34px;} .timeline::before{content:"";position:absolute;right:6px;top:6px;bottom:6px;width:1.5px;background:var(--line-strong);} .timeline-item{position:relative;margin-bottom:38px;} .timeline-item::before{content:"";position:absolute;right:-34px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--crema);border:3px solid var(--bg);} .timeline-item span{font-size:.78rem;color:var(--crema-deep);font-weight:700;} .faq-item{border-bottom:1px solid var(--line);} .faq-q{display:flex;justify-content:space-between;align-items:center;padding:22px 0;cursor:pointer;font-weight:700;} .faq-q svg{width:18px;height:18px;stroke:var(--roast);fill:none;stroke-width:1.6;transition:transform .35s var(--ease);} .faq-item.open .faq-q svg{transform:rotate(45deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);} .faq-item.open .faq-a{max-height:240px;} .faq-a p{padding-bottom:20px;} /* ============================================================ LEGAL / INFO PAGES — shared bits reused by terms / privacy / shipping / returns / payment / faq ============================================================ */ .legal-hub{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;} .legal-hub-link{padding:10px 20px;border-radius:999px;border:1.5px solid var(--line-strong);font-size:.82rem;font-weight:600;color:var(--roast);transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft);} .legal-hub-link:hover{background:rgba(142,90,60,.08);border-color:var(--roast);transform:translateY(-2px);box-shadow:var(--shadow-xs);} .legal-hub-link.active{background:var(--roast);color:var(--cream);border-color:var(--roast);box-shadow:var(--shadow-xs);} .check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;} .check-list li{display:flex;gap:10px;align-items:flex-start;font-size:.89rem;color:var(--dark);opacity:.86;line-height:1.75;text-align:right;} .check-list li svg{width:17px;height:17px;flex:none;margin-top:3px;stroke:var(--brown2);stroke-width:2.3;fill:none;} .updated-strip{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--roast-light);margin-top:20px;background:rgba(142,90,60,.08);padding:8px 16px;border-radius:999px;} .updated-strip svg{width:15px;height:15px;stroke:var(--crema-deep);stroke-width:1.8;fill:none;flex:none;} .icon-card{ background:linear-gradient(165deg,rgba(242,225,210,.55) 0%,transparent 40%),var(--tan); border-radius:var(--radius-l);border:1px solid var(--line);padding:34px; box-shadow:var(--shadow-xs); transition:box-shadow .5s var(--ease-soft),transform .5s var(--ease-soft); } .icon-card:hover{box-shadow:var(--shadow-glow);transform:translateY(-6px);} .icon-card .benefit-ic{margin-bottom:20px;} .icon-card h3{margin-bottom:14px;} .icon-card > p{font-size:.9rem;} /* .benefit-ic base rule — was previously only defined locally in wholesale.html; promoted here so terms/privacy/shipping/returns/payment can reuse the same icon circle */ .benefit-ic{width:52px;height:52px;border-radius:50%;background:var(--brown2);display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;z-index:1;} .benefit-ic svg{width:24px;height:24px;stroke:var(--bg);fill:none;stroke-width:1.5;} /* .tip-box — was previously only defined locally in brewing-guide.html; promoted here so terms.html and shipping.html can reuse the same callout style */ .tip-box{background:rgba(142,90,60,.12);border:1px solid rgba(142,90,60,.3);border-right:3px solid var(--brown2);border-radius:var(--radius-m);padding:18px 22px;margin-top:16px;font-size:.86rem;} /* ============================================================ LTR (English) overrides — mirror physically-positioned elements that dir="ltr"/flex reflow alone doesn't flip automatically. ============================================================ */ html[dir="ltr"] body{direction:ltr;} html[dir="ltr"] .icon-badge{left:auto;right:2px;} html[dir="ltr"] .hero-stats div{border-right:none;border-left:1.5px solid rgba(242,225,210,.22);padding-right:0;padding-left:22px;} html[dir="ltr"] .hero-stats div:first-child{border-left:none;padding-left:0;} html[dir="ltr"] .product-tag{right:auto;left:14px;} html[dir="ltr"] .product-wish{left:auto;right:12px;} html[dir="ltr"] .footer-col h4::after{right:auto;left:0;} html[dir="ltr"] .footer-col ul a::before{content:"‹";right:auto;left:-14px;} html[dir="ltr"] .footer-col ul a:hover{padding-right:0;padding-left:16px;} html[dir="ltr"] .footer-col ul a:hover::before{right:auto;left:0;} html[dir="ltr"] .timeline{padding-right:0;padding-left:34px;} html[dir="ltr"] .timeline::before{right:auto;left:6px;} html[dir="ltr"] .timeline-item::before{right:auto;left:-34px;} html[dir="ltr"] .tip-box{border-right:1px solid rgba(142,90,60,.3);border-left:3px solid var(--brown2);} html[dir="ltr"] .cart-drawer{left:auto;right:0;transform:translateX(100%);} html[dir="ltr"] .live-chat{left:auto;right:26px;} html[dir="ltr"] .chat-hint,html[dir="ltr"] .chat-panel{left:auto;right:0;transform-origin:bottom right;} @media(max-width:360px){ .chat-panel{width:calc(100vw - 32px);left:16px;} html[dir="ltr"] .chat-panel{left:auto;right:16px;} } html[dir="ltr"] .chat-hint::after{left:auto;right:22px;} /* ============================================================ NORMAL/SMALLER LAPTOP FIT Large laptop/desktop (>1550px) keeps the original spacing. On more common laptop widths (1024–1550px) the vertical rhythm and hero were oversized relative to the viewport, requiring manual browser zoom-out. This trims only that spacing/height so the layout fits naturally — no global scale/zoom, no layout or column changes. ============================================================ */ @media (min-width:901px) and (max-width:1550px){ :root{ --container:1120px; } .section{padding:108px 0;} .hero{padding:112px 0 48px;} .hero-slider{max-height:440px;} .page-hero{padding:132px 0 54px;} } /* ============================================================ PROFILE PAGE — moved out of profile.html's own