/* ============================================================ OptionsPlay Research — Content Design System This stylesheet provides the visual language for all research content on research.optionsplay.com. Tony's posts reference this file to get consistent typography, colors, components. USAGE: HTML posts: React posts: import content-tokens.js for JS color objects THEME: Light by default. Add data-theme="dark" to for dark. DO NOT hardcode colors in post content — use these classes. ============================================================ */ /* --- Fonts --- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap'); /* --- Theme Tokens (Light) --- */ :root { /* Font stacks */ --op-font-display: 'Playfair Display', Georgia, serif; --op-font-mono: 'IBM Plex Mono', monospace; --op-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Surfaces */ --op-bg: #f8f9fc; --op-card: #ffffff; --op-card-alt: #f1f3f8; --op-border: #e2e5ef; --op-border-light: #d0d5e3; /* Brand accents */ --op-accent: #b8860b; --op-accent-bright: #d4a017; --op-green: #7AC143; /* Semantic colors */ --op-red: #dc2626; --op-red-bright: #e11d48; --op-green-pos: #16a34a; --op-green-bright: #15803d; --op-blue: #2563eb; --op-teal: #0d9488; --op-purple: #7c3aed; /* Rating colors */ --op-overweight: #16a34a; --op-equal-weight: #2563eb; --op-underweight: #ca8a04; --op-avoid: #dc2626; /* Text */ --op-text: #1a1d2b; --op-text-soft: #3d4356; --op-text-dim: #7c829e; /* Category palette (charts, pie, allocation bars) */ --op-cat-1: #f59e0b; /* Commodities / Gold */ --op-cat-2: #ef4444; /* Energy */ --op-cat-3: #3b82f6; /* Fixed Income */ --op-cat-4: #22c55e; /* Defensive / Value */ --op-cat-5: #8b5cf6; /* Short Duration */ --op-cat-6: #14b8a6; /* Currencies / Alts */ /* Newsletter palette (from sample.html) */ --op-nl-blue: #0068b3; --op-nl-green: #7AC143; --op-nl-red: #c60651; --op-nl-gold: #c49b00; --op-nl-bg: #f5f7fa; --op-nl-border: #D8DFE8; --op-nl-text: #4a5e70; --op-nl-muted: #8899aa; --op-nl-dark: #1a2a3a; /* Spacing scale */ --op-space-xs: 4px; --op-space-sm: 8px; --op-space-md: 16px; --op-space-lg: 24px; --op-space-xl: 40px; --op-space-2xl: 80px; /* Radii */ --op-radius-sm: 4px; --op-radius-md: 8px; --op-radius-lg: 12px; --op-radius-xl: 14px; /* Shadows */ --op-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --op-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --op-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1); /* Layout */ --op-content-width: 1200px; } /* --- Theme Tokens (Dark) --- */ [data-theme="dark"] { --op-bg: #08090d; --op-card: #0f1219; --op-card-alt: #141820; --op-border: #1a1f2e; --op-border-light: #252b3d; --op-accent: #d4a017; --op-accent-bright: #f5c518; --op-red-bright: #f43f5e; --op-green-bright: #22c55e; --op-overweight: #22c55e; --op-equal-weight: #3b82f6; --op-underweight: #eab308; --op-avoid: #ef4444; --op-text: #e8edf5; --op-text-soft: #b0b8cc; --op-text-dim: #6b7394; --op-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --op-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --op-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); } /* ================================================================= BASE RESET & TYPOGRAPHY ================================================================= */ .op-content { font-family: var(--op-font-body); color: var(--op-text); background: var(--op-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } .op-content *, .op-content *::before, .op-content *::after { box-sizing: border-box; } .op-content a { color: var(--op-blue); text-decoration: none; } .op-content a:hover { text-decoration: underline; } /* --- Headings --- */ .op-display { font-family: var(--op-font-display); font-weight: 900; line-height: 1.1; letter-spacing: -0.5px; color: var(--op-text); } .op-display-xl { font-size: clamp(40px, 7vw, 80px); line-height: 1.0; } .op-display-lg { font-size: clamp(28px, 4.5vw, 52px); } .op-display-md { font-size: clamp(22px, 3vw, 36px); } .op-display-sm { font-size: 20px; } .op-display em, .op-display i, .op-display-xl em, .op-display-lg em, .op-display-md em { font-style: italic; } .op-mono { font-family: var(--op-font-mono); } .op-body { font-size: 15px; color: var(--op-text-soft); line-height: 1.7; max-width: 700px; } .op-body-sm { font-size: 13px; color: var(--op-text-soft); line-height: 1.6; } /* --- Section label (uppercase category above heading) --- */ .op-section-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; display: block; margin-bottom: 10px; } /* --- Kicker (uppercase small label in cards) --- */ .op-kicker { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--op-text-dim); margin-bottom: 12px; } /* ================================================================= LAYOUT ================================================================= */ .op-container { max-width: var(--op-content-width); margin: 0 auto; padding: 0 20px; } .op-section { padding-top: var(--op-space-2xl); padding-bottom: var(--op-space-2xl); } /* Grid helpers */ .op-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--op-space-md); } .op-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--op-space-md); } .op-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--op-space-md); } @media (max-width: 768px) { .op-grid-2, .op-grid-3, .op-grid-4 { grid-template-columns: 1fr; } } /* ================================================================= CARDS ================================================================= */ .op-card { background: var(--op-card); border-radius: var(--op-radius-xl); border: 1px solid var(--op-border); padding: var(--op-space-lg); } .op-card-alt { background: var(--op-card-alt); border-radius: var(--op-radius-xl); border: 1px solid var(--op-border); padding: var(--op-space-lg); } /* Card with colored top border */ .op-card-accent-red { border-top: 3px solid var(--op-red); } .op-card-accent-green { border-top: 3px solid var(--op-green-pos); } .op-card-accent-blue { border-top: 3px solid var(--op-blue); } .op-card-accent-purple { border-top: 3px solid var(--op-purple); } .op-card-accent-gold { border-top: 3px solid var(--op-accent); } .op-card-accent-teal { border-top: 3px solid var(--op-teal); } /* Card with colored left border */ .op-card-left-red { border-left: 4px solid var(--op-red); } .op-card-left-green { border-left: 4px solid var(--op-green-pos); } .op-card-left-blue { border-left: 4px solid var(--op-blue); } .op-card-left-gold { border-left: 4px solid var(--op-accent); } .op-card-left-purple { border-left: 4px solid var(--op-purple); } .op-card-left-teal { border-left: 4px solid var(--op-teal); } /* Hover lift */ .op-card-hover { transition: all 0.25s; cursor: default; } .op-card-hover:hover { transform: translateY(-2px); box-shadow: var(--op-shadow-lg); } /* Tinted cards (for scenarios, callouts) */ .op-card-tint-red { background: rgba(220, 38, 38, 0.04); border: 1px solid rgba(220, 38, 38, 0.15); border-radius: var(--op-radius-xl); padding: var(--op-space-lg); } .op-card-tint-green { background: rgba(22, 163, 74, 0.04); border: 1px solid rgba(22, 163, 74, 0.15); border-radius: var(--op-radius-xl); padding: var(--op-space-lg); } .op-card-tint-gold { background: rgba(184, 134, 11, 0.06); border: 1px solid rgba(184, 134, 11, 0.18); border-radius: var(--op-radius-xl); padding: var(--op-space-lg); } /* ================================================================= CALLOUT / ALERT BOXES ================================================================= */ .op-callout { padding: 14px 16px; border-radius: var(--op-radius-md); font-size: 13px; line-height: 1.6; display: flex; gap: 10px; align-items: flex-start; } .op-callout-red { background: rgba(220, 38, 38, 0.05); border: 1px solid rgba(220, 38, 38, 0.12); color: var(--op-red); } .op-callout-green { background: rgba(22, 163, 74, 0.05); border: 1px solid rgba(22, 163, 74, 0.12); color: var(--op-green-pos); } .op-callout-blue { background: rgba(37, 99, 235, 0.05); border: 1px solid rgba(37, 99, 235, 0.12); color: var(--op-blue); } .op-callout-gold { background: rgba(184, 134, 11, 0.06); border: 1px solid rgba(184, 134, 11, 0.15); color: var(--op-accent); } /* Centered callout (for key insights) */ .op-callout-center { text-align: center; padding: var(--op-space-lg); border-radius: var(--op-radius-lg); background: linear-gradient(135deg, rgba(184, 134, 11, 0.06), rgba(220, 38, 38, 0.03)); border: 1px solid rgba(184, 134, 11, 0.18); } .op-callout-center p { font-size: 15px; color: var(--op-text); line-height: 1.7; } /* ================================================================= BADGES & RATINGS ================================================================= */ .op-badge { display: inline-block; padding: 2px 10px; border-radius: var(--op-radius-sm); font-size: 10px; font-weight: 700; font-family: var(--op-font-mono); letter-spacing: 0.5px; text-transform: uppercase; } .op-badge-overweight { background: rgba(22, 163, 74, 0.09); color: var(--op-overweight); border: 1px solid rgba(22, 163, 74, 0.2); } .op-badge-equal { background: rgba(37, 99, 235, 0.09); color: var(--op-equal-weight); border: 1px solid rgba(37, 99, 235, 0.2); } .op-badge-underweight { background: rgba(202, 138, 4, 0.09); color: var(--op-underweight); border: 1px solid rgba(202, 138, 4, 0.2); } .op-badge-avoid { background: rgba(220, 38, 38, 0.09); color: var(--op-avoid); border: 1px solid rgba(220, 38, 38, 0.2); } /* Sentiment badges (for newsletter-style content) */ .op-badge-bearish { background: rgba(198, 6, 81, 0.08); color: var(--op-nl-red); border: 1px solid rgba(198, 6, 81, 0.2); } .op-badge-bullish { background: rgba(95, 163, 50, 0.08); color: var(--op-nl-green); border: 1px solid rgba(95, 163, 50, 0.2); } .op-badge-neutral { background: rgba(196, 155, 0, 0.08); color: var(--op-nl-gold); border: 1px solid rgba(196, 155, 0, 0.2); } /* ================================================================= SCORE BAR ================================================================= */ .op-score-bar { display: flex; align-items: center; gap: 8px; } .op-score-bar-track { width: 100px; height: 5px; background: var(--op-border); border-radius: 3px; overflow: hidden; } .op-score-bar-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease; } .op-score-bar-value { font-size: 11px; font-weight: 700; font-family: var(--op-font-mono); } /* ================================================================= STAT GRIDS (Hero counters, scorecard cells) ================================================================= */ .op-stat-grid { display: grid; gap: 2px; border-radius: var(--op-radius-xl); overflow: hidden; } .op-stat-grid-4 { grid-template-columns: repeat(4, 1fr); } .op-stat-grid-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 640px) { .op-stat-grid-4 { grid-template-columns: repeat(2, 1fr); } .op-stat-grid-5 { grid-template-columns: repeat(2, 1fr); } } .op-stat-cell { background: var(--op-card); padding: 28px 20px; } .op-stat-value { font-family: var(--op-font-mono); font-size: 36px; font-weight: 700; line-height: 1; margin-bottom: 4px; } .op-stat-label { font-size: 12px; color: var(--op-text-soft); font-weight: 600; margin-bottom: 6px; } .op-stat-sub { font-family: var(--op-font-mono); font-size: 10px; color: var(--op-text-dim); } /* ================================================================= TICKER STRIP (Newsletter-style) ================================================================= */ .op-ticker-strip { background: var(--op-nl-bg); border: 1px solid var(--op-nl-border); border-radius: var(--op-radius-md); display: flex; overflow-x: auto; } [data-theme="dark"] .op-ticker-strip { background: var(--op-card-alt); border-color: var(--op-border); } .op-ticker-cell { flex: 1; padding: 10px 8px; text-align: center; border-right: 1px solid var(--op-nl-border); min-width: 90px; } [data-theme="dark"] .op-ticker-cell { border-right-color: var(--op-border); } .op-ticker-cell:last-child { border-right: none; } .op-ticker-symbol { font-size: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--op-text-dim); } .op-ticker-price { font-size: 14px; font-weight: 700; margin-top: 2px; } .op-ticker-change { font-size: 10px; } /* ================================================================= SCORECARD (Newsletter-style data cards) ================================================================= */ .op-scorecard { display: flex; flex-wrap: wrap; gap: 8px; } .op-scorecard-cell { flex: 1 1 calc(20% - 8px); min-width: 120px; background: var(--op-nl-bg); border: 1px solid var(--op-nl-border); border-radius: var(--op-radius-md); padding: 12px; text-align: center; } [data-theme="dark"] .op-scorecard-cell { background: var(--op-card-alt); border-color: var(--op-border); } .op-scorecard-cell-red { border-top: 3px solid var(--op-red); } .op-scorecard-cell-green { border-top: 3px solid var(--op-green-pos); } .op-scorecard-cell-gold { border-top: 3px solid var(--op-accent); } .op-scorecard-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--op-text-dim); } .op-scorecard-value { font-size: 17px; font-weight: 700; margin-top: 3px; } .op-scorecard-detail { font-size: 11px; margin-top: 2px; } .op-scorecard-note { font-size: 10px; margin-top: 3px; color: var(--op-text-dim); } /* ================================================================= INFO PANELS (Market overview, week ahead) ================================================================= */ .op-info-panel { background: var(--op-nl-bg); border: 1px solid var(--op-nl-border); border-radius: var(--op-radius-md); padding: 16px 20px; } [data-theme="dark"] .op-info-panel { background: var(--op-card-alt); border-color: var(--op-border); } .op-info-panel-blue { border-left: 4px solid var(--op-nl-blue); } .op-info-panel-green { border-left: 4px solid var(--op-nl-green); } .op-info-panel-red { border-left: 4px solid var(--op-red); } .op-info-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .op-info-panel-body { font-size: 13px; color: var(--op-nl-text); line-height: 1.65; } [data-theme="dark"] .op-info-panel-body { color: var(--op-text-soft); } /* ================================================================= RISK MONITOR (Deep Red / Yellow / Green) ================================================================= */ .op-risk-monitor { border-radius: 10px; overflow: hidden; } .op-risk-header-red { background: linear-gradient(135deg, #8B0000, #B71C3C); padding: 10px 20px; color: #fff; } .op-risk-header-yellow { background: linear-gradient(135deg, #b8860b, #d4a017); padding: 10px 20px; color: #fff; } .op-risk-header-green { background: linear-gradient(135deg, #15803d, #22c55e); padding: 10px 20px; color: #fff; } .op-risk-header-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .op-risk-body { padding: 16px 20px; } .op-risk-body-red { background: #fdf2f5; border: 1px solid #F0C5D3; border-top: none; } [data-theme="dark"] .op-risk-body-red { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.15); } /* Indicator pills */ .op-indicator-pass { background: #f0fff0; border: 1px solid #B5E8B5; border-radius: var(--op-radius-sm); padding: 6px 10px; font-size: 10px; } [data-theme="dark"] .op-indicator-pass { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.2); } .op-indicator-fail { background: #fff5f8; border: 1px solid #F0D0DA; border-radius: var(--op-radius-sm); padding: 6px 10px; font-size: 10px; } [data-theme="dark"] .op-indicator-fail { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.15); } .op-indicator-warn { background: #fffde8; border: 1px solid #E8E0A0; border-radius: var(--op-radius-sm); padding: 6px 10px; font-size: 10px; } [data-theme="dark"] .op-indicator-warn { background: rgba(184, 134, 11, 0.06); border-color: rgba(184, 134, 11, 0.15); } /* ================================================================= SESSION DRIVERS (2-column bearish/bullish cards) ================================================================= */ .op-driver { background: var(--op-nl-bg); border: 1px solid var(--op-nl-border); border-radius: var(--op-radius-md); padding: 14px 16px; } [data-theme="dark"] .op-driver { background: var(--op-card-alt); border-color: var(--op-border); } .op-driver-red { border-left: 4px solid var(--op-red); } .op-driver-green { border-left: 4px solid var(--op-green-pos); } .op-driver-gold { border-left: 4px solid var(--op-accent); } .op-driver-blue { border-left: 4px solid var(--op-blue); } .op-driver-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; } .op-driver-title { font-size: 13px; font-weight: 700; color: var(--op-text); margin-bottom: 4px; } .op-driver-body { font-size: 12px; color: var(--op-text-soft); line-height: 1.5; } [data-theme="dark"] .op-driver-body { color: var(--op-text-soft); } /* ================================================================= DATA TABLES ================================================================= */ .op-table { width: 100%; border-collapse: collapse; } .op-table thead tr { border-bottom: 2px solid var(--op-border); } .op-table th { padding: 12px 14px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--op-text-dim); text-align: left; white-space: nowrap; } .op-table th.right { text-align: right; } .op-table tbody tr { border-bottom: 1px solid rgba(226, 229, 239, 0.12); transition: background 0.2s; } .op-table tbody tr:hover { background: var(--op-card-alt); } .op-table td { padding: 10px 14px; font-size: 12px; color: var(--op-text); } .op-table td.mono { font-family: var(--op-font-mono); } .op-table td.dim { color: var(--op-text-dim); font-size: 11px; } .op-table td.right { text-align: right; } /* ================================================================= FILTER BUTTONS (ETF tracker tabs) ================================================================= */ .op-filter-group { display: flex; gap: 8px; flex-wrap: wrap; } .op-filter-btn { padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--op-card); color: var(--op-text-dim); border: 1px solid var(--op-border); cursor: pointer; transition: all 0.15s; } .op-filter-btn:hover { opacity: 0.85; } .op-filter-btn.active { border-color: currentColor; } /* ================================================================= STICKY NAV (for long-form interactive reports) ================================================================= */ .op-sticky-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0 20px; transition: all 0.3s; } .op-sticky-nav.scrolled { background: rgba(248, 249, 252, 0.93); backdrop-filter: blur(16px); border-bottom: 1px solid var(--op-border); } [data-theme="dark"] .op-sticky-nav.scrolled { background: rgba(8, 9, 13, 0.93); } .op-sticky-nav-inner { max-width: var(--op-content-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 56px; } .op-sticky-nav-links { display: flex; gap: 2px; overflow-x: auto; } .op-sticky-nav-link { padding: 5px 10px; border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--op-text-dim); white-space: nowrap; cursor: pointer; transition: all 0.2s; } .op-sticky-nav-link:hover { color: var(--op-accent-bright); } .op-sticky-nav-link.active { font-weight: 700; color: var(--op-accent-bright); background: rgba(184, 134, 11, 0.06); } /* ================================================================= CRISIS PULSE (animated red dot) ================================================================= */ @keyframes op-pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 0 20px 4px rgba(220, 38, 38, 0.15); } } .op-pulse-red { width: 10px; height: 10px; border-radius: 50%; background: var(--op-red); animation: op-pulse-red 2s ease infinite; } /* ================================================================= COMPARISON TABLE (Then vs Now) ================================================================= */ .op-compare-row { display: grid; grid-template-columns: 170px 36px 1fr 1fr; gap: 12px; align-items: center; background: var(--op-card); border-radius: 10px; border: 1px solid var(--op-border); padding: 12px 16px; } @media (max-width: 768px) { .op-compare-row { grid-template-columns: 1fr; gap: 6px; } } .op-compare-indicator { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .op-compare-better { background: rgba(22, 163, 74, 0.09); color: var(--op-green-bright); } .op-compare-worse { background: rgba(220, 38, 38, 0.09); color: var(--op-red); } /* ================================================================= HORIZONTAL BAR CHART ================================================================= */ .op-bar-row { display: grid; grid-template-columns: 110px 1fr 180px; align-items: center; gap: 12px; margin-bottom: 12px; } .op-bar-track { position: relative; height: 22px; border-radius: var(--op-radius-sm); overflow: hidden; } .op-bar-fill { height: 100%; border-radius: var(--op-radius-sm); display: flex; align-items: center; padding-left: 10px; transition: width 1.2s ease; } .op-bar-fill-value { font-family: var(--op-font-mono); font-size: 12px; font-weight: 700; color: #fff; } .op-bar-annotation { font-family: var(--op-font-mono); font-size: 10px; color: var(--op-text-dim); text-align: right; } /* ================================================================= AUTHOR FOOTER ================================================================= */ .op-author-footer { margin-top: var(--op-space-2xl); padding-top: 28px; border-top: 1px solid var(--op-border); display: flex; justify-content: space-between; align-items: center; } .op-author-name { font-size: 13px; font-weight: 700; color: var(--op-text); } .op-author-title { font-size: 11px; color: var(--op-text-dim); } .op-author-legal { font-size: 10px; color: var(--op-text-dim); text-align: right; } /* ================================================================= COLOR UTILITIES (for inline use) ================================================================= */ .op-text-red { color: var(--op-red); } .op-text-green { color: var(--op-green-pos); } .op-text-blue { color: var(--op-blue); } .op-text-purple { color: var(--op-purple); } .op-text-teal { color: var(--op-teal); } .op-text-gold { color: var(--op-accent); } .op-text-dim { color: var(--op-text-dim); } .op-text-soft { color: var(--op-text-soft); } .op-bg-red { background: rgba(220, 38, 38, 0.06); } .op-bg-green { background: rgba(22, 163, 74, 0.06); } .op-bg-blue { background: rgba(37, 99, 235, 0.06); } .op-font-mono { font-family: var(--op-font-mono); } .op-font-display { font-family: var(--op-font-display); } .op-bold { font-weight: 700; } /* ================================================================= BACK TO INDEX (floating button for standalone posts) ================================================================= */ .op-back-float { position: fixed; top: 12px; left: 12px; z-index: 200; display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 20px; font-family: var(--op-font-body); font-size: 12px; font-weight: 600; color: var(--op-text-dim); background: rgba(255, 255, 255, 0.85); border: 1px solid var(--op-border); backdrop-filter: blur(10px); text-decoration: none; transition: all 0.2s; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .op-back-float:hover { color: var(--op-text); background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); text-decoration: none; } [data-theme="dark"] .op-back-float { color: var(--op-text-dim); background: rgba(15, 18, 25, 0.85); border-color: var(--op-border); } [data-theme="dark"] .op-back-float:hover { color: var(--op-text); background: rgba(15, 18, 25, 0.95); } /* ================================================================= SCROLLBAR (light touch) ================================================================= */ .op-content ::-webkit-scrollbar { width: 5px; } .op-content ::-webkit-scrollbar-track { background: var(--op-bg); } .op-content ::-webkit-scrollbar-thumb { background: var(--op-border); border-radius: 3px; }