/* ============================================================ VETos — automated seasonal themes Activated by (set pre-paint by theme-init, decorations built by /theme.js). Rich but on-brand: brand identity and primary CTAs stay intact; themes add a top accent line, a tinted greeting chip and a tasteful decoration layer. ============================================================ */ /* Per-theme accent palette */ [data-theme="festive"] { --th-accent:#e23b4e; --th-accent-2:#1f9d57; } [data-theme="new-year"] { --th-accent:#d9b441; --th-accent-2:#7c5cff; } [data-theme="easter"] { --th-accent:#ef9ec6; --th-accent-2:#9ad6c3; } [data-theme="australia-day"] { --th-accent:#1f9d57; --th-accent-2:#d9b441; } [data-theme="anzac"] { --th-accent:#b3122b; --th-accent-2:#5e1019; } [data-theme="waitangi"] { --th-accent:#0a7d5a; --th-accent-2:#d9b441; } [data-theme="matariki"] { --th-accent:#6aa6ff; --th-accent-2:#d9b441; } /* Thin seasonal accent line pinned above the (fixed) nav — no layout shift */ .theme-topline { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 101; background: linear-gradient(90deg, var(--th-accent), var(--th-accent-2)); pointer-events: none; } /* Dismissible greeting chip */ .theme-chip { position: fixed; left: 18px; bottom: 18px; z-index: 96; display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 14px; border-radius: 999px; background: rgba(11,20,48,0.88); color: #fff; border: 1px solid rgba(255,255,255,0.14); border-left: 3px solid var(--th-accent); box-shadow: 0 14px 36px -12px rgba(11,20,48,0.55); font-family: var(--font-body, system-ui); font-size: 14px; line-height: 1.2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); max-width: calc(100vw - 36px); animation: th-chip-in 0.5s cubic-bezier(0.16,1,0.3,1) both; } .theme-chip.solemn { background: rgba(20,8,10,0.9); border-left-color: var(--th-accent); } .theme-chip .th-emoji { font-size: 16px; line-height: 1; } .theme-chip .th-label { font-weight: 500; } .theme-chip .th-x { background: none; border: 0; color: rgba(255,255,255,0.65); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; margin-left: 4px; } .theme-chip .th-x:hover { color: #fff; } @keyframes th-chip-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .theme-chip { font-size: 13px; left: 12px; bottom: 12px; } } /* Decoration overlay — sits over the page but never blocks interaction */ .theme-decor { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; } .theme-decor .tp { position: absolute; top: -6vh; border-radius: 50%; will-change: transform; } /* Falling particles (snow / petals / sparkle) */ .decor-snow .tp { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.6); opacity: 0.9; animation: th-fall linear infinite; } .decor-petals .tp { background: radial-gradient(circle at 30% 30%, #fff, var(--th-accent)); border-radius: 60% 0 60% 0; opacity: 0.85; animation: th-fall linear infinite; } .decor-sparkle .tp { background: var(--th-accent); box-shadow: 0 0 8px var(--th-accent); animation: th-fall linear infinite, th-twinkle 2.4s ease-in-out infinite; } /* Twinkling stars (Matariki) — stay near the top, twinkle in place */ .decor-stars .tp { background: #fff; box-shadow: 0 0 8px var(--th-accent), 0 0 2px var(--th-accent-2); animation: th-twinkle 3s ease-in-out infinite; } @keyframes th-fall { 0% { transform: translate3d(0, -6vh, 0) rotate(0deg); } 100% { transform: translate3d(var(--dx, 0), 112vh, 0) rotate(360deg); } } @keyframes th-twinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } } /* Respect reduced-motion: no moving decoration */ @media (prefers-reduced-motion: reduce) { .theme-decor { display: none; } }