diff --git a/index.html b/index.html index 59809dd..45c957f 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,9 @@ RAPPORT — Hosting für Architekturbüros + + +
diff --git a/public/fonts/Krungthep.ttf b/public/fonts/Krungthep.ttf new file mode 100644 index 0000000..9415853 Binary files /dev/null and b/public/fonts/Krungthep.ttf differ diff --git a/src/styles.css b/src/styles.css index a74a1c2..8c2cb34 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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; } diff --git a/src/views/Landing.jsx b/src/views/Landing.jsx index 276d9c2..2698d53 100644 --- a/src/views/Landing.jsx +++ b/src/views/Landing.jsx @@ -20,20 +20,18 @@ export default function Landing({ navigate }) { -
-

- Ihre eigene Rapport-Instanz.
In Minuten startklar. -

-

+

+

Ihre eigene Rapport-Instanz.
In Minuten startklar.

+

Studio-Management für Architekturbüros — gehostet, gewartet und gesichert. Registrieren, Abo wählen, loslegen. Ihre Daten in der Schweiz.

-
- -