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
index.html
+3
View File
@@ -4,6 +4,9 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RAPPORT — Hosting für Architekturbüros</title> <title>RAPPORT — Hosting für Architekturbüros</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
public/fonts/Krungthep.ttf
BIN
View File
Binary file not shown.
src/styles.css
+41 -32
View File
@@ -1,23 +1,27 @@
/* Design-Tokens 1:1 von rapport.openbureau.ch übernommen: /* Design-Tokens 1:1 aus RAPPORT-WEBSITE (assets/css/custom.css):
weißer Grund, near-black Text, warmes Braun als Akzent, System-Font-Stack. */ 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 { :root {
--bg: #ffffff; --bg: #ece9e3; /* warmes Beige-Grau (RAPPORT-WEBSITE) */
--bg-warm: #fafafa; /* dezentes warmes Off-White für Sektionen */ --card: #f0ede8; /* Karten / leicht heller */
--bg-tint: #fff8f0; /* warmer Akzent-Hintergrund */ --card-soft: #f5f2ee;
--card: #ffffff; --ink: #2d2926; /* warmes Near-Black */
--ink: #1a1a1a; /* near-black Text */ --muted: #6b645c;
--ink-soft: #2a2a2a; --faint: #9b938a;
--muted: #666666; --line: #d9d4cc; /* Border */
--faint: #888888; --line-soft: #e4dfd7;
--line: #e8e8e8; --accent: #b07848; /* Braun-Akzent */
--line-soft: #f0f0f0; --accent-hover: #9a6539;
--accent: #b07848; /* warmes Braun (openbureau) */
--accent-hover: #c88a5c;
--accent-deep: #9a6638;
--accent-ink: #ffffff; --accent-ink: #ffffff;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace; --brand-font: Krungthep, "Archivo Black", sans-serif;
--brand-font: Krungthep, "Archivo Black", var(--font-sans);
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
body { body {
@@ -33,42 +37,42 @@ a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; } a:hover { text-decoration: underline; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; } .wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .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 { .card {
background: var(--card); background: var(--card);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 12px; border-radius: 14px;
padding: 32px; 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; } .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; } label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
input { input {
width: 100%; background: #fff; border: 1.5px solid var(--line); width: 100%; background: #fdfcfa; border: 1.5px solid var(--line);
border-radius: 8px; padding: 11px 14px; font-family: var(--font-sans); font-size: 15px; 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; 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 { button.primary {
width: 100%; padding: 12px; background: var(--ink); color: var(--accent-ink); width: 100%; padding: 12px; background: var(--accent); color: var(--accent-ink);
border: none; border-radius: 8px; font-family: var(--font-sans); font-size: 15px; border: none; border-radius: 9px; font-family: var(--font-sans); font-size: 15px;
font-weight: 600; cursor: pointer; transition: background .15s; font-weight: 600; cursor: pointer; transition: background .15s;
} }
button.primary:hover { background: var(--ink-soft); } button.primary:hover { background: var(--accent-hover); }
button.accent { background: var(--accent); } button.dark { background: var(--ink); }
button.accent:hover { background: var(--accent-hover); } button.dark:hover { background: #1f1c19; }
button.ghost { button.ghost {
background: none; border: none; color: var(--muted); background: none; border: none; color: var(--muted);
font-family: var(--font-sans); font-size: 14px; cursor: pointer; font-family: var(--font-sans); font-size: 14px; cursor: pointer;
} }
button.ghost:hover { color: var(--ink); } 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; } 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; } 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); } .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-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.plan { position: relative; display: flex; flex-direction: column; } .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); .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; } 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 .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 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 { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.plan li:last-child { border-bottom: none; } .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; }
src/views/Landing.jsx
+6 -8
View File
@@ -20,20 +20,18 @@ export default function Landing({ navigate }) {
</div> </div>
</div> </div>
<div style={{ padding: "80px 0", maxWidth: 620 }}> <div className="hero">
<h1 style={{ fontSize: 44, lineHeight: 1.1, margin: 0 }}> <h1>Ihre eigene Rapport-Instanz.<br />In Minuten startklar.</h1>
Ihre eigene Rapport-Instanz.<br />In Minuten startklar. <p>
</h1>
<p className="muted" style={{ fontSize: 15, lineHeight: 1.6, marginTop: 20 }}>
Studio-Management für Architekturbüros — gehostet, gewartet und Studio-Management für Architekturbüros — gehostet, gewartet und
gesichert. Registrieren, Abo wählen, loslegen. Ihre Daten in der gesichert. Registrieren, Abo wählen, loslegen. Ihre Daten in der
Schweiz. Schweiz.
</p> </p>
<div style={{ display: "flex", gap: 12, marginTop: 28 }}> <div style={{ display: "flex", gap: 12, marginTop: 30 }}>
<button className="primary accent" style={{ width: "auto", padding: "13px 28px" }} onClick={() => navigate("/register")}> <button className="primary" style={{ width: "auto", padding: "13px 28px" }} onClick={() => navigate("/register")}>
Jetzt starten Jetzt starten
</button> </button>
<button className="primary" style={{ width: "auto", padding: "13px 28px", background: "transparent", color: "var(--ink)", border: "1px solid var(--line)" }} onClick={() => navigate("/plans")}> <button className="primary dark" style={{ width: "auto", padding: "13px 28px", background: "transparent", color: "var(--ink)", border: "1px solid var(--line)" }} onClick={() => navigate("/plans")}>
Preise ansehen Preise ansehen
</button> </button>
</div> </div>