/* Shared chrome — header nav underline, logo sway, page entrance, the lyric marquee, the footer. Loaded by every page (koti + alasivut) together with transitions.js, joka hoitaa pehmeän ristihäivytyksen sivujen välillä. */ /* ---------- page transitions (cross-document View Transitions) ---------- */ /* Sivut on esikäännetty (ei selain-Babelia), joten uusi sivu renderöityy heti ensimaalauksessa. Niinpä selaimen natiivi cross-document View Transitions hoitaa siirtymän: header ja marquee pysyvät PAIKALLAAN (jaetut nimet → selain morphaa saman elementin sivulta toiselle), ja vain sisältö ristihäivyttyy. Tämä on se "Apple-app"-tuntu: kromi ei vilku, vain sisältö vaihtuu. Selaimissa joissa ei VT-tukea (vanhat) navigointi tapahtuu suorana — ei häivytystä, mutta nopea ja siisti (musta tausta, ei valkoista välähdystä). */ /* brändimustaksi, jottei siirtymän aikana vilahda valkoista selaincanvasia. Kriittinen sulavuudelle. */ html { background: var(--piaty-black, #0B0B0B); } /* ---------- SIVUN TAUSTA — JAETTU "STAGE" ---------- Aiempi "Me Rakastetaan KalPaa" -tekstivesileima (body::before, scarf-text.svg) on POISTETTU. Jokaisella sivulla on sama kiinteä (fixed) "stage" -taso, mutta PUNK-YLEISÖKUVA (.piaty-stage-photo) on VAIN ETUSIVULLA (koti). Alasivut käyttävät samaa stagea pelkällä verholla (veil) brändimustan päällä, jotta kromi pysyy läpinäkyvänä eikä punk-taustaa toisteta joka sivulla. Kromi (header, marquee, footer) on läpinäkyvä tämän päällä, joten tausta kulkee yhtenäisenä header- palkin JA lauluraidan läpi — jokaisen sivun header näyttää identtiseltä etusivun headerin kanssa, ja lauluraita on aidosti läpinäkyvä (ei mustaa palkkia). Stage on root-tasolla 0 ja kaikki sitä seuraavat sovellussisarukset tasolla 1 tai ylempänä. Näin tausta ei nojaa iOS-WebKitissä hauraaseen negatiivisen z-indexin fixed-kerrokseen. 100lvh kattaa myös mobiiliselaimen suurimman viewportin osoitepalkin muuttuessa; 100vh on fallback vanhemmille selaimille. */ .piaty-stage { position: fixed; top: 0; right: 0; left: 0; height: 100vh; height: 100lvh; z-index: 0; overflow: hidden; overflow: clip; background: var(--piaty-black); pointer-events: none; } /* Rootin sisältökerros. Sääntö on ennen komponenttien omia z-indexejä, joten header (2), ilmoituspalkki (3), BottomNav (60) ja modaalit säilyttävät omat korkeammat tasonsa; tavallinen main/footer saa turvallisen perustason 1. */ .piaty-stage ~ :where(*) { position: relative; z-index: 1; } .piaty-stage-photo { position: absolute; inset: 0; background-image: url('assets/punkstylebg2.webp'); background-size: cover; background-position: 33% 24%; filter: grayscale(1) brightness(.24) contrast(1.08); -webkit-user-select: none; user-select: none; pointer-events: none; } @media (max-width: 720px) { /* Mobiilille kevyempi kuva (~120 kt) + oma rajaus. */ .piaty-stage-photo { background-image: url('assets/punkstylebg2-m.webp'); background-position: 30% 22%; filter: grayscale(1) brightness(.24) contrast(1.07); } } .piaty-stage-veil { position: absolute; inset: 0; pointer-events: none; background: /* 1) keltainen hehku alhaalla keskellä (vain yläreuna hehkusta näkyy) */ radial-gradient(120% 56% at 50% 112%, rgba(var(--piaty-yellow-rgb), .2), transparent 56%), /* 2) keskelle tumma vinjetti (kontrasti sisällön takana) */ radial-gradient(82% 54% at 50% 38%, transparent 30%, rgba(4,4,4,.58)), /* 3) pystysuora tumma verho ylä- ja alareunaan */ linear-gradient(180deg, rgba(4,4,4,.66), rgba(4,4,4,.5) 42%, rgba(4,4,4,.68)); } /* PALLOT — hyvin matalan alfan tavallinen kompositointi. Fixed-stage ei käytä mix-blend-modea, jotta sen maalaus ei kulje iOS:n blend/compositor-polun läpi. */ .piaty-stage-veil::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.7px); background-size: 7px 7px; opacity: .24; } /* ROUHEUS — filmirae / hiekkapaperikohina (feTurbulence). Aiemman overlay- blendin sijaan hyvin matala normaali alfa säilyttää tekstuurin tummentamatta tai rasteroimatta koko fixed-tasoa erillisen blend-operaation kautta. */ .piaty-stage-veil::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'160'%3E%3Cfilter%20id%3D's'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23s)'%2F%3E%3C%2Fsvg%3E"); background-size: 140px 140px; opacity: .055; } /* Sivut joilla on stage: kromi läpinäkyväksi jotta tausta kulkee yhtenäisesti. (Etusivulla koti.html asettaa lisäksi bodyn flex-pinon lähtölaskennan keskittämiseen — se on sivukohtaista, ei tässä.) */ body:has(.piaty-stage) { background: var(--piaty-black); } body:has(.piaty-stage) .piaty-topbar { background: transparent; } /* Cross-document View Transition pidetään tarkoituksella pois käytöstä. Sen aikana transitioniin osallistuva DOM ei vastaa hit-testaukseen, joten animaation aikana tehty seuraava klikki katoaa. Natiivit linkit + cache- esilämmitys tekevät sivuvaihdosta nopean ilman inputia lukitsevaa kerrosta; sisältökomponenteilla on omat tavalliset CSS-sisääntuloanimaationsa. */ @view-transition { navigation: none; } .piaty-vt-header { position: relative; z-index: 2; } .piaty-vt-marquee { position: relative; z-index: 1; } /* ---------- tussiviiva (masthead → sisältö -reuna) ---------- Designin avainele: mastheadin (header + lauluraita) ja sisällön väliin EI tule tummaa erotinpalkkia vaan yksi yhtenäinen KÄSIN PIIRRETYN NÄKÖINEN KELTAINEN "tussiviiva" — aaltoileva SVG-polku, joka venytetään koko leveydelle. Jaettu marquee-kääreen ::after-elementtinä, joten sama viiva ilmestyy joka sivulle automaattisesti. Istuu marqueen alareunaan (straddle). Korvaa lauluraidan aiemman halftone-pistereunan. */ .piaty-vt-marquee::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 12px; z-index: 6; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201180%2012'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2C6.0%20L24.1%2C7.8%20L48.2%2C8.0%20L72.2%2C4.8%20L96.3%2C4.6%20L120.4%2C6.0%20L144.5%2C7.7%20L168.6%2C6.4%20L192.7%2C4.2%20L216.7%2C4.9%20L240.8%2C5.8%20L264.9%2C7.2%20L289.0%2C7.9%20L313.1%2C4.9%20L337.1%2C4.7%20L361.2%2C5.0%20L385.3%2C8.2%20L409.4%2C8.0%20L433.5%2C4.9%20L457.6%2C3.4%20L481.6%2C5.4%20L505.7%2C7.3%20L529.8%2C7.8%20L553.9%2C5.8%20L578.0%2C4.5%20L602.0%2C5.6%20L626.1%2C8.6%20L650.2%2C7.8%20L674.3%2C6.0%20L698.4%2C4.4%20L722.4%2C4.9%20L746.5%2C8.0%20L770.6%2C8.4%20L794.7%2C5.6%20L818.8%2C4.5%20L842.9%2C6.0%20L866.9%2C8.4%20L891.0%2C8.5%20L915.1%2C5.6%20L939.2%2C4.5%20L963.3%2C5.4%20L987.3%2C7.0%20L1011.4%2C6.9%20L1035.5%2C5.9%20L1059.6%2C4.0%20L1083.7%2C4.8%20L1107.8%2C7.5%20L1131.8%2C7.3%20L1155.9%2C5.3%20L1180.0%2C6.0%20'%20fill%3D'none'%20stroke%3D'%23FFE701'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E"); /* Kiinteä 1180px laatta venytyksen (100% 100%) sijaan: aallontaajuus pysyy samana kaikilla näyttöleveyksillä — leveällä näytöllä viiva ei enää loivene puoliksi eikä kapealla tihenny. Polun päät on tasattu samaan y-arvoon (6.0), joten toistosauma ei erotu. */ background-size: 1180px 12px; background-repeat: repeat-x; } /* ---------- VIERASMATKAN ILMOITUSPALKKI (etusivu) ---------- Ohut keltainen "teippilappu" aivan sivun ylälaidassa: koko palkki on linkki ilmoittautumislomakkeelle. Renderöityy vain kun tulevalla vierasmatkalla on Forms-linkki (koti.app.jsx: TripBanner / games.js: PIATY_REISSUT[iso].form). Musta marker-teksti keltapohjalla, alla painetun oloinen musta hiusviiva; hienovarainen keltainen "auki"-hehku vuotaa palkin alle (kevyt sykintä). "— [hinta] Auki! →" pysyy aina yhdellä katkeamattomalla rivillä; kapealla näytöllä kicker piiloutuu ja kohde/pvm jää näkyviin. */ .piaty-trip-banner { display: block; position: relative; z-index: 3; /* headerin (2) yllä, sisällön (root-fade) alla */ background: var(--piaty-yellow); color: var(--piaty-black); text-decoration: none; border-bottom: 2px solid var(--piaty-black); padding: var(--s-1_5) var(--s-4); box-shadow: 0 2px 14px -6px rgba(var(--piaty-yellow-rgb), .45); animation: piaty-trip-glow 3.2s ease-in-out infinite; } /* iOS-standalone: reissupalkki on ylin elementti ja jäi ilman turva-alue- pehmustetta statuspalkin alle. Työnnetään palkki statuspalkin ALTA (margin, ei padding) — statuspalkin kaista pysyy tummana (musta topbar-pohja / stage näkyy takaa), joten valkoinen kello/akku pysyy luettavana. Keltaisen palkin venyttäminen statuspalkin taakse antaisi valkoinen-keltaisella heikon kontrastin. Musta scrim varmistaa tumman kaistan riippumatta taustasta. */ .piaty-trip-banner { margin-top: env(safe-area-inset-top, 0px); } body:has(.piaty-trip-banner)::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--piaty-black); z-index: 60; /* topbarin (50) ja palkin (3) yllä */ pointer-events: none; } /* Painettu paperi -rae keltapinnalle (multiply, matala opacity). */ .piaty-trip-banner::before { content: ''; position: absolute; inset: 0; background-image: var(--piaty-grain-url); background-size: 200px 200px; mix-blend-mode: multiply; opacity: .12; pointer-events: none; } .piaty-trip-banner:hover, .piaty-trip-banner:focus-visible { background: var(--piaty-yellow-deep); } .piaty-trip-banner:focus-visible { outline: 3px solid var(--piaty-black); outline-offset: -5px; } .piaty-trip-banner-inner { display: flex; align-items: center; justify-content: center; gap: var(--s-2); max-width: 1180px; margin: 0 auto; font-family: var(--font-tag); font-size: clamp(.72rem, 2.5vw, .92rem); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.15; } /* Musta CTA-laatta ("ILMOITTAUDU REISSUUN!") keltapohjalla — sama työpöydällä ja mobiilissa. Ei kutistu; pysyy aina ehjänä ankkurina. */ .piaty-trip-banner-chip { display: inline-flex; align-items: center; flex: none; background: var(--piaty-black); color: var(--piaty-yellow); font-weight: 800; padding: 3px var(--s-2); border-radius: var(--r-md); white-space: nowrap; } /* Häntä: kohde + pvm + nuoli yhtenä ryhmänä. Kohde/pvm kutistuu ja katkeaa hallitusti (ellipsis), nuoli ei kutistu. */ .piaty-trip-banner-tail { display: inline-flex; align-items: baseline; gap: var(--s-1_5); min-width: 0; } .piaty-trip-banner-dest { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .piaty-trip-banner-dest b { font-weight: 800; } .piaty-trip-banner-arrow { font-weight: 800; flex: none; transition: transform .18s ease; } .piaty-trip-banner:hover .piaty-trip-banner-arrow, .piaty-trip-banner:focus-visible .piaty-trip-banner-arrow { transform: translateX(3px); } @keyframes piaty-trip-glow { 0%, 100% { box-shadow: 0 2px 14px -6px rgba(var(--piaty-yellow-rgb), .40); } 50% { box-shadow: 0 3px 22px -4px rgba(var(--piaty-yellow-rgb), .72); } } /* LOPPUUNMYYTY: punainen palkki (olemassa oleva --piaty-red), valkoinen teksti. Ei linkki (div) → ei hover/arrow, ei glow-sykettä. Chip kääntyy valkoiseksi laataksi punaisella tekstillä (sama kontrastilogiikka kuin keltapalkissa: laatta on taustan komplementti). */ .piaty-trip-banner[data-soldout="true"] { background: var(--piaty-red); color: var(--piaty-bone); border-bottom-color: var(--piaty-black); box-shadow: 0 2px 14px -6px rgba(var(--piaty-red-rgb), .55); animation: none; } .piaty-trip-banner[data-soldout="true"] .piaty-trip-banner-chip { background: var(--piaty-bone); color: var(--piaty-red); } /* Kapea näyttö: tiiviimpi padding, ja jos laatta + tiedot eivät mahdu yhdelle riville, kohde+pvm+nuoli kääntyvät laatan alle (nappi säilyy ehjänä). */ @media (max-width: 560px) { .piaty-trip-banner { padding: var(--s-1_5) var(--s-2_5); } .piaty-trip-banner-inner { flex-wrap: wrap; align-items: center; row-gap: var(--s-1); } } /* ============================================================ APPLE-TASON VIIMEISTELY — jaetut perusasetukset kaikille sivuille ============================================================ */ /* 1) Liiketoive: nollaa kaikki pitkät/toistuvat animaatiot ja siirtymät (logo-heilunta, marquee, fade-up, modaalien sisääntulot ym.) niille jotka ovat valinneet "vähennä liikettä". Tunnettu, turvallinen kaavin. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 2) EI globaalia scroll-behavior: smooth -laastaria. Koko sivun pehmeä vieritys teki jokaisesta ohjelmallisesta scrollista ja ankkurihypystä hitaan liu'un (laulua vaihtaessa sivu nykäisi ylös). Sulavuus hoidetaan nyt paikallisesti: sisältö vaihtuu paikallaan View Transitionilla, ja scrollataan vain silloin kun se on tarkoituksellista — reduced-motion huomioiden. */ /* 3) Poista mobiilin harmaa "tap flash" kaikilta interaktiivisilta — tilalle omat :active-tilat. Tuntuu natiivilta. */ a, button, select, summary, [role="button"], [role="slider"], [tabindex] { -webkit-tap-highlight-color: transparent; } /* 4) Yhtenäinen, brändätty näppäimistöfokus KAIKILLE fokusoitaville elementeille, ellei elementillä ole omaa (oma menee edelle spesifisyydellä). Tämä on iso saavutettavuus- ja viimeistelyloikka. */ a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [role="slider"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--piaty-yellow); outline-offset: 2px; border-radius: 2px; } /* Älä näytä fokusrengasta hiiriklikkauksesta (vain :focus-visible). */ a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } /* ---------- header (desktop + shared) ---------- */ .piaty-topbar { position: sticky; top: 0; z-index: 50; background: var(--piaty-black); padding-top: env(safe-area-inset-top, 0px); } .piaty-data-status { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px)); border-top: 1px solid rgba(255, 231, 1, .35); background: #2a2200; color: #fff3a6; font-size: 13px; font-weight: 700; line-height: 1.35; text-align: left; } .piaty-data-status button { min-height: 44px; flex: 0 0 auto; border: 2px solid currentColor; border-radius: 2px; padding: 0 12px; background: transparent; color: var(--piaty-yellow); font: inherit; cursor: pointer; } .piaty-data-status.is-loading { border-top-color: rgba(255, 255, 255, .16); background: #171717; color: #c9c9c2; font-weight: 600; } @media (max-width: 540px) { .piaty-data-status { align-items: flex-start; font-size: 12px; } } /* React-boottiketjun staattinen varanäkymä. Onnistunut createRoot korvaa solmun synkronisesti; jos yksikin defer-resurssi rikkoutuu, sisältö tulee näkyviin lyhyen viiveen jälkeen eikä sivu jää tyhjäksi. */ .piaty-boot-fallback { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: grid; place-content: center; gap: 14px; padding: 32px max(22px, env(safe-area-inset-left, 0px)); background: var(--piaty-black); color: var(--piaty-bone); text-align: center; opacity: 0; animation: piaty-boot-reveal 0s 2s forwards; } #root:not(:empty) + .piaty-boot-fallback { display: none; animation: none; } .piaty-boot-fallback strong { color: var(--piaty-yellow); font: 700 14px/1 var(--font-tag); letter-spacing: .18em; } .piaty-boot-fallback h1 { margin: 0; font: 700 clamp(28px, 8vw, 48px)/1 var(--font-display); text-transform: uppercase; } .piaty-boot-fallback p { max-width: 38rem; margin: 0; color: #c9c9c2; line-height: 1.55; } .piaty-boot-fallback button { justify-self: center; min-height: 48px; margin-top: 6px; border: 2px solid var(--piaty-yellow); border-radius: 2px; padding: 0 18px; background: var(--piaty-yellow); color: var(--piaty-black); font: 700 14px/1 var(--font-tag); text-transform: uppercase; cursor: pointer; } .piaty-noscript { margin: 0; padding: 12px 16px; background: #2a2200; color: #fff3a6; text-align: center; } @keyframes piaty-boot-reveal { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .piaty-boot-fallback { animation-delay: .5s; } } /* ---------- banner scarf — Veljmiesten OIKEA huivi VINOON, pienemmälle, punkisti -- Aito valokopioitu huivikuva (assets/me-rakastetaan-kalpaa-huivi.webp) släpätään DIAGONAALISTI logon taakse, kuin teipattu / hihnasta heitetty kannattajahuivi. z-index:-1 jättää sen logon ja navin TAAKSE (topbar sticky+z-index:50 → oma pinoutuskonteksti, joten -1 jää tämän sisään: videon päälle mutta sisällön alle). Näkyy JOKA sivulla: etusivulla läpinäkyvän topbarin läpi (videon päällä), sisäsivuilla mustan topbar-pohjan päällä (himmeä harmaa huivitekstuuri). Reuna- feather (mask) häivyttää valokuvan suorat reunat joka laidalta, joten huivi sulaa taustaan riippumatta sivun pohjasta; --scarf-tilt säätää kallistusta, width kokoa. */ .piaty-banner-scarf { position: absolute; inset: 0; /* täytä koko topbar-kaista; reunat rajaavat */ z-index: -1; overflow: hidden; /* yli-iso, vino kuva rajautuu bannerin reunoista */ pointer-events: none; -webkit-user-select: none; user-select: none; /* Polishaus: pehmeä feather JOKA laidalta (pysty + vaaka) → ei kovaa rajaus- viivaa mihinkään reunaan, vaan huivi häipyy bannerin reunoihin (kuten havainnekuvassa). Kahden gradientin leikkaus (mask-composite: intersect) pyöristää myös sivut, jotta ruudun reunan kova leikkaus pehmenee — punkimpi, teipatun/revityn huivin häivytys joka sivulla. */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 74%, transparent 100%), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 74%, transparent 100%), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); -webkit-mask-composite: source-in; /* legacy WebKit/Safari */ mask-composite: intersect; /* standardi */ } .piaty-banner-scarf img { position: absolute; left: 50%; top: 50%; width: var(--scarf-size, 158%); /* yli-iso → teksti suureksi, sivut rajautuvat */ height: auto; /* Loiva viistous (nousu oikealle) kuten havainnekuvassa. */ transform: translate(-50%, -50%) rotate(var(--scarf-tilt, -7deg)); } /* MONO — mustavalko valokopio, hillitty tumma taustakerros (kuten havainnekuvassa). */ .piaty-banner-scarf--mono { opacity: .24; } .piaty-banner-scarf--mono img { filter: grayscale(1) contrast(1.12) brightness(1.03); } /* GOLD — kultaduotone (varalla): kultalevy täyttää kaistan, huivi multiply-blendillä. */ .piaty-banner-scarf--gold { background: var(--piaty-yellow); opacity: .20; } .piaty-banner-scarf--gold img { mix-blend-mode: multiply; filter: contrast(1.08); } /* PHOTO — alasivun header-palkin tausta: rouhea mustavalko yleisökuva (punk-bg) himmennettynä + tumma fade-verho logon taakse. Rajaus, käsittely (grayscale/ brightness/contrast) ja verho on YHTENÄISTETTY etusivun .piaty-stage-photon + .piaty-stage-veilin kanssa (koti.html), jotta jokaisen sivun header näyttää identtiseltä etusivun headerin kanssa. Kuvan oma reuna-mask pois; häivytys hoidetaan ::after-gradienteilla (keskivinjetti + pystyverho). */ .piaty-banner-scarf--photo { -webkit-mask-image: none; mask-image: none; background-image: url('assets/punk-bg.webp'); background-size: cover; background-position: 33% 24%; filter: grayscale(1) brightness(.24) contrast(1.08); opacity: 1; } .piaty-banner-scarf--photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(82% 54% at 50% 38%, transparent 30%, rgba(4,4,4,.58)), linear-gradient(180deg, rgba(4,4,4,.66), rgba(4,4,4,.5) 42%, rgba(4,4,4,.68)); } @media (max-width: 720px) { /* Mobiilissa kapeampi kaista → kasvata yli-skaalausta ettei näy vain pari kirjainta. */ .piaty-banner-scarf { --scarf-size: 240%; } /* Mobiilille kevyempi kuva (sama rajaus kuin etusivun mobiilistage). */ .piaty-banner-scarf--photo { background-image: url('assets/punk-bg-m.webp'); background-position: 30% 22%; } } /* HEADER-TEKSTISEINÄ KAIKILLA SIVUILLA — himmeä keltainen "me rakastetaan kalpaa" -viistoteksti. Toteutettu OTSIKKOPALKIN (.piaty-topbar) ::before-kerroksena, EI kiinteän stagen päälle: stage on viewportiin ankkuroitu, joten sen kautta teksti "valuisi" sisällön päälle sivua vieritettäessä (näin kävi etusivun aiemmalle .piaty-stage-textwallille — poistettu). Topbar taas kulkee headerin mukana → teksti on aidosti osa headeria eikä vuoda marqueen rajan yli. overflow:hidden rajaa yli-ison, kierretyn kerroksen palkkiin; maski häivyttää alaspäin ennen marqueeta; z-index:-1 pitää tekstin logon ja navin alla mutta palkin taustan päällä. */ body:has(.piaty-stage) .piaty-topbar { overflow: hidden; } body:has(.piaty-stage) .piaty-topbar::before { content: ''; position: absolute; top: -90px; bottom: -90px; left: -6%; right: -6%; z-index: -1; pointer-events: none; background-image: url('assets/me-rakastetaan-kalpaa-keltainen.svg'); background-repeat: repeat; background-size: clamp(430px, 106vw, 760px) auto; transform: rotate(-8deg); opacity: .4; /* Yli-iso (±90px) kattaa kallistuksen; maski (suhteessa koko ::beforeen) pitää palkin yläosan täytenä ja häivyttää nollaan palkin alaosassa. */ -webkit-mask-image: linear-gradient(180deg, #000 0, #000 24%, transparent 72%); mask-image: linear-gradient(180deg, #000 0, #000 24%, transparent 72%); } /* ============================================================ JAETTU SHEET-JÄRJESTELMÄ — kaikkien modaalien yhteinen perusta. Keskitetty overlay + vaalea bone-levy (notice, jäsenedut, reissu- ilmoittautuminen, posterin lightbox). Tiedote-modaali alempana on oma keltainen "poster"-varianttinsa. Sivukohtaiset luokat tuovat vain mitat (esim. .piaty-reissu-sheet reissut.css:ssä). ============================================================ */ .piaty-notice-overlay, .piaty-reissu-overlay, .piaty-poster-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: var(--s-4_5); overscroll-behavior: contain; animation: piaty-notice-fade 180ms ease-out; } /* Lightbox kaiken päällä, tummempi tausta ja väljempi marginaali. */ .piaty-poster-overlay { z-index: 1100; background: rgba(0, 0, 0, .86); padding: clamp(var(--s-4), 4vw, var(--s-7)); } /* Suurennettu reissuposteri: A4 pysty (1 / 1.414), mahtuu sekä leveyteen että korkeuteen; terävä musta reuna + iso punainen riso-varjo. */ .piaty-poster-frame { position: relative; display: block; width: min(86vw, calc(86vh / 1.414)); max-width: 620px; } .piaty-poster-full { display: block; width: 100%; aspect-ratio: 1 / 1.414; object-fit: cover; border: 2px solid var(--piaty-black); background: #100E08; box-shadow: var(--shadow-riso-4); } @keyframes piaty-notice-fade { from { opacity: 0; } to { opacity: 1; } } .piaty-notice-sheet, .piaty-reissu-sheet { position: relative; box-sizing: border-box; background: var(--piaty-bone, #f5f1e6); color: var(--piaty-black); border: 2px solid var(--piaty-black); box-shadow: var(--shadow-riso-4); } .piaty-notice-sheet { max-width: 520px; width: 100%; padding: var(--s-5_5) var(--s-5) var(--s-5); font-family: var(--font-body, system-ui, sans-serif); font-size: 15px; line-height: 1.55; letter-spacing: normal; text-transform: none; text-align: left; } .piaty-notice-sheet p { margin: 0; } /* Pieni otsikko modaalin sisällä (esim. "Mikä Mittelö on?") — punainen pienaakkos-aksentti samaan henkeen kuin sheetin punainen varjo. */ .piaty-notice-sheet .piaty-notice-heading { margin: 0 0 var(--s-2); font-family: var(--font-tag, inherit); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-tag); font-size: 13px; color: var(--piaty-red); } .piaty-notice-sheet a { color: var(--piaty-red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; } .piaty-notice-sheet a:hover { color: var(--piaty-red-deep, var(--piaty-red)); } /* Sulkunappi — siisti musta kulmaleima keltaisella ×:llä, hieman irti reunoista (levy vierittyy → ei voi roikkua ulkopuolella kuten poster- modaalin nappi). Hover kääntää ×:n punaiseksi ja pyöräyttää neljänneksen — pieni, harkittu mikrointeraktio. Näkymätön ::before kasvattaa kosketusalueen 44px:ään vaikka visuaali on kompakti 38px. */ .piaty-notice-close { position: absolute; top: var(--s-2); right: var(--s-2); width: 38px; height: 38px; display: grid; place-items: center; padding: 0; background: var(--piaty-black); color: var(--piaty-yellow); border: none; border-radius: var(--r-sm); font-family: var(--font-tag); font-size: 22px; line-height: 1; cursor: pointer; transition: transform 160ms var(--ease-snap, ease), background 140ms var(--ease-snap, ease), color 140ms var(--ease-snap, ease); } .piaty-notice-close::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } .piaty-notice-close:hover { background: var(--piaty-red); color: var(--piaty-bone); transform: rotate(90deg); } .piaty-notice-close:active { transform: scale(.9); } @media (max-width: 720px) { .piaty-notice-sheet { padding: var(--s-5) var(--s-4_5) var(--s-5); font-size: 14px; } } /* ============================================================ ASENNUSKEHOTE — "Lisää kotivalikkoon" (install-prompt.js) EI neutraali vaalea tiedotelaatikko vaan sivun oma tumma posterikortti (sama #141209-pohja + punainen riso-offset kuin "Seuraava reissu" -kortilla): keltainen raebändi + marker-otsikko yläreunassa, tumma runko jossa TIIVIS kärki + yksi toiminta. Pelkkiä design-tokeneita, ei uutta tyylikieltä. Linjaus (pixel-perfect): raebändin ja rungon VASEN pehmuste on sama var(--s-5) (24px) → otsikko, kärki, toiminta ja nappi jakavat vasemman reunan. Rungon oikea pehmuste on niin ikään var(--s-5) → kärki + nappi jakavat oikean reunan. Bändin oikea pehmuste on väljä (×:lle). Pystyrytmi: kärki → toiminta yhtenäinen var(--s-4_5) (20px, flex-gap). ============================================================ */ .piaty-a2hs-sheet { max-width: 400px; padding: 0; /* bändi + runko tuovat oman pehmusteensa */ overflow: hidden; /* keltaisen bändin väri rajautuu terävästi */ background: #141209; /* tumma posterikortti (kuten sivun kortit) */ } /* Sulkunappi keltaisen raebändin PÄÄLLE: ilman z-indexiä läpinäkymätön bändi (myöhempi sisar) maalautuisi ×:n yli ja piilottaisi sen. */ .piaty-a2hs-sheet .piaty-notice-close { z-index: 3; } /* Laatikko saa ohjelmallisen fokuksen (dialogiin siirtyminen) — ei koko levyn ympärille fokusrengasta. Sisällön napit/× pitävät oman :focus-visible-renkaansa. */ .piaty-a2hs-sheet:focus, .piaty-a2hs-sheet:focus-visible { outline: none; } /* Keltainen posteribändi — riso-raemultiply kuten muilla keltapinnoilla. */ .piaty-a2hs-head { position: relative; padding: var(--s-4_5) var(--s-7) var(--s-4) var(--s-5); /* oikea reuna väljä ×:lle */ background: var(--piaty-yellow); color: var(--piaty-black); border-bottom: 2px solid var(--piaty-black); overflow: hidden; } .piaty-a2hs-head::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--piaty-grain-url); background-size: 200px 200px; mix-blend-mode: multiply; opacity: .5; } .piaty-a2hs-title { position: relative; margin: 0; font-family: var(--font-display); font-size: var(--t-lg); /* pienempi kuin ennen (oli t-2xl) */ line-height: 1.06; /* väljempi rivinväli 2-rivisessä otsikossa */ text-transform: uppercase; color: var(--piaty-black); } /* Tumma runko: kärki + yksi toiminta, yhtenäinen pystyväli (flex-gap). */ .piaty-a2hs-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4_5); } .piaty-a2hs-lead { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--piaty-bone); text-wrap: pretty; } /* Yksirivinen toiminta: keltainen stanssileima + napakka ohje. */ .piaty-a2hs-step { margin: 0; display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-body); font-size: 14px; line-height: 1.35; color: var(--piaty-bone); } .piaty-a2hs-step-txt { min-width: 0; } /* salli tekstin rivitys flexissä */ .piaty-a2hs-step b { font-weight: 700; color: var(--piaty-bone); } /* Stanssileima: keltainen laatta, musta merkki, punainen riso-offset — sama painojälki kuin napeissa; keltainen pomppaa tummalta pohjalta. */ .piaty-a2hs-ico { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: var(--piaty-yellow); color: var(--piaty-black); border: 2px solid var(--piaty-black); box-shadow: var(--shadow-riso-2); } .piaty-a2hs-ico svg { width: 22px; height: 22px; display: block; } /* Androidin natiivi asennusnappi: täysleveä, muuten jaettu .piaty-btn. */ .piaty-a2hs-install { width: 100%; } /* iOS: kehote ankkuroidaan ALAS ja siitä osoittaa nuoli suoraan Safarin Jaa-painikkeeseen alapalkissa (kuten käyttäjän mallissa). Android pysyy keskitettynä (sen asennusnappi/valikko ei ole alapalkissa). */ .piaty-a2hs-overlay--ios { align-items: flex-end; padding-bottom: calc(var(--s-7_5) + env(safe-area-inset-bottom, 0px)); } .piaty-a2hs-sheet--ios { overflow: visible; } /* häntä saa ulottua alareunan alle */ /* Puhekuplan häntä: 45° käännetty neliö rungon alareunan alla, kaksi alaspäin osoittavaa sivua mustalla reunalla — sama tumma pohja kuin runko. Punainen riso-offset JATKUU hännän ympäri kuin kortin kehyksessä: koska häntä on 45° käännetty, suora 8px 8px -varjo kääntyisi vinoon → offset annetaan paikallista x-akselia pitkin (11.3px), joka kierron jälkeen osuu ruudulla juuri oikealle-alas (8,8) = sama punainen kuin rungossa. */ .piaty-a2hs-tail { position: absolute; left: 50%; bottom: -10px; width: 20px; height: 20px; transform: translateX(-50%) rotate(45deg); background: #141209; border-right: 2px solid var(--piaty-black); border-bottom: 2px solid var(--piaty-black); box-shadow: 11.3px 0 0 0 var(--piaty-red); } /* Logo keskitettynä ja suorassa; työpöydällä navigaatio pinotaan sen alle (oma rivi, keskitetty). Mobiilissa logo on jo keskellä ja ylänavi piilotettu (alapalkki käytössä). */ .piaty-header-grid { max-width: var(--container-wide); margin: 0 auto; /* Tiivis masthead: logo → navigaatio. Kompakti pystyrytmi sitoo logon ja navin yhteen. Kaikki arvot 4px-ruudukolta (16/28/12, gap 12). */ padding: var(--s-4) var(--s-5_5) var(--s-3); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); } .piaty-logo-link { display: flex; align-items: center; text-decoration: none; align-self: center; position: relative; z-index: 2; } /* Logo "roikkuu" bannerista — negatiivinen margin-top tunkee kuvaa keltaisen info-palkin päälle, ja margin-bottom samalla logiikalla marquee-tekstin päälle. Kuva on stackissa molempien yllä (z-index: 2), joten se peittää kontekstin alta — siksi drop-shadow-haloilla mustataan reuna, jotta logo erottuu keltaisesta info-palkista. Layout pysyy kompaktina: header ei kasva kuvan ylityksen verran. */ .piaty-logo-link img { width: clamp(340px, 34vw, 480px); height: auto; /* Suorassa ja keskellä, omalla tilallaan — ei enää info-palkin päällä. Ilmaa palkin ja navigaation väliin tulee header-gridin paddingista. */ transform: none; margin-top: 0; margin-bottom: 0; display: block; position: relative; z-index: 3; transition: transform 200ms var(--ease-snap); filter: drop-shadow( 1.4px 0 0 var(--piaty-black)) drop-shadow(-1.4px 0 0 var(--piaty-black)) drop-shadow( 0 1.4px 0 var(--piaty-black)) drop-shadow( 0 -1.4px 0 var(--piaty-black)) drop-shadow( 0 6px 14px rgba(0, 0, 0, .45)); } /* "Teipattu tarra heilahtaa" -hover: hienovarainen skaalaus + kallistus palkitsee osoittimen rikkomatta naulattu kromi -periaatetta (View Transition -tilannekuva otetaan levosta, joten siirtymät eivät muutu). */ .piaty-logo-link:hover img { transform: scale(1.015) rotate(-.4deg); } .piaty-topbar-nav { display: flex; align-items: center; gap: clamp(var(--s-5), 2.8vw, var(--s-7)); justify-self: center; flex-wrap: wrap; justify-content: center; } .piaty-nav-link { position: relative; padding: var(--s-1) 0 var(--s-2); font-family: var(--font-tag); font-weight: 700; letter-spacing: var(--track-tag); text-transform: uppercase; font-size: var(--t-sm); /* Designin masthead: navi on bone (off-white), aktiivinen KalPa-punainen + punainen alleviivaus — keltainen varataan logolle ja laskurille, jolloin navi ei kilpaile niiden kanssa. */ color: var(--piaty-bone); text-decoration: none; transition: color 160ms var(--ease-snap), opacity 160ms var(--ease-snap); } /* Näkymätön osuma-aluelaajennus tablettien kosketuskäyttöön: linkki on visuaalisesti 33px korkea, kosketuskohde ~45px. Sivuille 10px — linkkien väli on vähintään 24px, joten alueet eivät limity. (::after on varattu alleviivaukselle, siksi ::before.) */ .piaty-nav-link::before { content: ''; position: absolute; inset: -6px -10px; } .piaty-nav-link:hover { color: #fff; } .piaty-nav-link:active { opacity: .65; } /* Hillitty punainen alleviivaus kasvaa keskeltä; aktiivinen sivu pysyy täysleveänä. Viiva on KÄSINVEDETTY tussipolku (sama data-URI-kieli kuin marqueen tussiviivassa ja reaktiorinkuloissa) — suora 2px-palkki oli mastheadin ainoa konemaisen sileä ele. preserveAspectRatio: none → aalto elää width-kasvuanimaation mukana. */ .piaty-nav-link::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 5px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%206'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M1%2C3.5%20C6%2C2%2011%2C4.6%2017%2C3.6%20C23%2C2.6%2028%2C4.4%2034%2C3.4%20C40%2C2.4%2046%2C4.2%2052%2C3.2%20C55.5%2C2.7%2058%2C3.6%2059%2C3.1'%20fill%3D'none'%20stroke%3D'%23E1251B'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat; transform: translateX(-50%); transition: width 220ms var(--ease-snap); } .piaty-nav-link:hover::after { width: 66%; } .piaty-nav-link[data-active="true"]::after { width: 100%; } .piaty-nav-link[data-active="true"] { color: var(--piaty-red); } /* ---------- BOTTOM TAB BAR (mobile only) — Instagram-tyylinen kelluva pilleri ---------- Nyky-Instagramin ala-navigaatio: kelluva, pyöristetty "pilleri" irti reunoista, frosted-glass-tausta (sisältö kuultaa läpi) ja vieritettäessä alaspäin se liukuu pois näkyvistä — ylöspäin vieritys tuo sen takaisin (luokka .is-hidden, jota motion.js vaihtaa). */ .piaty-bottomnav { display: none; position: fixed; /* Sisällön levyinen, KESKITETTY kapseli (ei laidasta laitaan venytetty palkki): left/right:0 + margin-inline:auto + width:max-content keskittää, ja max-width estää ylivuodon kapeilla näytöillä — silloin gridin 1fr-sarakkeet kutistuvat tasaisesti mahtumaan. Näin 6 ikonia näyttää tarkoitukselliselta kelluvalta kapselilta isoillakin puhelimilla, ei reunasta reunaan liimatulta nauhalta. Keskitys hoidetaan marginaalilla, joten transform jää vapaaksi auto-hide-liu'ulle. */ left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - var(--s-5)); bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); z-index: 60; /* Hiljainen tumma lasipilleri (Apple/iOS-tyylinen kromi): sisältö kuultaa himmeästi läpi, keltaista käytetään VAIN aktiivisen välilehden korostukseen — ei koko palkin täyttönä. Reuna on himmeä keltainen hiusviiva, joka sitoo navin brändiin dominoimatta. Pieni kelluva pinta, joten kohtuullinen blur on visuaalisesti perusteltu. */ background: rgba(11, 11, 11, .82); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1.5px solid rgba(var(--piaty-yellow-rgb), .32); border-radius: var(--r-md); padding: var(--s-1_5) var(--s-2); /* Tasaleveät sarakkeet: jokainen välilehti on saman levyinen (minmax → kutistuu kapeilla näytöillä, ei venytä leveillä). width:max-content summaa nämä → kapseli hugaa sisältöä eikä leviä koko ruudun levyiseksi. Neljä ikoni+label-tabia (Etusivu · Meiningit · Laulut · Veljmiehet) istuu tasarytmisenä kapselina; sarake on tarpeeksi leveä pisimmälle labelille ("Veljmiehet") katkeamatta. */ grid-auto-flow: column; grid-auto-columns: minmax(58px, 76px); gap: clamp(var(--s-0_5), 1vw, var(--s-1_5)); /* Kohotus: pilleri kelluu selvästi sisällön (ja taustan tarrojen/tekstuurin) päällä. EI geneeristä pehmeää material-varjoa — punk/riso-hengessä jämäkkä: ohut lähes musta "istukka" (0 3px 0) antaa terävän reunan alle, tiukempi tummempi tiputus erottaa taustasta ja matala ambient tuo syvyyttä. Riittävän tumma erottumaan vilkkaasta taustasta, ei raskas. */ box-shadow: inset 0 1px 0 rgba(var(--piaty-bone-rgb), .09), 0 3px 0 rgba(0, 0, 0, .55), 0 8px 16px -6px rgba(0, 0, 0, .8), 0 18px 34px -12px rgba(0, 0, 0, .7); /* auto-hide: kutistuu pehmeästi pois / palaa esiin */ transform-origin: center bottom; visibility: visible; transition: transform 360ms var(--ease-snap), opacity 280ms var(--ease-snap), visibility 0s linear 0s; will-change: transform, opacity; } /* Vieritys alaspäin → pilleri pienenee ja häipyy alaspäin (Instagram-tyyli): skaalaus alareunasta + lasku + häivytys antaa pehmeän "kutistuu pois" -liikkeen. opacity:0 takaa ettei pilleri kurkista esiin kesken liu'un. */ .piaty-bottomnav.is-hidden { transform: translateY(calc(40% + env(safe-area-inset-bottom, 0px))) scale(.8); opacity: 0; /* Piilota hit-testauksesta VASTA poistumisanimaation jälkeen. Aiemmin pointer-events:none astui voimaan ensimmäisellä framella, vaikka pilleri oli vielä täysin näkyvä → näkyvän valikon ensimmäinen napautus katosi. */ visibility: hidden; transition-delay: 0s, 0s, 360ms; } /* Selaimet ilman backdrop-filteriä: kiinteämpi tumma tausta luettavuuden vuoksi. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .piaty-bottomnav { background: rgba(11, 11, 11, .92); } } .piaty-bottomnav-tab { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-0_5); padding: var(--s-1_5); min-height: 46px; text-decoration: none; /* Passiiviset ikonit himmeää luuvalkeaa: kromi väistyy, ei kilpaile sisällön kanssa. Keltainen varataan vain aktiiviselle. */ color: rgba(var(--piaty-bone-rgb), .60); border-radius: var(--r-sm); transition: color 140ms var(--ease-snap), background 140ms var(--ease-snap), transform 140ms var(--ease-snap); position: relative; /* Poista vanhojen kosketusselainten kaksoisnapautuksen odotus ja kerro suoraan, että tabi on yksittäinen napautuskohde (ei zoomausele). */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .piaty-bottomnav-tab:active { transform: scale(.9); } .piaty-bottomnav-tab[data-active="true"] { color: var(--piaty-yellow); } /* Aktiivinen välilehti: designin "tussiympyrä" — käsin piirretyn näköinen KELTAINEN soikiorengas ikonin ympärillä (ei umpinaista keltaruutua). Ikoni itse on keltainen aktiivisena. Rengas on SVG-data-URI ::before-taustana, joka feidautuu/skaalautuu esiin aktiivituessa. Susi-ikoni (Veljmiehet) saa saman renkaan. */ .piaty-bottomnav-ico { position: relative; display: grid; place-items: center; width: 46px; height: 28px; } .piaty-bottomnav-ico::before { content: ''; position: absolute; inset: -7px -1px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2044'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M9%2C23%20C7%2C13%2022%2C7%2031%2C7%20C44%2C7%2054%2C13%2052%2C23%20C53%2C33%2040%2C38%2028%2C37%20C16%2C36%206%2C32%208%2C21'%20fill%3D'none'%20stroke%3D'%23FFE701'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat; opacity: 0; transform: scale(.72) rotate(-2deg); transition: opacity 200ms var(--ease-snap), transform 200ms var(--ease-snap); } .piaty-bottomnav-tab[data-active="true"] .piaty-bottomnav-ico::before { opacity: 1; transform: scale(1) rotate(-2deg); } .piaty-nav-ico { position: relative; z-index: 1; width: 24px; height: 24px; display: block; transition: transform 200ms var(--ease-snap); } .piaty-bottomnav-tab[data-active="true"] .piaty-nav-ico { color: var(--piaty-yellow); } .piaty-bottomnav-lbl { /* Hennompi, ilmavampi labelityyli (Oura-henki): Inter regular/medium, gemena-alkuinen (ei versaalia) ja ilman kirjainväliä — tag-Oswaldin lihava versaali tuntui pikkunavissa raskaalta. Kevyt sans pitää kromin hiljaisena ja antaa ikonin johtaa. */ font-family: var(--font-body); font-weight: 500; letter-spacing: .01em; text-transform: none; font-size: 10px; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* ---------- JAETTU SEGMENTTI-/VÄLILEHTIKYTKIN (.piaty-seg) ---------- Yksi yhtenäinen "kapseli + tasaleveät segmentit" -kytkin koko sivustolle. Veljmiehet/Veljcast (kannattajaryhmät) ja Laulut/Huudot (laulukirja) käyttävät nyt TÄSMÄLLEEN samaa komponenttia, joten välilehdet näyttävät identtisiltä sivulta toiselle. Aiemmin kummallakin sivulla oli oma inline-toteutuksensa (.piaty-kr-tabs ja .piaty-lk-seg), jotka erosivat toisistaan. Aktiivinen segmentti: keltainen täyttö, musta teksti, punainen riso-offset — sama "yksi keltainen täyttö kerrallaan" -kieli kuin alanavin aktiivipillerissä. */ .piaty-seg { display: grid; grid-auto-flow: column; /* minmax(0,1fr) (ei pelkkä 1fr): segmentit saavat kutistua tasan, joten kolme labelia eivät työnnä kapselia yli kapean ruudun edes Oswaldin leveämmällä varafontilla (Impact/Arial Narrow) — ei vaakascrollia. */ grid-auto-columns: minmax(0, 1fr); gap: var(--s-1_5); width: max-content; max-width: 100%; margin: 0 auto var(--s-5); padding: var(--s-1); border-radius: var(--r-sm); background: rgba(var(--piaty-bone-rgb), .06); border: 1.5px solid rgba(var(--piaty-yellow-rgb), .3); /* Kevyt sisävarjo → kapseli lukee upotettuna "kaukalona", jonka pohjaa vasten charcoal-näppäimet kohoavat (aiempi vaalea inset-viiva sai koko kapselin näyttämään kohoavalta, mikä latisti segmenttien erottumisen). */ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); } .piaty-seg-btn { appearance: none; position: relative; cursor: pointer; /* Passiivinen segmentti on nyt oma kohotettu näppäin: charcoal-täyttö + hiusviivareuna erottavat kolme lokeroa toisistaan ja kapselin pohjasta (aiemmin täysin läpinäkyvä + reunaton → napit sulautuivat kapseliin, eikä "kolmeus" hahmottunut). */ background: var(--piaty-charcoal); border: 1px solid var(--piaty-line); border-radius: var(--r-sm); /* Passiiviteksti nostettu .62 → .78: selkeästi luettava mutta yhä alisteinen aktiivin mustalle. */ color: rgba(var(--piaty-bone-rgb), .78); font-family: var(--font-tag); font-weight: 700; letter-spacing: var(--track-snug); text-transform: uppercase; /* Mobiilissa 11px → työpöydällä 12px: pitää kolme labelia yhdellä rivillä kapeallakin ruudulla ilman rumaa rivitystä/katkaisua (11px on Oswald- mikrolabelin sallittu koko). */ font-size: clamp(var(--t-tag), 2.6vw, var(--t-xs)); line-height: 1; white-space: nowrap; min-width: 0; /* Vaakapehmuste kutistuu mobiilissa (8px) → työpöytä (16px), jotta kolme nappia mahtuvat; pystysuunta pysyy vakiona. Kosketusala kasvaa silti ~44px:ään ::after-laajennuksella alla. */ padding: var(--s-2) clamp(var(--s-2), 2.4vw, var(--s-4)); -webkit-tap-highlight-color: transparent; transition: color 160ms var(--ease-snap), background 160ms var(--ease-snap), border-color 160ms var(--ease-snap), box-shadow 160ms var(--ease-snap), transform 140ms var(--ease-snap); } /* Näkymätön osuma-aluelaajennus: segmentti on visuaalisesti 28px korkea, mutta kosketuskohde kasvaa ~44px:ään. Sivuille vain 2px, jotta naapurisegmentin alue ei limity (gap 6px). */ .piaty-seg-btn::after { content: ''; position: absolute; inset: -9px -2px; } /* Passiivinen hover/kohdistus: näppäin vaalenee ja reuna vihjaa keltaista → selkeä "painettava" tuntuma (kosketuksella :active-painallus alla). */ .piaty-seg-btn:hover { background: var(--piaty-line); color: var(--piaty-bone); border-color: rgba(var(--piaty-yellow-rgb), .55); } .piaty-seg-btn:active { transform: translate(1px, 1px); } .piaty-seg-btn[data-active="true"] { color: var(--piaty-black); background: var(--piaty-yellow); /* Musta hiusreuna (sama 1px kuin passiivilla → ei kokohyppyä vaihdossa) terävöittää keltaisen leiman reunan. */ border-color: var(--piaty-black); box-shadow: var(--shadow-riso-1); } .piaty-seg-btn[data-active="true"]:hover { background: var(--piaty-yellow); color: var(--piaty-black); border-color: var(--piaty-black); } .piaty-seg-btn:focus-visible { outline: 2px solid var(--piaty-yellow); outline-offset: 2px; } /* ---------- header mobile breakpoint ---------- */ @media (max-width: 720px) { .piaty-header-grid { /* (containeri on flex, ei grid — poistettu turhat grid-propertyt; keskitys tulee base-säännön align-items:center:stä.) */ padding: var(--s-3) var(--s-4) var(--s-2); gap: 0; } .piaty-topbar-nav { display: none; } .piaty-logo-link img { width: min(86vw, 470px); height: auto; transform: none; margin-top: 0; margin-bottom: 0; filter: drop-shadow( 1px 0 0 var(--piaty-black)) drop-shadow(-1px 0 0 var(--piaty-black)) drop-shadow( 0 1px 0 var(--piaty-black)) drop-shadow( 0 -1px 0 var(--piaty-black)) drop-shadow( 0 4px 10px rgba(0, 0, 0, .4)); } .piaty-bottomnav { display: grid; } /* Ikoni + pieni tekstilabel sen alla (sivun nimi). Neljä tabia mahtuu kapseliin labeleineen, ja teksti tekee kohteista yksiselitteisiä uudelle kävijälle — ikoni yksin jättää arvailun varaa. Saavutettava nimi tulee yhä aria-labelista. */ .piaty-bottomnav-lbl { display: block; } /* Kelluvan alanavin tila annetaan footerin alatäytteenä (ks. .piaty-footer alla), ei bodyn alatäytteenä. Aiemmin body sai 88px alatäytteen, mikä jätti footerin alapuolelle tyhjän (footerittoman) mustan kaistan ja sai footerin näyttämään "liian korkealta" alas rullattuna. Kun tila on footerin sisällä, footerikaista ulottuu ruudun alalaitaan asti eikä tyhjää väliä jää. */ } /* Liike pois käytöstä → pilleri ilmestyy/katoaa ilman liukua. */ @media (prefers-reduced-motion: reduce) { .piaty-bottomnav { transition: opacity 120ms linear; } .piaty-bottomnav.is-hidden { transform: none; } } /* Kosketuslaitteella alanavi on ensisijainen sivunvaihdin, joten sen pitää pysyä täysin paikallaan myös silloin kun motion.js merkitsee sen .is-hidden-luokalla. Liikkuva kohde voi karata sormen alta kesken eleen, ja animoitu backdrop-blur kuormittaa erityisesti iOS:n kompositoria. Lähes opaakki pinta säilyttää kontrastin ilman liikkuvaa blur-kerrosta. */ @media (max-width: 720px) and (hover: none) and (pointer: coarse) { .piaty-bottomnav { background: rgba(11, 11, 11, .96); -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; opacity: 1; visibility: visible; transition: none; will-change: auto; } .piaty-bottomnav.is-hidden { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; } } /* ---------- entrance ---------- */ .piaty-fadeup { animation: piaty-fadeup var(--dur-base) var(--ease-snap) backwards; } @keyframes piaty-fadeup { /* Individual translate ei ylikirjoita komponentin omaa transformia (esim. etusivun kevyesti vino eyebrow-lappu). */ from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: reduce) { /* Palauta staattinen lopputila myös ennen mahdollista animationstartia. */ .piaty-fadeup { animation: none !important; opacity: 1; translate: none; } } /* ---------- LYRIC MARQUEE ---------- */ .piaty-lyric-marquee { position: relative; overflow: hidden; white-space: nowrap; /* Varaa nauhan korkeus ennen kuin songs.js + React täyttävät sen — muuten koko sivun sisältö hyppää nauhan verran (CLS). */ min-height: 52px; /* Lauluraita on LÄPINÄKYVÄ — ei omaa täyttöväriä, vaan sivun tausta kulkee sen läpi (etusivulla .piaty-stage, alasivuilla brändimusta). */ background: transparent; color: var(--piaty-yellow); /* Ei enää hentoa yläviivaa: header sulautuu suoraan lauluraitaan (tiiviimpi masthead). Alareunan raja jää sisältöä vasten, ja sen päälle piirtyy vielä jaettu keltainen "tussiviiva" (.piaty-vt-marquee::after). */ border-bottom: 1px solid var(--piaty-line); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); } /* Halftone-pisterivi nauhan alareunaan — valokopio-/silkkipainomainen painettu reuna chromen ja sisällön rajalla. Reunat häipyvät nauhan omaan mask-gradienttiin. Staattinen ja halpa. */ /* Lauluraidan aiempi halftone-pistereuna on korvattu jaetulla keltaisella tussiviivalla (.piaty-vt-marquee::after), joka piirtyy marquee-kääreen alareunaan kaikilla sivuilla — yksi yhtenäinen käsinpiirretty reuna mustan palkin sijaan. Pistereunaa ei enää piirretä, jottei reunalle tule kahta päällekkäistä koristetta. */ .piaty-lyric-track { display: inline-block; padding: var(--s-3) 0; font-family: 'Permanent Marker', 'Brush Script MT', cursive; font-style: italic; font-size: 18px; letter-spacing: .02em; animation: piaty-marquee 900s linear infinite; } .piaty-lyric-track .title { color: var(--piaty-red); margin: 0 var(--s-3) 0 0; } .piaty-lyric-track .lyric { color: var(--piaty-red); } .piaty-lyric-track .sep { color: var(--piaty-yellow); margin: 0 var(--s-6); font-style: normal; } /* Pysäytä ikuinen nauha kun: osoitin sen päällä (lukeminen helpottuu), nauha ei ole näkyvissä (motion.js → .is-offscreen) tai välilehti on taustalla (motion.js → html.piaty-page-hidden). Akku- ja sulavuusvoitto: animaatio ei pyöri koskaan turhaan sisällön takana. */ .piaty-lyric-marquee:hover .piaty-lyric-track, .piaty-lyric-marquee.is-offscreen .piaty-lyric-track, html.piaty-page-hidden .piaty-lyric-track { animation-play-state: paused; } /* translate3d pakottaa nauhan omalle kompositointitasolleen. */ @keyframes piaty-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (max-width: 720px) { .piaty-lyric-marquee { min-height: 42px; } .piaty-lyric-track { font-size: 15px; padding: var(--s-2) 0; } .piaty-lyric-track .sep { margin: 0 var(--s-4_5); } } /* ---------- footer ---------- Hyvin minimalistinen: footerissa ei ole tärkeää tietoa, joten se on vain hiljainen nauha — kompakti, himmeä "VELJMIEHET · est. 2014" -rivi ja some-ikonit. Ohut yläviiva + kevyt pinta (black-soft #161616) erottaa sen omaksi nauhakseen ettei se haihdu mustaan; ei aksentteja eikä korkeutta. */ .piaty-footer { /* Minimalistinen: EI omaa tummaa nauhaa eikä yläviivaa — footer on hiljainen wordmark + some-ikonit sivun pohjalla. Sama joka sivulla (etusivu oli jo läpinäkyvä; alasivut olivat erillinen tumma palkki → nyt yhtenäinen). */ background: transparent; border-top: none; padding: clamp(var(--s-4), 3vh, var(--s-5_5)) var(--space-inline) calc(clamp(var(--s-4), 3vh, var(--s-5_5)) + env(safe-area-inset-bottom, 0px)); /* Tarrakasan ankkuri + vaakaleikkuri: uloin tarra saa vuotaa viewportin vasemman reunan yli ilman vaakascrollia; pystysuunnassa kasa saa nousta nauhan yläpuolelle (clip vain x-akselilla). */ position: relative; overflow-x: clip; } .piaty-footer-inner { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; /* Some-ikonit tarrakasan yläpuolelle jos ne joskus limittyvät kapealla. */ position: relative; z-index: 1; } /* Footerin wordmark + "est. 2014" -leima POISTETTU (minimalistinen footer havainnekuvan mukaan): footer on pelkkä some-ikonirivi. */ @media (max-width: 720px) { /* Alatäytteeseen lisätään kelluvan alanavin vaatima tila (n. 84px), jotta footerikaista yltää ruudun alalaitaan asti eikä footerin alle jää tyhjää mustaa väliä — ja some-ikonit pysyvät navin yläpuolella. */ .piaty-footer { padding: clamp(var(--s-4), 2.5vh, var(--s-5)) var(--s-4) calc(clamp(var(--s-4), 2.5vh, var(--s-5)) + 84px + env(safe-area-inset-bottom, 0px)); } } /* Footer-some — pelkät ikonit (Instagram + Facebook). Himmeä keltainen levossa, kirkastuu hoverilla; sama hillitty kieli kuin footer-logoilla. */ .piaty-footer-social { display: flex; align-items: center; justify-content: center; gap: var(--s-4); } .piaty-footer-social-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--s-6); height: var(--s-6); /* Keltaiset ikonit (brändiväri) — nousevat esiin nyt kun tarrakasa kohoaa niiden taakse. Pieni varjo irrottaa ne tarroista ja mustasta pohjasta; levossa lähes täydet, hoverilla kirkkaat. */ color: var(--piaty-yellow); opacity: .9; border-radius: var(--r-pill); -webkit-tap-highlight-color: transparent; transition: opacity 200ms var(--ease-snap), transform 200ms var(--ease-snap); } /* Varjo piirretään SVG:n muotoa myöten (ikonit ovat läpinäkyviä, joten box-shadow ei toimi): pehmeä musta pudotusvarjo + ohut tummennus antaa ikonille kohokuvion tarrojen päällä. */ .piaty-footer-social-link svg { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .7)) drop-shadow(0 0 1px rgba(0, 0, 0, .5)); } /* Pienet ikonit (22 → 17px). */ .piaty-footer-social-link svg { width: 17px; height: 17px; } /* Näkymätön osuma-aluelaajennus: visuaali pysyy 32px:ssä mutta kosketuskohde kasvaa 44×44:ään (ikonien 32px väli ei limity). */ .piaty-footer-social-link::before { content: ''; position: absolute; inset: -6px; } .piaty-footer-social-link:hover { opacity: 1; transform: translateY(-2px); } .piaty-footer-social-link:hover svg { filter: drop-shadow(0 2px 2.5px rgba(0, 0, 0, .75)) drop-shadow(0 0 1px rgba(0, 0, 0, .5)); } .piaty-footer-social-link:focus-visible { outline: 2px solid var(--piaty-yellow); outline-offset: 2px; opacity: 1; } /* Footer-tarrakasa — Veljmiesten tarrat mustavalkoisina VASEMMASSA laidassa (designkatselmus 3.7.2026: vaihtoehto A "kulmakasa" peilattuna vasemmalle). Tarrat pysyvät neliöinä — ei siluetti-irrotuksia. Torn paper -rajaus tehdään ajonaikaisesti: epäsäännöllinen clip-path-monikulmio leikkaa sekä kuvan että bone-taustan, ja koska kuva istuu paddingin sisällä, rimmi repeää ja sen leveys elää monikulmion mukana. Monikulmiot on generoitu deterministisesti (seedit 2014/1929/7, sama repeämä joka latauksella — mulberry32-henki kuten Mittelöposterissa). Rasteripisteet ::afterilla, ei varjoa: tarra on liimattu pintaan, ei leiju. Puhdas koriste → pointer-events: none. */ .piaty-footer-tarrat { position: absolute; left: 0; right: 0; bottom: 0; /* Kasa on ankkuroitu footerin VASEMPAAN ALAKULMAAN ja tarrat vuotavat vasemman ja alareunan yli, jolloin ne LEIKKAUTUVAT reunoihin eivätkä koskaan näy kokonaisina "leijuvina" kortteina. Leikkuri on containerin overflow: hidden; yläreuna on venytetty ylös (top negatiivinen), jotta tarrojen yläosat eivät saa suoraa katkoa vaan repäisty yläreuna näkyy. */ top: -240px; overflow: hidden; pointer-events: none; /* HUOM: himmennystä EI tehdä ryhmä-opacitylla — iOS Safari pudottaa opacity-ryhmän kun lapsissa on mix-blend-mode/clip-path (WebKit-bugi: blend-lapsi karkaa ryhmästä), jolloin tarrat piirtyivät puhelimella täydellä kirkkaudella. Himmennys on per tarra ::before-lasyyrina alla. */ } .piaty-tarra { position: absolute; box-sizing: border-box; width: var(--tarra-w, 96px); padding: 7px; /* bone-rimmi — clip-path repii tämän reunan */ background: var(--piaty-bone); transform: rotate(var(--tarra-r, 0deg)); clip-path: var(--tarra-clip); } .piaty-tarra img { display: block; width: 100%; height: auto; /* Neliögeometria JO ENNEN kuvan latausta: ilman tätä lazy-kuvaton tarra on vain rimmin korkuinen ja voi jäädä kokonaan alalaidan leikkuulinjan alle — selain ei koskaan lataa täysin piiloon leikattua lazy-kuvaa, joten tarra ei koskaan ilmestyisi (pattitilanne). Samalla poistuu latauksen layout-hyppy. */ aspect-ratio: 1 / 1; /* Loivempi kontrasti + tummennus — valkoiset eivät leimahda himmennettynäkään (brightness laskettu .88 → .8 lasyyrin nostoa tukemaan). */ filter: contrast(.98) brightness(.8); } /* Sulautus footerin värimaailmaan: tummennuslasyyri jokaisen tarran päällä (rgba(musta, .6) — talon subdued-himmeys, vrt. some-ikonit ja Meiningit- lista; tarkoituksellinen, ei bugi). Nostettu .52 → .60: tarrat olivat liian kirkkaat ja hyppäsivät esiin, nyt ne jäävät tunnelmalliseksi taustaelementiksi eivätkä kilpaile countdownin tai alanavin kanssa. Lasyyri on tarrakohtainen mutta tarrat ovat toisilleen täysin peittäviä, joten kasa himmenee yhtenäisenä kerroksena ilman läpikuultoa — eikä mikään nojaa ryhmä-opacityyn tai blend-moodeihin (iOS Safari). */ .piaty-tarra::before { content: ''; position: absolute; inset: 0; z-index: 2; /* Sulautuksen HERKKÄ arvo: alle ~.45 tarrat alkavat "poksahtaa" esiin ja rikkovat tumman tunnelman; yli ~.62 tummin viivagrafiikka (susi, kukko, D-logo) katoaa mustaan. Käyttäjän pyynnöstä (tarrat liian kirkkaat) himmennetty .52 → .60: taustaelementiksi rauhoitettu mutta yhä juuri alle "line art katoaa" -rajan, ja kuvien brightness .8 tekee lisä- himmennyksen vahingoittamatta tunnistettavuutta. Ei blur/blend-moodia: brändi on "terävä" ja rasteri antaa tekstuurin jo — blur sotisi sitä vastaan (ja blend-mode kaatuu iOS Safarissa). */ background: rgba(11, 11, 11, .6); } /* Rasteripisteet kuvan päälle — sama valokopiokieli kuin --piaty-grain-url, mutta tiheämpi halftone joka luetaan kuvasta, ei pinnasta. Piirretään normaalisti ilman mix-blend-modea (WebKit, ks. yllä) — tummat pisteet vaalealla tarralla vastaavat multiplyä riittävän tarkasti. */ .piaty-tarra::after { content: ''; position: absolute; inset: 7px; z-index: 1; pointer-events: none; background-image: radial-gradient(circle, rgba(11, 11, 11, .42) .7px, transparent 1.05px); background-size: 3.5px 3.5px; } /* Kasa: kaikki kolme upotettu kulmaan niin että jokainen leikkautuu vasempaan ja/tai alareunaan — mikään ei näy kokonaisena. Sommitelma referenssikuvan mukaan: kukko vasemmalla (leikkautuu molempiin reunoihin), kalpa keskellä korkeimmalle nousten (kulkee kukon yli, z-index 3), susi oikealla matalimpana. Kierrot peilattu designkatselmuksen mockupista A; koordinaatit containerin (= footerin) alareunasta. */ .piaty-tarra-1 { /* susi */ --tarra-w: 155px; --tarra-r: 7deg; --tarra-clip: polygon(0% 1.4%, 19.5% 3.2%, 32.8% 2.4%, 46.8% 1.4%, 64.1% 2.3%, 86.6% 1.5%, 99.8% 0.9%, 99.7% 14.9%, 99.2% 31.7%, 98.6% 51.8%, 97.7% 63.8%, 97.4% 84.3%, 97.7% 99.9%, 82.5% 99.1%, 69% 97.8%, 53% 98.3%, 31.3% 99.6%, 17% 99.2%, 0.9% 98.9%, 0.5% 81%, 0.7% 65.7%, 0.2% 52.2%, 2.3% 34.7%, 3% 13.8%); left: 215px; bottom: -70px; } .piaty-tarra-2 { /* kalpa */ --tarra-w: 170px; --tarra-r: -5deg; --tarra-clip: polygon(1.8% 2.1%, 13.5% 1.1%, 33.8% 2.7%, 52.3% 0.8%, 63.5% 2.2%, 85.3% 3.1%, 97.8% 3.3%, 99.4% 17.4%, 97.2% 34.1%, 99.4% 48%, 97.5% 68.9%, 99.3% 84.3%, 98.2% 98.5%, 80.3% 99.3%, 64.4% 96.7%, 49.5% 97.7%, 35.1% 97.2%, 18% 99.6%, 3% 97%, 0.4% 81.5%, 3.2% 65.5%, 3% 50.1%, 2% 34.9%, 3.2% 14.9%); left: 85px; bottom: -40px; z-index: 3; } .piaty-tarra-3 { /* kukko */ --tarra-w: 190px; --tarra-r: 14deg; --tarra-clip: polygon(0% 0.5%, 17.7% 0.2%, 33.6% 1.2%, 47% 1.7%, 63.5% 1.5%, 80.4% 0.3%, 99.5% 2.8%, 99.6% 14.8%, 97.9% 36.4%, 98% 49.3%, 96.7% 63.6%, 97.1% 81.9%, 99.5% 97.4%, 82% 97.2%, 64.5% 98%, 50.9% 98.7%, 33.7% 99.8%, 13.7% 99.3%, 1.2% 98.5%, 1.1% 83.9%, 1.5% 65.3%, 2.7% 51.4%, 0.8% 33.8%, 1.8% 19.2%); left: -55px; bottom: -55px; } @media (max-width: 720px) { /* Mobiilissa tarrakerros on NAULATTU RUUTUUN (position: fixed) viewportin pohjaan: dokumenttiin ankkuroitu leikkauslinja karkasi iOS:n kumilankajoustossa ja palkkien elävöityessä, koska koko dokumentti liikkuu silloin suhteessa ruutuun — vain fixed-elementit pysyvät. Alareunan leikkaus (overflow: hidden) pysyy nyt kiinteässä linjassa skrollin vaiheesta riippumatta. Kasa ei pompahda esiin kerralla vaan PALJASTUU skrollin mukana: JS (Footer.jsx) asettaa --revealin footerin näkyvyyden mukaan (0 → piilossa alhaalla, 1 → täysin esillä), ja kasa nousee sitä myöten kun selataan kohti sivun alalaitaa. Näin se on pysyvästi kiinni ruudun pohjassa mutta tulee näkyviin vasta lopussa, eikä leiju sisällön päällä kesken sivun. Siirto on transformilla (ei opacityä, WebKit-ryhmäopacity); reduced-motion napsauttaa liu'un pois. */ .piaty-footer-tarrat { position: fixed; top: auto; height: 340px; /* korkeampi kuin navipilleri — tarrat nousevat sen yli; overflow leikkaa */ z-index: 1; /* alle kelluvan navin (60) ja pelinapin */ transform: translateY(calc((1 - var(--reveal, 0)) * 118%)); will-change: transform; } /* Kulmasommitelma: tarrat mitoitettu niin että yläosat KOHOAVAT navipillerin yläreunan yli näkyviin, mutta jäävät corner-aksentiksi eivätkä kiipeä reaktiolaskureihin. Trimmattu ~10 % edellisestä (tops nyt n. 131/160/162 px pohjasta vs. pillerin yläreuna ~112 px iPhonella → selvästi yli, ~50 px marginaali), jolloin kasa on tunnistettava mutta ei dominoi. Alalaidat yhä upotettu ruutuun naulatun leikkuulinjan alle → kasa leikkautuu vasemmasta JA alareunasta; navipilleri (z-index 60) kelluu kasan päällä. KORKEUS on herkkä: paljon tästä alaspäin ja tarrat painuvat taas pillerin taakse piiloon. */ .piaty-tarra-1 { --tarra-w: 135px; left: 150px; bottom: -12px; } .piaty-tarra-2 { --tarra-w: 150px; left: 44px; bottom: 4px; } .piaty-tarra-3 { --tarra-w: 170px; left: -52px; bottom: -26px; } } /* ============================================================ TIEDOTE — PIÄTY-katsomo -modaali. Jaettu site.css:ään, jotta toimii Meiningit-sivulla. Avaaja on Meiningit-sivun intron "Mikä Piäty on?" -nappi (.piaty-intro-info); vanha headerin trigger-pilleri on poistettu. ============================================================ */ /* ----- Overlay ----- */ .piaty-tiedote-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .82); display: flex; align-items: flex-start; justify-content: center; padding: clamp(var(--s-4), 6vh, var(--s-8)) clamp(var(--s-3), 4vw, var(--s-6_5)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; animation: piaty-tied-fadein 280ms cubic-bezier(.2,.9,.2,1); } @keyframes piaty-tied-fadein { from { opacity: 0; } to { opacity: 1; } } .piaty-tiedote-sheet { position: relative; max-width: 720px; width: 100%; padding: clamp(var(--s-5_5), 5vw, var(--s-8)) clamp(var(--s-4_5), 4vw, var(--s-7_5)) clamp(var(--s-6), 6vw, var(--s-8)); background-color: var(--piaty-yellow); color: var(--piaty-black); border: 3px solid var(--piaty-black); box-shadow: var(--shadow-riso-5); margin-bottom: clamp(var(--s-6_5), 10vh, var(--s-9)); animation: piaty-tied-pop 420ms cubic-bezier(.2,.9,.2,1); background-image: linear-gradient(132deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 36%), linear-gradient(218deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 28%); } @keyframes piaty-tied-pop { from { opacity: 0; transform: translateY(40px) rotate(-1.4deg) scale(.97); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } } /* paper grain */ .piaty-tiedote-sheet::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--piaty-grain-url); mix-blend-mode: multiply; opacity: .3; } .piaty-tiedote-close { position: absolute; top: -18px; right: -18px; width: 48px; height: 48px; background: var(--piaty-black); color: var(--piaty-yellow); border: 2px solid var(--piaty-black); font-family: var(--font-display); font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-riso-2); transition: transform 140ms var(--ease-snap), box-shadow 140ms var(--ease-snap); -webkit-tap-highlight-color: transparent; } .piaty-tiedote-close:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-riso-3); } .piaty-tiedote-close:active { transform: translate(1px,1px); box-shadow: var(--shadow-riso-1); } .piaty-tiedote-meta { position: relative; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-tag); font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase; font-size: var(--t-tag); color: var(--piaty-black); opacity: .75; border-bottom: 2px solid var(--piaty-black); padding-bottom: var(--s-2); } .piaty-tiedote-eyebrow { position: relative; margin: var(--s-5) 0 0; font-family: var(--font-tag); font-weight: 700; letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-size: 12px; color: var(--piaty-red); } .piaty-tiedote-title { position: relative; margin: var(--s-2) 0 var(--s-5); font-family: var(--font-display); font-size: clamp(34px, 5.6vw, 64px); line-height: .95; text-transform: uppercase; text-wrap: balance; color: var(--piaty-black); } .piaty-tiedote-body { position: relative; } .piaty-tiedote-body p { font-family: var(--font-body); font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; margin: 0 0 var(--s-4); text-wrap: pretty; color: var(--piaty-black); } .piaty-tiedote-body p strong { font-weight: 700; } .piaty-tiedote-body p em { font-style: italic; } .piaty-tiedote-rule { position: relative; height: 6px; margin: var(--s-5_5) 0 var(--s-4); background: linear-gradient(90deg, var(--piaty-black) 0 32%, transparent 32% 44%, var(--piaty-red) 44% 78%, transparent 78% 100%); } .piaty-tiedote-quote { position: relative; margin: var(--s-4) 0; padding: var(--s-4); background: var(--piaty-black); color: var(--piaty-bone); border-left: 4px solid var(--piaty-red); } .piaty-tiedote-quote p { font-family: var(--font-body); font-size: clamp(14px, 1.4vw, 15.5px); line-height: 1.55; margin: 0 0 var(--s-2); color: var(--piaty-bone); font-style: italic; } .piaty-tiedote-quote cite { display: block; font-family: var(--font-tag); font-weight: 700; letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-size: var(--t-tag); color: var(--piaty-yellow); font-style: normal; } @media (max-width: 600px) { .piaty-tiedote-overlay { padding: var(--s-3) var(--s-2); } .piaty-tiedote-sheet { padding: var(--s-5) var(--s-4) var(--s-5_5); margin-bottom: var(--s-6); border-width: 2px; box-shadow: var(--shadow-riso-3); } .piaty-tiedote-close { top: -14px; right: -14px; width: 44px; height: 44px; } .piaty-tiedote-meta { font-size: 9.5px; letter-spacing: var(--track-eyebrow); flex-wrap: wrap; gap: var(--s-1_5); } .piaty-tiedote-title { font-size: clamp(26px, 8vw, 38px); margin: var(--s-1_5) 0 var(--s-4); overflow-wrap: anywhere; } .piaty-tiedote-body p { font-size: 14.5px; } }