/* * 🎊 Holiday Theme — Ornamental Decorations Only * Applied via .theme-[holiday_name] class on * * The ornament appears as a decorative bottom border * on the super header bar. No colors/backgrounds/buttons changed. */ /* ══════════════════════════════════════════════════════════════ ORNAMENT — decorative bottom band on super header ══════════════════════════════════════════════════════════════ */ .holiday-ornament--header { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; height: 65px; background-image: var(--holiday-ornament-url); background-size: auto 100%; background-repeat: repeat-x; background-position: center center; pointer-events: none; z-index: 10; opacity: 0.85; transition: opacity 0.3s ease; /* Hide the ornament behind center logos — positions set by JS */ --mask-left: 28%; --mask-right: 72%; -webkit-mask-image: linear-gradient( to right, black 0%, black var(--mask-left), transparent calc(var(--mask-left) + 1%) , transparent calc(var(--mask-right) - 1%), black var(--mask-right), black 100% ); mask-image: linear-gradient( to right, black 0%, black var(--mask-left), transparent calc(var(--mask-left) + 1%), transparent calc(var(--mask-right) - 1%), black var(--mask-right), black 100% ); } /* Slightly smaller on tablets — remove center mask since logos are in burger menu */ @media (max-width: 1023px) { .holiday-ornament--header { height: 35px; -webkit-mask-image: none; mask-image: none; } } /* Smaller on phones */ @media (max-width: 640px) { .holiday-ornament--header { height: 25px; } } /* ══════════════════════════════════════════════════════════════ HEADER BACKGROUND SUPPORT Subtle backdrop behind Kaz logo (left) and icons (right) so they don't blend with the ornament ══════════════════════════════════════════════════════════════ */ /* Left — Kaz logo area */ .theme-nauryz #site-super-header .absolute.left-4 { background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 100%); border-radius: 8px; padding: 4px 8px; } /* Right — icons/lang area */ .theme-nauryz #super-right { background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 100%); border-radius: 8px; padding: 6px 12px; z-index: 15; } /* Keep the theme changes when scrolled (white header) */ /* Since the dark backgrounds remain, we must keep the contained text and logos white */ .theme-nauryz #site-super-header.scrolled .absolute.left-4 .logo-white { opacity: 1 !important; } .theme-nauryz #site-super-header.scrolled .absolute.left-4 .logo-dark { opacity: 0 !important; } .theme-nauryz #site-super-header.scrolled #super-right .header-icon, .theme-nauryz #site-super-header.scrolled #super-right .lang-link, .theme-nauryz #site-super-header.scrolled #super-right .slash { color: #ffffff !important; }