/* Hallmark · tokens · genre: modern-minimal · theme: tradergent brand (dual-mode) * vibe: "lit solid, folded planes, institutional" * axes: light + dark / unicase-display + geometric-sans + institutional-grotesque * / deep green ~179° with a warm gold ~81° * * REBRANDED 2026-08-28 to the tradergent mark. The palette was chromatic-lime * ~125° on a near-black paper, single mode. It is now the mark's own three * colours, in BOTH modes: * * deep green #183630 oklch(30.8% 0.038 179.0) * cream #E3DAC9 oklch(89.1% 0.025 83.4) * gold #E5C690 oklch(84.0% 0.078 81.1) * * Dark is green paper / cream ink / GOLD accent. Light is cream paper / * green ink / GREEN accent. * * ⚠️ The light accent is green, not gold, and that is not a style choice: * gold on cream measures 1.18:1 and is unreadable. Gold needs a dark ground. * In light mode gold is decorative only — hairlines and ornament, never text, * never an action's ground. Do not "restore" gold as the light accent. * * Measured contrast, both modes: * light ink/paper 10.62 · ink/paper-2 9.41 · muted/paper 5.96 * accent/paper 10.62 · accent-ink/accent 9.41 · rule-strong 4.11 * dark ink/paper 9.41 · ink/paper-2 7.37 · muted/paper 5.25 * accent/paper 7.96 · accent-ink/accent 7.96 · rule-strong 4.27 * * The gradient rule below is UNCHANGED and still governs: as lightness falls, * chroma falls with it and the hue rotates. That is light falling off a solid. * It is why these ramps read as material and a two-stop neon fade does not. * Every gradient still interpolates `in oklch` so the rotation survives; an * sRGB interpolation of the same stops muddies the middle. * * The five --grad-* definitions were NOT rewritten for the rebrand. They * reference their stop tokens through var(), so redefining the stops per mode * re-derives all five automatically. * * The measured ramps below are the ORIGINAL lime figures, kept as the record * of where the rule came from. They are no longer the shipped values — the * live stops are --color-lit-*, --color-shadow-*, --color-wing-* per mode. * * lit face L 82.8 → 73.3 C 0.207 → 0.199 H 124.8 → 130.8 (historic) * shadow face L 36.9 → 20.5 C 0.053 → 0.025 H 145.3 → 186.4 (historic) * lower wing L 24.4 → 36.9 C 0.032 → 0.045 H 163.5 → 148.0 (historic) * * These tokens are page-agnostic on purpose: index.html is the first page of * the site, not the only one. Nothing below encodes "homepage". Future pages * link this file unchanged and consume the same names. * * styles.css references these BY NAME only — no inline hex / oklch / rgb, and * no font-family that bypasses a token. */ /* ---- Faces -------------------------------------------------------------- * Four families, all SIL OFL 1.1, all served from THIS origin under /fonts/. * They are deliberately not linked from a font CDN: a third-party font host * sees every visitor's IP, which is not a disclosure a financial site should * make on a visitor's behalf, and it adds a DNS + TLS handshake to the * critical path for ~139 KB of payload that this origin already has open. * /fonts/LICENSES.txt ships the full licence text alongside the files, as * the OFL requires. * * Each file is the `latin` subset only. The unicode-range below is the exact * range those subsets cover, so a visitor writing outside it downloads * nothing rather than downloading a face with no glyph for their text. * * Montserrat, Karla and Geist Mono are VARIABLE on the weight axis, * which is why there is one file per family rather than one per weight, and * why no weight below is synthesised. SEKUYA ships a single static weight * (400) and no italic, so it is used at 400 only and is never set bold or * oblique — a synthesised bold on a face this heavy fills its counters in. * ---------------------------------------------------------------------- */ /* SEKUYA is a UNICASE display face: its lowercase glyphs are drawn at cap height (xHeight == capHeight == 700/1000), so `tradergent` sets as TRADERGENT from the lowercase string in the markup. Nothing that uses it carries `text-transform`, deliberately — the caps are in the outlines, and transforming on top of them would change what a screen reader announces and how ::first-letter resolves without changing a single pixel. */ @font-face { font-family: "SEKUYA"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sekuya-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; } /* Montserrat sets every heading. It is a geometric sans with near-circular bowls, a large x-height and near-uniform stroke weight — it sets WIDER and lighter per character than the unicase face it takes the heading slots from, so every rule that consumes it below is tracked and sized for a geometric sans, not inherited from the display steps that preceded it. */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/montserrat-latin-var.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; } /* Karla sets body, controls and every piece of interface text. It is a grotesque with slightly condensed advances and open apertures, which is what keeps 62ch of prose on a sensible line length and the 13px legal block legible without a second face. */ @font-face { font-family: "Karla"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/karla-latin-var.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: "Public Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/publicsans-latin-var.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: 400 700; font-display: swap; src: url("fonts/geistmono-latin-var.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 { /* Dark by declaration: form controls, scrollbars and UA surfaces must follow the page rather than render as light-mode chrome on a near-black paper. */ color-scheme: light dark; /* ---- BRAND PALETTE · LIGHT (the default, defined on bare :root) -------- Rebranded 2026-08-28 to the tradergent mark: deep green #183630, cream #E3DAC9, gold #E5C690. Every colour token is defined HERE, in full, on bare :root. The dark values live in the override blocks at the foot of this file. Nothing may have its ONLY definition inside a media query or a [data-theme] block -- that is the defect that makes a theme half-work. ⚠️ In LIGHT mode the accent is GREEN, not gold. Measured: gold #E5C690 on cream #E3DAC9 is 1.18:1 and unreadable. Gold is decorative only here -- hairlines and ornament, never text, never an action's ground. ---------------------------------------------------------------------- */ --color-paper: oklch(93.0% 0.018 84.0); /* #EEE7DB lifted cream */ --color-paper-2: oklch(89.1% 0.025 83.4); /* #E3DAC9 brand cream */ --color-ink: oklch(30.8% 0.038 179.0); /* #183630 · 10.62:1 */ --color-muted: oklch(45.0% 0.030 179.0); /* #435B55 · 5.96:1 */ --color-rule: oklch(78.0% 0.022 84.0); /* decorative hairline */ --color-rule-strong: oklch(54.0% 0.026 84.0); /* boundary rule · 4.11:1 */ --color-accent: oklch(30.8% 0.038 179.0); /* GREEN action · 10.62:1 */ --color-accent-peak: oklch(38.0% 0.044 179.0); /* hover / focus ring */ --color-accent-deep: oklch(24.0% 0.032 179.0); /* pressed */ --color-accent-ink: oklch(89.1% 0.025 83.4); /* cream ON green · 9.41:1 */ /* Gradient stops. The physical rule from this file's header still holds: as lightness falls, chroma falls with it and the hue rotates. That is what makes these read as a lit solid. Every ramp below interpolates `in oklch` so the rotation survives. */ --color-lit-top: oklch(38.0% 0.046 176.0); --color-lit-bottom: oklch(29.0% 0.036 184.0); --color-lit-press: oklch(22.0% 0.028 190.0); --color-shadow-top: oklch(88.0% 0.026 84.0); --color-shadow-bottom:oklch(80.0% 0.020 90.0); --color-wing-start: oklch(82.0% 0.020 88.0); --color-wing-end: oklch(90.0% 0.026 82.0); /* ---- Ramps · always `in oklch` --------------------------------------- */ /* The lit face. Used for exactly two things: the primary action, and the lit plane of the hero form. It is the smallest surface on the page. */ --grad-lit-face: linear-gradient(to bottom in oklch, var(--color-lit-top), var(--color-lit-bottom)); --grad-lit-face-press:linear-gradient(to bottom in oklch, var(--color-lit-bottom), var(--color-lit-press)); /* The shadow face. The page's large dark planes — the risk band, the hero form's body. Vertical, because that is how the mark's shadow face falls. */ --grad-shadow-face: linear-gradient(to bottom in oklch, var(--color-shadow-top), var(--color-shadow-bottom)); /* The lower wing. Horizontal and INVERTED (it gets lighter to the right) — a second plane turning back toward the light. */ --grad-wing: linear-gradient(to right in oklch, var(--color-wing-start), var(--color-wing-end)); /* A hairline that fades as it descends — the same falloff logic applied to a 1px rule rather than a plane. */ --grad-rule-fade: linear-gradient(to bottom in oklch, var(--color-rule-strong), var(--color-rule)); /* ---- Type -------------------------------------------------------------- Montserrat sets every heading — the hero headline, the section heads, the small heads (step and trait titles at 16px, the legal-notice title at 14px) and the footer statement line. It is a geometric sans: near-circular bowls, near-uniform stroke, a large x-height, and a WIDE set. That width is the whole reason the heading rules below carry their own tracking and sizes rather than reusing the unicase steps — a geometric sans set at the tracking a unicase display face wanted collides against itself. Karla sets body, controls and every piece of interface text. It is a grotesque with slightly condensed advances and open apertures: it holds a 62ch measure without the line running long, and stays legible at the 13px the legal block is set in. Geist Mono is the outlier and holds exactly ONE slot — the step ordinals. SEKUYA is the identity face and is rationed to the LOGOTYPE alone: the wordmark in the bar and the same lockup repeated in the footer. Nothing else. It is a unicase display cut — heavy, very wide (advances run 0.84–1.13em), single weight, no italic — which makes it a mark, not a text face, and it is used as one. Each stack keeps its system fallback, in the same register as the face it backs, so a 404 degrades to a grotesque / a grotesque / a mono rather than to whatever the UA defaults to. SEKUYA has no unicase analogue in any system stack, so its fallback is the page's own grotesque at its heaviest — the text stays legible and on-brand, it simply loses the caps. That is why the file is preloaded rather than left to swap in. ---------------------------------------------------------------------- */ --font-mark: "SEKUYA", "Public Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-body: "Karla", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-outlier: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --weight-body: 400; --weight-display: 700; /* the SANS emphasis weight: the action, the wordmark, the panel terms, the questions */ /* The SUB-HEAD weight, one step under --weight-display. A geometric sans has no serifs to hold a line by contrast, so it cannot be set as light as the text serif this slot used to hold: at 500 the footer statement went limp at 40px. 600 is the floor that keeps both the statement line and the 14–16px small heads reading as heads against Karla's 400 body beside them. The two names are kept apart because they are two roles, not one value. */ --weight-serif: 600; --weight-serif-sm: 600; /* SEKUYA has one weight and no italic. This token exists so that nothing consuming the mark face can accidentally inherit --weight-display and make the UA synthesise a bold by smearing the outlines sideways. */ --weight-mark: 400; /* ---- Scale · major third (1.25). Five display/body sizes, no more, plus one dedicated small-print step below them. --text-xs exists for ONE role: the formal legal block. It is floored at 13px, not stepped down the 1.25 ratio to 11.2px, because below ~12px the text stops being readable on a phone. WCAG grants no contrast exemption for small text (the 3:1 large-text allowance starts at 24px regular / 18.66px bold), so anything set at this size still carries the full 4.5:1 floor — hence it takes --color-muted (9.5:1 on paper), never a dimmer grey and never reduced opacity. ---------------------------------------------------------------------- */ --text-xs: 0.8125rem; /* 13px — legal small print only */ --text-sm: 0.875rem; /* 14px — accessibility floor */ --text-base: 1rem; /* 16px */ --text-md: 1.25rem; /* 20px — ledes and pull copy */ /* Montserrat sets WIDER per character than the faces these two steps have carried before, so both come DOWN rather than staying where a narrower face left them: the display step 60px → 56px and the title step 40px → 36px. That holds the hero headline to three lines and the section heads to one at every width, without the line breaking mid-word. */ --text-title: clamp(1.625rem, 2vw + 0.9rem, 2.25rem); /* 26 → 36px */ --text-display: clamp(2.125rem, 3.8vw + 1rem, 3.5rem); /* 34 → 56px */ /* ---- The logotype steps ----------------------------------------------- SEKUYA is now the LOGOTYPE face only, so only the two small steps below are consumed — the wordmark in the bar (-sm, and -xs on a 320px bar) and the same lockup repeated in the footer, which takes --text-sm. The -md and -lg steps are retained, unconsumed. They exist as the calibrated unicase equivalents of the title and display steps: every glyph in this face is cap height, so a line of it carries far more ink per character than a mixed-case line of the same point size, and it has to be set smaller to sit at the same optical weight. Anything that puts SEKUYA back on a heading takes these, not --text-title/--text-display. -------------------------------------------------------------------- */ --text-mark-xs: 0.8125rem; /* 13px — the wordmark on a 320px bar */ --text-mark-sm: 0.9375rem; /* 15px — the wordmark */ --text-mark-md: clamp(1.25rem, 1.4vw + 0.75rem, 1.75rem); /* 20 → 28px */ --text-mark-lg: clamp(1.625rem, 3vw + 0.75rem, 2.625rem); /* 26 → 42px */ /* Montserrat carries real ascenders and descenders where the unicase face carried neither, so the heading leading opens back up: 0.96 would clip the descenders of a mixed-case line against the one below it. */ --lh-display: 1.06; --lh-title: 1.18; --lh-lede: 1.45; --lh-body: 1.6; /* Retained with the -md/-lg steps above, unconsumed. Cap-height lowercase means no descenders and almost no ascender gap, so the em box is nearly all ink and normal leading leaves a visible trench between lines. */ --lh-mark: 0.96; /* Montserrat's near-circular bowls put a lot of air between letters, and at display sizes that air reads as the word coming apart. Both heading steps are tracked in harder than the serif they replace wanted, and harder on the larger one, where the gaps scale with the point size. */ --track-display: -0.022em; /* tight on display sizes */ --track-title: -0.015em; --track-label: 0.09em; /* loose on small mono labels */ /* The wordmark takes POSITIVE tracking: it is a ten-letter lockup read as a shape rather than as a word, and the extra air is what separates a logotype from a heading that happens to be small. It is well below the 0.09em the mono wordmark used, because this face brings its own width to the party. -lg and -md are retained with the unicase steps above, unconsumed: SEKUYA is very wide, so at heading sizes it needs PULLING IN or the words break apart into individual letters. */ --track-mark-lg: -0.022em; --track-mark-md: -0.016em; --track-mark-sm: 0.035em; /* Retained with the unicase heading steps above, unconsumed. SEKUYA's word space is drawn for its own very wide advances, and at heading sizes it opens gaps that break a headline into three separate objects instead of one line. Pulled back so the words group, but not so far that they touch. Montserrat's own word space needs no such correction and takes none. */ --word-mark: -0.15em; /* ---- Space · 4pt scale, named by role ---- */ --space-3xs: 0.125rem; /* 2px */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2.5rem; /* 40px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 9rem; /* 144px */ /* ---- Rules ---- */ --rule-hair: 1px; /* ---- Radius · the mark is a folded solid with generous outer radii, so the page rounds where the mark rounds and stays square where it cuts. */ --radius-control: 0.5rem; /* 8px — controls */ --radius-panel: 1.25rem; /* 20px — surface panels */ /* ---- Hit area · WCAG 2.5.8 floor ---- */ --target-min: 2.75rem; /* 44px */ /* ---- Motion · one easing, four durations. Transform and opacity only. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; /* colour and border shifts */ --dur-press: 160ms; /* control press */ --dur-short: 220ms; /* disclosure */ --dur-long: 420ms; /* the single load fade */ /* ---- Depth · named levels only ---- */ --z-base: 1; --z-sticky-nav: 300; /* ---- Measure ---- */ --measure-prose: 62ch; --measure-lede: 48ch; /* Small print runs wider than body prose because the type is smaller: 74ch at 13px is a shorter physical line than 62ch at 16px. It stays inside the 45–75ch measure band rather than running the full width of the shell. */ --measure-legal: 74ch; --content-max: 72rem; --page-gutter: clamp(1.25rem, 5vw, 5rem); --nav-height: 4rem; } /* ========================================================================== DARK MODE ========================================================================== Rebranded 2026-08-28. Deep green #183630 paper, cream #E3DAC9 ink, gold #E5C690 accent -- the mark's own palette, used at full strength here because gold needs a dark ground (gold on cream is 1.18:1 and unreadable, which is why the light accent above is green instead). Three blocks, deliberately: 1. the media query, guarded with :not([data-theme="light"]) so an explicit light choice still wins over a dark OS; 2. [data-theme="dark"], so an explicit dark choice wins over a light OS; 3. [data-theme="light"] at the foot, restating the light values so the toggle wins in that direction too. Only tokens whose value CHANGES are redefined. Everything else -- type, space, radii, easing, z-index -- is mode-independent and stays on :root. Measured contrast, dark: ink on paper 9.41 AAA · ink on paper-2 7.37 AAA · muted on paper 5.25 AA accent on paper 7.96 AAA · accent-ink on accent 7.96 AAA rule-strong on paper 4.27 (boundary rule, clears the 3:1 non-text floor) ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-paper: oklch(30.8% 0.038 179.0); /* #183630 brand green */ --color-paper-2: oklch(37.0% 0.042 179.0); /* #254740 raised */ --color-ink: oklch(89.1% 0.025 83.4); /* #E3DAC9 · 9.41:1 */ --color-muted: oklch(72.0% 0.022 88.0); /* #AAA495 · 5.25:1 */ --color-rule: oklch(45.0% 0.030 179.0); --color-rule-strong: oklch(66.0% 0.030 179.0); /* 4.27:1 */ --color-accent: oklch(84.0% 0.078 81.1); /* #E5C690 gold · 7.96:1 */ --color-accent-peak: oklch(90.0% 0.068 79.0); --color-accent-deep: oklch(76.0% 0.082 84.0); --color-accent-ink: oklch(30.8% 0.038 179.0); /* green ON gold · 7.96 */ --color-lit-top: oklch(87.0% 0.082 78.0); --color-lit-bottom: oklch(78.0% 0.070 86.0); --color-lit-press: oklch(70.0% 0.060 92.0); --color-shadow-top: oklch(34.0% 0.038 176.0); --color-shadow-bottom:oklch(22.0% 0.024 190.0); --color-wing-start: oklch(26.0% 0.028 186.0); --color-wing-end: oklch(36.0% 0.040 174.0); } } :root[data-theme="dark"] { --color-paper: oklch(30.8% 0.038 179.0); --color-paper-2: oklch(37.0% 0.042 179.0); --color-ink: oklch(89.1% 0.025 83.4); --color-muted: oklch(72.0% 0.022 88.0); --color-rule: oklch(45.0% 0.030 179.0); --color-rule-strong: oklch(66.0% 0.030 179.0); --color-accent: oklch(84.0% 0.078 81.1); --color-accent-peak: oklch(90.0% 0.068 79.0); --color-accent-deep: oklch(76.0% 0.082 84.0); --color-accent-ink: oklch(30.8% 0.038 179.0); --color-lit-top: oklch(87.0% 0.082 78.0); --color-lit-bottom: oklch(78.0% 0.070 86.0); --color-lit-press: oklch(70.0% 0.060 92.0); --color-shadow-top: oklch(34.0% 0.038 176.0); --color-shadow-bottom:oklch(22.0% 0.024 190.0); --color-wing-start: oklch(26.0% 0.028 186.0); --color-wing-end: oklch(36.0% 0.040 174.0); } :root[data-theme="light"] { --color-paper: oklch(93.0% 0.018 84.0); --color-paper-2: oklch(89.1% 0.025 83.4); --color-ink: oklch(30.8% 0.038 179.0); --color-muted: oklch(45.0% 0.030 179.0); --color-rule: oklch(78.0% 0.022 84.0); --color-rule-strong: oklch(54.0% 0.026 84.0); --color-accent: oklch(30.8% 0.038 179.0); --color-accent-peak: oklch(38.0% 0.044 179.0); --color-accent-deep: oklch(24.0% 0.032 179.0); --color-accent-ink: oklch(89.1% 0.025 83.4); --color-lit-top: oklch(38.0% 0.046 176.0); --color-lit-bottom: oklch(29.0% 0.036 184.0); --color-lit-press: oklch(22.0% 0.028 190.0); --color-shadow-top: oklch(88.0% 0.026 84.0); --color-shadow-bottom:oklch(80.0% 0.020 90.0); --color-wing-start: oklch(82.0% 0.020 88.0); --color-wing-end: oklch(90.0% 0.026 82.0); }