.elementor-kit-1659{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-35dbea9:#D4AF50;--e-global-color-138b2da:#D4AF50;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-71eaaf1-font-family:"Roboto";--e-global-typography-71eaaf1-font-size:20px;--e-global-typography-71eaaf1-font-weight:600;}.elementor-kit-1659 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ======================================================= KASTHETIX BEAUTY — Complete Style Upgrade v2 Paste into: Elementor > Custom Code > Add New Set location to: | Entire Site REPLACE your previous CSS with this full version ======================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Raleway:wght@200;300;400;500&display=swap'); :root { --kx-gold: #BF9B30; --kx-gold2: #D4AF50; --kx-gold3: #E8CC80; --kx-golddim: #7A6218; --kx-pur: #4A0E8F; --kx-pur2: #7B35D4; --kx-pur3: #A86AEE; --kx-purdark: #1E0540; --kx-ink: #080510; --kx-deep: #0F0820; --kx-rich: #160D2E; --kx-velvet: #1C1238; --kx-smoke: #8A7FA8; --kx-cream: #F5EED8; } /* ── PAGE & BODY ──────────────────────────────────── */ body, .site, #page, #content, .site-content { background: var(--kx-ink) !important; color: rgba(255,255,255,.7) !important; font-family: 'Cormorant Garamond', serif !important; -webkit-font-smoothing: antialiased; } /* ── KILL THE GREY/WHITE BOXES IN HERO ────────────── */ /* This removes the semi-transparent grey overlay Elementor adds */ .elementor-section .elementor-column > .elementor-column-wrap, .elementor-column-wrap, .elementor-widget-wrap, .e-con-inner, .e-con { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Kill any inline background styles on columns */ .elementor-column[style*="background"], .elementor-col-100[style*="background"], .elementor-col-50[style*="background"], .elementor-col-33[style*="background"] { background: transparent !important; background-color: transparent !important; } /* The specific translucent container Elementor generates */ .elementor-section > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap { background-color: transparent !important; background-image: none !important; } /* ── HERO SECTION — DRAMATIC OVERLAY ─────────────── */ /* Add a rich dark purple vignette over the photo grid */ .elementor-section:first-of-type::before, .elementor-top-section:first-of-type::before, .elementor-section:first-child::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 65% 75% at 50% 50%, rgba(8,5,16,.05) 0%, rgba(30,5,64,.22) 55%, rgba(8,5,16,.48) 100%), linear-gradient(to bottom, rgba(8,5,16,.35) 0%, rgba(8,5,16,0) 20%, rgba(8,5,16,0) 70%, rgba(8,5,16,.45) 100%); } /* Push hero text ABOVE the overlay */ .elementor-section:first-of-type .elementor-widget-wrap, .elementor-top-section:first-of-type .elementor-widget-wrap, .elementor-section:first-child .elementor-widget-wrap { position: relative; z-index: 2; } /* Make sure hero section is positioned so ::before works */ .elementor-section:first-of-type, .elementor-top-section:first-of-type, .elementor-section:first-child { position: relative; overflow: hidden; } /* Gold art-deco line at very top of hero */ .elementor-section:first-of-type::after, .elementor-top-section:first-of-type::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--kx-gold), transparent); opacity: .5; z-index: 3; pointer-events: none; } /* ── HEADINGS ─────────────────────────────────────── */ h1, h2, h3, h4, .elementor-heading-title { font-family: 'Cinzel', serif !important; letter-spacing: .14em !important; line-height: 1.1 !important; } /* H1 — big hero title */ h1, .elementor-heading-title.elementor-size-xxl, .elementor-heading-title.elementor-size-xl { font-size: clamp(2.6rem, 6.5vw, 5.8rem) !important; font-weight: 400 !important; color: #fff !important; text-shadow: 0 0 120px rgba(74,14,143,.85), 0 0 50px rgba(74,14,143,.5), 0 2px 12px rgba(0,0,0,.95) !important; letter-spacing: clamp(.1em, .8vw, .2em) !important; line-height: 1.05 !important; } /* H2 — section headings like "Talk To Us", "Meet The Artist" */ h2, .elementor-heading-title.elementor-size-large { font-size: clamp(1.4rem, 3vw, 2.6rem) !important; font-weight: 400 !important; color: var(--kx-gold2) !important; letter-spacing: .18em !important; } /* H3 — service names like "Highlights & Hair Color" */ h3, .elementor-heading-title.elementor-size-medium { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-size: clamp(1.3rem, 1.8vw, 1.75rem) !important; font-weight: 400 !important; color: var(--kx-gold2) !important; letter-spacing: .04em !important; line-height: 1.2 !important; } /* H4 / small — eyebrow labels */ h4, .elementor-heading-title.elementor-size-small { font-family: 'Raleway', sans-serif !important; font-size: .62rem !important; font-weight: 300 !important; letter-spacing: .45em !important; text-transform: uppercase !important; color: var(--kx-gold) !important; line-height: 1.6 !important; } /* "Premium Hair Color" subtitle — should be elegant italic */ .elementor-heading-title[style*="Cormorant"], h2.elementor-heading-title + .elementor-heading-title { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-weight: 300 !important; letter-spacing: .08em !important; color: rgba(255,255,255,.72) !important; font-size: clamp(1rem, 2vw, 1.5rem) !important; } /* ── BODY TEXT ────────────────────────────────────── */ p, .elementor-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(.95rem, 1.2vw, 1.1rem) !important; font-weight: 300 !important; color: var(--kx-smoke) !important; line-height: 1.95 !important; } p strong, p b, .elementor-text-editor strong, .elementor-text-editor b { color: rgba(255,255,255,.88) !important; font-weight: 600 !important; } /* ── TAGLINE LINK (the "Where The Driven..." heading) ─ */ /* Remove the grey border box that was around it */ .elementor-widget-heading a, .elementor-heading-title a { font-family: 'Raleway', sans-serif !important; font-size: clamp(.54rem, .88vw, .72rem) !important; font-weight: 200 !important; letter-spacing: .38em !important; text-transform: uppercase !important; color: rgba(255,255,255,.5) !important; text-decoration: none !important; border: none !important; background: transparent !important; box-shadow: none !important; } /* The italic "DRIVEN" and "PAMPERED" words */ .elementor-widget-heading a em, .elementor-heading-title a em, .elementor-heading-title em { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-weight: 400 !important; color: var(--kx-gold3) !important; font-size: 1.35em !important; letter-spacing: .06em !important; text-transform: none !important; } /* ── ALL BUTTONS ──────────────────────────────────── */ .elementor-button, .elementor-button-wrapper .elementor-button, a.elementor-button, button.elementor-button, .elementor-widget-button a, .elementor-widget-button .elementor-button { font-family: 'Raleway', sans-serif !important; font-size: .62rem !important; font-weight: 400 !important; letter-spacing: .3em !important; text-transform: uppercase !important; color: #000 !important; background: linear-gradient(135deg, var(--kx-golddim) 0%, var(--kx-gold) 50%, var(--kx-gold2) 100%) !important; border: none !important; border-radius: 0 !important; padding: 15px 44px !important; box-shadow: 0 4px 28px rgba(191,155,48,.4) !important; transition: all .4s ease !important; display: inline-block !important; text-decoration: none !important; } .elementor-button:hover, a.elementor-button:hover, .elementor-widget-button .elementor-button:hover { background: linear-gradient(135deg, var(--kx-pur) 0%, var(--kx-pur2) 100%) !important; color: #fff !important; box-shadow: 0 4px 28px rgba(74,14,143,.55) !important; } /* ── NAV ──────────────────────────────────────────── */ .elementor-nav-menu a, .elementor-nav-menu--main .elementor-item, header nav a, .main-navigation a { font-family: 'Raleway', sans-serif !important; font-size: .6rem !important; font-weight: 400 !important; letter-spacing: .26em !important; text-transform: uppercase !important; color: rgba(255,255,255,.72) !important; transition: color .3s !important; } .elementor-nav-menu a:hover, .elementor-nav-menu--main .elementor-item:hover, header nav a:hover { color: var(--kx-gold2) !important; } /* Social icons in nav */ .elementor-social-icon, .elementor-widget-social-icons a { background: transparent !important; color: rgba(255,255,255,.45) !important; transition: color .3s !important; } .elementor-social-icon:hover, .elementor-widget-social-icons a:hover { background: transparent !important; color: var(--kx-gold2) !important; } /* ── SECTION BACKGROUNDS ──────────────────────────── */ /* Whole page gradient */ .elementor-section-wrap, #primary, .site-main, main, #content { background: linear-gradient( 180deg, var(--kx-ink) 0%, var(--kx-deep) 14%, var(--kx-rich) 32%, var(--kx-velvet) 56%, var(--kx-deep) 74%, var(--kx-rich) 88%, var(--kx-ink) 100% ) !important; } /* Force ALL section backgrounds to transparent so gradient shows */ .elementor-section, .elementor-top-section, .elementor-inner-section, .e-con, .e-con-full { background-color: transparent !important; background-image: none !important; } /* Kill inline background-color on all sections EXCEPT hero (which has bg photo) */ .elementor-section:not(:first-child)[style*="background-color"], .elementor-section:not(:first-child)[style*="background: rgb"], .elementor-section:not(:first-child)[style*="background:rgb"] { background-color: transparent !important; background-image: none !important; } /* ── IMAGES — melt into dark background ───────────── */ .elementor-widget-image img, .elementor-image img { filter: brightness(1.0) saturate(.95) !important; box-shadow: 0 20px 60px rgba(8,5,16,.75), 0 0 0 1px rgba(191,155,48,.08) !important; transition: filter .6s ease !important; display: block !important; } .elementor-widget-image:hover img { filter: brightness(.72) saturate(1.1) !important; } /* Photo bottom fade — makes image melt into dark bg */ .elementor-widget-image { position: relative !important; overflow: hidden !important; } .elementor-widget-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 42%; background: linear-gradient(to top, rgba(8,5,16,.9) 0%, rgba(30,5,64,.25) 55%, transparent 100%); pointer-events: none; z-index: 1; } /* ── DIVIDERS ─────────────────────────────────────── */ .elementor-divider-separator { background: linear-gradient(90deg, transparent, var(--kx-gold), transparent) !important; border: none !important; height: 1px !important; opacity: .6; } /* ── FOOTER ───────────────────────────────────────── */ footer, .site-footer, #colophon, .elementor-location-footer { background: var(--kx-ink) !important; position: relative; } footer::before, .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--kx-purdark), var(--kx-pur), var(--kx-gold), var(--kx-pur), var(--kx-purdark)); } footer a, footer p, .site-footer a, .site-footer p { font-family: 'Raleway', sans-serif !important; font-size: .55rem !important; letter-spacing: .18em !important; color: rgba(255,255,255,.25) !important; } footer a:hover, .site-footer a:hover { color: var(--kx-gold2) !important; } /* ── MOBILE ───────────────────────────────────────── */ @media (max-width: 767px) { h1, .elementor-heading-title.elementor-size-xxl, .elementor-heading-title.elementor-size-xl { font-size: clamp(2rem, 11vw, 3rem) !important; letter-spacing: .08em !important; } h2, .elementor-heading-title.elementor-size-large { font-size: clamp(1.3rem, 5vw, 1.9rem) !important; } .elementor-button, a.elementor-button, .elementor-widget-button .elementor-button { padding: 13px 28px !important; font-size: .58rem !important; letter-spacing: .22em !important; } p, .elementor-text-editor, .elementor-widget-text-editor p { font-size: 1rem !important; } } /* ── TABLET ───────────────────────────────────────── */ @media (max-width: 1024px) and (min-width: 768px) { h1, .elementor-heading-title.elementor-size-xxl { font-size: clamp(2.4rem, 6vw, 4.2rem) !important; } .elementor-button, a.elementor-button { padding: 14px 34px !important; } } /* ═══════════════════════════════════════════ PASTE THIS INTO YOUR EXISTING CUSTOM CODE Add it at the very bottom of your CSS This lets you set H1 color freely in Elementor or inline without the CSS overriding it ═══════════════════════════════════════════ */ /* Allow H1 to accept any color set directly in Elementor or inline */ h1, .elementor-heading-title.elementor-size-xxl, .elementor-heading-title.elementor-size-xl { color: inherit !important; text-shadow: 0 0 80px rgba(74,14,143,.7), 0 2px 12px rgba(0,0,0,.9) !important; } /* Gold — add CSS ID "gold-title" in Elementor Advanced tab */ #gold-title h1, #gold-title .elementor-heading-title { color: #DEB328 !important; } /* White — add CSS ID "white-title" in Elementor Advanced tab */ #white-title h1, #white-title .elementor-heading-title { color: #ffffff !important; } /* Purple — add CSS ID "purple-title" in Elementor Advanced tab */ #purple-title h1, #purple-title .elementor-heading-title { color: #7B35D4 !important; } /* Cream — add CSS ID "cream-title" in Elementor Advanced tab */ #cream-title h1, #cream-title .elementor-heading-title { color: #F5EED8 !important; }/* ═══════════════════════════════════════════ MOBILE DROPDOWN MENU FIX Add this to Elementor > Site Settings > Custom CSS ═══════════════════════════════════════════ */ /* Dark background behind mobile menu */ .elementor-nav-menu--dropdown, .elementor-nav-menu--dropdown.elementor-nav-menu__container, .elementor-nav-menu--indicator, nav.elementor-nav-menu--dropdown { background: #0D0810 !important; background-color: #0D0810 !important; } /* Make menu links visible in gold */ .elementor-nav-menu--dropdown a, .elementor-nav-menu--dropdown li a, .elementor-nav-menu--dropdown .elementor-item, .elementor-nav-menu--dropdown .elementor-sub-item { color: #D4AF50 !important; font-family: 'Raleway', sans-serif !important; font-size: .8rem !important; font-weight: 400 !important; letter-spacing: .25em !important; text-transform: uppercase !important; padding: 16px 24px !important; border-bottom: 1px solid rgba(212,175,80,.12) !important; background: transparent !important; } /* Hover state */ .elementor-nav-menu--dropdown a:hover, .elementor-nav-menu--dropdown .elementor-item:hover { color: #ffffff !important; background: rgba(74,14,143,.4) !important; } /* The X close button */ .elementor-menu-toggle { background: #4A0E8F !important; color: #D4AF50 !important; } .elementor-menu-toggle i, .elementor-menu-toggle svg { color: #D4AF50 !important; fill: #D4AF50 !important; } /* Hamburger bars color */ .elementor-menu-toggle .eicon-menu-bar, .elementor-menu-toggle .eicon-close { color: #D4AF50 !important; }/* End custom CSS */