/* * ox-landing.css — the public marketing LANDING page (logged-out `/`). * * LIGHT theme, to match the now-light console (the logged-out experience is * light end-to-end). Loaded ONLY by general/landing.html, so every override * here is scoped to that page — base_ox.html (shared with base_console.html) * and ox_tokens.css :root (shared fleet-wide) are deliberately untouched. * * Local light palette. We don't repaint ox_tokens.css :root (still the dark * fleet ink ladder, used by the console's dark mode + the shared map layers); * instead the landing defines its own paper-surface / ink tokens here and the * brand-green / warn accents are pulled straight from the canonical sheet. * * base_ox.html paints with the dark --ink-0; because this stylesheet * loads AFTER ox_tokens.css in the landing , the body rule below wins — * and only on this page. */ :root { /* paper surfaces (light) — local to the landing */ --ox-surface: #FAFAF7; /* page paper (matches [data-theme=paper] --bg) */ --ox-surface-1: #FFFFFF; /* cards / raised */ --ox-surface-2: #F2F2EE; /* subtle fills, step numbers, secondary btn */ --ox-rule: rgba(20, 24, 28, .12); /* hairlines on light */ /* ink (dark text on light) */ --ox-ink-hi: #14181C; /* headings */ --ox-ink-mid: #3A4047; /* body copy */ --ox-ink-low: #6A727B; /* captions / spec strip */ /* translucent paper for the sticky header glass */ --ox-glass: rgba(250, 250, 247, .82); } /* Repaint the page surface light (scoped: only the landing loads this file). */ body { background: var(--ox-surface); color: var(--ox-ink-mid); } h1, h2, h3 { color: var(--ox-ink-hi); } /* The shared base sets links to --accent-bright (a dark-mode sky blue). On paper, lean on the deeper brand accent for legible links. */ a { color: var(--accent); } .ox-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* header */ .ox-header { position: sticky; top: 0; z-index: 10; background: var(--ox-glass); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ox-rule); } .ox-header-inner { display: flex; align-items: center; gap: 24px; padding: 18px 0; } /* Small left/top inset so the bull's tail isn't jammed against the viewport corner — the wrap's 24px side padding alone read as "overflowing" with the art's tight left bleed, so give the mark its own breathing room. */ .ox-wordmark { display: inline-flex; align-items: center; margin: 4px 0 0 8px; } /* The brand mark is black-on-transparent and the landing is now LIGHT, so the logo renders naturally (no invert). Height-bounded so the bull + EXPERIMENTAL lockup reads without dominating the header. */ .ox-wordmark img { height: 44px; width: auto; display: block; } .ox-wordmark:hover { text-decoration: none; } .ox-nav { display: flex; gap: 20px; margin-left: auto; align-items: center; flex-wrap: wrap; } .ox-nav a { color: var(--ox-ink-mid); font-size: 14px; font-weight: 500; } .ox-nav a:hover { color: var(--ox-ink-hi); text-decoration: none; } .ox-portal-pill { display: inline-block; padding: 8px 16px; border: 1px solid var(--ox-rule); border-radius: var(--radius-control); background: var(--ox-surface-1); color: var(--ox-ink-hi) !important; } .ox-portal-pill:hover { border-color: var(--accent); } /* hero */ .ox-hero { position: relative; overflow: hidden; padding: 96px 0 64px; border-bottom: 1px solid var(--ox-rule); } /* Bull watermark on the right — brand presence without competing with the headline. Uses the bull-ONLY mark (ox.png, no "OxChief" wordmark) so the silhouette reads as a clean brand element. The bull is painted in brand-green via a silhouette mask (the PNG's alpha is the mask) rather than a tinted black image, so it carries true brand color instead of flat grey. Kept soft so the headline stays fully legible. Hidden on narrow screens so it never crowds the copy. */ .ox-hero::after { content: ""; position: absolute; top: 50%; right: 4%; transform: translateY(-50%); width: clamp(230px, 26vw, 400px); aspect-ratio: 365 / 408; /* Soft neutral grey ghost (not brand green) — Wayne: "more of a gray look, not greenish." Reuse the caption ink so the headline stays fully legible; grey reads softer than green, so nudge opacity up slightly. */ background: var(--ox-ink-low); -webkit-mask: url("../images/ox.png") center / contain no-repeat; mask: url("../images/ox.png") center / contain no-repeat; opacity: .16; pointer-events: none; } @media (max-width: 980px) { .ox-hero::after { display: none; } } .ox-hero > .ox-wrap { position: relative; z-index: 1; } .ox-hero h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; line-height: 1.1; max-width: 18ch; } .ox-hero p { font-size: 18px; max-width: 60ch; margin: 0 0 32px; color: var(--ox-ink-mid); } .ox-cta-row { display: flex; gap: 16px; flex-wrap: wrap; } .ox-btn { display: inline-block; padding: 14px 28px; font-size: 16px; font-weight: 600; border-radius: var(--radius-control); border: 1px solid transparent; } .ox-btn:hover { text-decoration: none; } .ox-btn-primary { background: var(--brand-green); color: #FFFFFF; } .ox-btn-primary:hover { filter: brightness(1.08); } .ox-btn-secondary { border-color: var(--ox-rule); color: var(--ox-ink-hi); background: var(--ox-surface-1); } .ox-btn-secondary:hover { border-color: var(--accent); } /* spec strip */ .ox-specs { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 16px 0; border-bottom: 1px solid var(--ox-rule); color: var(--ox-ink-low); } /* sections */ .ox-section { padding: 64px 0; border-bottom: 1px solid var(--ox-rule); } .ox-section h2 { font-size: 28px; font-weight: 650; } .ox-kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ox-ink-low); margin: 0 0 8px; } .ox-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 32px; } .ox-card { background: var(--ox-surface-1); border: 1px solid var(--ox-rule); border-radius: var(--radius-card); padding: 16px; } .ox-card h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; } .ox-card p { margin: 0; font-size: 14px; color: var(--ox-ink-mid); } .ox-step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 12px; border-radius: 50%; background: var(--brand-green); color: #FFFFFF; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; } /* safety note */ .ox-safety { border-left: 3px solid var(--warn); background: var(--ox-surface-2); border-radius: 0 var(--radius-card) var(--radius-card) 0; padding: 16px 20px; margin-top: 32px; max-width: 72ch; } .ox-safety p { margin: 0; font-size: 14px; color: var(--ox-ink-mid); } /* cta band */ .ox-cta-band { padding: 80px 0; text-align: center; } .ox-cta-band h2 { font-size: 28px; } .ox-cta-band p { max-width: 56ch; margin: 0 auto 32px; color: var(--ox-ink-mid); } .ox-cta-band .ox-cta-row { justify-content: center; } /* footer */ .ox-footer { border-top: 1px solid var(--ox-rule); padding: 32px 0 48px; color: var(--ox-ink-low); font-size: 14px; } .ox-footer-links { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; } .ox-footer-links a { color: var(--ox-ink-mid); } .ox-footer-links a:hover { color: var(--ox-ink-hi); }