/* ========================================================================== SENTRIX SMART SYSTEMS — DESIGN TOKENS Single source of truth for colour, type, space, radius, motion. Change a value here and it propagates across every page. ========================================================================== */ :root { /* ---------- COLOUR: ARCHITECTURAL DARK SPINE ------------------------- A restrained navy, not a saturated brand blue. Luxury here comes from depth and restraint: the three surfaces sit close together so the page reads as one material with subtle elevation, rather than as blocks of colour competing for attention. --surface-deep #07111F primary background #F4F6F8 17.06:1 --surface-mid #0C1929 diagram stage, frost #F4F6F8 15.31:1 --surface-low #101F31 elevated cards #F4F6F8 13.72:1 Card-to-section separation is deliberately slight. A hairline border does the rest of the work, the way a reveal does in architecture. */ --surface-deep: #07111f; --surface-mid: #0c1929; --surface-low: #101f31; /* RGB triplet for photo scrims, so overlays tint deep navy, not grey. */ --scrim-rgb: 7, 17, 31; /* ---------- COLOUR: LIGHT SURFACES ----------------------------------- The interface is now mostly light. White is the ground; the two greys are for separation, not decoration. Navy is reserved for the moments that earn it, which is the only reason it reads as dramatic. --white #FFFFFF primary background --paper #F5F5F7 secondary background, soft card surface --surface-soft #F8F9FA soft architectural background */ --white: #ffffff; --paper: #f5f5f7; --surface-soft: #f8f9fa; /* Retained so existing rules keep resolving; now simply white. */ --warm-white: #ffffff; /* ---------- COLOUR: INK ---------------------------------------------- Neutral greys rather than blue-tinted ones: on a mostly white page a tinted text colour reads as a colour choice, and the point here is that the type looks like nothing at all. Measured, not eyeballed. */ --ink-900: #1d1d1f; /* headings/body on light — 17.24:1 on white */ --ink-400: #6e6e73; /* secondary copy — 5.07:1 on white, 4.66:1 on --paper */ /* Subtle text shares the secondary value: anything lighter drops under 4.5:1 on white (#7a7a80 measures 4.27:1), and legibility wins. */ --ink-350-on-light: #6e6e73; --ink-350-on-dark: #8e9bab; /* 6.70:1 on --surface-deep */ --ink-300: #a8b3c2; /* secondary text on dark — 8.96:1 on --surface-deep */ --ink-200: #c3ccd8; /* links on dark — 11.62:1 on --surface-deep */ --ink-100: #dce2ea; --ink-050: #edf0f4; /* ---------- COLOUR: RESTRAINED ACCENT -------------------------------- #6F8FAF is the brand accent: a muted architectural slate-blue. It is used for eyebrows, hairlines, diagram routing and small marks — never as a large fill, which is what turns a site into a "blue interface". Three roles, because one value cannot clear 4.5:1 everywhere: --blue-bright accent as TEXT on dark 5.62:1 on --surface-deep --blue-ink accent as TEXT on light 6.61:1 on --paper --blue a deep FILL for buttons 14.83:1 with white text The fill is deliberately near-black navy rather than the accent itself: a #6F8FAF button with white text measures 3.38:1 and fails. */ --blue-bright: #6f8faf; --blue: #07111f; /* filled-button ground — 17.06:1 with white */ --blue-ink: #3e5a78; /* accent as a link on light — 7.16:1 on white */ --blue-deep: #0c1929; --blue-wash: rgba(111, 143, 175, 0.08); --blue-line: rgba(111, 143, 175, 0.28); /* ---------- SEMANTIC: LIGHT SURFACE (default) ------------------------ White ground, soft grey cards, borders that are almost not there. */ --bg: var(--white); --bg-raised: var(--paper); --fg: var(--ink-900); --fg-muted: var(--ink-400); --fg-subtle: var(--ink-350-on-light); --rule: rgba(0, 0, 0, 0.08); --rule-strong: rgba(0, 0, 0, 0.14); --card-border: transparent; --accent: var(--blue-ink); --accent-solid: var(--blue); --card: var(--paper); --card-fg: var(--ink-900); /* ---------- TYPE ------------------------------------------------------ Manrope carries display + body (weight/size contrast does the work, the way a system face does). JetBrains Mono is the technical annotation voice: spec numbers, node labels, eyebrows. */ --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: var(--font-display); --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Fluid type scale — clamp(min, preferred, max). Pulled back from the previous scale: editorial confidence reads as restraint, and type that fills the viewport reads as shouting. */ /* Display type tops out at 96px and body sits at 17–21px. Large type is for the moments that deserve it, not for every heading — which is what keeps the big statements feeling like statements. */ --t-hero: clamp(2.75rem, 6.4vw, 6rem); /* 44 → 96px */ --t-display: clamp(2.25rem, 4.8vw, 4.5rem); /* 36 → 72px */ --t-h1: clamp(2rem, 3.9vw, 3.5rem); /* 32 → 56px */ --t-h2: clamp(1.6rem, 2.9vw, 2.375rem); --t-h3: clamp(1.25rem, 1.9vw, 1.5rem); --t-h4: clamp(1.09rem, 1.4vw, 1.25rem); --t-lead: clamp(1.125rem, 1.55vw, 1.3125rem); /* 18 → 21px */ --t-body: clamp(1.0625rem, 1.15vw, 1.125rem); /* 17 → 18px */ --t-small: 0.9375rem; --t-micro: 0.8125rem; --t-nano: 0.6875rem; --lh-tight: 1.04; --lh-snug: 1.1; --lh-heading: 1.14; --lh-body: 1.65; --lh-loose: 1.75; --tr-hero: -0.035em; /* large type needs negative tracking */ --tr-display: -0.028em; --tr-heading: -0.018em; --tr-body: -0.003em; --tr-mono: 0.14em; /* eyebrow tracking — brief calls for 0.12–0.16em */ /* ---------- SPACE ----------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; /* Section rhythm scales with viewport so mobile isn't a squashed desktop. The desktop band lands at roughly 100–160px: spacious enough to feel considered, short enough that the page still scans quickly. Past this, whitespace stops reading as luxury and starts reading as empty. */ --section-y: clamp(5rem, 9vw, 10.5rem); --section-y-tight: clamp(3.25rem, 6vw, 7rem); --gutter: clamp(1.25rem, 4.2vw, 3.5rem); --maxw: 1320px; --maxw-narrow: 760px; --maxw-mid: 980px; /* ---------- RADIUS --------------------------------------------------- Soft, not sharp. Cards land at 16px — enough to feel tactile and approachable rather than like a technical panel, restrained enough to stay architectural. Buttons stay tighter so they read as controls. The pill survives for small capability chips, which are labels. */ --r-xs: 10px; /* buttons and other controls */ --r-sm: 12px; /* form fields */ --r-md: 14px; --r-lg: 20px; /* cards — soft surfaces, not containers */ --r-xl: 22px; --r-2xl: 26px; --r-hero: 26px; --r-pill: 999px; /* ---------- ELEVATION ------------------------------------------------ Gentle depth, never a drop shadow that announces itself. A light card sits a millimetre off the page, and lifts perhaps another on hover. */ --shadow-sm: 0 1px 2px rgba(20, 33, 49, 0.04), 0 1px 3px rgba(20, 33, 49, 0.03); --shadow-md: 0 2px 4px rgba(20, 33, 49, 0.04), 0 8px 20px rgba(20, 33, 49, 0.06); --shadow-lg: 0 2px 6px rgba(20, 33, 49, 0.05), 0 16px 40px rgba(20, 33, 49, 0.09); /* Kept for compatibility; deliberately no longer a coloured glow. */ --shadow-blue: 0 8px 24px rgba(20, 33, 49, 0.14); /* ---------- MOTION --------------------------------------------------- One easing system across the whole site: decisive out, gentle settle. No bounce, no elastic, nothing that draws attention to itself. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --d-fast: 180ms; --d-base: 320ms; --d-slow: 620ms; --d-reveal: 900ms; /* Multiplier zeroed out under prefers-reduced-motion. */ --motion: 1; --nav-h: 76px; --nav-h-scrolled: 60px; /* Film grain, applied over large dark surfaces at ~1.5% so it reads as material rather than as an effect. See "FILM GRAIN" in sentrix.css. */ --grain-opacity: 0.015; } /* ========================================================================== DARK SURFACE Applied per-section, not per-page — the site alternates light/dark to create rhythm. Any element inside inherits the correct semantics. ========================================================================== */ .surface-dark { --bg: var(--surface-deep); --bg-raised: var(--surface-low); --fg: #f4f6f8; --fg-muted: var(--ink-300); --fg-subtle: var(--ink-350-on-dark); --rule: rgba(255, 255, 255, 0.10); --rule-strong: rgba(255, 255, 255, 0.20); --card-border: rgba(255, 255, 255, 0.08); /* The slate accent holds up on the dark surfaces (5.62:1 on the section background, 4.97:1 on a card), so it stays itself here rather than being replaced by a pale tint. */ --accent: var(--blue-bright); --accent-solid: #f4f6f8; --blue-wash: rgba(255, 255, 255, 0.06); --blue-line: rgba(255, 255, 255, 0.22); --card: var(--surface-low); --card-fg: #f4f6f8; background: var(--bg); color: var(--fg); } /* Secondary background. Cards on it step up to white so they still read as surfaces without needing a border drawn around them. */ .surface-light { --bg: var(--paper); --bg-raised: var(--white); --fg: var(--ink-900); --fg-muted: var(--ink-400); --fg-subtle: var(--ink-350-on-light); --rule: rgba(0, 0, 0, 0.08); --rule-strong: rgba(0, 0, 0, 0.14); --card-border: transparent; --accent: var(--blue-ink); --accent-solid: var(--blue); --card: var(--white); --card-fg: var(--ink-900); background: var(--bg); color: var(--fg); } /* The primary white ground. */ .surface-white { --bg: var(--white); --bg-raised: var(--paper); --fg: var(--ink-900); --fg-muted: var(--ink-400); --fg-subtle: var(--ink-350-on-light); --rule: rgba(0, 0, 0, 0.08); --rule-strong: rgba(0, 0, 0, 0.14); --card-border: transparent; --accent: var(--blue-ink); --accent-solid: var(--blue); --card: var(--paper); --card-fg: var(--ink-900); background: var(--bg); color: var(--fg); } /* Soft architectural background — a barely-there step off white, for sections that want separation without a colour change. */ .surface-soft { --bg: var(--surface-soft); --bg-raised: var(--white); --fg: var(--ink-900); --fg-muted: var(--ink-400); --fg-subtle: var(--ink-350-on-light); --rule: rgba(0, 0, 0, 0.08); --rule-strong: rgba(0, 0, 0, 0.14); --card-border: transparent; --accent: var(--blue-ink); --accent-solid: var(--blue); --card: var(--white); --card-fg: var(--ink-900); background: var(--bg); color: var(--fg); } /* ========================================================================== REDUCED MOTION Zeroes the motion multiplier and collapses transitions. Scroll-revealed content is forced to its final visible state so nothing is ever hidden. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion: 0; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } }