/* Shared color tokens for every page's custom sections, one definition instead of each section re-declaring its own --navy/--cyan/etc. */ :root { --navy: #193866; --navy-light: #254a81; --navy-dark: #0f2544; --cyan: #1EB4E6; --cyan-light: #68ddff; --ink: #16202e; --body: #4b5563; --muted: #6b7280; --line: #e3e8ef; --mist: #f6f8fb; --white: #ffffff; --shadow: 0 18px 40px rgba(15, 37, 68, 0.09); } /* Site-wide type system: Sora for display/headings, Inter for body. Each page loads both from Google Fonts via a in its own (faster than an @import here, which the browser can't discover until this stylesheet itself has been fetched and parsed). Individual pages used to pick their own fonts (Lora, Nunito, Baloo 2, Playfair, Quicksand, Space Grotesk...) with no shared source of truth, so header/footer/body drifted from section to section, these rules are the shared anchor that keeps them consistent. */ body, p, span, a, li, input, textarea, select, button { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Sora', 'Inter', sans-serif; } /* Odoo's default theme ("Color 1" #38383B charcoal nav, "Color 5" #202022 footer, black .btn-primary/.btn-outline-primary) is grayscale, replace with LJ Web Management's navy/cyan so header, footer, and every default button read as on-brand instead of black-and-white. */ header .navbar.o_cc { background-color: #FFFFFF !important; box-shadow: 0 2px 14px rgba(25, 56, 102, 0.12); } header .navbar.o_cc .nav-link { color: #193866 !important; } header .navbar.o_cc .nav-link:hover, header .navbar.o_cc .nav-link.active { color: #1EB4E6 !important; } header .navbar.o_cc .o_nav-link_secondary { color: #6b7280 !important; } header .navbar.o_cc .btn_cta { background-color: #193866 !important; border-color: #193866 !important; color: #FFFFFF !important; } header .navbar.o_cc .btn_cta:hover { background-color: #122a4d !important; border-color: #122a4d !important; } header .navbar.o_cc .navbar-toggler-icon { filter: invert(1); } /* The mobile offcanvas menu is a separate panel from the nav bar itself (Bootstrap portals it out), so the white-header override above never reached it, it was still on Odoo's old dark charcoal theme, with the new navy link text from that override barely visible against it. */ .offcanvas.o_navbar_mobile { background-color: #FFFFFF !important; } .offcanvas.o_navbar_mobile .nav-link { color: #193866 !important; } .offcanvas.o_navbar_mobile .nav-link:hover, .offcanvas.o_navbar_mobile .nav-link.active { color: #1EB4E6 !important; } .offcanvas.o_navbar_mobile .o_nav-link_secondary { color: #6b7280 !important; } .offcanvas.o_navbar_mobile .btn-close { filter: none; } .o_footer { background-color: #193866 !important; } .btn-primary:not(.btn_cta), .btn-fill-primary:not(.btn_cta) { background-color: #193866 !important; border-color: #193866 !important; color: #FFFFFF !important; } .btn-primary:not(.btn_cta):hover, .btn-fill-primary:not(.btn_cta):hover { background-color: #122a4d !important; border-color: #122a4d !important; } .btn-outline-primary { color: #193866 !important; border-color: #193866 !important; } .btn-outline-primary:hover { background-color: #193866 !important; color: #FFFFFF !important; } /* Nav/footer logo is a stacked icon+wordmark lockup, the default 40px Odoo nav-logo height makes the wordmark illegible, so give it more room */ header .navbar-brand.logo img { height: 3.75rem; max-height: 3.75rem; } /* On phone widths the mobile nav pill's own px-3 padding reads as too tight against the logo specifically (a full logo mark wants more breathing room than plain nav text does) */ @media (max-width: 991.98px) { header .o_header_mobile .navbar-brand.logo { margin-left: 0.5rem; } } /* Modern Contact Us button: pill shape (added via class) plus a bit more presence than Bootstrap's default btn padding/weight */ header .navbar.o_cc .btn_cta, .offcanvas.o_navbar_mobile .btn_cta { font-weight: 600; padding: 0.55rem 1.4rem; letter-spacing: 0.01em; } .o_footer_logo img { max-height: 4.5rem; } /* Global button hover: subtle blue glow (added across the site) */ .btn:hover { box-shadow: 0 0 0 4px rgba(30, 180, 230, 0.22), 0 10px 26px rgba(30, 180, 230, 0.28); transform: translateY(-2px); transition: box-shadow 0.25s ease, transform 0.2s ease; }