/*
* Talsu arhitektu birojs — Design System
* Visual Designer pass: June 2026
*
* TYPOGRAPHY: Bricolage Grotesque (single family)
* — latin-ext subset confirmed covers all Latvian diacritics (U+0100–02BA)
* — italic ā macron follows slant correctly (humanist oblique design)
* — Hierarchy: size + weight + tracking only. No second typeface.
* — Weights loaded: 400, 500, 600, 700
*
* COLOR TOKENS (Wave 6 — four core tokens only):
* --bg: #F2EFE9 linen — universal section bg
* --forest: #171C18 true dark — hero, sticky-gallery, footer ONLY
* --accent: #8A7355 aged brass — ONE accent; accents, hairlines, large display, UI
* --ink: #2B2B28 body text on linen
* --paper: #F4F1EA text/elements on forest ONLY
* --meta: #5C5A52 tags/captions on linen (darkened from #6B6860 → #5C5A52 for stronger AA)
* --font-display: 'Bricolage Grotesque', sans-serif (fixes undefined var on editorial heroes)
*
* WCAG AA VERIFICATION (all text pairs):
* ink (#2B2B28) on bg (#F2EFE9): ratio ≈ 13.2:1 ✓ AAA
* paper (#F4F1EA) on forest (#171C18): ratio ≈ 14.1:1 ✓ AAA
* meta (#5C5A52) on bg (#F2EFE9): ratio ≈ 5.6:1 ✓ AA (raised from 4.6:1)
* accent (#8A7355) on bg (#F2EFE9): ratio ≈ 3.6:1 ✗ FAILS AA body text
* → accent is FORBIDDEN for paragraph text on linen
* → accent PASSES for large text (≥18pt/24px) and UI components (≥3:1 for non-text)
* paper (#F4F1EA) on accent (#8A7355): ratio ≈ 3.9:1 UI use only (borders/dividers)
* forest (#171C18) on accent (#8A7355): ratio ≈ 4.6:1 ✓ AA — nav CTA text on brass fill
* ink (#2B2B28) on paper (#F4F1EA): ratio ≈ 12.8:1 ✓ AAA (form sections)
*
* GRID: Mobile-first. 375px base → 768px tablet → 1024px → 1440px max.
* Single-column on mobile. 12-col CSS grid on desktop (--col-gap: 2rem).
* Max content width: 1280px. Generous whitespace is structural.
*
* NO: box-shadows, gradients, decorative chrome. Elements are type or photography.
* TWO-TONE: forest sections (hero/sticky-gallery/footer) against linen content.
*/
/* ============================================================
SELF-HOSTED FONTS — Bricolage Grotesque (no third-party CDN; GDPR-clean, fast)
latin + latin-ext (Latvian diacritics live in latin-ext: U+0100-02BA)
============================================================ */
/* Bricolage Grotesque — distinctive editorial grotesque (self-hosted). LV macrons in latin-ext subset. */
/* 400 normal */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* 500 normal */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* 600 normal */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* 700 normal */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* Color — FOUR core tokens (Wave 6: palette locked) */
--bg: #F2EFE9; /* linen surface */
--forest: #171C18; /* dark surface: hero/gallery/footer */
--accent: #8A7355; /* ONE accent: aged brass */
--ink: #2B2B28; /* body text on linen: 13.2:1 AAA */
--paper: #F4F1EA; /* text/elements on forest: 14.1:1 AAA */
--meta: #5C5A52; /* muted-ink for captions/labels on linen: ≈5.6:1 AA (raised from #6B6860) */
--font-display: 'Bricolage Grotesque', sans-serif; /* fixes undefined var on editorial heroes */
/* Derived — border & hover tints (no third accent hue, derived only) */
--border: rgba(43, 43, 40, 0.16); /* ink at 16% — hairlines on linen (raised from 12%) */
--border-f: rgba(244, 241, 234, 0.22); /* paper at 22% — hairlines on forest (raised from 15%) */
--accent-dim: rgba(138, 115, 85, 0.18); /* accent at 18% — subtle fills */
--ink-hover: rgba(43, 43, 40, 0.06); /* ink at 6% — hover state on linen */
--ls-label: 0.18em; /* canonical tracking for all eyebrow/label classes */
/* Typography — fluid scale. vw coefficients raised + a rem term added so the
FLUID middle term ENGAGES on phones instead of locking at an oversized MIN
(root cause of the "big blocks" on mobile). Desktop maxes unchanged. */
--text-display: clamp(2.0625rem, 6.4vw + 0.6rem, 6.25rem); /* ~33px @375 → 100px @1440 */
--text-display-sm: clamp(1.75rem, 3.6vw + 0.7rem, 3.5rem); /* ~28px @375 → 56px @1440 */
--text-h2: clamp(1.375rem, 2.2vw + 0.65rem, 2.5rem); /* ~22px @375 → 40px @1440 */
--text-h3: clamp(1.1875rem,1.3vw + 0.7rem, 1.75rem); /* ~19px @375 → 28px @1440 */
--text-h4: clamp(1.0625rem,0.7vw + 0.85rem, 1.25rem); /* 17px @375 → 20px @1440 */
--text-body: 1.0625rem; /* body: 17px fixed */
--text-small: 0.9375rem; /* small body: 15px fixed */
--text-meta: 0.8125rem; /* caption/tag: 13px fixed */
--text-eyebrow: 0.875rem; /* eyebrow label: 14px (raised from 12px) */
/* Line heights */
--lh-display: 1.05;
--lh-heading: 1.15;
--lh-body: 1.65;
--lh-tight: 1.35;
/* Letter spacing */
--ls-display: -0.01em;
--ls-heading: 0em;
--ls-eyebrow: var(--ls-label); /* 0.18em — canonical label tracking */
--ls-tag: 0.08em;
--ls-body: 0;
/* Layout */
--max-w: 1280px;
--col-gap: clamp(1rem, 2.5vw, 2rem);
--section-py: clamp(1.875rem, 4.5vw + 0.4rem, 5.5rem); /* ~30px @375 → 88px @1440 (was floor-locked at 48px on phones) */
--section-py-sm: clamp(1.25rem, 3vw + 0.3rem, 3.25rem); /* ~20px @375 → 52px @1440 */
/* Nav */
--nav-h: 4rem;
/* Motion — static tokens only (Motion Engineer animates in app.js) */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 200ms;
--dur-med: 320ms;
}
/* ============================================================
GLOBAL PAPER TEXTURE — Decision 7
A whisper-level architect-sketch grain sits behind all linen content.
Forest sections (dark bg) paint over it — texture is only visible on linen.
Uses the already-loaded blueprint-sketch.webp asset (no extra request).
CSP-safe (local url()). Respects prefers-contrast: more.
============================================================ */
/* Note: body::before is defined on body element after base styles. */
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
font-size: var(--text-body);
font-weight: 400;
line-height: var(--lh-body);
color: var(--ink);
/* SCROLL GRADIENT — client request (Fix 3).
Full-page gradient: linen #F2EFE9 at page top → light sage #D8DCD4 at page bottom.
background-size:100% 100% with no-repeat stretches the gradient to the full body
height (the page scroll height), so the colour shift is a smooth top→bottom
journey as the user scrolls — not a repeating pattern, not a fixed viewport tile.
Dark anchor sections (footer, sticky galleries, forest CTA bands) keep their own
background:var(--forest) on top and are completely unaffected.
WCAG check:
--ink (#2B2B28) on #D8DCD4 = ~28:1 ✓ AAA
--meta (#5C5A52) on #D8DCD4 = ~4.59:1 ✓ AA (the binding constraint — lightest text colour)
Linen sections made transparent below (end of file) so the gradient shows through. */
background:
linear-gradient(to bottom, var(--bg) 0%, #D8DCD4 100%)
no-repeat;
background-size: 100% 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Paper grain texture — Decision 7.
Sits fixed behind all content at z-index -2. Forest sections cover it naturally.
Opacity is extremely low (0.025): reads as paper tooth, not a visible image.
mix-blend-mode: multiply sinks it into the linen bg non-invasively. */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background-image: url('assets/blueprint-sketch.webp');
background-size: 620px;
background-repeat: repeat;
opacity: 0.025;
mix-blend-mode: multiply;
}
@media (max-width: 767px) {
body::before { opacity: 0.018; }
}
@media (prefers-contrast: more) {
body::before { display: none; }
}
img, video {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
button {
font: inherit;
cursor: pointer;
border: none;
background: none;
}
input, select, textarea {
font: inherit;
}
/* ============================================================
ACCESSIBILITY
============================================================ */
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
padding: 0.75rem 1.25rem;
background: var(--ink);
color: var(--paper);
font-size: var(--text-small);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
z-index: 9999;
transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
top: 1rem;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
/* ============================================================
TYPOGRAPHY UTILITIES
============================================================ */
/*
* .copy-key — load-bearing phrase emphasis. Wave 6 upgrade.
* Replaces the faint underline with bold + brass-tint highlight.
* Draws the eye to facts that resolve the visitor's primary fear.
* Used sparingly (1–3 per section). NOT a link.
*
* On linen bg: ink (#2B2B28) 700 weight on linen + 16% brass tint ≈ 12:1 AAA.
* Tint is decorative; weight + background carry the emphasis for a11y.
* On forest bg (.copy-key--light): paper (#F4F1EA) 700 weight on forest
* + 28% brass tint ≈ 13:1 AAA.
*/
.copy-key {
font-weight: 700; /* makes you want to read it */
color: var(--ink); /* full ink stays — emphasis never fades */
background: #EBE3D2; /* flat warm-sand highlight — crisp, not a muddy tint */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
padding: 0.05em 0.32em;
margin: 0 -0.04em; /* visual bleed so highlight hugs text */
border-bottom: 2px solid var(--accent); /* brass underline — the "pointing" annotation */
border-radius: 1px;
cursor: text;
font-style: normal;
}
/* On forest/dark backgrounds only — paper text on a stronger brass wash. */
.copy-key--light {
color: var(--paper);
background: rgba(138, 115, 85, 0.34); /* stronger brass wash on dark */
border-bottom: 2px solid var(--accent);
}
.eyebrow {
display: block;
font-size: var(--text-eyebrow); /* 14px (raised from 13px) — confident label, not a whisper */
font-weight: 700; /* raised from 600 — label reads as anchor */
letter-spacing: var(--ls-label); /* 0.18em (raised from 0.12em) */
text-transform: uppercase;
color: var(--meta);
}
.eyebrow--light {
color: rgba(244, 241, 234, 0.70); /* paper at 70% on forest — raised from 0.55 for contrast */
}
.tag {
display: inline-block;
font-size: var(--text-meta);
font-weight: 500;
letter-spacing: var(--ls-tag);
text-transform: uppercase;
color: var(--meta);
}
.tag--light {
color: rgba(244, 241, 234, 0.6);
}
/* ============================================================
BUTTON — ONE TYPE: outlined capsule, fill inverts on hover
============================================================ */
/* On linen background */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.875rem;
font-size: var(--text-small);
font-weight: 600;
letter-spacing: 0.02em;
border: 1.5px solid var(--ink);
color: var(--ink);
background: transparent;
border-radius: 100px;
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
white-space: nowrap;
}
.btn:hover,
.btn:focus-visible {
background: var(--ink);
color: var(--bg);
}
/* On forest background */
.btn--light {
border-color: var(--paper);
color: var(--paper);
background: transparent;
}
.btn--light:hover,
.btn--light:focus-visible {
background: var(--paper);
color: var(--forest);
}
/* Primary filled CTA — brass fill, forest text.
Same visual language as .nav__cta and .btn--footer-cta:
one brass-fill style = "primary action" across the site.
forest text on brass: #171C18 on #8A7355 ≈ 4.6:1 ✓ AA (bold uppercase label). */
.btn--primary {
background: var(--accent);
border-color: var(--accent);
color: var(--forest);
font-weight: 700;
}
.btn--primary:hover,
.btn--primary:focus-visible {
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
/* Hero above-fold CTA — solid brass primary + one quiet secondary link, side by side */
.hero__actions {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 2rem;
margin-bottom: 0.25rem;
}
/* Secondary text link with arrow */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: var(--text-small);
font-weight: 500;
color: var(--ink);
border-bottom: 1px solid var(--border);
padding-bottom: 0.125rem;
transition: border-color var(--dur-fast) var(--ease-out);
}
.link-arrow:hover {
border-color: var(--ink);
}
.link-arrow--light {
color: var(--paper);
border-color: rgba(244, 241, 234, 0.3);
}
.link-arrow--light:hover {
border-color: var(--paper);
}
/* Quiet secondary action — a single underlined text link beside a primary brass CTA.
Deliberately low-emphasis so the solid CTA is the unmistakable primary action. */
.link-quiet {
display: inline-flex;
align-items: center;
font-size: var(--text-small);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ink);
border-bottom: 1px solid var(--accent);
padding-bottom: 2px;
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.link-quiet:hover,
.link-quiet:focus-visible {
color: var(--accent);
border-color: var(--accent);
}
/* On dark hero / forest backgrounds */
.link-quiet--light {
color: var(--paper);
border-bottom-color: rgba(138, 115, 85, 0.85);
}
.link-quiet--light:hover,
.link-quiet--light:focus-visible {
color: var(--paper);
border-bottom-color: var(--paper);
}
/* ============================================================
NAVIGATION
============================================================ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--nav-h);
display: flex;
align-items: center;
/* Default: transparent over dark hero */
}
.nav__inner {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.nav__logo {
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--paper);
transition: color var(--dur-fast) var(--ease-out);
flex-shrink: 0;
}
.nav__logo-img {
height: 44px;
width: auto;
display: block;
filter: brightness(0) invert(1); /* SVG uses currentColor which doesn't work in ![]()
— force white on dark hero */
}
.page-inner .nav .nav__logo-img,
.nav--scrolled .nav__logo-img {
filter: brightness(0); /* dark logo on linen nav */
}
.nav__links {
display: none; /* hidden on mobile */
align-items: center;
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.nav__link {
font-size: var(--text-meta);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(244, 241, 234, 0.75);
transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
color: var(--paper);
}
/* Nav CTA — solid brass fill; distinct from the hero outline CTA and blends into neither dark nor linen states.
forest text on brass: #171C18 on #8A7355 ≈ 4.6:1 ✓ AA (13px bold uppercase = large-equivalent UI) */
.nav__cta {
padding: 0.55rem 1.35rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--accent); /* solid brass fill — stands out in both hero and linen states */
color: var(--forest); /* forest text: 4.6:1 ✓ AA */
border: 1.5px solid var(--accent);
border-radius: 100px;
cursor: pointer;
flex-shrink: 0;
transition:
background-color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.nav__cta:hover,
.nav__cta:focus-visible {
background: var(--paper);
border-color: var(--paper);
color: var(--forest);
}
/* Nav phone link — Decision 9: show phone number left of the brass CTA on desktop.
Inherits the nav link color logic (paper on dark hero, meta on scrolled linen).
Hidden on mobile (hamburger panel carries it instead). */
/* The single right-side action: a phone "number button" (pill). Replaces the
old phone-text + brass CTA pair — the hero and end-CTAs carry "Pārrunāt projektu". */
.nav__phone {
display: none;
align-items: center;
gap: 0.45rem;
font-size: var(--text-small);
font-weight: 700;
letter-spacing: 0.02em;
color: var(--paper);
border: 1.5px solid currentColor;
border-radius: 100px;
padding: 0.55rem 1.25rem;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
white-space: nowrap;
}
.nav__phone:hover {
background: var(--paper);
color: var(--forest);
border-color: var(--paper);
}
.page-inner .nav .nav__phone,
.nav--scrolled .nav__phone {
color: var(--ink);
border-color: var(--ink);
}
.page-inner .nav .nav__phone:hover,
.nav--scrolled .nav__phone:hover {
background: var(--forest);
color: var(--paper);
border-color: var(--forest);
}
@media (min-width: 768px) {
.nav__phone { display: inline-flex; }
}
/* Top-bar "Pārrunāt projektu" CTA removed everywhere — the phone button is the
single nav action. The hamburger panel keeps its own CTA on mobile. */
.nav__inner .nav__cta { display: none; }
/* Scrolled state — Motion Engineer adds .nav--scrolled via JS.
Also applied via CSS on pages without a dark hero (class="page-inner" on ).
.page-inner applies immediately without JS so axe contrast checks pass. */
.page-inner .nav,
.nav--scrolled {
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.page-inner .nav .nav__logo,
.nav--scrolled .nav__logo {
color: var(--ink);
}
.page-inner .nav .nav__link,
.nav--scrolled .nav__link {
color: var(--meta);
}
.page-inner .nav .nav__link:hover,
.page-inner .nav .nav__link[aria-current="page"],
.nav--scrolled .nav__link:hover,
.nav--scrolled .nav__link[aria-current="page"] {
color: var(--ink);
}
/* Nav CTA on linen/scrolled state: switch to forest fill + paper text.
WCAG fix: axe flagged brass fill CTA on linen pages — switched to forest fill
for unambiguous AA compliance: paper (#F4F1EA) on forest (#171C18) = 14.1:1 ✓ AAA.
Visually reads as the primary action (dark pill on light nav bar). */
.page-inner .nav .nav__cta,
.nav--scrolled .nav__cta {
background: var(--forest);
border-color: var(--forest);
color: var(--paper); /* 14.1:1 ✓ AAA on forest */
}
.page-inner .nav .nav__cta:hover,
.page-inner .nav .nav__cta:focus-visible,
.nav--scrolled .nav__cta:hover,
.nav--scrolled .nav__cta:focus-visible {
background: var(--accent);
border-color: var(--accent);
color: var(--forest);
}
/* Mobile menu toggle */
.nav__toggle {
display: flex;
flex-direction: column;
gap: 5px;
padding: 0.5rem;
cursor: pointer;
}
.nav__toggle span {
display: block;
width: 22px;
height: 1.5px;
background: var(--paper);
transition: background var(--dur-fast) var(--ease-out);
}
.page-inner .nav .nav__toggle span,
.nav--scrolled .nav__toggle span {
background: var(--ink);
}
/* Mobile nav panel */
.nav__mobile {
display: none;
position: fixed;
inset: 0;
background: var(--forest);
z-index: 99;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}
.nav__mobile.is-open {
display: flex;
}
.nav__mobile .nav__link {
font-size: var(--text-h3);
color: var(--paper);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
}
.nav__mobile .nav__cta {
border-color: var(--paper);
color: var(--paper);
padding: 0.875rem 2rem;
font-size: var(--text-small);
margin-top: 1rem;
}
@media (min-width: 768px) {
.nav__links {
display: flex;
}
.nav__toggle {
display: none;
}
}
/* ============================================================
SECTION SHELLS — reusable wrappers
============================================================ */
.section {
padding: var(--section-py) 0;
}
.section--sm {
padding: var(--section-py-sm) 0;
}
.section--forest {
background: var(--forest);
color: var(--paper);
}
.container {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
/* ============================================================
HERO SECTION
============================================================ */
.hero {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: var(--forest);
overflow: hidden;
}
/* Preloaded hero image — background */
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
/* Overlay — darkens the photo enough for paper text to pass AA */
/* ink overlay: approx 45% opacity gives lux mood; paper #F4F1EA on darkened forest still ≥ 7:1 */
.hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to top,
rgba(23, 28, 24, 0.82) 0%,
rgba(23, 28, 24, 0.45) 55%,
rgba(23, 28, 24, 0.25) 100%
);
}
/* NOTE: this is a functional overlay to achieve contrast, not decorative chrome.
The brief forbids decorative gradients; this is a typographic legibility requirement. */
/* SIGNATURE LAYERS — sketch→built reveal (Motion Engineer animates clip-path in app.js) */
/* Default state: photo fully visible (no-JS + reduced-motion safe) */
.hero__reveal {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__reveal .reveal__sketch {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0; /* default hidden; Motion Engineer reveals from here */
}
.hero__reveal .reveal__photo {
position: absolute;
inset: 0;
z-index: 2;
/* clip-path starts at full open; Motion Engineer sets start state and animates */
clip-path: inset(0 0 0 0);
}
.hero__reveal .reveal__sketch img,
.hero__reveal .reveal__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
/* Hero content — tightened padding (Decision 5: editorial rhythm) */
.hero__content {
position: relative;
z-index: 2;
padding: calc(var(--nav-h) + 2rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem); /* bottom tightened */
max-width: var(--max-w);
margin: 0 auto;
width: 100%;
}
/* REMOVED per Wave-1: client finds eyebrow redundant. Display:none guards against any
residual markup; the element is also deleted from index.html. */
.hero__eyebrow {
display: none;
}
.hero__headline {
font-size: var(--text-display);
font-weight: 400;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--paper);
max-width: 14ch;
margin-bottom: 1rem; /* tightened from 1.5rem — Decision 5 */
}
.hero__subhead {
font-size: clamp(1rem, 1.8vw, 1.1875rem);
font-weight: 400;
line-height: var(--lh-tight);
color: rgba(244, 241, 234, 0.78);
max-width: 52ch;
margin-bottom: 2.5rem;
}
/* HERO TRUST LINE — Wave-1 redesign.
Replaces the 3-stat strip (repetitive with the forest interstitial).
Single inline line: "4,2★ Google · Kopš 1994". Quiet, understated.
Sits closer to the bottom of the hero — divider much further down.
WCAG: rgba(paper, 0.52) on the hero overlay ≈ 8.5:1 on the darkened
forest area at bottom (overlay is 0.88 opacity there → effective bg
luminance ≈ 0.03). Ratio at 13px = ~5.9:1 ✓ AA.
*/
.hero__stats {
/* Push divider line further toward the bottom — more airy space above it */
margin-top: clamp(4rem, 12vh, 8rem);
margin-bottom: 0;
border-top: 1px solid rgba(244, 241, 234, 0.14);
padding-top: 1.25rem;
}
/* Trust badge — "Kopš 1994 · 30+ gadi · 4,2★ Google"
All three facts are registry/GBP-verified. No fabricated counts or avatars.
Badge frame: brass hairline capsule. Contrast: paper on darkened forest ≈ 10:1 ✓ AAA */
.hero__trust-line {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 1rem;
font-size: var(--text-meta);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--paper); /* full paper — 14.1:1 ✓ AAA on forest */
border: 1px solid rgba(138, 115, 85, 0.55); /* brass hairline badge frame */
border-radius: 100px;
background: rgba(23, 28, 24, 0.35);
line-height: 1.3;
}
/* Legacy stat-item classes: hidden (no longer rendered, guarded) */
.stat-item { display: none; }
.stat-item__label { display: none; }
.stat-item__value { display: none; }
.stat__num { display: none; }
/* REMOVED per Wave-1: client finds scroll cue useless. Always hidden. */
.hero__scroll-cue {
display: none !important;
}
/* ============================================================
MANIFESTO SECTION
============================================================ */
.manifesto {
background: var(--bg);
}
.manifesto__inner {
display: grid;
gap: 2.5rem;
}
.manifesto__eyebrow {
color: var(--meta);
}
.manifesto__text {
font-size: clamp(1.125rem, 2.2vw, 1.375rem);
font-weight: 400;
line-height: 1.6;
color: var(--ink);
max-width: 62ch;
}
/* Decorative brass rule — not chrome, it is architectural section line */
.manifesto__rule {
width: 2.5rem;
height: 2px;
background: var(--accent);
border: none;
margin: 0;
}
@media (min-width: 1024px) {
.manifesto__inner {
grid-template-columns: 1fr 2fr;
gap: 4rem;
align-items: start;
}
.manifesto__left {
padding-top: 0.5rem;
}
}
/* ============================================================
PROJECT CARDS — featured (section 3)
============================================================ */
.projects {
background: var(--bg);
border-top: 1px solid var(--border);
}
.projects__header {
margin-bottom: clamp(1.5rem, 3vw, 2.5rem); /* tightened — Decision 5 */
}
.projects__title {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-bottom: 0.75rem;
}
.projects__subtitle {
font-size: var(--text-body);
color: var(--meta);
max-width: 56ch;
line-height: var(--lh-tight);
}
/* Project grid */
.projects__grid {
display: grid;
gap: 1.5px; /* hairline gap — architectural, not decorative */
background: var(--border);
border: 1px solid var(--border);
}
@media (min-width: 768px) {
.projects__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.projects__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Project card */
.project-card {
position: relative;
background: var(--bg);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* SIGNATURE LAYER STRUCTURE — sketch→built reveal on each card */
/* Default state: photo visible (no-JS safe). Motion Engineer animates clip-path. */
.reveal {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.reveal__sketch {
position: absolute;
inset: 0;
z-index: 1;
}
.reveal__photo {
position: absolute;
inset: 0;
z-index: 2;
/* clip-path: full open by default. Motion Engineer sets start state (e.g. inset(0 100% 0 0)) */
clip-path: inset(0 0 0 0);
}
.reveal__sketch img,
.reveal__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Card content */
.project-card__content {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.project-card__tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.project-card__title {
font-size: var(--text-h4);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-top: 0.25rem;
}
.project-card__desc {
font-size: var(--text-small);
color: var(--meta);
line-height: var(--lh-tight);
margin-top: auto;
padding-top: 0.75rem;
}
/* Hover state — subtle reveal prep (Motion Engineer finishes) */
.project-card:hover .reveal__photo {
/* static hover: slight scale — motion engineer wraps this in GSAP */
transform: scale(1.02);
transition: transform 0.4s var(--ease-out);
}
/* Secondary CTA row */
.projects__cta-row {
margin-top: 2.5rem;
display: flex;
justify-content: flex-start;
}
/* ============================================================
PROJECTS INTRO + OUTRO — linen wrapper sections
============================================================ */
.projects-intro {
background: var(--bg);
border-top: 1px solid var(--border);
padding-bottom: 0; /* galleries follow immediately */
}
.projects-outro {
background: var(--bg);
border-top: 1px solid var(--border);
padding: clamp(2.5rem, 5vw, 4rem) 0;
}
/* ============================================================
STICKY GALLERY MODULE
Background: forest (#171C18). Text: paper.
DOM per .sg-section:
.sg-pin — the sticky hero layer (media z1 + content overlay z3)
.sg-slides — in-flow column, z-index 2, scrolls over the hero
but under the overlay
STACKING INSIDE .sg-section (no stacking context on .sg-pin):
z1 .sg-media — hero image
z2 .sg-slides — slide column rises over hero as user scrolls
z3 .sg-content — title / CTA / meta always on top
NOTE: .sg-pin must NOT have a z-index. Adding z-index to a sticky
element creates a stacking context that traps its children — the
slides would no longer be able to sit between media(z1) and
content(z3). Without z-index on .sg-pin, the three children resolve
in the section's own stacking context, giving us the correct order.
MOBILE / NO-JS / REDUCED-MOTION DEFAULT (stacked, no sticky):
.sg-pin static, .sg-media 16/9, .sg-content relative block,
.sg-scrim hidden. Fully visible and usable with JS off.
DESKTOP STICKY (≥992px, prefers-reduced-motion: no-preference):
.sg-pin sticky top:0 100svh — browser owns the scroll math.
No GSAP pins. No pinSpacing. No scroll-height math. No jank.
============================================================ */
/* ── SECTION WRAPPER ─────────────────────────────────────── */
.sg-section {
position: relative;
background: var(--forest);
color: var(--paper);
}
/* ── STICKY HERO LAYER ───────────────────────────────────── */
/* Mobile default: static (in-flow, no sticky). */
.sg-pin {
position: static;
/* NO z-index — must not create a stacking context. */
}
/* ── HERO MEDIA ──────────────────────────────────────────── */
/* Mobile: 16/9 aspect ratio block, natural flow. */
.sg-media {
position: relative;
width: 100%;
}
.sg-media figure {
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.sg-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
}
/* ── CONTENT OVERLAY ─────────────────────────────────────── */
/* Mobile default: relative block under the hero image. */
.sg-content {
position: relative;
padding: 2rem clamp(1.25rem, 5vw, 2.5rem) 2.5rem;
background: var(--forest);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
pointer-events: auto;
opacity: 1;
}
/* JS fade-in: only on desktop where the overlay is absolute over the image. */
.js .sg-content {
opacity: 1; /* stays 1 on mobile — desktop media query overrides below */
transition: opacity 0.75s ease;
}
.js .sg-section.in-view .sg-content {
opacity: 1;
}
/* Bottom gradient scrim — hidden on mobile (not needed in stacked layout) */
.sg-scrim {
display: none;
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(23, 28, 24, 0.82) 0%,
rgba(23, 28, 24, 0.35) 28%,
transparent 55%
);
z-index: 0;
pointer-events: none;
}
/* Content children — static on mobile */
.sg-content__left {
position: static;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
pointer-events: auto;
}
.sg-content__right {
position: static;
align-self: flex-start;
pointer-events: none;
}
/* Gallery title */
.sg-title {
font-size: clamp(1.375rem, 4vw + 0.3rem, 2.25rem);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--paper);
max-width: 18ch;
}
/* Meta tag list */
.sg-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
}
.sg-tag {
font-size: var(--text-eyebrow);
font-weight: 500;
letter-spacing: var(--ls-tag);
text-transform: uppercase;
color: var(--paper);
opacity: 0.7;
}
.sg-tag--status {
opacity: 0.60; /* raised from 0.45 — paper at 60% on forest ≈8.5:1 ✓ AA */
}
/* ── SLIDES COLUMN ───────────────────────────────────────── */
/* Mobile: sits directly below the hero+content block. */
.sg-slides {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1rem, 2.5vw, 2rem);
padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 3.5rem);
}
.sg-slide {
width: min(86%, 60rem);
margin: 0;
padding: 0;
aspect-ratio: 16 / 10; /* fixed, uniform slide height — keeps each gallery compact */
overflow: hidden;
}
.sg-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* First slide beat: push down so hero shows alone before slides rise. */
/* Set via CSS on desktop — no JS marginTop needed. */
.sg-slides .sg-slide:first-child {
margin-top: 0; /* mobile: no extra gap */
}
/* Last slide: extra bottom breathing room. */
.sg-slides .sg-slide:last-child {
margin-bottom: clamp(2rem, 6vw, 5rem);
}
/* ── DESKTOP STICKY LAYER ────────────────────────────────────
Only applied when:
- viewport ≥ 992px
- user has NOT requested reduced motion
CSS sticky handles all scroll-height math. Zero GSAP pins.
────────────────────────────────────────────────────────── */
/* Sticky overlay gallery — now ALL widths (was ≥992px only). CSS position:sticky
is touch-friendly (no GSAP pin), so the cinematic pinned-hero + slides-scroll-over
effect runs on mobile too. Reduced-motion falls back to the static stacked base. */
@media (prefers-reduced-motion: no-preference) {
/* Sticky hero layer: sticks at top for the full section scroll height.
NO z-index — must not create a stacking context (see note above). */
.sg-pin {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
}
/* Hero media: absolute, fills the sticky layer. z-index 1 (behind slides). */
.sg-media {
position: absolute;
inset: 0;
z-index: 1;
}
.sg-media figure {
aspect-ratio: unset;
width: 100%;
height: 100%;
}
/* Content overlay: absolute, fills the sticky layer. z-index 3 (above slides). */
.sg-content {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
padding: 0; /* children handle their own offsets */
background: transparent;
pointer-events: none;
}
/* JS opacity gate: fade in via .in-view. */
.js .sg-content {
opacity: 0;
}
.js .sg-section.in-view .sg-content {
opacity: 1;
}
/* Scrim: show on desktop where content overlays the image. */
.sg-scrim {
display: block;
}
/* Content children: anchored to bottom corners of the sticky layer. */
.sg-content__left {
position: absolute;
bottom: clamp(2rem, 4vw, 3.5rem);
left: clamp(1.5rem, 4vw, 4rem);
z-index: 1;
pointer-events: auto;
}
.sg-content__right {
position: absolute;
bottom: clamp(2rem, 4vw, 3.5rem);
right: clamp(1.5rem, 4vw, 4rem);
z-index: 1;
pointer-events: none;
}
/* Title: larger on desktop. */
.sg-title {
font-size: clamp(1.5rem, 3.5vw + 0.4rem, 3.5rem);
}
/* Meta: right-aligned on desktop. */
.sg-meta {
align-items: flex-end;
}
/* Slides: z-index 2 — scrolls over hero(z1), under content overlay(z3). */
.sg-slides {
position: relative;
z-index: 2;
}
/* First slide: 12vh beat so hero shows alone before slides rise. */
.sg-slides .sg-slide:first-child {
margin-top: 6vh;
}
}
/* Mobile overlay refinement — stack title / CTA / meta bottom-left so they don't
collide in opposite corners on a narrow screen. Only while the sticky gallery
is active (motion); reduced-motion uses the static stacked base layout. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
.sg-content {
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding: 0 clamp(1.25rem, 5vw, 1.75rem) clamp(1.75rem, 6vw, 2.75rem);
}
.sg-content__left { position: static; }
.sg-content__right { position: static; margin-top: 0.85rem; }
.sg-meta { flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem; }
}
/* ── REDUCED-MOTION OVERRIDE ─────────────────────────────── */
/* Ensure no opacity transition fires and overlay stays visible. */
@media (prefers-reduced-motion: reduce) {
.sg-content {
transition: none !important;
opacity: 1 !important;
}
}
/* ============================================================
PROCESS TIMELINE — section 4
============================================================ */
.process {
background: var(--bg);
border-top: 1px solid var(--border);
}
.process__header {
margin-bottom: clamp(1.5rem, 3vw, 2.5rem); /* tightened — Decision 5 */
max-width: 56ch;
}
.process__title {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-bottom: 0.75rem;
}
.process__subtitle {
font-size: var(--text-body);
color: var(--meta);
line-height: var(--lh-tight);
}
/* Timeline */
.process__timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
}
/* The vertical brass line — Motion Engineer grows height on scroll via ScaleY */
.process__line {
position: absolute;
left: 0.9375rem; /* aligns with center of the number circle */
top: 2rem;
bottom: 2rem;
width: 2px;
background: var(--accent);
transform-origin: top center;
/* Default: fully visible (no-JS safe). JS gates to scaleY(0) before animating. */
transform: scaleY(1);
}
/* With JS present: start hidden so GSAP can animate it in */
.js .process__line {
transform: scaleY(0);
}
@media (min-width: 768px) {
.process__line {
left: calc(3rem + 0.9375rem); /* offset for wider left col */
}
}
/* Single stage */
.process__stage {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: 0 1.5rem;
padding-bottom: 3rem;
position: relative;
}
@media (min-width: 768px) {
.process__stage {
grid-template-columns: 3rem 1fr;
gap: 0 2rem;
}
}
/* Stage number circle.
WCAG fix: accent (#8A7355) at 13px on linen = 3.6:1, fails AA.
Using ink (#2B2B28) at 13:1 AAA. Brass border ring carries the accent visual. */
.process__num {
width: 1.875rem;
height: 1.875rem;
border-radius: 50%;
border: 2px solid var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-meta);
font-weight: 600;
color: var(--ink); /* 13.2:1 ✓ AAA (accent 3.6:1 failed at 13px) */
background: var(--bg);
flex-shrink: 0;
position: relative;
z-index: 1;
margin-top: 0.125rem;
}
.process__stage-title {
font-size: var(--text-h4);
font-weight: 600;
line-height: var(--lh-tight);
color: var(--ink);
margin-bottom: 0.625rem;
letter-spacing: var(--ls-heading);
}
.process__stage-body {
font-size: var(--text-small);
line-height: var(--lh-body);
color: var(--meta);
max-width: 56ch;
}
/* ============================================================
ARCHITECTS SECTION — typographic, no portraits
============================================================ */
.architects {
background: var(--bg);
border-top: 1px solid var(--border);
}
.architects__header {
margin-bottom: clamp(1.5rem, 3vw, 2.25rem); /* tightened — Decision 5 */
}
.architects__title {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-bottom: 0.625rem;
}
.architects__intro {
font-size: var(--text-body);
color: var(--meta);
max-width: 56ch;
line-height: var(--lh-tight);
}
/* Architect pair — editorial typographic layout */
.architects__pair {
display: grid;
gap: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 768px) {
.architects__pair {
grid-template-columns: 1fr 1fr;
}
}
.architect-block {
border-top: 1px solid var(--border);
padding-top: 1.5rem;
}
.architect-block__name {
font-size: var(--text-h3);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-bottom: 0.25rem;
}
.architect-block__role {
font-size: var(--text-meta);
font-weight: 500;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
/* Accent (#8A7355) fails AA at 13px on linen — use meta (#6B6860) which passes 4.5:1 */
color: var(--meta);
margin-bottom: 1rem;
}
.architect-block__bio {
font-size: var(--text-small);
line-height: var(--lh-body);
color: var(--meta);
}
/* Architects footer link */
.architects__more {
margin-top: clamp(2rem, 3vw, 3rem);
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
/* ============================================================
TESTIMONIAL — single real quote, full weight
============================================================ */
.testimonial {
background: var(--forest);
color: var(--paper);
}
.testimonial__inner {
max-width: 72ch;
}
.testimonial__framing {
color: rgba(244, 241, 234, 0.70); /* raised from 0.45 → 0.70 — Decision 4 contrast pass */
margin-bottom: 1.75rem;
}
.testimonial__quote {
font-size: clamp(1.1875rem, 2.4vw + 0.3rem, 2rem);
font-weight: 400;
line-height: 1.45;
color: var(--paper);
font-style: italic;
margin-bottom: 1.75rem;
/* opening quotation mark */
position: relative;
}
.testimonial__quote::before {
content: '\201C'; /* left double quote */
font-size: 0.875em;
color: var(--accent);
margin-right: 0.05em;
}
.testimonial__quote::after {
content: '\201D'; /* right double quote */
font-size: 0.875em;
color: var(--accent);
margin-left: 0.05em;
}
.testimonial__attribution {
display: flex;
align-items: center;
gap: 1rem;
}
.testimonial__name {
font-size: var(--text-small);
font-weight: 600;
color: var(--paper);
letter-spacing: 0.02em;
}
.testimonial__source {
font-size: var(--text-meta);
color: rgba(244, 241, 234, 0.65); /* raised from 0.5 — Decision 4 */
}
/* Stars */
.testimonial__stars {
color: var(--accent);
font-size: 0.875rem;
letter-spacing: 0.1em;
}
/* ============================================================
CONTACT / CTA FORM — section 7 (embedded on homepage)
============================================================ */
.contact-section {
background: var(--bg);
border-top: 1px solid var(--border);
}
.contact-section__inner {
display: grid;
gap: clamp(2.5rem, 5vw, 5rem);
}
@media (min-width: 1024px) {
.contact-section__inner {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
/* Left — copy block */
.contact-section__copy {}
.contact-section__title {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-bottom: 1rem;
}
.contact-section__support {
font-size: var(--text-body);
line-height: var(--lh-tight);
color: var(--meta);
margin-bottom: 1.5rem;
max-width: 44ch;
}
.contact-section__reversal {
font-size: var(--text-small);
line-height: var(--lh-tight);
color: var(--ink);
padding: 1rem 1.25rem;
border-left: 2px solid var(--accent);
max-width: 42ch;
}
/* Right — form */
.contact-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.form-field label {
font-size: var(--text-meta);
font-weight: 600; /* raised from 500 — Decision 4 */
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--meta); /* now #5C5A52 — 5.6:1 AA ✓ */
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 0.875rem 1rem;
font-size: var(--text-small);
font-weight: 400;
color: var(--ink);
background: transparent;
border: 1px solid rgba(43, 43, 40, 0.20); /* raised from 0.12 → 0.20 — Decision 4: inputs must read as real fields */
border-radius: 0; /* deliberate: architectural, not soft */
appearance: none;
-webkit-appearance: none;
transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 0;
border-color: var(--accent);
}
/* Mouse-focus: border highlight only, no outline ring (pointer users don't need it) */
.form-field input:focus:not(:focus-visible),
.form-field select:focus:not(:focus-visible),
.form-field textarea:focus:not(:focus-visible) {
outline: none;
border-color: var(--accent);
}
.form-field textarea {
min-height: 7rem;
resize: vertical;
}
/* Custom select arrow */
.form-field--select {
position: relative;
}
.form-field--select::after {
content: '';
position: absolute;
right: 1rem;
bottom: 1.125rem;
width: 0.5rem;
height: 0.5rem;
border-right: 1.5px solid var(--meta);
border-bottom: 1.5px solid var(--meta);
transform: rotate(45deg);
pointer-events: none;
}
.form-field--select select {
padding-right: 2.5rem;
cursor: pointer;
}
.form-field--optional label::after {
content: ' (neobligāts)';
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--meta); /* remapped from literal grey rgba(140,138,126,0.6) → --meta token — Decision 1 */
opacity: 0.7;
font-size: 0.75em;
}
.form-submit {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.form-submit .btn {
align-self: flex-start;
min-width: 14rem;
justify-content: center;
}
.form-privacy {
font-size: 0.8125rem;
color: var(--meta);
line-height: var(--lh-tight);
}
.form-privacy a {
text-decoration: underline;
text-underline-offset: 2px;
}
.form-privacy a:hover {
color: var(--ink);
}
/* ============================================================
CONTACT INVITATION — homepage section 7 (Wave 5 rework)
Replaces the full 5-field form on the homepage.
Psychology: exploratory trust-first visitor. A 5-field form with
a budget-range field asks for commitment before trust is built.
This section is a low-friction invitation: one primary CTA routes
to kontakti.html where the full form lives (no duplication).
Phone + WhatsApp always visible so visitors who won't fill a form
still have a path to contact.
============================================================ */
.contact-invitation {
background: var(--bg);
border-top: 1px solid var(--border);
text-align: center; /* centered singular invitation */
position: relative;
z-index: 1; /* sits above decorative layers — guarantees the CTA is clickable */
overflow: hidden; /* clip the corner drawing */
}
/* Sketch — behind the linen wash, above section background */
.contact-invitation__sketch {
position: absolute;
left: 0;
bottom: 0;
width: auto;
height: 90%;
max-height: 520px;
pointer-events: none;
z-index: 0;
display: block;
object-fit: contain;
object-position: left bottom;
}
/* Linen wash — sits on top of the sketch, below content */
.contact-invitation::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(242, 239, 233, 0.78);
pointer-events: none;
z-index: 1;
}
/* Content above the wash */
.contact-invitation .container {
position: relative;
z-index: 2;
}
@media (max-width: 640px) {
.contact-invitation__sketch {
width: 70%;
height: auto;
left: 50%;
transform: translateX(-50%);
opacity: 0.6;
}
.contact-invitation::after {
background: rgba(242, 239, 233, 0.88);
}
}
.contact-invitation__inner {
max-width: 660px;
margin: 0 auto;
position: relative;
z-index: 1; /* above the drawing */
}
.contact-invitation__eyebrow {
display: block;
font-size: var(--text-eyebrow);
font-weight: 700;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--meta);
margin-bottom: 1.1rem;
}
.contact-invitation__rule {
display: block;
width: 2.5rem;
height: 2px;
background: var(--accent);
margin: 0 auto 1.75rem;
}
.contact-invitation__title {
font-size: clamp(1.75rem, 4.5vw + 0.4rem, 3.5rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-bottom: 1.1rem;
}
.contact-invitation__support {
font-size: var(--text-body);
line-height: var(--lh-tight);
color: var(--meta);
margin: 0 auto 1.75rem;
max-width: 46ch;
}
.contact-invitation__reversal {
font-size: var(--text-small);
line-height: var(--lh-tight);
color: var(--ink);
font-weight: 500;
padding: 0.9rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
max-width: 42ch;
margin: 0 auto 2.25rem;
}
/* Actions — primary CTA centered on its own line, channels centered beneath it. */
.contact-invitation__actions {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
justify-content: center;
}
/* Channel links — phone + WhatsApp as secondary, always visible */
.contact-invitation__channels {
display: flex;
flex-direction: column;
gap: 0.625rem;
align-items: center;
justify-content: center;
}
@media (min-width: 640px) {
.contact-invitation__channels {
flex-direction: row;
gap: 1.5rem;
}
}
.contact-invitation__channel {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--text-small);
font-weight: 500;
color: var(--ink);
border-bottom: 1px solid var(--border);
padding-bottom: 0.125rem;
transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact-invitation__channel:hover {
color: var(--accent);
border-color: var(--accent);
}
/* ============================================================
FOOTER — Wave-1 overhaul
Changes:
- Wordmark: centered, opacity raised to 0.38, wraps on mobile.
- CTA block: distinct centered call-to-action above the link grid,
brass-filled button (paper text), clearly separated.
- Column labels: small-caps brass eyebrow (--accent at large/UI).
- Nav / contact links: 15px paper at 75% (ratio ~10.6:1 ✓ AAA).
- Imprint / credit: 11px paper at 55% (ratio ~7.7:1 ✓ AA).
- Social icons row: inline SVG, paper 70% default, paper hover.
- Bottom row: centered copyright line.
WCAG AA verification (all text pairs on forest #171C18):
paper 75% (#C5C2BB) on forest: ~10.6:1 ✓ AAA
paper 55% (#A4A09A) on forest: ~7.2:1 ✓ AA (large text + UI)
paper 38% (#898580) on forest: ~4.8:1 ✓ AA (wordmark = large display)
brass (#8A7355) on forest at large: ~3.6:1 — UI use + column labels only
(not body text — column labels are 12px uppercase = "large text" equivalent)
--paper on --accent (CTA btn): ~3.9:1 — fails AA at 15px body weight.
Fix: btn uses --forest text on --paper bg → 14.1:1 ✓ AAA.
============================================================ */
.footer {
background: var(--forest);
color: var(--paper);
padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}
/* ── WORDMARK: centered, brighter ── */
/* Wave-1: was left-aligned at opacity 0.12. Now centered at 0.38 — real presence.
Ratio: paper at 0.38 ≈ #898580 on forest #171C18 ≈ 4.8:1 ✓ AA large text.
White-space stays nowrap on desktop; mobile wraps normally. */
/* Footer CTA block removed — the single end-CTA now lives in the page body
(contact-invitation / subpage-cta / portfolio-cta), never duplicated in the footer. */
/* ── COLUMN GRID ──
Horizontal by default (logo-area | Lapas | Kontakti side by side) from 480px up.
Only on very small phones does it drop to 2 columns with the tagline spanning. */
.footer__inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: clamp(1.5rem, 4vw, 2.5rem);
align-items: start;
}
@media (max-width: 479px) {
.footer__inner {
grid-template-columns: 1fr 1fr;
gap: 1.75rem 1.5rem;
}
.footer__logo-area { grid-column: 1 / -1; }
}
.footer__logo-area {}
.footer__tagline {
font-size: var(--text-body);
font-weight: 600;
line-height: var(--lh-tight);
color: var(--paper); /* 14.1:1 ✓ AAA */
margin-bottom: 0.375rem;
}
.footer__region {
font-size: var(--text-small);
color: rgba(244, 241, 234, 0.70); /* raised from 0.60 → 0.70: ≈9.9:1 ✓ AAA — Decision 4 */
margin-bottom: 1.25rem;
}
/* Social icons row — Decision 13: removed (bureau has no real socials; dead links worse than none).
Markup removed from all pages. These rules are kept as guards only. */
.footer__social { display: none; }
.footer__social-link { display: none; }
.footer__social-link svg { display: none; }
/* Column labels — confident eyebrow style (Decision 2: bigger + bolder + more tracking).
WCAG fix: accent (#8A7355) at 13px normal text fails AA on forest (3.6:1 < 4.5:1).
Using paper at 70% opacity = ~9.9:1 AAA. Visual hierarchy preserved via weight + tracking. */
.footer__heading {
font-size: 0.8125rem; /* 13px — raised from 12px; more confident label */
font-weight: 700; /* already 700 — kept */
letter-spacing: var(--ls-label); /* 0.18em — raised from 0.12em */
text-transform: uppercase;
color: rgba(244, 241, 234, 0.70); /* paper 70% on forest: ≈9.9:1 ✓ AAA (accent failed AA) */
margin-bottom: 1.125rem;
}
/* Nav links — 15px paper at 75% */
.footer__nav {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.footer__nav-link {
font-size: var(--text-small); /* 15px */
color: rgba(244, 241, 234, 0.75); /* ~10.6:1 ✓ AAA */
line-height: var(--lh-tight);
transition: color var(--dur-fast) var(--ease-out);
}
.footer__nav-link:hover {
color: var(--paper);
}
/* Contact list */
.footer__contact-list {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.footer__contact-item {
font-size: var(--text-small); /* 15px */
color: rgba(244, 241, 234, 0.75); /* ~10.6:1 ✓ AAA */
line-height: var(--lh-tight);
}
.footer__contact-item a {
color: inherit;
transition: color var(--dur-fast) var(--ease-out);
}
.footer__contact-item a:hover {
color: var(--paper);
}
/* ── BOTTOM ROW ── */
.footer__bottom {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-f);
display: flex;
flex-wrap: wrap;
gap: 0.75rem 2rem;
align-items: center;
justify-content: space-between;
}
.footer__imprint {
font-size: 0.6875rem; /* 11px — legal micro-text */
color: rgba(244, 241, 234, 0.62); /* raised from 0.52 → 0.62: ≈8.8:1 ✓ AA — Decision 4 */
line-height: 1.5;
max-width: 60ch;
}
.footer__legal-links {
display: flex;
gap: 1.5rem;
flex-shrink: 0;
}
.footer__legal-link {
font-size: var(--text-meta); /* 13px */
color: rgba(244, 241, 234, 0.70); /* raised from 0.60 → 0.70: ≈9.9:1 ✓ AAA — Decision 4 */
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--dur-fast) var(--ease-out);
}
.footer__legal-link:hover {
color: var(--paper);
}
/* Credit line: centered on its own row */
.footer__copy {
font-size: var(--text-meta); /* 13px */
color: rgba(244, 241, 234, 0.65); /* raised from 0.50 → 0.65: ≈9.2:1 ✓ AAA — Decision 4 */
width: 100%;
text-align: center;
}
/* ============================================================
COOKIE BANNER
============================================================ */
.cookie-banner {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 200;
background: var(--ink);
color: var(--paper);
padding: 0.875rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
max-width: calc(100vw - 3rem);
width: max-content;
}
.cookie-banner__text {
font-size: var(--text-meta);
color: rgba(244, 241, 234, 0.75);
flex: 1;
min-width: 14rem;
}
.cookie-banner__actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.cookie-banner__btn {
font-size: var(--text-meta);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.5rem 1rem;
border: 1px solid rgba(244, 241, 234, 0.25);
color: var(--paper);
cursor: pointer;
background: transparent;
transition: background var(--dur-fast) var(--ease-out);
}
.cookie-banner__btn--accept {
/* Accent background fails AA with both paper and forest text.
Use paper bg + forest text: 14:1 ratio — easily passes and remains visually distinct. */
background: var(--paper);
border-color: var(--paper);
color: var(--forest);
}
.cookie-banner__btn--accept:hover {
background: #ffffff;
border-color: #ffffff;
}
.cookie-banner__btn--reject:hover {
background: rgba(244, 241, 234, 0.08);
}
/* ============================================================
PORTFOLIO STICKY GALLERY — for Projekti page
============================================================ */
.sticky-gallery {
display: grid;
gap: 0;
}
@media (min-width: 768px) {
.sticky-gallery {
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
}
/* Media column — Motion Engineer pins this */
.sticky-gallery__media {
position: relative;
background: var(--forest);
}
@media (min-width: 768px) {
.sticky-gallery__media {
position: sticky;
top: var(--nav-h);
height: calc(100vh - var(--nav-h));
overflow: hidden;
}
}
.sticky-gallery__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Content column — scrolls past the pinned media */
.sticky-gallery__content {
padding: clamp(2rem, 4vw, 4rem);
background: var(--bg);
}
/* Mobile fallback — stacked */
@media (max-width: 767px) {
.sticky-gallery__media {
aspect-ratio: 16 / 9;
}
.sticky-gallery__media img {
object-fit: cover;
}
}
/* ============================================================
UTILITY CLASSES
============================================================ */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.text-meta { color: var(--meta); }
.text-accent { color: var(--accent); } /* use only for large/display text per AA rules */
.text-paper { color: var(--paper); }
.text-ink { color: var(--ink); }
.mt-auto { margin-top: auto; }
.border-top { border-top: 1px solid var(--border); }
/* ============================================================
REDUCED MOTION — respect user preference
All CSS transitions become instant; Motion Engineer also
checks this in JS before running GSAP.
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
/* Ensure sketch layers are hidden so photo shows immediately */
.reveal__sketch { display: none; }
.reveal__photo { clip-path: inset(0 0 0 0) !important; }
.process__line { transform: scaleY(1) !important; }
/* Module 2 float: never shown under reduced-motion */
.services-float { display: none !important; }
}
/* ============================================================
MODULE 1 — EDITORIAL ARCHITECT TREATMENT
Replaces placeholder frames entirely. No glyph, no "Jūsu foto šeit".
Large name at display scale, brass hairline role label, philosophy line.
Intentional and complete — reads as designed, not missing.
============================================================ */
/* Legacy class kept for backward compat but now hidden — no frames displayed */
.architect-frame {
display: none;
}
/* Editorial architect block — name-forward, typographic, no image */
.architect-editorial {
display: flex;
flex-direction: column;
gap: 0;
padding-bottom: clamp(2rem, 4vw, 3rem);
}
/* Large display name */
.architect-editorial__name {
font-size: clamp(1.625rem, 4vw + 0.5rem, 3.75rem);
font-weight: 700;
line-height: 1.0;
letter-spacing: -0.025em;
color: var(--ink);
margin-bottom: 0.625rem;
}
/* Brass hairline above role — architectural divider */
.architect-editorial__hairline {
display: block;
width: 2rem;
height: 1.5px;
background: var(--accent);
margin-bottom: 0.625rem;
}
/* Role label — small caps feel, meta color */
.architect-editorial__role {
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--meta);
margin-bottom: 1.25rem;
}
/* Philosophy / bio line */
.architect-editorial__bio {
font-size: var(--text-small);
line-height: var(--lh-body);
color: var(--meta);
max-width: 38ch;
}
/* ============================================================
MODULE 2 — SERVICES KINETIC SIGNPOST LIST (pakalpojumi.html)
Desktop ≥992: typographic rows + floating cursor image.
Mobile / no-JS / reduced-motion: rows with visible desc + thumb.
============================================================ */
/* Page header */
.services-list__header {
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.services-list__title {
font-size: var(--text-display-sm);
font-weight: 700;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--ink);
margin-top: 0.5rem;
}
/* Floating image container — fixed-size, pointer-events none.
Default: opacity 0, pointer-events none. JS animates opacity + position. */
.services-float {
position: fixed;
top: 0;
left: 0;
width: 360px;
height: 450px;
pointer-events: none;
z-index: 50;
opacity: 0;
/* Will-change: compositor layer ready for GSAP transform updates */
will-change: transform, opacity;
border: none;
overflow: hidden;
}
.services-float__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Service rows — typographic list */
.services-signpost {
list-style: none;
margin: 0;
padding: 0;
}
.srow {
position: relative;
cursor: default;
}
/* On desktop + motion, rows dim on sibling hover — JS handles the active class */
@media (min-width: 992px) {
.srow {
transition: opacity 0.25s ease;
}
.services-signpost.has-hover .srow:not(.is-hovered) {
opacity: 0.35;
}
}
.srow__inner {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: 0 1.5rem;
align-items: start;
padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}
/* On desktop, hide the mobile thumb (floating image replaces it) */
@media (min-width: 992px) {
.srow__thumb {
display: none;
}
}
/* Mobile / no-JS: show thumb as small inline image beside text */
@media (max-width: 991px) {
.srow__inner {
grid-template-columns: 2.5rem 1fr auto;
align-items: start;
}
.srow__thumb {
display: block;
width: 80px;
height: 100px;
overflow: hidden;
flex-shrink: 0;
align-self: start;
margin-top: 0.25rem;
}
.srow__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media (max-width: 480px) {
.srow__inner {
grid-template-columns: 2.5rem 1fr;
}
.srow__thumb {
display: none;
}
}
.srow__num {
font-size: var(--text-meta);
font-weight: 500;
color: var(--meta);
letter-spacing: var(--ls-eyebrow);
padding-top: 0.45em; /* optical alignment with title baseline */
flex-shrink: 0;
}
.srow__title {
font-size: clamp(1.25rem, 3vw + 0.4rem, 2.75rem);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-display);
color: var(--ink);
margin-bottom: 0.625rem;
}
.srow__desc {
font-size: var(--text-small);
line-height: var(--lh-body);
color: var(--meta);
max-width: 52ch;
}
/* On desktop, description is hidden until hover (JS toggles .is-hovered on row) */
@media (min-width: 992px) {
.srow__desc {
/* Visible by default (no-JS fallback: always visible).
With JS: JS will show/hide via opacity — no display:none so it remains accessible. */
opacity: 1;
max-height: none;
}
}
/* Mobile/tablet: no hover on touch — service descriptions MUST stay visible
(overrides the JS inline opacity:0 hover start-state that never clears without a hover). */
@media (max-width: 991px) {
.srow__desc { opacity: 1 !important; max-height: none !important; }
}
.srow-divider {
border: none;
border-top: 1px solid var(--border);
margin: 0;
}
/* ============================================================
MODULE 3 — TESTIMONIALS ROW (3-up on homepage)
Forest background section. 3 cards in a row on desktop,
stacked on mobile. Brass top-border accent per card.
============================================================ */
.testimonials-row {
background: var(--forest);
color: var(--paper);
}
.testimonials-row__heading {
color: rgba(244, 241, 234, 0.70); /* raised from 0.45 → 0.70 — Decision 4 + Decision 2 */
font-weight: 700;
letter-spacing: var(--ls-label); /* 0.18em */
font-size: var(--text-eyebrow); /* 14px */
margin-bottom: clamp(1.5rem, 3vw, 2.5rem); /* tightened — Decision 5 */
}
/* Decision 11 — single real quote, centered, full visual weight.
Only Juris Kigurs (verbatim 5★ Google review). Fake trio removed.
Single-col on desktop, centered within max 720px. */
.testimonials-row__grid {
display: grid;
gap: clamp(1.5rem, 3vw, 2rem);
justify-items: center;
}
@media (min-width: 768px) {
.testimonials-row__grid {
grid-template-columns: minmax(0, 720px);
justify-content: center;
gap: 1.5rem;
}
}
/* Decision 11 — double-frame card (matches .frame-2--light signature).
forest bg + paper border + brass keyline inset.
Replaces the old single border-top brass hairline that blended in.
paper on forest: 14.1:1 AAA ✓ */
.tcard {
border: 6px solid var(--paper);
box-shadow: inset 0 0 0 1.5px var(--accent); /* brass keyline — .frame-2--light match */
background: rgba(244, 241, 234, 0.04); /* faint paper lift off forest */
padding: clamp(1.5rem, 3vw, 2rem);
display: flex;
flex-direction: column;
gap: 1.1rem;
width: 100%;
}
/* Brass quotation mark — large, stronger (opacity 0.8 → more visible in framed card) */
.tcard__accent {
font-size: 3rem;
line-height: 1;
color: var(--accent);
font-weight: 700;
opacity: 0.8;
user-select: none;
letter-spacing: 0;
}
/* Quote at h4 scale — real quote carries full weight, not body-sized.
paper (#F4F1EA) on forest (#171C18): 14.1:1 ✓ AAA */
.tcard__quote {
font-size: var(--text-h4);
font-style: italic;
font-weight: 400;
line-height: 1.55;
color: var(--paper);
flex: 1;
}
.tcard__attribution {
margin-top: auto;
}
.tcard__name {
font-size: var(--text-small);
font-weight: 700;
color: var(--paper);
letter-spacing: 0.02em;
margin-bottom: 0.25rem;
}
.tcard__source {
font-size: var(--text-meta);
color: rgba(244, 241, 234, 0.65); /* raised from 0.5 → 0.65 — Decision 4 */
display: flex;
align-items: center;
gap: 0.375rem;
}
.tcard__stars {
color: var(--accent);
letter-spacing: 0.05em;
}
/* ── More reviewers — real rating-only Google reviews (no fabricated quotes) ── */
.testimonials-row__more {
max-width: 720px;
margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
text-align: center;
}
.testimonials-row__more-label {
font-size: var(--text-meta);
font-weight: 700;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: rgba(244, 241, 234, 0.60);
margin-bottom: 1.1rem;
}
.rrow-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem 2.5rem;
margin-bottom: 1.25rem;
}
.rrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: var(--text-small);
color: var(--paper);
}
.rrow__stars {
color: var(--accent);
letter-spacing: 0.05em;
}
.rrow__name {
font-weight: 600;
}
.testimonials-row__aggregate {
font-size: var(--text-meta);
color: rgba(244, 241, 234, 0.65);
letter-spacing: 0.02em;
}
.testimonials-row__aggregate strong {
color: var(--paper);
font-weight: 700;
}
/* ============================================================
MODULE 4 — FOOTER WORDMARK
Wave-1: centered + brighter (opacity 0.12 → 0.38).
Ratio: paper at 38% ≈ #898580 on forest #171C18 ≈ 4.8:1 ✓ AA large text.
The CTA block now sits BELOW the wordmark (markup order: wordmark → cta-block → inner).
============================================================ */
.footer__wordmark {
/* Max capped so the full wordmark always fits one line — no mid-word clipping. */
font-size: clamp(2rem, 6.2vw, 5.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
color: var(--paper);
opacity: 0.42;
pointer-events: none; /* decorative (aria-hidden) — never intercepts clicks */
padding-bottom: clamp(2rem, 4vw, 3rem);
/* CTA block removed — wordmark now closes off the footer head with a hairline. */
border-bottom: 1px solid rgba(244, 241, 234, 0.12);
margin-bottom: clamp(2.5rem, 5vw, 4rem);
overflow: hidden;
white-space: nowrap;
text-align: center;
}
/* Mobile: wrap gracefully instead of clipping mid-word */
@media (max-width: 600px) {
.footer__wordmark {
white-space: normal;
overflow: visible;
word-break: break-word;
font-size: clamp(2rem, 12vw, 3.25rem);
line-height: 1.04;
}
}
/* Footer links get magnetic treatment in JS (desktop + non-touch only).
These have will-change added by JS via gsap.set only when needed. */
/* ============================================================
MULTI-PAGE ADDITIONS
Styles for: Projekti index, Projekts detail, Par mums,
Pakalpojumi, Kontakti.
============================================================ */
/* ---- PROJEKTI INDEX — portfolio grid ---- */
/* Wide card spans 2 columns at ≥768px (real photos deserve more room) */
.projects__grid--portfolio {
gap: 1.5px;
background: var(--border);
border: 1px solid var(--border);
}
@media (min-width: 768px) {
.projects__grid--portfolio {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.projects__grid--portfolio {
grid-template-columns: repeat(3, 1fr);
}
.project-card--wide {
grid-column: span 2;
}
/* Wide card: taller aspect ratio to make better use of the span */
.project-card--wide .reveal {
aspect-ratio: 16 / 7;
}
}
/* Card link — makes the image area a block link without wrapping the whole card */
.project-card__link {
display: block;
overflow: hidden;
}
/* Portfolio closing CTA band (on forest bg) */
.portfolio-cta {
max-width: 64ch;
margin: 0 auto;
text-align: center;
}
.portfolio-cta__title {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--paper);
margin-bottom: 1rem;
}
.portfolio-cta__body {
font-size: var(--text-body);
color: rgba(244, 241, 234, 0.65);
line-height: var(--lh-tight);
margin: 0 auto 2rem;
max-width: 56ch;
}
/* ---- PROJEKTS DETAIL PAGE ---- */
/* Atmosphere hero — same structure as the homepage hero */
.projekts-hero {
position: relative;
min-height: 70svh;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: var(--forest);
overflow: hidden;
}
.projekts-hero__content {
position: relative;
z-index: 2;
padding: calc(var(--nav-h) + 2rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 4rem);
max-width: var(--max-w);
margin: 0 auto;
width: 100%;
}
.projekts-hero__title {
font-size: var(--text-display-sm);
font-weight: 700;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--paper);
max-width: 22ch;
margin-bottom: 0.75rem;
}
.projekts-hero__tagline {
font-size: var(--text-body);
color: rgba(244, 241, 234, 0.7);
max-width: 52ch;
line-height: var(--lh-tight);
}
/* Sketch section (b) */
.projekts-sketch {
border-top: 1px solid var(--border-f);
}
.projekts-sketch__inner {
display: grid;
gap: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 1024px) {
.projekts-sketch__inner {
grid-template-columns: 1fr 2fr;
align-items: start;
}
}
.projekts-sketch__copy .eyebrow {
margin-bottom: 1rem;
}
.projekts-sketch__text {
font-size: var(--text-body);
color: rgba(244, 241, 234, 0.7);
line-height: var(--lh-body);
max-width: 44ch;
}
/* Result section (c) */
.projekts-result {
border-top: 1px solid var(--border);
}
.projekts-result__header {
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.projekts-result__header .eyebrow {
margin-bottom: 0.75rem;
}
.projekts-result__desc {
font-size: var(--text-body);
color: var(--meta);
max-width: 52ch;
line-height: var(--lh-tight);
}
/* Full-width reveal variant for Projekts detail */
.reveal--full {
aspect-ratio: 16 / 7;
}
@media (max-width: 767px) {
.reveal--full {
aspect-ratio: 4 / 3;
}
}
/* Deliverables section (d) */
.projekts-deliverables {
border-top: 1px solid var(--border);
}
.projekts-deliverables__inner {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 1024px) {
.projekts-deliverables__inner {
grid-template-columns: 1fr 2fr;
align-items: start;
}
}
.projekts-deliverables__list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.projekts-deliverables__item {
display: grid;
grid-template-columns: 1.5rem 1fr;
gap: 0.75rem;
align-items: baseline;
font-size: var(--text-body);
color: var(--ink);
line-height: var(--lh-body);
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.projekts-deliverables__bullet {
color: var(--meta); /* WCAG fix: accent 3.6:1 fails AA at 13px on linen */
font-weight: 600;
flex-shrink: 0;
}
/* CTA section (f) */
.projekts-cta {
border-top: 1px solid var(--border-f);
}
.projekts-cta__inner {
max-width: 60ch;
margin: 0 auto;
text-align: center;
}
.projekts-cta__title {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--paper);
margin-bottom: 1rem;
}
.projekts-cta__body {
font-size: var(--text-body);
color: rgba(244, 241, 234, 0.65);
line-height: var(--lh-tight);
margin-bottom: 2rem;
}
.projekts-cta__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
/* ---- PAR MUMS PAGE ---- */
/* Editorial intro — redesigned: full-width heading, then body columns.
The old 1fr/2fr split made the heading float beside body text (unintentional).
New: heading spans full width with a brass accent rule; body sits beneath
in a single measured column on mobile, two balanced columns on wide desktop. */
.about-intro__inner {
display: grid;
gap: clamp(2rem, 4vw, 4rem);
}
/* Modifier: editorial variant overrides the old 1fr/2fr split */
.about-intro__inner--editorial {
grid-template-columns: 1fr;
gap: clamp(2rem, 3.5vw, 3.5rem);
}
/* Full-width heading block */
.about-intro__header--full {
border-bottom: none;
}
.about-intro__title--full {
font-size: clamp(1.5rem, 3.4vw + 0.5rem, 3rem);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-top: 0.5rem;
max-width: 24ch;
}
/* Brass accent rule under the heading — structural, not decorative */
.about-intro__title-rule {
width: 3rem;
height: 2px;
background: var(--accent);
margin-top: 1.5rem;
}
.about-intro__title {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-top: 1rem;
}
/* Body: measured columns beneath the heading */
.about-intro__body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.about-intro__body--cols {
column-count: 1;
column-gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 1024px) {
.about-intro__body--cols {
column-count: 2;
}
.about-intro__body--cols .about-intro__para {
max-width: none;
break-inside: avoid;
}
}
.about-intro__para {
font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
line-height: var(--lh-body);
color: var(--ink);
max-width: 62ch;
margin-bottom: 1.5rem;
}
/* Facts list — kept for backward compatibility; replaced in HTML by .about-cred */
.about-facts {
border-top: 1px solid var(--border);
}
.about-facts__inner {
display: grid;
gap: clamp(2rem, 3vw, 3rem);
}
@media (min-width: 1024px) {
.about-facts__inner {
grid-template-columns: 1fr 2fr;
align-items: start;
}
}
.about-facts__title {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
}
.about-facts__list {
display: flex;
flex-direction: column;
gap: 0;
}
.about-facts__item {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: 1rem;
align-items: baseline;
padding: 1.25rem 0;
border-bottom: 1px solid var(--border);
font-size: var(--text-body);
color: var(--ink);
line-height: var(--lh-tight);
}
.about-facts__item:first-child {
border-top: 1px solid var(--border);
}
.about-facts__bullet {
font-size: var(--text-meta);
font-weight: 600;
color: var(--meta); /* WCAG fix: accent 3.6:1 fails AA at 13px */
letter-spacing: 0.04em;
flex-shrink: 0;
}
/* ---- KĀPĒC MUM UZTICĒTIES — credential band (replaces .about-facts) ----
Two-zone: forest stat band (big numbers) + linen credibility lines.
WCAG: all text pairs verified against their backgrounds.
No third accent color — brass used only on the marker bars (non-text UI). */
.about-cred {
border-top: none;
}
/* Zone 1 — forest band with big numbers */
.about-cred__band {
background: var(--forest);
padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.about-cred__eyebrow {
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.about-cred__stats {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(1.5rem, 3vw, 2rem);
justify-content: flex-start;
}
@media (min-width: 768px) {
.about-cred__stats {
align-items: center;
justify-content: space-between;
}
}
.about-cred__stat {
display: flex;
flex-direction: column;
gap: 0.375rem;
flex: 1 1 auto;
min-width: 6rem;
}
.about-cred__num {
font-size: clamp(1.625rem, 4vw + 0.4rem, 3.5rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.0;
color: var(--paper); /* 14.1:1 on forest ✓ AAA */
}
.about-cred__label {
font-size: var(--text-eyebrow);
font-weight: 700; /* raised from 600 — Decision 2 label upgrade */
letter-spacing: var(--ls-label); /* 0.18em */
text-transform: uppercase;
color: rgba(244, 241, 234, 0.70); /* raised from 0.55 → 0.70: ≈9.9:1 ✓ AAA — Decision 4 */
line-height: 1.3;
}
/* Vertical dividers between stats */
.about-cred__rule {
width: 1px;
height: clamp(2.5rem, 5vw, 4rem);
background: rgba(138, 115, 85, 0.35);
flex-shrink: 0;
align-self: center;
}
@media (max-width: 599px) {
.about-cred__rule { display: none; }
.about-cred__stats { gap: 1.25rem 2rem; }
}
/* Zone 2 — linen credibility lines */
.about-cred__lines {
background: var(--bg);
padding: clamp(2.5rem, 5vw, 4rem) 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.about-cred__lines-inner {
display: grid;
gap: 0;
}
@media (min-width: 768px) {
.about-cred__lines-inner {
grid-template-columns: 1fr 1fr;
gap: 0 clamp(2rem, 5vw, 4rem);
}
}
.about-cred__line {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.5rem 0;
border-bottom: 1px solid var(--border);
}
.about-cred__line:last-child {
border-bottom: none;
}
@media (min-width: 768px) {
.about-cred__line {
border-bottom: none;
padding: 0;
}
}
/* Brass left-rail marker — non-text UI, accent at ≥3:1 threshold (UI use) */
.about-cred__line-marker {
display: block;
flex-shrink: 0;
width: 3px;
height: 1.5em;
margin-top: 0.2em;
background: var(--accent);
border-radius: 1px;
}
.about-cred__line-text {
font-size: var(--text-body);
line-height: var(--lh-body);
color: var(--ink); /* 13.2:1 on bg ✓ AAA */
max-width: 44ch;
}
/* ---- PAKALPOJUMI PAGE ---- */
.services-lead {
border-bottom: 1px solid var(--border);
}
.services-lead__header {
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.services-lead__title {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-top: 0.75rem;
}
.services-lead__primary {
border-top: 1px solid var(--border);
padding-top: clamp(2rem, 4vw, 3.5rem);
}
.services-lead__primary-inner {
display: grid;
gap: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 1024px) {
.services-lead__primary-inner {
grid-template-columns: 1fr 2fr;
align-items: start;
}
}
.services-lead__rule {
width: 2.5rem;
height: 2px;
background: var(--accent);
margin-top: 1.25rem;
}
.services-lead__service-title {
font-size: var(--text-display-sm);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin-bottom: 1.25rem;
}
.services-lead__service-body {
font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
line-height: var(--lh-body);
color: var(--ink);
max-width: 62ch;
}
/* Services sequence / accordion */
.services-sequence {
border-top: 1px solid var(--border);
}
.services-accordion {
display: flex;
flex-direction: column;
}
.service-divider {
border: none;
border-top: 1px solid var(--border);
margin: 0;
}
.service-item {
padding: clamp(1.75rem, 3vw, 2.5rem) 0;
}
.service-item__head {
display: grid;
grid-template-columns: 3rem 1fr;
gap: 1rem;
align-items: baseline;
margin-bottom: 1rem;
}
.service-item__num {
font-size: var(--text-meta);
font-weight: 600;
color: var(--meta); /* WCAG fix: accent 3.6:1 fails AA at 13px; meta 5.6:1 ✓ AA */
letter-spacing: 0.06em;
}
.service-item__title {
font-size: var(--text-h3);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--ls-heading);
color: var(--ink);
}
.service-item__body {
padding-left: 4rem; /* aligns under the title past the number */
}
@media (max-width: 599px) {
.service-item__body {
padding-left: 0;
}
}
.service-item__body p {
font-size: var(--text-body);
color: var(--meta);
line-height: var(--lh-body);
max-width: 62ch;
}
/* ---- KONTAKTI PAGE ---- */
/* Contact detail blocks */
.kontakti-details {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.kontakti-detail-item {
border-top: 1px solid var(--border);
padding-top: 1rem;
}
/* Contact link in kontakti page details */
.kontakti-link {
font-size: var(--text-body);
font-weight: 500;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--border);
padding-bottom: 0.125rem;
transition: border-color var(--dur-fast) var(--ease-out);
}
.kontakti-link:hover {
border-color: var(--ink);
}
/* ============================================================
MODULE A — HERO VIDEO BACKGROUND
Replaces .hero__reveal sketch/photo stack.
video is decorative; poster = hero.webp (fast LCP paint).
On mobile / save-data / reduced-motion: JS pauses the video
and the poster image shows. See app.js initHeroVideo().
============================================================ */
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Strengthen overlay slightly for video legibility vs static photo.
Paper (#F4F1EA) on the darkened video still passes WCAG AAA (≥7:1). */
.hero__overlay {
background: linear-gradient(
to top,
rgba(23, 28, 24, 0.88) 0%,
rgba(23, 28, 24, 0.52) 50%,
rgba(23, 28, 24, 0.30) 100%
);
}
/* ============================================================
MODULE B — MANIFESTO HBA TWO-COLUMN
Desktop: CSS grid 2 col. Mobile: stacked single column.
Images use overflow:hidden + clip-path wipe (app.js).
Default state (no-JS / reduced-motion): images fully visible.
============================================================ */
.manifesto__hba {
display: grid;
gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 1024px) {
.manifesto__hba {
grid-template-columns: 5fr 7fr;
gap: clamp(3rem, 5vw, 6rem);
align-items: start;
}
}
/* LEFT column */
.manifesto__col-left {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.manifesto__heading {
font-size: var(--text-h2);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
}
/* RIGHT column */
.manifesto__col-right {
display: flex;
flex-direction: column;
gap: clamp(2rem, 4vw, 3.5rem);
}
.manifesto__right-top {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
/* Vertical sidebar label — rotated on desktop, horizontal on mobile */
.manifesto__sidebar-label {
font-size: 0.8125rem; /* 13px — raised from 12px, Decision 2 */
font-weight: 700; /* raised from 500 — Decision 2 */
letter-spacing: var(--ls-label); /* 0.18em — Decision 2 */
text-transform: uppercase;
color: var(--meta); /* #5C5A52 — 5.6:1 ✓ AA */
white-space: nowrap;
flex-shrink: 0;
padding-top: 0.25rem;
}
@media (min-width: 1024px) {
.manifesto__sidebar-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
align-self: flex-start;
padding-top: 0;
padding-bottom: 0.25rem;
}
}
.manifesto__body {
display: flex;
flex-direction: column;
gap: 1.75rem;
flex: 1;
}
.manifesto__text {
font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
font-weight: 400;
line-height: 1.65;
color: var(--ink);
max-width: 58ch;
}
.manifesto__cta {
align-self: flex-start;
}
/* Figures — overflow:hidden required for clip-path wipe */
.manifesto__fig {
margin: 0;
overflow: hidden;
position: relative;
}
.manifesto__fig--portrait {
/* Portrait: taller than wide — editorial presence */
aspect-ratio: 3 / 4;
}
.manifesto__fig--landscape {
/* Landscape: wider. On desktop offsets lower via margin-top for stagger rhythm. */
aspect-ratio: 4 / 3;
}
@media (min-width: 1024px) {
.manifesto__fig--landscape {
/* HBA text_top stagger: landscape sits lower than portrait by ~3rem */
margin-top: clamp(2rem, 4vw, 3rem);
}
}
.manifesto__fig img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
/* Default revealed state — JS sets hidden clip start; image stays visible without JS */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.manifesto__caption {
display: block;
margin-top: 0.625rem;
font-size: var(--text-meta);
color: var(--meta);
letter-spacing: 0.03em;
}
/* Reduced-motion: images must be fully visible — clip-path override */
@media (prefers-reduced-motion: reduce) {
.manifesto__fig img {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
}
}
/* ============================================================
MANIFESTO — MOBILE TWO-COLUMN LAYOUT
Below 1024px: both columns side-by-side so both images
appear at proportional sizes matching the desktop pairing.
============================================================ */
@media (max-width: 1023px) {
.manifesto__hba {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
align-items: start;
}
/* Tighten heading size to fit the narrower left column */
.manifesto__heading {
font-size: clamp(1.375rem, 4.5vw, 1.75rem);
}
/* Compress right column text for narrow column */
.manifesto__text {
font-size: 0.875rem;
line-height: 1.55;
max-width: none;
}
/* Hide rotated sidebar label on mobile — no room */
.manifesto__sidebar-label {
display: none;
}
/* Remove gap between label and body since label is hidden */
.manifesto__right-top {
gap: 0;
}
/* Both images same aspect ratio on mobile for visual consistency */
.manifesto__fig--portrait,
.manifesto__fig--landscape {
aspect-ratio: 3 / 4;
}
.manifesto__caption {
font-size: 0.6875rem;
margin-top: 0.375rem;
}
}
/* ============================================================
SUB-PAGE DARK HERO BAND
Full-bleed forest section at top of each sub-page.
Replaces the bare padding-top hack (padding-top: calc(nav-h + section-py))
with a properly art-directed dark header.
Nav handling: body.page-dark-hero keeps nav paper/light until
the user scrolls past the hero band. JS adds .nav--scrolled as
usual. Without JS, nav degrades to linen state on scroll.
body.page-inner (already existing): keeps nav linen from load.
body.page-dark-hero: nav starts dark (paper), shifts to linen on scroll.
============================================================ */
/* Nav override — on pages with a dark hero, nav starts light (over dark) */
.page-dark-hero .nav:not(.nav--scrolled) {
background: transparent;
border-bottom: none;
}
.page-dark-hero .nav:not(.nav--scrolled) .nav__logo {
color: var(--paper);
}
.page-dark-hero .nav:not(.nav--scrolled) .nav__link {
color: rgba(244, 241, 234, 0.75);
}
.page-dark-hero .nav:not(.nav--scrolled) .nav__link:hover,
.page-dark-hero .nav:not(.nav--scrolled) .nav__link[aria-current="page"] {
color: var(--paper);
}
/* Dark-hero nav CTA: paper text on brass — 3.9:1 at 13px bold uppercase.
WCAG fix: forest-on-brass (4.6:1) sits right at the boundary and axe sometimes rounds it down.
Switched to paper-on-forest fill which gives 14:1 AAA and is visually stronger over a dark hero. */
.page-dark-hero .nav:not(.nav--scrolled) .nav__cta {
background: var(--paper);
border-color: var(--paper);
color: var(--forest); /* 14.1:1 ✓ AAA (forest on paper) */
}
.page-dark-hero .nav:not(.nav--scrolled) .nav__cta:hover,
.page-dark-hero .nav:not(.nav--scrolled) .nav__cta:focus-visible {
background: var(--accent);
border-color: var(--accent);
color: var(--forest);
}
.page-dark-hero .nav:not(.nav--scrolled) .nav__toggle span {
background: var(--paper);
}
/* Once scrolled past the hero, nav shifts to linen — via JS .nav--scrolled */
/* (The .nav--scrolled rules in the main nav block already handle this.) */
/* Sub-page hero band — full-bleed dark, generous height */
.subpage-hero {
position: relative;
background: var(--forest);
overflow: hidden;
padding-top: var(--nav-h); /* nav height clears the fixed bar */
padding-bottom: 0;
}
.subpage-hero__inner {
position: relative;
z-index: 2;
padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
max-width: var(--max-w);
margin: 0 auto;
}
/* Large faint section watermark — low-opacity numeral or word behind title */
.subpage-hero__watermark {
position: absolute;
/* Positioned to the right side, vertically centred in the hero */
right: clamp(1rem, 5vw, 4rem);
top: 50%;
transform: translateY(-50%);
font-size: clamp(8rem, 20vw, 18rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
/* Faint brass — below the text, atmospheric */
color: var(--accent);
opacity: 0.08;
user-select: none;
pointer-events: none;
/* Prevent pushing layout */
overflow: hidden;
white-space: nowrap;
}
.subpage-hero__eyebrow {
display: block;
font-size: var(--text-eyebrow); /* 14px — raised from 12px; Decision 2 */
font-weight: 700; /* raised from 600 — Decision 2 */
letter-spacing: var(--ls-label); /* 0.18em — raised from 0.12em; Decision 2 */
text-transform: uppercase;
color: var(--meta); /* WCAG fix: #5C5A52 on linen = 5.6:1 AA (accent was 3.6:1 FAIL at 14px) */
margin-bottom: 1.125rem;
}
.subpage-hero__title {
font-size: var(--text-display-sm);
font-weight: 700;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--paper);
max-width: 20ch;
margin-bottom: 1rem;
}
.subpage-hero__lede {
font-size: clamp(1rem, 1.8vw, 1.125rem);
font-weight: 400;
line-height: var(--lh-tight);
color: rgba(244, 241, 234, 0.65);
max-width: 52ch;
}
/* Hairline at bottom of hero band — visual close before linen body */
.subpage-hero::after {
content: '';
display: block;
height: 1px;
background: rgba(244, 241, 234, 0.10);
}
/* ============================================================
EDITORIAL HERO — Wave-4 minimal linen treatment
Replaces .subpage-hero--split on projekti, par-mums,
pakalpojumi, kontakti. projekts.html keeps .projekts-hero.
Nav: page-dark-hero removed from these 4 pages.
app.js adds nav--scrolled immediately (no .hero present).
WCAG AA: --ink (#2B2B28) on --bg (#F2EFE9) = 14.2:1 AAA
--accent (#8A7355) on --bg (#F2EFE9) = 4.6:1 AA
============================================================ */
.subpage-hero--editorial {
background: var(--bg);
padding-top: calc(var(--nav-h) + clamp(2.5rem, 5vw, 4rem)); /* tightened — Decision 5 */
padding-bottom: clamp(2rem, 4vw, 3rem);
padding-left: clamp(1.25rem, 4vw, 3rem); /* outer horizontal breathing room for the frame */
padding-right: clamp(1.25rem, 4vw, 3rem);
position: relative;
overflow: hidden;
}
/* Kill inherited ::before gradient and ::after hairline */
.subpage-hero--editorial::before,
.subpage-hero--editorial::after {
display: none;
}
/* Inner: single-column block — v-label removed (Decision 6).
Double-frame: forest outer mat (6px) + brass inner keyline (1.5px inset).
Mirrors the .frame-2 system used throughout — linen page, dark frame = matted artwork.
Box-sizing: border-box (global reset) — frame shrinks content, no overflow.
375px: 6px mat × 2 = 12px; container padding is clamp(1.25rem,4vw,3rem) — no overflow. */
.subpage-hero--editorial .subpage-hero__inner {
max-width: calc(var(--max-w) - 8rem); /* leave breathing room at wide viewports */
margin: 0 auto;
padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
display: block;
position: relative; /* anchor for the crop-mark corners */
background: var(--bg);
border: 6px solid var(--forest);
overflow: hidden;
}
/* Unique sub-page-hero frame: brass crop-mark corners (drafting registration marks)
instead of the generic inset keyline. Architectural, and distinct from the
card / testimonial double-frame so the hero reads as the "matted drawing". */
.subpage-hero--editorial .subpage-hero__inner::before {
content: "";
position: absolute;
inset: 14px;
pointer-events: none;
background:
linear-gradient(var(--accent), var(--accent)) left top,
linear-gradient(var(--accent), var(--accent)) left top,
linear-gradient(var(--accent), var(--accent)) right top,
linear-gradient(var(--accent), var(--accent)) right top,
linear-gradient(var(--accent), var(--accent)) left bottom,
linear-gradient(var(--accent), var(--accent)) left bottom,
linear-gradient(var(--accent), var(--accent)) right bottom,
linear-gradient(var(--accent), var(--accent)) right bottom;
background-repeat: no-repeat;
background-size:
24px 2px, 2px 24px,
24px 2px, 2px 24px,
24px 2px, 2px 24px,
24px 2px, 2px 24px;
}
/* Center the editorial hero content (Krister: sub-page heroes must be centered). */
.subpage-hero--editorial .subpage-hero__content {
align-items: center;
text-align: center;
position: relative;
z-index: 1; /* above the architectural drawing */
}
.subpage-hero--editorial .subpage-hero__rule {
margin-left: auto;
margin-right: auto;
}
.subpage-hero--editorial .subpage-hero__lede {
margin-left: auto;
margin-right: auto;
}
/* Faint architectural elevation behind the hero — fills the empty frame with
on-theme drafting linework (transparent SVG, brass strokes). Bleeds in from
the right; the centered text sits above it; crop-marks stay on top. */
.subpage-hero--editorial .subpage-hero__inner::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url("assets/arch-sketch.svg") no-repeat;
background-position: right -30px center;
background-size: auto 152%;
opacity: 0.5;
}
.subpage-hero--editorial .subpage-hero__inner::before { z-index: 2; }
@media (max-width: 767px) {
.subpage-hero--editorial .subpage-hero__inner::after {
background-position: center;
background-size: 165% auto;
opacity: 0.38;
}
}
/* ============================================================
IMAGE HERO — sub-pages mirror the homepage .hero:
full-bleed photo + functional dark gradient + paper headline +
small eyebrow + brass rule + ONE solid brass CTA + one quiet link.
Reuses .subpage-hero__inner/__content/__eyebrow/__title/__lede.
============================================================ */
.subpage-hero--image {
position: relative;
min-height: 62svh;
display: flex;
flex-direction: column;
justify-content: flex-end; /* content bottom-anchored, like .hero */
background: var(--forest); /* paints instantly under the image for LCP */
overflow: hidden;
padding: 0;
}
/* Kill every editorial treatment: linen frame, crop-marks, sketch SVG */
.subpage-hero--image::before,
.subpage-hero--image::after { display: none; }
.subpage-hero--image .subpage-hero__inner {
max-width: var(--max-w);
margin: 0 auto;
width: 100%;
background: transparent;
border: none;
overflow: visible;
position: relative;
z-index: 2;
padding: calc(var(--nav-h) + 2rem) clamp(1rem, 3vw + 0.3rem, 3rem) clamp(2.5rem, 5vw, 4rem);
}
.subpage-hero--image .subpage-hero__inner::before,
.subpage-hero--image .subpage-hero__inner::after { display: none; }
/* BG IMAGE LAYER — z0 */
.subpage-hero__media { position: absolute; inset: 0; z-index: 0; }
.subpage-hero__media img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 30%;
}
/* subpage hero video — same display behaviour as the image it replaces */
.subpage-hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
/* FUNCTIONAL DARK GRADIENT — z1 (legibility, not decoration) */
.subpage-hero__overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
to top,
rgba(23, 28, 24, 0.86) 0%,
rgba(23, 28, 24, 0.50) 55%,
rgba(23, 28, 24, 0.30) 100%
);
}
/* CONTENT — left-aligned like the homepage hero */
.subpage-hero--image .subpage-hero__content {
align-items: flex-start;
text-align: left;
position: relative;
z-index: 2;
max-width: var(--max-w);
}
.subpage-hero--image .subpage-hero__eyebrow {
color: rgba(244, 241, 234, 0.78);
margin-bottom: 1rem;
}
.subpage-hero--image .subpage-hero__rule {
display: block;
width: 3rem; height: 2px;
background: var(--accent);
border: none;
margin: 0 0 1.25rem;
opacity: 1;
}
.subpage-hero--image .subpage-hero__title {
font-family: var(--font-display);
font-size: var(--text-display);
font-weight: 700;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--paper);
max-width: 16ch;
margin: 0 0 1.25rem;
}
.subpage-hero--image .subpage-hero__lede {
font-size: clamp(1rem, 1.8vw, 1.1875rem);
line-height: var(--lh-tight);
color: rgba(244, 241, 234, 0.80);
max-width: 52ch;
margin: 0;
}
/* CTA row — one solid brass button + one quiet underlined link */
.subpage-hero__actions {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 2rem;
}
@media (max-width: 767px) {
.subpage-hero--image { min-height: 56svh; }
.subpage-hero--image .subpage-hero__inner {
padding: calc(var(--nav-h) + 1.5rem) clamp(1rem, 3vw + 0.3rem, 1.5rem) clamp(2rem, 6vw, 2.5rem);
}
.subpage-hero--image .subpage-hero__title { max-width: 18ch; }
}
/* ── VERTICAL LABEL — hard-killed (client decision, Decision 6) ── */
/* Markup removed from all 4 sub-page HTML files; CSS rule kept for safety */
.subpage-hero__v-label {
display: none !important;
}
/* ── CONTENT COLUMN ── */
.subpage-hero__content {
display: flex;
flex-direction: column;
gap: 0;
}
.subpage-hero--editorial .subpage-hero__eyebrow {
display: block;
font-size: var(--text-eyebrow); /* 14px */
font-weight: 700; /* raised — Decision 2 */
letter-spacing: var(--ls-label); /* 0.18em — Decision 2 */
text-transform: uppercase;
color: var(--meta); /* WCAG fix: 5.6:1 AA on linen (accent 3.6:1 failed at 14px normal text) */
margin-bottom: 0.875rem;
}
.subpage-hero--editorial .subpage-hero__rule {
display: block;
width: 3rem;
height: 1.5px;
background: var(--accent);
margin-bottom: 1.25rem;
border: none;
opacity: 1;
}
.subpage-hero--editorial .subpage-hero__title {
font-family: var(--font-display); /* now defined in :root — was undefined, silently falling back */
font-size: clamp(1.875rem, 5vw + 0.5rem, 4.5rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--ink);
margin: 0 0 1.25rem;
}
.subpage-hero--editorial .subpage-hero__lede {
font-size: clamp(1rem, 1.6vw, 1.0625rem);
font-weight: 400;
line-height: 1.65;
color: var(--ink); /* raised from --meta to full ink on linen: 13.2:1 AAA — Decision 4 */
max-width: 52ch;
margin: 0;
}
/* ── MOBILE (<768px) ── */
@media (max-width: 767px) {
.subpage-hero--editorial {
padding-top: calc(var(--nav-h) + clamp(1.25rem, 4vw, 2rem)); /* tightened mobile */
padding-bottom: clamp(1rem, 3vw, 1.75rem);
}
/* On mobile: tighten inner padding; frame stays; no overflow at 375px.
6px border × 2 = 12px; inner padding 1.25rem × 2 = 40px; total = 52px < 375px. */
.subpage-hero--editorial .subpage-hero__inner {
padding: 1.5rem 1.25rem;
max-width: 100%; /* fills within the container clamp padding */
}
.subpage-hero--editorial .subpage-hero__title {
font-size: clamp(1.875rem, 9vw, 2.75rem);
}
}
/* ── LARGE DESKTOP (≥1440px) ── */
@media (min-width: 1440px) {
.subpage-hero--editorial .subpage-hero__inner {
/* block layout stays — just widen the breathing room at 1440+ */
max-width: 960px;
}
}
/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
.subpage-hero--editorial { transition: none; }
}
/* ============================================================
SUB-PAGE FOREST CTA BAND
Dark bookend before the footer on every sub-page.
Reuses the existing risk-reversal copy + btn--light.
============================================================ */
.subpage-cta {
background: var(--forest);
color: var(--paper);
padding: clamp(4rem, 8vw, 7rem) 0;
}
.subpage-cta__inner {
max-width: 60ch;
margin: 0 auto;
text-align: center;
}
.subpage-cta__eyebrow {
display: block;
font-size: var(--text-eyebrow); /* 14px */
font-weight: 700; /* raised — Decision 2 */
letter-spacing: var(--ls-label); /* 0.18em — Decision 2 */
text-transform: uppercase;
color: rgba(244, 241, 234, 0.70); /* WCAG fix: accent 3.6:1 fails on forest; paper 70% = 9.9:1 ✓ AAA */
margin-bottom: 1.25rem;
}
.subpage-cta__title {
font-size: clamp(1.75rem, 4.5vw + 0.4rem, 3.5rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: var(--ls-heading);
color: var(--paper);
margin-bottom: 1rem;
}
/* Centered brass rule under the eyebrow — matches contact-invitation punch. */
.subpage-cta__eyebrow {
position: relative;
padding-bottom: 1.5rem;
}
.subpage-cta__eyebrow::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 2.5rem;
height: 2px;
background: var(--accent);
}
.subpage-cta__reversal {
font-size: var(--text-small);
line-height: var(--lh-tight);
color: rgba(244, 241, 234, 0.70); /* raised from 0.55 → 0.70: ≈9.9:1 ✓ AAA — Decision 4 */
margin: 0 auto 2rem;
max-width: 46ch;
}
.subpage-cta__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
/* ============================================================
ALTERNATING SERVICE ROWS (pakalpojumi.html redesign)
Replaces the flat signpost list with image+text alternating rows.
Image left on odd rows, image right on even rows.
Mobile: image on top, text below (single column).
No hover-dependent content — descriptions always visible.
============================================================ */
.services-alt {
display: flex;
flex-direction: column;
gap: 0;
}
.service-row {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--border);
}
/* Image panel */
.service-row__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
.service-row__media {
aspect-ratio: unset; /* grid row height governs on desktop */
}
}
.service-row__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Text panel */
.service-row__body {
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.25rem;
background: var(--bg);
}
.service-row__num {
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
color: var(--meta); /* WCAG fix: accent 3.6:1 fails AA at 14px */
}
.service-row__title {
font-size: var(--text-h3);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--ls-heading);
color: var(--ink);
}
.service-row__desc {
font-size: var(--text-body);
line-height: var(--lh-body);
color: var(--meta);
max-width: 52ch;
}
/* Desktop: two-column grid with named areas for reliable alternation */
@media (min-width: 768px) {
/* Odd rows: image left, text right */
.service-row {
grid-template-columns: 1fr 1fr;
grid-template-areas: "media body";
min-height: 420px;
}
.service-row .service-row__media {
grid-area: media;
}
.service-row .service-row__body {
grid-area: body;
}
/* Even rows: flip — text left, image right */
.service-row:nth-child(even) {
grid-template-areas: "body media";
}
}
@media (min-width: 1024px) {
/* Odd: image column wider on left */
.service-row {
grid-template-columns: 5fr 7fr;
grid-template-areas: "media body";
min-height: 480px;
}
/* Even: text column wider on left, image on right */
.service-row:nth-child(even) {
grid-template-columns: 7fr 5fr;
grid-template-areas: "body media";
}
}
/* Last row gets a hairline at bottom */
.services-alt .service-row:last-child {
border-bottom: 1px solid var(--border);
}
/* ============================================================
ARCHITECTS PAIR — updated for editorial treatment
Now the pair container uses more vertical space since the
placeholder frames are gone. Generous gap between the two.
============================================================ */
.architects__pair--editorial {
display: grid;
gap: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 768px) {
.architects__pair--editorial {
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
}
}
/* Override: editorial block inside the architects section — add top border */
.architects__pair--editorial .architect-editorial {
border-top: 1px solid var(--border);
padding-top: 1.75rem;
}
/* ============================================================
FOREST FRAMING SYSTEM — elevation pass June 2026
Client directive: forest (#171C18) as framing / contrast device,
used much more across every page for rhythm + richness.
Four sub-systems:
A. Architect forest cards (homepage + par-mums)
B. Contact page forest panel (kontakti)
C. Sub-page hero band enhancements
D. Global forest dividers between linen sections
============================================================ */
/* ── A. ARCHITECT FOREST CARDS ──────────────────────────────
Replaces .architect-editorial open-on-linen editorial treatment.
Each card: forest bg, generous padding, hairline brass inset,
portrait placeholder frame (4:5), name (paper), role (brass eyebrow),
bio (paper at 0.82 opacity). Two-up desktop → stacked mobile.
CONTRAST VERIFICATION:
paper (#F4F1EA) on forest (#171C18): 14.1:1 ✓ AAA
brass eyebrow label (#8A7355) on forest at 13px: 3.9:1 — fails AA body.
→ Role label bumped to 11px + 600 weight + ALL-CAPS to qualify as "large
text" equivalent in design intent; OR use paper at 55% (ratio ≈ 7.7:1).
Decision: role as rgba(paper, 0.60) + 700 weight + letter-spacing 0.13em
— effective ratio ~8.5:1 on forest. PASSES AA.
Brass used ONLY as decorative hairline (non-text), no contrast requirement.
────────────────────────────────────────────────────────── */
/* Container pair — same grid structure, different surface */
.architects__pair--cards {
display: grid;
gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 768px) {
.architects__pair--cards {
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 2.5vw, 2rem);
}
}
/* The card itself */
.architect-card {
background: var(--forest);
/* Hairline brass inset — 1px inset shadow acts as border within the card surface.
Not a third color: derived from --accent (the existing brass token). */
box-shadow: inset 0 0 0 1px rgba(138, 115, 85, 0.28);
padding: clamp(2rem, 4vw, 2.75rem);
display: flex;
flex-direction: column;
gap: 0;
}
/* Portrait placeholder frame — 4:5 aspect, grayscale panel aesthetic.
Intentional design, not a broken image slot.
Real production step: swap with ![]()
grayscale photo on client win.
*/
.architect-card__portrait {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
margin-bottom: clamp(1.5rem, 3vw, 2rem);
/* Paper-tint gradient on forest — reads as a composed photographic frame */
background: linear-gradient(
160deg,
rgba(244, 241, 234, 0.07) 0%,
rgba(244, 241, 234, 0.03) 45%,
rgba(23, 28, 24, 0.0) 100%
);
/* Hairline inside the frame */
box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.10);
}
/* Minimal figure mark — low opacity architectural glyph.
A vertical rule + horizontal crossbar suggest a human silhouette
at absolute minimum without implying a real face. */
.architect-card__portrait::before {
content: '';
position: absolute;
/* Vertical torso line */
left: 50%;
top: 28%;
transform: translateX(-50%);
width: 1px;
height: 38%;
background: rgba(244, 241, 234, 0.12);
}
.architect-card__portrait::after {
content: '';
position: absolute;
/* Head circle */
left: 50%;
top: 18%;
transform: translate(-50%, -50%);
width: clamp(2.5rem, 6vw, 3.5rem);
height: clamp(2.5rem, 6vw, 3.5rem);
border-radius: 50%;
border: 1px solid rgba(244, 241, 234, 0.12);
background: transparent;
}
/* Brass hairline rule between portrait and copy — architectural divider */
.architect-card__rule {
display: block;
width: 100%;
height: 1px;
/* Single brass hairline — 1px non-text element, no contrast requirement */
background: rgba(138, 115, 85, 0.35);
margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Name — display weight, paper on forest */
.architect-card__name {
font-size: clamp(1.375rem, 3vw + 0.4rem, 2.75rem);
font-weight: 700;
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--paper); /* 14.1:1 on forest ✓ AAA */
margin-bottom: 0.75rem;
}
/* Role eyebrow — raised to paper at 70% + stronger tracking; Decision 2+4.
Ratio: rgba(244,241,234, 0.70) ≈ #CCCA C3 on #171C18 ≈ 9.9:1 ✓ AAA */
.architect-card__role {
font-size: var(--text-eyebrow); /* 14px — raised; Decision 2 */
font-weight: 700;
letter-spacing: var(--ls-label); /* 0.18em — Decision 2 */
text-transform: uppercase;
color: rgba(244, 241, 234, 0.70); /* raised from 0.60 — Decision 4 */
margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
/* Bio — paper at 82% — readable body text on dark
Ratio: rgba(244,241,234, 0.82) ≈ #CECBC4 on #171C18 = 10.3:1 ✓ AAA */
.architect-card__bio {
font-size: var(--text-small); /* 15px */
font-weight: 400;
line-height: var(--lh-body); /* 1.65 */
color: rgba(244, 241, 234, 0.82);
max-width: 38ch;
}
/* ── B. CONTACT PAGE FOREST PANEL ────────────────────────────
Left column of the contact layout becomes a forest panel.
Paper text, brass for decorative rules only (never small-text labels).
Label text: rgba(paper, 0.60) ≈ 7.7:1 on forest ✓ AA.
Link/phone text: var(--paper) ≈ 14.1:1 on forest ✓ AAA.
Submit button: forest bg + paper text (inside linen section, unchanged).
────────────────────────────────────────────────────────── */
/* Forest panel wraps the left copy column on the kontakti page */
.kontakti-forest-panel {
background: var(--forest);
/* Hairline brass inset */
box-shadow: inset 0 0 0 1px rgba(138, 115, 85, 0.25);
padding: clamp(2rem, 5vw, 3rem);
display: flex;
flex-direction: column;
gap: 0;
/* Stretch to fill the grid cell height (parent grid uses align-items: start by default).
Override to make the panel fill its column from top to bottom. */
align-self: stretch;
/* Ensure the grid parent stretches both columns equally */
min-height: 100%;
}
/* Section heading inside forest panel — paper at full opacity */
.kontakti-forest-panel .contact-section__title {
color: var(--paper);
margin-bottom: 1rem;
}
/* Support paragraph — subdued paper */
.kontakti-forest-panel .contact-section__support {
color: rgba(244, 241, 234, 0.70);
margin-bottom: 1.5rem;
}
/* Risk reversal block — brass left-border (decorative), paper text */
.kontakti-forest-panel .contact-section__reversal {
border-left: 2px solid rgba(138, 115, 85, 0.55); /* brass hairline, decorative */
color: rgba(244, 241, 234, 0.65);
padding-left: 1.25rem;
background: transparent;
}
/* Contact detail section heading (eyebrow style) inside panel */
.kontakti-forest-panel .eyebrow {
/* Override the linen-context meta color with panel-appropriate paper 60% */
color: rgba(244, 241, 234, 0.60) !important;
}
/* Detail item dividers — paper at 10% instead of --border (dark ink) */
.kontakti-forest-panel .kontakti-detail-item {
border-top: 1px solid rgba(244, 241, 234, 0.10);
padding-top: 1rem;
}
/* Contact links inside panel — full paper, underline in brass-ish tone */
.kontakti-forest-panel .kontakti-link {
color: var(--paper);
border-bottom-color: rgba(244, 241, 234, 0.25);
font-weight: 500;
}
.kontakti-forest-panel .kontakti-link:hover {
border-bottom-color: var(--paper);
}
/* Address and meta text inside panel */
.kontakti-forest-panel address,
.kontakti-forest-panel p {
color: rgba(244, 241, 234, 0.82);
}
/* When the left column is a forest panel, stretch the grid so the panel fills full height.
Class applied directly in kontakti.html to avoid :has() compat concerns. */
.contact-section__inner--stretch {
align-items: stretch;
}
/* Stronger form fields — on linen, more definition */
.contact-form--strong .form-field input,
.contact-form--strong .form-field select,
.contact-form--strong .form-field textarea {
border: 1.5px solid rgba(43, 43, 40, 0.32); /* ink at 32% — clearly visible on linen */
background: var(--paper);
}
.contact-form--strong .form-field input:focus-visible,
.contact-form--strong .form-field select:focus-visible,
.contact-form--strong .form-field textarea:focus-visible {
outline: 2px solid var(--forest);
outline-offset: 0;
border-color: var(--forest);
box-shadow: 0 0 0 3px rgba(23, 28, 24, 0.12);
}
.contact-form--strong .form-field input:focus:not(:focus-visible),
.contact-form--strong .form-field select:focus:not(:focus-visible),
.contact-form--strong .form-field textarea:focus:not(:focus-visible) {
outline: none;
border-color: var(--forest);
box-shadow: 0 0 0 2px rgba(23, 28, 24, 0.10);
}
.contact-form--strong .form-field input::placeholder,
.contact-form--strong .form-field textarea::placeholder {
color: rgba(43, 43, 40, 0.38);
}
.contact-form--strong .form-field label {
color: var(--ink); /* full ink on linen for label contrast */
}
/* Forest-filled submit button — strong anchor at bottom of form */
.btn--forest {
background: var(--forest);
border-color: var(--forest);
color: var(--paper); /* 14.1:1 ✓ AAA */
}
.btn--forest:hover,
.btn--forest:focus-visible {
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
/* ── C. SUB-PAGE HERO BAND ENHANCEMENTS ──────────────────────
Transform flat dark strips into art-directed bands:
- Watermark numeral: larger, can overflow/crop at edge (bold as ink stamp)
- Brass keyline rule under the eyebrow — thin, architectural
- Asymmetric layout: content pushed left with a right-side breathing zone
- Layered forest tone: subtle inner top-gradient lifts the band off the footer
────────────────────────────────────────────────────────── */
/* Inner gradient layer — gives the flat forest band a subtle tonal depth.
Top: slightly lighter forest; bottom: pure forest. Not decorative chrome —
this creates a visual plane that lifts headline off the hero base. */
.subpage-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.03) 0%,
transparent 60%
);
pointer-events: none;
z-index: 1;
}
/* Brass keyline rule — sits between eyebrow and title.
Inserted via a span.subpage-hero__rule element added in HTML. */
.subpage-hero__rule {
display: block;
width: 2.5rem;
height: 1.5px;
background: var(--accent); /* decorative, 1.5px non-text ✓ no contrast gate */
margin-top: 0.75rem;
margin-bottom: 1.25rem;
flex-shrink: 0;
}
/* Watermark numeral — bolder presence, crops at edge with intent */
.subpage-hero__watermark {
font-size: clamp(10rem, 22vw, 20rem); /* bumped from 8/20/18 → 10/22/20 */
opacity: 0.07; /* slightly more present — more architectural stamp quality */
/* Shift further right so it crops at the edge on most viewports */
right: clamp(-1rem, -2vw, -2rem);
/* Vertically: align bottom of numeral with bottom of hero, partially cut off */
top: auto;
bottom: -0.15em;
transform: none; /* override the translateY(-50%) from base styles */
letter-spacing: -0.06em;
}
/* Eyebrow: meta color on linen subpage hero context (WCAG fix: accent 3.6:1 failed AA at 14px) */
.subpage-hero .subpage-hero__eyebrow {
color: var(--meta); /* #5C5A52 on #F2EFE9 = 5.6:1 AA */
}
/* Left-bias layout: the content column uses max-width to create
a deliberate right-side white space where the watermark lives */
.subpage-hero__inner {
max-width: 780px; /* narrower than --max-w: creates asymmetric breathing room */
}
/* Horizontal brass accent line at the bottom of the hero band.
Replaces the faint rgba hairline with a more deliberate close. */
.subpage-hero::after {
height: 1.5px;
background: rgba(138, 115, 85, 0.30); /* brass at 30% — subtle close */
}
/* Title: tighten letter spacing for more architectural stamp quality on subpage heroes */
.subpage-hero .subpage-hero__title {
letter-spacing: -0.025em; /* tighter than --ls-display (-0.02) */
}
/* Lede: slightly more breathing room on the subpage band */
.subpage-hero .subpage-hero__lede {
margin-top: 0.5rem;
}
/* ── D. GLOBAL FOREST DIVIDERS ────────────────────────────────
Linen ↔ forest alternation rhythm across every page.
Thin forest-tone dividers between linen sections to make the
alternation feel intentional without forcing dark backgrounds.
────────────────────────────────────────────────────────── */
/* Forest-accent section rule — used as a top-border on linen sections
that follow a forest section, to close the visual gap deliberately */
.section--forest-rule {
border-top: 2px solid var(--forest);
}
/* Accent-rule variant: brass, 1px — secondary rhythm marker */
.section--brass-rule {
border-top: 1px solid var(--accent);
}
/* Forest interstitial band — narrow forest strip between linen sections.
Used between Process and Architects on homepage to break the linen monotony. */
.forest-interstitial {
background: var(--forest);
padding: clamp(2rem, 4vw, 3rem) 0;
border-top: none;
border-bottom: none;
}
.forest-interstitial__inner {
display: flex;
align-items: center;
justify-content: center; /* centered, not edge-spread — reads as one band */
gap: clamp(1.5rem, 4vw, 3.5rem);
flex-wrap: wrap;
text-align: center;
}
/* Stat/fact callout inside forest interstitial */
.forest-interstitial__stat {
display: flex;
flex-direction: column;
align-items: center; /* centered value + label */
gap: 0.25rem;
}
.forest-interstitial__stat-value {
font-size: clamp(1.25rem, 2.6vw + 0.4rem, 2.25rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--paper); /* 14.1:1 ✓ AAA */
line-height: 1.1;
}
.forest-interstitial__stat-label {
font-size: var(--text-eyebrow);
font-weight: 700; /* raised from 600 — Decision 2 label upgrade */
letter-spacing: var(--ls-label); /* 0.18em */
text-transform: uppercase;
color: rgba(244, 241, 234, 0.70); /* raised from 0.55 → 0.70: ≈9.9:1 ✓ AAA — Decision 4 */
}
/* Brass rule accent in interstitial */
.forest-interstitial__rule {
width: 1px;
height: clamp(2.5rem, 5vw, 4rem);
background: rgba(138, 115, 85, 0.40);
flex-shrink: 0;
}
@media (max-width: 599px) {
.forest-interstitial__rule { display: none; }
.forest-interstitial__inner { gap: 1.5rem; }
}
/* ── ARCHITECTS SECTION — forest bg context ───────────────────
When the architects section sits on forest (used as a variant),
override ink-on-linen styles for paper-on-forest.
Not currently used — kept as a token for Motion Engineer or future pass. */
.architects--forest {
background: var(--forest);
color: var(--paper);
}
.architects--forest .architects__title,
.architects--forest .architects__intro {
color: var(--paper);
}
/* ── SECTION TRANSITION BRASS HAIRLINE ───────────────────────
Reusable: place on any section to get a brass top-border
instead of the default ink/12% border. */
.border-brass {
border-top: 1px solid rgba(138, 115, 85, 0.35) !important;
}
/* Stronger linen-section top rule adjacent to forest sections */
.border-forest {
border-top: 1.5px solid var(--forest) !important;
}
/* ============================================================
MODULE 1 — PROCESS STICKY TWO-COLUMN
Desktop (≥992px): LEFT col scrolls, RIGHT is sticky forest panel.
Mobile (<992px): stacked, no sticky, linear read.
No-JS / reduced-motion: house fully revealed, static.
============================================================ */
/* Section resets — keep existing linen bg + border-top */
.process__body {
display: flex;
align-items: flex-start;
gap: 0;
}
/* LEFT scrolling column — 55% wide on desktop */
.process__stages-col {
flex: 0 0 55%;
min-width: 0;
}
/* RIGHT sticky column — 45% wide on desktop */
.process__sticky-col {
flex: 0 0 45%;
min-width: 0;
/* Hidden on mobile — falls below media query */
display: none;
}
@media (min-width: 992px) {
.process__sticky-col {
display: block;
/* Sticky: offset by nav height (--nav-h: 4rem) + a little breathing room */
position: sticky;
top: calc(var(--nav-h) + 2rem);
align-self: flex-start;
/* Height so it doesn't over-stretch when stages are short */
max-height: calc(100vh - var(--nav-h) - 4rem);
}
}
/* The forest panel itself */
.process__sticky-panel {
background: var(--forest);
/* Hairline brass inset — non-text, no contrast requirement */
box-shadow: inset 0 0 0 1px rgba(138, 115, 85, 0.22);
padding: clamp(2rem, 4vw, 3rem);
display: flex;
flex-direction: column;
gap: 0;
/* Fill the sticky column */
min-height: 480px;
}
/* Big display step number — paper on forest */
.process__sticky-num {
font-size: clamp(4rem, 9vw, 7rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.0;
color: var(--paper); /* 14.1:1 ✓ AAA */
margin-bottom: 0.5rem;
/* JS transitions the text content — no CSS animation needed */
transition: opacity 0.35s var(--ease-out);
}
/* Active step name — paper at 82% */
.process__sticky-name {
font-size: var(--text-h4);
font-weight: 600;
letter-spacing: var(--ls-heading);
color: rgba(244, 241, 234, 0.82); /* ≈ 11.6:1 ✓ AAA */
margin-bottom: 1.75rem;
transition: opacity 0.35s var(--ease-out);
}
/* Progress track: 5 ticks */
.process__sticky-track {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
list-style: none;
padding: 0;
}
.process__tick {
width: 1.875rem;
height: 3px;
background: rgba(244, 241, 234, 0.18);
border-radius: 2px;
transition: background-color 0.3s var(--ease-out), width 0.3s var(--ease-out);
}
/* Active tick: brass, slightly wider */
.process__tick--active {
background: var(--accent);
width: 2.75rem;
}
/* Done ticks: paper at 50% */
.process__tick--done {
background: rgba(244, 241, 234, 0.50);
}
/* House reveal container */
.process__house {
position: relative;
flex: 1;
overflow: hidden;
/* min-height so it doesn't collapse */
min-height: 220px;
/* Hairline inside the house frame */
box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.08);
}
/* Blueprint base layer — always visible */
.process__house-sketch {
position: absolute;
inset: 0;
overflow: hidden;
}
.process__house-sketch img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* Slight desaturate to read as plan/sketch */
filter: saturate(0.2) brightness(0.85);
display: block;
}
/* Photo overlay — reveals via clip-path (JS controls) */
.process__house-photo {
position: absolute;
inset: 0;
overflow: hidden;
/* No-JS + reduced-motion default: fully revealed */
clip-path: inset(0 0 0 0);
}
/* With JS + motion: start hidden, JS will set initial clip */
.js .process__house-photo {
clip-path: inset(100% 0 0 0);
}
.process__house-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Caption bar */
.process__house-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.625rem 0.875rem;
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
/* rgba(paper, 0.60) on forest ≈ 7.7:1 ✓ AA */
color: rgba(244, 241, 234, 0.60);
background: rgba(23, 28, 24, 0.55);
}
/* Mobile: keep the linear process list, hide the sticky panel */
@media (max-width: 991px) {
.process__body {
flex-direction: column;
}
.process__stages-col {
flex: 1 1 100%;
width: 100%;
}
.process__sticky-col {
display: none !important;
}
}
/* Reduced-motion override: house fully revealed, no transitions */
@media (prefers-reduced-motion: reduce) {
.process__house-photo {
clip-path: inset(0 0 0 0) !important;
transition: none;
}
.process__sticky-num,
.process__sticky-name {
transition: none;
}
.process__tick {
transition: none;
}
}
/* ============================================================
MODULE 2 — SERVICES VERTICAL LIST (pakalpojumi.html)
Two-column scroll list mirroring the process sticky-panel pattern.
DESKTOP (≥992px):
LEFT col (48%): typographic list of 5 services.
Active row: forest ink + brass left rail + full opacity.
Inactive rows: dimmed to 0.38 opacity.
RIGHT col (52%): position:sticky image frame.
All 5 images stacked (absolute, full-fill).
Active image: opacity 1. Inactive: opacity 0.
JS crossfades via gsap opacity tween on scroll + hover.
MOBILE (<992px): No sticky. Stack layout:
name + description + LARGE full-width image below (no thumbs).
svl__sticky-col hidden. svl__mobile-img displayed.
NO-JS / REDUCED-MOTION:
All images visible (mobile stacked layout forced on all widths).
svl__row--active class on row 0: rail + name color set via CSS.
First image layer opacity:1 via CSS (.svl__img-layer--active).
============================================================ */
/* ============================================================
SVL BRIDGE — section break between split hero and services list.
Full-width linen band with horizontal brass rule + chapter label.
Gives visual breathing room so the hero and list read as distinct
moments rather than a single merged block.
============================================================ */
.svl-bridge {
display: flex;
align-items: center;
gap: clamp(1rem, 3vw, 2rem);
padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 5vw, 3rem);
background: var(--bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.svl-bridge__label {
font-size: var(--text-eyebrow);
font-weight: 700;
letter-spacing: var(--ls-eyebrow);
color: var(--ink); /* WCAG: ink 13.2:1 ✓ AAA — bridges any gradient background ambiguity */
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.svl-bridge__rule {
flex: 1;
height: 1px;
background: linear-gradient(to right, var(--accent) 0%, transparent 100%);
opacity: 0.45;
}
.svl-bridge__count {
font-size: var(--text-eyebrow);
font-weight: 500;
letter-spacing: var(--ls-eyebrow);
color: var(--meta);
white-space: nowrap;
flex-shrink: 0;
}
.svl-section {
padding-top: 0;
padding-bottom: 0;
}
/* Outer wrapper: two columns side-by-side on desktop */
.svl {
display: flex;
flex-direction: column;
gap: 0;
/* Border top aligns with the subpage-hero bottom edge */
border-top: 1px solid var(--border);
}
@media (min-width: 992px) {
.svl {
flex-direction: row;
align-items: flex-start;
gap: 0;
}
}
/* ── LEFT: typographic list ─────────────────────────────── */
.svl__list {
list-style: none;
margin: 0;
padding: 0;
/* Desktop: take 48% of width */
flex: 0 0 100%;
border-right: none;
}
@media (min-width: 992px) {
.svl__list {
flex: 0 0 48%;
/* Hairline divider between columns */
border-right: 1px solid var(--border);
/* Enough min-height so sticky col has room to work */
min-height: 100%;
}
}
/* Each service row */
.svl__row {
position: relative;
border-bottom: 1px solid var(--border);
padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
padding-left: clamp(1.75rem, 4vw, 3rem); /* room for the rail */
cursor: default;
/* Transition the dim state */
transition: opacity 0.3s var(--ease-out);
/* Clip mobile image bleed — prevents horizontal overflow */
overflow: hidden;
}
/* When the list has an active state, dim non-active rows */
.svl.has-active .svl__row:not(.svl__row--active) {
opacity: 0.38;
}
/* Active row: full opacity already (not dimmed) */
.svl__row--active {
opacity: 1 !important;
}
/* Brass left rail — the active indicator */
.svl__rail {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
opacity: 0;
transition: opacity 0.25s var(--ease-out);
}
.svl__row--active .svl__rail {
opacity: 1;
}
/* Row number */
.svl__num {
display: block;
font-size: var(--text-eyebrow);
font-weight: 700;
letter-spacing: var(--ls-eyebrow);
color: var(--meta);
margin-bottom: 0.625rem;
transition: color 0.25s var(--ease-out);
}
.svl__row--active .svl__num {
color: var(--ink); /* WCAG fix: accent 3.6:1 fails at 14px on linen */
}
/* Text block */
.svl__text {
/* Keeps structure simple — num above, name + desc in this div */
}
/* Service name — the big typographic statement */
.svl__name {
font-size: clamp(1.25rem, 2.9vw + 0.4rem, 2.625rem);
font-weight: 700;
letter-spacing: var(--ls-heading);
line-height: var(--lh-tight);
color: var(--ink);
margin: 0 0 0.875rem;
transition: color 0.25s var(--ease-out);
}
.svl__row--active .svl__name {
color: var(--forest);
}
/* Description */
.svl__desc {
font-size: var(--text-small);
line-height: var(--lh-body);
color: var(--meta);
max-width: 52ch;
}
/* Mobile image: large, full-width, no thumbnails */
.svl__mobile-img {
/* Shown only on mobile */
display: none;
margin-top: clamp(1.5rem, 4vw, 2.5rem);
/* Bleed to row edges (row has overflow:hidden so this is safe) */
margin-left: calc(-1 * clamp(1.75rem, 4vw, 3rem));
margin-right: calc(-1 * clamp(1.25rem, 4vw, 3rem));
overflow: hidden;
margin-bottom: -1px; /* flush to the border-bottom of the row */
}
.svl__mobile-img img {
display: block;
width: 100%;
height: auto;
/* Generous aspect ratio — client hated cramped/closed-up images */
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
}
/* Show mobile images on mobile, hide on desktop */
@media (max-width: 991px) {
.svl__mobile-img {
display: block;
}
}
/* ── RIGHT: sticky dial column (desktop only) ───────────── */
.svl__sticky-col {
/* Hidden on mobile — mobile uses .svl__mobile-img */
display: none;
}
@media (min-width: 992px) {
.svl__sticky-col {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 52%;
/* Sticky: nav height + breathing room */
position: sticky;
top: calc(var(--nav-h) + 1.5rem);
align-self: flex-start;
max-height: calc(100vh - var(--nav-h) - 3rem);
padding: clamp(1.5rem, 3vw, 3rem);
}
}
/* ── DIAL WRAPPER ───────────────────────────────────────── */
.svl__dial {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
width: 100%;
}
/* The SVG dial — fills the sticky col up to a capped size */
.svl__dial-svg {
display: block;
width: 100%;
max-width: clamp(280px, 38vw, 460px);
height: auto;
/* will-change only on the rotating ring sub-element — set in JS */
overflow: visible; /* labels near edge need to breathe */
}
/* ── DIAL SVG PARTS ─────────────────────────────────────── */
/* Outer track ring — thin, linen-tinted on forest bg:
We display on linen bg, so ring is forest-ink colored */
.svl-dial__track {
fill: none;
stroke: var(--forest);
stroke-width: 1;
opacity: 0.18;
}
/* Inner rim circle framing the image disc */
.svl-dial__inner-rim {
fill: none;
stroke: var(--accent);
stroke-width: 1.5;
opacity: 0.55;
}
/* The rotating ring group — CSS default: rotation 0deg.
JS sets GSAP rotation property on this element. */
.svl-dial__ring {
transform-origin: 200px 200px; /* SVG viewBox centre */
/* will-change: transform set in JS once GSAP is live */
}
/* Marker dots on the ring perimeter */
.svl-dial__dot {
fill: var(--meta);
opacity: 0.55;
transition: fill 0.3s var(--ease-out), opacity 0.3s var(--ease-out), r 0.3s var(--ease-out);
}
/* Active marker — JS adds .svl-dial__marker--active to the parent */
.svl-dial__marker--active .svl-dial__dot {
fill: var(--accent);
opacity: 1;
r: 6.5; /* slightly larger — CSS r on SVG circle supported in all modern browsers */
}
/* Number labels on the ring */
.svl-dial__label {
/* Hidden: the GSAP ring rotation flings these numeric labels outside the
overflow:visible SVG, where they read as stray floating numbers across the
page. Each service is already numbered in the left column (.svl__num), so
the dial keeps its dots + centre image + caption — no redundant numbers. */
display: none;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
fill: var(--meta);
text-anchor: middle;
dominant-baseline: middle;
opacity: 0.55;
transition: fill 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
/* Labels rotate with the ring group but need to stay legible —
counter-rotate each label so text stays upright.
JS sets the counter-rotation on each label when ring rotates. */
transform-box: fill-box;
transform-origin: center;
}
.svl-dial__marker--active .svl-dial__label {
fill: var(--accent);
opacity: 1;
}
/* Fixed brass tick — indicator at top of the dial */
.svl-dial__tick {
stroke: var(--accent);
stroke-width: 2;
stroke-linecap: round;
opacity: 0.9;
}
/* Brass arc accent framing the indicator zone */
.svl-dial__arc {
stroke: var(--accent);
stroke-width: 1.5;
stroke-linecap: round;
opacity: 0.6;
}
/* Centre cross-hair dot */
.svl-dial__centre {
fill: var(--accent);
opacity: 0.7;
}
/* ── IMAGE LAYERS inside the SVG disc ───────────────────── */
/* SVG elements inside the clip group */
.svl__dial-img {
/* Default: invisible. JS crossfades via opacity attribute/tween. */
opacity: 0;
/* CSS fallback for reduced-motion / no-JS:
first layer (.svl__dial-img--active) keeps opacity:1 */
transition: opacity 0.55s var(--ease-out);
}
.svl__dial-img--active {
opacity: 1;
}
/* With JS: GSAP manages all opacity tweens — disable CSS transition */
.js .svl__dial-img {
transition: none;
}
/* ── DIAL CAPTION — active service name below the circle ── */
.svl__dial-caption {
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
color: var(--accent);
text-align: center;
text-transform: uppercase;
margin: 0;
min-height: 1.4em; /* reserve space so layout doesn't shift */
transition: opacity 0.2s var(--ease-out);
}
/* Reduced-motion: no transitions, no rotation, first image static */
@media (prefers-reduced-motion: reduce) {
.svl__dial-img {
transition: none;
}
.svl__dial-img--active {
opacity: 1;
}
.svl-dial__ring {
/* Stay at initial 0deg — no transform applied */
transform: none !important;
}
.svl.has-active .svl__row:not(.svl__row--active) {
opacity: 1; /* no dimming under reduced motion */
transition: none;
}
.svl__rail,
.svl__num,
.svl__name {
transition: none;
}
.svl-dial__label {
transition: none;
/* Counter-rotation not needed — ring doesn't rotate */
transform: none !important;
}
}
/* No-JS: force mobile stacked layout on all widths */
.no-js .svl__sticky-col {
display: none !important;
}
.no-js .svl__mobile-img {
display: block !important;
}
.no-js .svl__list {
flex: 1 1 100%;
border-right: none;
}
/* ============================================================
MODULE 2 — FOREST-FRAMED ACCORDION (pakalpojumi.html) [LEGACY]
Kept for reference — no longer rendered. Elements removed from HTML.
============================================================ */
.sacc-section {
padding-top: 0;
padding-bottom: 0;
}
/* Accordion container */
.sacc {
border-top: 1px solid var(--border);
}
/* Each row */
.sacc__row {
border-bottom: 1px solid var(--border);
/* Active row: forest left accent bar via box-shadow */
position: relative;
}
/* Trigger button — full-width clickable header */
.sacc__trigger {
display: flex;
align-items: center;
width: 100%;
text-align: left;
padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 4vw, 3rem);
gap: 1rem;
cursor: pointer;
background: transparent;
border: none;
position: relative;
/* Focus ring */
outline: none;
}
.sacc__trigger:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* Forest left rail — decorative 3px vertical bar on the active row */
.sacc__rail {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--forest);
opacity: 0;
transition: opacity 0.25s var(--ease-out);
}
/* Show rail when row is open */
.sacc__row--open .sacc__rail {
opacity: 1;
}
/* Number */
.sacc__num {
font-size: var(--text-eyebrow);
font-weight: 700;
letter-spacing: var(--ls-eyebrow);
color: var(--meta);
flex-shrink: 0;
min-width: 2rem;
transition: color 0.25s var(--ease-out);
}
/* Active: number goes ink (accent fails AA at 14px normal weight on linen) */
.sacc__row--open .sacc__num {
color: var(--ink);
}
/* Service name — the big heading */
.sacc__name {
font-size: clamp(1.25rem, 2.5vw, 2rem);
font-weight: 700;
letter-spacing: var(--ls-heading);
line-height: var(--lh-tight);
color: var(--ink);
flex: 1;
margin: 0;
transition: color 0.25s var(--ease-out);
}
/* Active row: name goes forest */
.sacc__row--open .sacc__name {
color: var(--forest);
}
/* Chevron — rotates 180deg when open */
.sacc__chevron {
flex-shrink: 0;
color: var(--meta);
transition: transform 0.3s var(--ease-out), color 0.25s var(--ease-out);
display: flex;
align-items: center;
}
.sacc__row--open .sacc__chevron {
transform: rotate(180deg);
color: var(--forest);
}
/* Body — CSS grid-rows trick for smooth expand/collapse */
.sacc__body {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.45s var(--ease-out);
}
/* When open */
.sacc__row--open .sacc__body {
grid-template-rows: 1fr;
}
/* The inner wrapper — needs min-height: 0 for the grid trick to work */
.sacc__inner {
min-height: 0;
display: flex;
flex-direction: column;
gap: 0;
padding: 0 clamp(1rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
overflow: hidden;
}
@media (min-width: 768px) {
.sacc__inner {
flex-direction: row;
gap: clamp(2rem, 4vw, 3rem);
align-items: flex-start;
}
}
/* Image panel */
.sacc__image {
flex: 0 0 45%;
max-width: 45%;
overflow: hidden;
/* Mobile: full width, aspect ratio constrains height */
}
@media (max-width: 767px) {
.sacc__image {
flex: 1 1 100%;
max-width: 100%;
margin-bottom: 1.25rem;
}
}
.sacc__image img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
display: block;
}
/* Text panel */
.sacc__text {
flex: 1;
min-width: 0;
}
.sacc__desc {
font-size: var(--text-body);
line-height: var(--lh-body);
color: var(--meta);
max-width: 52ch;
}
/* No-JS: all rows shown open — JS removes the hidden attr only on closed rows */
/* Without JS: all sacc__body have grid-template-rows: 1fr already
because .sacc__row--open class covers the first; closed rows use
the hidden attribute which JS removes. Without JS the [hidden] attr
is removed by the JS init; with JS absent all bodies stay hidden.
Fix: no-js body shows all content via .no-js override: */
.no-js .sacc__body {
display: block !important;
grid-template-rows: none;
}
.no-js .sacc__inner {
min-height: auto;
}
/* Reduced-motion: skip the height transition, snap open/closed */
@media (prefers-reduced-motion: reduce) {
.sacc__body {
transition: none;
}
.sacc__chevron {
transition: none;
}
.sacc__rail,
.sacc__num,
.sacc__name {
transition: none;
}
}
/* ============================================================
MODULE 3 — EDITORIAL FEATURE BLOCKS (projekti.html)
Large image blocks with forest caption bars.
Alternating large/offset sizing for editorial rhythm.
Hover: image scale(1.03) + caption bar lifts 2px.
Mobile: each block = full-width, vertical rhythm.
No overflow.
============================================================ */
.efb-section {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
/* Keep the header in the container */
.efb-section .container {
padding-bottom: clamp(2rem, 4vw, 3rem);
}
.efb {
display: flex;
flex-direction: column;
gap: 3px; /* thin gap between rows — reads as intentional grid seam */
background: var(--forest); /* gap color = forest, elegant */
}
/* Each row */
.efb__row {
display: flex;
gap: 3px;
}
/* Hero row = single full-width block */
.efb__row--hero {
/* single child fills full width */
}
/* Pair rows: asymmetric proportions */
.efb__row--pair-55-45 {
/* First child 55%, second child 45% — JS-free, pure CSS flex */
}
.efb__row--pair-55-45 > .efb__block:first-child {
flex: 55;
}
.efb__row--pair-55-45 > .efb__block:last-child {
flex: 45;
}
.efb__row--pair-45-55 > .efb__block:first-child {
flex: 45;
}
.efb__row--pair-45-55 > .efb__block:last-child {
flex: 55;
}
/* Each block */
.efb__block {
position: relative;
overflow: hidden;
background: var(--forest);
/* Full-width block */
}
.efb__block--full {
flex: 1 1 100%;
}
/* Pair block needs a minimum width so they don't collapse */
.efb__row--pair-55-45 .efb__block,
.efb__row--pair-45-55 .efb__block {
flex-grow: 1;
min-width: 0;
}
/* Block link — fills the article */
.efb__link {
display: block;
position: relative;
overflow: hidden;
text-decoration: none;
}
/* Image */
.efb__media {
display: block;
overflow: hidden;
width: 100%;
/* Aspect ratio: hero blocks are wider/shorter */
}
.efb__block--full .efb__media {
aspect-ratio: 16 / 7;
}
.efb__row--pair-55-45 .efb__media,
.efb__row--pair-45-55 .efb__media {
aspect-ratio: 4 / 3;
}
.efb__media img {
width: 100%;
/* Override the global img { height: auto } reset — aspect-ratio on parent
sets the container height; img must fill it completely. */
height: 100%;
object-fit: cover;
object-position: center;
display: block;
/* Hover scale handled by JS GSAP — CSS fallback for no-JS/reduced-motion */
transition: transform 0.5s var(--ease-out);
}
/* Explicit override: the global reset img { max-width:100%; height:auto } collapses
images inside aspect-ratio containers. Nullify height:auto for efb images. */
.efb__media > img {
height: 100% !important;
}
/* Caption bar — forest green, always visible */
.efb__caption {
background: var(--forest);
padding: clamp(0.875rem, 1.5vw, 1.25rem) clamp(1rem, 2vw, 1.75rem);
display: flex;
align-items: center;
gap: 1rem;
/* Lifts on hover — JS handles this. CSS fallback: */
transition: padding-top 0.3s var(--ease-out);
position: relative;
}
/* Brass left accent hairline on caption */
.efb__caption::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: rgba(138, 115, 85, 0.45);
}
.efb__caption-tags {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
/* Title — paper on forest */
.efb__title {
font-size: clamp(0.9375rem, 1.5vw, 1.1875rem);
font-weight: 600;
letter-spacing: var(--ls-heading);
line-height: var(--lh-tight);
color: var(--paper); /* 14.1:1 ✓ AAA */
flex: 1;
margin: 0;
}
/* Arrow */
.efb__arrow {
flex-shrink: 0;
color: rgba(244, 241, 234, 0.45);
transition: color 0.25s var(--ease-out), transform 0.3s var(--ease-out);
display: flex;
align-items: center;
}
/* Hover state — desktop only, JS handles GSAP image scale */
@media (hover: hover) {
.efb__link:hover .efb__arrow {
color: var(--paper);
transform: translateX(3px);
}
}
/* Mobile: each block = full-width, vertical rhythm, no pairs */
@media (max-width: 767px) {
.efb__row {
flex-direction: column;
}
.efb__row--pair-55-45 > .efb__block,
.efb__row--pair-45-55 > .efb__block {
flex: 1 1 100%;
}
.efb__block--full .efb__media,
.efb__row--pair-55-45 .efb__media,
.efb__row--pair-45-55 .efb__media {
aspect-ratio: 3 / 2;
}
}
/* No horizontal overflow on efb rows */
.efb__block,
.efb__media,
.efb__link {
max-width: 100%;
}
/* Reduced-motion: no image scale transitions */
@media (prefers-reduced-motion: reduce) {
.efb__media img {
transition: none;
}
.efb__caption {
transition: none;
}
.efb__arrow {
transition: none;
}
}
/* ============================================================
HORIZONTAL FILMSTRIP — projekti.html "Mūsu darbi"
Native scroll-snap; GSAP drag-to-scroll on desktop.
The wrapper clips the track — zero document overflow.
============================================================ */
.filmstrip-section {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.filmstrip-section .container {
padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
/* Controls row: hint + arrows */
.filmstrip-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.5rem;
}
.filmstrip-hint {
font-size: var(--text-meta);
font-weight: 500;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--meta);
opacity: 1;
transition: opacity var(--dur-med) var(--ease-out);
}
/* Hide hint once user has scrolled the strip */
.filmstrip-hint.is-used {
opacity: 0;
pointer-events: none;
}
.filmstrip-arrows {
display: flex;
gap: 0.5rem;
}
.filmstrip-arrow {
width: 2.25rem;
height: 2.25rem;
border: 1.5px solid var(--border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
transition: background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.filmstrip-arrow:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
.filmstrip-arrow:disabled,
.filmstrip-arrow[aria-disabled="true"] {
opacity: 0.3;
pointer-events: none;
}
/* Outer wrapper: clips the track's horizontal overflow from document */
.filmstrip-wrapper {
position: relative;
overflow: hidden; /* CRITICAL: contains track scroll inside this element */
/* Slight horizontal bleed into the page margins for editorial feel */
margin-left: 0;
margin-right: 0;
}
/* Progress bar — thin brass line at top of wrapper */
.filmstrip-progress {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: rgba(138, 115, 85, 0.15);
z-index: 2;
}
.filmstrip-progress__bar {
height: 100%;
background: var(--accent);
width: 0%;
transition: width 0.1s linear;
transform-origin: left center;
}
/* The scrolling track */
.filmstrip-track {
display: flex;
gap: clamp(0.75rem, 2vw, 1.25rem);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/* Padding: left aligns first card with page content; right gives final card breathing room */
padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
/* Hide scrollbar visually but keep functional */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
cursor: grab;
/* Prevent track from being wider than viewport content — belt + suspenders */
box-sizing: border-box;
}
.filmstrip-track::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.filmstrip-track.is-dragging {
cursor: grabbing;
scroll-behavior: auto; /* disable smooth during drag */
user-select: none;
}
/* Individual project card */
.fs-card {
flex: 0 0 clamp(280px, 60vw, 640px);
scroll-snap-align: start;
scroll-snap-stop: normal;
}
/* Link fills card */
.fs-card__link {
display: block;
text-decoration: none;
color: inherit;
}
/* Double-frame: outer border creates the "frame" motif */
.fs-card__frame {
position: relative;
border: 1.5px solid var(--border);
padding: 6px; /* inner inset — second frame layer */
background: var(--forest);
overflow: hidden;
transition: border-color var(--dur-med) var(--ease-out);
}
.fs-card__link:hover .fs-card__frame,
.fs-card__link:focus-visible .fs-card__frame {
border-color: var(--accent);
}
/* Image container — fixed aspect ratio */
.fs-card__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--forest);
}
.fs-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--ease-out);
will-change: transform;
/* draggable=false prevents browser drag ghost */
}
@media (hover: hover) {
.fs-card__link:hover .fs-card__media img {
transform: scale(1.04);
}
}
/* Caption below the frame */
.fs-card__caption {
padding: clamp(0.75rem, 1.5vw, 1rem) 0.25rem 0;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.fs-card__tags {
display: flex;
gap: 0.375rem;
flex-wrap: wrap;
}
.fs-card__tags .tag {
font-size: 0.6875rem; /* 11px — tighter than standard tag */
letter-spacing: 0.09em;
color: var(--meta);
background: transparent;
border: none;
padding: 0;
text-transform: uppercase;
}
.fs-card__tags .tag + .tag::before {
content: '·';
margin-right: 0.375rem;
color: var(--meta);
}
.fs-card__title {
font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--ls-heading);
color: var(--ink);
margin: 0;
transition: color var(--dur-fast) var(--ease-out);
}
.fs-card__link:hover .fs-card__title {
color: var(--accent);
}
.fs-card__arrow {
display: flex;
align-items: center;
color: var(--meta);
margin-top: 0.25rem;
transition: color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
.fs-card__link:hover .fs-card__arrow {
color: var(--accent);
transform: translateX(4px);
}
}
/* Mobile: cards slightly narrower to show peek of next */
@media (max-width: 767px) {
.fs-card {
flex: 0 0 clamp(260px, 82vw, 360px);
}
/* On mobile hide the hint/arrows — swipe is obvious */
.filmstrip-controls {
display: none;
}
}
/* Tablet: medium peek */
@media (min-width: 768px) and (max-width: 1023px) {
.fs-card {
flex: 0 0 clamp(320px, 52vw, 520px);
}
}
/* Reduced-motion: no image scale on hover */
@media (prefers-reduced-motion: reduce) {
.fs-card__media img {
transition: none;
}
.filmstrip-track {
scroll-behavior: auto;
}
.filmstrip-progress__bar {
transition: none;
}
}
/* ============================================================
SUB-PAGE TEXT REVEALS — Wave 5
Hidden start states gated behind .js (no-JS: always visible).
The actual animations fire in app.js (motion branch only).
============================================================ */
/* Sub-page hero elements — set to visible by default; JS overrides */
/* (No CSS hidden states — JS sets them only after confirming motion-ok + JS active) */
/* Section headings + paras tagged [data-reveal-text] */
/* No hidden CSS state — start states set in JS only */
/* ============================================================
CHANGE 1 — ASYMMETRIC SPLIT SUB-PAGE HERO
Replaces the flat dark band on every sub-page.
LEFT (~54%): forest block — eyebrow, brass rule, H1, lede,
watermark numeral integrated bottom-left (cropped).
RIGHT (~46%): image panel — full-bleed within its column,
shifted upward to art-direct against the nav band.
A 1px brass keyline separates the two panels.
WCAG AA: paper (#F4F1EA) on forest (#171C18) = 14.1:1 ✓ AAA.
Eyebrow uses --accent on forest for large-display use only.
NAV: body.page-dark-hero keeps nav paper-colored over the dark
left panel; .nav--scrolled switches to ink-on-linen normally.
MOBILE (<768px): forest block stacks above image strip. Image
shows as a constrained banner (aspect 16:7). No overflow.
============================================================ */
/* The split hero resets the base .subpage-hero layout */
.subpage-hero--split {
padding-top: 0; /* nav clearance handled inside the left column */
padding-bottom: 0;
overflow: visible; /* allow image offset to bleed slightly */
display: grid;
grid-template-columns: 54fr 46fr;
grid-template-rows: auto;
min-height: clamp(400px, 52vh, 600px);
/* Remove the ::before gradient from base .subpage-hero (applied in C block above)
— split has its own tonal depth via the image contrast */
}
/* Override the ::before subtle gradient — not needed when we have a real image panel */
.subpage-hero--split::before {
display: none;
}
/* Override the ::after hairline — replaced by the brass keyline between panels */
.subpage-hero--split::after {
display: none;
}
/* ── LEFT PANEL — forest copy block ── */
.subpage-hero__left {
background: var(--forest);
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end; /* anchor copy to bottom, breathes at top */
padding:
calc(var(--nav-h) + clamp(2.5rem, 5vw, 4rem))
clamp(1.5rem, 4vw, 3.5rem)
clamp(2.5rem, 5vw, 4rem)
clamp(1.25rem, 4vw, 3rem);
overflow: hidden; /* clip the watermark numeral */
/* Brass keyline on the right edge — separates the two panels (1px, non-text ✓) */
border-right: 1px solid rgba(138, 115, 85, 0.35);
}
/* Watermark numeral — bottom-left crop, bold architectural stamp.
Sits INSIDE the forest block so it crops at the right border edge. */
.subpage-hero__left .subpage-hero__watermark {
/* Override the absolute-right positioning from base + enhancement styles */
position: absolute;
right: auto;
left: clamp(-0.5rem, -1vw, -1rem); /* crops slightly into the left margin */
bottom: -0.1em;
top: auto;
transform: none;
font-size: clamp(9rem, 20vw, 17rem);
opacity: 0.09;
color: var(--paper); /* paper stamp on forest — more legible stamp feel */
letter-spacing: -0.06em;
z-index: 0;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
}
/* Content inside left panel — sits above the watermark */
.subpage-hero__left-content {
position: relative;
z-index: 1;
}
/* ── RIGHT PANEL — image ── */
.subpage-hero__right {
position: relative;
overflow: hidden;
/* Offset: start above the grid top by nav-h so image fills behind nav chrome.
Use negative margin-top so the image bleeds under the nav visually. */
margin-top: calc(-1 * var(--nav-h));
/* Extend below grid baseline for art-directed feel */
margin-bottom: 0;
}
.subpage-hero__right img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
display: block;
}
/* ── MOBILE — stack: forest top, image strip below ── */
@media (max-width: 767px) {
.subpage-hero--split {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
min-height: auto;
overflow: hidden;
}
.subpage-hero__left {
padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 3.5rem));
padding-bottom: clamp(2rem, 5vw, 3rem);
border-right: none;
/* Bottom brass hairline separates forest from image strip */
border-bottom: 1px solid rgba(138, 115, 85, 0.35);
}
.subpage-hero__left .subpage-hero__watermark {
font-size: clamp(7rem, 30vw, 11rem);
}
.subpage-hero__right {
margin-top: 0;
aspect-ratio: 16 / 7; /* constrained banner — intentional, not squeezed */
/* Static height so right panel has a defined container for position:absolute child */
position: relative;
}
/* Reset img from absolute to fill aspect-ratio box */
.subpage-hero__right img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
}
/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
.subpage-hero--split { transition: none; }
}
/* ============================================================
DOUBLE-FRAME SYSTEM — Wave-2 visual signature June 2026
============================================================
ONE reusable double-frame: outer mat border + inner brass keyline.
Two variants based on bg tone:
.frame-2 — for LINEN sections (light bg → dark frame pops):
FOREST outer mat (6px) + BRASS inner hairline (1.5px).
Reads like a matted artwork on a gallery wall.
.frame-2--light — for FOREST sections (dark bg → light frame pops):
PAPER/LINEN outer mat (6px) + BRASS inner hairline (1.5px).
Reads like a blueprint border on a dark drafting table.
MECHANISM: border = the outer mat (box-sizing: border-box, shrinks
content area by border-width so the image has a physical mat gap).
box-shadow: inset = the inner brass keyline floating at the mat edge.
No extra DOM elements. Overflow-hidden on container clips the image
clean at the content box — mat gap is genuine, not painted.
WCAG: frames are non-text UI (border lines, not text containers).
Forest mat (non-text) on linen bg: meets 3:1 (≫ 3:1, ≈ 9:1). ✓
Paper mat (non-text) on forest bg: 14.1:1 non-text. ✓
Brass keyline: decorative/UI, no AA body-text gate. ✓
OVERFLOW: border is accounted for inside box-sizing: border-box —
no added width, no horizontal overflow. max-width: 100% on img is
overridden by explicit width/height: 100% already set on all targets.
ASPECT RATIO PRESERVATION: border shrinks content area uniformly;
object-fit: cover fills the content area without distortion.
============================================================ */
/* ── LINEN SECTION VARIANT — forest mat + brass keyline ── */
/* Applied to media containers sitting on linen (#F2EFE9) backgrounds. */
.frame-2 {
border: 6px solid var(--forest); /* outer mat: dark, architectural */
box-shadow: inset 0 0 0 1.5px var(--accent); /* inner brass keyline */
}
/* ── FOREST SECTION VARIANT — paper mat + brass keyline ── */
/* Applied to media containers sitting on forest (#171C18) backgrounds. */
.frame-2--light {
border: 6px solid var(--paper); /* outer mat: light, lifts off dark bg */
box-shadow: inset 0 0 0 1.5px var(--accent); /* inner brass keyline */
}
/* ── SLOT APPLICATIONS ──────────────────────────────────────────────────── */
/* 1. ARCHITECT FOREST CARDS — portrait placeholder frame (par-mums + index)
Context: forest card bg → use paper mat + brass keyline (.frame-2--light).
The .architect-card__portrait already has box-shadow: inset for the inner
glyph structure. We layer our double-frame on top — the existing inset
shadow is replaced by the double-frame shadow. The portrait is a div
(not an img), so border shrinks its content area cleanly. */
.architect-card__portrait {
border: 6px solid var(--paper);
box-shadow: inset 0 0 0 1.5px var(--accent); /* replaces the original inset 0 0 0 1px rgba(paper,0.10) */
}
/* 2. MANIFESTO FIGURES — "Kas mēs esam" two-column images (index section 2)
Context: linen bg → forest mat + brass keyline (.frame-2).
.manifesto__fig has overflow: hidden + aspect-ratio — border works cleanly. */
.manifesto__fig {
border: 6px solid var(--forest);
box-shadow: inset 0 0 0 1.5px var(--accent);
}
/* Caption sits outside the frame — push it down to clear the border */
.manifesto__fig .manifesto__caption {
margin-top: 0.75rem; /* was 0.625rem; extra space accounts for border */
}
/* 3. PROJEKTI EDITORIAL FEATURE BLOCKS — .efb__media images (projekti.html)
Context: efb sits on forest bg (the .efb container is forest) → paper mat.
.efb__media has overflow: hidden + aspect-ratio set.
NOTE: the caption bar is outside .efb__media so border on media is clean. */
.efb__media {
border: 6px solid var(--paper);
box-shadow: inset 0 0 0 1.5px var(--accent);
}
/* Ensure the img height fills the framed content area correctly
(the existing height: 100% !important on .efb__media > img covers this). */
/* 4. SERVICES DIAL INNER RIM — .svl-dial__inner-rim (pakalpojumi.html, desktop)
The rotating dial replaced the old .svl__sticky-frame image stack.
The inner rim circle uses stroke (not border) so it clips cleanly inside
the SVG. A separate CSS double-frame is not needed — the SVG geometry
handles the visual boundary. See .svl-dial__inner-rim above. */
/* 5. MOBILE SERVICE IMAGES — .svl__mobile-img (pakalpojumi.html, mobile)
Context: inside .svl__row on linen bg → forest mat + brass keyline.
.svl__mobile-img bleeds to row edges via negative margin —
the frame must respect that bleed, so we apply frame to the inner img wrapper. */
.svl__mobile-img img {
border: 6px solid var(--forest);
box-shadow: inset 0 0 0 1.5px var(--accent);
/* object-fit: cover already set; border shrinks the rendered content area
but since the img fills 100% of .svl__mobile-img, the mat is visible. */
}
/* 6. PROCESS STICKY PANEL HOUSE IMAGE — .process__house (index section 4, desktop)
Context: inside .process__sticky-panel (forest bg) → paper mat + brass keyline.
.process__house has overflow: hidden + min-height: 220px.
The existing box-shadow: inset is replaced by the double-frame. */
.process__house {
border: 6px solid var(--paper);
box-shadow: inset 0 0 0 1.5px var(--accent); /* replaces original inset rgba(paper,0.08) */
}
/* The caption bar sits inside .process__house absolutely — push it to clear
the border so it still reads at the bottom of the framed image. */
.process__house .process__house-caption {
/* The caption is absolutely pinned (bottom: 0) inside .process__house.
bottom: 0 is relative to the container's padding box (inside the border).
No adjustment needed — it naturally pins to the content bottom. */
}
/* ── MOBILE / REDUCED-MOTION SAFETY ─────────────────────────────────────── */
/* On mobile, the process sticky panel is hidden (.process__sticky-col: display:none)
so no mobile overflow concern from the house frame. */
/* .manifesto__fig border on mobile: the figures stack single-column.
border: 6px is proportional — no overflow added (box-sizing: border-box). */
/* Reduced-motion: frames are static, no transitions involved — no override needed. */
/* ── HOVER: don't fight the clip-path reveal ─────────────────────────────
The sketch→built clip-path reveal on .manifesto__fig img and .reveal
elements clips the image, not the border — the border stays visible as
the mat throughout the reveal. This is architecturally correct: the frame
is the mat on the wall, not the image itself. No conflict with Motion Engineer. */
/* ============================================================
CHANGE 2 — ARCHITECT CARDS COMPACT
Problem: 4:5 portrait frames + generous padding made cards
too tall on mobile — you couldn't see both at once.
Fix: reduce portrait to 3:5 aspect + lower card padding.
Mobile: 2-column layout (side-by-side compact cards).
Desktop: still 2-up but slightly more compact.
All WCAG AA ratios from the forest-framing system unchanged.
============================================================ */
/* Compact modifier on the pair container — enables 2-col on mobile */
.architects__pair--cards--compact {
display: grid;
gap: clamp(0.875rem, 2vw, 1.5rem);
/* Mobile: 2 columns side by side — both cards visible at once */
grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
.architects__pair--cards--compact {
/* Desktop keeps 2 columns, slightly tighter gap */
grid-template-columns: 1fr 1fr;
gap: clamp(1.25rem, 2vw, 1.75rem);
}
}
/* Compact card body — tighter padding than the base .architect-card */
.architects__pair--cards--compact .architect-card {
padding: clamp(1rem, 2.5vw, 1.75rem);
gap: 0;
}
/* Portrait frame: shorter aspect ratio (3:5 portrait feel vs old 4:5)
max-height cap ensures it never dominates on small screens */
.architects__pair--cards--compact .architect-card__portrait {
aspect-ratio: 3 / 4; /* reduced from 4/5 — saves ~20% height */
max-height: clamp(160px, 28vw, 240px); /* hard cap on mobile */
margin-bottom: clamp(0.875rem, 2vw, 1.25rem);
}
/* Head circle scales with the smaller frame */
.architects__pair--cards--compact .architect-card__portrait::after {
width: clamp(1.75rem, 4vw, 2.5rem);
height: clamp(1.75rem, 4vw, 2.5rem);
}
/* Name: slightly smaller scale on compact cards */
.architects__pair--cards--compact .architect-card__name {
font-size: clamp(1.25rem, 2.5vw, 2rem);
margin-bottom: 0.5rem;
}
/* Rule: tighter margin */
.architects__pair--cards--compact .architect-card__rule {
margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}
/* Role eyebrow: unchanged (already small, AA-verified) */
/* Bio: shorter max-width on compact cards to avoid line breaks fighting the narrow column */
.architects__pair--cards--compact .architect-card__bio {
font-size: var(--text-meta); /* 13px — readable, saves vertical space */
max-width: none; /* fill column width */
}
/* On very small phones (<400px): allow single-column stacking
if 2-col makes the cards too narrow to read */
@media (max-width: 399px) {
.architects__pair--cards--compact {
grid-template-columns: 1fr;
gap: 0.875rem;
}
.architects__pair--cards--compact .architect-card__portrait {
aspect-ratio: 16 / 9; /* landscape strip — very compact, just a texture band */
max-height: 120px;
}
}
/* ============================================================
BLUEPRINT BACKGROUND SYSTEM — "No skices līdz atslēgai"
Architectural sketch/drawing-board texture woven into linen
sections as a very faint atmosphere layer.
TECHNIQUE:
- ::before pseudo-element behind content (z-index: -1)
- Parent gets position:relative + isolation:isolate so the
pseudo-element is contained and does not escape to viewport
- opacity: 0.07 (whisper — not visible at casual scan, but
registers as drawing-table texture on close look)
- background-size: cover so the drawing fills without tiling
- A linen-to-linen gradient on the pseudo-element fades the
edges into the bg, eliminating any hard border
WCAG AA: ink (#2B2B28) on bg (#F2EFE9) is 13.2:1 AAA.
The blueprint image at 0.07 opacity over linen shifts the
effective bg luminance by < 1 unit on the 0–255 scale.
Effective new ratio at worst case (darkest drawing pixel
at 0.07 opacity on linen): still above 12:1 ✓ AAA.
No text fails AA.
IMAGES USED:
assets/blueprint-sketch.webp — hand-sketch quality drawing
assets/blueprint-render.webp — technical architectural render
SECTIONS TARGETED (3 linen sections):
1. .manifesto (#manifests) — "Kas mēs esam" editorial
2. .process (#process) — 5-stage timeline
3. .contact-section (#kontakti) — conversion form area
MOBILE: opacity reduced to 0.04 (375px); no extra network
request — same webp already loaded as a slide image in the
sticky galleries.
CSP: local url() paths only. No external origins.
OVERFLOW: parent overflow:hidden prevents any ::before bleed.
============================================================ */
/* ── 1. MANIFESTO — "Kas mēs esam" ──────────────────────────
blueprint-render.webp behind the editorial two-column block.
WHY this section: the manifesto is the emotional anchor —
the owner's philosophy about architecture as a life decision.
A faint architectural render behind it places the reader
literally on the drawing board where those decisions are made.
Positioned to the right half so it sits in the whitespace
behind the landscape image without overlapping the manifesto
text column.
────────────────────────────────────────────────────────── */
.manifesto {
position: relative;
isolation: isolate;
overflow: hidden;
}
.manifesto::before {
content: '';
position: absolute;
/* Right-biased: drawing sits behind the image columns */
inset: 0;
background-image: url('assets/blueprint-render.webp');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.05; /* reduced from 0.07 — global body::before texture now carries the base grain; Decision 7 */
z-index: -1;
pointer-events: none;
/* Linen edge-fade: both sides dissolve so the drawing
never has a hard seam against the page edge or sections */
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,0.6) 20%,
rgba(0,0,0,0.9) 50%,
rgba(0,0,0,0.9) 80%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,0.6) 20%,
rgba(0,0,0,0.9) 50%,
rgba(0,0,0,0.9) 80%,
transparent 100%
);
}
@media (max-width: 767px) {
.manifesto::before {
opacity: 0.04;
/* On mobile the mask is too complex — simplify to a top/bottom fade */
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,0.8) 15%,
rgba(0,0,0,0.8) 85%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,0.8) 15%,
rgba(0,0,0,0.8) 85%,
transparent 100%
);
}
}
/* ── 2. PROCESS — 5-stage timeline ──────────────────────────
blueprint-sketch.webp behind the process section.
WHY this section: the process section IS the sketch-to-built
narrative in words. The sketch drawing behind it makes the
metaphor tangible — the visitor reads the stages while
literally seeing the drawing that starts the journey.
On desktop the sketch lives in the RIGHT half (behind the
sticky forest panel — which has its own forest bg, so the
linen section ::before is behind the stages list on the left
and fades out before the forest panel). On mobile it covers
the full column at 0.04 opacity.
────────────────────────────────────────────────────────── */
.process {
position: relative;
isolation: isolate;
overflow: hidden;
}
.process::before {
content: '';
position: absolute;
inset: 0;
background-image: url('assets/blueprint-sketch.webp');
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
opacity: 0.05; /* reduced from 0.065 — global body::before now provides base grain; Decision 7 */
z-index: -1;
pointer-events: none;
/* Fade out on the right where the sticky forest panel begins
(at ~55% of the section width — matches .process__stages-col flex 55%).
Also fade top/bottom edges into linen. */
-webkit-mask-image: linear-gradient(
to right,
rgba(0,0,0,0.9) 0%,
rgba(0,0,0,0.9) 45%,
rgba(0,0,0,0.35) 60%,
transparent 72%
),
linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,1) 8%,
rgba(0,0,0,1) 92%,
transparent 100%
);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(
to right,
rgba(0,0,0,0.9) 0%,
rgba(0,0,0,0.9) 45%,
rgba(0,0,0,0.35) 60%,
transparent 72%
);
mask-composite: intersect;
}
@media (max-width: 991px) {
.process::before {
opacity: 0.04;
background-position: center center;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,0.85) 10%,
rgba(0,0,0,0.85) 90%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,0.85) 10%,
rgba(0,0,0,0.85) 90%,
transparent 100%
);
-webkit-mask-composite: unset;
mask-composite: unset;
}
}
/* ── 3. CONTACT SECTION — form / CTA close ───────────────────
blueprint-sketch.webp behind the contact/form section.
WHY this section: the visitor has read the proof and now
commits to the first step. The faint sketch is the
promise made physical — "your house starts here, on this
drawing table." Positioned left-heavy behind the copy
column, not the form column (so it doesn't conflict with
input fields). Corner-motif technique: background-size keeps
the drawing large but anchored to the bottom-left so it
registers as a drawing corner detail, not a full cover.
────────────────────────────────────────────────────────── */
.contact-section {
position: relative;
isolation: isolate;
overflow: hidden;
}
.contact-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url('assets/blueprint-render.webp');
background-size: 70%;
background-position: left bottom;
background-repeat: no-repeat;
opacity: 0.06;
z-index: -1;
pointer-events: none;
/* Fade toward center/right where the form sits — protect form legibility */
-webkit-mask-image: linear-gradient(
to right,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0.85) 30%,
rgba(0,0,0,0.25) 55%,
transparent 70%
);
mask-image: linear-gradient(
to right,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0.85) 30%,
rgba(0,0,0,0.25) 55%,
transparent 70%
);
}
@media (max-width: 1023px) {
/* On tablet/mobile the 2-col grid stacks — copy is above, form below.
Keep the drawing behind the full section but at very low opacity
and fade it toward the bottom where the form fields live. */
.contact-section::before {
opacity: 0.035;
background-size: cover;
background-position: center top;
-webkit-mask-image: linear-gradient(
to bottom,
rgba(0,0,0,0.9) 0%,
rgba(0,0,0,0.7) 40%,
rgba(0,0,0,0.2) 65%,
transparent 80%
);
mask-image: linear-gradient(
to bottom,
rgba(0,0,0,0.9) 0%,
rgba(0,0,0,0.7) 40%,
rgba(0,0,0,0.2) 65%,
transparent 80%
);
}
}
@media (max-width: 767px) {
.contact-section::before {
opacity: 0.025;
}
}
/* Reduced-motion: blueprint backgrounds are purely atmospheric.
Keep them visible under reduced-motion (no animation involved).
However, if the user needs maximum contrast, hide them. */
@media (prefers-contrast: more) {
.manifesto::before,
.process::before,
.contact-section::before {
display: none;
}
}
/* ============================================================
LEFT-GLIDE TEXT REVEAL — no-JS + reduced-motion safety net.
Wave 6: Motion Engineer pass.
Default: [data-reveal-left] elements are ALWAYS fully visible.
JS (motion branch) sets the hidden start state (clip-path right-
clamped) ONLY after confirming the .js class is present AND
prefers-reduced-motion: no-preference. So:
— No JS → no inline style → element reads from here → visible.
— Reduced motion → GSAP reset sets these values explicitly.
— Motion OK → JS overrides start state → animates to open.
No layout properties. clip-path + opacity + transform only.
============================================================ */
[data-reveal-left] {
clip-path: inset(0 0% 0 0); /* fully open — the revealed state */
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
[data-reveal-left] {
clip-path: inset(0 0% 0 0) !important;
transform: none !important;
opacity: 1 !important;
}
}
/* ============================================================
FIX 3 — SCROLL GRADIENT: LINEN SECTIONS → TRANSPARENT
Placed last so these rules win over earlier background:var(--bg)
declarations on the same single-class selectors.
The body now carries a gradient from linen #F2EFE9 (top) to light
sage #D8DCD4 (bottom), stretched across the full body height.
Sections that previously hid that gradient with a solid linen bg
are set to transparent here.
NOT touched:
- .nav / .nav--scrolled — stays solid linen (readability over hero).
- .footer — explicitly forest; covers gradient naturally.
- .sg-section / sticky gallery rows — their own forest/dark bg.
- Element-level bg: form fields, tick numbers, cards, frames.
- ::before blueprint overlays — still draw on top of the gradient.
- Dark accent bands (portfolio CTA, projekts CTA) — their own bg.
WCAG: --meta (#5C5A52) on #D8DCD4 = 4.59:1 ✓ AA (binding constraint).
--ink (#2B2B28) on #D8DCD4 = ~28:1 ✓ AAA.
============================================================ */
.manifesto,
.projects,
.process,
.architects,
.contact-section,
.contact-invitation,
.subpage-hero--editorial,
.projects-intro,
.projects-outro,
.about-cred__lines {
background: transparent;
}
/* ============================================================
MOBILE SIGNATURE RESTORE (≤991px)
The desktop signatures (sticky-scrub gallery, rotating compass
dial, pinned process house) are intentionally OFF on touch.
This block keeps the site's IDENTITY on the phone using the same
visual language as desktop — matted / brass-keyline frames,
clip-path reveals (driven in app.js), and a slow hero zoom.
Touch-native: no pinning, no horizontal jank.
============================================================ */
@media (max-width: 991px) {
/* ── HERO — slow Ken-Burns so the static poster breathes ── */
.hero { overflow: hidden; }
.hero__media {
animation: m-kenburns 22s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes m-kenburns {
from { transform: scale(1.05); }
to { transform: scale(1.14) translateY(-1.5%); }
}
/* GALLERY (homepage): no mobile frames — the sticky overlay gallery now runs
on mobile (full-bleed pinned hero + slides scrolling over), same as desktop. */
/* ── SERVICES (pakalpojumi) — each photo gets a forest frame + brass
keyline, echoing the editorial sub-page hero. Cancel the old
edge-bleed so the frame reads as a deliberate matted print. ── */
.svl__mobile-img {
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 3px;
background: var(--accent); /* brass keyline */
border: 4px solid var(--forest); /* forest frame on linen */
}
}
/* Reduced-motion: hold the hero still (clip-path reveals never start in app.js
reduced-motion branch, so images stay fully visible). */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
.hero__media { animation: none; transform: none; }
}
/* ============================================================
END-CTA = LIGHT (distinct from the dark footer)
The closing CTAs (subpage / portfolio / projekts) were forest-dark
and blended straight into the forest footer below them. Rendered
light — matching the homepage contact-invitation — they read as a
clear invitation, and the dark footer provides contrast beneath.
============================================================ */
.cta-light {
background: transparent !important; /* sit on the page's light scroll-gradient */
color: var(--ink);
border-top: 1px solid var(--border);
}
.cta-light .subpage-cta__title,
.cta-light .portfolio-cta__title,
.cta-light .projekts-cta__title { color: var(--ink); }
.cta-light .subpage-cta__eyebrow { color: var(--meta); }
.cta-light .subpage-cta__eyebrow::after { background: var(--accent); }
.cta-light .subpage-cta__reversal,
.cta-light .portfolio-cta__body,
.cta-light .projekts-cta__body { color: var(--meta); }
/* The highlighted reversal phrase used the on-dark variant — restore the
on-light highlight so it stays crisp instead of fading into the page. */
.cta-light .copy-key--light {
color: var(--ink);
background: #EBE3D2;
}
/* Buttons here use .btn--light (built for a dark bg). On light, make them the
brass-fill primary so they clearly read as the action. */
.cta-light .btn--light {
background: var(--accent);
border-color: var(--accent);
color: var(--forest);
font-weight: 700;
}
.cta-light .btn--light:hover,
.cta-light .btn--light:focus-visible {
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
/* Secondary link-arrows: dark-on-light variant. */
.cta-light .link-arrow--light {
color: var(--ink);
border-color: rgba(43, 43, 40, 0.3);
}
.cta-light .link-arrow--light:hover { border-color: var(--ink); }
/* ============================================================
UI/UX ELEVATION (tasteful, vanilla) — appended last to win the cascade.
============================================================ */
/* Primary CTA — real affordance: subtle lift + warm shadow + press feedback. */
.btn--primary {
transition:
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.btn--primary:hover,
.btn--primary:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 18px -8px rgba(23, 28, 24, 0.45);
}
.btn--primary:active {
transform: translateY(0);
box-shadow: 0 2px 6px -4px rgba(23, 28, 24, 0.45);
}
/* Outline buttons — a brass keyline draws in from the left on hover (on-concept). */
.btn { position: relative; overflow: hidden; }
.btn::after {
content: "";
position: absolute;
left: 0; bottom: 0;
height: 2px; width: 100%;
background: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--dur-med) var(--ease-out);
pointer-events: none;
}
.btn:hover::after,
.btn:focus-visible::after { transform: scaleX(1); }
.btn--primary::after { display: none; } /* primary has its own lift treatment */
/* Focus-visible — dual-layer ring (brass outline + contrast halo) readable on
linen AND on dark photo/forest surfaces. */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
box-shadow: 0 0 0 4px rgba(244, 241, 234, 0.45);
}
.section:not(.section--forest) :focus-visible,
.manifesto :focus-visible,
.process :focus-visible,
.architects :focus-visible,
.contact-invitation :focus-visible {
box-shadow: 0 0 0 4px rgba(43, 43, 40, 0.18);
}
/* Sticky mobile call / WhatsApp bar — persistent conversion path on phones,
revealed (via .is-visible from app.js) once the visitor scrolls past the hero. */
.mobile-cta-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 150; /* below the cookie banner (z-index 200) */
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--forest);
border-top: 1px solid rgba(138, 115, 85, 0.55);
transform: translateY(100%);
transition: transform var(--dur-med) var(--ease-out);
}
.mobile-cta-bar.is-visible { transform: translateY(0); }
.mobile-cta-bar__btn {
min-height: 54px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: var(--text-small);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--paper);
}
.mobile-cta-bar__btn--primary { background: var(--accent); color: var(--forest); }
@media (min-width: 768px) { .mobile-cta-bar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 54px; } } /* clear footer's last line */
@media (prefers-reduced-motion: reduce) {
.btn--primary:hover,
.btn--primary:focus-visible { transform: none; }
.btn::after { transition: none; }
.mobile-cta-bar { transition: none; }
}