/* ============================================================= Jet City Labs — Design Tokens Brand colors sampled directly from official press-kit assets. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700;800;900&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,700&family=Abel&family=Hind+Madurai:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ----------------------------------------------------------- RAW COLORS ----------------------------------------------------------- */ /* Primary — brand yellow. Sampled from jcl_yellow_square.jpeg */ --jcl-yellow: #F1C848; --jcl-yellow-deep: #D9A82E; /* hover / press shadow */ --jcl-yellow-soft: #FBE9A8; /* tints, hover halos */ --jcl-yellow-pale: #FEF8E2; /* fills, callouts */ /* Ink — pure-ish black for the logo silhouette */ --jcl-ink: #0E0E0E; --jcl-charcoal: #1F1F1F; --jcl-graphite: #3A3A3A; --jcl-gray-1: #5C5C5C; --jcl-gray-2: #8A8A8A; --jcl-gray-3: #BDBDBD; --jcl-gray-4: #E2E2E2; --jcl-gray-5: #F2F0EB; --jcl-bone: #FAF6EC; /* warm off-white, ~Maker's Market poster bg */ /* Campaign red — sampled from "Create More" 2021 poster. Also exact match of the 2021 logo folder color "#9c1b1a". */ --jcl-red: #9C1A1A; --jcl-red-deep: #7A1212; --jcl-red-soft: #E8A8A8; /* Mural accents — from the Revelry Room interior rainbow mural. Use SPARINGLY for category tags, illustration, sub-brand cues. */ --jcl-rust: #C26A2B; --jcl-amber: #E29A3F; --jcl-cream: #E8D4A3; --jcl-teal: #2D6E6E; --jcl-plum: #5A2742; /* Semantic */ --jcl-success: #2F7A4A; --jcl-success-soft: #DDEAD8; --jcl-warning: #C18024; --jcl-warning-soft: #FBE9A8; --jcl-danger: #9C1A1A; --jcl-danger-soft: #F4D9D9; --jcl-info: #2D6E6E; --jcl-info-soft: #D8E6E6; /* Hairlines */ --jcl-hairline: rgba(14, 14, 14, 0.10); --jcl-hairline-bold: rgba(14, 14, 14, 0.22); --jcl-hairline-soft: rgba(14, 14, 14, 0.06); /* ----------------------------------------------------------- SEMANTIC SURFACES ----------------------------------------------------------- */ --bg-1: #FFFFFF; /* page default */ --bg-2: var(--jcl-bone); /* paper / section delineate */ --bg-3: var(--jcl-gray-5); --bg-inverse: var(--jcl-ink); --bg-accent: var(--jcl-yellow); --bg-poster: var(--jcl-red); --fg-1: var(--jcl-ink); --fg-2: var(--jcl-charcoal); --fg-3: var(--jcl-gray-1); --fg-4: var(--jcl-gray-2); --fg-inverse: #FFFFFF; --fg-accent: var(--jcl-red); /* link / hot-text */ --fg-on-yellow:var(--jcl-ink); --fg-on-red: #FFFFFF; /* ----------------------------------------------------------- TYPOGRAPHY ----------------------------------------------------------- - Display: Big Shoulders Display — bold, industrial, condensed Matches the marquee/poster voice (eg. "THE WARMUP"). - Body: Roboto — supplied in Fonts/ folder, the live-site workhorse. - Accent: Abel — light geometric, used for callouts/eyebrows. - Long-form:Hind Madurai — alternate humanist for editorial body (only when running text exceeds ~3 paragraphs). - Mono: JetBrains Mono via CDN, reserved for codes/SKUs. The lowercase "jet city labs" wordmark is a CUSTOM mark; use the SVG/PNG, not a webfont. ----------------------------------------------------------- */ --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif; --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --font-accent: "Abel", "Roboto", sans-serif; --font-long: "Hind Madurai", "Roboto", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Menlo", monospace; --font-sans: var(--font-body); /* alias */ /* Modular scale ~1.25 from 16px base */ --fs-micro: 11px; --fs-caption: 13px; --fs-body-s: 14px; --fs-body: 16px; --fs-body-l: 18px; --fs-h4: 20px; --fs-h3: 26px; --fs-h2: 34px; --fs-h1: 46px; --fs-display-s: 60px; --fs-display-m: 80px; --fs-display-l: 108px; --fs-display-xl: 144px; --lh-tight: 1.02; /* @kind other */ --lh-snug: 1.18; /* @kind other */ --lh-normal: 1.45; /* @kind other */ --lh-relaxed: 1.65; /* @kind other */ --tracking-tight: -0.015em; /* @kind other */ --tracking-normal: 0; /* @kind other */ --tracking-wide: 0.04em; /* @kind other */ --tracking-eyebrow: 0.18em; /* @kind other */ /* ----------------------------------------------------------- SPACING (8pt base, 4pt half-step) ----------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; --container-max: 1240px; /* @kind spacing */ --container-narrow: 880px; /* @kind spacing */ --gutter: clamp(20px, 4vw, 56px); /* @kind spacing */ /* ----------------------------------------------------------- RADII The wordmark is round and humanist — radii lean medium, never razor-square. Keep buttons pill-y, cards 6–10px. ----------------------------------------------------------- */ --radius-0: 0; --radius-1: 4px; --radius-2: 8px; --radius-3: 14px; --radius-4: 24px; --radius-pill: 999px; --radius-circle: 50%; /* ----------------------------------------------------------- SHADOWS ----------------------------------------------------------- */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(14,14,14,0.06), 0 1px 1px rgba(14,14,14,0.04); --shadow-2: 0 4px 14px rgba(14,14,14,0.08), 0 2px 4px rgba(14,14,14,0.04); --shadow-3: 0 12px 30px rgba(14,14,14,0.14), 0 4px 8px rgba(14,14,14,0.06); --shadow-4: 0 30px 60px rgba(14,14,14,0.22), 0 10px 20px rgba(14,14,14,0.10); --shadow-hot: 0 10px 30px rgba(241,200,72,0.40); /* yellow glow */ --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6); /* ----------------------------------------------------------- MOTION ----------------------------------------------------------- */ --duration-fast: 120ms; /* @kind other */ --duration-normal: 200ms; /* @kind other */ --duration-slow: 320ms; /* @kind other */ --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); /* @kind other */ --ease-in: cubic-bezier(0.5, 0, 1, 1); /* @kind other */ } /* ============================================================= ELEMENT DEFAULTS — opt-in by adding class="jcl" to ============================================================= */ .jcl, .jcl * { box-sizing: border-box; } .jcl { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .jcl h1, .jcl h2, .jcl h3, .jcl h4 { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); text-wrap: balance; } .jcl h1 { font-size: var(--fs-h1); } .jcl h2 { font-size: var(--fs-h2); } .jcl h3 { font-size: var(--fs-h3); font-weight: 700; } .jcl h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0; } .jcl .display-xl, .jcl .display-l, .jcl .display-m, .jcl .display-s { font-family: var(--font-display); font-weight: 900; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; text-wrap: balance; } .jcl .display-xl { font-size: var(--fs-display-xl); } .jcl .display-l { font-size: var(--fs-display-l); } .jcl .display-m { font-size: var(--fs-display-m); } .jcl .display-s { font-size: var(--fs-display-s); } .jcl .eyebrow { font-family: var(--font-accent); font-size: var(--fs-caption); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); } .jcl p { margin: 0 0 var(--space-4); text-wrap: pretty; max-width: 65ch; } .jcl a { color: var(--fg-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(156, 26, 26, 0.4); transition: text-decoration-color var(--duration-fast) var(--ease-standard); } .jcl a:hover { text-decoration-color: var(--jcl-red); } .jcl hr { border: 0; border-top: 1px solid var(--jcl-hairline); margin: var(--space-7) 0; } .jcl code, .jcl pre { font-family: var(--font-mono); font-size: 0.92em; background: var(--jcl-gray-5); padding: 2px 6px; border-radius: var(--radius-1); } /* ------------------------------------------------------------- BUTTONS — primary is yellow on ink, the brand's loudest CTA. ------------------------------------------------------------- */ .jcl .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body); letter-spacing: 0.01em; padding: 12px 22px; border-radius: var(--radius-pill); border: 2px solid transparent; background: transparent; color: var(--fg-1); cursor: pointer; transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); text-decoration: none; white-space: nowrap; } .jcl .btn:active { transform: translateY(1px); } .jcl .btn--primary { background: var(--jcl-yellow); color: var(--jcl-ink); border-color: var(--jcl-yellow); box-shadow: 0 4px 0 var(--jcl-yellow-deep); } .jcl .btn--primary:hover { background: var(--jcl-yellow-deep); border-color: var(--jcl-yellow-deep); box-shadow: 0 2px 0 var(--jcl-ink); } .jcl .btn--ink { background: var(--jcl-ink); color: #fff; border-color: var(--jcl-ink); } .jcl .btn--ink:hover { background: var(--jcl-charcoal); } .jcl .btn--ghost { border-color: var(--jcl-ink); color: var(--jcl-ink); } .jcl .btn--ghost:hover { background: var(--jcl-ink); color: #fff; } .jcl .btn--red { background: var(--jcl-red); border-color: var(--jcl-red); color: #fff; } .jcl .btn--red:hover { background: var(--jcl-red-deep); border-color: var(--jcl-red-deep); } .jcl .btn--sm { padding: 8px 14px; font-size: var(--fs-body-s); } .jcl .btn--lg { padding: 16px 28px; font-size: var(--fs-body-l); } /* Chips / tags */ .jcl .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: 600; background: var(--jcl-yellow-pale); color: var(--jcl-ink); border: 1px solid var(--jcl-hairline); } .jcl .chip--ink { background: var(--jcl-ink); color: #fff; border-color: var(--jcl-ink); } .jcl .chip--red { background: var(--jcl-red-soft); color: var(--jcl-red-deep); border-color: transparent; } .jcl .chip--teal { background: var(--jcl-info-soft); color: var(--jcl-teal); border-color: transparent; } /* Cards */ .jcl .card { background: var(--bg-1); border: 1px solid var(--jcl-hairline); border-radius: var(--radius-3); padding: var(--space-5); transition: box-shadow var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard); } .jcl .card--hover:hover { border-color: var(--jcl-hairline-bold); box-shadow: var(--shadow-2); transform: translateY(-2px); } .jcl .card--photo { padding: 0; overflow: hidden; } /* Focus */ .jcl :focus-visible { outline: 3px solid var(--jcl-yellow); outline-offset: 2px; border-radius: var(--radius-1); } /* ------------------------------------------------------------- "JET TRAIL" UTILITIES The wordmark's signature is the curved jet-trail flourish off the y. Reuse it as a section ornament. ------------------------------------------------------------- */ .jcl .jet-trail { display: inline-block; width: 64px; height: 24px; background: no-repeat center/contain url("data:image/svg+xml;utf8,"); }