/* ========================================================================== isoprofi24 . design tokens v2 ========================================================================== DIRECTIA: "Kalk und Kontrast" Tipografie ---------- Archivo, variabila pe doua axe (latime 62-125, greutate 400-700). Titlurile merg pe latime marita (112 pana la 118), ceea ce da masa si caracter industrial, folosit de brandurile de arhitectura. Textul sta pe latime normala. Cifrele tehnice raman IBM Plex Mono. Contrastul dintre un grotesc lat si un mono ingust e semnatura vizuala a intregului site si se citeste ca "fisa tehnica frumoasa", nu ca template. Interzis: Inter, Poppins, Montserrat, Roboto. Alea se citesc ca AI. Culoare, si de ce exact asta ---------------------------- 1. BAZA: neutre CALDE (kalk). Beige si crem desaturate creeaza siguranta psihologica si scad anxietatea, motiv pentru care se folosesc in cabinetele de terapie. Clientul nostru vine speriat, cu pata neagra pe perete si copii in casa. Il asezam intai. 2. REZULTAT: verde salvie stins (moos). Verdele si albastrul deschis scad ritmul cardiac aproape imediat. Il folosim strict ca verdict, deci "e rezolvat", niciodata ca decor. 3. PROBLEMA: albastru rece saturat (feucht). Aici e decizia contraintuitiva: **refuzam albastrul corporate de incredere.** In categoria asta albastrul rece ESTE dusmanul, e culoarea peretelui inghetat si a condensului. Un site de anti-mucegai pe albastru corporate isi contrazice singur povestea. Increderea o construim din materialitate si din precizie numerica, nu dintr-un cliseu de agentie. 4. ACTIUNE: teracota (terra). Caramida arsa, pamant, mana omului. Maro si tonurile de pamant transmit mestesug, statornicie si materiale naturale, exact ce trebuie sa creada cineva care da 400 de euro pe material de constructii. 5. NEGRU-MUCEGAI (schimmel): niciodata pe interfata functionala, doar in fotografie si in diagrame. Il aratam, nu il purtam. Regula de conversie, ascutita (18 aug 2026) ------------------------------------------- Nu nuanta butonului vinde, ci cat de SINGUR e pe ecran. NN-g: ierarhia o face contrastul dintre element si context, nu culoarea in sine, si accentul se rezerva pentru actiunea principala a paginii (60-30-10). Efectul de izolare (von Restorff): dintre stimuli uniformi, cel diferit e cel tinut minte. Consecinte concrete in site: - butonul din antet e fantoma, nu terra: navigatia nu concureaza cu actiunea paginii. Pe fiecare ecran terra are UN singur proprietar: start = "Bedarf berechnen", produs = "In den Warenkorb", calculator = "Alles in den Warenkorb". - terra ca text mic sta pe treapta 600 (5,5:1 pe kalk); 500 e pentru suprafete de buton (4,6:1 cu alb, AA), nu pentru litere marunte. - verdele ramane verdict rar: o caseta verde repetata pe fiecare card inceteaza sa mai fie verdict si devine tapet. Surse: nngroup.com/articles/color-enhance-design, nngroup.com/articles/visual-hierarchy-ux-definition, von Restorff effect (izolarea creste memorarea si atentia). CSS pur, zero dependente. Se incarca inaintea oricarui alt CSS. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. PRIMITIVE DE CULOARE Nu se folosesc direct in componente. Componentele folosesc doar rolurile de la punctul 2. ------------------------------------------------------------------ */ /* Kalk: albul de calciu silicat. Cald, mat, niciodata alb pur ca fundal. */ --kalk-0: #FFFFFF; --kalk-50: #FAF8F4; --kalk-100: #F3F1EA; --kalk-200: #EAE7DD; --kalk-300: #E0DCCF; --kalk-400: #C9C5B6; /* Graphit: cerneala calda, nu negru rece. */ --graphit-300: #97937F; --graphit-400: #706D62; --graphit-500: #4F4D45; --graphit-600: #3A3833; --graphit-700: #2A2924; --graphit-800: #1D1C18; --graphit-900: #15140F; /* Feucht: albastrul-gri al peretelui rece. Culoarea PROBLEMEI. */ --feucht-100: #E7EEF1; --feucht-300: #9FB4BE; --feucht-500: #5C7684; --feucht-700: #3A4E59; --feucht-800: #2B4257; --feucht-900: #22313A; /* Schimmel: negru-verzui. DOAR ilustrativ. */ --schimmel: #23271F; /* Terra: caramida arsa. Actiune, cumparare, mana omului. */ --terra-100: #F9E9E2; --terra-300: #E8946F; --terra-400: #D96C42; --terra-500: #C4502B; --terra-600: #A83E1F; --terra-700: #8C3218; /* Moos: verde stins. "Peretele e uscat", stoc, confirmare. */ --moos-100: #E4F0E7; --moos-300: #7FBF8E; --moos-500: #3E7A4E; --moos-600: #2F6540; /* Sistem */ --amber-600: #925B06; --amber-100: #FBF3E0; --rot-600: #B3261E; --rot-100: #FBEAE8; /* ------------------------------------------------------------------ 2. ROLURI DE CULOARE . TEMA DESCHISA (implicita) ------------------------------------------------------------------ */ --bg: #FBF8F3; /* alb cald, nu alb clinic */ --surface: var(--kalk-0); --surface-2: #F4EEE4; --surface-3: var(--kalk-200); --border: var(--kalk-200); --border-strong: var(--kalk-400); --ink: var(--graphit-800); --ink-2: var(--graphit-500); --ink-3: var(--graphit-400); --ink-invers: var(--kalk-50); --accent: #E2650F; /* portocaliu de santier, actiunile de cumparare */ --accent-hover: #C9560A; --accent-activ: #B44C08; --accent-tint: #FFF0E2; --on-accent: #FFFFFF; --problema: var(--feucht-700); --problema-tint: var(--feucht-100); --problema-tare: var(--feucht-900); --succes: var(--moos-600); --succes-tint: var(--moos-100); --avert: var(--amber-600); --avert-tint: var(--amber-100); --eroare: var(--rot-600); --eroare-tint: var(--rot-100); --link: #C9560A; --ring: var(--terra-500); /* Diagrama de perete si scena 3D */ --diag-zid: #AE9583; --diag-umed: var(--feucht-500); --diag-condens: var(--feucht-300); --diag-placa: var(--kalk-100); --diag-uscat: var(--moos-500); --diag-schimmel: var(--schimmel); /* Tema inchisa, folosita in hero si in benzile de contrast */ --noapte: #0B1013; --noapte-2: #10161A; --noapte-text: #F2F0E8; --noapte-text-2: #B9C6CE; --noapte-text-3: #7E8F9A; --noapte-linie: rgba(255, 255, 255, 0.10); /* ------------------------------------------------------------------ 3. TIPOGRAFIE ------------------------------------------------------------------ */ --font-sans: "Archivo", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Axa de latime. Titlurile respira lat, textul sta normal. */ --wd-normal: 100; --wd-larg: 112; --wd-foarte: 118; /* Scala fluida, calibrata intre 390 si 1440 px. */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: clamp(1.25rem, 1.16rem + 0.40vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.33rem + 0.70vw, 1.95rem); --text-3xl: clamp(1.85rem, 1.58rem + 1.10vw, 2.55rem); --text-4xl: clamp(2.3rem, 1.88rem + 1.70vw, 3.4rem); --text-display: clamp(2.6rem, 1.9rem + 2.9vw, 4.4rem); --text-mega: clamp(3.4rem, 2.1rem + 5.4vw, 7rem); --lh-mega: 0.92; --lh-display: 1.02; --lh-titlu: 1.14; --lh-compact: 1.35; --lh-text: 1.6; --ls-mega: -0.035em; --ls-display: -0.028em; --ls-titlu: -0.016em; --ls-normal: 0; --ls-caps: 0.08em; /* ------------------------------------------------------------------ 4. SPATIERE . baza 4 px, nimic in afara scalei ------------------------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* Spatiul dintre sectiuni merge pe trepte, nu fluid. Un clamp cu vw da valori ca 115px, care nu cad pe scala si strica ritmul vertical. Treptele sunt previzibile si se aliniaza intre sectiuni diferite. */ --sp-sectiune: var(--sp-16); --gutter: var(--sp-4); --tap-min: 44px; /* Ritm vertical. Totul se aseaza pe multipli de 8, ca liniile de text din coloane diferite sa cada la aceeasi inaltime. */ --ritm: 8px; /* ------------------------------------------------------------------ 5. CONTAINERE ------------------------------------------------------------------ */ --container: 1200px; --container-lat: 1440px; --container-text: 680px; /* ------------------------------------------------------------------ 6. RAZE . brand ascutit, mineral ------------------------------------------------------------------ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-plin: 999px; /* ------------------------------------------------------------------ 7. UMBRE . joase, calde, discrete ------------------------------------------------------------------ */ --umbra-culoare: 29, 28, 24; --umbra-sm: 0 1px 2px rgba(var(--umbra-culoare), 0.06); --umbra-md: 0 2px 8px rgba(var(--umbra-culoare), 0.08), 0 1px 2px rgba(var(--umbra-culoare), 0.05); --umbra-lg: 0 8px 24px rgba(var(--umbra-culoare), 0.12), 0 2px 6px rgba(var(--umbra-culoare), 0.06); --umbra-modal: 0 16px 48px rgba(var(--umbra-culoare), 0.18); /* ------------------------------------------------------------------ 8. MISCARE . scurta, precisa, fara elasticitati ------------------------------------------------------------------ */ --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 560ms; --dur-5: 900ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-intrare: cubic-bezier(0.16, 1, 0.3, 1); --ease-iesire: cubic-bezier(0.7, 0, 0.84, 0); /* ------------------------------------------------------------------ 9. STRATURI ------------------------------------------------------------------ */ --z-baza: 0; --z-ridicat: 10; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; /* ------------------------------------------------------------------ 10. FOCUS ------------------------------------------------------------------ */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); /* ---- Adaosuri pentru varianta de magazin (31 aug 2026) ---- */ /* ------------------------------------------------------------------ PRIMITIVE NOI: Sand. Mortar uscat, nisip de santier. De ce: raspunsul la "prea sumbru" nu e portocaliu neon, e mai multa caldura in fundaluri. Kalk-ul existent e alb-crem aproape neutru; sand e treapta urmatoare de caldura, culoarea sacului de mortar si a nisipului uscat. Tine sectiunile comerciale calde si "de constructii" fara nicio textura si fara sa coboare spre discount. ------------------------------------------------------------------ */ --sand-100: #F4ECDF; /* fundal cald de sectiune, abia perceptibil mai galben decat kalk-100; pe el kalk-0 (cardurile) iese curat in fata */ --sand-200: #EBDFCC; /* borduri si delimitari pe fundalul sand */ /* ------------------------------------------------------------------ ROLURI NOI ------------------------------------------------------------------ */ /* Fundalul sectiunilor care VAND (grila de bestselleruri, pachete). Sectiunile care explica raman pe --bg / --surface-2. Asa caldura codifica discret "aici se cumpara". */ --bg-cald: var(--sand-100); --border-cald: var(--sand-200); /* Punctul verde de stoc. Exista deja --succes, dar stocul apare pe FIECARE card de produs, iar regula spune ca verdele-verdict trebuie sa ramana rar. Stocul primeste rolul lui propriu, cu acelasi verde, ca sa poata fi ajustat separat daca verdictul incepe sa se dilueze. */ --stoc: var(--moos-500); /* Badge-ul cosului: cate bucati are omul in cos. Terra, pentru ca e singurul loc din header cu voie la accent: cosul E actiunea. */ --cos-badge-bg: var(--terra-500); --cos-badge-text: #FFFFFF; /* Pretul barat de referinta (pretul concurentei / UVP), daca se decide comercial sa-l aratam. Gri, niciodata rosu: nu suntem outlet. */ --pret-vechi: var(--ink-3); /* ---- Culoarea, pe roluri, ca sa nu iasa un site fad ---------------- Cererea clientului: "mai deschis, mai colorat". Culoarea nu se pune ca decor, ci pe lucrurile care au inteles: portocaliu = actiunea de cumparare, si numai ea verde = verdictul bun si stocul albastru = problema, umezeala, punctul de roua chihlimbar = atentie, pragul de mucegai Asa pagina are patru culori vii fara sa arate ca un afis de discount. ------------------------------------------------------------------- */ --pret-culoare: #B44C08; /* cifra pretului, citibila si pe alb */ --eyebrow-culoare: #E2650F; /* supratitlurile de sectiune */ --stoc: var(--moos-600); --cos-badge-bg: #E2650F; --cos-badge-text: #2A1403; /* Text inchis pe portocaliu, ca pe semnele de santier. Cu alb, contrastul pe portocaliul viu iese 3,44 si cade sub prag; cu inchis iese 5,09 si trece. Asa pastram culoarea vie in loc s-o inchidem ca sa se poata citi. */ --on-accent: #2A1403; color-scheme: light; } @media (min-width: 700px) { :root { --sp-sectiune: var(--sp-24); --gutter: var(--sp-6); } } @media (min-width: 1100px) { :root { --sp-sectiune: var(--sp-32); --gutter: var(--sp-8); } } /* ========================================================================== TEMA INCHISA ========================================================================== */ [data-theme="dark"] { --bg: var(--graphit-900); --surface: #1D1C16; --surface-2: #26241C; --surface-3: #302D23; --border: #3A372C; --border-strong: #55513F; --ink: #F2F0E8; --ink-2: #C6C2B4; --ink-3: var(--graphit-300); --ink-invers: var(--graphit-800); --accent: #F9803A; --accent-hover: #FF9455; --accent-activ: #E06A24; --accent-tint: rgba(249, 128, 58, 0.16); --on-accent: #1D1206; --problema: var(--feucht-300); --problema-tint: rgba(92, 118, 132, 0.18); --problema-tare: var(--feucht-100); --succes: var(--moos-300); --succes-tint: rgba(62, 122, 78, 0.18); --avert: #E0A84E; --avert-tint: rgba(224, 168, 78, 0.14); --eroare: #E5776D; --eroare-tint: rgba(229, 119, 109, 0.14); --link: #FFA36B; --ring: #FFA36B; --diag-placa: var(--kalk-100); --diag-zid: #6E655A; --umbra-culoare: 0, 0, 0; --umbra-sm: 0 1px 2px rgba(var(--umbra-culoare), 0.4); --umbra-md: 0 2px 8px rgba(var(--umbra-culoare), 0.45), 0 1px 2px rgba(var(--umbra-culoare), 0.3); --umbra-lg: 0 8px 24px rgba(var(--umbra-culoare), 0.5), 0 2px 6px rgba(var(--umbra-culoare), 0.35); --umbra-modal: 0 16px 48px rgba(var(--umbra-culoare), 0.6); color-scheme: dark; /* ---- Adaosuri pentru varianta de magazin ---- */ --bg-cald: var(--graphit-800); --border-cald: #3A372C; /* = --border din tema inchisa */ --stoc: var(--moos-300); --cos-badge-bg: var(--terra-400); --cos-badge-text: #1D1206; /* Portocaliul in doze mici, pe lucrurile care trebuie sa sara in ochi: cifra pretului, eticheta de stoc, numarul din cos. Restul paginii ramane linistit, altfel accentul nu mai accentueaza nimic. */ --pret-culoare: #FFB07A; --eyebrow-culoare: #F9803A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { /* Implicit ramanem pe tema deschisa: magazinul vinde "uscat si curat". */ color-scheme: light; } } /* ========================================================================== BAZA . doar ce decurge direct din tokeni ========================================================================== */ html { font-family: var(--font-sans); font-size: 100%; line-height: var(--lh-text); color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Cifrele sunt produsul: preturi, mm, m2. Tabulare peste tot unde se aliniaza. */ .cifre, table td.numeric, [data-pret] { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; } /* Date tehnice: grosimi, temperaturi, valori din fisa tehnica. */ .tehnic { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0; font-variant-numeric: tabular-nums; } /* Etichete mici uppercase: STÄRKE, NETTO, AB LAGER. */ .eticheta { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } ::selection { background: var(--accent-tint); color: var(--ink); } /* ---- Titluri: latime marita, greutate mare, tracking negativ ---------- */ h1, .h1 { font-size: var(--text-display); font-variation-settings: "wdth" var(--wd-larg); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); text-wrap: balance; } h2, .h2 { font-size: var(--text-3xl); font-variation-settings: "wdth" var(--wd-larg); line-height: var(--lh-titlu); letter-spacing: var(--ls-titlu); font-weight: var(--fw-semibold); text-wrap: balance; } h3, .h3 { font-size: var(--text-xl); font-variation-settings: "wdth" 106; line-height: var(--lh-titlu); letter-spacing: var(--ls-titlu); font-weight: var(--fw-semibold); text-wrap: balance; } /* Titlul cel mai mare din site, folosit o singura data pe pagina. */ .mega { font-size: var(--text-mega); font-variation-settings: "wdth" var(--wd-foarte); font-weight: var(--fw-bold); line-height: var(--lh-mega); letter-spacing: var(--ls-mega); text-wrap: balance; } /* ---- Miscarea dispare pentru cine o cere ------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }