/* Page layout for the two documents the Worker serves (src/render/page.js). Built on @polluxdev/chrome's tokens.css, so the landing page speaks the same design language as polluxdev.com: Manrope display type, the one teal, 6px buttons, hairlines instead of shadows (the site's CLAUDE.md §1–4). The locator's own look is the demo theme's business, not this file's. */ /* The site gets its faces from Astro's font pipeline; here they come from the Google Fonts stylesheet in , behind the same metric-matched fallbacks. */ :root { --font-manrope: 'Manrope', 'Manrope Fallback', system-ui, sans-serif; --font-archivo: 'Archivo', 'Archivo Fallback', sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink-body); font-family: var(--face-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The locator inherits the page's face. */ .dropby-store-locator { font-family: var(--face-body); } /* ----------------------------------------------------------------- embed */ /* The whole viewport, edge to edge: the frame on polluxdev.com draws the border. dvh follows mobile browser chrome; vh is the fallback. */ .demo-embed, .demo-embed body { height: 100%; overflow: hidden; } .demo-embed #dropby-store-locator { --dropby-height: 100vh; --dropby-mobile-height: 100vh; width: 100vw; } @supports (height: 100dvh) { .demo-embed #dropby-store-locator { --dropby-height: 100dvh; --dropby-mobile-height: 100dvh; } } /* --------------------------------------------------------------- landing */ .demo-hero { padding: 104px var(--gutter) 88px; } /* Centred at the 1100px hero measure (CLAUDE.md §3). */ .demo-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: var(--w-prose); margin-inline: auto; text-align: center; } /* Hero display: Manrope 400, -.025em, line-height 1. Emphasis is weight, never colour (CLAUDE.md §2). */ .demo-hero__title { margin: 0; font-family: var(--face-body); font-size: clamp(44px, 6.4vw, 76px); font-weight: 400; line-height: 1; letter-spacing: -.025em; color: var(--ink-display); text-wrap: balance; } .demo-hero__title b { font-weight: 700; } .demo-hero__lead { max-width: 620px; margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--ink-body); text-wrap: pretty; } .demo-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 4px; } /* The site's button (CLAUDE.md §4) at section scale. */ .demo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--r-md); font-family: var(--face-body); font-size: 17px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); } .demo-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .demo-btn--primary { background: var(--brand); color: var(--bg); } .demo-btn--primary:hover { background: var(--brand-hover); } .demo-btn--secondary { background: transparent; border-color: rgba(14, 27, 31, .2); color: var(--ink); } .demo-btn--secondary:hover { border-color: var(--ink); } /* The locator fills the viewport below the sticky header, so the whole map is in view once it is scrolled to. Its own stacking context keeps the engine's layered panels under the header's menus. */ .demo-map { position: relative; z-index: 0; isolation: isolate; border-block: 1px solid var(--line); } .demo-landing #dropby-store-locator { --dropby-height: calc(100vh - var(--header-h)); --dropby-mobile-height: calc(100vh - var(--header-h)); } @supports (height: 100dvh) { .demo-landing #dropby-store-locator { --dropby-height: calc(100dvh - var(--header-h)); --dropby-mobile-height: calc(100dvh - var(--header-h)); } } @media (max-width: 720px) { .demo-hero { padding: 64px var(--gutter) 56px; } .demo-hero__inner { gap: 22px; } .demo-btn { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { .demo-btn { transition: none; } }