/* ====================================================================================================== Passport & Practice: the public look (site.css) A richly coloured travel journal crossed with a well-made passport. Colour carries whole sections, pictures are large, things overlap, and something moves with every scroll. Phone first (390 px), then desktop. Nothing here needs JavaScript: whatever is hidden before a reveal is hidden only under html.js, and every movement stops under prefers-reduced-motion. TOKENS (custom properties on :root) colour --navy --navy-deep --coral --coral-deep --coral-light --gold --cream --paper --ink --ink-soft --line --line-strong (+ --navy-rgb --deep-rgb --coral-rgb --gold-rgb --cream-rgb for alpha) type --serif (Fraunces) --sans (Jost) --mono (DM Mono) --t-hero --t-xl --t-l --t-m --t-s --t-lead --t-body --t-small --t-mono --t-micro space --s-1 ... --s-10, --gutter, --section, --max, --max-narrow, --max-wide, --edge, --header-h radius --r-xs --r-s --r-m --r-l --r-pill shadow --sh-1 --sh-2 --sh-3 motion --ease --ease-io --ease-back --dur-1 --dur-2 --dur-3 GROUNDS (set text, heading, accent, label, rule, link, button, focus, stamp and route colours together) .on-navy .on-deep .on-coral .on-gold .on-cream .on-paper .on-picture Inside a ground use the variables: --ground --fg --fg-soft --head --accent --accent-display --label --rule --rule-strong --link-line --btn-bg --btn-fg --btn2 --focus --stamp --route --numeral --error --card Paper things (.ticket .notice .card--row .surface) carry the paper colours with them onto any ground. LAYOUT .site-header (.wordmark .site-nav .cart-link .nav-btn) .flashes .site-main .site-footer .section (.section--s .section--l .section--flush) .wrap (.wrap--narrow .wrap--wide) .guilloche .under-header .bleed .bleed-l .bleed-r .split (.split--flip .split--even .split--top) .grid (.grid--2 .grid--3 .grid--4) .stack (.stack--s .stack--l) .cluster .layers (.layers--flip .layers__stamp) .panel .surface .scroller .sticks helpers: .measure .mt-0 .mt-4 .mt-6 .mt-8 .only-s .only-l .center .nowrap .vh .lift .tilt-l .tilt-r TYPE .display (.display--hero --xl --l --m --s) .eyebrow (.eyebrow__n) .lead .mono .small .soft .prose .rise (.rise--now) .numeral .coords COMPONENTS (each has a function in lib/site.php, shown at /_kit) .btn (.btn--primary --secondary --quiet --s --l --full) .arrow .stamp (.stamp--s --m --l --xl, --coral --gold --navy --cream, .stamp--seal-*) .datestamp .tag (.tag--coral --gold --navy --paper) .badge (.badge--open --few --last --full --closed) .card (.card--tall --wide --row, .card--flip) .ticket (.ticket--side) .pass (.pass--slim) .barcode .stub .accordion .field .input .select .textarea .check .choices .choice .file .notice .opener .hero (.hero--short .hero--strip, __pic __scrim __in __title __sub __cta __stamp __note __strip) .pic (.pic--frame-* .pic--block-* .pic--flip, __img __cap __corner) .price .stepper .empty .band .rows (.rows__total) .ticks .crosses .form-grid .newsform .route-wrap .route .route-stop .route__plane .doors .door (pp_doors: the three lines; no hover effects) MOTION (site.js adds .is-in; hidden-before-reveal only under html.js; section 24 stops all of it) .reveal (.reveal--left --right --zoom --clip --stamp, style="--delay:150ms") .reveal-group .rise (.rise--now) [data-parallax="0.06"] .lift hover: cards lift, pictures ease larger, arrows nudge (never on the three doors: the owner asked for them to stay still) @keyframes hero-zoom, band-drift, rise-in, pulse-dot, nav-in, acc-in PAGES IN THIS FILE Home (.doors .door .dests .couch-list .idea .stops .cenote .scatter .merch .news) 404 (.lost) /_kit (.kit-*) BREAKPOINTS phone first; 30em small phones up, 40em tablet, 48em tickets side by side, 56.25em desktop layout, 62.5em the full header menu, 64em wide grids ====================================================================================================== */ /* ---------- 1. Tokens ---------- */ :root { --navy: #17233C; --navy-deep: #0F1830; --coral: #D96955; --coral-deep: #B84A36; --coral-light: #E58672; --gold: #C89A45; --cream: #F7F2E8; --paper: #FFFDF8; --ink: #252525; --ink-soft: #5F5A52; --line: #DED5C4; --line-strong: #8E8676; --navy-rgb: 23 35 60; --deep-rgb: 15 24 48; --coral-rgb: 217 105 85; --gold-rgb: 200 154 69; --cream-rgb: 247 242 232; --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: "Jost", "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif; --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --t-hero: clamp(2.75rem, 1rem + 5.8vw, 7.5rem); --t-xl: clamp(2.5rem, 1.3rem + 4.6vw, 5.5rem); --t-l: clamp(2.125rem, 1.35rem + 3vw, 4rem); --t-m: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem); --t-s: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --t-lead: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-mono: 0.75rem; --t-micro: 0.6875rem; --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --gutter: clamp(1.25rem, 4.5vw, 3rem); --section: clamp(4.5rem, 10vw, 9rem); --max: 80rem; --max-narrow: 46rem; --max-wide: 92rem; /* the distance from the edge of .wrap to the edge of the screen: lets a picture inside .wrap run edge to edge */ --edge: max(var(--gutter), calc((100vw - var(--max)) / 2)); --header-h: 4.5rem; --r-xs: 4px; --r-s: 8px; --r-m: 14px; --r-l: 28px; --r-pill: 999px; --sh-1: 0 1px 2px rgb(var(--deep-rgb) / 0.08), 0 4px 12px rgb(var(--deep-rgb) / 0.08); --sh-2: 0 2px 4px rgb(var(--deep-rgb) / 0.08), 0 14px 32px rgb(var(--deep-rgb) / 0.16); --sh-3: 0 4px 8px rgb(var(--deep-rgb) / 0.1), 0 28px 64px rgb(var(--deep-rgb) / 0.28); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-1: 0.18s; --dur-2: 0.4s; --dur-3: 0.9s; } @media (min-width: 62.5em) { :root { --header-h: 5.5rem; } } /* ---------- 2. Grounds ---------- One class sets everything that has to change together when the colour behind the text changes. Contrast (AA): cream or gold on navy; navy on coral and on gold; ink on cream, with the deeper coral for small coral text. Gold is never text on cream. */ :root, .on-cream, .on-paper { --ground: var(--cream); --fg: var(--ink); --fg-soft: var(--ink-soft); --head: var(--navy); --accent: var(--coral-deep); --accent-display: var(--coral); --label: var(--coral-deep); --amp: var(--coral-deep); --rule: var(--line); --rule-strong: var(--line-strong); --link-line: var(--coral); --btn-bg: var(--coral); --btn-fg: var(--navy-deep); --btn-bg-hover: var(--coral-light); --btn2: var(--navy); --btn2-hover-fg: var(--cream); --focus: var(--navy); --stamp: var(--coral-deep); --route: var(--coral-deep); --numeral: rgb(var(--navy-rgb) / 0.07); --error: var(--coral-deep); --guilloche: rgb(var(--navy-rgb) / 0.05); --card: var(--paper); } .on-paper { --ground: var(--paper); --card: var(--cream); } /* things made of paper (tickets, notices, the row card, .surface) carry the paper colours with them onto any ground */ .ticket, .notice, .card--row, .surface { --ground: var(--paper); --fg: var(--ink); --fg-soft: var(--ink-soft); --head: var(--navy); --accent: var(--coral-deep); --accent-display: var(--coral); --label: var(--coral-deep); --amp: var(--coral-deep); --rule: var(--line); --rule-strong: var(--line-strong); --link-line: var(--coral); --btn-bg: var(--coral); --btn-fg: var(--navy-deep); --btn-bg-hover: var(--coral-light); --btn2: var(--navy); --btn2-hover-fg: var(--cream); --focus: var(--navy); --stamp: var(--coral-deep); --numeral: rgb(var(--navy-rgb) / 0.07); --error: var(--coral-deep); --card: var(--cream); } .surface { background: var(--paper); color: var(--ink); border-radius: var(--r-m); box-shadow: var(--sh-1); } .on-navy, .on-deep, .on-picture { --ground: var(--navy); --fg: var(--cream); --fg-soft: rgb(var(--cream-rgb) / 0.82); --head: var(--cream); --accent: var(--coral-light); --accent-display: var(--coral); --label: var(--gold); --amp: var(--gold); --rule: rgb(var(--cream-rgb) / 0.18); --rule-strong: rgb(var(--cream-rgb) / 0.5); --link-line: var(--gold); --btn-bg: var(--coral); --btn-fg: var(--navy-deep); --btn-bg-hover: var(--coral-light); --btn2: var(--cream); --btn2-hover-fg: var(--navy); --focus: var(--gold); --stamp: var(--gold); --route: var(--gold); --numeral: rgb(var(--cream-rgb) / 0.07); --error: var(--coral-light); --guilloche: rgb(var(--gold-rgb) / 0.12); --card: var(--navy-deep); } .on-deep { --ground: var(--navy-deep); --card: var(--navy); } .on-coral, .on-gold { --ground: var(--coral); --fg: var(--navy-deep); --fg-soft: var(--navy-deep); --head: var(--navy-deep); --accent: var(--navy-deep); --accent-display: var(--navy-deep); --label: var(--navy-deep); --amp: var(--navy-deep); --rule: rgb(var(--deep-rgb) / 0.28); --rule-strong: rgb(var(--deep-rgb) / 0.62); --link-line: var(--navy-deep); --btn-bg: var(--navy); --btn-fg: var(--cream); --btn-bg-hover: var(--navy-deep); --btn2: var(--navy-deep); --btn2-hover-fg: var(--cream); --focus: var(--navy-deep); --stamp: var(--navy-deep); --route: var(--navy-deep); --numeral: rgb(var(--deep-rgb) / 0.12); --error: var(--navy-deep); --guilloche: rgb(var(--deep-rgb) / 0.09); --card: var(--paper); } .on-gold { --ground: var(--gold); } .on-cream, .on-paper, .on-navy, .on-deep, .on-coral, .on-gold { background-color: var(--ground); color: var(--fg); } .on-picture { color: var(--fg); } /* ---------- 3. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; min-width: 20rem; font: 400 var(--t-body) / 1.6 var(--sans); color: var(--fg); background: var(--cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend, pre { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } fieldset { border: 0; min-width: 0; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { cursor: pointer; } table { border-collapse: collapse; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.02em; line-height: 1.08; color: var(--head); text-wrap: balance; } h1 { font-size: var(--t-xl); } h2 { font-size: var(--t-l); } h3 { font-size: var(--t-m); } h4 { font-size: var(--t-s); letter-spacing: -0.01em; line-height: 1.2; } h1 em, h2 em, h3 em, h4 em, .display em { font-style: italic; color: var(--accent-display); } /* under 24 px the plain coral is too light on cream: small headings take the deeper one */ h4 em, .display--s em { color: var(--accent); } p { text-wrap: pretty; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:not([class]) { text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1.5px; transition: text-decoration-color var(--dur-1); } a:not([class]):hover { text-decoration-thickness: 2.5px; } strong, b { font-weight: 500; } hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; } ::selection { background: var(--coral); color: var(--navy-deep); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); } :focus:not(:focus-visible) { outline: none; } [hidden] { display: none !important; } .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; left: var(--gutter); top: -6rem; z-index: 100; padding: 0.75rem 1.25rem; border-radius: var(--r-pill); background: var(--coral); color: var(--navy-deep); font-weight: 500; text-decoration: none; } .skip:focus { top: 0.75rem; } /* ---------- 4. Type ---------- */ .display { font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.028em; line-height: 0.98; color: var(--head); text-wrap: balance; } .display--hero { font-size: var(--t-hero); font-weight: 380; letter-spacing: -0.035em; line-height: 0.96; } .display--xl { font-size: var(--t-xl); } .display--l { font-size: var(--t-l); line-height: 1.02; } .display--m { font-size: var(--t-m); line-height: 1.08; letter-spacing: -0.02em; } .display--s { font-size: var(--t-s); line-height: 1.2; letter-spacing: -0.01em; } .eyebrow, .mono { font-family: var(--mono); font-weight: 500; font-size: var(--t-mono); line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; } .eyebrow { display: block; color: var(--label); } .eyebrow__n { display: inline-block; margin-right: 0.9em; padding-right: 0.9em; border-right: 1px solid currentColor; } .mono--plain { text-transform: none; letter-spacing: 0.04em; } .coords { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.1em; color: var(--fg-soft); white-space: nowrap; } .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--fg); } .small { font-size: var(--t-small); } .soft { color: var(--fg-soft); } .center { text-align: center; } .nowrap { white-space: nowrap; } /* long text: policies, answers */ .prose { max-width: var(--max-narrow); } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: var(--t-m); margin-top: 2em; } .prose h3 { font-size: var(--t-s); margin-top: 1.75em; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li + li { margin-top: 0.4em; } /* an oversized numeral that sits behind the text of a section */ .numeral { position: absolute; z-index: 0; font: italic 300 clamp(9rem, 30vw, 24rem) / 0.8 var(--serif); letter-spacing: -0.05em; color: var(--numeral); pointer-events: none; user-select: none; } /* headline words that rise in (lib/site.php: pp_rise) */ .rise .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0.07em 0.16em; margin: -0.12em -0.07em -0.16em; } .rise .w > span { display: inline-block; } html.js .rise:not(.rise--now) .w > span { transform: translateY(115%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--w, 0) * 70ms); } html.js .rise.is-in .w > span { transform: none; } html.js .rise--now .w > span { animation: rise-in 1.1s var(--ease) both; animation-delay: calc(var(--w, 0) * 70ms + 120ms); } @keyframes rise-in { from { transform: translateY(115%); } to { transform: none; } } /* ---------- 5. Layout ---------- */ .wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; } .wrap--narrow { width: min(100% - 2 * var(--gutter), var(--max-narrow)); } .wrap--wide { width: min(100% - 2 * var(--gutter), var(--max-wide)); } .site-main { display: block; overflow-x: clip; } .section { position: relative; padding-block: var(--pad, var(--section)); } /* no clip here: see the header note; .site-main keeps the page from scrolling sideways */ /* the header lies over the top of the page, so the first block of every page makes room for it: a .section does it by itself (also the first one inside a route wrapper), anything else takes .under-header */ .site-main > .section:first-child, .site-main > .route-wrap:first-child > .section:first-of-type { padding-top: calc(var(--pad, var(--section)) + var(--header-h)); } .under-header { padding-top: calc(var(--header-h) + var(--s-6)); } .section--s { --pad: clamp(2.5rem, 6vw, 4.5rem); } .section--l { --pad: clamp(6rem, 13vw, 12rem); } .section--flush { --pad: 0px; } .section > .wrap { position: relative; z-index: 2; } .bleed { margin-inline: calc(var(--edge) * -1); } .bleed-l { margin-left: calc(var(--edge) * -1); } .bleed-r { margin-right: calc(var(--edge) * -1); } .stack > * + * { margin-top: var(--stack, var(--s-4)); } .stack--l { --stack: var(--s-6); } .stack--s { --stack: var(--s-2); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--s-4)); } .grid { display: grid; gap: var(--grid-gap, clamp(1.25rem, 3vw, 2.5rem)); } @media (min-width: 40em) { .grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 56.25em) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* text beside a picture, off the grid: the picture column is the wider one and the two alternate with --flip */ .split { display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: center; } @media (min-width: 56.25em) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split--flip > :first-child { order: 2; } .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split--top { align-items: start; } } /* two pictures and a stamp laid over each other */ .layers { position: relative; isolation: isolate; } .layers > :nth-child(1) { width: 86%; margin-left: auto; } .layers > :nth-child(2) { width: 48%; margin-top: -26%; position: relative; z-index: 2; } .layers__stamp { position: absolute; right: 2%; bottom: 3%; z-index: 3; } .layers--flip > :nth-child(1) { margin-left: 0; } .layers--flip > :nth-child(2) { margin-left: auto; } .layers--flip .layers__stamp { right: auto; left: 2%; } .panel { position: relative; border-radius: var(--r-l); padding: clamp(1.5rem, 4.5vw, 3.5rem); } /* fine rings laid over each other like the page of a passport (CSS only) */ .guilloche { position: relative; } .guilloche::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-radial-gradient(circle at 8% 12%, transparent 0 15px, var(--guilloche) 15px 16px), repeating-radial-gradient(circle at 92% 88%, transparent 0 15px, var(--guilloche) 15px 16px); } .guilloche > * { position: relative; z-index: 1; } /* a strip you swipe or scroll sideways inside its own track (the page itself never scrolls sideways) */ .scroller { display: flex; gap: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: var(--s-2) var(--edge) var(--s-5); margin-inline: calc(var(--edge) * -1); scroll-padding-inline: var(--edge); scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; } .scroller > * { flex: 0 0 min(78vw, 19rem); scroll-snap-align: start; } .scroller:focus-visible { outline-offset: -3px; } .scroller { scrollbar-width: none; } .scroller::-webkit-scrollbar { display: none; } /* no browser scrollbar on a strip (the owner did not like it) */ /* small helpers */ .measure { max-width: 40rem; } .mt-0 { margin-top: 0 !important; } .mt-4 { margin-top: var(--s-4) !important; } .mt-6 { margin-top: var(--s-6) !important; } .mt-8 { margin-top: var(--s-8) !important; } @media (max-width: 56.24em) { .only-l { display: none !important; } } @media (min-width: 56.25em) { .only-s { display: none !important; } } /* stays under the header while the page beside it scrolls (the boarding pass on a destination page) */ @media (min-width: 62.5em) { .sticks { position: sticky; top: calc(var(--header-h) + var(--s-4)); align-self: start; } } /* ---------- 6. Header ---------- */ /* focus rings in the header take the colour of its type, which is the one colour sure to show on what is behind */ /* NO overflow clipping on the header: on iPhones a clip on one axis also cut the other, so the menu panel that hangs below the bar showed during its opening animation and then vanished while the button still said Close (the owner: "the menu will open, show, and go away but it says close still on top"). */ .site-header { position: relative; z-index: 60; height: var(--header-h); margin-bottom: calc(var(--header-h) * -1); --focus: currentColor; --hd-fg: var(--cream); --amp: var(--gold); --hd-count-bg: var(--coral); --hd-count-fg: var(--navy-deep); } .site-header--coral, .site-header--gold { --hd-fg: var(--navy-deep); --amp: var(--navy-deep); --hd-count-bg: var(--navy); --hd-count-fg: var(--cream); } .site-header--cream { --hd-fg: var(--navy); --amp: var(--coral-deep); } /* over a picture the header brings its own dusk: a navy fade that keeps cream type readable on any sky */ .site-header--picture::before { content: ""; position: absolute; inset: 0 0 -70%; z-index: -2; pointer-events: none; background: linear-gradient(to bottom, rgb(var(--deep-rgb) / 0.92) 0, rgb(var(--deep-rgb) / 0.8) 42%, rgb(var(--deep-rgb) / 0) 100%); transition: opacity 0.3s; } .site-header--picture.is-scrolled::before { opacity: 0; } html.js .site-header { position: sticky; top: 0; transition: transform 0.45s var(--ease); } /* (the header no longer slides away going down: it carries the flight line, see 18b) */ .site-header.is-scrolled, html.menu-open .site-header { --hd-fg: var(--cream); --amp: var(--gold); --hd-count-bg: var(--coral); --hd-count-fg: var(--navy-deep); } .site-header__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: min(100% - 2 * var(--gutter), var(--max-wide)); margin-inline: auto; color: var(--hd-fg); } .site-header__bg { position: absolute; inset: 0; z-index: -1; background: var(--navy); border-bottom: 1px solid rgb(var(--gold-rgb) / 0.4); opacity: 0; transition: opacity 0.3s; } .site-header.is-scrolled .site-header__bg { opacity: 1; } /* fixed, not absolute: when the checkbox takes focus the browser scrolls it into view, and that made the page jump by half a screen every time the menu was opened further down the page */ .nav-toggle { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; } .nav-toggle:checked ~ .site-header__bg { opacity: 1; } .nav-toggle:checked ~ .wordmark, .nav-toggle:checked ~ .site-tools { --hd-fg: var(--cream); --amp: var(--gold); --hd-count-bg: var(--coral); --hd-count-fg: var(--navy-deep); color: var(--cream); } .wordmark { font: 500 1.125rem / 1 var(--serif); letter-spacing: -0.015em; text-decoration: none; white-space: nowrap; color: inherit; display: inline-flex; align-items: center; min-height: 2.75rem; } .wordmark em { font-style: italic; font-weight: 400; color: var(--amp); padding-inline: 0.22em; } .site-tools { display: flex; align-items: center; gap: var(--s-1); flex: none; } .cart-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.3rem; font: 500 var(--t-small) / 1 var(--sans); letter-spacing: 0.02em; text-decoration: none; } .cart-link__n { min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: var(--r-pill); display: inline-grid; place-items: center; font: 500 var(--t-micro) / 1 var(--mono); background: var(--hd-count-bg); color: var(--hd-count-fg); } .cart-link__n--none { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; } /* "Your portal": the icon beside the menu button. A full tap target, the colour of the header's words. */ .portal-link { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border-radius: 50%; color: inherit; text-decoration: none; transition: box-shadow var(--dur-1); -webkit-tap-highlight-color: transparent; } .portal-link svg { width: 1.6rem; height: 1.6rem; } /* a ring in the icon's own color: it shows on every ground (a fixed gold vanished on the gold header of the Couch page) */ .portal-link:hover, .portal-link[aria-current="page"] { box-shadow: inset 0 0 0 1.5px currentColor; } .portal-link:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } .nav-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; min-width: 2.75rem; justify-content: flex-end; padding: 0 0 0 0.5rem; cursor: pointer; font: 500 var(--t-mono) / 1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; user-select: none; } .nav-btn__bars { position: relative; width: 1.5rem; height: 0.75rem; } .nav-btn__bars::before, .nav-btn__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease), top 0.3s var(--ease); } .nav-btn__bars::before { top: 0; } .nav-btn__bars::after { top: calc(100% - 1.5px); } .nav-btn__close { display: none; } .nav-toggle:checked ~ .site-tools .nav-btn__open { display: none; } .nav-toggle:checked ~ .site-tools .nav-btn__close { display: inline; } .nav-toggle:checked ~ .site-tools .nav-btn__bars::before { top: calc(50% - 0.75px); transform: rotate(45deg); } .nav-toggle:checked ~ .site-tools .nav-btn__bars::after { top: calc(50% - 0.75px); transform: rotate(-45deg); } .nav-toggle:focus-visible ~ .site-tools .nav-btn { outline: 3px solid currentColor; outline-offset: 3px; border-radius: var(--r-xs); } /* the phone menu: a navy page of the passport that opens under the bar, with or without JavaScript */ .site-nav { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 59; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5) var(--gutter) var(--s-8); background: var(--navy); color: var(--cream); background-image: repeating-radial-gradient(circle at 100% 100%, transparent 0 15px, rgb(var(--gold-rgb) / 0.1) 15px 16px); } .nav-toggle:checked ~ .site-nav { display: block; animation: nav-in 0.4s var(--ease) both; } @keyframes nav-in { from { opacity: 0; } to { opacity: 1; } } .site-nav__list { counter-reset: nav; } .site-nav__list a { counter-increment: nav; display: flex; align-items: baseline; gap: var(--s-4); padding: 0.85rem 0; border-bottom: 1px solid rgb(var(--cream-rgb) / 0.16); font: 400 clamp(1.85rem, 8.5vw, 2.6rem) / 1.1 var(--serif); letter-spacing: -0.02em; text-decoration: none; } .site-nav__list a::before { content: counter(nav, decimal-leading-zero); font: 500 var(--t-mono) / 1 var(--mono); letter-spacing: 0.14em; color: var(--gold); } .site-nav__list a[aria-current] { font-style: italic; color: var(--coral-light); } .site-nav__more { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-5); } .site-nav__more a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 500 var(--t-mono) / 1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--gold); } /* While the phone menu is open, the bar and its panel are pinned to the SCREEN (fixed), so nothing the page does can move or hide them: not its scroll position, not a browser toolbar sliding in. The page itself is NOT frozen with overflow:hidden on any more: on phones that can pull a sticky bar (and the menu hanging from it) off the screen, which looks like the menu closing by itself (the owner, twice: "the mobile menu keeps closing"). The header takes no room in the layout (negative bottom margin), so switching it to fixed moves nothing. */ html.menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; } /* the narrowest phones: the bars alone say Menu (the word stays for screen readers) */ /* a phone with the shop on: the bar holds the wordmark, the cart, the portal icon and the menu button. Under 400px the cart keeps its count and lets its word go (the link is still named "Cart, n items" for a screen reader), so the menu button stays on the screen */ @media (max-width: 24.99em) { .cart-link__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cart-link { padding: 0 0.1rem; } } @media (max-width: 22.49em) { .wordmark { font-size: 1.0625rem; } .nav-btn__open, .nav-btn__close { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (min-width: 30em) { .wordmark { font-size: 1.25rem; } .site-tools { gap: var(--s-2); } .cart-link { padding: 0 0.5rem; } .nav-btn { padding-left: 0.75rem; gap: 0.6rem; } } @media (min-width: 62.5em) { .nav-toggle, .nav-btn, .site-nav__more { display: none; } .wordmark { font-size: 1.45rem; } .site-nav, .nav-toggle:checked ~ .site-nav { display: block; position: static; height: auto; overflow: visible; padding: 0; background: none; color: inherit; animation: none; margin-left: auto; } .site-nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); } .site-nav__list a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; font: 500 var(--t-small) / 1 var(--sans); letter-spacing: 0.03em; } .site-nav__list a::before { content: none; } .site-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 1.5px; background: var(--amp); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .site-nav__list a:hover::after, .site-nav__list a:focus-visible::after, .site-nav__list a[aria-current]::after { transform: scaleX(1); } .site-nav__list a[aria-current] { font-style: normal; color: inherit; } .site-tools { margin-left: clamp(0.5rem, 1.5vw, 1.5rem); } html.menu-open { overflow: visible; } } /* ---------- 7. Flash messages ---------- */ .flashes { position: relative; z-index: 61; background: var(--navy-deep); padding: var(--s-3) 0; } .flashes__in { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: grid; gap: var(--s-2); } /* ---------- 8. Footer ---------- */ .site-footer { position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 6rem) 0 var(--s-6); } .site-footer__top { display: grid; gap: var(--s-7); } .site-footer__mark { font: 400 clamp(2.6rem, 9vw, 6.5rem) / 0.95 var(--serif); letter-spacing: -0.035em; color: var(--cream); text-decoration: none; display: inline-block; } .site-footer__mark em { font-style: italic; font-weight: 300; color: var(--gold); } .site-footer__line { max-width: 30rem; margin-top: var(--s-4); color: var(--fg-soft); } .site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--rule); } /* no list bullets in the footer: they hung outside the columns and touched the sides of a phone screen */ .site-footer__cols ul { list-style: none; margin: 0; padding: 0; } /* on a phone the third list (the five policies, with their long names) takes the whole width, so no name breaks in two */ .site-footer__cols > div:nth-child(3) { grid-column: 1 / -1; } .site-footer__cols h2 { font: 500 var(--t-mono) / 1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-2); } .site-footer__cols a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 calc(100% - 0.6rem) / 0 1px no-repeat; transition: background-size 0.35s var(--ease); } .site-footer__cols a:hover, .site-footer__cols a:focus-visible { background-size: 100% 1px; } .site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px dashed var(--rule-strong); font: 400 var(--t-mono) / 1.6 var(--mono); letter-spacing: 0.08em; color: var(--fg-soft); } .site-footer__base strong { font-weight: 500; color: var(--cream); } .site-footer__leave, .news-leave { font: 400 var(--t-small) / 1.5 var(--sans); } .site-footer__leave a, .news-leave a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong); } @media (min-width: 56.25em) { .site-footer__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-footer__cols > div:nth-child(3) { grid-column: auto; } } /* the news sign-up (footer and home) */ .newsform { display: grid; gap: var(--s-3); max-width: 34rem; } .newsform__row { display: grid; gap: var(--s-2); } .newsform__trap { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; } @media (min-width: 30em) { .newsform__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } } /* ---------- 9. Buttons and links ---------- */ .arrow { display: inline-block; flex: none; width: 1.25em; height: 0.75em; transition: transform 0.35s var(--ease); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7em; min-height: 3rem; padding: 0.6rem 1.6rem; border: 1.5px solid transparent; border-radius: var(--r-pill); font: 500 1rem / 1.2 var(--sans); letter-spacing: 0.01em; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2) var(--ease), translate var(--dur-2) var(--ease); -webkit-tap-highlight-color: transparent; } .btn--primary { background: var(--btn-bg); color: var(--btn-fg); } .btn--primary:hover { background: var(--btn-bg-hover); translate: 0 -2px; box-shadow: 0 10px 24px rgb(var(--deep-rgb) / 0.25); } .btn--secondary { background: transparent; color: var(--btn2); border-color: var(--btn2); } .btn--secondary:hover { background: var(--btn2); color: var(--btn2-hover-fg); } .btn--quiet { min-height: 2.75rem; padding: 0.4rem 0; border: 0; border-radius: 0; color: var(--head); background: linear-gradient(var(--link-line), var(--link-line)) 0 calc(100% - 0.45rem) / 100% 1.5px no-repeat; } .btn--quiet:hover { background-size: 100% 3px; } .btn:hover .arrow, a:hover > .arrow, .card:hover .arrow { transform: translateX(0.3em); } .btn:active { translate: 0 0; } .btn--s { min-height: 2.75rem; padding: 0.45rem 1.2rem; font-size: var(--t-small); } .btn--l { min-height: 3.5rem; padding: 0.8rem 2.1rem; font-size: 1.0625rem; } .btn--full { display: flex; width: 100%; } .btn[disabled], .btn.is-disabled { opacity: 0.5; pointer-events: none; } /* ---------- 10. Stamps, tags, badges ---------- */ /* the round stamp: a dashed ring, words around it, one large figure in the middle, set slightly crooked */ .stamp { display: inline-block; flex: none; width: var(--stamp-size, 8rem); aspect-ratio: 1; color: var(--stamp); rotate: var(--tilt, -8deg); border-radius: 50%; text-decoration: none; } .stamp svg { width: 100%; height: 100%; overflow: visible; } .stamp__ring { fill: none; stroke: currentColor; stroke-width: 2.5; } .stamp__ring--dash { stroke-width: 3; stroke-dasharray: 1.5 7.4; stroke-linecap: round; } .stamp__around { font-family: var(--mono); font-weight: 500; letter-spacing: 0.16em; fill: currentColor; } .stamp__big { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; fill: currentColor; } .stamp__small { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; fill: currentColor; } .stamp--s { --stamp-size: 6rem; } .stamp--m { --stamp-size: 8rem; } .stamp--l { --stamp-size: 10.5rem; } .stamp--xl { --stamp-size: clamp(10.5rem, 20vw, 14rem); } .stamp--coral { color: var(--coral); } .stamp--gold { color: var(--gold); } .stamp--navy { color: var(--navy); } .stamp--cream { color: var(--cream); } /* a seal: the stamp on a disc of its own, for the corner of a picture */ .stamp[class*="stamp--seal"] { box-shadow: var(--sh-2); } .stamp--seal-navy { background: var(--navy); color: var(--gold); } .stamp--seal-coral { background: var(--coral); color: var(--navy-deep); } .stamp--seal-gold { background: var(--gold); color: var(--navy-deep); } .stamp--seal-paper { background: var(--paper); color: var(--coral-deep); } a.stamp { transition: rotate 0.6s var(--ease-back), scale 0.6s var(--ease-back); } a.stamp:hover { rotate: 0deg; scale: 1.05; } /* the square entry stamp with a date */ .datestamp { display: inline-grid; justify-items: center; gap: 0.1rem; min-width: 4.25rem; padding: 0.45rem 0.7rem 0.4rem; border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 3px; border-radius: 3px; color: var(--stamp); rotate: var(--tilt, -4deg); font-family: var(--mono); font-weight: 500; font-size: var(--t-micro); letter-spacing: 0.18em; line-height: 1.3; text-transform: uppercase; text-align: center; } .datestamp__day { font: 500 2rem / 0.95 var(--serif); letter-spacing: -0.02em; } .datestamp--paper { background: var(--paper); color: var(--coral-deep); outline-color: var(--paper); box-shadow: var(--sh-1); } .datestamp--navy { background: var(--navy); color: var(--gold); outline-color: var(--navy); box-shadow: var(--sh-1); } .datestamp--gold { background: var(--gold); color: var(--navy-deep); outline-color: var(--gold); box-shadow: var(--sh-1); } .datestamp--coral { background: var(--coral); color: var(--navy-deep); outline-color: var(--coral); box-shadow: var(--sh-1); } /* the luggage tag: a label with a point and a punched hole */ .tag { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.35rem 0.9rem 0.35rem 1.9rem; background: var(--tag-bg, var(--paper)); color: var(--tag-fg, var(--navy)); font: 500 var(--t-mono) / 1.25 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; rotate: var(--tilt, 0deg); clip-path: polygon(0.8rem 0, 100% 0, 100% 100%, 0.8rem 100%, 0 50%); -webkit-mask: radial-gradient(circle at 1.1rem 50%, transparent 0.2rem, #000 0.24rem); mask: radial-gradient(circle at 1.1rem 50%, transparent 0.2rem, #000 0.24rem); } .tag--paper { --tag-bg: var(--paper); --tag-fg: var(--navy); } .tag--coral { --tag-bg: var(--coral); --tag-fg: var(--navy-deep); } .tag--gold { --tag-bg: var(--gold); --tag-fg: var(--navy-deep); } .tag--navy { --tag-bg: var(--navy); --tag-fg: var(--cream); } .tag--l { min-height: 2.5rem; padding: 0.5rem 1.2rem 0.5rem 2.2rem; font-size: 0.8125rem; } /* a tag that is a link: tall enough to tap; its cut shape hides an outline, so focus turns its colours round */ a.tag { min-height: 2.75rem; transition: translate var(--dur-2) var(--ease); } a.tag:hover { translate: 0 -2px; } a.tag:focus-visible { outline: none; background: var(--tag-fg, var(--navy)); color: var(--tag-bg, var(--paper)); } /* availability: Available / 3 left / 1 left / Sold out / Registration closed */ .badge { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.3rem 0.75rem; border-radius: var(--r-pill); background: var(--paper); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 var(--t-micro) / 1.35 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .badge::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--gold); } .badge--few { background: var(--gold); color: var(--navy-deep); box-shadow: none; } .badge--few::before { background: var(--navy-deep); } .badge--last { background: var(--coral); color: var(--navy-deep); box-shadow: none; } .badge--last::before { background: var(--navy-deep); animation: pulse-dot 1.6s ease-in-out infinite; } .badge--full { background: var(--navy); color: var(--cream); box-shadow: inset 0 0 0 1px rgb(var(--cream-rgb) / 0.35); } .badge--full::before { background: var(--coral); } .badge--closed { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px currentColor; } .badge--closed::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; } @keyframes pulse-dot { 50% { transform: scale(1.7); opacity: 0.45; } } /* ---------- 11. Tickets, the boarding pass, stubs ---------- */ /* a paper ticket in two parts with a perforation and two punched notches between them. The notches are cut with a mask, so whatever is behind (a colour, a picture) shows through. */ .ticket { --notch: 0.7rem; display: grid; filter: drop-shadow(0 12px 24px rgb(var(--deep-rgb) / 0.18)); color: var(--ink); } .ticket__main, .ticket__stub { position: relative; background: var(--paper); padding: clamp(1.25rem, 3.5vw, 2rem); min-width: 0; } .ticket__main { border-radius: var(--r-m) var(--r-m) 0 0; -webkit-mask: radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat; } .ticket__stub { border-radius: 0 0 var(--r-m) var(--r-m); -webkit-mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat; } .ticket__stub::before { content: ""; position: absolute; top: 0; left: calc(var(--notch) + 0.4rem); right: calc(var(--notch) + 0.4rem); border-top: 2px dashed var(--line-strong); opacity: 0.6; } .ticket__main:only-child { border-radius: var(--r-m); -webkit-mask: none; mask: none; } @media (min-width: 48em) { .ticket--side { grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem); } .ticket--side > .ticket__main { border-radius: var(--r-m) 0 0 var(--r-m); -webkit-mask: radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat; } .ticket--side > .ticket__stub { border-radius: 0 var(--r-m) var(--r-m) 0; -webkit-mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat; } .ticket--side > .ticket__stub::before { top: calc(var(--notch) + 0.4rem); bottom: calc(var(--notch) + 0.4rem); left: 0; right: auto; border-top: 0; border-left: 2px dashed var(--line-strong); } } /* a barcode strip drawn with a gradient */ .barcode { height: 2.75rem; color: var(--navy); opacity: 0.9; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px, currentColor 5px 6px, transparent 6px 8px, currentColor 8px 12px, transparent 12px 14px, currentColor 14px 15px, transparent 15px 19px, currentColor 19px 21px, transparent 21px 22px, currentColor 22px 23px, transparent 23px 27px); } /* the boarding pass: quick facts set like a pass */ .pass__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); margin: calc(clamp(1.25rem, 3.5vw, 2rem) * -1); margin-bottom: clamp(1.1rem, 3vw, 1.6rem); padding: 0.7rem clamp(1.25rem, 3.5vw, 2rem); background: var(--navy); color: var(--cream); border-radius: var(--r-m) var(--r-m) 0 0; } .pass__kicker { font: 500 var(--t-mono) / 1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .pass__mark { font: 500 1rem / 1.2 var(--serif); letter-spacing: -0.01em; } .pass__mark em { font-style: italic; color: var(--gold); } .pass__title { font: 400 var(--t-m) / 1.05 var(--serif); letter-spacing: -0.02em; color: var(--navy); margin-bottom: var(--s-4); } .pass__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); } .pass__fact dt { font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .pass__fact dd { margin-top: 0.15rem; font: 400 1.25rem / 1.2 var(--serif); letter-spacing: -0.01em; color: var(--navy); overflow-wrap: anywhere; } .pass__fact--wide { grid-column: 1 / -1; } .pass__fact--wide dd { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); } .pass__fact--mono dd { font: 500 var(--t-small) / 1.4 var(--mono); letter-spacing: 0.06em; } .pass__stub { display: grid; align-content: space-between; gap: var(--s-4); } .pass__code { font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .pass--slim .pass__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pass--slim .pass__fact dd { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); } @media (min-width: 48em) { .pass__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pass--slim .pass__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ticket--side .pass__head { border-radius: var(--r-m) 0 0 0; } } /* a ticket stub: one day of a schedule, one stop of a journey */ .stub { --scallop: 5px; position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: 1.4rem 1.6rem 1.5rem; background: var(--stub-bg, var(--paper)); color: var(--stub-fg, var(--ink)); -webkit-mask: radial-gradient(var(--scallop) at 0 9px, transparent 97%, #000) 0 0 / 51% 18px repeat-y, radial-gradient(var(--scallop) at 100% 9px, transparent 97%, #000) 100% 0 / 51% 18px repeat-y; mask: radial-gradient(var(--scallop) at 0 9px, transparent 97%, #000) 0 0 / 51% 18px repeat-y, radial-gradient(var(--scallop) at 100% 9px, transparent 97%, #000) 100% 0 / 51% 18px repeat-y; } .stub__label { display: flex; justify-content: space-between; gap: var(--s-3); padding-bottom: 0.6rem; border-bottom: 1.5px dashed var(--stub-rule, var(--line-strong)); font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--stub-label, var(--coral-deep)); } .stub__title { font: 400 var(--t-s) / 1.15 var(--serif); letter-spacing: -0.015em; color: var(--stub-head, var(--navy)); } .stub__meta { font: 500 var(--t-mono) / 1.5 var(--mono); letter-spacing: 0.06em; color: var(--stub-fg, var(--ink)); } .stub__text { font-size: var(--t-small); line-height: 1.55; color: var(--stub-soft, var(--ink-soft)); } .stub--navy { --stub-bg: var(--navy); --stub-fg: var(--cream); --stub-head: var(--cream); --stub-soft: rgb(var(--cream-rgb) / 0.82); --stub-label: var(--gold); --stub-rule: rgb(var(--cream-rgb) / 0.4); } .stub--coral { --stub-bg: var(--coral); --stub-fg: var(--navy-deep); --stub-head: var(--navy-deep); --stub-soft: var(--navy-deep); --stub-label: var(--navy-deep); --stub-rule: rgb(var(--deep-rgb) / 0.5); } .stub--gold { --stub-bg: var(--gold); --stub-fg: var(--navy-deep); --stub-head: var(--navy-deep); --stub-soft: var(--navy-deep); --stub-label: var(--navy-deep); --stub-rule: rgb(var(--deep-rgb) / 0.5); } .stub__n { font: italic 300 3.5rem / 0.9 var(--serif); letter-spacing: -0.04em; color: var(--stub-label, var(--coral-deep)); } /* ---------- 12. Event cards ---------- */ .card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; } .card__pic { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-m) var(--r-m) 0 0; background: var(--navy-deep); } .card__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .card:hover .card__pic img, .card:focus-within .card__pic img { transform: scale(1.06); } .card__date { position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2; } .card__body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 1.5rem 1.4rem 1.6rem; border-radius: 0 0 var(--r-m) var(--r-m); } .card__title { font-size: var(--t-m); } .card__title a { text-decoration: none; } .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; } .card__title a:focus-visible { outline: none; } .card:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r-m); } .card__place { font-size: var(--t-lead); line-height: 1.3; } .card__theme { color: var(--fg-soft); } .card__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; width: 100%; margin-top: 0.35rem; padding-top: 0.9rem; border-top: 1px dashed var(--rule-strong); } .card__left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: var(--t-small); } .card__go { display: inline-flex; align-items: center; gap: 0.7em; margin-top: auto; padding-top: 0.6rem; font-weight: 500; } .card__n { position: absolute; z-index: -1; top: -0.42em; right: 0; font: italic 300 clamp(7rem, 22vw, 15rem) / 1 var(--serif); letter-spacing: -0.05em; color: var(--numeral); pointer-events: none; user-select: none; } .card--tall { box-shadow: var(--sh-1); border-radius: var(--r-m); transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease); } .card--tall:hover { translate: 0 -6px; box-shadow: var(--sh-3); } /* the large feature: the picture runs to the edge of the screen and the colour block overlaps it */ .card--wide .card__pic { aspect-ratio: 5 / 4; margin-inline: calc(var(--edge) * -1); border-radius: 0; } /* On a phone every destination card is centred: the panel sits in the middle with the same space on both sides. The owner asked for this (2026-10-03): they were pushed alternately left and right ("Jamaica is a little to the right"). */ .card--wide .card__body, .card--wide.card--flip .card__body { margin: -3.5rem 0.625rem 0; border-radius: var(--r-m); padding: 1.75rem 1.5rem 1.9rem; box-shadow: var(--sh-2); gap: 0.8rem; } .card--wide .card__title { font-size: var(--t-l); } .card--wide .card__date { top: var(--s-4); left: 0; } .card--wide.card--flip .card__date { left: auto; right: 0; } .card--wide .card__n { top: -0.55em; right: 0; } @media (min-width: 56.25em) { .card--wide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; } .card--wide .card__pic { grid-column: 1 / span 8; grid-row: 1; aspect-ratio: 16 / 10; margin: 0 0 0 calc(var(--edge) * -1); border-radius: 0 var(--r-l) var(--r-l) 0; } .card--wide .card__body, .card--wide.card--flip .card__body { grid-column: 8 / span 5; grid-row: 1; z-index: 2; margin: 0 0 -3.5rem; padding: clamp(2rem, 3vw, 3rem); } .card--wide.card--flip .card__pic { grid-column: 5 / span 8; margin: 0 calc(var(--edge) * -1) 0 0; border-radius: var(--r-l) 0 0 var(--r-l); } .card--wide.card--flip .card__body { grid-column: 1 / span 5; } .card--wide .card__date { top: var(--s-6); left: var(--s-6); } .card--wide.card--flip .card__date { left: auto; right: var(--s-6); } .card--wide .card__n { top: -0.5em; right: auto; left: 54%; } .card--wide.card--flip .card__n { left: auto; right: 54%; } } /* the compact row (Couch sessions): a small ticket */ .card--row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3) var(--s-4); padding: 1rem 1.1rem; border-radius: var(--r-m); background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); transition: translate 0.4s var(--ease), box-shadow 0.4s var(--ease); } .card--row:hover { translate: 0 -3px; box-shadow: var(--sh-2); } /* the ring is drawn inside the paper, so it shows on every ground */ .card--row:focus-within { outline-offset: -5px; } .card--row .card__date { position: static; } .card--row .card__title { font-size: var(--t-s); line-height: 1.15; } .card--row .card__when { margin-top: 0.25rem; font: 500 var(--t-mono) / 1.5 var(--mono); letter-spacing: 0.06em; color: var(--ink-soft); } /* price | availability | arrow in ONE line on a phone: the arrow sits at the end, beside "The waitlist is open", instead of dropping to a row of its own (the owner saw it, 2026-10-03) */ .card--row .card__side { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line-strong); } .card--row .card__side > .card__go { justify-self: end; margin: 0; padding: 0; } @media (min-width: 48em) { .card--row { grid-template-columns: auto minmax(0, 1fr) auto; padding: 1.1rem 1.5rem; gap: var(--s-5); } .card--row .card__side { grid-column: auto; display: flex; align-items: center; padding: 0 0 0 var(--s-5); border-top: 0; border-left: 1px dashed var(--line-strong); flex-wrap: nowrap; gap: var(--s-5); } } /* ---------- 13. Accordion ---------- */ .accordion { border-top: 1px solid var(--rule-strong); } .accordion__item { border-bottom: 1px solid var(--rule-strong); } .accordion__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.5rem; padding: 1rem 0; cursor: pointer; list-style: none; font: 400 var(--t-s) / 1.25 var(--serif); letter-spacing: -0.01em; color: var(--head); } .accordion__item > summary::-webkit-details-marker { display: none; } .accordion__mark { position: relative; flex: none; width: 2rem; height: 2rem; border: 1.5px solid currentColor; border-radius: 50%; transition: rotate 0.45s var(--ease), background-color var(--dur-1); } .accordion__mark::before, .accordion__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 1.5px; margin: -0.75px 0 0 -0.375rem; background: currentColor; transition: transform 0.45s var(--ease); } .accordion__mark::after { transform: rotate(90deg); } .accordion__item[open] .accordion__mark { rotate: 180deg; } .accordion__item[open] .accordion__mark::after { transform: rotate(0deg); } .accordion__item > summary:hover .accordion__mark { background: var(--rule); } .accordion__body { padding: 0 2.75rem 1.5rem 0; color: var(--fg-soft); max-width: 46rem; } .accordion__body > * + * { margin-top: 0.8em; } .accordion__item[open] .accordion__body { animation: acc-in 0.5s var(--ease) both; } @keyframes acc-in { from { opacity: 0; transform: translateY(-0.4rem); } to { opacity: 1; transform: none; } } /* ---------- 14. Forms ---------- */ /* align-content: start keeps label, box and hint at their own height at the top of the cell: without it a field beside one that has a hint was stretched, so the two boxes did not line up (the owner saw it on the waitlist form) */ .field { display: grid; gap: 0.4rem; min-width: 0; align-content: start; } .field__label { font: 500 var(--t-small) / 1.35 var(--sans); color: var(--fg); } .field__opt { margin-left: 0.5em; font: 400 var(--t-micro) / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-soft); } .field__hint { font-size: var(--t-small); line-height: 1.45; color: var(--fg-soft); } .field__error { display: flex; gap: 0.5em; align-items: baseline; font: 500 var(--t-small) / 1.4 var(--sans); color: var(--error); } .field__error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; border: 1.5px solid currentColor; font: 500 0.75em / 1 var(--mono); } .input, .select, .textarea { display: block; width: 100%; min-height: 3rem; padding: 0.7rem 0.95rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-s); background: var(--paper); color: var(--ink); font: 400 1rem / 1.4 var(--sans); transition: border-color var(--dur-1), box-shadow var(--dur-1); appearance: none; -webkit-appearance: none; } .input::placeholder, .textarea::placeholder { color: #7A7468; opacity: 1; } .input:hover, .select:hover, .textarea:hover { border-color: var(--navy); } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--navy); border-radius: var(--r-s); } .textarea { min-height: 8rem; resize: vertical; } .select { padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2317233C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem; } .field--error .input, .field--error .select, .field--error .textarea { border-color: var(--coral-deep); box-shadow: 0 0 0 3px rgb(var(--coral-rgb) / 0.28); } .check { display: flex; align-items: flex-start; gap: 0.8rem; min-height: 2.75rem; padding: 0.55rem 0; cursor: pointer; line-height: 1.45; } .check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--paper) center / 1rem no-repeat; appearance: none; -webkit-appearance: none; cursor: pointer; transition: background-color var(--dur-1), border-color var(--dur-1); } .check input:checked { background-color: var(--navy); border-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23F7F2E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .on-navy .check input:checked, .on-deep .check input:checked { background-color: var(--coral); border-color: var(--coral); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230F1830' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* radio cards: the whole card is the radio button */ .choices { display: grid; gap: var(--s-3); } .choices__legend { font: 500 var(--t-small) / 1.35 var(--sans); color: var(--fg); margin-bottom: 0.5rem; } .choice { position: relative; display: block; } .choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .choice__box { position: relative; display: grid; gap: 0.3rem; height: 100%; min-height: 3.5rem; padding: 1rem 1.1rem 1rem 3.1rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-m); background: var(--paper); color: var(--ink); transition: border-color var(--dur-1), box-shadow var(--dur-2) var(--ease), translate var(--dur-2) var(--ease); } .choice__box::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1.35rem; height: 1.35rem; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--paper); transition: border-color var(--dur-1), box-shadow var(--dur-1); } .choice input:hover + .choice__box { border-color: var(--navy); } .choice input:checked + .choice__box { border-color: var(--navy); box-shadow: 0 0 0 1.5px var(--navy), var(--sh-2); translate: 0 -2px; } .choice input:checked + .choice__box::before { border-color: var(--navy); box-shadow: inset 0 0 0 0.28rem var(--paper), inset 0 0 0 1rem var(--coral); } .choice input:focus-visible + .choice__box { outline: 3px solid var(--focus); outline-offset: 3px; } .choice input:disabled { cursor: not-allowed; } .choice input:disabled + .choice__box { opacity: 0.6; background: var(--cream); } .choice__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; } .choice__label { font: 400 var(--t-s) / 1.2 var(--serif); letter-spacing: -0.01em; color: var(--navy); } .choice__price { font: 500 var(--t-small) / 1.3 var(--mono); letter-spacing: 0.04em; color: var(--navy); white-space: nowrap; } .choice__note { font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); } .choice__badge { margin-top: 0.25rem; justify-self: start; } @media (min-width: 40em) { .choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .file { display: block; width: 100%; min-height: 3rem; padding: 0.45rem; border: 1.5px dashed var(--line-strong); border-radius: var(--r-s); background: var(--paper); color: var(--ink); font: 400 var(--t-small) / 1.4 var(--sans); cursor: pointer; } .file::file-selector-button { min-height: 2.25rem; margin-right: 0.9rem; padding: 0.35rem 1rem; border: 1.5px solid var(--navy); border-radius: var(--r-pill); background: transparent; color: var(--navy); font: 500 var(--t-small) / 1 var(--sans); cursor: pointer; } .file:hover::file-selector-button { background: var(--navy); color: var(--cream); } .form-grid { display: grid; gap: var(--s-5) var(--s-4); align-items: start; } @media (min-width: 40em) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid > .field--full, .form-grid > .choices, .form-grid > .notice { grid-column: 1 / -1; } } /* Side by side, a label that runs onto a second line must not push its typing area below its neighbour's: everything in the grid takes two of its lines; the labels of a row share the first (each sitting on its own typing area), the typing areas the second. */ .field__body { display: grid; gap: 0.4rem; min-width: 0; align-content: start; } @supports (grid-template-rows: subgrid) { .form-grid > * { grid-row: span 2; } .form-grid > .field--rows { grid-template-rows: subgrid; } .form-grid > .field--rows > .field__label { align-self: end; } } /* ---------- 15. Notices, empty states, rows, lists ---------- */ .notice { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.8rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-s); background: var(--paper); color: var(--ink); font-size: var(--t-small); line-height: 1.5; } .notice__label { flex: none; margin-top: 0.05rem; padding: 0.2rem 0.5rem; border-radius: 3px; background: var(--gold); color: var(--navy-deep); font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; } .notice__text strong { display: block; color: var(--navy); } .notice--info .notice__label, .notice--ok .notice__label { background: var(--navy); color: var(--cream); } .notice--bad { border-color: var(--coral-deep); border-style: solid; } .notice--bad .notice__label { background: var(--coral); color: var(--navy-deep); } .notice ul { margin-top: 0.3rem; padding-left: 1.1rem; } .empty { display: grid; justify-items: center; gap: var(--s-3); padding: clamp(2.5rem, 7vw, 4.5rem) var(--s-5); border: 1.5px dashed var(--rule-strong); border-radius: var(--r-l); text-align: center; } .empty__title { font: 400 var(--t-m) / 1.1 var(--serif); letter-spacing: -0.02em; color: var(--head); } .empty__text { max-width: 30rem; color: var(--fg-soft); } .empty .stamp { margin-bottom: var(--s-2); opacity: 0.85; } /* label and value pairs with a dotted leader, like the lines of a ticket */ .rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: 0.7rem 0; border-bottom: 1px dotted var(--rule-strong); } .rows dt { color: var(--fg-soft); } .rows dd { text-align: right; font-weight: 500; } .rows .rows__total { border-bottom: 0; border-top: 1.5px solid var(--head); margin-top: -1px; } .rows .rows__total dt, .rows .rows__total dd { font: 400 var(--t-s) / 1.2 var(--serif); color: var(--head); } .ticks > li, .crosses > li { position: relative; padding: 0.55rem 0 0.55rem 2.1rem; border-bottom: 1px solid var(--rule); } .ticks > li::before, .crosses > li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 1.1rem; height: 0.55rem; } .ticks > li::before { border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transform-origin: 30% 60%; height: 0.45rem; width: 0.95rem; } .crosses > li::before { top: 1.25rem; height: 0; border-top: 2px solid var(--fg-soft); width: 0.9rem; } /* ---------- 16. Section opener, pictures, money, steps ---------- */ .opener { position: relative; isolation: isolate; display: grid; gap: var(--s-4); max-width: 62rem; } .opener .lead { max-width: 40rem; color: var(--fg-soft); } .opener--center { margin-inline: auto; text-align: center; justify-items: center; } .opener__n { position: absolute; z-index: -1; top: -0.3em; right: 0; font: italic 300 clamp(8rem, 26vw, 20rem) / 0.8 var(--serif); letter-spacing: -0.05em; color: var(--numeral); pointer-events: none; user-select: none; } .opener--center .opener__n { right: 50%; translate: 50% 0; } .opener-band { position: relative; } /* a framed picture: a gold frame set off from it, a colour block behind, a note on the corner */ .pic { position: relative; isolation: isolate; margin: 0; rotate: var(--tilt, 0deg); } .pic__img { position: relative; overflow: hidden; border-radius: var(--pic-r, var(--r-s)); aspect-ratio: var(--ratio, auto); background: var(--navy-deep); box-shadow: var(--sh-2); } .pic__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); } .pic:hover .pic__img img { transform: scale(1.04); } .pic[class*="pic--frame"]::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1.5px solid var(--frame, var(--gold)); border-radius: var(--pic-r, var(--r-s)); translate: 0.8rem 0.8rem; pointer-events: none; } .pic--frame-gold { --frame: var(--gold); } .pic--frame-coral { --frame: var(--coral); } .pic--frame-navy { --frame: var(--navy); } .pic--frame-cream { --frame: var(--cream); } .pic[class*="pic--block"]::before { content: ""; position: absolute; z-index: -2; inset: 14% -0.9rem -0.9rem 18%; background: var(--block, var(--coral)); border-radius: var(--pic-r, var(--r-s)); } .pic--block-coral { --block: var(--coral); } .pic--block-gold { --block: var(--gold); } .pic--block-navy { --block: var(--navy); } .pic--block-cream { --block: var(--cream); } .pic--flip[class*="pic--block"]::before { inset: 14% 18% -0.9rem -0.9rem; } .pic--flip[class*="pic--frame"]::after { translate: -0.8rem 0.8rem; } .pic__cap { position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 2; max-width: calc(100% - 1.5rem); padding: 0.4rem 0.7rem; border-radius: 3px; background: var(--paper); color: var(--navy); font: 500 var(--t-micro) / 1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: var(--sh-1); rotate: -1.5deg; } .pic__corner { position: absolute; z-index: 3; top: -1.25rem; right: -0.5rem; } .pic--flip .pic__corner { right: auto; left: -0.5rem; } @media (min-width: 56.25em) { .pic[class*="pic--frame"]::after { translate: 1.25rem 1.25rem; } .pic--flip[class*="pic--frame"]::after { translate: -1.25rem 1.25rem; } .pic[class*="pic--block"]::before { inset: 14% -2rem -2rem 18%; } .pic--flip[class*="pic--block"]::before { inset: 14% 18% -2rem -2rem; } .pic__corner { top: -2rem; right: -2rem; } .pic--flip .pic__corner { left: -2rem; } } /* a money figure */ .price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.1em 0.5em; color: var(--head); line-height: 1; } .price__amt { font: 400 var(--price-size, 2rem) / 1 var(--serif); letter-spacing: -0.025em; font-variant-numeric: lining-nums; white-space: nowrap; } .price__cur { display: inline-block; font-size: 0.5em; translate: 0 -0.72em; margin-right: 0.08em; letter-spacing: 0; } .price__pre, .price__suf { font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); } .price--s { --price-size: 1.375rem; } .price--m { --price-size: 2rem; } .price--l { --price-size: 3rem; } .price--xl { --price-size: clamp(3.25rem, 2rem + 5vw, 5rem); } .price--strike .price__amt { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: 0.65; } /* the step indicator: numbered stops on a dotted line */ .stepper { display: flex; counter-reset: step; } .stepper__item { position: relative; flex: 1 1 0; min-width: 0; padding-inline: 0.25rem; font: 500 var(--t-micro) / 1.35 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-soft); } .stepper__link { display: grid; justify-items: center; align-content: start; gap: 0.5rem; min-height: 2.75rem; text-align: center; color: inherit; text-decoration: none; } a.stepper__link:hover .stepper__label { text-decoration: underline; text-underline-offset: 0.25em; } .stepper__item + .stepper__item::before { content: ""; position: absolute; top: 1.05rem; right: calc(50% + 1.4rem); width: calc(100% - 2.8rem); border-top: 2px dotted var(--rule-strong); } .stepper__n { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--rule-strong); border-radius: 50%; font: 500 var(--t-mono) / 1 var(--mono); letter-spacing: 0; color: var(--fg); } .stepper__item.is-done .stepper__n { background: var(--head); border-color: var(--head); color: var(--ground); } .stepper__item.is-done + .stepper__item::before { border-top-style: solid; border-top-color: var(--head); } .stepper__item.is-current { color: var(--fg); } .stepper__item.is-current .stepper__n { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 0 0 4px rgb(var(--coral-rgb) / 0.25); } .stepper__label { overflow-wrap: anywhere; } @media (max-width: 29.99em) { .stepper__item:not(.is-current) .stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* ---------- 17. The picture hero (pp_hero) ---------- */ /* One picture edge to edge with a slow zoom, the headline rising in, a seal on the corner, and (hero--strip) something that hangs over the lower edge. Contrast decides the shape: coral and gold words need almost solid navy behind them, so the words never lie on the open picture. On a phone the picture fills the top of the screen and melts into navy where the headline starts; on desktop the picture runs edge to edge, its left half sinks into navy for the words and its right half stays clear. */ .hero { --hero-stamp-bottom: 6.5rem; --hero-pic: 40vh; position: relative; z-index: 2; isolation: isolate; display: grid; align-content: start; padding: max(calc(var(--header-h) + var(--s-6)), calc(var(--hero-pic) + 1.25rem)) 0 var(--s-7); background: var(--navy-deep); } @supports (height: 1svh) { .hero { --hero-pic: 40svh; } } .hero--strip { --hero-stamp-bottom: 15.5rem; padding-bottom: 0; } .hero__pic { position: absolute; inset: 0 0 auto; z-index: -2; height: var(--hero-pic); overflow: hidden; } .hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%); animation: hero-zoom 30s var(--ease) both; } .hero__scrim { position: absolute; inset: 0 0 auto; z-index: -1; height: calc(var(--hero-pic) + 1px); background: linear-gradient(to bottom, rgb(var(--deep-rgb) / 0) 0, rgb(var(--deep-rgb) / 0) 76%, rgb(var(--deep-rgb) / 0.55) 91%, var(--navy-deep) 100%); } .hero__in { display: grid; gap: var(--s-4); justify-items: start; } .hero__title { max-width: 8.4em; } .hero__sub { max-width: 35rem; color: rgb(var(--cream-rgb) / 0.94); } .hero__cta { margin-top: var(--s-2); } /* the seal sits across the lower edge of the picture */ .hero__stamp { position: absolute; z-index: 1; top: calc(var(--hero-pic) - 5.75rem); right: var(--gutter); } .hero__stamp .stamp { --stamp-size: 6.5rem; } .hero__note { display: none; } .hero__strip { position: relative; z-index: 3; margin-top: var(--s-7); margin-bottom: -4.5rem; } /* whatever follows a hero with a strip leaves room for the part that hangs over it */ .hero--strip + .section { padding-top: calc(var(--pad, var(--section)) + 4.5rem); } @media (min-width: 56.25em) { .hero { align-content: end; min-height: max(100vh, 44rem); padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-8); } .hero--short { min-height: min(78vh, 46rem); } .hero--strip { padding-bottom: 0; } .hero__pic { inset: 0; height: auto; } .hero__scrim { inset: 0; height: auto; background: linear-gradient(90deg, rgb(var(--deep-rgb) / 0.97) 0, rgb(var(--deep-rgb) / 0.97) 46%, rgb(var(--deep-rgb) / 0.94) 52%, rgb(var(--deep-rgb) / 0.6) 62%, rgb(var(--deep-rgb) / 0.18) 73%, rgb(var(--deep-rgb) / 0) 85%), linear-gradient(to top, rgb(var(--deep-rgb) / 0.6), rgb(var(--deep-rgb) / 0) 32%); } .hero__in { gap: var(--s-5); } /* the words keep to the navy half; the size also follows the height of the screen, so the button stays in view on a low laptop */ .hero__title { max-width: min(8.4em, 50vw - var(--edge)); font-size: clamp(2.75rem, min(1rem + 4.6vw, 11.5vh), 5.75rem); } .hero__sub { max-width: min(35rem, 46vw - var(--edge)); } .hero__stamp { top: auto; bottom: var(--hero-stamp-bottom); right: max(var(--gutter), 7vw); } .hero__stamp .stamp { --stamp-size: clamp(10.5rem, 15vw, 14rem); } /* home: the seal sits above the heads of the group (the people are at the right edge of the picture, in its lower half) */ .hero--seal-high { --hero-stamp-bottom: 62%; } .hero--seal-high .hero__stamp .stamp { --stamp-size: clamp(8.5rem, 11.5vw, 11rem); } /* a little smaller: clear of the dark strip under the menu and of the heads */ .hero__note { display: block; position: absolute; z-index: 1; right: max(var(--gutter), 7vw); bottom: calc(var(--hero-stamp-bottom) - 3.75rem); padding: 0.45rem 0.8rem; border-radius: 3px; background: var(--paper); color: var(--navy); font: 500 var(--t-micro) / 1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; rotate: 2deg; box-shadow: var(--sh-2); } } /* ---------- 18. The drifting band of names ---------- */ .band { position: relative; overflow: hidden; padding-block: clamp(1.25rem, 3.5vw, 2.75rem); user-select: none; } .band__drift { translate: var(--band-x, 0px) 0; will-change: translate; } .band__track { display: flex; width: max-content; animation: band-drift var(--band-dur, 60s) linear infinite; } .band--rev .band__track { animation-direction: reverse; } .band__set { display: flex; align-items: center; flex: none; } .band__word { padding-inline: 0.16em; font: 300 clamp(4.75rem, 17vw, 15rem) / 1.05 var(--serif); letter-spacing: -0.035em; white-space: nowrap; color: var(--head); } .band__word:nth-of-type(even) { font-style: italic; color: var(--accent-display); } .band__sep { flex: none; padding-inline: clamp(0.5rem, 2vw, 1.5rem); font: 500 var(--t-mono) / 1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); white-space: nowrap; } @supports (-webkit-text-stroke: 1px black) { .band__word:nth-of-type(odd) { color: transparent; -webkit-text-stroke: 1.5px var(--head); } } @keyframes band-drift { to { transform: translateX(-50%); } } /* ---------- 18b. The flight line ---------- */ /* A dotted line along the bottom of the header bar; gold dots fill it and a small plane rides its head from left to right as the page is read (site.js sets --p, 0 to 1). It lives INSIDE the header's navy bar, below the menu text, so it can never sit on content (the owner: the old plane "goes through text"). It shows once the page is scrolled and the header has its bar; the header therefore stays in place instead of sliding away. */ .flight { position: absolute; inset: auto 0 0 0; height: 1.25rem; pointer-events: none; display: none; opacity: 0; transition: opacity 0.3s; } html.js .flight { display: block; } .site-header.is-scrolled .flight { opacity: 1; } html.menu-open .site-header .flight { opacity: 0; } .flight__trail { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: radial-gradient(circle at center, var(--gold) 0 1.1px, transparent 1.35px) 0 50% / 9px 3px repeat-x; clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); } .flight__plane { position: absolute; top: 50%; left: calc(var(--p, 0) * (100% - 1.125rem)); width: 1.125rem; height: 1.125rem; margin-top: -0.5625rem; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--gold); } .flight__plane svg { width: 0.95rem; height: 0.95rem; rotate: 90deg; } /* ---------- 19. The route line ---------- */ /* A dotted line drawn by site.js through the [data-route-stop] marks of a .route-wrap, with a small plane at its head. Decoration only: without JavaScript it is simply not there. */ .route-wrap { position: relative; } .route { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: hidden; display: none; } html.js .route.is-ready { display: block; } .route path, .route use { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.1 10; } .route-stop { position: absolute; left: var(--xs, var(--x, 50%)); top: var(--ys, var(--y, 0%)); width: 1px; height: 1px; pointer-events: none; visibility: hidden; } @media (min-width: 56.25em) { .route-stop { left: var(--x, 50%); top: var(--y, 0%); } } .route__plane { position: absolute; left: 0; top: 0; z-index: 1; width: 1.375rem; height: 1.375rem; margin: -0.6875rem 0 0 -0.6875rem; display: none; place-items: center; border-radius: 50%; background: var(--paper); color: var(--navy); box-shadow: var(--sh-2); pointer-events: none; opacity: 0; transition: opacity 0.4s; will-change: transform; } html.js .route__plane.is-ready { display: grid; } .route__plane.is-flying { opacity: 1; } .route__plane svg { width: 0.8rem; height: 0.8rem; rotate: var(--heading, 180deg); transition: rotate 0.25s linear; } @media (min-width: 56.25em) { .route__plane { width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; } .route__plane svg { width: 1.1rem; height: 1.1rem; } } /* ---------- 20. Motion ---------- */ /* Hidden-before-reveal only under html.js; site.js adds .is-in when the element enters the screen. */ html.js .reveal { opacity: 0; transform: translateY(1.75rem); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), clip-path 1.2s var(--ease); transition-delay: var(--delay, 0ms); } html.js .reveal--left { transform: translateX(-2.5rem); } html.js .reveal--right { transform: translateX(2.5rem); } html.js .reveal--zoom { transform: scale(0.94); } /* The wipe is on what is INSIDE the block (the picture, its caption), never on the block itself: Chrome counts a block's own clip-path when it asks "is this on screen?", so a block clipped to nothing was never revealed, and its picture was never fetched: it stayed missing and left an empty half (her note of 2026-10-05: "a lot of space"). */ html.js .reveal--clip { opacity: 1; transform: none; } html.js .reveal--clip > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); transition-delay: var(--delay, 0ms); } html.js .reveal--stamp { transform: scale(1.8) rotate(-24deg); transition: opacity 0.3s ease-out, transform 0.7s var(--ease-back); transition-delay: var(--delay, 150ms); } /* Once revealed, nothing is clipped: cards, stamps and tags are DESIGNED to hang outside their box, and a clip-path left on a revealed block sliced them off (the owner saw it, 2026-10-03). Only the clip reveal keeps a clip, and it ends well outside the box so overhanging pieces show. */ html.js .reveal.is-in { opacity: 1; transform: none; } html.js .reveal--clip.is-in > * { clip-path: inset(-40% -40% -40% -40%); } html.js .reveal-group > * { opacity: 0; transform: translateY(1.5rem); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); transition-delay: calc(var(--i, 0) * 110ms); } html.js .reveal-group.is-in > * { opacity: 1; transform: none; } .lift { transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease); } .lift:hover { translate: 0 -6px; box-shadow: var(--sh-3); } .tilt-l { rotate: -2deg; } .tilt-r { rotate: 2deg; } [data-parallax] { translate: 0 var(--py, 0px); will-change: translate; } @keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.1); } } /* (the reduced-motion rules are the last thing in this file, so they have the final word) */ /* === pages of this file === */ /* ---------- 21. Home ---------- */ /* (the hero itself is a shared component: section 17, pp_hero) */ /* the three doors (pp_doors: Home, and wherever the three lines are shown together). They stay still: see below. */ .doors-sec { padding-top: calc(var(--section) + 4.5rem); padding-bottom: 0; } /* On a phone the three doors are three straight cards with clear space between them. The owner asked for this (2026-10-03): they were tilted and overlapped each other too much. No rotation, no negative margins. */ .doors { position: relative; z-index: 2; display: grid; gap: var(--s-5); margin-top: var(--s-7); padding: 0 var(--gutter) var(--s-8); } .door { position: relative; display: flex; flex-direction: column; padding: 0.7rem 0.7rem 1.6rem; border-radius: var(--r-s); box-shadow: var(--sh-2); } .door--navy { box-shadow: var(--sh-3), inset 0 0 0 1px rgb(var(--gold-rgb) / 0.4); } .door__arch { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-xs); background: var(--navy-deep); } .door__arch img { width: 100%; height: 100%; object-fit: cover; } .door__body { display: grid; gap: 0.65rem; justify-items: start; padding: 1.25rem 0.6rem 0; } .door__name { font-size: var(--t-m); } .door__name a { text-decoration: none; } .door__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; } .door__name a:focus-visible { outline: none; } /* the ring is drawn inside the door, in the focus colour of the door's own ground */ .door:focus-within { outline: 3px solid var(--focus); outline-offset: -5px; } .door__tag { font-size: var(--t-lead); line-height: 1.38; } .door__next { width: 100%; padding-top: 0.75rem; border-top: 1px dashed var(--rule-strong); letter-spacing: 0.08em; } .door__go { display: inline-flex; align-items: center; gap: 0.7em; font-weight: 500; } @media (min-width: 56.25em) { .doors { display: flex; gap: 0; padding: 0; margin-top: var(--s-8); min-height: 46rem; } .door, .door:nth-child(n) { flex: 1 1 0; min-width: 0; margin: 0; padding: 3.5rem clamp(1.75rem, 3.2vw, 3.75rem) 3.5rem; border-radius: 0; box-shadow: none; rotate: none; } /* The owner asked (2026-10-03) for NO hover effects on the three doors: they do not grow, the arch does not widen, the picture does not move, the arrow does not nudge. Keep them still. (Keyboard focus keeps its outline.) */ /* the picture sits in an arch, like a doorway, with a fine line set off from it */ .door__arch { aspect-ratio: auto; width: min(100%, 20rem); height: 22rem; margin: 0.75rem 0.75rem 0; border-radius: 999px 999px 0 0; outline: 1.5px solid var(--stamp); outline-offset: 0.7rem; } .door__body { gap: 0.85rem; padding: 2.5rem 0 0; } .door__name { font-size: clamp(2.1rem, 3.3vw, 3.4rem); } .door__tag { max-width: 26rem; } } /* upcoming destinations */ .dests-sec { padding-top: 0; } .dests-sec > .band { margin-bottom: clamp(1.5rem, 5vw, 4rem); } .dests { display: grid; gap: clamp(5rem, 11vw, 10rem); margin-top: clamp(4rem, 9vw, 8rem); padding-bottom: 3.5rem; } .dests__item { position: relative; } .couch-list { display: grid; gap: var(--s-6); margin-top: clamp(4rem, 9vw, 7rem); } .couch-list__rows { --stack: var(--s-3); } @media (min-width: 64em) { .couch-list { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; } } /* the idea */ .idea__text { max-width: 34rem; } .idea__pics { margin-top: var(--s-4); } @media (min-width: 56.25em) { .idea__pics { margin-top: var(--s-9); } } /* how it works: three stops */ .stops { display: grid; gap: var(--s-6); margin-top: var(--s-8); } .stops__item { position: relative; filter: drop-shadow(0 14px 24px rgb(var(--deep-rgb) / 0.22)); } .stops__item .stub { padding: 1.6rem 1.9rem 1.9rem; gap: var(--s-3); } .stops__item .stub__title { font-size: var(--t-m); } .stops__item .stub__text { font-size: var(--t-body); } @media (min-width: 56.25em) { .stops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); align-items: start; padding-bottom: var(--s-4); } .stops__item:nth-child(3n + 1) { rotate: -1.5deg; } .stops__item:nth-child(3n + 2) { rotate: 1deg; margin-top: 3.5rem; } .stops__item:nth-child(3n + 3) { rotate: -0.6deg; margin-top: 7rem; } } /* the CE band */ .cenote__in { display: grid; gap: var(--s-5); justify-items: start; align-items: center; } .cenote__text { max-width: 44rem; color: var(--fg-soft); } @media (min-width: 56.25em) { .cenote__in { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-8); } } /* the merchandise teaser */ .scatter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); padding: var(--s-2); } .merch__item { position: relative; display: block; padding: 0.6rem 0.6rem 0.9rem; border-radius: var(--r-xs); background: var(--paper); color: var(--ink); box-shadow: var(--sh-2); rotate: var(--tilt, 0deg); text-decoration: none; transition: rotate 0.7s var(--ease-back), translate 0.5s var(--ease), box-shadow 0.5s var(--ease); } .merch__item:nth-child(even) { margin-top: 2.25rem; } .merch__item:hover, .merch__item:focus-visible { rotate: 0deg; translate: 0 -6px; box-shadow: var(--sh-3); z-index: 2; } .merch__pic { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--cream); } .merch__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .merch__item:hover .merch__pic img { transform: scale(1.05); } .merch__cap { display: flex; justify-content: space-between; gap: var(--s-3); padding-top: 0.75rem; font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); } /* the news sign-up */ .news .newsform { max-width: 36rem; } /* ---------- 22. The 404 ---------- */ .lost { min-height: 100vh; min-height: 100svh; overflow: hidden; } .lost__in { position: relative; display: grid; gap: var(--s-7); } .lost__code { position: absolute; z-index: -1; top: -0.12em; right: -0.04em; font: italic 300 clamp(11rem, 44vw, 36rem) / 0.8 var(--serif); letter-spacing: -0.06em; color: rgb(var(--cream-rgb) / 0.06); pointer-events: none; user-select: none; } .lost__stamp { justify-self: start; margin-bottom: calc(var(--s-5) * -1); } .lost__board { display: grid; gap: var(--s-4); max-width: 54rem; } @supports (-webkit-text-stroke: 1px black) { .lost__code { color: transparent; -webkit-text-stroke: 1.5px rgb(var(--gold-rgb) / 0.4); } } @media (min-width: 56.25em) { .lost__stamp { position: absolute; right: 4%; top: 0; margin: 0; } } /* ---------- 23. The kit page (/_kit) ---------- */ .kit-top { padding-bottom: var(--s-7); } .kit-index { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); } .kit-index a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); font: 500 var(--t-mono) / 1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; } .kit-index a:hover { background: var(--cream); color: var(--navy); } .kit-block { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--rule-strong); } .kit-block__head { display: grid; gap: var(--s-4); } /* everything in a block follows the one before it at the same distance */ .kit-block > * + * { margin-top: var(--s-6); } .kit-block__head > * { min-width: 0; } .kit-block__what { max-width: 40rem; color: var(--fg-soft); margin-top: var(--s-2); } .kit-code { max-width: 100%; padding: 1rem 1.1rem; border-radius: var(--r-s); background: var(--navy-deep); color: var(--cream); font: 400 0.8125rem / 1.65 var(--mono); white-space: pre; overflow-x: auto; tab-size: 2; } .kit-code:focus-visible { outline-color: var(--coral-deep); } .kit-grounds { display: grid; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-1); } .kit-ground { position: relative; display: grid; gap: var(--s-4); align-content: start; justify-items: start; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); } .kit-ground > * { max-width: 100%; } .kit-ground__name { font: 500 var(--t-micro) / 1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); } .kit-ground--wide { justify-items: stretch; } .kit-demo { display: grid; gap: var(--s-5); } .kit-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } .kit-swatch { display: grid; align-content: end; gap: 0.15rem; min-height: 6.5rem; padding: 0.8rem; border-radius: var(--r-s); font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.08em; box-shadow: inset 0 0 0 1px rgb(var(--deep-rgb) / 0.12); } .kit-type > * + * { margin-top: var(--s-4); } .kit-table { width: 100%; font-size: var(--t-small); } .kit-table th, .kit-table td { padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } .kit-table th { font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); } .kit-table code, .kit-block__what code, .kit-note code { font: 500 0.875em var(--mono); padding: 0.1em 0.35em; border-radius: 3px; background: rgb(var(--navy-rgb) / 0.08); } .kit-scroll { overflow-x: auto; } .kit-body { padding-bottom: var(--section); } .kit-full { justify-self: stretch; width: 100%; min-width: 0; } .kit-pad { padding: var(--s-5); } .kit-cluster-l { --cluster: var(--s-6); } .kit-wide { padding-bottom: 3.5rem; } .kit-wide + .kit-wide { margin-top: clamp(4rem, 9vw, 8rem); } .kit-panel-clip { overflow: hidden; } .kit-doors { display: flow-root; } .kit-pics { gap: clamp(2.75rem, 6vw, 4.5rem); padding: var(--s-5) var(--s-4) var(--s-7); } .kit-route { border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-1); } .kit-leg { position: relative; display: grid; align-content: center; gap: var(--s-3); min-height: 16rem; padding: clamp(1.5rem, 4vw, 3rem) clamp(2.25rem, 6vw, 4rem); } .kit-leg > p { position: relative; z-index: 2; max-width: 34rem; } .kit-motion .panel { min-height: 9rem; } /* the ground cells are narrow: one column of fields until the screen is really wide */ .kit-ground .form-grid { grid-template-columns: minmax(0, 1fr); } @media (min-width: 80em) { .kit-ground .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kit-note { max-width: 46rem; color: var(--fg-soft); } @media (min-width: 40em) { .kit-grounds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit-grounds--1 { grid-template-columns: minmax(0, 1fr); } .kit-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 64em) { .kit-grounds--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kit-grounds--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kit-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ---------- 24. Reduced motion: everything is simply there ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; } html.js .reveal, html.js .reveal--clip > *, html.js .reveal-group > *, html.js .rise .w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; } .band__track, .hero__pic img, .badge--last::before { animation: none !important; } .band__drift, [data-parallax] { translate: none !important; } .route__plane, .flight { display: none !important; } .btn:hover, .lift:hover, .card--tall:hover, .card--row:hover, a.tag:hover, .merch__item:hover, .merch__item:focus-visible, .choice input:checked + .choice__box { translate: none; } a.stamp:hover { rotate: var(--tilt, -8deg); scale: none; } .hero__pic img, .card__pic img, .pic__img img, .merch__pic img { transform: none !important; } } /* ---------- 25. Print: a registration or a policy on paper ---------- */ @media print { html.js .reveal, html.js .reveal--clip > *, html.js .reveal-group > *, html.js .rise .w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; } .site-header, .skip, .flashes, .flight, .route, .route__plane, .band, .newsform, .site-footer__cols { display: none !important; } .hero, .section { min-height: 0 !important; } } /* === end === */