/* 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} /* No room for a sixth and seventh link in the bar: measured at a 910px viewport six links wanted 920px inside an 895px bar, and the 900-1120px band is already tuned to a 19px wordmark and 22px gaps to fit five. These two show in the drop-down panel, which is a vertical list. */ @media(min-width:900.02px){.nav-links a.nav-more{display: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:90vh;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?v=9abca065");background-size:cover;background-position:center 68%} @media(max-width:760px){.hero{background-image:url("/assets/img/bg-port.webp?v=c7342fd1");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:clamp(112px,17vw,140px) 24px clamp(44px,7vw,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%)}} /* 104px top and bottom is a desktop measure; at 390px it was eating an eighth of the viewport at each end of every section and pushing the home page to 9.2 screens. These clamps keep the desktop spacing intact above roughly 1100px and tighten it on a phone. */ section{padding:clamp(52px,9vw,104px) 0} .sec-head{text-align:center;max-width:64ch;margin:0 auto clamp(30px,4.6vw,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:clamp(78px,13vw,150px) 40px;overflow:hidden;color:#FFF9F0; background-image:url("/assets/img/bg-cta.webp?v=55f357ff");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. First pass put three columns side by side, but the brand column opened with a 48px logo while the others opened with an 11px heading, so nothing lined up, and the contact column held four short links that left most of its track empty. The brand now takes its own row above a rule, the three columns below it are equal, and the phone number is set as display type rather than another 13px link, which is what fills the right column and puts the most useful thing in the footer first. */ footer{position:relative;background:var(--dark);color:#E3B3BE; padding:clamp(40px,5.5vw,56px) 0 0;font-size:14px} footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--gold),var(--coral) 52%,var(--pink))} /* the first pass glow was strong enough to haze the top of the panel */ footer::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(80% 90% at 50% 0%,rgba(238,95,142,.12),rgba(238,95,142,0) 60%)} footer .wrap{position:relative;z-index:1} .foot-top{display:flex;align-items:center;gap:22px;flex-wrap:wrap; padding-bottom:clamp(24px,3vw,32px); border-bottom:1px solid rgba(255,235,194,.15)} .foot-top .mark-row{display:flex;align-items:center;gap:13px} /* sits flush to the right edge so the brand row spans the panel instead of trailing off with 450px of empty ground after the tagline */ .foot-top p{margin:0 0 0 auto;max-width:46ch;color:#DFAAB6;line-height:1.55;font-size:14px} @media(max-width:700px){.foot-top p{margin-left:0}} @media(max-width:700px){.foot-top{gap:14px}.foot-top p{font-size:13.5px}} footer .word{font-family:'Pacifico',cursive;font-size:24px;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} .foot-in{display:grid;grid-template-columns:repeat(3,1fr);gap:30px; padding:clamp(26px,3.4vw,36px) 0 0;align-items:start} /* Two link columns side by side, with the booking column spanning the row underneath them. Left in the 1fr flow it sat alone in a half-width cell with the other half empty, and the footer ran to 812px on a phone. */ @media(max-width:740px){ .foot-in{grid-template-columns:1fr 1fr;gap:18px 22px} .foot-col:nth-child(3){grid-column:1/-1;padding-top:16px; border-top:1px solid rgba(255,235,194,.13)} .foot-col li a{padding:4px 0} .foot-col h4{margin-bottom:6px} } .foot-col h4{font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:10px} .foot-col ul{list-style:none} footer a{color:var(--gold-pale);text-decoration:none;transition:color .2s} footer a:hover{color:#fff;text-shadow:0 0 10px rgba(255,235,194,.6)} /* 24px minimum target without turning the list into a ladder */ .foot-col li a{display:inline-block;padding:6px 0;line-height:1.35;font-size:14px} /* the phone number is the point of the footer, so it is set as display type */ .foot-phone{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(21px,2vw,25px); display:inline-block;padding:4px 0 2px;letter-spacing:.01em; background:linear-gradient(120deg,#FFE29A,#FFC245 60%,#FF9E7A); -webkit-background-clip:text;background-clip:text;color:transparent} .foot-phone:hover{filter:drop-shadow(0 0 10px rgba(255,194,69,.55))} .foot-ways{margin-top:6px;font-size:13.5px;color:#DFAAB6} @media(max-width:740px){ .foot-col:nth-child(3) .foot-phone{font-size:23px} .foot-col:nth-child(3) .foot-ways{display:inline-block;margin:0 0 0 14px; transform:translateY(-3px)} .foot-col:nth-child(3) .foot-say{margin-top:10px} .foot-note{margin-top:8px} } .foot-ways a{padding:6px 0;display:inline-block} .foot-note{margin-top:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:#C08E9B} .foot-say{display:inline-flex;align-items:center;gap:8px;margin-top:4px; padding:9px 17px;border-radius:999px;font-size:12.5px;letter-spacing:.1em; color:#FFF3EA;background:linear-gradient(115deg,rgba(255,194,69,.20),rgba(238,95,142,.26)); border:1px solid rgba(255,235,194,.38)} .foot-say:hover{background:linear-gradient(115deg,rgba(255,194,69,.32),rgba(238,95,142,.38))} .foot-base{position:relative;z-index:1;margin-top:clamp(26px,3.4vw,36px); border-top:1px solid rgba(255,235,194,.15);padding:16px 0 20px; display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; font-size:12.5px;color:#C08E9B} .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; } .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)} /* A policy someone is agreeing to should not read as body copy, so it sits in a warm tinted panel rather than another paragraph. */ .policy{margin-top:18px;padding:15px 18px;border-radius:16px; background:rgba(255,194,69,.14);border:1px solid rgba(248,150,59,.34); color:var(--rasp);font-size:13.5px;line-height:1.55;text-align:left} .policy b{font-weight:600;color:var(--pink-deep)} .policy-wide{max-width:760px;margin:22px auto 0;text-align:center} /* 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:90svh){.hero{min-height:90svh}} @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