/* ============================================================= Royal Ragdolls — site stylesheet Mobile-first. One file, no build step. Sections: 1 tokens · 2 reset/base · 3 layout · 4 type 5 buttons/chips · 6 header/nav · 7 components 8 forms · 9 footer/mobile bar · 10 utilities ============================================================= */ /* ---------- 1. tokens ---------- */ :root { color-scheme: light; --ink: #141414; --ink-2: #1F1F1F; --ink-3: #2E2E2E; --body: #565656; --muted: #7C7C7C; --bg: #FAFAFA; --surface: #FFFFFF; --surface-2: #F4F4F4; --chip: #ECECEC; --line: #E4E4E4; --line-2: #DCDCDC; --line-3: #F0F0F0; --font-display: 'Bitter', Georgia, 'Times New Roman', serif; --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* fluid rhythm — the page breathes less on a phone, more on a desktop */ --gutter: clamp(16px, 4.6vw, 26px); --sec-y: clamp(46px, 9vw, 84px); --gap: clamp(14px, 2.6vw, 30px); --r-xl: clamp(24px, 5vw, 40px); --r-lg: clamp(20px, 4vw, 30px); --r-md: clamp(16px, 3vw, 26px); --r-sm: 14px; --shadow-soft: 0 12px 30px -18px rgba(20, 20, 20, 0.35); --shadow-lift: 0 18px 40px -22px rgba(20, 20, 20, 0.4); --header-h: 68px; } /* ---------- 2. reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* stop iOS inflating text in landscape */ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); /* safety net only — no component should overflow, but a stray wide child must never give a phone a horizontal scrollbar. `clip` (unlike `hidden`) does not turn the root into a scroll container, so sticky still works. */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* no overflow-x here on purpose: it would turn into a scroll container and break the sticky header. The clip on already contains the drawer. */ } img, svg, video, iframe { max-width: 100%; display: block; } img { height: auto; } a { color: var(--ink-2); text-decoration: none; } a:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; } ::selection { background: #E2E2E2; } :focus-visible { outline: 3px solid rgba(20, 20, 20, 0.55); outline-offset: 2px; border-radius: 4px; } hr { border: 0; border-top: 2px dashed var(--line); margin: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* skip link */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 14px 20px; background: var(--ink); color: var(--bg); border-radius: 0 0 var(--r-sm) 0; font-weight: 800; } .skip:focus { left: 0; color: var(--bg); } /* ---------- 3. layout ---------- */ .wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 940px; } .sec { padding-block: var(--sec-y); } .sec--top { padding-bottom: 0; } .sec--bottom { padding-top: 0; } .sec--flush { padding-block: 0; } .sec--tint { background: var(--surface-2); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); } .grid { display: grid; gap: var(--gap); } .grid > * { min-width: 0; } /* card grids: 1 col on a phone, stepping up with room */ .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 720px) { .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* asymmetric content splits hold their ratio until there is no room, then stack */ .split { grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 1000px) { .split { grid-template-columns: 1.02fr 0.98fr; gap: clamp(30px, 4vw, 64px); } .split--story { grid-template-columns: 0.92fr 1.08fr; } .split--about { grid-template-columns: 1.15fr 0.85fr; align-items: start; } .split--toc { grid-template-columns: 0.28fr 0.72fr; align-items: start; } .split--form { grid-template-columns: 1.35fr 0.65fr; align-items: start; } } .stack { display: flex; flex-direction: column; gap: 18px; } .stack--tight { gap: 11px; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 40px); } .sec-head--center { display: block; text-align: center; max-width: 640px; margin-inline: auto; } /* ---------- 4. type ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 0; text-wrap: pretty; } h1 { font-size: clamp(31px, 7.4vw, 62px); line-height: 1.08; letter-spacing: -0.01em; } h2 { font-size: clamp(25px, 5.2vw, 44px); line-height: 1.14; } h3 { font-size: clamp(19px, 3.2vw, 26px); line-height: 1.3; } h4 { font-size: clamp(17px, 2.4vw, 20px); line-height: 1.35; } .h-sm { font-size: clamp(19px, 2.8vw, 24px); } .h-lg { font-size: clamp(28px, 5.6vw, 46px); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .lead { font-size: clamp(16.5px, 2.2vw, 18.5px); line-height: 1.75; color: var(--body); max-width: 62ch; text-wrap: pretty; } .prose p { font-size: clamp(16px, 2vw, 17px); line-height: 1.85; color: var(--body); text-wrap: pretty; } .prose--lg p { font-size: clamp(16.5px, 2.1vw, 17.5px); line-height: 1.8; } .eyebrow { display: block; font-family: var(--font-display); font-size: clamp(14px, 1.8vw, 16px); font-weight: 600; color: var(--ink-2); margin-bottom: 10px; } .muted { color: var(--muted); } .small { font-size: clamp(13.5px, 1.8vw, 14.5px); line-height: 1.65; } .strong { font-weight: 800; color: var(--ink); } .serif { font-family: var(--font-display); } .stars { color: #4A4A4A; letter-spacing: 0.14em; font-size: 15px; } /* ---------- 5. buttons / chips / pills ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; /* every tap target clears 44px */ padding: 15px clamp(22px, 3.4vw, 34px); border: 2px solid transparent; border-radius: 999px; font-family: var(--font-body); font-size: clamp(15px, 1.9vw, 16.5px); font-weight: 800; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--dark { background: var(--ink-2); color: var(--bg); } .btn--dark:hover { background: #000; color: var(--bg); } .btn--mid { background: var(--ink-3); color: #FAFAFA; } .btn--mid:hover { background: #111; color: #FAFAFA; } .btn--ghost { background: transparent; border-color: #CFCFCF; color: var(--ink); } .btn--ghost:hover { background: var(--chip); color: var(--ink); } .btn--light { background: var(--bg); color: var(--ink); } .btn--light:hover { background: var(--chip); color: var(--ink); } .btn--quiet { background: var(--line); color: var(--ink); } .btn--quiet:hover { background: #D6D6D6; color: var(--ink); } .btn--sm { min-height: 44px; padding: 12px 22px; font-size: 14.5px; } .btn--block { display: flex; width: 100%; } .chip { display: inline-block; padding: 8px 18px; background: var(--chip); color: #000; border-radius: 999px; font-size: clamp(12.5px, 1.7vw, 13.5px); font-weight: 800; line-height: 1.3; } .chip--soft { background: #E6E6E6; color: #0A0A0A; } .chip--sm { padding: 6px 14px; font-size: 12.5px; } .chip--light{ background: var(--bg); color: #0A0A0A; } .pill { position: absolute; top: 14px; left: 14px; padding: 7px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 800; line-height: 1.2; } .pill--available { background: var(--ink-3); color: #fff; } .pill--reserved { background: #6E6E6E; color: #141414; } .pill--sold { background: #7C7C7C; color: #FAFAFA; } /* ---------- 6. announcement / header / nav ---------- */ .announce { background: var(--ink-3); color: #fff; font-size: clamp(12.5px, 1.7vw, 13.5px); font-weight: 600; padding: 10px var(--gutter); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; align-items: center; text-align: center; } .announce a { color: #fff; border-bottom: 1px dotted rgba(255, 255, 255, 0.6); } .announce a:hover { color: #fff; text-decoration: none; border-bottom-style: solid; } .announce__dot { opacity: 0.5; } /* below tablet the bar keeps one trust line and the phone number */ @media (max-width: 860px) { .announce__item--2, .announce__dot { display: none; } } @media (max-width: 420px) { .announce__item--1 { display: none; } } .site-header { position: sticky; top: 0; z-index: 40; /* Deliberately NO backdrop-filter here. A filtered element becomes the containing block for its position:fixed descendants, which would trap the off-canvas nav drawer inside the header box. At 0.97 alpha the frost was invisible anyway, and dropping it saves a GPU pass on every scroll frame. */ background: rgba(250, 250, 250, 0.97); border-bottom: 2px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: 12px; padding-block: 10px; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: 11px; margin-right: auto; } .brand:hover { text-decoration: none; } .brand__mark { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: var(--ink-2); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; } .brand__text { display: flex; flex-direction: column; line-height: 1.2; } .brand__word { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 2.4vw, 22px); color: var(--ink); white-space: nowrap; } .brand__sub { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; } @media (max-width: 1240px) { .brand__sub { display: none; } } @media (min-width: 1241px) { .brand__mark { width: 48px; height: 48px; font-size: 21px; } } /* On desktop the shell is invisible to layout and .nav is a normal flex item. Below the breakpoint it becomes a viewport-sized clipping frame, so the off-canvas panel can never add to the page's scrollable width. */ .nav-shell { display: contents; } .nav { display: flex; align-items: center; gap: 3px; } .nav__link { padding: 10px 11px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--body); white-space: nowrap; } @media (min-width: 1400px) { .nav__link { padding: 11px 14px; font-size: 14.5px; } } .nav__link:hover { background: var(--chip); color: var(--ink); text-decoration: none; } .nav__link[aria-current="page"] { background: var(--chip); color: var(--ink); } .header-cta { flex: 0 0 auto; } /* the burger + off-canvas drawer take over below the desktop breakpoint */ .nav-toggle { display: none; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px 10px 14px; background: transparent; border: 2px solid var(--line-2); border-radius: 999px; font-family: var(--font-body); font-size: 14.5px; font-weight: 800; color: var(--ink); cursor: pointer; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .nav-backdrop { position: fixed; inset: 0; /* Below the header (40) so the header — and the button that closes the drawer — stay lit and tappable, but above the sticky mobile bar (35) so nothing behind the dim can be tapped by mistake. */ z-index: 36; background: rgba(20, 20, 20, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } @media (max-width: 1240px) { .nav-toggle { display: inline-flex; } .header-cta { display: none; } .nav-shell { display: block; position: fixed; inset: 0; /* exactly the viewport — contributes no overflow */ z-index: 50; overflow: hidden; /* clips the panel parked off to the right */ pointer-events: none; visibility: hidden; /* Without this the shell snaps to hidden the instant the menu is dismissed, cutting off the panel's slide-out and making it vanish. Transitioning visibility holds it on screen until the slide finishes. */ transition: visibility 0.28s; } .nav-open .nav-shell { visibility: visible; } .nav { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); flex-direction: column; align-items: stretch; gap: 4px; padding: 22px 20px calc(28px + env(safe-area-inset-bottom)); background: var(--bg); border-left: 2px solid var(--line); box-shadow: -20px 0 44px -28px rgba(20, 20, 20, 0.6); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; transform: translateX(102%); transition: transform 0.28s ease; } .nav__link { padding: 15px 16px; border-radius: var(--r-sm); font-size: 16.5px; border-bottom: 2px solid var(--line-3); } .nav__cta { margin-top: 16px; } .nav-open .nav { transform: translateX(0); } .nav-open .nav-backdrop { opacity: 1; visibility: visible; } .nav-open .nav-toggle__bars { background: transparent; } .nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } } @media (min-width: 1241px) { .nav__cta { display: none; } /* the header already carries an Enquire button */ } /* the drawer needs a heading row of its own on small screens */ .nav__title { display: none; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--muted); padding: 0 16px 12px; } @media (max-width: 1240px) { .nav__title { display: block; } } body.is-locked { overflow: hidden; } /* ---------- 7. components ---------- */ .card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 34px); } .card--flat { padding: clamp(14px, 2vw, 16px); } .card--tint { background: var(--surface-2); } .card--dark { background: var(--ink-3); border-color: var(--ink-3); color: #fff; } .card--dark h2, .card--dark h3 { color: #fff; } .card--dark p { color: rgba(255, 255, 255, 0.88); } /* media frames — aspect-ratio keeps the layout still while images load */ .media { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--chip); } .media > img { width: 100%; height: 100%; object-fit: cover; } .media--wide { aspect-ratio: 4 / 3; } .media--square { aspect-ratio: 1 / 1; } .media--portrait { aspect-ratio: 3 / 4; } .media--band { aspect-ratio: 16 / 10; } .media--map { aspect-ratio: 16 / 9; } .frame { border: 5px solid var(--surface); box-shadow: var(--shadow-lift); border-radius: var(--r-lg); } .avatar { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--chip); } /* hero */ .hero { padding-top: clamp(34px, 6vw, 70px); } .hero__media { position: relative; aspect-ratio: 3 / 4; max-height: 580px; border-radius: 160px 160px 22px 22px; overflow: hidden; background: var(--chip); } .hero__media > img { width: 100%; height: 100%; object-fit: cover; } .hero__ring { display: none; } /* On a phone the hero photo pushes the headline and both CTAs off the first screen for little gain, so the whole figure is dropped below 760px. */ @media (max-width: 760px) { .hero__figure { display: none; } } .hero__proof { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .hero__faces { display: flex; } .hero__faces img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--bg); } .hero__faces img + img { margin-left: -12px; } @media (min-width: 901px) { .hero__media { border-radius: 270px 270px 32px 32px; } .hero__ring { display: block; position: absolute; inset: -24px; border: 2px dashed #CFCFCF; border-radius: 280px 280px 40px 40px; } .hero__figure { position: relative; } } /* kitten cards */ .kitten { display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-lg); padding: clamp(12px, 2vw, 16px); transition: transform 0.25s, box-shadow 0.25s; } .kitten__body { display: flex; flex-direction: column; flex: 1; padding: 20px 8px 8px; } .kitten__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .kitten__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2.6vw, 25px); color: var(--ink); } .kitten__foot { margin-top: auto; padding-top: 16px; border-top: 2px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .kitten.is-sold { opacity: 0.62; } .kitten[hidden] { display: none; } .spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 0 0 18px; font-size: 15px; } .spec dt { color: var(--muted); } .spec dd { margin: 0; color: var(--ink); font-weight: 700; } /* filter row scrolls rather than wraps into a ragged block on a phone */ .filters { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .filters::-webkit-scrollbar { display: none; } .filter { flex: 0 0 auto; min-height: 46px; padding: 12px 22px; border: 2px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--body); font-family: var(--font-body); font-size: 14.5px; font-weight: 800; cursor: pointer; white-space: nowrap; } .filter[aria-pressed="true"] { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg); } /* numbered / labelled feature rows */ .feature { display: flex; gap: clamp(16px, 2.4vw, 22px); align-items: flex-start; } .blob { flex-shrink: 0; width: 48px; height: 48px; border-radius: 45% 55% 52% 48% / 48% 52% 48% 52%; background: var(--chip); color: #000; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; } .blob--dark { background: var(--ink-2); color: var(--bg); } .blob--lg { width: 74px; height: 74px; font-size: 32px; } .year-tag { flex-shrink: 0; padding: 6px 14px; background: var(--surface); border: 2px solid var(--line); border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-2); } /* quotes */ .quote { margin: 0; display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md); padding: clamp(24px, 3.4vw, 32px); } .quote__text { font-family: var(--font-display); font-size: clamp(15.5px, 2vw, 17px); line-height: 1.68; color: var(--ink); margin: 14px 0 22px; text-wrap: pretty; } .quote__foot { margin-top: auto; display: flex; align-items: center; gap: 13px; padding-top: 18px; border-top: 2px dashed var(--line); } .quote__name { font-size: 15px; font-weight: 800; color: var(--ink); } .quote__meta { font-size: 13.5px; color: var(--muted); } /* ticked list */ .ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; } .ticks li { display: flex; gap: 14px; align-items: flex-start; padding: 15px 18px; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; font-size: 15.5px; line-height: 1.6; } .ticks li::before { content: "✓"; flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--ink-3); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } .ticks--plain li { padding: 0; background: none; border: 0; border-radius: 0; font-size: 15.5px; } .ticks--plain li::before { background: none; color: currentColor; opacity: 0.6; width: auto; height: auto; } /* key/value rows */ .rows { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .rows__row { display: flex; justify-content: space-between; gap: 18px; padding: 15px 20px; border-bottom: 2px dashed var(--line-3); font-size: 15.5px; } .rows__row:last-child { border-bottom: 0; } .rows__row dt, .rows__row span:first-child { color: var(--ink); font-weight: 700; } .rows__row dd, .rows__row span:last-child { margin: 0; color: var(--body); text-align: right; } .creds__item { padding: 14px 0; border-bottom: 2px dashed var(--line); } .creds__item:last-of-type { border-bottom: 0; } .creds__label { font-size: 13px; font-weight: 800; color: var(--ink-2); margin-bottom: 5px; } .creds__value { font-size: 15.5px; line-height: 1.5; font-weight: 600; } /* swatches */ .swatch { flex-shrink: 0; width: 38px; height: 38px; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; } /* responsive table — collapses to stacked cards on a phone */ .table-wrap { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .rtable { width: 100%; border-collapse: collapse; font-size: 15.5px; } .rtable thead tr { background: var(--surface-2); } .rtable th { text-align: left; padding: 15px 20px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--muted); } .rtable td { padding: 16px 20px; border-top: 2px dashed var(--line-3); color: var(--body); line-height: 1.6; } .rtable td:first-child { font-weight: 800; color: var(--ink); } .rtable td:last-child { color: var(--ink); font-weight: 700; white-space: nowrap; } @media (max-width: 700px) { .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; } .rtable tr { padding: 6px 0; border-top: 2px dashed var(--line-3); } .rtable tr:first-child { border-top: 0; } .rtable td { border: 0; padding: 8px 18px; } .rtable td::before { content: attr(data-label); display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 3px; } .rtable td:last-child { white-space: normal; } } /* FAQ — native disclosure, works with JS off */ .faq { display: flex; flex-direction: column; gap: 14px; } .faq__item { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .faq__item[open] { border-color: var(--ink-2); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 2.4vw, 20px); line-height: 1.35; color: var(--ink); } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: "+"; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--chip); color: #000; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 20px; line-height: 1; } .faq__item[open] .faq__q::after { content: "−"; background: var(--ink-2); color: var(--bg); } .faq__a { padding: 0 22px 24px; margin: 0; font-size: clamp(15.5px, 2vw, 16.5px); line-height: 1.8; color: var(--body); max-width: 70ch; text-wrap: pretty; } /* on-this-page nav */ .toc { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; } .toc__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--muted); margin-bottom: 10px; } .toc a { display: block; padding: 11px 0; font-size: 15.5px; font-weight: 700; border-bottom: 2px dashed var(--line-3); } .toc a:last-child { border-bottom: 0; } @media (min-width: 1000px) { .toc { position: sticky; top: calc(var(--header-h) + 20px); } } /* gallery */ .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 20px); } .gallery__cell { overflow: hidden; border-radius: var(--r-md); border: 4px solid var(--surface); box-shadow: 0 10px 22px -16px rgba(20, 20, 20, 0.3); aspect-ratio: 1 / 1; background: var(--chip); } .gallery__cell > img { width: 100%; height: 100%; object-fit: cover; } .gallery__cell--wide { grid-column: span 2; aspect-ratio: 16 / 10; } @media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 215px; } .gallery__cell { aspect-ratio: auto; } .gallery__cell--wide { grid-column: span 2; aspect-ratio: auto; } .gallery__cell--big { grid-column: span 2; grid-row: span 2; } .gallery__cell--tall { grid-row: span 2; } } /* dark call-to-action band */ .cta-band { background: var(--ink-3); border-radius: var(--r-xl); padding: clamp(34px, 6vw, 70px) clamp(22px, 4vw, 52px); text-align: center; color: #fff; } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255, 255, 255, 0.9); max-width: 52ch; margin-inline: auto; } .cta-band--left { text-align: left; } .cta-band--left p { margin-inline: 0; } /* waitlist strip */ .strip { display: flex; gap: clamp(20px, 3vw, 40px); align-items: center; flex-wrap: wrap; padding: clamp(26px, 4vw, 44px); background: var(--surface-2); border: 2px solid var(--line); border-radius: var(--r-xl); } .strip__text { flex: 1 1 300px; } /* pricing tiers */ .tier { display: flex; flex-direction: column; } .tier__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 38px); margin-bottom: 16px; } /* blog cards */ .post { display: flex; flex-direction: column; } .post__body { display: flex; flex-direction: column; flex: 1; padding: 20px 10px 10px; } .post__meta { display: flex; gap: 9px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .post__title { font-size: clamp(19px, 2.6vw, 22px); line-height: 1.3; margin-bottom: 12px; } .post:hover { text-decoration: none; } .post:hover .post__title { text-decoration: underline; text-underline-offset: 3px; } /* article body */ .article { max-width: 72ch; } .article h2 { font-size: clamp(23px, 4vw, 32px); margin: clamp(32px, 5vw, 46px) 0 14px; } .article h3 { font-size: clamp(18px, 2.8vw, 22px); margin: clamp(24px, 4vw, 32px) 0 10px; } .article p, .article li { font-size: clamp(16px, 2vw, 17px); line-height: 1.85; color: var(--body); } .article ul, .article ol { margin: 0 0 1.2em; padding-left: 22px; } .article li { margin-bottom: 8px; } .article strong { color: var(--ink); } .article blockquote { margin: clamp(24px, 4vw, 34px) 0; padding: clamp(20px, 3vw, 28px); background: var(--surface); border: 2px solid var(--line); border-left: 6px solid var(--ink-2); border-radius: var(--r-sm); font-family: var(--font-display); font-size: clamp(16px, 2.2vw, 18px); line-height: 1.65; color: var(--ink); } .breadcrumb { font-size: 13.5px; color: var(--muted); margin-bottom: 16px; } .breadcrumb a { color: var(--body); font-weight: 700; } .breadcrumb span { padding: 0 6px; } /* ---------- 8. forms ---------- */ .fieldset { border: 2px solid var(--line); border-radius: var(--r-lg); margin: 0; padding: clamp(20px, 3.4vw, 32px); background: var(--surface); } .fieldset__legend { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 2.4vw, 20px); color: var(--ink-2); padding: 0 10px; } .fieldset--inner { border: 2px solid var(--line-2); border-radius: 18px; padding: 18px 20px; background: #F5F5F5; grid-column: 1 / -1; } .fieldset--inner .fieldset__legend { font-family: var(--font-body); font-size: 14.5px; font-weight: 800; color: var(--ink); } .form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } @media (min-width: 720px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .span-2 { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 8px; } .field__label { font-size: 14.5px; font-weight: 800; color: var(--ink); } .field__hint { font-size: 13.5px; color: var(--muted); } .input, .select, .textarea { width: 100%; min-height: 50px; padding: 14px 16px; border: 2px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-family: var(--font-body); font-size: 16px; /* 16px stops iOS Safari zooming on focus */ line-height: 1.4; } .textarea { resize: vertical; min-height: 96px; } .select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23565656'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; } .input:focus, .select:focus, .textarea:focus { outline: 3px solid rgba(20, 20, 20, 0.28); outline-offset: 0; border-color: var(--ink-2); } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #8C1D1D; background: #FFF8F8; } .radio-row { display: flex; gap: 12px; flex-wrap: wrap; } .radio { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 12px 18px; background: #fff; border: 2px solid var(--line-2); border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; } .radio input { width: 20px; height: 20px; accent-color: var(--ink-2); } .radio:has(input:checked) { border-color: var(--ink-2); background: var(--chip); } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .alert { padding: 20px 24px; background: #F2F2F2; border: 2px solid #C4C4C4; border-radius: var(--r-md); } .alert strong { display: block; font-size: 15.5px; margin-bottom: 8px; color: #000; } .alert ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.7; } .alert a { font-weight: 700; } .form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .success { padding: clamp(30px, 6vw, 58px); background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-xl); text-align: center; } .success .blob { margin: 0 auto 22px; } /* contact aside */ .contact-card { padding: clamp(24px, 3.4vw, 32px); background: var(--ink-3); border-radius: var(--r-lg); color: #fff; } .contact-card h2 { color: #fff; font-size: clamp(20px, 2.6vw, 23px); margin-bottom: 18px; } .contact-card a { color: #fff; } .contact-card__grid { display: grid; gap: 16px; font-size: 15.5px; line-height: 1.65; } .contact-card__label { font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #DEDEDE; margin-bottom: 5px; } /* ---------- 9. footer + mobile action bar ---------- */ .site-footer { background: var(--ink); color: #DADADA; margin-top: auto; } .site-footer a { color: #DADADA; } .site-footer a:hover { color: #fff; } .site-footer h2, .site-footer h3 { color: #FAFAFA; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); padding-block: clamp(44px, 7vw, 70px) 36px; } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } } .footer-head { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #8A8A8A; margin-bottom: 14px; } .footer-nav { display: flex; flex-direction: column; gap: 4px; } .footer-nav a { padding: 7px 0; font-size: 15.5px; } .footer-mark { width: 44px; height: 44px; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: var(--ink-2); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 19px; } .footer-bottom { border-top: 1px solid rgba(220, 220, 220, 0.28); } .footer-bottom__inner { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-block: 20px; font-size: 13.5px; color: #8A8A8A; } /* sticky call/enquire bar — phones only */ .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: none; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 250, 250, 0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 2px solid var(--line); } .mobile-bar .btn { flex: 1 1 0; min-height: 50px; padding-inline: 12px; font-size: 15px; } .mobile-bar svg { width: 17px; height: 17px; flex: 0 0 auto; } @media (max-width: 860px) { .mobile-bar { display: flex; } body:not(.no-bar) { padding-bottom: 78px; } } @media (max-width: 360px) { .mobile-bar .btn { font-size: 13.5px; padding-inline: 8px; } } /* ---------- 10. utilities ---------- */ .flow > * + * { margin-top: var(--flow, 20px); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 18px; } .mt-3 { margin-top: 26px; } .mt-4 { margin-top: clamp(28px, 4vw, 40px); } .mt-5 { margin-top: clamp(36px, 6vw, 56px); } .mb-1 { margin-bottom: 10px; } .mb-2 { margin-bottom: 18px; } .mb-3 { margin-bottom: 26px; } .mb-4 { margin-bottom: clamp(28px, 4vw, 40px); } .mb-5 { margin-bottom: clamp(36px, 6vw, 52px); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 400px) { .btn-row .btn { width: 100%; } } .center { text-align: center; } .nowrap { white-space: nowrap; } .relative { position: relative; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* the hand-made tilt is charming on a desktop and reads as a bug on a phone */ @media (min-width: 761px) { .tilt-a { transform: rotate(-1.1deg); } .tilt-b { transform: rotate(0.8deg); } .tilt-c { transform: rotate(-0.6deg); } .tilt-a:hover, .tilt-b:hover, .tilt-c:hover { transform: rotate(0deg) translateY(-5px); } } .page-shell { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } @media print { .site-header, .announce, .mobile-bar, .nav-backdrop, .site-footer, .skip { display: none !important; } body { background: #fff; padding-bottom: 0; } .card, .kitten, .quote { break-inside: avoid; } }