/* ========================================================================== b5-redwood.css — blitz5tourism theme: Oracle Redwood-style corporate LIGHT ========================================================================== 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. Rules: light only (no dark mode), NO copper anywhere, flat surfaces (cards = 1px border, no shadow; menus/dialogs = one soft neutral shadow), radii 4 (inputs/buttons) · 6 (cards) · 8 (dialogs/sheets). Oracle Sans (shipped and loaded by APEX: /i//libraries/oracle-fonts/oraclesans-apex.min.css) for Latin, Cairo for Arabic. Contrast (WCAG AA, computed — sRGB relative luminance): ink #161513 on canvas #FCFBFA 17.66:1 muted #5B5652 on canvas / white / #F5F4F2 7.01 / 7.25 / 6.59:1 disabled #8A8580 on white 3.65:1 (disabled: exempt) primary white on #312D2A / hover #201E1C 13.64 / 16.62:1 link/focus #00688C on white / canvas / #E4F1F7 6.25 / 6.05 / 5.43:1 selected ink on #E4F1F7 15.84:1 The brief's semantic text colours measure ~4.0–4.1:1 on their own tints (#508223/#EEF4E7 4.11, #AC630C/#FBF1E3 4.14, #D63B25/#FCEAE7 4.00, #227E9E/#E6F2F7 4.05) — AA fail for small text. So the brief values stay the SOLID fills (--b5-*-fill: white text on them ≥ 4.6:1, icons, borders) and the text tokens are darkened one step: success #3F6A1B on #EEF4E7 5.69:1 danger #B42F1C on #FCEAE7 5.37:1 warning #8C4F08 on #FBF1E3 5.81:1 info #1D6E8B on #E6F2F7 5.04:1 brand accent #C74634 (thin marker / 2px line only) on white 4.82:1 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 9. Typography ========================================================================== */ /* 1. Palette + tokens ----------------------------------------------------- */ :root, :root[data-theme="light"], :root[data-theme="dark"]{ /* Redwood-inspired product palette (the source of truth for this file) */ --b5-canvas:#FCFBFA; --b5-panel:#FFFFFF; --b5-surface-2:#F5F4F2; /* secondary surface, table header */ --b5-hover:#F1EFED; --b5-ink:#161513; --b5-muted:#5B5652; --b5-disabled:#8A8580; --b5-hairline:rgba(22,21,19,.12); --b5-hairline-strong:rgba(22,21,19,.24); --b5-primary:#312D2A; /* Redwood "call to action": dark button, white text */ --b5-primary-hover:#201E1C; --b5-link:#00688C; /* Redwood ocean teal: links + focus */ --b5-link-hover:#004F6B; --b5-selected:#E4F1F7; /* selected / active nav tint */ --b5-accent:#C74634; /* terracotta — SPARINGLY: active marker / one 2px line */ --b5-success-fill:#508223; --b5-success:#3F6A1B; --b5-success-soft:#EEF4E7; --b5-warning-fill:#AC630C; --b5-warning:#8C4F08; --b5-warning-soft:#FBF1E3; --b5-danger-fill:#D63B25; --b5-danger:#B42F1C; --b5-danger-soft:#FCEAE7; --b5-info-fill:#227E9E; --b5-info:#1D6E8B; --b5-info-soft:#E6F2F7; --b5-shadow-over:0 4px 16px rgba(22,21,19,.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(22,21,19,.08); --blz-muted:var(--b5-muted); --blz-ink:var(--b5-primary); /* contrast surface (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 = Redwood teal */ --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(22,21,19,.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(22,21,19,.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(22,21,19,.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-hairline-strong); --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-hairline-strong); --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:#E9E6E3; --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 Redwood call-to-action: dark 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 teal 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-hairline-strong); 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; } /* 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; } }