/* ========================================================================== ROADSIDE REELWORKS — "SCREENING ROOM" Rakennettu RoadsideReelworks_FINAL_SPEC.md (24 kohtaa) + RoadsideReelworks_DESIGN_CONCEPT.md mukaan. 5.8.2026. KOLME SÄÄNTÖÄ JOITA EI SAA RIKKOA (DESIGN_CONCEPT k. 9): 1. .field on body-tason lapsi eikä KOSKAAN minkään backdrop-filter/ filter/transform -esi-isän sisällä. Muuten position:fixed lakkaa olemasta kiinteä (containing block -ansa) ja koko efekti kuolee. 2. Teksti istuu AINA .plate-pinnalla tai paljaalla kentällä — ei koskaan suoraan lasilla. 3. Lasibudjetti: enintään 6 samanaikaista backdrop-filter-pintaa viewportissa. Kortit lasilevyn PÄÄLLÄ eivät saa omaa filteriä. EI scroll-kuuntelijoita, EI rAF-silmukoita, EI parallaksi-JS:ää. Ainoa liike-JS on hintojen count-up (fail-safe: hinnat ovat HTML:ssä). ========================================================================== */ /* ---------- fontit (paikalliset, ei ulkoisia pyyntöjä) ---------- */ @font-face { font-family: 'Archivo'; src: url('../assets/fonts/Archivo.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; } /* ---------- tokenit ---------- */ :root { /* ===== TUNGSTEN — lukittu 6.8.2026 (Teron valinta kolmesta) ===== Projektorin hehku: lämmin kulta lämpimällä mustalla. Korvasi ultramariinin; koko sininen paletti on nyt historiaa. */ --field-0: #0F0D0A; --plate: #17130F; --plate-2: #1E1813; /* muste — portaikko viritetty PAHIMMAN pohjan mukaan (label .quiet-kortilla lasilevyn päällä keilan kirkkaimmassa kohdassa), ei laatan mukaan. Nostettu 6.8. kun keilaa vahvistettiin: lämmin keila kantaa ~3× enemmän luminanssia kuin sininen samalla alfalla, koska vihreä kanava painaa kontrastikaavassa 10× sinistä. */ --ink-hi: #F8F4ED; /* otsikot */ --ink: #DED6C9; /* leipäteksti */ --ink-lo: #CBC2B3; /* labelit — nostettu 6.8. mittauksen jälkeen: #C4BBAC putosi 4,14:1 tasolle kun label osui ruudukkoviivan päälle keilan huipussa */ /* aksentti — lämmin kulta */ --a-600: #E8A33D; /* täytöt */ --a-500: #F2B052; /* hover */ --a-300: #F0BE7A; /* linkkiteksti */ --btn-ink: #221604; /* TÄYTTÖNAPIN teksti: TUMMA kullalla, ei valkoinen. Kirkas kulta ei kanna valkoista tekstiä — tämä yksityiskohta erottaa premium-kullan halvasta. Älä vaihda valkoiseksi. */ --a-beam: 255, 183, 77; --a-glow2: 214, 92, 49; --a-grad: linear-gradient(100deg, #FFC24E, #FF9052); --glass-border: rgba(255, 255, 255, 0.09); --glass-lip: rgba(255, 255, 255, 0.10); --hair: rgba(255, 255, 255, 0.055); --wrap: min(1160px, 92vw); /* Osion pystypehmuste omana tokeninaan: verhon mitoitus JA peitteen sijainti riippuvat siitä. Jos tämä muuttuu ilman että lavan korkeus ja flow'n marginaali seuraavat, peite osuu väärään kohtaan. */ --section-pad-y: clamp(46px, 7vw, 82px); --r-lg: 20px; --r-md: 14px; --r-sm: 10px; /* Kentän kerrokset yhtenä tokenina, koska niitä käyttää KAKSI elementtiä: .field (kiinteä, heron takana) ja .flow-cover (heron edessä, levyjen takana). Jos nämä eroaisivat toisistaan, saumakohta näkyisi. */ --field-bg: radial-gradient(125% 92% at 50% 36%, transparent 48%, rgba(0,0,0,0.58) 100%), repeating-linear-gradient(0deg, rgba(204,190,170,0.045) 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, rgba(204,190,170,0.045) 0 1px, transparent 1px 16px), repeating-linear-gradient(0deg, rgba(204,190,170,0.10) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(204,190,170,0.10) 0 1px, transparent 1px 64px), repeating-linear-gradient(104deg, rgba(255,183,77,0.062) 0 2px, transparent 2px 38px, rgba(255,183,77,0.034) 38px 39px, transparent 39px 78px), radial-gradient(88% 70% at -10% -20%, rgba(255,183,77,0.17), transparent 74%), linear-gradient(112deg, rgba(255,183,77,0.095), rgba(255,183,77,0.040) 42%, transparent 70%), radial-gradient(72% 58% at 42% 52%, rgba(255,183,77,0.042), transparent 72%), radial-gradient(52% 46% at 78% 26%, rgba(255,183,77,0.058), transparent 74%), radial-gradient(46% 40% at 13% 60%, rgba(255,183,77,0.060), transparent 73%), radial-gradient(42% 34% at 63% 6%, rgba(214,92,49,0.070), transparent 71%), radial-gradient(58% 48% at 88% 90%, rgba(214,92,49,0.155), transparent 74%), #0F0D0A; /* Pölyhiukkaset: 12 hiukkasta 640 px laatassa (~30 näkyvissä). KAKSI versiota SAMOISTA hiukkasista: himmeä perus ja kirkas keilaversio. Sama sijainti molemmissa → hiukkanen KIRKASTUU ajautuessaan keilaan, ei ilmesty uutta hiukkasta. */ --dust-dim: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22640%22%20viewBox%3D%220%200%20640%20640%22%3E%3Ccircle%20cx%3D%22583.4%22%20cy%3D%22598.1%22%20r%3D%221.77%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.1%29%22%2F%3E%3Ccircle%20cx%3D%22377.1%22%20cy%3D%22272.7%22%20r%3D%221.34%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.11%29%22%2F%3E%3Ccircle%20cx%3D%22129.0%22%20cy%3D%22285.6%22%20r%3D%220.97%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.16%29%22%2F%3E%3Ccircle%20cx%3D%2225.4%22%20cy%3D%2263.2%22%20r%3D%221.55%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.15%29%22%2F%3E%3Ccircle%20cx%3D%22327.8%22%20cy%3D%22465.2%22%20r%3D%221.13%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.1%29%22%2F%3E%3Ccircle%20cx%3D%22495.5%22%20cy%3D%22375.3%22%20r%3D%221.49%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.18%29%22%2F%3E%3Ccircle%20cx%3D%22611.9%22%20cy%3D%22234.9%22%20r%3D%221.61%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.15%29%22%2F%3E%3Ccircle%20cx%3D%22364.7%22%20cy%3D%22419.5%22%20r%3D%221.08%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.1%29%22%2F%3E%3Ccircle%20cx%3D%22303.9%22%20cy%3D%22455.1%22%20r%3D%221.41%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.16%29%22%2F%3E%3Ccircle%20cx%3D%22408.3%22%20cy%3D%22122.9%22%20r%3D%220.91%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.14%29%22%2F%3E%3Ccircle%20cx%3D%22515.8%22%20cy%3D%22131.3%22%20r%3D%220.84%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.1%29%22%2F%3E%3Ccircle%20cx%3D%2234.1%22%20cy%3D%22180.8%22%20r%3D%221.39%22%20fill%3D%22rgba%28255%2C246%2C232%2C0.21%29%22%2F%3E%3C%2Fsvg%3E"); --dust-lit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22640%22%20viewBox%3D%220%200%20640%20640%22%3E%3Ccircle%20cx%3D%22583.4%22%20cy%3D%22598.1%22%20r%3D%222.04%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.46%29%22%2F%3E%3Ccircle%20cx%3D%22377.1%22%20cy%3D%22272.7%22%20r%3D%221.54%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.47%29%22%2F%3E%3Ccircle%20cx%3D%22129.0%22%20cy%3D%22285.6%22%20r%3D%221.12%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.61%29%22%2F%3E%3Ccircle%20cx%3D%2225.4%22%20cy%3D%2263.2%22%20r%3D%221.78%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.6%29%22%2F%3E%3Ccircle%20cx%3D%22327.8%22%20cy%3D%22465.2%22%20r%3D%221.3%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.44%29%22%2F%3E%3Ccircle%20cx%3D%22495.5%22%20cy%3D%22375.3%22%20r%3D%221.71%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.68%29%22%2F%3E%3Ccircle%20cx%3D%22611.9%22%20cy%3D%22234.9%22%20r%3D%221.85%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.57%29%22%2F%3E%3Ccircle%20cx%3D%22364.7%22%20cy%3D%22419.5%22%20r%3D%221.24%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.46%29%22%2F%3E%3Ccircle%20cx%3D%22303.9%22%20cy%3D%22455.1%22%20r%3D%221.62%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.61%29%22%2F%3E%3Ccircle%20cx%3D%22408.3%22%20cy%3D%22122.9%22%20r%3D%221.05%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.56%29%22%2F%3E%3Ccircle%20cx%3D%22515.8%22%20cy%3D%22131.3%22%20r%3D%220.97%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.46%29%22%2F%3E%3Ccircle%20cx%3D%2234.1%22%20cy%3D%22180.8%22%20r%3D%221.6%22%20fill%3D%22rgba%28255%2C214%2C158%2C0.76%29%22%2F%3E%3C%2Fsvg%3E"); --field-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; /* EI overflow-x:hidden — rikkoisi position:stickyn eli verhon. Vaakavuoto hallitaan elementtikohtaisesti. */ } body { background: var(--field-0); color: var(--ink); font-family: 'Archivo', system-ui, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } button, input, textarea { font: inherit; color: inherit; } a { color: var(--a-300); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :is(a, button, input, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--a-300); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; top: -60px; left: 16px; z-index: 100; background: var(--a-600); color: var(--btn-ink); padding: 12px 18px; border-radius: var(--r-sm); transition: top .2s ease; } .skip:focus { top: 16px; text-decoration: none; } /* ========================================================================== KERROS -1 · KENTTÄ — position:fixed, ei liiku eikä animoidu koskaan ========================================================================== */ .field { position: fixed; inset: 0; z-index: -1; pointer-events: none; /* SUUNNITTELUPERIAATE (6.8.2026, Teron palaute "lasi ei erotu"): lasin sumennus tarvitsee RAKENNETTA, ei kirkkautta. Korkeataajuiset kerrokset (ruudukot, pölysäteet) nostavat keskiluminanssia ~1 % mutta antavat blurille moninkertaisesti enemmän taitettavaa kuin leveät hehkut, jotka maksavat luminanssissa suoraan. Siksi ruudukot ja säteet ovat vahvoja ja hehkut maltillisia. Kaikki mitattu — ks. alin arvo LEARNINGSissä. */ /* Kerrokset tulevat --field-bg -tokenista (:root), koska sama pino tarvitaan myös .flow-cover -elementille. Kerrosten järjestys ja perustelut: ks. tokenin kommentti. */ background: var(--field-bg); } .field::after, .flow-cover::after { content: ''; position: absolute; inset: 0; background-image: var(--field-noise); background-size: 200px 200px; /* mix-blend-mode: overlay POISTETTU 6.8.2026 (scroll-sulavuus). Sekoitustila pakottaa koko viewportin kokoisen elementin samaan komposiittiryhmään taustansa kanssa, mikä estää kiinteän kentän kerrostamisen ja aiheuttaa uudelleenmaalauksen joka ruudulla. Tavallinen alfa antaa käytännössä saman rakeen — nostettu 0.045 → 0.055 kompensoimaan overlayn menetetty kontrasti. */ opacity: 0.055; pointer-events: none; } /* ========================================================================== PÖLYHIUKKASET (uusittu 6.8.2026 — Teron palaute "kaksi eri pölyä") -------------------------------------------------------------------------- VIRHE JOKA KORJATTIIN: pölyä oli KAKSI kerrosta — kiinteä .dust ja .flow-cover::before joka scrollasi peitteen mukana. Ne liikkuivat eri tahtia, joten scrollatessa "toinen pöly" ajautui ensimmäisen päälle. RATKAISU: YKSI kerros, nostettuna sisällön PÄÄLLE (z-index 40). Fysikaalisesti oikein — pöly leijuu ilmassa katsojan ja kuvan välissä, ei taustan sisällä. Samalla koko kerrosongelma katosi: peite ei voi piilottaa sitä, joten duplikaattia ei tarvita. Rakenne: ULOMPI elementti on kiinteä ja kantaa MASKIN (staattinen, viewporttiin sidottu). SISEMPI ajelehtii transformilla. Näin keilan muotoinen maski pysyy paikallaan vaikka hiukkaset liikkuvat sen läpi. ========================================================================== */ .dust { position: fixed; inset: 0; z-index: 40; /* sisällön päällä, mutta navin (50), lightboxin (90) ja toastin (95) alla */ pointer-events: none; overflow: hidden; } .dust > i { position: absolute; inset: -55%; /* ylimitta ajelehtimiselle */ background-image: var(--dust-dim); background-size: 640px 640px; /* Siirtymä on TÄSMÄLLEEN yksi laatta → silmukka on saumaton */ animation: dustDrift 140s linear infinite; } /* Keilan valaisemat hiukkaset: samat pisteet kirkkaana, mutta vain siellä minne keila osuu. Maski on ULOMMASSA elementissä eli pysyy viewportissa paikallaan, kun hiukkaset ajelehtivat sen läpi. */ .dust--lit { -webkit-mask-image: radial-gradient(72% 58% at -6% -14%, #000 12%, transparent 72%); mask-image: radial-gradient(72% 58% at -6% -14%, #000 12%, transparent 72%); } .dust--lit > i { background-image: var(--dust-lit); } @keyframes dustDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-640px, -640px, 0); } } @media (prefers-reduced-motion: reduce) { .dust > i { animation: none; } } /* ========================================================================== FLOW-COVER — heron peite (korjaus 6.8.2026, Teron havainto) -------------------------------------------------------------------------- ONGELMA: .flow'n LÄPINÄKYVÄT alueet päästivät heron näkyviin verhon aikana — osion 82 px yläpehmuste, levyn 20 px pyöristetyt kulmat ja levyn sivumarginaalit. Todennettu elementFromPointilla: kohdassa (1209, 232) osui .hero, ei levy. Siitä syntyi "valkoinen siru" levyn oikeaan laitaan. Z-INDEX EI OLLUT VÄÄRIN: hero on z 0, levyt z 2. Vika oli siinä että levyjen VÄLISSÄ ja YMPÄRILLÄ ei ollut mitään heron ja kentän välissä. RATKAISU: tämä elementti on .flow'n ensimmäinen lapsi ja z-index −1 sen sisällä → piirtyy levyjen ALLE mutta heron PÄÄLLE (koko .flow on heron yläpuolella z 2:n ansiosta). Se kantaa täsmälleen saman taustan kuin .field, joten kenttä näyttää katkeamattomalta. RATKAISEVA YKSITYISKOHTA: background-attachment: fixed. Ilman sitä gradientit vierisivät sisällön mukana ja koko "kiinteä kenttä" -illuusio hajoaisi. Fixed-kiinnitys sitoo ne viewportiin täsmälleen kuten .field'in position:fixed tekee. ========================================================================== */ .flow-cover { position: absolute; /* TOP = näkyvän levyn yläreuna, EI flow'n yläreuna. Korjattu 6.8.2026 (Teron havainto): top:0 peitti heron 82 px ennen kuin levy oli visuaalisesti siinä kohtaa — hero katosi liian aikaisin, koko ruudun leveydeltä. Nyt peite ja levy saapuvat samalla rivillä. Peite on silti TÄYSLEVEÄ ja SUORAKULMAINEN, jotta se kattaa levyn sivumarginaalit ja pyöristetyt kulmat — siellä ei ole hero-sisältöä (hero = var(--wrap), sama kuin levy), joten mitään ei piiloudu ennenaikaisesti. */ top: var(--section-pad-y); left: 0; right: 0; /* 110vh riittää: peite alkaa levyn yläreunasta, ja hero on kokonaan poissa ruudulta kun on vieritetty 100vh sen jälkeen. Oli 220vh — turhaa kiinteän taustan maalausaluetta, joka maksoi ruutuja. */ height: 110vh; z-index: -1; pointer-events: none; background: var(--field-bg); background-attachment: fixed; } /* ⚠️ iOS Safari ei tue background-attachment: fixed — se kohtelee sitä scroll-arvona. Seuraus SIELLÄ: heron vuoto pysyy silti korjattuna (peite peittää joka tapauksessa), mutta peitteen gradientit vierivät sisällön mukana, jolloin kiinteän kentän illuusio heikkenee levyjen alapuolisella alueella. Desktop ja Android Chrome toimivat oikein. Jos tämä osoittautuu iPhonella häiritseväksi, vaihtoehto on antaa iOS:lle tasainen pohja alla olevalla säännöllä — se säilyttää korjauksen mutta luopuu gradienteista siinä selaimessa. */ @supports (-webkit-touch-callout: none) { /* vain iOS: pehmeä lasku tasaiseen pohjaan, ei rikkinäistä parallaksia */ .flow-cover { background: var(--field-0); } .flow-cover::after { opacity: 0.03; } } /* ========================================================================== MATERIAALIT ========================================================================== */ /* Lasi (savulasi). KERROSJÄRJESTYS ON KRIITTINEN (LEARNINGS 5.8.): LEVY TUMMENTAA — kirkas reuna tulee vain 1px inset-huulesta, ei pinta-alaisesta valkoisesta täytöstä. Jos levy TÄYTTÄISI valkoisella, se summautuisi päällä olevan .quiet-kortin kanssa ja labelit putoaisivat 3,3:1 tasolle. Kirkkaan reunan tuo kortti, ei levy. Maitolasi (pelkkä valkoinen lisäys) on siis kielletty. */ .glass { /* Tummennus nostettiin 6.8. kun kenttä rikastui: levyn tehtävä on hallita tekstin pohjaluminanssia, ei tuoda kirkkautta. Kirkas huuli tulee VAIN 1px inset-varjosta alla — ei pinta-alaisesta täytöstä. */ background: linear-gradient(180deg, rgba(255,255,255,0.030), rgba(14,11,8,0.26) 18%, rgba(10,8,6,0.44)); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-lip), 0 24px 60px -20px rgba(0,0,0,0.55); border-radius: var(--r-lg); } /* Kiinteä laatta — kaikki otsikot ja leipäteksti istuvat tällä. */ .plate { background: var(--plate); border: 1px solid var(--hair); border-radius: var(--r-md); } /* Hiljainen pinta: kortit lasilevyn PÄÄLLÄ. Ei omaa backdrop-filteriä. */ .quiet { background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-lip); border-radius: var(--r-md); } /* ========================================================================== TYPOGRAFIA — jokainen taso suunniteltu, ei selainoletuksia (spec k. 1) ========================================================================== */ .eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-lo); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .eyebrow__num { color: var(--a-300); } .eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--glass-border), transparent); } h1, h2, h3 { color: var(--ink-hi); letter-spacing: -0.015em; } h1 { font-size: clamp(40px, 5.8vw, 68px); line-height: 1.03; font-weight: 800; letter-spacing: -0.022em; } h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; font-weight: 750; } h3 { font-size: 20px; line-height: 1.3; font-weight: 700; } /* ========================================================================== NAPIT ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600; line-height: 1; padding: 14px 22px; border-radius: var(--r-sm); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; text-decoration: none; } .btn:hover { text-decoration: none; } .btn--accent { background: var(--a-600); color: var(--btn-ink); box-shadow: 0 6px 24px -8px rgba(var(--a-beam), 0.40); } .btn--accent:hover { background: var(--a-500); transform: translateY(-1px); box-shadow: 0 10px 32px -8px rgba(var(--a-beam), 0.60); } .btn--ghost { background: rgba(255,255,255,0.06); color: var(--ink-hi); border: 1px solid var(--glass-border); } .btn--ghost:hover { background: rgba(255,255,255,0.11); transform: translateY(-1px); } .btn--sm { padding: 10px 16px; font-size: 14px; } .btn--block { width: 100%; } /* ========================================================================== TOPBAR — kiinteä lasipalkki, etummainen kerros ========================================================================== */ .topbar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: var(--wrap); z-index: 50; border-radius: var(--r-md); } .topbar__inner { display: flex; align-items: center; gap: 26px; padding: 11px 14px 11px 18px; } .brand { display: flex; align-items: center; gap: 10px; } .brand:hover { text-decoration: none; } .brand__mark { width: 26px; height: 26px; color: var(--ink-hi); flex: none; } .brand__mark svg { width: 100%; height: 100%; } .brand__name { font-size: 13px; font-weight: 700; letter-spacing: 0.13em; color: var(--ink-hi); text-transform: uppercase; white-space: nowrap; } .nav { display: flex; gap: 24px; margin-left: auto; } .nav a { color: var(--ink); font-size: 14.5px; font-weight: 500; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .18s, border-color .18s; } .nav a:hover { color: var(--a-300); border-bottom-color: var(--a-300); text-decoration: none; } .topbar__end { display: flex; align-items: center; gap: 10px; } .burger { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 36px; padding: 8px; border-radius: 8px; margin-left: auto; } .burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink-hi); margin: 4px 0; } .mobilenav { display: none; flex-direction: column; padding: 4px 18px 16px; } .mobilenav a { color: var(--ink); padding: 11px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--hair); } .mobilenav.is-open { display: flex; } /* ========================================================================== VERHO — koko sivun allekirjoitusliike, 0 riviä JavaScriptiä. Hero on sticky lavallaan; .flow ajaa sen yli negatiivisella marginaalilla ja sumentaa sen livenä oman backdrop-filterinsä läpi. Kaksi eri nopeutta (hero 0x, sisältö 1x) pelkällä CSS-layoutilla. ========================================================================== */ /* LAVAN MITOITUS — ÄLÄ MUUTA TOISTA LUKUA ILMAN TOISTA. Hero saa irrota pinnauksesta VASTA kun lasilevy on peittänyt sen kokonaan, muuten hero näyttää liikkuvan levyn mukana (Teron havainto 6.8.2026, mitattu: 160 px näkyvää liikettä vanhoilla arvoilla). Kaava: pinnauksen kesto = lava − 100vh levyn peittoon tarvitsema matka = |flow'n margin-top| VAATIMUS: lava − 100vh >= |margin-top| PÄIVITETTY 6.8.2026: mukaan tuli osion yläpehmuste P, koska peite (.flow-cover) alkaa vasta NÄKYVÄN levyn yläreunasta, ei flow'n yläreunasta. Kaava on nyt: lava = 200vh + P flow margin-top = −(100vh + P) → flow alkaa 100vh:sta (levy nousee ruudun alareunasta), peite ja levy saapuvat samaan aikaan, ja hero irtoaa TÄSMÄLLEEN silloin kun peite saavuttaa ruudun yläreunan. Miksi ei suoraan position:fixed? Silloin hero jäisi näkyviin levyjen VÄLIIN koko sivun matkalta, ja levy → kenttä → levy -rytmi katoaisi: välissä pitää näkyä kenttä, ei hero. */ .hero-stage { height: calc(200vh + var(--section-pad-y)); position: relative; } .hero { position: sticky; top: 0; z-index: 0; height: 100vh; display: grid; align-content: center; width: var(--wrap); margin-inline: auto; padding-top: 72px; } .flow { position: relative; z-index: 2; margin-top: calc(-100vh - var(--section-pad-y)); } /* ---------- kelluvat lasisirpaleet (hero) ---------- Teron ohje 6.8.: täytä heron tyhjä tila TEHOSTEELLA, ei sisällöllä. Nämä ovat oikeaa lasia (backdrop-filter) ilman tekstiä — ne näyttävät materiaalin ja tekevät tyhjästä tilasta osan koreografiaa. Liike on AJASTINPOHJAINEN (CSS-keyframe), ei scroll-sidottu — se on sallittu ja luotettava luokka, toisin kuin scroll-matematiikka. */ .shards { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; /* heron tekstin taakse, kentän eteen */ } .shard { position: absolute; border-radius: 22px; overflow: hidden; /* rajaa valojuovan lasin muotoon */ /* TÄYTE PIDETÄÄN MINIMISSÄ (6.8.2026): mitä vähemmän omaa täytettä, sitä enemmän sumennettua kenttää näkyy läpi — ja juuri se tekee lasista lasin. Aiempi versio täytti pinnan niin että ruudukko ei erottunut, jolloin sirpale luki läpinäkymättömänä laatikkona. */ background: linear-gradient(160deg, rgba(255,255,255,0.042), rgba(255,255,255,0.006) 46%, rgba(10,8,6,0.10)); /* REUNAVALO: lämmin kultasävy VAIN reunassa, ei pinnassa. Keila tulee vasemmasta yläkulmasta, joten ylä- ja vasen reuna nappaavat väriä — kuten oikea lasinsärmä. Pinta pysyy neutraalina, muuten sirpale alkaisi näyttää värilliseltä muovilta. */ border: 1px solid rgba(255, 214, 156, 0.11); animation-name: var(--path); animation-duration: var(--dur); animation-delay: var(--delay); animation-iteration-count: infinite; /* pehmeä sini-tyyppinen käyrä: ei lineaarista robottiliikettä */ animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95); transform: rotate(var(--rot, 0deg)); } /* --- VALOHEIJASTUMAT (specular) — kaksi kerrosta ------------------- 1) ::before = kapea diagonaalinen valojuova joka kulkee lasin poikki hyvin hitaasti. Simuloi valon liukumista lasin pinnalla. 2) ::after = pehmeä epäkeskinen hotspot siinä nurkassa josta keila osuu (vasen ylä) — staattinen, koska valonlähde ei liiku. Molemmat animoivat vain transform/opacity → komposiittorilla, ei uudelleenmaalausta. */ .shard::before { content: ''; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 52%; background: linear-gradient(104deg, transparent 0%, rgba(255,240,214,0.045) 32%, rgba(255,249,235,0.19) 50%, rgba(255,240,214,0.045) 68%, transparent 100%); animation: shardSheen var(--sheen) ease-in-out infinite; animation-delay: var(--sheen-delay); pointer-events: none; } .shard::after { content: ''; position: absolute; inset: 0; background: radial-gradient(62% 52% at 20% 12%, rgba(255,216,158,0.16), transparent 68%); pointer-events: none; } @keyframes shardSheen { 0%, 100% { transform: rotate(-15deg) translateX(0); opacity: 0.30; } 50% { transform: rotate(-15deg) translateX(330%); opacity: 1; } } /* --- SYVYYSPORRASTUS: kolme eri etäisyyttä -------------------------- lähin = isoin, terävin reuna, kevyin sumennus, syvin varjo kaukaisin = pienin, pehmein reuna, vahvin sumennus, hennoin varjo HUOM SUMENNUKSEN MÄÄRÄSTÄ: arvot laskettiin 11/17/23 → 8/11/15, koska kentän pääruudukko on 64 px ja viivat 1 px. Yli ~15 px blur pyyhkii ne kokonaan, jolloin lasin läpi ei näy MITÄÄN rakennetta ja sirpale muuttuu litteäksi laatikoksi. Vähemmän sumennusta = enemmän lasia. Syvyysero säilyy silti selvänä. */ /* 1 · LÄHIN — iso pystylevy oikeassa ylälaidassa */ .shard--1 { --rot: -9deg; --dur: 23s; --delay: 0s; --path: shardDriftA; --sheen: 17s; --sheen-delay: -3s; /* right 5%, ei 2%: .shards on overflow:hidden ja päättyy heron reunaan (68 px ennen ruudun reunaa). 2%:lla kierretty laatikko leikkautui 14 px näkymättömään viivaan keskellä kenttää — luki renderöintivirheenä. Mitattu clearance nyt 23 px myös liikeradan äärilaidalla. */ right: 5%; top: 10%; width: clamp(200px, 24vw, 330px); aspect-ratio: 3 / 4; -webkit-backdrop-filter: blur(8px) saturate(152%); backdrop-filter: blur(8px) saturate(152%); box-shadow: inset 0 1px 0 rgba(255, 226, 184, 0.22), /* yläsärmä = keilan valo */ inset 1px 0 0 rgba(255, 210, 150, 0.11), /* vasen särmä */ inset 0 0 16px -12px rgba(255, 190, 110, 0.40), 0 52px 104px -34px rgba(0,0,0,0.72); } /* 2 · KESKIETÄISYYS — pystykortti keskellä */ .shard--2 { --rot: 6deg; --dur: 31s; --delay: -7s; --path: shardDriftB; --sheen: 23s; --sheen-delay: -14s; right: 26%; top: 46%; width: clamp(110px, 13vw, 172px); aspect-ratio: 4 / 5; -webkit-backdrop-filter: blur(11px) saturate(144%); backdrop-filter: blur(11px) saturate(144%); border-color: rgba(255, 214, 156, 0.085); box-shadow: inset 0 1px 0 rgba(255, 224, 180, 0.15), inset 0 0 14px -11px rgba(255, 190, 110, 0.30), 0 38px 78px -32px rgba(0,0,0,0.6); } /* 3 · KAUKAISIN — pieni neliö, sumein */ .shard--3 { --rot: 17deg; --dur: 19s; --delay: -12s; --path: shardDriftC; --sheen: 13s; --sheen-delay: -8s; right: 8%; top: 70%; width: clamp(76px, 8.5vw, 112px); aspect-ratio: 1 / 1; border-radius: 18px; -webkit-backdrop-filter: blur(15px) saturate(138%); backdrop-filter: blur(15px) saturate(138%); border-color: rgba(255, 214, 156, 0.06); box-shadow: inset 0 1px 0 rgba(255, 222, 178, 0.11), inset 0 0 12px -10px rgba(255, 190, 110, 0.22), 0 24px 52px -28px rgba(0,0,0,0.48); } /* --- KOLME ERI LIIKERATAA ------------------------------------------- Eri muoto, eri suunta, eri määrä käännepisteitä ja keskenään jaottomat kestot (23 / 31 / 19 s) — yhdistelmä ei toistu näkyvästi. Amplitudi nostettu 17 px → 26–38 px, mutta jaettu useaan akseliin ja kiertoon, jolloin se lukeutuu kelluntana eikä nykimisenä. */ /* A · pystysuuntainen nousu, hento sivuheilahdus */ @keyframes shardDriftA { 0% { transform: rotate(var(--rot)) translate3d(0, 0, 0); } 30% { transform: rotate(calc(var(--rot) + 1.3deg)) translate3d(-7px, -22px, 0); } 62% { transform: rotate(calc(var(--rot) - 0.9deg)) translate3d(5px, -38px, 0); } 100% { transform: rotate(var(--rot)) translate3d(0, 0, 0); } } /* B · vastakkainen: valuu oikealle ja alas, palaa ylös */ @keyframes shardDriftB { 0% { transform: rotate(var(--rot)) translate3d(0, 0, 0); } 35% { transform: rotate(calc(var(--rot) - 1.9deg)) translate3d(21px, 17px, 0); } 70% { transform: rotate(calc(var(--rot) + 1.1deg)) translate3d(30px, -11px, 0); } 100% { transform: rotate(var(--rot)) translate3d(0, 0, 0); } } /* C · leveä kaari vasemmalle, vahvin kierto (pienin kappale saa liikkua eniten) */ @keyframes shardDriftC { 0% { transform: rotate(var(--rot)) translate3d(0, 0, 0); } 28% { transform: rotate(calc(var(--rot) + 2.8deg)) translate3d(-19px, -14px, 0); } 55% { transform: rotate(calc(var(--rot) + 0.7deg)) translate3d(-26px, 19px, 0); } 80% { transform: rotate(calc(var(--rot) - 2.1deg)) translate3d(-9px, 29px, 0); } 100% { transform: rotate(var(--rot)) translate3d(0, 0, 0); } } .pill { display: inline-flex; align-items: center; gap: 9px; justify-self: start; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-lo); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--glass-border); background: rgba(15,13,10,0.62); } .pill__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--a-300); box-shadow: 0 0 10px 1px rgba(var(--a-beam), 0.85); } .hero__title { margin: 26px 0 18px; max-width: 16ch; text-shadow: 0 2px 26px rgba(0,0,0,0.55); } .hero__title em { font-style: normal; background: var(--a-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__sub { font-size: 19px; line-height: 1.55; max-width: 48ch; text-shadow: 0 1px 16px rgba(0,0,0,0.5); } .hero__actions { display: flex; gap: 13px; margin-top: 30px; flex-wrap: wrap; } .hero__facts { display: flex; gap: 30px; margin-top: 48px; flex-wrap: wrap; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-lo); /* nämä istuvat paljaalla kentällä keilan alueella — varjo on käytännön varmistus mittausarvon päälle */ text-shadow: 0 1px 10px rgba(0,0,0,0.55); } .hero__facts b { display: block; color: var(--ink-hi); font-size: 17px; letter-spacing: 0; text-transform: none; font-weight: 700; font-family: 'Archivo', sans-serif; } .hero__hint { position: absolute; bottom: 34px; left: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-lo); } /* ========================================================================== OSIOT JA LEVYT ========================================================================== */ .wrap { width: var(--wrap); margin-inline: auto; } .section { padding: var(--section-pad-y) 0; } /* Levennetty 6.8.2026 (Teron ohje): kortit olivat liian lähellä levyn reunoja, jolloin "pelkkää lasia" ei näkynyt juuri lainkaan ja materiaali hukkui sisältöön. Nyt reunus on ~40 % leveämpi. */ .sheet { padding: clamp(28px, 4.4vw, 66px); } .head { margin-bottom: 30px; } .head__plate { padding: clamp(20px, 2.6vw, 30px); } .head__lede { margin-top: 12px; max-width: 62ch; } /* ---------- 01 · näytetyöt: vaakasnap-nauha ---------- Väljennetty 5.8.2026 (Teron palaute): kortit olivat niin tiiviissä rivissä ettei lasilevy näkynyt niiden välistä lainkaan, jolloin koko materiaali hukkui. Kortti kasvoi, väli kasvoi 16 -> 30 px, ja nauhan ympärille jätettiin ilmaa. Näkyviä kortteja on nyt ~3 + selvä vilaus seuraavasta, mikä ratkaisee samalla löydettävyyden. */ .reelwrap { position: relative; /* HUOM: pelkkä relative — ei transformia, ei filtteriä. Ei vaikuta .field-kenttään. */ margin-top: 40px; margin-bottom: 8px; } /* reunahäivytys: kertoo että sisältö jatkuu. pointer-events:none, jottei syö klikkauksia. Ei scroll-kuuntelijaa -> häivytys ei sammu nauhan lopussa; siksi se on hillitty ja varsinainen affordanssi on nuolinappi. */ .reelwrap::after { content: ''; position: absolute; top: 0; right: 0; bottom: 26px; width: 84px; pointer-events: none; z-index: 1; background: linear-gradient(90deg, transparent, rgba(13,11,8,0.66)); border-radius: 0 var(--r-md) var(--r-md) 0; } .reel { display: flex; gap: 30px; overflow-x: auto; overflow-y: hidden; /* proximity, EI mandatory (6.8.2026, scroll-sulavuus): mandatory nappaa kiinni myös trackpadin pystyeleen vaakakomponentista ja nykäisee nauhaa kesken sivun vierityksen. proximity snappaa vain kun ele on selvästi vaakasuuntainen. */ scroll-snap-type: x proximity; scroll-padding-left: 2px; padding: 12px 2px 28px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; -webkit-overflow-scrolling: touch; } /* nuolinapit: klikkaus -> scrollBy. EI scroll-kuuntelijaa, ei tilaseurantaa. */ .reelnav { position: absolute; top: 38%; z-index: 3; width: 46px; height: 46px; border-radius: 50%; background: rgba(15,13,10,0.88); border: 1px solid rgba(255,255,255,0.22); color: var(--ink-hi); cursor: pointer; display: grid; place-items: center; transition: background-color .18s ease, transform .18s ease, border-color .18s ease; } .reelnav--prev { left: -16px; } .reelnav--next { right: -16px; } .reelnav:hover { background: var(--a-600); border-color: transparent; color: var(--btn-ink); transform: scale(1.08); } .reelnav svg { width: 20px; height: 20px; } .reel::-webkit-scrollbar { height: 8px; } .reel::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; } .reel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; } .vcard { flex: 0 0 clamp(224px, 25vw, 296px); scroll-snap-align: start; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: var(--r-md); transition: transform .22s ease; } .vcard__frame { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.05); box-shadow: inset 0 1px 0 var(--glass-lip), 0 18px 44px -18px rgba(0,0,0,0.6); transition: border-color .22s ease, box-shadow .22s ease; } .vcard__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vcard__num { position: absolute; top: 10px; left: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-hi); background: rgba(15,13,10,0.80); border: 1px solid rgba(255,255,255,0.10); padding: 6px 9px; border-radius: 7px; } /* play-nappi: tummaa savulasia, toimii sekä vaalealla että tummalla ruudulla */ .vcard__play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(14,11,8,0.64); border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(0.92); transition: opacity .22s ease, transform .22s ease; } .vcard__play::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 21px; } .vcard__meta { display: block; margin-top: 10px; padding: 11px 13px; } .vcard__tag { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-lo); } .vcard__name { display: block; color: var(--ink-hi); font-size: 15px; font-weight: 650; margin-top: 3px; } .vcard:hover { transform: translateY(-4px) scale(1.02); } .vcard:hover .vcard__frame { border-color: rgba(255,255,255,0.20); box-shadow: inset 0 1px 0 rgba(255,255,255,0.17), 0 30px 60px -20px rgba(0,0,0,0.78); } .vcard:hover .vcard__play, .vcard:focus-visible .vcard__play { opacity: 1; transform: scale(1); } /* Ei lukumäärämainintaa (Teron ohje 5.8.2026) — vain yleinen vihje. */ .reel__hint { margin-top: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-lo); } /* ---------- AI-läpinäkyvyystiili (spec k. 12) ---------- */ .aitile { display: flex; align-items: center; gap: 22px; margin-top: 24px; padding: 18px 20px; } /* Kuva on AITO rajaus toimitetusta videosta (litterbox @4.7s), 3x suurennos. Siksi EI opasiteettia eikä drop-shadowia — ne valehtelisivat siitä miltä merkintä oikeasti näyttää. Ohut reunus erottaa rajauksen tiilen taustasta. */ .aitile__mark { flex: 0 0 210px; width: 210px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(248,244,237,0.10), 0 2px 10px rgba(0,0,0,0.35); } .aitile__body { font-size: 14.5px; line-height: 1.55; } .aitile__body b { color: var(--ink-hi); font-weight: 650; } /* ---------- 02 · why us ---------- */ .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; } .card { padding: 22px; } .card__stat { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-300); margin-bottom: 12px; } .card h3 { margin-bottom: 8px; } .card p { font-size: 15.5px; } .quote { margin-top: 16px; padding: 24px 26px; } .quote__text { color: var(--ink-hi); font-size: clamp(19px, 2.2vw, 25px); line-height: 1.4; font-weight: 500; } .quote__attr { margin-top: 12px; font-size: 14px; color: var(--ink-lo); } /* ---------- 03 · how it works ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; list-style: none; } .step { padding: 20px; display: flex; gap: 14px; align-items: flex-start; } .step__num { flex: none; padding-top: 3px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--a-300); } .step h3 { font-size: 17px; margin-bottom: 5px; } .step p { font-size: 14.5px; line-height: 1.55; } /* ---------- 04 · pricing ---------- */ /* 5 pakettia samalla rivillä (Custom mukaan lukien) — Teron ohje 6.8.: Custom ei saa olla erikoiskohdeltu koko rivin levyinen. */ .prices { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px; } .price { padding: 20px 17px; display: flex; flex-direction: column; position: relative; } .price--featured { border-color: rgba(var(--a-beam), 0.45); box-shadow: inset 0 1px 0 var(--glass-lip), 0 0 0 1px rgba(var(--a-beam), 0.18); } .price__badge { position: absolute; top: -9px; left: 20px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--a-600); color: var(--btn-ink); padding: 4px 9px; border-radius: 5px; } .price__name { font-size: 17px; font-weight: 700; color: var(--ink-hi); } .price__usd { font-size: 40px; font-weight: 800; color: var(--ink-hi); line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; } .price__eur { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-lo); margin-top: 2px; } .price__list { list-style: none; margin: 16px 0 20px; display: grid; gap: 8px; } .price__list li { font-size: 14px; line-height: 1.45; padding-left: 20px; position: relative; } .price__list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--a-beam), 0.55); } .price .btn { margin-top: auto; } /* Custom on tavallinen kortti muiden rinnalla (Teron ohje 6.8.): sama muoto ja koko, vain sisältö eroaa — ei hintalukua. */ .price__usd--quote { font-size: 26px; letter-spacing: -0.01em; } /* ---------- lisähinnat ---------- */ .addons { margin-top: 16px; padding: clamp(20px, 2.6vw, 28px); } .addons__title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-lo); margin-bottom: 16px; } .addons__list { display: grid; } .addons__row { display: flex; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair); } .addons__row:last-child { border-bottom: 0; } .addons__row dt { flex: 1; font-size: 15px; color: var(--ink-hi); font-weight: 600; } .addons__row dt span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-lo); } .addons__row dd { flex: none; text-align: right; font-size: 16px; font-weight: 700; color: var(--ink-hi); font-variant-numeric: tabular-nums; } .addons__row dd em { display: block; font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.05em; color: var(--ink-lo); margin-top: 2px; } .addons__note { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--ink-lo); } .pricenote { margin-top: 16px; padding: 18px 20px; font-size: 14px; } .pricenote p + p { margin-top: 8px; } .pricenote sup { color: var(--a-300); } /* ---------- 05 · FAQ (ennen Contactia — päätös 5.8.2026) ---------- */ .faq { margin-top: 22px; display: grid; gap: 10px; } .faq__item { overflow: hidden; } .faq__item summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; gap: 14px; color: var(--ink-hi); font-size: 16px; font-weight: 600; transition: background-color .18s ease; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { background: rgba(255,255,255,0.03); } .faq__item summary::after { content: ''; margin-left: auto; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--ink-lo); border-bottom: 2px solid var(--ink-lo); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; } .faq__item[open] summary::after { transform: rotate(-135deg) translateY(-3px); } .faq__num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--a-300); flex: none; } .faq__a { padding: 0 20px 18px 54px; font-size: 15px; line-height: 1.6; } .faq__a p + p { margin-top: 9px; } /* ---------- 06 · contact ---------- */ .contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 16px; margin-top: 22px; } .aside { padding: 24px; } .aside__list { display: grid; gap: 18px; } .aside__list dt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-lo); margin-bottom: 4px; } .aside__list dd { font-size: 14.5px; line-height: 1.55; } .form { padding: 24px; } .form__row { margin-bottom: 15px; } .form__row label { display: block; margin-bottom: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-lo); } .form__row input, .form__row textarea { width: 100%; background: rgba(0,0,0,0.32); border: 1px solid var(--glass-border); border-radius: var(--r-sm); padding: 12px 14px; font-size: 15px; color: var(--ink-hi); transition: border-color .18s ease, background-color .18s ease; resize: vertical; } .form__row input::placeholder, .form__row textarea::placeholder { color: #7A7268; } .form__row input:focus, .form__row textarea:focus { outline: none; border-color: var(--a-300); background: rgba(0,0,0,0.42); } .form__note { margin-top: 11px; font-size: 13px; color: var(--ink-lo); line-height: 1.5; } /* ========================================================================== FOOTER ========================================================================== */ .footer { padding: clamp(40px, 6vw, 70px) 0 46px; } .footer__plate { padding: clamp(24px, 3vw, 34px); } .footer__top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--hair); } .footer__brand { display: flex; align-items: center; gap: 12px; } .footer__mark { width: 34px; height: 34px; color: var(--ink-hi); flex: none; } .footer__mark svg { width: 100%; height: 100%; } .footer__name { color: var(--ink-hi); font-weight: 700; font-size: 16px; letter-spacing: 0.02em; } .footer__tagline { font-size: 13.5px; color: var(--ink-lo); } .legal { padding: 20px 0; border-bottom: 1px solid var(--hair); } .legal__title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-lo); margin-bottom: 12px; } .legal__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 26px; font-size: 13.5px; line-height: 1.55; } .legal__grid b { color: var(--ink-hi); font-weight: 600; display: block; } .footer__fine { font-size: 12.5px; line-height: 1.6; color: var(--ink-lo); padding-top: 18px; } .footer__fine + .footer__fine { padding-top: 8px; } /* ========================================================================== LIGHTBOX ========================================================================== */ .lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(8,6,4,0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 4vh 4vw; } .lightbox[hidden] { display: none; } .lightbox__panel { position: relative; max-width: min(420px, 92vw); width: 100%; } .lightbox__video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--r-md); background: #000; border: 1px solid var(--glass-border); } .lightbox__close { position: absolute; top: -14px; right: -14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: rgba(15,13,10,0.92); border: 1px solid rgba(255,255,255,0.22); color: var(--ink-hi); cursor: pointer; display: grid; place-items: center; transition: background-color .18s, transform .18s; } .lightbox__close:hover { background: var(--a-600); color: var(--btn-ink); transform: scale(1.06); } .lightbox__close svg { width: 20px; height: 20px; } .lightbox__meta { margin-top: 12px; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-lo); } body.lightbox-open { overflow: hidden; } /* ========================================================================== TOAST ========================================================================== */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); z-index: 95; background: rgba(15,13,10,0.94); border: 1px solid var(--glass-border); color: var(--ink-hi); padding: 12px 20px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* ========================================================================== RESPONSIIVISUUS ========================================================================== */ /* 5 korttia mahtuu vain leveälle näytölle — sitten 3 / 2 / 1 */ @media (max-width: 1180px) { .prices { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } .contact { grid-template-columns: 1fr; } } @media (max-width: 860px) { .prices { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .nav { display: none; } .burger { display: block; } .topbar__end .btn { display: none; } .cards3 { grid-template-columns: 1fr; } /* sama kaava mobiilissa (--section-pad-y on pienempi siellä) */ .hero-stage { height: calc(200vh + var(--section-pad-y)); } .flow { margin-top: calc(-100vh - var(--section-pad-y)); } .hero { padding-top: 84px; } .hero__facts { gap: 20px; } .aitile { flex-direction: column; align-items: flex-start; gap: 14px; } .aitile__mark { flex: none; width: min(240px, 70vw); } /* kosketuslaitteilla pyyhkäisy on luontevampi kuin nappi */ .reelnav { display: none; } .reel { gap: 20px; } /* sirpaleet pois: mobiilissa hero on tiivis eikä tyhjää tilaa ole, ja 3 ylimääräistä backdrop-pintaa on turha kuorma puhelimelle */ .shards { display: none; } } @media (max-width: 560px) { body { font-size: 16px; } .prices, .steps { grid-template-columns: 1fr; } .addons__row { flex-direction: column; gap: 4px; } .addons__row dd { text-align: left; } .hero__title { max-width: 100%; } .lightbox__close { top: 8px; right: 8px; } .faq__a { padding-left: 20px; } } /* ========================================================================== SAAVUTETTAVUUS — liikkeen vähennys (spec k. 20) ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .vcard:hover { transform: none; } /* sirpaleet jäävät paikalleen perusasentoonsa, eivät katoa */ .shard, .shard::before { animation: none; } } @media print { .field, .topbar, .lightbox, .toast, .reel { display: none; } body { background: #fff; color: #000; } .glass, .plate, .quiet { background: none; border: 1px solid #ccc; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }