/* ======================================== Dr Kimberley Wells - Shared Styles Sport & Exercise Medicine Physician ======================================== */ /* Google Fonts — loaded via in HTML for faster rendering */ /* ---- Reset & Variables ---- */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #1A3A52; --primary-dark: #122a3d; --secondary: #2E5266; --accent: #C9A77C; --accent-hover: #b8956b; --light: #F5F0E8; --text: #2D2D2D; --text-light: #5A5A5A; --text-secondary: #555555; --white: #FFFFFF; --cream: #EFE8DC; --blue-accent: #4A6FA5; --font-heading: 'Playfair Display', Georgia, serif; --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.1); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-xl: 0 16px 48px rgba(0,0,0,0.15); --glass-bg: rgba(255,255,255,0.55); --glass-border: rgba(255,255,255,0.45); --glass-blur: 16px; --glass-shadow: 0 8px 32px rgba(0,0,0,0.06); --glow-accent: rgba(201,167,124,0.6); --glow-primary: rgba(74,111,165,0.4); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --transition-fast: 0.2s ease; --transition-med: 0.3s ease; --transition-slow: 0.5s ease; --nav-height: auto; --dark-navy: #1A3A52; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --text-muted: #7A7A7A; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--text); background: var(--cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--secondary); } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ---- Typography ---- */ h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.2; } h1 { font-weight: 700; } h2 { font-weight: 600; } h3 { font-weight: 600; } /* ---- Navigation ---- */ nav { background: var(--white); border-bottom: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.04); position: sticky; top: 0; z-index: 9999; transition: box-shadow var(--transition-med); } nav.scrolled { box-shadow: 0 4px 16px rgba(0,0,0,0.08); } nav .container { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 20px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); } .logo { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; font-weight: 700; color: var(--primary); text-decoration: none; transition: opacity var(--transition-fast); display: flex; align-items: center; gap: 10px; } .logo-icon { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; transition: transform var(--transition-med); } .logo:hover .logo-icon { transform: scale(1.05); } .logo:hover { opacity: 0.85; } .nav-logo-img { height: 55px; width: auto; max-width: 320px; object-fit: contain; transition: transform var(--transition-med); } .logo:hover .nav-logo-img { transform: scale(1.02); } .logo-text { display: flex; flex-direction: column; font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: var(--primary); text-transform: none; letter-spacing: normal; line-height: 1.2; } .logo-text > span { display: block; font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 500; color: var(--accent); margin-top: 2px; letter-spacing: 1px; text-transform: uppercase; } nav ul { display: flex; list-style: none; gap: 0.25rem; align-items: center; } nav li a { text-decoration: none; color: var(--text); font-weight: 500; font-size: 0.9rem; padding: 0.5rem 0.85rem; border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); position: relative; } nav li a:hover { color: var(--primary); background: rgba(26,58,82,0.05); } nav li a.active { color: var(--primary); font-weight: 600; } nav li a.cta-button { background: var(--accent); color: var(--primary); padding: 0.6rem 1.4rem; border-radius: var(--radius-sm); font-weight: 600; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } nav li a.cta-button:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 0 15px rgba(201,167,124,0.5), 0 0 30px rgba(201,167,124,0.25), 0 4px 12px rgba(201,167,124,0.35); } .mobile-menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--primary); cursor: pointer; padding: 0.5rem; width: 48px; height: 48px; border-radius: var(--radius-sm); transition: background var(--transition-fast), transform 0.3s ease; } .mobile-menu-toggle:hover { background: rgba(26,58,82,0.05); } .mobile-menu-toggle.is-open { transform: rotate(90deg); } /* ---- Mobile Nav Overlay ---- */ .mobile-nav-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(26,58,82,0.5); z-index: 9998; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-med), visibility 0s var(--transition-med); } .mobile-nav-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--transition-med), visibility 0s 0s; } /* ---- Hero Sections ---- */ .hero { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--white); padding: 5rem 0 4.5rem; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 80% 20%, rgba(201,167,124,0.15) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(74,111,165,0.1) 0%, transparent 50%); pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to top, rgba(26,58,82,0.3), transparent); pointer-events: none; } .hero .container { position: relative; z-index: 1; } .hero-content { max-width: 700px; } .hero h1 { font-size: clamp(1.7rem, 1.1rem + 2.5vw, 3rem); line-height: 1.15; margin-bottom: 1.5rem; font-weight: 700; } .hero-subtitle { font-size: 1.25rem; margin-bottom: 1.5rem; opacity: 0.95; font-weight: 400; line-height: 1.6; } .hero p { font-size: 1.05rem; margin-bottom: 2rem; opacity: 0.9; line-height: 1.7; } /* ---- Immersive Hero (Homepage Only) ---- */ .hero-immersive { min-height: 85vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; position: relative; } /* ---- Video Hero Background ---- */ .hero-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity 1.5s ease; } .hero-video-bg.fading { opacity: 0; } .hero-video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(26,58,82,0.55) 0%, rgba(46,82,102,0.50) 100%); z-index: 2; } .hero-content-layer { z-index: 3; } .hero-immersive .hero-content-layer { position: relative; z-index: 2; width: 100%; } .hero-immersive .hero-content { max-width: 800px; margin: 0 auto; text-align: center; } .hero-immersive h1 { font-size: clamp(1.9rem, 1rem + 3.5vw, 4rem); line-height: 1.1; margin-bottom: 1rem; } .hero-immersive .hero-subtitle { font-size: 1.5rem; margin-bottom: 2.5rem; opacity: 0.9; } .hero-immersive .hero-buttons { justify-content: center; margin-bottom: 0; } .hero-immersive .hero-cta { padding: 1.1rem 3rem; font-size: 1.1rem; } /* ---- Scroll Indicator ---- */ .scroll-indicator { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: rgba(255,255,255,0.5); font-size: 0.65rem; text-decoration: none; transition: opacity 0.4s ease; will-change: opacity; } .scroll-indicator svg { animation: scrollBounce 2s ease-in-out infinite; } .scroll-indicator-text { font-size: 0.75rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; opacity: 0.7; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ---- Trust Badges ---- */ .trust-badges { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .trust-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; border-radius: 50px; font-size: 0.9rem; font-weight: 500; color: var(--primary); background: rgba(255,255,255,0.55); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border: 1px solid rgba(201,167,124,0.25); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .trust-badge svg { color: var(--accent); flex-shrink: 0; } /* Page heroes (subpages) */ .page-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--white); padding: 5rem 0 4.5rem; text-align: center; position: relative; overflow: hidden; background-size: cover; background-position: center; min-height: 300px; max-height: 360px; display: flex; align-items: center; justify-content: center; flex-direction: column; } /* When page-hero has a background image via inline style, overlay to ensure text readability */ .page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(26,58,82,0.45) 0%, rgba(46,82,102,0.40) 100%), radial-gradient(ellipse at 50% 30%, rgba(201,167,124,0.12) 0%, transparent 60%); pointer-events: none; z-index: 0; } .page-hero .container { position: relative; z-index: 1; width: 100%; } .page-hero h1 { font-size: clamp(1.7rem, 1.1rem + 2.5vw, 2.8rem); margin-bottom: 1rem; } .page-hero p { font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.1rem); opacity: 0.95; max-width: 700px; margin: 0 auto 2rem; line-height: 1.5; } .page-hero .hero-sub { font-size: clamp(0.85rem, 0.8rem + 0.3vw, 0.95rem); opacity: 0.85; margin-top: 0.5rem; } /* ---- Hero Buttons Container ---- */ .hero-buttons { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; margin-bottom: 0.5rem; } /* ---- Hero CTAs ---- */ .hero-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--white); padding: 1rem 2.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1.05rem; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); min-width: 160px; text-align: center; } .hero-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); background: var(--accent-hover); } .hero-cta.secondary { background: transparent; border: 2px solid rgba(255,255,255,0.6); backdrop-filter: blur(4px); } .hero-cta.secondary:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.9); } /* ---- Credential Badges (Hero) ---- */ .credentials { display: flex; gap: 1.5rem; margin-top: 2.5rem; flex-wrap: wrap; justify-content: center; } .credential-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; color: var(--white); text-shadow: 0 1px 3px rgba(0,0,0,0.4); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); padding: 0.65rem 1.25rem; border-radius: 50px; backdrop-filter: blur(8px); opacity: 0; transform: translateY(15px) scale(0.95); animation: credentialPop 0.6s ease forwards; } .credential-item:nth-child(1) { animation-delay: 0.8s; } .credential-item:nth-child(2) { animation-delay: 1.1s; } .credential-item:nth-child(3) { animation-delay: 1.4s; } @keyframes credentialPop { 0% { opacity: 0; transform: translateY(15px) scale(0.95); box-shadow: none; } 60% { opacity: 1; transform: translateY(-3px) scale(1.04); box-shadow: 0 0 20px rgba(201,167,124,0.5), 0 0 40px rgba(201,167,124,0.2); } 100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 12px rgba(201,167,124,0.3), 0 0 0 1px rgba(255,255,255,0.15); } } .credential-item::before { content: ''; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px rgba(201,167,124,0.6); animation: dotPulse 2s ease-in-out infinite; animation-delay: inherit; } @keyframes dotPulse { 0%, 100% { box-shadow: 0 0 8px rgba(201,167,124,0.6); } 50% { box-shadow: 0 0 14px rgba(201,167,124,0.9), 0 0 20px rgba(201,167,124,0.3); } } /* ---- Noosa Coming Soon Box ---- */ .noosa-coming-soon { background: rgba(255,255,255,0.05); border: 1px solid rgba(201,167,124,0.3); border-radius: var(--radius-sm); padding: 1rem 1.25rem; transition: all var(--transition-med); } .noosa-coming-soon:hover { transform: translateY(-2px); border-color: rgba(201,167,124,0.5); } /* ---- Subpage Feature Photo ---- */ .subpage-feature-photo { padding: 2.5rem 0; text-align: center; background: var(--light); } .subpage-feature-photo img { max-width: 680px; width: 100%; border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0,0,0,0.12); } /* ---- Contact Buttons ---- */ .contact-buttons { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; } /* ---- Credentials Banner ---- */ .credentials-banner { background: var(--primary-dark); padding: 1rem 0; } .credentials-inner { display: flex; justify-content: center; align-items: center; gap: 2.5rem; flex-wrap: wrap; } .credential-badge { display: flex; align-items: center; gap: 0.5rem; color: var(--white); font-size: 0.85rem; opacity: 0.9; } .credential-badge svg { width: 18px; height: 18px; opacity: 0.8; flex-shrink: 0; } /* ---- Breadcrumb ---- */ .breadcrumb { padding: 0.75rem 0; font-size: 0.85rem; } .page-hero .breadcrumb { background: transparent; } .breadcrumb a { color: var(--secondary); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { color: var(--text-light); } /* ---- Section Titles ---- */ .section-title { text-align: center; font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem); color: var(--primary); margin-bottom: 1rem; font-weight: 700; } .section-subtitle { text-align: center; color: var(--text-light); font-family: 'Inter', sans-serif; font-size: 1.05rem; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.7; } .section-subtitle a { color: var(--accent); text-decoration: underline; } .section-subtitle a:hover { color: var(--accent-hover); } /* ---- Cards ---- */ .card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border-radius: var(--radius-md); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.5); border-color: rgba(201,167,124,0.2); } /* ---- Service Cards ---- */ .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 3rem; } .service-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); padding: 0; border-radius: var(--radius-md); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); overflow: hidden; cursor: pointer; } .service-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(201,167,124,0.3); border-color: rgba(201,167,124,0.35); } .service-icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1.25rem; transition: transform var(--transition-fast); overflow: hidden; } .service-icon img { width: 100%; height: 100%; object-fit: contain; } .service-card:hover .service-icon { transform: scale(1.08); } .service-card-content { padding: 2rem; } .service-card h3 { font-family: 'Playfair Display', serif; color: var(--primary); margin-bottom: 0.75rem; font-size: 1.25rem; } .service-card p { color: var(--text-light); line-height: 1.7; font-size: 0.95rem; } /* Service card with header */ .service-header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 1.5rem; display: flex; align-items: center; gap: 1rem; } .service-header h3 { color: var(--white); font-size: 1.25rem; margin-bottom: 0.2rem; } .service-header h3 a { color: var(--white); text-decoration: none; } .service-header h3 a:hover { text-decoration: underline; } .service-header .tagline { opacity: 0.9; font-size: 0.85rem; } .service-body { padding: 1.5rem; } .service-body h4 { color: var(--primary); margin-top: 1.25rem; margin-bottom: 0.6rem; font-size: 1rem; font-family: 'Inter', sans-serif; font-weight: 600; } .service-body h4:first-child { margin-top: 0; } .service-body p, .service-body ul { color: var(--text-light); line-height: 1.7; margin-bottom: 0.8rem; } .service-body ul { padding-left: 1.25rem; } .service-body li { margin-bottom: 0.4rem; } .service-body a { color: var(--accent); text-decoration: none; font-weight: 500; } .service-body a:hover { text-decoration: underline; } /* ---- Highlight Box ---- */ .highlight-box { background: var(--light); border-left: 4px solid var(--accent); padding: 1.25rem; margin: 1.25rem 0 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .highlight-box strong { color: var(--primary); } /* ---- Why Specialist Section ---- */ .why-specialist { padding: 5rem 0; background: var(--light); } /* ---- Comparison Cards ---- */ .comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 3rem; } .comparison-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); padding: 2rem; border-radius: var(--radius-md); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); } .comparison-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 12px 36px rgba(0,0,0,0.12), 0 0 0 1px rgba(201,167,124,0.3); border-color: rgba(201,167,124,0.35); } .comparison-card h3 { font-family: 'Playfair Display', serif; color: var(--primary); margin-bottom: 1.25rem; font-size: 1.25rem; } .comparison-card ul { line-height: 1.9; padding-left: 1.25rem; } .comparison-card li { color: var(--text-light); } /* ---- Patient Journey / Timeline ---- */ .journey { padding: 5rem 0; background: var(--light); } .journey-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 3rem; position: relative; } .journey-steps::before { content: ''; position: absolute; top: 30px; left: 10%; right: 10%; height: 3px; background: linear-gradient(90deg, var(--accent), var(--blue-accent)); z-index: 0; } .journey-step { text-align: center; position: relative; z-index: 1; padding: 0 1rem; } .step-number { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; font-family: 'Inter', sans-serif; margin: 0 auto 1.25rem; box-shadow: 0 4px 16px rgba(26,58,82,0.25); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .journey-step:hover .step-number { transform: scale(1.1); box-shadow: 0 6px 24px rgba(26,58,82,0.35); } .journey-step h3 { font-family: 'Playfair Display', serif; color: var(--primary); margin-bottom: 0.6rem; font-size: 1.1rem; } .journey-step p { color: var(--text-light); line-height: 1.6; font-size: 0.9rem; } .journey-step a { color: var(--accent); text-decoration: none; font-weight: 500; } .journey-step a:hover { text-decoration: underline; } /* ---- Experience Grid ---- */ .experience { padding: 5rem 0; } .experience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .experience-card { background: linear-gradient(135deg, rgba(26,58,82,0.85), rgba(46,82,102,0.8)); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); color: var(--white); padding: 2rem; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.15); text-align: center; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .experience-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(26,58,82,0.3), 0 0 20px rgba(74,111,165,0.15); border-color: rgba(255,255,255,0.3); } .experience-card h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin-bottom: 0.5rem; } .experience-card p { opacity: 0.92; font-size: 0.95rem; } /* ---- Logo Banner / Affiliations ---- */ .logo-banner { padding: 3.5rem 0; background: var(--white); border-top: 1px solid rgba(0,0,0,0.04); border-bottom: 1px solid rgba(0,0,0,0.04); overflow: hidden; } .logo-banner h3 { text-align: center; font-family: 'Inter', sans-serif; color: var(--text-light); font-size: 0.85rem; margin-bottom: 2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; } .logo-scroll-container { overflow: hidden; position: relative; width: 100%; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .logo-scroll-wrapper { display: flex; animation: logoScroll 40s linear infinite; will-change: transform; } .logo-scroll-wrapper:hover { animation-play-state: paused; } .logo-grid { display: flex; gap: 3rem; align-items: center; flex-shrink: 0; padding-right: 3rem; } @keyframes logoScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .logo-item { display: flex; align-items: center; justify-content: center; padding: 0.75rem; opacity: 0.8; transition: opacity var(--transition-med); flex-shrink: 0; } .logo-item:hover { opacity: 1; } .logo-placeholder { width: 140px; height: 60px; background: linear-gradient(135deg, var(--light) 0%, rgba(201,167,124,0.08) 100%); border: none; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--primary); text-align: center; padding: 0.5rem; font-weight: 600; white-space: nowrap; position: relative; overflow: hidden; } .logo-placeholder::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(201,167,124,0.08) 100%); border-radius: var(--radius-sm); } .logo-placeholder.brisbane-2032 { background: linear-gradient(135deg, rgba(201,167,124,0.12) 0%, rgba(201,167,124,0.04) 100%); border: 2px solid var(--accent); box-shadow: 0 0 20px rgba(201, 167, 124, 0.2); transform: scale(1.1); } /* ---- FAQ Accordion ---- */ .faq-section { padding: 5rem 0; background: var(--light); } .faq-container { max-width: 800px; margin: 3rem auto 0; } .faq-item { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); margin-bottom: 0.75rem; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: box-shadow var(--transition-med), border-color var(--transition-med); } .faq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-color: rgba(201,167,124,0.2); } .faq-question { width: 100%; padding: 1.25rem 1.5rem; background: transparent; border: none; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; color: var(--primary); transition: background var(--transition-fast); gap: 1rem; } .faq-question:hover { background: rgba(245,240,232,0.5); } .faq-icon { font-size: 0.75rem; transition: transform var(--transition-med); color: var(--accent); flex-shrink: 0; } .faq-item.active .faq-icon { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; } .faq-answer-content { padding: 0 1.5rem 1.5rem; color: var(--text-light); line-height: 1.8; font-size: 0.95rem; } .faq-answer-content a { color: var(--accent); font-weight: 500; text-decoration: none; } .faq-answer-content a:hover { text-decoration: underline; } .faq-answer-content ul { margin: 0.75rem 0 0.75rem 1.5rem; } .faq-answer-content li { margin-bottom: 0.4rem; } .faq-item.active .faq-answer { max-height: 1200px; } /* Subpage FAQ styling (details/summary) */ details.faq-item { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); margin-bottom: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); overflow: hidden; transition: box-shadow var(--transition-med), border-color var(--transition-med); } details.faq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-color: rgba(201,167,124,0.2); } details.faq-item summary { padding: 1.25rem 1.5rem; font-weight: 600; color: var(--primary); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; line-height: 1.5; transition: color var(--transition-fast); } details.faq-item summary::-webkit-details-marker, details.faq-item summary::marker { display: none; content: ''; } details.faq-item summary::after { content: '\25BC'; font-size: 0.75rem; color: var(--accent); transition: transform var(--transition-med); flex-shrink: 0; margin-left: 1rem; } details.faq-item[open] summary::after { transform: rotate(180deg); } details.faq-item .faq-body { padding: 0 1.5rem 1.5rem; color: var(--text-light); line-height: 1.8; font-size: 0.95rem; } details.faq-item .faq-body a { color: var(--accent); font-weight: 500; text-decoration: none; } details.faq-item .faq-body a:hover { text-decoration: underline; } /* ---- About Page ---- */ .about-main { padding: 5rem 0; background: var(--cream); } .about-content { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; } .about-text h2 { font-family: 'Playfair Display', serif; color: var(--primary); font-size: 1.8rem; margin-bottom: 1.5rem; } .about-text p { color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; font-size: 1.02rem; } .about-text a { color: var(--accent); text-decoration: none; font-weight: 500; } .about-text a:hover { text-decoration: underline; } /* Bio Download */ .bio-download { padding: 4rem 0; background: var(--light); } .bio-download-content { display: block; max-width: 1100px; margin: 0 auto; } /* Sunshine Coast Section (about page) */ .sunshine-coast-section { padding: 5rem 0; } .sunshine-coast-content { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: center; } @media (max-width: 768px) { .about-content, .bio-download-content, .sunshine-coast-content { grid-template-columns: 1fr; } .about-content > .reveal-left { text-align: center; } .about-content > .reveal-left img { margin: 0 auto; } } /* ---- Contact Section ---- */ .contact { padding: 5rem 0; background: var(--light); position: relative; overflow: hidden; } .contact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(2px 2px at 15% 25%, rgba(201,167,124,0.4) 0%, transparent 100%), radial-gradient(2px 2px at 85% 15%, rgba(201,167,124,0.3) 0%, transparent 100%), radial-gradient(2px 2px at 45% 75%, rgba(201,167,124,0.35) 0%, transparent 100%), radial-gradient(2px 2px at 70% 55%, rgba(201,167,124,0.25) 0%, transparent 100%), radial-gradient(2px 2px at 25% 90%, rgba(201,167,124,0.3) 0%, transparent 100%), radial-gradient(2px 2px at 90% 80%, rgba(201,167,124,0.2) 0%, transparent 100%); animation: fireflies 6s ease-in-out infinite alternate; pointer-events: none; } @keyframes fireflies { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.6; } } .contact .section-title, .contact .section-subtitle { color: var(--primary); } .contact .section-subtitle { color: var(--text); } .contact .cta-call-button { border-color: var(--primary); color: var(--primary); } .contact .cta-call-button:hover { background: var(--primary); color: var(--white); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; } .contact-info { background: var(--white); border: 1px solid var(--glass-border); padding: 2.5rem; border-radius: var(--radius-md); position: relative; z-index: 1; box-shadow: var(--glass-shadow); } .contact-info h3 { font-family: 'Playfair Display', serif; color: var(--primary); margin-bottom: 1.5rem; font-size: 1.3rem; } .contact-info h4 { color: var(--accent); } .contact-info p, .contact-info .info-item p { color: var(--text); } .contact-info a { color: var(--primary); } .info-item { margin-bottom: 1.5rem; } .info-item h4 { color: var(--primary); margin-bottom: 0.5rem; font-size: 1rem; font-weight: 600; font-family: 'Inter', sans-serif; } .info-item p { color: var(--text-light); line-height: 1.6; } .info-item a { color: var(--secondary); text-decoration: none; font-weight: 500; } .info-item a:hover { text-decoration: underline; } /* ---- Subpage Back Button (sticky) ---- */ .subpage-back { position: sticky; top: 70px; z-index: 90; background: rgba(245, 243, 240, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--primary); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: color var(--transition-fast); } .back-link:hover { color: var(--accent); } /* ---- CTA Section ---- */ .cta-section { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(201,167,124,0.1) 0%, transparent 60%); pointer-events: none; } .cta-section .container { position: relative; z-index: 1; } .cta-section h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 1rem; } .cta-section p { font-size: 1.15rem; opacity: 0.95; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .cta-button-large { display: inline-block; background: var(--accent); color: var(--primary); padding: 1rem 2.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } .cta-button-large:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); background: var(--accent-hover); } .cta-buttons { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; } .cta-call-button { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: 2px solid var(--white); color: var(--white); padding: calc(1rem - 2px) 2rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1.05rem; transition: all var(--transition-med); } .cta-call-button:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); } /* ---- Buttons ---- */ .btn-primary { display: inline-block; background: var(--accent); color: var(--primary); padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1.05rem; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); text-align: center; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); background: var(--accent-hover); } .btn-secondary { display: inline-block; background: var(--white); color: var(--primary); border: 2px solid var(--primary); padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1.05rem; transition: all var(--transition-fast); text-align: center; } .btn-secondary:hover { background: var(--primary); color: var(--white); } .btn-call { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--white); padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1.05rem; transition: all var(--transition-fast); text-align: center; gap: 0.5rem; } .btn-call:hover { background: var(--secondary); } /* ---- Outline Link ---- */ .outline-link { display: inline-block; color: var(--primary); font-weight: 600; font-size: 1.05rem; text-decoration: none; padding: 0.75rem 2rem; border: 2px solid var(--accent); border-radius: 8px; transition: all var(--transition-fast); } .outline-link:hover { background: var(--accent); color: var(--white); border-color: var(--accent); } /* ---- Photo Placeholders ---- */ .photo-placeholder { background: linear-gradient(135deg, var(--light) 0%, rgba(201,167,124,0.1) 100%); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-light); position: relative; overflow: hidden; } .photo-placeholder::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(26,58,82,0.06) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(201,167,124,0.08) 0%, transparent 50%); } .photo-placeholder-icon { width: 64px; height: 64px; background: linear-gradient(135deg, rgba(26,58,82,0.1), rgba(201,167,124,0.15)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; position: relative; z-index: 1; } .photo-placeholder-icon svg { width: 32px; height: 32px; stroke: var(--text-light); fill: none; stroke-width: 1.5; opacity: 0.6; } .photo-placeholder-text { font-size: 0.8rem; font-weight: 600; opacity: 0.7; position: relative; z-index: 1; } .photo-placeholder-size { font-size: 0.7rem; opacity: 0.5; margin-top: 0.25rem; position: relative; z-index: 1; } /* ---- Mobile Sticky CTA ---- */ .mobile-sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); padding: 0.75rem 1rem; padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); box-shadow: 0 -4px 16px rgba(0,0,0,0.12); z-index: 9997; } .mobile-sticky-cta a { display: block; background: var(--accent); color: var(--white); text-align: center; padding: 0.9rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: background var(--transition-fast); } .mobile-sticky-cta a:active { background: var(--accent-hover); } /* ---- Footer ---- */ footer { background: var(--primary-dark); color: var(--white); padding: 3rem 0; position: relative; overflow: hidden; } footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,167,124,0.06) 0%, transparent 50%); pointer-events: none; } footer .container { position: relative; z-index: 1; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; } .footer-brand .logo { color: var(--white); font-size: 1.4rem; margin-bottom: 0.75rem; display: inline-block; } .footer-brand .logo span { display: block; font-size: 0.85rem; color: rgba(255,255,255,0.7); } .footer-brand p { opacity: 0.75; font-size: 0.9rem; line-height: 1.6; max-width: 320px; } .footer-logo-img { display: block; max-width: 420px; width: 100%; height: auto; margin-bottom: 1rem; opacity: 0.95; transition: opacity var(--transition-med); } .footer-logo-img:hover { opacity: 1; } .footer-links h4 { font-family: 'Inter', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; margin-bottom: 1rem; } .footer-links ul { list-style: none; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: var(--white); text-decoration: none; opacity: 0.8; font-size: 0.9rem; transition: opacity var(--transition-fast); } .footer-links a:hover { opacity: 1; text-decoration: underline; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; text-align: center; } .footer-bottom p { opacity: 0.7; font-size: 0.85rem; margin-bottom: 0.3rem; } /* Simple footer fallback */ footer.simple { text-align: center; padding: 2.5rem 0; } footer.simple p { opacity: 0.85; margin-bottom: 0.4rem; font-size: 0.9rem; } footer.simple a { color: var(--white); text-decoration: none; opacity: 0.85; } footer.simple a:hover { opacity: 1; text-decoration: underline; } /* ---- Treatment Grid ---- */ .treatment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } .treatment-card { background: var(--light); padding: 2rem; border-radius: var(--radius-md); border: 1px solid transparent; transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); } .treatment-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 12px 36px rgba(0,0,0,0.1); border-color: rgba(201,167,124,0.3); } .treatment-card h3 { font-family: 'Playfair Display', serif; color: var(--primary); margin-bottom: 1.25rem; font-size: 1.25rem; display: flex; align-items: center; gap: 0.75rem; } .treatment-card h3 svg { width: 28px; height: 28px; color: var(--accent); flex-shrink: 0; } .treatment-card ul { padding-left: 1.25rem; } .treatment-card li { color: var(--text-light); padding: 0.3rem 0; line-height: 1.5; } .treatment-card li a { color: var(--accent); text-decoration: none; } .treatment-card li a:hover { text-decoration: underline; } /* ---- Icon Grid ---- */ .icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 3rem 0; } .icon-item { text-align: center; padding: 1.5rem; } .icon-circle { width: 100px; height: 100px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; box-shadow: 0 4px 16px rgba(26,58,82,0.2); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .icon-item:hover .icon-circle { transform: scale(1.05); box-shadow: 0 6px 24px rgba(26,58,82,0.3); } .icon-item h3 { font-family: 'Playfair Display', serif; color: var(--primary); margin-bottom: 0.75rem; font-size: 1.15rem; } .icon-item p { color: var(--text-light); font-size: 0.95rem; line-height: 1.6; } /* ---- Related Section ---- */ .related-section { background: var(--cream); padding: 3rem 0; } .related-grid { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .related-link { background: var(--white); padding: 0.75rem 1.5rem; border-radius: 25px; color: var(--primary); text-decoration: none; font-weight: 500; transition: all var(--transition-fast); border: 2px solid transparent; } .related-link:hover { border-color: var(--accent); background: var(--light); } /* ---- Service Link Button ---- */ .service-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; padding: 0.6rem 1rem; background: var(--primary); color: var(--white); border-radius: var(--radius-sm); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: background var(--transition-fast); } .service-link:hover { background: var(--secondary); text-decoration: none; } .service-link svg { width: 16px; height: 16px; } /* ---- Screen-reader only (hidden but crawlable) ---- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Intro Text ---- */ .intro-text { font-size: 1.05rem; color: var(--text-light); line-height: 1.8; margin-bottom: 2.5rem; max-width: 900px; } .intro-text a { color: var(--accent); text-decoration: none; font-weight: 500; } .intro-text a:hover { text-decoration: underline; } /* ---- Section backgrounds ---- */ .bg-white { background: var(--white); } .bg-light { background: var(--light); } .bg-cream { background: var(--cream); } .content-section { background: var(--white); padding: 4rem 0; } .content-section.alt-bg { background: var(--light); } .content-section h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--primary); margin-bottom: 1.5rem; font-weight: 700; } .content-section h3 { font-family: 'Inter', sans-serif; font-size: 1.3rem; color: var(--primary); margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 600; } .content-section p { color: var(--text-light); line-height: 1.8; margin-bottom: 1.25rem; } .content-section ul { margin-bottom: 1.75rem; padding-left: 1.25rem; } .content-section ul li { padding: 0.4rem 0; color: var(--text-light); line-height: 1.7; } .content-section ul li strong { color: var(--text); } .content-section a { color: var(--accent); text-decoration: none; font-weight: 500; } .content-section a:hover { text-decoration: underline; color: var(--secondary); } /* ---- Content Grid (Main + Sidebar) ---- */ .content-grid { display: grid; grid-template-columns: 1fr 340px; gap: 3.5rem; align-items: start; } .content-main { min-width: 0; } /* ---- Content Sidebar ---- */ .content-sidebar { position: sticky; top: 100px; } .sidebar-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--glass-shadow); transition: border-color var(--transition-med), box-shadow var(--transition-med); } .sidebar-card:hover { border-color: rgba(201,167,124,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.1); } .sidebar-card h4 { color: var(--primary); font-size: 1.05rem; margin-bottom: 0.8rem; font-weight: 700; font-family: 'Inter', sans-serif; } .sidebar-card p { color: var(--text-light); font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.75rem; } .sidebar-card ul { list-style: none; padding: 0; margin: 0; } .sidebar-card ul li { padding: 0.4rem 0; color: var(--text-light); font-size: 0.9rem; border-bottom: 1px solid var(--light); } .sidebar-card ul li:last-child { border-bottom: none; } .sidebar-card ul li::before { content: none; } .sidebar-card ul li a { color: var(--accent); text-decoration: none; font-weight: 500; } .sidebar-card ul li a:hover { text-decoration: underline; } .sidebar-card .btn { display: inline-block; padding: 0.6rem 1.2rem; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: 0.85rem; text-align: center; margin-bottom: 0.5rem; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .sidebar-card .btn-small { display: block; width: 100%; } .sidebar-card .btn-outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); } .sidebar-card .btn-outline:hover { background: var(--accent); color: var(--white); text-decoration: none; } .sidebar-card.sidebar-cta { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); border-color: transparent; } .sidebar-card.sidebar-cta h4 { color: var(--white); } .sidebar-card.sidebar-cta p { color: rgba(255,255,255,0.85); } .sidebar-card.sidebar-cta .btn-primary { color: var(--white) !important; font-weight: 700; } /* ---- Referral Highlight (How to Refer box) ---- */ .referral-highlight { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 2.5rem; box-shadow: var(--glass-shadow); } .referral-highlight h2 { text-align: center; } .referral-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .referral-card { background: var(--light); padding: 1.5rem; border-radius: var(--radius-md); text-align: center; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .referral-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .referral-card h4 { color: var(--primary); margin-bottom: 0.5rem; font-size: 0.9rem; font-family: 'Inter', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .referral-card p { color: var(--primary); font-size: 1.1rem; line-height: 1.5; margin: 0; font-weight: 600; } .referral-card a { color: var(--primary); text-decoration: none; font-weight: 600; } .referral-card a:hover { color: var(--secondary); } .referral-note { text-align: center; color: var(--text-light); font-size: 0.95rem; line-height: 1.6; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--light); } /* ---- Location Bar ---- */ .location-bar { padding: 3.5rem 0; background: var(--light); text-align: center; } .location-bar h3 { color: var(--primary); font-size: 1.3rem; margin-bottom: 0.75rem; } .location-bar p { color: var(--text-light); font-size: 0.95rem; max-width: 700px; margin: 0 auto 1.5rem; } .location-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; } .location-tags span { background: var(--white); color: var(--text); padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 500; } .location-address { color: var(--text-light); font-size: 0.9rem; } .location-address a { color: var(--accent); text-decoration: none; font-weight: 500; } /* ======================================== RESPONSIVE ======================================== */ @media (max-width: 768px) { /* Remove backdrop-filter when mobile menu is open so position:fixed works */ nav:has(.mobile-active) { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Fix horizontal scroll/wobble on mobile */ html, body { overflow-x: hidden; } nav ul { display: flex; position: fixed; top: 0; right: 0; width: min(280px, 85vw); height: 100vh; height: 100dvh; background: var(--white); flex-direction: column; padding: 5rem 0 2rem; padding-right: env(safe-area-inset-right, 0px); box-shadow: -4px 0 20px rgba(0,0,0,0.15); gap: 0; z-index: 10000; transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform var(--transition-med), visibility 0s var(--transition-med); overflow-y: auto; -webkit-overflow-scrolling: touch; } nav ul.mobile-active { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform var(--transition-med), visibility 0s 0s; } nav li { padding: 0; } nav li a { display: block; padding: 1rem 2rem; font-size: 1rem; border-radius: 0; min-height: 48px; display: flex; align-items: center; } nav li a.cta-button { margin: 1rem 1.5rem; text-align: center; justify-content: center; } .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; position: relative; z-index: 10001; } .logo { font-size: 1.3rem; } .logo span { font-size: 0.65rem; } .logo-icon { width: 30px; height: 30px; } .logo-text { font-size: 1.1rem; } .logo-text > span { font-size: 0.55rem; letter-spacing: 0.5px; } .nav-logo-img { height: 40px; max-width: 220px; } /* Hide video on mobile — use static image fallback */ .hero-video-bg { display: none; } /* Hero mobile */ .hero { padding: 3.5rem 0 3rem; } .hero-immersive { min-height: 85vh; padding: 0 0 3rem 0; } .hero-immersive .hero-subtitle { font-size: 1.1rem; } .hero-subtitle { font-size: 1.05rem; } .hero p { font-size: 0.95rem; } .credentials { flex-direction: column; gap: 0.75rem; } .hero-cta { display: block; text-align: center; margin: 0.5rem 0; width: 100%; } .hero-immersive .hero-cta { display: inline-flex; width: auto; margin: 0; } .scroll-indicator-text { display: none; } .trust-badges { gap: 0.6rem; margin-bottom: 2rem; } .trust-badge { font-size: 0.8rem; padding: 0.5rem 1rem; } .page-hero { padding: 3rem 0 2.5rem; height: auto; min-height: 220px; } .section-subtitle { font-size: 0.95rem; padding: 0 0.5rem; } /* Content sections */ .content-section { padding: 3rem 0; } .content-grid { grid-template-columns: 1fr; gap: 2rem; } .content-sidebar { position: static; } .content-section h2 { font-size: 1.5rem; } .content-section h3 { font-size: 1.15rem; margin-top: 2rem; } .referral-methods { grid-template-columns: 1fr; } /* Grids to single column */ .service-grid, .comparison, .contact-grid, .experience-grid, .treatment-grid, .icon-grid { grid-template-columns: 1fr; } .journey-steps { grid-template-columns: 1fr; gap: 2rem; } .journey-steps::before { display: none; } /* Logo banner */ .logo-scroll-wrapper { animation-duration: 30s; } .logo-placeholder { width: 120px; height: 50px; font-size: 0.6rem; } .logo-grid { gap: 2rem; } /* FAQ */ .faq-question { padding: 1.1rem 1.25rem; font-size: 1rem; } .faq-answer-content { padding: 0 1.25rem 1.25rem; } /* Mobile sticky */ .mobile-sticky-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Ensure Call/Book buttons show correct colors even without inner wrapper */ .mobile-sticky-cta .sticky-call { background: var(--primary); color: var(--white); display: flex; flex: 1; } .mobile-sticky-cta .sticky-book { background: var(--accent); color: var(--white); display: flex; flex: 1; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: 2rem; } footer { padding-bottom: 5rem; } footer.simple { padding-bottom: 5rem; } /* Credentials banner */ .credentials-banner { padding: 0.75rem 0; } .credentials-inner { gap: 0.75rem 1.5rem; justify-content: flex-start; } .credential-badge { font-size: 0.75rem; } .credential-badge svg { width: 14px; height: 14px; } /* Icon grid */ .icon-circle { width: 80px; height: 80px; } .icon-item h3 { font-size: 1.05rem; } /* CTA section */ .cta-section h2 { font-size: 1.8rem; } .cta-section p { font-size: 1rem; } } @media (max-width: 480px) { .hero-immersive { min-height: 75vh; padding-bottom: 4rem; } .hero-immersive .hero-subtitle { font-size: 1rem; } .hero-subtitle { font-size: 1rem; } .container { padding: 0 16px; } .logo-placeholder { width: 100px; height: 45px; font-size: 0.55rem; } .icon-circle { width: 70px; height: 70px; } } /* ---- Print Styles ---- */ @media print { nav, .mobile-sticky-cta, .mobile-menu-toggle, .mobile-nav-overlay, .cta-button, .hero-cta, .btn-primary, .btn-secondary, .btn-call, .back-to-top { display: none !important; } body { background: white; color: black; font-size: 12pt; } .hero, .page-hero, .cta-section { background: none !important; color: black !important; padding: 1rem 0; } .atmosphere-canvas { display: none !important; } a { color: black; text-decoration: underline; } } /* ---- Atmosphere Canvas ---- */ /* Visibility controlled by atmosphere.js via inline transition (survives prefers-reduced-motion) */ .atmosphere-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* ---- Neon Glow Hover — Buttons ---- */ .hero-cta, .btn-primary, .btn-secondary, .btn-call, .cta-button { transition: transform var(--transition-fast), box-shadow 0.4s ease, background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .hero-cta:hover, .btn-primary:hover { box-shadow: 0 0 12px rgba(201,167,124,0.45), 0 0 28px rgba(201,167,124,0.2), 0 4px 16px rgba(0,0,0,0.12); } .hero-cta.secondary:hover, .btn-secondary:hover { box-shadow: 0 0 12px rgba(74,111,165,0.35), 0 0 28px rgba(74,111,165,0.15), 0 4px 16px rgba(0,0,0,0.1); } .btn-call:hover { box-shadow: 0 0 12px rgba(26,58,82,0.4), 0 0 28px rgba(26,58,82,0.2), 0 4px 16px rgba(0,0,0,0.12); } /* ---- Glassmorphism — Highlight Boxes ---- */ .highlight-box { background: rgba(245,240,232,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-left: 4px solid var(--accent); border-top: 1px solid rgba(255,255,255,0.5); border-right: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); } /* ---- Glassmorphism — Info Cards on Homepage ---- */ .info-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); } .info-card:hover { border-color: rgba(201,167,124,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* ---- Glassmorphism — Clinic Cards (Location) ---- */ .clinic-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: 2rem; margin-bottom: 2rem; transition: box-shadow var(--transition-med), border-color var(--transition-med); } .clinic-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1); border-color: rgba(201,167,124,0.2); } /* ---- Glassmorphism — Step Numbers ---- */ .step-number { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); } /* ---- Back to Top Button ---- */ .back-to-top { position: fixed; bottom: 6.5rem; right: 2rem; width: 48px; height: 48px; background: var(--primary); color: var(--white); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease; z-index: 9998; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--accent); box-shadow: 0 6px 20px rgba(201,167,124,0.4); } .back-to-top svg { width: 20px; height: 20px; } @media (max-width: 768px) { .back-to-top { bottom: 6.5rem; right: auto; left: 1rem; width: 42px; height: 42px; z-index: 9999; } .back-to-top svg { width: 18px; height: 18px; } } /* ==================================================================== V2 COMPONENT STYLES — New sections for V6 content integration Added by css-warrior. Matches V1 design system: - Colors: Navy #1A3A52, Gold #C9A77C, Cream #F5F0E8, Dark Navy #0D1B2A - Glassmorphism: backdrop-filter blur, semi-transparent backgrounds - Fonts: Playfair Display (headings), Inter (body) - Transitions: var(--transition-med), var(--transition-slow) ==================================================================== */ /* ---- Mobile Sticky CTA — Call + Book Buttons ---- */ .mobile-sticky-cta-inner { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; width: 100%; } .sticky-call, .sticky-book { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border: none; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; transition: background var(--transition-med), box-shadow var(--transition-med); } .sticky-call { background: var(--primary); color: var(--white); } .sticky-call:hover { background: #152f44; box-shadow: 0 4px 12px rgba(26,58,82,0.3); } .sticky-book { background: var(--accent); color: var(--dark-navy); } .sticky-book:hover { background: #b8945e; box-shadow: 0 4px 12px rgba(201,167,124,0.4); } .sticky-call svg, .sticky-book svg { width: 18px; height: 18px; flex-shrink: 0; } /* ---- Who Can I Help — Tag Cloud Section ---- */ .who-section { padding: 4rem 2rem; text-align: center; background: var(--cream); } .who-content { max-width: 800px; margin: 0 auto; } .who-section h2 { font-family: var(--font-heading); color: var(--primary); font-size: 2rem; margin-bottom: 0.75rem; } .who-section p { color: var(--text-secondary); margin-bottom: 2rem; font-size: 1.05rem; line-height: 1.6; } .who-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .who-tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; background: var(--white); border: 1px solid rgba(26,58,82,0.12); border-radius: 50px; font-size: 0.95rem; color: var(--primary); font-weight: 500; transition: all var(--transition-med); cursor: default; } .who-tag:hover { background: var(--primary); color: var(--white); border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,58,82,0.2); } .who-tag .tag-icon { font-size: 1.1rem; line-height: 1; } /* ---- Doctor Introduction Card (Location Page) ---- */ .doctor-intro { padding: 4rem 2rem; background: var(--cream); } .doctor-intro-inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 3rem; align-items: center; } .doctor-intro-photo { flex-shrink: 0; } .doctor-intro-photo img { width: 320px; height: auto; border-radius: var(--radius-xl); object-fit: cover; border: 3px solid var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .doctor-intro-text h2 { font-family: var(--font-heading); color: var(--primary); font-size: 1.8rem; margin-bottom: 0.5rem; } .doctor-intro-text .subtitle { color: var(--accent); font-weight: 600; font-size: 1rem; margin-bottom: 1rem; } .doctor-intro-text p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1rem; font-size: 1.1rem; } .doctor-intro-credentials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .doctor-intro-credentials .credential-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; background: rgba(26,58,82,0.06); border-radius: 50px; font-size: 0.8rem; color: var(--primary); font-weight: 500; } .doctor-intro-credentials .credential-badge svg { width: 14px; height: 14px; color: var(--accent); } /* ---- About Section — Homepage Feature ---- */ .about-section { padding: 5rem 2rem; background: var(--dark-navy); color: var(--white); position: relative; overflow: hidden; } .about-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 50%, rgba(201,167,124,0.08) 0%, transparent 70%); pointer-events: none; } .about-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; position: relative; z-index: 1; } .about-image { position: relative; } .about-image img { width: 100%; max-width: 400px; border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .about-image::after { content: ''; position: absolute; top: -10px; right: -10px; width: 100%; height: 100%; border: 2px solid var(--accent); border-radius: var(--radius-lg); opacity: 0.3; z-index: -1; } .about-section .about-text h2 { font-family: var(--font-heading); color: var(--white); font-size: 2.2rem; margin-bottom: 1rem; } .about-section .about-text p { color: rgba(255,255,255,0.8); line-height: 1.8; margin-bottom: 1.5rem; font-size: 1.05rem; } .about-credentials { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; } .about-credentials .badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 50px; font-size: 0.85rem; color: rgba(255,255,255,0.9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .about-credentials .badge svg { width: 14px; height: 14px; color: var(--accent); } .about-cta { display: flex; gap: 1rem; flex-wrap: wrap; } .about-cta .btn { padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; transition: all var(--transition-med); font-size: 0.95rem; } .about-cta .btn-primary { background: var(--accent); color: var(--dark-navy); } .about-cta .btn-primary:hover { background: #b8945e; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,167,124,0.4); } .about-cta .btn-outline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.3); } .about-cta .btn-outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); } /* ---- Doctor Photo — Circular with Gold Border ---- */ .doctor-photo { text-align: center; margin-bottom: 2rem; } .doctor-photo-container { display: inline-block; position: relative; } .doctor-photo-container img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); box-shadow: 0 8px 32px rgba(0,0,0,0.15); } /* ---- Elite Sport Gallery ---- */ .elite-sport { padding: 4rem 2rem; } .elite-sport h2 { font-family: var(--font-heading); color: var(--primary); text-align: center; font-size: 2rem; margin-bottom: 0.5rem; } .elite-sport > p { text-align: center; color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; } .elite-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; } .elite-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 4px 16px rgba(0,0,0,0.1); } .elite-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .elite-photo:hover img { transform: scale(1.05); } .photo-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1rem 1rem; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: var(--white); font-size: 0.85rem; font-weight: 500; } /* ---- Timeline Feature Photo ---- */ .timeline-feature-photo { margin: 0.5rem 0; max-width: 340px; box-shadow: none; } .timeline-feature-photo img { width: 100%; display: block; border-radius: var(--radius-md); } /* Consistent photo sizing in pairs - fixed height ensures matching */ .timeline-photo-pair .timeline-feature-photo img { height: 250px; object-fit: cover; object-position: center 20%; } /* Standalone timeline photos (not logos) */ .timeline-feature-photo:not(.timeline-logo) > img:not([src*="logo"]) { height: 260px; object-fit: cover; object-position: center 20%; } .timeline-feature-photo .photo-caption { position: relative; z-index: 2; background: var(--light); color: var(--primary); padding: 0.5rem 0; font-size: 0.8rem; font-style: italic; } /* Timeline photo pairs */ .timeline-photo-pair { margin-bottom: 0.5rem; } /* Timeline logos - no cropping or effects */ .timeline-feature-photo.timeline-logo { overflow: visible; box-shadow: none; background: transparent; } .timeline-feature-photo.timeline-logo img { aspect-ratio: auto; object-fit: contain; } /* Timeline photo parallax */ .timeline-feature-photo.parallax-photo { overflow: hidden; } .timeline-feature-photo.parallax-photo img { transition: transform 0.1s linear; will-change: transform; transform: scale(1.08); } /* ---- Full-Width Cards (Services/Injuries Grid) ---- */ .full-width-card { grid-column: 1 / -1; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: 2rem; transition: border-color var(--transition-med), box-shadow var(--transition-med); } .full-width-card:hover { border-color: rgba(201,167,124,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.1); } .full-width-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; } .full-width-card h3 { font-family: var(--font-heading); color: var(--primary); font-size: 1.3rem; margin-bottom: 0.5rem; } .full-width-card p { color: var(--text-secondary); line-height: 1.6; } .full-width-card ul { list-style: none; padding: 0; } .full-width-card ul li { position: relative; padding-left: 1.25rem; color: var(--text-secondary); line-height: 1.8; font-size: 0.95rem; } .full-width-card ul li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; } /* ---- Location Section — Suburb Tags ---- */ .location-section { padding: 3rem 2rem; background: var(--cream); text-align: center; } .location-section h2 { font-family: var(--font-heading); color: var(--primary); font-size: 1.8rem; margin-bottom: 0.5rem; } .location-section > p { color: var(--text-secondary); margin-bottom: 2rem; } .location-suburbs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; max-width: 800px; margin: 0 auto; } .location-suburbs span { display: inline-block; padding: 0.4rem 0.85rem; background: var(--white); border: 1px solid rgba(26,58,82,0.1); border-radius: 50px; font-size: 0.85rem; color: var(--text-secondary); transition: all var(--transition-med); } .location-suburbs span:hover { background: var(--primary); color: var(--white); border-color: var(--primary); } /* Location Inner (two-column layout) */ .location-inner { display: flex; gap: 2rem; align-items: flex-start; text-align: left; } .location-text { flex: 1; } .location-text h3 { color: var(--primary); font-size: 1.2rem; margin-bottom: 0.5rem; } .location-text p { color: var(--text-light); font-size: 0.95rem; line-height: 1.7; margin-bottom: 0.5rem; } .location-address { flex: 0 0 280px; background: var(--light); padding: 1.25rem; border-radius: 8px; } .location-address p { color: var(--text); font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.25rem; } .location-address a { color: var(--accent); text-decoration: none; font-weight: 500; } .location-address a:hover { text-decoration: underline; } .location-address svg { width: 18px; height: 18px; color: var(--accent); } /* ---- Feature Banner — Brisbane 2032 ---- */ .feature-banner { padding: 4rem 2rem; background: linear-gradient(135deg, var(--primary) 0%, #1a3a52 50%, #24475D 100%); text-align: center; color: var(--white); position: relative; overflow: hidden; } .feature-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 20%, rgba(201,167,124,0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(201,167,124,0.1) 0%, transparent 50%); pointer-events: none; } .feature-banner::after { content: ''; position: absolute; top: -50%; left: -50%; right: -50%; bottom: -50%; background: conic-gradient(from 0deg, transparent, rgba(201,167,124,0.04), transparent, rgba(201,167,124,0.04), transparent); animation: shimmerRotate 12s linear infinite; pointer-events: none; } @keyframes shimmerRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .feature-banner h3 { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 0.5rem; position: relative; z-index: 1; color: var(--white); letter-spacing: 0.02em; } .feature-banner p { color: rgba(255,255,255,0.8); font-size: 1.1rem; max-width: 600px; margin: 0 auto; position: relative; z-index: 1; letter-spacing: 0.02em; } .feature-banner-logos { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 2rem; position: relative; z-index: 1; } .feature-banner-logos img { height: 80px; width: auto; filter: brightness(1.1) drop-shadow(0 0 20px rgba(201,167,124,0.4)); transition: transform var(--transition-med), filter var(--transition-med); animation: logoPulse 3s ease-in-out infinite; } @keyframes logoPulse { 0%, 100% { filter: brightness(1.1) drop-shadow(0 0 20px rgba(201,167,124,0.4)); } 50% { filter: brightness(1.2) drop-shadow(0 0 30px rgba(201,167,124,0.6)); } } .feature-banner-logos img:hover { transform: scale(1.1); filter: brightness(1.3) drop-shadow(0 0 35px rgba(201,167,124,0.7)); } /* ---- Bio Download Cards ---- */ .bio-downloads { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; } .bio-download-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 280px; text-align: center; transition: border-color var(--transition-med), box-shadow var(--transition-med); } .bio-download-card:hover { border-color: rgba(201,167,124,0.25); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .bio-download-card h4 { font-family: var(--font-heading); color: var(--primary); font-size: 1.1rem; margin-bottom: 0.5rem; } .bio-download-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; } .download-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; background: var(--primary); color: var(--white); border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; text-decoration: none; transition: all var(--transition-med); cursor: pointer; } .download-btn:hover { background: var(--accent); color: var(--dark-navy); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(201,167,124,0.3); } .download-btn svg { width: 16px; height: 16px; } .bio-formats { margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted); } /* ---- Not Sure Card ---- */ .not-sure-card { background: linear-gradient(135deg, var(--primary) 0%, #234b66 100%); color: var(--white); border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; } .not-sure-card h3 { font-family: var(--font-heading); color: var(--white); font-size: 1.4rem; margin-bottom: 0.75rem; } .not-sure-card p { color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 1.5rem; max-width: 400px; margin-left: auto; margin-right: auto; } .not-sure-section { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .not-sure-section .btn { padding: 0.7rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; font-size: 0.9rem; transition: all var(--transition-med); } .not-sure-section .btn-gold { background: var(--accent); color: var(--dark-navy); } .not-sure-section .btn-gold:hover { background: #b8945e; transform: translateY(-2px); } .not-sure-section .btn-outline-white { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.4); } .not-sure-section .btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); } /* ---- Mobile Hint Text ---- */ .mobile-hint { display: none; text-align: center; color: var(--text-muted); font-size: 0.8rem; padding: 0.5rem; margin-top: -0.5rem; } /* ---- Hero Paragraph Variants ---- */ .hero-lead { font-size: 1.15rem; line-height: 1.7; color: rgba(255,255,255,0.9); max-width: 650px; margin: 1rem auto 1.5rem; } .hero-sub { font-size: 0.95rem; color: rgba(255,255,255,0.7); max-width: 550px; margin: 0 auto 1.5rem; } /* ---- Credential Cards (About Page — SVG icons) ---- */ .credential-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; transition: border-color var(--transition-med), transform var(--transition-med); } .credential-card:hover { border-color: rgba(201,167,124,0.2); transform: translateY(-4px); } .card-icon { width: 48px; height: 48px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; background: rgba(201,167,124,0.1); border-radius: 50%; color: var(--accent); } .card-icon svg { width: 24px; height: 24px; } .credential-card h3 { font-family: var(--font-heading); color: var(--primary); font-size: 1.1rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.75rem; } .credential-card .card-icon { margin: 0; width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 8px; flex-shrink: 0; } .credential-card .card-icon svg { width: 20px; height: 20px; stroke: var(--white); fill: none; stroke-width: 1.5; } .credential-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; } /* ---- Value Cards (About Page) ---- */ .values { padding: 4rem 0; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; } .value-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 2rem; text-align: center; box-shadow: var(--glass-shadow); transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); } .value-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.5); border-color: rgba(201,167,124,0.25); } .value-icon { width: 56px; height: 56px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: var(--radius-md); } .value-icon svg { width: 28px; height: 28px; stroke: var(--white); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .value-card .card-header { display: flex; justify-content: center; align-items: center; gap: 0.5rem; cursor: default; } .value-card .card-header h3 { margin-bottom: 1rem; } .value-card .collapse-icon { display: none; width: 20px; height: 20px; color: var(--secondary); transition: transform 0.3s ease; flex-shrink: 0; } .value-card .card-content { transition: max-height 0.3s ease, opacity 0.3s ease; overflow: hidden; } .value-card h3 { font-family: 'Playfair Display', serif; color: var(--primary); font-size: 1.25rem; margin-bottom: 0.75rem; } .value-card p { color: var(--text-light); font-size: 0.95rem; line-height: 1.7; } .value-card a { color: var(--accent); text-decoration: none; } /* ---- Card Grid (Services V2 — 2-Column Layout) ---- */ .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; } /* ---- Condition Group Cards (Services Page V2) ---- */ .condition-group { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-med), box-shadow var(--transition-med); } .condition-group:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .condition-group-header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: filter var(--transition-fast); } .condition-group-header:active { filter: brightness(1.1); } .cg-icon { width: 38px; height: 38px; background: rgba(255,255,255,0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cg-icon svg { width: 22px; height: 22px; stroke: var(--white); fill: none; stroke-width: 1.5; } .cg-title { flex: 1; min-width: 0; } .cg-title h3 { font-size: 1.15rem; margin-bottom: 0.2rem; line-height: 1.3; color: var(--white); } .cg-title .tagline { opacity: 0.9; font-size: 0.9rem; } .collapse-icon { display: none; width: 24px; height: 24px; color: var(--white); transition: transform var(--transition-med); flex-shrink: 0; opacity: 0.9; } /* Always-collapsible cards (e.g. referrers page) - work on all screen sizes */ .always-collapsible { margin-bottom: 1.25rem; } .always-collapsible .condition-group-header { padding: 0.6rem 1rem; } .always-collapsible .cg-body { padding: 0.75rem 1rem; } .always-collapsible .cg-title h3 { font-size: 0.95rem; font-weight: 500; } .always-collapsible .cg-title .tagline { font-size: 0.82rem; opacity: 1; color: rgba(255, 255, 255, 0.85); } .always-collapsible .cg-body li { font-size: 0.85rem; line-height: 1.5; } .always-collapsible .cg-body p { font-size: 0.85rem; line-height: 1.5; } .always-collapsible .collapse-icon { display: block; } .always-collapsible .condition-group-header { cursor: pointer; } .always-collapsible.collapsed .cg-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } .always-collapsible:not(.collapsed) .cg-body { max-height: 2000px; opacity: 1; } .always-collapsible.collapsed .collapse-icon { transform: rotate(-90deg); } .cg-body { padding: 1.25rem 1.5rem; transition: max-height var(--transition-med), opacity var(--transition-med), padding var(--transition-med); overflow: hidden; } .cg-body p { color: var(--text-light); line-height: 1.7; margin-bottom: 0.75rem; font-size: 1rem; } .cg-body ul { color: var(--text-light); line-height: 1.8; padding-left: 1.25rem; margin-bottom: 0.75rem; } .cg-body li { margin-bottom: 0.4rem; font-size: 1rem; } .cg-body a { color: var(--accent); text-decoration: none; font-weight: 500; } .cg-body a:hover { text-decoration: underline; } .condition-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 0.9rem; } .condition-link:hover { text-decoration: underline; } .condition-link svg { width: 16px; height: 16px; } /* ---- Two-Column List (Full-Width Cards) ---- */ .two-col-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; } .two-col-list ul { color: var(--text-light); line-height: 1.7; padding-left: 1.25rem; margin-bottom: 0.75rem; } .two-col-list li { margin-bottom: 0.4rem; font-size: 0.95rem; } /* ---- Treatment Card V2 (with header/body pattern) ---- */ .treatment-card:has(.treatment-header) { padding: 0; overflow: hidden; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid transparent; transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); } .treatment-card:has(.treatment-header):hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 12px 36px rgba(0,0,0,0.1); border-color: rgba(201,167,124,0.3); } .treatment-header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: filter var(--transition-fast); } .treatment-header:active { filter: brightness(1.1); } .tx-body { padding: 1.25rem 1.5rem; transition: max-height var(--transition-med), opacity var(--transition-med), padding var(--transition-med); overflow: hidden; } .tx-body p { color: var(--text-light); line-height: 1.7; margin-bottom: 0.75rem; font-size: 0.95rem; } .tx-body ul { color: var(--text-light); line-height: 1.7; padding-left: 1.25rem; margin-bottom: 0.75rem; } .tx-body li { margin-bottom: 0.3rem; font-size: 0.95rem; padding-left: 0; } .tx-body li::before { content: none; } .tx-body a { color: var(--accent); text-decoration: none; font-weight: 500; } .tx-body a:hover { text-decoration: underline; } /* Full-width condition card — override generic .full-width-card glass styles */ .condition-group.full-width-card { grid-column: 1 / -1; background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; border: none; padding: 0; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); overflow: hidden; } .condition-group.full-width-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; } /* Full-width treatment card */ .treatment-card.full-width-card .treatment-header { background: linear-gradient(135deg, var(--primary), var(--secondary)); } /* "Not Sure" card in grid — gold header */ .not-sure-grid-card .condition-group-header { background: linear-gradient(135deg, var(--accent), #b8956b); } /* ---- Journey Timeline (About Page) ---- */ .my-journey { padding: 4rem 2rem; } .my-journey h2 { font-family: var(--font-heading); color: var(--primary); text-align: center; font-size: 2rem; margin-bottom: 2.5rem; } .timeline { position: relative; max-width: 700px; margin: 0 auto; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .timeline-item { position: relative; padding-bottom: 1.25rem; padding-left: 2rem; } .timeline-item::before { content: ''; position: absolute; left: -2.45rem; top: 0.3rem; width: 12px; height: 12px; background: var(--accent); border: 2px solid var(--white); border-radius: 50%; box-shadow: 0 0 0 3px rgba(201,167,124,0.2); } .timeline-item .year { display: inline-block; font-weight: 700; color: var(--accent); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem; } .timeline-item h3 { font-family: var(--font-heading); color: var(--primary); font-size: 1.15rem; margin-bottom: 0.35rem; } .timeline-item p { color: var(--text-secondary); line-height: 1.6; font-size: 0.95rem; } /* ---- Care Journey Section (V2 variant) ---- */ .care-journey-v2 { padding: 4rem 2rem; background: var(--cream); } .care-journey-v2 h2 { font-family: var(--font-heading); color: var(--primary); text-align: center; font-size: 2rem; margin-bottom: 0.5rem; } .care-journey-v2 > p { text-align: center; color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; } .care-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; } .care-step { text-align: center; position: relative; } .care-step .step-num { width: 48px; height: 48px; background: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; margin: 0 auto 1rem; } .care-step h3 { font-family: var(--font-heading); color: var(--primary); font-size: 1.05rem; margin-bottom: 0.5rem; } .care-step p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; } .care-step a { color: var(--accent); text-decoration: underline; } .care-step a:hover { color: var(--accent-hover); } /* ---- Doctor Intro Banner (Homepage Enhanced) ---- */ .doctor-intro-banner { padding: 0; position: relative; overflow: hidden; } .doctor-intro-banner-photo { width: 100%; max-height: 420px; overflow: hidden; position: relative; } .doctor-intro-banner-photo::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to top, var(--cream) 0%, transparent 100%); pointer-events: none; } .doctor-intro-banner-photo img { width: 100%; max-width: 900px; height: auto; max-height: 420px; object-fit: cover; object-position: center 15%; display: block; margin: 0 auto; border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: 0 8px 32px rgba(0,0,0,0.12); } .doctor-intro-banner .doctor-intro-inner { max-width: 800px; margin: 0 auto; display: block; text-align: center; padding: 2rem 2rem 4rem; position: relative; z-index: 1; margin-top: -2rem; } .doctor-intro-banner .doctor-intro-text { max-width: 700px; margin: 0 auto; } .doctor-intro-banner .doctor-intro-credentials { justify-content: center; } .doctor-intro-banner .doctor-intro-text h2 { font-size: 2rem; } /* ---- Google Reviews Section ---- */ .google-reviews { padding: 5rem 0; background: var(--light); } .reviews-placeholder { text-align: center; padding: 3rem 1.5rem; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border-radius: var(--radius-lg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); max-width: 600px; margin: 0 auto; transition: transform var(--transition-med), box-shadow var(--transition-med); } .reviews-placeholder:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.5); } .reviews-stars { font-size: 2.5rem; margin-bottom: 1rem; line-height: 1; } .reviews-coming { color: var(--text-light); font-size: 1.1rem; margin-bottom: 0; } .reviews-cta { margin-top: 1.5rem; display: inline-block; } /* ==================================================================== V2 RESPONSIVE — Mobile styles for new components ==================================================================== */ @media (max-width: 768px) { /* Mobile CTA */ .mobile-sticky-cta-inner { flex-direction: row; } .sticky-call, .sticky-book { font-size: 0.9rem; padding: 0.75rem 1rem; min-height: 44px; } /* Who Section */ .who-section { padding: 3rem 1.5rem; } .who-section h2 { font-size: 1.6rem; } .who-tags { gap: 0.5rem; } .who-tag { font-size: 0.85rem; padding: 0.5rem 1rem; } /* Doctor Intro */ .doctor-intro-inner { flex-direction: column; text-align: center; gap: 1.5rem; } .doctor-intro-photo img { width: 260px; height: auto; } .doctor-intro-credentials { justify-content: center; } /* Doctor Intro Banner */ .doctor-intro-banner-photo { max-height: 300px; } .doctor-intro-banner-photo img { max-height: 300px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .doctor-intro-banner .doctor-intro-inner { padding: 1.5rem 1.25rem 3rem; margin-top: -1.5rem; } .doctor-intro-banner .doctor-intro-text h2 { font-size: 1.6rem; } /* Google Reviews */ .google-reviews { padding: 3rem 0; } .reviews-placeholder { padding: 2rem 1rem; } .reviews-stars { font-size: 2rem; } /* About Section */ .about-inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; } .about-image { order: -1; } .about-image img { max-width: 280px; margin: 0 auto; display: block; } .about-image::after { display: none; } .about-credentials { justify-content: center; } .about-cta { justify-content: center; } /* Elite Gallery */ .elite-gallery { grid-template-columns: 1fr; gap: 1rem; } .elite-photo { aspect-ratio: 16/9; } /* Full-Width Cards */ .full-width-body { grid-template-columns: 1fr; gap: 1rem; } /* Values Grid */ .values-grid { grid-template-columns: 1fr; gap: 1rem; } /* Value Card Mobile Collapse */ .value-card { cursor: pointer; text-align: left; } .value-card .collapse-icon { display: block; } .value-card .card-header { cursor: pointer; justify-content: flex-start; margin-bottom: 0; } .value-card .card-header h3 { margin-bottom: 0; } .value-card .value-icon { margin: 0; width: 50px; height: 50px; } .value-card .value-icon svg { width: 26px; height: 26px; } .value-card.collapsed .card-content { max-height: 0; opacity: 0; margin-top: 0; } .value-card:not(.collapsed) .card-content { max-height: 500px; opacity: 1; margin-top: 1rem; } .value-card.collapsed .collapse-icon { transform: rotate(-90deg); } .value-card:not(.collapsed) .collapse-icon { transform: rotate(0deg); } /* Care Steps */ .care-steps { grid-template-columns: 1fr 1fr; gap: 1rem; } /* Timeline */ .timeline { padding-left: 1.5rem; } .timeline-item { padding-left: 1.5rem; } .timeline-item::before { left: -1.9rem; } /* Feature Banner */ .feature-banner-logos { gap: 1rem; flex-wrap: wrap; } .feature-banner-logos img { height: 60px; } /* Bio Downloads */ .bio-downloads { flex-direction: column; align-items: center; } .bio-download-card { max-width: 100%; } /* Mobile Hint */ .mobile-hint { display: block; } /* Location Section */ .location-suburbs span { font-size: 0.8rem; padding: 0.35rem 0.7rem; } /* Card Grid — single column on mobile */ .card-grid { grid-template-columns: 1fr; gap: 1rem; } .condition-group:hover, .treatment-card:has(.treatment-header):hover { transform: none; box-shadow: var(--shadow-sm); } .collapse-icon { display: block; } .condition-group-header, .treatment-header { padding: 1rem 1.25rem; gap: 0.875rem; } .cg-icon { width: 42px; height: 42px; } .cg-icon svg { width: 22px; height: 22px; } .cg-title h3 { font-size: 1.1rem; } .cg-title .tagline { font-size: 0.8rem; } /* Collapsed state */ .condition-group.collapsed .cg-body, .treatment-card.collapsed .tx-body, .treatment-card.collapsed .full-width-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } .condition-group:not(.collapsed) .cg-body, .treatment-card:not(.collapsed) .tx-body, .treatment-card:not(.collapsed) .full-width-body { max-height: 2000px; opacity: 1; } .condition-group.collapsed .collapse-icon, .treatment-card.collapsed .collapse-icon { transform: rotate(-90deg); } .cg-body, .tx-body { padding: 1rem 1.25rem; } /* Full-width condition cards — match standard card appearance on mobile */ .condition-group.full-width-card { background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; border: none; padding: 0; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); overflow: hidden; } .condition-group.full-width-card:hover { border-color: transparent; box-shadow: var(--shadow-sm); } .two-col-list { grid-template-columns: 1fr; gap: 0; } /* Location Inner — stack on mobile */ .location-inner { flex-direction: column; gap: 1.25rem; } .location-address { flex: none; width: 100%; } } @media (max-width: 480px) { /* Who Tags */ .who-tag { font-size: 0.8rem; padding: 0.4rem 0.85rem; } /* About Section */ .about-section { padding: 3rem 1.25rem; } .about-text h2 { font-size: 1.6rem; } /* Care Steps */ .care-steps { grid-template-columns: 1fr; } /* Not Sure Card */ .not-sure-card { padding: 1.5rem; } .not-sure-section { flex-direction: column; } .not-sure-section .btn { width: 100%; text-align: center; } /* Doctor Intro */ .doctor-intro-photo img { width: 200px; height: auto; } .doctor-intro-text h2 { font-size: 1.4rem; } /* Doctor Intro Banner */ .doctor-intro-banner-photo { max-height: 240px; } .doctor-intro-banner-photo img { max-height: 240px; } .doctor-intro-banner .doctor-intro-text h2 { font-size: 1.4rem; } /* Elite Gallery */ .elite-sport h2 { font-size: 1.5rem; } /* Location */ .location-section h2 { font-size: 1.4rem; } }