/* ── shared/real-figures.css ── */ /* Shared by every guide that shows captures of the real tool (a guide opts in with sharedCss: ['real-figures']). Both themes are served by the picture pair real() writes (img.is-dark / img.is-light, hidden by guide.css); this file only frames the picture, and the frame follows the theme through tokens. */ /* A capture of the real tool. The frame is the tool's own page colour in each theme, so the capture's edge never reads as a box inside a box: near-black behind the dark capture, white behind the light one. */ :root { --real-frame: #0A0A0A; } :root[data-theme="light"] { --real-frame: #FFFFFF; } .ocv-real { margin: 28px 0; padding: 0; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--real-frame); overflow: hidden; } .ocv-real__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); background: rgba(var(--ink-rgb), 0.03); } .ocv-real__tag { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sahi-cyan, #5ACFE0); } .ocv-real__label { font-size: 0.9rem; font-weight: 600; color: var(--text-1); } .ocv-real__shot { display: flex; justify-content: center; padding: 18px 16px; overflow-x: auto; } .ocv-real__shot img { display: block; width: var(--real-w); max-width: 100%; height: auto; border-radius: 6px; } .ocv-real__cap { padding: 0 18px 16px; font-size: 0.88rem; line-height: 1.5; color: var(--text-3); text-align: center; } .ocv-real__cap strong { color: var(--text-2); } /* Two or more captures side by side (a cell in Simple against Advanced, Call against Put) */ .ocv-real-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 28px 0; } .ocv-real-row > .ocv-real { margin: 0; } /* ── shared/real-cells.css ── */ /* GENERATED by scripts/guides/cells/build-cell-css.mjs from the app's own cell styles. Do not edit by hand. */ /* colour tokens (src/styles/sahi-colour-system.css), scoped to the specimens */ .ocs-tokens { --capital-purple: #66033c; --capital-black: #0f0f0f; --capital-white: #ffffff; --capital-spring-wood: #f9f6f1; --switch-on-fill: var(--brand-700); --switch-on-thumb: var(--capital-white); --status-badge-fill: var(--capital-purple); --status-badge-text: var(--capital-white); --brand-50: #fef1fa; --brand-100: #fde6f7; --brand-200: #feccf1; --brand-300: #fea3e5; --brand-400: #fc6ad0; --brand-500: #e61c9a; --brand-600: #c80e7d; --brand-700: #a50f66; --brand-800: #8a1157; --brand-900: #66033c; --brand-950: #3d0920; --brand-1000: #15020b; --warm-50: #f9f6f1; --warm-100: #ede5d8; --warm-200: #d9c9ae; --warm-300: #c5aa84; --warm-400: #b89367; --warm-500: #ac7c54; --warm-600: #976448; --warm-700: #835241; --warm-800: #694137; --warm-900: #573730; --warm-950: #301c18; --error-50: #fdf3f3; --error-100: #fce5e4; --error-200: #fad0ce; --error-300: #f6aeab; --error-400: #ee807b; --error-500: #e35650; --error-600: #c4342e; --error-700: #ae2c27; --error-800: #902824; --error-900: #782724; --error-950: #41100e; --success-50: #eefdf5; --success-100: #dafeec; --success-200: #b5f5d6; --success-300: #7dedb7; --success-400: #40e897; --success-500: #1fbf74; --success-600: #08955a; --success-650: #0e854d; --success-700: #116a40; --success-800: #0d5634; --success-900: #0a3f27; --success-950: #02311d; --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e6e6e6; --neutral-225: #e2e2e2; --neutral-300: #d3d3d3; --neutral-400: #a3a3a3; --neutral-450: #8c8c8c; --neutral-500: #727272; --neutral-525: #6e6e6e; --neutral-550: #5f5f5f; --neutral-600: #535353; --neutral-700: #404040; --neutral-740: #383838; --neutral-760: #333333; --neutral-800: #272727; --neutral-825: #242424; --neutral-850: #1f1f1f; --neutral-900: #1a1a1a; --neutral-910: #171717; --neutral-950: #0f0f0f; --neutral-975: #0a0a0a; --neutral-1000: #000000; --bg: var(--neutral-1000); --bg-subtle: var(--neutral-900); --bg-sunken: var(--neutral-1000); --surface: var(--neutral-910); --surface-raised: var(--neutral-825); --surface-high: var(--neutral-800); --table-head-surface: var(--neutral-825); --table-body-surface: var(--surface); --table-hover-surface: color-mix(in srgb, var(--neutral-50) 5%, var(--surface)); --text: var(--neutral-50); --text-muted: var(--neutral-400); --text-subtle: var(--neutral-450); --text-inverse: var(--capital-black); --line: var(--neutral-760); --line-strong: var(--neutral-600); --hairline: var(--neutral-760); --hairline-hover: color-mix(in srgb, var(--line-strong) 62%, var(--text)); --accent: var(--brand-600); --accent-hover: var(--brand-500); --accent-text: var(--brand-300); --accent-ring: var(--accent-hover); --accent-wash: color-mix(in srgb, var(--capital-purple) 22%, transparent); --cta-fill: var(--capital-white); --cta-text: var(--capital-black); --hover-wash: color-mix(in srgb, var(--neutral-50) 7%, transparent); --press-wash: color-mix(in srgb, var(--neutral-50) 12%, transparent); --selection-fill: var(--capital-white); --selection-text: var(--capital-black); --selection-track: var(--surface); --selection-ink: var(--text); --selection-wash: color-mix(in srgb, var(--text) 10%, var(--surface)); --selection-line: color-mix(in srgb, var(--text) 45%, var(--line)); --buy-fill: var(--success-650); --sell-fill: var(--error-600); --up: var(--success-400); --down: var(--error-400); --candle-up: var(--success-500); --candle-down: var(--error-500); --vol-up: var(--success-800); --vol-down: var(--error-800); --series-1: var(--neutral-50); --series-2: var(--brand-500); --series-3: var(--neutral-500); --attentive: var(--warm-300); --warning-surface: color-mix(in srgb, var(--warm-900) 28%, transparent); --warning-border: var(--warm-900); --warning-text: var(--warm-300); --nav-active-fill: var(--capital-white); --nav-active-text: var(--capital-black); --shadow-0: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-4: 0 12px 32px rgba(0, 0, 0, 0.65), 0 4px 8px rgba(0, 0, 0, 0.45); --shadow-5: 0 24px 64px rgba(0, 0, 0, 0.72), 0 8px 16px rgba(0, 0, 0, 0.5); color-scheme: dark; } :root[data-theme="dark"] .ocs-tokens { --capital-black: var(--neutral-950); --bg: var(--neutral-1000); --bg-subtle: var(--neutral-900); --bg-sunken: var(--neutral-1000); --surface: var(--neutral-910); --surface-raised: var(--neutral-825); --surface-high: var(--neutral-800); --text: var(--neutral-50); --text-muted: var(--neutral-400); --text-subtle: var(--neutral-450); --text-inverse: var(--capital-black); --line: var(--neutral-760); --line-strong: var(--neutral-600); --hairline: var(--neutral-760); --hairline-hover: color-mix(in srgb, var(--line-strong) 62%, var(--text)); --accent: var(--brand-600); --accent-hover: var(--brand-500); --accent-text: var(--brand-300); --accent-ring: var(--accent-hover); --accent-wash: color-mix(in srgb, var(--capital-purple) 22%, transparent); --cta-fill: var(--capital-white); --cta-text: var(--capital-black); --hover-wash: color-mix(in srgb, var(--neutral-50) 7%, transparent); --press-wash: color-mix(in srgb, var(--neutral-50) 12%, transparent); --buy-fill: var(--success-650); --sell-fill: var(--error-600); --up: var(--success-400); --down: var(--error-400); --candle-up: var(--success-500); --candle-down: var(--error-500); --vol-up: var(--success-800); --vol-down: var(--error-800); --series-1: var(--neutral-50); --series-2: var(--brand-500); --series-3: var(--neutral-500); --attentive: var(--warm-300); --warning-surface: color-mix(in srgb, var(--warm-900) 28%, transparent); --warning-border: var(--warm-900); --warning-text: var(--warm-300); --nav-active-fill: var(--capital-white); --nav-active-text: var(--capital-black); --shadow-0: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-4: 0 12px 32px rgba(0, 0, 0, 0.65), 0 4px 8px rgba(0, 0, 0, 0.45); --shadow-5: 0 24px 64px rgba(0, 0, 0, 0.72), 0 8px 16px rgba(0, 0, 0, 0.5); color-scheme: dark; } :root[data-theme="light"] .ocs-tokens { --bg: var(--capital-white); --bg-subtle: var(--neutral-100); --bg-sunken: var(--neutral-100); --surface: var(--capital-white); --surface-raised: var(--capital-white); --surface-high: var(--capital-white); --table-head-surface: var(--neutral-100); --selection-fill: var(--capital-black); --selection-text: var(--capital-white); --selection-track: var(--neutral-100); --table-body-surface: var(--capital-white); --table-hover-surface: color-mix(in srgb, var(--capital-black) 5%, var(--capital-white)); --text: var(--capital-black); --text-muted: var(--neutral-600); --text-subtle: var(--neutral-525); --text-inverse: var(--capital-white); --line: var(--neutral-225); --line-strong: var(--neutral-300); --hairline: var(--neutral-200); --hairline-hover: color-mix(in srgb, var(--line-strong) 55%, var(--text)); --accent: var(--capital-purple); --accent-hover: var(--brand-800); --accent-text: var(--capital-purple); --accent-ring: var(--accent); --accent-wash: var(--brand-50); --cta-fill: var(--capital-black); --cta-text: var(--capital-white); --hover-wash: color-mix(in srgb, var(--capital-black) 5%, transparent); --press-wash: color-mix(in srgb, var(--capital-black) 9%, transparent); --buy-fill: var(--success-700); --sell-fill: var(--error-600); --switch-on-fill: var(--capital-purple); --up: var(--success-600); --down: var(--error-600); --candle-up: var(--success-500); --candle-down: var(--error-600); --vol-up: var(--success-200); --vol-down: var(--error-200); --series-1: var(--capital-black); --series-2: var(--capital-purple); --series-3: var(--neutral-500); --attentive: var(--warm-600); --warning-surface: var(--warm-100); --warning-border: var(--warm-200); --warning-text: var(--warm-800); --nav-active-fill: var(--capital-black); --nav-active-text: var(--capital-white); --up-ink: var(--success-700); --down-ink: var(--error-700); --shadow-0: 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-1: 0 1px 3px rgba(15, 15, 15, 0.06), 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-2: 0 4px 12px rgba(15, 15, 15, 0.07), 0 1px 3px rgba(15, 15, 15, 0.04); --shadow-3: 0 8px 24px rgba(15, 15, 15, 0.09), 0 2px 6px rgba(15, 15, 15, 0.04); --shadow-4: 0 12px 32px rgba(15, 15, 15, 0.11), 0 4px 8px rgba(15, 15, 15, 0.05); --shadow-5: 0 24px 64px rgba(15, 15, 15, 0.17), 0 8px 16px rgba(15, 15, 15, 0.06); color-scheme: light; } .ocs-tokens { --bg-base: var(--bg); --bg-surface: var(--surface); --bg-glass: color-mix(in srgb, var(--surface) 82%, transparent); --text-primary: var(--text); --text-secondary: var(--text-muted); --accent-primary: var(--accent); --accent-bullish: var(--up); --accent-bearish: var(--down); --border-color: var(--line); --atm-hue: var(--text-muted); --bg1: var(--bg); --bg2: var(--bg-subtle); --bg3: var(--bg-sunken); --bg-card: var(--surface-raised); --bg-panel: var(--surface); --bg-input: var(--surface); --panel: var(--surface); --panel-2: var(--surface-raised); --surface2: var(--surface-raised); --surface3: var(--surface-high); --surface-hover: var(--hover-wash); --popbg: var(--surface-high); --terminal-panel: var(--surface); --terminal-panel-strong: var(--surface-high); --terminal-panel-soft: var(--bg-subtle); --terminal-divider: var(--line); --border: var(--line); --border2: var(--line-strong); --border-hover: var(--line-strong); --line2: var(--line-strong); --line-2: var(--line-strong); --text1: var(--text); --text2: var(--text-muted); --text3: var(--text-subtle); --text4: var(--text-subtle); --text-primary: var(--text); --text-heading: var(--text); --ink: var(--text); --ink-2: var(--text-muted); --muted: var(--text-muted); --sub: var(--text-muted); --faint: var(--text-subtle); --sahi-bg-0: var(--bg); --sahi-bg-1: var(--bg-subtle); --sahi-bg-2: var(--bg-sunken); --sahi-surface-1: var(--surface); --sahi-surface-2: var(--surface-raised); --sahi-surface-3: var(--surface-high); --sahi-border-soft: var(--line); --sahi-border-strong: var(--line-strong); --sahi-text-1: var(--text); --sahi-text-2: var(--text-muted); --sahi-text-3: var(--text-subtle); --sahi-accent: var(--accent); --sahi-accent-2: var(--accent-hover); --sahi-positive: var(--up); --sahi-positive-strong: var(--up); --sahi-negative: var(--down); --sahi-negative-strong: var(--down); --sahi-attentive: var(--attentive); --sahi-oi-call: var(--down); --sahi-oi-call-ink: var(--down-ink); --sahi-oi-put: var(--up); --sahi-oi-put-ink: var(--up-ink); --sahi-purple: var(--accent-text); --sahi-prototype-purple: var(--accent); --sahi-prototype-lavender: var(--series-3); --sahi-prototype-green: var(--up); --sahi-prototype-red: var(--down); --sahi-prototype-amber: var(--attentive); --sahi-prototype-cyan: var(--up); --sahi-prototype-white: var(--capital-white); --sahi-prototype-panel: var(--bg-subtle); --sahi-prototype-panel-2: var(--bg-sunken); --sahi-prototype-line: var(--line); --sahi-prototype-line-2: var(--line-strong); --sahi-prototype-ink: var(--text); --sahi-prototype-ink-2: var(--text-muted); --sahi-prototype-muted: var(--text-subtle); --positive: var(--up); --negative: var(--down); --green: var(--up); --red: var(--down); --yellow: var(--attentive); --blue: var(--accent-text); --cyan: var(--accent-text); --teal: var(--up); --purple: var(--accent-text); --pink: var(--accent-text); --orange: var(--attentive); --brand: var(--accent); --brand2: var(--accent-hover); --brand-purple: var(--accent-text); --brand-coral: var(--attentive); --up-ink: var(--up); --down-ink: var(--down); --upbg: color-mix(in srgb, var(--up) 12%, transparent); --dnbg: color-mix(in srgb, var(--down) 12%, transparent); --green-bg: color-mix(in srgb, var(--up) 12%, transparent); --red-bg: color-mix(in srgb, var(--down) 12%, transparent); --yellow-bg: color-mix(in srgb, var(--attentive) 14%, transparent); --blue-bg: var(--accent-wash); --purple-bg: var(--accent-wash); --surface-transparent-positive-primary: color-mix( in srgb, var(--up) 12%, transparent ); --surface-transparent-negative-primary: color-mix( in srgb, var(--down) 12%, transparent ); --toast-neutral-bg: var(--bg-subtle); --toast-neutral-border: var(--line); --toast-neutral-text: var(--text); --toast-positive-bg: color-mix(in srgb, var(--up) 12%, transparent); --toast-positive-border: color-mix(in srgb, var(--up) 34%, transparent); --toast-positive-text: var(--up); --toast-negative-bg: color-mix(in srgb, var(--down) 12%, transparent); --toast-negative-border: color-mix(in srgb, var(--down) 34%, transparent); --toast-negative-text: var(--down); --toast-attentive-bg: color-mix(in srgb, var(--attentive) 14%, transparent); --toast-attentive-border: color-mix( in srgb, var(--attentive) 34%, transparent ); --toast-attentive-text: var(--attentive); --components-toasts-Neutral-bg: var(--toast-neutral-bg); --components-toasts-Neutral-border: var(--toast-neutral-border); --components-toasts-Neutral-surface: var(--toast-neutral-bg); --components-toasts-Neutral-surface-L1: var(--toast-neutral-bg); --components-toasts-Neutral-stroke: var(--toast-neutral-border); --components-toasts-Neutral-stroke-L1: var(--toast-neutral-border); --components-toasts-Neutral-text: var(--toast-neutral-text); --components-toasts-Neutral-icon: var(--toast-neutral-text); --components-toasts-positive-bg: var(--toast-positive-bg); --components-toasts-positive-border: var(--toast-positive-border); --components-toasts-positive-surface: var(--toast-positive-bg); --components-toasts-positive-surface-L1: var(--toast-positive-bg); --components-toasts-positive-stroke: var(--toast-positive-border); --components-toasts-positive-stroke-L1: var(--toast-positive-border); --components-toasts-positive-text: var(--toast-positive-text); --components-toasts-positive-icon: var(--toast-positive-text); --components-toasts-negative-bg: var(--toast-negative-bg); --components-toasts-negative-border: var(--toast-negative-border); --components-toasts-negative-surface: var(--toast-negative-bg); --components-toasts-negative-surface-L1: var(--toast-negative-bg); --components-toasts-negative-stroke: var(--toast-negative-border); --components-toasts-negative-stroke-L1: var(--toast-negative-border); --components-toasts-negative-text: var(--toast-negative-text); --components-toasts-negative-icon: var(--toast-negative-text); --components-toasts-Attentive-bg: var(--toast-attentive-bg); --components-toasts-Attentive-border: var(--toast-attentive-border); --components-toasts-Attentive-surface: var(--toast-attentive-bg); --components-toasts-Attentive-surface-L1: var(--toast-attentive-bg); --components-toasts-Attentive-stroke: var(--toast-attentive-border); --components-toasts-Attentive-stroke-L1: var(--toast-attentive-border); --components-toasts-Attentive-text: var(--toast-attentive-text); --components-toasts-Attentive-icon: var(--toast-attentive-text); --chip-surface-unselected: transparent; --chip-surface-selected: var(--accent-wash); --chip-stroke-unselected: var(--line); --chip-stroke-selected: var(--accent); --components-Chip-surface-unselected: var(--chip-surface-unselected); --components-Chip-surface-selected: var(--chip-surface-selected); --components-Chip-stroke-unselected: var(--chip-stroke-unselected); --components-Chip-stroke-selected: var(--chip-stroke-selected); --components-Navigation-surface-L1: var(--bg); --components-Navigation-surface-L2: var(--surface); --components-Navigation-stroke-top: var(--line); --components-Navigation-stroke-bottom: var(--line); --components-button-primary-surface-top: var(--accent); --components-button-primary-surface-bottom: var(--accent-hover); --btn-primary-top: var(--accent); --btn-primary-bottom: var(--accent-hover); --sahi-cta-gradient: linear-gradient( 180deg, var(--accent), var(--accent-hover) ); --brand-grad: linear-gradient(180deg, var(--accent), var(--accent-hover)); --surface-solid-brand-primary-L1: var(--surface); --surface-solid-brand-primary-L2: var(--surface-raised); --surface-solid-brand-primary-L3: var(--surface-high); --surface-solid-brand-l2: var(--surface-raised); --surface-solid-brand-l3: var(--surface-high); --scrim-popover: color-mix(in srgb, var(--neutral-950) 32%, transparent); --scrim-modal: color-mix(in srgb, var(--neutral-950) 72%, transparent); --shadow-l1: var(--shadow-1); --shadow-l2: var(--shadow-2); --shadow-l3: var(--shadow-3); --shadow-l4: var(--shadow-4); --shadow-L1: var(--shadow-1); --shadow-L2: var(--shadow-2); --shadow-L3: var(--shadow-3); --shadow-L4: var(--shadow-4); --shadow-smooth-l1: var(--shadow-1); --shadow-smooth-l2: var(--shadow-2); --shadow-smooth-l3: var(--shadow-3); --shadow-smooth-l4: var(--shadow-4); --shadow-smooth-l5: var(--shadow-5); --shadow-smooth-L1: var(--shadow-1); --shadow-smooth-L2: var(--shadow-2); --shadow-smooth-L3: var(--shadow-3); --shadow-smooth-L4: var(--shadow-4); --shadow-smooth-L5: var(--shadow-5); --inner-shadow: inset 0 1px 0 var(--hover-wash); --focus-ring: 0 0 0 3px var(--accent-ring); --chart-bg: var(--surface); --chart-panel: var(--surface-raised); --chart-grid: color-mix(in srgb, var(--text) 10%, transparent); --chart-axis: var(--text-muted); --chart-text: var(--text-muted); --chart-line-primary: var(--series-1); --chart-line-secondary: var(--series-2); --chart-line-tertiary: var(--series-3); --chart-line-positive: var(--up); --chart-line-negative: var(--down); --chart-line-attentive: var(--attentive); --chart-bar-primary: var(--series-1); --chart-bar-secondary: var(--series-2); --chart-bar-positive: var(--vol-up); --chart-bar-negative: var(--vol-down); --chart-fill-primary: color-mix(in srgb, var(--series-2) 14%, transparent); --chart-fill-positive: color-mix(in srgb, var(--up) 14%, transparent); --chart-fill-negative: color-mix(in srgb, var(--down) 14%, transparent); --chart-tooltip-bg: var(--surface-high); --chart-tooltip-border: var(--line-strong); --oi-chart-surface: var(--surface); --oi-chart-border: var(--line); --oi-chart-muted: var(--text-muted); } /* the .oi-design alias layer (src/styles/oi-design-tokens.css) */ .oi-design { --up: var(--success-500); --down: var(--error-500); --flat: var(--neutral-500); --up-text: var(--success-800); --down-text: var(--error-800); --warn: var(--warm-400); --warn-text: var(--warm-600); --dash-put: var(--success-600); --dash-call: var(--error-600); --dash-put-text: var(--success-800); --dash-call-text: var(--error-700); --surface-card: var(--capital-white); --surface-raised: var(--capital-white); --surface-sunken: var(--capital-spring-wood); --surface-hover: var(--neutral-100); --surface-active: var(--neutral-200); --line: var(--neutral-200); --line-strong: var(--neutral-300); --up-wash: var(--success-100); --down-wash: var(--error-100); --rungs: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 5px); --rungs-across-tight: repeating-linear-gradient(to right, currentColor 0 1.5px, transparent 1.5px 4px); --rungs-fade: linear-gradient(to top, rgba(0, 0, 0, 1) 0 76%, rgba(0, 0, 0, .5) 100%); --wash-unwound: color-mix(in srgb, currentColor 34%, var(--surface-card)); --radius-2xs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --dur-fast: var(--dur-tap, 120ms); --ease-out: var(--ease-ios-out, cubic-bezier(.2, 0, .2, 1)); --press-scale: .96; --text-dense: 13px; --text-caption: 12px; --text-meta: 11px; --text-micro: 11px; --text-tick: 11px; --text-body-sm: 14px; --text-body: 16px; --text-body-lg: 18px; --text-display-lg: 60px; --tracking-caps: .06em; --type-caption: 500 12px/1.35 var(--font-sans); --type-micro: 500 10px/1.4 var(--font-sans); --font-num: var(--font-sans); --dur-base: 200ms; --dur-slide: 340ms; --ease-spring: var(--ease-ios-spring, cubic-bezier(.32, .72, 0, 1)); --tap-min: 44px; --shadow-menu: 0 8px 24px rgba(15, 15, 15, .12), 0 2px 6px rgba(15, 15, 15, .06); --text-disabled: var(--neutral-400); --text-accent: var(--capital-purple); --text-on-accent: var(--capital-white); --text-on-up: var(--capital-black); --text-on-down: var(--capital-white); --line-accent: var(--capital-purple); --warn-wash: var(--warm-100); --fluid-text-micro: clamp(10px, 9.12px + 0.245vw, 11px); --fluid-text-meta: clamp(11px, 10.12px + 0.245vw, 12px); --fluid-text-caption: clamp(12px, 11.12px + 0.245vw, 13px); --fluid-text-dense: clamp(13px, 12.12px + 0.245vw, 14px); --fluid-text-body: clamp(14px, 12.24px + 0.490vw, 16px); --fluid-text-title: clamp(16px, 11.59px + 1.226vw, 21px); --fluid-text-display: clamp(21px, 14.82px + 1.716vw, 28px); --fluid-space-3xs: clamp(4px, 2.24px + 0.490vw, 6px); --fluid-space-2xs: clamp(6px, 4.24px + 0.490vw, 8px); --fluid-space-xs: clamp(8px, 6.24px + 0.490vw, 10px); --fluid-space-sm: clamp(10px, 8.24px + 0.490vw, 12px); --fluid-space-md: clamp(12px, 8.47px + 0.980vw, 16px); --fluid-space-lg: clamp(16px, 8.94px + 1.961vw, 24px); --fluid-space-xl: clamp(24px, 16.94px + 1.961vw, 32px); --fluid-gutter: clamp(10px, 6.47px + 0.980vw, 14px); --fluid-col-min-sm: min(100%, 168px); --fluid-col-min: min(100%, 240px); --fluid-col-min-lg: min(100%, 320px); --fluid-plot-h: clamp(200px, 94px + 29.4vw, 320px); --fluid-plot-h-sm: clamp(140px, 66px + 20.6vw, 224px); --tap-icon: 36px; } :root[data-theme='dark'] .oi-design { --up-text: var(--success-400); --down-text: var(--error-400); --warn-text: var(--warm-300); --dash-put: var(--success-500); --dash-call: var(--error-400); --dash-put-text: var(--success-400); --dash-call-text: var(--error-400); --flat: var(--neutral-400); --surface-card: var(--neutral-900); --surface-raised: var(--neutral-800); --surface-sunken: color-mix(in srgb, var(--neutral-900) 55%, var(--neutral-950)); --surface-hover: var(--neutral-850); --surface-active: var(--neutral-800); --line: var(--neutral-700); --line-strong: var(--neutral-600); --up-wash: color-mix(in srgb, var(--success-950) 80%, var(--neutral-950)); --down-wash: color-mix(in srgb, var(--error-950) 78%, var(--neutral-950)); --text-disabled: var(--neutral-600); --text-accent: var(--brand-300); --text-on-accent: var(--capital-black); --text-on-down: var(--capital-black); --line-accent: var(--brand-300); --warn-wash: color-mix(in srgb, var(--warm-950) 85%, var(--neutral-950)); --shadow-menu: 0 8px 24px rgba(0, 0, 0, .56), 0 2px 6px rgba(0, 0, 0, .4); } @media (prefers-reduced-motion: reduce) { .oi-design { --dur-fast: 1ms; --dur-base: 1ms; --dur-slide: 1ms; --press-scale: 1; } } /* OICell (src/components/common/oi-cell.css) */ .oc-profile-cell .sahi-oicell{display:flex;flex-direction:column;gap:2px;font-family:var(--font-sans);min-width:0} .oc-profile-cell .sahi-oicell__line{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__line{flex-direction:row-reverse} .oc-profile-cell .sahi-oicell__now{font-family:var(--font-num, var(--font-sans));font-size:var(--text-dense, 13px);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap} .oc-profile-cell .sahi-oicell__rank{flex:none;margin:-2px auto;font-family:var(--font-num, var(--font-sans));font-size:var(--text-tick, 10px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-muted);border:1px solid var(--line-strong);border-radius:var(--radius-xs, var(--radius-sm));padding:0 4px;line-height:1.2;white-space:nowrap} .oc-profile-cell .sahi-oicell__line:not(.is-was) > .sahi-oicell__rank{margin:0 auto 0 0} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__line:not(.is-was) > .sahi-oicell__rank{margin:0 0 0 auto} .oc-profile-cell .sahi-oicell__lead{font-size:var(--text-tick, 10px);font-weight:600;letter-spacing:var(--tracking-caps, .06em);text-transform:uppercase;color:var(--text-muted)} .oc-profile-cell .sahi-oicell__was{font-family:var(--font-num, var(--font-sans));font-size:var(--text-meta, 11px);font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap} .oc-profile-cell .sahi-oicell__chg{display:flex;align-items:baseline;gap:6px;font-family:var(--font-num, var(--font-sans));font-size:var(--text-meta, 11px);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__chg{flex-direction:row-reverse} .oc-profile-cell .sahi-oicell__chg b{font-weight:600} .oc-profile-cell .sahi-oicell__code{font-family:var(--font-sans);font-size:var(--text-tick, 10px);font-weight:700;letter-spacing:var(--tracking-caps, .06em);color:var(--text-muted)} .oc-profile-cell .sahi-oicell__new{font-family:var(--font-sans);font-size:var(--text-tick, 10px);font-weight:700;letter-spacing:var(--tracking-caps, .06em);text-transform:uppercase;color:var(--text-muted)} .oc-profile-cell .sahi-oicell__rail{position:relative;height:10px;min-width:0;border-radius:var(--radius-2xs);background:var(--surface-active)} .oc-profile-cell .sahi-oicell.is-top .sahi-oicell__rail{height:12px} .oc-profile-cell .sahi-oicell__bar{position:absolute;top:0;bottom:0;left:0;display:flex;min-width:2px} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__bar{left:auto;right:0;flex-direction:row-reverse} .oc-profile-cell .sahi-oicell__seg{flex:none;height:100%;box-sizing:border-box} .oc-profile-cell .sahi-oicell__seg.is-base{border-radius:var(--radius-2xs) 0 0 var(--radius-2xs)} .oc-profile-cell .sahi-oicell__seg.is-base:only-child{border-radius:var(--radius-2xs)} .oc-profile-cell .sahi-oicell__seg.is-add,.oc-profile-cell .sahi-oicell__seg.is-drop{border-radius:0 var(--radius-2xs) var(--radius-2xs) 0} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__seg.is-base{border-radius:0 var(--radius-2xs) var(--radius-2xs) 0} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__seg.is-base:only-child{border-radius:var(--radius-2xs)} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__seg.is-add,.oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__seg.is-drop{border-radius:var(--radius-2xs) 0 0 var(--radius-2xs)} .oc-profile-cell .sahi-oicell__seg.is-drop{background:var(--wash-unwound);border-left:2px solid currentColor;box-sizing:border-box} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__seg.is-drop{border-left:0;border-right:2px solid currentColor} .oc-profile-cell .sahi-oicell__bar.is-gone{box-sizing:border-box;min-width:8px;border-right:2px solid currentColor;border-radius:var(--radius-2xs);display:block;background:repeating-linear-gradient(to right,currentColor 0 5px,transparent 5px 9px) left 50%/100% 2px no-repeat} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__bar.is-gone{border-right:0;border-left:2px solid currentColor;background-position:right 50%} .oc-profile-cell .sahi-oicell.is-up .sahi-oicell__bar.is-gone{color:color-mix(in srgb,var(--up) 62%,transparent)} .oc-profile-cell .sahi-oicell.is-down .sahi-oicell__bar.is-gone{color:color-mix(in srgb,var(--down) 62%,transparent)} .oc-profile-cell .sahi-oicell.is-flat .sahi-oicell__bar.is-gone{color:color-mix(in srgb,var(--flat) 62%,transparent)} .oc-profile-cell .sahi-oicell__line.has-bar{gap:8px} .oc-profile-cell .sahi-oicell__prevrail{position:relative;flex:1 1 auto;align-self:center;height:5px;min-width:0;border-radius:var(--radius-2xs);background:var(--surface-active)} .oc-profile-cell .sahi-oicell__prevrail i{position:absolute;top:0;bottom:0;left:0;min-width:2px;border-radius:var(--radius-2xs);background:color-mix(in srgb,var(--text-muted) 42%,transparent)} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__prevrail i{left:auto;right:0} .oc-profile-cell .sahi-oicell__dot{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px var(--surface-card)} .oc-profile-cell .sahi-oicell.is-mirror .sahi-oicell__dot{transform:translate(50%,-50%)} .oc-profile-cell .sahi-oicell.is-up .sahi-oicell__seg.is-base{background:var(--up)} .oc-profile-cell .sahi-oicell.is-up .sahi-oicell__seg.is-add{color:var(--up);background:var(--rungs-across-tight),color-mix(in oklab,var(--up) 24%,transparent)} .oc-profile-cell .sahi-oicell.is-up .sahi-oicell__seg.is-drop{color:var(--up);background:var(--wash-unwound)} .oc-profile-cell .sahi-oicell.is-up .sahi-oicell__dot{background:var(--up)} .oc-profile-cell .sahi-oicell.is-down .sahi-oicell__seg.is-base{background:var(--down)} .oc-profile-cell .sahi-oicell.is-down .sahi-oicell__seg.is-add{color:var(--down);background:var(--rungs-across-tight),color-mix(in oklab,var(--down) 24%,transparent)} .oc-profile-cell .sahi-oicell.is-down .sahi-oicell__seg.is-drop{color:var(--down);background:var(--wash-unwound)} .oc-profile-cell .sahi-oicell.is-down .sahi-oicell__dot{background:var(--down)} .oc-profile-cell .sahi-oicell.is-flat .sahi-oicell__seg.is-base{background:var(--flat)} .oc-profile-cell .sahi-oicell.is-flat .sahi-oicell__seg.is-add{color:var(--flat);background:var(--rungs-across-tight),color-mix(in oklab,var(--flat) 24%,transparent)} .oc-profile-cell .sahi-oicell.is-flat .sahi-oicell__seg.is-drop{color:var(--flat);background:var(--wash-unwound)} .oc-profile-cell .sahi-oicell.is-flat .sahi-oicell__dot{background:var(--flat)} .sahi-tone-up{color:var(--up-text, var(--up-ink))} .sahi-tone-down{color:var(--down-text, var(--down-ink))} .sahi-tone-flat{color:var(--text-muted)} .oc-profile-cell .sahi-oicell{width:100%} /* VolumeCell (src/components/common/volume-cell.css) */ .sahi-volcell{display:flex;flex-direction:column;gap:4px;font-family:var(--font-sans);min-width:0;width:100%} .sahi-volcell__line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0} .sahi-volcell.is-mirror .sahi-volcell__line{flex-direction:row-reverse} .sahi-volcell__fig{font-family:var(--font-num, var(--font-sans));font-size:var(--text-dense, 13px);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap} .sahi-volcell__fig small{font-family:var(--font-sans);font-size:var(--text-tick, 10px);font-weight:500;color:var(--text-muted);margin-left:4px} .sahi-volcell__meta{min-width:0;display:flex;align-items:baseline;justify-content:flex-end;gap:6px} .sahi-volcell__change{min-width:0;display:flex;align-items:baseline;justify-content:flex-end;gap:4px;font-family:var(--font-num, var(--font-sans));font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)} .sahi-volcell__change b{font-size:var(--text-meta, 11px);font-weight:600;line-height:1} .sahi-volcell__change small{font-size:var(--text-tick, 10px);font-weight:500;line-height:1;color:var(--text-muted)} .sahi-volcell__meta{flex:1 1 0;flex-wrap:wrap;align-content:flex-start;height:12px;overflow:hidden} .sahi-volcell__change{flex-wrap:wrap;align-content:flex-start;height:11px;overflow:hidden} @media (max-width: 768px) { .sahi-volcell__change:has(small) b { display: none; } } .sahi-volcell__rank{flex:none;font-family:var(--font-num, var(--font-sans));font-size:var(--text-tick, 10px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-muted);border:1px solid var(--line-strong);border-radius:var(--radius-xs, var(--radius-sm));padding:1px 4px;line-height:1.2} .sahi-volcell__rail{position:relative;height:10px;border-radius:var(--radius-2xs);background:var(--surface-active)} .sahi-volcell.is-top .sahi-volcell__rail{height:12px} .sahi-volcell__bar{position:absolute;top:0;bottom:0;left:0;display:flex;min-width:2px} .sahi-volcell.is-mirror .sahi-volcell__bar{left:auto;right:0;flex-direction:row-reverse} .sahi-volcell__seg{flex:none;height:100%;box-sizing:border-box} .sahi-volcell__seg.is-base{border-radius:var(--radius-2xs) 0 0 var(--radius-2xs);background:color-mix(in srgb,currentColor 85%,var(--surface-card))} .sahi-volcell__seg.is-base:only-child{border-radius:var(--radius-2xs)} .sahi-volcell__seg.is-add,.sahi-volcell__seg.is-drop{border-radius:0 var(--radius-2xs) var(--radius-2xs) 0} .sahi-volcell.is-mirror .sahi-volcell__seg.is-base{border-radius:0 var(--radius-2xs) var(--radius-2xs) 0} .sahi-volcell.is-mirror .sahi-volcell__seg.is-base:only-child{border-radius:var(--radius-2xs)} .sahi-volcell.is-mirror .sahi-volcell__seg.is-add,.sahi-volcell.is-mirror .sahi-volcell__seg.is-drop{border-radius:var(--radius-2xs) 0 0 var(--radius-2xs)} .sahi-volcell__seg.is-add{background:color-mix(in srgb,currentColor 34%,transparent)} .sahi-volcell__seg.is-drop{background:var(--wash-unwound);border-left:2px solid color-mix(in srgb,currentColor 85%,var(--surface-card))} .sahi-volcell.is-mirror .sahi-volcell__seg.is-drop{border-left:0;border-right:2px solid color-mix(in srgb,currentColor 85%,var(--surface-card))} .sahi-volcell__dot{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);background:color-mix(in srgb,currentColor 85%,var(--surface-card));box-shadow:0 0 0 1.5px var(--surface-card)} .sahi-volcell.is-mirror .sahi-volcell__dot{transform:translate(50%,-50%)} .sahi-volcell__previous{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0;color:var(--text-muted)} .sahi-volcell__previous .sahi-volcell__rank{margin:-2px auto} .sahi-volcell__previous small{font-family:var(--font-sans);font-size:var(--text-tick, 10px);font-weight:600;line-height:1;letter-spacing:var(--tracking-caps, .06em);text-transform:uppercase} .sahi-volcell__previous b{font-family:var(--font-num, var(--font-sans));font-size:var(--text-meta, 11px);font-weight:500;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap} .sahi-volcell.is-mirror .sahi-volcell__previous{flex-direction:row-reverse} .sahi-volcell.is-flat{color:var(--text)} .sahi-volcell.is-put{color:var(--dash-put, var(--up))} .sahi-volcell.is-call{color:var(--dash-call, var(--down))} /* BuildupCell (src/features/option-chain/buildup-cell.css) */ @property --bu-focus-boost { syntax: ''; inherits: false; initial-value: 0%; } .sahi-bucell { --bu-focus-boost: 0%; display: flex; flex-direction: column; justify-content: center; gap: 1px; box-sizing: border-box; width: 100%; height: calc(var(--chain-row-h, 52px) - 1px); min-height: calc(var(--chain-row-h, 52px) - 1px); padding: 4px 6px; font-family: var(--font-sans); min-width: 0; position: relative; isolation: isolate; overflow: hidden; transition: --bu-focus-boost var(--dur-tap, 120ms) var(--ease-ios-out, ease), box-shadow var(--dur-tap, 120ms) var(--ease-ios-out, ease); } .sahi-bucell::before { content: ""; position: absolute; z-index: 0; top: auto; bottom: 4px; height: 10px; left: 0; width: var(--bu-fill, 0%); transform: none; background: color-mix(in srgb, currentColor 10%, transparent); border-right: 1px solid color-mix(in srgb, currentColor 32%, transparent); transition: width var(--dur-quick, 180ms) var(--ease-ios-out, ease); display: none; } .sahi-bucell.is-top::before { height: 12px; } .sahi-bucell.is-mirror::before { left: auto; right: 0; border-right: 0; border-left: 1px solid color-mix(in srgb, currentColor 32%, transparent); } .sahi-bucell.is-add::before { background: var(--rungs-across-tight), color-mix(in srgb, currentColor 12%, transparent); } .sahi-bucell.is-neutral::before { background: color-mix(in srgb, var(--flat) 10%, transparent); border-color: color-mix(in srgb, var(--flat) 24%, transparent); } .sahi-bucell { background-image: linear-gradient( to left, color-mix(in srgb, currentColor calc(var(--bu-wash, 0%) + var(--bu-focus-boost)), transparent), color-mix(in srgb, currentColor calc(var(--bu-inner-wash, 0%) + var(--bu-focus-boost)), transparent) ); } .sahi-bucell.is-mirror { background-image: linear-gradient( to right, color-mix(in srgb, currentColor calc(var(--bu-wash, 0%) + var(--bu-focus-boost)), transparent), color-mix(in srgb, currentColor calc(var(--bu-inner-wash, 0%) + var(--bu-focus-boost)), transparent) ); } .chain-table td.bu-cell-v2:focus-within .sahi-bucell { --bu-focus-boost: 7%; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 34%, transparent); } @media (prefers-reduced-motion: reduce) { .sahi-bucell { transition: none; } } .sahi-bucell.is-up { color: var(--up); } .sahi-bucell.is-down { color: var(--down); } .sahi-bucell.is-flat { color: var(--flat); } .sahi-bucell__top { display: flex; position: relative; z-index: 1; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0; min-width: 0; } .sahi-bucell.is-mirror .sahi-bucell__top { flex-direction: row-reverse; } .sahi-bucell__name { flex: 1 1 auto; min-width: 0; font-size: var(--text-tick); font-weight: 600; letter-spacing: 0; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); } .sahi-bucell.is-up .sahi-bucell__name { color: var(--up-text, var(--up-ink)); } .sahi-bucell.is-down .sahi-bucell__name { color: var(--down-text, var(--down-ink)); } .sahi-bucell.is-neutral .sahi-bucell__name { color: var(--text-muted); } .sahi-bucell__figs { display: flex; position: relative; z-index: 1; align-items: baseline; justify-content: space-between; gap: 3px; line-height: 1.05; min-width: 0; } .sahi-bucell.is-mirror .sahi-bucell__figs { flex-direction: row-reverse; } .sahi-bucell__oi { font-family: var(--font-num, var(--font-sans)); font-size: var(--text-meta); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; } .sahi-bucell__oipct { font-family: var(--font-num, var(--font-sans)); font-size: var(--text-meta); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; } #root > .app .sahi-bucell .sahi-bucell__oipct { color: var(--text-muted) !important; } .sahi-bucell__rail { position: relative; z-index: 1; display: block; width: 100%; height: 6px; flex: none; border-radius: 2px; background: color-mix(in srgb, currentColor 12%, var(--surface-active)); overflow: hidden; } .sahi-bucell.is-top .sahi-bucell__rail { height: 7px; } .sahi-bucell__bar { position: absolute; top: 0; bottom: 0; left: 0; min-width: 4px; border-radius: var(--radius-2xs); overflow: hidden; } .sahi-bucell.is-mirror .sahi-bucell__bar { left: auto; right: 0; } .sahi-bucell__bar::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: currentColor; } .sahi-bucell.is-mirror .sahi-bucell__bar::after { right: auto; left: 0; } .sahi-bucell.is-add .sahi-bucell__bar { background: var(--rungs-across-tight), color-mix(in oklab, currentColor 24%, transparent); } .sahi-bucell.is-drop .sahi-bucell__bar { background: var(--wash-unwound); } .sahi-bucell.is-same .sahi-bucell__bar { background: var(--flat); min-width: 2px; } .sahi-bucell.is-neutral .sahi-bucell__bar { background: color-mix(in srgb, var(--flat) 22%, transparent); } .sahi-bucell.is-neutral .sahi-bucell__bar::after { background: color-mix(in srgb, var(--flat) 55%, transparent); } .chain-table td.bu-cell-v2 { padding: 0; width: calc(100px * var(--chain-scale, 1)); min-width: calc(100px * var(--chain-scale, 1)); max-width: calc(100px * var(--chain-scale, 1)); height: var(--chain-row-h, 52px); vertical-align: middle; } #root > .app.app[data-active-tab='chain'] .chain-table .chain-row td.bu-cell-v2 { padding: 0 !important; } .chain-table td.metric-unavailable.bu-warming { font-family: var(--font-num, var(--font-sans)); font-size: var(--sahi-type-min); font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .66; } /* the chain's finishing rules for these three cells (src/styles/sahi-chain-grid-finish.css) */ :root[data-theme] body .ocs-app :is( .chain-table-container, .chain-table, .chain-table thead, .chain-table tbody, .chain-table tr, .chain-table th, .chain-table td, .strike-cell, .strike-cell-body, .strike-cell-inner ) {box-sizing: border-box !important;} :root[data-theme] body .ocs-app .chain-table.chain-table :is(.chain-row, .chain-row-even, .atm-row, .ce-itm, .pe-itm) td:not(.strike-cell) {background: var(--oc-grid-row) !important; background-color: var(--oc-grid-row) !important; background-image: none !important;} :root[data-theme] body .ocs-app .chain-table .chain-row td.strike-cell {padding-inline: 5px !important; border-inline: 1px solid var(--oc-grid-line-strong) !important; border-bottom: 1px solid var(--oc-grid-line) !important; background: var(--oc-grid-strike) !important; background-color: var(--oc-grid-strike) !important; background-image: none !important; color: var(--text) !important; font-size: var(--chain-font-lg, 14px) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1, "lnum" 1 !important; letter-spacing: -.006em !important; box-shadow: none !important;} :root[data-theme] body .ocs-app .chain-table .chain-row td.strike-cell.atm-strike {border-color: var(--oc-grid-line-strong) !important; background: var(--oc-grid-strike) !important; background-color: var(--oc-grid-strike) !important; color: var(--text) !important; box-shadow: none !important;} :root[data-theme] body .ocs-app .chain-table .strike-cell-body {width: 100% !important; min-height: 38px !important; color: inherit !important;} :root[data-theme] body .ocs-app .chain-table .strike-val-lbl {color: inherit !important; font-size: var(--chain-font-lg, 14px) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1, "lnum" 1 !important; line-height: 1.15 !important; letter-spacing: -.006em !important;} :root[data-theme] body .ocs-app .chain-table td.oc-profile-cell {padding: 4px 8px !important;} :root[data-theme] body .ocs-app .chain-table :is(.sahi-oicell, .sahi-volcell) {width: 100%; min-width: 0; gap: 3px !important; color: var(--text) !important;} :root[data-theme] body .ocs-app .chain-table :is(.sahi-oicell__now, .sahi-volcell__fig) {color: var(--text) !important; font-size: var(--chain-font-md, 13px) !important; font-weight: 600 !important; line-height: 1.15 !important; letter-spacing: -.006em !important;} :root[data-theme] body .ocs-app .chain-table :is(.sahi-oicell__chg, .sahi-volcell__change, .sahi-volcell__change b) {color: color-mix(in srgb, var(--text) 78%, var(--text-secondary)) !important; font-size: var(--chain-font-sm, 11px) !important; font-weight: 600 !important; line-height: 1 !important;} :root[data-theme] body .ocs-app .chain-table .sahi-volcell__change.sahi-tone-up, :root[data-theme] body .ocs-app .chain-table .sahi-volcell__change.sahi-tone-up b {color: var(--up-text, var(--up-ink)) !important;} :root[data-theme] body .ocs-app .chain-table .sahi-volcell__change.sahi-tone-down, :root[data-theme] body .ocs-app .chain-table .sahi-volcell__change.sahi-tone-down b {color: var(--down-text, var(--down-ink)) !important;} :root[data-theme] body .ocs-app .chain-table .sahi-oicell__chg :is(.sahi-oicell__amt.sahi-tone-up, b.sahi-tone-up) {color: var(--up-text, var(--up-ink)) !important;} :root[data-theme] body .ocs-app .chain-table .sahi-oicell__chg :is(.sahi-oicell__amt.sahi-tone-down, b.sahi-tone-down) {color: var(--down-text, var(--down-ink)) !important;} :root[data-theme] body .ocs-app .chain-table :is(.sahi-oicell__rail, .sahi-volcell__rail) {height: 10px !important; border-radius: 2px !important; background: var(--oc-grid-track) !important; border: 0 !important; box-shadow: none !important; overflow: hidden;} :root[data-theme] body .ocs-app .chain-table :is(.sahi-oicell, .sahi-volcell).is-top :is(.sahi-oicell__rail, .sahi-volcell__rail) {height: 12px !important;} :root[data-theme] body .ocs-app .chain-table .sahi-volcell__seg.is-base, :root[data-theme] body .ocs-app .chain-table .sahi-volcell__dot {background: color-mix(in srgb, currentColor 70%, var(--oc-grid-strike)) !important; box-shadow: none !important;} :root[data-theme] body .ocs-app .chain-table .sahi-volcell__seg.is-add {background: var(--rungs-across-tight), color-mix(in oklab, currentColor 24%, transparent) !important;} :root[data-theme] body .ocs-app .chain-table .sahi-volcell__seg.is-drop {background: color-mix(in srgb, currentColor 16%, var(--oc-grid-track)) !important; border-left-color: color-mix(in srgb, currentColor 70%, var(--oc-grid-strike)) !important;} :root[data-theme] body .ocs-app .chain-table .sahi-volcell.is-mirror .sahi-volcell__seg.is-drop {border-right-color: color-mix(in srgb, currentColor 70%, var(--oc-grid-strike)) !important;} :root[data-theme] body .ocs-app .chain-table .sahi-oicell__prevrail {height: 4px !important; border-radius: 2px !important; background: var(--oc-grid-track-quiet) !important; box-shadow: none !important;} :root[data-theme] body .ocs-app .chain-table :is(.sahi-oicell__was, .sahi-oicell__lead, .sahi-volcell__previous, .sahi-volcell__previous small, .sahi-volcell__previous b) {color: color-mix(in srgb, var(--text) 68%, var(--text-muted)) !important; font-size: var(--chain-font-xs, 10px) !important; font-weight: 600 !important; line-height: 1 !important;} :root[data-theme] body .ocs-app .chain-table :is(.sahi-oicell__dot, .sahi-volcell__dot) {width: 6px !important; height: 6px !important; box-shadow: 0 0 0 1px var(--oc-grid-row) !important;} :root[data-theme] body .ocs-app .chain-table :is(.sahi-oicell__code, .sahi-oicell__rank, .sahi-volcell__rank) {padding: 1px 3px !important; border: 1px solid var(--oc-grid-line-strong) !important; border-radius: 4px !important; background: transparent !important; color: var(--text-muted) !important; font-size: var(--chain-font-xs, 10px) !important; font-weight: 600 !important;} :root[data-theme] body .ocs-app .chain-table :is(.sahi-volcell__rank, .sahi-oicell__rank) {padding-block: 0 !important; line-height: 1 !important;} :root[data-theme] body .ocs-app .chain-table .chain-row td.bu-cell-v2 {height: var(--chain-row-h, 52px) !important; padding: 0 !important;} :root[data-theme] body .ocs-app .chain-table .sahi-bucell {width: 100% !important; height: calc(var(--chain-row-h, 52px) - 1px) !important; min-height: calc(var(--chain-row-h, 52px) - 1px) !important; padding: 5px 7px !important; gap: 2px !important;} :root[data-theme] body .ocs-app .chain-table .sahi-bucell__name {color: var(--text) !important; font-size: var(--chain-font-sm, 11px) !important; font-weight: 700 !important; line-height: 1.05 !important;} :root[data-theme] body .ocs-app .chain-table .sahi-bucell__oi {color: var(--text) !important; font-size: var(--chain-font-cell, 12px) !important; font-weight: 700 !important; line-height: 1 !important;} :root[data-theme] body .ocs-app .chain-table .sahi-bucell__oipct {color: color-mix(in srgb, var(--text) 72%, var(--text-muted)) !important; font-size: var(--chain-font-xs, 10px) !important; font-weight: 600 !important; line-height: 1 !important;} :root[data-theme] body .ocs-app .chain-table .sahi-bucell__rail {width: 100% !important; height: 8px !important; border-radius: 2px !important; background: var(--oc-grid-track) !important; border: 0 !important; box-shadow: none !important;} :root[data-theme] body .ocs-app .chain-table .chain-header-row th:not(.th-strike) {border-right: 0 !important; border-left: 0 !important; color: var(--text-muted) !important; font-weight: 700 !important;} :root[data-theme] body .ocs-app .chain-table .chain-header-row th:not(.th-strike) .chain-sort-button {color: var(--text-muted) !important; font-weight: 700 !important;} :root[data-theme] body .ocs-app .chain-table .chain-header-row th.th-strike {border-right: 1px solid var(--oc-grid-line-strong) !important; border-left: 1px solid var(--oc-grid-line-strong) !important; background: var(--table-head-surface) !important; background-color: var(--table-head-surface) !important; color: var(--text) !important; font-weight: 700 !important;} :root[data-theme] body .ocs-app .chain-table .chain-header-row th.th-strike .chain-sort-button {color: var(--text) !important; font-weight: 700 !important;} :root[data-theme] body .ocs-app .chain-table .sahi-bucell.is-top .sahi-bucell__rail {height: 10px !important;} :root[data-theme] body .ocs-app .chain-table .sahi-bucell__bar {min-width: 2px !important; border-radius: 2px !important; box-shadow: none !important;} :root[data-theme] body .ocs-app .chain-table .chain-row.atm-row td.strike-cell, :root[data-theme] body .ocs-app .chain-table .chain-row td.strike-cell.atm-strike {border-top: 0 !important; border-bottom: 1px solid var(--oc-grid-line) !important; border-inline: 1px solid var(--oc-grid-line-strong) !important; background: var(--oc-grid-strike) !important; background-color: var(--oc-grid-strike) !important; color: var(--text) !important; box-shadow: none !important;} @media (max-width: 768px) { :root[data-theme] body .ocs-app .chain-table .chain-row td.strike-cell, :root[data-theme] body .ocs-app .chain-table .strike-val-lbl {font-size: var(--chain-font-md, 13px) !important;} :root[data-theme] body .ocs-app .chain-table .sahi-bucell {height: calc(var(--chain-row-h, 52px) - 1px) !important; min-height: calc(var(--chain-row-h, 52px) - 1px) !important;} } @media (prefers-reduced-motion: reduce) { :root[data-theme] body .ocs-app .chain-table :is(.sahi-bucell, .sahi-oicell__bar, .sahi-volcell__bar, .sahi-bucell__bar) {transition: none !important;} } :root[data-theme] body .ocs-app .chain-table .chain-row td.strike-cell.is-expected-move-range {position: sticky !important;} :root[data-theme] body .ocs-app .chain-table-container:is([data-table-view='calls'], [data-table-view='puts']) .chain-table td .sahi-oicell {max-width: calc(280px * var(--chain-scale, 1)); margin-inline: auto;} :root[data-theme] body .ocs-app .chain-table-container:is([data-table-view='calls'], [data-table-view='puts']) .chain-table td .sahi-volcell {max-width: calc(210px * var(--chain-scale, 1)); margin-inline: auto;} :root[data-theme] body .ocs-app .chain-table-container[data-table-view='calls'][data-horizontal-overflow='on'] .chain-table :is(td.strike-cell, th.th-strike, th.chain-side-expiry-th) {position: sticky; right: 0; z-index: 5;} :root[data-theme] body .ocs-app .chain-table-container:is([data-table-view='puts'], [data-table-view='combined'])[data-horizontal-overflow='on'] .chain-table :is(td.strike-cell, th.th-strike, th.chain-side-expiry-th) {position: sticky; left: 0; z-index: 5;} /* the strike spine and its pills (src/styles/sahi-market-levels.css, sahi-data-surface-finish.css) */ :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-cell-inner:has(> .strike-market-row) {display: grid !important; grid-template-rows: 14px 17px 14px !important; grid-template-columns: minmax(0, 1fr) !important; align-content: center !important; justify-items: center !important; gap: 0 !important;} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-cell-inner:has(> .strike-market-row) > .strike-val-lbl {grid-row: 2 !important; align-self: center !important; height: 17px !important; min-width: 0 !important; line-height: 17px !important;} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-market-row {box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: 14px !important; min-height: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important;} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-market-row-top {grid-row: 1 !important;} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-market-row-bottom {grid-row: 3 !important;} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-tag {--strike-tag-wash: 16%; box-sizing: border-box !important; display: inline-block !important; flex: 0 0 auto !important; height: 14px !important; margin: 0 !important; padding: 0 6px !important; border: 0 !important; border-radius: 999px !important; background: color-mix(in srgb, var(--strike-tag-fill) var(--strike-tag-wash), transparent) !important; box-shadow: none !important; color: var(--strike-tag-ink) !important; font-size: var(--sahi-type-min) !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 14px !important; text-align: center !important; text-transform: none !important; white-space: nowrap !important;} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-tag.is-joined {padding: 0 4.5px !important; letter-spacing: -.01em !important;} .ocs-app .chain-table .strike-tag.is-support {--strike-tag-fill: var(--up); --strike-tag-ink: var(--up-ink);} .ocs-app .chain-table .strike-tag.is-resistance {--strike-tag-fill: var(--down); --strike-tag-ink: var(--down-ink);} .ocs-app .chain-table .strike-tag.is-mark {--strike-tag-fill: var(--warm-400); --strike-tag-ink: var(--warm-300);} :root[data-theme='light'] .ocs-app .chain-table .strike-tag {--strike-tag-wash: 12%;} :root[data-theme='light'] .ocs-app .chain-table .strike-tag.is-mark {--strike-tag-wash: 20%; --strike-tag-ink: var(--warm-800);} .ocs-app .chain-table .strike-tag.is-mark:has(.badge-atm) {--strike-tag-fill: var(--atm-hue); --strike-tag-ink: var(--text);} :root[data-theme='light'] .ocs-app .chain-table .strike-tag.is-mark:has(.badge-atm) {--strike-tag-wash: 14%; --strike-tag-ink: var(--text);} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-tag .strike-tag-part {all: unset !important;} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-tag :is(.strike-market-kind, .badge-atm) {font-weight: 700 !important;} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-tag :is(.strike-market-kind, .strike-market-role) {color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: none !important;} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-tag .strike-market-kind {font-weight: 700 !important;} :root[data-theme] body .ocs-app .chain-table td.strike-cell .strike-tag-sep {margin: 0 1.5px !important; opacity: .7 !important;} :root[data-theme] body .ocs-app .chain-table.chain-table .chain-row td.strike-cell.atm-strike {box-shadow: none !important;} :root[data-theme] body .ocs-app .chain-table-container[data-chain-layout='split'] .chain-split-pane.is-spine .chain-table.chain-table .chain-row td.strike-cell.atm-strike {border-inline-color: var(--line) !important;} .ocs-app .chain-table .market-resistance-level td.strike-cell:not(.atm-strike), .ocs-app .chain-table .market-support-level td.strike-cell:not(.atm-strike) {box-shadow: inset 0 1px 0 rgba(255, 255, 255, .022), inset 0 0 0 1px rgba(255, 255, 255, .035) !important;} .ocs-app .chain-table .market-resistance-level td.strike-cell:not(.atm-strike) {border-inline-color: rgba(227, 86, 80, .22) !important;} .ocs-app .chain-table .market-support-level td.strike-cell:not(.atm-strike) {border-inline-color: rgba(64, 232, 151, .22) !important;} .ocs-app .chain-table .strike-cell.shrunk .strike-market-row {display: none !important;} #root .chain-table td.strike-cell .strike-tag[data-under-head] {visibility: hidden;} :root[data-theme] body .ocs-app .chain-table.chain-table :is(th.chain-leg-header, th.th-strike) {background-image: linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 85%) !important; box-shadow: var(--edge-highlight) !important;} :root[data-theme] body .ocs-app .chain-table.chain-table th.th-strike .strike-header-button, :root[data-theme] body .ocs-app .chain-table.chain-table th.th-strike {font-weight: 600 !important;} :root[data-theme] body .ocs-app .chain-table.chain-table tr.chain-row:not(.atm-row) > td:not(.strike-cell) {border-bottom-color: transparent !important; background-image: linear-gradient(var(--dsf-sep), var(--dsf-sep)) !important; background-repeat: no-repeat !important; background-size: 100% 1px !important; background-position: 0 100% !important; background-origin: border-box !important;} :root[data-theme] body .ocs-app .chain-table.chain-table td.strike-cell .strike-tag {--dsf-tag-edge: color-mix(in srgb, var(--strike-tag-fill, var(--text)) 42%, var(--line-strong)); border: 1px solid var(--dsf-tag-edge) !important; height: 16px !important; padding: 0 5px !important; line-height: 14px !important; box-shadow: var(--edge-highlight) !important; transition: border-color var(--dsf-motion), box-shadow var(--dsf-motion) !important;} :root[data-theme] body .ocs-app .chain-table.chain-table td.strike-cell .strike-tag.is-joined {padding: 0 3.5px !important;} :root[data-theme] body .ocs-app .chain-table.chain-table .chain-row td.strike-cell.atm-strike {box-shadow: none !important;} /* ── 00-base.css ── */ /* Option Chain guide: base. The real-capture figure furniture is shared (scripts/guides/shared-css/real-figures.css). */ /* Type floor: the shared figure furniture is 13px at the smallest */ section[id^="oc-"] .iv-block__eyebrow, section[id^="oc-"] .iv-tag { font-size: 0.8125rem; } /* The guide's accent is the brand plum, not mint: links, pin numbers and small labels read in it; fact colours stay neutral and bullish/bearish stay green/red. */ .content-main { --sahi-cyan: #FC6AD0; } :root[data-theme="light"] .content-main { --sahi-cyan: #A50F66; } /* ── 05-p1-page.css ── */ /* Option Chain guide, page level (P1): Start here, the Cell Index gallery, the Part openers and the rhythm between sections. Classes are prefixed ocp1-. Rules are scoped to #oc-start, #oc-index, .ocv-part, or (for rhythm only) to this guide's own sections under .content-main, so nothing here reaches a card owned by another part. THEMES. Every colour is a token. The dark values below are what the page always had; the light block restates the few that cannot be derived from the page tokens (scripts/guides/THEMES.md). The brand pink needs no light value: the badges and chips that wear it as a translucent fill in dark become the solid brand pink in light, and the mint highlight of the dark theme is the brand pink there (--sahi-cyan), or the direction green where it means "offered in Advanced". */ :root { --ocp1-hl-rgb: 169, 231, 240; /* the highlight: mint on dark, brand pink on light (matches --sahi-cyan) */ --ocp1-pink-fill: rgba(165, 15, 102, 0.5); /* a chip carrying a letter */ --ocp1-pink-fill-2: rgba(165, 15, 102, 0.45); --ocp1-pink-line: rgba(254, 163, 229, 0.5); /* its edge on hover */ --ocp1-pink-edge: rgba(254, 163, 229, 0.55); /* its edge when it is the current one */ --ocp1-pink-wash: rgba(165, 15, 102, 0.2); /* hover wash */ --ocp1-pink-wash-2: rgba(165, 15, 102, 0.16); --ocp1-pink-soft: rgba(165, 15, 102, 0.2); /* the Simple badge */ --ocp1-grad-badge: linear-gradient(150deg, rgba(165, 15, 102, 0.75), rgba(165, 15, 102, 0.18)); --ocp1-grad-group: linear-gradient(150deg, rgba(165, 15, 102, 0.7), rgba(165, 15, 102, 0.2)); --ocp1-badge-line: rgba(254, 163, 229, 0.38); --ocp1-group-line: rgba(254, 163, 229, 0.35); --ocp1-badge-shadow: 0 10px 30px rgba(165, 15, 102, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14); --ocp1-part-bg: radial-gradient(120% 140% at 0% 0%, rgba(165, 15, 102, 0.20), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(169, 231, 240, 0.06), transparent 60%), rgba(255, 255, 255, 0.02); --ocp1-tile: rgba(255, 255, 255, 0.025); /* a card on the page */ --ocp1-pin-halo: rgba(169, 231, 240, 0.16); --ocp1-call-ink: #EE807B; /* "Call window" and the top of the Call bars */ --ocp1-call-bar: linear-gradient(180deg, #EE807B, rgba(227, 86, 80, 0.45)); --ocp1-put-bar: linear-gradient(180deg, var(--toast-positive-text), rgba(32,150,166, 0.45)); --ocp1-solid: transparent; /* under a gradient badge: nothing on dark, the brand pink on light */ --ocp1-ana-ink: var(--text-3); /* the analogy's small heading */ --ocp1-ana-bg: transparent; --ocp1-ana-line: #272727; } :root[data-theme="light"] { --ocp1-hl-rgb: 165, 15, 102; --ocp1-pink-fill: #A50F66; --ocp1-pink-fill-2: #A50F66; --ocp1-pink-line: rgba(165, 15, 102, 0.5); --ocp1-pink-edge: #A50F66; --ocp1-pink-wash: rgba(165, 15, 102, 0.1); --ocp1-pink-wash-2: rgba(165, 15, 102, 0.08); --ocp1-pink-soft: rgba(165, 15, 102, 0.1); --ocp1-grad-badge: linear-gradient(150deg, #A50F66, #8A1157); --ocp1-grad-group: linear-gradient(150deg, #A50F66, #8A1157); --ocp1-badge-line: rgba(165, 15, 102, 0.55); --ocp1-group-line: rgba(165, 15, 102, 0.55); --ocp1-badge-shadow: 0 10px 28px rgba(165, 15, 102, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2); --ocp1-part-bg: radial-gradient(120% 140% at 0% 0%, rgba(165, 15, 102, 0.1), transparent 55%), #FFFFFF; --ocp1-tile: #FFFFFF; --ocp1-pin-halo: rgba(165, 15, 102, 0.16); --ocp1-call-ink: var(--toast-negative-text); --ocp1-call-bar: linear-gradient(180deg, var(--sahi-negative), rgba(196, 52, 46, 0.4)); --ocp1-put-bar: linear-gradient(180deg, var(--sahi-positive), rgba(20,105,122, 0.4)); --ocp1-solid: #A50F66; --ocp1-ana-ink: var(--text-3); --ocp1-ana-bg: transparent; --ocp1-ana-line: #E6E6E6; } /* ═══════════════════════════════════════════════════════════════════════════ 1. Rhythm between sections guide.css stacks a 60px divider margin, a 90px h2 margin and a 40px h2 padding: about 250px of air between two sections. ═══════════════════════════════════════════════════════════════════════════ */ .content-main > hr.divider { margin: 40px 0; opacity: 0.8; } /* a part opener has its own top edge, so the divider in front of it goes */ .content-main > hr.divider:has(+ section > .ocv-part) { display: none; } .content-main > section[id^="oc-"] > h2 { margin: 0 0 28px; padding: 0 0 18px; } .content-main > section[id^="oc-"] > h3 { margin: 48px 0 14px; font-size: 1.28rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--text-1); } .content-main > section[id^="oc-"] > h3:first-child { margin-top: 0; } /* callouts: one rhythm for every green box on the page */ .content-main .callout-beginner { margin: 36px 0; padding: 26px 30px; border-radius: 16px; } .content-main .callout-beginner > :last-child { margin-bottom: 0; } .content-main .callout-beginner p { font-size: 1.05rem; line-height: 1.75; } .content-main .callout-beginner :is(h3, h4) { margin-bottom: 12px; font-size: 0.9rem; } /* the quiz */ .content-main > .quiz-section { margin-top: 72px; padding: 40px; } .content-main > .quiz-section .quiz-q:last-of-type { margin-bottom: 0; } @media (max-width: 768px) { .content-main > hr.divider { margin: 28px 0; } .content-main > section[id^="oc-"] > h2 { margin: 0 0 20px; padding: 0 0 14px; } .content-main > section[id^="oc-"] > h3 { margin: 36px 0 12px; font-size: 1.18rem; } .content-main .callout-beginner { margin: 28px 0; padding: 20px; } .content-main .callout-beginner p { font-size: 1rem; } .content-main > .quiz-section { margin-top: 48px; padding: 22px 18px; } } /* ═══════════════════════════════════════════════════════════════════════════ 2. Part openers (Parts A to E) ═══════════════════════════════════════════════════════════════════════════ */ .ocv-part.ocp1-part { position: relative; display: grid; overflow: hidden; grid-template-columns: 92px minmax(0, 1fr) auto; grid-template-areas: "badge body thumbs" "rail rail rail"; gap: 22px 26px; align-items: center; margin: 64px 0 36px; padding: 28px 30px 20px; border: 1px solid var(--border-soft); border-radius: 22px; background: var(--ocp1-part-bg); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-2); } .ocp1-part__badge { grid-area: badge; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 26px; font-family: var(--font-display); font-size: 3.6rem; font-weight: 700; line-height: 1; color: var(--on-accent); background: var(--ocp1-grad-badge); background-color: var(--ocp1-solid); border: 1px solid var(--ocp1-badge-line); box-shadow: var(--ocp1-badge-shadow); } .ocp1-part__body { grid-area: body; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ocv-part.ocp1-part .ocv-part__k { align-self: flex-start; padding: 0; border: 0; background: none; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sahi-cyan); } .ocp1-part__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; } .ocp1-part__promise { max-width: 54ch; font-size: 1rem; line-height: 1.55; color: var(--text-2); } .ocp1-part__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); } .ocp1-part__meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 2px; border-radius: 50%; background: var(--text-3); } .ocp1-part__thumbs { grid-area: thumbs; display: flex; gap: 8px; align-items: center; } .ocp1-part__thumb { display: block; flex: none; width: 128px; max-width: 128px; height: 86px; object-fit: cover; object-position: left top; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--real-frame); } .ocp1-rail { grid-area: rail; display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px dashed rgba(var(--ink-rgb), 0.14); } .ocp1-rail::before { content: "Parts"; margin-right: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); } .ocp1-rail__i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 0.9375rem; font-weight: 800; line-height: 1; text-decoration: none; color: var(--text-2); border: 1px solid var(--border-soft); background: rgba(var(--ink-rgb), 0.03); } .content-main .ocp1-rail a.ocp1-rail__i { text-decoration: none; color: var(--text-2); font-weight: 800; } .content-main .ocp1-rail a.ocp1-rail__i:hover { color: var(--text-1); border-color: var(--ocp1-pink-line); background: var(--ocp1-pink-wash); } .ocp1-rail__i.is-here { color: var(--on-accent); border-color: var(--ocp1-pink-edge); background: var(--ocp1-pink-fill); } @media (max-width: 900px) { .ocv-part.ocp1-part { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "badge body" "thumbs thumbs" "rail rail"; padding: 24px 22px 18px; gap: 18px 20px; } .ocp1-part__badge { width: 80px; height: 80px; border-radius: 22px; font-size: 3.1rem; } .ocp1-part__thumbs { justify-content: flex-start; } } @media (max-width: 560px) { .ocv-part.ocp1-part { grid-template-columns: 56px minmax(0, 1fr); margin: 44px 0 26px; padding: 18px 16px 14px; gap: 14px 14px; border-radius: 18px; } .ocp1-part__badge { width: 56px; height: 56px; border-radius: 16px; font-size: 2.2rem; } .ocp1-part__title { font-size: 1.35rem; } .ocp1-part__promise { font-size: 0.9375rem; } .ocp1-part__thumb { width: 28vw; max-width: 28vw; height: 64px; } .ocp1-rail { gap: 6px; padding-top: 12px; } .ocp1-rail__i { width: 40px; height: 40px; } } /* ═══════════════════════════════════════════════════════════════════════════ 3. Start here ═══════════════════════════════════════════════════════════════════════════ */ #oc-start .ocp1-hero { margin: 32px 0 14px; } #oc-start .ocp1-hero .ocv-real__bar { padding: 12px 18px; } #oc-start .ocp1-hero .ocv-real__tag { font-size: 0.8125rem; } #oc-start .ocp1-hero__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } #oc-start .ocp1-hero__scroll:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: -3px; } #oc-start .ocp1-hero__stage { position: relative; line-height: 0; } #oc-start .ocp1-hero__stage > img { display: block; width: 100%; height: auto; } #oc-start .ocp1-hero__hint { display: none; padding: 8px 16px 0; font-size: 0.8125rem; font-weight: 600; color: var(--sahi-cyan); text-align: center; } #oc-start .ocp1-hero .ocv-real__cap { padding-top: 12px; } #oc-start a.ocp1-pin { position: absolute; left: var(--x); top: var(--y); z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; font-size: 0.875rem; font-weight: 800; line-height: 1; text-decoration: none; color: var(--sahi-cyan); background: var(--sahi-bg-1); border: 2px solid var(--sahi-cyan); box-shadow: 0 0 0 4px var(--ocp1-pin-halo), 0 4px 14px rgba(var(--shade-ch), calc(0.65 * var(--k-shadow))); transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; } #oc-start a.ocp1-pin:hover, #oc-start a.ocp1-pin:focus-visible { transform: scale(1.14); color: var(--sahi-bg-1); background: var(--sahi-cyan); outline: 2px solid var(--text-1); outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { #oc-start a.ocp1-pin::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--sahi-cyan); opacity: 0; animation: ocp1-ping 3.2s ease-out infinite; pointer-events: none; } #oc-start a.ocp1-pin:nth-of-type(2)::after { animation-delay: 0.5s; } #oc-start a.ocp1-pin:nth-of-type(3)::after { animation-delay: 1s; } #oc-start a.ocp1-pin:nth-of-type(4)::after { animation-delay: 1.5s; } #oc-start a.ocp1-pin:nth-of-type(5)::after { animation-delay: 2s; } } @keyframes ocp1-ping { 0% { opacity: 0.7; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.9); } } @media (max-width: 700px) { #oc-start .ocp1-hero__stage { min-width: 680px; } #oc-start .ocp1-hero__hint { display: block; } } /* the five parts, as the pins' key */ #oc-start .ocp1-map { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; } #oc-start .ocp1-map a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 16px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--ocp1-tile); color: var(--text-2); font-weight: 400; text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease; } #oc-start .ocp1-map a:hover { border-color: rgba(var(--ocp1-hl-rgb), 0.45); background: rgba(var(--ocp1-hl-rgb), 0.04); } #oc-start .ocp1-map__k { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 0.9375rem; font-weight: 800; color: var(--sahi-cyan); background: var(--sahi-bg-1); border: 2px solid var(--sahi-cyan); } #oc-start .ocp1-map__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--text-3); } #oc-start .ocp1-map__t strong { font-size: 1.0625rem; color: var(--text-1); } #oc-start .ocp1-map__m { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 0.8125rem; line-height: 1.4; text-align: right; } #oc-start .ocp1-map__on { color: var(--sahi-cyan); font-weight: 600; } #oc-start .ocp1-map__n { color: var(--text-3); font-weight: 600; } @media (max-width: 640px) { #oc-start .ocp1-map a { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 14px; } #oc-start .ocp1-map__m { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; text-align: left; } } /* the analogy */ #oc-start .ocp1-analogy { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 28px 36px; align-items: center; margin: 40px 0; padding: 30px 32px; border-radius: 18px; transform: none; background: var(--ocp1-ana-bg); border: 1px solid var(--ocp1-ana-line); -webkit-backdrop-filter: none; backdrop-filter: none; } #oc-start .ocp1-analogy:hover { transform: none; box-shadow: 0 10px 40px rgba(var(--shade-ch), calc(0.3 * var(--k-shadow))); } #oc-start .ocp1-analogy__text > p:last-child { margin-bottom: 0; } #oc-start .ocp1-analogy :is(h3, h4) { margin-bottom: 14px; font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--ocp1-ana-ink); } .ocp1-cover { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ocp1-cover__plot { display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); align-items: end; height: 150px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.28); } .ocp1-cover__bars { display: flex; align-items: flex-end; gap: 5px; height: 100%; } .ocp1-cover__bar { flex: 1 1 0; min-width: 0; height: calc(var(--h) * 1%); border-radius: 4px 4px 0 0; } .ocp1-cover__bar--put { background: var(--ocp1-put-bar); } .ocp1-cover__bar--call { background: var(--ocp1-call-bar); } .ocp1-cover__spot { align-self: stretch; position: relative; display: flex; justify-content: center; } .ocp1-cover__spot::before { content: ""; position: absolute; top: 4px; bottom: 0; left: 50%; border-left: 2px dashed rgba(var(--ink-rgb), 0.55); } .ocp1-cover__spot b { position: relative; align-self: flex-start; padding: 0 6px; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; text-align: center; color: var(--text-1); background: var(--sahi-bg-1); border-radius: 4px; } .ocp1-cover__axis { display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; } .ocp1-cover__axis span { display: flex; flex-direction: column; gap: 1px; } .ocp1-cover__axis small { font-size: 0.8125rem; font-weight: 400; color: var(--text-3); } .ocp1-cover__axis .is-put { grid-column: 1; color: var(--toast-positive-text); } .ocp1-cover__axis .is-call { grid-column: 3; align-items: flex-end; text-align: right; color: var(--ocp1-call-ink); } .ocp1-cover figcaption { font-size: 0.8125rem; line-height: 1.45; color: var(--text-3); } @media (max-width: 800px) { #oc-start .ocp1-analogy { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: 22px; } .ocp1-cover { width: 100%; max-width: 520px; } } @media (max-width: 420px) { .ocp1-cover__plot, .ocp1-cover__axis { grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); } .ocp1-cover__bars { gap: 3px; } } /* ═══════════════════════════════════════════════════════════════════════════ 4. Cell Index: the gallery ═══════════════════════════════════════════════════════════════════════════ */ #oc-index .ocp1-bar { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 0; } #oc-index .ocp1-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } #oc-index input.ocp1-f { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } #oc-index .ocp1-filter label { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: 0.9375rem; font-weight: 600; color: var(--text-2); cursor: pointer; user-select: none; border: 1px solid var(--border-soft); background: rgba(var(--ink-rgb), 0.03); transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } #oc-index .ocp1-filter label i { font-style: normal; font-size: 0.8125rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--text-2); background: rgba(var(--ink-rgb), 0.07); } #oc-index .ocp1-filter label:hover { border-color: rgba(var(--ocp1-hl-rgb), 0.4); } #oc-index input.ocp1-f:checked + label { color: var(--text-1); border-color: rgba(var(--ocp1-hl-rgb), 0.55); background: rgba(var(--ocp1-hl-rgb), 0.1); } #oc-index input.ocp1-f:checked + label i { color: var(--sahi-bg-1); background: var(--sahi-cyan); } #oc-index input.ocp1-f:focus-visible + label { outline: 2px solid var(--sahi-cyan); outline-offset: 3px; } #oc-index .ocp1-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } @media (max-width: 768px) { #oc-index .ocp1-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-right: -16px; padding-right: 16px; } } #oc-index .ocp1-jump::-webkit-scrollbar { display: none; } #oc-index .ocp1-jump > span { flex: none; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; } #oc-index .ocp1-jump a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px; border-radius: 10px; font-size: 0.875rem; font-weight: 600; color: var(--text-2); text-decoration: none; border: 1px solid var(--border-soft); background: var(--ocp1-tile); } #oc-index .ocp1-jump a:hover { color: var(--text-1); border-color: var(--ocp1-pink-line); background: var(--ocp1-pink-wash-2); } #oc-index .ocp1-jump b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 0.8125rem; font-weight: 800; color: var(--on-accent); background: var(--ocp1-pink-fill-2); } #oc-index .ocp1-jump i { font-style: normal; font-size: 0.8125rem; font-weight: 700; color: var(--text-2); } #oc-index .ocp1-c { display: none; } #oc-index .ocp1-c--all { display: inline; } /* group heading */ #oc-index .ocp1-group { margin: 44px 0 0; scroll-margin-top: 24px; } #oc-index .ocp1-group__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k title n" ". blurb blurb"; gap: 2px 14px; align-items: center; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--border-soft); } #oc-index .ocp1-group__k { grid-area: k; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--on-accent); background: var(--ocp1-grad-group); background-color: var(--ocp1-solid); border: 1px solid var(--ocp1-group-line); } #oc-index .ocp1-group__head h3 { grid-area: title; margin: 0; font-size: 1.35rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--text-1); text-wrap: balance; } #oc-index .ocp1-group__n { grid-area: n; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-3); white-space: nowrap; } #oc-index .ocp1-n { display: none; } #oc-index .ocp1-n--all { display: inline; } #oc-index .ocp1-group__blurb { grid-area: blurb; font-size: 0.9375rem; line-height: 1.5; color: var(--text-3); } /* the tiles */ #oc-index .ocp1-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); } #oc-index .ocp1-cell { margin: 0; min-width: 0; } #oc-index .ocp1-cell--wide { grid-column: span 2; } #oc-index .ocp1-cell > a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--ocp1-tile); color: var(--text-2); font-weight: 400; text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } #oc-index .ocp1-cell > a:hover { border-color: rgba(var(--ocp1-hl-rgb), 0.5); background: rgba(var(--ocp1-hl-rgb), 0.045); transform: translateY(-2px); } #oc-index .ocp1-cell > a:focus-visible { outline: 2px solid var(--sahi-cyan); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { #oc-index .ocp1-cell > a:hover { transform: none; } } #oc-index .ocp1-cell__img { container-type: inline-size; display: flex; align-items: center; justify-content: center; gap: 10px; height: 172px; padding: 12px; background: var(--real-frame); border-bottom: 1px solid var(--border-soft); } #oc-index .ocp1-shot { position: relative; display: block; flex: none; line-height: 0; } #oc-index .ocp1-shot > img { display: block; width: auto; height: min(148px, calc((100cqw - (var(--n, 1) - 1) * 10px) / var(--n, 1) / var(--r, 1))); border-radius: 6px; } #oc-index .ocp1-hl { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); border: 2px solid var(--sahi-cyan); border-radius: 8px; box-shadow: 0 0 0 3px rgba(var(--ocp1-hl-rgb), 0.18); pointer-events: none; } /* High and Low: a crop of the real Customise list, the row that adds the cell */ #oc-index .ocp1-cell__img:has(.ocp1-shot--crop) { flex-direction: column; justify-content: space-between; gap: 6px; padding: 10px 12px 9px; } #oc-index .ocp1-shot--crop { --rh: 50; --r0: 20; --sc: 0.275; width: 100cqw; height: 122px; overflow: hidden; border-radius: 8px; flex: none; } #oc-index .ocp1-crop { position: absolute; inset: 0; display: block; } /* the capture is 1600px wide; scaled by --sc its rows are --rh px tall, and the picture is shifted so the High row starts at --r0 */ #oc-index .ocp1-crop > img { position: absolute; left: -6px; top: calc(var(--r0) * 1px - 483 * var(--sc) * 1px); width: calc(1600 * var(--sc) * 1px); max-width: none; height: auto; } #oc-index .ocp1-hl--row { left: 2%; width: 96%; top: calc(var(--r0) * 1px + var(--i) * var(--rh) * 1px + 1px); height: calc(var(--rh) * 1px - 2px); border-radius: 10px; } #oc-index .ocp1-shot__tag { flex: none; padding: 0 8px; border-radius: 6px; font-size: 0.8125rem; font-weight: 700; line-height: 1.5; color: var(--sahi-cyan); background: rgba(var(--ocp1-hl-rgb), 0.08); border: 1px solid rgba(var(--ocp1-hl-rgb), 0.35); } #oc-index .ocp1-cell__txt { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 13px 14px 14px; } #oc-index .ocp1-cell__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; } #oc-index .ocp1-cell__name { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; color: var(--text-1); } #oc-index .ocp1-badge { flex: none; padding: 1px 9px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.45; border: 1px solid transparent; } #oc-index .ocp1-badge--both { color: var(--text-2); background: rgba(var(--ink-rgb), 0.06); border-color: rgba(var(--ink-rgb), 0.18); } /* Advanced is the direction green in light (the mint highlight of the dark theme), Simple the brand pink: two names, two hues */ #oc-index .ocp1-badge--a { color: var(--toast-positive-text); background: color-mix(in srgb, var(--toast-positive-text) 9%, transparent); border-color: color-mix(in srgb, var(--toast-positive-text) 38%, transparent); } #oc-index .ocp1-badge--s { color: var(--sahi-accent-ink); background: var(--ocp1-pink-soft); border-color: var(--ocp1-badge-line); } #oc-index .ocp1-cell__what { font-size: 0.9rem; line-height: 1.45; color: var(--text-2); } #oc-index .ocp1-cell__note { font-size: 0.8125rem; line-height: 1.4; color: var(--text-3); } #oc-index .ocp1-cell__go { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: var(--sahi-cyan); } #oc-index .ocp1-cell__lbl { padding-top: 2px; } #oc-index .ocp1-cell__part { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 0.8125rem; font-weight: 800; line-height: 1; color: var(--on-accent); background: var(--ocp1-pink-fill); } /* Beside the Strike tile: how to read a tile */ #oc-index .ocp1-key { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; border: 1px dashed rgba(var(--ink-rgb), 0.2); border-radius: 14px; background: rgba(var(--ink-rgb), 0.015); } #oc-index .ocp1-key__t { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); } #oc-index .ocp1-key dl { display: grid; gap: 12px; margin: 0; } #oc-index .ocp1-key dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; } #oc-index .ocp1-key dt { display: flex; } #oc-index .ocp1-key dd { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--text-2); } /* the Simple / Advanced filter: radios, no script */ #oc-index:has(#ocp1-f-s:checked) .ocp1-cell:not([data-v~="s"]), #oc-index:has(#ocp1-f-a:checked) .ocp1-cell:not([data-v~="a"]) { display: none; } #oc-index:has(#ocp1-f-s:checked) .ocp1-group:not(:has(.ocp1-cell[data-v~="s"])), #oc-index:has(#ocp1-f-a:checked) .ocp1-group:not(:has(.ocp1-cell[data-v~="a"])) { display: none; } #oc-index:has(#ocp1-f-s:checked) .ocp1-n--all, #oc-index:has(#ocp1-f-a:checked) .ocp1-n--all, #oc-index:has(#ocp1-f-s:checked) .ocp1-c--all, #oc-index:has(#ocp1-f-a:checked) .ocp1-c--all { display: none; } #oc-index:has(#ocp1-f-s:checked) .ocp1-n--s, #oc-index:has(#ocp1-f-s:checked) .ocp1-c--s { display: inline; } #oc-index:has(#ocp1-f-a:checked) .ocp1-n--a, #oc-index:has(#ocp1-f-a:checked) .ocp1-c--a { display: inline; } #oc-index:has(#ocp1-f-s:checked) .ocp1-jump a:has(.ocp1-c--s[data-n="0"]), #oc-index:has(#ocp1-f-a:checked) .ocp1-jump a:has(.ocp1-c--a[data-n="0"]) { display: none; } @media (max-width: 768px) { #oc-index .ocp1-group { margin-top: 36px; } #oc-index .ocp1-group__head { grid-template-areas: "k title" ". n" ". blurb"; grid-template-columns: auto minmax(0, 1fr); } #oc-index .ocp1-group__head h3 { font-size: 1.2rem; } } @media (max-width: 560px) { #oc-index .ocp1-grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } #oc-index .ocp1-cell__img { height: 150px; padding: 10px; } #oc-index .ocp1-shot > img { height: min(128px, calc((100cqw - (var(--n, 1) - 1) * 10px) / var(--n, 1) / var(--r, 1))); } #oc-index .ocp1-shot--crop { --sc: 0.2375; --rh: 43.2; --r0: 16; height: 102px; } #oc-index .ocp1-crop > img { left: -4px; } #oc-index .ocp1-cell__txt { padding: 11px 11px 12px; } #oc-index .ocp1-cell__name { font-size: 1rem; } #oc-index .ocp1-cell__what { font-size: 0.875rem; } #oc-index .ocp1-filter label { min-height: 44px; padding: 0 14px; } } /* ── 06-specimens.css ── */ /* Cell specimens: the guide's frame around the app's own cells (scripts/guides/option-chain-parts/specimen.mjs). The cell inside is the tool's markup, labels and figures; this sheet only draws the card around it: a layered header band, a calm body, a soft lift on hover, a larger size for detail cards, and numbered callouts that attach to the cell's own parts. Dark is the default; light follows . Colours are the Sahi palette only. */ .ocs-spec { --ocs-head-hi: #242424; --ocs-head: #1A1A1A; --ocs-body: #0F0F0F; --ocs-rule: #272727; --ocs-edge: rgba(250, 250, 250, 0.09); --ocs-label: #A3A3A3; --ocs-ink: #FAFAFA; --ocs-up: #28BCD0; --ocs-down: #F6AEAB; --ocs-ring: #FC6AD0; --ocs-shadow: rgba(0, 0, 0, 0.38); position: relative; display: flex; flex-direction: column; flex: none; width: 176px; overflow: hidden; border-radius: 12px; background: var(--ocs-body); color: var(--ocs-ink); box-shadow: 0 0 0 1px var(--ocs-edge), 0 10px 26px var(--ocs-shadow); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } :root[data-theme="light"] .ocs-spec { --ocs-head-hi: #FAFAFA; --ocs-head: #F5F5F5; --ocs-body: #FFFFFF; --ocs-rule: #E6E6E6; --ocs-edge: rgba(15, 15, 15, 0.1); --ocs-label: #5F5F5F; --ocs-ink: #0F0F0F; --ocs-up: #14697A; --ocs-down: #AE2C27; --ocs-ring: #A50F66; --ocs-shadow: rgba(15, 15, 15, 0.1); } a:hover .ocs-spec, a:focus-visible .ocs-spec, .ocs-anno:hover .ocs-spec { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ocs-ring) 55%, transparent), 0 16px 32px var(--ocs-shadow); } /* header band: the column label, a faint sort caret, and a hairline under it */ .ocs-spec__th { position: relative; display: grid; place-items: center; min-height: 34px; padding: 0 26px; border-bottom: 1px solid var(--ocs-rule); background: linear-gradient(180deg, var(--ocs-head-hi), var(--ocs-head)); color: var(--ocs-label); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.2; text-align: center; text-transform: uppercase; white-space: nowrap; } .ocs-spec__th::after { content: ""; position: absolute; right: 11px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; opacity: 0.4; transform: rotate(45deg); } .ocs-spec__lbl { display: inline-flex; align-items: center; gap: 8px; } /* body: the figure, large and tabular */ .ocs-spec__t { width: 100%; margin: 0; border-collapse: collapse; background: var(--ocs-body); } .ocs-spec__t td { height: 88px; padding: 0 16px; border: 0; background: transparent; vertical-align: middle; text-align: center; color: var(--ocs-ink); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; font-variant-numeric: tabular-nums; } .ocs-spec__t td.val-up { color: var(--ocs-up); } .ocs-spec__t td.val-down { color: var(--ocs-down); } .ocs-spec__t td.metric-unavailable { color: var(--ocs-label); font-weight: 500; } /* LTP: the premium with today's change beneath it, as a quiet pill */ .ocs-spec .ltp-stack { display: grid; justify-items: center; gap: 6px; } .ocs-spec .ltp-value { font-size: 1.375rem; font-weight: 600; color: var(--ocs-ink); } /* The LTP cell is a