/* =========================================================================== LOBBERO — the shared shell: tokens, reset, header, mobile nav, footer. --------------------------------------------------------------------------- Every page on lobbero.com links this file, so the header and footer are ONE implementation rather than a copy per page. It used to be a copy per page — which is how /live-demo ended up shipping a nav that had drifted from the home page's, and how "Privacy" and "Security" in the footer stayed `href="#"` long after the pages existed. Tokens are the same values as lobbero_fe/src/style-utils/theme.ts (design_system.md §2: the product and the public site are one teal system). When the brand hue moves it moves in both files, and each names the other. SAFARI / iOS rules applied here come from lobbero_fe/RESPONSIVE_SAFARI_AUDIT.md: * -webkit-backdrop-filter paired with backdrop-filter (P1 §8) * -webkit-text-size-adjust (P1 §6) * 16px form controls on coarse pointers, or iOS zooms in and never out (P0 §2) * -webkit-appearance paired with appearance (P1 §7) * 100dvh with a preceding 100vh fallback (P0 §3 + P2 §2) * env(safe-area-inset-*), which needs viewport-fit=cover in the meta (P0 §1) * 100% rather than 100vw, which includes the desktop scrollbar (P2 §3) =========================================================================== */ :root { --iris: #00a19a; --violet: #007c76; --ink: #12292c; --porcelain: #f7faf9; --emerald: #4c9f38; --amber: #f59e0b; --coral: #f0564a; --aurora: linear-gradient(100deg, #00a19a 0%, #43d6c9 100%); /* 0.66, not 0.62. At 0.62 this token measured 4.36:1 on porcelain and failed WCAG AA for normal text — and it is the colour of the nav links, every lede and most body copy on the site. 0.66 measures 4.93:1 and is visually indistinguishable. The design system's own muted token (palette.slate #5E7477) passes at 4.72, so a muted grey that fails was never the intent. */ --ink-60: rgba(18, 41, 44, 0.66); --ink-12: rgba(18, 41, 44, 0.12); --ink-06: rgba(18, 41, 44, 0.06); --card: #ffffff; --radius: 14px; --display: "Bricolage Grotesque", Inter, system-ui, sans-serif; --body: Inter, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; /* On a dark panel (--ink) the body copy and hairlines need their own scale; ink-60 on ink is invisible. Used by the footer and the IQ section. */ --on-ink: rgba(255, 255, 255, 0.72); --on-ink-strong: rgba(255, 255, 255, 0.92); --on-ink-faint: rgba(255, 255, 255, 0.52); --on-ink-line: rgba(255, 255, 255, 0.12); --mint: #8fe6dd; --nav-h: 68px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* iOS Safari inflates body copy whenever a block is wider than the viewport (landscape, and after an orientation change) unless this is pinned. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Anchor links land under the sticky header without this. */ scroll-padding-top: calc(var(--nav-h) + 16px); /* Sideways-overflow insurance, and it belongs HERE rather than on . `overflow` on body propagates to the viewport only while html's is visible — so `overflow-x: hidden` on body instead turns BODY into its own scroll container, and the page's scroll offset ends up split between two elements. That broke the drawer's scroll lock: it recorded window.pageYOffset, which no longer held the whole offset, and closing the drawer dropped the reader 900px up the page. `clip` rather than `hidden` on purpose: `hidden` would make html a scroll container too (Safari has a history of breaking `position: sticky` inside one), while `clip` creates no scroll container at all. A browser that does not know the keyword ignores the declaration, which is harmless — nothing on the site overflows sideways at any width. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--body); background: var(--porcelain); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; } a { color: inherit; } :focus-visible { outline: 3px solid var(--iris); outline-offset: 2px; border-radius: 4px; } /* iOS auto-zooms a focused control whose computed font-size is under 16px and does NOT zoom back out, leaving the visitor on a sideways-scrolled page. --------------------------------------------------------------------------- EVERY CONTROL ON THIS SITE IS 16px AT EVERY WIDTH, and the media query below is only a safety net for one added later. The obvious version of this — a coarse-pointer media query over bare `input, select, textarea` — did not work, and failed silently. A media query does not raise specificity: `.field input { font-size: 15px }` appearing later in the file beat it on both counts, so the controls stayed at 15px on a real iPhone while the rule that was supposed to protect them sat right there in the stylesheet. That is the trap lobbero_fe/RESPONSIVE_SAFARI_AUDIT.md P0 §2 describes, and the fix is to size the components correctly rather than to patch them from a distance. */ @media (hover: none) and (pointer: coarse) { input, select, textarea, .field input, .field select, .search input { font-size: 16px; } } /* Safari applies its native `searchfield` appearance otherwise, overriding the radius and padding and adding a clear button no other browser shows. */ input[type="search"] { -webkit-appearance: none; appearance: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Keyboard users need a way past the nav on every page. */ .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--iris); color: #fff; font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 0 0 10px 10px; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body); font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: 10px; border: 0; cursor: pointer; text-decoration: none; /* design_system.md §8: every interactive element is at least 44px on touch, and the hit area grows by padding rather than by the visual box. */ min-height: 44px; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease; } .btn-primary { background: var(--iris); color: #fff; box-shadow: 0 4px 14px rgba(0, 161, 154, 0.28); } .btn-primary:hover { background: var(--violet); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-12); } .btn-ghost:hover { border-color: var(--ink); background: #fff; } .btn-big { padding: 15px 28px; font-size: 16px; border-radius: 12px; } .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; } .btn[hidden] { display: none; } /* ---------- Header ---------- */ .site-nav { position: sticky; top: 0; z-index: 50; background: rgba(247, 250, 249, 0.88); /* Unprefixed backdrop-filter is Safari 18+; the prefix carries every older iOS. Without it the sticky bar is translucent with no blur and the hero text reads through it. */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ink-06); /* In a home-screen PWA and on a notched phone in landscape the bar starts under the status bar without this. */ padding-top: env(safe-area-inset-top, 0px); } .nav-in { display: flex; align-items: center; gap: 32px; height: var(--nav-h); } .logo { display: flex; align-items: center; /* 44px of tappable height around a 32px mark — the wordmark is a link to the home page and was the shortest tap target on every page. Padding rather than a larger mark, so nothing moves visually. */ min-height: 44px; padding: 6px 2px; margin: -6px -2px; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 22px; text-decoration: none; letter-spacing: -0.02em; flex: 0 0 auto; } /* The Lobbero mark: a lobby door. assets/favicon.svg is the same geometry, so the tab icon and the wordmark are one object. --logo-notch is the colour BEHIND the mark, because the doorway is a hole, not a shape. */ .logo-mark { width: 32px; height: 32px; border-radius: 9px 9px 3px 3px; background: var(--iris); position: relative; flex: 0 0 auto; } .logo-mark::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 12px; height: 16px; border-radius: 6px 6px 0 0; background: var(--logo-notch, var(--porcelain)); } .nav-links { display: flex; gap: 26px; margin-left: 8px; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-60); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); } /* "Soon" next to Stays. Stays ships Q1 2027, and the nav item used to read as a shipping product — which is also why its CTA pointed at a paid signup. */ .soon { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet); background: rgba(0, 161, 154, 0.1); border: 1px solid rgba(0, 161, 154, 0.22); border-radius: 5px; padding: 2px 6px; line-height: 1.4; flex: 0 0 auto; } .nav-cta { margin-left: auto; display: flex; gap: 12px; align-items: center; } /* Log in replaced "See pricing": Pricing is already the third item in the main nav, so the top-right control was a duplicate of a link 200px to its left, and the site had no way in for an existing customer at all. */ .nav-login { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 11px 16px; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center; } .nav-login:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink-12); } .nav-burger { display: none; width: 44px; height: 44px; flex: 0 0 auto; border: 1.5px solid var(--ink-12); border-radius: 10px; background: #fff; cursor: pointer; align-items: center; justify-content: center; color: var(--ink); -webkit-appearance: none; appearance: none; } .nav-burger:hover { border-color: var(--ink); } .nav-burger svg { width: 22px; height: 22px; display: block; } /* ---------- Mobile navigation ---------- Product / Lobbero IQ / Pricing / Stays were `display:none` under 900px with no toggle anywhere in the DOM, so a phone visitor could reach exactly one page: the one they landed on. */ .mobile-nav { position: fixed; inset: 0; z-index: 60; display: none; } .mobile-nav[data-open] { display: block; } .mobile-nav .scrim { position: absolute; inset: 0; background: rgba(18, 41, 44, 0.48); opacity: 0; transition: opacity 0.22s ease; } .mobile-nav[data-open] .scrim { opacity: 1; } .mobile-nav .panel { position: absolute; top: 0; right: 0; width: min(88vw, 340px); /* 100vh first: dvh is Safari 15.4+, and below that an unpaired dvh is dropped entirely and the panel gets no height at all. On iOS 100vh is the LARGE viewport, so the dvh line is what keeps the bottom CTAs off the toolbar. */ height: 100vh; height: 100dvh; background: var(--porcelain); box-shadow: -16px 0 44px -20px rgba(18, 41, 44, 0.45); transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); padding-top: calc(14px + env(safe-area-inset-top, 0px)); overflow-y: auto; /* Momentum scrolling inside the panel, and no rubber-banding of the page behind it. */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mobile-nav[data-open] .panel { transform: translateX(0); } .mobile-nav .panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .mobile-nav .panel-close { width: 44px; height: 44px; flex: 0 0 auto; border: 1.5px solid var(--ink-12); border-radius: 10px; background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink); -webkit-appearance: none; appearance: none; } .mobile-nav .panel-close:hover { border-color: var(--ink); } .mobile-nav .panel-close svg { width: 20px; height: 20px; display: block; } .mobile-nav nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .mobile-nav nav a { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 14px 12px; border-radius: 10px; min-height: 48px; } .mobile-nav nav a:hover, .mobile-nav nav a[aria-current="page"] { background: #fff; } .mobile-nav .panel-actions { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--ink-12); } .mobile-nav .panel-actions .btn { width: 100%; } @media (prefers-reduced-motion: reduce) { .mobile-nav .panel, .mobile-nav .scrim { transition: none; } } /* One breakpoint owns the swap, so the burger can never be visible at the same time as the links (or, worse, neither of them). */ @media (max-width: 900px) { .nav-links { display: none; } .nav-cta .nav-login { display: none; } .nav-burger { display: inline-flex; } .nav-in { gap: 12px; } } /* Under ~420px "Start free trial" plus the burger no longer fit beside the wordmark. The trial CTA lives in the drawer at that width; the burger is the one control that must never be dropped. */ @media (max-width: 430px) { .nav-cta .btn { display: none; } .logo { font-size: 20px; } } /* ---------- Footer ---------- Was a single flex row of six links, two of which (`Privacy`, `Security`) were `href="#"` — they pointed at the top of the page the reader was already on. */ .site-footer { background: var(--ink); color: var(--on-ink-strong); /* The mark's doorway is a hole; on the dark footer it must show ink through. */ --logo-notch: var(--ink); margin-top: 8px; } .foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px 32px; padding: 60px 0 36px; } .foot-brand .logo { color: #fff; margin-bottom: 14px; } .foot-brand p { font-size: 14px; line-height: 1.6; color: var(--on-ink); max-width: 34ch; } .foot-brand .foot-meta { margin-top: 16px; font-size: 13px; color: var(--on-ink-faint); } .foot-brand .foot-meta a { color: var(--mint); text-decoration: none; font-weight: 500; } .foot-brand .foot-meta a:hover { text-decoration: underline; } .foot-col h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-faint); margin-bottom: 14px; } .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 2px; } .foot-col a { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--on-ink); text-decoration: none; /* Vertical padding rather than a taller box: 44px of tappable height in a list that still looks like a list. */ padding: 9px 0; min-height: 44px; } .foot-col a:hover { color: #fff; } .foot-col .soon { color: var(--mint); background: rgba(67, 214, 201, 0.14); border-color: rgba(67, 214, 201, 0.3); } .foot-bottom { border-top: 1px solid var(--on-ink-line); padding: 20px 0 calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; justify-content: space-between; font-size: 13px; color: var(--on-ink-faint); } .foot-bottom-links { display: flex; gap: 8px 20px; flex-wrap: wrap; } .foot-bottom-links a { /* Same 44px floor as the footer columns above. These three sat at 20px. */ display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; } .foot-bottom a { color: var(--on-ink-faint); text-decoration: none; } .foot-bottom a:hover { color: #fff; } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 48px 0 28px; } .foot-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } } /* ---------- Modal (the Stays waitlist) ---------- design_system.md §8 rule 6: a centred sheet on desktop, a bottom sheet on a phone. */ .lb-modal { position: fixed; inset: 0; z-index: 80; display: none; } .lb-modal[data-open] { display: block; } /* NO-SCRIPT FALLBACK. The trigger is a real link to #stays-waitlist, so with JavaScript off the sheet still opens — `:target` does what the click handler would have done. This is why the control is an and not a