Watch Live – Open Door Church *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --gold: #C9A84C; --gold-light: #F0D080; --navy: #1A2B52; --navy-dark: #0E1A35; --white: #FFFFFF; } body { font-family: "Lato", sans-serif; background: var(--navy-dark); color: var(--white); min-height: 100vh; } /* GOLD TOP LINE */ .gold-line { height: 4px; background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent); } /* HEADER */ .page-header { text-align: center; padding: 24px 24px 20px; border-bottom: 1px solid rgba(201,168,76,0.2); display: flex; flex-direction: column; align-items: center; gap: 10px; animation: fadeDown 0.8s ease both; } @keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } .page-header img.logo { width: 90px; height: 90px; object-fit: contain; } .page-header .eyebrow { font-family: "Lato", sans-serif; font-weight: 300; font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-light); } .page-header h1 { font-family: "Cinzel", serif; font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 700; color: var(--white); letter-spacing: 0.06em; } /* PLAYER SECTION */ .player-section { max-width: 960px; margin: 28px auto 0; padding: 0 20px; animation: fadeUp 0.8s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Status badge */ .status-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .status-badge { display: inline-flex; align-items: center; gap: 7px; font-family: "Lato", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 5px 14px; border-radius: 2px; } .status-badge.live { background: #c0392b; color: #fff; } .status-badge.offline { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.12); } .status-badge.checking { background: rgba(201,168,76,0.12); color: var(--gold); border: 1px solid rgba(201,168,76,0.3); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.4s ease infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} } /* 16:9 video wrapper */ .video-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #000; border: 2px solid rgba(201,168,76,0.3); border-radius: 4px; overflow: hidden; } .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* OFFLINE PLACEHOLDER */ .offline-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #070e1e 0%, #0e1a35 60%, #1a2b52 100%); text-align: center; padding: 32px 24px; } .offline-placeholder img.logo-placeholder { width: clamp(80px, 14vw, 130px); height: clamp(80px, 14vw, 130px); object-fit: contain; margin-bottom: 16px; opacity: 0.75; } .offline-placeholder h2 { font-family: "Cinzel", serif; font-size: clamp(1rem, 2.8vw, 1.6rem); color: var(--white); margin-bottom: 8px; } .offline-placeholder .tagline { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(0.9rem, 2.2vw, 1.15rem); color: var(--gold-light); margin-bottom: 22px; opacity: 0.85; } /* gold divider */ .gold-divider { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; width: 100%; max-width: 320px; } .gold-divider::before, .gold-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .gold-divider::after { background: linear-gradient(90deg, var(--gold), transparent); } .gold-divider-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; } .next-service { background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); border-radius: 3px; padding: 12px 24px; margin-bottom: 20px; } .next-service p { font-family: "Lato", sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .next-service strong { font-size: 1rem; font-weight: 700; color: var(--white); } .btn-yt { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: "Lato", sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 11px 22px; border-radius: 2px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.14); transition: all 0.2s ease; } .btn-yt:hover { background: rgba(255,255,255,0.12); color: var(--white); } /* SCHEDULE STRIP */ .schedule-strip { background: var(--navy-dark); border-top: 3px solid var(--gold); padding: 22px 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 32px; } .schedule-item { flex: 1; min-width: 200px; max-width: 360px; text-align: center; padding: 10px 24px; position: relative; } .schedule-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 10%; bottom: 10%; width: 1px; background: rgba(201,168,76,0.25); } .schedule-label { font-family: "Cinzel", serif; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .schedule-time { font-family: "Lato", sans-serif; font-size: 0.9rem; font-weight: 300; color: rgba(255,255,255,0.72); letter-spacing: 0.05em; } @media (max-width: 600px) { .schedule-item:not(:last-child)::after { display: none; } .schedule-item { border-bottom: 1px solid rgba(201,168,76,0.15); } .schedule-item:last-child { border-bottom: none; } }