/* ========================================================================== IMS Services — design tokens The single source of visual truth. Nothing downstream hard-codes a value. Palette provenance: navy, teal and cyan are read directly out of the brand logo SVG (rgb(7,53,103) / rgb(3,134,158) / rgb(26,199,198)). They are not eyeballed approximations. Colour discipline, deliberate: - Navy is ink and ground. It carries the weight. - Teal is structure. Borders, rules, secondary marks. - Cyan is SIGNAL ONLY. Live state, active nav, focus, the moving pulse. If cyan appears on something static and inert, that is a bug. ========================================================================== */ :root { /* ---- Brand, straight from the logo ---------------------------------- */ --ims-navy: #073567; --ims-teal: #03869E; --ims-cyan: #1AC7C6; /* ---- Navy ramp ------------------------------------------------------- */ --ims-navy-950: #02142B; /* deepest ground, hero + contact fields */ --ims-navy-900: #041F3E; --ims-navy-800: #073567; /* = brand navy */ --ims-navy-700: #0B4A85; --ims-navy-600: #14639F; /* ---- Teal / cyan ramp ------------------------------------------------ */ --ims-teal-700: #026B7E; --ims-teal-600: #03869E; /* = brand teal */ --ims-teal-500: #0CA0AE; /* logo gradient stop */ --ims-cyan-500: #14B7BC; /* logo gradient stop */ --ims-cyan-400: #1AC7C6; /* = brand cyan */ --ims-cyan-300: #5CD8D7; --ims-cyan-200: #8FE3E2; --ims-cyan-100: #C8F2F1; /* ---- Neutrals, blue-cast so they sit with the brand ------------------ */ --ims-ink: #0E1B2A; /* body text */ --ims-ink-mid: #47596B; /* secondary text */ --ims-ink-soft: #6E7F8F; /* captions, meta */ --ims-line: #D9E3EB; /* hairlines on light */ --ims-mist-100: #EDF3F8; /* pale ground, alternating sections */ --ims-mist-50: #F6FAFC; --ims-white: #FFFFFF; /* ---- On-dark text ---------------------------------------------------- */ --ims-on-dark: #EAF3F8; --ims-on-dark-mid: #A7BFD2; --ims-on-dark-soft: #7593AC; --ims-line-dark: rgba(143, 227, 226, 0.18); /* ---- Semantic slots. Components reference these, not the ramps. ------ */ --ims-bg: var(--ims-white); --ims-bg-alt: var(--ims-mist-100); --ims-bg-deep: var(--ims-navy-950); --ims-text: var(--ims-ink); --ims-text-mid: var(--ims-ink-mid); --ims-accent: var(--ims-teal-600); --ims-signal: var(--ims-cyan-400); --ims-border: var(--ims-line); --ims-focus: var(--ims-cyan-400); --ims-focus-dark: var(--ims-navy-800); --ims-danger: #B4283C; --ims-success: var(--ims-teal-600); /* ---- Type families --------------------------------------------------- Archivo is a variable grotesque with a genuine width axis. Display type is set expanded (~115%) to echo the wide, squared proportions of the IMS wordmark; body Archivo is never used, so the two never compete. IBM Plex Sans carries the humanist warmth that keeps a small local operator from reading as cold enterprise. Plex Mono is the utility voice: eyebrows, labels, and the annotations on the topology. -------------------------------------------------------------------- */ --ims-font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif; --ims-font-body: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif; --ims-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --ims-display-stretch: 112%; /* ---- Fluid type scale ------------------------------------------------ */ /* Stepped down from a 5.25rem cap to make room for the logo now sitting above it in the hero. The logo carries the brand at the top of the page, so the headline no longer has to shout to establish it. */ --ims-fs-display: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem); --ims-fs-h1: clamp(2.25rem, 1.5rem + 3.1vw, 4rem); --ims-fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); --ims-fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); --ims-fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --ims-fs-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem); --ims-fs-body: 1rem; --ims-fs-sm: 0.9375rem; --ims-fs-xs: 0.8125rem; --ims-fs-label: 0.75rem; --ims-lh-tight: 1.04; --ims-lh-snug: 1.18; --ims-lh-normal: 1.5; --ims-lh-relaxed: 1.68; --ims-ls-display: -0.028em; --ims-ls-heading: -0.018em; --ims-ls-label: 0.14em; /* ---- Spacing, 4px base ----------------------------------------------- */ --ims-sp-1: 0.25rem; --ims-sp-2: 0.5rem; --ims-sp-3: 0.75rem; --ims-sp-4: 1rem; --ims-sp-5: 1.5rem; --ims-sp-6: 2rem; --ims-sp-7: 2.5rem; --ims-sp-8: 3rem; --ims-sp-9: 4rem; --ims-sp-10: 5rem; --ims-sp-11: 6.5rem; --ims-sp-12: 8rem; --ims-section-y: clamp(4rem, 2.5rem + 6vw, 8rem); --ims-section-y-lg: clamp(5rem, 3rem + 8vw, 11rem); /* ---- Shell ----------------------------------------------------------- */ --ims-shell: 76rem; --ims-shell-narrow: 46rem; --ims-shell-wide: 88rem; --ims-gutter: clamp(1.25rem, 0.75rem + 2.2vw, 3rem); /* ---- Radii. Kept tight; the wordmark is squared, not rounded. -------- */ --ims-r-xs: 3px; --ims-r-sm: 5px; --ims-r-md: 8px; --ims-r-lg: 14px; --ims-r-full: 999px; /* ---- Elevation. Tinted navy, never neutral black. -------------------- */ --ims-shadow-sm: 0 1px 2px rgba(7, 53, 103, 0.06), 0 2px 6px rgba(7, 53, 103, 0.05); --ims-shadow-md: 0 2px 4px rgba(7, 53, 103, 0.05), 0 8px 22px rgba(7, 53, 103, 0.09); --ims-shadow-lg: 0 4px 10px rgba(7, 53, 103, 0.06), 0 20px 48px rgba(7, 53, 103, 0.13); --ims-glow: 0 0 0 1px rgba(26, 199, 198, 0.4), 0 0 22px rgba(26, 199, 198, 0.22); /* ---- Motion ---------------------------------------------------------- One easing for entrances, one for exits, one spring for hover lift. Durations stay short; the only slow thing on the site is the hero signal pulse, which is slow on purpose. -------------------------------------------------------------------- */ --ims-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ims-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ims-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ims-dur-fast: 140ms; --ims-dur-base: 240ms; --ims-dur-slow: 480ms; --ims-dur-reveal: 620ms; --ims-dur-pulse: 8s; /* hero topology signal, deliberately slow */ --ims-z-base: 1; --ims-z-raised: 10; --ims-z-header: 100; --ims-z-overlay: 500; --ims-z-modal: 1000; } /* Dark sections retarget the semantic slots rather than overriding every component. Anything inside .ims-deep inherits correct colours for free. */ .ims-deep { --ims-bg: var(--ims-navy-950); --ims-bg-alt: var(--ims-navy-900); --ims-text: var(--ims-on-dark); --ims-text-mid:var(--ims-on-dark-mid); --ims-border: var(--ims-line-dark); --ims-accent: var(--ims-cyan-300); background-color: var(--ims-bg); color: var(--ims-text); } @media (prefers-reduced-motion: reduce) { :root { --ims-dur-fast: 1ms; --ims-dur-base: 1ms; --ims-dur-slow: 1ms; --ims-dur-reveal: 1ms; --ims-dur-pulse: 1ms; } }