/* DORQ — base.css Design tokens, resets and shared primitives used on every page. */ :root { --orange: #F04E23; --orange-hi: #FF6A3D; --ink: #08090B; --panel: #0E1013; --hairline: rgba(255,255,255,0.08); --muted: rgba(233,236,240,0.56); /* Custom cursor: orange triangle, apex (top end) at the hotspot */ --cursor: url("data:image/svg+xml;utf8,") 5 2, auto; } html, body { margin: 0; padding: 0; background: #07080A; } a { color: #F04E23; text-decoration: none; } /* Brand cursor everywhere (interactive elements included) */ html, body * { cursor: var(--cursor) !important; } /* Enterprise polish: selection, focus and scrollbars */ ::selection { background: var(--orange); color: #0A0B0D; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0A0B0E; } ::-webkit-scrollbar-thumb { background: #26282D; border-radius: 5px; border: 2px solid #0A0B0E; } ::-webkit-scrollbar-thumb:hover { background: rgba(240,78,35,0.65); } html { scrollbar-color: #26282D #0A0B0E; scrollbar-width: thin; } /* ============================ Page sections ============================ */ /* Scroll snapping was fighting the user on these long, variable-height pages and could park the viewport above the footer. Smooth scrolling is kept for in-page anchor links. */ html { scroll-behavior: smooth; } .sec { position: relative; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 118px 32px 72px; background: #07080A; font-family: 'Space Grotesk', sans-serif; overflow: hidden; } .sec__inner { width: 100%; max-width: 1200px; margin: 0 auto; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); } .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--orange); } .sec__title { margin: 14px 0 0; font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: #FFFFFF; text-wrap: balance; } .sec__lead { margin: 16px 0 0; max-width: 640px; font-family: 'Inter', sans-serif; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; color: var(--muted); } /* Reveal on scroll. Content is VISIBLE BY DEFAULT and only starts hidden once js/config.js has set .rv-on on . If that script is ever blocked, 404s or fails, the page still renders in full (it just loses the animation) instead of going blank. Never move these rules out from under .rv-on. */ html.rv-on .rv { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease var(--rvd, 0ms), transform 700ms cubic-bezier(0.22, 0.8, 0.3, 1) var(--rvd, 0ms); } html.rv-on .rv.in { opacity: 1; transform: translateY(0); } /* Shared big CTA button */ .btn-big { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 44px; border-radius: 14px; background: var(--orange); color: #0A0B0D; font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 600; transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease; } /* On phones a full-viewport minimum leaves large dead zones between sections, so let content set the height and tighten the gutters. */ @media (max-width: 900px) { .sec { min-height: 0; padding: 76px 24px 64px; } } @media (max-width: 560px) { .sec { padding: 56px 20px 48px; } } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Safety net: .rv is revealed by JS, so make sure content is never left invisible for visitors with scripting disabled. */ @media (scripting: none) { .rv { opacity: 1 !important; transform: none !important; transition: none !important; } }