/* Loovl PPF-sivu – the PPF service page in the shape of tesla.com/fi_fi/modely (client's request 25.10.2026). * Sizes are Tesla's, measured at 1478 px (restyling.fi/ppf-sivut/CLAUDE.md, «Tesla – замеры»): media 2:1 with 48 px * sides, text column = 12-column grid without the outer columns, headings 48/56, text 20/28, cards #f4f4f4, buttons * 200×40 blue #3e6ae1 / white. The font is the site's (Tesla's Universal Sans is not free to use). * Colors follow the site theme: dark by default, html[data-teema="vaalea"] – Tesla's white. * The theme's uusi.css is printed after this file and styles «body.rp-uusi #main h2» – hence the #main prefix * and !important on heading fonts. */ #main .lps{ --lps-tausta:var(--rp-tausta,#0b0b0c); --lps-korkea:#ffffff; --lps-matala:#d0d1d2; /* 28.10.2026 brighter (was #b4b5b8), as the light theme's darker grey */ --lps-kortti:#17171a; --lps-raja:#393c41; --lps-ohjain:#232327; --lps-ohjain-teksti:#ececec; --lps-piste:#ffffff; --lps-piste-pois:rgba(255,255,255,.3); --lps-sininen:#3e6ae1; --lps-sininen-2:#3457b1; --lps-reuna:48px; /* media from the window edge */ --lps-rako:24px; /* grid gap */ --lps-vali:152px; /* space between blocks */ --lps-sisennys:calc((100% - 11 * var(--lps-rako)) / 12 + var(--lps-rako)); /* one grid column + gap */ position:relative;margin:0;background:var(--lps-tausta);color:var(--lps-matala); font-family:var(--rp-fontti,Montserrat,Arial,sans-serif);-webkit-font-smoothing:antialiased; } html[data-teema="vaalea"] #main .lps{ --lps-tausta:#ffffff; --lps-korkea:#171a20; --lps-matala:#393c41; /* 28.10.2026 darker (was Tesla's #5c5e62): our font is thinner, the grey read faint – IMG_6917 */ --lps-kortti:#f4f4f4; --lps-raja:#d0d1d2; --lps-ohjain:#f0f0f0; --lps-ohjain-teksti:#393c41; --lps-piste:#171a20; --lps-piste-pois:rgba(23,26,32,.22); } /* «100% Width» pages keep 30 px at the sides (#main.width-100) – this page runs edge to edge, as Tesla's. */ body.lps-sivu #main,body.lps-sivu #main.width-100{padding:0} body.lps-sivu #main > .fusion-row{max-width:100%;padding-left:0;padding-right:0} #main .lps *,#main .lps *::before,#main .lps *::after{box-sizing:border-box} #main .lps [hidden]{display:none !important} #main .lps figure,#main .lps p,#main .lps h1,#main .lps h2,#main .lps h3,#main .lps dl,#main .lps dt,#main .lps dd,#main .lps ul,#main .lps li{margin:0;padding:0} #main .lps ul{list-style:none} #main .lps img{max-width:none} /* ---- Type --------------------------------------------------------------------------------------------- */ /* 28.10.2026, client's video IMG_6917.MOV: «Tesla's headings are bolder, one spends less energy to see the order – ours 40–50 % bolder; the grey text darker, as visible as Tesla's». Tesla's numbers are 500 / 400, but RP Sans at 500 is thinner than their Universal Sans: headings, card titles, subheadings and figures 500 → 700, text 400 → 450 and a darker grey (--lps-matala). */ #main .lps .lps-h1,#main .lps .lps-h2{font-family:inherit !important;font-weight:700 !important;font-size:48px !important;line-height:56px !important;letter-spacing:0 !important;text-transform:none !important;color:var(--lps-korkea) !important;margin:0 !important} #main .lps .lps-h3{font-family:inherit !important;font-weight:700 !important;font-size:34px !important;line-height:44px !important;letter-spacing:0 !important;text-transform:none !important;color:var(--lps-korkea) !important;margin:0 !important} #main .lps .lps-p{font-size:20px;line-height:28px;font-weight:450;color:var(--lps-matala)} #main .lps .lps-alaotsikko{font-size:28px;line-height:36px;font-weight:700;color:var(--lps-korkea)} /* ---- Frame and grid --------------------------------------------------------------------------------- */ #main .lps .lps-kehys{width:calc(100% - 2 * var(--lps-reuna));max-width:2464px;margin-inline:auto} /* 28.10.2026, client's video IMG_6919.MOV: «the texts should start from the edge, as Tesla's» – at Tesla text and frame share one line («Muunna autosi teatteriksi»). Text, cards and figures start at the frame's edge; the intro keeps its former line length; a narrow frame (kapea) keeps its text on its own inner line. Phones (< 600) keep 12 px inside the frame. */ #main .lps .lps-tekstialue{margin-inline:0} #main .lps .lps-osio--kapea .lps-tekstialue{margin-inline:var(--lps-sisennys)} #main .lps .lps-p--johdanto{max-width:calc(100% - 2 * var(--lps-sisennys))} #main .lps .lps-osio--kapea .lps-p--johdanto{max-width:none} #main .lps .lps-keski{text-align:center} #main .lps .lps-osio{padding-bottom:var(--lps-vali)} #main .lps .lps-paneeli{padding-top:48px} #main .lps .lps-paneeli__nimi{font-family:inherit;font-size:28px;line-height:36px;font-weight:700;color:var(--lps-korkea);text-align:center;margin:0 0 48px} #main .lps.lps--js .lps-paneeli__nimi{display:none} /* ---- Buttons and arrows ------------------------------------------------------------------------------ */ #main .lps .lps-napit{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px} /* Tesla's buttons are 200 px; our Finnish labels are longer – the same height, at least 200 px wide, one line. */ #main .lps a.lps-nappi{display:inline-flex;align-items:center;justify-content:center;min-width:200px;min-height:40px;padding:4px 24px;border-radius:4px;white-space:nowrap; font-family:inherit;font-size:14px;line-height:20px;font-weight:500;text-align:center;text-decoration:none;transition:background-color .33s,color .33s} #main .lps a.lps-nappi--ensi{background:var(--lps-sininen);color:#fff} #main .lps a.lps-nappi--ensi:hover,#main .lps a.lps-nappi--ensi:focus-visible{background:var(--lps-sininen-2);color:#fff} #main .lps a.lps-nappi--toinen{background:#fff;color:#393c41} #main .lps a.lps-nappi--toinen:hover,#main .lps a.lps-nappi--toinen:focus-visible{background:#eeeeee;color:#171a20} #main .lps a.lps-nappi:focus-visible,#main .lps button:focus-visible{outline:2px solid var(--lps-sininen);outline-offset:3px} #main .lps .lps-nuoli{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:4px;cursor:pointer; background:rgba(255,255,255,.75);color:#393c41;transition:background-color .33s,opacity .33s} #main .lps .lps-nuoli:hover{background:#fff} #main .lps .lps-nuoli svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #main .lps .lps-nuoli[disabled]{opacity:0;pointer-events:none} #main .lps .lps-alussa .lps-nuoli{transition:none} #main .lps .lps-pisteet{display:flex;justify-content:center;gap:16px} /* 05.11.2026, was 8 px: the zones of 24 px of neighbouring dots overlapped (WCAG 2.2, 2.5.8) */ #main .lps .lps-piste{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--lps-piste-pois);cursor:pointer;transition:background-color .33s} #main .lps .lps-piste::before{content:"";position:absolute;inset:-8px} #main .lps .lps-piste[aria-current="true"]{background:var(--lps-piste)} /* ---- 1. Hero carousel -------------------------------------------------------------------------------- */ /* The photos are placed by «Whole car» below (after section 6). Height: 85svh as Tesla, at least 40vw (a wide short * screen would shrink the car), never more than the window. */ #main .lps .lps-hero{position:relative;height:max(460px, min(max(calc(85svh - 90px), 40vw), calc(100svh - 90px)));overflow:hidden;background:#000; container-type:size;--lps-piste:#fff;--lps-piste-pois:rgba(255,255,255,.45); --lps-ay:215px;--lps-aa:56px;--lps-ak:1;--lps-kh:.275;--lps-kp:.1} #main .lps .lps-hero__rata{display:flex;height:100%;transition:transform .7s cubic-bezier(.5,0,0,.75)} #main .lps .lps-hero__dia{position:relative;flex:0 0 100%;height:100%;overflow:hidden} #main .lps .lps-hero__kuva{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #main .lps .lps-hero__dia::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 38%,rgba(0,0,0,0) 72%,rgba(0,0,0,.35) 100%)} #main .lps .lps-hero__sisalto{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;padding:55px 24px 64px;text-align:center} #main .lps .lps-hero__otsikko{font-size:56px;line-height:64px;font-weight:500;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.25)} #main .lps .lps-hero__nuoli{position:absolute;z-index:2;top:50%;margin-top:-20px} #main .lps .lps-hero__nuoli.lps-nuoli--ed{left:var(--lps-reuna)} #main .lps .lps-hero__nuoli.lps-nuoli--seur{right:var(--lps-reuna)} #main .lps .lps-hero__pisteet{position:absolute;z-index:2;left:0;right:0;bottom:24px} /* The client: «on the computer these buttons can be a bit bigger» – 48 px instead of Tesla's 40 (phones keep 40). */ #main .lps .lps-hero a.lps-nappi{min-width:240px;min-height:48px;padding:4px 28px;font-size:16px;line-height:22px} /* A short window (laptop 1366×657): a smaller title leaves the car more room. After the rules above – it overrides them. */ @media (min-width:600px) and (max-height:760px){ #main .lps .lps-hero{--lps-ay:180px;--lps-aa:48px} #main .lps .lps-hero__sisalto{padding-top:36px} #main .lps .lps-hero__otsikko{font-size:44px;line-height:52px} } /* ---- 2. «Tutustu»: heading and a strip of cards ----------------------------------------------------- */ #main .lps .lps-tutustu{padding:72px 0 var(--lps-vali)} #main .lps .lps-tutustu .lps-p--keski{margin-top:4px} /* 27.10.2026, client's video IMG_6912.MOV: «on Tesla the five values stand symmetric, ours lean right». The strip is as wide * as the media frames below (--lps-reuna from both edges) and its view always holds whole cards, so the margins are equal: * five in one row from 1280 px (at most Tesla's 428 px, centred), three in view on 900–1279, two on 600–899; phones keep * the strip that peeks at the next card. Was: Tesla's strip from one grid column, cards 428 px running off the right edge * (the owner's 110 % zoom gave a 1396 px page – the first limit, 1400, missed it). */ #main .lps .lps-nauha{position:relative;margin-top:48px} #main .lps .lps-nauha__rata{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none; margin-inline:var(--lps-reuna)} #main .lps .lps-nauha__rata::-webkit-scrollbar{display:none} #main .lps .lps-nauha__kortti{position:relative;flex:0 0 calc((100% - 2 * 18px) / 3);aspect-ratio:428 / 498;overflow:hidden;border-radius:8px;background:#111; scroll-snap-align:start;container-type:inline-size} #main .lps .lps-nauha__kortti .lps-kuva{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s} #main .lps .lps-nauha__kortti:hover .lps-kuva{transform:scale(1.03)} /* 27.10.2026, client's video IMG_6912.MOV: the titles «are hard to read» – bolder, a soft shadow under the letters and a deeper * shade from the bottom up to the title («a vignette, up to here»). Was weight 500 and .55 black from 55 %. */ #main .lps .lps-nauha__kortti::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.35) 68%,rgba(0,0,0,.78) 100%)} /* The title follows the card width: Tesla's 34 px on a 428 px card, smaller on a smaller one (bold «Helppohoitoisuus» must fit). */ #main .lps .lps-nauha__otsikko{position:absolute;z-index:1;left:clamp(14px, 5.6cqi, 24px);right:clamp(14px, 5.6cqi, 24px);bottom:clamp(16px, 6.5cqi, 28px); font-size:clamp(16px, 7.9cqi, 34px);line-height:1.18;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35)} /* The arrows at the middle of the cards: the strip's height less the dots under it (24 + 8 px). */ #main .lps .lps-nauha__nuoli{position:absolute;z-index:2;top:calc((100% - 32px) / 2 - 20px);background:var(--lps-ohjain);color:var(--lps-ohjain-teksti)} #main .lps .lps-nauha__nuoli:hover{background:var(--lps-ohjain)} #main .lps .lps-nauha__nuoli.lps-nuoli--ed{left:var(--lps-reuna)} #main .lps .lps-nauha__nuoli.lps-nuoli--seur{right:var(--lps-reuna)} #main .lps .lps-nauha__pisteet{margin-top:24px} @media (min-width:1280px){ #main .lps .lps-nauha__rata{justify-content:center} #main .lps .lps-nauha__kortti{flex:0 1 428px;min-width:0} } /* ---- 3. «Koe»: the surface switch over a big picture ------------------------------------------------- */ #main .lps .lps-koe{position:relative;height:842px;overflow:hidden;background:#000;scroll-margin-top:80px; --lps-ay:220px;--lps-aa:280px;--lps-ak:1;--lps-kh:.275;--lps-kp:.1} #main .lps .lps-koe__kuvat,#main .lps .lps-koe__kuva{position:absolute;inset:0} #main .lps .lps-koe__kuvat{container-type:size} #main .lps .lps-koe__kuva{opacity:0;transition:opacity .5s} #main .lps .lps-koe__kuva .lps-kuva{width:100%;height:100%;object-fit:cover} #main .lps[data-valinta="gloss"] .lps-koe__kuva[data-valinta="gloss"], #main .lps[data-valinta="matta"] .lps-koe__kuva[data-valinta="matta"], #main .lps[data-valinta="vari"] .lps-koe__kuva[data-valinta="vari"]{opacity:1} #main .lps .lps-koe::before,#main .lps .lps-koe::after{content:"";position:absolute;z-index:1;left:0;right:0;pointer-events:none} /* The shades under the title and the specs stop at the car (27.10.2026: the car stands between them, not under the text). */ #main .lps .lps-koe::before{top:0;height:calc(var(--lps-ay) + 24px);background:linear-gradient(180deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 100%)} #main .lps .lps-koe::after{bottom:0;height:calc(var(--lps-aa) + 24px);background:linear-gradient(0deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.4) 50%,rgba(0,0,0,0) 100%)} #main .lps .lps-koe__yla{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:64px 24px 0;text-align:center} #main .lps .lps-koe .lps-koe__otsikko{color:#fff !important} #main .lps .lps-valitsin{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px;padding:4px;border-radius:8px; background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} #main .lps .lps-valitsin__tausta{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:4px;background:#fff; transition:transform .45s cubic-bezier(.5,0,0,.75)} #main .lps[data-valinta="matta"] .lps-valitsin__tausta{transform:translateX(100%)} #main .lps[data-valinta="vari"] .lps-valitsin__tausta{transform:translateX(200%)} #main .lps .lps-valitsin__nappi{position:relative;z-index:1;min-height:44px;padding:4px 22px;border:0;border-radius:4px;background:none;cursor:pointer; font-family:inherit;font-size:17px;line-height:20px;font-weight:500;color:rgba(255,255,255,.88);white-space:nowrap;transition:color .45s} #main .lps .lps-valitsin__nappi[aria-selected="true"]{color:#171a20} #main .lps .lps-koe__ala{position:absolute;z-index:2;left:var(--lps-reuna);right:var(--lps-reuna);bottom:56px;display:flex;flex-wrap:wrap;align-items:flex-end; justify-content:space-between;gap:24px 48px;padding-inline:calc((100% - 2 * var(--lps-reuna) - 11 * var(--lps-rako)) / 12 + var(--lps-rako))} /* Heavier than Tesla's (client's video IMG_6915, 27.10.2026): the name ~30 % bolder, the variant thicker but lighter than the name, the spec captions brighter – thin letters were lost on the photo. 740 px: at 650 «suojakalvo Matta / Satiini PPF» is 723 px wide, «Auton maalipinnan suojakalvo» 758 – the line still breaks after «maalipinnan», every variant in two lines. */ #main .lps .lps-koe__nimi{max-width:740px;font-size:48px;line-height:56px;font-weight:650;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)} #main .lps .lps-koe__tarkenne{display:none;font-weight:450;font-style:italic;color:rgba(255,255,255,.9)} #main .lps[data-valinta="gloss"] .lps-koe__tarkenne[data-valinta="gloss"], #main .lps[data-valinta="matta"] .lps-koe__tarkenne[data-valinta="matta"], #main .lps[data-valinta="vari"] .lps-koe__tarkenne[data-valinta="vari"]{display:inline} #main .lps .lps-tiedot{display:flex;flex-wrap:wrap;row-gap:16px} #main .lps .lps-tieto{padding:0 32px;border-left:1px solid rgba(255,255,255,.35)} #main .lps .lps-tieto:first-child{padding-left:0;border-left:0} #main .lps .lps-tieto__arvo{font-size:34px;line-height:44px;font-weight:500;color:#fff} #main .lps .lps-tieto__yksikko{margin-left:4px;font-size:20px;line-height:28px} #main .lps .lps-tieto__selite{font-size:15px;line-height:20px;font-weight:500;color:rgba(255,255,255,.9)} /* ---- 4. Blocks of a variant -------------------------------------------------------------------------- */ #main .lps .lps-media{position:relative;overflow:hidden;margin-bottom:48px;border-radius:8px;background:#111} #main .lps .lps-media .lps-kuva,#main .lps .lps-media .lps-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* 28.10.2026, client's video IMG_6916.MOV: «on Tesla the video is lower, one always sees what comes before and after; ours takes the whole screen». Tesla: 2:1 of the width, 850 px from 1920 (tcl-media--height--ultra-wide). Ours: the same, and never more than 70 % of the window – on a 13–15" laptop and a 24" monitor Tesla's frame still fills the screen. The 580 px strips likewise. 🔴 width:100% – with aspect-ratio and a max-height that bites, an auto width shrinks to keep the ratio (1344 instead of 1824). */ #main .lps .lps-media{width:100%} #main .lps .lps-media--iso{aspect-ratio:2 / 1;max-height:min(850px, 70svh)} #main .lps .lps-media--matala{height:580px;max-height:70svh} #main .lps .lps-media--kapea{width:auto;height:580px;max-height:70svh;margin-inline:var(--lps-sisennys)} #main .lps .lps-video{opacity:0;transition:opacity .5s} #main .lps .lps-video.is-on{opacity:1} #main .lps .lps-toisto{position:absolute;z-index:2;left:32px;bottom:32px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:4px; background:rgba(128,128,128,.65);color:#fff;cursor:pointer;transition:background-color .33s} #main .lps .lps-toisto:hover{background:rgba(128,128,128,.85)} #main .lps .lps-toisto svg{width:20px;height:20px;fill:currentColor} #main .lps .lps-toisto__toista{display:none} #main .lps .lps-toisto.is-paused .lps-toisto__tauko{display:none} #main .lps .lps-toisto.is-paused .lps-toisto__toista{display:block} #main .lps .lps-p--johdanto{margin-top:4px} #main .lps .lps-kortit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:64px} /* Four in a row only from 1900 px, below – 2 × 2 (28.10.2026, audit): the Finnish card titles are single long words – «Naarmuuntumissuoja» at 34 px bold is 387 px, a card of four in a row at 1440 has 222 px for text. */ #main .lps .lps-kortit--4{grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:1900px){#main .lps .lps-kortit--4{grid-template-columns:repeat(4,minmax(0,1fr))}} #main .lps .lps-kortit--2{grid-template-columns:repeat(2,minmax(0,1fr))} #main .lps .lps-kortti{padding:32px 24px 40px;border-radius:8px;background:var(--lps-kortti)} #main .lps .lps-kortti .lps-p{margin-top:8px} #main .lps .lps-luvut{display:flex;flex-wrap:wrap;row-gap:24px;margin-top:64px} #main .lps .lps-luku{padding:0 80px;border-left:1px solid var(--lps-raja)} #main .lps .lps-luku:first-child{padding-left:0;border-left:0} #main .lps .lps-luku__arvo{font-size:48px;line-height:56px;font-weight:700;color:var(--lps-korkea)} #main .lps .lps-luku__yksikko{margin-left:4px;font-size:24px;line-height:28px} #main .lps .lps-luku__selite{max-width:320px;margin-top:4px;font-size:20px;line-height:28px;font-weight:500;color:var(--lps-matala)} #main .lps .lps-sarakkeet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:64px} #main .lps .lps-sarake .lps-p{margin-top:8px} #main .lps .lps-jako{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--lps-rako);align-items:start} /* Tesla gives the text 3 columns; our paragraphs are three times longer – 4 columns, the picture 6. */ #main .lps .lps-jako__teksti{grid-column:1 / 6} #main .lps .lps-jako__teksti .lps-p{margin-top:16px} #main .lps .lps-jako__teksti .lps-h2 + .lps-p{margin-top:8px} #main .lps .lps-media--jako{grid-column:6 / 13;aspect-ratio:787 / 528;max-height:70svh;margin:16px 0 0} /* Free-flow carousel: slides start at the text column and run out to the window edge. * .lps-virta pulls itself out of the frame to the full window width; the track's percentage is of that width. */ #main .lps .lps-virta{position:relative;margin:64px calc(-1 * var(--lps-reuna)) 0} #main .lps .lps-virta__rata{display:flex;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none; padding-inline:var(--lps-reuna);scroll-padding-inline:var(--lps-reuna)} /* the first slide at the frame's edge, as the text (28.10.2026) */ #main .lps .lps-virta__rata::-webkit-scrollbar{display:none} #main .lps .lps-virta__dia{flex:0 0 min(84%,1147px);scroll-snap-align:start} #main .lps .lps-media--dia{height:580px;max-height:70svh;margin-bottom:24px} #main .lps .lps-virta__dia .lps-p{max-width:975px;margin-top:8px} #main .lps .lps-virta__nuoli{position:absolute;z-index:2;top:270px} #main .lps .lps-virta__nuoli.lps-nuoli--ed{left:var(--lps-reuna)} #main .lps .lps-virta__nuoli.lps-nuoli--seur{right:var(--lps-reuna)} /* ---- 5. Technical data – dark in both themes --------------------------------------------------------- */ #main .lps .lps-tekniset{padding:104px 0 88px;background:#000;color:#fff} #main .lps .lps-tekniset .lps-tekniset__otsikko{font-family:inherit !important;font-size:28px !important;line-height:36px !important;font-weight:500 !important;letter-spacing:0 !important;color:#fff !important;margin:0 !important} #main .lps .lps-tekniset__ala{margin-top:4px;font-size:20px;line-height:28px;color:#d0d1d2} #main .lps .lps-ryhma{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:32px;padding:40px 0;border-bottom:1px solid #222} #main .lps .lps-ryhma:first-of-type{margin-top:16px} #main .lps .lps-ryhma .lps-ryhma__otsikko{grid-column:1 / -1;margin:0 0 16px !important;font-family:inherit !important;font-size:20px !important;line-height:28px !important;font-weight:500 !important;letter-spacing:0 !important;color:#eeeeee !important} #main .lps .lps-ryhma__kohdat{grid-column:1 / 4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} #main .lps .lps-ryhma__kohta dt{font-size:14px;line-height:20px;font-weight:500;color:#8e8e8e} #main .lps .lps-ryhma__kohta dd{margin-top:2px;font-size:14px;line-height:20px;color:#fff} #main .lps .lps-ryhma__kuva{grid-column:4 / 6;grid-row:2;align-self:center} #main .lps .lps-ryhma__kuva .lps-kuva{display:block;width:100%;height:auto;border-radius:8px; -webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse at center,#000 55%,transparent 100%)} #main .lps .lps-tekniset__huomautus{max-width:601px;margin-top:48px;font-size:12px;line-height:18px;font-weight:500;color:#d0d1d2} #main .lps .lps-tekniset__huomautus p + p{margin-top:4px} #main .lps .lps-tekniset__huomautus strong{color:#d0d1d2} /* ---- 6. Closing call to action ---------------------------------------------------------------------- */ #main .lps .lps-loppu{position:relative;padding-top:72px;background:#000} #main .lps .lps-loppu__kuva{position:relative;height:max(618px, min(46vw, calc(100svh - 90px)));container-type:size; --lps-ay:200px;--lps-aa:48px;--lps-ak:.92;--lps-kh:.32;--lps-kp:.1} #main .lps .lps-loppu__kuva .lps-kuva{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #main .lps .lps-loppu__kuva::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,#000 0,rgba(0,0,0,.4) calc(var(--lps-ay) * .6),rgba(0,0,0,0) var(--lps-ay))} #main .lps .lps-loppu__sisalto{position:absolute;z-index:1;left:0;right:0;top:120px;padding:0 24px;text-align:center} #main .lps .lps-loppu__otsikko{font-size:64px;line-height:64px;font-weight:500;color:#fff} #main .lps .lps-loppu__otsikko span{display:none} #main .lps[data-valinta="gloss"] .lps-loppu__otsikko [data-valinta="gloss"], #main .lps[data-valinta="matta"] .lps-loppu__otsikko [data-valinta="matta"], #main .lps[data-valinta="vari"] .lps-loppu__otsikko [data-valinta="vari"]{display:inline} /* ---- Whole car: the hero, «Koe» and the closing block ------------------------------------------------ */ /* 27.10.2026, client's «correction no. 2» (video IMG_6910.MOV): the whole car, centred, the same size and on the same level * on every screen – «the car matters, not the text». The photos are cut by the car (ppf-sivut/valmista-media.py, HERO): * the car centred, its wheels a fixed share of the width below the top and --lps-kp of floor under them; the car is at most * --lps-kh of the photo width high. The box (a size container) says what is taken: --lps-ay at the top (title, buttons, * switch), --lps-aa at the bottom. The photo width --lps-kw: --lps-ak of the box width, smaller when the car would not fit * between the two; the car stands in the middle of the free band. «Koe» and the closing block get --lps-ay / --lps-aa * measured by ppf-sivu.js (their text wraps differently on every width); the numbers here are for a page without script. * The photo edges fade into the black background, so a photo narrower than the box has no hard edge. */ @supports (width:1cqw){ #main .lps .lps-hero__kuva,#main .lps .lps-koe__kuva .lps-kuva,#main .lps .lps-loppu__kuva .lps-kuva{ --lps-kw:min(var(--lps-ak) * 100cqw, (100cqh - var(--lps-ay) - var(--lps-aa)) / var(--lps-kh)); position:absolute;inset:auto;left:50%;width:var(--lps-kw);height:auto;object-fit:fill;transform:translateX(-50%); bottom:calc((100cqh - var(--lps-ay) + var(--lps-aa)) / 2 - var(--lps-kw) * (var(--lps-kp) + var(--lps-kh) / 2)); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 87%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 87%,transparent 100%); mask-composite:intersect} } /* ---- «Koe»: before and after, a vertical line to drag (client's task 37, 03.11.2026) ------------------- */ /* The two photos of a pair are cut by the same car and stand exactly on each other; the «before» layer is cut at the line. * The line lives in the band of the car: under the switch, above the name and the specs, so it never runs over text. * --lps-jako: the place of the line in px from the left of the block, set by ppf-sivu.js. No script: no line, the «after» photo only. */ #main .lps .lps-koe__ennen{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--lps-jako,0px)) 0 0)} #main .lps .lps-liuku{display:none;position:absolute;z-index:3;left:0;right:0;top:var(--lps-ay);bottom:var(--lps-aa);outline:0;cursor:ew-resize; touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} #main .lps[data-valinta="gloss"] .lps-liuku[data-valinta="gloss"]:not([hidden]), #main .lps[data-valinta="matta"] .lps-liuku[data-valinta="matta"]:not([hidden]), #main .lps[data-valinta="vari"] .lps-liuku[data-valinta="vari"]:not([hidden]){display:block} #main .lps .lps-liuku__viiva{position:absolute;top:0;bottom:0;left:var(--lps-jako,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.55);pointer-events:none} #main .lps .lps-liuku__kahva{position:absolute;top:50%;left:var(--lps-jako,50%);display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:-24px 0 0 -24px; border-radius:50%;background:#fff;color:#171a20;box-shadow:0 2px 10px rgba(0,0,0,.45);pointer-events:none} #main .lps .lps-liuku:focus-visible .lps-liuku__kahva{outline:3px solid #fff;outline-offset:3px} /* ---- Smaller desktops and tablets ------------------------------------------------------------------- */ @media (max-width:1199px){ #main .lps{--lps-vali:120px} #main .lps .lps-osio--kapea .lps-tekstialue,#main .lps .lps-media--kapea{margin-inline:24px} #main .lps .lps-p--johdanto{max-width:none} #main .lps .lps-kortit--4{grid-template-columns:repeat(2,minmax(0,1fr))} #main .lps .lps-ryhma{grid-template-columns:repeat(3,minmax(0,1fr))} #main .lps .lps-ryhma__kuva{grid-column:1 / -1;grid-row:auto;max-width:520px;margin-top:32px} #main .lps .lps-jako__teksti{grid-column:1 / 6} #main .lps .lps-media--jako{grid-column:6 / 13} #main .lps .lps-koe__ala{padding-inline:24px} } @media (max-width:899px){ #main .lps{--lps-reuna:24px;--lps-vali:96px} #main .lps .lps-h1,#main .lps .lps-h2{font-size:36px !important;line-height:44px !important} #main .lps .lps-h3{font-size:26px !important;line-height:34px !important} #main .lps .lps-p{font-size:17px;line-height:26px} #main .lps .lps-alaotsikko{font-size:22px;line-height:30px} #main .lps .lps-hero__otsikko{font-size:44px;line-height:52px} #main .lps .lps-osio--kapea .lps-tekstialue,#main .lps .lps-media--kapea{margin-inline:12px} /* 3:2 as the photos and the videos: on a phone and a tablet nothing is cut off a car (27.10.2026; was 4:3 and 1:1). */ #main .lps .lps-media--matala,#main .lps .lps-media--kapea,#main .lps .lps-media--dia{height:auto;aspect-ratio:3 / 2} #main .lps .lps-media--kapea{width:calc(100% - 24px)} #main .lps .lps-media{margin-bottom:32px} /* Cards become a strip that scrolls on its own, as on Tesla's phone page. */ #main .lps .lps-kortit,#main .lps .lps-kortit--4,#main .lps .lps-kortit--2{display:flex;gap:12px;margin:40px -24px 0;padding:0 24px 4px;overflow-x:auto; overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:24px;scrollbar-width:none} #main .lps .lps-kortit::-webkit-scrollbar{display:none} #main .lps .lps-kortti{flex:0 0 min(78%,340px);scroll-snap-align:start} #main .lps .lps-luvut{flex-direction:column;margin-top:40px} #main .lps .lps-luku,#main .lps .lps-luku:first-child{padding:16px 0 0;border-left:0;border-top:1px solid var(--lps-raja)} #main .lps .lps-luku:first-child{border-top:0;padding-top:0} #main .lps .lps-luku__arvo{font-size:40px;line-height:48px} #main .lps .lps-luku__selite{font-size:17px;line-height:24px} #main .lps .lps-sarakkeet{grid-template-columns:1fr;gap:32px;margin-top:40px} #main .lps .lps-jako{display:block} #main .lps .lps-jako__teksti{margin-inline:0} #main .lps .lps-media--jako{margin-top:32px;aspect-ratio:3 / 2} #main .lps .lps-virta{margin-top:40px} #main .lps .lps-virta__rata{gap:12px;padding-inline:24px;scroll-padding-inline:24px} #main .lps .lps-virta__dia{flex-basis:86%} #main .lps .lps-virta__nuoli{display:none} #main .lps .lps-nauha__kortti{flex-basis:calc((100% - 12px) / 2)} #main .lps .lps-nauha__rata{gap:12px} #main .lps .lps-nauha__nuoli{display:none} /* The car gets its own band between the switch and the specs (padding under the switch), not the space under the text. */ #main .lps .lps-koe{height:auto;display:flex;flex-direction:column;justify-content:space-between;--lps-ay:230px;--lps-aa:320px} #main .lps .lps-koe__yla{padding-bottom:calc(35vw + 48px)} #main .lps .lps-koe__ala{position:relative;left:auto;right:auto;bottom:auto;z-index:2;padding:40px 24px 40px;display:block} #main .lps .lps-koe__nimi{font-size:30px;line-height:38px} #main .lps .lps-tiedot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0;margin-top:24px} #main .lps .lps-tieto,#main .lps .lps-tieto:first-child{padding:0 16px 0 0;border-left:0} #main .lps .lps-tieto__arvo{font-size:24px;line-height:32px;overflow-wrap:break-word} #main .lps .lps-tieto__yksikko{font-size:16px} #main .lps .lps-valitsin{width:100%;max-width:560px} #main .lps .lps-valitsin__nappi{white-space:normal;padding:6px 8px;font-size:15px;line-height:18px} #main .lps .lps-ryhma{grid-template-columns:repeat(2,minmax(0,1fr))} #main .lps .lps-ryhma__kohdat{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px} #main .lps .lps-tekniset{padding:72px 0 64px} #main .lps .lps-tekniset .lps-tekniset__otsikko{font-size:26px !important;line-height:34px !important} #main .lps .lps-loppu__kuva{height:560px;--lps-ay:204px;--lps-aa:40px} #main .lps .lps-loppu__sisalto{top:136px} #main .lps .lps-loppu__otsikko{font-size:44px;line-height:52px} } @media (max-width:599px){ #main .lps{--lps-reuna:12px;--lps-vali:72px} #main .lps .lps-h1,#main .lps .lps-h2{font-size:30px !important;line-height:38px !important} #main .lps .lps-h3{font-size:22px !important;line-height:30px !important} #main .lps .lps-p{font-size:16px;line-height:24px} #main .lps .lps-alaotsikko{font-size:20px;line-height:28px;margin-top:4px} #main .lps .lps-media--iso{aspect-ratio:3 / 2} #main .lps .lps-media--kapea{width:100%;margin-inline:0} #main .lps .lps-toisto{left:16px;bottom:16px} /* Phone: the title on top (two lines at most), the buttons at the bottom, the car in the middle at ~90 % of the width. */ #main .lps .lps-hero{height:max(480px, calc(88svh - 64px));--lps-ay:140px;--lps-aa:160px;--lps-ak:1.27} #main .lps .lps-hero__sisalto{padding:40px 24px 56px} #main .lps .lps-hero__otsikko{font-size:34px;line-height:42px} #main .lps .lps-hero .lps-napit{width:100%;max-width:400px;margin-top:auto;flex-direction:column;align-items:stretch} #main .lps .lps-hero a.lps-nappi{width:100%;min-width:0;min-height:40px;padding:4px 24px;font-size:14px;line-height:20px} #main .lps .lps-hero__nuoli{display:none} #main .lps .lps-hero__pisteet{bottom:20px} #main .lps .lps-tutustu{padding-top:56px} #main .lps .lps-nauha__rata,#main .lps .lps-virta__rata{padding-inline:24px;scroll-padding-inline:24px} /* Phones: the text 12 px inside the frame (at the frame's very edge it would touch the screen's edge). */ #main .lps .lps-tekstialue,#main .lps .lps-jako__teksti{margin-inline:12px} /* Phones: the strip from the screen edge, the next card peeking in, as Tesla's phone page. */ #main .lps .lps-nauha__rata{margin-inline:0} #main .lps .lps-nauha__kortti{flex-basis:min(78vw,428px)} #main .lps .lps-kortit,#main .lps .lps-kortit--4,#main .lps .lps-kortit--2{margin-inline:-24px;padding-inline:24px;scroll-padding-inline:24px} #main .lps .lps-koe{--lps-ay:220px;--lps-ak:1.27} /* «Hydrofobisuus» has to fit half of a 390 px screen in one piece. */ #main .lps .lps-tieto__arvo{font-size:20px;line-height:28px} #main .lps .lps-tieto__yksikko{font-size:14px} #main .lps .lps-koe__yla{padding:40px 12px calc(35vw + 48px)} #main .lps .lps-valitsin__nappi{font-size:13px;line-height:16px;padding:6px 4px} #main .lps .lps-ryhma__kohdat{gap:20px 12px} #main .lps .lps-loppu{padding-top:48px} #main .lps .lps-loppu__kuva{height:480px;--lps-ay:260px;--lps-aa:24px;--lps-ak:1.17} #main .lps .lps-loppu__sisalto{top:96px} #main .lps .lps-loppu__otsikko{font-size:34px;line-height:42px} #main .lps .lps-loppu .lps-napit{flex-direction:column;align-items:center} #main .lps .lps-loppu a.lps-nappi{width:min(100%,320px)} } @media (prefers-reduced-motion:reduce){ #main .lps .lps-hero__rata,#main .lps .lps-koe__kuva,#main .lps .lps-valitsin__tausta,#main .lps .lps-nauha__kortti .lps-kuva{transition:none} } @media print{ #main .lps .lps-nuoli,#main .lps .lps-pisteet,#main .lps .lps-toisto,#main .lps .lps-video{display:none !important} }