karim/RAPPORT-HOST
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: echte RAPPORT-WEBSITE-Tokens + Krungthep-Font übernommen

Browse Source 
Aus RAPPORT-WEBSITE/assets/css/custom.css (Hextra-Overrides):
warmes Beige-Grau (#ece9e3), Krungthep-Brand (lokal gebundelt),
Inter-Body, Braun-Akzent #b07848. Hero an Hextra-Home angelehnt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
karim
2026-05-30 16:20:48 +02:00
parent bd37b7f8bc
commit 07485024cd
4 changed files with 50 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+41 -32
View File
@@ -1,23 +1,27 @@
/* Design-Tokens 1:1 von rapport.openbureau.ch übernommen:
weißer Grund, near-black Text, warmes Braun als Akzent, System-Font-Stack. */
/* Design-Tokens 1:1 aus RAPPORT-WEBSITE (assets/css/custom.css):
warmes Beige-Grau als Grund, Krungthep-Brand, Inter-Body, Braun-Akzent. */
@font-face {
font-family: "Krungthep";
src: url("/fonts/Krungthep.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--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;
--bg: #ece9e3; /* warmes Beige-Grau (RAPPORT-WEBSITE) */
--card: #f0ede8; /* Karten / leicht heller */
--card-soft: #f5f2ee;
--ink: #2d2926; /* warmes Near-Black */
--muted: #6b645c;
--faint: #9b938a;
--line: #d9d4cc; /* Border */
--line-soft: #e4dfd7;
--accent: #b07848; /* Braun-Akzent */
--accent-hover: #9a6539;
--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);
--font-sans: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--brand-font: Krungthep, "Archivo Black", sans-serif;
}
* { box-sizing: border-box; }
body {
@@ -33,42 +37,42 @@ 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: var(--brand-font); font-size: 28px; letter-spacing: 0.01em; color: var(--ink); }
.brand { font-family: var(--brand-font); font-size: 28px; letter-spacing: -0.02em; color: var(--ink); }
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
border-radius: 14px;
padding: 32px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 6px 24px rgba(0,0,0,0.04);
box-shadow: 0 1px 2px rgba(45,41,38,0.04), 0 8px 28px rgba(45,41,38,0.06);
}
.card-sm { width: 100%; max-width: 400px; }
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: #fff; border: 1.5px solid var(--line);
border-radius: 8px; padding: 11px 14px; font-family: var(--font-sans); font-size: 15px;
width: 100%; background: #fdfcfa; border: 1.5px solid var(--line);
border-radius: 9px; 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(176,120,72,0.14); }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(176,120,72,0.15); }
button.primary {
width: 100%; padding: 12px; background: var(--ink); color: var(--accent-ink);
border: none; border-radius: 8px; font-family: var(--font-sans); font-size: 15px;
width: 100%; padding: 12px; background: var(--accent); color: var(--accent-ink);
border: none; border-radius: 9px; font-family: var(--font-sans); font-size: 15px;
font-weight: 600; cursor: pointer; transition: background .15s;
}
button.primary:hover { background: var(--ink-soft); }
button.accent { background: var(--accent); }
button.accent:hover { background: var(--accent-hover); }
button.primary:hover { background: var(--accent-hover); }
button.dark { background: var(--ink); }
button.dark:hover { background: #1f1c19; }
button.ghost {
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: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
.err { background: #f8ece4; border: 1px solid #e0b896; color: #9a4a1e;
padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.ok { background: #fff8f0; border: 1px solid #e8c9a8; color: var(--accent-deep);
.ok { background: #ecefe6; border: 1px solid #c2cdb0; color: #4a5a32;
padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.nav { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
@@ -76,10 +80,15 @@ button.ghost:hover { color: var(--ink); }
.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.rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 28px rgba(176,120,72,0.14); }
.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; }
/* Hero — angelehnt an die Hextra-Home der RAPPORT-WEBSITE */
.hero { padding: 88px 0 72px; max-width: 680px; }
.hero h1 { font-family: var(--brand-font); font-size: 52px; line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.hero p { font-size: 17px; line-height: 1.6; color: var(--muted); margin-top: 22px; }