/* ============================================================
Landing page (Views/landing.ejs) — the logged-out marketing page at /.
Ported from the "Landing Page" Claude Design file; values that map onto
a token in tokens.css use the token, and the marketing-only sizes the
design introduces (60px hero, 88px section rhythm) are kept literal.
The design is desktop-only, so every breakpoint below is ours.
============================================================ */
/* The Meyer reset (cssReset.css) skips form controls, so buttons and inputs
keep the UA font/box model unless we say otherwise. */
.landing-page button,
.landing-page input {
font-family: inherit;
box-sizing: border-box;
}
.landing-page {
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--fd-text);
background: var(--fd-surface);
}
/* This file only loads on the landing page, so touching the scroll root here is
scoped by virtue of the stylesheet, not the selector. */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* The header is sticky and ~82px tall, so an un-offset anchor jump parks the
section heading underneath it. */
.landing-page section[id] {
scroll-margin-top: 96px;
}
/* footer.css already makes the flex column and pins the footer with
margin-top:auto — main just needs to absorb the slack. */
.landing-main {
flex: 1;
}
/* Colour deliberately omitted: `.landing-page a` is (0,1,1) and would outrank
every single-class component rule below it — .fd-btn--primary, .landing-nav-link,
.landing-plan-cta — repainting them all link-blue. Every anchor on this page
carries its own class, so the base rule only needs to kill underlines. */
.landing-page a {
text-decoration: none;
}
/* ---------- Shared section furniture ---------- */
.landing-section {
padding: 88px 40px;
}
.landing-section--sunken {
background: var(--fd-bg);
border-top: 1px solid var(--fd-border);
border-bottom: 1px solid var(--fd-border);
}
.landing-container {
max-width: 1040px;
margin: 0 auto;
}
/* For blocks that earn more room (the section showcase, the seven-tile
strip): the copy column stays at 1040, these go wider without a squeeze. */
.landing-container--wide {
max-width: 1240px;
}
/* The owner's side of the product goes visually backstage: a full-bleed dark
band (the #pricing treatment, inverted). Text colors inside are explicit
light-on-dark hexes -- the --fd text tokens all assume a light surface. */
.landing-section--dark {
background: var(--fd-text);
}
.landing-section-head {
text-align: center;
margin-bottom: 48px;
}
.landing-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--fd-text-muted);
}
.landing-section-head h2 {
margin: 10px 0 0;
font-size: 36px;
font-weight: 700;
letter-spacing: -0.8px;
color: var(--fd-text);
}
.landing-section-head p {
margin: 12px 0 0;
font-size: 17px;
color: var(--fd-text-secondary);
}
/* ---------- Buttons (design-system Button, variants used here) ---------- */
.fd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 600;
line-height: 1;
white-space: nowrap;
border: 1px solid transparent;
cursor: pointer;
transition: var(--fd-transition);
}
/* The DS Button scales down on mousedown; :active is the CSS equivalent. */
.fd-btn:active {
transform: scale(0.98);
}
.fd-btn--md {
padding: 10px 18px;
font-size: 14px;
min-height: 42px;
border-radius: var(--fd-radius-sm);
}
.fd-btn--lg {
padding: 13px 22px;
font-size: 15px;
min-height: 48px;
border-radius: var(--fd-radius);
}
.fd-btn--primary {
background: var(--fd-primary);
color: var(--fd-text-inverse);
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
}
.fd-btn--primary:hover {
background: var(--fd-primary-hover);
color: var(--fd-text-inverse);
}
.fd-btn--secondary {
background: var(--fd-surface);
color: var(--fd-text);
border-color: var(--fd-border);
box-shadow: var(--fd-shadow-xs);
}
.fd-btn--secondary:hover {
background: var(--fd-bg);
color: var(--fd-text);
}
/* ---------- Header ---------- */
.landing-header {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
width: 100%;
padding: 20px 40px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.landing-brand {
font-size: 26px;
font-weight: 700;
color: var(--fd-text);
letter-spacing: -0.5px;
padding: 4px 0;
}
.landing-nav {
display: flex;
align-items: center;
gap: 28px;
}
.landing-nav-link {
font-size: 14.5px;
font-weight: 500;
color: var(--fd-text-secondary);
}
.landing-nav-link:hover {
color: var(--fd-primary);
}
.landing-nav-divider {
width: 1px;
height: 22px;
background: var(--fd-border);
}
.landing-nav-login {
font-size: 14.5px;
font-weight: 600;
color: var(--fd-text);
}
.landing-nav-login:hover {
color: var(--fd-primary);
}
/* Hamburger — hidden until the nav runs out of room (see breakpoints). */
.landing-nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
background: transparent;
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius-sm);
color: var(--fd-text);
cursor: pointer;
transition: var(--fd-transition);
}
.landing-nav-toggle:hover {
background: var(--fd-bg);
border-color: var(--fd-border-hover);
}
/* ---------- Hero ---------- */
.landing-hero {
padding: 80px 40px;
background: var(--fd-surface);
}
.landing-hero-inner {
max-width: none;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 24px;
}
/* Copy left, phone showcase right. The ratio favours the phones because the
full three-phone row is 2.64x one phone wide (centre + two 0.82x sides +
two 14px gaps, nothing overlapping), while the copy is happy under 570px;
both cells are minmax(0, ...) so a long word can't push the grid past its
track. Below 1200px this collapses back to one centred column (see
Responsive). */
.landing-hero-grid {
max-width: 1440px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
align-items: center;
gap: 48px;
}
.landing-hero h1 {
margin: 0;
/* The authored means "Your whole business," must sit on one line; it
measures 8.8px of width per 1px of font size (528px at 60px). The copy
track is (min(1440px, 100vw - 80px) - 48px) / 2.45 — 438px at the 1200px
breakpoint up to 569px at the grid's cap — so the size tracks the
viewport, keeping ~10px of slack throughout. Retune the middle term if
this line's wording changes. */
font-size: clamp(47px, calc(4.5vw - 7px), 62px);
line-height: 1.06;
font-weight: 700;
letter-spacing: -1.8px;
color: var(--fd-text);
text-wrap: balance;
}
.landing-hero-sub {
margin: 0;
max-width: 640px;
font-size: 20px;
line-height: 1.6;
color: var(--fd-text-secondary);
text-wrap: pretty;
}
/* Audience caption under the phone showcase (one per set — see landing.ejs
for why it is two forced lines and why that keeps the crossfade and layout
stable). The transform on the side phones paints them 22px low without
affecting layout, so the caption's top margin carries that visual offset. */
.landing-phone-caption {
flex-basis: 100%;
margin: 40px 0 0;
text-align: center;
font-size: 13px;
line-height: 1.5;
}
.landing-phone-caption-lead,
.landing-phone-caption-tail {
display: block;
}
.landing-phone-caption-lead {
font-weight: 600;
color: var(--fd-text-secondary);
}
.landing-phone-caption-tail {
color: var(--fd-text-muted);
}
/* ---------- Hero phone showcase ---------- */
/*
Three screenshots in a static phone bezel. The look is the editor preview's
(.yl-phone-frame in yourPage.css) — black frame, 10px bezel, 40px/32px radii,
--fd-shadow-xl plus a hairline ring — but sized off the image rather than off
the viewport, which is all that class's width/height math does.
Only a width is ever set. Height stays auto so each image's own 780x1418
ratio drives the box: a screenshot can't be cropped or squashed here, and a
later set shot at a different height needs no CSS. The width/height
attributes on the reserve that box before the bytes arrive.
*/
.landing-phones {
/* The full row is 2.64W + 28px (centre + two 0.82W sides + two 14px gaps,
all fully visible), and the phone track is (min(1440px, 100vw - 80px)
- 48px) x 1.45 / 2.45 — so W tracks the viewport with ~6px of slack,
from ~228px at the 1200px breakpoint to the 300px cap the 1440px grid
allows. */
--landing-phone-w: clamp(227px, calc(22.3vw - 40px), 300px);
margin: 0;
}
/* column-gap, not gap: the caption below wraps onto its own full-width row,
and a row-gap would stack on top of the caption's own margin. wrap is safe
for the phones themselves — --landing-phone-w is clamped so the row always
fits inside the hero padding, so only the flex-basis:100% caption ever
wraps. */
.landing-phone-set {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
column-gap: 14px;
}
.landing-phone {
flex: none;
width: var(--landing-phone-w);
padding: 10px;
background: #000000;
border-radius: 40px;
box-shadow: var(--fd-shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.landing-phone img {
display: block;
width: 100%;
height: auto;
border-radius: 32px;
}
.landing-phone--center {
position: relative;
z-index: 2;
}
/* The outer two read as secondary: sized down for real (width, bezel and
radii all x0.82, so the frame stays proportionate) and nudged below the
centre phone's midline, fully visible beside it. Sized in layout, and flat
on purpose: any transform that scales or rotates makes the GPU resample the
painted raster a second time and soften the screenshots — a plain integer
translate is the one transform that stays pixel-exact, so these render at
full sharpness. */
.landing-phone--side {
position: relative;
z-index: 1;
width: calc(var(--landing-phone-w) * 0.82);
padding: 8px;
border-radius: 33px;
transform: translateY(22px);
}
.landing-phone--side img {
border-radius: 26px;
}
/* ---------- Hero showcase rotation ---------- */
/* All sets share one grid cell: every set stays in flow, the container is as
tall as the tallest visible set (identical 780x1418 images make that every
set's height, so activation can never reflow anything), and no position swap
is needed at the crossfade. z-index works on grid items without position. */
.landing-phone-stack {
display: grid;
}
.landing-phone-set {
grid-area: 1 / 1;
z-index: 1;
opacity: 0;
pointer-events: none;
/* Outgoing half of an asymmetric pair (incoming is on .is-active below):
accelerate holds the outgoing set near opacity 1 early, decelerate gets
the incoming one there fast, so the two sets' combined alpha stays ~1
and the pixel-registered black bezels never grey at the midpoint. */
transition: opacity 450ms cubic-bezier(0.4, 0, 1, 1);
}
/* This rule is load-bearing: .landing-phone-set's display:flex above is
author-origin and beats the UA's [hidden] { display: none } regardless of
specificity — without it the deferred sets would render as empty bezels for
no-JS visitors. landing.js removes [hidden] only once a set is decoded. */
.landing-phone-set[hidden] {
display: none;
}
.landing-phone-set.is-active {
z-index: 2; /* incoming always paints over outgoing */
opacity: 1;
pointer-events: auto;
transition: opacity 450ms cubic-bezier(0, 0, 0.2, 1);
}
/* Dots are dead weight without JS, so they ship invisible; visibility (not
display) keeps the row's box reserved from first paint, so the JS reveal
cannot shift the sections below the hero. */
.landing-phone-dots {
display: flex;
justify-content: center;
gap: 4px;
margin-top: 28px;
visibility: hidden;
}
.landing-phones.is-ready .landing-phone-dots {
visibility: visible;
}
/* The button is the 28px hit area (WCAG 2.5.8 wants >=24); the span inside is
the 8px visual dot. The active dot grows into a 22px pill inside the fixed
button box, so the row's width never changes (7x28 + 6x4 = 220px). */
.landing-phone-dot {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: none;
cursor: pointer;
border-radius: var(--fd-radius-full);
}
.landing-phone-dot span {
width: 8px;
height: 8px;
border-radius: var(--fd-radius-full);
background: var(--fd-border-hover);
transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1),
background 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.landing-phone-dot:hover span {
background: var(--fd-text-muted);
}
.landing-phone-dot.is-active span {
width: 22px;
background: var(--fd-primary);
}
.landing-phone-dot:focus-visible {
outline: 2px solid var(--fd-primary);
outline-offset: 2px;
}
/* The screen chips are mobile-only chrome -- wide layouts show all three
screens side by side, so there is nothing to switch. The <=760 block lays
them out. */
.landing-phone-chips {
display: none;
}
@media (prefers-reduced-motion: reduce) {
/* Manual dot switches become instant cuts; landing.js separately never
auto-advances under reduced motion. */
.landing-phone-set,
.landing-phone-set.is-active,
.landing-phone-dot span {
transition: none;
}
}
/* ---------- Hero handle claim field ---------- */
.landing-claim {
width: 100%;
max-width: 560px;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.landing-claim-field {
display: flex;
align-items: center;
width: 100%;
border: 1.5px solid #e8eaed;
border-radius: var(--fd-radius-sm);
background: var(--fd-surface);
overflow: hidden;
transition: var(--fd-transition);
}
.landing-claim-field:focus-within {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.landing-claim-prefix {
padding: 14px 0 14px 16px;
font-size: 15px;
color: #888;
font-weight: 500;
user-select: none;
white-space: nowrap;
}
.landing-claim-input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
padding: 14px 4px;
font-size: 15px;
color: var(--fd-text);
outline: none;
}
.landing-claim-submit {
margin: 5px;
}
.landing-claim-note {
margin: 0;
font-size: 13.5px;
color: var(--fd-text-muted);
}
/* The screenshot framing registry used to live here: one --crop-y per
mid-page window onto a hero screenshot. Every one of those windows is
gone -- the showcase shows full screens in a phone, the tile strip shows
whole pages, and step 2 of #how now shows the editor control instead of a
crop of its output. No mid-page image is cropped, so a re-shoot needs no
offset re-tuning anywhere. */
/* ---------- How it works ---------- */
.landing-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.landing-step {
display: flex;
flex-direction: column;
background: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
padding: 28px;
box-shadow: var(--fd-shadow);
}
/* Fixed-height slot pinned to the card bottom so the three cards stay equal
however tall their copy runs. 176 = the tallest artifact (step 2's four-row
section list, 155px) plus the 20px stand-off; the pill and the QR simply
centre in the rest. */
.landing-step-artifact {
margin-top: auto;
padding-top: 20px;
height: 176px;
display: flex;
align-items: center;
justify-content: center;
}
/* Step 2: a miniature of the page editor's section list. Grey inset panel,
white rows -- the editor's own arrangement, so the shape is recognisable
the first time an owner opens Your Page. */
.landing-step-sections {
width: 100%;
/* Never bites in the 3-up grid (the panel is ~185px there). It exists for
the stacked widths, where an 800px-wide card would otherwise smear four
12.5px rows across the whole thing; capped, the panel centres in the
slot exactly as step 1's pill and step 3's QR already do. */
max-width: 400px;
background: var(--fd-bg);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
padding: 7px;
display: flex;
flex-direction: column;
gap: 5px;
}
.landing-step-sec {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
background: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: 8px;
}
/* The editor's reorder buttons, scaled: side by side with a 2px gap, each a
bordered surface-coloured box (yourPage.css .yl-move-arrows/.yl-move-btn at
26px; 17 here is the same proportion against a 24px chip as 26 is against
the editor's 38px one). All six stay ONE shade on purpose -- the real list
fades "up" on the first row and "down" on the last to 30%, which at this
size would read as a rendering fault rather than as disabled state. */
.landing-step-sec-move {
display: flex;
gap: 2px;
flex-shrink: 0;
}
.landing-step-sec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
border: 1px solid var(--fd-border);
border-radius: 4px;
background: var(--fd-surface);
color: var(--fd-text-secondary);
}
/* Neutral, like the editor's .yl-comp-icon -- every section chip there is the
same grey, so the accent tints the showcase cards use would be a landing-page
invention. Keeps small-text contrast out of the argument too. */
.landing-step-sec-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 7px;
background: var(--fd-border-light);
color: var(--fd-text-secondary);
}
.landing-step-sec-label {
font-size: 12.5px;
font-weight: 500;
color: var(--fd-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.landing-step-sec--add {
justify-content: center;
padding: 3px 8px;
background: none;
border-style: dashed;
font-size: 11.5px;
color: var(--fd-text-secondary);
}
/* Read-only echo of the hero claim field (step 1). */
.landing-step-pill {
display: inline-flex;
align-items: baseline;
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius-full);
background: var(--fd-bg);
padding: 18px 22px;
font-size: 17px;
white-space: nowrap;
}
.landing-step-pill-prefix {
color: var(--fd-text-secondary);
}
.landing-step-pill-handle {
color: var(--fd-text);
font-weight: 600;
}
/* The real QR (step 3): the app's own generator output for frontdesk.page. */
.landing-step-artifact--qr {
flex-direction: column;
}
.landing-step-qr {
width: 144px;
height: 144px;
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
background: #ffffff;
padding: 8px;
box-sizing: border-box;
}
.landing-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--fd-radius-full);
background: var(--fd-primary-light);
color: var(--fd-primary);
font-size: 14px;
font-weight: 700;
}
.landing-step h3 {
margin: 16px 0 8px;
font-size: 17px;
font-weight: 600;
color: var(--fd-text);
}
.landing-step p {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--fd-text-secondary);
}
/* ---------- Page sections: section showcase ---------- */
/* Nine selector cards beside one hero-style phone. landing.js rotates the
phone through the cards; a press shows that card's screen at once and the
rotation re-anchors from it after a longer dwell instead of stopping for
good -- deliberately unlike the hero (founder-specced). */
.landing-showcase {
--showcase-phone-w: 300px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 56px;
align-items: center;
}
/* position:relative so the rail-centering math (card.offsetLeft) is
anchored to this box in the sub-1200px swipe layout. */
.landing-showcase-cards {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
/* The card is a real