/* Website stylesheet. * * Hand-written CSS, no build step and no framework — the repository has no * Node toolchain and this site is small enough to stay that way. * * Every colour, type size and measurement comes from `tokens.css`, which is * GENERATED from the app's own ThemeData (see site/sync-theme.sh). Nothing in * this file may hardcode a colour: the point is that the site and the app share * one palette rather than two that drift. Dark mode needs no rules here either * — the tokens swap themselves under `prefers-color-scheme`. * * The component rules below deliberately mirror the app's widget themes * (elevatedButtonTheme, cardTheme, chipTheme, inputDecorationTheme, appBarTheme * in app_theme.dart): pill controls 52px tall, flat cards defined by a thin * outline rather than a shadow, stadium chips, filled inputs with a 2px focus * ring. */ /* ---------- semantic aliases over the generated tokens ---------- */ :root { /* The app paints its scaffold in `surface` and its cards in the same colour, separated by an outline — so does this. */ --bg: var(--color-surface); --surface: var(--color-surface); --surface-alt: var(--color-surface-container); --text: var(--color-on-surface); --text-muted: var(--color-on-surface-variant); --border: var(--color-outline-variant); --brand: var(--color-primary); --brand-soft: var(--color-primary-container); --brand-strong: var(--color-on-primary-container); --danger: var(--color-error); --ok: var(--color-success); --page: 1120px; --prose: 68ch; /* Only genuinely raised things cast a shadow — the phone mock-up. Every surface the app also has stays flat, because the app's elevation is 0. */ --shadow-raised: 0 1px 2px rgb(0 0 0 / 8%), 0 12px 32px rgb(0 0 0 / 12%); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-family); font-size: var(--font-body-large-size); line-height: var(--font-body-large-line-height); font-weight: 400; -webkit-text-size-adjust: 100%; } h1, h2, h3 { margin: 0 0 0.5em; text-wrap: balance; /* German compounds — "Widerrufsbelehrung", "Geschäftsbedingungen" — are wider than a 360px viewport at display sizes and pushed the whole page sideways. Hyphenation picks the break points from the `lang` on , which assets/js/i18n.js keeps in step with the language on screen. */ overflow-wrap: break-word; hyphens: auto; } /* The app's expressive display scale. Headings grow with the viewport but never below the app's own size for that role, so a phone shows the app's typography exactly and a desktop scales it up. */ h1 { font-size: clamp(var(--font-display-large-size), 1.4rem + 3vw, 3.4rem); font-weight: var(--font-display-large-weight); line-height: var(--font-display-large-line-height); letter-spacing: var(--font-display-large-letter-spacing); } h2 { font-size: clamp(var(--font-display-small-size), 1.2rem + 1.4vw, 2.1rem); font-weight: var(--font-display-small-weight); line-height: var(--font-display-medium-line-height); letter-spacing: var(--font-display-small-letter-spacing); } h3 { font-size: var(--font-title-large-size); font-weight: var(--font-title-large-weight); letter-spacing: var(--font-title-large-letter-spacing); line-height: 1.25; } p { margin: 0 0 1em; } a { color: var(--brand); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } img, svg { max-width: 100%; } /* ---------- layout ---------- */ .wrap { width: min(100% - 2rem, var(--page)); margin-inline: auto; } .section { padding-block: clamp(3rem, 8vw, 5.5rem); } .section--tint { background: var(--surface-alt); } .section__lead { max-width: var(--prose); color: var(--text-muted); font-size: var(--font-body-large-size); line-height: var(--font-body-large-line-height); } .grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 100; padding: var(--space-s) var(--space-m); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); } /* ---------- header (mirrors appBarTheme + dividerTheme) ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 50%, transparent); } .site-header__inner { display: flex; align-items: center; gap: var(--space-m); min-height: 4rem; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--font-title-large-size); font-weight: var(--font-title-large-weight); letter-spacing: var(--font-title-large-letter-spacing); color: var(--text); text-decoration: none; } .brand__mark { width: 1.75rem; height: 1.75rem; border-radius: 0.6rem; background: var(--gradient-brand); } .site-nav { margin-left: auto; display: flex; align-items: center; gap: 0.35rem 1.1rem; flex-wrap: wrap; } .site-nav a { color: var(--text-muted); text-decoration: none; font-size: var(--font-label-large-size); font-weight: var(--font-label-large-weight); } .site-nav a:hover, .site-nav a[aria-current] { color: var(--text); } /* The language switcher (assets/js/i18n.js builds it into every header). It is the app's chip, one size down: the same stadium shape and the same selected state, small enough not to compete with the navigation next to it. */ .lang-switch { display: flex; gap: 0.15rem; padding: 0.15rem; border-radius: var(--radius-full); background: color-mix( in srgb, var(--color-surface-container-highest) 60%, transparent ); } .lang-switch__option { padding: 0.25rem 0.6rem; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-muted); font-family: inherit; font-size: var(--font-label-small-size); font-weight: var(--font-label-large-weight); letter-spacing: var(--font-label-small-letter-spacing); cursor: pointer; } .lang-switch__option:hover { color: var(--text); } .lang-switch__option[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-strong); } /* ---------- buttons (mirror elevatedButtonTheme / outlinedButtonTheme) ----- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--control-height); padding: 0 var(--control-padding-x); border-radius: var(--radius-full); font-family: inherit; font-size: var(--font-label-large-size); font-weight: var(--font-label-large-weight); letter-spacing: var(--font-label-large-letter-spacing); text-decoration: none; cursor: pointer; /* The secondary button is the app's OutlinedButton: transparent, 1.5px outline, label in the primary colour. */ background: transparent; color: var(--brand); border: 1.5px solid var(--border); } .btn:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); } /* The app's ElevatedButton: a solid, flat pill. No gradient and no shadow — `elevation: 0`, `shadowColor: transparent`. */ .btn--primary { background: var(--brand); color: var(--color-on-primary); border-color: transparent; } .btn--primary:hover { background: color-mix(in srgb, var(--brand) 88%, var(--color-on-primary)); } .btn--block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; /* Less at the bottom than the top: the next section brings its own top padding, and stacking two full ones left a hole under the buttons. */ padding-block: clamp(3rem, 9vw, 6rem) clamp(2rem, 5vw, 3rem); background: radial-gradient( 70rem 30rem at 15% -10%, color-mix(in srgb, var(--brand-gradient-start) 18%, transparent), transparent 65% ), radial-gradient( 55rem 28rem at 95% 10%, color-mix(in srgb, var(--brand-gradient-end) 16%, transparent), transparent 60% ); } .hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 60rem) { .hero__grid { grid-template-columns: 1.1fr 0.9fr; } } .hero__claim { font-size: var(--font-body-large-size); line-height: var(--font-body-large-line-height); color: var(--text-muted); max-width: 40ch; } .eyebrow { display: inline-block; padding: 0.3rem 0.8rem; margin-bottom: var(--space-m); border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-strong); font-size: var(--font-label-small-size); font-weight: var(--font-label-small-weight); letter-spacing: var(--font-label-small-letter-spacing); text-transform: uppercase; } /* ---------- cards (mirror cardTheme) ---------- */ .card { background: var(--surface); /* cardTheme: a thin outline at 35% instead of elevation. */ border: 1px solid color-mix(in srgb, var(--border) 35%, transparent); border-radius: var(--radius-l); padding: var(--space-l); } /* A heading inside a card is the app's AppSectionCard heading, not a page heading — titleLarge, not the display scale. */ .card h2, .card h3 { margin-top: 0; font-size: var(--font-title-large-size); font-weight: var(--font-title-large-weight); letter-spacing: var(--font-title-large-letter-spacing); line-height: 1.25; } .card p:last-child { margin-bottom: 0; color: var(--text-muted); } .card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-m); border-radius: var(--radius-s); background: var(--brand-soft); color: var(--brand-strong); } /* ---------- phone frame (live demo) ---------- */ /* The "how to operate the demo" list next to the phone. Numbered, because the steps walk down the app's bottom bar in order. */ .steps { margin: 0 0 1em; padding-left: 1.3rem; color: var(--text-muted); } .steps li { margin-bottom: 0.5rem; } .steps strong { color: var(--text); } .demo { display: grid; gap: var(--space-xl); align-items: center; grid-template-columns: 1fr; } @media (min-width: 60rem) { .demo { grid-template-columns: 22rem 1fr; } } /* A physical object, so this is the one thing on the page that is allowed to cast a shadow. */ .phone { justify-self: center; width: min(20rem, 100%); aspect-ratio: 9 / 19; padding: 0.6rem; border-radius: 2.4rem; background: var(--color-inverse-surface); box-shadow: var(--shadow-raised); } .phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 1.9rem; background: var(--surface); } /* The demo is a real, running build of the app with the in-memory test * backend. It is shown, not operated: pointer-events keeps every tap out, so * nothing inside can navigate, submit or reach a network. */ .phone__screen iframe { width: 100%; height: 100%; border: 0; pointer-events: none; } .phone__fallback { display: grid; place-content: center; gap: 0.5rem; height: 100%; padding: var(--space-xl); text-align: center; color: var(--text-muted); font-size: var(--font-body-medium-size); line-height: var(--font-body-medium-line-height); } /* ---------- forms (mirror inputDecorationTheme) ---------- */ .form-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .field { display: flex; flex-direction: column; gap: 0.35rem; } .field > span { font-size: var(--font-title-small-size); font-weight: var(--font-title-small-weight); } /* Filled, generously rounded, borderless at rest, 2px primary focus ring — the app's fields, with its 18px content padding. */ .field input, .field select, .field textarea { font-family: inherit; font-size: var(--font-body-large-size); padding: 18px; border: 2px solid transparent; border-radius: var(--radius-m); background: color-mix( in srgb, var(--color-surface-container-highest) 50%, transparent ); color: var(--text); } @media (prefers-color-scheme: dark) { /* The app uses the fully opaque container in dark mode. */ .field input, .field select, .field textarea { background: var(--color-surface-container-high); } } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); } /* `:user-invalid`, not `:invalid`: an empty required field is invalid from the moment the page loads, which would paint the whole delivery form red before the visitor has typed a character. This only fires once they have actually interacted with the field or tried to submit. */ .field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--danger); } .field--wide { grid-column: 1 / -1; } .hint { color: var(--text-muted); font-size: var(--font-body-small-size); line-height: var(--font-body-small-line-height); } /* ---------- chips (mirror chipTheme) ---------- */ .chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .chip { padding: 8px 12px; border: 0; border-radius: var(--radius-full); background: var(--color-surface-container-highest); color: var(--text); font-family: inherit; font-size: var(--font-label-medium-size); font-weight: var(--font-label-medium-weight); cursor: pointer; } .chip[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-strong); } .stepper { display: inline-flex; align-items: center; gap: var(--space-s); } .stepper button { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); border: 1.5px solid var(--border); background: transparent; color: var(--brand); font-size: 1.25rem; cursor: pointer; } .stepper button[disabled] { opacity: 0.38; cursor: not-allowed; } .stepper output { min-width: 2ch; text-align: center; font-size: var(--font-title-large-size); font-weight: var(--font-title-large-weight); } .check { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: var(--space-s); font-size: var(--font-body-large-size); line-height: var(--font-body-large-line-height); } .check input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--brand); } /* ---------- order summary ---------- */ .summary { list-style: none; margin: 0 0 var(--space-m); padding: 0; } .summary li { display: flex; justify-content: space-between; gap: var(--space-m); padding: 0.4rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--border) 50%, transparent); } .summary li:last-child { border-bottom: 0; border-top: 2px solid var(--border); margin-top: 0.4rem; padding-top: 0.7rem; font-size: var(--font-title-large-size); font-weight: var(--font-title-large-weight); } .shirt-preview { display: block; width: min(16rem, 100%); margin-inline: auto; background: var(--color-surface-container-highest); border-radius: var(--radius-m); padding: var(--space-l); color: var(--border); } /* ---------- notices (mirror AppInlineBanner) ---------- */ .notice { display: flex; gap: var(--space-s); padding: var(--space-m); border-radius: var(--radius-s); background: var(--surface-alt); color: var(--text); margin-block: var(--space-l); } /* The draft banners on the legal pages use the app's warning accent — the same colour AppInlineBanner paints the privacy statement's draft notice. */ .notice--draft { background: var(--color-warning); color: var(--color-on-warning); } .notice--draft a { color: inherit; } .notice--error { background: var(--color-error-container); color: var(--color-on-error-container); } .notice--ok { background: color-mix(in srgb, var(--color-success) 18%, var(--surface)); color: var(--text); } .notice p:last-child { margin-bottom: 0; } /* Placeholder for a legally required value that has not been configured. */ .todo { padding: 0.05em 0.45em; border-radius: 0.4em; background: color-mix(in srgb, var(--color-warning) 30%, transparent); color: var(--text); font-style: italic; } /* ---------- codes (order confirmation) ---------- */ .codes { display: grid; gap: var(--space-m); padding: 0; margin: 0; list-style: none; } .code-card { border: 1px solid color-mix(in srgb, var(--border) 35%, transparent); border-radius: var(--radius-s); background: var(--surface); padding: var(--space-m); } .code-card dl { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 0.9rem; align-items: center; margin: 0; } .code-card dt { color: var(--text-muted); font-size: var(--font-body-medium-size); } .code-card dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--font-body-large-size); word-break: break-all; } .copy { padding: 0.35rem 0.8rem; font-family: inherit; font-size: var(--font-label-medium-size); font-weight: var(--font-label-medium-weight); border-radius: var(--radius-full); border: 1.5px solid var(--border); background: transparent; color: var(--brand); cursor: pointer; } /* ---------- prose (legal pages) ---------- */ .prose { max-width: var(--prose); } .prose h2 { margin-top: 2.25rem; font-size: var(--font-headline-small-size); font-weight: var(--font-headline-small-weight); letter-spacing: var(--font-headline-small-letter-spacing); } .prose dl { margin: 0 0 1em; } .prose dt { font-weight: var(--font-title-medium-weight); } .prose dd { margin: 0 0 0.6em; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 50%, transparent); background: var(--surface); padding-block: var(--space-xl); margin-top: 3rem; color: var(--text-muted); font-size: var(--font-body-medium-size); line-height: var(--font-body-medium-line-height); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); align-items: center; } .site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); margin-left: auto; } .site-footer a { color: var(--text-muted); } .site-footer a:hover, .site-footer a[aria-current] { color: var(--text); } [hidden] { display: none !important; }