/* ========================================================================== afx-2026.css — jaettu tyylikerros, AtlasForgeX Luotu 2026-07-29. Tarkoitus: yhtenäistää etusivun (19.7. redesign) ja loput ~3300 sivua yhdeksi ilmeeksi, ja tuoda lisää ilmavuutta. Ladataan VIIMEISENÄ :ssä, jotta se voittaa sivukohtaisen inline-CSS:n samalla spesifisyydellä. Palautus: poista tai tyhjennä tämä tiedosto. Ei muuta HTML:ää rikki. ========================================================================== */ /* -------------------------------------------------------------------------- 1. YKSI PALETTI Vanha järjestelmä käytti kolmea korostusväriä (kulta, sininen, violetti). Ne mapataan yhteen. Semanttiset värit (success/danger) jäävät. -------------------------------------------------------------------------- */ :root { --bg: #08090C; --bg-soft: #0C0E13; --bg2: #0C0E13; --text-primary: #F5F6F8; --text-secondary:#9AA3B2; --text-muted: #646D7C; --ink: #F5F6F8; --soft: #9AA3B2; --faint: #646D7C; --divider: #191D25; --divider-strong: #242A35; --line: #191D25; --line2: #242A35; --border: #191D25; /* Yksi korostus, ei kolmea. 29.7. vaihdettu sahkosiniseksi (#00D8FF). Perustelu: data liikkuu sahkolla, ja vihrea luki "eko" eika "virta". Taustakuvat on varjatty samaan savyyn savynsiirrolla, joten kuva ja korostus ovat samaa maailmaa. Kontrasti tummaa taustaa vasten 11.6:1. */ --accent: #00D8FF; --signal: #00D8FF; --gold: #00D8FF; --gold-bright: #7FE9FF; --blue: #00D8FF; --blue-dim: #06303B; --green: #00D8FF; --success: #00D8FF; --danger: #FF5F57; /* Kirkkaan sahkosinisen paalla VALKOINEN teksti antaa vain 1.7:1, eli se on lukukelvoton. Tumma teksti antaa 11.6:1. Siksi napin teksti on tumma aina kun tausta on korostusvari. Ala vaihda tata valkoiseksi. */ --on-accent: #08090C; /* ilmavuusasteikko */ --air-s: clamp(40px, 5vw, 64px); --air-m: clamp(64px, 8vw, 104px); --air-l: clamp(88px, 11vw, 140px); --measure: 62ch; } html { background: var(--bg); } body { background: var(--bg); color: var(--text-primary); } /* -------------------------------------------------------------------------- 2. ILMAVUUS HAIV:in tärkein tekijä. Vanhat sivut ahtaita: 52px ja 72px. -------------------------------------------------------------------------- */ section { padding-top: var(--air-m); padding-bottom: var(--air-m); } section:first-of-type { padding-top: var(--air-s); } /* Etusivu saa enemmän ilmaa kuin tiheät SEO-sivut: siellä ilmavuus myy, täällä se vain työntäisi sisällön alas. */ body.afx-home section { padding-top: var(--air-l); padding-bottom: var(--air-l); } main > section + section { border-top: 1px solid var(--divider); } /* -------------------------------------------------------------------------- 3. TYPOGRAFIA Vähemmän kokoja, isommat otsikot, rauhallisempi leipäteksti. -------------------------------------------------------------------------- */ body { line-height: 1.6; } h1, h2, h3 { text-wrap: balance; letter-spacing: -.03em; } h1 { font-size: clamp(34px, 6.4vw, 62px); line-height: 1.03; } h2 { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.10; } h3 { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.25; letter-spacing: -.022em; } /* rivinpituus luettavaksi. Rajattu mainiin: navi, footer ja taulukot eivät saa kaventua. */ main p, main li { max-width: var(--measure); } main td p, main th p, main figcaption p { max-width: none; } main p + p { margin-top: .85em; } /* otsikon jälkeinen ingressi erottuu ilman lisäluokkia */ main h1 + p, main h2 + p { color: var(--text-secondary); font-size: clamp(16.5px, 1.4vw, 19px); } /* -------------------------------------------------------------------------- 4. EI KORTTIRUUDUKOITA Kortti + varjo + pyöristys on geneerisin mahdollinen ratkaisu. Vanhoilla sivuilla on paljon korttikuvioita: litistetään hiusviivoiksi. -------------------------------------------------------------------------- */ /* Vain .card. .box jätetään rauhaan: sitä on 1614 divillä ja siellä tausta on usein merkitsevä (nostot, varoitukset), joten sen litistys olisi arvaus. */ main div.card, main a.card, main article.card { background: transparent; box-shadow: none; border-radius: 0; border: 0; border-top: 1px solid var(--divider); padding: 26px 0 0; } /* -------------------------------------------------------------------------- 5. NAPIT Isommat kosketusalueet, kaksi selkeää tasoa. -------------------------------------------------------------------------- */ /* Elementtitasolla: .cta on 80 divilla ja 5 sectionilla, ja niiden muuttaminen inline-block-napiksi rikkoisi kokonaisia lohkoja. */ a.btn, button.btn, a.button, a.cta, a.btn-cta, a.btn-primary { display: inline-block; padding: 15px 28px; border-radius: 4px; font-size: 15.5px; font-weight: 640; line-height: 1.2; text-decoration: none; background: var(--accent); color: var(--on-accent); border: 0; transition: background .18s ease; } a.btn:hover, button.btn:hover, a.button:hover, a.cta:hover, a.btn-cta:hover, a.btn-primary:hover { background: #33E2FF; color: var(--on-accent); } /* Navin pikanappi on eri luokka (.mini) ja sen varit tulevat inline-CSS:sta. */ body.afx-home .mini { background: var(--accent); color: var(--on-accent); } a.btn2, a.btn-secondary, a.btn-ghost { display: inline-block; padding: 15px 24px; border-radius: 4px; font-size: 15px; font-weight: 560; line-height: 1.2; text-decoration: none; background: transparent; color: var(--text-secondary); border: 1px solid var(--divider-strong); transition: border-color .18s ease, color .18s ease; } a.btn2:hover, a.btn-secondary:hover, a.btn-ghost:hover { border-color: var(--text-secondary); color: var(--text-primary); } /* -------------------------------------------------------------------------- 6. TAULUKOT JA VIIVAT -------------------------------------------------------------------------- */ table { border-collapse: collapse; width: 100%; } th, td { border-bottom: 1px solid var(--divider); padding: 13px 14px 13px 0; text-align: left; } th { font-weight: 600; color: var(--text-secondary); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } td { font-size: 15px; } hr { border: 0; border-top: 1px solid var(--divider); margin: var(--air-s) 0; } /* -------------------------------------------------------------------------- 7. SAAVUTETTAVUUS -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- 8. LEVEYS -------------------------------------------------------------------------- */ .wrap, .container, .inner, .content { max-width: 1160px; } /* -------------------------------------------------------------------------- 8b. FOOTERIN LINKIT (etusivu) 29.7.: linkit oli liimattu kolmena divina .wrapin ULKOPUOLELLE, joten ne eivat olleet linjassa muun sivun kanssa, ja niilla oli opacity:.75 jo valmiiksi haalean mono-varin paalla. Kaytannossa niita ei nahnyt. Lisaksi englanti ja suomi nakyivat aina yhta aikaa. Nyt: yksi lohko .wrapin sisalla, luettava kontrasti, ja kieli seuraa kielivalitsinta. setLang() asettaa html[lang], joten tama hoituu pelkalla CSS:lla ilman JS-muutoksia. -------------------------------------------------------------------------- */ .foot-links { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--divider); } .foot-links-h { display: block; margin-bottom: 10px; font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); } .foot-links a { display: block; margin: 7px 0; font-family: inherit; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); text-decoration: none; } .foot-links a:hover { color: var(--accent); } @media (min-width: 700px) { .foot-links a { display: inline-block; margin: 4px 26px 4px 0; } } /* Kieliohjaus: naytetaan vain valitun kielen lohko, ei molempia sekaisin. */ .foot-links-fi { display: none; } html[lang="fi"] .foot-links-en { display: none; } html[lang="fi"] .foot-links-fi { display: block; } /* -------------------------------------------------------------------------- 9. TAUSTAKUVAT (etusivu) Kolme kaistaa Jessen mockupista, varjatty savynsiirrolla sahkosiniseksi (valkoiset ja tummat sailyvat, joten raketin liekin ydin pysyy kuumana). Toteutus pseudo-elementilla: ei HTML-muutoksia, joten kaannokset ja generaattori eivat riko mitaan, ja kuva on tayslevea vaikka sisalto on 1160px:n gridissa. Luettavuus on tassa se joka ratkaisee: kuva on himmea ja haipyy alaspain, jotta valkoinen teksti pysyy luettavana koko matkan. -------------------------------------------------------------------------- */ body.afx-home { position: relative; } body.afx-home::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: min(1000px, 100vh); /* KUVA ON POHJA. Ei himmennysta tassa kerroksessa lainkaan. 29.7. korjaus: aiemmin tama oli maskattu haipymaan jo 46 %:n kohdalla ja paalla oli raskas tummennus, jolloin kartasta nakyi vain rippeet. */ background: url("/images/bg-map-900.webp?v=2") center top / cover no-repeat; opacity: 1; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); } @media (min-width: 820px) { body.afx-home::before { background-image: url("/images/bg-map-1400.webp?v=2"); } } /* Kevyt tummennus VAIN otsikon taakse vasempaan laitaan. Oikea puoli jatetaan koskematta, jotta kartta nakyy sellaisenaan. */ body.afx-home::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: min(1000px, 100vh); pointer-events: none; z-index: 0; background: linear-gradient(to right, rgba(8,9,12,.70) 0%, rgba(8,9,12,.30) 38%, rgba(8,9,12,0) 62%); } /* Sisalto kuvan paalle. HUOM: header jatetaan koskematta. Silla on position:sticky ja z-index:40, ja niiden ylikirjoitus relative/1:lla lopettaisi ylapalkin kiinnipysymisen. */ body.afx-home > main, body.afx-home > footer { position: relative; z-index: 1; } /* 29.7.: TAMA oli se oikea syy siihen ettei kartta nakynyt. Hero-gridin oikea puoli on rekisteripaneeli jolla on umpinainen tausta (var(--bg2)), ja se peittaa tasmalleen sen kohdan jossa kartta on. Sama koski goldmine-widgetin laatikoita. Nyt ne ovat lapikuultavia, jolloin kuva jaa pohjalle ja sisalto on sen paalla. */ body.afx-home .panel { background: rgba(12, 14, 19, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .10); } body.afx-home .panel-top { border-bottom-color: rgba(255, 255, 255, .10); } body.afx-home .r { border-bottom-color: rgba(255, 255, 255, .08); } body.afx-home .gmw-card, body.afx-home .gmw-grid > div { background: rgba(12, 14, 19, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .10); } /* Kaista 2 (hiukkasaalto) ja kaista 3 (raketti) omiin osioihinsa. Kuva oikealle, tummennus vasemmalle, koska teksti on vasemmassa laidassa ja se on sama sommittelu kuin Jessen mockupissa. Osiojarjestys: 1 problem, 2 how, 3 local, 4 proof, 5 before, 6 end. */ body.afx-home main > section:nth-of-type(2), body.afx-home .end { background-repeat: no-repeat; background-size: cover; background-position: center right; } /* 2. osio "From registration to first call": hiukkasaalto */ body.afx-home main > section:nth-of-type(2) { background-image: linear-gradient(to right, rgba(8,9,12,.78) 0%, rgba(8,9,12,.32) 40%, rgba(8,9,12,0) 65%), url("/images/bg-wave-900.webp?v=2"); } /* Loppuosion CTA: raketti */ body.afx-home .end { background-image: linear-gradient(to right, rgba(8,9,12,.78) 0%, rgba(8,9,12,.32) 40%, rgba(8,9,12,0) 65%), url("/images/bg-rocket-900.webp?v=2"); } @media (min-width: 820px) { body.afx-home main > section:nth-of-type(2) { background-image: linear-gradient(to right, rgba(8,9,12,.78) 0%, rgba(8,9,12,.32) 40%, rgba(8,9,12,0) 65%), url("/images/bg-wave-1400.webp?v=2"); } body.afx-home .end { background-image: linear-gradient(to right, rgba(8,9,12,.78) 0%, rgba(8,9,12,.32) 40%, rgba(8,9,12,0) 65%), url("/images/bg-rocket-1400.webp?v=2"); } } /* Kontrastisuosituksen mukaan: jos kayttaja pyytaa enemman kontrastia, koristetaustat pois, teksti on tarkeampi kuin tunnelma. */ @media (prefers-contrast: more) { body.afx-home::before, body.afx-home::after { display: none; } body.afx-home main > section:nth-of-type(2), body.afx-home .end { background-image: none; background-color: var(--bg); } }