/* ========================================================================== Code-Inspect design system 1. Tokens 2. Reset & base 3. Layout primitives 4. Typography & prose 5. Buttons & links 6. Header, navigation, drawer 7. Hero & decoration 8. Sections & components 9. Forms & contact 10. Footer 11. Blog & utilities 12. Page sections — glance band, panels, tabs, quote 13. Figures, bands and the long-page kit 14. Dark mode — structural adjustments 15. Motion & reduced motion ========================================================================== */ /* 1. Tokens ========================================================================== */ :root { color-scheme: light; /* Brand — overridden inline by the Customizer, shared by both modes. */ --ci-brand: #1d3fa0; --ci-accent: #22c7e8; --ci-ink: #0a1733; /* Derived brand ramp. */ --ci-brand-700: color-mix(in srgb, var(--ci-brand) 82%, #000); --ci-brand-600: var(--ci-brand); /* Never flips. Use for brand text on a surface that is white in BOTH modes (the white .ci-btn--light on a dark band), and for a brand FILL on a surface that is dark in both modes. */ --ci-brand-dark: color-mix(in srgb, var(--ci-brand) 82%, #000); /* Hover fill under white text. Darkens in light, LIGHTENS in dark, so the hover always advances towards the viewer. Distinct from --ci-brand-700, which is also used as a foreground and must lighten in dark. */ --ci-btn-fill-hover: var(--ci-brand-700); --ci-brand-500: color-mix(in srgb, var(--ci-brand) 84%, #fff); --ci-brand-100: color-mix(in srgb, var(--ci-brand) 12%, #fff); --ci-brand-050: color-mix(in srgb, var(--ci-brand) 6%, #fff); /* Brand as a FOREGROUND (links, glyphs). Split from the fill above because the raw brand is too dark to read on a dark surface. */ --ci-brand-fg: var(--ci-brand-600); /* Text/glyphs sitting ON a brand fill. */ --ci-on-brand: #ffffff; --ci-ink-900: color-mix(in srgb, var(--ci-ink) 92%, #000); --ci-ink-800: var(--ci-ink); --ci-ink-700: color-mix(in srgb, var(--ci-ink) 88%, var(--ci-brand)); /* Hairline between two adjacent dark bands, and under the ink band. */ --ci-band-edge: rgba(10, 23, 51, .14); /* Neutrals. */ --ci-text: #10192c; --ci-text-2: #44536c; --ci-text-3: #596880; --ci-line: #e3e8f0; --ci-line-2: #eef2f7; --ci-paper: #ffffff; --ci-paper-2: #f6f8fc; --ci-paper-3: #eef3f9; /* Section bands. A separate role from --ci-paper-2, which also fills cards, fields and drawer rows -- which is why the band could never be darkened before without darkening every component with it. At #edf1f8 the band sits 1.13:1 against the page, roughly twice the step it had, and --ci-text-3 still clears AA on it at 5.07:1. The hairline does the rest of the work. */ --ci-band: #edf1f8; --ci-band-line: #dfe5ef; /* Raised surfaces: cards, popovers, the drawer, the form card. */ --ci-raised: #ffffff; /* Border on a surface that already has one in light mode. */ --ci-elev-bd: var(--ci-line); /* Border on a surface that has none in light mode. */ --ci-elev-bd-soft: transparent; --ci-hover-surface: var(--ci-raised); /* Border a clickable surface takes on hover, and the hairline on an icon chip. One value each, so "this is clickable" looks the same on every box on the site. */ --ci-surface-bd-hover: color-mix(in srgb, var(--ci-brand) 34%, var(--ci-line)); --ci-chip-bd: color-mix(in srgb, var(--ci-brand) 14%, transparent); /* The one horizontal nudge: an icon moving in the direction of travel. There were four distances for this single gesture -- 3px, 4px (three identical copies) and 5px. */ --ci-nudge: 4px; --ci-quote-rule: var(--ci-brand-600); --ci-scrim: rgba(6, 14, 32, .55); --ci-drawer-bg: var(--ci-raised); --ci-drawer-bd: transparent; /* Persistent selected state (form chips). Must stay legible as a FILL. */ --ci-chip-on: var(--ci-brand-600); --ci-chip-on-fg: var(--ci-on-brand); /* Switch knob + a 0/1 flag so the toggle's resting position is CSS-driven and correct on the first paint, instead of being set by JS afterwards. */ --ci-switch-thumb: #ffffff; --ci-hero-bg: radial-gradient(78% 52% at 78% -16%, color-mix(in srgb, var(--ci-accent) 26%, transparent), transparent 62%), radial-gradient(64% 46% at 8% 4%, color-mix(in srgb, var(--ci-brand) 62%, transparent), transparent 66%), linear-gradient(165deg, var(--ci-ink-700) 0%, var(--ci-ink-900) 100%); /* The closing CTA is a permanently dark band, so its fill must not follow --ci-brand-700 (which lightens in dark for its foreground role). */ --ci-closing-bg: radial-gradient(700px 340px at 85% 10%, color-mix(in srgb, var(--ci-accent) 32%, transparent), transparent 65%), linear-gradient(140deg, var(--ci-brand-dark), var(--ci-ink-900)); /* Translucent chrome. */ --ci-header-bg: rgba(255, 255, 255, .86); --ci-header-sh: 0 6px 24px -14px rgba(10, 23, 51, .3); --ci-drawer-sh: -20px 0 60px -20px rgba(10, 23, 51, .45); /* Form fields. */ --ci-field-bg: var(--ci-paper-2); --ci-field-bg-focus: #ffffff; --ci-control-accent: var(--ci-brand-600); /* Semantic state. */ --ci-danger: #c2353b; --ci-danger-bg: #fff6f6; --ci-success: #127049; --ci-success-fg: #0d5c3c; --ci-success-bg: color-mix(in srgb, #127049 8%, #fff); --ci-success-line: color-mix(in srgb, #127049 25%, #fff); /* On a permanently dark band (hero, ink section, footer, closing CTA). These keep their values in both modes — the bands stay dark. */ --ci-on-dark: #f3f6fb; --ci-on-dark-2: #b9c6dd; --ci-on-dark-3: #8e9dba; --ci-on-dark-line: rgba(255, 255, 255, .13); /* Fills for a surface ON a permanently dark band. Two rungs, so the five hand-written white alphas section 13 started with have somewhere to go. */ --ci-on-dark-fill: rgba(255, 255, 255, .06); --ci-on-dark-fill-2: rgba(255, 255, 255, .1); --ci-decor-grid: rgba(255, 255, 255, .045); --ci-decor-orb-o: .5; /* Media treatment. */ --ci-media-filter: none; --ci-map-filter: grayscale(.25) contrast(1.05); /* ---- Dark palette values. Defined once here, switched on below. ------- */ --ci-d-paper: #0c1016; --ci-d-paper-2: #12171f; /* Dark band lifts only 1.04:1 above the page, deliberately: --ci-raised (#161c25) must still read as lifted ABOVE the band, and at #10151d it clears it by 1.07:1. Any darker a band and cards would sink into it. */ --ci-d-band: #10151d; --ci-d-paper-3: #1a212b; --ci-d-raised: #161c25; --ci-d-scrim: rgba(0, 0, 0, .66); --ci-d-drawer-bg: #1a212b; --ci-d-drawer-bd: rgba(255, 255, 255, .34); --ci-d-switch-thumb: #aab5c6; --ci-d-closing-bg: radial-gradient(700px 340px at 85% 10%, color-mix(in srgb, var(--ci-accent) 24%, transparent), transparent 65%), linear-gradient(140deg, #1b2d5a, #0f1931); --ci-d-elev-bd: rgba(255, 255, 255, .09); --ci-d-surface-bd-hover: color-mix(in srgb, var(--ci-brand) 46%, rgba(255, 255, 255, .22)); --ci-d-chip-bd: rgba(255, 255, 255, .12); --ci-d-elev-bd-soft: rgba(255, 255, 255, .08); --ci-d-hover-surface: #1d242f; --ci-d-hero-bg: radial-gradient(78% 52% at 78% -16%, color-mix(in srgb, var(--ci-accent) 20%, transparent), transparent 62%), radial-gradient(64% 46% at 8% 4%, color-mix(in srgb, var(--ci-brand) 46%, transparent), transparent 66%), linear-gradient(165deg, #1b2d5a 0%, #0f1931 100%); --ci-d-text: #e8ecf3; --ci-d-text-2: #aab5c6; --ci-d-text-3: #8290a4; --ci-d-line: rgba(255, 255, 255, .11); --ci-d-line-2: rgba(255, 255, 255, .06); /* Bands lift ABOVE the page in dark mode so the hierarchy survives. */ --ci-d-ink-700: #1b2d5a; --ci-d-ink-800: #15233f; --ci-d-ink-900: #111b33; --ci-d-band-edge: rgba(255, 255, 255, .09); --ci-d-brand-700: color-mix(in srgb, var(--ci-brand) 70%, #fff); --ci-d-brand-fg: color-mix(in srgb, var(--ci-brand) 52%, #fff); --ci-d-brand-100: color-mix(in srgb, var(--ci-brand) 32%, #202836); --ci-d-brand-050: color-mix(in srgb, var(--ci-brand) 20%, #141a24); --ci-d-header-bg: rgba(12, 16, 22, .82); --ci-d-header-sh: 0 6px 24px -14px rgba(0, 0, 0, .8); --ci-d-drawer-sh: -20px 0 60px -20px rgba(0, 0, 0, .75); --ci-d-field-bg: #131922; --ci-d-field-bg-focus: #1b2432; --ci-d-danger: #ff8f95; --ci-d-danger-bg: #2b1418; --ci-d-success: #4ade9b; --ci-d-success-fg: #7ff0bb; --ci-d-success-bg: #0f2a1f; --ci-d-success-line: rgba(74, 222, 155, .3); /* The wash is a brand tint, not a neutral, so it needs its own strength in dark: 7% of the brand over a near-black page is invisible. */ --ci-d-fig-wash: color-mix(in srgb, var(--ci-brand) 34%, transparent); --ci-d-fig-accent: var(--ci-brand-fg); --ci-d-fig-on-accent: #0c1016; --ci-d-tint: #141b25; --ci-d-tint-line: rgba(255, 255, 255, .1); --ci-d-focus: var(--ci-accent); --ci-d-sh-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35); --ci-d-sh-2: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -8px rgba(0, 0, 0, .6); --ci-d-sh-3: 0 24px 60px -18px rgba(0, 0, 0, .8); --ci-d-sh-brand: 0 10px 28px -14px color-mix(in srgb, var(--ci-brand) 75%, transparent); /* Type. */ --ci-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ci-font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ci-fs-eyebrow: .75rem; --ci-fs-sm: .875rem; --ci-fs-base: 1rem; --ci-fs-lead: clamp(1.0625rem, .98rem + .36vw, 1.25rem); --ci-fs-h3: clamp(1.125rem, 1.06rem + .28vw, 1.3125rem); --ci-fs-h2: clamp(1.75rem, 1.42rem + 1.45vw, 2.75rem); --ci-fs-h1: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem); --ci-fs-hero: clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem); /* Space. */ --ci-gap: 1.5rem; --ci-gap-lg: clamp(1.5rem, 1rem + 3vw, 3.5rem); --ci-section-y: clamp(3.5rem, 2.2rem + 5.2vw, 7rem); --ci-wrap: 1240px; --ci-wrap-pad: clamp(1.125rem, .55rem + 2.2vw, 2.5rem); /* Inset. Four rungs, and every padded box takes one of them. Before this there were forty-one distinct padding declarations and six container clamps that each grew at a different rate, which is why nothing lined up on a wide screen: two cards side by side were inset 1.6rem and 1.5rem, and the four feature panels a visitor meets in sequence all widened at different speeds. The two clamps share a growth rate on purpose. */ --ci-pad-sm: 1rem 1.15rem; --ci-pad: 1.5rem; --ci-pad-lg: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); --ci-pad-xl: clamp(2.25rem, 1.6rem + 3vw, 4rem); /* Shape. Four rungs and nothing else: every corner in the theme is one of these, a pill (999px) or a circle. Before this there were sixteen distinct radii, which is what made the system read as assembled. */ --ci-r-xs: 6px; --ci-r-sm: 10px; --ci-r: 16px; --ci-r-lg: 24px; /* Icon chips. Three sizes, one radius rule: sm and md take --ci-r-sm, lg takes --ci-r. Before this there were thirteen distinct sizes. */ --ci-chip-sm: 36px; --ci-chip-md: 44px; --ci-chip-lg: 56px; /* Elevation. */ --ci-sh-1: 0 1px 2px rgba(10, 23, 51, .05), 0 2px 8px rgba(10, 23, 51, .04); --ci-sh-2: 0 2px 4px rgba(10, 23, 51, .05), 0 12px 28px -8px rgba(10, 23, 51, .12); --ci-sh-3: 0 24px 60px -18px rgba(10, 23, 51, .28); --ci-sh-brand: 0 14px 32px -12px color-mix(in srgb, var(--ci-brand) 55%, transparent); /* Motion. --ci-ease is the interface curve: a state flipping under the pointer. --ci-ease-out is the arrival curve, fast then settling, for anything entering the page. --ci-enter is an alias so entrance rules read as what they do; it is deliberately the SAME curve rather than a second one, because two arrival curves is how a site stops having one hand. */ --ci-ease: cubic-bezier(.22, .68, .36, 1); --ci-ease-out: cubic-bezier(.16, 1, .3, 1); --ci-enter: var(--ci-ease-out); --ci-dur: .34s; /* The motion scale. Four steps, chosen by how far the thing travels and how much of the page it is, so a chip and a whole band never share a duration. Anything outside this set is a one-off that has to justify itself in a comment. */ /* There is no entrance step below --ci-m-md on purpose. A state changing under the pointer is --ci-dur above, and adding a second token for the same role is how a system ends up with two answers to one question. */ --ci-m-md: .42s; /* one element arriving */ --ci-m-lg: .62s; /* a band arriving */ /* A diagram drawing itself. This one is a budget, not a taste: the whole figure finishes at --fig-d + this, and the reveal fires when the band crosses 88% of the viewport — so the diagram is at the very bottom of the screen when it starts. Much past .9s and a reader scrolling at a normal pace arrives at a half-built picture. */ --ci-m-xl: .9s; /* The two entrance distances, and the one stagger step. Grids multiply the step by a capped index (see ci_reveal()), so the tail of a twelve-card grid cannot run past ~.4s however long the grid gets. */ --ci-rise: 20px; --ci-glide: 30px; --ci-stagger: 55ms; /* The INTERACTION step, for groups that arrive inside a control the reader has just opened -- a menu's rows, a drawer's three parts. Separate from --ci-stagger because the budgets differ: a page band can afford 55ms between items because the reader is watching the page assemble, while a menu has to be finished before the pointer reaches the row it came for. Every interaction delay in the file is an integer multiple of this. */ --ci-stagger-tight: 30ms; /* Diagram figures. One stroke weight and one label scale across all twelve, so a diagram drawn for DevOps and one drawn for compliance read as the same hand. Everything resolves through the neutrals and the brand, so a Customizer brand change re-tints every figure with no second asset. */ --ci-fig-ink: var(--ci-text-2); --ci-fig-line: var(--ci-line); --ci-fig-wash: color-mix(in srgb, var(--ci-brand) 7%, transparent); --ci-fig-accent: var(--ci-brand-600); --ci-fig-on-accent: var(--ci-on-brand); --ci-fig-label: var(--ci-text-3); --ci-fig-label-strong: var(--ci-text); --ci-fig-stroke: 1.5px; /* A fifth surface step. --ci-band separates two bands; --ci-tint is for a band that has to read as a deliberate interruption rather than as the next paragraph -- the problem statement, the mid-page CTA. */ --ci-tint: color-mix(in srgb, var(--ci-brand) 8%, var(--ci-paper)); --ci-tint-line: color-mix(in srgb, var(--ci-brand) 18%, var(--ci-paper)); /* Focus. One ring, one offset. */ --ci-focus: var(--ci-brand-600); --ci-focus-w: 3px; --ci-focus-off: 3px; /* Gap, to end the hand-written values. */ --ci-gap-xs: .5rem; --ci-gap-sm: 1rem; --ci-gap-xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --ci-fs-h4: 1.0625rem; --ci-dur-fast: .18s; --ci-header-h: 76px; /* How far the "at a glance" band rides up over the hero. */ --ci-glance-lift: 56px; } /* Fallback for browsers without color-mix(). */ @supports not (color: color-mix(in srgb, red 50%, blue)) { :root { --ci-brand-700: #16317d; --ci-brand-500: #3a5cc0; --ci-brand-100: #e4e9f7; --ci-brand-050: #f2f5fc; --ci-surface-bd-hover: #9fb0da; --ci-chip-bd: #d4dcf1; --ci-d-surface-bd-hover: rgba(255, 255, 255, .26); --ci-d-chip-bd: rgba(255, 255, 255, .12); --ci-ink-900: #060e20; --ci-ink-700: #0d1d3e; --ci-sh-brand: 0 14px 32px -12px rgba(29, 63, 160, .55); --ci-brand-dark: #16317d; --ci-d-brand-700: #5a74bd; --ci-d-brand-fg: #8e9fd0; --ci-d-brand-100: #2b3b63; --ci-d-brand-050: #212a45; --ci-d-sh-brand: 0 10px 28px -14px rgba(29, 63, 160, .75); --ci-fig-wash: #eef1f9; --ci-d-fig-wash: #27324e; --ci-d-fig-on-accent: #0c1016; --ci-tint: #f5f7fc; --ci-tint-line: #dde4f2; --ci-success-bg: #f1f8f4; --ci-success-line: #c3dfd1; /* These hold whole gradients. Without a fallback the declaration is dropped at parse time and the band renders with NO background — white headings on white. */ --ci-hero-bg: linear-gradient(165deg, #0d1d3e 0%, #060e20 100%); --ci-d-hero-bg: linear-gradient(165deg, #1b2d5a 0%, #0f1931 100%); --ci-closing-bg: linear-gradient(140deg, #16317d, #060e20); --ci-d-closing-bg: linear-gradient(140deg, #1b2d5a, #0f1931); } } /* ---- Dark mode switch ------------------------------------------------------ Two blocks, deliberately. `ci_inline_brand_tokens()` prints its Customizer values on a bare `:root` AFTER this stylesheet, so a plain `:root` override inside a media query would have equal specificity and lose on source order — silently dragging --ci-ink (and the whole band ramp) back to light values. `:root:not([data-theme="light"])` and `:root[data-theme="dark"]` both outrank it. The values themselves live once, as --ci-d-* above; these blocks only alias, so a palette change is a one-place edit. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ci-paper: var(--ci-d-paper); --ci-paper-2: var(--ci-d-paper-2); --ci-paper-3: var(--ci-d-paper-3); --ci-band: var(--ci-d-band); --ci-band-line: var(--ci-d-line); --ci-raised: var(--ci-d-raised); --ci-elev-bd: var(--ci-d-elev-bd); --ci-surface-bd-hover: var(--ci-d-surface-bd-hover); --ci-chip-bd: var(--ci-d-chip-bd); --ci-fig-wash: var(--ci-d-fig-wash); --ci-fig-accent: var(--ci-d-fig-accent); --ci-fig-on-accent: var(--ci-d-fig-on-accent); --ci-tint: var(--ci-d-tint); --ci-tint-line: var(--ci-d-tint-line); --ci-focus: var(--ci-d-focus); --ci-elev-bd-soft: var(--ci-d-elev-bd-soft); --ci-hover-surface: var(--ci-d-hover-surface); --ci-quote-rule: var(--ci-d-brand-fg); --ci-hero-bg: var(--ci-d-hero-bg); --ci-closing-bg: var(--ci-d-closing-bg); --ci-btn-fill-hover: var(--ci-brand-500); --ci-scrim: var(--ci-d-scrim); --ci-drawer-bg: var(--ci-d-drawer-bg); --ci-drawer-bd: var(--ci-d-drawer-bd); --ci-chip-on: var(--ci-d-brand-fg); --ci-chip-on-fg: var(--ci-d-paper); --ci-switch-thumb: var(--ci-d-switch-thumb); --ci-text: var(--ci-d-text); --ci-text-2: var(--ci-d-text-2); --ci-text-3: var(--ci-d-text-3); --ci-line: var(--ci-d-line); --ci-line-2: var(--ci-d-line-2); --ci-ink-700: var(--ci-d-ink-700); --ci-ink-800: var(--ci-d-ink-800); --ci-ink-900: var(--ci-d-ink-900); --ci-band-edge: var(--ci-d-band-edge); --ci-brand-700: var(--ci-d-brand-700); --ci-brand-fg: var(--ci-d-brand-fg); --ci-brand-100: var(--ci-d-brand-100); --ci-brand-050: var(--ci-d-brand-050); --ci-header-bg: var(--ci-d-header-bg); --ci-header-sh: var(--ci-d-header-sh); --ci-drawer-sh: var(--ci-d-drawer-sh); --ci-field-bg: var(--ci-d-field-bg); --ci-field-bg-focus: var(--ci-d-field-bg-focus); --ci-control-accent: var(--ci-d-brand-fg); --ci-danger: var(--ci-d-danger); --ci-danger-bg: var(--ci-d-danger-bg); --ci-success: var(--ci-d-success); --ci-success-fg: var(--ci-d-success-fg); --ci-success-bg: var(--ci-d-success-bg); --ci-success-line: var(--ci-d-success-line); --ci-sh-1: var(--ci-d-sh-1); --ci-sh-2: var(--ci-d-sh-2); --ci-sh-3: var(--ci-d-sh-3); --ci-sh-brand: var(--ci-d-sh-brand); --ci-decor-grid: rgba(255, 255, 255, .07); --ci-decor-orb-o: .34; --ci-media-filter: brightness(.9) contrast(1.02); --ci-map-filter: grayscale(.4) contrast(.92) brightness(.78) invert(.9) hue-rotate(180deg); } } :root[data-theme="dark"] { color-scheme: dark; --ci-paper: var(--ci-d-paper); --ci-paper-2: var(--ci-d-paper-2); --ci-paper-3: var(--ci-d-paper-3); --ci-band: var(--ci-d-band); --ci-band-line: var(--ci-d-line); --ci-raised: var(--ci-d-raised); --ci-elev-bd: var(--ci-d-elev-bd); --ci-surface-bd-hover: var(--ci-d-surface-bd-hover); --ci-chip-bd: var(--ci-d-chip-bd); --ci-fig-wash: var(--ci-d-fig-wash); --ci-fig-accent: var(--ci-d-fig-accent); --ci-fig-on-accent: var(--ci-d-fig-on-accent); --ci-tint: var(--ci-d-tint); --ci-tint-line: var(--ci-d-tint-line); --ci-focus: var(--ci-d-focus); --ci-elev-bd-soft: var(--ci-d-elev-bd-soft); --ci-hover-surface: var(--ci-d-hover-surface); --ci-quote-rule: var(--ci-d-brand-fg); --ci-hero-bg: var(--ci-d-hero-bg); --ci-closing-bg: var(--ci-d-closing-bg); --ci-btn-fill-hover: var(--ci-brand-500); --ci-scrim: var(--ci-d-scrim); --ci-drawer-bg: var(--ci-d-drawer-bg); --ci-drawer-bd: var(--ci-d-drawer-bd); --ci-chip-on: var(--ci-d-brand-fg); --ci-chip-on-fg: var(--ci-d-paper); --ci-switch-thumb: var(--ci-d-switch-thumb); --ci-text: var(--ci-d-text); --ci-text-2: var(--ci-d-text-2); --ci-text-3: var(--ci-d-text-3); --ci-line: var(--ci-d-line); --ci-line-2: var(--ci-d-line-2); --ci-ink-700: var(--ci-d-ink-700); --ci-ink-800: var(--ci-d-ink-800); --ci-ink-900: var(--ci-d-ink-900); --ci-band-edge: var(--ci-d-band-edge); --ci-brand-700: var(--ci-d-brand-700); --ci-brand-fg: var(--ci-d-brand-fg); --ci-brand-100: var(--ci-d-brand-100); --ci-brand-050: var(--ci-d-brand-050); --ci-header-bg: var(--ci-d-header-bg); --ci-header-sh: var(--ci-d-header-sh); --ci-drawer-sh: var(--ci-d-drawer-sh); --ci-field-bg: var(--ci-d-field-bg); --ci-field-bg-focus: var(--ci-d-field-bg-focus); --ci-control-accent: var(--ci-d-brand-fg); --ci-danger: var(--ci-d-danger); --ci-danger-bg: var(--ci-d-danger-bg); --ci-success: var(--ci-d-success); --ci-success-fg: var(--ci-d-success-fg); --ci-success-bg: var(--ci-d-success-bg); --ci-success-line: var(--ci-d-success-line); --ci-sh-1: var(--ci-d-sh-1); --ci-sh-2: var(--ci-d-sh-2); --ci-sh-3: var(--ci-d-sh-3); --ci-sh-brand: var(--ci-d-sh-brand); --ci-decor-grid: rgba(255, 255, 255, .07); --ci-decor-orb-o: .34; --ci-media-filter: brightness(.9) contrast(1.02); --ci-map-filter: grayscale(.4) contrast(.92) brightness(.78) invert(.9) hue-rotate(180deg); } /* 2. Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.ci { margin: 0; font-family: var(--ci-font); font-size: var(--ci-fs-base); line-height: 1.65; color: var(--ci-text); background: var(--ci-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv05" 1, "ss01" 1; overflow-x: hidden; } img, svg, video, iframe { max-width: 100%; display: block; } img { height: auto; } a { color: var(--ci-brand-fg); text-decoration-thickness: 1px; text-underline-offset: 3px; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--ci-accent); outline-offset: 3px; border-radius: var(--ci-r-xs); } .ci-skip { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 20px; background: var(--ci-ink-800); color: #fff; border-radius: 0 0 var(--ci-r-sm) 0; text-decoration: none; } .ci-skip:focus { left: 0; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } .screen-reader-text:focus { clip: auto; clip-path: none; height: auto; width: auto; position: static !important; } .ci-icon { flex: none; } /* 3. Layout primitives ========================================================================== */ .ci-wrap { width: 100%; max-width: var(--ci-wrap); margin-inline: auto; padding-inline: var(--ci-wrap-pad); } .ci-main { display: block; } .ci-section { position: relative; padding-block: var(--ci-section-y); } .ci-section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); } .ci-section--alt { background: var(--ci-band); border-block: 1px solid var(--ci-band-line); } /* Band rhythm. Two problems, one rule set. First, the alternation did no visual work at all: --ci-paper-2 was #f6f8fc against a #ffffff page -- 1.05:1, with no border -- so every --alt band was invisible and the whole default/alt sequence was a decision with no rendered consequence. It now has its own --ci-band role at 1.13:1 plus a hairline, and the hairline carries most of the signal. Second, there was not one adjacent-sibling rule in nearly three thousand lines, so two consecutive sections of the same tone stacked two full --ci-section-y runs with nothing between them -- up to 224px of dead ground that reads as one section twice as long as it should be. Same-tone neighbours now take a content-width hairline and a reduced inset, so the pair reads as one band with an internal division rather than two identical slabs. The hairline stops at the content width on purpose: an edge that spanned the viewport would claim to be a band boundary, which it is not. */ .ci-section--alt:not(.ci-section--seam) + .ci-section--alt:not(.ci-section--seam), .ci-section--ink:not(.ci-section--seam) + .ci-section--ink:not(.ci-section--seam), .ci-section--tint:not(.ci-section--seam) + .ci-section--tint:not(.ci-section--seam), .ci-section:not(.ci-section--alt):not(.ci-section--ink):not(.ci-section--tint):not(.ci-closing):not(.ci-section--seam) + .ci-section:not(.ci-section--alt):not(.ci-section--ink):not(.ci-section--tint):not(.ci-closing):not(.ci-section--seam) { padding-block-start: 0; border-top-width: 0; } /* .ci-closing is excluded: it zeroes its own padding-block and holds a dark card with its own margin, so the same-tone rule painted a full-width rule in empty background above it and pushed it 60px down the page. */ /* --seam is excluded on BOTH sides: a seam band must not take a divider, and a band that follows one must not either -- the gap the divider needs does not exist. Writing the exemption as its own rule does not work: this selector is (0,8,0) and would outrank it. */ .ci-section--alt:not(.ci-section--seam) + .ci-section--alt:not(.ci-section--seam) > .ci-wrap, .ci-section--ink:not(.ci-section--seam) + .ci-section--ink:not(.ci-section--seam) > .ci-wrap, .ci-section--tint:not(.ci-section--seam) + .ci-section--tint:not(.ci-section--seam) > .ci-wrap, .ci-section:not(.ci-section--alt):not(.ci-section--ink):not(.ci-section--tint):not(.ci-closing):not(.ci-section--seam) + .ci-section:not(.ci-section--alt):not(.ci-section--ink):not(.ci-section--tint):not(.ci-closing):not(.ci-section--seam) > .ci-wrap { padding-block-start: calc(var(--ci-section-y) * .55); border-top: 1px solid var(--ci-line); } .ci-section--tint:not(.ci-section--seam) + .ci-section--tint:not(.ci-section--seam) > .ci-wrap { border-top-color: var(--ci-tint-line); } .ci-section--alt:not(.ci-section--seam) + .ci-section--alt:not(.ci-section--seam) > .ci-wrap { border-top-color: var(--ci-band-line); } .ci-section--ink:not(.ci-section--seam) + .ci-section--ink:not(.ci-section--seam) > .ci-wrap { border-top-color: var(--ci-on-dark-line); } .ci-section--ink { background: linear-gradient(170deg, var(--ci-ink-700), var(--ci-ink-900)); background: radial-gradient(900px 420px at 12% -10%, color-mix(in srgb, var(--ci-brand) 40%, transparent), transparent 70%), linear-gradient(170deg, var(--ci-ink-700), var(--ci-ink-900)); color: var(--ci-on-dark); } .ci-section--ink h2, .ci-section--ink h3 { color: #fff; } .ci-section--ink p { color: var(--ci-on-dark-2); } .ci-grid { display: grid; gap: var(--ci-gap); } .ci-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .ci-grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .ci-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* =========================================================================== PRIMITIVES One box, one row, one chip, one pill, one rule-block. Before these, roughly two dozen components each declared their own padding, background, border, radius, shadow, transition and hover, which had two consequences. A card on the home page, the services overview and an industry page were three unrelated objects that happened to look similar. And a visitor was taught five different lift distances -- 2px, 3px, 4px, 5px, 8px -- for the single meaning "this is clickable", one of them on a list item that was not clickable at all. Two rules hold the system together: 1. Density is the only thing a component chooses. It sets --sf-pad, --sf-bg, --sf-bd or --sf-r, or it takes a named modifier. It does not restate the box. 2. Interactivity is decided by the ELEMENT, never the class. The hover rules below are keyed on a.ci-surface and button.ci-surface, so a component rendered as a
  • cannot accidentally advertise a click, and one rendered as an cannot forget to. =========================================================================== */ .ci-surface { --sf-bg: var(--ci-raised); --sf-bd: var(--ci-elev-bd); --sf-pad: var(--ci-pad); --sf-r: var(--ci-r); /* Width, not just colour. A component that had no border could otherwise only set --sf-bd: transparent, which still occupies 2px of box -- every grouped capability on all ten service pages grew by that much. */ --sf-bw: 1px; position: relative; padding: var(--sf-pad); background: var(--sf-bg); border: var(--sf-bw) solid var(--sf-bd); border-radius: var(--sf-r); color: inherit; text-decoration: none; } /* Layout is opt-in, not imposed. More than half of what adopts this primitive is a grid or a flex row -- the mega panel is two columns, the value band is 88px/1fr/auto, the availability note is an icon beside text -- so a base that forced `flex-direction: column` would be a primitive every second consumer has to fight. --stack is the common case, named. */ .ci-surface--stack { display: flex; flex-direction: column; } .ci-surface--row { display: flex; align-items: center; } /* Density. Four rungs off --ci-pad-*, and nothing in between. */ /* Density only. It used to set --sf-r too, so the five components that took it for the smaller inset each lost a corner rung they never asked for -- including the callouts that carry the client's protected availability statements. Shape is its own axis: set --sf-r where a smaller corner is actually wanted. */ .ci-surface--tight { --sf-pad: var(--ci-pad-sm); } .ci-surface--wide { --sf-pad: var(--ci-pad-lg); } .ci-surface--feature { --sf-pad: var(--ci-pad-xl); --sf-r: var(--ci-r-lg); } /* Edge-to-edge media or a nested header: the box keeps its radius and clips. */ .ci-surface--flush { --sf-pad: 0; overflow: hidden; } /* Tone. */ .ci-surface--sunken { --sf-bg: var(--ci-paper-2); --sf-bd: var(--ci-line-2); } /* On a permanently dark band. The fill is a lift off the band rather than a fixed colour, so one modifier works on the hero, the ink section, the closing band and the footer without four variants. */ .ci-surface--ink { --sf-bg: rgba(255, 255, 255, .05); --sf-bd: var(--ci-on-dark-line); color: var(--ci-on-dark); } .ci-surface--ink p { color: var(--ci-on-dark-2); } /* A sunken box sitting ON the alt band would be a 1.07:1 step, so it flips to raised and reads as lifted instead. This is why --ci-band and --ci-paper-2 are separate roles. */ .ci-section--alt .ci-surface--sunken { --sf-bg: var(--ci-raised); --sf-bd: var(--ci-line-2); } /* The two hover rules. Element-keyed, as above. */ a.ci-surface, button.ci-surface { /* background-color belongs here even though the fill is set through --sf-bg: a custom property change propagates to the property that uses it, and that property transitions normally. Without it the hover fill snaps -- and in dark mode the fill is the hover feedback that reads, because a drop shadow on a dark surface is close to invisible. This list REPLACES each component's own, since a.ci-surface (0,1,1) outranks a bare component class (0,1,0), which is why the components below no longer declare one. */ transition: transform var(--ci-dur) var(--ci-ease), box-shadow var(--ci-dur) var(--ci-ease), border-color var(--ci-dur) var(--ci-ease), background-color var(--ci-dur) var(--ci-ease); } a.ci-surface:hover, button.ci-surface:hover { transform: translateY(-4px); box-shadow: var(--ci-sh-2); border-color: var(--ci-surface-bd-hover); } /* A boxed link inside a tight vertical stack: it is a row that happens to have an edge, and the rule for rows is that they do not move -- one lifting out of an 8px gap drops a shadow on its neighbours. Still keeps the border and fill response; it gives up only the movement. */ a.ci-surface--still:hover, button.ci-surface--still:hover { transform: none; box-shadow: none; } /* Press. Before this, .ci-btn was the only thing in the theme that answered a press at all, so every card lifted on hover and then ignored the click. */ a.ci-surface:active, button.ci-surface:active { transform: translateY(0); box-shadow: var(--ci-sh-1); } a.ci-row:active { background: var(--ci-brand-100); } /* A row in a list: the horizontal counterpart. No lift -- a row that rises off a stack of rows breaks the stack. The tint is the whole affordance. */ .ci-row { display: grid; align-items: center; gap: .9rem; padding: 1.1rem .25rem; border-bottom: 1px solid var(--ci-line); color: inherit; text-decoration: none; } /* NOT applied by default. .ci-svc-list draws a border-top and closes itself with the last row's bottom border, and .ci-themes is a two-column grid where :last-child is one cell in one column -- dropping that hairline makes the two columns visibly uneven. Opt in per list. */ .ci-row--open-end:last-child { border-bottom: 0; } .ci-row--ink { border-bottom-color: var(--ci-on-dark-line); color: var(--ci-on-dark); } a.ci-row { transition: background-color var(--ci-dur) var(--ci-ease); } a.ci-row:hover { background: var(--ci-brand-050); } a.ci-row--ink:hover { background: rgba(255, 255, 255, .06); } /* No button.ci-row rule: nothing in the theme renders a row as a button. The drawer's disclosure control is .ci-drawer__sub-toggle and carries its own hover beside the links it sits among. */ /* Icon chip. Sizes come from --ci-chip-*; the radius rule is fixed to them. */ .ci-chip-icon { flex: none; display: grid; place-items: center; width: var(--chip, var(--ci-chip-md)); height: var(--chip, var(--ci-chip-md)); border-radius: var(--ci-r-sm); background: var(--ci-brand-100); border: 1px solid var(--ci-chip-bd); color: var(--ci-brand-fg); transition: background-color var(--ci-dur) var(--ci-ease), border-color var(--ci-dur) var(--ci-ease), color var(--ci-dur) var(--ci-ease); } .ci-chip-icon--sm { --chip: var(--ci-chip-sm); } .ci-chip-icon--lg { --chip: var(--ci-chip-lg); border-radius: var(--ci-r); } /* No hairline: none of the chips this replaced had one, and the media-card badge sits over a photograph where an outline costs it contrast. The lift in the fill is the whole treatment. */ .ci-chip-icon--ink { background: rgba(255, 255, 255, .09); border-color: transparent; color: var(--ci-on-dark); } /* The accent-on-ink chip: used where a chip sits on a dark band and has to read as a marker rather than as a surface. */ .ci-chip-icon--accent { color: var(--ci-accent); } /* Filled: the chip IS the mark, not a tint behind one. The only chip that inverts, and the reason it needs naming is that --circle alone would have left it a pale tint with brand text, which reads as disabled. */ .ci-chip-icon--solid { background: var(--ci-brand-600); border-color: var(--ci-brand-600); color: var(--ci-on-brand); } /* Quiet: no fill, for a chip on an already-tinted surface where a brand wash would be a box inside a box. */ .ci-chip-icon--quiet { background: var(--ci-raised); border-color: var(--ci-elev-bd-soft); } /* The one icon reaction, so the chip answers a hover on its container rather than each component inventing its own. No scale: a chip that grows shifts the text next to it. */ a.ci-surface:hover .ci-chip-icon, button.ci-surface:hover .ci-chip-icon, a.ci-row:hover .ci-chip-icon { background: var(--ci-brand-600); border-color: var(--ci-brand-600); color: var(--ci-on-brand); } /* Four rungs the components actually need, added here rather than invented locally -- a one-off value per component is exactly how sixteen radii happened before v1.5.0. */ /* A chip that is a circle: .ci-flow__num is chip-sized but round. */ .ci-chip-icon--circle { border-radius: 50%; } /* The drawer's disclosure