/* ========================================================================= LeoFlex Design System — global entry point (self-contained build) Bundled for app.leoflex.io from the LeoFlex Design System: tokens (fonts, colors, typography, spacing, effects, base) + components. Source of truth: LeoFlex Design System (claude.ai/design) / LeoFlex-Webseite. ========================================================================= */ /* ========================================================================= Webfonts (Roboto + Roboto Mono) — self-hosted / local only, GDPR-friendly. The brand explicitly forbids the Google Fonts CDN. Roboto (sans) resolves via local() with a graceful fall-through to the system stack; Roboto Mono likewise (drop WOFF2/TTF into assets/fonts/ and add url() lines to fully self-host — see README). ========================================================================= */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'); } @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto Mono'), local('RobotoMono-Regular'); } @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 500; font-display: swap; src: local('Roboto Mono Medium'), local('RobotoMono-Medium'); } @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 700; font-display: swap; src: local('Roboto Mono Bold'), local('RobotoMono-Bold'); } /* ========================================================================= Color tokens — brand orange #e8941b + greys #565d7b / #3e4457. ========================================================================= */ :root { color-scheme: light dark; /* ---- Brand ---------------------------------------------------------- */ --lf-orange: #e8941b; --lf-orange-logo: #ef9723; --lf-orange-dark: #c97a0e; --lf-orange-ink: #a8600a; --lf-orange-soft: #fdf1e0; --lf-grey: #565d7b; --lf-grey-dark: #3e4457; /* ---- Neutrals (light) ----------------------------------------------- */ --lf-bg: #ffffff; --lf-surface: #f7f8fa; --lf-surface-2: #eef0f4; --lf-border: #e2e1ea; --lf-text: #1b1b1d; --lf-text-muted: #45464d; --lf-on-primary: #ffffff; /* ---- Status --------------------------------------------------------- */ --lf-success: #479458; --lf-error: #b4281c; --lf-info: #3d5bb3; --lf-warning: #e8941b; --lf-success-soft: #e7f1e9; --lf-error-soft: #f6e3e1; --lf-info-soft: #e5e9f5; /* ---- Semantic aliases ----------------------------------------------- */ --color-primary: var(--lf-orange); --color-primary-strong: var(--lf-orange-dark); --color-on-primary: var(--lf-on-primary); --color-accent-soft: var(--lf-orange-soft); --text-strong: var(--lf-grey-dark); --text-body: var(--lf-text); --text-muted: var(--lf-text-muted); --text-on-primary: var(--lf-on-primary); --text-link: var(--lf-orange-dark); --surface-page: var(--lf-bg); --surface-card: var(--lf-surface); --surface-sunken: var(--lf-surface-2); --border-default: var(--lf-border); } /* ---- Dark theme (opt-in via class `theme-dark` on ) ------------ */ :root.theme-dark { --lf-bg: #131315; --lf-surface: #1b1b1e; --lf-surface-2: #232327; --lf-border: #34343a; --lf-text: #e4e2e4; --lf-text-muted: #b6b6bd; --lf-orange: #ef9723; --lf-orange-dark: #e8941b; --lf-orange-soft: #2a2418; --lf-orange-ink: #f3a73c; --lf-grey: #bec5e7; --lf-on-primary: #ffffff; --lf-success-soft:#1b2a1f; --lf-error-soft: #2c1a18; --lf-info-soft: #1b2236; } /* ========================================================================= Typography tokens ========================================================================= */ :root { --lf-font-sans: 'Roboto', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --lf-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --lf-fw-regular: 400; --lf-fw-medium: 500; --lf-fw-bold: 700; --lf-fs-xs: 0.875rem; --lf-fs-sm: 1rem; --lf-fs-md: 1.125rem; --lf-fs-lg: 1.5rem; --lf-fs-xl: 2rem; --lf-fs-2xl: 2.75rem; --lf-fs-3xl: 3.5rem; --lf-fs-h1: clamp(2rem, 5vw, 3.5rem); --lf-fs-h2: clamp(1.5rem, 4vw, 2.75rem); --lf-lh: 1.6; --lf-lh-tight: 1.2; --lf-ls-eyebrow: 0.04em; --font-body: var(--lf-font-sans); --font-mono: var(--lf-font-mono); --text-size-body: var(--lf-fs-sm); } /* ========================================================================= Spacing, radius & layout tokens ========================================================================= */ :root { --lf-space-1: 0.25rem; --lf-space-2: 0.5rem; --lf-space-3: 1rem; --lf-space-4: 1.5rem; --lf-space-5: 2rem; --lf-space-6: 3rem; --lf-space-7: 4rem; --lf-space-8: 6rem; --lf-radius-sm: 0.125rem; --lf-radius-md: 0.25rem; --lf-radius-lg: 0.5rem; --lf-radius-pill: 999px; --lf-container: 1200px; --lf-container-narrow: 760px; --lf-tap-min: 44px; --lf-ease: cubic-bezier(0.4, 0, 0.2, 1); --lf-dur-fast: 0.15s; --lf-dur: 0.2s; --lf-dur-slow: 0.35s; --radius-control: var(--lf-radius-md); --radius-card: var(--lf-radius-md); --radius-band: var(--lf-radius-lg); } /* ========================================================================= Elevation, shadow & background-effect tokens ========================================================================= */ :root { --lf-shadow-soft: 0 1px 2px rgb(15 23 42 / 5%), 0 3px 6px -2px rgb(15 23 42 / 7%), 0 8px 16px -12px rgb(15 23 42 / 8%); --lf-shadow-card: 0 1px 3px rgb(15 23 42 / 8%), 0 8px 24px -16px rgb(15 23 42 / 18%); --lf-shadow-pop: 0 4px 12px rgb(15 23 42 / 10%), 0 24px 48px -24px rgb(15 23 42 / 28%); --lf-focus-ring: 3px solid var(--lf-info); --lf-focus-offset: 2px; --lf-hero-glow: radial-gradient(60% 120% at 80% 0%, rgb(232 148 27 / 12%), transparent 60%); --lf-band-orange: var(--lf-orange); --shadow-card: var(--lf-shadow-card); --shadow-soft: var(--lf-shadow-soft); --shadow-pop: var(--lf-shadow-pop); } :root.theme-dark { --lf-shadow-soft: 0 1px 2px rgb(0 0 0 / 30%), 0 3px 6px -2px rgb(0 0 0 / 35%), 0 8px 16px -12px rgb(0 0 0 / 45%); --lf-shadow-card: 0 1px 3px rgb(0 0 0 / 40%), 0 8px 24px -16px rgb(0 0 0 / 60%); --lf-shadow-pop: 0 4px 12px rgb(0 0 0 / 45%), 0 24px 48px -24px rgb(0 0 0 / 70%); --lf-hero-glow: radial-gradient(60% 120% at 80% 0%, rgb(232 148 27 / 18%), transparent 60%); } /* ========================================================================= Base & foundations ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--lf-font-sans); font-size: var(--lf-fs-sm); line-height: var(--lf-lh); color: var(--lf-text); background: var(--lf-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { color: var(--lf-grey-dark); line-height: var(--lf-lh-tight); font-weight: var(--lf-fw-bold); margin: 0 0 var(--lf-space-3); text-wrap: balance; } :root.theme-dark h1, :root.theme-dark h2, :root.theme-dark h3, :root.theme-dark h4 { color: var(--lf-text); } h1 { font-size: var(--lf-fs-h1); } h2 { font-size: var(--lf-fs-h2); } h3 { font-size: var(--lf-fs-lg); } p { margin: 0 0 var(--lf-space-3); color: var(--lf-text-muted); text-wrap: pretty; } a { color: var(--lf-orange-ink); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { max-width: 100%; height: auto; } code, kbd, samp { font-family: var(--lf-font-mono); } :focus-visible { outline: var(--lf-focus-ring); outline-offset: var(--lf-focus-offset); border-radius: var(--lf-radius-sm); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--lf-grey-dark); color: #fff; padding: var(--lf-space-2) var(--lf-space-3); border-radius: 0 0 var(--lf-radius-md) 0; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================================= Component classes (token-driven) — only what this page consumes: Button, Material-Design text field, Checkbox. ========================================================================= */ /* ---- Button ---------------------------------------------------------- */ .lf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--lf-space-2); min-height: var(--lf-tap-min); padding: 0 var(--lf-space-4); font: var(--lf-fw-medium) var(--lf-fs-sm)/1 var(--lf-font-sans); border-radius: var(--lf-radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; transition: background-color var(--lf-dur-fast) var(--lf-ease), border-color var(--lf-dur-fast) var(--lf-ease), box-shadow var(--lf-dur-fast) var(--lf-ease), transform .05s var(--lf-ease); } .lf-btn:hover { text-decoration: none; } .lf-btn:active { transform: translateY(1px); } .lf-btn[disabled], .lf-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } .lf-btn--block { display: flex; width: 100%; } .lf-btn--sm { min-height: 36px; padding: 0 var(--lf-space-3); font-size: var(--lf-fs-xs); } .lf-btn--lg { min-height: 52px; padding: 0 var(--lf-space-5); font-size: var(--lf-fs-md); } .lf-btn--primary { background: var(--lf-orange); color: var(--lf-on-primary); } .lf-btn--primary:hover { background: var(--lf-orange-dark); } .lf-btn--ghost { background: transparent; border-color: var(--lf-border); color: var(--lf-text); } .lf-btn--ghost:hover { background: var(--lf-surface-2); } .lf-btn--text { background: var(--lf-orange-soft); color: var(--lf-orange-ink); } .lf-btn--text:hover { background: color-mix(in srgb, var(--lf-orange) 20%, var(--lf-orange-soft)); } .lf-btn--on-band { background: #fff; color: var(--lf-orange-dark); } .lf-btn--on-band:hover { background: rgba(255,255,255,.88); } /* ---- Form field (labelled hint / error) ------------------------------ */ .lf-hint { font: var(--lf-fw-regular) var(--lf-fs-xs) var(--lf-font-sans); color: var(--lf-text-muted); } .lf-error-text { font: var(--lf-fw-regular) var(--lf-fs-xs) var(--lf-font-sans); color: var(--lf-error); display: flex; align-items: center; gap: 5px; } /* ---- Checkbox / radio ------------------------------------------------ */ .lf-check { display: inline-flex; align-items: flex-start; gap: var(--lf-space-2); cursor: pointer; font: var(--lf-fw-regular) var(--lf-fs-sm)/1.4 var(--lf-font-sans); color: var(--lf-text); } .lf-check input { position: absolute; opacity: 0; width: 0; height: 0; } .lf-check__box { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--lf-border); border-radius: var(--lf-radius-sm); background: var(--lf-bg); display: grid; place-items: center; transition: background-color var(--lf-dur-fast) var(--lf-ease), border-color var(--lf-dur-fast) var(--lf-ease); } .lf-check__box svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--lf-dur-fast), transform var(--lf-dur-fast); } .lf-check input:checked + .lf-check__box { background: var(--lf-orange); border-color: var(--lf-orange); } .lf-check input:checked + .lf-check__box svg { opacity: 1; transform: scale(1); } .lf-check input:focus-visible + .lf-check__box { outline: var(--lf-focus-ring); outline-offset: 2px; } /* ---- Material Design outlined field (Input) — real notched border ------- The floated label sits in an ACTUAL gap cut into the outline by the fieldset/legend (exactly how Material/MUI do it) — so only the label TEXT shows, never a coloured background rectangle behind it. Pure CSS, no framework. The input text is vertically centred (symmetric padding). */ .md-field { position: relative; display: flex; } .md-input { box-sizing: border-box; width: 100%; height: 56px; margin: 0; padding: 0 14px; /* symmetric → text vertically centred */ font: var(--lf-fw-regular) var(--lf-fs-sm) var(--lf-font-sans); color: var(--lf-text); background: transparent; border: 0; border-radius: var(--lf-radius-md); } .md-input:focus { outline: none; } .md-input::placeholder { color: transparent; } /* The visible outline is drawn by the fieldset behind the input; the legend opens the notch. */ .md-notch { position: absolute; inset: -5px 0 0 0; margin: 0; padding: 0 8px; pointer-events: none; text-align: left; min-width: 0; border: 1px solid var(--lf-border); border-radius: var(--lf-radius-md); transition: border-color var(--lf-dur-fast) var(--lf-ease); } .md-notch legend { width: auto; max-width: 0.01px; height: 11px; padding: 0; font-size: .75em; visibility: hidden; white-space: nowrap; transition: max-width 60ms var(--lf-ease); } .md-notch legend > span { display: inline-block; padding: 0 5px; opacity: 0; } /* Floating label — MUI geometry: anchored top-left, translated into place. */ .md-field > label { position: absolute; left: 0; top: 0; transform: translate(14px, 19px) scale(1); transform-origin: top left; max-width: calc(100% - 24px); color: var(--lf-text-muted); font-size: var(--lf-fs-sm); line-height: 1; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform var(--lf-dur-fast) var(--lf-ease), color var(--lf-dur-fast) var(--lf-ease); } .md-req { color: var(--lf-error); margin-left: 2px; } /* Floated (focused or filled): label rises onto the border line and the notch opens a matching gap — no background needed. */ .md-input:focus + label, .md-input:not(:placeholder-shown) + label { transform: translate(14px, -4.7px) scale(.75); } .md-input:focus + label { color: var(--lf-orange-ink); } .md-input:focus ~ .md-notch legend, .md-input:not(:placeholder-shown) ~ .md-notch legend { max-width: 100%; } /* Focus & error states on the outline. */ .md-input:focus ~ .md-notch { border-color: var(--lf-orange); border-width: 2px; } .md-field.is-invalid .md-notch { border-color: var(--lf-error); } .md-field.is-invalid > label { color: var(--lf-error); } .md-field.is-invalid .md-input:focus ~ .md-notch { border-color: var(--lf-error); border-width: 2px; }