# GRID Architekci — Tailwind mapping Every pattern in the mocks, written as Tailwind classes. Pair with `tailwind.config.js` in this folder — the token names below (`accent`, `ink/50`, `divider`, `ease-reveal`) come from it. Load Archivo (weights 400 and 800) — the mocks use no other typeface. --- ## Page shell The mocks are drawn on a fixed 1360px canvas. In production the page is fluid and caps at that width. ```html
``` ## Header Logo left, nav right, PL/EN last. Wraps to two rows below `sm`. ```html
GRID Architekci
``` Active item: `aria-current="page"` drives the accent underline — do not hard-code an `.active` class. ## Hero Collapses from two columns to one at `md`. ```html

…

…

23
lata pracowni
``` ## Filter bar ```html
12 / 18
``` ## Project grid 1 → 2 → 3 columns. Every seventh tile spans two columns; `grid-flow-dense` back-fills the gap it leaves. ```html
Dom Kultury, Zapolice 2022
PubliczneZrealizowane
``` The hover mask is the one effect the client asked for by name — accent at 28% in `multiply`, over a photograph that goes from 60% to full saturation. ## Project page — spec block Five columns of label/value, even rhythm above, between and below. ```html
Klient
Gmina Zapolice
``` The `h-3` on the label is deliberate: it keeps both rows on one baseline when a label wraps to two words. ## Awards table Rows are links. Below `sm` the four columns become a stacked block. ```html 2003 Europan 7, Kristianstad Szwecja I nagroda ``` ## Publication covers Six per row, image contained (never cropped — the covers have wildly different proportions). ```html
…
Prasa branżowa2021
``` ## Highlight plates Three plates: accent fill, ink fill, surface fill. Arrow slides in on hover. ```html
2003
I nagroda
Europan 7

…

→ ``` --- ## Rules that hold everywhere - **No rounded corners.** `borderRadius` is `none` only — if a radius appears, it is a bug. - **Rules, not boxes.** `border-t-2 border-divider` separates sections; 1px `border-hairline` separates rows. No cards, no shadows. - **Flush left.** Nothing is centred — not headings, not button labels. - **Photographs desaturate at rest** (`saturate-60`) and reach full colour on hover. Publication covers are `object-contain`; every other image is `object-cover`. - **One easing** (`ease-reveal`) and three durations (450/600/700ms) across the whole site. - **Accent at body size must be `accent-700`** — `accent` (#ff6633) on paper is under 4.5:1 and fails contrast for small text. Use it for large type, rules and interface chrome. ## Touch Every effect above is `group-hover`, which does not exist on touch. On mobile the tiles need a visible pressed state instead — `active:opacity-90` on the link, or show the accent mask on `:active`. Decide this before build; the mocks are desktop-only.