/* ========================================================================== Jurijs Gončarovs — personal site Aesthetic: warm paper, roasted-coffee ink, editorial restraint. ========================================================================== */ /* ------------------------------------------------------------------ TOKENS */ :root { --paper: #F4F0E7; --paper-warm: #EDE7DA; /* the tinted band */ --paper-deep: #E4DCCB; --ink: #17130F; --ink-soft: #453C33; --ink-mute: #736858; /* was #8A7E6E — darkened to clear 4.5:1 on cream */ --rule: rgba(23, 19, 15, 0.13); --rule-soft: rgba(23, 19, 15, 0.07); --accent: #7A2231; /* burgundy — the one accent, used sparingly */ --accent-dk: #5E1926; /* pressed / hover on paper */ --accent-mid: #9B2C3E; /* the language chip on the dark band */ --accent-lt: #CB6B7C; /* burgundy lifted for the dark ground */ --accent-pale:#EFC3CB; /* quote marks + numerals on the band */ --band: #3B2126; /* deep wine-brown band */ --display: "Playfair Display", "Iowan Old Style", Georgia, serif; --sans: "Commissioner", "Helvetica Neue", Helvetica, sans-serif; --gut: clamp(1.5rem, 5vw, 4.5rem); --max: 1240px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-flip: cubic-bezier(0.4, 0, 0.2, 1); /* zab.lv motion curve */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* text + image reveals */ --radius-img: 16px; --flip-dur: 0.9s; } /* ------------------------------------------------------------------- RESET */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { list-style: none; padding: 0; } img { display: block; max-width: 100%; height: auto; } button, input, textarea { font: inherit; color: inherit; } a { color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------- BASE */ body { background: var(--paper); color: var(--ink-soft); font-family: var(--sans); font-weight: 300; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.075rem); line-height: 1.72; letter-spacing: 0.004em; -webkit-font-smoothing: antialiased; /* `hidden` here would force overflow-y:auto, turning into a scroll container with nothing to scroll — wheel events then stall at the top and bottom of the page. `clip` prevents sideways scroll without doing that. */ overflow-x: hidden; /* fallback for browsers without `clip` */ overflow-x: clip; } /* paper grain */ body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E"); } ::selection { background: var(--accent); color: var(--paper); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------- TYPE ROLES */ .display { font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: -0.018em; color: var(--ink); } .label { font-family: var(--sans); font-size: 0.688rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-mute); } .lede { font-family: var(--display); font-size: clamp(1.28rem, .95rem + 1.4vw, 1.78rem); line-height: 1.42; font-weight: 400; color: var(--ink); letter-spacing: -0.008em; } /* the greeting carries the hero now, so it is set at headline scale */ .hero-lede { font-size: clamp(2rem, 1.05rem + 3.6vw, 3.85rem); line-height: 1.17; letter-spacing: -0.014em; margin-bottom: 1.6rem; text-wrap: pretty; } /* his role, picked out inside his own sentence */ .js .hero-lede .w.greet { display: block; } .hero-lede .w.em { color: var(--accent); font-style: italic; } /* ------------------------------------------------------------------ HEADER */ .site-head { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-block: clamp(.9rem, 2vw, 1.4rem); transition: background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease); } .site-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--rule-soft); opacity: 0; transition: opacity .45s var(--ease); } .site-head.is-stuck { padding-block: .7rem; } .site-head.is-stuck::after { opacity: 1; } .head-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } .brand { display: inline-flex; align-items: baseline; gap: .3rem; text-decoration: none; line-height: 1; } .brand-mark { font-family: var(--display); font-size: 1.38rem; font-weight: 500; color: var(--ink); letter-spacing: .06em; } .brand-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transform: translateY(-3px); } .head-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); } .head-nav a { font-size: .78rem; letter-spacing: .05em; text-decoration: none; color: var(--ink-soft); position: relative; padding-block: .2rem; transition: color .3s var(--ease); } .head-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right .4s var(--ease); } .head-nav a:hover { color: var(--accent); } .head-nav a:hover::after { right: 0; } @media (max-width: 860px) { .head-nav { display: none; } } /* ------------------------------------------------------- LANGUAGE SWITCHER */ .lang { position: relative; display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: color-mix(in srgb, var(--paper-warm) 70%, transparent); } .lang-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: var(--thumb-w, 46px); transform: translateX(var(--thumb-x, 0px)); background: var(--accent); border-radius: 999px; transition: transform .48s var(--ease), width .48s var(--ease), background-color .4s var(--ease); } .lang button { position: relative; z-index: 1; appearance: none; background: none; border: 0; cursor: pointer; padding: .34rem .72rem; border-radius: 999px; font-size: .69rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); transition: color .34s var(--ease); } .lang button:hover { color: var(--ink); } .lang button[aria-current="true"] { color: var(--paper); } .lang button[aria-current="true"]:hover { color: var(--paper); } /* ══════════════════════════════════════════ HEADER OVER A DARK SECTION ══ Kept next to the header styles on purpose: it used to live at the end of the file and got clipped twice by edits to the tail. ======================================================================= */ .site-head, .site-head .brand-mark, .site-head .head-nav a, .site-head .lang, .site-head .lang button, .site-head .lang-thumb, .site-head .brand-dot { transition: color .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), opacity .4s var(--ease); } .site-head.is-dark::after { opacity: 1; background: color-mix(in srgb, var(--band) 92%, transparent); border-bottom-color: rgba(244, 240, 231, .12); } .site-head.is-dark .brand-mark { color: var(--paper); } .site-head.is-dark .brand-dot { background: var(--accent-pale); } .site-head.is-dark .head-nav a { color: rgba(244, 240, 231, .78); } .site-head.is-dark .head-nav a:hover { color: var(--accent-pale); } .site-head.is-dark .head-nav a::after { background: var(--accent-pale); } .site-head.is-dark .lang { border-color: rgba(244, 240, 231, .26); background: rgba(244, 240, 231, .08); } .site-head.is-dark .lang button { color: rgba(244, 240, 231, .64); } .site-head.is-dark .lang button:hover { color: var(--paper); } .site-head.is-dark .lang-thumb { background: var(--accent); } .site-head.is-dark .lang button[aria-current="true"], .site-head.is-dark .lang button[aria-current="true"]:hover { color: var(--paper); } /* -------------------------------------------------------------------- HERO */ .hero { position: relative; /* Fill the first screen so nothing from the next section peeks above the fold. The content sits near the top rather than centred in the viewport: `align-content: center` stacked on top of the padding and pushed the text ~200px down. The spare height falls below the content instead. (The text column is still centred against the portrait — that is `align-items: center` on .hero-grid, which is a different thing.) */ --hero-pad-t: clamp(7rem, 12vh, 8.5rem); /* min must clear the unstuck header (~83px) */ --hero-pad-b: clamp(2rem, 4vw, 3.5rem); min-height: 100vh; min-height: 100svh; display: grid; align-content: start; padding-top: var(--hero-pad-t); padding-bottom: var(--hero-pad-b); overflow-x: clip; /* the glow below bleeds past the right edge */ } .hero::before { content: ""; position: absolute; z-index: -1; top: -18vh; right: -14vw; width: 62vw; height: 62vw; max-width: 780px; max-height: 780px; background: radial-gradient(circle at 50% 50%, rgba(122, 34, 49, .12), transparent 66%); border-radius: 50%; filter: blur(14px); } .hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.12fr .88fr; } } .hero-eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; } .hero-eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--accent); max-width: 90px; } .hero-sub { max-width: 42ch; color: var(--ink-soft); margin-bottom: 2.4rem; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; } /* portrait */ .hero-figure { position: relative; } /* no heavy mount — an arched portrait held by a single hairline */ .hero-photo { position: relative; z-index: 1; } .hero-window { position: relative; overflow: hidden; border-radius: var(--radius-img); box-shadow: 0 26px 58px -34px rgba(23,19,15,.5); } .hero-window::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: inherit; } .hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 38% 50%; /* keeps him centred in the taller frame */ filter: saturate(.96) contrast(1.02); } /* On desktop the portrait grows with the viewport so the hero content fills the screen it is pinned to. Without this the 100svh hero leaves a few hundred pixels of slack that has to sit either under the nav or above the next section — neither looks deliberate. */ @media (min-width: 900px) { /* The portrait takes exactly the height the hero has spare, and the text column sits at the top beside it. Centring the text against the portrait instead just moved the empty space from below the hero to under the nav. */ .hero-photo img { aspect-ratio: auto; height: clamp(430px, calc(100svh - var(--hero-pad-t) - var(--hero-pad-b)), 820px); } .hero-grid { align-items: start; } } @media (max-width: 899px) { /* The header is shorter on phones (67px vs 83px), so the desktop minimum left a visibly bigger gap under it. Tightened to match optically. */ .hero { --hero-pad-t: clamp(5.3rem, 10vh, 6.5rem); } .hero-figure { max-width: 560px; } } /* ----------------------------------------------------------------- BUTTONS */ .btn { --bg: var(--accent); --fg: var(--paper); position: relative; display: inline-flex; align-items: center; gap: .68rem; padding: .92rem 1.7rem; border: 1px solid var(--bg); border-radius: 999px; background: var(--bg); color: var(--fg); font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-decoration: none; cursor: pointer; overflow: hidden; transition: color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); } .btn::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--paper); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); } .btn > * { position: relative; z-index: 1; } .btn:hover { color: var(--bg); transform: translateY(-2px); } .btn:hover::before { transform: scaleX(1); transform-origin: left; } .btn:active { transform: translateY(0); } .btn[disabled] { opacity: .5; pointer-events: none; } .btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--ink); } .btn--ghost::before { background: var(--ink); } .btn--ghost:hover { color: var(--paper); } .btn svg { width: 17px; height: 17px; flex: none; } .link-quiet { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); font-size: .84rem; letter-spacing: .03em; border-bottom: 1px solid var(--rule); padding-bottom: 3px; transition: border-color .35s var(--ease), color .35s var(--ease); } .link-quiet:hover { color: var(--accent); border-color: var(--accent); } .link-quiet .arw { transition: transform .35s var(--ease); } .link-quiet:hover .arw { transform: translateX(4px); } /* ---------------------------------------------------------------- SECTIONS */ .sect { padding-block: clamp(4rem, 9vw, 8rem); position: relative; } .hero + .sect { padding-top: clamp(2.5rem, 5vw, 4.5rem); } .sect + .sect { border-top: 1px solid var(--rule-soft); } /* alternating surfaces separate one section from the next */ .sect--tint { background: var(--paper-warm); border-top-color: transparent; } .sect--tint + .sect { border-top-color: transparent; } .sect-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.4rem); } .sect-num { font-family: var(--display); font-size: .95rem; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .04em; } .sect-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .two-col { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; } @media (min-width: 880px) { .two-col { grid-template-columns: 1fr 1fr; } } .h2 { font-size: clamp(1.7rem, 1.1rem + 2.35vw, 2.7rem); margin-bottom: 1.6rem; } .prose p + p { margin-top: 1.15rem; } .prose { max-width: 46ch; } /* facts */ .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .fact { background: var(--paper); padding: clamp(1.3rem, 3vw, 2.1rem); } .fact-v { font-family: var(--display); font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.45rem); line-height: 1.08; color: var(--ink); font-weight: 400; margin-bottom: .5rem; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } .fact-l { font-size: .71rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); line-height: 1.5; } /* lists */ .tag-group + .tag-group { margin-top: 2.2rem; } .tag-title { font-size: .69rem; letter-spacing: .19em; text-transform: uppercase; color: var(--ink-mute); padding-bottom: .7rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.1rem; } .tag-list { display: flex; flex-wrap: wrap; gap: .55rem; } .tag-list li { font-size: .82rem; letter-spacing: .02em; color: var(--ink); padding: .45rem 1rem; border: 1px solid var(--rule); border-radius: 999px; background: color-mix(in srgb, var(--paper-warm) 55%, transparent); transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease); } .tag-list li:hover { border-color: var(--accent); color: var(--accent); background: transparent; } /* ------------------------------------------------------------ BALTIC BLOCK */ .baltic { background: var(--band); color: var(--paper-warm); border-top: 0; } .baltic .label { color: rgba(244, 240, 231, .80); } .baltic .sect-num { color: var(--accent-pale); } .baltic .sect-head::after { background: rgba(244,240,231,.16); } .baltic-quote { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, .9rem + 2.1vw, 2.35rem); line-height: 1.36; letter-spacing: -.012em; color: var(--paper); max-width: 42ch; text-wrap: balance; } .baltic-quote em { font-style: italic; color: var(--accent-lt); } .countries { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 4vw, 3.2rem); margin-top: clamp(2.4rem, 5vw, 3.6rem); } .country { display: flex; align-items: baseline; gap: .7rem; } .country-i { font-family: var(--display); font-size: .8rem; color: var(--accent-lt); } .country-n { font-family: var(--display); font-size: clamp(1.2rem, .95rem + 1.15vw, 1.8rem); color: var(--paper); font-weight: 400; } /* -------------------------------------------------------------- CONTACT */ .contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 940px) { .contact-grid { grid-template-columns: .92fr 1.08fr; /* row 1 hugs the contact details; the flexible row below absorbs the form card's height, which otherwise inflates row 1 and pushes the sign-off down */ grid-template-rows: min-content 1fr; align-items: start; row-gap: 1.5rem; } /* On desktop the sign-off sits back under the contact details; on phones it follows the DOM and lands after the form, which is where it belongs. */ .contact-grid > .contact-main { grid-column: 1; grid-row: 1; } .contact-grid > .form-card { grid-column: 2; grid-row: 1 / span 2; } .contact-grid > .signoff { grid-column: 1; grid-row: 2; margin-top: 0; } } .ch-list { margin-top: 2.4rem; } .ch { padding-block: 1.4rem; border-top: 1px solid var(--rule); } .ch:last-child { border-bottom: 1px solid var(--rule); } .ch-l { font-size: .68rem; letter-spacing: .19em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .6rem; } .ch-v { font-family: var(--display); font-size: clamp(1.08rem, .9rem + .9vw, 1.42rem); color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); } a.ch-v:hover { color: var(--accent); border-color: var(--accent); } .ch-note { font-size: .78rem; color: var(--ink-mute); margin-top: .85rem; } .ch .btn { margin-top: .35rem; } .signoff { margin-top: 2.6rem; font-family: var(--sans); font-style: normal; font-weight: 300; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); } /* ------------------------------------------------------------------- FORM */ #contact-form { position: relative; } .form-title { font-family: var(--display); font-size: 1.48rem; color: var(--ink); font-weight: 400; margin-bottom: 1.9rem; } .form-card { background: color-mix(in srgb, var(--paper-warm) 62%, transparent); border: 1px solid var(--rule); padding: clamp(1.5rem, 4vw, 2.9rem); border-radius: 3px; } .field { margin-bottom: 1.55rem; } .field-row { display: grid; gap: 1.55rem; grid-template-columns: 1fr; } @media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } } .field-row .field { margin-bottom: 1.55rem; } .field label { display: flex; align-items: baseline; gap: .5rem; font-size: .69rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .55rem; } .field label .opt { text-transform: none; letter-spacing: .02em; font-size: .72rem; opacity: .72; } .field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: .6rem 0; font-size: 1rem; font-weight: 300; color: var(--ink); border-radius: 0; /* iOS */ transition: border-color .35s var(--ease); } .field textarea { resize: vertical; min-height: 122px; line-height: 1.62; } .field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--ink-mute) 66%, transparent); } .field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--accent); } .field input:focus-visible, .field textarea:focus-visible { outline: 0; } .field.has-error input, .field.has-error textarea { border-bottom-color: #A33327; } .field-err { display: block; font-size: .74rem; color: #A33327; margin-top: .45rem; min-height: 0; } .field:not(.has-error) .field-err { display: none; } .hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1; } .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: .4rem; } .form-note { font-size: .74rem; line-height: 1.6; color: var(--ink-mute); flex: 1 1 15rem; } .form-note a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; } .form-note a:hover { color: var(--accent); } .form-status { margin-top: 1.4rem; padding: .95rem 1.15rem; border-radius: 2px; font-size: .87rem; line-height: 1.55; display: none; } .form-status.is-on { display: block; } .form-status.is-ok { background: rgba(31,122,92,.10); border: 1px solid rgba(31,122,92,.35); color: #1B5F48; } .form-status.is-bad { background: rgba(163,51,39,.08); border: 1px solid rgba(163,51,39,.3); color: #8E2C21; } /* ------------------------------------------------------------------ FOOTER */ .site-foot { padding-block: clamp(2.5rem, 5vw, 3.6rem); background: var(--accent-dk); color: var(--paper); border-top: 0; } .foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; } .foot-name { font-family: var(--display); font-size: 1.12rem; color: var(--paper); } .foot-role { font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 240, 231, .80); margin-top: .3rem; } .foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; font-size: .78rem; } .foot-links a { text-decoration: none; color: rgba(244, 240, 231, .90); border-bottom: 1px solid rgba(244, 240, 231, .30); padding-bottom: 2px; transition: color .3s var(--ease), border-color .3s var(--ease); } .foot-links a:hover { color: var(--paper); border-color: var(--paper); } .foot-copy { font-size: .73rem; color: rgba(244, 240, 231, .78); width: 100%; padding-top: 1.4rem; border-top: 1px solid rgba(244, 240, 231, .22); margin-top: .6rem; } /* ------------------------------------------------------------ LEGAL PAGE */ .legal { padding-top: clamp(7rem, 15vh, 10rem); padding-bottom: clamp(3rem, 7vw, 6rem); } .legal-head { max-width: 44ch; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); } .legal-title { font-size: clamp(1.95rem, 1.3rem + 2.7vw, 3.15rem); margin-bottom: 1rem; } .legal-date { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); } .legal-body { max-width: 68ch; } .legal-body > p { margin-bottom: 1.15rem; } .legal-body h2 { font-family: var(--display); font-weight: 400; font-size: 1.34rem; color: var(--ink); margin-top: 2.7rem; margin-bottom: .75rem; letter-spacing: -.005em; } .legal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .legal-intro { font-family: var(--display); font-size: 1.2rem; line-height: 1.5; color: var(--ink); margin-bottom: 2rem; } /* --------------------------------------------------------------- REVEALS */ .js .rv { opacity: 0; transform: translateY(24px); transition: opacity var(--flip-dur) var(--ease-flip), transform var(--flip-dur) var(--ease-flip); } .js .rv.is-in { opacity: 1; transform: none; } .js .rv[data-d="1"] { transition-delay: .09s; } .js .rv[data-d="2"] { transition-delay: .18s; } .js .rv[data-d="3"] { transition-delay: .27s; } .js .rv[data-d="4"] { transition-delay: .36s; } .js .rv[data-d="5"] { transition-delay: .45s; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } } /* language swap micro-fade */ [data-i18n], [data-i18n-html] { transition: opacity .22s ease; } body.is-swapping [data-i18n], body.is-swapping [data-i18n-html] { opacity: .28; } @media print { body::before, .site-head, .hero-figure, .form-card { display: none !important; } body { background: #fff; color: #000; } } /* visible skip link on keyboard focus */ .sr-only:focus, .sr-only:focus-visible { position: fixed; top: .75rem; left: .75rem; z-index: 10000; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; padding: .7rem 1.1rem; background: var(--ink); color: var(--paper); border-radius: 999px; font-size: .8rem; letter-spacing: .05em; text-decoration: none; } /* ══════════════════════════════════════════════ TEXT MOTION (zab.lv-style) ══ Headlines are split into words that rise and fade in on a stagger; other blocks rise as a whole just behind them. Delays are assigned in JS so one running clock drives the whole hero. ========================================================================== */ .js [data-split] .w { display: inline-block; opacity: 0; transform: translateY(0.42em); transition: opacity .82s var(--ease-out), transform .82s var(--ease-out); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .js [data-split].is-in .w { opacity: 1; transform: none; } .js [data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .82s var(--ease-out), transform .82s var(--ease-out); transition-delay: var(--d, 0ms); } .js [data-rise].is-in { opacity: 1; transform: none; } /* ═════════════════════════════════════════════════════════ IMAGE REVEAL ══ A single photograph, so no tiles: the frame opens downward while the image settles back from a slight over-scale. ========================================================================= */ .reveal-img { overflow: hidden; background: var(--paper-deep); } .js .reveal-img img { opacity: 0; transform: translateX(9%) scale(1.05); transition: opacity 1.15s var(--ease-out), transform 1.6s var(--ease-out); will-change: opacity, transform; } .js .reveal-img.is-in img { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-split] .w, .js [data-rise] { opacity: 1 !important; transform: none !important; } .js .reveal-img img { opacity: 1 !important; transform: none !important; } } /* ═══════════════════════════════════════ SECTION ON A PHOTOGRAPHIC GROUND ══ Roasted beans behind "Ko piedāvāju", pulled well down under a navy wash so the type keeps the same contrast it has on white. ========================================================================= */ .sect--image { position: relative; isolation: isolate; border-top-color: transparent; background-color: var(--band); background-image: image-set( url("../img/beans-1000.jpg") 1x, url("../img/beans-1800.jpg") 2x); background-size: cover; background-position: center; color: var(--paper-warm); } @media (min-width: 900px) { .sect--image { background-image: image-set( url("../img/beans-1800.jpg") 1x, url("../img/beans-1800.jpg") 2x); } } /* the wash — wine-brown, so the band agrees with the quote section below it */ .sect--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--band) 80%, transparent) 0%, color-mix(in srgb, var(--band) 70%, transparent) 45%, color-mix(in srgb, var(--band) 82%, transparent) 100%); } .sect--image + .sect { border-top: 1px solid rgba(244, 240, 231, .14); } .sect--image .label { color: rgba(244, 240, 231, .80); } .sect--image .sect-num { color: var(--accent-pale); } .sect--image .sect-head::after { background: rgba(244, 240, 231, .22); } .sect--image .h2 { color: var(--paper); } .sect--image .prose { color: rgba(244, 240, 231, .86); } .sect--image .tag-title { color: rgba(244, 240, 231, .78); border-bottom-color: rgba(244, 240, 231, .22); } .sect--image .tag-list li { color: var(--paper); border-color: rgba(244, 240, 231, .30); background: rgba(255, 255, 255, .07); } .sect--image .tag-list li:hover { color: var(--band); border-color: var(--paper); background: var(--paper); } /* ═════════════════════════════════════════════════ THE PULL QUOTE ══ Centred, in quotation marks, so it reads as something he said. ================================================================= */ .baltic .sect-head { justify-content: center; } .baltic .sect-head::after { display: none; } .baltic-quote { margin-inline: auto; text-align: center; } /* The marks hang off the first and last word rather than the blockquote, so each one fades in with the word it belongs to — the closing mark arrives with the final word instead of sitting there from the start. */ .baltic-quote::before, .baltic-quote::after, .js .baltic-quote .w:first-of-type::before, .js .baltic-quote .w:last-of-type::after { color: var(--accent-pale); font-family: var(--display); } /* no-JS fallback: the words are never split, so keep them on the element */ .baltic-quote::before { content: "\201C"; margin-right: .04em; } .baltic-quote::after { content: "\201D"; margin-left: .04em; } .js .baltic-quote::before, .js .baltic-quote::after { content: none; } .js .baltic-quote .w:first-of-type::before { content: "\201C"; margin-right: .04em; } .js .baltic-quote .w:last-of-type::after { content: "\201D"; margin-left: .04em; } .baltic-attrib { margin-top: clamp(1.6rem, 3vw, 2.4rem); text-align: center; font-family: var(--display); font-style: italic; font-size: 1rem; color: rgba(244, 240, 231, .62); }