/* ============================================================================ DETECTUM — propozycja nowej strony głównej ---------------------------------------------------------------------------- Kierunek wizualny: ciemny, mroczny, z dymem i efektami — wg referencji DETECTIT wskazanej przez klienta. Zachowane: logo, zdjęcia i treści Detectum oraz firmowy żółty #fcc110 jako jedyny akcent koloru. Paleta przeniesiona z referencji + żółty Detectum: #070A12 najciemniejsze tło #101218 tło sekcji #2B2B32 krawędzie / karty #626262 tekst drugorzędny #C2C2C2 tekst #EDEDED / #FFFFFF nagłówki #fcc110 AKCENT (Detectum) Typografia: Oswald (nagłówki) + Lato (tekst) — jak w referencji, a Oswald jest już fontem Detectum, więc marka zostaje spójna. ========================================================================== */ :root { --tlo: #04060C; --tlo-2: #070A12; --tlo-3: #0A0D15; --krawedz: #1B1D26; --tekst-slaby: #9095A8; --tekst: #AFB4C2; --jasny: #E8E8EC; --zolty: #fcc110; --zolty-ciemny: #c99a0b; --naglowki: "Oswald", "Arial Narrow", sans-serif; --tresc: "Lato", -apple-system, "Segoe UI", sans-serif; --maks: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--tlo); color: var(--tekst); font-family: var(--tresc); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } /* atrybut hidden musi wygrywać z display:flex/grid, inaczej elementy chowane przez JS (kategorie zgód, przyciski na stronach prawnych) i tak się pokazują */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } .srodek { width: 100%; max-width: var(--maks); margin-inline: auto; padding-inline: 24px; } /* =========================================================================== ATMOSFERA — gwiazdy, dym, ziarno --------------------------------------------------------------------------- Wszystko generowane w CSS: żadnych dodatkowych plików graficznych, więc nic nie spowalnia ładowania. ======================================================================== */ .atmosfera { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* pole gwiazd */ .atmosfera::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 65% 12%, rgba(255,255,255,.40), transparent), radial-gradient(1px 1px at 82% 44%, rgba(255,255,255,.50), transparent), radial-gradient(1px 1px at 12% 68%, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 44% 82%, rgba(255,255,255,.45), transparent), radial-gradient(1px 1px at 92% 74%, rgba(255,255,255,.30), transparent), radial-gradient(1px 1px at 33% 52%, rgba(255,255,255,.38), transparent), radial-gradient(1px 1px at 74% 92%, rgba(255,255,255,.28), transparent); background-size: 480px 480px; background-repeat: repeat; opacity: .38; animation: gwiazdy 240s linear infinite; } /* Przesuwamy TŁO, nie element — tło powtarza się w nieskończoność, więc nie ma krawędzi, która mogłaby wjechać w kadr. Skok równy dokładnie jednemu kaflowi (480×480), dzięki czemu pętla domyka się bez przeskoku. */ @keyframes gwiazdy { from { background-position: 0 0; } to { background-position: -480px -480px; } } /* --- MGŁA / DYM ------------------------------------------------------------ Prawdziwe kłęby, a nie miękka poświata: teksturę robi filtr feTurbulence (fraktalny szum) zamknięty w SVG jako data-URI — zero dodatkowych plików. feColorMatrix zamienia szum na przezroczystość, więc powstają smugi i prześwity. Każda warstwa ma inną skalę i dryfuje w innym tempie, przez co ruch nigdy się nie powtarza w oczywisty sposób. Animujemy wyłącznie transform (karta graficzna), nigdy filtrów. */ /* UWAGA na przyszłość: te warstwy NIE mogą być animowane transformem. Element ma rozmiar ekranu, więc przy przesunięciu o 1000 px jego brzeg wjeżdża w kadr i widać twardą pionową krawędź. Animujemy background-position — tło powtarza się w nieskończoność, więc krawędzi po prostu nie ma. Miękkość daje sam szum (niska częstotliwość + 5 oktaw), nie filtr blur: blur na kaflowanym tle rozjaśniałby styki i tworzył widoczną kratę. */ .mgla { position: absolute; inset: 0; background-repeat: repeat; mix-blend-mode: screen; } /* duże, wolne kłęby w tle */ .mgla--1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25' filterUnits='objectBoundingBox'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.004' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.66 0 0 0 0 0.74 0 0 0 0 0.92 0.8 0.8 0.8 0 -0.58'/%3E%3C/filter%3E%3Crect width='1200' height='800' filter='url(%23d)'/%3E%3C/svg%3E"); background-size: 1200px 800px; opacity: .11; animation: mgla-1 150s linear infinite; } /* średnia warstwa, płynie w drugą stronę */ .mgla--2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25' filterUnits='objectBoundingBox'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.007' numOctaves='5' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.58 0 0 0 0 0.66 0 0 0 0 0.86 0.85 0.85 0.85 0 -0.66'/%3E%3C/filter%3E%3Crect width='900' height='600' filter='url(%23d)'/%3E%3C/svg%3E"); background-size: 900px 600px; opacity: .085; animation: mgla-2 108s linear infinite; } /* wąskie pasmo dymu w połowie ekranu — jak na referencji */ .mgla--pas { inset: 20% 0 auto; height: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='500'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25' filterUnits='objectBoundingBox'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.011' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.74 0 0 0 0 0.80 0 0 0 0 0.95 0.9 0.9 0.9 0 -0.66'/%3E%3C/filter%3E%3Crect width='1000' height='500' filter='url(%23d)'/%3E%3C/svg%3E"); background-size: 1000px 500px; opacity: .13; -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent); animation: mgla-pas 84s linear infinite; } /* skok = dokładnie jeden kafel, więc pętla jest niewidoczna */ @keyframes mgla-1 { from { background-position: 0 0; } to { background-position: -1200px -800px; } } @keyframes mgla-2 { from { background-position: 0 0; } to { background-position: 900px 600px; } } @keyframes mgla-pas { from { background-position: 0 0; } to { background-position: -1000px 0; } } /* kolorowe poświaty pod mgłą — dają głębię */ .dym { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .30; mix-blend-mode: screen; } .dym--1 { inset-block-start: -12vh; inset-inline-start: -14vw; width: 62vw; height: 62vh; background: radial-gradient(circle, rgba(58,86,140,.42), rgba(58,86,140,0) 68%); animation: dryf-1 46s ease-in-out infinite alternate; } .dym--2 { inset-block-start: 34vh; inset-inline-end: -20vw; width: 70vw; height: 56vh; background: radial-gradient(circle, rgba(38,60,104,.38), rgba(38,60,104,0) 70%); animation: dryf-2 62s ease-in-out infinite alternate; } .dym--3 { inset-block-end: -18vh; inset-inline-start: 22vw; width: 54vw; height: 48vh; background: radial-gradient(circle, rgba(70,78,110,.30), rgba(70,78,110,0) 72%); animation: dryf-3 54s ease-in-out infinite alternate; } @keyframes dryf-1 { to { transform: translate3d(9vw, 7vh, 0) scale(1.18); } } @keyframes dryf-2 { to { transform: translate3d(-11vw, -6vh, 0) scale(1.12); } } @keyframes dryf-3 { to { transform: translate3d(6vw, -9vh, 0) scale(1.22); } } @media (prefers-reduced-motion: reduce) { .atmosfera::before, .dym, .mgla { animation: none; } } /* delikatne ziarno na całości */ body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* wszystko nad atmosferą */ .strona { position: relative; z-index: 2; } /* sekcje maja wlasne tlo, wiec winieta dziala na to, co miedzy nimi i na hero */ /* =========================================================================== NAGŁÓWEK ======================================================================== */ .naglowek { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60; padding-block: 16px; transition: background-color .3s ease, backdrop-filter .3s ease, padding .3s ease; } .naglowek.przyklejony { background: rgba(7, 10, 18, .88); backdrop-filter: blur(12px); border-block-end: 1px solid var(--krawedz); padding-block: 10px; } .naglowek__rzad { display: flex; align-items: center; gap: 22px; } .naglowek__logo img { height: 34px; width: auto; } /* menu jest opakowane w