/* ============================================================ nws.RO — DESIGN TOKENS Sistem complet de variabile CSS. Modifici aici → se schimbă pe tot site-ul. Organizat pe categorii cu convenție BEM-ish. Autor: nrg evolution srl Versiune: 1.0.0 ============================================================ */ :root { /* ========================================================== 1. PALETĂ DE CULORI — LIGHT MODE (implicit) ========================================================== */ /* ── Culorile principale ale brandului nws ── */ --nws-primary: #010ED0; /* Albastru intens — culoarea principală */ --nws-primary-light: #3d48e0; /* Albastru mai deschis — hover state */ --nws-primary-dark: #000baa; /* Albastru închis — pressed/active */ --nws-primary-rgb: 1, 14, 208; /* RGB pentru alpha compositing */ --nws-accent: #010ED0; /* Accent = primary (consistență brand) */ /* ── Neutrale ── */ --nws-dark: #242627; /* Negru aproape pur — text & hover butoane */ --nws-dark-rgb: 36, 38, 39; /* RGB neutru închis */ --nws-white: #ffffff; --nws-black: #000000; /* ── Suprafețe (fundaluri) ── */ --nws-bg: #ffffff; /* Fundal pagină */ --nws-surface: #ffffff; /* Card, modal, popup */ --nws-surface-2: #f7f8fa; /* Secțiuni alternate gri deschis */ --nws-surface-3: #eef0f5; /* Background mai pronunțat */ --nws-surface-hover: #f0f2f5; /* Hover pe suprafețe */ /* ── Borduri ── */ --nws-border: #e5e7eb; /* Borduri standard */ --nws-border-light: rgba(0,0,0,0.15); /* Borduri subtile */ --nws-border-lighter: rgba(0,0,0,0.08); /* Separatoare foarte fine */ /* ── Text ── */ --nws-text: #242627; /* Text principal */ --nws-text-soft: #4b5363; /* Text secundar (paragrafe) */ --nws-text-muted: #7a8294; /* Text terțiar (metadata) */ --nws-text-faint: #a0a7b4; /* Text dezactivat */ --nws-text-inverse: #ffffff; /* Text pe fundal închis */ /* ── Stări semantice ── */ --nws-success: #10b981; /* Verde — confirmare, succes */ --nws-success-light: #d1fae5; --nws-success-dark: #059669; --nws-warning: #f59e0b; /* Portocaliu — atenție */ --nws-warning-light: #fef3c7; --nws-warning-dark: #d97706; --nws-error: #ef4444; /* Roșu — eroare, pericol */ --nws-error-light: #fee2e2; --nws-error-dark: #dc2626; --nws-info: #3b82f6; /* Albastru info */ --nws-info-light: #dbeafe; /* ── Formulare ── */ --nws-input-bg: #ffffff; --nws-input-border: rgba(0,0,0,0.15); --nws-input-focus: var(--nws-primary); --nws-input-placeholder: #9ca3af; /* ── Gradienturi nws ── */ --nws-gradient-primary: linear-gradient(135deg, #010ED0 0%, #3d48e0 50%, #6366f1 100%); --nws-gradient-dark: linear-gradient(135deg, #0a0e27 0%, #010ED0 100%); --nws-gradient-hero: linear-gradient(160deg, #010ED0 0%, #000baa 40%, #0a0e27 100%); --nws-gradient-cta: linear-gradient(135deg, #010ED0 0%, #1e40af 100%); --nws-gradient-surface: linear-gradient(180deg, #f7f8fa 0%, #ffffff 100%); /* ── Overlay-uri ── */ --nws-overlay-light: rgba(255, 255, 255, 0.85); --nws-overlay-dark: rgba(0, 0, 0, 0.6); --nws-overlay-blue: rgba(1, 14, 208, 0.85); /* ========================================================== 2. TIPOGRAFIE ========================================================== */ /* ── Familii de fonturi ── */ --font-heading: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-accent: 'Lato', 'Inter', system-ui, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; /* ── Dimensiuni font (mobile-first) ── */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 42px; --fs-5xl: 48px; --fs-hero: 40px; /* Mobile hero — crește la 56px pe desktop */ /* ── Greutăți font ── */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ── Înălțimea liniei ── */ --lh-tight: 1.2; /* Titluri mari */ --lh-snug: 1.35; /* Subtitluri */ --lh-normal: 1.5; /* Text standard */ --lh-relaxed: 1.65; /* Paragrafe lungi */ --lh-loose: 1.8; /* Text cu spațiere generoasă */ /* ── Spațiere între litere ── */ --ls-tight: -0.02em; /* Titluri mari */ --ls-normal: 0em; /* Text normal */ --ls-wide: 0.02em; /* Butoane, label-uri */ --ls-wider: 0.05em; /* Text uppercase mic */ --ls-widest: 0.1em; /* Text decorativ uppercase */ /* ========================================================== 3. SPAȚIERE (Spacing Scale) Bazat pe multipli de 4px ========================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-18: 72px; --space-20: 80px; --space-22: 88px; --space-24: 96px; /* Alias-uri semantice pentru spacing */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px; --sp-4xl: 80px; /* ========================================================== 4. LAYOUT ========================================================== */ /* ── Container ── */ --container-max: 1330px; --container-padding: 20px; /* Mobile — crește la 40px pe desktop */ --container-narrow: 800px; /* Pagini de text (blog, legal) */ --container-wide: 1440px; /* Secțiuni full-bleed */ /* ── Header ── */ --header-height: 80px; /* ── Secțiuni ── */ --section-gap: 48px; /* Mobile — crește la 80px pe desktop */ --section-padding: 48px; /* Padding vertical secțiuni mobile */ /* ── Grid ── */ --grid-gap: 24px; /* Gap implicit grid */ --grid-gap-sm: 16px; /* Gap compact */ --grid-gap-lg: 32px; /* Gap generos */ /* ========================================================== 5. BORDER RADIUS ========================================================== */ --radius-xs: 2px; --radius-sm: 4px; /* Butoane, input-uri, chips */ --radius-md: 8px; /* Carduri mici */ --radius-lg: 12px; /* Carduri mari */ --radius-xl: 16px; /* Containere, modals */ --radius-2xl: 24px; /* Elemente hero */ --radius-full: 999px; /* Cercuri, pill badges */ /* ========================================================== 6. UMBRE (Box Shadows) Progresie de la subtil la dramatic ========================================================== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04); --shadow-mega: 0 32px 64px rgba(0, 0, 0, 0.12); /* Umbre cu accent de culoare (pentru elemente interactive) */ --shadow-primary: 0 4px 14px rgba(1, 14, 208, 0.25); --shadow-primary-lg: 0 8px 24px rgba(1, 14, 208, 0.30); /* Umbra pentru carduri la hover */ --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12); /* Umbra ridicată (pentru modals, dropdowns) */ --shadow-elevated: 0 24px 48px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.08); /* ========================================================== 7. TRANZIȚII ȘI ANIMAȚII ========================================================== */ /* ── Curbe de easing ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerare naturală */ --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* Simetric, lin */ --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Accelerare */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Efect elastic */ --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* Efect de resort */ /* ── Durate ── */ --duration-instant: 100ms; --duration-fast: 150ms; /* Hover, focus */ --duration-normal: 250ms; /* Tranziții standard */ --duration-slow: 400ms; /* Slide-uri, expansiuni */ --duration-slower: 600ms; /* Animații complexe */ /* ========================================================== 8. Z-INDEX SYSTEM Scală predictibilă, evită conflictele ========================================================== */ --z-base: 1; --z-dropdown: 50; --z-header: 100; --z-mega-menu: 200; --z-drawer: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; --z-max: 9999; /* ========================================================== 9. BREAKPOINTS (ca referință — nu pot fi variabile CSS) xs: 0px sm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1440px ========================================================== */ /* ========================================================== 10. COMPONENTE — Tokeni specifici ========================================================== */ /* ── Butoane ── */ --btn-height: 48px; --btn-height-sm: 36px; --btn-height-lg: 56px; --btn-padding-x: 24px; --btn-padding-x-sm: 16px; --btn-padding-x-lg: 32px; --btn-radius: var(--radius-sm); --btn-font-size: var(--fs-sm); --btn-font-weight: var(--fw-semibold); /* ── Input-uri ── */ --input-height: 48px; --input-height-sm: 36px; --input-height-lg: 56px; --input-padding-x: 16px; --input-radius: var(--radius-sm); /* ── Carduri ── */ --card-radius: var(--radius-md); --card-padding: var(--space-6); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-card-hover); --card-border: 1px solid var(--nws-border); /* ── Navigație ── */ --nav-link-padding: 12px 16px; --nav-link-font-size: var(--fs-sm); --nav-link-weight: var(--fw-medium); /* ── Focus ring (accesibilitate) ── */ --focus-ring-color: var(--nws-primary); --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); } /* ============================================================== RESPONSIVE OVERRIDES — Tablet (≥768px) ============================================================== */ @media (min-width: 768px) { :root { /* Fonturi puțin mai mari pe tablet */ --fs-base: 16px; --fs-hero: 48px; --fs-5xl: 52px; /* Container padding mai generos */ --container-padding: 32px; /* Secțiuni cu spațiere mai mare */ --section-gap: 64px; --section-padding: 64px; } } /* ============================================================== RESPONSIVE OVERRIDES — Desktop (≥1024px) ============================================================== */ @media (min-width: 1024px) { :root { /* Fonturi la dimensiunea finală */ --fs-hero: 56px; --fs-5xl: 56px; --fs-4xl: 48px; --fs-3xl: 42px; /* Container padding desktop */ --container-padding: 40px; /* Secțiuni cu spațiere generoasă */ --section-gap: 80px; --section-padding: 80px; /* Grid gap mai mare pe desktop */ --grid-gap: 32px; } } /* ============================================================== RESPONSIVE OVERRIDES — Desktop larg (≥1440px) ============================================================== */ @media (min-width: 1440px) { :root { --fs-hero: 64px; --container-padding: 48px; } } /* ============================================================== DARK MODE — Activat via data-theme="dark" pe Paletă profesională de noapte, confortabilă pentru citit ============================================================== */ [data-theme="dark"] { /* ── Suprafețe dark ── */ --nws-bg: #0f1419; --nws-surface: #1a1f26; --nws-surface-2: #242a33; --nws-surface-3: #2c333d; --nws-surface-hover: #2f3742; /* ── Borduri dark ── */ --nws-border: #2f3742; --nws-border-light: rgba(255, 255, 255, 0.12); --nws-border-lighter: rgba(255, 255, 255, 0.06); /* ── Text dark ── */ --nws-text: #e7e9ea; --nws-text-soft: #8b98a5; --nws-text-muted: #6e7a86; --nws-text-faint: #536471; --nws-text-inverse: #0f1419; /* ── Culori primare ajustate pentru dark ── */ --nws-primary: #4d6fff; --nws-primary-light: #6b85ff; --nws-primary-dark: #3a5ce6; --nws-primary-rgb: 77, 111, 255; --nws-accent: #4d6fff; /* ── Stări semantice ajustate ── */ --nws-success: #34d399; --nws-success-light: rgba(52, 211, 153, 0.15); --nws-success-dark: #10b981; --nws-warning: #fbbf24; --nws-warning-light: rgba(251, 191, 36, 0.15); --nws-warning-dark: #f59e0b; --nws-error: #f87171; --nws-error-light: rgba(248, 113, 113, 0.15); --nws-error-dark: #ef4444; --nws-info: #60a5fa; --nws-info-light: rgba(96, 165, 250, 0.15); /* ── Formulare dark ── */ --nws-input-bg: #1a1f26; --nws-input-border: rgba(255, 255, 255, 0.15); --nws-input-placeholder: #536471; /* ── Neutrale dark ── */ --nws-dark: #e7e9ea; --nws-white: #0f1419; --nws-black: #ffffff; /* ── Gradienturi dark ── */ --nws-gradient-primary: linear-gradient(135deg, #1a2744 0%, #1e3a6e 50%, #4d6fff 100%); --nws-gradient-dark: linear-gradient(135deg, #0a0e1a 0%, #1a2744 100%); --nws-gradient-hero: linear-gradient(160deg, #0f1419 0%, #1a2744 40%, #0a0e1a 100%); --nws-gradient-cta: linear-gradient(135deg, #1a2744 0%, #2a3f6e 100%); --nws-gradient-surface: linear-gradient(180deg, #1a1f26 0%, #0f1419 100%); /* ── Overlay-uri dark ── */ --nws-overlay-light: rgba(0, 0, 0, 0.75); --nws-overlay-dark: rgba(0, 0, 0, 0.8); --nws-overlay-blue: rgba(26, 39, 68, 0.9); /* ── Umbre dark — mai pronunțate ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.45); --shadow-mega: 0 32px 64px rgba(0, 0, 0, 0.5); --shadow-primary: 0 4px 14px rgba(77, 111, 255, 0.20); --shadow-primary-lg: 0 8px 24px rgba(77, 111, 255, 0.25); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-elevated: 0 24px 48px rgba(0, 0, 0, 0.5); /* ── Focus ring dark ── */ --focus-ring-color: #4d6fff; /* Scheme nativă */ color-scheme: dark; } /* ── Dark mode: aplică culorile pe body ── */ [data-theme="dark"] body { background-color: var(--nws-bg); color: var(--nws-text); } /* ── Dark mode: link-uri generice ── */ [data-theme="dark"] a:not([class]) { color: var(--nws-primary); } [data-theme="dark"] a:not([class]):hover { color: var(--nws-primary-light); } /* ── Dark mode: formulare ── */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--nws-input-bg); border-color: var(--nws-input-border); color: var(--nws-text); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--nws-primary); } /* ── Dark mode: mark/highlight ── */ [data-theme="dark"] mark { background: rgba(77, 111, 255, 0.25); color: var(--nws-text); } /* ── Dark mode: logo ── */ [data-theme="dark"] .header-logo__img, [data-theme="dark"] .footer-logo__img { content: url("../images/logo-nws-white.webp"); } /* ============================================================== SMOOTH THEME TRANSITION Tranziție lină la schimbarea temei (dark ↔ light) ============================================================== */ html[data-theme="dark"] *, html[data-theme="dark"] *::before, html[data-theme="dark"] *::after { transition-property: background-color, border-color, color, box-shadow, fill, stroke; transition-duration: 0.2s; transition-timing-function: ease; } /* Exclude animațiile deja existente de la tema transition */ html[data-theme="dark"] *[style*="animation"], html[data-theme="dark"] .no-theme-transition { transition: none; }