/* ========================================================================== CareMedBill - Master Executive Design System (Refined Text-Hugging Underline) Sleek Animated Underlines That Hug Text EXACTLY Without Extending Past Words ========================================================================== */ /* Fonts are loaded via in each page's — a render-blocking @import here would serialise the request behind this stylesheet. */ :root { /* LIGHT MODE VIBRANT OMBRE MESH COLOR PALETTE */ --bg-primary: #e0f2fe; --bg-secondary: linear-gradient(135deg, #bae6fd 0%, #ffffff 35%, #e0f2fe 70%, #7dd3fc 100%); --bg-tertiary: #bae6fd; --bg-card: rgba(255, 255, 255, 0.92); --bg-nav: rgba(255, 255, 255, 0.94); --accent-primary: #0284c7; --accent-secondary: #0369a1; --accent-cyan: #06b6d4; --accent-blue: #0284c7; --accent-emerald: #059669; --accent-hover: #0369a1; --accent-glow: rgba(2, 132, 199, 0.35); --text-primary: #0f172a; --text-secondary: #1e293b; --text-muted: #475569; --border-light: #7dd3fc; --border-accent: #0284c7; /* Layered ambient shadows, tinted with the palette blue rather than black, so elevation reads as light falling through the ombre rather than dirt. */ --shadow-sm: 0 1px 2px rgba(12, 74, 110, 0.05), 0 4px 12px -2px rgba(2, 132, 199, 0.09); --shadow-md: 0 1px 2px rgba(12, 74, 110, 0.05), 0 8px 20px -4px rgba(2, 132, 199, 0.11), 0 20px 44px -12px rgba(2, 132, 199, 0.14); --shadow-lg: 0 1px 2px rgba(12, 74, 110, 0.05), 0 14px 32px -8px rgba(2, 132, 199, 0.13), 0 36px 72px -20px rgba(2, 132, 199, 0.20); --shadow-float: 0 2px 4px rgba(12, 74, 110, 0.04), 0 12px 28px -6px rgba(2, 132, 199, 0.14), 0 44px 88px -24px rgba(2, 132, 199, 0.22); --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75); /* Concentric radii: outer shells, then inner cores stepped down by the shell's padding so nested corners stay optically parallel. */ --radius-xs: 10px; --radius-sm: 14px; --radius-md: 20px; --radius-lg: 28px; --radius-xl: 36px; --radius-full: 9999px; --bezel-pad: 7px; --radius-core: calc(var(--radius-xl) - var(--bezel-pad)); /* Spacing scale — one rhythm, used everywhere instead of ad-hoc rems. */ --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5rem; --space-3xl: 7.5rem; --font-heading: 'Playfair Display', 'Iowan Old Style', Georgia, serif; --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; /* Spring-weighted easing; nothing in the UI uses linear or ease-in-out. */ --ease-out-soft: cubic-bezier(0.32, 0.72, 0, 1); --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1); --transition-fast: 0.25s cubic-bezier(0.32, 0.72, 0, 1); --transition-smooth: 0.5s cubic-bezier(0.32, 0.72, 0, 1); --transition-slow: 0.8s cubic-bezier(0.32, 0.72, 0, 1); /* Systemic z-scale, so nothing needs an arbitrary 9999. */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-modal: 400; } /* HIGH-CONTRAST VIBRANT OMBRE DARK MODE PALETTE */ [data-theme="dark"] { --bg-primary: #0b1329; --bg-secondary: linear-gradient(135deg, #0b1329 0%, #0369a1 40%, #0f172a 75%, #0b1329 100%); --bg-tertiary: #1e293b; --bg-card: rgba(30, 41, 59, 0.92); --bg-nav: rgba(15, 23, 42, 0.95); --accent-primary: #38bdf8; --accent-secondary: #0284c7; --accent-cyan: #22d3ee; --accent-blue: #38bdf8; --accent-emerald: #10b981; --accent-hover: #0284c7; --accent-glow: rgba(56, 189, 248, 0.45); --text-primary: #ffffff; --text-secondary: #f1f5f9; --text-muted: #cbd5e1; --border-light: #38bdf8; --border-accent: #38bdf8; --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.5), 0 4px 14px -2px rgba(2, 6, 23, 0.45); --shadow-md: 0 1px 2px rgba(2, 6, 23, 0.5), 0 10px 24px -4px rgba(2, 6, 23, 0.5), 0 24px 50px -12px rgba(2, 6, 23, 0.45); --shadow-lg: 0 1px 2px rgba(2, 6, 23, 0.5), 0 16px 36px -8px rgba(2, 6, 23, 0.55), 0 40px 80px -20px rgba(2, 6, 23, 0.5); --shadow-float: 0 2px 6px rgba(2, 6, 23, 0.55), 0 16px 34px -6px rgba(2, 6, 23, 0.55), 0 48px 96px -24px rgba(56, 189, 248, 0.16); --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #ffffff !important; } [data-theme="dark"] p, [data-theme="dark"] li { color: #f1f5f9 !important; } [data-theme="dark"] .subtitle { color: #38bdf8 !important; background: rgba(15, 23, 42, 0.85) !important; border-color: #38bdf8 !important; } /* BASE RESET & PROMINENT OMBRE BODY BACKDROP */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; background-color: var(--bg-primary); width: 100%; overflow-x: hidden; } body { font-family: var(--font-body); background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 25%, #f0f9ff 50%, #7dd3fc 75%, #e0f2fe 100%) !important; background-size: 300% 300% !important; animation: bodyOmbreMesh 16s ease-in-out infinite alternate; color: var(--text-primary); line-height: 1.7; width: 100%; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color 0.35s ease, color 0.35s ease; } [data-theme="dark"] body { background: linear-gradient(135deg, #0b1329 0%, #0369a1 30%, #0f172a 60%, #0284c7 85%, #0b1329 100%) !important; background-size: 300% 300% !important; } @keyframes bodyOmbreMesh { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } /* SLEEK ANIMATED TEXT-HUGGING UNDERLINES FOR INLINE LINKS */ a:not(.btn):not(.logo):not(.logo-img) { text-decoration: none; background-image: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-cyan) 100%); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease; } a:not(.btn):not(.logo):not(.logo-img):hover { background-size: 100% 2px; } /* Headings Hug Text Width while Centering Seamlessly */ h1, h2, h3, h4, h5, h6 { max-width: 100%; transition: color 0.25s ease !important; } .text-center, .section-header, .split-logo-section, .page-banner-hero { text-align: center !important; } .text-center h1, .text-center h2, .text-center h3, .text-center h4, .text-center p, .text-center .subtitle, .section-header h1, .section-header h2, .section-header h3, .section-header h4, .section-header p, .section-header .subtitle, .split-logo-section h1, .split-logo-section h2, .split-logo-section h3, .split-logo-section p, .split-logo-section .subtitle, .page-banner-hero h1, .page-banner-hero p, .page-banner-hero .subtitle { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Prevent full-width paragraph containers from drawing lines past text */ p { background-image: none !important; } p a, p span, p strong { background-image: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-cyan) 100%) !important; background-repeat: no-repeat !important; background-size: 0% 2px !important; background-position: 0 100% !important; transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease !important; } p a:hover, p span:hover, p strong:hover { background-size: 100% 2px !important; } /* Exclude buttons and inputs from text underline override */ .btn, .btn-primary, .btn-secondary, input, select, textarea, .vrtx-select, .logo, .logo-img, .swal2-confirm { background-image: none !important; } /* Custom Sleek Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary)); border-radius: 4px; } /* TYPOGRAPHY */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.08; font-weight: 700; letter-spacing: -0.028em; color: var(--text-primary); overflow-wrap: break-word; word-wrap: break-word; /* Stops a lone trailing word dropping to its own line under big display type. */ text-wrap: balance; } h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); margin-bottom: var(--space-md); letter-spacing: -0.035em; } h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-bottom: var(--space-sm); letter-spacing: -0.03em; } h3 { font-size: clamp(1.35rem, 2.5vw, 1.8rem); margin-bottom: var(--space-2xs); line-height: 1.18; } h4 { font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.25; } /* Sub-heading tiers carry the sans face — the serif is reserved for display sizes where its contrast actually reads. */ h4, h5, h6 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.012em; } p { text-wrap: pretty; } /* Body copy is capped near 65 characters wherever it sits in a centred block. */ .section-header p, .section-header .subtitle-text, .hero-content-layer p { max-width: 62ch; margin-inline: auto; } /* Data and figures use lining tabular numerals so columns align. */ .stat-number, .calc-big-number, .chart-bar-label-bubble, table { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; } /* VIBRANT CRISP CYAN TEXT (ZERO BACKGROUND CLIP RECTANGLE BUG) */ .gradient-text { color: #0284c7 !important; background: none !important; background-image: none !important; -webkit-text-fill-color: #0284c7 !important; display: inline; font-weight: 800; cursor: pointer; transition: transform 0.25s ease, color 0.25s ease; } /* HIGH-CONTRAST LUMINOUS CRISP SKY-BLUE TEXT FOR DARK OVERLAYS & DARK MODE */ [data-theme="dark"] .gradient-text, .hero-content-layer .gradient-text, .hero-full-bg-container .gradient-text, .title-reveal .gradient-text, .page-banner-hero .gradient-text { color: #38bdf8 !important; background: none !important; background-image: none !important; -webkit-text-fill-color: #38bdf8 !important; text-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important; font-weight: 800 !important; filter: none !important; } .gradient-text:hover { color: #00f2fe !important; -webkit-text-fill-color: #00f2fe !important; } @keyframes liveGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* LAYOUT CONTAINERS & APPLE SPACING */ .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; } .section { padding: 7rem 0; position: relative; width: 100%; } /* SEAMLESS OMBRE SECTION BACKDROPS & FEATHERED TRANSITIONS */ .section:nth-child(odd) { background: linear-gradient(180deg, rgba(224, 242, 254, 0.45) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(224, 242, 254, 0.45) 100%); } .section:nth-child(even) { background: linear-gradient(180deg, rgba(186, 230, 253, 0.35) 0%, rgba(224, 242, 254, 0.6) 50%, rgba(186, 230, 253, 0.35) 100%); box-shadow: none; } [data-theme="dark"] .section:nth-child(odd) { background: linear-gradient(180deg, #0b1329 0%, #0f172a 50%, #0b1329 100%); } [data-theme="dark"] .section:nth-child(even) { background: linear-gradient(180deg, #0f172a 0%, #0369a1 50%, #0f172a 100%); } /* EXECUTIVE CALL TO ACTION SECTION - GUARANTEED HIGH CONTRAST & VISIBILITY IN ALL MODES */ .cta-section, section.cta-section { background: linear-gradient(135deg, #0b1329 0%, #0f172a 50%, #0369a1 100%) !important; color: #ffffff !important; text-align: center; position: relative; overflow: hidden; border-top: 1.5px solid rgba(56, 189, 248, 0.3) !important; border-bottom: 1.5px solid rgba(56, 189, 248, 0.3) !important; box-shadow: 0 20px 50px rgba(11, 19, 41, 0.5) !important; } .cta-section .subtitle { background: rgba(56, 189, 248, 0.18) !important; color: #38bdf8 !important; border: 1.5px solid #0284c7 !important; display: inline-block; padding: 0.45rem 1.4rem; border-radius: 9999px; font-weight: 700; letter-spacing: 0.12em; box-shadow: 0 4px 15px rgba(2, 132, 199, 0.25); } .cta-section h2 { color: #ffffff !important; margin-bottom: 1.5rem; font-size: clamp(2rem, 3.8vw, 3rem); text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); } .cta-section h2 .gradient-text { background: linear-gradient(135deg, #38bdf8 0%, #00f2fe 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; display: inline; } .cta-section p { color: #f1f5f9 !important; font-size: 1.15rem; max-width: 720px; margin: 0 auto 2.5rem; line-height: 1.8; opacity: 1 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .cta-section .btn-primary { background: #0284c7 !important; color: #ffffff !important; border-color: #0284c7 !important; box-shadow: 0 6px 22px rgba(2, 132, 199, 0.45) !important; } .cta-section .btn-primary:hover { background: #0369a1 !important; border-color: #0369a1 !important; transform: translateY(-2px); } .cta-section .btn-secondary { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important; } .cta-section .btn-secondary:hover { background: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; border-color: #ffffff !important; transform: translateY(-2px); } .section-header { text-align: center; max-width: 840px; margin: 0 auto 4.5rem; } .subtitle { color: #0284c7 !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.85rem; margin-bottom: 1.2rem; display: inline-block; padding: 0.55rem 1.4rem; background: rgba(2, 132, 199, 0.1) !important; background-image: none !important; border: 1.5px solid #0284c7 !important; border-radius: var(--radius-full); font-family: var(--font-body); transition: transform 0.3s ease, border-color 0.3s ease; cursor: pointer; max-width: 100%; white-space: normal; text-align: center; box-shadow: 0 4px 16px rgba(2, 132, 199, 0.15); } [data-theme="dark"] .subtitle, .hero-content-layer .subtitle, .hero-full-bg-container .subtitle, .page-banner-hero .subtitle { color: #38bdf8 !important; background: rgba(15, 23, 42, 0.88) !important; border: 1.5px solid #38bdf8 !important; box-shadow: 0 0 20px rgba(56, 189, 248, 0.35) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important; } .subtitle:hover { transform: translateY(-2px) scale(1.03); border-color: #38bdf8 !important; color: #38bdf8 !important; } /* RESPONSIVE GRID HELPERS */ .grid-2-col { display: grid; grid-template-columns: 1fr; gap: 2rem; } /* APPLE-STYLE PILL BUTTONS WITH LEFT-TO-RIGHT OMBRE HOVER */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.05rem 2.4rem; font-size: 1rem; font-weight: 700; border-radius: var(--radius-full); border: 1.5px solid transparent; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; font-family: var(--font-body); min-height: 52px; text-align: center; } .btn-primary { background: linear-gradient(90deg, #0284c7 0%, #0369a1 40%, #06b6d4 70%, #0284c7 100%) !important; background-size: 250% 100% !important; background-position: 0% 0% !important; color: #ffffff !important; box-shadow: 0 6px 22px var(--accent-glow); transition: background-position 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease !important; } .btn-primary:hover { background-position: 100% 0% !important; transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 35px var(--accent-glow); } .btn-secondary { background: linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0%, rgba(2, 132, 199, 0.35) 50%, rgba(255, 255, 255, 0.5) 100%) !important; background-size: 250% 100% !important; background-position: 0% 0% !important; color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(14px); transition: background-position 0.6s ease, transform 0.3s ease !important; } .btn-secondary:hover { background-position: 100% 0% !important; color: #0284c7 !important; border-color: #ffffff !important; transform: translateY(-3px) scale(1.02); } /* TOP UTILITY BAR */ .top-utility-bar { background: #0f172a; color: #f8fafc; padding: 0.85rem 0; font-size: 0.9rem; font-family: var(--font-body); position: relative; z-index: 1001; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .top-utility-bar a { color: #f8fafc; text-decoration: none; font-weight: 600; transition: color 0.2s ease; } .top-utility-bar a:hover { color: #38bdf8; } /* NAVIGATION HEADER */ header { position: sticky; top: 0; z-index: 1000; width: 100%; } .navbar { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 3.5rem; background: var(--bg-nav); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(2, 132, 199, 0.15) !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; box-shadow: var(--shadow-sm); } .navbar.scrolled { padding: 0.85rem 3.5rem; background: var(--bg-nav); box-shadow: var(--shadow-md); } .navbar.nav-hidden { transform: translateY(-100%); } .logo { display: inline-flex; align-items: center; text-decoration: none; } .logo-img { height: 72px; width: auto; max-width: 300px; object-fit: contain; border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease, height 0.25s ease; animation: logoPulseFloat 4s ease-in-out infinite alternate; } .logo-img:hover { transform: scale(1.06) translateY(-2px); filter: drop-shadow(0 8px 25px rgba(56, 189, 248, 0.45)); } @keyframes logoPulseFloat { 0% { transform: translateY(0) scale(1); filter: drop-shadow(0 4px 15px rgba(2, 132, 199, 0.2)); } 100% { transform: translateY(-3px) scale(1.02); filter: drop-shadow(0 8px 22px rgba(56, 189, 248, 0.35)); } } .nav-links { display: none; } .nav-links.active { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); flex-direction: column; padding: 1.8rem; gap: 1.4rem; border-bottom: 1px solid rgba(2, 132, 199, 0.15); box-shadow: var(--shadow-lg); z-index: 999; } .nav-links a { text-decoration: none; color: var(--text-secondary); font-weight: 600; font-size: 1.05rem; transition: color 0.2s ease; } .nav-links a.active, .nav-links a:hover { color: var(--accent-primary); } .nav-actions { display: flex; align-items: center; gap: 1.5rem; } .vrtx-search-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-tertiary); border: 1.5px solid var(--accent-primary); color: var(--text-primary); display: grid; place-items: center; cursor: pointer; font-size: 1rem; transition: var(--transition-fast); } .vrtx-search-btn:hover { background: var(--accent-primary); color: #fff; transform: scale(1.06); } .theme-toggle { background: var(--bg-tertiary); border: 1.5px solid var(--accent-primary) !important; color: var(--accent-primary); padding: 0.4rem; border-radius: var(--radius-full); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 1.2rem; transition: var(--transition-fast); box-shadow: 0 2px 10px var(--accent-glow); } .theme-toggle:hover { background: var(--accent-primary); color: #ffffff; transform: rotate(20deg) scale(1.08); } .mobile-toggle { display: block; background: none; border: none; font-size: 1.6rem; color: var(--text-primary); cursor: pointer; } /* HERO BACKGROUND SLIDER & FULL OVERLAY */ .hero-full-bg-container { position: relative; width: 100%; min-height: 86vh; display: flex; align-items: center; overflow: hidden; background: #0f172a; } .hero-bg-image-slider { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .hero-bg-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); filter: brightness(0.65) contrast(1.08); } .hero-bg-slide.active { opacity: 1; transform: scale(1); } .hero-overlay-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(2, 132, 199, 0.28) 45%, rgba(15, 23, 42, 0.85) 80%, rgba(224, 242, 254, 0.85) 94%, #e0f2fe 100%); background-size: 100% 100%; z-index: 2; pointer-events: none; } [data-theme="dark"] .hero-overlay-gradient { background: linear-gradient(180deg, rgba(11, 19, 41, 0.85) 0%, rgba(3, 105, 161, 0.3) 45%, rgba(11, 19, 41, 0.9) 80%, #0b1329 100%); } @keyframes liquidHeroShader { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } .hero-content-layer { position: relative; z-index: 3; color: #ffffff !important; padding: 6.5rem 0 5.5rem; } .hero-content-layer h1, .hero-content-layer h2, .hero-content-layer p { color: #ffffff !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.75); } .hero-content-layer p { color: #f1f5f9 !important; } /* BASS CONSTRUCTION LIVE MORPHING FLUID CONTAINER */ .vrtx-blob-frame { position: relative; width: 100%; max-width: 520px; height: 420px; margin: 0 auto; overflow: hidden; box-shadow: 0 25px 55px rgba(0, 0, 0, 0.45); border: 3px solid #38bdf8 !important; will-change: transform, border-radius; transition: border-radius 0.3s ease; } .vrtx-blob-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; } .vrtx-blob-slide.active { opacity: 1; } .vrtx-floating-badge { position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 10; background: var(--bg-card); backdrop-filter: blur(20px); border: 2px solid var(--border-accent) !important; padding: 1rem 1.4rem; border-radius: var(--radius-md); display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-md); } .page-banner-hero { position: relative; width: 100%; padding: 5.5rem 0; overflow: hidden; background: #0f172a; color: #ffffff !important; text-align: center; border-bottom: 1px solid rgba(56, 189, 248, 0.2); } .page-banner-hero .hero-content-layer { padding: 0; } /* GUARANTEED 100% INSTANT VISIBILITY */ .hero-content-layer, .hero-content-layer h1, .hero-content-layer p, .hero-content-layer .subtitle, .hero-content-layer .btn, .vrtx-blob-frame { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* ENLARGED SPLIT LOGO SCROLL ENTRANCE SHOWCASE WITH RICH OMBRE SHADER */ .split-logo-section { position: relative; padding: 9.5rem 0; background: var(--bg-card) !important; background-size: 300% 100% !important; background-position: 0% 0% !important; transition: background-position 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important; overflow: hidden; text-align: center; border-top: 1px solid rgba(2, 132, 199, 0.15) !important; border-bottom: 1px solid rgba(2, 132, 199, 0.15) !important; box-shadow: inset 0 0 100px rgba(2, 132, 199, 0.2); } .split-logo-section:hover { background-position: 100% 0% !important; } [data-theme="dark"] .split-logo-section { background: linear-gradient(90deg, #0b1329 0%, #0369a1 30%, #0284c7 60%, #0f172a 80%, #0b1329 100%) !important; background-size: 300% 100% !important; } .split-logo-wrapper { position: relative; width: min(680px, 94vw); height: 230px; margin: 4rem auto; display: flex; justify-content: center; align-items: center; perspective: 1200px; } .split-logo-half { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.35s ease, filter 1.35s ease; will-change: transform, opacity, filter; } .split-logo-left { left: 0; clip-path: inset(0 50% 0 0); transform: translateX(-300px) rotateY(-20deg) scale(0.72); opacity: 0; filter: blur(12px); } .split-logo-right { left: 0; clip-path: inset(0 0 0 50%); transform: translateX(300px) rotateY(20deg) scale(0.72); opacity: 0; filter: blur(12px); } .split-logo-wrapper.is-merged .split-logo-left { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; filter: blur(0); } .split-logo-wrapper.is-merged .split-logo-right { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; filter: blur(0); } .split-logo-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(2, 132, 199, 0.35)); } [data-theme="dark"] .split-logo-img { filter: drop-shadow(0 10px 30px rgba(56, 189, 248, 0.45)); } .split-logo-wrapper::after { content: ''; position: absolute; inset: -30px; border-radius: var(--radius-full); background: radial-gradient(circle, var(--accent-glow) 0%, rgba(2, 132, 199, 0) 70%); opacity: 0; transition: opacity 1s ease 1s; pointer-events: none; } .split-logo-wrapper.is-merged::after { opacity: 1; } /* BASS REVEALS & SCROLL OBSERVER */ .bass-reveal-left, .bass-reveal-right, .title-reveal, .reveal-on-scroll, .reveal { opacity: 1; transform: translateY(0); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); } .bass-img-card { position: relative; border-radius: var(--radius-lg) !important; overflow: hidden !important; box-shadow: var(--shadow-md); border: 2.5px solid var(--border-accent) !important; background: var(--bg-card); width: 100%; height: 300px !important; transition: var(--transition-smooth); } .bass-img-card:hover { transform: translateY(-6px) scale(1.01); border-color: var(--accent-primary) !important; box-shadow: var(--shadow-lg); } .bass-img-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit !important; display: block !important; } /* STATS GRID WITH LEFT-TO-RIGHT ANIMATED OMBRE HOVER */ .stats-grid { display: grid; grid-template-columns: 1fr; gap: 1.8rem; margin-top: 3rem; padding: 2.8rem; background: var(--bg-card) !important; background-size: 300% 100% !important; background-position: 0% 0% !important; border: 2.5px solid #0284c7 !important; border-radius: var(--radius-lg); box-shadow: 0 16px 45px rgba(2, 132, 199, 0.25) !important; transition: background-position 0.8s ease, transform 0.35s ease !important; } .stats-grid:hover { background-position: 100% 0% !important; transform: translateY(-4px); } [data-theme="dark"] .stats-grid { background: rgba(30, 41, 59, 0.94) !important; border-color: #38bdf8 !important; } .stat-item { text-align: center; } .stat-number { font-size: 2.5rem; font-weight: 800; font-family: var(--font-heading); color: var(--accent-primary); display: block; line-height: 1; } .stat-label { font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; margin-top: 0.4rem; } /* ALL CARDS & UI CONTAINERS WITH LEFT-TO-RIGHT ANIMATED OMBRE GRADIENT HOVER SHADER */ .grid-3 { display: grid; grid-template-columns: 1fr; gap: 2.25rem; } .card, .bento-card, .service-card, .feature-card, .testi-card, .pricing-card { background: var(--bg-card) !important; background-size: 300% 100% !important; background-position: 0% 0% !important; border: 2.5px solid #0284c7 !important; border-radius: var(--radius-lg) !important; padding: 2.5rem !important; box-shadow: 0 10px 30px rgba(2, 132, 199, 0.15) !important; transition: background-position 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important; color: var(--text-primary) !important; position: relative; overflow: hidden; width: 100%; } [data-theme="dark"] .card, [data-theme="dark"] .bento-card, [data-theme="dark"] .service-card, [data-theme="dark"] .feature-card, [data-theme="dark"] .testi-card, [data-theme="dark"] .pricing-card { background: linear-gradient(90deg, #1e293b 0%, #0369a1 30%, #0284c7 60%, #0f172a 80%, #1e293b 100%) !important; background-size: 300% 100% !important; background-position: 0% 0% !important; border-color: #38bdf8 !important; } .card:hover, .bento-card:hover, .service-card:hover, .pricing-card:hover { background-position: 100% 0% !important; transform: translateY(-8px) scale(1.02) !important; border-color: #0369a1 !important; box-shadow: 0 22px 60px rgba(2, 132, 199, 0.32) !important; } [data-theme="dark"] .card:hover, [data-theme="dark"] .bento-card:hover, [data-theme="dark"] .service-card:hover, [data-theme="dark"] .pricing-card:hover { background-position: 100% 0% !important; border-color: #38bdf8 !important; } .card-icon, .bento-icon { width: 56px !important; height: 56px !important; border-radius: var(--radius-md) !important; background: linear-gradient(135deg, #ffffff 0%, #bae6fd 100%) !important; border: 2px solid #0284c7 !important; color: #0284c7 !important; display: grid !important; place-items: center !important; font-size: 1.4rem !important; margin-bottom: 1.4rem !important; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important; } [data-theme="dark"] .card-icon, [data-theme="dark"] .bento-icon { background: linear-gradient(135deg, #1e293b 0%, #0369a1 100%) !important; color: #38bdf8 !important; border-color: #38bdf8 !important; } /* PRACTICE ROI CALCULATOR WITH LEFT-TO-RIGHT OMBRE HOVER */ .calc-grid { display: grid; grid-template-columns: 1fr !important; gap: 3rem !important; } .vrtx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 6px; background: #bae6fd !important; outline: none; border: 2px solid #0284c7 !important; padding: 0 !important; margin-top: 0.8rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important; } .vrtx-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); border: 2px solid #ffffff; box-shadow: 0 4px 18px rgba(2, 132, 199, 0.4); cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; } .vrtx-range::-webkit-slider-thumb:hover { transform: scale(1.15); filter: brightness(1.15); } .calc-output-box { background: var(--bg-card) !important; background-size: 300% 100% !important; background-position: 0% 0% !important; border: 3px solid #0284c7 !important; border-radius: var(--radius-lg) !important; padding: 2.8rem 2.2rem !important; text-align: center; box-shadow: 0 22px 60px rgba(2, 132, 199, 0.3) !important; position: relative; overflow: hidden; transition: background-position 0.8s ease, transform 0.35s ease !important; } .calc-output-box:hover { background-position: 100% 0% !important; transform: translateY(-4px); } [data-theme="dark"] .calc-output-box { background: rgba(30, 41, 59, 0.94) !important; border-color: #38bdf8 !important; } .calc-big-number { font-size: clamp(2.4rem, 6vw, 3.8rem) !important; font-family: var(--font-heading) !important; color: var(--accent-primary) !important; font-weight: 800 !important; display: block; margin: 1rem 0; text-shadow: 0 4px 20px var(--accent-glow); } /* FAQ ACCORDION WITH LEFT-TO-RIGHT OMBRE HOVER */ .faq-wrapper { display: grid; gap: 1.5rem; max-width: 920px; margin: 0 auto; } .faq-item { background: var(--bg-card) !important; border: 1.5px solid var(--border-accent) !important; border-radius: var(--radius-md) !important; padding: 0 !important; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; box-shadow: var(--shadow-sm) !important; } [data-theme="dark"] .faq-item { background: rgba(30, 41, 59, 0.95) !important; border-color: rgba(56, 189, 248, 0.4) !important; } .faq-item:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important; border-color: var(--accent-primary) !important; } .faq-item.active { transform: translateY(-3px) !important; border-color: var(--accent-primary) !important; box-shadow: var(--shadow-md) !important; } .faq-question { width: 100%; padding: 1.6rem 2rem; background: none; border: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; text-align: left; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--text-primary); cursor: pointer; transition: color 0.25s ease; } .faq-question:hover { color: var(--accent-primary); } .faq-icon { width: 34px; height: 34px; border-radius: 50%; background: #bae6fd; border: 2px solid #0284c7; color: #0284c7; display: grid; place-items: center; font-size: 0.95rem; flex-shrink: 0; transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease; } .faq-item.active .faq-icon { transform: rotate(45deg); background: #0284c7; color: #ffffff; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), padding 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease; padding: 0 2rem; opacity: 0; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; } .faq-item.active .faq-answer { max-height: 300px; padding: 0 2rem 1.8rem 2rem; opacity: 1; } /* INPUT CONTROLS FULL LIGHT & DARK THEME ADAPTATION */ input, select, textarea, .vrtx-select { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 2px solid #0284c7 !important; border-radius: var(--radius-md) !important; padding: 0.95rem 1.25rem !important; font-family: var(--font-body) !important; font-size: 0.98rem !important; font-weight: 600 !important; outline: none !important; transition: border-color 0.25s ease, box-shadow 0.25s ease !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .vrtx-select { background: rgba(30, 41, 59, 0.94) !important; border-color: #38bdf8 !important; } input::placeholder, textarea::placeholder { color: var(--text-muted) !important; } input:focus, select:focus, textarea:focus, .vrtx-select:focus { border-color: var(--accent-primary) !important; box-shadow: 0 0 16px var(--accent-glow) !important; } select option { background: var(--bg-card) !important; color: var(--text-primary) !important; } /* DASHBOARD MONTH BUBBLE PILLS WITH LEFT-TO-RIGHT OMBRE HOVER */ .chart-bar-label-bubble { padding: 0.35rem 0.95rem; background: linear-gradient(90deg, #ffffff 0%, #bae6fd 50%, #0284c7 80%, #ffffff 100%); background-size: 250% 100% !important; background-position: 0% 0% !important; border: 2px solid #0284c7; border-radius: var(--radius-full); font-size: 0.84rem; font-weight: 800; color: #0284c7; display: inline-block; margin-top: 0.5rem; box-shadow: 0 3px 10px rgba(2, 132, 199, 0.2); transition: background-position 0.5s ease, transform 0.25s ease, color 0.25s ease; cursor: pointer; } .chart-bar-label-bubble:hover { background-position: 100% 0% !important; transform: scale(1.15); color: #ffffff; } /* NEWSLETTER CARD SECTION SYNCHRONIZATION WITH LEFT-TO-RIGHT OMBRE HOVER */ .newsletter-card { background: var(--bg-card) !important; background-size: 300% 100% !important; background-position: 0% 0% !important; border: 2.5px solid #0284c7 !important; border-radius: var(--radius-lg) !important; padding: 3.5rem 2.5rem !important; box-shadow: 0 18px 50px rgba(2, 132, 199, 0.2) !important; text-align: center; max-width: 840px; margin: 0 auto; transition: background-position 0.8s ease, transform 0.35s ease !important; } .newsletter-card:hover { background-position: 100% 0% !important; } [data-theme="dark"] .newsletter-card { background: rgba(30, 41, 59, 0.94) !important; border-color: #38bdf8 !important; } /* DASHBOARD WITH LEFT-TO-RIGHT OMBRE HOVER */ .dash-preview-card { background: var(--bg-card) !important; background-size: 300% 100% !important; background-position: 0% 0% !important; border: 2.5px solid #0284c7 !important; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 50px rgba(2, 132, 199, 0.2) !important; width: 100%; transition: background-position 0.8s ease !important; } .dash-preview-card:hover { background-position: 100% 0% !important; } [data-theme="dark"] .dash-preview-card { background: rgba(30, 41, 59, 0.94) !important; border-color: #38bdf8 !important; } .dash-header-nav { display: flex; background: linear-gradient(135deg, #bae6fd 0%, #e0f2fe 100%); border-bottom: 2.5px solid #0284c7 !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } [data-theme="dark"] .dash-header-nav { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-color: #38bdf8 !important; } .dash-tab-btn { padding: 1.1rem 1.8rem; background: none; border: none; color: var(--text-secondary); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; transition: var(--transition-fast); } .dash-tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); background: var(--bg-card); } .dash-content-body { padding: 2.5rem; min-height: 360px; } .dash-pane { display: none; } .dash-pane.active { display: block; } .dash-pane > div { grid-template-columns: 1fr !important; gap: 2rem !important; } /* Grid items default to min-width:auto, which sizes them to their content's unwrapped width — the paragraph and stat pills were blowing out the 1fr track instead of wrapping, then getting clipped mid-word by the card's overflow:hidden. */ .dash-pane > div > div { min-width: 0; } .chart-bar-container { display: flex; align-items: flex-end; gap: 1rem; height: 200px; padding-top: 1.8rem; } .chart-bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .chart-bar-fill { width: 100%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); } /* The 5-column trend chart's label bubbles are wide enough at full size that they don't fit their share of a narrow flex column — .chart-bar-col has no min-width:0 by default, so the row pushed past the viewport instead of shrinking. Scale the bubbles down to fit. */ @media (max-width: 480px) { .chart-bar-container { gap: 0.4rem; } .chart-bar-label-bubble { padding: 0.2rem 0.45rem; font-size: 0.68rem; } } /* contact.html's form+info layout is a one-off inline grid (1.1fr 0.9fr) with no responsive rule, so it stayed two-up on mobile and — combined with the default min-width:auto on grid items — pushed the phone/email links off the right edge of the viewport. */ @media (max-width: 767px) { .contact-form-grid { grid-template-columns: 1fr !important; } } /* FOOTER */ footer, .main-footer { background: #0f172a !important; border-top: 2.5px solid rgba(255, 255, 255, 0.18) !important; padding: 5rem 0 2.5rem !important; color: #cbd5e1 !important; width: 100%; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3.5rem; } /* MODAL DIALOG & SWEETALERT2 POPUP THEME SYNCHRONIZATION WITH OMBRE BACKDROP */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(16px); z-index: 2000; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: var(--transition-fast); } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-container { background: linear-gradient(90deg, #ffffff 0%, #e0f2fe 40%, #bae6fd 70%, #ffffff 100%) !important; background-size: 250% 100% !important; background-position: 0% 0% !important; border: 3px solid #0284c7 !important; border-radius: var(--radius-lg) !important; padding: 2.5rem !important; width: min(620px, calc(100% - 32px)); position: relative; box-shadow: 0 25px 65px rgba(2, 132, 199, 0.35) !important; color: var(--text-primary) !important; max-height: 90vh; overflow-y: auto; } [data-theme="dark"] .modal-container { background: linear-gradient(90deg, #1e293b 0%, #0369a1 40%, #0b1329 70%, #1e293b 100%) !important; border-color: #38bdf8 !important; } .modal-close { position: absolute; top: 1.2rem; right: 1.2rem; background: none; border: none; font-size: 1.5rem; color: var(--text-secondary); cursor: pointer; } /* SWEETALERT2 EXECUTIVE STYLING MATCHING THEME WITH OMBRE BACKDROP */ .swal2-popup { background: linear-gradient(90deg, #ffffff 0%, #e0f2fe 40%, #bae6fd 70%, #ffffff 100%) !important; background-size: 250% 100% !important; background-position: 0% 0% !important; color: var(--text-primary) !important; border: 3px solid #0284c7 !important; border-radius: var(--radius-lg) !important; font-family: var(--font-body) !important; box-shadow: 0 25px 65px rgba(2, 132, 199, 0.35) !important; } [data-theme="dark"] .swal2-popup { background: linear-gradient(90deg, #1e293b 0%, #0369a1 40%, #0b1329 70%, #1e293b 100%) !important; border-color: #38bdf8 !important; } .swal2-title { color: var(--text-primary) !important; font-family: var(--font-heading) !important; font-size: 1.6rem !important; } .swal2-content, .swal2-html-container { color: var(--text-secondary) !important; font-size: 1rem !important; } .swal2-confirm { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important; color: #ffffff !important; border-radius: var(--radius-full) !important; padding: 0.8rem 2rem !important; font-weight: 700 !important; box-shadow: 0 4px 18px var(--accent-glow) !important; } /* ========================================================================== 3D FLIP CARD ANIMATION SYSTEM (HOVER & TOUCH SUPPORT) ========================================================================== */ .flip-card { perspective: 1600px; cursor: pointer; height: 100%; min-height: 330px; } /* Both faces occupy the same grid cell, so the card sizes itself to whichever face is taller. The previous fixed height clipped every card whose copy ran past 330px — which was all of them. */ .flip-card-inner { position: relative; display: grid; width: 100%; height: 100%; text-align: left; transition: transform 0.75s var(--ease-spring); transform-style: preserve-3d; } .flip-card:hover .flip-card-inner, .flip-card:focus-within .flip-card-inner, .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { grid-area: 1 / 1; width: 100%; min-height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; } /* Pins the flip hint to the bottom of every face so the hints form one clean horizontal line across a row regardless of how long the copy above is. */ .flip-card-front > .flip-hint, .flip-card-back > .flip-hint { margin-top: auto; } .flip-card-front { background: var(--bg-card) !important; border: 1.5px solid var(--border-accent) !important; padding: 2.2rem !important; box-shadow: var(--shadow-sm) !important; z-index: 2; transform: rotateY(0deg); } .flip-card-back { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; color: #ffffff !important; border: 1.5px solid var(--accent-cyan) !important; padding: 2.2rem !important; transform: rotateY(180deg); box-shadow: 0 16px 45px rgba(2, 132, 199, 0.3) !important; z-index: 1; } [data-theme="dark"] .flip-card-front { background: rgba(30, 41, 59, 0.95) !important; border-color: rgba(56, 189, 248, 0.35) !important; } [data-theme="dark"] .flip-card-back { background: linear-gradient(135deg, #0f172a 0%, #0369a1 100%) !important; border-color: #38bdf8 !important; } .flip-hint { font-size: 0.8rem; color: var(--accent-primary); font-weight: 700; margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: transform 0.3s ease; } .flip-card:hover .flip-hint { transform: translateX(4px); } /* ========================================================================== BREAKPOINTS: TABLET (min-width: 768px) ========================================================================== */ @media (min-width: 768px) { .grid-2-col { grid-template-columns: 1fr 1fr; gap: 3rem; } .logo-img { height: 78px; max-width: 320px; } .navbar { padding: 1.1rem 2.5rem; } .navbar.scrolled { padding: 0.75rem 2.5rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 2.5rem; margin-top: 3.5rem; } .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 2.25rem; } .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; } .section { padding: 7.5rem 0; } .card, .bento-card, .service-card { padding: 2.5rem !important; } .bass-img-card { height: 360px !important; } .calc-grid { grid-template-columns: 1fr 1fr !important; gap: 3.5rem !important; } .dash-pane > div { grid-template-columns: 1fr 1fr !important; gap: 2.5rem !important; } } /* ========================================================================== BREAKPOINTS: DESKTOP (min-width: 1024px) ========================================================================== */ @media (min-width: 1024px) { .logo-img { height: 86px; max-width: 380px; } .nav-links { display: flex; gap: 2.25rem; } .mobile-toggle { display: none; } .navbar { padding: 1.25rem 3.5rem; } .stats-grid { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3.5rem; } .section { padding: 8.5rem 0; } .bass-img-card { height: 420px !important; } } /* ========================================================================== EXECUTIVE CINEMATIC OPENING CURTAIN ANIMATION SYSTEM ========================================================================== */ .executive-opening-curtain { position: fixed; inset: 0; z-index: 99999; display: flex; justify-content: center; align-items: center; overflow: hidden; pointer-events: none; } .executive-curtain-panel { position: absolute; left: 0; right: 0; width: 100%; height: 50.5%; background: linear-gradient(135deg, #0b1329 0%, #0f172a 60%, #0369a1 100%); box-shadow: inset 0 0 100px rgba(56, 189, 248, 0.25); transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1); will-change: transform; } .executive-curtain-top { top: 0; border-bottom: 2px solid rgba(56, 189, 248, 0.6); } .executive-curtain-bottom { bottom: 0; border-top: 2px solid rgba(56, 189, 248, 0.6); } .executive-opening-curtain.is-opening .executive-curtain-top { transform: translateY(-100%); } .executive-opening-curtain.is-opening .executive-curtain-bottom { transform: translateY(100%); } .executive-emblem-badge { position: relative; z-index: 100000; text-align: center; padding: 2.2rem 3rem; background: rgba(15, 23, 42, 0.96); border: 2px solid #38bdf8; border-radius: var(--radius-xl); box-shadow: 0 0 50px rgba(56, 189, 248, 0.45), inset 0 0 30px rgba(56, 189, 248, 0.2); animation: emblemPulseIntro 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s; } .executive-opening-curtain.is-opening .executive-emblem-badge { opacity: 0; transform: scale(1.15); } @keyframes emblemPulseIntro { 0% { opacity: 0; transform: scale(0.75) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* PREMIUM 3D HERO CONTENT ENTRANCE STAGING */ .premium-hero-intro .bass-reveal-left, .premium-hero-intro .subtitle, .premium-hero-intro h2, .premium-hero-intro .card, .premium-hero-intro .bass-reveal-right { opacity: 0; transform: translateY(35px) scale(0.97); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .premium-hero-intro.is-loaded .bass-reveal-left, .premium-hero-intro.is-loaded .subtitle { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.65s; } .premium-hero-intro.is-loaded h2 { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.8s; } .premium-hero-intro.is-loaded .card { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.95s; } .premium-hero-intro.is-loaded .bass-reveal-right { opacity: 1; transform: translateY(0) scale(1); transition-delay: 1.1s; } /* The nudge this paired with has been removed — the badge now centres normally above the banner heading. */ /* ========================================================================== REDESIGN LAYER Loaded last so it settles the specificity war with the !important rules above. Palette is untouched — every colour here is drawn from the existing ombre tokens. This layer changes structure, depth, rhythm and motion only. ========================================================================== */ /* -------------------------------------------------------------------------- 1. ACCESSIBILITY FOUNDATION -------------------------------------------------------------------------- */ /* A visible focus ring was missing entirely — keyboard users had no position indicator anywhere on the site. */ :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: var(--radius-xs); } :focus:not(:focus-visible) { outline: none; } .skip-to-content { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: var(--z-modal); padding: 0.85rem 1.6rem; background: var(--accent-primary); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; transition: transform var(--transition-fast); } .skip-to-content:focus-visible { transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 2. AMBIENT TEXTURE Fixed and pointer-events:none, so it never repaints with scrolling content. -------------------------------------------------------------------------- */ body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-theme="dark"] body::after { mix-blend-mode: screen; opacity: 0.05; } /* -------------------------------------------------------------------------- 3. FLOATING ISLAND NAVIGATION Detached from the viewport edge instead of glued flat across the top. -------------------------------------------------------------------------- */ header { position: sticky; top: 0; z-index: var(--z-nav); background: transparent !important; border: none !important; box-shadow: none !important; padding: 0.9rem clamp(0.75rem, 3vw, 2rem) !important; transition: padding 0.5s var(--ease-out-soft); } .navbar { max-width: 1340px; margin: 0 auto !important; border-radius: var(--radius-full) !important; background: color-mix(in srgb, var(--bg-nav) 82%, transparent) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(2, 132, 199, 0.14) !important; box-shadow: var(--shadow-md), var(--inner-highlight) !important; padding: 0.6rem 0.7rem 0.6rem 1.4rem !important; transition: transform 0.6s var(--ease-out-soft), box-shadow 0.5s var(--ease-out-soft), background-color 0.5s var(--ease-out-soft); } [data-theme="dark"] .navbar { border-color: rgba(56, 189, 248, 0.2) !important; } .navbar.scrolled { padding: 0.5rem 0.6rem 0.5rem 1.3rem !important; box-shadow: var(--shadow-float), var(--inner-highlight) !important; } /* Only the pill slides away on scroll-down; the header keeps its sticky slot. */ .navbar.nav-hidden { transform: translateY(calc(-100% - 1.5rem)); } .logo-img { height: 54px !important; max-width: 230px !important; animation: none !important; /* the constant float pulse read as a page defect */ transition: transform 0.5s var(--ease-spring); } .logo:hover .logo-img { transform: scale(1.03); } /* The bullet separators between links were a dated touch. */ .nav-links { gap: 0.15rem !important; } .nav-links li::marker, .nav-links li::before { content: none !important; } .nav-links { list-style: none !important; } .nav-links a { position: relative; display: inline-block; white-space: nowrap; padding: 0.55rem 0.65rem !important; border-radius: var(--radius-full); font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: -0.008em; color: var(--text-secondary) !important; transition: color 0.35s var(--ease-out-soft), background-color 0.35s var(--ease-out-soft); } .nav-links a::after { display: none !important; } /* kill the inherited underline sweep */ .nav-links a:hover { background: rgba(2, 132, 199, 0.08); color: var(--accent-primary) !important; } .nav-links a.active { background: rgba(2, 132, 199, 0.12); color: var(--accent-primary) !important; } [data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a.active { background: rgba(56, 189, 248, 0.16); } .nav-actions { gap: 0.5rem !important; } .vrtx-search-btn, .theme-toggle { width: 42px !important; height: 42px !important; border-radius: var(--radius-full) !important; background: rgba(2, 132, 199, 0.07) !important; border: 1px solid rgba(2, 132, 199, 0.12) !important; color: var(--accent-primary) !important; display: grid !important; place-items: center !important; font-size: 0.95rem !important; transition: transform 0.4s var(--ease-spring), background-color 0.35s var(--ease-out-soft); } .vrtx-search-btn:hover, .theme-toggle:hover { background: rgba(2, 132, 199, 0.15) !important; transform: scale(1.06) !important; color: var(--accent-primary) !important; } .vrtx-search-btn:active, .theme-toggle:active { transform: scale(0.94) !important; } /* -------------------------------------------------------------------------- 4. BUTTONS — nested trailing icon, spring press, real states -------------------------------------------------------------------------- */ .btn { position: relative; display: inline-flex !important; align-items: center; gap: 0.6rem; border-radius: var(--radius-full) !important; font-family: var(--font-body) !important; font-weight: 700 !important; letter-spacing: -0.01em; padding: 0.95rem 0.95rem 0.95rem 1.75rem !important; text-decoration: none !important; isolation: isolate; transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-out-soft), background-color 0.35s var(--ease-out-soft); } .btn:has(> i:last-child) { padding-right: 0.5rem !important; } .btn:not(:has(> i:last-child)) { padding-right: 1.75rem !important; } /* The trailing glyph sits inside its own circle rather than floating naked beside the label. */ .btn > i:last-child { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.18); font-size: 0.8rem; transition: transform 0.45s var(--ease-spring), background-color 0.35s var(--ease-out-soft); } .btn-secondary > i:last-child { background: rgba(2, 132, 199, 0.1); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg) !important; } .btn:hover > i:last-child { transform: translate(3px, -1px) scale(1.06); background: rgba(255, 255, 255, 0.3); } .btn-secondary:hover > i:last-child { background: rgba(2, 132, 199, 0.2); } .btn:active { transform: translateY(0) scale(0.975); } .btn-primary { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; color: #fff !important; border: none !important; box-shadow: var(--shadow-md) !important; } .btn-secondary { background: rgba(255, 255, 255, 0.75) !important; color: var(--accent-secondary) !important; border: 1px solid rgba(2, 132, 199, 0.22) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } [data-theme="dark"] .btn-secondary { background: rgba(30, 41, 59, 0.7) !important; color: #38bdf8 !important; border-color: rgba(56, 189, 248, 0.3) !important; } /* -------------------------------------------------------------------------- 5. CARD ARCHITECTURE — nested bezel instead of a flat 2.5px outline .flip-card is the outer shell; the faces inside are the inner core. -------------------------------------------------------------------------- */ .flip-card { padding: var(--bezel-pad); border-radius: var(--radius-xl); background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(2, 132, 199, 0.1); box-shadow: var(--shadow-sm); transition: transform 0.55s var(--ease-out-soft), box-shadow 0.55s var(--ease-out-soft); } .flip-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); } [data-theme="dark"] .flip-card { background: rgba(30, 41, 59, 0.4); border-color: rgba(56, 189, 248, 0.14); } .flip-card-front, .flip-card-back { border-radius: var(--radius-core) !important; border: none !important; padding: 2rem 1.9rem !important; gap: 0.6rem; } .flip-card-front { background: rgba(255, 255, 255, 0.96) !important; box-shadow: var(--inner-highlight) !important; } [data-theme="dark"] .flip-card-front { background: rgba(15, 23, 42, 0.96) !important; } /* Standalone (non-flipping) cards lose the heavy saturated outline too. */ .card, .bento-card, .service-card, .feature-card, .testi-card, .pricing-card { border: 1px solid rgba(2, 132, 199, 0.12) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm), var(--inner-highlight) !important; background: rgba(255, 255, 255, 0.94) !important; transition: transform 0.5s var(--ease-out-soft), box-shadow 0.5s var(--ease-out-soft), border-color 0.4s var(--ease-out-soft) !important; } [data-theme="dark"] .card, [data-theme="dark"] .bento-card, [data-theme="dark"] .service-card, [data-theme="dark"] .feature-card, [data-theme="dark"] .testi-card, [data-theme="dark"] .pricing-card { background: rgba(30, 41, 59, 0.92) !important; border-color: rgba(56, 189, 248, 0.16) !important; } /* The flip faces are already inside a bezel — don't double up the treatment. */ .flip-card .card, .flip-card .service-card, .flip-card .bento-card { border: none !important; box-shadow: none !important; transform: none !important; } .card:hover, .bento-card:hover, .service-card:hover, .pricing-card:hover { transform: translateY(-6px) !important; border-color: rgba(2, 132, 199, 0.28) !important; box-shadow: var(--shadow-float), var(--inner-highlight) !important; } .flip-card .card:hover, .flip-card .service-card:hover, .flip-card .bento-card:hover { transform: none !important; } /* Icon tiles: softer, concentric with the card corner, no hard 2px outline. */ .card-icon, .bento-icon { border-radius: var(--radius-sm) !important; background: linear-gradient(140deg, #e0f2fe 0%, #bae6fd 100%) !important; border: 1px solid rgba(2, 132, 199, 0.16) !important; box-shadow: var(--inner-highlight) !important; color: var(--accent-primary) !important; } [data-theme="dark"] .card-icon, [data-theme="dark"] .bento-icon { background: linear-gradient(140deg, rgba(56, 189, 248, 0.16) 0%, rgba(2, 132, 199, 0.2) 100%) !important; border-color: rgba(56, 189, 248, 0.28) !important; } .flip-hint { padding-top: 0.9rem; font-size: 0.78rem !important; letter-spacing: 0.02em; opacity: 0.8; } /* -------------------------------------------------------------------------- 6. SECTION RHYTHM The alternating odd/even backgrounds produced hard horizontal seams. One continuous field with a slight tonal step reads as a single surface. -------------------------------------------------------------------------- */ .section { padding: var(--space-3xl) 0 !important; background: transparent !important; } .section:nth-child(even):not(.cta-section) { background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 18%, rgba(255, 255, 255, 0.55) 82%, rgba(255, 255, 255, 0) 100% ) !important; } [data-theme="dark"] .section:nth-child(even):not(.cta-section) { background: linear-gradient( 180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.5) 18%, rgba(15, 23, 42, 0.5) 82%, rgba(15, 23, 42, 0) 100% ) !important; } .section-header { margin-bottom: var(--space-xl) !important; } /* Eyebrow tag above section headings. */ .subtitle { display: inline-flex !important; align-items: center; gap: 0.45rem; padding: 0.4rem 0.95rem !important; border-radius: var(--radius-full) !important; font-family: var(--font-body) !important; font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.18em !important; background: rgba(2, 132, 199, 0.08) !important; border: 1px solid rgba(2, 132, 199, 0.16) !important; color: var(--accent-secondary) !important; margin-bottom: var(--space-md) !important; } /* -------------------------------------------------------------------------- 7. FORM CONTROLS -------------------------------------------------------------------------- */ input, select, textarea, .vrtx-select { width: 100%; font-family: var(--font-body) !important; border-radius: var(--radius-sm) !important; border: 1px solid rgba(2, 132, 199, 0.18) !important; background: rgba(255, 255, 255, 0.9) !important; padding: 0.9rem 1.1rem !important; box-shadow: var(--inner-highlight) !important; transition: border-color 0.3s var(--ease-out-soft), box-shadow 0.3s var(--ease-out-soft) !important; } input:focus, select:focus, textarea:focus, .vrtx-select:focus { border-color: var(--accent-primary) !important; box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.13) !important; outline: none !important; } /* The specialty search box was too narrow to show its own placeholder. */ .specialty-search-wrap, .search-wrap { max-width: 460px; margin-inline: auto; } input[type="search"], input.specialty-search { min-width: min(100%, 340px); } /* -------------------------------------------------------------------------- 8. MOTION — heavier, staggered scroll entry -------------------------------------------------------------------------- */ body.js-reveal-init .reveal-on-scroll, body.js-reveal-init .title-reveal, body.js-reveal-init .reveal, body.js-reveal-init .flip-card, body.js-reveal-init .bass-img-card { opacity: 0; transform: translateY(34px); transition: opacity 0.85s var(--ease-out-soft), transform 0.85s var(--ease-out-soft); will-change: transform, opacity; } body.js-reveal-init .reveal-on-scroll.is-visible, body.js-reveal-init .title-reveal.is-visible, body.js-reveal-init .reveal.is-visible, body.js-reveal-init .flip-card.is-visible, body.js-reveal-init .bass-img-card.is-visible { opacity: 1; transform: translateY(0); will-change: auto; } /* -------------------------------------------------------------------------- 9. FOOTER -------------------------------------------------------------------------- */ footer, .main-footer { position: relative; z-index: var(--z-base); padding: var(--space-2xl) 0 var(--space-lg) !important; } .main-footer a { transition: color 0.3s var(--ease-out-soft), opacity 0.3s var(--ease-out-soft); } .main-footer a:hover { opacity: 1; } /* -------------------------------------------------------------------------- 10. MOBILE COLLAPSE -------------------------------------------------------------------------- */ @media (max-width: 768px) { :root { --space-3xl: 4.25rem; --bezel-pad: 5px; } .section { padding: var(--space-3xl) 0 !important; } .navbar { padding: 0.5rem 0.55rem 0.5rem 1rem !important; } .logo-img { height: 42px !important; max-width: 170px !important; } .flip-card-front, .flip-card-back { padding: 1.5rem 1.35rem !important; } .btn { width: auto; } /* Overlap and rotation break touch targets — flatten them on small screens. */ .split-logo-half, .bass-reveal-left, .bass-reveal-right { transform: none !important; margin: 0 !important; } } /* iOS Safari collapses 100vh against its own chrome; dvh tracks the real box. */ .hero-full-bg-container { min-height: 100dvh; } .page-banner-hero { min-height: auto; } /* -------------------------------------------------------------------------- 11. HERO — nav island floats over the image instead of sitting on a band -------------------------------------------------------------------------- */ /* Pulls the hero up under the sticky header so the pill reads as detached glass over the photograph. The header keeps its own stacking context. */ header { margin-bottom: calc(-1 * var(--nav-overlay, 104px)); } main > .hero-full-bg-container:first-child, main > .page-banner-hero:first-child { padding-top: var(--nav-overlay, 104px); } .navbar { background: color-mix(in srgb, var(--bg-nav) 70%, transparent) !important; box-shadow: var(--shadow-float), var(--inner-highlight) !important; } /* Over a photographic hero the copy needs a real scrim, not just a tint. */ .hero-overlay-gradient { background: radial-gradient(120% 90% at 12% 42%, rgba(2, 26, 51, 0.86) 0%, rgba(2, 26, 51, 0.32) 46%, rgba(2, 26, 51, 0) 72%), linear-gradient(180deg, rgba(8, 22, 45, 0.82) 0%, rgba(4, 39, 74, 0.5) 38%, rgba(6, 32, 62, 0.72) 74%, rgba(224, 242, 254, 0.9) 95%, #e0f2fe 100%) !important; } [data-theme="dark"] .hero-overlay-gradient { background: radial-gradient(120% 90% at 12% 42%, rgba(2, 12, 28, 0.9) 0%, rgba(2, 12, 28, 0.4) 48%, rgba(2, 12, 28, 0) 74%), linear-gradient(180deg, rgba(2, 8, 20, 0.88) 0%, rgba(3, 30, 60, 0.6) 40%, rgba(2, 12, 28, 0.8) 76%, rgba(11, 19, 41, 0.95) 96%, #0b1329 100%) !important; } /* The hero ran ~380px of empty washed-out gradient below the content. */ .hero-full-bg-container { min-height: min(100dvh, 900px); } .hero-content-layer { padding: 5rem 0 4rem !important; } .hero-content-layer h1 { text-shadow: 0 2px 30px rgba(2, 20, 40, 0.45); margin-bottom: var(--space-md); } .hero-content-layer p { text-shadow: 0 1px 16px rgba(2, 20, 40, 0.5); } /* Inner page banners are shorter than the homepage hero. */ .page-banner-hero { min-height: min(72dvh, 620px) !important; } .page-banner-hero .hero-content-layer { padding: 4rem 0 3rem !important; } @media (max-width: 768px) { :root { --nav-overlay: 88px; } .hero-full-bg-container { min-height: auto; } .hero-content-layer { padding: 3.5rem 0 3rem !important; } } /* The blend-to-light tail started at 74% and swallowed the hero stat row in a white wash. Hold the dark scrim until the very bottom, then fade fast. */ .hero-overlay-gradient { background: radial-gradient(120% 90% at 12% 42%, rgba(2, 26, 51, 0.86) 0%, rgba(2, 26, 51, 0.32) 46%, rgba(2, 26, 51, 0) 72%), linear-gradient(180deg, rgba(8, 22, 45, 0.82) 0%, rgba(4, 39, 74, 0.5) 40%, rgba(6, 32, 62, 0.72) 88%, rgba(6, 32, 62, 0.72) 96%, rgba(224, 242, 254, 0.55) 99.5%, #e0f2fe 100%) !important; } [data-theme="dark"] .hero-overlay-gradient { background: radial-gradient(120% 90% at 12% 42%, rgba(2, 12, 28, 0.9) 0%, rgba(2, 12, 28, 0.4) 48%, rgba(2, 12, 28, 0) 74%), linear-gradient(180deg, rgba(2, 8, 20, 0.88) 0%, rgba(3, 30, 60, 0.6) 40%, rgba(2, 12, 28, 0.8) 88%, rgba(2, 12, 28, 0.8) 96%, rgba(11, 19, 41, 0.7) 99.5%, #0b1329 100%) !important; } /* Hero trust figures sit on photography — keep them legible in their own right. */ .hero-content-layer .stat-number, .hero-content-layer strong { text-shadow: 0 2px 18px rgba(2, 20, 40, 0.6); } /* A cleaner, lighter glass for the nav pill over the dark hero. */ .navbar { background: rgba(255, 255, 255, 0.82) !important; border-color: rgba(255, 255, 255, 0.5) !important; } [data-theme="dark"] .navbar { background: rgba(15, 23, 42, 0.72) !important; border-color: rgba(56, 189, 248, 0.22) !important; } /* -------------------------------------------------------------------------- 12. STAT BAND — bezelled like the cards, with dividers instead of an outline -------------------------------------------------------------------------- */ .stats-grid { border: 1px solid rgba(2, 132, 199, 0.12) !important; border-radius: var(--radius-xl) !important; background: rgba(255, 255, 255, 0.9) !important; box-shadow: var(--shadow-md), var(--inner-highlight) !important; padding: var(--space-lg) var(--space-md) !important; gap: 0 !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } [data-theme="dark"] .stats-grid { background: rgba(30, 41, 59, 0.85) !important; border-color: rgba(56, 189, 248, 0.18) !important; } .stats-grid > * { padding: var(--space-2xs) var(--space-md); text-align: center; } /* Hairline rules between figures rather than relying on raw gap. */ @media (min-width: 768px) { .stats-grid > * + * { border-left: 1px solid rgba(2, 132, 199, 0.14); } [data-theme="dark"] .stats-grid > * + * { border-left-color: rgba(56, 189, 248, 0.16); } } @media (min-width: 768px) and (max-width: 1023px) { .stats-grid > *:nth-child(odd) { border-left: none; } } @media (max-width: 767px) { .stats-grid > * + * { border-top: 1px solid rgba(2, 132, 199, 0.14); padding-top: var(--space-md); margin-top: var(--space-2xs); } } .stat-number { font-size: clamp(2rem, 3.4vw, 2.9rem) !important; letter-spacing: -0.03em; } .stat-label { font-size: 0.82rem !important; color: var(--text-muted) !important; font-weight: 500 !important; letter-spacing: 0.005em; margin-top: 0.5rem !important; } /* -------------------------------------------------------------------------- 13. PHOTO CARDS — bezelled frame, readable caption scrim -------------------------------------------------------------------------- */ .bass-img-card { border: 1px solid rgba(2, 132, 199, 0.12) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-md) !important; height: clamp(320px, 34vw, 440px) !important; transition: transform 0.6s var(--ease-out-soft), box-shadow 0.6s var(--ease-out-soft) !important; } [data-theme="dark"] .bass-img-card { border-color: rgba(56, 189, 248, 0.16) !important; } .bass-img-card:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-float) !important; } .bass-img-card img { width: 100%; height: 100%; object-fit: cover; /* A colour treatment layer so photography sits inside the palette rather than fighting it. */ filter: saturate(1.05) contrast(1.02); transition: transform 1.1s var(--ease-out-soft); } .bass-img-card:hover img { transform: scale(1.04); } /* The caption block is absolutely positioned; give it a deeper, taller scrim so the address line underneath the title stays readable over bright glass. */ .bass-img-card > div:last-child { background: linear-gradient( 180deg, rgba(6, 22, 44, 0) 0%, rgba(6, 22, 44, 0.55) 42%, rgba(4, 16, 34, 0.93) 100% ) !important; padding: 3.5rem 1.6rem 1.5rem !important; } .bass-img-card > div:last-child h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem) !important; text-shadow: 0 1px 12px rgba(2, 12, 28, 0.7); } .bass-img-card > div:last-child p { color: rgba(226, 240, 254, 0.92) !important; text-shadow: 0 1px 10px rgba(2, 12, 28, 0.7); } /* -------------------------------------------------------------------------- 14. HEADING MEASURE 840px forced display headings to break mid-phrase ("Our Executive Medical / Billing Campus"). Give the heading room while keeping body copy narrow. -------------------------------------------------------------------------- */ .section-header { max-width: 1080px !important; } .section-header h2 { max-width: 20ch; margin-inline: auto; } .section-header p { max-width: 60ch; margin-inline: auto; } /* -------------------------------------------------------------------------- 15. MOBILE CORRECTIONS -------------------------------------------------------------------------- */ /* .hero-content-layer is also a .container — setting the padding shorthand above zeroed its horizontal gutter and pushed hero copy to the screen edge. Only the block axis belongs to the hero. */ .hero-content-layer { padding: 5rem 1.5rem 4rem !important; } .page-banner-hero .hero-content-layer { padding: 4rem 1.5rem 3rem !important; } @media (max-width: 768px) { .hero-content-layer { padding: 3.25rem 1.25rem 2.75rem !important; } .page-banner-hero .hero-content-layer { padding: 2.5rem 1.25rem 2rem !important; } .container { padding: 0 1.25rem; } /* The pill ran out of room: logo, search, theme, CTA and burger all competed and visibly overlapped. Below the nav breakpoint keep the logo and the burger only — the rest lives inside the opened menu. */ .navbar { gap: 0.5rem; } .nav-actions .vrtx-search-btn, .nav-actions .theme-toggle, .nav-actions .btn-primary { display: none !important; } .mobile-toggle { display: grid !important; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(2, 132, 199, 0.08); border: 1px solid rgba(2, 132, 199, 0.14) !important; font-size: 1.25rem !important; color: var(--accent-primary) !important; transition: transform 0.4s var(--ease-spring), background-color 0.3s var(--ease-out-soft); } .mobile-toggle:active { transform: scale(0.93); } .logo-img { height: 38px !important; max-width: 150px !important; } /* Stacked hero CTAs should fill the measure rather than sit half-width. */ .hero-content-layer .btn { width: 100%; justify-content: space-between; } } /* The opened mobile menu: full-height glass panel with staggered link entry. */ @media (max-width: 1023px) { .nav-links.active { position: fixed; inset: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem !important; padding: 5rem 1.5rem; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); /* Above every fixed header layer (.top-utility-bar is 1001, outside the systemic z-scale) so the open drawer fully covers the page, not just the parts styled with var(--z-*). */ z-index: 1500; } [data-theme="dark"] .nav-links.active { background: rgba(11, 19, 41, 0.9); } .nav-links.active a { font-size: 1.35rem !important; padding: 0.7rem 1.4rem !important; animation: navLinkIn 0.6s var(--ease-out-soft) both; } .nav-links.active li:nth-child(1) a { animation-delay: 0.04s; } .nav-links.active li:nth-child(2) a { animation-delay: 0.08s; } .nav-links.active li:nth-child(3) a { animation-delay: 0.12s; } .nav-links.active li:nth-child(4) a { animation-delay: 0.16s; } .nav-links.active li:nth-child(5) a { animation-delay: 0.20s; } .nav-links.active li:nth-child(6) a { animation-delay: 0.24s; } .nav-links.active li:nth-child(7) a { animation-delay: 0.28s; } .nav-links.active li:nth-child(8) a { animation-delay: 0.32s; } } /* Reparented under while the drawer is open (see script.js) — lock background scroll so the page underneath doesn't move with it. */ body.nav-open { overflow: hidden; } /* Shorter phones (SE-class, landscape): the 8-link stack needs a smaller scale to stay comfortably inside view instead of running edge-to-edge. */ @media (max-width: 1023px) and (max-height: 700px) { .nav-links.active { padding: 3.25rem 1.5rem; gap: 0.2rem !important; } .nav-links.active a { font-size: 1.1rem !important; padding: 0.5rem 1.2rem !important; } } @keyframes navLinkIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Hiding the whole action cluster on mobile also removed "Free Audit" — the primary conversion CTA — and the theme toggle, neither of which appear in the burger menu. Keep them; drop only the search affordance, which is duplicated by the in-page specialty search. */ @media (max-width: 768px) { .nav-actions .theme-toggle, .nav-actions .btn-primary { display: inline-flex !important; } .nav-actions .vrtx-search-btn { display: none !important; } .nav-actions { gap: 0.35rem !important; } .nav-actions .theme-toggle { width: 38px !important; height: 38px !important; } .nav-actions .btn-primary { padding: 0.6rem 1rem !important; font-size: 0.82rem !important; white-space: nowrap; } .navbar { padding: 0.4rem 0.45rem 0.4rem 0.75rem !important; } .logo-img { height: 34px !important; max-width: 118px !important; } .mobile-toggle { width: 40px; height: 40px; } } @media (max-width: 380px) { .nav-actions .btn-primary { display: none !important; } } /* -------------------------------------------------------------------------- 16. LEGIBILITY ON TINTED SURFACES --accent-primary (#0284c7) on --bg-tertiary (#bae6fd) is only 3.09:1, under the 4.5:1 minimum. --accent-deep is the next step down the same sky ramp (sky-800) and clears 5.6:1 on the tint and 8.3:1 on white, so headings stay unmistakably brand-blue while actually being readable. -------------------------------------------------------------------------- */ :root { --accent-deep: #075985; } html:not([data-theme="dark"]) .card h3, html:not([data-theme="dark"]) .card h4, html:not([data-theme="dark"]) .bento-card h3, html:not([data-theme="dark"]) .bento-card h4 { color: var(--accent-deep) !important; } /* Same problem on the working-hours row, which tints its whole line. */ html:not([data-theme="dark"]) .card [style*="--accent-primary"] span, html:not([data-theme="dark"]) .card [style*="--accent-primary"] strong { color: var(--accent-deep) !important; } /* Dark mode keeps the luminous cyan — it already clears contrast on slate. */ [data-theme="dark"] .card h3, [data-theme="dark"] .card h4 { color: #7dd3fc !important; } /* -------------------------------------------------------------------------- 17. NAV OVERLAP SCOPING Pulling every page up by the nav height assumed a full-bleed hero underneath. contact.html opens with a plain banner section instead, so its

slid under the pill. Hang the offset off
and only when the first child is actually a hero able to absorb it; without :has() support nothing is pulled up and the nav simply sits above the hero, which is a safe fallback. -------------------------------------------------------------------------- */ header { margin-bottom: 0; } main:has(> .hero-full-bg-container:first-child) { margin-top: calc(-1 * var(--nav-overlay, 104px)); } /* -------------------------------------------------------------------------- 18. GRADIENT-TEXT DISPLAY .gradient-text forces display:inline so it can tint a phrase inside a heading. On contact.html the class sits on the

itself, which made the heading flow inline and collide with the eyebrow badge beside it. Restore block display when the class is carried by the heading element. -------------------------------------------------------------------------- */ h1.gradient-text, h2.gradient-text, h3.gradient-text { display: block; width: 100%; } /* -------------------------------------------------------------------------- 19. TESTIMONIALS ROTATING CAROUSEL Auto-rotating client testimonial carousel (pages of 2 on desktop, 1 on mobile) with prev/next arrows and dot indicators. Cards are rendered by script.js from the testimonialsData array, not hardcoded in the HTML. -------------------------------------------------------------------------- */ .testimonials-carousel-wrapper { position: relative; display: flex; align-items: center; gap: 1rem; } .carousel-control-btn { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important; color: #ffffff !important; border: none !important; width: 48px; height: 48px; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px var(--accent-glow) !important; flex-shrink: 0; z-index: 5; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important; } .carousel-control-btn:hover { transform: scale(1.1) !important; box-shadow: 0 12px 30px var(--accent-glow) !important; } @media (max-width: 768px) { .carousel-control-btn { display: none; } } .testimonials-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.2rem; width: 100%; } @media (max-width: 850px) { .testimonials-track { grid-template-columns: 1fr; } } .testimonial-card-item { text-align: left !important; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; animation: testiCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes testiCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .testimonial-quote-icon { color: var(--accent-primary); opacity: 0.3; font-size: 1.6rem; margin-bottom: 0.75rem; } .testimonial-text { font-style: italic; font-size: 1rem; line-height: 1.75; color: var(--text-primary); font-weight: 500; margin-bottom: 1.5rem; } .testimonial-author-wrapper { display: flex; align-items: center; gap: 1rem; border-top: 1.5px solid var(--border-light); padding-top: 1.25rem; margin-top: auto; } .testimonial-avatar-circle { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 800; font-size: 1.05rem; font-family: var(--font-heading); flex-shrink: 0; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3); } .testimonial-author { display: flex; flex-direction: column; gap: 0.1rem; } .testimonial-author .author-name { font-weight: 800; font-size: 1rem; color: var(--text-primary); line-height: 1.2; } .testimonial-author .author-role { font-size: 0.85rem; font-weight: 600; color: var(--accent-primary); line-height: 1.2; } .carousel-indicators { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin-top: 2.5rem; } .indicator-dot { width: 10px; height: 10px; border-radius: 50%; background-color: var(--border-light); opacity: 0.5; border: none; cursor: pointer; padding: 0; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .indicator-dot.active { opacity: 1; background-color: var(--accent-primary); width: 26px; border-radius: 6px; } /* -------------------------------------------------------------------------- 20. CONTENT HUB PAGES (Specialty & Blog) Shared components for the specialty-billing.html / blog.html hubs and the individual specialty + article pages generated from them. -------------------------------------------------------------------------- */ .breadcrumb-nav { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.88rem; font-weight: 600; color: #cbd5e1; margin-bottom: 1.5rem; } .breadcrumb-nav a { color: #cbd5e1; text-decoration: none; opacity: 0.85; } .breadcrumb-nav a:hover { color: #ffffff; opacity: 1; } .breadcrumb-nav span.sep { opacity: 0.5; } .breadcrumb-nav span.current { color: #ffffff; opacity: 1; } /* Article / specialty page body copy */ .article-body { max-width: 800px; margin: 0 auto; } .article-body h2 { font-size: 1.6rem; margin: 2.75rem 0 1rem; color: var(--text-primary); } .article-body h2:first-child { margin-top: 0; } .article-body p { color: var(--text-secondary); line-height: 1.85; font-size: 1.06rem; margin-bottom: 1.35rem; } .article-body ul { margin: 0 0 1.5rem 1.4rem; color: var(--text-secondary); line-height: 1.85; font-size: 1.06rem; } .article-body li { margin-bottom: 0.6rem; } .article-body li::marker { color: var(--accent-primary); } .article-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; color: #cbd5e1; font-size: 0.9rem; font-weight: 600; margin-top: 1.25rem; } .article-meta i { color: #38bdf8; margin-right: 0.35rem; } /* Hub grid of link-out cards (specialty tiles / blog post tiles) */ .content-hub-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem; } .content-hub-card { text-align: left !important; display: flex; flex-direction: column; flex: 1 1 300px; padding: 2rem !important; } .content-hub-card h3 { margin-bottom: 0.6rem; font-size: 1.2rem; } .content-hub-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.25rem; } .content-hub-card .hub-card-link { color: var(--accent-primary); font-weight: 700; text-decoration: none; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .content-hub-card .hub-card-link:hover { gap: 0.7rem; } .content-hub-card .hub-card-category { display: inline-block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-primary); background: rgba(2, 132, 199, 0.1); padding: 0.3rem 0.7rem; border-radius: var(--radius-full); margin-bottom: 0.9rem; align-self: flex-start; } [data-theme="dark"] .content-hub-card .hub-card-category { background: rgba(56, 189, 248, 0.15); } /* Related-content strip at the bottom of specialty/article pages */ .related-content-strip { border-top: 1.5px solid var(--border-light); margin-top: 3rem; padding-top: 2.5rem; }