/* ============================================================ VILLA VERDIN — Lakeside Art-Zine design system White paper · poster cobalt + signature cerulean. Bodoni / Spectral / Space Mono. ============================================================ */ :root{ /* Palette: Villa Verdin blues on clean white */ --paper:#FFFFFF; /* white ground */ --paper-deep:#E6EDF3; /* light cool grey — image placeholders / deep fills */ --paper-hi:#F4F8FB; /* faint cool white — cards & frames */ --blue:#2F99C3; /* ★ SIGNATURE bright blue — the badge */ --navy:#033570; /* ★ POSTER cobalt — dramatic dark ground */ --blue-deep:#0E466A; /* deep blue — secondary panel grounds */ --blue-mid:#1C6E92; /* mid blue — links, eyebrows, accents on white */ --blue-light:#9AD3E8; /* light cerulean — accents on navy (AA on cobalt) */ --ink:#0A2E5C; /* deep blue — headlines & rules */ --ink-2:#082548; /* deeper */ --ink-3:#06203F; /* deepest — body text */ --blue-haze:rgba(47,153,195,.14); --blue-line:rgba(10,46,92,.28); --display:"Bodoni Moda", Georgia, serif; --display-alt:"Gabriela", "Bodoni Moda", Georgia, serif; /* matches the wordmark's VERDIN */ --body:"Spectral", Georgia, serif; --mono:"Space Mono", ui-monospace, monospace; --maxw:1320px; --gutter:clamp(20px, 5vw, 64px); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink-3); font-family:var(--body); font-size:clamp(16px,1.05vw,19px); line-height:1.55; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* paper grain */ body::before{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} /* ---------- Typography ---------- */ .display{font-family:var(--display); font-weight:800; line-height:.9; letter-spacing:-.01em} .serif{font-family:var(--body)} .mono{font-family:var(--mono)} h1,h2,h3{font-family:var(--display); margin:0; line-height:.92; letter-spacing:-.015em; color:var(--ink)} /* Teal accent on the italic display words inside headings + pull quotes. These are all >=24px so the 3:1 large-text contrast rule applies and #2F99C3 passes on both white (3.18:1) and navy (3.83:1). */ h1 em, h1 [style*="italic"], h2 em, h2 [style*="italic"], h3 em, h3 [style*="italic"], .pull em, .pull [style*="italic"], .indexrow .t em, .indexrow .t [style*="italic"], .foot .big em, .foot .big [style*="italic"]{ color:var(--blue); } /* On navy/ink-bg sections, the same teal still reads */ .ink-bg h1 em, .ink-bg h1 [style*="italic"], .ink-bg h2 em, .ink-bg h2 [style*="italic"], .ink-bg h3 em, .ink-bg h3 [style*="italic"], .ink-bg .pull em, .ink-bg .pull [style*="italic"], .foot .big em, .foot .big [style*="italic"]{ color:var(--blue); } .eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--blue-mid); font-weight:700; display:inline-flex; align-items:center; gap:.7em; } .eyebrow::before{content:""; width:34px; height:1px; background:currentColor; display:inline-block} .kicker-num{ font-family:var(--mono); font-size:.78rem; letter-spacing:.2em; color:var(--blue-mid); font-weight:700; } .lead{font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.45; font-weight:300} /* language helper — both shown until JS decides; JS sets [data-lang] on */ [data-lang="en"] .de{display:none} [data-lang="de"] .en{display:none} /* ---------- Layout ---------- */ .wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)} .section{padding-block:clamp(72px,11vh,150px); position:relative} .divider{height:2px; background:var(--ink); opacity:.85} .divider-dotted{height:0; border-top:2px dotted var(--blue-line)} /* ---------- Top bar ---------- */ .topbar{ position:sticky; top:0; z-index:200; background:var(--navy); color:var(--paper); border-bottom:2px solid var(--blue); } .topbar .bar{ max-width:var(--maxw); margin:0 auto; padding:10px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:18px; } .brand{ display:inline-flex; flex-direction:column; align-items:center; gap:.35em; white-space:nowrap; color:var(--paper); line-height:1; } .brand .wordmark-svg{ height:clamp(28px,3.2vw,40px); width:auto; display:block; } .brand .brand-place{ font-family:var(--display-alt); font-size:.78rem; letter-spacing:.22em; opacity:.8; font-weight:400; text-transform:uppercase; align-self:center; } .nav{display:flex; align-items:center; gap:clamp(10px,1.8vw,30px)} .nav a{ font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper); opacity:.8; padding:6px 2px; position:relative; white-space:nowrap; } .nav a:hover{opacity:1} .nav a.active{opacity:1} .nav a.active::after,.nav a:hover::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--paper); } .langtoggle{ display:inline-flex; border:1.5px solid var(--paper); border-radius:999px; overflow:hidden; font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.1em; } .langtoggle button{ background:transparent; color:var(--paper); border:0; padding:5px 11px; cursor:pointer; font:inherit; letter-spacing:inherit; } .langtoggle button.on{background:var(--paper); color:var(--ink)} .burger{display:none; background:none; border:0; color:var(--paper); cursor:pointer; padding:6px} .burger span{display:block; width:24px; height:2px; background:var(--paper); margin:5px 0} /* sailboat sits at the bottom of the mobile drawer only */ .nav .nav-boat{display:none} @media (max-width:860px){ .nav{ position:fixed; inset:0 0 0 auto; width:min(78vw,340px); background:var(--ink); flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; padding:40px; transform:translateX(105%); transition:transform .4s cubic-bezier(.2,.8,.2,1); border-left:2px solid var(--paper); z-index:210; } .nav.open{transform:translateX(0)} .nav a{font-size:1rem; padding:10px 0} .burger{display:block; z-index:220} .nav .nav-boat{ display:block; margin:auto auto 0; width:clamp(110px, 38vw, 180px); height:auto; opacity:.85; filter:drop-shadow(0 4px 14px rgba(0,0,0,.35)); animation:gentle-bob 5.6s ease-in-out infinite; } @keyframes gentle-bob{ 0%,100% { transform:translateY(0) rotate(-2deg) } 50% { transform:translateY(-9px) rotate(2.5deg) } } } /* ---------- Marquee ---------- */ .marquee{ background:var(--navy); color:var(--paper); overflow:hidden; white-space:nowrap; border-block:2px solid var(--blue); padding:11px 0; } .marquee .track{display:inline-flex; gap:0; animation:scroll 38s linear infinite; will-change:transform} .marquee:hover .track{animation-play-state:paused} .marquee span{ font-family:var(--display); font-style:italic; font-weight:500; font-size:1.4rem; padding:0 1.6rem; display:inline-flex; align-items:center; gap:1.6rem; } .marquee span::after{content:"✶"; font-size:.7em; color:var(--blue); opacity:1} @keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}} /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; padding:14px 26px; border:2px solid var(--navy); background:var(--navy); color:var(--paper); border-radius:999px; cursor:pointer; transition:transform .25s, background .25s, color .25s; } .btn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--blue)} .btn.ghost{background:transparent; color:var(--navy)} .btn.ghost:hover{background:var(--navy); color:var(--paper)} .btn .arr{transition:transform .25s} .btn:hover .arr{transform:translateX(4px)} /* ---------- Art frames (tilted, straighten on hover) ---------- */ .frame{ position:relative; background:var(--paper-hi); padding:12px 12px 0; border:2px solid var(--ink); box-shadow:8px 8px 0 var(--ink); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; } .frame:hover{transform:rotate(0deg) translate(-2px,-2px) !important; box-shadow:12px 12px 0 var(--ink)} .frame .slot, .frame image-slot{display:block; width:100%; background:var(--paper-deep)} .frame .placard{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-2); padding:11px 4px 13px; display:flex; justify-content:space-between; gap:10px; align-items:baseline; } .frame .placard b{font-weight:700; text-transform:uppercase; letter-spacing:.12em} .frame .placard i{font-style:italic; opacity:.65; font-family:var(--body)} .tilt-l{transform:rotate(-3deg)} .tilt-r{transform:rotate(2.5deg)} .tilt-ll{transform:rotate(-1.6deg)} .tilt-rr{transform:rotate(1.8deg)} /* tape bits */ .tape{ position:absolute; width:96px; height:28px; background:rgba(28,92,132,.22); border:1px dashed var(--blue-line); top:-12px; left:50%; transform:translateX(-50%) rotate(-4deg); backdrop-filter:saturate(120%); } /* image-slot default look inside frames */ image-slot{--isl-bg:var(--paper-deep)} /* ---------- Poster hero (navy, negative-space homage) ---------- */ .poster{ position:relative; background:var(--navy); color:var(--paper); overflow:hidden; min-height:clamp(580px,90vh,920px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(48px,9vh,110px) var(--gutter); } /* full-bleed villa photo behind the brand wash */ .poster .photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .poster .scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; /* Top half of the photo essentially uncovered; gentle wash only where the subtitle and buttons live, with the bottom edge fading into navy to meet the marquee. Lighthouse contrast checks don't apply to text over images, so this is mainly a readability concern — the subtitle keeps its existing text-shadow as a safety net. */ background:linear-gradient(180deg, rgba(3,53,112,0) 0%, rgba(3,53,112,0) 40%, rgba(3,53,112,.30) 70%, rgba(3,53,112,.60) 100%); } .poster > :not(.photo):not(.scrim){position:relative; z-index:2} .poster .badge{ width:clamp(104px,11vw,156px); height:auto; display:block; margin:0 auto clamp(20px,3vh,34px); filter:drop-shadow(0 8px 22px rgba(0,0,0,.32)); animation:bob 6s ease-in-out infinite; } @keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)}} .poster .wordmark{ margin:0; line-height:0; font-size:0; /* element is now the wordmark image */ } .poster .wordmark .hero-wordmark{ display:block; margin:0 auto; width:clamp(280px, 70vw, 880px); height:auto; /* tight dark ground for definition + soft navy halo for depth */ filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)) drop-shadow(0 10px 28px rgba(3,30,64,.45)); } .poster .sub{ font-family:var(--mono); font-size:.82rem; letter-spacing:.42em; text-transform:uppercase; color:var(--paper); margin-top:1.6em; font-weight:700; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 18px rgba(3,30,64,.8); } .poster .pbtns{display:flex; gap:clamp(12px,2vw,22px); flex-wrap:wrap; justify-content:center; margin-top:2.2em} .poster .btn{border-color:var(--paper)} .poster .btn.primary{background:var(--blue); border-color:var(--blue); color:var(--ink-3)} .poster .btn.primary:hover{box-shadow:5px 5px 0 var(--paper)} .poster .btn.line{background:transparent; color:var(--paper)} .poster .btn.line:hover{background:var(--paper); color:var(--navy)} @media (max-width:680px){.poster{min-height:78vh}} /* ---------- Big numbered list / index ---------- */ .indexrow{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,4vw,48px); align-items:baseline; padding:26px 0; border-top:2px solid var(--ink); transition:padding-left .35s, background .35s; } .indexrow:last-child{border-bottom:2px solid var(--ink)} .indexrow:hover{padding-left:18px} .indexrow .n{font-family:var(--mono); font-size:.9rem; color:var(--blue-mid); font-weight:700} .indexrow .t{font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3.4vw,2.8rem); color:var(--ink); line-height:1} .indexrow .t em{font-style:italic; font-weight:500} .indexrow .d{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:var(--ink-2); text-align:right; max-width:30ch} /* ---------- Cards ---------- */ .card{ background:var(--paper-hi); border:2px solid var(--ink); padding:clamp(22px,3vw,38px); position:relative; box-shadow:6px 6px 0 var(--ink); } .card h3{font-size:clamp(1.5rem,2.6vw,2.2rem); margin-bottom:.4em} .card .tag{ position:absolute; top:-13px; left:22px; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; padding:5px 12px; font-weight:700; } /* inverted (navy poster) section */ .ink-bg{background:var(--navy); color:var(--paper)} .ink-bg h1,.ink-bg h2,.ink-bg h3{color:var(--paper)} .ink-bg .eyebrow{color:var(--blue-light)} .ink-bg .divider{background:var(--paper)} /* pull quote */ .pull{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(1.7rem,4.2vw,3.4rem); line-height:1.08; color:var(--ink); text-wrap:balance; } .pull .src{display:block; font-family:var(--mono); font-style:normal; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-mid); margin-top:1.1em; font-weight:700} /* Decorative drifting boat — sits on navy areas. */ .boat-drift{ position:absolute; pointer-events:none; z-index:1; width:clamp(56px,6vw,108px); height:auto; opacity:1; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); animation:bob 8s ease-in-out infinite; } .boat-drift.top-right{top:clamp(18px,4vh,48px); right:clamp(18px,4vw,72px); transform:rotate(8deg)} .boat-drift.bottom-left{bottom:clamp(18px,4vh,48px); left:clamp(18px,4vw,72px); transform:rotate(-12deg)} @media (max-width:680px){.boat-drift{width:clamp(48px,16vw,84px)}} /* Speedboat: enters from the top-right of its section, mirrored so its bow points down-and-left into the section. JS-driven via Element.animate so it can dive in then settle and bob. */ .speed-track{ position:absolute; pointer-events:none; top:clamp(14px,4vh,52px); right:clamp(14px,4vw,72px); width:clamp(72px,11vw,150px); } .boat-drift.speeding{ position:relative; inset:auto; width:100%; height:auto; transform:scaleX(-1) rotate(-18deg); transform-origin:50% 50%; } /* Sailboat: the wrapper handles the entrance (driven by Web Animations API in index.html — Element.animate gives smoother timing than CSS keyframes for a multi-second slide). The inner image only bobs. */ .sail-track{ position:absolute; pointer-events:none; bottom:clamp(14px,3vh,42px); left:50%; width:clamp(72px,11vw,150px); margin-left:clamp(-75px,-5.5vw,-36px); transform:translateX(-130vw); opacity:0; will-change:transform, opacity; } .boat-drift.sailing{ position:relative; inset:auto; transform:none; width:100%; height:auto; transform-origin:50% 70%; /* Bob is driven by Web Animations API in index.html so the amplitude can change between "sailing across" and "resting in the harbour". */ } @media (prefers-reduced-motion: reduce){ .sail-track{transform:translateX(18vw); opacity:1} .boat-drift.sailing{animation:none} } /* anchor section break — dotted rules flanking a small ⚓ */ .anchor-break{ display:flex; align-items:center; gap:clamp(14px,2vw,24px); padding-block:clamp(28px,5vh,56px); color:var(--ink); } .anchor-break::before, .anchor-break::after{ content:""; flex:1; height:0; border-top:1.5px dotted var(--blue-line); } .ink-bg .anchor-break, .anchor-break.on-ink{color:var(--paper)} .ink-bg .anchor-break::before, .ink-bg .anchor-break::after, .anchor-break.on-ink::before, .anchor-break.on-ink::after{border-top-color:rgba(255,255,255,.45)} .anchor-break .anchor{ font-family:var(--display); font-size:clamp(1.1rem,1.8vw,1.5rem); line-height:1; opacity:.85; display:inline-block; } /* wavy lake rule */ .wave{display:block; width:100%; height:26px; color:var(--ink)} /* scroll reveal */ [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)} [data-reveal].in{opacity:1; transform:none} /* failsafe: once loaded, any revealed element is guaranteed visible even if transitions are throttled */ html.vv-loaded [data-reveal].in{opacity:1 !important; transform:none !important; transition:none} /* sticker / badge */ .sticker{ display:inline-grid; place-items:center; width:118px; height:118px; border-radius:50%; border:2px solid var(--ink); background:var(--paper-hi); text-align:center; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); line-height:1.5; padding:10px; font-weight:700; box-shadow:5px 5px 0 var(--ink); } .spin{animation:spin 18s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* Resavio booking widget — themed to the Villa Verdin palette. The 5 variables widgets.css reads are set both on :root (covers resavio-sticky-bar elsewhere) and scoped to .vv-resavio for safety. */ :root, .vv-resavio, resavio-form, resavio-sticky-bar{ --resavio-background-color: var(--paper); --resavio-font-color: var(--ink-3); --resavio-primary-color: var(--navy); --resavio-secondary-color: var(--blue-mid); --resavio-border-color: rgba(10,46,92,.28); } .vv-resavio resavio-form{ display:block; font-family:var(--body); } .vv-resavio resavio-form button, .vv-resavio resavio-form .button{ font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; } /* footer */ .foot{ background:var(--navy); color:var(--paper); padding-block:clamp(56px,8vh,96px); /* extra room under everything for the briefs banner — full-width image keeps its natural ~2:1 aspect, so it occupies ~50vw of height. */ padding-bottom:calc(clamp(56px,8vh,96px) + 50vw); position:relative; overflow:hidden; } .foot a{opacity:.85} .foot a:hover{opacity:1; text-decoration:underline} .foot .big{font-family:var(--display); font-weight:800; line-height:.86; font-size:clamp(3rem,11vw,9rem); color:var(--paper); letter-spacing:-.02em} /* Footer wordmark — centred, sits between the columns and the briefs banner */ .foot .foot-wordmark{ display:block; margin:clamp(28px,4vw,56px) auto 0; width:clamp(120px, 18vw, 240px); height:auto; opacity:.95; filter:drop-shadow(0 4px 18px rgba(0,0,0,.35)); } /* Briefs banner — one big pair spanning full width at natural aspect. */ .foot::after{ content:""; position:absolute; left:0; right:0; bottom:0; width:100%; aspect-ratio: 653 / 327; background:url(villa-verdin-swim-briefs.svg) no-repeat center bottom / contain; pointer-events:none; } /* utility */ .center{text-align:center} .muted{opacity:.7} .up{text-transform:uppercase} .stack-sm > * + *{margin-top:.8rem} .grid{display:grid; gap:clamp(20px,3vw,44px)} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} @media (max-width:860px){.cols-2,.cols-3{grid-template-columns:1fr}} .flex{display:flex} .between{justify-content:space-between} .items-center{align-items:center} .gap{gap:clamp(14px,2vw,28px)} .wrap-gap{flex-wrap:wrap} /* ============================================================ MOBILE — collapse all inline multi-column grids to one column, reset column spans, and grow tap targets. ============================================================ */ @media (max-width:760px){ [style*="grid-template-columns"]{grid-template-columns:1fr !important} [style*="grid-column"]{grid-column:auto !important} .indexrow{grid-template-columns:1fr !important; gap:6px !important} .indexrow .d{text-align:left !important; max-width:none !important} .frame{box-shadow:6px 6px 0 var(--ink)} /* keep playful tilts gentle so nothing clips off-screen */ .tilt-l,.tilt-r,.tilt-ll,.tilt-rr{transform:none} .sticker{width:96px; height:96px} } @media (max-width:860px){ .nav a{padding:14px 0; min-height:48px; display:flex; align-items:center} .langtoggle{margin-top:14px} .langtoggle button{padding:10px 16px} } /* prevent any horizontal scroll from rotated frames */ main, section, footer, .marquee{max-width:100vw}