/* ============================================================ LUXE THEME (lighter blue + bone) - shared across luxe pages Applied to . Per-page layout lives in about-page.css / home-page.css / projects-page.css / services-page.css. ============================================================ */ :root { --luxe-bg: #1e3d50; --luxe-bg-2: #173140; --luxe-panel: #284c61; --luxe-line: rgba(236, 230, 214, 0.10); --luxe-line-strong: rgba(236, 230, 214, 0.18); --luxe-text: rgba(236, 230, 214, 0.92); --luxe-dim: rgba(236, 230, 214, 0.60); --luxe-dimmer: rgba(236, 230, 214, 0.40); --bone: #ece6d6; --accent: #F26522; --accent-bright: #ff8a3d; --ease: 250ms cubic-bezier(0.4, 0, 0.2, 1); } body.luxe { background-color: var(--luxe-bg); color: var(--luxe-text); } /* Shared nav, harmonised for the luxe pages (it is already dark-blue). NOTE: no backdrop-filter here — the nav contains the fixed .nav__overlay, and a backdrop-filter would make .nav a containing block for it, trapping the mobile menu inside the nav bar instead of covering the viewport. */ body.luxe .nav--scrolled { background-color: rgba(23, 49, 64, 0.96); border-bottom: 1px solid var(--luxe-line); } body.luxe .nav__link { color: var(--luxe-dim); } body.luxe .nav__link:hover { color: var(--bone); } body.luxe .nav__link--active { color: var(--accent-bright); } body.luxe .nav__overlay { background-color: var(--luxe-bg); } /* Shared footer, recoloured to the deepest luxe blue so it reads as one piece. */ body.luxe .footer { background-color: var(--luxe-bg-2); } body.luxe .final-cta { background-color: var(--luxe-bg-2); } /* Form inputs already use light text on dark; nudge to bone for cohesion. */ body.luxe .form-input, body.luxe .form-select { color: var(--bone); border-bottom-color: rgba(236, 230, 214, 0.3); } body.luxe .form-input::placeholder { color: rgba(236, 230, 214, 0.5); } body.luxe .form-input:focus, body.luxe .form-select:focus { border-bottom-color: var(--bone); }