/* SPDX-License-Identifier: AGPL-3.0-or-later
Copyright (C) 2025-2026 Relocat Contributors
Relocat public-surface styles. Vanilla CSS, no build step.
Light + dark themes via CSS custom properties.
Theme resolution:
1. If is set, that wins.
2. Else falls back to @media (prefers-color-scheme: dark/light).
The data-theme attribute is set by /static/public/theme-toggle.js. */
/* ============================================================
Fonts — self-hosted Questrial for the wordmark
============================================================ */
@font-face {
font-family: 'Questrial';
src: url('fonts/Questrial-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap; /* show fallback then swap when loaded — no flash */
}
/* ============================================================
Reset (minimal — no normalize.css)
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* ============================================================
Theme tokens (LIGHT — default)
============================================================ */
:root {
--bg: #fdfcf9;
--bg-elevated: #ffffff;
--ink: #1a1a1a;
--ink-muted: #5a5a5a;
--ink-subtle: #888888;
--border: #e6e1d6;
--accent: #F2B820;
--accent-ink: #1a1a1a; /* contrast on accent backgrounds */
--focus-ring: #F2B820;
}
/* ============================================================
Theme tokens (DARK — auto via media query)
============================================================ */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--bg-elevated: #232323;
--ink: #f5f3ef;
--ink-muted: #aaaaaa;
--ink-subtle: #777777;
--border: #2a2a2a;
--accent: #F2B820;
--accent-ink: #1a1a1a;
--focus-ring: #F2B820;
}
}
/* ============================================================
Manual override (data-theme set by theme-toggle.js).
Higher specificity than the media query above.
============================================================ */
html[data-theme="light"] {
--bg: #fdfcf9;
--bg-elevated: #ffffff;
--ink: #1a1a1a;
--ink-muted: #5a5a5a;
--ink-subtle: #888888;
--border: #e6e1d6;
--accent: #F2B820;
--accent-ink: #1a1a1a;
--focus-ring: #F2B820;
}
html[data-theme="dark"] {
--bg: #1a1a1a;
--bg-elevated: #232323;
--ink: #f5f3ef;
--ink-muted: #aaaaaa;
--ink-subtle: #777777;
--border: #2a2a2a;
--accent: #F2B820;
--accent-ink: #1a1a1a;
--focus-ring: #F2B820;
}
/* ============================================================
Base typography + layout
============================================================ */
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--ink);
background: var(--bg);
}
body { min-height: 100vh; display: flex; flex-direction: column; }
/* Skip-to-content link — visible on focus only */
.skip-link {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: fixed;
left: 1rem;
top: 1rem;
width: auto;
height: auto;
padding: 0.5rem 1rem;
background: var(--accent);
color: var(--accent-ink);
z-index: 100;
}
/* Focus rings — visible on every interactive element */
a:focus-visible, button:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
/* ============================================================
Header
============================================================ */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border);
}
.site-header .wordmark {
font-family: 'Questrial', ui-monospace, "SF Mono", Menlo, monospace;
font-weight: 700;
color: var(--accent);
font-size: 2rem; /* enlarged wordmark — matches mobile welcome screen prominence */
letter-spacing: -0.02em; /* tighten slightly at the larger size */
}
.site-header nav a {
font-size: 0.875rem;
color: var(--ink-muted);
margin-left: 1.5rem;
}
.site-header nav a:hover { color: var(--ink); }
/* ============================================================
Theme-toggle button (sun/moon icons swap via CSS)
============================================================ */
.theme-toggle {
background: none;
border: 1px solid var(--border);
border-radius: 0.375rem;
padding: 0.375rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-muted);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-muted); }
.theme-toggle svg { width: 1rem; height: 1rem; }
/* By default show the moon (we're in light mode → offer dark switch). */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
/* In dark mode, show the sun (offer light switch). */
@media (prefers-color-scheme: dark) {
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
}
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
/* Hide the toggle button when JS is disabled (theme follows OS only). */
.no-js .theme-toggle { display: none; }
/* ============================================================
Main content
============================================================ */
main {
flex: 1;
width: 100%;
max-width: 64rem;
margin: 0 auto;
padding: 3rem 1.5rem;
}
main h1 {
font-size: 1.875rem;
font-weight: 700;
margin-bottom: 1rem;
}
main h2 {
font-size: 1.25rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 0.75rem;
}
main h3 {
font-size: 1rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
main p { margin-bottom: 1rem; color: var(--ink-muted); }
main p strong { color: var(--ink); }
main a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
main ul, main ol { margin-left: 1.5rem; margin-bottom: 1rem; }
main ul { list-style: disc; }
main ol { list-style: decimal; }
main li { margin-bottom: 0.25rem; color: var(--ink-muted); }
main code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.875em;
background: var(--bg-elevated);
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
}
/* ============================================================
Landing-specific layout (used by public/landing.html)
============================================================ */
.landing-hero {
text-align: center;
padding: 6rem 1.5rem 4rem;
}
.landing-hero .eyebrow {
font-size: 1rem;
letter-spacing: 0.125rem;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin-bottom: 1rem;
}
.landing-hero h1 {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.15;
margin: 0 auto 1rem;
max-width: 25rem; /* narrow column; explicit
in markup controls the actual break */
}
.landing-hero h1 .h1-sub {
display: block; /* takes its own visual line after the explicit
*/
font-size: 2rem; /* slightly smaller than the main "Document storage" line */
font-weight: 800; /* heavier weight emphasizes the journey clause */
margin-top: 0.25rem; /* small breathing room between the two h1 lines */
}
.landing-hero .lede {
font-size: 1rem;
color: var(--ink-muted);
max-width: 32rem;
margin: 0 auto 2rem;
line-height: 1.6;
}
.landing-hero .google-play-cta {
display: inline-block;
margin-top: 1rem;
line-height: 0; /* prevent baseline whitespace under the badge */
}
.landing-hero .google-play-cta img {
height: 60px; /* Google's recommended desktop minimum */
width: auto;
}
.landing-hero .google-play-cta:hover { opacity: 0.85; }
.landing-hero .google-play-cta:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 4px;
border-radius: 4px;
}
.landing-hero .google-play-cta.disabled {
cursor: not-allowed;
}
.landing-hero .google-play-cta.disabled img {
filter: grayscale(100%);
opacity: 0.5;
}
.landing-tagline {
text-align: center;
font-size: 0.75rem;
color: var(--ink-subtle);
letter-spacing: 0.03rem;
margin-top: 1.5rem;
}
/* ============================================================
Footer
============================================================ */
.site-footer {
border-top: 1px solid var(--border);
padding: 2rem 1.5rem;
font-size: 0.8125rem;
color: var(--ink-subtle);
text-align: center;
}
.site-footer nav { margin-bottom: 0.5rem; }
.site-footer nav a {
margin: 0 0.75rem;
color: var(--ink-muted);
}
.site-footer nav a:hover { color: var(--ink); }
/* ============================================================
Imprint table layout (for /imprint/)
============================================================ */
.imprint-block { margin-bottom: 2rem; }
.imprint-block dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; }
.imprint-block dt { font-weight: 600; color: var(--ink); }
.imprint-block dd { color: var(--ink-muted); }
/* ============================================================
404 / 500 pages
============================================================ */
.error-page {
text-align: center;
padding: 6rem 1.5rem;
}
.error-page .code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 4rem;
color: var(--accent);
font-weight: 700;
}
.error-page h1 { margin-top: 1rem; }
.error-page p { margin-top: 1rem; color: var(--ink-muted); }
.error-page a { color: var(--accent); text-decoration: underline; }