/* ========================================================================== Flumio – Scroll Sites Custom Theme Light: white + near-black primary | Dark: deep navy + light gray primary ========================================================================== */ /* ---------- Shared / Global Fonts ---------- */ @import url("https://fonts.googleapis.com/css2?family=Chivo:wght@400"); :root { --theme-headline-font: "Chivo", sans-serif; --theme-text-font: "Chivo", sans-serif; } /* ---------- Shared / Global Tokens ---------- */ :root { /* Roundness – Flumio uses moderately rounded corners */ --theme-roundness: 2; } /* ========================================================================== LIGHT THEME Flumio light: white background, dark text, near-black interactive elements ========================================================================== */ :root[data-color-scheme='light'] { /* -- Theme-level tokens -- */ --theme-text-color: #1F2937; --theme-headline-color: #111827; --theme-primary-color: #374151; --theme-on-primary-color: #FFFFFF; /* Header */ --theme-header-background-color: #F9FAFB; --theme-header-text-color: #1F2937; /* Footer */ --theme-footer-background-color: #F9FAFB; --theme-footer-text-color: #6B7280; /* Banner */ --theme-banner-background-color: #FFFFFF; --theme-banner-text-color: #1F2937; /* -- K15t design tokens -- */ /* Panels (Tips and Warnings) - Mapped to Brand Blue & Purple */ --K15t-icon-tip: #743EEC; /* Uses your --K15t-link blue */ --K15t-background-tip: rgba(116, 62, 236, 0.08); /* 8% opacity blue tint */ /* --K15t-icon-warning: #743EEC; Uses your --K15t-link-visited purple */ /* --K15t-background-warning: rgba(116, 62, 236, 0.08); 8% opacity purple tint */ /* Surfaces */ --K15t-surface: #FFFFFF; --K15t-surface-hovered: #F9FAFB; --K15t-surface-selected: #F3F4F6; --K15t-surface-raised: #F9FAFB; --K15t-surface-raised-hovered: #F3F4F6; --K15t-surface-overlay: #FFFFFF; /* Text */ --K15t-foreground: #1F2937; --K15t-foreground-subtle: #6B7280; --K15t-foreground-brand: #374151; /* Backgrounds */ --K15t-background-neutral: #F3F4F6; --K15t-background-neutral-hovered: #E5E7EB; --K15t-background-neutral-subtle: transparent; --K15t-background-neutral-subtle-hovered: #F3F4F6; --K15t-background-brand: #E5E7EB; --K15t-background-brand-hovered: #D1D5DB; --K15t-background-brand-strong: #374151; --K15t-background-brand-strong-hovered: #4B5563; --K15t-background-input: #FFFFFF; --K15t-background-input-hovered: #F9FAFB; /* Borders */ --K15t-border-neutral: #E5E7EB; --K15t-border-neutral-strong: #D1D5DB; --K15t-border-brand: #374151; --K15t-border-brand-strong: #4B5563; --K15t-border-input: #D1D5DB; --K15t-border-input-hovered: #374151; --K15t-border-input-selected: #374151; /* Links */ --K15t-link: #2B5FEA; /* A bright, visible blue */ --K15t-link-visited: #743EEC; /* A darker blue for visited */ /* Neutral palette */ --K15t-color-neutral-0: #FFFFFF; --K15t-color-neutral-25: #FAFAFA; --K15t-color-neutral-50: #F9FAFB; --K15t-color-neutral-75: #F3F4F6; --K15t-color-neutral-100: #E5E7EB; --K15t-color-neutral-200: #D1D5DB; --K15t-color-neutral-300: #9CA3AF; --K15t-color-neutral-400: #6B7280; --K15t-color-neutral-500: #4B5563; --K15t-color-neutral-600: #374151; --K15t-color-neutral-700: #1F2937; --K15t-color-neutral-800: #111827; --K15t-color-neutral-900: #0A0F1A; --K15t-color-neutral-1000: #050811; /* Brand palette (dark neutrals for light theme) */ --K15t-color-brand-25: #F9FAFB; --K15t-color-brand-50: #F3F4F6; --K15t-color-brand-75: #E5E7EB; --K15t-color-brand-100: #D1D5DB; --K15t-color-brand-200: #9CA3AF; --K15t-color-brand-300: #6B7280; --K15t-color-brand-400: #4B5563; --K15t-color-brand-500: #374151; --K15t-color-brand-600: #1F2937; --K15t-color-brand-700: #111827; --K15t-color-brand-800: #0A0F1A; --K15t-color-brand-900: #050811; } /* ========================================================================== DARK THEME Flumio dark: deep navy #0A0F1A, light gray interactive elements ========================================================================== */ :root[data-color-scheme='dark'] { /* -- Theme-level tokens -- */ --theme-text-color: #E5E7EB; --theme-headline-color: #F9FAFB; --theme-primary-color: #E5E7EB; --theme-on-primary-color: #0A0F1A; /* Header */ --theme-header-background-color: #0D1320; --theme-header-text-color: #E5E7EB; /* Footer */ --theme-footer-background-color: #0D1320; --theme-footer-text-color: #9CA3AF; /* Banner */ --theme-banner-background-color: #0B101B; --theme-banner-text-color: #E5E7EB; /* -- K15t design tokens -- */ /* Panels (Tips and Warnings) - Mapped to Brand Blue & Purple */ --K15t-icon-tip: #AE8DF5; /* Uses your --K15t-link dark mode blue */ --K15t-background-tip: rgba(174, 141, 245, 0.12); /* 12% opacity blue tint */ /* --K15t-icon-warning: #AE8DF5; /* Uses your --K15t-link-visited dark mode purple */ /* --K15t-background-warning: rgba(174, 141, 245, 0.12); 12% opacity purple tint */ /* Surfaces – dark navy progression */ --K15t-surface: #0A0F1A; --K15t-surface-hovered: #111827; --K15t-surface-selected: #1A2332; --K15t-surface-raised: #111827; --K15t-surface-raised-hovered: #1A2332; --K15t-surface-raised-selected: #1F2D40; --K15t-surface-overlay: #1A2332; --K15t-surface-overlay-hovered: #1F2D40; /* Text */ --K15t-foreground: #E5E7EB; --K15t-foreground-subtle: #9CA3AF; --K15t-foreground-brand: #E5E7EB; /* Backgrounds */ --K15t-background-neutral: #1A2332; --K15t-background-neutral-hovered: #1F2D40; --K15t-background-neutral-pressed: #24364D; --K15t-background-neutral-subtle: transparent; --K15t-background-neutral-subtle-hovered: #1A2332; --K15t-background-neutral-subtle-pressed: #1F2D40; --K15t-background-neutral-strong: #6B7280; --K15t-background-neutral-strong-hovered: #4B5563; --K15t-background-brand: #1A2332; --K15t-background-brand-hovered: #1F2D40; --K15t-background-brand-strong: #E5E7EB; --K15t-background-brand-strong-hovered: #F9FAFB; --K15t-background-input: #111827; --K15t-background-input-hovered: #1A2332; /* Borders */ --K15t-border-neutral: #1F2D40; --K15t-border-neutral-strong: #374151; --K15t-border-brand: #E5E7EB; --K15t-border-brand-strong: #F9FAFB; --K15t-border-input: #374151; --K15t-border-input-hovered: #E5E7EB; --K15t-border-input-selected: #E5E7EB; /* Links */ --K15t-link: #7CA1F9; /* A lighter, high-contrast blue for dark mode */ --K15t-link-visited: #AE8DF5; /* A slightly deeper blue for visited */ /* Blanket & shadow */ --K15t-blanket: rgba(5, 8, 17, 0.7); /* Neutral palette (navy progression) */ --K15t-color-neutral-0: #050811; --K15t-color-neutral-25: #080C16; --K15t-color-neutral-50: #0A0F1A; --K15t-color-neutral-75: #0D1320; --K15t-color-neutral-100: #111827; --K15t-color-neutral-200: #1A2332; --K15t-color-neutral-300: #1F2D40; --K15t-color-neutral-400: #374151; --K15t-color-neutral-500: #4B5563; --K15t-color-neutral-600: #6B7280; --K15t-color-neutral-700: #9CA3AF; --K15t-color-neutral-800: #D1D5DB; --K15t-color-neutral-900: #E5E7EB; --K15t-color-neutral-1000: #F9FAFB; /* Brand palette (light neutrals for dark theme) */ --K15t-color-brand-25: #0D1320; --K15t-color-brand-50: #111827; --K15t-color-brand-75: #1A2332; --K15t-color-brand-100: #1F2D40; --K15t-color-brand-200: #374151; --K15t-color-brand-300: #4B5563; --K15t-color-brand-400: #6B7280; --K15t-color-brand-500: #9CA3AF; --K15t-color-brand-600: #D1D5DB; --K15t-color-brand-700: #E5E7EB; --K15t-color-brand-800: #F3F4F6; --K15t-color-brand-900: #F9FAFB; } /* ========================================================================== DARK THEME – Banner gradient override The --theme-banner-background-color token only accepts flat colors, so we apply the gradient directly to the banner element. ========================================================================== */ /* :root[data-color-scheme='dark'] .scroll-site-banner, :root[data-color-scheme='dark'] [class*="banner"] { background: linear-gradient(180deg,rgba(13, 19, 32, 1) 0%, rgba(123, 126, 233, 0.34) 50%, rgba(11, 16, 27, 1) 100% ) !important; } :root[data-color-scheme='light'] .scroll-site-banner, :root[data-color-scheme='light'] [class*="banner"] { background: linear-gradient(180deg,rgba(249, 250, 251, 1) 0%, rgba(123, 126, 233, 0.34) 50%, rgba(255, 255, 255, 1) 100% ) !important; } */ /* ========================================================================== DARK THEME – Header picker hover override (TEST: purple) ========================================================================== */ :root[data-color-scheme='dark'] .header-pickers mode-picker .picker { --_background-color-active: #1A2332 !important; } /* ========================================================================== FORCE VISITED LINK COLORS ========================================================================== */ /* Light Theme Visited Links */ :root[data-color-scheme='light'] .sp-page-content a:visited { color: var(--K15t-link-visited) !important; } /* Dark Theme Visited Links */ :root[data-color-scheme='dark'] .sp-page-content a:visited { color: var(--K15t-link-visited) !important; } /* ========================================================================== 1. LIGHT MODE (DEFAULT) - HIDE ALL DARK VARIANTS ========================================================================== */ /* Hide the dark image itself */ img[alt*="dark" i], img[title*="dark" i], img[src*="dark" i] { display: none !important; } /* Hide the tight wrappers to remove legends and empty spacing. Notice p, div, and li are NOT here, so your text is safe! The :not(:has(img[..."light"...])) guard prevents hiding wrappers (like the header logo ) that contain BOTH a light and a dark img. */ figure:has(img[alt*="dark" i]):not(:has(img[alt*="light" i])), figure:has(img[title*="dark" i]):not(:has(img[title*="light" i])), figure:has(img[src*="dark" i]):not(:has(img[src*="light" i])), span:has(img[alt*="dark" i]):not(:has(img[alt*="light" i])), span:has(img[title*="dark" i]):not(:has(img[title*="light" i])), span:has(img[src*="dark" i]):not(:has(img[src*="light" i])), a:has(img[alt*="dark" i]):not(:has(img[alt*="light" i])), a:has(img[title*="dark" i]):not(:has(img[title*="light" i])), a:has(img[src*="dark" i]):not(:has(img[src*="light" i])) { display: none !important; } /* Hide the outermost Scroll Sites image wrapper (removes empty space from lightbox + figure) */ div.theme-block-image:has(img[alt*="dark" i]):not(:has(img[alt*="light" i])), div.theme-block-image:has(img[title*="dark" i]):not(:has(img[title*="light" i])), div.theme-block-image:has(img[src*="dark" i]):not(:has(img[src*="light" i])) { display: none !important; } /* ========================================================================== 2. DARK MODE (ACTIVE) - HIDE LIGHT VARIANTS ========================================================================== */ /* Hide the light image */ html[data-color-scheme="dark"] img[alt*="light" i], html[data-color-scheme="dark"] img[title*="light" i], html[data-color-scheme="dark"] img[src*="light" i] { display: none !important; } /* Hide the tight wrappers to remove legends and empty spacing */ html[data-color-scheme="dark"] figure:has(img[alt*="light" i]), html[data-color-scheme="dark"] figure:has(img[title*="light" i]), html[data-color-scheme="dark"] figure:has(img[src*="light" i]), html[data-color-scheme="dark"] span:has(img[alt*="light" i]), html[data-color-scheme="dark"] span:has(img[title*="light" i]), html[data-color-scheme="dark"] span:has(img[src*="light" i]), html[data-color-scheme="dark"] a:has(img[alt*="light" i]), html[data-color-scheme="dark"] a:has(img[title*="light" i]), html[data-color-scheme="dark"] a:has(img[src*="light" i]) { display: none !important; } /* Hide the outermost Scroll Sites image wrapper */ html[data-color-scheme="dark"] div.theme-block-image:has(img[alt*="light" i]), html[data-color-scheme="dark"] div.theme-block-image:has(img[title*="light" i]), html[data-color-scheme="dark"] div.theme-block-image:has(img[src*="light" i]) { display: none !important; } /* ========================================================================== 3. DARK MODE (ACTIVE) - REVEAL DARK VARIANTS ========================================================================== */ /* Un-hide the dark image */ html[data-color-scheme="dark"] img[alt*="dark" i], html[data-color-scheme="dark"] img[title*="dark" i], html[data-color-scheme="dark"] img[src*="dark" i] { display: inline-block !important; } /* Un-hide the block wrappers (Figures containing legends) */ html[data-color-scheme="dark"] figure:has(img[alt*="dark" i]), html[data-color-scheme="dark"] figure:has(img[title*="dark" i]), html[data-color-scheme="dark"] figure:has(img[src*="dark" i]) { display: flex !important; } /* Un-hide the outermost Scroll Sites image wrapper */ html[data-color-scheme="dark"] div.theme-block-image:has(img[alt*="dark" i]), html[data-color-scheme="dark"] div.theme-block-image:has(img[title*="dark" i]), html[data-color-scheme="dark"] div.theme-block-image:has(img[src*="dark" i]) { display: block !important; } /* Un-hide the inline wrappers (Spans and Links) */ html[data-color-scheme="dark"] span:has(img[alt*="dark" i]), html[data-color-scheme="dark"] span:has(img[title*="dark" i]), html[data-color-scheme="dark"] span:has(img[src*="dark" i]), html[data-color-scheme="dark"] a:has(img[alt*="dark" i]), html[data-color-scheme="dark"] a:has(img[title*="dark" i]), html[data-color-scheme="dark"] a:has(img[src*="dark" i]) { display: inline-block !important; } /* ========================================================================== VIDEO: 1. LIGHT MODE (DEFAULT) - HIDE ALL DARK VARIANTS ========================================================================== */ /* Hide the dark video directly via the filename */ video[src*="dark" i] { display: none !important; } /* Hide the parent wrapper AND paragraph to remove blank spaces */ p:has(video[src*="dark" i]), div:has(video[src*="dark" i]), figure:has(video[src*="dark" i]), span:has(video[src*="dark" i]) { display: none !important; } /* ========================================================================== VIDEO: 2. DARK MODE (ACTIVE) - HIDE LIGHT VARIANTS ========================================================================== */ /* Hide the light video */ html[data-color-scheme="dark"] video[src*="light" i] { display: none !important; } /* Hide the parent wrapper AND paragraph */ html[data-color-scheme="dark"] p:has(video[src*="light" i]), html[data-color-scheme="dark"] div:has(video[src*="light" i]), html[data-color-scheme="dark"] figure:has(video[src*="light" i]), html[data-color-scheme="dark"] span:has(video[src*="light" i]) { display: none !important; } /* ========================================================================== VIDEO: 3. DARK MODE (ACTIVE) - REVEAL DARK VARIANTS ========================================================================== */ /* Un-hide the dark video */ html[data-color-scheme="dark"] video[src*="dark" i] { display: inline-block !important; } /* Un-hide the parent wrapper AND paragraph */ html[data-color-scheme="dark"] p:has(video[src*="dark" i]), html[data-color-scheme="dark"] div:has(video[src*="dark" i]), html[data-color-scheme="dark"] figure:has(video[src*="dark" i]), html[data-color-scheme="dark"] span:has(video[src*="dark" i]) { display: block !important; } /* ========================================================================== FIGCAPTION CENTERING Ensures legends are centered for both images and videos. ========================================================================== */ figure[data-align="align-center"] > figcaption, figure.block-image[data-align="align-center"] > figcaption, div.theme-block-image figcaption { text-align: center !important; } /* ========================================================================== SIDEBAR / TREE ITEM ACTIVE HOVER STATES ========================================================================== */ /* Light Theme Variant */ :root[data-color-scheme='light'] .tree-item-header:has(> [aria-current=page]) > .tree-action:is(:hover, :focus-visible) { background-color: #546176; } /* Dark Theme Variant */ :root[data-color-scheme='dark'] .tree-item-header:has(> [aria-current=page]) > .tree-action:is(:hover, :focus-visible) { /* Uses a slightly darker shade than the dark theme primary (#E5E7EB) for the hover effect */ background-color: #D1D5DB; color: #0A0F1A; /* Ensures the text remains readable against the light hover background */ } /* ========================================================================== COLLAPSIBLE-SPECIFIC OVERRIDES Scoping the surface tokens so buttons remain unaffected. ========================================================================== */ /* Target the collapsible wrapper (K15t typically uses details or .sp-macro-expand) */ details, .sp-macro-expand { /* This forces the collapsible to use the base surface tokens just for itself */ --K15t-surface-raised: var(--K15t-surface) !important; --K15t-surface-raised-hovered: var(--K15t-surface-hovered) !important; } /* ========================================================================== COLLAPSIBLE SECTIONS (EXPAND) Make expand headers bold ========================================================================== */ details.expand summary.expand-control { font-weight: bold !important; }