/* ========================================================================== IRON TITAN TECHNOLOGIES — DESIGN TOKENS Colors, typography, spacing, radii, shadows, motion ========================================================================== */ /* --------------------------------------------------------------------------- FONTS Display: "Saira" (geometric, condensed-leaning) — closest free match for the wordmark's wide industrial sans. Substitute: replace with the licensed brand display face when supplied. Sans: "Inter" — neutral UI sans for body, labels, buttons. Mono: "JetBrains Mono" — for code, numerics, technical labels. --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ============== CORE PALETTE ============== */ /* Backgrounds — deep, matte, cinematic */ --it-black: #07080A; /* near-pure black, base canvas */ --it-obsidian: #0B0D10; /* primary dark surface */ --it-graphite: #121519; /* card / raised surface */ --it-gunmetal: #1A1E24; /* hovered / nested surface */ --it-steel-dark: #242931; /* borders on dark, divider */ --it-steel: #3A4049; /* mid-grey metal */ /* Foregrounds — brushed silver scale (200 = lightest; 600 = deepest, not black) */ --it-silver-200: #D6D9DE; /* primary text on dark */ --it-silver-300: #A8ADB5; /* secondary text */ --it-silver-400: #6E7480; /* tertiary / muted */ --it-silver-500: #4A4F58; /* disabled, captions */ --it-silver-600: #2E323A; /* subtle dividers, deepest silver */ --it-silver-100: #D6D9DE; /* legacy alias \u2192 200 */ /* Premium orange — the brand accent */ --it-orange-50: #FFF1E6; --it-orange-100: #FFD8B5; --it-orange-300: #FFA15C; --it-orange-500: #FF6A1A; /* PRIMARY brand orange */ --it-orange-600: #E5550A; /* pressed / deeper */ --it-orange-700: #B33E04; --it-orange-glow: rgba(255, 106, 26, 0.45); /* Light-mode surface fallback (dark is primary; light is for docs / print / embeds) */ --it-paper: #FFFFFF; /* primary light surface */ --it-bone: #F6F6F4; /* default body bg */ --it-cloud: #ECECEA; /* card / raised */ --it-mist: #DCDDDB; /* hovered / nested */ --it-line-light: #C8C9C7; /* divider, hairline */ /* Semantic */ --it-success: #2ECC71; --it-warn: #F5A524; --it-danger: #FF4D4D; --it-info: #4DA3FF; /* ============== SEMANTIC ALIASES ============== */ --bg: var(--it-obsidian); --bg-elevated: var(--it-graphite); --bg-raised: var(--it-gunmetal); --bg-canvas: var(--it-black); --fg: var(--it-silver-200); --fg-2: var(--it-silver-300); --fg-3: var(--it-silver-400); --fg-muted: var(--it-silver-500); --fg-disabled: var(--it-silver-600); --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.12); --border-focus: var(--it-orange-500); --accent: var(--it-orange-500); --accent-hover: #FF7E33; --accent-pressed: var(--it-orange-600); --accent-fg: #0A0A0A; /* text on orange */ /* Brushed silver gradient — used on the "I" in monogram, hairlines */ --grad-silver: linear-gradient(180deg, #EAECEF 0%, #B9BEC5 35%, #6E7480 60%, #C9CCD1 100%); /* Premium orange gradient — used on "T", CTAs */ --grad-orange: linear-gradient(180deg, #FF8C42 0%, #FF6A1A 52%, #E5550A 100%); /* Accent slash — diagonal highlight (logo signature element) */ --grad-slash: linear-gradient(75deg, transparent 0%, rgba(255,200,140,0) 38%, #FFD8A8 49%, #FF6A1A 50%, #FFD8A8 51%, transparent 62%); /* Subtle vignette / cinematic glow */ --grad-cinematic: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,106,26,0.08) 0%, transparent 60%); /* ============== TYPE SCALE ============== */ --font-display: "Saira", "Inter", system-ui, sans-serif; --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-56: 3.5rem; --fs-72: 4.5rem; --fs-96: 6rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-mega: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.16em; /* used in eyebrows, nav labels */ --tracking-widest: 0.28em; /* wordmark caps spacing */ /* ============== SPACING (4px grid) ============== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* ============== RADII ============== */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px; /* ============== SHADOWS / ELEVATION ============== */ --shadow-1: 0 1px 2px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3); --shadow-2: 0 6px 16px rgba(0,0,0,0.65), 0 2px 4px rgba(0,0,0,0.55); --shadow-3: 0 18px 36px rgba(0,0,0,0.75), 0 6px 12px rgba(0,0,0,0.55); --shadow-4: 0 32px 60px rgba(0,0,0,0.85), 0 12px 24px rgba(0,0,0,0.6); /* Inset hairline — gives the "machined metal" edge */ --hairline-top: inset 0 1px 0 rgba(255,255,255,0.08); --hairline-all: inset 0 0 0 1px rgba(255,255,255,0.06); /* Orange glow (use sparingly) */ --glow-sm: 0 0 12px rgba(255,106,26,0.25); --glow-md: 0 0 24px rgba(255,106,26,0.35), 0 0 60px rgba(255,106,26,0.12); --glow-lg: 0 0 40px rgba(255,106,26,0.45), 0 0 100px rgba(255,106,26,0.18); /* ============== MOTION ============== */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* default UI ease */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* used sparingly */ --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-cinema: 720ms; } /* ============== SEMANTIC TYPE STYLES ============== */ .it-eyebrow { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent); } .it-h1, h1.it { font-family: var(--font-display); font-size: clamp(var(--fs-40), 5.5vw, var(--fs-96)); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-mega); color: var(--fg); text-transform: uppercase; } .it-h2, h2.it { font-family: var(--font-display); font-size: clamp(var(--fs-32), 3.5vw, var(--fs-56)); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); text-transform: uppercase; } .it-h3, h3.it { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg); } .it-h4, h4.it { font-family: var(--font-sans); font-size: var(--fs-20); font-weight: 600; line-height: var(--lh-snug); color: var(--fg); } .it-body { font-family: var(--font-sans); font-size: var(--fs-16); font-weight: 400; line-height: var(--lh-relaxed); color: var(--fg-2); } .it-body-sm { font-family: var(--font-sans); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-3); } .it-caption { font-family: var(--font-sans); font-size: var(--fs-12); letter-spacing: var(--tracking-wide); color: var(--it-silver-400); text-transform: uppercase; } .it-mono { font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: 0; color: var(--fg-3); } /* The brand "RAPID RESULTS." style — orange caps with wide tracking */ .it-tagline-orange { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--accent); } /* The "INTELLIGENT TECHNOLOGY." silver style */ .it-tagline-silver { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg); }