/* ============================================================ PONYTECH — Core Design Tokens Ford / S197 Mustang electrical & CAN specialist Dark, technical, industrial. Built on the current site. ============================================================ */ /* Rajdhani — local brand fonts */ @font-face { font-family: 'Rajdhani'; src: url('fonts/Rajdhani-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Rajdhani'; src: url('fonts/Rajdhani-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Rajdhani'; src: url('fonts/Rajdhani-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Rajdhani'; src: url('fonts/Rajdhani-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Rajdhani'; src: url('fonts/Rajdhani-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* Barlow + JetBrains Mono — Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ----------------------------- COLOR — RAW PALETTE Rooted in the site's actual #0a0a0a / #5ba4cf system, extended into a full scale for tokens and UI use. ----------------------------- */ /* Ink (backgrounds + surfaces, darkest → lightest) */ --ink-0: #000000; /* true black — logo field, deepest wells */ --ink-1: #0a0a0a; /* page background (matches site) */ --ink-2: #111111; /* raised surfaces — cards */ --ink-3: #161616; /* hover raise */ --ink-4: #1a1a1a; /* borders / dividers (matches site) */ --ink-5: #222222; /* strong borders */ --ink-6: #2a2a2a; /* input borders, separators */ /* Neutrals (text, muted content) */ --gray-1: #555555; /* footer / tertiary */ --gray-2: #777777; --gray-3: #999999; /* subheads / nav (matches site) */ --gray-4: #aaaaaa; /* secondary text */ --gray-5: #bbbbbb; /* audience list body */ --gray-6: #d4d4d4; /* body text (matches site) */ --gray-7: #e8e8e8; /* headings (matches site) */ --gray-8: #f2f2f2; --white: #ffffff; /* Signal blue — the accent, pulled from the site (#5ba4cf) and extended. Evokes diagnostic scope traces, CAN-hi, OEM Ford instrument-cluster illumination. */ --signal-50: #e6f2fb; --signal-100: #c9e2f5; --signal-200: #9fcce9; --signal-300: #7dc0e8; /* hover (matches site) */ --signal-400: #5ba4cf; /* PRIMARY (matches site) */ --signal-500: #4791bf; --signal-600: #3679a5; --signal-700: #285e82; --signal-800: #1c4260; --signal-900: #0f283c; /* Semantic circuit colors — used sparingly, for diagnostic status badges, code callouts, etc. Not brand-forward. */ --ok: #6bd58b; /* PASS / link OK */ --warn: #e8b84a; /* WARN / DTC pending */ --fault: #e5614c; /* FAULT / stored DTC */ --info: var(--signal-400); /* ----------------------------- SEMANTIC COLOR ROLES Use these in components, not the raw palette above. ----------------------------- */ --bg: var(--ink-1); --bg-surface: var(--ink-2); --bg-surface-2: var(--ink-3); --bg-inset: var(--ink-0); --fg: var(--gray-6); /* body */ --fg-strong: var(--gray-7); /* headings */ --fg-muted: var(--gray-3); /* sub / meta */ --fg-faint: var(--gray-1); /* footer / low-emphasis */ --border: var(--ink-4); /* default rule */ --border-strong: var(--ink-5); --border-focus: var(--signal-400); --accent: var(--signal-400); --accent-hover: var(--signal-300); --accent-ink: var(--ink-1); /* text on accent fills */ /* ----------------------------- TYPOGRAPHY - Display: Rajdhani — wide, industrial, technical sans. Brand font, loaded locally (fonts/Rajdhani-*.ttf). Weights 300–700 available. - Body: Barlow — humanist-industrial workhorse, same family tree. Excellent at small sizes. - Mono: JetBrains Mono — for codes, DTCs, VIN, PIDs. ----------------------------- */ --font-display: 'Rajdhani', 'Barlow Condensed', 'Oswald', 'Segoe UI', system-ui, sans-serif; --font-body: 'Barlow', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Roboto Mono', 'Courier New', monospace; /* Type scale — modular, slightly tight. Optimized for 16-20px body. */ --text-2xs: 0.6875rem; /* 11px — captions, labels, tags */ --text-xs: 0.8125rem; /* 13px — meta, nav, small UI */ --text-sm: 0.9375rem; /* 15px — dense body / cards */ --text-md: 1.0625rem; /* 17px — default body */ --text-lg: 1.25rem; /* 20px — lead / subhead */ --text-xl: 1.5rem; /* 24px — h3 */ --text-2xl: 2rem; /* 32px — h2 */ --text-3xl: 2.75rem; /* 44px — h1 */ --text-4xl: 3.75rem; /* 60px — hero display */ --text-5xl: 5rem; /* 80px — oversize display */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.6; --leading-loose: 1.8; --tracking-wider: 0.04em; /* PONYTECH wordmark feel */ --tracking-wide: 0.02em; --tracking-caps: 0.12em; /* OVERLINE / EYEBROW */ /* ----------------------------- SPACING — 4px base ----------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* ----------------------------- RADII — tight. This is a service business, not a SaaS. The site uses 3–4px; we stay in that range. ----------------------------- */ --radius-0: 0; --radius-1: 2px; /* focus outline, chips */ --radius-2: 3px; /* buttons (matches site) */ --radius-3: 4px; /* cards (matches site) */ --radius-4: 6px; /* larger surfaces */ /* ----------------------------- ELEVATION — mostly borders over shadows on dark UI. Shadows here are subtle ambient, not floating. ----------------------------- */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.6); --glow-signal: 0 0 0 1px var(--signal-400), 0 0 18px -4px var(--signal-400); /* ----------------------------- LAYOUT ----------------------------- */ --container-narrow: 720px; --container: 860px; /* matches site */ --container-wide: 1120px; /* ----------------------------- MOTION Short, linear-ish. No bouncy / overshoot / playful curves. ----------------------------- */ --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* ============================================================ SEMANTIC ELEMENT STYLES Apply these as base element rules so any HTML renders on-brand. ============================================================ */ html { font-size: 16px; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--fg-strong); font-family: var(--font-display); font-weight: 600; line-height: 1.3; letter-spacing: var(--tracking-wide); margin: 0 0 var(--space-5); } h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-wider); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } h5 { font-size: var(--text-md); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 700; } h6 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-muted); font-weight: 700; } p { margin: 0 0 var(--space-4); } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent-hover); } a:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; border-radius: var(--radius-1); } code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; } /* Utility: eyebrow / overline label — used heavily in this system */ .eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent); }