/* ============================================================ PERKSLOCAL · PUBLIC SITE Page-level styles for the marketing pages. Design tokens and component classes come from tokens/*.css and components.css; this file only holds what is specific to the public site. ============================================================ */ * { box-sizing: border-box; } body { margin: 0; background: var(--pl-white); color: var(--pl-charcoal); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } a { color: var(--pl-purple-500); text-decoration: none; } a:hover { color: var(--pl-purple-400); } /* Dark bands: links and selection have to flip or they vanish. */ .pl-dark a { color: var(--pl-purple-300); } .pl-dark a:hover { color: var(--pl-gold-400); } .pl-dark ::selection { background: rgba(251, 191, 36, 0.35); } /* The sticky header is 72px of flow above the hero. On a dark hero we want the hero to run underneath it, so pull it up and pad the space back. */ .pl-hero-bleed { margin-top: -73px; padding-top: calc(73px + clamp(20px, 3vw, 44px)) !important; } /* ── Contents rail (legal pages). [data-on] is set by motion-kit's scrollspy. ── */ .pl-toc-link { font-size: 14.5px; line-height: 1.4; color: var(--pl-gray-500); padding: 9px 12px; border-left: 2px solid transparent; border-radius: 0 var(--radius-md) var(--radius-md) 0; transition: color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth); } .pl-toc-link:hover { color: var(--pl-purple-500); background: var(--pl-purple-100); border-left-color: var(--pl-purple-400); } .pl-toc-link:focus-visible { outline: 2px solid var(--pl-purple-400); outline-offset: 2px; } .pl-toc-link[data-on] { color: var(--pl-purple-600); background: var(--pl-purple-100); border-left-color: var(--pl-purple-500); font-weight: 600; } /* ── Skip link ── Off-screen until focused. The header is sticky and the hero is tall, so a keyboard visitor otherwise tabs the whole nav on every page. */ .pl-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--pl-charcoal); color: var(--pl-white); font-family: var(--font-ui); font-size: 15px; font-weight: 600; padding: 12px 20px; border-radius: 0 0 var(--radius-lg) 0; } .pl-skip:focus { left: 0; color: var(--pl-white); } /* Visible to screen readers only — table captions, form legends. */ .pl-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; } /* ── Form validation ── A rejected field has to say so. Never let a submit fail silently. */ .pl-input[aria-invalid="true"] { border-color: var(--pl-danger); } .pl-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14); } .pl-error { font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; color: var(--pl-danger); } /* ── Section eyebrow ── The small label above a section heading. Deliberately plain text, matching the hero's "LOCAL PERKS. REAL VALUE." lockup: a pill on every section made each one shout at the same volume, so none of them read as a section. `.pl-overline` (the pill in components.css) stays for the UI kit, but the public site does not use it. The `--on-*` variants exist because the bands vary: dark hero, purple gradient, off-white. Pick the one that matches the band rather than relying on inheritance. */ .pl-eyebrow { display: block; font-family: var(--font-ui); font-size: 12.5px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-tagline); text-transform: uppercase; color: var(--pl-purple-500); } .pl-eyebrow--gold { color: var(--pl-gold-600); } .pl-eyebrow--on-dark { color: rgba(255, 255, 255, 0.72); } .pl-eyebrow--on-dark-gold { color: var(--pl-gold-400); } .pl-eyebrow .pl-eyebrow__accent { color: var(--pl-gold-400); } /* ── Header ── */ .pl-nav { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth); background: rgba(250, 250, 247, 0.72); border-bottom: 1px solid transparent; } .pl-nav__inner { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; } .pl-nav__logo { display: flex; align-items: center; flex: 0 0 auto; } .pl-nav__logo img { height: 34px; display: block; transition: filter var(--dur-base) var(--ease-smooth); } .pl-nav__links { display: flex; align-items: center; gap: 6px; margin-left: 8px; } .pl-nav__link { font-family: var(--font-ui); font-size: 15px; font-weight: 500; padding: 9px 14px; border-radius: var(--radius-full); color: var(--pl-charcoal); background: transparent; transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); } .pl-nav__link:hover { background: var(--pl-purple-100); color: var(--pl-purple-500); } .pl-nav__link[aria-current="page"] { color: var(--pl-purple-500); background: var(--pl-purple-100); } .pl-nav__spacer { flex: 1 1 auto; } .pl-nav__actions { display: flex; align-items: center; gap: 12px; } .pl-nav__demo { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--pl-charcoal); padding: 9px 6px; transition: color var(--dur-base) var(--ease-smooth); } .pl-nav__demo:hover { color: var(--pl-purple-400); } /* Sized to `.pl-btn--md` — same height, same type scale as the "Get started" button it now sits beside, so the pair reads as one lockup. */ .pl-nav__login { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 var(--space-6); white-space: nowrap; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; letter-spacing: 0.01em; color: var(--pl-charcoal); border-radius: var(--radius-full); border: 1px solid var(--border-medium); background: transparent; transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth); } .pl-nav__login:hover { background: var(--pl-purple-100); border-color: var(--border-accent); color: var(--pl-purple-500); } .pl-nav__burger { width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--border-default); background: var(--pl-white); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth); } .pl-nav__burger span { width: 18px; height: 2px; border-radius: 2px; display: block; background: var(--pl-charcoal); transition: background var(--dur-base) var(--ease-smooth); } /* Inverted state, applied by the header script whenever a dark band is under it. */ .pl-nav[data-dark] { background: rgba(12, 7, 24, 0.20); border-bottom-color: rgba(255, 255, 255, 0.10); } .pl-nav[data-dark][data-scrolled] { background: rgba(12, 7, 24, 0.62); } .pl-nav[data-dark] .pl-nav__logo img { filter: brightness(0) invert(1); } .pl-nav[data-dark] .pl-nav__link { color: rgba(255, 255, 255, 0.8); } .pl-nav[data-dark] .pl-nav__link[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.14); } /* The light hover pill wins over a dark bar, but the inverted white text does not flip back with it — white on near-white. Ink goes dark purple for the hover. */ .pl-nav[data-dark] .pl-nav__link:hover { background: var(--pl-purple-100); color: var(--pl-purple-600); } .pl-nav[data-dark] .pl-nav__demo { color: rgba(255, 255, 255, 0.88); } .pl-nav[data-dark] .pl-nav__login { color: rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.26); } .pl-nav[data-dark] .pl-nav__login:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); } .pl-nav[data-dark] .pl-nav__burger { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.26); } .pl-nav[data-dark] .pl-nav__burger span { background: rgba(255, 255, 255, 0.88); } /* Light state once scrolled off the dark bands. */ .pl-nav[data-scrolled]:not([data-dark]) { background: rgba(255, 255, 255, 0.94); border-bottom-color: var(--border-subtle); box-shadow: 0 6px 24px rgba(31, 31, 35, 0.06); } /* ── Mobile menu ── */ .pl-menu { display: none; border-top: 1px solid var(--border-subtle); padding: 14px 24px 22px; background: var(--pl-white); flex-direction: column; gap: 4px; } .pl-menu a { font-family: var(--font-ui); font-size: 17px; font-weight: 500; padding: 12px 8px; border-radius: var(--radius-lg); color: var(--pl-charcoal); } .pl-menu a:hover { background: var(--pl-purple-100); } .pl-menu__login { border-top: 1px solid var(--border-subtle); margin-top: 8px; font-weight: 600 !important; } /* The bar switches to the burger below 1180px, not at the 900px the rest of the layout uses. Between the two, "For Customers" and "Book a demo" wrap onto a second line while their neighbours stay on one, and there is no fixing that in place: forcing nowrap overflows the bar by 37px at 1024 and 161px at 900. The five links only sit on one line from 1180 up, so that is where they are allowed to appear. iPad landscape and small laptops get the menu instead. The open panel is scoped to this query too. It is the only thing that displays it, so widening the window past the breakpoint cannot strand an open menu with its burger gone. */ @media (max-width: 1179px) { .pl-nav__links, .pl-nav__actions { display: none; } .pl-nav__burger { display: flex; } .pl-menu[data-open] { display: flex; } } /* ── App store badges ── Colour is inherited from the band, so the same badge works on the dark customer hero and on a white section. An unpublished store renders as [aria-disabled]: visibly dimmed and unclickable, never a dead link. */ .pl-store-badges { display: flex; flex-wrap: wrap; gap: 12px; } .pl-store-badge { display: inline-flex; align-items: center; gap: 12px; /* A pending store renders as a