/* ========================================================================= 0. Fonts — self-hosted ========================================================================= Served from this origin, not from Google. Two reasons, both real: 1. GDPR. A Google Fonts request sends the visitor's IP to Google Ireland before they have agreed to anything, which the privacy page then has to disclose as a third-country transfer. Self-hosting deletes the transfer rather than documenting it. 2. Delivery. The old chain was preconnect -> googleapis CSS -> gstatic woff2: three round trips before a glyph paints, on a phone, over a Czech mobile network. Subsets: latin + latin-ext only. latin-ext is what carries the Czech diacritics, so it is not optional here; vietnamese was dropped. Space Grotesk 500 was declared in the old link and used nowhere in this file (measured: only 400 and 700 appear), so it is gone too. 10 files, 150 kB. font-display: swap is kept from Google's own CSS: the fallback stacks in the tokens below are close enough in metrics that a swap reads as a correction, not as a flash of a different design. ========================================================================= */ /* latin-ext */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/anton-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/anton-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/space-grotesk-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/space-grotesk-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/space-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/space-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/space-mono-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/space-mono-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================= BladeWave — styles.css Faithful port of design-source/Bladewave.dc.html + Apple-design taste pass. Every colour lives in :root. Nothing below :root carries a raw hex. ========================================================================= */ :root { /* ---- Palette (exact values from BUILD-BRIEF.md) ---------------------- */ --bw-bg: #0e0d0c; /* page background */ --bw-panel: #14120f; /* card / input background */ --bw-cream: #f2ead9; /* primary text, light section background */ --bw-pink: #fb2f92; /* accent */ --bw-body: #b8b0a2; /* body copy on dark */ --bw-muted: #8f887c; /* labels on dark */ --bw-faint: #6b6459; /* fine print */ --bw-line: #2a2724; /* hairline borders on dark */ /* Form-field boundary. --bw-line is 1.31:1 on the page ground and 1.04:1 on the field fill, so an unfocused input had no perceivable edge at all (WCAG 1.4.11 asks 3:1 of a UI component's boundary). --bw-faint is the palette's own next step up and measures 3.41:1 on --bw-bg, so no new colour enters; it is used ONLY on the fields, never on section rules. */ --bw-field-line: var(--bw-faint); --bw-stroke: #4a4541; /* secondary button border */ --bw-ink: #0e0d0c; /* text on light sections */ --bw-ink-body: #4a443c; /* body copy on cream */ --bw-faint-safe: var(--bw-muted); /* fine print on DARK: --bw-faint is 3.32:1 there (AA needs 4.5); --bw-muted is 5.53:1 and is already in the palette, so no new hex enters. */ --bw-ink-faint: #6b6459; /* fine print on cream — 4.88:1, passes, left alone */ --bw-cream-2: #e0d5bf; /* media placeholder fill on cream */ --bw-pink-body: #3d0a24; /* body copy on pink — 4.674:1 on --bw-pink, passes */ --bw-pink-muted: #7a1147; /* source label ink on pink — 2.964:1, fails AA; unused */ /* The AA-safe stand-in for --bw-pink-muted. The source separates the two on-pink levels by LIGHTNESS (L* 26.7 vs 11.5) and that route is closed: 4.5:1 is the floor and the body already sits at 4.674:1, so the whole legal window is L* 11.5–12.9 — 1.4 units, invisible. The separation has to come from chroma instead. #4b0011 is the best value there: 4.531:1 on #fb2f92 (AA pass, body 4.674:1) dE2000 10.14 vs #3d0a24 (the body it must not merge with) dE2000 23.42 vs #0e0d0c (the name/price ink it must not merge with) and it keeps the source's ORDER — fg 5.477 > body 4.674 > muted 4.531 — so the labels still recede. Going darker instead reaches dE 9.6 but inverts that order (5.488 > body) and closes on the near-black name and price (dE 13.6). Measured, not guessed. */ --bw-pink-muted-safe: #4b0011; /* ---- Channel tokens: single source of truth for the alpha variants --- */ --bw-bg-rgb: 14 13 12; --bw-pink-rgb: 251 47 146; --bw-nav-bg: rgb(var(--bw-bg-rgb) / 0.72); --bw-nav-edge: linear-gradient(to bottom, rgb(var(--bw-bg-rgb) / 0.85), transparent); --bw-pink-glow: rgb(var(--bw-pink-rgb) / 0.35); --bw-pink-ring: rgb(var(--bw-pink-rgb) / 0.28); --bw-slot-fill: rgba(127, 127, 127, 0.08); /* image-slot empty state, per brief */ /* ---- Type families -------------------------------------------------- */ --bw-font-display: 'Anton', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif; --bw-font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --bw-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace; --bw-font-system: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ---- Type scale (derived from the source's inline clamp() values) ---- */ --bw-fs-hero: clamp(64px, 11vw, 170px); --bw-fs-display: clamp(40px, 6vw, 90px); --bw-fs-display-xl: clamp(52px, 6.5vw, 110px); --bw-fs-display-sm: clamp(36px, 5vw, 72px); --bw-fs-service: clamp(28px, 3.6vw, 52px); --bw-fs-stat: clamp(44px, 6vw, 84px); --bw-fs-price: clamp(28px, 2.4vw, 38px); --bw-fs-plan: 25px; --bw-fs-num: 60px; --bw-fs-logo: 24px; --bw-fs-lead: 19px; --bw-fs-lead-2: 18px; --bw-fs-lead-3: 17px; --bw-fs-body: 16px; --bw-fs-body-2: 15px; --bw-fs-item: 14.5px; --bw-fs-mono: 14px; --bw-fs-mono-2: 13px; --bw-fs-mono-3: 12.5px; --bw-fs-mono-4: 12px; --bw-fs-fine: 11.5px; --bw-fs-cap: 13px; /* ---- Tracking & leading (Apple rule 15: size-specific tracking) ------ */ /* The source declares tracking in exactly five places, and each one is honoured verbatim below or at its rule: nav logo 1px -> .bw-nav__logo h1 0 -> --bw-track-hero marquee 1px -> .bw-marquee__track sluzby h3 0.5px -> .bw-service__title proces h3 0.5px -> .bw-step__title Everywhere else the source declares nothing, so those headings keep the skill's negative display tracking. (The h1's -0.025em was also wrong on its own terms: it ate the sidebearings the 2px stroke on "NEJDE" needs.) */ --bw-track-hero: 0em; --bw-track-display: -0.02em; --bw-track-display-sm: -0.01em; --bw-track-body: 0em; /* The source's 0.92 was a single-line-per-colour value and the h1 is two lines in Czech: measured at 1440, the pink caron of Ř in PŘESKOČIT is drawn straight through the cream K of KTERÝ, and the comma of OBSAH, lands inside the outlined NEJDE. The mobile block already carried 1.15 for exactly this reason; one value now covers every width, so the override below 760px is gone rather than duplicated. */ --bw-lh-hero: 1.15; --bw-lh-display: 0.95; /* single-line h2s: leading is invisible there */ /* Two-line Anton headings whose leading the *build* invented (the source declares none, so they rendered at `normal` ≈ 1.51). Anton's caron/acute band reaches ~1.10em above the next baseline in Czech caps, so 0.95 makes Ý collide with Ý. 1.15 is the tightest value that clears at every width (measured: 1.10 = break-even, 1.15 = 1.8–3.6px of air). */ --bw-lh-display-multi: 1.15; /* Ů is taller than an acute: its ring sits a further ~0.10em above the cap line, and at 1.15 the Ů of ÚDAJŮ is drawn inside the A of OCHRANA on the privacy page's h1. 1.25 is the first value that opens real air there. */ --bw-lh-display-ring: 1.25; --bw-lh-tight: 1.1; --bw-lh-snug: 1.45; --bw-lh-body: 1.55; --bw-lh-loose: 1.6; /* ---- Spacing / layout ----------------------------------------------- */ --bw-gutter: 40px; /* Raised below when the browser reports a real inset. Declared here as the plain value so nothing depends on env() being understood. */ --bw-gutter-sm: 20px; --bw-max: 1240px; --bw-max-narrow: 900px; --bw-col-gap: 70px; --bw-sec-y: 100px; --bw-sec-y-lg: 110px; --bw-sec-y-sm: 90px; --bw-hair: 1px; --bw-rule: 2px; --bw-diag: 3vw; /* Prace section diagonal */ --bw-card: 270px; /* work card width */ /* Room for the rotated band. The bleed of a -1.2deg rotation grows with the viewport (~0.0107 x width), so a fixed 36px allowance started slicing the band's corners and its 3px border above ~3300px. Fluid clears it at every width. */ --bw-marquee-bleed: calc(1.2vw + 12px); /* ---- Motion ---------------------------------------------------------- */ --bw-ease: cubic-bezier(0.22, 1, 0.36, 1); --bw-t-press: 100ms; --bw-t-hover: 150ms; --bw-t-edge: 250ms; /* ---- Focus ---------------------------------------------------------- One ring everywhere. Only the offset varies, and only for one reason: +3px by default, negative where a clip-path or overflow:hidden would eat it (notched buttons -6px, carousel viewport -4px). */ --bw-focus: 2px solid var(--bw-pink); --bw-focus-offset: 3px; /* ---- Shapes ---------------------------------------------------------- */ --bw-notch-sm: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); --bw-notch-lg: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); color-scheme: dark; } /* ========================================================================= 1. Base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } /* The hidden attribute has to win. It is an attribute selector, so a class that sets display -- .bw-footer__link { display: inline-block } is the one that caught us -- has equal specificity and later source order, and the element renders anyway. That is how the cookie settings button shipped VISIBLE and inert on all sixteen pages while `el.hidden` cheerfully reported true: the property was set, the box was still 135px wide. Test computed display, not the property, and keep this rule above the components that would otherwise outrank it. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 86px; /* clears the sticky nav on anchor jumps */ overflow-x: clip; /* belt-and-braces: no horizontal scroll, sticky safe */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, .bw-body { margin: 0; min-height: 100vh; background: var(--bw-bg); color: var(--bw-cream); font-family: var(--bw-font-body); font-size: var(--bw-fs-body); line-height: var(--bw-lh-body); letter-spacing: var(--bw-track-body); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--bw-cream); text-decoration: none; } a:focus-visible, summary:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: var(--bw-focus); outline-offset: var(--bw-focus-offset); } ::selection { background: var(--bw-pink); color: var(--bw-ink); } h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } .bw-main:focus { outline: none; } /* ========================================================================= 2. Utilities ========================================================================= */ .bw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; text-transform: none; } .bw-skip { position: fixed; top: 12px; left: 12px; z-index: 100; background: var(--bw-pink); color: var(--bw-ink); font-family: var(--bw-font-mono); font-weight: 700; font-size: var(--bw-fs-mono); padding: 14px 20px; transform: translateY(calc(-100% - 24px)); transition: transform var(--bw-t-edge) var(--bw-ease); } .bw-skip:focus-visible { transform: translateY(0); outline: 2px solid var(--bw-cream); outline-offset: 3px; color: var(--bw-ink); } /* ========================================================================= 3. Keyframes and scroll reveal ========================================================================= */ @keyframes bw-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes bw-hero-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } [data-reveal] { opacity: 0; transform: translateY(30px); /* source value, uniform */ transition: opacity 0.7s ease, transform 0.8s var(--bw-ease); will-change: opacity, transform; } [data-reveal].bw-in { opacity: 1; transform: translateY(0); will-change: auto; } /* Distance is the source's, uniformly: `translateY(30px)` for every [data-reveal]. An earlier pass scaled it per element (18px / 12px) on the theory that a big block should travel less; the source says otherwise and the source wins. The grid arrives as one plate on that 30px, and the six plans then land in reading order on top of it. The stagger is the only addition — children only, no extra markup, and the observer still watches the container exactly as the source specifies. The child offset stays 16px because it rides on the container's 30px rather than replacing it: peak travel is 46px, but only at t=0 where both opacities are still 0. Measured through the transition, the first frame with any ink on screen (t=140ms, container opacity 0.38) shows 11.9-25.3px of remaining travel and the last plan is home by 560ms. The cards also slide against the cream 2px grid lines, so a larger child travel would open visible cream bands between them. */ .bw-pricing__grid > .bw-plan { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.55s var(--bw-ease); } .bw-pricing__grid.bw-in > .bw-plan { opacity: 1; transform: none; } .bw-pricing__grid.bw-in > .bw-plan:nth-child(1) { transition-delay: 0ms; } .bw-pricing__grid.bw-in > .bw-plan:nth-child(2) { transition-delay: 55ms; } .bw-pricing__grid.bw-in > .bw-plan:nth-child(3) { transition-delay: 110ms; } .bw-pricing__grid.bw-in > .bw-plan:nth-child(4) { transition-delay: 165ms; } .bw-pricing__grid.bw-in > .bw-plan:nth-child(5) { transition-delay: 220ms; } .bw-pricing__grid.bw-in > .bw-plan:nth-child(6) { transition-delay: 275ms; } /* ---- No-JS / missing-script guard for the reveal -------------------------- The two rules above hide their targets at `opacity: 0` and hand the reveal to main.js. That is a single point of failure: without the script nothing ever adds `.bw-in`, and the six plans plus five section headings stay invisible for good — measured, 900px of black where the ceník should be. Two independent guards close it, and neither touches the working path. 1. Scripting switched off. `(scripting: none)` is the exact question, and a browser too old to know the feature simply never matches it — so nothing regresses there, it just falls back to guard 2. 2. Script enabled but never arrived (404, blocked, parse error). CSS cannot ask that directly, so it asks for proof of life instead: main.js writes `#bw-nav-edge`'s inline opacity and `#bw-sticky`'s aria-hidden on its first synchronous pass, and adds `.bw-in` from the observer. Any one of those three appearing in the document cancels the fail-safe animation; if none appears, it fades everything in at 1.6s — comfortably after main.js's own 1200ms observer fail-safe, so a healthy page never sees it. Both halves live behind `@supports selector(:has())`, because a browser that cannot evaluate the cancel must not be given the animation either. */ @media (scripting: none) { [data-reveal], [data-reveal].bw-in, .bw-pricing__grid > .bw-plan, .bw-pricing__grid.bw-in > .bw-plan { opacity: 1; transform: none; transition: none; transition-delay: 0s; } } @keyframes bw-reveal-failsafe { to { opacity: 1; transform: none; } } @supports selector(html:has(*)) { [data-reveal], .bw-pricing__grid > .bw-plan { animation: bw-reveal-failsafe 0.6s var(--bw-ease) 1.6s forwards; } html:has(#bw-nav-edge[style], #bw-sticky[aria-hidden], [data-reveal].bw-in) :is([data-reveal], .bw-pricing__grid > .bw-plan) { animation: none; } } /* ========================================================================= 4. Buttons ========================================================================= */ /* Inline flow, not flex. In the source a button is one run of text and the literal space before the arrow is what separates them; here the arrow was a sibling FLEX ITEM spaced by `gap: 0.55em` instead, which broke twice. 1. The `.bw-sr-only` span is `position: absolute`, so it is not a flex item itself — but it does split the markup's word space off into its own anonymous flex item. Chromium paints nothing for a whitespace-only anonymous item, yet still counts it for `gap`, so the six plan CTAs got TWO gaps: 15.38px label-to-arrow against the source's 8.55px. 2. On every other button the space is the trailing whitespace of the label's own text run, and trailing whitespace collapses at the end of a line box. So the space never rendered anywhere: copying a button gave "REZERVOVAT CALL↗", not the source's "REZERVOVAT CALL ↗". One inline run fixes both — the word space is the spacing, and it is real text. Vertical centring came from `align-items`, horizontal from `justify-content`; symmetric padding and `text-align` do it now. */ .bw-btn { display: inline-block; text-align: center; min-height: 44px; /* a11y: tap target */ font-family: var(--bw-font-mono); font-weight: 700; font-size: var(--bw-fs-mono); /* Space Mono's own `normal` leading is ~1.45; the source relies on it plus the stated padding for every button height. */ line-height: 1.45; text-transform: uppercase; text-decoration: none; border: 0; background: none; color: inherit; cursor: pointer; transition: transform var(--bw-t-press) ease-out, background-color var(--bw-t-hover) ease-out, border-color var(--bw-t-hover) ease-out, box-shadow var(--bw-t-hover) ease-out, filter var(--bw-t-hover) ease-out, color var(--bw-t-hover) ease-out, opacity var(--bw-t-hover) ease-out; } .bw-btn:active { transform: scale(0.97); } /* Apple rule 1: pointer-down feedback */ .bw-btn__arrow { line-height: 1; } .bw-btn--pink { background: var(--bw-pink); color: var(--bw-ink); } .bw-btn--outline { border: 1.5px solid var(--bw-stroke); color: var(--bw-cream); } .bw-btn--sm { padding: 12px 24px; } .bw-btn--lg { padding: 20px 36px; font-size: var(--bw-fs-body); } /* The portfolio block's CTA carries neither --sm nor --lg, so it would render at zero padding. Sized between the two: it is a section-level primary, not the page's headline action. */ .bw-works__offer-cta { padding: 17px 30px; } /* Notched buttons clip their own outline, so the focus ring is drawn inside. */ .bw-nav__cta, .bw-hero__cta, .bw-form__submit, .bw-sticky__btn, .bw-works__offer-cta, .bw-cta__btn { clip-path: var(--bw-notch-lg); } /* Text-only button — no arrow span, no sr-only — so a flex box is safe here: it cannot swallow a literal word space the way it would on the arrow buttons. Needed because `min-height: 44px` leaves slack that inline-block drops entirely below the text: at <=354px the 12.5px label has an 18.125px line box in a 20px content box and sat 1.00px high inside its own pill. */ .bw-nav__cta { display: inline-flex; align-items: center; justify-content: center; clip-path: var(--bw-notch-sm); } /* Same ring, ink instead of pink (a pink ring on a pink fill is invisible), and pulled inside because the notch clips anything outside the box. */ .bw-nav__cta:focus-visible, .bw-hero__cta:focus-visible, .bw-form__submit:focus-visible, .bw-sticky__btn:focus-visible, .bw-works__offer-cta:focus-visible, .bw-cta__btn:focus-visible { outline: var(--bw-focus); outline-color: var(--bw-ink); outline-offset: -6px; } /* ========================================================================= 5. Header / nav ========================================================================= */ .bw-header { position: sticky; top: 0; z-index: 50; background: var(--bw-nav-bg); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); } .bw-header__edge { position: absolute; left: 0; right: 0; bottom: -18px; height: 18px; background: var(--bw-nav-edge); opacity: 0; transition: opacity var(--bw-t-edge) ease-out; pointer-events: none; } .bw-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; /* last resort: stack rather than clip the CTA off-screen */ gap: 20px; row-gap: 10px; padding: 18px var(--bw-gutter); } .bw-nav__logo { /* inline-flex, not inline-block: the home link is a real tap target and it measured 105x40 on an iPhone SE, four pixels under the 44px floor. Flex centres the wordmark inside the taller box instead of the extra height falling below the text, which is what inline-block does. */ display: inline-flex; align-items: center; min-height: 44px; font-family: var(--bw-font-display); font-weight: 400; font-size: var(--bw-fs-logo); line-height: 1.2; letter-spacing: 1px; color: var(--bw-cream); padding: 8px 0; margin: -8px 0; transition: color var(--bw-t-hover) ease-out; } .bw-nav__star { color: var(--bw-pink); } .bw-nav__menu { display: flex; align-items: center; gap: 30px; font-family: var(--bw-font-mono); font-size: var(--bw-fs-mono); } .bw-nav__item { display: flex; } .bw-nav__link { display: inline-block; color: var(--bw-body); padding: 13px 6px; /* a11y: 44px tall hit area, layout unchanged */ margin: -13px -6px; transition: color var(--bw-t-hover) ease-out; } /* ========================================================================= 6. Hero ========================================================================= */ .bw-hero { position: relative; padding: 90px var(--bw-gutter) 70px; } .bw-hero__inner { position: relative; max-width: var(--bw-max); margin: 0 auto; } .bw-hero__title { font-family: var(--bw-font-display); font-weight: 400; font-size: var(--bw-fs-hero); line-height: var(--bw-lh-hero); letter-spacing: var(--bw-track-hero); text-transform: uppercase; animation: bw-hero-in 0.9s var(--bw-ease) both; } .bw-hero__stroke { color: transparent; -webkit-text-stroke: 2px var(--bw-cream); } .bw-hero__accent { color: var(--bw-pink); } .bw-hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 54px; flex-wrap: wrap; animation: bw-hero-in 0.9s 0.25s var(--bw-ease) both; } .bw-hero__lead { font-size: var(--bw-fs-lead); color: var(--bw-body); line-height: var(--bw-lh-body); max-width: 440px; } .bw-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ========================================================================= 7. Marquee ========================================================================= */ /* The band is rotated and scaled, so it bleeds past its box. The wrapper clips that bleed horizontally while padding + equal negative margin keep the vertical rhythm byte-identical to the source. */ .bw-marquee { overflow: hidden; padding-block: var(--bw-marquee-bleed); margin-block: calc(-1 * var(--bw-marquee-bleed)); } .bw-marquee__band { background: var(--bw-pink); color: var(--bw-ink); overflow: hidden; padding: 14px 0; transform: rotate(-1.2deg) scale(1.02); border-top: 3px solid var(--bw-ink); border-bottom: 3px solid var(--bw-ink); } .bw-marquee__track { display: flex; width: max-content; animation: bw-marquee 22s linear infinite; font-family: var(--bw-font-display); font-size: var(--bw-fs-logo); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; will-change: transform; } .bw-marquee__item { padding-right: 24px; } /* ========================================================================= 8. Stats ========================================================================= */ .bw-stats { padding: 70px var(--bw-gutter) 0; } .bw-stats__inner { max-width: var(--bw-max); margin: 0 auto; } .bw-stats__list { display: flex; gap: 48px; flex-wrap: wrap; align-items: baseline; } .bw-stat { display: flex; align-items: baseline; gap: 16px; } .bw-stat__value { font-family: var(--bw-font-display); font-size: var(--bw-fs-stat); line-height: var(--bw-lh-display); letter-spacing: var(--bw-track-display); } .bw-stat--accent .bw-stat__value { color: var(--bw-pink); } .bw-stat--cream .bw-stat__value { color: var(--bw-cream); } .bw-stat__label { font-family: var(--bw-font-mono); font-size: var(--bw-fs-mono); color: var(--bw-muted); text-transform: uppercase; } /* ========================================================================= 9. Sluzby ========================================================================= */ .bw-services { padding: var(--bw-sec-y-sm) var(--bw-gutter) var(--bw-sec-y); } .bw-services__inner { max-width: var(--bw-max); margin: 0 auto; } .bw-services__title { font-family: var(--bw-font-display); font-weight: 400; font-size: var(--bw-fs-display); line-height: var(--bw-lh-display); letter-spacing: var(--bw-track-display); margin: 0 0 48px; text-transform: uppercase; } .bw-services__accent { color: var(--bw-pink); } .bw-service { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 24px; align-items: baseline; padding: 34px 0; border-top: var(--bw-hair) solid var(--bw-line); transition: background-color 180ms ease-out; } .bw-service__num { font-family: var(--bw-font-mono); font-size: var(--bw-fs-body-2); color: var(--bw-muted); } .bw-service__title { font-family: var(--bw-font-display); font-weight: 400; font-size: var(--bw-fs-service); line-height: var(--bw-lh-display); /* Source-declared: `letter-spacing: 0.5px` on the sluzby h3. An earlier pass overwrote it with --bw-track-display-sm (-0.5184px at 51.84px) on the strength of a comment claiming the h1 was the only heading with declared tracking — it is not. Positive, as designed. */ letter-spacing: 0.5px; text-transform: uppercase; } .bw-service__text { font-size: var(--bw-fs-body); color: var(--bw-body); line-height: var(--bw-lh-body); } .bw-services__rule { border-top: var(--bw-hair) solid var(--bw-line); } /* ========================================================================= 10. Prace (carousel) ========================================================================= */ .bw-works { position: relative; background: var(--bw-cream); color: var(--bw-ink); padding: var(--bw-sec-y) var(--bw-gutter); clip-path: polygon(0 0, 100% var(--bw-diag), 100% 100%, 0 100%); margin-top: calc(-1 * var(--bw-diag)); } .bw-works a { color: var(--bw-ink); } .bw-works__inner { max-width: var(--bw-max); margin: 0 auto; } .bw-works__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 30px 0 60px; flex-wrap: wrap; } .bw-works__title { font-family: var(--bw-font-display); font-weight: 400; font-size: var(--bw-fs-display); line-height: var(--bw-lh-display); letter-spacing: var(--bw-track-display); text-transform: uppercase; } .bw-works__stroke { color: transparent; -webkit-text-stroke: 2px var(--bw-ink); } .bw-works__lead { font-size: var(--bw-fs-lead-3); color: var(--bw-ink-body); max-width: 340px; line-height: 1.5; } .bw-works__hint { font-family: var(--bw-font-mono); font-size: var(--bw-fs-mono-2); color: var(--bw-ink-faint); margin: 0 0 18px; } /* Native scrolling is the DEFAULT, and main.js takes it away once it is actually running (.bw-js-drag). @media (scripting: none) only covers JavaScript switched off — it does not cover the case this stylesheet already builds a reveal fail-safe for: script enabled but never arrived, because the file 404s, a blocker ate it or it threw on parse. In that state the old rule left four of six cards unreachable by any gesture while the page still said "TAHNETE" and promised arrow keys. Default to something that works, then upgrade. */ .bw-works__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; margin: 0 calc(-1 * var(--bw-gutter)); padding: 20px var(--bw-gutter) 40px; /* The drag is registered here, not on the track, so the padding strips grab too — they were dead surface before. */ user-select: none; -webkit-user-select: none; } /* main.js sets this on the moment the drag handler is bound. Only then is it safe to hand scrolling over to the pointer code. */ .bw-js-drag .bw-works__viewport { overflow-x: hidden; scroll-snap-type: none; cursor: grab; touch-action: pan-y; } /* Above the container width the -40px bleed no longer reaches the page edges: the track was sliced mid-card 300px short of the right edge at 1920 with a band of empty cream after it, instead of continuing off-screen. Bleed to the real edges and put the same amount back as padding, so the cards still start on the container's grid line. main.js measures this padding rather than assuming 80px, so the drag bounds follow. */ @media (min-width: 1321px) { .bw-works__viewport { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); } } /* The viewport is tabbable (tabindex="0") and overflow:hidden, so the ring is drawn inside. Pink on this section's cream is only 2.96:1 (1.4.11 needs 3); ink is 16.22:1 — the same swap the accent plan's CTA already makes. */ .bw-works__viewport:focus-visible { outline: var(--bw-focus); outline-color: var(--bw-ink); outline-offset: -4px; } .bw-works__track { display: flex; gap: 26px; width: max-content; will-change: transform; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } .bw-work { flex: 0 0 var(--bw-card); width: var(--bw-card); display: flex; flex-direction: column; gap: 12px; } .bw-work--shift { transform: translateY(34px); } .bw-work__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--bw-cream-2); border: var(--bw-rule) solid var(--bw-ink); } /* Reserved for the real clips. The markup comment in index.html tells the owner to drop an