/**********************************************/ /* */ /* Theme Name: Pixelfox */ /* Author: Pixelfox */ /* Version: 10.0 */ /* Light Mode */ /* */ /**********************************************/ @import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Metal&family=Paytone+One&family=Shrikhand&family=Space+Grotesk:wght@300..700&display=swap'); /* ================================================ BACKGROUND COLOURS & GRADIENTS ================================================ */ /* Calendly Colours */ iframe { filter: invert(4.7%); } /* Purple Cream Row */ .purple-cream-row { background: linear-gradient(45deg, #EFEFFF 0%, #F9F7F2 100%); } /* Blue Grey Row */ .blue-grey-row { background: radial-gradient(ellipse at center, #E8F0FE 0%, #F3F3F3 80%); } /* Green Grey Row */ .green-grey-row { background: radial-gradient(ellipse at center, #F3F3F3 0%, #F3F3F3 80%); } /* Pink Grey Row */ .pink-grey-row { background: radial-gradient(ellipse at center, #FEEBE8 0%, #F3F3F3 80%); } /* Grey Row */ .grey-row { background: #F3F3F3; } /* Orange Row */ .orange-row .adv-bg-image { background: #FE5100; } /* Purple Row */ .purple-row { background: #5100FE; } /* Blue Row */ .blue-row .adv-bg-image { background: #01AEFF; } /* Orange Glow */ .orange-glow-row { background: radial-gradient(40% 50% at center bottom, #FE5100, #FFFFFF); border: solid 1px #FE5100; } /* Light Grey Bubbles Row */ .light-grey-bubbles-row { background-image: url('/wp-content/uploads/pf-assets/images/light-grey-bubbles.webp') !important; background-repeat: repeat; background-size: 100px 100px; } /* Topography Row */ /* Light Mode */ .topography-row { background: #F3F3F3; background-image: url("/wp-content/uploads/pf-assets/images/topography-light-mode.webp") !important; background-repeat: repeat; background-size: 600px 600px; } /* Purple Glow Row */ .purple-glow-row { background: radial-gradient(40% 20% at center bottom, rgba(81, 0, 254, 0.2) 2%, rgba(243, 243, 243, 1)) !important; } /* ================================================ TYPOGRAPHY ================================================ */ /* ---------------------------------------- CSS Variables for Global Control ---------------------------------------- */ :root { --heading-color: #000000 !important; --font-family-heading: 'Merriweather', serif; } /* ---------------------------------------- Global Heading Reset & Shared Styles ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-family: var(--font-family-heading); margin-top: 0; /* Prevents widows (single words on a new line) in modern browsers */ text-wrap: balance; } /* ---------------------------------------- Fluid Sizing & Specific Styles Using clamp(MIN, PREFERRED, MAX) ---------------------------------------- */ h1 { /* Scales from 36px (2.25rem) on mobile to 56px (3.5rem) on desktop */ font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); font-weight: 400; line-height: 1.1; margin-bottom: 0.5em; } h2 { /* Scales from 28px (1.75rem) to 40px (2.5rem) */ font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); font-weight: 400; line-height: 1.2; margin-top: 1.5em; margin-bottom: 0.5em; } h3 { /* Scales from 24px (1.5rem) to 32px (2rem) */ font-size: clamp(1.5rem, 2.5vw + 1rem, 2rem); font-weight: 400; line-height: 1.3; margin-top: 1.5em; margin-bottom: 0.5em; } h4 { /* Scales from 20px (1.25rem) to 24px (1.5rem) */ font-size: clamp(1.25rem, 2vw + 1rem, 1.5rem); font-weight: 400; line-height: 1.4; margin-top: 1.5em; margin-bottom: 0.5em; } h5 { /* Static size: 18px (1.125rem) */ font-size: 1.125rem; font-weight: 400; line-height: 1.5; margin-top: 1.5em; margin-bottom: 0.5em; } h6 { /* Static size: 16px (1rem). Styled as an eyebrow or label */ font-size: 1rem; font-weight: 400; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.05em; color: #4B5563; /* Slightly lighter gray to denote lower hierarchy */ margin-top: 1.5em; margin-bottom: 0.5em; } body p { color: unset !important; } .info-banner-card-content p { color: #000000 !important; } .info-banner-card-content h3 { color: #000000 !important; } .info-banner-card-content h4 { color: #000000 !important; } /* Content Page Heading */ .content-page-hero-text .pf-title { font-family: "Caprasimo", serif !important; font-size: clamp(2.25rem, 4vw + 1rem, 5.5rem) !important; font-weight: 400; font-style: normal; line-height: normal; text-align: center; color: #FFFFFF; /*-webkit-text-stroke: 10px #F3F3F3; paint-order: stroke fill;*/ } /* ================================================ ELEMENTS ================================================ */ /* Logo Scroller */ .logo-scroller { /*background: #F9F7F2;*/ background: #F3F3F3; } /* Info Cards */ .info-banner-card { background: #FFFFFF; /*box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 1), inset 2px 2px 5px rgba(70, 70, 70, 0.2);*/ } .info-banner-card h3 { color: #000000; } .info-banner-card h4 { color: #FE5100 !important; } .info-banner-card p { color: #000000; } .info-banner-card-grey { background: #F3F3F3; /*box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 1), inset 2px 2px 5px rgba(70, 70, 70, 0.2);*/ } /* Orange Glow Info Banner with Image */ .info-banner-card-orange-glow { background: radial-gradient(40% 50% at center bottom, rgba(254, 81, 0, 0.5) 2%, rgba(1, 174, 255, 0)) !important; border: solid 1px #FE5100 !important; } /* Put the image on the left 50% */ .info-banner-card-orange-glow .pf-img-wrapper { width: 50% !important; right: 0 !important; left: auto !important; } /* Constrain the text to the right 50% */ .info-banner-card-orange-glow .pf-info-wrapper { width: 50% !important; align-self: flex-start !important; /* Pushes the text block to the right */ } /* Typography */ .info-banner-card-orange-glow .pf-title { color: #FE5100; font-weight: 800; } .info-banner-card-orange-glow .pf-title-2 { color: #000000; font-weight: 200; font-size: 25px; } /* ================================================ ADVERTISING BANNERS ================================================ */ /* --- 1. GLOBAL STYLES (Colors & Typography) --- */ /* Orange Glow */ .info-banner-card-orange-glow { background: radial-gradient(40% 50% at center bottom, rgba(254, 81, 0, 0.5) 2%, rgba(1, 174, 255, 0)) !important; border: solid 1px #FE5100 !important; } .info-banner-card-orange-glow .pf-title { color: #FE5100; font-weight: 800; } .info-banner-card-orange-glow .pf-title-2 { color: #000000; font-weight: 200; font-size: 25px; } /* Purple Glow */ .info-banner-card-purple-glow { background: radial-gradient(40% 50% at center bottom, rgba(81, 0, 254, 0.5) 2%, rgba(1, 174, 255, 0)) !important; border: solid 1px #5100FE !important; } .info-banner-card-purple-glow .pf-title { color: #5100FE; font-weight: 800; } .info-banner-card-purple-glow .pf-title-2 { color: #000000; font-weight: 200; font-size: 25px; } /* Blue Glow */ .info-banner-card-blue-glow { background: radial-gradient(40% 50% at center bottom, rgba(1, 174, 255, 0.5) 2%, rgba(1, 174, 255, 0)) !important; border: solid 1px #01AEFF !important; } .info-banner-card-blue-glow .pf-title { color: #01AEFF; font-weight: 800; } .info-banner-card-blue-glow .pf-title-2 { color: #000000; font-weight: 200; font-size: 25px; } .info-banner-australia-image img[src*="australia-white-outline.png"] { filter: invert(100%); } .contact-banner { background-image: url('/wp-content/uploads/pf-assets/images/map-light-mode.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Rolling text hover effect - START */ .roll-hover { cursor: pointer; text-decoration: none; color: inherit; } .char { position: relative; display: inline-block; overflow: hidden; white-space: pre; } .char::before, .char::after { content: attr(data-char); position: absolute; top: 0; left: 0; transition: transform 0.2s cubic-bezier(0.5, 0, 0.2, 1); /* We use the CSS variable created by the Javascript. This completely eliminates the need for nth-child lists! */ transition-delay: var(--delay); } .char::after { top: 100%; } .roll-hover:hover .char::before, .roll-hover:hover .char::after { transform: translateY(-100%); } .my-link { color: #3b82f6; font-size: 1.2rem; font-weight: bold; } /* Rolling text hover effect - END */ /* Glass Card */ .glass-card { /* From https://css.glass */ background: rgba(255, 255, 255, 0.2); border-radius: 30px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.6px); -webkit-backdrop-filter: blur(8.6px); border: 1px solid rgba(255, 255, 255, 0.3); } /* ================================================ NAVIGATION ================================================ */ /* Menu Bar --------------------------------------------- */ /* Normal Bar --------------------------------------------- */ .navbar-default { border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-left-radius: 30px !important; border-bottom-right-radius: 30px !important; } #ttr_menu { max-width: 1000px !important; /* Adjust this to match your site's main content width */ } @supports ((-webkit-backdrop-filter: saturate(180%) blur(10px)) or (backdrop-filter: saturate(180%) blur(10px))) { #ttr_menu nav.navbar-default.navbar-expand-md.navbar { background: rgba(255,255,255,1); /*-webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); background-clip: padding-box;*/ -webkit-box-shadow: 0px 0px 0px 0px rgba(117,117,117,0.4); -moz-box-shadow: 0px 0px 0px 0px rgba(117,117,117,0.4); box-shadow: 0px 0px 0px 0px rgba(117,117,117,0.4); -webkit-transition: all 0.0s ease-in-out; -moz-transition: all 0.0s ease-in-out; -o-transition: all 0.0s ease-in-out; transition: all 0.0s ease-in-out; } } /* Sticky Bar --------------------------------------------- */ /* Target the fixed menu to remove full-width stretch and center it */ .fixed-top { left: auto !important; /* Prevents it from stretching to the left edge */ right: auto !important; /* Prevents it from stretching to the right edge */ margin-left: auto !important; /* Centers the element horizontally */ margin-right: auto !important; /* Centers the element horizontally */ width: 100%; /* Optional: Use a specific width (e.g., 1200px) if you want it narrower than the screen */ max-width: 1200px !important; /* Adjust this to match your site's main content width */ position: fixed !important; /* Keeps it sticky */ /* Ensure it remains centered regardless of screen width */ left: 50% !important; transform: translateX(-50%) !important; } @keyframes dynamic-margin { from { margin-top: 10px; } to { margin-top: 0px; } } #ttr_menu.fixed-top nav.navbar-default.navbar-expand-md.navbar { animation: dynamic-margin linear both; animation-timeline: scroll(root); animation-range: 0px 10px; -webkit-box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); -moz-box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); } /* Menu Bar Scoops --------------------------------------------- */ /* Scoop: Left */ .navbar-default::before { content: "" !important; position: absolute !important; top: 0 !important; left: -30px !important; /* Positioned exactly to the left */ width: 30px !important; height: 30px !important; /* Center the transparent circle at the BOTTOM-LEFT. This leaves a smooth, concave white flare at the top-right. */ background-image: radial-gradient(circle at 0% 100%, transparent 29.5px, #ffffff 30px) !important; background-color: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; pointer-events: none !important; } /* Scoop: Right */ .navbar-default::after { content: "" !important; position: absolute !important; top: 0 !important; right: -30px !important; /* Positioned exactly to the right */ width: 30px !important; height: 30px !important; /* Center the transparent circle at the BOTTOM-RIGHT. This leaves a smooth, concave white flare at the top-left. */ background-image: radial-gradient(circle at 100% 100%, transparent 29.5px, #ffffff 30px) !important; background-color: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; pointer-events: none !important; } /* Scoop: Left - Sticky */ #ttr_menu.fixed-top .navbar-default::before { content: "" !important; position: absolute !important; top: 0 !important; left: -30px !important; width: 30px !important; height: 30px !important; background-image: radial-gradient(circle at 0% 100%, transparent 29.5px, #ffffff 30px) !important; /* Use filter instead of box-shadow to follow the curve */ filter: drop-shadow(-3px 0px 1px rgba(117, 117, 117, 0.4)) !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; pointer-events: none !important; } /* Scoop: Right - Sticky */ #ttr_menu.fixed-top .navbar-default::after { content: "" !important; position: absolute !important; top: 0 !important; right: -30px !important; width: 30px !important; height: 30px !important; background-image: radial-gradient(circle at 100% 100%, transparent 29.5px, #ffffff 30px) !important; /* Mirror the shadow for the right side */ filter: drop-shadow(3px 0px 1px rgba(117, 117, 117, 0.4)) !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; pointer-events: none !important; } /* Menu CTA Button --------------------------------------------- */ /* The Base State */ .menu-book-a-call a { color: #FFFFFF !important; background-color: #FE5100 !important; border-color: #FE5100 !important; border-radius: 21px !important; padding-left: 20px !important; padding-right: 20px !important; transition: transform .2s cubic-bezier(.165, .84, .44, 1) !important; transition-behavior: normal !important; display: inline-block !important; } .menu-book-a-call:hover a, .menu-book-a-call a:hover { background-color: #01AEFF !important; border-color: #01AEFF !important; transform: scale(1.05) translateZ(0) !important; } /* Menu Logo */ #ttr_menu .ttr_menu_logo { margin-left: 12px; } #ttr_menu nav.navbar-default.navbar-expand-md.navbar .ttr_menu_logo img { content:url('/wp-content/uploads/pf-assets/images/menu-logo-black.png'); height: 34px; width: 142px; margin-top: 4px; vertical-align: middle !important; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* Menu Items */ /* Desktop */ /* Menu Item Descriptions */ .menu-subtitle { display: block; font-size: 11px; color: #666666; font-weight: normal; text-transform: none; line-height: 1.2; width: max-content; max-width: 40ch; display: block; white-space: normal; margin-left: 35px; } /* Single link */ /* Normal */ .nav.ttr_menu_items li a.ttr_menu_items_parent_link, .nav.ttr_menu_items li a.ttr_menu_items_parent_link_active, .nav.ttr_menu_items li a.ttr_menu_items_parent_link_arrow { transition: color 0.3s ease !important; } /* Hover */ #ttr_menu ul.nav.ttr_menu_items li:hover > a { } /* Active */ .nav.ttr_menu_items li.active a, .nav.ttr_menu_items li a.ttr_menu_items_parent_link_active { } /* Dropdown link */ /* Hide default arrow */ .nav.ttr_menu_items li a.ttr_menu_items_parent_link_arrow, #ttr_menu .navbar-default ul.nav.ttr_menu_items li a.ttr_menu_items_parent_link_arrow { background-image: none !important; padding-right: 10px; } /* Drop Down Arrow */ .navbar-default .nav.ttr_menu_items li a.ttr_menu_items_parent_link_arrow span.menuarrowicon { content: url(/wp-content/uploads/pf-assets/images/menu-arrow-down-black.png); width: 10px; height: 10px; margin-left: 10px; margin-bottom: 2px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .navbar-default .nav.ttr_menu_items li:hover a.ttr_menu_items_parent_link_arrow span.menuarrowicon { content: url(/wp-content/uploads/pf-assets/images/menu-arrow-down-orange.png); width: 10px; height: 10px; margin-left: 10px; margin-bottom: 2px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* Mega Menu */ /* Sub Menu Heading */ /* Heading General */ .pf-mega-menu-heading { } .pf-mega-menu-heading:hover { } /* Mega Menu Heading Background */ .navbar-default .ttr_menu_items.nav li ul.child li.neo-mega-menu-heading-malvern-central a.subchild, #ttr_menu nav.navbar .ttr_menu_items.nav li ul.child li.neo-mega-menu-heading-malvern-central > a.subchild { color: #000000 !important; cursor: default !important; } /* Mega Menu Heading Text Normal */ .navbar-default .ttr_menu_items.nav li ul.child li a.subchild, #ttr_menu nav.navbar .ttr_menu_items.nav li ul.child li > a.subchild.pf-mega-menu-heading { text-align: left !important; font-weight: 800 !important; cursor: default !important; } /* Mega Menu Heading Text Hover */ .navbar-default .ttr_menu_items.nav li ul.child li a.subchild:hover, #ttr_menu nav.navbar .ttr_menu_items.nav li ul.child li > a.subchild.pf-mega-menu-heading:hover { color: #000000 !important; cursor: default !important; } /* Target the links when the parent column is hovered */ .navbar-default .ttr_menu_items.nav li ul.child li:hover a.subchild, #ttr_menu nav.navbar .ttr_menu_items.nav li ul.child li:hover > a.subchild.pf-mega-menu-heading { color: #000000 !important; cursor: default !important; } /* Neutralize the theme's native right-alignment on hover */ #ttr_menu .nav.ttr_menu_items li:hover ul.child, #ttr_menu .navbar-right.ttr_menu_items li:hover ul.child { right: auto !important; } /* Force the dropdown to absorb padding so it stays exactly the set width */ #ttr_menu .nav.ttr_menu_items li ul.child { white-space: normal !important; } /* Guarantee the top menu items remain the strict anchor point for the math */ #ttr_menu .nav.ttr_menu_items > li { position: relative !important; } /* ================================================ LAYOUT & CONTAINERS ================================================ */ /* Disable "Edit this" link on frontend */ .edit-link { display: none; } /* HERO - Homepage */ /* Margins */ .hero-homepage-city { margin: -140px 2px 0px 2px; } /* Sky */ .hero-homepage-sky .adv-bg-image { background-image: url('/wp-content/uploads/pf-assets/images/melbourne-sky-day.webp') !important; filter: brightness(1); } /* City */ /*.hero-homepage-city img.pixelfox-img-inner { content: url('/wp-content/uploads/pf-assets/images/melbourne-city-day.webp') !important; }*/ .home-hero-grid-banner { display: grid; width: calc(100% - 5px); margin-left: 3px; /* 1. The Safety Net: Hides anything that tries to break out */ overflow: hidden; } .home-hero-grid-banner-img { content: url("/wp-content/uploads/pf-assets/images/melbourne-city-day.webp"); filter: brightness(1); width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; /* 2. The Fixes: Locks down the image size */ display: block; /* Removes phantom inline spacing (often ~4px) */ max-width: 100%; /* Prevents the image from exceeding the container */ min-width: 0; /* Tells CSS Grid it's allowed to shrink the image */ } .home-hero-grid-banner-content { grid-area: 1 / 1; z-index: 1; display: flex; justify-content: center; align-items: center; } .home-hero-grid-banner-content h1 { font-family: "Caprasimo", serif !important; font-size: clamp(1rem, 4vw + 1rem, 5.5rem) !important; font-weight: 400; font-style: normal; text-align: center; color: #F3F3F3; -webkit-text-stroke: 10px #000000; paint-order: stroke fill; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.2); margin-top: 250px; } /* HERO - Content Pages */ /* Background image */ .hero-content-page-bg .adv-bg-image { /*background-image: url('/wp-content/uploads/pf-assets/images/melbourne-sky-day.webp') !important; background-image: linear-gradient(45deg, #EEE9DB 0%, #EEE9DB 100%) !important; background-image: linear-gradient(45deg, #F3F3F3 0%, #F3F3F3 100%) !important; box-shadow: inset 0 0 20px 5px #E2E2E2;*/ } .hero-content-page-bg { background: linear-gradient(-45deg, #FE5100, #5100FE, #01AEFF); background-size: 300% 300%; animation: gradientShift 10s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Scrolling Text */ /* Wrapper */ .hero-homepage-text-scroller { margin-left: 2px !important; width: 99.7% !important; } /* Light Mode */ body.pf-mode-light #hero-homepage-text .pf-text-content { font-size: 3.5vw !important; padding-right: 0.5em; /* Adjust to fit the overhanging character */ box-sizing: border-box; /* Ensures padding doesn't expand the element's total width */ color: #000000; } /* Dark Mode */ body.pf-mode-dark #hero-homepage-text .pf-text-content { font-size: 3.5vw !important; padding-right: 0.5em; /* Adjust to fit the overhanging character */ box-sizing: border-box; /* Ensures padding doesn't expand the element's total width */ color: #FFFFFF; } /* ================================================ FOOTER ================================================ */ #footer-inner-row { max-width: 1200px; width: auto; margin: auto; } .footerCustomBackground { background: #F3F3F3; } .footer-info-banner-card h3 { color: #FE5100 !important; /*font-family: Roboto;*/ font-size: 23px; font-weight: 300; text-align: left; } .footer-info-banner-card a { color: #F5F5F7 !important; font-family: Roboto; font-weight: 400; text-decoration: none; font-size: 12px; text-align: left; } .footer-info-banner-card a:hover { color: #FE5100 !important; font-family: Roboto; font-weight: 400; text-decoration: none; font-size: 12px; text-align: left; } .footer-info-banner-card a:active { color: #F5F5F7 !important; font-family: Roboto; font-weight: 400; text-decoration: none; font-size: 12px; text-align: left; } .footer-info-banner-card a:visited { color: #F5F5F7 !important; font-family: Roboto; font-weight: 400; text-decoration: none; font-size: 12px; text-align: left; } .footer-info-banner-card p { color: #F5F5F7 !important; font-family: Roboto; font-weight: 400; text-decoration: none; font-size: 12px; text-align: left; } .footer-info-banner-card p a { color: #F5F5F7 !important; font-family: Roboto; font-weight: 400; text-decoration: none; font-size: 12px; text-align: left; } .footer-custom-separator-line { border: 0; height: 0; border-top: 1px solid #F5F5F7; border-bottom: 1px solid rgba(0,0,0,0.88); max-width: 1200px; margin: auto; } .australia-container { display: flex; /* Enables Flexbox */ align-items: center; /* Vertically centers content */ justify-content: left; gap: 15px; /* Adds space between image and text */ } .australia-text-content { display: flex; flex-direction: column; /* Stacks the two lines */ justify-content: center; /* Ensures vertical alignment within the block */ color: #F5F5F7; font-size: 10px; } .australia-text-content p { margin: 0; /* Removes default paragraph spacing */ color: #F5F5F7; font-size: 10px; } .client-partners-verified-container { display: flex; justify-content: left; } /* ================================================ FORMLAYER CONTACT FORM ================================================ */ /* 1. Main Form Container (Background, padding, border) */ #formlayer-form-521 { background-color: rgba(0, 0, 0, 0); padding: 0px; border-radius: 8px; /*border: 1px solid #e5e5e5;*/ } /* 2. Spacing between individual fields */ #formlayer-form-521 .formlayer-field-wrap { margin-bottom: 20px; } /* 3. Main Labels (Name, Email Address, etc.) */ #formlayer-form-521 .formlayer-label { display: block; font-size: 18px; font-weight: 400; color: #000000; margin-bottom: 8px; } #formlayer-form-521 .formlayer-sub-label { display: none !important; } /* 4. Required Asterisk (*) */ #formlayer-form-521 .required-indicator { color: #e74c3c; /* Red color for asterisk */ margin-left: 4px; } /* 5. Name Field Grid (First & Last name side-by-side) */ #formlayer-form-521 .formlayer-name-fields-wrap { display: flex; gap: 15px; /* Space between first and last name */ } #formlayer-form-521 .formlayer-sub-field { flex: 1; /* Makes both fields take up equal width */ } /* 6. Input Fields & Textarea (The actual boxes you type in) */ #formlayer-form-521 .formlayer-input { width: 100%; padding: 12px 15px; font-size: 15px; color: #000000; background-color: #fff; border: 1px solid #C7C7C7; border-radius: 15px; transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* 7. Input Fields - Focus State (When a user clicks inside to type) */ #formlayer-form-521 .formlayer-input:focus { border-color: #33abdc; box-shadow: 0 0 5px rgba(51, 171, 220, 0.3); outline: none; } /* 8. Sub-labels (e.g., the tiny "First Name" text below the input) */ #formlayer-form-521 .formlayer-sub-label { display: block; font-size: 12px; color: #777777; margin-top: 5px; } /* 9. Textarea Specific Styling (Message box) */ #formlayer-form-521 textarea.formlayer-input { resize: vertical; /* Allows the user to make the box taller, but not wider */ min-height: 120px; } /* 10. Status Message (Success or Error alerts) */ #formlayer-form-521 .formlayer-form-status { /* Usually hidden until submission. Style as needed */ padding: 10px; border-radius: 4px; margin-bottom: 15px; } /* 11. Submit Button Wrapper (Alignment) */ #formlayer-form-521 .formlayer-submit-wrap { margin-top: 25px; text-align: left; /* Change to 'center' or 'right' if needed */ } /* ================================================ RESPONSIVE ================================================ */ /* --- COMPUTER --- */ @media (min-width: 1200px) { /* Menu Dropdown */ /* Dropdown Container */ /* Dropdown menu styling */ .dropdown-menu { background-color: rgba(255,255,255,1) !important; border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; padding: 20px 0px 20px 0px !important; } /* Dropdown menu location */ #ttr_menu .nav.ttr_menu_items li ul.child { /* 1. Keep your original vertical properties */ top: 70px !important; display: block; visibility: hidden; opacity: 0; transition: all 0.3s ease; -webkit-box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); -moz-box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); text-align: center !important; /* 2. Keep the max-width sizing */ width: 100vw !important; max-width: 1000px !important; /* Note: The 'left' property has been completely removed! */ } /* Mega Menu Columns */ #ttr_menu .nav.ttr_menu_items li ul.child > li { display: inline-block !important; /* Allows them to sit side-by-side and obey text-align */ float: none !important; /* Disables standard left-floating if your theme uses it */ text-align: left !important; /* Re-aligns the actual links/text inside the column back to the left */ vertical-align: top !important; /* Ensures all columns align neatly at the top edge */ background: #FFFFFF; background: linear-gradient(180deg, #FFFFFF, #FFFFFF); border-radius: 20px; margin-left: 10px; margin-right: 10px; padding: 10px; } /* Remove the left margin from the very first column */ #ttr_menu .nav.ttr_menu_items li ul.child > li:first-child { margin-left: 0 !important; } /* Remove the right margin from the very last column */ #ttr_menu .nav.ttr_menu_items li ul.child > li:last-child { margin-right: 0 !important; } /* The NEW Invisible Bridge attached to the parent li */ #ttr_menu .nav.ttr_menu_items li::after { content: ""; position: absolute; left: 0; bottom: -70px; width: 100%; height: 70px; background: transparent; display: none !important; /* NEW: Keeps the bridge hidden initially */ } /* 2. Lower the bridge ONLY when the actual menu item is hovered */ #ttr_menu .nav.ttr_menu_items li:hover::after { display: block !important; } /* Define the Bounce Animation */ @keyframes menuBounce { 0% { opacity: 0; transform: translateY(-20px) scaleY(0.8); } 30% { opacity: 1; /* Hits full visibility quickly to block background images */ } 70% { transform: translateY(10px) scaleY(1.05); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } } /* Trigger the animation on hover */ #ttr_menu .nav.ttr_menu_items li:hover ul.child { visibility: visible; opacity: 1; animation: menuBounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } /* Dropdown Menu Items */ /* Menu item background */ .ttr_menu_items li ul.child li a { background: rgba(255,255,255,0) !important; } /* Items */ .ttr_menu_items.nav li > a.subchild.subchild, .ttr_menu_items.nav li ul.child li > a { color: #000000 !important; padding-left: 0px !important; padding-top: 5px !important; padding-bottom: 5px !important; } /* Items hover */ .ttr_menu_items.nav li:hover > a.subchild.subchild, .ttr_menu_items.nav li ul.child li:hover > a { color: #FE5100 !important; } /* ================================================ ADVERTISING BANNERS ================================================ */ /* Side-by-Side Layout */ /* Put image on the right */ .info-banner-card-orange-glow .pf-img-wrapper, .info-banner-card-purple-glow .pf-img-wrapper, .info-banner-card-blue-glow .pf-img-wrapper { width: 50% !important; right: 0 !important; left: auto !important; } /* Put text on the left */ .info-banner-card-orange-glow .pf-info-wrapper, .info-banner-card-purple-glow .pf-info-wrapper, .info-banner-card-blue-glow .pf-info-wrapper { width: 50% !important; align-self: flex-start !important; } } /* --- BETWEEN DESKTOP AND TABLET --- */ @media (min-width: 992px) and (max-width: 1199px) { /* Menu */ /* Menu Bar */ #ttr_menu { width: calc(100vw - 180px) !important; /* Adjust this to match your site's main content width */ max-width: calc(100vw - 180px) !important; /* Adjust this to match your site's main content width */ } #ttr_menu.fixed-top { width: calc(100vw - 180px) !important; /* Adjust this to match your site's main content width */ max-width: calc(100vw - 180px) !important; /* Adjust this to match your site's main content width */ } /* Menu Dropdown */ /* Dropdown Container */ /* Dropdown menu styling */ .dropdown-menu { background-color: rgba(255,255,255,1) !important; border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; padding: 20px 0px 20px 0px !important; } /* Dropdown menu location */ #ttr_menu .nav.ttr_menu_items li ul.child { /* 1. Keep your original vertical properties */ top: 70px !important; display: block; visibility: hidden; opacity: 0; transition: all 0.3s ease; -webkit-box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); -moz-box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); text-align: center !important; /* 2. Keep the max-width sizing */ width: 100vw !important; max-width: 960px !important; /* Note: The 'left' property has been completely removed! */ } /* Mega Menu Columns */ #ttr_menu .nav.ttr_menu_items li ul.child > li { display: inline-block !important; /* Allows them to sit side-by-side and obey text-align */ float: none !important; /* Disables standard left-floating if your theme uses it */ text-align: left !important; /* Re-aligns the actual links/text inside the column back to the left */ vertical-align: top !important; /* Ensures all columns align neatly at the top edge */ background: #FFFFFF; background: linear-gradient(180deg, #FFFFFF, #FFFFFF); border-radius: 20px; margin-left: 10px; margin-right: 10px; padding: 10px; } /* The Invisible Bridge */ #ttr_menu .nav.ttr_menu_items li ul.child::before { content: ""; position: absolute; top: -70px; /* Covers the 70px gap you created */ left: 0; width: 100%; height: 70px; /* Bridge height must match your gap */ background: transparent; /* Stays invisible */ } /* Define the Bounce Animation */ @keyframes menuBounce { 0% { opacity: 0; transform: translateY(-20px) scaleY(0.8); } 70% { transform: translateY(10px) scaleY(1.05); /* Overshoot downward */ } 100% { opacity: 1; transform: translateY(0) scaleY(1); /* Snap back to position */ } } /* Trigger the animation on hover */ #ttr_menu .nav.ttr_menu_items li:hover ul.child { visibility: visible; opacity: 1; animation: menuBounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } /* Dropdown Menu Items */ /* Menu item background */ .ttr_menu_items li ul.child li a { background: rgba(255,255,255,0) !important; } /* Items */ .ttr_menu_items.nav li > a.subchild.subchild, .ttr_menu_items.nav li ul.child li > a { color: #000000 !important; padding-left: 0px !important; padding-top: 5px !important; padding-bottom: 5px !important; } /* Items hover */ .ttr_menu_items.nav li:hover > a.subchild.subchild, .ttr_menu_items.nav li ul.child li:hover > a { color: #FE5100 !important; } /* Footer */ #footer-inner-row { max-width: 90%; width: auto; margin: auto; } .footer-custom-separator-line { max-width: 90%; margin: auto; } /* HERO - Homepage */ /* Margins */ .hero-homepage-city { margin: -100px 2px 0px 2px; } /* Homepage Hero Scrolling Text */ /* Light Mode */ body.pf-mode-light #hero-homepage-text .pf-text-content { font-size: 15vh; } /* Dark Mode */ body.pf-mode-dark #hero-homepage-text .pf-text-content { font-size: 15vh; } /* ================================================ ADVERTISING BANNERS ================================================ */ /* Side-by-Side Layout */ /* Put image on the right */ .info-banner-card-orange-glow .pf-img-wrapper, .info-banner-card-purple-glow .pf-img-wrapper, .info-banner-card-blue-glow .pf-img-wrapper { width: 50% !important; right: 0 !important; left: auto !important; } /* Put text on the left */ .info-banner-card-orange-glow .pf-info-wrapper, .info-banner-card-purple-glow .pf-info-wrapper, .info-banner-card-blue-glow .pf-info-wrapper { width: 50% !important; align-self: flex-start !important; } } /* --- TABLET --- */ @media (min-width: 768px) and (max-width: 991px) { /* Menu */ /* Menu Bar */ #ttr_menu { width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ max-width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ } #ttr_menu.fixed-top { width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ max-width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ right: 20px !important; left: auto; transform: none; } .navbar-default { border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; margin-left: 0px; margin-right: 0px; margin-top: 20px; } .fixed-top { margin-top: 10px; } /* Menu Bar Scoops --------------------------------------------- */ /* Scoop: Left */ .navbar-default::before { width: 0px !important; height: 0px !important; } /* Scoop: Right */ .navbar-default::after { width: 0px !important; height: 0px !important; } /* Scoop: Left - Sticky */ #ttr_menu.fixed-top .navbar-default::before { width: 0px !important; height: 0px !important; } /* Scoop: Right - Sticky */ #ttr_menu.fixed-top .navbar-default::after { width: 0px !important; height: 0px !important; } /* Menu Dropdown */ /* Menu Item Descriptions */ .menu-subtitle { display: block; font-size: 11px; color: #666666; font-weight: normal; text-transform: none; line-height: 1.2; width: max-content; max-width: max-content; display: block; white-space: normal; margin-left: 35px; } /* Dropdown Container */ /* Dropdown menu styling */ .dropdown-menu { background-color: rgba(255,255,255,1) !important; border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; padding: 20px 0px 20px 0px !important; } /* Dropdown menu location */ #ttr_menu .nav.ttr_menu_items li ul.child { /* 1. Keep your original vertical properties */ top: 70px !important; display: block; visibility: hidden; opacity: 0; transition: all 0.3s ease; -webkit-box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); -moz-box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); text-align: center !important; /* 2. Keep the max-width sizing */ width: 100vw !important; max-width: 90vw !important; /* Note: The 'left' property has been completely removed! */ } /* Mega Menu Columns */ #ttr_menu .nav.ttr_menu_items li ul.child > li { display: block !important; /* The Magic Math: 100% width MINUS 40px total (20px left + 20px right) */ width: calc(100% - 40px) !important; box-sizing: border-box !important; margin-left: 20px !important; /* Adds breathing room on the left */ margin-right: 20px !important; /* Adds breathing room on the right */ margin-bottom: 30px !important; padding: 20px; background: #FFFFFF; background: linear-gradient(180deg, #FFFFFF, #FFFFFF); border-radius: 20px; } /* The Invisible Bridge */ #ttr_menu .nav.ttr_menu_items li ul.child::before { content: ""; position: absolute; top: -70px; /* Covers the 70px gap you created */ left: 0; width: 100%; height: 70px; /* Bridge height must match your gap */ background: transparent; /* Stays invisible */ } /* Define the Bounce Animation */ @keyframes menuBounce { 0% { opacity: 0; transform: translateY(-20px) scaleY(0.8); } 70% { transform: translateY(10px) scaleY(1.05); /* Overshoot downward */ } 100% { opacity: 1; transform: translateY(0) scaleY(1); /* Snap back to position */ } } /* Trigger the animation on hover */ #ttr_menu .nav.ttr_menu_items li:hover ul.child { visibility: visible; opacity: 1; animation: menuBounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } /* Dropdown Menu Items */ /* Menu item background */ .ttr_menu_items li ul.child li a { background: rgba(255,255,255,0) !important; } /* Items */ .ttr_menu_items.nav li > a.subchild.subchild, .ttr_menu_items.nav li ul.child li > a { color: #000000 !important; padding-left: 0px !important; padding-top: 5px !important; padding-bottom: 5px !important; } /* Items hover */ .ttr_menu_items.nav li:hover > a.subchild.subchild, .ttr_menu_items.nav li ul.child li:hover > a { color: #FE5100 !important; } /* Footer */ #footer-inner-row { max-width: 90%; width: auto; margin: auto; } .footer-custom-separator-line { max-width: 90%; margin: auto; } /* HERO - Homepage */ /* Margins */ .hero-homepage-city { margin: -70px 2px 0px 2px; } /* Homepage Hero Scrolling Text */ /* Light Mode */ body.pf-mode-light #hero-homepage-text .pf-text-content { font-size: 10vh; } /* Dark Mode */ body.pf-mode-dark #hero-homepage-text .pf-text-content { font-size: 10vh; } /* ================================================ ADVERTISING BANNERS ================================================ */ /* Side-by-Side Layout */ /* Put image on the right */ .info-banner-card-orange-glow .pf-img-wrapper, .info-banner-card-purple-glow .pf-img-wrapper, .info-banner-card-blue-glow .pf-img-wrapper { width: 50% !important; right: 0 !important; left: auto !important; } /* Put text on the left */ .info-banner-card-orange-glow .pf-info-wrapper, .info-banner-card-purple-glow .pf-info-wrapper, .info-banner-card-blue-glow .pf-info-wrapper { width: 50% !important; align-self: flex-start !important; } } /* --- BETWEEN MOBILE AND TABLET --- */ @media (min-width: 576px) and (max-width: 767px) { /* Menu */ /* Menu Bar */ .navbar-nav { padding-top: 14px; } #ttr_menu { width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ max-width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ } #ttr_menu.fixed-top { width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ max-width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ right: 20px !important; left: auto; transform: none; } .navbar-default { border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; margin-left: 0px; margin-right: 0px; margin-top: 20px; } .fixed-top { margin-top: 10px; } /* Menu Bar Scoops --------------------------------------------- */ /* Scoop: Left */ .navbar-default::before { width: 0px !important; height: 0px !important; } /* Scoop: Right */ .navbar-default::after { width: 0px !important; height: 0px !important; } /* Scoop: Left - Sticky */ #ttr_menu.fixed-top .navbar-default::before { width: 0px !important; height: 0px !important; } /* Scoop: Right - Sticky */ #ttr_menu.fixed-top .navbar-default::after { width: 0px !important; height: 0px !important; } /* Menu Dropdown */ /* Dropdown Container */ /* Dropdown menu styling */ .dropdown-menu { background-color: rgba(255,255,255,1) !important; border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; padding: 20px 0px 20px 0px !important; } /* Dropdown menu location */ #ttr_menu .nav.ttr_menu_items li ul.child { /* 1. Keep your original vertical properties */ top: 70px !important; display: block; visibility: hidden; opacity: 0; transition: all 0.3s ease; -webkit-box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); -moz-box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); box-shadow: 0px 0px 8px 1px rgba(117,117,117,0.4); text-align: center !important; /* 2. Keep the max-width sizing */ width: 100vw !important; max-width: 95vw !important; /* Note: The 'left' property has been completely removed! */ } /* Mega Menu Columns */ #ttr_menu .nav.ttr_menu_items li ul.child > li { display: block !important; /* The Magic Math: 100% width MINUS 40px total (20px left + 20px right) */ width: calc(100% - 40px) !important; box-sizing: border-box !important; margin-left: 20px !important; /* Adds breathing room on the left */ margin-right: 20px !important; /* Adds breathing room on the right */ margin-bottom: 30px !important; padding: 20px; background: #FFFFFF; background: linear-gradient(180deg, #FFFFFF, #FFFFFF); border-radius: 20px; } /* Remove the bottom margin from the very last column so it doesn't create extra dead space */ #ttr_menu .nav.ttr_menu_items li ul.child > li:last-child { margin-bottom: 0 !important; } /* The Invisible Bridge */ #ttr_menu .nav.ttr_menu_items li ul.child::before { content: ""; position: absolute; top: -70px; /* Covers the 70px gap you created */ left: 0; width: 100%; height: 70px; /* Bridge height must match your gap */ background: transparent; /* Stays invisible */ } /* Define the Bounce Animation */ @keyframes menuBounce { 0% { opacity: 0; transform: translateY(-20px) scaleY(0.8); } 70% { transform: translateY(10px) scaleY(1.05); /* Overshoot downward */ } 100% { opacity: 1; transform: translateY(0) scaleY(1); /* Snap back to position */ } } /* Trigger the animation on hover */ #ttr_menu .nav.ttr_menu_items li:hover ul.child { visibility: visible; opacity: 1; animation: menuBounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } /* Dropdown Menu Items */ /* Menu item background */ .ttr_menu_items li ul.child li a { background: rgba(255,255,255,0) !important; } /* Items */ .ttr_menu_items.nav li > a.subchild.subchild, .ttr_menu_items.nav li ul.child li > a { color: #000000 !important; padding-left: 0px !important; padding-top: 5px !important; padding-bottom: 5px !important; } /* Items hover */ .ttr_menu_items.nav li:hover > a.subchild.subchild, .ttr_menu_items.nav li ul.child li:hover > a { color: #FE5100 !important; } /* CTA Button */ .menu-book-a-call { display: none !important; } /* Footer */ #footer-inner-row { max-width: 90%; width: auto; margin: auto; } .footer-custom-separator-line { max-width: 90%; margin: auto; } /* HERO - Homepage */ /* Margins */ .hero-homepage-city { margin: -70px 2px 0px 2px; } /* Homepage Hero Scrolling Text */ /* Light Mode */ body.pf-mode-light #hero-homepage-text .pf-text-content { font-size: 10vh; } /* Dark Mode */ body.pf-mode-dark #hero-homepage-text .pf-text-content { font-size: 10vh; } /* ================================================ ADVERTISING BANNERS ================================================ */ /* Text Top, Image Bottom Stack */ /* Give the whole banner a fixed height so halves don't collapse */ .pixelfox-info-banner-container.info-banner-card-orange-glow, .pixelfox-info-banner-container.info-banner-card-purple-glow, .pixelfox-info-banner-container.info-banner-card-blue-glow { height: 550px !important; min-height: 550px !important; } /* Force text to the top 50% */ .info-banner-card-orange-glow .pf-info-wrapper, .info-banner-card-purple-glow .pf-info-wrapper, .info-banner-card-blue-glow .pf-info-wrapper { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 50% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 30px !important; box-sizing: border-box !important; z-index: 10 !important; } /* Force image to the bottom 50% */ .info-banner-card-orange-glow .pf-img-wrapper, .info-banner-card-purple-glow .pf-img-wrapper, .info-banner-card-blue-glow .pf-img-wrapper { position: absolute !important; top: 50% !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 50% !important; z-index: 1 !important; } /* Kill plugin's aspect ratio so the image stretches beautifully */ .info-banner-card-orange-glow .pf-img-inner, .info-banner-card-purple-glow .pf-img-inner, .info-banner-card-blue-glow .pf-img-inner { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; margin: 0 !important; } } /* --- MOBILE --- */ @media (max-width: 575px) { /* Menu Bar */ #ttr_menu { width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ max-width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ } #ttr_menu.fixed-top { position: absolute !important; width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ max-width: calc(100vw - 40px) !important; /* Adjust this to match your site's main content width */ right: 20px !important; left: auto; transform: none; } .navbar-default { border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; margin-left: 0px; margin-right: 0px; margin-top: 20px; } .fixed-top { margin-top: 10px; } /* Menu Bar Scoops --------------------------------------------- */ /* Scoop: Left */ .navbar-default::before { width: 0px !important; height: 0px !important; } /* Scoop: Right */ .navbar-default::after { width: 0px !important; height: 0px !important; } /* Scoop: Left - Sticky */ #ttr_menu.fixed-top .navbar-default::before { width: 0px !important; height: 0px !important; } /* Scoop: Right - Sticky */ #ttr_menu.fixed-top .navbar-default::after { width: 0px !important; height: 0px !important; } /* Hamburger Button */ /* Menu Toggle */ #ttr_menu .navbar-toggle { background-color: transparent !important; border: none !important; margin-top: 17px !important; padding: 0 !important; width: 35px !important; height: 35px !important; position: relative !important; /* Back to relative so it sits inside the header naturally */ float: right !important; /* Pushes it to the right side of the header */ } /* Styles the 3 lines of the hamburger icon */ #ttr_menu nav .icon-bar { background-color: #000000 !important; height: 3px !important; width: 25px !important; border: none !important; border-radius: 2px !important; position: absolute !important; left: 5px !important; margin: 0 !important; transition: all 0.3s ease-in-out !important; transform: rotate(0deg) !important; /* Force default state on load */ opacity: 1 !important; } /* Default spacing for the 3 lines */ #ttr_menu nav .icon-bar:nth-last-child(3) { top: 8px !important; } #ttr_menu nav .icon-bar:nth-last-child(2) { top: 16px !important; } #ttr_menu nav .icon-bar:nth-last-child(1) { top: 24px !important; } /* Hover state for hamburger lines */ #ttr_menu nav .navbar-toggle:hover .icon-bar { background-color: #FE5100 !important; } /* HAMBURGER TO "X" ANIMATION (PERFECT SYMMETRY) */ /* TOP LINE: Moves to dead center, then rotates */ #ttr_menu .navbar-toggle[aria-expanded="true"] .icon-bar:nth-last-child(3) { top: 16px !important; transform: rotate(45deg) !important; background-color: #000000 !important; /* Keeps the X dark */ } /* MIDDLE LINE: Fades out completely */ #ttr_menu .navbar-toggle[aria-expanded="true"] .icon-bar:nth-last-child(2) { opacity: 0 !important; } /* BOTTOM LINE: Moves to dead center, then rotates the opposite way */ #ttr_menu .navbar-toggle[aria-expanded="true"] .icon-bar:nth-last-child(1) { top: 16px !important; transform: rotate(-45deg) !important; background-color: #000000 !important; /* Keeps the X dark */ } /* Menu Dropdown */ /* Menu Item Descriptions */ #ttr_menu .nav.ttr_menu_items li ul.child > li .menu-subtitle { text-align: center; display: block !important; width: 100% !important; margin-left: auto; margin-right: auto; } /* Reset the theme's default "slide" to prevent flashing */ .navbar-collapse.collapsing { transition: none !important; display: none !important; } /* Shift down from menu bar */ #ttr_menu #navigationmenu .navbar-collapse { margin-top: 8px; } /* Style the open menu background */ #ttr_menu .navbar-collapse.show { background-color: #ffffff !important; display: block !important; /* Trigger the bounce animation */ animation: menuBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; transform-origin: top; padding: 15px !important; border-radius: 20px; } /* Fix link visibility and the Services/About gap */ #ttr_menu .nav.ttr_menu_items li { margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, 0) !important; } #ttr_menu .nav.ttr_menu_items li a { padding: 0px !important; display: block !important; min-height: auto !important; /*border-bottom: 1px solid #f0f0f0 !important;*/ text-align: center !important; } /* Remove the empty sub-menu space causing the gap */ #ttr_menu .nav.ttr_menu_items li ul.child { position: static !important; display: none; /* Stays hidden until "Services" is clicked */ } #ttr_menu .nav.ttr_menu_items li.show ul.child { display: block !important; } /* The Bounce Keyframe */ @keyframes menuBounce { 0% { opacity: 0; transform: scaleY(0); } 70% { transform: scaleY(1.03); } 100% { opacity: 1; transform: scaleY(1); } } /* Menu Items */ /* Dropdown Child Background */ #ttr_menu .nav.ttr_menu_items li.show ul.child { background: #F3F3F3; } /* Dropdown Child Items */ .ttr_menu_items li ul.child li a { font-size: 15px !important; background: rgba(255, 255, 255, 0); } #ttr_menu .nav.ttr_menu_items li.show ul.child { background-color: #FFFFFF !important; } /* Hide Bullet from Menu Items */ .menu-item { list-style: none; } /* Menu Images */ .pf-menu-image { margin-left: auto; margin-right: auto; } /* 1. Ensure the specific anchor tags you targeted are visible and block-level */ .navbar-default ul.ttr_menu_items.nav li.dropdown ul.dropdown-menu li.unstyled a:not(.subchild), .navbar-default .ttr_menu_items.nav li ul.child li a.subchild, #ttr_menu nav.navbar .ttr_menu_items.nav li ul.child li > a.subchild { display: block !important; } /* 2. Target the nested