*/
.section_order .padding-global { width: 100%; } /* sama tilaussektiossa */
.section_order .container-large { position: relative; } /* style="position:relative" */
.section_order .hero_lead { max-width: 32rem; } /* style="max-width:32rem" */
.section_services .showcase_header { padding: 0 0 2.5rem; } /* style="padding:0 0 2.5rem" */
.quote_author .micro-label { margin-top: 0.3rem; } /* style="margin-top:0.3rem" */
/* Webflow-CMS-adapteri: Collection List kaaree jokaisen kortin .w-dyn-item
-divilla, jolloin flex-itemiksi tulisi kaare eika kortti. display:contents
nostaa kortin suoraan radan lapseksi, jolloin asettelu vastaa paikallista. */
.showcase_track > .w-dyn-item { display: contents; }
/* Webflow asettaa h1-h6:lle oman jarjestelmafonttinsa, mika katkaisee
periytymisen bodysta. .heading-style-display luottaa periytymiseen. */
h1, h2, h3, h4, h5, h6 { font-family: inherit; line-height: inherit; }
/* Paikallinen reset on `*, *::before, *::after { margin:0; padding:0 }`,
jonka spesifisyys on 0. Webflow'n normalisointi kayttaa ELEMENTTI-
valitsimia, jotka voittavat sen vaikka tama tiedosto ladataan
myohemmin. Toistetaan siksi sama reset elementtitasolla. */
h1, h2, h3, h4, h5, h6,
p, blockquote, figure, fieldset, legend, dl, dd,
ul, ol, li { margin: 0; padding: 0; }
/* ---------- Mobiilihero: enemman ilmaa auton ymparille ----------
Otsikko nostetaan ylemmas (pienempi padding-top ja ylamarginaali),
jolloin otsikon ja taglinen valiin jaa korkeampi kaista autolle.
Auto keskitetaan siihen kaistaan hieman isompana. Koko sisalto
mahtuu edelleen yhteen nakymaan. */
@media (max-width: 767px) {
.hero_component {
padding-top: 6.4rem;
padding-bottom: clamp(1.2rem, 3vh, 2.2rem);
}
.is-spotlight .hero_heading { margin-top: 0.35rem; }
.hero_footer { margin-top: clamp(1.2rem, 3vh, 2.2rem); }
/* Auto kapeampana ja ylempana, jottei se leikkaudu reunoista ja
otsikon ja taglinen valiin jaa tasaiset ilmat. */
.is-spotlight .hero_background img {
left: 12%; top: 32.8%;
width: 76%; height: 23%;
}
.hero_ground { left: 50%; bottom: 39%; width: 54%; height: 4.5%; }
}
@media (max-width: 600px) {
.is-spotlight .hero_background img { top: 31.3%; }
.hero_ground { bottom: 41%; width: 56%; }
}
@media (max-width: 767px) and (max-height: 700px) {
.hero_component { padding-top: 4.6rem; }
.is-spotlight .hero_background img { top: 40%; height: 20%; }
.hero_ground { bottom: 33%; }
}
/* Mobiilissa .showcase_nav oli kokonaan piilossa, jolloin myos
"Kaikki vaihtoautot" -linkki katosi. Nuolet on merkitty hide-mobile
-luokalla, joten riittaa etta ryhma itse nakyy. */
@media (max-width: 767px) {
.showcase_header .showcase_nav { display: flex; }
.showcase_header { flex-wrap: wrap; gap: 1rem; }
}
/* --- Kortin pyoristetyt kulmat Safarissa ---
iOS Safarissa lapsi jolla on backdrop-filter karkaa vanhemman
border-radiuksen ulkopuolelle, jolloin korttiin jai nakyviin
ylimaarainen suora kulma. Maski pakottaa leikkauksen. */
.showcase_card {
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
}
.showcase_card-body {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
@media (max-width: 767px) {
/* Tekniset tiedot vasempaan laitaan, hinta omalle rivilleen.
Erottavat pisteet pois, koska rivittyessa rivi alkoi pisteella. */
.showcase_card-row { flex-wrap: wrap; justify-content: flex-start; row-gap: 0.7rem; }
.showcase_card-specs { flex: 1 1 100%; column-gap: 0.8rem; }
.showcase_card-specs > * + * { padding-left: 0; }
.showcase_card-specs > * + *::before { content: none; }
.showcase_card-price { flex: 0 0 auto; }
/* Nuolet nakyviin myos mobiilissa, pienempina */
.showcase_header .showcase_nav { display: flex; gap: 0.4rem; align-self: flex-start; }
.showcase_header .showcase_nav .tile_arrow { padding: 0.3rem; }
.showcase_header .showcase_nav .tile_arrow svg { width: 26px; height: 26px; }
}
/* Autosivun paluulinkki oli harmaa ja hukkui tummaan taustaan. */
.auto_back { color: var(--color-paper); }
/* --- Laattakuvien rajaukset: oletusrajaus keskelta leikkasi juuri sen
kohdan jonka pitaisi nakya (autot, logo). --- */
.nav_overlay .is-menu-hero .bento_tile-media img { object-position: 50% 78%; }
.nav_overlay .is-menu-sub2 .bento_tile-media img { object-position: 50% 28%; }
.cta-split_panel img[src*="pcc-kyltti"] { object-position: 50% 76%; }
/* --- Navin logo vaaleiden sektioiden paalla ---
Webflow renderoi logon
![]()
-elementtina, ei
maskattuna kaareena, joten currentColor ei vaikuta siihen.
brightness(0) tekee kuvasta mustan alfakanavan sailyttaen. */
.nav_bar img.nav_logo {
filter: drop-shadow(0 2px 9px rgba(0, 0, 0, 0.55));
transition: filter 0.4s var(--ease-luxe);
}
body.nav-on-light .nav_bar img.nav_logo {
filter: brightness(0) drop-shadow(0 1px 7px rgba(255, 255, 255, 0.7));
}
/* --- Gallerian nuolinapit ---
Merkit < ja > eivat istu optisesti ympyran keskelle, koska niiden
sivulaakerit ja perusviiva ovat epasymmetriset. Piirretaan nuoli
reunoista ja siirretaan sen todellinen mustekeskio ympyran keskelle. */
.gallery_arrow { font-size: 0; line-height: 0; }
.gallery_arrow::before {
content: '';
display: block;
width: 10px;
height: 10px;
border-left: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
}
.gallery_arrow-prev::before { transform: translateX(3.5px) rotate(45deg); }
.gallery_arrow-next::before {
border-left: 0;
border-bottom: 0;
border-right: 1.6px solid currentColor;
border-top: 1.6px solid currentColor;
transform: translateX(-3.5px) rotate(45deg);
}
/* ============================================================
STUDIOTYHJIO — heron tausta ilman valokuvaa
Hero on rakennettu valokeila-ideaan: irtileikattu auto, kursoria
seuraava keila ja valolammikko lattialla. Valokuva maisemasta toi
kuvaan toisen valologiikan, joka riiteli keilan kanssa. Tassa
tausta on pelkkaa valoa: keila ylhaalta, vaimea kultahehku
oikeassa ylakulmassa, vinjetti reunoilla ja tuskin erottuva
horisontti siina missa seina kohtaa lattian.
============================================================ */
/* Raskaasti abstraktoitu halli: mustavalkoinen, sumennettu ja tummennettu,
jolloin jaljelle jaa vain kattovalorivit ja pakopiste. Paikkaa ei
tunnista, joten se ei kilpaile auton kanssa. */
.section_hero.is-spotlight .hero_backdrop img {
display: block;
height: 100%;
object-fit: cover;
object-position: center top;
opacity: 0.9;
-webkit-mask-image: linear-gradient(to bottom,
#000 0%, #000 34%, rgba(0, 0, 0, 0.55) 48%, transparent 62%);
mask-image: linear-gradient(to bottom,
#000 0%, #000 34%, rgba(0, 0, 0, 0.55) 48%, transparent 62%);
}
.section_hero.is-spotlight .hero_backdrop {
-webkit-mask-image: none;
mask-image: none;
background:
radial-gradient(58% 42% at 88% 4%,
rgba(200, 163, 95, 0.09), rgba(200, 163, 95, 0) 72%),
/* Hallin ovi: kapea pystysuora valoaukko auton takana */
radial-gradient(13% 54% at 59% 44%,
rgba(255, 250, 240, 0.34) 0%,
rgba(255, 250, 240, 0.14) 46%,
rgba(255, 250, 240, 0.08) 74%,
rgba(255, 250, 240, 0) 100%),
/* Yleiskeila ylhaalta, vaimeana jotta ovi jaa paavalonlahteeksi */
radial-gradient(46% 40% at 51% 16%,
rgba(255, 250, 240, 0.075),
rgba(255, 250, 240, 0.025) 46%,
rgba(255, 250, 240, 0) 78%),
radial-gradient(115% 88% at 50% 46%,
rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.5) 100%),
linear-gradient(to bottom,
#171615 0%, #151413 42%, #121110 66%,
#0c0b0b 74%, #0f0e0d 80%, #0a0909 100%);
}
@media (max-width: 767px) {
.section_hero.is-spotlight .hero_backdrop {
background:
radial-gradient(70% 30% at 86% 5%,
rgba(200, 163, 95, 0.08), rgba(200, 163, 95, 0) 72%),
radial-gradient(24% 36% at 56% 40%,
rgba(255, 250, 240, 0.3) 0%,
rgba(255, 250, 240, 0.12) 46%,
rgba(255, 250, 240, 0.07) 74%,
rgba(255, 250, 240, 0) 100%),
radial-gradient(64% 30% at 51% 18%,
rgba(255, 250, 240, 0.07),
rgba(255, 250, 240, 0.022) 48%,
rgba(255, 250, 240, 0) 80%),
radial-gradient(120% 80% at 50% 44%,
rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.45) 100%),
linear-gradient(to bottom,
#171615 0%, #151413 40%, #121110 58%,
#0c0b0b 66%, #0f0e0d 72%, #0a0909 100%);
}
}
/* Auto valospotin ylapuolelle: sama taso, myohempi DOM-jarjestys. */
.section_hero.is-spotlight .hero_background { z-index: 3; }
/* --- Lattian valospotti ---
Heron alaosassa on verho (.section_hero.is-spotlight::after, taso 2),
joka on pohjalla 94 % mustaa. Kaikki sen alle jaava huuhtoutuu pois,
joten spotti piirretaan .hero_ground-elementille tasolla 3.
Mitat on muunnettu .hero_background-laatikosta (inset: -7%) taman
section-kokoiseen koordinaatistoon kaavalla 1,14 x - 0,07. */
.section_hero.is-spotlight .hero_ground {
display: block;
/* Sijoitus vasemmasta ylakulmasta, EI translate-keskityksella:
main.js ajaa tahan gsap.quickTo(x/scaleX), joka ylikirjoittaa
transformin ja pudottaisi prosenttikeskityksen pois. */
left: 31.2%;
top: 82%;
right: auto;
bottom: auto;
width: 38%;
height: 3.4%;
z-index: 3;
/* Kallistus seuraa auton perspektiivia: kosketusviiva nousee
vasemmalta oikealle, koska auto on kuvattu vinosti. */
transform: rotate(-2.2deg);
border-radius: 50%;
background: radial-gradient(closest-side,
rgba(255, 251, 242, 0.34) 0%,
rgba(255, 249, 236, 0.15) 48%,
rgba(255, 249, 236, 0) 100%);
filter: blur(11px);
pointer-events: none;
}
/* Tumma kosketusvarjo renkaiden alle, valospotin paalle. */
.section_hero.is-spotlight .hero_ground::after {
content: '';
position: absolute;
left: 19%;
top: -142%;
width: 62%;
height: 92%;
border-radius: 50%;
background: radial-gradient(closest-side,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.45) 52%,
rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
@media (max-width: 767px) {
.section_hero.is-spotlight .hero_ground::after {
left: 22%;
top: -188%;
width: 56%;
height: 96%;
}
.section_hero.is-spotlight .hero_ground {
left: 20%;
top: 55.8%;
width: 60%;
height: 2.2%;
transform: rotate(-1.6deg);
filter: blur(8px);
}
}
/* ============================================================
VALOKUVAHERO
Irtileikattu auto + CSS-studio vaihdettiin oikeaan kuvaan.
Kaikki valokeilan kerrokset piiloon ja neljan paallekkaisen
tummennusverhon tilalle kaksi hallittua liukua: toinen otsikon
taakse vasemmalle, toinen alareunaan taglinen ja nappien alle.
============================================================ */
.section_hero.is-spotlight .hero_background,
.section_hero.is-spotlight .hero_ground,
.section_hero.is-spotlight .hero_tag { display: none; }
.section_hero.is-spotlight .hero_backdrop {
-webkit-mask-image: none;
mask-image: none;
background: var(--color-night);
}
.section_hero.is-spotlight .hero_backdrop img {
display: block;
position: absolute;
/* TASMALLEEN sama laatikko kuin .hero_groundilla: molemmat naytetaan
coverilla, joten pieninkin ero laatikon koossa siirtaa auton eri
kohtaan kerroksissa ja terava kopio irtoaa sumeasta pohjasta.
Laatikkoa EI saa suurentaa lisaa: cover tayttaa isomman laatikon
zoomaamalla, jolloin koko rajaus muuttuu. 3 % ylimitoitusta sivuilla
riittaa hiiriparallaksin liikkumavaraksi, ja pystysuuntaan ei liikuta. */
left: -3%;
/* Auto n. 5 pp ylemmas (6.8.2026). object-position EI kelpaa tahan:
kuva on 3000x1687 (1,778) ja laatikko tavallisella lapparilla
kapeampi kuin se, joten cover skaalaa KORKEUDEN mukaan eika
pystysuuntaista ylijaamaa ole lainkaan — Y-arvon muuttaminen ei tee
mitaan. Ainoa toimiva tapa on siirtaa koko laatikkoa ylos ja kasvattaa
sita saman verran, jottei alareunaan jaa rakoa.
13,4 % antaa tasan 5 pp siirtyman: kasvatus zoomaa kuvaa, mikä syo
osan siirrosta (auto y = 0,628 - 0,372 x t). Sama pari on pakko olla
.hero_groundilla, muuten terava kopio irtoaa sumeasta pohjasta. */
top: -13.4%;
width: 106%;
height: 113.4%;
max-width: none;
object-fit: cover;
object-position: center 56%;
opacity: 1;
-webkit-mask-image: none;
mask-image: none;
}
/* Vanha vasen valopesu pois; se oli mitoitettu mustaa studiota varten. */
.section_hero.is-spotlight::before { background: none; }
/* Kuvan oma suodin oli viritetty keltamustalle parkkihallille
(saturate 0.2 vei sen lahes harmaaksi). Tassa vain kevyt tummennus,
varit saavat elaa. Sumennus tulee ::before-kerroksesta. */
.section_hero.is-spotlight .hero_backdrop img {
filter: brightness(0.94) contrast(1.04) saturate(0.82);
}
/* Syvateravyys: tausta sumenee ylhaalta alaspain, mutta auton kohdalle
leikataan pehmea reika maskista, jolloin auto pysyy teravana.
mask-composite: subtract vahentaa toisen maskikerroksen ensimmaisesta.
Jos selain ei tue sita, jaljelle jaa pelkka pystyliuku eli nykytila. */
.section_hero.is-spotlight .hero_backdrop::before { background: none; }
/* Terava kopio auton kohdalle.
mask-composite: subtract ei leikannut reikaa sumennukseen luotettavasti,
joten sumennus jatetaan koskematta ja auton paalle asetetaan erillinen
teravа kerros samasta kuvasta samalla rajauksella. .hero_ground on
tassa variantissa muuten kaytosta poissa, joten se toimii kantajana.
HUOM: main.js liikuttaa taustakuvaa ja tata kerrosta TASAN SAMAN
verran hiiren mukana (ks. pcc-v7.js), muuten kerrokset irtoaisivat
toisistaan ja auton reunaan jaisi haamukuva. */
.section_hero.is-spotlight .hero_ground {
display: block;
left: -3%;
right: auto;
bottom: auto;
width: 106%;
/* TASMALLEEN sama laatikko kuin .hero_backdrop imgilla — ks. selitys
siella. Naita kahta ei saa muuttaa erikseen. */
top: -13.4%;
height: 113.4%;
z-index: 1;
border-radius: 0;
/* Valospotti oli kallistettu auton perspektiivin mukaan (-2,2 astetta).
Kuvakerroksena sama kallistus kiertaisi koko valokuvan vinoon
suhteessa sumeaan taustaan. GSAP kirjoittaa tahan omat siirtymansa
inline-tyylina, joten pelkka none riittaa lahtoarvoksi. */
transform: none;
background-image: url("https://cdn.prod.website-files.com/6a708c6360d9ae2a00270d92/6a73663f07b67baccab33949_pcc-hero-panamera2.webp");
background-size: cover;
background-position: center 56%;
background-repeat: no-repeat;
filter: brightness(0.94) contrast(1.04) saturate(0.82);
/* Maskin keskipiste ja sateet tulevat main.js:lta: se laskee auton
paikan kuvassa samalla cover-matematiikalla kuin selain. Kiintea
prosenttimaski osui auton viereen, koska rajaus muuttuu ruutusuhteen
mukana. Ulkosade on 2,6-kertainen autoon nahden ja liuku alkaa vasta
48 %:sta, joten reunaa ei erota — terava ja sumea sulautuvat
syvyysterävyyden tapaan. */
/* Liuku noudattaa smoothstep-kayraa, ei suoraa. Suorassa liuvussa
kaltevuus muuttuu jyrkasti heti taysin teravan alueen reunalla, ja
juuri sen silma nakee soikiona. Useampi vaihe pyoristaa molemmat
paat, jolloin siirtymaa ei erota. Taysin terava ydin on nyt 30 %
sateesta (ennen 48 %), eli kirkas alue on selvasti pienempi. */
-webkit-mask-image: radial-gradient(
var(--car-rx, 42%) var(--car-ry, 36%) at var(--car-x, 61.4%) var(--car-y, 62.8%),
#000 0%, #000 30%,
rgba(0, 0, 0, 0.945) 40%,
rgba(0, 0, 0, 0.81) 50%,
rgba(0, 0, 0, 0.633) 60%,
rgba(0, 0, 0, 0.394) 70%,
rgba(0, 0, 0, 0.198) 80%,
rgba(0, 0, 0, 0.056) 90%,
transparent 100%);
mask-image: radial-gradient(
var(--car-rx, 42%) var(--car-ry, 36%) at var(--car-x, 61.4%) var(--car-y, 62.8%),
#000 0%, #000 30%,
rgba(0, 0, 0, 0.945) 40%,
rgba(0, 0, 0, 0.81) 50%,
rgba(0, 0, 0, 0.633) 60%,
rgba(0, 0, 0, 0.394) 70%,
rgba(0, 0, 0, 0.198) 80%,
rgba(0, 0, 0, 0.056) 90%,
transparent 100%);
pointer-events: none;
}
.section_hero.is-spotlight .hero_backdrop::after {
background:
/* Otsikon taakse vasempaan laitaan */
linear-gradient(102deg,
rgba(6, 5, 5, 0.86) 0%,
rgba(6, 5, 5, 0.6) 24%,
rgba(6, 5, 5, 0.2) 48%,
rgba(6, 5, 5, 0) 72%),
/* Vinjetti auton ymparille: kaikki muu tummenee, auto nousee esiin */
radial-gradient(54% 46% at 48% 66%,
rgba(6, 5, 5, 0) 0%,
rgba(6, 5, 5, 0) 38%,
rgba(6, 5, 5, 0.24) 70%,
rgba(6, 5, 5, 0.46) 100%),
/* Ylareuna navia varten ja alareuna taglinea varten */
linear-gradient(to bottom,
rgba(6, 5, 5, 0.55) 0%,
rgba(6, 5, 5, 0.12) 22%,
rgba(6, 5, 5, 0.1) 52%,
rgba(6, 5, 5, 0.55) 82%,
rgba(6, 5, 5, 0.82) 100%);
}
.section_hero.is-spotlight::after {
background: linear-gradient(to top,
rgba(6, 5, 5, 0.75) 0%, rgba(6, 5, 5, 0.28) 14%, transparent 30%);
}
/* --- Mobiilihero ---
Pystyruudussa cover rajasi leveasta kuvasta vain auton keulan, ja koska
se tuli sumeasta taustakerroksesta, auto nakyi epaterävana ja yli
reunojen. Mobiilissa kaytetaan siksi omaa tiukempaa rajausta, jossa koko
auto mahtuu kuvaan, ja se asetetaan teravana nauhana otsikon ja
"Vaivatonta autokauppaa" -tekstin valiin. Taustakuva jaa taakse sumeaksi
tunnelmaksi, mutta sen rajaus siirretaan pois autosta (oikea laita: tie
ja puurivi), jottei sumea auto kilpaile teravan kanssa. */
@media (max-width: 767px) {
/* --- Mobiilihero: yksi kokoruudun pystykuva ---
Leveasta valokuvasta ei saa pystyruutuun kelvollista rajausta: cover
nayttaa siita vain auton keulan. Mobiilille on siksi oma tiedosto,
joka on rakennettu 1050 x 2500 -kanvaalle niin etta auto istuu 45 %:n
korkeudelle eli otsikon ja taglinen valiin, ja ymparisto on valmiiksi
sumennettu auton ympari pehmealla ellipsilla. Kaikki on siis yhdessa
kuvassa — sivulla ei tarvita erillista teravaa kerrosta eika maskia,
joten mitaan rajaa ei voi syntya. Kanvas on kapeampi (0,42) kuin
kapeinkin puhelin, joten cover rajaa pystysuunnasta eika sivuilta,
eika auto voi jaada reunojen ulkopuolelle. */
.section_hero.is-spotlight .hero_backdrop img { display: none; }
.section_hero.is-spotlight .hero_backdrop {
background-image: url("https://cdn.prod.website-files.com/6a708c6360d9ae2a00270d92/6a737849ea0825c5029ec211_pcc-hero-mobile5.webp");
/* coverilla kuva skaalautuu korkeuden mukaan eika pystysuuntaan jaa
liikkumavaraa, jolloin background-position ei tee mitaan. 132 %
korkeutta suurentaa autoa noin kolmanneksen alkuperaisesta ja jattaa
reilusti varaa, jonka avulla rajaus pidetaan hieman alempana (25 %). */
background-size: auto 132%;
/* Isompi prosentti piilottaa enemman kuvan ylareunaa, jolloin rajaus
nousee ja auto istuu korkeammalla otsikon ja taglinen valissa. */
background-position: center 34%;
background-repeat: no-repeat;
}
/* Otsikko hieman alemmas, jotta se ei ole kiinni navipalkissa ja jotta
auton ylle jaa ilmaa. */
.section_hero.is-spotlight .hero_heading { margin-top: 1.7rem; }
.section_hero.is-spotlight .hero_backdrop::before { content: none; }
.section_hero.is-spotlight .hero_ground { display: none; }
/* Kapealla ruudulla cover rajaa sivuja rajusti eika auton paikkaa voi
lukita prosenteilla — sumennus pidetaan tasaisena ilman reikaa. */
.section_hero.is-spotlight .hero_backdrop::after {
background: linear-gradient(to bottom,
rgba(6, 5, 5, 0.72) 0%,
rgba(6, 5, 5, 0.34) 26%,
rgba(6, 5, 5, 0.3) 50%,
rgba(6, 5, 5, 0.72) 78%,
rgba(6, 5, 5, 0.9) 100%);
}
}
/* --- Tuotekortin hinnoittelurivi ---
Hinta paaosassa, kuukausiera hiusviivan takana hieman pienempana.
Webflow-rakenteessa kaare on .card_car-pricing (paikallisessa
.card_car-footer), joten molemmat tyylitellaan. */
.card_car-pricing {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.15rem 0.75rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--line-dark);
}
.card_car-price { font-size: 1.45rem; letter-spacing: -0.01em; }
.card_car-monthly {
position: relative;
padding-left: 0.8rem;
font-size: 0.95rem;
font-weight: 400;
color: var(--color-smoke);
}
.card_car-monthly::before {
content: '';
position: absolute;
left: 0;
top: 0.16em;
bottom: 0.16em;
width: 1px;
background: var(--line-dark);
}
/* Heron sisalto omaan leveyteensa: otsikko ja alapalkki (tagline +
napit) rajautuvat 1800 px:iin ja keskitetaan. Taustakuva jaa
full-bleediksi, koska raja koskee vain container-largea. */
.section_hero.is-spotlight .container-large {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
/* Vanha varjoellipsi kuului irtileikattuun autoon; tassa variantissa
.hero_ground on kuvakerros, joten pseudo pois kaytosta. */
.section_hero.is-spotlight .hero_ground::after { display: none; }
/* --- Ajovalot valokuvaherossa ---
Irtileikatussa AMG-herossa valot olivat oma kuvatiedostonsa
(.hero_spot-lights). Valokuvassa niita ei voi erottaa, joten umpiot
maalataan CSS:lla. Kerros on .hero_groundin LAPSI, jolloin se perii
saman transformin ja pysyy umpioiden paalla myos hiiriparallaksissa.
Paikkaa EI voi lukita prosentteihin: cover rajaa kuvaa eri tavalla eri
ruutusuhteilla, ja 16:10:n ja ultraleveän valilla umpiot liikkuvat yli
nelja prosenttiyksikkoa. Siksi main.js laskee paikan samalla
cover-matematiikalla kuin selain ja kirjoittaa sen naihin muuttujiin
(--hl-*), myos ikkunan koon muuttuessa. Alla olevat oletusarvot
vastaavat 16:9:aa siina tapauksessa ettei skripti aja.
screen-sekoitus saa hehkun kayttaytymaan valona eika maalina.
Sytytyksen hoitaa main.js:n kolmivaiheinen aikajana. */
.section_hero.is-spotlight .hero_headlights {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
background:
/* kaukainen umpio: kirkas ydin */
radial-gradient(var(--hl-far-rx, 3.2%) var(--hl-far-ry, 3%)
at var(--hl-far-x, 56.6%) var(--hl-far-y, 62.1%),
rgba(224, 240, 255, 0.95) 0%,
rgba(188, 218, 255, 0.5) 46%,
rgba(160, 200, 255, 0) 100%),
/* sen ympärille levittyvä hehku */
radial-gradient(calc(var(--hl-far-rx, 3.2%) * 3) calc(var(--hl-far-ry, 3%) * 3)
at var(--hl-far-x, 56.6%) var(--hl-far-y, 62.1%),
rgba(150, 195, 255, 0.3) 0%,
rgba(150, 195, 255, 0) 74%),
/* lähin umpio on loivemmassa kulmassa, siksi kapeampi */
radial-gradient(var(--hl-near-rx, 0.8%) var(--hl-near-ry, 1.4%)
at var(--hl-near-x, 45.9%) var(--hl-near-y, 63%),
rgba(224, 240, 255, 0.9) 0%,
rgba(188, 218, 255, 0.42) 48%,
rgba(160, 200, 255, 0) 100%),
radial-gradient(calc(var(--hl-near-rx, 0.8%) * 3.4) calc(var(--hl-near-ry, 1.4%) * 3.4)
at var(--hl-near-x, 45.9%) var(--hl-near-y, 63%),
rgba(150, 195, 255, 0.22) 0%,
rgba(150, 195, 255, 0) 76%);
}
@media (max-width: 767px) {
/* Kapealla ruudulla cover rajaa sivuja rajusti eika umpioita voi
lukita prosenteilla — valot pois, muuten ne osuvat tyhjaan. */
.section_hero.is-spotlight .hero_headlights { display: none; }
}
/* --- Autosivu mobiilissa: hinta- ja toimintokortti heti gallerian jalkeen ---
.car_summary-card on DOM:issa .car_main-colin jalkeen, joten kapealla
ruudulla se valui koko esittelytekstin alle. display: contents purkaa
valikaareen, jolloin galleria, kortti ja tekstilohkot ovat samassa
ruudukossa ja niiden jarjestyksen voi vaihtaa. */
/* Webflow'n autosivu kayttaa omaa rakennettaan (.auto_layout > .auto_media,
.autoinfo_grid, .auto_card). Kapealla ruudulla kortti jai koko
esittelytekstin alle, noin 1500 px:n paahan gallerian alta, vaikka juuri
hinta ja napit ovat sivun tarkein palikka. Kaikki kolme ovat saman
ruudukon suoria lapsia, joten pelkka order riittaa. */
@media (max-width: 991px) {
.auto_layout .auto_media { order: 1; }
.auto_layout .auto_card { order: 2; }
.auto_layout .autoinfo_grid { order: 3; }
}
/* --- Varustelistat painalluksen taakse ---
Vanhalta sivustolta tuodut varustelistat ovat keskimaarin 86 ja pisimmillaan
yli 130 riviaa, joten avoimena ne tyontaisivat tekniset tiedot ja
suositusautot satojen pikselien paahan. JS kaaree Varusteet-otsikon jalkeen
tulevat lohkot (varusteet + lisavarusteet) .autoinfo_collapseen ja lisaa
napin; tassa vain rajaus, haipyva alareuna ja napin ulkoasu. */
.autoinfo_collapse {
position: relative;
max-height: 21rem;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.autoinfo_collapse::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 7rem;
background: linear-gradient(to bottom,
rgba(17, 16, 16, 0) 0%,
rgba(17, 16, 16, 0.72) 55%,
var(--color-night) 100%);
pointer-events: none;
transition: opacity 0.35s ease;
}
/* Toinen ja sita seuraavat otsikot (Lisavarusteet, Tekniset tiedot) ovat
kaikki collapse-kaareen sisalla ja kiinnittyivat edellisen listan
viimeiseen riviin. Vali erottaa lohkot toisistaan. */
.autoinfo_collapse .autoinfo_subtitle { margin-top: 2.4rem; }
.is-autoinfo-open .autoinfo_collapse { max-height: 500rem; }
.is-autoinfo-open .autoinfo_collapse::after { opacity: 0; }
.autoinfo_toggle {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-top: 1.1rem;
padding: 0.7rem 1.35rem;
border: 1px solid var(--line-dark);
border-radius: 999px;
background: transparent;
color: var(--color-paper);
font-family: inherit;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.autoinfo_toggle:hover {
background: var(--color-paper);
border-color: var(--color-paper);
color: var(--color-night);
}
.autoinfo_toggle::after {
content: "";
width: 0.42rem;
height: 0.42rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-0.12em) rotate(45deg);
transition: transform 0.3s ease;
}
.is-autoinfo-open .autoinfo_toggle::after {
transform: translateY(0.08em) rotate(-135deg);
}
@media (max-width: 991px) {
.car_layout { gap: 1.8rem; }
.car_main-col { display: contents; }
.car-hero_gallery { order: 1; }
.car_summary-card { order: 2; }
.car_block { order: 3; }
}
/* --- Mobiilinavi matalammaksi ---
Palkin korkeus tuli kolmesta paallekkaisesta paddingista: nav_barin
pystypadding, pilleripalkin oma padding ja nappien min-height. Kaikkia
kevennetaan hieman, jolloin palkki laskee 81 px:sta 66 px:iin ilman etta
napit menevat liian pieniksi osua. */
@media (max-width: 767px) {
.nav_bar { padding-top: 10px; padding-bottom: 10px; }
.nav_pillbar { padding: 5px; }
.nav_boxbtn,
.nav_burger { min-height: 36px; padding-top: 9px; padding-bottom: 9px; }
/* Kielivalitsin ei ole .nav_boxbtn, joten se jai 40 px:iin ja tyonsi
pilleripalkkia korkeammaksi kuin Valikko-nappi. */
.nav_lang { min-height: 36px; }
}
/* --- Esittelyssa-osion otsikkorivi ---
"Kaikki vaihtoautot" on nuolien alla oikeassa laidassa. Vetopalkki
kuuluu korttiraidan ALLE, ei otsikon alle: se on raidan ohjain, joten
se luetaan yhteen sen kanssa ja on hiirella lyhyen matkan paassa.
Otsikkoembedin palkki poistetaan DOM:ista site-koodin hydraatiossa,
jotta pcc.js kiinnittyy alempaan (se hakee ensimmaisen osuman); tama
saanto piilottaa sen niissa selaimissa joissa skripti ei ehdi ajaa. */
.showcase_head-main .showcase_progress { display: none; }
.container-large > .showcase_progress { margin-top: 2.4rem; }
.showcase_nav-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1.15rem;
flex-shrink: 0;
}
.showcase_nav-col .showcase_head-link { margin-top: 0; }
@media (max-width: 767px) {
/* Kosketusruudulla raitaa selataan sormella, joten erillinen vetopalkki
on turha: se vie tilaa eika tuo mitaan mita sipaisu ei jo tee.
"Kaikki vaihtoautot" siirtyy site-koodissa raidan alle. */
.showcase_header { flex-direction: column; align-items: stretch; gap: 1.1rem; }
.container-large > .showcase_progress { display: none; }
.showcase_nav-col { align-items: flex-start; }
/* "Kaikki vaihtoautot" on raidan alla oma rivinsa, joten se kuuluu
keskelle. Linkki on inline-flex, joten se nostetaan lohkotasolle ja
kavennetaan sisallon levyiseksi, jotta auto-marginaalit purevat. */
.container-large > .showcase_head-link {
display: flex;
width: -moz-fit-content;
width: fit-content;
margin: 1.15rem auto 0;
}
/* Nuolet ovat kosketuskohteita: 36 px jai alle suositellun 44 px:n. */
.showcase_nav { gap: 0.6rem; }
.showcase_nav .tile_arrow {
width: 48px;
height: 48px;
padding: 0.5rem;
}
/* Lisaspesifisyys: .showcase_header .showcase_nav .tile_arrow svg pitaa
ikonin muuten 26 px:ssa. */
.showcase_header .showcase_nav .tile_arrow svg { width: 30px; height: 30px; }
}
/* --- Mobiilivalikko: nuolet pois, yhteystietorivi ylimmaiseksi --- */
@media (max-width: 767px) {
/* Kapealla ruudulla laatat ovat kokonaan painettavia, joten erillinen
nuoli-ikoni on turhaa koristetta. */
.nav_overlay-grid .tile_arrow,
.nav_overlay-grid .bento_tile-icon { display: none; }
/* Jarjestys ylhaalta: yhteystiedot, Vaihtoautot, kaksi laattaa,
Esittelyssa ja lopuksi pikalinkkirivi. Nama ovat ruudukon lapsia,
joten pelkka order riittaa — sarakepaikat sailyvat. */
.nav_overlay-grid .is-menu-social,
.nav_overlay-grid .is-menu-info { order: -2; }
.nav_overlay-grid .is-menu-hero { order: -1; }
.nav_overlay-grid .is-menu-sub1,
.nav_overlay-grid .is-menu-sub2 { order: 0; }
.nav_overlay-grid .is-menu-featured { order: 1; }
.nav_overlay-grid .nav_overlay-row { order: 2; }
/* Kuvalliset laatat: enemman ilmaa reunoihin. Some- ja osoitelaatat
jatetaan ulos, ne ovat matalia pikapainikkeita. */
.nav_overlay-grid > .bento_tile:not(.is-menu-social):not(.is-menu-info) {
padding: 1.15rem 1.2rem;
}
/* Vaihtoautot-otsikko hieman pienemmaksi (oli 30 px). */
.nav_overlay-grid .is-menu-hero .bento_tile-title { font-size: 1.6rem; }
/* Auto tilauksesta- ja Mika on Prestige -laattojen alatekstit samaan
kokoon kuin Vaihtoautot-laatan alateksti (0,82rem = 13 px). */
/* Alateksti ei ole
vaan .nav_overlay-meta (oli 14,4 px). */
.nav_overlay-grid .is-menu-sub1 .nav_overlay-meta,
.nav_overlay-grid .is-menu-sub2 .nav_overlay-meta {
font-size: 0.82rem;
line-height: 1.45;
}
/* Osoitelaatta muutetaan linkiksi site-koodissa. */
a.bento_tile.is-menu-info { text-decoration: none; }
/* Sulje-nappi pienemmaksi. */
.nav_overlay-close { padding: 0.65rem 1.25rem; font-size: 0.7rem; }
/* Kolme viimeista nappia: hieman pienempi teksti ja tarkka keskitys.
Aiempi saanto havisi Webflow-luokalle, siksi lisaspesifisyys. */
.nav_overlay .nav_overlay-row .bento_tile {
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
justify-content: center;
}
.nav_overlay .nav_overlay-row .bento_tile-footer {
width: 100%;
justify-content: center;
margin: 0;
/* Nuoli on piilotettu, joten sen vali jaisi roikkumaan otsikon perään. */
gap: 0;
}
.nav_overlay .nav_overlay-row .bento_tile-footer > div { width: 100%; }
.nav_overlay .nav_overlay-row .bento_tile-title {
width: 100%;
font-size: 0.82rem;
line-height: 1.25;
text-align: center;
/* Otsikon 8 px alamarginaali kasvatti riviruudun alaspain, jolloin
teksti istui 4 px yli laatan keskikohdan. */
margin-bottom: 0;
}
}
/* --- Intro-osio mobiilissa ---
Otsikon ylapuolella oli 66 px (ruudukon 24 px + sarakkeen 48 px) ja
alapuolella 57 px, eli valit olivat lahes yhta suuret ja molemmat liian
isot kapealla ruudulla. Nyt otsikko on selvasti lahempana leipatekstia
kuin kuvaa, jolloin ne lukeutuvat yhteen kuuluvaksi. */
@media (max-width: 767px) {
.intro_media-grid { row-gap: 1.5rem; }
.intro_side { padding-top: 1.5rem; }
/* Lisaspesifisyys: pelkka .intro_statement havisi Webflow-luokalle,
joka piti valin 57 px:ssa. */
.intro_side .intro_statement,
.intro_media-grid .intro_statement { margin-bottom: 1.15rem; }
}
/* --- Suomen Vahvimmat -sertifikaatti footerissa ---
Merkki on valkoinen PNG lapinakyvalla taustalla, joten se istuu
tummaan footeriin sellaisenaan. Pidetaan maltillisen kokoisena: se on
luottamussignaali, ei nostokuva. */
.footer_badge {
display: block;
width: auto;
height: 86px;
margin-top: 1.6rem;
opacity: 0.9;
}
@media (max-width: 767px) {
.footer_badge { height: 72px; margin-top: 1.2rem; }
}
/* --- Autosivun kulurivi hinnan alla ---
Toimituskulut, avausmaksu ja kasittelymaksu ovat pikkupraattia hinnan
vieressa: ne kuuluvat nakya, mutta eivat kilpaile hinnan kanssa. */
#autokulut {
margin: 0.55rem 0 0;
font-size: 0.78rem;
line-height: 1.5;
color: var(--color-smoke);
}
/* Tietosuojaselosteen linkki alapalkissa samaan tyyliin kuin muut. */
.footer_bottom a { color: inherit; transition: color 0.3s; }
.footer_bottom a:hover { color: var(--color-paper); }
/* --- Mobiilivalikon laattojen yhtenaistys ---
Laatat olivat 110–147 px korkeita ja otsikot 16,8–25,6 px, mikä sai
ruudukon nayttamaan sattumanvaraiselta. Nyt neljalla kuvalaatalla on
sama vahimmaiskorkeus ja kaksi kokoa: paalaatta ja muut. Overlayn
pystypadding on symmetrinen, jolloin sisalto asettuu keskelle eika
paina alareunaa. */
@media (max-width: 767px) {
.nav_overlay {
padding-top: 3.9rem;
padding-bottom: 3.9rem;
}
/* Sub-laattojen alateksti kietoutuu kahdelle riville, joten ne asettuvat
141 px:iin. Sama luku annetaan kaikille, jolloin neljä kuvalaattaa ovat
tasan yhtä korkeat. Overlayn paddingista otetaan vastaavasti pois. */
.nav_overlay-grid .is-menu-hero,
.nav_overlay-grid .is-menu-sub1,
.nav_overlay-grid .is-menu-sub2,
.nav_overlay-grid .is-menu-featured { min-height: 141px; }
.nav_overlay-grid .is-menu-hero .bento_tile-title { font-size: 1.5rem; }
.nav_overlay-grid .is-menu-sub1 .bento_tile-title,
.nav_overlay-grid .is-menu-sub2 .bento_tile-title,
.nav_overlay-grid .is-menu-featured .bento_tile-title { font-size: 1.15rem; }
.nav_overlay-grid .is-menu-hero .bento_tile-desc,
.nav_overlay-grid .is-menu-sub1 .nav_overlay-meta,
.nav_overlay-grid .is-menu-sub2 .nav_overlay-meta,
.nav_overlay-grid .is-menu-featured .nav_overlay-meta {
font-size: 0.82rem;
line-height: 1.45;
}
/* Kapealla ruudulla kuvalaatoissa on tilaa vain otsikolle: alatekstit
puristuivat kolmelle riville ja veivat kuvalta tilan. */
.nav_overlay .bento_tile-desc,
.nav_overlay .nav_overlay-meta { display: none; }
/* Kolmen napin rivi: teksti tasan laatan keskelle molempiin suuntiin. */
.nav_overlay .nav_overlay-row .bento_tile { min-height: 52px; }
.nav_overlay .nav_overlay-row .bento_tile-footer { margin: 0; align-items: center; }
/* line-height 1.25 jatti kirjainten musteen 4 px ylakenoon laatan
keskikohdasta; ykkosella laatikko vastaa kirjainten korkeutta. */
.nav_overlay .nav_overlay-row .bento_tile-title { line-height: 1; }
}
/* ============================================================
HERON AUTO ESIIN — 6.8.2026
Valokuvaherossa auto ja ymparisto ovat samassa kuvassa, joten
autoa ei voi valaista omana kerroksenaan kuten irtileikatussa
versiossa. Erottelu tehdaan neljalla asialla:
1) .hero_ground on jo terava kopio samasta kuvasta, maskattuna
auton kohdalle. Se saa nyt OMAN, vahvemman saatonsa —
sama asia kuin valokuvaajan dodge-maski.
2) pohjakerros vaimennetaan, jolloin ero on se joka nakyy.
3) vinjetti keskitetaan autoon (oli 48 % / 66 %, auto on
61,4 % / 62,8 %) ja syvennetaan.
4) auton ympari maalataan lampiman valon rengas, jonka
keskusta on lapinakyva — auto ei sameene, mutta siluetti
irtoaa tummasta ymparistosta.
Ero autokerroksen ja pohjan valilla EI saa olla suuri: maski
liukuu 30 %:sta 100 %:iin, ja liian iso hyppy nakyisi
valorenkaana eika valaistuksena.
============================================================ */
/* 1. Autokerros: kirkkaampi, kontrastikkaampi ja hitusen lampimampi. */
.section_hero.is-spotlight .hero_ground {
filter: brightness(1.06) contrast(1.15) saturate(0.98) sepia(0.07) hue-rotate(-8deg);
}
/* 2. Ymparisto vetaytyy (oli 0.94 / 1.04 / 0.82). */
.section_hero.is-spotlight .hero_backdrop img {
filter: brightness(0.87) contrast(1.02) saturate(0.74);
}
/* 3. Vinjetti auton ympari: keskitetty autoon ja syvennetty. */
.section_hero.is-spotlight .hero_backdrop::after {
background:
/* Otsikon taakse vasempaan laitaan. Kevennetty 0,86 -> 0,58: laita oli
niin tumma etta taustakuva katosi siita kokonaan. Otsikko on iso ja
valkoinen, joten se kestaa taman hyvin. */
linear-gradient(102deg,
rgba(6, 5, 5, 0.58) 0%,
rgba(6, 5, 5, 0.4) 24%,
rgba(6, 5, 5, 0.14) 48%,
rgba(6, 5, 5, 0) 72%),
/* Auton ymparys tummenee reunoja kohti */
radial-gradient(52% 44% at 61.4% 57.8%,
rgba(6, 5, 5, 0) 0%,
rgba(6, 5, 5, 0) 34%,
rgba(6, 5, 5, 0.3) 68%,
rgba(6, 5, 5, 0.6) 100%),
/* Ylareuna navia varten ja alareuna taglinea varten */
linear-gradient(to bottom,
rgba(6, 5, 5, 0.55) 0%,
rgba(6, 5, 5, 0.12) 22%,
rgba(6, 5, 5, 0.1) 52%,
rgba(6, 5, 5, 0.55) 82%,
rgba(6, 5, 5, 0.82) 100%);
}
/* 4. Lampiman valon rengas. Tama on section-tason ::after (taso 2),
eli KAIKEN paalla — myos teravan autokerroksen (taso 1). Siksi
keskusta on taysin lapinakyva: muuten se sumentaisi auton. */
.section_hero.is-spotlight::after {
background:
radial-gradient(46% 40% at 61.4% 56%,
rgba(255, 243, 224, 0) 0%,
rgba(255, 243, 224, 0) 30%,
rgba(255, 240, 216, 0.085) 52%,
rgba(255, 238, 212, 0.048) 70%,
rgba(255, 238, 212, 0) 88%),
linear-gradient(to top,
rgba(6, 5, 5, 0.75) 0%,
rgba(6, 5, 5, 0.28) 14%,
transparent 30%);
}
/* Mobiilissa hero on yksi valmiiksi sumennettu pystykuva eika erillista
teravaa autokerrosta ole, joten dodge-maskia ei voi tehda. Auto istuu
kuvassa n. 46 %:n korkeudella.
::before on mobiilissa muuten pois kaytosta (content: none), joten se
otetaan tahan valokerrokseksi: screen-sekoitus kayttaytyy valona eika
maalina, eli mustan auton kiillot nousevat mutta lakka ei harmaannu.
HUOM: ::before perii ylempaa backdrop-filterin ja maskin, jotka on
nollattava — muuten kaista sumenisi ja maski leikkaisi valon pois. */
@media (max-width: 767px) {
.section_hero.is-spotlight .hero_backdrop::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
-webkit-mask-image: none;
mask-image: none;
mix-blend-mode: screen;
/* Leveys 120 % = vaakareunat jaavat ruudun ULKOPUOLELLE, joten
soikion reunaa ei voi nahda renkaana. Vain pysty falloff jaa
nakyviin, ja se lukee valokaistana. Useampi vaihe pyoristaa
liu'un molemmat paat — kolmella vaiheella reuna erottui. */
background: radial-gradient(120% 32% at 50% 47%,
rgba(255, 246, 232, 0.16) 0%,
rgba(255, 246, 232, 0.118) 38%,
rgba(255, 246, 232, 0.066) 60%,
rgba(255, 246, 232, 0.026) 80%,
rgba(255, 246, 232, 0.007) 92%,
rgba(255, 246, 232, 0) 100%);
}
/* Desktopin valorengas POIS mobiilista: se on keskitetty desktop-
rajauksen autoon (61,4 % / 61 %), ja kapealla ruudulla auto on
50 % / 46 %:ssa — rengas osui viereen ja sen reuna nakyi. */
.section_hero.is-spotlight::after {
background: linear-gradient(to top,
rgba(6, 5, 5, 0.75) 0%,
rgba(6, 5, 5, 0.28) 14%,
transparent 30%);
}
/* Tummennukset kevennetty auton kaistalta: pystyliuku oli 0,34 / 0,30
ja lisaamani vinjetti 0,34, mikä yhdessa painoi mustan auton
lukukelvottomaksi. Ylä- ja alareuna pysyvat tummina tekstia varten. */
.section_hero.is-spotlight .hero_backdrop::after {
background:
radial-gradient(132% 56% at 50% 46%,
rgba(6, 5, 5, 0) 0%,
rgba(6, 5, 5, 0) 46%,
rgba(6, 5, 5, 0.06) 62%,
rgba(6, 5, 5, 0.14) 78%,
rgba(6, 5, 5, 0.22) 92%,
rgba(6, 5, 5, 0.26) 100%),
/* Otsikko on 18-31 %:n kohdalla. Aiempi liuku oli siella jo 0,19,
eli tummennus loppui liian aikaisin ja otsikon kontrasti katosi
kun mobiilikuvaa kirkastettiin. Lasku venytetaan 40 %:iin asti,
jolloin otsikon takana on 0,54-0,32 mutta auton kaista
(46-58 %) jaa yha vaaleaksi. */
linear-gradient(to bottom,
rgba(6, 5, 5, 0.7) 0%,
rgba(6, 5, 5, 0.54) 18%,
rgba(6, 5, 5, 0.34) 30%,
rgba(6, 5, 5, 0.19) 40%,
rgba(6, 5, 5, 0.15) 52%,
rgba(6, 5, 5, 0.64) 78%,
rgba(6, 5, 5, 0.9) 100%);
}
}
/* ============================================================
YHTEYSTIETOSIVUN SPLIT-ASETTELU — 6.8.2026
Otsikko + liikekuva vierekkain, vali, sitten kartta vasemmalla ja
kayntiosoite/yhteys/aukioloajat oikealla. Saannot ovat taalla eivatka
sivuembedissa, koska sama asettelu on seka /yhteystiedot- etta
/kontakt-sivulla — kahdessa embedissa ne ehtisivat eriytya.
============================================================ */
.contact_split {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(2rem, 4.5vw, 5rem);
align-items: center;
}
.contact_split-media { border-radius: var(--radius-card); overflow: hidden; }
.contact_split-media img {
display: block;
width: 100%;
aspect-ratio: 5 / 4;
object-fit: cover;
/* Liikkeen valokyltti on kuvassa n. 53 %:n korkeudella; 58 % tuo sen
vaakarajauksen keskelle. */
object-position: center 58%;
}
.contact_gap { height: clamp(3.5rem, 7vw, 7rem); }
.contact_visit {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(2rem, 4.5vw, 5rem);
align-items: start;
}
/* Kartta on muualla 16:10; tassa se on tekstipalstan parina, joten
4:3 pitaa palstat suunnilleen samankorkuisina. */
.contact_visit .contact_map { aspect-ratio: 4 / 3; }
.contact_visit .contact_info-list { margin-top: 0; }
@media (max-width: 991px) {
.contact_split,
.contact_visit { grid-template-columns: 1fr; gap: 2.4rem; }
/* Kapealla ruudulla osoite ja aukioloajat ovat tarkeampia kuin kartta,
joten kartta siirtyy niiden alle vaikka se on DOM:issa ensin. */
.contact_visit-map { order: 2; }
.contact_split-media img { aspect-ratio: 16 / 10; }
}
/* ============================================================
AUTOSIVUN MYYJAKORTIT — 6.8.2026
Sijainti on sticky-kortin pohjalla nappien jalkeen: siina kohtaa
kavija on juuri nahnyt hinnan ja toimintonapit, eli paatos ottaa
yhteytta syntyy siina. Lohko on tarkoituksella tiivis (kaksi rivia
+ sahkoposti) — kortti on sticky, ja jos se kasvaa ruutua
korkeammaksi, kiinnitys lakkaa toimimasta.
.auto_card-luokat tulevat Webflow'sta eivatka nay tassa tiedostossa,
joten tama lohko on tyylitelty omavaraisesti muuttujilla.
============================================================ */
.auto_sellers {
margin-top: 1.5rem;
padding-top: 1.35rem;
border-top: 1px solid var(--line-dark);
}
.auto_sellers-label {
margin-bottom: 0.9rem;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-smoke);
}
.auto_seller {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
color: var(--color-paper);
text-decoration: none;
}
.auto_seller-avatar {
flex: none;
width: 40px; height: 40px;
border-radius: 50%;
object-fit: cover;
/* Sam on lapinakyva PNG-irtileikkaus: ilman taustavaria ympyra jaisi
vajaaksi ja kuva kelluisi. */
background: var(--color-carbon, #1a1918);
}
.auto_seller-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.auto_seller-name { font-size: 0.92rem; line-height: 1.3; }
.auto_seller-phone {
font-size: 0.85rem;
color: var(--color-smoke);
transition: color 0.3s var(--ease-luxe);
}
.auto_seller:hover .auto_seller-phone { color: var(--color-champagne); }
.auto_sellers-mail {
display: inline-block;
margin-top: 0.7rem;
font-size: 0.82rem;
color: var(--color-smoke);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.3s var(--ease-luxe);
}
.auto_sellers-mail:hover { color: var(--color-champagne); }
/* ============================================================
ESITTELYKARUSELLIN NYKIMINEN — 6.8.2026
Kortissa oli KAKSI paallekkaista sumennusta samasta kuvasta:
.showcase_card-wash on 136 %:n kokoinen taysikokoinen CMS-kuva
filter: blur(46px):lla, ja .showcase_card-body sumensi saman
kuvan uudelleen backdrop-filter: blur(26px):lla. Molemmat
rasteroidaan uudelleen aina kun kortti liikkuu — eli sivua
vieritettaessa ja raitaa raahatessa. Viisi korttia x kaksi
sumennusta oversized-pinnalla riittaa nykimaan.
Ulkoasu sailyy: wash on jo 0,3:n opacityllä pelkka varivihje,
ja sen sumentaminen TOISEEN kertaan ei lisannyt siihen mitaan.
============================================================ */
.showcase_card-wash {
/* 46 -> 26 px. Sumennuksen hinta kasvaa sateen mukana, ja tassa
kokoluokassa eroa ei erota 0,3:n opacityn takaa. */
filter: blur(26px) saturate(0.75) brightness(0.62);
}
.showcase_card-body {
/* backdrop-filter pois: se luki jo valmiiksi sumeaa pintaa.
Liuku hieman tummemmaksi, jotta tekstin kontrasti sailyy
tasmalleen entisellaan ilman sumennusta. */
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: linear-gradient(to bottom, rgba(12, 11, 11, 0.58), rgba(12, 11, 11, 0.78));
}
/* Rajaa uudelleenpiirto kortin sisalle: kortilla on jo
overflow: hidden ja isolation: isolate, joten paint-containment
ei muuta mitaan visuaalisesti. */
.showcase_card { contain: paint; }
/* ============================================================
PALJASTUKSEN TAYDELLINEN OHITUS — 6.8.2026
Paljastus ei ole kiinni LUOKASSA vaan data-reveal-img
-ATTRIBUUTISSA: sita kayttavat seka CSS (piilotus ennen JS:aa)
etta main.js (querySelectorAll('[data-reveal-img]')). Luokan
nimen vaihtaminen ei siis poista mitaan.
Arvo "fade" tarkoittaa main.js:ssa "ei animaatiota lainkaan",
mutta CSS piilotti elementin silti ennen kuin JS ehti purkaa
sen — ja juuri se nakyi pyyhkaisyna. Nyt "fade" ohittaa myos
CSS-piilotuksen, jolloin kuva on paikallaan ensimmaisesta
kehyksesta lahtien vaikka GSAP ei koskaan ajaisi.
============================================================ */
html.js [data-reveal-img="fade"] {
clip-path: none !important;
opacity: 1 !important;
}
html.js [data-reveal-img="fade"] img {
transform: none !important;
}
/* Paluulinkki autosivulla: kulta hoverissa, sama ele kuin muualla. */
.auto_back { transition: color 0.3s var(--ease-luxe); }
.auto_back:hover { color: var(--color-champagne); }
/* ============================================================
VALIKON LAATAT MOBIILISSA — 6.8.2026
============================================================ */
@media (max-width: 767px) {
/* Verho oli 0,99 / 0,93 / 0,72 / 0,50 eli kuva katosi lahes kokonaan.
Alatekstit ovat tassa koossa piilossa, joten luettavaksi tarvitsee
pitaa vain otsikko — ja sille riittaa tiivis kaista alareunassa.
Otsikoilla on lisaksi text-shadow, joka kantaa loput. */
.nav_overlay .bento_tile-media::after {
background: linear-gradient(to top,
rgba(6, 5, 5, 0.88) 0%,
rgba(6, 5, 5, 0.6) 34%,
rgba(6, 5, 5, 0.28) 66%,
rgba(6, 5, 5, 0.1) 100%);
}
}
/* --- Laattojen rajaukset ---
Kaikki kolme ovat pysty- tai laajakuvia hyvin matalassa laatikossa,
joten object-position ratkaisee mita niista nakyy. */
/* Vaihtoautot: autot olivat kiinni ylareunassa. Pienempi luku nostaa
rajauskaistaa kuvassa ylospain, jolloin autot laskeutuvat laatalla. */
.nav_overlay .is-menu-hero .bento_tile-media img { object-position: 50% 58%; }
/* Mika on Prestige: valokyltti on kuvassa n. 55 %:n korkeudella, mutta
rajaus oli 28 %:ssa eli logon ylapuolella — laatalla nakyi pelkka
seinaa. 56 % tuo kyltin kaistan keskelle. */
.nav_overlay .is-menu-sub2 .bento_tile-media img { object-position: 50% 56%; }
/* Esittelyssa: auto on kuvassa keskella ja jai kokonaan otsikkotekstin
taakse. Isompi luku siirtaa kaistaa alaspain kuvassa, jolloin auto
nousee laatalla ylemmas tekstin ylapuolelle. */
.nav_overlay .is-menu-featured .bento_tile-media img { object-position: 50% 72%; }
/* ============================================================
AUTOSIVUN TIEDOT KAHTEEN SARAKKEESEEN KAPEALLA — 6.8.2026
auto-fit + minmax hoitaa responsiivisuuden ilman erillisia
breakpointteja: kaksi saraketta syntyy vasta kun 2 x 8,5 rem +
vali mahtuu, ja kaikkein kapeimmilla ruuduilla rivit pinoutuvat
itsestaan yhteen sarakkeeseen.
============================================================ */
/* Ei rajattu breakpointtiin: sticky-kortti rajautui 14 tuuman laptopilla
"Varaa auto" -napin kohdalta, ja kahdeksan yksisarakkeista rivia oli
suurin yksittainen syy. Kahdessa sarakkeessa kortti lyhenee n. 180 px.
auto-fit hoitaa kapeat ruudut: yksi sarake kun 2 x 8,5 rem ei mahdu. */
.auto_specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: 1.25rem 1.5rem;
}
/* Valikon laattojen verho DESKTOPILLA erikseen: siella laatoissa on myos
alatekstit, jotka eivat erottuneet kuvasta. Mobiilissa alatekstit ovat
piilossa, joten siella riittaa selvasti kevyempi verho (ks. edella
max-width: 767px). Nama kaksi saatoa ovat siis tarkoituksella eri. */
@media (min-width: 768px) {
.nav_overlay .bento_tile-media::after {
background: linear-gradient(to top,
rgba(8, 7, 7, 0.96) 0%,
rgba(8, 7, 7, 0.86) 26%,
rgba(8, 7, 7, 0.52) 52%,
rgba(8, 7, 7, 0.16) 78%,
transparent 100%);
}
}
/* ============================================================
VALIKKO MATALALLA LÄPPÄRINÄYTÖLLÄ — 6.8.2026
Alarivin laatat ja niiden ↗-nuolet leikkautuivat n. 768 px
korkealla ruudulla. Kaksi eri syytä:
1) .nav_overlay-grid rivit ovat 64px / minmax(200px,1fr) /
minmax(140px,20vh) ja ruudukon min-height on 100svh - 12rem.
Matalalla ruudulla 1fr-raita kutistuu vaikka alarivi ei, ja
koko ruudukko jää silti korkeammaksi kuin sille jäävä tila.
2) .bento_tile { min-height: 150px } on SUUREMPI kuin alarivin
140px raita, joten laatat vuotivat ruudukon ulkopuolelle —
juuri sen verran että nuolet menivät Sulje-napin alle.
Tila otetaan ylärivin Vaihtoautot- ja Esittelyssä-laatoista
(1fr-raita), koska ne ovat kuvalaattoja eivätkä lyhene teksti-
sisällöstä. Alarivi saa kiinteän korkeuden, jotta se ei enää
riipu 20vh:sta.
============================================================ */
/* Rajattu 992 pikselista ylospain: alle sen (>= 768 px) valikko on jo
pinottu ja vieritettava (max-width: 991px -lohko), ja siella
grid-template-rows on `none` — jos tama sailisi 768:sta alkaen, se
palauttaisi kolmen raidan ruudukon ja rikkoisi pinotun asettelun. */
@media (min-width: 992px) and (max-height: 820px) {
.nav_overlay {
/* 5,75 rem = 92 px: navipalkin alalaita on 81 px:ssä, ja koska
ruudukko täyttää jäljelle jäävän tilan tarkalleen, keskityksestä
ei jää yhtään pelivaraa kuten oletustilassa — 3,25 rem jätti
ylärivin (some, osoite ja isojen laattojen ylälaita) navin alle. */
padding-top: 5.75rem;
/* Alareunaan jätetään Sulje-napin verran + väli, muuten alarivin
nuoli menee napin alle. */
padding-bottom: 5rem;
}
.nav_overlay-grid {
grid-template-rows: 54px minmax(130px, 1fr) 148px;
min-height: calc(100svh - 10.75rem);
gap: 6px;
}
/* Tämä on korjauksen ydin: ilman tätä alarivin laatta on 150 px
vaikka raita on 126 px, jolloin nuoli jää ruudukon alapuolelle. */
.nav_overlay .bento_tile { min-height: 0; }
.nav_overlay-row { gap: 6px; }
/* Isot kuvalaatat: hieman tiiviimpi sisennys ja pienempi otsikko,
jotta teksti + nuoli mahtuvat lyhentyneeseen laattaan. */
.nav_overlay-grid .is-menu-hero,
.nav_overlay-grid .is-menu-featured,
.nav_overlay-grid .is-menu-sub1,
.nav_overlay-grid .is-menu-sub2 { padding: 1.15rem; }
.nav_overlay .is-menu-hero .bento_tile-title { font-size: clamp(1.6rem, 2.3vw, 2.3rem); }
.nav_overlay .is-menu-sub1 .bento_tile-title,
.nav_overlay .is-menu-sub2 .bento_tile-title { font-size: clamp(1.15rem, 1.55vw, 1.45rem); }
.nav_overlay .bento_tile-desc { margin-top: 0.35rem; }
.nav_overlay .bento_tile-footer { gap: 0.5rem; }
/* Alarivin pikkulaatat vielä hieman tiiviimmiksi kuin perusversiossa,
jotta ne mahtuvat 140 px raitaan. */
.nav_overlay-row .bento_tile.is-plain { padding: 0.85rem; }
.nav_overlay-row .bento_tile.is-plain > .bento_tile-icon {
width: 30px; height: 30px; margin-bottom: 0.6rem;
}
.nav_overlay-row .bento_tile.is-plain > .bento_tile-icon svg { width: 15px; height: 15px; }
.nav_overlay-row .bento_tile-footer { gap: 0.4rem; }
/* Sulje-nappi pienemmäksi ja lähemmäs alareunaa. */
.nav_overlay-close {
bottom: 0.9rem;
padding: 0.6rem 1.3rem;
font-size: 0.7rem;
gap: 0.7rem;
}
.nav_overlay-close .close-x { font-size: 0.8rem; }
}
/* ============================================================
ETUSIVUN KARUSELLIKORTIT PIENILLÄ RUUDUILLA — 6.8.2026
Kortti on mobiilissa 84–88 vw leveä, jolloin 16/10-kuva vie
yksin yli puolet ruudun korkeudesta ja kortti jatkuu taitteen
alle. 16/12 (= 4/3) madaltaa kuvaa n. 17 %, jolloin otsikko,
tekniset tiedot ja hinta mahtuvat samaan näkymään.
============================================================ */
/* Mobiilissa ei enaa omaa suhdetta: perusarvo 16/9 on jo matalampi kuin
entinen 16/10, eli molemmat paatyvat samaan lopputulokseen. */
/* ============================================================
AUTOSIVUN STICKY-KORTTI MATALALLA LÄPPÄRINÄYTÖLLÄ — 6.8.2026
14 tuuman läppärillä (esim. 1280 × 660) kortti oli 692 px korkea
ja sticky-offset 120 px, eli alalaita jäi 152 px ruudun
ulkopuolelle — "Varaa auto" ei ollut koskaan näkyvissä eikä
klikattavissa, koska kiinnitetty elementti ei vierry mukana.
Isoin yksittäinen säästö on teknisten tietojen kolmas sarake:
minmax 8,5 rem → 7,25 rem mahtuu 423 px leveään korttiin, jolloin
kahdeksan riviä menee neljästä rivistä kolmeen (−76 px).
Sama korkeusraja (820 px) kuin valikossa, jotta sivusto vaihtaa
"matalan näytön" tilaan kerralla eikä osissa.
============================================================ */
@media (min-width: 992px) and (max-height: 820px) {
.auto_card {
top: 6rem;
padding: 1.25rem;
gap: 1rem;
/* Varmistus kaikkein matalimmille ruuduille: jos kortti ei
tiivistettynäkään mahdu, se saa oman vierityksensä sen sijaan
että alalaita katoaisi kokonaan. */
max-height: calc(100svh - 7.5rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.auto_price-row { padding-bottom: 0.9rem; }
.auto_specs {
grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
gap: 0.85rem 1rem;
}
.auto_actions { padding-top: 0.9rem; gap: 0.55rem; }
}
/* ============================================================
RAHOITUSLASKURI JA -HAKEMUS — 6.8.2026
Laskurin merkkaus ja perustyylit ovat autosivun HtmlEmbedissä
(.rlask / .rhak). Embedin