/* ============================================================ BRIL — Brothers Innovation Labs Design system: "Pryzmat" Zasady: brak elevacji cieniem. Głębia budowana światłem (radialne poświaty), hairline'ami w color-mix i ziarnem. ============================================================ */ /* ---------- 1. Tokeny ---------- */ :root{ /* baza — chłodny grafit, nie czerń */ --bg: oklch(11% 0.012 265); --bg-2: oklch(14% 0.016 268); --bg-3: oklch(17% 0.020 270); --ink: oklch(97% 0.006 265); --ink-2: oklch(80% 0.012 265); --ink-3: oklch(62% 0.014 265); --ink-4: oklch(48% 0.014 265); /* widmo */ --s1:#FF5F6D; --s2:#FFA23A; --s3:#FFD84D; --s4:#5CE07E; --s5:#34E0D3; --s6:#4FA8FF; --s7:#8C7BFF; --s8:#C86BFF; --accent: var(--s5); /* hairline'y — zawsze color-mix, nigdy sztywne rgba */ --line-1: color-mix(in oklab, var(--ink) 7%, transparent); --line-2: color-mix(in oklab, var(--ink) 12%, transparent); --line-3: color-mix(in oklab, var(--ink) 20%, transparent); /* typografia */ --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* rytm */ --gut: clamp(1.25rem, 4vw, 2.5rem); --wrap: 76rem; --chapter-y: clamp(7rem, 16vh, 13rem); /* ruch */ --ease: cubic-bezier(.22,1,.36,1); --ease-io: cubic-bezier(.65,.05,.36,1); } /* Motyw jasny: pełna podmiana tokenów. Domyślnie idziemy za systemem, przycisk w rogu nadpisuje wybór przez [data-theme] na . */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ /* baza — papier, nie biel */ --bg: oklch(97.5% 0.004 265); --bg-2: oklch(94% 0.006 265); --bg-3: oklch(90% 0.008 265); --ink: oklch(19% 0.014 265); --ink-2: oklch(36% 0.014 265); --ink-3: oklch(50% 0.014 265); --ink-4: oklch(62% 0.012 265); /* widmo przyciemnione — na papierze żółć i cyjan muszą mieć kontrast */ --s1:#D8324A; --s2:#B45C08; --s3:#8F6B00; --s4:#0E7A42; --s5:#0B7F78; --s6:#1160BE; --s7:#5A3FC4; --s8:#8F32B4; --line-1: color-mix(in oklab, var(--ink) 9%, transparent); --line-2: color-mix(in oklab, var(--ink) 15%, transparent); --line-3: color-mix(in oklab, var(--ink) 26%, transparent); color-scheme:light; } } :root[data-theme="light"]{ /* baza — papier, nie biel */ --bg: oklch(97.5% 0.004 265); --bg-2: oklch(94% 0.006 265); --bg-3: oklch(90% 0.008 265); --ink: oklch(19% 0.014 265); --ink-2: oklch(36% 0.014 265); --ink-3: oklch(50% 0.014 265); --ink-4: oklch(62% 0.012 265); /* widmo przyciemnione — na papierze żółć i cyjan muszą mieć kontrast */ --s1:#D8324A; --s2:#B45C08; --s3:#8F6B00; --s4:#0E7A42; --s5:#0B7F78; --s6:#1160BE; --s7:#5A3FC4; --s8:#8F32B4; --line-1: color-mix(in oklab, var(--ink) 9%, transparent); --line-2: color-mix(in oklab, var(--ink) 15%, transparent); --line-3: color-mix(in oklab, var(--ink) 26%, transparent); color-scheme:light; } :root[data-theme="dark"]{ color-scheme:dark } /* Sekcje z animacją zostają ciemne w obu motywach — addytywne mieszanie światła nie istnieje na białym tle. To scena, nie pomyłka. */ .hero, .finale{ --bg: oklch(11% 0.012 265); --ink: oklch(97% 0.006 265); --ink-2: oklch(80% 0.012 265); --ink-3: oklch(62% 0.014 265); --ink-4: oklch(48% 0.014 265); --s1:#FF5F6D; --s2:#FFA23A; --s3:#FFD84D; --s4:#5CE07E; --s5:#34E0D3; --s6:#4FA8FF; --s7:#8C7BFF; --s8:#C86BFF; --line-1: color-mix(in oklab, var(--ink) 7%, transparent); --line-2: color-mix(in oklab, var(--ink) 12%, transparent); --line-3: color-mix(in oklab, var(--ink) 20%, transparent); background:var(--bg); color:var(--ink); color-scheme:dark; } /* ---------- 2. Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:4rem; } body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:clamp(1rem,.95rem + .25vw,1.125rem); line-height:1.65; font-weight:300; letter-spacing:-.008em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,canvas{ display:block; max-width:100% } a{ color:inherit; text-decoration:none } ol,ul{ list-style:none } ::selection{ background:color-mix(in oklab, var(--s5) 35%, transparent); color:#fff } :focus-visible{ outline:2px solid var(--s5); outline-offset:4px; border-radius:2px } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) } .skip{ position:fixed; top:.75rem; left:.75rem; z-index:100; transform:translateY(-200%); background:var(--bg-3); color:var(--ink); padding:.6rem 1rem; border:1px solid var(--line-2); border-radius:.5rem; font-size:.85rem; } .skip:focus{ transform:none } .dot{ display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.45; vertical-align:middle; margin-inline:.7em; } /* ---------- 2b. Kurtyna startowa ---------- */ .boot{ position:fixed; inset:0; z-index:80; pointer-events:none; background:oklch(11% 0.012 265); animation:boot 1s var(--ease) .15s forwards; } @keyframes boot{ to{ opacity:0; visibility:hidden } } /* ---------- 2c. Narzędzia w rogu: język + motyw ---------- */ /* Jeden kontener, żeby na komórce oba elementy trzymały tę samą linię i razem przełączały się na wariant „nad ciemną sceną”. */ .tools{ position:fixed; z-index:70; top:clamp(.9rem,2vw,1.4rem); right:clamp(.9rem,2vw,1.4rem); display:flex; align-items:center; gap:.5rem; /* iOS: nie wchodzić pod wycięcie / dynamic island */ padding-right:env(safe-area-inset-right, 0px); } .lang{ height:2.5rem; display:flex; align-items:center; gap:.1rem; padding-inline:.25rem; border:1px solid var(--line-2); border-radius:999px; background:color-mix(in oklab, var(--bg) 72%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .4s var(--ease), background .4s var(--ease); } .lang a{ display:grid; place-items:center; height:1.9rem; min-width:2.35rem; padding-inline:.55rem; border-radius:999px; font-size:.64rem; font-weight:500; letter-spacing:.18em; color:var(--ink-4); transition:color .35s var(--ease), background .35s var(--ease); } .lang a[aria-current]{ color:var(--ink); background:color-mix(in oklab, var(--ink) 9%, transparent); } .lang a:not([aria-current]):hover{ color:var(--ink) } /* komórka: tylko drugi język jako kółko (mniej zasłania), a przy scrollu w dół narzędzia zjeżdżają za górną krawędź i wracają przy scrollu w górę */ @media (max-width:760px){ .tools{ transition:transform .45s var(--ease), opacity .45s var(--ease) } .tools.is-hidden{ transform:translateY(-160%); opacity:0; pointer-events:none } .lang{ width:2.5rem; padding:0; justify-content:center; border-radius:50% } .lang a[aria-current]{ display:none } .lang a{ height:2.4rem; min-width:2.4rem; padding:0; color:var(--ink-2) } } .theme{ position:relative; width:2.5rem; height:2.5rem; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:50%; background:color-mix(in oklab, var(--bg) 72%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--ink-3); cursor:pointer; transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .theme:hover{ color:var(--ink); border-color:var(--line-3) } .theme svg{ width:1.05rem; height:1.05rem; grid-area:1/1; transition:opacity .35s var(--ease), transform .5s var(--ease) } .theme .i-sun{ opacity:0; transform:rotate(-70deg) scale(.6) } .theme .i-moon{ opacity:1; transform:none } :root[data-theme="light"] .theme .i-sun{ opacity:1; transform:none } :root[data-theme="light"] .theme .i-moon{ opacity:0; transform:rotate(70deg) scale(.6) } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .theme .i-sun{ opacity:1; transform:none } :root:not([data-theme="dark"]) .theme .i-moon{ opacity:0; transform:rotate(70deg) scale(.6) } } /* nad ciemną sceną (hero/finał) narzędzia muszą być jasne niezależnie od motywu strony */ .tools.on-stage .theme, .tools.on-stage .lang{ border-color:rgba(255,255,255,.16); background:rgba(10,12,16,.45) } .tools.on-stage .theme{ color:oklch(72% .014 265) } .tools.on-stage .theme:hover{ color:#fff } .tools.on-stage .lang a{ color:oklch(60% .014 265) } .tools.on-stage .lang a[aria-current]{ color:#fff; background:rgba(255,255,255,.12) } .tools.on-stage .lang a:not([aria-current]):hover{ color:#fff } /* ---------- 3. Ziarno i atmosfera ---------- */ .grain{ position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:.038; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 6s steps(6) infinite; mix-blend-mode:overlay; } :root[data-theme="light"] .grain{ opacity:.026; mix-blend-mode:multiply } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .grain{ opacity:.026; mix-blend-mode:multiply } } @keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)} } /* pasek postępu — widmo, nie jednolity kolor */ .progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:60; background:var(--line-1); } .progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6),var(--s7),var(--s8)); transform-origin:left; transition:width .12s linear; } /* ---------- 4. Szyna rozdziałów ---------- */ .rail{ position:fixed; left:clamp(.9rem,2.2vw,2rem); top:50%; z-index:50; transform:translateY(-50%); mix-blend-mode:difference; } /* difference na papierze daje brudny fiolet — w jasnym motywie zwykły kolor */ :root[data-theme="light"] .rail{ mix-blend-mode:normal } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .rail{ mix-blend-mode:normal } } .rail ol{ display:flex; flex-direction:column; gap:.9rem } .rail a{ display:flex; align-items:center; gap:.7rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); transition:color .4s var(--ease); } .rail b{ font-weight:500; font-variant-numeric:tabular-nums; width:1.6rem; text-align:right; font-feature-settings:"tnum"; } .rail span{ opacity:0; transform:translateX(-6px); transition:opacity .4s var(--ease), transform .4s var(--ease); } .rail a:hover span{ opacity:1; transform:none } .rail a.is-active{ color:var(--ink) } .rail a::after{ content:""; width:0; height:1px; background:currentColor; transition:width .5s var(--ease); } .rail a.is-active::after{ width:1.4rem } @media (max-width:900px){ .rail{ display:none } } /* ---------- 5. Reveal ---------- */ [data-reveal]{ opacity:0; transform:translate3d(0,18px,0); filter:blur(6px); transition: opacity .9s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s), filter .9s var(--ease) var(--d,0s); will-change:opacity, transform; } [data-reveal].is-in{ opacity:1; transform:none; filter:none } /* wiersze nagłówków wyjeżdżają zza własnej krawędzi */ [data-lines]{ opacity:1 !important; transform:none !important; filter:none !important } .ln{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; } .ln i{ display:block; font-style:inherit; transform:translate3d(0,110%,0); opacity:0; transition: transform 1.15s var(--ease) calc(var(--d,0s) + var(--ld,0s)), opacity .7s var(--ease) calc(var(--d,0s) + var(--ld,0s)); } [data-lines].is-in .ln i{ transform:none; opacity:1 } /* ---------- 6. HERO ---------- */ .hero{ position:relative; min-height:100svh; display:grid; place-items:center; isolation:isolate; overflow:hidden; } .hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; } /* atmosfera: mgła nad wiązkami pod kolumną tekstu + winieta. Zero box-shadow. */ .hero__veil{ position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(58% 34% at 52% 48%, color-mix(in oklab,var(--bg) 82%, transparent) 0 36%, transparent 74%), radial-gradient(125% 85% at 50% 46%, transparent 0 44%, var(--bg) 80%), linear-gradient(180deg, color-mix(in oklab,var(--bg) 72%, transparent) 0 10%, transparent 26% 70%, var(--bg) 100%); } .hero__inner{ position:relative; z-index:1; width:100%; max-width:var(--wrap); margin-inline:auto; padding:clamp(3rem,7vh,5rem) var(--gut) clamp(6rem,12vh,8rem); text-align:center; } /* na wąskich ekranach światło wchodzi od dołu — kolumna tekstu zostaje czysta; górny odstęp robi miejsce na narzędzia w rogu, żeby eyebrow nie wchodził pod nie */ @media (max-width:760px){ .hero__inner{ padding-top:5.4rem } .hero__veil{ background: linear-gradient(180deg, var(--bg) 0 44%, color-mix(in oklab,var(--bg) 62%, transparent) 60%, transparent 84%), radial-gradient(140% 70% at 50% 30%, transparent 0 40%, color-mix(in oklab,var(--bg) 45%, transparent) 100%); } } .eyebrow{ font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-3); font-weight:400; } .wordmark{ display:flex; justify-content:center; margin:clamp(1.2rem,3vw,2rem) 0 clamp(.6rem,1.5vw,1rem); font-family:var(--sans); font-weight:800; font-size:clamp(5rem, min(24vw, 21vh), 13.5rem); line-height:.86; letter-spacing:-.055em; } .wordmark span{ display:block; background:linear-gradient(168deg, color-mix(in oklab, var(--ink) 96%, transparent) 8%, color-mix(in oklab, var(--ink) 62%, transparent) 52%, color-mix(in oklab, var(--ink) 88%, transparent) 96%); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:0; transform:translate3d(0,.34em,0) scale(1.06); filter:blur(14px); animation:letter 1.5s var(--ease) forwards; /* litery wyłaniają się z wybuchu (zderzenie wiązek w canvasie ≈ 1,0 s) */ animation-delay:calc(.95s + var(--i) * .085s); } @keyframes letter{ to{ opacity:1; transform:none; filter:none } } /* refrakcja: dwie widmowe kopie litery rozjeżdżają się za kursorem. Nie cień — rozszczepienie. */ .wordmark span{ position:relative; isolation:isolate } .wordmark span::before, .wordmark span::after{ content:attr(data-l); position:absolute; inset:0; -webkit-background-clip:border-box; background:none; mix-blend-mode:screen; pointer-events:none; transition:transform .5s var(--ease), opacity .5s var(--ease); } .wordmark span::before{ color:#FF3B6B; opacity:.28; transform:translate3d(calc(var(--ax,0px) * -1), calc(var(--ay,0px) * -1), 0); } .wordmark span::after{ color:#34E0D3; opacity:.24; transform:translate3d(var(--ax,0px), var(--ay,0px), 0); } .expand{ font-size:clamp(.66rem,1.5vw,.82rem); letter-spacing:.42em; text-transform:uppercase; color:var(--ink-4); font-weight:400; word-spacing:.5em; } .expand em{ font-style:normal; color:var(--ink); font-weight:600; } .hero__lead{ font-family:var(--serif); font-optical-sizing:auto; font-weight:300; font-size:clamp(1.6rem,4.1vw,3.05rem); line-height:1.14; letter-spacing:-.026em; margin-top:clamp(2rem,5vw,3.2rem); text-wrap:balance; } .hero__sub{ max-width:44ch; margin:1.4rem auto 0; color:var(--ink-3); font-size:clamp(.95rem,1.6vw,1.06rem); line-height:1.7; text-wrap:pretty; } .cue{ position:absolute; left:0; right:0; bottom:clamp(1.6rem,4.5vh,3rem); display:flex; align-items:center; justify-content:center; gap:.85rem; white-space:nowrap; color:var(--ink-4); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; transition:color .4s var(--ease); } .cue:hover{ color:var(--ink) } .cue__dot{ animation:cuedot 2.4s var(--ease-io) infinite } @keyframes cuedot{ 0%,100%{ transform:translateY(0); opacity:1 } 50%{ transform:translateY(14px); opacity:.25 } } /* ---------- 7. Rozdziały ---------- */ .chapter{ position:relative; padding-block:var(--chapter-y); border-top:1px solid var(--line-1); } /* poświata sekcji zamiast ramek/cieni */ .chapter::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(60% 40% at 50% 0%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 70%); opacity:.7; } .marker{ display:flex; align-items:center; gap:.85rem; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-4); margin-bottom:clamp(1.6rem,4vw,2.6rem); } .marker b{ font-weight:500; color:var(--ink); padding:.28rem .6rem; border:1px solid var(--line-2); border-radius:.35rem; letter-spacing:.12em; font-size:.66rem; } .head{ font-family:var(--serif); font-weight:300; font-size:clamp(2.1rem,6.2vw,4.6rem); line-height:1.04; letter-spacing:-.032em; text-wrap:balance; max-width:20ch; } .lede{ margin-top:clamp(1.4rem,3vw,2.2rem); max-width:62ch; color:var(--ink-2); font-size:clamp(1.02rem,1.8vw,1.22rem); line-height:1.72; text-wrap:pretty; } /* proza rozdziału I */ .prose{ margin-top:clamp(2.2rem,5vw,3.4rem); max-width:58ch; display:grid; gap:1.5rem; color:var(--ink-2); font-size:clamp(1.02rem,1.7vw,1.16rem); line-height:1.78; } .prose strong{ color:var(--ink); font-weight:500 } .drop{ float:left; font-family:var(--serif); font-weight:300; font-size:3.6em; line-height:.78; margin:.06em .12em 0 0; background:linear-gradient(150deg,var(--s5),var(--s6)); -webkit-background-clip:text; background-clip:text; color:transparent; } .pull{ margin-top:clamp(3.5rem,8vw,6rem); padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line-2); max-width:24ch; margin-left:auto; text-align:right; } .pull p{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(1.5rem,3.6vw,2.6rem); line-height:1.18; letter-spacing:-.02em; background:linear-gradient(100deg,var(--ink) 20%, color-mix(in oklab,var(--s5) 80%, var(--ink)) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---------- 7b. Schemat pryzmatu ---------- */ .diagram{ display:none } @media (min-width:60rem){ .diagram{ display:block; margin-top:clamp(3rem,6vw,4.5rem); } .diagram svg{ width:100%; height:auto; overflow:visible } .dg-cap{ font-family:var(--sans); font-size:13px; letter-spacing:.16em; text-transform:uppercase; fill:var(--ink-2); font-weight:400; } .dg-dim{ fill:var(--ink-4); letter-spacing:.1em; font-size:12px } .dg-mid{ text-anchor:middle; fill:var(--ink-3); font-size:12px } .dg-in, .dg-prism path, .dg-out{ fill:none; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s var(--ease) .2s; } .dg-in{ stroke:color-mix(in oklab,var(--ink) 55%, transparent); stroke-width:1.4 } .dg-prism path{ stroke:var(--line-3); stroke-width:1.2 } .dg-out{ stroke:var(--c); stroke-width:1.4; opacity:.9 } .dg-out:nth-of-type(2){ transition-delay:.75s } .dg-out:nth-of-type(3){ transition-delay:.9s } .dg-out:nth-of-type(4){ transition-delay:1.05s } .dg-out:nth-of-type(5){ transition-delay:1.2s } .dg-labels{ opacity:0; transition:opacity 1s var(--ease) 1.1s } .diagram.is-in .dg-in, .diagram.is-in .dg-prism path, .diagram.is-in .dg-out{ stroke-dashoffset:0 } .diagram.is-in .dg-labels{ opacity:1 } } /* ---------- 7c. Fazy realizacji ---------- */ .phases{ margin-top:clamp(2.6rem,6vw,4rem); display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); background:var(--line-1); border-block:1px solid var(--line-1); } .phases > li{ background:var(--bg); padding:clamp(1.6rem,3vw,2.2rem) clamp(1.3rem,2.2vw,1.8rem) clamp(1.9rem,3.4vw,2.4rem); display:grid; gap:1rem; align-content:start; } .ph__n{ font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-4); font-variant-numeric:tabular-nums; } .phases h3{ font-family:var(--sans); font-weight:500; font-size:clamp(1.02rem,1.8vw,1.15rem); letter-spacing:-.02em; } .phases ul{ display:grid; gap:.55rem } .phases ul li{ position:relative; padding-left:1.05rem; color:var(--ink-3); font-size:.88rem; line-height:1.55; text-wrap:pretty; } .phases ul li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:1px; background:var(--line-3); } /* ---------- 8. Filary (metoda) ---------- */ .pillars{ margin-top:clamp(3rem,7vw,5rem); display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); background:var(--line-1); border-block:1px solid var(--line-1); } .pillar{ position:relative; background:var(--bg); padding:clamp(1.75rem,3.4vw,2.6rem) clamp(1.5rem,2.6vw,2.2rem) clamp(2.2rem,4vw,3rem); overflow:hidden; transition:background .6s var(--ease); } /* światło pod kursorem — zamiast hover-cienia */ .lightbox::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(18rem 18rem at var(--mx,50%) var(--my,0%), color-mix(in oklab, var(--accent) 13%, transparent), transparent 62%); opacity:0; transition:opacity .5s var(--ease); } .lightbox:hover::before{ opacity:1 } .pillar__n{ display:block; font-size:.68rem; letter-spacing:.2em; color:var(--ink-4); font-variant-numeric:tabular-nums; margin-bottom:1.6rem; } .pillar h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.35rem,2.4vw,1.7rem); letter-spacing:-.02em; margin-bottom:.9rem; } .pillar p{ color:var(--ink-3); font-size:.98rem; line-height:1.72; text-wrap:pretty; } /* ---------- 9. Produkty: „niedługo” ---------- */ /* Zamiast listy — jedna linia widma i zapowiedź. Linia płynie powoli, bo to jedyny kolor w sekcji; reszta to typografia. */ .soon{ position:relative; margin-top:clamp(3rem,7vw,5rem); padding-top:clamp(2.2rem,5vw,3.6rem); max-width:60rem; display:grid; gap:clamp(1rem,2.2vw,1.5rem); } .soon__line{ position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6),var(--s7),var(--s8),var(--s1)); background-size:200% 100%; animation:soonline 16s linear infinite; opacity:.9; } @keyframes soonline{ to{ background-position:-200% 0 } } .soon__status{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5rem; color:var(--accent); } .soon__status::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; animation:pulse 2.6s var(--ease-io) infinite; } .soon__text{ font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,4.4vw,3rem); line-height:1.12; letter-spacing:-.028em; max-width:18ch; text-wrap:balance; background:linear-gradient(100deg,var(--ink) 40%, color-mix(in oklab,var(--s7) 75%, var(--ink)) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .soon__note{ color:var(--ink-3); font-size:clamp(.98rem,1.6vw,1.06rem); line-height:1.72; max-width:52ch; text-wrap:pretty; } /* ---------- 9a. Widmo produktów (do użycia, gdy wrócą wiązki) ---------- */ .spectrum{ margin-top:clamp(3rem,7vw,5rem); border-top:1px solid var(--line-1); } .ray{ position:relative; display:grid; grid-template-columns:3px 1fr; gap:clamp(1.5rem,4vw,3rem); border-bottom:1px solid var(--line-1); padding-block:clamp(1.6rem,3.2vw,2.4rem); transition:background .55s var(--ease); } .ray::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, color-mix(in oklab, var(--c) 10%, transparent), transparent 46%); opacity:0; transition:opacity .55s var(--ease); } .ray:hover::before{ opacity:1 } .ray__bar{ position:relative; background:var(--line-2); overflow:hidden; } .ray__bar::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, var(--c) 26%, var(--c) 74%, transparent); transform:scaleY(0); transform-origin:center; transition:transform .7s var(--ease); } .ray:hover .ray__bar::after, .ray.is-in .ray__bar::after{ transform:scaleY(1) } .ray__body{ display:grid; grid-template-columns:minmax(0,1fr); gap:.55rem; } @media (min-width:52rem){ .ray__body{ grid-template-columns: 5.5rem minmax(0,15rem) minmax(0,1fr) auto; align-items:baseline; gap:clamp(.9rem,2.2vw,1.9rem); } .ray__metric{ justify-self:end; text-align:right } } .ray__status{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.45rem; color:var(--ink-4); white-space:nowrap; } .ray__status::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; } .ray__status.is-live{ color:var(--c) } .ray__status.is-live::before{ animation:pulse 2.6s var(--ease-io) infinite } @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.7) } } .ray h3{ font-family:var(--sans); font-weight:500; font-size:clamp(1.15rem,2.2vw,1.45rem); letter-spacing:-.024em; transition:color .45s var(--ease); } .ray:hover h3{ color:var(--c) } .ray__desc{ color:var(--ink-3); font-size:.97rem; line-height:1.66; text-wrap:pretty; } .ray__metric{ font-size:.74rem; letter-spacing:.06em; color:var(--ink-4); font-variant-numeric:tabular-nums; white-space:nowrap; } .ray__metric span{ opacity:.4; margin-inline:.55em } /* ---------- 9b. Usługi ---------- */ .services{ margin-top:clamp(3rem,7vw,5rem); display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); background:var(--line-1); border-block:1px solid var(--line-1); } .svc{ position:relative; overflow:hidden; background:var(--bg); padding:clamp(1.7rem,3.2vw,2.4rem) clamp(1.4rem,2.4vw,2rem) clamp(1.9rem,3.4vw,2.6rem); display:grid; gap:.85rem; grid-template-rows:auto 1fr auto; /* linia techniczna równa we wszystkich kartach */ } .svc h3{ font-family:var(--sans); font-weight:500; font-size:clamp(1.05rem,1.9vw,1.22rem); letter-spacing:-.022em; } .svc p{ color:var(--ink-3); font-size:.95rem; line-height:1.7; text-wrap:pretty; } .svc__tech{ margin-top:.3rem; font-size:.7rem !important; letter-spacing:.1em; text-transform:lowercase; color:var(--ink-4) !important; border-top:1px solid var(--line-1); padding-top:.85rem; } /* kroki współpracy */ .steps{ margin-top:clamp(2.5rem,5vw,3.5rem); display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); background:var(--line-1); border:1px solid var(--line-1); border-radius:.75rem; overflow:hidden; } .steps li{ background:var(--bg); padding:clamp(1.4rem,2.6vw,1.9rem) clamp(1.2rem,2vw,1.6rem); display:grid; gap:.5rem; align-content:start; } .steps b{ font-weight:400; font-size:.66rem; letter-spacing:.2em; color:var(--ink-4); font-variant-numeric:tabular-nums; } .steps span{ font-size:1rem; font-weight:500; letter-spacing:-.02em; color:var(--ink); } .steps p{ color:var(--ink-4); font-size:.85rem; line-height:1.6; text-wrap:pretty } /* ---------- 9c. Modele współpracy ---------- */ .subhead{ margin-top:clamp(3rem,6vw,4.5rem); font-family:var(--sans); font-weight:400; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-4); } .models{ margin-top:1.5rem; display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); background:var(--line-1); border:1px solid var(--line-1); border-radius:.75rem; overflow:hidden; } .model{ position:relative; overflow:hidden; background:var(--bg); padding:clamp(1.5rem,2.8vw,2.1rem) clamp(1.3rem,2.2vw,1.8rem); display:grid; gap:.7rem; align-content:start; } .model h4{ font-family:var(--sans); font-weight:500; font-size:1.02rem; letter-spacing:-.02em; } .model p{ color:var(--ink-3); font-size:.92rem; line-height:1.68; text-wrap:pretty } .deliver{ margin-top:1.5rem; display:grid; gap:0; max-width:56rem; } .deliver li{ position:relative; padding:.95rem 0 .95rem 2.1rem; border-top:1px solid var(--line-1); color:var(--ink-2); font-size:.98rem; line-height:1.6; text-wrap:pretty; } .deliver li:last-child{ border-bottom:1px solid var(--line-1) } .deliver li strong{ color:var(--ink); font-weight:500 } .deliver li::before{ content:""; position:absolute; left:.35rem; top:1.35em; width:.55rem; height:.55rem; border-radius:50%; background:var(--s5); } /* ---------- 10. Liczby ---------- */ .stats{ margin-top:clamp(3rem,7vw,5rem); display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); background:var(--line-1); border:1px solid var(--line-1); border-radius:.75rem; overflow:hidden; } .stat{ background:var(--bg); padding:clamp(1.8rem,3.6vw,2.8rem) clamp(1.4rem,2.4vw,2rem); display:grid; gap:.7rem; align-content:start; } .stat__v{ font-family:var(--serif); font-weight:300; font-size:clamp(3rem,7vw,5rem); line-height:.94; letter-spacing:-.04em; font-variant-numeric:tabular-nums lining-nums; background:linear-gradient(160deg, var(--ink) 30%, color-mix(in oklab, var(--ink) 45%, transparent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat--punch .stat__v{ background:linear-gradient(150deg,var(--s5),var(--s6) 55%,var(--s7)); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat__l{ color:var(--ink-4); font-size:.86rem; line-height:1.55; text-wrap:pretty; max-width:24ch; } /* ---------- 11. Zasady ---------- */ .rules{ margin-top:clamp(3rem,7vw,5rem); display:grid; gap:0; max-width:64rem; } .rules li{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,4vw,3rem); align-items:start; padding-block:clamp(1.4rem,3vw,2.1rem); border-top:1px solid var(--line-1); } .rules li:last-child{ border-bottom:1px solid var(--line-1) } .rules b{ font-weight:400; font-size:.7rem; letter-spacing:.18em; color:var(--ink-4); font-variant-numeric:tabular-nums; padding-top:.55rem; } .rules p{ font-family:var(--serif); font-weight:300; font-size:clamp(1.15rem,2.6vw,1.75rem); line-height:1.36; letter-spacing:-.02em; color:var(--ink-2); text-wrap:pretty; } /* ---------- 12. Finał ---------- */ .finale{ position:relative; min-height:92svh; display:grid; place-items:center; text-align:center; isolation:isolate; overflow:hidden; border-top:1px solid var(--line-1); } .finale__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; mask-image:radial-gradient(70% 60% at 50% 50%, #000 40%, transparent 78%); } .finale__head{ font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,8vw,6rem); line-height:1.02; letter-spacing:-.035em; text-wrap:balance; } .finale__sub{ margin-top:clamp(1.6rem,3.4vw,2.4rem); color:var(--ink-3); font-size:clamp(.95rem,1.6vw,1.06rem); line-height:1.8; } /* ---------- 13. Stopka ---------- */ .foot{ border-top:1px solid var(--line-1); padding-block:clamp(2.5rem,5vw,4rem); } .foot__in{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; } .foot__mark{ font-weight:800; font-size:1.05rem; letter-spacing:-.03em; color:var(--ink-3); background:linear-gradient(90deg,var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6),var(--s7),var(--s8)); background-size:0% 100%; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; transition:background-size 1.4s var(--ease) .2s, color 1.4s var(--ease) .2s; } .foot__mark.is-in{ background-size:100% 100%; color:transparent } .foot__meta{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); } .foot__legal{ margin-top:clamp(1.6rem,3vw,2.4rem); padding-top:clamp(1.2rem,2.5vw,1.8rem); border-top:1px solid var(--line-1); font-size:.82rem; line-height:1.55; color:var(--ink-3); } .foot__legal dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:.55rem 2rem; margin:0; } .foot__legal dl > div{ display:grid; grid-template-columns:8.5rem 1fr; gap:.4rem } .foot__legal dt{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4) } .foot__legal dd{ margin:0 } .foot__legal a{ color:inherit; text-decoration:underline; text-underline-offset:.15em } .foot__copy{ margin:1.4rem 0 0; font-size:.72rem; color:var(--ink-4) } @media (max-width:560px){ .foot__legal dl > div{ grid-template-columns:1fr; gap:.1rem } } /* ---------- 14. Dostępność ruchu ---------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } [data-reveal]{ opacity:1; transform:none; filter:none } .ln i{ opacity:1; transform:none } .boot{ display:none } .wordmark span{ opacity:1; transform:none; filter:none } .grain{ animation:none } }