/* ═══════════════════════════════════════════════════════════════ Jonooban — shared stylesheet Font stack: Gandom (display) · Vazirmatn (UI, self-hosted) ═══════════════════════════════════════════════════════════════ */ /* ── FONTS ── */ @font-face { font-family: 'Gandom'; src: url('Gandom.woff2') format('woff2'), url('Gandom.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* Vazirmatn v16 — variable font, arabic subset */ @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Vazirmatn-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* Vazirmatn — latin subset */ @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Vazirmatn-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── RESET ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── TOKENS ── */ :root { --cream: #F7EEDF; --cream-dark: #ECE2D3; --cream-light: #FAF5EC; --green: #590C06; --green-deep: #323841; --green-mid: #7D1208; --sage: #84C8CD; --sage-light: #C3DEDF; --gold: #DEB879; --text: #5B4A40; --muted: #8A7060; --border: #E0D4C4; --white: #ffffff; --pad-x: 120px; } /* ── BASE ── */ html { scroll-behavior: smooth; } body { font-family: 'Vazirmatn', Tahoma, sans-serif; background: var(--cream); color: var(--text); direction: rtl; overflow-x: hidden; } .classic { font-family: 'Gandom', 'Vazirmatn', serif; } img { display: block; } /* ── SCROLL REVEAL ── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; transform: none; } .d1 { transition-delay: 0.10s; } .d2 { transition-delay: 0.20s; } .d3 { transition-delay: 0.30s; } .d4 { transition-delay: 0.45s; } /* ══════════════════════════════════════ HEADER ══════════════════════════════════════ */ header { background: rgba(247,238,223,0.72); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); padding: 0 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 110px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200; height: 96px; transition: box-shadow 0.3s; } header.scrolled { box-shadow: 0 2px 28px rgba(89,12,6,0.07); } .logo { display: flex; align-items: center; text-decoration: none; justify-self: start; } .logo-img { height: 66px; width: auto; display: block; } nav { display: flex; } nav ul { display: flex; gap: 48px; list-style: none; } nav a { font-size: 18px; font-weight: 500; color: var(--text); text-decoration: none; transition: color 0.2s; position: relative; padding-bottom: 4px; } nav a::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 1.5px; background: var(--green); transition: width 0.25s; } nav a:hover::after, nav a.active::after { width: 100%; } nav a:hover, nav a.active { color: var(--green); } .header-actions { display: flex; gap: 30px; align-items: center; justify-self: end; } .icon-btn { background: none; border: none; cursor: pointer; color: var(--muted); display: flex; align-items: center; transition: color 0.2s; padding: 6px; } .icon-btn svg { width: 19px; height: 19px; } .icon-btn:hover { color: var(--green); } /* mobile-only catalog shortcut -- desktop already has Products in the nav bar itself, see the mobile media query below for where this actually shows */ .header-products-btn { display: none; } .search-wrap { position: relative; display: flex; align-items: center; } .search-input { width: 0; opacity: 0; padding: 0; border: none; margin: 0; height: 34px; font-family: 'Vazirmatn', sans-serif; font-size: 13px; color: var(--text); background: var(--cream-light); border-radius: 8px; pointer-events: none; transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin 0.25s ease; } .search-wrap.open .search-input { width: 190px; opacity: 1; padding: 0 14px; pointer-events: auto; border: 1px solid var(--border); margin-inline-end: 8px; } .cart-wrap { position: relative; } .cart-badge { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: var(--cream); font-size: 13px; line-height: 1; display: none; align-items: center; justify-content: center; font-weight: 700; } /* Language dropdown */ .lang-wrap { position: relative; margin-inline-start: 34px; } .lang-btn { font-size: 15px; letter-spacing: 2px; color: var(--muted); border: 1px solid var(--border); padding: 11px 22px; font-family: 'Vazirmatn', sans-serif; background: none; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; } .lang-btn:hover { border-color: var(--green); color: var(--green); } .lang-arrow { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s ease; } .lang-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--cream-light); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0,0,0,0.09); max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.25s ease; opacity: 0; z-index: 300; } .lang-dropdown.open { max-height: 180px; opacity: 1; } .lang-option { display: block; width: 100%; padding: 11px 16px; font-size: 13px; text-align: right; background: none; border: none; cursor: pointer; color: var(--text); text-decoration: none; font-family: 'Vazirmatn', sans-serif; transition: background 0.15s, color 0.15s; } .lang-option:hover { background: var(--cream-dark); color: var(--green); } .lang-option.active { color: var(--green); font-weight: 500; } html[dir="ltr"] .lang-option { text-align: left; } .nav-lang-item { display: none; } /* Products nav hover dropdown */ .nav-has-dropdown { position: relative; } .nav-has-dropdown > a { display: inline-flex; align-items: center; gap: 3px; } .nav-arrow { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s ease; } .nav-has-dropdown:hover .nav-arrow, .nav-has-dropdown:focus-within .nav-arrow { transform: rotate(180deg); } .nav-dropdown { display: block; position: absolute; top: 100%; right: 0; min-width: 190px; background: var(--cream-light); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0,0,0,0.09); list-style: none; padding: 6px 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 300; } .nav-has-dropdown:hover .nav-dropdown, .nav-has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown li { list-style: none; } .nav-dropdown a { display: block; padding: 10px 18px; font-size: 14px; font-weight: 400; white-space: nowrap; color: var(--text); } .nav-dropdown a::after { display: none; } .nav-dropdown a:hover { background: var(--cream-dark); color: var(--green); } html[dir="ltr"] .nav-dropdown { right: auto; left: 0; } /* Hamburger (mobile) */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; transition: color 0.2s; } .nav-toggle:hover { color: var(--green); } .nav-toggle svg { width: 24px; height: 24px; } /* ══════════════════════════════════════ BUTTONS (shared) ══════════════════════════════════════ */ .btn-primary { padding: 16px 36px; background: var(--green); color: var(--cream); font-size: 13px; font-family: 'Vazirmatn', sans-serif; font-weight: 500; letter-spacing: 1px; border: 2px solid var(--green); cursor: pointer; transition: background 0.25s, border-color 0.25s; text-decoration: none; display: inline-block; } .btn-primary:hover { background: var(--green-deep); border-color: var(--green-deep); } .btn-secondary { padding: 16px 36px; background: transparent; color: var(--green); font-size: 13px; font-family: 'Vazirmatn', sans-serif; letter-spacing: 1px; border: 2px solid var(--green); cursor: pointer; transition: background 0.25s, color 0.25s; text-decoration: none; display: inline-block; } .btn-secondary:hover { background: var(--green); color: var(--cream); } .btn-ghost-light { display: inline-block; padding: 14px 32px; background: transparent; color: var(--cream); font-size: 12px; font-family: 'Vazirmatn', sans-serif; letter-spacing: 2px; border: 1.5px solid rgba(240,235,224,0.4); cursor: pointer; transition: all 0.25s; text-decoration: none; } .btn-ghost-light:hover { border-color: var(--cream); background: rgba(240,235,224,0.08); } /* ══════════════════════════════════════ FOOTER ══════════════════════════════════════ */ footer { background: var(--cream); padding: 72px var(--pad-x) 32px; border-top: 1px solid var(--border); } .footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 52px; margin-bottom: 52px; } .footer-logo-name { margin-bottom: 14px; display: block; } .footer-logo-name img, .footer-logo img { height: 44px; width: auto; } .social-row, .social-icons { display: flex; gap: 12px; margin-top: 18px; } .soc, .social-icon { width: 44px; height: 44px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--green); text-decoration: none; transition: all 0.22s; } .soc svg { width: 22px; height: 22px; } .soc:hover, .social-icon:hover { background: var(--green); color: var(--cream); border-color: var(--green); } .footer-col h4, .footer-col h5 { font-size: 10px; letter-spacing: 3px; color: var(--muted); margin-bottom: 20px; font-weight: 500; } .footer-col ul { list-style: none; } .footer-col ul li { font-size: 13px; color: var(--muted); margin-bottom: 12px; } .footer-col ul li a { color: var(--muted); text-decoration: none; transition: color 0.2s; } .footer-col ul li a:hover { color: var(--green); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; } /* ══════════════════════════════════════ WHY DATES (infographic, injected by why-dates.js) ══════════════════════════════════════ */ .why-dates-section { padding: 64px var(--pad-x); text-align: center; background: #c2e5fb; } .why-dates-wrap { width: 100%; max-width: 1000px; margin: 0 auto; direction: ltr; aspect-ratio: 1536 / 1024; container-type: inline-size; overflow: hidden; border-radius: 12px; } .why-dates-canvas { position: relative; width: 1536px; height: 1024px; background: #c2e5fb; font-family: 'Vazirmatn', sans-serif; direction: ltr; transform: scale(calc(100cqi / 1536px)); transform-origin: top left; } .why-dates-section .btn-ghost-light { display: inline-block; margin: 40px 0 0; color: var(--green); border-color: var(--green); } .why-dates-section .btn-ghost-light:hover { background: var(--green); color: var(--cream); } /* ══════════════════════════════════════ MOBILE RESPONSIVE ══════════════════════════════════════ */ @media (max-width: 1300px) { header { column-gap: 28px; } } @media (max-width: 1100px) { :root { --pad-x: 64px; } nav ul { gap: 28px; } header { column-gap: 16px; } .hero-title { font-size: 60px; } .hero-italic { font-size: 52px; } } @media (max-width: 1000px) { :root { --pad-x: 32px; } /* Mobile bottom tab bar replaces needing the hamburger for the primary destinations -- shown from here down. floating-contact is left at its own base/540px-tier position (not bumped to clear it) -- the tab bar's items are centered with room to spare now (3 items, not 5), so the corner where WhatsApp already sits is clear, and its own higher z-index (300 vs the bar's 260) lets it sit visibly right at that corner on top of the glass pill's empty left edge, instead of floating above it. */ .mobile-tabbar { display: flex !important; } /* Header — collapse nav */ header { height: 72px !important; display: flex !important; justify-content: space-between !important; column-gap: 12px !important; padding: 0 20px !important; } /* .filter-bar's own `top` (productTemplates.js) is hardcoded to the DESKTOP header's 96px -- unchanged here, it leaves an empty gap under the shorter mobile header equal to the difference (96 minus whatever height wins below) once you scroll far enough for both stickies to engage. */ .filter-bar { top: 72px !important; } nav { display: none; position: fixed; top: 72px; right: 0; bottom: 0; left: 0; height: calc(100vh - 72px); z-index: 199; overflow-y: auto; } nav.open { display: flex; flex-direction: column; background: var(--cream-light); border-top: 1px solid var(--border); padding: 24px 32px; gap: 0; } nav.open ul { flex-direction: column; gap: 0; } nav a { display: block; padding: 16px 0; font-size: 18px; border-bottom: 1px solid var(--border); } nav a::after { display: none; } /* Products/Language sub-dropdowns: desktop reveals .nav-dropdown on :hover, which never fires on touch -- on mobile it's an explicit is-open toggle instead (see layout.js), and shown inline/indented rather than desktop's floating absolute box, since it needs to sit in normal flow inside the vertical mobile menu. */ .nav-has-dropdown > a, .nav-has-dropdown > button.nav-lang-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--border); padding: 16px 0; font-size: 18px; font-family: 'Vazirmatn', sans-serif; color: var(--text); cursor: pointer; text-align: inherit; } .nav-dropdown { display: none; position: static; list-style: none; opacity: 1; visibility: visible; transform: none; background: none; border: none; box-shadow: none; padding: 0; margin: 0; } .nav-has-dropdown.is-open > .nav-dropdown { display: block; } .nav-has-dropdown.is-open .nav-arrow { transform: rotate(180deg); } .nav-dropdown a { display: block; padding: 12px 0 12px 20px; font-size: 15px; color: var(--muted); border-bottom: 1px solid var(--border); } .nav-toggle { display: flex; } .lang-wrap { display: none; } .nav-lang-item { display: block; } /* Globe icon's size comes from SVG_GLOBE's own width/height attributes (layout.js), shared unchanged between desktop and mobile -- 15px reads fine next to desktop's small text-only trigger, but on mobile it sits beside the 19px nav-arrow chevron as one of two peer icons on the same row, where it visibly loses the comparison. Only sized up here, not in the shared constant, so desktop is untouched; a CSS rule beats the SVG's own presentation attributes on specificity, no !important needed. */ .nav-has-dropdown > button.nav-lang-toggle > svg { width: 22px; height: 22px; } /* The bottom tab bar now covers Shop/Cart/Account -- these header-actions icons are redundant on mobile, just logo + hamburger stays. header-products-btn is left at its base display:none (no override here anymore) rather than shown and then re-hidden. */ .search-wrap, .header-account-btn, .cart-wrap { display: none !important; } .logo-img { height: 40px !important; } /* "Date Products" duplicates the parent Products link/label right above it in this same dropdown -- confusing on mobile where the whole submenu is only one thumb-scroll away from itself; desktop keeps it since it sits further from its own parent link there. */ .nav-cat-products { display: none !important; } /* Hero */ .hero { grid-template-columns: 1fr !important; min-height: auto !important; } .hero-visual { min-height: 300px !important; } .hero-text { padding: 48px 32px !important; } .hero-title { font-size: 48px !important; } .hero-italic { font-size: 38px !important; white-space: normal !important; } .float-card { display: none !important; } /* Contact */ .contact-section { grid-template-columns: 1fr !important; height: auto !important; min-height: auto !important; } .contact-visual { min-height: 300px !important; } .contact-text { padding: 48px 32px !important; } /* Products grid */ .products-section { padding: 56px 32px !important; } .products-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Footer */ .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } /* Brand def */ .brand-def { padding: 64px 32px !important; } .brand-def h2 { font-size: 22px !important; } /* Standards */ .standards { padding: 56px 32px !important; } .cert-logos { gap: 32px !important; } /* Testimonials */ .testimonial { padding: 64px 0 72px !important; } .coverflow { height: 190px !important; } .cf-card { width: 150px !important; height: 150px !important; } /* Products page */ .filter-bar { padding: 0 32px !important; overflow-x: auto !important; } .cat-section { padding: 48px 32px 36px !important; } /* Product detail */ .product-main { grid-template-columns: 1fr !important; } .info-side { border-right: none !important; border-left: none !important; border-top: 1px solid var(--border) !important; padding: 40px 32px !important; } .image-side { padding: 32px 32px 0 !important; } /* This whole cluster (label/name/tagline/price/stock badge) sits right where the fixed floating-contact button (bottom:16px/left:16px, 50px wide, physical left regardless of language) lands on a typical product photo's height, so on page load -- no scroll needed -- the button visibly covered whichever of these happened to fall in its footprint (the title's first letter on one product, the stock badge on another). Since it's the SAME zone for every product (image height barely varies), clearing the whole cluster once covers all of them instead of chasing it product by product. margin-left on the flex/inline elements, text-indent on the block ones so a wrapped second line of a long product name doesn't carry the same indent unnecessarily. */ .product-label { margin-left: 66px !important; } .product-name { font-size: 28px !important; line-height: 1.3 !important; text-indent: 66px !important; } .product-sub { text-indent: 66px !important; } .price-row { margin-left: 66px !important; } .price-main { font-size: 26px !important; } .stock-badge { margin-left: 66px !important; } .product-tabs { padding: 0 32px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .tab-btn { padding: 16px 18px !important; font-size: 13px !important; white-space: nowrap !important; } .thumb { width: 64px !important; height: 64px !important; } .desc-inner { grid-template-columns: 1fr !important; padding: 40px 32px !important; } .desc-aside { display: none !important; } .nutrition-inner { grid-template-columns: 1fr !important; padding: 40px 32px !important; gap: 40px !important; } .reviews-inner { padding: 40px 32px !important; } .related-section { padding: 40px 32px !important; } .related-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 540px) { :root { --pad-x: 16px; } header { height: 64px !important; padding: 0 12px !important; column-gap: 8px !important; } .filter-bar { top: 64px !important; } .header-actions { gap: 8px !important; } .icon-btn { padding: 4px !important; } .search-wrap.open .search-input { width: 120px !important; } nav { top: 64px; height: calc(100vh - 64px); } .logo-img { height: 36px !important; } .hero-title { font-size: 38px !important; } .hero-italic { font-size: 30px !important; } .hero-text { padding: 36px 16px !important; } .products-grid { grid-template-columns: 1fr !important; } .section-title { font-size: 28px !important; } /* 2-up instead of a single stacked column -- 4 full-width blocks (logo, Shop, Company, Get in Touch) each with a heading made the phone footer scroll on far longer than the content needed; logo and Get in Touch (the two with the least list items) span both columns, Shop/Company sit side by side, so it's 3 short rows instead of 4 tall ones. Everything below (logo/social size, type scale, spacing) is also shrunk from the desktop-authored values -- unscaled, the same footer that reads as a normal-weight closing block on a 1400px screen comes out oversized and heavy on a 390px one. */ footer { padding: 32px 16px 16px !important; } .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; margin-bottom: 20px !important; } .footer-grid > div:first-child, .footer-grid > .footer-col:last-of-type { grid-column: 1 / -1 !important; } .footer-logo-name img, .footer-logo img { height: 32px !important; } .footer-logo-name { margin-bottom: 8px !important; } .social-row, .social-icons { gap: 8px !important; margin-top: 8px !important; } .soc, .social-icon { width: 34px !important; height: 34px !important; } .soc svg { width: 16px !important; height: 16px !important; } .footer-col h5 { font-size: 9px !important; letter-spacing: 2px !important; margin-bottom: 8px !important; } .footer-col ul li { font-size: 12px !important; margin-bottom: 6px !important; } /* Stacked and centered instead of flush left/right (justify-content:space-between) -- that used to put whichever span (legal links on fa/ar, copyright on en) landed on the left directly behind the floating-contact button's own visible icon (bottom:16px/ left:16px, 50px wide) at the page's natural bottom-scroll rest position. Centering both lines keeps them clear of that corner without a manual padding offset. */ .footer-bottom { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 6px !important; padding-top: 16px !important; font-size: 10px !important; } .trust-strip { grid-template-columns: 1fr 1fr !important; } .related-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Button bumped to 60px (was 50px) to match the tab bar's own 60px height -- the two now read as a matched pair sitting at the same size/vertical baseline. Container width/height and every stack offset below are recalculated from that same formula the desktop rule below already follows (closed-offset = button+4, hover-step = button+12, container height = 4*button + 36) -- not just bumped by eye. */ .floating-contact { width: 60px !important; height: 276px !important; bottom: 16px !important; left: 16px !important; } .floating-contact .fc-btn { width: 60px !important; height: 60px !important; border-radius: 18px !important; } .floating-contact .fc-close { transform: translateY(-64px) !important; } /* NOT .force-closed here -- that variant needs to win against the base (desktop) force- closed rule below, which also carries !important (needed there to beat the hover reveal); two equally-specific !important rules resolve by SOURCE ORDER, and this media block sits ahead of that base rule in the file, so it would lose the tie. See the force-closed override placed right after that base rule instead. */ .floating-contact:hover .fc-phone, .floating-contact:focus-within .fc-phone, .floating-contact.is-open .fc-phone { transform: translateY(-72px) !important; } .floating-contact:hover .fc-email, .floating-contact:focus-within .fc-email, .floating-contact.is-open .fc-email { transform: translateY(-144px) !important; } .floating-contact:hover .fc-close, .floating-contact:focus-within .fc-close, .floating-contact.is-open .fc-close { transform: translateY(-216px) !important; } } /* ── FLOATING CONTACT STACK (WhatsApp trigger; hover reveals phone + email stacked upward) -- same bordered-icon look as the footer's .soc row, not a solid WhatsApp-brand-green circle. ── */ /* pointer-events:none on the container -- it's a plain positioned box, and without this its own (invisible) height:198px footprint swallowed taps meant for whatever's underneath (e.g. products.html's bottom-left product card sits exactly here on load; its own "view details" button was completely untappable, elementFromPoint returned this div instead). Only the trigger/phone/email .fc-btn's themselves re-enable pointer-events, each exactly where it's actually rendered. Height covers the full expanded stack (4 buttons + 3 gaps: trigger, phone, email, close), not just the trigger's own 58px. */ .floating-contact { position: fixed; bottom: 28px; left: 28px; z-index: 300; width: 58px; height: 268px; pointer-events: none; } .floating-contact .fc-btn { position: absolute; bottom: 0; left: 0; width: 58px; height: 58px; border-radius: 16px; border: 1px solid var(--border); background: rgba(247,238,223,0.72); color: var(--green); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 8px 24px rgba(20,10,6,0.18); cursor: pointer; font: inherit; transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; pointer-events: auto; } /* Explicit stacking order, topmost first -- all 4 buttons share the same base (bottom:0; left:0) rect and only move apart via transform on reveal; without this, DOM order alone decided who's on top AT that shared rect (fc-trigger, last in the markup, painted over fc-close/email/phone), so a tap landing before/during the reveal transition could hit the WhatsApp link instead of the button the user actually meant, most visibly close never seeming to respond. */ .floating-contact .fc-close { z-index: 4; } .floating-contact .fc-email { z-index: 3; } .floating-contact .fc-phone { z-index: 2; } .floating-contact .fc-trigger { z-index: 1; } .floating-contact .fc-btn:hover { background: var(--green); color: var(--cream); border-color: var(--green); } .floating-contact .fc-trigger:hover { transform: scale(1.06); } .floating-contact .fc-extra { opacity: 0; transform: translateY(0) scale(0.85); pointer-events: none; } .floating-contact:hover .fc-extra, .floating-contact:focus-within .fc-extra, .floating-contact.is-open .fc-extra { opacity: 1; pointer-events: auto; } /* Overrides the reveal above even while still genuinely :hover'd -- see layout.js's fc-close click handler for why this needs its own !important rule rather than just toggling is-open (which the hover rule would otherwise still win against). */ .floating-contact.force-closed .fc-extra { opacity: 0 !important; pointer-events: none !important; } .floating-contact:hover .fc-phone, .floating-contact:focus-within .fc-phone, .floating-contact.is-open .fc-phone { transform: translateY(-70px); } .floating-contact:hover .fc-email, .floating-contact:focus-within .fc-email, .floating-contact.is-open .fc-email { transform: translateY(-140px); } /* fc-close is NOT .fc-extra (see layout.js) -- it has to stay visible and tappable before the stack ever opens, since it's the widget's only expand/collapse affordance now (a second, mobile-only arrow badge used to cover for this one vanishing on close -- removed, one arrow that just moves instead). Its default/closed position is the same slot fc-phone uses when open (nothing else occupies that spot while closed); opening slides it up to the top of the stack same as before. force-closed needs its own !important here for the same reason as fc-extra above -- overriding the hover reveal while genuinely still hovered, which toggling is-open alone can't do. The chevron rotates to say which way it acts: pointing up (default) means "expand upward", rotated to point down (open) means "collapse". Plain icon, no boxed backdrop like the other 3 buttons -- explicitly requested; drop-shadow keeps it legible over whatever photo/canvas happens to be behind it instead. */ .floating-contact .fc-close { /* -62px = 58px button + 4px gap, snug above WhatsApp (was -70px/12px gap -- read as sitting noticeably further away than the icon-size bump above deserved). */ transform: translateY(-62px); background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .floating-contact .fc-close:hover { background: none; color: var(--gold); border-color: transparent; } .floating-contact.force-closed .fc-close { transform: translateY(-62px) !important; } .floating-contact:hover .fc-close, .floating-contact:focus-within .fc-close, .floating-contact.is-open .fc-close { transform: translateY(-210px); } .floating-contact .fc-close svg { filter: drop-shadow(0 2px 4px rgba(20,10,6,0.35)); transition: transform 0.2s ease; transform: rotate(180deg); } .floating-contact:hover .fc-close svg, .floating-contact:focus-within .fc-close svg, .floating-contact.is-open .fc-close svg { transform: rotate(0deg); } /* Same !important-vs-still-hovered override the position rule above needs -- without it the arrow would keep pointing down (open) right after clicking Close while the mouse is still sitting on the widget, since plain :hover still matches. */ .floating-contact.force-closed .fc-close svg { transform: rotate(180deg) !important; } /* Placed here, after the base force-closed rule above, specifically to WIN the source-order tiebreak against it at narrow widths -- see the comment on the equivalent (deliberately absent) rule in the max-width:540px block earlier in this file. */ @media (max-width: 540px) { .floating-contact.force-closed .fc-close { transform: translateY(-64px) !important; } } /* ── MOBILE TAB BAR (glassy bottom nav; injected by layout.js, hidden until the same max-width:1000px breakpoint the header's own hamburger collapses at below). Same glass recipe as .floating-contact's own .fc-btn, for visual consistency. ── */ .mobile-tabbar { /* top:auto overrides the generic `nav{top:72px}` mobile rule above (bare-tag selector, matches this being a