/* ===================================================================== ITBG Fit — Design tokens --------------------------------------------------------------------- Tailwind v4 reference. Drop these CSS variables into globals.css under @theme to get the same tokens in the Next.js app. Naming kept boring on purpose so Claude Code can map straight to Tailwind utilities. ===================================================================== */ :root { /* ---------- COLOUR ---------- */ /* Surfaces — warm-tinted near-blacks. Never pure #000 except for the extreme edge. Each step is a flat colour, no gradients in tokens. */ --color-bg: oklch(0.14 0.005 80); /* #0c0b0a page */ --color-surface-1: oklch(0.18 0.006 80); /* #161513 card */ --color-surface-2: oklch(0.22 0.007 80); /* #1d1c1a raised card / hover */ --color-surface-3: oklch(0.26 0.008 80); /* #252321 inset / popover */ --color-edge: oklch(0.32 0.008 80); /* hairline border */ --color-edge-strong: oklch(0.42 0.009 80); /* visible border */ /* Foreground */ --color-fg: oklch(0.97 0.005 90); /* primary text */ --color-fg-muted: oklch(0.78 0.005 90); /* secondary text */ --color-fg-subtle: oklch(0.58 0.005 90); /* labels, captions */ --color-fg-faint: oklch(0.42 0.005 90); /* hint, placeholder */ /* Brand accent — acid lime. Single hue, three lightness steps. */ --color-lime: oklch(0.88 0.22 128); /* #d4ff3a primary */ --color-lime-bright: oklch(0.93 0.22 128); /* hover / glow */ --color-lime-deep: oklch(0.55 0.18 128); /* on light surface */ --color-lime-tint: oklch(0.88 0.22 128 / 0.12); --color-lime-tint-2: oklch(0.88 0.22 128 / 0.22); /* Status — desaturated, sit beside lime without competing */ --color-success: oklch(0.78 0.14 150); --color-warning: oklch(0.82 0.14 80); --color-danger: oklch(0.68 0.18 25); --color-info: oklch(0.78 0.10 240); /* Modality tints (chips, history rows) */ --color-strength: var(--color-lime); --color-boxing: oklch(0.72 0.18 25); /* warm red */ --color-rowing: oklch(0.78 0.10 240); /* steel blue */ --color-walk: oklch(0.78 0.10 150); /* sage */ --color-mixed: oklch(0.74 0.10 300); /* dusty violet */ /* ---------- TYPOGRAPHY ---------- */ /* Display: condensed sport-tech. Body: clean grotesk. Mono: numeric data. */ --font-display: "Bebas Neue", "Druk Wide", "Söhne Schmal", "Oswald", "Helvetica Neue Condensed", -apple-system, sans-serif; --font-sans: "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — modular, used for both web and PWA */ --text-2xs: 10px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px; --text-5xl: 52px; --text-6xl: 72px; --text-display: 96px; /* ---------- SPACING ---------- */ --space-px: 1px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Hit targets — Apple HIG floor */ --tap-min: 44px; --tap-comfortable: 48px; --tap-primary: 56px; /* ---------- RADII ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* ---------- SHADOWS ---------- */ /* Subtle. Mostly used for the lime CTAs and floating timer. */ --shadow-soft: 0 1px 2px rgba(0,0,0,0.4); --shadow-card: 0 8px 24px -8px rgba(0,0,0,0.6); --shadow-pop: 0 24px 48px -16px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.4); --shadow-lime: 0 0 0 1px oklch(0.88 0.22 128 / 0.25), 0 8px 32px -8px oklch(0.88 0.22 128 / 0.35); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ---------- LAYOUT ---------- */ --max-content: 640px; --header-h: 56px; --nav-h: 64px; } /* ===================================================================== Web fonts ===================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"); /* ===================================================================== Global resets used inside the prototype frame ===================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.itbg-app { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } .tabular-nums { font-variant-numeric: tabular-nums; } .font-display { font-family: var(--font-display); letter-spacing: 0.01em; } .font-mono { font-family: var(--font-mono); } /* Keyframes shared by app */ @keyframes itbg-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.9); } } @keyframes itbg-grow { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes itbg-ring { from { stroke-dashoffset: var(--ring-circ); } to { stroke-dashoffset: 0; } } @keyframes itbg-grain { 0% { transform: translate(0,0); } 20% { transform: translate(-2%, 1%); } 40% { transform: translate(1%, -2%); } 60% { transform: translate(-1%, 2%); } 80% { transform: translate(2%, -1%); } 100% { transform: translate(0,0); } } .live-dot { animation: itbg-pulse 1.6s ease-in-out infinite; } /* Carbon fibre / grain overlay — used sparingly on hero surfaces */ .grain-overlay { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1px); background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px; mix-blend-mode: overlay; opacity: 0.7; } .scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 180deg, rgba(255,255,255,0.012) 0, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px ); opacity: 0.6; }