/* ========================================================================== SPACEMEN DESIGN SYSTEM — theme.css -------------------------------------------------------------------------- THIS IS THE ONLY FILE YOU NEED TO EDIT TO RESKIN THE ENTIRE SITE. Change the tokens in the ":root" block below and every one of the site's pages updates: colours, fonts, corner radius, motion. Loaded AFTER styles.css on every page, so its base rules win. Font tags are injected into each page's by tools/sync-shell.py — if you change --font-display / --font-body here, update the FONT_LINK constant in that script too, then re-run it. ========================================================================== */ :root{ /* ---------- 1. BRAND PALETTE (edit these to reskin) ---------- */ --brand: #FF4D00; /* primary accent */ --brand-lite: #FF8A50; /* accent on dark backgrounds */ --brand-dark: #D93F00; /* hover / pressed */ --brand-tint: rgba(255,77,0,.08); /* washes, badge backgrounds */ --brand-tint-2: rgba(255,77,0,.16); --ink: #0F0E0C; /* near-black text + dark bands */ --paper: #FAF9F5; /* warm off-white page bg */ --surface: #FFFFFF; /* cards on paper */ --dim: rgba(15,14,12,.60); /* muted text on light */ --dimmer: rgba(15,14,12,.42); --lite: rgba(250,249,245,.65);/* muted text on dark */ --liter: rgba(250,249,245,.42); --line: rgba(15,14,12,.12); /* hairlines on light */ --line-lite: rgba(250,249,245,.14);/* hairlines on dark */ --ok: #22C55E; --warn: #F59E0B; /* ---------- 2. TYPOGRAPHY ---------- */ --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --track-tight: -.025em; /* headline letter-spacing */ --track-mono: .16em; /* eyebrow / label tracking */ /* ---------- 3. SHAPE ---------- */ --radius: 2px; /* buttons, inputs */ --radius-lg: 6px; /* cards */ --radius-pill: 99px; /* ---------- 4. MOTION ---------- */ --ease: cubic-bezier(.22,.8,.3,1); --dur: .25s; /* ---------- 5. LAYOUT ---------- */ --wrap: 1280px; --wrap-narrow: 1140px; /* ---------- 6. LEGACY BRIDGE ---------- Old hardcoded names kept as aliases so any stylesheet or inline style still referencing them picks up the new palette automatically. */ --primary: var(--brand); --primary-light:var(--brand-lite); --accent: var(--brand); } /* ========================================================================== BASE — applies the tokens over the legacy styles.css defaults ========================================================================== */ html{ -webkit-text-size-adjust:100%; } body{ font-family: var(--font-body); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); letter-spacing: var(--track-tight); text-wrap: balance; color: inherit; } p{ text-wrap: pretty; } a{ color: inherit; transition: color var(--dur) var(--ease); } a:hover{ color: var(--brand); } ::selection{ background: var(--brand); color: var(--paper); } /* ========================================================================== LEGACY COMPONENT RESKIN Maps the old styles.css component classes onto the new design language so the ~300 existing pages inherit the redesign without per-page edits. ========================================================================== */ /* --- accents / highlights --- */ .highlight, .highlight-gradient{ color: var(--brand); -webkit-text-fill-color: var(--brand); background: none; } .section--dark .highlight, .section--dark .highlight-gradient, .section--accent .highlight, .section--accent .highlight-gradient{ color: var(--brand-lite); -webkit-text-fill-color: var(--brand-lite); } /* --- surfaces --- */ .section--dark, .section--accent{ background: var(--ink); color: var(--paper); } .section--light{ background: var(--surface); } .text-muted{ color: var(--dim); } .text-muted-light{ color: var(--lite); } .section--dark .text-muted, .section--accent .text-muted{ color: var(--lite); } /* --- eyebrow tags --- */ .tag{ font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; border-radius: var(--radius-pill); } .tag--purple{ background: var(--brand-tint); color: var(--brand); } .tag--dark{ background: var(--brand-tint); color: var(--brand); } .tag--white{ background: rgba(250,249,245,.08); color: var(--lite); } /* --- buttons --- */ .btn{ font-family: var(--font-display); font-weight: 600; border-radius: var(--radius); transition: all var(--dur) var(--ease); } .btn--primary{ background: var(--brand); color: var(--ink); } .btn--primary:hover{ background: var(--ink); color: var(--paper); transform: none; box-shadow: none; } /* Inherits the surrounding text colour, so the same class stays legible on light sections and dark bands alike. */ .btn--outline{ background: transparent; color: inherit; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); } .btn--outline:hover{ border-color: var(--brand); color: var(--brand); } .btn--outline-dark{ background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn--outline-dark:hover{ border-color: var(--brand); color: var(--brand); } .btn--white{ background: var(--paper); color: var(--ink); } .btn--white:hover{ background: var(--brand); color: var(--ink); } /* --- form controls --- */ input[type="text"],input[type="email"],input[type="url"],input[type="tel"], input[type="search"],textarea,select{ font-family: var(--font-body); border-radius: var(--radius); } input:focus,textarea:focus,select:focus{ outline:none; border-color: var(--brand); } /* --- generic focus ring (a11y) --- */ :focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; } /* ========================================================================== GLOBAL SHELL — navbar + footer injected by tools/sync-shell.py ========================================================================== */ /* ---------- NAVBAR ---------- */ .sm-nav{ position: sticky; top: 0; z-index: 500; background: color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .sm-nav__inner{ max-width: var(--wrap); margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .sm-logo{ display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--ink); } .sm-logo__svg{ height: 35px; width: auto; display: block; } .sm-logo__mark{ font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--ink); } .sm-logo__dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--brand); display: inline-block; } .sm-nav__links{ display: flex; align-items: center; gap: 30px; font-size: 14px; color: var(--dim); } .sm-nav__links a:hover{ color: var(--brand); } .sm-nav__cta{ background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: var(--radius); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .sm-nav__cta:hover{ background: var(--brand); color: var(--ink); } .sm-nav__burger{ display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; align-items: center; justify-content: center; } .sm-nav__burger span{ display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; } .sm-nav__burger span::before,.sm-nav__burger span::after{ content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink); } .sm-nav__burger span::before{ top: -6px; } .sm-nav__burger span::after{ top: 6px; } @media (max-width: 900px){ .sm-nav__inner{ padding: 14px 20px; } .sm-nav__burger{ display: inline-flex; } .sm-nav__links{ position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 20px 16px; display: none; } .sm-nav.is-open .sm-nav__links{ display: flex; } .sm-nav__links a{ padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); } .sm-nav__links a:last-child{ border-bottom: 0; } .sm-nav__cta{ display: none; } } /* ---------- FOOTER ---------- */ .sm-footer{ background: var(--ink); color: var(--paper); border-top: 1px solid var(--line-lite); font-family: var(--font-body); } .sm-footer__inner{ max-width: var(--wrap); margin: 0 auto; padding: 56px 32px 32px; display: flex; flex-direction: column; gap: 34px; } .sm-footer__top{ display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .sm-footer__brand{ display: flex; flex-direction: column; gap: 14px; max-width: 300px; } .sm-footer__brand .sm-logo__mark{ color: var(--paper); } .sm-footer .sm-logo{ color: var(--paper); } .sm-footer__brand p{ font-size: 14px; line-height: 1.6; color: var(--lite); } .sm-footer__cols{ display: flex; gap: 56px; flex-wrap: wrap; } .sm-footer__col{ display: flex; flex-direction: column; gap: 11px; font-size: 14px; } .sm-footer__col-label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; color: var(--lite); text-transform: uppercase; } .sm-footer__col a{ color: var(--paper); } .sm-footer__col a:hover{ color: var(--brand); } .sm-footer__review{ border-top: 1px solid var(--line-lite); padding-top: 24px; } .sm-footer__review-link{ display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line-lite); padding: 10px 18px; border-radius: var(--radius-pill); transition: border-color var(--dur) var(--ease); } .sm-footer__review-link:hover{ border-color: var(--brand); } .sm-footer__review-text{ font-size: 13px; color: var(--lite); } .sm-footer__review-text strong{ color: var(--paper); font-weight: 700; } .sm-footer__bar{ display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--liter); border-top: 1px solid var(--line-lite); padding-top: 22px; } .sm-footer__legal{ display: flex; gap: 20px; } .sm-footer__legal a{ color: rgba(250,249,245,.55); } .sm-footer__socials{ display: flex; gap: 12px; align-items: center; } .sm-footer__socials a{ width: 32px; height: 32px; border: 1px solid var(--line-lite); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--lite); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .sm-footer__socials a:hover{ border-color: var(--brand); color: var(--brand); } @media (max-width: 640px){ .sm-footer__inner{ padding: 40px 20px 28px; } .sm-footer__cols{ gap: 32px; } } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }