@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ============================================================ SFU Racerbot design system — "Constructor in daylight" Racing structure (condensed caps, angled blocks, checker edges, navy hero bands) on a white + navy + blue palette. ============================================================ */ :root { color-scheme: light dark; /* grounds */ --paper: #ffffff; --wash: #f3f5f9; --wash-2: #e9edf4; /* navy world (hero bands, footer, CTA bands) */ --navy: #0c1e3a; --navy-2: #13294b; --navy-line: rgba(154, 183, 220, 0.18); /* text on light */ --ink: #16233d; --muted: #4c5a76; --faint: #7a89a6; --heading: var(--navy); /* text on navy */ --snow: #f2f6fb; --mist: #aebfd9; /* accents */ --blue: #1d5f9e; --blue-deep: #164a7c; --blue-hi: #7fb2e5; /* hairlines on light */ --line: #dbe1ec; --line-2: #c8d1e0; /* fixed regardless of theme: checker flag squares and the sponsor-logo tray, which needs a predictable light backdrop for third-party brand marks */ --checker: #ffffff; --chip: #ffffff; /* type */ --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif; --font-body: 'Public Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* ------------------------------------------------------------ Dark mode — "Constructor at night". Same racing system, grounds invert to a deep blue-black (never pure black), hero/footer/CTA bands step up one shade so they still read as distinct panels, and the accent blue brightens so it stays legible as text on a dark ground (it already worked fine as a button fill either way). Defaults to system preference; a `data-theme` attribute on (set by the navbar toggle, see navbar.html) overrides it. The `:not([data-theme])` guard keeps the media-query block from fighting an explicit choice. ------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --paper: #0b1626; --wash: #101f36; --wash-2: #17273f; --navy: #16294c; --navy-2: #1e355c; --navy-line: rgba(154, 183, 220, 0.16); --ink: #dde5f2; --muted: #9fb0cc; --faint: #71829f; --heading: #f3f7fc; --blue: #3f7fc4; --blue-deep: #2f6690; --line: rgba(154, 183, 220, 0.18); --line-2: rgba(154, 183, 220, 0.28); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #0b1626; --wash: #101f36; --wash-2: #17273f; --navy: #16294c; --navy-2: #1e355c; --navy-line: rgba(154, 183, 220, 0.16); --ink: #dde5f2; --muted: #9fb0cc; --faint: #71829f; --heading: #f3f7fc; --blue: #3f7fc4; --blue-deep: #2f6690; --line: rgba(154, 183, 220, 0.18); --line-2: rgba(154, 183, 220, 0.28); } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--paper); color: var(--ink); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; } a { text-decoration: none; color: inherit; } h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.98; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } /* ------------------------------------------------------------ Navy hero band (every page opens with one). Old blueprint hero classes are repurposed: `.blueprint-bg` is now the navy band, `.hero-fade::after` its checker edge. ------------------------------------------------------------ */ .blueprint-bg { position: relative; background-color: var(--navy); background-image: linear-gradient(rgba(154, 183, 220, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(154, 183, 220, 0.06) 1px, transparent 1px); background-size: 48px 48px; color: var(--snow); } /* Checker strip along the bottom edge of hero bands */ .hero-fade::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-conic-gradient(var(--checker) 0 25%, transparent 0 50%) 0 0/20px 20px; pointer-events: none; } /* Legacy blueprint decorations — retired with the old identity */ .svg-decoration-topleft, .svg-decoration-topright, .svg-decoration-bg { display: none; } /* ------------------------------------------------------------ Labels & rules ------------------------------------------------------------ */ .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 0.65rem; } .eyebrow::before { content: ''; width: 26px; height: 2px; background: currentColor; flex-shrink: 0; } /* eyebrows sitting on navy need the lighter blue */ .blueprint-bg .eyebrow, .footer-cta .eyebrow { color: var(--blue-hi); } /* ------------------------------------------------------------ Buttons — blocky, one sheared corner (the racing cue) ------------------------------------------------------------ */ .btn-primary, .btn-ghost { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.8rem 1.9rem; display: inline-block; clip-path: polygon(0 0, 100% 0, 100% 100%, 11px 100%); transition: background 0.18s, color 0.18s, border-color 0.18s; } .btn-primary { background: var(--blue); color: #ffffff; } .btn-primary:hover { background: var(--blue-deep); } /* ghost inherits the section's text color, so it works on white (navy text) and on navy bands (white text) alike */ .btn-ghost { border: 1px solid; border-color: color-mix(in srgb, currentColor 45%, transparent); color: inherit; } .btn-ghost:hover { border-color: currentColor; } /* ------------------------------------------------------------ Footer CTA band (navy bookend, checker on its top edge) ------------------------------------------------------------ */ .footer-cta { position: relative; background: var(--navy); color: var(--snow); } .footer-cta::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-conic-gradient(var(--checker) 0 25%, transparent 0 50%) 0 0/20px 20px; pointer-events: none; } .footer-cta-section { padding: 6.5rem 1.5rem 6rem; text-align: center; } .footer-cta-eyebrow { margin-bottom: 1.1rem; } .footer-cta-title { font-size: clamp(2.6rem, 6vw, 4.4rem); color: #ffffff; margin-bottom: 1.25rem; } .footer-cta-description { color: var(--mist); max-width: 54ch; margin: 0 auto 2.4rem; line-height: 1.7; font-size: 1rem; } .footer-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .footer-cta-button { font-size: 1.05rem; padding: 0.9rem 2.4rem; } /* ------------------------------------------------------------ Shared bits ------------------------------------------------------------ */ .vehicle-img { object-fit: cover; } .sponsor-track { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 1.5rem 0; gap: 1.25rem; } .sponsor-track a { display: grid; place-items: center; border: 1px solid var(--line); background: var(--chip); padding: 1.1rem 1.8rem; transition: border-color 0.18s; } .sponsor-track a:hover { border-color: var(--blue); } /* Scroll fade-in (used by 404 + any future use) */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fade-in { opacity: 1; transform: none; transition: none; } }