/* ========================================================================== variables.css - the single source of truth for the IAZZUS design system. Change a value here and it propagates across every page. Nothing else in the stylesheet set should hardcode a color, size, radius or duration. ========================================================================== */ :root { /* --------------------------------------------------------------------- Color - dark neutral base, one restrained accent. Accent is a muted brass: premium and athletic without reading as neon. Contrast ratios below are measured against --color-bg (#08090A). --------------------------------------------------------------------- */ --color-bg: #08090a; /* page background */ --color-bg-elevated: #101214; /* alternating section bands */ --color-surface: #151719; /* cards and panels */ --color-surface-hover: #1b1e21; /* card hover state */ --color-text: #f4f4f5; /* primary text - 18.4:1 */ --color-text-secondary: #a1a1aa; /* body / supporting - 7.8:1 */ --color-muted: #8b8b94; /* metadata, captions - 5.9:1 */ /* There is deliberately no dimmer text color than --color-muted. The obvious next step down (#71717a) measures 4.1:1 here, which fails WCAG AA for body-sized text. Use size and weight to express hierarchy below this point, not less contrast. */ --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.14); /* --------------------------------------------------------------------- Accent - teal. This is the everyday accent: links, eyebrows, rules, focus rings, status dots. If you change one color on this site, change this one. --------------------------------------------------------------------- */ --color-accent: #45b8ac; /* teal - 8.3:1 */ --color-accent-bright: #5fd0c3; /* hover / active */ --color-accent-line: color-mix(in srgb, var(--color-accent) 34%, transparent); --color-accent-soft: color-mix(in srgb, var(--color-accent) 11%, transparent); --color-accent-wash: color-mix(in srgb, var(--color-accent) 7%, transparent); --color-on-accent: #04201d; /* text on a filled accent surface */ /* --------------------------------------------------------------------- Commerce - warm coral, the complement of the teal. Reserved for moments where money or engagement is on the table: the Work With Me button, service pricing, booking CTAs. Nothing else. Its whole value is that it means something specific - start using it decoratively and it stops reading as a signal. --------------------------------------------------------------------- */ --color-commerce: #e8785f; /* coral - 6.9:1 */ --color-commerce-bright: #f28e76; --color-commerce-line: color-mix(in srgb, var(--color-commerce) 34%, transparent); --color-commerce-soft: color-mix(in srgb, var(--color-commerce) 12%, transparent); --color-on-commerce: #1c0b06; --color-success: #6fbf8b; /* Pushed pink rather than orange so a validation error never reads as the commerce coral. Errors also carry a border and a message, so the distinction never rests on hue alone. */ --color-danger: #f2647a; --color-focus: #5fd0c3; /* focus ring */ --color-selection: color-mix(in srgb, var(--color-accent) 28%, transparent); /* --------------------------------------------------------------------- Typography No web fonts are loaded: the stacks below resolve to high quality system faces on every major platform, which costs zero requests and eliminates layout shift. To self-host a display face later, drop the files into /assets/fonts/, add an @font-face block at the bottom of this file, and prepend the family to --font-display. --------------------------------------------------------------------- */ --font-display: "Neue Haas Grotesk Display", "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; /* Fluid type scale. Each step is clamp(min, preferred, max). */ --text-display: clamp(3rem, 1.6rem + 6.2vw, 7rem); --text-h1: clamp(2.25rem, 1.55rem + 3.1vw, 4rem); --text-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); --text-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem); --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --text-body: 1rem; --text-sm: 0.9375rem; --text-xs: 0.8125rem; --text-label: 0.75rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.06; --leading-snug: 1.25; --leading-normal: 1.65; --tracking-display: -0.035em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-label: 0.16em; /* mono eyebrows and labels */ --tracking-wordmark: 0.22em; /* --------------------------------------------------------------------- Spacing - a single scale used for margins, padding and gaps. --------------------------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* Vertical rhythm between major page sections. */ --space-section: clamp(4rem, 8vw, 7.5rem); /* --------------------------------------------------------------------- Layout --------------------------------------------------------------------- */ --container-width: 1180px; --container-narrow: 760px; --container-pad: clamp(1.25rem, 4vw, 2.5rem); --measure: 68ch; /* comfortable body line length */ --header-height: 68px; /* --------------------------------------------------------------------- Borders, radii, elevation --------------------------------------------------------------------- */ --border-width: 1px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* On a near-black background a drop shadow is only legible where an element genuinely floats above lighter content, so there are two shadows rather than a full scale. Elevation elsewhere is expressed by surface lightness and borders. */ --shadow-sm: 0 6px 16px -10px rgba(0, 0, 0, 0.9); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.9); /* --------------------------------------------------------------------- Motion - every transition in the system references these. --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --duration-fast: 140ms; --duration: 240ms; --duration-slow: 640ms; /* Stacking order, declared once so it stays sane. */ --z-header: 100; --z-nav-panel: 90; --z-skip-link: 200; } /* Self-hosted font slot - uncomment and adjust once you add real files. @font-face { font-family: "IAZZUS Display"; src: url("/assets/fonts/iazzus-display.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } */