/* ========================================================================== b5-redwood.css — blitz5tourism theme: BLITZWOOD (Redwood structure, Blitz livery colours) ========================================================================== Loaded AFTER blz-native.css on every page of both apps (9301 SaaS, 9302 admin), login included. It is a token layer, not a component sheet: 1. --blz-* tokens → every .blz-native component follows 2. Universal Theme vars → native APEX regions, reports, IR/IG, forms, buttons, menus, dialogs, alerts follow plus a handful of targeted rules where blz-native or UT hard-code a value. Unscoped on purpose: this product has one look (no classic/opt-in switch). Pattern: Blitz-4 dynamiccomp/app-shell/blz-corporate.css §1–§6, re-skinned. Blitzwood (2026-10-11, spec docs/superpowers/specs/2026-10-11-blitzwood-skin-design.md): Blitz 5 is Project Normandy, a yacht. Oracle Redwood's structure is kept — light only, flat surfaces (cards = 1px border, no shadow; menus/dialogs = one soft shadow), radii 4 (inputs/buttons) · 6 (cards) · 8 (dialogs/sheets), Oracle Sans for Latin (shipped by APEX: /i//libraries/oracle-fonts/oraclesans-apex.min.css), Cairo for Arabic — and re-cast in the livery: midnight rail + ink, navy CTA, royal link/focus, racing-red thin accent, yellow only on the rail. NO copper. The signature is the HULL LINE (navy · white boot stripe · red waterline): kit page-header / drawer strips, the shell title band (hubs: the full navy band), the sign-in hero. Nowhere else. Contrast (WCAG AA, computed — sRGB relative luminance; scripts/helpers/check_contrast.py enforces it): ink #0B1131 on canvas #F6F7FB / white 17.23 / 18.44:1 muted #525A7A on white / canvas / #EEF0F7 / hover #E9ECF5 6.77 / 6.32 / 5.94 / 5.73:1 disabled #8589A0 on white 3.45:1 (disabled: exempt) primary white on #1C2470 / hover #141A57 13.67 / 15.97:1 link/focus #3341C4 on white / canvas / selected #E8EAFB / #EEF0F7 7.80 / 7.28 / 6.53 / 6.85:1 field edge rgba(11,17,49,.5) on white / canvas 3.52 / 3.47:1 (WCAG 1.4.11 ≥ 3:1) rail white on #0B1131 18.44:1 · highlight #FFC906 on the rail 11.95:1 (yellow NEVER on a light surface) accent #DB0A40 (thin marker / hull waterline only) on white / canvas 5.09 / 4.75:1 semantic text on its soft tint: success #1D6B3A/#E3F3E8 5.67 · warning #7A5A00/#FFF6D6 5.90 · danger #A8072F/#FDE7EC 6.51 · info #2A35A6/#E8EAFB 8.15 semantic fills (white text / ≥ 3:1 as graphics on canvas): success #237A47 5.32 · warning #9E6A00 4.65 · danger #C8102E 5.88 (deliberately not the accent red) · info #3341C4 7.80 Push b5-redwood.css AND b5-redwood.min.css (identical bytes). 1. Palette + tokens 5. Buttons 2. Light only 6. Fields + focus 3. Universal Theme → tokens 7. Small UT touches (title bar, regions, dialogs) 4. Semantic palette 8. blz-native primitive retune 8b. Page transitions (cross-document view transitions; frame named in blz-shell.css) 9. Typography ========================================================================== */ /* 1. Palette + tokens ----------------------------------------------------- */ :root, :root[data-theme="light"], :root[data-theme="dark"]{ /* Blitzwood product palette (the source of truth for this file) */ --b5-canvas:#F6F7FB; --b5-panel:#FFFFFF; --b5-surface-2:#EEF0F7; /* secondary surface, table header */ --b5-hover:#E9ECF5; --b5-ink:#0B1131; /* midnight */ --b5-muted:#525A7A; --b5-disabled:#8589A0; --b5-hairline:rgba(11,17,49,.12); --b5-hairline-strong:rgba(11,17,49,.24); --b5-field-border:rgba(11,17,49,.5); /* input / select / checkbox edges: 3:1 on white (WCAG 1.4.11; Redwood uses .5) */ --b5-primary:#1C2470; /* navy "call to action": white text */ --b5-primary-hover:#141A57; --b5-link:#3341C4; /* royal: links + focus */ --b5-link-hover:#26319A; --b5-selected:#E8EAFB; /* selected / active nav tint */ --b5-accent:#DB0A40; /* racing red — SPARINGLY: the hull waterline / a thin marker */ --b5-rail:#0B1131; /* the dark rail (midnight) */ --b5-highlight:#FFC906; /* yellow — ONLY on --b5-rail (the current-hub marker) */ --b5-success-fill:#237A47; --b5-success:#1D6B3A; --b5-success-soft:#E3F3E8; --b5-warning-fill:#9E6A00; --b5-warning:#7A5A00; --b5-warning-soft:#FFF6D6; --b5-danger-fill:#C8102E; --b5-danger:#A8072F; --b5-danger-soft:#FDE7EC; --b5-info-fill:#3341C4; --b5-info:#2A35A6; --b5-info-soft:#E8EAFB; --b5-shadow-over:0 4px 16px rgba(11,17,49,.12); /* menus, popovers, dialogs — the only shadow */ --b5-focus-ring:0 0 0 2px var(--b5-panel), 0 0 0 4px var(--b5-link); /* blz-native token remap — every .blz-native component follows */ --blz-navy:var(--b5-ink); --blz-bg:var(--b5-canvas); --blz-white:#FFFFFF; --blz-panel:var(--b5-panel); --blz-panel-raised:var(--b5-panel); --blz-panel-over:var(--b5-panel); --blz-border:var(--b5-hairline); --blz-line:rgba(11,17,49,.08); --blz-muted:var(--b5-muted); --blz-ink:var(--b5-rail); /* contrast surface (the rail; inverted bars) */ --blz-ink-fg:#FFFFFF; --blz-blue:var(--b5-primary); /* "primary action" token — dark, never copper */ --blz-blue-dark:var(--b5-primary-hover); --blz-blue-soft:var(--b5-hover); --blz-teal:var(--b5-link); /* secondary accent = Blitzwood royal */ --blz-teal-dark:var(--b5-link-hover); --blz-teal-soft:var(--b5-selected); --blz-success:var(--b5-success); --blz-success-soft:var(--b5-success-soft); --blz-warn:var(--b5-warning); --blz-warn-soft:var(--b5-warning-soft); --blz-danger:var(--b5-danger); --blz-danger-soft:var(--b5-danger-soft); --blz-overlay:rgba(11,17,49,.40); --blz-r-input:4px; --blz-r-control:4px; --blz-r-card:6px; --blz-r-sheet:8px; --blz-shadow-sm:none; --blz-shadow:none; --blz-shadow-card:none; --blz-shadow-modal:var(--b5-shadow-over); --blz-shadow-fab:var(--b5-shadow-over); --blz-font:"Oracle Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", "Segoe UI Arabic", sans-serif; } /* Arabic: Cairo (Oracle Sans has no Arabic glyphs). Same selectors as blz-native, restated so the Latin stack above never wins on an RTL page. */ :root:lang(ar), :root[dir="rtl"]{ --blz-font:"Cairo", "Noto Sans Arabic", "Segoe UI Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* The apps keep (primary language) even in an Arabic session, so the :root rules above never match there: every bilingual root carries dir="rtl" itself. */ .blz-native[dir="rtl"], .blz-native:lang(ar){ --blz-font:"Cairo", "Noto Sans Arabic", "Segoe UI Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family:var(--blz-font); } /* 2. Light only ------------------------------------------------------------ The product is light-only. color-scheme pins native controls/scrollbars light; the token block above already lists :root[data-theme="dark"], so a stray blz_theme cookie can no longer flip the palette. blz-native's few component-level dark rules are neutralised here. */ :root{ color-scheme:light; } :root[data-theme="dark"] .blz-native .blz-card{ border-block-start:1px solid var(--blz-border); } :root[data-theme="dark"] .blz-native .blz-input, :root[data-theme="dark"] .blz-native .blz-input:focus{ background:var(--blz-panel); } :root[data-theme="dark"] .t-Header .t-NavigationBar, :root[data-theme="dark"] .t-Header .t-LinksList, :root[data-theme="dark"] .t-Header-navBar > ul, :root[data-theme="dark"] .t-Header-navBar--center > ul, :root[data-theme="dark"] .blz-crumb{ background:transparent; } /* 3. Universal Theme → tokens --------------------------------------------- */ :root{ --a-base-font-family:var(--blz-font); /* brand */ --ut-palette-primary:var(--b5-primary); --ut-palette-primary-contrast:#FFFFFF; --ut-palette-primary-shade:var(--b5-hover); --ut-palette-primary-text:var(--b5-ink); --a-palette-primary:var(--b5-primary); --a-palette-primary-contrast:#FFFFFF; --ut-palette-primary-alt:var(--b5-link); --ut-palette-primary-alt-contrast:#FFFFFF; --ut-palette-primary-alt-shade:var(--b5-selected); --ut-palette-primary-alt-text:var(--b5-link); --ut-link-text-color:var(--b5-link); --ut-focus-outline-color:var(--b5-link); /* canvas + text */ --ut-body-background-color:var(--b5-canvas); --ut-body-text-color:var(--b5-ink); --ut-body-actions-background-color:var(--b5-canvas); --ut-body-actions-text-color:var(--b5-muted); --ut-body-actionstoggle-background-color:var(--b5-canvas); --ut-body-actionstoggle-hover-background-color:var(--b5-hover); --ut-body-sidebar-background-color:var(--b5-panel); --ut-body-sidebar-text-color:var(--b5-ink); --ut-footer-border-color:var(--b5-hairline); /* regions + components */ --ut-region-background-color:var(--b5-panel); --ut-region-text-color:var(--b5-ink); --ut-region-header-background-color:var(--b5-panel); --ut-region-header-text-color:var(--b5-ink); --ut-region-header-border-color:var(--b5-hairline); --ut-region-border-color:var(--b5-hairline); --ut-region-border-radius:var(--blz-r-card); --ut-region-box-shadow:none; --ut-button-region-box-shadow:none; --ut-cardlist-border-radius:var(--blz-r-card); --ut-resultsregion-border-radius:var(--blz-r-card); --ut-alert-border-radius:var(--blz-r-card); --ut-tabs-border-radius:var(--blz-r-control); --ut-component-background-color:var(--b5-panel); --ut-component-border-color:var(--b5-hairline); --ut-component-inner-border-color:rgba(11,17,49,.08); --ut-component-border-radius:var(--blz-r-control); --ut-component-box-shadow:var(--b5-shadow-over); --ut-component-highlight-background-color:var(--b5-hover); --ut-component-toolbar-background-color:var(--b5-surface-2); --ut-component-text-default-color:var(--b5-ink); --ut-component-text-title-color:var(--b5-ink); --ut-component-text-subtitle-color:var(--b5-ink); --ut-component-text-muted-color:var(--b5-muted); --ut-component-badge-background-color:var(--b5-surface-2); --ut-component-badge-text-color:var(--b5-ink); --ut-component-icon-background-color:var(--b5-primary); --ut-shadow-sm:none; --ut-shadow-md:none; --ut-shadow-lg:var(--b5-shadow-over); --ut-alert-box-shadow:none; --ut-cardlist-box-shadow:none; --ut-resultsregion-background-color:var(--b5-panel); --ut-resultsregion-search-background-color:var(--b5-canvas); --ut-resultsregion-search-border-color:var(--b5-hairline); --a-resultsitem-background-color:var(--b5-panel); --a-resultsitem-border-radius:var(--blz-r-card); --a-searchresults-border-radius:var(--blz-r-card); --ut-wizard-header-background-color:var(--b5-panel); --ut-linkslist-arrow-color:var(--b5-muted); --ut-comment-chat-background-color:var(--b5-surface-2); --ut-treeview-badge-background-color:var(--b5-primary); --a-gv-border-radius:var(--blz-r-card); /* reports */ --ut-report-header-background-color:var(--b5-surface-2); --ut-report-cell-border-color:rgba(11,17,49,.08); --ut-report-cell-hover-background-color:var(--b5-hover); --ut-report-cell-alt-background-color:transparent; /* menus + chips */ --a-menu-background-color:var(--b5-panel); --a-menu-text-color:var(--b5-ink); --a-menu-border-color:var(--b5-hairline); --a-menu-border-radius:var(--blz-r-control); --a-menu-focused-background-color:var(--b5-hover); --a-menu-focused-text-color:var(--b5-ink); --a-menubar-item-border-radius:var(--blz-r-control); --a-chip-hover-background-color:var(--b5-hover); --a-chip-active-background-color:var(--b5-selected); --a-chip-applied-background-color:var(--b5-selected); --a-chip-applied-hover-background-color:color-mix(in srgb, var(--b5-link) 16%, var(--b5-panel)); --a-popuplov-chip-background-color:var(--b5-surface-2); --a-kb-shortcut-background-color:var(--b5-surface-2); --a-kb-shortcut-border-color:var(--b5-hairline); /* form fields */ --ut-field-label-text-color:var(--b5-ink); --a-field-input-background-color:var(--b5-panel); --a-field-input-text-color:var(--b5-ink); --a-field-input-border-color:var(--b5-field-border); --a-field-input-border-radius:var(--blz-r-input); --a-field-input-hover-background-color:var(--b5-panel); --a-field-input-focus-background-color:var(--b5-panel); --a-field-input-focus-border-color:var(--b5-link); --ut-field-input-focus-icon-color:var(--b5-link); --ut-field-fl-input-focus-icon-background-color:var(--b5-link); --a-checkbox-background-color:var(--b5-panel); --a-checkbox-border-color:var(--b5-field-border); --a-checkbox-checked-background-color:var(--b5-link); --a-checkbox-hover-background-color:var(--b5-hover); --a-datepicker-header-background-color:var(--b5-panel); --a-datepicker-calendar-title-background-color:var(--b5-panel); --a-datepicker-calendar-header-background-color:var(--b5-panel); /* buttons (default / secondary): white, strong hairline, ink text */ --a-button-border-radius:var(--blz-r-control); --a-button-border-color:var(--b5-hairline-strong); --a-button-text-color:var(--b5-ink); --a-button-background-color:var(--b5-panel); --a-button-hover-background-color:var(--b5-hover); --a-button-hover-border-color:var(--b5-hairline-strong); --a-button-active-background-color:#DDE1EE; --a-button-focus-background-color:var(--b5-panel); --a-button-focus-border-color:var(--b5-link); --a-button-box-shadow:none; --a-button-font-weight:600; } /* 4. Semantic palette ------------------------------------------------------- *-fill carries solids (white text ≥ 4.6:1); *-text/shade carry text on tints. */ :root{ --ut-palette-success:var(--b5-success-fill); --ut-palette-success-contrast:#FFFFFF; --ut-palette-success-shade:var(--b5-success-soft); --ut-palette-success-text:var(--b5-success); --ut-palette-warning:var(--b5-warning-fill); --ut-palette-warning-contrast:#FFFFFF; --ut-palette-warning-shade:var(--b5-warning-soft); --ut-palette-warning-text:var(--b5-warning); --ut-palette-danger:var(--b5-danger-fill); --ut-palette-danger-contrast:#FFFFFF; --ut-palette-danger-shade:var(--b5-danger-soft); --ut-palette-danger-text:var(--b5-danger); --ut-palette-info:var(--b5-info-fill); --ut-palette-info-contrast:#FFFFFF; --ut-palette-info-shade:var(--b5-info-soft); --ut-palette-info-text:var(--b5-info); --ut-palette-generic:var(--b5-surface-2); --ut-palette-generic-contrast:var(--b5-ink); --ut-palette-generic-shade:var(--b5-panel); --ut-palette-generic-text:var(--b5-ink); } /* 5. Buttons ----------------------------------------------------------------- Hot (primary) = the Blitzwood navy call-to-action: navy fill, white text. */ .t-Button--hot, .a-Button--hot, .ui-button--hot, .a-CardView-button--hot{ --a-button-background-color:var(--b5-primary); --a-button-border-color:var(--b5-primary); --a-button-text-color:#FFFFFF; --a-button-hover-background-color:var(--b5-primary-hover); --a-button-hover-border-color:var(--b5-primary-hover); --a-button-hover-text-color:#FFFFFF; --a-button-active-background-color:var(--b5-primary-hover); --a-button-active-text-color:#FFFFFF; --a-button-focus-background-color:var(--b5-primary); --a-button-focus-text-color:#FFFFFF; } .t-Button:not(.t-Button--noUI):not(.t-Button--link){ box-shadow:none; } .t-Button, .a-Button{ font-weight:600; } .t-Button--link, .t-Button--noUI.t-Button--link{ color:var(--b5-link); } /* 6. Fields + focus — a 2px royal ring with offset, the one focus style ------- */ a{ color:var(--b5-link); } :focus-visible{ outline:2px solid var(--b5-link); outline-offset:2px; } .t-Button:focus-visible, .a-Button:focus-visible{ outline:2px solid var(--b5-link); outline-offset:2px; box-shadow:none; } .blz-native .blz-input{ background:var(--b5-panel); border-color:var(--b5-field-border); font-weight:400; } .blz-native .blz-input:focus, .blz-native .blz-input:focus-visible{ background:var(--b5-panel); border-color:var(--b5-link); box-shadow:0 0 0 1px var(--b5-link); outline:none; } .blz-native .blz-input::placeholder{ color:var(--b5-disabled); font-weight:400; } .blz-native .blz-input:disabled{ background:var(--b5-surface-2); color:var(--b5-disabled); } ::selection{ background:var(--b5-selected); color:var(--b5-ink); } /* 7. Small UT touches ------------------------------------------------------- */ :root{ --ut-body-title-background-color:transparent; --ut-body-title-text-color:var(--b5-ink); --ut-body-title-box-shadow:none; --ut-body-title-backdrop-filter:none; --ut-body-title-border-color:var(--b5-hairline); --ut-breadcrumb-item-text-color:var(--b5-muted); --ut-breadcrumb-item-active-text-color:var(--b5-ink); --ut-hero-region-title-text-color:var(--b5-ink); } body, .t-Body{ background-color:var(--b5-canvas); color:var(--b5-ink); } .t-Body-title{ background-color:transparent; } .t-BreadcrumbRegion-title, .t-HeroRegion-title{ font-weight:600; letter-spacing:-.01em; } .t-Region{ box-shadow:none; } .t-Region-header{ border-block-end:1px solid var(--b5-hairline); } .t-Region--noBorder, .t-Region--removeHeader.t-Region--noUI{ box-shadow:none; } .a-IRR-container, .a-GV, .a-IG{ border-radius:var(--blz-r-card); } .ui-dialog, .ui-dialog--apex{ border-radius:var(--blz-r-sheet); overflow:hidden; box-shadow:var(--b5-shadow-over); } .ui-widget-overlay{ background:var(--blz-overlay); opacity:1; } .t-Alert{ box-shadow:none; } .a-Menu, .a-Menu-content{ box-shadow:var(--b5-shadow-over); } /* 8. blz-native primitive retune -------------------------------------------- blz-native ships heavy (700–900) weights tuned for the copper look; Redwood reads at 400 body / 600 emphasis. */ .blz-native .blz-btn{ font-weight:600; border-radius:var(--blz-r-control); } .blz-native .blz-btn-primary{ background:var(--b5-primary); color:#FFFFFF; } .blz-native .blz-btn-accent{ background:var(--b5-link); color:#FFFFFF; } .blz-native .blz-btn-ghost{ background:var(--b5-panel); color:var(--b5-ink); box-shadow:inset 0 0 0 1px var(--b5-hairline-strong); } .blz-native .blz-btn-danger{ background:var(--b5-danger-fill); color:#FFFFFF; } @media (hover:hover){ .blz-native .blz-btn-primary:not(:disabled):hover{ background:var(--b5-primary-hover); } .blz-native .blz-btn-accent:not(:disabled):hover{ background:var(--b5-link-hover); } .blz-native .blz-btn-ghost:not(:disabled):hover{ background:var(--b5-hover); } } .blz-native .blz-btn:focus-visible{ outline:2px solid var(--b5-link); outline-offset:2px; } .blz-native .blz-card{ background:var(--b5-panel); border:1px solid var(--b5-hairline); box-shadow:none; } .blz-native .blz-chip{ font-weight:600; letter-spacing:.01em; text-transform:none; font-size:.75rem; padding:2px 8px; border-radius:var(--blz-r-control); background:var(--b5-surface-2); color:var(--b5-ink); } .blz-native .blz-chip.accent{ background:var(--b5-info-soft); color:var(--b5-info); } .blz-native .blz-display{ font-weight:600; } /* 8b. Page transitions (plan 4 Task 4, decision 47) — the builder's seamless page changes: cross-document view transitions (Chrome 126+, Edge, Safari 18.2+; Firefox loads as before). The frame parts are named in blz-shell.css so they stay put while the content cross-fades. Off under reduced motion. ---- */ @view-transition{ navigation:auto; } /* every group (root and the named frame parts) on the same 180 ms ease, so the frame never lags the content */ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation-duration:180ms; animation-timing-function:ease; } @media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } } /* 9. Typography -------------------------------------------------------------- Body 14px (15px ≥ 1024px). Headings 24 / 20 / 16 at 600; display max 32 at 600. */ body{ font-family:var(--blz-font); font-size:14px; } .blz-native{ font-size:14px; } .blz-native h1, .t-Body h1{ font-size:24px; font-weight:600; line-height:1.25; } .blz-native h2, .t-Body h2{ font-size:20px; font-weight:600; line-height:1.3; } .blz-native h3, .t-Body h3{ font-size:16px; font-weight:600; line-height:1.35; } .blz-native .blz-display{ font-size:min(32px, 2rem); line-height:1.2; letter-spacing:-.01em; } .blz-native:lang(ar), .blz-native[dir="rtl"]{ font-size:15px; line-height:1.7; } /* Cairo reads smaller — +1px, as blz-native */ @media (min-width:1024px){ body, .blz-native{ font-size:15px; } .blz-native:lang(ar), .blz-native[dir="rtl"]{ font-size:16px; } }