karim
07485024cd
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>
95 lines
4.3 KiB
CSS
95 lines
4.3 KiB
CSS
/* 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: #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: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
|
|
--brand-font: Krungthep, "Archivo Black", sans-serif;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: var(--font-sans);
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
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.02em; color: var(--ink); }
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 32px;
|
|
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: #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.15); }
|
|
|
|
button.primary {
|
|
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(--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: #f8ece4; border: 1px solid #e0b896; color: #9a4a1e;
|
|
padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
|
|
.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); }
|
|
.muted { color: var(--muted); }
|
|
|
|
.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.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; }
|