/* * SEVEN Works — brand design tokens. * * Served by the core as `/instance-theme.css` (config `theme.stylesheet`) and linked AFTER the * core design tokens, so the values below override the neutral core palette by name. * * Four parts, in this order: * 1. the web fonts: Geist and Geist Mono from the core (next/font), no files of their own; * 2. the brand tokens (`--sw-*`) — verbatim source values and the states derived from them; * 3. the mapping of the brand tokens onto the core design tokens * (app/src/lib/contracts/design-tokens/tokens.css), which is what actually paints the pages; * 4. the quote weight (Geist 300), the one element rule in this file. * * Source colors: brand.json -> colors (Elementor global kit CSS, * wp-content/uploads/elementor/css/post-8.css, .elementor-kit-8). * Derived hover/active/on-dark states and contrast ratios computed in * task C4 (WCAG 2.1 relative-luminance formula); see provenance note * at the end of this file and assets/brand/manifest.json siblings. */ /* ── 1. Web fonts ── * * Geist and Geist Mono come from the CORE (next/font, --font-geist-sans / --font-geist-mono), preloaded and with * a metric-matched fallback. Since core 0.3.3 they carry the latin-ext subset (Czech háček letters), so this package * no longer ships its own woff2 files: a second, late-loading copy re-wrapped text on swap (cookie bar on a 390 px * phone, CLS 0.0103 on every load, 27. 9. 2026 — gone with the web fonts blocked). */ /* ── 2. Brand tokens ── */ :root { /* --- Base brand colors (verbatim from apex brand.json) --- */ --sw-color-primary: #1A1A1A; /* headings, body text on light bg */ --sw-color-secondary: #5F5F5F; /* secondary/muted text on light bg */ --sw-color-text-on-dark: #FAFAFA; /* body/heading text on dark bg */ --sw-color-accent: #4B2C5E; /* links, button borders on light bg */ /* --- Derived accent states (this task, agent-decided) --- */ /* Hover/active: accent darkened for pressed states on light bg. */ --sw-color-accent-hover: #402550; /* accent darkened ~15% */ --sw-color-accent-active: #382146; /* accent darkened ~25% */ /* On-dark variant: accent lightened so it stays readable as link/ button text directly on --sw-color-primary backgrounds (raw accent on primary fails WCAG AA, see contrast table below). */ /* #B2A0BC (27 Sep 2026, was #9C8BA6): the same hue and chroma in OKLCH, lightness 0.661 -> 0.731. #9C8BA6 read 5.52:1 on the page ground but only 4.43:1 on a card (#2C2C2C) and 3.82:1 on the core's tonal buttons (accent 10 % over the card): 37 texts under AA on 10 dark pages, among them the cookie bar's "Accept all". Now 7.17 / 5.75 / 4.83:1. */ --sw-color-accent-on-dark: #B2A0BC; /* --- Glow gradient stops (this task, agent-decided; core: app/src/components/motion/Glow.tsx) --- The core ships the Glow component with a neutral rainbow default; without an instance override it paints Seven Works with that neutral gradient regardless of tone (`ai` or `success`). Both stop sets below are derived, not picked freehand: `ai` (4 stops, --glow-ai-1..4): the exact accent (--sw-color-accent, #4B2C5E, H 277° L 27% S 36%) as the anchor (stop 2), with the other three stops from hue rotations of the SAME color around that anchor (-35°, +28°, +55°) and small lightness/saturation lifts, so the sweep reads as one family — cool blue-violet into the brand purple into warm magenta-rose — instead of the neutral blue/purple/red/orange spread that shares no color with the instance. `success` (--glow-success-strong/-soft, plus -dark for html.dark): one confirmation green (H 148°, a fresh but not saturated hue distinct from the accent) at four L/S points, the same "darken for a strong stop, lighten for a soft one" approach as the accent-hover/-active pair above, with the dark-theme pair re-lifted so the same green still pops on --sw-surface-dark. */ --sw-glow-ai-1: #3E3B8D; /* accent hue -35°, lighter/more saturated: cool blue-violet */ --sw-glow-ai-2: var(--sw-color-accent); /* anchor: the accent verbatim */ --sw-glow-ai-3: #70296A; /* accent hue +28°, slightly darker: magenta-purple */ --sw-glow-ai-4: #7E3557; /* accent hue +55°, lighter: warm rose */ /* The magenta stop lifted for the dark ground, the same way the success pair is lifted below. --sw-glow-ai-3 is 30 % lightness: correct as a glow on white, too dark to read as the pink end of the assistant's gradient on #1A1A1A. Measured: #D07BC4 is H 308 deg, 6.06:1 on the dark surface, and against --sw-color-accent-on-dark (#B2A0BC, H 278 deg) it still reads as a violet-to-pink sweep, which is what the owner asked the presence to be. */ --sw-glow-ai-3-on-dark: #D07BC4; /* The warm rose lifted for the dark ground, for the same reason as the magenta above. */ --sw-glow-ai-4-on-dark: #C97591; --sw-glow-success-strong: #1B7444; /* confirmation green, deep stop (light theme) */ --sw-glow-success-soft: #97D8B5; /* confirmation green, airy stop (light theme) */ --sw-glow-success-strong-dark: #69D39B; /* same hue, lifted so it pops on --sw-surface-dark */ --sw-glow-success-soft-dark: #3E9868; /* same hue, darkened so the soft stop still reads on dark */ /* --- Surfaces --- */ --sw-surface-light: #FAFAFA; --sw-surface-dark: #1A1A1A; /* --- Typography: family stacks --- */ --sw-font-sans: var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sw-font-mono: var(--font-geist-mono), ui-monospace, Menlo, monospace; /* Quotes: Geist Light instead of Roboto Slab (17. 9.): no extra file, same family as the text. */ --sw-font-quote: var(--sw-font-sans); /* Weights per brand.json typography */ --sw-font-weight-heading: 600; /* primary_font usage: nadpisy H1 */ --sw-font-weight-h1: 500; /* heading_sizes_desktop.h1 note "weight 500" */ --sw-font-weight-accent-text: 500; --sw-font-weight-body: 400; --sw-font-weight-quote: 300; /* --- Heading sizes (desktop, verbatim from brand.json heading_sizes_desktop). No mobile sizes were found on the apex source; do not invent them. --- */ --sw-heading-h1-size: 44px; --sw-heading-h2-size: 26px; --sw-heading-h3-size: 20px; --sw-heading-h4-size: 18px; } /* ── 3. Mapping onto the core design tokens ── * * The core paints every page from the names below; the instance only gives them its own values. * `--instance-font-sans` is the hook the core leaves for an instance font * (globals.css: `font-family: var(--instance-font-sans, var(--font-geist-sans))`). * `--accent-cyan` is the core's single action accent: buttons, primary calls to action and links * on the service, price, gallery and block pages all read it, so the brand purple #4B2C5E arrives * everywhere through this one line. Values that the core derives from these names * (`--primary`, `--background`, `--foreground`, `--muted`, `--focus-ring`) follow on their own. */ :root { --instance-font-sans: var(--sw-font-sans); /* The core has no instance hook for mono; its --font-mono (tailwind-theme.css) points at next/font's Geist Mono, which carries only latin. This one adds the latin-ext file for VIN and codes. */ --font-mono: var(--sw-font-mono); --bg-base: var(--sw-surface-light); --text-main: var(--sw-color-primary); --text-muted: var(--sw-color-secondary); --accent-cyan: var(--sw-color-accent); /* Same colour as --accent-cyan as an "R, G, B" triplet, for the core's rgba() call sites. */ --accent-cyan-rgb: 75, 44, 94; --accent-purple: var(--sw-color-accent); --accent-blue: var(--sw-color-accent-hover); --royal-purple: var(--sw-color-accent); --royal-purple-hover: var(--sw-color-accent-hover); --royal-wash: rgba(75, 44, 94, 0.12); /* Pale royal tint. The core ships #c7d2fe here, a lavender that belongs to no palette of ours; this is the same role in the brand family. Used by the Pro app as a light mark on dark, so the light-theme value is a surface tint, not a text colour. */ --royal-muted: #E4DAEA; /* The pink end of the assistant's gradient, and the glow under the AI tile of the header — the core's own default is #e879f9, which is not a colour of this brand. Named here so the presence is brand-coloured in both themes rather than falling through to the core. 9.09:1 on #FAFAFA. */ --accent-fuchsia: var(--sw-glow-ai-3); /* The "saved" state of the wishlist button, and the only place the core asks for a rose. It has to stay a rose — a plum would stop reading as a heart — so it maps to this brand's own warm rose stop rather than to the accent. 7.94:1 on #FAFAFA, where the core default measures 3.52:1. */ --accent-rose: var(--sw-glow-ai-4); --accent-violet-rgb: 75, 44, 94; --surface: #FFFFFF; --surface-soft: #F1F0F3; --surface-panel: #F1F0F3; --primary-foreground: var(--sw-color-text-on-dark); --app-accent: var(--sw-color-accent); /* --- Section tones (shared/ui/SectionFrame.module.css) --- A layout document names a tone (base | alt | accent); the colours behind those three names are decided here, once, for the whole site. Values measured on the prototype at 1440x900: the page itself #FAFAFA (--bg-base), the second surface #F1EDF3 (the tone a section takes where running text is read: the "about us" section and the reviews), and the accent band #4B2C5E with #FAFAFA text (the narrow strip that punctuates the page). The eyebrow is the accent itself, 12px / 600 / .22em uppercase (that part is the frame's, not the instance's). */ --section-tone-alt-bg: #F1EDF3; --section-tone-accent-bg: var(--sw-color-accent); --section-tone-accent-text: var(--sw-color-text-on-dark); --section-eyebrow-color: var(--sw-color-accent); /* Glow (app/src/components/motion/Glow.tsx): the AI-tone gradient and the light-theme success stops. Without these the component falls back to its own neutral defaults (a rainbow unrelated to the instance), which is what Seven Works got until this package set them. */ --glow-ai-1: var(--sw-glow-ai-1); --glow-ai-2: var(--sw-glow-ai-2); --glow-ai-3: var(--sw-glow-ai-3); --glow-ai-4: var(--sw-glow-ai-4); --glow-success-strong: var(--sw-glow-success-strong); --glow-success-soft: var(--sw-glow-success-soft); /* --- Heading scaling (core schema override) --- Decision: uppercase headings with values from prototype (17. 9.): H1 max 54px, H2 max 38px, H3 max 22px, H4 max 18px; weight 600, tracking 0.07em, uppercase transform (per Feynlab pattern). */ --heading-1-max: 3.375rem; --heading-2-max: 2.375rem; --heading-3-max: 1.375rem; --heading-4-max: 1.125rem; --heading-weight: var(--sw-font-weight-heading); --heading-tracking: 0.07em; --heading-transform: uppercase; } /* Narrow phones (below 375px): H1 one pixel smaller (31px instead of the core's 32px minimum). Geist is wider than Roboto (about 3.5 % at weight 400, 8 % at 600), so at a 360px viewport the homepage H1 wrapped to 5 lines instead of 4; 31px brings the 4 lines back. From 375px up the core size applies unchanged, and the 0.07em tracking stays as decided. */ @media (max-width: 374.98px) { :root { --heading-1-size: 1.9375rem; } } html.dark { /* On a dark ground the raw accent fails AA as text (1.51:1), so the lightened variant is used. */ --bg-base: var(--sw-surface-dark); --text-main: var(--sw-color-text-on-dark); /* Was #C6C8D1 until 22. 9. 2026: H 229 deg, a blue-grey that came from us, not from the core — it was part of the blue cast the owner asked to be rid of. #CDC6D2 is H 275 deg, the grey of this brand's own violet. Legibility is unchanged and that is the point: 10.45:1 against #1A1A1A where the old value measured 10.43:1. */ --text-muted: #CDC6D2; --accent-cyan: var(--sw-color-accent-on-dark); --accent-cyan-rgb: 178, 160, 188; --accent-purple: var(--sw-color-accent-on-dark); --accent-blue: var(--sw-color-accent-on-dark); --royal-purple: var(--sw-color-accent-on-dark); --royal-purple-hover: var(--sw-color-accent); --royal-wash: rgba(178, 160, 188, 0.22); --royal-muted: #D9CBE2; /* 11.26:1 on --sw-surface-dark; the Pro app writes with it on dark */ --accent-rose: var(--sw-glow-ai-4-on-dark); /* 5.33:1 on --sw-surface-dark, hue 340 */ --accent-fuchsia: var(--sw-glow-ai-3-on-dark); --accent-violet-rgb: 178, 160, 188; --surface: #232128; --surface-soft: #1F1D23; --surface-panel: #1F1D23; --primary-foreground: var(--sw-surface-dark); --app-accent: var(--sw-color-accent-on-dark); /* Section tones on the dark ground. The light pair is #FAFAFA / #F1EDF3 — the second surface is the page with about 8 % of the brand purple mixed in; the dark pair is derived the same way from --sw-surface-dark and the AA-safe lightened accent, so the step between the two surfaces reads the same in both themes. The band keeps the raw accent: it is a surface there, not text. */ --section-tone-alt-bg: color-mix(in srgb, var(--sw-color-accent-on-dark) 8%, var(--sw-surface-dark)); --section-tone-accent-bg: var(--sw-color-accent); --section-tone-accent-text: var(--sw-color-text-on-dark); --section-eyebrow-color: var(--sw-color-accent-on-dark); /* Glow success stops for html.dark (Glow.module.css has its own :global(html.dark) rule for tone "success"; the AI tone has no dark override in the core, so --glow-ai-1..4 above cover both themes). */ --glow-success-strong-dark: var(--sw-glow-success-strong-dark); --glow-success-soft-dark: var(--sw-glow-success-soft-dark); } /* * Contrast table (WCAG 2.1, sRGB relative luminance; computed in this * task, not sourced from apex): * * --sw-color-primary on --sw-surface-light : 16.67:1 (AA & AAA pass, normal + large text) * --sw-color-secondary on --sw-surface-light : 6.12:1 (AA pass normal+large; AAA pass normal text >=7 fails by 0.88, AAA large passes) * --sw-color-accent on --sw-surface-light : 11.05:1 (AA & AAA pass) * --sw-color-text-on-dark on --sw-surface-dark : 16.67:1 (AA & AAA pass) * --sw-color-accent on --sw-surface-dark : 1.51:1 (FAIL — do not use raw accent as text/link color on dark bg) * --sw-color-accent-on-dark on --sw-surface-dark : 7.17:1 (AA pass normal+large text; use this token instead of raw accent on dark bg) * --sw-color-accent-on-dark on a dark card #2C2C2C: 5.75:1 (AA pass) * --sw-color-accent-on-dark on its own 10 % tonal fill over a card : 4.83:1 (AA pass; the 20 % hover fill is 4.02:1 — * large text only; the core's tonal hover is asked to keep the rest contrast) * --sw-color-accent-hover on --sw-surface-light : 12.59:1 (AA & AAA pass) * --sw-color-accent-active on --sw-surface-light : 13.65:1 (AA & AAA pass) * * WCAG AA thresholds: 4.5:1 normal text, 3.0:1 large text (>=24px, or * >=19px bold) and UI components/graphical objects. * * White text on --sw-color-accent (the primary button: --primary-foreground on --accent-cyan) * is 11.05:1 by the same formula, so the call-to-action reads AA and AAA. */ /* ── 4. Quotes ── * Quotes (rich-text blocks, education articles) are
in the core and read no font token, * so the Geist Light choice is applied here. :where() keeps the specificity at zero. */ :where(blockquote) { font-family: var(--sw-font-quote); font-weight: var(--sw-font-weight-quote); }