/* Bronzed Behaviour - shared core stylesheet. picture{display:contents} keeps the wrappers transparent to layout so descendant selectors like .ex-card img behave unchanged. */ picture{display:contents} @font-face{font-family:'Pacifico';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/pacifico.woff2) format('woff2')} :root{ --pink:#EE5F8E; --pink-deep:#C7326E; --coral:#F4785F; --orange:#F8963B; --gold:#FFC245; --gold-pale:#FFEBC2; --cream:#FFF7F0; --blushbg:#FFF0F4; --blush2:#FFDCE6; --rasp:#8C2440; --dark:#571626; --body:#96455A; /* muted small print: clears 4.5:1 on white, cream, blush and the pink gradient band, which #D989A0 (2.6:1) and var(--muted) (3.5:1) did not */ --muted:#924257; } *{margin:0;padding:0;box-sizing:border-box} /* width/height attributes stay on every for CLS, but they also act as presentational hints. A rule that sets only width (.arch-ring img) left height="780" standing as a literal 780px and stretched the About portrait to 3.4x its real aspect. height:auto restores the ratio while the attributes still reserve the right box during load. */ img{height:auto} html{scroll-behavior:smooth} body{background:var(--cream);color:var(--rasp);font-family:'Jost',sans-serif;font-weight:300;line-height:1.7} .wrap{max-width:1100px;margin:0 auto;padding:0 40px} h1,h2,h3{font-family:'Playfair Display',serif;font-weight:600} .script{font-family:'Pacifico',cursive;font-weight:400} .it{font-style:italic} .label{font-size:12px;letter-spacing:0.34em;text-transform:uppercase;color:var(--pink-deep);font-weight:500} /* buttons */ .btn{position:relative;display:inline-block;padding:17px 38px;font-size:13px;letter-spacing:0.2em;text-transform:uppercase;font-weight:500;text-decoration:none;border-radius:999px;transition:transform .3s,box-shadow .3s,background .3s;overflow:hidden} .btn-primary{background:linear-gradient(115deg,var(--gold),var(--coral) 52%,var(--pink));color:#fff; box-shadow:0 8px 26px rgba(238,95,142,.45),0 0 20px rgba(255,194,69,.4);text-shadow:0 1px 2px rgba(140,36,64,.3)} .btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 40px rgba(238,95,142,.6),0 0 36px rgba(255,194,69,.6)} .btn-primary::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-160%) skewX(-18deg);transition:transform .65s} .btn-primary:hover::after{transform:translateX(280%) skewX(-18deg)} .btn-glass{border:1.5px solid rgba(255,255,255,.85);color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);text-shadow:0 1px 6px rgba(140,36,64,.4)} .btn-glass:hover{background:rgba(255,255,255,.3);transform:translateY(-3px);box-shadow:0 10px 28px rgba(140,36,64,.3)} .btn-line{border:1.5px solid var(--pink);color:var(--pink-deep);background:rgba(255,255,255,.5)} .btn-line:hover{background:var(--pink);color:#fff;transform:translateY(-3px);box-shadow:0 10px 28px rgba(238,95,142,.4)} /* nav */ nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s,box-shadow .4s,padding .3s} .nav-in{display:flex;align-items:center;justify-content:space-between;padding:20px 44px;max-width:1280px;margin:0 auto;transition:padding .3s} .brand{display:flex;align-items:center;gap:11px;text-decoration:none} .brand .mark{width:56px;height:56px;border-radius:50%;box-shadow:0 2px 12px rgba(140,36,64,.4);border:2px solid rgba(255,233,176,.95)} .brand .word{font-family:'Pacifico',cursive;font-size:26px;line-height:1.7;padding:.38em .3em .42em;margin:-.38em -.3em -.42em;background:linear-gradient(120deg,#FFE29A,#FFB25C 45%,#FF8A66);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 4px rgba(140,36,64,.35))} .brand .spk{color:var(--gold);font-size:14px;transform:translateY(-8px);display:inline-block} .nav-links{display:flex;gap:32px;align-items:center} .nav-links a{text-decoration:none;color:#fff;font-size:13px;letter-spacing:0.18em;text-transform:uppercase;text-shadow:0 1px 8px rgba(140,36,64,.5);transition:color .25s} .nav-links a:hover{color:var(--gold-pale)} .nav-links a.btn{padding:11px 26px;color:#fff;text-shadow:none} /* WCAG 2.5.8 wants 24px of target. These sat at 22px (nav) and 18px (footer) on desktop; the earlier fix only covered the mobile panel. The 56px brand mark still sets the bar height, so nothing moves. */ .nav-links a:not(.btn){padding:7px 2px} footer .foot-in a{display:inline-block;padding:5px 3px} nav.scrolled{background:rgba(255,247,240,.92);backdrop-filter:blur(14px);box-shadow:0 2px 24px rgba(140,36,64,.12)} nav.scrolled .nav-in{padding:12px 44px} nav.scrolled .nav-links a{color:var(--rasp);text-shadow:none} nav.scrolled .nav-links a:hover{color:var(--pink)} nav.scrolled .nav-links a.btn{color:#fff} nav.scrolled .brand .word{background:linear-gradient(120deg,#F8963B,#EE5F8E);-webkit-background-clip:text;background-clip:text;color:transparent;filter:none} @media(max-width:900px){.nav-links a:not(.btn){display:none}} @media(max-width:520px){ .nav-in{padding:14px 20px} .brand .word{font-size:19px;white-space:nowrap} .brand .mark{width:44px;height:44px} .brand .spk{display:none} .nav-links a.btn{padding:10px 18px;white-space:nowrap;font-size:11px} } /* hero */ .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;overflow:hidden; background-image:url("/assets/img/bg-land.webp");background-size:cover;background-position:center 68%} @media(max-width:760px){.hero{background-image:url("/assets/img/bg-port.webp");background-position:center 72%}} .hero::before{content:"";position:absolute;inset:0;background: radial-gradient(128% 88% at 50% 37%,rgba(87,22,38,.54) 0%,rgba(87,22,38,.28) 52%,rgba(87,22,38,0) 79%), linear-gradient(180deg,rgba(140,36,64,.34) 0%,rgba(140,36,64,.10) 34%,rgba(140,36,64,0) 55%,rgba(255,247,240,0) 86%,rgba(255,247,240,.9) 100%)} /* Every page opens on the same sunset photograph. Each one sets its own --hero-wash, blended over the picture, so the nine headers read as a family instead of as one header repeated. Home leaves it unset. */ .hero::after{content:"";position:absolute;inset:0;background:var(--hero-wash,none); mix-blend-mode:soft-light;pointer-events:none} .hero-inner{position:relative;z-index:5;padding:140px 24px 60px;max-width:900px} .hero-logo{width:190px;margin:0 auto 18px;position:relative} .hero-logo::before{content:"";position:absolute;inset:-38px;background:radial-gradient(circle,rgba(255,247,230,.55),rgba(255,247,230,0) 62%);z-index:-1} .hero-logo img{width:100%;filter:drop-shadow(0 4px 18px rgba(140,36,64,.5))} .hero h1{font-size:clamp(46px,6.2vw,80px);line-height:1.05;text-wrap:balance;color:#FFF9F0;text-shadow:0 2px 10px rgba(140,36,64,.55),0 10px 44px rgba(140,36,64,.45)} .hero h1 .script{display:block;text-shadow:none;text-wrap:balance;font-size:clamp(40px,5.4vw,68px);line-height:1.7;padding:.4em .4em .45em;margin:-.28em 0 -.36em;background:linear-gradient(175deg,#FFFBEA 5%,#FFE9A8 55%,#FFD166 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(87,22,38,.5)) drop-shadow(0 0 16px rgba(255,224,150,.8))} /* The hero lead inherited body's 1.7 line-height, which broke a three-line centred paragraph into three disconnected stripes, and a 50ch measure left the last line orphaned. text-wrap:balance evens short centred blocks; pretty only guards orphans in long-form text. The layered shadow carries the copy over the bright part of the sunset. */ .hero p{max-width:42ch;margin:26px auto 0;text-wrap:balance;line-height:1.5; font-size:clamp(17px,1.55vw,19.5px);font-weight:400;color:#FFF3EA; text-shadow:0 1px 2px rgba(87,22,38,.55),0 2px 14px rgba(87,22,38,.6)} .hero-cta{margin-top:38px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;color:#FFF3EA;font-size:11px;letter-spacing:.3em;text-transform:uppercase;text-shadow:0 1px 8px rgba(140,36,64,.6);animation:hint 2.4s ease-in-out infinite} @keyframes hint{0%,100%{transform:translate(-50%,0);opacity:.75}50%{transform:translate(-50%,8px);opacity:1}} /* marquee */ .marq{background:linear-gradient(115deg,var(--pink),var(--coral));color:#FFF7F0;overflow:hidden;white-space:nowrap;padding:15px 0;font-family:'Playfair Display',serif;font-size:17px} .marq .in{display:inline-block;animation:roll 32s linear infinite} .marq span{margin:0 28px} .marq .sep{color:var(--gold-pale)} @keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}} section{padding:104px 0} .sec-head{text-align:center;max-width:64ch;margin:0 auto 60px} .sec-head h2{font-size:clamp(34px,4.4vw,52px);margin-top:14px;color:var(--rasp);text-wrap:balance} .sec-head h2 .script{font-size:1.06em;display:inline-block;line-height:1.7;padding:.4em .35em .45em;margin:-.4em -.2em -.45em;background:linear-gradient(120deg,var(--orange),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent} /* service cards */ #services{background:var(--blushbg)} .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:24px} .cards .cardx{flex:0 1 calc(30% - 16px);min-width:250px} .cardx{position:relative;background:#fff;border-radius:26px;padding:36px 28px 32px;box-shadow:0 10px 30px rgba(199,50,110,.10);transition:transform .35s,box-shadow .35s} .cardx:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(238,95,142,.25),0 0 30px rgba(255,194,69,.2)} .cardx .sunic{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#FFD98A,var(--orange) 38%,var(--pink-deep));box-shadow:0 0 16px rgba(255,194,69,.55);margin-bottom:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;text-shadow:0 1px 3px rgba(140,36,64,.45);transition:transform .35s} .cardx:hover .sunic{transform:scale(1.15) rotate(12deg)} .cardx h3{font-size:22px;margin-bottom:2px} .cardx .price{font-family:'Pacifico',cursive;font-size:22px;display:inline-block;line-height:1.7;padding:.38em .35em .42em;margin:-.38em 0 -.42em -.16em;background:linear-gradient(120deg,var(--orange),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent} .cardx p{font-size:14px;color:var(--body);margin-top:10px} .cardx .pop{position:absolute;top:-13px;right:20px;background:linear-gradient(115deg,var(--gold),var(--orange));color:#7A3608;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;padding:6px 13px;border-radius:999px;box-shadow:0 4px 14px rgba(248,150,59,.45)} @media(max-width:960px){.cards .cardx{flex-basis:calc(50% - 12px)}} @media(max-width:560px){.cards .cardx{flex-basis:100%}} /* steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;text-align:center;position:relative} .steps::before{content:"";position:absolute;top:31px;left:12%;right:12%;border-top:2px dashed rgba(238,95,142,.45)} .step{position:relative} .step .n{position:relative;z-index:1;width:62px;height:62px;border-radius:50%;background:#fff;font-family:'Pacifico',cursive;font-size:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 6px 20px rgba(238,95,142,.22),0 0 16px rgba(255,194,69,.25);transition:transform .3s,box-shadow .3s} .step:hover .n{transform:scale(1.12);box-shadow:0 10px 26px rgba(238,95,142,.35),0 0 26px rgba(255,194,69,.55)} .step .n span{display:inline-block;line-height:1.7;padding:.4em;margin:-.4em;background:linear-gradient(120deg,var(--orange),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent} .step b{display:block;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;font-size:13px;margin-bottom:8px;color:var(--rasp)} .step p{font-size:14px;color:var(--body)} @media(max-width:880px){.steps{grid-template-columns:repeat(2,1fr)}.steps::before{display:none}} #how{background:linear-gradient(180deg,#FFE4EC,#FFD1DF)} #how .steps::before{border-top-color:rgba(199,50,110,.4)} /* why band: vivid sunset gradient */ .why{position:relative;background:linear-gradient(135deg,#EE5F8E 0%,#F4785F 48%,#F8963B 100%);color:#FFF7F0;overflow:hidden} .why .sec-head h2{color:#FFF9F0;text-shadow:0 2px 12px rgba(140,36,64,.35)} .why .sec-head h2 .script{text-shadow:none;background:linear-gradient(175deg,#FFFBEA 5%,#FFE9A8 55%,#FFD166 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(87,22,38,.5)) drop-shadow(0 0 16px rgba(255,224,150,.8))} .why .label{color:var(--gold-pale)} .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;z-index:2} .why-card{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);border-radius:26px;padding:36px 30px;backdrop-filter:blur(8px);transition:transform .35s,background .35s,box-shadow .35s} .why-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.24);box-shadow:0 16px 40px rgba(140,36,64,.25)} .why-card h3{font-size:21px;margin-bottom:10px;color:#FFF9F0} .why-card h3 .spk{color:var(--gold-pale);margin-right:6px} .why-card p{font-size:14.5px;color:#FFF3EC} @media(max-width:880px){.why-grid{grid-template-columns:1fr}} /* explore tiles */ .explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:880px){.explore-grid{grid-template-columns:1fr}} .ex-card{position:relative;display:block;border-radius:26px;overflow:hidden;aspect-ratio:4/3.2;text-decoration:none;box-shadow:0 12px 32px rgba(199,50,110,.14);transition:transform .35s,box-shadow .35s} .ex-card:hover{transform:translateY(-8px);box-shadow:0 24px 54px rgba(238,95,142,.3)} .ex-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s} .ex-card:hover img{transform:scale(1.06)} .ex-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(140,36,64,0) 32%,rgba(87,22,38,.78) 100%)} .ex-copy{position:absolute;left:24px;right:24px;bottom:20px;z-index:2} .ex-copy .s{font-family:'Pacifico',cursive;display:inline-block;line-height:1.7;padding:.3em .3em .35em;margin:-.3em -.3em -.35em;font-size:17px;background:linear-gradient(120deg,#FFE9AE,#FFC245);-webkit-background-clip:text;background-clip:text;color:transparent} .ex-copy h3{font-family:'Playfair Display',serif;font-weight:600;font-size:24px;color:#FFF9F0;margin-top:2px} .ex-copy .go{position:absolute;right:0;bottom:6px;color:#FFE9AE;font-size:22px;transition:transform .3s} .ex-card:hover .go{transform:translateX(6px)} /* reviews */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .quote{background:#fff;border-radius:26px;padding:36px 30px;box-shadow:0 10px 30px rgba(199,50,110,.09);transition:transform .35s,box-shadow .35s} .quote:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(238,95,142,.2)} .quote p{font-family:'Playfair Display',serif;font-style:italic;font-size:18px;line-height:1.55;color:var(--rasp)} .quote .who{margin-top:18px;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--pink-deep)} .stars{letter-spacing:5px;margin-bottom:12px;background:linear-gradient(120deg,var(--gold),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(255,194,69,.55))} @media(max-width:880px){.quotes{grid-template-columns:1fr}} /* faq */ #faq{background:#FFF1E5} details{border-bottom:1.5px solid #F3D6BE;max-width:780px;margin:0 auto} summary{cursor:pointer;padding:25px 0;font-family:'Playfair Display',serif;font-weight:600;font-size:20px;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:color .25s} summary:hover{color:var(--pink)} summary::after{content:"+";font-family:Jost;font-weight:300;font-size:26px;color:var(--pink)} details[open] summary::after{content:"–"} details p{padding:0 0 25px;color:var(--body);max-width:70ch} /* cta: sparkly waves photo */ .cta{position:relative;text-align:center;padding:150px 40px;overflow:hidden;color:#FFF9F0; background-image:url("/assets/img/bg-cta.webp");background-size:cover;background-position:center} .cta::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(199,50,110,.55),rgba(140,36,64,.35) 50%,rgba(199,50,110,.5))} .cta > *{position:relative;z-index:2} .cta h2{font-size:clamp(36px,4.6vw,56px);text-shadow:0 2px 14px rgba(87,22,38,.5)} .cta .script{display:block;text-shadow:none;font-size:clamp(44px,6vw,74px);line-height:1.7;padding:.4em .4em .45em;margin:-.3em 0 -.36em;background:linear-gradient(175deg,#FFFBEA 5%,#FFE9A8 55%,#FFD166 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(87,22,38,.5)) drop-shadow(0 0 16px rgba(255,224,150,.8))} .cta p{color:#FFEDE9;margin:20px auto 40px;max-width:46ch;text-shadow:0 1px 8px rgba(87,22,38,.5)} .cta .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} footer{background:var(--dark);color:#D89AA6;padding:52px 0;font-size:13px} .foot-in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center} footer .word{font-family:'Pacifico',cursive;font-size:22px;display:inline-block;line-height:1.7;padding:.38em .3em .42em;margin:-.38em -.3em -.42em;background:linear-gradient(120deg,#FFC245,#EE5F8E);-webkit-background-clip:text;background-clip:text;color:transparent} footer a{color:var(--gold-pale);text-decoration:none} footer a:hover{text-shadow:0 0 10px rgba(255,235,194,.6)} /* The decorative SVG stars shipped with animation-delay values but no keyframes, so they sat dead still; and only .arch-wrap .spark was ever positioned, which left the quote-band pair inline in the text flow. */ .spark{position:absolute;pointer-events:none;line-height:0; animation:twinkle 3.4s ease-in-out infinite} @keyframes twinkle{ 0%,100%{opacity:.35;transform:scale(.78) rotate(0deg)} 50%{opacity:1;transform:scale(1.14) rotate(22deg)} } .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease} .reveal.in{opacity:1;transform:none} /* Centred display copy. body's 1.7 leading suits a long left-aligned column; in a short centred block it spaces the lines into separate stripes and strands the last word on a line of its own (the home CTA was leaving one short word alone at 7% of the line width). Tighter leading plus balanced wrapping keeps each block reading as a single shape. Left-aligned body copy, which is most of the site, keeps 1.7. */ .cta p,.steps p,.sec-head p,.ccard p,.faves p,.perk-band p, .venue-inner p,.note,.disclosure,.gslot .ph{ line-height:1.5;text-wrap:balance; } /* Shared by services and contact; previously pasted into five pages, four of which never used it. */ .svc-detail{max-width:820px;margin:0 auto 26px;background:#fff;border-radius:26px;padding:38px 36px;box-shadow:0 10px 30px rgba(199,50,110,.10)} .svc-detail .top{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap} .svc-detail h3{font-size:26px} .svc-detail .price{font-family:'Pacifico',cursive;font-size:24px;display:inline-block;line-height:1.7;padding:.38em .35em .42em;margin:-.38em 0 -.42em -.16em;background:linear-gradient(120deg,var(--orange),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent} .svc-detail p{color:var(--body);margin-top:10px} /* #D989A0 measured 2.61:1 on white, well under AA for 12px caps */ .svc-detail .meta{margin-top:14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .inc{list-style:none;margin-top:12px} .inc li{padding:7px 0 7px 26px;position:relative;font-size:14.5px;color:var(--body)} .inc li::before{content:"\2726";position:absolute;left:0;color:var(--pink-deep);font-size:13px} .note{max-width:640px;margin:30px auto 0;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .note a{color:var(--pink-deep)} /* below the header (z-index 60) so glitter never crosses the nav bar or the open mobile menu, above everything else on the page */ #fx{position:fixed;inset:0;pointer-events:none;z-index:50} @media (prefers-reduced-motion: reduce){ #fx{display:none} .reveal{opacity:1;transform:none;transition:none} .scroll-hint,.marq .in,.spark{animation:none} .spark{opacity:.85} } /* ============================================================ Mobile navigation, touch targets, and mobile viewport units. Below 900px every nav link was display:none with no hamburger, so phones and tablets had no header navigation at all. ============================================================ */ /* reproduces the previous 32px gap between the link row and the CTA */ .nav-right{display:flex;align-items:center;gap:32px} .nav-toggle{display:none;border:0;background:none;font:inherit} /* 100vh spans the area behind a phone browser's collapsing toolbar, so the hero jumped as the bar hid. svh is the visible viewport. */ @supports (min-height:100svh){.hero{min-height:100svh}} @media(max-width:900px){ .nav-right{gap:10px;margin-left:auto} .nav-toggle{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; width:46px;height:46px;flex:0 0 46px;padding:0;border-radius:14px;cursor:pointer; background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.5); -webkit-tap-highlight-color:transparent;transition:background .25s,border-color .25s; } .nav-toggle span{width:20px;height:2px;border-radius:2px;background:#fff; transition:transform .3s ease,opacity .2s ease} nav.scrolled .nav-toggle{background:rgba(255,240,244,.92);border-color:rgba(199,50,110,.22)} nav.scrolled .nav-toggle span{background:var(--rasp)} .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)} /* the existing link row becomes the drop-down panel (no duplicated links) */ .nav-links{ position:fixed;left:0;right:0;top:var(--nav-h,68px);display:block; background:rgba(255,247,240,.97); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-top:1px solid rgba(255,194,69,.55); box-shadow:0 18px 44px rgba(140,36,64,.20); padding:4px 18px 16px; max-height:calc(100vh - var(--nav-h,68px)); overflow-y:auto;-webkit-overflow-scrolling:touch; opacity:0;transform:translateY(-10px);pointer-events:none; transition:opacity .26s ease,transform .26s ease;z-index:60; } @supports (max-height:100dvh){ .nav-links{max-height:calc(100dvh - var(--nav-h,68px))} } .nav-links.open{opacity:1;transform:none;pointer-events:auto} /* overrides the max-width:900px display:none above */ .nav-links a:not(.btn){ display:flex;align-items:center;min-height:54px;padding:0 6px; color:var(--rasp);text-shadow:none;font-size:14px;letter-spacing:.16em; border-bottom:1px solid rgba(199,50,110,.12); } .nav-links a:not(.btn):last-child{border-bottom:0} .nav-links a:not(.btn):active{color:var(--pink)} /* header CTA was 115x39 and overlapped the wordmark at 375px */ .nav-right>a.btn{min-height:44px;display:inline-flex;align-items:center; padding:0 16px;font-size:11px;white-space:nowrap} .brand .word{font-size:17px} /* footer links were 18px tall, under the 24px WCAG 2.5.8 minimum */ footer .foot-in a{display:inline-block;padding:11px 5px} } @media(max-width:400px){ .nav-in{padding-left:16px;padding-right:16px} .brand{gap:8px} .brand .word{font-size:15px} .nav-right>a.btn{padding:0 13px;font-size:10px} .nav-right{gap:8px} } @media(prefers-reduced-motion:reduce){ .nav-links,.nav-toggle span{transition:none} } /* ------------------------------------------------------------ Narrow-phone corrections. .wrap kept 40px of side padding at every width, leaving only 280px of content at 360px. Grid items default to min-width:auto, so a 1fr track cannot shrink below its card's min-content - the contact and shop grids pushed the page 11px and 8px wide. ------------------------------------------------------------ */ .cgrid>*,.pgrid>*,.cards>*,.ggrid>*{min-width:0} @media(max-width:560px){ .wrap{padding:0 20px} .ccard{padding:32px 20px} .pcard{padding:20px 16px 24px} .ccard .btn,.pcard .btn{max-width:100%} } /* Stacked wordmark on mobile: frees roughly 70px of header width and lets the script sit larger. line-height stays loose enough that background-clip:text does not shave Pacifico's overhangs when nav.scrolled turns the wordmark into gradient-filled text. */ @media(max-width:900px){ .brand{align-items:center} .brand .word{ white-space:normal; max-width:6.6em; font-size:18px; line-height:1.16; padding:.10em 0; } } @media(max-width:400px){ .brand .word{font-size:16px;max-width:6.4em} } /* about.html decorates the portrait with four absolutely-positioned sparkles at left/right:-8%..-10% of .arch-wrap. They only fitted because .wrap used to reserve 40px of side padding; with the narrow-phone padding they pushed the page sideways. Reserving a gutter keeps the sparkles outside the gold frame as designed while guaranteeing they land inside the viewport: the overhang is 10% of a container capped at 480px, always under the 30px gutter plus the wrap's own padding. */ @media(max-width:900px){ /* body prefix outranks about.html's own inline