/* ============================================================ petsitter.yauhen — premium suprematism layer Editorial avant-garde · numbered manifesto · Malevich primitives × Chagall blue ============================================================ */ @layer base, layout, components, sections, utilities; /* ───────────────────────────── BASE ─────────────────────────── */ @layer base { html { background: var(--paper); scroll-padding-top: var(--header-h); } body { font-family: var(--font-body); font-size: var(--t-body); color: var(--ink); background: var(--paper); line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } /* Subtle paper texture — kept BELOW the document content (z-index: -1) and without blend-mode, so it never interferes with text rendering or compositing on dark sections. Fine 4px dot grid at 3% opacity — barely-there base grain. Hero has its own warmer stipple on top. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(11,11,11,0.03) 1px, transparent 0); background-size: 4px 4px; z-index: -1; } main, header, footer { position: relative; z-index: 0; isolation: isolate; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.025em; font-weight: 500; line-height: 0.96; font-variation-settings: "opsz" 144, "SOFT" 30; } h1 em, h2 em, h3 em, h4 em { font-style: italic; color: var(--red); font-variation-settings: "opsz" 144, "SOFT" 100; } em { font-style: italic; color: var(--red); } strong { font-weight: 600; color: var(--ink); } a { color: inherit; text-decoration: none; } a:focus-visible { outline: 2px solid var(--chagall); outline-offset: 3px; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--chagall); outline-offset: 2px; } code { font-family: var(--font-mono); font-size: 0.82em; padding: 0.1em 0.35em; background: var(--paper-deep); border-radius: var(--r-1); } .section--dark code { background: rgba(255,255,255,0.08); color: var(--paper); } hr { border: 0; height: 1px; background: var(--ink); margin: 0; } ::selection { background: var(--coral); color: var(--paper-bright); } /* Reveal-on-scroll primitive */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); } .reveal.visible { opacity: 1; transform: none; } } /* ───────────────────────────── LAYOUT ──────────────────────── */ @layer layout { .wrap { width: 100%; max-width: var(--grid-max); margin-inline: auto; padding-inline: var(--gutter); position: relative; } .section { padding-block: var(--s-2); position: relative; } /* ── KONTO nav link with brand mark — mirrors the Instagram avatar look (the same ink-square + red corner-dot the IG embed uses). ───────── */ .nav-konto { display: inline-flex; align-items: center; gap: 0.4rem; } .nav-konto__mark { position: relative; width: 14px; height: 14px; background: var(--ink); border: 1px solid var(--line); flex-shrink: 0; border-radius: var(--r-pill); /* avatar feel */ transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .nav-konto__mark::after { content: ""; position: absolute; top: -2px; right: -2px; width: 5px; height: 5px; background: var(--red); border-radius: var(--r-pill); border: 1px solid var(--paper); } .nav-konto:hover .nav-konto__mark { transform: rotate(8deg) scale(1.08); } .topbar__row--nav .nav-konto, .topbar__minnav .nav-konto, .menu-drawer .nav-konto { /* keep label alignment baseline-stable */ line-height: 1; } .section--dark .nav-konto__mark, .foot .nav-konto__mark { background: var(--paper-bright); border-color: var(--paper-bright); } .section--dark .nav-konto__mark::after, .foot .nav-konto__mark::after { border-color: var(--ink); } /* Hasselblad high-ISO film grain — large-tile multi-octave fractal noise gives the chunky, organic grain of medium-format pushed film (Tri-X 1600, Portra 800). Two stacked layers: (top) sparse "silver halide" highlights via thresholded turbulence + screen blend; (bottom) rich multi-scale grain via multiply. Warm-gold base beneath warms the highlights. */ .section--dark { background-color: var(--ink-deep); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.65'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.58'/%3E%3C/svg%3E"); background-size: 200px 200px, 280px 280px; background-repeat: repeat, repeat; background-blend-mode: screen, multiply; color: var(--paper-bright); overflow: hidden; isolation: isolate; } /* High-specificity, solid colour rules — guarantee white text on dark sections regardless of any inherited filter/blend/opacity from parent shells. */ .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--paper-bright) !important; font-weight: 600; font-variation-settings: "opsz" 96, "SOFT" 50; text-rendering: geometricPrecision; } .section--dark h1 em, .section--dark h2 em, .section--dark h3 em, .section--dark h4 em { color: var(--ochre) !important; } .section--dark p, .section--dark li { color: rgba(255,255,255,0.92); } .section--dark strong { color: var(--paper-bright); font-weight: 600; } .section--dark a { color: var(--ochre); } .section--dark a:hover { color: var(--paper-bright); } /* Form sits on light paper inside dark sections — keep its em as red */ .section--dark .form em { color: var(--red); font-style: italic; } /* ── Form-mode picker — short vs full ankieta. Editorial A/B layout: big italic serif letter on the left (red/ochre), title + tiny mono caption stacked on the right. Active option gets a thick coloured rule under the whole row; inactive gets a hairline. Vertical divider between A and B; on mobile they stack with a horizontal rule. Sits centered, max width matched to the form below so the picker reads as a header for it, not a banner spanning the section. ──── */ .form-mode { position: relative; /* lift above .contact__bg shapes */ z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 auto var(--s-4); max-width: 880px; width: 100%; border-top: 0; } /* Top and bottom rules of the A/B picker run the full width of the site body — they escape the picker's 880px measure via 100vw pseudo-elements so the line reads as a section divider, not as a box around the two cards. */ .form-mode::before, .form-mode::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100%; height: 1px; background: color-mix(in oklab, var(--paper-bright) 25%, transparent); pointer-events: none; } .form-mode::before { top: 0; } .form-mode::after { bottom: -3px; } .form-mode__opt { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.1rem 1.1rem; color: var(--paper-bright); text-decoration: none; border-bottom: 3px solid transparent; border-radius: 14px 14px 0 0; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .form-mode__opt + .form-mode__opt { border-left: 1px solid color-mix(in oklab, var(--paper-bright) 25%, transparent); } .form-mode__opt:hover { background: rgba(245, 241, 230, 0.04); border-bottom-color: color-mix(in oklab, var(--paper-bright) 55%, transparent); } .form-mode__opt.is-active { border-bottom-color: var(--chagall); } .form-mode__opt:nth-child(2).is-active { border-bottom-color: var(--chagall-soft); } .form-mode__letter { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 600; line-height: 1; flex-shrink: 0; transition: transform var(--dur-1) var(--ease); } .form-mode__letter--a { color: var(--ochre); } .form-mode__letter--b { color: var(--chagall-soft); } .form-mode__opt:hover .form-mode__letter { transform: translateX(-2px); } .form-mode__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .form-mode__title { font-family: var(--font-display); font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; color: var(--paper-bright); } .form-mode__hint { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, var(--paper-bright) 60%, var(--ink)); line-height: 1.4; } @media (max-width: 720px) { .form-mode { grid-template-columns: 1fr; border-top: 0; } .form-mode__opt { border-top: 1px solid color-mix(in oklab, var(--paper-bright) 25%, transparent); } .form-mode__opt + .form-mode__opt { border-left: 0; } } /* Headings INSIDE the form sit on paper, not on the dark shell. Override the .section--dark heading rule (which forces white) so that prefix words like "Co" and "Jak" stay readable black on the cream paper. The same fix covers any heading rendered inside the calendar widget. */ .section--dark .form h1, .section--dark .form h2, .section--dark .form h3, .section--dark .form h4, .section--dark .form .step__title, .section--dark .form .calendar__title { color: var(--ink) !important; font-weight: 500; text-rendering: optimizeLegibility; } .section--dark .form h3 em, .section--dark .form .step__title em, .section--dark .form .calendar__title em { color: var(--red) !important; } /* Anything sitting on var(--ink) (.bring, .places__credo, etc.) — readable defaults */ .bring, .places__credo { color: var(--paper); } .bring strong, .places__credo strong { color: var(--ochre); font-weight: 600; } .bring em, .places__credo em { color: var(--ochre); font-style: italic; } /* Form lives inside .section--dark .contact but renders on light paper — restore ink colors */ .section--dark .form, .section--dark .form p, .section--dark .form li, .section--dark .form span, .section--dark .form strong { color: var(--ink); } .section--dark .form strong { color: var(--ink); font-weight: 600; } .section--dark .form a { color: var(--chagall); } .section--dark .form a:hover { color: var(--red); } /* …but buttons, chips and other dark-fill chrome carry their own intentional light text. Force descendants to inherit + use !important so the form-wide ink override never wins. */ .section--dark .form .btn, .section--dark .form .btn span, .section--dark .form .btn strong, .section--dark .form .channel-chip:has(input:checked), .section--dark .form .channel-chip:has(input:checked) span, .section--dark .form .channel-chip:has(input:checked) strong { color: inherit !important; } /* Explicit colours for the dark-fill button + checked-chip states. */ .section--dark .form .btn--primary { color: var(--paper-bright) !important; } .section--dark .form .channel-chip:has(input:checked) { color: var(--paper) !important; } /* Success-step account panel lives inside the cream form panel, not on the dark section background. Restore its ink palette so the CTA card reads on the bright form bg (the .section--dark variants were originally designed for panels that sit directly on dark sections, where light text makes sense — here it doesn't). */ .section--dark .form .done__account { background: var(--paper-bright); border-color: var(--ink); } .section--dark .form .done__account-eyebrow { color: var(--ink); opacity: 1; } .section--dark .form .done__account-body { color: var(--ink); opacity: 1; } .section--dark .form .done__or { color: var(--ink-mute); opacity: 1; } .section--shell { background: var(--paper-warm); } /* Anchor offset for sticky topbar */ .section, section[id], [id^="hero"] { scroll-margin-top: 72px; } .section__head { margin-bottom: var(--s-2); } .section__head--center { text-align: center; } .section__head--center .section__lede { margin-inline: auto; } .section__title { font-size: var(--t-h2); margin-bottom: var(--s-2); max-width: 18ch; } .section__title--mega { font-size: clamp(2.5rem, 1.4rem + 5.5vw, 6.5rem); line-height: 0.94; letter-spacing: -0.035em; max-width: 14ch; margin-bottom: var(--s-2); } .section__lede { font-size: var(--t-lead); color: var(--ink-soft); max-width: 52ch; margin-top: var(--s-2); font-weight: 400; } .section--dark .section__lede { color: color-mix(in oklab, var(--paper) 72%, transparent); } .services__price-note { margin-top: var(--s-3); padding: 0.85rem 1.2rem; background: color-mix(in oklab, var(--ochre) 22%, transparent); border-left: 3px solid var(--ochre); color: rgba(255,255,255,0.92); font-size: 0.9rem; line-height: 1.55; max-width: none; width: 100%; } .services__price-note strong { color: var(--ochre); font-weight: 600; } } /* ─────────────────────────── COMPONENTS ────────────────────── */ @layer components { /* ── Header / topbar ───────────────────────────────────── Two-row editorial masthead at the very top of the page — becomes a single sticky bar after a small scroll. */ /* Simple variant used on /ankieta.html — just wordmark + back link */ .topbar--simple .topbar__row { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) 0; border-bottom: 1px solid var(--line-soft); } .ank-back-link { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; transition: color var(--dur-1) var(--ease); } .ank-back-link:hover { color: var(--red); } .topbar { position: sticky; top: 0; left: 0; right: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid transparent; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .topbar[data-scrolled="true"] { /* Solid paper on scroll — backdrop-filter was forcing a GPU repaint of the full topbar on every scroll frame and noticeably lagged the page. The paper-bright tint reads as the same editorial bar without the blur cost. */ background: var(--paper); border-bottom-color: transparent; box-shadow: none; } .topbar__row { width: 100%; } .topbar__row--brand { border-bottom: 1px solid var(--line-soft); } .topbar__brand-inner { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding-block: 0.3rem; } .topbar__nav-inner { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-3); align-items: center; min-height: 44px; } /* Domain link — editorial slug. Sits directly after the brand mark, reading as the second half of the wordmark (petsitter·yauhen · petsitteryauhen·pl). No auto-margin push to the right. */ .topbar__domain { display: inline-flex; align-items: center; gap: 0.6rem; margin-left: 0; padding-left: 0.6rem; border-left: 1px solid var(--line); color: var(--ink-soft); } .topbar__domain-line { display: none; } .topbar__domain-link { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: lowercase; color: var(--ink-soft); transition: color var(--dur-1) var(--ease); } .topbar__domain-link em { color: var(--red); font-style: normal; padding-inline: 0.1em; } .topbar__domain-link:hover { color: var(--ink); } @media (max-width: 760px) { .topbar__domain { display: none; } } .topbar__lang-wrap { display: inline-flex; align-items: center; gap: var(--s-2); margin-left: auto; justify-content: flex-end; } @media (max-width: 900px) { .topbar__lang-wrap { gap: 0.6rem; } } /* Account entry — replaces the "Konto" text link in the menu. A small round paper button on the far right of the top row, with a quiet line-icon of a user silhouette. Hover shifts to chagall — same colour code as the rest of the site's nav accents. */ /* Account entry — matches the .mark__square brand frame: 30×30 paper tile, 8px rounded corner, ink hairline, centred glyph. Pairs visually with the logo and with the language switcher to its right. */ .topbar__account { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid color-mix(in oklab, var(--ink) 28%, transparent); border-radius: 8px; background: var(--paper); color: var(--ink); text-decoration: none; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .topbar__account svg { display: block; width: 16px; height: 16px; } .topbar__account:hover { background: color-mix(in oklab, var(--ink) 4%, var(--paper)); border-color: color-mix(in oklab, var(--ink) 45%, transparent); } .topbar__account:focus-visible { outline: 2px solid var(--chagall); outline-offset: 3px; } /* Sticky / scrolled state — keep the FULL nav row visible at all times. We only tighten paddings so the bar feels lighter on scroll. The brand row's bottom rule is removed on scroll so the menu doesn't get a visible dark stripe under it. */ .topbar[data-scrolled="true"] .topbar__row--brand { border-bottom-color: transparent; } .topbar[data-scrolled="true"] .topbar__brand-inner { min-height: 40px; padding-block: 0.2rem; gap: var(--s-2); } .topbar[data-scrolled="true"] .topbar__domain { gap: 0.55rem; } .topbar[data-scrolled="true"] .topbar__domain-line { width: 1.5rem; } .topbar[data-scrolled="true"] .topbar__row--nav { max-height: 64px; overflow: visible; opacity: 1; border-top: 0; } .topbar[data-scrolled="true"] .topbar__nav-inner { min-height: 42px; } .topbar__row--nav { max-height: 80px; overflow: visible; opacity: 1; transition: max-height var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease); } /* Mini-nav no longer needed — full nav is always visible. Kept hidden in case the markup is referenced elsewhere. */ .topbar__minnav { display: none !important; } .topbar__minnav a { color: var(--ink); position: relative; padding-block: 0.3rem; transition: color var(--dur-1) var(--ease); } .topbar__minnav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--chagall); border-radius: 1px; transition: left var(--dur-2) var(--ease), right var(--dur-2) var(--ease); } .topbar__minnav a:hover { color: var(--chagall); } .topbar__minnav a:hover::after { left: 0; right: 0; } .mark { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); } /* Brand mark — Terracotta Ball × Dog's Paw (snapshot crop). A photographic moment of play, tilted ~15° as if the frame caught the scene mid-motion. The ball sits centre-low and the paw rests ON the ball — palm pad over the ball body, four toes fanning above and PAST the upper edge of the ball outline. Each toe is its own bezier drop (not a circle), so the silhouette feels drawn, not assembled. The ball is the stage; the paw is allowed to step beyond it. */ .mark__square { position: relative; width: 30px; height: 30px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='21' r='11' fill='%23C8362A'/%3E%3Cg transform='rotate(-15 16 16)'%3E%3Cpath d='M 10 14 C 10.5 16 11.5 17.5 13 18.5 C 14 19.5 15 20 16 20 C 17 20 18 19.5 19 18.5 C 20.5 17.5 21.5 16 22 14 C 21 13.5 19.5 13.5 18 13.5 C 17 13 15 13 14 13.5 C 12.5 13.5 11 13.5 10 14 Z' fill='%231F1D18'/%3E%3Cpath d='M 4 10 C 3 8 3.5 5.5 5.5 5.5 C 7.5 5.5 8.5 7.5 7.5 10 C 6.5 12 4 12 4 10 Z' fill='%231F1D18'/%3E%3Cpath d='M 9 7 C 8.5 5 10 3.5 12 3.5 C 14 3.5 14.5 5.5 13.5 7.5 C 12.5 9.5 10 9 9 7 Z' fill='%231F1D18'/%3E%3Cpath d='M 18 7 C 17.5 5.5 19 3.5 21 3.5 C 23 3.5 23.5 5 23 7 C 22 9 19 9 18 7 Z' fill='%231F1D18'/%3E%3Cpath d='M 24 10 C 25 8 24.5 5.5 22.5 5.5 C 20.5 5.5 19.5 7.5 20.5 10 C 21.5 12 24 12 24 10 Z' fill='%231F1D18'/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; border: none; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--dur-2) var(--ease), filter var(--dur-2) var(--ease); overflow: visible; } .mark__square::before { display: none; } /* Old walker scene retired — the seal is drawn entirely in the .mark__square background SVG. The inline .walker markup stays in HTML across 13 pages for backwards-compat but is hidden so we don't have to touch each file. */ .mark__pup { display: none; } /* Hover — a small "lean in" gesture: the scene drifts a hair toward the viewer and a soft shadow forms under the ball, as if the dog just nudged it forward. No rotation — the composition is already diagonal, more tilt would feel cartoon. */ .mark:hover .mark__square { transform: scale(1.05); filter: drop-shadow(0 1.5px 1.5px color-mix(in oklab, var(--ink) 25%, transparent)); } .mark__text em { color: var(--red); font-style: italic; padding-inline: 0.05em; } .mark--light, .mark--light .mark__text { color: var(--paper); } /* Light variant — no SVG swap needed: the seal is masked, so the dog cutout shows whatever's behind (dark section background), and the terracotta wax pops on dark on its own. Only the wordmark colour changes (handled above). */ .topbar__nav { display: inline-flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; } .topbar__nav a { color: var(--ink); position: relative; padding-block: 0.4rem; transition: color var(--dur-1) var(--ease); } .topbar__nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--chagall); border-radius: 1px; transition: left var(--dur-2) var(--ease), right var(--dur-2) var(--ease); } .topbar__nav a:hover { color: var(--chagall); } .topbar__nav a:hover::after { left: 0; right: 0; } @media (max-width: 900px) { .topbar__nav { display: none; } } /* Language switch — 30×30 paper tile matching .mark__square and .topbar__account: ink hairline, 8px rounded corner, current locale code centred in display italic. Dropdown opens beneath as a quiet editorial panel (paper, ink rule, rounded corners, hard shadow). */ .lang { position: relative; display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.18em; } .lang__trigger { appearance: none; background: var(--paper); border: 1px solid color-mix(in oklab, var(--ink) 28%, transparent); border-radius: 8px; width: 30px; height: 30px; padding: 0; color: var(--ink); text-transform: uppercase; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 2px; line-height: 1; letter-spacing: inherit; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .lang__trigger:hover { background: color-mix(in oklab, var(--ink) 4%, var(--paper)); border-color: color-mix(in oklab, var(--ink) 45%, transparent); } .lang__trigger-code { font-family: var(--font-mono); font-style: normal; font-size: 11px; font-weight: 500; color: inherit; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } /* Chevron retired — the 30×30 tile reads as a chip; the dropdown panel itself is the affordance. */ .lang__trigger-chev { display: none; } .lang[data-open="true"] .lang__trigger-chev { transform: rotate(-135deg) translate(-1px, -1px); } /* Postage-strip panel — 4 tiles of 30×30 in a horizontal row that opens right-aligned under the trigger, like a strip of postal stamps torn off the wax-seal mark. Just locale codes, no names, no flag swatches — the trigger and the strip share one typographic voice (mono caps 11). */ .lang__panel { position: absolute; top: calc(100% + 0.55rem); right: 0; display: flex; gap: 4px; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; z-index: 60; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); box-shadow: 4px 4px 0 var(--ink); overflow: visible; } .lang[data-open="true"] .lang__panel { opacity: 1; transform: translateY(0); pointer-events: auto; } .lang__opt { appearance: none; background: var(--paper); border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); border-radius: 6px; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); font: inherit; letter-spacing: inherit; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .lang__opt-code { font-family: var(--font-mono); font-style: normal; font-size: 11px; font-weight: 500; color: inherit; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } /* Topbar strip hides the rich row pieces — drawer reinstates them below. */ .lang__opt-name, .lang__opt-flag { display: none; } .lang__opt:hover { background: color-mix(in oklab, var(--ink) 4%, var(--paper)); border-color: color-mix(in oklab, var(--ink) 45%, transparent); } .lang__opt.is-active { background: var(--ink); color: var(--paper-bright); border-color: var(--ink); } .lang__opt.is-active .lang__opt-code { color: var(--paper-bright); } .section--dark .lang__trigger, .section--dark .lang__trigger-code { color: var(--paper-bright); } /* Drawer — full-width vertical rows with code + name + flag, kept for the mobile menu where the strip would feel too dense. */ .menu-drawer .lang__panel { position: static; display: block; padding: 0.4rem 0; box-shadow: none; opacity: 1; transform: none; pointer-events: auto; border: 1px solid var(--line); border-radius: 12px; margin-top: 0.4rem; } .menu-drawer .lang__opt { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 0.65rem; width: 100%; height: auto; padding: 0.55rem 1rem; background: transparent; border: 0; border-radius: 0; text-align: left; } .menu-drawer .lang__opt-name { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); } .menu-drawer .lang__opt-flag { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line); background: var(--paper); justify-self: end; } .menu-drawer .lang__opt-code { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--red); letter-spacing: 0; line-height: 1; font-variation-settings: "opsz" 144; } .menu-drawer .lang__opt:hover { background: color-mix(in oklab, var(--ochre) 14%, var(--paper)); border-color: transparent; } .menu-drawer .lang__opt.is-active { background: var(--ink); border-color: var(--ink); } .menu-drawer .lang__opt.is-active .lang__opt-code { color: var(--ochre); } .menu-drawer .lang__opt.is-active .lang__opt-name { color: var(--paper); } .menu-drawer .lang__opt.is-active .lang__opt-flag { background: var(--ochre); border-color: var(--ochre); } .menu-drawer .lang__trigger { display: none; } /* Buttons */ /* ── BUTTONS — unified standard (KRÓTKIE ZGŁOSZENIE family) ───── One outlined CTA reads the same everywhere on the site: • 1.5px ink border, mono caps, generous breathing room • A square pip on the LEFT for in-page actions (Krótkie zgłoszenie). • A plain text arrow on the RIGHT for buttons that navigate to another page (Pełna ankieta · 5 kroków →). • Minimal hover: the pip rotates 45° + shifts to ochre; the arrow nudges right; the label colour deepens. No yellow rail, no underline, no fill swap on .btn--ghost. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0.85rem 1.6rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border: 1.5px solid var(--line); /* Was sharp (var(--r-0) = 0) — the canonical Suprematist rectangle. Now uniformly rounded: 12px reads as a hand-painted token on the page, matches the rounded hero CTAs, and is gentle enough that wide and narrow buttons both look intentional. */ border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; position: relative; transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); white-space: nowrap; text-decoration: none; } .btn:active { opacity: 0.92; } /* Pip — was a Malevich square, now a Chagall pebble. Organic asymmetric radius reads as a hand-painted dot, not a cut geometric shape. The rotate-on-hover micro-gesture is kept (so the pebble subtly twists, adding life) and the colour still shifts to honey-gold for warmth. */ .btn__sq { width: 9px; height: 9px; background: var(--red); border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; display: inline-block; transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-radius var(--dur-2) var(--ease); } .btn:hover .btn__sq { transform: rotate(45deg); background: var(--ochre); border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%; } /* Arrow — marks a destination button (navigates elsewhere). Slides right on hover. Anything inside the button that is the literal character → counts, plus the explicit .btn__arrow class. */ .btn__arrow { transition: transform var(--dur-2) var(--ease); display: inline-block; } .btn:hover .btn__arrow { transform: translateX(4px); } /* Primary (filled ink) — the editorial dark CTA. */ .btn--primary { background: var(--ink); color: var(--paper-bright); border-color: var(--ink); } .btn--primary:hover { background: var(--ink); color: var(--ochre); } .btn--primary .btn__sq { background: var(--red); } .btn--primary:hover .btn__sq { background: var(--ochre); transform: rotate(45deg); } /* Red — flagship action (Krótkie zgłoszenie). On hover the pip alone animates — no background swap, no underline. */ .btn--red { background: var(--red); color: var(--paper-bright); border-color: var(--red); } .btn--red:hover { color: var(--paper-bright); background: var(--red); border-color: var(--red); } .btn--red .btn__sq { background: var(--paper-bright); } .btn--red:hover .btn__sq { background: var(--ochre); } /* Ghost — canonical outlined CTA (Pełna ankieta · 5 kroków →). Hover: pip rotates + label deepens to ink. No fill swap. */ .btn--ghost { color: var(--ink); border-color: var(--ink); background: transparent; } .btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost .btn__sq { background: var(--red); } .btn--ghost:hover .btn__sq { background: var(--ochre); transform: rotate(45deg); } .section--dark .btn--ghost { color: var(--paper); border-color: var(--paper); } .section--dark .btn--ghost:hover { color: var(--paper); background: transparent; border-color: var(--paper); } .section--dark .btn--ghost .btn__sq { background: var(--ochre); } .section--dark .btn--ghost:hover .btn__sq { background: var(--paper-bright); transform: rotate(45deg); } /* Size modifiers — proportional so the inside breathing-room of a small button matches the large one. */ .btn--sm { padding: 0.7rem 1.25rem; font-size: 0.68rem; } .btn--lg { padding: 1.1rem 1.95rem; font-size: 0.78rem; } .btn:disabled { opacity: 0.35; cursor: not-allowed; } .btn--promo { background: var(--ochre); color: var(--ink); border-color: var(--ochre); animation: promoPulse 2.4s var(--ease) infinite; } .btn--promo:hover { background: var(--red); color: var(--paper); border-color: var(--red); } @keyframes promoPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,181,71,0.55); } 50% { box-shadow: 0 0 0 14px rgba(229,181,71,0); } } /* ── Topbar CTA — reads as a nav item, not a button ─────────── "Zostaw zgłoszenie" matches the other section nav links: ink colour, mono caps, identical letter-spacing. A small red pebble pip marks it as the primary action; the chagall underline-on-hover signature is the same as the nav links to its left. */ .topbar__cta-link { display: inline-flex; align-items: center; gap: 0.55rem; padding-block: 0.4rem; padding-inline-start: 0; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; color: var(--ink); text-decoration: none; position: relative; cursor: pointer; transition: color var(--dur-1) var(--ease); } .topbar__cta-link::before { content: ""; width: 8px; height: 8px; background: var(--red); border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; display: inline-block; transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-radius var(--dur-2) var(--ease); } .topbar__cta-link::after { content: none; } .topbar__cta-link:hover { color: var(--ochre); } .topbar__cta-link:hover::before { transform: rotate(45deg); background: var(--ochre); border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%; } @media (max-width: 640px) { .topbar__nav-inner .topbar__cta-link { display: none; } } /* Hide legacy cta-leave nodes if anything still references them. */ .cta-leave { display: none; } /* Compact variant for the header. Hint hidden, tighter padding. */ .cta-leave--sm .cta-leave__body { padding: 0.5rem 0.95rem; } .cta-leave--sm .cta-leave__name { font-size: 0.62rem; letter-spacing: 0.14em; } .cta-leave--sm .cta-leave__hint { display: none; } /* Large variant — hero CTA, hint visible. */ .cta-leave--lg .cta-leave__body { padding: 1rem 1.6rem; } .cta-leave--lg .cta-leave__name { font-size: 0.82rem; } .cta-leave--lg .cta-leave__hint { font-size: 0.66rem; } /* Dark-section variants — paper frame on ink, hover stays light with low alpha. */ .section--dark .cta-leave { background: transparent; color: var(--paper); border-color: color-mix(in oklab, var(--paper) 70%, transparent); } .section--dark .cta-leave .cta-leave__name { color: var(--paper); } .section--dark .cta-leave:hover { background: color-mix(in oklab, var(--paper) 18%, transparent); border-color: var(--paper); } .section--dark .cta-leave__hint { color: color-mix(in oklab, var(--paper) 55%, transparent); } .menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: transparent; cursor: pointer; } .menu-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; } .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); transition: transform var(--dur-1) var(--ease); } .menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; } .menu-toggle[aria-expanded="true"] span { background: transparent; } .menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 900px) { .menu-toggle { display: inline-flex; } } .menu-drawer { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 2px solid var(--line); padding: var(--s-3) var(--gutter) var(--s-4); transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease); z-index: 45; max-height: 80svh; overflow-y: auto; box-shadow: 0 16px 30px -20px rgba(11,11,11,0.25); } .menu-drawer[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; } .menu-drawer nav { display: grid; gap: 0; } .menu-drawer nav a { padding: 0.85rem 0; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); border-bottom: 1px solid var(--line); letter-spacing: -0.02em; } .menu-drawer nav a:last-of-type { border-bottom: 0; } .menu-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); } /* Eyebrow */ .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--red); } .eyebrow--light { color: var(--ochre); } .kbd { display: inline-block; padding: 0.2rem 0.5rem; border: 1px solid currentColor; border-radius: 5px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; margin-right: 0.3rem; } /* Background decorative shapes */ .bg-shape { position: absolute; display: block; pointer-events: none; } /* Was a hard red square in the background of III Oferta — replaced with a painted Chagall blob (organic radius, textured fill) so the background no longer reads as cubist. */ .bg-shape--sq { width: 320px; height: 280px; background-color: var(--chagall); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); background-size: 240px 240px; background-blend-mode: multiply; border-radius: 58% 42% 52% 48% / 48% 56% 44% 52%; top: -120px; right: -120px; transform: rotate(-8deg); opacity: 0.92; } .bg-shape--circle { width: 220px; height: 220px; border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%; background-color: var(--ochre); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); background-size: 180px 180px; background-blend-mode: multiply; bottom: 8%; left: -130px; opacity: 0.85; } /* Heavy ochre manifesto banner — a tall vertical block that runs down the right-hand side. Stark suprematist counterweight to the text rail on the left; doesn't compete with the price column because it stays put against the page edge. The Roman numeral inside reads as a chapter index, not as decoration. */ .bg-shape--banner { position: absolute; width: clamp(48px, 5vw, 78px); top: clamp(80px, 8vh, 120px); bottom: clamp(80px, 8vh, 120px); right: clamp(0px, 1.5vw, 28px); background: var(--ochre); box-shadow: -6px 6px 0 0 var(--ink); display: flex; align-items: flex-start; justify-content: center; padding-top: 0.85rem; z-index: 0; } .bg-shape--banner .bg-shape__num { font-family: var(--font-display); font-style: italic; color: var(--ink); font-size: clamp(1rem, 0.8rem + 0.4vw, 1.3rem); writing-mode: vertical-rl; letter-spacing: 0.25em; text-transform: uppercase; font-variation-settings: "opsz" 144, "SOFT" 100; } @media (max-width: 720px) { .bg-shape--banner { display: none; } } /* Legacy thin bar kept hidden — no longer used in OFERTA, retained so the old markup elsewhere doesn't break. */ .bg-shape--bar { display: none; } .bg-shape--bar-2 { width: 40vw; height: 12px; top: 70%; left: -8%; transform: rotate(6deg); background: var(--ochre); } .bg-shape--red { /* Was a hard red square at top-left of the Contact section. Now an organic painted Chagall-deep blob — same warm presence without the Suprematist cube. */ width: 360px; height: 300px; background-color: var(--chagall-deep); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); background-size: 260px 260px; background-blend-mode: overlay; border-radius: 56% 44% 48% 52% / 52% 48% 56% 44%; top: -140px; left: -160px; transform: rotate(-12deg); opacity: 0.85; } } /* ─────────────────────────── SECTIONS ──────────────────────── */ @layer sections { /* ── HERO ───────────────────────────────────────────────── */ .hero { padding-top: 0; padding-bottom: 0; /* Exact one-viewport hero — topbar (header-h) + hero fill the screen perfectly, so the very first scroll reveals "О мне". */ min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; position: relative; /* Milky-paper field — warm cotton-paper cream with a baked-in fractalNoise stipple. The noise multiplies with the cream so the grain darkens it slightly per-pixel without sitting "on top" as a separate layer — reads as a real paper stock. */ background-color: #F6F0E0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.44'/%3E%3C/svg%3E"); background-size: 220px 220px; background-repeat: repeat; background-blend-mode: multiply; } /* Unified quote — no colored rail. A typographic open-quote glyph hangs in the margin and a small ochre dot precedes the mono caption. The reader sees pure typography, not a decorative bar. */ .quote { margin: var(--s-3) 0; padding: 0; border: 0; position: relative; } .quote blockquote { margin: 0 0 0.55rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.35rem); line-height: 1.4; color: var(--ink); max-width: 60ch; font-variation-settings: "opsz" 144, "SOFT" 80; quotes: none; text-indent: -0.32em; padding-left: 0.32em; } .quote blockquote::before { content: "“"; font-family: var(--font-display); font-style: italic; color: color-mix(in oklab, var(--ink) 28%, transparent); margin-right: 0.05em; } .quote blockquote::after { content: none; } .quote figcaption { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); padding-left: 0.65rem; position: relative; } .quote figcaption::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.4rem; height: 1.5px; background: var(--ochre); } .quote--final { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); } .section--dark .quote blockquote { color: var(--paper); } .section--dark .quote blockquote::before { color: color-mix(in oklab, var(--paper) 35%, transparent); } .section--dark .quote figcaption { color: color-mix(in oklab, var(--paper) 60%, transparent); } .hero__wrap { display: flex; flex-direction: column; padding-block: var(--s-3) 0; gap: var(--s-3); } /* Bottom block (coda + floor) pins to the lower edge of the hero so the filmstrip floats in the upper-mid band and the page has air rather than feeling crammed. */ .hero > .wrap:last-of-type { margin-top: auto; } /* ── MORNING-TWILIGHT MODE — Easter egg triggered by clicking the cottage dot. A Howl-twilight palette (cobalt velvet → twilight blue → silver periwinkle → mauve mist → pale rose horizon) fades over the hero. ~70 paper-bright stars with varied brightness (full / medium / faint via color-mix opacity), plus 4 prominent stars with soft glow halos for sparkle, scatter chaotically across the sky. .hero::after layers Canis Major (Big Dog constellation, Sirius brightest) in the upper-right gutter — clear empty space beside the title where no content blocks it. The dot stays locked open (.hero__house selector above). Click again to revert. */ .hero { isolation: isolate; transition: background-color var(--dur-4) var(--ease-out); } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: /* halo+core composites for 4 prominent stars */ radial-gradient(circle at 11% 18%, color-mix(in oklab, var(--paper-bright) 24%, transparent) 1.7px, transparent 3.2px), radial-gradient(circle at 11% 18%, var(--paper-bright) 0.9px, transparent 1.5px), radial-gradient(circle at 38% 9%, color-mix(in oklab, var(--paper-bright) 26%, transparent) 1.9px, transparent 3.6px), radial-gradient(circle at 38% 9%, var(--paper-bright) 1px, transparent 1.7px), radial-gradient(circle at 64% 24%, color-mix(in oklab, var(--paper-bright) 22%, transparent) 1.6px, transparent 3px), radial-gradient(circle at 64% 24%, var(--paper-bright) 0.85px, transparent 1.45px), radial-gradient(circle at 92% 52%, color-mix(in oklab, var(--paper-bright) 20%, transparent) 1.5px, transparent 2.8px), radial-gradient(circle at 92% 52%, var(--paper-bright) 0.8px, transparent 1.4px), /* bright crisp stars */ radial-gradient(circle at 4% 5%, var(--paper-bright) 0.7px, transparent 1.2px), radial-gradient(circle at 6% 31%, var(--paper-bright) 0.5px, transparent 1px), radial-gradient(circle at 14% 7%, var(--paper-bright) 0.8px, transparent 1.4px), radial-gradient(circle at 22% 24%, var(--paper-bright) 0.6px, transparent 1.1px), radial-gradient(circle at 27% 5%, var(--paper-bright) 0.5px, transparent 1px), radial-gradient(circle at 31% 19%, var(--paper-bright) 0.7px, transparent 1.3px), radial-gradient(circle at 33% 36%, var(--paper-bright) 0.5px, transparent 1px), radial-gradient(circle at 41% 21%, var(--paper-bright) 0.6px, transparent 1.1px), radial-gradient(circle at 47% 4%, var(--paper-bright) 0.5px, transparent 1px), radial-gradient(circle at 51% 17%, var(--paper-bright) 0.7px, transparent 1.3px), radial-gradient(circle at 56% 8%, var(--paper-bright) 0.5px, transparent 1px), radial-gradient(circle at 59% 32%, var(--paper-bright) 0.6px, transparent 1.1px), radial-gradient(circle at 68% 6%, var(--paper-bright) 0.5px, transparent 1px), radial-gradient(circle at 72% 28%, var(--paper-bright) 0.7px, transparent 1.3px), radial-gradient(circle at 77% 12%, var(--paper-bright) 0.5px, transparent 1px), radial-gradient(circle at 81% 36%, var(--paper-bright) 0.6px, transparent 1.1px), radial-gradient(circle at 86% 20%, var(--paper-bright) 0.55px, transparent 1px), radial-gradient(circle at 97% 30%, var(--paper-bright) 0.5px, transparent 1px), /* medium stars (65% brightness) */ radial-gradient(circle at 9% 12%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 17% 32%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.6px, transparent 1.1px), radial-gradient(circle at 19% 14%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.4px, transparent 0.9px), radial-gradient(circle at 25% 27%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 29% 11%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 36% 27%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.4px, transparent 0.9px), radial-gradient(circle at 44% 14%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 49% 28%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.55px, transparent 1px), radial-gradient(circle at 53% 6%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.4px, transparent 0.9px), radial-gradient(circle at 58% 22%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 62% 38%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 70% 16%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.55px, transparent 1px), radial-gradient(circle at 75% 33%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 79% 5%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.4px, transparent 0.9px), radial-gradient(circle at 88% 11%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 90% 38%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.55px, transparent 1px), radial-gradient(circle at 94% 19%, color-mix(in oklab, var(--paper-bright) 65%, transparent) 0.4px, transparent 0.9px), /* faint stars (40% brightness) */ radial-gradient(circle at 7% 21%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 13% 39%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.45px, transparent 0.9px), radial-gradient(circle at 20% 4%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.4px, transparent 0.8px), radial-gradient(circle at 24% 16%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.4px, transparent 0.85px), radial-gradient(circle at 30% 33%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 35% 18%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.4px, transparent 0.85px), radial-gradient(circle at 40% 6%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.45px, transparent 0.9px), radial-gradient(circle at 43% 35%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 48% 39%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.4px, transparent 0.85px), radial-gradient(circle at 54% 25%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 61% 13%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.4px, transparent 0.85px), radial-gradient(circle at 67% 36%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 73% 9%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.45px, transparent 0.9px), radial-gradient(circle at 80% 26%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.4px, transparent 0.85px), radial-gradient(circle at 83% 7%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 89% 27%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.4px, transparent 0.85px), radial-gradient(circle at 96% 6%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.45px, transparent 0.9px), radial-gradient(circle at 98% 41%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.5px, transparent 1px), /* sparse stars near the lit horizon (fewer, mostly faint — natural fade) */ radial-gradient(circle at 8% 56%, color-mix(in oklab, var(--paper-bright) 50%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 23% 64%, color-mix(in oklab, var(--paper-bright) 38%, transparent) 0.45px, transparent 0.9px), radial-gradient(circle at 38% 51%, color-mix(in oklab, var(--paper-bright) 40%, transparent) 0.4px, transparent 0.85px), radial-gradient(circle at 52% 68%, color-mix(in oklab, var(--paper-bright) 32%, transparent) 0.4px, transparent 0.8px), radial-gradient(circle at 71% 58%, color-mix(in oklab, var(--paper-bright) 42%, transparent) 0.5px, transparent 1px), radial-gradient(circle at 86% 65%, color-mix(in oklab, var(--paper-bright) 30%, transparent) 0.4px, transparent 0.8px), linear-gradient(180deg, #1A1F45 0%, #2D3470 24%, #5D5C8F 52%, #A28BA4 78%, #E6BFA8 100%); opacity: 0; transition: opacity var(--dur-4) var(--ease-out); } .hero.is-night::before { opacity: 1; } /* Canis Major (Big Dog) — astronomically accurate: seven main stars plotted from real RA/Dec coordinates (east-left projection, as on classical star charts), scaled by apparent magnitude: α Sirius mag -1.46 ← brightest in the night sky, with halo ε Adhara mag 1.50 δ Wezen mag 1.84 β Mirzam mag 1.98 (the Herald — rises before Sirius) η Aludra mag 2.45 ζ Furud mag 3.02 γ Muliphein mag 4.10 (faintest, near-eye limit) Six connecting lines form the standard IAU stick figure: β→α (front paw → collar) α→γ (head) α→ε (body) ε→δ (back) δ→η (tail) ε→ζ (hind paw) Sits in the upper-right gutter (100% × 12%), beyond the wrap's 1180px max-width — clear empty space on desktop, scales down on smaller screens via clamp. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cg stroke='%23F5F1E6' stroke-width='0.5' opacity='0.36' fill='none' stroke-linecap='round'%3E%3Cline x1='174' y1='52' x2='118' y2='35'/%3E%3Cline x1='118' y1='35' x2='71' y2='20'/%3E%3Cline x1='118' y1='35' x2='84' y2='205'/%3E%3Cline x1='84' y1='205' x2='59' y2='169'/%3E%3Cline x1='59' y1='169' x2='20' y2='209'/%3E%3Cline x1='84' y1='205' x2='180' y2='220'/%3E%3C/g%3E%3Ccircle cx='118' cy='35' r='9' fill='%23F5F1E6' opacity='0.18'/%3E%3Ccircle cx='118' cy='35' r='3.4' fill='%23F5F1E6'/%3E%3Ccircle cx='84' cy='205' r='2.2' fill='%23F5F1E6'/%3E%3Ccircle cx='59' cy='169' r='1.9' fill='%23F5F1E6'/%3E%3Ccircle cx='174' cy='52' r='1.8' fill='%23F5F1E6'/%3E%3Ccircle cx='20' cy='209' r='1.5' fill='%23F5F1E6'/%3E%3Ccircle cx='180' cy='220' r='1.2' fill='%23F5F1E6'/%3E%3Ccircle cx='71' cy='20' r='0.9' fill='%23F5F1E6' opacity='0.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 100% 12%; background-size: clamp(110px, 14vw, 180px) auto; opacity: 0; transition: opacity var(--dur-4) var(--ease-out); } .hero.is-night::after { opacity: 1; } /* Night-mode colour overrides — flip darks to paper-bright so the headline, meta, ledger and floor strip stay legible against the midnight overlay. Accents (red em, ochre tail, chagall CTAs) keep their hue — they already pop on dark. */ .hero.is-night .hero__title { color: var(--paper-bright); } .hero.is-night .hero__meta-tag, .hero.is-night .hero__meta-val, .hero.is-night .hero__scroll { color: var(--paper-bright); } .hero.is-night .hero__meta-rule { background: var(--paper-bright); } .hero.is-night .hero__floor { border-color: color-mix(in oklab, var(--paper-bright) 30%, transparent); } .hero.is-night .hero__meta-item { border-color: color-mix(in oklab, var(--paper-bright) 20%, transparent); } /* Muted light — paper-bright at 60% reads as soft cream on the night fill, not stark white. One tone for all four cells (the 70% had been popping as a separate accent — now it sits flat with the row). */ .hero.is-night .ledger__num, .hero.is-night .ledger__cap { color: color-mix(in oklab, var(--paper-bright) 60%, transparent); } .hero.is-night .hero__ledger .ledger__cell:nth-child(1) .ledger__num, .hero.is-night .hero__ledger .ledger__cell:nth-child(2) .ledger__num, .hero.is-night .hero__ledger .ledger__cell:nth-child(3) .ledger__num, .hero.is-night .hero__ledger .ledger__cell:nth-child(4) .ledger__num { color: color-mix(in oklab, var(--paper-bright) 60%, transparent); } .hero.is-night .hero__ledger .ledger__cell { border-color: color-mix(in oklab, var(--paper-bright) 18%, transparent); } /* Masthead — typographic cover. Title sits as the dominant gesture; meta-line tucks under the title as a credit. No two-column split — the filmstrip below takes the full stage. Extra top padding compensates for the removed folio mark ("I. Manifest") so the title keeps its original vertical position. */ .hero__masthead { display: flex; flex-direction: column; gap: 0.55rem; padding-block: calc(var(--s-3) + var(--s-4)) var(--s-3); } .hero__masthead .hero__title { margin-bottom: 0; } /* Meta-line drops further below the title so the "Twojego psa" descender never collides with the WARSZAWA · PRAGA POŁUDNIE · GOCŁAWEK row. */ .hero__masthead .hero__meta-line { margin-bottom: 0; margin-top: clamp(1.5rem, 0.8rem + 1.6vw, 2.4rem); } /* Coda — ledger-led subtitle + CTAs, sits under the filmstrip. The subtitle column now leads with the practice ledger (4 big numbers), so it claims the full left column instead of a 38ch measure; CTAs sit alongside, vertically centred against the card. */ .hero__coda { display: grid; grid-template-columns: 1.4fr auto; align-items: center; gap: var(--s-3); padding-block: var(--s-2) var(--s-2); } @media (max-width: 760px) { .hero__coda { grid-template-columns: 1fr; gap: var(--s-2); padding-block: var(--s-2) var(--s-2); } } .hero__title { font-size: clamp(2.6rem, 1.4rem + 6.5vw, 7.5rem); line-height: 0.92; letter-spacing: -0.04em; font-weight: 500; margin-bottom: var(--s-2); display: flex; flex-direction: column; font-variation-settings: "opsz" 144, "SOFT" 30; } .hero__title-line { display: block; overflow: visible; padding-left: 0; } /* "U mnie." flows inline at the end of the previous line — same size, italic, ochre highlight, with a thin red dot before it for editorial rhythm. No new paragraph, no big jump down. */ .hero__title-tail { display: inline; font-style: italic; color: var(--ochre); white-space: nowrap; margin-left: 0.35em; font-variation-settings: "opsz" 144, "SOFT" 100; } /* The cottage dot (.hero__house) — real at the start of the tail, so hover/click target only the dot, not the surrounding text. Default: perfect red circle. On hover (or when .hero.is-night is active = locked open after click) it grows ~2.6× and the SVG scene of a cosy night cottage takes over the background. A small ::after extends the invisible hit area so the visible cottage stays hoverable as it scales beyond the original 0.32em box. */ .hero__title-tail { position: relative; } .hero__house { position: relative; display: inline-block; width: 0.32em; height: 0.32em; background: var(--red); border-radius: 50%; margin-right: 0.3em; transform: translateY(-0.15em); transform-origin: 50% 95%; vertical-align: middle; background-size: 100% 100%; background-repeat: no-repeat; cursor: pointer; transition: transform var(--dur-3) var(--ease-out); } @media (prefers-reduced-motion: no-preference) { .hero__house:hover, .hero.is-night .hero__house { transform: translateY(-0.18em) scale(2.6) rotate(-3deg); background-color: transparent; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231A1F45'/%3E%3Cstop offset='0.5' stop-color='%232D3470'/%3E%3Cstop offset='1' stop-color='%235D5C8F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23s)'/%3E%3Ccircle cx='10' cy='8' r='0.6' fill='%23F5F1E6' opacity='0.8'/%3E%3Ccircle cx='18' cy='18' r='0.45' fill='%23F5F1E6'/%3E%3Ccircle cx='25' cy='5' r='0.85' fill='%23F5F1E6'/%3E%3Ccircle cx='25' cy='5' r='2' fill='%23F5F1E6' opacity='0.22'/%3E%3Ccircle cx='32' cy='14' r='0.4' fill='%23F5F1E6' opacity='0.55'/%3E%3Ccircle cx='42' cy='4' r='0.5' fill='%23F5F1E6' opacity='0.85'/%3E%3Ccircle cx='48' cy='20' r='0.7' fill='%23F5F1E6'/%3E%3Ccircle cx='56' cy='9' r='0.4' fill='%23F5F1E6' opacity='0.6'/%3E%3Ccircle cx='62' cy='25' r='0.5' fill='%23F5F1E6' opacity='0.7'/%3E%3Ccircle cx='38' cy='27' r='0.45' fill='%23F5F1E6' opacity='0.5'/%3E%3Ccircle cx='8' cy='28' r='0.4' fill='%23F5F1E6' opacity='0.7'/%3E%3Ccircle cx='92' cy='10' r='0.5' fill='%23F5F1E6' opacity='0.8'/%3E%3Ccircle cx='88' cy='30' r='0.4' fill='%23F5F1E6'/%3E%3Ccircle cx='75' cy='22' r='8' fill='%23D4A040' opacity='0.18'/%3E%3Ccircle cx='75' cy='22' r='6' fill='%23D4A040'/%3E%3Cpath fill='%230D0D2A' d='M50 35L62 43L62 33L78 33L78 52L92 58L92 100L8 100L8 58Z'/%3E%3Crect x='42' y='62' width='16' height='16' rx='2' fill='%230D0D2A'/%3E%3Crect x='43.5' y='63.5' width='5.5' height='5.5' rx='0.6' fill='%23D4A040'/%3E%3Crect x='51' y='63.5' width='5.5' height='5.5' rx='0.6' fill='%23D4A040'/%3E%3Crect x='43.5' y='71' width='5.5' height='5.5' rx='0.6' fill='%23D4A040'/%3E%3Crect x='51' y='71' width='5.5' height='5.5' rx='0.6' fill='%23D4A040'/%3E%3Cpath fill='%23C8362A' d='M44 100L44 90C44 84 56 84 56 90L56 100Z'/%3E%3Ccircle cx='53' cy='95' r='1' fill='%23D4A040'/%3E%3C/svg%3E"); } } /* CTA pill — tiny mono label placed to the RIGHT of the cottage, outside the dot's circle. Vertically centred on the dot. Absolutely positioned so it doesn't push surrounding text. Visible only on hover of the dot, hidden once night mode is on. */ .hero__house-cta { position: absolute; top: 50%; left: 100%; margin-left: 0.3em; white-space: nowrap; font-family: var(--font-mono); font-style: normal; font-size: 0.09em; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); opacity: 0; pointer-events: none; transform: translate(-0.3em, -50%); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); } @media (prefers-reduced-motion: no-preference) { .hero__house:hover ~ .hero__house-cta { opacity: 1; transform: translate(0, -50%); } } .hero.is-night .hero__house-cta { opacity: 0; } .hero__title em { color: var(--red); font-style: italic; } .hero__meta-line { display: flex; align-items: center; gap: 0.9rem; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); flex-wrap: wrap; } .hero__meta-rule { display: inline-block; width: 40px; height: 1px; background: var(--ink); } /* Hero subtitle — a compact "Dziennik praktyki" card: mono header + four big numbers, no footer band. The card sits in the coda opposite the CTA stack. */ .hero__subtitle { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; } .hero__ledger { margin-top: 0; margin-bottom: 0; width: 100%; } .hero__ledger .ledger__row { margin-bottom: 0; } /* Hero-scoped ledger sizing — quieter than the about-section default. Numbers shrink ~25%, captions and header lose a hair of weight, the cell padding tightens so the card sits in the coda without muscling out the CTAs to its right. */ .hero__ledger .ledger__num { font-size: clamp(1.55rem, 1.05rem + 1.5vw, 2.3rem); line-height: 0.95; } .hero__ledger .ledger__cap { font-size: 0.56rem; line-height: 1.3; } .hero__ledger .ledger__cell { padding: 0.3rem 0.7rem; gap: 0.25rem; } /* Soften every cell to --ink-soft so the row reads as one quiet editorial slab (chagall accent on cell 3 dropped — blue felt like noise next to the warm hero palette). */ .hero__ledger .ledger__cell:nth-child(1) .ledger__num, .hero__ledger .ledger__cell:nth-child(2) .ledger__num, .hero__ledger .ledger__cell:nth-child(3) .ledger__num, .hero__ledger .ledger__cell:nth-child(4) .ledger__num { color: var(--ink-soft); } .hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* Hero CTAs — flat editorial chips. No glow, no gloss inset, no drop shadow; just rounded corners + clean color transitions on hover. */ .hero__cta .btn--red, .hero__cta .btn--ghost { border-radius: 14px; box-shadow: none; transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); } .hero__cta .btn--red { background-color: color-mix(in oklab, var(--chagall) 86%, transparent); color: var(--paper-bright); border-color: color-mix(in oklab, var(--chagall-deep) 60%, transparent); } .hero__cta .btn--red:hover { background-color: color-mix(in oklab, var(--chagall-deep) 90%, transparent); color: var(--paper-bright); border-color: var(--chagall-deep); } .hero__cta .btn--red .btn__sq { background: var(--paper-bright); } .hero__cta .btn--red:hover .btn__sq { background: var(--ochre); } .hero__cta .btn--ghost { background-color: color-mix(in oklab, var(--chagall) 10%, transparent); color: var(--chagall-deep); border-color: color-mix(in oklab, var(--chagall) 55%, transparent); } .hero__cta .btn--ghost:hover { background-color: color-mix(in oklab, var(--chagall) 18%, transparent); color: var(--chagall-deep); border-color: var(--chagall); } .hero__cta .btn--ghost .btn__sq { background: var(--chagall); } .hero__cta .btn--ghost:hover .btn__sq { background: var(--ochre); transform: rotate(45deg); } /* Hero filmstrip — outer wrapper for the Chagall-framed contact-sheet card. Holds a painted blue plate (::before) that bleeds 10-16px beyond the card edges, acting as the frame. The actual card lives inside as .ig-card with its own paper interior and rounded corners. No overflow:hidden here — the plate has to extend outside. */ .hero__filmstrip { position: relative; width: 100%; height: clamp(280px, 38vh, 460px); isolation: isolate; } /* Painted Chagall plate — same diagonal paint-streak + fractal-noise stack as the original .hero__visual::before. Bleeds 10-16px around the card on each side; sits behind the card via z-index: -1. */ .hero__filmstrip::before { content: ""; position: absolute; inset: -12px -16px -10px -12px; z-index: -1; pointer-events: none; background-color: var(--chagall); background-image: repeating-linear-gradient(22deg, color-mix(in oklab, var(--chagall-soft) 10%, transparent) 0px, color-mix(in oklab, var(--chagall-soft) 10%, transparent) 1px, transparent 1px, transparent 8px ), url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E"); background-size: 100% 100%, 340px 340px, 140px 140px; background-repeat: repeat, repeat, repeat; background-blend-mode: overlay, multiply, soft-light; border-radius: 36px 14px 14px 16px; } .hero__floor { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 0; gap: 0; margin-top: var(--s-4); } .hero__meta-item { display: flex; align-items: baseline; gap: 0.7rem; padding: var(--s-2); border-right: 1px solid var(--line-soft); } .hero__meta-item:last-child { border-right: 0; } .hero__meta-val { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .hero__meta-item--end { justify-content: flex-end; } .hero__scroll { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding-inline: var(--s-2); transition: color var(--dur-1) var(--ease); } .hero__scroll:hover { color: var(--red); } @media (max-width: 760px) { .hero__floor { grid-template-columns: 1fr 1fr; } .hero__meta-item:nth-child(2) { border-right: 0; } .hero__meta-item--end { display: none; } } /* ── ABOUT — editorial ledger card ──────────────────────── Horizontal data strip that follows the bio: cells of factual numbers (visits, breeds, return-rate), framed as a magazine ledger. Replaces the old vertical sidecard whose info (city, IG, languages) already lived elsewhere on the page. */ /* Editorial ledger — quietly floats on the page. No top/bottom borders, no enclosing frame. The eyebrow row sits on its own; the four cells align via column rhythm; the CTA reads as a hairline foot-note. */ .ledger { margin-top: var(--s-2); background: transparent; border: 0; padding: 0; } .ledger__row { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 0; padding: 0; margin: 0 0 var(--s-2); } @media (max-width: 760px) { .ledger__row { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-2); } } .ledger__cell { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem 0.9rem; border-left: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); } .ledger__cell:first-child { border-left: 0; padding-left: 0; } .ledger__num { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 0.95; color: var(--ink); letter-spacing: -0.04em; font-weight: 500; font-variation-settings: "opsz" 144; } /* Restrained colour rhythm — three cells stay ink, one carries the chagall accent. The previous four-colour rainbow (red/blue/ochre/ink) read as too loud for a stats card; the new pattern is "ink, ink, blue, ink" — quiet typographic data with one moment of voice. */ .ledger__cell:nth-child(1) .ledger__num { color: var(--ink); } .ledger__cell:nth-child(2) .ledger__num { color: var(--ink); } .ledger__cell:nth-child(3) .ledger__num { color: var(--chagall); } .ledger__cell:nth-child(4) .ledger__num { color: var(--ink); } .ledger__cap { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); line-height: 1.3; } @media (max-width: 760px) { .ledger { padding: var(--s-2) 0; } } /* Always-on outline on the section title — what the user sees on text selection, baked permanently into the typography. Implemented via paint-order + text-stroke so the inner ink stays solid and the outline hairline sits cleanly outside the glyph. */ .section__title--outlined { paint-order: stroke fill; -webkit-text-stroke: 1.4px var(--ink); text-stroke: 1.4px var(--ink); color: var(--ink); } .section__title--outlined em { -webkit-text-stroke: 1.4px var(--ink); text-stroke: 1.4px var(--ink); color: var(--red); } .about__grid { display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 7fr); gap: clamp(var(--s-3), 4vw, var(--s-5)); align-items: start; } @media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: var(--s-3); } } /* Personal-facts ledger — sits inside .about__content, directly above the DUSZA toggle. Shares borders + subtle chagall tint with .soul so the two read as a stacked editorial card: stats on top, DUSZA banner beneath, no gap between them. Three cells with the classic ink / red / chagall colour rhythm. */ .about__ledger { margin-top: var(--s-4); width: 100%; background: color-mix(in oklab, var(--chagall) 4%, transparent); border-top: 1px solid var(--line); padding: var(--s-2); } .about__ledger + .soul { margin-top: 0; } .about__ledger .ledger__row { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; } .about__ledger .ledger__num { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); line-height: 0.95; } .about__ledger .ledger__cap { font-size: 0.6rem; line-height: 1.3; } .about__ledger .ledger__cell { padding: 0.4rem 0.9rem; gap: 0.3rem; } .about__ledger .ledger__cell:first-child { padding-left: 0; border-left: 0; } /* Colour rhythm — all three cells ink (red/chagall accents dropped). */ .about__ledger .ledger__cell:nth-child(1) .ledger__num { color: var(--ink); } .about__ledger .ledger__cell:nth-child(2) .ledger__num { color: var(--ink); } .about__ledger .ledger__cell:nth-child(3) .ledger__num { color: var(--ink); } /* Keep 3 columns on mobile — they fit cleanly in the column width. Override the global .ledger__row 760px collapse. */ @media (max-width: 760px) { .about__ledger .ledger__row { grid-template-columns: repeat(3, 1fr); row-gap: 0; } } .about__visual { position: relative; aspect-ratio: 4 / 5; max-width: 380px; margin: 0; } /* Plinth removed entirely — the portrait stands alone with the red pebble (.about__shape--red) carrying the brand accent. */ .about__card { display: none; } .about__portrait { width: 100%; height: 100%; overflow: hidden; background: transparent; border: none; border-radius: 18px; position: relative; z-index: 3; box-shadow: none; } .about__portrait::before { display: none; } .about__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: contrast(1.04); } .about__shape { position: absolute; pointer-events: none; transition: transform var(--dur-4) var(--ease); } .about__shape--red { /* Editorial accent blot — large enough to read from across the page, intentionally overflowing the right edge of the portrait into the column gutter so the decor uses the page margin as breathing space (not as wasted air). */ width: 36px; height: 36px; background-color: var(--red); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); background-size: 60px 60px; background-blend-mode: multiply; border-radius: 58% 42% 52% 48% / 48% 56% 44% 52%; top: -12px; right: -16px; z-index: 4; transform: rotate(8deg); } .about__shape--circle { display: none; } .about__visual:hover .about__shape--red { transform: rotate(-6deg); border-radius: 48% 52% 60% 40% / 56% 44% 52% 48%; } .about__visual:hover .about__card { transform: translate(-3px, -2px); } /* Editorial signature plate — replaces the rotating "darkroom stamp". Two short ink rules bracket the new caption "Yauhen · opiekun psa w Warszawie" set in display italic + mono caps. Sits flush at the bottom-left of the print so it reads as a typeset photo credit. */ /* Photo credit — typeset signature line, no card. Sits flush along the bottom edge of the print like a darkroom annotation: italic serif numeral, a hairline rule, mono-caps name. No box, no shadow. */ .about__stamp { position: absolute; bottom: -2.6rem; left: 0; z-index: 5; display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0; background: transparent; border: 0; border-radius: 0; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); transform: none; box-shadow: none; } .about__stamp-rule { width: 18px; height: 1px; background: var(--ink); opacity: 0.35; align-self: center; } .about__stamp-name { color: var(--ink-mute); font-weight: 500; } @media (max-width: 700px) { .about__card { inset: 10px -10px -10px 10px; border-radius: 3px; } .about__shape--red { width: 26px; height: 26px; top: -8px; right: -6px; } .about__stamp { font-size: 0.6rem; padding: 0.4rem 0.65rem; } } .about__content { padding-top: var(--s-2); } /* Quiet breathing room around the lead: a tighter rule, more space to the left of the text, and a softer bottom margin so the body paragraphs don't feel glued to the headline quote. */ /* Editorial lead paragraph — NOT a quote. Display italic carries the visual weight; no open-quote glyph, no rail, no border. A short red rule above the line marks it as the opening statement of the about column without making it look like dialogue. */ .about__quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); line-height: 1.25; color: var(--ink); max-width: 32ch; margin: var(--s-2) 0 var(--s-3); padding-top: 0.5rem; border: 0; font-variation-settings: "opsz" 144, "SOFT" 100; position: relative; } .about__quote::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 2px; background: var(--red); } .about__quote a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, var(--red) 65%, transparent); } .about__quote a:hover { color: var(--red); } .about__body { color: var(--ink-soft); max-width: var(--measure); font-family: var(--font-body); } .about__body p { margin-bottom: var(--s-2); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; } /* Languages strip lives OUTSIDE about__body so it spans the full width of the right column — matching the facts rail directly beneath it. */ .about__lang { display: block; width: 100%; max-width: none; margin-top: var(--s-2); margin-bottom: 0; padding: var(--s-2) var(--s-3) var(--s-2) 1.1rem; background: var(--paper-warm); border-left: 3px solid var(--chagall); font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); } /* Micro-quotes / inline annotations — uniform 3px ochre rule */ .about__promo-note, .soul__aside { margin-top: var(--s-2); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); border-left: 3px solid var(--ochre); padding-left: 0.85rem; line-height: 1.45; } /* Belarusian-language bequest — paper card calling out that on request Yauhen sends a scholarly paper describing a unique find. Sits inside the archeology chapter, stylistically related to .quote and .ledger: paper-warm surface, hairline border, BY tag in mono caps, body in display italic, signed credit in mono. */ .soul__bequest { margin-top: var(--s-3); background: color-mix(in oklab, var(--chagall) 6%, var(--paper)); border: 1px solid color-mix(in oklab, var(--chagall) 22%, transparent); border-radius: 14px; padding: 1rem 1.2rem 1.05rem; display: flex; flex-direction: column; gap: 0.55rem; box-shadow: 4px 4px 0 0 color-mix(in oklab, var(--chagall) 20%, transparent); } .soul__bequest-tag { display: inline-block; align-self: flex-start; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.25rem 0.55rem; background: var(--chagall); color: var(--paper-bright); border-radius: 4px; } .soul__bequest-body { margin: 0; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.55; color: var(--ink); } .soul__bequest-body strong { color: var(--ink); font-weight: 600; } .soul__bequest-body em { font-family: var(--font-display); font-style: italic; color: var(--red); font-size: 1.05em; } .soul__bequest-credit { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); padding-top: 0.55rem; border-top: 1px dashed color-mix(in oklab, var(--chagall) 25%, transparent); } /* ── SOUL / DUSZA — immersive biographical timeline ───────── Opens from the toggle banner into a vertical timeline. Each chapter sits on a thin rail with a year marker on top, so the reader follows the biography like a printed feature: numbered, dated, paced. */ .soul { margin-top: var(--s-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--chagall) 4%, transparent); transition: background var(--dur-2) var(--ease); } .soul[open] { background: linear-gradient(180deg, color-mix(in oklab, var(--chagall) 5%, transparent) 0%, var(--paper) 200px), var(--paper); } .soul__toggle { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; padding: var(--s-3) var(--s-2); cursor: pointer; list-style: none; user-select: none; } .soul__toggle::-webkit-details-marker { display: none; } .soul__label { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); color: var(--ink); letter-spacing: -0.02em; font-weight: 500; } .soul__chev { font-family: var(--font-mono); font-size: 1.2rem; color: var(--red); line-height: 1; transition: transform var(--dur-1) var(--ease); will-change: transform; } .soul[open] .soul__chev { transform: scaleY(-1); } .soul__body { padding: var(--s-4) clamp(var(--s-2), 3vw, var(--s-4)) var(--s-5); border-top: 1px solid var(--line); color: var(--ink-soft); line-height: 1.7; max-width: 920px; margin-inline: auto; } .soul__intro { max-width: 60ch; margin: 0 auto var(--s-4); } .soul__preface { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px dashed var(--line-soft); line-height: 1.5; } .soul__preface em { font-family: var(--font-display); font-size: 1rem; font-style: italic; color: var(--red); letter-spacing: -0.01em; text-transform: none; } .soul__preface a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ochre); text-underline-offset: 3px; } .soul__preface a:hover { color: var(--red); } .soul__lead { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); color: var(--ink); line-height: 1.45; margin: 0; font-weight: 500; } /* Vertical timeline of chapters — a thin rail runs down the left margin, each chapter pinned to it with a numbered marker and a year tag above the title. Reads like a documentary calendar. */ /* Soul timeline — rebuilt for pixel-stable alignment. • Rail x-position is a single CSS variable (--rail-x) used by both the vertical line AND the chapter dots, so they can never drift at different viewport widths. • Year sits to the LEFT of the rail as an inline badge; the chapter card sits to the right. */ /* Rail hugs the LEFT of the column at a single fixed offset. Years become a top-line eyebrow inside the chapter card, so the visual reads as: rail · dot · [year eyebrow / number · title / body]. The line and the years are LEFT-of-text rather than centered. */ /* Chronological rail — extracted out of the text space, parked in its own column to the LEFT of the 01-05 numbers. Each chapter row is a three-column grid: rail | number | content. The line lives in the rail column; the numbers form their own quiet rhythm next to it. */ .soul__timeline { list-style: none; margin: var(--s-4) 0; padding: 0; position: relative; --rail-w: 1.8rem; --num-w: 2.6rem; } .soul__timeline::before { content: ""; position: absolute; left: calc(var(--rail-w) / 2); top: 0.4rem; bottom: 0.4rem; width: 1.5px; background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--ink) 22%, transparent) 6%, color-mix(in oklab, var(--ink) 40%, transparent) 50%, color-mix(in oklab, var(--ink) 18%, transparent) 94%, transparent 100%); z-index: 0; } .soul__chapter { position: relative; display: grid; grid-template-columns: var(--rail-w) var(--num-w) 1fr; column-gap: clamp(0.7rem, 0.4rem + 0.6vw, 1.2rem); padding-bottom: var(--s-4); margin-bottom: var(--s-4); align-items: start; } .soul__chapter:last-child { padding-bottom: 0; margin-bottom: 0; } .soul__chapter:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--rail-w) + var(--num-w)); right: 0; bottom: 0; border-top: 1px dashed color-mix(in oklab, var(--ink) 14%, transparent); } /* Rail tick — sits ON the line at the start of each chapter. Acts as a chronological milestone, not a clickable affordance. */ .soul__chapter-rail { position: relative; grid-column: 1; grid-row: 1 / span 2; justify-self: center; align-self: start; margin-top: 0.55rem; width: 9px; height: 9px; background: var(--ink); z-index: 2; box-shadow: 0 0 0 5px var(--paper); transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .soul__chapter:nth-child(odd) .soul__chapter-rail { background: var(--red); } .soul__chapter:hover .soul__chapter-rail { transform: rotate(45deg); } /* Chapter number — its own column, NEXT to the rail. Display italic, muted ink. Alignment baseline matches the chapter heading so the eye reads "01 · Archeologia" as a single line on wide screens. */ .soul__chapter-head { grid-column: 3; display: grid; grid-template-columns: 1fr; grid-template-areas: "year" "h4"; row-gap: 0.45rem; margin: 0 0 var(--s-2); padding-bottom: 0.7rem; border-bottom: 1px solid var(--line-soft); } .soul__chapter-year { grid-area: year; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); font-weight: 500; line-height: 1.2; } .soul__chapter:nth-child(odd) .soul__chapter-year { color: var(--ink); } .soul__h { grid-area: h4; font-family: var(--font-display); font-size: clamp(1.2rem, 0.95rem + 1vw, 1.6rem); color: var(--ink); letter-spacing: -0.02em; margin: 0; font-weight: 500; line-height: 1.2; } .soul__chapter-body { grid-column: 3; font-size: 1rem; } .soul__chapter-body p + p { margin-top: 0.8rem; } @media (max-width: 640px) { .soul__timeline { --rail-w: 1.4rem; --num-w: 2.1rem; } } /* Sfery zainteresowań — set as inline running text, not button-chips. Each term has a hairline dotted underline that hints "more on hover"; the tooltip rises below in our editorial dossier style. */ .soul__fields { margin: var(--s-3) 0; padding: 0; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.7; color: var(--ink); isolation: isolate; } .soul__fields-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-right: 0.35rem; } .soul__field { position: relative; display: inline; cursor: help; font-style: italic; color: var(--ink); text-decoration: underline dotted color-mix(in oklab, var(--ink) 40%, transparent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; outline: 0; transition: color var(--dur-1) var(--ease); } .soul__field:hover, .soul__field:focus-visible { color: var(--red); text-decoration-color: var(--red); } .soul__field-sep { color: var(--ink-mute); margin: 0 0.35rem; } .soul__field[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); min-width: 240px; max-width: 320px; padding: 0.6rem 0.8rem; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-style: normal; font-size: 0.78rem; line-height: 1.45; letter-spacing: 0.01em; text-transform: none; text-decoration: none; border-top: 2px solid var(--ochre); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); z-index: 100; } .soul__field[data-tip]:hover::after, .soul__field[data-tip]:focus-visible::after { opacity: 1; transform: translateY(0); } @media (max-width: 600px) { .soul__field[data-tip]::after { min-width: 200px; max-width: calc(100vw - 4rem); left: 0; } } /* ── SERVICES / OFFER ──────────────────────────────────── */ .services { position: relative; } .services__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .services .wrap { position: relative; z-index: 2; } .offer { list-style: none; border-top: 1px solid color-mix(in oklab, var(--paper) 25%, transparent); } .offer__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 0; position: relative; transition: background var(--dur-2) var(--ease); } /* ── COLOUR SYSTEM · ★-style bands ─────────────────────────── Every offer is a banded card: solid wash background + 1px top/bottom borders in its palette. Hover brightens the wash only (no padding shift, no metallic swap, no movement). */ /* Disabled / temporarily unavailable — desaturated wash, no hover brightening, button replaced with a passive label. Card still visible so visitors see the service exists; only the booking flow is gated. */ .offer__item--unavailable { opacity: 0.55; filter: grayscale(40%); pointer-events: none; background: color-mix(in oklab, var(--line-soft) 22%, transparent) !important; border-top-color: color-mix(in oklab, var(--ink-mute) 30%, transparent) !important; border-bottom-color: color-mix(in oklab, var(--ink-mute) 30%, transparent) !important; } .offer__unavailable-badge { display: inline-block; margin: 0 0 0.6em 0; padding: 2px 8px; border: 1px solid color-mix(in oklab, var(--red) 40%, transparent); color: color-mix(in oklab, var(--red) 70%, var(--ink)); background: color-mix(in oklab, var(--red) 6%, transparent); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; font-family: var(--font-label, inherit); } .offer__item--unavailable:hover { background: color-mix(in oklab, var(--line-soft) 22%, transparent) !important; } .offer__book--disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; } /* Ankieta radio for a disabled service is hidden from interaction. */ .ank-radio.is-disabled, label.is-disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; } /* 01 · intro walk — chagall-deep (deepest blue, "first step into depth"). Same family as 03/04 but darker — visually it opens the blue progression that 03 and 04 continue. */ .offer__item--gate { background: color-mix(in oklab, var(--chagall-deep) 14%, transparent); border-top: 1px solid color-mix(in oklab, var(--chagall-deep) 50%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--chagall-deep) 50%, transparent); } .offer__item--gate:hover { background: color-mix(in oklab, var(--chagall-deep) 24%, transparent); } /* 02 · main boarding — red, the main offer. To emphasize without gold: stronger background, 2px borders (vs 1px on others), and paper-bright numerals (the brightest text colour) so the eye lands here first. */ .offer__item--feature { background: color-mix(in oklab, var(--red) 18%, transparent); border-top: 2px solid color-mix(in oklab, var(--red) 60%, transparent); border-bottom: 2px solid color-mix(in oklab, var(--red) 60%, transparent); } .offer__item--feature:hover { background: color-mix(in oklab, var(--red) 28%, transparent); } /* ★ · social — moss (rescued / second chance) */ .offer__item--social { background: color-mix(in oklab, var(--moss) 12%, transparent); border-top: 1px solid color-mix(in oklab, var(--moss) 45%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--moss) 45%, transparent); } .offer__item--social:hover { background: color-mix(in oklab, var(--moss) 22%, transparent); } /* 03 · home boarding (at owner's) — soft ceramic blue */ .offer__item[data-service="home-boarding"] { background: color-mix(in oklab, var(--chagall-soft) 14%, transparent); border-top: 1px solid color-mix(in oklab, var(--chagall-soft) 45%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--chagall-soft) 45%, transparent); } .offer__item[data-service="home-boarding"]:hover { background: color-mix(in oklab, var(--chagall-soft) 24%, transparent); } /* 04 · daily walking — cobalt chagall */ .offer__item[data-service="walking"] { background: color-mix(in oklab, var(--chagall) 13%, transparent); border-top: 1px solid color-mix(in oklab, var(--chagall) 45%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--chagall) 45%, transparent); } .offer__item[data-service="walking"]:hover { background: color-mix(in oklab, var(--chagall) 22%, transparent); } /* 05 · cat visits — wine (different species, separate palette) */ .offer__item[data-service="cat"] { background: color-mix(in oklab, var(--wine) 14%, transparent); border-top: 1px solid color-mix(in oklab, var(--wine) 45%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--wine) 45%, transparent); } .offer__item[data-service="cat"]:hover { background: color-mix(in oklab, var(--wine) 24%, transparent); } /* 06–08 · Photo trio — slate (studio-grey, archival photographic). Distinct from any other palette in the brand: cool slate-blue, unsaturated, reads as "darkroom / archival". */ .offer__item--photo { background: color-mix(in oklab, #3A4654 16%, transparent); border-top: 1px solid color-mix(in oklab, #3A4654 50%, transparent); border-bottom: 1px solid color-mix(in oklab, #3A4654 50%, transparent); } .offer__item--photo:hover { background: color-mix(in oklab, #3A4654 26%, transparent); } .offer__no { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 1rem + 2.5vw, 3.4rem); line-height: 1; color: var(--ochre); min-width: 3.4rem; padding-right: 0.45rem; font-variation-settings: "opsz" 144, "SOFT" 100; } /* ── SOLID NUMERAL COLOURS PER ITEM ── Each item's number + amount uses a solid colour drawn from its band palette. The ★ keeps a silver metallic gradient (a small gesture of "polish" for the social tier). 02 uses paper-bright (the strongest text colour) — that, combined with its 2px frame, marks it as the main offer without resorting to gold. */ .offer__item--gate .offer__no, .offer__item--gate .offer__amount { color: color-mix(in oklab, var(--chagall-soft) 80%, var(--paper)); } .offer__item--feature .offer__no, .offer__item--feature .offer__amount { color: var(--paper-bright); } .offer__item--social .offer__no, .offer__item--social .offer__amount { background: linear-gradient(135deg, #EAECEF 0%, #9CA1A8 32%, #DCE0E4 62%, #888D94 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Photo numerals + amount — muted slate-blue solid (matches band). */ .offer__item--photo .offer__no, .offer__item--photo .offer__amount { color: #8DA0B5; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; } /* 03 / 04 — solid Chagall blues (no metallic; everyday services) */ .offer__item[data-service="home-boarding"] .offer__no, .offer__item[data-service="home-boarding"] .offer__amount { color: var(--chagall-soft); } .offer__item[data-service="walking"] .offer__no, .offer__item[data-service="walking"] .offer__amount { color: var(--chagall-soft); } /* 05 — wine (cat = separate species, distinct palette) */ .offer__item[data-service="cat"] .offer__no, .offer__item[data-service="cat"] .offer__amount { color: color-mix(in oklab, var(--wine) 80%, var(--paper)); } /* 02b ★ social — moss wash (rescued / adopted = nature / second chance) */ .offer__item--social { background: color-mix(in oklab, var(--moss) 10%, transparent); border-top: 1px solid color-mix(in oklab, var(--moss) 40%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--moss) 40%, transparent); } .offer__item--social .offer__no { font-size: clamp(2.4rem, 1.7rem + 2vw, 3.2rem); } .offer__badge--social { background: color-mix(in oklab, var(--moss-deep) 90%, transparent); color: var(--paper); } .offer__body { color: color-mix(in oklab, var(--paper) 80%, transparent); } .offer__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.3rem; flex-wrap: wrap; } .offer__name { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); line-height: 1.1; color: var(--paper-bright) !important; letter-spacing: -0.02em; font-weight: 600; font-variation-settings: "opsz" 96, "SOFT" 50; } .offer__badge { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase; background: var(--red); color: var(--paper); padding: 0.3rem 0.55rem; } .offer__badge--gate { background: var(--chagall-deep); color: var(--paper-bright); } .offer__badge--photo { background: #3A4654; color: var(--paper-bright); } .offer__desc { font-size: 0.98rem; line-height: 1.55; max-width: 58ch; margin-top: 0.35rem; } .offer__desc a { color: var(--ochre); border-bottom: 1px solid currentColor; } .offer__desc a:hover { color: var(--paper); } .offer__note { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em; color: var(--ochre); margin-top: 0.55rem; padding-top: 0.4rem; border-top: 1px dashed color-mix(in oklab, var(--paper) 25%, transparent); max-width: 60ch; line-height: 1.5; } .offer__note strong { color: var(--ochre); font-weight: 600; } .section--dark .offer__note strong { color: var(--ochre); } .offer__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; min-width: 10rem; } .offer__price { display: grid; grid-template-columns: auto; justify-items: end; align-items: baseline; text-align: right; color: var(--paper); } .offer__prefix { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, var(--paper) 60%, transparent); margin-bottom: 0.3rem; } .offer__amount { font-family: var(--font-display); font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3.6rem); line-height: 0.9; color: var(--paper); letter-spacing: -0.04em; font-weight: 500; display: inline-flex; align-items: baseline; gap: 0.3rem; font-variation-settings: "opsz" 144, "SOFT" 30; } .offer__currency { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; color: color-mix(in oklab, var(--paper) 75%, transparent); margin-top: 0.3rem; } .offer__unit { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, var(--paper) 55%, transparent); margin-top: 0.3rem; } .offer__book { align-self: stretch; width: 100%; justify-content: center; } /* Dark section overrides for book button */ .section--dark .offer__book.btn--ghost { color: var(--paper); border-color: color-mix(in oklab, var(--paper) 40%, transparent); } .section--dark .offer__book.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } @media (max-width: 760px) { .offer__item { grid-template-columns: auto 1fr; row-gap: var(--s-2); padding: var(--s-3) 0; } .offer__side { grid-column: 1 / -1; align-items: stretch; padding-top: var(--s-1); border-top: 1px dashed color-mix(in oklab, var(--paper) 20%, transparent); } .offer__price { justify-items: start; text-align: left; } } /* Portfolio strip */ .portfolio { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid color-mix(in oklab, var(--paper) 25%, transparent); } .portfolio__head { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--s-3); } .portfolio__title { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); color: var(--paper-bright) !important; font-weight: 600; font-variation-settings: "opsz" 96, "SOFT" 50; } .portfolio__sub { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: color-mix(in oklab, var(--paper) 65%, transparent); max-width: 64ch; } .portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } @media (max-width: 760px) { .portfolio__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); } } @media (max-width: 480px) { .portfolio__grid { grid-template-columns: 1fr; gap: var(--s-2); } } .portfolio__tile { appearance: none; background: transparent; border: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); color: inherit; text-align: left; display: grid; grid-template-rows: 1fr auto auto; padding: 0; cursor: pointer; overflow: hidden; position: relative; transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .portfolio__tile:hover { border-color: var(--ochre); transform: translateY(-2px); } .portfolio__tile-cover { position: relative; aspect-ratio: 4/3; overflow: hidden; background: color-mix(in oklab, var(--paper) 7%, transparent); } .portfolio__tile--vertical .portfolio__tile-cover { aspect-ratio: 3/4; } .portfolio__tile--horizontal .portfolio__tile-cover { aspect-ratio: 4/3; } .portfolio__tile--mixed .portfolio__tile-cover { aspect-ratio: 1/1; } /* Editorial duotone — desaturate to a soft, paper-warm monochrome with a touch of contrast lift, so all series read as one coherent collection. On hover the image fades to full colour. Replaces the previous sepia filter which tinted skin tones magenta and felt cheap. */ .portfolio__tile-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-pos, center); display: block; opacity: 0; /* Crop zoom — applied via inline custom property by the cover editor. */ transform: scale(var(--cover-scale, 1)); transform-origin: var(--cover-pos, center); filter: grayscale(0.92) contrast(1.08) brightness(0.97); transition: opacity var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), filter var(--dur-3) var(--ease); } /* Warm cream overlay sits above the desaturated image — gives the whole grid a unified, gallery-print feel without nuking shadow detail. */ .portfolio__tile-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--paper) 12%, transparent) 0%, color-mix(in oklab, var(--ochre) 14%, transparent) 100%); mix-blend-mode: multiply; pointer-events: none; opacity: 1; transition: opacity var(--dur-2) var(--ease); z-index: 1; } /* Tile number overlay rides above the wash */ .portfolio__tile-orient { z-index: 3; } .portfolio__tile:hover .portfolio__tile-img, .portfolio__tile:focus-visible .portfolio__tile-img { filter: none; } .portfolio__tile:hover .portfolio__tile-cover::after, .portfolio__tile:focus-visible .portfolio__tile-cover::after { opacity: 0; } /* Drag-crop edit mode ────────────────────────────────────── */ .portfolio__edit-bar { margin-top: var(--s-2); display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: color-mix(in oklab, var(--paper) 60%, transparent); } .portfolio__edit-toggle, .portfolio__edit-save, .portfolio__edit-revert { appearance: none; border: 1px solid color-mix(in oklab, var(--paper) 28%, transparent); background: transparent; color: color-mix(in oklab, var(--paper) 78%, transparent); padding: 0.45rem 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .portfolio__edit-toggle:hover, .portfolio__edit-revert:hover { color: var(--paper); border-color: var(--paper); } .portfolio__edit-toggle.is-on { background: var(--ochre); border-color: var(--ochre); color: var(--ink); } .portfolio__edit-save { border-color: var(--ochre); color: var(--ochre); } .portfolio__edit-save:hover { background: var(--ochre); color: var(--ink); } .portfolio__edit-save.is-pending { background: var(--ochre); color: var(--ink); border-color: var(--ochre); animation: pfSavePulse 1.6s var(--ease) infinite; } @keyframes pfSavePulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ochre) 55%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--ochre) 0%, transparent); } } .portfolio__edit-status { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; } .portfolio__edit-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in oklab, var(--paper) 60%, transparent); transition: background var(--dur-1) var(--ease); } .portfolio__edit-toggle.is-on .portfolio__edit-dot { background: var(--red); } .portfolio__grid--editing .portfolio__tile { cursor: grab; } /* The cover must claim all pointer/touch gestures while editing so the page doesn't scroll under the finger and the drag receives every event. */ .portfolio__grid--editing .portfolio__tile-cover { cursor: grab; touch-action: none; user-select: none; } .portfolio__grid--editing .portfolio__tile-cover * { pointer-events: none; } .portfolio__grid--editing .portfolio__tile--dragging, .portfolio__grid--editing .portfolio__tile--dragging .portfolio__tile-cover { cursor: grabbing; } .portfolio__grid--editing .portfolio__tile-img { filter: none; } .portfolio__grid--editing .portfolio__tile-cover::after { opacity: 0; } .portfolio__grid--editing .portfolio__tile { outline: 2px dashed color-mix(in oklab, var(--ochre) 70%, transparent); outline-offset: -2px; } .portfolio__tile-orient { /* Orientation hint (↕ / ↔) is editorial chrome we hide from regular visitors — only visible in admin cover-crop mode. */ display: none; position: absolute; top: 8px; right: 8px; background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.1rem 0.4rem; border: 1px solid var(--line); z-index: 2; opacity: 0.85; } .portfolio__grid--editing .portfolio__tile-orient { display: inline-block; } .portfolio__tile--has-cover .portfolio__tile-img { opacity: 1; } /* Hover should ADD a small zoom on top of the saved --cover-scale, not replace it. Without calc(), hovering a tile that has a saved zoom of 1.5 would visibly shrink to 1.04 and "flash" the old crop. */ .portfolio__tile:hover .portfolio__tile-img { transform: scale(calc(var(--cover-scale, 1) * 1.04)); } /* In edit mode the saved zoom is the truth — don't let hover wiggle it. */ .portfolio__grid--editing .portfolio__tile:hover .portfolio__tile-img { transform: scale(var(--cover-scale, 1)); } .portfolio__tile-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-mono); color: color-mix(in oklab, var(--paper) 60%, transparent); letter-spacing: 0.1em; text-transform: lowercase; text-align: center; padding: var(--s-2); } .portfolio__tile--has-cover .portfolio__tile-placeholder { display: none; } .portfolio__tile-folder { font-size: 0.68rem; letter-spacing: 0.08em; } .portfolio__tile-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.7rem var(--s-2) 0.2rem; } .portfolio__tile-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--paper); letter-spacing: -0.01em; } .portfolio__tile-count { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ochre); } .portfolio__tile-hint { padding: 0 var(--s-2) 0.8rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, var(--paper) 55%, transparent); } /* ── PORTFOLIO LIGHTBOX ────────────────────────────────── */ /* ── Series viewer (vertical fullscreen carousel) ───────────────── A modal overlay that owns the entire viewport. Header is the editorial breadcrumb (Portfolio › Title). Body is a snap-scroll column of full-height slides, each with its own caption + share. Right-side dot rail shows progress through the series. */ .pf-vw { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--paper); display: grid; grid-template-rows: auto 1fr; overflow: hidden; } .pf-vw[hidden] { display: none; } .pf-vw__head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; background: linear-gradient(180deg, rgba(11,11,11,0.92), rgba(11,11,11,0)); } .pf-vw__crumb { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: baseline; gap: 0.55rem; } .pf-vw__crumb-link { color: color-mix(in oklab, var(--paper) 65%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--paper) 35%, transparent); padding-bottom: 1px; } .pf-vw__crumb-link:hover { color: var(--ochre); border-bottom-color: var(--ochre); } .pf-vw__crumb-sep { color: color-mix(in oklab, var(--paper) 40%, transparent); } .pf-vw__crumb-here { color: var(--paper); font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -0.01em; font-style: italic; text-transform: none; } .pf-vw__close { appearance: none; background: transparent; color: var(--paper); border: 1px solid color-mix(in oklab, var(--paper) 30%, transparent); width: 40px; height: 40px; cursor: pointer; line-height: 1; font-size: 1.4rem; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .pf-vw__close:hover { background: var(--red); border-color: var(--red); } .pf-vw__scroll { overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none; } .pf-vw__scroll::-webkit-scrollbar { display: none; } .pf-vw__slide { position: relative; min-height: 100vh; min-height: 100dvh; width: 100%; scroll-snap-align: start; display: grid; place-items: center; padding: 80px 80px 60px; } @media (max-width: 720px) { .pf-vw__slide { padding: 70px 16px 60px; } } .pf-vw__figure { position: relative; max-width: 100%; max-height: 100%; display: grid; place-items: center; margin: 0; } .pf-vw__img { max-width: 100%; max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); object-fit: contain; display: block; background: #050505; } .pf-vw__slide--vertical .pf-vw__img { max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); } .pf-vw__caption { position: absolute; bottom: -36px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab, var(--paper) 60%, transparent); } .pf-vw__caption-no { color: var(--paper); } .pf-vw__caption-of { color: color-mix(in oklab, var(--paper) 40%, transparent); } .pf-vw__share { appearance: none; background: transparent; border: 1px solid color-mix(in oklab, var(--paper) 28%, transparent); color: color-mix(in oklab, var(--paper) 80%, transparent); padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px; font: inherit; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .pf-vw__share:hover { background: var(--ochre); color: var(--ink); border-color: var(--ochre); } .pf-vw__share svg { display: block; } .pf-vw__dots { position: fixed; top: 50%; right: 24px; transform: translateY(-50%); z-index: 3; display: grid; gap: 8px; padding: 10px 6px; background: rgba(11,11,11,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } @media (max-width: 720px) { .pf-vw__dots { right: 10px; gap: 6px; padding: 8px 4px; } } .pf-vw__dot { appearance: none; width: 8px; height: 8px; background: color-mix(in oklab, var(--paper) 30%, transparent); border: 0; border-radius: 999px; padding: 0; cursor: pointer; transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), height var(--dur-2) var(--ease); } .pf-vw__dot:hover { background: color-mix(in oklab, var(--paper) 70%, transparent); } .pf-vw__dot.is-active { background: var(--chagall); height: 18px; } .pf-vw__loading, .pf-vw__empty { place-self: center; text-align: center; padding: 80px 40px; font-family: var(--font-mono); font-size: 0.85rem; color: color-mix(in oklab, var(--paper) 70%, transparent); letter-spacing: 0.08em; } .pf-vw__empty h2 { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); color: var(--paper); letter-spacing: -0.02em; margin: 12px 0 16px; text-transform: none; } .pf-vw__empty-eyebrow { color: var(--red); letter-spacing: 0.16em; text-transform: uppercase; } .pf-vw__empty code { background: color-mix(in oklab, var(--paper) 12%, transparent); padding: 1px 6px; color: var(--paper); } .pf-vw__share-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 4; background: var(--paper); color: var(--ink); padding: 10px 18px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); } .pf-vw__share-toast[hidden] { display: none; } .portfolio__note { margin-top: var(--s-2); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: color-mix(in oklab, var(--paper) 55%, transparent); } /* "All series →" call-out under the portfolio grid. Lives on a section with paper-on-ink (dark) background, so colors are paper-warm. */ .portfolio__more { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid color-mix(in oklab, var(--paper) 20%, transparent); display: flex; align-items: baseline; gap: 12px; } .portfolio__more-link { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); color: var(--paper); letter-spacing: -0.01em; border-bottom: 1.5px solid color-mix(in oklab, var(--paper) 30%, transparent); padding-bottom: 4px; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .portfolio__more-link:hover { color: var(--ochre); border-bottom-color: var(--ochre); } .portfolio__more-arrow { color: var(--red); font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); line-height: 1; transition: transform var(--dur-2) var(--ease); } .portfolio__more:hover .portfolio__more-arrow { transform: translateX(8px); } /* ── series.html — landing page for all portfolio series ─────────── */ .topbar--minimal .topbar__row--brand { border-bottom: 1px solid var(--line-soft); } .topbar__minnav a.active { color: var(--red); border-bottom: 1.5px solid var(--red); padding-bottom: 2px; } .series-page { padding-bottom: var(--s-6); background: var(--paper); } .series-hero { padding: var(--s-5) 0 var(--s-3); border-bottom: 1px solid var(--line); background: var(--paper); } .series-hero__back { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: inline-block; margin-bottom: var(--s-3); border-bottom: 1px dashed currentColor; padding-bottom: 1px; } .series-hero__back:hover { color: var(--red); } .series-hero__eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s-2); } .series-hero__title { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 6vw, 7rem); line-height: 0.92; letter-spacing: -0.04em; color: var(--ink); font-weight: 500; margin-bottom: var(--s-3); } .series-hero__title em { display: block; color: var(--red); font-style: italic; font-size: 0.55em; letter-spacing: -0.025em; margin-top: 0.2em; } .series-hero__lead { max-width: 56ch; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); color: var(--ink-soft); line-height: 1.55; } .series-list { padding: var(--s-5) 0 0; } .series-list__grid { display: grid; gap: var(--s-4); } .series-list__empty { text-align: center; padding: var(--s-4); font-family: var(--font-mono); color: var(--ink-mute); } .series-card { border-top: 1px solid var(--line); padding-top: var(--s-3); } .series-card:first-child { border-top: 0; padding-top: 0; } .series-card__link { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-4); align-items: stretch; color: inherit; } @media (max-width: 720px) { .series-card__link { grid-template-columns: 1fr; gap: var(--s-2); } } .series-card:nth-child(even) .series-card__link { grid-template-columns: 1fr 1.4fr; } .series-card:nth-child(even) .series-card__meta { order: -1; } @media (max-width: 720px) { .series-card:nth-child(even) .series-card__link { grid-template-columns: 1fr; } .series-card:nth-child(even) .series-card__meta { order: 0; } } .series-card__cover { position: relative; overflow: hidden; background: var(--paper-deep); aspect-ratio: 4/5; border: 1px solid var(--line); } .series-card--horizontal .series-card__cover { aspect-ratio: 5/3; } .series-card--mixed .series-card__cover { aspect-ratio: 1/1; } .series-card__img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; filter: grayscale(0.92) contrast(1.08) brightness(0.97); transition: opacity var(--dur-3) var(--ease), filter var(--dur-3) var(--ease), transform var(--dur-2) var(--ease); } .series-card__cover--ready .series-card__img { opacity: 1; } .series-card__cover--ready .series-card__placeholder { display: none; } .series-card__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-mono); color: var(--ink-mute); letter-spacing: 0.1em; text-transform: lowercase; } .series-card__folder { font-size: 0.78rem; color: var(--ink-mute); } .series-card__chip { position: absolute; bottom: 12px; right: 12px; background: var(--paper); color: var(--ink); padding: 6px 12px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); z-index: 1; transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .series-card__link:hover .series-card__img { transform: scale(1.03); filter: grayscale(0.4) contrast(1.05); } .series-card__link:hover .series-card__chip { background: var(--red); color: var(--paper); border-color: var(--red); transform: translateX(6px); } .series-card__meta { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: var(--s-2) 0; } .series-card__title { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2vw, 3.4rem); letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-weight: 500; } .series-card__hint { font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem); color: var(--ink-soft); line-height: 1.55; } .foot--slim { padding: var(--s-3) 0; } .foot--slim .foot__bottom { padding-top: 0; border-top: 0; } .services__cta { margin-top: var(--s-4); padding-top: var(--s-3); } .services__cta-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s-2); } .services__cta-note { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: color-mix(in oklab, var(--paper) 65%, transparent); max-width: 60ch; line-height: 1.5; } .services__cta--gform { font-weight: 600; } /* ── PLACES ─────────────────────────────────────────────── */ .places__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); } @media (max-width: 980px) { .places__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .places__grid { grid-template-columns: 1fr; } } .place { padding: var(--s-3); background: var(--paper); border: 1px solid var(--line); position: relative; display: flex; flex-direction: column; transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .place:hover { transform: translateY(-4px); background: var(--paper-warm); } .place__name { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .place__desc { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: var(--s-2); } /* Frequency tag always anchors to the bottom of the card so every "Codziennie / 2–3× w tygodniu / Opcjonalnie" line reads at the same baseline across the four cards. */ .place__tag { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); padding-top: 0.6rem; border-top: 1px dashed var(--line-soft); margin-top: auto; } .places__credo { margin-top: var(--s-4); padding: var(--s-3); background: var(--ink); color: var(--paper); border-left: 3px solid var(--red); } .places__credo p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.45rem); line-height: 1.4; margin: 0; } .places__credo strong { color: var(--ochre); font-weight: 600; } /* ── HOME / CONDITIONS ─────────────────────────────────── */ /* Two-column layout on wider screens: numeric/silhouette facts on the left, packing-checklist + preparation-rules dossier on the right. Stacks vertically below 900px. */ .home__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; } @media (max-width: 980px) { .home__layout { grid-template-columns: 1fr; gap: var(--s-4); } } .home__facts { list-style: none; } /* Editorial fact row — the num and the label sit on the SAME baseline as one headline ("50 · m² + balkon"); the description tucks under them as a quiet caption that spans the full row. display:contents on the wrapping
hoists label/desc up into the grid so all three pieces participate in the same baseline rhythm. */ .home__fact { display: grid; grid-template-columns: auto 1fr; column-gap: 0.65rem; row-gap: 0.25rem; align-items: baseline; padding: var(--s-2) 0; border-top: 1px solid var(--line-soft); } .home__fact:last-child { border-bottom: 1px solid var(--line-soft); } .home__fact > div { display: contents; } .home__fact-num { font-family: var(--font-display); font-size: clamp(1.6rem, 1rem + 1.8vw, 2.3rem); line-height: 1; color: var(--chagall); letter-spacing: -0.04em; font-weight: 500; font-variation-settings: "opsz" 144; white-space: nowrap; } .home__fact:nth-child(2) .home__fact-num { color: var(--red); } .home__fact:nth-child(4) .home__fact-num { color: var(--ochre); } .home__fact-label { font-family: var(--font-display); font-size: clamp(1.1rem, 0.85rem + 0.7vw, 1.4rem); color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; font-weight: 500; } .home__fact-desc { grid-column: 1 / -1; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; margin: 0.2rem 0 0; max-width: 56ch; } /* Right column — the bring list + preparation rules stack as a single dossier. Margin-top zero on wide screens so both columns align. */ .home__aside { display: flex; flex-direction: column; gap: var(--s-3); } .home__aside .bring { margin-top: 0; } /* Bring list — packing checklist. Now a full-width outro panel under the home facts. Static (no sticky), wide measure, two-column list on wide screens so the dossier doesn't read as one giant scroll. */ .bring { background: var(--ink); color: var(--paper-bright); padding: clamp(1.1rem, 0.8rem + 1vw, 1.7rem); position: relative; margin-top: 0; border-radius: 18px; overflow: hidden; } .bring::before { content: ""; position: absolute; top: -8px; right: -8px; width: 38px; height: 38px; background: var(--ochre); transform: rotate(8deg); border-radius: 8px; } .bring__head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); align-items: end; margin-bottom: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.18); } @media (max-width: 560px) { .bring__head { grid-template-columns: 1fr; } } .bring__title { font-family: var(--font-display); font-size: clamp(1.2rem, 0.9rem + 1vw, 1.6rem); color: var(--paper-bright) !important; margin-bottom: 0.2rem; letter-spacing: -0.02em; font-weight: 600; font-variation-settings: "opsz" 96, "SOFT" 50; } .bring__sub { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); margin: 0; } .bring__copy-all { appearance: none; background: var(--paper-bright); border: 1px solid var(--paper-bright); border-radius: 999px; color: var(--ink); padding: 0.55rem 1.1rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .bring__copy-all:hover { background: color-mix(in oklab, var(--ink) 14%, var(--paper-bright)); border-color: color-mix(in oklab, var(--ink) 14%, var(--paper-bright)); } .bring__copy-all.is-copied { background: var(--ok); color: var(--paper-bright); border-color: var(--ok); } .bring__copy-icon { font-size: 0.85rem; line-height: 1; } .bring__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: clamp(1rem, 0.5rem + 1vw, 2rem); row-gap: 0; } .bring__row { display: grid; grid-template-columns: 18px 1fr; gap: 0.65rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.88rem; line-height: 1.4; align-items: start; color: var(--paper-bright); cursor: pointer; } .bring__row:last-child { border-bottom: 0; } .bring__row strong { color: var(--ochre); font-weight: 600; } /* Checkbox — owner ticks what's already packed; checked rows fade and get a strikethrough so the list visibly shrinks as you pack. */ .bring__check { cursor: pointer; padding-top: 2px; } .bring__check input { position: absolute; opacity: 0; pointer-events: none; } .bring__check-box { display: block; width: 15px; height: 15px; border: 1.5px solid rgba(255,255,255,0.55); background: transparent; position: relative; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .bring__check input:checked + .bring__check-box { background: var(--ochre); border-color: var(--ochre); } .bring__check input:checked + .bring__check-box::after { content: ""; position: absolute; left: 3px; top: -1px; width: 5px; height: 10px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); } .bring__row:has(input:checked) .bring__text { color: rgba(255,255,255,0.4); text-decoration: line-through; text-decoration-color: var(--ochre); } .bring__row:has(input:checked) .bring__text strong { color: rgba(229,181,71,0.5); } .bring__text { display: inline-block; } /* Preparation rules — paper-on-paper sibling of .bring. Same dossier rhythm (head + numbered list), inverted palette so the two cards read as a single front/back. The Furminator row is keyed with a red rule so it never gets lost in the scan. */ .rules { background: var(--paper); color: var(--ink); padding: 0; border: 1.5px solid var(--line); position: relative; transition: background var(--dur-2) var(--ease); } /* When the spoiler is open, restore inner padding so the list breathes. */ .rules[open] { padding: clamp(1.2rem, 0.8rem + 1.2vw, 2rem); } .rules[open] .rules__toggle { padding: 0 0 var(--s-2); border-bottom: 1px solid var(--line); margin-bottom: var(--s-2); } .rules__toggle { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; padding: clamp(1rem, 0.7rem + 1vw, 1.5rem); cursor: pointer; list-style: none; user-select: none; transition: padding var(--dur-2) var(--ease); } .rules__toggle::-webkit-details-marker { display: none; } .rules__toggle-label { font-family: var(--font-display); font-size: clamp(1.2rem, 0.9rem + 1vw, 1.7rem); color: var(--ink); letter-spacing: -0.02em; font-weight: 600; } .rules__toggle-chev { font-family: var(--font-mono); font-size: 1.1rem; color: var(--red); line-height: 1; transition: transform var(--dur-1) var(--ease); will-change: transform; } .rules[open] .rules__toggle-chev { transform: scaleY(-1); } .rules__head { margin-bottom: var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); } /* Group sub-headers — split the checklist into Health / Grooming / Arrival-day so it reads as a structured prep plan rather than one long undifferentiated list. */ .rules__group { margin-top: var(--s-3); } .rules__group:first-of-type { margin-top: 0; } .rules__group-h { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--chagall); margin: 0 0 0.45rem; padding-bottom: 0.35rem; border-bottom: 1px dashed color-mix(in oklab, var(--chagall) 30%, transparent); font-weight: 600; } .rules__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); color: var(--ink); margin: 0 0 0.3rem; letter-spacing: -0.02em; font-weight: 600; font-variation-settings: "opsz" 96, "SOFT" 50; } .rules__sub { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0; } .rules__list { list-style: none; counter-reset: rules; margin: 0; padding: 0; } .rules__row { counter-increment: rules; position: relative; padding: 0.7rem 0 0.7rem 2.1rem; border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); } .rules__row:last-child { border-bottom: 0; } .rules__row::before { content: counter(rules, decimal-leading-zero); position: absolute; left: 0; top: 0.7rem; width: 1.55rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ink-mute); } .rules__row strong { color: var(--ink); font-weight: 600; } .rules__row--key { background: color-mix(in oklab, var(--red) 8%, transparent); margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 3.6rem; padding-right: 1.5rem; border-bottom-color: var(--ink); border-top: 1px solid var(--line); } .rules__row--key::before { left: 1.5rem; color: var(--red); } .rules__row--key strong { color: var(--red); } /* ── TRACKER / INSURANCE — photo-led editorial layout ─────── The photo is the hero. A floating dossier panel overlaps it on the right; an annotation on the photo calls out the device on the collar. */ .tracker { background: var(--paper); } .tracker__hero { position: relative; display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: var(--s-4); align-items: center; } @media (max-width: 900px) { .tracker__hero { grid-template-columns: 1fr; gap: var(--s-3); } } .tracker__photo { position: relative; margin: 0; aspect-ratio: 3 / 4; min-height: 460px; background: var(--ink); /* GPS dot and plaque now live INSIDE the photo bounds — hidden overflow keeps everything contained and prevents conflicts with the right panel. */ overflow: hidden; border: 1px solid var(--line); } .tracker__photo > img { display: block; } /* Tuned for tracker.jpg — pushes the subject so the dog's collar sits just below the upper third, where the annotation dot waits at top:34% left:50%. Override with a per-image rule if recropped. */ .tracker__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; filter: contrast(1.04); } .tracker__photo-empty { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; color: color-mix(in oklab, var(--paper) 55%, transparent); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; } .tracker__photo--empty .tracker__photo-empty { display: flex; } .tracker__photo-mark { width: 36px; height: 36px; background: var(--paper); position: relative; } .tracker__photo-mark::after { content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); } /* GPS annotation — the red dot wanders between named spots on the dog (nose, ear, collar, paw, tail), and the plaque updates with witty coords + a label for each spot. JS drives both via inline custom properties --x / --y (% of the photo) and dataset.location. */ .tracker__annot { position: absolute; top: var(--y, 32%); left: var(--x, 50%); width: 0; height: 0; z-index: 3; pointer-events: none; transition: top 0.42s cubic-bezier(.4, .15, .2, 1), left 0.42s cubic-bezier(.4, .15, .2, 1); } /* While the pointer is inside the photo the dot tracks the cursor directly — kill the smoothing transition for instant follow. */ .tracker__photo--cursor .tracker__annot { transition: top 0.12s linear, left 0.12s linear; } .tracker__photo--cursor { cursor: crosshair; } .tracker__annot-dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px color-mix(in oklab, var(--paper) 45%, transparent); animation: trackerPulse 2.4s var(--ease) infinite; } @keyframes trackerPulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--paper) 45%, transparent); } 50% { box-shadow: 0 0 0 14px color-mix(in oklab, var(--paper) 0%, transparent); } } /* Plaque — bottom-right corner of the photo. Sits INSIDE the frame so it can never overlap the right-side text panel. Crossfades each time the dot relocates. */ .tracker__plaque { position: absolute; right: var(--s-2); bottom: var(--s-2); z-index: 4; display: grid; grid-template-columns: auto 1fr; column-gap: 0.55rem; row-gap: 0.15rem; align-items: baseline; padding: 0.65rem 0.85rem; max-width: min(260px, 70%); background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--red); box-shadow: 4px 4px 0 0 var(--ink); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); opacity: 1; transition: opacity var(--dur-2) var(--ease); } .tracker__plaque.is-changing { opacity: 0.15; } .tracker__plaque-label { font-weight: 600; color: var(--ink); } .tracker__plaque-coords { font-size: 0.6rem; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: none; } .tracker__plaque-meta { grid-column: 1 / -1; border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); padding-top: 0.4rem; font-size: 0.6rem; color: var(--ink-soft); } @media (max-width: 560px) { .tracker__plaque { right: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 1rem); padding: 0.55rem 0.7rem; } } /* Caption sits at the TOP-left of the photo so it never collides with the (bottom-right) plaque. Smaller, dossier mono caps. */ .tracker__caption { position: absolute; left: var(--s-2); top: var(--s-2); z-index: 3; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem; background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--line); } /* Numbered grid overlay — visible only when ?gridhelp=1 is in the URL. Lets Yauhen describe a new GPS spot by cell number. */ .tracker__grid { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(6, 1fr); pointer-events: none; display: none; } .tracker__photo--gridhelp .tracker__grid { display: grid; } .tracker__grid-cell { display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(255,255,255,0.35); color: rgba(255,255,255,0.85); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; background: color-mix(in oklab, var(--ink) 12%, transparent); } /* Floating dossier panel — sits to the right of the vertical photo, no longer overlapping, since the photo is now portrait-aspect. */ .tracker__panel { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--chagall); border-radius: 18px; padding: clamp(var(--s-3), 3vw, var(--s-4)); position: relative; z-index: 4; box-shadow: -6px 6px 0 0 var(--ink); } @media (max-width: 900px) { .tracker__panel { box-shadow: none; border-radius: 14px; } } .tracker__title { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); line-height: 1; margin: 0 0 var(--s-2); letter-spacing: -0.035em; font-weight: 500; } .tracker__title em { color: var(--red); font-style: italic; } .tracker__lede { font-size: 1rem; color: var(--ink-soft); max-width: 42ch; margin-bottom: var(--s-3); line-height: 1.55; } .tracker__specs { display: grid; gap: 0; border-top: 1px solid var(--line); } .tracker__spec { display: grid; grid-template-columns: 9rem 1fr; gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px dashed var(--line-soft); } .tracker__spec:last-child { border-bottom: 0; } .tracker__spec dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); font-weight: 600; } .tracker__spec dd { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.45; } @media (max-width: 500px) { .tracker__spec { grid-template-columns: 1fr; gap: 0.15rem; } } .tracker__note { margin-top: var(--s-3); padding: 0.85rem 1rem; background: color-mix(in oklab, var(--red) 7%, var(--paper)); border-left: 3px solid var(--red); font-size: 0.9rem; line-height: 1.55; color: var(--ink); } .tracker__note strong { color: var(--red); font-weight: 600; } /* ── GUESTS ─────────────────────────────────────────────── */ /* Visual separator from Bezpieczeństwo (VI) — Stali goście sits on a warm-paper plate so the two sections don't read as one continuous strip. A hairline at the top echoes the editorial section-break convention. */ .guests { background: var(--paper-warm); border-top: 1px solid var(--line); } .guests-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-top: var(--s-3); } @media (max-width: 980px) { .guests-grid { grid-template-columns: repeat(2, 1fr); } } .guest { display: flex; flex-direction: column; width: 100%; text-align: left; background: transparent; border: none; padding: 0; cursor: pointer; position: relative; } .guest__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); border: 1px solid var(--line); margin-bottom: var(--s-2); position: relative; } .guest__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease); filter: grayscale(0.15) contrast(1.06); } .guest:hover .guest__photo img { transform: scale(1.06); filter: none; } .guest__meta { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .guest__name { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-weight: 500; } .guest__breed { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } /* Modal */ .modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--s-2); } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: color-mix(in oklab, var(--ink) 70%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 0; cursor: pointer; } .modal__panel { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; max-width: 920px; width: 100%; max-height: 92svh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; animation: panelIn 380ms var(--ease-out); box-shadow: 0 32px 80px -36px rgba(11, 11, 11, 0.32); } .modal__panel--doc { display: block; max-width: 720px; padding: var(--s-4); } @keyframes panelIn { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: none; } } .modal__close { position: absolute; top: 0.8rem; right: 0.8rem; width: 40px; height: 40px; background: var(--paper); border: 1px solid var(--line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); z-index: 2; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .modal__close:hover { background: var(--chagall); color: var(--paper-bright); border-color: var(--chagall-deep); transform: rotate(90deg); } .modal__media { background: var(--paper-deep); min-height: 320px; position: relative; } .modal__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; } .modal__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); } .modal__name { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); margin-top: 0.4rem; letter-spacing: -0.025em; } .modal__stats { display: flex; gap: var(--s-4); padding: var(--s-2) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-block: var(--s-2); } .modal__stat-label { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .modal__stat-num { font-family: var(--font-display); font-size: 1.8rem; color: var(--red); } .modal__story { color: var(--ink-soft); line-height: 1.65; } .modal__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s-2); } .modal__tag { padding: 0.25rem 0.7rem; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; } @media (max-width: 720px) { .modal__panel { grid-template-columns: 1fr; max-height: 94svh; } .modal__media, .modal__media img { min-height: 220px; max-height: 280px; } .modal__body { padding: var(--s-3); } } /* Doc modal */ .modal__doc { color: var(--ink); } .modal__doc h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); letter-spacing: -0.025em; } .modal__doc h3 { font-family: var(--font-display); font-size: 1.2rem; margin: var(--s-3) 0 0.4rem; color: var(--ink); } .modal__doc p, .modal__doc ul { color: var(--ink-soft); line-height: 1.65; margin-bottom: var(--s-2); font-size: 0.95rem; } .modal__doc ul { padding-left: 1.2rem; } .modal__doc li { margin-bottom: 0.3rem; list-style: disc; } .modal__doc a { color: var(--red); border-bottom: 1px solid currentColor; } .modal__doc strong { color: var(--ink); } /* ── Support modal (Wesprzyj rozwój) ────────────────────── */ .support-modal { max-width: 760px; } .support-modal .eyebrow { display: block; margin-bottom: 0.6rem; } .support-modal__lede { color: var(--ink-soft); line-height: 1.65; font-size: 1rem; border-bottom: 1px solid var(--line); padding-bottom: var(--s-2); margin-bottom: var(--s-3); } .support-modal__fineprint { margin-top: var(--s-3); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-mute); line-height: 1.55; border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); padding-top: var(--s-2); } .support-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); margin-bottom: var(--s-3); } .support-tab { background: var(--paper); border: 0; border-right: 1px solid var(--line); padding: var(--s-2); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; text-align: left; color: var(--ink); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .support-tab:last-child { border-right: 0; } .support-tab:hover { background: var(--paper-deep); } .support-tab.is-active { background: var(--ink); color: var(--paper); } .support-tab__label { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.1; } .support-pane[hidden] { display: none; } .support-pane__intro { color: var(--ink-soft); line-height: 1.6; font-size: 0.95rem; margin-bottom: var(--s-3); } .support-pane__placeholder { background: var(--paper-deep); border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); padding: var(--s-2); font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); } .support-pane__placeholder a { color: var(--red); border-bottom: 1px solid currentColor; } .support-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-bottom: var(--s-2); } .support-coins { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-2); } @media (max-width: 720px) { .support-coins { grid-template-columns: 1fr; } .support-tabs { grid-template-columns: 1fr; } .support-tab { border-right: 0; border-bottom: 1px solid var(--line); } .support-tab:last-child { border-bottom: 0; } } .support-coin { border: 1px solid var(--line); background: var(--paper); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; } .support-coin.is-empty { opacity: 0.45; } .support-coin__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); gap: 0.5rem; } .support-coin__ticker { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--ink); letter-spacing: -0.02em; } .support-coin__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 0.2rem; } .support-coin__network { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 0.2rem 0.45rem; line-height: 1.3; white-space: nowrap; } .support-coin__qr { aspect-ratio: 1 / 1; background: var(--paper-deep); padding: 0.65rem; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); } .support-coin__qr svg { width: 100%; height: 100%; display: block; } .support-coin.is-empty .support-coin__qr { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; } .support-coin.is-empty .support-coin__qr::before { content: '· · ·'; letter-spacing: 0.4em; color: var(--ink-mute); } .support-coin__address { padding: 0.55rem 0.7rem; display: flex; gap: 0.4rem; align-items: stretch; } .support-coin__address code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink); background: var(--paper-deep); padding: 0.45rem 0.55rem; line-height: 1.35; word-break: break-all; border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); } .support-coin__copy { flex: 0 0 auto; background: var(--paper); border: 1px solid var(--line); color: var(--ink); padding: 0 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .support-coin__copy:hover { background: var(--ink); color: var(--paper); } .support-coin__copy.is-copied { background: var(--red); color: var(--paper); border-color: var(--red); } /* Footer accent for the support link — slight red collar dot, like the brand mark */ .foot__support-link { position: relative; padding-right: 0.85rem; } .foot__support-link::after { content: ''; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; background: var(--red); border-radius: 50%; transform: translateY(-50%); transition: transform var(--dur-1) var(--ease); } .foot__support-link:hover::after { transform: translateY(-50%) scale(1.4); } /* ── PRINCIPLES / CREEDS ───────────────────────────────── */ /* The Manifest section shares its label with the hero ("I. Manifest" vs "VIII. Manifest"). To make the kinship visible, the section gets the same Chagall-painted underlay vocabulary as the IG card: a textured cobalt patch in the top-left, asymmetric "leaf" radius, no gradients — only solid color + layered brushstroke + grain. Sits behind the chapter eyebrow and the start of the title. */ .principles { position: relative; isolation: isolate; } .principles .section__lede { padding-left: 0; } .creeds { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .creed { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: var(--s-3); display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; } .creed--soft { background: color-mix(in oklab, var(--chagall) 7%, var(--paper)); } /* Manifest creeds 01–06: each principle gets a hand-painted asymmetric blob (Chagall-pebble silhouette) with a thematic icon centred on it in cream paper. Two layers: ::before is the painted blob (animates on hover — rotation, blob morph), the element itself carries the SVG icon and stays put so the symbol never reads as "moving". */ .creed__shape { position: relative; width: 60px; height: 60px; flex-shrink: 0; } /* ::before — clay blob (color + asymmetric border-radius). Animates on hover (rotation + soft scale + morph). */ .creed__shape::before { content: ""; position: absolute; inset: 0; background: var(--ink); border-radius: 58% 42% 52% 48% / 48% 56% 44% 52%; transition: transform var(--dur-3) var(--ease), border-radius var(--dur-3) var(--ease); } /* ::after — the meaningful SVG icon, always centred and motionless. */ .creed__shape::after { content: ""; position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: 64%; } .creed:hover .creed__shape::before { transform: rotate(6deg) scale(1.06); border-radius: 46% 54% 58% 42% / 56% 44% 52% 48%; } /* 01 — Loyalty (returning star) */ .creed__shape--loyalty::before { background: var(--red); } .creed__shape--loyalty::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 5 L23.5 15 L34 15.5 L25.5 22 L28.5 32 L20 26 L11.5 32 L14.5 22 L6 15.5 L16.5 15 Z' fill='%23F5F1E6'/%3E%3C/svg%3E"); } /* 02 — Pair (two speech bubbles — sitter consults the client whose dates are already booked before taking a second dog for the same period) */ .creed__shape--pair::before { background: var(--chagall); } .creed__shape--pair::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9 Q5 6 8 6 L21 6 Q24 6 24 9 L24 15 Q24 18 21 18 L13 18 L9 22 L9 18 L8 18 Q5 18 5 15 Z' fill='%23F5F1E6'/%3E%3Cpath d='M16 22 Q16 19 19 19 L32 19 Q35 19 35 22 L35 28 Q35 31 32 31 L31 31 L31 35 L27 31 L19 31 Q16 31 16 28 Z' fill='%23F5F1E6'/%3E%3C/svg%3E"); background-size: 78%; } /* 03 — Home (warm roof) */ .creed__shape--home::before { background: var(--ochre); border-radius: 64% 36% 50% 50% / 50% 60% 40% 50%; } .creed__shape--home::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20 L20 7 L35 20 L31 20 L31 33 L9 33 L9 20 Z' fill='%23F5F1E6'/%3E%3Crect x='17' y='24' width='6' height='9' fill='%230B0B0B'/%3E%3C/svg%3E"); } /* 04 — Camera (Instagram daily reports) */ .creed__shape--camera::before { background: var(--coral); } .creed__shape--camera::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 13 L13 13 L15 9 L25 9 L27 13 L34 13 Q35 13 35 14 L35 30 Q35 31 34 31 L6 31 Q5 31 5 30 L5 14 Q5 13 6 13 Z' fill='%23F5F1E6'/%3E%3Ccircle cx='20' cy='22' r='5.5' fill='%23C46B3B'/%3E%3Ccircle cx='30' cy='17' r='1.5' fill='%23C46B3B'/%3E%3C/svg%3E"); } /* 05 — Coin (prepayment / commitment) */ .creed__shape--coin::before { background: var(--wine); border-radius: 52% 48% 38% 62% / 44% 56% 60% 40%; } .creed__shape--coin::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='13' fill='%23F5F1E6'/%3E%3Ccircle cx='20' cy='20' r='10' fill='none' stroke='%238C3050' stroke-width='1.4'/%3E%3Cpath d='M16 16 L24 16 M16 20 L24 20 M16 24 L24 24' stroke='%238C3050' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } /* 06 — Seed sprouting (adaptation grows naturally) */ .creed__shape--seed::before { background: var(--moss); border-radius: 50% 50% 40% 60% / 60% 50% 50% 40%; } .creed__shape--seed::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 33 L20 18' stroke='%23F5F1E6' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M20 20 Q13 17 10 11 Q14 11 18 14 Q20 16 20 20 Z' fill='%23F5F1E6'/%3E%3Cpath d='M20 22 Q27 19 30 13 Q26 13 22 16 Q20 18 20 22 Z' fill='%23F5F1E6'/%3E%3Cellipse cx='20' cy='33' rx='6' ry='1.5' fill='%23F5F1E6' opacity='0.5'/%3E%3C/svg%3E"); } .creed__title { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); margin-bottom: 0.5rem; letter-spacing: -0.02em; font-weight: 500; } .creed__desc { color: var(--ink-soft); line-height: 1.6; font-size: 0.95rem; max-width: 56ch; } @media (max-width: 760px) { .creeds { grid-template-columns: 1fr; } } @media (max-width: 560px) { .creed { grid-template-columns: 1fr; } } /* ── POLICY ─────────────────────────────────────────────── */ .policy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } @media (max-width: 800px) { .policy__grid { grid-template-columns: 1fr; } } .policy__item { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: var(--s-3); display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; } .policy__item--ethics { grid-column: 1 / -1; background: color-mix(in oklab, var(--red) 5%, var(--paper)); } .policy__media { width: 160px; height: 160px; background: var(--paper-warm); border: 1px solid var(--line); border-radius: 14px; padding: 0.5rem; } .policy__illus { width: 100%; height: 100%; display: block; } /* Policy icons — Chagall pebbles carrying a meaningful silhouette in cream paper. Same blot vocabulary as the manifest creeds, but each icon names the principle: bared teeth for guard-trained dogs, torn/destroyed item for destructive behaviour. */ .policy__icon { width: 60px; height: 60px; background-color: var(--chagall-deep); background-position: center; background-repeat: no-repeat; background-size: 64%; border-radius: 58% 42% 52% 48% / 48% 56% 44% 52%; flex-shrink: 0; position: relative; } .policy__icon span { display: none; } /* 02 — guard / attack dogs — bared teeth */ .policy__item:nth-of-type(2) .policy__icon { background-color: var(--wine); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 14 Q6 12 8 12 L32 12 Q34 12 34 14 L34 16 L29 16 L26 22 L23 16 L20 22 L17 16 L14 22 L11 16 L6 16 Z' fill='%23F5F1E6'/%3E%3Cpath d='M8 25 Q20 32 32 25' stroke='%23F5F1E6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } /* 03 — destructive behaviour — torn fabric blot */ .policy__item:nth-of-type(3) .policy__icon { background-color: var(--coral); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 8 L18 6 L16 14 L22 12 L19 20 L26 18 L21 26 L28 25 L22 33 L14 31 L17 23 L10 25 L13 17 L7 18 Z' fill='%23F5F1E6'/%3E%3Cpath d='M28 8 L36 14 M32 6 L32 16' stroke='%23F5F1E6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); border-radius: 64% 36% 50% 50% / 50% 60% 40% 50%; } .policy__title { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); margin-bottom: 0.5rem; letter-spacing: -0.02em; } .policy__desc { color: var(--ink-soft); line-height: 1.6; font-size: 0.95rem; } @media (max-width: 560px) { .policy__item { grid-template-columns: 1fr; } .policy__media { width: 120px; height: 120px; } } /* ── EMERGENCY ─────────────────────────────────────────── */ /* Extend the dark fill noticeably below the cards so the section doesn't crowd into the FAQ that follows. Top padding kept at the global section default — the lede already gives the head room. */ .emergency { padding-bottom: var(--s-6); } .emergency__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-bottom: 0; } @media (max-width: 800px) { .emergency__grid { grid-template-columns: 1fr; } } .emergency__case { background: color-mix(in oklab, var(--paper) 6%, transparent); border: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); border-radius: 14px; padding: var(--s-3); display: flex; flex-direction: column; gap: 0.6rem; } /* Severity tags — outlined ghost pills on the dark dossier. One neutral chip body (paper-bright text, paper hairline, no shadow); the leading dot is the only thing that changes per tier so the three chips read as one typographic voice instead of three competing fills. */ .emergency__case-tag { display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.35rem 0.8rem; background: transparent; color: var(--paper-bright); border: 1px solid color-mix(in oklab, var(--paper-bright) 22%, transparent); border-radius: 999px; box-shadow: none; } .emergency__case-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--chagall-soft); flex-shrink: 0; } .emergency__case-tag--warn::before { background: var(--ochre); } .emergency__case-tag--alert::before { background: var(--red); } .emergency__case-t { font-family: var(--font-display); font-size: 1.3rem; color: var(--paper); margin-bottom: 0.2rem; letter-spacing: -0.02em; } .emergency__case p { color: color-mix(in oklab, var(--paper) 75%, transparent); font-size: 0.95rem; line-height: 1.55; } /* ── EMERGENCY · LOG ─────────────────────────────────────── A dispatcher's log: each example is a self-contained card with a coloured severity stripe matching the three case tiers above. Reads as its own block without any breadcrumb plate or huge gap. */ /* Stepped severity ladder — replaces the old log grid. Each row is plotted on a 5-cell meter (filled cells = severity), the event and the action sit side by side, and the rows are ordered low → high so the eye walks the curve from the top down. */ .emergency__ladder { margin-top: var(--s-5); } .emergency__ladder-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem 1.2rem; margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid rgba(255,255,255,0.18); } .emergency__ladder-tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.2rem 0.55rem; color: var(--ink); background: var(--ochre); } .emergency__ladder-head h3 { font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-bright); margin: 0; } .emergency__ladder-legend { margin-left: auto; margin-right: 0; display: inline-flex; gap: 0.85rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .emergency__ladder-head:has(.emergency__ladder-legend:only-child) { justify-content: flex-end; } .emergency__ladder-legend span { display: inline-flex; align-items: center; gap: 0.35rem; } .emergency__chip { width: 9px; height: 9px; display: inline-block; } .emergency__chip--calm { background: var(--ochre); } .emergency__chip--warn { background: var(--chagall); } .emergency__chip--alert { background: var(--red); } .emergency__ladder-list { list-style: none; margin: 0; padding: 0; } .emergency__step { display: grid; grid-template-columns: 80px 80px minmax(0, 1.2fr) minmax(0, 1fr); align-items: baseline; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid rgba(255,255,255,0.12); color: var(--paper-bright); } .emergency__step:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); } .emergency__step-meter { display: inline-flex; gap: 3px; align-items: center; } .emergency__step-meter i { width: 11px; height: 14px; background: rgba(255,255,255,0.12); display: inline-block; transition: background var(--dur-1) var(--ease); } .emergency__step[data-level="1"] .emergency__step-meter i:nth-child(-n+1), .emergency__step[data-level="2"] .emergency__step-meter i:nth-child(-n+2) { background: var(--ochre); } .emergency__step[data-level="3"] .emergency__step-meter i:nth-child(-n+3), .emergency__step[data-level="4"] .emergency__step-meter i:nth-child(-n+4) { background: var(--chagall); } .emergency__step[data-level="5"] .emergency__step-meter i:nth-child(-n+5) { background: var(--red); } .emergency__step-tier { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .emergency__step[data-level="5"] .emergency__step-tier { color: var(--red); } .emergency__step[data-level="3"] .emergency__step-tier, .emergency__step[data-level="4"] .emergency__step-tier { color: var(--chagall-soft); } .emergency__step-event { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; color: var(--paper-bright); margin: 0; } .emergency__step-action { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; line-height: 1.5; color: color-mix(in oklab, var(--paper) 75%, transparent); margin: 0; padding-left: 0.9rem; border-left: 1px dashed rgba(255,255,255,0.18); } @media (max-width: 760px) { .emergency__step { grid-template-columns: auto auto 1fr; grid-template-areas: "meter tier event" ". . action"; row-gap: 0.35rem; } .emergency__step-meter { grid-area: meter; } .emergency__step-tier { grid-area: tier; } .emergency__step-event { grid-area: event; } .emergency__step-action { grid-area: action; padding-left: 0; border-left: 0; } } /* ── FAQ ────────────────────────────────────────────────── */ .faq { max-width: 900px; margin-inline: auto; border-top: 1px solid var(--line); margin-top: var(--s-4); } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { width: 100%; text-align: left; padding: var(--s-3) 0; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s-2); background: transparent; border: 0; cursor: pointer; color: var(--ink); transition: color var(--dur-2) var(--ease); } .faq__q:hover { color: var(--red); } .faq__text { font-family: var(--font-display); font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; } .faq__sign { flex-shrink: 0; width: 28px; height: 28px; background: var(--ink); border-radius: 50%; position: relative; transition: transform var(--dur-3) var(--ease), background var(--dur-2) var(--ease); } .faq__sign::before, .faq__sign::after { content: ""; position: absolute; background: var(--paper); } .faq__sign::before { top: 50%; left: 6px; right: 6px; height: 2px; transform: translateY(-50%); } .faq__sign::after { left: 50%; top: 6px; bottom: 6px; width: 2px; transform: translateX(-50%); transition: opacity var(--dur-2) var(--ease); } .faq__item.open .faq__sign { background: var(--red); transform: rotate(180deg); } .faq__item.open .faq__sign::after { opacity: 0; } .faq__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-3) var(--ease-out); } .faq__a-inner { padding: 0 0 var(--s-3) 0; color: var(--ink-soft); max-width: 62ch; line-height: 1.7; font-size: 1rem; } .faq__a-inner a { color: var(--red); border-bottom: 1px solid currentColor; } /* ── CONTACT FORM ──────────────────────────────────────── */ .contact { position: relative; } .contact__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .contact .wrap { position: relative; z-index: 2; } /* Dual form mode toggle — same family as creeds (numbered manifesto rows) */ .form-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 820px; margin: 0 auto var(--s-4); border-top: 1px solid color-mix(in oklab, var(--paper) 30%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--paper) 30%, transparent); } @media (max-width: 640px) { .form-toggle { grid-template-columns: 1fr; } } .form-toggle__btn { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1.1rem; align-items: center; padding: var(--s-3) var(--s-2); background: transparent; border: 0; color: var(--paper); cursor: pointer; text-align: left; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .form-toggle__btn + .form-toggle__btn { border-left: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); } @media (max-width: 640px) { .form-toggle__btn + .form-toggle__btn { border-left: 0; border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); } } .form-toggle__btn:hover { background: color-mix(in oklab, var(--paper) 6%, transparent); } .form-toggle__btn.active { background: var(--paper); color: var(--ink); } .form-toggle__num { grid-row: 1 / 3; font-family: var(--font-display); font-style: italic; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem); line-height: 0.9; color: var(--ochre); font-variation-settings: "opsz" 144, "SOFT" 100; } .form-toggle__btn.active .form-toggle__num { color: var(--red); } .form-toggle__name { font-family: var(--font-display); font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.5rem); letter-spacing: -0.02em; font-weight: 500; } .form-toggle__hint { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, var(--paper) 60%, transparent); } .form-toggle__btn.active .form-toggle__hint { color: var(--ink-mute); } .form { max-width: 820px; margin-inline: auto; background: var(--paper); color: var(--ink); position: relative; border-top: 0; border-bottom: 0; border-radius: 18px; padding: var(--s-4) clamp(1.25rem, 3vw, 2.5rem) var(--s-3); } /* Editorial rules above and below the form run the full width of the site body — same convention as the A/B picker above so the picker and the form below share a single horizontal grid. */ .form::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 100vw; max-width: 100%; height: 1px; background: color-mix(in oklab, var(--paper-bright) 25%, transparent); pointer-events: none; } .form::before { content: ""; position: absolute; top: -14px; right: -6px; width: 56px; height: 56px; background-color: var(--red); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); background-size: 60px 60px; background-blend-mode: multiply; border-radius: 58% 42% 52% 48% / 48% 56% 44% 52%; z-index: 0; transform: rotate(-6deg); } .form > * { position: relative; z-index: 1; } /* Progress — "editorial timeline". Four columns of pure type: a mono number on top, a small mono state label beneath it (zrobione / teraz / dalej / dalej). No dots, no rules, no graphic primitives — just typography on a single grid. Cells are identical in height in every state, so the active column never sits offset from the rest. State label per cell comes from `data-label` (set by form.js, localized via the active dict). */ .progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-4); align-items: start; } .progress span { position: relative; display: block; height: 2.1rem; font-family: var(--font-mono); color: var(--ink-mute); background: transparent; border: 0; border-radius: 0; line-height: 1; transition: color var(--dur-2) var(--ease); } /* Both rows are absolutely positioned to a fixed top — number at 0, label at 1.3rem — so the baseline of "01 zrobione" cannot drift against "02 teraz" regardless of font weight or descenders. */ .progress span::before { content: "0" attr(data-step); position: absolute; top: 0; left: 0; font-size: 0.9rem; letter-spacing: 0.18em; line-height: 1; } .progress span::after { content: attr(data-label); position: absolute; top: 1.35rem; left: 0; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; opacity: 0.85; } .progress span.done { color: var(--ink); } .progress span.active { color: var(--red); } .step { display: none; } .step.active { display: block; animation: stepIn 480ms var(--ease-out); padding-bottom: var(--s-2); } @keyframes stepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* The step number is already shown twice (in the progress bar above and in the "KROK X Z 4" line in `.step__sub`), so we hide the in-title duplicate. */ .step__title { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); margin-bottom: 0.4rem; color: var(--ink); letter-spacing: -0.025em; font-weight: 500; line-height: 1.05; } .step__title em { color: var(--red); font-style: italic; } .step__sub { color: var(--ink-mute); margin-bottom: 0; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft); } .step__fields { padding-top: var(--s-2); } .step__note { margin-top: var(--s-2); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); } .field { margin-bottom: var(--s-3); position: relative; } .field__label { display: block; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); margin-bottom: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; } .field__label .req { color: var(--red); margin-left: 0.15em; } .field__label-hint { display: inline-block; margin-left: 0.5rem; color: var(--chagall); text-transform: none; letter-spacing: 0.04em; font-weight: 400; } .field__sub { font-family: var(--font-body); font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; margin: -0.2rem 0 0.7rem; } /* Email field is optional but emphasised — slim corner accent so users notice it's the "account link" hook without it screaming for attention. */ .field--account { position: relative; padding-left: var(--s-2); border-left: 2px solid var(--chagall); } .section--dark .field--account { border-left-color: var(--paper-bright); } .field--account .field__label-hint { color: var(--ink-mute); } .section--dark .field--account .field__label-hint { color: var(--paper-bright); opacity: 0.7; } /* Inputs — minimal but visibly outlined. A full thin frame, paper fill, red rule on focus. Reads as a clear interactive zone without going heavy with shadows or thick borders. */ /* Form fields — borders must be unambiguous on first paint, especially against the dark contact section background. Default is full ink 1.6px, hover deepens to a thicker frame, focus switches to red with a halo. */ .field__input, .field__select, .field__area { width: 100%; padding: 0.9rem 1rem; background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: 1.04rem; color: var(--ink); line-height: 1.4; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .field__input::placeholder, .field__area::placeholder { color: color-mix(in oklab, var(--ink) 42%, transparent); } .field__input:hover, .field__select:hover, .field__area:hover { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); } .field__input:focus, .field__select:focus, .field__area:focus { outline: none; border-color: var(--red); background: var(--paper); box-shadow: 0 0 0 2px var(--red), inset 0 -2px 0 var(--red); } /* On dark sections, lift the visible border with a soft outer glow so the paper-fill input never floats unanchored on ink. */ .section--dark .field__input, .section--dark .field__select, .section--dark .field__area { box-shadow: inset 0 -2px 0 var(--ink), 0 0 0 1px rgba(255,255,255,0.22); } .section--dark .field__input:hover, .section--dark .field__select:hover, .section--dark .field__area:hover { box-shadow: inset 0 -2px 0 var(--ink), 0 0 0 2px rgba(255,255,255,0.55); } .section--dark .field__input:focus, .section--dark .field__select:focus, .section--dark .field__area:focus { box-shadow: 0 0 0 2px var(--red), 0 0 0 4px rgba(255,255,255,0.3); } .field__select { padding-right: 2rem; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 14px) center, calc(100% - 8px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .field__area { resize: vertical; min-height: 110px; line-height: 1.5; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } } .field__radios { display: flex; flex-wrap: wrap; gap: 0.5rem; } .field__radio { position: relative; flex: 1; min-width: 90px; } .field__radio input { position: absolute; opacity: 0; pointer-events: none; } .field__radio label { display: block; padding: 0.75rem 1rem; border: 1px solid var(--line); text-align: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .field__radio label:hover { background: var(--paper-deep); } .field__radio input:checked + label { background: var(--ink); color: var(--paper); } /* Checkbox styled block for RODO */ .field--consent { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); } .field__radio-block { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; cursor: pointer; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); } .field__radio-block input { position: absolute; opacity: 0; pointer-events: none; } .field__radio-mark { width: 18px; height: 18px; border: 1px solid var(--line); background: var(--paper); position: relative; flex-shrink: 0; margin-top: 0.15rem; } .field__radio-block input:checked ~ .field__radio-mark { background: var(--red); border-color: var(--red); } .field__radio-block input:checked ~ .field__radio-mark::after { content: ""; position: absolute; left: 4px; top: 1px; width: 7px; height: 12px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); } .field__radio-text a { color: var(--chagall); border-bottom: 1px solid currentColor; } .field__notice { margin-top: var(--s-2); padding: 0.8rem 1rem; background: color-mix(in oklab, var(--chagall) 8%, var(--paper)); border-left: 3px solid var(--chagall); font-size: 0.9rem; line-height: 1.55; color: var(--ink); display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; } .field__notice-mark { color: var(--chagall); font-weight: 700; } /* ── Service picker (tile grid for the first form step) ── */ .service-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: var(--s-2); } @media (max-width: 720px) { .service-picker { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .service-picker { grid-template-columns: 1fr; } } .service-tile { position: relative; border: 1px solid var(--line); background: var(--paper); border-radius: 14px; cursor: pointer; transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .service-tile input { position: absolute; opacity: 0; pointer-events: none; } .service-tile__inner { display: grid; gap: 0.35rem; padding: var(--s-3) var(--s-2); min-height: 110px; } .service-tile__name { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; font-weight: 500; } .service-tile__hint { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .service-tile:hover { transform: translateY(-2px); background: var(--paper-warm); } .service-tile.is-selected, .service-tile:has(input:checked) { background: var(--ink); border-color: var(--ink); } .service-tile.is-selected .service-tile__name, .service-tile:has(input:checked) .service-tile__name { color: var(--paper); } .service-tile.is-selected .service-tile__hint, .service-tile:has(input:checked) .service-tile__hint { color: color-mix(in oklab, var(--paper) 70%, transparent); } .service-tile--other { background: color-mix(in oklab, var(--paper-deep) 50%, var(--paper)); } .service-tile--social { border-color: color-mix(in oklab, var(--ochre) 55%, transparent); background: color-mix(in oklab, var(--ochre) 8%, var(--paper)); } .field__error--block { display: none; padding: 0.5rem 0; font-size: 0.8rem; color: var(--red); letter-spacing: 0.04em; } .field__error--block.show { display: block; } /* Channel radios — compact horizontal row */ .field__radios--channel { gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .field__radios--channel .field__radio { flex: 0 0 auto; min-width: 0; } .field__radios--channel .field__radio label { padding: 0.45rem 0.85rem; font-size: 0.72rem; } /* Channels — multi-checkbox grid + preferred select. Each card is a tappable tile (44×44 minimum), checkbox is custom drawn so it works on touch and reads as a Suprematist square. */ .field__channels { display: grid; gap: 0.7rem; margin-bottom: var(--s-2); } .field__channels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; } @media (max-width: 640px) { .field__channels-grid { grid-template-columns: repeat(2, 1fr); } } .channel-chip { position: relative; display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 0.6rem; padding: 0.75rem 0.95rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); user-select: none; } .channel-chip input { position: absolute; opacity: 0; pointer-events: none; } .channel-chip__box { width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--paper); flex-shrink: 0; position: relative; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .channel-chip__name { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); line-height: 1; } .channel-chip:hover { background: var(--paper-deep); } .channel-chip:has(input:checked) { background: var(--ink); color: var(--paper); } .channel-chip:has(input:checked) .channel-chip__name { color: var(--paper); } .channel-chip:has(input:checked) .channel-chip__box { background: var(--chagall); border-color: var(--chagall-deep); } .channel-chip:has(input:checked) .channel-chip__box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 6px; height: 11px; border: solid var(--paper-bright); border-width: 0 2px 2px 0; border-radius: 0 1px 1px 0; transform: rotate(45deg); } .channel-chip:focus-within { box-shadow: 0 0 0 2px color-mix(in oklab, var(--chagall) 60%, transparent); } .field__preferred { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0.6rem; align-items: center; } @media (max-width: 560px) { .field__preferred { grid-template-columns: 1fr; } } .field__preferred-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } /* Branch blocks (service-specific sections within step 3) */ .branch-block { border: 0; border-top: 1px solid var(--line-soft); padding: var(--s-2) 0 var(--s-3); margin: 0; } .branch-block:first-child { border-top: 0; padding-top: 0; } .branch-block__legend { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s-2); padding: 0; } .branch-promo { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px dashed var(--line-soft); } /* Per-date schedule — one row per selected calendar day with time + duration pickers. Editorial register: ink rules between rows, mono header tags, no chrome. */ .per-date-schedule { margin-top: 0; border: 1px solid var(--line-soft); background: color-mix(in oklab, var(--paper) 80%, transparent); } .per-date-schedule__hint { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--ink-mute); padding: var(--s-2) var(--s-3); text-align: center; } .per-date-schedule__header { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-2); padding: 0.5rem var(--s-3); border-bottom: 1px solid var(--line-soft); background: color-mix(in oklab, var(--ochre) 8%, transparent); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .per-date-schedule__list { display: flex; flex-direction: column; } .per-date-schedule__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-2); align-items: center; padding: 0.55rem var(--s-3); border-bottom: 1px solid var(--line-soft); } .per-date-schedule__row:last-child { border-bottom: 0; } .per-date-schedule__date { line-height: 1.15; font-family: var(--font-display); font-size: 1rem; color: var(--ink); } .per-date-schedule__date strong { font-weight: 600; } .per-date-schedule__date small { display: block; margin-top: 0.15rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } .per-date-schedule__time, .per-date-schedule__duration { font-size: 0.92rem; padding: 0.4rem 0.55rem; } @media (max-width: 560px) { .per-date-schedule__header { display: none; } .per-date-schedule__row { grid-template-columns: 1fr 1fr; row-gap: 0.4rem; } .per-date-schedule__date { grid-column: 1 / -1; } } .form-branch:empty::before { content: "—"; display: block; padding: var(--s-3) 0; color: var(--ink-mute); text-align: center; font-family: var(--font-mono); } .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; } .field__hint { font-family: var(--font-mono); font-size: 0.78rem; color: var(--moss); margin-top: 0.4rem; letter-spacing: 0.05em; } .field__error { font-size: 0.78rem; color: var(--red); margin-top: 0.3rem; display: none; } .field__input.invalid, .field__select.invalid, .field__area.invalid { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); } .field__input.invalid + .field__error, .field__select.invalid + .field__error, .field__area.invalid + .field__error { display: block; } .field input[type="hidden"] + .field__error.show { display: block; } .field__error.show { display: block; } /* Promo placeholder lives at all-caps mono so it reads as an instruction, not a pre-filled value. Disable user-agent auto-suggest UI too. */ #promo::placeholder { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--ink-mute); opacity: 0.75; text-transform: uppercase; } #promo { -webkit-text-security: none; text-transform: uppercase; } .promo-active { border-bottom-color: var(--ok) !important; color: var(--ok); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .promo-invalid { border-bottom-color: color-mix(in oklab, var(--danger) 60%, transparent) !important; color: var(--ink-soft); letter-spacing: 0.12em; text-transform: uppercase; } /* Promo hint state — green when valid */ #promoHint { color: var(--ok); font-weight: 600; } /* ── PRICE ESTIMATE PANEL ───────────────────────────────── */ .price-estimate { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); background: color-mix(in oklab, var(--ochre) 14%, var(--paper)); border: 1px solid color-mix(in oklab, var(--ochre) 55%, transparent); border-left: 4px solid var(--ochre); } .price-estimate__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; } .price-estimate__eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .price-estimate__tip { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); border-radius: 50%; font-size: 0.75rem; cursor: help; } .price-estimate__row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px dashed color-mix(in oklab, var(--ink) 14%, transparent); font-family: var(--font-mono); font-size: 0.85rem; } .price-estimate__row:last-of-type { border-bottom: 0; } .price-estimate__row--discount { color: var(--red); } .price-estimate__row--total { padding-top: 0.7rem; margin-top: 0.3rem; border-top: 2px solid var(--line); border-bottom: 0; font-size: 1rem; } .price-estimate__row--total strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; } .price-estimate__value { display: inline-flex; align-items: baseline; gap: 0.25rem; } .price-estimate__cur { font-size: 0.7rem; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; } .price-estimate__label { color: var(--ink); } .price-estimate__note { margin-top: 0.6rem; font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); font-family: var(--font-body); } .form__submit-error { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--red); background: color-mix(in oklab, var(--red) 8%, var(--paper)); color: var(--ink); font-size: 0.95rem; line-height: 1.55; } .form__submit-error p { margin: 0 0 0.6rem; } .form__submit-error-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .form__submit-error-links a { color: var(--red); border-bottom: 1px solid var(--red); } .form__submit-error-links a:hover { color: var(--red-deep); border-bottom-color: var(--red-deep); } .form__nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); } @media (min-width: 641px) { .form__nav { padding-left: calc(4.5rem + var(--s-3)); } } .summary { margin-bottom: var(--s-3); } /* Legacy single-column layout — kept for safety if `--cards` isn't applied. */ .summary__row { display: flex; justify-content: space-between; gap: var(--s-3); padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; } .summary__label { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; } .summary__value { color: var(--ink); font-weight: 500; text-align: right; font-family: var(--font-body); } /* New card-based summary — used on Step 4 confirmation. Items render label-on-top, value-on-bottom so long values (schedules, notes) read top-down instead of crushing against the right edge. */ .summary--cards { display: flex; flex-direction: column; gap: var(--s-2); border-top: 0; } .summary__card { background: var(--paper-bright); border: 1px solid var(--line-strong); border-radius: 14px; padding: var(--s-3); } .summary__card-title { margin: 0 0 var(--s-2); font-family: var(--font-mono); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink); font-weight: 500; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft); } .summary__items { display: grid; grid-template-columns: 1fr; gap: var(--s-2); } @media (min-width: 560px) { .summary__items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-3); } /* Long-form values (notes, schedule, mood) want the full width. */ .summary__item--wide { grid-column: 1 / -1; } } .summary__item { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .summary__item-label { font-family: var(--font-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute); } .summary__item-value { color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; } /* The form always renders on light cream paper even inside a dark section, so summary cards keep their ink-on-paper palette here. No `.section--dark` overrides needed. */ /* RODO gate — a quiet inline notice that appears under the consent checkbox when the user lands on Step 4 without ticking it. Paired with .btn.is-blocked on the submit button. */ .rodo-notice { margin: 0.6rem 0 0; font-size: var(--t-caption); color: var(--red-deep); font-family: var(--font-body); line-height: 1.45; } .btn.is-blocked { opacity: 0.55; cursor: not-allowed; } .btn.is-blocked:hover { transform: none; } .done { text-align: center; padding: var(--s-4) 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); } .done__mark { width: 84px; height: 84px; background: var(--ink); border-radius: 58% 42% 52% 48% / 48% 56% 44% 52%; display: inline-flex; align-items: center; justify-content: center; position: relative; margin-bottom: var(--s-2); } .done__mark-sq { width: 30px; height: 30px; background: var(--paper); border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%; display: block; } .done__mark-dot { width: 14px; height: 14px; background: var(--red); border-radius: 50%; position: absolute; top: 14px; right: 14px; } .done__title { font-family: var(--font-display); font-size: var(--t-h2); letter-spacing: -0.025em; font-weight: 500; } .done__text { color: var(--ink-soft); max-width: 52ch; line-height: 1.6; } /* Account CTA block on success — invites the user into the portal so they can track THIS submission. Sits between the headline and the IG link. */ .done__account { margin-top: var(--s-3); padding: var(--s-3) var(--s-3) calc(var(--s-3) - 0.2rem); border: 1.5px solid var(--ink); background: var(--paper-bright); border-radius: 14px; max-width: 48ch; width: 100%; text-align: left; } .done__account-eyebrow { font-family: var(--font-mono); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink); margin: 0; font-weight: 500; } .done__account-body { margin: var(--s-1) 0 var(--s-2); color: var(--ink); font-size: var(--t-body); line-height: 1.55; } .done__account-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); } .done__account-actions .nav-konto__mark { margin-right: 0.45rem; } .done__or { margin: var(--s-3) 0 var(--s-1); font-family: var(--font-mono); font-size: var(--t-micro); text-transform: lowercase; letter-spacing: 0.14em; color: var(--ink-mute); } .section--dark .done__or { color: var(--paper-bright); opacity: 0.6; } /* ── CALENDAR (Chagall blue) ─────────────────────────── */ .calendar { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: var(--s-3); margin-top: 0.5rem; user-select: none; } .calendar__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; padding: 0.5rem 0.3rem; margin-bottom: 0.4rem; } .calendar__nav { width: 38px; height: 38px; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .calendar__nav:hover { background: var(--chagall); color: var(--paper); border-color: var(--chagall); } .calendar__title { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.01em; text-align: center; font-weight: 500; } .calendar__title em { color: var(--chagall); font-style: italic; } .calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0.3rem 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .calendar__weekday { text-align: center; padding: 0.45rem 0; } .calendar__weekday--weekend { color: var(--red); } .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; padding-top: 0.4rem; touch-action: none; /* let pointer-drag work on touch without scrolling */ user-select: none; } .calendar__grid--dragging { cursor: grabbing; } /* Day cells — bigger digits, more comfortable hit-target. The numerals are the visual rhythm of the whole calendar, so they get prominent display type instead of mono. */ /* Day digits — modern Space Grotesk, bigger, easier to scan. */ .calendar__day { aspect-ratio: 1/1; background: transparent; border: 1.5px solid transparent; border-radius: 50%; color: var(--ink); cursor: pointer; font-family: var(--font-label, var(--font-mono)); font-size: clamp(1.35rem, 1rem + 0.8vw, 1.7rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .calendar__day:hover:not(:disabled):not(.calendar__day--blank):not(.calendar__day--in-range):not(.calendar__day--start):not(.calendar__day--end):not(.calendar__day--selected) { color: var(--chagall); border-color: color-mix(in oklab, var(--chagall) 32%, transparent); } .calendar__day--blank { cursor: default; } .calendar__day--past, .calendar__day:disabled { color: var(--line-soft); cursor: not-allowed; text-decoration: line-through; opacity: 0.6; } /* Blocked = Yauhen is away. Show day number normally but with a soft red wash + diagonal stripe so it reads as "I'm here but can't help" rather than "this date doesn't exist". Distinct from --past (line-through). */ .calendar__day--blocked, .calendar__day--blocked:disabled { color: color-mix(in oklab, var(--red) 65%, var(--ink)); background: repeating-linear-gradient( 135deg, color-mix(in oklab, var(--red) 8%, transparent) 0, color-mix(in oklab, var(--red) 8%, transparent) 4px, transparent 4px, transparent 8px ), color-mix(in oklab, var(--red) 5%, transparent); border-color: color-mix(in oklab, var(--red) 25%, transparent); cursor: not-allowed; text-decoration: none; opacity: 0.85; } .calendar__day--today { border-color: var(--ink); font-weight: 600; } .calendar__day--today::after { content: ""; position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--ink); border-radius: 50%; } /* Single-date selection — red ring concept: a thin red ring grows out of the digit (the digit itself flips to red), no block fill. */ .calendar__day--selected { color: var(--red); font-weight: 600; border-color: var(--red); background: color-mix(in oklab, var(--red) 4%, transparent); z-index: 3; } .calendar__day--selected::after { content: ""; position: absolute; inset: 12%; border: 1.5px dashed var(--red); border-radius: 50%; pointer-events: none; } /* Range fill — a soft red wash through the in-range cells; endpoints get a solid red disc with a paper digit. */ .calendar__day--in-range { background: color-mix(in oklab, var(--red) 9%, var(--paper)); color: var(--ink); border-color: transparent; } .calendar__day--in-range::before { content: ""; position: absolute; inset: 18% -1px; background: color-mix(in oklab, var(--red) 16%, var(--paper)); z-index: -1; } .calendar__day--start, .calendar__day--end { color: var(--paper-bright); border-color: transparent; background: transparent; font-weight: 600; z-index: 3; } .calendar__day--start::after, .calendar__day--end::after { content: ""; position: absolute; inset: 8%; background: var(--red); border-radius: 50%; z-index: -1; } .calendar__day--start::before, .calendar__day--end::before { content: ""; position: absolute; top: 18%; bottom: 18%; width: 60%; background: color-mix(in oklab, var(--red) 16%, var(--paper)); z-index: -1; } .calendar__day--start::before { right: 0; } .calendar__day--end::before { left: 0; } .calendar__day--start.calendar__day--end::before { display: none; } .calendar__grid--dragging .calendar__day--start, .calendar__grid--dragging .calendar__day--end { transform: scale(1.06); } /* Out-of-view but still selected range — show a slim red tint at the edges of the grid as a hint that the selection extends beyond. */ .calendar__day--edge-prev::after, .calendar__day--edge-next::after { content: ""; position: absolute; top: 18%; bottom: 18%; width: 50%; background: color-mix(in oklab, var(--red) 16%, var(--paper)); z-index: -1; } .calendar__day--edge-prev::after { left: 0; } .calendar__day--edge-next::after { right: 0; } /* Cross-month continuation prompt — shown after the user picks a range that ends on the last day of the visible month, suggesting they keep going into the next month. */ .calendar__rollover { margin-top: 0.6rem; padding: 0.6rem 0.85rem; background: color-mix(in oklab, var(--chagall) 8%, var(--paper)); border-left: 3px solid var(--chagall); font-size: 0.85rem; line-height: 1.45; color: var(--ink); display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; } .calendar__rollover-btn { appearance: none; background: var(--chagall); color: var(--paper-bright); border: 1px solid var(--chagall); padding: 0.45rem 0.8rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background var(--dur-1) var(--ease); } .calendar__rollover-btn:hover { background: var(--chagall-deep); } .calendar__rollover[hidden] { display: none; } /* Summary plaque — always visible, large enough to read at a glance. Sits as its own panel below the grid so the user keeps perspective on the selection even when it spans months. */ .calendar__foot { margin-top: 0.8rem; padding: 0.85rem 1rem; background: color-mix(in oklab, var(--red) 5%, var(--paper)); border: 1px solid color-mix(in oklab, var(--red) 30%, transparent); border-left: 3px solid var(--red); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; } .calendar__selection { font-family: var(--font-label, var(--font-mono)); font-size: 0.95rem; letter-spacing: 0.01em; color: var(--ink); line-height: 1.4; } .calendar__selection strong { color: var(--red); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.16em; font-family: var(--font-mono); display: block; margin-bottom: 0.15rem; } .calendar__selection em { font-style: normal; color: var(--red); font-weight: 600; } .calendar__selection-empty { color: var(--ink-mute); border-left-color: var(--ink-mute); } .calendar__clear { background: transparent; border: 0; color: var(--ink-mute); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .calendar__clear:hover { color: var(--red); } /* ── FOOTER ─────────────────────────────────────────────── */ .foot { background-color: var(--ink-deep); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.65'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.58'/%3E%3C/svg%3E"); background-size: 200px 200px, 280px 280px; background-repeat: repeat, repeat; background-blend-mode: screen, multiply; color: var(--paper); padding-top: 0; padding-bottom: var(--s-3); border-top: 4px solid var(--red); position: relative; overflow: hidden; } /* Old yellow rotated square removed. The red border-top now carries all the colour signal the footer needs; no decorative geometry. */ .foot__signature { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2vw, 3rem); padding-block: var(--s-4) var(--s-3); font-family: var(--font-display); font-size: clamp(3rem, 2rem + 6vw, 8rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--paper); border-bottom: 1px solid color-mix(in oklab, var(--paper) 15%, transparent); margin-bottom: var(--s-4); font-weight: 500; position: relative; z-index: 2; } .foot__signature span:nth-child(3) { font-style: italic; color: var(--ochre); } .foot__signature-dot { width: 18px; height: 18px; background: var(--red); border-radius: 50%; } .foot__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4); position: relative; z-index: 2; } @media (max-width: 800px) { .foot__inner { grid-template-columns: 1fr 1fr; gap: var(--s-3); } } @media (max-width: 480px) { .foot__inner { grid-template-columns: 1fr; } } .foot .mark { color: var(--paper); margin-bottom: var(--s-2); } .foot__tagline { color: color-mix(in oklab, var(--paper) 65%, transparent); font-size: 0.95rem; max-width: 36ch; line-height: 1.5; margin-bottom: var(--s-2); } .foot__addr { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: color-mix(in oklab, var(--paper) 55%, transparent); line-height: 1.55; } .foot__addr a { color: var(--ochre); border-bottom: 1px solid currentColor; } .foot__col h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ochre); margin-bottom: var(--s-2); font-weight: 500; } .foot__col li { margin-bottom: 0.5rem; } .foot__col a, .foot__col li { color: color-mix(in oklab, var(--paper) 75%, transparent); font-size: 0.92rem; transition: color var(--dur-1) var(--ease); } .foot__col a { cursor: pointer; } .foot__col a:hover { color: var(--red); } .foot__bottom { padding-top: var(--s-3); border-top: 1px solid color-mix(in oklab, var(--paper) 14%, transparent); display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.74rem; color: color-mix(in oklab, var(--paper) 50%, transparent); letter-spacing: 0.08em; position: relative; z-index: 2; } .foot__bottom strong { color: color-mix(in oklab, var(--paper) 90%, transparent); font-weight: 500; } .foot__bottom-tag { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.65rem; } .social { display: inline-flex; gap: 0.55rem; } .social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in oklab, var(--paper) 22%, transparent); color: var(--paper); /* Organic pebble shape — soft asymmetric radius reads as a hand- painted token, not a Suprematist square. Hover morphs the silhouette slightly while shifting to the Chagall blue accent. */ border-radius: 56% 44% 50% 50% / 50% 56% 44% 50%; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-radius var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .social a svg { /* Round all SVG endpoints + joins so the icon strokes flow, no cubist hard corners. Applies to all inline social icons that inherit currentColor. */ stroke-linecap: round; stroke-linejoin: round; } .social a:hover { background: var(--chagall); border-color: var(--chagall-soft); color: var(--paper-bright); border-radius: 48% 52% 56% 44% / 56% 44% 50% 50%; transform: translateY(-1px); } /* ── COOKIE BANNER ─────────────────────────────────────── */ .cookie-banner { position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); max-width: 560px; margin-inline: auto; background: var(--ink); color: var(--paper); border: 1px solid var(--line); border-radius: 20px; z-index: 150; padding: var(--s-3); box-shadow: 0 16px 48px rgba(0,0,0,0.2); animation: cookieIn 600ms var(--ease-out); } @keyframes cookieIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .cookie-banner__wrap { display: grid; grid-template-columns: 1fr; gap: var(--s-2); } .cookie-banner__body strong { display: block; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 0.3rem; color: var(--ochre); } .cookie-banner__body p { font-size: 0.88rem; line-height: 1.5; color: color-mix(in oklab, var(--paper) 80%, transparent); } .cookie-banner__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } .cookie-banner .btn--ghost { color: var(--paper); border-color: color-mix(in oklab, var(--paper) 30%, transparent); } .cookie-banner .btn--ghost:hover { background: var(--paper); color: var(--ink); } /* ── TOAST ─────────────────────────────────────────────── */ .toast { position: fixed; bottom: calc(var(--gutter) + 80px); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper); padding: 0.8rem 1.2rem; display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.06em; border: 1px solid var(--line); border-radius: 14px; z-index: 250; opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .toast[hidden] { display: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .toast__icon { color: var(--ochre); } .toast--ok .toast__icon { color: var(--ok); } /* ── TRAILS / ŚCIEŻKI ───────────────────────────────────── Horizontal-scrolling visual essay of woodland walks. */ .trails__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 28vw); gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 1rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; } .trails__strip::-webkit-scrollbar { height: 6px; } .trails__strip::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--chagall) 65%, transparent); border-radius: 999px; } .trails__strip::-webkit-scrollbar-track { background: var(--paper-deep); border-radius: 999px; } .trail-tile { appearance: none; border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); background: var(--paper-deep); border-radius: 14px; padding: 0; aspect-ratio: 4 / 5; overflow: hidden; cursor: pointer; scroll-snap-align: start; position: relative; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .trail-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(11, 11, 11, 0.28); border-color: color-mix(in oklab, var(--chagall) 50%, transparent); } .trail-tile--landscape { aspect-ratio: 5 / 4; grid-row: span 1; grid-column: span 2; } .trail-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform var(--dur-3) var(--ease); } .trail-tile:hover img { transform: scale(1.04); } .trail-tile__num { position: absolute; left: 0.6rem; top: 0.6rem; z-index: 2; background: color-mix(in oklab, var(--paper) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); font-family: var(--font-mono); font-size: 0.68rem; padding: 0.22rem 0.55rem; border-radius: 999px; letter-spacing: 0.14em; } /* "Walk not yet recorded" placeholder — was a sharp diagonal hatch pattern (very Suprematist). Now a quiet Chagall-tinted paper with a textured grain overlay and an organic painted blob in the centre. Reads as a sketchbook spread waiting for a photo. */ .trail-tile--placeholder { position: relative; display: flex; align-items: center; justify-content: center; color: color-mix(in oklab, var(--ink) 45%, transparent); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; background-color: var(--paper-warm); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E"); background-size: 200px 200px; background-blend-mode: soft-light; } .trail-tile--placeholder::before { content: ""; position: absolute; inset: 36% 28% 32% 32%; background-color: color-mix(in oklab, var(--chagall) 24%, transparent); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"); background-size: 100px 100px; background-blend-mode: multiply; border-radius: 52% 48% 40% 60% / 48% 56% 44% 52%; transform: rotate(-8deg); z-index: 1; } .trail-tile--placeholder > * { position: relative; z-index: 2; } /* Editorial sketch tiles (trails 01–06) — the SVG fills the frame, with a small caption strip sitting at the bottom edge in the same mono typography as the rest of the strip. */ .trail-tile--sketch { background: var(--paper); display: grid; grid-template-rows: 1fr auto; } .trail-tile--sketch .trail-tile__sketch { display: block; overflow: hidden; background: var(--paper); } .trail-tile--sketch .trail-tile__sketch svg { width: 100%; height: 100%; display: block; transition: transform var(--dur-3) var(--ease); } .trail-tile--sketch:hover .trail-tile__sketch svg { transform: scale(1.03); } .trail-tile__caption { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.4rem 0.55rem; background: var(--ink); color: var(--paper); text-align: left; } .trails__note { margin-top: var(--s-3); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-soft); text-align: right; } } /* ──────────────────────────── UTILITIES ────────────────────── */ @layer utilities { .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; } body.lock { overflow: hidden; } } /* ──────────────────────────── HERO — Chagall-framed contact sheet A horizontal paper card holds a static grid of 2:3 portrait photos (two rows, flex-wrap) with a soapy-glass overlay film. A painted Chagall-blue plate sits behind the card as a frame. Below the grid, a paper-toned caption strip carries the daily-report eyebrow and the in-account notice — identical to the original Chagall card, only the field is landscape now. */ .ig-card { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; background: var(--paper); color: var(--ink); font-family: var(--font-body); border-radius: 28px 8px 8px 8px; overflow: hidden; isolation: isolate; /* Chagall-side rim — picks up the painted-plate blue along the edge. */ box-shadow: 0 22px 60px -28px rgba(11, 11, 11, 0.22), 0 0 0 0.5px color-mix(in oklab, var(--chagall) 18%, transparent); } .ig-card__grid { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 4px; min-height: 0; background: transparent; } /* Soapy glass overlay — chunky low-frequency fractal noise, overlay blend mode, low opacity. Lifts highlights and lowers shadows just enough to suggest a film over the photos without obscuring detail. */ .ig-card__grid::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.62'/%3E%3C/svg%3E"); background-size: 360px 360px; background-repeat: repeat; mix-blend-mode: overlay; opacity: 0.32; z-index: 5; } .ig-tile { position: relative; flex: 0 0 auto; /* 2:3 portrait — height fills one of two equal rows (minus half-gap); width derives from aspect-ratio so photos keep their native vertical proportion. */ height: calc(50% - 2px); aspect-ratio: 2 / 3; margin: 0; overflow: hidden; background: var(--paper-deep); } /* First tile in the grid mirrors the card's top-left rounded corner so the contact-sheet doesn't show a square notch against the painted Chagall plate. A 4px paper inset matches the gap between cells — the photo gets a clean white frame instead of bleeding straight into the blue rim. */ .ig-card__grid > .ig-tile:first-child { border-radius: 22px 0 0 0; box-shadow: inset 0 0 0 4px var(--paper); } .ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .ig-tile--placeholder { display: grid; place-items: center; background: color-mix(in oklab, var(--chagall) 12%, var(--paper)); color: var(--chagall-deep); font-family: var(--font-display); font-style: italic; font-size: 1rem; } .ig-tile__num { font-variation-settings: "opsz" 144; } /* Caption strip — paper-toned credit line under the grid. Holds the "Codzienny raport na @petsitter.yauhen" eyebrow and the italic in-account notice on a single paper plate. */ .ig-card__caption { position: relative; z-index: 6; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 1.15rem 0.95rem; background: var(--paper); border-top: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); } .ig-card__eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; line-height: 1.2; margin: 0; } .ig-card__eyebrow-prefix { color: var(--ink-mute); font-weight: 500; } .ig-card__handle { color: var(--red); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--red) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease); font-weight: 600; } .ig-card__handle:hover { color: var(--chagall); text-decoration-color: currentColor; } .ig-card__notice { font-family: var(--font-display); font-style: italic; font-size: 0.82rem; line-height: 1.4; color: var(--ink-soft); max-width: 60ch; margin: 0; } @media (max-width: 600px) { .ig-card { border-radius: 24px 6px 6px 6px; } .ig-card::before { inset: -8px -10px -6px -8px; border-radius: 30px 12px 12px 14px; } .ig-card__caption { padding: 0.75rem 0.95rem 0.85rem; gap: 0.3rem; } .ig-card__eyebrow { font-size: 0.62rem; letter-spacing: 0.14em; gap: 0.35rem; } .ig-card__notice { font-size: 0.76rem; } } /* ════════════════════════════════════════════════════════════════ CMS · Atelier — progressive admin overlay ──────────────────────────────────────────────────────────────── Suprematist editorial: cream paper surfaces, ink rules, single red dot for live status. Toolbar slides down over the topbar, inspector slides in from the right, history rail from the left. Visible only when html[data-cms-unlocked="on"]. ════════════════════════════════════════════════════════════════ */ /* Trigger in the brand row. Pairs with .mark: same 28px square, paper fill, ink border. The inner solid square is the "second figure" of the brand metaphor (small frame inside the larger one). A red corner dot pulses while the panel is closed, turns olive while open. Hidden until admin is unlocked. */ html:not([data-cms-unlocked="on"]) .cms-trigger { display: none; } .cms-trigger { appearance: none; background: var(--paper); border: 1.5px solid var(--line); width: 28px; height: 28px; position: relative; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .cms-trigger__square { width: 10px; height: 10px; background: var(--ink); transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), width var(--dur-2) var(--ease), height var(--dur-2) var(--ease); } .cms-trigger__dot { position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; background: var(--red); animation: cmsPulse 2.4s ease-in-out infinite; } .cms-trigger:hover { border-color: var(--red); transform: rotate(-4deg); } .cms-trigger:hover .cms-trigger__square { background: var(--red); width: 14px; height: 14px; } html[data-cms-open="on"] .cms-trigger { border-color: var(--moss); } html[data-cms-open="on"] .cms-trigger .cms-trigger__square { background: var(--moss); } html[data-cms-open="on"] .cms-trigger .cms-trigger__dot { background: var(--moss); animation: none; } @keyframes cmsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Page accommodates the toolbar — push content down when open */ html[data-cms-open="on"] body { padding-top: 48px; } html[data-cms-open="on"][data-cms-collapsed="on"] body { padding-top: 0; } html[data-cms-open="on"] .topbar { top: 48px; } html[data-cms-open="on"][data-cms-collapsed="on"] .topbar { top: 0; } @media (max-width: 720px) { html[data-cms-open="on"] body { padding-top: 0; } html[data-cms-open="on"] .topbar { top: 0; } } /* Shell container */ .cms { font-family: var(--font-body); color: var(--ink); } .cms-shell { position: fixed; inset: 0; z-index: 9990; pointer-events: none; /* children opt in */ } .cms-shell[data-open="off"] { display: none; } /* Toolbar — slides down from the very top, full-width strip */ .cms-toolbar { pointer-events: auto; position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 0.6rem; height: 48px; padding: 0 0.9rem; background: var(--paper); border-bottom: 1.5px solid var(--line); box-shadow: 0 1px 0 0 var(--ink), 0 16px 30px -28px rgba(0,0,0,0.55); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; transform: translateY(-100%); transition: transform var(--dur-2) var(--ease-out); } .cms-shell[data-open="on"] .cms-toolbar { transform: translateY(0); } .cms-shell[data-open="on"][data-collapsed="on"] .cms-toolbar { transform: translateY(calc(-100% + 8px)); } .cms-shell[data-open="on"][data-collapsed="on"]:hover .cms-toolbar { transform: translateY(0); } .cms-toolbar__brand { display: flex; align-items: center; gap: 0.55rem; padding-right: 0.8rem; border-right: 1px solid var(--line-soft); } .cms-toolbar__mark { width: 18px; height: 18px; background: var(--ink); position: relative; } .cms-toolbar__mark::after { content: ""; position: absolute; top: -2px; right: -2px; width: 5px; height: 5px; background: var(--red); } .cms-toolbar__title { font-family: var(--font-display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--ink); } .cms-toolbar__sub { font-size: 0.62rem; color: var(--ink-mute); } .cms-toolbar__group { display: inline-flex; gap: 0.2rem; align-items: center; } .cms-toolbar__right { margin-left: auto; display: inline-flex; gap: 0.2rem; align-items: center; } .cms-toolbar__status { display: inline-flex; gap: 0.4rem; align-items: center; padding-right: 0.6rem; border-right: 1px solid var(--line-soft); color: var(--ink-mute); } .cms-toolbar__dot { width: 7px; height: 7px; background: var(--moss); border-radius: 50%; } html[data-cms-edit="on"] .cms-toolbar__dot { background: var(--red); animation: cmsPulse 1.6s ease-in-out infinite; } .cms-tool { appearance: none; background: transparent; border: 1px solid transparent; padding: 0.42rem 0.7rem; color: var(--ink); font: inherit; cursor: pointer; letter-spacing: 0.12em; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .cms-tool:hover { background: var(--paper-deep); } .cms-tool[data-active="on"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .cms-tool:disabled { color: var(--ink-mute); cursor: not-allowed; } .cms-tool--ghost { padding-inline: 0.55rem; color: var(--ink-mute); } .cms-tool--ghost:hover { color: var(--ink); } /* Inspector — right rail */ .cms-inspector { pointer-events: auto; position: absolute; top: 48px; right: 0; width: min(360px, 92vw); height: calc(100vh - 48px); background: var(--paper); border-left: 1.5px solid var(--line); box-shadow: -16px 0 30px -30px rgba(0,0,0,0.45); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-2) var(--ease-out); overflow: hidden; } .cms-shell[data-open="on"] .cms-inspector { transform: translateX(0); } .cms-shell[data-open="on"][data-collapsed="on"] .cms-inspector { transform: translateX(100%); } .cms-inspector__head { display: flex; gap: 0; border-bottom: 1.5px solid var(--line); background: var(--paper-warm); } .cms-inspector__tab { flex: 1; appearance: none; background: transparent; border: 0; border-right: 1px solid var(--line-soft); padding: 0.7rem 0.4rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); cursor: pointer; } .cms-inspector__tab:last-child { border-right: 0; } .cms-inspector__tab:hover { color: var(--ink); } .cms-inspector__body { padding: 1rem; overflow: auto; flex: 1; } .cms-stack > * + * { margin-top: 0.85rem; } .cms-card { background: var(--paper-warm); border: 1px solid var(--line-soft); padding: 0.85rem 0.9rem; } .cms-card--danger { border-color: var(--red); } .cms-card__eyebrow { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.55rem; } .cms-card__hint { font-size: 0.78rem; color: var(--ink-mute); margin-top: 0.55rem; } .cms-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .cms-stat { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.55rem; border: 1px solid var(--line-soft); background: var(--paper); } .cms-stat strong { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; } .cms-stat span { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); } .cms-chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; } .cms-chip { appearance: none; cursor: pointer; background: var(--paper); border: 1px solid var(--line); padding: 0.35rem 0.7rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .cms-chip:hover { background: var(--ink); color: var(--paper); } .cms-chip--link { text-decoration: none; display: inline-block; } .cms-chip--link:hover { text-decoration: none; } .cms-kbds { display: grid; grid-template-columns: 64px 1fr; row-gap: 0.35rem; column-gap: 0.6rem; margin: 0; } .cms-kbds dt { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink); border: 1px solid var(--line); padding: 0.1rem 0.45rem; text-align: center; background: var(--paper); } .cms-kbds dd { margin: 0; font-size: 0.78rem; color: var(--ink-soft); align-self: center; } .cms-key { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; padding: 0.15rem 0.4rem; background: var(--paper); border: 1px dashed var(--line-soft); color: var(--ink-soft); margin-bottom: 0.5rem; } .cms-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.6rem; } .cms-field > span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .cms-input, .cms-textarea { font: inherit; font-family: var(--font-body); font-size: 0.92rem; background: var(--paper); border: 1px solid var(--line); padding: 0.55rem 0.65rem; color: var(--ink); width: 100%; resize: vertical; } .cms-input:focus, .cms-textarea:focus { outline: 2px solid var(--ochre); outline-offset: -1px; } .cms-original { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-mute); padding: 0.4rem 0.55rem; background: var(--paper); border: 1px dashed var(--line-soft); } .cms-collapse summary { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); cursor: pointer; margin-bottom: 0.35rem; } .cms-row { display: flex; gap: 0.4rem; margin-top: 0.5rem; } .cms-btn { appearance: none; cursor: pointer; background: var(--ink); color: var(--paper); border: 1px solid var(--line); padding: 0.55rem 0.9rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; } .cms-btn:hover { background: var(--red); border-color: var(--red); } .cms-btn--ghost { background: var(--paper); color: var(--ink); } .cms-btn--ghost:hover { background: var(--paper-deep); color: var(--ink); border-color: var(--ink); } .cms-btn--danger { background: var(--paper); color: var(--red); border-color: var(--red); } .cms-btn--danger:hover { background: var(--red); color: var(--paper); } .cms-image-preview { background: var(--paper); border: 1px solid var(--line-soft); padding: 0.4rem; margin-bottom: 0.55rem; max-height: 180px; overflow: hidden; } .cms-image-preview img { width: 100%; height: 160px; object-fit: cover; display: block; } .cms-color-row { display: grid; grid-template-columns: 38px 1fr 28px; gap: 0.55rem; align-items: center; padding: 0.45rem 0.55rem; border: 1px solid var(--line-soft); background: var(--paper); cursor: pointer; } .cms-color-row + .cms-color-row { margin-top: 0.4rem; } .cms-color-row input[type="color"] { width: 38px; height: 38px; border: 1px solid var(--line); padding: 0; background: var(--paper); cursor: pointer; } .cms-color-row__meta { display: flex; flex-direction: column; gap: 0.1rem; } .cms-color-row__meta strong { font-size: 0.85rem; } .cms-color-row__meta code { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-mute); } .cms-color-row__reset { appearance: none; background: transparent; border: 0; color: var(--ink-mute); cursor: pointer; font-size: 1rem; } .cms-color-row__reset:hover { color: var(--red); } .cms-section-row { display: grid; grid-template-columns: 18px 70px 1fr; gap: 0.5rem; align-items: center; padding: 0.5rem 0.55rem; border: 1px solid var(--line-soft); background: var(--paper); cursor: pointer; } .cms-section-row + .cms-section-row { margin-top: 0.35rem; } .cms-section-row__id { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-mute); } .cms-section-row__label { font-size: 0.82rem; color: var(--ink); } .cms-muted { color: var(--ink-mute); font-size: 0.78rem; margin: 0 0 0.5rem; } /* History rail — left side */ .cms-history { pointer-events: auto; position: absolute; top: 48px; left: 0; width: min(280px, 80vw); height: calc(100vh - 48px); background: var(--paper); border-right: 1.5px solid var(--line); box-shadow: 16px 0 30px -30px rgba(0,0,0,0.45); display: flex; flex-direction: column; transform: translateX(-105%); transition: transform var(--dur-2) var(--ease-out); font-family: var(--font-mono); } .cms-shell[data-open="on"] .cms-history[data-open="on"] { transform: translateX(0); } .cms-shell[data-open="on"][data-collapsed="on"] .cms-history { transform: translateX(-105%); } .cms-history__head { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0.9rem; border-bottom: 1.5px solid var(--line); background: var(--paper-warm); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; } .cms-history__count { color: var(--ink-mute); } .cms-history__body { flex: 1; overflow: auto; padding: 0.5rem; } .cms-history__empty { padding: 1rem; color: var(--ink-mute); font-size: 0.78rem; font-family: var(--font-body); } .cms-history__session + .cms-history__session { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--line-soft); } .cms-history__session-head { display: flex; justify-content: space-between; padding: 0.25rem 0.45rem; font-size: 0.62rem; color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase; } .cms-history__row { width: 100%; appearance: none; background: var(--paper); border: 1px solid var(--line-soft); padding: 0.45rem 0.55rem; display: grid; grid-template-columns: 36px 1fr auto 18px; gap: 0.45rem; align-items: center; cursor: pointer; text-align: left; font: inherit; font-size: 0.72rem; margin-bottom: 0.3rem; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .cms-history__row:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .cms-history__row:hover .cms-history__time, .cms-history__row:hover .cms-history__label, .cms-history__row:hover .cms-history__del { color: var(--paper); } .cms-history__time { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-mute); letter-spacing: 0.12em; } .cms-history__label { font-family: var(--font-body); font-size: 0.78rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cms-history__dots { display: inline-flex; gap: 3px; } .cms-dot { width: 6px; height: 6px; display: inline-block; } .cms-dot--text { background: var(--ink); } .cms-dot--image { background: var(--chagall); } .cms-dot--theme { background: var(--ochre); } .cms-history__nodot { font-size: 0.6rem; color: var(--ink-mute); } .cms-history__del { color: var(--ink-mute); padding: 0 0.2rem; } .cms-history__del:hover { color: var(--red); } .cms-history__foot { padding: 0.55rem 0.9rem; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); border-top: 1px solid var(--line-soft); } html[data-cms-preview="on"] body::after { content: "podgląd historii"; position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 10000; background: var(--ink); color: var(--paper); padding: 0.35rem 0.8rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; } /* Inline edit affordances */ html[data-cms-edit="on"] [data-i18n]:not([data-i18n-attr]), html[data-cms-edit="on"] [data-i18n-html] { outline: 1px dashed transparent; outline-offset: 2px; cursor: text; transition: outline-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } html[data-cms-edit="on"] [data-i18n]:hover:not([data-i18n-attr]), html[data-cms-edit="on"] [data-i18n-html]:hover { outline-color: var(--red); background: rgba(216, 54, 42, 0.05); } html[data-cms-edit="on"] [contenteditable="true"] { outline: 2px solid var(--ochre) !important; outline-offset: 2px; background: rgba(229, 181, 71, 0.12); } html[data-cms-edit="on"] img[data-cms-img] { outline: 1px dashed transparent; outline-offset: 4px; cursor: crosshair; transition: outline-color var(--dur-1) var(--ease); } html[data-cms-edit="on"] img[data-cms-img]:hover { outline-color: var(--chagall); } /* Command palette */ .cms-palette { position: fixed; inset: 0; z-index: 9995; background: rgba(11, 11, 11, 0.4); display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease); } .cms-palette[data-open="on"] { opacity: 1; pointer-events: auto; } .cms-palette__shell { width: min(560px, 92vw); background: var(--paper); border: 1.5px solid var(--line); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5); display: flex; flex-direction: column; } .cms-palette input { font: inherit; font-family: var(--font-body); font-size: 1.05rem; padding: 1rem 1.2rem; background: var(--paper); border: 0; border-bottom: 1.5px solid var(--line); outline: none; } .cms-palette__list { max-height: 50vh; overflow: auto; } .cms-palette__row { width: 100%; appearance: none; background: transparent; border: 0; display: grid; grid-template-columns: 60px 1fr auto; gap: 0.6rem; padding: 0.6rem 1.2rem; align-items: baseline; text-align: left; cursor: pointer; font: inherit; } .cms-palette__row:hover, .cms-palette__row:focus { background: var(--paper-warm); } .cms-palette__kind { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } .cms-palette__label { font-size: 0.9rem; color: var(--ink); } .cms-palette__hint { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-mute); } .cms-palette__empty { padding: 1.2rem; color: var(--ink-mute); font-size: 0.85rem; } /* Mobile: shrink the toolbar gracefully */ @media (max-width: 720px) { .cms-toolbar { gap: 0.3rem; padding: 0 0.5rem; font-size: 0.6rem; } .cms-toolbar__brand { display: none; } .cms-tool { padding: 0.35rem 0.45rem; } .cms-inspector { width: 100vw; border-left: 0; } .cms-history { width: 80vw; } } /* tracker dot/plaque transitions live on the existing rules above. This block just exposes the data-locations via JS — no extra CSS. */ /* ── PORTFOLIO COVER EDITOR — fixed dossier panel ───────────────── */ .pf-editor { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 8500; width: min(320px, calc(100vw - 2.4rem)); background: var(--paper); border: 1.5px solid var(--line); box-shadow: 0 22px 50px -28px rgba(0,0,0,0.55); font-family: var(--font-mono); color: var(--ink); } .pf-editor__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); background: var(--ink); color: var(--paper); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } .pf-editor__dot { width: 8px; height: 8px; background: var(--ochre); border-radius: 50%; } .pf-editor__close { margin-left: auto; background: transparent; border: 0; color: var(--paper); font-size: 1.4rem; line-height: 1; padding: 0.1rem 0.45rem; cursor: pointer; } .pf-editor__close:hover { color: var(--red); } .pf-editor__row { padding: 0.8rem 0.9rem; border-bottom: 1px dashed color-mix(in oklab, var(--ink) 18%, transparent); } .pf-editor__row:last-of-type { border-bottom: 0; } .pf-editor__row--toggle { display: flex; } .pf-editor__toggle { flex: 1; background: transparent; border: 1.5px solid var(--line); color: var(--ink); padding: 0.55rem 0.9rem; font: inherit; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .pf-editor__toggle:hover { background: var(--ink); color: var(--paper); } .pf-editor__toggle.is-on { background: var(--red); border-color: var(--red); color: var(--paper-bright); } .pf-editor__hint { font-size: 0.66rem; line-height: 1.45; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0 0 0.7rem 0; } .pf-editor__label { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.5rem; } .pf-editor__label output { font-family: var(--font-display); font-size: 0.9rem; font-style: italic; color: var(--red); text-transform: none; letter-spacing: 0; } .pf-editor__zoom { display: grid; grid-template-columns: 28px 1fr 28px; gap: 0.5rem; align-items: center; } .pf-editor__zoom button { appearance: none; background: transparent; border: 1.5px solid var(--line); color: var(--ink); width: 28px; height: 28px; font-size: 1rem; line-height: 1; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .pf-editor__zoom button:hover { background: var(--ink); color: var(--paper); } .pf-editor__zoom input[type=range] { width: 100%; accent-color: var(--red); } .pf-editor__sub { margin: 0.5rem 0 0 0; font-size: 0.6rem; letter-spacing: 0.08em; color: var(--ink-mute); } .pf-editor__row--actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; } .pf-editor__save, .pf-editor__revert { appearance: none; background: transparent; border: 1.5px solid var(--line); padding: 0.5rem 0.7rem; font: inherit; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; color: var(--ink); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .pf-editor__save:hover { background: var(--ok, #2f7d32); color: var(--paper-bright); border-color: var(--ok, #2f7d32); } .pf-editor__save.is-pending { border-color: var(--red); color: var(--red); } .pf-editor__revert:hover { background: var(--ochre); border-color: var(--ochre); } .pf-editor__status { margin: 0.4rem 0 0 0; font-size: 0.64rem; letter-spacing: 0.1em; } .pf-editor__status[data-tone="ok"] { color: var(--ok, #2f7d32); } .pf-editor__status[data-tone="warn"] { color: var(--ochre); } .pf-editor__foot { padding: 0.5rem 0.9rem; border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--ink-mute); } @media (max-width: 640px) { .pf-editor { right: 0.7rem; bottom: 0.7rem; } } /* ── ANKIETA — full questionnaire, magazine layout ─────────────── */ .ankieta__form { max-width: 760px; margin: var(--s-4) auto 0; position: relative; } .ankieta__form::before { /* Thin red rail running down the left margin, ties all questions together like a magazine column rule. */ content: ""; position: absolute; left: -1.6rem; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--red) 0%, color-mix(in oklab, var(--red) 25%, transparent) 100%); } @media (max-width: 760px) { .ankieta__form::before { display: none; } } .ankieta__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); } .ankieta__q { display: grid; grid-template-columns: clamp(2.2rem, 6vw, 3.4rem) 1fr; column-gap: clamp(1rem, 2vw, 1.8rem); padding-bottom: var(--s-3); border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); } .ankieta__q:last-child { border-bottom: 0; } .ankieta__no { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); line-height: 0.9; color: var(--red); letter-spacing: -0.03em; padding-top: 0.2rem; } .ankieta__body { display: grid; gap: 0.55rem; } .ankieta__label { font-family: var(--font-display); font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); color: var(--ink); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; } .ankieta__label .req { color: var(--red); font-style: normal; } .ankieta__hint { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-mute); margin: 0; } .ankieta__input, .ankieta__area, .ankieta__select { width: 100%; padding: 0.7rem 0.9rem; background: var(--paper); border: 1.6px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: 1rem; color: var(--ink); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .ankieta__input:hover, .ankieta__area:hover, .ankieta__select:hover { box-shadow: 0 0 0 1px var(--ink); } .ankieta__input:focus, .ankieta__area:focus, .ankieta__select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 2px var(--red); } .ankieta__area { min-height: 100px; resize: vertical; line-height: 1.5; } .ankieta__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } @media (max-width: 480px) { .ankieta__row { grid-template-columns: 1fr; } } /* Chips — checkbox & radio rendered as ink-outlined pills. Selected state fills with red. */ .ankieta__chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; } .ankieta__chips label { display: inline-flex; align-items: center; cursor: pointer; position: relative; } .ankieta__chips input { position: absolute; opacity: 0; pointer-events: none; } .ankieta__chips span { display: inline-block; padding: 0.45rem 0.85rem; border: 1.5px solid var(--line); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink); background: var(--paper); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .ankieta__chips label:hover span { background: var(--ink); color: var(--paper); } .ankieta__chips input:checked + span { background: var(--red); color: var(--paper-bright); border-color: var(--red); } .ankieta__foot { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 2px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); align-items: center; } @media (max-width: 600px) { .ankieta__foot { grid-template-columns: 1fr; } .ankieta__foot .btn { width: 100%; } } .ankieta__consent { display: inline-flex; align-items: flex-start; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; line-height: 1.5; color: var(--ink-soft); } .ankieta__consent input { margin-top: 0.25rem; accent-color: var(--red); } .ankieta__sub { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-mute); margin: 0; } .ankieta__sub[data-tone="ok"] { color: var(--ok, #2f7d32); font-weight: 600; } .ankieta__sub[data-tone="warn"] { color: var(--red); } /* Question scroll-reveal: shift in from the left as it enters viewport. */ .ankieta__q { opacity: 0; transform: translateX(-12px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); } .ankieta__q.visible { opacity: 1; transform: none; } /* ── index.html — ankieta CTA card (replaces the inline form) ────── */ .ankieta-cta__card { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-4); margin-top: var(--s-4); padding: var(--s-3); background: var(--paper); border: 1px solid var(--line); align-items: center; } @media (max-width: 720px) { .ankieta-cta__card { grid-template-columns: 1fr; gap: var(--s-3); } } .ankieta-cta__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s-2); display: block; } .ankieta-cta__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; } .ankieta-cta__steps li { display: grid; grid-template-columns: 32px 1fr; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; } .ankieta-cta__steps li:last-child { border-bottom: 0; } .ankieta-cta__step-num { font-family: var(--font-display); font-style: italic; color: var(--red); font-size: 0.9rem; letter-spacing: -0.02em; } .ankieta-cta__actions { display: flex; flex-direction: column; gap: var(--s-2); } .ankieta-cta__note { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-mute); line-height: 1.55; margin: 0; } .ankieta-cta__note a { color: var(--chagall); border-bottom: 1px solid currentColor; } .ankieta-cta__note a:hover { color: var(--red); border-bottom-color: var(--red); } /* ── /ankieta.html — dedicated multi-step questionnaire page ─────── */ .page-ankieta { background: var(--paper); color: var(--ink); } .ankieta-hero { padding: var(--s-5) 0 var(--s-3); border-bottom: 1px solid var(--line); } .ankieta-hero__back { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: inline-block; margin-bottom: var(--s-3); border-bottom: 1px dashed currentColor; padding-bottom: 1px; } .ankieta-hero__back:hover { color: var(--red); } .ankieta-hero__eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s-2); } .ankieta-hero__title { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 6vw, 7rem); line-height: 0.92; letter-spacing: -0.04em; color: var(--ink); font-weight: 500; margin-bottom: var(--s-3); } .ankieta-hero__title em { color: var(--red); font-style: italic; } .ankieta-hero__lead { max-width: 60ch; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); color: var(--ink-soft); line-height: 1.55; } /* Restore-draft notification bar */ .ank-draft { background: color-mix(in oklab, var(--ochre) 14%, var(--paper)); border-top: 1px solid color-mix(in oklab, var(--ochre) 55%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--ochre) 55%, transparent); } .ank-draft__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px var(--gutter); flex-wrap: wrap; } .ank-draft__text { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink); } .ank-draft__text strong { text-transform: uppercase; letter-spacing: 0.14em; margin-right: 0.4em; } .ank-draft__when { color: var(--ink-soft); } .ank-draft__actions { display: flex; gap: 8px; } .btn-ghost { appearance: none; background: transparent; border: 1.5px solid var(--line); color: var(--ink); padding: 10px 18px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .btn-ghost:hover { background: var(--ink); color: var(--paper); } .btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; } .btn-ghost--sm { padding: 6px 12px; font-size: 0.72rem; } .btn-ghost--mute { color: var(--ink-mute); border-color: var(--ink-mute); } .btn-ghost--mute:hover { background: var(--ink-mute); color: var(--paper); } .ankieta-app { padding: var(--s-5) 0 var(--s-6); } .ankieta-app__wrap { max-width: 860px; } /* Progress — numbered steps + a thin bar that fills as you advance */ .ank-progress { margin-bottom: var(--s-4); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-soft); } .ank-progress__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; } @media (max-width: 720px) { .ank-progress__list { grid-template-columns: repeat(5, 1fr); gap: 0; } } .ank-progress__step { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 8px 10px 0; cursor: pointer; border-bottom: 2px solid transparent; transition: border-color var(--dur-1) var(--ease); } .ank-progress__name { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); line-height: 1.2; } @media (max-width: 720px) { .ank-progress__name { display: none; } } .ank-progress__step.is-done .ank-progress__name { color: var(--ink-soft); } .ank-progress__step.is-active .ank-progress__name { color: var(--ink); } .ank-progress__step.is-active { border-bottom-color: var(--red); } .ank-progress__step.is-done { border-bottom-color: var(--ink); } .ank-progress__bar { height: 3px; background: color-mix(in oklab, var(--ink) 10%, transparent); margin-top: 10px; } .ank-progress__bar-fill { display: block; height: 100%; width: 0; background: var(--red); transition: width var(--dur-2) var(--ease); } .ank-form { display: block; } .ank-step { border: 0; padding: 0; margin: 0 0 var(--s-3); display: none; } .ank-step.is-active { display: block; animation: ankFadeIn 360ms var(--ease-out); } @keyframes ankFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .ank-step__legend { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -0.025em; color: var(--ink); font-weight: 500; margin-bottom: 0.4rem; display: flex; align-items: baseline; gap: 0.7rem; } .ank-step__intro { font-family: var(--font-body); color: var(--ink-soft); max-width: 56ch; line-height: 1.5; margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-soft); } .ank-q { display: grid; gap: 0.45rem; margin-bottom: var(--s-3); } .ank-q--consent { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); } .ank-label { font-family: var(--font-display); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; } .ank-label .req { color: var(--red); margin-left: 0.15em; } .ank-hint { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-mute); line-height: 1.4; } .ank-input, .ank-area, .ank-select { width: 100%; padding: 0.85rem 1rem; background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: 1.02rem; color: var(--ink); line-height: 1.4; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .ank-input::placeholder, .ank-area::placeholder { color: color-mix(in oklab, var(--ink) 42%, transparent); } .ank-input:hover, .ank-area:hover, .ank-select:hover { box-shadow: inset 0 -2px 0 var(--ink); } .ank-input:focus, .ank-area:focus, .ank-select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 2px var(--red), inset 0 -2px 0 var(--red); } .ank-input.is-invalid, .ank-area.is-invalid, .ank-select.is-invalid { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); } .ank-area { min-height: 110px; resize: vertical; } .ank-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .ank-row--inline { grid-template-columns: 1fr 1fr; gap: 0.4rem; } @media (max-width: 540px) { .ank-row { grid-template-columns: 1fr; } } .ank-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; } .ank-chips label { position: relative; cursor: pointer; display: inline-flex; } .ank-chips input { position: absolute; opacity: 0; pointer-events: none; } .ank-chips span { display: inline-block; padding: 0.5rem 0.95rem; border: 1.5px solid var(--line); background: var(--paper); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .ank-chips label:hover span { background: var(--ink); color: var(--paper); } .ank-chips input:checked + span { background: var(--red); color: var(--paper-bright); border-color: var(--red); } /* Channel multi-checkbox grid */ .ank-channels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; margin-top: 0.5rem; } @media (max-width: 640px) { .ank-channels-grid { grid-template-columns: repeat(2, 1fr); } } .ank-channels-grid.is-flash { animation: ankFlash 600ms ease; } @keyframes ankFlash { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px var(--red); } } .ank-chip { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .ank-chip input { position: absolute; opacity: 0; pointer-events: none; } .ank-chip__name { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; } .ank-chip:has(input:checked) { background: var(--ink); color: var(--paper); } .ank-chip:has(input:checked) .ank-chip__name { color: var(--paper); } .ank-chip:hover { background: var(--paper-deep); } .ank-chip:has(input:checked):hover { background: var(--ink); color: var(--paper); } .ank-preferred { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0.6rem; align-items: center; margin-top: 0.6rem; } @media (max-width: 540px) { .ank-preferred { grid-template-columns: 1fr; } } .ank-preferred label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .ank-consent { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); cursor: pointer; } .ank-consent input { margin-top: 0.25rem; accent-color: var(--red); width: 18px; height: 18px; } .ank-nav { position: sticky; bottom: 0; background: color-mix(in oklab, var(--paper) 96%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--line); margin-top: var(--s-3); z-index: 5; } .ank-nav__center { text-align: center; } .ank-nav__status { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-mute); } .ank-nav__status[data-tone="warn"] { color: var(--red); } .ank-nav__status[data-tone="ok"] { color: var(--ok); } @media (max-width: 540px) { .ank-nav { grid-template-columns: 1fr 1fr; } .ank-nav__center { grid-column: 1 / -1; order: -1; } } .ank-submit-error { margin-top: var(--s-3); padding: var(--s-2); border-left: 3px solid var(--red); background: color-mix(in oklab, var(--red) 8%, var(--paper)); font-size: 0.95rem; line-height: 1.55; } .ank-submit-error p { margin: 0 0 0.6rem; } .ank-submit-error__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .ank-submit-error__links a { color: var(--red); border-bottom: 1px solid var(--red); } /* Success state */ .ank-step--success { text-align: center; padding: var(--s-4) 0 var(--s-5); } .ank-success__mark { display: inline-block; position: relative; width: 64px; height: 64px; margin-bottom: var(--s-3); } .ank-success__mark-sq { position: absolute; left: 0; top: 0; width: 50px; height: 50px; background: var(--ink); } .ank-success__mark-dot { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: var(--red); border-radius: 50%; } .ank-success__title { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); color: var(--ink); letter-spacing: -0.02em; margin-bottom: var(--s-2); } .ank-success__text { color: var(--ink-soft); max-width: 52ch; margin: 0 auto var(--s-3); line-height: 1.55; } /* Round 6 — quick-book widget */ .quickbook { margin: var(--s-3) 0 var(--s-4); width: 100%; padding: var(--s-3); border: 1px solid var(--ink); border-radius: 14px; background: color-mix(in oklab, var(--red) 6%, var(--paper)); } .quickbook__inner { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; justify-content: space-between; } .quickbook__title { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); margin: 0 0 0.3rem; letter-spacing: -0.01em; } .quickbook__sub { color: var(--ink-soft); font-size: 0.92rem; max-width: 44ch; margin: 0; } .quickbook__form { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; } .quickbook__field { display: flex; flex-direction: column; gap: 0.3rem; } .quickbook__field span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .quickbook__field input { background: var(--paper); border: 1px solid var(--ink); border-radius: 10px; padding: 0.45rem 0.7rem; font-family: var(--font-body); font-size: 0.92rem; min-width: 160px; color: var(--ink); color-scheme: light; accent-color: var(--ink); } /* Native date control inherits a faded mid-grey for its segments and separators — force them to ink so the placeholder dd.mm.yyyy is actually readable on the cream paper background. */ .quickbook__field input[type="date"]::-webkit-datetime-edit, .quickbook__field input[type="date"]::-webkit-datetime-edit-fields-wrapper, .quickbook__field input[type="date"]::-webkit-datetime-edit-text, .quickbook__field input[type="date"]::-webkit-datetime-edit-day-field, .quickbook__field input[type="date"]::-webkit-datetime-edit-month-field, .quickbook__field input[type="date"]::-webkit-datetime-edit-year-field { color: var(--ink); } .quickbook__field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.65; cursor: pointer; } .quickbook__field input::placeholder { color: var(--ink-mute); } /* Round 6 — social-proof carousel */ .social-proof { margin: 0 0 var(--s-4); } .social-proof__caption { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 0.7rem; } .social-proof__track { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.4rem; scroll-snap-type: x mandatory; scrollbar-width: thin; } .social-proof__item { flex: 0 0 200px; scroll-snap-align: start; border: 1px solid var(--ink); background: var(--paper); } .social-proof__item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .social-proof__item figcaption { padding: 0.5rem 0.7rem; font-size: 0.78rem; color: var(--ink-soft); border-top: 1px solid var(--ink); } /* ───────────────────────────────────────────────────────────── About · through-line (the closing line of the bio body — sets the biographical spine: archaeology → museology → photography → dog) Placed AFTER the languages strip, closing the bio block. ───────────────────────────────────────────────────────────── */ .about__through-line { margin: 1.4rem 0 1.1rem; padding: 1rem 0 0; font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif); font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-style: italic; font-weight: 500; line-height: 1.35; color: var(--ink); border-top: 1px solid color-mix(in oklab, var(--ink) 15%, transparent); max-width: 48ch; } /* ───────────────────────────────────────────────────────────── Soul → Services bridge (one quiet line that returns the reader from biography back to the dog) ───────────────────────────────────────────────────────────── */ .soul-bridge { margin: 1.6rem 0 0; padding: 1rem 0 0; border-top: 1px dashed color-mix(in oklab, var(--ink) 22%, transparent); font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif); font-style: italic; font-size: 0.95rem; line-height: 1.4; color: var(--ink-soft); text-align: right; max-width: 48ch; margin-left: auto; }