/* Portal templates: each is a set of tokens the page styles already read. The active template is stamped on as data-template by the panel; its tokens are written inline in the head from config/portal_templates.php, so this file only carries what tokens alone cannot say. */ /* The hero and banner gradients follow the template rather than the fixed platform colours. */ [data-template] .fs-hero { background: linear-gradient(180deg, var(--tpl-hero-from, #f4f6fb) 0%, var(--tpl-hero-to, #fbfbfd) 100%); } [data-template] .fs-hero-photo::before { background: linear-gradient(90deg, var(--tpl-hero-from, #f4f6fb) 0%, color-mix(in srgb, var(--tpl-hero-from, #f4f6fb) 60%, transparent) 18%, transparent 45%); } [data-template] .fs-banner { background: linear-gradient(135deg, var(--tpl-banner-from, #1e3a8a), var(--tpl-banner-to, #0f2557)); } [data-template] .fs-product[aria-current="page"] { background: color-mix(in srgb, var(--fs-accent) 8%, transparent); } [data-template] .fs-badge { background: color-mix(in srgb, var(--fs-accent) 10%, var(--fs-surface)); } [data-template] .fs-recent-icon { background: color-mix(in srgb, var(--fs-accent) 14%, var(--fs-surface)); } [data-template] .fs-search { box-shadow: 0 8px 20px color-mix(in srgb, var(--fs-accent) 30%, transparent); } [data-template] .fs-tag.is-brand { background: color-mix(in srgb, var(--fs-accent) 12%, transparent); color: var(--fs-accent); } /* Dark templates: the page ground follows the surface tokens. */ [data-template="noir"] .fi-main, [data-template="noir"] .fi-body { background: #161616; color: var(--fs-ink); } [data-template="noir"] .fs-hero-photo.is-empty { background: radial-gradient(120% 120% at 100% 0%, #3a2d00 0%, #1e1e1e 55%, transparent 80%); } [data-template="noir"] .fs-feature-icon, [data-template="noir"] .hs-chip, [data-template="noir"] .hs-ico { filter: saturate(.8); }