/* --------------------------------------------------------------------------- Firmowa paleta pomarańczowa. Plik dokłada się PO styles/site.css i nadpisuje wyłącznie wartości kolorów. Struktura, odstępy, rozmiary, cienie, animacje i efekty zostają nietknięte. Wariant obowiązujący na stronach ustawia generator w atrybucie data-palette na (obecnie "a" — jasny). Biały tekst na #FF8200 daje 2,5:1 i nie występuje nigdzie. --------------------------------------------------------------------------- */ :root[data-palette] { --brand: #FF8200; --brand-hover: #E87400; --brand-text: #B34F00; --brand-soft: #FFE3C7; --ink: #1C1712; --ink-muted: #4A4238; --ink-subtle: #6B6157; --paper: #FFFFFF; --cream: #FFF6EC; --sand: #F0E2D0; --on-ink: #D9CFC4; --brand-on-ink: #FF9A33; } /* --- wariant A: jasny ---------------------------------------------------- */ :root[data-palette="a"] { --page-bg: var(--paper); --page-fg: var(--ink); --alt-bg: var(--cream); --card-bg: var(--paper); --card-alt-bg: var(--cream); --card-border: var(--sand); --muted: var(--ink-muted); --subtle: var(--ink-subtle); --accent-fg: var(--brand-text); /* tekst i odsyłacze */ --accent-bg: var(--brand); /* tła, obramowania, grafika */ --hairline: rgba(28, 23, 18, .12); --tint: rgba(255, 130, 0, .08); --overlay: rgba(28, 23, 18, .72); --field-bg: var(--paper); --field-border: var(--sand); --hero-bg: var(--brand); --hero-fg: var(--ink); --vanta-color: #1C1712; --vanta-bg: #FF8200; --vanta-line-alpha: .15; --vanta-dot-alpha: .35; } /* --- wariant B: ciepły ciemny -------------------------------------------- */ :root[data-palette="b"] { --page-bg: var(--ink); --page-fg: var(--on-ink); --alt-bg: #221C16; --card-bg: #26201A; --card-alt-bg: #26201A; --card-border: #3A3129; --muted: #B3A697; --subtle: #A79987; --accent-fg: var(--brand-on-ink); --accent-bg: var(--brand); --hairline: #3A3129; --tint: rgba(255, 130, 0, .12); --overlay: rgba(10, 8, 6, .8); --field-bg: #2E271F; --field-border: #3A3129; --hero-bg: var(--ink); --hero-fg: var(--on-ink); --vanta-color: #FF8200; --vanta-bg: #1C1712; } /* --- podstawa ------------------------------------------------------------ */ :root[data-palette] body { background-color: var(--page-bg); color: var(--page-fg); } /* sekcje o własnym tle */ :root[data-palette] .bg-\[\#080808\], :root[data-palette] .bg-\[\#050505\] { background-color: var(--alt-bg); } :root[data-palette] .bg-\[\#0a0a0a\] { background-color: var(--card-bg); } :root[data-palette] .bg-gray-950 { background-color: var(--page-bg); } /* --- typografia ---------------------------------------------------------- */ :root[data-palette] .text-white, :root[data-palette] .text-gray-300 { color: var(--page-fg); } :root[data-palette] .text-gray-400, :root[data-palette] .text-white\/70 { color: var(--muted); } :root[data-palette] .text-gray-500, :root[data-palette] .text-gray-600 { color: var(--subtle); } :root[data-palette] .text-white\/20 { color: var(--hairline); } /* Podpisy pod ikonami to tekst, więc obowiązuje je 4,5:1, nie 3:1 dla grafiki. --ink-muted daje na kremowym 9,23:1. Krycie ikon (60%) zostaje bez zmian — ikona to grafika i 3,18:1 jej wystarcza. */ :root[data-palette="a"] .text-white\/20 { color: var(--ink-muted); opacity: 1; } :root[data-palette="a"] .group:hover .group-hover\:text-white { color: var(--brand-text); } :root[data-palette="b"] .text-white\/20 { color: rgba(217, 207, 196, .22); } :root[data-palette] .hover\:text-white:hover, :root[data-palette] .group:hover .group-hover\:text-white { color: var(--page-fg); } /* akcenty tekstowe: na jasnym tle tylko --brand-text (5,2:1) */ :root[data-palette] .text-blue-400, :root[data-palette] .text-blue-500, :root[data-palette] .text-violet-300, :root[data-palette] .text-violet-400, :root[data-palette] .text-violet-500, :root[data-palette] .text-sky-400, :root[data-palette] .text-emerald-400, :root[data-palette] .text-emerald-500, :root[data-palette] .text-purple-500 { color: var(--accent-fg); } :root[data-palette] .hover\:text-blue-400:hover, :root[data-palette] .hover\:text-violet-200:hover { color: var(--brand-hover); } /* Gradienty tekstowe — końce dobrane pod tło, kąt i kierunek bez zmian. */ :root[data-palette] .text-gradient { background-image: linear-gradient(90deg, var(--brand-on-ink), var(--brand)); } /* na jasnym tle sam --brand daje 2,3:1 nawet dla dużego tekstu, więc gradient nagłówków schodzi na ciemniejsze odcienie tej samej rodziny */ :root[data-palette="a"] .text-gradient { background-image: linear-gradient(90deg, #B34F00, #7A3500); } /* --- karty i obramowania -------------------------------------------------- */ :root[data-palette] .glass { background: var(--card-bg); border-color: var(--card-border); } /* karta na sekcji kremowej odwraca się na biel i odwrotnie */ :root[data-palette="a"] .bg-\[\#080808\] .glass, :root[data-palette="a"] .bg-\[\#050505\] .glass { background: var(--paper); } :root[data-palette] .border-white\/5, :root[data-palette] .border-white\/10, :root[data-palette] .border-white\/15 { border-color: var(--hairline); } :root[data-palette] .bg-white\/5, :root[data-palette] .bg-white\/10, :root[data-palette] .bg-white\/\[0\.03\], :root[data-palette] .bg-white\/\[0\.04\] { background-color: var(--tint); } :root[data-palette] .hover\:bg-white\/5:hover, :root[data-palette] .hover\:bg-white\/10:hover, :root[data-palette] .hover\:bg-white\/\[0\.05\]:hover { background-color: var(--tint); } /* kolorowe tła i obramowania ikon/plakietek */ :root[data-palette] .bg-blue-500\/10, :root[data-palette] .bg-violet-500\/10, :root[data-palette] .bg-emerald-500\/10, :root[data-palette] .bg-purple-500\/10 { background-color: var(--tint); } :root[data-palette] .bg-violet-500\/20 { background-color: var(--brand-soft); } /* tekst plakietki na --brand-soft: --brand-text daje tylko 4,23:1 przy 10px */ :root[data-palette="a"] .bg-violet-500\/20.text-violet-300 { color: var(--ink); } :root[data-palette="b"] .bg-violet-500\/20 { background-color: rgba(255, 130, 0, .2); } :root[data-palette] .bg-violet-500\/40 { background-color: var(--accent-bg); } :root[data-palette] .border-blue-500\/20, :root[data-palette] .border-violet-500\/10, :root[data-palette] .border-violet-500\/20, :root[data-palette] .border-violet-500\/30, :root[data-palette] .border-emerald-500\/20, :root[data-palette] .border-purple-500\/20 { border-color: rgba(255, 130, 0, .35); } :root[data-palette] .hover\:border-blue-500:hover, :root[data-palette] .hover\:border-blue-500\/50:hover, :root[data-palette] .hover\:border-violet-500\/40:hover, :root[data-palette] .hover\:border-violet-500\/50:hover, :root[data-palette] .hover\:border-emerald-500\/50:hover, :root[data-palette] .hover\:border-purple-500\/50:hover, :root[data-palette] .hover\:border-sky-500\/50:hover { border-color: var(--accent-bg); } /* przyciemnienia pod modalami — ten sam efekt, cieplejszy odcień */ :root[data-palette] .bg-black\/40, :root[data-palette] .bg-black\/70, :root[data-palette] .bg-black\/80 { background-color: var(--overlay); } /* --- przyciski ------------------------------------------------------------ */ /* wariant 1 (domyślny): tło --brand, tekst --ink — 7,2:1. Drugi koniec gradientu to dotąd --brand-hover #E87400, czyli 23 punkty odchyłki na kanale R od wzorcowego #FF8200 — przycisk wychodził brudny. Gradient zostaje, ale oba końce mieszczą się w ±5 na każdym kanale. */ :root[data-palette] .btn-primary { background: linear-gradient(90deg, #FF8200, #FA7F00); color: var(--ink); box-shadow: 0 0 20px rgba(255, 130, 0, .35); } :root[data-palette] .btn-primary:hover { box-shadow: 0 0 30px rgba(255, 130, 0, .5); } :root[data-palette] .btn-outline { border-color: var(--accent-bg); color: var(--accent-fg); } :root[data-palette] .btn-outline:hover { background: var(--tint); border-color: var(--brand-hover); } /* przycisk z klasą .text-white wewnątrz kafelka produktu ma zostać czytelny */ :root[data-palette] .btn-outline.text-white { color: var(--accent-fg); } /* --- hero i nagłówek ------------------------------------------------------ */ /* w wariancie A hero i pasek nagłówka są pomarańczowe, tekst na nich to --ink */ :root[data-palette] #hero-canvas { background: radial-gradient(ellipse at 50% 35%, var(--hero-bg) 0%, var(--page-bg) 70%); } :root[data-palette="a"] #hero-canvas { background: var(--brand); } :root[data-palette="a"] section:has(> #hero-canvas) .text-white, :root[data-palette="a"] section:has(> #hero-canvas) .text-gray-400, :root[data-palette="a"] section:has(> #hero-canvas) .text-blue-400 { color: var(--ink); } :root[data-palette="a"] section:has(> #hero-canvas) .text-gradient, :root[data-palette="a"] .cta-band .text-gradient { background-image: linear-gradient(90deg, #1C1712, #4A2508); } :root[data-palette="a"] nav.glass { background: var(--brand); border-bottom-color: rgba(28, 23, 18, .18); } :root[data-palette="a"] nav.glass .text-gray-400, :root[data-palette="a"] nav.glass .text-gray-300, :root[data-palette="a"] nav.glass .nav-phone, :root[data-palette="a"] nav.glass .text-violet-400 { color: var(--ink); } /* Biel na #FF8200 to 2,5:1 — w nagłówku nie pojawia się w żadnym stanie. Wyróżnienie pod kursorem i na fokusie robimy podkreśleniem i tłem rgba(28,23,18,.08), tekst zawsze zostaje --ink (7,2:1). */ :root[data-palette="a"] nav.glass a:hover, :root[data-palette="a"] nav.glass a:focus-visible, :root[data-palette="a"] nav.glass .hover\:text-white:hover, :root[data-palette="a"] nav.glass .hover\:text-violet-200:hover, :root[data-palette="a"] nav.glass [data-lang-menu] > summary:hover { color: var(--ink); } :root[data-palette="a"] nav.glass .hidden.xl\:flex a:hover, :root[data-palette="a"] nav.glass .nav-phone:hover { text-decoration: underline; text-underline-offset: 4px; } :root[data-palette="a"] nav.glass a:focus-visible, :root[data-palette="a"] nav.glass button:focus-visible, :root[data-palette="a"] nav.glass summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; } /* przycisk CTA w nagłówku ma własne, ciemne tło — tam biel jest poprawna */ :root[data-palette="a"] nav.glass .btn-primary:hover { color: var(--paper); } :root[data-palette] .nav-phone { color: var(--accent-fg); } :root[data-palette] .nav-phone:hover { color: var(--page-fg); } /* --- pasek "Trusted by" --------------------------------------------------- */ :root[data-palette] .trusted-group li { color: var(--muted); } :root[data-palette] .trusted-group li:hover { color: var(--page-fg); } /* --- podświetlenie kafelków technologii ----------------------------------- */ :root[data-palette] .tech-card { border-color: var(--hairline); } :root[data-palette] .tech-card::before { background: radial-gradient(circle at center, rgba(255, 130, 0, .12) 0%, transparent 70%); } /* Ikony technologii przychodzą z CDN już w kolorze wariantu (PALETTE_ASSETS w build.js), więc filtr inwersji jest zbędny. Efekt zostaje ten sam — wygaszone w spoczynku, pełne pod kursorem — ale samo wygaszenie musi być słabsze: #4A4238 przy 40% daje na kremowym 2,07:1, przy 60% już 3,18:1. */ :root[data-palette="a"] #tech img.opacity-40 { opacity: .6; } /* --- formularze ----------------------------------------------------------- */ :root[data-palette] .form-input { background: var(--field-bg); border-color: var(--field-border); color: var(--page-fg); } :root[data-palette] .form-input:focus { border-color: var(--brand); } :root[data-palette] .form-input::placeholder { color: var(--subtle); } /* tło opcji selecta siedzi w atrybucie style="" — inaczej się nie nadpisze */ :root[data-palette] select.form-input option[style] { background: var(--field-bg) !important; color: var(--page-fg); } /* --- stopka --------------------------------------------------------------- */ :root[data-palette] footer { background: var(--ink); color: var(--on-ink); border-top-color: var(--hairline); } :root[data-palette] footer .text-gray-400, :root[data-palette] footer .text-gray-500, :root[data-palette] footer .text-gray-600, :root[data-palette] footer .text-white { color: var(--on-ink); } :root[data-palette] footer a:hover { color: var(--brand-on-ink); } :root[data-palette] footer .text-gradient { background-image: linear-gradient(90deg, #FF9A33, #FF8200); } :root[data-palette] footer .hover\:text-white:hover { color: var(--brand-on-ink); } /* --- baner cookie i podpowiedź językowa ----------------------------------- */ /* oba rysowane z JS stylami inline, więc tylko !important je ruszy */ :root[data-palette] #cookie-banner, :root[data-palette] #cookie-preferences { background: var(--card-bg) !important; color: var(--page-fg) !important; border-color: var(--card-border) !important; } :root[data-palette] #cookie-banner button, :root[data-palette] #cookie-preferences button { background: var(--tint) !important; color: var(--page-fg) !important; border-color: var(--card-border) !important; } :root[data-palette] #cookie-banner #cookie-accept, :root[data-palette] #cookie-preferences #cookie-modal-save { background: var(--brand) !important; color: var(--ink) !important; border-color: var(--brand) !important; font-weight: 700; } :root[data-palette] #cookie-banner a, :root[data-palette] #cookie-preferences a { color: var(--accent-fg) !important; } :root[data-palette] #cookie-settings { background: var(--card-bg) !important; color: var(--subtle) !important; border-color: var(--card-border) !important; } :root[data-palette] #cookie-preferences input[type="checkbox"] { accent-color: var(--brand); } /* --- lista rozwijana języków ---------------------------------------------- */ :root[data-palette] [data-lang-menu] > ul { background: var(--card-bg); border-color: var(--card-border); } :root[data-palette="a"] nav.glass [data-lang-menu] > summary { color: var(--ink); } /* --- elementy leżące na pomarańczowym tle (wariant A) --------------------- Pomarańczowy przycisk na pomarańczowym hero przestaje być widoczny, a obie dopuszczone kombinacje przycisku (--brand+--ink, --brand-text+biały) też giną na tym tle. Zgodnie z briefem nie ruszam efektu, tylko dobieram inny kolor z palety: tło --ink, tekst --paper (kontrast 14,8:1 wobec --ink). */ :root[data-palette="a"] section:has(> #hero-canvas) .btn-primary, :root[data-palette="a"] nav.glass .btn-primary, :root[data-palette="a"] .cta-band .btn-primary { background: var(--ink); color: var(--paper); box-shadow: 0 0 24px rgba(28, 23, 18, .28); } :root[data-palette="a"] section:has(> #hero-canvas) .btn-outline, :root[data-palette="a"] .cta-band .btn-outline { border-color: var(--ink); color: var(--ink); } :root[data-palette="a"] section:has(> #hero-canvas) .btn-outline:hover, :root[data-palette="a"] .cta-band .btn-outline:hover { background: rgba(28, 23, 18, .08); border-color: var(--ink); } /* pas CTA "Gotowi na projekt?" — w briefie tło --brand, tekst --ink */ :root[data-palette="a"] .cta-band { background-color: var(--brand); } :root[data-palette="a"] .cta-band .text-white, :root[data-palette="a"] .cta-band .text-gray-400, :root[data-palette="a"] .cta-band .text-gray-500 { color: var(--ink); } /* obramowanie kafelka "n8n + MCP" siedzi w atrybucie style="", nie w klasie */ :root[data-palette] [style*="border-color: rgba(139,92,246"] { border-color: rgba(255, 130, 0, .35) !important; } /* --- polityka prywatności -------------------------------------------------- Ta strona ma własne reguły elementowe (.prose-dark p / a / th / td ...) w bloku