and stretches over the card through its ::after,
so the markup keeps ONE real link per card — no wrapping block-level
content, and no second copy of the product name in the a11y tree. Anything
else clickable inside the card has to sit above that overlay, which is what
the z-index:2 on .datasheet .link-arrow above is for. */
.ds-link { color:inherit; text-decoration:none; }
.ds-link::after { content:""; position:absolute; inset:0; z-index:1; }
.ds-link:hover { color:var(--brand-700); }
/* The overlay, not the text, is what the user sees as "the card" — so move
the focus ring onto it. Without this the ring hugs the heading text only. */
.ds-link:focus-visible { outline:none; }
.ds-link:focus-visible::after { outline:3px solid var(--brand-600); outline-offset:-3px; border-radius:var(--radius-lg); }
/* THE NINTH CELL — home page only.
Eight products in a three-column grid leave exactly one hole at the bottom
right, and a hole in a lattice reads as a card that failed to load, not as
space. This closes it with the one thing a catalogue cannot say: what to do
when your paper is not on the list. Deliberately NOT a .datasheet — it must
not take a number in the ds counter and it must not look like a product
whose specs went missing.
Layering without a z-index race: the tile isolates, then the photo and the
scrim go to NEGATIVE z-indexes. Everything in normal flow therefore paints
above them with no positioning at all, which is what lets .ds-cta-link stay
static so its stretched ::before resolves against the tile rather than
against its own box. The same reason .ds-link works on the product cards. */
.ds-cta { position:relative; isolation:isolate; overflow:hidden;
border:1px solid var(--brand-800); border-radius:var(--r-card);
background:var(--surface-3); color:var(--paper-100);
display:flex; flex-direction:column; justify-content:flex-end;
padding:var(--sp-4); min-height:260px; }
/* sklad-tile.jpg is pre-cropped to this cell's aspect at 2x and carries the
same highlight rolloff grade as the poruchka hero footage, so no CSS zoom
and no filter are needed: object-fit:cover here is a no-op that only
guards against the file being replaced with a different ratio. */
.ds-cta-img { position:absolute; inset:0; z-index:-2;
width:100%; height:100%; object-fit:cover;
transition:transform .6s var(--ease); }
/* A scrim, not a flat tint. The picture keeps the top of the tile; the copy
gets near-solid ink under it, because the pale concrete floor in this frame
sits exactly where the text does. Measured, not eyeballed.
Stops are PIXELS FROM THE BOTTOM, not percentages: the copy block is a fixed
~170px tall, but the tile is 353px in the grid and much shorter as a
full-width banner below three columns. In percentages the same gradient
would put the words in the light half at exactly the width where the tile
gets short. */
.ds-cta::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
linear-gradient(to top,
rgba(6,20,21,.66) 0px, rgba(6,20,21,.66) 175px,
rgba(6,20,21,.42) 215px, rgba(6,20,21,.11) 265px, rgba(6,20,21,.04) 100%),
linear-gradient(180deg, rgba(15,93,98,.20) 0%, rgba(15,93,98,.12) 100%); }
/* The same 3px brand rule every other card on this site wipes in on hover. */
.ds-cta::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:1;
background:var(--brand-600); transform:scaleX(0); transform-origin:left;
transition:transform var(--dur) var(--ease); }
.ds-cta:is(:hover,:focus-within)::before { transform:scaleX(1); }
.ds-cta .eyebrow { color:var(--paper-300); margin-bottom:.55rem; }
.ds-cta h3 { color:#fff; font-size:1.3rem; line-height:1.1; margin-bottom:.5rem; }
.ds-cta-link { color:#fff; font-size:.9rem; margin-top:1rem; align-self:flex-start; min-height:44px; align-items:center; }
.ds-cta-link::before { content:""; position:absolute; inset:0; z-index:2; }
.ds-cta-link:focus-visible { outline:none; }
.ds-cta-link:focus-visible::before { outline:3px solid var(--brand-600); outline-offset:-3px; border-radius:var(--r-card); }
/* hover:hover — on a touch screen :hover latches after a tap and the frame
would stay pushed in until you tapped elsewhere. The photo is clipped by
the tile itself and carries no radius of its own, so this is the one place
a scale is safe (see the .team-card note: an unwrapped ![]()
is not). */
@media (hover:hover) { .ds-cta:hover .ds-cta-img { transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce) {
.ds-cta-img, .ds-cta::before { transition:none; }
.ds-cta:hover .ds-cta-img { transform:none; }
}
/* Below three columns a ninth cell would only move the hole, so the tile takes
the whole last row instead. At one column 1/-1 is that column: a no-op.
The cell stops being a portrait here, which is why the markup carries a
: the same breakpoint swaps the square crop for the landscape
frame the poruchka hero already ships. Blowing the portrait up to a 900px
banner gave a soft close-up of the cab and nothing else. Below ~656px the
grid drops to one column and the cell is nearly square again, so the third
hands the portrait back - that number is where auto-fill can no
longer fit two 280px tracks plus the gutter, not a design breakpoint. */
@media (max-width:1023px) {
.ds-cta { grid-column:1 / -1; min-height:280px; }
}
/* Horizontal datasheets — "Хартия и картон" only (BG + EN), the one page whose
cards carry a photo AND three long spec paragraphs. Stacked in a 280px grid
that produced eight very tall, very narrow columns; side by side the copy
reads at a sane measure.
The photo is lifted out of the card's flex column and placed absolutely
instead of being wrapped in a new : that leaves the markup, the
.datasheet-idx counter and the variants completely untouched.
min-height keeps a short card from clipping it. Falls back to the stacked
layout below 760px — see RESPONSIVE. */
.product-grid-h { grid-template-columns:minmax(0,1fr); }
.product-grid-h > .datasheet { padding-left:calc(220px + var(--sp-4) * 2); min-height:calc(200px + var(--sp-4) * 2); }
.product-grid-h > .datasheet > .datasheet-img { position:absolute; left:var(--sp-4); top:var(--sp-4); width:220px; height:200px; }
/* Deep links from the home-page cards land here; the header is sticky, so the
card has to clear it, and :target says which of the eight you arrived at. */
.product-grid-h > .datasheet { scroll-margin-top:88px; }
.product-grid-h > .datasheet:target { background:var(--surface-2); box-shadow:inset 3px 0 0 var(--brand-600); }
.product-grid-h > .datasheet:target::before { transform:scaleX(1); }
/* Material ghost — the card carries a very faint print of its own product
photo on hover, so the cell takes on the material rather than just a tone.
--plate-bg is set per card by app.js from the ![]()
already in the markup;
with JS off it resolves to `none` and nothing changes.
THE ALPHA IS MEASURED, NOT CHOSEN. Card text is --text-2 #6B6762, which on
the hover surface #FBFAF7 sits at 5.38:1. Blending each of the ten product
photos over that surface at their 1st-percentile darkest pixel gives a worst
case of 4.92:1 at 4%, 4.71:1 at 6%, and 4.50:1 at 8% — mukava-cvetna is the
one that breaks first. 8% fails WCAG body-AA, so the ceiling is 6% and this
ships at 5% (worst case ~4.8:1). Raising it costs legibility, not taste.
Re-measure before touching it, and re-measure if a photo is ever swapped.
z-index:-1 + isolation:isolate is what keeps the ghost above the card's own
background but under every word: without the isolation the negative layer
escapes to an ancestor stacking context and hides behind the card entirely.
No wrapper div, so no markup changed. */
@media (hover:hover) and (min-width:760px) {
.product-grid-h > .datasheet { isolation:isolate; }
.product-grid-h > .datasheet::after {
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:var(--plate-bg,none); background-repeat:no-repeat;
background-position:right center; background-size:auto 100%;
/* Without the mask the band lands as a hard vertical seam across the card.
The ramp also thins the ghost exactly where the copy runs: text ends at
~78% of the card width, where the mask is ~0.52, so the effective alpha
over any word is ~2.6% - the 5% figure above stays an upper bound. */
-webkit-mask-image:linear-gradient(90deg,transparent 55%,#000 100%);
mask-image:linear-gradient(90deg,transparent 55%,#000 100%);
opacity:0; filter:contrast(1);
transition:opacity .5s var(--ease), background-size .55s var(--ease), filter .55s var(--ease); }
.product-grid-h > .datasheet:hover::after { opacity:.05; }
/* ── Deep state: the pointer is on the PHOTO, not merely on the card ──
Анри, 2026-08-24: „сега само загатва че има нещо там, което ок, но ако
постои някой мишката върху картинката да стане по-плътно, все едно е
зоом на картинката, без да се налага да се отваря в друг прозорец."
So the ghost has two strengths. Anywhere on the card keeps the 5% hint
above. On the photo it goes to 35% AND the print scales to 150%,
anchored right, so the material grows and bleeds off the top and bottom
edges — that overflow is what makes it read as a zoom rather than as a
fade-up. It fires alongside the plate's own padding-collapse zoom, so
one gesture enlarges the specimen and floods the cell with it.
Only opacity, background-size and filter move between the two states.
The mask is deliberately identical in both: gradient mask-images do not
interpolate in Blink or WebKit, so animating the ramp would snap. A
steeper ramp for the deep state was rendered and rejected on looks: it
stops dead at the copy column and reads as a corner wash, not a zoom.
contrast(1.35) is doing more work here than the opacity is. These photos
are pale stock on a pale ground, so plain alpha over a near-white card
flattens them into a tint — the offset card at 45% still read as a smudge.
Pivoting at mid-grey pushes the highlights out to the surface and holds
the structure, so the winding of a roll and the edge of a stack survive.
It is very nearly free in contrast terms (9.28:1 → 9.25:1 at the same
alpha) because the darkest pixel in the set, in mukava-cvetna, is already
clamped at black — raising the filter cannot darken it any further.
:has(> …) keeps the child combinator on purpose — the .ds-variant
thumbnails inside are .datasheet-img too, and they take their
own plate zoom without dragging the parent card along. Where :has() is
unsupported the whole rule drops and the 5% hint is what remains.
WHY 40% IS SAFE WHERE THE 8% ABOVE WAS NOT. That ceiling assumes the
copy stays --text-2 (5.38:1). This state darkens it to --text #292827,
which is 14.10:1 on the same surface, and the headroom is what pays for
the ink. Recomputed over the same ten photos with the mask resolved per
column (four-systems/tools/ghost_math.py), worst case:
copy column, capped by the base `p{max-width:66ch}` at 78.5% 8.65:1
mukava with open — those rows are not , so they
run to 97.1% and meet the ramp at nearly full strength 5.45:1
Both are better than the 5.38:1 the copy has at rest, so the deep state
leaves the text more legible than it started while the photo gets eight
times stronger. That second row is the binding one: 45% takes it to
4.71:1 and 50% to 4.05:1, which fails. Re-run ghost_math.py before
changing either number, and re-run it if a product photo is swapped. */
.product-grid-h > .datasheet:has(> .datasheet-img:hover)::after {
opacity:.40; background-size:auto 150%; filter:contrast(1.35); }
.product-grid-h > .datasheet:has(> .datasheet-img:hover) .datasheet-desc,
.product-grid-h > .datasheet:has(> .datasheet-img:hover) > .datasheet-idx {
color:var(--text); }
/* Scoped here rather than on the base .datasheet-desc so the other three
pages that use datasheets keep their single-declaration rule. */
.product-grid-h > .datasheet .datasheet-desc,
.product-grid-h > .datasheet > .datasheet-idx { transition:color .45s var(--ease); }
}
@media (prefers-reduced-motion:reduce) {
.product-grid-h > .datasheet::after,
.product-grid-h > .datasheet .datasheet-desc,
.product-grid-h > .datasheet > .datasheet-idx { transition:none; }
}
/* Product variants grouped under their parent product (Дани, 2026-07-24:
"да бъдат групирани в едно"). Native , so the disclosure works
with JS off and on file:// — the same guarantee the .gsap-ready reveal
pattern exists to provide — and Space/Enter, aria-expanded and focus
management all come from the browser.
Deliberately NO margin-top:auto here: .spec-list already claims one, and
two auto margins in a flex column split the free space between them. */
.ds-variants-teaser { list-style:none; display:flex; flex-wrap:wrap; gap:.35rem .4rem; font-family:var(--font-mono); font-size:.72rem; color:var(--text-2); }
.ds-variants-teaser li { background:var(--paper-050); border:1px solid var(--line); border-radius:100px; padding:.1rem .55rem; }
/* The summary is a filled bar, not a text row (Анри, 2026-08-04: клиентите
подминаваха вариантите). A dashed hairline with a "+" read as a footnote in a
card that is already dense with „Приложение / Информация / Предлагане"
paragraphs, so the two extra products under it were being missed.
The stays CLOSED by default. Opening it was tried the same day and
reverted (Анри): it doubled the height of the card and pushed the rest of the
catalogue down. Visibility comes from the bar, not from the open state. */
.ds-variants { margin-top:.6rem; }
.ds-variants > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:.6rem; min-height:44px; padding:.5rem .75rem; background:color-mix(in srgb,var(--brand-600) 8%, var(--surface)); border:1px solid color-mix(in srgb,var(--brand-600) 34%, var(--line)); border-left:3px solid var(--brand-600); border-radius:var(--radius); font-family:var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.01em; color:var(--brand-800); transition:background var(--dur), border-color var(--dur); }
.ds-variants > summary:hover { background:color-mix(in srgb,var(--brand-600) 15%, var(--surface)); }
.ds-variants > summary::-webkit-details-marker { display:none; }
/* margin-left:auto on the count pushes both it and the chevron to the right,
so the bar keeps its shape whatever the length of the label in either language. */
.ds-variants-count { margin-left:auto; flex:none; font-family:var(--font-mono); font-weight:400; font-size:.72rem; line-height:1.6; background:var(--brand-600); color:#fff; border-radius:100px; padding:0 .5rem; }
.ds-variants > summary::after { content:"▾"; flex:none; font-size:.9rem; line-height:1; color:var(--brand-700); transition:transform var(--dur) var(--ease); }
.ds-variants[open] > summary::after { transform:rotate(180deg); }
.ds-variants-body { display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-3); }
/* These are s nested inside a card, not page sections — cancel the
global `section { padding-block:var(--section-y) }` rule from the base layer. */
.ds-variant { padding-block:0; }
.ds-variant h4 { font-family:var(--font-display); font-size:1.05rem; line-height:1.15; margin-bottom:.5rem; }
.ds-variant .datasheet-img { height:120px; margin-bottom:.6rem; }
.ds-variant .datasheet-desc + .datasheet-desc { margin-top:.5rem; }
/* Same treatment for the nested variants, so an opened doesn't
suddenly switch back to stacked cards inside a horizontal one. */
.product-grid-h .ds-variant { position:relative; padding-left:calc(150px + var(--sp-3)); min-height:120px; }
.product-grid-h .ds-variant > .datasheet-img { position:absolute; left:0; top:0; width:150px; height:120px; margin-bottom:0; }
/* Why-us numbered */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-4); }
.why-item { position:relative; padding-top:var(--sp-4); border-top:2px solid var(--ink-900); }
/* Icons: Lucide (lucide.dev), ISC License, Copyright (c) 2026 Lucide Icons
and Contributors. The ISC terms ask that the notice travel with the copies,
which for inlined path data means this comment. No on-page credit is
required and none is given.
Line art at a text-ish size: 1.75 stroke on a 24 grid, drawn at 30px. Teal,
because these are the only figurative marks on the page and the kraft
numerals already own the other accent. */
/* The icon rides the title line rather than sitting on a row of its own
(Анри, 2026-08-25). The numeral moved out of that row and into the 32px
padding gap under the rule, because icon + title + numeral in one
240px-minimum column squeezed the title to three lines. It is absolute,
so it costs the head row nothing. */
.why-head { display:flex; align-items:flex-start; gap:.6rem; }
.why-icon { width:26px; height:26px; color:var(--brand-600); flex:none; overflow:visible; }
.why-num { position:absolute; top:.4rem; right:0; font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--kraft-700); font-family:var(--font-mono); letter-spacing:.05em; }
/* min-width:0 so a long single word wraps instead of pushing the icon out. */
.why-item h3 { font-size:1.35rem; margin:0 0 .5rem; flex:1 1 auto; min-width:0; }
.why-item p { color:var(--text-2); font-size:.96rem; }
/* Steps */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-4); counter-reset:step; }
/* Two columns: the icon, then everything else. The paragraph spans both so it
starts under the icon, not indented past it. The numeral is NOT a grid item
— ::before is absolutely positioned, so it stays out of flow in the same
left gutter it always used. */
.step { position:relative; padding-left:calc(var(--sp-6) + 8px);
display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:.6rem; }
/* The icon used to hang under the numeral at 36px. Inline beside a 1.25rem
title that read oversized, so it drops to the same 26px as .why-icon
(Анри, 2026-08-25: "иконките да са на един ред със ... текста"). */
.step-icon { width:26px; height:26px; color:var(--brand-600); overflow:visible; align-self:center; }
.step::before { counter-increment:step; content:counter(step,decimal-leading-zero); position:absolute; left:0; top:-6px; font-family:var(--font-display); font-weight:300; font-size:2.6rem; color:var(--brand-800); opacity:.9; }
.step h3 { font-size:1.25rem; margin:0; }
.step > p { grid-column:1 / -1; margin-top:.4rem; }
.step p { color:var(--text-2); font-size:.95rem; }
/* Testimonials */
.tmt-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--sp-3); }
.tmt { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
/* Was Literata italic. A serif pull-quote belongs to a magazine, not a
specification sheet — the third typeface is gone. The quote earns its
distinction from size and from the white plate it sits on instead. */
.tmt-quote { font-size:1.22rem; line-height:1.45; color:var(--ink-800); }
.tmt-quote::before { content:"“"; font-size:2.4rem; line-height:0; color:var(--brand-600); vertical-align:-.35em; margin-right:.1em; }
/* The logo plate used to be 108x64 with 7px padding — a landscape box. Five of
the seven partner logos are SQUARE (162-225px sources), so object-fit:contain
sized them by the 50px content height and rendered them at 50x50: unreadable
("логата са много малки не могат да се разчетат"). The plate is now nearly
square, so a square mark fills 92x92 and a wide one (Пулсио, 1.67:1) still
gets 148px of width. 92px is the ceiling, not a round number: the smallest
sources are 162px, and 162/92 = 1.76x — anything larger goes soft on retina,
and mag97.com has no higher-resolution originals to pull (checked).
wrap + a flex-basis on the text means the name drops UNDER the plate inside a
narrow klienti.html grid card instead of being squeezed to a two-letter column. */
.tmt-author { display:flex; align-items:center; gap:.9rem; margin-top:auto; flex-wrap:wrap; }
.tmt-author img { width:min(100%,168px); height:112px; border-radius:12px; object-fit:contain; background:#fff; border:1px solid var(--line); padding:10px; flex:none; }
.tmt-author > span { flex:1 1 132px; min-width:0; }
.tmt-author b { font-family:var(--font-display); font-weight:700; display:block; }
.tmt-author small { color:var(--text-2); font-size:.82rem; }
/* References carousel.
Base state is a plain grid of ALL references, all visible — so with JS off
this is a good reference list, not a broken carousel. app.js adds .is-live,
and only THEN does it become one-at-a-time (same idiom as .gsap-ready).
Cards reuse .tmt/.tmt-quote/.tmt-author verbatim, so klienti.html, ekip.html
and the homepage cannot drift apart visually. */
.refs-track { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--sp-3); }
/* Live state is a NATIVE horizontal scroller, not a cross-fade. On a phone the
cards follow the finger and land on a snap point; the arrows just drive the
same scroll. A cross-fade could only be swiped in fixed 40px jumps and gave
no sense of a strip you can move ("нека има скролл с телефон").
gap:0 is load-bearing: with flex:0 0 100% and no gap, scrollLeft/clientWidth
IS the slide index, so the arrows and dots need no offset arithmetic. */
.refs.is-live .refs-track {
display:flex; gap:0; max-width:780px; margin-inline:auto;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
/* Hidden scrollbar: the arrows and dots already state that this moves, and a
desktop scrollbar under one quote reads as an accident. */
.refs.is-live .refs-track::-webkit-scrollbar { display:none; }
.refs.is-live .refs-track:focus-visible { outline:2px solid var(--brand-600); outline-offset:4px; border-radius:var(--radius-lg); }
/* display:flex on the slide + flex:1 on the card makes every card as tall as the
tallest quote, so the section never changes height as you scroll it. */
.refs.is-live .refs-item { flex:0 0 100%; scroll-snap-align:center; display:flex; }
.refs.is-live .refs-item > .tmt { flex:1; }
@media (prefers-reduced-motion:reduce) { .refs.is-live .refs-track { scroll-behavior:auto; } }
.refs-controls { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); margin-top:var(--sp-3); flex-wrap:wrap; }
.refs-btn { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 .9rem; border:1px solid var(--line); border-radius:100px; background:var(--surface); font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--accent-ink); transition:border-color var(--dur), background var(--dur); }
.refs-btn:hover { border-color:var(--brand-600); background:var(--paper-050); }
.refs-dots { display:flex; align-items:center; gap:.4rem; }
.refs-dot { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; }
/* Seven dots between two arrows need 338px and a 360px phone offers 320, so the
row broke into THREE (arrow / dots / arrow). Shrinking the dots to claw back
18px only moves the failure to a 320px screen. Give the dots a row of their
own instead: the block is then exactly two tidy rows at every phone width, and
the 28x32 hit area stays above the 24px WCAG 2.5.8 minimum. */
@media (max-width:560px) {
.refs-controls { gap:.5rem; }
.refs-dots { order:-1; flex-basis:100%; justify-content:center; }
.refs-dot { width:28px; height:32px; }
.refs-btn { padding:0 .7rem; }
}
.refs-dot::before { content:""; width:9px; height:9px; border-radius:100px; background:var(--paper-300); transition:background var(--dur), transform var(--dur); }
.refs-dot[aria-current="true"]::before { background:var(--brand-600); transform:scale(1.35); }
/* max-width:none overrides the base `p { max-width:66ch }`, which otherwise
left-anchors this paragraph and makes text-align:center centre it inside a
66ch box rather than inside the section. */
.refs-more { text-align:center; margin-top:var(--sp-3); max-width:none; }
/* The .cert-marks / .cert-mark rules that used to live here went with the
"Сертификационни знаци" section (Иванина, 29.07). Nothing referenced them. */
.card-mark { display:block; height:150px; width:auto; margin:0 0 var(--sp-3); }
/* FSC™ label: reproduced at its supplied proportions, never floated, never rescaled
or recoloured, with clear space around it — required by FSC trademark rules. */
.fsc-label { display:block; height:var(--fsc-mark-h); width:auto; max-width:100%; margin:0 0 var(--sp-3); }
/* Carried by every copy of the FSC artwork: the trust strip on both home pages
and the certificate card on both "Сертификати" pages. The img qualifier makes
it (0,1,1), so it outranks .trust-mark and .fsc-label wherever it sits. */
img.fsc-art { height:var(--fsc-art-h); }
.has-mark { display:flex; flex-direction:column; }
.card-mark-body { display:flow-root; }
.has-mark .card-cta { margin-top:auto; padding-top:var(--sp-3); }
/* Team */
/* Team laid out 1 / 3 / 3 (Дани, 2026-07-27): the managing director alone on
the first row, then two rows of three. Fixed three columns, not auto-fill —
at 1200px auto-fill(230px) packed five across and left a stray row of one. */
.team-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--sp-3); }
.team-grid > .team-card { grid-column:span 2; }
/* Odd remainder (5 cards = 3 + 2): centre the short last row instead of leaving a hole. */
.team-grid > .team-card:nth-last-child(2):nth-child(3n+1) { grid-column:2 / span 2; }
.team-grid > .team-card:nth-last-child(1):nth-child(3n+1) { grid-column:3 / span 2; }
.team-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-3); }
.team-card .avatar { width:100%; aspect-ratio:4/5; border-radius:var(--radius); object-fit:cover; background:linear-gradient(160deg,var(--paper-100),var(--paper-200)); margin-bottom:var(--sp-2); }
.team-card .avatar-fallback { display:grid; place-items:center; font-family:var(--font-display); font-weight:300; font-size:2.6rem; color:var(--brand-700); }
.team-card h3 { font-size:1.2rem; } .team-role { color:var(--brand-800); font-weight:600; font-family:var(--font-display); font-size:.92rem; }
.team-contact { margin-top:.75rem; padding-top:.7rem; border-top:1px dashed var(--line); font-family:var(--font-mono); font-size:.76rem; color:var(--text-2); display:flex; flex-direction:column; gap:.3rem; }
/* Business-card icons for role / phone / e-mail (Дани, 2026-07-27: "да са
много по-красиви"). Drawn entirely in CSS off the href protocol, so the
seven cards in ekip.html and their seven EN twins pick them up with zero
markup changes and cannot drift apart. Each icon is a tinted rounded chip:
two background layers on one pseudo-element — the SVG data-URI on top, the
chip fill underneath — which avoids needing a wrapper element per line.
Stroke colour is baked into the URI (--brand-700) because a background
image cannot inherit currentColor; the chip tints on hover instead. */
.team-role, .team-contact a { display:flex; align-items:center; gap:.55rem; }
.team-role::before, .team-contact a::before {
content:""; flex:none; width:26px; height:26px; border-radius:8px;
border:1px solid var(--line);
background-color:var(--paper-050);
background-repeat:no-repeat; background-position:center; background-size:14px 14px;
transition:background-color var(--dur), border-color var(--dur);
}
/* 24px is the WCAG 2.5.8 minimum target; the chip plus the text comfortably
clears it, but the row needs the height to actually be there. */
.team-contact a { min-height:26px; }
.team-contact a:hover { color:var(--accent-ink); }
.team-contact a:hover::before { background-color:var(--paper-100); border-color:var(--paper-300); }
/* id badge */
.team-role::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314757A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='15' rx='2.5'/%3E%3Cpath d='M9 3h6v2H9z'/%3E%3Ccircle cx='9' cy='11.5' r='2'/%3E%3Cpath d='M6 17c.6-1.6 1.7-2.4 3-2.4s2.4.8 3 2.4M15 10.5h3.5M15 14h3'/%3E%3C/svg%3E"); }
/* handset */
.team-contact a[href^="tel:"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314757A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.6a1.7 1.7 0 0 1-1.9 1.7 17 17 0 0 1-7.4-2.6 16.6 16.6 0 0 1-5.1-5.1A17 17 0 0 1 4 6.1 1.7 1.7 0 0 1 5.7 4.2h2.6a1.7 1.7 0 0 1 1.7 1.5c.1.8.3 1.7.6 2.5a1.7 1.7 0 0 1-.4 1.8l-1.1 1.1a13.6 13.6 0 0 0 5.1 5.1l1.1-1.1a1.7 1.7 0 0 1 1.8-.4c.8.3 1.6.5 2.5.6a1.7 1.7 0 0 1 1.4 1.6z'/%3E%3C/svg%3E"); }
/* envelope */
.team-contact a[href^="mailto:"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314757A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7 7.4 5.2a2 2 0 0 0 2.2 0L20.5 7'/%3E%3C/svg%3E"); }
.team-lead { display:flex; justify-content:center; margin-bottom:var(--sp-3); }
.team-lead .team-card { width:min(300px,100%); text-align:center; }
/* Only the name stays centred (text-align above). The role, phone and email
are flex rows; centring each one individually staggered their icons,
because every row is a different width. Left-aligning them instead puts
all three icons in one vertical column, exactly like the other cards
(Анри, 2026-07-28). The rows are still flex, so text-align does not
reach them — the default align-items:stretch is what does the work. */
.team-lead .team-role,
.team-lead .team-contact a { justify-content:flex-start; text-align:left; }
/* Team card hover. Same idiom as .news-card and .datasheet: a 3px brand rule
wiping in from the left, plus a half-step of surface and border. The site
never lifts a card on hover and this does not start.
The portrait gets an inset ring rather than a zoom. A zoom would need the
photo clipped by a parent, and these ![]()
s are deliberately unwrapped
(see the .datasheet-img note above); scaling one inside a card that clips
at its own radius drags the picture's rounded corners past their frame.
An inset shadow hugs the avatar's own radius, costs no layout, and on
cutout portraits shot against white it reads as a frame closing around the
person — which is the effect, and it survives the photos being replaced.
Saturation was the first idea and it was wrong: these are studio shots of
dark suits on white, so grey-to-colour had almost nothing to reveal. */
.team-card { position:relative; overflow:hidden;
transition:background var(--dur), border-color var(--dur); }
.team-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
background:var(--brand-600); transform:scaleX(0); transform-origin:left;
transition:transform var(--dur) var(--ease); }
/* outline, not inset box-shadow: on a replaced element the image content
paints over its own inset shadow, so the ring simply never appears.
outline draws above the image and, with a negative offset, inside its edge. */
.team-card .avatar { outline:0 solid transparent; outline-offset:-2px;
transition:outline-color var(--dur) var(--ease), outline-width var(--dur) var(--ease), filter var(--dur); }
.team-card:is(:hover,:focus-within) { background:var(--surface-1); border-color:var(--paper-300); }
.team-card:is(:hover,:focus-within)::before { transform:scaleX(1); }
/* hover:hover — on a touch screen :hover latches after a tap and the ring
would stay drawn until you tapped elsewhere. Pointer devices only; the
:focus-within half above is what carries this for keyboards. */
@media (hover:hover) {
.team-card:hover .avatar { outline:2px solid var(--brand-600); filter:contrast(1.04); }
}
.team-card:focus-within .avatar { outline:2px solid var(--brand-600); }
@media (prefers-reduced-motion:reduce) {
.team-card, .team-card::before, .team-card .avatar { transition:none; }
}
/* Badges (certs) */
.badge-row { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
/* Text-only badges. The coloured "FSC" / "ISO" discs that used to sit here were
invented marks, not artwork issued by FSC or CertInd — removed site-wide 2026-07-24.
Certification bodies only permit their own supplied logos, so never reintroduce them. */
/* white-space:nowrap keeps the FSC licence code from splitting across lines —
FSC requires the mark and its code to read as one unit. */
.cert-badge { display:inline-flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:.5rem 1rem; font-weight:700; font-family:var(--font-display); white-space:nowrap; }
/* Cards / callouts */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-4); }
.card-accent { border-left:4px solid var(--brand-600); }
.eu-notice { background:var(--surface-1); border:1px solid var(--line); border-left:4px solid var(--forest-600); border-radius:var(--radius-lg); padding:var(--sp-4); }
.eu-notice .flags { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--forest-600); text-transform:uppercase; margin-bottom:.6rem; }
.eu-notice p { font-size:.9rem; color:var(--text-2); }
/* News cards */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--sp-3); }
.news-card { position:relative; display:flex; flex-direction:column; gap:var(--sp-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-4); overflow:hidden; transition:background var(--dur), border-color var(--dur); }
.news-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brand-600); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); }
.news-card.is-project::before { background:var(--forest-600); }
.news-card:hover { background:var(--surface-1); border-color:var(--paper-300); }
.news-card:hover::before { transform:scaleX(1); }
.news-meta { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.news-date { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--accent-ink); }
.news-tag { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; background:var(--paper-100); color:var(--ink-600); padding:.25rem .6rem; border-radius:100px; }
.news-tag.is-project { background:rgba(47,93,70,.12); color:var(--forest-600); }
.news-card h3 { font-size:1.3rem; line-height:1.12; }
.news-excerpt { color:var(--text-2); font-size:.95rem; }
.news-card .link-arrow { margin-top:auto; font-size:.9rem; }
.news-more { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:.4rem; padding:.2rem 0; font-weight:600; font-size:.9rem; color:var(--brand-700); text-decoration:none; transition:gap var(--dur) var(--ease), color var(--dur); }
.news-more svg { width:14px; height:14px; transition:transform var(--dur) var(--ease); }
.news-more:hover { color:var(--brand-800); }
.news-more:hover svg { transform:translateX(4px); }
.news-card.is-project .news-more { color:var(--forest-600); }
/* Whole-card link on news (same pattern as .ds-link above). The lives on
the and stretches over the card through its ::after, so each card has
ONE real link whose accessible name is the article title — not eleven
identical "Прочети повече" in a row. The old link is now a : the
arrow stays as the affordance, so hover and focus have to be driven from
the card, not from the span, which can no longer be hovered under the overlay. */
.news-link { color:inherit; text-decoration:none; }
.news-link::after { content:""; position:absolute; inset:0; z-index:1; }
.news-card:hover .news-link { color:var(--brand-700); }
.news-card.is-project:hover .news-link { color:var(--forest-600); }
.news-card:hover .news-more { color:var(--brand-800); }
.news-card:hover .news-more svg { transform:translateX(4px); }
.news-card:hover .link-arrow::after { transform:translateX(4px); }
/* The overlay, not the heading text, is what reads as "the card" — put the
focus ring on it, and mirror the hover state so keyboard users see the
same card light up that a mouse user does. */
.news-link:focus-visible { outline:none; }
.news-link:focus-visible::after { outline:3px solid var(--brand-600); outline-offset:-3px; border-radius:var(--radius-lg); }
.news-card:focus-within { background:var(--surface-1); border-color:var(--paper-300); }
.news-card:focus-within::before { transform:scaleX(1); }
/* Article (single news) */
.article { padding-top:var(--sp-5); }
.article-head { max-width:56rem; }
.article-head h1 { margin-top:var(--sp-2); }
.article-head .article-date { font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em; color:var(--accent-ink); }
.article-figure { margin:var(--sp-5) 0; border-radius:var(--r-media); overflow:hidden; border:1px solid var(--line); }
.article-figure img { display:block; width:100%; height:auto; }
.article-figure figcaption { padding:var(--sp-2) var(--sp-3); font-size:.85rem; color:var(--text-2); background:var(--band); border-top:1px solid var(--line); }
.article-body { max-width:42rem; }
.article-body p { color:var(--text-2); line-height:1.78; font-size:1.05rem; margin-bottom:1.15em; }
.article-body p:first-of-type { color:var(--text); font-size:1.18rem; line-height:1.65; }
.article-body h2 { font-size:1.5rem; margin:var(--sp-4) 0 var(--sp-2); }
.article-gallery { margin-top:var(--sp-5); display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-2); }
.article-gallery a { display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--band); cursor:zoom-in; }
.article-gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-lg,.5s) var(--ease); }
.article-gallery a:hover img { transform:scale(1.05); }
.article-nav { display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:space-between; align-items:center; margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line); }
/* Lightbox (gallery) */
.lightbox { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); background:rgba(12,20,19,.94); cursor:zoom-out; touch-action:pan-y; }
.lightbox.is-open { display:flex; }
.lightbox-figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); max-width:100%; pointer-events:none; }
.lightbox-img { max-width:min(1100px,92vw); max-height:80vh; width:auto; height:auto; object-fit:contain; border-radius:var(--radius); box-shadow:0 24px 70px rgba(0,0,0,.55); background:var(--ink-900); -webkit-user-select:none; user-select:none; }
.lightbox-cap { color:var(--paper-200); font-size:.85rem; text-align:center; max-width:60ch; }
.lightbox-count { position:absolute; top:clamp(1rem,3vw,1.6rem); left:50%; transform:translateX(-50%); color:var(--paper-200); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; }
.lightbox-btn { position:absolute; display:grid; place-items:center; padding:0; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.32); color:#fff; cursor:pointer; transition:background var(--dur), transform var(--dur), border-color var(--dur); }
.lightbox-btn:hover { background:rgba(0,0,0,.6); border-color:rgba(255,255,255,.5); }
.lightbox-btn svg { width:24px; height:24px; }
.lightbox-prev { top:50%; left:clamp(.5rem,2.5vw,2rem); transform:translateY(-50%); }
.lightbox-next { top:50%; right:clamp(.5rem,2.5vw,2rem); transform:translateY(-50%); }
.lightbox-close { top:clamp(1rem,3vw,1.6rem); right:clamp(1rem,3vw,1.6rem); width:44px; height:44px; }
.lightbox-close svg { width:20px; height:20px; }
@media (prefers-reduced-motion: no-preference) {
.lightbox.is-open .lightbox-img { animation:lbFade .25s var(--ease); }
}
@keyframes lbFade { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:none; } }
@media (max-width:600px) {
.lightbox-btn { width:44px; height:44px; }
.lightbox-prev { left:8px; }
.lightbox-next { right:8px; }
.lightbox-img { max-height:74vh; }
}
/* CTA band */
.cta-band { text-align:center; }
/* The WebGL field sits under the copy and over nothing. .ink-band already
supplies position:relative, overflow:hidden and z-index:2 on its container,
so the canvas only has to claim the space and stay behind.
.ink-band::before is the paper grain every dark band on the site carries;
z-index:1 keeps it above the shader instead of buried under it, which is
what keeps this band looking like the same material as the others. */
.cta-band > .shader-canvas { position:absolute; inset:0; z-index:0;
display:block; width:100%; height:100%; pointer-events:none; }
.cta-band.ink-band::before { z-index:1; }
/* Contrast, the part of this effect that is not decoration.
Shipped as written, the shader's centre glow lifted the field behind the
copy to 0.27 relative luminance: the lead paragraph landed at 2.4:1, where
the flat --brand-800 it replaced was 5.7:1. That is an accessibility
regression dressed up as a background.
Two fixes, in this order. --brand-600 came out of the palette in the markup
(it drove both the 0.7 mix AND the centre glow, so it set the ceiling) —
that keeps the saturation and drops the luminance. Then this scrim, kept
deliberately light at .22 so the field still reads as colour rather than
as a dimmed photo.
Measured, not guessed: scratchpad/verify-shader.mjs hides the copy, samples
the brightest field pixel behind where it sat across five frames, and
computes the ratio. 6.48:1 heading, 4.84:1 lead. */
.cta-band::after { content:""; position:absolute; inset:0; z-index:1;
pointer-events:none; background:rgba(10,16,15,.22); }
.cta-band h2 { max-width:20ch; margin-inline:auto; }
.cta-band .lead { max-width:52ch; margin:var(--sp-3) auto 0; color:var(--paper-200); }
.cta-band .hero-cta { justify-content:center; }
/* CTA "next move" — the pointer-driven closing band on Контакти, after the
block at the foot of infinum.com. Three parts: the whole band is one link
to the quote form, the heading drifts sideways at a fraction of the
pointer's offset from the band centre, and a labelled dot rides the
pointer.
Everything the pointer drives is a custom property cta-move.js writes, so
this file still owns the resting state — and the resting state is what
touch, keyboard, no-JS and reduced-motion all get, because .is-live is the
only switch and the script refuses to set it without a hover-capable
pointer. Until then the plain button under the heading is the CTA. */
.cta-move {
/* Infinum's own red. It is not in the Paper & Teal palette on purpose —
the dot is the one imported accent, so it lives here and nowhere else.
Swap this one value for var(--kraft-500) to bring it back on brand. */
--cta-dot:#D8262C;
padding-block:0; text-align:center;
}
.cta-move__hit { display:block; position:relative; z-index:2;
padding-block:clamp(5rem,15vh,9.5rem); }
/* The arrow goes away while the band is live: the dot IS the cursor here, and
the system arrow sat on top of its label and made it unreadable. Only ever
applied together with the dot, so the pointer is never left invisible. */
.cta-move.is-live .cta-move__hit { cursor:none; }
.cta-move__drift { transition:transform .35s var(--ease); will-change:transform; }
.cta-move.is-live .cta-move__drift { transform:translate3d(var(--move-x,0px),0,0); }
.cta-move__title { font-size:clamp(2.4rem,1.2rem + 5.4vw,5.6rem); font-weight:800;
line-height:1.02; letter-spacing:-.03em; text-wrap:balance;
max-width:20ch; margin-inline:auto; }
.cta-move__btn { margin-top:var(--sp-5); }
/* Live: the button stops being the visible CTA (the band itself is), but it
stays in the accessibility tree so the link keeps a real action for its
name instead of a bare question, and so a screen reader still hears one.
Keyboard focus lands on the band link and the global focus ring shows it. */
.cta-move.is-live .cta-move__btn { position:absolute; width:1px; height:1px;
min-height:0; padding:0; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* The dot. Position rides on the wrapper with no transition so it tracks the
pointer frame for frame; scale and opacity sit on the circle so it can
spring in and out. Fixed is deliberate — .ink-band clips its overflow, and
a fixed box takes the viewport as its containing block, so the dot crosses
the band's edges instead of being cut at them. */
.cta-move__cursor { display:none; position:fixed; left:0; top:0; z-index:60;
pointer-events:none; will-change:transform;
transform:translate3d(var(--dot-x,-50vw),var(--dot-y,-50vh),0); }
.cta-move.is-live .cta-move__cursor { display:block; }
.cta-move__dot { display:grid; place-items:center; width:7rem; height:7rem;
margin:-3.5rem 0 0 -3.5rem; padding:0 .55rem; border-radius:50%;
background:var(--cta-dot); color:#fff; text-align:center;
font-family:var(--font-display); font-weight:700; font-size:.76rem;
letter-spacing:.09em; line-height:1.2; text-transform:uppercase;
opacity:var(--dot-o,0); transform:scale(var(--dot-s,0));
transition:transform .3s cubic-bezier(.55,0,.45,1), opacity .3s cubic-bezier(.55,0,.45,1); }
/* Belt and braces: the script already refuses to add .is-live here, so these
only matter if something else ever does. */
@media (prefers-reduced-motion:reduce) {
.cta-move.is-live .cta-move__drift { transform:none; }
.cta-move.is-live .cta-move__cursor { display:none; }
.cta-move.is-live .cta-move__btn { position:static; width:auto; height:auto;
min-height:48px; padding:.85em 1.6em; margin-top:var(--sp-5);
overflow:visible; clip:auto; }
}
/* Media hero — hartiq-i-karton only: the paper reels turning behind the title.
.page-hero is shared by 23 pages, so nothing below touches it. This is a
modifier that adds a ground, a picture and a plate on top of the shared rule.
Decks match .cta-band and the home hero: media at z0, .ink-band::before grain
at z1, .ink-band > .container already at z2.
The scrim over the footage is deliberately light. Readability is not its job
— that belongs to the frosted plate the copy sits on, and blur is far better
at it than opacity: blurring the backdrop collapses the specular highlights
on the reels, so peak luminance behind the text falls much further than a
flat tint of the same strength manages. Which is why the picture can stay
bright and the words still hold their ratios. Both measured, not guessed. */
.page-hero-media { position:relative; overflow:hidden; border-bottom:none;
padding-block:clamp(4rem,11vh,7.5rem) clamp(2.5rem,6vh,4.5rem); }
.page-hero-media.ink-band::before { z-index:1; }
/* .page-hero .eyebrow paints --accent-ink for the light pages. It sits in this
same layer at equal specificity but LATER in the file, so it would win on
source order and leave the eyebrow near-invisible on the dark plate. Doubling
the class beats it on specificity instead, which does not care about order. */
.page-hero.page-hero-media .eyebrow { color:var(--paper-200); }
.page-hero-media .breadcrumb { color:var(--paper-200); }
.page-hero-media .breadcrumb a { color:var(--paper-100); }
.page-hero-media .breadcrumb a:hover { color:#fff; }
.page-hero-media .lead { color:#fff; max-width:52ch; }
.page-hero-media h1 { max-width:16ch; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg :is(video,img) { width:100%; height:100%; object-fit:cover; }
/* the still is the reduced-motion fallback: CSS-switched, so it needs no JS */
.hero-bg .hero-bg-still { display:none; }
@media (prefers-reduced-motion: reduce) {
.hero-bg .hero-bg-video { display:none; }
.hero-bg .hero-bg-still { display:block; }
}
/* The scrim is per-page, because how much veil a shot needs is a property of
the shot. It is not a style choice that can be shared: the paper reels are
cream, which is to say nearly white, and need a real veil; the warehouse is
brown board and grey floor and needs almost none. One shared value would be
either too heavy for the warehouse or too light for the reels.
Top layer first in each: a 1-in-3px raster that nods at screened print, then
whatever dimming that particular picture actually requires. */
.hero-bg::after { content:""; position:absolute; inset:0; pointer-events:none; }
/* hartiq-i-karton — cream reels. Grade (saturation 0.45, contrast 1.05) is
baked into the mp4 rather than set here: a CSS filter on a
, so they
run to 97.1% and meet the ramp at nearly full strength 5.45:1
Both are better than the 5.38:1 the copy has at rest, so the deep state
leaves the text more legible than it started while the photo gets eight
times stronger. That second row is the binding one: 45% takes it to
4.71:1 and 50% to 4.05:1, which fails. Re-run ghost_math.py before
changing either number, and re-run it if a product photo is swapped. */
.product-grid-h > .datasheet:has(> .datasheet-img:hover)::after {
opacity:.40; background-size:auto 150%; filter:contrast(1.35); }
.product-grid-h > .datasheet:has(> .datasheet-img:hover) .datasheet-desc,
.product-grid-h > .datasheet:has(> .datasheet-img:hover) > .datasheet-idx {
color:var(--text); }
/* Scoped here rather than on the base .datasheet-desc so the other three
pages that use datasheets keep their single-declaration rule. */
.product-grid-h > .datasheet .datasheet-desc,
.product-grid-h > .datasheet > .datasheet-idx { transition:color .45s var(--ease); }
}
@media (prefers-reduced-motion:reduce) {
.product-grid-h > .datasheet::after,
.product-grid-h > .datasheet .datasheet-desc,
.product-grid-h > .datasheet > .datasheet-idx { transition:none; }
}
/* Product variants grouped under their parent product (Дани, 2026-07-24:
"да бъдат групирани в едно"). Native s are deliberately unwrapped
(see the .datasheet-img note above); scaling one inside a card that clips
at its own radius drags the picture's rounded corners past their frame.
An inset shadow hugs the avatar's own radius, costs no layout, and on
cutout portraits shot against white it reads as a frame closing around the
person — which is the effect, and it survives the photos being replaced.
Saturation was the first idea and it was wrong: these are studio shots of
dark suits on white, so grey-to-colour had almost nothing to reveal. */
.team-card { position:relative; overflow:hidden;
transition:background var(--dur), border-color var(--dur); }
.team-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
background:var(--brand-600); transform:scaleX(0); transform-origin:left;
transition:transform var(--dur) var(--ease); }
/* outline, not inset box-shadow: on a replaced element the image content
paints over its own inset shadow, so the ring simply never appears.
outline draws above the image and, with a negative offset, inside its edge. */
.team-card .avatar { outline:0 solid transparent; outline-offset:-2px;
transition:outline-color var(--dur) var(--ease), outline-width var(--dur) var(--ease), filter var(--dur); }
.team-card:is(:hover,:focus-within) { background:var(--surface-1); border-color:var(--paper-300); }
.team-card:is(:hover,:focus-within)::before { transform:scaleX(1); }
/* hover:hover — on a touch screen :hover latches after a tap and the ring
would stay drawn until you tapped elsewhere. Pointer devices only; the
:focus-within half above is what carries this for keyboards. */
@media (hover:hover) {
.team-card:hover .avatar { outline:2px solid var(--brand-600); filter:contrast(1.04); }
}
.team-card:focus-within .avatar { outline:2px solid var(--brand-600); }
@media (prefers-reduced-motion:reduce) {
.team-card, .team-card::before, .team-card .avatar { transition:none; }
}
/* Badges (certs) */
.badge-row { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
/* Text-only badges. The coloured "FSC" / "ISO" discs that used to sit here were
invented marks, not artwork issued by FSC or CertInd — removed site-wide 2026-07-24.
Certification bodies only permit their own supplied logos, so never reintroduce them. */
/* white-space:nowrap keeps the FSC licence code from splitting across lines —
FSC requires the mark and its code to read as one unit. */
.cert-badge { display:inline-flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:.5rem 1rem; font-weight:700; font-family:var(--font-display); white-space:nowrap; }
/* Cards / callouts */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-4); }
.card-accent { border-left:4px solid var(--brand-600); }
.eu-notice { background:var(--surface-1); border:1px solid var(--line); border-left:4px solid var(--forest-600); border-radius:var(--radius-lg); padding:var(--sp-4); }
.eu-notice .flags { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--forest-600); text-transform:uppercase; margin-bottom:.6rem; }
.eu-notice p { font-size:.9rem; color:var(--text-2); }
/* News cards */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--sp-3); }
.news-card { position:relative; display:flex; flex-direction:column; gap:var(--sp-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-4); overflow:hidden; transition:background var(--dur), border-color var(--dur); }
.news-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brand-600); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); }
.news-card.is-project::before { background:var(--forest-600); }
.news-card:hover { background:var(--surface-1); border-color:var(--paper-300); }
.news-card:hover::before { transform:scaleX(1); }
.news-meta { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.news-date { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--accent-ink); }
.news-tag { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; background:var(--paper-100); color:var(--ink-600); padding:.25rem .6rem; border-radius:100px; }
.news-tag.is-project { background:rgba(47,93,70,.12); color:var(--forest-600); }
.news-card h3 { font-size:1.3rem; line-height:1.12; }
.news-excerpt { color:var(--text-2); font-size:.95rem; }
.news-card .link-arrow { margin-top:auto; font-size:.9rem; }
.news-more { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:.4rem; padding:.2rem 0; font-weight:600; font-size:.9rem; color:var(--brand-700); text-decoration:none; transition:gap var(--dur) var(--ease), color var(--dur); }
.news-more svg { width:14px; height:14px; transition:transform var(--dur) var(--ease); }
.news-more:hover { color:var(--brand-800); }
.news-more:hover svg { transform:translateX(4px); }
.news-card.is-project .news-more { color:var(--forest-600); }
/* Whole-card link on news (same pattern as .ds-link above). The lives on
the
and stretches over the card through its ::after, so each card has
ONE real link whose accessible name is the article title — not eleven
identical "Прочети повече" in a row. The old link is now a : the
arrow stays as the affordance, so hover and focus have to be driven from
the card, not from the span, which can no longer be hovered under the overlay. */
.news-link { color:inherit; text-decoration:none; }
.news-link::after { content:""; position:absolute; inset:0; z-index:1; }
.news-card:hover .news-link { color:var(--brand-700); }
.news-card.is-project:hover .news-link { color:var(--forest-600); }
.news-card:hover .news-more { color:var(--brand-800); }
.news-card:hover .news-more svg { transform:translateX(4px); }
.news-card:hover .link-arrow::after { transform:translateX(4px); }
/* The overlay, not the heading text, is what reads as "the card" — put the
focus ring on it, and mirror the hover state so keyboard users see the
same card light up that a mouse user does. */
.news-link:focus-visible { outline:none; }
.news-link:focus-visible::after { outline:3px solid var(--brand-600); outline-offset:-3px; border-radius:var(--radius-lg); }
.news-card:focus-within { background:var(--surface-1); border-color:var(--paper-300); }
.news-card:focus-within::before { transform:scaleX(1); }
/* Article (single news) */
.article { padding-top:var(--sp-5); }
.article-head { max-width:56rem; }
.article-head h1 { margin-top:var(--sp-2); }
.article-head .article-date { font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em; color:var(--accent-ink); }
.article-figure { margin:var(--sp-5) 0; border-radius:var(--r-media); overflow:hidden; border:1px solid var(--line); }
.article-figure img { display:block; width:100%; height:auto; }
.article-figure figcaption { padding:var(--sp-2) var(--sp-3); font-size:.85rem; color:var(--text-2); background:var(--band); border-top:1px solid var(--line); }
.article-body { max-width:42rem; }
.article-body p { color:var(--text-2); line-height:1.78; font-size:1.05rem; margin-bottom:1.15em; }
.article-body p:first-of-type { color:var(--text); font-size:1.18rem; line-height:1.65; }
.article-body h2 { font-size:1.5rem; margin:var(--sp-4) 0 var(--sp-2); }
.article-gallery { margin-top:var(--sp-5); display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-2); }
.article-gallery a { display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--band); cursor:zoom-in; }
.article-gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-lg,.5s) var(--ease); }
.article-gallery a:hover img { transform:scale(1.05); }
.article-nav { display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:space-between; align-items:center; margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line); }
/* Lightbox (gallery) */
.lightbox { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); background:rgba(12,20,19,.94); cursor:zoom-out; touch-action:pan-y; }
.lightbox.is-open { display:flex; }
.lightbox-figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); max-width:100%; pointer-events:none; }
.lightbox-img { max-width:min(1100px,92vw); max-height:80vh; width:auto; height:auto; object-fit:contain; border-radius:var(--radius); box-shadow:0 24px 70px rgba(0,0,0,.55); background:var(--ink-900); -webkit-user-select:none; user-select:none; }
.lightbox-cap { color:var(--paper-200); font-size:.85rem; text-align:center; max-width:60ch; }
.lightbox-count { position:absolute; top:clamp(1rem,3vw,1.6rem); left:50%; transform:translateX(-50%); color:var(--paper-200); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; }
.lightbox-btn { position:absolute; display:grid; place-items:center; padding:0; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.32); color:#fff; cursor:pointer; transition:background var(--dur), transform var(--dur), border-color var(--dur); }
.lightbox-btn:hover { background:rgba(0,0,0,.6); border-color:rgba(255,255,255,.5); }
.lightbox-btn svg { width:24px; height:24px; }
.lightbox-prev { top:50%; left:clamp(.5rem,2.5vw,2rem); transform:translateY(-50%); }
.lightbox-next { top:50%; right:clamp(.5rem,2.5vw,2rem); transform:translateY(-50%); }
.lightbox-close { top:clamp(1rem,3vw,1.6rem); right:clamp(1rem,3vw,1.6rem); width:44px; height:44px; }
.lightbox-close svg { width:20px; height:20px; }
@media (prefers-reduced-motion: no-preference) {
.lightbox.is-open .lightbox-img { animation:lbFade .25s var(--ease); }
}
@keyframes lbFade { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:none; } }
@media (max-width:600px) {
.lightbox-btn { width:44px; height:44px; }
.lightbox-prev { left:8px; }
.lightbox-next { right:8px; }
.lightbox-img { max-height:74vh; }
}
/* CTA band */
.cta-band { text-align:center; }
/* The WebGL field sits under the copy and over nothing. .ink-band already
supplies position:relative, overflow:hidden and z-index:2 on its container,
so the canvas only has to claim the space and stay behind.
.ink-band::before is the paper grain every dark band on the site carries;
z-index:1 keeps it above the shader instead of buried under it, which is
what keeps this band looking like the same material as the others. */
.cta-band > .shader-canvas { position:absolute; inset:0; z-index:0;
display:block; width:100%; height:100%; pointer-events:none; }
.cta-band.ink-band::before { z-index:1; }
/* Contrast, the part of this effect that is not decoration.
Shipped as written, the shader's centre glow lifted the field behind the
copy to 0.27 relative luminance: the lead paragraph landed at 2.4:1, where
the flat --brand-800 it replaced was 5.7:1. That is an accessibility
regression dressed up as a background.
Two fixes, in this order. --brand-600 came out of the palette in the markup
(it drove both the 0.7 mix AND the centre glow, so it set the ceiling) —
that keeps the saturation and drops the luminance. Then this scrim, kept
deliberately light at .22 so the field still reads as colour rather than
as a dimmed photo.
Measured, not guessed: scratchpad/verify-shader.mjs hides the copy, samples
the brightest field pixel behind where it sat across five frames, and
computes the ratio. 6.48:1 heading, 4.84:1 lead. */
.cta-band::after { content:""; position:absolute; inset:0; z-index:1;
pointer-events:none; background:rgba(10,16,15,.22); }
.cta-band h2 { max-width:20ch; margin-inline:auto; }
.cta-band .lead { max-width:52ch; margin:var(--sp-3) auto 0; color:var(--paper-200); }
.cta-band .hero-cta { justify-content:center; }
/* CTA "next move" — the pointer-driven closing band on Контакти, after the
block at the foot of infinum.com. Three parts: the whole band is one link
to the quote form, the heading drifts sideways at a fraction of the
pointer's offset from the band centre, and a labelled dot rides the
pointer.
Everything the pointer drives is a custom property cta-move.js writes, so
this file still owns the resting state — and the resting state is what
touch, keyboard, no-JS and reduced-motion all get, because .is-live is the
only switch and the script refuses to set it without a hover-capable
pointer. Until then the plain button under the heading is the CTA. */
.cta-move {
/* Infinum's own red. It is not in the Paper & Teal palette on purpose —
the dot is the one imported accent, so it lives here and nowhere else.
Swap this one value for var(--kraft-500) to bring it back on brand. */
--cta-dot:#D8262C;
padding-block:0; text-align:center;
}
.cta-move__hit { display:block; position:relative; z-index:2;
padding-block:clamp(5rem,15vh,9.5rem); }
/* The arrow goes away while the band is live: the dot IS the cursor here, and
the system arrow sat on top of its label and made it unreadable. Only ever
applied together with the dot, so the pointer is never left invisible. */
.cta-move.is-live .cta-move__hit { cursor:none; }
.cta-move__drift { transition:transform .35s var(--ease); will-change:transform; }
.cta-move.is-live .cta-move__drift { transform:translate3d(var(--move-x,0px),0,0); }
.cta-move__title { font-size:clamp(2.4rem,1.2rem + 5.4vw,5.6rem); font-weight:800;
line-height:1.02; letter-spacing:-.03em; text-wrap:balance;
max-width:20ch; margin-inline:auto; }
.cta-move__btn { margin-top:var(--sp-5); }
/* Live: the button stops being the visible CTA (the band itself is), but it
stays in the accessibility tree so the link keeps a real action for its
name instead of a bare question, and so a screen reader still hears one.
Keyboard focus lands on the band link and the global focus ring shows it. */
.cta-move.is-live .cta-move__btn { position:absolute; width:1px; height:1px;
min-height:0; padding:0; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* The dot. Position rides on the wrapper with no transition so it tracks the
pointer frame for frame; scale and opacity sit on the circle so it can
spring in and out. Fixed is deliberate — .ink-band clips its overflow, and
a fixed box takes the viewport as its containing block, so the dot crosses
the band's edges instead of being cut at them. */
.cta-move__cursor { display:none; position:fixed; left:0; top:0; z-index:60;
pointer-events:none; will-change:transform;
transform:translate3d(var(--dot-x,-50vw),var(--dot-y,-50vh),0); }
.cta-move.is-live .cta-move__cursor { display:block; }
.cta-move__dot { display:grid; place-items:center; width:7rem; height:7rem;
margin:-3.5rem 0 0 -3.5rem; padding:0 .55rem; border-radius:50%;
background:var(--cta-dot); color:#fff; text-align:center;
font-family:var(--font-display); font-weight:700; font-size:.76rem;
letter-spacing:.09em; line-height:1.2; text-transform:uppercase;
opacity:var(--dot-o,0); transform:scale(var(--dot-s,0));
transition:transform .3s cubic-bezier(.55,0,.45,1), opacity .3s cubic-bezier(.55,0,.45,1); }
/* Belt and braces: the script already refuses to add .is-live here, so these
only matter if something else ever does. */
@media (prefers-reduced-motion:reduce) {
.cta-move.is-live .cta-move__drift { transform:none; }
.cta-move.is-live .cta-move__cursor { display:none; }
.cta-move.is-live .cta-move__btn { position:static; width:auto; height:auto;
min-height:48px; padding:.85em 1.6em; margin-top:var(--sp-5);
overflow:visible; clip:auto; }
}
/* Media hero — hartiq-i-karton only: the paper reels turning behind the title.
.page-hero is shared by 23 pages, so nothing below touches it. This is a
modifier that adds a ground, a picture and a plate on top of the shared rule.
Decks match .cta-band and the home hero: media at z0, .ink-band::before grain
at z1, .ink-band > .container already at z2.
The scrim over the footage is deliberately light. Readability is not its job
— that belongs to the frosted plate the copy sits on, and blur is far better
at it than opacity: blurring the backdrop collapses the specular highlights
on the reels, so peak luminance behind the text falls much further than a
flat tint of the same strength manages. Which is why the picture can stay
bright and the words still hold their ratios. Both measured, not guessed. */
.page-hero-media { position:relative; overflow:hidden; border-bottom:none;
padding-block:clamp(4rem,11vh,7.5rem) clamp(2.5rem,6vh,4.5rem); }
.page-hero-media.ink-band::before { z-index:1; }
/* .page-hero .eyebrow paints --accent-ink for the light pages. It sits in this
same layer at equal specificity but LATER in the file, so it would win on
source order and leave the eyebrow near-invisible on the dark plate. Doubling
the class beats it on specificity instead, which does not care about order. */
.page-hero.page-hero-media .eyebrow { color:var(--paper-200); }
.page-hero-media .breadcrumb { color:var(--paper-200); }
.page-hero-media .breadcrumb a { color:var(--paper-100); }
.page-hero-media .breadcrumb a:hover { color:#fff; }
.page-hero-media .lead { color:#fff; max-width:52ch; }
.page-hero-media h1 { max-width:16ch; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg :is(video,img) { width:100%; height:100%; object-fit:cover; }
/* the still is the reduced-motion fallback: CSS-switched, so it needs no JS */
.hero-bg .hero-bg-still { display:none; }
@media (prefers-reduced-motion: reduce) {
.hero-bg .hero-bg-video { display:none; }
.hero-bg .hero-bg-still { display:block; }
}
/* The scrim is per-page, because how much veil a shot needs is a property of
the shot. It is not a style choice that can be shared: the paper reels are
cream, which is to say nearly white, and need a real veil; the warehouse is
brown board and grey floor and needs almost none. One shared value would be
either too heavy for the warehouse or too light for the reels.
Top layer first in each: a 1-in-3px raster that nods at screened print, then
whatever dimming that particular picture actually requires. */
.hero-bg::after { content:""; position:absolute; inset:0; pointer-events:none; }
/* hartiq-i-karton — cream reels. Grade (saturation 0.45, contrast 1.05) is
baked into the mp4 rather than set here: a CSS filter on a