/* ═══════════════════════════════════════════════════ video-section.css BestDoctorsIn — Video Section Component Link in : ═══════════════════════════════════════════════════ */ /* ── Variables (reuse site tokens if already defined) ── */ :root { --vs-green: #1a6b4a; --vs-green-dark: #134f37; --vs-green-light: #e8f5f0; --vs-red: #ff0000; --vs-text: #1a1a2e; --vs-muted: #6b7280; --vs-border: #e5e7eb; --vs-radius: 14px; --vs-shadow: 0 4px 24px rgba(0,0,0,0.10); --vs-shadow-hover:0 12px 40px rgba(0,0,0,0.18); --vs-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Section wrapper ── */ .vs-section { padding: 72px 0 80px; background: #f8faf9; position: relative; overflow: hidden; } /* subtle background pattern */ .vs-section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(26,107,74,0.05) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(26,107,74,0.04) 0%, transparent 50%); pointer-events: none; } /* ── Header ── */ .vs-header { text-align: center; margin-bottom: 44px; } .vs-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: var(--vs-green-light); color: var(--vs-green); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; } .vs-eyebrow i { color: var(--vs-red); font-size: 15px; } .vs-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(24px, 4vw, 34px); font-weight: 700; color: var(--vs-text); margin: 0 0 10px; line-height: 1.25; } .vs-city { color: var(--vs-green); font-style: italic; } .vs-subtitle { font-size: 15px; color: var(--vs-muted); margin: 0; } /* ── Grid ── */ .vs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 960px; margin: 0 auto 36px; } /* ── Card ── */ .vs-card { background: #fff; border-radius: var(--vs-radius); box-shadow: var(--vs-shadow); overflow: hidden; cursor: pointer; transition: transform var(--vs-transition), box-shadow var(--vs-transition); border: 1px solid var(--vs-border); } .vs-card:hover { transform: translateY(-6px); box-shadow: var(--vs-shadow-hover); } /* ── Thumbnail wrapper ── */ .vs-thumb-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; } .vs-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, filter 0.4s ease; } .vs-card:hover .vs-thumb { transform: scale(1.04); filter: brightness(0.75); } /* ── Dark overlay ── */ .vs-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.30); display: flex; align-items: center; justify-content: center; transition: background var(--vs-transition); } .vs-card:hover .vs-overlay { background: rgba(0,0,0,0.45); } /* ── Play button ── */ .vs-play-btn { background: none; border: none; padding: 0; cursor: pointer; width: 72px; height: 72px; transition: transform var(--vs-transition), filter var(--vs-transition); filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5)); } .vs-card:hover .vs-play-btn { transform: scale(1.12); filter: drop-shadow(0 6px 24px rgba(255,0,0,0.4)); } .vs-play-btn svg circle { transition: fill 0.2s; } .vs-card:hover .vs-play-btn svg circle { fill: rgba(255, 0, 0, 0.8); } /* ── Badges ── */ .vs-badge { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.04em; text-transform: uppercase; } .vs-badge-yt { background: rgba(0,0,0,0.75); color: #fff; backdrop-filter: blur(4px); } .vs-badge-yt i { color: var(--vs-red); margin-right: 4px; } .vs-badge-live { background: var(--vs-red); color: #fff; animation: vs-pulse 2s infinite; } @keyframes vs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } /* ── Card info ── */ .vs-info { padding: 16px 18px 18px; } .vs-video-title { font-size: 15px; font-weight: 600; color: var(--vs-text); margin: 0 0 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vs-video-meta { font-size: 13px; color: var(--vs-muted); margin: 0; display: flex; align-items: center; gap: 4px; } .vs-video-meta i { color: var(--vs-green); font-size: 12px; } /* ── CTA row ── */ .vs-cta-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .vs-yt-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--vs-red); color: #fff; font-size: 14px; font-weight: 600; padding: 12px 24px; border-radius: 8px; text-decoration: none; transition: background var(--vs-transition), transform var(--vs-transition); } .vs-yt-btn:hover { background: #cc0000; transform: translateY(-2px); color: #fff; } .vs-yt-btn i { font-size: 18px; } .vs-consult-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--vs-green); color: #fff; font-size: 14px; font-weight: 600; padding: 12px 24px; border-radius: 8px; text-decoration: none; transition: background var(--vs-transition), transform var(--vs-transition); } .vs-consult-btn:hover { background: var(--vs-green-dark); transform: translateY(-2px); color: #fff; } /* ══════════════════════════════════════ LIGHTBOX MODAL ══════════════════════════════════════ */ .vs-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; } .vs-modal[hidden] { display: none; } .vs-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); cursor: pointer; animation: vs-fade-in 0.2s ease; } .vs-modal-box { position: relative; width: 100%; max-width: 860px; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.7); animation: vs-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 1; } .vs-modal-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: none; font-size: 20px; line-height: 1; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; color: #111; font-weight: 700; transition: background 0.2s, transform 0.2s; } .vs-modal-close:hover { background: #eee; transform: scale(1.1); } .vs-iframe-wrap { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .vs-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; } @keyframes vs-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vs-scale-in { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ══════════════════════════════════════ RESPONSIVE ══════════════════════════════════════ */ @media (max-width: 720px) { .vs-section { padding: 48px 0 56px; } .vs-grid { grid-template-columns: 1fr; gap: 20px; max-width: 480px; } .vs-play-btn { width: 56px; height: 56px; } .vs-cta-row { flex-direction: column; gap: 12px; } .vs-yt-btn, .vs-consult-btn { width: 100%; justify-content: center; } }