/* ==========================================================================
STTS CHILD — front-end stylesheet
Ported from the validated Hybrid prototype (prototypes/hybrid/styles.css)
per DESIGN_SYSTEM.md. Editorial-first institutional system + Archive/Index
logic for events/history. Class names use the stts- prefix throughout
(CSS architecture requirement) instead of the prototype's unprefixed
names. No values here are invented — every token traces back to
DESIGN_SYSTEM.md; where this file adds something the prototype didn't
need (e.g. long-form WP core-block styles), it's noted inline.
========================================================================== */
/* ===== 2026-09-12 (Phase 11) CORRECTION =====
Tokens rewritten from the Hybrid palette/fonts to the LEGACY production
site's measured values — see DESIGN_SYSTEM.md's correction section for
methodology. Colors are directly measured (computed styles, live legacy
site). Fonts are the EXACT legacy families — Tomorrow (headings/nav),
Roboto (body), Inconsolata (section labels) — self-hosted locally via
assets/css/fonts.css (see assets/fonts/LICENSE-fonts.md for licensing/
provenance: all three SIL OFL 1.1, extracted from the legacy site's own
already-self-hosted copies in the 2026-08-24 backup). No runtime request
to Google Fonts or any other third-party host. An initial pass here used
system-font approximations pending Tiago's explicit approval to add these
as a real font dependency; that approval was given 2026-09-12 and this
now uses the real fonts. */
:root {
--stts-color-bg: #ffffff;
--stts-color-surface: #ffffff;
--stts-color-ink: #000000;
/* Not directly measured on a body-copy element (only on a cookie-notice
paragraph); kept as the closest observed muted-text value pending a
better sample. */
--stts-color-ink-soft: #687279;
--stts-color-accent: #ca5dd0;
/* Not directly measured — legacy never showed a distinct darker/hover
accent state; this is a computed darkening of --stts-color-accent,
not an observed value. */
--stts-color-accent-ink: var( --stts-color-accent );
/* Not directly measured — legacy has no distinct pale-accent-wash
region; approximated as a light tint of the sage-green label color
rather than inventing an unrelated new hue. */
--stts-color-accent-tint: #eaf3e9;
/* Sage green — directly measured (section-label / board-name color). */
--stts-color-sage: #82ba7f;
/* Not directly measured — no clearly visible rule/border color found in
the legacy capture; kept neutral pending a closer audit. */
--stts-color-rule: #e0e0e0;
--stts-color-border-interactive: var( --stts-color-ink-soft );
--stts-color-focus: #1656c7;
--stts-color-upcoming-bg: #eaf3e9;
/* Real legacy fonts, self-hosted — see assets/css/fonts.css. System
fallbacks kept after each so a slow/blocked font load still renders
sensibly, per normal font-stack practice. */
--stts-font-serif: "Tomorrow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--stts-font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--stts-font-mono: "Inconsolata", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
--stts-font-heading-weight: 700;
--stts-font-nav-weight: 500;
--stts-space-1: 0.5rem;
--stts-space-2: 1rem;
--stts-space-3: 1.5rem;
--stts-space-4: 2rem;
--stts-space-5: 3rem;
--stts-space-6: 4rem;
--stts-space-7: 6rem;
--stts-content-max: 42rem;
--stts-home-prose-max: 70rem;
--stts-wide-max: 75rem;
--stts-radius-sm: 3px;
}
/* Scope resets to this theme's own containers only — avoid a global `*`
reset that could fight Blocksy's own box-sizing rules unpredictably. */
.stts-site-header,
.stts-site-footer,
#stts-main {
box-sizing: border-box;
}
#stts-main *,
#stts-main *::before,
#stts-main *::after,
.stts-site-header *,
.stts-site-footer * {
box-sizing: border-box;
}
body {
/* 2026-09-12: !important on color/background — verified via computed
styles that Blocksy's own dynamic customizer CSS (generated from its
default color palette, not a value we set) was overriding these with
a navy/blue-gray scheme regardless of our theme.json/CSS custom
property values, because Blocksy injects that stylesheet outside the
normal wp_enqueue_style dependency order. */
background: var( --stts-color-bg ) !important;
color: var( --stts-color-ink ) !important;
/* 2026-09-12: legacy uses Roboto for body text, Tomorrow only for
headings/titles (which set --stts-font-serif explicitly below) — the
Hybrid version had this inverted (serif-by-default, sans as the
override).
2026-09-14 (Phase 12 typography correction): !important added here
too — found during the legacy-typography comparison that computed
font-family was NOT actually Roboto (it read a system-font stack with
Roboto only as a low-priority fallback), the exact same
Blocksy-dynamic-CSS-wins issue already fixed above for color/
background but missed for font-family. Confirmed via computed styles
before and after. */
font-family: var( --stts-font-sans ) !important;
font-size: 1rem;
line-height: 1.65;
overflow-x: hidden;
}
/* Same Blocksy-override issue as body, for headings specifically — they
never had an explicit color rule of their own before (silently inheriting
body's, itself overridden), so Blocksy's own heading-color default won. */
#stts-main h1,
#stts-main h2,
#stts-main h3,
#stts-main h4 {
color: var( --stts-color-ink ) !important;
}
@media ( prefers-reduced-motion: reduce ) {
.stts-site-header,
.stts-site-header *,
.stts-site-footer *,
#stts-main * {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
/* Belt-and-braces alongside header-scroll.js's own reduced-motion check
(it never adds .stts-header-hide in that case): even if it somehow
did, native browser smooth-scrolling itself must not run either. */
html {
scroll-behavior: auto !important;
}
}
/* 2026-09-14 (Phase 12): matches the legacy site's own global rule
(Blocksy's base CSS sets `html { scroll-behavior: smooth }` site-wide —
confirmed directly in the legacy theme's compiled CSS, not invented).
This is the entire mechanism behind the legacy anchor-click smoothness:
native browser smooth scrolling, no custom JS duration/easing. Overridden
to `auto` under prefers-reduced-motion above. */
html {
scroll-behavior: smooth;
}
.stts-wrap {
max-width: var( --stts-wide-max );
margin-inline: auto;
padding-inline: var( --stts-space-4 );
}
.stts-sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect( 0 0 0 0 );
white-space: nowrap;
border: 0;
padding: 0;
margin: -1px;
}
/* Defensive fallback for unsupported/changed Blocksy versions. The current
parent callback is removed in inc/setup.php so normal rendered DOM contains
only the localized STTS link; if Blocksy changes its callback implementation,
never expose the parent's dead #main target to keyboard navigation. */
body > .skip-link.screen-reader-text {
display: none !important;
}
[hidden] {
display: none !important; /* documented exception: guarantees the native
hidden attribute wins over the mobile archive-table's CSS Grid
display override — see the "archive/index table" section below. */
}
.stts-skip-link {
position: absolute;
left: -999px;
background: var( --stts-color-ink );
color: #fff;
padding: var( --stts-space-2 ) var( --stts-space-3 );
z-index: 100;
font-family: var( --stts-font-sans );
}
.stts-skip-link:focus {
left: var( --stts-space-2 );
top: var( --stts-space-2 );
}
.stts-site-header a:focus-visible,
.stts-site-footer a:focus-visible,
#stts-main a:focus-visible,
#stts-main button:focus-visible,
.stts-site-header button:focus-visible {
outline: 3px solid var( --stts-color-focus );
outline-offset: 3px;
}
.stts-mono {
font-family: var( --stts-font-mono );
color: var( --stts-color-sage );
font-variant-numeric: tabular-nums;
}
/* One-page anchor navigation (PHASE 9A; offset corrected 2026-09-14 Phase 12
now that the header is sticky). --stts-header-height is measured and set
by assets/js/header-scroll.js (falls back to 0px, degrading gracefully
without JS — the header simply isn't sticky in that case either, so no
offset is needed). A small extra buffer beyond the exact header height so
a jumped-to heading doesn't sit flush under the header edge. This is the
same static-reserved-offset approach the legacy site itself used
(DESIGN_SYSTEM.md: "scroll-margin-top: 103px already set on anchor
targets — matches header height"), just computed instead of hardcoded so
it can't drift out of sync with the header's actual height. Scoped to
elements that actually carry an id (every .stts-section and the footer,
per the "Etusivu – runko" pattern and footer.php) rather than a blanket
[id] selector on the whole document. */
.stts-section[id],
.stts-site-footer[id],
/* 2026-09-14 (Phase 12g): #tausta is a heading *inside* the #seura
section wrapper (not its own .stts-section — see
migration/import-pages.php's #seura/Tausta comment for why), so it needs
this offset listed explicitly rather than picked up by the .stts-section
selector above. */
#tausta {
scroll-margin-top: calc( var( --stts-header-height, 0px ) + var( --stts-space-2 ) );
}
/* ---------------- header / navigation ---------------- */
/* 2026-09-14 (Phase 12 — legacy visual/interaction recovery): persistent
sticky header with a hide-on-scroll-down/reveal-on-scroll-up "slide"
transition, reproducing the legacy site's measured Blocksy configuration
(has_sticky_header: yes, sticky_effect: slide, sticky_offset: 0,
has_transparent_header: no) — see header-scroll.js's header comment for
the full sourcing. `position: sticky` (not `fixed` + JS positioning like
Blocksy's own implementation) is the simplest robust way to get the same
visible result for a full-width top header; header-scroll.js only needs
to toggle .stts-header-hide based on scroll direction. Transition timing
(0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955)) is Blocksy's own measured
default, applied verbatim, not approximated. */
.stts-site-header {
border-bottom: 1px solid var( --stts-color-rule );
padding-block: var( --stts-space-2 );
background: var( --stts-color-bg );
position: sticky;
top: 0;
z-index: 50;
transition: transform 0.2s cubic-bezier( 0.455, 0.03, 0.515, 0.955 ),
box-shadow 0.2s cubic-bezier( 0.455, 0.03, 0.515, 0.955 );
}
.stts-site-header.stts-header-hide {
transform: translateY( -100% );
}
/* Legacy's own sticky state adds a shadow once actually stuck (its base
header has no border/shadow at rest beyond the 1px rule already set
above) — reproduced here rather than left flat, so the sticky header
reads as "lifted" above scrolling content instead of blending into it. */
.stts-site-header.stts-header-stuck {
box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
}
.stts-header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var( --stts-space-2 ) var( --stts-space-4 );
justify-content: space-between;
}
.stts-site-name {
margin: 0;
line-height: 0; /* the is the only visible content; no inherited
line-box gap beneath it */
}
.stts-site-logo-link {
display: inline-block;
}
/* 2026-09-12 (Phase 11 QA pass): height-constrained, width:auto — the SVG's
own viewBox (238.38 x 104.74) sets the aspect ratio, so this can never
stretch or distort the artwork. ~70px tall at desktop matches the
legacy site's own measured logo height exactly (159.3 x 70px measured on
the restored legacy site); scales down on narrow viewports via the media
query below, same aspect ratio throughout. */
.stts-site-logo {
display: block;
height: 70px;
width: auto;
}
/* Real accessible text for screen readers/SEO — not a second visible
wordmark next to the logo image, matching legacy's header (logo only,
no adjacent text label). */
.stts-site-name-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
border: 0;
}
.stts-nav-toggle {
display: none;
align-items: center;
gap: 0.4em;
min-height: 44px;
min-width: 44px;
padding: 0.5em 0.8em;
background: transparent;
border: 1px solid var( --stts-color-border-interactive );
border-radius: var( --stts-radius-sm );
color: var( --stts-color-ink );
font-family: var( --stts-font-sans );
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
}
.stts-nav-toggle:hover {
border-color: var( --stts-color-ink );
}
.stts-nav-toggle-icon {
width: 1.1em;
height: 0.8em;
position: relative;
display: inline-block;
}
.stts-nav-toggle-icon::before,
.stts-nav-toggle-icon::after,
.stts-nav-toggle-icon span {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background: currentColor;
}
.stts-nav-toggle-icon::before { top: 0; }
.stts-nav-toggle-icon span { top: 50%; margin-top: -1px; }
.stts-nav-toggle-icon::after { bottom: 0; }
.stts-nav-panel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var( --stts-space-3 ) var( --stts-space-4 );
}
.stts-primary-nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var( --stts-space-4 );
margin: 0;
padding: 0;
/* 2026-09-12: legacy nav is set in Tomorrow (the heading font), not
Roboto — measured directly (computed style) on the legacy site. */
font-family: var( --stts-font-serif );
font-weight: var( --stts-font-nav-weight );
font-size: 0.95rem;
}
.stts-primary-nav a {
color: var( --stts-color-ink );
text-decoration: none;
min-height: 44px;
display: inline-flex;
align-items: center;
border-bottom: 2px solid transparent;
}
.stts-primary-nav a.current-menu-item,
.stts-primary-nav li.current-menu-item > a,
/* 2026-09-14 (Phase 12b): a top-level parent (Tapahtumat, Seura) whose own
URL doesn't exactly match the current one but whose child does (e.g. the
filtered archive, /tapahtumat/?type=seminaari) gets WordPress core's own
current-menu-ancestor/current-menu-parent classes rather than
current-menu-item — style it the same way, so the parent still visibly
shows "you're in this section." */
.stts-primary-nav li.current-menu-ancestor > a,
.stts-primary-nav li.current-menu-parent > a,
.stts-primary-nav a[aria-current="page"] {
border-bottom-color: var( --stts-color-accent );
color: var( --stts-color-accent-ink );
}
.stts-primary-nav a:hover,
.stts-primary-nav a:focus-visible {
border-bottom-color: var( --stts-color-ink );
}
.stts-lang-switch {
list-style: none;
display: flex;
gap: var( --stts-space-2 );
margin: 0;
padding: 0;
font-family: var( --stts-font-sans );
font-size: 0.85rem;
}
.stts-lang-switch a {
color: var( --stts-color-ink-soft );
text-decoration: none;
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.stts-lang-switch a[aria-current="true"] {
color: var( --stts-color-ink );
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.stts-nav-empty-notice {
font-family: var( --stts-font-sans );
font-size: 0.85rem;
color: var( --stts-color-ink-soft );
}
/* ---------------- primary-nav submenu (Phase 12, 2026-09-14) ----------------
Restores the real legacy hierarchy (Seura>Tausta/Tehtävä/Johtokunta,
Tapahtumat>Seminaarit/Symposiumit) — see
migration/import-pages.php's stts_migration_ensure_primary_menu() and
assets/js/submenu.js's header comment for the full sourcing/rationale.
`.menu-item-has-children`/`.sub-menu` are WordPress core's own
Walker_Nav_Menu class names (no custom walker written for this). */
.stts-primary-nav .menu-item-has-children {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.stts-primary-nav .sub-menu {
/* flex-basis:100% is the standard flexbox trick that forces this onto
its own row below the link+toggle, which stay side by side on the
same row above it, at every viewport — no separate mobile override
of the parent's flex-direction needed. */
flex-basis: 100%;
list-style: none;
margin: 0;
padding: 0;
display: none;
flex-direction: column;
gap: var( --stts-space-1 );
}
/* Desktop pointer (:hover) and keyboard (:focus-within, native — covers Tab
landing on any link inside the submenu) both work with zero JS.
.stts-submenu-open is the one JS-driven addition, for touch/pointer users
with no hover state (see submenu.js). */
.stts-primary-nav .menu-item-has-children:hover > .sub-menu,
.stts-primary-nav .menu-item-has-children:focus-within > .sub-menu,
.stts-primary-nav .menu-item-has-children.stts-submenu-open > .sub-menu {
display: flex;
}
/* 2026-09-15 (Phase 12o) — fixes a real, reproducible defect found by direct
Chrome interaction testing: clicking the toggle to explicitly CLOSE an
open submenu (or pressing Escape) correctly cleared aria-expanded and the
.stts-submenu-open class, but the panel stayed visible anyway, because the
very click/keypress that closes it never moves the pointer away from the
parent
or the focus off the toggle button — so :hover and
:focus-within (the two passive, JS-independent visibility rules above)
were still individually satisfied a moment after the "close". This is not
a display:none override bolted on top of an unrelated bug — it's the
explicit-close state these two passive selectors were always missing:
submenu.js now adds .stts-submenu-force-closed for exactly as long as the
pointer/focus session that triggered the close is still "stuck" over the
trigger, and removes it the moment the pointer genuinely leaves (mouseleave)
or focus genuinely moves elsewhere (focusout to outside this
) — at
which point :hover/:focus-within naturally read false anyway, so normal
hover/keyboard behavior resumes untouched, with no new dead zone. Same
specificity as the three selectors above; this rule wins on source order
alone, so no !important is needed. */
.stts-primary-nav .menu-item-has-children.stts-submenu-force-closed > .sub-menu {
display: none;
}
.stts-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 32px;
margin-inline-start: 0.1em;
background: transparent;
border: none;
color: currentColor;
cursor: pointer;
font-size: 0.7em;
line-height: 1;
}
.stts-submenu-toggle[aria-expanded="true"] span {
display: inline-block;
transform: rotate( 180deg );
}
@media ( min-width: 721px ) {
.stts-primary-nav .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
background: var( --stts-color-surface );
border: 1px solid var( --stts-color-rule );
border-radius: var( --stts-radius-sm );
box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
padding: var( --stts-space-2 );
z-index: 60;
font-size: 0.85rem;
}
.stts-primary-nav .sub-menu a { min-height: 36px; }
}
@media ( max-width: 720px ) {
body.stts-nav-open { overflow: hidden; }
.stts-nav-toggle { display: inline-flex; margin-inline-start: auto; }
.stts-nav-toggle[aria-expanded="true"] {
position: fixed;
top: var( --stts-space-3 );
right: var( --stts-space-3 );
z-index: 101;
color: #fff;
background: transparent;
border-color: transparent;
padding: 0.5rem;
}
.stts-nav-toggle[aria-expanded="true"] .stts-nav-toggle-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect( 0 0 0 0 );
white-space: nowrap;
border: 0;
}
.stts-nav-toggle[aria-expanded="true"] .stts-nav-toggle-icon {
width: 1.5rem;
height: 1.5rem;
}
.stts-nav-toggle[aria-expanded="true"] .stts-nav-toggle-icon::before,
.stts-nav-toggle[aria-expanded="true"] .stts-nav-toggle-icon::after {
top: 50%;
bottom: auto;
transform-origin: center;
}
.stts-nav-toggle[aria-expanded="true"] .stts-nav-toggle-icon::before { transform: rotate( 45deg ); }
.stts-nav-toggle[aria-expanded="true"] .stts-nav-toggle-icon::after { transform: rotate( -45deg ); }
.stts-nav-toggle[aria-expanded="true"] .stts-nav-toggle-icon span { display: none; }
/* 2026-09-12 (Phase 11): restyled as a full-screen dark overlay to match
the ACTUAL legacy mobile menu — captured directly (not inferred from
desktop) at private-data/legacy-visual-baseline-2026-09-12/
mobile-menu-390-final.png and measured via computed styles:
overlay background rgba(18, 21, 25, 0.98) (near-black), inactive
links white/700-weight Roboto/20px, the current item in the same
magenta accent used everywhere else. The Hybrid version was a plain
light inline-expanding panel with a left-border current-indicator —
removed in favor of this measured treatment. */
.stts-nav-panel {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var( --stts-space-4 );
background: rgba( 18, 21, 25, 0.98 );
padding: var( --stts-space-4 );
}
.stts-nav-panel.is-collapsed { display: none; }
.stts-primary-nav ul {
flex-direction: column;
align-items: center;
gap: var( --stts-space-3 );
}
.stts-primary-nav a {
width: auto;
color: #fff;
font-family: var( --stts-font-sans );
font-weight: 700;
font-size: 1.25rem;
border-bottom: none;
}
.stts-primary-nav a.current-menu-item,
.stts-primary-nav li.current-menu-item > a,
.stts-primary-nav a[aria-current="page"] {
color: var( --stts-color-accent );
border-bottom-color: transparent;
}
.stts-primary-nav a:hover,
.stts-primary-nav a:focus-visible { color: var( --stts-color-accent ); }
.stts-lang-switch { gap: var( --stts-space-3 ); }
.stts-lang-switch a { color: #fff; }
/* Submenu, mobile overlay context (Phase 12): centered like the rest of
the overlay, visually nested under its parent rather than positioned
as a floating dropdown (the .sub-menu's flex-basis:100% above already
wraps it onto its own row below the link+toggle at every viewport;
only the desktop media query above additionally switches it to
position:absolute). The toggle is white to match the overlay's other
text/icons. */
.stts-primary-nav .menu-item-has-children {
justify-content: center;
}
.stts-primary-nav .sub-menu {
align-items: center;
padding-top: var( --stts-space-2 );
}
.stts-primary-nav .sub-menu a {
font-size: 1rem;
font-weight: 500;
}
.stts-submenu-toggle { color: #fff; }
}
/* 2026-09-14 (Phase 12c): the hardcoded Finnish/Swedish bilingual blocks
inside #seura/Tausta and #tehtava/Uppgift (see migration/import-pages.php
and inc/template-tags.php's stts_child_strip_secondary_language_blocks(),
which removes this element entirely on /en/) — spacing only. Body text
intentionally uses the same plain paragraph/list styling as the Finnish
content above it — same font, size, color, weight — per Tiago's explicit
"must not look smaller/secondary/disabled" instruction; nothing here
demotes it. */
.stts-secondary-language {
margin-top: var( --stts-space-4 );
}
/* The "***" divider between a Finnish section and its Swedish continuation
(stts_migration_bilingual_separator_html()). A literal, visible mark —
deliberately not a generic — kept restrained: existing mono/label
font, existing muted-ink color (no new color introduced), generous but
not oversized vertical rhythm, consistent with the site's editorial
identity rather than a page-builder divider widget. */
.stts-bilingual-separator {
margin-block: var( --stts-space-4 );
text-align: center;
font-family: var( --stts-font-mono );
font-size: 1rem;
letter-spacing: 0.2em;
color: var( --stts-color-ink-soft );
}
.stts-eyebrow {
/* 2026-09-12: legacy section/eyebrow labels are Inconsolata (monospace)
and sage-green, not the Hybrid sans+magenta treatment. */
font-family: var( --stts-font-mono );
text-transform: none;
letter-spacing: normal;
font-size: 1.25rem;
color: var( --stts-color-sage );
margin: 0 0 var( --stts-space-2 );
font-weight: 600;
}
.stts-lede {
font-size: 1.2rem;
line-height: 1.55;
color: var( --stts-color-ink-soft );
max-width: 38ch;
}
/* ---------------- page intro (Society/Events/Publications/Membership/single event) ---------------- */
.stts-page-intro {
padding-block: var( --stts-space-6 ) var( --stts-space-5 );
max-width: var( --stts-content-max );
}
#stts-main .stts-page-intro h1 {
font-family: var( --stts-font-serif );
font-weight: 700;
/* 2026-09-14 (Phase 12 typography correction): ceiling corrected from
2.7rem to 2.5rem (40px) to match the legacy site's measured H1 size
exactly (DESIGN_SYSTEM.md: "H1 (40px/700/line-height 60px)") — it was
previously overshooting by ~3px. line-height corrected from 1.15 to
1.5, the measured legacy ratio (60px / 40px) — this was the larger,
proportion-affecting gap: a much tighter line-height than legacy made
headings read as visually denser/smaller relative to body text and
section labels, independent of the font-size number itself. */
font-size: clamp( 1.9rem, 4.4vw, 2.5rem );
line-height: 1.5;
margin: 0 0 var( --stts-space-3 );
max-width: 20ch;
overflow-wrap: break-word;
/* 2026-09-12 (Phase 11 QA pass): found at 320px — a long Finnish compound
word (e.g. "taidekasvatuksen") can still exceed the line at the
smallest clamp() size and break-word forces a raw mid-word split with
no visual indicator. This is one of the three specific legacy mobile
defects this whole rebuild exists to fix (VISUAL_AUDIT.md/Phase 3:
"mid-word heading breaks") — reproducing it here would be a real
regression, not a style preference. hyphens:auto (with the page's
correct lang="fi"/"en" already in place) lets the browser insert a
proper hyphenation point instead of a raw break, in browsers that
support it; overflow-wrap:break-word remains as the fallback where
hyphenation isn't available. */
hyphens: auto;
}
.stts-page-intro .stts-lede { font-size: 1.1rem; max-width: 42ch; }
/* ---------------- sections ---------------- */
.stts-section { padding-block: var( --stts-space-5 ); }
/* 2026-09-15 (Phase 12q): the Events archive's own hero/lede (visible H1 +
introductory sentence + the .stts-page-intro spacing that came with them)
was removed per Tiago's direct visual review, so the filters/table start
essentially immediately below the persistent header — see
archive-stts_event.php's own comment. This overrides only this specific
section's top padding (a modest, ordinary content margin, not zero) —
.stts-section's shared padding-block-start is otherwise unchanged for
every other page that uses that class (e.g. the homepage pattern), and
this section's own bottom padding is untouched too. */
.stts-archive-top.stts-section { padding-block-start: var( --stts-space-3 ); }
.stts-home-current { padding-top: var( --stts-space-4 ); }
.home #stts-main .stts-section .stts-wrap.is-layout-constrained > * {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: var( --stts-home-prose-max );
}
/* 2026-09-15 (Phase 12r): per Tiago's direct visual review, the homepage's
featured-Event section heading ("Tuleva tapahtuma"/"Viimeisin tapahtuma" —
see stts_child_get_current_event_heading_text()) is deliberately NOT
styled as a large page-hero heading any more, even though it remains a
real
structurally (see shortcodes.php's stts_child_render_current_events_block()).
It reuses the same small, sage, monospace "section label" treatment
already established elsewhere on this exact homepage (.stts-eyebrow, e.g.
the "Seura" label above the Tausta H2) rather than inventing a new visual
language — a restrained section LABEL, with the actual visual weight
reserved for the Event's own title just below it (.stts-event-teaser-title). */
.stts-current-event-heading {
font-family: var( --stts-font-mono );
font-size: 1.25rem;
font-weight: 600;
color: var( --stts-color-sage );
margin: 0 0 var( --stts-space-3 );
}
#stts-main h2 {
font-family: var( --stts-font-serif );
font-weight: 700;
font-size: clamp( 1.75rem, 2.6vw, 2.1875rem );
line-height: 1.3;
margin: 0 0 var( --stts-space-3 );
max-width: 30ch;
}
#stts-main h3 {
font-family: var( --stts-font-serif );
font-weight: 700;
font-size: 1.15rem;
line-height: 1.3;
margin: 0 0 var( --stts-space-1 );
}
/* 2026-09-14 (Phase 12c): "Uppgift" (see migration/import-pages.php) is a
real