/* ========================================================= The Charter Advantage — Episodes Light Theme (scoped) Scope trigger: This file centralizes all episode/subscribe page overrides. ========================================================= */ /* ---------- Light tokens override ---------- */ html.ca--episode { --bg:#ffffff; --panel:#ffffff; --panel-2:#ffffff; --text:#111827; /* gray-900 */ --muted:#6b7280; /* gray-600 */ --line:#e5e7eb; /* gray-200 */ --brand:#2b85ff; /* blue */ --brand-2:#11b981; /* green */ --chip:#f3f4f6; /* gray-100 */ --shadow:0 10px 30px rgba(17,24,39,.06); } /* Force key surfaces light */ html.ca--episode body.ca { background:#fff !important; color:var(--text) !important; } html.ca--episode .nav { background:#fff !important; border-bottom:1px solid var(--line) !important; } html.ca--episode .panel { background:#fff !important; border:1px solid var(--line) !important; box-shadow:var(--shadow) !important; } html.ca--episode .footer { border-top:1px solid var(--line) !important; } /* Buttons / fields */ html.ca--episode .btn--ghost { background:#fff; border-color:#d1d5db; color:#111827; } html.ca--episode .btn--ghost:hover{ background:#f9fafb } html.ca--episode .btn--primary{ background:var(--brand); color:#fff; } html.ca--episode .field{ background:#fff; border-color:#d1d5db; color:#111827; } /* Typography */ html.ca--episode article h1{ font-size:2rem; line-height:1.25; margin:.25rem 0 .75rem } html.ca--episode article h2{ font-size:1.375rem; margin:1.25rem 0 .5rem } html.ca--episode article p{ font-size:1.0625rem } html.ca--episode .byline{ font-size:.95rem; color:var(--muted); margin-bottom:.75rem } html.ca--episode .muted{ color:var(--muted) } html.ca--episode .hr{ height:1px; background:var(--line); margin:12px 0 } /* Media */ html.ca--episode article figure img{ border-radius:12px; border:1px solid var(--line) } html.ca--episode article figure figcaption{ color:var(--muted) } /* Tags / pills for light mode */ html.ca--episode .tag{ background:#f9fafb; border-color:var(--line); color:#4b5563 } html.ca--episode .pill{ border-color:#e5e7eb } html.ca--episode .pill--conviction{ background:#fff5f2; color:#b45309; border-color:#fed7aa } html.ca--episode .pill--targeting{ background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe } html.ca--episode .pill--excellence{ background:#fffbeb; color:#b45309; border-color:#fde68a } html.ca--episode .pill--results{ background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe } /* ---------- Light card overrides (fix dark defaults) ---------- */ html.ca--episode .card{ background:#ffffff !important; border:1px solid var(--line) !important; box-shadow:0 6px 18px rgba(17,24,39,.06) !important; } html.ca--episode .card h3, html.ca--episode .card h3 a{ color:var(--text) !important; text-decoration:none } html.ca--episode .card p{ color:var(--muted) !important } /* ---------- Read / Watch segmented control ---------- */ html.ca--episode .view-switch{ position:sticky; top:66px; z-index:5; background:#fff; padding:8px 0; margin:10px 0 14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } html.ca--episode .seg{ display:flex; gap:8px; align-items:center; flex-wrap:wrap } html.ca--episode .seg__wrap{ display:inline-flex; gap:6px; padding:6px; border-radius:14px; background:#f3f4f6; border:1px solid #e5e7eb; box-shadow:0 6px 18px rgba(17,24,39,.06); } html.ca--episode .seg__btn{ appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background:transparent; font-weight:800; letter-spacing:.2px; color:#6b7280; transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease; } html.ca--episode .seg__btn:hover{ color:#374151 } html.ca--episode .seg__btn:focus-visible{ outline:3px solid rgba(43,133,255,.35); outline-offset:2px } html.ca--episode .seg__btn[aria-selected="true"]{ background:#ffffff; color:#111827; transform:translateY(-1px); box-shadow:0 10px 22px rgba(17,24,39,.10); } html.ca--episode .seg__icon{ width:18px; height:18px; display:inline-block } html.ca--episode .seg__badge{ display:inline-flex; align-items:center; font-size:.8rem; font-weight:700; padding:4px 8px; border-radius:999px; background:#eaf2ff; color:#1d4ed8; } html.ca--episode .hint{ display:flex; align-items:center; gap:8px; color:#374151; font-weight:700; padding:8px 10px; border-radius:10px; background:#fff7ed; border:1px solid #fed7aa } html.ca--episode .hint__icon{ width:16px; height:16px } /* Tab panels + video */ html.ca--episode .tabpanel{ display:none } html.ca--episode .tabpanel[data-active="true"]{ display:block } html.ca--episode .video-frame{ width:100%; aspect-ratio:16/9; border:none; border-radius:12px; border:1px solid var(--line) } /* ---------- Icon Info Cards (reusable) ---------- */ html.ca--episode .icards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:12px } html.ca--episode .icard{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 10px 28px rgba(17,24,39,.06); overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; } html.ca--episode .icard:hover{ transform:translateY(-1px); box-shadow:0 18px 36px rgba(17,24,39,.10) } html.ca--episode .icard::after{ content:""; position:absolute; inset:-20% -10% auto auto; height:160%; width:60%; background-image: radial-gradient(#eaeef7 1px, transparent 1px); background-size:10px 10px; opacity:.55; pointer-events:none; } html.ca--episode .icard__icon{ position:relative; flex:0 0 auto; width:56px; height:56px; border-radius:14px; background:linear-gradient(175deg,#6f77ff 0%,#8a59ff 100%); display:grid; place-items:center; color:#fff; box-shadow:0 8px 22px rgba(109,104,255,.35); } html.ca--episode .icard__icon svg{ width:26px; height:26px } html.ca--episode .icard__icon::after{ content:""; position:absolute; right:-6px; bottom:-6px; width:18px; height:18px; border-radius:999px; background:#10b981; box-shadow:0 4px 10px rgba(16,185,129,.4); border:2px solid #fff; } html.ca--episode .icard__title{ margin:0 0 4px; font-weight:800; color:var(--text) } html.ca--episode .icard__copy{ margin:0; color:var(--muted) } /* Make icon cards linkable */ html.ca--episode a.icard{ text-decoration:none; color:inherit } /* ---------- CTA panel friendliness ---------- */ html.ca--episode .cta{ background:#fff; border:1px solid var(--line); box-shadow:0 10px 30px rgba(17,24,39,.06) } /* ---------- FIGURE / IMAGE SAFEGUARDS ---------- */ html.ca--episode article figure{ margin: 0 0 12px; border-radius: 12px; overflow: hidden; /* clip any overflow */ border: 1px solid var(--line); } html.ca--episode article figure img{ display: block; width: 100%; height: auto; } /* ---------- ICON INFO CARDS: PREV/NEXT MODE ---------- */ /* Use flexible widths so one card never becomes full width */ html.ca--episode .icards[data-mode="prev-next"]{ display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; } html.ca--episode .icards[data-mode="prev-next"] .icard{ width: clamp(280px, 46vw, 640px); /* good single-card size, caps width */ } /* On very small screens, let it fill but keep padding/shape */ @media (max-width: 520px){ html.ca--episode .icards[data-mode="prev-next"] .icard{ width: 100%; } } /* Optional: visually balance single-card rows by centering if you prefer */ @supports(selector(:has(*))){ html.ca--episode .icards[data-mode="prev-next"]:not(:has(.icard:nth-child(2))){ justify-content: center; /* center when only one card exists */ } } /* ---------- CTA PANEL (light) ---------- */ html.ca--episode .cta{ margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(17,24,39,.06); display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; } html.ca--episode .cta__copy .kicker{ font-size: .8rem; letter-spacing: .12em; font-weight: 800; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; } html.ca--episode .cta__actions{ display: flex; gap: 10px; }