/* ── 1+2. HEADER OVERLAY: absolute over hero ── */
.ekit-template-content-markup.ekit-template-content-header {
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important;
z-index: 1000 !important;
height: auto !important;
overflow: visible !important;
}
.ekit-template-content-markup.ekit-template-content-header .elementor {
position: relative !important;
width: 100% !important;
z-index: 1000 !important;
}
/* ── 3. TRANSPARENT HEADER ── */
.ekit-template-content-markup.ekit-template-content-header .elementor,
.ekit-template-content-markup.ekit-template-content-header .e-con,
.ekit-template-content-markup.ekit-template-content-header .e-con-inner,
.ekit-template-content-markup.ekit-template-content-header .elementor-section,
.ekit-template-content-markup.ekit-template-content-header .elementor-container,
.ekit-template-content-markup.ekit-template-content-header .elementor-widget-wrap,
.ekit-template-content-markup.ekit-template-content-header .elementor-widget-container,
.ekit-template-content-markup.ekit-template-content-header .ekit-wid-con,
.ekit-template-content-markup.ekit-template-content-header nav,
.ekit-template-content-markup.ekit-template-content-header ul.elementskit-navbar-nav {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
.ekit-template-content-markup.ekit-template-content-header .elementor *,
.ekit-template-content-markup.ekit-template-content-header .e-con {
border-bottom: none !important;
border-top: none !important;
}
.ast-primary-header-bar, .site-primary-header-wrap,
.main-header-bar, #masthead, .site-header {
background: transparent !important;
background-color: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important;
z-index: 999 !important;
}
/* ── 4. ZERO CONTENT OFFSETS ── */
#content, #primary, .content-area,
body.ast-hfb-header #content {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ── 5. NAV LINKS ── */
.ekit-wid-con .elementskit-navbar-nav > .nav-item > .ekit-menu-nav-link {
padding-top: 14px !important;
padding-bottom: 14px !important;
color: rgba(255,255,255,0.85) !important;
font-size: 12px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-family: "Tenor Sans", serif !important;
}
/* ── 6. HERO CONTAINER: DESKTOP ── */
.elementor-element-05f1e00 {
position: relative !important;
background-attachment: scroll !important;
}
/* Desktop hero text: absolute positioned left */
.elementor-element-264c101 {
position: absolute !important;
left: 40px !important;
top: 30% !important;
transform: translateY(-10%) !important;
width: 42% !important;
max-width: 600px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
}
/* ── 7. HERO TEXT COLOURS ── */
.elementor-element-7cb17cc .elementor-heading-title,
.elementor-element-7cb17cc .elementor-heading-title * {
color: rgba(255,255,255,0.92) !important;
}
.elementor-element-3d7212e .elementor-heading-title,
.elementor-element-3d7212e .elementor-heading-title * {
color: #D4AF37 !important;
}
.elementor-element-a9f3b21,
.elementor-element-a9f3b21 p {
color: rgba(255,255,255,0.65) !important;
}
/* ── 8. STARS/TAGLINE ROW: desktop only ── */
.elementor-element-44c3365 { display: none !important; }
/* ── 9. NAV WIDGET PADDING ── */
.elementor-element-c1c645d > .elementor-widget-container,
.elementor-element-38dfed0 .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* ── 10. HIDE HAMBURGER + MOBILE MENU ON DESKTOP ── */
#tsi-hamburger { display: none !important; }
#tsi-mobile-menu { display: none !important; }
/* Rogue ekit-nav-menu widget from other session — remove when replaced with logo */
.elementor-element-59a450e { display: none !important; }
/* ── 11. TABLET: hide desktop nav ── */
@media (max-width: 1023px) {
#tsi-main-nav { display: none !important; }
}
/* ════════════════════════════════════════════════════════════
MOBILE LAYOUT (max-width: 768px)
Goal: logo top-left (large), hamburger top-right,
hero text centered in middle, button bottom-center
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── LOGO: left-aligned, large ── */
/* Logo: hide original img, use ::before for S mark + ::after for text */
.elementor-element-af26ac7 .elementor-widget-container {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0 0 0 20px !important;
height: 72px !important;
position: relative !important;
}
.elementor-element-af26ac7 a {
display: flex !important;
align-items: center !important;
text-decoration: none !important;
}
/* Hide the original logo img */
.elementor-element-af26ac7 img {
display: none !important;
}
/* S mark via ::before */
.elementor-element-af26ac7 a::before {
content: "" !important;
display: block !important;
width: 36px !important;
height: 48px !important;
background: url("https://theselfidentity.com/wp-content/uploads/tsi-logo-mark.php") no-repeat center top !important;
background-size: contain !important;
flex-shrink: 0 !important;
}
/* THE SELF IDENTITY text via ::after */
.elementor-element-af26ac7 a::after {
content: "THE SELF IDENTITY" !important;
display: inline-flex !important;
color: #D4AF37 !important;
font-family: "Tenor Sans", sans-serif !important;
font-size: 11px !important;
letter-spacing: 0.28em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
padding-left: 12px !important;
align-self: center !important;
line-height: 1 !important;
}
/* ── HAMBURGER: top-right ── */
#tsi-hamburger {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 5px !important;
padding: 0 20px !important;
cursor: pointer !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
height: 72px !important;
width: 60px !important;
z-index: 10001 !important;
background: transparent !important;
border: none !important;
}
#tsi-hamburger span {
display: block !important;
width: 24px !important;
height: 2px !important;
background: rgba(255,255,255,0.9) !important;
border-radius: 2px !important;
}
/* ── Desktop nav: hidden ── */
#tsi-main-nav { display: none !important; }
.elementor-element-44c3365 { display: none !important; }
/* ── HERO: mobile crop B background, full viewport ── */
.elementor-element-05f1e00,
.elementor-element-05f1e00:not(.elementor-motion-effects-element-type-background),
.elementor-element-05f1e00 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-image: url("https://theselfidentity.com/wp-content/uploads/tsi-hero-mobile.jpg") !important;
background-size: cover !important;
background-position: center center !important;
}
.elementor-element-05f1e00 {
min-height: 100svh !important;
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: stretch !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* ── HERO TEXT: fills space, no cut-off ── */
.elementor-element-264c101 {
position: relative !important;
left: auto !important; top: auto !important;
transform: none !important;
width: 100% !important; max-width: 100% !important;
padding: 80px 28px 16px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
flex: 1 !important;
justify-content: space-evenly !important;
gap: 0 !important;
}
/* Eyebrow label fills top gap */
.elementor-element-264c101::before {
content: "IDENTITY TRANSFORMATION" !important;
display: block !important;
font-family: "Tenor Sans", sans-serif !important;
font-size: 9px !important;
letter-spacing: 0.35em !important;
text-transform: uppercase !important;
color: rgba(201,168,76,0.5) !important;
width: 100% !important;
text-align: center !important;
}
/* H1: centered white */
.elementor-element-7cb17cc,
.elementor-element-7cb17cc .elementor-widget-container {
text-align: center !important; width: 100% !important;
}
.elementor-element-7cb17cc .elementor-heading-title,
.elementor-element-7cb17cc .elementor-heading-title * {
font-size: 40px !important; line-height: 1.15 !important;
color: rgba(255,255,255,0.92) !important;
text-align: center !important;
}
/* H2: centered gold */
.elementor-element-3d7212e,
.elementor-element-3d7212e .elementor-widget-container {
text-align: center !important; width: 100% !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
.elementor-element-3d7212e .elementor-heading-title,
.elementor-element-3d7212e .elementor-heading-title * {
font-size: 36px !important; line-height: 1.15 !important;
color: #D4AF37 !important; text-align: center !important;
}
/* Subtitle: centered */
.elementor-element-a9f3b21,
.elementor-element-a9f3b21 p,
.elementor-element-a9f3b21 .elementor-widget-container {
color: rgba(255,255,255,0.65) !important;
font-size: 14px !important;
text-align: center !important;
width: 100% !important; line-height: 1.5 !important;
}
/* ── BEGIN BUTTON: centered, 40px from bottom ── */
.elementor-element-c343ccf {
width: 100% !important;
padding: 0 24px 108px !important;
box-sizing: border-box !important;
display: flex !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.elementor-element-c343ccf .elementor-widget-container,
.elementor-element-c343ccf .elementor-widget-container a,
.booking-btn, #tsi-begin-btn {
width: 100% !important; max-width: 320px !important;
display: block !important; text-align: center !important;
box-sizing: border-box !important;
}
/* ── Hide decorative orange figure on mobile ── */
.elementor-element-dc34f6c {
display: none !important;
}
/* Force hero BG — highest specificity override */
body .elementor-element.elementor-element-05f1e00,
body .elementor-element.elementor-element-05f1e00:not(.elementor-motion-effects-element-type-background) {
background-image: url("https://theselfidentity.com/wp-content/uploads/tsi-hero-mobile.jpg") !important;
background-size: cover !important;
background-position: center center !important;
}
/* ── Elementor animations fix ── */
.elementor-invisible {
visibility: visible !important; opacity: 1 !important;
animation: none !important; transform: none !important;
}
.e-con, .e-con-inner, .elementor-section, .elementor-container {
visibility: visible !important; opacity: 1 !important;
}
body, html { overflow-x: hidden !important; }
.e-con-boxed > .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; }
/* ── MOBILE MENU OVERLAY ── */
#tsi-mobile-menu {
display: none;
position: fixed !important;
top: 0 !important; left: 0 !important;
width: 100% !important; height: 100% !important;
background: rgba(5,5,5,0.97) !important;
z-index: 10000 !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 36px !important;
}
#tsi-mobile-menu.open { display: flex !important; }
#tsi-mobile-menu a {
color: rgba(255,255,255,0.85) !important;
font-family: "Tenor Sans", serif !important;
font-size: 20px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
#tsi-mobile-menu a#mob-begin { color: #D4AF37 !important; }
#tsi-mobile-close {
position: absolute !important;
top: 24px !important; right: 28px !important;
background: none !important; border: none !important;
color: rgba(255,255,255,0.7) !important;
font-size: 36px !important; cursor: pointer !important;
line-height: 1 !important;
}
}
/* ══════════════════════════════════════════════════
WPBOOKIT BOOKING TYPES — TSI DARK THEME OVERRIDE
══════════════════════════════════════════════════ */
/* Page background */
.page-id-28479 .entry-content,
.page-id-28479 .site-content { background: #000 !important; }
/* Container */
.wpb-shortcode-wrapper { background: transparent !important; }
.wpb-shortcode-wrapper .container { max-width: 100% !important; padding: 0 !important; }
.wpb-shortcode-wrapper .row { margin: 0 !important; }
/* Each card */
.booking-type-profile-card {
background: #0d0d0d !important;
border: 1px solid rgba(201,168,76,0.18) !important;
border-radius: 16px !important;
overflow: hidden !important;
transition: border-color 0.3s ease, transform 0.3s ease !important;
}
.booking-type-profile-card:hover {
border-color: rgba(201,168,76,0.55) !important;
transform: translateY(-3px) !important;
}
/* Blue header area → dark gold gradient */
.booking-type-profile-card .profile-card-height {
background: linear-gradient(160deg, #1a1408 0%, #0d0d0d 100%) !important;
background-color: #0d0d0d !important;
border-bottom: 1px solid rgba(201,168,76,0.15) !important;
min-height: 80px !important;
}
/* Avatar */
.booking-type-profile-card .booking-user-image img {
border-color: rgba(201,168,76,0.4) !important;
background: #1a1a1a !important;
filter: brightness(0.9) !important;
}
/* Staff name */
.booking-type-profile-card .name {
color: rgba(201,168,76,0.6) !important;
font-family: "Tenor Sans", serif !important;
font-size: 11px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
/* Card content area */
.booking-type-profile-content {
background: #0d0d0d !important;
padding: 20px !important;
}
/* Service title */
.booking-type-profile-card h6,
.booking-type-profile-card .staff-content h6 {
color: #D4AF37 !important;
font-family: "Tenor Sans", serif !important;
font-size: 15px !important;
letter-spacing: 0.06em !important;
font-weight: 500 !important;
}
/* Description text */
.booking-type-profile-card .overflow-content p,
.booking-type-profile-card .overflow-content {
color: rgba(255,255,255,0.55) !important;
font-size: 13px !important;
line-height: 1.65 !important;
}
/* Duration / price icons and text */
.booking-type-profile-card .title-text,
.booking-type-profile-card .booking-type-card-info {
color: rgba(255,255,255,0.6) !important;
font-size: 12px !important;
}
.booking-type-profile-card .title-text svg path,
.booking-type-profile-card .title-text svg {
stroke: rgba(201,168,76,0.6) !important;
fill: none !important;
}
/* Gradient fade at bottom of description */
.booking-type-profile-card .contain-gredient {
background: linear-gradient(to bottom, transparent, #0d0d0d) !important;
}
/* Book / CTA button */
.booking-type-profile-card .btn,
.booking-type-profile-card a.btn,
.booking-type-profile-card .book-btn,
.booking-type-profile-card [class*="book"] {
background: transparent !important;
border: 1px solid rgba(201,168,76,0.5) !important;
color: #D4AF37 !important;
font-family: "Tenor Sans", serif !important;
font-size: 11px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
padding: 10px 24px !important;
border-radius: 4px !important;
transition: all 0.25s ease !important;
}
.booking-type-profile-card .btn:hover,
.booking-type-profile-card a.btn:hover {
background: rgba(201,168,76,0.1) !important;
border-color: #D4AF37 !important;
}
/* Bootstrap overrides for dark theme */
.wpb-shortcode-wrapper .border-bottom {
border-color: rgba(201,168,76,0.15) !important;
}
.wpb-shortcode-wrapper .text-muted {
color: rgba(255,255,255,0.4) !important;
}
/* Appointment page heading */
.page-id-28479 .elementor-heading-title {
color: #D4AF37 !important;
}
.page-id-28479 .elementor-text-editor p {
color: rgba(255,255,255,0.55) !important;
}
/* ══════════════════════════════════════════════════
BOOKING POPUP MODAL
══════════════════════════════════════════════════ */
/* Overlay backdrop */
#tsi-booking-modal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 999999;
background: rgba(0,0,0,0.82);
align-items: center;
justify-content: center;
padding: 30px 40px;
box-sizing: border-box;
animation: tsiOverlayIn 0.25s ease;
}
#tsi-booking-modal.open { display: flex; }
@keyframes tsiOverlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Dialog: centered, wide enough for 3 columns */
#tsi-booking-dialog {
position: relative;
width: 100%;
max-width: 1060px;
height: 88vh;
max-height: 800px;
background: #080808;
border: 1px solid rgba(201,168,76,0.22);
border-radius: 14px;
overflow: hidden;
display: grid;
grid-template-columns: 300px 1fr;
box-shadow: 0 32px 100px rgba(0,0,0,0.9), 0 0 0 1px rgba(201,168,76,0.06);
animation: tsiDialogIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes tsiDialogIn {
from { opacity: 0; transform: scale(0.97) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
#tsi-booking-close {
position: absolute;
top: 14px; right: 16px;
background: rgba(8,8,8,0.95);
border: 1px solid rgba(201,168,76,0.5);
color: #D4AF37;
font-size: 17px;
line-height: 1;
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
z-index: 1000000;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s, background 0.2s;
font-family: sans-serif;
}
#tsi-booking-close:hover {
border-color: #D4AF37;
background: rgba(201,168,76,0.12);
color: #fff;
}
/* ══════════════════════════════════════════════════
BOOKING DIALOG LEFT PANEL — Program Selector
══════════════════════════════════════════════════ */
#tsi-booking-left {
background: #0d0d0d;
border-right: 1px solid rgba(201,168,76,0.12);
padding: 28px 20px 20px;
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(201,168,76,0.3) transparent;
}
#tsi-booking-left::-webkit-scrollbar { width: 3px; }
#tsi-booking-left::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 3px; }
.tsi-panel-label {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #D4AF37;
opacity: 0.65;
margin-bottom: 4px;
font-weight: 600;
font-family: 'Tenor Sans', serif;
line-height: 1.5;
}
.tsi-program-card {
border: 1px solid rgba(201,168,76,0.22);
border-radius: 8px;
padding: 12px 14px;
cursor: pointer;
background: rgba(201,168,76,0.02);
transition: border-color 0.2s, background 0.2s;
}
.tsi-program-card:hover {
border-color: #D4AF37;
background: rgba(201,168,76,0.07);
}
.tsi-program-card.active {
border-color: #D4AF37;
background: rgba(201,168,76,0.07);
box-shadow: 0 0 0 1px rgba(201,168,76,0.15);
}
.tsi-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 5px;
}
.tsi-card-title {
color: #D4AF37;
font-weight: 600;
font-size: 13px;
line-height: 1.35;
font-family: 'Tenor Sans', serif;
flex: 1;
}
.tsi-card-price {
color: #D4AF37;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
margin-left: 8px;
font-family: 'Tenor Sans', serif;
}
.tsi-card-meta {
color: rgba(255,255,255,0.45);
font-size: 11px;
letter-spacing: 0.05em;
font-family: 'Tenor Sans', serif;
}
.tsi-tz-block {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(201,168,76,0.12);
}
.tsi-tz-select {
width: 100%;
background: #1a1a1a;
border: 1px solid rgba(201,168,76,0.3);
color: #D4AF37;
font-family: 'Tenor Sans', serif;
font-size: 12px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
margin-top: 8px;
-webkit-appearance: none;
appearance: none;
}
.tsi-tz-note {
color: rgba(255,255,255,0.22);
font-size: 10px;
margin-top: 6px;
line-height: 1.4;
font-family: 'Tenor Sans', serif;
}
#tsi-booking-right {
display: flex;
flex-direction: column;
overflow: hidden;
background: #080808;
}
#tsi-booking-iframe {
width: 100%;
height: 100%;
border: none;
background: #080808;
display: block;
}
body.tsi-modal-open { overflow: hidden !important; }
@media (max-width: 768px) {
#tsi-booking-modal { padding: 0; }
#tsi-booking-dialog {
max-width: 100%; height: 100vh;
max-height: 100vh; border-radius: 0; border: none;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
#tsi-booking-left {
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 12px !important;
border-right: none !important;
border-bottom: 1px solid rgba(201,168,76,0.12) !important;
max-height: 130px !important;
gap: 8px !important;
}
.tsi-program-card { min-width: 160px; flex-shrink: 0; }
.tsi-tz-block { display: none !important; }
}
/* ══════════════════════════════════════════════════
EMBED MODE — appointment page inside iframe hides nav
══════════════════════════════════════════════════ */
.tsi-embed-mode .site-header,
.tsi-embed-mode #tsi-main-nav,
.tsi-embed-mode .ast-primary-header-bar,
.tsi-embed-mode #masthead,
.tsi-embed-mode .main-header-bar,
.tsi-embed-mode .ekit-template-content-header,
.tsi-embed-mode .ekit-template-content-markup,
.tsi-embed-mode #tsi-hamburger,
.tsi-embed-mode #tsi-mobile-menu,
.tsi-embed-mode #tsi-booking-modal,
.tsi-embed-mode .ast-site-header-wrap,
.tsi-embed-mode .site-footer,
.tsi-embed-mode #colophon {
display: none !important;
}
.tsi-embed-mode #content,
.tsi-embed-mode .site-content,
.tsi-embed-mode #primary,
.tsi-embed-mode .ast-container {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Hide right-side image column, make content full width */
.tsi-embed-mode .elementor-element-d498541 {
display: none !important;
}
.tsi-embed-mode .elementor-element-5b947cd {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
.tsi-embed-mode .elementor-element-e4fbb17 > .e-con-inner {
max-width: 100% !important;
}
/* WPBookit uses col-lg-4 (3 columns). In embed show 2 columns. */
.tsi-embed-mode .wpb-shortcode-wrapper .col-lg-4 {
flex: 0 0 50% !important;
max-width: 50% !important;
width: 50% !important;
}
@media (max-width: 600px) {
.tsi-embed-mode .wpb-shortcode-wrapper .col-lg-4 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* ══════════════════════════════════════════════════
FIX BOOKING CARD TEXT — prevent mid-word breaks
══════════════════════════════════════════════════ */
.booking-type-profile-card h6,
.booking-type-profile-card .staff-content h6 {
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
white-space: normal !important;
}
/* ══════════════════════════════════════════════════════════
WPBOOKIT BOOKING WIZARD — DARK THEME
Covers: 3-column booking form, flatpickr calendar,
program selector, time slots, confirm modal
══════════════════════════════════════════════════════════ */
.wpb-booking-shortcode,
.wpb-booking-shortcode .container,
.wpb-booking-shortcode .row {
background: #080808 !important;
color: rgba(255,255,255,0.85) !important;
}
.wpb-booking-shortcode .col-lg-3,
.wpb-booking-shortcode .col-lg-6,
.wpb-booking-shortcode .col-md-12,
.wpb-booking-shortcode .col-12 { background: #080808 !important; }
.wpb-booking-shortcode h3.mb-3,
.wpb-booking-shortcode h5 {
color: #D4AF37 !important;
font-family: "Tenor Sans", serif !important;
letter-spacing: 0.08em !important;
}
.wpb-booking-shortcode .mb-5 { color: rgba(255,255,255,0.55) !important; font-size: 13px !important; }
.wpb-booking-shortcode .title-text { color: rgba(255,255,255,0.45) !important; font-size: 13px !important; line-height: 1.65 !important; }
.wpb-booking-shortcode p.mb-0 { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; }
.wpb-booking-shortcode select {
background: #121212 !important;
color: rgba(255,255,255,0.85) !important;
border: 1px solid rgba(201,168,76,0.25) !important;
border-radius: 8px !important;
padding: 10px 14px !important;
font-family: "Tenor Sans", serif !important;
font-size: 13px !important;
width: 100% !important;
-webkit-appearance: none !important;
appearance: none !important;
margin-bottom: 16px !important;
}
.wpb-booking-shortcode select option { background: #121212 !important; color: rgba(255,255,255,0.85) !important; }
.wpb-booking-shortcode .border-bottom { border-bottom-color: rgba(201,168,76,0.14) !important; }
.wpb-booking-shortcode .text-muted { color: rgba(255,255,255,0.4) !important; }
.wpb-booking-shortcode a { color: rgba(201,168,76,0.8) !important; }
.wpb-booking-shortcode a:hover { color: #D4AF37 !important; }
.wpb-booking-shortcode .d-flex.pb-4 { border-bottom-color: rgba(201,168,76,0.14) !important; color: rgba(255,255,255,0.45) !important; font-size: 12px !important; }
/* ── FLATPICKR DARK THEME ── */
.flatpickr-calendar, .wpb-inline-flatpickr, .calander-body {
background: #080808 !important;
box-shadow: none !important;
border: none !important;
}
.flatpickr-months, .flatpickr-month { background: transparent !important; color: rgba(255,255,255,0.9) !important; fill: rgba(255,255,255,0.9) !important; }
.flatpickr-current-month { color: rgba(255,255,255,0.9) !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: #0d0d0d !important; color: rgba(255,255,255,0.9) !important; border: none !important; font-family: "Tenor Sans", serif !important; font-size: 14px !important; }
.flatpickr-monthDropdown-month { background: #0d0d0d !important; color: rgba(255,255,255,0.85) !important; }
.flatpickr-current-month input.cur-year { color: rgba(255,255,255,0.9) !important; background: transparent !important; font-family: "Tenor Sans", serif !important; }
.flatpickr-prev-month, .flatpickr-next-month { color: rgba(201,168,76,0.7) !important; fill: rgba(201,168,76,0.7) !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #D4AF37 !important; }
.flatpickr-weekdays, .flatpickr-weekdaycontainer { background: transparent !important; }
span.flatpickr-weekday { background: transparent !important; color: rgba(201,168,76,0.65) !important; font-family: "Tenor Sans", serif !important; font-size: 11px !important; letter-spacing: 0.1em !important; }
.flatpickr-days, .dayContainer, .flatpickr-innerContainer, .flatpickr-rContainer { background: transparent !important; }
/* ── DAY CELLS — the core fix ── */
.flatpickr-day {
background: #161616 !important;
border: 1px solid rgba(255,255,255,0.06) !important;
color: rgba(255,255,255,0.75) !important;
border-radius: 6px !important;
font-family: "Tenor Sans", serif !important;
transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.flatpickr-day:hover, .flatpickr-day:focus { background: rgba(201,168,76,0.14) !important; border-color: rgba(201,168,76,0.4) !important; color: #D4AF37 !important; outline: none !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: #D4AF37 !important; border-color: #D4AF37 !important; color: #000 !important; font-weight: 600 !important; }
.flatpickr-day.today { border-color: rgba(201,168,76,0.5) !important; background: rgba(201,168,76,0.08) !important; color: #D4AF37 !important; }
.flatpickr-day.today:hover { background: rgba(201,168,76,0.18) !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { background: #0a0a0a !important; border-color: rgba(255,255,255,0.03) !important; color: rgba(255,255,255,0.17) !important; cursor: not-allowed !important; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { background: #0e0e0e !important; border-color: rgba(255,255,255,0.03) !important; color: rgba(255,255,255,0.2) !important; }
.flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: rgba(201,168,76,0.07) !important; color: rgba(201,168,76,0.5) !important; }
.flatpickr-day.wpb-available { border-color: rgba(201,168,76,0.32) !important; background: rgba(201,168,76,0.07) !important; }
/* ── AVAILABLE TIMES ── */
.booking-slots-time-wrapper { background: transparent !important; }
.booking-slots-time { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.booking-slots-time li {
background: #141414 !important;
border: 1px solid rgba(201,168,76,0.2) !important;
color: rgba(255,255,255,0.75) !important;
border-radius: 6px !important;
padding: 9px 16px !important;
margin-bottom: 8px !important;
font-family: "Tenor Sans", serif !important;
font-size: 13px !important;
cursor: pointer !important;
text-align: center !important;
transition: all 0.18s ease !important;
}
.booking-slots-time li:hover { background: rgba(201,168,76,0.12) !important; border-color: rgba(201,168,76,0.45) !important; color: #D4AF37 !important; }
.booking-slots-time li a { color: inherit !important; text-decoration: none !important; display: block !important; }
.wpb-selected-timestap { background: rgba(201,168,76,0.15) !important; border-color: #D4AF37 !important; color: #D4AF37 !important; }
.wpb-next-btn, .wpb-prev-btn {
background: transparent !important;
border: 1px solid rgba(201,168,76,0.45) !important;
color: #D4AF37 !important;
font-family: "Tenor Sans", serif !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-size: 11px !important;
padding: 10px 28px !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
margin-top: 16px !important;
}
.wpb-next-btn:hover { background: rgba(201,168,76,0.1) !important; }
.tsi-slots-title { color: #D4AF37 !important; font-family: "Tenor Sans", serif !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; margin-bottom: 8px !important; }
.tsi-slots-sub { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; }
/* ── CONFIRM BOOKING MODAL ── */
.confirm-booking .modal-content { background: #0d0d0d !important; border: 1px solid rgba(201,168,76,0.25) !important; color: rgba(255,255,255,0.85) !important; border-radius: 12px !important; }
.confirm-booking .modal-header { background: transparent !important; border-bottom-color: rgba(201,168,76,0.15) !important; }
.confirm-booking .modal-footer { background: transparent !important; border-top-color: rgba(201,168,76,0.15) !important; }
.confirm-booking .modal-title { color: #D4AF37 !important; font-family: "Tenor Sans", serif !important; letter-spacing: 0.06em !important; }
.confirm-booking .form-control,
.confirm-booking input[type="text"],
.confirm-booking input[type="email"],
.confirm-booking textarea { background: #1a1a1a !important; border-color: rgba(201,168,76,0.2) !important; color: rgba(255,255,255,0.85) !important; border-radius: 6px !important; }
.confirm-booking .form-control:focus, .confirm-booking input:focus { border-color: rgba(201,168,76,0.5) !important; box-shadow: 0 0 0 2px rgba(201,168,76,0.1) !important; background: #1a1a1a !important; outline: none !important; }
.confirm-booking label, .confirm-booking .form-label { color: rgba(255,255,255,0.55) !important; font-family: "Tenor Sans", serif !important; font-size: 12px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }
.confirm-booking .wpb-submit-model-btn, .confirm-booking button[type="submit"] { background: transparent !important; border: 1px solid rgba(201,168,76,0.5) !important; color: #D4AF37 !important; font-family: "Tenor Sans", serif !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: 11px !important; padding: 10px 28px !important; border-radius: 4px !important; }
.confirm-booking .wpb-submit-model-btn:hover, .confirm-booking button[type="submit"]:hover { background: rgba(201,168,76,0.1) !important; }
.confirm-booking .wpb-close-model-btn, .confirm-booking .btn-secondary { background: transparent !important; border-color: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.45) !important; }
.confirm-booking .modal-body p, .confirm-booking .booking-modal-description { color: rgba(255,255,255,0.55) !important; font-size: 13px !important; line-height: 1.65 !important; }
/* ══════════════════════════════════════════════════════════
HIGH-SPECIFICITY OVERRIDES
Beats WPBookit Pro flatpickr theme + Bootstrap modal white
══════════════════════════════════════════════════════════ */
/* ── CALENDAR PAGE BACKGROUND (cover all booking pages) ── */
body .wpb-booking-shortcode { background: #080808 !important; }
body .wpb-booking-shortcode .container,
body .wpb-booking-shortcode .row,
body .wpb-booking-shortcode .col-lg-3,
body .wpb-booking-shortcode .col-lg-6,
body .wpb-booking-shortcode .col-md-12 { background: #080808 !important; }
/* ── FLATPICKR: beat WPBookit Pro's own theme with nested selectors ── */
.flatpickr-calendar.inline,
.flatpickr-calendar.static,
body .flatpickr-calendar,
.calander-body .flatpickr-calendar,
.wpb-booking-shortcode .flatpickr-calendar {
background: #080808 !important;
border: none !important;
box-shadow: none !important;
}
.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-month,
body .flatpickr-months {
background: transparent !important;
color: rgba(255,255,255,0.9) !important;
fill: rgba(255,255,255,0.9) !important;
}
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
background: #080808 !important;
color: rgba(255,255,255,0.9) !important;
border: none !important;
}
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
fill: rgba(201,168,76,0.7) !important;
color: rgba(201,168,76,0.7) !important;
}
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-weekdaycontainer,
.flatpickr-calendar span.flatpickr-weekday {
background: transparent !important;
color: rgba(201,168,76,0.65) !important;
}
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer,
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer {
background: transparent !important;
}
/* THE CRITICAL FIX — maximum specificity for day cells */
.flatpickr-calendar .dayContainer .flatpickr-day,
.flatpickr-calendar .flatpickr-days .flatpickr-day,
body .flatpickr-day {
background: #161616 !important;
border-color: rgba(255,255,255,0.07) !important;
color: rgba(255,255,255,0.78) !important;
border-radius: 6px !important;
}
.flatpickr-calendar .dayContainer .flatpickr-day:hover,
body .flatpickr-day:hover,
body .flatpickr-day:focus {
background: rgba(201,168,76,0.15) !important;
border-color: rgba(201,168,76,0.4) !important;
color: #D4AF37 !important;
outline: none !important;
}
.flatpickr-calendar .dayContainer .flatpickr-day.selected,
body .flatpickr-day.selected,
body .flatpickr-day.selected:hover {
background: #D4AF37 !important;
border-color: #D4AF37 !important;
color: #000 !important;
font-weight: 700 !important;
}
.flatpickr-calendar .dayContainer .flatpickr-day.today,
body .flatpickr-day.today {
border-color: rgba(201,168,76,0.55) !important;
background: rgba(201,168,76,0.1) !important;
color: #D4AF37 !important;
}
.flatpickr-calendar .dayContainer .flatpickr-day.flatpickr-disabled,
body .flatpickr-day.flatpickr-disabled,
body .flatpickr-day.flatpickr-disabled:hover {
background: #0c0c0c !important;
border-color: rgba(255,255,255,0.03) !important;
color: rgba(255,255,255,0.15) !important;
}
.flatpickr-calendar .dayContainer .flatpickr-day.prevMonthDay,
.flatpickr-calendar .dayContainer .flatpickr-day.nextMonthDay,
body .flatpickr-day.prevMonthDay,
body .flatpickr-day.nextMonthDay {
background: #0e0e0e !important;
border-color: rgba(255,255,255,0.03) !important;
color: rgba(255,255,255,0.22) !important;
}
/* ── TIME SLOTS: higher specificity ── */
.wpb-booking-shortcode .booking-slots-time-wrapper { background: transparent !important; }
.wpb-booking-shortcode .booking-slots-time,
ul.booking-slots-time {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.wpb-booking-shortcode .booking-slots-time li,
ul.booking-slots-time li,
.booking-slots-time-wrapper li {
background: #141414 !important;
border: 1px solid rgba(201,168,76,0.22) !important;
color: rgba(255,255,255,0.8) !important;
border-radius: 7px !important;
padding: 9px 14px !important;
margin-bottom: 8px !important;
cursor: pointer !important;
text-align: center !important;
transition: all 0.18s !important;
}
.wpb-booking-shortcode .booking-slots-time li:hover,
ul.booking-slots-time li:hover {
background: rgba(201,168,76,0.13) !important;
border-color: rgba(201,168,76,0.5) !important;
color: #D4AF37 !important;
}
.wpb-booking-shortcode .booking-slots-time li a,
ul.booking-slots-time li a {
color: inherit !important;
text-decoration: none !important;
}
/* ── CONFIRM BOOKING MODAL: beat Bootstrap !important ── */
body .modal.confirm-booking .modal-content,
body .modal.confirm-booking .modal-dialog .modal-content,
.confirm-booking.modal .modal-content,
.confirm-booking .modal-dialog .modal-content {
background: #0d0d0d !important;
background-color: #0d0d0d !important;
border: 1px solid rgba(201,168,76,0.28) !important;
color: rgba(255,255,255,0.85) !important;
border-radius: 12px !important;
}
body .modal.confirm-booking .modal-header,
.confirm-booking .modal-content .modal-header {
background: transparent !important;
background-color: transparent !important;
border-bottom: 1px solid rgba(201,168,76,0.15) !important;
}
body .modal.confirm-booking .modal-footer,
.confirm-booking .modal-content .modal-footer {
background: transparent !important;
background-color: transparent !important;
border-top: 1px solid rgba(201,168,76,0.15) !important;
}
body .modal.confirm-booking .modal-body,
.confirm-booking .modal-content .modal-body {
background: transparent !important;
color: rgba(255,255,255,0.82) !important;
}
.confirm-booking .modal-title,
body .modal.confirm-booking .modal-title {
color: #D4AF37 !important;
font-family: "Tenor Sans", serif !important;
}
.confirm-booking .modal-content p,
.confirm-booking .modal-content h4,
.confirm-booking .modal-content h5,
.confirm-booking .modal-content h6,
.confirm-booking .modal-content span,
.confirm-booking .modal-content label {
color: rgba(255,255,255,0.75) !important;
}
.confirm-booking .modal-content .form-control,
.confirm-booking .modal-content input,
.confirm-booking .modal-content input[type="text"],
.confirm-booking .modal-content input[type="email"],
.confirm-booking .modal-content textarea,
.confirm-booking .modal-content select,
body .modal.confirm-booking input {
background: #1a1a1a !important;
background-color: #1a1a1a !important;
border-color: rgba(201,168,76,0.22) !important;
color: rgba(255,255,255,0.88) !important;
border-radius: 6px !important;
}
.confirm-booking .modal-content .form-control:focus,
.confirm-booking .modal-content input:focus,
body .modal.confirm-booking input:focus {
border-color: rgba(201,168,76,0.55) !important;
box-shadow: 0 0 0 2px rgba(201,168,76,0.1) !important;
background: #1a1a1a !important;
outline: none !important;
}
.confirm-booking .modal-content .btn-primary,
.confirm-booking .modal-content button[type="submit"],
.confirm-booking .wpb-submit-model-btn {
background: rgba(201,168,76,0.12) !important;
background-color: rgba(201,168,76,0.12) !important;
border: 1px solid rgba(201,168,76,0.55) !important;
color: #D4AF37 !important;
font-family: "Tenor Sans", serif !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-size: 11px !important;
border-radius: 4px !important;
padding: 10px 28px !important;
}
.confirm-booking .modal-content .btn-primary:hover,
.confirm-booking .wpb-submit-model-btn:hover {
background: rgba(201,168,76,0.2) !important;
border-color: #D4AF37 !important;
}
.confirm-booking .modal-content .btn-secondary,
.confirm-booking .wpb-close-model-btn {
background: transparent !important;
border-color: rgba(255,255,255,0.18) !important;
color: rgba(255,255,255,0.45) !important;
}
.confirm-booking .modal-backdrop { background: rgba(0,0,0,0.75) !important; }
/* ══════════════════════════════════════════════════
FIX 1: Hide "Powered by Astra WordPress Theme"
══════════════════════════════════════════════════ */
.ast-footer-copyright a[href*="wpastra"],
.ast-footer-copyright a[href*="wordpress"],
.ast-footer-copyright a[href*="astra"] {
display: none !important;
}
.ast-footer-copyright p {
color: rgba(255,255,255,0.3) !important;
font-size: 12px !important;
letter-spacing: 0.08em !important;
font-family: "Tenor Sans", serif !important;
}
/* Replace the ugly "| Powered by..." text by hiding the whole bar
and relying on the custom footer widget below it */
.ast-builder-grid-row-container.site-below-footer-wrap .ast-footer-copyright {
display: none !important;
}
/* ══════════════════════════════════════════════════
FIX 2: Duplicate time slot — the blue native WPBookit
list is rendering under our styled one. Hide it.
══════════════════════════════════════════════════ */
.booking-slots-time li a {
color: rgba(255,255,255,0.8) !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
text-align: center !important;
}
/* If WPBookit renders a second .booking-slots-time list via a different container, hide duplicates */
.wpb-booking-shortcode .wpb-available-time > .booking-slots-time:not(:first-child) {
display: none !important;
}
/* Kill any blue link color inside time slots entirely */
.booking-slots-time a, .booking-slots-time a:visited, .booking-slots-time a:hover {
color: inherit !important;
background: transparent !important;
border: none !important;
text-decoration: none !important;
}
/* ══════════════════════════════════════════════════
FIX 3: Modal overlay position when launched from homepage
The WPBookit modal should be a fixed centered overlay
══════════════════════════════════════════════════ */
/* WPBookit generates a modal-like div — ensure it is centered */
.wpb-booking-modal-overlay,
.wpb-shortcode-modal,
#wpbookit-booking-modal,
.wpb-booking-popup {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 99999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(0,0,0,0.7) !important;
}
/* The inner content box */
.wpb-booking-modal-overlay > div,
.wpb-shortcode-modal > div,
#wpbookit-booking-modal > div {
max-width: 1100px !important;
width: 90vw !important;
max-height: 90vh !important;
overflow-y: auto !important;
border-radius: 12px !important;
background: #0c0c0c !important;
border: 1px solid rgba(201,168,76,0.2) !important;
}
/* ══════════════════════════════════════════════════
FIX 4: Booking page layout — it renders inline on the page
(no modal wrapper), so make it look contained and centered
══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
FIX 5: Footer bottom bar branding
══════════════════════════════════════════════════ */
.site-footer-below-wrap .ast-copyright-text,
.ast-footer-copyright {
color: rgba(255,255,255,0.3) !important;
font-size: 11px !important;
}
/* Add TSI branded bottom line */
footer .ast-footer-copyright:last-child::after {
content: "The Self Identity · Psychotherapy & Transformation · Melbourne, Australia";
display: block !important;
color: rgba(201,168,76,0.5) !important;
font-family: "Tenor Sans", serif !important;
font-size: 11px !important;
letter-spacing: 0.1em !important;
margin-top: 4px !important;
}
/* ═══════════════════════════════════════════════════════════════
TARGETED FIXES — appended after cache purge, 2026-05-27
═══════════════════════════════════════════════════════════════ */
/* 1. Remove ALL box outlines from calendar date cells.
The design shows dates as floating numbers, no cell boxes.
WPBookit uses ::after for all visual states, so borders are wrong. */
.flatpickr-day,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.today {
border: none !important;
border-color: transparent !important;
box-shadow: none !important;
outline: none !important;
}
/* 2. Available dates: very subtle ::after highlight, no border */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.wpb-available::after {
background-color: rgba(212, 175, 55, 0.09) !important;
border: 1px solid rgba(212, 175, 55, 0.22) !important;
border-radius: 50% !important;
}
/* 3. Disabled/past: just dim number, no visual box at all */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.flatpickr-disabled,
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.prevMonthDay,
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.nextMonthDay {
color: rgba(255, 255, 255, 0.18) !important;
}
/* 4. Row container backgrounds clean */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer {
background: transparent !important;
}
/* 5. Hide JET AI chat widget on booking pages and inside booking popup.
The #jvc div is the outer container. .jv is the chat panel. */
#jvc { z-index: 50 !important; }
/* On booking page */
/* When inside tsi-embed-mode (iframe) */
html.tsi-embed-mode #jvc,
html.tsi-embed-mode .jv { display: none !important; }
/* When WPBookit popup opens — JS adds a class to body */
/* Also hide via CSS when the booking shortcode wrapper is on screen */
.site-content .wpb-booking-shortcode ~ #jvc,
.site-content ~ #jvc { pointer-events: none !important; opacity: 0 !important; }
/* 6. The "JET AI" text label next to widget — hide it */
.jpf { display: none !important; }
/* 7. Remove gray row backgrounds from date grid rows (27-31 and 1-7 rows) */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .dayContainer,
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-days,
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-innerContainer {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* The highlighted row (28-31) gets gray background from Bootstrap inline style */
.wpb-booking-shortcode .calander-body .flatpickr-calendar .flatpickr-rContainer > div {
background: transparent !important;
}
/* ═══════════════════════════════════════════════════════════════
v20260530-2 CIRCLE FIX — overrides HIGH-SPECIFICITY squares
The section above forces background:#161616 + border-radius:6px
on day cells. This block comes after it and flips them to
transparent circles, matching the mockup exactly.
═══════════════════════════════════════════════════════════════ */
/* All day cells: transparent, no border, circle shape */
body .flatpickr-calendar .dayContainer .flatpickr-day,
body .flatpickr-calendar .flatpickr-days .flatpickr-day,
body .flatpickr-day {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
box-shadow: none !important;
border-radius: 50% !important;
color: rgba(255,255,255,0.7) !important;
outline: none !important;
}
/* Hover: gold tinted circle */
body .flatpickr-calendar .dayContainer .flatpickr-day:hover,
body .flatpickr-day:hover,
body .flatpickr-day:focus {
background: rgba(201,168,76,0.14) !important;
color: #D4AF37 !important;
border: none !important;
border-radius: 50% !important;
box-shadow: none !important;
outline: none !important;
}
/* Selected: solid gold circle */
body .flatpickr-calendar .dayContainer .flatpickr-day.selected,
body .flatpickr-day.selected,
body .flatpickr-day.selected:hover,
body .flatpickr-day.selected:focus {
background: #D4AF37 !important;
color: #000 !important;
font-weight: 700 !important;
border: none !important;
border-radius: 50% !important;
box-shadow: none !important;
}
/* Today (not selected): subtle gold outline */
body .flatpickr-calendar .dayContainer .flatpickr-day.today,
body .flatpickr-day.today {
background: transparent !important;
border: 1px solid rgba(201,168,76,0.45) !important;
color: rgba(201,168,76,0.9) !important;
border-radius: 50% !important;
}
body .flatpickr-day.today:not(.selected) { color: rgba(201,168,76,0.85) !important; }
/* Today AND selected: same as selected */
body .flatpickr-day.today.selected {
background: #D4AF37 !important;
border: none !important;
color: #000 !important;
font-weight: 700 !important;
}
/* Disabled / past: very dim, no shape */
body .flatpickr-calendar .dayContainer .flatpickr-day.flatpickr-disabled,
body .flatpickr-day.flatpickr-disabled,
body .flatpickr-day.flatpickr-disabled:hover {
background: transparent !important;
border: none !important;
color: rgba(255,255,255,0.2) !important;
cursor: default !important;
}
/* Other-month days */
body .flatpickr-calendar .dayContainer .flatpickr-day.prevMonthDay,
body .flatpickr-calendar .dayContainer .flatpickr-day.nextMonthDay,
body .flatpickr-day.prevMonthDay,
body .flatpickr-day.nextMonthDay {
background: transparent !important;
border: none !important;
color: rgba(255,255,255,0.18) !important;
}
/* Available WPBookit date: subtle gold ring via ::after (from tsi-booking.css)
Don't override the ::after here — just ensure the cell itself is transparent */
body .flatpickr-day.wpb-available {
background: transparent !important;
border: none !important;
}
/* ═══════════════════════════════════════════════════════════════
v20260530-2 EMBED MODE — flash kill for booking page in iframe
Applied inside tsi-embed-mode (booking page loaded as iframe)
═══════════════════════════════════════════════════════════════ */
/* Kill the Elementor right-side image column on booking pages in embed */
html.tsi-embed-mode .elementor-element-d498541 { display: none !important; }
html.tsi-embed-mode .elementor-element-5b947cd {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
/* WPBookit container fills viewport height */
html.tsi-embed-mode .wpb-shortcode-wrapper {
min-height: 100vh !important;
overflow: visible !important;
}
/* Remove Bootstrap mt-5 from the booking row */
html.tsi-embed-mode .wpb-booking-shortcode .row.mt-5 {
margin-top: 0 !important;
}
html.tsi-embed-mode .wpb-booking-shortcode .container,
html.tsi-embed-mode .wpb-booking-shortcode .container-fluid {
max-width: 100% !important;
padding: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
v20260530-3 RESPONSIVE — Prevent horizontal overflow at 1100-1200px
At these widths, the 1060px dialog + 80px padding = 1140px → overflow.
Reduce padding so dialog fits. Also handle the slots sub-text.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1160px) {
#tsi-booking-modal {
padding: 10px 14px !important;
}
#tsi-booking-dialog {
/* Allow dialog to shrink with viewport */
max-width: calc(100vw - 28px) !important;
}
}
@media (max-width: 960px) {
#tsi-booking-modal {
padding: 0 !important;
}
#tsi-booking-dialog {
max-width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
}
/* At 960px, left panel shrinks to fit */
#tsi-booking-left {
width: 240px !important;
min-width: 240px !important;
}
#tsi-booking-dialog {
grid-template-columns: 240px 1fr !important;
}
}
/* Prevent body from scrolling when modal is open — harder override */
html body.tsi-modal-open {
overflow: hidden !important;
max-height: 100vh !important;
}
/* Slots overlay — hide after program selected (via unlock CSS injection) */
/* This rule always hides when tsi-unlock-style is injected, but belt+suspenders: */
/* We also add this for the slots sub-text that says "Select a program & date first" */
/* ── SECTION HIDES (2026-05-30) ── */
/* Hide reviews/testimonials section - will re-enable later */
.elementor-element-d41a1ad {
display: none !important;
}
/* Belt+suspenders: also hide the testimonial widget itself */
.elementor-widget-elementskit-testimonial {
display: none !important;
}
/* Hide the section heading for testimonials */
.elementor-element-594341b {
display: none !important;
}
/* Hide Instagram/massage photo gallery section */
.elementor-element-cbb78a0 {
display: none !important;
}
/* Fix white ribbon: the Astra content area shows white between
Elementor content end and the footer. Kill it. */
#content,
#primary,
.ast-container,
.site-content-overlay,
.entry-content,
#main,
.ast-article-post,
body.home #content,
body.home #primary {
background: transparent !important;
background-color: transparent !important;
}
/* ── NAV: 6 columns when HOME is injected by JS ── */
#tsi-main-nav-updated { grid-template-columns: repeat(6, 1fr) !important; }
/* ── NAV FINAL 2026-05-30 v2: bigger font, even spacing, dynamic active ── */
#tsi-main-nav {
display: flex !important;
flex-direction: row !important;
justify-content: flex-end !important;
align-items: center !important;
height: 80px !important;
width: 100% !important;
padding: 0 20px 0 0 !important;
margin: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
gap: 0 42px !important;
}
#tsi-main-nav a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
flex: 0 0 auto !important;
width: auto !important;
height: 80px !important;
font-size: 16px !important;
letter-spacing: 0.14em !important;
color: rgba(255,255,255,0.80) !important;
text-decoration: none !important;
text-transform: uppercase !important;
font-family: "Tenor Sans", "Georgia", serif !important;
padding: 0 6px !important;
font-weight: 400 !important;
box-sizing: border-box !important;
position: relative !important;
transition: color 0.25s !important;
}
#tsi-main-nav a:hover {
color: rgba(255,255,255,1) !important;
}
/* Dynamic active-page underline: set by JS based on current URL */
#tsi-main-nav a.nav-active {
color: rgba(255,255,255,1) !important;
}
#tsi-main-nav a.nav-active::after {
content: "" !important;
position: absolute !important;
bottom: 18px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 40% !important;
height: 1.5px !important;
background: #D4AF37 !important;
}
/* BEGIN: CTA styling - gold tone, no page-underline */
#nav-begin {
color: rgba(212,184,122,0.90) !important;
font-weight: 500 !important;
letter-spacing: 0.20em !important;
}
#nav-begin:hover {
color: #D4AF37 !important;
}
/* Kill BEGIN underline from cached widget CSS - double ID beats single ID */
#nav-begin#nav-begin::after {
content: none !important;
display: none !important;
background: none !important;
}
/* ── HEADER CONTAINER FIX v2: d77a37f=logo area fixed width, 38dfed0=nav gets the rest ── */
/* d77a37f currently 1200px (flex-grow:1). Shrink to 220px for logo area. */
.elementor-element-d77a37f,
.elementor-element-d77a37f.e-con {
flex: 0 0 220px !important;
min-width: 220px !important;
max-width: 220px !important;
width: 220px !important;
--flex-grow: 0 !important;
--flex-shrink: 0 !important;
overflow: visible !important;
}
/* 7e4f250 is empty - collapse it */
.elementor-element-7e4f250,
.elementor-element-7e4f250.e-con {
flex: 0 0 0px !important;
width: 0px !important;
min-width: 0px !important;
max-width: 0px !important;
overflow: hidden !important;
padding: 0 !important;
}
/* 38dfed0 = nav, give it all remaining space */
.elementor-element-38dfed0,
.elementor-element-38dfed0.e-con {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
--flex-grow: 1 !important;
}
/* ── Force nav widget to fill full container width ── */
.elementor-element-38dfed0,
.elementor-element-38dfed0.e-con {
align-items: stretch !important;
align-content: stretch !important;
}
.elementor-element-38dfed0 .elementor-widget-container,
.elementor-element-38dfed0 .elementor-element,
.elementor-element-tsi_nav_html,
.elementor-element-tsi_nav_html .elementor-widget-container {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* ── HERO TEXT: push down 20% ── */
.elementor-element-264c101 {
padding-top: 80px !important;
}
/* ── Kill Astra white below-footer gap ── */
.site-below-footer-wrap,
.ast-builder-grid-row-container.site-footer-focus-item,
#ast-footer-overlay {
background: transparent !important;
background-color: transparent !important;
display: none !important;
}
/* ── FOOTER: reduced padding on main columns row ── */
.elementor-element-f3953f2,
.elementor-element-f3953f2.e-con {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* ── FOOTER COPYRIGHT BAR: copyright left, links right ── */
.elementor-element-c77a944,
.elementor-element-c77a944.e-con {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
}
/* Left-align copyright text */
.elementor-element-d7f2ef7,
.elementor-element-d7f2ef7 *,
.elementor-element-d7f2ef7 .cmsmasters-widget-title__heading {
text-align: left !important;
}
/* Privacy / Terms links (injected by JS) */
#tsi-footer-legal {
display: flex;
gap: 28px;
align-items: center;
padding-right: 80px;
flex-shrink: 0;
}
#tsi-footer-legal a {
font-size: 11px !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: #666 !important;
text-decoration: none !important;
transition: color 0.2s;
}
#tsi-footer-legal a:hover {
color: #D4AF37 !important;
}
/* ── BEGIN THE SHIFT: golden bordered button (high specificity) ── */
#tsi-main-nav #nav-begin {
border: 1px solid #D4AF37 !important;
padding: 0 22px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
line-height: 40px !important;
align-self: center !important;
display: inline-flex !important;
align-items: center !important;
color: #D4AF37 !important;
font-size: 13px !important;
letter-spacing: 0.16em !important;
white-space: nowrap !important;
transition: box-shadow 0.3s, background 0.3s, border-color 0.3s !important;
background: transparent !important;
margin-left: 8px !important;
position: relative !important;
flex-shrink: 0 !important;
}
#tsi-main-nav #nav-begin:hover {
background: rgba(212, 175, 55, 0.08) !important;
box-shadow: 0 0 20px rgba(212, 175, 55, 0.50), inset 0 0 10px rgba(212, 175, 55, 0.07) !important;
color: #E8C84A !important;
border-color: #E8C84A !important;
}
#tsi-main-nav #nav-begin::after,
#tsi-main-nav #nav-begin.nav-active::after {
content: none !important;
display: none !important;
background: none !important;
}
/* ── FOOTER: uniform font/size/color across all columns ── */
.elementor-element-3b2b421 a,
.elementor-element-9634034 a,
.elementor-element-f1dc4fc a,
.elementor-element-f1dc4fc p,
.elementor-element-f1dc4fc span,
.elementor-element-f1dc4fc .ekit-wid-con,
#tsi-ul-links a,
#tsi-svc-links a {
font-family: "Tenor Sans", Georgia, serif !important;
font-size: 15px !important;
font-weight: 400 !important;
letter-spacing: 0.06em !important;
color: #a8956e !important;
text-decoration: none !important;
line-height: 1.8 !important;
}
.elementor-element-3b2b421 a:hover,
.elementor-element-9634034 a:hover,
#tsi-ul-links a:hover,
#tsi-svc-links a:hover {
color: #D4AF37 !important;
}
/* ── FONT CONSISTENCY: Tenor Sans everywhere except Cormorant hero ── */
/* Footer column headings: Molengo → Tenor Sans */
.elementor-element-3b2b421 h3,
.elementor-element-9634034 h3,
.elementor-element-f1dc4fc h3,
.elementor-element-f1dc4fc h2,
.elementor-element-41ddd9a h3,
.ekit-wid-con h3,
.footer-heading {
font-family: "Tenor Sans", Georgia, serif !important;
font-weight: 400 !important;
letter-spacing: 0.12em !important;
}
/* Footer copyright: system font → Tenor Sans */
#tsi-copyright {
font-family: "Tenor Sans", Georgia, serif !important;
font-size: 12px !important;
letter-spacing: 0.06em !important;
}
/* BEGIN button: match nav size */
#tsi-main-nav #nav-begin {
font-size: 14px !important;
}
/* ── HOMEPAGE: Playfair Display headings (match Method page) ── */
.elementor-11 h1,
.elementor-11 h2,
.elementor-11 .elementor-heading-title,
.elementor-element-05f1e00 h1,
.elementor-element-05f1e00 h2,
.elementor-element-264c101 h1,
.elementor-element-264c101 h2 {
font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
}
/* ── GLOBAL: nav underline active uses crisp gold ── */
#tsi-main-nav a.nav-active::after {
background: #D4AF37 !important;
}
/* ── HERO: H1 must be white, only subtitle H2 is gold ── */
.elementor-element-264c101 h1,
.elementor-element-264c101 h1.elementor-heading-title {
color: rgba(255, 255, 255, 0.92) !important;
}
/* ── FOOTER column headings: keep crisp gold ── */
.elementor-element-3b2b421 h3,
.elementor-element-9634034 h3,
.elementor-element-f1dc4fc h3 {
color: #D4AF37 !important;
}
/* ── STICKY HEADER: transparent by default, dark on scroll ── */
.ekit-template-content-markup.ekit-template-content-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
background: transparent !important;
transition: background 0.3s ease, backdrop-filter 0.3s ease !important;
}
/* Dark background appears only after scrolling (class added by JS) */
.ekit-template-content-markup.ekit-template-content-header.tsi-nav-scrolled {
background: rgba(6, 6, 6, 0.97) !important;
backdrop-filter: blur(4px) !important;
}
/* padding-top removed: hero bleeds to y=0 under transparent nav */
/* Logo: constrain to nav ribbon height */
.elementor-element-d77a37f .elementor-widget-container img,
.elementor-element-af26ac7 img,
.hfe-site-logo-img {
max-height: 60px !important;
width: auto !important;
object-fit: contain !important;
}
/* ═══════════════════════════════════════════════════════════════════════
TSI DESIGN CONSISTENCY — 2026-05-30
Goals: unify with About page typography (Cormorant Garamond, #C9A84C,
white body text). Non-destructive: only overrides where values differ.
═══════════════════════════════════════════════════════════════════════ */
/* ── FIX 1: Display font — Cormorant Garamond everywhere ──────────────
Homepage used Playfair Display (different personality to About page).
Cormorant Garamond is the TSI display font. Keeping weight 300 for the
same flowing, light feel used on the About page headings. */
.elementor-heading-title,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
h4.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
letter-spacing: 0.03em !important;
}
/* ── FIX 2: Invisible dark text on dark background ────────────────────
Elementor sections using Tailwind slate-800 rgb(30,41,59) or
slate-700 rgb(51,65,85) on #080808 background — essentially invisible.
Replace with the warm off-white used across the site. */
.elementor-widget-text-editor *:not(a),
.elementor-widget-text-editor {
color: rgba(207, 192, 174, 0.9) !important;
}
h3.elementor-heading-title[style*="color"],
.elementor-heading-title[style*="30, 41, 59"],
.elementor-heading-title[style*="51, 65, 85"] {
color: rgb(207, 192, 174) !important;
}
/* Target inline-style dark text */
.elementor-element *[style*="color: rgb(30, 41, 59)"],
.elementor-element *[style*="color: rgb(51, 65, 85)"],
.elementor-element *[style*="color:#1e293b"],
.elementor-element *[style*="color: #1e293b"] {
color: rgba(207, 192, 174, 0.9) !important;
}
/* ── FIX 3: Gold — unify to #C9A84C ──────────────────────────────────
Homepage used #D4AF37 (standard antique gold, Elementor default).
TSI brand gold is #C9A84C. Two slightly different golds side-by-side
look inconsistent. Normalise everywhere. */
.elementor-element *[style*="color: rgb(212, 175, 55)"],
.elementor-element *[style*="color: rgb(201, 160, 78)"],
.elementor-heading-title[style*="color: rgb(212, 175, 55)"],
.elementor-heading-title[style*="color: rgb(201, 160, 78)"] {
color: #C9A84C !important;
}
/* ── FIX 4: Hero heading scale ────────────────────────────────────────
Homepage hero H1 was 56px. About page hero H1 is 88px (clamp).
Match it for visual consistency across pages. 62px minimum ensures
it never shrinks below the current 56px on small screens. */
.elementor-section:first-of-type .elementor-heading-title,
.elementor-section:nth-of-type(2) h1.elementor-heading-title,
.elementor-section:nth-of-type(2) h2.elementor-heading-title {
font-size: clamp(56px, 5.5vw, 80px) !important;
line-height: 1.12 !important;
}
/* ── Body text legibility baseline ────────────────────────────────────
Ensure Tenor Sans is the global body font to match About page. */
body,
body .elementor,
.elementor-widget-container,
.elementor-widget-text-editor p {
font-family: 'Tenor Sans', sans-serif;
}
/* ═══════════════════════════════════════════════════════════════
GOLD UNIFICATION v20260530n — widget-ID overrides
These 4 headings inherit #D4AF37 from explicit per-widget rules
earlier in this file (hero layout + footer column rules).
Override here to lock in #C9A84C.
Widgets: hero accent h2 (3d7212e), footer Useful links (a72ee7b),
Services (a192fdf), Reach Us (e145257).
═══════════════════════════════════════════════════════════════ */
.elementor-element-3d7212e .elementor-heading-title,
.elementor-element-3d7212e .elementor-heading-title *,
.elementor-element-a72ee7b .elementor-heading-title,
.elementor-element-a192fdf .elementor-heading-title,
.elementor-element-e145257 .elementor-heading-title {
color: #C9A84C !important;
}
/* ═══════════════════════════════════════════════════════════
BLOG ARCHIVE: equal-height cards, TSI brand styling
═══════════════════════════════════════════════════════════ */
/* Grid row: all 3 columns equal height */
.blog .ast-row,
.archive .ast-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
}
/* Each column stretches full height */
.blog .ast-grid-common-col,
.archive .ast-grid-common-col {
display: flex !important;
flex-direction: column !important;
}
/* The article itself fills the column */
.blog .ast-article-inner,
.archive .ast-article-inner {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
background: rgb(70,68,63) !important;
border: 1px solid rgba(201,168,76,0.22) !important;
border-radius: 10px !important;
overflow: hidden !important;
}
/* Post content area grows to fill remaining space */
.blog .ast-article-inner .post-content,
.archive .ast-article-inner .post-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
padding: 24px !important;
background: transparent !important;
}
/* Featured image: fixed ratio, no gap */
.blog .ast-blog-featured-section img,
.archive .ast-blog-featured-section img {
width: 100% !important;
height: 220px !important;
object-fit: cover !important;
display: block !important;
filter: brightness(1.15) contrast(1.05) !important;
}
/* Category label */
.blog .ast-posted-cat a,
.archive .ast-posted-cat a {
color: #C9A84C !important;
font-family: "Tenor Sans", Georgia, serif !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
/* Post title */
.blog .entry-title,
.archive .entry-title {
font-family: "Playfair Display", Georgia, serif !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
margin: 10px 0 12px !important;
}
.blog .entry-title a,
.archive .entry-title a {
color: #C9A84C !important;
text-decoration: none !important;
}
.blog .entry-title a:hover,
.archive .entry-title a:hover {
color: #C9A84C !important;
}
/* Author / date */
.blog .entry-meta,
.archive .entry-meta,
.blog .ast-blog-post-meta,
.archive .ast-blog-post-meta {
color: rgba(255,255,255,0.45) !important;
font-size: 12px !important;
letter-spacing: 0.06em !important;
margin-bottom: 10px !important;
}
.blog .entry-meta a,
.archive .entry-meta a {
color: rgba(255,255,255,0.45) !important;
text-decoration: none !important;
}
/* Excerpt */
.blog .entry-content,
.archive .entry-content {
color: rgba(255,255,255,0.65) !important;
font-size: 14px !important;
line-height: 1.65 !important;
flex: 1 !important;
}
.blog .entry-content p,
.archive .entry-content p {
color: rgba(255,255,255,0.65) !important;
}
/* Read more link */
.blog .read-more a,
.archive .read-more a,
.blog .ast-read-more,
.archive .ast-read-more {
color: #C9A84C !important;
font-size: 12px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.blog .read-more a:hover,
.archive .read-more a:hover {
color: rgba(255,255,255,0.9) !important;
}
/* ═══════════════════════════════════════════════════════════════
FEATURED BLOG CARD — homepage left column (96a7d97)
v20260531a
═══════════════════════════════════════════════════════════════ */
#tsi-featured-card {
display: block;
text-decoration: none;
margin-top: 28px;
background: #141414;
border: 1px solid rgba(201,168,76,0.22);
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease;
position: relative;
}
#tsi-featured-card:hover {
border-color: rgba(201,168,76,0.6);
}
#tsi-featured-card .tsi-fc-img-wrap {
width: 100%;
aspect-ratio: 16/10;
overflow: hidden;
position: relative;
}
#tsi-featured-card .tsi-fc-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
#tsi-featured-card:hover .tsi-fc-img-wrap img {
transform: scale(1.04);
}
#tsi-featured-card .tsi-fc-body {
padding: 22px 26px 28px;
border-top: 1px solid rgba(201,168,76,0.1);
}
#tsi-featured-card .tsi-fc-eyebrow {
font-family: 'Tenor Sans', sans-serif;
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #C9A84C;
display: block;
margin-bottom: 12px;
}
#tsi-featured-card .tsi-fc-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(19px, 2vw, 26px);
font-weight: 300;
line-height: 1.2;
color: rgba(255,255,255,0.9);
margin: 0 0 10px;
}
#tsi-featured-card .tsi-fc-date {
font-family: 'Tenor Sans', sans-serif;
font-size: 11px;
letter-spacing: 0.15em;
color: rgba(255,255,255,0.3);
display: block;
margin-bottom: 14px;
text-transform: uppercase;
}
#tsi-featured-card .tsi-fc-excerpt {
font-family: 'Tenor Sans', sans-serif;
font-size: 13px;
line-height: 1.8;
color: rgba(255,255,255,0.48);
margin: 0;
}
#tsi-featured-card .tsi-fc-read {
display: inline-block;
margin-top: 18px;
font-family: 'Tenor Sans', sans-serif;
font-size: 9px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #C9A84C;
opacity: 0.7;
transition: opacity 0.2s;
}
#tsi-featured-card:hover .tsi-fc-read { opacity: 1; }
/* ── Hide the secondary nav container (b2edff0) on desktop ── */
.elementor-element-b2edff0 {
display: none !important;
}
/* ── BLOG / ARCHIVE PAGES: push content below the 100px absolute header
with breathing room, so post cards don't sit behind the menu.
Only on no-hero list pages (blog, category, tag, author, search). ── */
body.blog #content,
body.archive #content,
body.search #content,
body.blog .site-content,
body.archive .site-content,
body.search .site-content {
padding-top: 150px !important;
}
/* ── BLOG CARDS: match homepage palette, kill default blue accent (rgb 4,107,210)
Real Astra classes: category bare , author .posted-by/.author-name, date .posted-on/.published ── */
.blog article .posted-on, .archive article .posted-on,
.blog article .published, .archive article .published,
.blog article .posted-by, .archive article .posted-by,
.blog article .author-name, .archive article .author-name,
.blog article .posted-by a, .archive article .posted-by a,
.blog article .ast-blog-single-element, .archive article .ast-blog-single-element {
color: #a8956e !important; /* muted warm taupe for author + date */
}
.blog article .posted-by a:hover, .archive article .posted-by a:hover { color: #C9A84C !important; }
/* category link (bare in the meta / terms area) -> gold */
.blog article .ast-terms-link a, .archive article .ast-terms-link a,
.blog article .cat-links a, .archive article .cat-links a,
.blog article .ast-blog-single-element.ast-terms-link a, .archive article .ast-blog-single-element.ast-terms-link a {
color: #C9A84C !important;
text-transform: uppercase !important;
letter-spacing: 0.16em !important;
font-size: 11px !important;
font-family: "Tenor Sans", Georgia, serif !important;
}
/* round the top of the featured image to match card radius */
.blog .ast-blog-featured-section, .archive .ast-blog-featured-section,
.blog .ast-blog-featured-section img, .archive .ast-blog-featured-section img {
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
}
/* ── SINGLE POST: gold banner bleeds up behind the transparent menu; breadcrumb
sits immediately below the nav (no extra black gap). Inset banner CONTENT only. ── */
body.single .elementor-element-521b424 {
padding-top: 70px !important;
}