/* Hallmark · shape: product-led split · genre: modern-minimal · theme: custom · redesign: full * idea: "the library shows itself: a real plan open on the page" · vibe: "white, exact, quiet, a developer's catalogue" * paper: oklch(99.4% 0.003 255) · accent: oklch(53% 0.22 263) · display: Geist 600 · body: Geist 400 · hero: left text, the product (a live plan) in a well on the right · nav: dense balanced bar · footer: quiet columns on paper-2 · signature: the plan panel, live data, copyable prompt * axes: light/grotesk-sans/chromatic-blue · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */ /* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, inner pages keep the 2.4 system; the home is the redesign target */ /* Hallmark · waive 77 · the close is the hero's share action again in one short band · a library home ends on its one action, per the sign-up anatomy */ /* --------------------------------------------------------------------- * Tokens * ------------------------------------------------------------------ */ :root { /* Brand palette */ --color-primary: #1659F5; --color-primary-dark: #0E46D1; --color-primary-light: #EAF0FE; --color-primary-soft: #F4F7FE; --color-blue: #4285F4; --color-cyan: #42C9D5; --color-heading: #0A0D14; --color-ink-hover: #252A36; --color-text: #3E4452; --color-muted: #5E6573; --color-field-edge: #878D9B; --color-background: #FCFCFD; --color-surface: #F5F6F8; --color-border: #E7E9ED; --color-border-strong: #D6D9E0; --color-success: #18A978; --color-white: #FFFFFF; --color-card: #FFFFFF; --color-on-primary: #FFFFFF; --color-on-ink: #FFFFFF; --color-primary-text: #1450E0; --gradient-sky: linear-gradient(180deg, #D9E5FF 0%, #E9F0FF 38%, #F6F8FE 70%, #FCFCFD 100%); --gradient-halo: radial-gradient(circle at 35% 28%, #7FB0FF 0%, #2B66F7 52%, #0E46D1 100%); --gradient-page: linear-gradient(180deg, #F0F4FD 0%, #F8F9FC 60%, #FCFCFD 100%); --color-cloud: #FFFFFF; --color-halo-ring: rgba(255, 255, 255, 0.6); --color-halo-ring-2: rgba(255, 255, 255, 0.3); --shadow-blue: 0 10px 24px -12px rgba(22, 89, 245, 0.55); --shadow-pill: 0 1px 1px rgba(16, 24, 40, 0.04), 0 8px 24px -10px rgba(16, 24, 40, 0.16); /* Resource identities */ --tone-skill-bg: #EAF6F0; --tone-skill-ink: #0F6E4B; --tone-skill-line: #CDEBDD; --tone-mcp-bg: #EBF1FD; --tone-mcp-ink: #2252B3; --tone-mcp-line: #D2DFFA; --tone-plan-bg: #EFEDFB; --tone-plan-ink: #4636BF; --tone-plan-line: #DDD8F7; --tone-plugin-bg: #FBF3E3; --tone-plugin-ink: #85550C; --tone-plugin-line: #F1E0BE; --tone-component-bg: #FBEEF3; --tone-component-ink: #97194F; --tone-component-line: #F2D3E0; --color-hbar: rgba(11, 13, 18, 0.86); --color-hbar-ink: #FFFFFF; --color-hbar-muted: #B4BAC6; --color-hbar-line: rgba(255, 255, 255, 0.09); --color-hbar-hover: rgba(255, 255, 255, 0.07); --color-hbar-solid: #0D0F14; --color-hbar-edge: #5F6573; --color-foot-bg: #070809; --color-foot-ink: #F4F6FB; --color-foot-muted: #9AA0AD; --color-foot-line: #1C1F26; --color-foot-mark: #14161B; --color-light-btn: #FFFFFF; --color-light-btn-ink: #0A0D14; /* 2.8 premium surfaces */ --grad-blue-btn: linear-gradient(180deg, #2F6CFF 0%, #1659F5 100%); --grad-ink-btn: linear-gradient(180deg, #232836 0%, #0A0D14 100%); --grad-light-btn: linear-gradient(180deg, #FFFFFF 0%, #EEF0F4 100%); --edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.22); --edge-hi-light: inset 0 1px 0 rgba(255, 255, 255, 0.9); --btn-drop: 0 1px 2px rgba(16, 24, 40, 0.14), 0 4px 12px -4px rgba(16, 24, 40, 0.22); --btn-drop-blue: 0 1px 2px rgba(16, 24, 40, 0.12), 0 6px 16px -6px rgba(22, 89, 245, 0.55); --glass: rgba(255, 255, 255, 0.72); --glass-line: rgba(16, 24, 40, 0.08); --grid-line: rgba(47, 128, 255, 0.075); --aurora-1: rgba(64, 150, 255, 0.26); --aurora-2: rgba(120, 214, 255, 0.20); --noise-opacity: 0.035; --card-hi: inset 0 1px 0 rgba(255, 255, 255, 0.7); --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --mask-ink: #000; --halo-drop: 0 24px 48px -16px rgba(22, 89, 245, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.35); --halo-drop-sm: 0 18px 36px -14px rgba(22, 89, 245, 0.5); --light-btn-drop: 0 1px 2px rgba(0, 0, 0, 0.3); --bar-drop: inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 16px 40px -20px rgba(0, 0, 0, 0.55); --brand-tile-drop: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px -4px rgba(22, 89, 245, 0.7); --drop-panel: rgba(13, 15, 20, 0.94); --space-1h: 6px; --space-2h: 12px; --space-3h: 20px; --tone-community-bg: #FDEBF4; --tone-community-ink: #B33A78; --tone-community-line: #F7CFE3; /* Aliases used by the inner pages */ --color-paper: var(--color-background); --color-paper-2: var(--color-surface); --color-paper-3: var(--color-primary-light); --color-ink: var(--color-heading); --color-ink-2: var(--color-text); --color-rule: var(--color-border); --color-rule-2: var(--color-border-strong); --color-signal: var(--color-primary); --color-signal-2: var(--color-primary-dark); --color-signal-ink: var(--color-white); --color-lilac: var(--color-primary-light); --color-lilac-2: #DCE6FD; --color-lilac-ink: var(--color-primary-dark); --color-cheek: #F59E0B; --color-cheek-2: #FFF4DF; --color-cheek-ink: #9A5F0C; --color-skill: var(--tone-skill-bg); --color-skill-ink: var(--tone-skill-ink); --color-skill-line: var(--tone-skill-line); --color-mcp: var(--tone-mcp-bg); --color-mcp-ink: var(--tone-mcp-ink); --color-mcp-line: var(--tone-mcp-line); --color-plugin: var(--tone-plugin-bg); --color-plugin-ink: var(--tone-plugin-ink); --color-plugin-line: var(--tone-plugin-line); --color-component: var(--tone-component-bg); --color-component-ink: var(--tone-component-ink); --color-component-line: var(--tone-component-line); --color-plan: var(--tone-plan-bg); --color-plan-ink: var(--tone-plan-ink); --color-field: #1A1640; --color-field-2: #262056; --color-field-3: #2A2F3B; --color-code: #0D0F14; --color-code-2: #151821; --color-code-ink: #E6E8EE; --color-code-muted: #9AA0AE; --color-ok: #0A6E4D; --color-ok-2: #E6F8F1; --color-ok-line: #C4EEDD; --color-warn: #9A5F0C; --color-warn-2: #FFF4DF; --color-error: #C93A3A; --color-error-2: #FDECEC; --color-error-line: #F6CACA; --color-focus: #1659F5; --color-focus-light: #D6E4FF; --color-shadow: rgba(16, 24, 40, 0.05); --color-shadow-2: rgba(16, 24, 40, 0.12); --color-scrim: rgba(17, 20, 42, 0.5); --color-bar: rgba(255, 255, 255, 0.86); --color-shadow-deep: rgba(17, 20, 42, 0.6); --color-ring: rgba(238, 233, 255, 0.6); --color-white-08: rgba(255, 255, 255, 0.08); --color-white-12: rgba(255, 255, 255, 0.12); --color-white-14: rgba(255, 255, 255, 0.14); --color-white-18: rgba(255, 255, 255, 0.18); --color-white-24: rgba(255, 255, 255, 0.24); --color-white-86: rgba(255, 255, 255, 0.86); --color-mask: #0B1020; --mascot-cloud-a: #FFFFFF; --mascot-cloud-b: #F7F4FF; --mascot-cloud-c: #E8DEFF; --mascot-edge: #CFC0FF; --mascot-eye-a: #34217F; --mascot-eye-b: #17104F; --mascot-brow: #3D2B91; --mascot-shine: #FFFFFF; --mascot-cheek: #F6A5C5; --mascot-blue-b: #F3F7FF; --mascot-blue-c: #DCE8FF; --mascot-blue-edge: #B9CFFF; --mascot-blue-eye: #1D3FA8; --mascot-blue-eye-2: #0B1A5C; /* Type */ --font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-display: 64px; --text-hero: clamp(44px, 4.6vw + 8px, 72px); --text-page: clamp(36px, 2.6vw + 16px, 56px); --text-section: clamp(30px, 2.2vw + 14px, 46px); --text-title: 19px; --text-lead: 18px; /* 8px spacing */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 40px; --space-7: 48px; --space-8: 64px; --space-9: 80px; --space-10: 96px; --space-3xs: var(--space-1); --space-2xs: var(--space-1); --space-xs: var(--space-2); --space-sm: var(--space-3); --space-md: var(--space-3); --space-lg: var(--space-4); --space-xl: var(--space-6); --space-2xl: var(--space-8); --space-3xl: var(--space-10); --container: 1280px; --narrow: 768px; --gutter: var(--space-5); --section: clamp(72px, 7vw + 24px, 120px); --header-h: 72px; --control-h: 48px; --radius-sm: 8px; --radius: 12px; --radius-card: 16px; --radius-xl: 20px; --radius-pill: 999px; --shadow-card: 0 1px 1px var(--color-shadow), 0 2px 6px -2px var(--color-shadow); --shadow-lift: 0 1px 2px var(--color-shadow), 0 14px 32px -14px var(--color-shadow-2); --shadow-pop: 0 24px 48px -24px var(--color-shadow-2); --shadow-float: 0 1px 2px var(--color-shadow), 0 16px 40px -16px var(--color-shadow-2); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 150ms; --dur-short: 240ms; --dur-reveal: 600ms; --z-raised: 10; --z-dropdown: 100; --z-bar: 300; --z-modal: 400; } @media (max-width: 1023px) { :root { --text-display: 48px; --text-page: 40px; --text-section: 32px; --section: var(--space-8); } } @media (max-width: 640px) { :root { --text-display: 40px; --text-page: 32px; --text-section: 28px; --text-title: 20px; --text-lead: 18px; --text-md: 15px; --section: var(--space-7); --gutter: var(--space-3); } } /* Dark mode: chosen in the header (saved), otherwise the system setting. */ :root[data-theme="dark"] { color-scheme: dark; --color-background: #0B0C0F; --color-card: #121419; --color-surface: #0F1014; --color-border: #22252D; --color-border-strong: #2F333D; --color-field-edge: #6E7482; --color-heading: #F3F4F6; --color-text: #B9BDC7; --color-muted: #9096A3; --color-ink-hover: #DADDE3; --color-on-ink: #0B0C0F; --color-primary: #3A6CF4; --color-primary-dark: #2C5BE0; --color-lilac-ink: #AFC6FF; --color-primary-light: #16203A; --color-primary-soft: #111829; --color-primary-text: #91B1FF; --color-lilac-2: #1D2A4A; --color-blue: #6AA6FF; --color-cyan: #5ED6E0; --tone-skill-bg: #0F241D; --tone-skill-ink: #72D8AE; --tone-skill-line: #1B3D31; --tone-mcp-bg: #111D33; --tone-mcp-ink: #93B8FF; --tone-mcp-line: #1E3253; --tone-plan-bg: #1A1931; --tone-plan-ink: #B8B2FF; --tone-plan-line: #2B2950; --tone-plugin-bg: #2A2111; --tone-plugin-ink: #EFC375; --tone-plugin-line: #443619; --tone-component-bg: #2E1420; --tone-component-ink: #F5A9C8; --tone-component-line: #4A2134; --tone-community-bg: #33142A; --tone-community-ink: #F7A6CE; --tone-community-line: #522244; --color-cheek: #F5B83D; --color-cheek-2: #2E2410; --color-cheek-ink: #F2C46B; --color-ok: #4ADBA2; --color-ok-2: #0E2A20; --color-ok-line: #1C4A38; --color-warn: #F2C46B; --color-warn-2: #2E2410; --color-error: #FF8A8A; --color-error-2: #331616; --color-error-line: #5A2424; --color-focus: #6AA6FF; --color-focus-light: #1E2F55; --color-shadow: rgba(0, 0, 0, 0.4); --color-shadow-2: rgba(0, 0, 0, 0.6); --color-scrim: rgba(0, 0, 0, 0.65); --color-code: #08090C; --color-code-2: #101217; --color-field-3: #2A2E38; --gradient-sky: linear-gradient(180deg, #0F1A36 0%, #0D1222 42%, #0B0C10 78%, #0B0C0F 100%); --gradient-page: linear-gradient(180deg, #111726 0%, #0C0E13 70%, #0B0C0F 100%); --color-cloud: rgba(140, 175, 255, 0.10); --color-halo-ring: rgba(76, 141, 255, 0.16); --color-halo-ring-2: rgba(76, 141, 255, 0.08); --shadow-pill: 0 1px 1px rgba(0, 0, 0, 0.4), 0 10px 28px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06); --grad-ink-btn: linear-gradient(180deg, #FFFFFF 0%, #E4E6EB 100%); --glass: rgba(18, 20, 25, 0.66); --glass-line: rgba(255, 255, 255, 0.08); --grid-line: rgba(140, 190, 255, 0.07); --aurora-1: rgba(47, 128, 255, 0.26); --aurora-2: rgba(80, 180, 255, 0.12); --noise-opacity: 0.05; --card-hi: inset 0 1px 0 rgba(255, 255, 255, 0.04); --edge-hi-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);} @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-background: #0B0C0F; --color-card: #121419; --color-surface: #0F1014; --color-border: #22252D; --color-border-strong: #2F333D; --color-field-edge: #6E7482; --color-heading: #F3F4F6; --color-text: #B9BDC7; --color-muted: #9096A3; --color-ink-hover: #DADDE3; --color-on-ink: #0B0C0F; --color-primary: #3A6CF4; --color-primary-dark: #2C5BE0; --color-lilac-ink: #AFC6FF; --color-primary-light: #16203A; --color-primary-soft: #111829; --color-primary-text: #91B1FF; --color-lilac-2: #1D2A4A; --color-blue: #6AA6FF; --color-cyan: #5ED6E0; --tone-skill-bg: #0F241D; --tone-skill-ink: #72D8AE; --tone-skill-line: #1B3D31; --tone-mcp-bg: #111D33; --tone-mcp-ink: #93B8FF; --tone-mcp-line: #1E3253; --tone-plan-bg: #1A1931; --tone-plan-ink: #B8B2FF; --tone-plan-line: #2B2950; --tone-plugin-bg: #2A2111; --tone-plugin-ink: #EFC375; --tone-plugin-line: #443619; --tone-component-bg: #2E1420; --tone-component-ink: #F5A9C8; --tone-component-line: #4A2134; --tone-community-bg: #33142A; --tone-community-ink: #F7A6CE; --tone-community-line: #522244; --color-cheek: #F5B83D; --color-cheek-2: #2E2410; --color-cheek-ink: #F2C46B; --color-ok: #4ADBA2; --color-ok-2: #0E2A20; --color-ok-line: #1C4A38; --color-warn: #F2C46B; --color-warn-2: #2E2410; --color-error: #FF8A8A; --color-error-2: #331616; --color-error-line: #5A2424; --color-focus: #6AA6FF; --color-focus-light: #1E2F55; --color-shadow: rgba(0, 0, 0, 0.4); --color-shadow-2: rgba(0, 0, 0, 0.6); --color-scrim: rgba(0, 0, 0, 0.65); --color-code: #08090C; --color-code-2: #101217; --color-field-3: #2A2E38; --gradient-sky: linear-gradient(180deg, #0F1A36 0%, #0D1222 42%, #0B0C10 78%, #0B0C0F 100%); --gradient-page: linear-gradient(180deg, #111726 0%, #0C0E13 70%, #0B0C0F 100%); --color-cloud: rgba(140, 175, 255, 0.10); --color-halo-ring: rgba(76, 141, 255, 0.16); --color-halo-ring-2: rgba(76, 141, 255, 0.08); --shadow-pill: 0 1px 1px rgba(0, 0, 0, 0.4), 0 10px 28px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06); --grad-ink-btn: linear-gradient(180deg, #FFFFFF 0%, #E4E6EB 100%); --glass: rgba(18, 20, 25, 0.66); --glass-line: rgba(255, 255, 255, 0.08); --grid-line: rgba(140, 190, 255, 0.07); --aurora-1: rgba(47, 128, 255, 0.26); --aurora-2: rgba(80, 180, 255, 0.12); --noise-opacity: 0.05; --card-hi: inset 0 1px 0 rgba(255, 255, 255, 0.04); --edge-hi-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);} } /* --------------------------------------------------------------------- * Base * ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } html { scroll-padding-top: calc(var(--header-h) + var(--space-3)); scroll-behavior: smooth; } html.op-locked { overflow: hidden; } body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } ::selection { background: var(--color-lilac-2); color: var(--color-heading); } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--color-primary-text); } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--color-heading); line-height: 1.12; letter-spacing: -0.025em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; } h3 { font-weight: 650; letter-spacing: -0.015em; } p { margin: 0; text-wrap: pretty; } img, video { max-width: 100%; height: auto; display: block; } svg { display: block; } [hidden] { display: none !important; } button, input, select, textarea { font: inherit; color: inherit; } code, kbd, pre { font-family: var(--font-mono); } code { font-size: 0.88em; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 0 var(--space-1); overflow-wrap: anywhere; } ul, ol { margin: 0; padding: 0; } .op-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .op-skip { position: absolute; left: var(--space-3); top: -100px; z-index: var(--z-modal); background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; } .op-skip:focus-visible { top: var(--space-3); } .op-main:focus { outline: none; } .op-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .op-narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); } .op-muted { color: var(--color-muted); } .op-note { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); } .op-h2 { font-size: var(--text-section); line-height: 1.12; max-width: 22ch; } .op-h3 { font-size: var(--text-title); line-height: 1.25; } .op-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); } .op-head-row > .op-h2, .op-head-row > .op-h3 { margin: 0; } .op-meta { display: inline-flex; flex-wrap: wrap; gap: 0 var(--space-3); } .op-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-primary-text); font-weight: 600; text-decoration: none; } .op-link .op-icon { transition: transform var(--dur-micro) var(--ease-out); } .op-link:hover { color: var(--color-primary-text); } .op-link:hover .op-icon { transform: translateX(2px); } .op-link--light { color: var(--color-on-primary); } /* --------------------------------------------------------------------- * Buttons * ------------------------------------------------------------------ */ .op-btn { --btn-bg: var(--color-card); --btn-ink: var(--color-heading); --btn-line: var(--color-border-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-4); background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-line); border-radius: var(--radius); box-shadow: 0 1px 2px var(--color-shadow); font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .op-btn:hover { color: var(--btn-ink); border-color: var(--color-primary); } .op-btn:active { transform: translateY(1px); box-shadow: none; } .op-btn:disabled, .op-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; } .op-btn .op-icon { flex: none; } .op-btn--sm { min-height: 40px; padding: 0 var(--space-3); } .op-btn--lg { min-height: 52px; padding: 0 var(--space-4); font-size: var(--text-md); } .op-btn--block { width: 100%; } .op-btn--signal { --btn-bg: var(--color-primary); --btn-ink: var(--color-on-primary); --btn-line: var(--color-primary); box-shadow: 0 8px 16px -8px var(--color-shadow-2); } .op-btn--signal:hover { --btn-bg: var(--color-primary-dark); border-color: var(--color-primary-dark); } .op-btn--dark { --btn-bg: var(--color-heading); --btn-ink: var(--color-on-ink); --btn-line: var(--color-heading); } .op-btn--dark:hover { --btn-bg: var(--color-primary-dark); border-color: var(--color-primary-dark); } .op-btn--ghost { --btn-bg: var(--color-card); } .op-btn--ghost:hover { --btn-bg: var(--color-surface); } .op-btn--quiet { --btn-bg: transparent; --btn-line: transparent; --btn-ink: var(--color-muted); box-shadow: none; } .op-btn--quiet:hover { --btn-ink: var(--color-heading); --btn-bg: var(--color-surface); border-color: transparent; } .op-btn--lilac { --btn-bg: var(--color-primary-light); --btn-ink: var(--color-primary-dark); --btn-line: var(--color-primary-light); } .op-btn--line { --btn-bg: transparent; } .op-btn--star[aria-pressed="true"] { --btn-bg: var(--color-cheek-2); --btn-line: var(--color-cheek); --btn-ink: var(--color-cheek-ink); } .op-btn--star[aria-pressed="true"] .op-icon { fill: currentColor; } .op-btn__count { padding-left: var(--space-2); margin-left: var(--space-1); border-left: 1px solid var(--btn-line); font-variant-numeric: tabular-nums; } .op-btn[aria-pressed="true"]:not(.op-btn--star) { --btn-bg: var(--color-primary-light); } .op-iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); } .op-iconbtn:hover { background: var(--color-surface); } .op-copy, .op-chipbtn { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-2); border: 1px solid currentColor; border-radius: var(--radius-sm); background: transparent; color: inherit; font-size: var(--text-xs); font-weight: 600; font-family: var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .op-chipbtn { color: var(--color-primary-text); border-color: var(--color-border-strong); background: var(--color-card); } .op-chipbtn:hover { background: var(--color-surface); color: var(--color-primary-text); } .op-copy.is-done { background: var(--color-ok); color: var(--color-on-primary); border-color: var(--color-ok); } /* --------------------------------------------------------------------- * Header * ------------------------------------------------------------------ */ .op-bar { position: sticky; top: 0; z-index: var(--z-bar); background: var(--color-card); border-bottom: 1px solid var(--color-border); color: var(--color-heading); } .op-bar__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); } .op-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-heading); text-decoration: none; flex: none; } .op-brand:hover { color: var(--color-heading); } .op-brand__mark { width: 40px; height: auto; } .op-brand__img { max-height: 40px; width: auto; } .op-brand__word { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: -0.03em; } .op-brand__plans { color: var(--color-primary-text); } .op-nav { display: flex; align-items: center; gap: var(--space-5); flex: 1; min-width: 0; } .op-nav__list { display: flex; align-items: center; gap: var(--space-4); list-style: none; } .op-nav__list a { position: relative; display: inline-flex; align-items: center; min-height: 40px; color: var(--color-text); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: color var(--dur-micro) var(--ease-out); } .op-nav__list a:hover { color: var(--color-heading); } .op-nav__list a[aria-current="page"], .op-nav__list .current-menu-item > a { color: var(--color-heading); font-weight: 600; } .op-nav__list a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--space-1); height: 2px; border-radius: 2px; background: var(--color-heading); } .op-nav__end { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } .op-nav__quiet { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; color: var(--color-text); font-size: var(--text-sm); font-weight: 500; text-decoration: none; } .op-nav__quiet:hover { color: var(--color-heading); } .op-find { position: relative; } .op-find__field { display: flex; align-items: center; gap: var(--space-2); width: 232px; min-height: 40px; padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-muted); cursor: text; transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); } .op-find__field:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; background: var(--color-card); } .op-find__field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-heading); font-size: var(--text-sm); outline: none; } .op-find__field input::placeholder { color: var(--color-muted); } .op-find__field kbd { font-size: var(--text-xs); padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-card); } .op-find__results { position: absolute; right: 0; top: calc(100% + var(--space-2)); width: min(400px, 88vw); padding: var(--space-2); background: var(--color-card); color: var(--color-heading); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-pop); z-index: var(--z-dropdown); } .op-find__results a { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; font-size: var(--text-sm); } .op-find__results a small { color: var(--color-muted); flex: none; } .op-find__results a:hover, .op-find__results a[aria-selected="true"] { background: var(--color-surface); color: var(--color-heading); } .op-find__results p { padding: var(--space-2) var(--space-3); color: var(--color-muted); font-size: var(--text-sm); } .op-find__results .op-find__all { color: var(--color-primary-text); font-weight: 600; border-top: 1px solid var(--color-border); border-radius: 0; margin-top: var(--space-1); } .op-bar__toggle { display: none; margin-left: auto; width: var(--control-h); height: var(--control-h); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); color: var(--color-heading); cursor: pointer; place-items: center; } .op-bar__close { display: none; } @media (max-width: 1179px) { .op-nav__list { gap: var(--space-3); } .op-find__field { width: 180px; } } @media (max-width: 1023px) { .op-bar__toggle { display: inline-grid; } .js .op-nav { position: fixed; inset: var(--header-h) 0 0; z-index: var(--z-bar); flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4) var(--gutter) var(--space-8); background: var(--color-card); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); } .js .op-bar.is-open .op-nav { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s; } .op-bar.is-open .op-bar__open { display: none; } .op-bar.is-open .op-bar__close { display: block; } .op-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .op-nav__list a { min-height: 56px; font-size: var(--text-lg); border-bottom: 1px solid var(--color-border); } .op-nav__list a[aria-current="page"]::after { display: none; } .op-nav__end { flex-direction: column; align-items: stretch; margin-left: 0; } .op-find__field { width: 100%; min-height: var(--control-h); } .op-nav__quiet { min-height: var(--control-h); justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius); } .op-nav__end .op-btn { min-height: var(--control-h); } html:not(.js) .op-nav, html:not(.js) .op-bar__toggle { display: none; } } /* Page hero (Use with Claude) */ .op-hero { position: relative; padding: var(--space-7) 0 var(--space-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border); overflow: clip; } .op-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); align-items: center; } .op-hero__title { font-size: var(--text-page); max-width: 18ch; letter-spacing: -0.03em; } .op-hero__lead { margin-top: var(--space-3); font-size: var(--text-lg); max-width: 52ch; } .op-hero__mascot--small { width: 184px; } .op-hero .op-crumbs { margin-bottom: var(--space-4); } @media (max-width: 760px) { .op-hero__grid { grid-template-columns: minmax(0, 1fr); } .op-hero__mascot--small { display: none; } } /* --------------------------------------------------------------------- * Code blocks and terminal * ------------------------------------------------------------------ */ .op-code { background: var(--color-code); color: var(--color-code-ink); border-radius: var(--radius); overflow: hidden; } .op-code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 40px; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3); background: var(--color-code-2); color: var(--color-code-muted); font-size: var(--text-xs); font-weight: 500; } .op-code__bar .op-copy { color: var(--color-code-ink); border-color: var(--color-field-3); } .op-code__bar .op-copy:hover { background: var(--color-field-3); } .op-code pre { margin: 0; padding: var(--space-3); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28em; overflow: auto; } .op-code :focus-visible { outline-color: var(--color-lilac-2); } .op-code--file pre { max-height: none; } /* --------------------------------------------------------------------- * Home (Hallmark modern-minimal) * ------------------------------------------------------------------ */ .op-band { padding: var(--section) 0; } .op-band--tight { padding-top: 0; } .op-band--well, .op-band--soft, .op-band--tint { background: var(--color-surface); } .op-band--field { background: var(--color-surface); } .op-btn--ink { --btn-bg: var(--color-heading); --btn-ink: var(--color-on-ink); --btn-line: var(--color-heading); box-shadow: none; } .op-btn--ink:hover { --btn-bg: var(--color-ink-hover); border-color: var(--color-ink-hover); } .op-btn--outline { --btn-bg: var(--color-card); --btn-ink: var(--color-heading); --btn-line: var(--color-border-strong); box-shadow: none; } .op-btn--outline:hover { --btn-bg: var(--color-surface); border-color: var(--color-heading); } .op-btn--pill { border-radius: var(--radius-pill); } .op-btn--pill.op-btn--lg { min-height: 52px; padding-inline: var(--space-5); font-size: var(--text-md); } .op-hx { padding: var(--space-8) 0 var(--space-9); border-bottom: 1px solid var(--color-border); } .op-hx__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--space-8); align-items: center; } .op-hx__title { font-size: var(--text-hero); line-height: 1.02; letter-spacing: -0.042em; font-weight: 600; max-width: 11ch; } .op-hx__lead { margin-top: var(--space-4); font-size: var(--text-lead); line-height: 1.5; color: var(--color-text); max-width: 34ch; } .op-hx__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); } .op-hx__terms { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); } .op-hx__slot { padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface); } .op-hx__panel { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; animation: op-settle 600ms var(--ease-out) both; } .op-hx__head { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); } .op-hx__kind { font-size: var(--text-xs); font-weight: 500; color: var(--color-primary-text); } .op-hx__plan { margin-top: var(--space-1); font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; } .op-hx__plan a { text-decoration: none; } .op-hx__plan a:hover { color: var(--color-primary-text); } .op-hx__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); list-style: none; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; } .op-hx__meta a { color: var(--color-text); text-decoration: none; } .op-hx__steps { list-style: none; } .op-hx__steps > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); } .op-hx__steps > li + li { border-top: 1px solid var(--color-border); } .op-hx__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); font-size: var(--text-xs); font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; } .op-hx__steps > li.is-open .op-hx__n { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .op-hx__steptitle { font-size: var(--text-sm); font-weight: 600; color: var(--color-heading); line-height: 24px; } .op-hx__steps > li:not(.is-open) .op-hx__steptitle { font-weight: 400; color: var(--color-text); } .op-hx__prompt { margin-top: var(--space-2); border-radius: var(--radius); background: var(--color-code); color: var(--color-code-ink); overflow: hidden; } .op-hx__promptbar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 var(--space-2) 0 var(--space-3); color: var(--color-code-muted); font-size: var(--text-xs); border-bottom: 1px solid var(--color-code-2); } .op-hx__promptbar .op-copy { color: var(--color-code-ink); border-color: var(--color-field-3); } .op-hx__prompt pre { margin: 0; padding: var(--space-3); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.9em; overflow: auto; } .op-hx__done { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-ok); } .op-hx__done .op-icon { flex: none; margin-top: var(--space-1); } .op-hx__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); } @keyframes op-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .op-lib__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); } .op-lib__top .op-h2 { margin: 0; } .op-seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); } .op-seg button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .op-seg button:hover { color: var(--color-heading); } .op-seg button[aria-selected="true"] { background: var(--color-card); color: var(--color-heading); box-shadow: 0 1px 2px var(--color-shadow), 0 0 0 1px var(--color-border); } .op-seg__n { color: var(--color-muted); font-variant-numeric: tabular-nums; } .op-lib__h { margin: var(--space-5) 0 var(--space-3); font-size: var(--text-lg); } .js .op-lib__h { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .js .op-lib__panel[data-op-later] { display: none; } .op-rowlist { list-style: none; border-top: 1px solid var(--color-border); } .op-rowlist li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 160px 64px; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); } .op-rowlist__title { font-weight: 600; color: var(--color-heading); text-decoration: none; } .op-rowlist__title:hover { color: var(--color-primary-text); } .op-rowlist__sum { font-size: var(--text-sm); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .op-rowlist__by { font-size: var(--text-sm); } .op-rowlist__by a { color: var(--color-muted); text-decoration: none; } .op-rowlist__by a:hover { color: var(--color-heading); } .op-rowlist__stars { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; } .op-lib__all { margin-top: var(--space-4); } .op-mcpx { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; } .op-mcpx__lead { margin-top: var(--space-3); font-size: var(--text-lead); color: var(--color-text); max-width: 40ch; } .op-mcpx__asks { display: grid; gap: var(--space-2); margin: var(--space-5) 0; list-style: none; } .op-mcpx__asks li { padding: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--space-1); color: var(--color-heading); max-width: 44ch; } .op-mcpx__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-4) 0 0; } .op-mcpx__tools div { padding-top: var(--space-2); border-top: 1px solid var(--color-border-strong); } .op-mcpx__tools dt code { background: none; border: 0; padding: 0; font-size: var(--text-sm); color: var(--color-heading); } .op-mcpx__tools dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-muted); } .op-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); } .op-table th, .op-table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: baseline; } .op-table thead th { padding-top: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; } .op-table tbody th { font-weight: 600; } .op-table tbody th a { color: var(--color-heading); text-decoration: none; } @media (max-width: 640px) { .op-table tbody th { max-width: 0; width: 100%; } .op-table tbody th a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .op-table tbody th a:hover { color: var(--color-primary-text); } .op-table td a { color: var(--color-text); text-decoration: none; } .op-table__n { width: 48px; color: var(--color-muted); font-variant-numeric: tabular-nums; } .op-table__num { text-align: right !important; font-variant-numeric: tabular-nums; } .op-table tbody tr { transition: background-color var(--dur-micro) var(--ease-out); } .op-table tbody tr:hover { background: var(--color-surface); } .op-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); list-style: none; } .op-shots a { display: grid; gap: var(--space-1); text-decoration: none; } .op-shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-card); border: 1px solid var(--color-border); margin-bottom: var(--space-2); } .op-shots__plan { font-weight: 600; color: var(--color-heading); } .op-shots a:hover .op-shots__plan { color: var(--color-primary-text); } .op-shots__by { font-size: var(--text-sm); color: var(--color-muted); } .op-close { border-top: 1px solid var(--color-border); } .op-close__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); } .op-close__lead { margin-top: var(--space-2); font-size: var(--text-lead); color: var(--color-text); } @media (max-width: 1023px) { .op-hx { padding: var(--space-6) 0 var(--space-8); } .op-hx__grid, .op-mcpx { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .op-hx__title { max-width: 14ch; } .op-rowlist li { grid-template-columns: minmax(0, 1fr) 140px 56px; } .op-rowlist__sum { display: none; } .op-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-shots li:nth-child(3) { display: none; } } @media (max-width: 640px) { .op-hx__slot { padding: var(--space-2); } .op-hx__actions .op-btn { flex: 1 1 100%; } .op-seg { width: 100%; border-radius: var(--radius); } .op-seg button { flex: 1 1 40%; justify-content: center; border-radius: var(--radius-sm); } .op-rowlist li { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); } .op-rowlist__by { grid-column: 1; grid-row: 2; } .op-rowlist__stars { grid-column: 2; grid-row: 1; } .op-table__hide { display: none; } .op-shots { grid-template-columns: minmax(0, 1fr); } .op-shots li:nth-child(3) { display: grid; } .op-mcpx__tools { grid-template-columns: minmax(0, 1fr); } } /* Kept from 2.3: older home pieces still used by other templates */ .op-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--space-8); align-items: start; } .op-split__head { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: calc(var(--header-h) + var(--space-5)); } .op-people { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); } .op-people a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border-radius: var(--radius-card); background: var(--color-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); text-align: center; text-decoration: none; transition: transform var(--dur-short) var(--ease-out); } .op-people a:hover { transform: translateY(-4px); color: var(--color-heading); } .op-people__name { font-weight: 600; color: var(--color-heading); overflow-wrap: anywhere; } .op-people--cards { grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); } @media (max-width: 1023px) { .op-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .op-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .op-split__head { position: static; } } /* --------------------------------------------------------------------- * Cards, kinds, tags, bubbles * ------------------------------------------------------------------ */ .op-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); list-style: none; } .op-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); } .op-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--color-rule-2); } .op-card:focus-within { border-color: var(--color-focus); } .op-card__title { margin-top: var(--space-2); font-size: var(--text-title); font-weight: 650; line-height: 1.25; } .op-card__title a { text-decoration: none; } .op-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .op-card__title a:focus-visible { outline: none; } .op-card__sum { color: var(--color-ink-2); font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .op-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: auto; padding-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); } .op-card__who { position: relative; z-index: var(--z-raised); display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); font-weight: 500; text-decoration: none; } .op-card__who:hover { color: var(--color-primary-text); text-decoration: underline; } .op-card__stat { display: inline-flex; align-items: center; gap: var(--space-2xs); font-variant-numeric: tabular-nums; } .op-card__stat .op-icon { color: var(--color-cheek); } .op-card__foot .op-tag { position: relative; z-index: var(--z-raised); } .op-kind { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--kind-bg, var(--color-plan)); color: var(--kind-ink, var(--color-plan-ink)); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; } .op-kind a { color: inherit; text-decoration: none; } .op-kind--skill { --kind-bg: var(--color-skill); --kind-ink: var(--color-skill-ink); } .op-kind--mcp { --kind-bg: var(--color-mcp); --kind-ink: var(--color-mcp-ink); } .op-kind--plugin { --kind-bg: var(--color-plugin); --kind-ink: var(--color-plugin-ink); } .op-kind--component { --kind-bg: var(--color-component); --kind-ink: var(--color-component-ink); } .op-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; } .op-tag { display: inline-flex; align-items: center; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); border: 1px solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 500; text-decoration: none; } a.op-tag:hover { background: var(--color-paper-3); color: var(--color-primary-text); } .op-tag--pending { background: var(--color-warn-2); color: var(--color-warn); border-color: transparent; } .op-tag--draft { background: var(--color-paper-3); } .op-bubble { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-lilac); color: var(--color-lilac-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1; } .op-bubble--sm { width: 24px; height: 24px; font-size: 0.75rem; } .op-bubble--xl { width: 96px; height: 96px; font-size: 2.6rem; box-shadow: var(--shadow-card); } @media (max-width: 1079px) { .op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .op-grid { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------- * Breadcrumbs and notices * ------------------------------------------------------------------ */ .op-crumbs { margin-bottom: var(--space-lg); font-size: var(--text-sm); } .op-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-xs); list-style: none; } .op-crumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); min-width: 0; } .op-crumbs li + li::before { content: "/"; color: var(--color-rule-2); } .op-crumbs a { color: var(--color-muted); text-decoration: none; } .op-crumbs a:hover { color: var(--color-primary-text); text-decoration: underline; } .op-crumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; overflow-wrap: anywhere; } .ownly-notice { display: block; margin: 0 0 var(--space-lg); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); font-weight: 500; } .ownly-notice--success { border-color: var(--color-ok-line); background: var(--color-ok-2); color: var(--color-ok); } .ownly-notice--error { border-color: var(--color-error-line); background: var(--color-error-2); color: var(--color-error); } .ownly-notice--info { border-color: var(--color-lilac); background: var(--color-paper-2); color: var(--color-ink-2); } .ownly-notice a { color: inherit; } /* --------------------------------------------------------------------- * Item, file and profile pages * ------------------------------------------------------------------ */ .op-item__head { padding: var(--space-xl) 0 var(--space-2xl); background: var(--color-paper-2); border-bottom: 1px solid var(--color-border); } .op-item__head .op-kind { margin-bottom: var(--space-sm); } .op-item__title { font-size: var(--text-page); max-width: 22ch; letter-spacing: -0.015em; } .op-item__lead { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 60ch; } .op-item__by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); } .op-person { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; } .op-person:hover strong { text-decoration: underline; } .op-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); } .op-actions form { margin: 0; } .op-actions--center { justify-content: center; } .op-item__remix { margin-top: var(--space-md); font-size: var(--text-sm); } .op-report { position: relative; } .op-report summary { list-style: none; } .op-report summary::-webkit-details-marker { display: none; } .op-report__menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: var(--z-dropdown); display: grid; gap: var(--space-xs); width: min(320px, 86vw); padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: var(--text-sm); } .op-report__menu label { display: flex; gap: var(--space-xs); align-items: flex-start; } .op-item__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--section); align-items: start; } .op-item__main { display: grid; gap: var(--space-2xl); min-width: 0; } .op-item__main > section > .op-h3, .op-item__main > section > .op-head-row { margin-bottom: var(--space-md); } .op-item__aside { position: sticky; top: 96px; } .op-install p { margin-top: var(--space-sm); font-size: var(--text-sm); } .op-panel { padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .op-panel__h { margin: var(--space-lg) 0 var(--space-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); } .op-panel__small { margin-top: var(--space-sm); font-size: var(--text-sm); } .op-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: 0; } .op-facts div { min-width: 0; } .op-facts dt { font-size: var(--text-xs); color: var(--color-muted); } .op-facts dd { margin: var(--space-3xs) 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.2; font-variant-numeric: tabular-nums; } .op-tools { display: grid; gap: var(--space-xs); margin-bottom: var(--space-sm); } .op-tool { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); font-weight: 600; text-align: left; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); } .op-tool:hover { border-color: var(--color-lilac); background: var(--color-paper-2); } .op-md { line-height: 1.7; } .op-md > * + * { margin-top: var(--space-md); } .op-md h2, .op-md h3, .op-md h4, .op-md h5 { font-size: var(--text-lg); margin-top: var(--space-xl); } .op-md h2 { font-size: var(--text-xl); } .op-md ul, .op-md ol { padding-left: 1.4em; } .op-md li + li { margin-top: var(--space-xs); } .op-md blockquote { margin: 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink-2); } .op-md hr { border: 0; border-top: 1px dashed var(--color-border-strong); } .op-md__code { margin: var(--space-md) 0 0; padding: var(--space-md); background: var(--color-code); color: var(--color-code-ink); border-radius: var(--radius); font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; } .op-md__code code { background: none; padding: 0; color: inherit; } .op-md--clip { position: relative; max-height: 420px; overflow: hidden; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); } .op-md--clip::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--color-surface)); pointer-events: none; } .op-prose { line-height: 1.75; max-width: 68ch; } .op-prose--wide { max-width: none; } .op-prose > * + * { margin-top: var(--space-md); } .op-prose h2, .op-prose h3 { margin-top: var(--space-xl); } .op-prose ul, .op-prose ol { padding-left: 1.4em; } .op-prose a { color: var(--color-primary-text); } .op-prose__cover { border-radius: var(--radius-card); margin-bottom: var(--space-lg); } .op-progress { display: inline-flex; align-items: center; gap: var(--space-sm); } .op-progress__track { display: block; width: 140px; height: 12px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; } .op-progress__track > span { display: block; height: 100%; width: 100%; background: var(--color-signal); border-radius: inherit; transform-origin: left; transform: scaleX(var(--op-pct, 0%)); transition: transform var(--dur-short) var(--ease-out); } .op-steplist { list-style: none; display: grid; gap: var(--space-md); counter-reset: none; } .op-step { position: relative; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); } .op-step.is-done { background: var(--color-paper-2); border-color: var(--color-rule-2); } .op-step__head { display: flex; align-items: center; gap: var(--space-md); } .op-step__head form { margin: 0; } .op-step__n { flex: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-primary-text); font-family: var(--font-display); font-weight: 600; border: 2px solid transparent; } .op-step__n--btn { cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); } .op-step__n--btn .op-icon { display: none; } .op-step__n--btn:hover { border-color: var(--color-lilac); } .op-step.is-done .op-step__n--btn { background: var(--color-ok); color: var(--color-signal-ink); } .op-step.is-done .op-step__n--btn .op-step__num { display: none; } .op-step.is-done .op-step__n--btn .op-icon { display: block; } .op-step__title { font-size: var(--text-lg); line-height: 1.25; } .op-step__body { display: grid; gap: var(--space-md); margin-top: var(--space-md); padding-left: calc(var(--space-xl) + var(--space-md)); } .op-step__text p + p { margin-top: var(--space-sm); } .op-step__done { display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-sm) var(--space-md); background: var(--color-ok-2); color: var(--color-ok); border-radius: var(--radius); font-size: var(--text-sm); } .op-step__done .op-icon { flex: none; margin-top: var(--space-2xs); } .op-step__uses { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); } .op-finish { display: flex; gap: var(--space-xs); align-items: center; margin-top: var(--space-md); padding: var(--space-md); border-radius: var(--radius); background: var(--color-ok-2); color: var(--color-ok); font-weight: 600; } .op-files { list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); } .op-file { padding: var(--space-md) var(--space-lg); } .op-file + .op-file { border-top: 1px solid var(--color-border); } .op-file > .op-code, .op-file > .op-warn { margin-top: var(--space-md); } .op-file__row { display: flex; align-items: flex-start; gap: var(--space-md); } .op-file__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-primary-text); } .op-file--mcp .op-file__icon { background: var(--color-mcp); color: var(--color-mcp-ink); } .op-file--git .op-file__icon { background: var(--color-plugin); color: var(--color-plugin-ink); } .op-file__who { display: flex; flex-direction: column; gap: var(--space-3xs); flex: 1; min-width: 0; } .op-file__name { font-weight: 600; overflow-wrap: anywhere; } .op-file__note { font-size: var(--text-sm); color: var(--color-muted); } .op-file__tools { flex: none; display: flex; gap: var(--space-xs); } .op-warn { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--color-warn-2); color: var(--color-warn); font-size: var(--text-sm); } .op-warn .op-icon { flex: none; margin-top: var(--space-3xs); } .op-warn code { background: var(--color-surface); } .op-log { list-style: none; display: grid; gap: var(--space-xs); } .op-log li { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); } .op-filepage__titlerow { display: flex; align-items: center; gap: var(--space-sm); max-width: none; overflow-wrap: anywhere; } .op-filepage__titlerow > .op-icon { flex: none; } .op-filepage__from { margin-top: var(--space-sm); color: var(--color-muted); } .op-filepage .op-item__main { gap: var(--space-lg); } .op-source { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .op-source summary { padding: var(--space-sm) var(--space-md); cursor: pointer; font-weight: 600; color: var(--color-ink-2); } .op-source__pre { margin: 0; padding: var(--space-md); border-top: 1px solid var(--color-border); font-size: 0.85rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .op-filenav { list-style: none; display: grid; gap: var(--space-3xs); } .op-filenav a { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); text-decoration: none; overflow-wrap: anywhere; } .op-filenav a:hover { background: var(--color-paper-2); } .op-filenav a[aria-current="page"] { background: var(--color-paper-3); color: var(--color-primary-text); font-weight: 600; } .op-filenav .op-icon { flex: none; } .op-profile__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-lg); align-items: start; } .op-profile__who .op-item__title { font-size: var(--text-page); } .op-profile__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-md); list-style: none; font-size: var(--text-sm); } .op-profile__links a { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 500; } .op-stats { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-xl) 0 0; } .op-stats div { min-width: 130px; padding: var(--space-sm) var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .op-stats dt { font-size: var(--text-xs); color: var(--color-muted); } .op-stats dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.2; font-variant-numeric: tabular-nums; } .op-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .op-tabs a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink-2); font-weight: 600; font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); } .op-tabs a:hover { border-color: var(--color-lilac); color: var(--color-ink); } .op-tabs a[aria-current="page"] { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); } .op-tabs__n { font-weight: 500; opacity: 0.8; font-variant-numeric: tabular-nums; } .op-tabs--big { margin-top: var(--space-xl); } .op-tabs--big a { min-height: 46px; font-size: var(--text-md); } .op-rows { list-style: none; display: grid; gap: var(--space-xs); } .op-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-surface); border-radius: var(--radius); } .op-empty { display: grid; justify-items: center; gap: var(--space-md); padding: var(--space-2xl) var(--space-lg); text-align: center; color: var(--color-muted); } .op-empty__mascot { width: 140px; } @media (max-width: 960px) { .op-item__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .op-item__aside { position: static; } .op-profile__head { grid-template-columns: auto minmax(0, 1fr); } .op-profile__follow { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 640px) { .op-step { padding: var(--space-md); } .op-step__body { padding-left: 0; } .op-file { padding: var(--space-md); } .op-file__row { flex-wrap: wrap; } .op-rank__row { grid-template-columns: 36px minmax(0, 1fr); } .op-rank__stars { grid-column: 2; } .op-bubble--xl { width: 72px; height: 72px; font-size: 2rem; } } /* --------------------------------------------------------------------- * Builds and the build dialog * ------------------------------------------------------------------ */ .op-grid--builds { margin-bottom: var(--space-xl); } .op-build { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); } .op-build__media { position: relative; aspect-ratio: 16 / 10; background: var(--color-paper-3); } .op-build__media img, .op-build__media video, .op-build__frame { width: 100%; height: 100%; object-fit: cover; border: 0; } .op-build__play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--color-code); cursor: pointer; } .op-build__playicon { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: var(--radius-pill); background: var(--color-lilac); color: var(--color-lilac-ink); box-shadow: var(--shadow-card); transition: transform var(--dur-short) var(--ease-out); } .op-build__play:hover .op-build__playicon { transform: translate(-50%, -50%) scale(1.08); } .op-build__empty { display: grid; place-items: center; height: 100%; color: var(--color-muted); } .op-build__body { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg) var(--space-lg); font-size: var(--text-sm); } .op-build__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); list-style: none; color: var(--color-muted); } .op-build__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); } .op-build__links a { color: var(--color-primary-text); font-weight: 600; } .op-builds__form { max-width: 820px; } .op-builds__form .op-h3 { margin-bottom: var(--space-md); } .op-dialog { width: calc(100% - 2 * var(--space-md)); max-width: 680px; max-height: calc(100% - 2 * var(--space-md)); padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-card); } .op-dialog::backdrop { background: var(--color-scrim); } .op-dialog__inner { display: grid; gap: var(--space-md); padding: var(--space-lg); } .op-dialog__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-md); } .op-dialog__prompt { max-height: 16em; } .op-dialog__how code { background: var(--color-paper-2); } .op-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); } .op-pick { border: 0; margin: 0; padding: 0; } .op-pick legend { margin-bottom: var(--space-xs); font-weight: 600; color: var(--color-muted); font-size: var(--text-sm); } .op-pick__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .op-pick__opt { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-weight: 600; cursor: pointer; } .op-pick__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .op-pick__opt:has(input:checked) { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); } .op-pick__opt:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* --------------------------------------------------------------------- * Explore * ------------------------------------------------------------------ */ .op-filter { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); } .op-filter__q { display: flex; align-items: center; gap: var(--space-xs); flex: 1 1 320px; min-height: 50px; padding: 0 var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-muted); } .op-filter__q:focus-within { border-color: var(--color-focus); } .op-filter .op-filter__q, .op-filter .op-filter__sel select { border-color: var(--color-field-edge); } .op-filter__q input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--color-ink); } .op-filter__sel select { min-height: 50px; padding: 0 var(--space-xl) 0 var(--space-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background-color: var(--color-surface); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; } .op-filter .op-btn { min-height: 50px; } .op-results { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-bottom: var(--space-lg); } .op-pages, .navigation.pagination { margin-top: var(--space-2xl); } .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; } .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-weight: 600; text-decoration: none; } .page-numbers.current { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); } a.page-numbers:hover { border-color: var(--color-lilac); } .page-numbers.dots { border: 0; background: transparent; } /* --------------------------------------------------------------------- * Use with Claude, pricing, blog, 404 * ------------------------------------------------------------------ */ .op-howto { list-style: none; display: grid; gap: var(--space-xl); margin-top: var(--space-xl); counter-reset: howto; } .op-howto > li { position: relative; display: grid; gap: var(--space-sm); padding-left: var(--space-2xl); counter-increment: howto; } .op-howto > li::before { content: counter(howto); position: absolute; left: 0; top: calc(var(--space-2xs) * -1); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-lilac); color: var(--color-lilac-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; } .op-asks { list-style: none; display: grid; gap: var(--space-sm); } .op-asks li { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-md) var(--space-lg); background: var(--color-surface); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 6px; box-shadow: var(--shadow-card); font-size: var(--text-lead); } .op-asks .op-icon { flex: none; margin-top: var(--space-2xs); color: var(--color-primary-text); } .op-toollist { display: grid; gap: var(--space-md); margin: var(--space-lg) 0; } .op-toollist div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); } .op-toollist dd { margin: 0; color: var(--color-ink-2); } @media (max-width: 640px) { .op-toollist div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } .op-howto > li { padding-left: 0; padding-top: var(--space-2xl); } } .op-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); align-items: stretch; } .op-tier { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .op-tier--hl { border-color: var(--color-signal); box-shadow: var(--shadow-card); } .op-tier__price strong { font-family: var(--font-display); font-size: var(--text-section); font-weight: 600; } .op-tier .op-btn { margin-top: auto; } .op-checks { list-style: none; display: grid; gap: var(--space-xs); } .op-checks li { display: flex; gap: var(--space-xs); align-items: flex-start; } .op-checks .op-icon { flex: none; margin-top: var(--space-2xs); color: var(--color-ok); } @media (max-width: 860px) { .op-tiers { grid-template-columns: minmax(0, 1fr); } } .op-postlist { list-style: none; display: grid; gap: var(--space-xl); } .op-postlist li { display: grid; gap: var(--space-xs); } .op-postlist a { text-decoration: none; } .op-postlist a:hover { text-decoration: underline; } .op-lost__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-sm); } .op-lost__mascot { width: 220px; margin-bottom: var(--space-md); } .op-lost .op-item__title, .op-lost .op-item__lead { margin-inline: auto; } .comments { margin: var(--space-2xl) 0; } .comment-list { list-style: none; display: grid; gap: var(--space-lg); margin-top: var(--space-lg); } .comment-list .children { list-style: none; margin-left: var(--space-xl); } .comment-body { padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius); } .op-widget { margin-bottom: var(--space-xl); } /* --------------------------------------------------------------------- * Footer * ------------------------------------------------------------------ */ .op-foot { background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-text); padding: var(--space-9) 0 var(--space-5); } .op-foot__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-6); } .op-foot__brand p { margin-top: var(--space-3); max-width: 45ch; color: var(--color-muted); } .op-foot__col h2 { margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-heading); } .op-foot__col ul { list-style: none; display: grid; gap: var(--space-2); } .op-foot a { color: var(--color-text); text-decoration: none; font-size: var(--text-sm); } .op-foot a:hover { color: var(--color-primary-text); } .op-social { display: flex; gap: var(--space-2); margin-top: var(--space-4); list-style: none; } .op-social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); } .op-foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-muted); } @media (max-width: 860px) { .op-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-foot__brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .op-foot { padding-top: var(--space-7); } .op-foot__grid { gap: var(--space-5); } } /* --------------------------------------------------------------------- * App pages, narrow pages and the plugin's forms * ------------------------------------------------------------------ */ .op-app { padding: var(--space-xl) 0 var(--section); } .op-app__title { font-size: var(--text-page); margin-bottom: var(--space-lg); } .op-app__body { max-width: 980px; } .op-narrowpage { padding: var(--space-2xl) var(--gutter) var(--section); background: var(--color-paper-2); } .op-narrowpage__card { position: relative; background: var(--color-card); border: 1px solid var(--color-border); max-width: 520px; margin: var(--space-2xl) auto 0; padding: var(--space-3xl) var(--space-xl) var(--space-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); } .op-narrowpage__mascot { position: absolute; top: calc(var(--space-2xl) * -1); left: 50%; width: 170px; transform: translateX(-50%); } .op-narrowpage__card > .op-h2 { text-align: center; margin-inline: auto; } .op-narrowpage__card > .op-muted { text-align: center; margin-top: var(--space-xs); } .op-narrowpage__body { margin-top: var(--space-lg); } @media (max-width: 640px) { .op-narrowpage__card { padding: var(--space-3xl) var(--space-lg) var(--space-lg); } } .ownly-form-wrap, .ownly-auth, .ownly-contact { display: grid; gap: var(--space-md); } .ownly-form { display: grid; gap: var(--space-md); } .ownly-field { display: grid; gap: var(--space-xs); margin: 0; min-width: 0; } .ownly-field > label, .ownly-field > legend, fieldset.ownly-field > legend { font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); } fieldset.ownly-field { border: 0; padding: 0; } .ownly-field input[type="text"], .ownly-field input[type="email"], .ownly-field input[type="password"], .ownly-field input[type="url"], .ownly-field input[type="number"], .ownly-field input[type="search"], .ownly-field input[type="file"], .ownly-field select, .ownly-field textarea, .op-ed-row input[type="text"], .op-ed-row input[type="url"], .op-ed-row select, .op-ed-row textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); } .ownly-field textarea, .op-ed-row textarea { min-height: 110px; resize: vertical; line-height: 1.55; } .ownly-field input:focus, .ownly-field select:focus, .ownly-field textarea:focus, .op-ed-row input:focus, .op-ed-row select:focus, .op-ed-row textarea:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 4px var(--color-focus-light); } .ownly-field input[aria-invalid="true"] { border-color: var(--color-error); } .ownly-field--inline { display: flex; align-items: flex-start; gap: var(--space-xs); } .ownly-field input[type="checkbox"], .ownly-field input[type="radio"] { width: 20px; height: 20px; margin: var(--space-3xs) 0 0; accent-color: var(--color-signal); } .ownly-help { font-size: var(--text-sm); color: var(--color-muted); } .ownly-help a { color: var(--color-primary-text); } .ownly-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); } .ownly-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-xs); } .ownly-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-primary); border-radius: var(--radius-pill); background: var(--color-signal); color: var(--color-signal-ink); box-shadow: 0 8px 16px -8px var(--color-shadow-2); font-weight: 600; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); } .ownly-button:hover { background: var(--color-signal-2); color: var(--color-signal-ink); transform: translateY(-1px); } .ownly-button:active { transform: translateY(2px); box-shadow: var(--shadow-card); } .ownly-button--secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-rule-2); box-shadow: var(--shadow-card); } .ownly-button--secondary:hover { background: var(--color-paper-2); color: var(--color-ink); } .ownly-auth .ownly-button, .ownly-narrow .ownly-button { width: 100%; } .ownly-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); } .ownly-links a { color: var(--color-primary-text); } .op-req { color: var(--color-error); } .ownly-optional { font-weight: 400; color: var(--color-muted); } .ownly-password { position: relative; display: block; } .ownly-password input { padding-right: 136px !important; } .ownly-password__toggle { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary-text); font-size: var(--text-xs); font-weight: 600; cursor: pointer; } .ownly-password__toggle:hover { background: var(--color-primary-light); } .ownly-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .op-handle-input { display: flex; align-items: stretch; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); overflow: hidden; } .op-handle-input:focus-within { border-color: var(--color-focus); box-shadow: 0 0 0 4px var(--color-focus-light); } .op-handle-input__base { display: flex; align-items: center; padding: 0 var(--space-sm); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; } .ownly-field .op-handle-input input[type="text"] { border: 0; border-radius: 0; box-shadow: none; } /* Member dashboard */ .op-dash { display: grid; gap: var(--space-lg); } .op-dash__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); } .op-dash__avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-lilac); color: var(--color-lilac-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; } .op-dash__hello { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.2; } .op-dash__head .ownly-help { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); } .op-dash__signout { color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); } .op-dash__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .op-dash__tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-weight: 600; font-size: var(--text-sm); text-decoration: none; color: var(--color-ink-2); } .op-dash__tabs a:hover { border-color: var(--color-lilac); } .op-dash__tabs a[aria-current="page"] { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); } .op-dash__section { display: grid; gap: var(--space-md); } .op-dash__section > h2, .op-dash__section > .op-h3 { font-size: var(--text-title); } .op-dash__stats { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; } .op-dash__stats div { min-width: 150px; padding: var(--space-sm) var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .op-dash__stats dt { font-size: var(--text-xs); color: var(--color-muted); } .op-dash__stats dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); } .op-dash__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); } .op-dash__card { display: grid; gap: var(--space-xs); padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-decoration: none; transition: transform var(--dur-short) var(--ease-out); } .op-dash__card:hover { transform: translateY(-3px); color: var(--color-ink); } .op-dash__card strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); } .op-dash__card span { color: var(--color-muted); font-size: var(--text-sm); } .op-dash__list { list-style: none; display: grid; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); } .op-dash__list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); } .op-dash__list > li + li { border-top: 1px solid var(--color-border); } .op-dash__list > li > div { display: grid; gap: var(--space-3xs); min-width: 0; } .op-dash__empty { padding: var(--space-lg); background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); color: var(--color-muted); } .op-status { display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--color-paper-2); color: var(--color-ink-2); } .op-status--live { background: var(--color-ok-2); color: var(--color-ok); } .op-status--pending { background: var(--color-warn-2); color: var(--color-warn); } .op-status--draft { background: var(--color-paper-3); } @media (max-width: 640px) { .op-dash__head { grid-template-columns: auto minmax(0, 1fr); } .op-dash__signout { grid-column: 1 / -1; } } /* Share editor */ .op-editor { display: grid; gap: var(--space-lg); } .op-editor__status { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); color: var(--color-muted); font-size: var(--text-sm); } .op-editor__form { gap: var(--space-xl); } .op-editor-gate, .op-build-gate { padding: var(--space-xl); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); text-align: center; display: grid; gap: var(--space-md); justify-items: center; } .op-ed-section { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); } .op-ed-section > h2 { font-size: var(--text-title); } .op-ed-row { position: relative; display: grid; gap: var(--space-sm); margin: 0; padding: var(--space-md); padding-top: var(--space-xl); border: 1px dashed var(--color-border-strong); border-radius: var(--radius); background: var(--color-paper); min-width: 0; } .op-ed-row > legend { padding: 0 var(--space-xs); font-weight: 600; font-family: var(--font-display); } .op-ed-row__tools { position: absolute; right: var(--space-sm); top: var(--space-sm); display: flex; gap: var(--space-2xs); } .op-ed-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); cursor: pointer; font-size: var(--text-sm); } .op-ed-icon:hover { border-color: var(--color-lilac); } .op-ed-checks { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); } .op-ed-checks label { display: inline-flex; gap: var(--space-xs); align-items: center; font-weight: 500; } .op-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); } .op-meta-wide { grid-column: 1 / -1; } .op-mono, .op-ed-row textarea.op-mono { font-family: var(--font-mono); font-size: 0.875rem; } .op-faint { color: var(--color-muted); } .op-editor__actions { position: sticky; bottom: 0; z-index: var(--z-raised); display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: 0 -6px 20px -12px var(--color-shadow-2); } .op-kind-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-xs); } .op-kind-pick > legend { margin-bottom: var(--space-xs); } .op-kind-pick > .ownly-help { grid-column: 1 / -1; } .op-kind-pick__opt { display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-paper); cursor: pointer; } .op-kind-pick__opt:has(input:checked) { border-color: var(--color-signal); background: var(--color-paper-2); } .op-kind-pick__opt input { margin-top: var(--space-2xs); accent-color: var(--color-signal); } .op-kind-pick__opt .ownly-help { display: block; } /* Build form and uploads */ .op-build-form { display: grid; gap: var(--space-md); } .op-upload { display: grid; gap: var(--space-xs); padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-paper-2); } .op-upload__bar { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; } .op-upload__bar > span { display: block; height: 100%; background: var(--color-signal); } .op-upload__text { font-size: var(--text-sm); color: var(--color-muted); } .op-upload__remove { justify-self: start; border: 0; background: none; color: var(--color-error); font-weight: 600; cursor: pointer; padding: 0; } /* Compact header search: an icon that opens on focus. */ @media (min-width: 1024px) { .op-find__field { width: 40px; padding: 0; justify-content: center; border-color: var(--color-field-edge); border-radius: var(--radius-pill); background: var(--color-card); transition: none; } .op-find__field input { flex: 0 0 0; width: 0; } .op-find__field kbd { display: none; } .op-find__field:focus-within { width: 240px; padding: 0 var(--space-2) 0 var(--space-3); justify-content: flex-start; outline: 2px solid var(--color-focus); outline-offset: 2px; } .op-find__field:focus-within input { flex: 1 1 auto; width: auto; } .op-find__field:hover { background: var(--color-surface); } } /* --------------------------------------------------------------------- * Light/dark toggle, blue buttons, sky hero, page heroes (2.5) * ------------------------------------------------------------------ */ .op-mode { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-heading); cursor: pointer; } .op-mode:hover { border-color: var(--color-primary); color: var(--color-primary-text); } .op-mode__sun { display: none; } :root[data-theme="dark"] .op-mode__sun { display: block; } :root[data-theme="dark"] .op-mode__moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .op-mode__sun { display: block; } :root:not([data-theme="light"]) .op-mode__moon { display: none; } } .op-btn--blue { --btn-bg: var(--color-primary); --btn-ink: var(--color-on-primary); --btn-line: var(--color-primary); box-shadow: var(--shadow-blue); } .op-btn--blue:hover { --btn-bg: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-on-primary); } .op-playdot { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-primary-light); color: var(--color-primary-text); } .op-playdot .op-icon { fill: currentColor; } .op-sky { position: relative; overflow: clip; padding: var(--space-8) 0 var(--space-6); background: var(--gradient-sky); } .op-sky__clouds { position: absolute; inset: 0; pointer-events: none; } .op-cloud { position: absolute; fill: var(--color-cloud); filter: blur(3px); opacity: 0.95; } .op-cloud--l1 { width: 420px; left: -120px; top: 2%; opacity: 0.85; } .op-cloud--l2 { width: 520px; left: -170px; top: 46%; } .op-cloud--r1 { width: 460px; right: -150px; top: 8%; transform: scaleX(-1); opacity: 0.85; } .op-cloud--r2 { width: 560px; right: -190px; top: 50%; transform: scaleX(-1); } .op-cloud--b { width: 900px; left: 50%; bottom: -90px; margin-left: -450px; opacity: 0.7; filter: blur(8px); } .op-sky__stage { position: relative; min-height: 600px; display: grid; place-items: center; } .op-sky__center { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; max-width: 760px; } .op-sky__halo { display: grid; place-items: center; width: 152px; height: 152px; margin-bottom: var(--space-5); border-radius: var(--radius-pill); background: var(--gradient-halo); box-shadow: 0 0 0 16px var(--color-halo-ring), 0 0 0 40px var(--color-halo-ring-2), var(--shadow-blue); } .op-sky__mascot { width: 104px; --mascot-cloud-b: var(--mascot-blue-b); --mascot-cloud-c: var(--mascot-blue-c); --mascot-edge: var(--mascot-blue-edge); --mascot-eye-a: var(--mascot-blue-eye); --mascot-eye-b: var(--mascot-blue-eye-2); --mascot-brow: var(--mascot-blue-eye); } .op-sky__title { position: relative; font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; color: var(--color-heading); max-width: none; } .op-sky__title em { font-style: normal; color: var(--color-primary-text); } .op-sky__spark { position: absolute; right: -40px; top: -28px; width: 48px; height: 48px; } .op-sky__spark i { position: absolute; left: 50%; bottom: 0; width: 4px; height: 16px; border-radius: 4px; background: var(--color-primary-text); transform-origin: 50% 32px; } .op-sky__spark i:nth-child(1) { transform: rotate(-40deg); } .op-sky__spark i:nth-child(3) { transform: rotate(40deg); } .op-sky__lead { margin-top: var(--space-4); max-width: 54ch; font-size: var(--text-lg); color: var(--color-text); } .op-sky__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); } .op-tags-float { position: absolute; inset: 0; list-style: none; z-index: 1; } .op-float { position: absolute; transform: rotate(var(--r, 0deg)); animation: op-drift 8s ease-in-out infinite; } .op-float a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-card); box-shadow: var(--shadow-pill); color: var(--color-heading); font-weight: 600; font-size: var(--text-md); text-decoration: none; white-space: nowrap; transition: box-shadow var(--dur-short) var(--ease-out), color var(--dur-micro) var(--ease-out); } .op-float a .op-icon { color: var(--color-primary-text); } .op-float a:hover { color: var(--color-primary-text); } .op-float--1 { --r: -8deg; left: 6%; top: 12%; } .op-float--2 { --r: -6deg; left: 1%; top: 38%; animation-delay: -2s; } .op-float--3 { --r: -7deg; left: 3%; top: 62%; animation-delay: -4s; } .op-float--4 { --r: 9deg; right: 2%; top: 22%; animation-delay: -1s; } .op-float--5 { --r: 6deg; right: 4%; top: 54%; animation-delay: -3s; } @keyframes op-drift { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(var(--r)) translateY(-8px); } } .op-perks { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-6); padding: var(--space-5) var(--space-4); list-style: none; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); } .op-perks li + li { border-left: 1px solid var(--color-border); } .op-perks a { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 0 var(--space-3); color: var(--color-heading); text-decoration: none; } .op-perks a:hover { color: var(--color-primary-text); } .op-perks .op-icon { flex: none; color: var(--color-primary-text); stroke-width: 1.5; } .op-perks span { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; max-width: 13ch; } @media (max-width: 1279px) { .op-float a { min-height: 44px; font-size: var(--text-sm); padding: 0 var(--space-3); } .op-float--1 { left: 2%; top: 10%; } .op-float--2 { left: 1%; top: 36%; } .op-float--3 { left: 2%; top: 62%; } .op-float--4 { right: 2%; top: 18%; } .op-float--5 { right: 1%; top: 50%; } } @media (max-width: 1023px) { .op-sky { padding-top: var(--space-6); } .op-sky__stage { min-height: 0; display: block; } .op-tags-float { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); } .op-float { position: static; animation: none; } .op-float--1, .op-float--3, .op-float--5 { --r: -3deg; } .op-float--2, .op-float--4 { --r: 3deg; } .op-sky__center { margin-inline: auto; } .op-perks span { font-size: var(--text-lg); } } @media (max-width: 760px) { .op-perks { grid-template-columns: minmax(0, 1fr); padding: var(--space-2) var(--space-4); } .op-perks li + li { border-left: 0; border-top: 1px solid var(--color-border); } .op-perks a { justify-content: flex-start; padding: var(--space-3) 0; } .op-perks .op-icon { width: 32px; height: 32px; } .op-perks span { max-width: none; } .op-sky__spark { display: none; } .op-sky__halo { width: 120px; height: 120px; box-shadow: 0 0 0 12px var(--color-halo-ring), 0 0 0 28px var(--color-halo-ring-2), var(--shadow-blue); } .op-sky__mascot { width: 84px; } .op-sky__actions .op-btn { flex: 1 1 100%; } .op-cloud--l1, .op-cloud--r1 { width: 260px; } } @media (max-width: 480px) { .op-tags-float { gap: var(--space-1); } .op-float a { min-height: 40px; font-size: var(--text-xs); gap: var(--space-1); padding: 0 var(--space-2); } .op-float a .op-icon { width: 16px; height: 16px; } } @media (prefers-reduced-motion: reduce) { .op-float { animation: none; } } /* Page heroes: one look for kind pages, explore, items, profiles and pages. */ .op-pagehero, .op-item__head { position: relative; padding: var(--space-6) 0 var(--space-7); background: var(--gradient-page); border-bottom: 1px solid var(--color-border); overflow: clip; } .op-pagehero__inner { position: relative; } .op-pagehero__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); } .op-pagehero__title { font-size: var(--text-page); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; } .op-pagehero__lead { margin-top: var(--space-3); font-size: var(--text-lg); color: var(--color-text); max-width: 56ch; } .op-pagehero__count { color: var(--color-muted); font-size: var(--text-sm); } .op-pagehero__count strong { display: block; font-size: 40px; line-height: 1; color: var(--color-heading); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .op-pagehero .op-tabs--big { margin-top: var(--space-5); } .op-band--tight-b { padding-bottom: 0; } .op-item__title { font-weight: 700; letter-spacing: -0.035em; } /* --------------------------------------------------------------------- * 2.5.1 layout polish: centred section heads, steadier rhythm, mobile. * ------------------------------------------------------------------ */ /* Section heads sit on the centre axis set by the hero. */ .op-lib__top { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3); margin-bottom: var(--space-6); } .op-lib__top .op-h2 { text-wrap: balance; } .op-head__lead { max-width: 52ch; margin: 0 auto; font-size: var(--text-lead); line-height: 1.55; color: var(--color-text); text-wrap: pretty; } .op-lib__top .op-seg { margin-top: var(--space-2); } .op-head__more { margin-top: var(--space-5); text-align: center; } .op-lib .op-rowlist + .op-link, .op-lib [role="tabpanel"] > .op-link { display: table; margin: var(--space-5) auto 0; } .op-shots { margin-top: 0; } .op-shots__plan, .op-shots__by { padding-inline: var(--space-1); } /* Split sections: text column centred against its partner. */ .op-hx__grid, .op-mcpx { align-items: center; } .op-hx__text, .op-mcpx__text { max-width: 34rem; } /* Closing call: a contained panel, so it does not merge with the footer. */ .op-close { border-top: 0; background: var(--color-background); } .op-close__panel { display: grid; justify-items: center; gap: var(--space-5); padding: var(--space-8) var(--space-5); text-align: center; background: var(--gradient-page); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-pill); } .op-close__panel .op-h2 { text-wrap: balance; } .op-close__lead { max-width: 44ch; margin-inline: auto; } /* Centred page heroes (kind pages, explore). */ .op-pagehero--center { text-align: center; } .op-pagehero--center .op-crumbs ol { justify-content: center; } .op-pagehero--center .op-pagehero__lead, .op-pagehero--center .op-item__lead { margin-inline: auto; max-width: 56ch; } .op-pagehero--center .op-pagehero__count { display: inline-flex; align-items: baseline; gap: var(--space-1); margin-top: var(--space-3); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-card); } .op-pagehero--center .op-pagehero__count strong { display: inline; font-size: var(--text-md); letter-spacing: 0; } .op-pagehero--center .op-tabs { justify-content: center; } .op-pagehero--center .op-filter { max-width: 52rem; margin-inline: auto; justify-content: center; } /* Profile builds: tidy rows instead of loose underlined links. */ .op-rows--builds { margin-top: var(--space-5); gap: var(--space-2); } .op-rows--builds li { justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); } .op-rows--builds li a:first-child { margin-right: auto; color: var(--color-heading); text-decoration: none; } .op-rows--builds li a:first-child:hover { color: var(--color-primary-text); } /* Long breadcrumbs stay on one line and trim the last item. */ .op-crumbs ol { row-gap: var(--space-1); } @media (max-width: 760px) { /* Segmented control and kind tabs scroll sideways instead of wrapping. */ .op-seg { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: var(--radius-pill); } .op-seg::-webkit-scrollbar { display: none; } .op-seg button { flex: 1 0 auto; justify-content: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); white-space: nowrap; } .op-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .op-stats div { min-width: 0; text-align: left; } .op-tabs--big { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .op-pagehero--center .op-tabs--big { justify-content: flex-start; } .op-tabs--big::-webkit-scrollbar { display: none; } .op-tabs--big a { flex: 0 0 auto; white-space: nowrap; } /* Filters: full-width search, two selects side by side, full-width button. */ .op-filter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .op-filter__q, .op-filter .op-btn { grid-column: 1 / -1; } .op-filter__sel select { width: 100%; } /* Breadcrumbs: one line, last item trimmed. */ .op-crumbs ol { flex-wrap: nowrap; overflow: hidden; } .op-crumbs li { flex: 0 0 auto; white-space: nowrap; } .op-crumbs li:last-child { flex: 0 1 auto; min-width: 0; } .op-crumbs [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; display: block; } /* Item actions: equal buttons on one row. */ .op-item__head .op-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .op-item__head .op-actions form, .op-item__head .op-actions .op-btn { width: 100%; } .op-item__head .op-actions .op-btn { justify-content: center; padding-inline: var(--space-2); } /* Profile head stacks on the centre line. */ .op-profile__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .op-profile__head .op-profile__links { justify-content: center; } .op-profile__follow { justify-self: center; } .op-hx__text, .op-mcpx__text { max-width: none; text-align: center; } .op-hx__actions { justify-content: center; } .op-mcpx__asks { text-align: left; } .op-close__panel { padding: var(--space-6) var(--space-4); } .op-close__panel .op-btn { width: 100%; } .op-rows--builds li { flex-direction: column; align-items: flex-start; } } /* --------------------------------------------------------------------- * 2.6 home: product hero with search, community feed, popular lists, * categories, FAQ and the weekly digest. * ------------------------------------------------------------------ */ .op-sky--home .op-sky__stage { min-height: 640px; } .op-sky--home .op-sky__center { max-width: 820px; } /* Hero search. */ .op-hsearch { position: relative; display: flex; gap: var(--space-2); width: min(100%, 680px); margin-top: var(--space-5); padding: var(--space-2); background: var(--color-card); border: 1px solid var(--color-field-edge); border-radius: var(--radius-pill); box-shadow: var(--shadow-pill); } .op-hsearch:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; } .op-hsearch__field { flex: 1; display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding-left: var(--space-3); color: var(--color-muted); } .op-hsearch__field input { flex: 1; min-width: 0; min-height: var(--control-h); border: 0; background: transparent; color: var(--color-heading); font-size: var(--text-md); outline: none; } .op-hsearch__field input::placeholder { color: var(--color-muted); } .op-hsearch__kbd { flex: none; padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.8; } .op-hsearch > .op-btn { flex: none; min-height: var(--control-h); } .op-hsearch .op-find__results { left: 0; right: 0; width: auto; text-align: left; z-index: 20; } /* Try chips. */ .op-try { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-sm); } .op-try__label { color: var(--color-muted); font-weight: 500; } .op-try a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-heading); font-weight: 500; text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .op-try a:hover { border-color: var(--color-primary); color: var(--color-primary-text); } /* Kind cards. */ .op-kindcards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); list-style: none; } .op-kindcard a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); height: 100%; padding: var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); color: var(--color-heading); text-decoration: none; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); } .op-kindcard a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--color-primary); } .op-kindcard__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--kind-bg, var(--color-plan)); color: var(--kind-ink, var(--color-plan-ink)); } .op-kindcard--skill, .op-kindcard--skill .op-kindcard__icon { --kind-bg: var(--color-skill); --kind-ink: var(--color-skill-ink); } .op-kindcard--mcp, .op-kindcard--mcp .op-kindcard__icon { --kind-bg: var(--color-mcp); --kind-ink: var(--color-mcp-ink); } .op-kindcard--plugin, .op-kindcard--plugin .op-kindcard__icon { --kind-bg: var(--color-plugin); --kind-ink: var(--color-plugin-ink); } .op-kindcard--plan { --kind-bg: var(--color-plan); --kind-ink: var(--color-plan-ink); } .op-kindcard--component, .op-kindcard--component .op-kindcard__icon { --kind-bg: var(--color-component); --kind-ink: var(--color-component-ink); } .op-kindcard--all, .op-kindcard--all .op-kindcard__icon { --kind-bg: var(--color-surface); --kind-ink: var(--color-heading); } .op-kindcard__name { align-self: center; font-size: var(--text-title); font-weight: 650; letter-spacing: -0.01em; } .op-kindcard__n { margin-left: var(--space-1); color: var(--color-muted); font-weight: 500; font-variant-numeric: tabular-nums; } .op-kindcard__blurb { grid-column: 1 / -1; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; } .op-kindcard__go { position: absolute; top: calc(var(--space-4) + 12px); right: var(--space-4); color: var(--color-muted); transition: transform var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .op-kindcard a:hover .op-kindcard__go { transform: translateX(3px); color: var(--color-primary-text); } /* Community feed. */ .op-feed__grid { gap: var(--space-4); } .op-feed__panel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-2); border-radius: var(--radius); } .op-feed__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); } .op-card__ago { margin-left: auto; white-space: nowrap; } .op-feed__grid .op-card__foot { column-gap: var(--space-3); } .op-card > .op-card__title { margin-top: 0; } .op-card__foot .op-kind { align-self: center; } .op-makers { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); } .op-makers__label { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; } .op-makers__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); list-style: none; } .op-makers__list a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3) 0 var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-heading); font-size: var(--text-sm); font-weight: 500; text-decoration: none; } .op-makers__list a:hover { border-color: var(--color-primary); color: var(--color-primary-text); } /* Popular by kind. */ .op-pop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .op-pop__col { padding: var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .op-pop__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); } .op-pop__head h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-title); font-weight: 650; } .op-pop__head .op-kindcard__icon { width: 32px; height: 32px; border-radius: var(--radius-sm); } .op-pop__list { list-style: none; counter-reset: pop; } .op-pop__list li { counter-increment: pop; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); } .op-pop__list li::before { content: counter(pop); color: var(--color-muted); font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; } .op-pop__list a { display: grid; min-width: 0; text-decoration: none; } .op-pop__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-heading); font-weight: 600; } .op-pop__list a:hover .op-pop__title { color: var(--color-primary-text); } .op-pop__meta { color: var(--color-muted); font-size: var(--text-sm); } .op-pop__stars { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .op-pop__stars .op-icon { color: var(--color-cheek); } /* Categories. */ .op-cats__title { margin: var(--space-8) 0 var(--space-4); text-align: center; font-size: var(--text-title); font-weight: 650; } .op-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); list-style: none; } .op-cats a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-heading); font-weight: 600; text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out); } .op-cats a:hover { border-color: var(--color-primary); } .op-cats__n { min-width: 28px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-muted); font-size: var(--text-xs); text-align: center; line-height: 1.8; font-variant-numeric: tabular-nums; } /* FAQ. */ .op-faq__list { max-width: 760px; margin: 0 auto; display: grid; gap: var(--space-2); } .op-faq__item { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); } .op-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); color: var(--color-heading); font-weight: 600; cursor: pointer; list-style: none; } .op-faq__item summary::-webkit-details-marker { display: none; } .op-faq__item summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius); } .op-faq__mark { position: relative; flex: none; width: 16px; height: 16px; } .op-faq__mark::before, .op-faq__mark::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); } .op-faq__mark::after { transform: rotate(90deg); } .op-faq__item[open] .op-faq__mark::after { transform: rotate(0deg); } .op-faq__item p { padding: 0 var(--space-4) var(--space-4); color: var(--color-text); line-height: 1.65; } /* Weekly digest signup. */ .op-news__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-6); padding: var(--space-7); background: var(--gradient-page); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-pill); } .op-news__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-3); border-radius: var(--radius); background: var(--color-primary); color: var(--color-on-primary); } .op-news__lead { margin-top: var(--space-3); color: var(--color-text); font-size: var(--text-lead); line-height: 1.55; max-width: 46ch; } .op-news__row { display: flex; gap: var(--space-2); padding: var(--space-2); background: var(--color-card); border: 1px solid var(--color-field-edge); border-radius: var(--radius-pill); } .op-news__row:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; } .op-news__field { flex: 1; min-width: 0; display: flex; } .op-news__field input { flex: 1; min-width: 0; min-height: var(--control-h); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--color-heading); font-size: var(--text-md); outline: none; } .op-news__field input::placeholder { color: var(--color-muted); } .op-news__more { margin-top: var(--space-3); } .op-news .ownly-notice { margin-bottom: var(--space-3); } @media (max-width: 1079px) { .op-kindcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1023px) { .op-sky--home .op-sky__stage { min-height: 0; } } @media (max-width: 760px) { .op-hsearch { border-radius: var(--radius-card); } .op-hsearch__kbd { display: none; } .op-hsearch > .op-btn { padding-inline: var(--space-3); } .op-try { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .op-try::-webkit-scrollbar { display: none; } .op-try a { flex: none; white-space: nowrap; } .op-kindcards { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .op-kindcard a { padding: var(--space-3); } .op-pop { grid-template-columns: minmax(0, 1fr); } .op-feed__foot .op-btn { flex: 1 1 100%; } .op-news__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) var(--space-4); text-align: center; } .op-news__lead { margin-inline: auto; } .op-news__row { flex-direction: column; border-radius: var(--radius-card); } .op-news__row .op-btn { width: 100%; } .op-card__ago { margin-left: 0; } .op-feed .op-feed__grid li:nth-child(n+5) { display: none; } } @media (max-width: 480px) { .op-cats { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------- * 2.7 header: a dark bar that hangs from the top edge, centred. * 2.7 footer: a dark closing block with a large wordmark. * Both stay dark in light and dark mode. * ------------------------------------------------------------------ */ :root { --bar-h: 64px; } .op-bar { position: sticky; top: 0; z-index: var(--z-bar); height: 0; background: none; border: 0; color: var(--color-hbar-ink); } .op-bar__pill { position: relative; display: flex; align-items: center; gap: var(--space-4); width: min(calc(100% - var(--space-5)), 1120px); min-height: var(--bar-h); margin: 0 auto; padding: 0 var(--space-2) 0 var(--space-4); background: var(--color-hbar); border: 1px solid var(--color-hbar-line); border-top: 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: 0 18px 40px -24px var(--color-shadow-2); } .op-main > :first-child { padding-top: calc(var(--bar-h) + var(--space-6)); } .op-main > :is(article, div):first-child { padding-top: 0; } .op-main > :is(article, div):first-child > :first-child { padding-top: calc(var(--bar-h) + var(--space-6)); } .op-sky.op-sky--home, .op-main > .op-sky:first-child { padding-top: calc(var(--bar-h) + var(--space-7)); } .op-brand--bar { color: var(--color-hbar-ink); gap: var(--space-2); } .op-brand--bar:hover { color: var(--color-hbar-ink); } .op-brand__tile { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gradient-halo); box-shadow: inset 0 1px 0 var(--color-halo-ring); } .op-brand__tile .op-brand__mark { width: 28px; --mascot-cloud-b: var(--mascot-blue-b); --mascot-cloud-c: var(--mascot-blue-c); --mascot-edge: var(--mascot-blue-edge); --mascot-eye-a: var(--mascot-blue-eye); --mascot-eye-b: var(--mascot-blue-eye-2); --mascot-brow: var(--mascot-blue-eye); } .op-brand--bar .op-brand__word { font-size: 18px; font-weight: 650; color: var(--color-hbar-ink); } .op-bar .op-nav { gap: var(--space-3); } .op-bar .op-nav__list { gap: var(--space-1); } .op-bar .op-nav__list > li > a, .op-drop__btn { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-hbar-muted); font: inherit; font-size: var(--text-sm); font-weight: 500; text-decoration: none; cursor: pointer; transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); } .op-bar .op-nav__list > li > a:hover, .op-drop__btn:hover, .op-drop.is-open .op-drop__btn { color: var(--color-hbar-ink); background: var(--color-hbar-hover); } .op-bar .op-nav__list a[aria-current="page"], .op-drop__btn[data-current] { color: var(--color-hbar-ink); font-weight: 600; } .op-bar .op-nav__list a[aria-current="page"]::after { display: none; } .op-drop__btn:focus-visible, .op-bar a:focus-visible, .op-bar button:focus-visible { outline: 2px solid var(--color-hbar-ink); outline-offset: 2px; } .op-drop__btn .op-icon { transition: transform var(--dur-short) var(--ease-out); } .op-drop.is-open .op-drop__btn .op-icon { transform: rotate(180deg); } .op-drop { position: relative; } .op-drop__panel { position: absolute; left: 50%; top: calc(100% + var(--space-3)); width: 420px; padding: var(--space-2); background: var(--color-hbar); border: 1px solid var(--color-hbar-line); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); transform: translate(-50%, -4px); opacity: 0; visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); } .op-drop.is-open .op-drop__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s; } html:not(.js) .op-drop:hover .op-drop__panel, html:not(.js) .op-drop:focus-within .op-drop__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .op-drop__panel ul { list-style: none; display: grid; gap: var(--space-1); } .op-drop__panel a { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius); color: var(--color-hbar-ink); text-decoration: none; } .op-drop__panel a:hover, .op-drop__panel a[aria-current="page"] { background: var(--color-hbar-hover); } .op-drop__icon { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--kind-bg); color: var(--kind-ink); } .op-drop__text { display: grid; gap: 2px; } .op-drop__text strong { font-size: var(--text-sm); font-weight: 600; } .op-drop__text small { font-size: var(--text-xs); color: var(--color-hbar-muted); line-height: 1.45; } .op-bar .op-nav__end { gap: var(--space-2); } .op-bar .op-nav__quiet { color: var(--color-hbar-muted); padding: 0 var(--space-2); } .op-bar .op-nav__quiet:hover { color: var(--color-hbar-ink); } .op-bar .op-mode { width: 40px; height: 40px; border-color: var(--color-hbar-edge); background: transparent; color: var(--color-hbar-muted); } .op-bar .op-mode:hover { border-color: var(--color-hbar-muted); color: var(--color-hbar-ink); } .op-btn--light { --btn-bg: var(--color-light-btn); --btn-ink: var(--color-light-btn-ink); --btn-line: var(--color-light-btn); } .op-btn--light:hover { --btn-bg: var(--color-light-btn); --btn-ink: var(--color-light-btn-ink); filter: brightness(0.94); } .op-bar .op-btn--light { min-height: 44px; padding: 0 var(--space-4); } @media (min-width: 1024px) { .op-bar .op-find__field { border-color: var(--color-hbar-edge); background: transparent; color: var(--color-hbar-muted); } .op-bar .op-find__field:hover { background: var(--color-hbar-hover); } .op-bar .op-find__field:focus-within { background: var(--color-hbar-hover); outline-color: var(--color-hbar-ink); } .op-bar .op-find__field input { color: var(--color-hbar-ink); } .op-bar .op-find__field input::placeholder { color: var(--color-hbar-muted); } } @media (max-width: 1179px) and (min-width: 1024px) { .op-bar .op-nav__list > li > a, .op-drop__btn { padding: 0 var(--space-2); } .op-bar .op-nav__quiet { display: none; } } /* Phones and tablets: the bar keeps brand and menu; the menu is a dark sheet under it. */ @media (max-width: 1023px) { .op-bar__pill { width: calc(100% - var(--space-3)); padding: 0 var(--space-2) 0 var(--space-3); border-radius: 0 0 var(--radius-card) var(--radius-card); } .op-bar .op-bar__toggle { margin-left: auto; border-color: var(--color-hbar-line); background: transparent; color: var(--color-hbar-ink); width: 44px; height: 44px; } .js .op-bar .op-nav { position: absolute; inset: calc(100% + var(--space-2)) 0 auto; max-height: calc(100dvh - var(--bar-h) - var(--space-5)); padding: var(--space-3); gap: var(--space-3); background: var(--color-hbar-solid); border: 1px solid var(--color-hbar-line); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); } .op-bar .op-nav__list > li > a, .op-drop__btn { width: 100%; min-height: 52px; padding: 0 var(--space-3); border-bottom: 0; border-radius: var(--radius); font-size: var(--text-md); color: var(--color-hbar-ink); } .op-drop__btn { justify-content: space-between; } .op-drop__panel { position: static; width: auto; margin: var(--space-1) 0 var(--space-2); padding: var(--space-1); background: var(--color-hbar-hover); box-shadow: none; transform: none; display: none; opacity: 1; visibility: visible; transition: none; } .op-drop.is-open .op-drop__panel { display: block; transform: none; } .op-bar .op-drop__panel a { min-height: 0; border-bottom: 0; font-size: var(--text-sm); } .op-bar .op-nav__end { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-hbar-line); } .op-bar .op-find__field { width: 100%; border-color: var(--color-hbar-edge); background: var(--color-hbar-hover); color: var(--color-hbar-muted); } .op-bar .op-find__field input { color: var(--color-hbar-ink); } .op-bar .op-find__field input::placeholder { color: var(--color-hbar-muted); } .op-bar .op-find__results { left: 0; right: 0; width: auto; } .op-bar .op-nav__quiet { justify-content: center; min-height: 48px; border: 1px solid var(--color-hbar-line); border-radius: var(--radius-pill); color: var(--color-hbar-ink); } .op-bar .op-mode { width: 100%; border-radius: var(--radius-pill); } .op-bar .op-btn--light { min-height: 48px; justify-content: center; } } /* Footer. */ .op-foot { position: relative; overflow: clip; margin-top: 0; padding: var(--space-9) 0 0; background: var(--color-foot-bg); border-top: 0; color: var(--color-foot-muted); } .op-foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-8); } .op-foot__brand { display: grid; justify-items: start; gap: var(--space-3); align-content: start; } .op-foot__brand p { margin: 0; color: var(--color-foot-muted); } .op-foot .op-foot__id { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-foot-ink); text-decoration: none; } .op-foot__id .op-brand__tile { width: 48px; height: 48px; border-radius: 14px; } .op-foot__id .op-brand__mark { width: 36px; } .op-foot__name { display: block; color: var(--color-foot-ink); font-size: var(--text-title); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; } .op-foot__label { display: block; color: var(--color-foot-muted); font-size: var(--text-xs); } .op-foot .op-foot__promise { margin-top: var(--space-2); color: var(--color-foot-ink); font-size: clamp(22px, 2.4vw, 30px); font-style: italic; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; } .op-foot .op-foot__about { max-width: 44ch; line-height: 1.6; } .op-foot .op-btn--light { margin-top: var(--space-2); color: var(--color-light-btn-ink); font-size: var(--text-sm); } .op-foot .op-foot__copy { margin-top: var(--space-3); font-size: var(--text-sm); } .op-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } .op-foot__col h2 { color: var(--color-foot-ink); } .op-foot__col ul { gap: var(--space-3); } .op-foot a { color: var(--color-foot-muted); } .op-foot a:hover { color: var(--color-foot-ink); } .op-foot a:focus-visible { outline: 2px solid var(--color-foot-ink); outline-offset: 2px; } .op-foot .op-social a { border-color: var(--color-foot-line); background: transparent; color: var(--color-foot-muted); } .op-foot__legal { display: block; margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-foot-line); color: var(--color-foot-muted); font-size: var(--text-xs); } .op-foot__mark::before { content: attr(data-word); } .op-foot__mark { margin: var(--space-4) 0 0; padding: 0 var(--space-3); color: var(--color-foot-mark); font-size: clamp(64px, 17vw, 260px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.8; text-align: center; white-space: nowrap; user-select: none; transform: translateY(12%); } @media (max-width: 960px) { .op-foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); } } @media (max-width: 560px) { .op-foot { padding-top: var(--space-7); } .op-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); } .op-foot__cols .op-foot__col:last-child { grid-column: 1 / -1; } .op-foot .op-btn--light { width: 100%; justify-content: center; } } /* --------------------------------------------------------------------- * 2.7 components: live tiles, the stage, code tabs, chips, CLI. * Previews run in sandboxed iframes; their stage colours live inside them. * ------------------------------------------------------------------ */ .op-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--color-surface); color-scheme: normal; } .op-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; } .op-tile { position: relative; display: grid; grid-template-rows: auto auto; height: 100%; overflow: hidden; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); } .op-tile:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lift); } .op-tile__stage { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--color-border); } .op-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); } .op-tile__text { min-width: 0; } .op-tile__title { font-size: var(--text-md); font-weight: 650; line-height: 1.3; } .op-tile__title a { color: var(--color-heading); text-decoration: none; } .op-tile__title a:hover { color: var(--color-primary-text); } .op-tile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); color: var(--color-muted); font-size: var(--text-xs); } .op-tile__meta a { color: var(--color-muted); text-decoration: none; } .op-tile__meta a:hover { color: var(--color-primary-text); } .op-tile__stars { display: inline-flex; align-items: center; gap: 2px; } .op-tile__stars .op-icon { color: var(--color-cheek); } .op-tile__actions { display: flex; gap: var(--space-1); flex: none; } .op-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-heading); cursor: pointer; text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .op-icon-btn:hover { border-color: var(--color-primary); color: var(--color-primary-text); } .op-icon-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .op-icon-btn.is-done { border-color: var(--color-ok); color: var(--color-ok); } .op-card__stage { aspect-ratio: 16 / 9; margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-1); overflow: hidden; border-bottom: 1px solid var(--color-border); border-radius: var(--radius-card) var(--radius-card) 0 0; } .op-card__stage .op-frame { pointer-events: none; } .op-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); } .op-chips a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-heading); font-size: var(--text-sm); font-weight: 500; text-decoration: none; } .op-chips a span { color: var(--color-muted); font-variant-numeric: tabular-nums; } .op-chips a:hover { border-color: var(--color-primary); } .op-chips a[aria-current="page"] { background: var(--color-heading); border-color: var(--color-heading); color: var(--color-background); } .op-chips a[aria-current="page"] span { color: var(--color-background); } .op-comp__intro { max-width: 70ch; margin: 0 auto var(--space-6); text-align: center; } .op-cli { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: var(--space-5); margin-top: var(--space-8); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); } .op-cli .op-muted { margin-top: var(--space-2); } /* Component page. */ .op-cview { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); scroll-margin-top: calc(var(--bar-h) + var(--space-4)); } .op-stage { overflow: hidden; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .op-stage__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); } .op-stage__label { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; } .op-stage__tools { display: flex; align-items: center; gap: var(--space-2); } .op-seg--sm { width: auto; } .op-seg--sm button { min-height: 32px; padding: 0 var(--space-2); font-size: var(--text-xs); } .op-seg--sm button[aria-pressed="true"] { background: var(--color-card); color: var(--color-heading); box-shadow: 0 1px 2px var(--color-shadow), 0 0 0 1px var(--color-border); } .op-stage__frame { height: clamp(320px, 42vw, 460px); min-height: 320px; } .op-code--tabs .op-code__bar { padding-left: var(--space-1); } .op-code__tabs { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; } .op-code__tabs button { min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-code-ink); opacity: 0.72; font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .op-code__tabs button[aria-selected="true"] { opacity: 1; background: var(--color-field-3); } .op-code__tabs button:focus-visible { outline: 2px solid var(--color-code-ink); outline-offset: -2px; } .op-code__file { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-2) 0 var(--space-3); color: var(--color-code-ink); font-family: var(--font-mono); font-size: var(--text-xs); } .op-code__file .op-copy { color: var(--color-code-ink); border-color: var(--color-field-3); min-height: 36px; } .op-cview, .op-cview .op-code, .op-code__panel { min-width: 0; max-width: 100%; } .op-item__main { min-width: 0; } .op-code__panel pre { max-width: 100%; white-space: pre; overflow-wrap: normal; max-height: 32em; } .op-code pre code { padding: 0; background: none; border: 0; color: inherit; font-size: inherit; } .op-code__panel pre:focus-visible { outline: 2px solid var(--color-code-ink); outline-offset: -2px; } .op-cview__deps code { margin-left: var(--space-1); } /* Sponsors. */ .op-sponsors-strip { padding: var(--space-5) 0 var(--space-2); } .op-sponsors-strip__title { margin-bottom: var(--space-3); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; text-align: center; } .op-sponsors-strip__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); list-style: none; } .op-sp { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 64px; height: 100%; padding: var(--space-2) var(--space-3); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-heading); font-weight: 600; text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out); } .op-sp:hover { border-color: var(--color-primary); } .op-sp--open { border-style: dashed; border-color: var(--color-field-edge); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; } .op-sp--open:hover { color: var(--color-primary-text); } .op-sp__logo { max-height: 36px; width: auto; } .op-spstats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); list-style: none; } .op-spstats li { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-muted); font-size: var(--text-sm); } .op-spstats strong { color: var(--color-heading); font-variant-numeric: tabular-nums; } .op-spgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); list-style: none; } .op-spgrid a { display: grid; justify-items: center; gap: var(--space-1); height: 100%; padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); color: var(--color-heading); text-align: center; text-decoration: none; } .op-spgrid span { color: var(--color-text); font-size: var(--text-sm); } .op-spgrid small { color: var(--color-muted); } .op-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; } .op-tier { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .op-tier--gold { border-color: var(--color-primary); } .op-tier h3 { font-size: var(--text-title); font-weight: 650; } .op-tier ul { display: grid; gap: var(--space-2); list-style: none; } .op-tier li { display: flex; gap: var(--space-2); color: var(--color-text); font-size: var(--text-sm); line-height: 1.5; } .op-tier li .op-icon { flex: none; margin-top: 2px; color: var(--color-ok); } .op-tier .op-btn { justify-self: start; } /* Blog. */ .op-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; } .op-post { position: relative; display: grid; align-content: start; gap: var(--space-2); height: 100%; padding: var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .op-post:hover { border-color: var(--color-primary); } .op-post__img { margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-2); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card) var(--radius-card) 0 0; } .op-post__img img { width: 100%; height: 100%; object-fit: cover; } .op-post__meta { display: flex; gap: var(--space-3); color: var(--color-muted); font-size: var(--text-xs); } .op-post__title { font-size: var(--text-title); font-weight: 650; line-height: 1.3; } .op-post__title a { color: var(--color-heading); text-decoration: none; } .op-post__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .op-post__sum { color: var(--color-text); font-size: var(--text-sm); } /* Share form: component fields. */ .op-ed-comp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } .op-ed-comp__preview { position: sticky; top: calc(var(--bar-h) + var(--space-3)); } .op-ed-comp__frame { display: block; width: 100%; height: 360px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .op-code-input { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; tab-size: 2; } .op-kindcards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } @media (min-width: 1024px) { .op-kindcards:has(> li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1024px) and (max-width: 1239px) { .op-kindcard a { padding: var(--space-3); } .op-kindcard__name { font-size: var(--text-lg); } .op-kindcard__go { top: calc(var(--space-3) + 12px); right: var(--space-3); } } @media (min-width: 761px) and (max-width: 1023px) { .op-kindcards:has(> li:nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .op-kindcards:has(> li:nth-child(5)) > li { grid-column: span 2; } .op-kindcards:has(> li:nth-child(5)) > li:nth-child(n+4) { grid-column: span 3; } } @media (min-width: 761px) { .op-kindcard a { grid-template-columns: minmax(0, 1fr); align-content: start; } .op-kindcard__icon { margin-bottom: var(--space-2); } .op-kindcard__name { white-space: nowrap; } .op-kindcard__blurb { margin-top: 0; } } @media (max-width: 1079px) { .op-tiles, .op-posts, .op-spgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-cli { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 860px) { .op-tiers { grid-template-columns: minmax(0, 1fr); } .op-sponsors-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-ed-comp__grid { grid-template-columns: minmax(0, 1fr); } .op-ed-comp__preview { position: static; } } @media (max-width: 640px) { .op-tiles, .op-posts, .op-spgrid { grid-template-columns: minmax(0, 1fr); } .op-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .op-chips a { flex: none; } .op-stage__frame { height: clamp(340px, 104vw, 460px); } .op-stage__tools .op-seg--sm span { display: none; } .op-comp-show .op-tiles li:nth-child(n+4) { display: none; } } /* ===================================================================== * 2.8 PREMIUM LAYER * One quiet system on top of everything above: tighter type with a serif * accent, hairline borders, layered soft shadows, glass, a fine grid and * film grain in the hero, and calmer motion. Mobile gets the same care. * ===================================================================== */ /* --- Type ------------------------------------------------------------ */ body { font-size: 16px; line-height: 1.65; letter-spacing: -0.006em; font-feature-settings: "ss01", "cv11", "calt"; } h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.032em; line-height: 1.08; } h3 { letter-spacing: -0.018em; line-height: 1.25; } .op-h2 { font-size: var(--text-section); max-width: 20ch; } .op-h2 em, .op-pagehero__title em, .op-serif, .op-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; } .op-h2 em, .op-h2 .op-accent { color: var(--color-primary-text); } .op-head__lead, .op-pagehero__lead, .op-item__lead { color: var(--color-muted); font-size: var(--text-lead); line-height: 1.6; } .op-lib__top { gap: var(--space-3); margin-bottom: var(--space-7); } .op-lib__top .op-head__lead { max-width: 46ch; } .op-muted { color: var(--color-muted); } code, kbd { font-feature-settings: "zero" 0; } /* --- Hero ------------------------------------------------------------ */ .op-sky { isolation: isolate; } .op-sky::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 50% 32%, var(--aurora-1), transparent 70%), radial-gradient(40% 35% at 78% 18%, var(--aurora-2), transparent 70%), linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(75% 65% at 50% 38%, var(--mask-ink) 40%, transparent 100%); mask-image: radial-gradient(75% 65% at 50% 38%, var(--mask-ink) 40%, transparent 100%); } .op-sky::after, .op-foot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--noise-opacity); mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .op-sky::after, :root[data-theme="dark"] .op-foot::after { mix-blend-mode: screen; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .op-sky::after, :root:not([data-theme="light"]) .op-foot::after { mix-blend-mode: screen; } } .op-foot::after { mix-blend-mode: screen; opacity: 0.05; } .op-cloud { filter: blur(10px); opacity: 0.55; } .op-cloud--b { filter: blur(14px); opacity: 0.45; } .op-sky__halo { width: 120px; height: 120px; margin-bottom: var(--space-6); box-shadow: 0 0 0 10px var(--color-halo-ring), 0 0 0 26px var(--color-halo-ring-2), var(--halo-drop); } .op-sky__mascot { width: 82px; } .op-sky__title { font-size: clamp(42px, 5.2vw + 6px, 84px); font-weight: 600; letter-spacing: -0.048em; line-height: 0.98; } .op-sky__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; padding-right: 0.04em; color: var(--color-primary-text); } .op-sky__spark { display: none; } .op-sky__lead { margin-top: var(--space-5); max-width: 56ch; font-size: clamp(16px, 0.5vw + 14px, 19px); line-height: 1.6; color: var(--color-muted); } .op-float a { min-height: 44px; gap: var(--space-2); padding: 0 var(--space-3) 0 var(--space-2); background: var(--glass); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border: 1px solid var(--glass-line); box-shadow: var(--shadow-pill), var(--card-hi); color: var(--color-heading); font-size: var(--text-sm); font-weight: 500; } .op-float a .op-icon { box-sizing: content-box; padding: var(--space-1h); border-radius: var(--radius-pill); background: var(--color-primary-soft); width: 14px; height: 14px; } .op-float--1 { --r: -4deg; } .op-float--2 { --r: -3deg; } .op-float--3 { --r: -4deg; } .op-float--4 { --r: 4deg; } .op-float--5 { --r: 3deg; } .op-hsearch { width: min(100%, 640px); margin-top: var(--space-6); padding: var(--space-1h); background: var(--color-card); border-color: var(--color-field-edge); box-shadow: var(--shadow-pill), var(--card-hi); } .op-hsearch__field input { min-height: 46px; font-size: 15px; } .op-hsearch__kbd { border-radius: 6px; background: var(--color-surface); border-color: var(--color-border-strong); font-size: 11px; line-height: 20px; padding: 0 var(--space-1h); } .op-try { margin-top: var(--space-4); gap: var(--space-1h); } .op-try__label { margin-right: var(--space-1); font-size: var(--text-xs); text-transform: none; letter-spacing: 0; } .op-try a { min-height: 32px; padding: 0 var(--space-2h); font-size: 13px; background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: var(--glass-line); } /* --- Buttons --------------------------------------------------------- */ .op-btn { min-height: 44px; padding: 0 var(--space-3h); border-radius: 10px; font-weight: 550; font-size: 14px; letter-spacing: -0.005em; box-shadow: 0 1px 2px var(--color-shadow), var(--card-hi); } .op-btn--lg, .op-btn--pill.op-btn--lg { min-height: 48px; padding: 0 var(--space-4); font-size: 15px; } .op-btn--pill { border-radius: var(--radius-pill); } .op-btn--blue, .op-btn--signal { --btn-bg: var(--grad-blue-btn); --btn-line: var(--color-primary-dark); --btn-ink: var(--color-on-primary); box-shadow: var(--edge-hi), var(--btn-drop-blue); } .op-btn--blue:hover, .op-btn--signal:hover { --btn-bg: var(--grad-blue-btn); filter: brightness(1.06); border-color: var(--color-primary-dark); color: var(--color-on-primary); } .op-btn--ink, .op-btn--dark { --btn-bg: var(--grad-ink-btn); --btn-line: transparent; box-shadow: var(--edge-hi), var(--btn-drop); } .op-btn--ink:hover, .op-btn--dark:hover { --btn-bg: var(--grad-ink-btn); filter: brightness(1.12); border-color: transparent; } .op-btn--outline, .op-btn--ghost { --btn-bg: var(--color-card); --btn-line: var(--color-border-strong); box-shadow: 0 1px 2px var(--color-shadow), var(--card-hi); } .op-btn--outline:hover, .op-btn--ghost:hover { --btn-bg: var(--color-surface); border-color: var(--color-field-edge); } .op-btn--light { --btn-bg: var(--grad-light-btn); --btn-line: transparent; --btn-ink: var(--color-light-btn-ink); box-shadow: var(--edge-hi-light), var(--light-btn-drop); } .op-btn--light:hover { filter: none; --btn-bg: var(--color-light-btn); } .op-btn:active { transform: translateY(0.5px); filter: brightness(0.97); } /* --- Surfaces: cards, tiles, panels ------------------------------------ */ .op-card, .op-tile, .op-kindcard a, .op-pop__col, .op-post, .op-tier, .op-faq__item, .op-stage, .op-sp, .op-spgrid a, .op-hx__panel, .op-news__panel, .op-close__panel, .op-item__aside > *, .op-stats div { border-color: var(--color-border); box-shadow: var(--shadow-card), var(--card-hi); } .op-card { padding: var(--space-3h); gap: var(--space-1h); border-radius: 16px; } .op-card:hover { transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: var(--shadow-lift), var(--card-hi); } .op-card__title { margin-top: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; } .op-card__sum { color: var(--color-muted); font-size: 14px; line-height: 1.55; } .op-card__foot { padding-top: var(--space-2h); margin-top: auto; border-top: 1px solid var(--color-border); font-size: 13px; gap: var(--space-1h) var(--space-2h); } .op-card__stage { margin: calc(var(--space-3h) * -1) calc(var(--space-3h) * -1) var(--space-2); border-radius: 15px 15px 0 0; } .op-kind { padding: 2px var(--space-2) 2px var(--space-1h); gap: var(--space-1); border: 1px solid var(--kind-line, var(--color-plan-line, transparent)); font-size: 11.5px; font-weight: 550; letter-spacing: 0; } .op-kind .op-icon { width: 12px; height: 12px; } .op-kind--plan { --kind-line: var(--tone-plan-line); } .op-kind--skill { --kind-line: var(--tone-skill-line); } .op-kind--mcp { --kind-line: var(--tone-mcp-line); } .op-kind--plugin { --kind-line: var(--tone-plugin-line); } .op-kind--component { --kind-line: var(--tone-component-line); } .op-bubble--sm { width: 22px; height: 22px; font-size: 11px; } .op-kindcard a { padding: var(--space-3h); border-radius: 16px; gap: var(--space-1) var(--space-2h); } .op-kindcard a:hover { transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: var(--shadow-lift), var(--card-hi); } .op-kindcard__icon { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--kind-line, transparent); } .op-kindcard--plan { --kind-line: var(--tone-plan-line); } .op-kindcard--skill { --kind-line: var(--tone-skill-line); } .op-kindcard--mcp { --kind-line: var(--tone-mcp-line); } .op-kindcard--plugin { --kind-line: var(--tone-plugin-line); } .op-kindcard--component { --kind-line: var(--tone-component-line); } .op-kindcard__name { font-size: 17px; font-weight: 600; letter-spacing: -0.018em; } .op-kindcard__n { font-weight: 450; font-size: 15px; } .op-kindcard__blurb { color: var(--color-muted); font-size: 13.5px; } .op-kindcards { gap: var(--space-2h); } .op-tile { border-radius: 16px; } .op-tile:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-lift), var(--card-hi); } .op-tile__stage { border-bottom-color: var(--color-border); } .op-frame:focus, .op-frame:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; } .op-stage:focus-within, .op-stage.is-focused { outline: 0; } .op-filter__q:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; } .op-filter__q input:focus-visible, .op-hsearch__field input:focus-visible, .op-news__field input:focus-visible { outline: 2px solid transparent; } .op-tile__title { font-size: 15px; font-weight: 600; } .op-icon-btn { width: 36px; height: 36px; border-color: var(--color-border); box-shadow: 0 1px 2px var(--color-shadow), var(--card-hi); } .op-pop__col { padding: var(--space-2) var(--space-3h) var(--space-2h); border-radius: 16px; } .op-pop__head { padding: var(--space-2h) 0 var(--space-2); margin: 0; } .op-pop__head h3 { font-size: 16px; } .op-pop__list li { padding: var(--space-2h) 0; border-top-color: var(--color-border); grid-template-columns: 22px minmax(0, 1fr) auto; } .op-pop__list li::before { font-size: 12px; color: var(--color-muted); font-weight: 500; } .op-pop__title { font-size: 14.5px; font-weight: 550; } .op-pop__meta { font-size: 12.5px; } .op-cats a { min-height: 52px; border-radius: 12px; font-weight: 550; font-size: 14.5px; box-shadow: 0 1px 2px var(--color-shadow), var(--card-hi); } /* Segmented controls and chips. */ .op-seg { padding: var(--space-1); gap: 2px; background: var(--color-surface); border-color: var(--color-border); } .op-seg button { min-height: 34px; padding: 0 var(--space-2h); font-size: 13.5px; font-weight: 500; color: var(--color-muted); } .op-seg button[aria-selected="true"], .op-seg--sm button[aria-pressed="true"] { color: var(--color-heading); background: var(--color-card); box-shadow: 0 1px 2px var(--color-shadow-2), 0 0 0 1px var(--color-border); } .op-chips a { min-height: 36px; padding: 0 var(--space-2h); font-size: 13.5px; border-color: var(--color-border); box-shadow: 0 1px 1px var(--color-shadow); } .op-chips a[aria-current="page"] { background: var(--color-heading); } .op-tabs a { border-color: var(--color-border); font-weight: 550; } .op-tabs a[aria-current="page"] { background: var(--grad-ink-btn); border-color: transparent; color: var(--color-on-ink); box-shadow: var(--edge-hi), var(--btn-drop); } /* Fields. */ .op-filter__q, .op-filter__sel select, .ownly-form input[type="text"], .ownly-form input[type="email"], .ownly-form input[type="url"], .ownly-form input[type="password"], .ownly-form textarea, .ownly-form select { border-radius: 12px; box-shadow: 0 1px 2px var(--color-shadow) inset; } .op-filter__q, .op-filter__sel select { min-height: 46px; } .op-filter .op-btn { min-height: 46px; } /* Page heads. */ .op-pagehero, .op-item__head { position: relative; isolation: isolate; border-bottom-color: var(--color-border); } .op-pagehero::before, .op-item__head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px; -webkit-mask-image: radial-gradient(60% 90% at 50% 0%, var(--mask-ink) 20%, transparent 80%); mask-image: radial-gradient(60% 90% at 50% 0%, var(--mask-ink) 20%, transparent 80%); } .op-pagehero__title, .op-item__title { font-size: var(--text-page); font-weight: 600; letter-spacing: -0.042em; line-height: 1.02; } .op-pagehero__count { font-size: 13px; } .op-crumbs { font-size: 13px; } /* Code. */ .op-code { border: 1px solid var(--color-field-3); border-radius: 14px; box-shadow: 0 1px 2px var(--color-shadow), 0 16px 32px -20px var(--color-shadow-2); } .op-code__bar { background: var(--color-code-2); border-bottom: 1px solid var(--color-field-3); } .op-code pre { font-size: 12.5px; line-height: 1.75; } .op-copy { min-height: 32px; border-radius: 8px; font-size: 12px; } /* FAQ, newsletter, closing panels. */ .op-faq__item { border-radius: 14px; } .op-faq__item summary { min-height: 60px; padding: var(--space-3) var(--space-3h); font-size: 15.5px; font-weight: 550; } .op-faq__item p { padding: 0 var(--space-3h) var(--space-3h); color: var(--color-muted); font-size: 15px; } .op-news__panel { position: relative; overflow: hidden; isolation: isolate; padding: clamp(var(--space-5), 4vw, 56px); border-radius: 24px; background: var(--color-card); } .op-news__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 120% at 0% 0%, var(--aurora-1), transparent 60%), radial-gradient(50% 100% at 100% 100%, var(--aurora-2), transparent 60%); opacity: 0.8; } .op-news__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-blue-btn); box-shadow: var(--edge-hi), var(--btn-drop-blue); } .op-news__row { padding: var(--space-1); border-radius: var(--radius-pill); box-shadow: var(--shadow-pill), var(--card-hi); } .op-news__field input { min-height: 44px; font-size: 15px; } /* Sponsors strip: quieter. */ .op-sponsors-strip { padding-top: var(--space-6); } .op-sponsors-strip__title { font-size: 12px; letter-spacing: 0; } .op-sp { min-height: 56px; border-radius: 12px; box-shadow: none; } .op-sp--open { background: transparent; border-color: var(--color-border-strong); } /* Makers row. */ .op-makers { border-top-color: var(--color-border); } .op-makers__list a { min-height: 32px; font-size: 13px; box-shadow: 0 1px 1px var(--color-shadow); } /* Header bar: glass, hairline, inner light. */ .op-bar__pill { min-height: 60px; background: var(--color-hbar); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-color: var(--color-hbar-line); box-shadow: var(--bar-drop); } :root { --bar-h: 60px; } .op-brand__tile { width: 32px; height: 32px; border-radius: 9px; box-shadow: var(--brand-tile-drop); } .op-brand__tile .op-brand__mark { width: 25px; } .op-brand--bar .op-brand__word { font-size: 16.5px; font-weight: 600; letter-spacing: -0.025em; } .op-bar .op-nav__list > li > a, .op-drop__btn { min-height: 36px; padding: 0 var(--space-2h); font-size: 13.5px; } .op-bar .op-btn--light { min-height: 38px; padding: 0 var(--space-3); font-size: 13.5px; } .op-bar .op-mode { width: 36px; height: 36px; min-height: 36px; } @media (max-width: 1023px) { .op-bar .op-find--menu .op-find__field { width: 100%; height: auto; min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-pill); justify-content: flex-start; } .op-bar .op-find--menu .op-find__field input { flex: 1 1 auto; width: auto; min-height: 46px; font-size: 15px; } .op-bar .op-mode { width: 100%; } .op-bar .op-find--menu .op-find__results { position: static; width: auto; margin-top: var(--space-2); box-shadow: none; } } .op-drop__panel { border-radius: 16px; background: var(--drop-panel); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* Footer polish. */ .op-foot { padding-top: clamp(var(--space-8), 6vw + var(--space-4), var(--space-10)); } .op-foot .op-foot__promise { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.4vw + 10px, 40px); letter-spacing: -0.015em; line-height: 1.1; } .op-foot__col h2 { font-size: 13px; font-weight: 550; letter-spacing: 0; } .op-foot a { font-size: 14px; } .op-foot__mark { font-weight: 600; letter-spacing: -0.065em; -webkit-mask-image: linear-gradient(180deg, var(--mask-ink) 30%, transparent 95%); mask-image: linear-gradient(180deg, var(--mask-ink) 30%, transparent 95%); } /* Section rhythm. */ .op-band { padding: var(--section) 0; } .op-band--well { background: var(--color-surface); border-block: 1px solid var(--color-border); } .op-band--well + .op-band--well { border-top: 0; } /* Motion: calmer. */ .op-float { animation-duration: 10s; } /* --- Mobile ---------------------------------------------------------- */ @media (max-width: 640px) { body { font-size: 15.5px; } .op-tags-float { display: none; } .op-sponsors-strip__list { grid-template-columns: minmax(0, 1fr); } .op-sponsors-strip__list li:has(.op-sp--open) ~ li:has(.op-sp--open) { display: none; } .op-sky--home .op-sky__stage { padding-top: var(--space-4); } .op-sky__halo { width: 96px; height: 96px; margin-bottom: var(--space-5); box-shadow: 0 0 0 8px var(--color-halo-ring), 0 0 0 18px var(--color-halo-ring-2), var(--halo-drop-sm); } .op-sky__mascot { width: 66px; } .op-sky__title { font-size: clamp(40px, 11.5vw, 52px); } .op-sky__lead { font-size: 16px; } .op-hsearch { padding: var(--space-1); border-radius: 16px; } .op-hsearch > .op-btn { min-height: 42px; border-radius: 12px; } .op-kindcard a { padding: var(--space-3); } .op-card { padding: var(--space-3h); } .op-card__stage { margin: -18px -18px var(--space-2); } .op-h2 { font-size: clamp(28px, 7.6vw, 34px); } .op-lib__top { margin-bottom: var(--space-5); } .op-faq__item summary { padding: var(--space-2h) var(--space-3); font-size: 15px; } .op-faq__item p { padding: 0 var(--space-3) var(--space-3); } .op-news__panel { border-radius: 20px; } .op-foot .op-foot__promise { font-size: 30px; } } /* --- 2.9 search: header button + search window ------------------------ */ .op-searchbtn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-1) 0 var(--space-2h); border: 1px solid var(--color-hbar-edge); border-radius: var(--radius-pill); background: var(--color-hbar-hover); color: var(--color-hbar-muted); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .op-searchbtn span { min-width: 72px; text-align: left; } .op-searchbtn kbd { padding: 0 var(--space-1h); border: 1px solid var(--color-hbar-line); border-radius: var(--radius-pill); background: var(--color-hbar); color: var(--color-hbar-muted); font-family: var(--font-mono); font-size: 11px; line-height: 22px; } .op-searchbtn:hover { border-color: var(--color-hbar-muted); color: var(--color-hbar-ink); } .op-searchbtn:focus-visible { outline: 2px solid var(--color-hbar-ink); outline-offset: 2px; } @media (min-width: 1024px) { .op-bar .op-find--menu { display: none; } } @media (max-width: 1023px) { .op-searchbtn { display: none; } } @media (min-width: 1024px) and (max-width: 1179px) { .op-searchbtn span, .op-searchbtn kbd { display: none; } .op-searchbtn { width: 36px; justify-content: center; padding: 0; } } .op-cmdk { width: min(640px, calc(100% - var(--space-5))); max-height: min(560px, calc(100dvh - var(--space-9))); margin: 12vh auto auto; padding: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-card); color: var(--color-heading); box-shadow: var(--shadow-lift), 0 40px 80px -30px var(--color-shadow-2); } .op-cmdk::backdrop { background: var(--color-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .op-cmdk[open] { animation: op-cmdk-in var(--dur-short) var(--ease-out); } @keyframes op-cmdk-in { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } } .op-cmdk__form { display: flex; flex-direction: column; max-height: inherit; } .op-cmdk__field { display: flex; align-items: center; gap: var(--space-2h); padding: 0 var(--space-3) 0 var(--space-3h); border-bottom: 1px solid var(--color-border); color: var(--color-muted); } .op-cmdk__field input { flex: 1; min-width: 0; min-height: 60px; border: 0; background: transparent; color: var(--color-heading); font-size: 17px; outline: none; } .op-cmdk__field input::placeholder { color: var(--color-muted); } .op-cmdk__field:focus-within { box-shadow: inset 0 -2px 0 var(--color-focus); } .op-cmdk__esc { flex: none; min-height: 28px; padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-muted); font: inherit; font-size: 12px; cursor: pointer; } .op-cmdk__esc:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .op-cmdk .op-cmdk__results { position: static; width: auto; max-height: none; overflow-y: auto; margin: 0; padding: var(--space-2); border: 0; border-radius: 0; box-shadow: none; background: transparent; } .op-cmdk .op-cmdk__results a { min-height: 44px; align-items: center; padding: 0 var(--space-3); font-size: 15px; } .op-cmdk .op-cmdk__results a small { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface); font-size: 12px; } .op-cmdk__quick { padding: var(--space-3) var(--space-3h) var(--space-2); overflow-y: auto; } .op-cmdk__results:not([hidden]) + .op-cmdk__quick { display: none; } .op-cmdk__label { margin-bottom: var(--space-2); color: var(--color-muted); font-size: 12px; font-weight: 550; } .op-cmdk__quick ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); list-style: none; } .op-cmdk__quick a { display: flex; align-items: center; gap: var(--space-2h); min-height: 48px; padding: 0 var(--space-2); border-radius: var(--radius); color: var(--color-heading); font-weight: 550; font-size: 14.5px; text-decoration: none; } .op-cmdk__quick a:hover, .op-cmdk__quick a:focus-visible { background: var(--color-surface); color: var(--color-heading); } .op-cmdk__quick .op-drop__icon { width: 32px; height: 32px; border: 1px solid var(--kind-line, transparent); } .op-cmdk__foot { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: auto; padding: var(--space-2h) var(--space-3h); border-top: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); font-size: 12px; } .op-cmdk__foot kbd { margin-right: 2px; padding: 0 var(--space-1h); border: 1px solid var(--color-border-strong); border-radius: 5px; background: var(--color-card); font-family: var(--font-mono); font-size: 11px; } @media (max-width: 640px) { .op-cmdk { margin-top: var(--space-3); width: calc(100% - var(--space-3)); max-height: calc(100dvh - var(--space-5)); } .op-cmdk__foot { display: none; } .op-cmdk__quick ul { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .op-cmdk[open] { animation: none; } } .op-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border: 1px dashed var(--color-field-edge); border-radius: var(--radius-card); background: var(--color-surface); } .op-invite .op-muted { margin-top: var(--space-1); } @media (max-width: 640px) { .op-invite { padding: var(--space-3h); } .op-invite .op-btn { width: 100%; } } .op-source { display: grid; gap: var(--space-1h); margin: var(--space-3) 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .op-source__label { color: var(--color-muted); font-size: 12px; font-weight: 550; } .op-source__link { display: inline-flex; align-items: center; gap: var(--space-1h); color: var(--color-heading); font-weight: 550; font-size: 14px; text-decoration: none; overflow-wrap: anywhere; } .op-source__link:hover { color: var(--color-primary-text); } /* Signed-in admins: sit below the WordPress toolbar, and keep the bar on one line. */ .admin-bar .op-bar { top: 32px; } @media (max-width: 782px) { .admin-bar .op-bar { top: 46px; } } @media (max-width: 600px) { .admin-bar .op-bar { top: 0; } } .op-bar .op-nav__list > li > a, .op-drop__btn, .op-searchbtn, .op-searchbtn kbd, .op-bar .op-nav__quiet, .op-bar .op-btn { white-space: nowrap; } @media (min-width: 1024px) and (max-width: 1359px) { .op-searchbtn span { display: none; } .op-searchbtn { padding: 0 var(--space-1) 0 var(--space-2h); } } @media (min-width: 1024px) and (max-width: 1239px) { .logged-in .op-bar .op-nav__quiet { display: none; } } /* --------------------------------------------------------------------- * Motion preferences * ------------------------------------------------------------------ */ @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; } .op-card:hover, .op-kinds a:hover, .op-people a:hover, .op-dash__card:hover, .op-btn:hover, .op-btn:active { transform: none; } .op-mascot__eyes { transform: none; } } @media (hover: none) { .op-card:hover, .op-kinds a:hover, .op-people a:hover { transform: none; } } .ownly-links .ownly-button { color: var(--color-on-primary); text-decoration: none; } .ownly-links .ownly-button--secondary { color: var(--color-heading); } .op-build { background: var(--color-card); border: 1px solid var(--color-border); } /* 2.11: element page — Preview / Code tabs and Copy for AI. */ .op-cview__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); } .op-pc { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); } .op-pc button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .op-pc button:hover { color: var(--color-heading); } .op-pc button[aria-selected="true"] { background: var(--color-card); color: var(--color-heading); box-shadow: 0 1px 2px var(--color-shadow), 0 0 0 1px var(--color-border); } .op-pc button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .op-cview__ai { display: inline-flex; align-items: center; gap: var(--space-3); } .op-cview__md { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .op-cview__md:hover { color: var(--color-heading); } #op-pp-code { display: grid; gap: var(--space-3); } #op-pp-code[hidden] { display: none; } @media (max-width: 560px) { .op-cview__head { align-items: stretch; } .op-pc { width: 100%; } .op-pc button { flex: 1; justify-content: center; } .op-cview__ai { width: 100%; justify-content: space-between; } } .op-aiuse { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); } .op-aiuse p { margin: 0; flex: 1 1 320px; color: var(--color-text); font-size: var(--text-sm); } .op-aiuse strong { color: var(--color-heading); } /* ===================================================================== 2.12: home hero ("launch"). Promise and search on the left, a real element on the right shown the way every element page works: live preview, one-line install, and a prompt to hand to Claude. Tokens only, so it follows light and dark like the rest of the site. ===================================================================== */ .op-sky.op-sky--home.op-launch { padding-top: calc(var(--bar-h) + var(--space-9)); padding-bottom: var(--space-7); } .op-launch::before { background: radial-gradient(45% 55% at 74% 40%, var(--aurora-1), transparent 70%), radial-gradient(35% 35% at 20% 20%, var(--aurora-2), transparent 70%), linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, var(--mask-ink) 40%, transparent 100%); mask-image: radial-gradient(80% 70% at 60% 40%, var(--mask-ink) 40%, transparent 100%); } .op-launch__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: var(--space-7); } .op-launch__copy { min-width: 0; } .op-launch__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border: 1px solid var(--glass-line); border-radius: var(--radius-pill); background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--card-hi); color: var(--color-text); font-size: 13px; font-weight: 500; } .op-launch__badge { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--color-primary); } .op-launch__mascot { width: 20px; --mascot-cloud-b: var(--mascot-blue-b); --mascot-cloud-c: var(--mascot-blue-c); --mascot-edge: var(--mascot-blue-edge); --mascot-eye-a: var(--mascot-blue-eye); --mascot-eye-b: var(--mascot-blue-eye-2); --mascot-brow: var(--mascot-blue-eye); } .op-launch__title { margin: 0; font-size: clamp(40px, 3.4vw + 10px, 62px); line-height: 1; letter-spacing: -0.045em; font-weight: 600; color: var(--color-heading); } .op-launch__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; padding-right: 0.04em; color: var(--color-primary-text); } .op-launch__lead { margin: var(--space-4) 0 0; max-width: 52ch; font-size: clamp(16px, 0.4vw + 14px, 18px); line-height: 1.6; color: var(--color-muted); } .op-launch .op-launch__search { width: 100%; max-width: 560px; margin-top: var(--space-5); } .op-launch__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .op-launch__actions .op-btn .op-icon { flex: none; } .op-launch__works { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: 13px; } .op-launch__demo { position: relative; min-width: 0; } .op-launch__steps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; } .op-launch__steps li { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-3) 0 var(--space-1); border: 1px solid var(--glass-line); border-radius: var(--radius-pill); background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--color-heading); font-size: 13px; font-weight: 550; } .op-launch__steps span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary-text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .op-win { margin: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-card); box-shadow: var(--shadow-float), var(--card-hi); } .op-win__bar { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .op-win__dots { display: inline-flex; gap: var(--space-1h); flex: none; } .op-win__dots i { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--color-border-strong); } .op-win__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--space-1) var(--space-2h); border-radius: var(--radius-sm); background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-muted); font-family: var(--font-mono); font-size: 12px; text-decoration: none; } .op-win__url:hover { color: var(--color-heading); } .op-win__live { display: inline-flex; align-items: center; gap: var(--space-1h); flex: none; color: var(--color-ok); font-size: 12px; font-weight: 600; } .op-win__live i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-ok); box-shadow: 0 0 0 3px var(--color-ok-2); } .op-win__stage { height: 300px; background: var(--color-surface); } .op-win__frame { display: block; width: 100%; height: 100%; border: 0; } .op-win__rows { display: grid; gap: 0; border-top: 1px solid var(--color-border); } .op-win__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2h) var(--space-3); } .op-win__row + .op-win__row { border-top: 1px solid var(--color-border); } .op-win__label { color: var(--color-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .op-win__row code { overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding: var(--space-1h) var(--space-2h); border-radius: var(--radius-sm); background: var(--color-code); color: var(--color-code-ink); font-family: var(--font-mono); font-size: 12px; } .op-win__row code::-webkit-scrollbar { display: none; } .op-win__row p { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--color-text); font-size: 13px; line-height: 1.5; } .op-win__row--ai { background: var(--color-primary-soft); } .op-win__row .op-copy { flex: none; } @media (prefers-reduced-motion: no-preference) { .op-win { animation: op-launch-in 600ms var(--ease-out) both; } .op-launch__steps li { animation: op-launch-in 500ms var(--ease-out) both; } .op-launch__steps li:nth-child(2) { animation-delay: 80ms; } .op-launch__steps li:nth-child(3) { animation-delay: 160ms; } } @keyframes op-launch-in { from { opacity: 0; transform: translateY(12px); } } @media (max-width: 1080px) { .op-launch__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .op-launch__copy { max-width: 680px; } .op-launch__demo { max-width: 680px; } } @media (max-width: 640px) { .op-sky.op-sky--home.op-launch { padding-top: calc(var(--bar-h) + var(--space-6)); padding-bottom: var(--space-5); } .op-launch__eyebrow { font-size: 12px; } .op-launch__title { font-size: clamp(36px, 10.5vw, 48px); } .op-launch .op-launch__search { max-width: 100%; } .op-launch__actions .op-btn { flex: 1 1 0; justify-content: center; } .op-launch__steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .op-launch__steps::-webkit-scrollbar { display: none; } .op-launch__steps li { flex: none; } .op-win__stage { height: 240px; } .op-win__row { grid-template-columns: minmax(0, 1fr) auto; } .op-win__label { grid-column: 1 / -1; } } /* 2.12.1: sign-in / create-account (narrow pages). The mascot hangs above the card; give the page room so it never slides under the floating header. */ .op-main > article.op-narrowpage { padding-top: calc(var(--bar-h) + var(--space-9) + 24px); } .op-main > article.op-narrowpage > .op-narrowpage__card { margin-top: 0; padding-top: 72px; } .op-narrowpage__mascot { top: -76px; width: 150px; } @media (max-width: 640px) { .op-main > article.op-narrowpage { padding-top: calc(var(--bar-h) + var(--space-8) + 32px); } .op-narrowpage__mascot { top: -64px; width: 124px; } .op-main > article.op-narrowpage > .op-narrowpage__card { padding-top: 44px; } .op-narrowpage__card > .op-h2 { margin-top: 0; } } /* 2.12.3: a long word, link or command in member content (plans, skills, elements) wraps instead of widening the whole page on phones. The main column was an auto grid track, which grows to the widest unbreakable word. */ .op-item__main { grid-template-columns: minmax(0, 1fr); } .op-item__main :where(p, li, dd, blockquote, h2, h3, h4, .op-step__done, .op-step__text, .op-file__note) { overflow-wrap: anywhere; } .op-item__main :where(pre) { max-width: 100%; overflow-wrap: anywhere; } .op-step__done > :not(.op-icon) { min-width: 0; } /* Previews are finished widgets: no text/box selection or focus ring around them. */ .op-stage, .op-stage__frame, .op-tile__stage, .op-tile__stage iframe, .op-stage iframe { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .op-stage iframe, .op-tile__stage iframe { outline: 0; } .op-stage iframe:focus, .op-stage__frame:focus { outline: 0; } /* --------------------------------------------------------------------- * 2.13 Element-library controls used across the site * ------------------------------------------------------------------ */ /* Light / dark switch shows the current mode (icon, plus a label on the phone menu). */ .op-mode .op-mode__sun { display: block; } .op-mode .op-mode__moon { display: none; } :root[data-theme="dark"] .op-mode .op-mode__sun { display: none; } :root[data-theme="dark"] .op-mode .op-mode__moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .op-mode .op-mode__sun { display: none; } :root:not([data-theme="light"]) .op-mode .op-mode__moon { display: block; } } .op-mode__txt { display: none; } .op-nav__row { display: contents; } @media (max-width: 1023px) { .op-bar .op-nav { display: flex; flex-direction: column; } .op-bar .op-nav__end { display: contents; } .op-bar .op-find--menu { order: -2; display: block; } .op-bar .op-nav__list { order: -1; } .op-bar .op-nav__row { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-hbar-line); } .op-bar .op-nav__cta { order: 2; width: 100%; } .op-bar .op-nav__row > * { min-width: 0; } .op-bar .op-mode { width: 100%; height: 48px; min-height: 48px; gap: var(--space-2); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--color-hbar-line); background: var(--color-hbar-hover); color: var(--color-hbar-ink); font-size: var(--text-sm); font-weight: 550; } .op-bar .op-mode .op-mode__sun, .op-bar .op-mode .op-mode__moon { display: none; } :root:not([data-theme="dark"]) .op-bar .op-mode .op-mode__sun { display: inline-flex; } :root[data-theme="dark"] .op-bar .op-mode .op-mode__moon { display: inline-flex; } .op-bar .op-mode .op-mode__txt--l { display: inline; } :root[data-theme="dark"] .op-bar .op-mode .op-mode__txt--l { display: none; } :root[data-theme="dark"] .op-bar .op-mode .op-mode__txt--d { display: inline; } } @media (max-width: 1023px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .op-bar .op-mode .op-mode__sun { display: none; } :root:not([data-theme="light"]) .op-bar .op-mode .op-mode__moon { display: inline-flex; } :root:not([data-theme="light"]) .op-bar .op-mode .op-mode__txt--l { display: none; } :root:not([data-theme="light"]) .op-bar .op-mode .op-mode__txt--d { display: inline; } } .op-bar .op-nav__cta { gap: var(--space-2); } /* Custom dropdown (replaces the browser's own select popup). */ .op-sel { position: relative; display: block; } .op-sel > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .op-sel__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--color-field-edge); border-radius: 12px; background: var(--color-surface); color: var(--color-heading); font: inherit; font-size: 15px; text-align: left; cursor: pointer; box-shadow: 0 1px 2px var(--color-shadow, rgba(16,24,40,.08)) inset; transition: border-color .15s, box-shadow .15s; } .op-sel__btn:hover { border-color: var(--color-primary); } .op-sel__btn:focus-visible, .op-sel.is-open .op-sel__btn { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(22, 89, 245, .22); } .op-sel__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .op-sel__btn::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -3px; border-right: 1.75px solid var(--color-muted); border-bottom: 1.75px solid var(--color-muted); transform: rotate(45deg); transition: transform .18s; } .op-sel.is-open .op-sel__btn::after { transform: rotate(-135deg); margin-top: 3px; } .op-sel.is-disabled .op-sel__btn { opacity: .55; cursor: not-allowed; } .op-filter__sel .op-sel__btn { border-radius: var(--radius-pill, 999px); min-width: 160px; padding: 0 18px; } .op-sel__list { position: fixed; z-index: 100000; display: none; box-sizing: border-box; max-height: 300px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--color-card); border: 1px solid var(--color-border-strong); border-radius: 16px; box-shadow: 0 22px 48px -14px rgba(16, 24, 40, .35), 0 2px 6px rgba(16, 24, 40, .08); } .op-sel__list.is-open { display: block; animation: op-sel-in .14s ease-out; } @keyframes op-sel-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } .op-sel__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--color-text); font-size: 14.5px; cursor: pointer; } .op-sel__opt.is-active { background: var(--color-surface); color: var(--color-heading); } .op-sel__opt[aria-selected="true"] { color: var(--color-primary-text); font-weight: 600; } .op-sel__opt[aria-selected="true"]::after { content: ""; width: 5px; height: 10px; margin-right: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); } .op-sel__opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .op-sel__list.is-open { animation: none; } } /* Checkboxes and radios in site forms. */ .ownly-form input[type="checkbox"], .ownly-form input[type="radio"], .ownly-field input[type="checkbox"], .ownly-field input[type="radio"], .op-kind-pick__opt input[type="radio"], .op-kind-pick__opt input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; width: 20px; height: 20px; margin: 2px 0 0; padding: 0; border: 1.5px solid var(--color-field-edge); border-radius: 6px; background: var(--color-card); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; } .ownly-form input[type="radio"], .ownly-field input[type="radio"], .op-kind-pick__opt input[type="radio"] { border-radius: 50%; } .ownly-form input[type="checkbox"]:checked, .ownly-field input[type="checkbox"]:checked, .op-kind-pick__opt input[type="checkbox"]:checked { background: var(--color-primary); border-color: var(--color-primary); } .ownly-form input[type="checkbox"]:checked::after, .ownly-field input[type="checkbox"]:checked::after, .op-kind-pick__opt input[type="checkbox"]:checked::after { content: ""; width: 5px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-1px, -1px); } .ownly-form input[type="radio"]:checked, .ownly-field input[type="radio"]:checked, .op-kind-pick__opt input[type="radio"]:checked { border-color: var(--color-primary); background: radial-gradient(circle, var(--color-primary) 0 42%, var(--color-card) 46%); } .ownly-form input[type="checkbox"]:focus-visible, .ownly-form input[type="radio"]:focus-visible, .ownly-field input:focus-visible, .op-kind-pick__opt input:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(22, 89, 245, .28); } @media (max-width: 760px) { .op-filter__sel { flex: 1 1 100%; width: 100%; } .op-filter__sel .op-sel__btn { min-width: 0; } } /* --------------------------------------------------------------------- * 2.14 Views, sponsored cards, sponsor page * ------------------------------------------------------------------ */ .op-tile__views { display: inline-flex; align-items: center; gap: 4px; color: var(--color-muted); } .op-tile__views svg { opacity: .8; } /* Sponsored card (side column and library). */ .op-ad { --ad: var(--color-primary); position: relative; display: grid; gap: 8px; justify-items: start; margin-top: var(--space-4); padding: 18px 18px 16px; border: 1px solid var(--color-border); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--ad) 7%, var(--color-card)) 0%, var(--color-card) 70%); color: var(--color-text); box-shadow: 0 1px 2px var(--color-shadow, rgba(16,24,40,.06)); font-size: 14px; line-height: 1.45; text-decoration: none; } .op-ad__tag { font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); } .op-ad__logo { display: block; max-width: 120px; max-height: 36px; width: auto; height: auto; object-fit: contain; } .op-ad__ph { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ad); color: #fff; font-weight: 700; } .op-ad__head { color: var(--color-heading); font-size: 15.5px; line-height: 1.25; font-weight: 650; } .op-ad__body { color: var(--color-muted); } .op-ad__cta { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ad); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; } a.op-ad__cta:hover { filter: brightness(1.08); } .op-ad--free { border-style: dashed; background: transparent; box-shadow: none; } .op-ad--free strong { color: var(--color-heading); } .op-ad--tile { margin: 0; height: 100%; align-content: center; min-height: 280px; padding: 26px; border-radius: 20px; } .op-ad--tile .op-ad__head { font-size: 19px; } .op-ad--demo { margin: 0; } .op-ad--demo .op-ad__cta { pointer-events: none; } /* Sponsor page. */ .op-spnote { margin: var(--space-4) auto 0; max-width: 62ch; color: var(--color-muted); font-size: 13px; text-align: center; } .op-spbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); } .op-spbar [data-sp-terms] { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); } .op-spbar [data-sp-terms] button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--color-muted); font-weight: 550; font-size: 14px; cursor: pointer; } .op-spbar [data-sp-terms] button small { margin-left: 4px; color: var(--color-success); font-weight: 650; } .op-spbar [data-sp-terms] button[aria-pressed="true"] { background: var(--color-card); color: var(--color-heading); box-shadow: 0 1px 2px var(--color-shadow, rgba(16,24,40,.1)), 0 0 0 1px var(--color-border); } .op-spbar__cur { display: flex; align-items: center; gap: 10px; } .op-spbar__cur label { color: var(--color-muted); font-size: 14px; } .op-spbar__cur .op-sel { min-width: 220px; } .op-spbar__cur .op-sel__btn { border-radius: 999px; } .op-tiers--shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; } .op-tiers--shop .op-tier { position: relative; display: flex; flex-direction: column; gap: 6px; } .op-tiers--shop .op-tier > ul { margin: var(--space-3) 0 var(--space-4); } .op-tiers--shop .op-tier .op-btn { margin-top: auto; justify-content: center; } .op-tier.is-pop { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), 0 18px 40px -22px rgba(22, 89, 245, .5); } .op-tier__flag { position: absolute; top: -12px; left: 20px; padding: 3px 12px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 650; } .op-tier__for { margin: 0; color: var(--color-muted); font-size: 14px; } .op-tier__price { display: flex; align-items: baseline; gap: 6px; margin: var(--space-3) 0 0; } .op-tier__price strong { color: var(--color-heading); font-size: clamp(30px, 2.4vw + 14px, 40px); letter-spacing: -.02em; line-height: 1.05; } .op-tier__price span { color: var(--color-muted); font-size: 14px; } .op-tier__bill { margin: 0; color: var(--color-muted); font-size: 13px; min-height: 1.4em; } @media (max-width: 860px) { .op-tiers--shop { grid-template-columns: minmax(0, 1fr); } .op-spbar { justify-content: stretch; } .op-spbar__cur { width: 100%; } .op-spbar__cur .op-sel { flex: 1; min-width: 0; } } /* Placement preview (wireframes). */ .op-spv__tabs { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: var(--space-4); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); } .op-spv__tabs button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--color-muted); font-weight: 550; font-size: 14px; cursor: pointer; } .op-spv__tabs button[aria-selected="true"] { background: var(--color-card); color: var(--color-heading); box-shadow: 0 1px 2px var(--color-shadow, rgba(16,24,40,.1)), 0 0 0 1px var(--color-border); } .op-spv__browser { border: 1px solid var(--color-border-strong); border-radius: 18px; overflow: hidden; background: var(--color-card); box-shadow: 0 24px 60px -34px rgba(16, 24, 40, .45); } .op-spv__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .op-spv__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); } .op-spv__bar span { margin-left: 10px; padding: 3px 14px; border-radius: 999px; background: var(--color-card); color: var(--color-muted); font-size: 12px; } .op-spv__page { padding: 16px; display: grid; gap: 16px; min-height: 340px; align-content: start; } .op-spv__page[hidden] { display: none; } .op-spv__nav { height: 34px; border-radius: 12px; background: #11141b; opacity: .9; } .op-spv__hero { display: grid; gap: 10px; justify-items: center; padding: 22px 0 8px; } .op-spv__hero b { width: 52%; height: 22px; border-radius: 8px; background: var(--color-border-strong); } .op-spv__hero u { width: 34%; height: 12px; border-radius: 6px; background: var(--color-border); } .op-spv__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .op-spv__cards i, .op-spv__grid > i { display: block; min-height: 90px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); } .op-spv__cols { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 16px; } .op-spv__main { display: grid; gap: 12px; align-content: start; } .op-spv__main b { width: 50%; height: 20px; border-radius: 8px; background: var(--color-border-strong); } .op-spv__stage { height: 150px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); } .op-spv__main u, .op-spv__panel u { display: block; height: 10px; border-radius: 6px; background: var(--color-border); } .op-spv__main u:last-child { width: 70%; } .op-spv__side { display: grid; gap: 12px; align-content: start; } .op-spv__panel { display: grid; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-card); } .op-spv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .op-spv__logos { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 8px 0 2px; } .op-spv__logos i { width: 70px; height: 22px; border-radius: 6px; background: var(--color-border); } .op-spv__logos em { display: inline-flex; align-items: center; justify-content: center; max-width: 120px; min-height: 26px; font-style: normal; font-weight: 650; color: var(--color-heading); } .op-spv__logos em img { max-height: 28px; max-width: 120px; object-fit: contain; } .op-spv__zone { position: relative; padding: 24px 12px 12px; border: 2px dashed var(--color-border-strong); border-radius: 16px; opacity: .45; transition: opacity .2s, border-color .2s; } .op-spv__zone.is-on { opacity: 1; border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 4%, transparent); } .op-spv__lab { position: absolute; top: 6px; left: 12px; font-size: 11px; font-weight: 650; letter-spacing: .02em; color: var(--color-primary-text); } .op-spv__zone:not(.is-on) .op-spv__lab::after { content: " · not in this plan"; color: var(--color-muted); font-weight: 500; } @media (max-width: 640px) { .op-spv__cols { grid-template-columns: minmax(0, 1fr); } .op-spv__cards, .op-spv__grid { grid-template-columns: repeat(2, 1fr); } .op-spv__tabs { display: flex; width: 100%; } .op-spv__tabs button { flex: 1; padding: 0 8px; font-size: 13px; } } /* Checkout form. */ .op-spform { max-width: 640px; margin: 0 auto; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-card); box-shadow: 0 24px 60px -36px rgba(16, 24, 40, .35); } .op-spform__f { display: grid; gap: var(--space-3); } .op-spform__sel { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--color-surface); color: var(--color-muted); font-size: 14px; } .op-spform__sel strong { color: var(--color-heading); } .op-spform__adonly { display: grid; gap: var(--space-3); } .op-spform__adonly[hidden] { display: none; } .op-spform__row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: var(--space-3); } .op-spform input[type="color"] { width: 100%; min-height: 46px; padding: 4px; border-radius: 12px; border: 1px solid var(--color-field-edge); background: var(--color-card); cursor: pointer; } .op-spform input[type="file"] { padding: 10px; } .op-spform__err { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fdecec; color: #a11a1a; font-size: 14px; } .op-spform__err[hidden], .op-spform__done[hidden], .op-spform__f[hidden] { display: none; } .op-spcoupon[hidden] { display: none; } .op-spcoupon__in { display: flex; gap: 8px; align-items: stretch; } .op-spcoupon__in input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .04em; } .op-spcoupon__msg { margin: 8px 0 0; font-size: 14px; color: var(--color-muted); } .op-spcoupon__msg[hidden] { display: none; } .op-spcoupon__msg.is-ok { color: #11794a; } .op-spcoupon__msg.is-bad { color: #a11a1a; } .op-spform__sel s { opacity: .6; margin-right: 4px; } .op-spform__done { text-align: center; padding: var(--space-5) 0; } .op-spcontact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; } .op-spcontact p { margin: 0; color: var(--color-text); } /* --------------------------------------------------------------------- * 2.14.1 Sponsor preview v2: brand builder, desktop / phone mock pages * ------------------------------------------------------------------ */ .op-spb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4); align-items: start; margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-card); } .op-spb__drop { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 2px dashed var(--color-border-strong); border-radius: 18px; cursor: pointer; transition: border-color .15s, background .15s; } .op-spb__drop:hover, .op-spb__logo:focus-within .op-spb__drop { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 4%, transparent); } .op-spb__thumb { flex: none; display: grid; place-items: center; width: 96px; height: 72px; border-radius: 14px; background: var(--color-surface); color: var(--color-muted); font-size: 28px; overflow: hidden; } .op-spb__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .op-spb__drop strong { display: block; color: var(--color-heading); } .op-spb__drop small { display: block; margin-top: 2px; color: var(--color-muted); font-size: 13px; line-height: 1.4; } .op-spb__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .op-spb__logo { position: relative; } .op-spb__fields, .op-spb__ad { display: grid; gap: var(--space-3); } .op-spb__ad[hidden] { display: none; } .op-spnote--l { text-align: left; margin: 0; max-width: none; } .op-spv__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .op-spv__tools .op-spv__tabs { margin: 0; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .op-spv__tools .op-spv__tabs::-webkit-scrollbar { display: none; } .op-spv__tabs button { white-space: nowrap; } .op-spv__dev { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); } .op-spv__dev button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--color-muted); font-weight: 550; font-size: 14px; cursor: pointer; } .op-spv__dev button[aria-pressed="true"] { background: var(--color-card); color: var(--color-heading); box-shadow: 0 1px 2px var(--color-shadow, rgba(16,24,40,.1)), 0 0 0 1px var(--color-border); } .op-spv__legend { margin: 0 0 var(--space-3); color: var(--color-muted); font-size: 14px; } .op-spv__legend strong { color: var(--color-heading); } .op-spv__browser { max-width: 100%; margin: 0 auto; transition: max-width .25s ease; } .op-spv.is-m .op-spv__browser { max-width: 390px; border-radius: 34px; border-width: 8px; border-color: #14171f; } .op-spv.is-m .op-spv__bar { padding: 8px 12px; } .op-spv.is-m .op-spv__bar i { display: none; } .op-spv.is-m .op-spv__bar span { margin: 0 auto; } .op-spv__nav { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 14px; border-radius: 14px; background: #11141b; } .op-spv__nav b { width: 90px; height: 14px; border-radius: 6px; background: #3b82f6; margin-right: auto; } .op-spv__nav u { width: 40px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); } .op-spv__nav s { width: 66px; height: 22px; border-radius: 999px; background: #fff; } .op-spv.is-m .op-spv__nav u { display: none; } .op-spv__hero { display: grid; gap: 10px; justify-items: center; padding: 18px 0 4px; } .op-spv__hero b { width: 58%; height: 20px; border-radius: 8px; background: var(--color-border-strong); } .op-spv__hero b + b { width: 40%; } .op-spv__hero u { width: 44%; height: 10px; border-radius: 6px; background: var(--color-border); } .op-spv__pills { display: flex; gap: 8px; margin-top: 4px; } .op-spv__pills i { width: 90px; height: 28px; border-radius: 999px; background: var(--color-border-strong); } .op-spv__pills i:first-child { background: #3b82f6; } .op-spv__head { display: grid; gap: 8px; justify-items: start; } .op-spv__head b { width: 30%; min-width: 110px; height: 20px; border-radius: 8px; background: var(--color-border-strong); } .op-spv__head u { width: 50%; height: 10px; border-radius: 6px; background: var(--color-border); } .op-spv__filter { display: flex; gap: 8px; } .op-spv__filter i { flex: 1; height: 34px; border-radius: 999px; border: 1px solid var(--color-border-strong); } .op-spv__filter em { width: 70px; height: 34px; border-radius: 999px; background: #3b82f6; } .op-spv__stage span { display: block; width: 90px; height: 90px; margin: 30px auto; border-radius: 22px; background: var(--color-border-strong); } .op-spv__code { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #11141b; } .op-spv__code u { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .2); } .op-spv__code u:nth-child(2) { width: 70%; } .op-spv__code u:nth-child(3) { width: 85%; } .op-spv__code u:nth-child(4) { width: 50%; } .op-spv__steps { display: grid; gap: 10px; } .op-spv__steps i { display: block; height: 58px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); } .op-spv__sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .op-spv__scard { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 130px; padding: 14px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-muted); font-size: 12px; text-align: center; } .op-spv__scard--you { color: var(--color-heading); border-color: var(--color-primary); } .op-spv__scard small { color: var(--color-muted); } .op-spv__scard strong { font-size: 14px; } .op-spv__scard [data-ad-logo] { display: grid; place-items: center; min-height: 52px; } /* Your logo inside the mock pages: big enough to read on every screen. */ .op-spv__cell, .op-spv__scard [data-ad-logo] { color: var(--color-heading); } .op-spv__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 6px 0 0; } .op-spv__cell { display: grid; place-items: center; min-height: 76px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-card); font-size: 12px; color: var(--color-muted); text-align: center; } .op-spv__cell--you { border-color: var(--color-primary); color: var(--color-heading); } .op-spv__cell--open { border-style: dashed; } .op-spv__cell img, .op-spv__scard [data-ad-logo] img { display: block; max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; } .op-spv__ph { font-weight: 700; font-size: 15px; line-height: 1.2; word-break: break-word; } .op-spv.is-m .op-spv__cell img, .op-spv.is-m .op-spv__scard [data-ad-logo] img { max-height: 40px; } /* Phone mode: one column, like the real site. */ .op-spv.is-m .op-spv__page { padding: 12px; gap: 12px; } .op-spv.is-m .op-spv__cols { grid-template-columns: minmax(0, 1fr); } .op-spv.is-m .op-spv__cards, .op-spv.is-m .op-spv__grid, .op-spv.is-m .op-spv__sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-spv.is-m .op-spv__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-spv.is-m .op-spv__grid .op-spv__zone { grid-column: 1 / -1; } .op-spv.is-m .op-spv__sgrid .op-spv__scard--you { grid-column: 1 / -1; } .op-spv.is-m .op-spv__zone { padding: 22px 8px 8px; } /* Bigger logos in the live ads and the Sponsored-by row. */ .op-ad__logo { max-width: 180px; max-height: 52px; } .op-ad--tile .op-ad__logo { max-width: 220px; max-height: 72px; } .op-ad__ph { width: 52px; height: 52px; border-radius: 14px; font-size: 20px; } .op-sp { min-height: 80px; } .op-sp .op-sp__logo, .op-sp__logo { max-height: 48px; max-width: 100%; width: auto; } .op-spgrid .op-sp__logo { max-height: 64px; max-width: 200px; } @media (max-width: 640px) { .op-sp { min-height: 72px; } .op-sp__logo { max-height: 42px; } .op-ad__logo { max-height: 48px; } } @media (max-width: 860px) { .op-spb { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .op-spv__dev { display: none; } .op-spv__browser { border-radius: 30px; border-width: 8px; border-color: #14171f; } .op-spv__tools .op-spv__tabs { width: 100%; } .op-spv__tools .op-spv__tabs button { flex: none; } } .op-spnote.op-spnote--l { text-align: left; } /* --------------------------------------------------------------------- * 2.15 Policy pages * ------------------------------------------------------------------ */ .op-legalhero { padding-bottom: var(--space-4); } .op-legalhero__meta { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: 14px; } .op-legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-6); align-items: start; padding-top: var(--space-5); padding-bottom: var(--space-9); } .op-legal__side { position: sticky; top: 104px; display: grid; gap: var(--space-4); } .op-legal__h { margin: 0 0 8px; color: var(--color-muted); font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } .op-legal__side ol, .op-legal__side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; } .op-legal__side ol { counter-reset: t; } .op-legal__side li a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; color: var(--color-text); font-size: 14px; line-height: 1.35; text-decoration: none; } .op-legal__toc li a::before { counter-increment: t; content: counter(t); flex: none; width: 20px; color: var(--color-muted); font-variant-numeric: tabular-nums; } .op-legal__side li a:hover { background: var(--color-surface); color: var(--color-heading); } .op-legal__more li a[aria-current="page"] { background: var(--color-primary-light); color: var(--color-primary-text); font-weight: 600; } .op-legal__body { min-width: 0; padding: clamp(20px, 4vw, 44px); border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-card); box-shadow: 0 24px 60px -40px rgba(16, 24, 40, .25); } .op-legal__prose { max-width: 70ch; counter-reset: h; color: var(--color-text); font-size: 16px; line-height: 1.75; } .op-legal__prose > :first-child { margin-top: 0; } .op-legal__prose h2 { display: flex; gap: 12px; align-items: baseline; margin: 2.2em 0 .6em; padding-top: 1.2em; border-top: 1px solid var(--color-border); color: var(--color-heading); font-size: clamp(19px, 1vw + 15px, 24px); line-height: 1.25; letter-spacing: -.01em; scroll-margin-top: 110px; } .op-legal__prose h2::before { counter-increment: h; content: counter(h); display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--color-primary-light); color: var(--color-primary-text); font-size: 14px; font-weight: 650; } .op-legal__prose h2:first-of-type { margin-top: 1.4em; } .op-legal__prose h3 { margin: 1.6em 0 .4em; color: var(--color-heading); font-size: 17px; } .op-legal__prose p { margin: 0 0 1em; } .op-legal__prose ul, .op-legal__prose ol { margin: 0 0 1.2em; padding-left: 1.3em; } .op-legal__prose li { margin: .35em 0; padding-left: .2em; } .op-legal__prose li::marker { color: var(--color-primary); } .op-legal__prose a { color: var(--color-primary-text); text-decoration: underline; text-underline-offset: 3px; } .op-legal__prose strong { color: var(--color-heading); } .op-callout { margin: 0 0 1.8em; padding: 18px 20px; border: 1px solid var(--color-primary-light); border-left: 4px solid var(--color-primary); border-radius: 14px; background: var(--color-primary-soft); } .op-callout > strong { display: block; margin-bottom: 6px; color: var(--color-heading); } .op-callout ul { margin: 0; } .op-legal__prose table { width: 100%; margin: 0 0 1.4em; border-collapse: collapse; font-size: 15px; } .op-legal__prose th, .op-legal__prose td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; } .op-legal__prose th { color: var(--color-heading); background: var(--color-surface); } .op-legal__help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 2.4em; padding: 20px 22px; border-radius: 18px; background: var(--color-surface); } .op-legal__help strong { display: block; color: var(--color-heading); } .op-legal__help span { color: var(--color-muted); font-size: 14px; } @media (max-width: 960px) { .op-legal { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .op-legal__side { position: static; } .op-legal__more { display: none; } .op-legal__toc { padding: 14px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-card); } .op-legal__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .op-legal__toc ol { grid-template-columns: minmax(0, 1fr); } .op-legal__body { border-radius: 18px; } .op-legal__prose { font-size: 15.5px; } } /* Open sponsor spot: skeleton card with a plus button. */ .op-ad--free { text-decoration: none; color: var(--color-text); border: 1.5px dashed var(--color-border-strong); background: transparent; box-shadow: none; gap: 12px; transition: border-color .15s, background .15s; } .op-ad--free:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 4%, transparent); } .op-ad__skel { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 10px 10px; gap: 8px 12px; width: 100%; align-items: center; } .op-ad__skel i { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; } .op-ad__skel b, .op-ad__skel u { display: block; height: 10px; border-radius: 6px; } .op-ad__skel u { width: 65%; } .op-ad__skel i, .op-ad__skel b, .op-ad__skel u { background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-border) 50%, var(--color-surface) 100%); background-size: 200% 100%; } @media (prefers-reduced-motion: no-preference) { .op-ad__skel i, .op-ad__skel b, .op-ad__skel u { animation: op-skel 1.8s ease-in-out infinite; } } @keyframes op-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } } .op-ad__open { display: flex; align-items: center; gap: 10px; } .op-ad__open strong { display: block; color: var(--color-heading); font-size: 14px; } .op-ad__open small { display: block; color: var(--color-muted); font-size: 12.5px; } .op-ad__plus { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 20px; line-height: 1; box-shadow: var(--shadow-blue, none); transition: transform .15s; } .op-ad--free:hover .op-ad__plus { transform: scale(1.1) rotate(90deg); } .op-ad--free.op-ad--tile { align-content: center; gap: 18px; } .op-ad--free.op-ad--tile .op-ad__skel { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 12px 12px; } .op-ad--free.op-ad--tile .op-ad__skel i { width: 56px; height: 56px; border-radius: 16px; grid-row: 1 / 3; } /* In-feed and wide sponsored cards. */ .op-grid > .op-ad--tile, .op-tiles > li > .op-ad--tile { min-height: 0; height: 100%; } .op-ad--wide { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; justify-content: space-between; margin: var(--space-6) 0 0; padding: 18px 22px; width: 100%; } .op-ad--wide .op-ad__tag { flex-basis: 100%; } .op-ad--wide .op-ad__logo { max-height: 44px; } .op-ad--wide .op-ad__head { flex: 1 1 240px; } .op-ad--wide .op-ad__body { flex: 2 1 260px; } .op-ad--wide.op-ad--free { flex-wrap: nowrap; } .op-ad--wide.op-ad--free .op-ad__tag { position: absolute; top: 8px; left: 22px; flex-basis: auto; } .op-ad--wide.op-ad--free { padding-top: 30px; } .op-ad--wide .op-ad__skel { max-width: 340px; flex: 1 1 auto; } .op-ad--wide .op-ad__open { flex: none; } @media (max-width: 640px) { .op-ad--wide.op-ad--free { flex-wrap: wrap; } } /* Related resources (internal links) */ .op-related { padding-block: var(--space-xl); } .op-related .op-h3 { margin-bottom: var(--space-md); } /* Single sponsor: plain card, "Sponsor" tag in the corner. */ .op-ad--plain { position: relative; } .op-ad--plain .op-ad__tag { position: absolute; top: 12px; right: 14px; } .op-ad--plain .op-ad__name { font-size: 20px; font-weight: 700; color: var(--color-heading); letter-spacing: -.01em; padding-right: 64px; } /* Sponsors page: tier rows (logo slots + plan), brand details. */ .op-trows { display: grid; gap: var(--space-4); } .op-trow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-border); border-radius: 20px; box-shadow: var(--shadow-card); } .op-trow--gold { border-color: color-mix(in srgb, #d4a017 55%, var(--color-border)); background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, #f5c542 14%, transparent), transparent 60%), var(--color-card); box-shadow: 0 0 0 1px color-mix(in srgb, #f5c542 22%, transparent), 0 18px 40px -24px color-mix(in srgb, #d4a017 60%, transparent); } .op-trow__info { display: flex; flex-direction: column; gap: 6px; } .op-trow__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .op-trow__head h3 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--color-heading); } .op-trow__badge { padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #f7d56b, #d4a017); color: #3b2a00; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .op-trow__perks { display: grid; gap: 8px; margin: var(--space-3) 0 var(--space-4); padding: 0; list-style: none; } .op-trow__perks li { display: flex; gap: 8px; color: var(--color-text); font-size: 14px; line-height: 1.5; } .op-trow__perks .op-icon { flex: none; margin-top: 3px; color: var(--color-ok, #16a34a); } .op-trow__info .op-btn { margin-top: auto; align-self: flex-start; } .op-trow__slots { display: flex; flex-direction: column; gap: 12px; } .op-trow__count { margin: 0; color: var(--color-muted); font-size: 13px; } .op-trow__count strong { color: var(--color-heading); } .op-trow__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; flex: 1; align-content: start; } .op-trow--community .op-trow__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .op-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; min-height: 96px; padding: 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: var(--color-heading); font: inherit; text-align: center; text-decoration: none; } .op-slot--on { background: var(--color-card); font-weight: 650; transition: border-color .15s, transform .15s; } .op-slot--on:hover { border-color: var(--color-primary); transform: translateY(-1px); } .op-slot__logo { max-width: 100%; max-height: 44px; width: auto; object-fit: contain; } .op-slot--open { border: 1.5px dashed var(--color-border-strong, var(--color-border)); background: transparent; color: var(--color-muted); font-size: 13.5px; cursor: pointer; transition: border-color .15s, color .15s; } .op-slot--open small { color: var(--color-muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; } .op-slot--open:hover { border-color: var(--color-primary); color: var(--color-heading); } .op-trow--gold .op-slot--on { min-height: 120px; border-color: color-mix(in srgb, #d4a017 50%, var(--color-border)); } .op-spb--start { margin-bottom: var(--space-5); } @media (max-width: 860px) { .op-trow { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); } .op-trow--community .op-trow__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Picked for you (home). */ .op-foryou { padding-top: var(--space-5); } .op-foryou__invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: 22px; background: radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 60%), var(--color-card); } .op-foryou__invite h2 { margin: 0 0 4px; } .op-foryou__invite p { margin: 0; color: var(--color-muted); max-width: 52ch; } .op-foryou__more { display: flex; justify-content: center; margin-top: var(--space-5); } .op-why { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .op-why span { padding: 2px 9px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-muted); font-size: 12px; } .op-why span::before { content: "\2713\00a0"; color: var(--color-primary-text); font-weight: 700; } /* Plan preview video */ .op-pvid{margin:0 0 28px} .op-pvid__win{position:relative;border-radius:16px;overflow:hidden;background:#0b0b12;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -28px rgba(80,60,255,.45),0 12px 30px -16px rgba(0,0,0,.6)} .op-pvid__bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:linear-gradient(#171722,#12121b);border-bottom:1px solid rgba(255,255,255,.07)} .op-pvid__bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.op-pvid__bar i:nth-child(2){background:#febc2e}.op-pvid__bar i:nth-child(3){background:#28c840} .op-pvid__bar span{margin:0 auto;padding:4px 16px;border-radius:8px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.02em} .op-pvid__bar b{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.14em;color:#ff6b81;font-weight:700} .op-pvid__bar u{width:7px;height:7px;border-radius:50%;background:#ff4d6a;box-shadow:0 0 8px #ff4d6a;animation:op-live 1.4s ease-in-out infinite} @keyframes op-live{50%{opacity:.35}} .op-pvid__screen{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer} .op-pvid video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none} .op-pvid .op-muted{margin:10px 2px 0;font-size:13px} .op-card__vid{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:10px;margin-bottom:12px;background:#0b0b10} .op-card__vid video{width:100%;height:100%;object-fit:cover;display:block} .op-card__play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px)}