/* ========================================================================== VILLILÄN KARTANO Oma brandi, ei Verstaan eika Hotelli Verstaan kopio. Suunta (Alex 25.9.2026): arvokas, houkutteleva, ei liian pelkistetty. Editorial-asettelut, hieno typografia, riittava whitespace. Designia saa nakya. Suomalaisuus ja maanlaheisyys sailyvat. Mitattu inspiraatiosivuista, ei arvattu: - Dalhousie Castle: nimi jattikokoisena kevyena antiikvana koko leveydelta kuvan alareunassa, syvanvihrea pinta (#051e24) sen alla - Schloss Freudenfels: syvanvihrea kokonaisena pintana (#1f3f3e), naytto 105 px - The Chateau: kerma #fffdf7, syvanvihrea #24352c, keskitetyt kapeat tekstilohkot pienella versaalisilmalapulla ja kursiiviotsikolla - Domek w brzozach: naytto painolla 200 ja tiukalla valistyksella (-3 px), hiekansavyt #eadabe / #f5eedf - Chateau la Coste: versaalit 4 px:n valistyksella pienena - Cambium Farms: kerma #fff9f5, messinki #b5a07e Fontit: Boska (naytto, OFL, muuttuva - kaytetaan painolla 300 isoissa kokoluokissa) ja General Sans (leipateksti, OFL). Aiemmat Gambarino ja Sentient olivat molemmat antiikvoja, joten hero nayti kahdelta kaunokirjoitukselta eika leipateksti ollut tarpeeksi luettava. Jarjestys: 01 muuttujat, 02 perusta, 03 typografia, 04 apuluokat, 05 koristeet, 06 napit, 07 navi, 08 hero, 09 osiot, 10 kuvakaistat, 11 kuvat, 12 footer, 14 animaatiot, 15 kapea naytto, 16 tulostus. ========================================================================== */ /* 01 MUUTTUJAT ----------------------------------------------------------- */ :root { /* Pinnat. Kerma on perusta, ei puhdas valkoinen. */ --pellava: #f7f3ea; --pellava-2: #f1ebdd; --pellava-3: #e6dcc6; /* Hiekka: rakennuksen keltainen pehmennettyna pinnaksi. */ --hiekka: #eadfc8; /* Metsanvihrea on brandin ankkuri ja kokonainen pinta, ei aksentti. Sinikokeilu 25.9.2026 peruttiin, vihrea sopii kartanolle paremmin. Muuttujanimet ovat --sini*, koska pinta- ja nappiluokat lukevat niita; vaihda vain arvot jos savy muuttuu uudelleen. */ --sini: #1f3a32; --sini-syva: #16291f; --sini-vaalea: #a4b8a6; /* Messinki on ainoa metallinen savy, pieninä annoksina. */ --messinki: #b08d57; --messinki-vaalea: #cdae7d; --t-musta: #1b1a16; --t-musta-2: #6b665b; --t-vaalea: #f7f3ea; --t-vaalea-2: #b9b3a4; --viiva: rgba(27, 26, 22, 0.16); --viiva-2: rgba(27, 26, 22, 0.3); --viiva-vaalea: rgba(247, 243, 234, 0.22); --viiva-vaalea-2: rgba(247, 243, 234, 0.4); /* Pintakohtaiset muuttujat: osio asettaa, sisalto lukee vain naita. */ --fg: var(--t-musta); --fg-2: var(--t-musta-2); --rl: var(--viiva); --rl-2: var(--viiva-2); --aks: var(--sini); --koriste: rgba(27, 26, 22, 0.11); --font-display: "Boska", "Iowan Old Style", Georgia, serif; --font-body: "General Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Asteikko on jyrkka: naytto on iso ja kevyt, leipateksti pieni ja rauhallinen. Se tekee sivusta skannattavan. */ --fs-jatti: clamp(2.75rem, 11vw, 10rem); --fs-h1: clamp(2.75rem, 6vw, 5.5rem); --fs-h2: clamp(2.375rem, 4.8vw, 4.125rem); --fs-h3: clamp(1.625rem, 2.35vw, 2.1875rem); --fs-lead: clamp(1.0625rem, 1.15vw, 1.1875rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.6875rem; --gutter: clamp(20px, 4.2vw, 64px); --maxw: 1200px; --osio: clamp(5.5rem, 10vw, 10rem); --osio-tiivis: clamp(3.5rem, 6vw, 6rem); --radius: 2px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-ulos: cubic-bezier(0.16, 1, 0.3, 1); --h-nav: 84px; } /* 02 PERUSTA ------------------------------------------------------------- */ @font-face { font-family: "Boska"; src: url("/assets/fonts/Boska-Variable.woff2") format("woff2-variations"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Boska"; src: url("/assets/fonts/Boska-VariableItalic.woff2") format("woff2-variations"); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/assets/fonts/GeneralSans-Variable.woff2") format("woff2-variations"); font-weight: 200 700; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html:not(.lenis) { scroll-behavior: smooth; } /* Ankkurilinkit: kiintea navi peitti kohdeosion ylareunan aina kun Lenis ei ollut kaytossa (mobiili, pointer: coarse). scroll-margin jattaa navin verran tilaa myos natiivilla vierityksella. */ :where(section[id], [id].sec, [id].kaista) { scroll-margin-top: calc(var(--h-nav) + 28px); } @media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--pellava); color: var(--t-musta); font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.68; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button { font: inherit; color: inherit; } ::selection { background: var(--sini); color: var(--t-vaalea); } :focus-visible { outline: 2px solid var(--aks); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ohita { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); z-index: 200; padding: 12px 20px; background: var(--sini-syva); color: var(--t-vaalea); text-decoration: none; transition: top 200ms var(--ease); } .ohita:focus { top: 12px; } /* 03 TYPOGRAFIA ---------------------------------------------------------- */ /* Naytto on kevyt ja tiukasti valistetty, kuten Domekissa ja Dalhousiessa. Paino 300 isoissa kokoluokissa antaa korkeakontrastisen antiikvan hiusviivoille tilaa hengittaa. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 300; margin: 0; letter-spacing: -0.025em; text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: 1.02; } h2 { font-size: var(--fs-h2); line-height: 1.06; } h3 { font-size: var(--fs-h3); line-height: 1.24; font-weight: 400; letter-spacing: -0.01em; } p { margin: 0; } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-2); max-width: 52ch; } .copy > * + * { margin-top: 1.15em; } .copy p { color: var(--fg-2); max-width: 58ch; } /* Silmalappu: pieni versaalirivi hiusviivan kanssa. Valistys 0.22em on Chateau la Costen 4 px / 26 px samassa suhteessa. */ .silma { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2); } .silma::before { content: ""; width: clamp(22px, 2.6vw, 40px); height: 1px; background: var(--aks); opacity: 0.8; flex: none; } .silma--keskella { justify-content: center; } .silma--keskella::after { content: ""; width: clamp(22px, 2.6vw, 40px); height: 1px; background: var(--aks); opacity: 0.8; flex: none; } /* Iso kursiivilause: kartanon aanensavy, kerran per osio. */ .lause { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(1.625rem, 2.9vw, 2.75rem); line-height: 1.28; letter-spacing: -0.02em; max-width: 24ch; text-wrap: balance; } .lause--levea { max-width: 32ch; } .num { font-variant-numeric: lining-nums tabular-nums; } /* 04 APULUOKAT ----------------------------------------------------------- */ .wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; } .wrap--levea { width: min(100% - var(--gutter) * 2, 1400px); margin-inline: auto; } .sec { position: relative; padding-block: var(--osio); overflow: hidden; } .sec--tiivis { padding-block: var(--osio-tiivis); } .pinta--sini { background: var(--sini); color: var(--t-vaalea); --fg: var(--t-vaalea); --fg-2: var(--t-vaalea-2); --rl: var(--viiva-vaalea); --rl-2: var(--viiva-vaalea-2); --aks: var(--messinki-vaalea); --koriste: rgba(247, 243, 234, 0.16); } .pinta--syva { background: var(--sini-syva); color: var(--t-vaalea); --fg: var(--t-vaalea); --fg-2: var(--t-vaalea-2); --rl: var(--viiva-vaalea); --rl-2: var(--viiva-vaalea-2); --aks: var(--messinki-vaalea); --koriste: rgba(247, 243, 234, 0.14); } .pinta--hiekka { background: var(--hiekka); --koriste: rgba(27, 26, 22, 0.13); } .pinta--pellava-2 { background: var(--pellava-2); } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: clamp(32px, 4vw, 48px); } .mt-64 { margin-top: clamp(40px, 5.5vw, 72px); } .mt-96 { margin-top: clamp(56px, 8vw, 108px); } /* 05 KORISTEET ----------------------------------------------------------- */ /* Hiusviivakuviot ovat talon omia: verannan kaaririvi ja kaiteen balusterit. Aina sisallon takana, reunoilta pilkistaen. */ .koriste { position: absolute; z-index: 0; color: var(--koriste); pointer-events: none; } .koriste svg { width: 100%; height: auto; display: block; fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; } /* Sijoittelu: koriste kurkistaa reunan takaa noin kolmanneksen verran, eika koskaan jaa kellumaan keskelle. Leveys on maltillinen, jotta viivasto pysyy hienona eika muutu kuvioksi. */ .koriste--kaari-oikea { right: -13%; top: 8%; width: clamp(260px, 26vw, 420px); } .koriste--kaari-vasen { left: -13%; bottom: 6%; width: clamp(260px, 26vw, 420px); } .koriste--ikkuna { right: -4%; bottom: -8%; width: clamp(150px, 15vw, 230px); } /* Viuhkaikkuna puoliksi reunan takana, kaaren tasalla. */ .koriste--viuhka-oikea { right: -7%; top: 16%; width: clamp(180px, 18vw, 280px); } .koriste--viuhka-vasen { left: -7%; top: 10%; width: clamp(250px, 26vw, 400px); } /* Sama viuhka ylosalaisin kiinni osion ylareunaan. */ .koriste--ylos { top: 0; transform: scaleY(-1); transform-origin: top center; } .koriste--viuhka-oikea-ala { right: -6%; bottom: -4%; width: clamp(200px, 20vw, 320px); } /* Hammaslista osion ylareunaan koko leveydelta: raystaan alta poimittu yksityiskohta, joka toimii kaistan rajana. */ .koriste--hammas-ylä { left: 0; right: 0; top: 0; width: 100%; height: 20px; } /* Sijainnissa arkadi on mobiilin korvike kaiteelle, ei desktop-koriste. */ @media (min-width: 961px) { #sijainti .koriste--hammas-ylä { display: none; } } .koriste--hammas-ylä svg { height: 20px; } /* Ikkunakuviot seuraavat ruudun leveytta: lapparilla noin 110px, isolla naytolla 230px. Aiempi 15vw:n alaraja 150px oli lapparilla liian iso. */ .koriste--ikkuna-vasen { left: -4%; top: -6%; width: clamp(96px, 11.5vw, 230px); } .koriste--ikkuna-oikea { right: -4%; bottom: -6%; width: clamp(96px, 11.5vw, 230px); } .kaide { color: var(--koriste); margin-block: clamp(32px, 4vw, 56px); } .kaide + .luvut { margin-top: 0; } .kaide svg { width: 100%; height: 26px; fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; } .sisalto { position: relative; z-index: 1; } /* 06 NAPIT --------------------------------------------------------------- */ .btn { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--rl-2); display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-line); border-radius: var(--radius); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 360ms var(--ease), color 360ms var(--ease), border-color 360ms var(--ease); } .btn svg { width: 13px; height: 13px; fill: currentColor; flex: none; } .btn--taytetty { --btn-bg: var(--sini); --btn-fg: var(--t-vaalea); --btn-line: var(--sini); } .pinta--sini .btn--taytetty, .pinta--syva .btn--taytetty, .kaista .btn--taytetty { --btn-bg: var(--t-vaalea); --btn-fg: var(--sini-syva); --btn-line: var(--t-vaalea); } @media (hover: hover) and (pointer: fine) { .btn:hover { --btn-bg: var(--sini-syva); --btn-fg: var(--t-vaalea); --btn-line: var(--sini-syva); } .pinta--sini .btn:hover, .pinta--syva .btn:hover, .hero .btn:hover, .kaista .btn:hover { --btn-bg: var(--t-vaalea); --btn-fg: var(--sini-syva); --btn-line: var(--t-vaalea); } .btn--taytetty:hover { --btn-bg: var(--sini-syva); --btn-fg: var(--t-vaalea); --btn-line: var(--sini-syva); } .kaista .btn--taytetty:hover { --btn-bg: #fff; --btn-fg: var(--sini-syva); --btn-line: #fff; } } .btn-rivi { display: flex; flex-wrap: wrap; gap: 14px; } .linkki { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding-bottom: 7px; border-bottom: 1px solid var(--rl-2); transition: border-color 360ms var(--ease), color 360ms var(--ease); } .linkki svg { width: 12px; height: 12px; fill: currentColor; } @media (hover: hover) and (pointer: fine) { .linkki:hover { color: var(--aks); border-color: var(--aks); } } /* 07 NAVI ---------------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto; z-index: 90; height: var(--h-nav); display: flex; align-items: center; gap: 24px; padding-inline: var(--gutter); color: var(--t-vaalea); border-bottom: 1px solid transparent; transition: background-color 460ms var(--ease), color 460ms var(--ease), border-color 460ms var(--ease); } .nav.on-vierinyt { background: var(--pellava); color: var(--t-musta); border-bottom-color: var(--viiva); } .nav__merkki { position: relative; display: flex; align-items: center; gap: 14px; margin-right: auto; text-decoration: none; } /* Alkuperainen merkki sellaisenaan, kuten vanhalla sivulla. Ei levya ymparilla. Kuvan paalla merkki saa kevyen varjon, jotta musta piirros irtoaa taustasta. */ .nav__vaakuna { width: 44px; height: auto; transition: width 460ms var(--ease); } .nav.on-vierinyt .nav__vaakuna { width: 40px; } .nav__nimi { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, 1.35vw, 1.625rem); line-height: 1; letter-spacing: 0.01em; white-space: nowrap; } @media (max-width: 1100px) { .nav__nimi { display: none; } /* Nimi on piilossa, joten merkki saa kantaa navin yksin. */ .nav__vaakuna { width: 58px; } .nav.on-vierinyt .nav__vaakuna { width: 50px; } } .nav__linkit { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 38px); } .nav__linkki { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; opacity: 0.9; transition: opacity 260ms var(--ease), color 260ms var(--ease); } .nav__linkki:hover, .nav__linkki.on { opacity: 1; color: var(--messinki-vaalea); } .nav.on-vierinyt .nav__linkki.on { color: var(--sini); } .nav__cta { padding: 11px 22px; font-size: 0.6875rem; letter-spacing: 0.16em; --btn-bg: var(--sini); --btn-fg: var(--t-vaalea); --btn-line: var(--sini); } @media (hover: hover) and (pointer: fine) { .nav__cta:hover { --btn-bg: var(--sini-syva); --btn-fg: var(--t-vaalea); --btn-line: var(--sini-syva); } } .valikko-nappi { display: none; width: 46px; height: 46px; padding: 0; background: none; border: 1px solid currentColor; border-radius: var(--radius); align-items: center; justify-content: center; cursor: pointer; } .valikko-nappi span { display: block; width: 18px; height: 1px; background: currentColor; position: relative; } .valikko-nappi span::before, .valikko-nappi span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: currentColor; transition: transform 300ms var(--ease); } .valikko-nappi span::before { top: -6px; } .valikko-nappi span::after { top: 6px; } .nav.on-auki .valikko-nappi span { background: transparent; } .nav.on-auki .valikko-nappi span::before { transform: translateY(6px) rotate(45deg); } .nav.on-auki .valikko-nappi span::after { transform: translateY(-6px) rotate(-45deg); } .valikko { position: fixed; inset: 0; z-index: 85; background: var(--sini-syva); color: var(--t-vaalea); padding: calc(var(--h-nav) + 24px) var(--gutter) var(--gutter); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease), visibility 400ms; } .valikko.on-auki { opacity: 1; visibility: visible; transform: none; } .valikko__lista { list-style: none; margin: 0; padding: 0; } .valikko__lista li + li { border-top: 1px solid var(--viiva-vaalea); } .valikko__linkki { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; min-height: 52px; text-decoration: none; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 6.6vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; } .valikko__linkki svg { width: 16px; height: 16px; fill: currentColor; opacity: 0.55; } .valikko__alu { margin-top: auto; padding-top: 32px; display: grid; gap: 14px; font-size: var(--fs-small); } .valikko__alu a { text-decoration: none; } /* 08 HERO ---------------------------------------------------------------- */ /* Dalhousien malli: nimi jattikokoisena kevyena antiikvana koko leveydelta kuvan alareunassa. Ylaosassa vain vaakuna ja lyhyt lause, alaosassa nimi ja faktarivi. */ .hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto auto; padding: calc(var(--h-nav) + 24px) 0 clamp(1.25rem, 2.4vw, 2rem); background: var(--sini-syva); color: var(--t-vaalea); --fg: var(--t-vaalea); --fg-2: var(--t-vaalea-2); --rl: var(--viiva-vaalea); --rl-2: var(--viiva-vaalea-2); --aks: var(--messinki-vaalea); overflow: hidden; } .hero__tausta { position: absolute; inset: 0; overflow: hidden; } .hero__tausta img { --par: 90px; --par-y: 0px; --par-s: 1; position: absolute; left: 0; top: calc(var(--par) * -1); width: 100%; height: calc(100% + var(--par) * 2); object-fit: cover; object-position: 50% 52%; transform: translate3d(0, var(--par-y), 0) scale(var(--par-s)); will-change: transform; } @media (prefers-reduced-motion: reduce) { .hero__tausta img { transform: none; } } .hero__tausta::after { content: ""; position: absolute; inset: 0; /* Yksi kalvo koko kuvan yli. Aiemmin tassa oli erillinen soikio keskitekstin takana, ja sen reuna nakyi kuvassa. Nyt tummennus on yhtenainen ja juuri niin voimakas etta teksti erottuu. */ /* Vain pystyliuku, ei enaa tasaista kalvoa koko kuvan yli: se latisti kartanon keskelta. Ylareuna pitaa navin ja vaakunan luettavana, alareuna nimen, lauseen ja statsit. Valista kuva saa nakya. */ background: linear-gradient(to bottom, rgba(15, 26, 20, 0.76) 0%, rgba(15, 26, 20, 0.58) 7%, rgba(15, 26, 20, 0.26) 14%, rgba(15, 26, 20, 0.08) 24%, rgba(15, 26, 20, 0.06) 44%, rgba(15, 26, 20, 0.16) 56%, rgba(15, 26, 20, 0.4) 70%, rgba(15, 26, 20, 0.58) 84%, rgba(15, 26, 20, 0.76) 100%), linear-gradient(rgba(15, 26, 20, 0.02), rgba(15, 26, 20, 0.05)); } /* Mobiilissa lause on heron keskella eika alalaidassa, joten keskikohta tarvitsee enemman tummennusta kuin tyopoydalla. Yha selvasti vaaleampi kuin ennen. */ @media (max-width: 899px) { .hero__tausta::after { background: linear-gradient(to bottom, rgba(15, 26, 20, 0.76) 0%, rgba(15, 26, 20, 0.56) 8%, rgba(15, 26, 20, 0.28) 18%, rgba(15, 26, 20, 0.22) 34%, rgba(15, 26, 20, 0.22) 56%, rgba(15, 26, 20, 0.32) 68%, rgba(15, 26, 20, 0.54) 84%, rgba(15, 26, 20, 0.76) 100%), linear-gradient(rgba(15, 26, 20, 0.02), rgba(15, 26, 20, 0.05)); } } .hero__ylä { display: none; } .hero__ylä-vanha { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.8vw, 20px); text-align: center; align-self: center; } .hero__silma { color: var(--sini-vaalea); } .hero__vaakuna { /* Lapparilla 104 px on oikea koko; isommalla ruudulla merkki saa kasvaa suhteessa muuhun heroon, ja mobiilissa se on ainoa keskielementti. */ width: clamp(76px, 7vw, 104px); height: auto; } @media (min-width: 1500px) { .hero__vaakuna { width: clamp(104px, 8.2vw, 150px); } } /* Lause ei ole enaa heron keskella vaan yhtena rivina nimen paalla: vaakuna saa keskion, nimi on paaasia ja lause johdattaa siihen. */ /* Lause on isoilla naytoilla statsirivin ensimmainen alkio ja mobiilissa oma rivinsa nimen paalla. Molemmat tilat samasta elementista: desktopilla se asetetaan samaan ruudukkosoluun statsien kanssa, alareunaan. */ .hero__lause { position: relative; z-index: 1; width: min(100% - var(--gutter) * 2, var(--maxw)); margin: 0 auto; color: #fff; opacity: 1; max-width: none; text-align: center; font-size: clamp(1.0625rem, 1.5vw, 1.4375rem); line-height: 1.3; margin-bottom: clamp(10px, 1.2vw, 18px); text-shadow: 0 1px 2px rgba(15, 26, 20, 0.98), 0 2px 10px rgba(15, 26, 20, 0.92), 0 6px 34px rgba(15, 26, 20, 0.72); } .hero__statsit { display: flex; align-items: center; gap: clamp(24px, 3.4vw, 60px); } @media (min-width: 900px) { .hero { grid-template-rows: 1fr auto auto; } .hero__ylä { grid-row: 1; } .hero__nimi { grid-row: 2; } .hero__lause { grid-row: 3; grid-column: 1; align-self: end; text-align: left; margin-bottom: 0; pointer-events: none; /* Statsirivilla lause kilpailee nurmen kanssa: isompi, hieman lihavampi leikkaus ja tiiviimpi varjo pitavat sen luettavana. */ font-size: clamp(1.125rem, 1.5vw, 1.5rem); font-weight: 420; } /* .hero__alu maaritellaan myohemmin tiedostossa, joten tassa tarvitaan yksi taso lisaa tarkkuutta. */ .hero .hero__alu { grid-row: 3; grid-column: 1; justify-content: flex-end; } } /* Nimi taytt aa leveyden: fonttikoko on sidottu leveyteen, ei ruutuun. */ .hero__nimi { position: relative; z-index: 1; width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; /* Kerroin on mitattu Boskan kirjainleveyksista: teksti on 5,9923 x fonttikoko, ja -0,045em valistys toistuu 16 merkin jalkeen, eli 5,2723 x fonttikoko. Kaanteisluku 0,1885 antaa saman leveyden kuin hiusviiva alla. Yksi rivi myos mobiilissa. */ font-size: calc(min(100vw - var(--gutter) * 2, var(--maxw)) * 0.1885); line-height: 0.9; letter-spacing: -0.045em; text-align: center; white-space: nowrap; margin-bottom: clamp(14px, 1.8vw, 24px); } .hero__alu { position: relative; z-index: 1; /* Sama mitta kuin otsikolla, jotta viiva alkaa ja loppuu nimen kanssa. */ width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 10px clamp(14px, 3vw, 48px); padding-top: 18px; border-top: 1px solid var(--rl); font-size: var(--fs-small); color: var(--t-vaalea); } .hero__fakta { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .hero__fakta svg { width: 21px; height: 21px; flex: none; /* Vaalea vihrea jai kuvan paalla lahes nakymattomaksi. */ fill: none; stroke: #eef3ec; stroke-width: 1.35; opacity: 0.92; stroke-linecap: round; stroke-linejoin: round; } .hero__fakta b { font-weight: 500; } .hero__vihje { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; opacity: 0.85; } .hero__vihje svg { width: 12px; height: 12px; fill: currentColor; transform: rotate(90deg); } /* 09 OSIOT --------------------------------------------------------------- */ /* Editorial-asettelu: leveä kuva ja kapea tekstipalsta lomittuvat. */ .juttu { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; } @media (min-width: 900px) { .juttu { grid-template-columns: repeat(12, minmax(0, 1fr)); } .juttu__kuva { grid-column: 1 / 8; margin-block: clamp(0px, 2vw, 32px); } .juttu__teksti { grid-column: 8 / 13; } .juttu--kaanteinen .juttu__kuva { grid-column: 6 / 13; grid-row: 1; } .juttu--kaanteinen .juttu__teksti { grid-column: 1 / 6; grid-row: 1; } } /* Kuvapari: kaksi kuvaa limittain, toinen alempana. Cambiumin malli. */ .pari { display: grid; gap: clamp(16px, 2.4vw, 32px); } @media (min-width: 760px) { .pari { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .pari > :last-child { margin-top: clamp(40px, 8vw, 120px); } /* Kaanteinen: pieni kuva vasemmalle ja alemmas, iso oikealle. */ .pari--kaanteinen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .pari--kaanteinen > :first-child { margin-top: clamp(40px, 8vw, 120px); } .pari--kaanteinen > :last-child { margin-top: 0; } } /* Keskitetty johdantolohko: kapea mitta, kursiivi, hiusviivat molemmin puolin silmalappua. The Chateaun malli. */ .johdanto { max-width: 44ch; margin-inline: auto; text-align: center; } .johdanto--levea { max-width: 62ch; } .keskitetty { margin-inline: auto; text-align: center; } .keskitetty p { margin-inline: auto; } .johdanto .lause { margin-inline: auto; margin-top: 24px; max-width: none; } /* Tekstihierarkia: silma -> lause 14 px, lause -> ingressi 20 px. Aiemmin molemmat olivat 24-32 px, jolloin lohkot eivat lukeneet yhteen. */ .johdanto .johdanto__lause { margin-top: 14px; } .johdanto .johdanto__copy { margin-top: 20px; } /* Johdanto-osion alapuolelle ei tarvita taytta osiovalia. */ #johdanto { padding-bottom: clamp(24px, 3vw, 44px); } /* Luvut: kolme faktaa hiusviivojen valissa. */ .luvut { list-style: none; padding: 0; /* Ylamarginaali on tassa eika apuluokassa: .luvut tulee tyylitiedostossa myohemmin ja nollaisi sen. */ margin: clamp(44px, 5.5vw, 76px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); } .luvut li { border-top: 1px solid var(--rl); padding-top: 24px; text-align: center; } .luvut b { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -0.03em; } .luvut span { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--fg-2); } /* Tilalista: numeroitu, hiusviivojen valissa. */ .tilat { list-style: none; padding: 0; margin: clamp(56px, 8vw, 110px) 0 0; border-top: 1px solid var(--rl); } .tilat li:first-child { padding-top: clamp(38px, 4.4vw, 64px); } @media (hover: hover) and (pointer: fine) { .tilat li { transition: opacity 420ms var(--ease); } .tilat:hover li { opacity: 0.45; } .tilat li:hover { opacity: 1; } } /* Hiirta seuraava kuva tilalistassa: klassinen komponentti, joka nayttaa rivin tilan ilman etta lista kasvaa. Vain hiirella - kosketuksella kuvaa ei voi esikatsella eika osoitinta ole. */ .seuraaja { position: fixed; top: 0; left: 0; z-index: 60; width: clamp(230px, 19vw, 320px); aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; pointer-events: none; will-change: transform; box-shadow: 0 30px 80px rgba(15, 26, 20, 0.45); /* Sisaantulo tehdaan sisakuoressa, jotta ulkokuori voi seurata hiirta omalla nopeudellaan ilman etta animaatiot taistelevat keskenaan. */ opacity: 0; visibility: hidden; transition: opacity 260ms var(--ease), visibility 260ms; } .seuraaja.on-nakyvissa { opacity: 1; visibility: visible; } .seuraaja__sisus { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; clip-path: inset(100% 0 0 0); transition: clip-path 680ms cubic-bezier(0.16, 1, 0.3, 1); } .seuraaja.on-nakyvissa .seuraaja__sisus { clip-path: inset(0% 0 0 0); } .seuraaja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); /* Kuvan vaihto kohteesta toiseen oli 240 ms:n hyppy. Pidempi haivytys tekee vaihdosta pehmean, kun kursori liikkuu riville toiselta. */ transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 420ms var(--ease); opacity: 0; } .seuraaja.on-nakyvissa img { transform: scale(1); } .seuraaja img.on { opacity: 1; } @media (hover: none), (pointer: coarse) { .seuraaja { display: none; } } .tilat li { display: grid; grid-template-columns: auto minmax(0, 4fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(24px, 3vw, 38px) 0; border-bottom: 1px solid var(--rl); } .tilat__nro { font-family: var(--font-display); font-size: var(--fs-small); color: var(--aks); min-width: 2.5ch; } .tilat h3 { margin-bottom: 6px; } .tilat__hlo { font-size: var(--fs-small); color: var(--fg-2); letter-spacing: 0.04em; } .tilat p { color: var(--fg-2); max-width: 56ch; } /* Tietorivit. */ .tiedot { display: grid; border-top: 1px solid var(--rl); } .tieto { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(12px, 2vw, 32px); padding: 18px 0; border-bottom: 1px solid var(--rl); } .tieto__k { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); align-self: start; padding-top: 5px; } .tieto__v { margin: 0; } .tieto__v a { text-underline-offset: 4px; } /* 10 KUVAKAISTA ---------------------------------------------------------- */ /* Koko leveyden kuva, jonka paalla tekstilohko vasemmalla alhaalla. The Chateaun ja Dalhousien toistuva komponentti. */ .kaista { position: relative; overflow: hidden; min-height: clamp(520px, 68vh, 760px); display: flex; align-items: center; padding-block: clamp(56px, 8vw, 104px); color: var(--t-vaalea); --fg: var(--t-vaalea); --fg-2: var(--t-vaalea-2); --rl: var(--viiva-vaalea); --rl-2: var(--viiva-vaalea-2); --aks: var(--messinki-vaalea); } .kaista__tausta { position: absolute; inset: 0; overflow: hidden; } .kaista__tausta img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .kaista__tausta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 72% at 24% 52%, rgba(15, 26, 20, 0.8) 0%, rgba(15, 26, 20, 0.46) 58%, rgba(15, 26, 20, 0) 100%), linear-gradient(105deg, rgba(15, 26, 20, 0.78) 0%, rgba(15, 26, 20, 0.52) 48%, rgba(15, 26, 20, 0.1) 82%), linear-gradient(to top, rgba(15, 26, 20, 0.6) 0%, rgba(15, 26, 20, 0.06) 60%); } /* Leveampi lohko: otsikko mahtuu kahdelle rivialle kolmen sijaan ja ingressi kahdelle, jolloin kaista ei kasva turhan korkeaksi. */ .kaista__sisalto { position: relative; z-index: 1; max-width: 54ch; } .kaista h2 { margin-top: 18px; } .kaista .lead { color: var(--t-vaalea); opacity: 0.92; margin-top: 18px; } /* 11 KUVAT --------------------------------------------------------------- */ .kuva { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--pellava-3); } .kuva img { width: 100%; height: 100%; object-fit: cover; } .kuva--4-5 { aspect-ratio: 4 / 5; } .kuva--3-2 { aspect-ratio: 3 / 2; } .kuva--4-3 { aspect-ratio: 4 / 3; } .kuva--5-4 { aspect-ratio: 5 / 4; } .kuva--1-1 { aspect-ratio: 1 / 1; } .kuva__teksti { margin-top: 14px; font-size: var(--fs-small); color: var(--fg-2); } .kuva--syva img { will-change: transform; } /* 12 FOOTER -------------------------------------------------------------- */ .footer { position: relative; overflow: hidden; background: var(--sini-syva); color: var(--t-vaalea); padding-block: clamp(4rem, 7vw, 6.5rem) 32px; --fg: var(--t-vaalea); --fg-2: var(--t-vaalea-2); --rl: var(--viiva-vaalea); --rl-2: var(--viiva-vaalea-2); --aks: var(--messinki-vaalea); --koriste: rgba(247, 243, 234, 0.14); } .footer__yla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); } .footer__merkki { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: start; } /* Footerin vaakuna: mobiilissa 76px riittaa, desktopilla merkki saa kantaa oman palstansa nimen rinnalla. */ .footer__merkki img { width: 76px; height: auto; } @media (min-width: 961px) { .footer__merkki img { width: clamp(124px, 11vw, 168px); } .footer__merkki { gap: 20px; } } .footer__nimi { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; white-space: nowrap; } .footer__tiedot { display: grid; gap: 6px; justify-items: end; text-align: right; } .footer__tiedot a { text-underline-offset: 4px; } .footer__alu { margin-top: clamp(40px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--rl); display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--fs-small); color: var(--fg-2); } .footer__krediitti { margin-left: auto; } .some { display: flex; gap: 12px; margin-top: 24px; } .some a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--rl-2); border-radius: 50%; transition: background-color 320ms var(--ease), border-color 320ms var(--ease), color 320ms var(--ease); } .some svg { width: 17px; height: 17px; fill: currentColor; } @media (hover: hover) and (pointer: fine) { .some a:hover { background: var(--t-vaalea); border-color: var(--t-vaalea); color: var(--sini-syva); } } /* 14 ANIMAATIOT ---------------------------------------------------------- */ /* Alkutilat html.js-luokan takana: sisalto ei valahda eika katoa ilman JS:aa. GSAP hoitaa loput. */ html.js:not(.reduced) .hero__ylä > *, html.js:not(.reduced) .hero__lause, html.js:not(.reduced) .hero__alu { opacity: 0; } html.js:not(.reduced) .esiin { opacity: 0; } html.js:not(.reduced) .rivit > * { opacity: 0; } /* Kuvat paljastuvat pyyhkaisylla alhaalta. */ html.js:not(.reduced) .paljasta { clip-path: inset(100% 0 0 0); } /* Nimi nousee maskin takaa. */ .hero__nimi .rivi { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; } html.js:not(.reduced) .hero__nimi .rivi__s { display: block; } @media (prefers-reduced-motion: reduce) { html.js .hero__ylä > *, html.js .hero__lause, html.js .hero__alu, html.js .esiin, html.js .rivit > *, html.js .paljasta { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* 15 KAPEA NÄYTTÖ -------------------------------------------------------- */ @media (max-width: 960px) { :root { --h-nav: 72px; --fs-h2: clamp(2.125rem, 8.4vw, 3rem); --fs-h3: clamp(1.625rem, 6.8vw, 2.125rem); } .nav__linkit, .nav__cta { display: none; } .valikko-nappi { display: inline-flex; } .tieto { grid-template-columns: 1fr; gap: 6px; } .footer__yla { grid-template-columns: 1fr; gap: clamp(36px, 9vw, 56px); } .footer__tiedot .mt-24 { margin-top: clamp(28px, 7vw, 40px); } .footer__tiedot { justify-items: start; text-align: left; } .tilat li { grid-template-columns: auto 1fr; } .tilat li > p { grid-column: 2; } /* Reunojen kaaret ja ikkunat pois kapealta naytolta: niille ei ole marginaalia, johon kurkistaa, joten ne menivat tekstin paalle. Osion ylareunan arkadi toimii mobiilissakin, koska se on hiusviiva koko leveydelta eika osu mihinkaan. */ .koriste { display: none; } .koriste--hammas-ylä { display: block; } /* Sijainnissa kaide korvautuu mobiilissa ylareunan arkadilla. */ #sijainti .kaide { display: none; } #sijainti .luvut { margin-top: clamp(28px, 6vw, 44px); } /* Sijainti on sec--tiivis, joten sen omat valit jaivat mobiilissa ahtaiksi suhteessa ylareunan arkadiin ja seuraavaan osioon. */ #sijainti { padding-block: clamp(4.5rem, 14vw, 7rem); } .kaista__sisalto { max-width: none; } /* Otsikot isommiksi: 8,4vw jai 390 px:lla 33 px:iin, mika oli pieni suhteessa 26 px:n ingressiin. */ :root { --fs-h2: clamp(2.625rem, 11.2vw, 3.75rem); } /* Juhlaosion otsikko on jo kolmirivinen, joten se jaa entiselleen. */ #juhlat h2 { font-size: clamp(2.375rem, 9.6vw, 3.25rem); } /* Johdannon, tilojen ja sijainnin "otsikko" on .lause, ei h2. */ .johdanto .lause { font-size: clamp(2.0625rem, 9.2vw, 2.75rem); } /* Rajaus pois etuovelta: vasemmalle, jolloin siipi ja veranta nakyvat. */ .hero__tausta img { object-position: 34% 50%; } /* Yhteystiedoissa tekstit ennen karttaa. */ /* align-items: center kutistaisi kartan sen luontaiseen 300 px:iin. */ /* .hero__alu:ssa on mobiilissa vain yksi lapsi, joten space-between jatti statsit vasempaan laitaan. Ryhma levitetaan koko riville. */ .hero__statsit { width: 100%; justify-content: space-between; gap: 10px; } #yhteys .juttu { display: flex; flex-direction: column; align-items: stretch; } #yhteys .juttu__kuva { order: 2; } #yhteys .juttu__teksti { order: 1; } } @media (max-width: 620px) { /* Kolme etaisyytta pysyvat yhdella rivilla: luku pienenee, ei asettelu. */ .luvut { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .luvut li { padding-top: 16px; } .luvut b { font-size: clamp(1.375rem, 7vw, 1.875rem); } .luvut span { font-size: 0.75rem; } .hero__alu { gap: 8px; font-size: 0.8125rem; } /* Kapeimmilla naytoilla faktoista jaa vain olennainen, jotta rivi pysyy yhtena. Ikoni kertoo lopun. */ .vain-iso { display: none; } .hero__fakta { gap: 7px; } .hero__fakta svg { width: 18px; height: 18px; } .hero__vihje { display: none; } } .vain-pieni { display: none; } @media (max-width: 899px) { .vain-pieni { display: inline; } /* Heron lause: mukana Nakkilassa, isompi ja oma valinsa nimen paalle. */ /* Boska Light oli 20 px:n koossa kuvan paalla liian hento. Muuttuva fontti antaa saman leikkauksen paksumpana ilman fontin vaihtoa. */ /* Lause on mobiilissa heron keskielementti, joten se saa olla iso. Kolme rivia on ok: nimi ja statsit ovat alareunassa omalla tilallaan. */ .hero__lause { font-size: clamp(1.875rem, 9.7vw, 2.625rem); font-weight: 450; line-height: 1.22; letter-spacing: -0.012em; margin-bottom: clamp(30px, 8vw, 46px); } /* Navissa on mobiilissa iso merkki, joten heron keskimerkki jaa pois. Lause ottaa sen paikan heron keskelta. */ .hero__ylä { display: none; } .hero__lause { grid-row: 1; align-self: center; margin-bottom: 0; } } /* 16 TULOSTUS ------------------------------------------------------------ */ @media print { .nav, .valikko, .hero__tausta, .kaista__tausta, .koriste, .kaide { display: none !important; } body { background: #fff; color: #000; } .hero, .footer, .pinta--sini, .pinta--syva, .kaista { background: #fff !important; color: #000 !important; } } /* 14 PIIRROSKARTTA ------------------------------------------------------ */ /* Kartta on kasin piirretty vektori, ei kuva: se perii sivun fontit ja varit, joten sama piirros toimii seka vaalealla etta tummalla pinnalla ja pysyy teravana kaikilla naytoilla. Suunnat ovat oikeat, etaisyydet tiivistetyt kuten kuvitetuissa kartoissa. */ .kartta-kehys { width: 100%; max-width: 560px; margin-inline: auto; } /* Yhteystiedot-osio hieman tiiviimmaksi ylhaalta ja alhaalta. */ #yhteys { padding-block: calc(var(--osio) - 2rem); } .kartta { display: block; width: 100%; height: auto; color: var(--kartta-muste); background: var(--kartta-pohja); } .kartta .muste { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .kartta .muste--vahva { stroke-width: 2.6; } .kartta .muste--ohut { stroke-width: 1.25; opacity: 0.72; } .kartta .pelto .muste--ohut { opacity: 0.4; } .kartta .joki .muste--ohut { opacity: 0.55; } .kartta .maisema { opacity: 0.85; } .kartta .polku { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-dasharray: 2.5 8; stroke-linecap: round; opacity: 0.8; } .kartta .nuoli { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .kartta .kehys { fill: none; stroke: currentColor; stroke-width: 2.1; opacity: 0.75; } .kartta .kehys--ohut { stroke-width: 1.2; opacity: 0.45; } /* Tekstien ympari sama vari kuin pohja, jotta nimet lukevat viivojen paalla. */ .kartta text { fill: currentColor; stroke: var(--kartta-pohja); stroke-width: 6; paint-order: stroke fill; } .kartta__teksti { font-family: var(--kartta-font-teksti); font-size: 21px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .kartta__teksti--pieni { font-size: 17px; letter-spacing: 0.1em; opacity: 0.72; } .kartta__teksti--vesi { font-size: 22px; letter-spacing: 0.24em; opacity: 0.78; } .kartta__teksti--ilma { font-size: 24px; letter-spacing: 0.1em; } .kartta__nimi { font-family: var(--kartta-font-nimi); font-size: 36px; } .kartta__nimi--iso { font-size: 50px; } .kartta .merkki { display: none; } .kartta .merkki__keha { fill: none; stroke: var(--kartta-aks); stroke-width: 2.2; stroke-dasharray: 2.5 10; opacity: 0.85; } .kartta .kompassi__pohjoinen { fill: var(--kartta-aks); stroke: var(--kartta-aks); stroke-width: 1; } /* Kapealla naytolla piirros kutistuu noin 350 px:iin, jolloin 21 px:n nimikilvet olisivat 8 px. Kasvatetaan tekstit ja viivat suhteessa piirrokseen, jotta kartta pysyy luettavana myos puhelimessa. */ @media (max-width: 700px) { .kartta__teksti { font-size: 28px; letter-spacing: 0.1em; } .kartta__teksti--pieni { font-size: 22px; letter-spacing: 0.06em; } .kartta__teksti--vesi { font-size: 27px; letter-spacing: 0.16em; } .kartta__teksti--ilma { font-size: 30px; } .kartta__nimi { font-size: 42px; } .kartta__nimi--iso { font-size: 58px; } .kartta .muste { stroke-width: 2.4; } .kartta .muste--vahva { stroke-width: 3.2; } .kartta .muste--ohut { stroke-width: 1.6; } .kartta text { stroke-width: 7; } } .kartta-kehys { --kartta-pohja: var(--pellava-2); --kartta-muste: var(--sini); --kartta-aks: var(--messinki); --kartta-font-teksti: var(--font-body); --kartta-font-nimi: var(--font-display); } .kartta--kartano .merkki--kartano { display: block; } /* Muut kohteemme -lohko footerissa: Harri 30.9.2026 pyysi, etta sivuilla nakyy talojen kuuluvan samaan kokonaisuuteen. Harrin oma sana on "kokonaisuus", ei "perhe". */ .footer__muut-otsikko { margin-top: clamp(24px, 5vw, 32px); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-vaalea-2); } /* ------------------------------------------------------------------------- Filmi: katsottava pystyvideo (Satunnainen Seikkailija). Kapea tarkoituksella, lähde on 9:16 puhelinvideo eikä sitä venytetä leveäksi. ------------------------------------------------------------------------- */ .filmi { position: relative; width: min(100%, 348px); margin: 0; overflow: hidden; background: var(--sini-syva); } /* height: auto on pakollinen: