/* SLC runtime CSS segment 05-critical-theme. Generated by tools/build-css-bundles.ps1; do not edit directly. */ /* ========================================================================== */ /* Source: assets/css/slc-theme-blue.css */ /* ========================================================================== */ /* * SLC color theme: Soft Blue * Layer 1 — primitives and the active-theme reference contract. * * A future color theme should live in its own slc-theme-.css file, * target :root[data-slc-theme=""] and define every --slc-ref-* token * below. Components must not consume the --slc-blue-* primitives directly. */ :root:not([data-slc-theme]), :root[data-slc-theme="blue"] { /* Blue primitives */ --slc-blue-25: #f8fcff; --slc-blue-50: #edf5fb; --slc-blue-100: #e4f0f8; --slc-blue-150: #d7e9f5; --slc-blue-300: #8bc6e3; --slc-blue-500: #2e86bd; --slc-blue-700: #176a9f; --slc-blue-800: #125681; --slc-blue-900: #193f5a; --slc-blue-950: #12324d; /* Supporting primitives */ --slc-steel-700: #496b82; --slc-steel-800: #315c77; --slc-neutral-white: #ffffff; --slc-yellow-500: #d6a516; --slc-yellow-700: #ae8615; --slc-violet-700: #5a4b8a; --slc-warm-700: #8c492c; /* Active-theme references: the required contract for every color theme. */ --slc-ref-canvas-top: var(--slc-blue-25); --slc-ref-canvas: var(--slc-blue-50); --slc-ref-surface: var(--slc-neutral-white); --slc-ref-surface-muted: var(--slc-blue-100); --slc-ref-surface-strong: var(--slc-blue-150); --slc-ref-ink-strong: var(--slc-blue-950); --slc-ref-ink: var(--slc-steel-800); --slc-ref-ink-muted: var(--slc-steel-700); --slc-ref-accent: var(--slc-blue-500); --slc-ref-action: var(--slc-blue-700); --slc-ref-action-hover: var(--slc-blue-800); --slc-ref-accent-on-dark: var(--slc-blue-300); --slc-ref-on-action: var(--slc-neutral-white); --slc-ref-highlight: var(--slc-yellow-500); --slc-ref-highlight-strong: var(--slc-yellow-700); --slc-ref-content-violet: var(--slc-violet-700); --slc-ref-content-warm: var(--slc-warm-700); --slc-ref-steel-900: var(--slc-blue-900); /* RGB channels let the shared system create alpha colors without raw hues. */ --slc-ref-accent-rgb: 46 134 189; --slc-ref-accent-light-rgb: 104 183 222; --slc-ref-accent-on-dark-rgb: 139 198 227; --slc-ref-accent-deep-rgb: 23 91 132; --slc-ref-ink-rgb: 18 50 77; --slc-ref-surface-rgb: 251 253 255; --slc-ref-shadow-rgb: 30 83 115; --slc-ref-white-rgb: 255 255 255; /* Raster icon recoloring belongs to the color theme, not the component. */ --slc-ref-icon-filter: brightness(0) saturate(100%) invert(35%) sepia(56%) saturate(938%) hue-rotate(160deg) brightness(87%) contrast(91%); } /* ========================================================================== */ /* Source: assets/css/slc-theme-system.css */ /* ========================================================================== */ /* * SLC theme system * Layer 2: scheme-aware semantic tokens. * Layer 3: component tokens and legacy bridges. * * Keep raw color values in slc-theme-.css. This file only consumes the * active --slc-ref-* contract, so color themes and light/dark schemes can be * switched independently through attributes on . */ /* ===== Layer 2: semantic tokens — Light scheme ===== */ :root:not([data-slc-scheme]), :root[data-slc-scheme="light"]{ color-scheme: light; --slc-color-canvas-top: var(--slc-ref-canvas-top); --slc-color-canvas: var(--slc-ref-canvas); --slc-color-surface: var(--slc-ref-surface); --slc-color-surface-muted: var(--slc-ref-surface-muted); --slc-color-surface-strong: var(--slc-ref-surface-strong); --slc-color-ink-strong: var(--slc-ref-ink-strong); --slc-color-ink: var(--slc-ref-ink); --slc-color-ink-muted: var(--slc-ref-ink-muted); --slc-color-accent: var(--slc-ref-accent); --slc-color-action: var(--slc-ref-action); --slc-color-action-hover: var(--slc-ref-action-hover); --slc-color-accent-on-dark: var(--slc-ref-accent-on-dark); --slc-color-on-action: var(--slc-ref-on-action); --slc-color-highlight: var(--slc-ref-highlight); --slc-color-highlight-strong: var(--slc-ref-highlight-strong); --slc-color-on-highlight: var(--slc-ref-ink-strong); --slc-color-content-violet: var(--slc-ref-content-violet); --slc-color-content-warm: var(--slc-ref-content-warm); --slc-color-ambient-halo-rgb: var(--slc-ref-accent-rgb); --slc-color-line: rgb(var(--slc-ref-accent-rgb) / 0.15); --slc-color-line-strong: rgb(var(--slc-ref-accent-rgb) / 0.34); --slc-color-grid: rgb(var(--slc-ref-accent-deep-rgb) / 0.055); --slc-color-glass: rgb(var(--slc-ref-surface-rgb) / 0.8); --slc-color-glass-strong: rgb(var(--slc-ref-surface-rgb) / 0.95); --slc-color-overlay: rgb(var(--slc-ref-ink-rgb) / 0.42); --slc-color-focus-ring: var(--slc-color-action); --slc-color-line-soft: rgb(var(--slc-ref-accent-deep-rgb) / 0.1); --slc-color-dark-panel: var(--slc-ref-steel-900); --slc-color-dark-panel-strong: var(--slc-color-ink-strong); --slc-color-dark-ink: var(--slc-color-on-action); --slc-color-dark-ink-muted: var(--slc-color-accent-on-dark); --slc-shadow-elevation-rgb: var(--slc-ref-shadow-rgb); --slc-shadow-surface: 0 24px 64px rgb(var(--slc-ref-shadow-rgb) / 0.13); --slc-shadow-surface-strong: 0 26px 68px rgb(var(--slc-ref-accent-deep-rgb) / 0.17); --slc-shadow-dialog: 0 22px 65px rgb(var(--slc-ref-ink-rgb) / 0.18); } /* ===== Layer 3: reusable component tokens ===== */ :root{ --slc-component-body-background: radial-gradient(circle at 82% 4%, rgb(var(--slc-ref-accent-light-rgb) / 0.12), transparent 30rem), radial-gradient(circle at 7% 38%, rgb(var(--slc-ref-accent-rgb) / 0.07), transparent 34rem), linear-gradient(180deg, var(--slc-color-canvas-top) 0%, var(--slc-color-canvas) 100%); --slc-component-service-background: radial-gradient(circle at 12% 10%, rgb(var(--slc-ref-accent-light-rgb) / 0.1), transparent 30rem), linear-gradient(180deg, var(--slc-color-canvas-top) 0%, var(--slc-color-canvas) 100%); --slc-component-briefing-background: radial-gradient(circle at 14% 24%, rgb(var(--slc-ref-accent-rgb) / 0.1), transparent 31rem), linear-gradient(180deg, var(--slc-color-canvas-top) 0%, var(--slc-color-canvas) 100%); --slc-component-inquiry-background: radial-gradient(circle at 78% 30%, rgb(var(--slc-ref-accent-rgb) / 0.1), transparent 32rem), linear-gradient(180deg, var(--slc-color-surface-muted), var(--slc-color-surface)); --slc-component-about-background: linear-gradient(180deg, var(--slc-color-canvas-top) 0%, var(--slc-color-canvas) 100%); --slc-component-regional-background: radial-gradient(circle at 88% 12%, rgb(var(--slc-ref-accent-light-rgb) / 0.09), transparent 32rem), var(--slc-color-canvas); --slc-component-regional-badge-background: linear-gradient( to left, var(--slc-color-surface-strong) 0%, var(--slc-color-surface-muted) 58%, rgb(var(--slc-ref-surface-rgb) / 0.62) 82%, transparent 100% ); --slc-component-regional-badge-shadow: linear-gradient( to left, rgb(var(--slc-ref-accent-rgb) / 0.18) 0%, rgb(var(--slc-ref-accent-light-rgb) / 0.13) 44%, rgb(var(--slc-ref-surface-rgb) / 0.18) 76%, transparent 100% ); --slc-component-regional-badge-sheen: linear-gradient( to left, rgb(var(--slc-ref-white-rgb) / 0.1) 0%, rgb(var(--slc-ref-white-rgb) / 0.2) 48%, transparent 100% ); --slc-component-bento-stage-background: radial-gradient(circle at 50% 40%, rgb(var(--slc-ref-accent-rgb) / 0.08), transparent 42%), var(--slc-color-canvas); --slc-component-bento-card-background: radial-gradient(circle at 18% 0%, rgb(var(--slc-ref-accent-deep-rgb) / 0.055), transparent 46%), linear-gradient(148deg, var(--slc-color-surface) 0%, var(--slc-color-canvas-top) 62%, var(--slc-color-surface-muted) 100%); --slc-component-bento-feature-background: radial-gradient(circle at 50% 0%, rgb(var(--slc-ref-accent-deep-rgb) / 0.06), transparent 46%), linear-gradient(150deg, var(--slc-color-surface) 0%, var(--slc-color-surface-strong) 74%, var(--slc-color-surface-muted) 100%); --slc-component-bento-feature-background-compact: linear-gradient(150deg, var(--slc-color-surface) 0%, var(--slc-color-surface-strong) 72%, var(--slc-color-surface-muted) 100%); --slc-component-footer-background: radial-gradient(circle at 88% 12%, rgb(var(--slc-ref-accent-light-rgb) / 0.1), transparent 34%), radial-gradient(circle at 12% 86%, rgb(var(--slc-ref-accent-rgb) / 0.07), transparent 38%), linear-gradient(135deg, var(--slc-color-canvas-top) 0%, var(--slc-color-surface-muted) 100%); --slc-component-action-bg: var(--slc-color-action); --slc-component-action-bg-hover: var(--slc-color-action-hover); --slc-component-action-fg: var(--slc-color-on-action); --slc-component-highlight-bg: var(--slc-color-highlight); --slc-component-highlight-fg: var(--slc-color-on-highlight); --slc-component-icon-filter: var(--slc-ref-icon-filter); --slc-component-card-shadow: var(--slc-shadow-surface); --slc-component-dialog-shadow: var(--slc-shadow-dialog); --slc-component-service-ring-shadow: 0 5px 12px rgb(var(--slc-ref-shadow-rgb) / 0.16), inset 0 0 0 1px rgb(var(--slc-ref-accent-rgb) / 0.1); /* Service Diagram tokens: component semantics, not page-local colors. */ --slc-component-diagram-watermark: rgb(var(--slc-ref-ink-rgb) / 0.04); --slc-component-diagram-title: var(--slc-color-ink-strong); --slc-component-diagram-lead: var(--slc-color-highlight-strong); --slc-component-diagram-highlight: var(--slc-color-highlight); --slc-component-diagram-accent: var(--slc-color-action); --slc-component-diagram-accent-dark: var(--slc-color-ink-strong); --slc-component-diagram-accent-bright: var(--slc-color-accent-on-dark); --slc-component-diagram-line: rgb(var(--slc-ref-accent-deep-rgb) / 0.26); --slc-component-diagram-node-ring: var(--slc-color-surface-muted); --slc-component-diagram-node-surface: var(--slc-color-surface); --slc-component-diagram-node-shadow: 0 0 0 0.35rem var(--slc-color-surface-muted), 0 6px 13px rgb(var(--slc-ref-shadow-rgb) / 0.22), inset 0 0 0 1px rgb(var(--slc-ref-accent-deep-rgb) / 0.14); --slc-component-diagram-node-shadow-hover: 0 0 0 0.35rem var(--slc-color-surface-muted), 0 10px 24px rgb(var(--slc-ref-shadow-rgb) / 0.25), inset 0 0 0 1px rgb(var(--slc-ref-accent-deep-rgb) / 0.14); --slc-component-diagram-copy: var(--slc-color-ink-muted); } /* ===== Legacy bridge: existing V5/V6 modules consume these names ===== */ :root{ --canvas: var(--slc-color-canvas); --surface: var(--slc-color-surface); --surface-muted: var(--slc-color-surface-muted); --surface-blue: var(--slc-color-surface-strong); --steel-950: var(--slc-color-ink-strong); --steel-900: var(--slc-ref-steel-900); --steel-800: var(--slc-color-ink); --steel-700: var(--slc-color-ink); --steel-600: var(--slc-color-ink-muted); --signal: var(--slc-color-action); --signal-strong: var(--slc-color-action-hover); --signal-soft: var(--slc-color-accent); --text: var(--slc-color-ink-strong); --text-soft: var(--slc-color-ink); --text-muted: var(--slc-color-ink-muted); --line: var(--slc-color-line); --line-strong: var(--slc-color-line-strong); --glass: var(--slc-color-glass); --glass-strong: var(--slc-color-glass-strong); --accent: var(--slc-color-action); --accent-bright: var(--slc-color-accent); --accent-deep: var(--slc-color-action-hover); --shadow: var(--slc-shadow-surface); --shadow-blue: var(--slc-shadow-surface-strong); } /* ===== Page application ===== */ html{ background: var(--slc-color-canvas); } body{ background: var(--slc-component-body-background); color: var(--slc-color-ink-strong); } main#main-content{ background: transparent; } .slc-about, .slc-about-shell, .service-section, .briefing-section, .regional-sales, .inquiry-section{ color: var(--slc-color-ink-strong); } .service-section{ background: var(--slc-component-service-background); } .briefing-section{ background: var(--slc-component-briefing-background); } .inquiry-section{ background: var(--slc-component-inquiry-background); } .service-diagram__core-ring{ border-color: var(--slc-color-surface-muted); background: var(--slc-color-surface); box-shadow: var(--slc-component-service-ring-shadow); color: var(--slc-color-action); } .tarannom-footer{ --footer-ink: var(--slc-color-ink-muted); --footer-title: var(--slc-color-ink-strong); --footer-accent: var(--slc-color-action); --footer-link: var(--slc-color-action-hover); background: var(--slc-component-footer-background); box-shadow: 0 -18px 48px rgb(var(--slc-ref-shadow-rgb) / 0.06); } .tarannom-footer::before{ background: linear-gradient(to top, rgb(var(--slc-ref-accent-rgb) / 0.08), transparent); } /* ========================================================================== */ /* Source: assets/css/slc-critical-layout-tokens.css */ /* ========================================================================== */ /* * Critical layout contract shared by the Hero and full-width content rails. * Keep these tokens render-blocking: changing --container after first paint * shifts the Hero horizontally at tablet and desktop widths. */ :root { --slc-content-rail-max: 86.25rem; --slc-content-rail-gutter: clamp(1rem, 2.5vw, 2.5rem); --slc-content-rail-width: min( var(--slc-content-rail-max), calc(100% - clamp(2rem, 5vw, 5rem)) ); --container: var(--slc-content-rail-width); }