Published: 2/26/2026 Universal Theme Variations APEX 1. apex-universal-theme-standard.css — The full light mode theme from our earlier discussion. Indigo/cyan brand palette, modern Inter font, smooth shadows, pill buttons, and responsive layout.2. apex-universal-theme-dark.css — Deep dark mode with layered dark surfaces (#0B0F1A base), glowing indigo/cyan accents, neon badge borders, a subtle grid texture overlay on the body, and glowing card/region hover effects. Includes a color-scheme: dark declaration so browser-native elements (selects, scrollbars) also render in dark mode.3. apex-universal-theme-redwood.css — Oracle Redwood Design System inspired theme featuring Redwood Red (#C74634), Deep Plum (#3A0F4B), Oracle Navy, Copper, and warm cream/stone neutrals. Uses Source Sans 3 + Noto Serif (closest open alternatives to Oracle Sans), square-ish corners (Redwood’s signature), purple gradient table headers, serif page titles, and a .rw-hero banner class you can apply to any Static Content region on your home page for a dramatic full-bleed hero section.Installation reminder: Upload each file as a Static Application File, then reference it under Shared Components → User Interface Attributes → CSS → File URLs.Theme Version 1# /* ORACLE APEX - UNIVERSAL THEME CSS ENHANCEMENT Theme: Standard (Light Mode) Version: 1.0 Description: A comprehensive CSS enhancement for Oracle APEX Universal Theme that elevates the look and feel with modern design principles. INSTALLATION: Option A: Shared Components → User Interface Attributes → CSS → Inline Option B: Upload as static file → reference in User Interface Attributes → CSS → File URLs Option C: Page Designer → CSS → Inline (for page-specific overrides) # CUSTOMIZATION: Edit the :root variables below to match your brand colors. All other styles cascade from these tokens automatically. */ /* ============================================================ 1. GOOGLE FONT IMPORT ============================================================ */ @import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap’); /* ============================================================ 2. CSS DESIGN TOKENS (CUSTOM PROPERTIES) ============================================================ */ :root { /* Brand Colors */ –custom-primary: #4F46E5; –custom-primary-dark: #3730A3; –custom-primary-light: #818CF8; –custom-accent: #06B6D4; –custom-success: #10B981; –custom-warning: #F59E0B; –custom-danger: #EF4444; /* Backgrounds */ –custom-body-bg: #F1F5F9; –custom-surface: #FFFFFF; –custom-surface-2: #F8FAFC; –custom-surface-3: #E2E8F0; /* Text */ –custom-text-primary: #0F172A; –custom-text-secondary: #475569; –custom-text-muted: #94A3B8; /* Shadows */ –shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); –shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); –shadow-lg: 0 10px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08); –shadow-glow: 0 0 0 3px rgba(79, 70, 229, 0.15); /* Border Radius */ –radius-sm: 6px; –radius-md: 12px; –radius-lg: 18px; –radius-xl: 24px; –radius-pill: 999px; /* Transitions */ –transition-fast: 0.15s ease; –transition-base: 0.25s ease; –transition-slow: 0.40s ease; /* Typography */ –font-primary: ‘Inter’, -apple-system, BlinkMacSystemFont, sans-serif; –font-mono: ‘Fira Code’, ‘Cascadia Code’, monospace; } /* ============================================================ 3. GLOBAL BODY & LAYOUT ============================================================ */ body { font-family: var(–font-primary) !important; background-color: var(–custom-body-bg) !important; color: var(–custom-text-primary) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; } html { scroll-behavior: smooth; } #t_Body_content, .t-Body-content { padding: 24px !important; } .t-Body-wrap { max-width: 1600px; margin: 0 auto; } /* ============================================================ 4. NAVIGATION HEADER ============================================================ */ .t-Header { background: linear-gradient(135deg, #1a1f36 0%, #2d3561 50%, #1a1f36 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important; } .t-Header-logo-label { color: #FFFFFF !important; font-weight: 700 !important; font-size: 1.2rem !important; letter-spacing: -0.02em; } .t-NavigationBar-item a, .t-Header-nav-list a { color: rgba(255,255,255,0.75) !important; font-weight: 500; transition: color var(–transition-fast), background var(–transition-fast) !important; border-radius: var(–radius-sm) !important; padding: 6px 12px !important; } .t-NavigationBar-item a:hover, .t-Header-nav-list a:hover { color: #FFFFFF !important; background: rgba(255,255,255,0.12) !important; } .t-NavigationBar-item.is-active a { color: #FFFFFF !important; background: rgba(79, 70, 229, 0.5) !important; } .t-Header .apex-search-field input { background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.2) !important; color: #FFFFFF !important; border-radius: var(–radius-pill) !important; } /* ============================================================ 5. SIDE NAVIGATION ============================================================ */ .t-TreeNav, .t-Body-nav { background: #FFFFFF !important; border-right: 1px solid var(–custom-surface-3) !important; box-shadow: 2px 0 16px rgba(0,0,0,0.04) !important; } .t-TreeNav .a-TreeView-node–topLevel > .a-TreeView-content { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(–custom-text-muted) !important; padding: 16px 16px 4px !important; } .t-TreeNav .a-TreeView-label { color: var(–custom-text-secondary) !important; font-weight: 500; font-size: 0.875rem; transition: color var(–transition-fast) !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node–topLevel):hover > .a-TreeView-content { background: rgba(79, 70, 229, 0.08) !important; border-radius: var(–radius-sm) !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node–topLevel):hover .a-TreeView-label { color: var(–custom-primary) !important; } .t-TreeNav .is-current > .a-TreeView-content { background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(6,182,212,0.08)) !important; border-radius: var(–radius-sm) !important; border-left: 3px solid var(–custom-primary) !important; } .t-TreeNav .is-current .a-TreeView-label { color: var(–custom-primary) !important; font-weight: 600 !important; } .t-TreeNav .a-TreeView-node .fa, .t-TreeNav .a-TreeView-node .t-Icon { color: var(–custom-primary-light) !important; } /* ============================================================ 6. REGIONS & CARDS ============================================================ */ .t-Region { background: var(–custom-surface) !important; border: 1px solid var(–custom-surface-3) !important; border-radius: var(–radius-md) !important; box-shadow: var(–shadow-sm) !important; overflow: hidden; transition: box-shadow var(–transition-base), transform var(–transition-base) !important; margin-bottom: 20px; } .t-Region:hover { box-shadow: var(–shadow-md) !important; } .t-Region-header { background: var(–custom-surface-2) !important; border-bottom: 1px solid var(–custom-surface-3) !important; padding: 14px 20px !important; } .t-Region-title { font-size: 0.95rem !important; font-weight: 700 !important; color: var(–custom-text-primary) !important; letter-spacing: -0.01em; } .t-Region-body, .t-Region-bodyWrap { padding: 20px !important; } /* Accent Color Regions */ .t-Region–accent1 .t-Region-header { border-top: 3px solid #4F46E5 !important; } .t-Region–accent2 .t-Region-header { border-top: 3px solid #06B6D4 !important; } .t-Region–accent3 .t-Region-header { border-top: 3px solid #10B981 !important; } .t-Region–accent4 .t-Region-header { border-top: 3px solid #F59E0B !important; } .t-Region–accent5 .t-Region-header { border-top: 3px solid #EF4444 !important; } .t-Region–accent6 .t-Region-header { border-top: 3px solid #8B5CF6 !important; } /* Cards */ .t-Card { border-radius: var(–radius-md) !important; border: 1px solid var(–custom-surface-3) !important; box-shadow: var(–shadow-sm) !important; transition: all var(–transition-base) !important; overflow: hidden !important; background: var(–custom-surface) !important; } .t-Card:hover { box-shadow: var(–shadow-lg) !important; transform: translateY(-4px) !important; border-color: var(–custom-primary-light) !important; } .t-Card-titleWrap { font-weight: 700 !important; font-size: 1rem !important; color: var(–custom-text-primary) !important; } .t-Card-body { color: var(–custom-text-secondary) !important; font-size: 0.875rem !important; line-height: 1.6 !important; } .t-Card-icon .t-Icon { background: linear-gradient(135deg, var(–custom-primary), var(–custom-accent)) !important; color: #FFFFFF !important; border-radius: var(–radius-md) !important; padding: 12px !important; font-size: 1.4rem !important; } /* ============================================================ 7. BUTTONS ============================================================ */ .t-Button–hot, .t-Button[class*=“hot”] { background: linear-gradient(135deg, var(–custom-primary), var(–custom-primary-dark)) !important; border: none !important; border-radius: var(–radius-pill) !important; color: #FFFFFF !important; font-weight: 600 !important; font-size: 0.875rem !important; padding: 10px 22px !important; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4) !important; transition: all var(–transition-fast) !important; letter-spacing: 0.01em; } .t-Button–hot:hover { background: linear-gradient(135deg, var(–custom-primary-dark), #312E81) !important; box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5) !important; transform: translateY(-1px) !important; } .t-Button–hot:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4) !important; } .t-Button { border-radius: var(–radius-pill) !important; font-weight: 600 !important; font-size: 0.875rem !important; padding: 9px 20px !important; border: 1.5px solid var(–custom-surface-3) !important; color: var(–custom-text-secondary) !important; background: var(–custom-surface) !important; transition: all var(–transition-fast) !important; box-shadow: var(–shadow-sm) !important; } .t-Button:hover { border-color: var(–custom-primary) !important; color: var(–custom-primary) !important; background: rgba(79, 70, 229, 0.05) !important; box-shadow: var(–shadow-md) !important; transform: translateY(-1px) !important; } .t-Button–danger { background: linear-gradient(135deg, var(–custom-danger), #B91C1C) !important; border: none !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(239,68,68,0.35) !important; } .t-Button–icon { border-radius: var(–radius-md) !important; padding: 8px 10px !important; } /* ============================================================ 8. FORM ELEMENTS ============================================================ */ .apex-item-text, .apex-item-select, .apex-item-textarea, input[type=“text”], input[type=“email”], input[type=“number”], input[type=“password”], select, textarea { border: 1.5px solid var(–custom-surface-3) !important; border-radius: var(–radius-sm) !important; background: var(–custom-surface) !important; color: var(–custom-text-primary) !important; font-family: var(–font-primary) !important; font-size: 0.875rem !important; padding: 10px 14px !important; transition: border-color var(–transition-fast), box-shadow var(–transition-fast) !important; box-shadow: var(–shadow-sm) !important; } .apex-item-text:focus, input[type=“text”]:focus, select:focus, textarea:focus { border-color: var(–custom-primary) !important; box-shadow: var(–shadow-glow) !important; outline: none !important; background: #FAFBFF !important; } .t-Form-label, .t-Form-fieldContainer label { font-weight: 600 !important; font-size: 0.8rem !important; color: var(–custom-text-secondary) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 6px !important; } .t-Form-required { color: var(–custom-danger) !important; } .t-Form-error { color: var(–custom-danger) !important; font-size: 0.78rem !important; font-weight: 500; } .a-DatePicker-cal { border-radius: var(–radius-md) !important; box-shadow: var(–shadow-lg) !important; border: 1px solid var(–custom-surface-3) !important; overflow: hidden; } /* ============================================================ 9. INTERACTIVE REPORTS & GRIDS ============================================================ */ .t-IRR-region { border-radius: var(–radius-md) !important; overflow: hidden !important; box-shadow: var(–shadow-sm) !important; } .t-Report–standardReport thead th, .a-IRR-table thead th { background: var(–custom-surface-2) !important; color: var(–custom-text-secondary) !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; border-bottom: 2px solid var(–custom-surface-3) !important; padding: 12px 16px !important; } .a-IRR-table tbody tr, .t-Report–standardReport tbody tr { transition: background var(–transition-fast) !important; border-bottom: 1px solid var(–custom-surface-3) !important; } .a-IRR-table tbody tr:hover, .t-Report–standardReport tbody tr:hover { background: rgba(79, 70, 229, 0.04) !important; } .a-IRR-table tbody tr:nth-child(even) { background: var(–custom-surface-2) !important; } .a-IRR-table tbody tr:nth-child(even):hover { background: rgba(79, 70, 229, 0.06) !important; } .a-IRR-table tbody td, .t-Report–standardReport tbody td { padding: 12px 16px !important; font-size: 0.875rem !important; color: var(–custom-text-primary) !important; vertical-align: middle !important; } .t-IRR-controls { background: var(–custom-surface-2) !important; border-bottom: 1px solid var(–custom-surface-3) !important; padding: 12px 16px !important; } .t-Report-pagination .t-Button { border-radius: var(–radius-sm) !important; padding: 6px 12px !important; font-size: 0.8rem !important; } /* ============================================================ 10. BADGES & TAGS ============================================================ */ .t-Badge { border-radius: var(–radius-pill) !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.03em !important; padding: 3px 10px !important; } .t-Badge–success { background: rgba(16,185,129,0.15) !important; color: #065F46 !important; } .t-Badge–warning { background: rgba(245,158,11,0.15) !important; color: #92400E !important; } .t-Badge–danger { background: rgba(239, 68, 68,0.15) !important; color: #991B1B !important; } .t-Badge–info { background: rgba(6,182,212,0.15) !important; color: #164E63 !important; } /* ============================================================ 11. ALERTS & NOTIFICATIONS ============================================================ */ .t-Alert { border-radius: var(–radius-md) !important; border: none !important; border-left: 4px solid !important; box-shadow: var(–shadow-sm) !important; font-size: 0.875rem !important; padding: 14px 18px !important; } .t-Alert–success { background: rgba(16,185,129,0.08) !important; border-left-color: var(–custom-success) !important; color: #065F46 !important; } .t-Alert–warning { background: rgba(245,158,11,0.08) !important; border-left-color: var(–custom-warning) !important; color: #92400E !important; } .t-Alert–danger { background: rgba(239,68,68,0.08) !important; border-left-color: var(–custom-danger) !important; color: #991B1B !important; } .t-Alert–info { background: rgba(6,182,212,0.08) !important; border-left-color: var(–custom-accent) !important; color: #164E63 !important; } /* ============================================================ 12. DIALOGS & MODALS ============================================================ */ .ui-dialog { border-radius: var(–radius-lg) !important; border: none !important; box-shadow: var(–shadow-lg), 0 0 0 1px rgba(0,0,0,0.05) !important; overflow: hidden !important; } .ui-dialog .ui-dialog-titlebar { background: linear-gradient(135deg, #1a1f36, #2d3561) !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 1rem !important; padding: 16px 20px !important; border: none !important; } .ui-dialog .ui-dialog-content { padding: 24px !important; background: var(–custom-surface) !important; } .ui-widget-overlay { background: rgba(15, 23, 42, 0.6) !important; backdrop-filter: blur(4px) !important; } /* ============================================================ 13. LOADING & PROGRESS ============================================================ */ .u-Processing, .apex-page-spinner { border-color: var(–custom-surface-3) !important; border-top-color: var(–custom-primary) !important; } .t-ProgressBar-bar { background: linear-gradient(90deg, var(–custom-primary), var(–custom-accent)) !important; border-radius: var(–radius-pill) !important; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35) !important; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ 14. BREADCRUMBS & PAGE TITLE ============================================================ */ .t-BreadcrumbRegion-title, .t-HeroRegion-title { font-size: 1.75rem !important; font-weight: 800 !important; color: var(–custom-text-primary) !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; } .t-Breadcrumb-item { font-size: 0.8rem !important; font-weight: 500 !important; color: var(–custom-text-muted) !important; } .t-Breadcrumb-item.is-active { color: var(–custom-primary) !important; font-weight: 600 !important; } .t-Breadcrumb-item a { color: var(–custom-text-secondary) !important; transition: color var(–transition-fast) !important; } .t-Breadcrumb-item a:hover { color: var(–custom-primary) !important; } /* ============================================================ 15. CUSTOM SCROLLBARS ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(–custom-surface-2); border-radius: var(–radius-pill); } ::-webkit-scrollbar-thumb { background: var(–custom-surface-3); border-radius: var(–radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(–custom-text-muted); } /* ============================================================ 16. RESPONSIVE TWEAKS ============================================================ */ @media (max-width: 768px) { .t-Region { border-radius: var(–radius-sm) !important; margin-bottom: 12px; } .t-Button–hot, .t-Button { width: 100% !important; justify-content: center !important; } #t_Body_content { padding: 12px !important; } .t-BreadcrumbRegion-title { font-size: 1.3rem !important; } } Example 2 # /* ORACLE APEX - UNIVERSAL THEME CSS ENHANCEMENT Theme: Dark Mode Version: 1.0 Description: A dark mode CSS enhancement for Oracle APEX Universal Theme. Deep, rich dark surfaces with vibrant accent colors designed for comfortable extended use and modern aesthetics. INSTALLATION: Option A: Shared Components → User Interface Attributes → CSS → Inline Option B: Upload as static file → reference in User Interface Attributes → CSS → File URLs Option C: Page Designer → CSS → Inline (for page-specific overrides) # TIP: Combine with a dynamic action or toggle button to switch between the standard and dark mode stylesheets at runtime. */ /* ============================================================ 1. GOOGLE FONT IMPORT ============================================================ */ @import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap’); /* ============================================================ 2. CSS DESIGN TOKENS - DARK MODE PALETTE ============================================================ */ :root { /* Brand Colors */ –custom-primary: #818CF8; –custom-primary-dark: #6366F1; –custom-primary-light: #A5B4FC; –custom-accent: #22D3EE; –custom-success: #34D399; –custom-warning: #FBBF24; –custom-danger: #F87171; /* Dark Backgrounds (layered depth system) */ –custom-body-bg: #0B0F1A; –custom-surface: #111827; –custom-surface-2: #1F2937; –custom-surface-3: #374151; –custom-surface-4: #4B5563; /* Text */ –custom-text-primary: #F1F5F9; –custom-text-secondary: #94A3B8; –custom-text-muted: #64748B; /* Shadows (more subtle in dark mode) */ –shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); –shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4); –shadow-lg: 0 10px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.5); –shadow-glow: 0 0 0 3px rgba(129, 140, 248, 0.25); /* Glow effects (unique to dark mode) */ –glow-primary: 0 0 20px rgba(129, 140, 248, 0.3); –glow-accent: 0 0 20px rgba(34, 211, 238, 0.2); /* Border Radius */ –radius-sm: 6px; –radius-md: 12px; –radius-lg: 18px; –radius-xl: 24px; –radius-pill: 999px; /* Transitions */ –transition-fast: 0.15s ease; –transition-base: 0.25s ease; –transition-slow: 0.40s ease; /* Typography */ –font-primary: ‘Inter’, -apple-system, BlinkMacSystemFont, sans-serif; –font-mono: ‘Fira Code’, ‘Cascadia Code’, monospace; } /* ============================================================ 3. GLOBAL BODY & LAYOUT ============================================================ */ body { font-family: var(–font-primary) !important; background-color: var(–custom-body-bg) !important; color: var(–custom-text-primary) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; } html { scroll-behavior: smooth; color-scheme: dark; } #t_Body_content, .t-Body-content { padding: 24px !important; } .t-Body-wrap { max-width: 1600px; margin: 0 auto; } /* ============================================================ 4. NAVIGATION HEADER ============================================================ */ .t-Header { background: linear-gradient(135deg, #060B18 0%, #0D1226 50%, #060B18 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 1px 0 rgba(129,140,248,0.15) !important; } .t-Header-logo-label { color: #FFFFFF !important; font-weight: 700 !important; font-size: 1.2rem !important; letter-spacing: -0.02em; text-shadow: 0 0 20px rgba(129,140,248,0.5); } .t-NavigationBar-item a, .t-Header-nav-list a { color: rgba(255,255,255,0.6) !important; font-weight: 500; transition: color var(–transition-fast), background var(–transition-fast) !important; border-radius: var(–radius-sm) !important; padding: 6px 12px !important; } .t-NavigationBar-item a:hover, .t-Header-nav-list a:hover { color: #FFFFFF !important; background: rgba(255,255,255,0.08) !important; } .t-NavigationBar-item.is-active a { color: var(–custom-primary-light) !important; background: rgba(129, 140, 248, 0.15) !important; } .t-Header .apex-search-field input { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #FFFFFF !important; border-radius: var(–radius-pill) !important; } /* ============================================================ 5. SIDE NAVIGATION ============================================================ */ .t-TreeNav, .t-Body-nav { background: var(–custom-surface) !important; border-right: 1px solid var(–custom-surface-3) !important; box-shadow: 2px 0 16px rgba(0,0,0,0.4) !important; } .t-TreeNav .a-TreeView-node–topLevel > .a-TreeView-content { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(–custom-text-muted) !important; padding: 16px 16px 4px !important; } .t-TreeNav .a-TreeView-label { color: var(–custom-text-secondary) !important; font-weight: 500; font-size: 0.875rem; transition: color var(–transition-fast) !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node–topLevel):hover > .a-TreeView-content { background: rgba(129, 140, 248, 0.1) !important; border-radius: var(–radius-sm) !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node–topLevel):hover .a-TreeView-label { color: var(–custom-primary) !important; } .t-TreeNav .is-current > .a-TreeView-content { background: linear-gradient(135deg, rgba(129,140,248,0.15), rgba(34,211,238,0.08)) !important; border-radius: var(–radius-sm) !important; border-left: 3px solid var(–custom-primary) !important; } .t-TreeNav .is-current .a-TreeView-label { color: var(–custom-primary) !important; font-weight: 600 !important; } .t-TreeNav .a-TreeView-node .fa, .t-TreeNav .a-TreeView-node .t-Icon { color: var(–custom-primary) !important; } /* ============================================================ 6. REGIONS & CARDS ============================================================ */ .t-Region { background: var(–custom-surface) !important; border: 1px solid var(–custom-surface-3) !important; border-radius: var(–radius-md) !important; box-shadow: var(–shadow-sm) !important; overflow: hidden; transition: box-shadow var(–transition-base), transform var(–transition-base) !important; margin-bottom: 20px; } .t-Region:hover { box-shadow: var(–shadow-md), var(–glow-primary) !important; border-color: rgba(129,140,248,0.3) !important; } .t-Region-header { background: var(–custom-surface-2) !important; border-bottom: 1px solid var(–custom-surface-3) !important; padding: 14px 20px !important; } .t-Region-title { font-size: 0.95rem !important; font-weight: 700 !important; color: var(–custom-text-primary) !important; letter-spacing: -0.01em; } .t-Region-body, .t-Region-bodyWrap { padding: 20px !important; } /* Glowing Accent Color Regions */ .t-Region–accent1 .t-Region-header { border-top: 3px solid #818CF8 !important; box-shadow: 0 -2px 12px rgba(129,140,248,0.25) !important; } .t-Region–accent2 .t-Region-header { border-top: 3px solid #22D3EE !important; box-shadow: 0 -2px 12px rgba(34,211,238,0.25) !important; } .t-Region–accent3 .t-Region-header { border-top: 3px solid #34D399 !important; box-shadow: 0 -2px 12px rgba(52,211,153,0.25) !important; } .t-Region–accent4 .t-Region-header { border-top: 3px solid #FBBF24 !important; box-shadow: 0 -2px 12px rgba(251,191,36,0.25) !important; } .t-Region–accent5 .t-Region-header { border-top: 3px solid #F87171 !important; box-shadow: 0 -2px 12px rgba(248,113,113,0.25) !important; } .t-Region–accent6 .t-Region-header { border-top: 3px solid #C084FC !important; box-shadow: 0 -2px 12px rgba(192,132,252,0.25) !important; } /* Cards */ .t-Card { border-radius: var(–radius-md) !important; border: 1px solid var(–custom-surface-3) !important; box-shadow: var(–shadow-sm) !important; transition: all var(–transition-base) !important; overflow: hidden !important; background: var(–custom-surface) !important; } .t-Card:hover { box-shadow: var(–shadow-lg), var(–glow-primary) !important; transform: translateY(-4px) !important; border-color: rgba(129,140,248,0.4) !important; } .t-Card-titleWrap { font-weight: 700 !important; font-size: 1rem !important; color: var(–custom-text-primary) !important; } .t-Card-body { color: var(–custom-text-secondary) !important; font-size: 0.875rem !important; line-height: 1.6 !important; } .t-Card-icon .t-Icon { background: linear-gradient(135deg, rgba(129,140,248,0.2), rgba(34,211,238,0.15)) !important; color: var(–custom-primary) !important; border-radius: var(–radius-md) !important; padding: 12px !important; font-size: 1.4rem !important; border: 1px solid rgba(129,140,248,0.3) !important; } /* ============================================================ 7. BUTTONS ============================================================ */ .t-Button–hot, .t-Button[class*=“hot”] { background: linear-gradient(135deg, var(–custom-primary-dark), #4338CA) !important; border: 1px solid rgba(129,140,248,0.3) !important; border-radius: var(–radius-pill) !important; color: #FFFFFF !important; font-weight: 600 !important; font-size: 0.875rem !important; padding: 10px 22px !important; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4), var(–glow-primary) !important; transition: all var(–transition-fast) !important; letter-spacing: 0.01em; } .t-Button–hot:hover { background: linear-gradient(135deg, var(–custom-primary), var(–custom-primary-dark)) !important; box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6), var(–glow-primary) !important; transform: translateY(-1px) !important; } .t-Button–hot:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4) !important; } .t-Button { border-radius: var(–radius-pill) !important; font-weight: 600 !important; font-size: 0.875rem !important; padding: 9px 20px !important; border: 1.5px solid var(–custom-surface-3) !important; color: var(–custom-text-secondary) !important; background: var(–custom-surface-2) !important; transition: all var(–transition-fast) !important; box-shadow: var(–shadow-sm) !important; } .t-Button:hover { border-color: var(–custom-primary) !important; color: var(–custom-primary) !important; background: rgba(129, 140, 248, 0.1) !important; box-shadow: var(–shadow-md) !important; transform: translateY(-1px) !important; } .t-Button–danger { background: linear-gradient(135deg, #991B1B, #7F1D1D) !important; border: 1px solid rgba(248,113,113,0.3) !important; color: #FCA5A5 !important; box-shadow: 0 4px 14px rgba(248,113,113,0.25) !important; } .t-Button–icon { border-radius: var(–radius-md) !important; padding: 8px 10px !important; } /* ============================================================ 8. FORM ELEMENTS ============================================================ */ .apex-item-text, .apex-item-select, .apex-item-textarea, input[type=“text”], input[type=“email”], input[type=“number”], input[type=“password”], select, textarea { border: 1.5px solid var(–custom-surface-3) !important; border-radius: var(–radius-sm) !important; background: var(–custom-surface-2) !important; color: var(–custom-text-primary) !important; font-family: var(–font-primary) !important; font-size: 0.875rem !important; padding: 10px 14px !important; transition: border-color var(–transition-fast), box-shadow var(–transition-fast) !important; box-shadow: var(–shadow-sm) !important; } .apex-item-text:focus, input[type=“text”]:focus, select:focus, textarea:focus { border-color: var(–custom-primary) !important; box-shadow: var(–shadow-glow) !important; outline: none !important; background: #1A2035 !important; } /* Select arrow color fix for dark mode */ select { color-scheme: dark; } .t-Form-label, .t-Form-fieldContainer label { font-weight: 600 !important; font-size: 0.8rem !important; color: var(–custom-text-secondary) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 6px !important; } .t-Form-required { color: var(–custom-danger) !important; } .t-Form-error { color: var(–custom-danger) !important; font-size: 0.78rem !important; font-weight: 500; } .a-DatePicker-cal { border-radius: var(–radius-md) !important; box-shadow: var(–shadow-lg) !important; border: 1px solid var(–custom-surface-3) !important; background: var(–custom-surface) !important; overflow: hidden; } /* ============================================================ 9. INTERACTIVE REPORTS & GRIDS ============================================================ */ .t-IRR-region { border-radius: var(–radius-md) !important; overflow: hidden !important; box-shadow: var(–shadow-sm) !important; } .t-Report–standardReport thead th, .a-IRR-table thead th { background: var(–custom-surface-2) !important; color: var(–custom-text-secondary) !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; border-bottom: 2px solid var(–custom-surface-3) !important; padding: 12px 16px !important; } .a-IRR-table tbody tr, .t-Report–standardReport tbody tr { transition: background var(–transition-fast) !important; border-bottom: 1px solid var(–custom-surface-3) !important; } .a-IRR-table tbody tr:hover, .t-Report–standardReport tbody tr:hover { background: rgba(129, 140, 248, 0.06) !important; } .a-IRR-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02) !important; } .a-IRR-table tbody tr:nth-child(even):hover { background: rgba(129, 140, 248, 0.08) !important; } .a-IRR-table tbody td, .t-Report–standardReport tbody td { padding: 12px 16px !important; font-size: 0.875rem !important; color: var(–custom-text-primary) !important; vertical-align: middle !important; } .t-IRR-controls { background: var(–custom-surface-2) !important; border-bottom: 1px solid var(–custom-surface-3) !important; padding: 12px 16px !important; } /* ============================================================ 10. BADGES & TAGS ============================================================ */ .t-Badge { border-radius: var(–radius-pill) !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.03em !important; padding: 3px 10px !important; } .t-Badge–success { background: rgba(52,211,153,0.15) !important; color: #6EE7B7 !important; border: 1px solid rgba(52,211,153,0.3) !important; } .t-Badge–warning { background: rgba(251,191,36,0.15) !important; color: #FDE68A !important; border: 1px solid rgba(251,191,36,0.3) !important; } .t-Badge–danger { background: rgba(248,113,113,0.15) !important; color: #FCA5A5 !important; border: 1px solid rgba(248,113,113,0.3) !important; } .t-Badge–info { background: rgba(34,211,238,0.15) !important; color: #67E8F9 !important; border: 1px solid rgba(34,211,238,0.3) !important; } /* ============================================================ 11. ALERTS & NOTIFICATIONS ============================================================ */ .t-Alert { border-radius: var(–radius-md) !important; border: none !important; border-left: 4px solid !important; box-shadow: var(–shadow-sm) !important; font-size: 0.875rem !important; padding: 14px 18px !important; } .t-Alert–success { background: rgba(52,211,153,0.08) !important; border-left-color: var(–custom-success) !important; color: #6EE7B7 !important; } .t-Alert–warning { background: rgba(251,191,36,0.08) !important; border-left-color: var(–custom-warning) !important; color: #FDE68A !important; } .t-Alert–danger { background: rgba(248,113,113,0.08) !important; border-left-color: var(–custom-danger) !important; color: #FCA5A5 !important; } .t-Alert–info { background: rgba(34,211,238,0.08) !important; border-left-color: var(–custom-accent) !important; color: #67E8F9 !important; } /* ============================================================ 12. DIALOGS & MODALS ============================================================ */ .ui-dialog { border-radius: var(–radius-lg) !important; border: 1px solid var(–custom-surface-3) !important; box-shadow: var(–shadow-lg), var(–glow-primary) !important; overflow: hidden !important; } .ui-dialog .ui-dialog-titlebar { background: linear-gradient(135deg, #060B18, #0D1226) !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 1rem !important; padding: 16px 20px !important; border-bottom: 1px solid var(–custom-surface-3) !important; border-top: 2px solid var(–custom-primary) !important; } .ui-dialog .ui-dialog-content { padding: 24px !important; background: var(–custom-surface) !important; color: var(–custom-text-primary) !important; } .ui-widget-overlay { background: rgba(0, 0, 0, 0.8) !important; backdrop-filter: blur(6px) !important; } /* ============================================================ 13. LOADING & PROGRESS ============================================================ */ .u-Processing, .apex-page-spinner { border-color: var(–custom-surface-3) !important; border-top-color: var(–custom-primary) !important; filter: drop-shadow(0 0 6px rgba(129,140,248,0.5)); } .t-ProgressBar-bar { background: linear-gradient(90deg, var(–custom-primary-dark), var(–custom-accent)) !important; border-radius: var(–radius-pill) !important; box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4), var(–glow-primary) !important; } /* Dark shimmer loader */ @keyframes shimmer-dark { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .is-loading .t-Region-body::after { content: ‘’; display: block; height: 200px; background: linear-gradient(90deg, #1F2937 25%, #374151 50%, #1F2937 75%); background-size: 200% 100%; animation: shimmer-dark 1.5s infinite; border-radius: var(–radius-sm); } /* ============================================================ 14. BREADCRUMBS & PAGE TITLE ============================================================ */ .t-BreadcrumbRegion-title, .t-HeroRegion-title { font-size: 1.75rem !important; font-weight: 800 !important; color: var(–custom-text-primary) !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; } .t-Breadcrumb-item { font-size: 0.8rem !important; font-weight: 500 !important; color: var(–custom-text-muted) !important; } .t-Breadcrumb-item.is-active { color: var(–custom-primary) !important; font-weight: 600 !important; } .t-Breadcrumb-item a { color: var(–custom-text-secondary) !important; transition: color var(–transition-fast) !important; } .t-Breadcrumb-item a:hover { color: var(–custom-primary) !important; } /* ============================================================ 15. DARK MODE SPECIFIC ENHANCEMENTS ============================================================ */ /* Subtle grid background for body */ body::before { content: ‘’; position: fixed; inset: 0; background-image: linear-gradient(rgba(129,140,248,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } /* Neon divider lines */ hr, .t-Region-header::after { border-color: var(–custom-surface-3) !important; } /* Icon glow effect */ .t-Icon, .fa { filter: drop-shadow(0 0 4px rgba(129,140,248,0.3)); } /* Link styling */ a:not(.t-Button):not(.t-TreeNav a) { color: var(–custom-primary-light) !important; transition: color var(–transition-fast), text-shadow var(–transition-fast) !important; } a:not(.t-Button):not(.t-TreeNav a):hover { color: var(–custom-accent) !important; text-shadow: 0 0 8px rgba(34,211,238,0.4) !important; } /* Code blocks */ code, pre, .apex-item-display-only { background: var(–custom-surface-2) !important; border: 1px solid var(–custom-surface-3) !important; color: var(–custom-primary-light) !important; border-radius: var(–radius-sm) !important; font-family: var(–font-mono) !important; } /* ============================================================ 16. CUSTOM SCROLLBARS (DARK) ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(–custom-surface); border-radius: var(–radius-pill); } ::-webkit-scrollbar-thumb { background: var(–custom-surface-3); border-radius: var(–radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(–custom-surface-4); } /* ============================================================ 17. RESPONSIVE TWEAKS ============================================================ */ @media (max-width: 768px) { .t-Region { border-radius: var(–radius-sm) !important; margin-bottom: 12px; } .t-Button–hot, .t-Button { width: 100% !important; justify-content: center !important; } #t_Body_content { padding: 12px !important; } .t-BreadcrumbRegion-title { font-size: 1.3rem !important; } } Example 3# /* ORACLE APEX - UNIVERSAL THEME CSS ENHANCEMENT Theme: Oracle Redwood Design System Version: 1.0 Description: An Oracle Redwood-inspired CSS enhancement for APEX Universal Theme. Redwood is Oracle’s modern design system featuring warm neutrals, terracotta reds, rich purples, and clean typography that aligns with Oracle Cloud, JD Edwards, and Fusion applications. ORACLE REDWOOD COLOR PALETTE REFERENCE: Primary Red: #C74634 (Redwood Red) Deep Plum: #3A0F4B (Oracle Dark Purple) Slate Blue: #312D7A (Deep Navy) Copper Gold: #B54F15 (Oracle Copper) Warm Neutral: #F7F4F0 (Redwood Cream) Stone: #EDE9E4 (Oracle Stone) # INSTALLATION: Option A: Shared Components → User Interface Attributes → CSS → Inline Option B: Upload as static file → reference in User Interface Attributes → CSS → File URLs Option C: Page Designer → CSS → Inline (for page-specific overrides) */ /* ============================================================ 1. GOOGLE FONT IMPORT Oracle Redwood uses Oracle Sans — closest Google Font equivalent is “Source Sans 3” + “Noto Serif” for editorial headings. ============================================================ */ @import url(‘https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&family=Noto+Serif:wght@400;700&display=swap’); /* ============================================================ 2. CSS DESIGN TOKENS — ORACLE REDWOOD PALETTE ============================================================ */ :root { /* ── Core Redwood Brand Colors ── */ –rw-red: #C74634; /* Redwood Red — primary CTA */ –rw-red-dark: #A83928; /* Hover / pressed state */ –rw-red-light: #D9675A; /* Lighter shade */ –rw-red-pale: #FAEDE9; /* Red tint background */ –rw-plum: #3A0F4B; /* Oracle Deep Plum */ –rw-plum-mid: #5C2475; /* Mid-purple */ –rw-plum-light: #8B5FA8; /* Light purple */ –rw-plum-pale: #F2EBF7; /* Purple tint */ –rw-navy: #1B2A4A; /* Oracle Navy */ –rw-navy-mid: #2E4270; /* Navigation mid */ –rw-navy-light: #4A6FA5; /* Link blue */ –rw-copper: #B54F15; /* Oracle Copper / secondary CTA */ –rw-copper-light: #D4722E; –rw-copper-pale: #FBF0E8; –rw-gold: #9A6F00; /* Oracle Gold — warnings */ –rw-gold-light: #C49200; –rw-gold-pale: #FBF6E4; –rw-green: #1D7A4A; /* Success green */ –rw-green-light: #2A9E61; –rw-green-pale: #E8F5EE; /* ── Neutral / Surface Palette ── */ –rw-cream: #F7F4F0; /* Warm page background */ –rw-stone: #EDE9E4; /* Card / region background */ –rw-pebble: #DDD8D2; /* Border / divider */ –rw-clay: #C4BBB0; /* Muted border */ –rw-slate: #6B635A; /* Secondary text */ –rw-charcoal: #3D3530; /* Primary text */ –rw-ink: #1A1210; /* Headings */ /* ── White surfaces ── */ –rw-white: #FFFFFF; –rw-off-white: #FDFBF9; /* ── Semantic aliases ── */ –custom-primary: var(–rw-red); –custom-primary-dark: var(–rw-red-dark); –custom-primary-light: var(–rw-red-light); –custom-accent: var(–rw-plum-mid); –custom-success: var(–rw-green); –custom-warning: var(–rw-gold); –custom-danger: #D94F3A; –custom-body-bg: var(–rw-cream); –custom-surface: var(–rw-white); –custom-surface-2: var(–rw-off-white); –custom-surface-3: var(–rw-stone); –custom-surface-4: var(–rw-pebble); –custom-text-primary: var(–rw-charcoal); –custom-text-secondary: var(–rw-slate); –custom-text-muted: var(–rw-clay); –custom-text-heading: var(–rw-ink); /* ── Shadows ── */ –shadow-sm: 0 1px 3px rgba(61, 53, 48, 0.10), 0 1px 2px rgba(61, 53, 48, 0.06); –shadow-md: 0 4px 16px rgba(61, 53, 48, 0.12), 0 2px 6px rgba(61, 53, 48, 0.08); –shadow-lg: 0 10px 40px rgba(61, 53, 48, 0.15), 0 4px 12px rgba(61, 53, 48, 0.10); –shadow-glow: 0 0 0 3px rgba(199, 70, 52, 0.20); /* ── Radius (Redwood uses slightly squared corners — refined not round) ── */ –radius-sm: 4px; –radius-md: 8px; –radius-lg: 12px; –radius-xl: 16px; –radius-pill: 999px; /* ── Transitions ── */ –transition-fast: 0.15s ease; –transition-base: 0.25s ease; /* ── Typography ── */ –font-primary: ‘Source Sans 3’, ‘Oracle Sans’, -apple-system, BlinkMacSystemFont, sans-serif; –font-heading: ‘Noto Serif’, ‘Georgia’, serif; –font-mono: ‘Cascadia Code’, ‘Consolas’, monospace; } /* ============================================================ 3. GLOBAL BODY & LAYOUT ============================================================ */ body { font-family: var(–font-primary) !important; background-color: var(–rw-cream) !important; color: var(–rw-charcoal) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; line-height: 1.6; } html { scroll-behavior: smooth; } #t_Body_content, .t-Body-content { padding: 24px !important; } .t-Body-wrap { max-width: 1600px; margin: 0 auto; } /* Redwood uses a subtle warm texture on the page background */ .t-Body-main { background: var(–rw-cream) !important; } /* ============================================================ 4. NAVIGATION HEADER — ORACLE REDWOOD TOP BAR ============================================================ */ .t-Header { background: linear-gradient(180deg, var(–rw-plum) 0%, var(–rw-navy) 100%) !important; border-bottom: 3px solid var(–rw-red) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important; } /* Oracle logo area — warm white wordmark feel */ .t-Header-logo-label { color: #FFFFFF !important; font-weight: 700 !important; font-size: 1.15rem !important; font-family: var(–font-primary) !important; letter-spacing: 0.01em; } /* Red accent underline on logo for Oracle branding */ .t-Header-logo { border-right: 2px solid rgba(199, 70, 52, 0.5) !important; padding-right: 16px !important; margin-right: 16px !important; } .t-NavigationBar-item a, .t-Header-nav-list a { color: rgba(255,255,255,0.80) !important; font-weight: 500; font-size: 0.875rem; transition: color var(–transition-fast), background var(–transition-fast) !important; border-radius: var(–radius-sm) !important; padding: 6px 12px !important; } .t-NavigationBar-item a:hover, .t-Header-nav-list a:hover { color: #FFFFFF !important; background: rgba(199, 70, 52, 0.25) !important; } .t-NavigationBar-item.is-active a { color: #FFFFFF !important; background: var(–rw-red) !important; border-radius: var(–radius-sm) !important; } .t-Header .apex-search-field input { background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.20) !important; color: #FFFFFF !important; border-radius: var(–radius-sm) !important; } .t-Header .apex-search-field input::placeholder { color: rgba(255,255,255,0.5) !important; } /* ============================================================ 5. SIDE NAVIGATION — REDWOOD SIDE PANEL ============================================================ */ .t-TreeNav, .t-Body-nav { background: var(–rw-white) !important; border-right: 1px solid var(–rw-pebble) !important; box-shadow: 2px 0 8px rgba(61,53,48,0.08) !important; } /* Section group labels */ .t-TreeNav .a-TreeView-node–topLevel > .a-TreeView-content { font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(–rw-clay) !important; padding: 16px 16px 4px !important; border-top: 1px solid var(–rw-stone) !important; } .t-TreeNav .a-TreeView-label { color: var(–rw-slate) !important; font-weight: 400; font-size: 0.875rem; transition: color var(–transition-fast) !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node–topLevel):hover > .a-TreeView-content { background: var(–rw-red-pale) !important; border-radius: var(–radius-sm) !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node–topLevel):hover .a-TreeView-label { color: var(–rw-red-dark) !important; } /* Active nav item — Redwood left accent bar */ .t-TreeNav .is-current > .a-TreeView-content { background: var(–rw-red-pale) !important; border-radius: 0 var(–radius-sm) var(–radius-sm) 0 !important; border-left: 4px solid var(–rw-red) !important; } .t-TreeNav .is-current .a-TreeView-label { color: var(–rw-red-dark) !important; font-weight: 600 !important; } .t-TreeNav .a-TreeView-node .fa, .t-TreeNav .a-TreeView-node .t-Icon { color: var(–rw-red) !important; } /* ============================================================ 6. REGIONS — REDWOOD CARD STYLE ============================================================ */ .t-Region { background: var(–rw-white) !important; border: 1px solid var(–rw-pebble) !important; border-radius: var(–radius-md) !important; box-shadow: var(–shadow-sm) !important; overflow: hidden; transition: box-shadow var(–transition-base) !important; margin-bottom: 20px; } .t-Region:hover { box-shadow: var(–shadow-md) !important; } /* Redwood region header — warm stone background */ .t-Region-header { background: var(–rw-stone) !important; border-bottom: 1px solid var(–rw-pebble) !important; padding: 12px 20px !important; } .t-Region-title { font-size: 0.95rem !important; font-weight: 600 !important; color: var(–rw-ink) !important; font-family: var(–font-primary) !important; letter-spacing: 0; } .t-Region-body, .t-Region-bodyWrap { padding: 20px !important; } /* Accent Regions — top border in Oracle Redwood accent colors */ .t-Region–accent1 .t-Region-header { border-top: 3px solid var(–rw-red) !important; background: linear-gradient(180deg, var(–rw-red-pale), var(–rw-stone)) !important; } .t-Region–accent2 .t-Region-header { border-top: 3px solid var(–rw-plum-mid) !important; background: linear-gradient(180deg, var(–rw-plum-pale), var(–rw-stone)) !important; } .t-Region–accent3 .t-Region-header { border-top: 3px solid var(–rw-green) !important; background: linear-gradient(180deg, var(–rw-green-pale), var(–rw-stone)) !important; } .t-Region–accent4 .t-Region-header { border-top: 3px solid var(–rw-gold) !important; background: linear-gradient(180deg, var(–rw-gold-pale), var(–rw-stone)) !important; } .t-Region–accent5 .t-Region-header { border-top: 3px solid var(–rw-copper) !important; background: linear-gradient(180deg, var(–rw-copper-pale), var(–rw-stone)) !important; } .t-Region–accent6 .t-Region-header { border-top: 3px solid var(–rw-navy) !important; background: linear-gradient(180deg, #EAF0F7, var(–rw-stone)) !important; } /* Redwood Cards */ .t-Card { border-radius: var(–radius-md) !important; border: 1px solid var(–rw-pebble) !important; box-shadow: var(–shadow-sm) !important; transition: all var(–transition-base) !important; overflow: hidden !important; background: var(–rw-white) !important; } .t-Card:hover { box-shadow: var(–shadow-md) !important; transform: translateY(-3px) !important; border-color: var(–rw-red-light) !important; } .t-Card-titleWrap { font-weight: 600 !important; font-size: 0.95rem !important; color: var(–rw-ink) !important; font-family: var(–font-primary) !important; } .t-Card-body { color: var(–rw-slate) !important; font-size: 0.875rem !important; line-height: 1.6 !important; } /* Oracle Redwood card icon — terracotta gradient */ .t-Card-icon .t-Icon { background: linear-gradient(135deg, var(–rw-red), var(–rw-copper)) !important; color: #FFFFFF !important; border-radius: var(–radius-sm) !important; padding: 12px !important; font-size: 1.3rem !important; } /* ============================================================ 7. BUTTONS — REDWOOD CTA STYLE ============================================================ */ /* Primary / Hot Button — Oracle Redwood Red */ .t-Button–hot, .t-Button[class*=“hot”] { background: var(–rw-red) !important; border: 1px solid var(–rw-red-dark) !important; border-radius: var(–radius-sm) !important; color: #FFFFFF !important; font-weight: 600 !important; font-size: 0.875rem !important; padding: 9px 20px !important; box-shadow: 0 2px 6px rgba(199, 70, 52, 0.35) !important; transition: all var(–transition-fast) !important; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem !important; } .t-Button–hot:hover { background: var(–rw-red-dark) !important; box-shadow: 0 4px 12px rgba(199, 70, 52, 0.45) !important; transform: translateY(-1px) !important; } .t-Button–hot:active { transform: translateY(0) !important; box-shadow: 0 1px 4px rgba(199, 70, 52, 0.4) !important; } /* Default Button */ .t-Button { border-radius: var(–radius-sm) !important; font-weight: 500 !important; font-size: 0.875rem !important; padding: 8px 18px !important; border: 1.5px solid var(–rw-pebble) !important; color: var(–rw-slate) !important; background: var(–rw-white) !important; transition: all var(–transition-fast) !important; box-shadow: var(–shadow-sm) !important; } .t-Button:hover { border-color: var(–rw-red) !important; color: var(–rw-red-dark) !important; background: var(–rw-red-pale) !important; box-shadow: var(–shadow-md) !important; transform: translateY(-1px) !important; } /* Secondary / Accent — Plum */ .t-Button–simple { color: var(–rw-plum-mid) !important; border-color: var(–rw-plum-mid) !important; } .t-Button–simple:hover { background: var(–rw-plum-pale) !important; border-color: var(–rw-plum) !important; color: var(–rw-plum) !important; } /* Danger */ .t-Button–danger { background: #D94F3A !important; border: 1px solid #B83929 !important; color: #FFFFFF !important; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem !important; } .t-Button–icon { border-radius: var(–radius-sm) !important; padding: 8px 10px !important; } /* ============================================================ 8. FORM ELEMENTS — REDWOOD INPUT STYLE ============================================================ */ .apex-item-text, .apex-item-select, .apex-item-textarea, input[type=“text”], input[type=“email”], input[type=“number”], input[type=“password”], select, textarea { border: 1.5px solid var(–rw-pebble) !important; border-radius: var(–radius-sm) !important; background: var(–rw-white) !important; color: var(–rw-charcoal) !important; font-family: var(–font-primary) !important; font-size: 0.875rem !important; padding: 9px 12px !important; transition: border-color var(–transition-fast), box-shadow var(–transition-fast) !important; box-shadow: inset 0 1px 2px rgba(61,53,48,0.06) !important; } .apex-item-text:focus, input[type=“text”]:focus, select:focus, textarea:focus { border-color: var(–rw-red) !important; box-shadow: 0 0 0 3px rgba(199, 70, 52, 0.15), inset 0 1px 2px rgba(61,53,48,0.06) !important; outline: none !important; } /* Redwood Labels — clean, not uppercase */ .t-Form-label, .t-Form-fieldContainer label { font-weight: 600 !important; font-size: 0.85rem !important; color: var(–rw-charcoal) !important; letter-spacing: 0 !important; margin-bottom: 5px !important; text-transform: none !important; } .t-Form-required { color: var(–rw-red) !important; } .t-Form-error { color: var(–rw-red) !important; font-size: 0.78rem !important; font-weight: 500; } .a-DatePicker-cal { border-radius: var(–radius-md) !important; box-shadow: var(–shadow-lg) !important; border: 1px solid var(–rw-pebble) !important; overflow: hidden; } /* Redwood date picker header */ .a-DatePicker-nav { background: var(–rw-plum) !important; color: #FFFFFF !important; } .a-DatePicker-selected { background: var(–rw-red) !important; color: #FFFFFF !important; border-radius: 50% !important; } /* ============================================================ 9. INTERACTIVE REPORTS & GRIDS — REDWOOD TABLE STYLE ============================================================ */ .t-IRR-region { border-radius: var(–radius-md) !important; overflow: hidden !important; box-shadow: var(–shadow-sm) !important; } .t-Report–standardReport thead th, .a-IRR-table thead th { background: var(–rw-plum) !important; color: rgba(255,255,255,0.90) !important; font-size: 0.75rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; border-bottom: none !important; padding: 12px 16px !important; } /* Sort arrow color fix */ .a-IRR-table thead th .a-IRR-sortIcon { color: rgba(255,255,255,0.7) !important; } .a-IRR-table tbody tr, .t-Report–standardReport tbody tr { transition: background var(–transition-fast) !important; border-bottom: 1px solid var(–rw-stone) !important; } .a-IRR-table tbody tr:hover, .t-Report–standardReport tbody tr:hover { background: var(–rw-red-pale) !important; } .a-IRR-table tbody tr:nth-child(even) { background: var(–rw-off-white) !important; } .a-IRR-table tbody tr:nth-child(even):hover { background: var(–rw-red-pale) !important; } .a-IRR-table tbody td, .t-Report–standardReport tbody td { padding: 11px 16px !important; font-size: 0.875rem !important; color: var(–rw-charcoal) !important; vertical-align: middle !important; } .t-IRR-controls { background: var(–rw-stone) !important; border-bottom: 1px solid var(–rw-pebble) !important; padding: 10px 16px !important; } /* ============================================================ 10. BADGES — REDWOOD STATUS INDICATORS ============================================================ */ .t-Badge { border-radius: var(–radius-sm) !important; font-weight: 600 !important; font-size: 0.7rem !important; letter-spacing: 0.04em !important; padding: 3px 9px !important; text-transform: uppercase !important; } .t-Badge–success { background: var(–rw-green-pale) !important; color: var(–rw-green) !important; border: 1px solid rgba(29,122,74,0.25) !important; } .t-Badge–warning { background: var(–rw-gold-pale) !important; color: var(–rw-gold) !important; border: 1px solid rgba(154,111,0,0.25) !important; } .t-Badge–danger { background: var(–rw-red-pale) !important; color: var(–rw-red-dark) !important; border: 1px solid rgba(199,70,52,0.25) !important; } .t-Badge–info { background: var(–rw-plum-pale) !important; color: var(–rw-plum-mid) !important; border: 1px solid rgba(92,36,117,0.25) !important; } /* ============================================================ 11. ALERTS — REDWOOD MESSAGING STYLE ============================================================ */ .t-Alert { border-radius: var(–radius-md) !important; border: 1px solid !important; font-size: 0.875rem !important; padding: 12px 16px !important; box-shadow: none !important; } .t-Alert–success { background: var(–rw-green-pale) !important; border-color: rgba(29,122,74,0.3) !important; color: #145935 !important; } .t-Alert–warning { background: var(–rw-gold-pale) !important; border-color: rgba(154,111,0,0.3) !important; color: #6D4F00 !important; } .t-Alert–danger { background: var(–rw-red-pale) !important; border-color: rgba(199,70,52,0.3) !important; color: var(–rw-red-dark) !important; } .t-Alert–info { background: var(–rw-plum-pale) !important; border-color: rgba(92,36,117,0.3) !important; color: var(–rw-plum) !important; } /* ============================================================ 12. DIALOGS & MODALS — REDWOOD PANEL STYLE ============================================================ */ .ui-dialog { border-radius: var(–radius-lg) !important; border: 1px solid var(–rw-pebble) !important; box-shadow: var(–shadow-lg) !important; overflow: hidden !important; } .ui-dialog .ui-dialog-titlebar { background: linear-gradient(180deg, var(–rw-plum) 0%, var(–rw-navy) 100%) !important; color: #FFFFFF !important; font-weight: 600 !important; font-size: 1rem !important; padding: 14px 20px !important; border-bottom: 3px solid var(–rw-red) !important; } .ui-dialog .ui-dialog-content { padding: 24px !important; background: var(–rw-white) !important; color: var(–rw-charcoal) !important; } .ui-widget-overlay { background: rgba(26, 18, 16, 0.55) !important; backdrop-filter: blur(3px) !important; } /* Modal close button */ .ui-dialog .ui-dialog-titlebar-close { color: rgba(255,255,255,0.75) !important; transition: color var(–transition-fast) !important; } .ui-dialog .ui-dialog-titlebar-close:hover { color: #FFFFFF !important; } /* ============================================================ 13. LOADING & PROGRESS — REDWOOD STYLE ============================================================ */ .u-Processing, .apex-page-spinner { border-color: var(–rw-pebble) !important; border-top-color: var(–rw-red) !important; } .t-ProgressBar-bar { background: linear-gradient(90deg, var(–rw-red), var(–rw-copper)) !important; border-radius: var(–radius-pill) !important; box-shadow: 0 2px 6px rgba(199, 70, 52, 0.30) !important; } @keyframes shimmer-rw { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ 14. BREADCRUMBS & PAGE HEADINGS — REDWOOD TYPOGRAPHY ============================================================ */ /* Redwood page titles use serif for editorial gravitas */ .t-BreadcrumbRegion-title, .t-HeroRegion-title { font-size: 1.6rem !important; font-weight: 700 !important; font-family: var(–font-heading) !important; color: var(–rw-ink) !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; } .t-Breadcrumb-item { font-size: 0.8rem !important; font-weight: 400 !important; color: var(–rw-clay) !important; } .t-Breadcrumb-item.is-active { color: var(–rw-red) !important; font-weight: 600 !important; } .t-Breadcrumb-item a { color: var(–rw-navy-light) !important; transition: color var(–transition-fast) !important; } .t-Breadcrumb-item a:hover { color: var(–rw-red) !important; } /* Redwood section headings within content */ h1, h2, h3 { font-family: var(–font-heading) !important; color: var(–rw-ink) !important; } h4, h5, h6, label, th { font-family: var(–font-primary) !important; } /* ============================================================ 15. REDWOOD HERO BANNER (optional — for Home page) Apply class “rw-hero” to a Static Content region ============================================================ */ .rw-hero { background: linear-gradient(135deg, var(–rw-plum) 0%, var(–rw-navy) 60%, #0D1F3C 100%) !important; border-radius: var(–radius-lg) !important; padding: 48px 40px !important; color: #FFFFFF !important; position: relative; overflow: hidden; margin-bottom: 24px; } .rw-hero::before { content: ‘’; position: absolute; top: -40%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(199,70,52,0.3) 0%, transparent 70%); pointer-events: none; } .rw-hero::after { content: ‘’; position: absolute; bottom: -30%; left: 20%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(92,36,117,0.4) 0%, transparent 70%); pointer-events: none; } /* ============================================================ 16. LINKS — REDWOOD STYLE ============================================================ */ a:not(.t-Button):not(.t-TreeNav a):not(.t-NavigationBar-item a) { color: var(–rw-navy-light) !important; text-decoration: none; border-bottom: 1px solid rgba(74, 111, 165, 0.3); transition: color var(–transition-fast), border-color var(–transition-fast) !important; } a:not(.t-Button):not(.t-TreeNav a):not(.t-NavigationBar-item a):hover { color: var(–rw-red) !important; border-bottom-color: rgba(199, 70, 52, 0.4); } /* ============================================================ 17. CUSTOM SCROLLBARS — REDWOOD WARM TONES ============================================================ */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: var(–rw-stone); border-radius: var(–radius-pill); } ::-webkit-scrollbar-thumb { background: var(–rw-clay); border-radius: var(–radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(–rw-red-light); } /* ============================================================ 18. RESPONSIVE TWEAKS ============================================================ */ @media (max-width: 768px) { .t-Region { border-radius: var(–radius-sm) !important; margin-bottom: 12px; } .t-Button–hot, .t-Button { width: 100% !important; justify-content: center !important; } #t_Body_content { padding: 12px !important; } .t-BreadcrumbRegion-title { font-size: 1.25rem !important; } .rw-hero { padding: 28px 20px !important; } }