/* ============================================================ BRIDAL DRY CLEANING EXPERTS — Landing Page Editorial bridal system. Below-the-fold styles. (Critical above-the-fold styles are inlined in .) ============================================================ */ .hero-mobile-img{ display:none; } /* ---- Offer ribbon (v2 — flush under hero) ---- */ .offer-strip{ background:#15110E;color:var(--cream);scroll-margin-top:90px; } .offer-strip-inner{ display:flex;align-items:center;justify-content:space-between; gap:clamp(24px,5vw,72px); padding:clamp(26px,3.4vw,42px) 0; } .offer-strip-main{ display:flex;flex-direction:column;gap:.7rem; } .offer-strip-tag{ font-family:var(--label);font-weight:600; font-size:.84rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l); } .offer-strip-head{ margin:0;font-family:var(--serif);font-weight:500; font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.1;color:var(--cream); display:flex;flex-direction:column;gap:.6rem; } .offer-strip-sub{ font-family:var(--sans);font-weight:400;letter-spacing:0; font-size:1rem;line-height:1.55;color:rgba(250,246,240,.8);max-width:60ch; } .offer-strip-cta{ display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;flex:none; } .offer-strip-cta .btn{ background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600; } .offer-strip-cta .btn:hover{ background:#fff;border-color:#fff;color:var(--ink); } .offer-strip-valid{ font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:rgba(250,246,240,.55); } @media (max-width:760px){ .offer-strip-inner{ flex-direction:column;align-items:flex-start;gap:24px; } .offer-strip-cta{ align-items:stretch;width:100%; } .offer-strip-sub .hide-mobile{ display:none; } } /* ---- Section scaffolding ---- */ .section{ padding:clamp(56px,8vw,108px) 0; } .section.alt{ background:var(--cream-2); } .section.included-section{ background:#fff; } .section.ba-section{ background:#F8F8F8; } .section-head{ max-width:62ch; margin:0 0 clamp(34px,5vw,56px); } .section-head.center{ margin-left:auto;margin-right:auto;text-align:center; } .section-head h2{ font-family:var(--serif);font-weight:500; font-size:clamp(2rem,4.2vw,3.3rem); line-height:1.08;letter-spacing:-.01em; margin:.55rem 0 0;color:var(--ink); } .section-head p.lead{ margin:1rem 0 0;font-size:1.08rem;line-height:1.6; color:var(--ink-soft);max-width:52ch; } .section-head.center p.lead{ margin-left:auto;margin-right:auto; } /* ---- Packages ---- */ .pkg-head{ display:flex;justify-content:space-between;align-items:center;gap:24px; margin-bottom:clamp(22px,3vw,36px); } .pkg-title{ font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em; font-size:clamp(1.9rem,3.2vw,2.9rem);color:var(--ink);margin:0; } @media (min-width:620px){ .pkg-title{ white-space:nowrap; } } .pkg-bleed{ display:flex;gap:22px;align-items:stretch; overflow-x:auto;scroll-snap-type:x proximity; padding:6px var(--pad) 20px;margin:0; scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab; } .pkg-bleed::-webkit-scrollbar{ display:none; } .pkg-bleed.dragging{ cursor:grabbing;scroll-snap-type:none; } @media (min-width:1241px){ .pkg-bleed{ padding-left:calc((100vw - var(--maxw))/2 + var(--pad)); padding-right:0; scroll-padding-left:calc((100vw - var(--maxw))/2 + var(--pad)); } } .pkg-card{ flex:0 0 clamp(300px,32vw,360px); scroll-snap-align:start;min-width:0;position:relative; background:#fff; border:1px solid var(--line);border-radius:12px;overflow:hidden; display:flex;flex-direction:column; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .section.alt .pkg-card{ background:#fff; } .pkg-card .pkg-img{ width:100%;height:360px;flex:none;display:block;margin:0; object-fit:cover;object-position:center 30%; background:var(--cream-2);--bg:var(--cream-2); -webkit-user-drag:none;user-select:none;pointer-events:none; } .pkg-grid.js-carousel, .pkg-grid.js-carousel *{ -webkit-user-drag:none; } .pkg-grid.js-carousel.dragging{ cursor:grabbing; } .pkg-grid.js-carousel.dragging *{ user-select:none; } .pkg-body{ flex:1 1 auto;padding:20px 24px 24px;display:flex;flex-direction:column; } .pkg-card .pkg-name{ font-family:var(--serif);font-weight:600; font-size:1.45rem;color:var(--ink);line-height:1.1; } .pkg-card .pkg-price{ font-family:var(--label);font-weight:500; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gold-text);margin-top:.45rem; } .pkg-card .pkg-price b{ font-size:1.35rem;letter-spacing:0;color:var(--ink);font-family:var(--serif);font-weight:600; } .pkg-rule{ height:1px;background:var(--line);margin:14px 0; } .pkg-card .pkg-desc{ color:var(--ink-soft);font-size:.92rem;line-height:1.6;flex:1; } .pkg-card .pkg-link{ margin-top:18px;font-family:var(--sans);font-weight:600; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink);text-decoration:none; display:inline-flex;align-items:center;gap:.5em; align-self:flex-start; border-bottom:1px solid var(--gold);padding-bottom:3px; transition:gap .25s ease,color .25s ease; } .pkg-card .pkg-link:hover{ gap:.9em;color:var(--gold-text); } /* ---- Preservation add-on + extras row ---- */ .pkg-extras{ display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:stretch; margin-top:clamp(28px,4vw,44px); } @media (min-width:621px){ .pkg-extras .addon-banner{ height:0;min-height:100%; } } .pkg-notes-col{ display:flex;flex-direction:column;gap:14px; } .addon-banner{ display:flex;gap:0;align-items:stretch; background:var(--cream);color:var(--ink);border:1px solid var(--line);border-radius:6px;overflow:hidden; padding:0;margin:0; } .addon-img-wrap{ position:relative;flex:none;cursor:zoom-in; width:clamp(150px,20vw,250px);align-self:stretch; overflow:hidden; } .addon-img-wrap .addon-img{ width:100%;height:100%;display:block;object-fit:cover;object-position:center top; } .addon-zoom-btn{ position:absolute;top:8px;right:8px; width:32px;height:32px;border-radius:6px; background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center; color:#fff;pointer-events:none;transition:background .2s; } .addon-zoom-btn svg{ width:16px;height:16px; } .addon-img-wrap:hover .addon-zoom-btn{ background:rgba(0,0,0,.7); } #addon-lightbox::backdrop{ background:rgba(0,0,0,.82); } background:#2a2522;--bg:#2a2522; } /* ---- Image lightbox ---- */ .img-lightbox{ position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center; background:rgba(10,8,6,.9);padding:40px;cursor:zoom-out; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } .img-lightbox.open{ display:flex; } .img-lightbox img{ max-width:92vw;max-height:88vh;border-radius:8px;object-fit:contain; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); } .img-lightbox-close{ position:absolute;top:24px;right:28px;width:46px;height:46px;border-radius:50%; border:none;cursor:pointer;background:rgba(255,255,255,.16);color:#fff; font-size:1.7rem;line-height:1;display:flex;align-items:center;justify-content:center; } .img-lightbox-close:hover{ background:rgba(255,255,255,.3); } .addon-body{ display:flex;flex-direction:column;flex:1;min-width:0;padding:clamp(18px,2vw,26px); } .addon-tag{ font-family:var(--label);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-text);display:block;margin-bottom:.5rem; } .addon-body h3{ font-family:var(--serif);font-weight:500;line-height:1.08; font-size:clamp(1.35rem,1.9vw,1.75rem);margin:0 0 .45rem;color:var(--ink); } .addon-body p{ margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.5; } .addon-action{ display:flex;align-items:center;gap:18px;margin-top:auto;padding-top:16px;flex-wrap:wrap; } .addon-price{ font-family:var(--label);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text); } .addon-price b{ font-family:var(--serif);font-size:1.4rem;color:var(--ink);letter-spacing:0;font-weight:600; } .pkg-note{ border:1px solid var(--line);background:var(--cream);border-radius:6px; padding:16px 22px;display:flex;flex-direction:column;justify-content:center; } .section.alt .pkg-note{ background:#fff; } .pkg-note .label{ font-family:var(--label);font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;color:var(--gold-text);display:block;margin-bottom:.5rem; } .pkg-note p{ margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.55; } .pkg-note.highlight{ border-color:var(--gold); background:var(--gold-bg); } .pkg-disclaimer{ margin-top:18px;text-align:center;color:var(--ink-soft); font-size:.82rem;line-height:1.55;max-width:74ch;margin-left:auto;margin-right:auto; } /* ---- Included with every package ---- */ .included-wrap{ display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(36px,6vw,80px); align-items:stretch; } .included-copy{ display:flex;flex-direction:column;justify-content:center; } .included-copy h2{ font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em; font-size:clamp(2.1rem,3.6vw,3rem);color:var(--ink);margin:.5rem 0 0; } .included-intro{ font-size:1.1rem;line-height:1.6;color:var(--ink-soft); margin:1rem 0 2rem;max-width:40ch;text-wrap:pretty; } .included-list{ list-style:none;margin:0;padding:0; } .included-list li{ display:flex;gap:20px;align-items:baseline; padding:18px 0;border-bottom:1px solid var(--line); font-size:1.1rem;color:var(--ink);line-height:1.4; } .included-list li:first-child{ padding-top:0; } .included-list li:last-child{ border-bottom:none; } .included-list .num{ flex:none;width:22px;height:22px;margin-top:2px; } .included-list .num svg{ width:22px;height:22px;display:block; } .included-media{ position:relative; } .included-media img{ width:100%;height:100%;min-height:520px;display:block; object-fit:cover;border-radius:8px; } /* ---- Why specialist care ---- */ .specialist-wrap{ display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(32px,6vw,80px); align-items:center; } .specialist-media{ order:-1; } .specialist-copy p{ font-size:1.18rem;line-height:1.7;color:var(--ink-soft);margin:0 0 1.1rem; text-wrap:pretty; } .specialist-copy p:first-of-type{ color:var(--ink); } .specialist-media img{ width:100%;aspect-ratio:3/4;display:block;object-fit:cover;border-radius:8px; } /* ---- Before & after slider carousel ---- */ .ba-bleed{ display:flex;gap:18px;align-items:stretch; overflow-x:auto;scroll-snap-type:x proximity; padding:6px var(--pad) 24px;margin:0; scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab; } .ba-bleed::-webkit-scrollbar{ display:none; } .ba-bleed.dragging{ cursor:grabbing;scroll-snap-type:none; } .ba-bleed.dragging *{ pointer-events:none; } @media (min-width:1241px){ .ba-bleed{ padding-left:calc((100vw - var(--maxw))/2 + var(--pad)); padding-right:calc((100vw - var(--maxw))/2 + var(--pad)); } } .ba-card{ flex:0 0 clamp(300px,32vw,420px);min-width:0; } /* B&A nav arrows */ .ba-nav{ display:flex;justify-content:center;gap:12px;margin-top:22px; } .ba-arrow{ width:44px;height:44px;border-radius:50%; border:1px solid var(--line);background:#fff;color:var(--ink); display:flex;align-items:center;justify-content:center;cursor:pointer; transition:background .2s,border-color .2s,color .2s; } .ba-arrow svg{ width:20px;height:20px; } .ba-arrow:hover{ background:var(--ink);border-color:var(--ink);color:var(--cream); } .ba-slide{ position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:10px; --pos:50%;background:#2a2522;border:1px solid var(--line); touch-action:pan-y;user-select:none; } .ba-slide img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; -webkit-user-drag:none;user-select:none;pointer-events:none; } .ba-before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); } .ba-divider{ position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff; transform:translateX(-1px);box-shadow:0 0 6px rgba(0,0,0,.35);z-index:3; } .ba-handle{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:42px;height:42px;border-radius:50%;background:#fff;color:var(--ink); display:flex;align-items:center;justify-content:center;cursor:ew-resize; box-shadow:0 2px 12px rgba(0,0,0,.4); } .ba-handle svg{ width:20px;height:20px; } .ba-badge{ position:absolute;bottom:14px;z-index:2; font-family:var(--label);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; padding:6px 12px;border-radius:4px;color:#fff; } .ba-badge.before{ left:14px;background:rgba(27,23,20,.8); } .ba-badge.after{ right:14px;background:var(--gold-text); } /* ---- How it works ---- */ .steps-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px; } .step-card{ background:#fff;border:1px solid var(--line);border-radius:14px; padding:32px 30px;display:flex;flex-direction:column;gap:14px;position:relative; } .section.alt .step-card{ background:#fff; } .step-top{ display:flex;align-items:center;justify-content:space-between; } .step-ic{ width:54px;height:54px;border-radius:50%;flex:none; background:var(--gold-bg);border:1px solid var(--gold);color:var(--gold-text); display:flex;align-items:center;justify-content:center; } .step-ic svg{ width:26px;height:26px; } .step-num{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:2.8rem;color:var(--line);line-height:1; } .step-card h3{ font-family:var(--serif);font-weight:600;font-size:1.5rem; color:var(--ink);margin:0; } .step-card p{ color:var(--ink-soft);font-size:1rem;line-height:1.6;margin:0; } .step-connector{ display:none; } /* ---- USPs (NOT a carousel) ---- */ .section.usp-section{ background:#FAF9F7; } .usp-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,40px);border:none;background:none; } .usp-cell{ background:none;padding:0; } .usp-cell .usp-icon{ width:52px;height:52px;display:flex;align-items:center;justify-content:center; border-radius:50%;border:1px solid var(--gold);color:var(--gold-text); margin-bottom:18px; } .usp-cell .usp-icon svg{ width:26px;height:26px; } .usp-cell h3{ font-family:var(--serif);font-weight:600;font-size:1.3rem; color:var(--ink);margin:0 0 .55rem;line-height:1.18; } .usp-cell p{ color:var(--ink-soft);font-size:.98rem;line-height:1.6;margin:0; } /* ---- Testimonials (auto-loop carousel) ---- */ .rev-viewport{ position:relative; } .rev-track{ display:flex;gap:18px;align-items:stretch; overflow-x:auto;overflow-y:hidden; padding:6px clamp(14px,2vw,28px) 26px; scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab; } .rev-track::-webkit-scrollbar{ display:none; } .rev-track.dragging{ cursor:grabbing; } .rev-track.dragging *{ pointer-events:none; } .rev-card{ flex:0 0 calc((100vw - 56px)/4.5 - 14px); background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:none; padding:26px 26px 22px;display:flex;flex-direction:column; } .rev-head{ display:flex;align-items:center;gap:13px;margin-bottom:18px; } .rev-avatar{ width:38px;height:38px;border-radius:50%;flex:none; background:var(--av,#999);color:#fff; display:flex;align-items:center;justify-content:center; font-family:var(--sans);font-weight:600;font-size:1rem; } .rev-name{ font-family:var(--sans);font-weight:600;font-size:1.04rem;color:var(--ink);line-height:1.2;flex:1;min-width:0; } .rev-src{ flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center; } .rev-src svg{ width:24px;height:24px;display:block; } .rev-stars{ display:inline-flex;gap:5px;margin-bottom:16px; } .rev-stars i{ width:19px;height:19px;background:#E57029;display:block; clip-path:polygon(50% 0,63% 33%,98% 35%,70% 58%,80% 92%,50% 71%,20% 92%,30% 58%,2% 35%,37% 33%); } .rev-text{ margin:0;color:#3a3a3a;font-family:var(--sans);font-size:1rem;line-height:1.62; display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden; } .rev-card.open .rev-text{ -webkit-line-clamp:unset;overflow:visible; } .rev-more{ align-self:flex-start;margin-top:12px;padding:0;background:none;border:none;cursor:pointer; font-family:var(--sans);font-weight:600;font-size:.85rem;color:var(--gold-text); text-decoration:underline;text-underline-offset:3px;display:none; } .rev-more.show{ display:inline-block; } .rev-arrow{ position:absolute;top:50%;transform:translateY(-50%); width:50px;height:50px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--ink); background:rgba(255,255,255,.85);border:1px solid var(--line); -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%); box-shadow:0 8px 24px -8px rgba(27,23,20,.4); opacity:0;pointer-events:none;transition:opacity .25s ease,background .2s ease;z-index:3; } .rev-arrow.prev{ left:14px; } .rev-arrow.next{ right:14px; } .rev-viewport:hover .rev-arrow{ opacity:1;pointer-events:auto; } .rev-arrow:hover{ background:#fff;border-color:var(--gold); } @media (max-width:1100px){ .rev-card{ flex-basis:calc((100vw - 56px)/2.4 - 14px); } } @media (max-width:680px){ .rev-card{ flex-basis:82%; } .rev-arrow{ display:none; } } /* ---- Service areas ---- */ .section.areas-section{ background:#fff;padding-top:clamp(24px,3.5vw,48px); } @media (min-width:620px){ .areas-section h2{ white-space:nowrap; } } .areas-map{ margin-bottom:28px; } .areas-map iframe{ width:100%;height:clamp(320px,40vw,460px);display:block; border:1px solid var(--line);border-radius:10px; filter:grayscale(.25); } .areas-list{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center; } .areas-list span{ display:inline-flex;align-items:center;gap:7px; font-family:var(--label);font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-soft); border:1px solid var(--line);padding:9px 15px;background:#F4F3F1;border-radius:4px; } .areas-list span svg{ width:15px;height:15px;color:var(--gold-text);flex:none; } .areas-list .areas-more{ color:var(--gold-text);border-color:var(--gold);background:var(--gold-bg);font-style:normal; } /* ---- FAQ ---- */ #faq.section{ padding-top:clamp(24px,3.5vw,48px); } .faq-list{ max-width:820px;margin:0 auto;border-top:1px solid var(--line); } .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%;background:none;border:none;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:24px; padding:26px 4px;text-align:left; font-family:var(--serif);font-weight:600;font-size:1.28rem;color:var(--ink); } .faq-q .faq-icon{ flex:none;width:26px;height:26px;position:relative; } .faq-q .faq-icon::before,.faq-q .faq-icon::after{ content:"";position:absolute;background:var(--gold); transition:transform .3s ease,opacity .3s ease; } .faq-q .faq-icon::before{ top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%); } .faq-q .faq-icon::after{ left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%); } .faq-item.open .faq-q .faq-icon::after{ transform:translateX(-50%) scaleY(0); } .faq-a{ overflow:hidden;max-height:0;transition:max-height .35s ease; } .faq-a p{ margin:0;padding:0 4px 28px;color:var(--ink-soft); font-size:1.04rem;line-height:1.7;max-width:70ch; } /* ---- Final CTA ---- */ .final-cta{ background:linear-gradient(180deg,#F6F1E8 0%,#EFE8DC 100%); color:var(--ink);text-align:center; padding:clamp(46px,6.5vw,80px) 24px; } .final-cta .eyebrow{ color:var(--gold-text); } .final-cta h2{ font-family:var(--serif);font-weight:500;color:var(--ink-warm); font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.04; margin:.2rem auto .8rem;max-width:18ch;letter-spacing:-.01em; } .final-cta p{ color:var(--ink-soft);max-width:46ch;margin:0 auto 1.8rem; font-size:1.08rem;line-height:1.55;text-wrap:pretty; } .final-cta-actions{ display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap; } .call-or{ font-family:var(--sans);font-weight:400;font-size:.88rem;color:var(--ink-soft); margin-right:4px; } .final-cta-call{ display:inline-flex;align-items:center;gap:7px; font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--ink); transition:color .2s ease;text-decoration:none; } .final-cta-call,.final-cta-call *{ text-decoration:none; } .final-cta-call svg{ width:17px;height:17px;color:var(--gold-text); } .final-cta-call:hover{ color:var(--gold-text); } .final-cta-trust{ list-style:none;margin:42px 0 0;padding:0; display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap; font-family:var(--label);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft); } .final-cta-trust li{ display:flex;align-items:center;gap:22px; } .final-cta-trust li + li::before{ content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg); display:inline-block; } /* ---- Footer ---- */ .site-footer{ background:#EFE8DC; color:var(--ink-soft); padding:26px 0; } .footer-row{ display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;border-top:1px solid rgba(27,23,20,.12);padding-top:24px; } .site-footer .f-logo{ height:38px;width:auto;flex:none; } .footer-info{ display:flex;align-items:center;gap:clamp(16px,2vw,28px);flex-wrap:wrap;font-size:.9rem; } .footer-copy{ margin-left:auto;font-size:.8rem;color:var(--ink-soft);white-space:nowrap; } .site-footer a{ color:var(--ink);text-decoration:none;transition:color .2s ease; } .site-footer a:hover{ color:var(--gold-text); } .site-footer a{ color:rgba(250,246,240,.82);text-decoration:none;transition:color .2s ease; } .site-footer a:hover{ color:var(--gold-l); } /* ---- Carousel scaffold (active on mobile only) ---- */ .carousel-head{ display:flex;justify-content:space-between;align-items:flex-end;gap:20px; } .carousel-nav{ display:none;gap:10px; } .carousel-nav.always{ display:flex; } .carousel-nav.always button{ width:38px;height:38px;border-color:var(--line);color:var(--ink-soft);font-size:1rem; } .carousel-nav.always button:hover{ background:var(--ink);border-color:var(--ink);color:var(--cream); } .carousel-nav button{ width:46px;height:46px;border:1px solid var(--ink);background:transparent; color:var(--ink);cursor:pointer;display:grid;place-items:center; font-size:1.1rem;transition:background .2s ease,color .2s ease;border-radius:50%; } .carousel-nav button:hover{ background:var(--ink);color:var(--cream); } .carousel-nav button:disabled{ opacity:.3;cursor:default; } .carousel-nav button:disabled:hover{ background:transparent;color:var(--ink); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:980px){ .steps-grid{ grid-template-columns:repeat(3,1fr); } .included-wrap,.specialist-wrap,.areas-wrap{ grid-template-columns:1fr; } .included-media,.specialist-media{ order:-1; } .included-media img{ min-height:380px; } .pkg-extras{ grid-template-columns:1fr; } .usp-grid{ grid-template-columns:repeat(2,1fr); } .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:768px){ .section{ padding:48px 0; } .section-head{ margin-bottom:30px; } /* Carousel activation */ .carousel-nav{ display:flex; } .carousel{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory; gap:14px;margin:0 calc(-1*var(--pad));padding:4px var(--pad) 14px; -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab; } .carousel::-webkit-scrollbar{ display:none; } .carousel.dragging{ cursor:grabbing;scroll-snap-type:none; } .carousel.dragging *{ pointer-events:none; } .carousel > *{ scroll-snap-align:start;flex:0 0 82%;min-width:0; } /* override grids that become carousels */ .pkg-grid.carousel,.steps-grid.carousel{ grid-template-columns:none; } .pkg-meta{ grid-template-columns:1fr; } /* USPs stay a grid — just stack to 1 col, NO carousel */ .usp-grid{ grid-template-columns:1fr; } .usp-cell{ padding:0; } /* Full-width CTAs */ .btn{ width:100%;justify-content:center; } .hero-actions{ width:100%; } .hero-actions .btn{ width:100%; } .ba-cap{ padding:14px 18px; } .footer-grid{ grid-template-columns:1fr;gap:32px; } .footer-bar{ flex-direction:column;gap:14px; } .faq-q{ font-size:1.12rem;padding:22px 2px; } } @media (max-width:620px){ .pkg-extras{ grid-template-columns:1fr; } } @media (max-width:560px){ .addon-banner{ flex-direction:column; } .addon-banner .addon-img{ width:100%;height:200px;align-self:auto; } } @media (max-width:420px){ .carousel > *{ flex-basis:84%; } } /* Reduced motion */ @media (prefers-reduced-motion:reduce){ *{ animation:none!important;transition:none!important;scroll-behavior:auto!important; } } /* ============================================================ MOBILE PATCH — 1.2 card carousels for non-USP grids, full-width CTAs, tighter padding for compact mobile ============================================================ */ @media (max-width: 768px){ :root{ --pad: 18px; } .container{ padding:0 var(--pad); } .section{ padding:42px 0; } .section-head{ margin-bottom:24px; } .section-head h2{ font-size:clamp(1.7rem,7.6vw,2.4rem); } .section-head p.lead{ font-size:.98rem; } /* Activate pkg + steps as 1.2-card carousels (drag/swipe + arrows) */ .pkg-grid.js-carousel, .steps-grid.js-carousel{ display:flex !important; grid-template-columns:none !important; overflow-x:auto;scroll-snap-type:x mandatory; gap:12px; padding:4px var(--pad) 14px; margin:0; scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab; } .pkg-grid.js-carousel::-webkit-scrollbar, .steps-grid.js-carousel::-webkit-scrollbar{ display:none; } .pkg-grid.js-carousel.dragging, .steps-grid.js-carousel.dragging{ cursor:grabbing;scroll-snap-type:none; } .pkg-grid.js-carousel > *, .steps-grid.js-carousel > *{ scroll-snap-align:start; flex:0 0 calc(83.333% - 10px); /* 1.2 cards visible */ min-width:0; } .pkg-card .pkg-img{ height:280px; } /* B&A carousel — 1.2 cards */ .ba-bleed{ padding:6px var(--pad) 20px;gap:12px; } .ba-bleed > .ba-card{ flex:0 0 calc(83.333% - 10px) !important; } /* Reviews carousel — 1.2 cards */ .rev-track{ padding:6px var(--pad) 20px;gap:12px; } .rev-card{ flex:0 0 calc(83.333% - 10px) !important; } /* Always-visible arrows on the package & step carousels */ .carousel-nav{ display:flex !important; } .pkg-head{ flex-wrap:wrap;gap:14px; } .pkg-title{ font-size:1.7rem;white-space:normal !important; } /* B&A arrows always visible on mobile */ .ba-nav{ margin-top:14px; } /* Reviews arrows always visible on mobile */ .rev-arrow{ display:flex !important;opacity:1 !important;pointer-events:auto !important; width:42px;height:42px; } .rev-arrow.prev{ left:6px; } .rev-arrow.next{ right:6px; } /* Full-width CTAs */ .btn{ width:100%;justify-content:center;padding:16px 24px; } .hero-actions, .hero-actions .btn{ width:100%; } .offer-strip-cta .btn, .final-cta-actions .btn, .included-copy .btn, .addon-action .btn{ width:100%; } .addon-action{ flex-direction:column;align-items:stretch;gap:12px; } .addon-action .addon-price{ text-align:left; } .pkg-link{ width:auto; } /* Tighter spacing */ .hero{ min-height:auto;padding:96px 0 36px; } .hero-trust{ margin-top:1.6rem;gap:14px; } .hero-trust .trust-points{ gap:12px; } .hero-copy{ max-width:100%; } .hero h1{ margin-bottom:1.1rem; } .hero .subhead{ margin-bottom:1.2rem;font-size:1rem; } .rating-badge.hero-badge{ width:100%; } .offer-strip-inner{ padding:40px 0 36px;text-align:center;align-items:center !important; } .offer-strip-main{ align-items:center;text-align:center; } .offer-strip-tag{ align-self:center; } .offer-strip-head{ font-size:1.4rem; } .offer-strip-sub{ text-align:center; } .included-list li{ font-size:1rem;padding:14px 0;gap:14px; } .included-copy h2, .specialist-copy h2{ font-size:1.8rem; } .specialist-copy p{ font-size:1.02rem;line-height:1.6; } .included-media img{ min-height:280px; } .step-card{ padding:24px 22px; } .step-card h3{ font-size:1.25rem; } .usp-cell h3{ font-size:1.15rem; } .areas-list{ gap:8px; } .areas-list span{ font-size:.66rem;padding:7px 12px;letter-spacing:.08em; } .faq-q{ font-size:1.05rem;padding:20px 2px;gap:14px; } .faq-a p{ font-size:.98rem; } .final-cta-actions{ flex-direction:column;gap:14px; } .final-cta-call{ justify-content:center; } .final-cta .eyebrow{ font-size:.7rem; } .final-cta h2{ font-size:1.9rem; } .final-cta p{ font-size:1rem; } .footer-row{ flex-direction:column;align-items:flex-start;gap:14px; } .footer-copy{ margin-left:0; } .topbar{ font-size:.6rem;padding:8px 12px;gap:10px; } .topbar .hide-mobile{ display:none; } } @media (max-width: 480px){ .pkg-grid.js-carousel > *, .steps-grid.js-carousel > *, .ba-bleed > .ba-card, .rev-card{ flex-basis: calc(83.333% - 8px) !important; } } /* ============================================================ MOBILE REFINEMENTS — targeted per-section polish ============================================================ */ /* Logo swap default (desktop) */ .site-logo-mobile{ display:none; } .site-logo-desktop{ display:inline-block; } .mobile-only{ display:none; } @media (max-width:768px){ /* ----- Header: mobile logo + icon-only outline phone ----- */ .site-logo-desktop{ display:none; } .site-logo-mobile{ display:inline-block; height:44px;width:auto; } .header-nav{ display:flex !important;gap:10px; } .header-nav .navlink{ display:none; } .header-phone{ display:inline-flex !important; padding:0;width:44px;height:42px;border-radius:999px;flex:none; border:1px solid var(--ink);background:transparent;color:var(--ink); align-items:center;justify-content:center; } .header-phone b{ display:none; } .header-phone svg{ width:18px;height:18px; } .header-cta{ padding:11px 18px;font-size:.66rem; } /* ----- HERO ----- */ .hero{ background-image:none !important;background-color:#F0EFEB !important; min-height:0;padding:90px 0 28px; } .hero::before, .hero::after{ display:none; } .hero-copy{ max-width:100%;width:100%; } .hero h1{ font-size:clamp(2.8rem,12vw,4rem); line-height:1.08;margin-bottom:1rem;padding-top:18px; } .hero h1 .hero-br{ display:none !important; } .hero-trust{ margin-top:1.4rem;gap:18px;align-items:stretch;position:relative;z-index:2; } .rating-badge.hero-badge{ width:auto !important;align-self:flex-start;justify-content:flex-start; } .hero-mobile-img{ display:block;width:calc(100% + 2*var(--pad));aspect-ratio:1/1;height:auto; margin:24px calc(-1*var(--pad)) 0; max-width:none; object-fit:cover;object-position:100% 25%; border-radius:0; } .hero{ padding-bottom:0 !important;position:relative;overflow:hidden; } .hero .container{ padding-bottom:0; } /* ----- Offer strip ----- */ .offer-strip-head{ font-size:2.1rem;line-height:1.1; } .offer-strip-cta{ align-items:center !important;text-align:center; } .offer-strip-valid{ text-align:center;width:100%; } /* ----- Bigger section headings ----- */ .section-head h2, .included-copy h2, .specialist-copy h2, .pkg-title, .final-cta h2{ font-size:2.2rem !important;line-height:1.08; } .pkg-title{ font-size:2.2rem !important; } .final-cta h2{ font-size:2.5rem !important; } /* ----- Packages section ----- */ .pkg-head .carousel-nav{ display:none !important; } .carousel-nav-below{ display:flex !important;justify-content:center;gap:12px; margin:14px 0 0; } .carousel-nav-below button{ border-color:var(--line) !important;color:var(--ink-soft) !important; } /* Preservation banner: image full width on mobile */ .addon-banner{ flex-direction:column;border-radius:8px; } .addon-img-wrap{ width:100% !important;height:260px;align-self:auto;pointer-events:none;cursor:default; } .addon-img-wrap .addon-zoom-btn{ display:none !important; } .addon-img-wrap .addon-img{ width:100%;height:100%;object-position:center 60% !important; } .addon-body{ padding:20px; } .addon-body h3{ font-size:1.6rem; } /* ----- Every Clean Includes: image under CTA, edge-to-edge + separators ----- */ .included-wrap{ display:flex !important;flex-direction:column; } .included-media{ order:99 !important;margin:24px calc(-1*var(--pad)) -42px; } .included-media img{ border-radius:0;min-height:0;height:340px;width:100%;object-fit:cover;object-position:center 85%; } .included-list li:first-child{ padding-top:18px;border-top:1px solid var(--line); } .included-list li:last-child{ border-bottom:1px solid var(--line); } /* ----- Couture Care ----- */ .specialist-wrap{ display:flex !important;flex-direction:column;padding-top:28px; } .specialist-copy .section-head{ margin-bottom:16px !important; } .specialist-copy p:last-child{ margin-bottom:6px; } .specialist-media{ order:99 !important;margin:8px calc(-1*var(--pad)) -42px;width:calc(100% + 2*var(--pad)); } .specialist-media img{ border-radius:0;width:100%;height:320px;aspect-ratio:auto;object-fit:cover; } .section.ba-section{ padding-top:56px; } /* ----- How It Works: arrows below + centred ----- */ .carousel-head .carousel-nav[data-nav-for="how-carousel"]{ display:none !important; } #how .section-head .btn{ width:100%; } /* ----- Trusted Bridal Specialists ----- */ .usp-section{ padding-top:72px; } .usp-section .section-head.center{ text-align:left !important;margin-left:0;margin-right:0; } .usp-section .section-head.center p.lead{ margin-left:0;margin-right:0; } .usp-grid{ gap:36px !important; } .usp-cell .usp-icon{ width:44px;height:44px;margin-bottom:14px; } .usp-cell .usp-icon svg{ width:22px;height:22px; } .usp-cell h3{ font-size:1.32rem !important; } /* ----- What Brides Say: badge wraps to content, arrows under ----- */ #reviews .section-head .rating-badge{ display:inline-flex;width:auto;justify-content:flex-start; } #reviews .section-head > div[style*="justify-content:center"]{ justify-content:center !important; } .rev-viewport{ padding-bottom:64px; } .rev-arrow{ position:absolute !important;top:auto !important;bottom:0 !important; transform:none !important;display:flex !important; opacity:1 !important;pointer-events:auto !important; width:44px;height:44px;box-shadow:none !important; } .rev-arrow.prev{ left:calc(50% - 52px) !important;right:auto !important; } .rev-arrow.next{ right:calc(50% - 52px) !important;left:auto !important; } /* ----- FAQ question size ----- */ .faq-q{ font-size:1.18rem !important; } /* ----- Final CTA ----- */ .final-cta-actions .btn, .hero-actions .btn{ white-space:nowrap;padding:16px 18px;font-size:.74rem;letter-spacing:.1em; } .final-cta-trust{ flex-direction:column;align-items:flex-start;gap:10px; width:max-content;max-width:100%;margin:32px auto 0; } .final-cta-trust li{ gap:12px; } .final-cta-trust li:first-child::before{ content:"";width:5px;height:5px;background:var(--gold); transform:rotate(45deg);display:inline-block;flex:none; } /* ----- Footer centred ----- */ .footer-row{ flex-direction:column !important;align-items:center !important; text-align:center;gap:14px; } .site-footer .f-logo{ height:42px; } .footer-copy{ margin-left:0 !important; } } @media (max-width:768px){ .rating-badge.hero-badge{ background:rgba(255,255,255,.85); border:1px solid rgba(27,23,20,.18); box-shadow:0 2px 10px rgba(27,23,20,.08); } } @media (max-width:768px){ .pkg-head{ padding-top:18px; } }