/* ============================================================================= port-fixes.css — every deviation from the Azurio vendor CSS lives here. Load order: loader.css, plugins.css, main.css, THEN this file. The only edits made inside vendor files themselves (all five sanctioned by the audit, recorded in README.md): 1. main.css — the two Google-Fonts @import lines, removed (self-hosted via next/font instead; audit §4.4/§4.6). 2. plugins.css — the six broken Phosphor @font-face blocks, deleted. They pointed at ./Phosphor*.woff2, i.e. css/, where no font files exist. Shadowing them from here is NOT enough — the dead rules still fire and 404 (audit §2.1). The real declarations are re-made below. 3. app.js — init hung off DOMContentLoaded, which has already fired by the time a React effect injects the bundle. Now guarded on document.readyState (audit §5.2). 4. app.js — (retired) contact form POSTed to /api/contact. 5. app.js — (retired) .fail() branch printed errors in .form__error. Both went with the whole contact handler; ContactForm.tsx owns the form now (contact-form-feedback, README.md). ============================================================================= */ /* --- 1. Phosphor icon font, re-declared at the real paths ------------------- Icons are in use on the homepage (ph-fill ph-heart, ph-bold ph-arrow-up-right, ph ph-arrow-up), so these families must resolve. woff2 only — the vendor's 23 MB fonts/ tree ships .eot/.svg/.ttf/.woff per weight and none of it is needed by any browser we support. */ @font-face { font-family: "Phosphor"; src: url("/fonts/Phosphor/Phosphor.woff2") format("woff2"); font-display: block; } @font-face { font-family: "Phosphor-Bold"; src: url("/fonts/Phosphor/Phosphor-Bold.woff2") format("woff2"); font-display: block; } @font-face { font-family: "Phosphor-Fill"; src: url("/fonts/Phosphor/Phosphor-Fill.woff2") format("woff2"); font-display: block; } @font-face { font-family: "Phosphor-Duotone"; src: url("/fonts/Phosphor/Phosphor-Duotone.woff2") format("woff2"); font-display: block; } @font-face { font-family: "Phosphor-Light"; src: url("/fonts/Phosphor/Phosphor-Light.woff2") format("woff2"); font-display: block; } @font-face { font-family: "Phosphor-Thin"; src: url("/fonts/Phosphor/Phosphor-Thin.woff2") format("woff2"); font-display: block; } /* --- 2. Typography: same two families, self-hosted by next/font ------------ next/font emits the @font-face rules and exposes each family through a CSS variable set on . This block only changes where the vendor pair's bytes come from; the two display faces Folks adds beside them are named roles in brand deltas v2 decision 3 (§4 and the creator marquee). */ :root { --_font-default: var(--font-manrope), "Manrope", sans-serif; --_font-accent: var(--font-jetbrains-mono), "JetBrains Mono", monospace; } /* Page-title line masks clip descenders. The vendor's `.loading-split` SplitText wraps each line in a `.line-mask` with `overflow: clip` that is exactly one line box tall, and at the heading's 1.1 line-height Manrope's "g" hangs below it ("Blog" lost its tail). The mask grows downward by the descender and gives the space back, so nothing below it moves. */ .loading-split .line-mask { padding-bottom: 0.15em; margin-bottom: -0.15em; } /* --- 3. Brand palette (#15) ------------------------------------------------ The site is pinned dark (see layout.tsx), so only the --*--dark set is ever selected; [color-scheme=dark] in main.css aliases --accent to --accent--dark. Accent goes from Azurio blue #002bba to the Folks coral #FF6251. The pin is what makes this legal: coral on the light base #EEEAE8 is 2.5:1 (fails), on the dark base #0f0f0f it is 6.5:1 (passes). Note: the vendor has no --accent-rgb/--highlight-rgb companions, so there is nothing else to override here. */ :root { --accent--dark: #ff6251; --highlight--dark: #ff6251; /* These three are text/icons/rules sitting ON the accent ground, not accent-coloured text — they are declared outside both --*--light and --*--dark twin sets in main.css, and a colour that does not follow the scheme cannot be tracking a scheme-keyed accent. Every `.accent` variant that reads them (.socials-list__*, .mxd-process-points__*) is the variant used inside an .bg-color-accent section. The vendor's values assume a DARK accent (white on #002bba = 10.2:1). brand-surface v1 hue-rotated two of them blue->coral, reading the name rather than the position, which on a light accent gives 2.95 / 1.51 / 1.28:1. Corrected here to a near-black set. Coral's ceiling is 7.12:1 (pure black), so the three steps are close together by necessity: 6.13 / 5.26 / 4.60:1, all above AA. There is no legal light-on-coral pairing at any lightness. */ --pt-t-accent-bright: #161616; --pt-t-accent-medium: #242424; --pt-t-accent-muted: #2e2e2e; /* Referenced by the vendor and declared nowhere in main.css: one rule, `.mxd-article__thumb` (border-radius, plus its -moz- twin). Undeclared, its var() was invalid at computed-value time and the cover corners fell to the initial 0 by accident. 0 is now the decision (chrome-cleanup): the site is square everywhere except chips, tiles and one dialog, and a rounded cover would be its only rounded large surface. If a future main.css declares it, this shadows it on purpose. */ --_radius-l: 0; } /* The same misreading, one layer out. `.active-cursor-accent` (app.js) fills a 10rem cursor disc with var(--accent) and labels it `.mxd-cursor__text.accent`, which the vendor sets to --nl-white: white on the accent disc. That is 10.2:1 on Azurio blue and 2.95:1 on coral, so the label under the manifest headline fails AA today, before this change adds a single coral section. The disc is a coral ground like any other, so its label takes the near-black set too. The disc itself is left alone: it is coral on the DARK page ground, which is the one place an accent cursor makes sense. On the coral band the accent cursor has nothing to say and CtaMarquee uses the plain `.active-cursor`. */ .mxd-cursor__text.accent { color: var(--pt-t-accent-bright); } /* The vendor ships `h2.accent` for text on the accent ground but no matching line button, so the coral CTA borrowed `.btn-line-opposite` — #161616 only because --t-opp-bright happens to be. This is the missing variant, shaped like its siblings in main.css "Elements - Buttons": `.btn-line-default` and `-permanent` set color and svg fill (`-opposite` sets color only). Re-check against those if the vendor CSS is ever bumped. */ .btn-line-accent { color: var(--pt-t-accent-bright); } .btn-line-accent svg { fill: var(--pt-t-accent-bright); } /* --- 4. Showreel band + menu video labels (#14) ---------------------------- docs/specs/folks-showreel-menu-video-v1.md §5 / §6b. Both labels are white on mix-blend-mode: difference — the type inverts what passes beneath it rather than sitting on top as a plate. Azurio's own .menu-logo does the same. isolation: isolate is REQUIRED on the container: without it the blend composites against the page background instead of the video. No .mxd-divider__cover: the master is already graded, a cover would flatten it. */ .mxd-divider { isolation: isolate; } .band-outro { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(96%, 1720px); text-align: center; z-index: 10; mix-blend-mode: difference; pointer-events: none; } /* The label face is fixed: Unbounded 900 (brand deltas v2 decision 3, chrome-cleanup). Manrope 800 and Bebas Neue were the other two candidates; their rules and the data-face switch are deleted. The size is tuned so "CREATORS THAT" fills the 1720px cap at 1920 without wrapping mid-word, and Unbounded is wide — a different face means re-tuning it, not swapping it. */ .band-outro h2 { margin: 0; color: #fff; font-family: var(--font-unbounded), "Unbounded", sans-serif; font-weight: 900; font-size: clamp(30px, 8.2vw, 158px); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; } /* Menu: the wrapper is the positioned box (vendor sets position: relative on .menu-media__wrapper, not on .mxd-menu__media). The F is sized in container units — `%` would resolve against the parent's font size (≈5px). */ .menu-media__wrapper { isolation: isolate; container-type: inline-size; } /* menu-lens-video: the panel carries the Folks F alone, centred, as the menu's link home. It replaces the drawn FOLKS wordmark, and it is the only Folks mark in the menu from 1200px up (§10 hides the corner lockup there). The artwork's 231x259 aspect sets the height from the width. The fill stays #fff and is NOT the lockup's coral or cream — under `difference` this value is an operand, not a colour. White inverts the black-and-white footage exactly; no colour survives the blend anyway. */ .menu-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 36cqw; z-index: 10; mix-blend-mode: difference; pointer-events: auto; } .menu-mark svg { display: block; width: 100%; height: auto; fill: #fff; } /* A white outline inverts with the blend, so it stays visible over dark and bright frames alike. `!important` because the vendor strips focus outlines. */ .menu-mark:focus-visible { outline: 2px solid #fff !important; outline-offset: 1.2rem; } /* --- 5. Hero cursor trail: landscape signals --------------------------- The vendor JS sizes every trail image to 240px on its long side, which leaves the two wide signal SVGs (heart pill, follow bubble) at ~100px tall with unreadable text. It sets width/height inline, so !important is the only handle. Photos keep the vendor size. */ .mxd-trail-transparent-image[src*="signal-heart"], .mxd-trail-transparent-image[src*="signal-bubble"] { width: 360px !important; height: auto !important; } /* --- 6. Contact form: consents, honeypot, error state ----------------------- The vendor styles `form input` as a full-width underlined text field (width: 100%; height: 5.8rem), which is wrong for a checkbox in every dimension, and it ships no error state at all. Both gaps are filled here rather than in main.css. The vendor's `.form__reply` is no longer rendered: the outcome is the button caption plus `.contact-toast`, styled after the shared folks-strip rules. */ .form__consents { display: flex; flex-direction: column; gap: 1.2rem; } /* Inline errors (contact-form-feedback). Coral, the site's --accent, by Przemek's pick on the mock. The message element is always in the DOM — it is the live region — and takes space only once it holds text, so an untouched form sits exactly where it did. */ .form__field-error { margin: 0; font: normal 500 1.4rem/1.5 var(--_font-default); color: var(--accent); } .form__field-error:not(:empty) { margin-top: 0.8rem; } form input[aria-invalid="true"], form textarea[aria-invalid="true"] { border-bottom-color: var(--accent); } .form__consent-row .form__field-error:not(:empty) { margin-top: 0.4rem; padding-left: 3rem; } .form__consent { display: flex; align-items: flex-start; gap: 1.2rem; cursor: pointer; font: normal 400 1.5rem/1.5 var(--_font-default); color: var(--t-medium); } .form__consent input[type="checkbox"] { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; margin: 0.1rem 0 0; padding: 0; line-height: normal; border: 1px solid var(--st-medium); border-radius: 0.2rem; accent-color: var(--accent); cursor: pointer; } .form__consent input[type="checkbox"][aria-invalid="true"] { border-color: var(--accent); outline: 1px solid var(--accent); } .form__consent a { color: var(--t-bright); text-decoration: underline; } /* --- 7. Contact details block (/kontakt) ----------------------------------- The vendor's page-level contact list lives in its contact.html, which is not vendored — only css/js/img/video are — so its class names are unknowable. The footer's .mxd-footer-nav02__list is not footer-scoped and was the candidate, but it styles `ul li a` at 2.4rem/700 as nav links and reaches no
, so it carries neither the labels nor the street line. The labels DO reuse the vendor's caption utility .footer-data (main.css, also unscoped); only the value line and the list reset are new. */ .mxd-contact-details { list-style: none; margin: 0; padding: 0; } .mxd-contact-details li + li { margin-top: 2.4rem; } .mxd-contact-details .footer-data { margin-bottom: 0.6rem; } .mxd-contact-details address, .mxd-contact-details a { margin: 0; font: normal 500 2rem/1.5 var(--_font-default); color: var(--t-bright); } .no-touch .mxd-contact-details a:hover { color: var(--accent); } /* --- 8. Creator directory (#17) -------------------------------------------- Three routes on the old WordPress paths — /tworcy/, /rodzaj// and /influencerzy// — built on two vendor blocks: mxd-blog-list for the A–Z index (CreatorIndex.tsx) and the mxd-article-author box, promoted to page header, for profiles. Everything below is a deviation those two blocks need and do not have. */ /* 8a. The index list. Rows are the vendor's blog-list items, so the hover-dim (≥1200px, hover, motion allowed) is main.css's own; what changes is the row's shape. The list is one grid and every row a subgrid of it, so the columns line up across rows whatever each row holds — the platform column is as wide as the widest set of codes, up to a cap. The wrapper takes the 3rem gutter the vendor gives each column. A blog row's 5.4rem of padding is sized for a title and an excerpt; a name needs 1.6rem. `.mxd-blog-list__item` is already position: relative, which is what the name's .stretched-link needs to cover the row. Labels take the vendor's `.tag.tag-s` type. */ .creator-index { --thumb: 5.6rem; display: grid; grid-template-columns: minmax(0, 1fr); padding-inline: 3rem; } .creator-index__list { display: grid; grid-template-columns: var(--thumb) minmax(0, 1.5fr) minmax(0, 1fr) fit-content(22rem); column-gap: 2.2rem; border-top: 1px solid var(--st-muted); } .creator-index__letter, .creator-index__item, .creator-index__row { grid-column: 1 / -1; } .creator-index__item, .creator-index__row { display: grid; grid-template-columns: subgrid; align-items: center; } .creator-index__item { padding: 1.6rem 0; border-bottom: 1px solid var(--st-muted); } /* 1:1 whatever the source: a portrait without a square derivative (a source under 800px) is otherwise its own height and staggers the rows. */ .creator-index__thumb { display: block; width: var(--thumb); height: var(--thumb); border-radius: 50%; object-fit: cover; background: var(--base-tint); } /* A 26-character handle has no break opportunity; without anywhere it widens the column and the page scrolls sideways at 390px. */ .creator-index__name { font: normal 700 clamp(2.4rem, 2.9vw, 4rem)/1.15 var(--_font-default); letter-spacing: -0.03em; color: var(--t-bright); overflow-wrap: anywhere; } .no-touch .creator-index__item:hover .creator-index__name, .creator-index__name:focus-visible { color: var(--accent); } /* One item per platform in a wrapping flex row, the separator leading the item it precedes: a wrap falls between platforms and never strands a "·" at a line end or clips the last code. */ .creator-index__platforms { display: flex; flex-wrap: wrap; column-gap: 0.6em; margin: 0; color: var(--t-bright); } .creator-index__row > .creator-index__platforms { justify-content: flex-end; } .creator-index__platforms > span { white-space: nowrap; } .creator-index__platforms > span + span::before { content: "·"; margin-right: 0.6em; } /* The letter is an h2 for screen-reader navigation, set as a mono label. */ .creator-index__letter { display: flex; align-items: center; gap: 1.4rem; margin: 0; padding: 3.4rem 0 0.8rem; color: var(--accent); } .creator-index__letter::after { content: ""; flex: 1; height: 1px; background: var(--st-muted); } .creator-index__empty { font: normal 500 1.8rem/1.6 var(--_font-default); color: var(--t-medium); } @media only screen and (max-width: 767px) { .creator-index { --thumb: 4.4rem; } .creator-index__list { grid-template-columns: var(--thumb) minmax(0, 1fr) fit-content(9rem); column-gap: 1.4rem; } .creator-index__categories { display: none; } } /* 8b. Photo panel (CreatorIndexPanel.tsx), 1200px and up only. The frame is ViewfinderLink's crop marks held open — that section's rules all key on a `.viewfinder` link or label and this is neither, so the marks are drawn here at the panel's size, in the accent. Below 1200px the row thumbnail is the only photo. */ .creator-index__panel { display: none; } @media only screen and (min-width: 1200px) { .creator-index { grid-template-columns: minmax(0, 1fr) 38rem; gap: 7rem; align-items: start; } .creator-index__panel { display: block; position: sticky; top: 12rem; } } .creator-index__rec { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1rem; color: var(--accent); } .creator-index__rec .viewfinder__light { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .creator-index__frame { position: relative; padding: 1.6rem; } .creator-index__frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; } .creator-index__frame > .viewfinder__corner { position: absolute; width: 2.6rem; height: 2.6rem; border: 0 solid var(--accent); } .creator-index__frame > .viewfinder__corner--tl { top: 0; left: 0; border-left-width: 2px; border-top-width: 2px; } .creator-index__frame > .viewfinder__corner--tr { top: 0; right: 0; border-right-width: 2px; border-top-width: 2px; } .creator-index__frame > .viewfinder__corner--bl { bottom: 0; left: 0; border-left-width: 2px; border-bottom-width: 2px; } .creator-index__frame > .viewfinder__corner--br { bottom: 0; right: 0; border-right-width: 2px; border-bottom-width: 2px; } .creator-index__panel-name { margin: 2rem 0 1rem; font: normal 700 3rem/1.1 var(--_font-default); letter-spacing: -0.03em; color: var(--t-bright); overflow-wrap: anywhere; } @media (prefers-reduced-motion: no-preference) { .creator-index__name { transition: color var(--_animspeed-medium); } .creator-index__rec .viewfinder__light { animation: viewfinder-rec 1s steps(1) infinite; } } /* 8d. Term chip bar. The package has no bar primitive — .tag-bg is its only pill — so the row is made here. The count is a dimmer span inside the pill, using the gap .tag-bg already declares between its children. */ .mxd-term-bar { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 3.2rem; margin-bottom: 4.4rem; } .mxd-term-bar__count { opacity: 0.6; } /* 8e. Creator profile — direction C, "Portret". The name is a poster in Bebas Neue (the marquee's number face), the portrait overlaps its baseline, the short description is a pull quote. The headline sizes by its own length: the page sets --name-len (characters) on the stage — not the h1, because --name-size is computed on the stage and a var() resolves where it is declared — and 150vw / --name-len keeps a long name on roughly one line of the viewport while a short one tops out at the poster size. The floor (4.4rem) stops "Wrocławskie Podróże Kulinarne" from shrinking to 20px at 390px — below it, long names wrap instead. It is sized so the longest unbreakable word ("cypriano_italiano", 17 characters) still fits a 390px viewport; e2e/creator-profile.spec.ts checks every published name for overflow. The floor alone cannot hold a handle longer than that: a single 26-character word does not fit 358px at 4.4rem. So the size is also capped by the longest word (--word-len), at 0.45em per character — Bebas measures 0.35-0.41em on real names — across the article's own width (cqi, so the cap follows the container's padding at every breakpoint rather than guessing it from vw). --name-size is declared on the stage so the portrait's overlap can scale with the name: a fixed overlap sized for "Bladii" would lift the portrait clean over a 74px headline. */ /* `grid-l-container` has no padding below 768px — the vendor's blocks bring their own, and the author-box card this page used to open with did. */ @media only screen and (max-width: 767px) { .creator-profile { padding-inline: 1.6rem; } } .creator-profile { container-type: inline-size; } .creator-profile__stage { --name-size: min( max(4.4rem, min(19vw, 300px, calc(150vw / var(--name-len, 10)))), calc(100cqi / var(--word-len, 10) / 0.45) ); display: grid; grid-template-areas: "name" "photo" "quote"; gap: 2.4rem; } .creator-profile__name { grid-area: name; margin: 0; font: 400 var(--name-size) / 0.88 var(--font-bebas), sans-serif; letter-spacing: 0.005em; color: var(--t-bright); text-wrap: balance; position: relative; z-index: 0; } .creator-profile__photo { grid-area: photo; position: relative; z-index: 1; width: min(100%, 420px); margin: calc(var(--name-size) * -0.2) 0 0; } .creator-profile__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } .creator-profile__chips { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; } .creator-profile__quote { grid-area: quote; margin: 0; max-width: 24ch; font: normal 600 2.2rem/1.3 var(--_font-default); letter-spacing: -0.02rem; color: var(--t-bright); text-wrap: pretty; } .creator-profile__quote::before { content: "\201E"; display: block; margin-bottom: 1rem; font: 400 11rem/0.6 var(--font-bebas), sans-serif; color: var(--accent); } @media only screen and (min-width: 820px) { .creator-profile__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name name" "quote photo"; column-gap: clamp(2.4rem, 4vw, 5.6rem); row-gap: 0; align-items: end; } .creator-profile__photo { justify-self: end; margin-top: calc(var(--name-size) * -0.55); } .creator-profile__quote { font-size: clamp(2.2rem, 2.2vw, 3rem); /* Sits level with the portrait's foot, not its caption. */ align-self: start; padding-top: clamp(2.4rem, 4vw, 5.6rem); } } /* Reach and links beside the bio. */ .creator-profile__body { display: grid; gap: 4.8rem; margin-top: 5.6rem; } @media only screen and (min-width: 820px) { .creator-profile__body { grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr); gap: clamp(2.4rem, 4vw, 5.6rem); align-items: start; } /* A creator without counts or links still keeps the bio in the second column. */ .creator-profile__body > .creator-profile__bio:only-child { grid-column: 2; } } .creator-profile__side { display: grid; gap: 2.4rem; align-content: start; } .creator-profile__total { display: grid; gap: 0.6rem; margin: 0; } .creator-profile__total strong { font: 400 6.4rem/0.9 var(--font-bebas), sans-serif; color: var(--t-bright); } .creator-profile__links { margin: 0; padding: 0; list-style: none; } .creator-profile__links li > a, .creator-profile__links li > span { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding-block: 1.2rem; border-bottom: 1px solid var(--st-muted); font: normal 600 1.7rem/1.4 var(--_font-default); color: var(--t-bright); text-decoration: none; } .creator-profile__platform { display: inline-flex; align-items: center; gap: 0.8rem; } .creator-profile__count { font: 500 1.3rem/1.6 var(--_font-accent); color: var(--t-medium); white-space: nowrap; } .creator-profile__links a:hover, .creator-profile__links a:focus-visible { color: var(--accent); } .creator-profile__links a:focus-visible, .creator-profile__chips a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .creator-profile__links a { transition: color 0.2s ease; } } /* The bio: left-aligned in its column, lighter than the vendor's grey body copy (--t-medium on the dark base read as fine print under a 300px name), and no drop cap — on a profile it only repeated the headline's first letter. The drop cap is declared in 8f, after this section, so the override carries one more class rather than depending on source order. */ .creator-profile__bio { --prose: 68ch; } .creator-profile__bio > p { margin-inline: 0; } /* 8f brightens an article's opening paragraph; here the pull quote is the opening, so the bio is one colour throughout. */ .creator-profile .creator-profile__bio > p, .creator-profile .creator-profile__bio > p:first-child { color: color-mix(in oklab, var(--t-bright) 80%, var(--base)); } .creator-profile .creator-profile__bio > p:first-child::first-letter { float: none; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; } /* 8f. Rendered rich text in the article body. .mxd-article__content is `flex-direction: column; gap: 6rem` and expects .mxd-article__block wrappers as direct children; a Lexical body is a flat stream, so every paragraph would sit 6rem from the next. The elements themselves need nothing here — the profile's converters give them the vendor's own .mxd-article__normal and .block-quote classes — so this is the spacing and nothing else. */ .mxd-article__content--md, .mxd-article__content--legal { gap: 3rem; /* The measure, shared by prose and its subheadings so they align on the same left edge. 870px of 20px body copy runs 79 characters to the line, past the 65-75 band where the eye reliably finds the start of the next one; 75rem brings it to about 68. Images and tables deliberately keep the full column, so they overhang evenly on both sides and read as a decision rather than a stray margin. */ --prose: 75rem; } .mxd-article__content--md > p, .mxd-article__content--md > h2, .mxd-article__content--md > h3, .mxd-article__content--legal > p, .mxd-article__content--legal > h2, .mxd-article__content--legal > h3, .mxd-article__content--legal > ol, .mxd-article__content--legal > ul { max-width: var(--prose); width: 100%; margin-inline: auto; } .mxd-article__content--md > h2, .mxd-article__content--md > h3, .mxd-article__content--legal > h2, .mxd-article__content--legal > h3 { margin-top: 3rem; /* Subheadings ran to three lines with one word stranded on the last (streaming-latwogang). Balancing costs nothing and only ever affects headings short enough to wrap. */ text-wrap: balance; } .mxd-article__content--md > p, .mxd-article__content--legal > p { /* Same idea one level down: no single-word last line in a paragraph. */ text-wrap: pretty; } /* The article body owns its own heading scale, rather than countering the vendor's per breakpoint. A Lexical body emits bare `h2`/`h3`, so a subheading inherits the scale built for *page-section titles* — which climbs 4.4 -> 5.4 -> 7.5 -> 9.5rem and arrived at 75px under a 95px article title, the section shouting nearly as loud as the piece. Declaring the step once shadows all four vendor steps; pinning only the >=1200px one left the subheading *growing* to 5.4rem at 768 and shrinking back at 1200, which is worse than either end. The values are the vendor's own base steps, nothing invented. */ .mxd-article__content--md > h2 { font: normal 600 4.4rem/1.1 var(--_font-default); letter-spacing: -0.18rem; } .mxd-article__content--md > h3 { font: normal 700 3rem/1.2 var(--_font-default); letter-spacing: -0.1rem; } /* --- The piece gets a beginning, a spine, and an end ------------------------ After the measure was set, the article read correctly and looked like nothing: a column of grey with no landmarks, no reward for scrolling, and no visible start or finish — it simply stopped. These four rules are the texture, and they all spend the same currency: the 6rem of gutter the measure opened up on either side of the prose, which was otherwise doing nothing. */ /* Beginning. The opening paragraph keeps the bright colour the template already uses for emphasis; the initial does the rest. Every one of the 19 posts opens on a plain capital — checked, not assumed — so nothing here lands on a quote mark or a digit. */ .mxd-article__content--md > p:first-child { color: var(--t-bright); } .mxd-article__content--md > p:first-child::first-letter { float: left; /* Three lines of body copy, so it scales with the text rather than sitting at one fixed size: at 390px the column is 30 characters wide and a 96px letter ate a quarter of it. */ font-size: 6.4rem; line-height: 0.74; font-weight: 600; letter-spacing: -0.2rem; color: var(--accent); padding-right: 1.2rem; } @media only screen and (min-width: 768px) { .mxd-article__content--md > p:first-child::first-letter { font-size: 9.6rem; padding-right: 1.4rem; } } /* Spine. A short rule in the left margin beside every subheading, so a reader scrolling fast can see the piece has structure without reading a word of it. Both marginal marks live here together: below 1200px the prose runs full-bleed, there is no gutter to hang into, and a mark inside the text column would just be a stray dash. */ @media only screen and (min-width: 1200px) { .mxd-article__content--md > p:first-child::first-letter { margin-left: -5.6rem; padding-right: 1.8rem; } .mxd-article__content--md > h2 { position: relative; } .mxd-article__content--md > h2::before { content: ''; position: absolute; left: -5.6rem; /* Sits on the cap line rather than the line box, which is what the eye reads as aligned with the first letter. */ top: 1.6rem; width: 3.2rem; height: 2px; background: var(--accent); } } /* The vendor flips `.block-image` to `flex-direction: row` at >=768px, which is right for its own template (image beside a caption column) and wrong here: our caption is a one-line credit, and as a second flex child it took width off the photograph. Back to a column, caption under the image where it belongs. */ .mxd-article__content--md > .block-image { flex-direction: column; gap: 0; } /* End. The body used to stop mid-column and hand straight over to the author box, so the reader found out the piece had ended by running out of it. This is the printed end mark, and it is the only thing on the page that says "finished". */ .mxd-article__content--md::after { content: ''; width: 1rem; height: 1rem; margin-top: 1rem; /* Aligned with the first letter of the prose, not centred: the measure rule above centres full-width blocks, and auto margins on a 1rem box would put the mark in the middle of the column. `max()` collapses the offset to zero once the container is narrower than the measure. */ margin-left: max(0px, calc((100% - var(--prose)) / 2)); background: var(--accent); } /* 8f-legal. The legal pages (openspec legal-pages D5). The article's measure and body type (shared above), none of its texture: a regulamin with a drop cap and an end mark reads as a blog post about a regulamin. What it needs instead is what a contract needs — clause labels that do not shout, and numbers you can find. */ /* "§ 1 Postanowienia ogólne" is a clause label, not a chapter title: the h3 step, not the article h2's. The live page centred these with inline styles; the import dropped those, and the label sits on the text's left edge. */ .mxd-article__content--legal > h2, .mxd-article__content--legal > h3 { font: normal 700 3rem/1.2 var(--_font-default); letter-spacing: -0.1rem; } /* The vendor lists are `decimal inside`, which puts a clause's second line back under its own number. Outside, with the padding to hold the marker, the number hangs and every line of the clause starts on the same edge. 3.6rem fits "15." — the longest number in the three texts. */ .mxd-article__content--legal ol, .mxd-article__content--legal ul { list-style-position: outside; padding-inline-start: 3.6rem; gap: 1.2rem; } /* A nested list steps in once more, under its parent clause's text. */ .mxd-article__content--legal li ol, .mxd-article__content--legal li ul { margin-top: 1.2rem; } .mxd-article__content--legal li::marker { color: var(--t-bright); } /* The privacy policy's section heads are bold paragraphs ("Artykuł 1. Administrator"), and bold is all that marks them: the vendor resets `strong` to the body's 500 grey, which left them indistinguishable from the text. */ .mxd-article__content--legal strong { font-weight: 700; color: var(--t-bright); } /* The vendor bolds every `li span` for its own template; here the only span is Payload's underline, which should stay the colour and weight of its text. */ .mxd-article__content--legal li span { font-weight: inherit; color: inherit; } .mxd-article__content--legal li a { color: var(--t-bright); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; } /* Below 768px the vendor's .grid-l-container drops its side padding, which ran every line of a post or a legal text into the screen edge. Both use the article area, so both get the gutter back here. */ @media only screen and (max-width: 767px) { .mxd-article-area .mxd-container { padding-inline: 2rem; } } /* The privacy policy spells its browser links out in full; a 70-character URL has no break opportunity and pushed a 360px page sideways. */ .mxd-article__content--legal { overflow-wrap: anywhere; } /* The one flourish with no argument behind it beyond liking it: selected text picks up the brand instead of the browser's blue. Both selectors, because main.css defines the pair and overriding half of it leaves them disagreeing; `--pt-t-accent-bright` is this repo's own token for type sitting ON the accent, so it stays right in both themes where a literal would not. */ ::-moz-selection { background-color: var(--accent); color: var(--pt-t-accent-bright); } ::selection { background-color: var(--accent); color: var(--pt-t-accent-bright); } /* The photo credit was rendering in `.tag tag-bg permanent` — the template's UI chip, the same component the meta row uses for a category. On a photograph in the middle of an article that reads as a control, not as a credit. A caption is a caption: small, quiet, and tied to the image by a short accent rule. */ .mxd-article__caption { display: flex; align-items: baseline; gap: 1.2rem; margin-top: 1.6rem; font: normal 500 1.4rem/1.5 var(--_font-default); color: var(--t-medium); } .mxd-article__caption::before { content: ''; flex: none; width: 2rem; height: 1px; background: var(--accent); transform: translateY(-0.4rem); } /* Underlines sat on the baseline and cut through descenders in Polish (ą, ę, ż are everywhere). Dropping them clear of the text is the whole change. */ .mxd-article__normal a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; } /* 8g. The 404 body. Composed from the package's generic blocks (section title + line buttons). One centring mechanism for the whole block — the vendor's .centered on the title and a justify-content on the row would each centre a subset of it, and three knobs for one alignment is two too many to reason about. */ .mxd-notfound { text-align: center; } .mxd-notfound__code { display: block; color: var(--accent); margin-bottom: 1.6rem; } .mxd-notfound__lead { max-width: 52rem; margin: 2.4rem auto 0; } .mxd-notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin-top: 4rem; } /* 8h. Article table block. No vendor template in the bundle ever tables its content, so there is no .mxd-table to reuse — this is the one post that needs it (streaming-latwogang, content map §4.2), styled to sit at home inside .mxd-article__content--md. */ .mxd-article__table { width: 100%; border-collapse: collapse; } .mxd-article__table th, .mxd-article__table td { padding: 1.2rem 1.6rem; text-align: left; border-bottom: 1px solid var(--stroke, rgba(255, 255, 255, 0.16)); } .mxd-article__table th { font-weight: 700; color: var(--t-bright); /* The header rule is the accent, the body rules are not: one line says "this row is different", and repeating the colour down the table would say it nine more times for nothing. */ border-bottom-color: var(--accent); } .mxd-article__table td { /* The one table on the site is money and follower counts; digits that line up in a column are worth the single declaration. */ font-variant-numeric: tabular-nums; } .mxd-article__table tr:last-child td { border-bottom: none; } /* --- 9. Hero full stop (brand-surface) ------------------------------------- The hero sentence already ended in a period rendered in the same grey as the words; it is now coral. Nothing else about the headline changes — this is one glyph, deliberately, because the alternative reading (colour the words) puts coral text on the dark ground at display size and turns the headline into the brand statement rather than the sentence it is. `color` and not a token: --accent is the right value, and reaching it through the variable is what keeps this honest if the accent ever moves again. Reused by the group wheel's heading (§13), which ends the same way on the same dark ground. It is the treatment that is named here, not the hero — so one definition serves both rather than a second class saying the same thing. */ .hero-dot { color: var(--accent); } /* The home hero headline in the wordmark's own face. The vendor sets this h1 in Manrope; the Folks wordmark is Raleway, and folks.pl set its home-header h1 at Raleway 800. Chosen 2026-09-22 from six mocked treatments: Raleway 800, lowercase throughout — "from creators / to results." — at the vendor's size tiers. The tracking replaces the vendor's per-tier -0.3rem/-0.5rem, tuned for Manrope; it is one value here so it beats every tier in main.css. text-transform rather than editing the copy: the sentence stays "From creators" in the source, the OG card and the closing CTA, which keep Manrope. */ .mxd-hero-05__headline h1 { font-family: var(--font-raleway), "Raleway", sans-serif; font-weight: 800; letter-spacing: -0.02em; text-transform: lowercase; } /* The mark ground carries the Folks mark, scattered — the campaign dialog's tile (public/img/campaign-dialog-pattern.svg). Paper, not ink: the ground is near-black. 4% is option A of the hero test (https://claude.ai/artifact/4hxoiVCTnLaVbdpqNuWbdM). Absolute, not fixed, so it scrolls away with its band; `isolation` makes the carrier the stacking context, so z-index -1 paints above its background and below the text and the trail. It began as a selector list naming two sections — the home hero and `/jak-dzialamy/`'s intro (BlockPage `heroIntro`) — because both are full-width, both start at the top of the page and both end on a hard edge, so `inset: 0` was the whole rule. The post header, the blog index's opening band and the 404 message are not sections: they sit inside `.mxd-container` and have to end at an element inside it, which the section carrying the top padding does not know the position of. So the class goes on the element whose BOTTOM edge is where the ground should end, and the ::before hangs from it — up past the top of the page and out to the viewport edges. `-96rem` is two tiles, so a band that starts at the top of the page keeps the mask's phase: the two original surfaces render exactly as they did. `inset-inline: calc(50% - 50vw)` bleeds full width from inside a centred container and adds no horizontal scroll (the vendor sets `scrollbar-width: none`, so 100vw is the visible width). `--mark-ground-under` runs the tail on past the carrier, under whatever paints over it. */ .folks-mark-ground { position: relative; isolation: isolate; } .folks-mark-ground::before { content: ""; position: absolute; top: -96rem; bottom: calc(-1 * var(--mark-ground-under, 0rem)); inset-inline: calc(50% - 50vw); z-index: -1; background: var(--folks-paper); opacity: .04; mask: url("/img/campaign-dialog-pattern.svg") 0 0 / 48rem repeat; pointer-events: none; } /* Where nothing paints over the tail — a post without a cover, the 404 — the ground has to end on its own, and a hard cut against ground of the same colour slices marks in half. Two masks intersected do it: the tile gives the shape, the gradient the extent. The gradient is measured from the bottom of the ::before, so the 96rem rise above does not enter into it. `mask-composite` after the shorthand, not before: `mask` resets it to `add`. */ .folks-mark-ground--fade::before { mask: url("/img/campaign-dialog-pattern.svg") 0 0 / 48rem repeat, linear-gradient(#000 calc(100% - var(--mark-ground-fade, 24rem)), transparent); mask-composite: intersect; } /* The manifest's own top padding clears the header; this gives the ground the same room below the sentence before the process starts. */ .folks-page-hero { padding-bottom: clamp(8rem, 10vw, 14rem); } /* `/dolacz/`: the lead form follows the hero directly, with its own heading, so the vendor's 16–18.4rem under the manifest plus the padding above left a 31rem hole at 1440. Both tighten, and the fade shortens to fit: it starts behind the manifest's last line and has ended where the form begins. */ .folks-page-hero:has(+ #formularz) { padding-bottom: clamp(6rem, 8vw, 12rem); } .folks-page-hero:has(+ #formularz) .mxd-section-manifest.pre-list { padding-bottom: 0; } .folks-page-hero.folks-mark-ground:has(+ #formularz) { --mark-ground-fade: 16rem; } /* Post header. The tail runs a few rem past the headline's own bottom margin (7.4rem, 9.4rem from 768px) so it ends under `.mxd-article__thumb`, a later positioned sibling that paints over it: the image's top edge becomes the ground's edge at any title length, without anything measuring one. It stays well inside the thumb's smallest height (360px). The `:not()` rather than source order: without a cover there is nothing to hide the tail under and it would cut through the first paragraph, so that post takes the fade instead — and must not also inherit an under-run. */ .mxd-article__headline.folks-mark-ground:not(.folks-mark-ground--fade) { --mark-ground-under: 11.4rem; } .mxd-article__headline.folks-mark-ground--fade { --mark-ground-under: 7.4rem; --mark-ground-fade: 20rem; } @media only screen and (min-width: 768px) { .mxd-article__headline.folks-mark-ground:not(.folks-mark-ground--fade) { --mark-ground-under: 13.4rem; } .mxd-article__headline.folks-mark-ground--fade { --mark-ground-under: 9.4rem; } } /* Blog index. The wrapper (blog/page.tsx) holds the title block and the lead; the lead's bottom margin collapses out of it, so the under-run is that same margin and the ground ends where the "Wcześniejsze wpisy" row begins — the row and its hairline stay on clean ground, which is what the approved mock does and settles design.md's open question. Without that row (one post, or none) the wrapper carries the fade too, and the fade runs inside the margin rather than over the lead. */ .blog-hub-ground { --mark-ground-under: clamp(5.6rem, 7vw, 10rem); --mark-ground-fade: 16rem; } /* Contact. The carrier is the title block (kontakt/page.tsx); the contact details and the form follow it after a 73px gap at 390 and 84–90px from 768 up, and nothing paints over them, so the ground fades and runs 6rem past the title: it has faded out inside that gap at every width and no mark sits behind the address or a field. */ .kontakt-ground { --mark-ground-under: 6rem; --mark-ground-fade: 16rem; } /* 404. Nothing follows the message but the footer, on the same ground, so this surface is always faded. The column's bottom edge IS the footer's top, so it takes no under-run at all: the fade finishes exactly where the footer starts and no mark, however faint, is painted over it. */ .mxd-notfound.folks-mark-ground { --mark-ground-fade: 18rem; } /* --- 10. Folks lockup (brand-surface) -------------------------------------- Both halves are traced artwork (app/(site)/FolksLockup.tsx), so the colours are painted onto groups inside one SVG rather than onto two sibling elements. The vendor's .mxd-logo__image sets `fill: currentColor` on the ; these two rules reach past it to the groups. The wordmark takes the artwork's own cream #F5F1E8, not --t-bright: this is the folks.pl lockup 1:1, and cream is what it is drawn in. 17.9:1 on the pinned #0f0f0f, so nothing is spent on the swap. The header is `position: absolute; top: 0` — it scrolls away with the page rather than tracking it, so the coral mark never rides over the coral CTA band. */ :root { --folks-cream: #f5f1e8; /* The services collage's paper plate and its ink (chrome-cleanup). Declared globally, not on .folks-services: the plate is a system surface one block happens to use today, and a block-scoped property would re-encode the one-off. Ink on paper is 16.33:1. */ --folks-paper: #f2eee7; --folks-ink: #111111; } .mxd-logo__image { /* The vendor sizes its own mark by height with `width: auto`. This lockup is 3.24x wider than tall, so height still drives it — the wordmark simply comes along at the proportion the artwork sets. */ height: 3.6rem; } @media only screen and (min-width: 768px) { .mxd-logo__image { height: 4rem; } } /* Painted on the two groups inside the SVG, so these apply wherever the lockup renders — header and menu alike. The vendor's `fill` rules target the element and are merely inherited, so a rule on the wins without a specificity fight. */ .lockup-mark { fill: var(--accent); } .lockup-word { fill: var(--folks-cream); } /* The menu shows the same lockup, sized to the overlay. The vendor blends .menu-logo with `difference` so a white wordmark inverts whatever passes under it — which is exactly what coral cannot survive: over the cream overlay there is no input colour whose difference is #FF6251. It is turned off here rather than worked around. menu-lens-video: the lockup now shows only where the video panel does not. From 1200px up — the breakpoint where main.css shows .mxd-menu__media — the panel's centred F (§4) is the menu's mark, and a second logo in the corner was a repeat. `display: none`, so the hidden link also leaves the tab order. Below 1200px there is no panel, and the lockup sits on the overlay alone. */ @media only screen and (min-width: 1200px) { .mxd-menu__logo { display: none; } } .mxd-menu__logo .menu-logo { mix-blend-mode: normal; } .menu-logo__lockup { display: inline-flex; width: auto; height: 3.2rem; } @media only screen and (min-width: 768px) { .menu-logo__lockup { height: 3.6rem; } } /* menu-refinement: the menu is the one cream surface the lockup sits on, and §10's cream wordmark vanished into it — only the coral mark showed. The word takes the overlay's text colour; the mark stays coral. */ .menu-logo .lockup-word { fill: var(--t-opp-bright); } /* The §2 descender fix, for the menu. main.css pads `.main-menu__link .line-mask` only from 1200px, and only by 5px — below that the mask is the caption's 1.0 line box and every descender went ("Blog", "Twórcy", "działamy"). Relative, so it follows the caption's size at every step. */ .main-menu__link .line-mask { padding-bottom: 0.22em; margin-bottom: -0.22em; } /* The rows run the overlay's full width: the vendor's right column is out of the markup, so its 66.67% track and the gutter beside it go too. */ @media only screen and (min-width: 1200px) { .mxd-menu__inner .mxd-menu__left { width: 100%; padding-right: 0; } } /* The bottom bar: "© 2026 Folks", the three legal pages and the socials. The vendor's 66/33 split was sized for two short strings; the three links need their own width, so both halves size to content and the bar spreads them. Sentence case, as the footer sets the same links. */ .mxd-menu__data .menu-data__text, .mxd-menu__data .menu-data__text a { text-transform: none; } .menu-data__right.menu-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 2.4rem; } /* Below 1200px main.css leaves the bar in the scrolling column's flow, so it sat right under the last row. The auto margin takes the free height and pins it to the bottom; on a screen too short for the list there is none, and the bar follows the rows instead of covering them as `fixed` would. */ @media only screen and (max-width: 1199px) { .mxd-menu__data { margin-top: auto; text-align: center; } .mxd-menu__data .menu-data__text, .menu-data__right.menu-legal { justify-content: center; } /* The icons take a row of their own, not whichever line the wrap leaves. */ .menu-data__text.menu-socials { flex-basis: 100%; margin-top: 0.8rem; } } /* SplitText wraps the

's whole content in one `.line`, so a `gap` on the

never reaches the links — the spacing is a margin between them. */ .menu-socials a { line-height: 1; } .menu-socials a + a { margin-left: 1.6rem; } .menu-socials i { font-size: 2.4rem; } @media only screen and (min-width: 1200px) { .mxd-menu__data .menu-data__left, .menu-data__right.menu-legal { width: auto; white-space: nowrap; } .mxd-menu__data { justify-content: space-between; } .menu-data__right.menu-legal { justify-content: flex-end; gap: 3.2rem; } } /* --- 11. Category tiles (brand-surface) ------------------------------------ The one authored block in this change. Nothing in main.css describes a grid of coral category tiles, so there was no vendor rule to claim (design.md "Category tiles are authored (B)"). Coral ground, near-black type: the tiles take the same --pt-t-accent-* set §3 corrected, which is what makes "on the accent" one decision rather than one per component. The hover state goes the other way — dark ground, coral type — rather than tinting the coral, because coral has 7.12:1 of total range against black and any tint of it spends contrast the label needs. Sizing is intrinsic: tiles are as wide as their label plus the count, so a term named "Twórcy gamingowi" and one named "Moda" are not forced to the same box. The old site's boxes behaved the same way, and it is what lets the grid hold 3 terms today and ~11 after the creator import without a column count to re-tune. */ .mxd-category-tiles__intro { max-width: 56rem; margin-top: 2.4rem; font: normal 400 1.8rem/1.6 var(--_font-default); color: var(--t-medium); } .mxd-category-tiles { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 4.4rem 0 0; padding: 0; list-style: none; } .mxd-category-tile { display: inline-flex; align-items: baseline; gap: 1.6rem; padding: 2rem 2.8rem; border-radius: 0.8rem; background-color: var(--accent); color: var(--pt-t-accent-bright); text-decoration: none; transition: background-color var(--_animspeed-medium) var(--_animbezier), color var(--_animspeed-medium) var(--_animbezier); } .mxd-category-tile__label { font: normal 700 2rem/1.2 var(--_font-default); letter-spacing: -0.03rem; } /* The count is the tile's secondary line, so it takes the token that means exactly that — not an opacity on the label, which would drop a 6.13:1 pairing under AA the moment anyone picked a value by eye. */ .mxd-category-tile__count { font: normal 600 1.4rem/1.2 var(--_font-accent); color: var(--pt-t-accent-medium); } .no-touch .mxd-category-tile:hover { background-color: var(--base-bright); color: var(--accent); } .no-touch .mxd-category-tile:hover .mxd-category-tile__count { color: var(--t-medium); } /* Folks services — restore Azurio's cinematic image stack with original artwork. */ .folks-services .mxd-stack-cards { background: var(--base); /* Hold every pinned slide before the next card starts covering it. */ gap: 75svh; } .folks-services .card__image { background: var(--folks-ink); } .folks-services .card__cover { background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 35%); } .folks-services .card__title { top: auto; bottom: 7%; left: 6rem; width: fit-content; max-width: calc(100% - 12rem); padding: 1rem 2rem; transform: none; background: var(--folks-paper); text-align: left; } .folks-services .card__title p { font-size: clamp(4.4rem, 6.4vw, 10rem); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; text-shadow: none; } /* Description as a torn paper strip (services-strip-captions). `.card__descr` stays the vendor's element — app.js tweens its transform and opacity on reveal — so it only positions; every Folks transform lives on `.folks-strip` inside it. Block, not the vendor's flex row, which would shrink the strip to its text. */ .folks-services .card__descr { position: absolute; inset: 25% auto auto 6rem; display: block; width: clamp(36rem, 34vw, 56rem); height: auto; padding: 0; } /* Per-card placement keeps every strip off faces, the camera, the loupe and the phone. The artwork is `object-fit: cover`, so what a strip can cover depends on the frame's orientation, not its width: 768×1024 crops like a phone, 1024×768 like a desktop. */ .folks-services .folks-service-art--1 .card__descr { top: 12%; } .folks-services .folks-service-art--2 .card__descr { top: 6%; } /* Card 04's pair fills the top of the frame; its strip sits bottom-right over the jacket, above the title plate, which runs almost the full width here. */ .folks-services .folks-service-art--3 .card__descr { inset: auto 6rem 24% auto; } @media (orientation: portrait) { .folks-services .folks-service-art--0 .card__descr, .folks-services .folks-service-art--3 .card__descr { inset: auto auto 26% 6rem; } .folks-services .folks-service-art--1 .card__descr, .folks-services .folks-service-art--2 .card__descr { top: 12%; } } .folks-services .folks-strip, .campaign-dialog .folks-strip, .folks-process .folks-strip, .contact-toast .folks-strip { position: relative; transform: rotate(var(--rot)); filter: drop-shadow(0 1.2rem 1.4rem rgb(0 0 0 / .3)); } .folks-services .folks-strip__tag, .campaign-dialog .folks-strip__tag, .folks-process .folks-strip__tag, .contact-toast .folks-strip__tag { position: absolute; top: 0; left: 2.4rem; z-index: 1; padding: .5rem 1rem; background: var(--folks-ink); color: var(--folks-paper); font: 700 clamp(1.1rem, .95vw, 1.4rem)/1.2 var(--_font-accent); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transform: translateY(-55%) rotate(-1.5deg); } .folks-services .folks-strip__paper, .campaign-dialog .folks-strip__paper, .folks-process .folks-strip__paper, .contact-toast .folks-strip__paper { padding: 3.6rem 3.2rem 3rem; background: var(--folks-paper); clip-path: var(--torn); } .folks-services .folks-strip .card__text { max-width: none; margin: 0; color: var(--folks-ink); font-size: clamp(2.2rem, 2.15vw, 3.4rem); line-height: 1.28; font-weight: 700; letter-spacing: -.015em; } /* The key phrase's coral marker; `clone` repeats the swipe on every wrapped line. The strip rules above are shared with the campaign dialog's notes and the /jak-dzialamy/ process; the landing transitions below stay services-only. */ .folks-services .folks-strip__hl, .campaign-dialog .folks-strip__hl, .folks-process .folks-strip__hl { margin: 0 -.12em; padding: 0 .12em; background: linear-gradient(transparent 52%, var(--accent) 52% 94%, transparent 94%) no-repeat 0 0 / 100% 100%; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* The contact form's outcome toast (contact-form-feedback, §6): a folks-strip paper sheet pinned to the viewport. Below the shared strip rules on purpose, so its overrides win on order rather than on a heavier selector. z-index 10 keeps it over the page but under the vendor menu (overlay 11, toggle 12), so an opened menu still covers it. Phones: top, clear of the toggle; desktop: bottom-right. */ .contact-toast { position: fixed; z-index: 10; top: calc(env(safe-area-inset-top, 0px) + 8.4rem); right: 1.6rem; left: 1.6rem; pointer-events: none; } @media only screen and (min-width: 768px) { .contact-toast { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 3rem); left: auto; right: 6rem; width: 42rem; } } .contact-toast .folks-strip__tag.is-error { background: var(--accent); color: var(--folks-ink); } .contact-toast .folks-strip__paper { padding: 3rem 5.2rem 2.6rem 2.8rem; } .contact-toast__title { margin: 0 0 0.6rem; color: var(--folks-ink); font: 700 2.2rem/1.15 var(--_font-default); letter-spacing: -0.03em; } .contact-toast__body { margin: 0; color: var(--folks-ink); font: 600 1.5rem/1.45 var(--_font-default); } .contact-toast__close { position: absolute; top: 1.8rem; right: 1.4rem; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; padding: 0; border: 0; background: none; color: var(--folks-ink); cursor: pointer; } .contact-toast__close:focus-visible { outline: 2px solid var(--folks-ink); outline-offset: 2px; } /* Drop and settle; the strip's own --rot is the resting tilt. */ @keyframes contact-toast-in { from { opacity: 0; transform: translateY(-1.6rem) rotate(calc(var(--rot) - 4deg)); } to { opacity: 1; transform: rotate(var(--rot)); } } @keyframes contact-toast-fade { from { opacity: 0; } } .contact-toast .folks-strip { pointer-events: auto; animation: contact-toast-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @media (prefers-reduced-motion: reduce) { .contact-toast .folks-strip { animation: contact-toast-fade 0.2s ease-out both; } } /* Landing: app.js adds `.is-in` when it reveals the description. Before that the strip waits lifted and over-rotated with the marker undrawn; the transitions exist only under `.is-in`, so hiding snaps back while the vendor fades the parent out. */ @media (prefers-reduced-motion: no-preference) { .folks-services .card__descr:not(.is-in) .folks-strip { transform: translateY(-2.5rem) rotate(calc(var(--rot) - 7deg)) scale(1.07); } .folks-services .card__descr:not(.is-in) .folks-strip__hl { background-size: 0% 100%; } .folks-services .card__descr.is-in .folks-strip { transition: transform .62s cubic-bezier(.34, 1.56, .64, 1); } .folks-services .card__descr.is-in .folks-strip__hl { transition: background-size .55s cubic-bezier(.65, 0, .35, 1) .5s; } } /* Editorial artwork: preserve the paper colours and use ink-like typography. */ .folks-services .folks-service-art { --service-ink: var(--folks-ink); } .folks-services .folks-service-art--3 { --service-ink: #fff; } .folks-services .card__title p.permanent { color: var(--service-ink); } .folks-services .folks-service-art--0 .card__media { object-position: 65% center; } .folks-services .card__title p.permanent { color: var(--folks-ink); } .folks-services .folks-service-art--3 .card__title { background: var(--folks-ink); } .folks-services .folks-service-art--3 .card__title p.permanent { color: #fff; } /* One phone block for the whole section — it is last, so nothing above it needs a specificity bump to survive. */ @media (max-width: 767px) { .folks-services .card__descr, .folks-services .folks-service-art--0 .card__descr, .folks-services .folks-service-art--1 .card__descr, .folks-services .folks-service-art--2 .card__descr, .folks-services .folks-service-art--3 .card__descr { right: 3rem; left: 3rem; width: auto; } .folks-services .folks-strip__paper, .campaign-dialog .folks-strip__paper { padding: 2.8rem 2rem 2.2rem; } .folks-services .folks-strip .card__text { font-size: 2rem; } .folks-services .folks-strip__tag, .campaign-dialog .folks-strip__tag { left: 1.6rem; font-size: 1.1rem; } .folks-services .card__title { left: 3rem; bottom: 6%; max-width: calc(100% - 6rem); padding: .8rem 1rem; } .folks-services .card__title p { font-size: clamp(3.6rem, 9vw, 6rem); } } /* First-load editorial collage sequence, sized to stay clear of the captions. */ .mxd-loader__images { width: min(70vw, 42svh, 340px); height: auto; aspect-ratio: 1; } /* Campaign showcase follows Azurio's original landscape, staggered grid. */ .home-campaigns .campaign-preview { display: block; width: 100%; padding: 0; border: 0; background: #202020; color: white; text-align: left; } .home-campaigns .campaign-cover { object-fit: cover; object-position: center 35%; filter: saturate(.18) brightness(.62) contrast(1.06); transition: filter .65s ease; } .home-campaigns .campaign-preview:has(.campaign-brand--burger-king) .campaign-cover { object-position: center 25%; } .home-campaigns .campaign-preview:has(.campaign-brand--irobot) .campaign-cover { object-position: center 60%; } .home-campaigns .campaign-preview:has(.campaign-brand--suunto) .campaign-cover { object-position: center; } /* 35% ends a pixel into the subtitle box burned into the frame (y≈1235), a cream line along the card's foot. */ .home-campaigns .campaign-preview:has(.campaign-brand--laurastar) .campaign-cover { object-position: center 32%; } .home-campaigns .campaign-brand { display: flex; align-items: center; justify-content: center; width: 68%; height: 60%; max-width: none; max-height: none; pointer-events: none; filter: drop-shadow(0 1px 0 #fff3) drop-shadow(0 10px 18px #0003); } .home-campaigns .campaign-brand .campaign-logo { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; opacity: 1; } .home-campaigns .campaign-brand--burger-king { width: 52%; height: 60%; } .home-campaigns .campaign-brand--suunto { width: 52%; height: 60%; } .home-campaigns .campaign-brand--laurastar .campaign-logo { filter: brightness(0) invert(1); } .home-campaigns .campaign-preview > .mxd-cover { background: radial-gradient(ellipse at center, #10131045, #10131010 70%); transition: opacity .65s ease; } /* The card wakes up: the photograph blooms from desaturated to full colour, the vignette lifts, and the brand logo comes out of greyscale with them — one gesture in three registers, on one 0.65s curve. This replaced a five-still flipbook that cross-faded on hover. The stills cost 2.4 MB on every load, phones included, to imitate the film the card opens for real on click; colour says the same thing for nothing. `:focus-visible` is here beside `:hover` deliberately. The old treatment answered a keyboard focus by HIDING the logo (the preview video took the frame), which read as the card going dark under the cursor it could not see. Now focus and hover do the same thing. Gated on `hover: hover`, so a touch device never strands the logo in grey with no way to wake it — the resting photograph is already muted there, and the brand is what has to stay legible. `prefers-reduced-motion` keeps the colour and drops the transition: a colour change is not motion, and the flipbook it replaces did not run for those readers at all. */ @media (hover: hover) { /* The vendor FADES THE LOGO OUT on hover — `main.css` §13449, `.no-touch .mxd-project-item:hover .mxd-project-item__logowrap { opacity: 0 }` — because in Azurio's own design a video took the frame underneath it. That is the rule the old treatment was built around, and it is why the logo had nothing to come back to. Same specificity (0,4,0), later in the cascade, so this wins. */ .home-campaigns .mxd-project-item:hover .mxd-project-item__logowrap { opacity: 1; } /* `.campaign-brand` is in every selector below to match the specificity of the base rule above, which sets `opacity: 1` on the same element. */ .home-campaigns .campaign-brand .campaign-logo { filter: grayscale(1); opacity: .82; transition: filter .65s ease, opacity .65s ease; } .home-campaigns .campaign-preview:hover .campaign-brand .campaign-logo, .home-campaigns .campaign-preview:focus-visible .campaign-brand .campaign-logo { filter: none; opacity: 1; } /* Laurastar's source is unreadable on a dark poster, so it is forced to flat white and has no colour to come back to. It brightens instead. */ .home-campaigns .campaign-brand--laurastar .campaign-logo { filter: brightness(0) invert(1); opacity: .5; } .home-campaigns .campaign-preview:hover .campaign-brand--laurastar .campaign-logo, .home-campaigns .campaign-preview:focus-visible .campaign-brand--laurastar .campaign-logo { filter: brightness(0) invert(1) !important; opacity: 1; } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .home-campaigns .campaign-preview:hover .campaign-cover, .home-campaigns .campaign-preview:focus-visible .campaign-cover { filter: saturate(1) brightness(1); } .home-campaigns .campaign-preview:hover > .mxd-cover, .home-campaigns .campaign-preview:focus-visible > .mxd-cover { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .home-campaigns .campaign-cover, .home-campaigns .campaign-preview > .mxd-cover, .home-campaigns .campaign-brand .campaign-logo { transition: none; } } /* `!important` because main.css opens with `button:active, button:focus { outline: none !important }`. An important declaration beats every normal one whatever its specificity, so without it this ring (and the creator marquee's below) computed to none and keyboard focus on this button was invisible. Important against important falls back to specificity, which this selector wins. */ .home-campaigns .campaign-preview:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 5px; } /* Campaign dialog — a full-screen coral brief in the services collage's paper language (campaign-dialog-brief, mock B). Ink on coral is 6.9:1; there is no legal light-on-coral pairing, so every light surface here is paper carrying ink. */ html:has(.campaign-dialog[open]) { overflow: hidden; } .campaign-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 3.2rem 6rem 4rem; border: 0; border-radius: 0; background: var(--accent); color: var(--folks-ink); overscroll-behavior: contain; } .campaign-dialog[open] { display: flex; flex-direction: column; gap: 2.4rem; } .campaign-dialog::backdrop { background: var(--accent); } /* Opening fades the coral in and lifts the film and brief 1.2rem into place; closing is a shorter fade. `allow-discrete` holds display and the top layer until the fade ends, and @starting-style gives the first frame after showModal() something to transition from. The resting state is `translate: none`: a non-none value would make .campaign-detail the containing block for anything fixed inside it. */ .campaign-dialog, .campaign-dialog::backdrop { opacity: 0; transition: opacity .2s ease-in, display .2s allow-discrete, overlay .2s allow-discrete; } .campaign-dialog[open], .campaign-dialog[open]::backdrop { opacity: 1; transition: opacity .3s ease-out, display .3s allow-discrete, overlay .3s allow-discrete; } .campaign-dialog .campaign-detail { translate: 0 1.2rem; transition: translate .2s ease-in; } .campaign-dialog[open] .campaign-detail { translate: none; transition: translate .45s cubic-bezier(.2, .7, .2, 1) .06s; } @starting-style { .campaign-dialog[open], .campaign-dialog[open]::backdrop { opacity: 0; } .campaign-dialog[open] .campaign-detail { translate: 0 1.2rem; } } @media (prefers-reduced-motion: reduce) { .campaign-dialog .campaign-detail, .campaign-dialog[open] .campaign-detail { translate: none; transition: none; } } /* The ground carries the Folks mark, scattered and tone-on-tone. A fixed layer under the content (the dialog is its stacking context), so it stays put while the brief — or on a phone the whole dialog — scrolls over it. A mask keeps the colour a token. */ .campaign-dialog::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--folks-ink); opacity: .06; mask: url("/img/campaign-dialog-pattern.svg") 0 0 / 48rem repeat; pointer-events: none; } /* The site's coral ring vanishes on a coral ground. `!important` for the same reason as the card's ring above: main.css removes button outlines with an important rule. */ .campaign-dialog :focus-visible { outline: 2px solid var(--folks-ink) !important; outline-offset: 3px; } .campaign-dialog__position, .campaign-close, .campaign-scope, .campaign-results span { font: 400 1.2rem/1.4 var(--_font-accent); letter-spacing: .12em; text-transform: uppercase; } .campaign-dialog__bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 1.6rem; } .campaign-dialog__position { padding: .6rem 1.2rem; background: var(--folks-ink); color: var(--folks-paper); } .campaign-close { display: flex; align-items: center; gap: 1.2rem; min-height: 4.4rem; padding: 0 1.6rem; border: 0; background: var(--folks-ink); color: var(--folks-paper); cursor: pointer; } .campaign-detail { display: grid; flex: 1; min-height: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 6.4rem; } /* The film as a taped paper print. Its height is set from the viewport, not the grid row, so the auto column can size to it: bar, paddings and the print's own border. */ .campaign-print { position: relative; align-self: start; padding: 1rem; background: var(--folks-paper); rotate: -2deg; filter: drop-shadow(0 1.6rem 2.8rem rgb(0 0 0 / .35)); } .campaign-print video { display: block; height: min(68rem, calc(100dvh - 16rem)); width: auto; aspect-ratio: 9 / 16; background: #000; object-fit: contain; } .campaign-print__tape { position: absolute; z-index: 2; top: -1.6rem; left: 50%; width: 12rem; height: 3.2rem; margin-left: -6rem; background: rgb(242 238 231 / .78); rotate: 3deg; } /* Film grain over the video box only (inset = the paper border).

(seo-foundation) ------------- The box's name carried the vendor's `h4` typography by being an `

`, and an h4 directly under an article outlined h1 → h2 skips a heading level — the `heading-order` failure PSI reports on every post (audit §2). The element is now a `

` and the type moves onto the class, value for value from main.css `h4` (3rem / 3.6rem ≥768 / 4rem ≥1200), so nothing about the box's appearance changes. `margin: 0` restates what the h4 computed to. Longhand, not the `font:` shorthand main.css uses: the shorthand would also set `line-height`, and the block above this one in main.css pins `.mxd-article-author__name { line-height: 1 }` — which already beat the h4's own 1.2. Measured: 30/36/40px at 390/800/1440, line-height 1, before and after. */ .mxd-article-author__name { font-family: var(--_font-default); font-weight: 700; font-size: 3rem; letter-spacing: -0.1rem; color: var(--t-bright); margin: 0; } @media only screen and (min-width: 768px) { .mxd-article-author__name { font-size: 3.6rem; } } @media only screen and (min-width: 1200px) { .mxd-article-author__name { font-size: 4rem; } }