/* ========================================================================= Design tokens Reference style: the xAI system, "warm cream laboratory with a black pill", read from the reference's own token dump rather than from a screenshot. This file replaces the light adaptation of hubx.co that shipped on 2026-09-01. Nothing of that system survives here. The canvas is warm rather than pure white, the accent is gone entirely, type carries the hierarchy through size and restraint instead of weight, and the one high contrast element on any view is a black pill button. The three rules that decide almost everything below: 1. The system is near monochrome. Ember, Sunbeam and Sprout exist only as the three dots on a terminal chrome and are purely decorative. No button, no link, no rule and no text is ever chromatic. Removing the crimson also settles the question raised on 2026-09-01 about the parent accent sitting in the same family as Lima's brand red. 2. There are no shadows. The reference lists three shadow values and its own guidance says not to stack them, so this file carries none at all. A warm cream surface separates a layer from the page, and where a real boundary is needed it is a single 1px hairline. 3. Radius is binary. Pills and buttons at 9999px, cards at 16px, the small card inside a card at 8px, inputs at 6px. There is no other value and no intermediate rounding is to be introduced. THE ACCESSIBILITY DEPARTURE, and it lands on the reference's own most used color. The reference calls Fog #858585 "the most-used gray" and assigns it secondary text, inactive nav items and meta labels. Measured on the white canvas it is 3.69:1, which fails WCAG AA for normal text, and on the cream card surface it is worse at 3.48:1. Every muted and secondary text color on this page is Steel #545454 instead, at 7.57:1 on paper and 7.13:1 on cream. Fog is kept for icon strokes and the boundary of an interactive control, both of which answer to 3:1 rather than 4.5:1. Pewter #9d9d9d at 2.71:1 and Dove #d5d9e2 at 1.41:1 carry no text at all. Contrast figures in the comments are measured, not estimated. They come from contrast-light.php in the scratchpad, which walks every foreground and background pair the page actually paints. ========================================================================= */ /* ---- Web fonts, served from this document root -------------------------- Geist and Geist Mono are loaded from assets/fonts/ and from nowhere else. Nothing on this site requests any host but this one, and nothing may be added that does: a stylesheet fetched from another host hands a visitor's IP address to that host on every page view, and the privacy notice states that none is handed to anyone. One file per family per subset rather than one per weight. Google serves both faces as variable fonts, so 400 and 500 render out of a single download each, and the declared range is the weight axis the files actually carry, 100 to 900. Two subsets per face, cut from the same subsets the Google stylesheet served, so the glyph coverage is unchanged: latin, and latin-ext. The second one is not optional here. The company's registered name and address and the whole of the Turkish notice at /aydinlatma/ are set in Turkish, and the letters that carry it, the dotted capital I and the s and g cedillas, live in latin-ext. The unicode-range values are copied verbatim from the Google stylesheet. font-display: swap is what that stylesheet asked for, so first paint behaves exactly as it did before. Both faces are under the SIL Open Font License 1.1, and the license text ships beside them at assets/fonts/OFL-Geist.txt and assets/fonts/OFL-GeistMono.txt. */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/geist-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; } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/geistmono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/geistmono-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; } :root { /* ---- Surfaces --------------------------------------------------------- Four levels, and the whole of the page's depth. Cream is the elevated layer, Sand is the warm wash under a band that has to read as a different room, and Charcoal appears only inside a dark chrome. Nothing here is lifted by a shadow. */ --paper: #ffffff; /* page canvas, figure inset, form inputs */ --cream: #f9f8f6; /* card surfaces: products, services, the form */ --sand: #f2ede5; /* warm wash bands: the hero and the structure note */ --charcoal: #151515; /* dark chrome, used inside an illustration only */ /* ---- Ink -------------------------------------------------------------- Never pure black. The slight lift on Jet Ink is what keeps the dark surfaces warm rather than cold. */ --jet: #0a0a0a; /* headings, primary text, the filled pill 19.80:1 on paper */ --slate: #3b3b3b; /* muted secondary headlines 11.20:1 on paper */ --steel: #545454; /* body copy and every muted label 7.57:1 on paper */ /* DEPARTURE, and the one thing in this file somebody will otherwise get wrong. Fog is the reference's most used gray and it is a text color there. It is not a text color here: 3.69:1 on paper, 3.48:1 on cream, 3.17:1 on sand. It survives as a stroke and as the ring around an interactive control, where 3:1 applies rather than 4.5:1. Note the inversion inside the terminal chrome. On Charcoal the two swap places: Fog is 4.95:1 and passes, Steel is 2.41:1 and fails. Muted text on a dark surface is therefore Fog, which is the exact reverse of the rule above. Do not carry either rule across to the other surface. */ --fog: #858585; /* strokes, control rings, muted text on Charcoal only */ --pewter: #9d9d9d; /* quiet fills inside the Charcoal panel and nowhere else: 2.71:1 on paper, 6.73:1 on Charcoal */ --dove: #d5d9e2; /* hairline between surfaces, and a second figure state on Charcoal: 1.41:1 on paper, 12.92:1 there */ /* White is the only text color on a Jet Ink fill, at 19.80:1. */ --on-jet: #ffffff; /* ---- Accents ---------------------------------------------------------- The three terminal traffic light dots and nothing else. They are decoration inside a piece of chrome, they carry no state and no meaning, and none of them is ever a fill under a word or a stroke that has to be read. This is the whole of the chromatic budget for the page. */ --ember: #ff5f57; --sunbeam: #ffbd2e; --sprout: #28c840; /* ---- Type ------------------------------------------------------------- The reference runs universalSans, universalSansDisplay and GeistMono. The first two are commercially licensed, so the substitution is Geist for display and UI and Geist Mono for technical marks, both confirmed available from Google Fonts before this file was written. Inter and JetBrains Mono stand behind them in the stack if a load fails. Two weights and no more. 400 carries running text and, crucially, the display sizes as well: the signature of this system is a headline that is massive and quiet rather than bold. 500 is emphasis at the small and medium sizes. */ --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --w-regular: 400; --w-medium: 500; /* Display steps: 24, 30, 48, 60, 72. Tracking is -0.025em across the whole scale and line height runs 1.0 to 1.33, which is what locks a headline to the grid and makes the block read as a slab rather than as a column. */ --text-display: 4.5rem; /* 72px, line height 1.00 */ --text-h1: 3.75rem; /* 60px, line height 1.00 */ --text-h2: 3rem; /* 48px, line height 1.00 */ --text-h3: 1.875rem; /* 30px, line height 1.20 */ --text-h4: 1.5rem; /* 24px, line height 1.33 */ /* Running text: 18, 16 and 14 only. The reference forbids body copy below 14px or above 18px, and forbids a line height above 1.63 for running text, so those are the ceilings and floors here. */ --text-lead: 1.125rem; /* 18px, line height 1.63 */ --text-body: 1rem; /* 16px, line height 1.50 */ --text-sm: 0.875rem; /* 14px, line height 1.43 */ /* The one step below 14px. It is the reference's own caption token and it carries uppercase labels, the eyebrows and the field names, never a sentence. Nothing a reader has to read as prose is set at this size. */ --text-caption: 0.75rem; /* 12px */ --lh-display: 1.0; --lh-h3: 1.2; --lh-h4: 1.33; --lh-lead: 1.63; --lh-body: 1.5; --lh-sm: 1.43; --ls-display: -0.025em; /* every size at 24px and above */ --ls-body: 0; /* running text is untracked */ --ls-mono: -0.01em; --ls-caption: 0.08em; /* uppercase labels only */ /* ---- Spacing ---------------------------------------------------------- Base unit 4px, and the reference's own twelve steps. Nothing on this page uses a value that is not one of them. */ --sp-4: 0.25rem; --sp-8: 0.5rem; --sp-12: 0.75rem; --sp-16: 1rem; --sp-20: 1.25rem; --sp-24: 1.5rem; --sp-32: 2rem; --sp-40: 2.5rem; --sp-48: 3rem; --sp-64: 4rem; --sp-96: 6rem; --sp-144: 9rem; /* ---- Layout ----------------------------------------------------------- */ --site-width: 75rem; /* 1200px */ --section-gap: 5rem; /* 80px */ --card-padding: 2.5rem; /* 40px */ --element-gap: 0.75rem; /* 12px */ --header-height: 4rem; /* 64px */ --page-x: 2.5rem; /* 40px, steps down with the viewport below */ /* ---- Radius ----------------------------------------------------------- Binary by design. Do not add a fifth value. */ --r-pill: 9999px; --r-card: 1rem; /* 16px */ --r-small: 0.5rem; /* 8px */ --r-input: 0.375rem; /* 6px */ /* ---- Boundaries ------------------------------------------------------- There is no elevation token in this file and that is deliberate. Cream alone separates a card from the page. A hairline appears only where a boundary genuinely has to be seen. Two boundary colors, and the distinction is an accessibility one. Dove is the hairline between two surfaces: nothing depends on seeing it, so its 1.41:1 is not a failure. Fog is the resting ring around an interactive control, where WCAG asks for 3:1 and Dove cannot supply it. Fog measures 3.69:1 on paper and 3.48:1 on cream. */ --hairline: 1px solid var(--dove); --control-ring: 1px solid var(--fog); /* The focus indicator is Jet Ink rather than the reference's Dove outline, for the same reason: a focus ring has to be seen, and Dove at 1.41:1 cannot be. Jet Ink on paper is 19.80:1. */ --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--jet); /* ---- Motion ----------------------------------------------------------- Quieter than the system this replaces. Hover states settle in 200ms and content below the fold fades up over 600ms the first time it is seen. All of it is switched off under prefers-reduced-motion by the guard at the top of site.css. */ --transition-duration: 200ms; --entrance-duration: 600ms; } /* Page padding steps down with the viewport. The measure itself never grows past 1200px. */ @media (max-width: 64rem) { :root { --page-x: 1.5rem; --section-gap: 4rem; } } @media (max-width: 34rem) { :root { --page-x: 1.25rem; --card-padding: 1.5rem; } }