/* Inter variable (wght 100–900), self-hosted. Family name is namespaced so a site's own Inter declarations cannot shadow it. Licence: fonts/Inter-LICENSE.txt (OFL). */ @font-face { font-family: 'Octopus Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/landing-ui/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Octopus Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/landing-ui/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); 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; } /* @octopus/landing-ui — shared tokens and base styles (DESIGN-STANDARD v2). Every site uses these values unchanged. Only css/themes/.css differs. Colours are RGB channels: use rgb(var(--ink)) or rgb(var(--ink) / 0.5). */ :root { /* Type: Inter for every site, system mono, shared CJK fallback. */ --font-cjk: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei'; --font-sans: 'Octopus Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, var(--font-cjk), sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --leading-xs: 1.1rem; --text-sm: 0.875rem; --leading-sm: 1.4rem; --text-base: 1rem; --leading-base: 1.65rem; --text-lg: 1.125rem; --leading-lg: 1.75rem; --text-xl: 1.3rem; --leading-xl: 1.85rem; --text-2xl: 1.6rem; --leading-2xl: 2.1rem; --text-3xl: 2rem; --leading-3xl: 2.4rem; --text-4xl: 2.6rem; --leading-4xl: 2.9rem; --text-5xl: clamp(2.4rem, 5vw, 3.75rem); --leading-5xl: 1.05; --text-6xl: clamp(2.6rem, 6.5vw, 4.75rem); --leading-6xl: 1.02; --tracking-tight: -0.025em; --tracking-tighter: -0.03em; --tracking-eyebrow: 0.12em; /* Layout */ --container: 80rem; --container-prose: 44rem; --gutter: clamp(1rem, 4vw, 2.5rem); --section-y: clamp(4rem, 8vw, 7rem); --section-y-sm: clamp(2.5rem, 5vw, 4rem); --header-h: 4rem; --grid-size: 48px; /* Shape */ --radius-sm: 0.375rem; --radius-control: 0.625rem; --radius-card: 1rem; --radius-panel: 1.5rem; --radius-full: 9999px; /* Elevation */ --shadow-rgb: 15 23 42; --shadow-subtle: 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.05); --shadow-card: 0 1px 3px rgb(var(--shadow-rgb) / 0.08), 0 1px 2px -1px rgb(var(--shadow-rgb) / 0.06); --shadow-raised: 0 4px 6px -2px rgb(var(--shadow-rgb) / 0.08), 0 12px 24px -8px rgb(var(--shadow-rgb) / 0.12); /* Motion */ --duration-fast: 150ms; --duration-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* Family gradient: Core lockup product names only. */ --family-gradient: linear-gradient(100deg, #00a0e9 0%, #7b3ff2 55%, #f402fb 100%); } :root[data-theme='dark'] { --shadow-rgb: 0 0 0; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --shadow-rgb: 0 0 0; } } /* ---- Base elements -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; background-color: rgb(var(--canvas)); color: rgb(var(--ink)); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html:lang(en) body { font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01'; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; color: rgb(var(--ink)); text-wrap: balance; } p { text-wrap: pretty; } ::selection { background-color: rgb(var(--brand) / 0.2); } /* Focus ring: one rule for the whole group (R11). */ :focus-visible { outline: 2px solid rgb(var(--ring)); outline-offset: 2px; } :focus:not(:focus-visible) { outline: 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; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .oc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Typography ------------------------------------------------------- */ .oc-display { font-size: var(--text-6xl); line-height: var(--leading-6xl); letter-spacing: var(--tracking-tighter); font-weight: 600; } .oc-h1 { font-size: var(--text-5xl); line-height: var(--leading-5xl); letter-spacing: var(--tracking-tight); font-weight: 600; } .oc-h2 { font-size: var(--text-3xl); line-height: var(--leading-3xl); letter-spacing: -0.02em; font-weight: 600; } @media (min-width: 640px) { .oc-h2 { font-size: var(--text-4xl); line-height: var(--leading-4xl); } } .oc-h2s { font-size: var(--text-2xl); line-height: var(--leading-2xl); letter-spacing: -0.015em; font-weight: 600; } .oc-h3 { font-size: var(--text-xl); line-height: var(--leading-xl); letter-spacing: -0.01em; font-weight: 600; } .oc-h4 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 600; } .oc-lead { font-size: var(--text-lg); line-height: var(--leading-lg); color: rgb(var(--ink-muted)); } @media (min-width: 640px) { .oc-lead { font-size: var(--text-xl); line-height: var(--leading-xl); } } .oc-body { font-size: var(--text-base); line-height: var(--leading-base); color: rgb(var(--ink-muted)); } .oc-small { font-size: var(--text-sm); line-height: var(--leading-sm); color: rgb(var(--ink-muted)); } .oc-eyebrow { display: inline-block; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: rgb(var(--brand-text)); } :is(.oc-display, .oc-h1, .oc-h2, .oc-h2s, .oc-h3, .oc-h4) { margin: 0; } html:lang(zh) :is(.oc-display, .oc-h1, .oc-h2, h1, h2) { letter-spacing: normal; } html:lang(zh) .oc-display { line-height: 1.12; } html:lang(zh) .oc-h1 { line-height: 1.15; } html:lang(zh) .oc-h2 { line-height: 1.3; } html:lang(zh) .oc-eyebrow { letter-spacing: 0.04em; } .oc-link { color: rgb(var(--brand-text)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .oc-link:hover { text-decoration-thickness: 2px; } /* @octopus/landing-ui — site shell: skip link, header, drawer, footer. Markup comes from the package (React components or the static renderer); sites never restyle these classes. */ .oc-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } /* ---- Skip link ------------------------------------------------------ */ .oc-skip { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: 0.5rem 1rem; border-radius: var(--radius-control); background: rgb(var(--brand)); color: rgb(var(--brand-contrast)); font-size: var(--text-sm); font-weight: 600; text-decoration: none; } .oc-skip:focus { top: 0.75rem; } /* ---- Lockup --------------------------------------------------------- */ .oc-lockup { display: inline-flex; align-items: center; gap: 0.625rem; color: rgb(var(--ink)); text-decoration: none; border-radius: var(--radius-sm); min-width: 0; } .oc-header .oc-lockup { flex: none; } @media (max-width: 639.98px) { .oc-header .oc-lockup { flex: 0 1 auto; } } .oc-lockup__mark { width: 28px; height: 28px; flex: none; display: block; } .oc-lockup__words { display: flex; flex-direction: column; min-width: 0; } .oc-lockup__text { font-size: 1.0625rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-lockup__name { background-image: var(--lockup-fill); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .oc-lockup__endorse { font-size: var(--text-xs); line-height: 1rem; color: rgb(var(--ink-muted)); white-space: nowrap; } @media (forced-colors: active) { .oc-lockup__name { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; } } /* ---- Header --------------------------------------------------------- */ .oc-header { position: sticky; top: 0; z-index: 40; height: var(--header-h); border-bottom: 1px solid rgb(var(--line)); background: rgb(var(--canvas) / 0.85); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); } .oc-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .oc-header__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; } .oc-header__extra { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 1023.98px) { .oc-header:not(.oc-header--nav-xl):not(.oc-header--nav-2xl) .oc-header__extra { display: none; } } @media (max-width: 1279.98px) { .oc-header--nav-xl .oc-header__extra { display: none; } } @media (max-width: 1535.98px) { .oc-header--nav-2xl .oc-header__extra { display: none; } } /* Primary nav: visible from lg (or xl with .oc-header--nav-xl). */ .oc-nav { display: none; height: 100%; } @media (min-width: 1024px) { .oc-header:not(.oc-header--nav-xl):not(.oc-header--nav-2xl) .oc-nav { display: block; } } @media (min-width: 1536px) { .oc-header--nav-2xl .oc-nav { display: block; } } @media (min-width: 1280px) { .oc-header--nav-xl .oc-nav { display: block; } } .oc-nav__list { display: flex; align-items: stretch; height: 100%; gap: 0.25rem; margin: 0; padding: 0; list-style: none; } .oc-nav__item { position: relative; display: flex; } .oc-nav__link { display: inline-flex; align-items: center; gap: 0.25rem; padding-inline: 0.75rem; font-size: var(--text-sm); font-weight: 500; color: rgb(var(--ink-muted)); text-decoration: none; white-space: nowrap; transition: color var(--duration-fast) var(--ease-standard); } .oc-nav__link:hover, .oc-nav__item:focus-within > .oc-nav__link, .oc-nav__link[aria-current] { color: rgb(var(--ink)); } .oc-nav__link[aria-current] { box-shadow: inset 0 -2px 0 rgb(var(--brand)); } .oc-nav__chevron { width: 12px; height: 12px; opacity: 0.6; } .oc-nav__panel { position: absolute; left: 0; top: 100%; min-width: 19rem; padding: 0.5rem; border: 1px solid rgb(var(--line)); border-radius: var(--radius-card); background: rgb(var(--surface-raised)); box-shadow: var(--shadow-raised); visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), visibility var(--duration-fast); } .oc-nav__item:hover > .oc-nav__panel, .oc-nav__item:focus-within > .oc-nav__panel { visibility: visible; opacity: 1; transform: none; } .oc-nav__panel ul { margin: 0; padding: 0; list-style: none; } .oc-nav__summary { margin: 0; padding: 0.25rem 0.75rem 0.5rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: rgb(var(--ink-subtle)); } .oc-nav__panel-link { display: block; padding: 0.5rem 0.75rem; border-radius: var(--radius-control); text-decoration: none; } .oc-nav__panel-link:hover, .oc-nav__panel-link:focus-visible { background: rgb(var(--ink) / 0.06); } .oc-nav__panel-title { display: block; font-size: var(--text-sm); font-weight: 500; color: rgb(var(--ink)); } .oc-nav__panel-desc { display: block; margin-top: 0.125rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: rgb(var(--ink-muted)); } /* Locale switch: "EN / 中文", keeps the current path. */ .oc-locale { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--text-sm); color: rgb(var(--ink-subtle)); } .oc-locale a { padding: 0.25rem 0.375rem; border-radius: var(--radius-sm); color: rgb(var(--ink-muted)); text-decoration: none; font-weight: 500; } .oc-locale a:hover { color: rgb(var(--ink)); } .oc-locale a[aria-current] { color: rgb(var(--ink)); font-weight: 600; } .oc-header .oc-locale { display: none; } @media (min-width: 640px) { .oc-header .oc-locale { display: inline-flex; } } .oc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: rgb(var(--ink-muted)); cursor: pointer; } .oc-icon-btn:hover { background: rgb(var(--surface-muted)); color: rgb(var(--ink)); } .oc-icon-btn svg { width: 20px; height: 20px; } .oc-menu-btn svg { width: 24px; height: 24px; } /* Theme toggle shows the icon of the theme it switches TO. */ .oc-theme-toggle .oc-icon-sun { display: none; } :root[data-theme='dark'] .oc-theme-toggle .oc-icon-sun { display: block; } :root[data-theme='dark'] .oc-theme-toggle .oc-icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .oc-theme-toggle .oc-icon-sun { display: block; } :root:not([data-theme]) .oc-theme-toggle .oc-icon-moon { display: none; } } .oc-signin { display: none; align-items: center; gap: 0.25rem; padding-inline: 0.5rem; font-size: var(--text-sm); font-weight: 500; color: rgb(var(--ink-muted)); text-decoration: none; white-space: nowrap; } .oc-signin:hover { color: rgb(var(--ink)); } @media (min-width: 1024px) { .oc-header .oc-signin { display: inline-flex; } } .oc-header__cta { display: none !important; } @media (min-width: 640px) { .oc-header__cta { display: inline-flex !important; } } .oc-menu-btn { display: inline-flex; } @media (min-width: 1024px) { .oc-header:not(.oc-header--nav-xl):not(.oc-header--nav-2xl) .oc-menu-btn { display: none; } } @media (min-width: 1536px) { .oc-header--nav-2xl .oc-menu-btn { display: none; } } @media (min-width: 1280px) { .oc-header--nav-xl .oc-menu-btn { display: none; } } /* ---- Drawer (below lg) ---------------------------------------------- */ .oc-drawer { position: fixed; inset: 0; z-index: 1000; } .oc-drawer[hidden] { display: none; } .oc-drawer__scrim { position: absolute; inset: 0; background: rgb(var(--ink) / 0.4); } .oc-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: 100%; max-width: 24rem; overflow-y: auto; background: rgb(var(--surface)); box-shadow: var(--shadow-raised); animation: oc-drawer-in var(--duration-base) var(--ease-entrance); } @keyframes oc-drawer-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } } .oc-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); padding-inline: 1.25rem; border-bottom: 1px solid rgb(var(--line)); flex: none; } .oc-drawer__nav { flex: 1; padding: 1rem 0.75rem; } .oc-drawer__nav ul { margin: 0; padding: 0; list-style: none; } .oc-drawer__group + .oc-drawer__group { margin-top: 1rem; } .oc-drawer__group-title { margin: 0; padding: 0 0.75rem 0.25rem; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: rgb(var(--ink-subtle)); } .oc-drawer__link { display: block; padding: 0.625rem 0.75rem; border-radius: var(--radius-control); color: rgb(var(--ink)); text-decoration: none; font-weight: 500; } .oc-drawer__link:hover, .oc-drawer__link:focus-visible { background: rgb(var(--ink) / 0.06); } .oc-drawer__link[aria-current] { color: rgb(var(--brand-text)); } .oc-drawer__foot { display: grid; gap: 1rem; padding: 1rem 1.25rem 1.5rem; border-top: 1px solid rgb(var(--line)); } .oc-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .oc-drawer .oc-signin { display: inline-flex; padding: 0; } html.oc-scroll-lock { overflow: hidden; } /* ---- Footer --------------------------------------------------------- */ .oc-footer { border-top: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink-muted)); } .oc-footer > .oc-container { padding-block: 3.5rem 2rem; } .oc-footer h2, .oc-footer h3 { margin: 0; } .oc-footer ul { margin: 0; padding: 0; list-style: none; } .oc-footer a { color: rgb(var(--ink-muted)); text-decoration: none; } .oc-footer a:hover { color: rgb(var(--brand-text)); } .oc-footer__top { display: grid; gap: 2.5rem; } @media (min-width: 640px) { .oc-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .oc-footer__top { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } .oc-footer__top--cols-1 { grid-template-columns: 1.4fr minmax(0, 1fr); } .oc-footer__top--cols-2 { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); } .oc-footer__top--cols-3 { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 1023.98px) { .oc-footer__brand { grid-column: 1 / -1; } } .oc-footer__brand { max-width: 22rem; } .oc-footer__brand .oc-lockup { color: rgb(var(--ink)); } .oc-footer__tagline { margin: 1rem 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); } .oc-footer__location { margin: 1rem 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: rgb(var(--ink-subtle)); } .oc-footer__col-title { font-size: var(--text-sm); font-weight: 600; color: rgb(var(--ink)); } .oc-footer__col ul { margin-top: 0.75rem; display: grid; gap: 0.5rem; } .oc-footer__col a { font-size: var(--text-sm); line-height: var(--leading-sm); } .oc-family { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgb(var(--line)); } .oc-family__title { font-size: var(--text-sm); font-weight: 600; color: rgb(var(--ink)); } .oc-family__groups { display: grid; gap: 2rem; margin-top: 1rem; } @media (min-width: 768px) { .oc-family__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .oc-family__label { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: rgb(var(--ink-subtle)); } .oc-family__group ul { margin-top: 0.75rem; display: grid; gap: 0.5rem; } .oc-family__group li { font-size: var(--text-sm); line-height: var(--leading-sm); } .oc-family__current { font-weight: 600; color: rgb(var(--ink)); } .oc-family__current span { font-weight: 400; color: rgb(var(--ink-subtle)); } .oc-family__note { margin: 0.75rem 0 0; max-width: 22rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: rgb(var(--ink-subtle)); } .oc-footer__notes { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgb(var(--line)); display: grid; gap: 0.5rem; } .oc-footer__notes a { text-decoration: underline; text-underline-offset: 2px; } .oc-footer__notes p { margin: 0; max-width: 48rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: rgb(var(--ink-subtle)); } .oc-footer__legal { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(var(--line)); display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: rgb(var(--ink-subtle)); } @media (min-width: 768px) { .oc-footer__legal { flex-direction: row; align-items: flex-start; justify-content: space-between; } } .oc-footer__legal p { margin: 0; } .oc-footer__legal p + p { margin-top: 0.25rem; } .oc-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; } .oc-footer__legal a { color: rgb(var(--ink-subtle)); } /* ---- Cookie notice (information only) -------------------------------- */ .oc-cookie { position: fixed; z-index: 900; left: 1rem; right: 1rem; bottom: 1rem; margin-inline: auto; max-width: 44rem; display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid rgb(var(--line)); border-radius: var(--radius-card); background: rgb(var(--surface-raised)); box-shadow: var(--shadow-raised); animation: oc-cookie-in var(--duration-base) var(--ease-entrance); } .oc-cookie[hidden] { display: none; } @media (min-width: 640px) { .oc-cookie { flex-direction: row; align-items: center; } } .oc-cookie__text { flex: 1; min-width: 0; } .oc-cookie__title { margin: 0 0 0.25rem; font-size: var(--text-sm); font-weight: 600; color: rgb(var(--ink)); } .oc-cookie__body { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: rgb(var(--ink-muted)); } .oc-cookie .oc-btn { flex: none; align-self: flex-start; } @media (min-width: 640px) { .oc-cookie .oc-btn { align-self: center; } } @keyframes oc-cookie-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media print { .oc-cookie { display: none !important; } } /* @octopus/landing-ui — shared page components (DESIGN-STANDARD v2 §4). */ /* ---- Button --------------------------------------------------------- */ .oc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.75rem; padding-inline: 1.25rem; border: 1px solid transparent; border-radius: var(--radius-control); font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .oc-btn:disabled, .oc-btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; } .oc-btn--sm { height: 2.25rem; padding-inline: 0.875rem; } .oc-btn--lg { height: 3rem; padding-inline: 1.5rem; font-size: var(--text-base); } .oc-btn--block { width: 100%; } .oc-btn--primary { background: rgb(var(--brand)); color: rgb(var(--brand-contrast)); } .oc-btn--primary:hover { background: rgb(var(--brand-strong)); } .oc-btn--secondary { background: rgb(var(--surface)); border-color: rgb(var(--line-strong)); color: rgb(var(--ink)); } .oc-btn--secondary:hover { border-color: rgb(var(--brand-text)); color: rgb(var(--brand-text)); } .oc-btn--ghost { background: transparent; color: rgb(var(--ink-muted)); } .oc-btn--ghost:hover { background: rgb(var(--surface-muted)); color: rgb(var(--ink)); } .oc-btn--inverse { background: transparent; border-color: rgb(var(--inverse-fg) / 0.3); color: rgb(var(--inverse-fg)); } .oc-btn--inverse:hover { background: rgb(var(--inverse-fg) / 0.1); } .oc-btn--inverse-primary { background: rgb(var(--inverse-fg)); color: rgb(var(--inverse-bg)); } .oc-btn--inverse-primary:hover { background: rgb(var(--inverse-fg) / 0.88); } .oc-btn--link { height: auto; padding: 0; border: 0; background: none; color: rgb(var(--brand-text)); } .oc-btn--link:hover { text-decoration: underline; text-underline-offset: 4px; } .oc-btn__icon { width: 16px; height: 16px; flex: none; transition: transform var(--duration-fast) var(--ease-standard); } .oc-btn:hover .oc-btn__icon--trail { transform: translateX(2px); } .oc-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } /* ---- Section and layout -------------------------------------------- */ .oc-section { padding-block: var(--section-y); } .oc-section--sm { padding-block: var(--section-y-sm); } .oc-section--muted { background: rgb(var(--surface-muted)); } .oc-section--surface { background: rgb(var(--surface)); } .oc-section--inverse { background: rgb(var(--inverse-bg)); color: rgb(var(--inverse-fg)); } .oc-section--inverse :is(h1, h2, h3, h4, .oc-display, .oc-h1, .oc-h2, .oc-h3, .oc-h4) { color: rgb(var(--inverse-fg)); } .oc-section--inverse :is(.oc-lead, .oc-body, .oc-small) { color: rgb(var(--inverse-muted)); } .oc-section--inverse .oc-eyebrow { color: rgb(var(--inverse-accent)); } .oc-section--inverse .oc-card { background: rgb(var(--inverse-fg) / 0.04); border-color: rgb(var(--inverse-line)); box-shadow: none; } .oc-section--inverse .oc-card__title { color: rgb(var(--inverse-fg)); } .oc-section--inverse .oc-card__body { color: rgb(var(--inverse-muted)); } .oc-section--bordered { border-top: 1px solid rgb(var(--line)); } .oc-prose-width { max-width: var(--container-prose); } .oc-section-heading { max-width: 48rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .oc-section-heading--sm { margin-bottom: 1.25rem; } .oc-section-heading--none { margin-bottom: 0; } .oc-section-heading--aside { max-width: none; display: flex; flex-direction: column; gap: 1rem; } .oc-section-heading--aside .oc-section-heading__main { max-width: 48rem; } @media (min-width: 768px) { .oc-section-heading--aside { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .oc-section-heading__aside { flex: none; } .oc-section-heading--center { margin-inline: auto; text-align: center; } .oc-section-heading .oc-eyebrow { margin-bottom: 0.75rem; } .oc-section-heading .oc-lead { margin: 1rem 0 0; } .oc-grid { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .oc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .oc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .oc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---- Page hero ------------------------------------------------------ */ .oc-hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); } /* Inner pages: tighter hero (page-size title). */ .oc-hero:has(> .oc-container > .oc-hero__before), .oc-hero:has(.oc-h1) { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem); } .oc-hero--grid { position: relative; isolation: isolate; } .oc-hero--grid::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgb(var(--line) / 0.6) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--line) / 0.6) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); } .oc-hero--inverse { background: rgb(var(--inverse-bg)); color: rgb(var(--inverse-fg)); } .oc-hero--inverse :is(h1, .oc-display, .oc-h1) { color: rgb(var(--inverse-fg)); } .oc-hero--inverse :is(.oc-lead, .oc-body, .oc-small) { color: rgb(var(--inverse-muted)); } .oc-hero--inverse .oc-breadcrumbs, .oc-section--inverse .oc-breadcrumbs { --_bc-ink: var(--inverse-fg); --_bc-muted: var(--inverse-muted); } .oc-hero--image { position: relative; isolation: isolate; overflow: hidden; } .oc-hero__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .oc-hero--image::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(var(--inverse-bg) / 0.92) 0%, rgb(var(--inverse-bg) / 0.75) 55%, rgb(var(--inverse-bg) / 0.45) 100%); } .oc-hero--inverse .oc-eyebrow { color: rgb(var(--inverse-accent)); } .oc-hero--inverse.oc-hero--grid::before, .oc-section--inverse .oc-hero--grid::before { background-image: linear-gradient(to right, rgb(var(--inverse-line) / 0.8) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--inverse-line) / 0.8) 1px, transparent 1px); } /* Hero followed by a section on the same background: don't stack both paddings. */ .oc-hero + .oc-section:not(.oc-section--muted):not(.oc-section--surface):not(.oc-section--inverse) { padding-top: var(--section-y-sm); } .oc-hero__before { margin-bottom: 1.5rem; } .oc-hero__badge { margin-bottom: 1rem; } .oc-hero__body { max-width: 48rem; } .oc-hero__split { display: grid; gap: 3rem; align-items: center; } .oc-hero__split > * { min-width: 0; } @media (min-width: 1024px) { .oc-hero__split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } .oc-hero__split--wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); } .oc-hero__split--narrow { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } } .oc-hero .oc-eyebrow { margin-bottom: 1rem; } .oc-hero .oc-lead { margin: 1.5rem 0 0; max-width: 40rem; } .oc-hero .oc-btn-row { margin-top: 2rem; } /* ---- Card ----------------------------------------------------------- */ .oc-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid rgb(var(--line)); border-radius: var(--radius-card); background: rgb(var(--surface)); box-shadow: var(--shadow-subtle); transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .oc-card--muted { background: rgb(var(--surface-muted)); box-shadow: none; } .oc-card--interactive:hover { border-color: rgb(var(--brand) / 0.5); transform: translateY(-2px); } .oc-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: var(--radius-control); background: rgb(var(--brand-soft)); color: rgb(var(--brand-text)); } .oc-card__icon svg { width: 20px; height: 20px; } .oc-card__index { margin-bottom: 0.75rem; font-family: var(--font-mono); font-size: var(--text-sm); color: rgb(var(--brand-text)); } .oc-card__eyebrow { margin-bottom: 0.5rem; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: rgb(var(--brand-text)); } .oc-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .oc-card__title { margin: 0; font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 600; color: rgb(var(--ink)); } .oc-card__body { margin: 0.5rem 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: rgb(var(--ink-muted)); } .oc-card__footer { margin-top: auto; padding-top: 1.25rem; } /* Whole-card link: put .oc-card__link on the title's . */ .oc-card__link { color: inherit; text-decoration: none; } .oc-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .oc-card__link:focus-visible { outline: none; } .oc-card:has(.oc-card__link:focus-visible) { outline: 2px solid rgb(var(--ring)); outline-offset: 2px; } /* ---- Badge and illustrative label ----------------------------------- */ .oc-badge { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.5rem; padding-inline: 0.625rem; border-radius: var(--radius-full); background: rgb(var(--brand-soft)); color: rgb(var(--brand-text)); font-size: var(--text-xs); font-weight: 600; } .oc-badge--neutral { background: rgb(var(--surface-muted)); color: rgb(var(--ink-muted)); } .oc-badge--positive { background: rgb(var(--positive) / 0.12); color: rgb(var(--positive)); } .oc-badge--caution { background: rgb(var(--caution) / 0.12); color: rgb(var(--caution)); } .oc-badge--info { background: rgb(var(--info) / 0.12); color: rgb(var(--info)); } .oc-badge--danger { background: rgb(var(--danger) / 0.12); color: rgb(var(--danger)); } .oc-illustrative { font-size: var(--text-xs); color: rgb(var(--ink-subtle)); font-style: italic; } /* ---- CTA band ------------------------------------------------------- */ .oc-cta { display: grid; gap: 2rem; align-items: center; padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--radius-panel); background: rgb(var(--inverse-bg)); color: rgb(var(--inverse-fg)); } @media (min-width: 1024px) { .oc-cta { grid-template-columns: minmax(0, 1fr) auto; } } .oc-cta h2, .oc-cta .oc-h2 { margin: 0; color: rgb(var(--inverse-fg)); } .oc-cta .oc-eyebrow { margin: 0 0 0.75rem; color: rgb(var(--inverse-accent)); } .oc-cta p { margin: 0.75rem 0 0; color: rgb(var(--inverse-muted)); max-width: 40rem; } /* ---- Prose (legal pages, articles) --------------------------------- */ .oc-prose { max-width: var(--container-prose); color: rgb(var(--ink-muted)); font-size: var(--text-base); line-height: 1.75; } .oc-prose > * + * { margin-top: 1.25em; } .oc-prose > :first-child { margin-top: 0; } .oc-prose :is(h2, h3, h4) { color: rgb(var(--ink)); margin-top: 2em; margin-bottom: 0; } .oc-prose h2 { font-size: var(--text-2xl); line-height: var(--leading-2xl); } .oc-prose h3 { font-size: var(--text-xl); line-height: var(--leading-xl); } .oc-prose h4 { font-size: var(--text-lg); line-height: var(--leading-lg); } .oc-prose :is(h2, h3, h4) + * { margin-top: 0.75em; } .oc-prose p, .oc-prose ul, .oc-prose ol { margin-bottom: 0; } .oc-prose a { color: rgb(var(--brand-text)); text-decoration: underline; text-underline-offset: 3px; } .oc-prose strong { color: rgb(var(--ink)); font-weight: 600; } .oc-prose ul, .oc-prose ol { padding-left: 1.25em; } .oc-prose ul { list-style: disc; } .oc-prose ol { list-style: decimal; } .oc-prose li::marker { color: rgb(var(--ink-subtle)); } .oc-prose li + li { margin-top: 0.4em; } .oc-prose blockquote { margin-inline: 0; padding-left: 1rem; border-left: 3px solid rgb(var(--brand)); color: rgb(var(--ink)); } .oc-prose :not(pre) > code { font-family: var(--font-mono); font-size: 0.9em; padding: 0.1em 0.3em; border-radius: var(--radius-sm); background: rgb(var(--surface-muted)); } .oc-prose pre { overflow-x: auto; padding: 1rem 1.25rem; border-radius: var(--radius-control); background: rgb(var(--inverse-bg)); color: rgb(var(--inverse-fg)); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; } .oc-prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; } .oc-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .oc-prose :is(th, td) { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgb(var(--line)); text-align: left; vertical-align: top; } .oc-prose th { color: rgb(var(--ink)); font-weight: 600; } .oc-prose hr { border: 0; border-top: 1px solid rgb(var(--line)); } .oc-updated { font-size: var(--text-sm); color: rgb(var(--ink-subtle)); } /* ---- Forms ---------------------------------------------------------- */ .oc-form, .oc-form__grid { display: grid; gap: 1.25rem; } .oc-form__row { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .oc-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .oc-field { display: grid; gap: 0.375rem; } .oc-label { font-size: var(--text-sm); font-weight: 600; color: rgb(var(--ink)); } .oc-label__optional { font-weight: 400; color: rgb(var(--ink-subtle)); } .oc-hint { font-size: var(--text-xs); line-height: var(--leading-xs); color: rgb(var(--ink-subtle)); } .oc-input, .oc-select, .oc-textarea { width: 100%; min-height: 2.75rem; padding: 0.625rem 0.875rem; border: 1px solid rgb(var(--line-strong)); border-radius: var(--radius-control); background: rgb(var(--surface)); color: rgb(var(--ink)); font: inherit; font-size: var(--text-base); line-height: 1.5; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .oc-textarea { min-height: 8rem; resize: vertical; } .oc-select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23787878' stroke-width='1.4'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 12px; } .oc-input::placeholder, .oc-textarea::placeholder { color: rgb(var(--ink-subtle)); } .oc-input:hover, .oc-select:hover, .oc-textarea:hover { border-color: rgb(var(--ink-subtle)); } .oc-input:focus-visible, .oc-select:focus-visible, .oc-textarea:focus-visible { outline: none; border-color: rgb(var(--ring)); box-shadow: 0 0 0 3px rgb(var(--ring) / 0.25); } .oc-field[data-invalid] :is(.oc-input, .oc-select, .oc-textarea) { border-color: rgb(var(--danger)); } .oc-error { font-size: var(--text-xs); line-height: var(--leading-xs); color: rgb(var(--danger)); } .oc-error:empty { display: none; } .oc-check { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: rgb(var(--ink-muted)); } .oc-check input { width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; flex: none; accent-color: rgb(var(--brand)); } .oc-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } .oc-form__status { padding: 0.875rem 1rem; border-radius: var(--radius-control); font-size: var(--text-sm); line-height: var(--leading-sm); } .oc-form__status:empty { display: none; } .oc-form__status[data-tone='success'] { background: rgb(var(--positive) / 0.1); color: rgb(var(--positive)); } .oc-form__status[data-tone='error'] { background: rgb(var(--danger) / 0.1); color: rgb(var(--danger)); } .oc-form__status[data-tone='info'] { background: rgb(var(--surface-muted)); color: rgb(var(--ink-muted)); } .oc-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .oc-form[data-state='sent'] .oc-form__fields { display: none; } /* ---- Breadcrumbs ---------------------------------------------------- */ .oc-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: rgb(var(--_bc-muted, var(--ink-subtle))); } .oc-breadcrumbs li + li::before { content: '/'; margin-right: 0.375rem; opacity: 0.6; } .oc-breadcrumbs a { color: rgb(var(--_bc-muted, var(--ink-muted))); text-decoration: none; } .oc-breadcrumbs a:hover { color: rgb(var(--_bc-ink, var(--brand-text))); text-decoration: underline; } .oc-breadcrumbs [aria-current] { color: rgb(var(--_bc-ink, var(--ink))); } /* ---- Checklist ------------------------------------------------------ */ .oc-checklist { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .oc-checklist li { display: flex; gap: 0.75rem; align-items: flex-start; color: rgb(var(--ink-muted)); } .oc-checklist svg { width: 20px; height: 20px; flex: none; margin-top: 0.15rem; color: rgb(var(--brand-text)); } .oc-section--inverse .oc-checklist li { color: rgb(var(--inverse-muted)); } .oc-section--inverse .oc-checklist svg { color: rgb(var(--inverse-accent)); } /* ---- FAQ ------------------------------------------------------------ */ .oc-faq { border-top: 1px solid rgb(var(--line)); } .oc-faq details { border-bottom: 1px solid rgb(var(--line)); } .oc-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; cursor: pointer; list-style: none; font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 600; color: rgb(var(--ink)); } .oc-faq summary::-webkit-details-marker { display: none; } .oc-faq summary svg { width: 20px; height: 20px; flex: none; color: rgb(var(--ink-subtle)); transition: transform var(--duration-fast) var(--ease-standard); } .oc-faq details[open] summary svg { transform: rotate(180deg); } .oc-faq__answer { padding-bottom: 1.25rem; max-width: var(--container-prose); color: rgb(var(--ink-muted)); } .oc-faq__answer > :first-child { margin-top: 0; } .oc-faq__answer > :last-child { margin-bottom: 0; } .oc-faq__q { margin: 0; font: inherit; color: inherit; } /* ---- Callout, empty state, spinner, skeleton (v1.2) ------------------ */ .oc-callout { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border: 1px solid; border-radius: var(--radius-control); font-size: var(--text-sm); line-height: var(--leading-sm); } .oc-callout--info { border-color: rgb(var(--info) / 0.3); background: rgb(var(--info) / 0.06); } .oc-callout--brand { border-color: rgb(var(--brand) / 0.3); background: rgb(var(--brand-soft)); } .oc-callout--positive { border-color: rgb(var(--positive) / 0.3); background: rgb(var(--positive) / 0.06); } .oc-callout--caution { border-color: rgb(var(--caution) / 0.35); background: rgb(var(--caution) / 0.07); } .oc-callout--danger { border-color: rgb(var(--danger) / 0.35); background: rgb(var(--danger) / 0.06); } .oc-callout--neutral { border-color: rgb(var(--line)); background: rgb(var(--surface-muted)); } .oc-callout__icon svg { width: 20px; height: 20px; } .oc-callout--info .oc-callout__icon { color: rgb(var(--info)); } .oc-callout--positive .oc-callout__icon { color: rgb(var(--positive)); } .oc-callout--caution .oc-callout__icon { color: rgb(var(--caution)); } .oc-callout--danger .oc-callout__icon { color: rgb(var(--danger)); } .oc-callout--brand .oc-callout__icon { color: rgb(var(--brand-text)); } .oc-callout__title { margin: 0 0 0.25rem; font-weight: 600; color: rgb(var(--ink)); } .oc-callout__body { color: rgb(var(--ink-muted)); } .oc-callout__body > :first-child { margin-top: 0; } .oc-callout__body > :last-child { margin-bottom: 0; } .oc-empty { display: grid; justify-items: center; gap: 0.5rem; padding: 3rem 1.5rem; border: 1px dashed rgb(var(--line-strong)); border-radius: var(--radius-card); text-align: center; } .oc-empty__icon { color: rgb(var(--ink-subtle)); } .oc-empty__icon svg { width: 28px; height: 28px; } .oc-empty__title { margin: 0; font-weight: 600; color: rgb(var(--ink)); } .oc-empty__body { max-width: 32rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: rgb(var(--ink-muted)); } .oc-empty__action { margin-top: 0.75rem; } .oc-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid rgb(var(--line-strong)); border-top-color: rgb(var(--brand)); border-radius: 50%; animation: oc-spin 0.8s linear infinite; } @keyframes oc-spin { to { transform: rotate(360deg); } } .oc-skeleton-group { display: grid; gap: 0.5rem; } .oc-skeleton { display: block; height: 0.875rem; border-radius: var(--radius-sm); background: linear-gradient(90deg, rgb(var(--surface-muted)), rgb(var(--line)), rgb(var(--surface-muted))); background-size: 200% 100%; animation: oc-shimmer 1.4s ease-in-out infinite; } .oc-skeleton:last-child:not(:first-child) { width: 60%; } @keyframes oc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---- Choice group, segmented (v1.2) --------------------------------- */ .oc-choices { margin: 0; padding: 0; border: 0; min-width: 0; } .oc-choices > .oc-label { padding: 0; margin-bottom: 0.5rem; } .oc-choices__list { display: grid; gap: 0.5rem; } @media (min-width: 640px) { .oc-choices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .oc-choice { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid rgb(var(--line-strong)); border-radius: var(--radius-control); background: rgb(var(--surface)); cursor: pointer; font-size: var(--text-sm); line-height: var(--leading-sm); } .oc-choice:hover { border-color: rgb(var(--ink-subtle)); } .oc-choice:has(input:checked) { border-color: rgb(var(--brand)); background: rgb(var(--brand-soft)); } .oc-choice input { width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; flex: none; accent-color: rgb(var(--brand)); } .oc-choice__label { display: block; color: rgb(var(--ink)); font-weight: 500; } .oc-choice__hint { display: block; color: rgb(var(--ink-muted)); font-size: var(--text-xs); line-height: var(--leading-xs); } .oc-segmented { display: inline-flex; padding: 0.25rem; gap: 0.25rem; border-radius: var(--radius-control); background: rgb(var(--surface-muted)); border: 1px solid rgb(var(--line)); } .oc-segmented__item { position: relative; } .oc-segmented__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .oc-segmented__item span { display: block; padding: 0.375rem 0.875rem; border-radius: calc(var(--radius-control) - 0.25rem); font-size: var(--text-sm); font-weight: 500; color: rgb(var(--ink-muted)); } .oc-segmented__item input:checked + span { background: rgb(var(--surface)); color: rgb(var(--ink)); box-shadow: var(--shadow-subtle); } .oc-segmented__item input:focus-visible + span { outline: 2px solid rgb(var(--ring)); outline-offset: 2px; } /* ---- No native form chrome (v1.3) ------------------------------------ Every landing uses these instead of the browser's controls. */ /* Custom select: the native