/* ========================================================================== snapXP homepage prototype Brand system: pink #f92c8b -> purple #b02cd6 -> violet #5d22b8 Display: Krona One UI/body: Roboto Motion metaphors: camera flash, shutter snap, instant share, live feed. No print / photo-strip / paper metaphors anywhere. ========================================================================== */ /* ---------- tokens ---------- */ :root{ --pink:#f92c8b; /* WCAG-passing text version of the brand pink for use on white/near-white backgrounds. #f92c8b only reaches 3.64:1 on #fff (fails the 4.5:1 text minimum); #d61074 is the same hue family, darkened, and reaches 5.02:1. Use this for PINK TEXT on light backgrounds only -- gradients, buttons, backgrounds, borders, focus rings and pink text on dark/gradient backgrounds should keep using --pink, which already passes there. */ --pink-ink:#d61074; --purple:#b02cd6; --violet:#5d22b8; --grad:linear-gradient(122deg,#f92c8b 0%,#b02cd6 58%,#5d22b8 100%); --grad-flat:linear-gradient(96deg,#f92c8b 0%,#b02cd6 100%); --ink:#1c174f; --ink-2:#2a2262; --body:#4a466b; --muted:#6f6b8d; --line:#e9e6f3; --line-2:#dcd7ed; --bg:#ffffff; --soft:#f8f6fc; --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --shadow-1:0 1px 2px rgba(28,23,79,.05), 0 6px 18px rgba(28,23,79,.06); --shadow-2:0 2px 6px rgba(28,23,79,.06), 0 18px 44px rgba(28,23,79,.11); --shadow-3:0 30px 70px rgba(28,23,79,.20); --ease:cubic-bezier(.16,.84,.44,1); --spring:cubic-bezier(.34,1.4,.5,1); --wrap:1200px; --pad:28px; --display:'Krona One','Arial Black','Helvetica Neue',Arial,sans-serif; --sans:'Roboto',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} /* overflow-x lives on only. Putting it on turns the body into a scroll container and silently kills position:sticky on the header. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} body{ margin:0; background:var(--bg); color:var(--body); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } @supports (overflow:clip){ html{overflow-x:clip} body{overflow-x:clip} } img,svg{max-width:100%} img{display:block;height:auto} h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input{font:inherit} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:#fff;color:var(--ink);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700; } .skip:focus{left:0} :focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:4px} /* anchor jumps must clear the pinned primary bar */ section[id],main[id]{scroll-margin-top:92px} @media (max-width:1000px){section[id],main[id]{scroll-margin-top:78px}} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} .wrap--narrow{max-width:880px} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase; line-height:1;padding:17px 28px;border-radius:999px; border:2px solid transparent;white-space:nowrap; transition:transform .32s var(--spring), box-shadow .32s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); will-change:transform; } .btn--sm{font-size:12px;padding:14px 22px;letter-spacing:.13em} /* background-origin:border-box: the gradient must fill the 2px transparent border too, or it tiles there and shows a purple/pink sliver at each end */ .btn--grad{background-image:var(--grad-flat);background-origin:border-box;color:#fff;box-shadow:0 8px 22px rgba(176,44,214,.30)} .btn--grad:hover{transform:translateY(-3px) scale(1.028);box-shadow:0 16px 34px rgba(176,44,214,.40)} .btn--grad:active{transform:translateY(-1px) scale(.99)} .btn--white{background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(20,4,40,.28)} .btn--white:hover{transform:translateY(-3px) scale(1.028);box-shadow:0 18px 40px rgba(20,4,40,.36)} .btn--ghost{color:#fff;border-color:rgba(255,255,255,.7)} .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-3px) scale(1.028)} .btn--line{color:var(--ink);border-color:var(--line-2);background:#fff} .btn--line:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-3px) scale(1.028)} /* ========================================================================== HEADER ========================================================================== */ /* The whole header sticks, offset upward by the height of the utility strip, so the strip scrolls away and the primary bar pins on its own. Sticking the bar alone would not work: a sticky element only travels inside its parent's box, and the header box is barely taller than the bar itself. */ .site-head{ position:sticky;top:calc(0px - var(--utilH,0px)); z-index:60;background:#fff; } .utility{background:#fff;border-bottom:1px solid var(--line)} .utility__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:40px;padding-top:6px;padding-bottom:6px} .utility__area{ font-size:12.5px;color:var(--muted);letter-spacing:.005em; display:flex;align-items:center;gap:8px;line-height:1.4; } .utility__pin{ flex:0 0 auto;width:11px;height:11px;border-radius:50% 50% 50% 0; transform:rotate(-45deg);background-image:var(--grad-flat); } .utility__nav{display:flex;align-items:center;gap:4px;flex:0 0 auto} .utility__nav > a,.drop__btn{ display:inline-flex;align-items:center;gap:6px; font-size:12.5px;font-weight:500;color:var(--ink-2); padding:7px 11px;border-radius:999px; transition:background-color .2s var(--ease),color .2s var(--ease); } .utility__nav > a:hover,.drop__btn:hover{background:var(--soft);color:var(--pink-ink)} /* dropdowns */ .drop{position:relative} .drop__caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)} .drop[data-open="1"] .drop__caret{transform:translateY(1px) rotate(-135deg)} .drop__menu{ position:absolute;top:calc(100% + 10px);right:0;min-width:230px; background:#fff;border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-2);padding:8px; opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right; transition:opacity .22s var(--ease),transform .28s var(--spring),visibility .22s; z-index:70; } .drop[data-open="1"] .drop__menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .drop__menu a{display:block;padding:10px 12px;border-radius:var(--r-sm);font-size:14px;color:var(--ink-2);transition:background-color .18s,color .18s} .drop__menu a:hover{background:var(--soft);color:var(--pink-ink)} .drop__menu--wide{min-width:340px;left:0;right:auto;transform-origin:top left} .drop__menu--wide a strong{display:block;font-size:14.5px;font-weight:700;color:var(--ink)} .drop__menu--wide a span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px} .drop__menu--wide a:hover strong{color:var(--pink-ink)} .bar{background:#fff;position:relative;z-index:2;border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)} .bar.is-stuck{box-shadow:0 6px 24px rgba(28,23,79,.09)} .bar__in{display:flex;align-items:center;gap:26px;min-height:76px} .brand{flex:0 0 auto;display:flex;align-items:center} .brand__logo{width:126px;height:auto;color:var(--ink);display:block;transition:transform .35s var(--spring)} .brand:hover .brand__logo{transform:scale(1.04)} .brand__logo--foot{color:#fff;width:132px} .mainnav{display:flex;align-items:center;gap:2px;margin-left:auto} .mainnav > a,.mainnav .drop__btn{ position:relative;display:inline-flex;align-items:center;gap:6px; font-size:14.5px;font-weight:500;color:var(--ink-2); padding:10px 14px;border-radius:999px; transition:color .2s var(--ease),background-color .2s var(--ease); } .mainnav > a::after{ content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px; background-image:var(--grad-flat);transform:scaleX(0);transform-origin:left; transition:transform .34s var(--ease); } .mainnav > a:hover{color:var(--pink-ink)} .mainnav > a:hover::after{transform:scaleX(1)} .mainnav .drop__btn:hover{color:var(--pink-ink);background:var(--soft)} .bar__cta{flex:0 0 auto} .burger{display:none;flex:0 0 auto;width:46px;height:46px;border-radius:12px;position:relative;margin-left:auto} .burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);transition:transform .32s var(--ease),opacity .2s var(--ease)} .burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:22px} .burger span:nth-child(3){top:28px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ========================================================================== MOBILE MENU ========================================================================== */ .mmenu{ position:fixed;inset:0;z-index:120;background:#fff; display:flex;flex-direction:column;overflow-y:auto; -webkit-overflow-scrolling:touch; } .mmenu[hidden]{display:none} .html-lock,body.is-locked{overflow:hidden} .mmenu__head{ display:flex;align-items:center;justify-content:space-between; padding:18px var(--pad);border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2; } .mmenu__head .brand__logo{width:112px} .mmenu__close{width:44px;height:44px;border-radius:12px;position:relative;background:var(--soft)} .mmenu__close::before,.mmenu__close::after{content:"";position:absolute;left:13px;right:13px;top:21px;height:2px;background:var(--ink);border-radius:2px} .mmenu__close::before{transform:rotate(45deg)} .mmenu__close::after{transform:rotate(-45deg)} .mmenu__body{padding:22px var(--pad) 132px} .mmenu__label{ font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--muted);margin:26px 0 12px; } .mmenu__label:first-child{margin-top:4px} .mcard{ display:flex;align-items:center;gap:16px;padding:12px;margin-bottom:12px; border:1px solid var(--line);border-radius:var(--r);background:#fff; box-shadow:var(--shadow-1);transition:transform .3s var(--spring),box-shadow .3s var(--ease); } .mcard:active{transform:scale(.985)} .mcard__photo{flex:0 0 auto;width:72px;height:72px;border-radius:12px;background-size:cover;background-position:center} .mcard__text{display:block;min-width:0} .mcard__text strong{display:block;font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.25} .mcard__text span{ display:inline-block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; background-image:var(--grad-flat);-webkit-background-clip:text;background-clip:text;color:transparent; } .mmenu__links{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px} .mmenu__links a{padding:11px 0;font-size:16px;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--line)} .mmenu__links--quiet a{font-size:14.5px;color:var(--muted);font-weight:400} /* the menu CTA mirrors the header button so the primary action is reachable without scrolling the menu, and repeats once at the foot as a quiet outline */ .mmenu__cta{display:flex;width:100%;margin:2px 0 4px} .mmenu__cta--foot{margin:28px 0 0} .mmenu__foot{margin-top:14px;font-size:13.5px;color:var(--muted)} .mmenu__foot a{color:var(--pink-ink);font-weight:500} /* ========================================================================== HERO ========================================================================== */ .hero{ position:relative;isolation:isolate;overflow:hidden; min-height:clamp(560px,80vh,760px); display:flex;align-items:center; padding:76px 0 92px; background:#2b0d44; } .hero__layer{position:absolute;inset:0;display:block;pointer-events:none} .hero__photo{ /* pages override --heroimg / --heropos inline; the homepage shot is the default */ background-image:var(--heroimg,url('/wp-content/uploads/2023/02/snapXP_photo_booth_1.jpg')); background-size:cover;background-position:var(--heropos,center 36%); transform:scale(1.08); } .hero__wash{ background:linear-gradient(122deg,rgba(249,44,139,.72) 0%,rgba(176,44,214,.66) 52%,rgba(93,34,184,.74) 100%); } .hero__glow{ background: radial-gradient(46% 52% at 18% 22%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 62%), radial-gradient(42% 46% at 84% 74%, rgba(255,64,150,.42) 0%, rgba(255,64,150,0) 66%); } .hero__confetti{ opacity:.5; background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) 0 1.4px, transparent 1.6px), radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 2.1px, transparent 2.3px), radial-gradient(circle at 50% 50%, rgba(255,214,240,.6) 0 1.1px, transparent 1.3px); background-size:74px 74px,127px 127px,53px 53px; background-position:0 0,31px 18px,12px 41px; -webkit-mask-image:radial-gradient(58% 62% at 34% 50%, transparent 0%, transparent 42%, #000 88%); mask-image:radial-gradient(58% 62% at 34% 50%, transparent 0%, transparent 42%, #000 88%); } .hero__scrim{ background:linear-gradient(180deg,rgba(24,4,44,.42) 0%,rgba(24,4,44,.12) 34%,rgba(24,4,44,.30) 72%,rgba(24,4,44,.58) 100%); } .hero__flash{background:#fff;opacity:0;mix-blend-mode:screen} .hero__inner{ position:relative;z-index:2; display:grid;grid-template-columns:minmax(0,1fr); gap:0;align-items:center; } .hero__copy{max-width:780px} .hero__eyebrow{ display:flex;align-items:center;gap:14px; font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#fff; margin-bottom:18px; } .hero__eyebrow span{display:block;width:26px;height:2px;border-radius:2px} .hero__eyebrow span:first-child{background:linear-gradient(90deg,rgba(255,255,255,0),#fff)} .hero__eyebrow span:last-child{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))} .hero__display{ font-family:var(--display);color:#fff;line-height:1.02;text-transform:uppercase; filter:drop-shadow(0 8px 26px rgba(28,4,48,.5)); margin-bottom:22px; } .hero__display-sm{display:block;font-size:clamp(20px,3vw,34px);letter-spacing:.01em;opacity:.94} .hero__display-lg{display:block;font-size:clamp(54px,10.5vw,132px);letter-spacing:-.005em} .hero__title{ font-size:clamp(16.5px,1.55vw,21px);font-weight:400;line-height:1.55;color:#fff; max-width:640px;text-wrap:balance;margin-bottom:30px; text-shadow:0 2px 14px rgba(24,4,44,.45); } .hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px} .hero__factlink{ color:#fff;font-weight:700;text-decoration:underline; text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.55); } .hero__factlink:hover{text-decoration-color:#fff} .hero__facts{display:flex;flex-wrap:wrap;gap:10px 22px} .hero__facts li{ position:relative;padding-left:24px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.94); text-shadow:0 1px 10px rgba(24,4,44,.5); } .hero__facts li::before{ content:"";position:absolute;left:0;top:.48em;width:13px;height:8px; border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg); } /* live gallery feed card */ .feed{ justify-self:end;width:100%;max-width:390px; background:rgba(28,6,50,.42); -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(255,255,255,.24); border-radius:var(--r-lg);padding:16px; box-shadow:0 34px 80px rgba(18,2,38,.45); } .feed__head{display:flex;align-items:center;gap:9px;padding:2px 4px 13px} .feed__dot{width:9px;height:9px;border-radius:50%;background:#37e39a;box-shadow:0 0 0 4px rgba(55,227,154,.22)} .feed__title{font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff} .feed__meta{margin-left:auto;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)} .feed__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .feed__tile{ display:block;aspect-ratio:1/1;border-radius:12px; background-size:cover;background-position:center; box-shadow:0 6px 18px rgba(12,0,28,.34); } .feed__foot{ display:flex;align-items:center;gap:9px; margin-top:14px;padding:0 4px;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.82); } .feed__pulse{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#fff} .feed__foot--head{margin-top:0;padding-bottom:13px;font-weight:700;color:#fff} .hero__scrollwrap{position:absolute;left:0;right:0;bottom:26px;z-index:3;display:flex;justify-content:center} .hero__scroll{ display:grid;place-items:center;width:46px;height:46px;border-radius:50%; border:2px solid rgba(255,255,255,.55);transition:border-color .25s,background-color .25s,transform .3s var(--spring); } .hero__scroll:hover{border-color:#fff;background:rgba(255,255,255,.14);transform:translateY(2px)} /* Drawn as a real SVG stroke, not a rotated border box. The bob keyframe below animates transform, and a transform animation on a rotate(45deg) border trick overwrites the rotation, which is what turned the chevron into a corner bracket. An SVG path has no rotation to lose. */ .hero__chevron{display:block;width:19px;height:19px} .hero__chevron svg{ display:block;width:19px;height:19px; fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; } .hero__edge{ position:absolute;left:0;right:0;bottom:0;height:6px;z-index:4; background:linear-gradient(90deg,#f92c8b,#b02cd6,#5d22b8,#b02cd6,#f92c8b); background-size:220% 100%; } /* ========================================================================== SECTION FURNITURE ========================================================================== */ .section{padding:clamp(66px,7.4vw,110px) 0} .section--soft{background:var(--soft)} .section--ink{background:var(--ink);color:rgba(255,255,255,.82)} .shead{max-width:760px;margin:0 auto clamp(38px,4.4vw,60px);text-align:center} .shead__eyebrow{ font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px; background-image:var(--grad-flat);-webkit-background-clip:text;background-clip:text;color:transparent; } .shead__title{ font-family:var(--display);font-weight:400;color:var(--ink); font-size:clamp(26px,3.5vw,44px);line-height:1.18;letter-spacing:-.01em;text-wrap:balance; } .shead__sub{margin-top:16px;font-size:clamp(16px,1.4vw,18.5px);color:var(--muted);text-wrap:balance} .shead--light .shead__title{color:#fff} .shead--light .shead__sub{color:rgba(255,255,255,.72)} .shead--light .shead__eyebrow{ background-image:linear-gradient(96deg,#ff77b6,#d67cf0); -webkit-background-clip:text;background-clip:text;color:transparent; } /* ========================================================================== AWARD PROOF (Central Iowa Wedding Choice Awards) ========================================================================== */ .awards{ border-bottom:1px solid var(--line); padding:clamp(30px,3.6vw,48px) 0; background:linear-gradient(180deg,#fffaf1 0%,var(--bg) 78%); } .awards__in{ display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,38px); align-items:center;text-align:center; max-width:880px;margin-inline:auto; } @media (min-width:900px){ .awards__in{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);text-align:left} } .awards__eyebrow{ font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:#a9822f;margin-bottom:11px; } .awards__title{ font-family:var(--display);font-weight:400;color:var(--ink); font-size:clamp(19px,2.1vw,27px);line-height:1.26;letter-spacing:-.01em;text-wrap:balance; } /* owner-specified four-line break; each line holds together at any width */ .awards__line{white-space:nowrap} .awards__sub{margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.6} /* the five badges stack as two centered rows (3 over 2): the max-width fits exactly three badges, so flex-wrap breaks the line there on every viewport */ .awards__row{ display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px); align-items:center;justify-content:center; max-width:calc(3*clamp(88px,9.4vw,124px) + 2*clamp(10px,1.2vw,16px)); margin-inline:auto; } .awards__row li{flex:0 1 auto} .awards__row img{ width:clamp(88px,9.4vw,124px);height:auto; filter:drop-shadow(0 6px 14px rgba(28,23,79,.1)); transition:transform .35s var(--spring); } .awards__row img:hover{transform:translateY(-4px) scale(1.04)} /* single badge sitting with the venue strip on the homepage */ .proof__award{ flex-basis:100%; display:flex;align-items:center;justify-content:center;gap:12px; text-align:left; } .proof__award img{width:78px;height:auto;flex:0 0 auto} .proof__award span{font-size:17px;line-height:1.5;color:var(--muted)} .proof__award strong{color:var(--ink);font-weight:700} .proof__award-badges{ display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center; } .proof__award-badges img{width:72px} /* ========================================================================== VENUE PROOF ========================================================================== */ .proof{border-bottom:1px solid var(--line);padding:22px 0} .proof__in{display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap;justify-content:center} .proof__label{ font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .proof__list{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center} .proof__list li{ font-size:14.5px;font-weight:500;color:var(--ink-2);opacity:.78; transition:opacity .25s var(--ease),transform .3s var(--spring); } .proof__list li:hover{opacity:1;transform:translateY(-2px)} /* ========================================================================== THREE DOORS ========================================================================== */ .doorgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .door{ display:flex;flex-direction:column; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow-1); transition:transform .4s var(--spring),box-shadow .4s var(--ease),border-color .3s var(--ease); } .door:hover{transform:translateY(-7px);box-shadow:var(--shadow-2);border-color:var(--line-2)} .door__photo{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;background:var(--soft)} .door__img{ position:absolute;inset:0;display:block;background-size:cover;background-position:center; transition:transform .8s var(--ease); } .door:hover .door__img{transform:scale(1.06)} .door__photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(28,6,50,0) 42%,rgba(28,6,50,.5) 100%); } .door__price{ position:absolute;left:16px;bottom:16px;z-index:2; display:inline-flex;align-items:center; background:#fff;color:var(--ink); font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:9px 15px;border-radius:999px;box-shadow:0 8px 22px rgba(20,4,40,.3); } .door__body{display:flex;flex-direction:column;flex:1;padding:26px 26px 28px} .door__tag{ align-self:flex-start;margin-bottom:12px; font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#fff;background-image:var(--grad-flat);padding:7px 13px;border-radius:999px; } /* quiet variant: a secondary price fact that must not compete with the gradient "talk to us" tag on the corporate door */ .door__tag--quiet{color:var(--purple);background-image:none;background:rgba(176,44,214,.10)} .door__name{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.2;color:var(--ink);margin-bottom:12px} .door__text{font-size:15.5px;color:var(--muted);margin-bottom:18px} .door__list{margin-bottom:24px;display:grid;gap:9px} .door__list li{position:relative;padding-left:26px;font-size:14.5px;color:var(--body)} .door__list li::before{ content:"";position:absolute;left:0;top:.44em;width:15px;height:15px;border-radius:50%; background-image:var(--grad-flat);opacity:.16; } .door__list li::after{ content:"";position:absolute;left:4.4px;top:.72em;width:6px;height:3.4px; border-left:1.8px solid var(--purple);border-bottom:1.8px solid var(--purple);transform:rotate(-45deg); } .door__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto} .door--custom{border-color:#efd9f7} .door--custom .door__photo::after{background:linear-gradient(180deg,rgba(93,34,184,0) 38%,rgba(52,10,98,.58) 100%)} /* ========================================================================== PRICE BAND ========================================================================== */ .pricegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .price{ background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:26px 22px 24px;position:relative;overflow:hidden; transition:transform .38s var(--spring),box-shadow .38s var(--ease),border-color .3s; } .price::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px; background-image:var(--grad-flat);transform:scaleX(0);transform-origin:left; transition:transform .45s var(--ease); } .price:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent} .price:hover::before{transform:scaleX(1)} .price__name{ font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px; } .price__fig{ font-family:var(--display);font-weight:400;font-size:clamp(28px,2.7vw,36px);line-height:1;color:var(--ink);margin-bottom:14px; } .price__from{ display:block;font-family:var(--sans);font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px; } .price__text{font-size:14px;color:var(--muted);line-height:1.55} .price--brand,.price--np{background:linear-gradient(180deg,#fff 0%,#fdf6fd 100%)} .price--np .price__fig{ background-image:var(--grad-flat);-webkit-background-clip:text;background-clip:text;color:transparent; } .prices__note{ margin-top:30px;text-align:center;font-size:15px;color:var(--muted); max-width:760px;margin-left:auto;margin-right:auto; } .prices__note a{color:var(--pink-ink);font-weight:700;border-bottom:2px solid rgba(249,44,139,.25);transition:border-color .2s} .prices__note a:hover{border-color:var(--pink)} /* ========================================================================== WHAT'S INCLUDED ========================================================================== */ .inclgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .incl{ padding:26px 24px;border-radius:var(--r);border:1px solid transparent;background:var(--soft); transition:transform .35s var(--spring),background-color .3s var(--ease),border-color .3s,box-shadow .35s; } .incl:hover{background:#fff;border-color:var(--line);box-shadow:var(--shadow-1);transform:translateY(-4px)} .incl__ic{ display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:16px; background-image:var(--grad-flat);box-shadow:0 8px 20px rgba(176,44,214,.24); transition:transform .4s var(--spring); } .incl:hover .incl__ic{transform:rotate(-6deg) scale(1.07)} .incl__ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .incl h3{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:7px} .incl p{font-size:14.5px;color:var(--muted);line-height:1.55} /* ========================================================================== HOW IT WORKS ========================================================================== */ .how{position:relative;overflow:hidden} .how::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(52% 60% at 12% 0%, rgba(249,44,139,.22) 0%, rgba(249,44,139,0) 68%), radial-gradient(48% 56% at 92% 100%, rgba(176,44,214,.24) 0%, rgba(176,44,214,0) 66%); } .how .wrap{position:relative;z-index:1} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .step{ position:relative;display:flex;flex-direction:column;overflow:hidden; border-radius:var(--r-lg); background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12); transition:transform .38s var(--spring),background-color .3s,border-color .3s,box-shadow .4s var(--ease); } .step:hover{ transform:translateY(-6px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24); box-shadow:0 26px 60px rgba(8,0,26,.42); } /* the real photo is the point of the card, so it gets the top third of it */ .step__photo{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;background:rgba(255,255,255,.07)} .step__img{ position:absolute;inset:0;display:block;background-size:cover;background-position:center; transition:transform .85s var(--ease); } .step:hover .step__img{transform:scale(1.06)} .step__photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(28,23,79,0) 46%,rgba(28,23,79,.55) 100%); } .step__body{position:relative;padding:30px 24px 28px;flex:1} /* the gradient badge straddles the photo edge so the photo reads as part of the card, not a thumbnail pasted on top of it */ .step__num{ position:absolute;top:-23px;left:24px;z-index:2; display:grid;place-items:center;width:46px;height:46px;border-radius:50%; font-family:var(--display);font-size:17px;color:#fff;background-image:var(--grad-flat); box-shadow:0 10px 26px rgba(249,44,139,.42),0 0 0 4px var(--ink); transition:transform .4s var(--spring); } .step:hover .step__num{transform:scale(1.08) rotate(-6deg)} .step__name{font-size:18px;font-weight:700;color:#fff;margin-bottom:9px} .step p{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.6} /* on a light section the badge ring has to match the light ground */ .steps--light .step{background:#fff;border-color:var(--line);box-shadow:var(--shadow-1)} .steps--light .step:hover{background:#fff;border-color:var(--line-2);box-shadow:var(--shadow-2)} .steps--light .step__num{box-shadow:0 10px 26px rgba(249,44,139,.32),0 0 0 4px #fff} .steps--light .step__name{color:var(--ink)} .steps--light .step p{color:var(--muted)} .hownote{ margin:30px auto 0;max-width:760px;text-align:center; font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72); } .hownote a{color:#ff88c2;font-weight:700} /* ========================================================================== PICK YOUR BOOTH ========================================================================== */ .boothgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:clamp(40px,5vw,72px)} .booth{ position:relative;display:flex;flex-direction:column; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:30px 26px 28px;text-align:center; transition:transform .4s var(--spring),box-shadow .4s var(--ease),border-color .3s; } .booth:hover{transform:translateY(-7px);box-shadow:var(--shadow-2)} /* featured: brand-gradient border and a pink glow, no label */ .booth--pop{ border:3px solid transparent; background-image:linear-gradient(180deg,#fff 0%,#fdf5fb 100%),var(--grad-flat); background-origin:border-box;background-clip:padding-box,border-box; box-shadow:0 2px 8px rgba(249,44,139,.12), 0 20px 50px rgba(249,44,139,.26); } .booth--pop:hover{box-shadow:0 4px 12px rgba(249,44,139,.16), 0 30px 68px rgba(249,44,139,.34)} /* the source product shots are 300px squares with a lot of white around the booth, so a cover crop on a portrait box makes the booth read at a sensible size instead of a stamp floating in the middle of the card */ .booth__img{ display:block;width:186px;height:224px;margin:4px auto 18px; background-size:cover;background-position:center;background-repeat:no-repeat; transition:transform .5s var(--spring); } .booth:hover .booth__img{transform:translateY(-5px) scale(1.04)} .booth__name{font-family:var(--display);font-weight:400;font-size:20px;color:var(--ink);margin-bottom:8px} .booth__price{ font-size:15px;font-weight:700;letter-spacing:.06em;margin-bottom:14px; background-image:var(--grad-flat);-webkit-background-clip:text;background-clip:text;color:transparent; } .booth__text{font-size:14.5px;color:var(--muted);margin-bottom:16px} .booth__list{display:grid;gap:7px;margin-bottom:22px} .booth__list li{font-size:13.5px;color:var(--body)} .booth .btn{margin-top:auto;align-self:center} /* before / after */ .glam{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:center; background:var(--soft);border-radius:var(--r-xl);padding:clamp(26px,3.4vw,46px); } .glam__title{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,30px);color:var(--ink);margin-bottom:14px;line-height:1.2} .glam__copy p{font-size:16px;color:var(--muted)} .glam__note{margin-top:14px;font-size:12.5px;color:var(--muted);opacity:.75} .ba{ position:relative;border-radius:var(--r-lg);overflow:hidden; aspect-ratio:1000/562;background:#eee;cursor:ew-resize;user-select:none;-webkit-user-select:none; box-shadow:var(--shadow-2);touch-action:pan-y; } .ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none} .ba__img--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)} .ba__line{ position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px; background:#fff;box-shadow:0 0 16px rgba(0,0,0,.35);pointer-events:none; } .ba__handle{ position:absolute;top:50%;left:var(--pos);width:52px;height:52px;margin:-26px 0 0 -26px; border-radius:50%;background:#fff;box-shadow:0 8px 26px rgba(0,0,0,.32); cursor:ew-resize;display:block; transition:transform .3s var(--spring); } .ba__handle::before,.ba__handle::after{ content:"";position:absolute;top:50%;width:8px;height:8px; border-right:2.4px solid var(--purple);border-bottom:2.4px solid var(--purple); } .ba__handle::before{left:14px;transform:translateY(-50%) rotate(135deg)} .ba__handle::after{right:14px;transform:translateY(-50%) rotate(-45deg)} .ba:hover .ba__handle,.ba__handle:focus-visible{transform:scale(1.08)} .ba__tag{ position:absolute;top:14px;z-index:3; font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff; background:rgba(20,4,40,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); padding:7px 12px;border-radius:999px;pointer-events:none; } .ba__tag--l{left:14px} .ba__tag--r{right:14px;background-image:var(--grad-flat)} /* ========================================================================== SERVICE AREA ========================================================================== */ .areagrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start} .areamap{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-1)} .areamap__svg{width:100%;height:auto;display:block} .areamap__grid path{stroke:var(--line);stroke-width:1} .areamap__ring{fill:none;stroke:var(--purple)} .areamap__ring--3{stroke:var(--pink);stroke-width:2.2;stroke-dasharray:7 7;opacity:.85} .areamap__ring--2{stroke-width:1.2;opacity:.3} .areamap__ring--1{stroke-width:1.2;opacity:.22} /* The ping circle is drawn at the SAME cx/cy/r as the 35 mile ring and is then scaled down to a dot and back out. Without transform-box/transform-origin an SVG scale() is taken about the viewBox origin, which slides the circle across the map instead of expanding it from the center point. */ .areamap__pulse{ fill:url(#areaP);stroke:none;opacity:0; transform-box:fill-box;transform-origin:center; } .areamap__towns circle{fill:var(--ink);opacity:.5} .areamap__towns text{font-family:var(--sans);font-size:12px;font-weight:500;fill:var(--ink-2)} .areamap__label text{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;fill:var(--pink-ink)} .areamap__towns-text{margin-top:16px;font-size:14px;color:var(--muted);line-height:1.55} .areaside{display:grid;gap:22px} /* ========================================================================== DISTANCE CHECKER ("Will you deliver to my venue?") Places Autocomplete (New) suggestion list + Routes driving distance from the delivery-radius centre. Lives inside the service-area column and borrows the same white-card language as .areamap and .beyond__card. Behaviour is in app.js section 8. ========================================================================== */ .checker{ position:relative; /* the autocomplete popover must paint over the sibling cards below, so the panel gets its own high layer; isolation alone kept the popover trapped under later siblings' stacking contexts */ z-index:20; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:26px;box-shadow:var(--shadow-1); } .checker__title{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:7px} .checker__sub{font-size:14.5px;color:var(--muted);margin-bottom:16px} /* ---- input row. The field wrapper owns the flex sizing so the suggestion list can be positioned against it rather than against the whole row. ---- */ .checker__form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start} .checker__field{position:relative;flex:1 1 220px;min-width:0} .checker__form input{ width:100%;min-width:0; padding:15px 17px;border:1.5px solid var(--line-2);border-radius:999px; font-size:16px;color:var(--ink);background:#fff; transition:border-color .22s var(--ease),box-shadow .22s var(--ease); } .checker__form input::placeholder{color:#a5a1bd} .checker__form input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(176,44,214,.14)} .checker__form .btn[disabled]{opacity:.6;cursor:progress;transform:none} /* ---- suggestion list ---- z-index has to clear the celebration layer below, or a flash mid-typing would paint over the options the visitor is reading. */ .checker__pop{ position:absolute;z-index:6;top:calc(100% + 7px);left:0;right:0; padding:6px; background:#fff;border:1px solid var(--line-2);border-radius:var(--r); box-shadow:var(--shadow-2); } .checker__pop[hidden]{display:none} .checker__list{ max-height:262px;overflow-y:auto;-webkit-overflow-scrolling:touch; margin:0;padding:0;list-style:none; } .checker__opt{ display:block;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer; font-size:14.5px;line-height:1.35;color:var(--body); } .checker__opt strong{display:block;font-weight:700;color:var(--ink);font-size:15px} .checker__opt span{display:block;margin-top:2px;font-size:13px;color:var(--muted)} /* pointer hover and keyboard cursor read identically */ .checker__opt:hover,.checker__opt[aria-selected="true"]{background:var(--soft)} .checker__opt[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--purple)} /* Places attribution. Predictions shown outside a Google map have to carry it, so it is part of the popover rather than something a later edit can drop. */ .checker__note{ margin:2px 0 0;padding:8px 12px 4px;border-top:1px solid var(--line); font-size:11.5px;letter-spacing:.02em;color:var(--muted); } /* ---- result ---- */ .checker__out{margin-top:16px} .checker__out:empty{display:none} .chkres{ padding:16px 18px;border-radius:var(--r); border:1px solid var(--line);border-left:4px solid var(--purple); background:var(--soft); } .chkres__title{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.35;text-wrap:balance} .chkres__sub{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--body)} .chkres__note{margin-top:10px;font-size:13px;color:var(--muted)} .chkres a:not(.btn){color:var(--pink-ink);font-weight:700;border-bottom:2px solid rgba(249,44,139,.28);transition:border-color .2s} .chkres a:not(.btn):hover{border-color:var(--pink)} .chkres__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px} /* the buttons in the actions row are .btn--line on this light card */ .chkres__actions .btn{flex:0 1 auto} /* in the zone: the brand gradient, the same reward the availability panel gives */ .chkres--yes{ border-color:rgba(176,44,214,.22);border-left-color:var(--pink); background:linear-gradient(122deg,rgba(249,44,139,.10) 0%,rgba(176,44,214,.09) 58%,rgba(93,34,184,.07) 100%); } /* outside the zone: warm, never a failure state, because we still cover them */ .chkres--out{ border-color:#f2e2c8;border-left-color:#f0a23c; background:linear-gradient(122deg,rgba(255,183,77,.16) 0%,rgba(249,44,139,.08) 100%); } .chkres--load{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted)} .chkres__pulse{ flex:0 0 auto;width:11px;height:11px;border-radius:50%; background:var(--pink);box-shadow:0 0 0 0 rgba(249,44,139,.55); } /* ---- celebration layer ---- Clipped to the card, pointer-events off, and painted under the suggestion list. overflow must CLIP rather than hide: hidden would make this a scroll container and the sparks would be reachable by a stray sideways scroll. */ .checker__fx{ position:absolute;inset:0;z-index:3;pointer-events:none; border-radius:inherit;overflow:hidden; } @supports (overflow:clip){.checker__fx{overflow:clip}} .checker__flash{position:absolute;inset:0;background:#fff;opacity:0} .checker__burst{position:absolute;inset:0} .checker__spark{ position:absolute;top:44%;left:50%;width:8px;height:8px;border-radius:2px; background:var(--spark,#fff);opacity:0; will-change:transform,opacity; } /* play once on a hit, reusing the availability panel's flash and spark keyframes so the two checkers celebrate in the same voice */ .js .checker.is-hit .checker__flash{animation:sxpBurstFlash .72s var(--ease) both} .js .checker__spark{animation:sxpSpark 1.05s var(--ease) both} .js .chkres{animation:sxpRise .5s var(--ease) both} .js .chkres__pulse{animation:sxpBeat 1.15s var(--ease) infinite} @media (prefers-reduced-motion:reduce){ .checker__fx{display:none} } @media (max-width:520px){ .checker__list{max-height:220px} .chkres__actions .btn{width:100%} } .beyond{display:grid;gap:14px} .beyond__card{ display:flex;gap:18px;align-items:flex-start; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px; transition:transform .35s var(--spring),box-shadow .35s var(--ease); } .beyond__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)} .beyond__img{ flex:0 0 auto;width:76px;height:76px;border-radius:14px; background-size:cover;background-position:center;background-color:var(--soft); } .beyond__img--ship{display:grid;place-items:center;background-image:var(--grad-flat)} .beyond__img--ship svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .beyond__card h3{font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:6px} .beyond__card p{font-size:14.5px;color:var(--muted);line-height:1.55} /* ========================================================================== REVIEWS ========================================================================== */ .revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .rev{ display:flex;flex-direction:column; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px; box-shadow:var(--shadow-1); transition:transform .38s var(--spring),box-shadow .38s var(--ease); } .rev:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)} .rev__stars{font-size:16px;letter-spacing:.18em;margin-bottom:14px; background-image:var(--grad-flat);-webkit-background-clip:text;background-clip:text;color:transparent;} .rev blockquote{margin:0 0 20px;font-size:15px;line-height:1.66;color:var(--body)} .rev figcaption{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)} .rev figcaption strong{display:block;font-size:15px;font-weight:700;color:var(--ink)} .rev figcaption span{display:block;margin-top:3px;font-size:13px;color:var(--pink-ink);font-weight:500} .reviews__more{margin-top:32px;text-align:center;font-size:15px} .reviews__more a{ color:var(--ink);font-weight:700;border-bottom:2px solid rgba(249,44,139,.3);padding-bottom:2px; transition:color .2s,border-color .2s; } .reviews__more a:hover{color:var(--pink-ink);border-color:var(--pink)} /* ========================================================================== FAQ ========================================================================== */ .faqlist{border-top:1px solid var(--line-2)} .q{border-bottom:1px solid var(--line-2)} .q summary{ display:flex;align-items:center;gap:16px; list-style:none;cursor:pointer;padding:22px 0; font-size:clamp(16px,1.55vw,18.5px);font-weight:700;color:var(--ink); transition:color .2s var(--ease); } .q summary::-webkit-details-marker{display:none} .q summary::after{ content:"";flex:0 0 auto;margin-left:auto;width:11px;height:11px; border-right:2.2px solid var(--purple);border-bottom:2.2px solid var(--purple); transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease); } .q[open] summary::after{transform:translateY(2px) rotate(-135deg)} .q summary:hover{color:var(--pink-ink)} .q__a{padding:0 0 24px;max-width:74ch} .q__a p{font-size:15.5px;color:var(--muted);line-height:1.68} /* ========================================================================== QUOTE FORM The real lead form (#quote-form). Field NAMES are the Forminator ids the the `lead` function's Check Cherry mapping keys on, so they are never renamed here; only the visible labels are ours. Mobile-first: one column, then a two column grid from 720px up. Conditional rows carry data-qf-when / data-qf-is and are toggled with the `hidden` attribute, which is also what the payload builder in app.js reads to decide a field must not be sent. ========================================================================== */ .qform{ position:relative;isolation:isolate;overflow:hidden; border:1px solid var(--line);border-radius:var(--r-xl); background:#fff; box-shadow:var(--shadow-2); padding:clamp(24px,3.4vw,46px); } @supports (overflow:clip){.qform{overflow:clip}} /* same live gradient edge as the availability panel and the footer */ .qform::before{ content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:2; background:linear-gradient(90deg,#f92c8b,#b02cd6,#5d22b8,#b02cd6,#f92c8b); background-size:200% 100%; } .qform__glow{ position:absolute;z-index:-1;pointer-events:none; width:460px;height:460px;right:-190px;top:-230px; background:radial-gradient(circle,rgba(249,44,139,.16) 0%,rgba(249,44,139,0) 68%); } .qform__head{max-width:56ch;margin-bottom:clamp(24px,2.8vw,34px)} .qform__eyebrow{ font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px; background-image:var(--grad-flat);-webkit-background-clip:text;background-clip:text;color:transparent; } .qform__title{ font-family:var(--display);font-weight:400;color:var(--ink); font-size:clamp(21px,2.5vw,31px);line-height:1.22;letter-spacing:-.01em;text-wrap:balance; } .qform__sub{margin-top:12px;font-size:clamp(14.5px,1.25vw,16.5px);color:var(--muted);line-height:1.6} /* ---- status banner ---- */ .qform__status{ margin-bottom:clamp(20px,2.4vw,28px); padding:16px 18px;border-radius:var(--r); border:1px solid var(--line-2);border-left:4px solid var(--purple); background:var(--soft);color:var(--body); font-size:15px;line-height:1.55; } .qform__status[hidden]{display:none} .qform__status:focus-visible{outline:3px solid var(--purple);outline-offset:3px} .qform__status--success{ border-color:#bfe8cf;border-left-color:#1f9d55;background:#f2fbf5;color:#14603a;font-weight:500; } .qform__status--error{ border-color:#f6cddd;border-left-color:var(--pink);background:#fdf4f8;color:#8d1046;font-weight:500; } .qform__status--loading{border-left-color:var(--purple);color:var(--muted)} /* ---- no-script notice: quiet, same shape as the status banner ---- */ .qform__noscript{ margin-bottom:clamp(20px,2.4vw,28px); padding:14px 16px;border-radius:var(--r); border:1px solid var(--line-2);border-left:4px solid var(--purple); background:var(--soft);color:var(--body); font-size:14.5px;line-height:1.55; } .qform__noscript a{color:var(--purple);font-weight:600} /* ---- sections ---- */ .qform__set{border:0;padding:0;margin:0 0 clamp(24px,3vw,36px);min-width:0} .qform__set:last-of-type{margin-bottom:clamp(20px,2.4vw,28px)} .qform__legend{ display:flex;align-items:center;gap:14px; margin-bottom:16px; font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .qform__legend::after{content:"";flex:1;height:1px;background:var(--line)} .qform__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px} @media (min-width:720px){ .qform__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px} .qf--full{grid-column:1/-1} } /* ---- fields ---- */ .qf{display:flex;flex-direction:column;min-width:0} .qf[hidden]{display:none} .qf__group{border:0;padding:0;margin:0;min-width:0} .qf__label{ display:block;margin-bottom:8px;padding:0; font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2); } .qf__label--legend{float:none;width:100%} .qf__req{color:var(--pink-ink)} .qf__opt{ margin-left:6px;font-size:10.5px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--muted); } .qf__hint{margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--muted)} .qf__input{ -webkit-appearance:none;appearance:none; width:100%;min-width:0;min-height:52px; padding:14px 16px; border:1.5px solid var(--line-2);border-radius:var(--r-sm); background:#fff;color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.35; transition:border-color .22s var(--ease),box-shadow .22s var(--ease),background-color .22s var(--ease); } .qf__input::placeholder{color:#a5a1bd} .qf__input:hover{border-color:#c9c2e2} .qf__input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(176,44,214,.14)} /* the browser paints this once a field has been reported invalid; :invalid alone would light up every required field before anyone has typed */ .qf__input:user-invalid{border-color:var(--pink);box-shadow:0 0 0 4px rgba(249,44,139,.12)} .qf__textarea{min-height:132px;resize:vertical;line-height:1.6} .qf__date::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6} .qf__date::-webkit-calendar-picker-indicator:hover{opacity:1} /* select: native control, our own caret */ .qf__selectwrap{position:relative;display:block} .qf__selectwrap::after{ content:"";position:absolute;right:18px;top:50%;width:9px;height:9px; margin-top:-6px;pointer-events:none; border-right:2px solid var(--purple);border-bottom:2px solid var(--purple); transform:rotate(45deg); } .qf__select{padding-right:44px;cursor:pointer;background-image:none} /* required selects: nothing chosen yet reads as placeholder */ .qf__select:invalid{color:var(--muted)} /* optional selects are never :invalid, so their "Select one" row would sit there in full ink as if it were an answer */ .qf__select:has(option[value=""]:checked){color:var(--muted)} /* ---- checkboxes ---- */ .qf__checks{display:grid;gap:10px} @media (min-width:720px){ .qf__checks{grid-template-columns:repeat(2,minmax(0,1fr))} .qf__checks > .qf__check:last-child:nth-child(odd){grid-column:1/-1} } .qf__check{ position:relative;display:flex;align-items:flex-start;gap:13px; padding:14px 16px;border:1.5px solid var(--line-2);border-radius:var(--r-sm); background:#fff;cursor:pointer; transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .3s var(--spring); } .qf__check:hover{border-color:var(--purple);transform:translateY(-2px)} .qf__check--solo{margin-top:26px} @media (max-width:719px){.qf__check--solo{margin-top:0}} .qf__check input{ position:absolute;width:1px;height:1px;margin:0;padding:0; opacity:0;pointer-events:none; } .qf__box{ flex:0 0 auto;position:relative;display:block;width:22px;height:22px;margin-top:1px; border:1.8px solid var(--line-2);border-radius:7px;background:#fff; transition:background-color .18s var(--ease),border-color .18s var(--ease); } .qf__box::after{ content:"";position:absolute;left:6px;top:5px;width:7px;height:11px; border-right:2.4px solid #fff;border-bottom:2.4px solid #fff; transform:rotate(45deg) scale(.4);opacity:0; transition:opacity .16s var(--ease),transform .24s var(--spring); } .qf__check input:checked + .qf__box{background-image:var(--grad-flat);background-origin:border-box;border-color:transparent} .qf__check input:checked + .qf__box::after{opacity:1;transform:rotate(45deg) scale(1)} .qf__check input:focus-visible + .qf__box{outline:3px solid var(--purple);outline-offset:3px} .qf__checktext{font-size:15px;line-height:1.45;color:var(--body)} .qf__check:has(input:checked){border-color:var(--purple);background:#fdf7fd} .qf__check:has(input:checked) .qf__checktext{color:var(--ink);font-weight:500} /* ---- single-choice chips ---- Radio semantics in the shape of the brand's pill buttons: one of the pair fills with the gradient, the other stays outlined. The input keeps its real focus ring by way of :has, so keyboard users still see where they are. */ .qf__chips{display:flex;flex-wrap:wrap;gap:10px} .qf__chip{ position:relative;display:inline-flex;align-items:center;justify-content:center; padding:12px 22px;border:1.5px solid var(--line-2);border-radius:999px; background:#fff;cursor:pointer; transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease),transform .3s var(--spring); } .qf__chip:hover{border-color:var(--purple);transform:translateY(-2px)} .qf__chip input{ position:absolute;width:1px;height:1px;margin:0;padding:0; opacity:0;pointer-events:none; } .qf__chiptext{font-size:15px;line-height:1.45;color:var(--body);font-weight:500} .qf__chip:has(input:checked){ border-color:transparent;background-image:var(--grad-flat);background-origin:border-box; box-shadow:0 8px 20px rgba(176,44,214,.26); } .qf__chip:has(input:checked) .qf__chiptext{color:#fff} .qf__chip:has(input:focus-visible){outline:3px solid var(--purple);outline-offset:3px} @media (max-width:519px){ .qf__chips{display:grid;grid-template-columns:minmax(0,1fr)} } /* honeypot: offscreen, never announced, never tabbed into */ .qf__pot{position:absolute!important;left:-9999px;top:0;width:1px;height:1px;overflow:hidden} /* ---- footer ---- */ .qform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px} .qform__submit{flex:0 0 auto;min-height:54px} .qform__submit[disabled]{opacity:.62;cursor:progress;transform:none;box-shadow:none} .qform__note{flex:1 1 260px;font-size:13px;line-height:1.55;color:var(--muted)} @media (max-width:520px){ .qform__submit{width:100%} .qform__note{flex:1 1 100%} } .contact__alt{margin-top:22px;text-align:center;font-size:15px;color:var(--muted)} .contact__alt a{color:var(--pink-ink);font-weight:700} /* ========================================================================== CHECK YOUR DATE (live availability module) Sits at the top of #contact so every "Check Your Date" link in the site lands on the instant answer first and the quote form second. ========================================================================== */ /* overflow must CLIP, not hide. The glow and the sparks sit outside the panel box, which makes overflow:hidden a real scroll container: focusing a button in the result then scrolls the panel sideways and shears the copy off. */ .datecheck{ position:relative;isolation:isolate;overflow:hidden; border-radius:var(--r-xl); background:radial-gradient(122% 150% at 10% -10%,#4a2f9c 0%,#2b1f74 42%,var(--ink) 100%); color:#fff; padding:clamp(26px,3.4vw,44px); box-shadow:var(--shadow-2); margin-bottom:clamp(24px,3vw,38px); } /* live gradient edge, same signature as the footer rule */ .datecheck::before{ content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:2; background:linear-gradient(90deg,#f92c8b,#b02cd6,#5d22b8,#b02cd6,#f92c8b); background-size:200% 100%; } .datecheck__glow{ position:absolute;z-index:-1;pointer-events:none; width:520px;height:520px;right:-160px;top:-220px; background:radial-gradient(circle,rgba(249,44,139,.42) 0%,rgba(249,44,139,0) 68%); } /* white burst used for the celebratory camera flash */ .datecheck__flash{ position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:#fff; } .datecheck__burst{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden} @supports (overflow:clip){ .datecheck{overflow:clip} .datecheck__burst{overflow:clip} } .datecheck__spark{ position:absolute;top:46%;left:50%;width:9px;height:9px;border-radius:2px; background:var(--spark,#fff);opacity:0; will-change:transform,opacity; } .datecheck__in{ position:relative;z-index:1; display:grid;gap:clamp(20px,2.6vw,38px); grid-template-columns:1fr; align-items:end; } @media (min-width:800px){ .datecheck__in{grid-template-columns:1fr minmax(340px,.92fr)} } .datecheck__eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:#ffb3d8;margin-bottom:13px; } .datecheck__dot{ width:8px;height:8px;border-radius:50%;background:#22d67f;flex:0 0 auto; box-shadow:0 0 0 4px rgba(34,214,127,.22); } .datecheck__title{ font-family:var(--display);font-weight:400;color:#fff; font-size:clamp(21px,2.5vw,31px);line-height:1.22;letter-spacing:-.01em;text-wrap:balance; } .datecheck__sub{ margin-top:12px;font-size:clamp(14.5px,1.25vw,16.5px); color:rgba(255,255,255,.74);line-height:1.6;max-width:46ch; } .datecheck__form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .datecheck__field{flex:1 1 220px;min-width:0} .datecheck__label{ display:block;margin-bottom:8px; font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.66); } .datecheck__input{ -webkit-appearance:none;appearance:none; width:100%;min-width:0;min-height:54px; padding:15px 18px;border:1.5px solid rgba(255,255,255,.28);border-radius:999px; background:rgba(255,255,255,.97);color:var(--ink); font-size:16px;font-weight:500;line-height:1.2; transition:border-color .22s var(--ease),box-shadow .22s var(--ease); } .datecheck__input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.62} .datecheck__input::-webkit-calendar-picker-indicator:hover{opacity:1} .datecheck__input:focus{outline:none;border-color:#fff;box-shadow:0 0 0 4px rgba(249,44,139,.4)} .datecheck__go{flex:0 0 auto;min-height:54px} .datecheck__go[disabled]{opacity:.6;cursor:progress;transform:none} .datecheck__hint{flex:1 1 100%;margin-top:2px;font-size:13px;color:rgba(255,255,255,.55)} /* ---- result region ---- */ .datecheck__out{position:relative;z-index:1;grid-column:1/-1} .datecheck__out:empty{display:none} .dcres{ border-radius:var(--r-lg);padding:clamp(20px,2.2vw,26px); background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.16); } .dcres__title{ font-family:var(--display);font-weight:400;color:#fff; font-size:clamp(17px,1.9vw,23px);line-height:1.3;text-wrap:balance; } .dcres__sub{margin-top:10px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.78);max-width:56ch} .dcres__note{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.56)} /* loading */ .dcres--load{display:flex;align-items:center;gap:14px;font-size:15px;color:rgba(255,255,255,.82)} .dcres__pulse{ flex:0 0 auto;width:13px;height:13px;border-radius:50%; background:var(--pink);box-shadow:0 0 0 0 rgba(249,44,139,.55); } /* available */ .dcres--yes{ background:linear-gradient(122deg,rgba(249,44,139,.24) 0%,rgba(176,44,214,.2) 58%,rgba(93,34,184,.16) 100%); border-color:rgba(255,255,255,.3); } .dcpkgs{display:flex;flex-wrap:wrap;gap:11px;margin-top:19px} .dcpkgs .btn{flex:0 1 auto} .dcpkgs__gone{ flex-basis:100%;margin-top:2px;font-size:13.5px;color:rgba(255,255,255,.6); } /* a booked photo booth should be unmissable, not a whisper */ .dcpkgs__gone--strong{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; margin-top:8px;font-size:14px;color:rgba(255,255,255,.88); } .dcpkgs__pill{ display:inline-flex;align-items:center;gap:6px; padding:4px 12px;border-radius:999px; background:rgba(255,86,86,.22);border:1px solid rgba(255,140,140,.55); color:#ffd7d7;font-weight:700;font-size:12.5px;letter-spacing:.02em; text-transform:uppercase; } /* clicking through to the quote form lands its heading below the header */ #quoteform{scroll-margin-top:96px} /* backdrop showcase closer: a real button, not a footnote link */ .wallcta{text-align:center;margin-top:28px} .wallcta__note{margin-top:11px;font-size:13.5px;line-height:1.6;color:var(--muted)} /* not available or lookup failed */ .dcres--no{ background:linear-gradient(122deg,rgba(255,183,77,.2) 0%,rgba(249,44,139,.16) 100%); border-color:rgba(255,255,255,.24); } .dcres__actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:19px} @media (max-width:520px){ .datecheck__form{gap:10px} .datecheck__field{flex:1 1 100%} .datecheck__go{width:100%} .dcpkgs .btn,.dcres__actions .btn{width:100%} } /* ========================================================================== FOOTER ========================================================================== */ .foot{background:var(--ink);color:rgba(255,255,255,.68);padding:clamp(52px,6vw,80px) 0 0;position:relative} .foot::before{ content:"";position:absolute;left:0;right:0;top:0;height:5px; background:linear-gradient(90deg,#f92c8b,#b02cd6,#5d22b8,#b02cd6,#f92c8b); background-size:200% 100%; } .foot__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px 30px} .foot__brand p{font-size:14.5px;line-height:1.6;margin-top:18px;max-width:32ch} .foot__mail a{color:#fff;font-weight:700;border-bottom:2px solid rgba(249,44,139,.6);transition:border-color .2s} .foot__mail a:hover{border-color:var(--pink)} .foot__social{display:flex;gap:18px} .foot__social a{font-size:14px;color:rgba(255,255,255,.68);transition:color .2s} .foot__social a:hover{color:#fff} .foot__col h2{ font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:16px; } .foot__col a{ display:block;padding:6px 0;font-size:14.5px;color:rgba(255,255,255,.66); transition:color .2s var(--ease),transform .25s var(--ease); } .foot__col a:hover{color:#fff;transform:translateX(3px)} .foot__legal{ display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between; margin-top:clamp(40px,5vw,64px);padding-top:24px;padding-bottom:28px; border-top:1px solid rgba(255,255,255,.12); font-size:13px;color:rgba(255,255,255,.5); } /* ========================================================================== MOBILE BOTTOM BAR ========================================================================== */ .bottombar{ display:none; position:fixed;left:0;right:0;bottom:0;z-index:110; gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(28,23,79,.09); } .bottombar__btn{ flex:1;display:flex;align-items:center;justify-content:center;gap:6px; min-height:50px;border-radius:999px; font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; background:var(--soft);color:var(--ink);border:1px solid var(--line); transition:transform .25s var(--spring); } .bottombar__btn:active{transform:scale(.965)} .bottombar__btn--grad{flex:1.5;background-image:var(--grad-flat);background-origin:border-box;color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(176,44,214,.32)} .bottombar__btn--book{background:var(--ink);color:#fff;border-color:transparent} .bottombar__ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block} .bottombar__ic{display:flex} /* ========================================================================== INNER PAGE HERO Same layer stack and motion as the homepage hero, shorter, single column. Each page sets --heroimg (and optionally --heropos) on the .hero element. ========================================================================== */ .hero--page{min-height:clamp(340px,44vh,460px);padding:64px 0 74px;align-items:center} .hero--page .hero__inner{grid-template-columns:minmax(0,1fr);gap:0} .hero--page .hero__copy{max-width:780px} .hero--page .hero__title{ font-family:var(--display);font-weight:400; font-size:clamp(30px,5vw,58px);line-height:1.1;letter-spacing:-.01em; margin-bottom:18px;text-transform:uppercase; } .hero__lede{ font-size:clamp(16px,1.5vw,19.5px);line-height:1.6;color:rgba(255,255,255,.94); max-width:640px;text-wrap:balance;margin-bottom:28px; text-shadow:0 2px 14px rgba(24,4,44,.45); } .crumbs{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.72);margin-bottom:16px; } .crumbs a{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;transition:border-color .2s,color .2s} .crumbs a:hover{color:#fff;border-color:#fff} .crumbs span[aria-hidden]{opacity:.5} /* ========================================================================== PRICING PANELS The owner's preferred treatment: photo, price, what's included, Book Now. Used on the homepage price section and on the pricing page. ========================================================================== */ .packgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .packgrid--2{grid-template-columns:repeat(2,1fr)} .pack{ position:relative;display:flex;flex-direction:column; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow-1); transition:transform .4s var(--spring),box-shadow .4s var(--ease),border-color .3s var(--ease); } .pack:hover{transform:translateY(-7px);box-shadow:var(--shadow-2);border-color:var(--line-2)} /* The featured card is marked with a real brand-gradient border and a pink glow instead of a label. Two backgrounds: a flat fill clipped to the padding box, and the gradient clipped to the border box, which paints the border. */ .pack--pop{ border:3px solid transparent; background-image:linear-gradient(#fff,#fff),var(--grad-flat); background-origin:border-box;background-clip:padding-box,border-box; box-shadow:0 2px 8px rgba(249,44,139,.12), 0 20px 50px rgba(249,44,139,.26); } .pack--pop:hover{ border-color:transparent; box-shadow:0 4px 12px rgba(249,44,139,.16), 0 30px 68px rgba(249,44,139,.34); } .pack--pop .pack__photo{background:linear-gradient(150deg,#fdf4fb 0%,#f5e9fb 100%)} .pack__photo{ position:relative;display:block;aspect-ratio:16/11;overflow:hidden; background:linear-gradient(150deg,#fbf7fe 0%,#f2ebfa 100%); } /* the real event photos are square files. A square frame at half-row width made one card taller than a laptop screen, so the frame stays landscape and the height is capped. Each photo carries its own background-position inline, aimed at the photo booth first and the people second. */ .pack__photo--sq{aspect-ratio:2/1;max-height:280px} .pack__photo--wide{aspect-ratio:16/9} .pack__img{ position:absolute;inset:0;display:block; background-size:cover;background-position:center;background-repeat:no-repeat; transition:transform .8s var(--ease); } /* the three product shots are 300px squares with white all around, so they are fitted whole inside the panel rather than cropped through the ring */ /* the stand sits left of centre so the price pill in the bottom right corner never lands on top of the photo booth */ .pack__img--product{background-size:auto 96%;background-position:31% 22%} .pack:hover .pack__img{transform:scale(1.05)} .pack__img--product ~ .pack__glow,.pack__glow{ position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 62% at 50% 78%, rgba(176,44,214,.14) 0%, rgba(176,44,214,0) 70%); /* the product shots are transparent PNGs, so the glow belongs BEHIND them */ z-index:0; } .pack__img{z-index:1} /* bottom right, clear of the photo booth itself, which stands centre-left in every product shot and gets clipped by anything sitting over the ring light */ .pack__price{ position:absolute;right:16px;bottom:14px;z-index:2; display:inline-flex;align-items:baseline;gap:5px; background:#fff;color:var(--ink); font-family:var(--display);font-size:20px;line-height:1; padding:11px 15px;border-radius:999px;box-shadow:0 8px 22px rgba(20,4,40,.22); } .pack__price small{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .pack__body{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px} .pack__name{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2;color:var(--ink);margin-bottom:8px} .pack__text{font-size:14.5px;color:var(--muted);line-height:1.55} .pack__label{ margin:18px 0 12px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .pack__list{display:grid;gap:8px;margin-bottom:22px} .pack__list li{position:relative;padding-left:25px;font-size:14px;color:var(--body);line-height:1.5} .pack__list li::before{ content:"";position:absolute;left:0;top:.36em;width:15px;height:15px;border-radius:50%; background-image:var(--grad-flat);opacity:.16; } .pack__list li::after{ content:"";position:absolute;left:4.4px;top:.64em;width:6px;height:3.4px; border-left:1.8px solid var(--purple);border-bottom:1.8px solid var(--purple);transform:rotate(-45deg); } .pack__foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .pack__note{font-size:12.5px;color:var(--muted);flex:1 1 100%;line-height:1.5} .prices__cta{margin-top:34px;text-align:center} /* ========================================================================== PRICING MATRIX TOGGLE One pricing module per page instead of two or three duplicated grids. Pricing is a two axis matrix: the experience (Social or Brand) crossed with the rate (Standard or Nonprofit). Every cell is a real Check Cherry package, so a toggle only ever swaps a price, a booking link and one line of copy. The toggle UI is progressive enhancement. Without app.js the segmented controls never render at all and the visitor keeps the static markup, which is that page's default combination. A wrong price cannot be shown. The gate is data-pricing-ready, which the module itself stamps on the section, NOT the .js class. .js is set by an inline script in the head, so it is still there when app.js is blocked or fails to parse, and it would have shown switches that do nothing. */ .pricetoggle{display:none} [data-pricing-ready] .pricetoggle{display:block;margin:0 0 clamp(24px,3vw,34px)} .pricetoggle__rows{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center} .segset{display:inline-flex;align-items:center;gap:11px} .segset__label{ font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } /* The track is the pill and the two options live inside it, so the active gradient reads as one switch rather than as two unrelated chips. Same gradient vocabulary as the backdrop filter chips. */ .segset__track{ display:inline-flex;gap:4px;padding:4px; background:#fff;border:1.5px solid var(--line-2);border-radius:999px; box-shadow:var(--shadow-1); } .seg{ cursor:pointer;font:inherit;font-size:14px;font-weight:700;line-height:1.2; color:var(--ink-2);background:transparent;border:0;border-radius:999px; padding:9px 19px; transition:color .2s var(--ease),box-shadow .3s var(--ease),transform .3s var(--spring); } .seg:hover{color:var(--purple)} .seg:focus-visible{outline:3px solid var(--purple);outline-offset:3px} .seg[aria-checked="true"]{ color:#fff;background-image:var(--grad-flat);background-origin:border-box; box-shadow:0 8px 20px rgba(176,44,214,.26); } .seg[aria-checked="true"]:hover{color:#fff} .pricetoggle__note{ margin:16px auto 0;max-width:72ch;text-align:center; font-size:14.5px;line-height:1.6;color:var(--muted); } .pricetoggle__note strong{color:var(--ink)} /* The state line changes with the rates axis. Two lines are reserved so the price grid underneath never moves when the line does. */ .pricetoggle__state{ margin:6px auto 0;max-width:72ch;min-height:45px;text-align:center; font-size:14px;line-height:1.6;color:var(--muted); } .pricetoggle__state strong{color:var(--ink)} /* The one bullet that differs between Social and Brand. Two lines are reserved so a card never grows or shrinks when the toggle moves. */ .pack__list li[data-sxp-swap]{min-height:42px} /* "Books at the standard rate" on the GLAM Luxe under a nonprofit rate. It is absolutely placed like the price pill, so revealing it shifts nothing. Top left, because the bottom of every panel already belongs to the price. */ .pack__flag{ position:absolute;left:14px;top:14px;z-index:2;max-width:calc(100% - 28px); font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:#fff;background-image:var(--grad-flat); padding:7px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(176,44,214,.28); } .pack__note[data-sxp-note]{min-height:38px} /* The price snaps once when the toggle changes it, never on first paint. Collapsed by the reduced motion block at the end of this file. */ .js .pack__price.is-swap{animation:sxpSnap .34s var(--ease) both} /* On a phone the two switches stack and each one owns a full row, label above track, so neither pill ever gets squeezed under its own label. */ @media (max-width:560px){ .pricetoggle__rows{flex-direction:column;align-items:stretch;gap:16px} .segset{flex-direction:column;align-items:flex-start;gap:7px} .segset__track{width:100%} .seg{flex:1;padding:11px 12px} .pricetoggle__state{min-height:68px} } /* ========================================================================== SPLIT: media beside copy ========================================================================== */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,54px);align-items:center} .split + .split{margin-top:clamp(40px,5vw,72px)} .split--flip .split__media{order:2} .split__media{ border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3; background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--soft); box-shadow:var(--shadow-2); } .split__media--wide{aspect-ratio:16/9} .split__media--tall{aspect-ratio:1/1} .split__media--fit{ background-size:contain;background-color:#fff; border:1px solid var(--line);box-shadow:var(--shadow-1); } /* for cutout artwork: no card at all, the image sits right on the page, scaled up a touch since it has no frame to respect */ .split__media--bare{ background-size:contain;background-color:transparent; border:none;box-shadow:none;border-radius:0;overflow:visible; transform:scale(1.18);transform-origin:center; } .split__eyebrow{ font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px; background-image:var(--grad-flat);-webkit-background-clip:text;background-clip:text;color:transparent; } .split__title{ font-family:var(--display);font-weight:400;color:var(--ink); font-size:clamp(23px,2.8vw,34px);line-height:1.18;letter-spacing:-.01em;margin-bottom:16px; } .split__body p{font-size:16px;color:var(--muted);line-height:1.65} .split__body p + p{margin-top:14px} .split__list{display:grid;gap:10px;margin-top:20px} .split__list li{position:relative;padding-left:27px;font-size:15px;color:var(--body)} .split__list li::before{ content:"";position:absolute;left:0;top:.4em;width:16px;height:16px;border-radius:50%; background-image:var(--grad-flat);opacity:.16; } .split__list li::after{ content:"";position:absolute;left:4.7px;top:.7em;width:6.5px;height:3.6px; border-left:1.9px solid var(--purple);border-bottom:1.9px solid var(--purple);transform:rotate(-45deg); } .split__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .split--ink .split__title{color:#fff} .split--ink .split__body p{color:rgba(255,255,255,.74)} .split--ink .split__list li{color:rgba(255,255,255,.88)} /* ========================================================================== PHOTO TILES ========================================================================== */ /* Captions live on a solid card body under the photo, never floating over the image. The sequin and hedge shots are far too busy for overlaid text. */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .tiles--3{grid-template-columns:repeat(3,1fr)} .tile{ display:flex;flex-direction:column;overflow:hidden; background:#fff;border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-1); transition:transform .45s var(--spring),box-shadow .4s var(--ease),border-color .3s var(--ease); } .tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--line-2)} .tile__frame{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--soft)} .tile--wide .tile__frame{aspect-ratio:16/9} .tile__img{ position:absolute;inset:0;display:block; background-size:cover;background-position:center;background-repeat:no-repeat; transition:transform .7s var(--ease); } .tile:hover .tile__img{transform:scale(1.05)} .tile--fit .tile__img{background-size:contain;background-color:#fff} .tile__cap{ display:block;flex:1;padding:14px 16px 16px;border-top:1px solid var(--line); font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35; } .tilenote{margin-top:20px;text-align:center;font-size:14.5px;color:var(--muted)} .tilenote a{color:var(--pink-ink);font-weight:700;border-bottom:2px solid rgba(249,44,139,.28);transition:border-color .2s} .tilenote a:hover{border-color:var(--pink)} /* Quiet CTA line. Sits at the end of a long section that would otherwise dead-end, and points at the quote form without competing with the section's own buttons. Works on light sections and on .section--ink. */ .ctaline{margin-top:26px;text-align:center;font-size:15px;color:var(--muted)} .ctaline a{color:var(--pink-ink);font-weight:700;border-bottom:2px solid rgba(249,44,139,.28);transition:border-color .2s} .ctaline a:hover{border-color:var(--pink)} .section--ink .ctaline{color:rgba(255,255,255,.72)} .section--ink .ctaline a{color:#ff86c1;border-bottom-color:rgba(255,134,193,.32)} .section--ink .ctaline a:hover{border-bottom-color:#ff86c1} .ctaline--hero{margin:0 0 26px;text-align:left;color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(24,4,44,.5)} .ctaline--hero a{color:#fff;border-bottom-color:rgba(255,255,255,.5)} .ctaline--hero a:hover{border-bottom-color:#fff} /* ========================================================================== BACKDROP SHOWCASE The flower wall and the shimmer wall are the premium upgrades, so they get the big frames and everything else sits underneath them. ========================================================================== */ .wallgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:18px} .wall{ display:flex;flex-direction:column;overflow:hidden; border-radius:var(--r-xl);background:#fff;border:1px solid var(--line); box-shadow:var(--shadow-2); transition:transform .45s var(--spring),box-shadow .45s var(--ease),border-color .3s var(--ease); } .wall:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:var(--line-2)} .wall__frame{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--soft)} .wall__img{ position:absolute;inset:0;display:block; background-size:cover;background-position:center;background-repeat:no-repeat; transition:transform .95s var(--ease); } .wall:hover .wall__img{transform:scale(1.05)} .wall__body{display:block;flex:1;padding:24px 26px 26px;border-top:1px solid var(--line)} .wall__tag{ display:inline-flex;margin-bottom:13px; font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff; background-image:var(--grad-flat);padding:7px 13px;border-radius:999px; box-shadow:0 8px 20px rgba(176,44,214,.28); } .wall__name{ display:block;color:var(--ink); font-family:var(--display);font-weight:400;line-height:1.15;margin-bottom:9px; font-size:clamp(20px,2.3vw,28px); } .wall__text{display:block;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:46ch} .wallnote{ margin-top:24px;text-align:center;font-size:15px;color:var(--muted); max-width:760px;margin-left:auto;margin-right:auto;line-height:1.6; } .wallnote a{color:var(--pink-ink);font-weight:700;border-bottom:2px solid rgba(249,44,139,.28);transition:border-color .2s} .wallnote a:hover{border-color:var(--pink)} .upsell{ margin-top:26px;display:flex;align-items:flex-start;gap:14px; background:#fff;border:1px solid var(--line);border-left:4px solid transparent; border-image:none;border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-1); max-width:820px;margin-left:auto;margin-right:auto; } .upsell::before{ content:"";flex:0 0 auto;width:34px;height:34px;border-radius:11px;margin-top:1px; background-image:var(--grad-flat); -webkit-mask:center/19px 19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5V19'/%3E%3Cpath d='M2.5 19h19'/%3E%3Cpath d='M9 4v15M15 4v15'/%3E%3C/svg%3E"); mask:center/19px 19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5V19'/%3E%3Cpath d='M2.5 19h19'/%3E%3Cpath d='M9 4v15M15 4v15'/%3E%3C/svg%3E"); background-color:transparent; } .upsell p{font-size:14.5px;color:var(--body);line-height:1.55} .upsell strong{color:var(--ink)} .upsell a{color:var(--pink-ink);font-weight:700} /* ========================================================================== BACKDROP GALLERY (live catalog, rendered by app.js module 9) The whole point of this block is the MESSAGING: free is the default and a price is always an optional upgrade, so the free tag is the calm one and the priced tag is the one that carries the word "upgrade" every single time. Tiles are 16/9 because the catalog images arrive as ~820x460 fits. ========================================================================== */ .bdgal{margin-top:clamp(28px,3.4vw,44px)} /* ---- filter chips. Same pill vocabulary as the form's single-choice chips, as buttons rather than radios because nothing here is submitted. ---- */ .bdgal__chips{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center; margin-bottom:16px; } /* Two lines: the name and its count on top, the pricing sub-label beneath, so the cost of a category is legible without opening it. The sub-label is deliberately small and muted, and stays muted-but-readable on the active gradient rather than turning into a second headline. */ .bdchip{ display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px; cursor:pointer;text-align:left; font:inherit;font-size:14px;font-weight:700;line-height:1.2;color:var(--ink-2); background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-lg); padding:9px 17px 10px; transition:transform .3s var(--spring),border-color .25s var(--ease), box-shadow .3s var(--ease),color .2s var(--ease); } .bdchip:hover{border-color:var(--purple);transform:translateY(-2px)} .bdchip:focus-visible{outline:3px solid var(--purple);outline-offset:3px} .bdchip.is-on{ color:#fff;border-color:transparent;background-image:var(--grad-flat); box-shadow:0 10px 24px rgba(176,44,214,.26); } .bdchip__top{display:inline-flex;align-items:center;gap:8px} .bdchip__n{font-weight:500;opacity:.62;font-size:12.5px} .bdchip__price{ font-size:11px;font-weight:500;letter-spacing:.01em;line-height:1.3; color:var(--muted); } .bdchip.is-on .bdchip__price{color:rgba(255,255,255,.88)} /* the line under the chips changes with the filter and is where the "never required" promise lives, so it is never more than one glance away */ .bdgal__note{ margin:0 auto 22px;max-width:70ch;text-align:center; font-size:14.5px;line-height:1.6;color:var(--muted); } .bdgal__note strong{color:var(--ink)} /* ---- tiles ---- Five across at full width, and dense on purpose: this is a catalog of 71 swatches, so the job is scanning, not admiring one card at a time. */ .bdgal__grid{ display:grid;grid-template-columns:repeat(5,1fr);gap:14px; list-style:none;margin:0;padding:0; } .bdcard{ display:flex;flex-direction:column;overflow:hidden; background:#fff;border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-1); transition:transform .38s var(--spring),box-shadow .38s var(--ease),border-color .3s var(--ease); } .bdcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--line-2)} /* 6/5 is measured, not taste. Every catalog image arrives as exactly 820x460 (aspect 1.783) with the product centred inside baked-in WHITE pillarbox bars, and across all 71 the widest product covers 61.2% of the frame. A cover crop to 6/5 keeps the middle 67.3% of the width, so it eats most of the white and clips no product on ANY of them (1/1 would clip 28 of 71, 4/3 leaves the tiles looking half empty again). Nothing is cropped vertically, so the full height of every shot survives. */ .bdcard__frame{ position:relative;display:block;aspect-ratio:6/5;overflow:hidden;background:var(--soft); } .bdcard__img{ position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:cover;object-position:center;background:var(--soft); transition:transform .7s var(--ease); } .bdcard:hover .bdcard__img{transform:scale(1.05)} /* The footer is one line. Vertical padding is deliberately mean: the tile is a swatch with a label, and a stacked name-over-pill block was costing more height than the picture it belonged to. */ .bdcard__body{ flex:1;display:flex;flex-direction:column;gap:3px; padding:7px 10px 8px;border-top:1px solid var(--line); } /* Name left, tag right, on the same line. nowrap on anything wider than a phone: a long name clamps to two lines with the tag still beside it, so the tag can never fall onto a third line and rebuild the stacked block this redesign removed. Two-up mobile is too narrow for that, so it wraps there. */ .bdcard__row{ display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:3px 8px; } .bdcard__name{ flex:1 1 auto;min-width:0; font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* sentence case, not the uppercase-with-tracking pill used elsewhere: at this size "+$200 upgrade" set normally is both narrower and easier to read, which is the whole point of putting it on the name's line */ .bdcard__tag{ flex:0 0 auto;display:inline-flex; font-size:11.5px;font-weight:700;line-height:1.25; padding:3px 9px;border-radius:999px;white-space:nowrap; } /* free is the resting state of the whole page, so it reads calm and settled */ .bdcard__tag--free{color:#2f7a54;background:#e8f7ee;border:1px solid #cbeada} /* a price never appears without the word "upgrade" next to it */ .bdcard__tag--up{ color:#fff;background-image:var(--grad-flat); box-shadow:0 7px 16px rgba(176,44,214,.24); } .bdcard__cap{font-size:10.5px;line-height:1.35;color:var(--muted)} /* ---- the quiet row: "no backdrop or provide your own" is an option, not a product, so it never gets showcase tiles ---- */ .bdgal__quiet{ margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px; background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:14px 18px;box-shadow:var(--shadow-1); } .bdgal__quiet h3{ font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35;margin:0; } .bdgal__quiet p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0} .bdgal__quietlist{ display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none; width:100%; } .bdgal__quietlist li{ font-size:12.5px;font-weight:500;color:var(--ink-2); background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 13px; } /* ---- loading skeleton ---- */ .bdskel{ aspect-ratio:16/9;border-radius:var(--r);border:1px solid var(--line); background:linear-gradient(100deg,#f4f1fa 0%,#faf8ff 42%,#f4f1fa 68%); background-size:280% 100%; } /* ---- fallback card. Visible with JavaScript off, hidden by default once the module takes over, and shown again if the catalog cannot be reached. It never mentions an error, only the next useful step. ---- */ .bdgal__fallback{ display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(24px,3.4vw,40px);box-shadow:var(--shadow-1); } .bdgal__fallback h3{ font-family:var(--display);font-weight:400;color:var(--ink); font-size:clamp(19px,2.2vw,26px);line-height:1.2;text-wrap:balance; } .bdgal__fallback p{font-size:15px;color:var(--muted);line-height:1.6;max-width:56ch} .js .bdgal__fallback{display:none} .js .bdgal__fallback.is-on{display:flex} /* with the fallback showing there is nothing to filter */ .js .bdgal.is-down .bdgal__chips, .js .bdgal.is-down .bdgal__note, .js .bdgal.is-down .bdgal__grid, .js .bdgal.is-down .bdgal__quiet{display:none} /* 5 across at full width, 4 once the wrap starts squeezing, 3 on a tablet, 2 on a phone. Explicit steps rather than auto-fill so the column count is predictable at the breakpoints the rest of the page already uses. */ @media (max-width:1120px){ .bdgal__grid{grid-template-columns:repeat(4,1fr)} } @media (max-width:1000px){ .bdgal__grid{grid-template-columns:repeat(3,1fr)} } @media (max-width:760px){ .bdgal__grid{grid-template-columns:repeat(2,1fr);gap:12px} /* two-up is too narrow to hold a name and a pill side by side */ .bdcard__row{flex-wrap:wrap} .bdcard__name{-webkit-line-clamp:1} /* chips still wrap freely, just tighter: two lines of chip on a phone is a lot of row, so the padding and the sub-label give ground first */ .bdchip{font-size:13px;padding:8px 13px 9px} .bdchip__price{font-size:10.5px} .bdgal__chips{gap:8px} } /* ========================================================================== ADD-ON CARDS Titles sit on a solid card body under the photo, in the card typography used everywhere else, rather than floating over busy imagery. ========================================================================== */ .addongrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .addon{ display:flex;flex-direction:column;overflow:hidden; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-1); transition:transform .38s var(--spring),box-shadow .38s var(--ease),border-color .3s var(--ease); } .addon:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:var(--line-2)} .addon__frame{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--soft)} .addon__img{ position:absolute;inset:0;display:block; background-size:cover;background-position:center;background-repeat:no-repeat; transition:transform .8s var(--ease); } .addon:hover .addon__img{transform:scale(1.05)} .addon__body{flex:1;padding:20px 20px 22px;border-top:1px solid var(--line)} .addon__name{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:7px} .addon__text{font-size:14px;color:var(--muted);line-height:1.5} /* ========================================================================== CLIENT / VENUE WALL ========================================================================== */ .logos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .logos li{ font-size:14px;font-weight:500;color:var(--ink-2); background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 17px; opacity:.82;transition:opacity .25s var(--ease),transform .3s var(--spring),border-color .25s; } .logos li:hover{opacity:1;transform:translateY(-3px);border-color:var(--line-2)} .logos__more{ margin-top:22px;text-align:center;font-size:14.5px;color:var(--muted); } /* ========================================================================== CTA BAND ========================================================================== */ .ctaband{ position:relative;overflow:hidden;isolation:isolate; background-image:var(--grad);color:#fff;border-radius:var(--r-xl); padding:clamp(34px,5vw,62px) clamp(24px,4vw,52px);text-align:center; box-shadow:var(--shadow-3); } .ctaband::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(48% 60% at 14% 16%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 66%), radial-gradient(44% 54% at 88% 88%, rgba(255,90,170,.34) 0%, rgba(255,90,170,0) 68%); } .ctaband__title{ font-family:var(--display);font-weight:400;font-size:clamp(24px,3.2vw,40px); line-height:1.16;margin-bottom:14px;text-wrap:balance; } .ctaband p{font-size:clamp(15px,1.4vw,17.5px);color:rgba(255,255,255,.9);max-width:62ch;margin:0 auto 26px;text-wrap:balance} .ctaband__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} /* email stays available but demoted, so the form is the obvious next step */ .ctaband__alt{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.82)} .ctaband__alt a{color:#fff;font-weight:500;text-decoration:underline;text-underline-offset:3px} /* ========================================================================== SMALL PRINT + SECTION HELPERS ========================================================================== */ .smallprint{ margin-top:28px;max-width:820px;margin-left:auto;margin-right:auto;text-align:center; font-size:13.5px;color:var(--muted);line-height:1.6; } .smallprint a{color:var(--pink-ink);font-weight:700} .inclgrid--onsoft .incl{background:#fff;border-color:var(--line)} .inclgrid--onsoft .incl:hover{background:#fff;border-color:var(--line-2);box-shadow:var(--shadow-2)} .inclgrid--4{grid-template-columns:repeat(4,1fr)} .section--tight{padding:clamp(46px,5vw,72px) 0} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1120px){ .hero__inner{grid-template-columns:1fr;gap:40px} .feed{justify-self:start;max-width:520px} .feed__grid{grid-template-columns:repeat(6,1fr)} .glam{grid-template-columns:1fr;gap:28px} .foot__in{grid-template-columns:1fr 1fr 1fr} .foot__brand{grid-column:1 / -1} .inclgrid--4{grid-template-columns:repeat(3,1fr)} } @media (max-width:1000px){ .mainnav,.bar__cta,.utility{display:none} .burger{display:block} .bar__in{min-height:66px} .bottombar{display:flex} body{padding-bottom:74px} .doorgrid{grid-template-columns:1fr} .door__photo{aspect-ratio:16/9} .pricegrid{grid-template-columns:repeat(2,1fr)} .inclgrid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .boothgrid{grid-template-columns:1fr} .booth{text-align:left;display:grid;grid-template-columns:120px 1fr;grid-template-areas:"img name" "img price" "img text" "img list" "img cta";column-gap:22px;align-content:start} .booth__img{grid-area:img;width:100%;height:100%;min-height:170px;margin:0} .booth__name{grid-area:name} .booth__price{grid-area:price} .booth__text{grid-area:text} .booth__list{grid-area:list} .booth .btn{grid-area:cta;align-self:start;justify-self:start} .areagrid{grid-template-columns:1fr;gap:26px} .revgrid{grid-template-columns:repeat(2,1fr)} .hero{min-height:auto;padding:56px 0 84px} .hero--page{min-height:auto;padding:44px 0 56px} .packgrid,.packgrid--2{grid-template-columns:1fr} .split,.split--flip{grid-template-columns:1fr;gap:26px} .split--flip .split__media{order:0} .split__media,.split__media--wide,.split__media--tall{aspect-ratio:16/10} .tiles{grid-template-columns:repeat(3,1fr)} .addongrid{grid-template-columns:repeat(2,1fr)} .inclgrid--4{grid-template-columns:repeat(2,1fr)} .wallgrid{grid-template-columns:1fr} /* one card per row from here down; keep the wide letterbox crop */ .pack__photo--sq{max-height:none} } @media (max-width:760px){ :root{--pad:20px} body{font-size:16px} .hero{padding:44px 0 78px} .hero__display-lg{font-size:clamp(46px,15vw,86px)} .hero__display-sm{font-size:clamp(17px,4.6vw,26px)} .hero__title{font-size:16px} .hero__actions .btn{flex:1 1 100%} .hero__facts{flex-direction:column;gap:8px} .feed{max-width:100%} .feed__grid{grid-template-columns:repeat(4,1fr)} .feed__grid .feed__tile:nth-child(5), .feed__grid .feed__tile:nth-child(6){display:none} .proof__list{gap:8px 18px} .proof__list li{font-size:13px} .pricegrid{grid-template-columns:1fr} .price{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"name fig" "text text";align-items:baseline;column-gap:16px;padding:20px} .price__name{grid-area:name;margin-bottom:0} .price__fig{grid-area:fig;justify-self:end;margin-bottom:0;font-size:26px} .price__text{grid-area:text;margin-top:10px} .inclgrid{grid-template-columns:1fr} .incl{padding:20px} .steps{grid-template-columns:1fr} .booth{grid-template-columns:96px 1fr;column-gap:16px} .booth__img{min-height:120px} .revgrid{grid-template-columns:1fr} .glam{padding:22px} .ba__handle{width:44px;height:44px;margin:-22px 0 0 -22px} .mmenu__links{grid-template-columns:1fr} .foot__in{grid-template-columns:1fr 1fr;gap:32px 24px} .foot__legal{flex-direction:column;gap:6px} .checker__form .btn{flex:1 1 100%} .tiles,.tiles--3{grid-template-columns:repeat(2,1fr)} .addongrid{grid-template-columns:1fr} .inclgrid--4{grid-template-columns:1fr} .hero--page .hero__title{font-size:clamp(27px,8vw,40px)} .pack__photo{aspect-ratio:16/10} .pack__photo--sq{aspect-ratio:16/9} .ctaband__actions .btn{flex:1 1 100%} .crumbs{font-size:11px} .wall__body{padding:20px 20px 18px} .upsell{padding:16px;gap:12px} } @media (max-width:420px){ .bottombar__btn{font-size:11px;letter-spacing:.05em;padding:0 8px} .booth{grid-template-columns:1fr;grid-template-areas:"img" "name" "price" "text" "list" "cta";text-align:center} /* back to a fixed portrait crop: a full-width cover box would slice the booth in half, and contain would shrink it to a stamp */ .booth__img{width:152px;height:208px;min-height:0;margin:0 auto 16px} .booth .btn{justify-self:center} } /* ========================================================================== MOTION Everything below is gated behind html.js so the page renders finished with JavaScript off, and every keyframe animates FROM hidden with fill-mode both so the base state is always the finished state. ========================================================================== */ @keyframes sxpRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes sxpPop{ 0%{opacity:0;transform:translateY(22px) scale(.955)} 62%{opacity:1;transform:translateY(0) scale(1.014)} 100%{opacity:1;transform:none} } /* shutter snap: a quick squeeze then release, like a lens firing */ @keyframes sxpSnap{ 0%{opacity:0;transform:scale(.86)} 45%{opacity:1;transform:scale(1.06)} 70%{transform:scale(.98)} 100%{opacity:1;transform:none} } @keyframes sxpFlash{ 0%{opacity:0} 34%{opacity:.16} 52%{opacity:.03} 66%{opacity:.09} 100%{opacity:0} } /* Travels exactly one tile width, from a white-only window to a white-only window, so the resting state after the sweep is pure white every time. */ @keyframes sxpSheen{ 0%{background-position:0% 0} 100%{background-position:100% 0} } @keyframes sxpSettle{from{transform:scale(1.08)}to{transform:scale(1)}} @keyframes sxpDrift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(3%,-2.5%,0) scale(1.07)} 100%{transform:translate3d(0,0,0) scale(1)} } @keyframes sxpFloat{ 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-16px,-22px,0)} 100%{transform:translate3d(0,0,0)} } @keyframes sxpEdge{0%{background-position:0% 0}100%{background-position:200% 0}} @keyframes sxpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} /* scales the r=150 ping ring from a dot at the center out to the 35 mile ring */ @keyframes sxpPulseRing{ 0%{transform:scale(.05);opacity:0} 14%{opacity:.9} 60%{opacity:.55} 100%{transform:scale(1);opacity:0} } @keyframes sxpBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}} /* availability celebration: a hard camera flash with the usual second pop */ @keyframes sxpBurstFlash{ 0%{opacity:0} 16%{opacity:.72} 38%{opacity:.05} 54%{opacity:.26} 100%{opacity:0} } /* sparks thrown out from the middle of the panel by the flash */ @keyframes sxpSpark{ 0%{opacity:0;transform:translate3d(0,0,0) scale(.35) rotate(0deg)} 14%{opacity:1} 100%{opacity:0;transform:translate3d(var(--sx,0),var(--sy,0),0) scale(1) rotate(var(--sr,180deg))} } @keyframes sxpBeat{ 0%,100%{transform:scale(.82);box-shadow:0 0 0 0 rgba(249,44,139,.5)} 50%{transform:scale(1.1);box-shadow:0 0 0 11px rgba(249,44,139,0)} } /* ---- hero entrance choreography (play once, hold) ---- */ .js .hero__eyebrow{animation:sxpRise .62s var(--ease) 40ms both} .js .hero__display{animation:sxpPop .66s var(--ease) 80ms both} .js .hero__title{animation:sxpRise .62s var(--ease) 260ms both} .js .hero__actions{animation:sxpRise .62s var(--ease) 400ms both} .js .hero__facts{animation:sxpRise .62s var(--ease) 500ms both} .js .hero__scrollwrap{animation:sxpRise .62s var(--ease) 620ms both} .js .hero__photo{animation:sxpSettle 7s var(--ease) both} .js .hero__glow{animation:sxpDrift 19s ease-in-out infinite} .js .hero__confetti{animation:sxpFloat 34s ease-in-out infinite} .js .hero__edge{animation:sxpEdge 9s linear infinite alternate} .js .hero__flash{animation:sxpFlash 620ms var(--ease) 260ms both} .js .hero__chevron{animation:sxpBob 2.6s ease-in-out 1.3s infinite} .js .feed__pulse{animation:sxpBlink 2.2s ease-in-out infinite} .js .foot::before{animation:sxpEdge 12s linear infinite alternate} /* live gallery feed: tiles land one after another, like a gallery filling up */ .js .feed{animation:sxpRise .7s var(--ease) 520ms both} .js .feed__tile{animation:sxpSnap .58s var(--spring) both} .js .feed__tile:nth-child(1){animation-delay:760ms} .js .feed__tile:nth-child(2){animation-delay:880ms} .js .feed__tile:nth-child(3){animation-delay:1000ms} .js .feed__tile:nth-child(4){animation-delay:1120ms} .js .feed__tile:nth-child(5){animation-delay:1240ms} .js .feed__tile:nth-child(6){animation-delay:1360ms} /* headline sheen. background-repeat MUST be repeat-x: at the ends of the sweep the gradient sits outside the text box and no-repeat would paint nothing, leaving the transparent-filled headline completely invisible. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .js .hero__display-lg{ background-image:linear-gradient(100deg, #fff 0%,#fff 40%,#ffe4f5 47%,#ffc9ea 50%,#ffe4f5 53%,#fff 60%,#fff 100%); background-size:300% 100%; background-repeat:repeat-x; background-position:100% 0; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:sxpPop .66s var(--ease) 80ms both, sxpSheen 2s var(--ease) 900ms 1 both; } } /* ---- scroll reveals ---- */ .js .reveal{opacity:0;transform:translateY(26px);will-change:opacity,transform} .js .reveal.is-in{ opacity:1;transform:none; transition:opacity .68s var(--ease) var(--d,0ms), transform .78s var(--ease) var(--d,0ms); } /* if the observer never runs, nothing stays hidden */ .no-io .reveal{opacity:1!important;transform:none!important} /* ---- backdrop gallery ---- Tiles are built by app.js AFTER the reveal observer has run, so they carry their own play-once entrance with a per-tile --d instead of .reveal. The delay is capped in the module so a 71 tile filter never crawls. */ .js .bdcard{animation:sxpRise .5s var(--ease) both;animation-delay:var(--d,0ms)} .js .bdskel{animation:sxpSheen 1.3s linear infinite} /* ---- check your date ---- */ .js .datecheck::before{animation:sxpEdge 12s linear infinite alternate} .js .datecheck__glow{animation:sxpDrift 21s ease-in-out infinite} .js .datecheck__dot{animation:sxpBlink 2.3s ease-in-out infinite} .js .dcres{animation:sxpRise .5s var(--ease) both} .js .dcres__pulse{animation:sxpBeat 1.15s var(--ease) infinite} .js .datecheck.is-hit .datecheck__flash{animation:sxpBurstFlash .72s var(--ease) both} .js .datecheck__spark{animation:sxpSpark 1.05s var(--ease) both} /* service-area radar pulse, only while the section is on screen */ .js .areamap.is-in .areamap__pulse{animation:sxpPulseRing 3.4s var(--ease) infinite} /* ---- reduced motion: collapse everything ---- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } .js .reveal{opacity:1!important;transform:none!important} .js .hero__photo{transform:none!important} .hero__flash{display:none} .datecheck__flash,.datecheck__burst{display:none} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .js .hero__display-lg{ background-image:none; -webkit-text-fill-color:#fff;color:#fff; } } }