bb97fef453
Add complete production-ready Ysterbaard PocketBase registry browser frontend: - Next.js 14 App Router with TypeScript, Tailwind CSS, and TanStack React Query - Secure server-side PocketBase API proxy to avoid exposing superuser tokens - Read-only directors and companies registry browse pages with search, filtering, and pagination - Client onboarding workflow for creating and managing client submissions - Docker container configuration for easy deployment - All supporting UI components, utility functions, and configuration files
183 lines
6.1 KiB
CSS
183 lines
6.1 KiB
CSS
/* app/globals.css
|
|
*
|
|
* Airbnb design-system token block (per the active design system
|
|
* contract). Every color, type scale, spacing value, radius, and
|
|
* shadow is bound to var(--*) — NEVER hardcode hex outside this
|
|
* :root block. Tailwind's color config maps utility classes onto
|
|
* these variables.
|
|
*
|
|
* Token provenance: design-systems/airbnb/tokens.css, pasted
|
|
* verbatim per system policy.
|
|
*/
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
/* ─── Surface (3 levels) ──────────────────────────────────────── */
|
|
--bg: #ffffff;
|
|
--surface: #ffffff;
|
|
--surface-warm: #f7f7f7;
|
|
|
|
/* ─── Foreground ramp (4 levels) ──────────────────────────────── */
|
|
--fg: #222222;
|
|
--fg-2: #3f3f3f;
|
|
--muted: #6a6a6a;
|
|
--meta: #929292;
|
|
|
|
/* ─── Border (2 levels) ───────────────────────────────────────── */
|
|
--border: #dddddd;
|
|
--border-soft: #ebebeb;
|
|
|
|
/* ─── Accent (Rausch coral-pink, single-accent discipline) ────── */
|
|
--accent: #ff385c;
|
|
--accent-on: #ffffff;
|
|
--accent-hover: #e31c5f;
|
|
--accent-active: #e00b41;
|
|
|
|
/* ─── Semantic ────────────────────────────────────────────────── */
|
|
--success: #008a05;
|
|
--warn: #c47700;
|
|
--danger: #c13515;
|
|
|
|
/* ─── Typography — fonts ──────────────────────────────────────── */
|
|
--font-display:
|
|
"Airbnb Cereal VF", "Airbnb Cereal App", Circular,
|
|
-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
|
|
--font-body:
|
|
"Airbnb Cereal VF", "Airbnb Cereal App", Circular,
|
|
-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
|
|
--font-mono:
|
|
ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco,
|
|
Consolas, monospace;
|
|
|
|
/* ─── Typography — type scale ─────────────────────────────────── */
|
|
--text-xs: 12px;
|
|
--text-sm: 14px;
|
|
--text-base: 16px;
|
|
--text-lg: 20px;
|
|
--text-xl: 22px;
|
|
--text-2xl: 28px;
|
|
--text-3xl: 44px;
|
|
|
|
/* ─── Typography — leading & tracking ─────────────────────────── */
|
|
--leading-body: 1.43;
|
|
--leading-tight: 1.2;
|
|
--tracking-display: -0.02em;
|
|
|
|
/* ─── Spacing ─────────────────────────────────────────────────── */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-12: 48px;
|
|
|
|
/* ─── Section rhythm ──────────────────────────────────────────── */
|
|
--section-y-desktop: 64px;
|
|
--section-y-tablet: 48px;
|
|
--section-y-phone: 32px;
|
|
|
|
/* ─── Radius ──────────────────────────────────────────────────── */
|
|
--radius-sm: 8px;
|
|
--radius-md: 14px;
|
|
--radius-lg: 20px;
|
|
--radius-pill: 9999px;
|
|
|
|
/* ─── Elevation ───────────────────────────────────────────────── */
|
|
--elev-flat: none;
|
|
--elev-ring: 0 0 0 1px var(--border);
|
|
--elev-raised:
|
|
rgba(0, 0, 0, 0.02) 0 0 0 1px,
|
|
rgba(0, 0, 0, 0.04) 0 2px 6px 0,
|
|
rgba(0, 0, 0, 0.1) 0 4px 8px 0;
|
|
|
|
/* ─── Focus ring (Ink Black per DESIGN.md §6) ─────────────────── */
|
|
--focus-ring: 0 0 0 2px var(--fg);
|
|
|
|
/* ─── Motion ──────────────────────────────────────────────────── */
|
|
--motion-fast: 150ms;
|
|
--motion-base: 200ms;
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
|
|
/* ─── Layout ──────────────────────────────────────────────────── */
|
|
--container-max: 1280px;
|
|
--container-gutter-desktop: 40px;
|
|
--container-gutter-tablet: 24px;
|
|
--container-gutter-phone: 16px;
|
|
}
|
|
|
|
/* ─── Base reset + typography ─────────────────────────────────────── */
|
|
html, body {
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
a {
|
|
color: var(--fg);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
transition: color var(--motion-fast) var(--ease-standard);
|
|
}
|
|
a:hover { color: var(--accent-hover); }
|
|
a:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
button:focus-visible,
|
|
[role="button"]:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent);
|
|
color: var(--accent-on);
|
|
}
|
|
|
|
/* Container helpers (consistent with --container-max + per-device gutter) */
|
|
.container-x {
|
|
width: 100%;
|
|
max-width: var(--container-max);
|
|
margin-inline: auto;
|
|
padding-inline: var(--container-gutter-phone);
|
|
}
|
|
@media (min-width: 800px) {
|
|
.container-x {
|
|
padding-inline: var(--container-gutter-tablet);
|
|
}
|
|
}
|
|
@media (min-width: 1128px) {
|
|
.container-x {
|
|
padding-inline: var(--container-gutter-desktop);
|
|
}
|
|
}
|
|
|
|
/* Section vertical rhythm — desktop down to phone */
|
|
.section-y {
|
|
padding-block: var(--section-y-phone);
|
|
}
|
|
@media (min-width: 800px) {
|
|
.section-y { padding-block: var(--section-y-tablet); }
|
|
}
|
|
@media (min-width: 1128px) {
|
|
.section-y { padding-block: var(--section-y-desktop); }
|
|
}
|