/* ========================================================================= 1. Design tokens - 8px base unit (all spacing & grid align to multiples of 8px) ========================================================================= */ :root { --mi-u: 8px; /* Colour */ --mi-black: #000000; --mi-white: #ffffff; --mi-accent: #00d100; --mi-text: #1a1a1a; --mi-text-muted: #4a4a4a; /* Typography - aligned with VKTRS (Inter + IBM Plex Sans) */ --mi-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mi-font-heading: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --mi-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --mi-text-xs: 0.8125rem; --mi-text-sm: 0.9375rem; --mi-text-base: 1.0625rem; --mi-text-lg: 1.25rem; --mi-text-xl: 1.5rem; --mi-text-2xl: 1.875rem; --mi-text-3xl: 2.25rem; --mi-text-4xl: clamp(2rem, 4vw, 2.75rem); --mi-text-display: clamp(1.75rem, 3.15vw, 2.375rem); --mi-text-lead: 1.125rem; /* * Vertical rhythm (8px base = --mi-u) * - Line boxes use fixed px heights that are integer multiples of 8px so stacked lines don’t * drift off the background grid as paragraphs grow. Resizing/clamp on font-size is fine: * line-height stays on-grid; glyphs stay readable (always ≥ font-size on headings). * - Dot pitch is --mi-grid-step (24px) = 3 rhythm rows; padding/margins use --mi-space-*. */ --mi-lh-2: calc(var(--mi-u) * 2); --mi-lh-3: calc(var(--mi-u) * 3); --mi-lh-4: calc(var(--mi-u) * 4); --mi-lh-5: calc(var(--mi-u) * 5); --mi-lh-6: calc(var(--mi-u) * 6); --mi-leading-tight: var(--mi-lh-3); --mi-leading-snug: var(--mi-lh-4); --mi-leading-normal: var(--mi-lh-4); --mi-leading-relaxed: var(--mi-lh-5); /* Space between prose blocks = one rhythm unit (stacks with line boxes) */ --mi-prose-p-gap: calc(var(--mi-u) * 4); --mi-tracking-tight: -0.02em; /* Space scale (multiples of --mi-u) */ --mi-space-1: calc(var(--mi-u) * 1); --mi-space-2: calc(var(--mi-u) * 2); --mi-space-3: calc(var(--mi-u) * 3); --mi-space-4: calc(var(--mi-u) * 4); --mi-space-5: calc(var(--mi-u) * 5); --mi-space-6: calc(var(--mi-u) * 6); --mi-space-8: calc(var(--mi-u) * 8); --mi-space-10: calc(var(--mi-u) * 10); --mi-space-12: calc(var(--mi-u) * 12); --mi-space-16: calc(var(--mi-u) * 16); --mi-space-24: calc(var(--mi-u) * 24); /* Shared "box" chrome (nav pills, footer; panels use --mi-panel-* ) */ --mi-box-border: 1px solid rgba(0, 0, 0, 0.08); --mi-box-shadow: 0 var(--mi-space-1) var(--mi-space-2) rgba(0, 0, 0, 0.05); --mi-box-shadow-accent: 0 var(--mi-space-1) var(--mi-space-2) rgba(0, 209, 0, 0.12); --mi-border-accent: rgba(0, 209, 0, 0.35); --mi-border-accent-strong: rgba(0, 209, 0, 0.45); /* Depth system v1: line weight defines structure; shadow indicates lift from the grid. */ --mi-surface-border-rest: 1px solid rgba(0, 0, 0, 0.16); --mi-surface-border-strong: 1px solid rgba(0, 0, 0, 0.24); --mi-surface-shadow-rest: 0 1px 0 rgba(0, 0, 0, 0.1), 0 calc(var(--mi-u) * 1) calc(var(--mi-u) * 2) rgba(0, 0, 0, 0.035); --mi-surface-shadow-lifted: 0 2px 0 rgba(0, 0, 0, 0.12), 0 calc(var(--mi-u) * 2) calc(var(--mi-u) * 4) rgba(0, 0, 0, 0.06); --mi-control-shadow-active: calc(var(--mi-space-1) / 2) calc(var(--mi-space-1) / 2) 0 0 var(--mi-black); --mi-surface-glass-fill: color-mix(in srgb, var(--mi-white) 92%, transparent); --mi-surface-radius: var(--mi-space-1); --mi-annotation-label-shadow: calc(var(--mi-space-1) / 2) calc(var(--mi-space-1) / 2) 0 0 rgba(0, 0, 0, 0.22); --mi-annotation-leader-length: calc(var(--mi-space-5) + 32px); --mi-menu-box-height: 36px; --mi-menu-font-size: var(--mi-text-sm); --mi-chrome-fill: var(--mi-black); --mi-chrome-text: var(--mi-white); --mi-chrome-border: 1px solid rgba(255, 255, 255, 0.18); --mi-chrome-border-strong: 1px solid rgba(255, 255, 255, 0.92); --mi-chrome-shift-active: translate(1px, 1px); /* GP default logo cap is often ~60px; 96px = 12×8px scale */ --mi-header-logo-max-height: 96px; /* Layout */ --mi-content-max: 72rem; --mi-narrow-max: 40rem; /* Dot field: 24px pitch; layout snap uses same step (see --mi-gutter). */ --mi-bg: #f4f6f8; --mi-grid-step: calc(var(--mi-u) * 3); --mi-dot-radius: 1px; --mi-snap-origin: 0px; /* Fallback for engines without round(); second line overrides when supported. */ --mi-gutter: clamp( calc(var(--mi-grid-step) * 1), 4vw, calc(var(--mi-grid-step) * 3) ); --mi-gutter: clamp( calc(var(--mi-grid-step) * 1), calc( var(--mi-snap-origin) + round( nearest, max(0px, calc(4vw - var(--mi-snap-origin))), var(--mi-grid-step) ) ), calc(var(--mi-grid-step) * 3) ); --mi-radius: calc(var(--mi-u) * 2); /* * Dots are centered in each 24×24 tile (radial-gradient at center), so dot columns sit at * half-step offsets. mi-grid-sync phases tile (0 mod step) to the panel border box. * Inset = border + padding is chosen so (border + padding) ≡ step/2 (mod step), aligning * the content box edge with dot centers, not tile edges. */ --mi-grid-dot-half: calc(var(--mi-grid-step) / 2); --mi-panel-border-w: 1px; --mi-panel-border: var(--mi-panel-border-w) solid rgba(0, 0, 0, 0.06); --mi-panel-pad-x: calc( var(--mi-grid-step) * 2 - var(--mi-panel-border-w) - var(--mi-grid-dot-half) ); --mi-panel-pad-y: calc( var(--mi-grid-step) * 2 - var(--mi-panel-border-w) - var(--mi-grid-dot-half) ); --mi-panel-pad: var(--mi-panel-pad-y) var(--mi-panel-pad-x); --mi-panel-pad-card-x: calc( var(--mi-grid-step) * 2 - var(--mi-panel-border-w) - var(--mi-grid-dot-half) ); /* Bio cards: extra top inset (2× dot step) so avatar clears the panel edge; bottom stays 1× step */ --mi-panel-pad-card-y-top: calc( var(--mi-grid-step) * 2 - var(--mi-panel-border-w) - var(--mi-grid-dot-half) ); --mi-panel-pad-card-y-bottom: calc( var(--mi-grid-step) * 1 - var(--mi-panel-border-w) - var(--mi-grid-dot-half) ); --mi-panel-shadow: 0 calc(var(--mi-u) * 1) calc(var(--mi-u) * 3) rgba(0, 0, 0, 0.06); --mi-bg-shift-x: 0px; --mi-bg-shift-y: 0px; } /* ========================================================================= 2. Base + full-page dot field ========================================================================= */ html { min-height: 100%; background-color: var(--mi-bg); background-image: radial-gradient( circle at center, var(--mi-accent) var(--mi-dot-radius), transparent calc(var(--mi-dot-radius) + 0.5px) ); background-size: var(--mi-grid-step) var(--mi-grid-step); background-position: var(--mi-bg-shift-x) var(--mi-bg-shift-y); background-repeat: repeat; } body { color: var(--mi-text); font-family: var(--mi-font-sans); font-size: var(--mi-text-base); line-height: var(--mi-leading-normal); background: transparent; } body.mi-page--system { overflow-x: hidden; } /* Dot field shows through: strip theme-painted backgrounds from chrome + main */ .site-header, .inside-header, .site-info, .site-footer, .footer-widgets, .footer-widgets-container, .inside-footer-widgets, .footer-bar, .inside-site-info, .site, .site-main, #content, .site-content, .content-area, .inside-article, .site-header .main-navigation, .site-header .inside-navigation, .site-header #site-navigation, .site-header .nav-float-right, .site-header .main-navigation .main-nav, .site-header .main-navigation .main-nav > ul { background-color: transparent !important; background-image: none !important; box-shadow: none !important; }