/* ========================================================================== Myrtle Beach Boat Clubs assets/site.css A service of AAERO LLC. Build notes for whoever picks this up next: - Headings marked .fit are sized by JS so each line lands flush against both edges of its container. Letter spacing is declared in em (never px) so it scales with the computed font size and the fit math stays honest. - Every accessibility mode is a data attribute on . Nothing here depends on a third party widget. - Nothing horizontally overflows. If you add a section, keep it that way. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* ---- Brand palette, v1.0 guidelines. These four are the whole identity. Deep Navy #082B5B, Ocean Blue #1F6FB7, Sky Blue #6CC6F3, White #FFFFFF. Anything else in here is a tint, a shade or a functional UI state, and none of it is allowed to become a brand colour. ---- */ --navy: #082b5b; /* Deep Navy */ --ocean: #1f6fb7; /* Ocean Blue */ --sky: #6cc6f3; /* Sky Blue */ --white: #ffffff; /* Shades and tints derived from the four above. */ --ink: #04193a; --navy-900: #061f43; --navy-800: #082b5b; --navy-700: #0d3a72; --navy-600: #14508f; --ocean-dk: #185a97; --ocean-lt: #3d8bd0; --sky-soft: #a8dcf8; --foam-100: #e8f4fd; --foam-50: #f4fafe; --paper: #ffffff; /* Functional states only. Never used as decoration. */ --alert: #c0392b; --alert-soft: rgba(192, 57, 43, .1); --good: #1f8a6d; --line: rgba(8, 43, 91, .14); --line-soft: rgba(8, 43, 91, .08); --line-dark: rgba(255, 255, 255, .16); --txt: #0f2a4d; --txt-mid: #4d6684; --txt-light: rgba(255, 255, 255, .74); --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Fluid spacing. Everything on the page steps off these. */ --gap-xs: clamp(.5rem, .4rem + .3vw, .75rem); --gap-s: clamp(.85rem, .7rem + .6vw, 1.25rem); --gap-m: clamp(1.4rem, 1.1rem + 1.2vw, 2.25rem); --gap-l: clamp(2.4rem, 1.8rem + 2.6vw, 4.5rem); --gap-xl: clamp(3.6rem, 2.4rem + 5vw, 8rem); --shell: 1440px; --pad: clamp(1.15rem, .6rem + 2.6vw, 4.5rem); --radius-s: 10px; --radius: 18px; --radius-l: 28px; --shadow-s: 0 2px 8px rgba(8,43,91, .06), 0 12px 28px -18px rgba(8,43,91, .35); --shadow: 0 4px 14px rgba(8,43,91, .07), 0 30px 60px -35px rgba(8,43,91, .45); --shadow-l: 0 10px 30px rgba(8,43,91, .1), 0 60px 90px -50px rgba(8,43,91, .55); --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --hdr-h: 74px; --bar-h: 0px; --fit-scale: 1; } @media (min-width: 1024px) { :root { --hdr-h: 88px; } } /* -------------------------------------------------------------------------- 2. Reset and base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 18px); overflow-x: hidden; } body { margin: 0; background: var(--paper); color: var(--txt); font-family: var(--font-ui); font-size: clamp(1rem, .96rem + .2vw, 1.09rem); line-height: 1.68; font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: var(--bar-h); } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } /* Placeholder tint only on photography. Never on the logo, which is transparent. */ .card-media img, .fig img, .mega-feature img, .hero-bg img { background: var(--foam-100); } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.015em; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; } li { margin-bottom: .45em; } ::selection { background: var(--ocean); color: #fff; } :focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; border-radius: 3px; } /* -------------------------------------------------------------------------- 3. The 100 percent heading engine Each .fit line is a nowrap block. JS solves for the font size that makes the line box exactly as wide as its container, so no line ever breaks, hyphenates or leaves a ragged right edge. -------------------------------------------------------------------------- */ .fit { display: block; width: 100%; white-space: nowrap; font-weight: 700; letter-spacing: -0.022em; /* em, so it scales with the fitted size */ line-height: .98; margin: 0; font-size: 8vw; /* pre-JS fallback, replaced on first paint */ } .fit + .fit { margin-top: .06em; } .fit-semi { font-weight: 600; } .fit-tint { color: var(--sky); } .fit-sun { color: var(--ocean); } /* Colour accent inside a fitted line. Colour only: it must not change the metrics, or the fit solve would be measuring something it cannot reproduce. */ .hl { font-style: normal; font-weight: inherit; color: var(--ocean); } .band-navy .hl, .quote .hl, .path-club .hl, .notes .hl { color: var(--sky); } /* Statement headings always fill their column. Size is controlled by how wide that column is, never by capping the type, so nothing is left half filled. */ .h-statement { max-width: 100%; } /* Section intro: heading left, supporting copy right, so the row uses the full container instead of leaving a dead half. Never put a lone heading block in a full width row; it will fit to the whole shell and shout. */ .sec-head { display: grid; gap: var(--gap-s); align-items: center; /* both columns centre on each other, no dangling heading */ margin-bottom: var(--gap-m); } @media (min-width: 900px) { .sec-head { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--gap-l); } } .sec-head > * { min-width: 0; } .sec-head .lede { max-width: 54ch; } /* Small headings that are not worth scaling to billboard size still have to occupy the full container. A hairline runs from the last word to the edge. */ .rule-head { display: flex; align-items: baseline; gap: .7rem; width: 100%; margin: 0 0 var(--gap-s); } .rule-head > span:first-child { flex: 0 1 auto; min-width: 0; } .rule-head::after { content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .22; transform: translateY(-.28em); } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); } .shell-wide { max-width: 1720px; } section { position: relative; } .band { padding-block: var(--gap-xl); } .band-tight { padding-block: var(--gap-l); } .band-tint { background: var(--foam-50); } .band-foam { background: linear-gradient(180deg, var(--foam-100), #f4fbff); } .band-navy { background: var(--navy-900); color: #fff; } .band-navy a { color: var(--sky); } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-ui); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ocean); margin: 0 0 var(--gap-s); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--ocean); flex: none; } .band-navy .eyebrow { color: var(--sky); } .lede { font-size: clamp(1.08rem, 1rem + .55vw, 1.42rem); line-height: 1.5; color: var(--txt-mid); max-width: 62ch; } .band-navy .lede { color: var(--txt-light); } .measure { max-width: 68ch; } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--ocean); --btn-fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.6rem; min-height: 52px; border: 0; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-ui); font-size: .95rem; font-weight: 600; letter-spacing: .005em; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s; box-shadow: 0 10px 24px -12px rgba(31,111,183, .85); } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55%); transform: translateX(-100%); transition: transform .7s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(31,111,183, .95); } .btn:hover::after { transform: translateX(100%); } .btn:active { transform: translateY(0); } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--navy-800); box-shadow: inset 0 0 0 1.5px var(--line); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy-800); } .btn-light { --btn-bg: rgba(255,255,255,.09); --btn-fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34); backdrop-filter: blur(6px); } .btn-light:hover { --btn-bg: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); } .btn-navy { --btn-bg: var(--navy-800); box-shadow: 0 10px 24px -14px rgba(8,43,91,.9); } .btn-navy:hover { --btn-bg: var(--navy-700); } /* For primary actions sitting on deep navy, where ocean blue on navy is too quiet. White is one of the four brand colours, so this stays on palette. */ .btn-white { --btn-bg: var(--white); --btn-fg: var(--navy); box-shadow: 0 10px 26px -14px rgba(0,0,0,.6); } .btn-white:hover { --btn-bg: var(--foam-100); } .btn-sm { min-height: 44px; padding: .6rem 1.15rem; font-size: .875rem; } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } .link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--ocean); border-bottom: 1.5px solid transparent; transition: border-color .3s, gap .3s var(--ease); } .link-arrow svg { transition: transform .35s var(--ease); } .link-arrow:hover { border-color: currentColor; gap: .7rem; } .link-arrow:hover svg { transform: translateX(3px); } /* -------------------------------------------------------------------------- 6. Skip link and utility bar -------------------------------------------------------------------------- */ .skip { position: absolute; left: 1rem; top: -120px; z-index: 400; padding: .8rem 1.3rem; background: var(--ocean); color: #fff; font-weight: 600; border-radius: 0 0 12px 12px; text-decoration: none; transition: top .25s var(--ease); } .skip:focus { top: 0; } .util { position: relative; z-index: 60; background: var(--navy-900); color: rgba(255,255,255,.8); font-size: .78rem; letter-spacing: .01em; } /* Three columns so the message sits dead centre of the viewport regardless of how wide the link list on the right happens to be. */ .util .shell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 40px; padding-block: .35rem; } .util-msg { grid-column: 2; justify-content: center; text-align: center; } .util-links { grid-column: 3; justify-self: end; } .util-msg { display: flex; align-items: center; gap: .5rem; min-width: 0; } .util-msg strong { color: #fff; font-weight: 600; } .util-msg svg { flex: none; color: var(--sky); } .util-links { display: none; gap: 1.4rem; align-items: center; } .util-links a { text-decoration: none; opacity: .85; transition: opacity .25s; } .util-links a:hover { opacity: 1; text-decoration: underline; } @media (min-width: 900px) { .util-links { display: flex; } } /* -------------------------------------------------------------------------- 7. Header and mega menu -------------------------------------------------------------------------- */ /* The mark is deep navy artwork, so the bar it sits on stays white. The navy in "navy navigation" lives in the type, the utility bar and the mega panels. Never recolour the logo to sit it on a navy field. */ .hdr { position: sticky; top: 0; z-index: 120; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; transition: border-color .4s, box-shadow .4s, background-color .4s; } .hdr.is-stuck { border-bottom-color: var(--line-soft); box-shadow: 0 12px 30px -26px rgba(8,43,91,.9); background: rgba(255, 255, 255, .96); } /* Clear space around the mark equals the height of the B, per the guidelines. */ .brand img { padding-block: .35rem; } /* Where the mark has to appear on deep navy, it sits on a white plate rather than being inverted. PLACEHOLDER: drop in the official reversed lockup if one exists and these plates can go. */ .logo-plate { display: inline-block; padding: .8rem 1rem; background: var(--white); border-radius: 14px; } .logo-plate img { display: block; } .hdr .shell { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.75rem); min-height: var(--hdr-h); } .brand { display: flex; align-items: center; flex: none; text-decoration: none; margin-right: auto; } .brand img { width: clamp(148px, 17vw, 216px); height: auto; } .nav { display: none; } @media (min-width: 1100px) { .nav { display: flex; align-items: center; gap: .2rem; } } .nav-item { position: relative; } .nav-btn { display: inline-flex; align-items: center; gap: .32rem; padding: .65rem .8rem; background: none; border: 0; border-radius: 10px; font-size: .93rem; font-weight: 600; color: var(--navy); cursor: pointer; text-decoration: none; transition: color .25s, background-color .25s; } .nav-btn svg { transition: transform .35s var(--ease); opacity: .5; } .nav-btn:hover, .nav-item.is-open .nav-btn { color: var(--ocean); background: rgba(31,111,183,.07); } .nav-item.is-open .nav-btn svg { transform: rotate(180deg); opacity: 1; } .mega { position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; width: min(1080px, calc(100vw - 3rem)); padding: 1.9rem; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-l); box-shadow: var(--shadow-l); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.985); transform-origin: top center; transition: opacity .34s var(--ease), transform .34s var(--ease), visibility .34s; } .nav-item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .mega-grid { display: grid; grid-template-columns: 1.05fr 1.05fr 1fr; gap: 1.9rem; } .mega-col h3 { font-family: var(--font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ocean); margin-bottom: .9rem; } .mega-list { list-style: none; margin: 0; padding: 0; } .mega-list li { margin: 0; } .mega-list a { display: block; padding: .55rem .7rem; margin-left: -.7rem; border-radius: 12px; text-decoration: none; transition: background-color .28s, transform .28s var(--ease); } .mega-list a:hover { background: var(--foam-100); transform: translateX(3px); } .mega-list b { display: block; font-family: var(--font-ui); font-size: .95rem; font-weight: 600; color: var(--navy-800); } .mega-list span { display: block; font-size: .82rem; line-height: 1.45; color: var(--txt-mid); } .mega-feature { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 260px; display: flex; align-items: flex-end; padding: 1.3rem; color: #fff; text-decoration: none; isolation: isolate; } .mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .mega-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4,25,58,.9) 5%, rgba(4,25,58,.15) 70%); transition: opacity .4s; } .mega-feature:hover::after { opacity: .8; } .mega-feature strong { display: block; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; } .mega-feature small { display: block; margin-top: .3rem; font-size: .82rem; color: rgba(255,255,255,.78); } .hdr-tools { display: flex; align-items: center; gap: .4rem; flex: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--navy-800); cursor: pointer; transition: border-color .28s, background-color .28s, color .28s, transform .28s var(--ease); } .icon-btn:hover { border-color: var(--ocean); color: var(--ocean); background: rgba(31,111,183,.07); transform: translateY(-1px); } .icon-btn[aria-expanded="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } .icon-btn-wide { width: auto; padding-inline: .9rem; font-size: .84rem; font-weight: 600; } .hdr-cta { display: none; } @media (min-width: 780px) { .hdr-cta { display: inline-flex; } } .burger { display: inline-flex; } @media (min-width: 1100px) { .burger { display: none; } } .burger-lines { position: relative; width: 17px; height: 12px; } .burger-lines span { position: absolute; left: 0; width: 100%; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .38s var(--ease), opacity .2s; } .burger-lines span:nth-child(1) { top: 0; } .burger-lines span:nth-child(2) { top: 5.1px; } .burger-lines span:nth-child(3) { top: 10.2px; } .burger[aria-expanded="true"] .burger-lines span:nth-child(1) { transform: translateY(5.1px) rotate(45deg); } .burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger-lines span:nth-child(3) { transform: translateY(-5.1px) rotate(-45deg); } /* Language menu */ .lang-wrap { position: relative; } .lang-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 262px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding: .5rem; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; z-index: 5; } .lang-wrap.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-menu p { margin: .25rem .55rem .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--txt-mid); } .lang-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .55rem; border: 0; border-radius: 10px; background: none; text-align: left; font-size: .9rem; cursor: pointer; transition: background-color .22s; } .lang-menu button:hover { background: var(--foam-100); } .lang-menu button[aria-current="true"] { background: var(--navy-800); color: #fff; } .lang-menu .flag { font-size: 1.05rem; line-height: 1; flex: none; } /* Keep Google's injected chrome out of the layout. */ .skiptranslate iframe, iframe.skiptranslate { display: none !important; } body { top: 0 !important; } #google_translate_host { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .goog-logo-link, .goog-te-gadget span { display: none !important; } /* Mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 130; display: grid; grid-template-rows: auto 1fr; background: var(--navy-900); color: #fff; transform: translateY(-100%); visibility: hidden; transition: transform .55s var(--ease), visibility .55s; overflow: hidden; } .drawer.is-open { transform: translateY(0); visibility: visible; } .drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem var(--pad); border-bottom: 1px solid var(--line-dark); min-height: var(--hdr-h); } .drawer-top .logo-plate { padding: .5rem .7rem; } .drawer-top img { width: 132px; } .drawer-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--gap-m) var(--pad) calc(var(--gap-xl) + var(--bar-h)); } .drawer .icon-btn { border-color: var(--line-dark); color: #fff; } .acc-group { border-bottom: 1px solid var(--line-dark); } .acc-btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.05rem 0; background: none; border: 0; color: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; text-align: left; cursor: pointer; } .acc-btn svg { flex: none; transition: transform .4s var(--ease); opacity: .55; } .acc-btn[aria-expanded="true"] svg { transform: rotate(45deg); opacity: 1; color: var(--ocean); } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .acc-panel > div { overflow: hidden; } .acc-btn[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; } .acc-panel ul { list-style: none; margin: 0; padding: 0 0 1rem; } .acc-panel a { display: block; padding: .55rem 0; color: rgba(255,255,255,.76); text-decoration: none; font-size: 1rem; transition: color .22s, padding-left .28s var(--ease); } .acc-panel a:hover { color: #fff; padding-left: .4rem; } .drawer-cta { display: grid; gap: .7rem; margin-top: var(--gap-m); } /* -------------------------------------------------------------------------- 8. Hero -------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; color: #fff; background: var(--navy-900); padding-block: clamp(1.9rem, 1.4rem + 2.4vw, 3rem) clamp(2.5rem, 1.5rem + 5vw, 4.5rem); overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: -3; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(104deg, rgba(4,25,58,.94) 6%, rgba(4,25,58,.72) 46%, rgba(4,25,58,.28) 100%), linear-gradient(0deg, rgba(4,25,58,.86), rgba(4,25,58,0) 52%); } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(46px, 6vw, 96px); z-index: -1; background: var(--navy-800); /* flows into the marquee that follows */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62c140-38 268 22 408 18s246-52 386-46 240 58 372 44 274-52 274-52V100H0Z' fill='%23000'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62c140-38 268 22 408 18s246-52 386-46 240 58 372 44 274-52 274-52V100H0Z' fill='%23000'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; } /* The two doors are the hero, not the headline. Keeping the H1 in a narrow column drops it to a sane size while the fit engine still lands it flush at 100% of that column. */ /* The photo occupies the right of the hero on wide screens, so the headline column stops short of it. On a phone there is no photo to make room for. */ .hero-head { max-width: min(940px, 74%); } .h1-stack { display: none; } @media (max-width: 899px) { .hero-head { max-width: 100%; } .h1-wide { display: none; } .h1-stack { display: block; } } .hero h1 { margin-bottom: var(--gap-s); } /* Divider that hands the visitor over to the two doors. */ .pick-label { display: flex; align-items: center; gap: 1.1rem; width: 100%; margin: var(--gap-m) 0 var(--gap-s); font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.72); } .pick-label::before, .pick-label::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.28); } .hero h1 .fit { color: #fff; } .hero-sub { max-width: 52ch; font-size: clamp(.98rem, .93rem + .3vw, 1.12rem); line-height: 1.55; color: rgba(255,255,255,.8); margin-bottom: var(--gap-m); } .hero-sub strong { color: #fff; font-weight: 600; } .hero-note { margin-top: var(--gap-s); font-size: .82rem; color: rgba(255,255,255,.55); max-width: 46ch; } /* Hero side card */ .hero-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-l); padding: 1.5rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .hero-card h2 { font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); margin-bottom: 1rem; } .hero-card ol { list-style: none; margin: 0 0 1.25rem; padding: 0; counter-reset: s; } .hero-card li { position: relative; padding-left: 2.3rem; margin-bottom: .95rem; font-size: .93rem; line-height: 1.5; color: rgba(255,255,255,.82); counter-increment: s; } .hero-card li::before { content: counter(s); position: absolute; left: 0; top: -.05em; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ocean); color: #fff; font-family: var(--font-ui); font-size: .76rem; font-weight: 700; } .hero-card li b { color: #fff; font-weight: 600; } /* ---- Dual path hero: rent on the left, club on the right ---------------- Both panels are exactly half the shell on desktop, and both headings are eleven characters, so the fit engine lands them at the same size. That symmetry is the whole point of the section, so do not retitle one side without retitling the other to match its length. */ .dual { display: grid; gap: var(--gap-s); margin-top: 0; } @media (min-width: 920px) { .dual { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-m); } } .path { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(1.35rem, 1rem + 1.7vw, 2.25rem); border-radius: var(--radius-l); overflow: hidden; isolation: isolate; box-shadow: var(--shadow-l); } .path-tag { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; padding: .32rem .8rem; margin: 0 0 1rem; border-radius: 999px; font-size: .67rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } /* Both panel headings are eleven characters, so a shared column width lands them at an identical size. Widen this and both grow together. */ .path h2 { margin-bottom: .55rem; max-width: min(360px, 100%); } .path-say { font-size: .96rem; line-height: 1.55; margin-bottom: 1.3rem; } .path-rent { background: var(--paper); color: var(--txt); } .path-rent .path-tag { background: var(--foam-100); color: var(--navy-700); } .path-rent .path-say { color: var(--txt-mid); } .path-rent .fit { color: var(--navy-800); } .path-club { color: #fff; background: linear-gradient(152deg, var(--navy-700), var(--navy-900) 62%); border: 1px solid rgba(255, 255, 255, .15); } .path-club::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(620px 320px at 100% 0%, rgba(61,139,208,.55), transparent 62%), radial-gradient(520px 280px at 0% 100%, rgba(31,111,183,.26), transparent 64%); } .path-club .path-tag { background: rgba(255,255,255,.15); color: #fff; } .path-club .path-say { color: rgba(255,255,255,.8); } .path-club .fit { color: #fff; } .mini-form { display: grid; gap: .85rem; } .mini-row { display: grid; gap: .85rem; } @media (min-width: 520px) { .mini-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mini-form .field label { font-size: .77rem; } .mini-form input, .mini-form select { padding: .72rem .9rem; font-size: .95rem; } .path-perks { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .75rem; } .path-perks li { position: relative; margin: 0; padding-left: 2rem; font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.86); } .path-perks li::before { content: "\2713"; position: absolute; left: 0; top: .05em; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.15); color: var(--sky); font-family: var(--font-ui); font-size: .7rem; font-weight: 700; } .path-perks b { color: #fff; font-weight: 600; } .path-foot { margin-top: auto; } .path-note { margin-top: .75rem; margin-bottom: 0; font-size: .77rem; line-height: 1.5; } .path-rent .path-note { color: var(--txt-mid); } .path-club .path-note { color: rgba(255,255,255,.62); } .path-alt { display: inline-flex; margin-top: .85rem; font-size: .88rem; color: var(--sky); } /* Trust strip */ .trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: var(--gap-l); background: rgba(255,255,255,.16); border-radius: var(--radius); overflow: hidden; } @media (min-width: 760px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .trust div { background: rgba(4,25,58,.55); padding: 1.05rem 1.15rem; backdrop-filter: blur(8px); } .trust b { display: block; font-family: var(--font-display); font-size: clamp(1.02rem, .9rem + .5vw, 1.3rem); font-weight: 600; color: #fff; line-height: 1.15; margin-bottom: .2rem; } .trust span { display: block; font-size: .78rem; line-height: 1.4; color: rgba(255,255,255,.62); } /* -------------------------------------------------------------------------- 9. Marquee -------------------------------------------------------------------------- */ .marquee { overflow: hidden; background: var(--navy-800); color: #fff; padding-block: .85rem; border-block: 1px solid rgba(255,255,255,.1); } .marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-set { display: flex; align-items: center; flex: none; } .marquee-set span { display: inline-flex; align-items: center; gap: 1.25rem; padding-inline: 1.25rem; font-family: var(--font-display); font-size: clamp(.95rem, .85rem + .4vw, 1.2rem); font-weight: 500; letter-spacing: .01em; white-space: nowrap; color: rgba(255,255,255,.86); } .marquee-set span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ocean); flex: none; } @keyframes slide { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 10. Editorial split -------------------------------------------------------------------------- */ .split { display: grid; gap: var(--gap-m); align-items: start; } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-l); } .split-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .split-off { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } } .split-sticky { position: sticky; top: calc(var(--hdr-h) + var(--gap-m)); } .fig { position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow); } .fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.3rem 1.1rem; font-size: .78rem; line-height: 1.45; color: rgba(255,255,255,.85); background: linear-gradient(0deg, rgba(4,25,58,.9), rgba(4,25,58,0)); } .fig-tall img { aspect-ratio: 3 / 4; } .fig-wide img { aspect-ratio: 16 / 9; } .stat-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap-s); margin-top: var(--gap-m); } .stat-pair div { padding: 1.1rem 1.2rem; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); } .stat-pair b { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--navy-800); line-height: 1.1; margin-bottom: .25rem; } .stat-pair span { font-size: .82rem; line-height: 1.45; color: var(--txt-mid); } /* Do / don't list */ .dd-list { list-style: none; margin: var(--gap-s) 0 0; padding: 0; } .dd-list li { position: relative; padding-left: 2.1rem; margin-bottom: .8rem; font-size: .97rem; line-height: 1.55; } .dd-list li::before { position: absolute; left: 0; top: .12em; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: .72rem; font-weight: 700; font-family: var(--font-ui); } .dd-yes li::before { content: "\2713"; background: rgba(31,138,109,.14); color: var(--good); } .dd-no li::before { content: "\2715"; background: var(--alert-soft); color: var(--alert); } /* -------------------------------------------------------------------------- 11. Tables -------------------------------------------------------------------------- */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-s); } table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .92rem; } caption { padding: 1rem 1.15rem; text-align: left; font-size: .8rem; color: var(--txt-mid); border-bottom: 1px solid var(--line-soft); } th, td { padding: .95rem 1.15rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); } thead th { position: sticky; top: 0; background: var(--navy-800); color: #fff; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; } tbody th { font-family: var(--font-ui); font-size: .88rem; font-weight: 650; color: var(--navy-800); white-space: nowrap; } tbody tr:nth-child(even) { background: var(--foam-50); } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } td .pill { font-size: .74rem; } .pill { display: inline-block; padding: .16rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 650; letter-spacing: .02em; white-space: nowrap; } .pill-good { background: rgba(31,138,109,.13); color: #15705a; } .pill-mid { background: rgba(108,198,243,.2); color: #0d3a72; } .pill-bad { background: rgba(192,57,43,.13); color: #a5312a; } .scroll-hint { display: block; margin-top: .6rem; font-size: .78rem; color: var(--txt-mid); } @media (min-width: 760px) { .scroll-hint { display: none; } } /* -------------------------------------------------------------------------- 12. Cards -------------------------------------------------------------------------- */ .grid-cards { display: grid; gap: var(--gap-s); } @media (min-width: 620px) { .grid-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1080px) { .grid-cards-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } } .card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-l); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; } .card-media { position: relative; overflow: hidden; } .card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.1s var(--ease); } .card:hover .card-media img { transform: scale(1.055); } .card-tag { position: absolute; top: .8rem; left: .8rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(4,25,58,.74); backdrop-filter: blur(6px); color: #fff; font-size: .68rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } .card-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; } .card-body h3 { font-size: clamp(1.18rem, 1.05rem + .5vw, 1.45rem); color: var(--navy-800); } .card-body p { margin-top: .5rem; font-size: .93rem; line-height: 1.6; color: var(--txt-mid); } .card-meta { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .35rem; } .card-meta span { padding: .22rem .6rem; border-radius: 999px; background: var(--foam-100); color: var(--navy-700); font-size: .74rem; font-weight: 550; } /* Numbered step cards */ .steps { display: grid; gap: var(--gap-s); counter-reset: step; } @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0,1fr)); } } .step { position: relative; padding: var(--gap-m) 1.4rem 1.5rem; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-l); counter-increment: step; overflow: hidden; } .step::before { content: "0" counter(step); position: absolute; top: -.24em; right: .35rem; font-family: var(--font-display); font-size: clamp(4.4rem, 3rem + 5vw, 7rem); font-weight: 700; line-height: 1; color: var(--foam-100); z-index: 0; pointer-events: none; } .step > * { position: relative; z-index: 1; } .step h3 { font-size: 1.32rem; color: var(--navy-800); margin-bottom: .55rem; } .step p { font-size: .94rem; line-height: 1.6; color: var(--txt-mid); } /* Decision matrix */ .matrix { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; } .matrix-row { display: grid; gap: 1px; background: var(--line-soft); } @media (min-width: 820px) { .matrix-row { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } } .matrix-if, .matrix-then { background: var(--paper); padding: 1.15rem 1.3rem; } .matrix-if { background: var(--foam-50); } .matrix-row:hover .matrix-if { background: var(--foam-100); } .matrix-k { display: block; font-family: var(--font-ui); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ocean); margin-bottom: .3rem; } .matrix-if p, .matrix-then p { margin: 0; font-size: .95rem; line-height: 1.55; } .matrix-if p { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--navy-800); line-height: 1.3; } /* Field notes call-out */ .notes { position: relative; padding: var(--gap-m); background: var(--navy-800); color: #fff; border-radius: var(--radius-l); overflow: hidden; } .notes::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 300px at 110% -10%, rgba(61,139,208,.35), transparent 60%), radial-gradient(700px 340px at -10% 120%, rgba(31,111,183,.22), transparent 60%); pointer-events: none; } .notes > * { position: relative; } .notes blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.22rem, 1.05rem + .8vw, 1.75rem); line-height: 1.35; font-weight: 500; letter-spacing: -.012em; } .notes-list { list-style: none; margin: var(--gap-m) 0 0; padding: 0; display: grid; gap: .9rem; } @media (min-width: 860px) { .notes-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.15rem var(--gap-m); } } .notes-list li { position: relative; padding-left: 1.7rem; font-size: .93rem; line-height: 1.6; color: rgba(255,255,255,.8); margin: 0; } .notes-list li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 2px; background: var(--sky); transform: rotate(45deg); } .notes-list b { color: #fff; font-weight: 600; } .byline { display: flex; align-items: center; gap: .85rem; margin-top: var(--gap-m); padding-top: var(--gap-s); border-top: 1px solid var(--line-dark); } .byline-av { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--ocean), var(--navy-700)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .byline div { min-width: 0; } .byline b { display: block; font-size: .92rem; font-weight: 600; } .byline span { display: block; font-size: .8rem; color: rgba(255,255,255,.62); line-height: 1.4; } /* -------------------------------------------------------------------------- 13. Break-even calculator -------------------------------------------------------------------------- */ .calc { display: grid; gap: var(--gap-m); padding: var(--gap-m); background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-l); box-shadow: var(--shadow-s); } @media (min-width: 940px) { .calc { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--gap-l); } } .calc-fields { display: grid; gap: var(--gap-m); align-content: start; } .calc-grid { display: grid; gap: 1rem; } @media (min-width: 560px) { .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .calc-grid .field-full { grid-column: 1 / -1; } /* The ten assumption fields stay out of the way until somebody wants them. */ .calc-more { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .calc-more summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 0; cursor: pointer; list-style: none; font-family: var(--font-ui); font-size: .88rem; font-weight: 600; color: var(--navy); transition: color .25s; } .calc-more summary::-webkit-details-marker { display: none; } .calc-more summary:hover { color: var(--ocean); } .calc-more summary svg { flex: none; opacity: .55; transition: transform .35s var(--ease); } .calc-more[open] summary svg { transform: rotate(180deg); opacity: 1; } .calc-more-body { padding-bottom: 1.2rem; } .field { display: grid; gap: .4rem; min-width: 0; } .field label { font-size: .84rem; font-weight: 600; color: var(--navy); } .field small { font-size: .77rem; color: var(--txt-mid); line-height: 1.45; } .field-in { position: relative; display: flex; align-items: center; } .field-in .pre { position: absolute; left: .95rem; font-size: .95rem; font-weight: 600; color: var(--txt-mid); pointer-events: none; } .field-in input { padding-left: 2.05rem !important; } .field input[type="number"], .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field select, .field textarea { width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--txt); font-size: 1rem; transition: border-color .25s, box-shadow .25s; } .field textarea { min-height: 116px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ocean); box-shadow: 0 0 0 4px rgba(31,111,183,.14); } .field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--alert); box-shadow: 0 0 0 4px rgba(192,57,43,.12); } .err { display: none; font-size: .8rem; font-weight: 550; color: var(--alert); } .err.is-on { display: block; } .calc-out { align-self: start; position: sticky; top: calc(var(--hdr-h) + 1rem); padding: var(--gap-m) 1.4rem; background: var(--navy-900); color: #fff; border-radius: var(--radius); overflow: hidden; } .calc-out h3 { font-family: var(--font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); margin-bottom: 1rem; } .calc-big { font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 4vw, 4.4rem); font-weight: 700; line-height: .95; letter-spacing: -.03em; color: var(--sky); margin-bottom: .35rem; overflow-wrap: break-word; } .calc-cap { font-size: .86rem; color: rgba(255,255,255,.72); line-height: 1.5; margin-bottom: 1.3rem; } /* Two headline numbers, which is the only comparison most people need. */ .calc-versus { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; margin-bottom: 1rem; } .cv { padding: .9rem 1rem; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid var(--line-dark); } .cv span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: .25rem; } .cv b { display: block; font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; } .cv-own b { color: var(--white); } .cv-club { background: rgba(108,198,243,.14); border-color: rgba(108,198,243,.4); } .cv-club b { color: var(--sky); } /* Part to whole breakdown. One hue in ordered steps, because this is a share of a single total rather than a set of unrelated categories. Segments are separated by a surface gap and every one is named in the key, so identity never rests on telling two blues apart. */ .bar { display: flex; gap: 2px; height: 14px; margin-bottom: .9rem; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); } .bar-seg { display: block; min-width: 3px; flex-basis: 0; } .bar-key { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .45rem; } .bar-key li { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .84rem; color: rgba(255,255,255,.78); } .bar-key i { flex: none; width: 11px; height: 11px; border-radius: 3px; } .bar-key span { flex: 1 1 auto; min-width: 0; } .bar-key b { flex: none; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; } .calc-rows { display: grid; gap: .55rem; padding-top: 1.1rem; border-top: 1px solid var(--line-dark); } .calc-rows div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; } .calc-rows span { color: rgba(255,255,255,.62); } .calc-rows b { font-weight: 600; text-align: right; } .calc-verdict { margin-top: 1.15rem; padding: .85rem 1rem; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid var(--line-dark); font-size: .89rem; line-height: 1.5; color: rgba(255,255,255,.86); } .calc-verdict b { color: #fff; } /* -------------------------------------------------------------------------- 14. FAQ -------------------------------------------------------------------------- */ .faq { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; width: 100%; padding: 1.3rem 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.08rem, 1rem + .55vw, 1.42rem); font-weight: 600; line-height: 1.28; color: var(--navy-800); transition: color .25s; } .faq-q:hover { color: var(--ocean); } .faq-ic { position: relative; flex: none; width: 26px; height: 26px; margin-top: .18em; } .faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px; transition: transform .42s var(--ease); } .faq-ic::before { width: 15px; height: 2px; transform: translate(-50%,-50%); } .faq-ic::after { width: 2px; height: 15px; transform: translate(-50%,-50%); } .faq-q[aria-expanded="true"] .faq-ic::after { transform: translate(-50%,-50%) rotate(90deg); } .faq-q[aria-expanded="true"] { color: var(--ocean); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .48s var(--ease); } .faq-a > div { overflow: hidden; } .faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; } .faq-a p { padding-right: clamp(0px, 4vw, 3.5rem); font-size: .97rem; line-height: 1.68; color: var(--txt-mid); } .faq-a > div > *:first-child { padding-top: .1rem; } .faq-a > div > *:last-child { padding-bottom: 1.4rem; } /* -------------------------------------------------------------------------- 15. Lead form -------------------------------------------------------------------------- */ .quote { position: relative; background: var(--navy-900); color: #fff; overflow: hidden; } .quote::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1000px 420px at 85% 0%, rgba(31,111,183,.4), transparent 62%), radial-gradient(800px 400px at 0% 100%, rgba(31,111,183,.18), transparent 60%); pointer-events: none; } .quote .shell { position: relative; } .quote-grid { display: grid; gap: var(--gap-l); } @media (min-width: 980px) { .quote-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } } .quote-form { background: var(--paper); color: var(--txt); border-radius: var(--radius-l); padding: var(--gap-m); box-shadow: var(--shadow-l); } .form-grid { display: grid; gap: 1.05rem; } @media (min-width: 620px) { .form-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } } .field-full { grid-column: 1 / -1; } .consent { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; background: var(--foam-50); border: 1.5px solid var(--line); border-radius: 14px; transition: border-color .25s, background-color .25s; } .consent.is-bad { border-color: var(--alert); background: rgba(192,57,43,.05); } .consent input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--ocean); cursor: pointer; } .consent label { font-size: .86rem; line-height: 1.55; color: var(--txt); cursor: pointer; } .consent a { color: var(--ocean); font-weight: 600; } .consent .req { color: var(--alert); font-weight: 700; } .form-foot { font-size: .78rem; line-height: 1.55; color: var(--txt-mid); } .form-status { display: none; padding: .95rem 1.1rem; border-radius: 12px; font-size: .9rem; line-height: 1.55; } .form-status.is-on { display: block; } .form-status.ok { background: rgba(31,138,109,.11); color: #15705a; border: 1px solid rgba(31,138,109,.3); } .form-status.bad { background: rgba(192,57,43,.09); color: #a5312a; border: 1px solid rgba(192,57,43,.28); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------------------------- 16. Modal -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2.5rem); background: rgba(4,25,58,.72); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; } .modal.is-open { opacity: 1; visibility: visible; } .modal-box { width: min(760px, 100%); max-height: min(84vh, 900px); display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-l); box-shadow: var(--shadow-l); transform: translateY(16px) scale(.985); transition: transform .4s var(--ease); overflow: hidden; } .modal.is-open .modal-box { transform: none; } .modal-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem var(--gap-m); border-bottom: 1px solid var(--line-soft); } .modal-top h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.6rem); color: var(--navy-800); } .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--gap-m); font-size: .93rem; line-height: 1.7; } .modal-body h3 { font-family: var(--font-ui); font-size: .95rem; font-weight: 700; color: var(--navy-800); margin: 1.5rem 0 .45rem; } .modal-body h3:first-child { margin-top: 0; } .modal-body ul { padding-left: 1.15rem; } .modal-foot { padding: 1rem var(--gap-m); border-top: 1px solid var(--line-soft); background: var(--foam-50); display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; } /* -------------------------------------------------------------------------- 17. Footer -------------------------------------------------------------------------- */ .ftr { background: var(--ink); color: rgba(255,255,255,.68); font-size: .9rem; } .ftr-top { padding-block: var(--gap-xl) var(--gap-l); } .ftr-grid { display: grid; gap: var(--gap-m); } @media (min-width: 700px) { .ftr-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1080px) { .ftr-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--gap-l); } } .ftr-brand .logo-plate { margin-bottom: 1.2rem; } .ftr-brand img { width: 196px; } .ftr-brand p { font-size: .89rem; line-height: 1.65; max-width: 40ch; } .ftr h2, .ftr h3 { font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; } .ftr ul { list-style: none; margin: 0; padding: 0; } .ftr li { margin-bottom: .55rem; } .ftr a { text-decoration: none; transition: color .22s, padding-left .28s var(--ease); } .ftr a:hover { color: #fff; padding-left: .25rem; } .nap { font-style: normal; line-height: 1.7; } .nap a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: #fff; } .nap .todo { color: var(--sky); font-weight: 600; } .ftr-legal { border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--gap-m) calc(var(--gap-m) + var(--bar-h)); } .ftr-legal p { font-size: .8rem; line-height: 1.7; color: rgba(255,255,255,.5); max-width: 96ch; } .ftr-legal .row { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1rem; font-size: .8rem; } .ftr-legal .row a { color: rgba(255,255,255,.66); } /* -------------------------------------------------------------------------- 18. Mobile floating action bar -------------------------------------------------------------------------- */ .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .35rem; padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom, 0px)); background: rgba(8,43,91, .93); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 -12px 34px -22px rgba(0,0,0,.9); } @media (min-width: 1100px) { .mbar { display: none; } } .mbar a, .mbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; min-height: 52px; padding: .35rem .2rem; border: 0; border-radius: 14px; background: transparent; color: rgba(255,255,255,.78); font-family: var(--font-ui); font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--ease); -webkit-tap-highlight-color: transparent; } .mbar a:active, .mbar button:active { transform: scale(.95); } .mbar svg { width: 21px; height: 21px; } .mbar .is-primary { background: var(--ocean); color: #fff; } .mbar .is-primary:hover { background: var(--ocean-dk); } /* -------------------------------------------------------------------------- 19. Accessibility panel -------------------------------------------------------------------------- */ .a11y-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 320; width: min(392px, 100vw); display: flex; flex-direction: column; background: var(--paper); box-shadow: -30px 0 70px -40px rgba(4,25,58,.8); transform: translateX(100%); visibility: hidden; transition: transform .5s var(--ease), visibility .5s; } .a11y-panel.is-open { transform: none; visibility: visible; } .a11y-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; background: var(--navy-900); color: #fff; } .a11y-top h2 { font-size: 1.15rem; } .a11y-top .icon-btn { border-color: rgba(255,255,255,.3); color: #fff; } .a11y-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.35rem 1.35rem calc(1.35rem + env(safe-area-inset-bottom, 0px)); } .a11y-body > p { font-size: .85rem; color: var(--txt-mid); margin-bottom: 1.25rem; } .a11y-group { margin-bottom: 1.5rem; } .a11y-group h3 { font-family: var(--font-ui); font-size: .67rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ocean); margin-bottom: .7rem; } .a11y-opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; } .a11y-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 86px; padding: .75rem .5rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--navy-800); font-size: .78rem; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; transition: border-color .25s, background-color .25s, transform .25s var(--ease); } .a11y-opt svg { opacity: .75; } .a11y-opt:hover { border-color: var(--ocean); transform: translateY(-2px); } .a11y-opt[aria-pressed="true"] { border-color: var(--navy-800); background: var(--navy-800); color: #fff; } .a11y-opt[aria-pressed="true"] svg { opacity: 1; } .a11y-size { display: flex; align-items: center; gap: .5rem; } .a11y-size button { flex: 1; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); font-weight: 700; cursor: pointer; transition: border-color .25s, background-color .25s; } .a11y-size button:hover { border-color: var(--ocean); } .a11y-size output { min-width: 72px; text-align: center; font-size: .85rem; font-weight: 700; color: var(--navy-800); } .a11y-foot { padding: 1rem 1.35rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-soft); background: var(--foam-50); } .scrim { position: fixed; inset: 0; z-index: 310; background: rgba(4,25,58,.55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } .scrim.is-on { opacity: 1; visibility: visible; } /* Reading guide bar */ .read-guide { position: fixed; left: 0; right: 0; height: 46px; z-index: 305; pointer-events: none; background: rgba(108,198,243,.28); border-block: 2px solid rgba(31,111,183,.7); display: none; } html[data-a11y-guide="1"] .read-guide { display: block; } /* -------------------------------------------------------------------------- 20. Accessibility modes -------------------------------------------------------------------------- */ html[data-a11y-font="1"] body, html[data-a11y-font="1"] h1, html[data-a11y-font="1"] h2, html[data-a11y-font="1"] h3, html[data-a11y-font="1"] h4, html[data-a11y-font="1"] .btn, html[data-a11y-font="1"] input, html[data-a11y-font="1"] select, html[data-a11y-font="1"] textarea, html[data-a11y-font="1"] button { font-family: "Atkinson Hyperlegible", var(--font-ui) !important; letter-spacing: .012em; } html[data-a11y-font="1"] .fit { letter-spacing: 0; } html[data-a11y-space="1"] body { line-height: 2 !important; letter-spacing: .045em; word-spacing: .16em; } html[data-a11y-space="1"] p { margin-bottom: 1.7em; } html[data-a11y-space="1"] .fit { letter-spacing: 0; } html[data-a11y-links="1"] a { text-decoration: underline !important; text-underline-offset: 3px; } html[data-a11y-links="1"] a:not(.btn):not(.brand):not(.card-link) { outline: 1.5px dashed rgba(31,111,183,.75); outline-offset: 2px; } html[data-a11y-contrast="1"] { filter: contrast(1.32) saturate(1.18); } html[data-a11y-invert="1"] { filter: invert(1) hue-rotate(180deg); } html[data-a11y-invert="1"] img, html[data-a11y-invert="1"] video, html[data-a11y-invert="1"] .hero-bg { filter: invert(1) hue-rotate(180deg); } html[data-a11y-contrast="1"][data-a11y-invert="1"] { filter: invert(1) hue-rotate(180deg) contrast(1.32); } html[data-a11y-cursor="1"], html[data-a11y-cursor="1"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M6 3l27 16-12 2-5 12z' fill='%231f6fb7' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto !important; } html[data-a11y-motion="1"] *, html[data-a11y-motion="1"] *::before, html[data-a11y-motion="1"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* -------------------------------------------------------------------------- 21. Scroll reveal -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--ease), transform .85s var(--ease); transition-delay: var(--d, 0ms); } .reveal.is-in { opacity: 1; transform: none; } .no-js .reveal { opacity: 1; transform: none; } .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; } /* -------------------------------------------------------------------------- 22. Small screen adjustments -------------------------------------------------------------------------- */ @media (max-width: 619px) { .stat-pair { grid-template-columns: 1fr; } .a11y-opts { grid-template-columns: repeat(2, minmax(0,1fr)); } .modal-foot { justify-content: stretch; } .modal-foot .btn { flex: 1; } } @media (max-width: 380px) { .mbar a, .mbar button { font-size: .6rem; } .mbar svg { width: 19px; height: 19px; } } /* -------------------------------------------------------------------------- 23. Wave dividers A single mask shape reused wherever one band meets another. Subtle by design: it reads as a soft edge, not a decoration. -------------------------------------------------------------------------- */ .waved { position: relative; } .waved::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(34px, 4.2vw, 68px); pointer-events: none; background: var(--wave-to, var(--white)); -webkit-mask: var(--wave-shape) bottom / 100% 100% no-repeat; mask: var(--wave-shape) bottom / 100% 100% no-repeat; } :root { --wave-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 54c150-32 286 18 436 15s244-44 384-38 238 50 368 38 252-42 252-42V90H0Z' fill='%23000'/%3E%3C/svg%3E"); } .wave-to-white { --wave-to: var(--white); } .wave-to-foam { --wave-to: var(--foam-50); } .wave-to-navy { --wave-to: var(--navy-900); } /* -------------------------------------------------------------------------- 24. Breadcrumbs Used on the city landing pages. Matched by BreadcrumbList schema on the same page, so if you change the labels here change them there too. -------------------------------------------------------------------------- */ .crumbs { margin-bottom: var(--gap-m); } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; list-style: none; margin: 0; padding: 0; font-size: .8rem; } .crumbs li { margin: 0; color: rgba(255,255,255,.55); } .crumbs li + li::before { content: "/"; margin-right: .55rem; opacity: .4; } .crumbs a { color: rgba(255,255,255,.78); text-decoration: none; } .crumbs a:hover { color: #fff; text-decoration: underline; } .crumbs [aria-current="page"] { color: #fff; font-weight: 600; } /* -------------------------------------------------------------------------- 25. Touch and mobile app feel Two things break the "this is an app" illusion faster than anything else: iOS zooming the whole page when you focus an input under 16px, and tap targets you have to aim at. Both are fixed here rather than per component. -------------------------------------------------------------------------- */ @media (pointer: coarse) { /* iOS zooms the viewport on focus for anything under 16px. Non negotiable. */ input, select, textarea { font-size: 16px !important; min-height: 52px; } textarea { min-height: 120px; } /* Everything you can hit gets a real target. */ .btn, .icon-btn, .nav-btn, .faq-q, .acc-btn, .lang-menu button, .a11y-size button, .calc-more summary, .mbar a, .mbar button { min-height: 48px; } .lang-menu button { padding-block: .8rem; } /* Kill the 300ms click delay and the grey flash. */ a, button, input, select, textarea, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Hover states are noise on touch; press states are what read as native. */ .card:hover { transform: none; } .card:active { transform: scale(.994); } .btn:hover { transform: none; } .btn:active { transform: scale(.985); } /* Scrolling inside a panel must not drag the page behind it. */ .drawer-body, .a11y-body, .modal-body, .lang-menu, .table-wrap { overscroll-behavior: contain; } } @media (max-width: 640px) { /* The two doors stack, and each one reads as its own screen rather than a card floating in a margin. */ .dual { gap: .85rem; } .path { padding: 1.35rem 1.15rem 1.5rem; border-radius: 20px; } .path h2 { max-width: min(300px, 100%); } .pick-label { margin-block: var(--gap-s) .85rem; } /* Give the floating bar room and keep the last section clear of it. */ .band:last-of-type { padding-bottom: calc(var(--gap-l) + var(--bar-h)); } .calc { padding: 1.15rem; } .calc-out { position: static; } .calc-versus { grid-template-columns: 1fr; } .quote-form { padding: 1.25rem 1.1rem; } .notes { padding: 1.35rem 1.15rem; } } /* -------------------------------------------------------------------------- 26. Interior page hero Every landing page gets the same shape as the homepage: a photograph, the heading, and a booking form sitting in the first screen rather than at the bottom of the page. The form uses the same ids as the homepage hero form, so the existing handoff in site.js fills the full request form below it. -------------------------------------------------------------------------- */ .hero-page { padding-block: clamp(1.4rem, 1rem + 1.8vw, 2.4rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); } .hero-page .crumbs { margin-bottom: var(--gap-m); } .hero-page h1 { margin-bottom: var(--gap-s); } .hero-grid-page { display: grid; gap: var(--gap-m); align-items: start; } @media (min-width: 980px) { .hero-grid-page { grid-template-columns: minmax(0, 1fr) minmax(330px, 400px); gap: var(--gap-l); } } .hero-grid-page > * { min-width: 0; } .hero-ticks { list-style: none; margin: var(--gap-s) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem 1.3rem; } .hero-ticks li { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .87rem; color: rgba(255, 255, 255, .82); } .hero-ticks li::before { content: "\2713"; color: var(--sky); font-weight: 700; } .hero-form { background: var(--paper); color: var(--txt); border-radius: var(--radius-l); padding: clamp(1.2rem, 1rem + .8vw, 1.6rem); box-shadow: var(--shadow-l); } .hero-form .path-tag { display: inline-flex; align-self: flex-start; padding: .32rem .8rem; margin: 0 0 .8rem; border-radius: 999px; background: var(--foam-100); color: var(--navy-700); font-size: .67rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .hero-form h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); color: var(--navy); } .hero-form .rule-head { margin-bottom: .9rem; } .hero-form p.small { font-size: .84rem; line-height: 1.5; color: var(--txt-mid); margin: 0 0 1.1rem; } /* Sub label under each headline figure, showing what the number is made of. */ .cv em { display: block; margin-top: .35rem; font-style: normal; font-size: .72rem; line-height: 1.35; color: rgba(255, 255, 255, .6); } .cv-club em { color: rgba(108, 198, 243, .85); } /* -------------------------------------------------------------------------- 27. Marina pages -------------------------------------------------------------------------- */ /* Sourced facts, presented as a definition list so the label/value pairing is in the markup and not just visual. */ .fact-list { margin: .5rem 0 0; display: grid; gap: .7rem; } .fact-list > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .5rem 1rem; align-items: baseline; } @media (max-width: 480px) { .fact-list > div { grid-template-columns: 1fr; gap: .1rem; } } .fact-list dt { margin: 0; font-family: var(--font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); } .fact-list dd { margin: 0; font-size: .95rem; line-height: 1.5; color: #fff; } /* Shown on any page whose facts are not yet confirmed. Deliberately loud. */ .notice-bar { display: flex; align-items: flex-start; gap: .9rem; padding: 1.05rem 1.2rem; border: 1.5px solid rgba(192, 57, 43, .35); border-left-width: 5px; border-left-color: var(--alert); border-radius: 14px; background: var(--alert-soft); } .notice-bar svg { flex: none; margin-top: .1rem; color: var(--alert); } .notice-bar p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--txt); } .notice-bar strong { color: var(--alert); } /* -------------------------------------------------------------------------- 28. Membership qualification wizard One question per screen, options running horizontally. The card spans the hero rather than sitting in a column, because a row of six choices reads in one glance and a stacked list of six does not. -------------------------------------------------------------------------- */ .hero-wizard { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); } .wz-intro { max-width: 62ch; margin-bottom: var(--gap-m); } .wz-intro .hero-sub { margin-bottom: 0; } .wz { background: var(--paper); border-radius: var(--radius-l); box-shadow: var(--shadow-l); overflow: hidden; } .wz-wide { width: 100%; } /* ---- progress ---- */ .wz-top { padding: 1.1rem clamp(1.15rem, 1rem + 1.4vw, 2.1rem) 0; } .wz-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; } .wz-count { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ocean); } .wz-pct { margin: 0; font-size: .72rem; font-weight: 700; color: var(--txt-mid); font-variant-numeric: tabular-nums; } .wz-bar { position: relative; height: 6px; border-radius: 999px; background: var(--foam-100); overflow: hidden; } .wz-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ocean), var(--sky)); transition: width .5s var(--ease); } /* ---- the question ---- */ .wz-body { padding: clamp(1.3rem, 1rem + 1.6vw, 2.1rem); } .wz-step { display: none; } .wz-step.is-on { display: block; animation: wzIn .38s var(--ease); } @keyframes wzIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .wz-step > h3 { font-size: clamp(1.35rem, 1.15rem + 1.1vw, 2rem); color: var(--navy); margin-bottom: .35rem; outline: none; } .wz-step > h3:focus, .wz-step > h3:focus-visible { outline: none; } .wz-step > .wz-say { font-size: .93rem; color: var(--txt-mid); margin-bottom: 1.35rem; max-width: 62ch; } /* Options run across the card, wrapping only when they genuinely have to. */ .wz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: .65rem; } .wz-opt { position: relative; display: block; } .wz-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .wz-opt span { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1rem 1.05rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--ease), box-shadow .2s; } .wz-opt span b { font-family: var(--font-ui); font-size: .95rem; font-weight: 600; color: var(--navy); line-height: 1.3; } .wz-opt span small { font-size: .79rem; line-height: 1.4; color: var(--txt-mid); } .wz-opt:hover span { border-color: var(--ocean); transform: translateY(-2px); } .wz-opt input:checked + span { border-color: var(--ocean); background: rgba(31, 111, 183, .08); box-shadow: inset 0 0 0 1px var(--ocean); } .wz-opt input:focus-visible + span { outline: 3px solid var(--ocean); outline-offset: 2px; } .wz-step.is-bad .wz-opt span { border-color: rgba(192, 57, 43, .4); } .wz-contact { margin-top: .5rem; } /* ---- footer ---- */ .wz-foot { display: flex; align-items: center; gap: .9rem; padding: 1rem clamp(1.15rem, 1rem + 1.4vw, 2.1rem) calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-soft); background: var(--foam-50); } .wz-hint { flex: 1 1 auto; margin: 0; font-size: .8rem; color: var(--txt-mid); text-align: center; } .wz-back { visibility: hidden; } .wz-back.is-on { visibility: visible; } @media (max-width: 560px) { .wz-opts { grid-template-columns: 1fr; } .wz-foot { flex-wrap: wrap; } .wz-hint { order: 3; flex-basis: 100%; text-align: left; } .wz-foot .btn:not(.wz-back) { flex: 1 1 auto; } } /* -------------------------------------------------------------------------- 29. Club intake hero The wizard column is tall. Without something substantial beside it the left half of this hero is dead navy, and the column is sticky so the reasoning stays with you while you work through four steps. -------------------------------------------------------------------------- */ .hero-steps { list-style: none; counter-reset: hs; margin: var(--gap-m) 0 0; padding: 0; display: grid; gap: 1.1rem; max-width: 54ch; } .hero-steps li { counter-increment: hs; position: relative; margin: 0; padding-left: 2.6rem; font-size: .93rem; line-height: 1.55; color: rgba(255, 255, 255, .74); } .hero-steps li::before { content: counter(hs); position: absolute; left: 0; top: -.1em; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3); font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--sky); } .hero-steps b { display: block; color: #fff; font-weight: 600; margin-bottom: .15rem; } .hero-aside { margin: var(--gap-m) 0 0; padding-top: var(--gap-s); border-top: 1px solid rgba(255, 255, 255, .16); max-width: 52ch; font-size: .87rem; line-height: 1.6; color: rgba(255, 255, 255, .6); } .hero-aside a { color: var(--sky); } /* -------------------------------------------------------------------------- 30. Boat club membership CTA Shared across rentals, clubs, boat type and marina pages so the route into the membership intake is never more than one screen away. -------------------------------------------------------------------------- */ .club-band { position: relative; overflow: hidden; } .club-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 340px at 88% 10%, rgba(61,139,208,.42), transparent 62%), radial-gradient(560px 300px at 4% 96%, rgba(108,198,243,.16), transparent 64%); pointer-events: none; } .club-band .shell { position: relative; } .club-band-note { margin: var(--gap-s) 0 0; font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.58); max-width: 52ch; } /* Compact version for a hero column. */ .club-card .club-card-ticks { list-style: none; margin: 0 0 1.15rem; padding: 0; display: grid; gap: .45rem; } .club-card .club-card-ticks li { position: relative; margin: 0; padding-left: 1.6rem; font-size: .86rem; line-height: 1.45; color: var(--txt-mid); } .club-card .club-card-ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ocean); font-weight: 700; } .club-card .path-note a { color: var(--ocean); font-weight: 600; } /* -------------------------------------------------------------------------- 31. "No club here" panel Shown on a clubs page for a city that has none of its own. It is meant to be noticed, because the visitor searched for something that does not exist and should be told immediately rather than three scrolls down. -------------------------------------------------------------------------- */ .nearest { display: flex; align-items: flex-start; gap: clamp(1rem, .8rem + 1vw, 1.5rem); padding: clamp(1.3rem, 1rem + 1.4vw, 2rem); background: var(--foam-50); border: 1.5px solid var(--line-soft); border-left: 5px solid var(--ocean); border-radius: var(--radius-l); } .nearest-mark { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--ocean); box-shadow: var(--shadow-s); } @media (max-width: 560px) { .nearest-mark { display: none; } } .nearest p { font-size: .96rem; line-height: 1.65; } .nearest a { color: var(--ocean); font-weight: 600; } /* "optional" tag beside a field label. */ .field label .opt { margin-left: .4rem; padding: .1rem .4rem; border-radius: 999px; background: var(--foam-100); color: var(--txt-mid); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: .08em; } .field select:disabled { background: var(--foam-50); color: var(--txt-mid); cursor: not-allowed; } /* A class selector beats the user agent's [hidden] rule, so any component that sets display needs this or hidden fields render anyway. */ [hidden] { display: none !important; } /* -------------------------------------------------------------------------- 32. Horizontal rental search bar Interior page heroes run the form as one row under a full width heading, rather than a column card that squeezes the heading into half the page. -------------------------------------------------------------------------- */ .hero-bar .hero-head-wide { max-width: 60ch; margin-bottom: var(--gap-m); } .hero-bar .hero-head-wide .hero-sub { margin-bottom: var(--gap-s); } .rent-bar { background: var(--paper); border-radius: var(--radius-l); box-shadow: var(--shadow-l); padding: clamp(1rem, .85rem + 1vw, 1.5rem); } .rent-bar-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 720px) { .rent-bar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1060px) { /* where, date, how long, people, marina, go */ .rent-bar-grid { grid-template-columns: 1.15fr 1fr 1.25fr .6fr 1.15fr auto; align-items: end; gap: .7rem; } } .rent-bar .field label { font-size: .74rem; letter-spacing: .01em; } .rent-bar .field input, .rent-bar .field select { padding: .7rem .8rem; font-size: .94rem; } .rent-bar-go { align-self: end; } .rent-bar-go .btn { width: 100%; min-height: 50px; white-space: nowrap; } @media (max-width: 719px) { .rent-bar-go { grid-column: 1 / -1; } } .rent-bar-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: .85rem; } .rent-bar-foot .mini-multiday { max-width: 220px; } .rent-bar-note { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--txt-mid); } .rent-bar-note small { display: block; color: var(--ocean); font-weight: 600; } /* The marina field carries a hint line, which made its grid row taller and stretched the select beside it. Align rows to the top so every control sits on the same baseline regardless of what hangs below it. */ .mini-row, .mini-row-2 { align-items: start; } .mini-form .field { align-content: start; } .mini-form .field select, .mini-form .field input { align-self: start; width: 100%; } /* Legal pages */ .legal { max-width: 78ch; } .legal h2 { margin: var(--gap-m) 0 .6rem; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); color: var(--navy); } .legal h2:first-of-type { margin-top: 0; } .legal p, .legal li { font-size: .97rem; line-height: 1.75; color: var(--txt); } .legal ul { padding-left: 1.2rem; margin-bottom: 1.2rem; } .legal code { padding: .1rem .35rem; border-radius: 5px; background: var(--foam-100); font-size: .88em; } .legal hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--gap-m) 0; } .legal-updated { font-size: .84rem; color: var(--txt-mid); }