/* =========================== FONTS =========================== */ @font-face { font-family: 'Kawoszeh'; src: url('../fonts/kawoszeh/otf/kawoszeh.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IDTFIdentifier'; src: url('../fonts/IDTF IDENTIFIER/IDTFIdentifier-0.1-Bold.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Concrete'; src: url('../fonts/concrete/Concrete.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Verdante'; src: url('../fonts/verdante/VerdanteSans-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Verdante'; src: url('../fonts/verdante/VerdanteSans-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Zalando Sans'; src: url('../fonts/zalando_sans/fonts/webfonts/ZalandoSans[wdth,wght,slnt].woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; } @font-face { font-family: 'Arteks Compact'; src: url('../fonts/arteks/Arteks Compact.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } /* =========================== VARIABLES =========================== */ :root { --dark: #0d1321; --mid: #1d2d44; --accent: #3e5c76; --muted: #748cab; --light: #ffffff; --ring-normal: #ffffff; --ring-hover: #000000; --ring-svg-scale: 1.12; --sb-track: transparent; --sb-thumb: rgba(240,235,219,0.016); --sb-thumb-hover:rgba(240,235,219,0.007); } /* =========================== RESET & BASE =========================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { overscroll-behavior: none; scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); } html:focus-within { scroll-behavior: smooth; } html, body { width: 100%; height: 100%; min-height: 100svh; background: #000; } @supports (height: 100dvh) { html, body { min-height: 100dvh; } } /* Lenis smooth scroll (ks. javascript.js) - suositellut perusluokat, joita Lenis itse lisää -elementille ajon aikana. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } body { overflow-x: hidden; color: #fff; font-family: 'Verdante', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* Sivu tummenee hieman heti kun sivunvaihto käynnistyy (ks. javascript.js), ennen kuin musta verho (.page-transition-overlay) ehtii peittää sen kokonaan. Oma erillinen kerros eikä esim. filter body:llä, koska filter ancestorilla rikkoisi kaikkien position:fixed-elementtien (ylapalkki, logo, pill-nav...) asemoinnin niiden omaan containing blockiin. */ .page-dim-overlay { position: fixed; inset: 0; background: #000; opacity: 0; z-index: 999998; pointer-events: none; transition: opacity .35s ease; } .page-dim-overlay.is-dim { opacity: .45; } @media (prefers-reduced-motion: reduce) { .page-dim-overlay { transition: none; } } /* Sivunvaihdon "verho": peittää koko ruudun mustalla ennen kuin oikeasti navigoidaan uuteen sivuun (ks. javascript.js), ja liukuu sitten pois uuden sivun latauduttua. Elementti on 26vh viewporttia korkeampi ja sen yläreunan pyöristys (border-radius 50%/50% molemmissa yläkulmissa - ne kohtaavat täsmälleen keskellä) muodostaa jatkuvan "aallon". Peittyminen tapahtuu KAHDESSA VAIHEESSA (ks. javascript.js): 1) translateY liu'uttaa koko muodon ylös kunnes aallon KESKIOSA (kärki) osuu tasan ruudun yläreunaan - reunat/sivut jäävät vielä hieman jälkeen (aalto näkyy). 2) transform PYSÄHTYY paikalleen ja sen sijaan border-radius kutistuu 26vh:sta 0:aan - reunat "sprinttaavat" kärjen tasalle ja aalto suoristuu paikallaan tasaiseksi viivaksi. */ .page-transition-overlay { position: fixed; left: 0; right: 0; bottom: 0; height: calc(100vh + 26vh); background: #000; border-radius: 50% 50% 0 0 / 26vh 26vh 0 0; z-index: 999999; pointer-events: none; transform: translateY(0); transition: transform .7s cubic-bezier(.5, 0, .75, 0), border-radius .18s ease-out; will-change: transform, border-radius; } @media (prefers-reduced-motion: reduce) { .page-transition-overlay { transition: none; } } /* Koko etusivun (näkymän) korkuiset punaiset pystyviivat reunoilla - position:fixed pitää ne aina koko ruudun korkuisina riippumatta scrollauksesta tai sivun kokonaispituudesta. */ img, video { max-width: 100vw; } /* =========================== SCROLLBAR =========================== */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--sb-track); } ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; border: 2px solid rgba(0,0,0,0); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); } /* =========================== SELECTION =========================== */ ::selection { background: rgba(255, 255, 255, .25); color: var(--muted); } ::-moz-selection { background: rgba(255, 255, 255, .25); color: var(--muted); } /* =========================== FOCUS / TAP =========================== */ *:focus { outline: none; } *:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; } @media (hover: hover) { *:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } } button, [role="button"], a, input, textarea, select { -webkit-tap-highlight-color: transparent; } button:focus { outline: none !important; } /* =========================== HELPERS =========================== */ .hidden { display: none !important; } .no-scroll { overflow: hidden; overscroll-behavior: none; } .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-link { position: absolute; top: -50px; left: 0; background: var(--dark); color: #fff; padding: 10px 16px; z-index: 99999; border-radius: 0 0 6px 0; font-size: 1rem; text-decoration: none; transition: top 0.2s ease; font-weight: 700; } .skip-link:focus { top: 0; outline: 3px solid var(--accent); } /* =========================== TYPOGRAPHY – base =========================== */ h1 { padding: 4rem 2rem; opacity: 0; transition: opacity 0.5s ease; } body.content-visible h1 { opacity: 1; } h2 { padding: 4rem 2rem; opacity: 0; transition: opacity 0.5s ease; } body.content-visible h2 { opacity: 1; } .hero-text h1 { font-family: 'Concrete', 'Kawoszeh', 'IDTFIdentifier', sans-serif !important; font-weight: 700; letter-spacing: 0.01em; } /* Kaikkien sivujen hero-otsikko samalla fontilla: index.html:n oma #hero h1, projektit.html:n .esittely-otsikko, sekä tietoa/paketit/yhteys-sivujen jaettu .hero-otsikko (h2) - jälkimmäinen ei ollut aiemmin mukana yllä olevassa .hero-text h1/.esittely-otsikko -säännössä (se on h1-spesifi, .hero-otsikko on h2), joten se peri body:n oletusfontin (Verdante). */ #hero .hero-text h1, .hero-otsikko, .esittely-otsikko { font-family: 'Arteks Compact', 'Concrete', 'Kawoszeh', 'IDTFIdentifier', sans-serif !important; font-weight: 400 !important; /* Arteks Compact -fontista on olemassa vain yksi (Regular) leikkaus - ei omaa lihavoitua versiota, ja font-weight:700 ei tee mitään koska fontti käyttää CFF/PostScript-ääriviivoja joille selaimet eivät tee synteettistä lihavointia. Paksuus tehdään sen sijaan ääriviivalla (text-stroke) fillin päälle, mikä pysyy myös kapean/korkean muodon yhteensopivana toisin kuin vaihto Arteksin leveämpiin Bold/Black-leikkauksiin. */ -webkit-text-stroke: 1.4px currentColor; } /* =========================== LIGHT MODE – base =========================== */ body.light-mode { background: #ffffff; color: var(--dark); } body.light-mode ::selection { background: transparent; color: var(--muted); } body.light-mode ::-moz-selection { background: transparent; color: var(--muted); } body.light-mode h1 { color: var(--dark); } body.light-mode h2 { color: var(--dark); } /* =========================== RING BUTTON =========================== */ :root { --ring-color: var(--ring-normal); } .ring-btn { position: fixed !important; right: 32px !important; bottom: 32px !important; left: auto !important; top: auto !important; z-index: 99999 !important; border: none; background: transparent; padding: 0; border-radius: 50%; width: 156px; height: 156px; cursor: pointer; overflow: visible; /* initial hidden state – JS animates in (rAF-lerp, ei CSS-transitiota ettei se kilpaile joka framen inline-arvonpäivityksen kanssa) */ opacity: 0; pointer-events: none; transform: translateX(180px) translateY(12px) scale(0.96); will-change: opacity, transform; --ring-color: var(--ring-normal); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .ring-btn.is-hiding { opacity: 0 !important; pointer-events: none !important; transform: translateX(-220px) translateY(6px) scale(0.96) !important; transition: opacity .12s ease, transform .18s cubic-bezier(.22,.61,.36,1) !important; } .ring-btn.is-hovered { --ring-color: var(--ring-hover); } /* keep the ring button behind the open side menu instead of poking through on top of it (.ylapalkki/header is z-index:100 and forms its own stacking context, so this must be < 100) */ body:has(.kylkipaneeli.näkyy) .ring-btn { z-index: 50 !important; } .ring-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 20px 45px rgba(0,0,0,.65)); transform: scale(var(--ring-svg-scale)); transform-origin: 50% 50%; } .ring-svg .stroke { fill: none; stroke: var(--ring-color); stroke-width: 3.2; } .ring-text { font-weight: 400; font-size: 32px; letter-spacing: 7px; fill: var(--ring-color); text-transform: uppercase; } .spin { transform-origin: 50% 50%; will-change: transform; } @media (prefers-reduced-motion: reduce) { .spin { animation: none !important; transform: none !important; } } .ring-center { position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; pointer-events: none !important; z-index: 3 !important; } .ring-center .stage { position: relative; width: 112px !important; height: 112px !important; } .ring-center .bg-logo { position: absolute; inset: 20%; opacity: 1; z-index: 1; transform: translate(1px, 3px); } .ring-center .bg-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .ring-center .bars { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) translateX(1px) scale(0.27) !important; height: auto !important; width: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 1px !important; z-index: 2; } .ring-center .bar { width: 20px; height: auto; display: block; } .ring-center .bar rect { fill: var(--ring-color); } /* ring mobile */ @media (max-width: 900px) { .ring-btn { width: 98px !important; height: 98px !important; right: 16px !important; bottom: 16px !important; transition: bottom .6s cubic-bezier(.16, 1, .3, 1) !important; } .ring-center .stage { width: 56px !important; height: 56px !important; } .ring-center .bars { transform: translate(-50%, -50%) scale(0.17) !important; } :root { --ring-svg-scale: 1.06; } .ring-text { font-size: 39px !important; letter-spacing: 3px !important; } /* alapalkin kohdalla nappi nousee vähän ylemmäs, ettei se peitä alapalkin sisältöä (ks. javascript.js "ring-btn: kun alapalkki tulee näkyviin") */ .ring-btn.near-footer { bottom: 60px !important; } } /* ring light mode */ body.light-mode { --ring-normal: #0d1321; --ring-hover: #ffffff; } body.light-mode .ring-btn { filter: drop-shadow(0 16px 32px rgba(13,19,33,.25)); } body.light-mode .ring-btn:active { transform: scale(0.96); } body.light-mode .ring-svg .stroke { stroke: var(--ring-color); } body.light-mode .ring-text { fill: var(--ring-color); opacity: 0.95; } body.light-mode .ring-center .bar rect { fill: var(--ring-color); } body.light-mode .ring-btn.is-hovered { --ring-color: var(--ring-hover); } /* =========================== HERO SECTION =========================== */ .hero { position: relative; height: 100vh; width: 100vw; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); pointer-events: auto; z-index: 3; overflow-x: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .hero-text { /* Yhtenäinen, portaaton leveyskaava kaikilla ruutukoilla - aiemmin täällä oli kiinteä 60vw ja ≤768px-breakpointissa erillinen 92vw, jolloin containerin leveys hyppäsi äkisti 768px-rajalla (esim. 706px -> 461px) vaikka fonttikoko muuttui portaattomasti - se hyppy sai h1:n rivittymään yllättäen 3-4 riville kapealla ikkuna-alueella juuri rajan tuntumassa. */ max-width: clamp(300px, 52vw + 160px, 1200px); margin: 20px auto 0; transform: translateY(-40px); text-align: center; -webkit-user-select: text; user-select: text; } .hero-text h1 { /* Yksi portaaton fonttikoon kaava kaikilla ruutukoilla (sama vw+px-periaate kuin .hero-text max-width yllä) - kolme erillistä breakpoint-kohtaista clamp-arvoa ei koskaan pysynyt synkassa containerin leveyden kanssa joka kohdassa, jolloin otsikko rivittyi yllättäen 3-4 riville tietyillä ikkunaleveyksillä vaikka reunoilla (esim. 390px, 1440px) näytti hyvältä. */ font-size: clamp(1.22rem, 4.9vw + 0.3rem, 5.6rem); margin-bottom: -1rem; font-weight: 800; line-height: 0.95; text-wrap: balance; } .hero-text p { font-size: clamp(1rem, 3.5vw, 1.3rem); line-height: 1.35; color: #fff; margin: 0.5rem auto 0; text-align: center; -webkit-user-select: text; user-select: text; } /* hero animate-in */ .hero-text h1, .hero-text p { opacity: 0; transform: scaleY(0); transform-origin: bottom center; filter: blur(10px); transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease; } .hero-text.visible h1 { opacity: 1; transform: scaleY(1); filter: blur(0); transition-delay: 0.1s; } .hero-text.visible p { opacity: 1; transform: scaleY(1); filter: blur(0); transition-delay: 0.4s; } /* hero buttons */ .hero-buttons-right { position: absolute; bottom: 8vh; left: 4vw; right: 4vw; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 10px; z-index: 109; pointer-events: none; width: auto; } .hero-buttons-right .hero-btn-static { pointer-events: auto; } .hero-buttons-right .hero-btn-static { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; } .hero-buttons-right.visible .hero-btn-static { opacity: 1; transform: translateY(0); } /* hero btn */ .hero-btn-static { position: relative; pointer-events: auto; width: 200px; height: auto; padding: 18px 32px; font-size: 1.3rem; background: none; color: #fff; border: 2px solid var(--muted); border-radius: 999px; cursor: pointer; line-height: 1.4; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 109; text-decoration: none; } .hero-btn-static:link, .hero-btn-static:visited { text-decoration: none; color: inherit; } .hero-btn-static:focus-visible { outline: 2px dashed currentColor; outline-offset: 4px; text-decoration: none !important; } .hero-btn-static:hover, .hero-btn-static:focus { border-color: var(--muted); background-color: transparent; } .hero-btn-static:hover .btn-text-static, .hero-btn-static:focus .btn-text-static { text-decoration: none !important; } /* "Nestemäinen" täyttöefekti: hoveratessa täyttö liukuu/venyy vasemmalta oikealle (transform-origin: left) koko napin levyiseksi. Hoverista poistuessa origin vaihtuu oikeaan reunaan JUURI ennen kutistumisen alkua (ei transitioida, joten vaihto ei näy hyppynä täydessä koossa) - täyttö siis kutistuu oikeaa reunaa kohti eikä "peru" itseään takaisin samaa reittiä jota se tuli. */ .hero-btn-blob { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 999px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.65, 0, .35, 1); z-index: 0; pointer-events: none; } .hero-btn-static .btn-text-wrapper-static { position: relative; z-index: 1; } .hero-btn-static:hover .hero-btn-blob, .hero-btn-static:focus-visible .hero-btn-blob { transform: scaleX(1); transform-origin: left; } .hero-btn-static .btn-text-static { transition: color .22s ease; } .hero-btn-static:hover .btn-text-static, .hero-btn-static:focus-visible .btn-text-static { color: var(--dark); } /* hero responsive */ /* Desktopin oma "vähän ylemmäs" -siirto (.hero-text transform: translateY(-40px) perussäännössä) ei kuulu mobiiliin/tablettiin - ilman tätä nollausta se pinoutuisi 768px-alueen oman "margin:-40px" -siirron PÄÄLLE, jolloin teksti nousisi turhan korkealle 481-768px-ikkunoilla. */ @media (max-width: 900px) { .hero-text { transform: none; } } @media (max-width: 768px) { .hero { height: 100svh; } .hero-text { margin: -40px auto 0; } .hero-text h1 { margin-bottom: 1rem; } .hero-text.visible p { transition-delay: 0.2s; } .hero-buttons-right { bottom: 6svh; } .hero-btn-static { width: 200px; padding: 12px 20px; font-size: 1rem; height: auto; } } @media (max-width: 900px) { .hero-btn-static:hover, .hero-btn-static:active { border: 2px solid var(--muted) !important; color: inherit !important; background: none !important; transform: none !important; } .hero-btn-static:hover .hero-btn-blob, .hero-btn-static:active .hero-btn-blob { transform: scaleX(0) !important; } .hero-btn-static:hover .btn-text-static, .hero-btn-static:active .btn-text-static { color: inherit !important; } } @media (max-width: 770px) { .hero-btn-static { transition: none !important; } .hero-btn-static:hover, .hero-btn-static:active { transform: none !important; height: auto !important; background: inherit !important; color: inherit !important; border: inherit !important; box-shadow: none !important; filter: none !important; } .hero-btn-blob { transition: none !important; } .hero-btn-static:hover .hero-btn-blob, .hero-btn-static:active .hero-btn-blob { transform: scaleX(0) !important; } .hero-btn-static:hover .btn-text-static, .hero-btn-static:active .btn-text-static { color: inherit !important; } } @media (hover: none) { .hero-btn-static { transition: none !important; } .hero-btn-static:hover, .hero-btn-static:active { transform: none !important; height: auto !important; background: inherit !important; color: inherit !important; border: inherit !important; box-shadow: none !important; } .hero-btn-blob { transition: none !important; } .hero-btn-static:hover .hero-btn-blob, .hero-btn-static:active .hero-btn-blob { transform: scaleX(0) !important; } .hero-btn-static:hover .btn-text-static, .hero-btn-static:active .btn-text-static { color: inherit !important; } } @media (max-width: 480px) { .hero { min-height: 100svh; padding: 12svh 5vw 18svh; flex-direction: column; justify-content: center; align-items: center; } .hero-text { margin: 0 auto !important; transform: none; text-align: center !important; } .hero-text h1 { /* Isompi kuin desktopin/tabletin 2-riviin pakotettu jatkuva kaava - mobiilissa teksti saa mennä useammalle kuin 2 riville. */ font-size: clamp(1.9rem, 9.5vw, 2.7rem); margin-bottom: .25rem; text-align: center !important; } .hero-text p { font-size: clamp(1rem, 4.2vw, 1.06rem); color: #d9e2f1; text-align: center !important; } .hero-buttons-right { position: absolute !important; left: 5vw !important; right: 5vw !important; transform: none !important; bottom: 8svh !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: clamp(10px, 3vw, 16px) !important; width: auto !important; } .hero-btn-static { min-width: 0 !important; width: clamp(150px, 47vw, 220px) !important; padding: 17px 16px !important; font-size: 1.05rem !important; border-radius: 999px !important; } } /* hero light mode */ body.light-mode .hero { color: var(--dark); } body.light-mode .hero-text h1 { color: var(--dark); } body.light-mode .hero-text p { color: var(--dark); } body.light-mode .hero-btn-static { color: var(--dark); } body.light-mode .hero-btn-static:hover, body.light-mode .hero-btn-static:focus { color: #fff !important; } /* =========================== CHATBOT =========================== */ #chatbot.chatbot { position: fixed; right: 4vw; bottom: 13vh; z-index: 10010; display: none; max-height: 88vh; } #chatbot.chatbot.open, #chatbot.chatbot[aria-hidden="false"] { display: block; } .chatbot-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 300ms ease; z-index: 9998; } .chatbot-backdrop.open { opacity: 1; pointer-events: auto; } .chatbot { position: fixed; right: 24px; bottom: 92px; width: min(92vw, 400px); max-height: 70vh; background: linear-gradient(180deg, rgba(20,20,20,0.92), rgba(12,12,12,0.92)); color: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,0.08); transform: translateY(24px) scale(0.98); opacity: 0; pointer-events: none; z-index: 9999; transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 320ms ease; } .chatbot.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .chatbot-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--mid); position: sticky; top: 0; backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,0.08); } .chatbot-title { font-weight: 700; } .chatbot-sub { font-size: .85rem; opacity: .8; } .chatbot-close { background: transparent; border: none; color: #fff; font-size: 30px; cursor: pointer; } .chatbot-messages { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; } .msg { padding: 10px 12px; border-radius: 12px; max-width: 80%; line-height: 1.35; font-size: .98rem; animation: msg-pop 260ms cubic-bezier(.2,.8,.2,1); -webkit-user-select: text; user-select: text; } .msg-bot { background: var(--mid); align-self: flex-start; } .msg-user { background: var(--accent); align-self: flex-end; } @keyframes msg-pop { 0% { transform: translateY(6px) scale(0.98); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .msg.typing { display: inline-flex; align-items: center; gap: 6px; } .typing-dots { display: inline-flex; gap: 4px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,0.08); } .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; animation: blink 1s infinite; } .typing-dots span:nth-child(2) { animation-delay: .15s; } .typing-dots span:nth-child(3) { animation-delay: .30s; } @keyframes blink { 0%, 80%, 100% { opacity: .2 } 40% { opacity: 1 } } .chatbot-form { display: flex; gap: 8px; padding: 10px; background: var(--dark); border-top: 1px solid rgba(255,255,255,.08); position: sticky; bottom: 0; } .chatbot-form input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: #111726; color: #fff; font-size: 1.1rem; } .chatbot-send { padding: 10px 14px; border-radius: 10px; border: none; background: var(--muted); color: var(--dark); font-weight: 700; cursor: pointer; } @media (max-width: 768px) { #chatbot.chatbot { bottom: 22svh; right: 4vw; max-height: 92vh; } } @media (max-width: 480px) { #chatbot.chatbot, #chatbot.chatbot.open, #chatbot.chatbot[aria-hidden="false"] { display: flex !important; } .chatbot { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; display: flex; flex-direction: column; overscroll-behavior: contain; padding-bottom: max(var(--kb-safe, 0px), env(safe-area-inset-bottom, 0px)); transition: padding-bottom 160ms ease; } .chatbot.open { opacity: 1 !important; pointer-events: auto !important; transform: none !important; } .chatbot-messages { flex: 1 1 auto; max-height: none !important; overflow: auto; padding: 12px; padding-bottom: 112px; } .chatbot-form { position: sticky; bottom: 0; background: inherit; z-index: 1; padding: 10px; gap: 10px; padding-bottom: max(var(--kb-safe, 0px), env(safe-area-inset-bottom, 0px)); } } /* chatbot light mode */ body.light-mode .chatbot { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,245,245,0.92)); color: var(--dark); border-color: rgba(0,0,0,0.08); } body.light-mode .chatbot-header { background: rgba(255,255,255,0.9); color: var(--dark); border-bottom: 1px solid rgba(0,0,0,0.08); } body.light-mode .chatbot-title { color: var(--dark); } body.light-mode .chatbot-sub { color: #263041; opacity: .85; } body.light-mode .chatbot-close { color: var(--dark); } body.light-mode .msg-bot { background: #eef2ff; color: var(--dark); } body.light-mode .msg-user { background: #e0f2fe; color: var(--dark); } body.light-mode .typing-dots { background: rgba(0,0,0,0.06); } body.light-mode .chatbot-form { background: transparent; border-top: 1px solid rgba(0,0,0,0.08); } body.light-mode .chatbot-form input { background: #fff; color: var(--dark); border: 1px solid rgba(0,0,0,0.12); } body.light-mode .chatbot-form input::placeholder { color: #4b5563; } body.light-mode .chatbot-send { background: var(--dark); color: #fff; } @media (max-width: 480px) { body.light-mode .chatbot { background: #fff; } body.light-mode .chatbot-header { background: #fff; } } /* =========================== ESITTELY SECTION =========================== */ .esittely-osio { position: relative; min-height: 70vh; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: clamp(8svh, 12svh, 14svh) 10vw; pointer-events: none; z-index: 3; } .esittely-tekstit { width: 52%; display: flex; flex-direction: column; gap: .4rem; } .esittely-otsikko { font-size: clamp(3rem, 6.6vw, 6rem); font-weight: 800; margin: 0 0 .25rem 0; color: #fff; letter-spacing: .01em; line-height: .9; opacity: 1; } .esittely-otsikko::after { content: ""; display: block; width: min(120px, 22vw); height: 3px; margin: .35rem 0 0; background: none; opacity: .55; } .esittely-kuvaus { font-size: clamp(1.05rem, 2.2vw, 1.55rem); color: var(--muted); line-height: 1.35; max-width: 60ch; margin: .2rem 0 0 0; -webkit-user-select: text; user-select: text; } .esittely-kuvaus .proj-row-wrap { display: block; } .esittely-kuvaus .proj-row { display: inline-block; transform-origin: left center; will-change: transform, opacity; } @keyframes projFlipUp { from { transform: translateY(30px) rotateX(18deg); opacity: 0; } 60% { transform: translateY(-4px) rotateX(0deg); opacity: 1; } to { transform: translateY(0); opacity: 1; } } .esittely-kuvaus.animated .proj-row { animation: projFlipUp 0.9s cubic-bezier(0.19,1,0.22,1) both; } .esittely-kuvaus.animated .proj-row-wrap:nth-child(2) .proj-row { animation-delay: 0.18s; } #projekteja .esittely-kuvaus { margin-top: .2rem; } /* slide text effect */ .slide-left, .slide-right { display: inline-block; transform: translateX(-40%); transition: transform .36s ease-out, color .36s ease; color: transparent; background: linear-gradient(90deg, var(--light) 0%, var(--light) var(--paint,0%), var(--muted) var(--paint,0%)); -webkit-background-clip: text; background-clip: text; } .slide-right { transform: translateX(40%); } .slide-left { margin-right: .12rem; } .slide-right { margin-left: .12rem; } .esittely-left, .esittely-right { color: transparent; background: linear-gradient(90deg, var(--light) 0%, var(--light) var(--paint,0%), var(--muted) var(--paint,0%)); -webkit-background-clip: text; background-clip: text; transition: transform .36s ease-out; } /* esittely responsive */ @media (max-width: 900px) { .esittely-osio { min-height: auto; padding: 9svh 6vw 7svh; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .8rem; } .esittely-tekstit { width: 100%; align-items: center; } #projekteja .esittely-otsikko { margin-left: 0 !important; margin-top: 0 !important; } .esittely-otsikko { font-size: clamp(2.4rem, 10.2vw, 3.6rem); margin: 0 0 .4rem 0; } .esittely-kuvaus { font-size: clamp(1rem, 4.3vw, 1.25rem); line-height: 1.4; max-width: 92vw; margin: 0 auto; } .esittely-left { transform: translateX(-45%); } .esittely-right { transform: translateX(45%); } .slide-left { transform: translateX(-45%); } .slide-right { transform: translateX(45%); } #projekteja .esittely-left, #projekteja .esittely-right { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #fff !important; } } @media (max-width: 480px) { .esittely-osio { padding: 8svh 5vw 6svh; } .esittely-otsikko { font-size: clamp(2.2rem, 11vw, 3rem); } .esittely-kuvaus { font-size: clamp(.98rem, 4.4vw, 1.15rem); } } @media (prefers-reduced-motion: reduce) { .esittely-left, .esittely-right { transform: none !important; } } /* esittely light mode */ body.light-mode .esittely-osio { color: var(--dark); } body.light-mode .esittely-otsikko { color: var(--dark); } body.light-mode .esittely-kuvaus { color: var(--dark); } body.light-mode .slide-left, body.light-mode .slide-right, body.light-mode .esittely-left, body.light-mode .esittely-right { color: transparent; background: linear-gradient(90deg, var(--dark) 0%, var(--dark) var(--paint,0%), var(--muted) var(--paint,0%)); -webkit-background-clip: text; background-clip: text; } body.light-mode #projekteja .esittely-left, body.light-mode #projekteja .esittely-right { color: var(--dark) !important; } /* =========================== JATTIOSIO =========================== */ .jattiosio { position: relative; pointer-events: none; padding: 8vh 6vw; color: #fff; display: flex; flex-direction: column; gap: 10vh; overflow-x: hidden; z-index: 3; } .jatti-rivi { display: flex; justify-content: space-between; align-items: center; gap: 5vw; } .jatti-rivi.peilattu { display: flex; justify-content: space-between; align-items: center; gap: 5vw; } .jatti-rivi.peilattu .jatti-teksti { order: 2; width: 44%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; } .jatti-rivi.peilattu .tekstit-ja-nappi { align-items: flex-start; text-align: left; } .jatti-rivi.peilattu .jatti-teksti h2 { margin-left: 0; } .jatti-rivi.peilattu .jatti-teksti p { text-align: left; } .jatti-rivi.peilattu .jatti-laatikko { order: 1; width: 50%; } .jatti-teksti { width: 44%; font-size: 1.25rem; line-height: 1.65; color: #d9e2f1; display: flex; flex-direction: column; align-items: flex-start; will-change: transform, opacity; } .jatti-teksti h2 { font-size: clamp(3.5rem, 3.6vw, 5rem); margin: -2rem 0 -2rem 0; color: #fff; text-align: left; /* the global `h2 { opacity: 0 }` rule waits for a body.content-visible class that never gets added anywhere, which left these titles permanently invisible */ opacity: 1; /* the global `h2 { padding: 4rem 2rem }` rule was pushing the title 2rem to the right of the description/button below it, breaking the left alignment */ padding-left: 0; padding-right: 0; /* same global rule's 64px bottom padding pushed the description/button far below the title; pull it in tight and control the gap with a small margin instead */ padding-bottom: 0; margin-bottom: .5rem; } .jatti-teksti p { -webkit-user-select: text; user-select: text; } .tekstit-ja-nappi { display: flex; flex-direction: column; align-items: flex-start; } .tekstit-ja-nappi button, .jatti-teksti button { margin-top: 2rem; /* alaviiva on 6px hoverattavan laatikon alareunasta (ei ihan kiinni siinä), jotta hover-alue ulottuu myös viivan alle asti eikä katkea tarkalleen viivan kohdalla - ks. ::before bottom-arvo alla */ padding: 0 0 20px; border: none; background: transparent; border-radius: 0; color: #fff; font-family: ui-monospace, 'SF Mono', 'Courier New', Consolas, monospace; font-weight: 500; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; overflow: visible; position: relative; z-index: 109; height: auto; line-height: 1.4; width: fit-content; max-width: 100%; padding-right: 1.5rem; } .tekstit-ja-nappi button .btn-text-wrapper-static, .jatti-teksti button .btn-text-wrapper-static { position: relative; top: 4px; } /* animated underline: old line shrinks toward the right while a second line (the .katso-line-grow element, not a pseudo - ::after is already the arrow) starts growing in from the left before the old one has fully vanished, so the two overlap briefly instead of leaving a dead gap in between */ .tekstit-ja-nappi button::before, .jatti-teksti button::before { content: ''; position: absolute; left: 0; bottom: 6px; /* sama matka kuin kirjainten leviäminen hoverissa (translateX(90px)), jotta viiva ulottuu täsmälleen yhtä pitkälle kuin kirjaimetkin, ei nappia leveämmälle */ width: calc(100% + 90px); height: 1px; background: var(--light); transform: scaleX(1); transform-origin: right center; } .tekstit-ja-nappi button .katso-line-grow, .jatti-teksti button .katso-line-grow { position: absolute; left: 0; bottom: 6px; width: calc(100% + 90px); height: 1px; background: var(--light); transform: scaleX(0); transform-origin: left center; pointer-events: none; } .tekstit-ja-nappi button.line-forward::before, .jatti-teksti button.line-forward::before { animation: katsoLineShrink 1.6s; } .tekstit-ja-nappi button.line-forward .katso-line-grow, .jatti-teksti button.line-forward .katso-line-grow { animation: katsoLineGrow 1.6s; } /* mouseleave plays the exact time-reverse of the hover-in animation, via JS-toggled class */ .tekstit-ja-nappi button.line-reverse::before, .jatti-teksti button.line-reverse::before { animation: katsoLineShrinkReverse 1.6s; } .tekstit-ja-nappi button.line-reverse .katso-line-grow, .jatti-teksti button.line-reverse .katso-line-grow { animation: katsoLineGrowReverse 1.6s; } /* Kutistuminen: nopea alkuun, hidastuu mitä lyhyemmäksi tulee. Pysyy piilossa lopun ajan - kasvu hoidetaan kokonaan erillisellä .katso-line-grow-elementillä. */ @keyframes katsoLineShrink { 0% { transform-origin: right center; transform: scaleX(1); animation-timing-function: cubic-bezier(.5, 1, .89, 1); } 55% { transform-origin: right center; transform: scaleX(0); } 100% { transform-origin: right center; transform: scaleX(0); } } @keyframes katsoLineShrinkReverse { 0% { transform-origin: left center; transform: scaleX(1); animation-timing-function: cubic-bezier(.5, 1, .89, 1); } 55% { transform-origin: left center; transform: scaleX(0); } 100% { transform-origin: left center; transform: scaleX(0); } } /* Kasvu alkaa jo 35%:ssa - eli ennen kuin vanha viiva on 55%:ssa kokonaan kutistunut - jotta kutistuva ja kasvava viiva näkyvät hetken päällekkäin. Ei opacityä missään vaiheessa - pelkkä scaleX hoitaa katoamisen/ilmestymisen. */ @keyframes katsoLineGrow { 0% { transform-origin: left center; transform: scaleX(0); } 35% { transform-origin: left center; transform: scaleX(0); } 35.01% { transform-origin: left center; transform: scaleX(0.001); animation-timing-function: cubic-bezier(.55, .06, .68, .19); } 100% { transform-origin: left center; transform: scaleX(1); } } @keyframes katsoLineGrowReverse { 0% { transform-origin: right center; transform: scaleX(0); } 35% { transform-origin: right center; transform: scaleX(0); } 35.01% { transform-origin: right center; transform: scaleX(0.001); animation-timing-function: cubic-bezier(.55, .06, .68, .19); } 100% { transform-origin: right center; transform: scaleX(1); } } /* arrow sits on the right at rest; on hover it squishes flat as the letters reach it, then reappears on the left in the space the letters vacated. Leaving reverses it: squishes flat on the left, then pops back in on the right. */ .tekstit-ja-nappi button::after, .jatti-teksti button::after { content: '\2192'; font-family: inherit; position: absolute; top: 42%; right: -90px; left: auto; transform: translateY(-50%) scaleY(1); } .tekstit-ja-nappi button:hover, .jatti-teksti button:hover { background-color: transparent; color: #fff; } .tekstit-ja-nappi button.line-forward::after, .jatti-teksti button.line-forward::after { animation: katsoArrowFadeExtended 1.6s forwards; } .tekstit-ja-nappi button.line-reverse::after, .jatti-teksti button.line-reverse::after { animation: katsoArrowFadeExtendedReverse 1.6s forwards; } @keyframes katsoArrowSquishMove { 0% { right: 0; left: auto; transform: translateY(-50%) scaleY(1); animation-timing-function: ease-in; } 40% { right: 0; left: auto; transform: translateY(-50%) scaleY(0); } 40.01% { right: auto; left: 0; transform: translateY(-50%) scaleY(0); animation-timing-function: ease-out; } 100% { right: auto; left: 0; transform: translateY(-50%) scaleY(1); } } @keyframes katsoArrowSquishMoveReverse { 0% { right: auto; left: 0; transform: translateY(-50%) scaleY(1); animation-timing-function: ease-in; } 40% { right: auto; left: 0; transform: translateY(-50%) scaleY(0); } 40.01% { right: 0; left: auto; transform: translateY(-50%) scaleY(0); animation-timing-function: ease-out; } 100% { right: 0; left: auto; transform: translateY(-50%) scaleY(1); } } @keyframes katsoArrowFadeExtended { 0% { right: -90px; left: auto; opacity: 1; transform: translateY(-50%) scale(1); } 45% { right: -90px; left: auto; opacity: 0; transform: translateY(-50%) scale(0); } 45.01% { right: auto; left: 0; opacity: 0; transform: translateY(-50%) scale(0); } 100% { right: auto; left: 0; opacity: 1; transform: translateY(-50%) scale(1); } } @keyframes katsoArrowFadeExtendedReverse { 0% { right: auto; left: 0; opacity: 1; transform: translateY(-50%) scale(1); } 45% { right: auto; left: 0; opacity: 0; transform: translateY(-50%) scale(0); } 45.01% { right: -90px; left: auto; opacity: 0; transform: translateY(-50%) scale(0); } 100% { right: -90px; left: auto; opacity: 1; transform: translateY(-50%) scale(1); } } .katsoProjektiBtn { position: relative; overflow: visible; } /* all letters travel the same distance to the right edge on hover, but the rightmost letter starts first and the rest follow after it, right to left. Returning back reverses the wave: the leftmost letter starts first, left to right. */ .katsoProjektiBtn .btn-text-wrapper-static .letter { display: inline-block; white-space: pre; transition: transform calc(.65s + var(--i, 0) * .065s) cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * .065s); } .katsoProjektiBtn:hover .btn-text-wrapper-static .letter { transform: translateX(90px); transition-duration: calc(.65s + (var(--total, 0) - var(--i, 0)) * .065s); transition-delay: calc((var(--total, 0) - var(--i, 0)) * .065s); } .jatti-laatikko { width: 50%; height: clamp(320px, 52vh, 620px); background-color: var(--mid); border-radius: 16px; display: flex; justify-content: center; align-items: center; color: #fff; pointer-events: none; will-change: transform, opacity; contain: paint; backface-visibility: hidden; } .jatti-laatikko.clickable { pointer-events: auto; } .jatti-laatikko.vasen { transform: translateX(-25vw) rotate(-8deg); } .jatti-laatikko.oikea { transform: translateX( 25vw) rotate( 8deg); } .jatti-laatikko.visible { transform: translateX(0) rotate(0deg); opacity: 1; } /* images inside jatti-box */ .jatti-laatikko, .jatti-laatikko img { border-radius: 16px !important; clip-path: none !important; } .jatti-laatikko picture, .jatti-laatikko img { display: block; width: 100%; height: auto !important; max-width: 100%; } .jatti-laatikko.oikea { position: relative; overflow: hidden; } .jatti-laatikko.oikea img, .jatti-laatikko.oikea picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; display: block; } .jatti-laatikko img { object-fit: cover; object-position: center; } /* jattiosio responsive */ @media (max-width: 1200px) { .jatti-teksti { width: 48%; } .jatti-rivi.peilattu .jatti-teksti { width: 48%; } .jatti-laatikko { width: 48%; height: clamp(280px, 48vh, 560px); } } @media (max-width: 900px) { .jattiosio { padding: 6vh 6vw; gap: 6vh; } .jatti-rivi, .jatti-rivi.peilattu { flex-direction: column; align-items: stretch; gap: 0.6rem; } .jatti-teksti { width: 100%; align-items: flex-start; text-align: left; font-size: 1.1rem; line-height: 1.55; } .jatti-rivi.peilattu .jatti-teksti { order: 1; width: 100%; align-items: flex-start; text-align: left; } .jatti-rivi.peilattu .tekstit-ja-nappi { align-items: flex-start; text-align: left; } .jatti-teksti h2 { font-size: clamp(1.6rem, 6.2vw, 2.2rem); margin: 0 0 0.1rem 0; text-align: left; } .jatti-laatikko { width: 100%; height: clamp(220px, 36vh, 440px); transform: none; background: transparent !important; border: none !important; } .jatti-rivi.peilattu .jatti-laatikko { order: 2; width: 100%; } .jatti-rivi.peilattu { flex-direction: column; } .jatti-teksti.visible { transform: none; } .jatti-rivi .jatti-teksti { transform: none; } } @media (max-width: 480px) { .jatti-rivi.peilattu .jatti-teksti, .jatti-rivi.peilattu .tekstit-ja-nappi { align-items: flex-start; text-align: left; } } /* jattiosio light mode */ body.light-mode .jattiosio { color: var(--dark); } body.light-mode .jatti-teksti { color: var(--dark); } body.light-mode .jatti-teksti h2 { color: var(--dark); } body.light-mode .jatti-rivi, body.light-mode .jatti-rivi.peilattu { color: var(--dark); } body.light-mode .jatti-laatikko { background-color: #ffffff; border: 2px solid var(--muted); color: var(--dark); } body.light-mode .jatti-latvaikko.vasen { transform: translateX(-25vw) rotate(-8deg); } body.light-mode .jatti-latvaikko.oikea { transform: translateX( 25vw) rotate( 8deg); } body.light-mode .jatti-latvaikko.visible { transform: translateX(0) rotate(0deg); opacity: 1; } body.light-mode .tekstit-ja-nappi button, body.light-mode .jatti-teksti button { color: var(--dark); border: none; border-bottom: 1px solid var(--dark); background: transparent; } body.light-mode .tekstit-ja-nappi button:hover, body.light-mode .jatti-teksti button:hover { color: var(--dark); background-color: transparent; border-bottom-color: var(--accent); } /* =========================== REDUCED MOTION =========================== */ @media (prefers-reduced-motion: reduce) { html, body { scroll-behavior: auto !important; } *, *::before, *::after { animation: none !important; transition: none !important; } .hero-text h1, .hero-text p { opacity: 1 !important; transform: none !important; filter: none !important; } } .ylapalkki { position: fixed; z-index: 100; display: flex; justify-content: space-between; align-items: center; } .menu-label, .hero-lines, .corner-image.with-overlay, .hero-x { will-change: transform, opacity; transform: translateZ(0); } .corner-image.with-overlay { position: fixed; top: 3.5vh; left: 4vw; width: 118px; height: auto; z-index: 999; pointer-events: auto; } .corner-image.with-overlay img { width: 100%; height: auto; object-fit: contain; display: block; position: relative; cursor: pointer; pointer-events: auto; } .corner-image .image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; pointer-events: none; z-index: 3; } @media (max-width: 480px){ .corner-image.with-overlay{ position: fixed !important; top: clamp(1.6rem, 3.6vh, 2.4rem) !important; left: 3vw !important; width: 96px; height: 28px; z-index: 1001; pointer-events: none; transform: none !important; margin: 0 !important; } .corner-image{ transform: none !important; } .corner-image.visible{ transform: none !important; } .corner-image.with-overlay img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: none; } .corner-image.with-overlay .image-overlay{ display: none !important; } } @media (min-width: 481px) and (max-width: 900px){ .corner-image.with-overlay{ position: fixed; top: 2.4svh; left: 3vw; width: 110px; height: 110px; z-index: 30; pointer-events: none; } .corner-image.with-overlay img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: none; } .corner-image.with-overlay .image-overlay{ display: none !important; } } .hero-upper-wrapper { position: relative; width: 100%; height: 0; pointer-events: none; } .menu-label { position: fixed; top: calc(12% - 7.5vh); right: calc(2vw + 5.5vw); color: #ffffff; font-weight: 700; font-size: 1.1rem; user-select: none; pointer-events: auto; z-index: 901; cursor: pointer; padding-left: 50px; padding-bottom: 40px; opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0.3s ease; } .menu-label.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .menu-label:hover { color: #0d1321; } .hero-lines { pointer-events: auto; position: fixed; top: calc(12% - 7.5vh); right: 3vw; left: auto; height: 11vh; display: flex; flex-direction: column; justify-content: space-between; z-index: 900; transform: scaleX(1); cursor: pointer; transition: top 0.4s ease, opacity 0.3s ease; } .hero-lines.keskella { top: 43vh; opacity: 0; pointer-events: none; } .hero-x{ position: fixed; top: calc(15% - 7.5vh); right: 3vw; z-index: 902; width: 40px; height: 40px; background: transparent; border: none; color: #ffffff; cursor: pointer; padding: 4px; border-radius: 4px; opacity: 0; pointer-events: none; transition: top 0.4s ease, opacity 0.3s ease, transform 0.15s ease; } .hero-x:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; } .hero-x:hover{ transform: scale(1.04); } body.light-mode .hero-x{ color:#0d1321; } .hero-x{ display: inline-flex; align-items: center; justify-content: center; gap: 0; } .hero-x .xbar{ position: absolute; width: 28px; height: 3.5px; background: currentColor; border-radius: 2px; transform-origin: 50% 50%; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .hero-x .xbar.top{ transform: translateY(-4px) rotate(0deg); } .hero-x .xbar.bottom{ transform: translateY( 4px) rotate(0deg); } .hero-lines.keskella ~ .hero-x .xbar.top{ transform: translateY(0) rotate(45deg); } .hero-lines.keskella ~ .hero-x .xbar.bottom{ transform: translateY(0) rotate(-45deg); } .hero-lines.keskella ~ .hero-x{ top: 47vh; opacity: 1; pointer-events: auto; } @media (max-width: 480px){ .hero-x{ top: 4.5svh; right: 7.5vw; } .hero-lines.keskella ~ .hero-x{ top: 4.5svh; } } .hero-lines.keskella .line-unit{ opacity: 0; } .line-unit { width: 35px; height: 4px; border-radius: 2px; transition: background-color 0.3s ease, transform 0.4s ease, opacity 0.4s ease; } .menu-label, .hero-lines, .corner-image, .corner-image.with-overlay { opacity: 0; transform: translateY(-30px); transition: opacity 0.6s ease, transform 0.6s ease; pointer-events: none; } .menu-label.visible, .hero-lines.visible, .corner-image.visible, .corner-image.with-overlay.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Sama "tulee esille hetken päästä" -efekti kuin logossa (.corner-image), nyt myös yläpalkin Jutellaan/Menu-pilleille (.pill-nav). Ei omaa pointer-events-arvoa, jotta napin normaali klikattavuus (ks. .pill-nav { pointer-events: auto }) säilyy koskemattomana. */ .pill-nav { opacity: 0; transform: translateY(-30px); transition: opacity 0.6s ease, transform 0.6s ease; } .pill-nav.visible { opacity: 1; transform: translateY(0); } .sivupaneeli { position: fixed; top: 0; right: 0; width: 120px; height: 20vh; background-color: #0d1321; transform: translateX(100%); transition: transform 0.4s ease, height 0.4s ease; z-index: 804; pointer-events: auto; overflow: hidden; box-sizing: border-box; border-radius: 0 0 0 50px ; } body.light-mode .ylapalkki { background-color: #ffffff; } body.light-mode .sivupaneeli { background-color: #ffffff; } body.light-mode .menu-label { color: #0d1321; } body.light-mode .menu-label:hover { color: #ffffff; } .hero-lines .line-unit { background-color: #cdcdce; } .hero-lines .line-unit.line-unit-long { background-color: #ffffff; } .hero-lines .line-unit.hovering { background-color: #1d2d44; } .hero-lines:hover .line-unit, .hero-lines.hovered .line-unit { background-color: #0d1321 !important; transition: background-color 0.25s ease; } body.light-mode .hero-lines:hover .line-unit, body.light-mode .hero-lines.hovered .line-unit { background-color: #ffffff !important; } body.light-mode .hero-lines .line-unit { background-color: #0d1321; } body.light-mode .hero-lines .line-unit.hovering { background-color: #ffffff; } body.light-mode .hero-lines.keskella .line-unit:nth-child(1), body.light-mode .hero-lines.keskella .line-unit:nth-child(2) { background-color: #0d1321; } .sivupaneeli.näkyy { transform: translateX(0%); } .sivupaneeli.korkea { height: 100vh; } .sivupaneeli.korkea::before { content: ''; position: absolute; left: 0; top: 0; width: 6px; height: 100%; background-color: #ffffff; z-index: 1; clip-path: polygon( 50% 0%, 40% 10%, 30% 20%, 25% 30%, 22% 40%, 20% 50%, 22% 60%, 25% 70%, 30% 80%, 40% 90%, 50% 100% ); } .kylkipaneeli { position: fixed; top: 0; right: 0; width: 430px; height: 100vh; background-color: #0d1321; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3); z-index: 803; pointer-events: auto; border-radius: 30px 0 0 30px; transform: translateX(100%); transition: transform 0.6s ease; } .kylkipaneeli.näkyy { transform: translateX(0); } @media (max-width: 900px){ .kylkipaneeli { width: 100vw; border-radius: 0; } .kylki-socials { margin-top: 2.5rem; } } @media (max-width: 480px){ .kylkipaneeli{ --tools-h: 56px; padding-top: calc(var(--tools-h) + 16px); } .kylkipaneeli:has(.kylki-haku), .kylkipaneeli:has(.hakupalkki), .kylkipaneeli:has(.searchbar), .kylkipaneeli:has([data-search-visible]){ --tools-h: 92px; } .kylkipaneeli .kylki-tools{ position: sticky; top: max(0px, env(safe-area-inset-top)); height: var(--tools-h); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 16px; z-index: 1300; } .kylkipaneeli .kylki-tools > *{ flex: 0 0 auto; } .kylkipaneeli .kylki-close{ position: fixed; top: 20svh !important; right: 35px !important; } } /* =============================== LIGHT MODE – KYLKIPANEELI =============================== */ body.light-mode .kylkipaneeli { background-color: #ffffff; /* sama beige kuin muu light mode */ box-shadow: -12px 0 30px rgba(13, 19, 33, 0.08); } /* Valikkotekstit */ body.light-mode .kylkipaneeli .valikko-kohta { color: #0d1321; } body.light-mode .kylkipaneeli .valikko-kohta:hover { color: #748cab; } /* Sulje-nappi */ body.light-mode .kylkipaneeli .kylki-close { color: #0d1321; } /* Sosiaali-ikonit */ body.light-mode .kylki-socials .somet-circle { border-color: #748cab; background-color: transparent; color: #0d1321; } body.light-mode .kylki-socials .somet-circle:hover { background-color: #0d1321; color: #ffffff; } /* Kielivalitsin + työkalut */ body.light-mode .kylkipaneeli .lang-toggle-circle { background-color: #ffffff; } body.light-mode .kylkipaneeli .lang-text { color: #0d1321; } .kylkipaneeli.näkyy { right: 0; } .kylki-valikko { position: absolute; top: 27% !important; right: 40%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1.2vh; width: 70%; align-items: flex-end; } .valikko-kohta { font-size: 1.3rem; color: #748cab; font-weight: 500; cursor: pointer; transition: transform 0.3s ease, color 0.3s ease; width: 100%; text-align: right; } .kylki-socials { position: absolute; bottom: 5vh; right: 40%; display: flex; gap: 0.75vw; z-index: 900; } .kylki-socials .somet-circle { width: 43px; height: 43px; border: 2px solid #1d2d44; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 5px; box-sizing: border-box; cursor: pointer; background-color: transparent; color: #ffffff; /* SVG currentColor */ transition: background-color 0.3s ease, color 0.3s ease; } /* IMG + SVG yhteiset */ .kylki-socials .somet-circle img, .kylki-socials .somet-circle svg { width: 80%; height: 80%; object-fit: contain; display: block; } /* LinkedIn vähän pienemmäksi ja siistimmäksi */ /* Instagram & Facebook hieman pienemmiksi */ .kylki-socials .somet-circle[aria-label="Instagram"] svg { width: 76%; height: 76%; } .kylki-socials .somet-circle[aria-label="Facebook"] svg { width: 74%; height: 74%; } /* LinkedIn vähän pienemmäksi ja siistimmäksi */ .kylki-socials .somet-circle[aria-label="LinkedIn"] svg { width: 68%; height: 68%; transform: translateX(2px); } /* PNG-kuvat valkoiseksi */ .kylki-socials .somet-circle img { filter: invert(1) brightness(2); } /* SVG:t valkoisiksi */ .kylki-socials .somet-circle svg { stroke: currentColor; fill: none; } /* Hover */ .kylki-socials .somet-circle:hover { background-color: #ffffff; color: #0d1321; } .kylki-socials .somet-circle:hover img { filter: none; } /* Pienet ikonikohtaiset säädöt */ .kylki-socials .somet-circle img[alt="WhatsApp"]{ transform: scale(1.1); } .kylki-socials .somet-circle[aria-label="Email"] svg { transform: scale(1.12); } .kylki-socials .somet-circle img[alt="TikTok"]{ transform: scale(0.97); } .icon-button img { object-fit: contain; filter: brightness(1.5) invert(1); } .logo-container { position: fixed; top: 1.5vh; left: 1.5vw; z-index: 20; width: 120px; height: auto; } .logo-container img { width: 100%; height: auto; object-fit: contain; user-select: none; pointer-events: none; } :root{ --lang-shift: 0px; } .lang-toggle-wrapper { position: fixed; top: 3.7vh; left: 50%; transform: translate(-50%, var(--lang-shift)); transition: transform .25s ease-out; display: flex; gap: 10px; z-index: 900; pointer-events: auto; } .kylkipaneeli .lang-toggle-wrapper{ display: none; } @media (max-width: 480px){ .ylapalkki .lang-toggle-wrapper{ display: none !important; } .kylkipaneeli .lang-toggle-wrapper{ display: flex !important; position: absolute; top: 20svh !important; left: 50%; transform: translate(-50%, var(--lang-shift)); gap: 12px; z-index: 1301; } .kylkipaneeli .lang-toggle-circle{ opacity: 1 !important; transform: none !important; } @media (max-width: 480px){ .kylkipaneeli .kylki-valikko{ position: absolute; top: 10.5rem; left: 50%; transform: translate(-50%, var(--kylki-valikko-shift)); transition: transform 0.25s ease-out; width: 88%; display: flex; flex-direction: column; align-items: center; gap: 1.2vh; } } } .lang-toggle-circle { position: relative; width: 30px; height: 30px; /* sama tyyli kuin .pill-menu ("Menu"-napissa): läpinäkyvä tausta, valkoinen reunaviiva */ background: transparent; border: 1px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; z-index: 10; /* Ei enää omaa piiloa/sisääntuloa (oli ennen erillinen translateY(30px)-liuku alhaalta) - näkyvyys ja "ylhäältä alas" -ilmestyminen tulevat nyt yksin vanhemman .pill-nav:n omasta opacity/translateY(-30px)-siirtymästä, ihan kuten Jutellaan- ja Menu-napeillakin (ks. .pill-nav / .pill-nav.visible). */ transition: background-color .2s ease; will-change: transform; } .lang-toggle-circle.animate-in { opacity: 1; transform: translateY(0); } .lang-text { position: absolute; font-size: 13px; font-weight: 600; color: #fff; user-select: none; transition: opacity 0.3s ease; pointer-events: none; } .lang-text.en { opacity: 0; } .lang-toggle-circle:hover { background: transparent; border-color: #fff; } .lang-toggle-circle.fi-active .lang-text.en { opacity: 1; } .lang-toggle-circle.fi-active .lang-text.fi { opacity: 0; } .lang-text.en { opacity: 0; } .lang-toggle-circle.fi-active .lang-text.en { opacity: 1; } .lang-toggle-circle.fi-active .lang-text.fi { opacity: 0; } .icon-button img, .search-icon img { object-fit: contain; transition: filter 0.18s ease-in-out; } .icon-button img { width: 50%; height: 50%; filter: brightness(1.5) invert(1); } .search-icon img { width: 50%; height: 50%; filter: brightness(1.5) invert(1); } .icon-button:hover img, .search-icon:hover img { filter: invert(11%) sepia(19%) saturate(6961%) hue-rotate(198deg) brightness(96%) contrast(101%); } .lang-toggle-circle.input-active img { filter: brightness(1.5) invert(1); } .search-wrapper { position: relative; display: inline-block; } .lang-toggle-circle .search-input { position: absolute; top: 0; left: 40px; width: 0; height: 40px; opacity: 0; border: none; outline: none; background-color: #3e5c765f; color: white; font-size: 14px; padding-left: 15px; border-radius: 20px; transition: width 0.3s ease, opacity 0.3s ease; user-select: text; pointer-events: none; z-index: 5; } .lang-toggle-circle.expanded .search-input { width: 160px; opacity: 1; pointer-events: auto; } .search-suggestions { position: absolute; top: 45px; left: 40px; width: 160px; max-height: 200px; overflow-y: auto; background: #0d1321; color: #ffffff; border-radius: 6px; list-style: none; margin: 0; padding: 5px 0; display: none; z-index: 10; } .search-suggestions li { padding: 8px 12px; cursor: pointer; } .search-suggestions li:hover { background: #748cab; } .search-suggestions mark, .mobile-search-suggestions mark { background-color: rgba(116, 140, 171, 0.28); color: inherit; padding: 0 2px; border-radius: 3px; font-weight: 700; } body.light-mode .search-suggestions mark, body.light-mode .mobile-search-suggestions mark { background-color: rgba(116, 140, 171, 0.20); } body.no-scroll{ overflow:hidden; } @media (max-width: 480px){ .lang-toggle-circle.search-icon.mobile-open{ position: fixed; top: 0; left: 0; right: 0; width: 100vw; height: auto; border-radius: 0; z-index: 1400; background: #0d1321; display: block; padding: 10px 12px; } .lang-toggle-circle.search-icon.mobile-open img{ display:none; } .lang-toggle-circle.search-icon.mobile-open .search-input{ position: relative; left: 0; top: 0; width: 100% !important; height: 48px; opacity: 1; pointer-events: auto; border-radius: 12px; border: 1px solid #748cab; background: #3e5c765f; color: #ffffff; } .lang-toggle-circle.search-icon.mobile-open .search-suggestions{ position: fixed; top: 58px; left: 0; right: 0; width: 100vw; max-height: 60vh; background: #0d1321; border-top: 1px solid rgba(255,255,255,0.06); display: none; z-index: 1399; } .lang-toggle-circle.search-icon.mobile-open .search-suggestions li{ padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); } body.light-mode .lang-toggle-circle.search-icon.mobile-open{ background:#ffffff; } body.light-mode .lang-toggle-circle.search-icon.mobile-open .search-input{ background:#ffffff; color:#0d1321; border-color:#748cab; } body.light-mode .lang-toggle-circle.search-icon.mobile-open .search-suggestions{ background:#ffffff; color:#0d1321; border-top-color: rgba(0,0,0,0.06); } } body.light-mode .icon-button img, body.light-mode .search-icon img { filter: brightness(1) invert(0); } body.light-mode .logo-container img { filter: none; } body.light-mode .lang-toggle-circle { background: #2e2e2e; border: none; } body.light-mode .lang-toggle-circle:hover { background: #3d3d3d; } body.light-mode .lang-text { color: var(--muted); } body.light-mode #lang-toggle:checked + .lang-toggle-circle .lang-text.en { opacity: 1; } body.light-mode #lang-toggle:checked + .lang-toggle-circle .lang-text.en { opacity: 0; } body.light-mode .lang-toggle-circle .search-input { background-color: #ffffff; color: #0d1321; border: 1px solid #748cab; } body.light-mode .icon-button:hover img, body.light-mode .search-icon:hover img { filter: invert(30%) sepia(10%) saturate(200%) hue-rotate(180deg) brightness(90%) contrast(95%); } body.light-mode .lang-toggle-circle.input-active img { filter: brightness(1) invert(0); } body.light-mode .lang-toggle-circle.expanded .search-input { background-color: #ffffff; color: #0d1321; border-color: #748cab; } @media (max-width: 900px){ .sivupaneeli{ display:none !important; } .kylkipaneeli{ right: -100vw; width: 100vw; height: 100svh; top: 0; border-radius: 0; z-index: 1200; overflow-y: auto; background-color: #0d1321; } .kylkipaneeli.näkyy{ right: 0; } .kylki-valikko{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88%; right: auto; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .kylki-valikko .valikko-kohta{ width: 100%; text-align: center; font-size: clamp(1.2rem, 4.3vw, 1.6rem); padding: 0.4rem 0; border-bottom: 1px solid rgba(240,235,219,0.08); } .kylki-valikko .valikko-kohta:last-child{ border-bottom: none; } .kylki-valikko .overlay-btn.sivujutska{ width: 100%; display: block; margin-top: 0.6rem; text-align: center; } .kylki-valikko .overlay-btn .overlay-btn-text-wrapper{ display: block; } .kylki-socials{ position: fixed; left: 50%; bottom: 5vh !important; gap: 3.5vw; z-index: 1201; } .kylki-socials .somet-circle[href^="mailto"] { display: none !important; } @media (max-height: 650px){ .kylki-socials .somet-circle[href^="mailto"] { display: none !important; } } .kylkipaneeli .kylki-close{ position: absolute; top: 1rem; opacity: 1; right: 1rem; font-size: 2.5rem !important; line-height: 1; background: none; border: none; color: #ffffff; cursor: pointer; z-index: 1300; } body.light-mode .kylkipaneeli .kylki-close{ color: #0d1321; } } .kylki-close{ opacity: 0; } @media (max-width: 900px){ .kylkipaneeli{ position: fixed; inset: 0; width: 100vw; height: 100svh; background-color: #0d1321; border-radius: 0; z-index: 1200; overflow-y: auto; display: none; right: auto; top: auto; box-shadow: none; transition: none; } .kylkipaneeli.näkyy{ display: block; } .kylki-valikko{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88%; right: auto; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } } @media (max-width: 480px){ .kylkipaneeli .lang-toggle-wrapper{ top: 2.2rem; } @media (max-width: 480px){ .kylkipaneeli .kylki-valikko{ position: absolute; top: 10.5rem; left: 50%; transform: translate(-50%, var(--kylki-valikko-shift)); transition: transform 0.25s ease-out; width: 88%; display: flex; flex-direction: column; align-items: center; gap: 1.2vh; } } .kylki-valikko .valikko-kohta{ font-size: clamp(1rem, 4.2vw, 1.3rem); padding: 0.45rem 0; } .kylkipaneeli .overlay-btn.sivujutska{ position: static; margin-top: 0.4rem; } .kylkipaneeli .kylki-socials{ position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; gap: 3.5vw !important; z-index: 1400 !important; } } @media (max-width: 480px){ .menu-label{ display:none !important; } .hero-lines .line-unit:nth-child(n+4){ display:none !important; } } @media (max-width: 480px){ .hero-lines{ height: auto; gap: px; justify-content: flex-start; right: 7.5vw; top: 4.5svh; } .hero-lines .line-unit{ width: 40px; height: 4px; margin: 2px 0; } } .lang-toggle-circle.icon-button { cursor: pointer; } .lang-toggle-circle.icon-button .icon-sun, .lang-toggle-circle.icon-button .icon-search { color: #dcd5c5; transition: color .15s ease, transform .15s ease; } body.light-mode .lang-toggle-circle.icon-button .icon-sun, body.light-mode .lang-toggle-circle.icon-button .icon-search { color: #0d1321; } .lang-toggle-circle.icon-button:hover .icon-sun, .lang-toggle-circle.icon-button:hover .icon-search { color: #000000; } .icon-search{ color: #ffffff; transform: translate(-1px, -1px); transition: color .15s ease, transform .15s ease; } body.light-mode .icon-search{ color:#0d1321; } .icon-search:hover{ color:#000; } .icon-sun{ color: #ffffff; transition: color .15s ease, transform .15s ease; } body.light-mode .icon-sun{ color:#0d1321; } .icon-sun:hover{ color:#000; } .lang-toggle-circle .lang-text { color: #fff; } body.light-mode .lang-toggle-circle .lang-text { color: #0d1321; } @media (max-width: 900px){ #main-lang-toggle, #main-lang-toggle .lang-text{ -webkit-tap-highlight-color: transparent; color: inherit; } @media (hover: none){ #main-lang-toggle:hover{ color: inherit !important; } } #main-lang-toggle:active, #main-lang-toggle:focus{ color: inherit !important; opacity: 1 !important; } } @media (max-width: 900px) { .menu-label { display: none; } .hero-lines.keskella ~ .hero-x { top: 4.2svh; right: 6vw; } body.mobile-menu-open { overflow: hidden; touch-action: none; } .kylkipaneeli { right: -100%; width: 100vw; height: 100vh; border-radius: 0; background: radial-gradient(circle at top left, #111827 0, #020617 40%, #000 100%); box-shadow: none; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 64px) 6vw 24px 10vw; } .kylkipaneeli.näkyy { right: 0; } .kylki-valikko { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-top: 0.25rem; } .kylki-valikko a, .kylki-valikko .overlay-btn { display: block; width: 100%; padding: 0.55rem 0; font-size: 1.15rem; text-decoration: none; text-transform: none; letter-spacing: 0.02em; border-bottom: 1px solid rgba(240, 235, 219, 0.12); } .kylki-valikko a:last-of-type, .kylki-valikko .overlay-btn:last-of-type { border-bottom: none; } .kylki-valikko a[data-i18n="menuHome"] { opacity: 0.85; } .kylki-valikko .overlay-btn.sivujutska { margin-top: 0.7rem; border-radius: 999px; border: 1px solid rgba(240, 235, 219, 0.35); text-align: center; padding: 0.65rem 0.4rem; } .kylki-socials { margin-top: auto; bottom: 30vh; padding-top: 1.5rem; display: flex; gap: 0.75rem; } .kylki-socials .somet-circle { width: 42px; height: 42px; } .kylkipaneeli .kylki-close { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 4.5vw; font-size: 2rem; background: none; border: none; color: #ffffff; cursor: pointer; z-index: 5; } body.light-mode .kylkipaneeli { background: radial-gradient(circle at top left, #f3ead9 0, #ffffff 40%, #e6ddcf 100%); } body.light-mode .kylkipaneeli .kylki-close { color: #111827; } body.light-mode .kylki-valikko a, body.light-mode .kylki-valikko .overlay-btn { border-bottom-color: rgba(13, 19, 33, 0.12); } } @media (max-width: 480px) { .kylki-valikko a, .kylki-valikko .overlay-btn { font-size: 1.18rem; } } @media (max-width: 900px){ .kylkipaneeli{ padding-top: 8rem; } } body.mobile-menu-open { overflow: hidden !important; height: 100vh !important; touch-action: none !important; } :root{ --lang-shift: 0px; --kylki-valikko-shift: 0px; } @media (max-width: 900px){ .kylki-close{ transform: translateY(var(--kylki-close-shift)); transition: transform .25s ease; } } .kylki-valikko { transform: translateY(var(--kylki-valikko-shift,0px)); transition: transform 0.25s ease; } @media (min-width: 901px){ .kylki-valikko { position: relative; right: 50px; top: 170px; } } /* =============================== MOBILE MENU – SOCIAL ICON FIX =============================== */ @media (max-width: 900px){ .kylkipaneeli .kylki-socials{ position: fixed !important; left: 50% !important; right: auto !important; bottom: calc(env(safe-area-inset-bottom) + 2.2rem) !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: auto !important; margin: 0 !important; z-index: 1400 !important; } .kylkipaneeli .kylki-socials .somet-circle{ width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; border-radius: 999px !important; border: 1.5px solid rgba(240, 235, 219, 0.22) !important; background: rgba(62, 92, 118, 0.18) !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; line-height: 1 !important; opacity: 1 !important; overflow: hidden !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20); } .kylkipaneeli .kylki-socials .somet-circle[href^="mailto"]{ display: none !important; } .kylkipaneeli .kylki-socials .somet-circle svg{ width: 22px !important; height: 22px !important; display: block !important; transform: none !important; color: currentColor !important; stroke: currentColor !important; fill: none !important; } .kylkipaneeli .kylki-socials .somet-circle[aria-label="LinkedIn"] svg, .kylkipaneeli .kylki-socials .somet-circle[aria-label="Facebook"] svg{ fill: currentColor !important; stroke: none !important; } .kylkipaneeli .kylki-socials .somet-circle[aria-label="Instagram"] svg{ fill: none !important; stroke: currentColor !important; } .kylkipaneeli .kylki-socials .somet-circle[aria-label="Instagram"] svg circle:last-child{ fill: currentColor !important; stroke: none !important; } .kylkipaneeli .kylki-socials .somet-circle:hover, .kylkipaneeli .kylki-socials .somet-circle:focus-visible{ background: #ffffff !important; color: #0d1321 !important; border-color: #ffffff !important; transform: translateY(-2px) !important; } body.light-mode .kylkipaneeli .kylki-socials .somet-circle{ background: rgba(13, 19, 33, 0.06) !important; border-color: rgba(13, 19, 33, 0.18) !important; color: #0d1321 !important; box-shadow: 0 10px 24px rgba(13, 19, 33, 0.08); } body.light-mode .kylkipaneeli .kylki-socials .somet-circle:hover, body.light-mode .kylkipaneeli .kylki-socials .somet-circle:focus-visible{ background: #0d1321 !important; color: #ffffff !important; border-color: #0d1321 !important; } } @media (max-width: 480px){ .kylkipaneeli .kylki-socials{ bottom: calc(env(safe-area-inset-bottom) + 2.6rem) !important; gap: 12px !important; } .kylkipaneeli .kylki-socials .somet-circle{ width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; } .kylkipaneeli .kylki-socials .somet-circle svg{ width: 21px !important; height: 21px !important; } } .kuka-mina-osio { position: relative; min-height: 86vh; display: flex; align-items: center; justify-content: flex-start; padding: clamp(8svh, 12vh, 14svh) 10vw; color: #ffffff; pointer-events: none; z-index: 3; isolation: isolate; } .kuka-otsikko { font-size: clamp(3rem, 6.6vw, 6rem); font-weight: 800; margin: 0 0 .25rem 0; padding: 0; color: #fff; letter-spacing: .01em; line-height: .9; } .kuka-otsikko::after { content: ""; display: block; width: min(120px, 22vw); height: 3px; margin: .35rem 0 0 0; background: none; opacity: .55; } .kuka-mina-sisalto { max-width: clamp(560px, 48vw, 920px); } .kuka-alaotsikko { padding: 0; margin: .15rem 0 .9rem; font-size: clamp(1.2rem, 2.6vw, 2rem); font-weight: 600; color: #748cab; opacity: 1; } .kuka-teksti { font-size: clamp(1.05rem, 2.2vw, 1.55rem); line-height: 1.35; margin: 0; } .row-wrap { display: block; height: 1.35em; overflow: hidden; } .row { display: inline-block; transform-origin: left center; transform: translateY(10px) scaleX(0.2); opacity: 0; transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.45s ease-out; } .kuka-teksti.visible .row { transform: translateY(0) scaleX(1); opacity: 1; } @media (max-width: 900px) { .kuka-mina-osio { min-height: auto; padding: 9svh 6vw 7svh; justify-content: center; align-items: center; } .kuka-mina-sisalto { max-width: 92vw; } .kuka-otsikko { font-size: clamp(2.8rem, 10.5vw, 4.8rem); text-align: center; margin-bottom: .5rem; } .kuka-alaotsikko { text-align: center; } .kuka-teksti { font-size: clamp(1rem, 4.3vw, 1.25rem); line-height: 1.4; text-align: center; } .kuka-teksti .row-wrap { height: 1.4em; } .slide-left { transform: translateX(-45%); } .slide-right { transform: translateX(45%); } } @media (max-width: 480px) { .kuka-mina-osio { padding: 8svh 5vw 6svh; } .kuka-otsikko { font-size: clamp(2.6rem, 12vw, 4rem); } } .scroll-intro-mobile { display: none; } @media (max-width: 900px) { .scroll-intro-mobile { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 6vw; margin: 0svh 0 10svh; text-align: center; color: #ffffff; } .scroll-intro-mobile .scroll-intro-title { font-size: clamp(3rem, 9.5vw, 4rem); font-weight: 800; letter-spacing: 0.01em; line-height: 1.08; color: inherit; text-shadow: none; margin: 0; padding: 0; } .scroll-intro-mobile .slide-left, .scroll-intro-mobile .slide-right { will-change: transform; backface-visibility: hidden; transform: translate3d(0,0,0); transition: none !important; } } @media (max-width: 900px){ .sticky-line .dot{ transition: background-color 1.2s ease, opacity 1.2s ease, transform 1.2s ease; will-change: background-color, opacity, transform; } .sticky-line .dot.active{ transition-duration: 1.8s; } } .esittely-osio { position: relative; min-height: 70vh; color: #ffffff; display: flex; justify-content: space-between; align-items: center; padding: clamp(8svh, 12svh, 14svh) 10vw; pointer-events: none; z-index: 3; background-color: none !important; } .esittely-tekstit { width: 52%; display: flex; flex-direction: column; gap: .4rem; } .esittely-otsikko { font-size: clamp(3rem, 6.6vw, 6rem); font-weight: 800; margin: 0 0 .25rem 0; color: #fff; letter-spacing: .01em; line-height: .9; } .esittely-left, .esittely-right{ color: transparent; background: linear-gradient(90deg, #ffffff 0%, #ffffff var(--paint, 0%), #748cab var(--paint, 0%)); -webkit-background-clip: text; background-clip: text; transition: transform .36s ease-out; } .esittely-otsikko::after{ content:""; display:block; width:min(120px, 22vw); height:3px; margin:.35rem 0 0; background:none; opacity:.55; } .esittely-kuvaus{ font-size: clamp(1.05rem, 2.2vw, 1.55rem); color:#fff; line-height:1.35; max-width: 60ch; margin: .2rem 0 0 0; z-index: 1000; } .esittely-kuvaus .proj-row-wrap{ display: block; } .esittely-kuvaus .proj-row{ display: inline-block; transform-origin: left center; will-change: transform, opacity; } @keyframes projFlipUp{ from{ transform: translateY(30px) rotateX(18deg); opacity: 0; } 60%{ transform: translateY(-4px) rotateX(0deg); opacity: 1; } to{ transform: translateY(0); opacity: 1; } } .esittely-kuvaus.animated .proj-row{ animation: projFlipUp 0.9s cubic-bezier(0.19, 1, 0.22, 1) both; } .esittely-kuvaus.animated .proj-row-wrap:nth-child(2) .proj-row{ animation-delay: 0.18s; } @media (max-width: 900px){ .esittely-osio{ min-height:auto; padding: 9svh 6vw 7svh; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.8rem; } .esittely-tekstit{ width: 100%; align-items:center; } #projekteja .esittely-otsikko{ margin-left:0 !important; margin-top:0 !important; } .esittely-otsikko{ font-size: clamp(2.4rem, 10.2vw, 3.6rem); margin:0 0 .4rem 0; } .esittely-kuvaus{ font-size: clamp(1rem, 4.3vw, 1.25rem); line-height:1.4; max-width:92vw; margin:0 auto; } .esittely-left{ transform: translateX(-45%); } .esittely-right{ transform: translateX(45%); } #projekteja .esittely-left, #projekteja .esittely-right{ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #ffffff !important; } body.light-mode #projekteja .esittely-left, body.light-mode #projekteja .esittely-right{ color:#0d1321 !important; } .esittely-kuvaus .proj-row-wrap{ display: block; } } @media (max-width: 480px){ .esittely-osio{ padding: 8svh 5vw 6svh; } .esittely-otsikko{ font-size: clamp(2.2rem, 11vw, 3rem); } .esittely-kuvaus{ font-size: clamp(.98rem, 4.4vw, 1.15rem); } } @media (prefers-reduced-motion: reduce){ .esittely-left, .esittely-right{ transform:none !important; } } /* =========================== VEIKKA OSIO =========================== */ .veikka-osio { display: flex; align-items: center; gap: clamp(3rem, 6vw, 7rem); padding: clamp(8svh, 12vh, 14svh) 10vw; min-height: 90vh; color: #fff; } .veikka-teksti { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; align-self: flex-start; will-change: transform, opacity; order: 2; } .veikka-p { font-size: clamp(1.1rem, 2.3vw, 1.6rem); line-height: 1.55; text-align: center; margin: 0 auto; max-width: 88%; } /* rivit maalautuvat vaaleansinisestä valkoiseksi VASEMMALTA OIKEALLE (tekstiin leikatulla liukuvärillä) scrollin mukaan – ei hoverista. --wipe asetetaan suoraan JS:stä (animateJattiosio) scrollipositioon perustuen, rivi kerrallaan. */ @property --wipe { syntax: ''; inherits: true; initial-value: 0%; } .veikka-p .row { --wipe: 0%; --blend: min(35%, var(--wipe), calc(100% - var(--wipe))); transform: translateY(0) scaleX(1); opacity: 1; transition: none; background-image: linear-gradient( to right, var(--light) 0%, var(--light) calc(var(--wipe) - var(--blend)), #9db8e0 calc(var(--wipe) + var(--blend)), #9db8e0 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ei enää omaa kiinteää väriä: näin vanhemman .row:n liukuväri-tekstileikkaus näkyy saumattomasti tämänkin korostetun osan läpi, eikä se jää maalautumisen ulkopuolelle */ .veikka-kuva-alue { flex: 0 0 34%; max-width: 400px; position: relative; will-change: transform, opacity; order: 1; } .veikka-kuva-kehys { position: relative; border-radius: 20px; overflow: hidden; transform: scale(1.18); transition: transform .8s cubic-bezier(.08, .82, .28, .97); } .veikka-kuva-kehys.in-view { transform: scale(1); } .veikka-kuva { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; display: block; background: var(--mid); transform: translateX(-9%) scale(1.16); } .veikka-kuva-kehys.in-view .projekti-tint { transform: translateY(-100%); } .veikka-caption { margin: .9rem 0 0; font-size: clamp(1rem, 1.8vw, 1.2rem); color: #fff; } @media (prefers-reduced-motion: reduce) { .veikka-p .row { transition: none !important; } } @media (max-width: 900px) { .veikka-osio { flex-direction: column-reverse; min-height: auto; padding: 9svh 6vw 8svh; gap: 3.5rem; align-items: center; } .veikka-teksti { width: 100%; order: 0; } .veikka-kuva-alue { width: 72%; max-width: 340px; align-self: center; order: 0; } .veikka-p { font-size: clamp(1rem, 4.2vw, 1.25rem); } .veikka-caption { text-align: center; } } @media (max-width: 480px) { .veikka-kuva-alue { width: 86%; } } body.light-mode .veikka-osio { color: var(--dark); } body.light-mode .veikka-caption { color: var(--dark); } /* =========================== OSAAMINEN OSIO =========================== */ .osaaminen-osio { padding: clamp(8svh, 12vh, 14svh) 5vw 0; color: #fff; overflow: hidden; } .osaaminen-intro { text-align: center; max-width: 760px; margin: 0 auto 3rem; font-size: clamp(1rem, 1.8vw, 1.28rem); line-height: 1.65; color: #748cab; } /* ---- scroll wrapper & sticky stage ---- */ .osa-scroll-wrapper { position: relative; min-height: 280vh; } .osa-morph-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* ---- morph canvas (blob SVG) ---- */ .osa-morph-canvas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity 0.1s linear; } .osa-morph-svg { width: min(92vw, 820px); height: auto; overflow: visible; } .osa-blob-path { fill: var(--mid); } .osa-morph-axis { font-size: 15px; fill: #748cab; font-family: inherit; font-weight: 600; transition: opacity 0.2s; } .osa-morph-title { font-size: 22px; fill: var(--light); font-family: inherit; font-weight: 800; letter-spacing: 0.04em; } .osa-morph-sub { font-size: 12px; fill: #748cab; font-family: inherit; letter-spacing: 0.12em; } /* ---- final diagram (fades in at scroll end) ---- */ .osa-diagram-final { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.15s linear; } .osa-diagram-final .osaaminen-kaavio { position: relative; width: min(92vw, 860px); margin: 0; aspect-ratio: 860 / 590; flex-shrink: 0; } .osaaminen-kaavio { position: relative; width: min(92vw, 860px); margin: 0 auto; aspect-ratio: 860 / 590; } .osa-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .osa-svg-label { font-size: 13px; fill: #748cab; font-family: inherit; letter-spacing: 0.13em; font-weight: 700; } .osa-svg-akseli { font-size: 14px; fill: #748cab; font-family: inherit; font-weight: 600; } .osa-svg-keskus { font-size: 21px; fill: var(--light); font-family: inherit; font-weight: 800; letter-spacing: 0.12em; } .osa-svg-keskus-sub { font-size: 12px; fill: #748cab; font-family: inherit; letter-spacing: 0.12em; } .osa-pilli { position: absolute; left: var(--px); top: var(--py); transform: translate(-50%, -50%); white-space: nowrap; border-radius: 999px; padding: 8px 15px; font-size: clamp(.72rem, 1.08vw, .88rem); font-weight: 550; display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1; cursor: default; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .osa-pilli:hover { transform: translate(-50%, -50%) scale(1.06); z-index: 5; } .osa-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #748cab; } .osa-ydin { background: rgba(29, 45, 68, .92); color: #fff; border: 1px solid rgba(116, 140, 171, .55); } .osa-featured { background: #748cab; color: #0d1321; border: 1px solid #748cab; font-weight: 800; padding: 10px 20px; } .osa-semi { background: rgba(13, 19, 33, .42); color: #fff; border: 1px solid rgba(62, 92, 118, .9); } .osa-ulko { background: rgba(13, 19, 33, .26); color: #748cab; border: 1px solid rgba(62, 92, 118, .75); } .osaaminen-lista { display: none; } @media (max-width: 700px) { .osaaminen-osio { padding: 8svh 5vw 9svh; } .osaaminen-kaavio { display: none; } .osaaminen-intro { text-align: center; margin: 0 auto 2rem; max-width: 90vw; font-size: clamp(1rem, 4.1vw, 1.18rem); } .osaaminen-lista { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; list-style: none; padding: 0; margin: 0; } .osaaminen-lista li { border-radius: 999px; padding: 8px 16px; font-size: .9rem; background: transparent; color: #748cab; border: 1px solid #3e5c76; } .osaaminen-lista .osa-lista-ydin { background: #1d2d44; color: #fff; font-weight: 650; } .osaaminen-lista .osa-lista-featured { background: #748cab; color: #0d1321; font-weight: 800; } } body.light-mode .osaaminen-intro { color: #3e5c76; } body.light-mode .osa-svg-keskus { fill: var(--dark); } body.light-mode .osa-ydin { background: rgba(232, 226, 212, .92); color: var(--dark); border-color: rgba(116, 140, 171, .7); } body.light-mode .osa-featured { background: #3e5c76; color: #ffffff; border-color: #3e5c76; } body.light-mode .osa-semi { background: rgba(240, 235, 219, .58); color: var(--dark); border-color: rgba(116, 140, 171, .8); } body.light-mode .osa-ulko { background: rgba(240, 235, 219, .35); color: #3e5c76; border-color: rgba(116, 140, 171, .75); } body.light-mode .osa-svg-label, body.light-mode .osa-svg-akseli, body.light-mode .osa-svg-keskus-sub { fill: #3e5c76; } /* =========================== ARVOSTELUT OSIO =========================== */ .arvostelut-osio { position: relative; z-index: 3; min-height: 80svh; padding: clamp(3.2rem, 6.5vh, 5rem) clamp(5vw, 6.4vw, 7rem); display: grid; grid-template-columns: minmax(230px, 32%) 1fr; gap: clamp(2.4rem, 6vw, 6.7rem); align-items: start; color: #fff; border-radius: 0 0 28px 28px; overflow: hidden; } .arvostelut-left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; } .arvostelut-heading { /* .slide-left/.slide-right "maalautuvat" väliltä --light -> --muted (ks. alempaa) - --light oli tässä liian beige, joten korvataan se paikallisesti puhtaalla valkoisella. --muted (sininen osa) pysyy ennallaan. */ --light: #fff; display: flex; flex-direction: column; gap: .1em; padding: 0; margin: 0; opacity: 1; color: #fff; font-family: 'Verdante', system-ui, sans-serif !important; font-size: clamp(2.35rem, 3.85vw, 4.45rem); line-height: 1.08; letter-spacing: -.055em; font-weight: 800; } .arvostelut-link { display: inline-flex; align-items: center; gap: .35rem; color: #fff; text-decoration: none; font-size: clamp(.9rem, 1.05vw, 1.05rem); line-height: 1; opacity: .9; } .arvostelut-link:hover { color: var(--accent); } .arvostelut-content { min-width: 0; padding-top: clamp(2rem, 4.35vw, 4.05rem); display: flex; flex-direction: column; align-items: stretch; } .arvostelut-topline { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.6rem; margin-bottom: clamp(2.4rem, 5vw, 4.45rem); } .arvostelut-brand { /* Irrotettu grid-virtauksesta - logo saa kasvaa (ja siirtyä alemmas) ilman että se työntää rivin korkeutta suuremmaksi ja siirtää sen alla olevaa lainaustekstiä alemmas. Rivin korkeuden määrää nyt vain .arvostelut-counter. */ position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .65rem; color: var(--mid); font-size: clamp(1.65rem, 2.65vw, 2.85rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; /* Haihtuu/ilmestyy vasemmalta oikealle pyyhkäisten (ks. javascript.js: setBrandVisible) - lepotila on täysin näkyvä, ei mitään aloitusanimaatiota. Sumennus+läpinäkyvyys pyyhkäisevän reunan lisäksi tekevät siitä pehmeän "haihtumisen" eikä terävää leikkausta. */ clip-path: inset(0 0 0 0); opacity: 1; filter: blur(0); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1), opacity 1.1s cubic-bezier(.65, 0, .35, 1), filter 1.1s cubic-bezier(.65, 0, .35, 1); } .brand-logo { /* Koko lasketaan JS:llä (ks. javascript.js: fitBrandLogo) niin että alareuna osuu tasan lainauksen yläreunaan asti - tämä on vain varakoko ennen kuin JS ehtii ajaa / jos se jostain syystä ei aja. */ display: block; width: clamp(60px, 6.5vw, 88px); height: clamp(60px, 6.5vw, 88px); object-fit: contain; } .arvostelut-counter { /* .arvostelut-brand on nyt position:absolute eli poissa grid-virtauksesta, joten tämä olisi ainoana gridin lapsena automaattisesti asettunut ensimmäiseen (1fr) sarakkeeseen vasemmalle - pakotetaan pysymään toisessa (auto) sarakkeessa oikealla, kuten ennenkin. */ grid-column: 2; display: inline-flex; align-items: center; gap: .85rem; color: #fff; font-size: clamp(.9rem, 1.05vw, 1.05rem); white-space: nowrap; } .review-nav { appearance: none; border: 0; background: transparent; color: #fff; font-size: 1.28rem; line-height: 1; cursor: pointer; padding: .22rem; transition: color .2s ease, transform .2s ease; } .review-nav:hover { color: var(--accent); transform: translateY(-1px); } .review-slider { position: relative; min-height: clamp(205px, 25vh, 275px); } .review-item { position: absolute; inset: 0; display: flex; flex-direction: column; gap: clamp(1.8rem, 4.1vw, 3.25rem); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .34s ease, transform .34s ease; } .review-item.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); } .review-item blockquote { margin: 0; max-width: 720px; color: #fff; font-size: clamp(1.22rem, 2.02vw, 2.35rem); line-height: 1.45; /* normal, ei negatiivinen - negatiivinen letter-spacing yhdistettynä kirjain-per-span-efektiin (letters-host) sai sanat menemään limittäin */ letter-spacing: normal; font-weight: 400; } /* Pidempi arvostelu (ks. index.html) - pienempi fontti ettei teksti paisuta korttia yhtä paljon kuin lyhyemmät arvostelut. */ .review-item--pitka blockquote { font-size: clamp(1rem, 1.5vw, 1.7rem); } .review-author { /* Kiinteä paikka riippumatta yläpuolisen lainauksen pituudesta/rivimäärästä - ei enää osa flex-virtausta jossa se liikkuisi lainauksen korkeuden mukaan. */ position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: .9rem; } .review-author strong { display: block; color: #fff; font-size: clamp(1.08rem, 1.32vw, 1.45rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; } .review-author span { display: block; margin-top: .28rem; color: var(--muted); font-size: clamp(.95rem, 1.1vw, 1.12rem); font-weight: 500; line-height: 1.25; } .review-cta { align-self: center; margin-top: clamp(3.1rem, 6.2vw, 5.4rem); min-width: min(360px, 64vw); height: clamp(54px, 5vw, 74px); padding: 0 clamp(1.7rem, 3.3vw, 3.25rem); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: clamp(1.7rem, 5vw, 4rem); background: var(--light); color: var(--dark); text-decoration: none; font-size: clamp(1.02rem, 1.45vw, 1.48rem); line-height: 1; transition: background .2s ease, color .2s ease, transform .2s ease; } .review-cta:hover { background: var(--muted); color: var(--dark); transform: translateY(-2px); } body.light-mode .arvostelut-osio { background: var(--dark); color: #fff; } body.light-mode .arvostelut-heading, body.light-mode .arvostelut-link, body.light-mode .arvostelut-counter, body.light-mode .review-nav, body.light-mode .review-item blockquote, body.light-mode .review-author strong { color: #fff; } /* arvostelut-osio pysyy aina tummana teemasta riippumatta, joten otsikon slide-teksti käyttää aina vaalean-tekstin gradienttia (ei light-moden tumman-tekstin versiota, joka on tarkoitettu muille, vaalealle taustalle vaihtuville osioille). */ body.light-mode .arvostelut-heading .slide-left, body.light-mode .arvostelut-heading .slide-right { background: linear-gradient(90deg, var(--light) 0%, var(--light) var(--paint,0%), var(--muted) var(--paint,0%)); -webkit-background-clip: text; background-clip: text; } body.light-mode .review-author span { color: var(--muted); } body.light-mode .review-cta { background: var(--light); color: var(--dark); } body.light-mode .review-cta:hover { background: var(--muted); color: var(--dark); } @media (max-width: 900px) { .arvostelut-osio { min-height: auto; padding: 4.8rem 5vw; grid-template-columns: 1fr; gap: 2.25rem; } .arvostelut-content { padding-top: 0; } .arvostelut-topline { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2rem; } .arvostelut-brand { left: auto; right: 0; } .arvostelut-counter { grid-column: 1; justify-self: start; /* .arvostelut-brand kelluu (position:absolute) tämän saman sarakkeen yläkulmassa - tilaa alle ettei logo ja laskuri mene päällekkäin. */ margin-top: clamp(70px, 22vw, 100px); } .review-slider { min-height: 275px; } .review-item blockquote { font-size: clamp(1.35rem, 6vw, 2rem); } .review-cta { align-self: stretch; min-width: 0; width: 100%; margin-top: 2.2rem; } } @media (max-width: 520px) { .arvostelut-heading { font-size: clamp(2.15rem, 11.5vw, 3.2rem); } .arvostelut-brand { font-size: clamp(1.45rem, 7.8vw, 2.25rem); } .review-slider { min-height: 315px; } .review-author { align-items: flex-start; } } /* Kannettavat joiden näyttö on kapea mutta MATALA (esim. pienempi 13"-läppäri) - kaikki tämän osion pystysuuntaiset välit (topline/gap/cta-margin) on mitoitettu vw:llä (leveyden mukaan), joten ne eivät pienene ollenkaan vaikka korkeutta olisi vähän - matalalla näytöllä koko osio venyy silloin pidemmäksi kuin ruutu, ja arvostelijan nimi jää helposti scrollin taakse piiloon. Tiivistetään välit vh:n mukaan nimenomaan silloin kun korkeutta on niukasti (ei kosketa mobiili-leveyttä, jolla on jo oma asettelunsa yllä). */ @media (min-width: 901px) and (max-height: 760px) { .arvostelut-osio { min-height: auto; padding-top: clamp(2rem, 4.5vh, 3.2rem); padding-bottom: clamp(2rem, 4.5vh, 3.2rem); } .arvostelut-topline { margin-bottom: clamp(1.2rem, 3.5vh, 2.2rem); } .review-item { gap: clamp(1.1rem, 3vh, 1.9rem); } .review-cta { margin-top: clamp(1.4rem, 3vh, 2.4rem); } } /* =========================== PAKETIT OSIO =========================== */ .paketit-osio { position: relative; z-index: 3; padding: clamp(5rem, 9vh, 7rem) clamp(5vw, 6.4vw, 7rem) clamp(2rem, 3vh, 3rem); color: #fff; } /* Yksittäin sijoitettuja "+"-merkkejä (ei toistuvaa maskattua taustakuviota), jotta yksikään risti ei koskaan leikkaudu puolikkaaksi reunalla. Pisteet on sijoiteltu epäsäännöllisesti/hajanaisesti, ei tasaiseksi ruudukoksi. */ .paketit-logo-shape { position: absolute; z-index: 0; left: 0.3vw; top: 0.4vw; width: 20vw; height: 16vw; min-width: 210px; min-height: 168px; pointer-events: none; } .paketit-plus { position: absolute; transform: translate(-50%, -50%); color: #1d2d44; font-size: 9px; font-weight: 700; line-height: 1; } /* Vain pieni osa (~15%, ks. HTML-luokka "plus-blink") risteistä animoi - satojen erillisten ikuisten CSS-animaatioiden pyörittäminen yhtä aikaa (vaikka jokainen yksittäin on halpa) aiheutti huomattavaa nykimistä scrollatessa footer-osion paketit/footer-vaihdon läpi. Loput ristit ovat tavallisia, ei-animoituja elementtejä - näyttävät identtisiltä, maksavat murto-osan. */ .plus-blink { animation: paketitPlusBlink 26s ease-in-out infinite; animation-play-state: paused; } .paketit-osio.plus-active .plus-blink, .services-block.plus-active .plus-blink, .prosessi-osio.plus-active .plus-blink, .vertailu-osio.plus-active .plus-blink { animation-play-state: running; } /* Suurin osa kestosta pysytään näkyvänä - vain lyhyt pieni pilkahdus, jolloin risti häviää hetkeksi ja palaa. Jokaisella ristillä on oma satunnainen animation-delay (ks. HTML), joten pilkahdukset eivät osu koskaan yhtä aikaa - vaikuttaa siltä että joku yksittäinen katoaa harvakseltaan siellä täällä. */ @keyframes paketitPlusBlink { 0%, 93%, 100% { opacity: 1; } 96% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .plus-blink { animation: none; } } .paketit-header { position: relative; z-index: 1; text-align: center; max-width: 780px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); } .paketit-title { /* sama korjaus kuin .arvostelut-heading:lle - --light oli liian beige, korvataan paikallisesti valkoisella, --muted (sininen osa) ennallaan. */ --light: #fff; display: flex; flex-direction: column; align-items: center; gap: .1em; padding: 0; margin: 0; opacity: 1; color: #fff; font-family: 'Verdante', system-ui, sans-serif !important; font-size: clamp(2rem, 3.8vw, 4.2rem); line-height: 1.08; letter-spacing: -.055em; font-weight: 800; } .paketit-subtitle { margin-top: 1rem; color: var(--muted); font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.55; } .paketit-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.35rem); max-width: 1100px; margin: 0 auto; } /* Ohut, teeman mukainen vaaleanharmaa pystyviiva korttien välissä (gapin keskikohdassa) - oma irrallinen elementti, ei kiinni kummassakaan viereisessä kortissa. */ .paketit-divider { position: absolute; top: 8%; bottom: 8%; width: 1px; background: rgba(240, 235, 219, .16); transform: translateX(-50%); pointer-events: none; z-index: 0; } @media (max-width: 1050px) { .paketit-divider { display: none; } } .paketti-card { position: relative; padding: clamp(1.4rem, 2vw, 2rem); border-radius: 22px; background: none; border: 1px solid rgba(240, 235, 219, .08); display: flex; flex-direction: column; align-items: center; text-align: center; transition: border-color .22s ease; } /* Pieni, L-muotoinen väriläikkä oikeassa alanurkassa - ei box-shadow, vaan oma elementti jolla on korkeampi z-index kuin kortin muulla sisällöllä, joten se näkyy myös kortin PÄÄLLÄ eikä vain sen alla/takana. Kaksi reunaa pitkin haalistuvaa liukuväriä (alhaalta ja oikealta) muodostaa yhdessä "L"-muotoisen hehkun, kirkkaimpana itse kulmassa. Piilossa oletuksena, näkyy vain hoverissa. */ .paketti-corner-glow { position: absolute; z-index: 2; right: -18%; bottom: -18%; width: 55%; height: 55%; background: linear-gradient(to top, var(--accent, var(--muted)), transparent 100%), linear-gradient(to left, var(--accent, var(--muted)), transparent 100%); filter: blur(40px); mix-blend-mode: screen; opacity: 0; pointer-events: none; transition: opacity .4s ease; } @media (hover: hover) and (pointer: fine) { .paketti-card:hover .paketti-corner-glow { opacity: .22; } } /* Sama, mutta väärinpäin: vasempaan yläkulmaan, hehku ylä- ja vasenta reunaa pitkin (bottom/right -> top/left, gradienttien suunnat käännetty). */ .paketti-corner-glow-tl { right: auto; bottom: auto; left: -10%; top: -10%; width: 34%; height: 34%; background: linear-gradient(to bottom, var(--accent, var(--muted)), transparent 100%), linear-gradient(to right, var(--accent, var(--muted)), transparent 100%); } /* Kortin ääriviivan ympäri kulkeva hehkuva reuna hoverissa - siisti, paikallaan pysyvä (ei enää sähkövääristyksellä varustettua ::after-kerrosta). */ .paketti-card::before { content: ""; position: absolute; inset: -1px; border-radius: 24px; border: 1px solid var(--accent, var(--muted)); box-shadow: 0 0 3px var(--accent, var(--muted)); opacity: 0; pointer-events: none; transition: opacity .3s ease; } @media (hover: hover) and (pointer: fine) { .paketti-card:hover::before { opacity: 1; } } /* Mobiilissa hover ei koskaan laukea. javascript.js seuraa scrollausta ja lisää .in-view-luokan sille yhdelle kortille joka on juuri sillä hetkellä ruudun keskikohdassa - vain yksi kerrallaan, poistuu kun kortti ei ole enää keskellä. Leveysperusteinen (ei hover:none), koska hover:none riippuu oikeasta kosketuslaitteesta - pelkkä selainikkunan kaventaminen hiirellä ei sitä laukaise. */ @media (max-width: 700px) { .paketti-card.in-view::before { opacity: 1; } .paketti-card.in-view .paketti-corner-glow { opacity: .22; } /* kortti liukuu ylös alhaalta + haihtuu näkyviin kun se scrollataan ensi kertaa näkyviin - .revealed on eri luokka kuin .in-view (joka seuraa scrollia edestakaisin), koska tämän pitää jäädä päälle */ .paketti-card { opacity: 0; transform: translateY(50px); transition: opacity .6s ease, transform .6s ease; } .paketti-card.revealed { opacity: 1; transform: translateY(0); } } .paketti-card h3 { margin: 0 0 1.4rem; color: #fff; font-size: clamp(1.35rem, 1.65vw, 1.8rem); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; } .paketti-price { color: #fff; font-size: clamp(1.6rem, 2vw, 2.15rem); line-height: 1; letter-spacing: -.055em; font-weight: 800; white-space: nowrap; } .paketti-price span { font-size: .52em; letter-spacing: 0; font-weight: 700; color: var(--muted); margin-right: .25rem; } .paketti-note { margin-top: .5rem; color: var(--muted); font-size: .86rem; } .paketti-btn { margin: 1.45rem 0 1.55rem; width: 100%; min-height: 48px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--light); color: var(--dark); text-decoration: none; font-size: .95rem; font-weight: 800; border: 1px solid transparent; transition: background .2s ease, color .2s ease, transform .2s ease; } @media (hover: hover) and (pointer: fine) { .paketti-btn:hover { transform: translateY(-2px); background: var(--accent, var(--muted)); color: var(--dark); } } .paketti-card ul { width: 100%; margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; text-align: left; } .paketti-card li { position: relative; padding-left: 1.55rem; color: #fff; font-size: .92rem; line-height: 1.35; } .paketti-card li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--muted); font-weight: 800; } body.light-mode .paketit-osio { background: #0d1321; color: #fff; } body.light-mode .paketit-title, body.light-mode .paketti-card h3, body.light-mode .paketti-price, body.light-mode .paketti-card li { color: #fff; } /* paketit-osio pysyy aina tummana teemasta riippumatta, joten otsikon slide-teksti käyttää aina vaalean-tekstin gradienttia (sama syy kuin arvostelut-heading: ks. arvostelut-osio-kohta). */ body.light-mode .paketit-title .slide-left, body.light-mode .paketit-title .slide-right { background: linear-gradient(90deg, var(--light) 0%, var(--light) var(--paint,0%), var(--muted) var(--paint,0%)); -webkit-background-clip: text; background-clip: text; } body.light-mode .paketit-subtitle, body.light-mode .paketti-note, body.light-mode .paketti-price span { color: var(--muted); } body.light-mode .paketti-card { border-color: rgba(240, 235, 219, .08); } body.light-mode .paketti-btn { background: var(--light); color: var(--dark); } /* ===== Pakettien vertailutaulukko (paketit.html) ===== */ .vertailu-osio { position: relative; padding: clamp(3.2rem, 6.5vh, 5rem) clamp(5vw, 6.4vw, 7rem) clamp(5rem, 9vh, 7rem); } @media (max-width: 900px) { /* Mobiilissa ei kiinteää mustaa taustaa - sama läpinäkyvä oletus kuin muualla sivulla (esim. .paketit-osio), jolloin koko sivun .tv-noise-lumisade näkyy läpi tämänkin osion kohdalla. */ .vertailu-osio { background: transparent; } } .vertailu-eyebrow { display: block; text-align: center; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .9rem; } .vertailu-taulukko-wrap { max-width: 1100px; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; overflow-x: auto; border-radius: 22px; border: 1px solid rgba(240, 235, 219, .08); } .vertailu-swipe-hint { display: none; } .vertailu-taulukko { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; } .vertailu-taulukko thead th { padding: 1.4rem 1.2rem 1.1rem; text-align: center; vertical-align: bottom; border-bottom: 1px solid rgba(240, 235, 219, .08); } .vertailu-taulukko thead th:first-child { text-align: left; color: var(--muted); font-weight: 500; font-size: .95rem; } .vt-col-head { display: flex; flex-direction: column; align-items: center; gap: .35rem; } .vt-pkg-name { font-weight: 800; font-size: 1.15rem; color: #fff; } .vt-pkg-price { color: var(--muted); font-size: .95rem; } .vt-pkg-from { font-size: .78rem; opacity: .8; margin-right: .2em; } .vertailu-taulukko tbody th, .vertailu-taulukko tbody td { padding: .85rem 1.2rem; text-align: center; border-bottom: 1px solid rgba(240, 235, 219, .06); color: #fff; font-weight: 400; } .vertailu-taulukko tbody tr:last-child th, .vertailu-taulukko tbody tr:last-child td { border-bottom: none; } .vt-feature { text-align: left; color: var(--muted); font-weight: 500; white-space: nowrap; } .vt-check { color: var(--muted); font-weight: 700; } .vt-dash { color: rgba(240, 235, 219, .28); } .vertailu-huomautus { max-width: 620px; margin: 1.4rem auto 0; color: var(--muted); font-size: .88rem; line-height: 1.55; text-align: center; } @media (min-width: 621px) { .vertailu-haitari { display: none; } } @media (max-width: 620px) { /* Vaakascrollattava 5-sarakkeinen taulukko on hankala kapealla näytöllä (sticky-sarake yms.) - mobiilissa näytetään sen sijaan pakettikohtainen haitari (ks. alla), jonka sisällön javascript.js rakentaa suoraan taulukon datasta (ei duplikoitua HTML:ää/käännösavaimia ylläpidettäväksi). */ .vertailu-taulukko-wrap, .vertailu-swipe-hint { display: none; } .vertailu-haitari { display: block; margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 560px; } .vt-paketti { border: 1px solid rgba(240, 235, 219, .12); border-radius: 16px; margin-bottom: .8rem; overflow: hidden; background: rgba(240, 235, 219, .02); } .vt-paketti-otsikko { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; padding: 1rem 1.2rem; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; } .vt-paketti-nimihinta { display: flex; align-items: baseline; gap: .6rem; } .vt-paketti-nimi { font-weight: 800; font-size: 1.05rem; color: #fff; } .vt-paketti-hinta { color: var(--muted); font-size: .88rem; } .vt-paketti-nuoli { flex: 0 0 auto; width: 20px; height: 20px; color: var(--muted); transition: transform .25s ease; } .vt-paketti.is-open .vt-paketti-nuoli { transform: rotate(180deg); } .vt-paketti-sisalto { height: 0; overflow: hidden; transition: height .35s ease; } /* Vaaka/ala-padding on riveillä itsellään (ei .vt-paketti-sisallolla) - jos korkeutta animoiva elementti kantaisi paddingia, height:0 ei koskaan tarkoittaisi todellista 0px:ää (content-box laskee paddingin korkeuden PÄÄLLE), jolloin kiinni-tilassakin näkyisi ~1rem:n rako ensimmäisestä rivistä ylivuotavaa tekstiä. */ .vt-paketti-rivi { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1.2rem; border-top: 1px solid rgba(240, 235, 219, .08); font-size: .88rem; } .vt-paketti-rivi:first-child { border-top: none; } .vt-paketti-rivi:last-child { padding-bottom: 1rem; } .vt-paketti-ominaisuus { color: var(--muted); } .vt-paketti-arvo { color: #fff; text-align: right; font-weight: 500; } .vt-paketti-arvo.vt-check { color: var(--muted); font-weight: 700; } .vt-paketti-arvo.vt-dash { color: rgba(240, 235, 219, .28); } } @media (max-width: 1050px) { .paketit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .paketit-osio { padding: 4.8rem 5vw 5.8rem; } .paketit-logo-shape { /* min-leveys 210px vie ison osan kapeasta näytöstä otsikon takana - kutistetaan reilusti */ width: 34vw; height: 27vw; min-width: 120px; min-height: 96px; } .paketit-grid { grid-template-columns: 1fr; } .paketti-card { min-height: auto; align-items: stretch; } .paketti-card h3, .paketti-price, .paketti-note { align-self: center; text-align: center; } } .services-block { width: 100%; min-height: 100vh; margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; position: relative; } @media (max-width: 900px) { /* Koko osio 20% pienemmäksi kokonaisuutena mobiilissa - zoom (ei transform: scale) kutistaa myös asettelun/tilankäytön oikeasti, ei vain visuaalista ulkoasua, joten sisällön alle/päälle ei jää ylimääräistä tyhjää tilaa. */ .services-block { zoom: 0.8; } /* zoom laskee lasten leveydet uudelleen omassa "paikallisessa" koordinaatistossaan (390px käyttäytyy sisäisesti kuin 488px), minkä takia palvelulaatikot ylivuotavat oikean näytön reunan yli - .services- blockin oma overflow-x:hidden ei riitä leikkaamaan sitä (zoomattu elementti ei leikkaa luotettavasti omaa ylivuotoaan), joten se asetetaan html:lle asti. Alapalkki saa tämän alla oman overflow-x:visible- ylikirjoituksen, jottei tämä koskaan rajoita/riko sen sticky-toimintaa. */ html { overflow-x: hidden; } .footer, .footer-boksi { overflow-x: visible; } } /* Sama "+"-tekniikka kuin hinta-osiossa, kapeana pystysuuntaisena "lippu"- muotona, osion vasempaan yläkulmaan melkein kiinni reunaan. */ .services-plus-shape { position: absolute; z-index: 0; left: 0.3vw; top: calc(0.4vw - 20vh); width: 16vw; height: 25vw; min-width: 165px; min-height: 258px; pointer-events: none; } .services-plus { position: absolute; transform: translate(-50%, -50%); color: #1d2d44; font-size: 9px; font-weight: 700; line-height: 1; } .services-block .animation-container { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow:hidden; /* Puhtaasti koristeellinen kerros (goo-pallot + katkoviivaympyrät) - ilman tätä se peittää koko osion näkymättömästi ja nappaa hoverin/klikkaukset palvelulaatikoilta (ja "Verkkosivut"-linkiltä) alleen. */ pointer-events: none; } .services-block .animation-container:before, .services-block .animation-container:after { content: ""; display: block; width: 362px; height: 362px; border-radius: 50%; border: 1px dashed #3e5c76; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 1.8s ease, opacity .3s ease; opacity:0 } .services-block .animation-container:after { width: 626px; height:626px } .services-block .animation-container.animated:before { opacity: 1; transform:translate(-50%, -50%) rotate(720deg) } .services-block .animation-container.animated:after { opacity: 1; transform:translate(-50%, -50%) rotate(-720deg) } .services-block .animation-container.animated .circle-text { transition:all 1.2s ease } /* Design/Koodi-tekstien takana olevat isot pallot + niitä yhdistävä palkki ("goo-bar"), joka saa ne näyttämään yhdeltä venyvältä, keskiviivaan kiinni olevalta blobilta (ks. .goo-wrap-filtteri alla). Pallo ja palkin pää käyttävät AINA täsmälleen samoja left/right-arvoja (samat prosentti-/pikseliarvot ja sama 1024px-breakpoint kuin #circle-text1/2 alla), joten pallon keskipiste pysyy koko liikkeen ajan juuri palkin päässä ja liikkuu täsmälleen tekstinsä mukana - SVG- viewBoxin skaalaus aiheutti aiemmin sen, että pallo ja teksti ajautuivat eri kohtiin muilla kuin yhdellä tietyllä leveydellä. */ .services-block .goo-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 0; filter: url(#services-goo); } .services-block .goo-circle { position: absolute; top: calc(50% + 5px); width: clamp(120px, 16.6vw, 240px); height: clamp(120px, 16.6vw, 240px); border-radius: 50%; background: var(--mid); transition: left 1.2s ease, right 1.2s ease, width 1.2s ease, height 1.2s ease; } /* left-sijoitellun pallon oma keskipiste saadaan "left"-arvon kohdalle siirtämällä sitä -50% omasta leveydestään vasemmalle/ylös. */ .services-block .goo-circle-a { left: 42%; transform: translate(-50%, -50%); } /* right-sijoitellulle pallolle merkki on käänteinen (+50%) - muuten pallo jää ylimääräisen oman leveytensä verran liian vasemmalle "right"-arvoon nähden. */ .services-block .goo-circle-b { left: auto; right: 42%; transform: translate(50%, -50%); } /* Palkin päät seuraavat AINA pallojen omaa senhetkistä left/right-arvoa (sama kesto/easing kuin palloilla), jolloin se pysyy koko ajan pallon "takana" kiinni siinä. Alussa pallot ovat isoja ja lähellä toisiaan, joten palkki jää niiden sisään piiloon ja pallot näyttävät pyöreiltä. Kun pallot lähtevät kohti reunoja, palkki venyy niiden mukana vain TAAKSEPÄIN (kohti keskustaa/ toista palloa) - gooey-filtteri (ks. .goo-wrap) sulattaa tämän yhdeksi venyväksi "pisara"-muodoksi, jossa on häntä vain tulosuuntaan. */ .services-block .goo-bar { position: absolute; top: calc(50% + 5px); left: 42%; right: 42%; height: clamp(6px, 0.7vw, 10px); transform: translateY(-50%); background: var(--mid); border-radius: 999px; transition: left 1.2s ease, right 1.2s ease; } .services-block .animation-container.animated .goo-bar { left: 170px; right: 170px; } .services-block .animation-container.animated .goo-circle-a { left: 170px; width: clamp(16px, 2.2vw, 32px); height: clamp(16px, 2.2vw, 32px); } @media (max-width: 1024px) { .services-block .animation-container.animated .goo-circle-a { left: 0; } } .services-block .animation-container.animated .goo-circle-b { left: auto; right: 170px; width: clamp(16px, 2.2vw, 32px); height: clamp(16px, 2.2vw, 32px); } @media (max-width: 1024px) { .services-block .animation-container.animated .goo-circle-b { right: 0; } } @media (max-width: 1024px) { .services-block .animation-container.animated .goo-bar { left: 0; right: 0; } } .services-block .animation-container.animated #circle-text1 { left: 90px; color: var(--muted); } @media (max-width: 1024px) { .services-block .animation-container.animated #circle-text1 { left:0 } } .services-block .animation-container.animated #circle-text2 { right: 90px; color: var(--muted); } @media (max-width: 1024px) { .services-block .animation-container.animated #circle-text2 { right:0 } } .services-block .animation-container.animated .intersection { transition: all 1s cubic-bezier(.89, .34, .2, .83); top: 40px; color: #fff; } .services-block .animated-group.animated #circle1 { transform:translate(-45%) scale(.05) } .services-block .animated-group.animated #circle2 { transform:translate(44.5%) scale(.05) } .services-block #circle1, .services-block #circle2 { transition: all 2s cubic-bezier(.89, .34, .2, .83); mix-blend-mode:multiply } .services-block .circle-text { font-size: 20px; font-weight: 500; color: var(--muted); position: absolute; top: calc(50% + 5px); transform: translateY(-50%); z-index:1 } .services-block #circle-text1 { left:38% } @media (max-width: 1600px) { .services-block #circle-text1 { left:38% } } .services-block #circle-text2 { right:38% } @media (max-width: 1600px) { .services-block #circle-text2 { right:38% } } .services-block .intersection { position: absolute; top: 26%; transform: translate(0); font-size: 20px; font-weight: 500; text-align: center; color: #fff; z-index:1 } .services-block .container { position: relative; min-height: 628px; max-width: 1500px; margin: 0 auto; display: flex; align-items: center; overflow:visible } .services-block .services-grid { display: flex; flex-flow: row; align-items: center; max-width: 100%; position: relative; top:7px } .services-block .brand-col { width: 25%; display: grid; grid-template-columns: repeat(4, minmax(80px, 230px)); grid-template-rows: auto; justify-content: center; gap: 30px 0; position: relative; left:80px } /* .brand-col:n left:80px ja .product-col:n left:-170px (alla) on mitoitettu tilaville, leveille (~1600px+) näytöille - kannettavien yleisillä leveyksillä (esim. 1280/1366/1440px) sama kiinteä siirtymä työntää nämä liian lähelle keskimmäistä .mastery-col:ia, ja tekstit menevät päällekkäin sen palikoiden kanssa. Pienennetään siirtymää tällä välileveydellä (ks. myös .product-col alla), kunnes 1024px-breakpoint ottaa oman, vielä kapeamman asettelunsa käyttöön. */ @media (min-width: 1025px) and (max-width: 1560px) { .services-block .brand-col { left: 10px; } } @media (max-width: 1024px) { .services-block .brand-col { gap: 10px; grid-template-columns: repeat(1, 40px); width: 15%; left:-50px } } @media (max-width: 767px) { .services-block .brand-col { gap: 10px; grid-template-columns: repeat(1, 40px); width: 10%; left:-170px } } .services-block .brand-col .grid-item { min-height: 34px; position:relative } .services-block .brand-col .grid-item:nth-child(4n + 1) { grid-column: 4 / span 1; grid-row:1 } .services-block .brand-col .grid-item:nth-child(4n + 2) { grid-column: 3 / span 1; grid-row:2 } .services-block .brand-col .grid-item:nth-child(4n + 3) { grid-column: 2 / span 1; grid-row:3 } .services-block .brand-col .grid-item:nth-child(4n + 4) { grid-column: 3 / span 1; grid-row:4 } @media (max-width: 767px) { .services-block .brand-col .grid-item:nth-child(4n + 1) { grid-column: 2 / span 1; grid-row: 1; top:-26px } .services-block .brand-col .grid-item:nth-child(4n + 2) { grid-column: 1 / span 1; grid-row: 2; top:-26px } .services-block .brand-col .grid-item:nth-child(4n + 3) { grid-column: 1 / span 1; grid-row: 3; top: 78px; left:40px } .services-block .brand-col .grid-item:nth-child(4n + 4) { grid-column: 2 / span 1; grid-row: 4; top:-26px } } .services-block .mastery-col { width: 50%; display: grid; grid-template-columns: repeat(6, minmax(80px, 160px)); grid-template-rows: auto; justify-content: center; gap:30px 0 } @media (max-width: 1024px) { .services-block .mastery-col { grid-template-columns: repeat(6, minmax(48px, 1fr)); gap: 10px 0; width:70% } } @media (max-width: 767px) { .services-block .mastery-col { grid-template-columns: repeat(6, minmax(48px, 1fr)); gap: 10px 0; width:80% } } .services-block .mastery-col .grid-item { position:relative } .services-block .mastery-col .grid-item:nth-child(7n + 1) { grid-column: 3 / span 1; left:10px } .services-block .mastery-col .grid-item:nth-child(7n + 2) { grid-column:2 / span 1 } .services-block .mastery-col .grid-item:nth-child(7n + 3) { grid-column:5 / span 1 } .services-block .mastery-col .grid-item:nth-child(7n + 4) { grid-column:1 / span 1 } .services-block .mastery-col .grid-item:nth-child(7n + 5) { grid-column: 3 / span 1; left:30px } .services-block .mastery-col .grid-item:nth-child(7n + 6) { grid-column:2 / span 1 } .services-block .mastery-col .grid-item:nth-child(7n + 7) { grid-column:4 / span 1 } @media (max-width: 1024px) { .services-block .mastery-col .grid-item:nth-child(7n + 1) { grid-column: 3 / span 1; grid-row: 1; left:0 } .services-block .mastery-col .grid-item:nth-child(7n + 2) { grid-column: 2 / span 1; grid-row:2 } .services-block .mastery-col .grid-item:nth-child(7n + 3) { grid-column: 4 / span 1; grid-row:2 } .services-block .mastery-col .grid-item:nth-child(7n + 4) { grid-column: 3 / span 1; grid-row:3 } .services-block .mastery-col .grid-item:nth-child(7n + 5) { left: 0; grid-column: 3 / span 1; grid-row:4 } .services-block .mastery-col .grid-item:nth-child(7n + 6) { grid-column: 2 / span 1; grid-row:5 } .services-block .mastery-col .grid-item:nth-child(7n + 7) { grid-column: 4 / span 2; grid-row: 5; left:10px } } @media (max-width: 767px) { .services-block .mastery-col .grid-item:nth-child(7n + 1) { grid-column: 2 / span 1; grid-row:1 } .services-block .mastery-col .grid-item:nth-child(7n + 2) { grid-column: 1 / span 1; grid-row:2 } .services-block .mastery-col .grid-item:nth-child(7n + 3) { grid-column: 4 / span 1; grid-row:2 } .services-block .mastery-col .grid-item:nth-child(7n + 4) { grid-column: 2 / span 1; grid-row:3 } .services-block .mastery-col .grid-item:nth-child(7n + 5) { left: 0; grid-column: 3 / span 1; grid-row:4 } .services-block .mastery-col .grid-item:nth-child(7n + 6) { grid-column: 1 / span 1; grid-row:5 } .services-block .mastery-col .grid-item:nth-child(7n + 7) { grid-column: 5 / span 2; grid-row: 5; left:-20px } } .services-block .product-col { width: 25%; display: grid; grid-template-columns: repeat(4, minmax(80px, 230px)); grid-template-rows: auto; justify-content: center; gap: 30px 0; position: relative; left:-170px } @media (min-width: 1025px) and (max-width: 1560px) { .services-block .product-col { left: -110px; } } @media (max-width: 1024px) { .services-block .product-col { gap: 10px; grid-template-columns: repeat(3, 40px); width: 15%; left:-60px } } @media (max-width: 767px) { .services-block .product-col { gap: 10px; grid-template-columns: repeat(3, 40px); width: 10%; left:0 } } .services-block .product-col .grid-item { position:relative } .services-block .product-col .grid-item:nth-child(1) { grid-column: 1 / span 1; grid-row:1 } .services-block .product-col .grid-item:nth-child(2) { grid-column: 2 / span 1; grid-row:2 } .services-block .product-col .grid-item:nth-child(3) { grid-column: 1 / span 1; grid-row:3 } .services-block .product-col .grid-item:nth-child(4) { grid-column: 4 / span 1; grid-row: 3; left:-30px } .services-block .product-col .grid-item:nth-child(5) { grid-column: 3 / span 1; grid-row:4 } @media (max-width: 1024px) { .services-block .product-col .grid-item:nth-child(1) { grid-column: 1 / span 1; grid-row: 1; display:none } .services-block .product-col .grid-item:nth-child(2) { grid-column: 2 / span 1; grid-row: 2; top: -32px; left:-70px } .services-block .product-col .grid-item:nth-child(3) { grid-column: 1 / span 1; grid-row: 3; top: 74px; left:0 } .services-block .product-col .grid-item:nth-child(4) { grid-column: 2 / span 1; grid-row: 4; top: -85px; left:0 } .services-block .product-col .grid-item:nth-child(5) { grid-column: 3 / span 1; grid-row: 5; top:21px } } @media (max-width: 767px) { .services-block .product-col .grid-item:nth-child(1) { grid-column: 1 / span 1; grid-row: 1; display:none } .services-block .product-col .grid-item:nth-child(2) { grid-column: 2 / span 1; grid-row: 2; top: -32px; left:-30px } .services-block .product-col .grid-item:nth-child(3) { grid-column: 1 / span 1; grid-row: 3; top: 74px; left:42px } .services-block .product-col .grid-item:nth-child(4) { grid-column: 2 / span 1; grid-row: 4; top: -85px; left:10px } .services-block .product-col .grid-item:nth-child(5) { grid-column: 3 / span 1; grid-row: 5; top:21px } } .services-block .service { display: inline-block; margin: 0; position: relative; transition:all .5s ease-in } /* Hover ei muuta service-laatikoissa enää mitään - pyydetty poistamaan kokonaan (ei reunanväriä, ei liuku/nuoli-animaatiota, ei sisällön ilmestymistä). */ .services-block .service strong { color: #fff; } .services-block .service.not-provide { opacity:0 } .services-block .service.not-provide.left { transform:translate(100px) } .services-block .service.not-provide.right { transform:translate(-100px) } .services-block .service.not-provide.animated { transition: all .5s ease-in; transform: translate(0); opacity:1 } .services-block .service.not-provide .title { background: rgba(29,45,68,0.6); border: 1px solid rgba(62,92,118,0.5); opacity: 1 !important; padding: 8px 12px; transform:translateY(0) } @media (max-width: 1600px) { .services-block .service.not-provide .title { padding:6px 9px } } .services-block .service.not-provide .title strong { color: #748cab; } .services-block .service.provide .title { width: 40px; transform:scale(0) } /* aiemmin tässä oli @media (max-width:768px) joka pakotti tämän aina näkyviin (width:100%, scale:1) riippumatta .animated-luokasta - se ohitti koko sisääntulon viiveen mobiilissa, jolloin palkit "vain olivat siellä" heti eivätkä tulleet esiin vasta scrollatessa kohdalle. */ .services-block .service.provide .title strong { transform:translate(30px) } .services-block .service.animated .title { width: 100%; left:0 } .services-block .service.animated .title strong { transform:translate(0) } .services-block .service.animated .title a.design-systems { padding-left:32px } .services-block .service.animated .title a.design-systems .icon { top: 11px; left:13px } .services-block .service.animated .title a.branding { padding-left:33px } .services-block .service.animated .title a.branding .icon { top: 11px; left:13px } .services-block .service.animated .title a.app-design { padding-left:32px } .services-block .service.animated .title a.app-design .icon { top: 10px; left:15px } .services-block .service.animated .title a.strategy { padding-left:34px } .services-block .service.animated .title a.strategy .icon { top: 12px; left:14px } .services-block .service.animated .title a.ui-ux-design { padding-left:33px } .services-block .service.animated .title a.ui-ux-design .icon { top: 10px; left:14px } .services-block .service.animated .title a.web-design { padding-left:36px } .services-block .service.animated .title a.web-design .icon { top: 13px; left:14px } .services-block .service.animated .title a.web-app-development { padding-left:34px } .services-block .service.animated .title a.web-app-development .icon { top: 12px; left:15px } .services-block .service.animated .title a .icon { width: auto; height:auto } .services-block .service.scaled .title { transform: scale(1); top:0 } .services-block .service .title { background: var(--mid); border: 1px solid rgba(240, 235, 219, .08); border-radius: 20px; overflow: hidden; position: relative; height: 40px; transition: width .3s cubic-bezier(.89, .34, .2, .83), transform .8s cubic-bezier(.89, .34, .2, .83), left .3s cubic-bezier(.89, .34, .2, .83); white-space: nowrap; left:100px } .services-block .service .title a { position: relative; display: flex; align-items: center; padding: 8px 12px 8px 32px; border-radius: 20px; box-shadow: none; transition: transform .5s ease-out; margin: 0; border: none; white-space: nowrap; color: inherit; text-decoration:none } .services-block .service .title a:hover { box-shadow: none; text-decoration:none } .services-block .service .title .icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; line-height: 1; position: absolute; top: 11px; left: 11px; transition:transform .5s ease-out } .services-block .service .title .icon img { max-width: 100%; display:inline-block } .services-block .service .title strong { font-size: 20px; font-weight: 500; text-transform: lowercase; white-space: nowrap; transition: all .8s ease-out; position: relative; display:inline-block } .services-block .service .title .arrow { position: absolute; right: -8px; top: 13px; transition: transform .5s ease-out; transform:translate(5px) } .services-block .service .content { position: absolute; left: 50%; bottom: 100%; opacity: 0; visibility: hidden; z-index:-1 } @media (max-width: 768px) { .services-block .service .content { display: none !important; visibility:hidden !important } } .services-block .service .content .asset { position: relative; border-radius: 8px; background:#fff } .services-block .service .content .asset.asset1 { width: 220px; height: 165px; transform: translate(-40px, 20px) scale(.6) rotate(-24deg); z-index: 1; transition:transform .3s ease } .services-block .service .content .asset.asset2 { width: 180px; height: 135px; position: absolute; left: 110px; top: -10px; transform: translate(-20px, 20px) scale(.5) rotate(-8deg); z-index: 0; opacity: 0; transition:transform .5s ease, opacity .5s ease } .services-block .service .content .asset.asset2:hover { z-index: 2; transform:scale(1.2) rotate(8deg) !important } .services-block .service .content .asset video { max-width: 100%; max-height: 100%; border-radius:8px } /* Mobiili-yksinkertaistus: kolme saraketta (ei tarjoa / tarjoa / ei tarjoa) on aseteltu käsin kymmenillä nth-child-säännöillä tarkkoihin piste- koordinaatteihin, mikä ei skaalaudu järkevästi kapealle näytölle. Sen sijaan että viritettäisiin jokaista lukua erikseen, pinotaan sarakkeet allekkain ja annetaan badgien vain rivittyä normaalisti - !important tarvitaan koska nth-child-säännöt (ks. yllä) ovat muuten näitä spesifisempiä. */ @media (max-width: 700px) { .services-block { min-height: auto; padding: 4rem 0 5rem; /* koko osio (myös sen absoluuttisesti asemoitu tausta/pallo-animaatio) alemmas sivulla */ margin-top: 13vh; } .services-block .container { min-height: auto; } .services-block .services-grid { flex-flow: column; gap: 2.5rem; width: 100%; top: 0; } .services-block .brand-col, .services-block .product-col { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; left: 0; } .services-block .brand-col .grid-item, .services-block .mastery-col .grid-item, .services-block .product-col .grid-item { position: static !important; top: 0 !important; left: 0 !important; } /* .mastery-col on oma 2-sarakkeinen grid flex-wrapin sijaan: flex-wrapin automaattinen rivitys oli epäluotettava (montako badgea mahtuu samalle riville riippuu niiden tekstin pituudesta), joten jokainen badge saa tässä täsmällisen rivi/sarake-paikan. Rivi 3 (Saavutettavuus/ Analytiikka) saa ison margin-topin, joka jättää tilan "Ydinosaaminen"- tekstille ja pallo­animaatiolle niiden yläpuolelle. */ .services-block .mastery-col { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; gap: .6rem; left: 0; /* enemmän väliä brand-col-ryhmän (ui/ux, graafinen suunnittelu jne.) ja tämän ryhmän välillä - services-gridin oma 2.5rem-gap ei riittänyt */ margin-top: 0rem; } /* jokainen badge keskitetään omaan sarakekennoonsa (oletuksena grid venyttää/jättää sen kennon vasempaan reunaan) - ilman tätä esim. lyhyt "SEO" jäisi näkyvästi vasemmalle leveämmän kennonsa sisällä */ .services-block .mastery-col .grid-item { justify-self: center; } .services-block .mastery-col .grid-item:nth-child(1) { grid-column: 1; grid-row: 1; } .services-block .mastery-col .grid-item:nth-child(2) { grid-column: 2; grid-row: 1; } .services-block .mastery-col .grid-item:nth-child(3) { grid-column: 1; grid-row: 2; } .services-block .mastery-col .grid-item:nth-child(4) { grid-column: 2; grid-row: 2; } .services-block .mastery-col .grid-item:nth-child(5) { grid-column: 1; grid-row: 3; margin-top: 110px; } .services-block .mastery-col .grid-item:nth-child(6) { grid-column: 2; grid-row: 3; margin-top: 110px; } /* Verkkokaupat on yksin viimeisellä rivillä - venytetään koko rivin levyiseksi kennoksi (span 2) jotta justify-self:center keskittää sen koko rivin leveydelle, ei vain vasemman sarakkeen sisään */ .services-block .mastery-col .grid-item:nth-child(7) { grid-column: 1 / span 2; grid-row: 4; } /* isot koristeymyrät (362px/626px) eivät skaalaudu leveyden mukana - kutistetaan ettei osio näytä siltä että ne vuotavat reunojen yli. Nostettu 10svh ylemmäs. */ .services-block .animation-container:before { width: 400px; height: 400px; top: calc(50% - 5svh); } .services-block .animation-container:after { width: 580px; height: 580px; top: calc(50% - 5svh); } /* Design/Koodi-pallot liikkuvat desktopilla sivuttain (left/right) - kapealla näytöllä pystysuunta on luontevampi, joten sama liike käännetään pystyakselille (top/bottom). Molemmat pallot liikkuvat samanaikaisesti (sama 1.2s transition kummallakin, joten ne ovat jo automaattisesti synkassa) - pallo A ylös, pallo B alas. Pallot isonnettu niin että "Design"/"Koodi"-teksti mahtuu näkymään NIIDEN SISÄLLÄ (teksti asetettu täsmälleen samaan kohtaan kuin oma pallonsa), eikä enää erillisenä pienen pisteen vieressä kuten desktopilla. "Ydinosaaminen" pysyy keskellä pystysuunnassa (top:50%) koko ajan. */ .services-block .goo-circle-a, .services-block .goo-circle-b { left: 50%; right: auto; /* isompi alkutilassa (ennen erkanemista) kuin lopputilassa alla */ width: 100px; height: 100px; /* alkuperäinen transition listasi vain left/right, ei top/bottom - ilman tätä pallot hyppäävät suoraan paikoilleen liukumisen sijaan. Pidennetty ja pehmennetty rauhallisemmaksi (oli 1.2s ease). */ transition: top 2s cubic-bezier(.33, 1, .68, 1), bottom 2s cubic-bezier(.33, 1, .68, 1), width 2s cubic-bezier(.33, 1, .68, 1), height 2s cubic-bezier(.33, 1, .68, 1); } .services-block .goo-circle-a { top: 38%; transform: translate(-50%, -50%); } .services-block .goo-circle-b { top: auto; bottom: 38%; transform: translate(-50%, 50%); } .services-block .goo-bar { left: 50%; right: auto; top: 38%; bottom: 38%; width: clamp(6px, 0.7vw, 10px); height: auto; transform: translateX(-50%); transition: top 2s cubic-bezier(.33, 1, .68, 1), bottom 2s cubic-bezier(.33, 1, .68, 1); } .services-block .animation-container.animated .goo-circle-a, .services-block .animation-container.animated .goo-circle-b { /* pienempi lopputilassa (erkaannuttua) kuin alkutilassa yllä */ width: 48px; height: 48px; } .services-block .animation-container.animated .goo-circle-a { left: 50%; top: 45px; } .services-block .animation-container.animated .goo-circle-b { left: 50%; right: auto; bottom: 45px; } .services-block .animation-container.animated .goo-bar { left: 50%; right: auto; top: 45px; bottom: 45px; } .services-block .circle-text { left: 50%; right: auto; transform: translateX(-50%); font-size: 19px; z-index: 2; /* sama rauhallisempi 2s kesto kuin palloilla jo alkutilasta lähtien, jotta teksti liukuu koko matkan synkassa pallonsa kanssa eikä vain lopussa */ transition: top 2s cubic-bezier(.33, 1, .68, 1), bottom 2s cubic-bezier(.33, 1, .68, 1); } /* teksti alkutilassa täsmälleen oman pallonsa (38%) sisällä, jotta se on palloissa mukana heti alusta asti eikä ilmesty vasta lopussa */ .services-block #circle-text1 { /* ID-valitsin (#circle-text1 { left:38% }) desktop-säännössä yllä voittaa muuten .circle-text-luokan left:50%-yrityksen - ylikirjoitetaan tässä samalla spesifisyydellä */ left: 50%; top: 38%; transform: translate(-50%, -50%); } .services-block #circle-text2 { left: 50%; right: auto; top: auto; bottom: 38%; transform: translate(-50%, 50%); } /* teksti kauemmas keskeltä kuin oma pallonsa (pallo 45px reunasta). Teksti keskitetään translate(-50%,-50%):lla oman ankkuripisteensä ympärille, joten 19px fontin puolikas korkeus (~11px) tarvitsee tilaa ankkurin YLÄPUOLELLE - liian pieni arvo (esim. 4px) leikkautui pois .animation-containerin overflow:hidden takia. */ .services-block .animation-container.animated #circle-text1 { left: 50%; top: 22px; } .services-block .animation-container.animated #circle-text2 { left: 50%; right: auto; bottom: 22px; } .services-block .animation-container.animated .intersection { top: calc(50% - 5svh); transform: translateY(-50%); } .services-block .intersection { font-size: 27px; } } @keyframes fadeInUp { 0% { opacity: 0; transform:translateY(20px) } to { opacity: 1; transform:translateY(0) } } @keyframes fadeInLeft { 0% { opacity: 0; transform:translate(20px) } to { opacity: 1; transform:translate(0) } } @keyframes scaleInOut { 0% { opacity: 0; transform:scale(0) } to { opacity: 1; transform:scale(1) } } @keyframes slideInUp { 0% { transform: translateY(40px); opacity:0 } to { transform: translateY(0); opacity:1 } } /* ===== Yhteydenotto-sivu ===== */ #palloYhteys { position: fixed; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; z-index: 100; background: radial-gradient(circle, #ffffff 60%, transparent 100%); overflow: visible; display: flex; justify-content: center; align-items: center; transform-origin: center center; transition: background 0.3s ease; } #palloYhteys { pointer-events: none !important; } body.light-mode #palloYhteys { background: radial-gradient(circle, #0d1321 60%, transparent 100%); } .yhteydenotto-hero { height: 100vh; position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; text-align: center; color: white; } .hero-tekstit { max-width: 800px; margin-top: -5rem; } .hero-otsikko { font-weight: 700; margin-bottom: -2rem; } .hero-otsikko { font-size: 5rem !important; } .yhteydenotto-hero .hero-text h2, .yhteydenotto-hero .hero-text p { opacity: 0; transform: scaleY(0); transform-origin: bottom center; filter: blur(10px); transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease; } .yhteydenotto-hero .hero-text.visible h2 { opacity: 1; transform: scaleY(1); filter: blur(0); transition-delay: 0.1s; } .yhteydenotto-hero .hero-text.visible p { opacity: 1; transform: scaleY(1); filter: blur(0); transition-delay: 0.4s; } .hero-kuvaus { font-size: 1.1rem; font-weight: 300; opacity: 0.95; line-height: 1.6; max-width: 700px; margin: 0 auto; } /* tietoa.html:n hero käyttää samoja .hero-otsikko/.hero-kuvaus-luokkia kuin yhteys.html:n yhteydenottohero - skoopataan #tietoa-hero:lla ettei tämä vaikuta yhteys.html:ään. */ /* Desktop-koko sama kuin projektit.html:n herolla (#projekteja .esittely-otsikko/-kuvaus). */ #tietoa-hero .hero-otsikko { font-size: clamp(2rem, 8vw, 6.5rem) !important; } #tietoa-hero .hero-kuvaus { font-size: clamp(1rem, 3.5vw, 1.3rem); max-width: 820px; } @media (max-width: 900px) { #tietoa-hero .hero-otsikko { font-size: clamp(2.8rem, 13vw, 4.6rem) !important; } #tietoa-hero .hero-kuvaus { font-size: clamp(1.2rem, 5vw, 1.55rem); } /* paketit.html - sama liian-iso-ja-tavutus-ongelma kuin yhteys.html:ssä oli (.hero-otsikko:n jaettu mobiilisääntö sisältää hyphens:auto), pienempi koko ja hyphens pois. */ #paketit-hero .hero-otsikko { font-size: clamp(2.1rem, 8.5vw, 3rem) !important; hyphens: none; } #paketit-hero .hero-kuvaus { font-size: clamp(1.2rem, 5vw, 1.55rem); } /* yhteys.html - pienempi kuin tietoa/paketit (liian iso aiemmin), ja hyphens pois päältä ettei sanoja tavuteta/katkaista kesken rivin - .hero-otsikko:n jaetussa mobiilisäännössä on hyphens:auto. */ #yhteydenotto .hero-otsikko { font-size: clamp(2.4rem, 10vw, 3.6rem) !important; hyphens: none; } #yhteydenotto .hero-kuvaus { font-size: clamp(1.2rem, 5vw, 1.55rem); } /* Ja projektit.html:n .esittely-otsikko/.esittely-kuvaus - skoopattu body-luokalla, koska sen #projekteja-id on jaettu index.html:n kanssa eikä sitä voi käyttää suoraan ilman että vaikuttaisi myös sinne. Pienempi kuin aiemmin (liian iso), ja kokonaisia sanoja varmistava overflow-wrap/word-break - varotoimi vaikkei niitä muuta aseteta täällä. */ body.page-projektit #projekteja .esittely-otsikko { font-size: clamp(2.4rem, 10vw, 3.6rem); overflow-wrap: normal; word-break: normal; } body.page-projektit #projekteja .esittely-kuvaus { font-size: clamp(1.2rem, 5vw, 1.55rem); } } .hero-nappi { position: absolute; bottom: 40px; left: 0; right: 0; margin: 0 auto; transform: none; width: 44px; height: 44px; background-color: #00000000; border: 1.5px solid rgba(240, 235, 219, .5); border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; z-index: 10; } .hero-nappi:hover { background-color: #000000; transform: scale(1.2); } .hero-nappi .btn-icon { width: 18px; height: 18px; color: #fff; transition: transform 0.3s ease; } .hero-text h2, .hero-text p { opacity: 0; transform: scaleY(0); transform-origin: bottom center; filter: blur(10px); transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease; } .hero-text.visible h2 { opacity: 1; transform: scaleY(1); filter: blur(0); transition-delay: 0.1s; } .hero-text.visible p { opacity: 1; transform: scaleY(1); filter: blur(0); transition-delay: 0.4s; } #yhteydenotto { display: block; padding: 0; position: relative; box-sizing: border-box; z-index: 2; } .yhteydenotto-wrapper label { font-weight: 600; margin-bottom: 6px; margin-top: 20px; font-size: 18px; color: #ffffff; } .kaksikenttaa { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 20px; justify-content: center; } .kentta { flex: 1 1 600px; max-width: 650px; display: flex; flex-direction: column; } /* kentät ja viesti-rivi haalistuvat näkyviin, ja niiden syötekotelon päällä oleva verho (.kentta-tint) liukuu pois - sama efekti kuin projekti- korteissa (ks. .projekti-kortti/.projekti-tint). Pystysuora asemointi (nouseminen scrollin mukana) hoidetaan erikseen JS:n inline transformilla (ks. javascript.js), ei täällä, jotta liike seuraa scrollia jatkuvasti eikä CSS-transition kilpaile joka framen scroll-päivityksen kanssa. */ .kentta, .kokorivi { opacity: 0; transition: opacity .6s ease; will-change: transform; } .kentta.in-view, .kokorivi.in-view { opacity: 1; } /* syötekentän oma kotelo tarvitaan koska .kentta-tintin position:absolute ei muuten voisi rajautua pelkän input/textarea-elementin kokoiseksi */ .kentta-syote { position: relative; overflow: hidden; border-radius: 12px; } .kentta-tint { position: absolute; inset: 0; z-index: 2; background: var(--muted); transform: translateY(0%); transition: transform .8s cubic-bezier(.08, .82, .28, .97); pointer-events: none; } .kentta.in-view .kentta-tint, .kokorivi.in-view .kentta-tint { transform: translateY(-100%); } body.light-mode .yhteydenotto-hero { background: #ffffff; color: #0d1321; } body.light-mode .hero-otsikko { color: #0d1321; } body.light-mode .hero-tekstit h2, body.light-mode .hero-tekstit p { color: #0d1321; } body.light-mode .hero-kuvaus { color: #3e5c76; } body.light-mode .hero-nappi { background-color: #f0ebdb00; border-color: rgba(13, 19, 33, .5); } body.light-mode .hero-nappi:hover { background-color: #3e5c7600; } body.light-mode .hero-nappi .btn-icon { color: var(--dark); } body.light-mode #yhteydenotto { background-color: #ffffff; } body.light-mode .yhteydenotto-wrapper label { color: #0d1321; } body.light-mode .kentta input, body.light-mode .kentta textarea { background-color: #ffffff; color: #0d1321; border: 1px solid #748cab; } body.light-mode .kentta input:focus, body.light-mode .kentta textarea:focus { border-color: #3e5c76; outline: none; box-shadow: 0 0 5px rgba(62, 92, 118, 0.3); } body.light-mode .kaksikenttaa { gap: 2rem; } .yhteydenotto-wrapper input, .yhteydenotto-wrapper textarea { width: 100%; padding: 26px; font-size: 18px; border: none; background-color: #0d1321; color: #ffffff; border-radius: 12px; transition: all 0.3s ease; } .yhteydenotto-wrapper input::placeholder, .yhteydenotto-wrapper textarea::placeholder { color: #ffffffa2; opacity: 0.8; font-style: italic; } .yhteydenotto-wrapper input:focus, .yhteydenotto-wrapper textarea:focus { background-color: #ffffff; color: #0d1321; outline: none; z-index: 120; } .kokorivi { margin-top: 00px; width: 100%; max-width: 1340px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; } .nappirivi { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; padding-right: 80px; } .yhteydenotto-wrapper button { position: relative; pointer-events: auto; width: 160px; padding: 18px 32px; font-size: 1.3rem; background: none; color: #ffffff; border: 2px solid #748cab; border-radius: 999px; cursor: pointer; line-height: 1.4; display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 109; margin-bottom: 65px; transition: color 0s ease, transform 0s ease; } .yhteydenotto-wrapper button:hover { margin-bottom: 65px; } .yhteydenotto-wrapper button.is-sending { opacity: 0.6; cursor: not-allowed; } .magnet-contact-text { transition: transform 0.15s ease-out; will-change: transform; } .valinnallinen { position: relative; z-index: 20; } /* kentät saavat oman transform-pohjaisen stacking contextin (ks. javascript.js:n scrollisidonnainen translateY-animaatio), joten sama z-index ei riitä nostamaan auki olevaa pudotusvalikkoa myöhemmän sisarkentän päälle - avoinna oleva kenttä pitää nostaa selvästi korkeammalle */ .kentta.valinnallinen:has(.vaihtoehdot.nayta) { z-index: 30; } .vaihtoehdot { position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; border-radius: 12px 12px 12px 12px; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-8px); transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease; z-index: 10; border-top: 1px solid #3e5c76; visibility: hidden; pointer-events: none; } .vaihtoehdot .valinta { padding: 14px 20px; cursor: pointer; font-size: 16px; color: #0d1321; transition: background 0.2s ease; } .vaihtoehdot .valinta:hover { background-color: #0d1321; color: #ffffff; } .vaihtoehdot.nayta { max-height: 500px; opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; } body.light-mode .yhteydenotto-wrapper{ background-color: #ffffff; color: #0d1321; } body.light-mode .yhteydenotto-wrapper input, body.light-mode .yhteydenotto-wrapper textarea { background-color: #ffffff; color: #0d1321; } body.light-mode .yhteydenotto-wrapper input::placeholder, body.light-mode .yhteydenotto-wrapper textarea::placeholder { color: #0d1321a2; } body.light-mode .yhteydenotto-wrapper input:focus, body.light-mode .yhteydenotto-wrapper textarea:focus { background-color: #0d1321; color: #ffffff; } body.light-mode .yhteydenotto-wrapper button { color: #0d1321; border: 2px solid #748cab; background: none; } body.light-mode .yhteydenotto-wrapper button:hover { color: #ffffff; background-color: #0d1321; border: none; } body.light-mode .vaihtoehdot { background: #0d1321; border-top: 1px solid #748cab; } body.light-mode .vaihtoehdot .valinta { color: #ffffff; } body.light-mode .vaihtoehdot .valinta:hover { background-color: #ffffff; color: #0d1321; } .väli-container { position: relative; z-index: 2; height: 65vh; width: 100vw; color: #ffffff; overflow: hidden; } .otsikko-wrapper { position: absolute; top: 15vh; left: 5vw; display: flex; flex-direction: column; gap: 0.2em; } .vasen-top { font-size: 8rem; font-weight: 900; line-height: 0.9; max-width: 90vw; user-select: none; color: transparent; background: linear-gradient( 90deg, #ffffff 0%, #ffffff var(--paint, 0%), #748cab var(--paint, 0%) ); -webkit-background-clip: text; background-clip: text; text-shadow: 0 2px 12px rgba(240, 235, 219, 0.15); transition: transform 0.8s ease-out, color 0.5s ease; } .väli-container .otsikko-yksi, .väli-container .otsikko-kaksi { font-size: 8rem; font-weight: 900; line-height: 1.15; max-width: 90vw; user-select: none; } /* "Minun piilopaikkani" käyttää slide-left/slide-right-tekstin paljastus- efektiä (ks. .slide-left/.slide-right), joka maalaa tekstin näkyviin var(--light):lla (kermanvalkoinen) - täällä paljastettu osuus on täysin valkoinen sen sijaan. */ #minun-otsikko .slide-left, #minun-otsikko .slide-right { background: linear-gradient(90deg, #ffffff 0%, #ffffff var(--paint,0%), var(--muted) var(--paint,0%)); -webkit-background-clip: text; background-clip: text; } @media (max-width: 900px){ .väli-container { display: flex; align-items: center; justify-content: center; height: 35svh; text-align: center; } .väli-container .otsikko-wrapper{ margin: 0; transform: none; } .väli-container .otsikko-yksi, .väli-container .otsikko-kaksi{ font-size: clamp(3rem, 8vw, 4rem); line-height: 1.15; } } body.light-mode .yhteydenotto-wrapper input, body.light-mode .yhteydenotto-wrapper textarea { background-color: #ffffff; color: #0d1321; border: 1px solid #748cab; } body.light-mode .yhteydenotto-wrapper input::placeholder, body.light-mode .yhteydenotto-wrapper textarea::placeholder { color: rgba(13, 19, 33, 0.5); } body.light-mode .yhteydenotto-wrapper input:focus, body.light-mode .yhteydenotto-wrapper textarea:focus { background-color: #ffffff; color: #0d1321; outline: none; } body.light-mode .yhteydenotto-wrapper button { color: #0d1321; border: 2px solid #748cab; background-color: #ffffff; } body.light-mode .yhteydenotto-wrapper button:hover { color: #ffffff; background-color: #00000000; border: none; } body.light-mode .valinnallinen .vaihtoehdot { background: #ffffff; border-top: 1px solid #748cab; } body.light-mode .valinnallinen .vaihtoehdot .valinta { color: #0d1321; } body.light-mode .valinnallinen .vaihtoehdot .valinta:hover { background-color: #0d1321; color: #ffffff; } body.light-mode .väli-container { background-color: #ffffff; color: #0d1321; } body.light-mode .otsikko-wrapper .vasen-top { color: transparent; background: linear-gradient( 90deg, #0d1321 0%, #0d1321 var(--paint, 0%), #748cab var(--paint, 0%) ); -webkit-background-clip: text; background-clip: text; text-shadow: 0 2px 12px rgba(13, 19, 33, 0.15); z-index: 20; } .väli-container.tyhja { position: relative; height: 65vh; /*tät muokkailet tarpeen ku puhelin nii 50*/ width: 100vw; background-color: none; display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden; } .viiva { width: 90vw; height: 2px; background-color: #ffffff; opacity: 0; transform: translateY(100px); transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1), transform 2s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .viiva.nakyva { opacity: 1; transform: translateY(0); } .teksti-rivi { height: 20vh; width: 90vw; display: flex; align-items: center; position: relative; } .viiva-teksti { color: #ffffff; font-size: 1.8rem; font-weight: 400; white-space: nowrap; text-align: left; opacity: 0; transform: translateY(100px); transition: opacity 0.9s ease, transform 0.9s ease; } .viiva-teksti.vasen { position: absolute; left: 0; transition-delay: 0.3s; } .viiva-teksti.oikea { position: absolute; left: 32vw; transition-delay: 0.5s; } .teksti-rivi.nakyva .viiva-teksti { opacity: 1; transform: translateY(0); } .viiva-teksti.oikea .magnet-wrapper { display: inline-block; transition: transform 0.3s ease; will-change: transform; } .magnet-word { display: inline-block; transition: transform 0.1s ease; will-change: transform; } @media (max-width: 900px){ .väli-container.tyhja{ min-height: 44svh; height: auto; margin: 0; padding: 2.5svh 4vw; gap: 1.25rem; justify-content: center; } .väli-container.tyhja .viiva{ width: 100%; height: 1px; margin: 0.5rem 0; opacity: 1; transform: none; } .väli-container.tyhja .teksti-rivi{ height: auto; min-height: 44px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0.25rem 2vw; position: relative; } .väli-container.tyhja .viiva-teksti{ position: static; opacity: 1; transform: none; transition: none; font-size: clamp(1rem, 3.8vw, 1.15rem); line-height: 1.25; white-space: normal; } .väli-container.tyhja .viiva-teksti.vasen{ text-align: left; } .väli-container.tyhja .viiva-teksti.oikea{ text-align: right; } .väli-container.tyhja .magnet-wrapper, .väli-container.tyhja .magnet-word, .väli-container.tyhja .magnet-word a{ word-break: break-word; overflow-wrap: anywhere; } .väli-container.tyhja .viiva-teksti.vasen{ flex: 1 1 50%; padding-left: 2vw; text-align: left; } .väli-container.tyhja .viiva-teksti.oikea{ flex: 1 1 50%; padding-right: 2vw; text-align: right; } } body.light-mode .väli-container.tyhja { background-color: #ffffff; } body.light-mode .viiva { background-color: #0d1321; } body.light-mode .viiva-teksti { color: #0d1321; } body.light-mode .viiva-teksti.vasen { transition-delay: 0.3s; } body.light-mode .viiva-teksti.oikea { transition-delay: 0.5s; } .form-banner { width: 90vw; max-width: 600px; min-height: 0; margin: 40px auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #16a34a; color: #ffffff; padding: 20px 24px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.18); opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity .4s ease, transform .4s ease; } .form-banner.show { opacity: 1; transform: translateY(0) scale(1); } .form-banner-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #ffffff; } .form-banner-icon svg { width: 32px; height: 32px; } .form-banner h2 { font-size: 2rem; margin: 0 0 10px; padding: 0; opacity: 1; font-weight: 700; } .form-banner p { font-size: 1.2rem; margin: 0; opacity: 0.9; } .form-banner.error { background: #dc2626; } .yhteydenotto-wrapper .form-banner { max-width: 1100px; } .error-message { margin-top: 6px; font-size: 0.95rem; line-height: 1.3; color: #dc2626; min-height: 1.2em; } input[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.15); } body.light-mode input[aria-invalid="true"], body.light-mode textarea[aria-invalid="true"] { border: 2px solid #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.15); } .valinnallinen input[aria-expanded="true"] { outline: 2px solid #3e5c76; outline-offset: 2px; } @media (max-width: 900px){ .yhteydenotto-hero{ min-height: 100svh; padding: 0 6vw; padding-bottom: max(16px, calc(2.5svh + env(safe-area-inset-bottom))); gap: 1rem; height: auto; } .hero-otsikko{ font-weight: 700; margin-bottom: -2rem; font-size: clamp(2rem, 8vw, 3.25rem) !important; line-height: 1.05; } .yhteydenotto-hero .hero-text h2, .yhteydenotto-hero .hero-text p{ transform: translateY(8px); filter: blur(6px); } .yhteydenotto-hero .hero-text.visible h2, .yhteydenotto-hero .hero-text.visible p{ transform: translateY(0); filter: blur(0); } .hero-kuvaus{ font-size: clamp(1rem, 3.6vw, 1.15rem); padding: 0 2vw; } .hero-nappi{ bottom: max(18px, calc(2svh + env(safe-area-inset-bottom))); width: 48px; height: 48px; } .hero-nappi .btn-icon{ width: 18px; height: 18px; transition: transform 0.2s ease; } .hero-tekstit{ position: absolute; left: 50%; top: 68svh; transform: translateX(-50%); margin-top: 0; max-width: 92vw; margin-left: 0; margin-right: 0; } .hero-nappi{ display: none !important; } .hero-otsikko{ text-wrap: balance; word-break: normal; hyphens: auto; line-height: 1.08; letter-spacing: 0.015em; } } @media (max-width: 900px) and (hover: hover){ .hero-nappi:hover{ background-color: #000000; transform: scale(1.08); } } @media (max-width: 900px) and (hover: none){ .hero-nappi{ transition: background-color 0.2s ease, transform 0.2s ease; } } @media (max-width: 900px) and (prefers-reduced-motion: reduce){ .yhteydenotto-hero .hero-text h2, .yhteydenotto-hero .hero-text p{ transition: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } } @media (max-width: 900px){ #yhteydenotto{ min-height: 100svh; padding: 0 !important; overflow: visible; } .kaksikenttaa{ flex-direction: column; gap: 14px; margin-bottom: 14px; justify-content: stretch; } .kentta{ flex: 1 1 auto; } .yhteydenotto-wrapper input, .yhteydenotto-wrapper textarea{ padding: 16px; font-size: 16px; border-radius: 12px; } .kokorivi{ max-width: 100%; margin-top: 8px; } .nappirivi{ justify-content: center; padding-right: 0; margin-top: 16px; gap: 12px; } .yhteydenotto-wrapper button{ width: 100%; max-width: 480px; padding: 14px 18px; font-size: 1.05rem; border-radius: 999px; margin-bottom: 0; transform: none; border: 2px solid #748cab; } .yhteydenotto-wrapper button:hover{ height: auto; transform: none; border: 2px solid #748cab; background: #0d1321; color: #ffffff; } .valinnallinen{ position: relative; } .valinnallinen .vaihtoehdot{ max-height: 50svh; overflow-y: auto; overscroll-behavior: contain; z-index: 1000; -webkit-overflow-scrolling: touch; visibility: hidden; pointer-events: none; } .valinnallinen .vaihtoehdot.nayta{ visibility: visible; pointer-events: auto; } .error-message{ font-size: 0.95rem; margin-top: 4px; } .yhteydenotto-wrapper .form-banner{ width: 94vw; } } @media (max-width: 480px){ #yhteydenotto{ padding: 3svh 4vw; } .yhteydenotto-wrapper input, .yhteydenotto-wrapper textarea{ padding: 14px; } .yhteydenotto-wrapper button{ max-width: 420px; } } @media (max-width: 900px) { form { padding-left: 7%; padding-right: 7%; } form .form-group, form input, form select, form textarea { width: 100%; box-sizing: border-box; } form label { display: block; margin-bottom: 0.4rem; text-align: left; } } .yhteydenotto-wrapper{ width: 100%; max-width: none; margin: 0 auto; padding: 0; box-sizing: border-box; } .yhteydenotto-wrapper form{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 4vw; box-sizing: border-box; } @media (min-width: 900px){ .kaksikenttaa{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 40px; justify-content: space-between; } .kaksikenttaa .kentta{ flex: 1 1 48%; max-width: 48%; min-width: 360px; } .kokorivi{ width: 100%; max-width: none; padding-left: 0; padding-right: 0; } } @media (min-width: 900px) and (max-width: 1150px){ .kaksikenttaa{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } .kaksikenttaa .kentta{ flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); min-width: 300px; } } @media (max-width: 480px){ .yhteydenotto-hero{ min-height: 100svh; padding: 0 6vw; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .yhteydenotto-hero .hero-text{ max-width: 90vw; margin: 0 auto; } .yhteydenotto-hero .hero-text .hero-otsikko{ text-transform: none !important; font-weight: 800; font-size: clamp(1.9rem, 8vw, 2.4rem) !important; line-height: 1.15; letter-spacing: .01em; margin: 0 0 .75rem; text-wrap: balance; } .yhteydenotto-hero .hero-text .hero-kuvaus{ font-size: clamp(1rem, 4vw, 1.15rem); line-height: 1.5; opacity: .92; } } @media (max-width: 480px){ /* etusivun .hero käyttää samalla leveydellä justify-content:center + 12svh/18svh ylä-/alatäytettä (ei flex-start), jolloin teksti asettuu tasapainoisesti keskelle eikä heti yläreunaan kiinni - sama tähän. */ .yhteydenotto-hero{ justify-content: center; padding: 12svh 6vw 18svh; } .yhteydenotto-hero .hero-text{ margin-top: 0; } } .magnet-word[href^="mailto:"] { color: inherit !important; text-decoration: none !important; } .magnet-word[href^="mailto:"]:visited { color: inherit !important; } .magnet-word[href^="mailto:"]:hover, .magnet-word[href^="mailto:"]:focus-visible { color: inherit !important; text-decoration: none !important; } .magnet-word { color: #ffffff !important; text-decoration: none !important; } .magnet-word:visited { color: #ffffff !important; } .magnet-word:hover, .magnet-word:focus-visible { color: #ffffff !important; text-decoration: none !important; } body.light-mode .magnet-word { color: #0d1321 !important; text-decoration: none !important; } body.light-mode .magnet-word:visited { color: #0d1321 !important; } body.light-mode .magnet-word:hover, body.light-mode .magnet-word:focus-visible { color: #0d1321 !important; text-decoration: none !important; } /* ===== TV-kohina tausta (koko sivun ylitse) ===== */ .tv-noise { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } /* Kiinteä, ei-toistuva taustakuva (ei enää pelkkä SVG-kohinageneraattori) - täyttää koko näkymän aina samalla kuvalla riippumatta ruudun koosta/ suhteesta (background-size:cover), pysyy täysin paikallaan (ei animaatiota). Toistuva SVG-rae (feTurbulence) on kerrostettu kuvan PÄÄLLE (overlay-blend) lisäämään näkyvää tekstuuria/rakeisuutta - kuva yksinään näytti liian sileältä/tasaiselta. */ .tv-noise::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.0' intercept='-0.35'/%3E%3CfeFuncG type='linear' slope='1.0' intercept='-0.35'/%3E%3CfeFuncB type='linear' slope='1.0' intercept='-0.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("../photos/tausta-lumisade.webp"); background-repeat: repeat, no-repeat; background-position: left top, left bottom; background-size: 90px 90px, cover; background-blend-mode: overlay; opacity: 1; filter: brightness(0.75); } /* ===== Reunojen tummennus (koko sivun ylä-/alareuna, kaikilla sivuilla) ===== Kiinteä, viewporttiin ankkuroitu tummennus-liuku ylä- ja alareunassa - pysyy paikallaan scrollista riippumatta (kuten .tv-noise), z-index yläpalkin (.ylapalkki, 100) ALLA jottei se koskaan himmennä itse navigaatiota, mutta kaiken tavallisen sisällön YLÄPUOLELLA. */ .edge-vignette { position: fixed; left: 0; right: 0; height: clamp(110px, 14vh, 220px); pointer-events: none; z-index: 60; } .edge-vignette-top { top: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); } .edge-vignette-bottom { bottom: 0; background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); } @media (max-width: 900px) { .edge-vignette { display: none; } } /* ===== PROJEKTIT-SIVU: hero-tyylinen esittely ===== */ #projekteja.esittely-osio { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: env(safe-area-inset-top) 6vw env(safe-area-inset-bottom); } #projekteja .esittely-tekstit { width: auto; max-width: 60vw; margin: 20px auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; } #projekteja .esittely-otsikko { font-size: clamp(2rem, 8vw, 6.5rem); font-weight: 800; line-height: 0.9; margin: 0 0 -1rem; letter-spacing: .01em; } #projekteja .esittely-kuvaus { font-size: clamp(1rem, 3.5vw, 1.3rem); line-height: 1.35; max-width: 60ch; margin: .5rem auto 0; } .hero-text .esittely-otsikko { opacity: 0; transform: scaleY(0); transform-origin: bottom center; filter: blur(10px); transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease; } .hero-text.visible .esittely-otsikko { opacity: 1; transform: scaleY(1); filter: blur(0); transition-delay: 0.1s; } @media (max-width: 768px) { #projekteja .esittely-tekstit { max-width: 92vw; margin: -40px auto 0; } #projekteja .esittely-otsikko { font-size: clamp(2.4rem, 11vw, 4.6rem); line-height: 0.95; margin-bottom: 1rem; text-wrap: balance; } } /* ===== PROJEKTIT-SIVU: case study -galleria ===== */ .projektit-galleria { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.5rem, 6.666%, 4.5rem); row-gap: clamp(3rem, 12vw, 10rem); padding: 6svh 8vw 14svh; } .projekti-kortti { --ease-baun: cubic-bezier(.475, .425, 0, .995); --ease-hover: cubic-bezier(.65, 0, .35, 1); position: relative; display: block; width: 100%; opacity: 0; transform: scale(1.06); transition: opacity .5s var(--ease-baun), transform .5s var(--ease-baun); text-decoration: none; color: inherit; } .projekti-kortti.in-view { opacity: 1; transform: scale(1); } /* Ei vielä oikeaa julkista sivua näytettäväksi (ks. .projekti-tulossa-overlay) - kortti ei siis johda mihinkään klikattaessa (ks. javascript.js), joten osoitin ei myöskään näytä sitä linkiltä. */ .projekti-kortti--ei-linkki { cursor: default; } .projekti-parallax { position: relative; will-change: transform; } .projekti-kortti--tulossa .projekti-media { background: var(--accent); } /* Selkeä "sivu tulossa" -tila (ks. .projekti-kortti--tulossa) - iso pyörivä lataamisrinki + suuri teksti kuvan päällä, tumma verho takaa luettavuuden riippumatta taustakuvasta. Näkyy vain jos kortin .projekti-media sisältää tämän kääreen (ei kaikilla --tulossa-korteilla). */ .projekti-tulossa-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; background: rgba(13, 19, 33, .6); backdrop-filter: blur(2px); pointer-events: none; text-align: center; } /* Pehmeästi häivyttävä "komeetanhäntä"-rinki (conic-gradient + mask-rengas) tavallisen kaksivärisen border-spinnerin sijaan - näyttää tyylikkäämmältä ja pyörii rauhallisemmin (1.4s, ei .9s:n nopea nykäisy). */ .projekti-tulossa-ring { position: relative; width: clamp(56px, 9vw, 84px); height: clamp(56px, 9vw, 84px); border-radius: 50%; background: conic-gradient(from 0deg, rgba(240, 235, 219, 0) 0%, rgba(240, 235, 219, .15) 55%, #fff 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); animation: projektiTulossaSpin 1.4s cubic-bezier(.65, 0, .35, 1) infinite; } /* Pieni kirkas piste renkaan "kärjessä" korostaa pyörimissuuntaa - sama ajoitus kuin itse renkaalla, kiertää sen kanssa synkronissa. */ .projekti-tulossa-ring::after { content: ""; position: absolute; top: -1px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8); } @keyframes projektiTulossaSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .projekti-tulossa-ring { animation: none; } } .projekti-tulossa-teksti { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; letter-spacing: -.01em; padding: 0 1rem; } .projekti-media { position: relative; width: 100%; aspect-ratio: 840 / 1122; overflow: hidden; perspective: 1200px; background: var(--mid); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: scale(1.18); transition: transform .8s cubic-bezier(.08, .82, .28, .97), clip-path .85s var(--ease-hover); } .projekti-kortti.in-view .projekti-media { transform: scale(1); } .projekti-kortti:hover .projekti-media, .projekti-kortti.mobiili-hover .projekti-media { clip-path: polygon(3% 8%, calc(100% - 4px) 0%, calc(100% - 4px) 100%, 3% 92%); } .projekti-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center center; transition: transform 1.3s cubic-bezier(.65, 0, .35, 1); } .projekti-kortti:hover .projekti-media img, .projekti-kortti.mobiili-hover .projekti-media img { transform: rotateY(-11deg) scale(1.08); transition: transform .85s cubic-bezier(.65, 0, .35, 1) .1s; } .projekti-tint { position: absolute; inset: 0; z-index: 1; background: var(--muted); transform: translateY(0%); transition: transform .8s cubic-bezier(.08, .82, .28, .97); pointer-events: none; will-change: transform; } .projekti-kortti.in-view .projekti-tint { transform: translateY(-100%); } .projekti-teksti { margin: 1.1rem 0 0; text-align: left; } .projekti-teksti h3 { margin: 0; font-size: clamp(1.3rem, 1vw + 1.1rem, 2rem); font-weight: 700; letter-spacing: .01em; line-height: 1.05; color: #fff; overflow: hidden; } .projekti-teksti h3 .letra { display: inline-block; opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(20px); transition: opacity .32s cubic-bezier(.475, .425, 0, .995), clip-path .32s cubic-bezier(.475, .425, 0, .995), transform .32s cubic-bezier(.475, .425, 0, .995); } .projekti-teksti.teksti-in-view h3 .letra { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); } .projekti-teksti p { margin: .4rem 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: #fff; opacity: 0; transition: opacity .35s cubic-bezier(.475, .425, 0, .995) .15s; } .projekti-teksti.teksti-in-view p { opacity: .7; } @media (max-width: 900px) { .projektit-galleria { grid-template-columns: 1fr; row-gap: 2.4rem; padding: 2svh 6vw 8svh; } } body.light-mode .projekti-teksti h3, body.light-mode .projekti-teksti p { color: #fff; } @media (prefers-reduced-motion: reduce) { .projekti-kortti, .projekti-teksti h3 .letra { opacity: 1; transform: none; transition: none; } .projekti-tint { transform: translateY(-100%); transition: none; } .projekti-media, .projekti-media img { transform: none; clip-path: none; transition: none; } .projekti-teksti p { opacity: .7; transition: none; } } /* ===== MUKAUTETTU KURSORI ===== */ .custom-cursor, .custom-cursor * { pointer-events: none !important; } .custom-cursor { position: fixed; top: 0; left: 0; z-index: 9999; will-change: transform; } .custom-cursor .cursor-ring { position: absolute; top: 0; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid rgba(240, 235, 219, .35); background: transparent; transition: width .35s var(--ease-hover, cubic-bezier(.65,0,.35,1)), height .35s var(--ease-hover, cubic-bezier(.65,0,.35,1)), margin .35s var(--ease-hover, cubic-bezier(.65,0,.35,1)), background .35s ease, border-color .35s ease; } .custom-cursor .cursor-dot { position: absolute; top: 0; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; } .custom-cursor .cursor-dot-core { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--light); transition: transform .25s var(--ease-hover, cubic-bezier(.65,0,.35,1)); } .cursor-label { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none !important; font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: #fff; text-shadow: 0 4px 14px rgba(0, 0, 0, .85), 0 2px 4px rgba(0, 0, 0, .9); opacity: 0; transition: opacity .3s ease; will-change: transform; } .cursor-label.is-visible { opacity: 1; } .custom-cursor.is-hovering-project .cursor-dot-core { transform: scale(0); } .custom-cursor.is-hovering .cursor-ring { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: rgba(240, 235, 219, .12); border-color: rgba(240, 235, 219, .12); } .custom-cursor.is-hovering .cursor-dot-core { transform: scale(1.15); } body.light-mode .custom-cursor .cursor-ring { border-color: rgba(13, 19, 33, .18); } body.light-mode .custom-cursor.is-hovering .cursor-ring { background: rgba(13, 19, 33, .08); border-color: rgba(13, 19, 33, .08); } @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .custom-cursor { display: none; } } /* =============================== PILL-VALIKKO (LET'S TALK / MENU) =============================== */ .pill-nav { position: fixed; top: clamp(1.6rem, 3.6vh, 2.4rem); right: clamp(1.2rem, 3vw, 2rem); z-index: 1300; display: flex; align-items: center; gap: .6rem; pointer-events: auto; } .pill-btn { display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .8rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .pill-talk { background: #fff; color: var(--dark); border: 1px solid #fff; } .pill-menu { background: transparent; color: #fff; border: 1px solid #fff; } .pill-menu:hover { border-color: #fff; } .pill-nav.on-light .pill-talk { background: #fff; color: var(--dark); border-color: #fff; } .pill-nav.on-light .pill-menu { color: #fff; border-color: #fff; } .pill-nav.on-light .pill-menu:hover { border-color: #fff; } /* työpöydällä valikon avaus tekee Jutellaan/Menu-napeista mustia (ei mobiilissa) */ @media (min-width: 901px) { .pill-nav.on-light .pill-talk { color: var(--dark); border-color: var(--dark); } .pill-nav.on-light .pill-menu { color: var(--dark); border-color: var(--dark); } .pill-nav.on-light .pill-menu:hover { border-color: var(--dark); } } /* letter-by-letter hover effect: odd letters fade up, even letters fade down, like smoke, then the same text paints back in left to right. Generic so it can be hung on any clickable text (pill buttons, side-menu links, contact rows, social links...). */ .pill-talk { gap: 0; letter-spacing: normal; } /* pinotaan absoluuttisella asemoinnilla eikä grid-area:lla, koska jotkin host-elementit (esim. .valikko-kohta) pakottavat oman display:flex !important -arvonsa, mikä muuten rikkoisi grid-pinoamisen ja työntäisi swap-kerroksen omaksi, väärään paikkaan */ .letters-host { position: relative; display: inline-block; } .letters-original { display: inline-flex; white-space: nowrap; user-select: none; } .letters-swap { position: absolute; top: 0; left: 0; display: inline-flex; white-space: nowrap; pointer-events: none; user-select: none; } /* näkymätön mutta valittavissa oleva ehjä tekstikopio kirjain-spanien takana - varmistaa ettei kopioitu teksti hajoa kirjain per rivi eikä toistu kahdesti (ks. javascript.js: setupVanishAndRepaint). */ .letters-copy-text { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .letters-host .letter { display: inline-block; white-space: pre; filter: blur(0px); transition: transform .444s ease-out, opacity .444s ease-out, filter .444s ease-out; /* transformed letters can visually spill into a neighbouring row while flying up/down; without this they'd still be hit-tested at that spot and steal hover from it */ pointer-events: none; } /* snap straight back to the resting state with no fly-back motion once the effect has finished */ .letters-host.letters-fx-instant .letter { transition: none !important; } .letters-host.letters-fx .letters-original .letter { transition-delay: calc(var(--i, 0) * .03s); } .letters-host.letters-fx .letters-original .letter:nth-child(odd) { transform: translateY(-1.3em) scale(1.4); opacity: 0; filter: blur(3px); } .letters-host.letters-fx .letters-original .letter:nth-child(even) { transform: translateY(1.3em) scale(1.4); opacity: 0; filter: blur(3px); } /* Arvostelun nimi/rooli (review-author) - ei pystysuoraa nousua/laskua poistumisessa, koska review-author on kiinnitetty kiinteään kohtaan eikä sen ympärillä ole tilaa "hengittää" ilman että teksti näyttää tärähtävän paikoiltaan. Sama haihtumis-blur+opacity säilyy, vain Y-liike on nollattu. */ .review-author .letters-host.letters-fx .letters-original .letter:nth-child(odd), .review-author .letters-host.letters-fx .letters-original .letter:nth-child(even) { transform: scale(1.4); } /* the text paints back in left to right, starting the moment the last original letter began vanishing */ .letters-swap .letter { opacity: 0; filter: blur(4px); } .letters-host.letters-fx .letters-swap .letter { opacity: 1; filter: blur(0); transition-delay: calc((var(--original-total, 1) - 1) * .03s + var(--i, 0) * .036s); } /* arvostelun lainaus: saapuva (uusi) teksti rakennetaan täysin itsenäisenä, omana rakenteenaan (ks. javascript.js: buildQuoteArrival) - ei jaa samaa sana-ruudukkoa poistuvan tekstin kanssa, joten sanavälit ovat aina oikein riippumatta vanhan ja uuden tekstin pituuseroista. .letter-enter on alkutila juuri ennen maalautumista (poistetaan heti seuraavassa framessa). */ .review-quote-fx .letters-original .letter { transition-delay: calc(var(--i, 0) * .036s); } .review-quote-fx .letter.letter-enter { opacity: 0; filter: blur(4px); } .pill-menu-icon { position: relative; width: 12px; height: 10px; flex-shrink: 0; } .pill-burger-bar { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1); } .pill-burger-bar:nth-child(1) { top: 1px; } .pill-burger-bar:nth-child(2) { bottom: 1px; } .pill-x-bar { position: absolute; top: 50%; left: 50%; width: 100%; height: 2px; background: currentColor; border-radius: 2px; opacity: 0; transform: translate(-50%, -50%) rotate(0deg); transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1); } .pill-x-bar--a { transform: translate(-50%, -50%) rotate(45deg); } .pill-x-bar--b { transform: translate(-50%, -50%) rotate(-45deg); } .pill-menu.is-open { color: var(--dark); border-color: rgba(13, 19, 33, .3); } .pill-menu.is-open:hover { border-color: var(--dark); } .pill-menu.is-open .pill-burger-bar { opacity: 0; } .pill-menu.is-open .pill-x-bar { opacity: 1; } .pill-menu.is-open .pill-x-bar--a { transform: translate(-50%, -50%) rotate(45deg); } .pill-menu.is-open .pill-x-bar--b { transform: translate(-50%, -50%) rotate(-45deg); } @media (max-width: 480px) { .pill-btn { height: 32px; padding: 0 .85rem; font-size: .75rem; } } /* =============================== KYLKIPANEELI - täysin uusi ulkoasu =============================== */ .kylkipaneeli { top: clamp(.35rem, 1.2vw, .75rem) !important; right: clamp(.35rem, 1.2vw, .75rem) !important; bottom: clamp(.35rem, 1.2vw, .75rem) !important; left: auto !important; width: clamp(340px, 21vw, 490px) !important; height: auto !important; border-radius: clamp(3px, .5vw, 6px) !important; background-color: #fff !important; background-image: none !important; box-shadow: 0 25px 80px rgba(0, 0, 0, .45) !important; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(8rem, 17vh, 10rem) clamp(1.2rem, 2.5vw, 2.2rem) clamp(2rem, 4vh, 3rem); transform-origin: 100% 50%; transform: scale(.93) !important; pointer-events: none !important; opacity: 0; clip-path: circle(0% at 100% 0%); transition: clip-path .5s cubic-bezier(.55, 0, 1, .45), transform .9s cubic-bezier(.16, 1, .3, 1), opacity 1s cubic-bezier(.65, 0, .35, 1); overflow: hidden; } /* wait for the text stagger to finish retreating, then shrink ~30% (scale .7) and fade out together, smoothly, right at the very end of the close sequence */ .kylkipaneeli:not(.näkyy) { transition: clip-path .3s ease-in-out .9s, transform .3s ease-in-out .9s, opacity .3s ease-in-out .9s; } .kylkipaneeli.näkyy { display: flex !important; flex-direction: column !important; clip-path: circle(145% at 100% 0%) !important; transform: scale(1) !important; opacity: 1 !important; pointer-events: auto !important; } @media (max-width: 900px) { .kylkipaneeli { left: clamp(.35rem, 1.2vw, .75rem) !important; width: auto !important; } } .kylki-valikko { position: relative !important; top: auto !important; right: auto !important; left: auto !important; transform: none !important; align-items: stretch !important; width: 100% !important; gap: .2em !important; margin-top: 3.2rem !important; } .kylkipaneeli .valikko-kohta { display: flex !important; align-items: center; justify-content: space-between; width: 100%; gap: .6rem; color: var(--dark) !important; text-align: left !important; font-size: clamp(1.05rem, 1.8vw, 1.4rem) !important; font-weight: 500 !important; letter-spacing: -.01em; line-height: 1.15; opacity: 0; transform: translateY(48px); transition: color .2s ease, opacity 1.1s ease, transform 1.3s cubic-bezier(.16,1,.3,1); } .kylki-business, .kylki-social-block { opacity: 0; transform: translateY(48px); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.16,1,.3,1); } .kylkipaneeli.näkyy .valikko-kohta, .kylkipaneeli.näkyy .kylki-business, .kylkipaneeli.näkyy .kylki-social-block, .kylkipaneeli.näkyy .kylki-story-btn { opacity: 1; transform: translateY(0); } /* delay only the reveal (opacity/transform), never the hover color transition */ .kylkipaneeli.näkyy .kylki-valikko .valikko-kohta:nth-child(1) { transition-delay: 0s, .35s, .35s; } .kylkipaneeli.näkyy .kylki-valikko .valikko-kohta:nth-child(2) { transition-delay: 0s, .48s, .48s; } .kylkipaneeli.näkyy .kylki-valikko .valikko-kohta:nth-child(3) { transition-delay: 0s, .61s, .61s; } .kylkipaneeli.näkyy .kylki-valikko .valikko-kohta:nth-child(4) { transition-delay: 0s, .74s, .74s; } .kylkipaneeli.näkyy .kylki-valikko .valikko-kohta:nth-child(5) { transition-delay: 0s, .87s, .87s; } .kylkipaneeli.näkyy .kylki-valikko .valikko-kohta:nth-child(6) { transition-delay: 0s, 1s, 1s; } .kylkipaneeli.näkyy .kylki-valikko .valikko-kohta:nth-child(7) { transition-delay: 0s, 1.13s, 1.13s; } .kylkipaneeli.näkyy .kylki-business { transition-delay: 1.17s; } .kylkipaneeli.näkyy .kylki-social-block { transition-delay: 1.3s; } .kylkipaneeli.näkyy .kylki-story-btn { transition-delay: 0s, 0s, 1.43s, 1.43s; } /* closing: same effect, reversed order — smooth ease-in-out (slow start, fast middle, slow end) */ .kylkipaneeli:not(.näkyy) .kylki-story-btn { transition: background-color .2s ease, color .2s ease, opacity .8s cubic-bezier(.65,0,.35,1), transform .9s cubic-bezier(.65,0,.35,1); } .kylkipaneeli:not(.näkyy) .kylki-social-block { transition: opacity .8s cubic-bezier(.65,0,.35,1) .12s, transform .9s cubic-bezier(.65,0,.35,1) .12s; } .kylkipaneeli:not(.näkyy) .kylki-business { transition: opacity .8s cubic-bezier(.65,0,.35,1) .24s, transform .9s cubic-bezier(.65,0,.35,1) .24s; } .kylkipaneeli:not(.näkyy) .kylki-valikko .valikko-kohta:nth-child(6) { transition: color .2s ease, opacity .8s cubic-bezier(.65,0,.35,1) .36s, transform .9s cubic-bezier(.65,0,.35,1) .36s; } .kylkipaneeli:not(.näkyy) .kylki-valikko .valikko-kohta:nth-child(5) { transition: color .2s ease, opacity .8s cubic-bezier(.65,0,.35,1) .48s, transform .9s cubic-bezier(.65,0,.35,1) .48s; } .kylkipaneeli:not(.näkyy) .kylki-valikko .valikko-kohta:nth-child(4) { transition: color .2s ease, opacity .8s cubic-bezier(.65,0,.35,1) .60s, transform .9s cubic-bezier(.65,0,.35,1) .60s; } .kylkipaneeli:not(.näkyy) .kylki-valikko .valikko-kohta:nth-child(3) { transition: color .2s ease, opacity .8s cubic-bezier(.65,0,.35,1) .72s, transform .9s cubic-bezier(.65,0,.35,1) .72s; } .kylkipaneeli:not(.näkyy) .kylki-valikko .valikko-kohta:nth-child(2) { transition: color .2s ease, opacity .8s cubic-bezier(.65,0,.35,1) .84s, transform .9s cubic-bezier(.65,0,.35,1) .84s; } .kylkipaneeli:not(.näkyy) .kylki-valikko .valikko-kohta:nth-child(1) { transition: color .2s ease, opacity .8s cubic-bezier(.65,0,.35,1) .96s, transform .9s cubic-bezier(.65,0,.35,1) .96s; } .kylkipaneeli .valikko-kohta::after { content: '\2192'; color: var(--dark); text-decoration: none; opacity: 0; transform: translateX(-14px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); font-size: .7em; } .kylkipaneeli .valikko-kohta:hover { color: var(--dark) !important; font-weight: 700 !important; } .kylkipaneeli .valikko-kohta:hover::after { opacity: 1; transform: translateX(0); } /* hovering one link fades the others so the hovered one stands out */ .kylkipaneeli.näkyy .kylki-valikko:hover .valikko-kohta { opacity: .4; transition: opacity .3s ease, color .2s ease; } .kylkipaneeli.näkyy .kylki-valikko .valikko-kohta:hover { opacity: 1; } .kylki-bottom { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; } .kylki-label { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); } .kylki-business { display: flex; flex-direction: column; } .kylki-contact-row { display: flex; align-items: baseline; gap: .5rem; color: var(--dark); text-decoration: none; font-size: .95rem; font-weight: 500; } .kylki-contact-row span { color: var(--accent); font-size: .8rem; } .kylki-contact-row:hover { color: var(--accent); } .kylki-social-block { display: flex; flex-direction: column; } .kylki-social-grid { display: grid; grid-template-columns: repeat(2, auto); gap: .3rem 2rem; } .kylki-social-grid a { color: var(--dark); text-decoration: none; font-size: .95rem; font-weight: 500; } .kylki-social-grid a:hover { color: var(--accent); } .kylki-story-btn { display: inline-flex; align-items: center; gap: .5rem; height: 42px; padding: 0 1.2rem; border-radius: 999px; border: 1px solid rgba(13, 19, 33, .25); color: var(--dark); text-decoration: none; font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(48px); transition: background-color .2s ease, color .2s ease, opacity 1.1s ease, transform 1.3s cubic-bezier(.16,1,.3,1); } .kylki-story-btn:hover { background: var(--dark); color: #fff; } .kylki-story-star { color: var(--accent); } @media (max-width: 700px) { .kylkipaneeli { justify-content: flex-start; } .kylki-bottom { flex-direction: column; align-items: flex-start; } } /* =============================== KYLKIPANEELI - mobiili: koko ruudun tumma valikko (yllä oleva "täysin uusi ulkoasu" -kortti on tarkoitettu isommille näytöille; puhelimella se korvataan täällä täydellä, tummalla, oikealta liukuvalla valikolla). Logo (.corner-image, z-index 999) ja pill-nav (.pill-nav, z-index 1300, Jutellaan + auki ollessa X-nappi) pysyvät paneelin YLÄPUOLELLA näkyvissä, koska paneelin oma z-index on niitä matalampi. */ @media (max-width: 900px) { /* Vanhempi legacy-sääntö (ks. ylempänä toinen "@media max-width:900px" -lohko) togglaa tälle displayn none/block välillä .näkyy-luokan mukaan - display ei koskaan voi animoitua/viivästyä, joten se teki paneelista välittömästi katoavan riippumatta transformista. "display:flex !important" tässä (aina päällä, ei riipu mistään luokasta) neutraloi tuon täysin. */ /* Huom: itse liuku-transformin ja sen ajoituksen hoitaa nyt JS suoraan inline-tyylillä (ks. javascript.js: togglePaneeli), "important"-tasolla, jotta se voittaa taatusti kaiken tämän tiedoston vanhan/päällekkäisen kylkipaneeli-CSS:n riippumatta niiden järjestyksestä. Tässä siis vain paneelin perusmitat/värit ja LEPOTILAN (ei koskaan avattu) transform. */ .kylkipaneeli { display: flex !important; flex-direction: column !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; border-radius: 0 !important; background-color: var(--dark) !important; box-shadow: none !important; z-index: 900 !important; padding: clamp(5rem, 12svh, 6.5rem) 7vw clamp(2rem, 5svh, 3rem) !important; clip-path: none !important; transform: translateX(100%) !important; overflow-y: auto !important; } .kylkipaneeli .kylki-valikko { align-items: center !important; gap: .7rem !important; } .kylkipaneeli .valikko-kohta { justify-content: center !important; color: #fff !important; font-size: clamp(1.15rem, 5.2vw, 1.5rem) !important; font-weight: 700 !important; text-align: center !important; letter-spacing: -.02em; } .kylkipaneeli .valikko-kohta .letters-host, .kylkipaneeli .valikko-kohta .letters-original, .kylkipaneeli .valikko-kohta .letters-swap { white-space: nowrap !important; flex-wrap: nowrap !important; } .kylkipaneeli .valikko-kohta::after { display: none; } .kylkipaneeli .kylki-bottom { margin-top: clamp(1.6rem, 5svh, 2.6rem); flex-direction: column; align-items: center; text-align: center; gap: 1.8rem; } .kylkipaneeli .kylki-story-btn { order: -1; align-self: center; color: #fff !important; border-color: rgba(240, 235, 219, .3) !important; } .kylkipaneeli .kylki-story-btn:hover { background: var(--light) !important; color: var(--dark) !important; } .kylkipaneeli .kylki-business { align-items: center; position: relative; padding-top: 1.8rem; } /* Vaaka­viiva pisteellä keskellä, samaan tapaan kuin referenssikuvassa */ .kylkipaneeli .kylki-business::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(70vw, 320px); height: 6px; background: radial-gradient(circle, var(--light) 1.5px, transparent 2px) center / 6px 6px no-repeat, linear-gradient(rgba(240, 235, 219, .25), rgba(240, 235, 219, .25)) center / 100% 1px no-repeat; opacity: .8; } .kylkipaneeli .kylki-social-block { align-items: center; } .kylkipaneeli .kylki-contact-row, .kylkipaneeli .kylki-social-grid a { color: #fff !important; } .kylkipaneeli .kylki-social-grid { justify-content: center; } } .evasteet-lohko-1 { height: 100vh; background: yellow; } .footer { position: relative; /* estää .footer-boksin margin-top:75vh:n "collapsoitumisen" tämän elementin läpi (mikä muuten työntäisi koko osion alaspäin ja jättäisi mustan tyhjän alueen sen yläpuolelle) */ display: flow-root; height: 100vh; background: green; z-index: 0; } .footer-boksi { position: sticky; top: 50vh; width: 100%; height: 50vh; margin: 0; background: var(--dark); z-index: 1; display: flex; align-items: flex-end; color: #fff; } .footer-bar { display: flex; align-items: flex-end; justify-content: flex-start; gap: 3vw; width: 100%; padding: clamp(2rem, 4vw, 3.5rem) calc(4vw + 190px) clamp(2rem, 4vw, 3.5rem) 4vw; } .footer-bar-right { margin-left: auto; } .footer-bar-brand img { width: clamp(360px, 36vw, 560px); height: auto; display: block; position: relative; left: 20px; } .footer-bar-right { display: flex; flex-direction: column; align-self: stretch; justify-content: space-between; align-items: flex-end; gap: 2rem; } .footer-bar-top { display: flex; flex-wrap: wrap; gap: clamp(2.5rem, 5vw, 5rem); } .footer-bar-nav, .footer-bar-contact, .footer-bar-social { display: flex; flex-direction: column; gap: .5rem; font-size: .95rem; } .footer-bar-nav a, .footer-bar-contact a, .footer-bar-social a { color: #fff; opacity: .6; text-decoration: none; transition: opacity .2s ease; } .footer-bar-nav a:hover, .footer-bar-contact a:hover, .footer-bar-social a:hover { opacity: 1; } .footer-bar-copy { display: flex; align-items: center; gap: 1.25rem; color: #fff; opacity: .4; font-size: .85rem; white-space: nowrap; } .footer-bar-copy a { color: #fff; text-decoration: none; transition: opacity .2s ease; } .footer-bar-copy a:hover { opacity: .7; } @media (max-width: 700px) { /* .footer-boksin align-items:flex-end (desktop) ankkuroi koko sisällön laatikon alareunaan, jolloin yläosaan jää käyttämätöntä tyhjää tilaa kapealla näytöllä. Venytetään .footer-bar koko korkeudelle ja jaetaan logo/loppusisältö space-betweenillä ylös ja alas käyttämään koko tila. */ .footer-boksi { align-items: stretch; } .footer-bar { flex-direction: column; align-items: flex-start; /* space-betweenin sijaan kiinteä, väljä väli - loppusisältö nousee lähemmäs logoa sen sijaan että se painuisi tyystin laatikon alareunaan asti */ justify-content: flex-start; height: 100%; /* Pienempi väli kuin ennen: koko sisältö (logo + valikko/yhteystieto- ruudukko + Evästeet/Tietosuoja/Käyttöehdot-rivi) mahtuu tiiviimpänä varmemmin 50vh-korkean sticky-laatikon sisään - muuten viimeinen rivi (copyright-rivi) saattoi ylivuotaa laatikon (ja siten todellisen näkyvän alueen) alapuolelle mobiilin osoitepalkin/koti-ilmaisimen viemän tilan takia. */ gap: 1.25rem; /* alkuperäinen oikea padding (calc(4vw + 190px)) oli varattu isolle desktop-logolle - mobiilissa sama tila jäisi turhaan tyhjäksi ja pakottaisi sisällön ahtaalle */ padding: clamp(1.5rem, 5vw, 2.5rem) 5vw; } .footer-bar-right { width: 100%; align-items: flex-start; gap: .75rem; } .footer-bar-brand img { /* iso, oma rivinsä ylhäällä - samassa hengessä kuin desktop-koko, mutta kavennettu mahtumaan kapealle näytölle ilman 20px-sivusiirtymää */ width: clamp(210px, 52vw, 300px); left: 0; } /* kaksi saraketta rinnakkain (valikko vasemmalla, yhteystieto oikealla), somelinkit omana täysleveänä rivinään niiden alla - ks. viitekuva */ .footer-bar-top { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "nav contact" "social social"; column-gap: 1rem; row-gap: 1rem; } .footer-bar-nav { grid-area: nav; } .footer-bar-contact { grid-area: contact; } .footer-bar-social { grid-area: social; } } .footer-punainen { position: absolute; top: 0; left: 0; width: 100vw; height: 54vh; background: #000; overflow: hidden; z-index: 2; } /* Sama taustakuva kuin koko sivun .tv-noise::after:lla - oma ::before eikä suora background .footer-punaiselle, koska filter (kirkkauden alennus) vaikuttaisi muuten myös CTA-tekstiin/nappiin, ei vain taustaan. */ .footer-punainen::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.0' intercept='-0.35'/%3E%3CfeFuncG type='linear' slope='1.0' intercept='-0.35'/%3E%3CfeFuncB type='linear' slope='1.0' intercept='-0.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("../photos/tausta-lumisade.webp"); background-repeat: repeat, no-repeat; background-position: left top, left bottom; background-size: 90px 90px, cover; background-blend-mode: overlay; filter: brightness(0.75); } .footer-cta { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: flex-start; padding: 0 clamp(5vw, 5.6vw, 6.4rem); } .footer-cta-text { position: relative; z-index: 1; max-width: 640px; } .footer-cta-title { margin: 0; /* ks. globaali h2 { opacity:0; padding:4rem 2rem } -sääntö (styles.css:214) - se odottaa body.content-visible-luokkaa jota ei koskaan lisätä, joten jokainen h2 tarvitsee nämä ylikirjoitukset tullakseen näkyviin oikeassa kohdassa (sama kikka kuin .jatti-teksti h2:lla). */ opacity: 1; padding: 0; color: #fff; font-family: 'Verdante', system-ui, sans-serif !important; font-weight: 800; font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.08; letter-spacing: -.03em; /* "jotain [sana]" ei saa koskaan katketa omalle rivilleen (br hoitaa ainoan tarkoitetun rivinvaihdon "Rakennetaan"-sanan jälkeen) - ks. myös mobiilin pienempi fonttikoko alla, joka pitää huolen että pisinkin vaihtuva sana mahtuu aina samalle riville "jotain"-sanan kanssa. */ white-space: nowrap; } .footer-cta-highlight { color: #fff; } /* "koukuttavaa"-sanan vaihtoefekti: oma, yksinkertaisempi kirjainkoneisto kuin muualla sivulla (ei letters-host/original/swap-järjestelmää, ks. javascript.js). Kirjaimet pysyvät paikallaan (ei liu'utusta) ja haihtuvat/ilmestyvät sumeina satunnaisessa järjestyksessä (--rand) - ensin KAIKKI vanhat kirjaimet häviävät kokonaan, vasta sitten uudet ilmestyvät (kaksivaiheinen, ei limittäin). */ #footer-cta-word .letter { display: inline-block; white-space: pre; opacity: 1; filter: blur(0); transition: opacity .7s ease, filter .7s ease; transition-delay: calc(var(--rand, 0) * .75s); } #footer-cta-word .letter.letter-hidden { opacity: 0; filter: blur(6px); } .footer-cta-subtitle { display: none; margin: 1rem 0 0; color: #fff; opacity: .6; font-size: clamp(1rem, 1.2vw, 1.25rem); } .footer-cta-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); } @media (max-width: 900px) { /* .footer-boksin position:sticky ei koskaan aktivoidu mobiilissa (todettu Playwright-testeillä sekä Chromiumissa että WebKitissä - syytä ei saatu jäljitettyä stylesheetin/sivun laajasta kokonaisuudesta), jolloin koko laatikon sisältö (logo, valikko, some-linkit) jää pysyvästi .footer- punaisen taakse piiloon eikä tule koskaan näkyviin. Vaihdetaan sticky position:absoluteksi ja ankkuroidaan se kiinteästi alapalkin alaosaan (bottom:0) - sisältö näkyy nyt luotettavasti, vaikkei enää liu'ukaan paikalleen scrollin mukana. */ .footer-boksi { position: absolute; top: auto; bottom: 0; } .footer-punainen { height: 50vh; } .footer-cta { justify-content: flex-start; align-items: flex-start; text-align: left; /* tilaa kiinteän pill-navin (hampurilaisvalikko, position:fixed top-right) alle, ettei otsikko mene sen alle/taakse kun tämä osio tulee näkyviin */ padding-top: 11rem; } .footer-cta-text { max-width: 100%; } .footer-cta-subtitle { display: block; } .footer-cta-buttons { justify-content: flex-start; } .footer-cta-title { /* pienempi kuin peruslattia (2.1rem), jotta myös pisin vaihtuva sana ("mieleenpainuvaa") mahtuu "jotain"-sanan kanssa samalle riville kapeillakin puhelinnäytöillä ilman että white-space:nowrap aiheuttaa ylivuotoa */ font-size: clamp(1.35rem, 6.4vw, 2.1rem); } /* Mobiilissa nappi: teksti + suora nuoli oikealla, sisällönmukainen leveys (ei koko rivin levyinen), alaviiva samanlevyinen kuin nappi. Ei taustaväriä (musta tausta näkyy läpi), ei desktopin hover- perusteista liu'utus/häivytysanimaatiota - kosketuslaitteella nappi näytetään aina "valmiissa" asennossaan. */ .aloita-btn { width: fit-content; justify-content: space-between; gap: 1rem; padding: 1rem 0; } .aloita-btn::before { width: 100%; left: 0; bottom: 0; } .aloita-btn .aloita-line-grow { width: 100%; left: 0; bottom: 0; transform: scaleX(0); } .aloita-btn.line-forward::before, .aloita-btn.line-reverse::before, .aloita-btn.line-forward .aloita-line-grow, .aloita-btn.line-reverse .aloita-line-grow { animation: none; } .aloita-btn::after { content: '\2192'; position: static; transform: none; opacity: 1; } .aloita-btn.line-forward::after, .aloita-btn.line-reverse::after { animation: none; } .aloita-btn:hover .btn-text-wrapper-static .letter, .aloita-btn .btn-text-wrapper-static .letter { transform: none; } } .evasteet-lohko-3 { height: 100vh; background: yellow; } /* "Aloitetaan projekti tänään" -nappi: sama alaviiva+nuoli+kirjainlevitys- efekti kuin jattiosion "Katso projekti" -napeilla (ks. javascript.js kohdat 8 ja 9, jotka on laajennettu käsittelemään myös .aloita-btn), mutta oma erillinen luokka ettei se osu jattiosion .katsoProjektiBtn:n kovakoodattuun "aina projektit-sivulle" -klikkauslogiikkaan. */ .aloita-btn { margin-top: 0; /* alaviiva on 6px hoverattavan laatikon alareunasta (ei ihan kiinni siinä), jotta hover-alue ulottuu myös viivan alle asti eikä katkea tarkalleen viivan kohdalla - ks. ::before bottom-arvo alla */ padding: 0 0 20px; color: #fff; font-family: ui-monospace, 'SF Mono', 'Courier New', Consolas, monospace; font-weight: 500; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; overflow: visible; position: relative; height: auto; line-height: 1.4; width: fit-content; max-width: 100%; padding-right: 1.5rem; } @media (max-width: 900px) { /* Teksti kutistuu kapealla näytöllä ("ALOITETAAN PROJEKTI TÄNÄÄN"), ettei nappi ole visuaalisesti liian leveä - tämän pitää tulla tämän tiedoston .aloita-btn-peruslattian JÄLKEEN, koska sama selektori/spesifisyys tarkoittaa että muuten aiemmin (ylempänä tiedostossa) määritelty mobiilisääntö hävisi järjestyksessä myöhemmälle peruslattialle. */ .aloita-btn { font-size: clamp(.85rem, 3.6vw, 1.05rem); letter-spacing: .03em; gap: .6rem; padding-right: .75rem; } } .aloita-btn::before { content: ''; position: absolute; left: 0; bottom: 6px; /* sama matka kuin kirjainten leviäminen hoverissa (translateX(90px)), jotta viiva ulottuu täsmälleen yhtä pitkälle kuin kirjaimetkin, ei nappia leveämmälle - ks. .tekstit-ja-nappi button::before */ width: calc(100% + 90px); height: 1px; background: var(--light); transform: scaleX(1); transform-origin: right center; } /* toinen viiva-elementti kasvua varten (ei pseudo, ::after on jo nuoli) - sama päällekkäisyys-tekniikka kuin .katso-line-grow: kasvu alkaa jo ennen kuin ::before on ehtinyt kokonaan kutistua, eikä opacityä käytetä missään vaiheessa, pelkkä scaleX hoitaa katoamisen/ilmestymisen - ks. .katso-line-grow */ .aloita-btn .aloita-line-grow { position: absolute; left: 0; bottom: 6px; width: calc(100% + 90px); height: 1px; background: var(--light); transform: scaleX(0); transform-origin: left center; pointer-events: none; } .aloita-btn.line-forward::before { animation: aloitaLineShrink 1.5s; } .aloita-btn.line-reverse::before { animation: aloitaLineShrinkReverse 1.5s; } .aloita-btn.line-forward .aloita-line-grow { animation: aloitaLineGrow 1.5s; } .aloita-btn.line-reverse .aloita-line-grow { animation: aloitaLineGrowReverse 1.5s; } /* Kutistuminen: nopea alkuun, hidastuu mitä lyhyemmäksi tulee. Pysyy piilossa lopun ajan - kasvu hoidetaan kokonaan erillisellä .aloita-line-grow-elementillä. */ @keyframes aloitaLineShrink { 0% { transform-origin: right center; transform: scaleX(1); animation-timing-function: cubic-bezier(.5, 1, .89, 1); } 55% { transform-origin: right center; transform: scaleX(0); } 100% { transform-origin: right center; transform: scaleX(0); } } @keyframes aloitaLineShrinkReverse { 0% { transform-origin: left center; transform: scaleX(1); animation-timing-function: cubic-bezier(.5, 1, .89, 1); } 55% { transform-origin: left center; transform: scaleX(0); } 100% { transform-origin: left center; transform: scaleX(0); } } /* Kasvu alkaa jo 35%:ssa - eli ennen kuin vanha viiva on 55%:ssa kokonaan kutistunut - jotta kutistuva ja kasvava viiva näkyvät hetken päällekkäin. */ @keyframes aloitaLineGrow { 0% { transform-origin: left center; transform: scaleX(0); } 35% { transform-origin: left center; transform: scaleX(0); } 35.01% { transform-origin: left center; transform: scaleX(0.001); animation-timing-function: cubic-bezier(.55, .06, .68, .19); } 100% { transform-origin: left center; transform: scaleX(1); } } @keyframes aloitaLineGrowReverse { 0% { transform-origin: right center; transform: scaleX(0); } 35% { transform-origin: right center; transform: scaleX(0); } 35.01% { transform-origin: right center; transform: scaleX(0.001); animation-timing-function: cubic-bezier(.55, .06, .68, .19); } 100% { transform-origin: right center; transform: scaleX(1); } } .aloita-btn::after { content: '\2192'; font-family: inherit; position: absolute; top: 42%; right: -90px; left: auto; transform: translateY(-50%) scaleY(1); } .aloita-btn .btn-text-wrapper-static { position: relative; top: 4px; } .aloita-btn:hover { color: #fff; } .aloita-btn.line-forward::after { animation: aloitaArrowFadeExtended 1.5s forwards; } .aloita-btn.line-reverse::after { animation: aloitaArrowFadeExtendedReverse 1.5s forwards; } @keyframes aloitaArrowFadeExtended { 0% { right: -90px; left: auto; opacity: 1; transform: translateY(-50%) scale(1); } 45% { right: -90px; left: auto; opacity: 0; transform: translateY(-50%) scale(0); } 45.01% { right: auto; left: 0; opacity: 0; transform: translateY(-50%) scale(0); } 100% { right: auto; left: 0; opacity: 1; transform: translateY(-50%) scale(1); } } @keyframes aloitaArrowFadeExtendedReverse { 0% { right: auto; left: 0; opacity: 1; transform: translateY(-50%) scale(1); } 45% { right: auto; left: 0; opacity: 0; transform: translateY(-50%) scale(0); } 45.01% { right: -90px; left: auto; opacity: 0; transform: translateY(-50%) scale(0); } 100% { right: -90px; left: auto; opacity: 1; transform: translateY(-50%) scale(1); } } .aloita-btn .btn-text-wrapper-static .letter { display: inline-block; white-space: pre; transition: transform 1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * .055s); } .aloita-btn:hover .btn-text-wrapper-static .letter { transform: translateX(90px); transition-delay: calc((var(--total, 0) - var(--i, 0)) * .055s); } /* ===== Evästebanneri ===== */ .cookie-banner { position: fixed; left: 50%; bottom: 2rem; z-index: 9999; display: flex; align-items: center; gap: 1.75rem; padding: 0.9rem 1.5rem; background: none; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 14px; max-width: calc(100vw - 2rem); opacity: 0; filter: blur(14px); transform: translate(-50%, 48px); pointer-events: none; transition: opacity .6s ease, filter .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1); } .cookie-banner.is-visible { opacity: 1; filter: blur(0); transform: translate(-50%, 0); pointer-events: auto; } .cookie-banner[hidden] { display: none; } .cookie-banner-text { margin: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; white-space: nowrap; } .cookie-banner-actions { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; } .cookie-banner-btn { background: none; border: none; padding: 0; font: inherit; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; cursor: pointer; white-space: nowrap; transition: opacity 0.2s ease; } .cookie-banner-btn:hover, .cookie-banner-btn:focus-visible { opacity: 0.65; } .cookie-banner-btn--accept { font-weight: 600; } @media (max-width: 640px) { .cookie-banner, .cookie-banner.is-visible { /* .is-visible asettaa oman transform: translate(-50%, 0):nsa, joka (kahden luokan suurempi spesifisyys) muuten voittaisi tämän - jolloin -50%-siirtymä jäisi vetämään bannerin liikaa vasemmalle, koska left/ right on jo asetettu tässä suoraan reunoihin eikä keskitykseen. */ transform: none; flex-direction: column; align-items: flex-start; gap: 0.85rem; bottom: max(1rem, calc(0.6rem + env(safe-area-inset-bottom))); left: 1rem; right: 1rem; max-width: none; background: #000; } .cookie-banner-text { white-space: normal; } } /* ===== Minusta-osio (tietoa.html) - mitattu referenssikuvasta: kuva alkaa osion yläreunasta (ei yläväliä), leveys n. 32vw, oikealla n. 12vw marginaali reunaan, korkeussuhde n. 0.73 (kapeampi kuin korkea, ei venytetty koko osion korkeudelle). Teksti alkaa n. 18vh kohdalta, pienempi fonttikoko. Tausta #000 - sama "normaali tumma" kuin muualla sivulla. */ .minusta-osio { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: center; gap: clamp(1.5rem, 3vw, 3rem); padding: 0 6vw 4rem; color: #fff; } .minusta-teksti { flex: 0 1 600px; display: flex; flex-direction: row; align-items: flex-start; gap: 1.5rem; max-width: 600px; padding-top: 18vh; } .minusta-eyebrow { flex: 0 0 auto; color: #E0A868; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; padding-top: .3rem; } .minusta-p-stack { flex: 0 1 400px; max-width: 400px; display: flex; flex-direction: column; gap: 0; } .minusta-p { margin: 0; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.5; font-weight: 500; color: #fff; } .minusta-word { display: inline-block; } .minusta-letra { display: inline-block; transform: translateY(14px); opacity: 0; will-change: transform, opacity; /* nopea alkuun, hidastuu pehmeästi juuri ennen paikalleen asettumista - sama käyrä kuin muualla sivulla kuvien/korttien sisääntulossa, mutta selvästi hitaampi jotta liike ei nykisi useamman sanan asettuessa. */ transition: transform 1.3s cubic-bezier(.08, .82, .28, .97), opacity 1s ease; } .minusta-p-stack.is-visible .minusta-letra { transform: translateY(0); opacity: 1; } .minusta-kuva-alue { position: relative; flex: 0 0 32vw; width: 32vw; aspect-ratio: 0.73; overflow: hidden; } .minusta-kuva { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.18); transition: transform .8s cubic-bezier(.08, .82, .28, .97); } .minusta-kuva-alue.in-view .minusta-kuva { transform: scale(1); } /* Sama "verho liukuu pois" -sisääntuloefekti kuin projektit.html:n laatikoissa (.projekti-kortti/.projekti-tint) - laukeaa kun kuva scrollataan näkyviin (ks. javascript.js). */ .minusta-reveal-tint { position: absolute; inset: 0; z-index: 2; background: var(--muted); transform: translateY(0%); transition: transform .8s cubic-bezier(.08, .82, .28, .97); pointer-events: none; } .minusta-kuva-alue.in-view .minusta-reveal-tint { transform: translateY(-100%); } @media (max-width: 900px) { .minusta-osio { flex-direction: column; padding: 3.5rem 6vw 3rem; } .minusta-teksti { flex-direction: column; gap: .8rem; max-width: 100%; padding-top: 0; } .minusta-p-stack { flex-basis: auto; max-width: 100%; } .minusta-kuva-alue { flex-basis: auto; width: 100%; aspect-ratio: auto; min-height: 340px; margin-top: 1rem; } } /* ===== Prosessi-osio (tietoa.html) - 470vh korkea, vasen otsikko pysyy paikallaan (position:sticky) koko sen matkan ajan kun osiota scrollataan. */ .prosessi-osio { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 415vh; color: #fff; } /* Ohut, iso, vaaleanharmaa rinki vasemman otsikon takana - EI sticky, vierii normaalisti dokumentin mukana (sijaitsee suoraan .prosessi-osiossa, ei .prosessi-sticky-vasenin sisällä). */ .prosessi-ring-decor { position: absolute; left: -320px; top: 62vh; width: 950px; height: 950px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; pointer-events: none; z-index: 0; } .prosessi-sticky-vasen { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: flex-start; padding-top: 28vh; padding-left: clamp(2rem, 6vw, 6rem); } .prosessi-alaotsikko { margin: .9rem 0 0; opacity: 1; padding: 0; color: #E0A868; font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; /* sama verho-clippaus kuin .prosessi-otsikko:lla, ks. javascript.js initProsessiOtsikkoExit - kirjaimet ja verho liikkuvat molemmissa samassa tahdissa, samalla efektillä. */ clip-path: inset(0 0 0 0); transition: clip-path .45s cubic-bezier(.65,0,.35,1); } .prosessi-otsikko { margin: 0; /* ks. globaali h2 { opacity:0; padding:4rem 2rem } -sääntö - odottaa body.content-visible-luokkaa jota ei koskaan lisätä, joten jokainen h2 tarvitsee nämä ylikirjoitukset tullakseen näkyviin (sama kikka kuin .hero-otsikko/.footer-cta-title:lla). */ opacity: 1; padding: 0; color: #fff; font-size: clamp(1.8rem, 3.8vw, 3.2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; flex-shrink: 0; clip-path: inset(0 0 0 0); transition: clip-path .45s cubic-bezier(.65,0,.35,1); } .prosessi-letra { display: inline-block; transform: translateY(0); opacity: 1; transition: transform .3s cubic-bezier(.65,0,.35,1), opacity .3s ease; } .prosessi-otsikko.is-leaving .prosessi-letra, .prosessi-alaotsikko.is-leaving .prosessi-letra { transform: translateY(48px); opacity: 0; } .prosessi-otsikko.is-hiding-up .prosessi-letra, .prosessi-alaotsikko.is-hiding-up .prosessi-letra { transform: translateY(100px); opacity: 0; } /* Oikea puoli EI ole sticky - se on normaali dokumenttivirta, jossa jokainen .prosessi-vaihe on tasan 100vh korkea. Kun 470vh-osiota scrollataan, vasen otsikko pysyy kiinni yläreunassa, mutta oikealla näkyvä vaihe vaihtuu joka 100vh:n kohdalla. */ .prosessi-oikea-lista { grid-column: 2; grid-row: 1 / -1; } /* Tyhjä tila listan alussa - vasemman otsikon annetaan olla stickynä yksin 50vh ajan ennen kuin ensimmäinen vaihe (01) tulee näkyviin. */ .prosessi-vaihe-spacer { height: 30vh; } .prosessi-vaihe-spacer--end { height: 45vh; } .prosessi-vaihe { height: 85vh; max-width: 560px; display: flex; flex-direction: column; justify-content: center; padding-left: clamp(1rem, 3vw, 3rem); padding-right: clamp(2rem, 8vw, 8rem); } .prosessi-vaihe--ristit { position: relative; } .prosessi-ristit { position: absolute; left: -100px; top: 50%; transform: translateY(-50%); width: 50px; height: 100px; } .prosessi-risti { position: absolute; width: 5px; height: 5px; color: #fff; } .prosessi-risti::before, .prosessi-risti::after { content: ""; position: absolute; background: currentColor; } .prosessi-risti::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); } .prosessi-risti::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); } .prosessi-risti:nth-child(1) { left: 10px; top: 0px; } .prosessi-risti:nth-child(2) { left: 20px; top: 0px; } .prosessi-risti:nth-child(3) { left: 10px; top: 18px; } .prosessi-risti:nth-child(4) { left: 20px; top: 18px; } .prosessi-risti:nth-child(5) { left: 30px; top: 18px; } .prosessi-risti:nth-child(6) { left: 20px; top: 36px; } .prosessi-risti:nth-child(7) { left: 30px; top: 36px; } .prosessi-risti:nth-child(8) { left: 40px; top: 36px; } .prosessi-risti:nth-child(9) { left: 0px; top: 72px; } .prosessi-risti:nth-child(10) { left: 0px; top: 90px; } .prosessi-risti--korostus { color: #E0A868; } .prosessi-icon-wrap { position: relative; width: 220px; height: 220px; margin-bottom: 2.5rem; } .prosessi-icon-orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed #4a4a4a; transform: translate(-50%, -50%); } .prosessi-icon-orbit-outer { width: 200px; height: 200px; animation: prosessiOrbitSwing 5s ease-in-out infinite; } @keyframes prosessiOrbitSwing { 0% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(16deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } } .prosessi-icon-orbit-inner { width: 136px; height: 136px; animation: prosessiInnerSpin 18s linear infinite; } @keyframes prosessiInnerSpin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 15% { transform: translate(-50%, -50%) rotate(-110deg); } 35% { transform: translate(-50%, -50%) rotate(-150deg); } 55% { transform: translate(-50%, -50%) rotate(-230deg); } 75% { transform: translate(-50%, -50%) rotate(-270deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); } } .prosessi-icon-core { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; border-radius: 50%; background: #E0A868; transform: translate(-50%, -50%); } .prosessi-icon-line { position: absolute; left: 112px; top: 102px; width: 2px; height: 130px; background: #fff; transform-origin: top center; animation: prosessiLineSwing 5s ease-in-out infinite; } @keyframes prosessiLineSwing { 0% { transform: rotate(-35deg); } 50% { transform: rotate(-50deg); } 100% { transform: rotate(-35deg); } } .prosessi-icon-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); } .prosessi-icon-dot-a { left: 142px; top: 9px; background: #fff; animation: prosessiDotDriftA 4.5s ease-in-out infinite; } .prosessi-icon-dot-b { left: 198px; top: 117px; background: #E0A868; animation: prosessiDotDriftB 6s ease-in-out infinite; } .prosessi-icon-dot-c { left: 16px; top: 112px; background: #fff; animation: prosessiDotDriftC 5.2s ease-in-out infinite; } @keyframes prosessiDotDriftA { 0%, 100% { transform: translate(-50%, -50%) translate(0, 0); } 50% { transform: translate(-50%, -50%) translate(5px, -4px); } } @keyframes prosessiDotDriftB { 0%, 100% { transform: translate(-50%, -50%) translate(0, 0); } 50% { transform: translate(-50%, -50%) translate(-4px, 5px); } } @keyframes prosessiDotDriftC { 0%, 100% { transform: translate(-50%, -50%) translate(0, 0); } 50% { transform: translate(-50%, -50%) translate(4px, 4px); } } /* 02-vaiheen ikoni: kolme muotoa seisomassa vaakaviivalla */ .prosessi-shape-line { position: absolute; left: 10px; top: 170px; width: 200px; height: 1.5px; background: #fff; opacity: .6; } .prosessi-shape-circle { position: absolute; left: 13px; top: 116px; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid #fff; animation: prosessiCircleRoll 4s ease-in-out infinite; } @keyframes prosessiCircleRoll { 0% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(0) rotate(0deg); } 42% { transform: translateX(-24px) rotate(-50deg); } 58% { transform: translateX(-24px) rotate(-50deg); } 100% { transform: translateX(0) rotate(0deg); } } .prosessi-shape-rect { position: absolute; left: 80px; top: 70px; width: 60px; height: 100px; transform-origin: bottom center; animation: prosessiRectFall 4s ease-in-out infinite; } @keyframes prosessiRectFall { 0% { transform: rotate(0deg); } 30% { transform: rotate(-20deg); } 55% { transform: rotate(-20deg); } 90% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .prosessi-shape-impact-line { position: absolute; left: 208px; top: 12px; width: 95px; height: 2px; background: #E0A868; transform-origin: left center; animation: prosessiImpactLine 4s ease-in-out infinite; } @keyframes prosessiImpactLine { 0% { transform: rotate(137deg); } 50% { transform: rotate(100deg); } 100% { transform: rotate(137deg); } } .prosessi-shape-rect-path { animation: prosessiRectMarch 2.5s ease-in-out infinite alternate; } @keyframes prosessiRectMarch { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 40; } } .prosessi-shape-square { position: absolute; left: 150px; top: 110px; width: 60px; height: 60px; background: #E0A868; } /* 03-vaiheen ikoni: pinottuja "tasoja" (vinoneliöitä) päällekkäin. Ylin taso on riittävän peittävä (ei läpinäkyvä), jotta se DOM-järjestyksen (piirretään viimeisenä = päällimmäisenä) ansiosta oikeasti piilottaa alempien tasojen keskiosat - siksi alemmat eivät näy täysinä. */ .prosessi-layer { position: absolute; left: 67px; width: 86px; height: 86px; transform: scaleY(.55); } .prosessi-layer-diamond { width: 100%; height: 100%; transform: rotate(45deg); } .prosessi-layer-1 { top: 32px; animation: prosessiLayerCollapse1 5s ease-in-out infinite; } .prosessi-layer-1 .prosessi-layer-diamond { background: #654c2f; border: 2px solid #E0A868; } .prosessi-layer-2 { top: 62px; animation: prosessiLayerCollapse2 5s ease-in-out infinite; } .prosessi-layer-2 .prosessi-layer-diamond { border: 1.5px solid rgba(255, 255, 255, .55); } .prosessi-layer-3 { top: 92px; animation: prosessiLayerCollapse3 5s ease-in-out infinite; } .prosessi-layer-3 .prosessi-layer-diamond { border: 1.5px solid rgba(255, 255, 255, .32); } .prosessi-layer-4 { top: 122px; } .prosessi-layer-4 .prosessi-layer-diamond { border: 1.5px solid rgba(255, 255, 255, .22); } @keyframes prosessiLayerCollapse1 { 0% { top: 32px; } 45% { top: 122px; } 52% { top: 122px; } 100% { top: 32px; } } @keyframes prosessiLayerCollapse2 { 0% { top: 62px; } 45% { top: 122px; } 52% { top: 122px; } 100% { top: 62px; } } @keyframes prosessiLayerCollapse3 { 0% { top: 92px; } 45% { top: 122px; } 52% { top: 122px; } 100% { top: 92px; } } .prosessi-layer-hit-line { position: absolute; left: 208px; top: 12px; width: 100px; height: 2px; background: #E0A868; transform-origin: left center; animation: prosessiLayerHitSwing 5s ease-in-out infinite; } @keyframes prosessiLayerHitSwing { 0% { transform: rotate(160deg); } 50% { transform: rotate(122deg); } 100% { transform: rotate(160deg); } } /* 04-vaiheen ikoni: täytetty ympyrä, viisto viiva ja ääriviiva-kupoli */ .prosessi-launch-circle { position: absolute; left: 25px; top: 100px; width: 110px; height: 110px; border-radius: 50%; background: #E0A868; } .prosessi-launch-line { position: absolute; left: 164px; top: 205px; width: 210px; height: 2px; background: #fff; transform-origin: left center; transform: rotate(245deg); animation: prosessiLaunchLineLength 5s ease-in-out infinite; } @keyframes prosessiLaunchLineLength { 0%, 100% { transform: rotate(245deg) scaleX(1); } 50% { transform: rotate(245deg) scaleX(.25); } } .prosessi-launch-ring { position: absolute; left: 75px; top: 15px; width: 16px; height: 16px; border: 2px solid #E0A868; border-radius: 50%; transform: translate(-50%, -50%) scale(.5); opacity: 0; animation: prosessiLaunchRing 5s ease-in-out infinite; } @keyframes prosessiLaunchRing { 0% { left: 75px; top: 15px; transform: translate(-50%, -50%) scale(.5); opacity: 0; } 8% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; } 18% { left: 75px; top: 15px; transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 50% { left: 142px; top: 157px; transform: translate(-50%, -50%) scale(.5); opacity: 0; } 58% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; } 68% { left: 142px; top: 157px; transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 100% { left: 75px; top: 15px; transform: translate(-50%, -50%) scale(.5); opacity: 0; } } .prosessi-launch-dome { position: absolute; left: 95px; top: 124px; width: 62px; height: 31px; border: 2px solid #E0A868; border-radius: 62px 62px 0 0; transform-origin: 50% 0%; animation: prosessiDomeWobble 3.5s ease-in-out infinite; } @keyframes prosessiDomeWobble { 0%, 100% { transform: rotate(-119deg); } 50% { transform: rotate(-111deg); } } .prosessi-vaihe-otsikko { margin: 0 0 1.2rem; opacity: 1; padding: 0; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.01em; } .prosessi-vaihe-teksti { margin: 0; color: #b8b8b8; font-size: 1.25rem; line-height: 1.7; } @media (max-width: 900px) { .prosessi-ring-decor { display: none; } .prosessi-osio { display: block; height: auto; } .prosessi-sticky-vasen { position: static; height: auto; padding: 4rem 6vw; } .prosessi-otsikko { font-size: clamp(1.8rem, 7vw, 2.4rem); } .prosessi-oikea-lista { display: block; } .prosessi-vaihe-spacer { display: none; } .prosessi-vaihe { height: auto; max-width: 100%; padding: 0 6vw 4rem; } } /* ===== Ajattelu-osio (tietoa.html) - vasemmalla iso otsikko, oikealla haitari-lista (vain yksi kohta auki kerrallaan). */ .ajattelu-osio { position: relative; height: 250vh; color: #fff; } .ajattelu-sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 4vw; /* align-items:center keskittää sisällön koko 100vh:n suhteen - matalilla näytöillä (esim. pienempi kannettava) tämä voi työntää ensimmäisen haitari-kohdan (01) kiinteän yläpalkin (.pill-nav, ks. sen top/korkeus) alle. padding-top varaa sille aina vähintään tilaa riippumatta siitä kuinka matala näyttö on. */ padding: clamp(4.5rem, 9vh, 6rem) clamp(2rem, 6vw, 6rem) 0; } .ajattelu-otsikko-alue { align-self: start; padding-top: 15vh; } .ajattelu-otsikko { margin: 0; opacity: 1; padding: 0; color: #fff; font-size: clamp(2.6rem, 5.5vw, 5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; } .ajattelu-lista { border-top: 1px solid #2a2a2a; } .ajattelu-item { border-bottom: 1px solid #2a2a2a; } .ajattelu-header { width: 100%; display: flex; align-items: center; gap: 1.6rem; padding: 1.8rem 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; } .ajattelu-numero { flex-shrink: 0; font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: #E0A868; } .ajattelu-title { flex: 1; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; color: #fff; } .ajattelu-icon { position: relative; flex-shrink: 0; width: 20px; height: 20px; } .ajattelu-icon::before, .ajattelu-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: #fff; transform: translate(-50%, -50%); transition: transform .3s ease, opacity .3s ease; } .ajattelu-icon::before { width: 100%; height: 1.5px; } .ajattelu-icon::after { width: 1.5px; height: 100%; } .ajattelu-item.is-open .ajattelu-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .ajattelu-body { height: 0; overflow: hidden; transition: height .35s ease; } .ajattelu-body p { margin: 0; padding: 0 0 1.8rem; max-width: 60ch; color: #b8b8b8; font-size: 1rem; line-height: 1.7; } /* Matalalla mutta ei-mobiililla näytöllä (esim. pienempi kannettava) oikean sarakkeen haitarilista (6 kohtaa + yhden auki olevan kohdan teksti) on korkeampi kuin koko 100vh:n sticky-alue, jolloin viimeiset kohdat jäävät ruudun ulkopuolelle. Tiivistetään rivien omaa väljyyttä juuri silloin kun korkeutta on niukasti. */ @media (min-width: 901px) and (max-height: 760px) { .ajattelu-header { padding: 1.1rem 0; } .ajattelu-body p { padding: 0 0 1.1rem; } } @media (max-width: 900px) { .ajattelu-osio { height: auto; } .ajattelu-sticky { position: static; height: auto; display: block; padding: 5rem 6vw; } .ajattelu-otsikko-alue { padding-top: 0; } .ajattelu-otsikko { margin-bottom: 3rem; } } /* ===== Lakisivut (tietosuoja.html, evasteet.html) ===== */ .legal-osio { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 22svh 6vw 10svh; color: var(--light); } /* globaali h1/h2-sääntö (ks. styles.css:194) jättää tekstin opacity:0-tilaan kunnes body saa "content-visible"-luokan, jota mikään skripti ei enää aseta - siksi otsikot pitää ylikirjoittaa näkyviksi täällä nimenomaisesti. */ .legal-osio h1 { padding: 0; opacity: 1; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.1; margin: 0 0 .5rem; } .legal-paivitetty { color: var(--muted); font-size: .95rem; margin: 0 0 3.5rem; } .legal-sisalto h2 { padding: 0; opacity: 1; font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 700; margin: 2.4rem 0 .8rem; } .legal-sisalto h2:first-child { margin-top: 0; } .legal-sisalto p { font-size: 1.05rem; line-height: 1.7; color: var(--light); margin: 0 0 1rem; } .legal-sisalto ul { margin: 0 0 1rem; padding-left: 1.3rem; } .legal-sisalto li { font-size: 1.05rem; line-height: 1.7; margin-bottom: .5rem; } .legal-sisalto a { color: var(--light); text-decoration: underline; text-underline-offset: 3px; } .legal-sisalto a:hover { color: var(--muted); } .legal-taulukko { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .95rem; } .legal-taulukko th, .legal-taulukko td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid rgba(240, 235, 219, .15); vertical-align: top; line-height: 1.5; } .legal-taulukko th { color: var(--muted); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; } .legal-taulukko td:first-child { white-space: nowrap; font-family: ui-monospace, 'SF Mono', 'Courier New', Consolas, monospace; font-size: .85rem; } body.light-mode .legal-osio { color: var(--dark); } body.light-mode .legal-sisalto p, body.light-mode .legal-sisalto li, body.light-mode .legal-sisalto a { color: var(--dark); } body.light-mode .legal-taulukko th, body.light-mode .legal-taulukko td { border-bottom-color: rgba(13, 19, 33, .15); } @media (max-width: 600px) { .legal-osio { padding: 16svh 6vw 8svh; } .legal-taulukko { display: block; overflow-x: auto; white-space: nowrap; } }