/* =========================================================================
RJDV — Jauniešu Digitālā Vēstniecība
Design system + components. Single stylesheet, custom properties first.
Author: Linards Lazdins / CreateIT / SIA Digibold
========================================================================= */
/* ---------- 0. Fonts ---------------------------------------------------- */
/* Licensed Gilroy .woff files live in assets/fonts/. We ship a disciplined
subset (300/400/500/600/800) — matches what the design actually uses. */
@font-face { font-family: "Gilroy"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/gilroy-light.woff") format("woff"); }
@font-face { font-family: "Gilroy"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/gilroy-regular.woff") format("woff"); }
@font-face { font-family: "Gilroy"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/gilroy-regularitalic.woff") format("woff"); }
@font-face { font-family: "Gilroy"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/gilroy-medium.woff") format("woff"); }
@font-face { font-family: "Gilroy"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/gilroy-semibold.woff") format("woff"); }
@font-face { font-family: "Gilroy"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/gilroy-bold.woff") format("woff"); }
@font-face { font-family: "Gilroy"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/gilroy-extrabold.woff") format("woff"); }
@font-face { font-family: "Gilroy"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/gilroy-black.woff") format("woff"); }
/* ---------- 1. Tokens --------------------------------------------------- */
:root {
/* Riga palette */
--riga-blue: #254CD4;
--sky-blue: #AAD0FF;
--night-blue: #000B40;
--lime: #E2FF86;
--pine-green: #0D3B2C;
--mint: #78E9B8;
--white: #FFFFFF;
--sand-gray: #B8B6A4;
--lilac: #BEAFEC;
--oak-green: #8F993E;
--november-gray: #565947;
--berry: #43010B;
--roof-red: #FF4B33;
--black: #000000;
/* Surface */
--ink: var(--night-blue);
--paper: var(--white);
--paper-warm: #F7F4EC;
--paper-dim: #EFECE2;
--hairline: rgba(0, 11, 64, 0.14);
--hairline-strong: rgba(0, 11, 64, 0.32);
--overlay: rgba(0, 11, 64, 0.72);
/* Type */
--font-sans: "Gilroy", "Arial", "Helvetica Neue", Arial, sans-serif;
--font-alt: "Arial", "Helvetica Neue", sans-serif;
--tracking-tight: -0.02em;
--tracking-body: 0;
--tracking-caps: 0.1em;
/* Fluid type scale — Riga brand "high-contrast hierarchy" as reference */
--fs-body: clamp(1rem, 0.86rem + 0.43vw, 1.15rem);
--fs-small: clamp(0.8rem, 0.74rem + 0.14vw, 0.88rem);
--fs-lead: clamp(1.1rem, 0.94rem + 0.63vw, 1.4rem);
--fs-h4: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
--fs-h3: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
--fs-h2: clamp(1.75rem, 1.3rem + 2.2vw, 3.25rem);
--fs-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
--fs-display: clamp(2.8rem, 1.8rem + 5vw, 6.75rem);
--fs-nav: clamp(1.4rem, 1.05rem + 1.3vw, 2.25rem);
/* Line height */
--lh-tight: 1;
--lh-snug: 1.1;
--lh-short: 1.2;
--lh-base: 1.4;
--lh-long: 1.5;
/* Space scale */
--s-0: 0;
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
--s-11: 12rem;
/* Gutter + container */
--gutter: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);
--container: 1440px;
--prose: 64ch;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-io: cubic-bezier(0.83, 0, 0.17, 1);
--ease-in: cubic-bezier(0.55, 0, 0.8, 0.2);
--dur-1: 140ms;
--dur-2: 220ms;
--dur-3: 420ms;
--dur-4: 620ms;
--dur-5: 900ms;
/* Radius */
--r-sm: 6px;
--r-md: 14px;
--r-lg: 28px;
--r-xl: 44px;
--r-pill: 999px;
/* Shadow (used sparingly — brand is not shadow-heavy) */
--shadow-card: 0 1px 2px rgba(0, 11, 64, 0.04), 0 24px 48px -24px rgba(0, 11, 64, 0.24);
/* Header */
--header-h: 88px;
--header-h-dense: 64px;
/* z-index */
--z-base: 0;
--z-content: 1;
--z-sticky: 40;
--z-nav: 60;
--z-overlay: 80;
--z-loader: 100;
}
/* ---------- 2. Reset-ish ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-body);
line-height: var(--lh-base);
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
body.rjdv-lock { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
picture, figure { display: block; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--pine-green); }
:focus-visible {
outline: 3px solid var(--riga-blue);
outline-offset: 3px;
border-radius: 2px;
}
/* Skip link */
.rjdv-skip-link {
position: absolute;
left: 1rem;
top: 1rem;
transform: translateY(-200%);
background: var(--night-blue);
color: var(--lime);
padding: 0.75rem 1rem;
border-radius: var(--r-sm);
z-index: 1000;
font-weight: 600;
transition: transform var(--dur-2) var(--ease-out);
}
.rjdv-skip-link:focus { transform: translateY(0); }
/* ---------- 3. Typography ---------------------------------------------- */
.rjdv-eyebrow {
font-size: var(--fs-small);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.rjdv-eyebrow::before {
content: "";
display: inline-block;
width: 1.25rem;
height: 1px;
background: currentColor;
flex: none;
}
.rjdv-h1, .rjdv-display, .rjdv-h2, .rjdv-h3, .rjdv-h4 {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: var(--tracking-tight);
line-height: var(--lh-snug);
text-wrap: balance;
}
.rjdv-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.03em; }
.rjdv-h1 { font-size: var(--fs-h1); }
.rjdv-h2 { font-size: var(--fs-h2); }
.rjdv-h3 { font-size: var(--fs-h3); }
.rjdv-h4 { font-size: var(--fs-h4); line-height: var(--lh-short); }
.rjdv-lead {
font-size: var(--fs-lead);
line-height: var(--lh-base);
max-width: 40ch;
color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.rjdv-prose p { max-width: var(--prose); }
.rjdv-prose h2 { font-size: var(--fs-h2); margin-top: var(--s-7); margin-bottom: var(--s-4); }
.rjdv-prose h3 { font-size: var(--fs-h3); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.rjdv-prose h4 { font-size: var(--fs-h4); margin-top: var(--s-5); margin-bottom: var(--s-2); }
.rjdv-prose p, .rjdv-prose ul, .rjdv-prose ol { margin-top: var(--s-4); }
.rjdv-prose a { border-bottom: 1px solid currentColor; }
.rjdv-prose ul { list-style: disc; padding-left: 1.25rem; }
.rjdv-prose ol { list-style: decimal; padding-left: 1.25rem; }
/* ---------- 4. Layout primitives --------------------------------------- */
.rjdv-container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.rjdv-container--narrow { max-width: 1040px; }
.rjdv-container--wide { max-width: 1680px; }
.rjdv-section {
padding-block: clamp(3rem, 4vw + 2rem, 8rem);
position: relative;
}
.rjdv-section--tight { padding-block: clamp(2rem, 2vw + 1rem, 4rem); }
.rjdv-section--dark { background: var(--night-blue); color: var(--paper); }
.rjdv-section--warm { background: var(--paper-warm); }
.rjdv-section--ink { background: var(--pine-green); color: var(--lime); }
.rjdv-stack > * + * { margin-top: var(--s-5); }
.rjdv-stack--tight > * + * { margin-top: var(--s-3); }
.rjdv-stack--loose > * + * { margin-top: var(--s-7); }
.rjdv-hairline { border: 0; border-top: 1px solid var(--hairline); }
/* ---------- 4b. Icon families ------------------------------------------ */
/* Two icon systems live under the shared `.rjdv-icon` class:
- .rjdv-icon--brand : inline 48×48 glyphs drawn in PHP from the atslēga's
geometric language. Sharp (square caps, miter joins, 1.6 stroke).
- .rjdv-icon--ui : local Iconoir SVGs (assets/icons/iconoir/*.svg),
24×24 with 1.5 round-capped strokes.
Both inherit color via `currentColor`; size is set by the host container. */
.rjdv-icon {
display: inline-block;
flex: none;
vertical-align: middle;
color: inherit;
fill: none;
}
.rjdv-icon--ui { stroke: currentColor; }
/* ---------- 5. Button --------------------------------------------------- */
.rjdv-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.95rem 1.5rem;
border-radius: var(--r-pill);
background: var(--ink);
color: var(--paper);
font-weight: 600;
font-size: 1rem;
line-height: 1;
letter-spacing: 0;
min-height: 3rem;
min-width: 3rem;
transition: transform var(--dur-2) var(--ease-out),
background var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out);
position: relative;
overflow: hidden;
}
.rjdv-btn .rjdv-icon { width: 1.125rem; height: 1.125rem; }
.rjdv-btn:hover { transform: translateY(-2px); background: var(--riga-blue); }
.rjdv-btn:active { transform: translateY(0); }
.rjdv-btn--ghost {
background: transparent;
color: var(--ink);
box-shadow: inset 0 0 0 1px currentColor;
}
.rjdv-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.rjdv-btn--lime { background: var(--lime); color: var(--pine-green); }
.rjdv-btn--lime:hover { background: var(--pine-green); color: var(--lime); }
.rjdv-btn--lg { padding: 1.1rem 1.75rem; font-size: 1.05rem; }
/* Icon-only round button */
.rjdv-iconbtn {
width: 3rem;
height: 3rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--paper);
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
.rjdv-iconbtn .rjdv-icon { width: 1.125rem; height: 1.125rem; }
.rjdv-iconbtn:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
/* ---------- 6. Header --------------------------------------------------- */
.rjdv-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: color-mix(in srgb, var(--paper) 80%, transparent);
backdrop-filter: saturate(140%) blur(16px);
-webkit-backdrop-filter: saturate(140%) blur(16px);
transition: background var(--dur-2) var(--ease-out);
}
.rjdv-header::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--hairline);
opacity: 0;
transition: opacity var(--dur-2) var(--ease-out);
}
.rjdv-header--dense { background: var(--paper); }
.rjdv-header--dense::after { opacity: 1; }
.rjdv-header--dense .rjdv-header__inner { min-height: var(--header-h-dense); }
.rjdv-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-height: var(--header-h);
transition: min-height var(--dur-3) var(--ease-out);
}
/* Brand: the real lockup SVG on desktop; reduced to just the symbol glyph
when the viewport is narrow. currentColor inheritance means the same
element adapts to paper/ink surfaces. */
.rjdv-brand {
display: inline-flex;
align-items: center;
gap: 0.9rem;
color: var(--ink);
transition: color var(--dur-2) var(--ease-out);
min-height: 44px;
}
.rjdv-brand:hover { color: var(--riga-blue); }
.rjdv-brand--on-dark { color: var(--paper); }
.rjdv-brand--on-dark:hover { color: var(--lime); }
.rjdv-brand__lockup {
display: inline-block;
height: 32px;
}
.rjdv-brand__lockup svg {
height: 100%;
width: auto;
display: block;
}
.rjdv-brand__symbol {
display: none;
width: 40px;
height: 40px;
}
.rjdv-brand__symbol svg { width: 100%; height: 100%; }
@media (max-width: 720px) {
.rjdv-brand__lockup { height: 26px; }
}
.rjdv-header__actions {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Accessibility trigger — small editorial pill that matches the panel
trigger's rhythm but carries its own lime micro-dot to stay readable. */
.rjdv-a11y-trigger {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 1rem 0.55rem 0.6rem;
background: transparent;
color: var(--ink);
border-radius: var(--r-pill);
font-weight: 600;
font-size: 0.9rem;
min-height: 3rem;
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.rjdv-a11y-trigger__glyph {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--paper);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px var(--hairline);
flex: none;
}
.rjdv-a11y-trigger__glyph .rjdv-icon { width: 1rem; height: 1rem; }
.rjdv-a11y-trigger:hover {
background: var(--ink);
color: var(--paper);
box-shadow: inset 0 0 0 1px var(--ink);
}
.rjdv-a11y-trigger:hover .rjdv-a11y-trigger__glyph { background: var(--lime); color: var(--pine-green); box-shadow: none; }
.rjdv-a11y-trigger[aria-expanded="true"] { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.rjdv-a11y-trigger[aria-expanded="true"] .rjdv-a11y-trigger__glyph { background: var(--lime); color: var(--pine-green); box-shadow: none; }
@media (max-width: 640px) {
.rjdv-a11y-trigger__label { display: none; }
.rjdv-a11y-trigger {
padding: 0;
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
justify-content: center;
box-shadow: none;
background: transparent;
}
.rjdv-a11y-trigger__glyph {
width: 44px;
height: 44px;
}
.rjdv-a11y-trigger__glyph .rjdv-icon { width: 1.25rem; height: 1.25rem; }
}
/* Panel trigger — rebuilt: three bars sit inside a lime dot that compresses
to a plus sign when the panel opens. No more generic "menu" glyph. */
.rjdv-panel-trigger {
display: inline-flex;
align-items: center;
gap: 0.85rem;
padding: 0.55rem 0.55rem 0.55rem 1.1rem;
background: var(--ink);
color: var(--paper);
border-radius: var(--r-pill);
font-weight: 600;
font-size: 0.95rem;
min-height: 3rem;
transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.rjdv-panel-trigger__label { display: inline-block; }
.rjdv-panel-trigger__dot {
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
background: var(--lime);
color: var(--pine-green);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out);
}
.rjdv-panel-trigger__bars {
display: inline-flex;
flex-direction: column;
gap: 3px;
width: 14px;
}
.rjdv-panel-trigger__bars span {
display: block;
height: 2px;
background: currentColor;
border-radius: 1px;
}
.rjdv-panel-trigger__bars span:nth-child(1) { width: 100%; }
.rjdv-panel-trigger__bars span:nth-child(2) { width: 70%; }
.rjdv-panel-trigger__bars span:nth-child(3) { width: 40%; }
.rjdv-panel-trigger:hover { background: var(--riga-blue); }
.rjdv-panel-trigger:hover .rjdv-panel-trigger__dot { background: var(--sky-blue); }
.rjdv-panel-trigger[aria-expanded="true"] .rjdv-panel-trigger__dot { transform: rotate(45deg); }
@media (max-width: 640px) {
.rjdv-panel-trigger__label { display: none; }
.rjdv-panel-trigger {
padding: 0;
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
justify-content: center;
gap: 0;
}
.rjdv-panel-trigger__dot {
width: 28px;
height: 28px;
}
.rjdv-panel-trigger__bars { width: 12px; }
}
/* ---------- 7. Iespēju panelis (full-screen nav overlay) ---------------- */
/* Editorial composition: left-rail group numerals, link rows as hairline
list items with a group accent that grows from the left on hover, and a
feature card where the numeral "11" is structural, not decorative. */
.rjdv-panel {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
pointer-events: none;
background: var(--night-blue);
color: var(--paper);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-4);
overflow: auto;
}
.rjdv-panel::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(60% 45% at 85% 0%, color-mix(in srgb, var(--riga-blue) 25%, transparent) 0%, transparent 70%),
radial-gradient(50% 40% at 0% 100%, color-mix(in srgb, var(--lilac) 18%, transparent) 0%, transparent 65%);
opacity: 0;
transition: opacity var(--dur-4) var(--ease-out);
}
.rjdv-panel[data-open="true"] {
pointer-events: auto;
opacity: 1;
visibility: visible;
transition: opacity var(--dur-3) var(--ease-out);
}
.rjdv-panel[data-open="true"]::before { opacity: 1; }
.rjdv-panel__inner {
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100dvh;
padding: var(--s-4) 0 0;
}
.rjdv-panel__top {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--s-4);
align-items: center;
padding: 0 var(--gutter) var(--s-4);
min-height: var(--header-h);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rjdv-panel__top .rjdv-brand { color: var(--paper); }
.rjdv-panel__search {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
max-width: 440px;
padding: 0.8rem 1.1rem;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.06);
color: var(--paper);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.rjdv-panel__search:focus-within {
background: rgba(255, 255, 255, 0.12);
box-shadow: inset 0 0 0 1px var(--lime);
}
.rjdv-panel__search svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
opacity: 0.6;
}
.rjdv-panel__search input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: inherit;
font-size: 1rem;
letter-spacing: 0.005em;
}
.rjdv-panel__search input::placeholder { color: color-mix(in srgb, var(--paper) 55%, transparent); }
.rjdv-panel__close {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.4rem 0.4rem 0.4rem 1.1rem;
background: transparent;
color: var(--paper);
border-radius: var(--r-pill);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.04em;
text-transform: uppercase;
min-height: 3rem;
transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.rjdv-panel__close-label { display: inline-block; }
.rjdv-panel__close-dot {
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background: var(--lime);
color: var(--pine-green);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--dur-3) var(--ease-out);
}
.rjdv-panel__close-dot .rjdv-icon { width: 1.05rem; height: 1.05rem; }
.rjdv-panel__close:hover {
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.rjdv-panel__close:hover .rjdv-panel__close-dot { transform: rotate(90deg); }
@media (max-width: 640px) {
.rjdv-panel__close-label { display: none; }
.rjdv-panel__close {
padding: 0;
gap: 0;
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
justify-content: center;
box-shadow: none;
}
.rjdv-panel__close-dot {
width: 44px;
height: 44px;
}
.rjdv-panel__close-dot .rjdv-icon { width: 1.25rem; height: 1.25rem; }
}
/* Body: one column stack of full-width group rows, then the feature. */
.rjdv-panel__body {
display: flex;
flex-direction: column;
padding: clamp(2rem, 2.5vw + 1rem, 3.5rem) var(--gutter) var(--s-7);
gap: 0;
}
.rjdv-group {
position: relative;
display: grid;
grid-template-columns: minmax(22ch, 32%) 1fr;
column-gap: clamp(2rem, 3vw, 5rem);
row-gap: var(--s-3);
padding: clamp(1.25rem, 1.5vw + 0.25rem, 2.25rem) 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
align-items: start;
}
.rjdv-group:first-of-type { border-top: 0; padding-top: 0.5rem; }
.rjdv-group__head {
background: none;
border: 0;
padding: 0;
color: inherit;
text-align: left;
cursor: default;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.85rem;
row-gap: 0.6rem;
align-items: baseline;
}
.rjdv-group__num {
font-family: var(--font-display);
font-size: clamp(1.25rem, 0.95rem + 0.7vw, 1.65rem);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--group-accent, var(--lime));
line-height: 1;
font-variant-numeric: tabular-nums;
}
.rjdv-group__name {
font-family: var(--font-display);
font-size: clamp(2rem, 1.3rem + 1.6vw, 3rem);
font-weight: 600;
letter-spacing: var(--tracking-tight);
color: var(--paper);
line-height: 1;
}
.rjdv-group__helper {
grid-column: 1 / -1;
font-size: 0.95rem;
line-height: 1.5;
color: color-mix(in srgb, var(--paper) 62%, transparent);
max-width: 34ch;
margin: 0;
}
.rjdv-group__toggle { display: none; }
.rjdv-group__body { min-width: 0; }
.rjdv-group__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}
.rjdv-group__list > li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rjdv-group__list > li:first-child,
.rjdv-group__list > li:nth-child(2) { border-top: 0; }
.rjdv-group__link {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 0.1rem 0.85rem 1rem;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
font-weight: 500;
line-height: 1.25;
color: color-mix(in srgb, var(--paper) 90%, transparent);
transition: color var(--dur-2) var(--ease-out), padding-left var(--dur-3) var(--ease-out);
}
.rjdv-group__link::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 1px;
background: var(--group-accent, var(--lime));
transform: translateY(-50%);
transition: width var(--dur-3) var(--ease-out);
}
.rjdv-group__link:hover,
.rjdv-group__link:focus-visible {
color: var(--group-accent, var(--lime));
padding-left: 1.6rem;
outline: 0;
}
.rjdv-group__link:hover::before,
.rjdv-group__link:focus-visible::before { width: 1rem; }
.rjdv-group__link-arrow {
opacity: 0;
transform: translateX(-6px);
transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
flex: none;
color: var(--group-accent, var(--lime));
}
.rjdv-group__link:hover .rjdv-group__link-arrow,
.rjdv-group__link:focus-visible .rjdv-group__link-arrow { opacity: 1; transform: translateX(0); }
.rjdv-group__link-arrow .rjdv-icon { width: 1rem; height: 1rem; }
/* Feature card — the "11 KARTE" tile. The numeral becomes a structural
typographic element, bleeding into the card edge rather than floating as
a badge. */
.rjdv-panel__feature {
position: relative;
overflow: hidden;
margin-top: var(--s-5);
padding: clamp(2rem, 2.5vw + 1rem, 3.25rem);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s-4) var(--s-5);
align-items: end;
color: var(--pine-green);
background: var(--lime);
border-radius: var(--r-lg);
isolation: isolate;
}
.rjdv-panel__feature-num {
position: absolute;
right: clamp(-0.5rem, -0.5vw, -0.5rem);
bottom: -0.18em;
font-family: var(--font-display);
font-size: clamp(10rem, 6rem + 16vw, 22rem);
font-weight: 700;
line-height: 0.75;
letter-spacing: -0.08em;
color: color-mix(in srgb, var(--pine-green) 16%, transparent);
z-index: 0;
pointer-events: none;
user-select: none;
}
.rjdv-panel__feature-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--s-3);
max-width: 48ch;
}
.rjdv-panel__feature .rjdv-eyebrow {
color: var(--pine-green);
opacity: 0.75;
}
.rjdv-panel__feature h3 {
font-family: var(--font-display);
font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: var(--tracking-tight);
color: var(--pine-green);
}
.rjdv-panel__feature p {
font-size: 1rem;
line-height: 1.55;
color: color-mix(in srgb, var(--pine-green) 85%, transparent);
max-width: 48ch;
}
.rjdv-panel__feature .rjdv-btn {
align-self: start;
margin-top: var(--s-3);
background: var(--pine-green);
color: var(--lime);
box-shadow: inset 0 0 0 1px var(--pine-green);
}
.rjdv-panel__feature .rjdv-btn:hover {
background: var(--night-blue);
color: var(--lime);
}
.rjdv-panel__bottom {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
padding: var(--s-5) var(--gutter) var(--s-4);
margin-top: auto;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.85rem;
letter-spacing: 0.01em;
color: color-mix(in srgb, var(--paper) 65%, transparent);
align-items: center;
justify-content: space-between;
}
.rjdv-panel__bottom-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.rjdv-panel__bottom a {
opacity: 0.85;
transition: opacity var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.rjdv-panel__bottom a:hover { opacity: 1; color: var(--lime); }
/* ---------- 8. Mobile curtain (single-column accordion) ----------------- */
@media (max-width: 960px) {
.rjdv-panel__body { padding: var(--s-4) var(--gutter) var(--s-6); gap: 0; }
.rjdv-group {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.rjdv-group:first-of-type { border-top: 0; padding-top: 0; }
.rjdv-group__head {
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
column-gap: 0.85rem;
padding: 1.1rem 0;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
align-items: center;
}
.rjdv-group__num { font-size: 1.2rem; }
.rjdv-group__name { font-size: 1.7rem; }
.rjdv-group__helper {
display: none;
}
.rjdv-group__head[aria-expanded="true"] + .rjdv-group__body { display: block; padding: 0 0 1.1rem 0; }
.rjdv-group__body { display: none; }
.rjdv-group__list { grid-template-columns: 1fr; }
.rjdv-group__list > li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rjdv-group__list > li:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rjdv-group__list > li:first-child { border-top: 0; }
.rjdv-group__toggle {
display: inline-flex;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--paper);
align-items: center;
justify-content: center;
flex: none;
transition: background var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.rjdv-group__head[aria-expanded="true"] .rjdv-group__toggle {
background: var(--group-accent, var(--lime));
color: var(--pine-green);
transform: rotate(45deg);
}
.rjdv-panel__feature {
grid-template-columns: 1fr;
padding: var(--s-5) var(--s-4);
margin-top: var(--s-4);
}
.rjdv-panel__feature-num {
font-size: clamp(6rem, 22vw, 12rem);
right: -0.2em;
bottom: -0.12em;
}
}
@media (min-width: 961px) {
.rjdv-group__toggle { display: none; }
.rjdv-group__body { display: block !important; }
}
@media (max-width: 720px) {
.rjdv-group__list { grid-template-columns: 1fr; }
}
/* ---------- 8b. Piekļūstamības panelis (WCAG a11y) -------------------- */
/* Anchored top-right from the header. Not a floating widget — a proper
sheet with keyboard trap and persisted preferences. */
.rjdv-a11y {
position: fixed;
top: 0;
right: 0;
z-index: calc(var(--z-overlay) + 2);
width: min(380px, 100%);
height: 100dvh;
background: var(--paper);
color: var(--ink);
border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
transform: translateX(101%);
transition: transform var(--dur-5) var(--ease-out);
display: flex;
flex-direction: column;
visibility: hidden;
box-shadow: -24px 0 60px -30px rgba(0, 11, 64, 0.35);
}
.rjdv-a11y[data-open="true"] {
transform: translateX(0);
visibility: visible;
}
.rjdv-a11y__inner {
padding: clamp(1.25rem, 2vw + 0.75rem, 2rem);
display: flex;
flex-direction: column;
gap: var(--s-5);
height: 100%;
overflow-y: auto;
}
.rjdv-a11y__head {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s-3) var(--s-4);
align-items: start;
}
.rjdv-a11y__eyebrow {
grid-column: 1 / -1;
font-size: 0.72rem;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 55%, transparent);
font-variant-numeric: tabular-nums;
}
.rjdv-a11y__title {
font-size: clamp(1.3rem, 0.9rem + 1vw, 1.75rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: var(--tracking-tight);
color: var(--ink);
}
.rjdv-a11y__lead {
grid-column: 1 / -1;
font-size: 0.95rem;
line-height: 1.4;
color: color-mix(in srgb, var(--ink) 72%, transparent);
max-width: 34ch;
}
.rjdv-a11y__close {
appearance: none;
background: transparent;
border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
color: var(--ink);
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.rjdv-a11y__close:hover,
.rjdv-a11y__close:focus-visible {
border-color: var(--riga-blue);
color: var(--riga-blue);
background: color-mix(in srgb, var(--riga-blue) 6%, transparent);
}
.rjdv-a11y__close svg { width: 18px; height: 18px; }
.rjdv-a11y__grid {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.rjdv-a11y__control {
appearance: none;
display: grid;
grid-template-columns: 2rem 1fr auto;
align-items: center;
gap: 0.9rem;
padding: 0.85rem 1rem;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--paper-warm) 80%, transparent);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.rjdv-a11y__control:hover,
.rjdv-a11y__control:focus-visible {
border-color: var(--riga-blue);
background: color-mix(in srgb, var(--riga-blue) 6%, transparent);
}
.rjdv-a11y__control--stepper {
cursor: default;
padding-block: 0.65rem;
}
.rjdv-a11y__control--stepper:hover {
border-color: color-mix(in srgb, var(--ink) 12%, transparent);
background: color-mix(in srgb, var(--paper-warm) 80%, transparent);
}
.rjdv-a11y__label {
display: contents;
}
.rjdv-a11y__label > span:last-child,
.rjdv-a11y__label-text {
grid-column: 2;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: var(--tracking-tight);
line-height: 1.2;
}
.rjdv-a11y__icon {
grid-column: 1;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--paper);
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
color: var(--ink);
flex: none;
}
.rjdv-a11y__icon svg { width: 16px; height: 16px; }
.rjdv-a11y__stepper {
grid-column: 3;
display: inline-flex;
align-items: center;
gap: 0.25rem;
border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
border-radius: 999px;
padding: 0.2rem;
background: var(--paper);
}
.rjdv-a11y__stepper button {
appearance: none;
background: transparent;
border: 0;
width: 1.7rem;
height: 1.7rem;
border-radius: 50%;
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.rjdv-a11y__stepper button:hover,
.rjdv-a11y__stepper button:focus-visible { background: var(--ink); color: var(--paper); }
.rjdv-a11y__stepper button:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; color: var(--ink); }
.rjdv-a11y__stepper button svg { width: 12px; height: 12px; }
.rjdv-a11y__stepper [data-a11y-text-value],
.rjdv-a11y__stepper [data-a11y-spacing-value] {
min-width: 2.6rem;
text-align: center;
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 0.85rem;
color: var(--ink);
}
/* The state pill is a purely visual switch affordance on toggle rows */
.rjdv-a11y__toggle .rjdv-a11y__state {
grid-column: 3;
width: 44px;
height: 24px;
border-radius: 999px;
position: relative;
background: transparent;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
flex: none;
}
.rjdv-a11y__toggle .rjdv-a11y__state::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ink);
transition: transform var(--dur-3) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.rjdv-a11y__toggle[aria-pressed="true"] .rjdv-a11y__state {
background: var(--riga-blue);
box-shadow: inset 0 0 0 1px var(--riga-blue);
}
.rjdv-a11y__toggle[aria-pressed="true"] .rjdv-a11y__state::after {
transform: translateX(20px);
background: var(--paper);
}
.rjdv-a11y__toggle:focus-visible { outline: 2px solid var(--riga-blue); outline-offset: 2px; }
.rjdv-a11y__foot {
margin-top: auto;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.rjdv-a11y__reset {
appearance: none;
background: transparent;
border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
color: var(--ink);
padding: 0.65rem 1rem;
border-radius: var(--r-sm);
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.rjdv-a11y__reset:hover,
.rjdv-a11y__reset:focus-visible {
border-color: var(--riga-blue);
color: var(--riga-blue);
background: color-mix(in srgb, var(--riga-blue) 6%, transparent);
}
.rjdv-a11y__reset svg { width: 14px; height: 14px; }
.rjdv-a11y__note {
font-size: 0.78rem;
color: color-mix(in srgb, var(--ink) 55%, transparent);
line-height: 1.4;
}
.rjdv-a11y__note a { color: var(--riga-blue); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 520px) {
.rjdv-a11y { width: 100%; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
}
/* Scrim shared with main panel */
.rjdv-a11y-scrim {
position: fixed;
inset: 0;
z-index: calc(var(--z-overlay) + 1);
background: rgba(0, 11, 64, 0.42);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-4) var(--ease-out);
}
.rjdv-a11y-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
/* ---------- 8c. Global a11y effect classes --------------------------- */
/* Each data-attribute on drives one accessibility mode */
/* Text scale — 0..4 steps, each +12.5% (SC 1.4.4 Resize Text) */
html[data-a11y-text="1"] { font-size: 1.125rem; }
html[data-a11y-text="2"] { font-size: 1.25rem; }
html[data-a11y-text="3"] { font-size: 1.375rem; }
html[data-a11y-text="4"] { font-size: 1.5rem; }
/* Text spacing — SC 1.4.12 Text Spacing. Step 1 meets WCAG minimums
(line-height ≥ 1.5×, paragraph spacing ≥ 2×, letter-spacing ≥ 0.12em,
word-spacing ≥ 0.16em); step 2 goes further for low-vision comfort. */
html[data-a11y-spacing="1"] body,
html[data-a11y-spacing="1"] p,
html[data-a11y-spacing="1"] li,
html[data-a11y-spacing="1"] h1,
html[data-a11y-spacing="1"] h2,
html[data-a11y-spacing="1"] h3,
html[data-a11y-spacing="1"] h4 {
line-height: 1.6 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
html[data-a11y-spacing="1"] p + p,
html[data-a11y-spacing="1"] h2,
html[data-a11y-spacing="1"] h3,
html[data-a11y-spacing="1"] h4 { margin-top: 2em !important; }
html[data-a11y-spacing="2"] body,
html[data-a11y-spacing="2"] p,
html[data-a11y-spacing="2"] li,
html[data-a11y-spacing="2"] h1,
html[data-a11y-spacing="2"] h2,
html[data-a11y-spacing="2"] h3,
html[data-a11y-spacing="2"] h4 {
line-height: 2 !important;
letter-spacing: 0.18em !important;
word-spacing: 0.24em !important;
}
html[data-a11y-spacing="2"] p + p,
html[data-a11y-spacing="2"] h2,
html[data-a11y-spacing="2"] h3,
html[data-a11y-spacing="2"] h4 { margin-top: 2.5em !important; }
/* High-contrast mode — Rīga palette but forced pure ink/paper */
html[data-a11y-contrast="on"] {
--paper: #FFFFFF;
--paper-warm: #FFFFFF;
--ink: #000000;
--pine-green: #000000;
--riga-blue: #000B40;
--lime: #E2FF86;
}
html[data-a11y-contrast="on"] body { background: #FFFFFF; color: #000000; }
html[data-a11y-contrast="on"] .rjdv-header { background: #000000; color: #FFFFFF; border-bottom: 1px solid #FFFFFF; }
html[data-a11y-contrast="on"] .rjdv-panel { background: #000000; color: #FFFFFF; }
html[data-a11y-contrast="on"] .rjdv-btn--ghost { border-color: #000000; color: #000000; }
html[data-a11y-contrast="on"] .rjdv-btn--lime { background: #E2FF86; color: #000000; border-color: #000000; }
html[data-a11y-contrast="on"] a:not(.rjdv-btn) { text-decoration: underline; }
/* Forced underline */
html[data-a11y-underline="on"] a:not(.rjdv-brand):not(.rjdv-btn) {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
/* Amplified focus ring */
html[data-a11y-focus="on"] :focus-visible {
outline: 3px solid var(--riga-blue) !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 6px color-mix(in srgb, var(--riga-blue) 25%, transparent) !important;
border-radius: 4px;
}
/* Readable mode — tighter line-length, increased leading, serif fallback-friendly */
html[data-a11y-readable="on"] .rjdv-hero__lead,
html[data-a11y-readable="on"] .rjdv-eu__body,
html[data-a11y-readable="on"] .rjdv-post__body,
html[data-a11y-readable="on"] p,
html[data-a11y-readable="on"] li {
line-height: 1.75;
letter-spacing: 0.01em;
max-width: 58ch;
font-family: "Gilroy", Arial, "Helvetica Neue", sans-serif;
}
html[data-a11y-readable="on"] .rjdv-footer__menu { max-width: none; }
/* Grayscale / monochrome — photosensitivity aid (SC 1.4.1 Use of Colour).
The filter is scoped to so panel controls stay desaturated too,
but attributes don't get filtered (preserves scrollbar colours). */
html[data-a11y-grayscale="on"] body {
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
/* Enlarged cursor — helps low-vision and motor users track the pointer.
Uses an inline SVG (32px) so it works without asset download and inherits
the ink/lime palette. Pointer variant swaps to the lime accent. */
html[data-a11y-cursor="on"],
html[data-a11y-cursor="on"] * {
cursor: url("data:image/svg+xml;utf8,") 2 2, auto;
}
html[data-a11y-cursor="on"] a,
html[data-a11y-cursor="on"] button,
html[data-a11y-cursor="on"] [role="button"],
html[data-a11y-cursor="on"] label,
html[data-a11y-cursor="on"] summary,
html[data-a11y-cursor="on"] input[type="submit"],
html[data-a11y-cursor="on"] input[type="button"] {
cursor: url("data:image/svg+xml;utf8,") 2 2, pointer;
}
/* ---------- 9. Intro loader -------------------------------------------- */
/* Two hairlines meet at centre, the atslēga resolves on the crosshair,
the whole stage compresses toward the header slot. One beat, inevitable. */
.rjdv-loader {
position: fixed;
inset: 0;
z-index: var(--z-loader);
background: var(--night-blue);
color: var(--paper);
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
transition: opacity 480ms var(--ease-out), visibility 0s linear 480ms;
}
.rjdv-loader[data-phase="done"] {
opacity: 0;
visibility: hidden;
transition: opacity 360ms var(--ease-in), visibility 0s linear 360ms;
}
.rjdv-loader__line {
position: absolute;
background: var(--lime);
opacity: 0.35;
transform-origin: center;
transform: scale(0);
transition: transform 520ms var(--ease-out);
}
.rjdv-loader__line--h { left: 0; right: 0; top: 50%; height: 1px; transform: scaleX(0); }
.rjdv-loader__line--v { top: 0; bottom: 0; left: 50%; width: 1px; transform: scaleY(0); }
.rjdv-loader[data-phase="cross"] .rjdv-loader__line--h,
.rjdv-loader[data-phase="resolve"] .rjdv-loader__line--h,
.rjdv-loader[data-phase="translate"] .rjdv-loader__line--h { transform: scaleX(1); }
.rjdv-loader[data-phase="cross"] .rjdv-loader__line--v,
.rjdv-loader[data-phase="resolve"] .rjdv-loader__line--v,
.rjdv-loader[data-phase="translate"] .rjdv-loader__line--v { transform: scaleY(1); }
.rjdv-loader[data-phase="translate"] .rjdv-loader__line { opacity: 0; transition: opacity 320ms var(--ease-in); }
.rjdv-loader__stage {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-4);
transform: scale(1);
transform-origin: center;
transition: transform 520ms var(--ease-io), opacity 320ms var(--ease-out);
}
.rjdv-loader[data-phase="translate"] .rjdv-loader__stage {
transform: scale(0.14);
opacity: 0;
}
.rjdv-loader__symbol {
display: inline-flex;
width: clamp(72px, 12vmin, 120px);
height: clamp(72px, 12vmin, 120px);
color: var(--lime);
opacity: 0;
transform: scale(0.82);
transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}
.rjdv-loader__symbol svg { width: 100%; height: 100%; }
.rjdv-loader[data-phase="resolve"] .rjdv-loader__symbol,
.rjdv-loader[data-phase="translate"] .rjdv-loader__symbol { opacity: 1; transform: scale(1); }
.rjdv-loader__caption {
font-size: 0.85rem;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: color-mix(in srgb, var(--paper) 62%, transparent);
opacity: 0;
transform: translateY(6px);
transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.rjdv-loader[data-phase="resolve"] .rjdv-loader__caption,
.rjdv-loader[data-phase="translate"] .rjdv-loader__caption { opacity: 1; transform: translateY(0); }
/* ---------- 10. Hero --------------------------------------------------- */
/* The atslēga is a full-presence figure that overlaps the type from the
right; the lime underline on the last line sits under the figure edge
so the layers lock together. Entrance is driven by JS (GSAP if loaded);
without JS the static composition still reads as a confident spread. */
.rjdv-hero {
position: relative;
overflow: hidden;
padding-block: clamp(3rem, 5vw + 1.5rem, 7rem) clamp(2.5rem, 4vw + 1rem, 5.5rem);
background: var(--paper);
isolation: isolate;
min-height: clamp(560px, 86vh, 880px);
display: flex;
align-items: center;
}
/* Atslēga figure — large, solid, low-opacity pine-green, composed to
overlap the type column. Parallax is added as a CSS var by JS. */
.rjdv-hero__figure {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
--hero-fx: 0;
--hero-fy: 0;
}
.rjdv-hero__figure-symbol {
position: absolute;
right: -14%;
top: 50%;
width: min(108vmin, 980px);
aspect-ratio: 1 / 1;
color: var(--pine-green);
display: block;
opacity: 0.14;
transform:
translate(-50%, -50%)
translate3d(calc(var(--hero-fx) * 10px), calc(var(--hero-fy) * 10px), 0)
rotate(-4deg)
scale(var(--hero-fig-scale, 1));
transform-origin: center;
left: auto;
transition: opacity 400ms var(--ease-out);
}
.rjdv-hero__figure-symbol svg { width: 100%; height: 100%; display: block; }
@media (min-width: 720px) {
.rjdv-hero__figure-symbol {
right: -8%;
width: min(82vmin, 880px);
opacity: 0.16;
}
}
@media (min-width: 1280px) {
.rjdv-hero__figure-symbol {
right: -2%;
width: min(72vmin, 920px);
opacity: 0.18;
}
}
.rjdv-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
.rjdv-hero__body {
display: flex;
flex-direction: column;
gap: clamp(1.25rem, 1.5vw + 0.75rem, 2.25rem);
max-width: min(52ch, 66%);
}
@media (max-width: 720px) {
.rjdv-hero__body { max-width: none; }
}
.rjdv-hero__eyebrow {
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
/* Title — each line wrapped for a clip-reveal entrance. Use inline-block
padding-bottom so descenders aren't clipped by the mask. */
.rjdv-hero__title {
font-size: var(--fs-display);
font-weight: 800;
line-height: 0.88;
letter-spacing: -0.04em;
color: var(--ink);
display: flex;
flex-direction: column;
gap: 0.08em;
margin: 0;
}
.rjdv-hero__line {
position: relative;
display: block;
width: fit-content;
overflow: hidden;
padding-bottom: 0.12em;
}
.rjdv-hero__line--accent { padding-left: 0.5em; }
.rjdv-hero__word {
position: relative;
z-index: 1;
display: inline-block;
}
.rjdv-hero__word-text { position: relative; z-index: 1; }
/* Lime underline — absolute child of .rjdv-hero__word so it sits directly
behind the text and spans only the word. GSAP scales it; fallback uses
a keyframe animation. */
.rjdv-hero__underline {
position: absolute;
inset: auto 0 0.12em 0;
height: 0.26em;
background: var(--lime);
z-index: 0;
transform-origin: left;
transform: scaleX(0);
animation: rjdv-hero-underline 700ms var(--ease-out) 520ms forwards;
}
@keyframes rjdv-hero-underline { to { transform: scaleX(1); } }
html.rjdv-gsap .rjdv-hero__underline { animation: none; }
@media (max-width: 720px) {
.rjdv-hero__line--accent { padding-left: 0; }
}
.rjdv-hero__lead {
font-size: var(--fs-lead);
max-width: 42ch;
color: color-mix(in srgb, var(--ink) 78%, transparent);
line-height: 1.42;
}
.rjdv-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem 1.75rem;
margin-top: clamp(0.5rem, 0.5vw + 0.25rem, 1rem);
}
.rjdv-hero__quietlink {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--ink);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: var(--tracking-tight);
padding: 0.25rem 0;
border-bottom: 1px solid transparent;
transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.rjdv-hero__quietlink svg {
width: 16px;
height: 16px;
transition: transform var(--dur-3) var(--ease-out);
}
.rjdv-hero__quietlink:hover,
.rjdv-hero__quietlink:focus-visible {
color: var(--riga-blue);
border-bottom-color: var(--riga-blue);
}
.rjdv-hero__quietlink:hover svg,
.rjdv-hero__quietlink:focus-visible svg { transform: translateX(3px); }
/* Scroll hint — clickable button, bottom-right, vertical travelling mark
that signals "scroll down" rather than "drag horizontally". Fixed so it
always sits at the viewport's bottom-right while the hero is in view;
JS toggles `is-hidden` once the next section enters. */
.rjdv-hero__scrollhint {
position: fixed;
right: var(--gutter);
bottom: clamp(1.25rem, 2vh + 0.5rem, 2.5rem);
z-index: 5;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 0.35rem 0.4rem 0;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
font-size: 0.7rem;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 55%, transparent);
font-weight: 600;
z-index: 2;
transition: color var(--dur-2) var(--ease-out);
}
.rjdv-hero__scrollhint:hover,
.rjdv-hero__scrollhint:focus-visible {
color: var(--ink);
outline: 0;
}
/* Up mode sits over the dark footer — flip to paper-on-ink. */
.rjdv-hero__scrollhint[data-mode="up"] {
color: color-mix(in srgb, var(--paper) 70%, transparent);
}
.rjdv-hero__scrollhint[data-mode="up"]:hover,
.rjdv-hero__scrollhint[data-mode="up"]:focus-visible {
color: var(--paper);
}
.rjdv-hero__scrollhint[data-mode="up"] .rjdv-hero__scrollhint-track {
background: color-mix(in srgb, var(--paper) 28%, transparent);
}
.rjdv-hero__scrollhint[data-mode="up"]:hover .rjdv-hero__scrollhint-track,
.rjdv-hero__scrollhint[data-mode="up"]:focus-visible .rjdv-hero__scrollhint-track {
background: color-mix(in srgb, var(--paper) 55%, transparent);
}
.rjdv-hero__scrollhint.is-hidden {
opacity: 0 !important;
pointer-events: none;
transform: translateY(8px);
}
.rjdv-hero__scrollhint-label {
position: relative;
display: inline-block;
min-height: 1em;
}
.rjdv-hero__scrollhint-label > span {
display: inline-block;
white-space: nowrap;
transition: opacity var(--dur-2) var(--ease-out);
}
.rjdv-hero__scrollhint[data-mode="down"] [data-scrollhint-text="up"],
.rjdv-hero__scrollhint[data-mode="up"] [data-scrollhint-text="down"] {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.rjdv-hero__scrollhint-track {
position: relative;
width: 1px;
height: 48px;
background: color-mix(in srgb, var(--ink) 24%, transparent);
overflow: hidden;
transition: background var(--dur-2) var(--ease-out);
}
.rjdv-hero__scrollhint:hover .rjdv-hero__scrollhint-track,
.rjdv-hero__scrollhint:focus-visible .rjdv-hero__scrollhint-track {
background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.rjdv-hero__scrollhint-mark {
position: absolute;
left: -1px;
top: 0;
width: 3px;
height: 10px;
background: var(--lime);
border-radius: 1px;
animation: rjdv-hero-scrollhint-down 2s var(--ease-io) infinite;
}
.rjdv-hero__scrollhint[data-mode="up"] .rjdv-hero__scrollhint-mark {
animation-name: rjdv-hero-scrollhint-up;
}
@keyframes rjdv-hero-scrollhint-down {
0% { transform: translateY(-12px); opacity: 0; }
25% { opacity: 1; }
75% { opacity: 1; }
100% { transform: translateY(50px); opacity: 0; }
}
@keyframes rjdv-hero-scrollhint-up {
0% { transform: translateY(50px); opacity: 0; }
25% { opacity: 1; }
75% { opacity: 1; }
100% { transform: translateY(-12px); opacity: 0; }
}
/* When "up" mode, label sits below the track instead of above, so the eye
reads label → line → scroll upward. */
.rjdv-hero__scrollhint[data-mode="up"] {
flex-direction: column-reverse;
}
@media (max-width: 720px) {
.rjdv-hero__scrollhint { display: none; }
}
html[data-a11y-motion="off"] .rjdv-hero__scrollhint-mark { animation: none; opacity: 0.6; top: 18px; }
/* ---------- 11. Opportunity index -------------------------------------- */
.rjdv-index {
background: var(--paper);
padding-block: clamp(2rem, 3vw + 1rem, 5rem);
}
.rjdv-index__head {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
margin-bottom: var(--s-6);
align-items: end;
}
@media (min-width: 900px) {
.rjdv-index__head {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--s-8);
}
}
.rjdv-index__zone + .rjdv-index__zone { margin-top: var(--s-7); }
.rjdv-zone {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
padding-top: var(--s-6);
border-top: 1px solid var(--hairline-strong);
}
@media (min-width: 900px) {
.rjdv-zone {
grid-template-columns: minmax(260px, 1fr) minmax(0, 2.3fr);
gap: var(--s-7);
}
}
.rjdv-zone__aside { display: flex; flex-direction: column; gap: var(--s-3); position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; }
.rjdv-zone__number {
font-size: clamp(3rem, 2.2rem + 3vw, 5rem);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 0.9;
color: var(--group-accent-solid, var(--riga-blue));
}
.rjdv-zone__name {
font-size: var(--fs-h2);
font-weight: 600;
letter-spacing: var(--tracking-tight);
line-height: 1;
color: var(--ink);
}
.rjdv-zone__helper {
font-size: 0.95rem;
color: color-mix(in srgb, var(--ink) 70%, transparent);
max-width: 30ch;
}
.rjdv-zone__tiles {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
}
@media (min-width: 680px) { .rjdv-zone__tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .rjdv-zone__tiles { grid-template-columns: repeat(2, 1fr); } }
.rjdv-tile {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-4);
padding: clamp(1.25rem, 1vw + 1rem, 1.75rem);
border-radius: var(--r-md);
background: var(--paper-warm);
color: var(--ink);
min-height: 260px;
overflow: hidden;
isolation: isolate;
transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
border: 1px solid transparent;
}
.rjdv-tile::after {
content: "";
position: absolute;
inset: auto -30% -40% auto;
width: 140%;
padding-bottom: 140%;
background: radial-gradient(circle at 70% 70%, var(--group-accent-solid, var(--riga-blue)) 0%, transparent 55%);
opacity: 0;
z-index: -1;
transition: opacity var(--dur-3) var(--ease-out);
}
.rjdv-tile:hover {
background: var(--group-surface, var(--night-blue));
color: var(--group-ink, var(--lime));
transform: translateY(-4px);
}
.rjdv-tile:hover::after { opacity: 0.18; }
.rjdv-tile__icon {
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--paper);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
.rjdv-tile__icon .rjdv-icon { width: 1.5rem; height: 1.5rem; }
.rjdv-tile:hover .rjdv-tile__icon {
background: var(--group-accent-solid, var(--riga-blue));
color: var(--group-surface, var(--night-blue));
}
.rjdv-tile__eyebrow {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
opacity: 0.6;
}
.rjdv-tile__title {
font-size: var(--fs-h4);
font-weight: 600;
line-height: 1.15;
letter-spacing: var(--tracking-tight);
margin-top: auto;
text-wrap: balance;
}
.rjdv-tile__lead {
font-size: 0.95rem;
line-height: 1.4;
opacity: 0.82;
max-width: 34ch;
}
.rjdv-tile__arrow {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--ink);
color: var(--paper);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1rem;
transition: transform var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out);
}
.rjdv-tile__arrow .rjdv-icon { width: 1rem; height: 1rem; }
.rjdv-tile:hover .rjdv-tile__arrow { transform: translateX(6px); background: var(--group-accent-solid); color: var(--group-surface); }
/* ---------- 12. Map feature block -------------------------------------- */
.rjdv-map-feature {
padding-block: clamp(3rem, 4vw + 2rem, 7rem);
background: var(--night-blue);
color: var(--paper);
position: relative;
overflow: hidden;
}
.rjdv-map-feature__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
align-items: center;
}
@media (min-width: 960px) {
.rjdv-map-feature__grid {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: var(--s-8);
}
}
.rjdv-map-feature h2 { color: var(--lime); }
.rjdv-map-feature__lead { color: color-mix(in srgb, var(--paper) 82%, transparent); max-width: 38ch; font-size: var(--fs-lead); }
.rjdv-map-feature__stats { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-5); }
.rjdv-map-feature__stat {
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.06);
border-radius: var(--r-md);
min-width: 150px;
}
.rjdv-map-feature__stat b {
display: block;
font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
font-weight: 600;
color: var(--lime);
letter-spacing: var(--tracking-tight);
}
.rjdv-map-feature__stat span {
font-size: 0.85rem;
color: color-mix(in srgb, var(--paper) 72%, transparent);
}
.rjdv-map-feature__canvas {
aspect-ratio: 5 / 4;
border-radius: var(--r-lg);
overflow: hidden;
background: #0B1538;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.16);
}
.rjdv-map {
width: 100%;
height: 100%;
filter: saturate(85%) contrast(105%);
}
.rjdv-map .leaflet-container { background: transparent; }
.rjdv-map-feature__overlay {
position: absolute;
inset: auto auto 0.75rem 0.75rem;
display: inline-flex;
gap: 0.5rem;
align-items: center;
max-width: calc(100% - 1.5rem);
background: rgba(0, 11, 64, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: var(--r-pill);
padding: 0.45rem 0.85rem;
color: var(--paper);
font-size: 0.78rem;
line-height: 1.35;
letter-spacing: 0.01em;
pointer-events: none;
}
.rjdv-map-feature__overlay b { color: var(--lime); }
.rjdv-map-feature__overlay svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* ---------- Map pins + popup (shared by teaser and fullscreen) -------- */
.rjdv-pin-wrap { background: transparent !important; border: 0 !important; }
.rjdv-pin {
--pin-accent: var(--lime);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--pin-accent);
color: var(--pine-green);
box-shadow: 0 6px 18px rgba(0, 11, 64, 0.35), inset 0 0 0 2px rgba(0, 11, 64, 0.92);
transition: transform 0.15s ease;
}
.rjdv-pin::after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
width: 10px;
height: 10px;
background: var(--pin-accent);
box-shadow: inset 0 0 0 2px rgba(0, 11, 64, 0.92);
transform: translateX(-50%) rotate(45deg);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.rjdv-pin-wrap:hover .rjdv-pin { transform: translateY(-2px); }
.rjdv-pin__glyph { display: inline-flex; width: 18px; height: 18px; }
.rjdv-pin__glyph svg { width: 100%; height: 100%; }
.leaflet-popup.rjdv-popup-frame .leaflet-popup-content-wrapper {
background: var(--paper);
color: var(--ink);
border-radius: var(--r-lg);
box-shadow: 0 22px 60px rgba(0, 11, 64, 0.3);
padding: 0;
overflow: hidden;
}
.leaflet-popup.rjdv-popup-frame .leaflet-popup-content {
margin: 0;
width: min(300px, calc(100vw - 3rem)) !important;
line-height: 1.45;
}
.leaflet-popup.rjdv-popup-frame .leaflet-popup-tip { background: var(--paper); }
.leaflet-popup.rjdv-popup-frame a.leaflet-popup-close-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
background: rgba(0, 11, 64, 0.82);
color: var(--paper);
font-size: 1rem;
line-height: 1;
z-index: 2;
transition: background 0.15s ease, color 0.15s ease;
}
.leaflet-popup.rjdv-popup-frame a.leaflet-popup-close-button:hover {
background: var(--lime);
color: var(--pine-green);
}
.rjdv-popup { display: flex; flex-direction: column; }
.rjdv-popup__photo {
margin: 0;
aspect-ratio: 16 / 9;
background: var(--paper-dim);
overflow: hidden;
}
.rjdv-popup__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rjdv-popup__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.rjdv-popup__eyebrow {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.rjdv-popup__title {
font-family: var(--font-display);
font-size: 1.1rem;
line-height: 1.2;
margin: 0;
color: var(--ink);
}
.rjdv-popup__lead { font-size: 0.88rem; color: color-mix(in srgb, var(--ink) 78%, transparent); margin: 0; }
.rjdv-popup__meta { font-size: 0.78rem; color: color-mix(in srgb, var(--ink) 55%, transparent); margin: 0; }
.rjdv-popup__cta {
align-self: flex-start;
margin-top: 0.3rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.95rem;
border-radius: var(--r-pill);
background: var(--night-blue);
color: var(--lime);
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.rjdv-popup__cta:hover { background: var(--lime); color: var(--pine-green); }
/* ---------- /karte/ fullscreen page ---------------------------------- */
.rjdv-karte {
display: flex;
flex-direction: column;
min-height: calc(100vh - 80px);
background: var(--night-blue);
color: var(--paper);
}
.rjdv-karte__head {
padding-block: clamp(0.8rem, 0.5vw + 0.6rem, 1.8rem);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rjdv-karte__head-row {
display: flex;
justify-content: space-between;
gap: var(--s-3);
align-items: center;
flex-wrap: nowrap;
}
.rjdv-karte__intro { min-width: 0; }
.rjdv-karte__title {
font-family: var(--font-display);
font-size: clamp(1.1rem, 0.9rem + 0.8vw, 2rem);
line-height: 1.15;
max-width: 28ch;
color: var(--paper);
margin: 0;
}
@media (max-width: 720px) {
.rjdv-karte__title { display: none; }
.rjdv-karte__close-label { display: none; }
.rjdv-karte__close {
padding: 0;
gap: 0;
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
justify-content: center;
}
.rjdv-karte__close .rjdv-icon { width: 1.4rem; height: 1.4rem; }
}
.rjdv-karte__head .rjdv-eyebrow { color: var(--lime); }
.rjdv-karte__head .rjdv-btn--ghost {
color: var(--paper);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
flex-shrink: 0;
}
.rjdv-karte__head .rjdv-btn--ghost:hover { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--paper); }
.rjdv-karte__shell {
flex: 1;
display: flex;
min-height: 560px;
}
.rjdv-karte__canvas {
position: relative;
flex: 1;
min-height: 70vh;
background: #0B1538;
}
.rjdv-map--full { position: absolute; inset: 0; width: 100%; height: 100%; }
.rjdv-karte__panel {
position: absolute;
z-index: 500;
top: 50%;
left: 1rem;
transform: translateY(-50%);
width: min(340px, calc(100% - 2rem));
max-height: calc(100% - 2rem);
display: flex;
flex-direction: column;
background: color-mix(in srgb, var(--night-blue) 92%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--r-lg);
box-shadow: 0 18px 50px rgba(0, 11, 64, 0.35);
border: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.rjdv-karte__panel .rjdv-map-filters {
padding: 0.9rem 1rem 1rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.rjdv-map-filters__section { display: flex; flex-direction: column; gap: 0.6rem; }
.rjdv-map-filters__section + .rjdv-map-filters__section {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 0.9rem;
}
.rjdv-karte__panel-toggle {
display: none;
position: relative;
align-items: center;
gap: 0.6rem;
padding: 1rem 1rem 0.9rem;
background: transparent;
border: 0;
color: var(--paper);
font: inherit;
font-weight: 600;
cursor: pointer;
text-align: left;
width: 100%;
}
.rjdv-karte__panel-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.rjdv-karte__panel-label { flex: 1; }
.rjdv-karte__panel-meta {
font-size: 0.78rem;
font-weight: 500;
color: color-mix(in srgb, var(--paper) 60%, transparent);
font-variant-numeric: tabular-nums;
}
.rjdv-karte__panel-handle {
position: absolute;
top: 0.4rem;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.28);
}
/* Mobile: bottom sheet overlaying the map. */
@media (max-width: 720px) {
.rjdv-karte__panel {
top: auto;
left: 0;
right: 0;
bottom: 0;
transform: none;
width: auto;
max-width: none;
max-height: 65vh;
border-radius: 18px 18px 0 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45);
}
.rjdv-karte__panel-toggle { display: inline-flex; }
.rjdv-karte__panel[data-karte-panel="closed"] .rjdv-map-filters { display: none; }
.rjdv-karte__panel[data-karte-panel="closed"] { max-height: none; }
.rjdv-karte__panel[data-karte-panel="open"] .rjdv-map-filters { max-height: calc(65vh - 56px); }
.rjdv-karte__panel[data-karte-panel="open"] .rjdv-map-filters__checklist { max-height: 200px; }
/* Scrim — dims the map behind the open sheet, dismisses on tap. */
.rjdv-karte__canvas::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 400;
}
.rjdv-karte__canvas:has(.rjdv-karte__panel[data-karte-panel="open"])::before {
opacity: 1;
pointer-events: auto;
}
}
@media (min-width: 721px) {
.rjdv-karte__panel-handle { display: none; }
}
/* ---------- Filter chips --------------------------------------------- */
.rjdv-map-filters { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.rjdv-map-filters__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rjdv-map-filters__title {
font-family: var(--font-display);
font-size: 1rem;
color: var(--paper);
margin: 0;
}
.rjdv-map-filters__bulk {
font-size: 0.78rem;
color: color-mix(in srgb, var(--paper) 55%, transparent);
display: inline-flex;
gap: 0.4rem;
align-items: center;
}
.rjdv-map-filters__bulkbtn {
background: none;
border: 0;
padding: 0;
color: var(--lime);
font: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.rjdv-map-filters__bulkbtn:hover { color: var(--paper); }
.rjdv-map-filters__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.rjdv-chip {
--chip-accent: var(--lime);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0.8rem;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.04);
color: color-mix(in srgb, var(--paper) 75%, transparent);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.rjdv-chip:hover { background: rgba(255, 255, 255, 0.08); color: var(--paper); }
.rjdv-chip input { position: absolute; opacity: 0; pointer-events: none; }
.rjdv-chip__icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--chip-accent) 22%, transparent);
color: var(--chip-accent);
}
.rjdv-chip__icon svg { width: 16px; height: 16px; }
.rjdv-chip__label { font-size: 0.92rem; line-height: 1.2; }
.rjdv-chip__count {
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
padding: 0.1rem 0.45rem;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.08);
color: color-mix(in srgb, var(--paper) 70%, transparent);
}
.rjdv-chip:has(input:checked) {
background: var(--chip-accent);
color: var(--pine-green);
box-shadow: inset 0 0 0 1px var(--chip-accent);
}
.rjdv-chip:has(input:checked) .rjdv-chip__icon { background: rgba(13, 59, 44, 0.14); color: var(--pine-green); }
.rjdv-chip:has(input:checked) .rjdv-chip__count { background: rgba(13, 59, 44, 0.18); color: var(--pine-green); }
.rjdv-chip:focus-within { outline: 2px solid var(--lime); outline-offset: 2px; }
/* ---------- Apkaime disclosure + search + checklist ------------------ */
.rjdv-u-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.rjdv-map-filters__details { margin: 0; }
.rjdv-map-filters__summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rjdv-map-filters__summary::-webkit-details-marker { display: none; }
.rjdv-map-filters__summary::after {
content: "+";
color: var(--lime);
font-size: 1.1rem;
line-height: 1;
}
.rjdv-map-filters__details[open] .rjdv-map-filters__summary::after { content: "−"; }
.rjdv-map-filters__summary-meta {
font-size: 0.78rem;
color: color-mix(in srgb, var(--paper) 60%, transparent);
font-variant-numeric: tabular-nums;
}
.rjdv-map-filters__controls {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin: 0.6rem 0 0.5rem;
}
.rjdv-map-filters__search input {
width: 100%;
padding: 0.55rem 0.8rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--r-pill);
color: var(--paper);
font: inherit;
font-size: 0.85rem;
}
.rjdv-map-filters__search input::placeholder { color: color-mix(in srgb, var(--paper) 50%, transparent); }
.rjdv-map-filters__search input:focus {
outline: 2px solid var(--lime);
outline-offset: 2px;
}
.rjdv-map-filters__checklist {
list-style: none;
margin: 0;
padding: 0;
max-height: 260px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.rjdv-map-filters__checklist li.is-empty { opacity: 0.45; }
.rjdv-check {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.55rem;
align-items: center;
padding: 0.4rem 0.55rem;
border-radius: 0.5rem;
cursor: pointer;
color: color-mix(in srgb, var(--paper) 78%, transparent);
font-size: 0.85rem;
transition: background 0.12s ease, color 0.12s ease;
}
.rjdv-check:hover { background: rgba(255, 255, 255, 0.05); color: var(--paper); }
.rjdv-check input[type="checkbox"] {
appearance: none;
width: 14px; height: 14px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.32);
background: transparent;
display: grid; place-items: center;
cursor: pointer;
}
.rjdv-check input[type="checkbox"]:checked {
background: var(--lime);
border-color: var(--lime);
}
.rjdv-check input[type="checkbox"]:checked::after {
content: "";
width: 8px; height: 8px;
background: var(--pine-green);
clip-path: polygon(14% 44%, 0 60%, 38% 100%, 100% 22%, 86% 7%, 38% 71%);
}
.rjdv-check__label { line-height: 1.2; }
.rjdv-check__count {
font-size: 0.72rem;
color: color-mix(in srgb, var(--paper) 55%, transparent);
font-variant-numeric: tabular-nums;
}
/* ---------- 13. News / EU / Footer ------------------------------------ */
.rjdv-news {
padding-block: clamp(3rem, 4vw + 2rem, 6rem);
background: var(--paper);
}
.rjdv-news__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
}
@media (min-width: 820px) { .rjdv-news__grid { grid-template-columns: repeat(3, 1fr); } }
.rjdv-news__item {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding-top: var(--s-4);
border-top: 1px solid var(--hairline-strong);
}
.rjdv-news__date {
font-size: 0.85rem;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 60%, transparent);
}
.rjdv-news__title {
font-size: var(--fs-h4);
font-weight: 600;
line-height: 1.2;
letter-spacing: var(--tracking-tight);
color: var(--ink);
text-wrap: balance;
}
.rjdv-news__excerpt { color: color-mix(in srgb, var(--ink) 75%, transparent); font-size: 1rem; max-width: 32ch; }
.rjdv-news__item a:hover .rjdv-news__title { color: var(--riga-blue); }
.rjdv-eu {
background: var(--pine-green);
color: var(--lime);
padding-block: clamp(3rem, 4vw + 2rem, 6rem);
}
.rjdv-eu__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
align-items: start;
}
@media (min-width: 900px) {
.rjdv-eu__grid { grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2fr); gap: var(--s-8); }
}
.rjdv-eu__title { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking-tight); }
.rjdv-eu__body { color: color-mix(in srgb, var(--lime) 82%, transparent); max-width: 62ch; }
.rjdv-eu__plate {
background: color-mix(in srgb, var(--lime) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--lime) 36%, transparent);
border-radius: var(--r-sm);
padding: clamp(1rem, 1vw + 0.75rem, 1.5rem);
display: flex;
flex-direction: column;
gap: 0.5rem;
min-height: 180px;
justify-content: space-between;
color: var(--lime);
position: relative;
}
.rjdv-eu__plate::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px dashed color-mix(in srgb, var(--lime) 40%, transparent);
border-radius: 2px;
pointer-events: none;
}
.rjdv-eu__plate-eyebrow,
.rjdv-eu__plate-index {
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: color-mix(in srgb, var(--lime) 80%, transparent);
font-variant-numeric: tabular-nums;
position: relative;
z-index: 1;
}
.rjdv-eu__plate-label {
font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.5rem);
font-weight: 600;
line-height: 1.15;
letter-spacing: var(--tracking-tight);
color: var(--lime);
position: relative;
z-index: 1;
}
.rjdv-eu__eyebrow { color: color-mix(in srgb, var(--lime) 70%, transparent); }
.rjdv-footer {
background: var(--ink);
color: var(--paper);
padding-block: var(--s-7);
}
.rjdv-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
}
@media (min-width: 720px) {
.rjdv-footer__grid {
grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
gap: var(--s-6);
}
}
.rjdv-footer__lockup { display: flex; flex-direction: column; gap: var(--s-4); max-width: 360px; color: var(--paper); }
.rjdv-footer__lockup svg { width: 100%; max-width: 320px; height: auto; }
.rjdv-footer__col h4 {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
font-weight: 600;
color: color-mix(in srgb, var(--paper) 65%, transparent);
margin-bottom: var(--s-4);
}
.rjdv-footer__col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.rjdv-footer__col a { color: var(--paper); opacity: 0.9; }
.rjdv-footer__col a:hover { color: var(--lime); opacity: 1; }
.rjdv-footer__ext {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.rjdv-footer__ext .rjdv-icon {
width: 0.95em;
height: 0.95em;
opacity: 0.7;
transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.rjdv-footer__ext:hover .rjdv-icon { opacity: 1; transform: translate(1px, -1px); }
.rjdv-footer__col ul.rjdv-footer__social {
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
}
.rjdv-footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
color: var(--paper);
opacity: 0.85;
transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.rjdv-footer__social-link .rjdv-icon {
width: 1.15rem;
height: 1.15rem;
}
.rjdv-footer__social-link:hover,
.rjdv-footer__social-link:focus-visible {
color: var(--lime);
border-color: var(--lime);
background: color-mix(in srgb, var(--lime) 10%, transparent);
opacity: 1;
transform: translateY(-1px);
}
.rjdv-footer__legal {
margin-top: var(--s-7);
padding-top: var(--s-5);
border-top: 1px solid rgba(255, 255, 255, 0.18);
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: color-mix(in srgb, var(--paper) 60%, transparent);
}
.rjdv-footer__menu { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.rjdv-footer__menu a { opacity: 0.8; }
.rjdv-footer__menu a:hover { opacity: 1; color: var(--lime); }
.rjdv-footer__insignia { display: inline-flex; align-items: center; gap: 0.5rem; color: color-mix(in srgb, var(--paper) 62%, transparent); }
.rjdv-footer__copy { display: inline-flex; align-items: center; gap: 0.65rem; }
.rjdv-footer__mark { width: 1.5rem; height: 1.5rem; display: inline-flex; flex: none; color: inherit; }
.rjdv-footer__mark svg { width: 100%; height: 100%; }
/* ---------- 14. Generic page shell ------------------------------------ */
.rjdv-page-hero {
padding-block: clamp(3rem, 5vw + 2rem, 7rem) clamp(2rem, 4vw + 1rem, 5rem);
background: var(--paper-warm);
}
.rjdv-page-hero__eyebrow { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.rjdv-page-hero__title { font-size: var(--fs-h1); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 0.95; color: var(--ink); margin-top: var(--s-3); max-width: 20ch; }
.rjdv-page-hero__lead { margin-top: var(--s-4); max-width: 50ch; font-size: var(--fs-lead); }
.rjdv-breadcrumbs { padding: var(--s-3) 0; font-size: 0.9rem; color: color-mix(in srgb, var(--ink) 60%, transparent); }
.rjdv-breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rjdv-breadcrumbs__item + .rjdv-breadcrumbs__item::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.rjdv-breadcrumbs a { opacity: 0.85; }
.rjdv-breadcrumbs a:hover { color: var(--riga-blue); opacity: 1; }
.rjdv-post { padding-block: var(--s-7); }
.rjdv-post__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: 0.9rem; color: color-mix(in srgb, var(--ink) 60%, transparent); margin-bottom: var(--s-4); }
.rjdv-post__thumb { margin-bottom: var(--s-5); border-radius: var(--r-md); overflow: hidden; }
.rjdv-post__body { max-width: var(--prose); }
/* ---------- 14b. Single article (long-form) --------------------------- */
.rjdv-u-hidden { display: none !important; }
.rjdv-reading-progress {
position: fixed;
inset: 0 0 auto 0;
height: 3px;
background: color-mix(in srgb, var(--ink) 8%, transparent);
z-index: 90;
pointer-events: none;
}
.rjdv-reading-progress span {
display: block;
height: 100%;
width: 100%;
transform-origin: 0 50%;
transform: scaleX(0);
background: var(--lime);
transition: transform 120ms linear;
}
.rjdv-article { color: var(--ink); }
.rjdv-article__hero {
padding-block: clamp(2.5rem, 4vw + 1.5rem, 5rem) clamp(1.5rem, 2vw + 1rem, 2.5rem);
}
.rjdv-article__eyebrow { color: var(--riga-blue); }
.rjdv-article__title {
font-family: var(--font-display);
font-size: clamp(2rem, 3.2vw + 1rem, 3.8rem);
line-height: 1.05;
letter-spacing: -0.015em;
margin-top: 0.75rem;
max-width: 22ch;
}
.rjdv-article__lead {
font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.35rem);
line-height: 1.5;
color: color-mix(in srgb, var(--ink) 72%, transparent);
margin-top: 1.25rem;
max-width: 58ch;
}
.rjdv-article__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin-top: 1.5rem;
font-size: 0.9rem;
color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.rjdv-article__meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.rjdv-article__meta-item .rjdv-icon { width: 1rem; height: 1rem; color: var(--riga-blue); }
.rjdv-article__thumb {
margin: 0;
padding-bottom: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}
.rjdv-article__thumb .rjdv-container { padding-block: 0; }
.rjdv-article__thumb img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: var(--r-lg);
display: block;
}
.rjdv-article__thumb figcaption {
margin-top: 0.75rem;
font-size: 0.875rem;
color: color-mix(in srgb, var(--ink) 58%, transparent);
max-width: var(--prose);
}
.rjdv-article__shell { padding-block: clamp(1.5rem, 3vw + 1rem, 3.5rem) var(--s-7); }
.rjdv-article__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 960px) {
.rjdv-article__grid {
grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
}
}
/* TOC aside */
.rjdv-article__aside { order: -1; }
@media (min-width: 960px) { .rjdv-article__aside { order: 0; } }
.rjdv-toc {
position: sticky;
top: clamp(1.5rem, 5vw, 5rem);
padding: 1.25rem 1.25rem 1rem;
border-radius: var(--r-md);
background: var(--paper-warm);
border: 1px solid var(--hairline);
font-size: 0.9rem;
}
.rjdv-toc__title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 65%, transparent);
margin: 0 0 0.75rem;
}
.rjdv-toc__title .rjdv-icon { width: 1rem; height: 1rem; color: var(--riga-blue); }
.rjdv-toc__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
counter-reset: toc;
}
.rjdv-toc__list a {
display: flex;
gap: 0.6rem;
padding: 0.45rem 0;
color: color-mix(in srgb, var(--ink) 78%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
line-height: 1.35;
counter-increment: toc;
transition: color 180ms var(--ease-out);
}
.rjdv-toc__list li:last-child a { border-bottom: 0; }
.rjdv-toc__list a::before {
content: counter(toc, decimal-leading-zero);
font-feature-settings: "tnum";
color: color-mix(in srgb, var(--ink) 45%, transparent);
flex: none;
min-width: 1.75rem;
}
.rjdv-toc__list a:hover,
.rjdv-toc__list a.is-active {
color: var(--ink);
}
.rjdv-toc__list a.is-active { box-shadow: inset 3px 0 0 var(--lime); padding-left: 0.5rem; }
/* Main column */
.rjdv-article__main { min-width: 0; }
/* Toolbar */
.rjdv-article__toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem;
margin-bottom: var(--s-5);
border-radius: var(--r-pill);
background: var(--paper-warm);
border: 1px solid var(--hairline);
width: fit-content;
max-width: 100%;
}
.rjdv-tool {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.95rem 0.5rem 0.6rem;
border-radius: var(--r-pill);
background: transparent;
color: var(--ink);
font-weight: 600;
font-size: 0.9rem;
min-height: 44px;
transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.rjdv-tool__icon {
width: 1.75rem;
height: 1.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--paper);
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--hairline);
}
.rjdv-tool__icon .rjdv-icon { width: 1rem; height: 1rem; }
.rjdv-tool:hover { background: var(--ink); color: var(--paper); }
.rjdv-tool:hover .rjdv-tool__icon { background: var(--lime); color: var(--pine-green); box-shadow: none; }
.rjdv-tool--primary { background: var(--ink); color: var(--paper); }
.rjdv-tool--primary .rjdv-tool__icon { background: var(--lime); color: var(--pine-green); box-shadow: none; }
.rjdv-tool--primary:hover { background: var(--riga-blue); color: var(--paper); }
.rjdv-tool[aria-pressed="true"] .rjdv-tool__icon { background: var(--lime); color: var(--pine-green); }
@media (max-width: 640px) {
.rjdv-tool__label { display: none; }
.rjdv-tool { padding: 0.25rem; gap: 0; }
}
/* Prose typography — rich bodies (h2/h3/h4, p, lists, blockquote, table,
figure, gallery, embed, code) */
.rjdv-prose {
max-width: var(--prose);
font-size: 1.05rem;
line-height: 1.7;
color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.rjdv-prose > * + * { margin-top: 1.1em; }
.rjdv-prose h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
line-height: 1.2;
margin-top: 2.5em;
margin-bottom: 0.5em;
color: var(--ink);
scroll-margin-top: clamp(4rem, 8vw, 7rem);
}
.rjdv-prose h2::before {
content: "";
display: block;
width: 2rem;
height: 3px;
background: var(--lime);
margin-bottom: 0.75rem;
border-radius: 2px;
}
.rjdv-prose h3 {
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1.3;
margin-top: 2em;
margin-bottom: 0.35em;
color: var(--ink);
}
.rjdv-prose h4 {
font-weight: 700;
font-size: 1.1rem;
margin-top: 1.75em;
margin-bottom: 0.25em;
color: var(--ink);
}
.rjdv-prose p, .rjdv-prose li { max-width: var(--prose); }
.rjdv-prose a {
color: var(--riga-blue);
border-bottom: 1px solid color-mix(in srgb, var(--riga-blue) 35%, transparent);
transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.rjdv-prose a:hover { color: var(--ink); border-bottom-color: var(--lime); }
.rjdv-prose strong { font-weight: 700; color: var(--ink); }
.rjdv-prose em { font-style: italic; }
.rjdv-prose ul, .rjdv-prose ol { padding-left: 1.5rem; }
.rjdv-prose ul { list-style: none; }
.rjdv-prose ul > li { position: relative; padding-left: 0.25rem; }
.rjdv-prose ul > li::before {
content: "";
position: absolute;
left: -1.1rem; top: 0.65em;
width: 0.45rem; height: 0.45rem;
background: var(--lime);
border-radius: 50%;
}
.rjdv-prose ol { list-style: decimal; }
.rjdv-prose ol > li::marker { color: var(--riga-blue); font-weight: 700; }
.rjdv-prose li + li { margin-top: 0.4em; }
.rjdv-prose blockquote {
margin: 2em 0;
padding: 1.5rem 1.75rem;
border-left: 4px solid var(--lime);
background: var(--paper-warm);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 1.4;
color: var(--ink);
}
.rjdv-prose blockquote p { max-width: none; }
.rjdv-prose blockquote cite {
display: block;
margin-top: 0.75rem;
font-family: var(--font-body);
font-style: normal;
font-size: 0.9rem;
font-weight: 600;
color: color-mix(in srgb, var(--ink) 60%, transparent);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.rjdv-prose figure { margin: 2em 0; }
.rjdv-prose figure img,
.rjdv-prose > img {
width: 100%;
height: auto;
border-radius: var(--r-md);
display: block;
}
.rjdv-prose figcaption,
.rjdv-prose .wp-caption-text {
margin-top: 0.75rem;
font-size: 0.875rem;
color: color-mix(in srgb, var(--ink) 58%, transparent);
padding-left: 1rem;
border-left: 2px solid var(--lime);
}
.rjdv-prose .wp-block-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 2em 0;
}
.rjdv-prose .wp-block-gallery li::before { display: none; }
.rjdv-prose .wp-block-gallery figure { margin: 0; }
.rjdv-prose .wp-block-gallery img { aspect-ratio: 4/3; object-fit: cover; }
.rjdv-prose table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
font-size: 0.95rem;
border: 1px solid var(--hairline);
border-radius: var(--r-md);
overflow: hidden;
}
.rjdv-prose table thead { background: var(--ink); color: var(--paper); }
.rjdv-prose th, .rjdv-prose td {
padding: 0.85rem 1rem;
text-align: left;
border-bottom: 1px solid var(--hairline);
}
.rjdv-prose tbody tr:nth-child(even) { background: var(--paper-warm); }
.rjdv-prose tbody tr:last-child td { border-bottom: 0; }
.rjdv-prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
padding: 0.12em 0.4em;
background: var(--paper-warm);
border: 1px solid var(--hairline);
border-radius: 6px;
}
.rjdv-prose pre {
margin: 2em 0;
padding: 1.25rem 1.5rem;
background: var(--ink);
color: var(--paper);
border-radius: var(--r-md);
overflow-x: auto;
font-size: 0.9rem;
line-height: 1.55;
}
.rjdv-prose pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.rjdv-prose hr {
border: 0;
height: 1px;
background: var(--hairline);
margin: 3em auto;
max-width: 6rem;
}
.rjdv-prose .wp-block-embed,
.rjdv-prose iframe {
margin: 2em 0;
border-radius: var(--r-md);
overflow: hidden;
max-width: 100%;
}
.rjdv-prose .wp-block-embed__wrapper { position: relative; }
.rjdv-prose .wp-block-pullquote {
margin: 2.5em 0;
padding: 0;
border-block: 2px solid var(--ink);
text-align: center;
}
.rjdv-prose .wp-block-pullquote p {
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
line-height: 1.25;
padding: 1.5rem 0;
color: var(--ink);
max-width: none;
}
.rjdv-prose .is-speaking { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 60%, transparent); border-radius: var(--r-md); transition: box-shadow 200ms var(--ease-out); }
.rjdv-article__body.is-speaking { outline: 3px solid var(--lime); outline-offset: 12px; border-radius: var(--r-md); }
/* Resource map block */
.rjdv-article__resource-map {
margin-top: 2rem;
height: 340px;
border-radius: var(--r-md);
overflow: hidden;
border: 1px solid var(--hairline);
}
.rjdv-article__resource-map .rjdv-map { height: 100%; width: 100%; }
.rjdv-article__resource-address { margin-top: 1rem; font-size: 0.95rem; }
/* Foot: tags + back */
.rjdv-article__foot {
margin-top: var(--s-6);
padding-top: var(--s-5);
border-top: 1px solid var(--hairline);
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
justify-content: space-between;
align-items: center;
}
.rjdv-article__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.rjdv-article__tags a {
display: inline-flex;
padding: 0.3rem 0.75rem;
border-radius: var(--r-pill);
background: var(--paper-warm);
border: 1px solid var(--hairline);
font-size: 0.85rem;
font-weight: 600;
color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.rjdv-article__tags a:hover { background: var(--lime); color: var(--pine-green); border-color: transparent; }
.rjdv-article__back {
display: inline-flex; align-items: center; gap: 0.5rem;
font-weight: 600;
color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.rjdv-article__back .rjdv-icon { transform: rotate(180deg); width: 1.1rem; height: 1.1rem; }
.rjdv-article__back:hover { color: var(--ink); }
/* Related articles */
.rjdv-related {
padding-block: var(--s-7);
background: var(--paper-warm);
border-top: 1px solid var(--hairline);
}
.rjdv-related__head {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2rem;
align-items: baseline;
margin-bottom: var(--s-5);
}
.rjdv-related__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--s-4);
list-style: none;
padding: 0;
margin: 0;
}
.rjdv-related__card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
overflow: hidden;
color: var(--ink);
transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.rjdv-related__card:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px -24px rgba(0, 11, 64, 0.35);
border-color: var(--ink);
}
.rjdv-related__thumb {
aspect-ratio: 16/10;
overflow: hidden;
background: var(--night-blue);
}
.rjdv-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rjdv-related__thumb--fallback {
display: flex; align-items: center; justify-content: center;
color: var(--lime);
}
.rjdv-related__thumb--fallback .rjdv-symbol { width: 72px; height: 72px; opacity: 0.75; }
.rjdv-related__body {
padding: var(--s-3) var(--s-4) var(--s-4);
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.rjdv-related__date {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.rjdv-related__title {
font-family: var(--font-display);
font-size: 1.2rem;
line-height: 1.25;
margin: 0;
}
.rjdv-related__lead {
font-size: 0.95rem;
line-height: 1.5;
color: color-mix(in srgb, var(--ink) 70%, transparent);
margin: 0;
}
.rjdv-related__arrow { margin-top: auto; color: var(--riga-blue); }
.rjdv-related__arrow .rjdv-icon { width: 1.1rem; height: 1.1rem; transition: transform 200ms var(--ease-out); }
.rjdv-related__card:hover .rjdv-related__arrow .rjdv-icon { transform: translateX(4px); }
/* ---------- 15. Reveal-on-scroll -------------------------------------- */
/* Progressive enhancement: if JS is slow/blocked, content renders fully.
The rjdv-js class is added to synchronously in main.js, so the
hidden state is only applied once we know the reveal observer will run. */
.rjdv-js [data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
will-change: opacity, transform;
}
.rjdv-js [data-reveal].is-in {
opacity: 1;
transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 60ms; }
[data-reveal-delay="2"] { transition-delay: 120ms; }
[data-reveal-delay="3"] { transition-delay: 180ms; }
[data-reveal-delay="4"] { transition-delay: 240ms; }
[data-reveal-delay="5"] { transition-delay: 300ms; }
/* ---------- 16. Prefers reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {
html:focus-within { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.rjdv-loader { transition: none; }
}
/* Manual toggle via accessibility panel (overrides even when user hasn't set OS preference) */
html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
html[data-a11y-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; }
/* ---------- 17. Print ------------------------------------------------- */
@media print {
.rjdv-header, .rjdv-footer, .rjdv-panel, .rjdv-loader, .rjdv-a11y, .rjdv-hero__figure { display: none !important; }
body { background: #fff; color: #000; font-size: 12pt; }
a { color: #000; text-decoration: underline; }
.rjdv-hero__title { font-size: 28pt; }
}