/* ============================================================================
HEROS — wspólny fundament wizualny (design system Codexa V0).
Dołączany -iem NA KOŃCU każdego szablonu, więc nadpisuje
wcześniejsze inline :root (kolejność źródła). Etap 1: fonty + tokeny +
przepięcie istniejących zmiennych aplikacji na paletę Heros. Bez zmian
funkcjonalnych — tylko warstwa wizualna. Źródło: HEROS_INTEGRACJA/03_.../
DESIGN_HEROS_od_Codexa_V0.md
========================================================================== */
/* --- Inter (self-hosted, bez CDN — zasada repo) --- */
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/static/fonts/inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
src: url('/static/fonts/inter/Inter-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
src: url('/static/fonts/inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
src: url('/static/fonts/inter/Inter-Bold.woff2') format('woff2');
}
:root {
color-scheme: light;
/* === Tokeny Heros (nowe, do komponentów w kolejnych etapach) === */
--heros-green: #2f7d00;
--heros-green-700: #236100;
--heros-green-800: #174400;
--heros-lime: #b9ff00;
--heros-lime-soft: #eef7e8;
--accent: #177a63;
--accent-dark: #0f5e4b;
--info: #2b668e; --info-bg: #eaf7ff;
--success: #2f7d00; --success-bg: #eef7e8;
--warning: #8a5a00; --warning-bg: #fff4d7; --warning-line: #efc56a;
--danger: #b43b3b; --danger-bg: #fff0f0; --danger-line: #e2b5b5;
--bg: #f4f6f7;
--surface: #ffffff;
--surface-2: #eef2f3;
--surface-3: #fbfcfc;
--panel: #ffffff;
--line-strong: #cbd5d9;
--text: #172126;
--ink: #111827;
--muted: #5f6f76;
--muted-2: #6b7280;
--text-inverse: #ffffff;
--radius-xs: 4px;
--radius-md: 8px;
--radius-pill: 999px;
--shadow-panel: 0 10px 30px rgba(15, 23, 42, .07);
--shadow-card: 0 12px 28px rgba(25, 39, 48, .08);
--shadow-modal: 0 24px 70px rgba(12, 24, 28, .24);
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 20px; --space-6: 24px;
--font-sans: 'Inter', 'Segoe UI', Arial, sans-serif;
--font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 13px;
--font-size-md: 14px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-2xl: 26px;
--line-height-tight: 1.2; --line-height-base: 1.4; --line-height-relaxed: 1.55;
--control-height-sm: 32px; --control-height: 36px; --control-height-lg: 40px;
--control-pad-x: 12px; --control-pad-y: 8px;
--focus-ring: 0 0 0 3px rgba(47, 125, 0, .15);
/* === Przepięcie istniejących zmiennych aplikacji na paletę Heros === */
/* (nazwy używane w calculator.html / admin.html / business.html / tariffs.html) */
--green: #2f7d00;
--green-dark: #236100;
--green-light: #eef7e8;
--primary: #2f7d00;
--primary-dark: #236100;
--line: #d8e0e3;
--soft: #f4f6f7;
--lime: #eef7e8;
--gray-50: #fbfcfc;
--gray-100: #f1f5f4;
--gray-200: #d8e0e3;
--gray-300: #cbd5d9;
--gray-400: #6b7280;
--gray-500: #5f6f76;
--gray-600: #5f6f76;
--gray-700: #374151;
--gray-800: #172126;
--blue: #2b668e;
--orange: #8a5a00;
--red: #b43b3b;
--yellow: #efc56a;
--shadow-sm: var(--shadow-panel);
--shadow: var(--shadow-card);
--shadow-lg: var(--shadow-modal);
--radius: 8px; /* Codex: karty/panele max 8px */
--radius-sm: 6px;
}
/* --- Baza: font operacyjny, spokojne tło --- */
body {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Kontrolki formularza NIE dziedziczą font-family — wymuszamy Inter jawnie. */
button, .btn, input, select, textarea, optgroup {
font-family: var(--font-sans);
}
/* --- Bezpieczne, globalne wykończenia (spójne fokusy) --- */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* ============================================================================
ETAP 2 — komponenty rdzeniowe na tokenach (nadpisują reguły szablonów,
bo plik ładuje się na końcu ). Sizing zbliżony do obecnego —
harmonizacja ramek / promieni / wag / fokusu; bez gradientów i ciężkich cieni.
========================================================================== */
/* --- Przyciski --- */
.btn {
border-radius: var(--radius-sm);
border: 1px solid var(--line);
font-weight: 700;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { border-color: var(--line-strong); }
.btn-primary {
background: var(--heros-green);
border-color: var(--heros-green);
color: var(--text-inverse);
}
.btn-primary:hover {
background: var(--heros-green-700);
border-color: var(--heros-green-700);
box-shadow: none; /* Codex: bez ciężkiego glow */
}
.btn-secondary {
background: var(--surface);
color: var(--heros-green);
border-color: #b7d7a4;
}
.btn-secondary:hover { background: var(--heros-lime-soft); border-color: #b7d7a4; }
/* --- Karty / panele: cienka ramka + lekki cień, promień <=8px --- */
.card, .panel, .surface {
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-panel);
}
/* --- Pola formularzy: ramka + fokus zielony + hover + disabled --- */
input, select, textarea {
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
border-color: var(--heros-green);
box-shadow: var(--focus-ring);
outline: none;
}
input:disabled, select:disabled, textarea:disabled {
background: var(--surface-2);
color: var(--muted);
cursor: not-allowed;
}
/* --- Modale: lekka ramka + cień modalowy --- */
.tariffs-modal, .modal, .modal-content, .cf-wrap {
box-shadow: var(--shadow-modal);
}
/* --- Spłaszczenie ozdobnych gradientów (Codex: unikać) --- */
.live-preview, .live-stat, .hero, .hero-section {
background: var(--heros-lime-soft) !important;
background-image: none !important;
}
/* --- notice-warning (ostrzeżenia ROI/limitations) — komponent Codexa --- */
.notice-warning {
background: var(--warning-bg);
border: 1px solid var(--warning-line);
border-radius: var(--radius-md);
padding: 10px 12px;
color: var(--warning);
}
.notice-warning strong { color: #6d4300; }
/* --- Kierunek „kwadratów": segmentowe pigułki wyboru boxy jak pola (nie owalne) --- */
.pill { border-radius: var(--radius-sm) !important; }
/* --- Nagłówki sekcji menu bocznego: czytelne, na delikatnym tle (nawigacja) --- */
.sidebar-tree-label {
font-size: 11px;
color: var(--heros-green-800);
background: var(--surface-2);
border-radius: var(--radius-xs);
margin: 12px 8px 4px;
padding: 6px 10px;
letter-spacing: .06em;
}
/* ============================================================================
ETAP 3 — statusy / badge: JEDEN kształt i paleta Heros dla wszystkich chipów.
Zastępuje rozjechane inline-style (różne promienie 4/10/20 px, wielkości
9.5/10.5/11 px, surowe hexy Tailwinda) spójnymi klasami na tokenach
semantycznych. Chip statusu klienta/oferty/źródła → .badge .badge--*.
========================================================================== */
.badge {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-sans);
font-size: 10.5px; font-weight: 700; line-height: 1.35;
padding: 2px 8px; border-radius: var(--radius-sm);
border: 1px solid transparent; white-space: nowrap; letter-spacing: .01em;
}
.badge--neutral { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.badge--info { background: var(--info-bg); color: var(--info); border-color: #bfe0f2; }
.badge--accent { background: #e3f3ef; color: var(--accent-dark); border-color: #bcdfd6; }
.badge--warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-line); }
.badge--success { background: var(--success-bg); color: var(--success); border-color: #b7d7a4; }
.badge--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.badge--solid { background: var(--heros-green); color: #fff; border-color: var(--heros-green); }
/* Chip statusu oferty w nagłówku podglądu (klasa .status-badge + .st-*) — ta
sama paleta i kształt co .badge (nadpisuje inline