/* src/app/fonts.css */ /* Self-hosted fonts. Nothing here is fetched at runtime and no font request * ever leaves this origin. * * Inter is the display face and Manrope the UI face, as they were before the * site was set in Deserra. Deserra is still declared below and its files are * still served, so a surface that asks for it by name gets it, but the site's * own two variables point back at Inter and Manrope: the family is not * finished, and this site is the company's front door. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Deserra Sans ──────────────────────────────────────────────────────────── * The app's own typeface. It is drawn from source in deserra-type/ and the * .woff files here are put in place by `deserra-type/install.py `, * which is also what a later release re-runs. Nothing about it is fetched at * runtime and no request leaves this origin. * * It draws 448 characters: ASCII, the accented Latin, the common punctuation * and dashes, and a currency set -- every character this site sets, including * the copyright sign in the footer. Anything outside that falls through to the * platform sans per character, which is the browser's normal behaviour and * needs no unicode-range here. */ @font-face { font-family: "Deserra Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/deserra-sans-regular.woff") format("woff"); } @font-face { font-family: "Deserra Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/deserra-sans-medium.woff") format("woff"); } @font-face { font-family: "Deserra Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/deserra-sans-semi-bold.woff") format("woff"); } @font-face { font-family: "Deserra Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/deserra-sans-bold.woff") format("woff"); } @font-face { font-family: "Deserra Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/deserra-sans-extra-bold.woff") format("woff"); } @font-face { font-family: "Deserra Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/deserra-sans-black.woff") format("woff"); } @font-face { font-family: "Deserra Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/deserra-sans-regular-italic.woff") format("woff"); } /* ── Deserra Serif ─────────────────────────────────────────────────────────── * The companion serif, installed by the same command as the sans. Only the * surfaces that ask for a serif use it; on the others these rules cost nothing * because a face no rule names is never downloaded. */ @font-face { font-family: "Deserra Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/deserra-serif-regular.woff") format("woff"); } @font-face { font-family: "Deserra Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/deserra-serif-medium.woff") format("woff"); } @font-face { font-family: "Deserra Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/deserra-serif-semi-bold.woff") format("woff"); } @font-face { font-family: "Deserra Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/deserra-serif-bold.woff") format("woff"); } @font-face { font-family: "Deserra Serif"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/deserra-serif-extra-bold.woff") format("woff"); } @font-face { font-family: "Deserra Serif"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/deserra-serif-black.woff") format("woff"); } @font-face { font-family: "Deserra Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/deserra-serif-regular-italic.woff") format("woff"); } /* vet-reset.css sets html and body from --app-font-sans and code from * --app-font-mono, so these two are what the document actually reads. Five of * these apps never defined the sans one, which is why prefixing the other * variables did not change what a browser drew. --app-font-serif is here for * the surfaces that ask for a serif by name. */ :root { --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif; /* vet-reset.css sets html from this one, so it is what a browser actually * draws where nothing else names a face. Back on Inter with the rest of the * site. */ --app-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --app-font-serif: ui-serif, Georgia, serif; } /* src/app/globals.css */ /* File: src/app/globals.css */ /* @import ./vet-reset.css */ /* GENERATED copy of tools/css/reset.css - do not edit here. * Regenerate with `node tools/css/build.mjs`. Edit the canonical file. */ @layer vet-reset { /* * vet in-house CSS reset * ====================== * * Replaces the reset half of `@import "tailwindcss"`. Every frontend imported * Tailwind, but five of the seven used between zero and three utility classes * from it: what they were actually depending on was this reset. Removing * Tailwind without replacing it would have shifted the layout of every page, * because ~7,000 inline `style={{…}}` objects across the apps are written * against the assumptions below. * * This is written from the behaviour these apps rely on, not transcribed from * any upstream file. Where a reset choice is arbitrary we state which way we * went and why. Rules that only matter for elements no app renders are left * out; rules for elements the apps DO render (date and datetime-local pickers, * file and search and number inputs) are kept, because their unstyled browser * defaults are inconsistent enough to be visible. * * Load order: this file first, then the app's own globals, then any generated * utilities. Nothing here uses `!important` except the `[hidden]` rule, which * has to beat a `display` set by a utility or an inline style. */ /* -------------------------------------------------------------------------- * 1. Box model and spacing * * The single most load-bearing group. `border-box` everywhere means a width * plus padding plus border still measures the declared width, which is what * every hand-written `style={{ width: …, padding: … }}` in these apps assumes. * Zeroing margin and padding means an element has no spacing until something * asks for it, so a heading or paragraph never contributes a surprise gap. * * `border: 0 solid` sets a style and a zero width, so `borderWidth: 1` alone * produces a visible border. Without it you would need to set border-style too * at every call site, and several components only set a width. * -------------------------------------------------------------------------- */ *, ::before, ::after, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } /* -------------------------------------------------------------------------- * 2. Document root * * `line-height: 1.5` is the inherited default the apps' typography is spaced * against. `-webkit-text-size-adjust: 100%` stops iOS Safari inflating text * when a phone is rotated to landscape, which otherwise breaks the fixed * layouts in the PWA surfaces. The tap highlight is removed because every * interactive surface here draws its own pressed state, and the default grey * flash on iOS lands on top of it. * * The font stack is a variable with a fallback so an app can set * `--app-font-sans` (vet-dealbreakers and vet-insights point theirs at the * Geist face) without editing this file. * -------------------------------------------------------------------------- */ html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; font-family: var( --app-font-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ); } /* -------------------------------------------------------------------------- * 3. Typography defaults * * Headings inherit size and weight rather than carrying the browser's scale. * These apps set heading type explicitly at every use site, and the browser * default (h1 at 2em with large block margins) fights that. Same reasoning for * links: colour and decoration are inherited so a link is invisible until * styled, which is how the components here are written. * * `b`/`strong` use `bolder` rather than a fixed 700 so nested emphasis still * steps up inside an already-bold run. * -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var( --app-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ); /* Browsers apply a smaller default size to monospace faces; 1em keeps inline code the same size as the prose around it. */ font-size: 1em; } small { font-size: 80%; } /* Keep sub/sup from stretching the line box they sit in. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* -------------------------------------------------------------------------- * 4. Lists and separators * * Lists are unstyled by default. Nearly every list in these apps is a layout * container (a column of cards, a row of chips) rather than prose, so markers * and the default indent have to be opted into, not out of. Prose surfaces * that do want markers - the insight articles and help-center bodies - set * `list-style` on their own container. * -------------------------------------------------------------------------- */ ol, ul, menu { list-style: none; } hr { height: 0; color: inherit; border-top-width: 1px; } /* -------------------------------------------------------------------------- * 5. Replaced elements * * `display: block` removes the inline-layout descender gap under an image, * which is the classic source of a few unexplained pixels below every avatar * and thumbnail. The max-width/height pair keeps media inside its container * and preserves aspect ratio, which matters most on the article and insight * surfaces where image dimensions come from user data. * -------------------------------------------------------------------------- */ img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- * 6. Tables * -------------------------------------------------------------------------- */ table { text-indent: 0; border-color: inherit; border-collapse: collapse; } /* -------------------------------------------------------------------------- * 7. Form controls * * Controls do not inherit typography from their container by default, so an * unstyled input inside a styled card renders in the browser's UI font at the * browser's size. Inheriting font, letter-spacing and colour makes a bare * `` look like the text around it, which is the starting point every * form component here builds on. * * Background is cleared and radius zeroed for the same reason: the components * draw their own surface, and Safari's native rounded corners would show * through at the edges. * -------------------------------------------------------------------------- */ button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; /* Firefox dims disabled controls; the components handle their own disabled styling, so normalise it away here. */ opacity: 1; } /* `font: inherit` above also flattens optgroup labels and their options, which are meant to read as a heading plus indented children. Put both back. */ :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } /* Firefox ships placeholders at reduced opacity, other browsers do not. Pin it to 1 and express the muted look as a colour instead, so a placeholder is the same weight everywhere. */ ::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); } /* Textareas resize vertically only. Horizontal resize escapes every fixed-width card in these layouts. */ textarea { resize: vertical; } /* Buttons and button-like inputs need the native appearance on iOS Safari, which otherwise refuses to honour a border radius on them. */ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } /* Search inputs: drop the inner decoration Chrome and Safari add on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* Number inputs: the spinner buttons get an intrinsic height that makes the control taller than its siblings in a row. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* * Date and datetime-local inputs. The apps use eleven of these across the * admin and forms surfaces, and their internals are the least consistent part * of the platform: an empty date input is shorter than a filled one on iOS, * the field group ignores text-align, and each sub-field carries its own block * padding so the control ends up taller than a plain text input beside it. */ ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } /* Firefox draws its own red glow on an invalid field, which collides with the inline validation these forms render themselves. */ :-moz-ui-invalid { box-shadow: none; } /* -------------------------------------------------------------------------- * 8. Interaction and visibility * -------------------------------------------------------------------------- */ /* Firefox's focus ring is the only one that survives `outline: none` elsewhere in a stylesheet; keep it for keyboard users. */ :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } /* * `hidden` must win. An element carrying the attribute is hidden by intent, * and a `display` from a utility class or an inline style would otherwise * override it purely on specificity. `until-found` is excluded because that * value exists precisely so find-in-page can reveal the content. */ [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } /* @import ./vet-utilities.css */ /* GENERATED by tools/css/build.mjs - do not edit. * * Contains only the utility classes this app actually uses. Regenerate * after changing a className: `pnpm run css` in the app, or `pnpm css:all` * at the workspace root. The build regenerates it too, so a stale file * cannot ship. */ @layer vet-utilities { .absolute { position: absolute; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fixed { position: fixed; } .flex { display: flex; } .hidden { display: none; } .inline-flex { display: inline-flex; } .relative { position: relative; } .uppercase { text-transform: uppercase; } } html { min-height: 100%; background-color: #07090c; overflow-x: clip; overflow-y: auto; } body { min-height: 100%; margin: 0; background-color: #07090c; color: #ededed; overflow-x: clip; overflow-y: visible; } img { max-width: 100%; height: auto; } /* src/app/site.css */ /* File: src/app/site.css Page styles for the landing page, extracted from the old styled-jsx block. Selectors are global because the page is the only route using them; html/body rules came from the block's :global(...) wrappers. */ html { scrollbar-width: none; } body { scrollbar-width: none; } html::-webkit-scrollbar { width: 0; height: 0; } body::-webkit-scrollbar { width: 0; height: 0; } .root { position: relative; min-height: 100svh; overflow-x: clip; color: rgba(255, 255, 255, 0.92); opacity: 0; transition: opacity 0.3s ease; } .root.hydrated { opacity: 1; } .viewport-wash { position: fixed; top: -100px; right: 0; bottom: 0; left: 0; z-index: -2; pointer-events: none; background: radial-gradient(60% 50% at 22% 18%, rgba(0, 246, 255, 0.18) 0%, transparent 58%), radial-gradient(56% 46% at 82% 78%, rgba(124, 58, 255, 0.18) 0%, transparent 56%), radial-gradient(38% 38% at 50% 12%, rgba(255, 58, 205, 0.09) 0%, transparent 56%), #07090c; } .progress-bar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2px; z-index: 1000; background: linear-gradient(90deg, #00f6ff, #7c3aff, #ff3acd); transform-origin: left center; box-shadow: 0 0 8px #00f6ff; } .ambient { position: fixed; top: -100px; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 0; overflow: visible; } .orb { position: absolute; border-radius: 50%; filter: blur(100px); } .orb1 { width: min(820px, 122vw); height: min(820px, 122vw); background: radial-gradient(circle, rgba(0, 246, 255, 0.34), transparent 70%); top: -28%; left: -18%; opacity: 0.18; animation: o1 22s ease-in-out infinite alternate; } .orb2 { width: min(720px, 112vw); height: min(720px, 112vw); background: radial-gradient(circle, rgba(124, 58, 255, 0.36), transparent 70%); bottom: -8%; right: -14%; opacity: 0.16; animation: o2 18s ease-in-out infinite alternate; } .orb3 { width: min(520px, 92vw); height: min(520px, 92vw); background: radial-gradient(circle, rgba(255, 58, 205, 0.28), transparent 70%); top: 28%; left: 34%; opacity: 0.08; animation: o3 26s ease-in-out infinite alternate; } @keyframes o1 { from { transform: translate(0, 0); } to { transform: translate(5vw, 4vh); } } @keyframes o2 { from { transform: translate(0, 0); } to { transform: translate(-4vw, -3vh); } } @keyframes o3 { from { transform: translate(0, 0); } to { transform: translate(3vw, -5vh); } } .grid-dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 20%, transparent 100%); -webkit-mask-image: radial-gradient( ellipse 70% 70% at 50% 40%, black 20%, transparent 100% ); } .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: max(env(safe-area-inset-top, 0px), 14px) 16px 0; pointer-events: none; } .header-pill { pointer-events: auto; margin: 0 auto; /* The second layer is what the pill is made of, and it used to be thin enough that the hero's Contact button read straight through it as the page scrolled past -- legible blue lettering inside the header, which looks like a bug rather than glass. Carrying more of the page's own near-black, the blur has something to blur against and bright content behind it stays a smear. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.07)), linear-gradient(160deg, rgba(74, 82, 100, 0.62) 0%, rgba(14, 18, 27, 0.66) 100%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; backdrop-filter: blur(24px) saturate(185%); -webkit-backdrop-filter: blur(24px) saturate(185%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 -1px 0 rgba(0, 0, 0, 0.18) inset, 0 5px 0 rgba(0, 0, 0, 0.14), 0 14px 30px rgba(0, 0, 0, 0.2); } .header-pill { max-width: 720px; padding: 14px 30px; } .logo { font-family: var(--font-ui), sans-serif; font-weight: 650; font-size: 0.94rem; letter-spacing: 0.01em; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 10px rgba(0, 0, 0, 0.24); } .hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; z-index: 1; } .hero-glow { position: absolute; top: -10%; left: -10%; right: -10%; height: 160%; pointer-events: none; z-index: 0; background: radial-gradient(60% 50% at 22% 30%, rgba(0, 246, 255, 0.28) 0%, transparent 55%), radial-gradient(55% 45% at 78% 65%, rgba(124, 58, 255, 0.24) 0%, transparent 55%), radial-gradient(38% 38% at 55% 18%, rgba(255, 58, 205, 0.13) 0%, transparent 55%); } @media (hover: hover) { .hero-glow { animation: glowHue 32s linear infinite; } } @keyframes glowHue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: max(110px, calc(90px + env(safe-area-inset-top, 0px))) 24px 80px; min-height: 10svh; max-width: 960px; width: 100%; } .headline-stack { position: relative; width: 100%; margin-bottom: 22px; padding-bottom: 0.3em; overflow: visible; } .headline-shadow, .headline-main { display: block; font-family: var(--font-display), sans-serif; font-size: clamp(3rem, 7.6vw, 5.1rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.045em; text-align: center; } .headline-shadow { position: absolute; inset: 0; pointer-events: none; user-select: none; } .headline-shadow-1 { color: rgba(92, 127, 231, 0.52); transform: translate3d(0, 2px, 0); opacity: 0.72; } .headline-main { position: relative; z-index: 1; background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.96) 26%, rgba(234, 241, 255, 0.92) 56%, rgba(173, 201, 255, 0.72) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; -webkit-text-stroke: 0.45px rgba(255, 255, 255, 0.14); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.14)); } .sub { font-family: var(--font-ui), sans-serif; font-size: clamp(1.02rem, 2.3vw, 1.34rem); letter-spacing: -0.015em; color: rgba(242, 247, 255, 0.94); max-width: 54ch; line-height: 1.55; font-weight: 700; margin-bottom: 38px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(159, 184, 255, 0.12), 0 4px 8px rgba(0, 0, 0, 0.12); } .cta-row { display: flex; justify-content: center; } .btn-cta { position: relative; border: none; cursor: pointer; border-radius: 999px; padding: 0; background: transparent; font-family: var(--font-ui), sans-serif; box-shadow: 0 5px 0 rgba(0, 50, 160, 0.66), 0 12px 28px rgba(0, 100, 255, 0.3), 0 20px 40px rgba(0, 40, 140, 0.15), 0 0 0 1px rgba(80, 140, 255, 0.36); transition: box-shadow 0.14s ease, transform 0.14s ease; } .btn-cta:hover { box-shadow: 0 5px 0 rgba(0, 50, 160, 0.66), 0 16px 36px rgba(0, 100, 255, 0.4), 0 24px 46px rgba(0, 40, 140, 0.2), 0 0 0 1px rgba(80, 140, 255, 0.46); } .btn-cta:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 rgba(0, 50, 160, 0.7), 0 6px 16px rgba(0, 100, 255, 0.28), 0 0 0 1px rgba(80, 140, 255, 0.36) !important; } .btn-cta.flash { animation: btnFlash 0.4s ease-out; } @keyframes btnFlash { 0% { box-shadow: 0 5px 0 rgba(0, 50, 160, 0.66), 0 0 0 5px rgba(0, 246, 255, 0.45), 0 16px 48px rgba(0, 200, 255, 0.6); } 100% { box-shadow: 0 5px 0 rgba(0, 50, 160, 0.66), 0 12px 28px rgba(0, 100, 255, 0.3); } } .btn-face { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 999px; font-size: 0.9rem; font-weight: 700; color: #fff; white-space: nowrap; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%), linear-gradient(160deg, #2090ff 0%, #0055e0 55%, #6030ee 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 -1px 0 rgba(0, 0, 0, 0.28) inset; letter-spacing: 0.01em; } .btn-cta.is-revealed .btn-face { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%), linear-gradient(160deg, #00c6ff 0%, #0077ff 50%, #7c3aff 100%); } .copy-icon { flex-shrink: 0; opacity: 0.8; } main { position: relative; z-index: 1; overflow-x: clip; } .tech { padding: 72px 0 88px; position: relative; overflow-x: clip; } .tech-title-wrap { position: relative; display: flex; justify-content: center; margin-bottom: 18px; } .tech-title-depth, .tech-title { font-family: var(--font-ui), sans-serif; font-size: 1.95rem; font-weight: 800; letter-spacing: -0.03em; } .tech-title-depth { position: absolute; inset: 0; text-align: center; color: rgba(92, 127, 231, 0.48); transform: translateY(2px); text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); pointer-events: none; user-select: none; } .tech-title { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.98); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16), 0 16px 24px rgba(0, 0, 0, 0.28), 0 0 18px rgba(0, 246, 255, 0.08); } .tracks-wrap { position: relative; overflow: clip; padding: 10px 0; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient( to right, transparent, black 8%, black 92%, transparent ); } .track-clip { overflow: clip; } .track-inner { display: flex; gap: 14px; width: max-content; padding: 10px 0; will-change: transform; transform: translate3d(0, 0, 0); } /* The ltr/rtl classes are JS query-selector handles used by the scroll physics, not visual modifiers; they only carry the compositor hint. */ .track-ltr, .track-rtl { will-change: transform; } .reset-row { display: flex; justify-content: center; padding: 10px 0 2px; } .reset-btn { border: none; border-radius: 999px; padding: 0; font-family: var(--font-ui), sans-serif; font-size: 0.78rem; font-weight: 700; line-height: 1; color: #fff; background: transparent; box-shadow: 0 5px 0 rgba(0, 50, 160, 0.5), 0 10px 24px rgba(0, 100, 255, 0.22), 0 0 0 1px rgba(80, 140, 255, 0.28); cursor: pointer; } .reset-btn:hover { box-shadow: 0 5px 0 rgba(0, 50, 160, 0.5), 0 14px 30px rgba(0, 100, 255, 0.28), 0 0 0 1px rgba(80, 140, 255, 0.4); } .reset-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 50, 160, 0.56), 0 6px 16px rgba(0, 100, 255, 0.18), 0 0 0 1px rgba(80, 140, 255, 0.28); } .reset-btn::before { content: 'Reset'; display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%), linear-gradient(160deg, #2090ff 0%, #0055e0 55%, #6030ee 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 -1px 0 rgba(0, 0, 0, 0.28) inset; letter-spacing: 0.01em; } .tech-card { flex: 0 0 auto; } .tech-card-placeholder { display: block; visibility: hidden; pointer-events: none; flex: 0 0 auto; } .tech-card-inner { position: relative; padding: 20px 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.05) 42%), linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset, 0 7px 0 rgba(0, 0, 0, 0.22), 0 18px 34px rgba(0, 0, 0, 0.24), 0 38px 62px rgba(0, 0, 0, 0.18); transition: box-shadow 0.2s ease, transform 0.2s ease; } .card-depth { position: absolute; inset: 0; background: radial-gradient( 90% 100% at 50% -10%, rgba(255, 255, 255, 0.18), transparent 44% ), linear-gradient(180deg, transparent 44%, rgba(0, 0, 0, 0.11) 100%); pointer-events: none; } .card-ridge { position: absolute; inset: auto 8px 8px 8px; height: 10px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)); opacity: 0.35; pointer-events: none; } .card-shine { position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transform: skewX(-18deg); transition: left 0.5s ease; pointer-events: none; } .tech-card-inner:hover .card-shine { left: 130%; } .tech-card-inner:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 -1px 0 rgba(0, 0, 0, 0.22) inset, 0 7px 0 rgba(0, 0, 0, 0.24), 0 22px 42px rgba(0, 0, 0, 0.28), 0 0 20px rgba(0, 246, 255, 0.12); transform: translateY(-1px); } .tech-card img { height: 38px; width: auto; display: block; position: relative; z-index: 1; } footer { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 30px 24px max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px)); } .footer-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; } .footer-legal { font-size: 10px; color: rgba(244, 247, 255, 0.56); text-align: center; line-height: 1.72; max-width: 760px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 rgba(149, 167, 235, 0.12), 0 8px 18px rgba(0, 0, 0, 0.16); } .debug-panel { position: fixed; right: 12px; bottom: 12px; width: min(520px, calc(100vw - 24px)); max-height: min(58vh, 560px); display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; background: rgba(7, 9, 12, 0.92); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 10002; pointer-events: auto; user-select: text; } .debug-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .debug-title { font-family: var(--font-ui), sans-serif; font-size: 0.86rem; font-weight: 800; color: rgba(255, 255, 255, 0.96); } .debug-actions { display: flex; align-items: center; gap: 8px; } .debug-btn { border: none; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-family: var(--font-ui), sans-serif; font-size: 0.75rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%), linear-gradient(160deg, #2090ff 0%, #0055e0 55%, #6030ee 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 -1px 0 rgba(0, 0, 0, 0.28) inset; } .debug-btn-secondary { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%), linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)); } .debug-summary { font-family: var(--font-ui), sans-serif; font-size: 0.74rem; line-height: 1.5; color: rgba(242, 247, 255, 0.82); } .debug-output { width: 100%; min-height: 230px; flex: 1 1 auto; resize: vertical; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.04); padding: 10px 12px; color: rgba(255, 255, 255, 0.92); outline: none; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } @media (max-width: 768px) { .hero-content { padding-top: max(96px, calc(76px + env(safe-area-inset-top, 0px))); padding-bottom: 56px; } .headline-shadow, .headline-main { font-size: clamp(2.2rem, 10vw, 3rem); } .headline-shadow-1 { transform: translate3d(0, 2px, 0); } .sub { font-size: 0.94rem; } .btn-face { padding: 10px 20px; font-size: 0.86rem; } .tech { padding: 46px 0 60px; } .tech-title-depth, .tech-title { font-size: 1.46rem; } .tech-title-depth { transform: translateY(2px); } .tech-card-inner { padding: 14px 18px; cursor: default; } .tech-card img { height: 28px; } .orb1, .orb2 { opacity: 0.1; } .orb3 { opacity: 0.04; } .debug-panel { left: 10px; right: 10px; width: auto; bottom: 10px; max-height: 50vh; } .debug-output { min-height: 200px; } } @media (max-width: 480px) { .btn-face { font-size: 0.8rem; padding: 10px 17px; max-width: 88vw; } .header-pill { padding: 11px 20px; } } /* A keyboard reader has to be able to see where they are. The button is drawn entirely in box-shadows, so the ring is one more of them rather than an outline, which would trace the square element box and not the pill. Pointer clicks do not raise :focus-visible, so this never fires on a mouse. */ .btn-cta:focus-visible, .reset-btn:focus-visible { outline: none; box-shadow: 0 5px 0 rgba(0, 50, 160, 0.66), 0 12px 28px rgba(0, 100, 255, 0.3), 0 0 0 2px rgba(7, 9, 12, 1), 0 0 0 5px rgba(140, 190, 255, 0.9); } /* The ambient drift, the hue cycle, and the two logo rows are decoration. A reader who has asked the system for less motion keeps every one of them on screen, just still. The marquee is driven from JavaScript and stops itself; these are the CSS-driven ones. */ @media (prefers-reduced-motion: reduce) { .orb1, .orb2, .orb3, .hero-glow { animation: none !important; } .btn-cta.flash { animation: none !important; } html { scroll-behavior: auto !important; } }