/* ============================================================ JJN NETO TRANSPORTES — Core Foundations Colors + Typography tokens (base + semantic) Import this file in any HTML you build for the brand. ============================================================ */ /* ---- Typefaces (Google Fonts) ---- Archivo — display / headings (industrial, confident, modern) Hanken Grotesk — body / UI (warm, highly legible) Spline Sans Mono — figures, codes, tracking numbers, labels NOTE: served from Google Fonts CDN. If you need offline/self-hosted files, see /fonts and the README font note. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap'); :root { /* ============ BRAND CORE ============ */ --jjn-amber: #EDAB28; /* primary — sampled from the logo */ --jjn-amber-bright: #F6C24B; /* hover / highlight on dark */ --jjn-amber-deep: #C8901C; /* pressed / borders on amber */ --jjn-amber-tint: #FBEACB; /* soft fill on light surfaces */ --jjn-navy: #0C1825; /* primary ink / dark canvas — from logo bg */ --jjn-navy-700: #15293D; /* raised dark surface */ --jjn-navy-600: #1E3A52; /* dark border / hairline */ --jjn-navy-500: #2C4D6B; /* muted accent on dark */ /* ============ ECO SECONDARY (sustainability cue — used sparingly) ============ */ --jjn-eco: #1F6B4F; /* deep pine — compliance / sustainability */ --jjn-eco-bright:#2E9269; /* eco accent on dark */ --jjn-eco-deep: #154C38; --jjn-eco-tint: #E3F0EA; /* ============ NEUTRALS (cool steel — complements navy) ============ */ --steel-0: #FFFFFF; --steel-50: #F6F7F9; /* page background (light) */ --steel-100: #ECEFF3; /* sunken / alt rows */ --steel-200: #DCE1E8; /* hairline borders */ --steel-300: #C2CAD4; /* disabled borders */ --steel-400: #97A1AE; /* muted text */ --steel-500: #6B7787; /* secondary text */ --steel-600: #4B5765; /* body text on light */ --steel-700: #313C49; /* strong text */ --steel-900: #0C1825; /* = navy, primary text on light */ /* ============ SEMANTIC SURFACES + TEXT ============ */ --bg-page: var(--steel-50); --bg-surface: var(--steel-0); --bg-sunken: var(--steel-100); --bg-dark: var(--jjn-navy); --bg-dark-alt: var(--jjn-navy-700); --fg-1: var(--steel-900); /* primary text */ --fg-2: var(--steel-600); /* body text */ --fg-3: var(--steel-500); /* secondary */ --fg-4: var(--steel-400); /* muted / captions */ --fg-on-amber: var(--jjn-navy); /* text on amber */ --fg-on-dark: #EAF0F6; /* text on navy */ --fg-on-dark-muted: #8DA0B4; --border-1: var(--steel-200); --border-2: var(--steel-300); --border-dark: var(--jjn-navy-600); /* ============ STATUS (muted, industrial) ============ */ --ok: #2F8A5B; --ok-tint: #E4F1EA; --warn: #D98A14; --warn-tint: #FBEED2; --danger: #C5453B; --danger-tint: #F8E3E1; --info: #2F6DB0; --info-tint: #E2ECF6; /* ============ TYPE FAMILIES ============ */ --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, monospace; /* ============ TYPE SCALE (fluid-ready, px base) ============ */ --t-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem); /* @kind other */ /* hero */ --t-h1: 3rem; --t-h2: 2.25rem; --t-h3: 1.625rem; --t-h4: 1.25rem; --t-body-lg: 1.125rem; --t-body: 1rem; --t-sm: 0.875rem; --t-xs: 0.75rem; --lh-tight: 1.04; /* @kind font */ --lh-snug: 1.18; /* @kind font */ --lh-body: 1.6; /* @kind font */ --ls-tight: -0.02em; --ls-eyebrow: 0.14em; /* ============ RADII ============ */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px; /* ============ SPACING (4px base) ============ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ============ ELEVATION (cool navy-tinted shadows, no blur-haze) ============ */ --shadow-sm: 0 1px 2px rgba(12,24,37,0.06), 0 1px 1px rgba(12,24,37,0.04); --shadow-md: 0 4px 12px rgba(12,24,37,0.08), 0 2px 4px rgba(12,24,37,0.05); --shadow-lg: 0 16px 40px rgba(12,24,37,0.12), 0 4px 10px rgba(12,24,37,0.06); --shadow-amber: 0 10px 30px rgba(237,171,40,0.28); /* ============ MOTION ============ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur: 280ms; /* @kind other */ --dur-slow: 520ms; /* @kind other */ } /* ============================================================ SEMANTIC ELEMENT DEFAULTS Apply by adding the matching class, or scope to a container. ============================================================ */ .jjn { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-page); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .eyebrow { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--jjn-amber-deep); } .display { font-family: var(--font-display); font-weight: 800; font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } h1, .h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: -0.01em; } h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; } h4, .h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h4); line-height: 1.3; } p, .p { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); } .lead { font-size: var(--t-body-lg); line-height: 1.5; color: var(--fg-2); } .small { font-size: var(--t-sm); } .mono, .stat-num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }