From bd37b7f8bcbe19103ca6a63959303ef1b6162eb0 Mon Sep 17 00:00:00 2001 From: karim Date: Sat, 30 May 2026 16:11:57 +0200 Subject: [PATCH] design: HOST-Frontend an rapport.openbureau.ch angeglichen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Echte Design-Tokens aus dem openbureau-Stylesheet übernommen: - weißer Grund (#fff), warme Off-Whites (#fafafa/#fff8f0) - near-black Text (#1a1a1a), warmes Braun als Akzent (#b07848) - System-Font-Stack (-apple-system…) + SF Mono, Brand Krungthep - Hero-CTA in Akzent-Braun, dunkle Sekundär-Buttons Co-Authored-By: Claude Opus 4.8 --- src/styles.css | 96 ++++++++++++++++++++++++++----------------- src/views/Landing.jsx | 2 +- 2 files changed, 59 insertions(+), 39 deletions(-) diff --git a/src/styles.css b/src/styles.css index 013d7ed..a74a1c2 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,65 +1,85 @@ +/* Design-Tokens 1:1 von rapport.openbureau.ch übernommen: + weißer Grund, near-black Text, warmes Braun als Akzent, System-Font-Stack. */ :root { - --bg: #ebe7e1; - --card: #fdfcfa; - --ink: #1a1a18; - --muted: #8c8880; - --line: #ddd8d0; - --accent: #9a7858; - --accent-ink: #f0ede8; + --bg: #ffffff; + --bg-warm: #fafafa; /* dezentes warmes Off-White für Sektionen */ + --bg-tint: #fff8f0; /* warmer Akzent-Hintergrund */ + --card: #ffffff; + --ink: #1a1a1a; /* near-black Text */ + --ink-soft: #2a2a2a; + --muted: #666666; + --faint: #888888; + --line: #e8e8e8; + --line-soft: #f0f0f0; + --accent: #b07848; /* warmes Braun (openbureau) */ + --accent-hover: #c88a5c; + --accent-deep: #9a6638; + --accent-ink: #ffffff; + --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace; + --brand-font: Krungthep, "Archivo Black", var(--font-sans); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); - font-family: "DM Mono", "Courier New", monospace; + font-family: var(--font-sans); + font-size: 16px; + line-height: 1.6; + -webkit-font-smoothing: antialiased; } -a { color: var(--accent); } -.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; } +a { color: var(--accent); text-decoration: none; } +a:hover { text-decoration: underline; } +.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; } .center { min-height: 100vh; display: flex; align-items: center; justify-content: center; } -.brand { font-family: "Krungthep", "Archivo Black", sans-serif; font-size: 32px; letter-spacing: -0.02em; } +.brand { font-family: var(--brand-font); font-size: 28px; letter-spacing: 0.01em; color: var(--ink); } .card { background: var(--card); border: 1px solid var(--line); - border-radius: 16px; + border-radius: 12px; padding: 32px; - box-shadow: 0 8px 40px rgba(0,0,0,0.08); + box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 6px 24px rgba(0,0,0,0.04); } -.card-sm { width: 100%; max-width: 380px; } +.card-sm { width: 100%; max-width: 400px; } -label { display: block; font-size: 9px; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; } +label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } input { - width: 100%; background: #f7f4f0; border: 1.5px solid var(--line); - border-radius: 10px; padding: 11px 14px; font-family: inherit; font-size: 13px; - color: var(--ink); outline: none; margin-bottom: 14px; + width: 100%; background: #fff; border: 1.5px solid var(--line); + border-radius: 8px; padding: 11px 14px; font-family: var(--font-sans); font-size: 15px; + color: var(--ink); outline: none; margin-bottom: 16px; transition: border-color .15s, box-shadow .15s; } -input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(154,120,88,0.14); } +input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(176,120,72,0.14); } button.primary { - width: 100%; padding: 13px; background: var(--ink); color: var(--accent-ink); - border: none; border-radius: 10px; font-family: inherit; font-size: 13px; - font-weight: 500; letter-spacing: 0.04em; cursor: pointer; + width: 100%; padding: 12px; background: var(--ink); color: var(--accent-ink); + border: none; border-radius: 8px; font-family: var(--font-sans); font-size: 15px; + font-weight: 600; cursor: pointer; transition: background .15s; } -button.primary:hover { background: #2e2e28; } +button.primary:hover { background: var(--ink-soft); } +button.accent { background: var(--accent); } +button.accent:hover { background: var(--accent-hover); } button.ghost { - background: none; border: none; color: var(--accent); - font-family: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; + background: none; border: none; color: var(--muted); + font-family: var(--font-sans); font-size: 14px; cursor: pointer; } +button.ghost:hover { color: var(--ink); } -.err { background: #fff5f0; border: 1px solid #f5c9b0; color: #b5621e; - padding: 9px 14px; border-radius: 8px; font-size: 11px; margin-bottom: 14px; } -.ok { background: #e8f5ee; border: 1px solid #b8dbc4; color: #2d6a4f; - padding: 9px 14px; border-radius: 8px; font-size: 11px; margin-bottom: 14px; } +.err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; + padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; } +.ok { background: #fff8f0; border: 1px solid #e8c9a8; color: var(--accent-deep); + padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; } -.nav { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; } +.nav { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line-soft); } .muted { color: var(--muted); } -.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } -.plan { position: relative; } -.plan.rec { border-color: var(--accent); } -.plan .badge { position: absolute; top: -10px; right: 16px; background: var(--accent); - color: var(--accent-ink); font-size: 9px; padding: 3px 8px; border-radius: 6px; letter-spacing: 0.1em; } -.plan .price { font-size: 28px; margin: 8px 0; } -.plan ul { list-style: none; padding: 0; font-size: 12px; color: #555; } -.plan li { padding: 4px 0; border-bottom: 1px solid var(--line); } +.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } +.plan { position: relative; display: flex; flex-direction: column; } +.plan.rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 28px rgba(176,120,72,0.12); } +.plan .badge { position: absolute; top: -11px; right: 18px; background: var(--accent); + color: #fff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.06em; text-transform: uppercase; } +.plan .price { font-size: 32px; font-weight: 700; margin: 10px 0; letter-spacing: -0.02em; } +.plan ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; color: var(--muted); flex: 1; } +.plan li { padding: 7px 0; border-bottom: 1px solid var(--line-soft); } +.plan li:last-child { border-bottom: none; } diff --git a/src/views/Landing.jsx b/src/views/Landing.jsx index f7e14a7..276d9c2 100644 --- a/src/views/Landing.jsx +++ b/src/views/Landing.jsx @@ -30,7 +30,7 @@ export default function Landing({ navigate }) { Schweiz.

-