/* ============================================================================= CSS VARIABLES & DESIGN TOKENS, GOLDEN RATIO SYSTEM ----------------------------------------------------------------------------- This section defines the core design tokens for the entire project. The Golden Ratio (phi ≈ 1.618) is used to calculate spacing, typography scales, and structural layout dimensions to maintain mathematical harmony. ============================================================================= */ :root { /* Mathematical Constants */ --phi: 1.618; --phi-inverse: 0.618; --phi-squared: 2.618; --phi-cubed: 4.236; --phi-fourth: 6.854; --phi-fifth: 11.09; /* Base Color Palette */ --bg-light: #F0EBDC; --text-light: #212121; --bg-dark: #4A4A4A; --text-dark: #ffffff; --accent: #ffcc00; /* --action is declared below as an alias of --blue (Olivetti palette) */ /* Olivetti Brand Colors */ --red: #E4022D; --dark-red: #9A715D; --orange: #F56428; --yellow: #FADC46; --light-green: #64D264; --dark-green: #00643C; --cyan: #6ECDBE; --blue: #04508B; /* NOTE: --action is an alias of --blue (same Olivetti brand colour used as the interactive/link colour). Declared as var(--blue) so a single update propagates to both semantic and palette tokens. If the interactive colour ever diverges from the brand blue, replace this with a dedicated hex value. */ --action: var(--blue); --purple: #6B3FA0; --light-blue: #C8E1F0; --black: #000000; /* NOTE: renamed from --white to --off-white. The value #F0EBDC is a warm ivory, not pure white (#FFFFFF). Using "white" for a beige token was misleading — any developer reaching for --white expecting #FFF would get the wrong colour. All usages updated below. */ --off-white: #F0EBDC; --grey: #8E8F91; --dark-grey: #4A4A4A; /* Typography System, Golden Base Unit */ --font-primary: "IBM Plex Sans", sans-serif; --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --base-unit: 1rem; /* Font Size Scale */ --fs-micro: calc(var(--base-unit) * var(--phi-inverse) * var(--phi-inverse)); --fs-tiny: calc(var(--base-unit) * var(--phi-inverse) * 0.75); --fs-small: calc(var(--base-unit) * var(--phi-inverse)); --fs-base: calc(var(--base-unit) * 0.875); --fs-medium: calc(var(--base-unit) * 1); --fs-plus: calc(var(--base-unit) * 1.25); --fs-demi: calc(var(--base-unit) * 1.5); --fs-large: calc(var(--base-unit) * var(--phi)); --fs-xl: calc(var(--base-unit) * var(--phi-squared)); --fs-xxl: calc(var(--base-unit) * var(--phi-cubed)); --fs-xxxl: calc(var(--base-unit) * var(--phi-fourth)); --fs-display: calc(var(--base-unit) * var(--phi-fifth)); --fs-marker: 0.75em; --fs-context: 0.875em; --fs-note: 0.9em; --space-em-0-75: 0.75em; --space-em-1: 1em; /* Line Height Scale */ /* WARNING: --lh-debug (formerly --lh-nano) is set to 0.5, which is BELOW the font-size itself — lines will physically overlap if this is applied to any visible text. It is kept here for debugging layout grids only. Never use it on readable content. */ --lh-debug: 0.5; --lh-tiny: 1; --lh-tight: 1.2; --lh-snug: 1.3; --lh-normal: 1.4; --lh-relaxed: 1.5; --lh-loose: 1.6; --lh-very-loose: 1.8; /* Letter Spacing Scale */ --ls-tighter: -0.05em; --ls-tight: -0.025em; --ls-normal: 0; --ls-wide: 0.025em; --ls-wider: 0.05em; --ls-widest: 0.1em; /* Font Weight Scale */ --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* NOTE: IBM Plex Sans is loaded with weights up to 700 only. --fw-extrabold (800) and --fw-black (900) have no matching font variant and will be synthesised (faux-bold) by the browser, producing degraded rendering. If these weights are needed, add wght 800 to the Google Fonts URL in . Otherwise, avoid using these tokens in component styles. */ --fw-extrabold: 800; --fw-black: 900; /* Spacing System */ --space-0: 0; --space-0px: 0px; --space-px: 1px; --space-2px: 2px; --space-3px: 3px; --space-4px: 4px; --space-6px: 6px; --space-8px: 8px; --space-12px: 12px; --space-20px: 20px; --space-24px: 24px; --space-32px: 32px; --space-96px: 96px; --space-micro: calc(var(--base-unit) * var(--phi-inverse) * var(--phi-inverse)); --space-tiny: calc(var(--base-unit) * var(--phi-inverse)); --space-xs: calc(var(--base-unit) * var(--phi-inverse) * var(--phi)); --space-sm: calc(var(--base-unit) * var(--phi)); --space-md: calc(var(--base-unit) * var(--phi-squared)); --space-lg: calc(var(--base-unit) * var(--phi-cubed)); --space-xl: calc(var(--base-unit) * var(--phi-fourth)); --space-xxl: calc(var(--base-unit) * var(--phi-fifth)); /* Border Radius */ --border-radius-none: 0; --border-radius-xs: 2px; --border-radius-squircle: 22.37%; --border-radius-sm: calc(var(--space-micro)); --border-radius-md: calc(var(--space-tiny)); --border-radius-lg: calc(var(--space-xs)); --border-radius-xl: calc(var(--space-sm)); --border-radius-full: 9999px; /* Border Width */ --border-width-0: 0; --border-width-1: 1px; --border-width-2: 2px; --border-width-3: 3px; --border-width-4: 4px; --border-width-8: 8px; /* Transition Durations */ --duration-75: 75ms; --duration-100: 100ms; --duration-150: 150ms; --duration-200: 200ms; --duration-300: 300ms; --duration-500: 500ms; --duration-700: 700ms; --duration-1000: 1000ms; /* Layout */ --container-max-width: 92.5rem; /* NOTE: was 1024px — converted to rem so this value scales with the user's browser font-size preference, consistent with --container-max-width above. */ --content-max-width: 64rem; /* NOTE: was 780px — converted to rem (48.75rem) for consistency with the token system. */ --small-content-max-width: 48.75rem; /* NOTE: --app-icon-max-width (512px) and --collaboration-card-min-width (300px) were removed — both were unused in any CSS rule. If needed in future, re-add here. */ --card-meta-min-width: 140px; /* NOTE: --space-0 (unitless 0) and --space-0px (0px) are kept as separate tokens because some CSS properties require a unit (e.g. transition origin, gap in calc()) while others work with unitless 0. Use --space-0 by default; --space-0px only where an explicit pixel unit is required by the property or calc context. */ --space-0: 0; --space-0px: 0px; --underline-offset: 0.2em; --opacity-divider: 0.35; --grid-columns: 12; --grid-gap-sm: var(--space-xs); --grid-gap-md: var(--space-sm); --grid-gap-lg: var(--space-md); /* NOTE: --space-0 and --space-0px are declared once above (lines 113-114). The duplicate declarations previously here have been removed. */ /* Theme Colors, Light (default) */ --color-text: var(--text-light); --color-bg: var(--bg-light); --color-accent: var(--accent); --color-action: var(--action); --color-action-hover: var(--purple); --color-section-alt: rgba(0, 0, 0, 0.04); --color-section-alt-strong: rgba(0, 0, 0, 0.08); --color-muted: rgba(0, 0, 0, 0.6); } /* ============================================================================= DARK MODE, Token overrides ============================================================================= */ @media (prefers-color-scheme: dark) { :root { --color-text: var(--text-dark); --color-bg: var(--bg-dark); --color-accent: #f2f2f2; --color-action: var(--orange); --color-action-hover: var(--yellow); --color-section-alt: rgba(255, 255, 255, 0.06); --color-section-alt-strong: rgba(255, 255, 255, 0.12); --color-muted: rgba(255, 255, 255, 0.7); } } html[data-theme="light"] { --color-text: var(--text-light); --color-bg: var(--bg-light); --color-accent: var(--accent); --color-action: var(--action); --color-action-hover: var(--purple); --color-section-alt: rgba(0, 0, 0, 0.04); --color-section-alt-strong: rgba(0, 0, 0, 0.08); --color-muted: rgba(0, 0, 0, 0.6); } html[data-theme="dark"] { --color-text: var(--text-dark); --color-bg: var(--bg-dark); --color-accent: #f2f2f2; --color-action: var(--orange); --color-action-hover: var(--yellow); --color-section-alt: rgba(255, 255, 255, 0.06); --color-section-alt-strong: rgba(255, 255, 255, 0.12); --color-muted: rgba(255, 255, 255, 0.7); } /* ============================================================================= RESET & FOUNDATIONS ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; scroll-behavior: smooth; } /* ============================================================================= ACCESSIBILITY: Reduced motion ----------------------------------------------------------------------------- Users who have enabled "Reduce Motion" in their OS accessibility settings receive this override. All animations and transitions are collapsed to 0.01ms (effectively instant) via so the cascade cannot accidentally re-enable them. KNOWN EDGE-CASE: elements using .highlight-inline (inverted background) may produce a brief colour flash on state change because the transition snaps instead of fading. This is intentional — motion is disabled — but worth noting if the visual snap ever needs smoothing via a prefers-contrast fallback. ============================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; } } html, body { max-width: none; margin: 0; } body { font-family: var(--font-primary), var(--font-fallback); color: var(--color-text); background-color: var(--color-bg); /* NOTE: the base font-size for the body is set to --fs-base (~14px). The previous value calc(var(--fs-large) * var(--phi)) produced ≈ 42px, which is far too large as a document baseline. Individual headings and paragraphs set their own sizes via the token scale above. */ font-size: var(--fs-base); line-height: var(--lh-normal); letter-spacing: var(--ls-normal); font-weight: var(--fw-normal); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main { margin-top: 0; margin-bottom: var(--space-lg); } /* ============================================================================= HEADER & FOOTER ============================================================================= */ header { width: 100vw; max-width: none; left: 50%; transform: translateX(-50%); position: fixed; top: 0; z-index: 9997; font-size: var(--fs-demi); background-color: var(--color-bg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-lg); } header a { font-size: var(--fs-demi); font-weight: var(--fw-normal); letter-spacing: var(--ls-normal); } /* Header social nav — now a