/*
* Favorize brand stylesheet — shared by static marketing/info pages
* (privacy-policy, terms, support, download, etc.) so they read as the
* same product as the app instead of a generic template.
*
* Tokens mirror the app's Design System v3 (lib/components/design/tokens/)
* 1:1 — same hex/alpha values as DsColors, DsTextStyles, DsSpacing,
* DsRadius, DsShadows. If those change, update this file to match.
*
* CACHE BUSTING: pages link this as /css/brand.css?v=N. Bump N here and
* in every when you change this file, or returning
* visitors get new HTML with the previously cached stylesheet. Current: v=5.
*
* Fonts: Space Grotesk (self-hosted, /fonts/SpaceGrotesk-Variable.ttf —
* same file the app bundles) for display/headings; DM Sans for body,
* loaded via a to Google Fonts in each page's (matches how
* the app itself loads DM Sans on web via the google_fonts package).
*/
@font-face {
font-family: 'Space Grotesk';
src: url('/fonts/SpaceGrotesk-Variable.ttf') format('truetype-variations');
font-weight: 400 700;
font-display: swap;
}
:root {
/* Light theme (default) — DsColors light */
--bg: #f5f3f8;
--surface: #ffffff;
--surface-el: #ede8f5;
--text-1: #130a1f;
--text-2: rgba(19, 10, 31, 0.52);
--text-3: rgba(19, 10, 31, 0.3);
--border: rgba(127, 19, 236, 0.09);
--border-hover: rgba(127, 19, 236, 0.2);
--success: #16a34a;
--warning: #d97706;
--error: #dc2626;
--info: #2563eb;
--shadow-sm: 0 2px 12px rgba(127, 19, 236, 0.08);
--shadow-md: 0 8px 32px rgba(127, 19, 236, 0.1);
/* Brand — theme-independent (DsColors brand) */
--primary: #7f13ec;
--primary-dark: #670bd6;
--primary-light: #9f54f0;
--primary-08: rgba(127, 19, 236, 0.08);
--primary-15: rgba(127, 19, 236, 0.15);
/* Spacing — DsSpacing (4pt grid) */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-xxl: 48px;
/* Radius — DsRadius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 100px;
--font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ---------------------------------------------------------------------
Theme resolution (three-state: light / dark / system)
`data-theme` on is written by /js/theme.js from the visitor's
stored choice. It is absent in the "system" state, which is the default
— so with JavaScript off, or before theme.js runs, the media query below
still decides and the page is never mis-themed.
The media query is guarded by :not([data-theme='light']) so an explicit
light choice survives on a dark-mode OS; the [data-theme='dark'] rule
below it does the mirror image. Both directions have to be expressible,
which is why the dark tokens appear twice rather than only in the query.
Keep the two blocks identical.
--------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
/* Dark theme — DsColors dark */
--bg: #191022;
--surface: #251e2f;
--surface-el: #2d1f3b;
--text-1: #ffffff;
--text-2: rgba(255, 255, 255, 0.52);
--text-3: rgba(255, 255, 255, 0.28);
--border: rgba(255, 255, 255, 0.06);
--border-hover: rgba(255, 255, 255, 0.13);
--success: #22c55e;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;
--shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
}
}
:root[data-theme='dark'] {
/* Dark theme — DsColors dark */
--bg: #191022;
--surface: #251e2f;
--surface-el: #2d1f3b;
--text-1: #ffffff;
--text-2: rgba(255, 255, 255, 0.52);
--text-3: rgba(255, 255, 255, 0.28);
--border: rgba(255, 255, 255, 0.06);
--border-hover: rgba(255, 255, 255, 0.13);
--success: #22c55e;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;
--shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color-scheme: light dark;
}
/* Pin the UA's own surfaces (form controls, scrollbars) to an explicit
choice so they don't stay dark inside a page the visitor forced light. */
html[data-theme='light'] {
color-scheme: light;
}
html[data-theme='dark'] {
color-scheme: dark;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
background: var(--bg);
color: var(--text-1);
min-height: 100vh;
}
h1,
h2,
h3 {
font-family: var(--font-display);
}
/* Display styles — match DsTextStyles display1/2/3 */
.text-display-1 {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.5px;
}
.text-display-2 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.3px;
}
.text-display-3 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
line-height: 1.4;
}
.text-body-2 {
font-size: 14px;
color: var(--text-2);
}
/* ---------------------------------------------------------------------
Shared nav — fixed header used across static pages
--------------------------------------------------------------------- */
.brand-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
/* The logo takes the slack (margin-right: auto below) rather than
space-between distributing it, so a second trailing control — the theme
toggle, injected by /js/theme.js — lands next to the first instead of
being spread into the middle of the bar. */
gap: 12px;
padding: 16px 24px;
background: color-mix(in srgb, var(--surface) 85%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.brand-nav-logo {
display: flex;
align-items: center;
gap: 8px;
margin-right: auto;
text-decoration: none;
}
.brand-nav-logo img {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
}
.brand-nav-logo span {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: var(--text-1);
}
.brand-nav-links {
display: flex;
align-items: center;
gap: 20px;
}
.brand-nav-links a {
color: var(--text-2);
text-decoration: none;
font-size: 14px;
font-weight: 500;
}
.brand-nav-links a:hover {
color: var(--text-1);
}
.brand-nav-links a.btn-primary {
color: #fff;
}
/* ---------------------------------------------------------------------
Buttons — match ElevatedButtonThemeData / OutlinedButtonThemeData
--------------------------------------------------------------------- */
.btn-primary,
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 24px;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2px;
text-decoration: none;
cursor: pointer;
border: none;
}
.btn-primary {
background: var(--primary);
color: #fff;
}
.btn-primary:hover {
background: var(--primary-dark);
}
.btn-outline {
background: transparent;
color: var(--primary);
border: 1.5px solid var(--primary);
}
.btn-outline:hover {
background: var(--primary-08);
}
/* ---------------------------------------------------------------------
Cards — match CardThemeData
--------------------------------------------------------------------- */
.brand-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
}
/* ---------------------------------------------------------------------
Page content — shared prose container for legal/info pages
--------------------------------------------------------------------- */
.page-content {
max-width: 800px;
margin: 0 auto;
padding: 100px 24px 60px;
}
.page-content--centered {
max-width: 640px;
text-align: center;
}
.page-content h1 {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--text-1);
margin-bottom: 8px;
}
.page-content .last-updated {
color: var(--text-3);
font-style: italic;
margin-bottom: 32px;
font-size: 14px;
}
.page-content .page-subtitle {
color: var(--text-2);
font-size: 17px;
margin-bottom: 32px;
}
.page-content .contact-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
margin: 24px 0;
box-shadow: var(--shadow-sm);
}
.page-content .contact-card h3 {
margin-top: 0;
margin-bottom: 12px;
}
.page-content .contact-card p {
margin-bottom: 10px;
}
.page-content .info-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
margin: 24px 0;
box-shadow: var(--shadow-sm);
}
.page-content .info-card p:last-child {
margin-bottom: 0;
}
.page-content code {
background: var(--surface-el);
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
color: var(--text-1);
}
.page-content .client-card {
margin-bottom: 20px;
padding: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.page-content .client-card h3 {
margin-top: 0;
}
.page-content .client-card p:last-child,
.page-content .client-card ol:last-child {
margin-bottom: 0;
}
.page-content .plan-note {
display: inline-block;
font-size: 13px;
color: var(--primary-dark);
background: var(--primary-08);
border: 1px solid var(--primary-15);
border-radius: 6px;
padding: 2px 8px;
margin-bottom: 10px;
}
.page-content .cmd-block {
display: block;
background: var(--surface-el);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
margin-bottom: 12px;
font-family: 'Courier New', monospace;
font-size: 13px;
color: var(--text-1);
overflow-x: auto;
white-space: pre;
}
.page-content .faq-item {
margin-bottom: 24px;
padding: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.page-content .faq-item h3 {
margin-top: 0;
margin-bottom: 6px;
font-size: 16px;
}
.page-content .faq-item p {
margin-bottom: 0;
font-size: 15px;
}
.page-content h2 {
font-size: 20px;
font-weight: 700;
color: var(--text-1);
margin-top: 36px;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.page-content h3 {
font-size: 16px;
font-weight: 600;
color: var(--text-1);
margin-top: 20px;
margin-bottom: 8px;
}
.page-content p {
margin-bottom: 14px;
line-height: 1.7;
color: var(--text-2);
}
.page-content ul,
.page-content ol {
padding-left: 20px;
margin-bottom: 14px;
}
.page-content li {
margin-bottom: 8px;
line-height: 1.6;
color: var(--text-2);
}
.page-content a {
color: var(--primary);
text-decoration: none;
}
.page-content a:hover {
text-decoration: underline;
}
/* A button-styled link inside page content (e.g. the /gids/ guide CTAs)
must keep the button's white label — without this, `.page-content a`
outranks `.btn-primary` and paints primary-on-primary. */
.page-content a.btn-primary {
color: #fff;
}
.page-content a.btn-primary:hover {
text-decoration: none;
}
.page-content strong {
color: var(--text-1);
}
.page-content table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
background: var(--surface-el);
border-radius: var(--radius-sm);
overflow: hidden;
}
.page-content th,
.page-content td {
border: 1px solid var(--border);
padding: 10px 12px;
text-align: left;
color: var(--text-2);
font-size: 14px;
}
.page-content th {
background: var(--surface-el);
color: var(--text-1);
font-weight: 600;
}
/* ---------------------------------------------------------------------
Language toggle — used on bilingual (EN/NL) pages
--------------------------------------------------------------------- */
.lang-toggle {
display: flex;
gap: 4px;
background: var(--surface-el);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 3px;
}
.lang-toggle button {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
padding: 5px 12px;
border-radius: var(--radius-pill);
border: none;
background: transparent;
color: var(--text-2);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.lang-toggle button.active {
background: var(--primary);
color: #fff;
}
/* ---------------------------------------------------------------------
Language switcher — flag-icon links between the /en/... and /nl/...
variants of a localized static page (issue #2113). Same pill-group
shape as .lang-toggle/.theme-toggle, but these are real links to
the other language's URL, not in-page toggles.
--------------------------------------------------------------------- */
.lang-switch {
display: flex;
gap: 4px;
background: var(--surface-el);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 3px;
}
.lang-switch a {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 5px 10px;
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-2);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.lang-switch a:hover {
color: var(--text-1);
}
.lang-switch a[aria-current] {
background: var(--primary);
color: #fff;
}
.lang-switch a:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.lang-switch .lang-flag {
font-size: 14px;
line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
.lang-switch a {
transition: none;
}
}
/* ---------------------------------------------------------------------
Theme toggle — three-state (light / dark / system), injected into
.brand-nav by /js/theme.js. Shares the pill-group shape with
.lang-toggle so the two read as one family when both are present.
--------------------------------------------------------------------- */
.theme-toggle {
display: flex;
gap: 4px;
background: var(--surface-el);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 3px;
}
.theme-toggle button {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 26px;
border-radius: var(--radius-pill);
border: none;
background: transparent;
color: var(--text-2);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.theme-toggle button svg {
width: 15px;
height: 15px;
display: block;
}
.theme-toggle button:hover {
color: var(--text-1);
}
.theme-toggle button[aria-pressed='true'] {
background: var(--primary);
color: #fff;
}
/* Keyboard focus must stay visible on top of the active fill. */
.theme-toggle button:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.theme-toggle button {
transition: none;
}
}
/* Bilingual toggle: hide the block that doesn't match . */
html[data-lang='en'] .lang-nl {
display: none;
}
html[data-lang='nl'] .lang-en {
display: none;
}
/* ---------------------------------------------------------------------
App-store landing components — download page, future marketing landing
--------------------------------------------------------------------- */
.app-icon {
width: 88px;
height: 88px;
margin: 0 auto 24px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.app-icon img {
width: 100%;
height: 100%;
border-radius: var(--radius-xl);
display: block;
}
.store-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-bottom: 28px;
}
.store-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 22px;
text-decoration: none;
color: var(--text-1);
transition: border-color 0.15s, transform 0.15s;
}
.store-badge:hover {
border-color: var(--border-hover);
transform: translateY(-1px);
}
.store-badge svg {
width: 26px;
height: 26px;
flex-shrink: 0;
color: var(--text-1);
}
.store-badge-text {
text-align: left;
line-height: 1.2;
}
.store-badge-text .small {
display: block;
font-size: 11px;
color: var(--text-2);
}
.store-badge-text .big {
display: block;
font-size: 16px;
font-weight: 600;
}
.web-app-link {
display: block;
margin-top: 8px;
color: var(--text-2);
font-size: 14px;
text-decoration: none;
}
.web-app-link:hover {
color: var(--text-1);
text-decoration: underline;
}
/* ---------------------------------------------------------------------
Hero — marketing landing page
--------------------------------------------------------------------- */
.hero {
max-width: 720px;
margin: 0 auto;
padding: 140px 24px 72px;
text-align: center;
}
.hero-title {
font-family: var(--font-display);
font-size: 42px;
font-weight: 700;
letter-spacing: -0.6px;
line-height: 1.15;
color: var(--text-1);
margin-bottom: 16px;
}
.hero-subtitle {
font-size: 18px;
color: var(--text-2);
line-height: 1.6;
max-width: 560px;
margin: 0 auto 32px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
/* ---------------------------------------------------------------------
Feature grid — highlight cards under the hero
--------------------------------------------------------------------- */
.feature-grid {
max-width: 920px;
margin: 0 auto;
padding: 0 24px 100px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.feature-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 24px;
text-align: left;
}
.feature-card .feature-icon {
font-size: 26px;
margin-bottom: 12px;
}
.feature-card h3 {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--text-1);
margin-bottom: 8px;
}
.feature-card p {
font-size: 14px;
color: var(--text-2);
line-height: 1.6;
}
/* ---------------------------------------------------------------------
Shared footer
--------------------------------------------------------------------- */
.brand-footer {
border-top: 1px solid var(--border);
padding: 40px 24px;
text-align: center;
}
.brand-footer-links {
display: flex;
justify-content: center;
gap: 24px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.brand-footer-links a {
color: var(--text-2);
text-decoration: none;
font-size: 14px;
}
.brand-footer-links a:hover {
color: var(--text-1);
}
.brand-footer-copy {
color: var(--text-3);
font-size: 13px;
}
@media (max-width: 600px) {
.brand-nav {
padding: 12px 16px;
}
.brand-nav-links {
gap: 12px;
}
.brand-nav-links a {
font-size: 13px;
}
/* On narrow screens, keep only the CTA in the nav — plain text links
(Download, Support, etc.) are already reachable from the footer. */
.brand-nav-links a:not(.btn-primary) {
display: none;
}
.page-content {
padding: 80px 16px 40px;
}
.store-badges {
flex-direction: column;
align-items: stretch;
}
.hero {
padding: 120px 20px 56px;
}
.hero-title {
font-size: 30px;
}
.feature-grid {
grid-template-columns: 1fr;
padding: 0 20px 72px;
}
}
/* ---------------------------------------------------------------------
Platform cards — /platforms hub and the per-platform pages.
A platform is either shippable today or it is not, and the card says
which. `--soon` exists so a surface that has no install path yet can
still be shown off honestly instead of linking somewhere dead.
--------------------------------------------------------------------- */
.platform-grid {
max-width: 920px;
margin: 0 auto;
padding: 0 24px 100px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
a.platform-card {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 24px;
text-decoration: none;
transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
a.platform-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
a.platform-card:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
}
.platform-card .platform-icon {
font-size: 26px;
margin-bottom: 12px;
}
.platform-card h3 {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--text-1);
margin-bottom: 8px;
}
.platform-card p {
font-size: 14px;
line-height: 1.6;
color: var(--text-2);
margin-bottom: 14px;
}
.status-badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
}
.status-badge--live {
color: var(--success);
background: color-mix(in srgb, var(--success) 12%, transparent);
border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.status-badge--soon {
color: var(--text-2);
background: var(--surface-el);
border-color: var(--border);
}
@media (prefers-reduced-motion: reduce) {
a.platform-card {
transition: none;
}
a.platform-card:hover {
transform: none;
}
}
@media (max-width: 760px) {
.platform-grid {
grid-template-columns: 1fr;
padding: 0 20px 72px;
}
}