/* * Festival theming — applied automatically by festival.js when today is * within 3 days before / 1 day after a major Indian festival. Pure CSS: * the JS sets CSS custom properties on , this stylesheet uses them. */ #festival-strip { position: sticky; top: 0; z-index: 1100; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: linear-gradient( 90deg, var(--festival-primary, #FF6F00), var(--festival-accent, #FFC107) ); color: #fff; font-weight: 600; letter-spacing: 0.2px; font-size: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); animation: fs-slide-in 360ms ease-out; } #festival-strip .fs-emoji { font-size: 20px; line-height: 1; } #festival-strip .fs-text { flex: 1 1 auto; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } #festival-strip .fs-tag { font-size: 12px; font-weight: 500; opacity: 0.9; } #festival-strip .fs-close { background: rgba(255, 255, 255, 0.18); border: 0; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; transition: background 160ms ease; } #festival-strip .fs-close:hover { background: rgba(255, 255, 255, 0.32); } @keyframes fs-slide-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } } /* Subtle festive halo on the page when active. */ body.festival { background-image: radial-gradient( circle at top right, color-mix(in srgb, var(--festival-primary, #FF6F00) 8%, transparent), transparent 60% ), radial-gradient( circle at bottom left, color-mix(in srgb, var(--festival-accent, #FFC107) 8%, transparent), transparent 55% ); } /* Ensure the strip pushes the sticky nav down inside the visual flow. */ body.has-festival-strip #mainNav { top: 0; } /* Mobile niceties for the strip. */ @media (max-width: 640px) { #festival-strip { padding: 9px 12px; font-size: 13px; } #festival-strip .fs-tag { display: none; } } /* Respect dark mode when the host page has it. */ @media (prefers-color-scheme: dark) { body.festival { background-image: radial-gradient( circle at top right, color-mix(in srgb, var(--festival-primary, #FF6F00) 18%, transparent), transparent 60% ), radial-gradient( circle at bottom left, color-mix(in srgb, var(--festival-accent, #FFC107) 14%, transparent), transparent 55% ); } }