@import url('../vendor/webawesome/styles/color/palettes/default.css'); /* Brand → cyan mapping is supplied by WA's `.wa-brand-cyan` class on (see base.html). This layer just retunes the cyan ramp itself to IntelliScanner's values; --wa-color-cyan-50 is the key brand color. */ @layer wa-color-palette { :root { --wa-color-cyan-95: #e8f6f9; --wa-color-cyan-90: #c9ebf2; --wa-color-cyan-80: #8ed4e3; --wa-color-cyan-70: #5cbdd3; --wa-color-cyan-60: #3aa8c3; --wa-color-cyan-50: #2e98b6; --wa-color-cyan-40: #257a92; --wa-color-cyan-30: #1c5c6e; --wa-color-cyan-20: #133e4a; --wa-color-cyan-10: #0a2027; --wa-color-cyan-05: #051014; --wa-color-cyan: var(--wa-color-cyan-50); --wa-color-cyan-key: 50; } } /* Only override tokens that genuinely differ from default.css. */ @layer wa-theme-overrides { :root { --wa-font-family-body: var(--is-font-body-myriad); --wa-font-family-heading: var(--is-font-condensed); --wa-font-family-longform: var(--wa-font-family-body); --wa-form-control-label-color: var(--wa-color-text-quiet); } /* Tighter label→input gap and slightly smaller label than WA's default (margin-block-end: 0.5em + inherited form-control font-size). */ :is(wa-input, wa-textarea, wa-select, wa-combobox, wa-number-input, wa-color-picker, wa-file-input)::part(form-control-label) { font-size: var(--wa-font-size-s); margin-block-end: 0.3em; } /* Hint for dark-mode browser extensions (e.g. Noir). */ @media (prefers-color-scheme: dark) { :root:not(.wa-light) { color-scheme: dark; } } } /* Align callout icon with first line of text. */ wa-callout::part(icon) { align-items: flex-start; padding-block-start: 0.15em; } .dialog-code-input::part(input) { letter-spacing: 0.5rem; text-align: center; font-size: var(--wa-font-size-xl); font-weight: var(--wa-font-weight-bold); } /* Site Layout */ .page-container { max-width: 1200px; margin-inline: auto; padding-inline: var(--wa-space-xl); box-sizing: border-box; } @keyframes bannerShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .wa-dark .site-logo-img { filter: brightness(2); } wa-page { --menu-width: 0px; --main-width: 1fr; --aside-width: 0px; } wa-page[view='mobile'] { --menu-width: auto; --aside-width: auto; } wa-page::part(navigation-toggle) { display: none; } wa-page::part(header) { background: radial-gradient(ellipse 60% 100% at 10% 50%, color-mix(in oklab, var(--wa-color-brand-80) 12%, transparent), transparent 70%), radial-gradient(ellipse 50% 100% at 90% 50%, color-mix(in oklab, var(--wa-color-brand-90) 10%, transparent), transparent 70%), color-mix(in oklab, var(--wa-color-surface-default) 92%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--wa-color-surface-border) 60%, transparent); } wa-page::part(base), wa-page::part(body), wa-page::part(main-content) { background-color: transparent; } wa-page > main { padding: 0; } wa-page::part(main-footer) { padding: 0; background-color: var(--wa-color-surface-lowered); } header[slot="header"] { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logos nav account"; align-items: center; padding-block: var(--wa-space-s); background-color: transparent; } /* backdrop-filter here, not ::part(header) — shadow-DOM part creates a stacking context that traps z-index. */ header[slot="header"] { position: relative; z-index: 5; backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); } /* Full-viewport gradient behind the header (breaks out of .page-container via 100vw pseudo-element). */ header[slot="header"].has-aurora { isolation: isolate; } header[slot="header"].has-aurora::before { content: ""; position: absolute; inset-block: 0; left: calc(50% - 50vw); width: 100vw; background: var(--aurora-bg-light); z-index: -1; pointer-events: none; } .wa-dark header[slot="header"].has-aurora::before { background: var(--aurora-bg-dark, var(--aurora-bg-light)); } body:not(.has-page-aurora) wa-page:has(header[slot="header"].has-aurora)::part(header) { background: var(--wa-color-surface-default); } body:not(.has-page-aurora) header[slot="header"].has-aurora { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Page-wide gradient on wa-page itself; internal parts go transparent so it shows through. */ body.has-page-aurora wa-page { background: var(--page-aurora-light); background-attachment: fixed; min-height: 100vh; } .wa-dark body.has-page-aurora wa-page { background: var(--page-aurora-dark, var(--page-aurora-light)); background-attachment: fixed; } body.has-page-aurora header[slot="header"].has-aurora::before { display: none; } body.has-page-aurora wa-page::part(base), body.has-page-aurora wa-page::part(body), body.has-page-aurora wa-page::part(main-content), body.has-page-aurora wa-page::part(header), body.has-page-aurora wa-page::part(main-footer) { background-color: transparent; } body.has-page-aurora header[slot="header"] { backdrop-filter: none; -webkit-backdrop-filter: none; } body.has-page-aurora wa-page:has(header[slot="header"].has-aurora)::part(header) { background-color: transparent; } body.has-page-aurora footer[slot="main-footer"] { background-color: transparent; } header[slot="header"].has-collab-logo, header[slot="header"]:has(.collab-logo-btn) { grid-template-columns: auto 1fr auto; } wa-page[view='mobile'] header[slot="header"], wa-page[view='mobile'] header[slot="header"].has-collab-logo, wa-page[view='mobile'] header[slot="header"]:has(.collab-logo-btn) { grid-template-columns: 1fr; grid-template-areas: "logos" "nav"; padding: 0; max-width: none; } wa-page[view='mobile']::part(header) { padding: 0; } /* Site-wide revert of native.css's media constraints (max-width: 100%, height: auto, border-radius). We size logos, hero imagery, and label previews explicitly; the defaults fight that everywhere. */ img, svg, picture, video { max-width: revert; height: revert; border-radius: revert; } /* IS dialog style. --dialog-film-c1 is the gradient color input — defaults to IS cyan, overridden by --brand-color on .has-page-aurora pages, or by an inline