/* ========================================================================== TAMSI — site chrome support The header and footer are Xpro Theme Builder templates (posts 243 / 526) built from Xpro and Elementor widgets. Everything expressible as an Elementor control lives there, not here. This sheet carries only the three things those controls cannot say: 1. The header is fixed and transparent over the hero from first paint. Xpro's sticky only goes fixed *after* 220px of scroll. 2. On the paper ground Xpro paints at that threshold (.xtb-appear, set through the container's own Header Sticky control), the chrome has to flip from ivory to ink. Xpro's sticky controls reach the container's background, never its descendants' colours. 3. Legibility over photography before that flip. Specificity note: carries .elementor-kit-17, and the generated kit CSS ships `.elementor-kit-17 a{color:#11271a}` at 0,0,1,1 *before* this file. Single-class rules here would lose, so contested selectors are scoped through .xpro-theme-builder-header / .tamsi-footer. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · Fixed, transparent header -------------------------------------------------------------------------- */ .xpro-theme-builder-header { position: relative; z-index: 60; } .xpro-theme-builder-header .xpro-theme-builder-header-nav { position: fixed; inset: 0 0 auto 0; width: 100%; z-index: 60; transition: background-color 0.45s var(--tamsi-ease-out), border-color 0.45s var(--tamsi-ease-out); } .admin-bar .xpro-theme-builder-header .xpro-theme-builder-header-nav { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .xpro-theme-builder-header .xpro-theme-builder-header-nav { top: 46px; } } /* Xpro's JS pads the wrapper to the nav's height once sticky, to backfill the gap a header leaving the flow would open. Ours never was in the flow. */ .xpro-theme-builder-header.xtb-header-sticky { min-height: 0 !important; } /* Xpro replays a slide-down entrance and adds its own shadow when .xtb-appear lands. The header has been on screen the whole time — suppress both. */ .xtb-header-sticky.xtb-appear .xpro-theme-builder-header-nav { animation: none; box-shadow: none; } /* -------------------------------------------------------------------------- 2 · Scrolled state — the chrome flips to ink on the paper ground These override values Elementor generates per-widget, so they need !important; there is no other hook for a state Elementor cannot address. -------------------------------------------------------------------------- */ .xtb-appear .tamsi-wordmark .xpro-heading-title, .xtb-appear .tamsi-wordmark .xpro-title-focus { color: var(--tamsi-ink) !important; } .xtb-appear .tamsi-nav .xpro-elementor-nav-link { color: var(--tamsi-slate) !important; } .xtb-appear .tamsi-nav .xpro-elementor-nav-link:hover, .xtb-appear .tamsi-nav .xpro-elementor-nav-link:focus-visible { color: var(--tamsi-ink) !important; } .xtb-appear .tamsi-nav .xpro-elementor-horizontal-menu-toggler { color: var(--tamsi-ink) !important; } /* Over the hero the CTA is a translucent-ivory ghost; once the header fills it becomes the Book-Cloth Green solid, so the action stays findable on paper. */ .xtb-appear .tamsi-header-cta a { background-color: var(--tamsi-green) !important; border-color: transparent !important; color: var(--tamsi-ivory) !important; } .xtb-appear .tamsi-header-cta a:hover { background-color: #0d1f15 !important; /* the green's press state, as on the solid buttons */ } /* -------------------------------------------------------------------------- 3 · Legibility over the photograph, before the flip -------------------------------------------------------------------------- */ .xpro-theme-builder-header:not(.xtb-appear) .tamsi-wordmark, .xpro-theme-builder-header:not(.xtb-appear) .tamsi-nav .xpro-elementor-nav-link { text-shadow: 0 1px 14px color-mix(in srgb, var(--tamsi-green) 55%, transparent); } .xpro-theme-builder-header .tamsi-nav .xpro-elementor-horizontal-menu-toggler { color: var(--tamsi-ivory); } /* Hello Elementor's reset fills every bare