/* ----------------------------------------------------------------------------- * theme.css — the app's semantic colour layer. * * Loaded after auro-tokens.css and before every other stylesheet. It is the ONLY * file that mentions --ds-* names: everything else uses the --app-* names defined * here. That indirection is the point — when Auro renames or revalues a token, * this file is the whole diff. * * Rules for anyone editing the stylesheets: * 1. Do not write a raw hex value in navigation.css / index.css / strategy.css. * If you need a colour that is not here, add a semantic --app-* name in this * file backed by an Auro token, and use that. * 2. Do not use var(--ds-*) outside this file. * 3. Do not use Auro's type tokens through var() at all — see the note below. * * Some --app-* names below are not referenced yet. They are deliberate: they are * the sanctioned vocabulary for the next thing that needs a subtle status fill or * an inverse surface, so nobody has to reach for a raw hex. * * TYPE TOKENS ARE UNUSABLE THROUGH var(). * Auro emits them as quoted strings: --ds-type-size-16: "1rem", and * --ds-type-weight-book: "450". `font-size: var(--ds-type-size-16)` therefore * resolves to the invalid value "1rem" (with quotes) and the whole declaration is * dropped by the parser — silently. Only --ds-basic-type-family-* survives, * because a quoted family name is legal in font-family. So sizes, weights and * line-heights below are literals, each annotated with the Auro token it mirrors. * -------------------------------------------------------------------------- */ /* --- Brand typeface ------------------------------------------------------- * "AS Circular" is Alaska's brand face, served from Alaska's own public asset * host — these are the same URLs Auro's own webcorestylesheets package uses. * * This is the one runtime external reference in the app. It is safe to keep: * font-display: fallback means the system stack paints immediately and AS * Circular swaps in only if it arrives quickly, so offline / behind-the-WAF the * page renders normally with no blocking and no layout flash. Delete this block * to drop the dependency entirely; --app-font-body falls back cleanly. * * Weight ranges are deliberate. Auro's own @font-face maps Light->100, * Medium->300, Book->500, which makes an ordinary 400-weight body request match * Medium. The ranges below make 400 match Book and 600/700 match Medium. * ------------------------------------------------------------------------ */ @font-face { font-family: "AS Circular"; font-weight: 100 350; font-style: normal; font-display: fallback; src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff"); } @font-face { font-family: "AS Circular"; font-weight: 351 450; font-style: normal; font-display: fallback; src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff"); } @font-face { font-family: "AS Circular"; font-weight: 451 700; font-style: normal; font-display: fallback; src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff"); } :root { /* --- Typography ------------------------------------------------------ */ /* --ds-basic-type-family-body is safe through var(); the rest are not. */ --app-font-body: var(--ds-basic-type-family-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --app-line-height-body: 1.63; /* mirrors --ds-basic-type-line-height-body */ --app-line-height-heading: 1.3; /* mirrors --ds-basic-type-brand-line-height-primary */ /* --- Page and surfaces ----------------------------------------------- */ /* Auro's --ds-basic-color-page-background-default is #ebfafd, a cyan tint. It reads well on marketing pages but fights dense data tables, so the app page uses the neutral surface instead. Swap the two if you want the full alaskaair.com page wash. */ --app-page-bg: var(--ds-basic-color-surface-neutral-subtle); --app-surface: var(--ds-basic-color-surface-default); --app-surface-subtle: var(--ds-basic-color-surface-neutral-subtle); --app-surface-muted: var(--ds-basic-color-surface-neutral-medium); --app-surface-accent: var(--ds-basic-color-brand-primary-muted); --app-surface-inverse: var(--ds-basic-color-surface-inverse); /* Table headers, accordion headers, and their hover state. */ --app-surface-header: var(--ds-basic-color-brand-primary-muted); --app-surface-header-hover: var(--ds-basic-color-brand-secondary-muted); /* Data-row states. */ --app-row-hover: var(--ds-basic-color-brand-secondary-muted); --app-row-selected: var(--ds-basic-color-brand-secondary-subtle); /* --- Text ------------------------------------------------------------ */ --app-text: var(--ds-basic-color-texticon-default); --app-text-secondary: var(--ds-basic-color-texticon-muted); --app-text-muted: var(--ds-basic-color-texticon-muted); --app-text-inverse: var(--ds-basic-color-texticon-inverse); --app-text-disabled: var(--ds-basic-color-texticon-disabled); --app-text-accent: var(--ds-basic-color-texticon-accent1); --app-text-link: var(--ds-basic-color-brand-primary); /* --- Borders --------------------------------------------------------- */ --app-border: var(--ds-basic-color-border-subtle); --app-border-default: var(--ds-basic-color-border-default); --app-border-strong: var(--ds-basic-color-border-bold); --app-border-brand: var(--ds-basic-color-border-brand); --app-divider: var(--ds-basic-color-border-divider); /* --- Focus ----------------------------------------------------------- */ --app-focus-ring: var(--ds-basic-color-brand-primary-subtle); --app-focus-shadow: 0 0 0 0.2rem rgba(40, 117, 181, 0.25); /* brand-primary-subtle @ 25% */ /* --- Actions --------------------------------------------------------- * Primary is Alaska navy, not a generic blue. Hover goes *darker*, matching * --ds-advanced-color-button-primary-background-hover. */ --app-primary: var(--ds-advanced-color-button-primary-background); --app-primary-hover: var(--ds-advanced-color-button-primary-background-hover); --app-primary-disabled: var(--ds-advanced-color-button-primary-background-disabled); --app-primary-on: var(--ds-basic-color-texticon-inverse); --app-secondary: var(--ds-basic-color-border-bold); --app-secondary-hover: var(--ds-basic-color-texticon-default); --app-secondary-on: var(--ds-basic-color-texticon-inverse); --app-danger: var(--ds-basic-color-status-error); --app-danger-hover: #b8191f; /* --ds-basic-color-status-error darkened; Auro has no -bold variant */ --app-danger-subtle: var(--ds-basic-color-status-error-subtle); --app-danger-on: var(--ds-basic-color-texticon-inverse); --app-success: var(--ds-basic-color-status-success); --app-success-hover: #35601a; /* --ds-basic-color-status-success darkened */ --app-success-subtle: var(--ds-basic-color-status-success-subtle); --app-success-on: var(--ds-basic-color-texticon-inverse); --app-warning: var(--ds-basic-color-status-warning); --app-warning-hover: #e0af00; /* --ds-basic-color-status-warning darkened */ --app-warning-subtle: var(--ds-basic-color-status-warning-subtle); /* Amber needs dark text; white on #fac200 is ~1.5:1. */ --app-warning-on: var(--ds-basic-color-texticon-default); --app-info: var(--ds-basic-color-fare-premiumeconomy); --app-info-hover: #003b3d; /* --ds-basic-color-fare-premiumeconomy darkened */ --app-info-subtle: var(--ds-basic-color-status-info-subtle); --app-info-on: var(--ds-basic-color-texticon-inverse); --app-accent: var(--ds-advanced-color-accents-accent2); --app-accent-hover: var(--ds-advanced-color-accents-accent2-bold); --app-accent-subtle: var(--ds-advanced-color-accents-accent2-muted); /* Pale gold needs dark text; white on #fad362 is ~1.4:1. */ --app-accent-on: var(--ds-basic-color-texticon-default); --app-neutral: var(--ds-basic-color-status-default); /* --- Brand gradient (nav avatar, feature icons) ----------------------- */ --app-gradient-brand: linear-gradient(135deg, var(--ds-basic-color-brand-primary) 0%, var(--ds-basic-color-brand-secondary-bold) 100%); /* --- Alaska x Hawaiian gradient (nav accent bar) ---------------------- * Lifted verbatim from the news.alaskaair.com header band * (.et_pb_section_3_tb_header). The hex values are raw on purpose. * ------------------------------------------------------------------- */ --app-gradient-ashi: linear-gradient(0deg, rgba(81, 41, 122, 0.00) 0%, rgba(79, 41, 121, 0.03) 23%, rgba(72, 44, 120, 0.12) 42%, rgba(62, 48, 118, 0.28) 59%, rgba(48, 53, 115, 0.49) 75%, rgba(29, 61, 111, 0.77) 90%, #0F436D 100%), linear-gradient(315deg, #C4197F 0%, rgba(158, 33, 123, 0.79) 5%, rgba(124, 41, 119, 0.61) 10%, rgba(94, 48, 116, 0.44) 15%, rgba(69, 54, 114, 0.30) 21%, rgba(49, 58, 112, 0.19) 28%, rgba(33, 62, 110, 0.10) 36%, rgba(23, 65, 109, 0.04) 47%, rgba(16, 66, 109, 0.00) 61%, rgba(0, 88, 124, 0.00) 100%), linear-gradient(315deg, #51297A 0%, #0F436D 100%); --app-gradient-ashi-blend: multiply, normal, normal; /* --- Row-section accents --------------------------------------------- * The rows table groups columns under eight coloured section headers. These * are categorical, not semantic, so they are drawn from Auro's fare and tier * palettes rather than invented. Each has a paired -on text colour chosen so * the 11px bold label clears 4.5:1. */ --app-section-1: var(--ds-basic-color-brand-primary); /* #01426a */ --app-section-1-on: var(--ds-basic-color-texticon-inverse); --app-section-2: var(--ds-basic-color-fare-economy); /* #0074ca */ --app-section-2-on: var(--ds-basic-color-texticon-inverse); --app-section-3: var(--ds-basic-color-status-success); /* #447a1f */ --app-section-3-on: var(--ds-basic-color-texticon-inverse); --app-section-4: var(--ds-basic-color-status-warning); /* #fac200 */ --app-section-4-on: var(--ds-basic-color-texticon-default); --app-section-5: var(--ds-basic-color-fare-premiumeconomy); /* #005154 */ --app-section-5-on: var(--ds-basic-color-texticon-inverse); --app-section-6: var(--ds-basic-color-tier-program-loyaltytier-cobalt); /* #030772 */ --app-section-6-on: var(--ds-basic-color-texticon-inverse); --app-section-7: var(--ds-basic-color-tier-program-loyaltytier-copper); /* #cb7457 */ --app-section-7-on: var(--ds-basic-color-texticon-default); --app-section-8: var(--ds-basic-color-border-bold); /* #585e67 */ --app-section-8-on: var(--ds-basic-color-texticon-inverse); /* --- Overlays --------------------------------------------------------- */ --app-overlay: rgba(0, 0, 0, 0.5); --app-overlay-light: rgba(0, 0, 0, 0.3); --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --app-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12); --app-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15); }