/* =================================================================
Famula — front-end base & component classes
These are styles that block patterns + custom templates rely on
but theme.json cannot express directly.
================================================================= */
/* ---- selection ---- */
::selection { background: var(--famula-orange); color: #fff; }
/* ---- the painters' stamp (core/image + style variation) ----
Colour (orange/red) is driven entirely by the block-style variation,
so a content editor flips it in one click from the Styles panel.
The badge art is painted as a background-image; the inner ![]()
is
kept (transparent) only for sizing + alt text. */
.is-style-famula-stamp-orange,
.is-style-famula-stamp-red {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.is-style-famula-stamp-red { background-image: url("../img/badge-red.png"); transform: rotate(-8deg); }
.is-style-famula-stamp-orange { background-image: url("../img/badge-orange.png"); transform: rotate(6deg); }
.is-style-famula-stamp-orange img,
.is-style-famula-stamp-red img {
display: block;
width: 100%;
height: auto;
opacity: 0;
}
/* ---- full-bleed bands sit flush: no page-colour stripe between top-level
sections (the design alternates solid bands edge-to-edge, each with its
own padding, so the 24px blockGap between them is removed) ---- */
.wp-site-blocks > * { margin-block-start: 0; }
/* Site-wide max width: above 2000px the whole site caps and centres, with the
cream root background showing as gutters — so zooming out / ultra-wide
screens stop stretching. Below 2000px everything stays fluid and the
vw-based planes track the boundary lines. (Planes are min(vw, px) so they
cap to the 2000 container's line proportions above the cap; see theme.json
layout + memory layout-two-tier.) */
.wp-site-blocks { max-width: 2000px; margin-inline: auto; }
/* Plugins inject tracking-pixel ![]()
elements as direct children; as
inline elements they create a ~25px line-box that pushes the whole site down
from the top. Make them block so they take no vertical line-box space. */
body > img { display: block; }
/* Header navy phone box — the global paragraph colour (navy) was overriding the
group's white, making the text the same shade as the navy background. */
.famula-header-actions .has-navy-background-color,
.famula-header-actions .has-navy-background-color :where(p, span) {
color: #fff !important;
}
/* Header action buttons equal height: the navy phone box (two lines) is taller,
so stretch the orange CTA button to match it. */
.famula-header-actions { align-items: stretch !important; }
.famula-header-actions .wp-block-buttons,
.famula-header-actions .wp-block-button { display: flex; align-items: stretch; }
.famula-header-actions .wp-block-button__link { display: flex; align-items: center; height: 100%; }
/* Famula logo: cap to 87% (designer) instead of the default 100%. */
.famula-header .wp-block-site-logo img { max-width: 87%; }
/* Option B — pixel-exact boundary-line alignment. Planes are now `%` of the
container (a single, scrollbar-excluded content frame), so the section bands
must have ZERO horizontal padding — otherwise a constrained block's `%`
resolves against the padded box and lands ~23px off its line. The bands keep
their vertical padding; horizontal gutters now come from the % planes.
(See memory layout-two-tier / layout-boundary-lines.) */
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > header > .wp-block-group,
.wp-site-blocks > footer > .wp-block-group {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Mobile: % planes would leave huge gutters, so go full-width with a small
fixed gutter instead. */
@media (max-width: 781px) {
:root {
--wp--style--global--content-size: 100%;
--wp--style--global--wide-size: 100%;
}
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > header > .wp-block-group,
.wp-site-blocks > footer > .wp-block-group {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
/* ---- full-bleed split band (photo one half, text panel the other). It spans
the full container (bounded only by the 2000px site cap): the photo runs
line 0 → line 3, the cream panel line 3 → line 7 with its copy inset to
line 4 (via the column's padding-left). ---- */
.famula-split-band { align-items: stretch; margin-block-start: 0; }
.famula-split-band > .wp-block-column {
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box; /* so the panel's % padding-left stays inside its 50% */
}
.famula-split-band > .wp-block-column > .wp-block-cover {
flex: 1 1 auto;
min-height: 360px;
margin-block-start: 0;
}
/* Cap the text-panel content so it doesn't stretch across wide screens
(the panel background still fills its half; only the copy is bounded). */
.famula-split-band > .wp-block-column.has-background > * {
max-width: 100%;
}
/* Designer keeps the CTA panel copy on a narrower measure: ~80% of the panel,
not edge-to-edge (desktop only; mobile stacks full width). */
@media (min-width: 782px) {
.famula-split-band > .wp-block-column.has-background > * { max-width: 80%; }
}
/* ---- Columns block style "Käänteinen järjestys" (is-style-famula-reverse) ----
Flips the two sides visually on desktop (image left ⇄ right) without touching
the markup. Desktop only: at ≤781px WP stacks the columns, so we keep DOM order
(e.g. text first, then image) for a natural mobile flow. */
@media (min-width: 782px) {
.wp-block-columns.is-style-famula-reverse {
flex-direction: row-reverse;
}
}
/* ---- Team-intro row pinned to the boundary-line grid (lines 0–7) ----
The row is align:full so it spans the full site width (line 0 → line 7). A
7-track grid mirrors the gaps between the lines (sum 100%, symmetric gutters),
so the text/photo edges land on exact lines on any viewport — pixel-consistent
with the hero and every align:wide section. Two configs, flipped with the
"Käänteinen järjestys" columns style (is-style-famula-reverse):
Default (text left): text = lines 2–3, photo = lines 3–6
Reversed (photo left): photo = lines 1–3, text = lines 4–5
Grid CSS line N+1 = boundary line N (e.g. grid-column 3/4 = lines 2→3). */
@media (min-width: 782px) {
.wp-block-columns.famula-team-row {
display: grid;
grid-template-columns: 5.74% 7.88% 36.38% 6.13% 30.25% 7.88% 5.74%;
align-items: center;
gap: 0;
}
/* grid-row:1 forces both onto the same row — without it, sparse auto-placement
drops the photo to row 2 in the reversed config (photo column < text column). */
.famula-team-row > .wp-block-column { flex: initial; width: auto; margin: 0; grid-row: 1; }
/* default: text left (lines 2–3), photo right (lines 3–6) */
.famula-team-row > .famula-team-text { grid-column: 3 / 4; }
.famula-team-row > .famula-team-photo { grid-column: 4 / 7; }
/* reversed: photo left (lines 1–3), text right (lines 4–5) */
.famula-team-row.is-style-famula-reverse > .famula-team-photo { grid-column: 2 / 4; }
.famula-team-row.is-style-famula-reverse > .famula-team-text { grid-column: 5 / 6; }
/* Photo fills the full row height (text stays centered). Without this, a tall
narrow text column makes the centered photo sit lower than the text. */
.wp-block-columns.famula-team-row > .famula-team-photo { align-self: stretch; }
.famula-team-row > .famula-team-photo > .wp-block-cover { height: 100%; }
/* keep the two CTAs side by side in the (narrow) text column */
.famula-team-row .wp-block-buttons { flex-wrap: nowrap; }
/* Designer keeps the heading + copy on a narrower measure: ~80% of the text
track width (lines 2–3 default / 4–5 reversed), not edge-to-edge. The ~20%
gap falls toward the photo side. */
.famula-team-row > .famula-team-text > * { max-width: 80%; }
}
/* ---- why-us "Me Famulalla" / "Tällaista jälkeä syntyy" row, pinned to the
boundary-line grid (lines 0–7) — SAME technique as .famula-team-row so the
edges land on the TRUE lines regardless of the band's padding:
photo = lines 1–3, text = lines 4–6.
(The earlier margin/wideSize version assumed the band's 32px padding was
CSS-zeroed; it isn't, so the row sat 28px right of line 1. The align:full
grid breaks out to the full site width, so the % tracks land on real lines.)
Desktop only; below 782px the columns stack. */
@media (min-width: 782px) {
.wp-block-columns.famula-why-row {
display: grid;
grid-template-columns: 5.74% 7.88% 36.38% 6.13% 30.25% 7.88% 5.74%;
align-items: center;
gap: 0;
}
.famula-why-row > .wp-block-column { flex: initial; width: auto; margin: 0; grid-row: 1; }
.famula-why-row > .famula-why-photo { grid-column: 2 / 4; } /* lines 1–3 */
.famula-why-row > .famula-why-text { grid-column: 5 / 7; } /* lines 4–6 */
/* "Tällaista jälkeä syntyy" (before/after row, identified by the compare
slider): keep the heading + copy at ~80% of the text track, like the
team-intro. Scoped so the "Me Famulalla" why-row is unaffected. */
.famula-why-row:has(.famula-compare) > .famula-why-text > * { max-width: 80%; }
}
/* ---- Section bands carry vertical rhythm but NO horizontal padding ----
The plane (contentSize 72.76% = lines 2–5) is what lands section content on
the boundary lines. Own L/R padding pushes content ~23px right of line 2, so
it stops lining up with the align:full rows (hero, team-row, why-row). Zero
horizontal padding on every top-level section group on page templates.
(!important beats the patterns' inline padding → also fixes already-inserted
copies; contentSize keeps content off the screen edges, so no edge-touch.) */
.wp-block-post-content > .wp-block-group {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Kill the default 24px root block gap BETWEEN top-level sections. The band
sections are designed to butt together, so no inserted pattern should need
its margin-block-start removed by hand in the editor. This targets only the
DIRECT children of the content root, so each section's INNER block spacing is
untouched. Inline margins set deliberately on a block still win (inline beats
this class rule). Covers the front end (.wp-block-post-content) and the editor
canvas (.is-root-container). */
.wp-block-post-content > *,
.is-root-container > * {
margin-block-start: 0;
}
/* The boundary-line grid rows are align:full. Their break-out margin is computed
from the band's *declared* 32px padding, which overshoots the row -32px past
each edge — on pages this overshoots a zero-rendered-padding band; on the
front-page template it overshoots past the viewport and causes a horizontal
scrollbar. Cancel the break-out everywhere: the row then spans its band's
content box. On pages (padding zeroed above) that's the full width, so the
grid lands on the real lines; on the front-page template it's inset by the
band's 32px padding (consistent with that template's other sections, and —
crucially — no overflow). */
.famula-why-row,
.famula-team-row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Contact section: 50/50 columns split exactly on line 3 (centre). The left
column's gap is border-box padding so it doesn't push the split off line 3. */
.famula-contact-left {
box-sizing: border-box;
padding-right: 48px;
}
/* Contact form red stamp: moved from the top-right corner down to the checkbox
level. Absolute inside the position:relative sage form box. The top offset is
a fixed px because the fields above the checkboxes are fixed-height. */
.wp-block-image.famula-form-badge {
position: absolute;
top: 255px;
right: 46px;
width: 120px; /* fixed size: the figure is display:table + img is
width:100%, so without this it stretches when absolute */
margin: 0 !important;
z-index: 2;
/* use the "short"/compact stamp (no outer ring text) on the form */
background-image: url("../img/badge-compact-red.png");
}
@media (max-width: 781px) {
/* NOTE: no own horizontal padding here — the parent band now supplies the
shared 24px mobile gutter (see end-of-file rule). Re-adding it here stacked
a second 24px on top, pushing why-row / before-after text+photo to 48px while
every other section sits at 24px. Keep only the stacking behaviour. */
.famula-why-row { flex-wrap: wrap; }
.famula-why-row > .famula-why-photo,
.famula-why-row > .famula-why-text { width: 100%; margin-left: 0; }
.famula-why-row > .famula-why-text { margin-top: 28px; }
}
/* ---- before/after comparison slider ---- */
.famula-compare {
position: relative;
overflow: hidden;
border-radius: var(--r-photo);
line-height: 0;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.famula-compare img { display: block; width: 100%; height: auto; }
.famula-compare .famula-compare__before,
.famula-compare .famula-compare__after { margin: 0; }
/* Front-end only: once JS marks the slider ready, the two images overlay and
the "after" is revealed to the right of the handle. Before that — and in the
block editor, where this JS does not run — the two images simply stack, so
BOTH stay visible and individually selectable/replaceable in the editor. */
.famula-compare.is-ready {
overflow: hidden;
/* Cap the height: the box shape is fixed (3:2) instead of being driven by the
source image's proportions, so a tall photo no longer makes a giant slider.
Both halves cover the box. */
aspect-ratio: 3 / 2;
}
.famula-compare.is-ready .famula-compare__before { position: absolute; inset: 0; }
.famula-compare.is-ready .famula-compare__after {
position: absolute; inset: 0;
clip-path: inset(0 0 0 var(--pos, 50%));
}
.famula-compare.is-ready .famula-compare__before img,
.famula-compare.is-ready .famula-compare__after img { width: 100%; height: 100%; object-fit: cover; }
.famula-compare__handle {
position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
width: 2px; margin-left: -1px;
background: #fff;
cursor: ew-resize;
box-shadow: 0 0 0 1px rgba(15, 22, 30, 0.15);
}
.famula-compare__handle::after {
content: "";
position: absolute; top: 50%; left: 50%;
width: 42px; height: 42px; transform: translate(-50%, -50%);
border-radius: 999px;
background: #fff no-repeat center / 24px
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A455A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 6 3 12 7 18'/%3E%3Cline x1='9' y1='12' x2='15' y2='12'/%3E%3Cpolyline points='17 6 21 12 17 18'/%3E%3C/svg%3E");
box-shadow: 0 2px 10px rgba(15, 22, 30, 0.28);
}
/* before/after labels — fixed text via CSS (keyed on class, not a data-label
attribute) so the image blocks stay valid native blocks in the editor. */
.famula-compare__before::before,
.famula-compare__after::before {
position: absolute; top: 14px;
font-size: 12px; font-weight: 700; color: #fff;
padding: 5px 12px; border-radius: 999px; line-height: 1;
}
.famula-compare__before::before { content: "Ennen"; left: 14px; background: var(--famula-ink); }
.famula-compare__after::before { content: "Jälkeen"; right: 14px; background: var(--famula-orange); }
/* ---- services-grid card foot: teksti vasemmalla, painike oikealla samalla rivillä ---- */
.famula-svc-cardfoot { align-items: center; }
.famula-svc-cardfoot > .famula-svc-cardtext { flex: 1 1 auto; margin-left: -14px; }
.famula-svc-cardfoot > .wp-block-buttons { flex: 0 0 auto; margin: 0; }
/* When the hero panel is dark (rust / navy / ink), the body copy + tick-list have
no explicit colour and fall back to the theme's default navy → unreadable. Force
them light on a dark hero. (h1 is already white; buttons keep their own styles.) */
.famula-hero.has-rust-background-color p,
.famula-hero.has-rust-background-color .famula-tick-list li,
.famula-hero.has-navy-background-color p,
.famula-hero.has-navy-background-color .famula-tick-list li,
.famula-hero.has-ink-background-color p,
.famula-hero.has-ink-background-color .famula-tick-list li {
color: #fff;
}
/* ---- homepage hero: full-bleed photo + stamp straddling the seam ---- */
.famula-hero {
position: relative; /* positioning context for the badge */
align-items: stretch;
margin-block-start: 0; /* sit flush under the header (kill the 24px blockGap above) */
/* Let the sage panel + photo bleed to all four edges. Zeroing the
padding (incl. the root/global padding applied to alignfull blocks)
keeps the full-width break-out margins but drops the inset, so the
photo reaches the viewport edge. The text column keeps its own padding. */
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
/* Both halves stretch to the same (tallest) height. The text panel keeps its
content vertically centred; the photo column lets the cover fill the full
height instead of stopping at its own min-height. */
.famula-hero > .wp-block-column {
display: flex;
flex-direction: column;
justify-content: center;
flex: 0 0 50%; /* pin the split to a hard 50/50 so the seam (and photo) start dead centre */
max-width: 50%;
box-sizing: border-box; /* so the 50% includes the text panel's padding (the column is content-box by default here) */
}
.famula-hero > .wp-block-column.is-vertically-aligned-center {
align-self: stretch; /* override WP's per-column "center" so it stretches */
}
/* Two-tier grid: the hero copy aligns its left edge to the WIDE content
plane (wideSize), while the sage panel + photo stay full-bleed. The
floor (56px) keeps it sane on screens narrower than wideSize. */
.famula-hero > .wp-block-column:first-child {
/* 100% here resolves against the hero (flex container) width, which
excludes the scrollbar — so this lines up exactly with the layout-
centred section content below, unlike 100vw. */
padding-left: max(56px, calc((100% - var(--wp--style--global--wide-size, 88.52%)) / 2)) !important;
}
/* The photo (right) column fills the remaining half exactly: flex:1 absorbs
any sub-pixel remainder so no gap can open at the seam at fractional browser
zoom. The sage fallback means that even under a sub-pixel seam or before a
lazy-loaded photo paints, the panel colour shows there — never white. */
.famula-hero > .wp-block-column:last-child {
flex: 1 1 0%;
max-width: none;
background-color: var(--wp--preset--color--sage);
}
.famula-hero-image { /* right-hand photo fills the hero height */
flex: 1 1 auto;
min-height: 560px;
margin-block-start: 0; /* never inherit the 24px blockGap, whatever order the editor saves the cover/badge in */
}
.famula-hero-badge { /* centred on the seam, vertically centred */
position: absolute;
left: 50%;
top: 50%;
z-index: 5;
width: 14vw;
max-width: 260px;
margin: 0;
}
.famula-hero-badge.is-style-famula-stamp-red { transform: translate(-50%, -50%) rotate(0deg); }
.famula-hero-badge.is-style-famula-stamp-orange { transform: translate(-50%, -50%) rotate(6deg); }
/* When the two halves stack on narrow screens, sit the badge on the seam
between the text panel and the photo instead of mid-hero. */
@media (max-width: 781px) {
/* Header: drop the tagline + CTA/phone block on mobile, and lay the bar out
as a single row — logo on the left, hamburger on the right. */
.famula-tagline,
.famula-header-actions { display: none !important; }
.famula-header {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 10px !important; /* tighter to the top on mobile */
}
.famula-header > * { margin: 0 !important; max-width: none !important; }
.famula-header > hr { display: none !important; } /* drop the divider */
.famula-header-top { flex: 0 1 auto; }
.famula-header > .wp-block-navigation { flex: 0 0 auto; }
/* Hero: stack the text panel over the photo, each full width (the desktop
hard 50/50 was leaving the text squished into half the screen on mobile). */
.famula-hero { flex-wrap: wrap; }
.famula-hero > .wp-block-column {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.famula-hero > .wp-block-column:first-child {
padding-top: 40px !important;
padding-bottom: 40px !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Photo band below the text: the desktop cover carries an inline min-height:560px
which makes a very tall strip when stacked. The mockup shows a short ~230px band,
so override the inline value (needs !important to beat the inline style). */
.famula-hero-image { min-height: 230px !important; }
/* the seam badge has no clean spot in the stacked layout — hide it on mobile */
.famula-hero-badge { display: none; }
}
/* ---- mobile overlay (hamburger) menu — only ever shown on small screens ---- */
.wp-block-navigation__responsive-container.is-menu-open {
background-color: var(--wp--preset--color--cream) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding: 84px 32px 48px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
gap: 28px !important;
align-items: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-size: 24px;
font-weight: 700;
color: var(--wp--preset--color--navy);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
top: 28px;
right: 28px;
color: var(--wp--preset--color--navy);
}
/* Footer trust badges (AAA + Luotettava Kumppani) start at line 3 (centre).
The footer content is centred, so margin-left:50% of it = the screen centre.
!important beats WP's constrained-layout `margin-inline: auto`. */
/* Footer links: light on the dark ink band. The theme's global navy link
colour was winning over the footer group's own link colour, leaving the
links unreadable. */
.f-footer a { color: rgba(255, 255, 255, 0.78) !important; }
.f-footer a:hover { color: #fff !important; }
.f-footer-badges { margin-left: 50% !important; }
/* Footer columns: col1+col2 fill the left half, col3 (Maalausliike Kuopio…) the
right half so it starts exactly on line 3. The column gap is border-box
padding (not flex gap) so col3's edge stays on line 3 at any width. */
.f-footer-cols { column-gap: 0 !important; }
.f-footer-cols > .wp-block-column { box-sizing: border-box; }
.f-footer-cols > .wp-block-column:not(:last-child) { padding-right: 56px; }
@media (max-width: 781px) {
.f-footer-badges { margin-left: 0 !important; justify-content: center; }
.f-footer-cols > .wp-block-column:not(:last-child) { padding-right: 0; }
}
/* ---- group variations: hover state for cards ---- */
.is-style-famula-card {
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-base) var(--ease-standard);
}
.is-style-famula-card:hover { box-shadow: var(--shadow-card-hover); }
/* ---- ghost button needs a 1-px ring + hover fill ---- */
.wp-block-button.is-style-famula-ghost .wp-block-button__link {
background: transparent !important;
color: var(--famula-ink) !important;
box-shadow: inset 0 0 0 1px var(--famula-line-strong);
transition: background var(--dur-fast) var(--ease-standard);
}
.wp-block-button.is-style-famula-ghost .wp-block-button__link:hover {
background: var(--famula-sand) !important;
}
/* ---- promise band keeps headings white ---- */
.is-style-famula-promise :where(h1, h2, h3, h4, h5, h6) { color: #fff !important; }
.is-style-famula-promise p { color: rgba(255, 255, 255, 0.88) !important; }
/* ---- testimonial keeps text white + a faux open-quote ---- */
.is-style-famula-testimonial :where(h1, h2, h3, h4, h5, h6) { color: #fff !important; }
.is-style-famula-testimonial p { color: #fff !important; }
.is-style-famula-testimonial p { line-height: 1.2 !important; } /* olive card text line-height (global) */
/* The featured quote leads with a bold quoted line instead of a decorative
open-quote, so no ::before glyph here (matches the designer's mockup). */
/* Quote → body sit close together: the body otherwise inherits the card's 24px
flow gap. The 2nd child is the first body line; later body lines + the
attribution keep their own (inline) margins. */
.is-style-famula-testimonial > :nth-child(2) { margin-top: 6px !important; }
/* Keep the quote + copy on a narrower measure (~80% of the card), like the
team-intro / cta-split / before-after sections. Desktop only. */
@media (min-width: 782px) {
.is-style-famula-testimonial > * { max-width: 90%; }
}
/* ---- process step number chip (used by the ProcessStrip pattern) ---- */
.famula-step-chip {
width: 44px; height: 44px;
border-radius: 8px;
color: #fff;
display: grid; place-items: center;
font-weight: 800; font-size: 18px;
font-family: var(--font-body);
flex-shrink: 0;
margin: 0; padding: 0; box-sizing: border-box; /* stay 44×44 even as a native has-background paragraph */
}
/* Legacy chips colour by data-n (the baked wp:html homepage version); native
block chips colour via has-{rust,orange,navy,olive}-background-color instead. */
.famula-step-chip[data-n="1"] { background: var(--famula-rust); }
.famula-step-chip[data-n="2"] { background: var(--famula-orange); }
.famula-step-chip[data-n="3"] { background: var(--famula-navy); }
.famula-step-chip[data-n="4"] { background: var(--famula-olive); }
/* native process step: keep the chip aligned to the top of the text */
.famula-process-step { align-items: flex-start; }
/* ---- contact staff list as native blocks (.famula-staff-row + .famula-staff-avatar) ---- */
.famula-staff-row {
align-items: center;
padding: 14px 0;
border-top: 1px solid rgba(255,255,255,0.14);
}
.famula-staff-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.famula-staff-avatar {
width: 54px; height: 54px;
border-radius: 999px;
display: grid; place-items: center;
color: var(--famula-ink);
font-weight: 700; font-size: 16px;
margin: 0; padding: 0; box-sizing: border-box; flex-shrink: 0;
}
/* The name + phone paragraphs carry no explicit colour, so on the dark (#2e2e2e)
contact band they fall back to the theme's default navy text → unreadable.
Force the uncoloured staff-info lines light. (Email = rgba-white inline,
region = orange, avatar = ink-on-sage all keep their own colour via :not.) */
.famula-staff-row .wp-block-group > p:not([class*="has-"]) {
color: #fff;
}
/* ---- alternative hero: rust banner + photo + overlapping values card (.famula-banner*) ---- */
.famula-banner-hero { align-items: stretch; position: relative; } /* positioning context for the stamp (same as .famula-hero) */
.famula-banner-hero > .wp-block-column { flex: 0 0 50%; max-width: 50%; box-sizing: border-box; }
/* Match the main hero (.famula-hero): centre the rust panel's content vertically,
and align its left edge to the WIDE content plane (not a flat 56px) — the mockup
title starts at the wideSize inset, same as the homepage hero. */
.famula-banner-panel {
display: flex; flex-direction: column; justify-content: center;
padding-left: max(56px, calc((100% - var(--wp--style--global--wide-size, 88.52%)) / 2)) !important;
padding-bottom: 72px !important; /* symmetric like the hero (was 108) */
}
.famula-banner-panel h1 { line-height: 1.1 !important; letter-spacing: -0.01em; max-width: 765px; } /* = .famula-hero title; width per mockup */
.famula-banner-panel > p { font-size: 22px !important; line-height: 1.6; max-width: 80%; } /* = hero body (was lead 17px); 80% of the panel width, clears the stamp */
/* Override WP's per-column "center" so the rust panel stretches to the full hero
height — its background then starts/ends on the same level as the photo (same
fix as .famula-hero). Content stays near the top via the column's own padding. */
.famula-banner-hero > .wp-block-column.is-vertically-aligned-center { align-self: stretch; }
.famula-banner-photo { display: flex; padding: 0; } /* NOT position:relative, so the stamp centres on the whole hero seam, not the photo */
.famula-banner-photo > .wp-block-cover { flex: 1 1 auto; width: 100%; min-height: 658px !important; margin: 0; } /* = .famula-sec-hero photo height */
/* stamp: same rules + sizing as the hero badge — centred on the seam, vertically centred */
.famula-banner-stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14vw; max-width: 260px; margin: 0; z-index: 5; }
.famula-banner-stamp img { width: 100% !important; height: auto; display: block; }
/* stat chips on the rust panel */
.famula-stat { align-items: center; }
.famula-stat-icon { margin: 0; flex-shrink: 0; }
.famula-stat-icon img { width: 60px; height: 60px; display: block; }
.famula-stat .wp-block-group > p:first-child { font-size: 45px !important; font-weight: 900 !important; line-height: 1 !important; } /* stat number (2016 / Kuopio) */
.famula-stat .wp-block-group > p:last-child { font-size: 21px !important; line-height: 1.1 !important; } /* stat label, pulled up close to the number */
/* the "Näin toimimme" card, pulled up over the hero */
.wp-block-group.famula-banner-card {
position: relative;
z-index: 2;
max-width: var(--wp--style--global--content-size); /* edges on lines 2–5 (narrow plane) */
margin: -80px auto 0; /* pull up over hero, centred */
background: var(--wp--preset--color--cream); /* card = cream … */
border-radius: 16px;
padding-bottom: 75px !important; /* override the pattern's inline 48px */
}
/* … and the section behind the card = white (swap of the original card/section colours) */
.famula-banner.has-cream-background-color { background-color: var(--wp--preset--color--white) !important; }
/* no padding on the hero wrapper itself */
.famula-banner { padding-bottom: 0 !important; }
.famula-value-icon { margin: 0; }
.famula-value-icon img { width: 70px; height: 70px; display: block; }
/* tighten the gap between the "Arvomme" eyebrow and the card title */
.famula-banner-card h2 { margin-block-start: 0; font-size: 37px !important; }
.famula-banner-card > p:first-child { color: var(--wp--preset--color--navy) !important; font-size: 14px !important; } /* "Arvomme" eyebrow → navy like the rest, 14px */
.famula-banner-values h3 { font-size: 27px !important; } /* value titles */
.famula-banner-values p { font-size: 18px !important; } /* value descriptions */
/* don't cap the card's inner blocks at contentSize — let them fill the card width */
.wp-block-group.famula-banner-card > * { max-width: none !important; }
/* centre each value column's content block, but keep the title + text left-aligned
inside it (icon centred, text block centred, title & text share one left edge) */
.famula-banner-values > .wp-block-column {
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
}
.famula-banner-values .famula-value-icon { margin-left: auto; margin-right: auto; } /* checkmark centred */
.famula-banner-values h3,
.famula-banner-values p { width: 85%; } /* equal width → the centred block keeps both left edges aligned */
@media (min-width: 782px) {
.famula-banner-values > .wp-block-column { box-sizing: border-box; padding-inline: 12px; }
.famula-banner-values > .wp-block-column:not(:first-child) {
border-left: 1px solid var(--famula-line, rgba(15, 22, 30, 0.1));
}
}
@media (max-width: 781px) {
.famula-banner-hero > .wp-block-column { flex: 0 0 100%; max-width: 100%; }
.famula-banner-stamp { display: none; } /* no clean seam when stacked — hide, same as the old hero badge */
.wp-block-group.famula-banner-card { margin-top: 24px; } /* no overlap when stacked (specificity must match the base rule) */
/* The banner panel still carried full DESKTOP metrics on mobile: 56px side
padding + 72px vertical + 22px/1.6 body capped at 80% width, which squeezed
the copy into a ~230px column and wrapped almost every word onto its own line.
Match the main hero's mobile treatment — 40px vertical / 24px gutter, body
20px·1.4 at full width. (Base padding-left uses max(56px,…) !important, so
these need !important; equal specificity + later source order wins on mobile.) */
.famula-banner-panel {
padding-top: 40px !important;
padding-bottom: 40px !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
.famula-banner-panel > p {
font-size: 20px !important;
line-height: 1.4 !important;
max-width: 100% !important;
}
}
/* ---- photo wall (referenssit): each row = 1 big image (~2× wide) + 2 stacked
small images; even rows mirror (big image swaps to the right). The wall sits
on the wide plane (align:wide = lines 1–6). aspect-ratio scales the row height
with width so the images keep ~1.6:1 proportions at any size. ---- */
.famula-pw-row {
display: grid;
grid-template-columns: 2fr 1fr; /* big column ≈ 67% — ~15% wider than before; smalls narrower */
grid-template-rows: 1fr 1fr;
gap: 12px;
aspect-ratio: 3.1 / 1; /* ~15% taller rows → big image ~15% taller (keeps its aspect) */
}
.famula-pw-row > .wp-block-cover { min-height: 0 !important; margin: 0; border-radius: 12px; overflow: hidden; background-color: #efebe2; }
/* fill the cell: if the image aspect ratio doesn't match, zoom/crop to cover (no letterbox frame) */
.famula-pw-row .wp-block-cover__image-background { object-fit: cover !important; }
.famula-pw-row > .wp-block-cover:nth-child(1) { grid-column: 1; grid-row: 1 / 3; } /* big */
.famula-pw-row > .wp-block-cover:nth-child(2) { grid-column: 2; grid-row: 1; } /* stack top */
.famula-pw-row > .wp-block-cover:nth-child(3) { grid-column: 2; grid-row: 2; } /* stack bottom */
/* mirror: every even row puts the big image on the right */
.famula-photowall > .famula-pw-row:nth-child(even) { grid-template-columns: 1fr 2fr; }
.famula-photowall > .famula-pw-row:nth-child(even) > .wp-block-cover:nth-child(1) { grid-column: 2; }
.famula-photowall > .famula-pw-row:nth-child(even) > .wp-block-cover:nth-child(2) { grid-column: 1; }
.famula-photowall > .famula-pw-row:nth-child(even) > .wp-block-cover:nth-child(3) { grid-column: 1; }
.famula-pw-row .wp-block-cover__image-background { object-position: center; }
@media (max-width: 781px) {
.famula-pw-row,
.famula-photowall > .famula-pw-row:nth-child(even) {
grid-template-columns: 1fr;
grid-template-rows: auto;
aspect-ratio: auto;
}
.famula-pw-row > .wp-block-cover {
grid-column: 1 !important;
grid-row: auto !important;
min-height: 200px !important;
}
}
/* ---- referenssit project tiles: caption (eyebrow + title) over the cover,
bottom-left, with a legibility gradient. ---- */
.famula-ref-tile { align-items: flex-end; justify-content: flex-start; }
.famula-ref-tile::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 62%;
background: linear-gradient( to top, rgba(12, 20, 28, 0.88) 0%, rgba(12, 20, 28, 0.45) 38%, rgba(12, 20, 28, 0) 100% );
pointer-events: none;
z-index: 1;
}
.famula-ref-tile > .wp-block-cover__inner-container {
position: relative;
z-index: 2;
align-self: flex-end;
width: 100%;
margin: 0;
padding: 0;
text-align: left;
color: #fff;
}
.famula-ref-eyebrow {
margin: 0 0 4px;
font-size: 14px; /* scaled up in the same proportion as the title */
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.famula-ref-title {
margin: 0;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: #fff;
}
@media (max-width: 781px) {
.famula-ref-tile > .wp-block-cover__inner-container { padding: 0; }
}
/* ---- photo-wall lightbox: covers become clickable, modal overlays the page.
Album = every cover inside .famula-photowall on the page (see famula-lightbox.js). ---- */
.famula-pw-clickable { cursor: pointer; }
.famula-pw-clickable:focus-visible { outline: 3px solid var(--famula-orange, #E0531F); outline-offset: 3px; }
html.famula-lightbox-open { overflow: hidden; }
.famula-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgb(18 28 38 / 98%); /* navy-tinted scrim */
overscroll-behavior: contain;
}
.famula-lightbox[hidden] { display: none; }
.famula-lightbox__figure {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 100%;
max-height: 100%;
}
/* the stage: the current image rests here, centred */
.famula-lightbox__stage {
position: relative;
width: min(92vw, 1400px);
height: 64vh;
display: flex;
align-items: center;
justify-content: center;
}
.famula-lightbox__img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 10px;
background: #efebe2;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.famula-lightbox__cap {
color: #fff;
font-size: 15px;
letter-spacing: 0.01em;
text-align: center;
max-width: 80vw;
}
/* FX layer: holds the temporary clones that do the slide-and-scale transition.
Each clone is positioned (inline) over the stage rect and transformed. */
.famula-lightbox__fx {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
}
.famula-lightbox__fxitem {
position: fixed;
will-change: left, top, width, height;
}
/* cover-cropped like the peeks; object-position is set per clone (the edge the
matching peek shows). At the centre the box has the image's own aspect, so
cover reveals the whole image — matching the stage exactly. */
.famula-lightbox__fxitem img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 10px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
/* prev/next thumbnails peeking from the top & bottom edges. Wide cover strips
(cropped to fill — no letterbox bars whatever the image aspect). Clicking one
navigates that direction; the FLIP clone carries the seamless scale. */
.famula-lightbox__peek {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: min(92vw, 512px);
height: 13vh;
max-height: 150px;
min-height: 64px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
overflow: hidden;
border-radius: 10px;
opacity: 0.55;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
transition: opacity var(--dur-fast, 0.15s) var(--ease-standard, ease);
}
.famula-lightbox__peek:hover,
.famula-lightbox__peek:focus-visible { opacity: 0.95; }
.famula-lightbox__peek:focus-visible { outline: 3px solid var(--famula-orange, #E0531F); outline-offset: 2px; }
.famula-lightbox__peek--prev { top: 14px; }
.famula-lightbox__peek--next { bottom: 14px; }
.famula-lightbox__peek img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 10px;
filter: brightness(0.7);
}
/* filmstrip continuity: the top peek shows the previous image's BOTTOM edge,
the bottom peek shows the next image's TOP edge — so the visible edge stays
put while the rest reveals as it slides into the centre. */
.famula-lightbox__peek--prev img { object-position: center bottom; }
.famula-lightbox__peek--next img { object-position: center top; }
.famula-lightbox__chev {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 18px;
line-height: 1;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
pointer-events: none;
}
.famula-lightbox__close {
position: absolute;
top: 16px;
right: 16px;
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 30px;
background: rgba(255, 255, 255, 0.10);
color: #fff;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
z-index: 1;
transition: background var(--dur-fast, 0.15s) var(--ease-standard, ease);
}
.famula-lightbox__close:hover { background: rgba(255, 255, 255, 0.22); }
.famula-lightbox__close:focus-visible { outline: 3px solid var(--famula-orange, #E0531F); outline-offset: 2px; }
.famula-lightbox__count {
position: absolute;
top: 24px;
left: 24px;
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
letter-spacing: 0.04em;
}
@media (max-width: 781px) {
.famula-lightbox { padding: 12px; }
.famula-lightbox__stage { width: 94vw; height: 62vh; }
.famula-lightbox__peek { width: 92vw; height: 11vh; }
.famula-lightbox__close { top: 10px; right: 10px; }
.famula-lightbox__count { top: 16px; left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.famula-lightbox__fxitem,
.famula-lightbox__fxitem img { transition: none !important; }
}
/* ---- header nav: links centred between the hr and the hero, with the orange
"selected" marker ABOVE the link sitting on the hr line (not an underline) ---- */
.famula-header .wp-block-navigation .wp-block-navigation-item__content {
color: var(--famula-ink);
font-weight: 700;
}
.wp-block-navigation .wp-block-navigation-item__content {
transition: color var(--dur-fast) var(--ease-standard);
}
@media (min-width: 782px) {
/* header height matched to the mockup (~153px): hr at ~89px, nav centred below. */
.famula-header { padding-top: 14px !important; padding-bottom: 16px !important; }
.famula-header hr { margin-top: 20px !important; } /* hr sits at ~89px */
.famula-header .wp-block-navigation { margin-top: 16px !important; } /* equal gap above → links centred */
.famula-header .wp-block-navigation__container { margin-top: 3px !important; margin-bottom: 3px !important; } /* small symmetric inner gap (stays centred) */
.famula-header .wp-block-navigation .wp-block-navigation-item { position: relative; }
.famula-header .wp-block-navigation .wp-block-navigation-item:hover::before,
.famula-header .wp-block-navigation .current-menu-item::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -20px; /* pull up onto the hr line (matches the nav gap) */
height: 3px;
background: var(--famula-orange);
}
/* First nav link "Etusivu" renders as a filled orange house icon (with a
door cutout) instead of text (designer's draft). The label text stays in the
DOM for screen readers; it's pushed out of view and the SVG is drawn as an
orange mask. The door is a transparent hole, so the header background shows
through it. */
.famula-header .wp-block-navigation__container > .wp-block-navigation-item:first-child .wp-block-navigation-item__label {
display: inline-block;
width: 23px;
height: 21px;
vertical-align: -4px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-color: var(--famula-orange);
-webkit-mask: url("../img/icon-nav-home.svg") center / contain no-repeat;
mask: url("../img/icon-nav-home.svg") center / contain no-repeat;
}
}
/* ---- header keyline once stuck ---- */
.wp-site-blocks > header { box-shadow: var(--shadow-header); }
/* ---- tagline strip helper (used in header pattern) ---- */
.famula-tagline {
font-family: var(--font-stamp);
font-style: italic;
font-weight: 800;
font-size: 17px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--famula-navy);
display: inline-flex;
align-items: center;
gap: 12px;
transform: translateX(-50px); /* nudge left (designer) */
}
.famula-tagline::before {
content: "“";
color: var(--famula-orange);
font-family: Georgia, serif;
font-style: normal;
font-size: 28px;
line-height: 0.5;
transform: translateY(2px);
}
/* ---- tick list (✓ in olive) used on hero + about ---- */
ul.famula-tick-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
ul.famula-tick-list li {
position: relative;
padding-left: 28px;
font-size: 16px;
color: var(--famula-navy);
line-height: 1.1;
font-weight: 600;
}
/* Hero checklist text is black (ink). Dark hero panels (rust/navy/ink) keep white
via their more-specific rule above. */
.famula-hero .famula-tick-list li { color: var(--famula-ink); }
/* Bolder ✓ in the hero (thicker stroke). */
.famula-hero .famula-tick-list li::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* Hero text column: 30px vertical rhythm between the heading, body, list and
buttons (overrides the inline 24px on each). */
.famula-hero > .wp-block-column:first-child > * + * { margin-top: 30px !important; }
/* The body line under the hero heading: tighter top gap + line-height (designer).
(List + buttons keep the 30px above.) */
.famula-hero > .wp-block-column:first-child > p { margin-top: 24px !important; line-height: 1.4 !important; font-size: 20px !important; }
/* Hero text column: top/bottom padding (designer), desktop only. */
@media (min-width: 782px) {
.famula-hero > .wp-block-column:first-child { padding-top: 80px !important; padding-bottom: 80px !important; }
}
/* The ✓ is drawn as a currentColor mask, so it always matches the text colour
(navy default / ink in the hero / white on dark hero panels). */
ul.famula-tick-list li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask: center/contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
mask: center/contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* light variant — white text (ticks follow via currentColor), for dark hero halves */
ul.famula-tick-list.is-light li { color: #fff; }
/* ---- service photo-card (full-bleed photo, scrim, caption) ---- */
.famula-photo-card {
display: block;
position: relative;
border-radius: var(--r-photo);
overflow: hidden;
box-shadow: var(--shadow-card);
aspect-ratio: 16 / 10;
transition: box-shadow var(--dur-base) var(--ease-standard);
}
.famula-photo-card:hover { box-shadow: var(--shadow-card-hover); }
.famula-photo-card img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
}
.famula-photo-card .scrim {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(15,22,30,0.78) 0%, rgba(15,22,30,0) 60%);
}
.famula-photo-card .body {
position: absolute; left: 24px; right: 24px; bottom: 24px;
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
color: #fff;
}
.famula-photo-card .body h3 { color: #fff; margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.famula-photo-card .body p { color: rgba(255,255,255,0.88); margin: 0; font-size: 14px; line-height: 1.5; }
/* =================================================================
Section overrides matched to the designer mockups, keyed on semantic
section classes (famula-sec-*) placed on each pattern's outer wrapper —
so the PATTERNS carry the mockup values, not just the homepage. Talon
maalaus / Katon pinnoitus copies lack these classes and keep their own
values until reviewed against their own mockups. (h2 size, button styles
and colours live globally in theme.json.)
================================================================= */
@media (min-width: 782px) {
/* --- section vertical rhythm (paddings) --- */
.famula-sec-rating { padding-top: 80px !important; padding-bottom: 31px !important; }
.famula-sec-testimonial { padding-top: 40px !important; padding-bottom: 60px !important; }
.famula-sec-why { padding-top: 52px !important; padding-bottom: 74px !important; }
.famula-sec-services { padding-top: 82px !important; padding-bottom: 111px !important; }
.famula-sec-process { padding-top: 94px !important; padding-bottom: 115px !important; }
.famula-sec-ba { padding-top: 74px !important; padding-bottom: 74px !important; }
.famula-sec-team { padding-top: 74px !important; padding-bottom: 81px !important; }
.famula-sec-promise { padding-top: 101px !important; padding-bottom: 137px !important; }
.famula-sec-contact { padding-top: 129px !important; padding-bottom: 196px !important; }
/* --- image sizing (hero / cta / before-after) --- */
.famula-sec-hero .famula-hero-image { min-height: 658px !important; }
.famula-sec-cta > .wp-block-column:first-child .wp-block-cover { min-height: 634px !important; }
.famula-sec-ba .famula-compare.is-ready { aspect-ratio: 850 / 486 !important; }
/* --- rating bar --- */
.famula-sec-rating p { font-size: 24px !important; }
.famula-sec-rating p span { font-size: 24px !important; }
.famula-sec-rating strong { font-weight: 400 !important; }
/* --- quality checklist (same text size as the rating bar) --- */
.famula-sec-checklist p { font-size: 24px !important; }
/* --- testimonial --- */
.famula-sec-testimonial .is-style-famula-testimonial { padding: 80px !important; }
.famula-sec-testimonial .is-style-famula-testimonial > p:first-of-type { font-size: 26px !important; }
.famula-sec-testimonial .has-body-font-size { font-size: 20px !important; }
.famula-sec-testimonial .is-style-famula-testimonial .has-small-font-size { font-size: 20px !important; margin-top: 32px !important; }
/* --- "Miksi asiakkaat valitsevat meidät" intro --- */
.famula-sec-why > .wp-block-heading { max-width: 1100px !important; }
.famula-sec-why .has-lead-font-size { font-size: 20px !important; margin-top: 35px !important; max-width: 1100px !important; }
.famula-sec-why .has-mute-color { font-size: 20px !important; margin-top: 20px !important; color: var(--famula-navy) !important; max-width: 1100px !important; }
.famula-sec-why .famula-why-row { margin-top: 66px !important; }
.famula-sec-why .famula-why-photo .wp-block-cover { min-height: 486px !important; }
/* --- services --- */
.famula-sec-services .wp-block-heading:first-child { margin-bottom: 44px !important; }
.famula-sec-services .wp-block-cover { min-height: 427px !important; }
/* --- process "Näin homma etenee" --- */
.famula-sec-process .wp-block-heading:first-child { margin-bottom: 112px !important; }
.famula-sec-process .famula-step-chip { width: 62px !important; height: 62px !important; font-size: 25px !important; border-radius: 11px !important; }
.famula-sec-process .famula-process-step .wp-block-group > p:first-child { font-size: 21px !important; }
.famula-sec-process .famula-process-step .wp-block-group > p:last-child { font-size: 19px !important; }
.famula-sec-process > p { font-size: 18px !important; margin-top: 22px !important; font-weight: 900 !important; color: var(--famula-ink) !important; }
/* --- team "Ketkä teille tulevat" --- */
.famula-sec-team .famula-team-photo .wp-block-cover { min-height: 485px !important; }
.famula-sec-team .famula-team-text p { color: var(--famula-ink) !important; line-height: 1.3 !important; font-size: 20px !important; }
}
/* ---- UKK / FAQ accordion (.famula-faq*) — native , styled to match the other sections ---- */
.famula-faq-list { margin-top: 44px; }
.famula-faq-item {
border: 1px solid var(--famula-line);
border-radius: 12px;
background: #fff;
padding: 0 26px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.famula-faq-item:hover { border-color: var(--famula-line-strong); }
.famula-faq-item[open] { box-shadow: 0 6px 20px rgba(27, 27, 25, 0.06); }
.famula-faq-item summary {
list-style: none; /* hide the native disclosure triangle */
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px 0;
font-size: 19px;
font-weight: 700;
line-height: 1.35;
color: var(--famula-navy);
}
.famula-faq-item summary::-webkit-details-marker { display: none; }
.famula-faq-item summary::after { /* orange +/- indicator */
content: "+";
flex: 0 0 auto;
font-size: 28px;
font-weight: 400;
line-height: 1;
color: var(--famula-orange);
}
.famula-faq-item[open] summary::after { content: "\2013"; } /* – */
.famula-faq-item > :not(summary) {
margin: 0 0 22px;
color: var(--famula-mute);
line-height: 1.65;
max-width: 92%;
}
/* ---- contact hero (.famula-contact-*): reuses the .famula-banner* hero structure ---- */
.famula-contact-panel { padding-bottom: 96px !important; } /* taller hero than the banner default */
/* form column: mirror the navy panel's wide-plane inset on the RIGHT edge, and be the
positioning context for the small red form stamp (the big orange stamp lives in the navy panel) */
.famula-contact-formcol {
position: relative;
padding-right: max(56px, calc((100% - var(--wp--style--global--wide-size, 88.52%)) / 2)) !important;
}
.famula-contact-formcol h2 { margin-block-start: 0; }
.famula-contact-formcol .famula-form-badge { position: absolute; top: 70px; right: 40px; width: 96px; margin: 0; z-index: 3; }
/* the three contact methods on the navy panel */
.famula-contact-items { max-width: 460px; }
.famula-contact-item { align-items: flex-start; }
.famula-contact-ico { margin: 0; flex-shrink: 0; }
.famula-contact-ico img { width: 52px; height: 52px; display: block; }
.famula-contact-label { color: rgba(255, 255, 255, 0.65); text-transform: uppercase; }
.famula-contact-desc { color: rgba(255, 255, 255, 0.70); }
/* "Palvelemme mielellämme" team card (reuses .famula-banner-card overlap/positioning) */
.famula-contact-card .wp-block-heading,
.famula-contact-card > p { max-width: 720px !important; margin-inline: auto; }
.famula-contact-team > .wp-block-column {
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.famula-contact-avatar {
width: 92px; height: 92px; border-radius: 50%; margin: 0 auto;
box-shadow: inset 0 0 0 1px var(--famula-line);
}
@media (min-width: 782px) {
.famula-contact-team > .wp-block-column { box-sizing: border-box; padding-inline: 16px; }
.famula-contact-team > .wp-block-column:not(:first-child) { border-left: 1px solid var(--famula-line); }
}
@media (max-width: 781px) {
/* Hide the red form stamp on the contact page in mobile (user request) — it
crowded the narrow form. Scoped to .famula-contact-formcol, so the homepage
contact form (.famula-sec-contact .famula-form-badge) keeps its badge. */
.famula-contact-formcol .famula-form-badge { display: none !important; }
}
/* =================================================================
Mobile mockup-match (390px target — preview-mobile.html handoff)
Brings the live mobile taitto closer to the designer's phone mockup.
Desktop is untouched — every rule lives inside max-width:781px.
================================================================= */
@media (max-width: 781px) {
/* (Hero sub-text hard
breaks are stripped in the page content instead — a
forces a line break regardless of CSS display/content, so it can't be
neutralised per-breakpoint from here. See the hero copy in pages 324/33/…) */
/* Homepage hero H1 stays WHITE on the sage panel — the designer's hand-made target
(esimerkki_mobiili_hero.png) keeps it white, overriding the earlier preview-mobile
ink reading. (No override here = the theme's white hero H1 carries through.) */
/* Hero CTAs: full-width stacked buttons (mockup) instead of content-width buttons
that wrap to their own lines but only span their text. Applies to both heroes
(sage homepage navy+ghost, rust service orange+ghost). */
.famula-hero .wp-block-buttons { flex-direction: column; align-items: stretch; width: 100%; }
.famula-hero .wp-block-buttons > .wp-block-button { width: 100%; }
.famula-hero .wp-block-buttons > .wp-block-button > .wp-block-button__link { display: block; width: 100%; text-align: center; }
/* Service cards (etusivu "Valitse teille sopiva palvelu"): stack the caption foot
— heading + copy above a compact, left-aligned orange button — instead of a big
button filling the right half (mockup: small inline CTA under the text). */
.famula-svc-cardfoot { flex-direction: column; align-items: flex-start !important; gap: 12px; }
.famula-svc-cardfoot > .famula-svc-cardtext { margin-left: 0 !important; }
.famula-svc-cardfoot > .wp-block-buttons { align-self: flex-start; }
.famula-svc-cardfoot > .wp-block-buttons .wp-block-button__link { padding: 10px 20px; font-size: 14.5px; }
/* Service-page feature cards (cards-3up: "Hyvä lopputulos…" / "…ratkaistaan jo
pohjatöissä"): the desktop uses photo-background cover cards with white text. The
mobile mockup shows them as clean flat SAND cards — dark heading, muted body, soft
shadow. Scoped via the pattern's unique inline min-height:440px so no other cover
(hero 560, homepage svc 360, photowall 420) is touched. Desktop keeps the photos. */
.wp-block-cover[style*="min-height:440px"] {
min-height: 0 !important;
background-color: var(--famula-sand, #E9E2D2) !important;
box-shadow: 0 2px 6px rgba(20, 20, 18, 0.06);
}
.wp-block-cover[style*="min-height:440px"] > .wp-block-cover__image-background,
.wp-block-cover[style*="min-height:440px"] > .wp-block-cover__background { display: none !important; }
.wp-block-cover[style*="min-height:440px"] .wp-block-heading { color: var(--famula-ink, #2E2E2E) !important; }
.wp-block-cover[style*="min-height:440px"] p { color: var(--famula-mute, #7A7368) !important; }
}
/* =================================================================
Mobile vertical rhythm (390px) — collapse the desktop section
padding-block to the designer's mobile scale (preview-mobile.html):
44px standard content band · 36px rust promise band · 22px rating bar.
Every full-bleed content band carries its DESKTOP padding-block
(60–88px) inline, both on the pattern-built homepage and the
hand-built service pages — far too airy on a 390px column. The shared
inline signature `padding-right:32px` is present on all of them, so it
is the reliable hook (plus the semantic famula-sec-* classes); inline
padding means these overrides need !important. Desktop is untouched
(everything lives inside max-width:781px).
================================================================= */
@media (max-width: 781px) {
/* standard content band */
.wp-block-group[style*="padding-right:32px"] {
padding-top: 22px !important;
padding-bottom: 22px !important;
}
/* thin rust promise band — "Ilmainen kartoituskäynti 24 tunnissa." */
.famula-sec-promise,
.wp-block-group.has-rust-background-color[style*="padding-right:32px"] {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
/* compact rating / social-proof bar (homepage) — selector kept at least as
specific as the standard-band rule above so its smaller padding wins */
.wp-block-group.famula-sec-rating[style*="padding-right:32px"] {
padding-top: 22px !important;
padding-bottom: 22px !important;
}
/* tighter gap between the rating row and the two trust pills (was 40px) */
.famula-sec-rating > .wp-block-group {
gap: 20px !important;
}
}
/* =================================================================
Mobile horizontal gutter (390px) — restore the side padding the
desktop boundary-line system strips off.
On desktop, `.wp-block-post-content > .wp-block-group` bands get ZERO
horizontal padding (rule ~line 200) so their %-plane content lands on
the boundary lines; content stays off the screen edge because the
content plane is only 72.76% wide. On MOBILE the plane is forced to
100% (content-size:100%), so with zero band padding the section copy,
step chips, avatars etc. sit FLUSH against the viewport edge. The
existing mobile gutter rule only re-pads `.wp-site-blocks > .wp-block-
group` (the baked front-page template), NOT the `.wp-block-post-content`
sections used on the normal page render — so those were edge-to-edge.
Re-add the designer's 24px gutter (342px content in a 390px screen).
Must sit AFTER the line-200 zeroing rule to win (same specificity +
!important → later source order). Full-bleed heroes/split-bands are
.wp-block-columns, not groups, so they are untouched and still bleed. */
@media (max-width: 781px) {
.wp-block-post-content > .wp-block-group {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
/* =================================================================
Mobile full-width CTA buttons (390px) — the designer's mobile layout
stacks every standalone call-to-action button full-width (342px block),
like the hero pair. Only the hero group had this; the why / before-after
/ team / CTA-split sections still rendered content-width buttons
(170–283px). Generalise the hero treatment to every button group in the
page body. EXCEPTION: the small in-card service-card button ("Pyydä
arvio" on the Talon/Katon photo cards) stays compact + left-aligned —
the designer keeps that one inline (99px), so it is reset back below. */
@media (max-width: 781px) {
.wp-block-post-content .wp-block-buttons {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.wp-block-post-content .wp-block-buttons > .wp-block-button { width: 100%; }
.wp-block-post-content .wp-block-buttons > .wp-block-button > .wp-block-button__link {
display: block;
width: 100%;
text-align: center;
}
/* keep the compact in-card service-card button (designer: small + inline) */
.famula-svc-cardfoot > .wp-block-buttons {
flex-direction: row;
align-items: flex-start;
align-self: flex-start;
width: auto;
}
.famula-svc-cardfoot > .wp-block-buttons > .wp-block-button { width: auto; }
.famula-svc-cardfoot > .wp-block-buttons > .wp-block-button > .wp-block-button__link {
display: inline-block;
width: auto;
}
/* CTA split-band cream panel: symmetric 24px gutter on mobile (desktop keeps
6.13% left / 48px right). Without this its stacked CTA buttons rendered 318px
and inset unevenly (24px L / 48px R) instead of the full 342px the other
standalone CTAs use. Photo column (no has-background) stays full-bleed. */
.famula-split-band > .wp-block-column.has-background {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
/* =================================================================
Mobile photo height cap (390px) — keep images low/landscape, ≤ ~30vh.
Photo covers carried tall DESKTOP min-heights (banner hero 658px,
why-photo 460px, team-photo 420px, service cards / split-band 360px) →
portrait/square on a phone. Covers are min-height-driven, so photo-only
bands collapse to a landscape 30vh while text-overlay cards (service
cards) still grow to fit their copy. Covers that are ALREADY shorter +
landscape keep their own more-specific rules untouched: the referenssit
photowall (.famula-pw-row > .wp-block-cover = 200px) and the flat sand
feature-cards (.wp-block-cover[style*="min-height:440px"] → 0) are both
more specific than this blanket, so they win. The before/after slider
(.famula-compare, aspect-ratio ~1.7) is not a cover and is already low. */
@media (max-width: 781px) {
.wp-block-cover { min-height: 30vh !important; }
/* banner hero photo has a more-specific base rule (min-height:658px !important) */
.famula-banner-photo > .wp-block-cover { min-height: 30vh !important; }
}
/* =================================================================
Contact hero (/yhteystiedot/) mobile fix.
Unlike the meista banner hero (a direct alignfull child of post-content),
the contact hero's columns (.famula-banner-hero) are nested INSIDE the
.famula-contact-hero group, which carries the 24px mobile gutter. So the
navy panel + sage form column sat inset at left 24 with their OWN padding
stacked on top → body copy at 48px; worse, the form column kept its desktop
padding-left:150px (form shoved far right, huge empty sage block) and both
panels kept padding-bottom:96px. Break the columns out of the group's gutter
so the navy/sage panels go full-bleed like every other hero, then give both
columns a clean 40/24 box (overrides the inline 56/96/150 + the line-949
.famula-contact-panel{padding-bottom:96px} — later source order, equal spec). */
@media (max-width: 781px) {
.famula-contact-hero .famula-banner-hero {
margin-left: -24px !important;
width: calc(100% + 48px) !important;
max-width: none !important;
}
.famula-contact-panel,
.famula-contact-formcol {
padding: 40px 24px !important;
}
}