/* ===================================================================== Safeway Tourism — "Desert Luxe" site-wide colour theme Loaded last in so it overrides style.css / my.css. Recolours the whole site by (a) redefining the theme CSS variables and (b) targeted overrides for hard-coded magenta / cyan values. Added 2026-09-07. ===================================================================== */ :root { /* the two tokens the whole legacy stylesheet is built on */ --main-theme-color: #A97722; /* antique gold (was #19bdff cyan) */ --btn-color: #A97722; --theme-secondary-color: #5A4632; /* warm brown (was #6a6a6a grey) */ /* new named tokens for the redesigned pages */ --sw-gold: #C8942E; --sw-gold-deep: #A97722; --sw-gold-soft: #E7C489; --sw-espresso: #241A14; --sw-ink: #2A211A; --sw-sand: #FBF7F1; --sw-sand-2: #F3EBDE; --sw-night: #14100D; --sw-line: #E7DCC9; } /* ---------- top bar (hard-coded magenta #b51c5a in header markup) ---------- */ .top-social, .top-social .row > .row { background-color: #fff !important; } .topbarstyle p, .top-social p, .top-social a p, .top-social .fa-envelope, .top-social .fa-whatsapp, .top-social .flaticon-customer-service { color: #2E2115 !important; } .top-social a:hover p { color: var(--sw-gold-deep) !important; } .top-social > li > a > .fa-envelope { color: var(--sw-gold-deep) !important; } .number { color: var(--sw-gold-deep) !important; } /* ---------- primary navigation bar → deep espresso ---------- */ .main-navigation, .main-navigation > .row, .main-navigation .row[style] { background-color: var(--sw-espresso) !important; background-image: none !important; } .main-navigation { border-bottom: 3px solid var(--sw-gold); box-shadow: 0 6px 22px rgba(0,0,0,.12); } .main-nav > li > a { color: #F1E7D6 !important; letter-spacing: .3px; transition: color .2s ease, background-color .2s ease; } .main-nav > li > a > i { color: var(--sw-gold-soft); } .main-nav > li:hover > a, .main-nav > li > a:hover, .main-nav > li.active > a { color: var(--sw-espresso) !important; background-color: var(--sw-gold) !important; } /* mobile nav (legacy forced this grey) */ @media (max-width: 767px) { .main-navigation, .main-navigation > .row { background-color: var(--sw-espresso) !important; } .main-navigation .right-side-menu-len > li > a { color: #F1E7D6 !important; } } /* ---------- mega menu (inline