/* NetShow shell design tokens (line 15532, shell-reads-design-tokens-r1): the Google path for the split shell. Loaded by layouts/netshow-stage.blade.php after css/pages/netshow-stage.css only while ai.features.shell_design_tokens is on, when carries data-ns-tokens (and data-industry from the site's split_shell row, SplitShell::industry()). The shell sheet declares every --ns-* token once with main's values on .ns-stage-body, .ns-tm and .ns-foot; this file re-declares them one step more specific: dark by default, light under prefers-color-scheme: light, and each industry re-dresses only the accent family (--ns-gold*, --ns-on-accent) in both schemes. Neutral greys, type and radius follow Google's surfaces (#202124 ink, #5f6368 secondary, #dadce0 lines); NetShow keeps its gold accent. The caption and tour scrims stay dark in both schemes: they sit on the host's face. The content plane (.ns-main) keeps the dark set in both schemes: the pages it carries (the inner pages, the home, /invest, the trade pages) still draw their own dark sections, so light dresses the shell (top menu, host plane, bar, footer) until a page is token-aware. Swap values here (and split_shell.theme_color for the phone bar); the layout carries no colour of its own. */ :root[data-ns-tokens] { color-scheme: dark; } [data-ns-tokens] :is(.ns-stage-body, .ns-tm, .ns-foot, .ns-main) { --ns-bg: #202124; --ns-bg-deep: #1b1c1f; --ns-surface: #292a2d; --ns-elevated: #35363a; --ns-card: #2d2e31; --ns-text: #e8eaed; --ns-text-2: #9aa0a6; --ns-gold: #f5a623; --ns-gold-light: #fdd663; --ns-gold-deep: #c7851a; --ns-gold-glow: rgba(245, 166, 35, .22); --ns-gold-border: rgba(245, 166, 35, .32); --ns-border: rgba(232, 234, 237, .12); --ns-border-strong: rgba(232, 234, 237, .2); --ns-on-accent: #202124; --ns-chrome: rgba(32, 33, 36, .96); --ns-chrome-soft: rgba(32, 33, 36, .88); --ns-host-glow: #303134; --ns-splitter-mid: #3c4043; --ns-speaking: #5eead4; --ns-font: Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --ns-radius: 12px; } [data-ns-tokens] .ns-main { color-scheme: dark; color: var(--ns-text); background: var(--ns-bg); } /* Industry accents, dark. */ [data-ns-tokens][data-industry="law"] :is(.ns-stage-body, .ns-tm, .ns-foot, .ns-main) { --ns-gold: #8ab4f8; --ns-gold-light: #aecbfa; --ns-gold-deep: #669df6; --ns-gold-glow: rgba(138, 180, 248, .22); --ns-gold-border: rgba(138, 180, 248, .32); --ns-on-accent: #202124; } [data-ns-tokens][data-industry="pool"] :is(.ns-stage-body, .ns-tm, .ns-foot, .ns-main) { --ns-gold: #78d9ec; --ns-gold-light: #a1e4f2; --ns-gold-deep: #4ecde6; --ns-gold-glow: rgba(120, 217, 236, .22); --ns-gold-border: rgba(120, 217, 236, .32); --ns-on-accent: #202124; } [data-ns-tokens][data-industry="dental"] :is(.ns-stage-body, .ns-tm, .ns-foot, .ns-main) { --ns-gold: #80cbc4; --ns-gold-light: #b2dfdb; --ns-gold-deep: #4db6ac; --ns-gold-glow: rgba(128, 203, 196, .22); --ns-gold-border: rgba(128, 203, 196, .32); --ns-on-accent: #202124; } [data-ns-tokens][data-industry="med-spa"] :is(.ns-stage-body, .ns-tm, .ns-foot, .ns-main) { --ns-gold: #f48fb1; --ns-gold-light: #f8bbd0; --ns-gold-deep: #f06292; --ns-gold-glow: rgba(244, 143, 177, .22); --ns-gold-border: rgba(244, 143, 177, .32); --ns-on-accent: #202124; } [data-ns-tokens][data-industry="home-services"] :is(.ns-stage-body, .ns-tm, .ns-foot, .ns-main) { --ns-gold: #fcad70; --ns-gold-light: #fdc69c; --ns-gold-deep: #fa903e; --ns-gold-glow: rgba(252, 173, 112, .22); --ns-gold-border: rgba(252, 173, 112, .32); --ns-on-accent: #202124; } [data-ns-tokens][data-industry="real-estate"] :is(.ns-stage-body, .ns-tm, .ns-foot, .ns-main) { --ns-gold: #81c995; --ns-gold-light: #a8dab5; --ns-gold-deep: #5bb974; --ns-gold-glow: rgba(129, 201, 149, .22); --ns-gold-border: rgba(129, 201, 149, .32); --ns-on-accent: #202124; } @media (prefers-color-scheme: light) { :root[data-ns-tokens] { color-scheme: light; } [data-ns-tokens] :is(.ns-stage-body, .ns-tm, .ns-foot) { --ns-bg: #ffffff; --ns-bg-deep: #f8f9fa; --ns-surface: #f1f3f4; --ns-elevated: #e8eaed; --ns-card: #ffffff; --ns-text: #202124; --ns-text-2: #5f6368; --ns-gold: #f9ab00; --ns-gold-light: #b06000; --ns-gold-deep: #e37400; --ns-gold-glow: rgba(249, 171, 0, .22); --ns-gold-border: rgba(176, 96, 0, .3); --ns-border: rgba(60, 64, 67, .14); --ns-border-strong: rgba(60, 64, 67, .26); --ns-on-accent: #202124; --ns-chrome: rgba(255, 255, 255, .96); --ns-chrome-soft: rgba(255, 255, 255, .9); --ns-host-glow: #eef1f6; --ns-splitter-mid: #dadce0; --ns-speaking: #00897b; } /* Industry accents, light: deep enough to carry white ink on a button and to read as a link on white. */ [data-ns-tokens][data-industry="law"] :is(.ns-stage-body, .ns-tm, .ns-foot) { --ns-gold: #1a73e8; --ns-gold-light: #1967d2; --ns-gold-deep: #174ea6; --ns-gold-glow: rgba(26, 115, 232, .2); --ns-gold-border: rgba(26, 115, 232, .3); --ns-on-accent: #ffffff; } [data-ns-tokens][data-industry="pool"] :is(.ns-stage-body, .ns-tm, .ns-foot) { --ns-gold: #007b83; --ns-gold-light: #00696f; --ns-gold-deep: #005a60; --ns-gold-glow: rgba(0, 123, 131, .2); --ns-gold-border: rgba(0, 123, 131, .3); --ns-on-accent: #ffffff; } [data-ns-tokens][data-industry="dental"] :is(.ns-stage-body, .ns-tm, .ns-foot) { --ns-gold: #00796b; --ns-gold-light: #00695c; --ns-gold-deep: #004d40; --ns-gold-glow: rgba(0, 121, 107, .2); --ns-gold-border: rgba(0, 121, 107, .3); --ns-on-accent: #ffffff; } [data-ns-tokens][data-industry="med-spa"] :is(.ns-stage-body, .ns-tm, .ns-foot) { --ns-gold: #c2185b; --ns-gold-light: #ad1457; --ns-gold-deep: #880e4f; --ns-gold-glow: rgba(194, 24, 91, .2); --ns-gold-border: rgba(194, 24, 91, .3); --ns-on-accent: #ffffff; } [data-ns-tokens][data-industry="home-services"] :is(.ns-stage-body, .ns-tm, .ns-foot) { --ns-gold: #b85c00; --ns-gold-light: #a14f00; --ns-gold-deep: #8a4200; --ns-gold-glow: rgba(184, 92, 0, .2); --ns-gold-border: rgba(184, 92, 0, .3); --ns-on-accent: #ffffff; } [data-ns-tokens][data-industry="real-estate"] :is(.ns-stage-body, .ns-tm, .ns-foot) { --ns-gold: #188038; --ns-gold-light: #137333; --ns-gold-deep: #0d652d; --ns-gold-glow: rgba(24, 128, 56, .2); --ns-gold-border: rgba(24, 128, 56, .3); --ns-on-accent: #ffffff; } } /* Line 15860 (upskill-media-7-r1): the same Google-path tokens for a page that is not inside the split shell. A page opts in with class="ns-gp" on its own root (the media pages behind ai.features.media_upskill_7: the merge card, the mic/camera consent line, the self-portrait page); its component rules live in css/pages/media-google-path.css. Light by default, dark under prefers-color-scheme: dark; the values are the shell's sets above. */ .ns-gp { --ns-bg: #ffffff; --ns-bg-deep: #f8f9fa; --ns-surface: #f1f3f4; --ns-elevated: #e8eaed; --ns-card: #ffffff; --ns-text: #202124; --ns-text-2: #5f6368; --ns-gold: #f9ab00; --ns-gold-light: #b06000; --ns-gold-deep: #e37400; --ns-border: rgba(60, 64, 67, .14); --ns-border-strong: rgba(60, 64, 67, .26); --ns-on-accent: #202124; --ns-font: Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --ns-radius: 12px; color-scheme: light; } @media (prefers-color-scheme: dark) { .ns-gp { --ns-bg: #202124; --ns-bg-deep: #1b1c1f; --ns-surface: #292a2d; --ns-elevated: #35363a; --ns-card: #2d2e31; --ns-text: #e8eaed; --ns-text-2: #9aa0a6; --ns-gold: #f5a623; --ns-gold-light: #fdd663; --ns-gold-deep: #c7851a; --ns-border: rgba(232, 234, 237, .12); --ns-border-strong: rgba(232, 234, 237, .2); --ns-on-accent: #202124; color-scheme: dark; } }