/* ============================================ artem.design — Design Tokens Single source of truth. Change here, change everywhere. Mirrors the Figma styleguide frame "Styleguide" (779:26306). Two layers, in this order: 1. PRIMITIVES — raw values with literal names (white, dark, yellow). Never referenced from component CSS. 2. SEMANTIC — role names (bg, surface, border, text, accent) that point at primitives. This is what the rest of the CSS uses. ============================================ */ :root { /* ============================================ 1. PRIMITIVES ============================================ */ /* ---- Color primitives ---- --light is the site's ground, not a tint of white. White is kept because a few things genuinely want it: the glass highlights over photographs, and the illustration foreground. Everything that means "the light side of the palette" should reach for --light instead. Because it is the one light, it is both the ground under a light section and the ink inside a dark one, so it carries the darker value into both. --light-2 keeps its step below it: the ramp only reads as a ramp while the second stays the darker of the two. */ --white: #fff; --light: #e9e0d8; --light-2: #e2d6cc; --gray: #dedede; --dark: #151515; --yellow: #ff3; --green: #17914f; /* ---- Font primitives ---- Aeonik Pro VF leads. Helvetica Now sits behind it as the runner-up, not as a glyph fallback — Aeonik covers the Latin set the site uses, so the browser never actually fetches Helvetica while Aeonik is first. To compare the two, swap their order here and repoint the font preload in index.html to match. The tail fallbacks lead with Helvetica Neue, the closest metric match, so the swap-in moves as little as possible. */ --font-sans: "Aeonik Pro VF", "Helvetica Now Var", "Helvetica Neue", Helvetica, system-ui, -apple-system, Arial, sans-serif; /* The handwritten face. Nothing on the system is close enough to stand in for it, so the tail is the generic cursive rather than a named list pretending to match. */ --font-hand: "Monstera Jam", cursive; /* ---- Weight primitives ---- Aeonik Pro VF carries a wght axis from 100 to 900, so any value here is an exact instance, not a rounding to the nearest shipped cut. These three are the face's own named instances; the scale below also uses values between them, which is why they are written as plain numbers there. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-button: 440; /* ============================================ 2. SEMANTIC COLOR ============================================ */ --color-bg: var(--light); /* page background, and the ink inside dark sections */ --color-bg-alt: var(--light-2); /* secondary ground: a section set apart from the page */ --color-text: var(--dark); /* primary text */ --color-accent: var(--yellow); /* CTA, hovers, selection, result stickers */ --color-success: var(--green); /* "open" availability dots */ /* The page runs the light scheme, so it carries that scheme's surface: a veil of white over the warm ground rather than a tint of the ink stirred into it. Anything that wants the other kind says so with .scheme-dark, where the surface goes back to a share of currentcolor. */ --color-surface: rgb(255 255 255 / 50%); /* cards, panels, wells */ /* Border stays a currentcolor tint: a hairline is the ink thinned out, not a plate. It inverts on its own wherever the ink does. 14% is the Figma value; over this ground it lands on ~#d3ceca. */ --color-border: color-mix(in srgb, currentcolor 7%, transparent); /* hairlines */ /* Same trick for de-emphasised text — stays legible on any ground. */ --color-text-muted: color-mix(in srgb, currentcolor 60%, transparent); /* support text */ --color-text-subtle: color-mix(in srgb, currentcolor 40%, transparent); /* captions, meta */ /* Pairings: the text colour that goes on top of a filled ground. */ --color-on-dark: var(--light); --color-on-accent: var(--dark); /* ============================================ 3. SEMANTIC TYPOGRAPHY ============================================ */ /* Two roles so headings can take a display face without touching body text. Same stack for now. */ --font-heading: var(--font-sans); --font-body: var(--font-sans); /* Third role: the hand-written aside. Its own name, so the face can be swapped without touching the two above. */ --font-signature: var(--font-hand); /* ---- The scale ---- Nine steps. Each one owns its size, weight, line height and tracking as four parallel tokens, so a step can be retuned without touching any other. Never pair the size of one step with the tracking of another — use the matching .text-* class in main.css instead. Sizes are fluid from 375px -> 1440px; the max is the Figma desktop size. The comment on each is min -> max in px. Weight runs the other way on purpose — 500 at 96px up to 600 at 22px. Large type needs less weight to read as heavy, small type needs more to hold its colour, so the ramp compensates optically. Those in-between values (550, 560, 570) are real instances of the variable face, not rounded to a named cut. */ /* Display — 48 -> 96 */ --text-display: clamp(2.75rem, 1.5rem + 4.507vw, 5rem); --weight-display: 550; /* Figma "Heading display" */ --leading-display: 1; --tracking-display: -0.04em; /* Heading XL — 36 -> 72 */ --text-heading-xl: clamp(2.25rem, 1.42rem + 3.38vw, 3.5rem); --weight-heading-xl: 550; /* Figma "Heading large" */ --leading-heading-xl: 1; --tracking-heading-xl: -0.03em; /* Heading LG — 28 -> 44. Also the large-quote style. */ --text-heading-lg: clamp(1.75rem, 1.398rem + 1.502vw, 2.625rem); --weight-heading-lg: 550; /* interpolated — Figma names this one "Large quote", no number given */ --leading-heading-lg: 1.05; --tracking-heading-lg: -0.03em; /* Heading MD — 24 -> 32 */ --text-heading-md: clamp(1.5rem, 1.324rem + 0.751vw, 2rem); --weight-heading-md: 550; /* Figma "Heading medium" */ --leading-heading-md: 1.12; --tracking-heading-md: -0.03em; /* Heading SM — 18 -> 22 */ --text-heading-sm: clamp(1.125rem, 1.037rem + 0.376vw, 1.375rem); --weight-heading-sm: 600; /* Figma "Heading small" */ --leading-heading-sm: 1.2; --tracking-heading-sm: -0.015em; /* Heading XS — 16. A heading at body size. */ --text-heading-xs: 1rem; --weight-heading-xs: 600; /* interpolated — Figma names this one "Heading body" */ --leading-heading-xs: 1.4; --tracking-heading-xs: -0.01em; /* Body — 16 */ --text-body: 1rem; --weight-body: var(--weight-regular); /* Figma body */ --leading-body: 1.4; --tracking-body: 0em; /* Small — 14. Captions, footnotes, card meta. */ --text-small: 0.875rem; --weight-small: var(--weight-regular); /* no Figma style at 14 */ --leading-small: 1.4; --tracking-small: 0em; /* Label — 12, uppercase. Section markers, meta, nav. */ --text-label: 0.75rem; --weight-label: 500; /* no Figma style at 12 */ --leading-label: 1.2; --tracking-label: 0.04em; /* Uppercase — a variant of Body, not a size of its own, so it borrows --text-body and --leading-body and only overrides these two. */ --weight-uppercase: var(--weight-semibold); --tracking-uppercase: 0.02em; /* ============================================ 4. SPACE, LAYOUT, SHAPE, MOTION ============================================ */ /* ---- Spacing (8-based, fluid at section level) ---- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /*40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-section: clamp(4rem, 2.5rem + 7vw, 6rem); /* ---- Three nested insets ---- One rule holds them together: a box inside a box gets the smaller inset, or the two edges read as one and the nesting disappears. So the three below are not picked one at a time, they are one ramp halved: --space-section 96px at 1440, 66px at 375 the page's own margin --space-card 64px at 1440, 24px at 375 a plate on that page --space-inner 43px at 1440, 12px at 375 a panel on that plate The fluid term in the middle is exactly half the card's, so the two hold a clean 2:1 the whole way up from a phone — a pair tuned by hand at one width always drifts at another, and halving the slope is what stops that. The top of the inner ramp is the odd one out: --space-12 rather than the --space-8 that would have kept 2:1 all the way. Above ~1070px the card's own cap has already bitten and it sits frozen at 64px, so an inner step that also stopped would have left the widest screens with the tightest-looking panel on the page. It keeps climbing instead, and the ratio eases from 2.0 to 1.33 across the last stretch. --space-section is clamped tighter still, for the same kind of reason in the other direction: the page margin has less room to grow than the things inside it, so the gap between the first two steps narrows from 2.8x on a phone to 1.5x on a desktop, and never inverts. Use the card step for anything that reads as a plate on the page, and the inner step for anything that reads as a panel on a plate. */ --space-card: clamp(var(--space-6), 6vw, var(--space-16)); --space-inner: clamp(var(--space-4), 3vw, var(--space-12)); --space-element: clamp(var(--space-2), 3vw, var(--space-6)); /* ---- Layout ---- */ --container-max: 90rem; /* 1440px */ --container-wide: 120rem; /* 1920px — the near-full-bleed cap: .container.is-wide and the services section both stop here */ --container-narrow: 72rem; /* 960px — .container.is-narrow, and the measure every .section-header / .section-footer is set to. Reading width, not layout width. */ --container-pad: clamp(1rem, 4vw, 3rem); --grid-gap: clamp(1rem, 2vw, 1.5rem); /* horizontal: between grid columns */ /* Vertical rhythm between the main blocks of a section — header, body, footer. Rises from --space-8 (2rem) at ~400px to --space-24 (6rem) at ~1600px (--container-max), clamped at both ends. 1rem + 4vw is the line through those two points. */ --section-gap: clamp(2.25rem, 1rem + 4vw, 4rem); /* ---- Shape: one sharp family, like real product stickers ---- */ --radius-sm: 2px; /* tags, small chips */ --radius-md: 4px; /* buttons */ --radius-lg: 8px; /* large blocks, sections */ /* ---- Icons ---- */ --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.66667 7.66667L6.66667 11.6667L14 4.33333' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E"); --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2.5v11M2.5 8h11' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8h11' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); /* ---- Motion ---- */ --duration-fast: 250ms; --duration-base: 400ms; --duration-slow: 625ms; --easing: cubic-bezier(0.625, 0.05, 0, 1); /* ---- Illustration tokens (frosted glass UI blocks) ---- Two colours drive every illustration: fg (white — text and the brightest accent) and glass (the panel fill). Every other tone is currentcolor at reduced opacity. To retint a single illustration, override --illustration-fg / --illustration-glass on that block; the derived tones follow automatically. */ --illustration-fg: var(--white); --illustration-glass: color-mix(in srgb, #24221d 37%, transparent); --illustration-stroke: color-mix(in srgb, currentColor 15%, transparent); --illustration-hair: color-mix(in srgb, currentColor 0%, transparent); --illustration-soft: color-mix(in srgb, currentColor 55%, transparent); --illustration-faint: color-mix(in srgb, currentColor 50%, transparent); } /* ============================================ COLOR SCHEMES A scheme is the handful of colour roles a block needs to paint itself. Put one of these classes on a section, a wrapper, a single card, and everything inside it follows. They nest, and that is the whole point of doing it in custom properties rather than in modifier classes per component. The nearest ancestor carrying a scheme wins for its own subtree, so a dark slider inside a light section is one class on the slider. Nothing has to be undone on the way in, and nothing has to be restored on the way out. Each scheme also paints itself: background-color and color come from the two roles it has just set. A block that brings its own ground — a photograph, a gradient, a plate mixed off something else — should state that background after the class; the tokens are still the scheme's. Surface is listed in every scheme, because the light ones do not want a tint of their own ink: a plate on warm paper reads better as a veil of white over it than as paper with ink stirred in. That is a choice per scheme, not a rule, so each one states it and none inherits a surface meant for the other side. Border and the two muted inks are not listed. Those are currentcolor mixes, so setting the ink above is already what inverts them. :root keeps the ink-mix surface rather than the white veil. Several dark blocks still paint themselves by hand — .ab-site, .logo-wall__logo, .step-timeline__marker, .start-card — and read their surface from the root, where a 50% white would blow out. They get the light veil the day they carry .scheme-dark instead. ============================================ */ /* Each selector is doubled on purpose. A scheme is a utility, so it has to outweigh whatever ground the thing it is put on paints for itself — a .ce-card reaching for --color-surface, a section reaching for its own plate. At one class it would tie with those and lose on file order, since this sheet loads before main.css. Two classes settles it once, here, instead of every component restating the pair to win the tie. */ .scheme-light.scheme-light, .scheme-light-alt.scheme-light-alt, .scheme-dark.scheme-dark, .scheme-brand.scheme-brand { background-color: var(--color-bg); color: var(--color-text); } /* The page's own ground and ink, and the way a block steps back out of a dark scheme it happens to sit inside. Not quite a copy of :root: the surface here is the white veil, where the root still carries the ink mix for the hand-painted dark blocks that read from it. */ .scheme-light { --color-bg: var(--light); --color-text: var(--dark); --color-on-dark: var(--light); --color-surface: rgb(255 255 255 / 50%); } /* Same ink, one step down the warm ramp. For a block that should read as its own without leaving the light side of the palette. The ground is --color-bg-alt, the role, rather than --light-2 underneath it: the secondary ground is named once in the semantic layer and every scheme that wants it points at that one name. */ .scheme-light-alt { --color-bg: var(--color-bg-alt); --color-text: var(--dark); --color-on-dark: var(--light); /* The same veil. It lands lighter here only because the ground under it is darker, which is what keeps a plate reading as a plate on both. */ --color-surface: rgb(255 255 255 / 50%); } /* Inverted. --color-on-dark has to flip with the rest: a filled button inside here is painted in the scheme's ink, which is the light one, so its label has to come back to the scheme's ground. */ .scheme-dark { --color-bg: var(--dark); --color-text: var(--light); --color-on-dark: var(--dark); /* Stated, not inherited. Without this the nearest light scheme above would hand down its white veil, and 50% white on ink is a white card. Twice the root's share of the ink: the same 5% that reads as a plate on paper barely separates from a dark ground. */ --color-surface: color-mix(in srgb, currentcolor 10%, transparent); } /* The accent as a ground rather than as a highlight on one. For the single thing on a page that has to be the loudest: the lead offer, a sticker, a result. The only scheme whose ink is named from a primitive rather than from a role. The other three flip around each other, so --dark and --light take turns being the ground and the ink. Yellow does not take turns — it is the same yellow in a light section and in a dark one, so what reads on it is fixed and saying --color-text here would be a promise the scheme cannot keep. --color-on-dark is the light one, because a filled button inside this block is painted in the scheme's ink, which is the dark. */ .scheme-brand { --color-bg: var(--color-accent); --color-text: var(--dark); --color-on-dark: var(--light); --color-surface: color-mix(in srgb, currentcolor 10%, transparent); }