/* WSK Group Corporate Identity — buyer portal * * Implements WSK CI Manual v1.0 (May 2026): * * Petrol #537780 as the only accent (≤ 10% surface) * * Paper #FAFAF7 as background (warm off-white, NEVER pure white except in cards) * * Ink #0A0A0A for headlines & primary buttons * * No gradients, no glassmorphism, no neon — explicitly forbidden by §01 brand-not-list * * Asymmetric, left-aligned, generous whitespace * * Eyebrow (mono uppercase, petrol) → Title (chakra petch, dot at end) → Subtitle * * Hairline rules in Ink or Rule-Soft (#E0DDD3), never Petrol as primary rule */ /* ── Typefaces (loaded from Google Fonts in layout ) ────────── */ :root { --font-display: 'Chakra Petch', 'Inter', system-ui, sans-serif; --font-body: 'Manrope', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --color-paper: #FAFAF7; --color-pure: #FFFFFF; --color-ink: #0A0A0A; --color-charcoal: #1A1A1A; --color-graphite: #2A2A2A; --color-muted: #6B6F76; --color-rule: #E0DDD3; --color-petrol-deep: #3F5A61; --color-petrol: #537780; --color-petrol-mid: #69939D; --color-petrol-soft: #87A9B1; --color-petrol-mist: #C5D4D8; --color-success: #2D8659; --color-warning: #C68A2E; --color-warning-deep: #8E5F1A; --color-danger: #A8453D; } html { background: var(--color-paper); } body { font-family: var(--font-body); color: var(--color-ink); background: var(--color-paper); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Display headings (Chakra Petch with negative letter-spacing for big sizes) */ .font-display { font-family: var(--font-display); letter-spacing: -0.01em; } .font-mono { font-family: var(--font-mono); } /* ── Stilfigur: Eyebrow (mono UPPERCASE in Petrol) ────────────────── */ .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-petrol); display: inline-block; } .eyebrow-mid { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-petrol-mid); } /* ── Stilfigur: Page-Title with dot-at-end ────────────────────────── */ .h1-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.018em; color: var(--color-ink); } .h1-title::after { content: '.'; color: var(--color-petrol); } .h2-section { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.3; color: var(--color-ink); } /* ── Subtitle (Manrope 300) ───────────────────────────────────────── */ .lead { font-family: var(--font-body); font-weight: 300; font-size: 1rem; line-height: 1.6; color: var(--color-graphite); max-width: 60ch; } /* ── Hairline rules ──────────────────────────────────────────────── */ .rule-ink { border-color: var(--color-ink); } .rule-soft { border-color: var(--color-rule); } hr.rule-ink { border-top: 1px solid var(--color-ink); border-bottom: 0; } hr.rule-soft { border-top: 1px solid var(--color-rule); border-bottom: 0; } /* ── Cards ───────────────────────────────────────────────────────── */ .card { background: var(--color-pure); border: 1px solid var(--color-rule); border-radius: 2px; } .card-petrol { background: var(--color-petrol); color: var(--color-pure); border-radius: 2px; } .card-ink { background: var(--color-ink); color: var(--color-paper); border-radius: 2px; } /* ── Buttons ─────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; padding: 0.65rem 1.25rem; border-radius: 2px; transition: all 0.18s ease; min-height: 44px; white-space: nowrap; } .btn-primary { background: var(--color-ink); color: var(--color-pure); border: 1px solid var(--color-ink); } .btn-primary:hover { background: var(--color-charcoal); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } .btn-secondary { background: transparent; color: var(--color-petrol); border: 1px solid var(--color-petrol); } .btn-secondary:hover { background: var(--color-petrol); color: var(--color-pure); } .btn-ghost { background: transparent; color: var(--color-graphite); border: 1px solid var(--color-rule); } .btn-ghost:hover { border-color: var(--color-ink); color: var(--color-ink); } .btn-danger-outline { background: transparent; color: var(--color-danger); border: 1px solid var(--color-danger); } .btn-danger-outline:hover { background: var(--color-danger); color: var(--color-pure); } /* ── Form inputs ─────────────────────────────────────────────────── */ .input { background: var(--color-pure); border: 1px solid var(--color-rule); color: var(--color-ink); padding: 0.6rem 0.85rem; border-radius: 2px; width: 100%; font-family: var(--font-body); font-size: 0.95rem; min-height: 44px; transition: border-color 0.15s, box-shadow 0.15s; } .input:focus { outline: none; border-color: var(--color-petrol); box-shadow: 0 0 0 2px rgba(83, 119, 128, 0.18); } .input-mono { font-family: var(--font-mono); } .label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); display: block; margin-bottom: 0.4rem; } /* ── Tables (per CI: Ink header with Pure text, mono uppercase column heads in Petrol-Mid) */ .tbl { width: 100%; background: var(--color-pure); border: 1px solid var(--color-rule); border-collapse: collapse; font-size: 0.9rem; } .tbl thead { background: var(--color-ink); color: var(--color-pure); } .tbl thead th { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; text-align: left; padding: 0.85rem 1rem; } .tbl tbody td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-rule); color: var(--color-graphite); } .tbl tbody tr:last-child td { border-bottom: none; } .tbl tbody tr:hover { background: var(--color-paper); } .tbl-zebra tbody tr:nth-child(even) { background: rgba(250, 250, 247, 0.6); } .tbl-num { text-align: right; font-variant-numeric: tabular-nums; } /* ── Status badges (semantic colors, accent only — never as fill backgrounds) */ .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.7rem; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; border-radius: 9999px; border: 1px solid currentColor; background: transparent; } .badge-pending { color: var(--color-warning-deep); } .badge-accepted { color: var(--color-success); } .badge-rejected { color: var(--color-danger); } .badge-counter { color: var(--color-petrol); } .badge-petrol { color: var(--color-petrol); } /* ── Petrol KC-style pill (KC-MARKIERUNG in CI manual) ────────────── */ .pill-petrol { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.7rem; background: var(--color-petrol); color: var(--color-pure); font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; border-radius: 9999px; } /* ── Links ───────────────────────────────────────────────────────── */ a.link { color: var(--color-petrol); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; } a.link:hover { border-bottom-color: var(--color-petrol); } /* ── Navigation link with petrol underline on active ──────────────── */ .nav-link { position: relative; color: var(--color-graphite); font-size: 0.9rem; padding-bottom: 4px; } .nav-link:hover { color: var(--color-ink); } .nav-link.active { color: var(--color-ink); font-weight: 500; } .nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -16px; height: 2px; background: var(--color-petrol); } /* ── Language switcher ────────────────────────────────────────────── */ .lang-btn { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; padding: 0.25rem 0.55rem; color: var(--color-muted); border: 1px solid transparent; border-radius: 2px; transition: all 0.15s; } .lang-btn:hover { color: var(--color-ink); } .lang-btn.active { color: var(--color-petrol); border-color: var(--color-rule); background: var(--color-pure); } /* ── Trenner: middle-dot per CI ───────────────────────────────────── */ .dot::before { content: '·'; color: var(--color-muted); margin: 0 0.6rem; } /* ── Native dialog (modal) ────────────────────────────────────────── */ dialog { background: var(--color-pure); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: 2px; padding: 0; max-width: 32rem; width: 90%; } dialog::backdrop { background: rgba(10, 10, 10, 0.4); } /* ── HTMX progress indicator ──────────────────────────────────────── */ .htmx-indicator { opacity: 0; transition: opacity 200ms; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* ── Document header layout (per CI standard-header pattern) ──────── */ .doc-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0 0.85rem; border-bottom: 1px solid var(--color-ink); } .doc-header .meta { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); } .doc-footer { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); padding: 1rem 0; border-top: 1px solid var(--color-rule); display: flex; justify-content: space-between; }