/* Theme Name: Celasta Theme URI: https://staging.celasta.in Author: Celasta Description: Luxury fashion brand - Touch of an Elegance Version: 1.9.9 Requires at least: 6.0 Requires PHP: 8.0 License: Private Text Domain: celasta Tags: woocommerce, luxury, fashion, ecommerce */ /* Force-hide announcement bar (permanently disabled) */ #announcement-bar,.announcement-bar{display:none!important;} body.has-announcement #site-header{top:0!important;} :root { --c-bg: #FAF8F4; --c-surface: #F3EFE7; --c-border: #DDD5C4; --c-text: #2C2520; --c-muted: #7A6E63; --c-gold: #B89A6A; --c-gold-light:#D4BC90; /* Same hue as --c-gold, darkened for text use: the base gold is only ~2.6:1 against white/bg (fails WCAG AA's 4.5:1 for text), which matters because .section-label uses it at 0.7rem across nearly every section on the site. This variant hits ~5.2-5.5:1 while staying recognizably the same gold. --c-gold itself is untouched and still used for buttons, borders, and decorative accents where it isn't carrying text. */ --c-gold-text: #7F653C; --c-charcoal: #3A332D; --c-white: #FFFFFF; --c-green: #4A5E45; --font-display:'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', sans-serif; --transition: 0.4s cubic-bezier(0.25,0.46,0.45,0.94); --transition-slow: 0.7s cubic-bezier(0.25,0.46,0.45,0.94); --radius-sm: 2px; --radius-md: 6px; /* Golden ratio, portrait (width : height = 1 : 1.618). Declared once and reused by every tile and card in the theme - homepage sections, the product grid, collections, wishlist, related and recently-viewed - so the proportion is a single value to change, not a number copied into a dozen rules that then drift apart. Deliberately NOT applied to the square gallery or the 16/9 video embed: those are formats, not cards. */ --ratio-tile: 1 / 1.618; /* Was clamp(60px,8vw,120px) = 230px of padding on every section at desktop. The five homepage sections each ran well over a screen tall largely on that. */ --space-section: clamp(44px,5.2vw,76px); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} /* Headings that must exist for the document outline and for search engines but that the design has no place to show. CLIPPED, never display:none: hidden text is dropped from the accessibility tree and ignored by Google, which would make the heading pointless. Used by the shop archive and by the Customize hero while its heading setting is empty. */ .celasta-sr-h1{position:absolute;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;} html{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;} html::-webkit-scrollbar{display:none;} body{background:var(--c-bg);color:var(--c-text);font-family:var(--font-body);font-weight:300;line-height:1.7;overflow-x:hidden;width:100%;} /* Non-home pages need padding for fixed 2-row header (~108px) */ body:not(.home):not(.woocommerce-checkout):not(.woocommerce-cart){padding-top:var(--header-height,108px);} .woocommerce-checkout .woocommerce-page-wrapper, /* The cart is excluded from the body header offset above, so it needs its own. This used to target .woocommerce-page-wrapper — an element the cart page does not render — so the rule never applied and the cart content slid underneath the fixed header. */ .woocommerce-cart .woocommerce{padding-top:calc(var(--header-height,108px) + 20px);} /* ============================================================ ACCESSIBILITY — skip link, focus states, reduced motion (Production Optimization phase) ============================================================ */ .skip-link{ position:absolute;top:-100px;left:16px;z-index:10000; background:var(--c-charcoal);color:#fff;padding:12px 20px; font-size:0.8rem;letter-spacing:0.05em;text-decoration:none; transition:top 0.2s ease; } .skip-link:focus{top:16px;} /* Visible keyboard focus ring everywhere — mouse/touch clicks don't trigger :focus-visible in modern browsers, so this doesn't add visual noise for pointer users, only keyboard/AT users. */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--c-gold);outline-offset:2px; } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:0.01ms!important;animation-iteration-count:1!important; transition-duration:0.01ms!important;scroll-behavior:auto!important; } } /* ============================================================ LAZY BACKGROUND IMAGES (pairs with celasta_bg_attrs() + the IntersectionObserver in main.js) ============================================================ */ .lazy-bg{background-color:var(--c-surface);} .lazy-bg:not(.lazy-bg-loaded){background-image:none!important;} .lazy-bg-loaded{animation:celasta-fade-in 0.4s ease;} @keyframes celasta-fade-in{from{opacity:0;}to{opacity:1;}} img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;} button{cursor:pointer;border:none;background:none;font-family:inherit;} h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:400;line-height:1.2;color:var(--c-charcoal);letter-spacing:0.02em;} h1{font-size:clamp(2.5rem,5vw,5rem);} h2{font-size:clamp(2rem,3.5vw,3.5rem);} h3{font-size:clamp(1.4rem,2.5vw,2.2rem);} .section-label{font-family:var(--font-body);font-size:0.7rem;font-weight:500;letter-spacing:0.25em;text-transform:uppercase;color:var(--c-gold-text);margin-bottom:16px;display:block;} .container{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,60px);} .section{padding:var(--space-section) 0;} /* BUTTONS */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 36px;font-family:var(--font-body);font-size:0.75rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;transition:var(--transition);border-radius:var(--radius-sm);position:relative;overflow:hidden;} .btn::before{content:'';position:absolute;inset:0;background:var(--c-gold);transform:translateX(-101%);transition:var(--transition);z-index:0;} .btn span,.btn i{position:relative;z-index:1;} .btn:hover::before{transform:translateX(0);} .btn-primary{background:var(--c-charcoal);color:var(--c-white);border:1px solid var(--c-charcoal);} .btn-primary:hover{color:var(--c-white);border-color:var(--c-gold);} .btn-outline{background:transparent;color:var(--c-charcoal);border:1px solid var(--c-charcoal);} .btn-outline:hover{color:var(--c-white);border-color:var(--c-gold);} .btn-light{background:transparent;color:var(--c-white);border:1px solid rgba(255,255,255,0.6);} .btn-light::before{background:var(--c-white);} .btn-light:hover{color:var(--c-charcoal);} /* PAGE LOADER */ #page-loader{position:fixed;inset:0;background:var(--c-charcoal);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:opacity 0.6s ease,visibility 0.6s ease;} #page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none;} /* The same overlay is raised again on the way OUT of a page - see the PAGE LOADER block in assets/js/main.js. The 0.6s above is an arrival fade-OUT; reusing it on the way out would leave most of a second where the old page is still readable and nothing says the site is working. The exit state comes up quickly instead. */ #page-loader.is-leaving{transition:opacity .18s ease,visibility 0s;} .loader-logo{font-family:var(--font-display);font-size:2.5rem;color:var(--c-white);letter-spacing:0.3em;animation:pulse 2s ease infinite;} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}} .loader-line{width:60px;height:1px;background:rgba(255,255,255,0.2);position:relative;overflow:hidden;} .loader-line::after{content:'';position:absolute;left:-100%;top:0;width:100%;height:100%;background:var(--c-gold);animation:loadLine 1.5s ease infinite;} @keyframes loadLine{0%{left:-100%;}100%{left:100%;}} /* ═══════════════════════════════════════════════════════════ HEADER — 2 rows, NO hamburger, nav always visible Row 1: CELASTA centred Row 2: [nav links LEFT] ........... [icons RIGHT] ═══════════════════════════════════════════════════════════ */ /* ─── HEADER ─────────────────────────────────────────────────────── Structure: Row 1 → CELASTA centred Row 2 → [Home Collections▾ Inspirations Customize Our Story] [🔍 ♡ 🛍 👤] ← nav LEFT ─────────────────────────────── icons RIGHT → No hamburger at any screen size. ─────────────────────────────────────────────────────────────────── */ #announcement-bar,.announcement-bar{display:none!important;height:0!important;overflow:hidden!important;} body.has-announcement #site-header{top:0!important;} #site-header{ position:fixed;top:0;left:0;right:0;z-index:1000; transition:background 0.4s ease,box-shadow 0.4s ease; } #site-header.transparent{background:transparent;} #site-header.sticky{ background:rgba(250,248,244,0.97); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 2px 20px rgba(44,37,32,0.07); border-bottom:1px solid var(--c-border); } /* Row 1 — CELASTA centred */ .hdr-row1{ display:flex; justify-content:center; align-items:center; padding:12px 0 5px; } .site-logo{ font-family:var(--font-display); font-size:1.55rem;font-weight:500;letter-spacing:0.22em; color:var(--c-charcoal);transition:color 0.4s; } .header-transparent .site-logo{color:#fff;} .sticky .site-logo{color:var(--c-charcoal);} .site-logo-img{height:36px;width:auto;display:block;} .mobile-menu-logo-img{height:28px;width:auto;display:block;} /* Row 2 — nav + icons on ONE LINE */ .hdr-row2{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; padding:5px 0 10px; border-top:1px solid rgba(255,255,255,0.15); } .sticky .hdr-row2{border-top-color:var(--c-border);} /* Nav links — left */ .hdr-nav{ display:flex;align-items:center; gap:clamp(12px,2.2vw,28px); flex-wrap:nowrap; } .hdr-nav>a, .hdr-dd>a{ font-size:clamp(0.55rem,0.9vw,0.7rem); font-weight:500; letter-spacing:clamp(0.08em,0.12vw,0.17em); text-transform:uppercase; color:var(--c-charcoal); position:relative; transition:color 0.25s; white-space:nowrap; } .header-transparent .hdr-nav>a, .header-transparent .hdr-dd>a{color:rgba(255,255,255,0.9);} .sticky .hdr-nav>a, .sticky .hdr-dd>a{color:var(--c-charcoal);} .hdr-nav>a::after, .hdr-dd>a::after{ content:'';position:absolute;bottom:-3px;left:0; width:0;height:1px;background:var(--c-gold);transition:width 0.25s; } .hdr-nav>a:hover::after, .hdr-dd>a:hover::after{width:100%;} .hdr-nav>a:hover, .hdr-dd>a:hover{color:var(--c-gold);} /* Collections dropdown */ .hdr-dd{position:relative;} .hdr-dd-menu{ position:absolute;top:calc(100% + 10px);left:50%; transform:translateX(-50%) translateY(6px); background:#fff;border:1px solid var(--c-border); border-top:2px solid var(--c-gold); min-width:140px; opacity:0;visibility:hidden; transition:var(--transition); box-shadow:0 12px 36px rgba(44,37,32,0.11); z-index:1001; } .hdr-dd:hover .hdr-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} .hdr-dd-menu a{ display:block;padding:9px 16px; font-size:0.68rem;letter-spacing:0.1em; color:var(--c-text)!important; border-bottom:1px solid var(--c-border); transition:var(--transition); } .hdr-dd-menu a:last-child{border-bottom:none;} .hdr-dd-menu a:hover{background:var(--c-surface);color:var(--c-gold)!important;padding-left:24px;} /* Icons — right */ .hdr-icons{ display:flex;align-items:center; gap:clamp(8px,1.4vw,16px); flex-shrink:0; } .hdr-btn{ position:relative; width:28px;height:28px; display:flex;align-items:center;justify-content:center; color:var(--c-charcoal);font-size:clamp(0.8rem,1.2vw,0.95rem); transition:color 0.25s,transform 0.2s; background:none;border:none;cursor:pointer; } .header-transparent .hdr-btn{color:rgba(255,255,255,0.9);} .sticky .hdr-btn{color:var(--c-charcoal);} .hdr-btn:hover{color:var(--c-gold);transform:translateY(-2px);} /* The count used to sit at top:0;right:0 - directly over the bag, so the icon read as a smudge behind a number. Lifted clear of the glyph and given a ring in the header colour so it separates cleanly. .hdr-btn is position:relative with no overflow clipping, so negative offsets are safe. */ .cart-dot{ position:absolute;top:-6px;right:-7px; min-width:16px;height:16px;padding:0 4px; background:var(--c-gold);color:#fff; font-size:0.56rem;font-weight:700;line-height:1; border-radius:9px;border:2px solid var(--c-bg,#FAF8F4); display:flex;align-items:center;justify-content:center; pointer-events:none; } .header-transparent:not(.sticky) .cart-dot{border-color:transparent;} .cart-dot.is-empty{display:none;} /* ── SEARCH — top-anchored glassmorphism panel ────────────────── Opens as a frosted-glass sheet that slides DOWN from the top of the viewport (previously a centred modal, which felt like an interruptive dialog). The dim backdrop below it stays click-to- close. Fully responsive: the panel is full-width on phones and a centred max-width sheet on larger screens. */ /* Compact, centred premium search modal. Backdrop dims + blurs the page; the panel is a small frosted sheet — a centred card on desktop/laptop, top-anchored on phones — never a full-screen takeover. */ .search-overlay{ position:fixed;inset:0; z-index:1100; background:rgba(28,24,20,0.34); backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px); display:flex;flex-direction:column; align-items:center;justify-content:flex-start; padding:12vh 20px 20px; opacity:0;visibility:hidden; transition:opacity 0.3s ease,visibility 0.3s; } .search-overlay.open{opacity:1;visibility:visible;} .srch-inner{ width:100%;max-width:600px; background:rgba(250,248,244,0.94); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); border:1px solid rgba(221,213,196,0.7); border-top:3px solid var(--c-gold); border-radius:16px; box-shadow:0 40px 90px -30px rgba(44,37,32,0.55), 0 2px 10px rgba(44,37,32,0.08); padding:18px 18px 4px; transform:translateY(-16px) scale(0.98); opacity:0; transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),opacity 0.3s ease; will-change:transform,opacity; overflow:hidden; } .search-overlay.open .srch-inner{transform:translateY(0) scale(1);opacity:1;} @media(prefers-reduced-motion:reduce){ .srch-inner{transition:opacity 0.2s ease;transform:none;} } .srch-form{width:100%;} .srch-field-wrap{ display:flex;align-items:center;gap:13px; background:rgba(255,255,255,0.75); border:1px solid var(--c-border); border-radius:12px; padding:0 15px;height:58px; transition:border-color 0.2s,box-shadow 0.2s; } /* Respect the hidden attribute on the clear button so it doesn't sit next to the close button when the field is empty (the base rule set display:flex, which was overriding [hidden]). */ .srch-clear[hidden]{display:none !important;} .srch-field-wrap:focus-within{ border-color:var(--c-gold); box-shadow:0 0 0 3px rgba(184,154,106,0.16); } .srch-icon{color:var(--c-muted);font-size:0.95rem;flex-shrink:0;} .srch-field-wrap input[type=search]{ flex:1;background:none;border:none;outline:none; font-family:var(--font-body); font-size:1rem; color:var(--c-charcoal);padding:0; letter-spacing:0.01em; -webkit-appearance:none;appearance:none; } .srch-field-wrap input[type=search]::-webkit-search-cancel-button{display:none;} .srch-field-wrap input[type=search]::placeholder{color:var(--c-muted);opacity:0.75;} /* Loading spinner (shown while live results are fetching) */ .srch-spinner{ width:18px;height:18px;flex-shrink:0;display:none; border:2px solid rgba(44,37,32,0.15); border-top-color:var(--c-gold); border-radius:50%; animation:srch-spin 0.7s linear infinite; } .srch-field-wrap.is-loading .srch-spinner{display:block;} @keyframes srch-spin{to{transform:rotate(360deg);}} .srch-clear,.srch-close{ flex-shrink:0;background:none;border:none;cursor:pointer; color:var(--c-muted);display:flex;align-items:center;justify-content:center; transition:color 0.2s,background 0.2s,transform 0.2s; } .srch-clear{font-size:0.95rem;padding:4px;} .srch-clear:hover{color:var(--c-charcoal);} .srch-close{ width:34px;height:34px;border-radius:50%;font-size:0.85rem; border:1px solid var(--c-border);background:rgba(255,255,255,0.5); } .srch-close:hover{background:var(--c-charcoal);color:#fff;border-color:var(--c-charcoal);transform:rotate(90deg);} /* Results / suggestions region inside the modal */ .srch-results{ max-height:min(56vh,420px);overflow-y:auto;overscroll-behavior:contain; margin:0 -14px;padding:0; -webkit-overflow-scrolling:touch; } .srch-results:not(:empty){margin-top:10px;border-top:1px solid var(--c-border);padding:6px 0 8px;} .srch-results-group{padding:6px 0;} .srch-group-label{ display:block;padding:8px 18px 4px;font-size:0.6rem;letter-spacing:0.18em; text-transform:uppercase;color:var(--c-muted);font-weight:600; } /* Recent searches + tag chips (Phase 5) */ .srch-recent-clear{float:right;background:none;border:none;color:var(--c-gold-text);font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;padding:0;} .srch-recent-clear:hover{text-decoration:underline;} .srch-recent-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 18px;background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:0.85rem;color:var(--c-text);transition:background 0.15s;} .srch-recent-item:hover,.srch-recent-item.is-active{background:rgba(184,154,106,0.12);} .srch-recent-item i{color:var(--c-muted);font-size:0.78rem;} .srch-tag-row{display:flex;flex-wrap:wrap;gap:8px;padding:4px 18px 10px;} .srch-tag{font-size:0.74rem;color:var(--c-muted);border:1px solid var(--c-border);border-radius:20px;padding:5px 12px;text-decoration:none;transition:border-color 0.2s,color 0.2s;} .srch-tag:hover,.srch-tag.is-active{border-color:var(--c-gold);color:var(--c-charcoal);} .srch-result{ display:flex;align-items:center;gap:14px;padding:9px 18px; text-decoration:none;transition:background 0.15s; } .srch-result:hover,.srch-result.is-active{background:rgba(184,154,106,0.12);} .srch-result-img{ width:44px;height:56px;border-radius:6px;flex-shrink:0; background-size:cover;background-position:center;background-color:var(--c-surface); } .srch-result-ico{ width:38px;height:38px;border-radius:8px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:var(--c-surface);color:var(--c-gold-text);font-size:0.85rem; } .srch-result-info{min-width:0;flex:1;} .srch-result-name{ font-family:var(--font-display);font-size:0.95rem;color:var(--c-charcoal); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .srch-result-meta{font-size:0.76rem;color:var(--c-muted);margin-top:1px;} .srch-result-price ins{text-decoration:none;color:var(--c-text);} .srch-result-price del{color:var(--c-muted);font-size:0.72rem;margin-right:4px;} /* Empty state */ .srch-empty{padding:26px 20px 30px;text-align:center;} .srch-empty-ico{font-size:1.6rem;color:var(--c-border);margin-bottom:10px;} .srch-empty-title{font-family:var(--font-display);font-size:1rem;color:var(--c-charcoal);margin-bottom:4px;} .srch-empty-sub{font-size:0.8rem;color:var(--c-muted);line-height:1.5;} /* "View all results" footer link */ .srch-viewall{ display:flex;align-items:center;justify-content:center;gap:8px; padding:13px 18px;margin-top:2px; font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:600; color:var(--c-charcoal);text-decoration:none;border-top:1px solid var(--c-border); transition:background 0.15s,color 0.15s; } .srch-viewall:hover{background:var(--c-charcoal);color:#fff;} /* ── MOBILE NAV TOGGLE (hamburger) ───────────────────────────── */ .mobile-nav-toggle{ display:none;flex-direction:column;justify-content:center;gap:5px; width:34px;height:34px;background:none;border:none;cursor:pointer; padding:0;flex-shrink:0; } .mobile-nav-toggle span{ display:block;width:100%;height:1.5px;background:var(--c-charcoal); transition:background 0.3s; } .header-transparent .mobile-nav-toggle span{background:#fff;} .sticky .mobile-nav-toggle span{background:var(--c-charcoal);} /* ── MOBILE MENU (off-canvas panel) ──────────────────────────── */ /* CRITICAL PHASE 5 FIX — mobile nav clipped on non-home pages. Root cause: #site-header is position:fixed with z-index:1000. The off-canvas menu (999) and its overlay (998) sat BELOW it. On the homepage the header is transparent, so the menu showed through and looked fine; on every other page the header becomes a solid sticky bar (rgba background + blur) that painted OVER the top of the menu, clipping the logo/close row — exactly the "partially cut off" symptom. Raising the overlay/panel above the header (and above the search overlay's 1100) fixes it identically on every template without re-styling around the problem. */ .mobile-menu-overlay{ position:fixed;inset:0;background:rgba(44,37,32,0.55); z-index:1400;opacity:0;visibility:hidden;transition:opacity 0.35s ease; } .mobile-menu-overlay.open{opacity:1;visibility:visible;} /* Off-canvas panel slides in FROM THE LEFT to match the hamburger's left position (previously slid from the right, which felt disconnected from the toggle). Premium easing + a soft shadow on the trailing (right) edge sell the physical "drawer" motion. Full-height (top:0;bottom:0), z-index above the fixed header so it is never clipped, with its own internal scroll for tall menus. */ .mobile-menu{ position:fixed;top:0;left:0;bottom:0;width:min(86vw,360px); max-height:100vh;max-height:100dvh; background:var(--c-bg);z-index:1500; transform:translateX(-100%); transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); will-change:transform; display:flex;flex-direction:column;overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:8px 0 40px rgba(44,37,32,0.18); } .mobile-menu.open{transform:translateX(0);} /* Premium staggered reveal: each nav item eases up + fades in just after the panel finishes sliding, giving the menu a considered, high-end feel instead of everything appearing at once. */ .mobile-menu-links>a, .mobile-menu-accordion, .mobile-menu-icons{ opacity:0;transform:translateX(-14px); transition:opacity 0.4s ease,transform 0.4s cubic-bezier(0.16,1,0.3,1); } .mobile-menu.open .mobile-menu-links>a, .mobile-menu.open .mobile-menu-accordion, .mobile-menu.open .mobile-menu-icons{ opacity:1;transform:translateX(0); } .mobile-menu.open .mobile-menu-links>*:nth-child(1){transition-delay:0.14s;} .mobile-menu.open .mobile-menu-links>*:nth-child(2){transition-delay:0.19s;} .mobile-menu.open .mobile-menu-links>*:nth-child(3){transition-delay:0.24s;} .mobile-menu.open .mobile-menu-links>*:nth-child(4){transition-delay:0.29s;} .mobile-menu.open .mobile-menu-links>*:nth-child(5){transition-delay:0.34s;} .mobile-menu.open .mobile-menu-icons{transition-delay:0.40s;} @media(prefers-reduced-motion:reduce){ .mobile-menu{transition:transform 0.2s ease;} .mobile-menu-links>a, .mobile-menu-accordion, .mobile-menu-icons{transition:none;opacity:1;transform:none;} } .mobile-menu-top{ display:flex;align-items:center;justify-content:space-between; padding:20px 22px;border-bottom:1px solid var(--c-border); } .mobile-menu-logo{font-family:var(--font-display);font-size:1.2rem;letter-spacing:0.18em;color:var(--c-charcoal);} .mobile-menu-close{background:none;border:none;font-size:1.1rem;color:var(--c-charcoal);cursor:pointer;padding:6px;} .mobile-menu-links{display:flex;flex-direction:column;padding:12px 0;} .mobile-menu-links>a{ padding:15px 22px;font-size:0.85rem;letter-spacing:0.06em; color:var(--c-text);border-bottom:1px solid var(--c-border); text-transform:uppercase;font-weight:500; } /* Collections accordion (expand/collapse submenu) */ .mobile-menu-accordion{border-bottom:1px solid var(--c-border);} .mobile-menu-accordion-toggle{ width:100%;display:flex;align-items:center;justify-content:space-between; padding:15px 22px;background:none;border:none;cursor:pointer; font-family:var(--font-body);font-size:0.85rem;letter-spacing:0.06em; color:var(--c-text);text-transform:uppercase;font-weight:500; -webkit-tap-highlight-color:transparent; } .mobile-menu-accordion-toggle .mm-acc-chev{ font-size:0.7rem;color:var(--c-muted); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); } .mobile-menu-accordion-toggle[aria-expanded="true"]{color:var(--c-gold-text);} .mobile-menu-accordion-toggle[aria-expanded="true"] .mm-acc-chev{transform:rotate(180deg);color:var(--c-gold);} .mobile-menu-accordion-panel{ max-height:0;overflow:hidden;background:var(--c-surface); transition:max-height 0.4s cubic-bezier(0.16,1,0.3,1); } .mobile-menu-accordion-inner{display:flex;flex-direction:column;padding:4px 0 10px;} .mobile-menu-accordion-inner>a{ padding:12px 22px 12px 34px;font-size:0.82rem;color:var(--c-text); transition:color 0.2s,background 0.2s; } .mobile-menu-accordion-inner>a:hover, .mobile-menu-accordion-inner>a:active{color:var(--c-charcoal);background:rgba(184,154,106,0.08);} .mm-acc-viewall{ display:flex;align-items:center;gap:8px; color:var(--c-charcoal)!important;font-weight:600; letter-spacing:0.08em;text-transform:uppercase;font-size:0.72rem!important; margin-top:4px; } @media(prefers-reduced-motion:reduce){ .mobile-menu-accordion-panel{transition:max-height 0.2s ease;} .mobile-menu-accordion-toggle .mm-acc-chev{transition:none;} } .mobile-menu-icons{ margin-top:auto;display:flex;gap:10px;padding:20px 22px; border-top:1px solid var(--c-border); } .mobile-menu-icons>a{ flex:1;display:flex;align-items:center;justify-content:center;gap:8px; padding:12px;border:1px solid var(--c-border);font-size:0.72rem; letter-spacing:0.06em;text-transform:uppercase;color:var(--c-charcoal); } /* ── RESPONSIVE HEADER (single consolidated breakpoint system) ── Desktop/laptop (>1024px): full inline nav, no hamburger. Tablet/phone (≤1024px): nav collapses into the hamburger menu — this replaces the old approach of shrinking nav text down to an unreadable 0.5rem, which was the root cause of the mobile navigation being effectively unusable. */ @media(max-width:1024px){ /* Desktop nav collapses; the hamburger now sits INLINE at the left of row 2, with the icon cluster pinned to the right of the same row (space-between keeps them apart). Logo stays centred in row 1. Larger, better-spaced logo + icons with proper 44px touch targets for a premium, thumb-friendly mobile header. */ .hdr-nav{display:none;} .mobile-nav-toggle{ display:flex;position:static;transform:none; width:44px;height:44px;justify-content:center;gap:6px; } .mobile-nav-toggle span{width:26px;height:2px;} .hdr-row1{padding:16px 0 6px;} .hdr-row2{justify-content:space-between;padding:4px 0 12px;} .hdr-icons{margin-left:auto;gap:6px;} .site-logo{font-size:1.85rem;letter-spacing:0.2em;} .site-logo-img{height:42px;} .hdr-btn{width:44px;height:44px;font-size:1.2rem;} .cart-dot,.wish-dot{min-width:17px;height:17px;font-size:0.58rem;top:-6px;right:-7px;} } @media(max-width:480px){ /* Phones: keep the logo bold and legible, icons large enough to tap comfortably (44px min), tightened only in horizontal gap so the hamburger + 4 icons fit one row without shrinking the targets. */ .site-logo{font-size:1.55rem;letter-spacing:0.16em;} .site-logo-img{height:38px;} .hdr-row1{padding:14px 0 4px;} .hdr-row2{padding:2px 0 10px;} .hdr-icons{gap:2px;} .hdr-btn{width:44px;height:44px;font-size:1.25rem;} .mobile-nav-toggle{width:44px;height:44px;gap:6px;} .mobile-nav-toggle span{width:24px;} .cart-dot,.wish-dot{top:-5px;right:-6px;} } @media(max-width:360px){ /* Very small phones: nudge the horizontal gap and glyph a touch so five 44px targets never overflow, without going below 42px. */ .hdr-btn{width:42px;height:42px;font-size:1.2rem;} .mobile-nav-toggle{width:42px;height:42px;} .site-logo{font-size:1.4rem;} } /* HERO SLIDER */ .hero-slider{position:relative;height:100vh;height:100svh;min-height:600px;min-height:min(600px,100svh);overflow:hidden;} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(0.25,0.46,0.45,0.94);} .hero-slide.active{opacity:1;} .hero-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 7s cubic-bezier(0.25,0.46,0.45,0.94);} .hero-slide.active .hero-slide-bg{transform:scale(1);} .hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(44,37,32,0.15) 0%,rgba(44,37,32,0.35) 50%,rgba(44,37,32,0.55) 100%);} .hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;z-index:2;} .hero-quote{font-family:var(--font-display);font-size:clamp(1rem,2vw,1.4rem);font-style:italic;color:rgba(255,255,255,0.85);letter-spacing:0.05em;margin-bottom:20px;opacity:0;transform:translateY(20px);transition:all 0.8s ease 0.3s;} .hero-slide.active .hero-quote{opacity:1;transform:translateY(0);} .hero-title{font-family:var(--font-display);font-size:clamp(3rem,7vw,8rem);font-weight:300;color:var(--c-white);letter-spacing:0.12em;line-height:1;margin-bottom:32px;opacity:0;transform:translateY(30px);transition:all 1s ease 0.5s;} .hero-slide.active .hero-title{opacity:1;transform:translateY(0);} .hero-cta{opacity:0;transform:translateY(20px);transition:all 0.8s ease 0.8s;} .hero-slide.active .hero-cta{opacity:1;transform:translateY(0);} .hero-nav{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3;} .hero-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.4);transition:var(--transition);cursor:pointer;} .hero-dot.active{background:var(--c-white);width:24px;border-radius:3px;} .scroll-indicator{position:absolute;bottom:40px;right:40px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3;color:rgba(255,255,255,0.7);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;} .scroll-line{width:1px;height:60px;background:rgba(255,255,255,0.4);position:relative;overflow:hidden;} .scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--c-white);animation:scrollDown 1.8s ease infinite;} @keyframes scrollDown{0%{top:-100%;}100%{top:100%;}} /* COLLECTIONS GRID */ /* auto-fit, not repeat(3,1fr): the tile count is the number of departments the shop has (five today), not a constant. */ /* * The tracks stay 1fr, but the TILE is capped at the width it already has * when all five departments show (225px at a 1205px container). * * This matters now that departments can be switched off individually: with * auto-fit + 1fr the surviving tracks absorb the collapsed ones, so hiding * two categories did not tidy the row - it inflated the remaining three from * 225x364 to 388x628, and a single enabled category would have become one * 1205px-wide tile. * * Capping the track max instead (minmax(160px,225px)) was the obvious fix * and is wrong: auto-fit counts tracks against the MAX, so a 225px ceiling * drops tablet from 4 tiles per row to 3 and phone from 2 to 1. Capping the * tile and centring it in its track leaves every existing layout untouched - * at 900px and 390px the track is already narrower than 225px, so the cap * never binds there. */ .collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;justify-items:center;} /* width:100% is load-bearing. justify-items:center stops the tile being stretched to its track, and a tile whose only sizing is an aspect-ratio has no intrinsic width to shrink-to-fit to - it collapses to 0x0. Same trap as .story-img-wrap. */ .collection-tile{width:100%;max-width:225px;} /* The gradient is the placeholder for a category with no photograph — it is only ever seen through an empty .collection-tile-img, because a tile that has an image covers it completely. */ .collection-tile{position:relative;overflow:hidden;aspect-ratio:var(--ratio-tile);cursor:pointer;display:block;background:linear-gradient(160deg,#6b5b4d 0%,#40362e 100%);border-radius:var(--c-radius-tile,21px);} .collection-tile-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform var(--transition-slow);} .collection-tile:hover .collection-tile-img{transform:scale(1.08);} .collection-tile-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(44,37,32,0.7) 0%,rgba(44,37,32,0.1) 60%);transition:var(--transition);} .collection-tile:hover .collection-tile-overlay{background:linear-gradient(to top,rgba(44,37,32,0.8) 0%,rgba(44,37,32,0.2) 60%);} .collection-tile-content{position:absolute;bottom:0;left:0;right:0;padding:32px;color:var(--c-white);} .collection-tile-title{font-family:var(--font-display);font-size:clamp(1.4rem,2.5vw,2.2rem);font-weight:400;letter-spacing:0.08em;margin-bottom:16px;transform:translateY(8px);transition:var(--transition);} .collection-tile:hover .collection-tile-title{transform:translateY(0);} .collection-tile-btn{font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--c-gold-light);border-bottom:1px solid var(--c-gold-light);padding-bottom:3px;opacity:0;transform:translateY(10px);transition:var(--transition) 0.1s;display:inline-block;} .collection-tile:hover .collection-tile-btn{opacity:1;transform:translateY(0);} /* No column or ratio override here any more: the tracks above already fall to two-up on a phone, and two golden tiles per row are shorter than the single full-width landscape tile this used to force. */ /* ============================================================ SHARE ROW (celasta_share_links()) Global rather than inline in single.php, because the product gallery's share popover renders the same component. ============================================================ */ .article-share{padding:18px 0 0;border-top:1px solid var(--c-border);margin:24px 0 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .article-share span{font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;font-weight:500;color:var(--c-muted);} .share-btn{width:36px;height:36px;border:1px solid var(--c-border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85rem;color:var(--c-muted);transition:var(--transition);background:transparent;cursor:pointer;} .share-btn:hover{border-color:var(--c-gold);color:var(--c-gold);} .share-btn.is-copied{border-color:var(--c-gold);color:var(--c-gold);} /* ============================================================ CAROUSELS - Shop by Collection, Inspirations, Evermores One component, three rows. Everything is scoped to .celasta-carousel so the same .collection-grid / .inspirations-grid markup keeps its static grid anywhere a carousel wrapper is not present. ============================================================ */ .celasta-carousel{position:relative;--cc-gap:20px;--cc-slide:clamp(190px,24vw,285px);} /* Per-row slide width. The story rows carry more text under the picture, so they keep a wider track than the collection tile's. CHOSEN PER BREAKPOINT, NOT SCALED BY THE VIEWPORT. This was clamp(220px,26vw,260px): between roughly 846px and 1000px wide the tile grew a pixel for every four of window, so no two visitors saw the same tile and the row re-laid itself continuously as a window was dragged. A tile is now one deliberate size within a breakpoint and changes only at the steps below, which is also what makes the featured entry sit in the same place for everybody. The phone value is deliberately still relative (58vw, further down): there the design IS a peek carousel, where the next card showing at the edge is the point. */ .celasta-carousel--stories{--cc-gap:24px;--cc-slide:260px;} @media(max-width:1199.98px){ .celasta-carousel--stories{--cc-slide:244px;} } @media(max-width:991.98px){ .celasta-carousel--stories{--cc-gap:20px;--cc-slide:228px;} } @media(max-width:767.98px){ .celasta-carousel--stories{--cc-gap:18px;--cc-slide:220px;} } /* display:flex replaces the grid. grid-template-columns has to be cleared explicitly or it stays declared on an element that is no longer a grid - harmless today, misleading in devtools tomorrow. * * Written as .celasta-carousel .celasta-carousel-track, two classes, on * purpose: the track also carries .collection-grid or .inspirations-grid, * and .inspirations-grid is declared LATER in this file. At equal * specificity it won, so the story rows stayed grids and never overflowed - * a carousel with nothing to scroll. */ .celasta-carousel .celasta-carousel-track{ display:flex;grid-template-columns:none;gap:var(--cc-gap); overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity;scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; padding:0; /* * "safe center" keeps the Inspirations and Evermores rows centred exactly * as their grid did when only two entries are published - plain flex-start * shunted them to the left edge, a change nobody asked for - while falling * back to start alignment the moment the row overflows. Plain * justify-content:center would centre the overflow too, putting the first * slide off the left edge where no amount of scrolling reaches it. */ justify-content:safe center; } .celasta-carousel .celasta-carousel-track::-webkit-scrollbar{display:none;} /* * The slide is sized directly rather than as "1/N of the row", which is the * obvious way to do this and is wrong here: a fixed slides-per-view makes * the tile GROW as the screen shrinks (3-up on a 1024 tablet gave a 307px * tile against 286px on a 1440 desktop). Clamping the width instead holds * every tile to one size range at every width, and the row divides unevenly * on purpose - the part-visible next tile is what tells a thumb there is * more to swipe to, without an instruction. * * width:auto is needed because .collection-tile sets width:100%, which would * otherwise win over flex-basis in browsers that resolve it first. */ .celasta-carousel .celasta-carousel-slide{ flex:0 0 var(--cc-slide); width:auto;max-width:none;scroll-snap-align:start; } .celasta-carousel-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:44px;height:44px;border-radius:50%; border:1px solid rgba(44,37,32,0.10);background:var(--c-white,#fff); color:var(--c-charcoal,#3A332D);font-size:0.85rem;line-height:1; display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 4px 16px rgba(44,37,32,0.16); transition:background var(--transition),color var(--transition),opacity var(--transition); } /* MUST follow the display:flex above: a class rule beats the user agent's [hidden]{display:none}, so without this an arrow marked hidden by the script would still be painted. Same trap as .product-video-slide. */ .celasta-carousel-arrow[hidden]{display:none;} .celasta-carousel-arrow:hover:not(:disabled){background:var(--c-charcoal,#3A332D);color:var(--c-white,#fff);} .celasta-carousel-arrow:focus-visible{outline:2px solid var(--c-gold,#B08D57);outline-offset:2px;} .celasta-carousel-arrow:disabled{opacity:0.32;cursor:default;box-shadow:none;} .celasta-carousel-prev{left:-22px;} .celasta-carousel-next{right:-22px;} /* ── Phone: centre focus ────────────────────────────────────────── * Three slides on screen, the middle one in focus and the two beside it * dimmed and scaled back, so the row reads as "this one, with the last and * the next either side" instead of a flat strip. * * scroll-snap-align switches from start to CENTRE here, and the track gains * padding of exactly half the leftover width so the first and last slides * can reach the middle too. Centre alignment also makes the scale safe: * scaling about the centre leaves the snap point where it was, so the row * cannot drift as slides grow and shrink. */ @media(max-width:600px){ /* * vw, not a percentage. The track's own padding below is what lets the * first and last slides reach the middle - and a percentage flex-basis * resolves against the CONTENT box, which that padding has already * shrunk. 58% of a box the padding cut to 58% left a 120px slide inside a * 358px row. Viewport units are immune to that feedback loop. */ .celasta-carousel, .celasta-carousel--stories{--cc-gap:14px;--cc-slide:58vw;} .celasta-carousel .celasta-carousel-track{ scroll-snap-type:x mandatory; padding-inline:calc((100% - var(--cc-slide)) / 2); } .celasta-carousel .celasta-carousel-slide{ scroll-snap-align:center; transform:scale(0.85);opacity:0.5; transition:transform 350ms ease,opacity 350ms ease; transform-origin:center center; } .celasta-carousel .celasta-carousel-slide.is-focus{transform:scale(1);opacity:1;} /* Set for exactly one frame, while the row steps off a cloned slide onto the identical real one. Without it the incoming slide would animate up from .85 and the middle tile would shrink and regrow at every wrap. */ .celasta-carousel .is-snapping .celasta-carousel-slide{transition:none;} /* The arrows would sit on top of the two dimmed neighbours; on a phone the swipe and the focus effect are the affordance. */ .celasta-carousel-arrow{display:none;} } @media(prefers-reduced-motion:reduce){ .celasta-carousel .celasta-carousel-track{scroll-behavior:auto;} .celasta-carousel .celasta-carousel-slide{transition:none;} } } /* HERO — description text + alignment variants (Phase 2: dashboard-editable per slide) */ .hero-description{font-size:clamp(0.85rem,1.2vw,1rem);color:rgba(255,255,255,0.8);max-width:520px;margin:0 auto 28px;line-height:1.7;} .hero-content[data-align="left"]{align-items:flex-start;text-align:left;} .hero-content[data-align="right"]{align-items:flex-end;text-align:right;} /* MARQUEE (Phase 2 — new, dashboard-toggleable) */ .site-marquee{overflow:hidden;background:var(--c-charcoal);padding:12px 0;white-space:nowrap;} .site-marquee-track{display:inline-flex;width:max-content;animation:celasta-marquee var(--marquee-speed,30s) linear infinite;} .site-marquee[data-direction="right"] .site-marquee-track{animation-direction:reverse;} .site-marquee[data-pause-hover="1"]:hover .site-marquee-track{animation-play-state:paused;} .site-marquee-group{display:inline-flex;flex-shrink:0;} .site-marquee-item{display:inline-flex;align-items:center;gap:10px;padding:0 32px;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-white);} .site-marquee-item i{color:var(--c-gold-light);} @keyframes celasta-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* FEATURED PRODUCTS (Phase 2 — new, dashboard-toggleable) */ .featured-products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .featured-products-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding-bottom:8px;} .featured-products-carousel .fp-card{flex:0 0 260px;scroll-snap-align:start;} .fp-card{display:block;} .fp-card-img{aspect-ratio:var(--ratio-tile);background-size:cover;background-position:center;margin-bottom:12px;transition:transform var(--transition-slow);overflow:hidden;border-radius:var(--c-radius-card,14px);} .fp-card:hover .fp-card-img{transform:scale(1.04);} .fp-card-name{font-family:var(--font-display);font-size:1rem;color:var(--c-charcoal);margin-bottom:4px;} .fp-card-price{font-size:0.85rem;color:var(--c-muted);} @media(max-width:1024px){.featured-products-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.featured-products-grid{grid-template-columns:1fr;}} /* TESTIMONIALS (Phase 2 — new, dashboard-toggleable) */ .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;} .testimonial-card{background:var(--c-white);border:1px solid var(--c-border);padding:32px;} .testimonial-stars{color:var(--c-gold);font-size:0.8rem;margin-bottom:16px;letter-spacing:2px;} .testimonial-text{font-size:0.92rem;color:var(--c-text);line-height:1.8;margin-bottom:24px;font-style:italic;} .testimonial-author{display:flex;align-items:center;gap:12px;} .testimonial-avatar{width:42px;height:42px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;} .testimonial-name{font-size:0.85rem;font-weight:500;color:var(--c-charcoal);} .testimonial-location{font-size:0.72rem;color:var(--c-muted);} @media(max-width:1024px){.testimonials-grid{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.testimonials-grid{grid-template-columns:1fr;}} /* The homepage "Follow Along" Instagram grid was removed per requirements. Social links remain in the footer. */ /* INSPIRATIONS */ /* Capped and centred rather than "three equal columns of whatever the container is". At 1205px those thirds were 386px wide, and a golden tile that wide is 624px tall before the title and preview text - the section ran to 1100px+. A tile ceiling keeps it compact, and centring means two entries (which is what the homepage actually shows) sit as a balanced pair instead of leaving a third column hanging. */ .inspirations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,260px));justify-content:center;gap:24px;grid-auto-rows:1fr;} /* The tile now fills its grid track (see grid-auto-rows above) and the body flexes, so the rule under the text lands on the tile's own bottom edge instead of wherever that entry's preview text happened to end. Two tiles side by side differed by 42px before this. */ .insp-tile{cursor:pointer;display:flex;flex-direction:column;height:100%;} /* * Same structure as .collection-tile, which is the reference and is not * touched by this. * * The radius and the clip belong on a box that is NEVER transformed, and * the scale belongs to a child that has neither. Previously all three sat * on .insp-tile-img: the browser rasterises a rounded, overflow-hidden * element into its own layer to composite the transform, and scaling that * bitmap is what produced hard corners partway through the hover - there * was no untransformed rounded clip left underneath to hold the shape. */ .insp-tile-img{aspect-ratio:var(--ratio-tile);position:relative;overflow:hidden;border-radius:var(--c-radius-card,14px);} .insp-tile-img-inner{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform var(--transition-slow);} .insp-tile:hover .insp-tile-img-inner{transform:scale(1.05);} .insp-tile-body{padding:14px 0;border-bottom:1px solid var(--c-border);flex:1 0 auto;display:flex;flex-direction:column;} /* grid-auto-rows:1fr equalises tiles inside one grid, but the homepage runs TWO of these grids - Inspirations and Evermores - and a grid can only equalise against itself. The rows came out 536.7px and 578.7px purely because one entry's preview ran to three lines and the others to one. Reserving a fixed two-line block for the preview makes the tile the same height whatever the copy does, in both grids and on the listing pages. The title is capped at two lines for the same reason; it is not given a min-height because every title on the site is one line and reserving a second would just open a gap under it. */ .insp-tile-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;} .insp-tile-preview{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; min-height:2.62rem; /* 2 lines: font-size .82rem x line-height 1.6 x 2 */ flex:1 0 auto; } .insp-tile-title{font-family:var(--font-display);font-size:1.3rem;color:var(--c-charcoal);margin-bottom:8px;font-style:italic;} .insp-tile-preview{font-size:0.82rem;color:var(--c-muted);line-height:1.6;margin-bottom:12px;} .insp-actions{display:flex;gap:12px;flex-wrap:wrap;} .insp-actions a{font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;transition:var(--transition);} .insp-explore{color:var(--c-muted);border-bottom:1px solid var(--c-border);padding-bottom:2px;} .insp-explore:hover{color:var(--c-charcoal);border-color:var(--c-charcoal);} .insp-own{color:var(--c-gold-text);border-bottom:1px solid var(--c-gold-text);padding-bottom:2px;} .insp-own:hover{color:var(--c-charcoal);border-color:var(--c-charcoal);} /* auto-fit already collapses to a single centred tile on a phone. */ /* STORY PREVIEW */ .story-preview{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;} /* Width-capped: at half of a 1205px row this image was 562px wide, and at the golden ratio that is a 909px-tall picture on its own. The cap keeps the section inside one screen; the column stays centred so the gold offset frame still reads against the text. */ .story-preview-img{aspect-ratio:var(--ratio-tile);max-width:400px;width:100%;margin-inline:auto;background:var(--c-surface);background-size:cover;background-position:center;position:relative;border-radius:var(--c-radius-tile,21px);} /* The offset gold frame has to take the same corner as the image it traces, or a rounded photo sits inside a square outline. */ .story-preview-img::before{content:'';position:absolute;top:-20px;left:-20px;right:20px;bottom:20px;border:1px solid var(--c-gold);z-index:-1;border-radius:var(--c-radius-tile,21px);} .story-preview-text p{color:var(--c-muted);font-size:0.95rem;line-height:1.9;margin-bottom:36px;} .story-preview-text h2{margin-bottom:24px;} @media(max-width:768px){.story-preview{grid-template-columns:1fr;gap:40px;}.story-preview-img::before{display:none;}} /* TESTIMONIALS */ .testimonials-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;grid-auto-rows:1fr;} .testimonial-card{background:var(--c-white);border:1px solid var(--c-border);padding:28px;transition:var(--transition);border-radius:var(--c-radius-card,14px);} .testimonial-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(44,37,32,0.08);} .t-stars{color:var(--c-gold);font-size:0.75rem;margin-bottom:16px;letter-spacing:2px;} .t-text{font-family:var(--font-display);font-size:1rem;font-style:italic;color:var(--c-text);line-height:1.7;margin-bottom:20px;} .t-author{display:flex;align-items:center;gap:12px;} .t-avatar{width:38px;height:38px;border-radius:50%;background:var(--c-gold);color:var(--c-white);font-weight:600;font-size:0.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .t-name{font-size:0.82rem;font-weight:600;color:var(--c-charcoal);} .t-city{font-size:0.72rem;color:var(--c-muted);} @media(max-width:1024px){.testimonials-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:600px){.testimonials-grid{grid-template-columns:1fr;}} /* TRUST SECTION */ .trust-section{background:var(--c-charcoal);padding:60px 0;} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center;} .trust-item{color:var(--c-white);} .trust-icon{width:48px;height:48px;border:1px solid var(--c-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.2rem;color:var(--c-gold);transition:var(--transition);} .trust-item:hover .trust-icon{background:var(--c-gold);color:var(--c-white);transform:translateY(-4px);} .trust-title{font-family:var(--font-body);font-size:0.72rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:6px;} .trust-desc{font-size:0.78rem;color:rgba(255,255,255,0.55);line-height:1.5;} @media(max-width:768px){.trust-grid{grid-template-columns:repeat(2,1fr);gap:24px;}} /* ─── FOOTER ──────────────────────────────────────────────────────── Structure: Trust bar (4 columns) Main row → [celasta + tagline + social] LEFT | [Support] [Policies] RIGHT Bottom bar → copyright | ↑ scroll top ─────────────────────────────────────────────────────────────────── */ /* Trust bar */ .trust-bar{background:var(--c-charcoal);padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid rgba(255,255,255,0.06);} .trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;} .trust-icon{width:48px;height:48px;border:1px solid rgba(255,255,255,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:1.1rem;color:var(--c-gold);} .trust-label{font-size:0.67rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:#fff;margin-bottom:5px;} .trust-sub{font-size:0.71rem;color:rgba(255,255,255,0.38);} /* Footer wrapper */ /* Footer height (Prompt 62). Measured before: 444px at 1440 = 80 top pad + 248 content + 60 main pad + 56 bottom bar. The top padding alone was a fifth of it, which is what made the gap above the brand read as empty rather than as breathing room. */ .site-footer{background:var(--c-charcoal);padding:clamp(28px,3.6vw,48px) 0 0;} /* Main row: brand LEFT | support+policies RIGHT */ .ft-main{ display:flex; flex-direction:row; align-items:flex-start; justify-content:space-between; gap:clamp(30px,5vw,80px); padding-bottom:clamp(22px,3vw,36px); border-bottom:1px solid rgba(255,255,255,0.07); } /* Brand — left */ .ft-brand{flex:0 0 auto;min-width:160px;max-width:230px;} .ft-logo{ /* Was 'CelastaGaramond' first — a licensed Monotype face served as a 196 KB webfont for this one wordmark. Dropped 2026-09-26; EB Garamond is already loaded from Google Fonts under the OFL. */ font-family:'EB Garamond',Georgia,serif; color:#fff; font-size:clamp(2rem,3.2vw,2.8rem); font-weight:400; font-style:normal; letter-spacing:0.08em; line-height:1.1; margin-bottom:10px; display:block; text-decoration:none; -webkit-user-select:none; user-select:none; } .ft-logo:hover{color:var(--c-white);} .ft-tagline{font-size:0.8rem;color:rgba(255,255,255,0.5);font-style:normal!important;font-weight:300;letter-spacing:0.04em;margin:0 0 20px;display:block;} .ft-social{display:flex;gap:8px;flex-wrap:wrap;} .ft-social a{ width:32px;height:32px; border:1px solid rgba(255,255,255,0.17);border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:0.78rem;color:rgba(255,255,255,0.5); transition:var(--transition); } .ft-social a:hover{border-color:var(--c-gold);color:var(--c-gold);transform:translateY(-2px);} /* Right block: Support + Policies side by side */ .ft-right{ display:flex; flex-direction:row; gap:clamp(28px,4vw,64px); align-items:flex-start; flex-shrink:0; } .ft-col-title{ font-family:var(--font-body);font-size:0.64rem;font-weight:600; letter-spacing:0.2em;text-transform:uppercase; color:#fff;margin-bottom:12px; } .ft-col ul{list-style:none;padding:0;margin:0;} /* 9px x 6 policy links was 54px of pure gap in the column that sets the whole row's height. */ .ft-col ul li{margin-bottom:6px;} /* A long link column splits in two once the footer is a side-by-side row. Policies' six links made that column 223px tall against a 133px brand block, and a flex row is as tall as its tallest child - so 90px of the footer was empty space beside the brand with nothing to put in it. Two columns of three bring it to ~124px, roughly the brand's own height. Keyed off the CONTENT (:has(li:nth-child(5)) = five or more links) rather than off :nth-child(2), because these columns are generated from Header & Footer settings - the admin can reorder them, rename them, or add a third. Whichever column is long is the one that splits. Above 580px only: that is exactly where .ft-main stops stacking. Below it the two columns already sit side by side in a 358px-wide phone, and splitting one of them again would give ~40px per column. */ @media(min-width:581px){ .ft-col:has(li:nth-child(5)) ul{ columns:2; column-gap:clamp(18px,2vw,32px); } .ft-col:has(li:nth-child(5)) ul li{break-inside:avoid;} } .ft-col ul a{font-size:0.77rem;color:rgba(255,255,255,0.44);transition:var(--transition);display:inline-flex;align-items:center;gap:6px;} .ft-col ul a:hover{color:var(--c-gold);padding-left:4px;} /* Bottom bar */ .ft-bottom{ display:flex;align-items:center;justify-content:space-between; padding:13px 0;border-top:1px solid rgba(255,255,255,0.05); } /* The back-to-top and WhatsApp buttons are position:fixed, so at full scroll - where the page ends AT the viewport bottom - they sit on top of the last line on the page, which is this one. Measured: the scroll-top button over the start of the copyright at 768px, and WhatsApp over "Secure Payments" at 390px. Fixed by keeping the text out of their CORNERS rather than reserving vertical space. Clearing them vertically would need ~76px of padding (the float is 56px tall plus a 20px offset), which would put back most of the height this footer just lost. Horizontal padding costs nothing: the line is far narrower than the bar it sits in. */ @media(max-width:1024px){ .ft-bottom{padding-left:56px;} /* clears .scroll-top, bottom-left */ } @media(max-width:580px){ /* Both corners are occupied down here, and the sums do not allow one line: on a 390px screen the copyright is 271px wide with 87px of slack, while the two buttons intrude 42px on the left and 56px on the right - 98px. So it wraps to two lines, which costs ~19px. Clearing them vertically instead would have cost 63px, and letting it overlap was the bug. */ .ft-bottom{padding-left:52px;padding-right:64px;} } .ft-bottom p{font-size:0.69rem;color:rgba(255,255,255,0.27);} /* Keeps the shield icon with its label: once the line wraps on a phone it was breaking between "Secure" and "Payments". */ .ft-secure{white-space:nowrap;} /* Back to top — pinned bottom-LEFT so it can never overlap the WhatsApp floating button (bottom-right) or any other right-side floating element. Sized as a comfortable 44px touch target and raised above the WhatsApp button's stacking context. */ .scroll-top{ position:fixed; bottom:24px; left:20px; right:auto; z-index:1000; width:44px;height:44px; border:1px solid rgba(44,37,32,0.2); border-radius:50%; display:none; align-items:center;justify-content:center; color:var(--c-charcoal);font-size:0.8rem; background:rgba(250,248,244,0.94); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); cursor:pointer; opacity:0;transform:translateY(10px); transition:opacity 0.3s ease,transform 0.3s ease,background 0.25s,color 0.25s,border-color 0.25s; box-shadow:0 4px 16px rgba(44,37,32,0.16); } .scroll-top.visible{display:flex;opacity:1;transform:translateY(0);} .scroll-top:hover{background:var(--c-charcoal);color:#fff;border-color:var(--c-charcoal);transform:translateY(-2px);} @media(max-width:480px){ .scroll-top{bottom:20px;left:16px;width:42px;height:42px;} } @media(prefers-reduced-motion:reduce){ .scroll-top{transition:background 0.2s,color 0.2s;transform:none;} .scroll-top.visible{transform:none;} } /* Mobile — only stack at ≤580px */ @media(max-width:580px){ .trust-row{grid-template-columns:repeat(2,1fr);} .ft-main{flex-direction:column;gap:28px;} .ft-right{gap:24px;} .ft-bottom{flex-direction:column;gap:10px;text-align:center;} } @media(max-width:360px){ .trust-row{grid-template-columns:1fr;} } /* ── MY ACCOUNT LOGIN / REGISTER ───────────────────────────────── */ .celasta-myaccount-wrap{max-width:960px;margin:0 auto;padding:80px 24px 100px;} .celasta-login-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;} .celasta-auth-panel{background:var(--c-white);border:1px solid var(--c-border);padding:48px 40px;} .celasta-auth-panel--register{background:var(--c-surface);} .celasta-auth-inner .section-label{display:block;margin-bottom:8px;} .celasta-auth-inner h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:8px;} .auth-sub{font-size:0.85rem;color:var(--c-muted);margin-bottom:32px;line-height:1.6;} .celasta-form-group{margin-bottom:20px;} .celasta-form-group label{display:block;font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--c-muted);font-weight:600;margin-bottom:8px;} .celasta-form-group input{width:100%;border:1px solid var(--c-border);padding:12px 16px;font-family:var(--font-body);font-size:0.88rem;color:var(--c-charcoal);background:var(--c-white);outline:none;transition:border-color 0.2s;box-sizing:border-box;} .celasta-form-group input:focus{border-color:var(--c-charcoal);} .celasta-form-group input::placeholder{color:rgba(44,37,32,0.3);} .celasta-form-row--between{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;} .woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;font-size:0.82rem;color:var(--c-muted);cursor:pointer;} .woocommerce-form-login__rememberme input{width:auto;margin:0;} .auth-forgot{font-size:0.78rem;color:var(--c-muted);text-decoration:underline;transition:color 0.2s;} .auth-forgot:hover{color:var(--c-gold);} .btn-full{width:100%;justify-content:center;margin-top:8px;} /* WooCommerce notices inside auth */ /* Notices carry no rule and no outline - see the NOTICES ARE NOT BOXES block in assets/css/woo-extra.css for the whole set and the reasoning. The tint and the text colour stay: those are what say at a glance whether something worked, and neither of them draws a rectangle. */ .woocommerce-error,.woocommerce-message,.woocommerce-info{padding:12px 16px;margin-bottom:20px;font-size:0.85rem;border:0;} .woocommerce-error{background:#fdf0ed;color:#c0392b;} .woocommerce-message{background:#f0f4ef;color:#4A5E45;} @media(max-width:680px){.celasta-login-grid{grid-template-columns:1fr;}.celasta-auth-panel{padding:32px 24px;}} /* ── GLOBAL MOBILE FIXES ─────────────────────────────────────── */ @media(max-width:768px){ /* Body spacing for mobile header height */ /* body padding handled globally */ /* Trust section */ .trust-grid{grid-template-columns:repeat(2,1fr);gap:24px;} /* Collections archive */ .archive-product-grid,.woocommerce ul.products{grid-template-columns:repeat(2,1fr)!important;} /* Hero */ .hero-slide h1{font-size:clamp(2rem,10vw,3.5rem);} .hero-slide .section-quote{font-size:0.82rem;} /* Shop tiles */ .collection-tiles{grid-template-columns:1fr!important;} /* Footer brand */ .footer-brand{width:100%;} .footer-right-cols{width:100%;} /* Dropdowns on mobile — prevent overflow */ .dropdown-menu{min-width:120px;} } @media(max-width:480px){ .trust-grid{grid-template-columns:1fr;gap:20px;} .archive-product-grid,.woocommerce ul.products{grid-template-columns:1fr!important;} .container{padding-left:16px;padding-right:16px;} } /* ═══════════════════════════════════════════════════════════ MOBILE-FIRST RESPONSIVE FIXES ═══════════════════════════════════════════════════════════ */ /* Tablet */ @media(max-width:1024px){ .container{padding:0 clamp(16px,3vw,40px);} .ft-main{gap:clamp(20px,4vw,60px);} } /* Phone landscape / small tablet */ @media(max-width:768px){ h1{font-size:clamp(2rem,8vw,3.5rem);} h2{font-size:clamp(1.6rem,6vw,2.8rem);} } /* Phone portrait */ @media(max-width:480px){ .ft-main{flex-direction:column;gap:24px;} .ft-right{gap:28px;} .ft-logo{font-size:2rem;} .trust-row{grid-template-columns:repeat(2,1fr);gap:16px;} .search-overlay{padding:0;justify-content:flex-start;} .srch-inner{ max-width:none;width:100%;border-radius:0 0 16px 16px; border-left:none;border-right:none;border-top:none; padding:12px 12px 0; } .srch-field-wrap input[type=search]{font-size:16px;} /* 16px avoids iOS zoom-on-focus */ .srch-results{max-height:calc(100vh - 90px);} .container{padding:0 16px;} } /* Very small phones */ @media(max-width:360px){ .trust-row{grid-template-columns:1fr;} } /* ============================================================ UNIVERSAL PAGE BUILDER ============================================================ */ .pb-page{padding-top:var(--header-height,108px);} .pb-section{padding:var(--space-section) 0;} .pb-section:first-child{padding-top:calc(var(--space-section) - 40px);} .pb-hero{position:relative;height:70vh;min-height:440px;display:flex;align-items:center;justify-content:center;overflow:hidden;} .pb-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;} .pb-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(44,37,32,0.25) 0%,rgba(44,37,32,0.55) 100%);} .pb-hero-content{position:relative;z-index:2;text-align:center;color:#fff;max-width:640px;padding:0 24px;} .pb-hero-content h1{color:#fff;margin:16px 0 28px;} .pb-rich-text{color:var(--c-muted);line-height:1.9;} .pb-rich-text p{margin-bottom:16px;} .pb-image-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;} .pb-image-text.pb-image-right{direction:rtl;} .pb-image-text.pb-image-right>*{direction:ltr;} .pb-image-text-img{aspect-ratio:var(--ratio-tile);background-size:cover;background-position:center;background-color:var(--c-surface);border-radius:var(--c-radius-card,14px);} @media(max-width:768px){.pb-image-text{grid-template-columns:1fr;}.pb-image-text.pb-image-right{direction:ltr;}} .pb-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;} .pb-gallery-item{aspect-ratio:1/1;background-size:cover;background-position:center;background-color:var(--c-surface);} .pb-testimonial-quote{font-family:var(--font-display);font-size:clamp(1.2rem,2.5vw,1.6rem);font-style:italic;color:var(--c-charcoal);line-height:1.6;margin-bottom:16px;} .pb-testimonial-name{font-size:0.85rem;color:var(--c-muted);letter-spacing:0.04em;text-transform:uppercase;} .pb-video-wrap{position:relative;aspect-ratio:16/9;background:#000;} .pb-video-wrap iframe,.pb-video-wrap video{width:100%;height:100%;display:block;} /* ── Phase 4 #13d: header account icon hover dropdown ─────────────── */ .hdr-account-dd{position:relative;display:inline-flex;} /* invisible hover bridge across the 10px gap so the menu stays open */ @media (hover: hover) and (pointer: fine) { .hdr-account-dd::after{content:'';position:absolute;top:100%;right:0;width:100%;height:12px;} } .hdr-account-menu{ position:absolute;top:calc(100% + 10px);right:0; background:#fff;border:1px solid var(--c-border);border-top:2px solid var(--c-gold); min-width:184px;opacity:0;visibility:hidden;transform:translateY(6px); transition:var(--transition);box-shadow:0 12px 36px rgba(44,37,32,0.11);z-index:1001; } /* .is-open is set by extras.js and is the primary trigger: it is the only one that works on touch, and it survives another element briefly overlaying the header. The :hover rule is the no-JS path and is gated behind (hover: hover) so a tap cannot leave it stuck open on mobile. */ .hdr-account-dd.is-open .hdr-account-menu, .hdr-account-dd:focus-within .hdr-account-menu{opacity:1;visibility:visible;transform:translateY(0);} @media (hover: hover) and (pointer: fine) { .hdr-account-dd:hover .hdr-account-menu{opacity:1;visibility:visible;transform:translateY(0);} } .hdr-account-menu a{ display:flex;align-items:center;gap:10px;padding:11px 16px; font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase; color:var(--c-text)!important;border-bottom:1px solid var(--c-border); transition:var(--transition);white-space:nowrap; } .hdr-account-menu a:last-child{border-bottom:none;} .hdr-account-menu a i{width:16px;text-align:center;color:var(--c-muted);} .hdr-account-menu a:hover{background:var(--c-surface);color:var(--c-gold)!important;padding-left:20px;} .hdr-account-menu a:hover i{color:var(--c-gold);} /* ── Phase 4 #9: searchable country-code combobox ────────────────── */ .cauth-cc-combo{position:relative;flex:0 0 auto;} .cauth-cc-btn{ display:flex;align-items:center;gap:7px;height:100%;min-height:46px; padding:0 12px;background:var(--c-surface);border:1px solid var(--c-border); border-radius:8px;cursor:pointer;font-size:0.9rem;color:var(--c-text);white-space:nowrap; } .cauth-cc-btn .cauth-cc-flag{font-size:1.05rem;line-height:1;} .cauth-cc-btn .cauth-cc-caret{font-size:0.62rem;color:var(--c-muted);margin-left:2px;} .cauth-cc-panel{ position:absolute;top:calc(100% + 6px);left:0;z-index:1200;width:290px;max-width:78vw; background:#fff;border:1px solid var(--c-border);border-radius:10px; box-shadow:0 16px 40px rgba(44,37,32,0.16);overflow:hidden; } .cauth-cc-search{ width:100%;box-sizing:border-box;border:none;border-bottom:1px solid var(--c-border); padding:11px 14px;font-size:0.85rem;outline:none;color:var(--c-text); } .cauth-cc-list{list-style:none;margin:0;padding:4px 0;max-height:260px;overflow-y:auto;} .cauth-cc-opt{ display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer; font-size:0.85rem;color:var(--c-text);transition:background 0.15s; } .cauth-cc-opt:hover{background:var(--c-surface);} .cauth-cc-opt[aria-selected="true"]{background:var(--c-surface);font-weight:600;} .cauth-cc-opt .cauth-cc-flag{font-size:1.1rem;line-height:1;flex:0 0 auto;} .cauth-cc-opt .cauth-cc-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .cauth-cc-opt .cauth-cc-dial{flex:0 0 auto;color:var(--c-muted);font-variant-numeric:tabular-nums;} /* ── Share: QR code dialog ──────────────────────────────────────────── Opened from the .celasta-qr-open button in celasta_share_links(). Same visual family as the share row it belongs to; deliberately NOT the native OS share sheet this widget exists to replace. */ .celasta-qr[hidden]{display:none;} .celasta-qr{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;} .celasta-qr-backdrop{position:absolute;inset:0;background:rgba(20,16,13,.62);backdrop-filter:blur(2px);} .celasta-qr-panel{ position:relative;z-index:1;max-width:380px;width:100%; /* Black, the way a native share sheet is. The code plate inside stays white because a QR needs a light quiet zone to be readable at all. */ background:#000; border:1px solid rgba(255,255,255,.14);border-radius:16px; padding:44px 20px 20px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.42); /* Room at the top for the close button, which now sits above the code rather than beside a heading. */ } .celasta-qr-x{ position:absolute;top:8px;right:12px;border:0;background:none;cursor:pointer; font-size:1.5rem;line-height:1;color:rgba(255,255,255,.55);padding:4px 6px; } .celasta-qr-x:hover{color:#fff;} /* Caption, not headline - the code above it is the headline now. */ .celasta-qr-panel h3{margin:0 0 2px;font-size:0.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-gold,#B89A6A);font-weight:600;} .celasta-qr-sub{margin:0 0 2px;font-size:0.95rem;color:#fff;line-height:1.35;font-weight:500;} /* min-height so the panel does not jump when "Generating…" is replaced by the canvas. */ /* The code leads: it is the first thing in the panel, it spans the full width, and everything else is caption beneath it. min-height holds the space so the panel does not jump when "Generating…" becomes the canvas. */ .celasta-qr-code{ display:flex;align-items:center;justify-content:center; width:100%;min-height:296px;margin:4px 0 16px; font-size:0.78rem;color:var(--c-muted); background:#fff;border-radius:12px;padding:14px; box-sizing:border-box; } .celasta-qr-canvas{ /* Crisp squares: the canvas is drawn at whole-pixel module size and must not be smoothed when the browser scales it. */ image-rendering:pixelated; border-radius:6px; /* Fills the plate it sits on, so the code is the largest thing here by a wide margin - it is read by a camera, not glanced at. */ width:100%;height:auto;max-width:312px; } .celasta-qr-url{ margin:12px 0 0;font-size:0.68rem;line-height:1.45;color:rgba(255,255,255,.55); word-break:break-all; } .celasta-qr-actions{display:flex;gap:8px;justify-content:center;margin-top:14px;} .celasta-qr-actions a,.celasta-qr-actions button{ font:inherit;font-size:0.72rem;padding:8px 16px;border-radius:999px;cursor:pointer; border:1px solid rgba(255,255,255,.22);background:none;color:#fff;text-decoration:none; } .celasta-qr-actions a:hover,.celasta-qr-actions button:hover{border-color:var(--c-gold);color:var(--c-gold);} /* The page behind must not scroll while the dialog is up. */ body.celasta-qr-lock{overflow:hidden;} @media(max-width:600px){ .celasta-qr-panel{padding:40px 14px 16px;} .celasta-qr-code{min-height:262px;padding:10px;margin-bottom:12px;} .celasta-qr-actions{flex-wrap:wrap;} } /* The Instagram button's confirmation. Instagram takes no shared URL, so the button copies the page address and says so; without this the click would look like it had done nothing but open an app. */ .celasta-share-toast{ position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px); z-index:10001;padding:11px 18px;border-radius:999px; background:var(--c-charcoal,#2C2520);color:#fff;font-size:0.78rem; box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease; } .celasta-share-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);} /* ── Share panel: the options view ─────────────────────────────────── Lives in the same dark sheet as the QR view. Clicking Share opens straight to this; QR swaps the view rather than opening a second dialog over the top. */ .csp-view[hidden]{display:none;} .csp-title{ margin:0 0 2px;font-size:0.82rem;letter-spacing:.06em;text-transform:uppercase; color:var(--c-gold,#B89A6A);font-weight:600; } .csp-name{margin:0 0 16px;font-size:0.95rem;color:#fff;font-weight:500;line-height:1.35;} /* Three across on a phone, four with room - the tile is icon over label, so the grid stays legible instead of becoming a cramped icon strip. */ .csp-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; } @media(min-width:420px){ .csp-grid{grid-template-columns:repeat(4,minmax(0,1fr));} } .csp-opt{ display:flex;flex-direction:column;align-items:center;gap:7px; padding:12px 6px;border-radius:12px;text-decoration:none;cursor:pointer; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04); color:#fff;font:inherit; } .csp-opt:hover{border-color:var(--c-gold,#B89A6A);background:rgba(255,255,255,.08);} .csp-opt:focus-visible{outline:2px solid var(--c-gold,#B89A6A);outline-offset:2px;} .csp-opt-i{ width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.08);font-size:0.95rem;color:#fff;flex:0 0 auto; } /* Superseded: chips now carry their own brand colour, and repainting them all gold on hover was what made Facebook and WhatsApp indistinguishable mid-hover. Kept only for the copy/qr tiles, which ARE gold. */ .csp-opt[data-brand="copy"]:hover .csp-opt-i, .csp-opt[data-brand="qr"]:hover .csp-opt-i{background:var(--c-gold,#B89A6A);color:#000;} .csp-opt-l{ font-size:0.66rem;line-height:1.25;text-align:center;color:rgba(255,255,255,.72); /* Two lines maximum, so one long label cannot make the whole row taller. */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* The copy-link tile is a