html { -webkit-font-smoothing: antialiased; } body { background:#05070B; color:#F3F0EA; overflow-x:hidden; } ::selection { background:#C2A05B; color:#05070B; } /* --- scrollbar --- */ ::-webkit-scrollbar { width:10px; } ::-webkit-scrollbar-track { background:#05070B; } ::-webkit-scrollbar-thumb { background:#1E2A38; border-radius:9px; border:3px solid #05070B; } ::-webkit-scrollbar-thumb:hover { background:#9C7F42; } /* --- film grain --- */ .grain::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.03; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --- hairline & glass --- */ .hairline { background:linear-gradient(90deg,transparent,rgba(194,160,91,.42),transparent); height:1px; } /* Bez backdrop-filter: .glass siedzi na kartach, ktore sie przewijaja, a blur na duzej przewijanej powierzchni to ciagly repaint GPU. Na tle #05070B roznicy nie widac. */ .glass { background:rgba(255,255,255,.028); border:1px solid rgba(255,255,255,.07); } /* blur zostaje wylacznie na elementach fixed: nav + menu mobilne */ .glass-strong { background:rgba(8,12,19,.72); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); } /* plakietki na kartach — ten sam efekt wizualnie, bez warstwy blura */ .chip { background:rgba(6,9,14,.84); } /* --- double bezel: rdzen + zewnetrzna obudowa, ostrokatna (bez promienia) --- Obudowa rysowana box-shadow, nie dodatkowym divem — dzieki temu nie przycina jej overflow-hidden na kartach i nie trzeba ruszac struktury DOM. */ /* Jedna cienka ramka o niskim kontrascie — podwojna obudowa zbyt mocno konkurowala ze zdjeciem. */ .bezel { background:#0A0F17; border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:border-color .45s cubic-bezier(.22,1,.36,1); } article.bezel:hover { border-color:rgba(255,255,255,.17); } /* Lucide renderuje sie domyslnie na stroke-width 2 — za grubo dla tej typografii. */ svg.lucide { stroke-width:1.35; } /* --- gold text --- */ .goldtext { background:linear-gradient(100deg,#9C7F42 0%,#EBD6A3 32%,#D9BC7C 55%,#F5E9CC 78%,#C2A05B 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* --- reveal on scroll --- */ .reveal { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); } .reveal.in { opacity:1; transform:none; } /* --- underline link --- */ .ulink { position:relative; } .ulink::after { content:''; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:#C2A05B; transition:width .45s cubic-bezier(.22,1,.36,1); } .ulink:hover::after, .ulink.active::after { width:100%; } .ulink.active { color:#EBD6A3; } /* --- buttons --- */ .btn-gold { position:relative; overflow:hidden; background:linear-gradient(115deg,#C2A05B,#EBD6A3 48%,#B08F4C); color:#05070B; transition:transform .35s cubic-bezier(.22,1,.36,1); } .btn-gold:active { transform:scale(.985); } .btn-gold::before { content:''; position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent); transition:transform .8s cubic-bezier(.22,1,.36,1); } .btn-gold:hover::before { transform:translateX(120%); } /* --- form --- */ .field { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); transition:border-color .3s, box-shadow .3s, background .3s; } .field:focus { outline:none; border-color:rgba(194,160,91,.7); box-shadow:0 0 0 3px rgba(194,160,91,.12); background:rgba(255,255,255,.05); } .field::placeholder { color:#5D6675; } select.field option { background:#0B111A; color:#F3F0EA; } /* --- smart header: chowa sie przy przewijaniu w dol, wraca przy ruchu w gore --- */ /* transition podany jawnie, bo #nav (1,0,0) wygralby z Tailwindowym .transition-all */ #nav { transition:transform .45s cubic-bezier(.22,1,.36,1), background-color .5s cubic-bezier(.22,1,.36,1), border-color .5s cubic-bezier(.22,1,.36,1); will-change:transform; } #nav.nav-hidden { transform:translateY(-100%); } /* --- menu mobilne: pelnoekranowa nakladka --- */ #mobileMenu { position:fixed; inset:0; z-index:70; display:none; flex-direction:column; justify-content:center; padding:max(92px,calc(env(safe-area-inset-top) + 92px)) 28px max(40px,env(safe-area-inset-bottom)); background:#080C13; overflow-y:auto; overscroll-behavior:contain; } #mobileMenu.open { display:flex; animation:menu-in .3s cubic-bezier(.22,1,.36,1); } /* nakladka nie ma racji bytu na desktopie — Tailwindowy lg:hidden (0,1,0) przegrywa z #mobileMenu.open */ @media (min-width:1024px) { #mobileMenu.open { display:none; } } @keyframes menu-in { from { opacity:0 } to { opacity:1 } } @keyframes menu-row { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } } #mobileMenu.open .mob-row { animation:menu-row .5s cubic-bezier(.22,1,.36,1) both; } #mobileMenu.open .mob-row:nth-child(1) { animation-delay:.04s } #mobileMenu.open .mob-row:nth-child(2) { animation-delay:.09s } #mobileMenu.open .mob-row:nth-child(3) { animation-delay:.14s } #mobileMenu.open .mob-row:nth-child(4) { animation-delay:.19s } #mobileMenu.open .mob-row:nth-child(5) { animation-delay:.26s } /* Przy otwartym menu naglowek nie moze byc containing blockiem dla position:fixed — transform, will-change i backdrop-filter uwiezilyby nakladke w wysokosci paska. Nakladka jest dzieckiem