/** * Global header — "Executive Prestige" pixel match (site-wide). * * Background/border/nav-menu colors are pulled from the site's own * Elementor Global Colors via the `--e-global-color-*` custom * properties Elementor itself emits on * (verified present site-wide) — so this file never hardcodes a hex * that could drift from Settings if the client changes the brand * palette later. Real nav menu items/labels/URLs are unchanged; only * the visual treatment matches the Claude Design concept 1c mockup. */ .rb-header-1c__brand { display: flex; align-items: center; } .rb-header-1c__logo img { border-radius: 50%; } .rb-header-1c__word { display: block; font-family: var(--rb-font-display); font-size: 20px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; color: var(--e-global-color-rb_ivory); } .rb-header-1c__sub { display: block; font-family: var(--rb-font-body); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--e-global-color-accent); margin-top: 3px; } /* The mockup's nav (34px gap, .22em letter-spacing) was sized for short one-word labels ("TRANSACTIONS", "PRINCIPALS"...). This site's real menu keeps its real items — including the longer "Restaurants for Sale" — so at that spacing the row overflowed its 1200px boxed container and wrapped into 3 lines at normal desktop width. Values below are tightened to the loosest spacing that still reads as the same letter-spaced-caps language while reliably fitting on one line (verified against the real live menu, not just the mockup's shorter placeholder labels). */ .rb-header-1c .elementor-nav-menu { gap: 20px; flex-wrap: nowrap; } /* !important on color/font-family only: Elementor's own generated CSS for this template sets `.elementor-nav-menu--main .elementor-item` (3 class-level selectors) which outranks this rule's specificity, and without an override the item text stays dark-on-dark (illegible) against the new background — confirmed via generated post-102.css, not guessed. Menu items are the "navigation" half of the sitewide heading/menu typography token (--rb-font-display = Raleway). */ .rb-header-1c .elementor-item { font-family: var(--rb-font-display) !important; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: rgba(245, 241, 234, .75) !important; /* Ivory (#F5F1EA) at reduced opacity — CSS custom properties can't carry an opacity modifier directly, so this literal mirrors --rb-ivory */ } .rb-header-1c .elementor-item:hover, .rb-header-1c .elementor-item-active { color: var(--e-global-color-accent) !important; } /* !important on background/color/font-family/font-size/letter-spacing only: Elementor's own button widget CSS sets these at equal specificity but loads after this stylesheet, so it wins ties by source order — confirmed via generated post-102.css. `color` joined this list in Phase 26.0: matched-rule inspection showed the Kit's own Theme Style button color (`.elementor-kit-6 .elementor-button`, white, (0,2,0) — same specificity as this rule) was winning the tie and showing white instead of the intended Ivory text. Body/UI text follows the sitewide body typography token (--rb-font-body = Futura stack). */ .rb-header-1c .elementor-button { background: transparent !important; border: 1px solid var(--e-global-color-accent); border-radius: 2px; color: var(--e-global-color-rb_ivory) !important; padding: 10px 18px; font-family: var(--rb-font-body) !important; font-size: 11px !important; font-weight: 400; letter-spacing: .05em !important; text-transform: uppercase; white-space: nowrap; } .rb-header-1c .elementor-button:hover { background: var(--e-global-color-accent) !important; color: var(--e-global-color-secondary); } /* Burger toggle icon (mobile/tablet) — match the muted-cream nav color. */ .rb-header-1c .elementor-menu-toggle { color: rgba(245, 241, 234, .85); /* Ivory (#F5F1EA) — see .elementor-item above for why this is a literal, not var() */ } .rb-header-1c .elementor-nav-menu--dropdown { background: var(--e-global-color-secondary); border-top: 1px solid rgba(180, 154, 99, .28); /* Muted Gold (#B49A63) at reduced opacity */ } /* Below the nav's own burger breakpoint, only the brand block + burger icon + CTA button compete for width — the wordmark's nowrap (needed above to keep it off two lines at desktop width) would overflow a 375px screen otherwise, so drop the subtitle and shrink here. */ @media (max-width: 767px) { .rb-header-1c__sub { display: none; } .rb-header-1c__word { font-size: 14px; white-space: normal; } .rb-header-1c .elementor-button { padding: 8px 12px; font-size: 10px !important; } }