/* ===================================================================== SALSALITO · Burgau · Algarve Design system, built to the identity brief (August 2026). Single stylesheet: tokens, typography, components, placeholders. REGISTERS Night register (LOCKED): Navy #1C2B45 · Gold #B08D57 · Cream #F6F1E7 · body ink #22314B. Live now. Day register (PENDING approval): defined under [data-register="day"] below. Flip by setting data-register="day" on . Until approval the day tokens are dormant. MARK Crest architecture: double oval containing the mark. Palm = current (assets/crest.svg). Burgau shell = proposed (assets/crest-shell.svg), switched in site.js via CREST_MARK. The scallop (assets/shell-brand.png, the commissioned logo shell) remains the small decorative accent: a shell over the door. TYPE Cinzel: display, small sizes, letterspaced caps (wordmark, labels, nav, buttons). Cormorant Garamond and italic: titles. EB Garamond and italic: body. Pinyon Script: the single accent phrase only. ===================================================================== */ :root{ /* ---------- NIGHT REGISTER (locked) ---------- */ --navy:#1C2B45; /* Navy, the ground of the night register */ --navy-deep:#17243C; /* derived: footer and darkest panels */ --navy-panel:#223350; /* derived: split panels on navy */ --navy-lift:#24365A; /* derived: radial lift on navy sections */ --gold:#B08D57; /* Gold, the accent */ --gold-lift:#D8B888; /* derived tint: gold on dark grounds */ --gold-deep:#9A8050; /* derived shade: small gold labels on cream */ --cream:#F6F1E7; /* Cream, paper and light text */ --ink:#22314B; /* body ink */ --ink-soft:#3C4A63; /* derived: secondary text on cream */ --ink-mute:#6E7486; /* derived: muted text on cream */ --cream-soft:rgba(246,241,231,.78); /* secondary text on navy */ --cream-mute:rgba(246,241,231,.55); /* muted text on navy */ --hair-dark:1px solid rgba(246,241,231,.16); --hair-light:1px solid rgba(61,92,143,.16); --radial-navy:radial-gradient(120% 95% at 50% 0%, var(--navy-lift) 0%, var(--navy) 58%, var(--navy-deep) 100%); /* ---------- TYPE STACKS ---------- */ --font-display:'Cinzel',serif; /* letterspaced caps */ --font-title:'Cormorant Garamond',serif; /* titles */ --font-body:'EB Garamond',serif; /* body */ --font-accent:'Pinyon Script',cursive; /* la vida en azul only */ /* ---------- TYPE SCALE ---------- */ --fs-eyebrow:11px; --ls-eyebrow:.4em; --fs-micro:10.5px; --fs-small:14px; --fs-body:17px; --lh-body:1.8; --fs-lead:clamp(24px,2.6vw,40px); --lh-lead:1.5; --fs-title:clamp(34px,4.4vw,60px); --lh-title:1.06; --fs-page-title:clamp(42px,6vw,84px); --fs-hero:clamp(44px,6.6vw,100px); /* ---------- SPACING (8px base) ---------- */ --sp-2xs:8px; --sp-xs:16px; --sp-sm:24px; --sp-md:40px; --sp-lg:64px; --sp-xl:96px; --section-y:clamp(96px,11vw,168px); --section-y-lg:clamp(120px,14vw,200px); --gutter:clamp(22px,5vw,46px); /* ---------- MEASURE ---------- */ --maxw-prose:680px; --maxw-lead:860px; --maxw-wide:1200px; /* ---------- SHELL ACCENT SIZES ---------- */ --shell-sm:22px; --shell-md:30px; --shell-lg:44px; } /* ---------- DAY REGISTER (APPROVED Aug 2026) ---------- The thesis: Coral Sands by day, Vermelho by night. Light surfaces run the day register (Cal White ground, Burgau Blue text, never black, Rosa and Ocre accents, tonal ladders); navy surfaces keep the locked night register above. */ :root{ --day-ground:#F7F3EA; /* Cal White */ --day-panel:#FDFAF2; /* lifted panel on Cal White */ --day-ink:#3D5C8F; /* Burgau Blue: body text on light */ --day-head:#2F4A77; /* Burgau Blue ladder, deep: headings */ --day-soft:#5674A0; /* ladder: secondary text */ --day-mute:#8296B6; /* ladder: muted text */ --rosa:#D6907B; /* Rosa Salsalito: the day accent */ --rosa-deep:#BE7059; /* ladder: rosa legible as text */ --ocre:#C79A52; /* Ocre: golden labels on light */ --ocre-deep:#A87F41; /* ladder: small tracked labels */ --seaglass:#9FB9A8; /* Sea Glass: reserved */ --hair-day:1px solid rgba(61,92,143,.16); } /* ===================================================================== BASE ===================================================================== */ *{box-sizing:border-box;} [hidden]{display:none !important;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--navy); color:var(--day-ink); font-family:var(--font-body); font-weight:400; font-size:var(--fs-body); overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} /* type helpers */ .serif{font-family:var(--font-title);font-weight:400;} .italic{font-style:italic;} .eyebrow,.smallcaps{ font-family:var(--font-display);font-weight:400;font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ocre); } .section--navy .eyebrow,.newsletter .eyebrow{color:var(--gold-lift);} .accent-script{ font-family:var(--font-accent);font-weight:400;color:var(--ocre); font-size:1.55em;line-height:1;letter-spacing:.01em; } .on-dark .accent-script,.accent-script.on-dark{color:var(--gold-lift);} /* the page statement: la vida en azul, script, below the film */ .statement{font-family:var(--font-accent);font-weight:400;font-size:clamp(46px,7.5vw,88px); line-height:1.05;color:var(--ocre);margin:18px 0 30px;} .navy-text{color:var(--navy);} .gold{color:var(--gold);} /* a11y */ .skip-link{position:absolute;left:8px;top:-60px;z-index:60;background:var(--navy);color:var(--cream); padding:12px 22px;border-radius:3px;font-family:var(--font-display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:top .25s ease;} .skip-link:focus{top:8px;} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--gold-lift);outline-offset:3px;border-radius:2px;} /* buttons: Cinzel caps, hairline, quiet */ .btn{ display:inline-block;font-family:var(--font-display);font-weight:400; font-size:11px;letter-spacing:.26em;text-transform:uppercase; padding:17px 40px;border-radius:3px;cursor:pointer; transition:background .35s ease,color .35s ease,border-color .35s ease; } .btn--ghost-navy{color:var(--day-ink);border:1px solid rgba(61,92,143,.4);} .btn--ghost-navy:hover{background:var(--day-ink);color:var(--day-ground);} .btn--ghost-cream{color:var(--cream);border:1px solid rgba(246,241,231,.45);} .btn--ghost-cream:hover{background:var(--cream);color:var(--navy);} .btn--solid-cream{color:var(--navy);background:var(--cream);} .btn--solid-navy{color:var(--cream);background:var(--navy);border:1px solid rgba(246,241,231,.2);} .btn--gold{color:var(--navy);background:var(--gold);} .btn--gold:hover{background:var(--gold-lift);} /* underline draw */ .navlink{position:relative;cursor:pointer;white-space:nowrap;} .navlink::after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:currentColor;transition:right .35s ease;} .navlink:hover::after{right:0;} /* ===================================================================== HEADER + NAV ===================================================================== */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:30; display:flex;align-items:center;justify-content:space-between; padding:26px var(--gutter);color:var(--cream); transition:padding .4s ease,background .4s ease,box-shadow .4s ease; } .site-header.solid{padding:14px var(--gutter);background:rgba(23,36,60,.95);box-shadow:0 1px 0 rgba(246,241,231,.14);} .header-langs{display:flex;align-items:center;gap:20px;flex:1;} .header-langs span{font-family:var(--font-display);font-size:10.5px;letter-spacing:.18em;cursor:pointer;opacity:.4;} .header-langs span.active{opacity:.95;} .wordmark{text-align:center;line-height:1;flex:none;cursor:pointer;} .wordmark .name{font-family:var(--font-display);font-weight:500;font-size:24px;letter-spacing:.42em;padding-left:.42em;} .wordmark .sub{font-family:var(--font-display);font-weight:400;font-size:8.5px;letter-spacing:.5em;text-transform:uppercase;margin-top:9px;opacity:.8;padding-left:.5em;} .header-book{flex:1;display:flex;justify-content:flex-end;} .header-book .btn{font-size:10.5px;letter-spacing:.24em;padding:14px 28px;} .site-nav{ position:fixed;top:96px;left:0;right:0;z-index:30; display:flex;justify-content:center;flex-wrap:wrap;gap:10px 40px; color:var(--cream);font-family:var(--font-display);font-weight:400; font-size:11px;letter-spacing:.24em;text-transform:uppercase; transition:top .4s ease,opacity .4s ease; } .site-nav.hidden{top:-40px;opacity:0;pointer-events:none;} .site-nav a{opacity:.72;} .site-nav a.active{opacity:1;} .nav-toggle{display:none;} .nav-book{display:none;} /* day chrome: on pages that open light, the fixed header reads in blue until it condenses to the solid navy bar */ .day-chrome .site-header{color:var(--day-head);} .day-chrome .site-header .btn--ghost-cream{color:var(--day-ink);border-color:rgba(61,92,143,.45);} .day-chrome .site-header .btn--ghost-cream:hover{background:var(--day-ink);color:var(--day-ground);} .day-chrome .site-nav{color:var(--day-ink);} .day-chrome .nav-toggle{color:var(--day-ink);} .day-chrome .site-header.solid{color:var(--cream);} .day-chrome .site-header.solid .btn--ghost-cream{color:var(--cream);border-color:rgba(246,241,231,.45);} .day-chrome .site-header.solid .btn--ghost-cream:hover{background:var(--cream);color:var(--navy);} .day-chrome .site-header.solid .nav-toggle{color:var(--cream);} /* ===================================================================== HERO: the film carries no words. The mark alone, centred. (Art directed placeholder ground until commissioned photography.) ===================================================================== */ .hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--radial-navy);} .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,36,60,.35) 0%,rgba(23,36,60,0) 40%,rgba(23,36,60,.5) 100%);} .hero-crest{position:absolute;inset:0;margin:auto;z-index:3;width:min(28vh,180px);height:calc(min(28vh,180px)*1.3); color:var(--gold-lift);opacity:.92;animation:floatup 1.8s ease .3s both;} .hero-crest svg{width:100%;height:auto;display:block;} .scroll-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--cream);} .scroll-cue .tick{width:1px;height:34px;background:linear-gradient(rgba(246,241,231,0),rgba(246,241,231,.7));} .scroll-cue .lbl{font-family:var(--font-display);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;opacity:.65;} /* ===================================================================== PAGE HERO Day pages open light: Cal White ground, Burgau Blue crest and title. Night pages (The Story, Mare, The Bar) keep the navy ground. ===================================================================== */ .page-hero{position:relative;height:46vh;min-height:360px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--day-ground);} .page-hero .inner{position:relative;z-index:2;color:var(--day-head);padding-top:40px;} .page-hero .eyebrow{color:var(--ocre-deep);margin-bottom:18px;} .page-hero h1{font-family:var(--font-title);font-style:italic;font-weight:400;font-size:var(--fs-page-title);line-height:1;margin:0;color:var(--day-head);} .page-hero .crest-slot{width:64px;margin:0 auto 20px;color:var(--day-ink);} .page-hero .crest-slot svg{width:100%;height:auto;display:block;} .page-hero--night{height:56vh;min-height:440px;background:var(--radial-navy);} .page-hero--night .inner{color:var(--cream);} .page-hero--night .eyebrow{color:var(--cream);opacity:.85;} .page-hero--night h1{color:var(--cream);} .page-hero--night .crest-slot{color:var(--gold-lift);} /* ===================================================================== SECTIONS ===================================================================== */ .section{position:relative;} .section--cream{background:var(--day-ground);} .section--navy{background:var(--radial-navy);color:var(--cream);} .wrap{max-width:var(--maxw-wide);margin:0 auto;} .u-section{padding:var(--section-y) var(--gutter);} .u-prose{max-width:var(--maxw-prose);margin-inline:auto;} .u-lead{max-width:var(--maxw-lead);margin-inline:auto;} .section-head{text-align:center;} .section-head .eyebrow{margin-bottom:22px;} .section-head h2{font-family:var(--font-title);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title);margin:0;color:var(--day-head);} .section--navy .section-head h2{color:var(--cream);} .section-sub{font-family:var(--font-body);font-size:15px;color:var(--cream-soft);margin:18px 0 0;} .section--cream .section-sub{color:var(--day-mute);} .intro{padding:var(--section-y-lg) var(--gutter);text-align:center;} .lead{max-width:var(--maxw-lead);margin:0 auto;font-family:var(--font-title);font-weight:400;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--day-head);letter-spacing:.004em;} .lead-sm{max-width:var(--maxw-lead);margin:0 auto;font-family:var(--font-title);font-weight:400;font-size:clamp(24px,2.6vw,38px);line-height:1.5;color:var(--day-head);} /* golden accents (Ocre by day) */ .rule-gold{width:54px;height:1px;background:var(--ocre);border:0;margin:var(--sp-md) auto;opacity:.85;} .dropcap::first-letter{font-family:var(--font-title);font-style:italic;font-weight:500;font-size:3.1em;line-height:.78;float:left;margin:.04em .14em -.04em 0;color:var(--rosa-deep);} /* crest emblem block (the mark above text) */ .crest-emblem{display:block;width:110px;margin:0 auto;color:var(--gold);} .crest-emblem svg{width:100%;height:auto;display:block;} .crest-emblem.on-dark{color:var(--gold-lift);} .crest-emblem.lg{width:150px;} /* scallop accent (the commissioned logo shell): small punctuation only */ .shell-mark{display:block;width:var(--shell-md);height:var(--shell-md);margin:0 auto;background:url('shell-brand.png') center/contain no-repeat;} .shell-mark.on-dark{filter:brightness(1.45) saturate(.92);} .shell-mark.sm{width:var(--shell-sm);height:var(--shell-sm);} .shell-mark.lg{width:var(--shell-lg);height:var(--shell-lg);} .shell-divider{display:flex;align-items:center;justify-content:center;gap:24px;margin:var(--sp-lg) auto;max-width:var(--maxw-prose);} .shell-divider::before,.shell-divider::after{content:'';height:1px;flex:1;max-width:130px;} .shell-divider::before{background:linear-gradient(90deg,transparent,rgba(176,141,87,.55));} .shell-divider::after{background:linear-gradient(90deg,rgba(176,141,87,.55),transparent);} .shell-divider .shell-mark{margin:0;} .shell-list{list-style:none;padding:0;margin:0;} .shell-list li{position:relative;padding-left:34px;margin:0 0 var(--sp-sm);font-size:var(--fs-body);line-height:var(--lh-body);} .shell-list li::before{content:'';position:absolute;left:0;top:.18em;width:20px;height:20px;background:url('shell-brand.png') center/contain no-repeat;opacity:.9;} /* ===================================================================== PLACEHOLDER IMAGERY (owned, art directed; photography to come) ===================================================================== */ .ph{position:relative;overflow:hidden;} .ph::before{content:'';position:absolute;inset:0;} .ph::after{ content:'';position:absolute;left:50%;top:50%;width:56%;max-width:220px;aspect-ratio:1/1; transform:translate(-50%,-50%); background:url('shell-brand.png') center/contain no-repeat; opacity:.16; } .ph--navy{background:linear-gradient(168deg,var(--navy-lift),var(--navy) 55%,var(--navy-deep));} .ph--navy::after{filter:brightness(0) invert(1);opacity:.10;} .ph--cream{background:linear-gradient(168deg,#FDFAF3,var(--cream) 55%,#EDE6D6);} .ph--cream::after{opacity:.20;} .ph--tile{background:linear-gradient(168deg,#EDF3EE,#DCE8DF 55%,#C9DACC);} /* Sea Glass ground */ .ph--tile::after{opacity:.2;} .ph-label{ position:absolute;left:0;bottom:0;z-index:2;margin:0;padding:14px 18px; font-family:var(--font-display);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase; color:var(--gold);opacity:.85; } .ph--navy .ph-label{color:var(--gold-lift);} /* arched frame */ .arch{position:relative;overflow:hidden;box-sizing:border-box;border:1px solid rgba(176,141,87,.55);border-radius:48% 48% 8px 8px / 32% 32% 8px 8px;} .arch .ph-fill,.arch .img{position:absolute;inset:0;} /* ===================================================================== HOME · ROOMS SLIDER (four rooms today) ===================================================================== */ .rooms-slider{padding:var(--section-y) var(--gutter);color:var(--cream);} .rooms-slider .grid{max-width:var(--maxw-wide);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;align-items:stretch;} .rooms-photo{position:relative;height:600px;overflow:hidden;box-sizing:border-box;border:1px solid rgba(216,184,136,.6);border-radius:46% 46% 12px 12px / 34% 34% 12px 12px;} .rooms-photo .slide-fill{position:absolute;inset:0;transition:opacity .5s ease;} .rooms-photo .caption{position:absolute;left:0;bottom:0;padding:30px 34px;width:100%;box-sizing:border-box;background:linear-gradient(0deg,rgba(23,36,60,.85),transparent);z-index:3;} .rooms-photo .caption .tag{font-family:var(--font-display);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-soft);} .rooms-photo .caption .name{font-family:var(--font-title);font-weight:400;font-size:38px;line-height:1.1;margin-top:6px;} .rooms-text{padding:48px 0 40px 76px;display:flex;flex-direction:column;justify-content:center;} .rooms-text .desc{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--cream-soft);max-width:400px;} .slider-controls{display:flex;align-items:center;gap:20px;margin-top:var(--sp-lg);} .shell-btn{cursor:pointer;background:none;border:0;padding:0;color:var(--cream);width:56px;height:56px;display:flex;align-items:center;justify-content:center;} .counter{display:flex;align-items:baseline;gap:7px;margin-left:10px;} .counter .now{font-family:var(--font-title);font-style:italic;font-weight:400;font-size:28px;color:var(--gold-lift);} .counter .tot{font-family:var(--font-display);font-size:11px;letter-spacing:.2em;color:var(--cream-mute);} /* brand shell arrows: white, gold on hover and press */ .brand-arrow{display:block;object-fit:contain;filter:brightness(0) invert(1);transition:filter .3s ease;} .brand-arrow.left{transform:rotate(-90deg);} .brand-arrow.right{transform:rotate(90deg);} .shell-btn .brand-arrow{width:100%;height:100%;} .gnav .brand-arrow{width:34px;height:34px;} .shell-btn:hover .brand-arrow,.gnav:hover .brand-arrow, .shell-btn:active .brand-arrow,.gnav:active .brand-arrow{filter:brightness(1.6) saturate(.9);} /* ===================================================================== MOMENTS STRIP (zone taxonomy) ===================================================================== */ .moments{padding:var(--section-y) 0;} .strip{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 16px;scrollbar-width:none;} .strip::-webkit-scrollbar{display:none;} .moment{flex:0 0 auto;scroll-snap-align:center;width:440px;} .moment .arch{height:340px;} .moment .cap{font-family:var(--font-display);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--day-mute);margin-top:20px;} /* ===================================================================== SPLIT PANELS ===================================================================== */ .split{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:640px;} .split-text{display:flex;flex-direction:column;justify-content:center;padding:var(--section-y) 7.5vw;} .split-text.dark{background:var(--navy-panel);color:var(--cream);} .split-text.light{background:var(--day-ground);color:var(--day-ink);} .split-text .eyebrow{margin-bottom:28px;} .split-text.dark .eyebrow{color:var(--gold-lift);} .split-text h2{font-family:var(--font-title);font-weight:400;font-size:clamp(38px,4.4vw,58px);line-height:1.05;margin:0;} .split-text.light h2{color:var(--day-head);} .split-text p{font-size:var(--fs-body);line-height:var(--lh-body);margin:30px 0 0;max-width:440px;} .split-text.dark p{color:var(--cream-soft);} .split-text.light p{color:var(--day-soft);} .split-text .actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:44px;} .split-media{position:relative;overflow:hidden;background:var(--navy);} .split-media .ph-fill{position:absolute;inset:0;} /* curtain reveal on split media, gated behind .js */ .js [data-curtain] .curtain{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.62,0,.16,1);} .js [data-curtain].in .curtain,.seen [data-curtain] .curtain{clip-path:inset(0 0 0 0);} /* ===================================================================== ROOMS PAGE (four rooms, galleries) ===================================================================== */ .rooms-list{padding:var(--section-y) var(--gutter);} .room{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,72px);align-items:center;max-width:var(--maxw-wide);margin:0 auto;padding:var(--section-y) 0;border-bottom:var(--hair-light);} .room:last-child{border-bottom:0;} .room:nth-child(even) .room-gallery{order:2;} .room-meta{text-align:center;} .room-tag{font-family:var(--font-display);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ocre-deep);margin:var(--sp-sm) 0 12px;} .room-name{font-family:var(--font-title);font-weight:400;font-size:clamp(30px,3.4vw,46px);color:var(--day-head);margin:0 0 var(--sp-sm);line-height:1.05;} .room-desc{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--day-soft);max-width:44ch;margin:0 auto var(--sp-md);} .gallery{position:relative;} .gallery-viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border:1px solid rgba(176,141,87,.5);border-radius:46% 46% 10px 10px / 30% 30% 10px 10px;} .gallery-viewport::-webkit-scrollbar{display:none;} .gslide{flex:0 0 100%;scroll-snap-align:center;position:relative;margin:0;} .gimg{height:clamp(360px,50vh,540px);} .gcap{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;margin:0;padding:18px 22px;z-index:3; background:linear-gradient(0deg,rgba(23,36,60,.6),transparent);color:var(--cream); font-family:var(--font-display);font-size:10px;letter-spacing:.24em;text-transform:uppercase;} .gnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:var(--cream);background:rgba(23,36,60,.30);border:0;border-radius:50%;cursor:pointer;transition:background .3s ease;z-index:4;} .gnav:hover{background:rgba(23,36,60,.5);} .gnav.prev{left:12px;} .gnav.next{right:12px;} .gcount{position:absolute;right:14px;bottom:14px;color:var(--cream);font-family:var(--font-display);font-size:10px;letter-spacing:.2em;background:rgba(23,36,60,.42);padding:5px 11px;border-radius:20px;z-index:4;} /* ===================================================================== CARD GRIDS (Burgau days, zones) ===================================================================== */ .cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:70px 56px;max-width:1100px;margin:0 auto;} .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:64px 40px;max-width:var(--maxw-wide);margin:0 auto;} .card .arch{height:340px;border-radius:42% 42% 8px 8px / 24% 24% 8px 8px;} .card .meta{text-align:center;margin-top:24px;} .card .meta .tag{font-family:var(--font-display);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ocre-deep);margin-bottom:10px;} .card .meta .name{font-family:var(--font-title);font-weight:400;font-size:30px;color:var(--day-head);} .card .meta .desc{font-size:var(--fs-small);line-height:1.85;color:var(--day-soft);margin:12px auto 0;max-width:360px;} .values{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;max-width:1040px;margin:0 auto;} .values .v-name{font-family:var(--font-title);font-style:italic;font-size:30px;color:var(--rosa-deep);margin-bottom:14px;} .values .v-desc{font-size:var(--fs-small);line-height:1.9;color:var(--day-soft);} /* fact list rows (Burgau history, treatments) */ .fact-list{max-width:var(--maxw-prose);margin:0 auto;} .fact{display:flex;gap:34px;align-items:baseline;padding:26px 0;border-bottom:var(--hair-light);} .section--navy .fact{border-bottom:var(--hair-dark);} .fact .f-key{font-family:var(--font-title);font-style:italic;font-size:22px;color:var(--rosa-deep);min-width:130px;flex:none;} .fact .f-val{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--day-soft);} .section--navy .fact .f-key{color:var(--gold-lift);} .section--navy .fact .f-val{color:var(--cream-soft);} /* ===================================================================== ENQUIRY (Book): the booking module boundary ===================================================================== */ .booking-module{max-width:640px;margin:0 auto;} /* the three booking doors: a room, a table, a treatment */ .doors{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 44px;} .door{font-family:var(--font-display);font-size:11px;letter-spacing:.22em;text-transform:uppercase; padding:14px 26px;border:1px solid rgba(61,92,143,.35);background:transparent;color:var(--day-ink); border-radius:3px;cursor:pointer;transition:background .3s ease,color .3s ease;} .door.active{background:var(--day-ink);color:var(--day-ground);border-color:var(--day-ink);} .enquiry-form{display:grid;gap:26px;text-align:left;} .enquiry-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:26px;} .field label{display:block;font-family:var(--font-display);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ocre-deep);margin-bottom:10px;} .field input,.field textarea{ width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid rgba(61,92,143,.3); font-family:var(--font-body);font-size:var(--fs-body);color:var(--day-ink);padding:10px 2px;border-radius:0; } .field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ocre);} .field textarea{min-height:120px;resize:vertical;} .form-note{font-size:var(--fs-small);color:var(--day-mute);line-height:1.8;} .form-sent{background:rgba(199,154,82,.12);border:1px solid rgba(199,154,82,.4);border-radius:3px;padding:22px 26px;font-size:var(--fs-body);color:var(--day-ink);} .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;} /* ===================================================================== NEWSLETTER ===================================================================== */ .newsletter{text-align:center;padding:var(--section-y) var(--gutter);color:var(--cream);} .newsletter h2{font-family:var(--font-title);font-style:italic;font-weight:400;font-size:clamp(32px,3.8vw,52px);margin:0 0 18px;line-height:1.1;} .newsletter .note{max-width:480px;margin:0 auto 40px;font-size:15px;line-height:1.8;color:var(--cream-soft);} .news-field{display:flex;align-items:center;max-width:470px;margin:0 auto;border-bottom:1px solid rgba(246,241,231,.4);} .news-field input{flex:1;background:transparent;border:0;outline:0;color:var(--cream);font-family:var(--font-body);font-size:16px;padding:18px 4px;} .news-field input::placeholder{color:var(--cream-mute);} .news-field .join{font-family:var(--font-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lift);padding:18px 4px;cursor:pointer;background:none;border:0;} /* ===================================================================== FOOTER ===================================================================== */ .site-footer{position:relative;overflow:hidden;background:var(--navy-deep);color:var(--cream-soft);padding:var(--sp-xl) var(--gutter) 0;} .site-footer > *{position:relative;z-index:1;} .footer-logo{text-align:center;padding:0 0 var(--sp-lg);} .footer-logo img{width:min(190px,52vw);height:auto;display:inline-block;filter:brightness(1.35) saturate(.95);opacity:.96;} .footer-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:48px;border-top:var(--hair-dark);border-bottom:var(--hair-dark);padding:54px 0;} .footer-grid h4{font-family:var(--font-display);font-weight:400;color:var(--gold);letter-spacing:.26em;text-transform:uppercase;font-size:10.5px;margin:0 0 18px;} .footer-grid .col p,.footer-grid .col a{display:block;font-size:15px;line-height:2;opacity:.85;} .footer-heritage{text-align:center;padding:44px 0 6px;font-family:var(--font-display);font-weight:400;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);} .copyright{text-align:center;font-family:var(--font-body);font-size:13px;letter-spacing:.06em;opacity:.5;padding:26px 0 34px;} /* ===================================================================== REVEALS + KEYFRAMES ===================================================================== */ .js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease;} .js [data-reveal].in,.seen [data-reveal]{opacity:1;transform:none;} @keyframes floatup{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}} .hero-crest{animation-name:floatup;} @keyframes crestdraw{from{opacity:0;}to{opacity:.9;}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .hero-crest,.hero-copy{animation:none;} .js [data-reveal]{opacity:1;transform:none;transition:none;} .js [data-curtain] .curtain{clip-path:none;transition:none;} } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width:980px){ .rooms-slider .grid{grid-template-columns:1fr;gap:48px;} .rooms-photo{height:440px;} .rooms-text{padding:0;} .split{grid-template-columns:1fr;} .split-media{min-height:380px;} .split-text{padding:80px 8vw;} .cards-3{grid-template-columns:repeat(2,1fr);gap:48px 32px;} .footer-grid{grid-template-columns:1fr 1fr;gap:40px;} .room{grid-template-columns:1fr;gap:var(--sp-md);} .room:nth-child(even) .room-gallery{order:0;} } @media (max-width:720px){ .site-header{padding:18px 22px;} .site-header.solid{padding:12px 22px;} .header-langs{display:none;} .wordmark .name{font-size:19px;letter-spacing:.34em;} .header-book{display:none;} .nav-toggle{display:flex;flex:1;justify-content:flex-end;background:none;border:0;color:var(--cream);font-family:var(--font-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;} .site-nav{top:0;left:0;right:0;bottom:0;height:100vh;flex-direction:column;justify-content:center;gap:26px;background:var(--navy-deep);transform:translateY(-100%);opacity:1;transition:transform .45s ease;font-size:13px;padding:60px 24px;} .site-nav.open{transform:translateY(0);} .site-nav.hidden{top:0;opacity:1;} .site-nav a{opacity:.85;} .day-chrome .site-nav{color:var(--cream);} /* the mobile drawer is always navy */ .nav-book{display:inline-block;margin-top:18px;color:var(--cream);border:1px solid rgba(246,241,231,.5);padding:15px 38px;border-radius:3px;font-family:var(--font-display);font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:1;} .intro{padding:120px 22px 100px;} .moments{padding:100px 0;} .moment{width:78vw;} .cards-2,.cards-3,.values{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;} .split-text .actions{flex-direction:column;} .enquiry-form .row2{grid-template-columns:1fr;} .fact{flex-direction:column;gap:8px;} }