/* ========================================================================== Design tokens Source: Figma "CV + Portfolio" → Claude Code page Desktop frame 1280 · Mobile frame 430 Every value comes from the Figma Variables and Text styles panels; none of it is estimated. ========================================================================== */ /* --- Webfonts ---------------------------------------------------------- Self-hosted, so the page needs no second origin: no extra DNS lookup and TLS handshake before the first paint, and no visitor data leaves for a third party. Both faces are OFL-licensed; the woff2 files are Google's own builds, taken from the stylesheet that used to be linked here. Only latin and latin-ext ship. latin-ext carries the Hungarian ő and ű (U+0150/0151, U+0170/0171); cyrillic, greek and vietnamese are dropped, nothing on the page needs them. Both families are variable, one file per subset. Google's stylesheet asked for Inter at 400 and 600 and handed back two URLs, but the bytes are identical (same md5) — it is one variable file covering the whole axis, so we ship it once. Measured: at 100px the advance of "Handgloves 0123" walks 781 → 868px across weights 100 → 900. Bricolage Grotesque also carries an opsz axis, which font-optical-sizing picks up on its own. */ /* Bricolage Grotesque — latin */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/bricolage-grotesque-var-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; } /* Bricolage Grotesque — latin-ext */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/bricolage-grotesque-var-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter — latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/inter-var-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; } /* Inter — latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/inter-var-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Primitive colours (Figma Variables) ---------------------------- */ /* Grey scale — the number is the lightness, as in Figma */ --grey-98: #fafafa; --grey-74: #bdbdbd; --grey-44: #717171; --grey-12: #1f1f1f; /* Project accents. Each has a paired colour: for the light accents (orange, yellow) the pair is dark, because the text runs on it. */ --accent-dap: #5163e6; --accent-dap-pair: #d0d4f5; --accent-bk: #ee8c48; --accent-bk-pair: #483527; --accent-euronics: #114b92; --accent-euronics-pair: #c0cee0; --accent-mak: #16545a; --accent-mak-pair: #c1d0d2; --accent-layher: #f7d06b; --accent-layher-pair: #4a422e; --accent-origo: #15279b; --accent-origo-pair: #c1c5e2; /* --- Semantic colours ----------------------------------------------- */ /* These are what the code uses, not the primitives. */ --color-bg: var(--grey-98); --color-bg-inverse: var(--grey-12); /* hero, dark sections */ --color-text: var(--grey-12); --color-text-inverse: var(--grey-98); /* on a dark background */ --color-text-inverse-muted: var(--grey-74); /* --- Spacing scale (Figma Variables) -------------------------------- */ /* The design uses strictly these 5 values. */ --space-0: 0; --space-12: 0.75rem; /* 12px */ --space-24: 1.5rem; /* 24px */ --space-48: 3rem; /* 48px */ --space-72: 4.5rem; /* 72px */ /* --- Typefaces -------------------------------------------------------- */ /* Both are Google Fonts. Bricolage Grotesque is a variable font. */ --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Type steps ------------------------------------------------------- */ /* The design does NOT scale text fluidly: there are fixed steps, and on mobile it simply uses a smaller step from the same scale. Hence no clamp(); the roles switch at the breakpoint. Display (57) Bricolage Grotesque Regular 57/64 ls -0.25% Display (45) Bricolage Grotesque Medium 45/52 ls 0% Display (36) Bricolage Grotesque SemiBold 36/44 ls 0% Headline (28) Bricolage Grotesque SemiBold 28/36 ls 0% Title (24) Inter SemiBold 24/32 ls 0.5% Title (20) Inter Regular 20/32 ls 0.5% Title (16) Inter Regular 16/24 ls 0.5% Title (14) Inter SemiBold 14/20 ls 0.75% */ --display-54-size: 3.375rem; --display-54-leading: 4rem; --display-54-tracking: -0.0025em; --display-44-size: 2.75rem; --display-44-leading: 3.25rem; --display-44-tracking: 0em; --display-36-size: 2.25rem; --display-36-leading: 2.75rem; --display-36-tracking: 0em; --headline-28-size: 1.75rem; --headline-28-leading: 2.25rem; --headline-28-tracking: 0em; --title-24-size: 1.5rem; --title-24-leading: 2rem; --title-24-tracking: 0.005em; --title-20-size: 1.25rem; --title-20-leading: 2rem; --title-20-tracking: 0.005em; --title-16-size: 1rem; --title-16-leading: 1.5rem; --title-16-tracking: 0.005em; --title-14-size: 0.875rem; --title-14-leading: 1.25rem; --title-14-tracking: 0.0075em; /* Weight belongs to the step as well, not to the place of use — so a step's weight is set in one place and carries everywhere. All three Display steps are 600, heavier than in Figma (400/500/600 there). One weight throughout, so everything in a Display role — the hero, the footer headline and its links — reads with the same density. */ --display-54-weight: var(--weight-semibold); /* Figma: Regular */ --display-44-weight: var(--weight-semibold); /* Figma: Medium */ --display-36-weight: var(--weight-semibold); /* Figma: SemiBold */ --headline-28-weight: var(--weight-bold); /* Figma: SemiBold */ --title-24-weight: var(--weight-semibold); /* case-study section headings */ --title-20-weight: var(--weight-regular); --title-16-weight: var(--weight-regular); --title-14-weight: var(--weight-semibold); /* --- Szerepek: mobil-first ------------------------------------------ */ /* The hero walks all three Display steps: 36 → 44 → 54. The weight is 600 regardless of breakpoint — which now coincides with the steps' own weight, since all three Display steps are 600. */ --role-hero-size: var(--display-36-size); --role-hero-leading: var(--display-36-leading); --role-hero-tracking: var(--display-36-tracking); --role-hero-weight: var(--weight-semibold); /* --- Layout ---------------------------------------------------------- */ --container-max: 80rem; /* 1280px — the desktop frame width */ --container-pad: var(--space-24); /* mobilon 24 (430 - 382 = 2 × 24) */ --nav-height: 6rem; /* 96px — on mobile and desktop alike */ /* --- 12-column grid -------------------------------------------------- From Figma's Layout guide: 12 columns, 48 margin, 24 gutter, stretch. Every track width derives from these rather than sitting here as a rounded number. The page uses three ratios: 12 columns = 100% navigation 8 columns = 66.66% hero text box, works (dap) media 6 columns = 50% bio, the other works sections, footer */ --grid-gutter: var(--space-24); /* Track widths as a proportion of the grid container. The 100% always resolves against the parent of whatever carries it — so there is no hardcoded pixel value and it stays exact at every window size. n columns = n·column + (n−1)·gutter, and column = (band − 11·gutter)/12. Expanded: */ --w-8: calc((200% - var(--grid-gutter)) / 3); /* hero, dap */ --w-6: calc((100% - var(--grid-gutter)) / 2); /* everything else */ /* The same as absolute lengths, worked out on the 1280 frame. Needed for elements whose container is no longer capped at 1280 from 1024 (so they can hug the outer margin) — there the percentage would resolve against the whole viewport and the track would come out wider than intended. 74rem = 80rem frame − 2 × 3rem margin. */ --frame-content: calc(var(--container-max) - 2 * var(--space-48)); --w-6-max: calc((var(--frame-content) - var(--grid-gutter)) / 2); /* 580px */ --w-8-max: calc((2 * var(--frame-content) - var(--grid-gutter)) / 3); /* 781,3px */ /* Button: from the Shape layer (H 40, radius 100, fill Grey 98) */ --btn-height: 2.5rem; --btn-radius: 99rem; /* fully rounded */ } /* Two breakpoints, deliberately separate. 48rem (768px) — only the outer margin grows from 24 to 48. Tablets get a roomier frame while the content still runs the full width: the layout and the typography stay on the mobile variant. 64rem (1024px) — everything else switches here: the column widths (see hero/bio/works/footer.css) and the hero typography. So on a tablet the headline stays on the smaller step; otherwise 54px text would run the full width and the lines would be far too long. Figma only has 430 and 1280; both switch points are our decision. */ @media (width >= 48rem) { :root { --container-pad: var(--space-48); --role-hero-size: var(--display-44-size); --role-hero-leading: var(--display-44-leading); } } @media (width >= 64rem) { :root { --role-hero-size: var(--display-54-size); --role-hero-leading: var(--display-54-leading); --role-hero-tracking: var(--display-54-tracking); } }