.elementor-155 .elementor-element.elementor-element-05c5ee3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-cbaa2ce *//* ========================================================================== pd-PROCEDURE-DETAIL-styles.css Dr. Shrinath Viswanath — Procedure Detail Pages Shared stylesheet for all procedure/condition pages. Class prefix: pd- Usage: Reference this file in the of each procedure HTML page. The hero background image is set per-page via inline style on .pd-hero. Sections: 01. Design system tokens (:root) — STANDARDISED to match homepage (new.css) 02. Responsive token overrides 03. Global base defaults 04. Elementor reset 05. Page wrapper 06. Background grain 07. Container & layout utilities 08. Scroll reveal animation 09. Hero section 10. Header band 11. Procedure sections (6-up grid) 12. Related conditions 13. Page CTAs 14. CTA band (full-width promo strip) 15. Responsive layout breakpoints ========================================================================== */ /* ========================================================================== 01. DESIGN SYSTEM TOKENS ========================================================================== */ /* ========================================================================== 03. GLOBAL BASE DEFAULTS ========================================================================== */ body { font-family: var(--f-body); color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); background: var(--off-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .h1 { font-family: var(--f-title); font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-headings); } h2, .h2 { font-family: var(--f-title); font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-headings); } h3, .h3 { font-family: var(--f-sub); font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-headings); } h4, .h4 { font-family: var(--f-body); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-headings); } /* ========================================================================== 04. ELEMENTOR RESET ========================================================================== */ .elementor-section, .elementor-column, .elementor-widget-wrap, .elementor-widget-container, .elementor-widget-html, .e-con, .e-con-inner { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; min-height: unset !important; display: block !important; } /* ========================================================================== 05. PAGE WRAPPER ========================================================================== */ .pd-wrap { position: relative !important; min-height: 100vh !important; overflow-x: hidden !important; background: var(--off-white) !important; font-family: var(--f-body) !important; color: var(--text) !important; -webkit-font-smoothing: antialiased !important; } .pd-wrap img { max-width: 100% !important; height: auto !important; } .pd-tablet-vert-br { display: none; } /* ========================================================================== 06. BACKGROUND GRAIN ========================================================================== */ .pd-bg-grain { position: absolute !important; inset: 0 !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important; opacity: 0.04 !important; pointer-events: none !important; z-index: 0 !important; } /* ========================================================================== 07. CONTAINER & LAYOUT UTILITIES ========================================================================== */ .pd-container { max-width: var(--container) !important; margin: 0 auto !important; padding-inline: clamp(16px, 4vw, 60px) !important; } .pd-main { position: relative !important; z-index: 1 !important; } /* ========================================================================== 08. SCROLL REVEAL ANIMATION ========================================================================== */ .pd-reveal { opacity: 0 !important; transform: translateY(22px) !important; transition: opacity 0.65s ease calc(var(--rd, 0s)), transform 0.65s ease calc(var(--rd, 0s)) !important; } .pd-revealed { opacity: 1 !important; transform: translateY(0) !important; } /* ========================================================================== 09. HERO SECTION ========================================================================== */ .pd-hero { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: #0a2f52 !important; position: relative !important; overflow: hidden !important; min-height: clamp(520px, 56vh, 680px) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding-top: 64px !important; padding-bottom: 4px !important; isolation: isolate !important; } /* Generic WebP hero graphic: tucked to the right, behind the copy */ .pd-hero[style*=".webp"] { background-color: #0f4c81 !important; background-position: right 10px top 120px !important; background-size: 30% auto !important; background-repeat: no-repeat !important; } .pd-hero-overlay { position: absolute !important; inset: 0 !important; background: none !important; z-index: 1 !important; } .pd-hero-grid { position: absolute !important; inset: 0 !important; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important; background-size: 64px 64px !important; pointer-events: none !important; z-index: 1 !important; } .pd-hero-inner { position: relative !important; z-index: 2 !important; padding: 64px clamp(16px, 4vw, 60px) 64px !important; width: 100% !important; max-width: var(--container) !important; margin: 0 auto !important; } .pd-breadcrumb { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 22px !important; flex-wrap: wrap !important; } .pd-bc-link { font-size: var(--fs-small) !important; color: rgba(255, 255, 255, 0.55) !important; text-decoration: none !important; font-weight: var(--fw-medium) !important; transition: color 0.2s !important; } .pd-bc-link:hover { color: rgba(255, 255, 255, 0.85) !important; } .pd-bc-sep { color: rgba(255, 255, 255, 0.3) !important; font-size: var(--fs-xs) !important; } .pd-bc-current { color: rgba(255, 255, 255, 0.85) !important; font-size: var(--fs-small) !important; } .pd-eyebrow { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 16px !important; } .pd-eyebrow-line { display: inline-block !important; width: 32px !important; height: 1.5px !important; background: rgba(255, 255, 255, 0.4) !important; flex-shrink: 0 !important; } .pd-eyebrow-text { font-size: var(--fs-small) !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.65) !important; font-weight: var(--fw-bold) !important; } .pd-eyebrow-dark { margin-bottom: 12px !important; } .pd-eyebrow-line-dark { background: var(--c4) !important; } .pd-eyebrow-text-dark { color: var(--c3) !important; } .pd-h1 { font-family: var(--f-title) !important; font-size: var(--fs-display) !important; font-weight: var(--fw-bold) !important; line-height: 1.05 !important; color: #fff !important; margin-bottom: 16px !important; letter-spacing: -0.01em !important; } .pd-h1 em { display: block !important; font-style: italic !important; font-family: var(--f-sub) !important; color: var(--c5) !important; font-weight: var(--fw-semibold) !important; } .pd-hero-tagline { font-family: var(--f-sub) !important; font-size: var(--fs-h4) !important; font-style: italic !important; color: rgba(255, 255, 255, 0.7) !important; max-width: 640px !important; line-height: var(--lh-body) !important; } /* ── Per-page hero image overrides ── NOTE: positioned to the RIGHT (not center) so the graphic sits behind/beside the headline instead of on top of it. ── */ /* Spinal Deformity Correction — wider image, 45% */ .pd-hero[style*="Spinal-Deformity-Correction-1.webp"] { background-position: right 10px top 120px !important; background-size: 45% auto !important; } /* Vertebroplasty / Kyphoplasty — 40% */ .pd-hero[style*="Vertebroplasty_Kyphoplasty.webp"] { background-position: right 10px top 120px !important; background-size: 35% auto !important; } /* SNRB (diagnostic injection — narrower graphic) */ .pd-hero[style*="SNRB.webp"] { background-position: right 10px top 120px !important; background-size: 35% auto !important; } /* ========================================================================== 10. HEADER BAND ========================================================================== */ .pd-header-band { background: var(--white) !important; padding: 48px 0 !important; border-bottom: 1px solid rgba(15, 76, 129, 0.07) !important; } .pd-header-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 48px !important; align-items: center !important; } .pd-header-left { max-width: 100%; } .pd-header-h2 { font-family: var(--f-sub) !important; font-size: var(--fs-h2) !important; font-weight: var(--fw-semibold) !important; color: var(--c2) !important; margin-bottom: 10px !important; line-height: var(--lh-headings) !important; } .pd-header-tagline { font-family: var(--f-sub) !important; font-size: var(--fs-h4) !important; font-style: italic !important; color: var(--muted) !important; line-height: var(--lh-body) !important; } .pd-tldr { background: var(--off-white) !important; border-left: 4px solid var(--c4) !important; padding: 22px 24px !important; border-radius: 0 var(--radius) var(--radius) 0 !important; box-shadow: var(--shadow) !important; transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow 0.3s ease !important; will-change: transform !important; } .pd-tldr:hover { transform: scale(1.02) !important; box-shadow: 0 20px 35px rgba(15, 76, 129, 0.15), 0 5px 12px rgba(0, 0, 0, 0.05) !important; z-index: 2 !important; } .pd-tldr-label { font-size: var(--fs-xs) !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--c4) !important; font-weight: var(--fw-bold) !important; margin-bottom: 8px !important; } .pd-tldr-text { font-family: var(--f-sub) !important; font-size: var(--fs-body-large) !important; font-weight: var(--fw-medium) !important; font-style: italic !important; color: var(--body) !important; line-height: 1.55 !important; margin: 0 !important; } /* ========================================================================== 11. PROCEDURE SECTIONS — 6-up grid ========================================================================== */ .pd-sections-wrap { background: var(--off-white) !important; padding: 56px 0 28px !important; } .pd-sections-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; } .pd-section { background: var(--white) !important; border: 1px solid rgba(15, 76, 129, 0.08) !important; border-radius: var(--radius) !important; padding: 28px 30px !important; transition: border-color 0.3s !important; } .pd-section:hover { border-color: rgba(15, 76, 129, 0.2) !important; } .pd-section:last-child { border-left: 3px solid var(--c2) !important; background: var(--pale) !important; } .pd-section-title { font-family: var(--f-sub) !important; font-size: var(--fs-h4) !important; font-weight: var(--fw-semibold) !important; color: var(--c2) !important; margin-bottom: 12px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(15, 76, 129, 0.1) !important; } .pd-section-text { font-size: var(--fs-small) !important; color: var(--body) !important; line-height: var(--lh-body) !important; font-weight: var(--fw-medium) !important; margin: 0 !important; } /* ========================================================================== 12. RELATED CONDITIONS ========================================================================== */ .pd-related-wrap { background: var(--off-white) !important; padding: 0 0 8px !important; } .pd-related { background: var(--pale) !important; border: 1px solid rgba(15, 76, 129, 0.1) !important; border-radius: var(--radius) !important; padding: 28px 32px !important; } .pd-related-label { font-size: var(--fs-xs) !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--c3) !important; font-weight: var(--fw-bold) !important; margin-bottom: 6px !important; } .pd-related-intro { font-size: var(--fs-small) !important; color: var(--muted) !important; font-weight: var(--fw-medium) !important; line-height: var(--lh-body) !important; margin-bottom: 18px !important; } .pd-related-pills { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; } .pd-pill { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: var(--white) !important; border: 1.5px solid rgba(15, 76, 129, 0.2) !important; border-radius: 24px !important; padding: 9px 18px !important; font-size: var(--fs-small) !important; font-weight: var(--fw-bold) !important; color: var(--c2) !important; text-decoration: none !important; transition: all 0.3s !important; } .pd-pill:hover { background: var(--c2) !important; color: #fff !important; border-color: var(--c2) !important; } /* ========================================================================== 13. PAGE CTAs ========================================================================== */ .pd-ctas-wrap { background: var(--off-white) !important; padding: 32px 0 56px !important; } .pd-ctas { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; align-items: center !important; } .pd-btn-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: var(--c2) !important; color: #fff !important; padding: 13px 26px !important; border-radius: var(--radius) !important; font-size: var(--fs-small) !important; font-weight: var(--fw-bold) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important; text-align: center !important; transition: all 0.3s !important; min-height: 44px !important; min-width: 220px !important; } .pd-btn-primary:hover { background: var(--c3) !important; transform: translateY(-2px) !important; } .pd-btn-wa { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: var(--wa) !important; color: #fff !important; padding: 13px 22px !important; border-radius: var(--radius) !important; font-size: var(--fs-small) !important; font-weight: var(--fw-bold) !important; text-decoration: none !important; text-align: center !important; transition: all 0.3s !important; min-height: 44px !important; min-width: 220px !important; } .pd-btn-wa:hover { background: #1ebe5a !important; transform: translateY(-2px) !important; } .pd-btn-back { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: transparent !important; color: var(--c2) !important; padding: 12px 20px !important; border-radius: var(--radius) !important; font-size: var(--fs-small) !important; font-weight: var(--fw-medium) !important; text-decoration: none !important; border: 1.5px solid rgba(15, 76, 129, 0.25) !important; transition: all 0.3s !important; min-height: 44px !important; } .pd-btn-back:hover { border-color: var(--c2) !important; background: var(--pale) !important; } /* ========================================================================== 14. CTA BAND ========================================================================== */ .pd-cta-band { background: var(--c2) !important; padding: 80px 0 !important; position: relative !important; overflow: hidden !important; } .pd-cta-glow { position: absolute !important; right: -100px !important; top: -100px !important; width: 400px !important; height: 400px !important; background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%) !important; pointer-events: none !important; } .pd-cta-inner { display: grid !important; grid-template-columns: 1fr auto !important; gap: 60px !important; align-items: center !important; position: relative !important; z-index: 1 !important; } .pd-cta-h2 { font-family: var(--f-title) !important; font-size: var(--fs-h2) !important; font-weight: var(--fw-semibold) !important; color: #fff !important; line-height: var(--lh-headings) !important; margin-bottom: 10px !important; } .pd-cta-h2 em { font-family: var(--f-sub) !important; font-style: italic !important; font-weight: var(--fw-medium) !important; color: var(--c5) !important; } .pd-cta-sub { font-family: var(--f-sub) !important; font-size: var(--fs-h4) !important; font-style: italic !important; color: rgba(255, 255, 255, 0.65) !important; line-height: var(--lh-body) !important; margin: 0 !important; } .pd-cta-actions { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; } .pd-btn-white { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #fff !important; color: var(--c2) !important; padding: 13px 26px !important; border-radius: var(--radius) !important; font-size: var(--fs-small) !important; font-weight: var(--fw-bold) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important; text-align: center !important; transition: all 0.3s !important; min-height: 44px !important; min-width: 220px !important; white-space: nowrap !important; } .pd-btn-white:hover { background: var(--pale) !important; transform: translateY(-2px) !important; } .pd-btn-wa-band { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: var(--wa) !important; color: #fff !important; padding: 13px 22px !important; border-radius: var(--radius) !important; font-size: var(--fs-small) !important; font-weight: var(--fw-bold) !important; text-decoration: none !important; text-align: center !important; transition: all 0.3s !important; min-height: 44px !important; min-width: 230px !important; white-space: nowrap !important; } .pd-btn-wa-band:hover { background: #1ebe5a !important; transform: translateY(-2px) !important; } .pd-cta-note { font-size: var(--fs-xs) !important; color: rgba(255, 255, 255, 0.5) !important; font-weight: var(--fw-medium) !important; display: block !important; } /* ========================================================================== 15. RESPONSIVE LAYOUT BREAKPOINTS ========================================================================== */ @media (max-width: 1024px) { .pd-hero { min-height: clamp(480px, 58vh, 640px) !important; padding-top: 48px !important; padding-bottom: 48px !important; } .pd-hero[style*=".webp"] { background-position: right 10px top 80px !important; background-size: 60% auto !important; } } @media (max-width: 1024px) and (min-width: 769px) and (orientation: portrait) { .pd-hero { min-height: 460px !important; } .pd-hero-inner { padding-top: 0 !important; padding-bottom: 0 !important; } .pd-tablet-vert-br { display: block; } .pd-header-grid { grid-template-columns: 1fr !important; gap: 24px !important; } } @media (max-width: 768px) { .pd-hero { min-height: clamp(580px, 88vh, 740px) !important; padding-top: 36px !important; padding-bottom: 36px !important; } .pd-hero-inner { padding: 20px 20px 24px !important; } .pd-h1 { font-size: var(--fs-h1) !important; } .pd-hero[style*=".webp"] { background-position: center bottom 20px !important; background-size: 65% auto !important; } .pd-header-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .pd-sections-grid { grid-template-columns: 1fr !important; } .pd-cta-inner { grid-template-columns: 1fr !important; gap: 32px !important; } .pd-cta-actions { flex-direction: row !important; flex-wrap: wrap !important; } } @media (max-width: 575px) { .pd-hero { min-height: clamp(400px, 66vh, 560px) !important; padding-top: 32px !important; padding-bottom: 32px !important; } .pd-hero[style*=".webp"] { background-position: center bottom 10px !important; background-size: 80% auto !important; } .pd-ctas { flex-direction: column !important; align-items: stretch !important; } .pd-btn-primary, .pd-btn-wa, .pd-btn-back { width: 100% !important; justify-content: center !important; min-width: 0 !important; } } @media (max-width: 375px) { .pd-hero { min-height: clamp(380px, 64vh, 520px) !important; } .pd-hero-inner { padding: 32px 16px 40px !important; } } @media (max-height: 500px) and (orientation: landscape) { .pd-hero { min-height: 100vh !important; padding-top: 40px !important; padding-bottom: 40px !important; } .pd-h1 { font-size: var(--fs-h1) !important; } } /* ========================================================================== MOBILE — Hero: stack text above, image below ========================================================================== */ @media (max-width: 768px) { .pd-hero { flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; min-height: unset !important; padding-bottom: 0 !important; } .pd-hero-inner { order: 1 !important; padding: 20px 20px 0 !important; } /* Reserve visible space below the text for the background image */ .pd-hero::after { content: "" !important; display: block !important; order: 2 !important; width: 100% !important; min-height: 220px !important; flex: 1 1 auto !important; } .pd-hero-grid, .pd-hero-overlay { z-index: 1 !important; } } /* Re-apply per-page background image sizing to sit within the bottom-reserved space */ @media (max-width: 768px) { .pd-hero[style*=".webp"] { background-position: center bottom !important; background-size: 65% auto !important; } }/* End custom CSS */