/* ========================================================================== EuroNAIListry — V1 — Nail Oasis — shared design system All CSS lives here; pages link this file. Google Fonts is the sole external resource (linked per-page in ). ---- WCAG AA contrast ledger (computed, relative-luminance method) ---- ink #3A302B on ivory #FBF6F2 -> 11.9 : 1 (body text) PASS AAA ink #3A302B on blush #F4DDD9 -> 9.9 : 1 (text on blush) PASS AAA ink #3A302B on peach #F6E7DA -> 10.6 : 1 (text on peach) PASS AAA ivory #FBF6F2 on rosewood #A8515A -> 4.9 : 1 (CTA button label) PASS AA ink-soft #6B5C53 on ivory #FBF6F2 -> 6.0 : 1 (secondary copy) PASS AA ivory #FBF6F2 on ink #3A302B -> 11.9 : 1 (footer text) PASS AAA e7ded8 #E7DED8 on ink #3A302B -> 9.4 : 1 (footer links) PASS AAA peach #F6E7DA on ink #3A302B -> 10.6 : 1 (footer headings) PASS AAA sage #AFA090 on ivory #FBF6F2 -> 2.4 : 1 DECORATIVE ONLY — hairlines, chip borders, blob drift accents, footer meta text only; never carries essential copy or meaningful icons. Muted labels use --ink-soft instead. ========================================================================== */ :root{ --ivory:#FBF6F2; --blush:#F4DDD9; --peach:#F6E7DA; --ink:#3A302B; --ink-soft:#6B5C53; --rosewood:#A8515A; --rosewood-deep:#8E414A; --sage:#AFA090; --panel:#FFFFFF; --font-display:"DM Serif Display",Georgia,serif; --font-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --container:72rem; --gutter:clamp(1.25rem,5vw,3rem); --space:clamp(4rem,10vw,7.5rem); --r-lg:2.5rem; --r-xl:3.5rem; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--font-body); color:var(--ink); background:var(--ivory); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .skip-link{ position:absolute;left:1rem;top:-4rem;background:var(--ink);color:var(--ivory); padding:.75rem 1.25rem;border-radius:1rem;z-index:200;transition:top .2s ease; } .skip-link:focus{top:1rem} @media (prefers-reduced-motion:reduce){.skip-link{transition:none}} :focus-visible{outline:2px solid var(--rosewood-deep);outline-offset:3px} /* -------------------------------------------------- demo bar */ .demo-bar{ background:var(--rosewood-deep);color:var(--ivory);text-align:center; font:600 .78rem/1.4 var(--font-body);letter-spacing:.04em; padding:.6rem 1rem; } .demo-bar strong{color:var(--peach)} /* -------------------------------------------------- header + mobile nav */ .site-header{ padding:1.2rem 0;background:var(--ivory);position:relative;z-index:100; } .nav-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem} .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)} .brand img{width:36px;height:36px;border-radius:50%;object-fit:contain} .brand-word{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.01em} .brand-word .nail{color:var(--rosewood-deep);font-style:italic} .brand-word small{display:block;font-family:var(--font-body);font-weight:500; font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)} nav[aria-label="Main navigation"]{display:flex;align-items:center} nav[aria-label="Main navigation"] ul{list-style:none;display:flex;gap:clamp(1rem,3vw,2.25rem);flex-wrap:wrap} nav[aria-label="Main navigation"] a{ text-decoration:none;font-size:.85rem;letter-spacing:.03em; color:var(--ink);padding:.3rem .2rem;border-bottom:2px solid transparent; } nav[aria-label="Main navigation"] a:hover, nav[aria-label="Main navigation"] a[aria-current="page"]{border-bottom-color:var(--rosewood)} .nav-toggle{ display:none;flex-direction:column;justify-content:center;gap:5px; width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--blush); background:var(--panel);cursor:pointer;align-items:center; } .nav-toggle span{width:1.15rem;height:2px;background:var(--rosewood-deep);border-radius:2px;transition:transform .2s ease,opacity .2s ease} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (prefers-reduced-motion:reduce){.nav-toggle span{transition:none}} .nav-book{display:flex} @media (max-width:60rem){ .nav-toggle{display:inline-flex} nav[aria-label="Main navigation"]{position:relative} .nav-menu{ position:absolute;top:calc(100% + .9rem);right:0; background:var(--panel);border:1px solid var(--blush);border-radius:1.5rem; padding:1.1rem 1.4rem;box-shadow:0 24px 48px -20px rgba(58,48,43,.35); flex-direction:column;gap:.2rem !important;min-width:12rem; display:none !important; } .nav-menu.is-open{display:flex !important} .nav-menu li{width:100%} .nav-menu a{display:block;padding:.6rem .2rem;border-bottom:1px dashed var(--blush) !important} .nav-menu li:last-child a{border-bottom:none !important} } /* -------------------------------------------------- buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font:600 .85rem/1 var(--font-body);letter-spacing:.02em; padding:1rem 1.9rem;border-radius:999px;text-decoration:none;border:1px solid transparent; transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease; } @media (prefers-reduced-motion:reduce){.btn{transition:none}} .btn--primary{background:var(--rosewood);color:var(--ivory);box-shadow:0 10px 26px -12px rgba(168,81,90,.55)} .btn--primary:hover{background:var(--rosewood-deep);transform:translateY(-2px)} .btn--ghost{background:var(--panel);color:var(--ink);border-color:var(--blush)} .btn--ghost:hover{background:var(--blush)} .btn--light{background:var(--ivory);color:var(--rosewood-deep)} .btn--light:hover{background:var(--peach)} /* -------------------------------------------------- hero (mesh gradient) */ .hero{position:relative;padding:clamp(3rem,8vw,5.5rem) 0 clamp(3.5rem,8vw,6rem);overflow:hidden} .mesh{position:absolute;inset:-10% -10% -10% -10%;z-index:0;filter:blur(60px);pointer-events:none} .mesh span{position:absolute;border-radius:50%;opacity:.65} .mesh .b1{width:42vw;height:42vw;max-width:560px;max-height:560px;top:-8%;left:-6%; background:radial-gradient(circle,var(--blush),transparent 72%); animation:drift1 26s ease-in-out infinite alternate;} .mesh .b2{width:38vw;height:38vw;max-width:520px;max-height:520px;top:20%;right:-8%; background:radial-gradient(circle,var(--peach),transparent 72%); animation:drift2 32s ease-in-out infinite alternate;} .mesh .b3{width:30vw;height:30vw;max-width:420px;max-height:420px;bottom:-12%;left:22%; background:radial-gradient(circle,rgba(168,81,90,.28),transparent 72%); animation:drift3 22s ease-in-out infinite alternate;} @keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(4%,6%) scale(1.08)}} @keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-6%,4%) scale(1.05)}} @keyframes drift3{from{transform:translate(0,0) scale(1)}to{transform:translate(3%,-5%) scale(1.1)}} @media (prefers-reduced-motion:reduce){.mesh span{animation:none}} .hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem);align-items:center} @media (min-width:56rem){.hero .container{grid-template-columns:1.05fr .95fr}} .hero-copy{display:grid;gap:1.4rem;justify-items:start} .eyebrow{ display:inline-flex;align-items:center;gap:.55rem; font:600 .74rem/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase; color:var(--rosewood-deep); } .hero h1{ font-family:var(--font-display);font-weight:400; font-size:clamp(2.4rem,6.2vw,4.2rem);line-height:1.06;letter-spacing:-.01em; } .hero h1 em{font-style:italic;color:var(--rosewood-deep)} .hero .lede{max-width:32rem;font-size:clamp(1rem,1.6vw,1.12rem);color:var(--ink-soft)} .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.3rem} .chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem} .chip{ display:inline-flex;align-items:center;gap:.4rem; background:var(--panel);border:1px solid var(--blush);border-radius:999px; padding:.5rem 1.05rem;font-size:.78rem;color:var(--ink-soft);letter-spacing:.02em; box-shadow:0 6px 18px -14px rgba(58,48,43,.4); } .chip svg{width:14px;height:14px;flex:none;color:var(--rosewood)} .hero-photo{display:flex;justify-content:center} .blob-frame{ position:relative;width:min(100%,380px);aspect-ratio:9/13.5; border-radius:42% 58% 60% 40% / 50% 45% 55% 50%; overflow:hidden;box-shadow:0 30px 60px -24px rgba(58,48,43,.35); background:var(--blush); } .blob-frame img,.blob-frame video{width:100%;height:100%;object-fit:cover} /* -------------------------------------------------- page-head (sub-pages) */ .page-head{ position:relative;overflow:hidden; padding:clamp(3.5rem,9vw,5.5rem) 0 clamp(3rem,7vw,4.5rem); } .page-head .container{position:relative;z-index:2;display:grid;gap:1.1rem;max-width:42rem} .page-head h1{ font-family:var(--font-display);font-weight:400; font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1.08;letter-spacing:-.01em; } .page-head .lede{color:var(--ink-soft);font-size:clamp(1rem,1.6vw,1.1rem);max-width:36rem} .page-head .lede a{color:var(--rosewood-deep);text-decoration:underline;text-underline-offset:3px} .page-head-art{ position:absolute;z-index:1;top:8%;right:-4%;width:min(30vw,300px);aspect-ratio:1/1.15; border-radius:58% 42% 40% 60% / 45% 55% 45% 55%;overflow:hidden; box-shadow:0 30px 60px -28px rgba(58,48,43,.4);opacity:.92; } .page-head-art img{width:100%;height:100%;object-fit:cover} @media (max-width:56rem){.page-head-art{display:none}} .page-head.band-soft > .container{position:relative;z-index:2} /* -------------------------------------------------- sections */ .section{padding:var(--space) 0} .section--tight{padding:clamp(2.5rem,6vw,4rem) 0} .section-head{max-width:38rem;margin-bottom:clamp(2rem,5vw,3.25rem)} .section-head.center{margin-inline:auto;text-align:center} .section-head h2{ font-family:var(--font-display);font-weight:400; font-size:clamp(1.9rem,4.5vw,2.8rem);margin-top:.5rem;line-height:1.14; } .section-head .lede{margin-top:.85rem;color:var(--ink-soft);max-width:34rem} .section-head.center .lede{margin-inline:auto} .band-soft{ position:relative; background:linear-gradient(180deg,var(--blush) 0%,var(--peach) 100%); } .band-soft .ai-veil{ position:absolute;inset:0;z-index:0;overflow:hidden;opacity:.28;pointer-events:none; } .band-soft .ai-veil img{width:100%;height:100%;object-fit:cover} .band-soft > .container{position:relative;z-index:1} /* ritual cards */ .ritual-grid{display:grid;grid-template-columns:1fr;gap:1.5rem} @media (min-width:56rem){.ritual-grid{grid-template-columns:repeat(3,1fr)}} .ritual-card{ background:var(--panel);border-radius:var(--r-lg);padding:clamp(1.75rem,3vw,2.25rem); box-shadow:0 18px 40px -28px rgba(58,48,43,.4); } .ritual-card .num{ display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%; background:var(--blush);color:var(--rosewood-deep);font-family:var(--font-display);font-size:1.1rem; margin-bottom:1rem; } .ritual-card h3{font-family:var(--font-display);font-weight:400;font-size:1.35rem;margin-bottom:.6rem} .ritual-card p{color:var(--ink-soft);font-size:.96rem} /* -------------------------------------------------- gallery + filter + lightbox */ .filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:clamp(2rem,5vw,3rem)} .filter-btn{ font:600 .82rem/1 var(--font-body);letter-spacing:.02em;color:var(--ink-soft); background:var(--panel);border:1px solid var(--blush);border-radius:999px; padding:.65rem 1.3rem;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease; } @media (prefers-reduced-motion:reduce){.filter-btn{transition:none}} .filter-btn:hover{border-color:var(--rosewood)} .filter-btn[aria-pressed="true"]{background:var(--rosewood);color:var(--ivory);border-color:var(--rosewood)} .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(1rem,2.5vw,1.6rem)} .gallery-item{text-align:center;cursor:pointer} .blob{overflow:hidden;aspect-ratio:3/4;box-shadow:0 20px 38px -24px rgba(58,48,43,.4)} .blob img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease} @media (prefers-reduced-motion:reduce){.blob img{transition:none}} .gallery-item:hover .blob img{transform:scale(1.05)} .gallery-item:nth-child(3n+1) .blob{border-radius:44% 56% 62% 38% / 55% 48% 52% 45%} .gallery-item:nth-child(3n+2) .blob{border-radius:60% 40% 42% 58% / 46% 55% 45% 54%} .gallery-item:nth-child(3n) .blob{border-radius:50% 50% 38% 62% / 60% 40% 60% 40%} .gallery-item figcaption{ margin-top:.85rem;font-family:var(--font-display);font-style:italic;font-size:.95rem;color:var(--rosewood-deep); } .gallery-item figcaption .no{font-style:normal;font-weight:600;color:var(--ink-soft);font-family:var(--font-body);font-size:.78rem;letter-spacing:.04em} .gallery-item.is-hidden{display:none} @keyframes filterIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}} @keyframes filterOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94)}} .gallery-item.is-filtering-in{animation:filterIn .32s ease both} .gallery-item.is-filtering-out{animation:filterOut .32s ease both} @media (prefers-reduced-motion:reduce){ .gallery-item.is-filtering-in,.gallery-item.is-filtering-out{animation:none} } .lightbox{ position:fixed;inset:0;z-index:300;display:none; background:rgba(58,48,43,.82);padding:clamp(1.5rem,5vw,3rem); align-items:center;justify-content:center; } .lightbox.is-open{display:flex} .lightbox figure{max-width:min(90vw,32rem);text-align:center} .lightbox img{width:100%;max-height:80vh;object-fit:contain;border-radius:1.5rem;box-shadow:0 30px 70px -20px rgba(0,0,0,.55)} .lightbox figcaption{color:var(--ivory);margin-top:1rem;font-family:var(--font-display);font-style:italic} .lightbox__close{ position:absolute;top:clamp(1rem,4vw,2rem);right:clamp(1rem,4vw,2rem); width:2.75rem;height:2.75rem;border-radius:50%;border:none;cursor:pointer; background:var(--ivory);color:var(--ink);font-size:1.5rem;line-height:1; } /* -------------------------------------------------- service menu */ .menu-panel{ background:var(--panel);border-radius:var(--r-xl); padding:clamp(2rem,5vw,3.25rem);box-shadow:0 24px 60px -32px rgba(58,48,43,.42); } .menu-panel + .menu-panel{margin-top:2rem} .menu-cols{display:grid;grid-template-columns:1fr;gap:2.5rem} @media (min-width:64rem){.menu-cols{grid-template-columns:1fr 1fr}} .menu-group h3{ font-family:var(--font-display);font-weight:400;font-style:italic; font-size:1.35rem;color:var(--rosewood-deep);margin-bottom:1.1rem; } .menu-row{display:flex;align-items:baseline;gap:.5rem;padding:.7rem 0;border-bottom:1px dashed var(--blush)} .menu-row .name{font-weight:500;font-size:.98rem} .menu-row .fill{flex:1;border-bottom:1px dotted var(--sage);transform:translateY(-4px)} .menu-row .price{font-family:var(--font-display);font-size:1.05rem;color:var(--rosewood-deep);white-space:nowrap} .menu-note{margin-top:1.2rem;font-size:.85rem;color:var(--ink-soft)} /* full-menu page: category panels with priced items + descriptions */ .menu-panel .cat-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.3rem} .menu-panel .cat-head h2{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:1.6rem;color:var(--rosewood-deep)} .category-note{color:var(--ink-soft);font-size:.9rem;margin-bottom:1.3rem} .menu-item{padding:1rem 0;border-bottom:1px dashed var(--blush);display:grid;gap:.25rem} .menu-item:last-child{border-bottom:none} .menu-item .item-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem} .menu-item h3{font-family:var(--font-display);font-weight:400;font-size:1.12rem} .menu-item .price{font:600 .85rem/1 var(--font-body);color:var(--rosewood-deep);white-space:nowrap} .menu-item .desc{color:var(--ink-soft);font-size:.92rem} .gift-box{ margin-top:2rem;background:linear-gradient(135deg,var(--blush),var(--peach)); border-radius:var(--r-lg);padding:clamp(1.75rem,4vw,2.5rem); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem; } .gift-box h2{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin-bottom:.4rem} .gift-box p{color:var(--ink-soft);max-width:30rem} /* -------------------------------------------------- artist / story block */ .story-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center} @media (min-width:56rem){.story-grid{grid-template-columns:.85fr 1.15fr}} .story-photo .blob-frame{width:100%;max-width:420px;aspect-ratio:4/5; border-radius:58% 42% 40% 60% / 45% 55% 45% 55%;margin-inline:auto} .story-copy blockquote{ font-family:var(--font-display);font-style:italic;font-weight:400; font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.42;color:var(--ink); margin:1.1rem 0 1.4rem; } .story-copy cite{display:block;margin-top:.9rem;font-style:normal;font-size:.78rem; letter-spacing:.1em;text-transform:uppercase;color:var(--rosewood-deep)} /* about page prose */ .about-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,6vw,4rem);align-items:start} @media (min-width:56rem){.about-grid{grid-template-columns:.8fr 1.2fr}} .about-photo .blob-frame{width:100%;max-width:420px;aspect-ratio:4/5; border-radius:44% 56% 62% 38% / 55% 48% 52% 45%;margin-inline:auto;position:sticky;top:2rem} .prose h1{font-family:var(--font-display);font-weight:400;line-height:1.08;margin-bottom:.6rem} .prose h2{font-family:var(--font-display);font-weight:400;font-size:1.55rem;margin:2.2rem 0 .8rem;color:var(--rosewood-deep)} .prose p{margin-bottom:1rem;color:var(--ink)} .prose .lede{color:var(--ink-soft);margin-bottom:1.4rem} .prose figure{margin-top:1.6rem} .prose figure img{border-radius:var(--r-lg);width:100%;max-width:24rem;max-height:32rem;object-fit:cover;box-shadow:0 24px 48px -26px rgba(58,48,43,.4)} .prose figcaption{font-size:.8rem;color:var(--ink-soft);margin-top:.6rem} .video-frame{ margin-top:1rem;border-radius:var(--r-lg);width:100%;max-width:24rem; aspect-ratio:9/16;object-fit:cover; box-shadow:0 24px 48px -26px rgba(58,48,43,.4);background:var(--blush); } /* -------------------------------------------------- visit / contact info */ .info-grid{display:grid;grid-template-columns:1fr;gap:1.5rem} @media (min-width:48rem){.info-grid{grid-template-columns:repeat(3,1fr)}} .info-card{ background:var(--panel);border-radius:var(--r-lg);padding:1.75rem; box-shadow:0 16px 36px -26px rgba(58,48,43,.4); } .info-card h3{font-family:var(--font-display);font-weight:400;font-size:1.15rem;margin-bottom:.5rem} .info-card p{font-size:.92rem;color:var(--ink-soft)} .info-card a{text-decoration:underline;text-decoration-color:var(--rosewood);text-underline-offset:3px;color:var(--ink)} .contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,6vw,3.5rem)} @media (min-width:56rem){.contact-grid{grid-template-columns:1fr 1fr}} .contact-list{list-style:none;display:grid;gap:1.4rem} .contact-list li{padding-bottom:1.1rem;border-bottom:1px dashed var(--blush)} .contact-list li:last-child{border-bottom:none} .contact-list .label{display:block;font-family:var(--font-display);font-style:italic;color:var(--rosewood-deep);font-size:1.02rem;margin-bottom:.3rem} .contact-list a{text-decoration:underline;text-decoration-color:var(--rosewood);text-underline-offset:3px} .contact-list .muted{color:var(--ink-soft);font-size:.86rem} .social-row{display:flex;gap:.75rem;margin-top:1rem} .social-row a{ display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%; background:var(--panel);border:1px solid var(--blush);color:var(--rosewood-deep); transition:background .18s ease,transform .18s ease; } @media (prefers-reduced-motion:reduce){.social-row a{transition:none}} .social-row a:hover{background:var(--blush);transform:translateY(-2px)} .social-row svg{width:20px;height:20px;fill:currentColor} .map-embed-wrap{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 48px -26px rgba(58,48,43,.4);aspect-ratio:4/3;background:var(--blush)} .map-embed-wrap iframe{width:100%;height:100%;border:0;display:block} .directions-link{display:inline-block;margin-top:.85rem;font-size:.9rem;text-decoration:underline;text-decoration-color:var(--rosewood);text-underline-offset:3px;color:var(--ink-soft)} /* -------------------------------------------------- booking wizard */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } .wizard-note{ font-size:.85rem;color:var(--ink-soft);background:var(--panel); border:1px dashed var(--blush);border-radius:1.25rem; padding:.85rem 1.25rem;margin-bottom:1.75rem; } .wizard{margin-bottom:2rem} /* guarantee [hidden] wins over flex/grid display inside the wizard */ .wizard [hidden]{display:none !important} .wizard-steps{ list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem; } .wizard-steps li{ display:flex;align-items:center;gap:.55rem;flex:1 1 auto; background:var(--panel);border:1px solid var(--blush);border-radius:999px; padding:.5rem 1.1rem .5rem .5rem;font-size:.82rem;color:var(--ink-soft); transition:background .18s ease,border-color .18s ease,color .18s ease; } @media (prefers-reduced-motion:reduce){.wizard-steps li{transition:none}} .wizard-step-num{ display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%; background:var(--blush);color:var(--rosewood-deep);font-family:var(--font-display); font-size:.95rem;flex:none; } .wizard-step-label{white-space:nowrap} .wizard-steps li[aria-current="step"]{ background:var(--rosewood);border-color:var(--rosewood);color:var(--ivory); } .wizard-steps li[aria-current="step"] .wizard-step-num{background:var(--ivory);color:var(--rosewood-deep)} .wizard-steps li[data-done="true"]{border-color:var(--rosewood);color:var(--rosewood-deep)} .wizard-steps li[data-done="true"] .wizard-step-num{background:var(--rosewood);color:var(--ivory)} @media (max-width:40rem){ .wizard-step-label{display:none} .wizard-steps li{flex:none;padding:.5rem} } .wizard-panel{ background:var(--panel);border-radius:var(--r-xl); padding:clamp(1.75rem,4.5vw,3rem);box-shadow:0 24px 60px -32px rgba(58,48,43,.42); } .wizard-step-h{ font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,3vw,1.85rem); margin-bottom:1.3rem;outline:none; } .wizard-hint{color:var(--ink-soft);font-size:.88rem;margin:-.6rem 0 1.2rem} .wizard-step{ animation:wizardIn .32s ease both; } @media (prefers-reduced-motion:reduce){.wizard-step{animation:none}} @keyframes wizardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .wizard-actions{ display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-top:2rem;padding-top:1.5rem;border-top:1px dashed var(--blush); } .wizard-actions .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none} /* step 1 — service cards */ .service-fieldset{border:0} .service-grid{display:grid;grid-template-columns:1fr;gap:.75rem} @media (min-width:36rem){.service-grid{grid-template-columns:1fr 1fr}} .service-subhead{ grid-column:1/-1;font-family:var(--font-display);font-style:italic;font-weight:400; color:var(--rosewood-deep);font-size:1.1rem;margin-top:.4rem; } .service-subhead:first-child{margin-top:0} .service-card{cursor:pointer} .service-card input{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); } .service-card-inner{ display:flex;align-items:center;justify-content:space-between;gap:1rem; background:var(--ivory);border:1.5px solid var(--blush);border-radius:1.25rem; padding:.9rem 1.2rem;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; } @media (prefers-reduced-motion:reduce){.service-card-inner{transition:none}} .service-card:hover .service-card-inner{border-color:var(--rosewood)} .service-card input:focus-visible + .service-card-inner{outline:2px solid var(--rosewood-deep);outline-offset:2px} .service-card input:checked + .service-card-inner{ border-color:var(--rosewood);background:var(--blush); box-shadow:0 10px 24px -16px rgba(168,81,90,.5); } .service-name{font-weight:600;font-size:.96rem} .service-meta{font-size:.85rem;color:var(--ink-soft);white-space:nowrap} .service-card input:checked + .service-card-inner .service-meta{color:var(--rosewood-deep)} /* step 2 — calendar */ .calendar{background:var(--ivory);border-radius:1.5rem;padding:1.25rem;border:1px solid var(--blush)} .calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem} .calendar-label{font-family:var(--font-display);font-size:1.1rem;color:var(--rosewood-deep)} .calendar-nav{ width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--blush); background:var(--panel);cursor:pointer;font-size:1.1rem;color:var(--ink); display:inline-grid;place-items:center;transition:background .18s ease; } @media (prefers-reduced-motion:reduce){.calendar-nav{transition:none}} .calendar-nav:hover:not(:disabled){background:var(--blush)} .calendar-nav:disabled{opacity:.35;cursor:not-allowed} .calendar-dow{ display:grid;grid-template-columns:repeat(7,1fr);text-align:center; font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:.4rem; } .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem} .calendar-day{ aspect-ratio:1;display:grid;place-items:center;border-radius:50%; border:1px solid transparent;background:none;cursor:pointer;font-size:.88rem; color:var(--ink);transition:background .18s ease,color .18s ease; } @media (prefers-reduced-motion:reduce){.calendar-day{transition:none}} .calendar-day:hover:not(:disabled){background:var(--blush)} .calendar-day:disabled{color:var(--sage);opacity:.5;cursor:not-allowed} .calendar-day.is-empty{visibility:hidden} .calendar-day[aria-pressed="true"]{background:var(--rosewood);color:var(--ivory)} .slot-panel{margin-top:1.5rem} .slot-panel-h{font-family:var(--font-display);font-weight:400;font-style:italic;color:var(--rosewood-deep);font-size:1.05rem;margin-bottom:.8rem} .slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.6rem} .slot-pill{ border:1px solid var(--blush);background:var(--panel);border-radius:999px; padding:.6rem .8rem;font-size:.85rem;cursor:pointer;text-align:center; transition:background .18s ease,border-color .18s ease,color .18s ease; } @media (prefers-reduced-motion:reduce){.slot-pill{transition:none}} .slot-pill:hover:not(:disabled){border-color:var(--rosewood)} .slot-pill[aria-pressed="true"]{background:var(--rosewood);border-color:var(--rosewood);color:var(--ivory)} .slot-pill:disabled{color:var(--sage);opacity:.55;cursor:not-allowed;text-decoration:line-through} /* step 3 — details form */ .field-grid{display:grid;grid-template-columns:1fr;gap:1.1rem} @media (min-width:40rem){.field-grid{grid-template-columns:1fr 1fr}} .field{display:grid;gap:.4rem} .field--wide{grid-column:1/-1} .field label{font-size:.85rem;font-weight:600;color:var(--ink)} .field input,.field textarea{ font:inherit;font-size:.95rem;padding:.8rem 1rem;border-radius:1rem; border:1.5px solid var(--blush);background:var(--ivory);color:var(--ink); transition:border-color .18s ease; } @media (prefers-reduced-motion:reduce){.field input,.field textarea{transition:none}} .field input:focus-visible,.field textarea:focus-visible{border-color:var(--rosewood-deep)} .field input:invalid:not(:placeholder-shown){border-color:var(--rosewood-deep)} .field textarea{resize:vertical;font-family:inherit} /* step 4 — summary + confirm */ .summary-card{ background:var(--peach);border-radius:1.5rem;padding:1.5rem 1.75rem;margin-bottom:1.25rem; } .summary-row{ display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0; border-bottom:1px dashed rgba(58,48,43,.18);font-size:.95rem; } .summary-row:last-child{border-bottom:none} .summary-label{color:var(--ink-soft);font-weight:600} .summary-row--price span:last-child{font-family:var(--font-display);font-size:1.2rem;color:var(--rosewood-deep)} .deposit-line{color:var(--ink-soft);font-size:.9rem;margin-bottom:.5rem} .success-panel{ text-align:center;padding:2.5rem 1.5rem 1.5rem;margin-top:1.5rem; border-top:1px dashed var(--blush); } .success-icon{font-size:2.4rem;display:block;margin-bottom:.75rem} .success-panel h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin-bottom:.5rem;color:var(--rosewood-deep)} .success-panel p{color:var(--ink-soft);margin-bottom:1.5rem} .wizard-fallback{ text-align:center;font-size:.85rem;color:var(--ink-soft);margin-bottom:2.5rem; } .wizard-fallback a{color:var(--rosewood-deep);text-decoration:underline;text-underline-offset:3px} .policy-box{ background:var(--panel);border-radius:var(--r-lg);padding:1.75rem 2rem; box-shadow:0 16px 36px -26px rgba(58,48,43,.4);margin-bottom:1.5rem; } .policy-box h2{font-family:var(--font-display);font-weight:400;font-style:italic;color:var(--rosewood-deep);font-size:1.3rem;margin-bottom:.6rem} .policy-box p{color:var(--ink-soft);font-size:.95rem} .policy-box a{color:var(--rosewood-deep);text-decoration:underline;text-underline-offset:3px} .faq{display:grid;gap:.9rem;margin-top:1.5rem} .faq details{ background:var(--panel);border-radius:1.5rem;padding:1.2rem 1.5rem; box-shadow:0 12px 30px -24px rgba(58,48,43,.4); } .faq summary{ font-family:var(--font-display);font-weight:400;font-size:1.08rem;cursor:pointer; list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";font-family:var(--font-body);font-size:1.3rem;color:var(--rosewood-deep);flex:none; transition:transform .2s ease; } .faq details[open] summary::after{transform:rotate(45deg)} @media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}} .faq-a{color:var(--ink-soft);margin-top:.85rem;font-size:.95rem} /* -------------------------------------------------- cta band */ .cta-band{ position:relative;overflow:hidden; background:radial-gradient(120% 140% at 20% 0%,var(--peach) 0%,var(--blush) 45%,var(--ivory) 100%); text-align:center;padding:var(--space) 0; } .cta-band .container{display:grid;justify-items:center;gap:1.1rem;position:relative;z-index:1} .cta-band h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,4.5vw,2.6rem)} .cta-band p{max-width:32rem;color:var(--ink-soft)} /* -------------------------------------------------- reveal-on-scroll */ .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease} .js .reveal.is-visible{opacity:1;transform:none} .js .reveal{transition-delay:calc(var(--reveal-i,0) * 80ms)} @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none;transition:none} } /* -------------------------------------------------- footer */ .site-footer{background:var(--ink);color:#E7DED8;padding:clamp(3rem,7vw,4.5rem) 0 2rem} .footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem} @media (min-width:48rem){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}} .footer-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem} .footer-brand img{width:46px;height:46px;border-radius:50%;object-fit:contain} .footer-brand strong{font-family:var(--font-display);font-size:1.15rem;color:var(--ivory);display:block;font-weight:400} .footer-brand small{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)} .footer-head{font-family:var(--font-display);font-style:italic;color:var(--peach);margin-bottom:.9rem;font-size:1.05rem;font-weight:400} .footer-links{list-style:none} .footer-links li{margin-bottom:.55rem;font-size:.9rem} .footer-links a{text-decoration:none;color:#E7DED8} .footer-links a:hover{color:var(--peach)} .footer-bottom{ margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(251,246,242,.15); display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.8rem;color:var(--sage); } .footer-bottom a{color:var(--sage);text-decoration:underline;text-underline-offset:3px} .ai-note{margin-top:1rem;font-size:.76rem;color:var(--sage);max-width:44rem;line-height:1.5} .ph{outline:1px dashed var(--rosewood-deep);outline-offset:2px;padding:0 .2rem;background:rgba(244,221,217,.5);border-radius:.3rem} .muted{color:var(--ink-soft);font-size:.9rem}