/* ============================================================ ot.css — OnTrack Fiber shared design system ------------------------------------------------------------ Extracted from the approved homepage (root /index.html) inline styles. Uses ot-* naming to avoid collision with the legacy site.css / site-* shell. This file is theme-aware (data-theme on ) and self-contained: pages that load ot.css do NOT need site.css. Phase 1A scope: tokens, typography, buttons, header/nav, mobile nav, footer, and the quote/contact + form components needed by the /request-a-quote/ pilot. ============================================================ */ /* ============================================================ BASE RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 5rem; hanging-punctuation: first last; } body { min-height: 100dvh; line-height: 1.55; overflow-x: hidden; font-family: var(--font-body, system-ui, sans-serif); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } ul[role='list'], ol[role='list'] { list-style: none; } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.1; letter-spacing: -0.02em; } p, li, figcaption { text-wrap: pretty; } ::selection { background: color-mix(in oklab, var(--color-primary) 30%, transparent); color: var(--color-text); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; } button { cursor: pointer; background: none; border: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } a, button, [role='button'], input, textarea, select { transition: color 180ms cubic-bezier(.16,1,.3,1), background 180ms cubic-bezier(.16,1,.3,1), border-color 180ms cubic-bezier(.16,1,.3,1), box-shadow 180ms cubic-bezier(.16,1,.3,1), transform 180ms cubic-bezier(.16,1,.3,1); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* ============================================================ DESIGN TOKENS — LIGHT MODE ============================================================ */ :root, [data-theme='light'] { --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --color-bg: #fcfcfc; --color-surface: #ffffff; --color-surface-2: #f5f5f7; --color-surface-offset: #ececf0; --color-surface-offset-2: #dedee5; --color-surface-dynamic: #c8c9d3; --color-divider: #e2e2e8; --color-border: #cdced6; --color-text: #000623; --color-text-muted: #4a4f66; --color-text-faint: #8b91a5; --color-text-inverse: #fcfcfc; --color-primary: #ff290e; --color-primary-hover: #e51f06; --color-primary-active: #aa1d15; --color-primary-highlight: #ffd8d2; --color-accent: #000623; --color-signal: #ff290e; --color-success: #16a34a; --color-warning: #d97706; --color-error: #dc2626; --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --transition-interactive: 200ms cubic-bezier(.16,1,.3,1); --shadow-sm: 0 1px 2px rgba(0,6,35,.05), 0 1px 1px rgba(0,6,35,.04); --shadow-md: 0 4px 12px rgba(0,6,35,.07), 0 2px 4px rgba(0,6,35,.04); --shadow-lg: 0 20px 40px -8px rgba(0,6,35,.14), 0 8px 16px -4px rgba(0,6,35,.07); --shadow-glow: 0 0 0 1px rgba(255,41,14,.15), 0 8px 32px -8px rgba(255,41,14,.28); --content-narrow: 720px; --content-default: 1080px; --content-wide: 1280px; } /* ============================================================ DESIGN TOKENS — DARK MODE ============================================================ */ [data-theme='dark'] { --color-bg: #000623; --color-surface: #0a1138; --color-surface-2: #131a45; --color-surface-offset: #1c2454; --color-surface-offset-2: #262e64; --color-surface-dynamic: #323b75; --color-divider: #1c2454; --color-border: #2d3668; --color-text: #fcfcfc; --color-text-muted: #a8afc6; --color-text-faint: #6b7290; --color-text-inverse: #000623; --color-primary: #ff290e; --color-primary-hover: #ff5a44; --color-primary-active: #ff8273; --color-primary-highlight: #55121c; --color-accent: #fcfcfc; --color-signal: #ff290e; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.45); --shadow-lg: 0 20px 40px -8px rgba(0,0,0,.55); --shadow-glow: 0 0 0 1px rgba(255,41,14,.22), 0 8px 32px -8px rgba(255,41,14,.4); } /* ============================================================ UTILITIES ============================================================ */ .container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .container-narrow { width: 100%; max-width: var(--content-narrow); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-primary); } .eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; } .section-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; color: var(--color-text); } .section-lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 60ch; line-height: 1.55; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; font-size: var(--text-sm); font-weight: 600; font-family: var(--font-body); border-radius: var(--radius-lg); text-decoration: none; white-space: nowrap; line-height: 1; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer; transition: all var(--transition-interactive); } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-surface-2); border-color: var(--color-text-muted); } .btn-ghost { color: var(--color-text-muted); background: transparent; } .btn-ghost:hover { color: var(--color-text); background: var(--color-surface-2); } .btn-lg { padding: .875rem 1.75rem; font-size: var(--text-base); } /* ============================================================ HEADER ============================================================ */ .ot-header { position: sticky; top: 0; z-index: 50; background: var(--color-surface); border-bottom: 1px solid var(--color-divider); padding: 1rem clamp(1rem, 4vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Logo */ .ot-logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; } .ot-logo-img { height: 30px; width: auto; display: block; flex: none; } .ot-logo-img.dark-variant { display: none; } [data-theme='dark'] .ot-logo-img.light-variant { display: none; } [data-theme='dark'] .ot-logo-img.dark-variant { display: block; } /* Desktop nav */ .ot-nav { display: none; gap: .25rem; align-items: center; } @media (min-width: 880px) { .ot-nav { display: flex; } } .ot-nav a { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); text-decoration: none; padding: .5rem .875rem; border-radius: var(--radius-md); position: relative; } .ot-nav a:hover { color: var(--color-text); background: var(--color-surface-2); } .ot-nav a.active { color: var(--color-text); } .ot-nav a.active::after { content: ""; position: absolute; left: .875rem; right: .875rem; bottom: 2px; height: 2px; background: var(--color-primary); border-radius: 1px; } /* Header actions */ .ot-header-actions { display: flex; align-items: center; gap: .5rem; } .ot-header-actions .btn { display: none; } @media (min-width: 880px) { .ot-header-actions .btn { display: inline-flex; } } /* Theme toggle */ .ot-theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted); border: 1px solid var(--color-border); flex: none; } .ot-theme-toggle:hover { color: var(--color-text); background: var(--color-surface-2); } /* Hamburger */ .ot-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--color-text); border: 1px solid var(--color-border); flex: none; } @media (min-width: 880px) { .ot-mobile-toggle { display: none; } } /* Mobile nav panel */ .ot-mobile-nav { display: none; padding: 1rem clamp(1rem, 4vw, 2rem) 1.5rem; background: var(--color-surface); border-bottom: 1px solid var(--color-divider); flex-direction: column; gap: .25rem; } .ot-mobile-nav.open { display: flex; } .ot-mobile-nav a { padding: .75rem 1rem; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); font-weight: 500; } .ot-mobile-nav a:hover { background: var(--color-surface-2); } .ot-mobile-nav .btn { margin-top: .5rem; justify-content: center; } .ot-mobile-nav-divider { height: 1px; background: var(--color-divider); margin: .5rem 0; border: none; } .ot-mobile-nav-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-faint); padding: .5rem 1rem 0; } /* ============================================================ PAGE INTRO (shell pages — eyebrow + title + lead + side card) ============================================================ */ .ot-page-intro { position: relative; background: var(--color-surface); border-bottom: 1px solid var(--color-divider); padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); } .ot-intro-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 880px) { .ot-intro-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } } .ot-intro-grid .eyebrow { margin-bottom: 1rem; } .ot-intro-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; color: var(--color-text); margin-bottom: 1rem; max-width: 20ch; } /* Info / "what to send" card */ .ot-info-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-md); } .ot-info-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-faint); display: block; margin-bottom: .875rem; } .ot-check-list { list-style: none; display: grid; gap: .625rem; } .ot-check-list li { display: flex; align-items: flex-start; gap: .625rem; font-size: var(--text-sm); color: var(--color-text); } .ot-check-list li::before { content: ""; margin-top: .5rem; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex: none; } /* ============================================================ QUOTE / CONTACT SECTION + FORM ============================================================ */ .ot-contact { position: relative; background: radial-gradient(60% 60% at 100% 100%, color-mix(in oklab, var(--color-primary) 10%, transparent), transparent 70%), var(--color-bg); padding-block: clamp(3rem, 7vw, 5.5rem); } .ot-quote-grid { max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; } @media (min-width: 960px) { .ot-quote-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } } /* Form card */ .ot-form-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-md); } .ot-form-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .ot-form-head h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); } .ot-form-head .turnaround { font-family: var(--font-mono); font-size: 11px; color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface)); padding: .375rem .625rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--color-primary) 25%, transparent); text-transform: uppercase; letter-spacing: 0.1em; } .ot-form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .ot-form-grid.cols-2 { grid-template-columns: 1fr 1fr; } } .ot-field { display: flex; flex-direction: column; gap: .375rem; } .ot-field label { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; } .ot-field label .req { color: var(--color-primary); } .ot-field input, .ot-field textarea, .ot-field select { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .75rem .875rem; font-size: var(--text-sm); color: var(--color-text); font-family: var(--font-body); width: 100%; } .ot-field textarea { min-height: 120px; resize: vertical; } .ot-field input:focus, .ot-field textarea:focus, .ot-field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 18%, transparent); } .ot-field input::placeholder, .ot-field textarea::placeholder { color: var(--color-text-faint); } .ot-field input:disabled { opacity: .6; cursor: not-allowed; } .ot-field .helper-text { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); } .ot-form-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-divider); } .ot-form-actions .helper-text { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); } /* Inline form status message (shown after submit) */ .ot-form-message { display: none; margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--color-primary) 25%, transparent); background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface)); color: var(--color-text); font-size: var(--text-sm); } /* Detail / "what happens next" panel */ .ot-detail-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(1.5rem, 3vw, 2rem); } .ot-detail-panel .eyebrow { margin-bottom: 1rem; } .ot-detail-panel h2 { margin-bottom: 1.25rem; } /* ============================================================ INLINE LINKS ============================================================ */ .ot-link { color: var(--color-primary); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--transition-interactive); } .ot-link:hover { border-bottom-color: var(--color-primary); } /* ============================================================ SERVICE / CONTENT PAGE SECTIONS (Phase 1B-A) ------------------------------------------------------------ Reusable section rhythm + cards for the migrated service pages. Mirrors the ot-page-intro / ot-contact spacing so shell pages share the homepage/quote visual language. ============================================================ */ .ot-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .ot-section.muted { background: var(--color-surface-2); border-block: 1px solid var(--color-divider); } /* Hero CTA row (reused on intro + bottom CTA) */ .ot-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } /* Two-column: body copy + side info card */ .ot-split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 880px) { .ot-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } } .ot-split .section-title { margin: .75rem 0 1rem; } .ot-section-copy { color: var(--color-text-muted); font-size: var(--text-base); max-width: 60ch; } /* Three-up card grid */ .ot-grid-3 { display: grid; gap: clamp(1rem, 3vw, 1.5rem); grid-template-columns: 1fr; } @media (min-width: 720px) { .ot-grid-3 { grid-template-columns: repeat(3, 1fr); } } /* Generic content card */ .ot-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-sm); } .ot-card h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin-bottom: .875rem; } .ot-card p { color: var(--color-text-muted); font-size: var(--text-sm); } /* Bulleted lists inside cards */ .ot-bullets { list-style: none; display: grid; gap: .625rem; } .ot-bullets li { display: flex; align-items: flex-start; gap: .625rem; font-size: var(--text-sm); color: var(--color-text-muted); } .ot-bullets li::before { content: ""; margin-top: .5rem; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex: none; } /* Related-links grid (reuses relatedLinks() .related-links markup) */ .ot-link-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; } @media (min-width: 720px) { .ot-link-grid { grid-template-columns: 1fr 1fr; } } .ot-link-grid .related-links h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin-bottom: 1rem; } .ot-link-grid .related-links ul { list-style: none; display: grid; gap: .5rem; } .ot-link-grid .related-links a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); } .ot-link-grid .related-links a:hover { color: var(--color-primary); } /* FAQ accordion (reuses faqMarkup() .faq-item markup) */ .ot-faq { display: grid; gap: .75rem; max-width: var(--content-narrow); } .ot-faq .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; } .ot-faq summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; color: var(--color-text); font-size: var(--text-sm); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .ot-faq summary::-webkit-details-marker { display: none; } .ot-faq summary::after { content: "+"; color: var(--color-primary); font-size: 1.25rem; line-height: 1; } .ot-faq details[open] summary::after { content: "\2013"; } .ot-faq p { padding: 0 1.25rem 1.25rem; color: var(--color-text-muted); font-size: var(--text-sm); } /* Bottom CTA panel */ .ot-cta { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--shadow-md); display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 760px) { .ot-cta { grid-template-columns: 1.5fr 1fr; } } .ot-cta .section-title { margin: .5rem 0 .75rem; } .ot-cta p { color: var(--color-text-muted); } .ot-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; } @media (min-width: 760px) { .ot-cta-actions { justify-content: flex-end; } } /* ============================================================ ANSWER / ARTICLE PAGES (Phase 1B-C) ------------------------------------------------------------ Prose layout for the answer SEO pages: a narrow article container with individual h2+p sections. Intentionally wider line-height than card copy for readability. ============================================================ */ .ot-article { max-width: var(--content-narrow); margin: 0 auto; display: grid; gap: clamp(2rem, 4vw, 3rem); } .ot-article-section h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--color-text); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: .875rem; } .ot-article-section p { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.72; max-width: 65ch; } /* Multi-paragraph and list spacing within one section */ .ot-article-section p + p { margin-top: .875rem; } .ot-article-section p + ul, .ot-article-section ul + p { margin-top: .875rem; } /* Bulleted lists (legal / prose) */ .ot-article-section ul { list-style: disc; padding-left: 1.5rem; display: grid; gap: .5rem; } .ot-article-section li { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.72; } .ot-article-section strong { color: var(--color-text); font-weight: 600; } /* Inline links within article prose */ .ot-article-section a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Section intro block (eyebrow + title + lead before a grid) */ .ot-section-head { max-width: 54ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .ot-section-head .section-title { margin: .75rem 0 .75rem; } /* Auto-fit card grid: 2-5 cards, wraps gracefully */ .ot-grid-auto { display: grid; gap: clamp(1rem, 3vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } /* Numbered process step grid */ .ot-step-grid { display: grid; gap: clamp(1rem, 3vw, 1.5rem); grid-template-columns: 1fr; } @media (min-width: 640px) { .ot-step-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .ot-step-grid { grid-template-columns: repeat(4, 1fr); } } .ot-step-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-sm); } .ot-step-card h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--color-text); margin: .75rem 0 .5rem; } .ot-step-card p { color: var(--color-text-muted); font-size: var(--text-sm); } .ot-step-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: color-mix(in oklab, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0; border: 1px solid color-mix(in oklab, var(--color-primary) 25%, transparent); } /* ============================================================ COVERAGE — interactive map, region cards, state pills (used by /coverage.html; reuses tokens, adds coverage patterns) ============================================================ */ /* Map container — dark in both themes; map SVG renders on dark bg */ .ot-coverage-map { background: #010c2a; border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,.07); overflow: hidden; } .ot-coverage-map svg { display: block; width: 100%; } /* Map legend */ .ot-coverage-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; margin-top: 1rem; } .ot-coverage-legend-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-faint); margin-right: .375rem; } .ot-leg-item { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--color-text-muted); margin-right: .5rem; } .ot-leg-swatch { width: 22px; height: 9px; border-radius: 2px; flex: none; } /* Region cards — 2-col grid with per-region top accent */ .ot-region-grid { display: grid; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; margin-top: clamp(1.5rem, 3vw, 2rem); } @media (min-width: 640px) { .ot-region-grid { grid-template-columns: 1fr 1fr; } } .ot-region-card { background: var(--color-surface); padding: 1.75rem 1.5rem 1.5rem; position: relative; } .ot-region-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .ot-region-card.se::before { background: var(--color-primary); } .ot-region-card.sw::before { background: #c44a00; } .ot-region-card.ne::before { background: #185fa5; } .ot-region-card.mm::before { background: #378add; } .ot-region-card .region-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; display: block; } .ot-region-card.se .region-tag { color: var(--color-primary); } .ot-region-card.sw .region-tag { color: #c44a00; } .ot-region-card.ne .region-tag { color: #185fa5; } .ot-region-card.mm .region-tag { color: #378add; } .ot-region-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin: .375rem 0 .75rem; letter-spacing: -0.01em; line-height: 1.1; } .ot-region-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin-bottom: 1.25rem; } /* State pills */ .ot-state-pills { display: flex; flex-wrap: wrap; gap: .3rem; } .ot-state-pill { font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: .2rem .6rem; border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); } .ot-state-pill.strong { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); } .ot-state-pill.estab { background: #378add; color: #fff; border-color: #378add; } /* Map tooltip — always dark regardless of page theme */ .ot-map-tip { display: none; position: fixed; background: #000623; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); padding: .625rem .875rem; font-size: 12px; pointer-events: none; z-index: 999; min-width: 170px; } .ot-map-tip .tip-name { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: #fcfcfc; margin-bottom: .3rem; } .ot-map-tip .tip-row { display: flex; align-items: center; gap: .45rem; color: rgba(252,252,252,0.6); margin-top: .25rem; font-size: 11px; } .ot-map-tip .tip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } /* ============================================================ CAREERS — job-board tabs + ATS embed wrapper (used by /careers.html; reuses tokens, no new colors) ============================================================ */ .ot-tabs { display: inline-flex; gap: .25rem; flex-wrap: wrap; padding: .25rem; margin-bottom: 1.5rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .ot-tab-btn { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); padding: .5rem 1rem; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; cursor: pointer; transition: all var(--transition-interactive); } .ot-tab-btn:hover { color: var(--color-text); } .ot-tab-btn.active { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); box-shadow: var(--shadow-sm); } .ot-tab-panel { display: none; } .ot-tab-panel.active { display: block; } /* ATS embed surface (Zoho Recruit / external job board) */ .ot-embed { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(1rem, 3vw, 1.5rem); min-height: 320px; } .ot-embed iframe { width: 100%; min-height: 480px; border: none; display: block; } /* ============================================================ FOOTER — locked dark, theme-independent (DESIGN_SYSTEM §6.7) These hex constants are sanctioned — not token violations. ============================================================ */ .ot-footer { background: #0a0f17; color: #8d9aab; padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; } .ot-footer .container { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .ot-footer .container { grid-template-columns: 1.4fr 1fr 1fr; } } /* Footer logo — always dark variant */ .ot-footer .ot-logo-img.dark-variant { display: block !important; } .ot-footer .ot-logo-img.light-variant { display: none !important; } .ot-footer .ot-logo-img { height: 28px; } .ot-footer h5 { font-family: var(--font-mono); font-size: 11px; color: #5a6776; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: .875rem; } .ot-footer a { color: #cbd5e1; text-decoration: none; font-size: var(--text-sm); display: block; padding: .25rem 0; } .ot-footer a:hover { color: #ff290e; } .ot-footer .brand p { margin-top: .75rem; color: #8d9aab; font-size: var(--text-sm); max-width: 38ch; } .ot-footer .footer-bottom { max-width: var(--content-wide); margin: 2rem auto 0; padding: 1.5rem clamp(1rem, 4vw, 2rem) 0; border-top: 1px solid #1a2330; font-family: var(--font-mono); font-size: 11px; color: #5a6776; text-transform: uppercase; letter-spacing: 0.1em; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .ot-footer .footer-bottom a { color: #8d9aab; display: inline; padding: 0; } .ot-footer .footer-bottom a:hover { color: #ff290e; }