/**
* Light theme — site-wide, per visitor.
*
* Loaded on EVERY front-end page (inc/site-theme.php) but inert unless carries the
* class `theme-light`. That class is set in the browser, before first paint, by the inline head
* script lucid_theme_flag() — from ?theme=light|dark, a light/dark landing page, or the
* lucid_theme cookie. The decision cannot be made in PHP: WP Engine and WP Rocket serve every
* visitor the same cached HTML. See docs/light-theme.md.
*
* SCOPING RULE: every selector starts with html.theme-light, so dark visitors are unaffected.
* Colours, borders and backgrounds only — never layout or content. Never edit a shared pattern
* to make it light: dark visitors still get the pattern as-is, so override it from here.
*
* Layer 1 redefines the palette custom properties from style.css (:root, ~line 3808) on
* ; most of the theme reads those, so they carry the bulk of the change. Layer 2
* overrides the rules that hard-code a dark colour instead of using the variables. Each
* override names the rule it beats (file:line at the time of writing).
*
* Enqueued after style.css and any per-template stylesheet it overrides (landing-locations.css,
* general-page.css), so equal specificity wins on source order. RUCSS-safelisted: the class is
* added client-side, so WP Rocket would otherwise strip every rule as unused.
*/
/* =========================================================================
1. Palette
========================================================================= */
html.theme-light {
--color-bg-primary: #FFFFFF;
--color-bg-primary-rgb: 255, 255, 255;
--color-text-primary: #12120F;
--color-text-secondary: #4A4843;
/* Gold #D2AF6B is 2.1:1 on white. This bronze keeps the hue at 6.1:1 on white and 5.1:1 on
the beige #EDEAE3 panels (WCAG AA for small text). Keep #D2AF6B for fills and hovers. */
--color-text-accent: #7A5D27;
--color-text-accent-rgb: 122 93 39;
--color-text-inverse-accent: #7A5D27;
/* Card / raised surface — replaces the #1A1A16 literals below. */
--lucid-light-surface: #F7F5F0;
--lucid-light-surface-strong: #EDEAE3;
--border-color: #D8CFBE;
/* Never defined in style.css, so every rule below falls back to its dark literal. Defining
them here lifts the translucent dark card gradient (rgba(18,18,15,.5) → grey on white)
used by the blog cards, service/lander card lists, tables and the mobile menu
(style.css:14856 / 21972 / 23836 / 23870 / 25452), the hero image fade (:18708) and the
service price chip (:21695 / :23643). */
--background-gradient: var(--lucid-light-surface);
--color-bg-surface: #FFFFFF;
--color-accent-ash: var(--lucid-light-surface-strong);
color: var(--color-text-primary);
}
/* Cover blocks put text over a photo behind a dark overlay, so they keep the DARK palette:
white headings, gold accents. This reproduces exactly what dark visitors see inside a
cover (beige panels inside covers set their own dark text and are unaffected). Core marks a
cover with a LIGHT overlay .is-light — those are plain white section bands (home "What we
provide", /locations/ search) and follow the light palette like any other section. */
html.theme-light .wp-block-cover:not(.is-light) {
--color-bg-primary: #12120F;
--color-bg-primary-rgb: 18, 18, 15;
--color-text-primary: #FFFFFF;
--color-text-secondary: #EDEAE3;
--color-text-accent: #D2AF6B;
--color-text-accent-rgb: 210 175 107;
--color-text-inverse-accent: #D2AF6B;
--border-color: #C0B29480;
/* Core's cover CSS gives headings and copy `color: inherit`, so the cover itself must carry
the light text colour, not just the variables. */
color: var(--color-text-primary);
}
/* =========================================================================
2. Hard-coded dark colours
========================================================================= */
/* ---- Header & mega menu ------------------------------------------------ */
/* The logos are white PNGs set as background-image (custom-header-section.php), and the
mobile mark is white on black; inverting renders both dark on white. */
html.theme-light .img-logo {
filter: invert(1);
}
/* style.css:13542 .custom-header .mega-menu.wrap { background-color: #12120F } */
html.theme-light .custom-header .mega-menu.wrap {
background-color: var(--color-bg-primary);
}
/* style.css:5953 .custom-header .nav-primary li a { color: #F7F7F2 } — nav links, phone,
member login. Filled menu buttons (li.menu-button, e.g. Contact Us) keep light text. */
html.theme-light .custom-header .nav-primary li:not(.menu-button) > a {
color: var(--color-text-primary);
}
/* style.css:5809 / 5872 / 5876 burger bars are #F7F7F2, #fff on hover. */
html.theme-light .burger-bar,
html.theme-light .mobile-menu-button.js-menu-active .burger-bar,
html.theme-light .mobile-menu-button:hover .burger-bar {
background-color: var(--color-text-primary);
}
/* style.css:6065 mobile sub-menu chevron when open. */
html.theme-light .sub-menu-toggle.activated::before {
color: var(--color-text-primary);
}
/* style.css:14499 .sub-menu .badge { color: #ffffff } — sits on a gold gradient; keep it
readable there rather than inverting. */
html.theme-light .sub-menu .badge {
color: #FFFFFF;
}
/* style.css:14715 (max-width: 880px) mobile menu group headings (Locations, Solutions,
Company) are #D2AF6B !important — too faint on white. */
@media only screen and (max-width: 880px) {
html.theme-light .menu-primary > .menu-item > a {
color: var(--color-text-accent) !important;
}
/* style.css:14736 every mobile sub-menu link takes --color-text-primary, now near-black,
which includes the filled Contact Us button at the foot of the menu (.docked-bottom) on
its brown fill. Outline buttons (Member Login) keep the dark label. */
html.theme-light .menu-primary .docked-bottom li.menu-button:not(.outline) > a {
color: #FFFFFF;
}
}
/* ---- Hero -------------------------------------------------------------- */
/* style.css:22751 .location-hero { color: #ffffff } */
html.theme-light .location-hero {
color: var(--color-text-primary);
}
/* style.css:18703 photo heroes (custom-blocks/cover-slider.php, cover-video.php, e.g. home) fade
their lower half to var(--color-bg-surface, #12120F). Dark falls back to #12120F, which also
darkens the photo behind the white heading; Layer 1 makes that variable white here, which washed
it out instead. Keep the fade to white at the bottom, so the hero still meets the white page,
but put a light dark tint behind the heading (top third of the fade) that clears again before
the region selector. */
html.theme-light .hero-mask::after {
background: linear-gradient(180deg,
rgba(18, 18, 15, 0) 0%,
rgba(18, 18, 15, 0.40) 28%,
rgba(18, 18, 15, 0) 60%,
#FFFFFF 100%);
}
/* The heading keeps its white; a soft glow carries it where the photo is brightest (phones start
the heading at the very top of the fade, above the tint). */
html.theme-light .wp-block-cover:has(.hero-mask) h1 {
text-shadow: 0 1px 3px rgba(18, 18, 15, 0.45), 0 2px 32px rgba(18, 18, 15, 0.55);
}
/* ---- Buttons ----------------------------------------------------------- */
/* style.css:7199 gives every button #F7F7F2 text. Filled buttons keep it (white on brown);
outline buttons paint their inside with --color-bg-primary (style.css:7500), now white, so
their label goes dark. */
html.theme-light .btn.outline:not(.dropdown-toggle),
html.theme-light .pseudo-button.outline,
html.theme-light .wp-block-button.is-style-outline a,
html.theme-light li.menu-button.outline > a {
color: var(--color-text-primary);
}
/* Hover: white label. style.css:7484 / 7606 empty the button on hover (transparent background,
::before faded out, 1px inset border), which on white would leave white text invisible, so
fill it with the solid button brown as well. The !important matches the rule it beats.
Outline buttons inside .has-background panels keep their own animated hover
(style.css:7614), hence :not(.has-background *). */
html.theme-light .btn.outline:not(.dropdown-toggle):not(.gradient):not(.has-background *):hover,
html.theme-light .pseudo-button.outline:not(.gradient):not(.has-background *):hover,
html.theme-light .wp-block-button.is-style-outline:not(.gradient):not(.has-background *) a:hover,
html.theme-light li.menu-button.outline:not(.gradient) > a:hover {
background: var(--btn-fill-primary) !important;
color: #FFFFFF;
}
/* The faint --gradient-light wash inside the label (style.css:7532) would tint the fill. */
html.theme-light .btn.outline:not(.dropdown-toggle):not(.gradient):not(.has-background *):hover span::before,
html.theme-light .pseudo-button.outline:not(.gradient):not(.has-background *):hover span::before,
html.theme-light .wp-block-button.is-style-outline:not(.gradient):not(.has-background *) a:hover span::before,
html.theme-light li.menu-button.outline:not(.gradient) > a:hover span::before {
opacity: 0;
}
/* ---- Section fades ----------------------------------------------------- */
/* style.css:6372 / 6394 the
separators paint a 690px dark band
(rgba(18,18,15,.5)) above the rule and over the following section. On white that reads as
a grey slab; tint it warm and faint instead. The band is strongest at the rule and fades
to nothing at its far edge; the "reverse" copy is rotated 180deg by style.css, so one
gradient serves both sides. */
html.theme-light .wp-block-separator.fade::before,
html.theme-light .wp-block-separator.fade.reverse + *::before {
background: linear-gradient(180deg, rgba(237, 234, 227, 0) 0%, rgba(237, 234, 227, 0.6) 100%);
}
/* ---- Locations list + map (css/landing-locations.css) ------------------ */
/* landing-locations.css:113 li.ll-card { background: #1A1A16 } */
html.theme-light .entry-content ul.ll-list li.ll-card {
background: var(--lucid-light-surface);
}
/* landing-locations.css:232 .ll-badge { background: #2F2E2C; color: #F7F7F2 } */
html.theme-light .ll-badge {
background: var(--lucid-light-surface-strong);
color: var(--color-text-primary);
}
/* style.css:18197 map zoom buttons use --color-bg-primary, but their icons are white SVGs;
keep the buttons dark so the icons stay visible over the (already light) map. */
html.theme-light .mapboxgl-control-container .mapboxgl-ctrl button {
background: #12120F;
}
/* style.css:17550 (max-width: 770px) listing-card buttons (Book a Tour, Book Now) drop their
fill and become arrow text links, but keep the filled button's #F7F7F2 label from
style.css:7198: near-white on the white card. The gold :hover at style.css:17578 is more
specific and still applies. */
@media only screen and (max-width: 770px) {
html.theme-light .ajax-listings .listing-entry a.btn {
color: var(--color-text-primary);
}
}
/* ---- Workspace cards / additional services ----------------------------- */
/* style.css:25127 .lw-card { background: #1A1A16 } */
html.theme-light .lw-card {
background: var(--lucid-light-surface);
}
/* style.css:21963 .owl-carousel.card-list .wp-block-column — dark translucent gradient. */
html.theme-light .owl-carousel.card-list .wp-block-column {
background: var(--lucid-light-surface);
}
/* style.css:11268 image placeholder behind the service card photos: #1e1e1e */
html.theme-light .wp-block-columns.owl-carousel .wp-block-image:first-child {
background-color: var(--lucid-light-surface-strong);
}
/* ---- FAQ -------------------------------------------------------------- */
/* style.css:21275 .faq-toggle .icon-wrap { background: #191917 } */
html.theme-light .faq-list .faq-item .faq-toggle .icon-wrap {
background: var(--lucid-light-surface-strong);
}
/* ---- Comparison tables (core table block, e.g. /virtual-offices/) ------- */
/* style.css:23880 thead is a translucent rgba(18,18,15,.5) gradient, which on white reads as
muddy grey under gold text. Paint a solid beige panel on the cells rather than the :
the collapsed cell borders are transparent, and with the fill on they let the white
page show through as hairlines between the columns. */
html.theme-light .wp-block-table thead {
background: var(--lucid-light-surface-strong);
/* The header rule. Drawn here, not as the cells' shared collapsed border: is sticky,
so it paints as its own layer and Chrome drew that border paler under the first column. */
box-shadow: inset 0 -1px 0 rgba(136, 114, 68, 0.45);
}
html.theme-light .wp-block-table thead th {
background: var(--lucid-light-surface-strong);
/* style.css:23931 transparent sides still show as pale hairlines; match the fill instead. */
border-left-color: var(--lucid-light-surface-strong);
border-right-color: var(--lucid-light-surface-strong);
border-bottom-color: transparent;
}
/* The first body row's top edge is the same collapsed border; clear it so only the rule on
shows. */
html.theme-light .wp-block-table tbody tr:first-child td {
border-top-color: transparent;
}
/* style.css:23913 gold #7A5D27 at 3px tracking. Column names are the one thing a reader must
pick out at a glance, so near-black and tighter tracking; the gold stays in the rule below. */
html.theme-light .wp-block-table thead * {
color: var(--color-text-primary);
}
/* Above phone widths only: style.css's max-width 600px rule drops it to 1px there. */
@media (min-width: 601px) {
html.theme-light .wp-block-table thead * {
letter-spacing: 2px;
}
}
/* style.css:23907 sticky header is rgba(bg-primary, .9) over the dark gradient. Keep the beige
panel when it docks, slightly translucent so the blur still reads. */
html.theme-light .wp-block-table thead.is-sticky,
html.theme-light .wp-block-table thead.is-sticky th {
background: rgba(237, 234, 227, 0.94);
}
/* ---- Footer ------------------------------------------------------------ */
/* The footer logo (text widget ![]()
) and the social icons (SVGs wrapping base64 PNGs) are
white rasters; same inversion as the header logo. :not(:hover) leaves the gold hover
filter at style.css:15102 in charge. */
html.theme-light .site-footer .textwidget img[src*="logo"],
html.theme-light .site-footer .social-media-links a:not(:hover) svg {
filter: invert(1);
}
/* style.css:15296 the docked mobile CTA (Call Us / Schedule Tour) takes --color-text-primary,
now near-black, but sits on the brown gradient at style.css:15292 in both themes. The icons
use currentColor, so they follow. */
html.theme-light .docked-cta a {
color: #FFFFFF;
}
/* ---- Contact form (pattern 5245) --------------------------------------- */
/* style.css:4327 body:not(.templated) input[type=submit] { background-color: #333; color: #fff }
Already sits on the beige form panel; kept dark, just on-brand. */
html.theme-light body:not(.templated) .wpcf7 input[type="submit"] {
background-color: #12120F;
color: #FFFFFF;
}
/* =========================================================================
3. Site-wide (every template beyond the landers)
========================================================================= */
/* ---- Breadcrumbs ------------------------------------------------------- */
/* style.css:11834 / 11846 / 11852 #EDEAE3 crumbs, #fff !important current crumb. Inside a
cover (photo heroes) they stay light. */
html.theme-light .breadcrumbs:not(.wp-block-cover *) *,
html.theme-light .breadcrumbs:not(.wp-block-cover *) a,
html.theme-light .breadcrumbs:not(.wp-block-cover *) .flex > span {
color: var(--color-text-secondary);
}
html.theme-light .breadcrumbs:not(.wp-block-cover *) .flex > span *:last-child {
color: var(--color-text-primary) !important;
}
/* The separator arrows are inline SVGs with stroke="white"; a CSS stroke beats the attribute. */
html.theme-light .breadcrumbs:not(.wp-block-cover *) svg path {
stroke: var(--color-text-secondary);
}
/* ---- Region / state / location heroes ---------------------------------- */
/* style.css:22907 / 22924 "View Locations" text link: var(--color-text-reverse, #fff). */
html.theme-light .location-hero .hero-actions .hero-text-link:not(.wp-block-cover *) {
color: var(--color-text-primary);
}
/* ---- Location page section nav (sticky Overview / Amenities / …) -------- */
/* style.css:23255 / 23271 rgba(255,255,255,.5) items, #fff active. */
html.theme-light .page-nav .nav-item {
color: rgba(18, 18, 15, 0.55);
}
html.theme-light .page-nav .nav-item:hover,
html.theme-light .page-nav .nav-item.is-active {
color: var(--color-text-primary);
}
/* style.css:23378 the mobile dropdown's chevron is an SVG filled #FFFFFF, invisible on white.
Same path, filled #12120F like the base caret at style.css:8321. */
html.theme-light .page-nav .nav-mobile-select .caret::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='8' viewBox='0 0 15 8' fill='none'%3E%3Cpath d='M13.616 0.228605C13.9326 -0.0762017 14.4459 -0.0762017 14.7626 0.228605C15.0791 0.53342 15.0792 1.02751 14.7626 1.3323L8.07331 7.77159C7.77647 8.05726 7.30693 8.0749 6.98852 7.8249L6.92674 7.77159L0.23748 1.3323C-0.0791601 1.02749 -0.0791601 0.53342 0.23748 0.228605C0.554129 -0.0762017 1.06738 -0.0762017 1.38403 0.228605L7.49998 6.11604L13.616 0.228605Z' fill='%2312120F'/%3E%3C/svg%3E");
}
/* ---- Location promo box (blocks/promo-box.php, "Opening …" card) ------- */
/* style.css:23998 rgba(23,23,19) card inside the gold .pseudo-border ring. Its text already
follows the palette, so only the fill needs lifting: the beige panel keeps it a card on white. */
html.theme-light .pseudo-border > * {
background: var(--lucid-light-surface-strong);
}
/* ---- Location finder (home, services: .featured-regions) --------------- */
/* style.css:19330 panel and :19592 / :19596 mobile rows use the dark card gradient literally. */
html.theme-light body:not(.tax-region) .featured-regions {
background: var(--lucid-light-surface);
}
/* Mobile only, like the rules they beat: at desktop the is a bare inner box, and a fill
there paints a solid stripe across the selected row's gradient. */
@media (max-width: 880px) {
html.theme-light .region-radio-btn a {
background: var(--lucid-light-surface);
}
html.theme-light .region-radio-btn a:hover {
background: var(--lucid-light-surface-strong);
}
}
/* style.css:19453 the selected row's --gradient-half starts at --color-bg-primary (white), but
this panel is --lucid-light-surface, so its left end read as a white block. Start from the
panel colour at zero opacity so it fades out of the panel instead. */
html.theme-light .featured-regions .region-radio-btn::after {
background: linear-gradient(90deg, rgba(247, 245, 240, 0) 0%, #88724480 100%);
}
/* style.css:19414 the selected region is rgba(255,255,255,.95) with an engraved shadow; it
sits on --gradient-half, which now runs white → tan. */
html.theme-light .region-radio-btn.checked h3 {
color: var(--color-text-primary);
text-shadow: none;
}
/* ---- Amenity tiles (icon-list) ----------------------------------------- */
/* style.css:20982 / 23877 a variant of the dark card gradient, literal. */
html.theme-light .icon-list .card-entry .icon-item {
background: var(--lucid-light-surface);
}
/* style.css:21059 location-page amenity carousels ("Features specific to this location") have
no card chrome in dark. The fill above outranks that rule, so take it off again here. */
html.theme-light #amenities .icon-list.owl-carousel .icon-item,
html.theme-light .single-location .icon-list.owl-carousel .icon-item {
background: none;
}
/* style.css:21161 the subheading variant (custom-blocks/icon-list-with-subheading.php, e.g. the
landers' "Why choose Lucid?") has no card fill in dark; the fill above outranked that. */
html.theme-light .icon-list.w-subheading .card-entry .icon-item {
background: none;
}
/* style.css:26085 the /austin-part-time-offices/ benefit photo cards copy the .icon-item card
gradient literally (rgba(18,18,15,.5)), which reads as a grey band under each photo on white.
Same fill as the amenity tiles above. */
html.theme-light .pto-austin-template .pto-benefits > .wp-block-column {
background: var(--lucid-light-surface);
}
/* ---- Image placeholders ------------------------------------------------ */
/* #1e1e1e boxes behind lazy images: style.css:11268 (.listing-img), :16006
(.tc-image-wrapper), :19695 (testimonial), :23749 (staff avatar), :23845 (blog card). */
html.theme-light .listing-entry .listing-img,
html.theme-light .tc-image-wrapper,
html.theme-light .testimonial-block .testimonial-image-frame,
html.theme-light .staff-avatar-wrapper,
html.theme-light .archive .grid > .flex .aspect-video,
html.theme-light .blog .grid > .flex .aspect-video {
background-color: var(--lucid-light-surface-strong);
}
/* ---- Badges, chips ------------------------------------------------------ */
/* style.css:16848 "Opening Soon" on location listings: #2F2E2C. Same treatment as .ll-badge. */
html.theme-light .listing-entry .location-details .badge {
background: var(--lucid-light-surface-strong);
color: var(--color-text-primary);
}
/* The price chip's background comes from --color-accent-ash (Layer 1); its text was white. */
html.theme-light .single-service .service-card-block .price {
color: var(--color-text-primary);
}
/* ---- Client logo strip ------------------------------------------------- */
/* style.css:10581 #2B2926 tiles; style.css:15756 turns the (colour) logos white with
brightness(0) invert(1). Light tile, black silhouettes; hover shows the logo's own colours
instead of style.css:15765's white-out. */
html.theme-light .logo-list > div {
background: var(--lucid-light-surface-strong);
}
html.theme-light .logo-list > div img {
filter: brightness(0);
}
html.theme-light .logo-list > div:hover img {
filter: none;
}
/* ---- Tabbed cards (home "What we provide", service pages) ------------- */
/* style.css:15849 .tabbed-cards-section { color: #ffffff } — card copy inherits it. */
html.theme-light .tabbed-cards-section {
color: var(--color-text-primary);
}
/* ---- Mobile off-canvas nav --------------------------------------------- */
/* style.css:6119 (max-width media) #genesis-nav-primary is #000 behind the (white) menu. */
html.theme-light #genesis-nav-primary.nav-primary {
background-color: var(--color-bg-primary);
}
/* ---- Testimonials ------------------------------------------------------ */
/* style.css:19743 author name #EDEAE3. */
html.theme-light .testimonial-block .testimonial-name {
color: var(--color-text-secondary);
}
/* ---- General page (/general-page/, css/general-page.css) -------------- */
/* The page runs on its own --gp-* tokens (general-page.css:30); flip them. */
html.theme-light .gp-page {
--gp-dark: #FFFFFF;
--gp-dark-lift: var(--lucid-light-surface);
--gp-offwhite: #12120F;
--gp-gold: #7A5D27;
--gp-rule: rgba(18, 18, 15, 0.14);
--gp-muted: rgba(18, 18, 15, 0.78);
--gp-faint: rgba(18, 18, 15, 0.62);
}
/* general-page.css:50 headings are a literal #fff. */
html.theme-light .gp-page h1,
html.theme-light .gp-page h2,
html.theme-light .gp-page h3,
html.theme-light .gp-page h4,
html.theme-light .gp-page blockquote {
color: var(--gp-offwhite);
}
/* The hero is copy over a photo behind dark scrims (general-page.css:101): keep it dark. */
html.theme-light .gp-page .gp-hero {
--gp-offwhite: #F7F7F2;
--gp-gold: #D2AF6B;
--gp-muted: rgba(247, 247, 242, 0.72);
--gp-faint: rgba(247, 247, 242, 0.52);
--gp-rule: rgba(247, 247, 242, 0.14);
--color-bg-primary: #12120F;
--color-text-primary: #FFFFFF;
color: var(--gp-offwhite);
}
/* general-page.css:499 the closing CTA card is off-white with dark literal text; its
background reads --gp-offwhite, which is now the dark text colour. */
html.theme-light .gp-page .gp-cta__card {
background: #F7F7F2;
box-shadow: 0 18px 44px rgba(18, 18, 15, 0.12);
}
html.theme-light .gp-page .gp-cta__card h2,
html.theme-light .gp-page .gp-cta__phone a:hover {
color: #12120F;
}
/* general-page.css:350 step numerals sit on a dark photo scrim: keep them gold. */
html.theme-light .gp-page .gp-step__num {
color: #D2AF6B;
}
/* ---- 404 (404.php) ----------------------------------------------------- */
/* Tailwind utilities hard-coded in the template: .bg-black panel (style.css:1754), .text-white
heading and copy (:2390). The white "Go Home" pill would vanish on the light panel, so it
goes dark. */
html.theme-light body.error404 .bg-black {
background-color: var(--lucid-light-surface);
}
html.theme-light body.error404 .bg-black .text-white {
color: var(--color-text-primary);
}
html.theme-light body.error404 .bg-black a.bg-white {
background-color: #12120F;
color: #FFFFFF;
}