@charset "utf-8"; :root { --bg: #f3e5d8; --paper: #fff1e3; --paper-2: #e6c7b1; --ink: #332116; --muted: #3b2a20; --line: rgba(51, 33, 22, 0.18); --primary: #59633f; --secondary: #c98c5a; --accent: #a9654b; --accent-hover: #814331; --accent-2: #26736b; --inverse: #fff7eb; --shadow: 0 20px 58px rgba(89, 54, 35, 0.18); --radius: 8px; --header-space: 104px; /* One typeface for everything: Finlandica Text, the official typeface of Finland (variable weight 400 to 900, loaded in each page's ). */ --body: "Finlandica Text", Arial, sans-serif; --head: var(--body); --hero-image: url("terapiahuone.webp"); --overlay: linear-gradient(90deg, rgba(54, 33, 20, 0.88), rgba(54, 33, 20, 0.58) 44%, rgba(54, 33, 20, 0.16)); --pattern: linear-gradient(120deg, rgba(166, 99, 77, 0.08) 1px, transparent 1px), linear-gradient(30deg, rgba(38, 115, 107, 0.055) 1px, transparent 1px); /* A soft rainbow in Finnish nature colours: lingonberry, cloudberry, birch leaf, moss, lake, heather. An accent only (card tops, left accent lines, the footer line, the reading bar), never a fill. */ --spectrum-stops: #c4604f, #d98d4e 20%, #dcb65a 40%, #7fa46b 60%, #4f8fa6 80%, #8a72ad; --spectrum: linear-gradient(90deg, var(--spectrum-stops)); --spectrum-down: linear-gradient(180deg, var(--spectrum-stops)); --mist: #d9e2de; --surface: linear-gradient(180deg, #fff7f0 0%, var(--paper) 45%, #fcebdd 100%); } .theme-neuro { --hero-image: url("tyopoyta-suoraan-ylhaalta.webp"); } .theme-about { --hero-image: url("terapiahuone-lattiatasolta.webp"); } .theme-burnout { --hero-image: url("terapiahuone-sadepaiva.webp"); } .theme-family { --hero-image: url("terapiahuone-sohvapoyta.webp"); } .theme-english { --hero-image: url("terapiahuone-ikkuna.webp"); } .theme-contact { --hero-image: url("sisapiha-sisaankaynti.webp"); } .theme-blog { --hero-image: url("tyopoyta.webp"); } .theme-aloittaminen { --hero-image: url("terapiahuone-ovelta.webp"); } .theme-palvelut { --hero-image: url("terapiahuone-toinen-kulma.webp"); } .theme-yksilo { --hero-image: url("jarvimaisema.webp"); } .theme-trauma { --hero-image: url("terapiahuone-vesikarahvi.webp"); } /* Blog posts: each post's hero is the same photo as its blog card. */ .theme-blog-yhteinen-kieli { --hero-image: url("mannyn-latvusto.webp"); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-space); } body { margin: 0; background-color: var(--bg); background-image: var(--pattern); background-size: 62px 62px; color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.58; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(166, 99, 77, 0.09), transparent 34%), linear-gradient(315deg, rgba(206, 139, 84, 0.1), transparent 36%); pointer-events: none; } a { color: inherit; } img { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; } .site-header { position: fixed; top: 0; right: 0; left: 0; z-index: 10; padding-top: 22px; pointer-events: none; } .site-nav { display: flex; width: min(1180px, calc(100% - 48px)); margin: 0 auto; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius); background: rgba(11, 21, 18, 0.82); box-shadow: 0 14px 34px rgba(33, 21, 13, 0.2); color: #ffffff; padding: 11px 16px; backdrop-filter: blur(14px); pointer-events: auto; } @supports (animation-timeline: scroll()) { @media (width > 760px) { .site-nav { animation: nav-over-hero linear both; animation-timeline: scroll(root); animation-range: 0 140px; } } } @keyframes nav-over-hero { from { background-color: rgba(11, 21, 18, 0.42); box-shadow: none; } } .brand-link { display: grid; flex: 0 0 auto; gap: 4px; color: #ffffff; font-size: 1.06rem; font-weight: 900; line-height: 1.1; text-decoration: none; } .brand-link span { color: rgba(255, 255, 255, 0.76); font-size: 0.86rem; font-weight: 800; } .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nav-toggle-button { display: none; } .nav-links { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: flex-end; } /* The full menu shows from 1024px up, always at 16px. Below that the icon menu takes over (see "Icon menu" further down): with Finlandica Text and this spacing the full menu needs 984px to stay on one line. */ .nav-links a { color: #ffffff; font-size: 1rem; font-weight: 900; text-decoration: none; } .nav-links a:hover, .nav-links a:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .nav-links .nav-cta { border-radius: var(--radius); background-color: var(--accent); color: #ffffff; padding: 9px 12px; box-shadow: 0 10px 24px rgba(60, 31, 20, 0.24); transition: background-color 200ms ease; } .nav-links .nav-cta:hover, .nav-links .nav-cta:focus-visible { background-color: var(--accent-hover); text-decoration: none; } .nav-dropdown { position: relative; display: inline-flex; } .nav-parent { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .nav-caret { width: 6px; height: 6px; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 150ms ease; } .nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(225deg) translateY(1px); } .nav-dropdown::before { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 16px; } .nav-dropdown-panel { position: absolute; top: calc(100% + 12px); left: 0; z-index: 30; display: grid; gap: 2px; min-width: 252px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 150ms ease, transform 150ms ease, visibility 150ms; } .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-panel a { border-radius: 6px; color: var(--ink); font-size: 1rem; font-weight: 800; padding: 10px 12px; white-space: nowrap; transition: background-color 160ms ease, color 160ms ease; } .nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus-visible { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); color: var(--accent-hover); text-decoration: none; } .hero, .page-hero { --hero-fade: linear-gradient(to top, transparent 5%, #000000 34%); position: relative; isolation: isolate; overflow: hidden; color: #ffffff; } .hero { min-height: 720px; } .hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--overlay), var(--hero-image); background-position: center; background-size: cover; filter: sepia(0.12) saturate(0.9) contrast(0.94); transform: scale(1.02); /* The photo fades out into the real page background. A flat --bg band painted on top left a visible seam, because the page background carries a pattern and a tint. */ -webkit-mask-image: var(--hero-fade); mask-image: var(--hero-fade); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; width: min(1180px, calc(100% - 40px)); min-height: clamp(560px, 78vh, 720px); margin: 0 auto; padding: 132px 0 88px; } .page-hero { min-height: 430px; padding-inline: 28px; } .page-hero .wrap { padding-top: 148px; padding-bottom: 86px; } .kicker { position: relative; display: inline-flex; width: fit-content; margin: 0 0 18px; color: #f5ede0; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.04em; line-height: 1.4; padding-bottom: 9px; text-transform: uppercase; } .kicker::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--accent); transform-origin: left center; } h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; } .hero-title, .page-title { max-width: 820px; margin: 0; color: #ffffff; font-family: var(--head); font-size: 4.45rem; font-weight: 800; line-height: 1.03; } .hero-title { max-width: 17ch; font-size: clamp(2.5rem, 4.6vw, 3.7rem); line-height: 1.06; } .page-title { font-size: 3.65rem; } .hero-copy, .page-copy { max-width: 720px; margin: 24px 0 0; color: rgba(255, 255, 255, 0.94); font-size: 1.18rem; font-weight: 600; } .hero-copy { max-width: 52ch; } .trust-line { max-width: 52ch; margin-top: 18px; color: rgba(255, 255, 255, 0.92); font-size: 0.95rem; font-weight: 700; } .hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius); font-size: 0.94rem; font-weight: 900; line-height: 1.15; padding: 12px 18px; text-align: center; text-decoration: none; transition: transform 260ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 260ms var(--ease-out); } .button.primary { background-color: var(--accent); color: #ffffff; box-shadow: var(--shadow); } /* Secondary: dark glass like the nav and the start card, so it stays readable even where the hero photo fades out behind it. It never takes the accent colour, which belongs to the main CTA. */ .button.secondary { border: 2px solid rgba(255, 255, 255, 0.72); background: rgba(11, 21, 18, 0.55); color: #ffffff; padding: 11px 17px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .button.dark { background-color: var(--primary); color: var(--inverse); } .button:hover, .button:focus-visible { outline: none; transform: translateY(-2px); } .button:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; } .button:active { transform: translateY(0) scale(0.985); transition-duration: 90ms; } .button.primary:hover, .button.primary:focus-visible { background-color: var(--accent-hover); } .button.secondary:hover, .button.secondary:focus-visible { border-color: #ffffff; background: rgba(11, 21, 18, 0.72); } .button.dark:hover, .button.dark:focus-visible { background-color: color-mix(in srgb, var(--primary) 82%, #000000); } .booking-panel { border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius); background: rgba(11, 21, 18, 0.52); color: #ffffff; padding: 20px; backdrop-filter: blur(18px); } .profile-chip { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; margin-bottom: 18px; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 91%, transparent); color: var(--ink); padding: 10px; } .profile-chip img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; } .profile-chip strong { display: block; font-size: 0.88rem; font-weight: 900; line-height: 1.15; } .profile-chip span { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.25; } .booking-panel h2 { margin: 0 0 16px; font-family: var(--head); font-size: 1.75rem; line-height: 1.1; } .begin-card-text { margin: 0 0 20px; color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; font-weight: 600; line-height: 1.5; } .begin-card-actions { display: grid; gap: 14px; } .begin-card-actions .button { width: 100%; } .begin-card-link { display: inline-flex; align-items: center; gap: 7px; color: #ffffff; font-size: 0.88rem; font-weight: 900; text-decoration: none; } /* Drawn arrow in the same stroke style as the site's icons. Finlandica Text has no → glyph, and a text arrow would fall back to another font. */ .begin-card-link::after { content: ""; flex: 0 0 auto; width: 14px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h11.2M8.6 1.4 12.2 5 8.6 8.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h11.2M8.6 1.4 12.2 5 8.6 8.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 150ms ease; } .begin-card-link:hover, .begin-card-link:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .begin-card-link:hover::after, .begin-card-link:focus-visible::after { transform: translateX(3px); } .booking-form { display: grid; gap: 12px; } .field label { display: block; margin-bottom: 6px; color: rgba(255, 255, 255, 0.76); font-size: 0.76rem; font-weight: 900; } .field select, .field input, .field textarea { width: 100%; min-height: 42px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius); background: rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 0.86rem; font-weight: 800; padding: 8px 10px; } .field textarea { min-height: 130px; resize: vertical; } .field option { color: var(--ink); } .section { padding: 96px 28px; } /* Alternate bands: warm on the left, easing into a pale lake mist on the right, with a little daylight falling in from the top corner. The gradient runs sideways so both edges match. */ .section.alt { background: radial-gradient(70% 90% at 0% 0%, rgba(255, 249, 242, 0.5), transparent 62%), linear-gradient( 105deg, color-mix(in srgb, var(--paper-2) 62%, transparent) 0%, color-mix(in srgb, var(--paper-2) 44%, transparent) 55%, color-mix(in srgb, var(--mist) 62%, transparent) 100% ); } .wrap { width: min(1180px, 100%); margin: 0 auto; } .section-head, .two-col, .location-grid, .contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.65fr); gap: 48px; align-items: start; margin-bottom: 34px; } .two-col, .location-grid, .contact-grid { align-items: center; margin-bottom: 0; } .two-col { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr); gap: 56px; align-items: start; } .section-head:has(> :only-child) { grid-template-columns: 1fr; } .section-head:has(> :only-child) h2 { max-width: 24ch; } .section-head > *, .two-col > *, .location-grid > *, .contact-grid > * { min-width: 0; } .section-head h2, .two-col h2, .location-copy h2, .contact-grid h2, .final h2 { margin: 0; color: var(--ink); font-family: var(--head); font-size: 3rem; font-weight: 800; line-height: 1.08; } .two-col h2, .location-copy h2, .contact-grid h2 { font-size: 2.55rem; max-width: 14ch; } .two-col > div > h2 + .rich-copy, .location-copy h2 + p { margin-top: 16px; } .section-head h2 { max-width: 16ch; } .rich-copy h2 { max-width: 15ch; } .final h2 { font-size: 2.85rem; max-width: 14ch; } .section-head p, .two-col p, .location-copy p, .final p, .rich-copy p { margin: 0; color: var(--muted); } .rich-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; } .story-copy { max-width: 820px; margin-bottom: 34px; } .story-copy h3 { margin: 0 0 4px; color: var(--ink); font-family: var(--head); font-size: 1.85rem; font-weight: 800; line-height: 1.14; } .feature-split { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(340px, 0.92fr); gap: 64px; align-items: center; } /* Text beside a photo: two equal columns with the same gap in every layout, so a photo is the same size whichever side it sits on and whichever section it's in. Desktop only; below 1180px these sections stack. Kept after the base rules above so it wins. */ @media (width > 1180px) { .two-col:has(> figure), .feature-split, .location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } } .feature-copy { display: grid; gap: 18px; max-width: 620px; } .feature-copy h2 { max-width: 13ch; margin: 0; font-family: var(--head); font-size: 2.85rem; font-weight: 800; line-height: 1.08; } .feature-copy p { margin: 0; color: var(--muted); font-size: 1.06rem; font-weight: 600; } .feature-split .editorial-photo { max-width: 100%; } .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .two-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .card, .step, .faq-item, .article-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 24px; } .card-top { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 18px; } .service-icon, .step-icon { display: inline-grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--accent-2) 34%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 10%, var(--paper)); color: var(--accent-2); } .service-icon svg, .step-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .step-icon { margin-bottom: 18px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--paper)); border-color: color-mix(in srgb, var(--accent) 34%, transparent); } .card, .step { overflow: hidden; } /* The rainbow's main home: a thin line across the top of every icon card (service and step cards), clipped to its corners. */ .card::before, .step::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--spectrum); } .card-media { margin: -24px -24px 20px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; } .card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .blog-grid .card-media img { aspect-ratio: 16 / 9; } .card:has(.card-media)::before { display: none; } .card h3, .step h3, .faq-item h3, .article-card h3 { margin: 0 0 12px; font-family: var(--head); font-size: 1.38rem; line-height: 1.18; } .card p, .step p, .faq-item p, .article-card p { margin: 0; color: var(--muted); } .card ul, .check-list { display: grid; gap: 7px; margin: 18px 0 0; padding: 0; color: var(--muted); font-size: 0.94rem; list-style: none; } .card li, .check-list li { position: relative; padding-left: 15px; } .card li::before, .check-list li::before { content: ""; position: absolute; top: 0.72em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .portrait, .location-photo, .editorial-photo { position: relative; margin: 0; width: 100%; min-width: 0; } .portrait { max-width: 460px; justify-self: center; } .editorial-photo { max-width: 620px; } .portrait::before, .location-photo::before, .editorial-photo::before { content: ""; position: absolute; inset: 24px -16px -16px 24px; z-index: -1; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg, color-mix(in srgb, var(--paper-2) 62%, #ffffff), var(--paper-2) 70%); } .location-photo::before { inset: 20px 20px -16px -16px; } .editorial-photo::before { inset: 18px -14px -14px 18px; } .portrait img { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; object-position: center top; } .location-photo img { width: 100%; aspect-ratio: 16 / 11; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; } .editorial-photo img { width: 100%; aspect-ratio: 16 / 10; max-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; } .editorial-photo + .rich-copy, .editorial-photo + .three-grid { margin-top: 34px; } .image-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .image-row.four-col { grid-template-columns: repeat(4, minmax(0, 1fr)); } .photo-tile { position: relative; min-width: 0; aspect-ratio: 16 / 10; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); } .photo-tile img { width: 100%; height: 100%; object-fit: cover; } .photo-tile figcaption { position: absolute; right: 12px; bottom: 12px; left: 12px; width: fit-content; max-width: calc(100% - 24px); border-radius: 999px; background: rgba(53, 40, 31, 0.78); color: #ffffff; font-size: 0.72rem; font-weight: 900; line-height: 1; padding: 8px 10px; text-transform: uppercase; } .fact-list, .cred-grid { display: grid; gap: 10px; margin-top: 22px; } .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact-list div, .cred-grid span { position: relative; border-left: 4px solid var(--accent); border-image: var(--spectrum-down) 1; background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 92%, transparent), color-mix(in srgb, var(--paper) 48%, transparent)); color: var(--ink); font-size: 0.9rem; font-weight: 800; padding: 10px 12px; } .fact-list div:has(.fact-icon) { min-height: 58px; padding-left: 48px; } .fact-icon { position: absolute; top: 12px; left: 13px; display: inline-grid; width: 24px; height: 24px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); border-radius: 50%; color: var(--accent-2); font-size: 0.78rem; font-weight: 900; line-height: 1; } .fact-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } /* Each row: a bold title, then the details in regular weight. */ .fact-list h3 { margin: 0 0 3px; font-size: 1rem; font-weight: 800; line-height: 1.25; } .fact-list p { margin: 0; color: var(--muted); font-size: 0.98rem; font-weight: 400; line-height: 1.5; } .article-card span { display: inline-flex; margin-bottom: 22px; border-bottom: 2px solid var(--accent); color: var(--accent); font-size: 0.78rem; font-weight: 900; line-height: 1.2; padding-bottom: 6px; text-transform: uppercase; } .article-card { display: flex; flex-direction: column; align-items: flex-start; } .article-card .card-media { display: block; align-self: stretch; } .article-card h3 a { color: inherit; text-decoration: none; } .article-card h3 a:hover, .article-card h3 a:focus-visible, .card-media:hover + span + h3 a, .card-media:focus-visible + span + h3 a { outline: none; color: var(--accent-hover); } .article-link { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; margin-top: auto; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 9%, var(--paper)); color: var(--accent-hover); font-size: 0.84rem; font-weight: 900; line-height: 1.1; padding: 10px 13px; text-decoration: none; transition: background-color 200ms ease, color 200ms ease; } .article-card p + .article-link { margin-top: 20px; } .article-link:hover, .article-link:focus-visible { outline: none; background: var(--accent); color: #ffffff; } .article-link:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; } .article-hero .wrap { max-width: 1020px; } .back-link { display: flex; width: fit-content; margin-bottom: 22px; color: rgba(255, 255, 255, 0.82); font-size: 0.82rem; font-weight: 900; text-decoration: none; } .back-link:hover, .back-link:focus-visible { outline: none; color: #ffffff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .article-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; } .article-meta span { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #ffffff; font-size: 0.78rem; font-weight: 900; line-height: 1; padding: 9px 11px; } .article-section { padding-top: 72px; } .article-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(260px, 340px); gap: 64px; align-items: start; } .article-main { min-width: 0; } .article-main .lead { margin: 0 0 28px; color: var(--ink); font-size: 1.34rem; font-weight: 500; line-height: 1.52; } .article-main p { margin: 0 0 20px; color: var(--muted); } .article-main h2 { margin: 42px 0 14px; color: var(--ink); font-family: var(--head); font-size: 2.05rem; font-weight: 800; line-height: 1.12; } .article-main blockquote { margin: 40px 0; border-left: 6px solid var(--accent); border-image: var(--spectrum-down) 1; background: color-mix(in srgb, var(--paper) 78%, transparent); box-shadow: var(--shadow); padding: 26px 28px; } .article-main blockquote p { margin: 0; color: var(--ink); font-family: var(--head); font-size: 1.72rem; font-weight: 800; line-height: 1.2; } .article-image { margin: 42px 0; } .article-image img { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; } .article-image figcaption { margin-top: 10px; color: var(--muted); font-size: 0.84rem; font-weight: 700; } .article-aside { position: sticky; top: var(--header-space); display: grid; gap: 16px; } .aside-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 22px; } .aside-card img { width: 86px; height: 86px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; object-position: center top; } .aside-card h2 { margin: 0 0 10px; font-family: var(--head); font-size: 1.35rem; font-weight: 800; line-height: 1.16; } .aside-card p { margin: 0; color: var(--muted); font-size: 0.94rem; } .aside-card .button { width: 100%; margin-top: 18px; } .related-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .related-list a { display: block; border-left: 4px solid var(--accent); border-image: var(--spectrum-down) 1; background: color-mix(in srgb, var(--paper) 76%, transparent); color: var(--ink); font-size: 0.92rem; font-weight: 900; line-height: 1.25; padding: 10px 12px; text-decoration: none; transition: background-color 200ms ease, transform 260ms var(--ease-out); } .related-list a:hover, .related-list a:focus-visible { outline: none; background: color-mix(in srgb, var(--accent) 12%, var(--paper)); transform: translateX(3px); } .form-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 24px; } .form-card .field label { color: var(--muted); } .form-card .field input, .form-card .field select, .form-card .field textarea { border-color: var(--line); background: color-mix(in srgb, var(--paper) 72%, #ffffff); color: var(--ink); transition: border-color 180ms ease; } .form-card .field ::placeholder { color: color-mix(in srgb, var(--muted) 68%, var(--paper)); opacity: 1; } .form-card .field input:focus, .form-card .field select:focus, .form-card .field textarea:focus { border-color: var(--accent-2); outline: 2px solid var(--accent-2); outline-offset: 2px; } /* Olive deepening into spruce, like a forest edge at dusk. The text side stays the original olive, so its contrast never drops below what it had as a flat colour. */ .final { position: relative; overflow: hidden; background: linear-gradient(115deg, var(--primary) 0%, #4f5e41 55%, #3e5445 100%); color: var(--inverse); } .final .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) auto; gap: 28px; align-items: center; } .final h2, .final p { color: var(--inverse); } .final p { color: rgba(255, 255, 255, 0.86); margin-top: 12px; } .footer { position: relative; color: var(--muted); font-size: 0.84rem; padding: 24px 28px; } /* A fine rainbow line signs off every page, fading out towards both edges. */ .footer::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--spectrum); opacity: 0.8; -webkit-mask-image: linear-gradient(90deg, transparent, #000000 18%, #000000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000000 18%, #000000 82%, transparent); } .footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; } @media (max-width: 1180px) { .hero-grid, .section-head, .two-col, .location-grid, .contact-grid, .feature-split, .article-layout, .final .wrap { grid-template-columns: 1fr; } .hero-grid { gap: 36px; align-items: start; } /* Single-column heroes stack text (and the start card) to the bottom edge, so the photo fades over a short fixed distance below the content instead of a third of it. */ .hero, .page-hero { --hero-fade: linear-gradient(to top, transparent 12px, #000000 88px); } .booking-panel { max-width: 560px; margin-inline: auto; } .hero-title, .page-title { font-size: 3.65rem; } .section-head h2, .two-col h2, .location-copy h2, .contact-grid h2, .feature-copy h2, .final h2 { font-size: 2.45rem; max-width: 18ch; } .section-head { gap: 18px; } .two-col, .location-grid, .contact-grid { gap: 40px; } .two-col:has(> h2:first-child) { gap: 20px; } .feature-split { gap: 34px; } /* Once text and photo stack, the photo always leads its section, whichever side it takes on desktop. Otherwise a photo that closes one section runs into the photo opening the next. Only the visual order changes; screen readers and keyboard focus keep the source order. */ .two-col > figure, .feature-split > figure, .location-grid > figure { order: -1; } .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .image-row.four-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Icon menu below 1024px, where the full menu stops fitting on one line at 16px. Tablets keep the floating header bar and open the menu as a panel just below it; phones (760px and down) switch to a solid bar and a full-width panel further below. */ @media (max-width: 1023px) { .site-nav { position: relative; } /* Three-line menu icon that turns into an × while the menu is open. The word "Menu" stays in the markup but is moved out of sight, and screen readers get the checkbox's label "Avaa valikko". The middle line is a background, so the two pseudo-elements are free for the outer lines. */ .nav-toggle-button { position: relative; display: block; width: 42px; height: 42px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: var(--radius); background: linear-gradient(#ffffff, #ffffff) center / 20px 2px no-repeat; color: transparent; cursor: pointer; text-indent: 200%; white-space: nowrap; transition: background-size 180ms ease; } .nav-toggle-button::before, .nav-toggle-button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; border-radius: 1px; background: #ffffff; transition: transform 260ms var(--ease-out); } .nav-toggle-button::before { transform: translateY(-6px); } .nav-toggle-button::after { transform: translateY(6px); } .nav-toggle:focus-visible + .nav-toggle-button { outline: 2px solid #ffffff; outline-offset: 3px; } .nav-toggle:checked + .nav-toggle-button { background-size: 0 2px; } .nav-toggle:checked + .nav-toggle-button::before { transform: rotate(45deg); } .nav-toggle:checked + .nav-toggle-button::after { transform: rotate(-45deg); } .nav-links { position: absolute; top: calc(100% + 8px); right: -1px; left: -1px; display: none; grid-template-columns: 1fr; gap: 8px; max-height: calc(100vh - var(--header-space) - 16px); max-height: calc(100dvh - var(--header-space) - 16px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); background: #35281f; box-shadow: 0 24px 40px rgba(33, 21, 13, 0.35); padding: 12px; } .nav-toggle:checked ~ .nav-links { display: grid; } .nav-links a { display: block; border-radius: var(--radius); background: rgba(255, 255, 255, 0.08); font-size: 1.08rem; padding: 12px 13px; } .nav-links .nav-cta { text-align: center; padding: 13px; } .nav-dropdown { display: block; width: 100%; } .nav-parent { justify-content: space-between; } .nav-caret { display: none; } .nav-dropdown::before { display: none; } .nav-dropdown-panel { position: static; z-index: auto; min-width: 0; margin-top: 8px; border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); box-shadow: none; opacity: 1; visibility: visible; transform: none; } .nav-dropdown-panel a { color: #ffffff; font-size: 1.02rem; padding: 11px 13px; white-space: normal; } .nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus-visible { background: rgba(255, 255, 255, 0.12); color: #ffffff; } } @media (max-width: 760px) { :root { --header-space: 70px; } body { font-size: 16px; padding-top: var(--header-space); } .site-header { padding: 0; background: #35281f; } .site-nav { width: 100%; display: grid; grid-template-columns: 1fr auto; border: 0; border-radius: 0; align-items: center; background: #35281f; gap: 12px; padding: 14px 18px; } .brand-link { gap: 3px; font-size: 1rem; } .brand-link span { font-size: 0.82rem; } /* Phones: the menu panel hangs full width straight off the solid header bar. */ .nav-links { top: 100%; right: 0; left: 0; max-height: calc(100vh - var(--header-space)); max-height: calc(100dvh - var(--header-space)); border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0; padding: 12px 18px 18px; } .hero { min-height: auto; } .hero-grid { min-height: auto; width: calc(100% - 28px); padding: 64px 0 96px; } .page-hero { padding-inline: 18px; } .page-hero .wrap { padding: 64px 0 96px; } .hero-title, .page-title { font-size: 2.45rem; line-height: 1.08; } .hero-copy, .page-copy { font-size: 1rem; } .hero-actions, .button-row { align-items: stretch; flex-direction: column; } .button { width: 100%; } .section { padding: 64px 18px; } .section-head h2, .two-col h2, .location-copy h2, .contact-grid h2, .feature-copy h2, .article-main h2, .final h2 { font-size: 2.15rem; line-height: 1.12; max-width: 18ch; } .article-layout { gap: 40px; } .article-main .lead { font-size: 1.12rem; } .article-main blockquote { padding: 22px; } .article-main blockquote p { font-size: 1.35rem; } .article-aside { grid-template-columns: 1fr; } .portrait, .editorial-photo { max-width: 100%; } .portrait img { max-height: 520px; } .card-grid, .three-grid, .two-grid, .cred-grid, .blog-grid, .image-row { grid-template-columns: 1fr; } .image-row.four-col { grid-template-columns: 1fr; } } @media print { .site-header { position: absolute; } .reveal { opacity: 1 !important; animation: none !important; } } /* Motion and small visual polish. Anything that moves on its own waits for prefers-reduced-motion: no-preference, and the movement stays short and soft: the site should feel calm, not busy. */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-settle: cubic-bezier(0.2, 0.7, 0.2, 1); } ::selection { background: color-mix(in srgb, var(--accent) 28%, #ffffff); color: var(--ink); } p { text-wrap: pretty; } .site-nav, .hero, .page-hero, .final { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .article-card span, .photo-tile figcaption { letter-spacing: 0.04em; } /* Warm light falling across the closing call to action, and a faint northern glow rising on the button side, away from the text. */ .final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 140% at 100% 0%, rgba(201, 140, 90, 0.2), transparent 60%), radial-gradient(60% 110% at 72% 115%, rgba(127, 186, 160, 0.16), transparent 62%); pointer-events: none; } .final .wrap { position: relative; } /* Desktop nav: the underline draws in from the left instead of snapping on. */ @media (width > 1023px) { .nav-links > a:not(.nav-cta), .nav-parent { position: relative; } .nav-links > a:not(.nav-cta)::after, .nav-parent::after { content: ""; position: absolute; right: 0; bottom: -5px; left: 0; height: 2px; border-radius: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 280ms var(--ease-out); } .nav-links > a:not(.nav-cta):hover, .nav-links > a:not(.nav-cta):focus-visible, .nav-links .nav-parent:hover, .nav-links .nav-parent:focus-visible { text-decoration: none; } .nav-links > a:not(.nav-cta):hover::after, .nav-links > a:not(.nav-cta):focus-visible::after, .nav-dropdown:hover .nav-parent::after, .nav-dropdown:focus-within .nav-parent::after { transform: scaleX(1); } } /* Blog cards are mostly link, so the whole card answers the pointer. */ @media (hover: hover) { .article-card { transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out); } .article-card:hover { transform: translateY(-4px); box-shadow: 0 28px 64px rgba(89, 54, 35, 0.24); } .card-media img { transition: transform 900ms var(--ease-out); } .article-card:hover .card-media img { transform: scale(1.04); } } @media (prefers-reduced-motion: no-preference) { /* Arriving on a page: the hero text rises in line by line. */ .hero-grid > div > *, .page-hero .wrap > *, .booking-panel { animation: rise-in 900ms var(--ease-out) backwards; } .hero-grid > div > :nth-child(2), .page-hero .wrap > :nth-child(2) { animation-delay: 90ms; } .hero-grid > div > :nth-child(3), .page-hero .wrap > :nth-child(3) { animation-delay: 180ms; } .hero-grid > div > :nth-child(4), .page-hero .wrap > :nth-child(4) { animation-delay: 260ms; } .hero-grid > div > :nth-child(n + 5), .page-hero .wrap > :nth-child(n + 5) { animation-delay: 330ms; } .booking-panel { animation-duration: 1100ms; animation-delay: 300ms; } .kicker::after { animation: draw-line 1000ms var(--ease-out) 380ms backwards; } /* Further down, blocks rise in once as they are reached (see assets/site.js). */ .reveal:not(.is-visible) { opacity: 0; } .reveal.is-visible { animation: rise-in 900ms var(--ease-out) var(--reveal-delay, 0ms) backwards; } /* The paper card behind a photo slides out from under it a moment later. */ .reveal.is-visible:is(.portrait, .editorial-photo, .location-photo)::before { animation: backing-settle 1100ms var(--ease-out) calc(var(--reveal-delay, 0ms) + 180ms) backwards; } @media (max-width: 1023px) { .nav-toggle:checked ~ .nav-links { animation: menu-drop 260ms var(--ease-out); } } /* Wide screens show most of the hero photo: let it settle into place, like a slow breath out. */ @media (width > 1180px) { .hero::before, .page-hero::before { animation: hero-settle 2600ms var(--ease-settle) backwards; } } } .location-photo { --backing-from: 12px -12px; } /* Blog article: a thin reading-progress line along the top edge. It only moves when the reader scrolls. */ @supports (animation-timeline: view()) { .article-main { view-timeline: --article block; } .article-main::before { content: ""; position: fixed; top: 0; right: 0; left: 0; z-index: 20; height: 3px; background: var(--spectrum); animation: read-progress linear both; animation-timeline: --article; animation-range: contain 0% contain 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; } } @keyframes rise-in { from { opacity: 0; translate: 0 18px; } } @keyframes draw-line { from { transform: scaleX(0); } } @keyframes backing-settle { from { opacity: 0; translate: var(--backing-from, -12px -12px); } } @keyframes hero-settle { from { scale: 1.045; } } @keyframes menu-drop { from { opacity: 0; translate: 0 -6px; } } /* Reveals the spectrum from its red end rather than squeezing it, so reading moves through the colours. */ @keyframes read-progress { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }