/* ========================================================================== ABADAA — Luxury Travels & Tours Shared design system for all pages. Built from refs/style-guide/STYLE-GUIDE.md and the nine reference boards. Tokens are the ones already used by v1 (site/index.html), renamed to the brief's vocabulary (--forest / --forest-2) with the v1 names kept as aliases so nothing that referenced --green breaks. Contents 01 Fonts (self-hosted only) 02 Tokens 03 Reset & base 04 Layout helpers 05 Type primitives 06 Buttons 07 Navigation 08 Icon sprite 09 .band-hero 10 .band-icons 11 .band-grid + .band-captions 12 .band-statement 13 .band-cta (footer) 14 Booking form 15 Reveal 16 Responsive 17 Motion / print ========================================================================== */ /* ------------------------------------------------------------------ 01 */ /* Latin + Latin-ext subsets of Inter and Playfair Display. The woff2 files live in site/assets/fonts/ (see assets/fonts/fonts.css, whose own url() paths are written relative to site/assets/ and therefore cannot be @imported from inside that folder — the face rules are restated here with paths correct from site/assets/site.css). No CDN, no build step. */ @font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter_v20_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/playfairdisplay_v40_nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_qiTXt_A-W2r.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/playfairdisplay_v40_nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_qiTXtHA-Q.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/playfairdisplay_v40_nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/playfairdisplay_v40_nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/playfairdisplay_v40_nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/playfairdisplay_v40_nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/playfairdisplay_v40_nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/playfairdisplay_v40_nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/playfairdisplay_v40_nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/playfairdisplay_v40_nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* ------------------------------------------------------------------ 02 */ :root{ /* surfaces */ --cream:#F4F1EA; --cream-2:#FAF8F3; /* text */ --ink:#14181A; --body:#3A3F3C; --bone:#EFEAE0; --bone-dim:rgba(239,234,224,.78); /* brand */ --forest:#1B3A2F; --forest-2:#14291F; --navy:#1B2B4A; /* v1 aliases */ --green:var(--forest); --green-d:var(--forest-2); /* gold */ --gold:#B8912F; --gold-bright:#D4AF37; --gold-ink:#7C5F17; --rule:#E3D3A8; --hair:rgba(184,145,47,.38); --hair-soft:rgba(184,145,47,.22); --hair-light:rgba(212,175,55,.42); /* type */ --serif:"Playfair Display",Georgia,"Times New Roman",serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* metrics */ --maxw:1240px; --pad:clamp(16px,4.6vw,54px); --band-y:clamp(46px,7.6vw,94px); --err:#9d2f21; } /* ------------------------------------------------------------------ 03 */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0;background:var(--cream);color:var(--body); font-family:var(--sans);font-size:16px;line-height:1.7;font-weight:400; touch-action:pan-y;overflow-wrap:break-word; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } img{max-width:100%;height:auto;display:block;border:0;} /* photography is always a sharp rectangle: no radius, no shadow */ .photo,figure img,.band-hero__photo img,.band-statement__bg{border-radius:0;box-shadow:none;} h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);margin:0;font-weight:500;letter-spacing:.002em;} p{margin:0;} ul,ol{margin:0;padding:0;list-style:none;} a{color:inherit;} button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;} hr{border:0;} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;} /* ------------------------------------------------------------------ 04 */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);} .skip{ position:absolute;left:-9999px;top:0;z-index:300; background:var(--forest);color:#fff;padding:12px 20px; font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none; } .skip:focus{left:12px;top:12px;} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } .band{position:relative;} .band--forest{background:var(--forest);color:var(--bone);} .band--forest-2{background:var(--forest-2);color:var(--bone);} .band--cream{background:var(--cream);} .band--cream-2{background:var(--cream-2);} .band__head{padding-top:var(--band-y);} .band__head .display{margin-top:14px;} /* ------------------------------------------------------------------ 05 */ .display{ font-family:var(--serif);font-weight:500;text-transform:uppercase; line-height:.96;letter-spacing:-.005em;color:var(--ink);text-wrap:balance; } .display em{font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;} .display--xl{font-size:clamp(2.25rem,9.4vw,4.9rem);} .display--l{font-size:clamp(1.85rem,6.2vw,3.5rem);line-height:1.02;} .display--m{font-size:clamp(1.5rem,4.6vw,2.5rem);line-height:1.06;} .display--on-dark{color:#FCFAF4;} .display .g{color:var(--gold);} .display--on-dark .g{color:var(--gold-bright);} .eyebrow{ font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.3em; text-transform:uppercase;color:var(--gold-ink); } .eyebrow--light{color:var(--gold-bright);} .eyebrow--plain{color:var(--bone);opacity:.82;} .lede{ font-size:clamp(.98rem,1.6vw,1.06rem);line-height:1.75;color:var(--body); max-width:46ch;text-wrap:pretty; } .lede--on-dark{color:var(--bone-dim);} .lede--tight{max-width:38ch;} .small{font-size:.86rem;line-height:1.65;} .rule{ height:1px;width:100%;margin:0; background:linear-gradient(90deg,transparent,var(--gold) 16%,var(--gold) 84%,transparent); opacity:.7; } .rule--short{width:78px;height:1px;margin:0;background:linear-gradient(90deg,var(--gold),rgba(184,145,47,.12));opacity:.9;} .rule--full{background:linear-gradient(90deg,transparent,rgba(184,145,47,.5),transparent);opacity:1;} .rule--faint{background:linear-gradient(90deg,transparent,rgba(212,175,55,.34),transparent);opacity:1;} /* ------------------------------------------------------------------ 06 */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; cursor:pointer;text-decoration:none;text-align:center;white-space:nowrap; font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase; padding:15px 26px;min-height:48px;border-radius:0; background:var(--gold-bright);color:#14181A;border:1px solid var(--gold-bright); transition:background-color .28s ease,color .28s ease,border-color .28s ease; } .btn:hover{background:#C7A334;border-color:#C7A334;} .btn:active{background:var(--gold);} .btn--ghost{background:transparent;color:var(--forest);border-color:var(--hair);} .btn--ghost:hover{background:rgba(27,58,47,.06);border-color:var(--forest);} .btn--on-dark{background:transparent;color:#FCFAF4;border-color:var(--hair-light);} .btn--on-dark:hover{background:rgba(212,175,55,.14);border-color:var(--gold-bright);color:#fff;} .btn--gold{background:var(--gold);border-color:var(--gold);color:#14181A;} .btn--gold:hover{background:var(--gold-bright);border-color:var(--gold-bright);} .btn .ico{width:16px;height:16px;} .btn.is-busy{pointer-events:none;opacity:.86;} .spinner{ width:15px;height:15px;flex:none;display:none;border-radius:50%; border:2px solid rgba(20,24,26,.25);border-top-color:#14181A; animation:spin .7s linear infinite; } .btn.is-busy .spinner{display:block;} @keyframes spin{to{transform:rotate(360deg);}} /* ------------------------------------------------------------------ 07 */ .nav{ position:sticky;top:0;z-index:200; background:rgba(244,241,234,.92); -webkit-backdrop-filter:saturate(150%) blur(12px); backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--hair-soft); } .nav__inner{display:flex;align-items:center;gap:18px;min-height:70px;padding-block:10px;} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;padding-block:4px;flex:none;} .brand__mark{width:34px;height:auto;flex:none;} .brand__type{display:flex;flex-direction:column;line-height:1;} .brand__name{font-family:var(--serif);font-weight:600;color:var(--forest);font-size:1.12rem;letter-spacing:.14em;} .brand__sub{font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);margin-top:4px;font-weight:600;white-space:nowrap;} .nav__toggle{ display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;flex:none;cursor:pointer;border:1px solid var(--hair-soft); color:var(--forest); } .nav__toggle .ico{width:20px;height:20px;} .nav__toggle[aria-expanded="true"]{background:rgba(27,58,47,.06);} .nav__menu{ position:absolute;left:0;right:0;top:100%; background:var(--cream);border-bottom:1px solid var(--hair-soft); padding:8px var(--pad) 22px;display:none; } .nav__menu.is-open{display:block;} .nav__list{display:flex;flex-direction:column;} .nav__list > li{border-top:1px solid var(--hair-soft);} .nav__list > li:first-child{border-top:0;} .nav__links a,.nav__sub a{ display:block;text-decoration:none;color:var(--ink); font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase; padding:14px 0; } .nav__links a:hover,.nav__sub a:hover{color:var(--gold-ink);} .nav__sub-toggle{display:none;} /* desktop-only control; see the 900px block */ .nav__sub{padding-bottom:10px;} .nav__sub a{padding:11px 0 11px 14px;color:var(--body);font-size:.72rem;} .nav__sub a::before{content:"—";margin-right:9px;color:var(--gold);} .nav__cta{margin-top:16px;width:100%;} /* ------------------------------------------------------------------ 08 */ /* Icon sprite: everything is a thin 1.5px currentColor line drawing. */ .icons-sprite{position:absolute;width:0;height:0;overflow:hidden;} .ico{ width:34px;height:34px;flex:none;display:block; fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round; } .ico--sm{width:18px;height:18px;stroke-width:1.7;} .ico--lg{width:42px;height:42px;stroke-width:1.3;} /* ------------------------------------------------------------------ 09 */ .band-hero{ display:grid;grid-template-columns:19.5% 1fr; background:var(--forest-2);color:var(--bone); min-height:clamp(600px,90svh,860px); } .band-hero__col{ background:var(--forest); padding:clamp(20px,2.6vw,44px) clamp(16px,2.2vw,36px); display:flex;flex-direction:column;gap:26px; } .band-hero__logo{width:100%;max-width:196px;height:auto;} .band-hero__lines{ margin-top:auto;display:flex;flex-direction:column;gap:12px; font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.24em; text-transform:uppercase;color:var(--gold-bright);line-height:1.5; } .band-hero__media{position:relative;min-width:0;} .band-hero__photo{position:absolute;inset:0;overflow:hidden;} /* #heroArt carries the scroll parallax; the bleed absorbs the translate. */ .band-hero__art{position:absolute;inset:-13% 0 -17% 0;will-change:transform;} .band-hero__art img{width:100%;height:100%;object-fit:cover;object-position:38% 45%;} .band-hero__veil{ position:absolute;inset:0; background: linear-gradient(180deg,rgba(20,41,31,.52) 0%,rgba(20,41,31,.10) 34%,rgba(20,41,31,.62) 74%,rgba(20,41,31,.93) 100%), linear-gradient(90deg,rgba(20,41,31,.72) 0%,rgba(20,41,31,.24) 52%,rgba(20,41,31,.06) 100%); } .band-hero__micro{ position:absolute;top:clamp(18px,3.4vh,34px);right:var(--pad); width:min(24ch,38vw);text-align:right; font-size:.6rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase; color:#F0E4C4;line-height:1.9; } .band-hero__body{position:absolute;left:var(--pad);bottom:clamp(28px,6vh,64px);max-width:56ch;padding-right:20px;} .band-hero__body .eyebrow{color:var(--gold-bright);} .band-hero__body .display{color:#FCFAF4;margin:14px 0 0;} .band-hero__copy{ margin-top:20px;padding-top:18px;max-width:44ch; border-top:1px solid rgba(227,211,168,.32); color:rgba(244,241,234,.88);font-size:1rem;line-height:1.75; } .band-hero__tags{ position:absolute;right:var(--pad);top:clamp(60px,11vh,104px); width:min(228px,25vw);text-align:right; } .band-hero__brush{ position:absolute;inset:-22px -18px -22px -18px;width:calc(100% + 36px);height:calc(100% + 44px); color:var(--navy);opacity:.92;z-index:0; } .band-hero__taglist{position:relative;z-index:1;padding:16px 12px;} .band-hero__taglist li{ font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:#F0E4C4;line-height:1.6;padding:9px 0; } .band-hero__taglist li + li{border-top:1px solid rgba(212,175,55,.55);} .band-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;} /* ------------------------------------------------------------------ 10 */ .band-icons{background:var(--forest);color:var(--bone);border-top:1px solid rgba(212,175,55,.24);} .band-icons__list{display:grid;grid-template-columns:repeat(2,1fr);} .band-icons__list li{display:flex;border-left:1px solid var(--hair-light);} .band-icons__list li:nth-child(2n+1){border-left:0;} .band-icons__list a{ flex:1;display:flex;flex-direction:column;align-items:center;gap:12px; text-decoration:none;text-align:center;color:var(--gold-bright); padding:clamp(18px,2.6vw,30px) 8px; transition:color .3s ease,background-color .3s ease; } .band-icons__list a:hover{color:#F0E4C4;background:rgba(212,175,55,.05);} .band-icons__label{ font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.15em; text-transform:uppercase;line-height:1.7;color:var(--bone);max-width:17ch; } .band-icons__list a:hover .band-icons__label{color:#fff;} /* ------------------------------------------------------------------ 11 */ .g-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;} @media (min-width:640px){ .g-row{grid-template-columns:repeat(3,1fr);} } @media (min-width:1000px){ .g-row.cols-4{grid-template-columns:repeat(4,1fr);} .g-row.cols-5{grid-template-columns:repeat(5,1fr);} .g-row.cols-6{grid-template-columns:repeat(6,1fr);} } .band-grid{background:var(--hair);} .band-grid > li{position:relative;overflow:hidden;background:var(--cream);} /* --- .crop --------------------------------------------------------------- A plain image box: every tile is now a clean photographic rectangle (see work/build/clean-manifest.json), so the photo simply covers the box at any box aspect ratio. The old per-image --kw/--kh/--x/--y offsets existed only to hide the burned-in board typography inside the source crops; with the library rebuilt from detected clean rectangles they are no longer needed. */ .crop{display:block;position:relative;overflow:hidden;width:100%;background:var(--forest-2);} .crop > img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 50%; } .band-grid .crop{aspect-ratio:3/4;transition:transform .9s cubic-bezier(.2,.7,.3,1);} .band-grid > li:hover .crop{transform:scale(1.03);} .band-captions{background:transparent;} .band-captions > li{ padding:clamp(16px,2.2vw,26px) clamp(8px,1.3vw,16px) 0; text-align:center; } .band-captions .rule--short{margin:0 auto 14px;} .band-captions__title{ font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--forest);line-height:1.6; } .band-captions__body{ margin-top:9px;font-size:.82rem;line-height:1.62;color:var(--body); } .band--cream .band-captions__body,.band--cream-2 .band-captions__body{color:var(--body);} .section-grid{padding-bottom:var(--band-y);} .section-grid .band-grid{margin-top:clamp(24px,3.4vw,44px);} /* ------------------------------------------------------------------ 12 */ .band-statement{background:var(--forest-2);color:var(--bone);} .band-statement__figure{position:relative;overflow:hidden;} .band-statement__figure .crop{aspect-ratio:3/2;} .band-statement__veil{ position:absolute;inset:0; background: linear-gradient(180deg,rgba(20,41,31,.34) 0%,rgba(20,41,31,.22) 40%,rgba(20,41,31,.86) 100%), linear-gradient(90deg,rgba(20,41,31,.78) 0%,rgba(20,41,31,.30) 54%,rgba(20,41,31,.16) 100%); } .band-statement__panel{background:var(--forest-2);} .band-statement__inner{ position:relative;z-index:1;width:100%; display:grid;gap:20px; padding-block:clamp(26px,4.6vw,46px) clamp(32px,5.4vw,56px); } .band-statement__inner .display{margin-top:12px;color:#FCFAF4;font-size:clamp(1.55rem,4.2vw,2.75rem);} .band-statement__inner .display em{color:var(--gold-bright);} .band-statement__aside .lede{color:rgba(244,241,234,.9);max-width:44ch;font-size:.95rem;} /* ------------------------------------------------------------------ 13 */ .band-cta{background:var(--forest-2);color:var(--bone);} .band-cta__bar{ display:grid;gap:24px;align-items:center; padding-top:clamp(32px,5vw,54px);padding-bottom:clamp(26px,4vw,40px); } .band-cta__logo{width:180px;height:auto;} .band-cta__motto{ font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.3em; text-transform:uppercase;color:var(--bone); } .band-cta__motto span{color:var(--gold-bright);padding-inline:8px;} .band-cta__btn{justify-self:start;} .band-cta__fine{padding-bottom:clamp(30px,5vw,52px);} .band-cta__row{ display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between; align-items:baseline;margin-top:20px; } .band-cta__row p,.band-cta__row a{ font-size:.74rem;letter-spacing:.08em;color:rgba(239,234,224,.68); text-decoration:none; } .band-cta__row a:hover{color:#fff;} .band-cta__contact{display:flex;flex-wrap:wrap;gap:8px 20px;} /* ------------------------------------------------------------------ 14 */ .booking{background:var(--cream-2);padding-block:var(--band-y);} .booking__grid{display:grid;gap:clamp(30px,5vw,58px);} .booking__aside{display:flex;flex-direction:column;gap:18px;} .booking__aside .display{margin-top:6px;} .contact-list{display:flex;flex-direction:column;gap:12px;margin-top:8px;} .contact-list a{ display:inline-flex;gap:12px;align-items:baseline;text-decoration:none; font-size:.92rem;color:var(--ink); } .contact-list a:hover{color:var(--gold-ink);} .contact-list .k{ font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--gold-ink);min-width:78px;flex:none; } .form-shell{ background:#fff;border:1px solid var(--hair-soft);border-radius:0; padding:clamp(20px,4.4vw,38px); } .form-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;} .form-head .step-count{ font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink); } .progress{height:2px;background:rgba(184,145,47,.18);overflow:hidden;margin:16px 0 26px;} .progress__bar{display:block;height:100%;width:33.4%;background:var(--gold);transition:width .45s cubic-bezier(.2,.7,.3,1);} .fieldset{border:0;margin:0;padding:0;display:none;min-width:0;} .fieldset.is-active{display:block;animation:fade .45s ease both;} @keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} .legend{font-family:var(--serif);font-size:1.16rem;font-weight:600;color:var(--ink);margin-bottom:6px;padding:0;} .hint{font-size:.8rem;color:#6b706c;margin-bottom:18px;} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;min-width:0;} .field > label,.group-label{ font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--forest); } .field__hint{font-size:.74rem;line-height:1.5;color:#6b706c;margin-top:-2px;} .field input,.field select,.field textarea{ width:100%;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink); background:var(--cream-2);border:1px solid rgba(27,58,47,.22);border-radius:0; padding:13px 14px;min-height:50px; transition:border-color .25s ease,background-color .25s ease; touch-action:manipulation;-webkit-appearance:none;appearance:none; } .field textarea{min-height:112px;resize:vertical;} .field select{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237C5F17' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center;padding-right:40px; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--gold);background:#fff; } .field input::placeholder,.field textarea::placeholder{color:#9aa09b;} .field .err{font-size:.76rem;color:var(--err);display:none;} .field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--err);background:#fdf6f4;} .field.is-bad .err{display:block;} .trip-grid{display:grid;gap:10px;grid-template-columns:1fr;margin-bottom:18px;} .trip{ display:flex;align-items:flex-start;gap:12px;cursor:pointer; border:1px solid rgba(27,58,47,.2);border-radius:0;padding:14px;background:var(--cream-2); transition:border-color .25s ease,background-color .25s ease;position:relative; } .trip:hover{border-color:var(--hair);} .trip input{position:absolute;opacity:0;width:1px;height:1px;} .trip__tick{ width:17px;height:17px;flex:none;margin-top:3px;border:1px solid rgba(27,58,47,.4); border-radius:50%;display:grid;place-items:center; transition:border-color .25s ease,background-color .25s ease; } .trip__tick::after{content:"";width:7px;height:7px;border-radius:50%;background:transparent;transition:background-color .25s ease;} .trip > span:last-child{display:flex;flex-direction:column;gap:3px;} .trip__label{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);} .trip__sub{font-size:.8rem;color:var(--body);line-height:1.5;} .trip:has(input:checked){border-color:var(--gold);background:#fff;} .trip:has(input:checked) .trip__tick{border-color:var(--gold);background:rgba(184,145,47,.12);} .trip:has(input:checked) .trip__tick::after{background:var(--gold);} .trip:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px;} .form-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;} .form-nav .btn{flex:1 1 auto;} .status{margin-top:18px;padding:14px 16px;font-size:.88rem;display:none;border:1px solid transparent;} .status.show{display:block;} .status--err{background:#fdf3f1;border-color:rgba(157,47,33,.3);color:#8a2519;} .status--ok{background:#f2f7f3;border-color:rgba(27,58,47,.28);color:var(--forest);} .success{display:none;} .success.show{display:block;animation:fade .5s ease both;} .success__mark{width:46px;height:46px;color:var(--gold);margin-bottom:14px;} .success h3{font-size:1.5rem;margin-bottom:10px;color:var(--forest);} .ref{ display:inline-block;margin:12px 0 4px;padding:10px 14px; font-size:.8rem;letter-spacing:.16em;color:var(--gold-ink); border:1px dashed rgba(184,145,47,.5);word-break:break-all; } /* ------------------------------------------------------------------ 15 */ .js .reveal{transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);} .js .reveal.pre{opacity:0;transform:translateY(22px);} .js .reveal.is-in{opacity:1;transform:none;} .reveal[data-d="1"]{transition-delay:.08s;} .reveal[data-d="2"]{transition-delay:.16s;} .reveal[data-d="3"]{transition-delay:.24s;} /* ------------------------------------------------------------------ 16 */ /* --- up to 899px: nav collapses, hero stacks ---------------------------- */ @media (max-width:899px){ .nav__inner{gap:12px;min-height:64px;} .brand__mark{width:28px;} .brand__name{font-size:1rem;letter-spacing:.11em;} .brand__sub{font-size:.42rem;letter-spacing:.17em;} .band-hero{display:block;min-height:0;} .band-hero__col{ flex-direction:row;align-items:center;gap:14px; padding:14px var(--pad); } .band-hero__logo{width:116px;max-width:116px;} .band-hero__lines{ margin:0;flex-direction:row;flex-wrap:wrap;gap:4px 16px; font-size:.5rem;letter-spacing:.2em; } .band-hero__media{position:static;display:flex;flex-direction:column;} .band-hero__photo{position:relative;inset:auto;aspect-ratio:4/5;order:0;} .band-hero__body{order:1;} .band-hero__tags{order:2;} .band-hero__art{inset:0;} .band-hero__art img{object-position:34% 42%;} .band-hero__micro{ position:absolute;left:var(--pad);right:auto;top:auto;bottom:16px;width:auto; text-align:left;max-width:60%; } .band-hero__body{ position:static;left:auto;bottom:auto;max-width:none;padding:24px var(--pad) 6px; background:var(--forest-2); } .band-hero__copy{font-size:.96rem;} .band-hero__tags{ position:static;transform:none;width:auto;text-align:left; padding:10px var(--pad) 30px;background:var(--forest-2); } .band-hero__brush{display:none;} .band-hero__taglist{padding:0;} .band-hero__taglist li + li{border-top:1px solid rgba(212,175,55,.42);} .band-hero__actions .btn{flex:1 1 auto;} } @media (min-width:600px){ .band-icons__list{grid-template-columns:repeat(4,1fr);} .band-icons__list li:nth-child(2n+1){border-left:1px solid var(--hair-light);} .band-icons__list li:nth-child(4n+1){border-left:0;} .trip-grid{grid-template-columns:repeat(3,1fr);} } /* Statement band: from 700px the text overlays the photo (board behaviour); below that the photo sits above the text, so nothing is ever cramped. */ @media (min-width:700px){ .band-statement{position:relative;} .band-statement__figure .crop{aspect-ratio:2/1;} .band-statement__panel{ position:absolute;inset:0;background:none; display:flex;align-items:flex-end; } .band-statement__inner{ grid-template-columns:1.05fr .95fr;align-items:end;gap:56px; padding-block:clamp(34px,7vh,74px); } .band-statement__aside{padding-bottom:6px;} } /* --- 900px and up: full desktop nav ------------------------------------ */ @media (min-width:900px){ .nav__toggle{display:none;} .nav__menu{ position:static;display:flex;align-items:center;gap:26px; background:none;border:0;padding:0; } .nav__list{flex-direction:row;align-items:center;gap:26px;} .nav__list > li{border:0;position:relative;display:flex;align-items:center;} .nav__links a{padding:8px 0;position:relative;} .nav__links a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .3s ease; } .nav__links a:hover::after{transform:scaleX(1);} .nav__sub-toggle{ display:inline-flex;align-items:center;gap:7px;cursor:pointer; font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase; color:var(--ink);padding:8px 0;position:relative; } .nav__sub-toggle::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .3s ease; } .nav__sub-toggle:hover::after,.nav__sub-toggle[aria-expanded="true"]::after{transform:scaleX(1);} .nav__sub-toggle .ico{width:14px;height:14px;transition:transform .3s ease;} .nav__sub-toggle[aria-expanded="true"] .ico{transform:rotate(180deg);} .nav__sub{ position:absolute;top:calc(100% + 10px);left:-20px;min-width:262px; background:var(--cream);border:1px solid var(--hair-soft); padding:8px 20px 10px;display:none;z-index:10; } .nav__list > li:has(.nav__sub-toggle:hover) .nav__sub, .nav__list > li:has(.nav__sub-toggle:focus-visible) .nav__sub, .nav__list > li:has(.nav__sub:focus-within) .nav__sub, .nav__sub.is-open{display:block;} .nav__sub a{padding:10px 0;} .nav__cta{margin-top:0;width:auto;} .band-icons__list{grid-template-columns:repeat(7,1fr);} .band-icons__list--8{grid-template-columns:repeat(8,1fr);} .band-icons__list li:nth-child(4n+1){border-left:1px solid var(--hair-light);} .band-icons__list li:nth-child(7n+1){border-left:0;} .band-icons__list--8 li:nth-child(7n+1){border-left:1px solid var(--hair-light);} .band-icons__list--8 li:nth-child(8n+1){border-left:0;} .band-statement__figure .crop{aspect-ratio:12/5;} .booking__grid{grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start;} .band-cta__bar{grid-template-columns:1fr auto 1fr;} .band-cta__motto{text-align:center;} .band-cta__btn{justify-self:end;} .form-nav .btn{flex:0 0 auto;} } @media (min-width:1100px){ .brand__mark{width:38px;} } /* Narrow desktops: shrink the hero headline so the lower-left body and the top-right tagline stack can never collide, and so no long word (EXCEPTIONAL) can out-run its column. */ @media (min-width:900px) and (max-width:1159px){ .band-hero{min-height:clamp(680px,88svh,880px);} .band-hero__body .display{font-size:clamp(2.2rem,5.4vw,3.9rem);} } @media (max-width:420px){ .brand__sub{display:none;} .band-hero__logo{width:96px;max-width:96px;} } /* ------------------------------------------------------------------ 17 */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .reveal{opacity:1 !important;transform:none !important;transition:none !important;} .band-hero__photo img,.band-grid .photo{transition:none !important;} *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;} } @media print{ .nav,.band-hero__tags,.band-cta__btn{display:none !important;} body{background:#fff;} } /* ------------------------------------------------------------------ 18 */ /* Imagery. site/assets/harvest/ holds the 4x-upscaled, verified-clean set and site/assets/harvest-hero/ the four hero slots at 16x (4x on 4x). Every file is a photographic rectangle detected on the reference boards (work/build/detect_final.py) and inspected tile-by-tile for burned-in board typography (work/build/clean-manifest.json). Because each image is already a clean rectangle, no per-image crop offsets are needed -- the `.crop` box covers with object-fit:cover. */