/* ===================================================== JAIPUR HOSPITAL — PREMIUM UPGRADE CSS Drop this file AFTER css/style.css in every page. It upgrades visual quality without breaking layout. ===================================================== */ /* ── GOOGLE FONTS (add to if not already there) ── */ /* ── ROOT UPGRADES ── */ :root { --font-display: 'Fraunces', serif; --font-body: 'Plus Jakarta Sans', sans-serif; /* Richer blue palette */ --blue-900: #062040; --blue-800: #0a3060; --blue-700: #0b4ea2; --blue-600: #1565c0; --blue-500: #1976d2; --blue-400: #42a5f5; --blue-300: #7ec8f4; --blue-200: #b8ddf9; --blue-100: #dceefb; --blue-50: #eef7fd; /* Accent */ --teal: #0ea5e9; --mint: #10b981; --mint-light: #d1fae5; --shadow-card: 0 4px 20px rgba(11,78,162,.09); --shadow-hover: 0 12px 40px rgba(11,78,162,.16); } /* ── BODY ── */ body { font-family: var(--font-body); background: #f7fbff; -webkit-font-smoothing: antialiased; } /* ── TOPBAR ── */ .top-bar, .topbar { background: linear-gradient(90deg, var(--blue-900) 0%, var(--blue-800) 100%); font-size: 13px; letter-spacing: .01em; padding: 10px 24px; box-shadow: 0 2px 8px rgba(6,32,64,.25); } /* ── HEADER ── */ .header, header { box-shadow: 0 1px 0 rgba(11,78,162,.08), 0 4px 16px rgba(11,78,162,.05); } .header__logo-text { font-size: 14px; font-weight: 700; letter-spacing: -.01em; } /* ── HEADINGS ── */ h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; /* gradient text for hero */ } h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--blue-800); } h3 { font-weight: 700; letter-spacing: -.01em; } /* ── SECTION LABELS ── */ .section-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); background: rgba(14,165,233,.1); border: 1px solid rgba(14,165,233,.2); padding: 4px 12px; border-radius: 999px; display: inline-block; } /* ── HERO ── */ .hero, .hero--premium { background: linear-gradient(140deg, var(--blue-900) 0%, var(--blue-800) 55%, #0c5a8a 100%); position: relative; overflow: hidden; } .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 25%, rgba(14,165,233,.15) 0%, transparent 42%), radial-gradient(circle at 5% 75%, rgba(16,185,129,.09) 0%, transparent 38%); pointer-events: none; } .hero h1 { background: linear-gradient(100deg, #fff 0%, #bae6fd 60%, #a7f3d0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__badge { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); } /* ── QUICK INFO ── */ .quick-info { border-radius: 20px; box-shadow: 0 16px 48px rgba(11,78,162,.14); border: 1px solid rgba(11,78,162,.08); } /* ── CARDS ── */ .service-card, .trust-card, .doctor-card, .testimonial-card, .hero-panel-card, .addl-service-card { border-radius: 20px; border: 1px solid rgba(11,78,162,.1); box-shadow: var(--shadow-card); transition: transform .22s ease, box-shadow .22s ease; } .service-card:hover, .trust-card:hover, .doctor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .service-card--featured { border-color: var(--blue-400); background: linear-gradient(135deg, #fff 0%, var(--blue-50) 100%); } /* ── DOCTOR CARDS ── */ .doctor-card img, img[src*="dr-"] { border-radius: 16px; box-shadow: 0 8px 24px rgba(11,78,162,.14); filter: brightness(1.04) contrast(1.06) saturate(1.05); } .doctor-card { text-align: center; } .doctor-card h3 { font-family: var(--font-display); font-size: 18px; } /* ── TESTIMONIALS ── */ .testimonial-card__stars { color: #f59e0b; letter-spacing: 2px; } .testimonial-card__author-avatar { background: linear-gradient(135deg, var(--blue-100), var(--blue-200)); color: var(--blue-800); font-weight: 800; } /* ── BUTTONS ── */ .btn { border-radius: 14px; font-weight: 700; letter-spacing: .01em; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .btn:hover { transform: translateY(-2px); } .btn--primary { background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); border-color: transparent; box-shadow: 0 6px 20px rgba(11,78,162,.22); } .btn--primary:hover { background: linear-gradient(135deg, var(--blue-800), var(--blue-600)); box-shadow: 0 10px 28px rgba(11,78,162,.28); } .btn--whatsapp { background: linear-gradient(135deg, #0b8f67, #25D366); border-color: transparent; box-shadow: 0 6px 20px rgba(37,211,102,.22); } .btn--whatsapp:hover { background: linear-gradient(135deg, #087a55, #1dba57); box-shadow: 0 10px 28px rgba(37,211,102,.28); } .btn--outline { background: #fff; border-color: var(--blue-200); color: var(--blue-700); } .btn--outline:hover { background: var(--blue-50); border-color: var(--blue-400); } /* ── FEAR SECTION ── */ .fear-section { background: linear-gradient(135deg, var(--blue-50) 0%, #fff 100%); border-top: 1px solid var(--blue-100); border-bottom: 1px solid var(--blue-100); } .fear-check__icon { background: linear-gradient(135deg, var(--blue-700), var(--teal)); border-radius: 50%; box-shadow: 0 2px 8px rgba(11,78,162,.2); } /* ── STATS / PROOF GRID ── */ .hp-proof-card { border-radius: 18px; border: 1px solid var(--blue-100); box-shadow: var(--shadow-card); transition: transform .2s ease; } .hp-proof-card:hover { transform: translateY(-2px); } .hp-proof-number { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--blue-700); } /* ── WHY CARD ── */ .hp-why-card { border-radius: 24px; border: 1px solid var(--blue-100); box-shadow: var(--shadow-card); background: linear-gradient(135deg, #f0f9ff 0%, #fff 60%); } .hp-why-item { border-radius: 16px; border: 1px solid var(--blue-100); transition: all .2s ease; } .hp-why-item:hover { background: var(--blue-50); border-color: var(--blue-200); transform: translateY(-1px); } .hp-why-item h3 { font-family: var(--font-display); color: var(--blue-800); } /* ── SECTION — BLUE BACKGROUND ── */ .section--blue { background: linear-gradient(180deg, var(--blue-50) 0%, #f0f8ff 100%); } /* ── EMERGENCY SECTION ── */ .emergency-section { background: linear-gradient(140deg, var(--blue-900) 0%, #041830 100%); } .emergency-feature { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; backdrop-filter: blur(4px); } .emergency-phone { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -.02em; } /* ── FAQ ── */ .faq-question { font-weight: 700; font-size: 15px; } .faq-question__icon { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-700); border-radius: 50%; } .faq-item.active .faq-question { color: var(--blue-700); } .faq-item.active .faq-question__icon { background: var(--blue-100); transform: rotate(45deg); } /* ── FOOTER ── */ .footer { background: linear-gradient(180deg, var(--blue-900) 0%, #03111f 100%); border-top: 2px solid rgba(14,165,233,.15); } .footer h3, .footer h4 { font-family: var(--font-display); } .footer a:hover { color: var(--blue-300); } /* ── MOBILE BOTTOM BAR ── */ .mobile-bottom-bar { background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--blue-100); box-shadow: 0 -4px 16px rgba(11,78,162,.1); } .mobile-bottom-bar__call { background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); border-radius: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(11,78,162,.2); } .mobile-bottom-bar__wa { background: linear-gradient(135deg, #0b8f67, #25D366); border-radius: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(37,211,102,.2); } /* ── PROMISE GRID ── */ .promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .promise-item { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--blue-100); border-radius: 16px; padding: 16px; transition: all .2s ease; } .promise-item:hover { border-color: var(--blue-200); box-shadow: var(--shadow-card); transform: translateY(-1px); } .promise-item__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-50); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .promise-item strong { display: block; font-size: 14px; font-weight: 700; color: var(--blue-800); margin-bottom: 2px; } .promise-item span { font-size: 12px; color: #64748b; line-height: 1.4; } /* ── FORM INPUTS ── */ input, textarea, select { border-radius: 12px; border: 1.5px solid var(--blue-100); font-family: var(--font-body); transition: border-color .18s ease, box-shadow .18s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,165,233,.12); } /* ── ANIMATIONS ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-up.visible { animation: fadeUp .5s ease both; } /* ── MAP EMBED ── */ .map-embed { border-radius: 20px; overflow: hidden; border: 1px solid var(--blue-100); box-shadow: var(--shadow-card); } /* ── PREMIUM HIGHLIGHT GRID ── */ .premium-highlights { background: var(--blue-50); border-top: 1px solid var(--blue-100); border-bottom: 1px solid var(--blue-100); } .premium-highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .premium-highlight-card { background: #fff; border: 1px solid var(--blue-100); border-radius: 20px; padding: 28px 24px; transition: all .22s ease; box-shadow: var(--shadow-card); } .premium-highlight-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--blue-200); } .premium-highlight-card__icon { font-size: 32px; margin-bottom: 14px; } .premium-highlight-card h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--blue-800); margin-bottom: 8px; } .premium-highlight-card p { font-size: 14px; color: #64748b; line-height: 1.55; } /* ── DOCTOR MINI (hero panel) ── */ .doctor-mini { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .doctor-mini img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--blue-200); } .doctor-mini strong { display: block; font-size: 14px; font-weight: 700; color: var(--blue-900); } .doctor-mini span { font-size: 12px; color: #64748b; } /* ── HERO PANEL CARD ── */ .hero-panel-card { background: rgba(255,255,255,.97); border-radius: 20px; padding: 24px; border: 1px solid rgba(255,255,255,.4); box-shadow: 0 16px 40px rgba(6,32,64,.2); margin-bottom: 16px; } .hero-panel-card--primary { background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(240,248,255,.98) 100%); } .hero-panel-card h2 { font-size: 18px; margin-bottom: 12px; color: var(--blue-800); } .hero-panel-list { padding-left: 0; } .hero-panel-list li { font-size: 13px; color: #334155; padding: 5px 0; border-bottom: 1px solid var(--blue-50); display: flex; align-items: flex-start; gap: 8px; } .hero-panel-list li::before { content: '✓'; color: var(--mint); font-weight: 700; flex-shrink: 0; margin-top: 1px; } .hero-panel-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .hero-panel-card__pill { font-size: 11px; font-weight: 600; background: var(--blue-50); color: var(--blue-700); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--blue-100); } .hero-panel-card__rating { color: #f59e0b; font-size: 14px; letter-spacing: 1px; } .hero-service-tags { display: flex; flex-wrap: wrap; gap: 6px; } .hero-service-tags span { font-size: 11px; font-weight: 600; background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); padding: 3px 10px; border-radius: 999px; } /* ── HERO PREMIUM LAYOUT ── */ .hero-premium { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; } @media (max-width: 1024px) { .hero-premium { grid-template-columns: 1fr; } .hero-premium__panel { display: none; } } .hero-premium__eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); margin-bottom: 14px; } .hero-premium__stats { display: flex; gap: 24px; margin: 24px 0; flex-wrap: wrap; } .premium-stat { text-align: center; } .premium-stat__number { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: #fff; display: block; line-height: 1; } .premium-stat__label { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 4px; display: block; max-width: 100px; line-height: 1.3; } /* ── VIDEO TESTIMONIALS ── */ .card video { border-radius: 14px; } /* ── SCROLL FADE ── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .fade-up { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; } .fade-up.is-visible { opacity: 1; transform: translateY(0); } /* ── RESPONSIVE POLISH ── */ @media (max-width: 640px) { .hero-premium__stats { gap: 16px; } .premium-stat__number { font-size: 20px; } .promise-grid { grid-template-columns: 1fr; } .premium-highlight-grid { grid-template-columns: 1fr 1fr; } } /* Intersection Observer fix — add this script in JS or inline in pages */