/* ============================================================================ POHJA: MODERNI (C) — neutraali, monikäyttöinen B2B/toimisto/pienyritys Tyyli: moderni editorial-ammattimainen. Split-hero, keskipyöreä (14px), ilmava, yksi aksenttiväri, hillitty syvyys + liike. ---------------------------------------------------------------------------- TEEMA VAIHDETAAN VAIN TÄSTÄ :root-lohkosta. Kaikki muu perii muuttujat. Vaihda väri-preset alta (poista kommentti) tai säädä arvot. ============================================================================ */ :root { /* ---- VÄRIT (oletus: viileä-neutraali + indigo→violetti-aksentti) ---- Yhtenäinen paletti: viileät, lähes valkoiset pinnat (ei lämmin beige), indigo→violetti-liukuväri napeissa/ikoneissa, syvä indigo-navy tummissa lohkoissa. Taustaa on tarkoituksella vähän väritetty → sisältö erottuu. */ /* ---- NICON VIRALLINEN PALETTI (asiakkaalta 27.8.2026) ---- Dutch white #F2E3BC · Jasmine #FFEB90 · Orange (wheel) #FF8113 Kobicha #6C4928 · Licorice #201810 Aiempi inspiraatiokuvasta poimittu paletti (#DE8439 / #D14431 / #4E2017) on korvattu näillä. Kontrastit mitattu, ei arvattu — ks. taulukko alla. */ --c-bg: #FDF4E4; /* sivun tausta — Dutch whiten vaalein sävy */ --c-surface: #FFFBF2; /* kortit, nav */ --c-surface-2: #F2E3BC; /* Dutch white — vuorotteleva osio-tausta */ --c-text: #6C4928; /* Kobicha — leipäteksti (7,3:1 taustalla) */ --c-heading: #201810; /* Licorice — otsikot (16,0:1 taustalla) */ --c-muted: #7E5C3C; /* haalea teksti (5,5:1 bg / 4,7:1 Dutch white) */ --c-border: #E3D0A8; /* ohuet rajat (Dutch whiten tummennus) */ --c-primary: #FF8113; /* Orange (wheel) — PINTA: osiotaustat, napit, merkit */ --c-primary-2: #E06E00; /* oranssin hover-tummennus */ --c-on-primary: #201810; /* Licorice oranssin päällä (7,0:1) */ --c-dark: #201810; /* Licorice — tummat osiot */ --c-on-dark: #F2E3BC; /* Dutch white tummalla (13,8:1) */ --c-accent2: #FFEB90; /* Jasmine — eyebrow-merkit, korostukset */ --c-primary-ink: #A34E00; /* oranssi TEKSTINÄ vaalealla (5,3:1). Kirkas #FF8113 jää 2,3:1 eli sitä ei saa käyttää tekstiin. */ /* ---- LIUKUVÄRIT + TEKSTUURI (WAU staattisesti) ---- */ /* 3-portainen liukuväri (indigo → sinivioletti → violetti) — yhtenäinen napeissa, ikoneissa, gradient-tekstissä ja glow-efekteissä. */ --grad: linear-gradient(120deg, #FF8113 0%, #FFA94D 52%, #FFEB90 100%); --c-cta: #201810; /* Licorice — vain CTA-napeissa. Nicon paletissa ei ole punaista, joten CTA erottuu tummuudella eikä omalla värillä: valkoinen teksti sen päällä 17,5:1. */ --c-cta-2: #3D2A18; /* hero-mesh: hillitty, jotta tausta pysyy selkeänä (ei sinistä ylenmäärin) */ --grad-mesh: radial-gradient(38% 48% at 88% 6%, color-mix(in srgb, var(--c-accent2) 11%, transparent), transparent 70%), radial-gradient(36% 44% at 6% 16%, color-mix(in srgb, var(--c-primary) 9%, transparent), transparent 72%); /* pehmeä laaja gradient-huokua taustoille (.section--glow) — hyvin hillitty */ --grad-glow: radial-gradient(55% 75% at 100% 0%, color-mix(in srgb, var(--c-accent2) 7%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--c-primary) 6%, transparent), transparent 60%); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* ---- MUODOT ---- */ --r-sm: 10px; --r: 14px; /* perus kortti/painike */ --r-lg: 22px; /* isot lohkot/kuvat */ --r-pill: 999px; /* ---- VARJOT (pehmeät, aksenttisävyiset — ei raskasta mustaa) ---- */ --shadow-sm: 0 1px 2px rgba(18,19,23,.05), 0 2px 8px rgba(18,19,23,.04); --shadow: 0 4px 14px rgba(18,19,23,.07), 0 12px 32px rgba(18,19,23,.06); --shadow-lg: 0 18px 50px color-mix(in srgb, var(--c-primary) 18%, transparent); /* ---- TYPOGRAFIA ---- */ --font-display: 'Outfit', 'Outfit Fallback', system-ui, sans-serif; --font-body: 'Jost', 'Jost Fallback', system-ui, -apple-system, sans-serif; /* ---- MITAT ---- */ --container: 1180px; --pad-x: clamp(18px, 5vw, 40px); --gap: clamp(20px, 3vw, 32px); --section-y: clamp(64px, 9vw, 120px); } /* ===================== VÄRI-PRESETIT ============================ Ota käyttöön kopioimalla arvot :root:iin (tai poista kommentti). TUMMA (sininen-musta): --c-bg:#0E1016; --c-surface:#171A22; --c-surface-2:#11141B; --c-text:#D6D8E0; --c-heading:#FFFFFF; --c-muted:#9AA0B0; --c-border:#262A35; --c-primary:#5B86FF; --c-primary-2:#7EA0FF; --c-on-primary:#0B0D12; --c-dark:#070810; --c-on-dark:#E8EAF2; MUSTA (mono, premium): --c-bg:#0A0A0A; --c-surface:#141414; --c-surface-2:#0F0F0F; --c-text:#D9D9D9; --c-heading:#FFFFFF; --c-muted:#8A8A8A; --c-border:#222; --c-primary:#FFFFFF; --c-primary-2:#D9D9D9; --c-on-primary:#0A0A0A; --c-dark:#000; --c-on-dark:#EDEDED; VÄRIKÄS (energinen): --c-bg:#FFF8F1; --c-surface-2:#FFEFE2; --c-primary:#FF5A1F; --c-primary-2:#E8460F; --c-dark:#1B0F0A; Toimialapaletit: ks. ../../CLAUDE.md (vaihda vain --c-primary/--c-dark/--c-bg). ================================================================== */ /* =========================== RESET / BASE ============================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; overflow-x: clip; /* estää off-canvas-valikon ym. aiheuttaman vaakascrollin (ei riko sticky-navia kuten overflow:hidden) */ background: var(--c-bg); color: var(--c-text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-heading); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); } h2 { font-size: clamp(1.9rem, 4vw, 3rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); } p { margin: 0 0 1rem; max-width: 66ch; } :focus-visible { outline: 2.5px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; } /* skip-link */ .skip-link { position: absolute; left: -9999px; top: 10px; z-index: 200; background: var(--c-dark); color: var(--c-on-dark); padding: 10px 18px; border-radius: var(--r-sm); font-weight: 600; } .skip-link:focus { left: 14px; } /* =========================== LAYOUT ============================ */ .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: var(--section-y); } .section--tint { background: var(--c-surface-2); } .section--dark { background: var(--c-dark); color: var(--c-on-dark); } .section--dark h2, .section--dark h3 { color: #fff; } /* hillitty gradient-huokua tavallisen taustan päälle (ettei loppu jää lattealle) */ .section--glow { background-image: var(--grad-glow); background-color: var(--c-bg); } .section--tint.section--glow { background-image: var(--grad-glow); background-color: var(--c-surface-2); } /* vahvempi hero-tyylinen liukuvärimesh kokonaiselle osiolle (lisää vaihtelua taustoihin) */ .section--mesh { background-color: var(--c-bg); background-image: radial-gradient(42% 56% at 92% 6%, color-mix(in srgb, var(--c-accent2) 13%, transparent), transparent 70%), radial-gradient(40% 52% at 5% 96%, color-mix(in srgb, var(--c-primary) 11%, transparent), transparent 72%); } .eyebrow { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 14px; } .section--dark .eyebrow { color: #fff; opacity: .7; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--c-muted); } /* section head — vasen-tasattu, editorial (ei keskitetty AI-look) */ .sec-head { max-width: 840px; margin-bottom: clamp(34px, 5vw, 56px); } /* leveämpi → otsikot mahtuvat yhdelle riville desktopilla */ .sec-head .lead { max-width: 56ch; } /* leipä silti luettavan kapea */ .sec-head--center { margin-inline: auto; text-align: center; max-width: 900px; } .sec-head--center .lead { max-width: 58ch; margin-inline: auto; } /* =========================== PAINIKKEET ============================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 700; font-size: 1rem; border: 1.5px solid transparent; min-height: 48px; /* kosketuskohde */ line-height: 1; } /* PÄÄPAINIKE — liukuväri + position-shift hoverissa + kerrostetut glow-varjot (sama efekti kuin kotisivut.fi:llä; perii väriteeman --c-primary/--c-accent2) */ .btn-primary { background: var(--grad); background-size: 200% 200%; background-position: 0% 50%; background-origin: border-box; background-repeat: no-repeat; color: #fff; border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 4px 16px -2px color-mix(in srgb, var(--c-primary) 45%, transparent), 0 10px 28px -6px color-mix(in srgb, var(--c-accent2) 42%, transparent); transition: background-position .5s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; } .btn-ghost { background: transparent; color: var(--c-heading); border-color: var(--c-border); transition: transform .18s, box-shadow .25s, border-color .2s, color .2s; } .btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.28); } .btn .arr { transition: transform .2s ease; } @media (hover: hover) { .btn-primary:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 8px 22px -2px color-mix(in srgb, var(--c-primary) 55%, transparent), 0 18px 36px -6px color-mix(in srgb, var(--c-accent2) 50%, transparent); } .btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); } .btn:hover .arr { transform: translateX(4px); } } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--c-primary) 40%, transparent); } /* valkoinen variantti tummalla bannerilla (feature-band) — ei liukuväriä */ .btn-primary.on-light { background: #fff; color: var(--c-dark); box-shadow: 0 6px 20px -6px rgba(0,0,0,.4); } @media (hover: hover) { .btn-primary.on-light:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(0,0,0,.5); } } /* link with underline grow */ .tlink { color: var(--c-primary); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; } .tlink .arr { transition: transform .2s; } @media (hover: hover) { .tlink:hover .arr { transform: translateX(4px); } } /* "Soita"-painike (konversio) */ .btn-call { background: var(--c-surface); color: var(--c-heading); border-color: var(--c-border); } .btn-call svg { color: var(--c-primary); } @media (hover: hover) { .btn-call:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow); } } /* =========================== EFEKTIT (staattinen WAU + 1–2 kevyttä liikettä) ============================ */ .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* otsikon SHINE-AALTO — kirkas kaista pyyhkäisee gradientin yli (kuten kotisivut.fi), nopea */ .hero h1 .grad-text { background: linear-gradient(100deg, var(--c-primary) 0%, var(--c-primary) 38%, #C7B8FF 50%, var(--c-accent2) 62%, var(--c-primary) 100%); background-size: 700px 100%; background-repeat: repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent; /* uudelleen background-lyhenteen jälkeen! */ animation: gradWave 3.2s linear infinite; } /* Silmukan jakso KIINTEÄNÄ PIKSELIARVONA, ei prosenttina: prosenttijakso ei looppaa saumattomasti kun otsikko taittuu kahdelle riville (background-clip: text -laatikko pilkkoutuu riveittäin), jolloin kierroksen vaihtuessa näkyy välähdys. */ @keyframes gradWave { from { background-position: 0 center; } to { background-position: 700px center; } } .glass { background: color-mix(in srgb, var(--c-surface) 60%, transparent); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.75); box-shadow: var(--shadow); } .pill-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: .82rem; letter-spacing: .03em; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 18%, transparent); padding: 7px 16px; border-radius: var(--r-pill); margin-bottom: 22px; } .pill-eyebrow .spark { color: var(--c-accent2); } /* hienovarainen grain-overlay (lisää syvyyttä, ei hidasta) */ .grain::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 140px; opacity: .04; mix-blend-mode: multiply; pointer-events: none; z-index: 1; } /* pari kevyttä jatkuvaa liikettä — VAIN fokuselementeissä */ @keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } } @keyframes floaty2 { 0%,100% { transform: translateY(0) } 50% { transform: translateY(9px) } } @keyframes drift { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(18px,-14px) scale(1.07) } } .floaty { animation: floaty 6s ease-in-out infinite; } .floaty2 { animation: floaty2 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .floaty, .floaty2, .drift { animation: none !important; } } /* =========================== HERO (v2 — premium, liukuväri-mesh + lasi) ============================ */ .hero { position: relative; overflow: hidden; padding-block: clamp(50px, 8vw, 104px) clamp(56px, 8vw, 112px); } .hero-bgfx { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--grad-mesh); } .hero-bgfx::before { /* hitaasti ajelehtiva liukuväriblobi — yksi "cool" liike */ content: ""; position: absolute; width: 44vw; height: 44vw; max-width: 580px; max-height: 580px; right: -10%; top: -16%; border-radius: 50%; background: var(--grad); filter: blur(120px); opacity: .08; animation: drift 18s ease-in-out infinite; } .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(28px, 5vw, 72px); align-items: start; } /* kuva ja tekstipalsta tasataan yläreunasta → alaosan arvostelut eivät paina kuvaa alas. Pieni optinen tasaus h1:n yläreunaan (h1 line-height-poikkeama). */ .hero-visual { margin-top: 6px; } .hero h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); line-height: 1.04; margin-bottom: .32em; } .hero h1 .accent { color: var(--c-primary); } .hero-sub { font-size: clamp(1.1rem, 1.7vw, 1.36rem); color: var(--c-text); max-width: 46ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; } .hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: .95rem; color: var(--c-muted); flex-wrap: wrap; } .hero-trust .stars { color: #F5A623; letter-spacing: 1px; } .hero-trust b { color: var(--c-heading); } .hero-trust .ava img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--c-bg); object-fit: cover; margin-left: -11px; vertical-align: middle; } .hero-trust .ava img:first-child { margin-left: 0; } /* visuaali: kuva pyöreässä paneelissa + liukuväri-glow + kaksi kelluvaa lasichippiä */ .hero-visual { position: relative; } .hero-visual .frame { position: relative; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-lg); } .hero-visual .frame img { width: 100%; aspect-ratio: 5/5.3; object-fit: cover; display: block; } .hero-visual::before { content: ""; position: absolute; inset: -10% -6% -6% -10%; background: var(--grad); filter: blur(64px); opacity: .16; z-index: -1; border-radius: 44px; } .hero-chip { position: absolute; z-index: 3; border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; } .hero-chip b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--c-heading); } .hero-chip span { font-size: .84rem; color: var(--c-muted); } .hero-chip .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; flex: none; } .hero-chip.c1 { left: -28px; top: 36px; } .hero-chip.c2 { right: -22px; bottom: 44px; font-weight: 600; font-size: .96rem; color: var(--c-heading); } .hero-chip.c2 .dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 4px color-mix(in srgb, #2ecc71 22%, transparent); } /* =========================== TRUST / MARQUEE ============================ */ .trust { border-block: 1px solid var(--c-border); background: var(--c-surface); } .trust-in { display: flex; align-items: center; gap: clamp(24px, 5vw, 60px); padding-block: 22px; flex-wrap: wrap; justify-content: space-between; } .trust-in .t { display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-weight: 600; font-size: .95rem; } .trust-in .t svg { color: var(--c-primary); flex: none; } /* =========================== PALVELUT (kortit — 2×2, vaakasuunta) ============================ */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .card { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 28px 30px; transition: transform .22s ease, box-shadow .28s ease, border-color .2s ease; position: relative; } .card h3 { margin: 2px 0 7px; font-size: 1.22rem; } .card p { color: var(--c-muted); margin: 0 0 14px; font-size: .98rem; } .card .ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--grad); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--c-primary) 28%, transparent); } .card .num { display: none; } /* turhat 01/02-numerot pois */ @media (hover: hover) { .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border)); } } @media (max-width: 720px) { .cards { grid-template-columns: 1fr; } } /* =========================== PALVELUT-SIVU (pinotut, ankkuroidut) ============================ */ .svc-stack { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 100px); } .svc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 66px); align-items: center; scroll-margin-top: 96px; } .svc-detail:nth-child(even) .svc-d-media { order: 2; } .svc-d-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); } .svc-d-body h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin: 6px 0 14px; } .svc-d-list { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 12px; } .svc-d-list li { display: flex; gap: 11px; font-weight: 500; } .svc-d-list li svg { color: var(--c-primary); flex: none; margin-top: 3px; } @media (max-width: 860px) { .svc-detail { grid-template-columns: 1fr; } .svc-detail .svc-d-media { order: -1 !important; max-width: 520px; } } /* =========================== MEISTÄ + LUVUT ============================ */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; } .about-media { position: relative; } .about-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } /* leijuva arvostelu-chip kuvan päällä (sama henki kuin hero-chipit) */ .about-media .float-chip { position: absolute; right: -14px; bottom: 26px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 16px; font-weight: 700; font-size: .96rem; color: var(--c-heading); } .about-media .float-chip .stars { color: #F5A623; letter-spacing: 1px; } @media (max-width: 640px) { .about-media .float-chip { right: 8px; bottom: 12px; padding: 10px 14px; font-size: .86rem; } } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; } .stat b { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); color: var(--c-primary); display: block; line-height: 1; } .stat span { font-size: .9rem; color: var(--c-muted); } /* =========================== PROSESSI (numeroidut askeleet) ============================ */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--gap); counter-reset: step; } .step { position: relative; padding-top: 26px; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--c-primary); position: absolute; top: 0; left: 0; } .step::after { content: ""; position: absolute; top: 8px; left: 38px; right: -10px; height: 2px; background: var(--c-border); } .step:last-child::after { display: none; } .step h3 { font-size: 1.18rem; margin: 6px 0 8px; } .step p { color: var(--c-muted); font-size: .96rem; } /* tiiviimpi pystyrytmi osioille joissa vähän sisältöä (esim. prosessi, FAQ) → ei isoa tyhjää */ .section--snug { padding-block: clamp(52px, 7vw, 88px); } .sec-head--snug { margin-bottom: clamp(26px, 3.5vw, 38px); } /* pystyrytmin tiukennus-apuluokat — määritelty .section--snug:n JÄLKEEN → voittaa padding-bottom/-top */ .pt-tight { padding-top: clamp(28px, 4vw, 52px); } .pb-tight { padding-bottom: clamp(24px, 3.5vw, 44px); } /* =========================== TÖITÄ (neliögrid 4×2 + tekstit, staattinen) ============================ */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .gallery .g { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; display: block; box-shadow: var(--shadow-sm); aspect-ratio: 1 / 1; } .gallery .g img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery .g figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; color: #fff; background: linear-gradient(transparent, rgba(12,13,24,.85)); } .gallery .g figcaption b { display: block; font-weight: 700; font-size: .95rem; } .gallery .g figcaption span { font-size: .82rem; opacity: .85; } /* =========================== REFERENSSIT (4 korttia, väljä väli, sivun tyyliin) ============================ */ .quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 28px); } .quote { margin: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 30px 28px; position: relative; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .quote .mark { font-family: var(--font-display); font-size: 3.4rem; line-height: .7; color: var(--c-primary); opacity: .2; height: 26px; } .quote p { font-size: 1rem; line-height: 1.55; color: var(--c-heading); margin: 6px 0 0; } .quote .who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; } .quote .who .av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; } .quote .who b { display: block; font-size: .94rem; } .quote .who span { font-size: .82rem; color: var(--c-muted); } @media (max-width: 980px) { .quotes { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .quotes { grid-template-columns: 1fr; } } /* =========================== HINNASTO (yksi joustava paneeli) ============================ */ .price-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(30px, 4vw, 54px); box-shadow: var(--shadow); } .price-panel::before { content: ""; position: absolute; inset: 0; background: var(--grad-mesh); opacity: .55; pointer-events: none; } .price-panel > * { position: relative; z-index: 2; } .pp-label { font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary); } .pp-price { font-family: var(--font-display); font-size: clamp(3.2rem, 6vw, 4.6rem); line-height: 1; color: var(--c-heading); margin: 8px 0 14px; } .pp-sub { color: var(--c-muted); max-width: 40ch; margin-bottom: 26px; } .pp-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 22px; } .pp-list li { display: flex; gap: 11px; font-weight: 500; font-size: 1rem; } .pp-list li svg { color: var(--c-primary); flex: none; margin-top: 2px; } /* =========================== VÄLI-HERO / FEATURE-BAND ============================ */ .feature-band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(40px, 6vw, 76px); color: #fff; background: var(--c-dark); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; } .feature-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 130% at 12% 0%, color-mix(in srgb, var(--c-accent2) 60%, transparent), transparent 60%), radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--c-primary) 55%, transparent), transparent 60%); opacity: .9; } .feature-band > * { position: relative; z-index: 2; } .feature-band h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 3rem); } .feature-band p { color: rgba(255,255,255,.85); } .fb-stats { display: flex; gap: 30px; flex-wrap: wrap; } .fb-stats .s b { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); display: block; line-height: 1; } .fb-stats .s span { font-size: .9rem; color: rgba(255,255,255,.75); } /* =========================== FAQ ============================ */ .faq { max-width: 820px; margin-inline: auto; } .faq details { border-bottom: 1px solid var(--c-border); padding: 6px 0; } .faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--c-heading); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font-size: 1.6rem; color: var(--c-primary); transition: rotate .25s ease; line-height: 1; } .faq details[open] summary::after { rotate: 45deg; } .faq .a { padding: 0 44px 22px 0; color: var(--c-muted); } .faq .a p { margin: 0; } /* =========================== CTA-strippi (vaalea premium-paneeli, ei tumma) ============================ */ .cta-band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(40px, 6vw, 76px); text-align: center; background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow); } .cta-band::before { content: ""; position: absolute; inset: 0; background: var(--grad-mesh); opacity: .8; pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { color: var(--c-heading); } .cta-band h2 .grad-text { display: inline; } .cta-band p { color: var(--c-muted); margin-inline: auto; } .cta-band .hero-cta { justify-content: center; } /* =========================== YHTEYS + LOMAKE ============================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 64px); } .contact-info .row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-border); } .contact-info .row svg { color: var(--c-primary); flex: none; margin-top: 3px; } .contact-info .row b { display: block; } .contact-info .row span { color: var(--c-muted); } .contact-info .map { margin-top: 22px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--c-border); } .contact-info .map iframe { width: 100%; height: 220px; border: 0; display: block; } .form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow-sm); } .field { margin-bottom: 18px; } .field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 7px; } .field input, .field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-text); font: inherit; font-size: 16px; /* estää iOS-zoomin */ transition: border-color .18s, box-shadow .18s; } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 16%, transparent); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: .85rem; color: var(--c-muted); margin-top: 4px; } .form-msg { margin-top: 14px; font-weight: 600; display: none; } .form-msg.ok { display: block; color: #1f9d55; } .form-msg.err { display: block; color: #d64545; } /* =========================== ANIMAATIOT (reveal) ============================ */ /* Scroll-reveal poistettu — häiritsi lukemista. Sisältö näkyy staattisesti. WAU tulee jatkuvista hero-animaatioista (ajelehtiva blobi + lasichipit + otsikon gradient-aalto). */ .reveal, html.js .reveal { opacity: 1 !important; transform: none !important; } /* =========================== RESPONSIIVISUUS ============================ */ @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; max-width: 440px; margin-inline: auto; width: 100%; } .hero-visual .frame img { aspect-ratio: 16/12; } .hero-chip.c1 { left: 10px; } .hero-chip.c2 { right: 10px; } .about-grid, .contact-grid { grid-template-columns: 1fr; } .price-panel, .feature-band { grid-template-columns: 1fr; } .gallery { grid-template-columns: 1fr 1fr; } .step::after { display: none; } } @media (max-width: 640px) { body { font-size: 1rem; } .stats { grid-template-columns: 1fr 1fr; gap: 22px 14px; } .gallery { gap: 12px; } .pp-list { grid-template-columns: 1fr; } .btn { width: 100%; justify-content: center; } .hero-cta .btn, .cta-band .btn { width: auto; } .hero-chip { display: none; } /* pidä mobiili siistinä */ } /* liike-herkkyys */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.js .reveal, .reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================================ SHOWBAARIMESTARI NICO VÄLIMÄKI — oma ilme demo1:n rungon päälle. Lähde: Valtterin inspiraatiokuvat (_inspiraatio/). · Värisävyt = ASIAKKAAN VIRALLINEN PALETTI (27.8.2026): oranssi #FF8113, keltainen #FFEB90, kerma #F2E3BC, ruskea #6C4928, musta #201810. CTA = #201810 (paletissa ei ole punaista). · Tyyli = WhatsApp-referenssi: litteät värilohkot, sahalaitareunat, ohut viivajako, versaaliotsikot, reunaviivanapit Tavoite: pohja antaa rakenteen, tämä lohko antaa ilmeen — sivu ei saa näyttää demo1:ltä. ============================================================================ */ /* ---------- TYPOGRAFIA: versaalit otsikot, tiukka väli ---------- */ h1, h2, h3, h4 { font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; } h1 { letter-spacing: -.035em; line-height: .95; } h2 { line-height: 1.02; } .eyebrow { font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: .22em; color: var(--c-heading); background: var(--c-accent2); padding: 8px 15px; border-radius: 2px; } .lead { color: var(--c-muted); } /* ---------- NAPIT: reunaviiva + versaali, ei pilleriä ---------- */ .btn { border-radius: 2px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .11em; font-size: .78rem; padding: 16px 26px; } .btn-primary { background: var(--c-cta); color: #fff; box-shadow: none; border: 2px solid var(--c-cta); } .btn-primary:hover { background: var(--c-cta-2); border-color: var(--c-cta-2); } .btn-call, .btn-ghost { background: transparent; border: 2px solid var(--c-heading); color: var(--c-heading); } .btn-call svg { color: var(--c-heading); } @media (hover: hover) { .btn-call:hover, .btn-ghost:hover { background: var(--c-heading); color: var(--c-bg); border-color: var(--c-heading); } .btn-call:hover svg { color: var(--c-bg); } } /* ---------- SAHALAITA osioiden väliin ---------- Sahalaita on SEURAAVAN osion väriä: piikit työntyvät alemmasta osiosta ylös. Väri tulee maskin kautta samoista muuttujista kuin osiotaustat, joten se ei voi enää erota niistä. (Aiemmin värit olivat kovakoodattuja hexejä: #DE8439 vs. --c-primary #FF8113 ja #F1DEBC vs. --c-surface-2 #F2E3BC — Nico huomasi eron 8.9.2026: "niissä värit on erillaiset ja ne vähän pistää silmään".) */ .saw { position: relative; } .saw::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; background-color: var(--saw-color, var(--c-bg)); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath d='M0 16 L16 0 L32 16 Z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath d='M0 16 L16 0 L32 16 Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 32px 16px; mask-size: 32px 16px; z-index: 4; pointer-events: none; } .saw--bg { --saw-color: var(--c-bg); } .saw--tint { --saw-color: var(--c-surface-2); } .saw--orange { --saw-color: var(--c-primary); } .saw--dark { --saw-color: var(--c-dark); } /* ---------- HENKILÖKUVIEN RAJAUS ---------- Nico 8.9.2026: "kaikki kuvat missä on mun naama niin saako skaalattua niin että ei mene otsan kohdalta poikki". Laatikon kuvasuhde = kuvatiedoston oma suhde siellä missä se on mahdollista; taustakuvissa rajaus siirretty ylemmäs. */ .about-media img { aspect-ratio: 900 / 760; } /* tarina-studio.webp 900x760 */ /* ---------- BANNERI: koko levyinen kuva, otsikko alalaidassa ---------- */ .banner { position: relative; overflow: hidden; background: var(--c-heading); } .banner__media { position: absolute; inset: 0; } .banner__media img, .banner__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; } /* ≤860 px nav on opaakki (shared.js) ja peittäisi kuvan yläreunan → media alkaa navin alta ja hahmo ankkuroidaan ylös, jotta pää näkyy kokonaan (Nicon palaute 16.9.2026). */ @media (max-width: 860px) { .banner__media { top: 92px; } .banner__media img, .banner__media video { object-position: 50% 0; } } /* 861–1100 px: vaakakuva rajautuu keskeltä ja kasvot leikkautuisivat oikeasta reunasta → ankkuroidaan oikeaan reunaan. */ @media (min-width: 861px) and (max-width: 1100px) { .banner__media img, .banner__media video { object-position: 100% 25%; } } /* neutraali tumma peitto — ei brändinvärinen, jottei valokuva värjäänny */ .banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,10,4,.72) 0%, rgba(20,10,4,.52) 42%, rgba(20,10,4,.10) 74%, rgba(20,10,4,0) 100%), linear-gradient(180deg, rgba(20,10,4,.30) 0%, rgba(20,10,4,.06) 30%, rgba(20,10,4,.58) 72%, rgba(20,10,4,.86) 100%); } .banner__in { position: relative; z-index: 2; min-height: clamp(520px, 78vh, 760px); display: flex; flex-direction: column; justify-content: flex-end; padding-block: clamp(120px, 14vw, 150px) clamp(56px, 8vw, 88px); } .banner__upper { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .26em; font-size: clamp(.8rem, 2vw, 1.05rem); color: var(--c-accent2); margin: 0 0 10px; } .banner h1 { color: #fff; font-size: clamp(2.6rem, 8vw, 5.4rem); margin: 0; max-width: 11ch; } /* SHINE — kulta pyyhkäisee valkoisten kirjainten yli (demo1:n gradWave-asetukset) */ .banner h1 .grad-text { background: linear-gradient(100deg, #FFF6E6 0%, #FFF6E6 34%, var(--c-accent2) 44%, #FFFFFF 50%, var(--c-accent2) 56%, #FFF6E6 66%, #FFF6E6 100%); background-size: 700px 100%; background-repeat: repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradWave 3.2s linear infinite; } .banner__sub { margin: 20px 0 0; max-width: 46ch; color: #F4E7D6; font-size: clamp(1rem, 1.7vw, 1.14rem); } .banner .hero-cta { margin-top: 30px; } .banner .btn-call, .banner .btn-ghost { color: #fff; border-color: rgba(255,255,255,.75); } .banner .btn-call svg { color: #fff; } @media (hover: hover) { .banner .btn-call:hover { background: #fff; color: var(--c-heading); border-color: #fff; } .banner .btn-call:hover svg { color: var(--c-heading); } } /* ---------- TARINA: kehystetty kuva + versaaliotsikko (referenssin malli) ---------- */ .about-grid { align-items: center; } .about-media { border: 2px solid var(--c-border); padding: 12px; background: var(--c-surface-2); border-radius: 3px; } .about-media img { border-radius: 2px; } .about-copy h2 em { font-style: normal; color: var(--c-primary-2); } /* ---------- PALVELUT: litteä oranssi lohko + ohut viivajako ---------- */ .palvelut-lohko { background: var(--c-primary); } .palvelut-lohko .eyebrow { background: var(--c-heading); color: var(--c-accent2); } .palvelut-lohko h2, .palvelut-lohko .lead { color: var(--c-heading); } .palvelut-lohko .lead { opacity: .82; } .deco { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 20px); } .deco::before, .deco::after { content: "✦"; font-size: .48em; opacity: .75; } .ruudukko { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--c-heading); border: 2px solid var(--c-heading); } .ruutu { background: var(--c-primary); display: flex; flex-direction: column; color: var(--c-heading); text-align: center; } /* Kuvasuhde = kuvatiedostojen oma suhde (900x600), jotta cover ei rajaa mitään pois. 16/10 leikkasi ylä- ja alareunasta, ja Nicon pää jäi otsan kohdalta poikki (8.9.2026). */ .ruutu .pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 2px solid var(--c-heading); } .ruutu .pic img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease; } .ruutu .sisalto { padding: 22px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; } .ruutu svg { color: var(--c-heading); } .ruutu h3 { margin: 0; font-size: 1.05rem; line-height: 1.15; } .ruutu p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--c-heading); opacity: .84; max-width: 30ch; } .ruutu .hinta { margin-top: auto; padding-top: 13px; width: 100%; border-top: 1.5px dashed rgba(32,24,16,.4); font-family: var(--font-display); font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; } @media (hover: hover) { .ruutu:hover .pic img { scale: 1.06; } } @media (min-width: 620px) { .ruudukko { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .ruudukko { grid-template-columns: repeat(4, 1fr); } } /* ---------- LEIMAMERKKI ---------- */ .stamp { position: absolute; z-index: 5; top: -16px; right: -12px; width: clamp(92px, 12vw, 116px); aspect-ratio: 1; border-radius: 50%; background: var(--c-cta); color: var(--c-accent2); display: grid; place-content: center; text-align: center; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: .58rem; letter-spacing: .12em; line-height: 1.45; border: 2px dashed var(--c-accent2); rotate: -11deg; } .stamp b { display: block; font-size: 1.75rem; letter-spacing: 0; color: #fff; } /* ---------- GALLERIA ilman kuvatekstejä ---------- */ .gallery figure.g--plain figcaption { display: none; } /* ---------- PALAUTEKORTIT: kerma + reunaviiva, ei varjopilviä ---------- */ .quote { background: var(--c-surface); border: 2px solid var(--c-border); border-radius: 3px; box-shadow: none; } .quote .mark { color: var(--c-primary); opacity: 1; } .quote .who b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; } /* ---------- demo1:n leijuvat lasielementit pois ---------- */ .hero-chip, .float-chip { display: none !important; } /* ============================================================================ MUOKKAUSKIERROS 2 — Valtterin palaute ============================================================================ */ /* ---- Luottorivi oranssin lohkon ylälaidassa (korvaa valkoisen trust-palkin) ---- */ .luottorivi { list-style: none; margin: 0 0 clamp(34px, 5vw, 54px); padding: 0 0 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; border-bottom: 2px dashed rgba(32,24,16,.32); } .luottorivi li { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--c-heading); } .luottorivi li::before { content: "✦"; color: var(--c-heading); opacity: .6; font-size: .8em; } /* ---- Palvelut 2 × 2 (ei neljää tiiviisti rinnakkain) ---- */ @media (min-width: 1000px) { .ruudukko { grid-template-columns: repeat(2, 1fr); } } /* 🛑 Tässä oli aspect-ratio: 21/10, joka kumosi rivin 582 korjauksen (3/2) koko leveydeltä — sääntö on media queryn ULKOPUOLELLA ja tulee myöhemmin, joten se voitti. 21/10 = 2,1 leikkasi 900x600-kuvista ylä- ja alareunan, ja Nicon pää jäi poikki. Kuvasuhde on nyt yhdessä paikassa (rivi 582). (8.9.2026) */ .ruutu .sisalto { padding: 26px 30px 30px; } .ruutu h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); } .ruutu p { font-size: .96rem; max-width: 42ch; } /* ---- Näin se etenee: kuvalliset askeleet ---- */ .askeleet { display: grid; gap: clamp(20px, 3vw, 30px); grid-template-columns: 1fr; } @media (min-width: 620px) { .askeleet { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .askeleet { grid-template-columns: repeat(4, 1fr); } } .askel__kuva { position: relative; display: block; border: 2px solid var(--c-heading); border-radius: 3px; overflow: hidden; margin-bottom: 16px; } .askel__kuva img { aspect-ratio: 4 / 3; width: 100%; height: 100%; object-fit: cover; } .askel__kuva b { position: absolute; left: -2px; bottom: -2px; z-index: 2; background: var(--c-accent2); color: var(--c-heading); border: 2px solid var(--c-heading); font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; width: 52px; height: 52px; display: grid; place-content: center; } .askel h3 { font-size: 1.1rem; margin: 0 0 8px; } .askel p { color: var(--c-muted); font-size: .95rem; margin: 0; } /* ---- Tilaisuudet: kuvakaista + lista (korvaa pohjan feature-bandin) ---- */ .tilaisuudet { position: relative; overflow: hidden; background: var(--c-heading); } .tilaisuudet__media { position: absolute; inset: 0; } .tilaisuudet__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } .tilaisuudet::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(24,11,5,.90) 0%, rgba(24,11,5,.78) 46%, rgba(24,11,5,.34) 78%, rgba(24,11,5,.20) 100%); } .tilaisuudet__in { position: relative; z-index: 2; padding-block: clamp(64px, 9vw, 110px); } .tilaisuudet__in .eyebrow { background: var(--c-accent2); color: var(--c-heading); } .tilaisuudet__in h2 { color: #fff; max-width: 16ch; } .tilaisuuslista { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px 30px; grid-template-columns: 1fr; max-width: 640px; } @media (min-width: 620px) { .tilaisuuslista { grid-template-columns: repeat(2, 1fr); } } .tilaisuuslista li { display: flex; align-items: center; gap: 11px; color: #F4E7D6; font-size: 1.02rem; } .tilaisuuslista li::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--c-accent2); rotate: 45deg; } /* ---- Asiakaspalaute: kuvatausta + tumma peitto (sama käsittely kuin kuvakaistoissa) ---- */ .palaute-lohko { position: relative; overflow: hidden; background: var(--c-heading); } .palaute-lohko::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(24,11,5,.86) 0%, rgba(24,11,5,.76) 40%, rgba(24,11,5,.88) 100%); } .palaute-lohko__in { position: relative; z-index: 2; padding-block: var(--section-y); } .palaute-lohko .eyebrow { background: var(--c-accent2); color: var(--c-heading); } .palaute-lohko h2 { color: #fff; } .palautteet { display: grid; gap: clamp(18px, 2.5vw, 26px); grid-template-columns: 1fr; } @media (min-width: 860px) { .palautteet { grid-template-columns: repeat(3, 1fr); } } .palaute { position: relative; margin: 0; background: var(--c-surface); border: 2px solid var(--c-heading); border-radius: 3px; padding: 40px 26px 24px; display: flex; flex-direction: column; gap: 16px; } .palaute::before { content: "“"; position: absolute; top: -22px; left: 20px; font-family: var(--font-display); font-weight: 800; font-size: 4.4rem; line-height: 1; color: var(--c-accent2); -webkit-text-stroke: 2px var(--c-heading); } .palaute p { margin: 0; font-size: .98rem; color: var(--c-text); } .palaute footer { margin-top: auto; padding-top: 14px; border-top: 2px dashed var(--c-border); } .palaute footer b { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .88rem; color: var(--c-heading); } .palaute footer span { font-size: .84rem; color: var(--c-muted); } /* ---- Varaus: leveä, moderni lomake (pehmeät muodot, kevyet kentät) ---- */ .varaus { background: var(--c-surface-2); background-image: var(--grad-glow); } .varauslomake { background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: 20px; padding: clamp(24px, 3.5vw, 44px); box-shadow: 0 2px 4px rgba(32,24,16,.04), 0 18px 44px -22px rgba(32,24,16,.30); } .kentat { display: grid; gap: 20px 20px; grid-template-columns: 1fr; } @media (min-width: 620px) { .kentat { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px) { .kentat { grid-template-columns: repeat(3, 1fr); } } .field--laaja { grid-column: 1 / -1; } .varauslomake label { display: block; margin-bottom: 8px; font-family: var(--font-body); font-weight: 600; font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--c-heading); } .varauslomake label i { font-style: normal; color: var(--c-cta); } .varauslomake input, .varauslomake select, .varauslomake textarea { width: 100%; font-family: var(--font-body); font-size: 16px; /* iOS: ei zoomia */ padding: 14px 16px; border-radius: 12px; border: 1.5px solid transparent; background: var(--c-bg); color: var(--c-text); transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; appearance: none; -webkit-appearance: none; } .varauslomake input::placeholder, .varauslomake textarea::placeholder { color: color-mix(in srgb, var(--c-muted) 62%, transparent); } .varauslomake input:hover, .varauslomake select:hover, .varauslomake textarea:hover { background: color-mix(in srgb, var(--c-primary) 6%, var(--c-bg)); } .varauslomake input:focus, .varauslomake select:focus, .varauslomake textarea:focus { outline: none; background: var(--c-surface); border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 22%, transparent); } .varauslomake textarea { min-height: 130px; resize: vertical; line-height: 1.6; } /* oma nuoli valikkoon (natiivi nuoli piilotettu appearance:none:lla) */ .valitsin { position: relative; display: block; } .valitsin::after { content: ""; position: absolute; right: 17px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--c-heading); border-bottom: 2px solid var(--c-heading); transform: translateY(-70%) rotate(45deg); pointer-events: none; opacity: .55; } .valitsin select { padding-right: 42px; cursor: pointer; } /* päivämääräkenttä samaan linjaan muiden kanssa */ .varauslomake input[type="date"] { min-height: 51px; } .varauslomake input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; } .laheta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px; padding-top: 24px; border-top: 1.5px solid var(--c-border); } .laheta .btn { border-radius: 12px; padding: 17px 30px; } .laheta .form-note { margin: 0; font-size: .9rem; color: var(--c-muted); max-width: 40ch; } .form-msg { margin: 16px 0 0; font-weight: 600; } .form-msg.ok { color: #2E7D32; } .form-msg.err { color: var(--c-cta); } .yhteystiedot { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 38px; margin-top: 32px; } .yhteystiedot a, .yhteystiedot span { display: inline-flex; align-items: center; gap: 10px; color: var(--c-heading); font-weight: 600; } .yhteystiedot svg { color: var(--c-primary-2); } @media (hover: hover) { .yhteystiedot a:hover { color: var(--c-primary-2); } } /* napit hieman pehmeämmiksi koko sivulla — poster-tyyli säilyy, kulmikkuus katoaa */ .btn { border-radius: 8px; } /* ---- Luottorivi ylemmäs: oranssi lohko alkaa tiiviimmin bannerin alta ---- */ .palvelut-lohko { padding-top: clamp(26px, 3.5vw, 42px); } .luottorivi { margin-bottom: clamp(30px, 4vw, 46px); } /* ---- Palveluruudun CTA: kertoo että ruutu on klikattava ---- */ .ruutu__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: var(--c-heading); color: var(--c-accent2); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; padding: 12px 20px; border-radius: 8px; transition: background-color .18s ease, color .18s ease, transform .18s ease; } .ruutu__cta .arr { transition: transform .22s ease; } @media (hover: hover) { .ruutu:hover .ruutu__cta { background: var(--c-cta); color: #fff; } .ruutu:hover .ruutu__cta .arr { transform: translateX(4px); } .ruutu:focus-within .ruutu__cta { background: var(--c-cta); color: #fff; } } /* ---- Toinen kuvakaista: keskitetty lupaus (sama tyyli, eri sommittelu) ---- */ .kaista--keski::before { background: linear-gradient(180deg, rgba(24,11,5,.62) 0%, rgba(24,11,5,.50) 45%, rgba(24,11,5,.80) 100%); } .kaista--keski .tilaisuudet__in { text-align: center; padding-block: clamp(58px, 8vw, 96px); } .kaista--keski h2 { color: #fff; max-width: none; margin-inline: auto; } .kaista--keski .kaista__teksti { color: #F4E7D6; margin: 18px auto 0; max-width: 54ch; font-size: 1.05rem; } .kaista--keski .hero-cta { justify-content: center; margin-top: 28px; } .kaista--keski .tilaisuudet__media img { object-position: 50% 38%; } /* ---- Hinnasto: selkeä rivilista, ei sekavia check-listoja ---- */ .hinnasto { background: var(--c-surface-2); } .hintataulu { background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: 20px; overflow: hidden; box-shadow: 0 2px 4px rgba(32,24,16,.04), 0 18px 44px -24px rgba(32,24,16,.28); } .hintarivi { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 34px); } .hintarivi + .hintarivi { border-top: 1.5px dashed var(--c-border); } .hintarivi__nimi h3 { margin: 0 0 4px; font-size: clamp(1.02rem, 1.7vw, 1.2rem); } .hintarivi__nimi p { margin: 0; color: var(--c-muted); font-size: .93rem; max-width: 44ch; } .hintarivi__hinta { text-align: right; flex: none; } .hintarivi__hinta b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.85rem); color: var(--c-primary-2); letter-spacing: -.02em; white-space: nowrap; } .hintarivi__hinta span { font-size: .82rem; color: var(--c-muted); white-space: nowrap; } @media (max-width: 520px) { .hintarivi { flex-direction: column; align-items: flex-start; gap: 10px; } .hintarivi__hinta { text-align: left; } } .sisaltyy { margin-top: clamp(22px, 3vw, 32px); background: var(--c-bg); border: 1.5px solid var(--c-border); border-radius: 20px; padding: clamp(22px, 3vw, 32px); } .sisaltyy h3 { margin: 0 0 16px; font-size: 1rem; letter-spacing: .06em; } .sisaltyy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 28px; grid-template-columns: 1fr; } @media (min-width: 720px) { .sisaltyy ul { grid-template-columns: repeat(2, 1fr); } } .sisaltyy li { display: flex; align-items: flex-start; gap: 11px; font-size: .97rem; } .sisaltyy li::before { content: ""; flex: none; margin-top: 8px; width: 9px; height: 9px; background: var(--c-primary); rotate: 45deg; } .sisaltyy__huom { margin: 18px 0 0; padding-top: 16px; border-top: 1.5px dashed var(--c-border); font-size: .9rem; color: var(--c-muted); } .hinnasto__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(26px, 3.5vw, 36px); } /* ============================================================================ MUOKKAUSKIERROS 3 — vintage-otsikkofontti, pyöreämmät napit, kirkkaampi shine ============================================================================ */ :root { /* Alfa Slab One = lämmin vintage-slab, sopii baariin. Outfit jää pieniin otsikoihin ja käyttöliittymään, Jost leipätekstiin. */ --font-vintage: 'Alfa Slab One', 'Alfa Slab Fallback', Georgia, serif; } /* isot otsikot vintage-slabilla — EI versaalina, se tekisi niistä raskaat */ h1, h2, .hintarivi__hinta b, .stat b, .fb-stats .s b { font-family: var(--font-vintage); font-weight: 400; text-transform: none; letter-spacing: -.005em; } h1 { line-height: 1.02; } h2 { line-height: 1.1; } /* pienet otsikot ja käyttöliittymä pysyvät Outfitissa */ h3, h4 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; } .palaute footer b, .ruutu .hinta, .askel__kuva b { font-family: var(--font-display); } .askel__kuva b { font-family: var(--font-vintage); font-weight: 400; } /* ---- SHINE: kirkkaampi ja nopeampi ---- */ .banner h1 .grad-text { background: linear-gradient(100deg, #FFF3DE 0%, #FFF3DE 30%, var(--c-accent2) 40%, #FFFFFF 47%, #FFFFFF 53%, var(--c-accent2) 60%, #FFF3DE 70%, #FFF3DE 100%); background-size: 700px 100%; background-repeat: repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradWave 2.2s linear infinite; filter: drop-shadow(0 0 18px rgba(255,214,120,.35)); } /* ---- NAPIT: pyöreät ja modernit, ei pohjan hehkuvaa hoveria ---- */ .btn { border-radius: 999px; padding: 16px 30px; border-width: 2px; box-shadow: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; } .btn-primary { background: var(--c-cta); color: #fff; border-color: var(--c-cta); } .btn-call, .btn-ghost { background: transparent; border-color: var(--c-heading); color: var(--c-heading); } @media (hover: hover) { /* pohjan sisävalo + kaksoishehku pois — se näytti väärältä punaisella napilla */ .btn-primary:hover { background: var(--c-cta-2); border-color: var(--c-cta-2); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-cta) 75%, transparent); background-position: 0 0; } .btn-call:hover, .btn-ghost:hover { background: var(--c-heading); color: var(--c-bg); border-color: var(--c-heading); transform: translateY(-2px); box-shadow: none; } .btn-call:hover svg { color: var(--c-bg); } .banner .btn-call:hover { background: #fff; color: var(--c-heading); border-color: #fff; } } .btn-primary:active, .btn-call:active, .btn-ghost:active { transform: translateY(0); box-shadow: none; } /* lomakkeen ja palveluruudun napit samaan pyöreään linjaan */ .laheta .btn { border-radius: 999px; } .ruutu__cta { border-radius: 999px; } .nav-cta { border-radius: 999px !important; } .eyebrow { border-radius: 999px; } /* ---- Hinnasto oranssina: värivaihtelua sivun alaosaan ---- */ .hinnasto--oranssi { background: var(--c-primary); } .hinnasto--oranssi .eyebrow { background: var(--c-heading); color: var(--c-accent2); } .hinnasto--oranssi h2 { color: var(--c-heading); } .hinnasto--oranssi .lead { color: var(--c-heading); opacity: .84; } /* valkoinen hintakortti oranssin päällä → hinnat erottuvat kunnolla */ .hinnasto--oranssi .hintataulu { border-color: var(--c-heading); border-width: 2px; box-shadow: 0 18px 44px -20px rgba(32,24,16,.45); } .hinnasto--oranssi .sisaltyy { background: color-mix(in srgb, #fff 22%, transparent); border-color: rgba(32,24,16,.35); } .hinnasto--oranssi .sisaltyy h3, .hinnasto--oranssi .sisaltyy li { color: var(--c-heading); } .hinnasto--oranssi .sisaltyy li::before { background: var(--c-heading); } .hinnasto--oranssi .sisaltyy__huom { color: var(--c-heading); opacity: .8; border-top-color: rgba(32,24,16,.32); } .hinnasto--oranssi .btn-call { border-color: var(--c-heading); color: var(--c-heading); background: transparent; } /* ---- Varauslomake kapeammaksi ja keskitetyksi (oli liian iso koko leveydellä) ---- */ .varauslomake { max-width: 720px; margin-inline: auto; padding: clamp(22px, 3vw, 34px); border-radius: 18px; } .kentat { gap: 14px 14px; grid-template-columns: 1fr; } @media (min-width: 560px) { .kentat { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px) { .kentat { grid-template-columns: repeat(2, 1fr); } } .varauslomake label { margin-bottom: 6px; font-size: .85rem; } .varauslomake input, .varauslomake select, .varauslomake textarea { padding: 11px 13px; border-radius: 10px; } .varauslomake input[type="date"] { min-height: 45px; } .varauslomake textarea { min-height: 96px; } .valitsin::after { right: 14px; width: 8px; height: 8px; } .valitsin select { padding-right: 36px; } .laheta { margin-top: 20px; padding-top: 18px; gap: 14px; justify-content: center; text-align: center; } .laheta .btn { padding: 14px 28px; } .laheta .form-note { font-size: .86rem; max-width: 38ch; } .varaus .sec-head { margin-bottom: clamp(24px, 3vw, 34px); } /* ---- Banneri korkeammaksi ---- */ .banner__in { min-height: clamp(600px, 88vh, 900px); } /* ---- SHINE tummemmaksi: kultaiset kirjaimet, kirkas valkoinen pyyhkäisy ---- Aiempi versio oli kermanvalkoinen päästä päähän, jolloin kontrastia ei syntynyt otsikon sisälle. Nyt perusväri on oranssi ja vain pyyhkäisy on valkoinen → ero näkyy. (Luvut koskevat POISTETTUA tummaa banneriversiota ja sen vanhaa palettia — käytössä on vaalea banneri, ks. lohko alempana.) */ .banner h1 .grad-text { background: linear-gradient(100deg, var(--c-primary) 0%, var(--c-primary) 28%, var(--c-accent2) 40%, #FFFFFF 47%, #FFFFFF 52%, var(--c-accent2) 59%, var(--c-primary) 72%, var(--c-primary) 100%); background-size: 700px 100%; background-repeat: repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradWave 2.2s linear infinite; filter: drop-shadow(0 2px 14px rgba(0,0,0,.45)); } /* ---- SHINE v3: tumma oranssi otsikko + vaalea pyyhkäisy, saumaton silmukka ---- Malli: demo.kotisivut.fi/atape (tumma perusväri, vaalea kaista sen yli). Saumattomuus: background-size 200% + siirto tasan -200% = tasan yksi ruutu, ja liukuvärin 0 % ja 100 % ovat sama väri → ei välähdystä silmukan lopussa. Kontrastit POISTETULLA tummalla bannerilla (vanha paletti): #C2650F 4,2:1 · #F3C871 10,7:1 (iso teksti vaatii 3:1). */ .banner h1 .grad-text { background: linear-gradient(100deg, #C2650F 0%, #C2650F 32%, #E9A44E 42%, #FFF6E6 50%, #E9A44E 58%, #C2650F 68%, #C2650F 100%); background-size: 700px 100%; background-repeat: repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradWave 1.6s linear infinite; filter: drop-shadow(0 2px 12px rgba(0,0,0,.5)); } /* Silmukan jakso KIINTEÄNÄ PIKSELIARVONA, ei prosenttina: prosenttijakso ei looppaa saumattomasti kun otsikko taittuu kahdelle riville (background-clip: text -laatikko pilkkoutuu riveittäin), jolloin kierroksen vaihtuessa näkyy välähdys. */ @keyframes gradWave { from { background-position: 0 center; } to { background-position: 700px center; } } @media (prefers-reduced-motion: reduce) { .banner h1 .grad-text { animation: none; background-position: 50% center; } } /* ============================================================================ TAUSTAT VAIHDETTU: varausosio tummaksi, footer vaaleaksi. Syy: logo toimii parhaiten vaalealla taustalla, ja se on footerissa. ============================================================================ */ /* ---- Varaa showbaari juhliisi → tumma (footerin entinen väri) ---- */ .varaus { background: var(--c-dark); background-image: none; } .varaus h2 { color: #fff; } /* 13,6:1 */ .varaus .lead { color: rgba(255,235,208,.84); } .varaus .eyebrow { background: var(--c-accent2); color: var(--c-heading); } /* valkoinen lomakekortti erottuu tummalta hyvin — sisältö pysyy ennallaan */ .varaus .varauslomake { border-color: transparent; box-shadow: 0 24px 60px -26px rgba(0,0,0,.65); } .yhteystiedot a, .yhteystiedot span { color: var(--c-on-dark); } /* 11,7:1 */ .yhteystiedot svg { color: var(--c-accent2); } @media (hover: hover) { .yhteystiedot a:hover { color: var(--c-accent2); } } /* Footerin vaalea teemaus tehdään shared.js:ssä (sen