/* ----- VARIABLES (index2 creative palette) ----- */ :root { --charcoal: var(--oz-dark, #1e1e1e); --dark-gray: var(--oz-text, #2d2d2d); --medium-gray: #4a4a4a; --light-gray: var(--ozgf-bg-light, #f0f0f0); --accent-teal: var(--oz-primary, #008c8c); --accent-orange: var(--oz-secondary, #ff6b35); --white: var(--oz-light, #ffffff); --off-white: var(--ozgf-off-white, #f9f9f9); --shadow-sm: 0 10px 30px rgba(0,0,0,0.05); --shadow-lg: 0 20px 40px rgba(0,0,0,0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Avoid horizontal scroll caused by occasional wide blocks. IMPORTANT: do not set overflow on / because it can break `position: sticky` on some mobile browsers. Instead, clip overflow on the site wrapper. */ #page{ max-width: 100%; overflow-x: hidden; } body { font-family: var(--oz-body-font, 'Source Sans Pro', sans-serif); color: var(--dark-gray); font-size: var(--ozgf-body-font-size, 1rem); font-weight: var(--ozgf-body-font-weight, 400); line-height: var(--ozgf-body-line-height, 1.7); background-color: var(--off-white); } h1, h2, h3, h4, h5, h6 { font-family: var(--oz-head-font, 'Exo 2', sans-serif); font-weight: var(--ozgf-headings-font-weight, 700); } /* Base tag sizing (Customizer-controlled). Defaults match Bootstrap 5 sizing. */ h1{ font-size: var(--ozgf-h1-font-size, 2.5rem); } h2{ font-size: var(--ozgf-h2-font-size, 2rem); } h3{ font-size: var(--ozgf-h3-font-size, 1.75rem); } h4{ font-size: var(--ozgf-h4-font-size, 1.5rem); } h5{ font-size: var(--ozgf-h5-font-size, 1.25rem); } h6{ font-size: var(--ozgf-h6-font-size, 1rem); } p{ font-size: var(--ozgf-p-font-size, 1rem); } /* ----- SHAPE DIVIDER ----- */ .shape-divider { position: absolute; /* * Force true edge-to-edge divider even when rendered inside a centered * .container. Use viewport units (vw) so width/position are NOT * constrained by any inner max-width wrapper. */ left: 50vw; width: 100vw; max-width: 100vw; transform: translateX(-50%); overflow: hidden; line-height: 0; z-index: 2; pointer-events: none; } .shape-divider-bottom { bottom: 0; transform: translateX(-50%) rotate(180deg); } .shape-divider svg { display: block; width: 100vw; max-width: 100vw; height: 80px; } /* ----- NAVIGATION: logo + slogan inline ----- */ .navbar-custom { background-color: rgba(30, 30, 30, 0.98); backdrop-filter: blur(8px); padding: 12px 0; transition: all 0.3s ease; border-bottom: 3px solid var(--accent-teal); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .brand-wrapper { display: flex; flex-direction: column; line-height: 1.2; } .navbar-brand { font-weight: 800; font-size: 1.9rem; color: var(--white); padding: 0; margin: 0; letter-spacing: -0.5px; } .navbar-brand .brand-logo{ display:block; height:64px; width:auto; max-width: 320px; } @media (max-width: 576px){ .navbar-brand .brand-logo{ height:52px; max-width: 280px; } } /* Ensure WP Custom Logo matches brand sizing */ .navbar-brand .custom-logo-link img, .navbar-brand img.custom-logo{ display:block; height:64px; width:auto; max-width:320px; } @media (max-width: 576px){ .navbar-brand .custom-logo-link img, .navbar-brand img.custom-logo{ height:52px; max-width:280px; } } .brand-highlight { color: var(--accent-teal); } /* inline slogan style */ .brand-slogan-inline { font-size: 0.8rem; font-weight: 400; color: rgba(255, 255, 255, 0.8); letter-spacing: 1px; text-transform: uppercase; display: block; text-align: center; } .footer-slogan-inline { font-size: 0.8rem; font-weight: 400; color: rgba(255,255,255,0.7); letter-spacing: 1px; text-transform: uppercase; margin-left: 8px; display: inline-block; } .navbar-custom .nav-link { color: rgba(255, 255, 255, 0.9) !important; font-weight: 600; margin: 0 10px; padding: 8px 0 !important; position: relative; } .navbar-custom .nav-link:before { content: ''; position: absolute; width: 0; height: 3px; bottom: 0; left: 0; background-color: var(--accent-orange); transition: width 0.3s ease; } .navbar-custom .nav-link:hover:before, .navbar-custom .nav-link.active:before { width: 100%; } .nav-contact { display: flex; align-items: center; gap: 20px; margin-left: 20px; } .nav-phone { display: flex; align-items: center; gap: 8px; color: var(--white); font-weight: 600; font-size: 1.1rem; background-color: rgba(255,255,255,0.05); padding: 6px 16px; border-radius: 40px; transition: all 0.2s; text-decoration: none; } .nav-phone i { color: var(--accent-teal); } .nav-phone:hover { background-color: var(--accent-teal); color: white; } .btn-whatsapp-nav { background-color: #25D366; color: white !important; padding: 8px 20px; border-radius: 40px; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; text-decoration: none; } .btn-whatsapp-nav:hover { background-color: #128C7E; transform: translateY(-2px); color: white; } /* ----- BUTTONS ----- */ .btn-teal { background-color: var(--accent-teal); color: var(--white); padding: 12px 32px; font-weight: 700; border-radius: 6px; border: none; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.95rem; } .btn-teal:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: var(--accent-orange); transition: all 0.4s ease; z-index: -1; } .btn-teal:hover:before { left: 0; } .btn-teal:hover { color: var(--white); transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0, 140, 140, 0.3); } .btn-outline-light { background-color: transparent; border: 2px solid var(--white); color: var(--white); padding: 10px 30px; font-weight: 600; border-radius: 6px; transition: 0.3s; } .btn-outline-light:hover { background-color: var(--white); color: var(--charcoal); } /* Outline CTA button (match hero sizing, but dark) */ .btn-outline-dark.ozgf-btn-cta{ background-color: transparent; border: 2px solid var(--charcoal); color: var(--charcoal); padding: 10px 30px; font-weight: 700; border-radius: 6px; transition: 0.3s; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.95rem; } .btn-outline-dark.ozgf-btn-cta:hover{ background-color: var(--charcoal); color: var(--white); } /* ----- HERO SECTION – updated description ----- */ .hero-section { background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(30, 30, 30, 0.8)), url(../images/oz-garage-floor-epoxy-resin-pour-industrial-brisbane.jpg); background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(30, 30, 30, 0.8)), image-set( url(../images/oz-garage-floor-epoxy-resin-pour-industrial-brisbane.webp) type("image/webp"), url(../images/oz-garage-floor-epoxy-resin-pour-industrial-brisbane.jpg) type("image/jpeg") ); background-size: cover; background-position: center 40%; background-attachment: fixed; color: var(--white); padding: 100px 0 140px; position: relative; overflow: hidden; } /* HERO SECTION (Home) — keep top spacing consistent across breakpoints */ @media (max-width: 991.98px){ .hero-section{ padding-top: 70px; background-attachment: scroll; } } .hero-title { font-size: var(--ozgf-hero-title-size, 3.6rem); font-weight: 800; line-height: 1.2; margin-bottom: 20px; } .hero-title span { color: var(--accent-orange); } .hero-subtitle { font-size: 1.3rem; font-weight: 300; margin-bottom: 35px; max-width: 750px; color: rgba(255,255,255,0.95); } .hero-features { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 40px; } .hero-feature { display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.08); padding: 12px 22px; border-radius: 40px; backdrop-filter: blur(4px); border-left: 3px solid var(--accent-teal); } .hero-feature i { color: var(--accent-orange); margin-right: 12px; font-size: 1.2rem; } /* ----- SERVICES TABS – updated labels and content ----- */ .services-section { padding: 100px 0; background-color: var(--white); } .section-header { text-align: center; margin-bottom: 60px; } .section-title { font-size: var(--ozgf-section-title-size, 2.8rem); margin-bottom: 20px; position: relative; display: inline-block; } .section-title:after { content: ''; position: absolute; width: 80px; height: 5px; background-color: var(--accent-teal); bottom: -15px; left: 50%; transform: translateX(-50%); border-radius: 3px; } .section-subtitle { color: var(--medium-gray); font-size: 1.1rem; max-width: 700px; margin: 25px auto 50px; } /* Technical page enhancements (minimal, keeps blocks editable) */ /* * On many sections we style .section-title as inline-block to keep the underline tight. * For the Technical page we rely on Gutenberg's per-heading text alignment, so we * must ensure headings are block-level to actually center. */ .ozgf-tech .section-title { display: block; width: 100%; } .ozgf-tech .section-subtitle { max-width: 900px; } .ozgf-tech-intro .wp-block-image.ozgf-intro-image { margin: 0; } .ozgf-tech-intro .wp-block-image.ozgf-intro-image img { width: 100%; height: auto; border-radius: 1.5rem; display: block; } .ozgf-apps-head { padding-bottom: 10px; } .ozgf-apps-head + section.oz-section { padding-top: 0; } .ozgf-def-card { border: 1px solid rgba(0,0,0,0.06); } .nav-tabs-custom { border: none; justify-content: center; margin-bottom: 50px; } .nav-tabs-custom .nav-link { background-color: transparent; border: none; color: var(--medium-gray); font-weight: 600; padding: 15px 30px; margin: 0 8px; border-radius: 8px; transition: 0.3s; position: relative; z-index: 1; overflow: hidden; } .nav-tabs-custom .nav-link:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--ozgf-bg-light, var(--light-gray)); z-index: -1; border-radius: 8px; transform: translateY(100%); transition: transform 0.4s ease; } .nav-tabs-custom .nav-link.active:before, .nav-tabs-custom .nav-link:hover:before { transform: translateY(0); } .nav-tabs-custom .nav-link.active { color: var(--accent-teal); } .nav-tabs-custom .nav-link:hover { color: var(--accent-orange); } .tab-content-custom { background-color: var(--white); border-radius: 16px; padding: 50px; box-shadow: var(--shadow-lg); border: 1px solid var(--light-gray); } .service-tab-image { border-radius: 12px; overflow: hidden; height: 340px; box-shadow: var(--shadow-sm); } .service-tab-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .service-tab-image:hover img { transform: scale(1.04); } /* Content split (text + image) */ .ozgf-content-split__badge{ margin-top: 16px; margin-bottom: 0; } .text-teal { color: var(--accent-teal); } /* Bullets + CTA inside tab content (no inline styles) */ .ozgf-tab-bullets{ list-style: none; padding-left: 0; margin: 18px 0 0; } .ozgf-tab-bullets li{ display: flex; align-items: flex-start; margin-bottom: 10px; } .ozgf-tab-bullets li i{ margin-top: 2px; } /* ----- ADDITIONAL SERVICES ROW ----- */ .additional-services { margin-top: 50px; text-align: center; } .additional-services h4 { font-size: 1.5rem; margin-bottom: 30px; color: var(--charcoal); } .service-icon-small { display: inline-flex; flex-direction: column; align-items: center; margin: 0 20px; color: var(--dark-gray); } .service-icon-small i { font-size: 2rem; color: var(--accent-teal); margin-bottom: 10px; background-color: var(--ozgf-bg-light, var(--light-gray)); padding: 15px; border-radius: 50%; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; transition: 0.3s; } .service-icon-small:hover i { background-color: var(--accent-teal); color: white; } .service-icon-small span { font-weight: 600; } /* ----- PROCESS SECTION – removed lifetime warranty mention ----- */ .process-section { padding: 100px 0; background-color: var(--ozgf-bg-light, var(--light-gray)); position: relative; } .process-container { position: relative; } .process-line { position: absolute; top: 60px; left: 0; width: 100%; height: 3px; background-color: var(--accent-teal); z-index: 1; } .process-step { position: relative; z-index: 2; } .step-icon-container { width: 120px; height: 120px; background-color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; box-shadow: 0 15px 30px rgba(0,0,0,0.08); border: 5px solid var(--accent-teal); position: relative; transition: 0.4s; } .step-icon-container:hover { transform: translateY(-10px); background-color: var(--accent-teal); } .step-icon-container:hover .step-icon { color: var(--white); } .step-icon { font-size: 2.5rem; color: var(--accent-teal); transition: 0.4s; } .step-number { position: absolute; top: -10px; right: -10px; width: 40px; height: 40px; background-color: var(--accent-orange); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; } /* ----- GALLERY ----- */ .gallery-section { padding: 100px 0; background-color: var(--white); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; } /* Project Gallery default: 3 columns on desktop. Keep responsive behavior on smaller breakpoints. */ @media (min-width: 992px){ .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) and (max-width: 991.98px){ .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px){ .gallery-grid{ grid-template-columns: 1fr; } } .gallery-item{ position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); height: 280px; } .gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .ozgf-gallery-fit-contain .gallery-item img{ object-fit: contain; background: rgba(0,0,0,0.08); } .gallery-item:hover img{ transform: scale(1.02); } .gallery-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.8)); display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; color: white; opacity: 0; transition: opacity 0.3s; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-category { display: inline-block; background-color: var(--accent-orange); color: white; padding: 5px 16px; border-radius: 30px; font-size: 0.8rem; font-weight: 600; margin-bottom: 12px; align-self: flex-start; } /* ----- TESTIMONIALS ----- */ .testimonials-section { padding: 100px 0; background-color: var(--ozgf-bg-light, var(--light-gray)); } .testimonial-card { background-color: var(--white); border-radius: 16px; padding: 40px; margin: 10px; box-shadow: var(--shadow-sm); border-top: 5px solid var(--accent-teal); height: 100%; } .testimonial-rating { color: var(--accent-orange); font-size: 1.1rem; margin-bottom: 18px; } .testimonial-text { font-size: 1.05rem; font-style: italic; margin-bottom: 25px; position: relative; padding-left: 20px; } .testimonial-text:before { content: '"'; position: absolute; left: -8px; top: -15px; font-size: 4rem; color: var(--accent-teal); opacity: 0.2; font-family: serif; } .author-avatar { width: 60px; height: 60px; border-radius: 50%; background-color: var(--ozgf-bg-light, var(--light-gray)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent-teal); font-size: 1.4rem; border: 3px solid var(--accent-teal); } /* ----- FAQ – updated Q&A ----- */ .faq-section { padding: 100px 0; background-color: var(--white); } .faq-section.faq--offwhite { background-color: var(--off-white); } .faq-section.faq--light { background-color: var(--light-gray); } .faq-container { max-width: 900px; margin: 0 auto; } .faq-item { margin-bottom: 20px; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 18px rgba(0,0,0,0.05); border: 1px solid #eee; } .faq-question { background-color: var(--ozgf-bg-light, var(--light-gray)); padding: 20px 28px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; font-size: 1.1rem; } .faq-question:hover { background-color: var(--accent-teal); color: white; } .faq-question:hover .faq-icon { color: white; } .faq-icon { color: var(--accent-teal); transition: 0.2s; } .faq-answer { padding: 0 28px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; background: white; } .faq-answer.active { padding: 28px; max-height: 2000px; } /* ----- CONTACT SECTION ----- */ .contact-section { padding: 100px 0 100px; background-color: var(--charcoal); color: white; position: relative; } .contact-container { background-color: var(--white); border-radius: 20px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.2); } .contact-info { background-color: var(--dark-gray); padding: 50px; height: 100%; } .contact-info h3, .contact-info h5 { color: white; } .contact-form { padding: 50px; } .contact-detail { display: flex; align-items: flex-start; margin-bottom: 30px; } /* Contact section heading + links */ .contact-section .section-title { color: #fff; } .contact-section .section-subtitle { color: rgba(255,255,255,0.8); } .contact-detail a { color: inherit; text-decoration: none; } .contact-detail a:hover, .contact-detail a:focus { color: var(--oz-primary); text-decoration: none; transition: all ease 0.3s; } .contact-icon { width: 50px; height: 50px; background-color: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; color: var(--accent-orange); font-size: 1.3rem; flex-shrink: 0; } .btn-whatsapp-large { background-color: #25D366; color: white; padding: 14px 28px; border-radius: 50px; font-weight: 700; display: inline-flex; align-items: center; gap: 12px; transition: 0.3s; border: none; text-decoration: none; } .btn-whatsapp-large:hover { background-color: #128C7E; transform: scale(1.02); color: white; } /* ----- FOOTER – updated licence info, RTO placeholder ----- */ .main-footer { background-color: var(--dark-gray); color: white; padding: 70px 0 30px; } .footer-logo { font-size: 1.9rem; font-weight: 800; color: white; } .logo-highlight { color: var(--accent-orange); } /* Footer brand logo (image-based, matches header logo) */ .footer-brand { display: inline-flex; align-items: center; text-decoration: none; } /* Footer brand title (replaces repeated logo in footer) */ .footer-brand-title { gap: 10px; } .footer-brand-title-text { font-size: 1.8rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; color: var(--white); position: relative; display: inline-block; padding-bottom: 10px; } /* Match underline style from .footer-heading:after */ .footer-brand-title-text:after { content: ''; position: absolute; width: 40px; height: 3px; background-color: var(--accent-orange); bottom: 0; left: 0; } .footer-brand-title:hover .footer-brand-title-text, .footer-brand-title:focus .footer-brand-title-text { color: var(--accent-orange); } .footer-brand-logo { max-height: 46px; width: auto; border-radius: 16px; } /* Footer accreditations (CSQ + RTO logos) */ .footer-accreditations { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; } .footer-accred-logo { height: 44px; width: auto; max-width: 320px; object-fit: contain; display: block; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); } .footer-accred-csq { height: 40px; } /* RTO badge (logo + number) */ .footer-accred-rto { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 18px; background-color: #ffffff; border: 1px solid rgba(0, 140, 140, 0.40); box-shadow: 0 10px 24px rgba(0,0,0,0.20); text-align: center; } .footer-accred-rto-logo { height: 54px; width: auto; max-width: 220px; filter: none; } .footer-accred-rto-text { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 999px; background-color: rgba(0, 140, 140, 0.22); border: 1px solid rgba(0, 140, 140, 0.38); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); font-size: 0.85rem; line-height: 1; white-space: nowrap; } @media (max-width: 575.98px) { .footer-brand-logo { max-height: 40px; } .footer-accreditations { gap: 10px; } .footer-accred-logo { height: 36px; } .footer-accred-csq { height: 34px; } .footer-accred-rto { width: 100%; justify-content: center; align-items: center; } .footer-accred-rto-logo { height: 50px; } .footer-accred-rto-text { font-size: 0.82rem; padding: 7px 10px; } } /* ========================================= CTA STRIP — Mobile polish (centra íconos/textos y evita overflow en email/links) ========================================= */ @media (max-width: 991.98px) { .ozgf-cta-strip{ padding: 3rem 0; } .ozgf-cta-strip .h2{ font-size: clamp(1.55rem, 4.8vw, 2rem); } /* Centrar y apilar los items de contacto para que se vean “limpios” en mobile */ .ozgf-cta-strip .col-lg-auto > .d-flex{ justify-content: center; text-align: center; flex-direction: column; gap: .5rem; } .ozgf-cta-strip .col-lg-auto > .d-flex i.fa-2x{ font-size: 1.75em; /* un poco más compacto que 2x */ line-height: 1; } /* Evitar que email/tel largos rompan el layout */ .ozgf-cta-strip a{ display: inline-block; word-break: break-word; } /* Botón más cómodo para tap */ .ozgf-cta-strip .btn{ width: 100%; max-width: 340px; } } .footer-about { color: rgba(255,255,255,0.7); margin: 20px 0; line-height: 1.6; } .footer-heading { color: var(--white); font-size: 1.2rem; margin-bottom: 25px; position: relative; padding-bottom: 10px; } .footer-heading:after { content: ''; position: absolute; width: 40px; height: 3px; background-color: var(--accent-orange); bottom: 0; left: 0; } .footer-links { list-style: none; padding-left: 0; margin: 0; } .footer-links li { margin-bottom: 12px; color: rgba(255,255,255,0.7); } .footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; transition: all 0.3s ease; display: inline-block; } .footer-links a:hover { color: var(--accent-orange); transform: translateX(5px); } .footer-links li i { margin-right: 8px; color: var(--accent-orange); width: 16px; } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-link { width: 40px; height: 40px; background-color: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: 0.3s; text-decoration: none; } .social-link:hover { background-color: var(--accent-orange); transform: translateY(-5px); color: white; } .footer-bottom { text-align: center; padding-top: 30px; margin-top: 50px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); font-size: 0.9rem; } .footer-bottom a, .footer-bottom a:visited { color: inherit; text-decoration: none; transition: color ease 0.2s; } .footer-bottom a:hover, .footer-bottom a:focus { color: var(--oz-secondary); text-decoration: none; } /* RTO logo placeholder */ .rto-placeholder { display: inline-flex; align-items: center; gap: 8px; background-color: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 40px; margin-top: 10px; } .rto-placeholder i { color: var(--accent-orange); } @media (max-width: 992px) { /* Keep responsive scaling while honoring Customizer max size. */ .hero-title { font-size: calc(var(--ozgf-hero-title-size, 3.6rem) * 0.78); } .nav-contact { margin-left: 0; margin-top: 15px; } .navbar-custom .container { flex-wrap: wrap; } .process-line { display: none; } } @media (max-width: 768px) { .hero-title { font-size: calc(var(--ozgf-hero-title-size, 3.6rem) * 0.61); } .section-title { font-size: calc(var(--ozgf-section-title-size, 2.8rem) * 0.71); } .tab-content-custom { padding: 30px; } } /* ---- CONTACT PAGE ADDITIONS ---- */ /* ----- VARIABLES (misma paleta que el sitio principal) ----- */ :root { --charcoal: var(--oz-dark, #1e1e1e); --dark-gray: var(--oz-text, #2d2d2d); --medium-gray: #4a4a4a; --light-gray: var(--ozgf-bg-light, #f0f0f0); --accent-teal: var(--oz-primary, #008c8c); --accent-orange: var(--oz-secondary, #ff6b35); --white: var(--oz-light, #ffffff); --off-white: var(--ozgf-off-white, #f9f9f9); --shadow-sm: 0 10px 30px rgba(0,0,0,0.05); --shadow-lg: 0 20px 40px rgba(0,0,0,0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--oz-body-font, 'Source Sans Pro', sans-serif); color: var(--dark-gray); font-size: var(--ozgf-body-font-size, 1rem); font-weight: var(--ozgf-body-font-weight, 400); line-height: var(--ozgf-body-line-height, 1.7); background-color: var(--off-white); } h1, h2, h3, h4, h5, h6 { font-family: var(--oz-head-font, 'Exo 2', sans-serif); font-weight: var(--ozgf-headings-font-weight, 700); } /* ----- NAVIGATION (idéntica al index) ----- */ .navbar-custom { background-color: rgba(30, 30, 30, 0.98); backdrop-filter: blur(8px); padding: 12px 0; transition: all 0.3s ease; border-bottom: 3px solid var(--accent-teal); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .brand-wrapper { display: flex; flex-direction: column; line-height: 1.2; } .navbar-brand { font-weight: 800; font-size: 1.9rem; color: var(--white); padding: 0; margin: 0; letter-spacing: -0.5px; } .brand-highlight { color: var(--accent-teal); } .brand-slogan-inline { font-size: 0.8rem; font-weight: 400; color: rgba(255, 255, 255, 0.8); letter-spacing: 1px; text-transform: uppercase; display: block; text-align: center; } .navbar-custom .nav-link { color: rgba(255, 255, 255, 0.9) !important; font-weight: 600; margin: 0 10px; padding: 8px 0 !important; position: relative; } .navbar-custom .nav-link:before { content: ''; position: absolute; width: 0; height: 3px; bottom: 0; left: 0; background-color: var(--accent-orange); transition: width 0.3s ease; } .navbar-custom .nav-link:hover:before, .navbar-custom .nav-link.active:before { width: 100%; } .nav-contact { display: flex; align-items: center; gap: 20px; margin-left: 20px; } .nav-phone { display: flex; align-items: center; gap: 8px; color: var(--white); font-weight: 600; font-size: 1.1rem; background-color: rgba(255,255,255,0.05); padding: 6px 16px; border-radius: 40px; transition: all 0.2s; text-decoration: none; } .nav-phone i { color: var(--accent-teal); } .nav-phone:hover { background-color: var(--accent-teal); color: white; } .btn-whatsapp-nav { background-color: #25D366; color: white !important; padding: 8px 20px; border-radius: 40px; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; text-decoration: none; } .btn-whatsapp-nav:hover { background-color: #128C7E; transform: translateY(-2px); color: white; } /* ----- BOTONES ----- */ .btn-teal { background-color: var(--accent-teal); color: var(--white); padding: 12px 32px; font-weight: 700; border-radius: 6px; border: none; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.95rem; } .btn-teal:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: var(--accent-orange); transition: all 0.4s ease; z-index: -1; } .btn-teal:hover:before { left: 0; } .btn-teal:hover { color: var(--white); transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0, 140, 140, 0.3); } /* ----- CONTACT SECTION (adaptada) ----- */ .contact-section { padding: 100px 0 100px; /* padding-top ajustado */ background-color: var(--charcoal); color: white; position: relative; } .contact-container { background-color: var(--white); border-radius: 20px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.2); } .contact-info { background-color: var(--dark-gray); padding: 50px; height: 100%; } .contact-info h3, .contact-info h5 { color: white; } .contact-form { padding: 50px; } .contact-detail { display: flex; align-items: flex-start; margin-bottom: 30px; } .contact-icon { width: 50px; height: 50px; background-color: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; color: var(--accent-orange); font-size: 1.3rem; flex-shrink: 0; } .btn-whatsapp-large { background-color: #25D366; color: white; padding: 14px 28px; border-radius: 50px; font-weight: 700; display: inline-flex; align-items: center; gap: 12px; transition: 0.3s; border: none; text-decoration: none; } .btn-whatsapp-large:hover { background-color: #128C7E; transform: scale(1.02); color: white; } /* ----- FOOTER (idéntico al index) ----- */ .main-footer { background-color: var(--dark-gray); color: white; padding: 70px 0 30px; } .footer-logo { font-size: 1.9rem; font-weight: 800; color: white; } .logo-highlight { color: var(--accent-orange); } .footer-about { color: rgba(255,255,255,0.7); margin: 20px 0; line-height: 1.6; } .footer-heading { color: var(--white); font-size: 1.2rem; margin-bottom: 25px; position: relative; padding-bottom: 10px; } .footer-heading:after { content: ''; position: absolute; width: 40px; height: 3px; background-color: var(--accent-orange); bottom: 0; left: 0; } .footer-links { list-style: none; padding-left: 0; margin: 0; } .footer-links li { margin-bottom: 12px; color: rgba(255,255,255,0.7); } .footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; transition: all 0.3s ease; display: inline-block; } .footer-links a:hover { color: var(--accent-orange); transform: translateX(5px); } .footer-links li i { margin-right: 8px; color: var(--accent-orange); width: 16px; } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-link { width: 40px; height: 40px; background-color: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: 0.3s; text-decoration: none; } .social-link:hover { background-color: var(--accent-orange); transform: translateY(-5px); color: white; } .footer-bottom { text-align: center; padding-top: 30px; margin-top: 50px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); font-size: 0.9rem; } .rto-placeholder { display: inline-flex; align-items: center; gap: 8px; background-color: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 40px; margin-top: 10px; } .rto-placeholder i { color: var(--accent-orange); } @media (max-width: 992px) { .nav-contact { margin-left: 0; margin-top: 15px; } .navbar-custom .container { flex-wrap: wrap; } } @media (max-width: 768px) { .contact-section { padding: 100px 0 80px; } .contact-info, .contact-form { padding: 30px; } } /* ---------- EXTRA (multi-page mockups) ---------- */ .page-hero { padding: 120px 0 48px; background: radial-gradient(1200px 600px at 10% 20%, rgba(83, 158, 167, .25), transparent 55%), radial-gradient(900px 500px at 80% 10%, rgba(253, 195, 132, .22), transparent 55%), linear-gradient(180deg, rgba(30,30,30,.98), rgba(30,30,30,.88)); border-bottom: 1px solid rgba(255,255,255,.06); } .page-hero h1 { letter-spacing: .2px; } .breadcrumb.oz-breadcrumb { --bs-breadcrumb-divider: '›'; } .breadcrumb.oz-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; } .breadcrumb.oz-breadcrumb a:hover { color: #fff; text-decoration: underline; } .oz-section { padding: 64px 0; } .oz-section-tight { padding: 40px 0; } .oz-swatch { width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); overflow: hidden; background: rgba(255,255,255,.04); } .oz-swatch .swatch-color { height: 110px; background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); } .oz-swatch .swatch-meta { padding: 14px 14px 16px; } .oz-swatch .swatch-name { font-weight: 700; margin: 0; } .oz-swatch .swatch-note { margin: 6px 0 0; font-size: .95rem; opacity: .85; } .oz-gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .oz-gallery-item { grid-column: span 4; } @media (max-width: 991px){ .oz-gallery-item { grid-column: span 6; } } @media (max-width: 575px){ .oz-gallery-item { grid-column: span 12; } } .oz-ph { border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: 0 14px 40px rgba(0,0,0,.25); position: relative; overflow: hidden; } .oz-ph::after{ content:''; position:absolute; inset:0; background: radial-gradient(400px 240px at 20% 20%, rgba(83,158,167,.22), transparent 60%), radial-gradient(360px 240px at 80% 20%, rgba(253,195,132,.18), transparent 60%); pointer-events:none; } .oz-ph .oz-ph-label{ position:absolute; left:16px; bottom:14px; background: rgba(30,30,30,.72); padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.10); font-size: .9rem; } .table.oz-table { --bs-table-bg: rgba(255,255,255,.02); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.04); color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.10); } .table.oz-table th { color: #fff; } .badge.oz-badge { background: rgba(83,158,167,.18); border: 1px solid rgba(83,158,167,.35); color: #d9f6f9; } .navbar-custom.scrolled{ background-color: rgba(30,30,30,0.98) !important; padding: 8px 0 !important; } /* ---------- V2 IMPROVEMENTS (internal pages) ---------- */ .inner-hero { padding: 100px 0 70px; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll !important; color: #fff; } .inner-hero .hero-title{ font-size: 3.2rem; margin-bottom: 10px; } @media (max-width: 991px){ .inner-hero{ padding: 70px 0 60px; } .inner-hero .hero-title{ font-size: 2.5rem; } } .inner-hero .hero-subtitle{ font-size: 1.15rem; max-width: 860px; margin-bottom: 0; } /* Simple utilities used by internal page patterns */ .fw-800{ font-weight: 800 !important; } .text-accent-orange{ color: var(--accent-orange) !important; } .bg-teal{ background-color: var(--accent-teal) !important; } span.badge.bg-teal{ color:#fff; background: var(--accent-teal); } .bg-off-white{ background-color: var(--off-white) !important; } /* ---------- Technical page helpers ---------- */ .app-list-column{ column-count: 3; column-gap: 2rem; } .app-list-column ul{ break-inside: avoid; list-style: none; padding-left: 0; margin: 0; } .app-list-column li{ margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .app-list-column i{ color: var(--accent-teal); font-size: 1.2rem; } @media (max-width: 768px){ .app-list-column{ column-count: 2; } } @media (max-width: 576px){ .app-list-column{ column-count: 1; } } .gallery-thumb{ display: block; border-radius: 16px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-thumb:hover{ transform: scale(1.02); box-shadow: var(--shadow-lg); } .gallery-thumb img{ width: 100%; height: 200px; object-fit: cover; display: block; } .video-wrapper{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 16px; background: #000; } .video-wrapper video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .video-wrapper .wp-block-video{ margin: 0; } .video-wrapper .wp-block-video > video{ display: block; } /* Editor-only override: keep videos selectable/editable (avoid 0-height wrapper in the block editor) */ :where(.editor-styles-wrapper) .video-wrapper{ height: auto; padding-bottom: 0; } :where(.editor-styles-wrapper) .video-wrapper video{ position: static; width: 100%; height: auto; object-fit: contain; } .def-img{ border-radius: 16px; max-width: 100%; } .def-img--small{ max-width: 300px; } /* Core Image compatibility: when def-img classes are applied to the figure (block className) */ .wp-block-image.def-img img{ border-radius: 16px; max-width: 100%; height: auto; display: block; } .wp-block-image.def-img--small img{ max-width: 300px; } .content-card--narrow{ max-width: 900px; margin-left: auto; margin-right: auto; } .service-tab-image--tall{ height: 380px; } .ozgf-cta-strip{ background-color: var(--charcoal); color: #fff; padding: 4rem 0; } /* Breadcrumb on dark hero */ .breadcrumb.oz-breadcrumb{ margin-bottom: 14px; } .breadcrumb.oz-breadcrumb .breadcrumb-item, .breadcrumb.oz-breadcrumb .breadcrumb-item.active{ color: rgba(255,255,255,.75); } .breadcrumb.oz-breadcrumb .breadcrumb-item + .breadcrumb-item::before{ color: rgba(255,255,255,.45); } /* Generic content cards aligned with home aesthetics */ .content-card{ background-color: var(--white); border-radius: 16px; padding: 38px; box-shadow: var(--shadow-lg); border: 1px solid var(--light-gray); } .content-card.compact{ padding: 26px; } @media (max-width: 575px){ .content-card{ padding: 26px; } } .card-icon{ width: 52px; height: 52px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(0,140,140,.10); color: var(--accent-teal); font-size: 1.2rem; margin-bottom: 14px; } /* Check list (used across internal pages) */ .check-list{ list-style:none; padding-left:0; margin: 0; } .check-list li{ display:flex; gap: 10px; align-items:flex-start; margin: 10px 0; color: var(--dark-gray); } .check-list i{ margin-top: 3px; color: var(--accent-teal); } /* CTA box aligned to the brand */ .cta-box{ background: linear-gradient(135deg, rgba(0,140,140,.10), rgba(255,107,53,.08)); border: 1px solid rgba(0,140,140,.20); border-radius: 18px; padding: 28px 28px; box-shadow: var(--shadow-sm); } .cta-title{ font-weight: 800; } .cta-text{ color: rgba(45,45,45,.85); } /* Pricing cards */ .pricing-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 575px){ .pricing-grid{ grid-template-columns: 1fr; } } .pricing-card{ background: var(--off-white); border: 1px solid var(--light-gray); border-radius: 14px; padding: 32px 16px; text-align: center; } .pricing-card a{ border: solid 2px var(--oz-primary); color: var(--oz-primary); font-weight: 700; } .pricing-card a:hover, .pricing-card a:focus{ color: #fff; background-color: var(--oz-primary); border-color: var(--oz-primary); transition: all ease 0.3s; } .pricing-card .label{ font-size: .9rem; color: rgba(45,45,45,.75); } .pricing-card .price{ font-size: 1.6rem; font-weight: 800; margin: 2px 0 0; color: var(--charcoal); } .pricing-card .price-note{ margin: 0; color: rgba(45,45,45,.75); } /* Colour swatches (light cards, consistent with home) */ .colour-swatch{ background: var(--white); border: 1px solid var(--light-gray); border-radius: 16px; overflow:hidden; box-shadow: var(--shadow-sm); height: 100%; } .colour-swatch .swatch{ height: 110px; background: linear-gradient(135deg, rgba(0,140,140,.12), rgba(255,107,53,.10)); } .colour-swatch .meta{ padding: 14px 16px 16px; } .colour-swatch .name{ font-weight: 800; margin: 0; } .colour-swatch .note{ margin: 6px 0 0; color: rgba(45,45,45,.75); font-size: .95rem; } /* Gallery placeholders compatible with existing .gallery-item styling */ .gallery-item .img-ph{ width: 100%; height: 260px; background: linear-gradient(135deg, rgba(0,140,140,.12), rgba(0,0,0,.05)); } @media (max-width: 575px){ .gallery-item .img-ph{ height: 220px; } } /* Use brand teal as primary CTA instead of bootstrap primary */ .btn-primary{ background-color: var(--accent-teal); border-color: var(--accent-teal); } .btn-primary:hover{ background-color: #007575; border-color: #007575; } /* ----- TESTIMONIAL AUTHOR ROW (missing in original CSS extract) ----- */ .testimonial-author{ display:flex; align-items:center; gap:15px; margin-top:10px; } .testimonial-author h5{ margin:0; font-size:1.05rem; } .testimonial-author p{ margin:0; color: var(--medium-gray); font-size:0.95rem; } /* ----- PAGE HEADER (Container template + optional pattern) ----- */ .ozgf-page-header{ background: linear-gradient(135deg, rgba(0,0,0,0.90), rgba(28,28,28,0.92)); color: #fff; padding: 160px 0 80px; position: relative; overflow: hidden; } @media (max-width: 767px){ .ozgf-page-header{ padding: 130px 0 60px; } } .ozgf-page-header--has-bg{ background-size: cover; background-position: center; background-repeat: no-repeat; } .ozgf-page-header-overlay{ position:absolute; inset:0; background: linear-gradient(135deg, rgba(0,0,0,0.78), rgba(0,0,0,0.86)); pointer-events:none; } .ozgf-page-header-inner{ position:relative; z-index:2; } .ozgf-breadcrumbs{ position:relative; z-index:2; margin: 0 0 14px; font-size: 0.85rem; color: rgba(255,255,255,0.72); } .ozgf-breadcrumbs .breadcrumb{ --bs-breadcrumb-divider: '›'; padding: 0; margin: 0; background: transparent; } .ozgf-breadcrumbs .breadcrumb-item + .breadcrumb-item::before{ color: rgba(255,255,255,0.35); } .ozgf-breadcrumbs a{ color: rgba(255,255,255,0.78); text-decoration:none; } .ozgf-breadcrumbs a:hover{ color: #fff; text-decoration:underline; } .ozgf-breadcrumbs .breadcrumb-item.active{ color: rgba(255,255,255,0.78); } .ozgf-page-header:before{ content:""; position:absolute; inset:-20% -20% auto -20%; height:240px; background: radial-gradient(circle at 20% 30%, rgba(0,140,140,0.22), transparent 55%), radial-gradient(circle at 80% 40%, rgba(255,107,53,0.18), transparent 60%); pointer-events:none; transform: rotate(-2deg); } .ozgf-page-title{ position:relative; margin:0; font-weight:800; letter-spacing:-0.02em; font-size: clamp(2rem, 2.5vw, 3rem); } .ozgf-page-subtitle{ position:relative; margin:12px 0 0; font-size:1.05rem; color: rgba(255,255,255,0.88); max-width: 60ch; } /* ----------------------------- * Testimonials Carousel * ---------------------------- */ .ozgf-carousel{ position: relative; margin-top: 20px; } .ozgf-carousel-viewport{ overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ozgf-carousel-viewport::-webkit-scrollbar{ display:none; } .ozgf-carousel-track{ display: flex; flex-wrap: nowrap; align-items: stretch; gap: 20px; padding: 5px 5px 10px; } .ozgf-carousel-slide{ scroll-snap-align: start; flex: 0 0 100%; } @media (min-width: 768px){ .ozgf-carousel-slide{ flex-basis: calc(50% - 10px); } } @media (min-width: 992px){ .ozgf-carousel-slide{ flex-basis: calc(33.333% - 13.333px); } } .ozgf-carousel-btn{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.95); display: grid; place-items: center; box-shadow: var(--shadow-sm); z-index: 2; } .testimonials-section .ozgf-carousel-btn{ border-color: rgba(255,255,255,0.18); background: rgba(15,15,15,0.8); color: #fff; } .ozgf-carousel-btn[disabled]{ opacity: 0.35; cursor: not-allowed; } .ozgf-carousel-prev{ left: -10px; } .ozgf-carousel-next{ right: -10px; } @media (max-width: 576px){ .ozgf-carousel-prev{ left: -4px; } .ozgf-carousel-next{ right: -4px; } } /* ----------------------------- * Contact section variants * ---------------------------- */ .contact-section.contact--dark{ background: var(--charcoal); } .contact-section.contact--dark .section-title, .contact-section.contact--dark .section-subtitle{ color: white; } .contact-section.contact--dark .section-subtitle{ color: rgba(255,255,255,0.85); } .contact-section.contact--light{ background: var(--ozgf-bg-light, var(--light-gray)); color: var(--charcoal); } .contact-section.contact--light .contact-info{ color: #fff; } .contact-section.contact--light .section-title{ color: var(--charcoal); } .contact-section.contact--light .section-subtitle{ color: rgba(26,26,26,0.7); } .contact-section.contact--light .contact-container{ box-shadow: var(--shadow-md); } .contact-section.contact--light .contact-form{ background: #fff; } .contact-section.contact--light .contact-form label{ color: rgba(26,26,26,0.8); } .contact-section.contact--light .contact-form .form-control, .contact-section.contact--light .contact-form .form-select{ background: #fff; border-color: rgba(0,0,0,0.12); color: var(--charcoal); } .contact-section.contact--light .contact-form .form-control:focus, .contact-section.contact--light .contact-form .form-select:focus{ border-color: rgba(30,200,195,0.55); box-shadow: 0 0 0 0.25rem rgba(30,200,195,0.15); } /* ----------------------------- * Floating WhatsApp Button * ---------------------------- */ .ozgf-whatsapp-float{ position: fixed; right: 20px; bottom: 20px; z-index: 9999; display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 999px; background: #25D366; color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,0.22); text-decoration: none; transform: translateZ(0); } .ozgf-whatsapp-float:hover{ color:#fff; filter: brightness(0.98); transform: translateY(-1px); } .ozgf-whatsapp-float i{ font-size: 22px; line-height: 1; } .ozgf-whatsapp-float__text{ font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; } @media (max-width: 420px){ .ozgf-whatsapp-float__text{ display:none; } .ozgf-whatsapp-float{ padding: 12px; } } /* Hero divider should match next section background */ .hero-section .shape-divider-bottom path{ fill: var(--ozgf-hero-divider-color, var(--ozgf-bg-light, #ffffff)) !important; } /* Gallery safety overrides (avoid overlap from third-party styles) */ .gallery-grid{ display:grid !important; grid-auto-flow: row; align-items: stretch; } .gallery-item{ width:100%; isolation:isolate; } .gallery-item img{ display:block; } .gallery-overlay{ z-index:2; pointer-events:none; } /* Contact dark mode fixes */ .contact-section.contact--dark a{ color: rgba(255,255,255,0.88); text-decoration: none; } .contact-section.contact--dark a:hover{ color:#fff; text-decoration: underline; } .contact-section.contact--dark .contact-form{ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); } .contact-section.contact--dark .contact-form label{ color: rgba(255,255,255,0.86); } .contact-section.contact--dark .contact-form .form-control, .contact-section.contact--dark .contact-form .form-select{ background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.16); color: #fff; } .contact-section.contact--dark .contact-form .form-control::placeholder{ color: rgba(255,255,255,0.55); } .contact-section.contact--dark .contact-form .form-control:focus, .contact-section.contact--dark .contact-form .form-select:focus{ border-color: rgba(30,200,195,0.55); box-shadow: 0 0 0 0.25rem rgba(30,200,195,0.18); } .contact-section.contact--dark .contact-detail p, .contact-section.contact--dark .contact-detail h5{ color: rgba(255,255,255,0.90); } /* Contact form readability (WPForms): keep text dark because the form surface is white (works in both light + dark mode). */ .contact-form, .contact-section .contact-form{ background: #fff; color: var(--charcoal, #1f1f1f); } .contact-form h1, .contact-form h2, .contact-form h3, .contact-form h4, .contact-form h5, .contact-form h6, .contact-form p, .contact-form label, .contact-section .contact-form h1, .contact-section .contact-form h2, .contact-section .contact-form h3, .contact-section .contact-form h4, .contact-section .contact-form h5, .contact-section .contact-form h6, .contact-section .contact-form p, .contact-section .contact-form label{ color: var(--charcoal, #1f1f1f); } .contact-form a, .contact-section .contact-form a{ color: var(--accent-teal, #008c8c); } .contact-form a:hover, .contact-section .contact-form a:hover{ color: var(--accent-teal, #008c8c); text-decoration: underline; } /* WPForms core typography + field colors */ .contact-form .wpforms-container, .contact-form .wpforms-container .wpforms-title, .contact-form .wpforms-container .wpforms-description, .contact-form .wpforms-container .wpforms-field-label, .contact-form .wpforms-container .wpforms-field-sublabel, .contact-form .wpforms-container .wpforms-required-label, .contact-section .contact-form .wpforms-container, .contact-section .contact-form .wpforms-container .wpforms-title, .contact-section .contact-form .wpforms-container .wpforms-description, .contact-section .contact-form .wpforms-container .wpforms-field-label, .contact-section .contact-form .wpforms-container .wpforms-field-sublabel, .contact-section .contact-form .wpforms-container .wpforms-required-label{ color: var(--charcoal, #1f1f1f); } .contact-form .wpforms-container input[type="text"], .contact-form .wpforms-container input[type="email"], .contact-form .wpforms-container input[type="tel"], .contact-form .wpforms-container input[type="url"], .contact-form .wpforms-container select, .contact-form .wpforms-container textarea, .contact-section .contact-form .wpforms-container input[type="text"], .contact-section .contact-form .wpforms-container input[type="email"], .contact-section .contact-form .wpforms-container input[type="tel"], .contact-section .contact-form .wpforms-container input[type="url"], .contact-section .contact-form .wpforms-container select, .contact-section .contact-form .wpforms-container textarea{ background: #fff; color: var(--charcoal, #1f1f1f); border-color: rgba(0,0,0,0.12); } .contact-form .wpforms-container input::placeholder, .contact-form .wpforms-container textarea::placeholder, .contact-section .contact-form .wpforms-container input::placeholder, .contact-section .contact-form .wpforms-container textarea::placeholder{ color: rgba(26,26,26,0.55); } /* ========================= DECO: Before/After + Colours + Pricing ========================= */ .ozgf-ph{ display:flex; align-items:center; justify-content:center; min-height: 160px; border: 1px dashed rgba(0,0,0,0.18); border-radius: 14px; color: rgba(0,0,0,0.55); background: rgba(0,0,0,0.03); } .ozgf-ba-section .section-header{ margin-bottom: 18px; } .ozgf-ba{ position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); height: var(--ozgf-ba-height, 420px); background: rgba(0,0,0,0.06); } .ozgf-ba__img{ position:absolute; inset:0; background-size: cover; background-position:center; } .ozgf-ba__img--after{ /* Default: show the AFTER image on the right side (matches badges: Before=left, After=right) */ clip-path: inset(0 0 0 50%); } .ozgf-ba__range{ position:absolute; left: 0; right: 0; bottom: 18px; width: calc(100% - 36px); margin: 0 18px; z-index: 4; } .ozgf-ba__handle{ position:absolute; top:0; bottom:0; left:50%; width: 3px; background: rgba(255,255,255,0.85); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); z-index: 3; } .ozgf-ba__caption{ margin-top: 10px; color: rgba(0,0,0,0.65); font-size: 0.95rem; } /* Colours grid */ .ozgf-colours__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 991px){ .ozgf-colours__grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px){ .ozgf-colours__grid{ grid-template-columns: 1fr; } } .ozgf-colour-card{ border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); background: rgba(255,255,255,0.92); transition: transform .18s ease, box-shadow .18s ease; } .ozgf-colour-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); } .ozgf-colour-card__media{ position: relative; aspect-ratio: 4 / 3; background: rgba(0,0,0,0.06); overflow: hidden; } .ozgf-colour-card__media img{ width: 100%; height: 100%; object-fit: cover; display:block; } .ozgf-colour-card__zoom{ position:absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 999px; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.55); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; } .ozgf-colour-card__media:hover .ozgf-colour-card__zoom{ opacity: 1; transform: translateY(0); } .ozgf-colour-card__body{ padding: 14px 14px 16px; } .ozgf-colour-card__title{ font-size: 1.05rem; margin: 0 0 6px; } .ozgf-colour-card__note{ margin: 0; color: rgba(0,0,0,0.72); font-size: 0.95rem; } /* Pricing */ .ozgf-pricing__grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 12px; } @media (max-width: 767px){ .ozgf-pricing__grid{ grid-template-columns: 1fr; } } .ozgf-price-card{ border-radius: 18px; padding: 18px; background: rgba(255,255,255,0.95); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.06); } .ozgf-price-card__title{ margin: 0 0 10px; font-size: 1.05rem; } .ozgf-price-card__price{ font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; } .ozgf-price-card__meta{ margin-top: 6px; color: rgba(0,0,0,0.65); } .ozgf-pricing__disclaimer{ margin-top: 14px; color: rgba(0,0,0,0.65); font-size: 0.95rem; } /* Lightbox */ .ozgf-lightbox{ position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.78); } .ozgf-lightbox.is-open{ display:flex; } .ozgf-lightbox__img{ max-width: min(1100px, 92vw); max-height: 82vh; border-radius: 16px; box-shadow: var(--shadow-lg); } .ozgf-lightbox__close{ position:absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.15); color: #fff; display:flex; align-items:center; justify-content:center; } .ozgf-lightbox__close:hover{ background: rgba(255,255,255,0.25); } /* ============================== Deco Flaky system additions (v1.0.24) ============================== */ .btn-outline-teal { border: 2px solid var(--teal); color: var(--teal); background: transparent; } .btn-outline-teal:hover, .btn-outline-teal:focus { background: var(--teal); color: #fff; } .floor-thumb { display: block; width: 100%; border: 0; padding: 0; background: transparent; border-radius: 16px; overflow: hidden; position: relative; cursor: zoom-in; } .floor-thumb img { width: 100%; height: 190px; object-fit: cover; display: block; } .floor-thumb .zoom-icon { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.25); } .franklin-quote p { margin: 0; } /* Before/After — make slider feel like the mockup */ .ozgf-ba-section .ozgf-ba { padding-bottom: 0; } .ozgf-ba-section .ozgf-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } .ozgf-ba-section .ozgf-ba__handle { width: 2px; background: rgba(255, 255, 255, 0.95); } .ozgf-ba-section .ozgf-ba__handle::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.95); box-shadow: 0 10px 25px rgba(0,0,0,0.30); } /* Deco page UI enhancements (hover + lightbox) */ .colour-swatch { cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .colour-swatch:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .floor-thumb:hover img { transform: scale(1.03); } .floor-thumb:hover .zoom-icon { opacity: 1; } /* Lightbox (used for colour gallery zoom) */ .ozgf-lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; justify-content: center; align-items: center; } .ozgf-lightbox.is-open, .ozgf-lightbox.is-active { display: flex; } .ozgf-lightbox img, .ozgf-lightbox__img { max-width: 90%; max-height: 90%; border-radius: 8px; } .ozgf-lightbox__close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: #fff; cursor: pointer; line-height: 1; } /* Swatch image wrapper (removes inline styles) */ .colour-swatch .swatch { height: 140px; overflow: hidden; } .colour-swatch .swatch img { width: 100%; height: 100%; object-fit: cover; } /* Taller swatches (Full Flakes) */ .colour-swatch--tall .swatch{ height: 200px; } /* Section background helper (replaces inline style) */ .oz-section--light { background-color: var(--light-gray); } /* Pricing cards enhancement */ .pricing-card { transition: all 0.3s ease; } .pricing-card:hover { transform: translateY(-8px); box-shadow: 0 25px 40px rgba(0,0,0,0.12); } .oz-section--offwhite{ background-color: var(--off-white); } /* ===== WHY US PAGE (scoped) ===== */ .ozgf-page--whyus .reason-card{ background: #fff; border-radius: 24px; padding: 2rem 1.5rem; height: 100%; box-shadow: 0 10px 25px rgba(0,0,0,0.02); border: 1px solid var(--light-gray); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .ozgf-page--whyus .reason-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 35px rgba(0,140,140,0.08); border-color: var(--accent-teal); } .ozgf-page--whyus .reason-number{ font-size: 3rem; font-weight: 800; color: var(--accent-teal); line-height: 1; margin-bottom: 0.75rem; opacity: 0.7; } .ozgf-page--whyus .reason-title{ font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--charcoal); } .ozgf-page--whyus .reason-text{ color: var(--medium-gray); font-size: 0.95rem; line-height: 1.6; } /* Gallery grid */ .ozgf-page--whyus .gallery-grid{ display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2rem; } @media (min-width: 768px){ .ozgf-page--whyus .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px){ .ozgf-page--whyus .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ozgf-page--whyus .gallery-item{ border-radius: 18px; overflow: hidden; height: 180px; box-shadow: var(--shadow-sm); transition: all 0.3s ease; display: block; } .ozgf-page--whyus .gallery-item:hover{ transform: scale(1.02); box-shadow: var(--shadow-lg); } .ozgf-page--whyus .gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .ozgf-page--whyus .gallery-item:hover img{ transform: scale(1.05); } /* Testimonials grid + cards */ .ozgf-page--whyus .testimonial-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.8rem; margin-top: 2rem; } .ozgf-page--whyus .testimonial-card{ background: linear-gradient(145deg, #ffffff, #fafafa); border-radius: 28px; padding: 2rem 1.5rem; box-shadow: 0 15px 30px rgba(0,0,0,0.03); border: 1px solid rgba(0,140,140,0.1); transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%; } .ozgf-page--whyus .testimonial-card:hover{ border-color: var(--accent-teal); box-shadow: 0 25px 40px rgba(0,140,140,0.12); } .ozgf-page--whyus .quote-icon{ color: var(--accent-teal); font-size: 2.5rem; opacity: 0.2; margin-bottom: 0.5rem; } .ozgf-page--whyus .testimonial-text{ flex-grow: 1; font-style: italic; color: var(--dark-gray); margin-bottom: 1.8rem; line-height: 1.7; font-size: 0.98rem; padding: 0; } .ozgf-page--whyus .testimonial-author{ display: flex; align-items: center; gap: 1rem; border-top: 1px dashed rgba(0,140,140,0.2); padding-top: 1.2rem; } .ozgf-page--whyus .author-img{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent-orange); } .ozgf-page--whyus .author-placeholder{ width: 56px; height: 56px; border-radius: 50%; background: var(--light-gray); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; color: var(--accent-teal); border: 3px solid var(--accent-teal); } .ozgf-page--whyus .author-info h5{ margin: 0; font-weight: 700; color: var(--charcoal); } .ozgf-page--whyus .author-info p{ margin: 0; font-size: 0.85rem; color: var(--medium-gray); } /* FAQ (scoped to Why Us) */ .ozgf-page--whyus .faq-container{ max-width: 900px; margin: 2rem auto 0; } .ozgf-page--whyus .faq-item{ background: #fff; border-radius: 20px; margin-bottom: 1rem; box-shadow: 0 8px 25px rgba(0,0,0,0.02); border: 1px solid var(--light-gray); overflow: hidden; } .ozgf-page--whyus .faq-question{ width: 100%; border: 0; padding: 1.3rem 2rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #fff; transition: background 0.2s; font-size: 1.1rem; text-align: left; } .ozgf-page--whyus .faq-question:hover{ background: #f8f9fa; color: inherit; } .ozgf-page--whyus .faq-question .faq-icon{ color: var(--accent-teal); transition: transform 0.3s; } .ozgf-page--whyus .faq-answer{ padding: 0 2rem; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; background: #fafafa; color: var(--medium-gray); line-height: 1.7; } .ozgf-page--whyus .faq-answer.active{ padding: 1.5rem 2rem 2rem; max-height: 2000px; } /* CTA section */ .ozgf-page--whyus .cta-section{ background-color: var(--charcoal); color: #fff; padding: 4rem 0; } .ozgf-page--whyus .cta-icon{ color: var(--accent-orange); } /* ===================== Page — Gallery ===================== */ .ozgf-page--gallery .ozgf-ba-card, .ozgf-page--gallery .ozgf-step-card{ background: #fff; border: 1px solid var(--light-gray); border-radius: 24px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.05); transition: transform .25s ease, box-shadow .25s ease; } .ozgf-page--gallery .ozgf-ba-card:hover, .ozgf-page--gallery .ozgf-step-card:hover{ transform: translateY(-5px); box-shadow: 0 25px 40px rgba(0,140,140,0.08); } .ozgf-page--gallery .ozgf-ba-card .ozgf-ba{ border-radius: 0; box-shadow: none; } .ozgf-page--gallery .ozgf-ba--gallery{ --ozgf-ba-height: 300px; } .ozgf-page--gallery .ozgf-gallery-ba-label{ position: absolute; bottom: 58px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.8rem; font-weight: 700; z-index: 5; pointer-events: none; } .ozgf-page--gallery .ozgf-gallery-ba-label--before{ left: 12px; } .ozgf-page--gallery .ozgf-gallery-ba-label--after{ right: 12px; } /* Step-by-step cards */ .ozgf-page--gallery .ozgf-step-card{ padding: 1.5rem; } .ozgf-page--gallery .ozgf-step-card h4{ color: var(--oz-primary); font-weight: 700; margin-bottom: 0.5rem; } .ozgf-page--gallery .ozgf-step-images{ display: flex; gap: 8px; margin-top: 1rem; } .ozgf-page--gallery .ozgf-step-images.ozgf-step-images--wrap{ flex-wrap: wrap; } .ozgf-page--gallery .ozgf-step-item{ flex: 1 1 0; height: 150px; border-radius: 12px; overflow: hidden; } .ozgf-page--gallery .ozgf-step-images.ozgf-step-images--wrap .ozgf-step-item{ flex: 1 1 calc(50% - 8px); height: 120px; } .ozgf-page--gallery .ozgf-step-item img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .ozgf-page--gallery .ozgf-step-item:hover img{ transform: scale(1.05); } .ozgf-page--gallery .ozgf-step-label{ margin-top: 0.5rem; font-weight: 700; color: var(--accent-teal); } @media (max-width: 768px){ .ozgf-page--gallery .ozgf-ba--gallery{ --ozgf-ba-height: 250px; } .ozgf-page--gallery .ozgf-step-item{ height: 120px; } .ozgf-page--gallery .ozgf-step-images.ozgf-step-images--wrap .ozgf-step-item{ height: 110px; } } /* Product colours variants */ .ozgf-product-colours--full .colour-swatch .meta{ padding: 14px 16px 16px; } .ozgf-product-colours--full .colour-swatch .note{ display:none; } /* ============================== Lightbox navigation + mobile UI tweaks (v1.0.66) ============================== */ /* Lightbox: prev/next buttons + counter */ .ozgf-lightbox__nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; } .ozgf-lightbox__nav:hover{ background: rgba(255,255,255,0.25); } .ozgf-lightbox__nav:disabled{ opacity: 0.35; cursor: not-allowed; } .ozgf-lightbox__nav--prev{ left: 18px; } .ozgf-lightbox__nav--next{ right: 18px; } .ozgf-lightbox__meta{ position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.35); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 0.9rem; } /* Mobile: easier tapping + prevent nav overflow */ @media (max-width: 575px){ .ozgf-lightbox{ padding: 14px; } .ozgf-lightbox__nav{ width: 52px; height: 52px; } .ozgf-lightbox__nav--prev{ left: 10px; } .ozgf-lightbox__nav--next{ right: 10px; } .gallery-item{ height: 220px; } } /* Navbar contact items: stack on small screens */ @media (max-width: 576px){ .nav-contact{ flex-direction: column; align-items: stretch; gap: 10px; } .nav-phone, .btn-whatsapp-nav{ width: 100%; justify-content: center; } .navbar-custom .navbar-collapse{ padding-bottom: 12px; } } /* Mobile menu: center nav text */ @media (max-width: 991.98px){ .navbar-custom .navbar-nav{ width:100%; } .navbar-custom .navbar-nav .nav-link{ text-align:center; } .navbar-custom .dropdown-menu{ text-align:center; } .navbar-custom .dropdown-item{ text-align:center; } /* Mobile: stack phone + CTA (one per row) */ .navbar-custom .nav-utility{ flex-direction: column; align-items: stretch; gap: 12px; } .navbar-custom .nav-utility .nav-phone{ width: 100%; justify-content: center; text-align: center; } .navbar-custom .nav-utility .btn-quote{ width: 100%; } } /* Before/After: reduce height slightly on mobile to avoid excessive scrolling */ .ozgf-ba--gallery{ --ozgf-ba-height: 380px; } @media (max-width: 575px){ .ozgf-ba--gallery{ --ozgf-ba-height: 300px; } } /* ========================================= OZGF — Dropdown (Navbar) polish Coherent with theme palette (charcoal + accent teal + accent orange) Scope: navbar only (won't affect other dropdowns) ========================================= */ .navbar-custom .dropdown-menu{ /* Override Bootstrap dropdown variables (stable + future-proof) */ --bs-dropdown-bg: rgba(30, 30, 30, 0.98); --bs-dropdown-border-color: rgba(0, 140, 140, 0.35); --bs-dropdown-divider-bg: rgba(255, 255, 255, 0.12); --bs-dropdown-link-color: rgba(255, 255, 255, 0.90); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: rgba(0, 140, 140, 0.16); --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: var(--accent-teal); --bs-dropdown-border-radius: 14px; border: 1px solid var(--bs-dropdown-border-color); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); margin-top: 10px; } .navbar-custom .dropdown-item{ position: relative; font-weight: 600; border-radius: 10px; padding: 10px 14px; transition: background-color .18s ease, color .18s ease; } /* Orange underline accent (matches nav-link underline) */ .navbar-custom .dropdown-item::before{ content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--accent-orange); opacity: 0; transform: scaleX(0); transform-origin: left center; transition: transform .18s ease, opacity .18s ease; } .navbar-custom .dropdown-item:hover::before, .navbar-custom .dropdown-item:focus::before, .navbar-custom .dropdown-item.active::before, .navbar-custom .dropdown-item:active::before{ opacity: 1; transform: scaleX(1); } /* Replace Bootstrap defaults for active/pressed */ .navbar-custom .dropdown-item.active, .navbar-custom .dropdown-item:active{ background-color: var(--accent-teal); color: #fff; text-decoration: none; } /* Hover/Focus (non-active) */ .navbar-custom .dropdown-item:hover, .navbar-custom .dropdown-item:focus{ background-color: rgba(0, 140, 140, 0.16); color: #fff; } /* Accessibility: visible focus ring */ .navbar-custom .dropdown-item:focus-visible{ outline: 2px solid var(--accent-orange); outline-offset: 2px; } /* Dropdown caret color + animation */ .navbar-custom .dropdown-toggle::after{ border-top-color: var(--accent-orange); transition: transform .18s ease; margin-left: .45rem; } .navbar-custom .dropdown-toggle[aria-expanded="true"]::after{ transform: rotate(180deg); } /* Mobile: larger tap targets */ @media (max-width: 991.98px){ .navbar-custom .dropdown-menu{ margin-top: 6px; border-radius: 12px; } .navbar-custom .dropdown-item{ padding: 12px 14px; } } /* ========================================= OZGF — Text selection (coherent with theme) ========================================= */ ::-moz-selection { background-color: var(--accent-teal); color:#fff; } ::selection { background-color: var(--accent-teal); color:#fff; } /* ========================================= OZGF — Centered section titles Fix: .section-title is inline-block by default (underline tight), so .text-center did not center the element itself. We only switch to block+full-width when text-center is explicitly used. ========================================= */ .section-title.text-center{ display:block; width:100%; } /* ========================================= OZGF — Reviews carousel (Testimonials) 3-up desktop, step-by-1 navigation ========================================= */ .ozgf-reviews-carousel{ position: relative; margin-top: 2rem; } .ozgf-reviews-track{ display:flex; gap: 1.5rem; overflow-x:auto; padding: .25rem .25rem .5rem; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* Hide scrollbar (keep scroll enabled) */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ } .ozgf-reviews-track::-webkit-scrollbar{ display:none; height: 0; } .ozgf-reviews-track .testimonial-card{ flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start; } @media (max-width: 991.98px){ .ozgf-reviews-track .testimonial-card{ flex-basis: calc((100% - 1.5rem) / 2); } } @media (max-width: 575.98px){ .ozgf-reviews-track{ gap: 1rem; } .ozgf-reviews-track .testimonial-card{ flex-basis: 100%; } } .ozgf-reviews-btn{ position:absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(0,140,140,0.35); background: rgba(30,30,30,0.85); color: #fff; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lg); z-index: 2; } .ozgf-reviews-btn:hover{ background: rgba(0,140,140,0.22); } .ozgf-reviews-btn:focus-visible{ outline: 2px solid var(--accent-orange); outline-offset: 2px; } .ozgf-reviews-btn--prev{ left: -8px; } .ozgf-reviews-btn--next{ right: -8px; } @media (max-width: 575.98px){ .ozgf-reviews-btn{ width: 40px; height: 40px; } .ozgf-reviews-btn--prev{ left: -6px; } .ozgf-reviews-btn--next{ right: -6px; } } .ozgf-reviews-btn.is-disabled, .ozgf-reviews-btn:disabled{ opacity: .35; cursor: default; } /* Buttons remain clickable (loop). Reduce opacity as a subtle affordance only. */ .ozgf-reviews-btn.is-at-start, .ozgf-reviews-btn.is-at-end{ opacity: .85; } .review-stars{ display:flex; align-items:center; gap: 4px; margin-bottom: 14px; } .review-stars i{ color: var(--accent-orange); font-size: 1rem; } /* ========================================= OZGF — Technical spacing fixes Titles underline uses negative bottom, which can make content feel "too tight". Here we give Technical page titles real breathing room. ========================================= */ .ozgf-tech .section-title{ padding-bottom: 12px; margin-bottom: 24px !important; } .ozgf-tech .section-title:after{ bottom: 0; } .ozgf-tech .oz-section .section-title + .row, .ozgf-tech .oz-section .section-title + .gallery-grid{ margin-top: 1.75rem; } /* ========================================= Testimonials — unify visuals (Home + Why Us) Ensures Home testimonials match the Why Us testimonial card style. ========================================= */ .testimonials-section .testimonial-card, .ozgf-carousel .testimonial-card, .ozgf-reviews-carousel .testimonial-card, .ozgf-reviews-track .testimonial-card, .testimonial-grid .testimonial-card{ background: linear-gradient(145deg, #ffffff, #fafafa); border-radius: 28px; padding: 2rem 1.5rem; box-shadow: 0 15px 30px rgba(0,0,0,0.03); border: 1px solid rgba(0,140,140,0.10); border-top: 5px solid var(--accent-teal); margin: 0; transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%; } .testimonials-section .testimonial-card:hover, .ozgf-carousel .testimonial-card:hover, .ozgf-reviews-carousel .testimonial-card:hover, .ozgf-reviews-track .testimonial-card:hover, .testimonial-grid .testimonial-card:hover{ border-color: var(--accent-teal); box-shadow: 0 25px 40px rgba(0,140,140,0.12); } .testimonials-section .testimonial-text, .ozgf-carousel .testimonial-text, .ozgf-reviews-carousel .testimonial-text, .ozgf-reviews-track .testimonial-text, .testimonial-grid .testimonial-text{ flex-grow: 1; font-style: italic; color: var(--dark-gray); margin-bottom: 1.8rem; line-height: 1.7; font-size: 0.98rem; padding: 0; } .testimonials-section .testimonial-author, .ozgf-carousel .testimonial-author, .ozgf-reviews-carousel .testimonial-author, .ozgf-reviews-track .testimonial-author, .testimonial-grid .testimonial-author{ display: flex; align-items: center; gap: 1rem; border-top: 1px dashed rgba(0,140,140,0.2); padding-top: 1.2rem; } .testimonials-section .author-placeholder, .ozgf-carousel .author-placeholder, .ozgf-reviews-carousel .author-placeholder, .ozgf-reviews-track .author-placeholder, .testimonial-grid .author-placeholder{ width: 56px; height: 56px; border-radius: 50%; background: var(--light-gray); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; color: var(--accent-teal); border: 3px solid var(--accent-teal); } .testimonials-section .author-info h5, .ozgf-carousel .author-info h5, .ozgf-reviews-carousel .author-info h5, .ozgf-reviews-track .author-info h5, .testimonial-grid .author-info h5{ margin: 0; font-weight: 700; color: var(--charcoal); } .testimonials-section .author-info p, .ozgf-carousel .author-info p, .ozgf-reviews-carousel .author-info p, .ozgf-reviews-track .author-info p, .testimonial-grid .author-info p{ margin: 0; font-size: 0.85rem; color: var(--medium-gray); } /* ========================= GLOBAL Before/After labels (Previously scoped to .ozgf-page--gallery only) ========================= */ .ozgf-ba--gallery .ozgf-gallery-ba-label{ position: absolute; bottom: 58px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.8rem; font-weight: 700; z-index: 5; pointer-events: none; } .ozgf-ba--gallery .ozgf-gallery-ba-label--before{ left: 12px; } .ozgf-ba--gallery .ozgf-gallery-ba-label--after{ right: 12px; } /* --- HOTFIX: ensure sticky header works even if Bootstrap sticky styles are overridden --- */ .navbar-custom.sticky-top{ position: -webkit-sticky; position: sticky; top: 0; z-index: 1030; } /* --- HOTFIX: footer centered on mobile --- */ @media (max-width: 575.98px){ .main-footer{ text-align: center; } .main-footer .footer-heading:after, .main-footer .footer-brand-title-text:after{ left: 50%; transform: translateX(-50%); } .main-footer .social-links{ justify-content: center; } .main-footer .footer-accreditations{ justify-content: center; } .main-footer .footer-links li{ display:flex; justify-content:center; align-items:center; gap:8px; } .main-footer .footer-links a:hover{ transform: none; } .main-footer .footer-bottom{ text-align:center; } } /* HOTFIX: Homogeneous hero padding (desktop 100px, mobile 70px) */ .hero-section{ padding-top: 100px; padding-bottom: 100px; } .inner-hero{ padding-top: 100px; padding-bottom: 100px; } @media (max-width: 991.98px){ .hero-section{ padding-top: 70px; padding-bottom: 70px; } .inner-hero{ padding-top: 70px; padding-bottom: 70px; } } /* WebP