/* ========================================================================== Client Portal UI — Radix Themes look, plain CSS, no React. Load AFTER radix-colors.css. Accent : indigo Gray : sand (waermer als Radix' Vorschlag slate: das Haus schreibt auf Papier, nicht auf Blau) Dark mode: add class="dark" to . Die Masse stammen aus @radix-ui/themes/styles.css und sind daran abgeglichen: Groessenskala, Radien je Groesse, Alpha-Stufen fuer alle weichen Flaechen, Rahmen und leise Schrift, Fokus als Outline. Absichtlich anders, damit es niemand versehentlich zurueckbaut: - Schrift ist Inter statt der Systemschrift. Es ist unsere Hausschrift - .btn--ghost ist grau, das entspricht Radix' variant=ghost color=gray. Ein Akzent-Ghost gibt es hier nicht, es gibt nichts, was ihn braucht - .heading-4 und .sidebar__label sind versalisierte Etiketten. Radix hat dafuer keine Komponente, das ist unsere Zutat - Knoepfe zeigen den Zeigefinger. Radix laesst den Pfeil stehen ========================================================================== */ /* --- 0. Schriften ------------------------------------------------------- Inter liegt selbst dabei, nicht per URL von leokawa.design. Ein Render, der auf eine fremde Seite wartet, ist langsam und faellt aus, sobald die klemmt. Der Display-Schnitt ist der engere: gebaut fuer grosse Grade, deshalb nur Ueberschriften und Zahlen. Die Pfade sind relativ, damit sie unter /ui.css in der Anwendung und in den Vorschauen in design/ gleich stimmen. ------------------------------------------------------------------------ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-Medium.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter-Bold.woff2') format('woff2'); } @font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-DisplayMedium.woff2') format('woff2'); } @font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter-DisplayBold.woff2') format('woff2'); } /* --- 1. Scales ---------------------------------------------------------- */ :root { /* Space — Radix Themes scale, 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; /* Radius */ --radius-1: 3px; --radius-2: 4px; --radius-3: 6px; --radius-4: 8px; --radius-5: 12px; --radius-6: 16px; /* Der Grund, der um einen weissen Block laeuft: Karte und Kennzahl. Steht als Marke da, weil drei Regeln ihn brauchen — der Innenabstand der Karte, der Radius des Blocks darin und dasselbe noch einmal bei den Kennzahlen. Drei Zahlen von Hand waeren drei Zahlen, die auseinanderlaufen. */ --frame: 5px; /* Die Sperrung fuer Versalien. Kleine Grossbuchstaben brauchen Luft, sonst lesen sie sich als ein Wort. Gilt fuer den Kopf einer Karte und fuer die Beschriftung einer Kennzahl. */ --ls-caps: 0.06em; --radius-full: 9999px; /* Type — each size has a matched line-height and tracking */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-display: "Inter Display", var(--font-sans); --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --fs-1: 12px; --lh-1: 16px; --ls-1: 0.0025em; --fs-2: 14px; --lh-2: 20px; --ls-2: 0em; --fs-3: 16px; --lh-3: 24px; --ls-3: 0em; --fs-4: 18px; --lh-4: 26px; --ls-4: -0.0025em; --fs-5: 20px; --lh-5: 28px; --ls-5: -0.005em; --fs-6: 24px; --lh-6: 30px; --ls-6: -0.00625em; --fs-7: 28px; --lh-7: 36px; --ls-7: -0.0075em; --fs-8: 35px; --lh-8: 40px; --ls-8: -0.01em; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Shadows — die Werte aus @radix-ui/themes, hell. Der dunkle Satz steht unten in .dark. Radix traegt Flaechen ueber Raender, nicht ueber Hoehe: --card-line ist der ganze Rahmen einer Karte, ohne Schlagschatten. */ --card-line: 0 0 0 1px var(--sand-a5); --card-line-hv: 0 0 0 1px var(--sand-a7); --shadow-1: inset 0 0 0 1px var(--sand-a5), inset 0 1.5px 2px 0 var(--sand-a2), inset 0 1.5px 2px 0 var(--black-a2); --shadow-2: 0 0 0 1px var(--sand-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--sand-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1); --shadow-3: 0 0 0 1px var(--sand-a3), 0 2px 3px -2px var(--sand-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2); --shadow-4: 0 0 0 1px var(--sand-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--sand-a3); --transition: 120ms cubic-bezier(0.4, 0, 0.2, 1); } /* --- 2. Semantic tokens ------------------------------------------------- Views should reference THESE, never --sand-6 directly. Swapping accent colour later then means editing this block only. */ :root, .light { --bg-page: #ffffff; /* Radix --color-background */ --bg-panel: #ffffff; /* Radix --color-panel-solid */ --bg-surface: var(--sand-2); /* Seitenleiste, Kontaktblock */ --bg-subtle: var(--sand-3); --field-surface: rgba(255, 255, 255, 0.85); /* Radix --color-surface */ /* Raender liegen bei Radix auf den Alpha-Stufen, damit sie ueber jedem Grund gleich wirken. a5 Karte, a6 Trenner, a7 Feld, a8 kraeftig. */ --border-subtle: var(--sand-a5); --border-sep: var(--sand-a6); --border-normal: var(--sand-a7); --border-strong: var(--sand-a8); --text-high: var(--sand-12); --text-low: var(--sand-a11); --text-faint: var(--sand-a10); --accent-solid: var(--indigo-9); --accent-hover: var(--indigo-10); --accent-contrast: #ffffff; /* Schrift auf --accent-solid */ --accent-soft: var(--indigo-a3); --accent-soft-hv: var(--indigo-a4); --accent-border: var(--indigo-a8); --accent-text: var(--indigo-a11); --accent-ring: var(--indigo-8); --neutral-soft: var(--sand-a3); --neutral-soft-hv: var(--sand-a4); } .dark { --bg-page: var(--sand-1); --bg-panel: var(--sand-2); --bg-surface: var(--sand-2); --bg-subtle: var(--sand-3); --field-surface: rgba(0, 0, 0, 0.25); --shadow-1: inset 0 -1px 1px 0 var(--sand-a3), inset 0 0 0 1px var(--sand-a3), inset 0 3px 4px 0 var(--black-a5), inset 0 0 0 1px var(--sand-a4); --shadow-2: 0 0 0 1px var(--sand-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5); --shadow-3: 0 0 0 1px var(--sand-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7); --shadow-4: 0 0 0 1px var(--sand-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5); } /* --- 3. Reset & base ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg-page); color: var(--text-high); font-family: var(--font-sans); font-size: var(--fs-3); line-height: var(--lh-3); letter-spacing: var(--ls-3); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p, figure { margin: 0; } /* Radix unterstreicht erst beim Zeigen, und zwar duenn und tiefgestellt. */ :where(a) { color: var(--accent-text); text-decoration-line: none; text-decoration-color: var(--accent-a5); text-decoration-thickness: min(2px, max(1px, 0.05em)); text-underline-offset: calc(0.025em + 2px); } :where(a):hover { text-decoration-line: underline; } /* Radix setzt den Ring nach aussen, wo eine gefuellte Flaeche ihn sonst verdeckt, und nach innen, wo der Rahmen selbst duenn ist. */ :focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--radius-2); } .btn--soft:focus-visible, .btn--ghost:focus-visible, .btn--outline:focus-visible, .btn--neutral:focus-visible, .btn--danger:focus-visible, .navlink:focus-visible, .card:focus-visible, .check input:focus-visible { outline-offset: -1px; } /* --- 4. Layout ---------------------------------------------------------- */ .container { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 var(--space-5); } .container--wide { max-width: 1140px; } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack--2 { gap: var(--space-2); } .stack--3 { gap: var(--space-3); } .stack--5 { gap: var(--space-5); } .stack--6 { gap: var(--space-6); } /* Two columns that collapse. Used on the portal and the admin company page. */ .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; } /* Zwei .cols untereinander sind Geschwister, das Formular dazwischen gibt nichts her. Ohne diese Zeile klebt die Beschriftung der naechsten Zeile am Feld darueber und gehoert optisch zur falschen Zeile. */ .cols + .cols { margin-top: var(--space-4); } /* Unter 1000px untereinander. Zwei Spalten auf einem schmalen Fenster sind im CRM nicht dicht, sondern eng. Stand bisher nur im