/* ══════════════════════════════════════════════════════════════════════
FlashOrder marketing site — design tokens
══════════════════════════════════════════════════════════════════════ */
:root {
/* iOS system palette — systemBlue accent, systemGroupedBackground surface */
--fo-primary: #007AFF;
--fo-primary-hover: #0066D6;
--fo-primary-light: #E9F2FF;
--fo-accent-green: #34C759;
--fo-ink: #1C1C1E; /* label */
--fo-ink-soft: #48484A; /* secondaryLabel */
--fo-ink-muted: #6E6E73; /* systemGray, darkened for AA contrast on white */
--fo-surface: #FFFFFF;
--fo-surface-muted: #F2F2F7; /* systemGroupedBackground */
--fo-card: #FFFFFF; /* cards sit flush with the page in light mode */
--fo-border: #E5E5EA; /* systemGray5 */
--fo-radius: 18px;
--fo-shadow: 0 1px 2px rgba(28, 28, 30, 0.03), 0 10px 26px -14px rgba(28, 28, 30, 0.14);
--fo-max: 1160px;
color-scheme: light;
}
/* Dark is opt-in via the header toggle, NOT prefers-color-scheme — light is the
default look for everyone. An inline script in stamps data-fo-theme on
before first paint so there is no flash of the wrong theme. */
:root[data-fo-theme="dark"] {
--fo-primary: #0A84FF; /* systemBlue (dark) */
--fo-primary-hover: #409CFF;
--fo-primary-light: rgba(10, 132, 255, 0.16);
--fo-accent-green: #30D158;
--fo-ink: #F2F2F7; /* label (dark) */
--fo-ink-soft: #C7C7CC; /* secondaryLabel (dark) */
--fo-ink-muted: #98989F; /* lifted for AA on #1C1C1E */
--fo-surface: #000000; /* true black, as iOS does */
--fo-surface-muted: #1C1C1E; /* systemGroupedBackground (dark) */
--fo-card: #1C1C1E; /* secondarySystemGroupedBackground —
cards must lift off black, not vanish */
--fo-border: #38383A; /* systemGray5 (dark) */
--fo-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 26px -14px rgba(0,0,0,0.6);
color-scheme: dark;
}
* { box-sizing: border-box; }
/* The `hidden` attribute only carries a default `display: none`, so ANY class
rule that sets `display` silently defeats it. `.assist-panel` did exactly
that (display: flex), which left the chat panel open on every page load from
the day the widget shipped — the bubble toggled the attribute and nothing
moved. Keep this rule above everything that sets `display`. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
color: var(--fo-ink);
background: var(--fo-surface);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
.wrap {
max-width: var(--fo-max);
margin: 0 auto;
padding: 0 24px;
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--fo-primary);
color: #fff;
padding: 10px 16px;
border-radius: 0 0 8px 0;
z-index: 200;
}
.skip-link:focus { left: 0; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; color: var(--fo-ink-soft); }
.eyebrow {
color: var(--fo-primary);
font-weight: 700;
font-size: .8rem;
letter-spacing: .08em;
text-transform: uppercase;
margin: 0 0 .6em;
}
.center { text-align: center; margin-left: auto; margin-right: auto; }
h2.center { max-width: 640px; }
/* ── buttons ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
padding: .7em 1.3em;
border-radius: 999px;
font-weight: 600;
font-size: .95rem;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--fo-primary); color: #fff; box-shadow: var(--fo-shadow); }
.btn-primary:hover { background: var(--fo-primary-hover); }
/* iOS secondary actions read as blue text on a light fill, not outlined dark */
.btn-ghost { background: var(--fo-card); color: var(--fo-primary); border-color: var(--fo-border); }
.btn-ghost:hover { background: var(--fo-primary-light); border-color: var(--fo-primary-light); }
.btn-lg { padding: .85em 1.7em; font-size: 1rem; }
/* ══════════════════════════════════════════════════════════════════════
Header
══════════════════════════════════════════════════════════════════════ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--fo-surface) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--fo-border);
}
.header-inner {
display: flex;
align-items: center;
gap: 24px;
height: 68px;
}
.brand {
display: flex;
align-items: center;
gap: .5em;
text-decoration: none;
font-weight: 800;
font-size: 1.15rem;
color: var(--fo-ink);
margin-right: auto;
}
/* The real FlashOrder mark (QR motif, #007AFF + #FF7A00) replaced the 🍽️ emoji
on 2026-09-07. The SVG ships stripped of its C2PA manifest — that metadata is
8 KB of the design tool's 8.4 KB export, against 658 bytes of geometry. */
.brand-mark { width: 26px; height: 26px; display: block; flex: none; }
/* Site version (major.minor.patch.build) — bumped by hand on every change, see CLAUDE.md */
.brand-version {
font-size: .68rem;
font-weight: 600;
color: var(--fo-ink-muted);
font-variant-numeric: tabular-nums;
align-self: flex-end;
margin-bottom: .25em;
}
.main-nav {
display: flex;
gap: 28px;
}
.main-nav a {
text-decoration: none;
color: var(--fo-ink-soft);
font-weight: 600;
font-size: .95rem;
}
.main-nav a:hover { color: var(--fo-primary); }
.header-cta { display: flex; gap: 10px; align-items: center; }
.lang-select select {
appearance: none;
-webkit-appearance: none;
background: var(--fo-surface-muted) url("data:image/svg+xml;utf8,") no-repeat right 8px center;
background-size: 12px;
border: 1px solid var(--fo-border);
border-radius: 999px;
color: var(--fo-ink);
font: inherit;
font-size: .85rem;
font-weight: 600;
padding: .5em 1.9em .5em .9em;
cursor: pointer;
}
.lang-select select:hover { border-color: var(--fo-primary); color: var(--fo-primary); }
.lang-select select:focus-visible { outline: 2px solid var(--fo-primary); outline-offset: 2px; }
/* the chevron is a data: URI, so its colour can't inherit — restate it for dark */
:root[data-fo-theme="dark"] .lang-select select {
background-image: url("data:image/svg+xml;utf8,");
}
/* ── theme toggle — iOS segmented control: grey track, white sliding thumb ── */
.theme-toggle {
display: inline-flex;
gap: 2px;
padding: 2px;
border-radius: 999px;
background: var(--fo-surface-muted);
border: 1px solid var(--fo-border);
}
.theme-opt {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 26px;
padding: 0;
border: none;
border-radius: 999px;
background: transparent;
color: var(--fo-ink-muted);
cursor: pointer;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.theme-opt svg { width: 15px; height: 15px; }
.theme-opt:hover { color: var(--fo-ink); }
.theme-opt[aria-pressed="true"] {
background: var(--fo-surface);
color: var(--fo-primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
:root[data-fo-theme="dark"] .theme-opt[aria-pressed="true"] {
background: #3A3A3C; /* systemGray4 (dark) — the thumb */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.theme-opt:focus-visible { outline: 2px solid var(--fo-primary); outline-offset: 2px; }
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
width: 36px;
height: 36px;
background: none;
border: 1px solid var(--fo-border);
border-radius: 8px;
align-items: center;
justify-content: center;
cursor: pointer;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--fo-ink); display: block; }
@media (max-width: 860px) {
.header-inner { flex-wrap: wrap; height: auto; min-height: 68px; gap: 10px; }
.main-nav, .header-cta { display: none; }
.nav-toggle { display: flex; }
/* Theme + language stay reachable without opening the menu; tighten them so
brand, both controls and the burger still share one row at 375px. */
.lang-select { margin-left: auto; }
.theme-opt { width: 26px; }
.theme-opt svg { width: 14px; height: 14px; }
.lang-select select { padding: .45em 1.7em .45em .75em; }
}
@media (max-width: 400px) {
.brand { font-size: 1.05rem; }
.header-inner { gap: 8px; }
}
/* Very narrow phones (≤360px): drop the wordmark so brand, theme, language and
the burger still share one row — the FlashOrder mark keeps the link identifiable. */
@media (max-width: 360px) {
.brand-name, .brand-version { display: none; }
body.nav-open .main-nav,
body.nav-open .header-cta {
display: flex;
width: 100%;
flex-basis: 100%;
}
body.nav-open .main-nav {
flex-direction: column;
gap: 14px;
padding-top: 14px;
border-top: 1px solid var(--fo-border);
}
body.nav-open .header-cta { flex-wrap: wrap; padding-bottom: 16px; }
}
/* ══════════════════════════════════════════════════════════════════════
Hero
══════════════════════════════════════════════════════════════════════ */
.hero {
padding: 76px 0 48px;
background: linear-gradient(180deg, var(--fo-primary-light) 0%, var(--fo-surface) 70%);
}
.hero-inner {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 56px;
align-items: center;
}
.hero-sub { font-size: 1.08rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 22px; }
.hero-actions.center { justify-content: center; }
.hero-trust {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
padding: 0;
margin: 0;
color: var(--fo-ink-muted);
font-size: .88rem;
}
.hero-trust li { display: flex; align-items: center; gap: .4em; }
.hero-trust li::before { content: "✓"; color: var(--fo-primary); font-weight: 700; }
/* hero visual mock */
.hero-visual { position: relative; min-height: 420px; }
.mock-phone {
width: 240px;
background: var(--fo-card);
border: 7px solid var(--fo-border);
border-radius: 38px;
box-shadow: 0 20px 50px -20px rgba(28, 28, 30, 0.28);
position: relative;
z-index: 2;
margin: 0 auto;
}
.mock-phone-notch {
width: 66px; height: 14px;
background: var(--fo-border);
border-radius: 0 0 12px 12px;
margin: 0 auto;
}
.mock-phone-screen { padding: 16px 14px 18px; }
.mock-menu-header { font-weight: 700; font-size: .85rem; margin-bottom: 12px; }
.mock-menu-item {
display: flex;
justify-content: space-between;
font-size: .8rem;
padding: 9px 0;
border-bottom: 1px solid var(--fo-border);
color: var(--fo-ink-soft);
}
.mock-menu-item--added { color: var(--fo-primary); font-weight: 700; }
.mock-price { color: var(--fo-ink-muted); }
.mock-cta {
width: 100%;
margin-top: 14px;
padding: .7em;
border: none;
border-radius: 10px;
background: var(--fo-primary);
color: #fff;
font-weight: 700;
font-size: .82rem;
}
.mock-ticket {
position: absolute;
width: 190px;
background: var(--fo-card);
border: 1px solid var(--fo-border);
border-radius: 12px;
box-shadow: var(--fo-shadow);
padding: 12px 14px;
font-size: .78rem;
}
.mock-ticket-head {
display: flex;
justify-content: space-between;
font-weight: 700;
margin-bottom: 8px;
}
.mock-pulse { color: var(--fo-accent-green); font-size: .72rem; font-weight: 700; }
.mock-ticket-row { padding: 4px 0; color: var(--fo-ink-soft); }
.mock-ticket--kitchen { top: 10px; right: -10px; z-index: 3; transform: rotate(3deg); }
.mock-ticket--bar { bottom: 20px; left: -20px; z-index: 1; transform: rotate(-4deg); }
@media (max-width: 980px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-visual { min-height: 340px; }
.mock-ticket--bar { left: 0; }
.mock-ticket--kitchen { right: 0; }
}
/* ══════════════════════════════════════════════════════════════════════
Stat strip
══════════════════════════════════════════════════════════════════════ */
.stat-strip {
background: var(--fo-surface-muted);
border-top: 1px solid var(--fo-border);
border-bottom: 1px solid var(--fo-border);
padding: 34px 0;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
text-align: center;
}
.stat strong {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--fo-primary);
}
.stat span { font-size: .82rem; color: var(--fo-ink-muted); }
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
/* ══════════════════════════════════════════════════════════════════════
Sections
══════════════════════════════════════════════════════════════════════ */
.section { padding: 88px 0; }
.section-muted { background: var(--fo-surface-muted); }
/* compare */
.compare h2 { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 40px;
}
.compare-col {
border-radius: var(--fo-radius);
padding: 28px 26px;
border: 1px solid var(--fo-border);
}
.compare-old { background: var(--fo-surface-muted); }
.compare-new { background: var(--fo-primary-light); border-color: color-mix(in srgb, var(--fo-primary) 30%, var(--fo-border)); }
.compare-col h3 { margin-bottom: .8em; }
.compare-col ul { margin: 0; padding-left: 1.2em; color: var(--fo-ink-soft); }
.compare-col li { margin-bottom: .6em; }
.compare-new h3 { color: var(--fo-primary); }
@media (max-width: 760px) { .compare-grid { grid-template-columns: 1fr; } }
/* feature grid */
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 44px;
}
.feature-card {
background: var(--fo-card);
border: 1px solid var(--fo-border);
border-radius: var(--fo-radius);
padding: 26px 24px;
box-shadow: 0 1px 2px rgba(28, 28, 30, 0.04);
}
.feature-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--fo-primary-light);
color: var(--fo-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card p { font-size: .93rem; margin: 0; }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } }
/* screenshots */
/* Lead row: the guest's phone beside the waiter board. At the 1160px wrap the
250px phone (1290:2796) and the remaining 16:10 frame land within ~10px of
each other in height, so the two captions sit on the same line. */
.screens-lead {
display: grid;
grid-template-columns: 250px 1fr;
gap: 26px;
margin-top: 44px;
align-items: start;
}
/* Two-up for the two admin cards. */
.shot-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
margin-top: 26px;
}
/* Device frame — the guest really orders on a phone, so the one guest capture
is a real 430x932 screen in a bezel rather than a desktop window. */
.phone-frame {
background: var(--fo-ink);
border-radius: 30px;
padding: 7px;
box-shadow: 0 8px 24px rgba(28, 28, 30, 0.18);
}
.shot--phone .phone-frame img {
aspect-ratio: 1290 / 2796;
object-fit: cover;
object-position: top center;
border: 0;
padding: 0;
background: transparent;
border-radius: 24px;
box-shadow: none;
}
.shot { margin: 0; }
/* The three captures are real UI crops with very different shapes (a wide
export card, a squarer settings card, a dashboard). `contain` in one fixed
frame keeps every button readable and the three captions aligned — `cover`
would silently crop the widest card down to its left third. */
.shot img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: contain;
border: 1px solid var(--fo-border);
border-radius: var(--fo-radius);
background: var(--fo-surface-muted);
padding: 10px;
box-shadow: 0 1px 2px rgba(28, 28, 30, 0.04);
}
.shot figcaption {
margin-top: 12px;
font-size: .88rem;
color: var(--fo-ink-soft);
text-align: center;
}
@media (max-width: 860px) {
.screens-lead,
.shot-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
.phone-frame { max-width: 280px; margin: 0 auto; }
}
/* roles */
.role-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 40px 0 32px;
}
.role-tab {
border: 1px solid var(--fo-border);
background: var(--fo-surface);
color: var(--fo-ink-soft);
padding: .55em 1.1em;
border-radius: 999px;
font-weight: 600;
font-size: .88rem;
cursor: pointer;
}
.role-tab.is-active { background: var(--fo-primary); border-color: var(--fo-primary); color: #fff; }
.role-panels { max-width: 640px; margin: 0 auto; text-align: center; min-height: 120px; }
.role-panel { display: none; }
.role-panel.is-active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.role-panel p { font-size: 1.02rem; }
/* how it works */
.steps {
list-style: none;
margin: 44px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.step {
background: var(--fo-card);
border: 1px solid var(--fo-border);
border-radius: var(--fo-radius);
padding: 26px 22px;
position: relative;
box-shadow: 0 1px 2px rgba(28, 28, 30, 0.04);
}
.step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
background: var(--fo-primary);
color: #fff;
font-weight: 700;
font-size: .85rem;
margin-bottom: 14px;
}
.step p { font-size: .9rem; margin: 0; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
/* trust */
.trust-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.trust-list { list-style: none; padding: 0; margin: 0; }
.trust-list li {
padding: 14px 0 14px 30px;
border-bottom: 1px solid var(--fo-border);
position: relative;
color: var(--fo-ink-soft);
font-weight: 500;
}
.trust-list li:last-child { border-bottom: none; }
.trust-list li::before {
content: "✓";
position: absolute;
left: 0; top: 14px;
color: var(--fo-primary);
font-weight: 700;
}
@media (max-width: 800px) { .trust-grid { grid-template-columns: 1fr; } }
/* CTA banner */
.cta-banner {
background: linear-gradient(160deg, #0A84FF, #007AFF 55%, #5AC8FA);
color: #fff;
padding: 74px 0;
text-align: center;
}
/* full-brightness blue is punishing against a black page — deepen it */
:root[data-fo-theme="dark"] .cta-banner {
background: linear-gradient(160deg, #0A2A4F, #0B4DA2 55%, #0A84FF);
}
.cta-banner-inner { max-width: 620px; margin: 0 auto; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #ffffffdd; margin-bottom: 28px; }
.cta-banner .btn-primary { background: #fff; color: #007AFF; }
.cta-banner .btn-primary:hover { background: #ffffffe6; }
/* FAQ */
.faq-list { max-width: 720px; margin: 44px auto 0; }
.faq-item { border-bottom: 1px solid var(--fo-border); }
.faq-q {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 18px 0;
font-size: 1rem;
font-weight: 600;
color: var(--fo-ink);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-q::after {
content: "+";
font-size: 1.3rem;
color: var(--fo-primary);
transition: transform .2s ease;
margin-left: 12px;
}
.faq-q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .25s ease;
}
.faq-a p { padding-bottom: 18px; margin: 0; }
/* contact */
.contact-inner { text-align: center; max-width: 560px; margin: 0 auto; }
/* ── Create your demo form ── */
.demo-intro { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; }
.demo-form {
max-width: 440px;
margin: 36px auto 0;
background: var(--fo-card);
border: 1px solid var(--fo-border);
border-radius: var(--fo-radius);
padding: 28px 26px;
box-shadow: var(--fo-shadow);
}
.demo-field { display: block; margin-bottom: 16px; }
.demo-field span {
display: block;
font-size: .85rem;
font-weight: 600;
color: var(--fo-ink-soft);
margin-bottom: 6px;
}
.demo-field input {
width: 100%;
padding: .65em .9em;
font: inherit;
color: var(--fo-ink);
background: var(--fo-surface-muted);
border: 1px solid var(--fo-border);
border-radius: 10px;
}
.demo-field input:focus-visible { outline: 2px solid var(--fo-primary); outline-offset: 1px; }
.demo-field select {
width: 100%;
padding: .65em .9em;
font: inherit;
color: var(--fo-ink);
background: var(--fo-surface-muted);
border: 1px solid var(--fo-border);
border-radius: 10px;
}
.demo-field select:focus-visible { outline: 2px solid var(--fo-primary); outline-offset: 1px; }
:root[data-fo-theme="dark"] .demo-field select { background: #2C2C2E; border-color: #48484A; }
/* In dark mode --fo-surface-muted equals the card colour, so the fields would
vanish into the form card — lift them to iOS's tertiary fill instead. */
:root[data-fo-theme="dark"] .demo-field input { background: #2C2C2E; border-color: #48484A; }
.demo-slug {
font-size: .85rem;
color: var(--fo-ink-muted);
margin: -6px 0 16px;
overflow-wrap: anywhere;
}
.demo-slug strong { color: var(--fo-ink); }
.demo-slug-status { margin-left: .4em; font-weight: 700; }
.demo-slug-status.ok { color: var(--fo-accent-green); }
.demo-slug-status.bad { color: #FF3B30; }
.demo-submit { width: 100%; margin-top: 4px; }
.demo-submit[disabled] { opacity: .55; cursor: default; transform: none; }
.demo-note { font-size: .8rem; color: var(--fo-ink-muted); margin: 12px 0 0; text-align: center; }
.demo-msg { margin: 12px 0 0; font-size: .88rem; font-weight: 600; text-align: center; }
.demo-msg-error { color: #FF3B30; }
.demo-success {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--fo-border);
text-align: center;
}
.demo-success h3 { margin-bottom: .6em; }
/* ══════════════════════════════════════════════════════════════════════
Footer
══════════════════════════════════════════════════════════════════════ */
.site-footer { border-top: 1px solid var(--fo-border); padding: 36px 0; }
.footer-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-nav a { text-decoration: none; color: var(--fo-ink-soft); font-size: .88rem; font-weight: 600; }
.footer-nav a:hover { color: var(--fo-primary); }
.footer-copy { margin: 0; color: var(--fo-ink-muted); font-size: .82rem; width: 100%; text-align: center; }
.site-version { margin-left: .6em; opacity: .55; font-size: .72rem; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .footer-copy { width: auto; text-align: right; } }
/* ── Chat assistant widget ─────────────────────────────────────────────── */
.assist-bubble {
position: fixed; right: 18px; bottom: 18px; z-index: 60;
width: 52px; height: 52px; border: none; border-radius: 50%;
background: var(--fo-primary); color: #fff; font-size: 1.45rem;
cursor: pointer; box-shadow: var(--fo-shadow);
transition: transform .15s ease, background .15s ease;
}
.assist-bubble:hover { background: var(--fo-primary-hover); }
.assist-bubble:active { transform: scale(.94); }
.assist-panel {
position: fixed; right: 18px; bottom: 84px; left: 18px; z-index: 60;
max-width: 380px; margin-left: auto; max-height: 70vh;
display: flex; flex-direction: column; overflow: hidden;
background: var(--fo-card); border: 1px solid var(--fo-border);
border-radius: var(--fo-radius); box-shadow: var(--fo-shadow);
}
.assist-head {
background: var(--fo-primary); color: #fff;
padding: .7rem 1rem; font-weight: 700; font-size: .92rem;
}
.assist-body {
flex: 1; overflow-y: auto; padding: .75rem;
display: flex; flex-direction: column; gap: .5rem; min-height: 130px;
font-size: .9rem; line-height: 1.45;
}
.assist-msg {
max-width: 85%; padding: .5rem .75rem; border-radius: 16px;
white-space: pre-wrap; overflow-wrap: break-word;
}
.assist-assistant { align-self: flex-start; background: var(--fo-surface-muted); color: var(--fo-ink); }
.assist-user { align-self: flex-end; background: var(--fo-primary); color: #fff; }
.assist-foot { display: flex; gap: .5rem; padding: .55rem; border-top: 1px solid var(--fo-border); }
.assist-input {
flex: 1; border: 1px solid var(--fo-border); border-radius: 12px;
padding: .5rem .75rem; font-size: .9rem; font-family: inherit;
background: var(--fo-surface); color: var(--fo-ink); outline: none;
}
.assist-input:focus { border-color: var(--fo-primary); }
.assist-send {
border: none; border-radius: 12px; background: var(--fo-primary); color: #fff;
padding: .5rem .95rem; font-size: .9rem; cursor: pointer;
}
.assist-send:disabled { opacity: .4; cursor: default; }