/* ══════════════════════════════════════════════════════════════ DARK MODE — Ocuport (dashboard + editor) ══════════════════════════════════════════════════════════════ Active when does NOT have `.light-mode` class (dashboard toggles this via the moon icon, editor inherits). Base palette: • Body / canvas #1F1F1F (graphite, slight warmth) • Elevated panel #252525 (slightly lighter for hierarchy) • Modal surface #2a2a2a (further elevated, glass effect) • Slide backdrop #161616 (darker than body so cards lift) • Text primary #eaeaea (90% white, easy on eyes) • Text muted #9a9a9a (zinc-400 equivalent) • Borders rgba(255,255,255, 0.06 → 0.20) • Accent (unchanged) teal #45d0bd + blue #44b6e9 gradient Specificity strategy: scope every override under `body:not(.light-mode) ` so existing light-mode rules stay intact and the toggle works by adding/removing one class. ────────────────────────────────────────────────────────────── */ /* ── Tokens (referencable by future code) ───────────────────────── */ body:not(.light-mode) { --bg-canvas: #000000; --bg-elevated: #1a1c22; --bg-overlay: #2a2a2a; --slide-backdrop: #050505; --text-primary: #eaeaea; --text-secondary: #cccccc; --text-muted: #9a9a9a; --text-tertiary: #666666; --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.20); --hover-wash: rgba(255,255,255,0.06); --active-wash: rgba(69, 208, 189, 0.10); --modal-surface: rgba(26, 28, 34, 0.82); --modal-border: rgba(255,255,255,0.08); --modal-overlay: rgba(0,0,0,0.65); --modal-shadow: 0 32px 96px -16px rgba(0,0,0,0.75); background-color: #000000; color: #eaeaea; } /* ── Dashboard surfaces ─────────────────────────────────────────── */ body:not(.light-mode) .hero-section { background: #000000; } body:not(.light-mode) .dashboard.hero-style { background: #000000; } /* Tile-mosaic — same grid layout as light mode, but draw with white at low alpha on the dark background so the pattern is visible (light mode used dark ink #231F20 on light bg, dark mode flips that). */ body:not(.light-mode) .hero-section .tile-mosaic { background: /* solid tiles (matches light's 6 blocks) */ linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.025)) 96px 96px / 96px 96px no-repeat, linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.025)) 1056px 96px / 96px 96px no-repeat, linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.025)) 768px 480px / 96px 96px no-repeat, linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.025)) 192px 768px / 96px 96px no-repeat, linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)) 1440px 192px / 96px 96px no-repeat, linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)) 1152px 384px / 96px 96px no-repeat, /* diagonal-striped tiles */ repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 6px) 384px 192px / 96px 96px no-repeat, repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 6px) 1248px 480px / 96px 96px no-repeat, /* the underlying 96px grid lines */ linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 96px 96px, linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 96px 96px, #000000; } /* Gradient-wave — atmospheric brand glow. Visible enough to feel present but not "patchy hot spot". Two stacked radials: ▸ Wide low-alpha pool centered around the card row ▸ Smaller brighter core near 60% Y to feel like the cards "sit on" a soft light beam */ body:not(.light-mode) .hero-section .gradient-wave { background: radial-gradient(ellipse 70% 50% at 50% 55%, rgba(69, 208, 189, 0.10) 0%, rgba(68, 182, 233, 0.05) 40%, transparent 75%), radial-gradient(ellipse 40% 25% at 50% 60%, rgba(120, 220, 200, 0.08) 0%, transparent 70%); } body:not(.light-mode) .hero-title, body:not(.light-mode) .dash-title { color: #eaeaea; } body:not(.light-mode) .hero-sub, body:not(.light-mode) .hero-lead { color: #b3b3b3; } /* Override hero text tokens so every element using `var(--hero-text)` (entry-card titles + descriptions, hero subtitle, etc.) flips white instead of staying dark-navy and disappearing on the dark canvas. */ body:not(.light-mode) { --hero-text: #f0f0f0; --hero-text-2: rgba(255, 255, 255, 0.78); --hero-text-3: rgba(255, 255, 255, 0.55); --hero-bg: #1F1F1F; } /* Entry cards — premium dark glass: ▸ Layered background — top-vignette shimmer + center brand bloom + semi-transparent navy base (semi-transparent so backdrop-filter blur actually picks up something from behind). ▸ Backdrop-filter blur + saturate — real glass refraction, not just an opaque dark fill. ▸ Double inset highlight — bright white at the top (light source from above) + faint teal-blue tint at the bottom (brand color reflection bouncing off the dark room). ▸ Stepped outer shadow — three drop layers (close+mid+far) + a wide ambient brand-color halo to softly anchor the card to the canvas. ▸ Icon badge stays transparent — icon floats directly on the surface, matching light mode. */ body:not(.light-mode) .entry-card, body:not(.light-mode) button.entry-card { /* Premium dark card — matches Rainy's reference (Apple-style dark promo card with corner brand-glow spill + edge light bleed). Recipe: ▸ Halftone dot pattern at very low alpha (0.025) — adds surface texture without becoming a visible pattern ▸ Bottom-left internal brand glow — teal→blue radial bleeding in from the corner toward the card center (NOT outer halo); this is the "inner light source" the reference calls for ▸ Near-black solid base under the layers ▸ Large border-radius (24px) + hairline white border ▸ Double inset edge-light: `inset 0 0 0 1px` ring + `inset 0 0 24px -4px` bleed pulls a faint light line in from all four edges, matching reference's "周围的发光边" cue ▸ Stepped outer shadow for ground-shadow depth */ /* Double-clip background: ▸ INNER (padding-box): halftone texture + bottom-left brand bloom + near-black base — what shows inside the border. ▸ BORDER RING (border-box): conic gradient that paints a thin colored light line tracing all four edges of the card. Teal at top, blue down the right, brightest brand-teal at the bottom-left (matching the internal glow origin), lighter mix elsewhere. This is the "彩色描边" effect Rainy pointed at in the reference. */ background: radial-gradient(circle, rgba(255, 255, 255, 0.025) 0.6px, transparent 1.2px) 0 0 / 9px 9px padding-box, radial-gradient(ellipse 85% 70% at 5% 100%, rgba(69, 208, 189, 0.26) 0%, rgba(68, 182, 233, 0.16) 28%, rgba(68, 182, 233, 0.06) 55%, transparent 78%) padding-box, linear-gradient(180deg, #181b21 0%, #0e1015 100%) padding-box, /* BORDER RING — two light sources on the diagonal: ▸ Secondary at top-right (cooler, lighter, accent for balance) ▸ Primary at bottom-left (brand teal, brightest, follows the internal bloom origin) Together they trace the rim with brighter diagonal corners, softer middle-edges, like indirect light bouncing off two sources rather than one. */ radial-gradient(ellipse 55% 55% at 95% 0%, rgba(170, 215, 240, 0.28) 0%, rgba(170, 215, 240, 0.08) 35%, transparent 55% ) border-box, radial-gradient(ellipse 130% 130% at 5% 100%, rgba(69, 208, 189, 0.95) 0%, rgba(68, 182, 233, 0.55) 25%, rgba(120, 220, 200, 0.20) 50%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.02) 100% ) border-box; border: 1px solid transparent; border-radius: 24px; backdrop-filter: none; -webkit-backdrop-filter: none; color: #f0f0f0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.50), 0 8px 24px -6px rgba(0, 0, 0, 0.60), 0 32px 64px -16px rgba(0, 0, 0, 0.70); } body:not(.light-mode) .entry-card:hover { /* Hover — internal brand bloom intensifies + edge light brightens + a soft outer brand halo activates for tactile feedback */ /* Hover — brighten the conic ring + intensify internal bloom + add a soft outer brand halo. */ background: radial-gradient(circle, rgba(255, 255, 255, 0.025) 0.6px, transparent 1.2px) 0 0 / 9px 9px padding-box, radial-gradient(ellipse 85% 70% at 5% 100%, rgba(69, 208, 189, 0.38) 0%, rgba(68, 182, 233, 0.22) 28%, rgba(68, 182, 233, 0.08) 55%, transparent 78%) padding-box, linear-gradient(180deg, #1b1e24 0%, #101218 100%) padding-box, /* Hover — both light sources brighten */ radial-gradient(ellipse 60% 60% at 95% 0%, rgba(180, 225, 245, 0.45) 0%, rgba(180, 225, 245, 0.14) 35%, transparent 55% ) border-box, radial-gradient(ellipse 140% 140% at 5% 100%, rgba(69, 208, 189, 1.0) 0%, rgba(68, 182, 233, 0.75) 25%, rgba(120, 220, 200, 0.35) 50%, rgba(255, 255, 255, 0.10) 80%, rgba(255, 255, 255, 0.04) 100% ) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(0, 0, 0, 0.55), 0 12px 32px -6px rgba(0, 0, 0, 0.70), 0 32px 64px -16px rgba(0, 0, 0, 0.75), 0 0 64px -12px rgba(69, 208, 189, 0.30); } body:not(.light-mode) .entry-title { color: #f0f0f0; letter-spacing: -0.01em; } body:not(.light-mode) .entry-desc { color: rgba(255, 255, 255, 0.62); } /* Icon badge — fully transparent (no fill, no frame, no shadow). The icon SVG already carries its gradient color which pops on dark. */ body:not(.light-mode) .entry-badge { background: transparent !important; border: none !important; box-shadow: none !important; } body:not(.light-mode) .entry-title { color: #f0f0f0; } body:not(.light-mode) .entry-desc { color: rgba(255, 255, 255, 0.65); } /* Icon badge — transparent, no fill, no border. Match light mode where the icon sits directly on the card surface. The icon's own gradient color (teal/blue/purple) already pops on the dark backdrop. */ body:not(.light-mode) .entry-badge { background: transparent; border: none; box-shadow: none; } /* Browse templates CTA / quick action chips (Convert PDF, Open File). Light-mode has a bright `inset 0 1px 1px rgba(255,255,255,0.95)` top highlight and a teal outer glow — both look out of place on a dark canvas (they read as artificial bright ringing). Reset the whole box-shadow + use a calm dark glass treatment. */ body:not(.light-mode) .secondary-btn, body:not(.light-mode) .dash-quick-action { /* Match the entry-card recipe at button scale — Rainy: btn 亮度要和卡片对齐. Same dual-clip trick: ▸ INNER (padding-box): bottom-left brand bloom + near-black base so the grid behind the button never bleeds through. ▸ BORDER (border-box): bright teal→blue gradient ring tracing the perimeter, brightest at bottom-left, secondary cool light at top-right — same diagonal light sources as the cards. */ background: /* Inner fill — clean near-black, no internal bloom (Rainy: 内部左下角的微 bloom 不要). */ linear-gradient(180deg, #181b21 0%, #0e1015 100%) padding-box, /* BORDER ring — restrained: most of the perimeter stays a soft neutral white-on-dark hairline; only the bottom-left corner picks up a hint of brand teal as a subtle accent. */ radial-gradient(ellipse 70% 90% at 0% 100%, rgba(69, 208, 189, 0.45) 0%, rgba(68, 182, 233, 0.18) 25%, rgba(255, 255, 255, 0.10) 60%, rgba(255, 255, 255, 0.08) 100% ) border-box !important; border: 1px solid transparent !important; color: #eaeaea !important; backdrop-filter: none; -webkit-backdrop-filter: none; /* Subtle outer brand halo bleeds onto the page bg — Rainy: 外发光要. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 16px -4px rgba(0, 0, 0, 0.55), 0 0 32px -8px rgba(69, 208, 189, 0.30) !important; } body:not(.light-mode) .secondary-btn:hover { /* Hover — brighten both bloom + ring + add soft brand halo */ background: /* Inner fill — clean near-black, no internal bloom. */ linear-gradient(180deg, #1b1e24 0%, #101218 100%) padding-box, /* Hover — bloom corner on the border brightens a touch. */ radial-gradient(ellipse 75% 95% at 0% 100%, rgba(69, 208, 189, 0.65) 0%, rgba(68, 182, 233, 0.26) 25%, rgba(255, 255, 255, 0.14) 60%, rgba(255, 255, 255, 0.10) 100% ) border-box !important; color: #ffffff !important; /* Hover — outer halo intensifies. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 20px -4px rgba(0, 0, 0, 0.60), 0 0 48px -8px rgba(69, 208, 189, 0.45) !important; } /* Animated "light flowing along the border" on hover — a small light spark that travels along the button's rectangular perimeter using CSS `offset-path: inset(...)`. Unlike a `rotate()` animation around the button's center (which moves the spark in a circular orbit and moves faster on the wide edges than the short ones), `offset-path` walks the spark at constant speed along the path itself, so it feels like real light tracing the border rectangle. */ body:not(.light-mode) .secondary-btn { position: relative; } body:not(.light-mode) .secondary-btn::before { content: ''; position: absolute; /* The spark itself — small horizontal gradient lozenge */ width: 48px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent 0%, rgba(69, 208, 189, 0.95) 50%, rgba(68, 182, 233, 0.8) 75%, transparent 100%); filter: blur(0.8px); box-shadow: 0 0 8px rgba(69, 208, 189, 0.6); /* Walk this spark along the rounded-rectangle path traced by the button's border. `inset(0)` snaps to the parent box edge; `round` matches the button's 12px border-radius so corners curve. */ offset-path: inset(0 round 12px); offset-distance: 0%; offset-rotate: auto; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 2; } body:not(.light-mode) .secondary-btn:hover::before { opacity: 1; animation: sec-btn-light-trace 2.4s linear infinite; } @keyframes sec-btn-light-trace { to { offset-distance: 100%; } } body:not(.light-mode) .secondary-btn svg { color: rgba(255, 255, 255, 0.55); } body:not(.light-mode) .secondary-btn:hover svg { color: #ffffff; } /* Style cards (frosted glass on lavender) — flip to dark glass */ body:not(.light-mode) .section-styles .style-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px -8px rgba(0,0,0,0.45), 0 18px 36px -16px rgba(0,0,0,0.55); } body:not(.light-mode) .section-styles .style-card::before { opacity: 0.12; } body:not(.light-mode) .style-name, body:not(.light-mode) .style-foot { color: #eaeaea; } /* Floating header / theme toggle */ body:not(.light-mode) .dash-theme-btn, body:not(.light-mode) .dash-signin-btn, body:not(.light-mode) .dash-avatar-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #eaeaea; } body:not(.light-mode) .dash-theme-btn:hover, body:not(.light-mode) .dash-signin-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); } /* Auth gate already has dark — refine */ body:not(.light-mode) #authGate { background: rgba(15,15,15,0.92); } body:not(.light-mode) .auth-gate-card { background: #2a2a2a; border-color: rgba(255,255,255,0.08); color: #eaeaea; } body:not(.light-mode) .auth-gate-card h2 { color: #eaeaea; } body:not(.light-mode) .auth-gate-card p { color: #a8a8a8; } /* Cloud deck cards (Your Decks list) — same recipe as entry-cards but restrained (utility tiles, not hero CTAs): ▸ INNER (padding-box): near-black solid base — no internal bloom. ▸ BORDER ring (border-box): hairline white + a hint of brand teal at the bottom-left corner, matching the secondary-btn treatment. ▸ Outer halo: very faint teal bleed at rest, slightly stronger on hover for tactile feedback. Also: deck-thumb background flipped to transparent so the card's own surface flows through — removes the gray seam-line between thumbnail and footer that Rainy flagged. */ /* Deck cards — Rainy: restore the original (pre-ph10) look. Soft top radial highlight + neutral dark linear base + backdrop-filter for frosted depth. Hover lifts only via border + shadow (no top inset teal glow — that read as a green smear and was rejected). The only change kept from the cleanup pass: .deck-thumb is transparent so the card surface flows through (kills the gray seam Rainy flagged between thumbnail and footer). */ body:not(.light-mode) .deck-card { background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 60%), linear-gradient(180deg, rgba(30, 33, 40, 0.95) 0%, rgba(20, 22, 28, 0.97) 100%); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); color: #eaeaea; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 16px -6px rgba(0, 0, 0, 0.40); } body:not(.light-mode) .deck-card:hover { background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 60%), linear-gradient(180deg, rgba(34, 37, 45, 0.96) 0%, rgba(22, 24, 30, 0.97) 100%); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 4px rgba(0, 0, 0, 0.30), 0 12px 28px -4px rgba(0, 0, 0, 0.50); } /* Thumb shares the card's surface — kills the seam between thumb and footer. (Rainy flagged the visible band there.) */ body:not(.light-mode) .deck-thumb { background: transparent; color: #8a8a8a; } body:not(.light-mode) .deck-name { color: #eaeaea; } body:not(.light-mode) .deck-info { color: #9a9a9a; } body:not(.light-mode) .deck-thumb-text { color: rgba(255, 255, 255, 0.40); } /* "Your Decks" section heading + see-more link */ body:not(.light-mode) .section-decks h2, body:not(.light-mode) .decks-heading, body:not(.light-mode) #recentDecksHeading { color: #f0f0f0; } body:not(.light-mode) .see-more-link, body:not(.light-mode) .more-decks-link { color: #9a9a9a; } body:not(.light-mode) .see-more-link:hover, body:not(.light-mode) .more-decks-link:hover { color: #45d0bd; } /* Grid pattern for "Pull data from Biostate" section. The HTML for this section has no `.tile-mosaic` child (unlike the hero / template sections), so we paint the 96px grid directly via ::before. Same pattern as light mode's tile-mosaic but white-on-dark. */ body:not(.light-mode) .section-integrations { position: relative; } body:not(.light-mode) .section-integrations::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: /* a few scattered solid tiles for visual interest */ linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02)) 192px 96px / 96px 96px no-repeat, linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02)) 1248px 192px / 96px 96px no-repeat, /* diagonal hatched accents */ repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 6px) 384px 96px / 96px 96px no-repeat, /* the 96px grid lines (the main pattern) */ linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 96px 96px, linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 96px 96px; } body:not(.light-mode) .section-integrations > * { position: relative; z-index: 1; } /* "Pull data from Biostate" section — Ocupath / Ocuseq / Ocuflow cards. iOS Widget / macOS Notification language: the card chrome is calm neutral dark glass (so all 3 cards read as a coherent set), and the visual focus shifts to the LEFT-side icon block — which gets a brand-color glow ring per product, making the 3 products visually distinct at a glance. The light-mode rule uses !important on background/border/box-shadow so we mirror with !important to win the cascade. */ body:not(.light-mode) .section-integrations .integration-card { background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 60%), linear-gradient(180deg, rgba(30, 33, 40, 0.95) 0%, rgba(20, 22, 28, 0.97) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 16px -6px rgba(0, 0, 0, 0.40), 0 18px 36px -16px rgba(0, 0, 0, 0.50) !important; } body:not(.light-mode) .section-integrations .integration-card[data-product="ocupath"]:hover, body:not(.light-mode) .section-integrations .integration-card[data-product="ocuseq"]:hover { background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 60%), linear-gradient(180deg, rgba(34, 37, 45, 0.96) 0%, rgba(22, 24, 30, 0.97) 100%) !important; border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 32px -6px rgba(0, 0, 0, 0.55) !important; } body:not(.light-mode) .integ-name { color: #f0f0f0; } body:not(.light-mode) .integ-desc, body:not(.light-mode) .integ-status, body:not(.light-mode) .integ-status-pill { color: rgba(255, 255, 255, 0.65); } /* Status pill background — keep colored ring but dark-tinted fill */ body:not(.light-mode) .integ-status-pill { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); } /* Icon tiles — iOS-Widget treatment: each is a "glowing app icon" that's the visual focus of its card. Same recipe across products, just swap the brand color: ▸ Background: rich diagonal gradient (deeper at bottom, brand-color at top) so the icon block has dimension, not flat alpha. ▸ Inset top highlight: glossy "lit-from-above" sheen. ▸ Outer glow: a soft brand-color halo bleeds onto the card surface around the icon — this is the "developed app icon emitting light" effect. */ body:not(.light-mode) .integ-icon { position: relative; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.30), 0 0 24px -4px var(--icon-glow, rgba(69, 208, 189, 0.50)); } body:not(.light-mode) .ocupath-icon { --icon-glow: rgba(69, 208, 189, 0.55); background: linear-gradient(150deg, rgba(69, 208, 189, 0.45) 0%, rgba(16, 128, 128, 0.32) 100%); } body:not(.light-mode) .ocuseq-icon { --icon-glow: rgba(130, 88, 200, 0.55); background: linear-gradient(150deg, rgba(130, 88, 200, 0.50) 0%, rgba(72, 38, 130, 0.35) 100%); } body:not(.light-mode) .ocuflow-icon { --icon-glow: rgba(44, 132, 200, 0.40); background: linear-gradient(150deg, rgba(44, 132, 200, 0.38) 0%, rgba(26, 76, 130, 0.28) 100%); } /* "Pull data from Biostate" section heading — flip to white */ body:not(.light-mode) .section-integrations h2, body:not(.light-mode) .integrations-heading { color: #f0f0f0; } /* ── Editor surfaces ────────────────────────────────────────────── */ /* Blank-flavor slide backdrop (was lavender in light mode) */ body:not(.light-mode):has(.slide[data-flavor="blank"]) { background: #161616; } /* Slide manager panel base */ body:not(.light-mode) .slide-manager-panel { background: #252525; border-right-color: rgba(255,255,255,0.06); box-shadow: 2px 0 12px rgba(0,0,0,0.35); } body:not(.light-mode) .sm-header, body:not(.light-mode) .sm-footer { border-color: rgba(255,255,255,0.06); } body:not(.light-mode) .sm-title { color: #9a9a9a; } body:not(.light-mode) .sm-thumb { background: transparent; } body:not(.light-mode) .sm-thumb.active { background: rgba(69,208,189,0.08); } body:not(.light-mode) .sm-thumb-num { color: #9a9a9a; } body:not(.light-mode) .sm-thumb-label { color: #cccccc; } body:not(.light-mode) .sm-thumb-preview { background: #1a1a1a; border-color: rgba(255,255,255,0.06); } /* Sorter modal (when sm-panel goes modal-mode) */ body:not(.light-mode) .slide-manager-panel.sorter-mode { background: #2a2a2a; box-shadow: 0 32px 96px -16px rgba(0,0,0,0.7); } body:not(.light-mode) body.sorter-mode::before { background: rgba(0,0,0,0.55); } body:not(.light-mode) .slide-manager-panel.sorter-mode .sm-header { border-bottom-color: rgba(255,255,255,0.06); } body:not(.light-mode) .slide-manager-panel.sorter-mode .sm-thumb-label { color: #cccccc; } body:not(.light-mode) .slide-manager-panel.sorter-mode .sm-thumb-num { color: #777; } body:not(.light-mode) .slide-manager-panel.sorter-mode .sm-sorter-close { color: #9a9a9a; } body:not(.light-mode) .slide-manager-panel.sorter-mode .sm-sorter-close:hover { background: rgba(255,255,255,0.08); color: #eaeaea; } body:not(.light-mode) .slide-manager-panel.sorter-mode .sm-thumb-preview { border-color: rgba(255,255,255,0.08); } body:not(.light-mode) .slide-manager-panel.sorter-mode .sm-thumb:hover .sm-thumb-preview { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -8px rgba(0,0,0,0.6); } /* Picker modal (Browse Layouts) */ body:not(.light-mode) .layout-picker-overlay { background: rgba(0,0,0,0.55); } body:not(.light-mode) .layout-picker-content { background: rgba(42,42,42,0.85); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 32px 96px -16px rgba(0,0,0,0.75); } body:not(.light-mode) .layout-picker-header h2 { color: #eaeaea; } body:not(.light-mode) .layout-picker-close { color: #9a9a9a; } body:not(.light-mode) .layout-picker-close:hover { background: rgba(255,255,255,0.08); color: #eaeaea; } body:not(.light-mode) .layout-picker-preview { background: #1a1a1a; border-color: rgba(255,255,255,0.08); box-shadow: 0 1px 2px rgba(0,0,0,0.3); } body:not(.light-mode) .layout-picker-card:hover .layout-picker-preview { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -8px rgba(0,0,0,0.6); } body:not(.light-mode) .layout-picker-label { color: #cccccc; } /* Sidebar toggle (edge tab when panel closed) */ body:not(.light-mode) .sidebar-toggle-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #9a9a9a; } body:not(.light-mode) .sidebar-toggle-btn:hover { background: rgba(69,208,189,0.10); border-color: rgba(69,208,189,0.30); color: #45d0bd; } /* Top toolbar buttons (download / chat / settings etc.) */ body:not(.light-mode) .toolbar-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #9a9a9a; } body:not(.light-mode) .toolbar-btn:hover { background: rgba(69,208,189,0.12); border-color: rgba(69,208,189,0.30); color: #45d0bd; } /* Add slide dropdown (footer button) — keep gradient CTA but dark menu */ body:not(.light-mode) .sm-add-menu { background: #2a2a2a; border-color: rgba(255,255,255,0.08); box-shadow: 0 12px 32px -8px rgba(0,0,0,0.55); } body:not(.light-mode) .sm-add-opt-title { color: #eaeaea; } body:not(.light-mode) .sm-add-opt-sub { color: #9a9a9a; } body:not(.light-mode) .sm-add-opt:hover { background: rgba(255,255,255,0.05); } body:not(.light-mode) .sm-add-opt svg { stroke: #cccccc; } /* Insert object popover (toolbar dropdown, if shown) */ body:not(.light-mode) .insert-object-menu, body:not(.light-mode) .insert-popover { background: #2a2a2a; border-color: rgba(255,255,255,0.08); color: #eaeaea; } /* Generate-with-AI modal — refine surfaces (already partial dark) */ body:not(.light-mode) .gen-modal-overlay { background: rgba(0,0,0,0.55); } body:not(.light-mode) .gen-modal { background: rgba(42,42,42,0.88); border-color: rgba(255,255,255,0.08); color: #eaeaea; } body:not(.light-mode) .gen-modal-header h2, body:not(.light-mode) .gen-modal-title { color: #eaeaea; } /* Inspector / popovers (catch-all) */ body:not(.light-mode) .inspector-panel, body:not(.light-mode) .fmt-popover, body:not(.light-mode) .font-picker-panel, body:not(.light-mode) .layer-panel, body:not(.light-mode) .context-menu { background: #2a2a2a; border-color: rgba(255,255,255,0.08); color: #eaeaea; } /* Format toolbar is always white (Olivia 2026-06-24 "toolbar 变成白底"), even in dark mode — so its controls need dark text/borders here too. */ body:not(.light-mode) .format-toolbar { background: #ffffff; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 6px 24px rgba(0,0,0,0.28); } body:not(.light-mode) .fmt-btn, body:not(.light-mode) .fmt-step, body:not(.light-mode) .fmt-size-input, body:not(.light-mode) .fmt-font-name, body:not(.light-mode) .fmt-font-btn, body:not(.light-mode) .fmt-color-a { color: #1e3347; } body:not(.light-mode) .fmt-btn:hover, body:not(.light-mode) .fmt-step:hover, body:not(.light-mode) .fmt-font-btn:hover { background: rgba(0,133,119,0.1); color: #008577; } body:not(.light-mode) .fmt-btn.active { background: rgba(0,133,119,0.15); color: #008577; } body:not(.light-mode) .fmt-sep { background: rgba(0,0,0,0.1); } body:not(.light-mode) .fmt-size-stepper, body:not(.light-mode) .fmt-font-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); } /* ── Brand logo theme swap ───────────────────────────────────────── Every chrome logo site renders BOTH wordmark PNGs (bright = black text for light UI, dark = white text for dark UI) and the theme class picks one. The bright-only version vanished on dark headers (Rainy 2026-07-17 "dark mood啥都没做啊"). */ .ocu-logo-dark { display: none !important; } body:not(.light-mode) .ocu-logo-bright { display: none !important; } body:not(.light-mode) .ocu-logo-dark { display: block !important; } /* AI-Image entry icon: the light-mint panel (#93EFDE→#46D2BA) glows like a sticker on dark cards (Rainy 2026-07-17 "dark mood的icon不太好"). Inline-SVG gradient stops are CSS-stylable — deepen the panel and calm the gloss in dark mode; the white sun/mountain glyphs read cleanly on the deeper teal. Light mode untouched. */ body:not(.light-mode) #aiimg-panel stop:first-child { stop-color: #2FA893; } body:not(.light-mode) #aiimg-panel stop:last-child { stop-color: #1C6E62; } body:not(.light-mode) #aiimg-gloss stop:first-child { stop-opacity: 0.16; } /* My-decks pager: solid-white chips glared on the dark grid (Rainy 2026-07-17 "深色模式的切页也不太好"). */ body:not(.light-mode) .dk-page-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #c3cbd3; } body:not(.light-mode) .dk-page-btn:hover:not(:disabled):not(.is-active) { background: rgba(255,255,255,.12); } body:not(.light-mode) .dk-page-btn.is-active { background: var(--color-accent, #45d0bd); border-color: transparent; color: #fff; } body:not(.light-mode) .dk-page-dots { color: #7d8790; }