/* Theme Name: Tharros Theme URI: https://tharroshouse.com Author: Dashing Digital Marketing Description: Custom classic theme for Tharros House. Carries the shared design system, header/nav and footer from the approved static redesign; page content is built with WPBakery Page Builder. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: Proprietary Text Domain: tharros */ :root { --primary-blue: #2C3E50; --secondary-slate: #5A6774; --accent-blue-warm: #9CB6D5; --light-gray-warm: #EAEBE6; --off-white-warm: #F9F6F2; --white: #FFFFFF; --text-primary: #212529; --text-secondary: #4A5568; --font-primary: 'Poppins', sans-serif; --font-secondary: 'Montserrat', 'Helvetica', 'Arial', sans-serif; --section-padding-y: clamp(70px, 9vw, 120px); --border-radius-sleek: 8px; --border-radius-smooth: 12px; --transition-elegant: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); --transition-subtle: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); --shadow-soft: 0 15px 50px rgba(60, 45, 40, 0.08); --shadow-medium: 0 25px 65px rgba(60, 45, 40, 0.1); } /* HARD FORCED FONTS */ body, p, a, span, li, input, textarea, .testimonial-card-deluxe blockquote, .bio { font-family: 'Montserrat', sans-serif !important; } h1, h2, h3, h4, h5, h6, .btn, .btn-secondary, .kicker, .step-number, .wpforms-field-label, .wpforms-submit { font-family: 'Poppins', sans-serif !important; } ::selection { background-color: var(--accent-blue-warm); color: var(--white); } body, html { margin: 0; padding: 0; font-family: var(--font-secondary); color: var(--text-primary); background-color: var(--off-white-warm); line-height: 1.8; scroll-behavior: smooth; font-size: 17px; overflow-x: hidden; font-weight: 400; } body.mobile-menu-open { overflow: hidden; } .container { width: 90%; max-width: 1200px; margin: 0 auto; } .container-tight { width: 85%; max-width: 960px; margin: 0 auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); color: var(--primary-blue); margin: 0 0 0.6em 0; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: clamp(3em, 6.5vw, 5.2em); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; } h2 { font-size: clamp(2.3em, 5vw, 3.4em); font-weight: 600; } h3 { font-size: clamp(1.6em, 4vw, 2.1em); font-weight: 500; } p { margin: 0 0 1.6em 0; font-size: 1.1em; color: var(--text-secondary); line-height: 1.9; } p:last-child { margin-bottom: 0; } p.lead { font-size: 1.45em; color: var(--secondary-slate); margin-bottom: 1.8em; font-weight: 300; line-height: 1.75; } a { color: var(--primary-blue); text-decoration: none; transition: var(--transition-subtle); } a:hover { color: var(--accent-blue-warm); } .btn { display: inline-block; padding: 18px 40px; background-color: var(--primary-blue); color: var(--white) !important; text-decoration: none; border-radius: var(--border-radius-sleek); font-size: 1em; font-weight: 500; transition: var(--transition-elegant); border: none; box-shadow: 0 8px 25px rgba(44, 62, 80, 0.18); letter-spacing: 0.02em; } .btn:hover { background-color: var(--secondary-slate); transform: translateY(-4px); box-shadow: 0 12px 35px rgba(90, 103, 116, 0.22); color: var(--white) !important; } .btn-text-link { color: var(--primary-blue); font-weight: 500; text-decoration: none; position: relative; padding-bottom: 8px; font-size: 1.1em; } .btn-text-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: var(--accent-blue-warm); transition: var(--transition-elegant); } .btn-text-link:hover::after { width: 100%; } /* Top Bar Styles */ .top-bar { background-color: var(--primary-blue); color: #fff; font-size: 0.85em; padding: 10px 0; position: relative; z-index: 1002; } .top-bar .header-container { height: auto; justify-content: flex-end; padding: 0 30px; width: 90%; max-width: 1350px; margin: 0 auto; display: flex; } .top-bar-link { color: rgba(255,255,255,0.9); display: inline-flex; align-items: center; gap: 6px; font-weight: 400; letter-spacing: 0.02em; } .top-bar-link:hover { color: #fff; text-decoration: underline; opacity: 1; } .top-bar-separator { margin: 0 15px; color: rgba(255,255,255,0.4); } /* Main Header Styles */ .main-header { background-color: rgba(249, 246, 242, 0.98); border-bottom: 1px solid rgba(0,0,0,0.05); width: 100%; position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,0.03); transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .main-header.scrolled { background-color: rgba(249, 246, 242, 0.99); border-bottom-color: var(--light-gray-warm); box-shadow: 0 6px 30px rgba(60, 45, 40, 0.04); } .header-container { display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: 1350px; margin: 0 auto; padding: 0 30px; height: 90px; } /* Logo Styling */ .logo-container { flex-shrink: 0; z-index: 1002; } .logo-container img { height: 75px; width: auto; object-fit: contain; display: block; transition: transform 0.3s ease; } .logo-container:hover img { transform: scale(1.02); } /* Desktop Nav Styling */ .desktop-nav { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; } .desktop-nav > li { position: relative; padding: 25px 0; margin: 0 18px; } .desktop-nav > li > a { font-size: 0.9em; color: var(--primary-blue); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 5px; } .desktop-nav > li > a:hover { color: var(--accent-blue-warm); } .nav-arrow { font-size: 0.6em; opacity: 0.6; transition: transform 0.3s ease; } .desktop-nav > li:hover .nav-arrow { transform: rotate(180deg); } /* Dropdown Menu */ .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(15px); background-color: var(--white); min-width: 240px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); border-radius: 0 0 6px 6px; padding: 12px 0; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); border-top: 3px solid var(--accent-blue-warm); z-index: 1100; list-style: none; } .desktop-nav > li:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown-menu li { display: block; margin: 0; padding: 0; } .dropdown-menu a { display: block; padding: 12px 25px; text-transform: none; font-size: 0.95em; font-weight: 500; color: var(--text-secondary); white-space: nowrap; text-align: left; border-left: 3px solid transparent; } .dropdown-menu a:hover { background-color: var(--off-white-warm); color: var(--primary-blue); border-left-color: var(--primary-blue); padding-left: 30px; } /* Mobile Toggle */ .mobile-menu-toggle { display: none; cursor: pointer; background: none; border: none; padding: 10px; margin-left: auto; z-index: 1002; } .hamburger-line { width: 30px; height: 3px; background-color: var(--primary-blue); border-radius: 3px; display: block; position: relative; transition: all 0.3s ease-in-out; } .hamburger-line::before, .hamburger-line::after { content: ''; position: absolute; width: 30px; height: 3px; background-color: var(--primary-blue); border-radius: 3px; left: 0; transition: all 0.3s ease-in-out; } .hamburger-line::before { transform: translateY(-10px); } .hamburger-line::after { transform: translateY(10px); } body.mobile-menu-open .hamburger-line { background-color: transparent !important; } body.mobile-menu-open .hamburger-line::before { transform: rotate(45deg) translate(7px, 7px) !important; } body.mobile-menu-open .hamburger-line::after { transform: rotate(-45deg) translate(7px, -7px) !important; } .mobile-nav-container { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(249, 246, 242, 0.98); backdrop-filter: blur(10px); z-index: 1001; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease; } .mobile-nav-container.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .mobile-nav-container ul { list-style: none; padding: 0; margin: 0; text-align: center; } .mobile-nav-container li { margin: 20px 0; } .mobile-nav-container a { font-size: 1.8em; font-weight: 500; color: var(--primary-blue); } /* Hero Section */ .hero { min-height: calc(var(--vh, 1vh) * 100); display: flex; align-items: stretch; justify-content: center; text-align: center; position: relative; color: var(--white); box-sizing: border-box; } .hero-background-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(44, 62, 80, 0.3) 0%, rgba(44, 62, 80, 0.8) 100%); z-index: 1; } .hero .container { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(60px, 8vh, 120px) 20px; } .hero-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 2.5vh, 36px); animation: heroTextAppear 1.2s var(--transition-elegant) 0.5s forwards; } @keyframes heroTextAppear { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } .hero h1 { color: var(--white); text-shadow: 0 4px 15px rgba(0,0,0,0.4); font-weight: 700; margin-bottom: 0; } .hero .sub-headline { font-size: 1.5em; color: rgba(255,255,255,0.98); max-width: 820px; margin: 0 auto; font-weight: 300; line-height: 1.9; margin-bottom: 0; } .scroll-down-indicator { flex-shrink: 0; color: var(--white); opacity: 0; animation: fadeInScroll 1s 2.5s ease-out forwards; display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; padding-top: 40px; } .scroll-down-indicator span { font-size: 0.85em; letter-spacing: 0.1em; margin-bottom: 10px; font-weight: 400; } .scroll-down-indicator svg { width: 20px; height: auto; animation: bounceArrow 2.2s infinite ease-in-out; } @keyframes fadeInScroll { to { opacity: 0.9; } } @keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* General Section Styling - spacing/font sizing aligned with Indexrv6 */ .section { padding: var(--section-padding-y) 0; position: relative; overflow: hidden; } .section-tight-top { padding-top: 60px; } .section-warm-white { background-color: var(--white); } .section-light-accent-bg { background-color: var(--light-gray-warm); border-radius: var(--border-radius-smooth); } .section-title { text-align: center; margin-bottom: clamp(40px, 6vw, 65px); } .section-title .kicker { font-family: var(--font-primary); font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent-blue-warm); margin-bottom: 20px; display: block; font-weight: 500; } .section-title h2 { margin-bottom: 0.4em; } .section-subtitle { text-align: center; font-family: var(--font-secondary) !important; color: var(--text-secondary) !important; font-size: 1.3em !important; max-width: 800px; margin: 0 auto; font-weight: 300 !important; line-height: 1.85; } /* Mobile vs Desktop Button Text Toggle */ @media (min-width: 769px) { .mobile-text { display: none !important; } .desktop-text { display: inline !important; } } @media (max-width: 768px) { .desktop-text { display: none !important; } .mobile-text { display: inline !important; } .responsive-button-text { padding: 14px 25px !important; font-size: 0.95em !important; width: 100%; max-width: 320px; } } /* Who We Support */ .support-cards-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 45px; margin-top: 50px; } .support-card-polished { background-color: var(--white); padding: clamp(35px, 4vw, 50px); border-radius: var(--border-radius-smooth); text-align: left; box-shadow: var(--shadow-soft); transition: var(--transition-elegant); border-top: 4px solid var(--light-gray-warm); } .support-card-polished:hover { transform: translateY(-12px); box-shadow: var(--shadow-medium); border-top-color: var(--accent-blue-warm); } .support-card-polished .icon-support-refined { font-size: 2.5em; color: var(--primary-blue); margin-bottom: 25px; display: block; } .support-card-polished h3 { font-weight: 600; font-size: 1.7em; margin-bottom: 0.6em; } /* By The Numbers Section */ .stats-section { background-color: var(--primary-blue); color: var(--white); padding: 80px 0; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; text-align: center; } .stat-item h3 { font-size: clamp(2.8em, 6vw, 4em); color: var(--white); margin-bottom: 0.1em; font-weight: 700; } .stat-item p { font-size: 1em; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.5; margin:0; font-weight: 500;} /* Our Approach / Video Section */ .approach-item-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 8vw, 120px); align-items: center; margin-bottom: var(--section-padding-y); } .approach-item-v2:last-child { margin-bottom: 0; } .approach-item-v2.padded-bottom { margin-bottom: var(--section-padding-y); } .approach-item-v2.layout-reversed .approach-image-v2, .approach-item-v2.layout-reversed .video-container { order: 2; } .approach-item-v2.layout-reversed .approach-content-v2 { order: 1; } .approach-image-v2 img { width: 100%; height: auto; border-radius: var(--border-radius-smooth); box-shadow: var(--shadow-medium); object-fit: cover; max-height: 550px; } .approach-content-v2 .kicker { color: var(--accent-blue-warm); font-size: 0.9em; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;} .approach-content-v2 h3 { font-size: clamp(2em, 4vw, 3em); font-weight: 600; margin-bottom: 0.8em; } .approach-content-v2 p { font-size: 1.1em; line-height: 1.95; margin-bottom: 1em; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--border-radius-smooth); box-shadow: var(--shadow-medium); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* RV6 Approach Section Match */ .approach-item-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 8vw, 120px); align-items: center; margin-bottom: var(--section-padding-y); } .approach-item-v2.padded-bottom { margin-bottom: var(--section-padding-y); } .approach-item-v2:last-child { margin-bottom: 0; } .approach-item-v2.layout-reversed .approach-image-v2, .approach-item-v2.layout-reversed .video-container { order: 2; } .approach-item-v2.layout-reversed .approach-content-v2 { order: 1; } .approach-image-v2 img { width: 100%; height: auto; border-radius: var(--border-radius-smooth); box-shadow: var(--shadow-medium); object-fit: cover; max-height: 550px; } .approach-content-v2 .kicker { color: var(--accent-blue-warm); font-size: 0.9em; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; } .approach-content-v2 h3 { font-size: clamp(2em, 4vw, 3em); font-weight: 600; margin-bottom: 0.8em; line-height: 1.3; letter-spacing: -0.01em; } .approach-content-v2 p { font-family: var(--font-secondary) !important; font-size: 1.1em !important; line-height: 1.95 !important; margin: 0 0 1em 0 !important; color: var(--text-secondary) !important; font-weight: 400 !important; text-align: left !important; max-width: none !important; } .approach-content-v2 .btn { margin-top: 20px; } /* Amenities & Clinical Support Grid */ .amenities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; margin-top: 50px; } .amenity-card { background-color: var(--white); border-radius: var(--border-radius-smooth); overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition-elegant); display: flex; flex-direction: column; } .amenity-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-medium); } .amenity-img { height: 240px; width: 100%; overflow: hidden; } .amenity-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .amenity-card:hover .amenity-img img { transform: scale(1.05); } .amenity-content { padding: 35px; flex-grow: 1; } .amenity-content h3 { font-size: 1.45em; margin-bottom: 12px; color: var(--primary-blue); } .amenity-content p { font-size: 1.05em; line-height: 1.7; margin: 0; color: var(--text-secondary); } /* PERFECT BUTTON ALIGNMENT FOR LOCATION CARDS */ #locations .location-showcase-grid.two-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 450px)); gap: 50px; justify-content: center; } .location-showcase-card { background-color: var(--white); border-radius: var(--border-radius-smooth); overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition-elegant); display: flex; flex-direction: column; } .location-showcase-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-medium); } .location-image-zoom-wrapper { height: 350px; overflow: hidden; } .location-image-zoom-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .location-showcase-card:hover .location-image-zoom-wrapper img { transform: scale(1.06); } /* The flex column and padding controls the inner spacing perfectly */ .location-text-content { padding: 40px !important; display: flex !important; flex-direction: column !important; height: auto !important; } .location-text-content .location-kicker { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.12em; color: var(--secondary-slate); margin-bottom: 10px; font-weight: 600;} .location-text-content h3 { font-size: 1.9em; font-weight: 600; margin-bottom: 0.6em; } /* Keep the CTA close to the copy and remove the large empty space below */ .location-text-content .location-desc { font-size: 1em; margin-bottom: 30px !important; flex-grow: 0 !important; text-align: left; } .location-text-content .btn-wrap { flex-grow: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .btn-secondary, .location-text-content .btn-secondary { display: inline-block !important; padding: 14px 30px !important; font-size: 0.95em !important; font-weight: 500 !important; color: var(--primary-blue) !important; background-color: var(--white) !important; border: 2px solid var(--light-gray-warm) !important; border-radius: var(--border-radius-sleek) !important; box-shadow: 0 4px 15px rgba(60, 45, 40, 0.05) !important; text-decoration: none !important; transition: var(--transition-elegant) !important; letter-spacing: 0.02em !important; } .btn-secondary:hover, .location-text-content .btn-secondary:hover { background-color: var(--white) !important; border-color: var(--accent-blue-warm) !important; box-shadow: 0 7px 25px rgba(60, 45, 40, 0.08) !important; transform: translateY(-4px) !important; color: var(--primary-blue) !important; } /* Slim Strip (Step-Down Living) */ .slim-strip { background-color: var(--white); border-radius: var(--border-radius-smooth); display: flex; align-items: center; padding: 30px; gap: 30px; box-shadow: var(--shadow-soft); border: 1px solid rgba(0,0,0,0.03); margin-top: 50px; } .slim-thumb { width: 130px; height: 130px; flex-shrink: 0; border-radius: 8px; overflow: hidden; } .slim-thumb img { width: 100%; height: 100%; object-fit: cover; } .slim-content { flex-grow: 1; } .slim-content h3 { font-size: 1.4em; margin-bottom: 8px; display: flex; align-items: center; gap: 15px; font-weight: 600; color: var(--primary-blue); } .slim-content p { font-size: 1.1em; color: var(--text-secondary); line-height: 1.9; font-weight: 400; text-align: left; max-width: none; } .slim-tag { font-size: 0.55em; background: var(--light-gray-warm); padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; color: var(--secondary-slate); font-weight: 600; vertical-align: middle; } .location-pills { display: flex; gap: 15px; margin-top: 12px; flex-wrap: wrap; } .loc-pill { font-size: 0.9em; font-weight: 500; color: var(--primary-blue); display: flex; align-items: center; } .loc-pill::before { content: '•'; color: var(--accent-blue-warm); margin-right: 8px; font-size: 1.4em; line-height: 0; } /* Admissions Section */ #admissions .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-top: 50px; } #admissions .step-item { text-align: center; } #admissions .step-number { font-size: 2em; font-weight: 700; color: var(--accent-blue-warm); border: 2px solid var(--accent-blue-warm); border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; } #admissions .step-item h3 { font-size: 1.6em; } /* Team Section - Landscape Bio (RV6 Template) */ .grid-landscape { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 30px; margin-top: 50px; } .card-landscape { background-color: var(--off-white-warm); border-radius: var(--border-radius-smooth); overflow: hidden; display: flex; align-items: center; transition: box-shadow 0.3s ease; } .card-landscape:hover { box-shadow: var(--shadow-soft); } .land-img-box { width: 160px; height: 160px; flex-shrink: 0; background-color: #ccc; } .land-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; } .land-info { padding: 20px; } .land-info h3 { margin: 0 0 5px 0; font-size: 1.2em; color: var(--primary-blue); font-weight: 600; } .land-info span { font-size: 0.85em; color: var(--accent-blue-warm); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; display: block; margin-bottom: 8px; } .land-info p { font-size: 0.9em; margin: 0; color: var(--text-secondary); line-height: 1.4; } /* Testimonial Section Slider - aligned with Indexrv6 */ .section-deep-blue { background-color: var(--primary-blue); color: var(--white); } #testimonials { background-color: var(--primary-blue); color: var(--white); } #testimonials .section-title .kicker, #testimonials .section-title h2, #testimonials .section-subtitle { color: var(--white); } #testimonials .section-title h2::after { background-color: var(--white); width: 80px; height: 3px; border-radius: 3px; } .testimonial-carousel-container { max-width: 800px; margin: 0 auto; position: relative; overflow: hidden; border-radius: var(--border-radius-smooth); } .testimonial-carousel-track { display: flex; transition: transform 0.5s ease-out; } .testimonial-card-deluxe { background-color: var(--secondary-slate); padding: clamp(50px, 6vw, 70px); text-align: center; flex: 0 0 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.15); border-radius: 0; user-select: none; } .testimonial-quote-icon { font-family: 'Times New Roman', Times, serif; font-size: 4.5em; color: var(--accent-blue-warm); line-height: 1; display: block; margin-bottom: 25px; opacity: 0.9; } .testimonial-card-deluxe blockquote { margin: 0 0 35px 0; font-style: normal; font-size: clamp(1.2em, 2vw, 1.4em); color: var(--white); line-height: 1.8; font-weight: 300; } .testimonial-card-deluxe footer { font-family: var(--font-primary); font-weight: 500; color: var(--white); font-size: 1.15em; } .testimonial-card-deluxe footer span { display: block; font-size: 0.9em; color: rgba(255,255,255,0.75); margin-top: 10px; font-weight: 300; letter-spacing: 0.04em; } .testimonial-nav { text-align: center; margin-top: 40px; } .testimonial-nav-dot { display: inline-block; width:12px; height:12px; background:rgba(255,255,255,0.25); border-radius:50%; margin:0 6px; cursor:pointer; transition: var(--transition-subtle); } .testimonial-nav-dot.active { background:var(--white); transform: scale(1.1); } .testimonial-nav-dot:hover { background: rgba(255,255,255,0.5); } /* BLOG SECTION & ARROWS */ #blog { background-color: var(--light-gray-warm); } .blog-header-wrapper { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 45px; } .blog-header-wrapper .section-title { margin-bottom: 0; text-align: left; } .blog-header-wrapper .section-title .kicker { margin-bottom: 16px; } .blog-header-wrapper .section-title h2 { margin-bottom: 0; } .blog-nav-arrows { display: none; } .blog-carousel-wrap { position: relative; margin-top: 10px; padding: 0 58px; } .blog-grid { display: flex; gap: 34px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: 8px 0 18px 0; } .blog-grid::-webkit-scrollbar { display: none; } .blog-card { background-color: var(--white); border-radius: var(--border-radius-smooth); overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition-elegant); display: flex; flex-direction: column; flex: 0 0 calc((100% - 68px) / 3); min-width: 0; scroll-snap-align: start; } .blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-medium); } .blog-card-img { height: 230px; background-color: var(--off-white-warm); } .blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card-content { padding: 30px; flex-grow: 1; display: flex; flex-direction: column; } .blog-card-content h3 { font-size: 1.35em; line-height: 1.35; margin-bottom: 14px; flex-grow: 0; color: var(--primary-blue); } .blog-card-content p { font-size: 0.98em; margin-bottom: 26px; flex-grow: 1; line-height: 1.72; color: var(--text-secondary); } .blog-card-content .btn-text-link { align-self: flex-start; margin-top: auto; font-family: var(--font-primary) !important; font-weight: 600; display: inline-block; color: var(--primary-blue) !important; position: relative; padding: 0 0 7px 0; font-size: 1em; letter-spacing: 0.02em; text-transform: none; text-decoration: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; } .blog-card-content .btn-text-link::after { content: '' !important; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: var(--accent-blue-warm); transition: var(--transition-elegant); } .blog-card-content .btn-text-link:hover { color: var(--primary-blue) !important; } .blog-card-content .btn-text-link:hover::after { width: 100%; } .blog-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(44, 62, 80, 0.12); background-color: var(--white); color: var(--primary-blue); box-shadow: var(--shadow-soft); cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; font-size: 1.35em; line-height: 1; transition: var(--transition-subtle); } .blog-carousel-arrow:hover { background-color: var(--primary-blue); color: var(--white); transform: translateY(-50%) scale(1.04); } .blog-carousel-arrow.prev { left: 0; } .blog-carousel-arrow.next { right: 0; } @media (max-width: 992px) { .blog-carousel-wrap { padding: 0 52px; } .blog-card { flex-basis: calc((100% - 34px) / 2); } } @media (max-width: 768px) { .blog-header-wrapper { align-items: center; justify-content: center; text-align: center; } .blog-header-wrapper .section-title { text-align: center; } .blog-carousel-wrap { padding: 0 42px; } .blog-card { flex-basis: 100%; } .blog-carousel-arrow { width: 40px; height: 40px; font-size: 1.15em; } } /* Contact Section - RV6 Inspired */ #contact { background-color: #2c3e50 !important; color: var(--white) !important; text-align: center; padding-top: clamp(75px, 7vw, 95px) !important; padding-bottom: clamp(75px, 7vw, 95px) !important; } #contact .container-tight { max-width: 960px; } #contact .section-title { margin-bottom: 24px !important; } #contact .section-title h2 { color: var(--white) !important; font-family: var(--font-primary) !important; font-size: clamp(2.3em, 5vw, 3.4em) !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; margin: 0 !important; } #contact .lead { color: rgba(255,255,255,0.9) !important; font-family: var(--font-secondary) !important; font-size: 1.3em !important; font-weight: 300 !important; line-height: 1.85 !important; max-width: 800px; margin: 0 auto 42px auto !important; } #contact .form-container { max-width: 700px !important; margin: 0 auto !important; background-color: var(--white) !important; padding: clamp(32px, 5vw, 50px) !important; border-radius: var(--border-radius-smooth) !important; box-shadow: var(--shadow-soft) !important; border: none !important; text-align: left; } #contact .wpforms-field-container .wpforms-field { margin-bottom: 25px !important; } #contact .wpforms-field-container .wpforms-field-label { color: var(--text-primary) !important; font-family: var(--font-secondary) !important; font-weight: 500 !important; font-size: 0.95em !important; margin-bottom: 8px !important; } #contact .wpforms-field-container input[type="text"], #contact .wpforms-field-container input[type="email"], #contact .wpforms-field-container textarea { background-color: var(--white) !important; border: 1.5px solid var(--light-gray-warm) !important; color: var(--text-primary) !important; border-radius: var(--border-radius-sleek) !important; padding: 15px !important; font-size: 1em !important; box-shadow: none !important; } #contact .wpforms-field-container textarea { min-height: 150px !important; } #contact .wpforms-field-container input:focus, #contact .wpforms-field-container textarea:focus { outline: none !important; border-color: var(--accent-blue-warm) !important; box-shadow: 0 0 0 3px rgba(156, 182, 213, 0.25) !important; } #contact .wpforms-submit, #contact button.wpforms-submit { background-color: var(--primary-blue) !important; color: var(--white) !important; border-radius: var(--border-radius-sleek) !important; box-shadow: 0 8px 25px rgba(44, 62, 80, 0.18) !important; font-family: var(--font-primary) !important; font-weight: 600 !important; width: 100% !important; } #contact .wpforms-submit:hover, #contact button.wpforms-submit:hover { background-color: var(--secondary-slate) !important; color: var(--white) !important; transform: translateY(-4px) !important; } /* Lock in WPForms Styling */ .wpforms-field-container .wpforms-field { margin-bottom: 25px !important; clear: both !important; } .wpforms-field-container .wpforms-field-label { display: block !important; font-weight: 500 !important; color: var(--white) !important; margin-bottom: 8px !important; font-size: 1em !important; } .wpforms-field-container input[type="text"], .wpforms-field-container input[type="email"], .wpforms-field-container textarea { width: 100% !important; height: auto !important; padding: 15px !important; border: 1.5px solid rgba(255,255,255,0.22) !important; border-radius: var(--border-radius-sleek) !important; font-size: 1em !important; box-sizing: border-box !important; background-color: var(--off-white-warm) !important; color: var(--text-primary) !important; line-height: 1.6 !important; } .wpforms-field-container textarea { min-height: 150px !important; resize: vertical !important; } .wpforms-field-container input:focus, .wpforms-field-container textarea:focus { outline: none !important; border-color: var(--accent-blue-warm) !important; box-shadow: 0 0 0 3px rgba(156, 182, 213, 0.28) !important; background-color: var(--white) !important; } .wpforms-submit, button.wpforms-submit { display: inline-block !important; width: 100% !important; padding: 18px 40px !important; background-color: var(--white) !important; color: var(--primary-blue) !important; font-family: var(--font-primary) !important; text-decoration: none !important; border-radius: var(--border-radius-sleek) !important; font-size: 1.1em !important; font-weight: 600 !important; transition: var(--transition-elegant) !important; border: none !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.14) !important; letter-spacing: 0.02em !important; cursor: pointer !important; text-align: center !important; } .wpforms-submit:hover, button.wpforms-submit:hover { background-color: var(--accent-blue-warm) !important; transform: translateY(-4px) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18) !important; color: var(--primary-blue) !important; } /* Footer */ .main-footer { background-color: var(--white); color: var(--text-secondary); padding: 80px 0 40px 0; border-top: 1px solid var(--light-gray-warm); } .main-footer .container-footer { width: 90%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(40px, 5vw, 70px); margin-bottom: 60px; } .main-footer h4 { font-family: var(--font-primary); color: var(--primary-blue); margin-bottom: 25px; font-weight: 600; font-size: 1.1em; letter-spacing: 0.03em; text-transform: uppercase; } .main-footer ul { list-style: none; padding: 0; margin: 0; } .main-footer ul li { margin-bottom: 15px; } .main-footer a { color: var(--text-secondary); } .main-footer a:hover { color: var(--primary-blue); } .footer-logo-container img { max-height: 100px; width: auto; margin-bottom: 25px; } .footer-tagline { font-size: 0.98em; line-height: 1.8; color: var(--secondary-slate); max-width: 320px;} .footer-contact-details p { display: flex; align-items: flex-start; } .footer-icon { margin-right: 10px; color: var(--primary-blue); margin-top: 4px;} .footer-icon svg { width: 1.2em; height: 1.2em; } .footer-bottom { text-align: center; padding-top: 40px; border-top: 1px solid var(--light-gray-warm); font-size: 0.9em; color: var(--secondary-slate); } /* Responsive */ @media (max-width: 1100px) { .desktop-nav { display: none; } .mobile-menu-toggle { display: block; } .top-bar { text-align: center; } .top-bar .header-container { justify-content: center; } .header-container { justify-content: space-between; } .logo-container { padding: 0; flex-grow: 1; text-align: left;} } @media (max-width: 992px) { .approach-item-v2 { grid-template-columns: 1fr; text-align: center; } .approach-item-v2 .approach-image-v2, .approach-item-v2 .video-container { margin: 0 auto 30px auto; max-width: 500px; order:1 !important; } .approach-item-v2 .approach-content-v2 { order:2 !important; text-align: center !important; } .main-footer .container-footer { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { body { font-size: 16px; } h1 { font-size: 2.8em; } h2 { font-size: 2.4em; } .hero .sub-headline { font-size: 1.1em; } .main-footer .container-footer { grid-template-columns: 1fr; text-align: center; } .footer-tagline { margin:0 auto; } .footer-contact-details p { justify-content: center;} .slim-strip { flex-direction: column; text-align: center; } .slim-content h3 { justify-content: center; flex-wrap: wrap; } .location-pills { justify-content: center; } .blog-header-wrapper { flex-direction: column; align-items: center; text-align: center; gap: 25px; } .blog-header-wrapper .section-title { text-align: center; } } @media(max-width: 500px) { .card-landscape { flex-direction: column; text-align: center; } .land-img-box { width: 100%; height: 250px; } } /* Mobile and Tablet Refinements */ .video-container { width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; padding-bottom: 0 !important; } .video-container iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; } @media (max-width: 992px) { .hero h1 { font-size: clamp(2.7em, 7vw, 4em) !important; line-height: 1.22 !important; max-width: 850px; margin-left: auto; margin-right: auto; } .hero .sub-headline { font-size: clamp(1.1em, 2.6vw, 1.3em) !important; line-height: 1.75 !important; max-width: 780px; } #about .approach-item-v2 .approach-content-v2 { order: 1 !important; text-align: center !important; } #about .approach-item-v2 .approach-image-v2 { order: 2 !important; margin: 28px auto 0 auto !important; max-width: 620px !important; width: 100% !important; } #about .approach-content-v2 p { text-align: center !important; } #media .approach-item-v2 .video-container { width: 100% !important; max-width: 720px !important; margin: 0 auto 32px auto !important; order: 1 !important; } #media .approach-item-v2 .approach-content-v2 { order: 2 !important; text-align: center !important; } #media .approach-content-v2 p { text-align: center !important; } } @media (max-width: 768px) { .hero { min-height: calc(var(--vh, 1vh) * 86) !important; } .hero .container { padding: 56px 20px 34px 20px !important; justify-content: center !important; } .hero h1 { font-size: clamp(2.15em, 10vw, 3em) !important; line-height: 1.22 !important; letter-spacing: -0.02em !important; margin-bottom: 0.55em !important; text-shadow: 0 3px 12px rgba(0,0,0,0.35) !important; } .hero .sub-headline { font-size: clamp(1em, 4.2vw, 1.12em) !important; line-height: 1.75 !important; max-width: 92%; font-weight: 300 !important; } .scroll-down-indicator { display: none !important; } .mobile-nav-container a { font-size: 1.35em !important; } .mobile-nav-container li { margin: 13px 0 !important; } #about .approach-item-v2 { gap: 0 !important; margin-bottom: 70px !important; } #about .approach-image-v2 img { max-height: 420px !important; width: 100% !important; } #media .video-container { max-width: 100% !important; margin-bottom: 28px !important; } } @media (max-width: 480px) { .hero h1 { font-size: clamp(2em, 11vw, 2.55em) !important; } .hero .sub-headline { font-size: 1em !important; line-height: 1.7 !important; } } /* Requested Mobile/Layout Updates */ .mobile-menu-close { display: none; } #admissions { border-radius: 0; } #blog { background-color: var(--light-gray-warm) !important; border-radius: 0 !important; } #contact { background-color: var(--primary-blue) !important; } @media (max-width: 1100px) { .mobile-nav-container { justify-content: flex-start !important; padding: 96px 24px 44px !important; box-sizing: border-box !important; overflow-y: auto !important; } .mobile-menu-close { display: flex !important; position: absolute !important; top: 24px !important; right: 24px !important; width: 44px !important; height: 44px !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(44, 62, 80, 0.25) !important; border-radius: 999px !important; background: rgba(255,255,255,0.75) !important; color: var(--primary-blue) !important; font-size: 34px !important; line-height: 1 !important; cursor: pointer !important; z-index: 1003 !important; box-shadow: 0 10px 30px rgba(44, 62, 80, 0.08) !important; } .mobile-nav-container ul { width: 100% !important; max-width: 420px !important; } } @media (max-width: 992px) { .section { padding-top: 70px !important; padding-bottom: 70px !important; } .approach-item-v2, .approach-item-v2.layout-reversed { display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; margin-bottom: 72px !important; } .approach-item-v2:last-child { margin-bottom: 0 !important; } .approach-item-v2 .approach-image-v2, .approach-item-v2.layout-reversed .approach-image-v2, .approach-item-v2 .video-container, .approach-item-v2.layout-reversed .video-container { order: 1 !important; margin: 0 auto !important; max-width: 680px !important; width: 100% !important; } .approach-item-v2 .approach-content-v2, .approach-item-v2.layout-reversed .approach-content-v2 { order: 2 !important; text-align: center !important; } .approach-content-v2 p, .approach-content-v2 .section-subtitle { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } #about .approach-item-v2 .approach-image-v2 { order: 1 !important; margin: 0 auto !important; } #about .approach-item-v2 .approach-content-v2 { order: 2 !important; } #media .video-container { position: relative !important; min-height: 280px !important; } } @media (max-width: 768px) { .section { padding-top: 58px !important; padding-bottom: 58px !important; } .section-title { margin-bottom: 34px !important; } .section-title .kicker, .approach-content-v2 .kicker { font-size: 0.78em !important; letter-spacing: 0.17em !important; margin-bottom: 12px !important; } h2 { font-size: clamp(2em, 8.5vw, 2.55em) !important; line-height: 1.16 !important; } .approach-content-v2 h3 { font-size: clamp(2em, 8.5vw, 2.7em) !important; line-height: 1.16 !important; margin-bottom: 0.65em !important; } .approach-content-v2 p, .section-subtitle, p.lead { font-size: 1.02em !important; line-height: 1.75 !important; } .approach-item-v2, .approach-item-v2.layout-reversed { gap: 24px !important; margin-bottom: 58px !important; } .approach-image-v2 img { max-height: 360px !important; border-radius: 14px !important; } .btn { padding: 15px 28px !important; } #about .approach-content-v2 .btn { margin-top: 14px !important; } #media .video-container { min-height: 210px !important; margin-bottom: 4px !important; } #admissions .steps-grid { gap: 28px !important; margin-top: 34px !important; } #blog .blog-carousel-wrap { padding: 0 36px !important; } #blog .blog-card-img { height: 210px !important; } } @media (max-width: 480px) { .mobile-nav-container { padding-top: 82px !important; } .mobile-nav-container a { font-size: 1.18em !important; line-height: 1.35 !important; } .mobile-nav-container li { margin: 11px 0 !important; } .approach-image-v2 img { max-height: 320px !important; } #blog .blog-carousel-wrap { padding: 0 30px !important; } } /* Requested Follow-up Refinements */ @media (max-width: 1100px) { .mobile-nav-container { z-index: 3000 !important; padding-top: 118px !important; } .mobile-menu-close { top: 64px !important; right: 22px !important; z-index: 3002 !important; } .mobile-nav-container .mobile-sub-link a { font-size: 1.15em !important; color: var(--secondary-slate) !important; opacity: 0.95 !important; } } @media (max-width: 768px) { #about .approach-item-v2, #about .approach-item-v2.layout-reversed { display: grid !important; grid-template-columns: 1fr !important; row-gap: 18px !important; } #about .approach-item-v2 .approach-content-v2, #about .approach-item-v2.layout-reversed .approach-content-v2 { display: contents !important; } #about .approach-content-v2 .kicker { order: 1 !important; text-align: center !important; margin-bottom: 0 !important; } #about .approach-content-v2 h3 { order: 2 !important; text-align: center !important; margin: 0 auto 4px auto !important; max-width: 94% !important; } #about .approach-item-v2 .approach-image-v2, #about .approach-item-v2.layout-reversed .approach-image-v2 { order: 3 !important; margin: 6px auto 10px auto !important; max-width: 100% !important; } #about .approach-content-v2 p { order: 4 !important; text-align: center !important; margin: 0 auto 8px auto !important; max-width: 94% !important; } #about .approach-content-v2 .btn { order: 5 !important; justify-self: center !important; margin: 8px auto 0 auto !important; } } @media (max-width: 480px) { .mobile-nav-container { padding-top: 112px !important; } .mobile-menu-close { top: 58px !important; right: 18px !important; } } /* Polished Mobile Menu Refinement */ @media (max-width: 1100px) { .mobile-nav-container { z-index: 6000 !important; justify-content: flex-start !important; align-items: stretch !important; background: rgba(249, 246, 242, 0.985) !important; padding: 0 !important; overflow-y: auto !important; transform: translateY(-10px) !important; } .mobile-nav-container.is-open { transform: translateY(0) !important; } .mobile-menu-close { display: flex !important; position: fixed !important; top: 18px !important; right: 18px !important; width: 46px !important; height: 46px !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(44, 62, 80, 0.18) !important; border-radius: 999px !important; background: var(--white) !important; color: var(--primary-blue) !important; font-size: 34px !important; line-height: 1 !important; cursor: pointer !important; z-index: 6002 !important; box-shadow: 0 12px 32px rgba(44, 62, 80, 0.12) !important; } .mobile-menu-inner { width: min(100%, 520px) !important; margin: 0 auto !important; padding: 88px 24px 42px !important; box-sizing: border-box !important; } .mobile-menu-list, .mobile-menu-sublist { list-style: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } .mobile-menu-list > li { margin: 0 !important; } .mobile-menu-main, .mobile-menu-group { border-bottom: 1px solid rgba(44, 62, 80, 0.11) !important; padding: 14px 0 !important; } .mobile-menu-main a, .mobile-menu-main-link { display: block !important; font-family: var(--font-primary) !important; font-size: clamp(1.35rem, 6vw, 1.85rem) !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: 0.035em !important; color: var(--primary-blue) !important; text-align: left !important; } .mobile-menu-label { cursor: default !important; } .mobile-menu-sublist { display: grid !important; gap: 8px !important; margin-top: 12px !important; padding-left: 18px !important; border-left: 2px solid rgba(156, 182, 213, 0.55) !important; } .mobile-menu-sublist li { margin: 0 !important; } .mobile-menu-sublist a, .mobile-nav-container .mobile-sub-link a { display: block !important; font-family: var(--font-secondary) !important; font-size: 1rem !important; line-height: 1.45 !important; font-weight: 500 !important; letter-spacing: 0.055em !important; color: var(--secondary-slate) !important; opacity: 1 !important; text-align: left !important; padding: 3px 0 !important; } .mobile-nav-container a:hover { color: var(--accent-blue-warm) !important; } } @media (max-width: 480px) { .mobile-menu-inner { padding: 82px 24px 38px !important; } .mobile-menu-close { top: 16px !important; right: 16px !important; width: 44px !important; height: 44px !important; font-size: 32px !important; } .mobile-menu-main, .mobile-menu-group { padding: 13px 0 !important; } .mobile-menu-main a, .mobile-menu-main-link { font-size: clamp(1.28rem, 6.7vw, 1.68rem) !important; } .mobile-menu-sublist a { font-size: 0.95rem !important; } } /* Animation Classes */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .animate-on-scroll.delay-1 { transition-delay: 0.15s; } .animate-on-scroll.delay-2 { transition-delay: 0.3s; } .animate-on-scroll.delay-3 { transition-delay: 0.45s; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }