/* ========================================================================== WySync — base design system Aesthetic: engineering document. Hairline rules, blueprint grid, monospace metadata, industrial display type, one saturated accent. Theming: light-first. Dark values ship via CSS `light-dark()` so the OS preference works with zero JS; [data-theme] on overrides it. Fallback: every themed token declares its light value first, so browsers without light-dark() keep a correct light theme instead of no theme. ========================================================================== */ /* ---------- tokens ---------------------------------------------------- */ :root { color-scheme: light dark; --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* surfaces */ --bg: #ffffff; --bg: light-dark(#ffffff, #0a0d12); --bg-sunken: #f5f7f9; --bg-sunken: light-dark(#f5f7f9, #070a0e); --surface: #ffffff; --surface: light-dark(#ffffff, #111721); --surface-2: #f8fafb; --surface-2: light-dark(#f8fafb, #161d27); --surface-3: #eef1f5; --surface-3: light-dark(#eef1f5, #1c2530); --overlay: rgba(255,255,255,.82); --overlay: light-dark(rgba(255,255,255,.82), rgba(10,13,18,.78)); /* lines */ --line: #e4e8ee; --line: light-dark(#e4e8ee, #202834); --line-2: #cfd6e0; --line-2: light-dark(#cfd6e0, #2c3542); --line-3: #a8b3c2; --line-3: light-dark(#a8b3c2, #3d4756); /* ink */ --ink: #0a0e14; --ink: light-dark(#0a0e14, #eef1f6); --ink-2: #2f3946; --ink-2: light-dark(#2f3946, #c3ccd8); --ink-3: #5a6573; --ink-3: light-dark(#5a6573, #94a0ae); --ink-4: #8b95a3; --ink-4: light-dark(#8b95a3, #6d7887); --ink-inv: #ffffff; --ink-inv: light-dark(#ffffff, #0a0d12); --ink-solid: #0a0e14; --ink-solid: light-dark(#0a0e14, #eef1f6); /* brand */ --brand: #ff6b1a; --brand: light-dark(#ff6b1a, #ff8542); --brand-ink: #ad4506; --brand-ink: light-dark(#ad4506, #ffa871); --brand-soft: #fff2e8; --brand-soft: light-dark(#fff2e8, #2a1509); --brand-line: #ffd2b0; --brand-line: light-dark(#ffd2b0, #4a2410); /* fitment verdict language — used as a visual system across the site */ --fit: #067a55; --fit: light-dark(#067a55, #34c795); --fit-soft: #e7f6f0; --fit-soft: light-dark(#e7f6f0, #06251c); --fit-line: #b6e2d2; --fit-line: light-dark(#b6e2d2, #0d4534); --nofit: #bf332a; --nofit: light-dark(#bf332a, #ff7b6e); --nofit-soft: #fdeeec; --nofit-soft: light-dark(#fdeeec, #2c110d); --nofit-line: #f5c8c2; --nofit-line: light-dark(#f5c8c2, #542019); --maybe: #94660a; --maybe: light-dark(#94660a, #e0a93a); --maybe-soft: #fdf4e0; --maybe-soft: light-dark(#fdf4e0, #2a1f06); --maybe-line: #ecd7a4; --maybe-line: light-dark(#ecd7a4, #4d3a0d); /* blueprint + texture */ --grid-fine: rgba(10,14,20,.045); --grid-fine: light-dark(rgba(10,14,20,.045), rgba(190,214,255,.045)); --grid-bold: rgba(10,14,20,.075); --grid-bold: light-dark(rgba(10,14,20,.075), rgba(190,214,255,.07)); --shadow-1: 0 1px 2px rgba(12,18,28,.06); --shadow-1: light-dark(0 1px 2px rgba(12,18,28,.06), 0 1px 2px rgba(0,0,0,.5)); --shadow-2: 0 4px 14px -4px rgba(12,18,28,.10), 0 2px 4px rgba(12,18,28,.04); --shadow-2: light-dark(0 4px 14px -4px rgba(12,18,28,.10), 0 12px 28px -12px rgba(0,0,0,.8)); --shadow-3: 0 22px 48px -20px rgba(12,18,28,.28), 0 2px 8px rgba(12,18,28,.06); --shadow-3: light-dark(0 22px 48px -20px rgba(12,18,28,.28), 0 26px 60px -24px rgba(0,0,0,.92)); --r-xs: 4px; --r-sm: 7px; --r: 11px; --r-lg: 16px; --r-xl: 24px; --pad: clamp(20px, 5vw, 40px); --gutter: clamp(16px, 4vw, 28px); --sec: clamp(64px, 8.5vw, 132px); --ease: cubic-bezier(.22,.68,.35,1); --ease-out: cubic-bezier(.16,1,.3,1); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---------- reset ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.62; color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv05" 1, "ss01" 1; overflow-x: hidden; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: 1px solid var(--line); } ::selection { background: var(--brand); color: #fff; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; } .skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink-solid); color: var(--ink-inv); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; transition: top .2s var(--ease); } .skip:focus { top: 12px; } /* ---------- type ------------------------------------------------------ */ h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--ink); font-weight: 640; letter-spacing: -.022em; line-height: 1.1; text-wrap: balance; } .d1 { font-size: clamp(2.55rem, 1.5rem + 4.3vw, 5rem); line-height: .97; letter-spacing: -.038em; font-weight: 700; font-variation-settings: "wdth" 104; } .d2 { font-size: clamp(1.95rem, 1.25rem + 2.6vw, 3.25rem); line-height: 1.04; letter-spacing: -.032em; font-weight: 680; font-variation-settings: "wdth" 102; } .d3 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.95rem); letter-spacing: -.024em; line-height: 1.14; } .d4 { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem); letter-spacing: -.016em; line-height: 1.25; font-weight: 620; } .lead { font-size: clamp(1.04rem, .98rem + .38vw, 1.28rem); line-height: 1.55; color: var(--ink-3); text-wrap: pretty; } .sub { color: var(--ink-3); } .small { font-size: .875rem; line-height: 1.55; } .xs { font-size: .8rem; line-height: 1.5; } .mono { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em; font-variant-ligatures: none; } .eyebrow { font-family: var(--font-mono); font-size: .705rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--brand); flex: none; } .eyebrow--plain::before { display: none; } .accent { color: var(--brand-ink); } .ink { color: var(--ink); } .measure { max-width: 62ch; } .measure-sm { max-width: 48ch; } .balance { text-wrap: balance; } /* ---------- layout ---------------------------------------------------- */ .wrap { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: var(--gutter); } .wrap-wide { width: 100%; max-width: 1420px; margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--sec); position: relative; } .section--tight { padding-block: clamp(44px, 6vw, 84px); } .section--sunken { background: var(--bg-sunken); } .section--bordered { border-top: 1px solid var(--line); } .grid { display: grid; gap: var(--pad); } .g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .g-tight { gap: 14px; } @media (max-width: 1000px) { .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 860px) { .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 680px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0,1fr); } } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 14px; } .mt-3 { margin-top: 22px; } .mt-4 { margin-top: 34px; } .mt-5 { margin-top: 52px; } .center { text-align: center; } .center .eyebrow { justify-content: center; } .section-head { max-width: 760px; } .section-head .d2 { margin-top: 16px; } .section-head .lead { margin-top: 16px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } /* index label — engineering-drawing numbering on major sections */ .index-rule { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); padding-bottom: 22px; margin-bottom: 34px; border-bottom: 1px solid var(--line); } .index-rule b { color: var(--brand-ink); font-weight: 500; } .index-rule span:last-child { margin-left: auto; color: var(--ink-4); } @media (max-width: 620px) { .index-rule span:last-child { display: none; } } /* ---------- blueprint + texture -------------------------------------- */ .blueprint { position: relative; isolation: isolate; } .blueprint::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px), linear-gradient(var(--grid-bold) 1px, transparent 1px), linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px); background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 78%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 78%); pointer-events: none; } .blueprint--full::before { -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); } .glow { position: absolute; pointer-events: none; z-index: -1; border-radius: 999px; filter: blur(70px); opacity: .5; } /* ---------- buttons --------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 560; font-size: .935rem; letter-spacing: -.008em; white-space: nowrap; transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease); box-shadow: var(--shadow-1); } .btn:hover { border-color: var(--line-3); transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--ink-solid); color: var(--ink-inv); border-color: var(--ink-solid); } .btn--primary:hover { background: var(--ink); border-color: var(--ink); opacity: .92; } .btn--brand { background: var(--brand); color: #fff; border-color: color-mix(in srgb, var(--brand) 88%, #000); box-shadow: 0 1px 2px rgba(180,70,10,.28), inset 0 1px 0 rgba(255,255,255,.22); } .btn--brand:hover { background: color-mix(in srgb, var(--brand) 92%, #000); color: #fff; } .btn--ghost { background: transparent; border-color: var(--line); box-shadow: none; } .btn--ghost:hover { background: var(--surface-2); } .btn--lg { height: 52px; padding: 0 24px; font-size: 1rem; border-radius: var(--r); } .btn--sm { height: 36px; padding: 0 13px; font-size: .86rem; } .btn--block { width: 100%; } .btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn .arw { transition: transform .22s var(--ease-out); } .btn:hover .arw { transform: translateX(3px); } /* Inline icons carry no intrinsic size — every context that drops a raw icon() into markup must give it one, or the SVG defaults to 300×150. */ .btn .arw, .link .arw { display: inline-flex; width: 15px; height: 15px; flex: none; } .btn .arw svg, .link .arw svg { width: 100%; height: 100%; } .btn > svg, .link > svg { width: 16px; height: 16px; flex: none; } .callout > svg, .form-note > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; } .docs-help svg { width: 16px; height: 16px; } .link { display: inline-flex; align-items: center; gap: 7px; font-weight: 560; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .18s var(--ease), color .18s var(--ease); } .link:hover { color: var(--brand-ink); border-color: var(--brand); } .link .arw { transition: transform .22s var(--ease-out); } .link:hover .arw { transform: translateX(3px); } /* ---------- chips, pills, badges -------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .chip svg { width: 12px; height: 12px; } .chip--fit { background: var(--fit-soft); border-color: var(--fit-line); color: var(--fit); } .chip--nofit { background: var(--nofit-soft); border-color: var(--nofit-line); color: var(--nofit); } .chip--maybe { background: var(--maybe-soft); border-color: var(--maybe-line); color: var(--maybe); } .chip--brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); } .pill { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); font-size: .82rem; color: var(--ink-3); font-weight: 500; } .pill b { color: var(--ink); font-weight: 600; } .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--fit); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fit) 18%, transparent); } .dot--live { animation: pulse 2.6s var(--ease) infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fit) 18%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fit) 6%, transparent); } } .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); background: var(--surface-3); font-family: var(--font-mono); font-size: .68rem; color: var(--ink-3); } /* ---------- cards ----------------------------------------------------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .card--hover:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-2px); } .card--flush { padding: 0; overflow: hidden; } .card--sunken { background: var(--surface-2); } .card h3 { font-size: 1.06rem; letter-spacing: -.016em; } .card p { color: var(--ink-3); font-size: .935rem; margin-top: 9px; } /* corner crosshairs — engineering drawing tick marks */ .ticked::before, .ticked::after { content: ""; position: absolute; width: 7px; height: 7px; pointer-events: none; border-color: var(--brand); opacity: .55; } .ticked::before { top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid; } .ticked::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid; } .icon-box { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--brand-ink); } .icon-box svg { width: 19px; height: 19px; } /* ---------- stats ----------------------------------------------------- */ .stat { border-left: 2px solid var(--brand); padding-left: 16px; } .stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.85rem); letter-spacing: -.035em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .stat span { display: block; margin-top: 8px; color: var(--ink-3); font-size: .885rem; } .metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .metric-row > div { background: var(--surface); padding: 20px 22px; } .metric-row b { display: block; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .metric-row span { display: block; margin-top: 4px; font-size: .8rem; color: var(--ink-3); } /* ---------- tables ---------------------------------------------------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll::-webkit-scrollbar { height: 8px; } .table-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; } table.data { font-size: .9rem; min-width: 620px; } table.data th, table.data td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } table.data thead th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; border-bottom: 1px solid var(--line-2); white-space: nowrap; } table.data tbody th { font-weight: 560; color: var(--ink); } table.data tbody tr:last-child td, table.data tbody tr:last-child th { border-bottom: 0; } table.data td { color: var(--ink-3); } table.data .yes { color: var(--fit); font-weight: 600; } table.data .no { color: var(--ink-4); } /* ---------- forms ----------------------------------------------------- */ .field { display: block; } .field > span.lbl { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 560; color: var(--ink); } .field .hint { display: block; margin-top: 6px; font-size: .78rem; color: var(--ink-4); } .input, .select, .textarea { width: 100%; height: 46px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink); font-size: .94rem; transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease); } .textarea { height: auto; padding: 12px 14px; min-height: 118px; resize: vertical; line-height: 1.55; } .input::placeholder, .textarea::placeholder { color: var(--ink-4); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b95a3' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; padding-right: 36px; cursor: pointer; } .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--nofit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nofit) 14%, transparent); } .seg { display: flex; flex-wrap: wrap; gap: 7px; } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg label { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .86rem; color: var(--ink-3); cursor: pointer; transition: all .16s var(--ease); background: var(--surface); } .seg label:hover { border-color: var(--line-3); color: var(--ink); } .seg input:checked + label { background: var(--ink-solid); border-color: var(--ink-solid); color: var(--ink-inv); font-weight: 560; } .seg input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; } .form-note { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--ink-4); } .form-status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); font-size: .9rem; } .form-status[data-state="error"] { display: block; background: var(--nofit-soft); border: 1px solid var(--nofit-line); color: var(--nofit); } .form-status[data-state="ok"] { display: block; background: var(--fit-soft); border: 1px solid var(--fit-line); color: var(--fit); } .form-done { text-align: center; padding: 40px 20px; } .form-done .icon-box { margin-inline: auto; width: 48px; height: 48px; background: var(--fit-soft); border-color: var(--fit-line); color: var(--fit); } /* ---------- nav ------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 90; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); transition: border-color .2s var(--ease), background .2s var(--ease); } .nav[data-stuck="true"] { border-bottom-color: var(--line); } .nav-in { height: 64px; display: flex; align-items: center; gap: 26px; } .brand { display: inline-flex; align-items: center; gap: 9px; flex: none; } .brand-mark { width: 26px; height: 26px; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.03em; color: var(--ink); } .brand-name em { font-style: normal; color: var(--brand); } .brand-sub { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); border-left: 1px solid var(--line-2); padding-left: 9px; margin-left: 2px; align-self: center; } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 6px; } .nav-links > .btn { display: none; } /* mobile-drawer CTA; the header keeps its own */ .nav-links > a, .nav-drop > button { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border-radius: var(--r-sm); font-size: .89rem; font-weight: 500; color: var(--ink-3); transition: color .16s var(--ease), background .16s var(--ease); } .nav-links > a:hover, .nav-drop > button:hover { color: var(--ink); background: var(--surface-2); } .nav-links > a[aria-current="page"] { color: var(--ink); font-weight: 560; } .nav-spacer { margin-left: auto; } .nav-actions { display: flex; align-items: center; gap: 8px; } .nav-drop { position: relative; } .nav-drop > button svg { width: 13px; height: 13px; transition: transform .2s var(--ease); } .nav-drop[data-open="true"] > button svg { transform: rotate(180deg); } .nav-menu { position: absolute; top: calc(100% + 10px); left: -8px; width: 320px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-3); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; } .nav-drop[data-open="true"] .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-menu a { display: flex; gap: 12px; padding: 10px 11px; border-radius: var(--r-sm); transition: background .15s var(--ease); } .nav-menu a:hover { background: var(--surface-2); } .nav-menu b { display: block; font-size: .89rem; color: var(--ink); font-weight: 580; } .nav-menu span { display: block; font-size: .78rem; color: var(--ink-4); margin-top: 2px; line-height: 1.45; } .theme-toggle { width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink-3); transition: all .16s var(--ease); } .theme-toggle:hover { color: var(--ink); border-color: var(--line-2); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .ico-dark, .theme-toggle .ico-auto { display: none; } :root[data-theme="dark"] .theme-toggle .ico-dark { display: block; } :root[data-theme="dark"] .theme-toggle .ico-light { display: none; } :root[data-theme="system"] .theme-toggle .ico-auto { display: block; } :root[data-theme="system"] .theme-toggle .ico-light { display: none; } .nav-burger { display: none; width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); position: relative; } .nav-burger span { position: absolute; left: 10px; width: 16px; height: 1.5px; background: var(--ink); transition: transform .24s var(--ease), opacity .18s var(--ease); } .nav-burger span:nth-child(1) { top: 14px; } .nav-burger span:nth-child(2) { top: 19px; } .nav-burger span:nth-child(3) { top: 24px; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } @media (max-width: 1000px) { .nav-burger { display: block; } .nav-spacer { display: none; } .nav-actions { margin-left: auto; } .nav-actions .btn { display: none; } .nav-links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px var(--gutter) 22px; max-height: calc(100dvh - 64px); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; box-shadow: var(--shadow-3); } .nav[data-menu="open"] .nav-links { opacity: 1; visibility: visible; transform: translateY(0); } .nav-links > a, .nav-drop > button { height: 46px; font-size: 1rem; width: 100%; justify-content: space-between; } .nav-menu { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; margin: 2px 0 8px 11px; padding: 0 0 0 6px; display: none; } .nav-drop[data-open="true"] .nav-menu { display: block; } .nav-links .btn { display: inline-flex; margin-top: 12px; } } /* ---------- footer ---------------------------------------------------- */ .footer { border-top: 1px solid var(--line); background: var(--bg-sunken); padding-block: clamp(48px, 6vw, 76px) 34px; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px 28px; } @media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; } } .footer h4 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; margin-bottom: 14px; } .footer li + li { margin-top: 9px; } .footer li a { font-size: .89rem; color: var(--ink-3); transition: color .15s var(--ease); } .footer li a:hover { color: var(--brand-ink); } .footer-bar { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; font-size: .8rem; color: var(--ink-4); } .footer-bar .sp { margin-left: auto; } /* ---------- reveal ---------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--d, 0ms); } [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } } /* ---------- code ------------------------------------------------------ */ code { font-family: var(--font-mono); font-size: .855em; background: var(--surface-3); border-radius: var(--r-xs); padding: .12em .38em; color: var(--ink); } pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; overflow-x: auto; font-size: .82rem; line-height: 1.65; tab-size: 2; } pre code { background: none; padding: 0; font-size: inherit; color: var(--ink-2); } .code-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; background: var(--surface-3); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); } .code-head + pre { border-radius: 0 0 var(--r) var(--r); } /* ---------- prose (legal + long form) --------------------------------- */ .prose { color: var(--ink-2); font-size: 1rem; line-height: 1.72; } .prose > * + * { margin-top: 1.05em; } .prose h2 { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem); margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--line); letter-spacing: -.022em; } .prose h3 { font-size: 1.1rem; margin-top: 1.9em; } .prose h4 { font-size: .98rem; margin-top: 1.6em; color: var(--ink); } .prose ul, .prose ol { padding-left: 1.15em; } .prose ul > li { list-style: none; position: relative; padding-left: 1.05em; } .prose ul > li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 1.5px; background: var(--brand); } .prose ol { list-style: decimal; } .prose ol > li::marker { color: var(--ink-4); font-family: var(--font-mono); font-size: .82em; } .prose li + li { margin-top: .45em; } .prose a { color: var(--brand-ink); border-bottom: 1px solid var(--brand-line); } .prose a:hover { border-color: var(--brand); } .prose strong { color: var(--ink); font-weight: 620; } .prose blockquote { border-left: 2px solid var(--brand); padding-left: 18px; color: var(--ink-3); } .prose table { font-size: .9rem; margin-block: 1.6em; } .prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); } .prose thead th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; border-bottom: 1px solid var(--line-2); } .prose .legal-meta { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-4); } /* ---------- page head ------------------------------------------------- */ .page-head { padding-top: clamp(48px, 7vw, 92px); padding-bottom: clamp(30px, 4vw, 52px); border-bottom: 1px solid var(--line); position: relative; } .page-head .d1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem); margin-top: 18px; } .page-head .lead { margin-top: 18px; max-width: 62ch; } /* ---------- misc ------------------------------------------------------ */ .hr-ticks { height: 1px; background: var(--line); position: relative; } .hr-ticks::before, .hr-ticks::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--brand); } .hr-ticks::before { left: 0; } .hr-ticks::after { right: 0; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 34px; width: max-content; animation: slide 46s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-50%); } } .marquee-track span { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink-4); white-space: nowrap; } details.faq { border-bottom: 1px solid var(--line); padding: 4px 0; } details.faq summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; font-weight: 560; color: var(--ink); font-size: 1rem; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-right: 1.5px solid var(--ink-4); border-bottom: 1.5px solid var(--ink-4); transform: rotate(45deg); transition: transform .22s var(--ease); } details.faq[open] summary::after { transform: rotate(-135deg); } details.faq .faq-body { padding: 0 44px 20px 0; color: var(--ink-3); font-size: .945rem; } details.faq .faq-body > * + * { margin-top: .8em; } .callout { display: flex; gap: 13px; border: 1px solid var(--line); border-left: 2px solid var(--brand); background: var(--surface-2); border-radius: var(--r-sm); padding: 15px 17px; font-size: .9rem; color: var(--ink-3); } .callout b { color: var(--ink); } .callout--fit { border-left-color: var(--fit); background: var(--fit-soft); border-color: var(--fit-line); } .callout--warn { border-left-color: var(--maybe); background: var(--maybe-soft); border-color: var(--maybe-line); } .noscroll { overflow: hidden; } .vh { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .page { display: flex; flex-direction: column; min-height: 100dvh; }