--section-background:#000 (Section background - #000) --border-color:#333 (Top border - dark gray) --heading-color:#fff (Heading text - #fff) --tab-border-color:#fff (Tab borders - #fff) --tab-text-color:#fff (Tab text - #fff) --tab-active-bg:#fff (Active tab background - #fff) --tab-active-text:#000 (Active tab text - #000) --placeholder-bg:#1a1a1a (Placeholder background - dark gray) --placeholder-text-color:#d1d5db (Placeholder text - light gray) .video-section { width:100%; border-top:1px solid var(--border-color,#333); padding:6rem 0; background-color:var(--section-background,#000); } .video-container { max-width:1200px; margin:0 auto; padding:0 2rem; } .video-heading { font-family:var(--heading-font,"Montserrat",sans-serif); font-size:3rem; font-weight:700; text-align:left; margin-bottom:3rem; line-height:1.2; color:var(--heading-color,#fff); } .tabs-wrapper { width:100%; } .tabs-list { display:inline-flex; align-items:center; justify-content:center; margin-bottom:2rem; gap:0; } .tab-trigger { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:0.5rem 1rem; font-size:1rem; font-weight:700; border:3px solid var(--tab-border-color,#fff); background-color:transparent; color:var(--tab-text-color,#fff); cursor:pointer; transition:all 0.2s ease; margin-left:-3px; position:relative; } .tab-trigger:first-child { margin-left:0; border-top-left-radius:9999px; border-bottom-left-radius:9999px; } .tab-trigger:last-child { border-top-right-radius:9999px; border-bottom-right-radius:9999px; } .tab-trigger:hover { background-color:hsla(0,0%,100%,.1) ; } .tab-trigger.active { background-color:var(--tab-active-bg,#fff); color:var(--tab-active-text,#000); z-index:1; } .tab-trigger:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ring-color,#3b82f6),0 0 0 4px var(--ring-offset-color,#fff); } .tab-trigger:disabled { pointer-events:none; opacity:0.5; } .tabs-content-wrapper { width:100%; position:relative; } .tab-content { width:100%; aspect-ratio:16 /9; margin-top:0.5rem; display:none; } .tab-content.active { display:block; animation:fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .tab-content:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ring-color,#3b82f6),0 0 0 4px var(--ring-offset-color,#fff); } .video-embed-wrapper { width:100%; height:100%; position:relative; background-color:#000; border-radius:0.5rem; overflow:hidden; } .video-iframe { width:100%; height:100%; border:none; } .video-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background-color:var(--placeholder-bg,#1a1a1a); border-radius:0.5rem; } .placeholder-text { color:var(--placeholder-text-color,#d1d5db); font-size:1.125rem; font-weight:500; } @media (max-width:768px) { .video-section { padding:4rem 0; } .video-container { padding:0 1.5rem; } .video-heading { font-size:2.25rem; margin-bottom:2rem; } .tabs-list { flex-wrap:wrap; justify-content:flex-start; gap:0.5rem; } .tab-trigger { margin-left:0; border-radius:9999px !important; border:2px solid var(--tab-border-color,#fff); font-size:0.875rem; padding:0.375rem 0.875rem; } .tab-content { margin-top:1rem; } } @media (max-width:480px) { .video-section { padding:3rem 0; } .video-container { padding:0 1rem; } .video-heading { font-size:1.875rem; margin-bottom:1.5rem; } .tab-trigger { font-size:0.75rem; padding:0.25rem 0.75rem; } .placeholder-text { font-size:1rem; } } @media (prefers-contrast:high) { .tab-trigger { border-width:4px; } } @media (prefers-reduced-motion:reduce) { .tab-content.active { animation:none; } .tab-trigger { transition:none; } } @media print { .video-section { page-break-inside:avoid; } .tabs-list { display:none; } .tab-content { display:block !important; page-break-inside:avoid; } .video-placeholder { border:1px solid #000; } }