/* ====================================================================== THE SHARED HEADER — loaded by the home page and the viewer, so the two are one site. The palette and the buttons come with it, because the header is drawn in them. Change the header here and both pages follow. ====================================================================== */ /* THE TWO FONTS, served from this site (Latin subset, from Google Fonts, OFL). Each page preloads both files, so they arrive before the page is drawn and nothing reflows when they do. */ @font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/noto-serif-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lobster"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/lobster-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --font-display: "Noto Serif", serif; --font-ui: "Noto Serif", serif; --font-italic: "Lobster", cursive; } /* ------------------------------------------------------------------ THE PALETTE. Every colour on this page is one of these. A literal hex anywhere else is a bug — it is the same colour guessed again, slightly wrong, which is how 46 of them accumulated where 16 were meant. No var(--x, fallback) anywhere: a missing token must break visibly. ------------------------------------------------------------------ */ :root { --white: #fff; /* White with the water just showing through — for a chip sitting on the hero, where solid white reads as a cut-out. */ --white-veil: #ffffffd9; /* white at 85% — 15% of the water shows through */ /* ALL DARK TEXT IS THIS ONE COLOUR. */ --ink: #17363c; --ink-mute: #647a7b; /* grey text only — not dark text; 4.5:1 on white */ /* Coral is the accent. Every accent is coral. */ --coral: #f9426f; --coral-hover: #e6295a; --coral-btn: #ea073f; /* coral button ground: white text on it is 4.5:1 */ --coral-btn-hover: #c70636; /* Green text: 4.5:1 on --tint, the palest ground it is read on. */ --green: #057d7b; --green-deep: #046362; /* green text on the water: 4.5:1 on --water */ --teal: #2fa18c; --teal-soft: #00967e80; --slate: #3f655e; /* background only */ --mint: #a8e8dc; --water: #74e3d1; /* also set literally on , which JS parses */ --tint: #eafaf6; /* pale fill on white: hovers, close buttons */ --line: #d3ede6; --cream: #fffdf6; --grey-light: #eef0f0; /* neutral bar fill: the Editor page's window bar */ --grey-line: #dde1e1; --header-tint: #c9fff71f; /* Corners. Four, plus the pill. There were thirteen — 2, 3, 7, 12, 14, 20, 22, 24, 28, 32 — which is the same four shapes typed from memory. */ --r1: 3px; /* tight: ribbon ends, tiny marks */ --r2: 12px; /* controls: inputs, small tiles */ --r3: 22px; /* cards */ --r4: 32px; /* panels and popups */ --r-pill: 999px; --r-btn: 8px; /* the corner every button shares, the booking widget too */ /* TWO BUTTON SIZES, and no third. Standard is every call to action; small is for a row with no room — the strip, and the header on a phone. */ --btn-h: 44px; --btn-px: 24px; --btn-f: 16px; --btn-sm-h: 36px; --btn-sm-px: 16px; --btn-sm-f: 14px; /* Motion — one easing curve, one duration. */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-slow: cubic-bezier(.4, .06, .35, 1); --t: .28s; /* ------------------------------------------------------------------ SHADOW. Three, and only three. Resting, raised, and floating. The markup had twenty. Buttons no longer carry their own tinted glow — a green shadow under a green button and a coral one under a coral button is two more variants doing the job one already does. --e1-up is --e1 with its direction reversed, for the two bars that sit against an edge and must cast upward. Same depth, not a fourth. ------------------------------------------------------------------ */ --e1: 0 6px 18px rgba(13,43,46,.10); --e2: 0 12px 26px rgba(13,43,46,.18); --e3: 0 40px 90px rgba(6,32,34,.40); --e1-up: 0 -6px 18px rgba(13,43,46,.10); } /* ------------------------------------------------------------------ BUTTONS. Two sizes, four fills, one definition each. There were 29 property-shapes here, including eight different green buttons whose heights were 49 / 58 / 60 / 68 and whose radii were 10 / 12 / 14 — the same button, guessed eight times. ------------------------------------------------------------------ */ .btn { display: flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; border: 0; cursor: pointer; text-decoration: none; font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 22px; white-space: nowrap; height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--btn-r); font-size: var(--btn-f); /* A BUTTON NEVER SHRINKS BELOW ITS OWN PADDING. In a flex row the default is `flex: 0 1 auto`, so a crowded row steals width from the button's sides and the label ends up jammed against the edges. */ flex: 0 0 auto; min-width: fit-content; /* A BUTTON IS AS WIDE AS ITS LABEL. The booking widget sizes itself to its text, so in a stacked column ours must not stretch to the column or the pair reads as two different controls. */ align-self: center; justify-self: center; transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease), color var(--t) var(--ease); } .btn { --btn-r: var(--r-btn); } .btn--sm { --btn-h: var(--btn-sm-h); --btn-px: var(--btn-sm-px); --btn-f: var(--btn-sm-f); } /* A STACKED PAIR IS ONE WIDTH. The booking widget draws its own button inside a shadow root we cannot reach, so the stack is a grid: its single column is as wide as the widest child, and our buttons stretch to that. */ /* A word that is shorter on a phone: both are in the markup, one shows. */ .at-phone { display: none; } @media (max-width: 700px) { .at-phone { display: inline; } .at-wide { display: none; } } .btn-stack { display: grid; justify-content: center; gap: 14px; margin-top: 28px; } .btn-stack > .btn { justify-self: stretch; width: auto; } /* The pair that sits beside the support card, and wraps under it when the row runs out of room. */ .btn-stack--offer { flex: 1 1 240px; min-width: 0; } .btn-stack--offer .offer-pop__note { text-align: center; } /* THE BANNER above every footer: one heading, one line, four buttons, the same on every page. */ .cta-banner { box-sizing: border-box; max-width: 1100px; margin: 60px auto 50px; padding: 0 20px; text-align: center; } .cta-banner__title { font-family: var(--font-italic); font-weight: 400; font-size: 48px; line-height: 1.1; color: var(--ink); margin: 0 0 12px; } .cta-banner__lead { font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--green); margin: 0 auto 24px; max-width: 720px; } .cta-banner__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } @media (max-width: 700px) { .cta-banner__title { font-size: 36px; } .cta-banner__lead { font-size: 18px; } .cta-banner__row > .btn { width: 100%; height: auto; min-height: var(--btn-h); padding: 10px 14px; white-space: normal; } } /* The strongest fill on the page: solid green, coral on hover. */ .btn--primary { background: var(--green); color: var(--white); box-shadow: var(--e1); } .btn--primary:hover { background: var(--coral); color: var(--white); box-shadow: var(--e2); transform: translateY(-2px); } .btn--ghost { background: var(--white); color: var(--green); box-shadow: var(--e1); } .btn--ghost:hover { background: var(--teal); color: var(--white); box-shadow: var(--e2); transform: translateY(-2px); } /* The quietest fill: tint on white, for a button that sits back in its card. */ .btn--quiet { background: var(--tint); color: var(--green); } .btn--quiet:hover { background: var(--teal); color: var(--white); transform: translateY(-2px); } .btn--accent { background: var(--coral-btn); color: var(--white); box-shadow: var(--e1); } .btn--accent:hover { background: var(--coral-btn-hover); box-shadow: var(--e2); transform: translateY(-2px); } /* The round × that closes a popup. */ .btn--icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; border-radius: var(--r-pill); background: var(--tint); color: var(--ink); font-family: inherit; font-size: 22px; line-height: 1; transition: background var(--t) var(--ease), color var(--t) var(--ease); } .btn--icon:hover { background: var(--coral); color: var(--white); } /* ------------------------------------------------------------------ HEADER. Logo left, everything else right. Grid, so the two sides are tracks rather than a flex negotiation. ------------------------------------------------------------------ */ .site-head { background-color: var(--header-tint); } /* Logo, then the nav taking whatever room is left, then the offer and the burger hard against the right. The nav track collapses where the nav is hidden, so the offer keeps its place at every width. */ .site-head__bar { box-sizing: border-box; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 32px; padding: 22px 20px; } @media (max-width: 700px) { .site-head__bar { padding: 8px 16px; gap: 12px; } } /* THE OFFER SITS IN THE BAR, and only where there is room for it: it takes the small size once the bar tightens, and on a phone it goes altogether — the logo and the burger are the whole bar there, and the offer is the first thing in the menu. */ .site-head__offer { justify-self: end; } @media (max-width: 950px) { .site-head__offer { --btn-h: var(--btn-sm-h); --btn-px: var(--btn-sm-px); --btn-f: var(--btn-sm-f); } } @media (max-width: 700px) { .site-head__offer { display: none; } } .site-head__logo { display: block; width: auto; height: 63px; justify-self: start; filter: drop-shadow(0 4px 10px rgba(13,43,46,.28)); } @media (max-width: 700px) { .site-head__logo { height: 31px; } } .site-nav { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; justify-content: end; gap: 44px; } .site-nav__link { color: var(--white); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; text-shadow: 0 2px 3px rgba(6,32,34,.45); cursor: pointer; transition: color var(--t) var(--ease); } .site-nav__link:hover { color: var(--coral); } /* The hamburger: three bars, one rule. It sits in the bar's second column, hard against the right edge; the logo holds the first column on the left. */ .burger { display: grid; align-content: center; justify-self: end; gap: 6px; width: 34px; height: 24px; padding: 2px; border: 0; background: transparent; cursor: pointer; } .burger span { display: block; height: 4px; border-radius: var(--r1); background: var(--white); box-shadow: var(--e1); transition: background var(--t) var(--ease); } .burger:hover span { background: var(--green); } /* NAV OR BURGER, DECIDED BY THE WIDTH. Both are always in the markup and the query picks one, so the header no longer waits on JavaScript to measure itself. Seven links need about 1240px at their full spacing, so below 1180 the burger holds them, and up to 1260 they sit a little closer. */ @media (max-width: 1180px) { .site-nav { display: none; } } @media (min-width: 1181px) { .burger { display: none; } } @media (min-width: 1181px) and (max-width: 1260px) { .site-nav { gap: 34px; } } /* Links in the header and menu carry no underline on any page that loads this. */ .site-head a, .menu a { text-decoration: none; } /* THE PAGE YOU ARE ON: a pane of glass behind its name in the bar, a tint behind it in the menu. The colour of the word does not change. */ .site-nav__link[aria-current="page"] { padding: 8px 16px; margin: -8px -16px; border-radius: var(--r-pill); background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.5); -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--e1); } .site-nav__link[aria-current="page"]:hover { color: var(--white); } .menu__link[aria-current="page"] { background: var(--tint); border-radius: var(--r2); padding-left: 12px; padding-right: 12px; } /* STICKY, AND THIN ONCE THE PAGE MOVES. The bar stays at the top; scrolled, it loses its height and turns solid water, so what slides under it stays out of the way. The page sets html.head-thin; this file decides what thin is. */ .site-head { position: sticky; top: 0; z-index: 60; transition: background-color var(--t) var(--ease); } .site-head__bar, .site-head__logo { transition: padding var(--t) var(--ease), height var(--t) var(--ease); } .head-thin .site-head { background-color: var(--water); box-shadow: var(--e1); } .head-thin .site-head__bar { padding-top: 6px; padding-bottom: 6px; } .head-thin .site-head__logo { height: 34px; } .head-thin .site-head__offer { --btn-h: var(--btn-sm-h); --btn-px: var(--btn-sm-px); --btn-f: var(--btn-sm-f); } .head-thin .site-nav__link { font-size: 15px; } /* A section scrolled to stops below the thin bar, not under it. */ section[id] { scroll-margin-top: 48px; } @media (max-width: 700px) { .head-thin .site-head__logo { height: 26px; } } /* ------------------------------------------------------------------ THE MENU. A panel from the top, on a scrim. One rule per part. ------------------------------------------------------------------ */ .menu { position: fixed; inset: 0; z-index: 80; background: rgba(6,32,34,.45); display: flex; align-items: flex-start; justify-content: center; padding: 14px; } .menu__panel { width: 100%; background: var(--white); border-radius: var(--r3); padding: 20px 22px 24px; box-shadow: var(--e3); display: flex; flex-direction: column; gap: 4px; } .menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } /* The logo is drawn white; this recolours it to the site's green. */ .menu__logo { width: auto; height: 42px; display: block; filter: brightness(0) saturate(100%) invert(31%) sepia(38%) saturate(747%) hue-rotate(122deg) brightness(93%) contrast(93%); } /* A MENU ROW, in tokens, because the booking widget has to wear this same shape inside its own shadow root and can only be handed values, not a class. */ .menu__panel { --menu-f: 17px; --menu-ls: .05em; --menu-pad: 15px 4px; } .menu__link { padding: var(--menu-pad); border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: var(--menu-f); text-transform: uppercase; letter-spacing: var(--menu-ls); cursor: pointer; transition: color var(--t) var(--ease); } .menu__link:hover { color: var(--coral); } /* The brand name: always LAZY™, always in the serif, even inside a script-font heading. */ .lazy-mark { font-family: var(--font-ui); font-style: normal; text-transform: uppercase; font-weight: 700; } .tm { font-size: .42em; vertical-align: .85em; letter-spacing: 0; } /* WHO DOES WHAT: a plain grid, the row names on the left, one column per party. */ .who-table-wrap { overflow-x: auto; margin: 6px 0 4px; } .who-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; background: var(--white); } .who-table th, .who-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .who-table thead th { font-weight: 700; color: var(--green); border-bottom: 2px solid var(--teal); } .who-table tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; } .who-table td:empty::after { content: "—"; color: var(--ink-mute); } @media (max-width: 700px) { .who-table { font-size: 14px; } .who-table th, .who-table td { padding: 8px; } } /* THE FOOTER — one on every page, and the page does not bounce past it. */ html { overscroll-behavior-y: none; } /* The page never moves sideways: anything wider than the window (a widget, a long word) is cut at its edge. clip, not hidden, so the sticky header keeps working. */ html, body { overflow-x: clip; } .faq-foot { position: relative; z-index: 1; background: var(--white); text-align: center; padding: 18px 20px; font-size: 14px; color: var(--ink-mute); border-top: 2px solid var(--line); } .faq-foot a { color: var(--green); text-decoration: none; }