/* ========================================================================= How Many to Christmas — main stylesheet Sections: tokens, base, header, hero + scene, animations, countdown, info/weekday grids, progress, quick-answer, facts, faq, future, footer, responsive, reduced-motion, time-of-day atmosphere. ========================================================================= */ /* ---- Design tokens (overridden by Customizer inline :root) ---- */ :root { --hmtc-deep-blue: #0b1e3f; --hmtc-snow: #f7fbff; --hmtc-red: #c62828; --hmtc-green: #1b5e3f; --hmtc-gold: #f0c14b; --hmtc-amber: #ffb347; --hmtc-ink: #12233f; --hmtc-muted: #5a6b85; --hmtc-card-bg: #ffffff; --hmtc-radius: 18px; --hmtc-radius-sm: 12px; --hmtc-shadow: 0 10px 30px rgba(11, 30, 63, 0.12); --hmtc-shadow-sm: 0 4px 14px rgba(11, 30, 63, 0.10); --hmtc-maxw: 1140px; --hmtc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; /* Sky gradient (adjusted by time-of-day classes on ) */ --hmtc-sky-top: #12315f; --hmtc-sky-bottom: #2a5a9c; } /* ---- Base ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body.hmtc-body { margin: 0; font-family: var(--hmtc-font); color: var(--hmtc-ink); background: var(--hmtc-snow); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; } a { color: var(--hmtc-red); } h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; } .hmtc-container { width: 100%; max-width: var(--hmtc-maxw); margin: 0 auto; padding: 0 20px; } .hmtc-container--narrow { max-width: 760px; } .hmtc-content-area { padding-top: 48px; padding-bottom: 64px; } .hmtc-section { padding: 56px 0; } .hmtc-section__title { font-size: clamp(1.5rem, 3.5vw, 2.15rem); text-align: center; color: var(--hmtc-deep-blue); } .hmtc-section__intro { text-align: center; color: var(--hmtc-muted); max-width: 620px; margin: 0 auto 2rem; } .hmtc-button { display: inline-block; background: var(--hmtc-red); color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 999px; font-weight: 700; box-shadow: var(--hmtc-shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .hmtc-button:hover, .hmtc-button:focus { transform: translateY(-2px); box-shadow: var(--hmtc-shadow); } :focus-visible { outline: 3px solid var(--hmtc-gold); outline-offset: 2px; border-radius: 4px; } /* ---- Header ---- */ .hmtc-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 30, 63, 0.82); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid rgba(255,255,255,0.08); } .hmtc-header__inner { max-width: var(--hmtc-maxw); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; } .hmtc-branding { display: flex; align-items: center; gap: 10px; } .hmtc-branding .custom-logo { border-radius: 8px; height: 40px; width: auto; } .hmtc-site-title { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.05rem; } .hmtc-site-title__icon { font-size: 1.3rem; } .hmtc-nav { margin-left: auto; } .hmtc-menu { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; } .hmtc-menu a { color: #eaf2ff; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 8px; display: block; transition: background .15s ease; } .hmtc-menu a:hover, .hmtc-menu a:focus { background: rgba(255,255,255,0.14); } .hmtc-header__controls { display: flex; align-items: center; } .hmtc-motion-toggle, .hmtc-nav-toggle { background: rgba(255,255,255,0.12); border: 0; color: #fff; cursor: pointer; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; } .hmtc-motion-toggle[aria-pressed="true"] { background: var(--hmtc-gold); color: var(--hmtc-deep-blue); } .hmtc-nav-toggle { display: none; position: relative; } .hmtc-nav-toggle__bar, .hmtc-nav-toggle__bar::before, .hmtc-nav-toggle__bar::after { content: ""; position: absolute; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .hmtc-nav-toggle__bar { position: static; display: block; } .hmtc-nav-toggle__bar::before { transform: translateY(-6px); } .hmtc-nav-toggle__bar::after { transform: translateY(6px); } /* ---- Hero ---- */ .hmtc-hero { position: relative; overflow: hidden; isolation: isolate; padding: 64px 20px 120px; background: linear-gradient(180deg, var(--hmtc-sky-top), var(--hmtc-sky-bottom)); color: #fff; text-align: center; min-height: 620px; } .hmtc-hero__content { position: relative; z-index: 5; max-width: 820px; margin: 0 auto; } .hmtc-hero__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--hmtc-gold); margin: 0 0 .6rem; } .hmtc-hero__title { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 900; text-shadow: 0 2px 20px rgba(0,0,0,.25); } .hmtc-hero__name { color: var(--hmtc-gold); margin-left: .3em; white-space: nowrap; } .hmtc-hero__name::before { content: ""; } .hmtc-hero__description { max-width: 640px; margin: 0 auto 1.8rem; font-size: 1.05rem; color: #e7f0ff; } .hmtc-hero__note { margin-top: 1.4rem; font-size: .9rem; color: #cfe0f7; } .hmtc-noscript { background: rgba(255,255,255,.12); border-radius: var(--hmtc-radius-sm); padding: 12px 16px; margin-top: 1rem; } .hmtc-xmas-banner { background: rgba(255,255,255,.14); border-radius: var(--hmtc-radius); padding: 20px; margin: 1rem auto 1.4rem; max-width: 560px; } .hmtc-xmas-banner__title { font-size: 1.8rem; font-weight: 900; color: var(--hmtc-gold); margin: 0; } .hmtc-xmas-banner__text { margin: .4rem 0 0; } /* ---- Countdown cards ---- */ .hmtc-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 680px; margin: 0 auto; } .hmtc-card--count { background: rgba(255,255,255,0.95); color: var(--hmtc-deep-blue); border-radius: var(--hmtc-radius); padding: 22px 8px 16px; box-shadow: var(--hmtc-shadow); display: flex; flex-direction: column; align-items: center; transition: transform .18s ease, box-shadow .18s ease; position: relative; overflow: hidden; } .hmtc-card--count::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--hmtc-red), var(--hmtc-gold), var(--hmtc-green)); } .hmtc-card--count:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(11,30,63,.22); } .hmtc-card__num { font-size: clamp(1.9rem, 6vw, 3rem); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .hmtc-card__label { text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; color: var(--hmtc-muted); font-weight: 700; margin-top: 4px; } .hmtc-card__num.is-flip { animation: hmtc-flip .35s ease; } @keyframes hmtc-flip { 0% { transform: translateY(-30%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* ---- Info grid (multi-format) ---- */ .hmtc-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; } .hmtc-info-card { background: var(--hmtc-card-bg); border-radius: var(--hmtc-radius); padding: 22px; box-shadow: var(--hmtc-shadow-sm); text-align: center; display: flex; flex-direction: column; gap: 6px; border: 1px solid rgba(11,30,63,.05); transition: transform .18s ease, box-shadow .18s ease; } .hmtc-info-card:hover { transform: translateY(-3px); box-shadow: var(--hmtc-shadow); } .hmtc-info-card--wide { grid-column: 1 / -1; background: linear-gradient(135deg, var(--hmtc-green), #14432e); color: #fff; } .hmtc-info-card__value { font-size: 1.9rem; font-weight: 900; color: var(--hmtc-deep-blue); font-variant-numeric: tabular-nums; } .hmtc-info-card--wide .hmtc-info-card__value { color: #fff; } .hmtc-info-card__label { color: var(--hmtc-muted); font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .hmtc-info-card--wide .hmtc-info-card__label { color: #d7f0e2; } /* ---- Weekday grid ---- */ .hmtc-weekdays { background: #eef4fc; } .hmtc-weekday-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; } .hmtc-weekday-card { background: #fff; border-radius: var(--hmtc-radius-sm); padding: 18px 12px; text-align: center; box-shadow: var(--hmtc-shadow-sm); transition: transform .15s ease; } .hmtc-weekday-card:hover { transform: translateY(-3px); } .hmtc-weekday-card--accent { background: var(--hmtc-red); color: #fff; } .hmtc-weekday-card__value { display: block; font-size: 1.7rem; font-weight: 900; color: var(--hmtc-deep-blue); font-variant-numeric: tabular-nums; } .hmtc-weekday-card--accent .hmtc-weekday-card__value { color: #fff; } .hmtc-weekday-card__label { font-size: .82rem; color: var(--hmtc-muted); font-weight: 600; } .hmtc-weekday-card--accent .hmtc-weekday-card__label { color: #ffe1e1; } /* ---- Progress ---- */ .hmtc-progress-section { background: linear-gradient(180deg, #0b1e3f, #123a6b); color: #fff; } .hmtc-progress-section .hmtc-section__title { color: #fff; } .hmtc-progress-text { text-align: center; font-size: 1.15rem; margin-bottom: 1.4rem; } .hmtc-progress-text strong { color: var(--hmtc-gold); } .hmtc-progress { max-width: 760px; margin: 0 auto; } .hmtc-progress__track { position: relative; height: 26px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; border: 2px dashed rgba(255,255,255,.35); } .hmtc-progress__fill { position: relative; height: 100%; border-radius: 999px; background: repeating-linear-gradient(45deg, var(--hmtc-red) 0 14px, #e04b4b 14px 28px); transition: width .6s ease; min-width: 26px; } .hmtc-progress__sleigh { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); } .hmtc-progress-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 760px; margin: 1.6rem auto 0; } .hmtc-progress-meta__item { background: rgba(255,255,255,.10); border-radius: var(--hmtc-radius-sm); padding: 12px 14px; display: flex; flex-direction: column; } .hmtc-progress-meta__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #b9cdea; } .hmtc-progress-meta__item span:last-child { font-weight: 800; font-size: 1.05rem; } /* ---- Quick answer + facts ---- */ .hmtc-quick-answer__text { font-size: 1.1rem; text-align: center; color: var(--hmtc-ink); } .hmtc-quick-answer__text strong { color: var(--hmtc-red); } .hmtc-facts { background: #fff8ec; } .hmtc-facts-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .hmtc-fact-card { background: #fff; border-radius: var(--hmtc-radius); padding: 20px; box-shadow: var(--hmtc-shadow-sm); border-left: 5px solid var(--hmtc-gold); } .hmtc-fact-card__text { font-size: 1rem; font-weight: 600; margin: 0; color: var(--hmtc-ink); line-height: 1.5; } /* ---- FAQ accordion ---- */ .hmtc-accordion { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .hmtc-accordion__item { background: #fff; border-radius: var(--hmtc-radius-sm); box-shadow: var(--hmtc-shadow-sm); overflow: hidden; border: 1px solid rgba(11,30,63,.06); } .hmtc-accordion__heading { margin: 0; } .hmtc-accordion__trigger { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.05rem; font-weight: 700; color: var(--hmtc-deep-blue); } .hmtc-accordion__icon { position: relative; width: 18px; height: 18px; flex: none; } .hmtc-accordion__icon::before, .hmtc-accordion__icon::after { content: ""; position: absolute; background: var(--hmtc-red); border-radius: 2px; transition: transform .2s ease; } .hmtc-accordion__icon::before { top: 8px; left: 0; width: 18px; height: 2px; } .hmtc-accordion__icon::after { left: 8px; top: 0; width: 2px; height: 18px; } .hmtc-accordion__trigger[aria-expanded="true"] .hmtc-accordion__icon::after { transform: scaleY(0); } /* Panels are OPEN by default so content is always visible without JS. navigation.js adds .is-enhanced and then collapses them via inline max-height, so no-JS visitors and crawlers always see full answers. */ .hmtc-accordion__panel { overflow: hidden; transition: max-height .25s ease; } .hmtc-accordion.is-enhanced .hmtc-accordion__panel { max-height: 0; } .hmtc-accordion__content { padding: 0 20px 18px; color: var(--hmtc-muted); } .hmtc-accordion__content p { margin: 0; } /* ---- Future tools ---- */ .hmtc-future { background: #eef4fc; } .hmtc-future-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .hmtc-future-card { background: #fff; border-radius: var(--hmtc-radius); padding: 24px; text-align: center; box-shadow: var(--hmtc-shadow-sm); position: relative; opacity: .96; } .hmtc-future-card__icon { font-size: 2rem; display: block; margin-bottom: 8px; } .hmtc-future-card__title { font-size: 1.1rem; color: var(--hmtc-deep-blue); } .hmtc-future-card__desc { color: var(--hmtc-muted); font-size: .92rem; margin: 0 0 10px; } .hmtc-badge { display: inline-block; background: var(--hmtc-gold); color: var(--hmtc-deep-blue); font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } .hmtc-badge--live { background: var(--hmtc-red); color: #fff; } .hmtc-future-card--live { padding: 0; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .hmtc-future-card--live:hover { transform: translateY(-4px); box-shadow: var(--hmtc-shadow); } .hmtc-future-card__link { display: block; padding: 24px; text-decoration: none; color: inherit; } .hmtc-future-card--live .hmtc-future-card__title { color: var(--hmtc-red); } /* ---- Footer ---- */ .hmtc-footer { background: var(--hmtc-deep-blue); color: #dfe9f8; padding: 48px 20px 24px; } .hmtc-footer__inner { max-width: var(--hmtc-maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } .hmtc-footer__logo { font-size: 1.6rem; } .hmtc-footer__name { font-weight: 800; font-size: 1.1rem; color: #fff; display: block; margin: 6px 0; } .hmtc-footer__tagline { color: #a9c0e2; font-size: .92rem; margin: 0; } .hmtc-footer__menu { list-style: none; margin: 0; padding: 0; columns: 2; } .hmtc-footer__menu a { color: #cdddf3; text-decoration: none; display: block; padding: 4px 0; } .hmtc-footer__menu a:hover { color: #fff; text-decoration: underline; } .hmtc-footer__social-label { display: block; font-weight: 700; color: #fff; margin-bottom: 8px; } .hmtc-social-links { display: flex; gap: 8px; } .hmtc-social-link { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; } .hmtc-social-link:hover { background: var(--hmtc-red); } .hmtc-footer__bottom { max-width: var(--hmtc-maxw); margin: 28px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; } .hmtc-footer__message { color: #fff; font-weight: 600; margin: 0 0 6px; } .hmtc-footer__copy { color: #90a8cd; font-size: .85rem; margin: 0; } /* ========================================================================= Decorative scene + animations ========================================================================= */ .hmtc-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hmtc-scene__sky { position: absolute; inset: 0; } /* Stars */ .hmtc-stars { position: absolute; inset: 0; } .hmtc-star { position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%; opacity: .8; box-shadow: 0 0 6px rgba(255,255,255,.8); animation: hmtc-twinkle 4s ease-in-out infinite; } @keyframes hmtc-twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } } .hmtc-star--1{top:8%;left:12%;animation-delay:.2s}.hmtc-star--2{top:14%;left:32%;animation-delay:1.1s} .hmtc-star--3{top:6%;left:52%;animation-delay:.6s}.hmtc-star--4{top:20%;left:72%;animation-delay:1.8s} .hmtc-star--5{top:10%;left:86%;animation-delay:.9s}.hmtc-star--6{top:26%;left:18%;animation-delay:2.2s} .hmtc-star--7{top:30%;left:44%;animation-delay:.4s}.hmtc-star--8{top:22%;left:60%;animation-delay:1.5s} .hmtc-star--9{top:34%;left:80%;animation-delay:2.6s}.hmtc-star--10{top:12%;left:4%;animation-delay:1.3s} .hmtc-star--11{top:40%;left:26%;animation-delay:.7s}.hmtc-star--12{top:38%;left:66%;animation-delay:2s} .hmtc-star--13{top:16%;left:48%;animation-delay:3s}.hmtc-star--14{top:28%;left:92%;animation-delay:.5s} .hmtc-star--15{top:44%;left:8%;animation-delay:1.7s}.hmtc-star--16{top:18%;left:24%;animation-delay:2.4s} .hmtc-star--17{top:36%;left:36%;animation-delay:1s}.hmtc-star--18{top:8%;left:70%;animation-delay:2.8s} /* Moon */ .hmtc-moon { position: absolute; top: 40px; right: 8%; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffef2, #e9edc9); box-shadow: 0 0 40px rgba(255,255,220,.5); opacity: .9; } /* Sleigh */ .hmtc-sleigh { position: absolute; top: 12%; left: -140px; color: rgba(255,255,255,.9); z-index: 3; opacity: 0; } .hmtc-sleigh.is-flying { animation: hmtc-sleigh-cross 9s linear; } @keyframes hmtc-sleigh-cross { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .95; } 92% { opacity: .95; } 100% { transform: translate(calc(100vw + 200px), -30px); opacity: 0; } } /* Hills */ .hmtc-hills { position: absolute; bottom: 0; left: 0; width: 100%; height: 220px; } .hmtc-hills__back { fill: #cddcf0; opacity: .35; } .hmtc-hills__front { fill: #eaf3ff; opacity: .55; } /* Village */ .hmtc-village { position: absolute; bottom: 24px; left: 0; right: 0; display: flex; align-items: flex-end; justify-content: center; gap: 24px; z-index: 2; } .hmtc-tree { transform-origin: bottom center; } .hmtc-tree--1 { animation: hmtc-sway 6s ease-in-out infinite; } .hmtc-tree--2 { animation: hmtc-sway 7s ease-in-out infinite reverse; } @keyframes hmtc-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } } .hmtc-tree-star { animation: hmtc-twinkle 3s ease-in-out infinite; } .hmtc-tree-light { fill: var(--hmtc-red); animation: hmtc-blink 2.4s steps(1) infinite; } .hmtc-tree-light--a { fill: var(--hmtc-gold); animation-delay: 0s; } .hmtc-tree-light--b { fill: var(--hmtc-amber); animation-delay: .8s; } .hmtc-tree-light--c { fill: #7ee0a4; animation-delay: 1.6s; } @keyframes hmtc-blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: .25; } } .hmtc-window { animation: hmtc-glow 5s ease-in-out infinite; } @keyframes hmtc-glow { 0%, 100% { opacity: .8; } 50% { opacity: 1; } } /* Chimney smoke */ .hmtc-smoke { position: relative; width: 0; height: 0; } .hmtc-smoke span { position: absolute; bottom: 90px; left: 8px; width: 10px; height: 10px; background: rgba(255,255,255,.5); border-radius: 50%; opacity: 0; animation: hmtc-smoke 4s ease-in infinite; } .hmtc-smoke span:nth-child(2) { animation-delay: 1.3s; } .hmtc-smoke span:nth-child(3) { animation-delay: 2.6s; } @keyframes hmtc-smoke { 0% { transform: translateY(0) scale(.6); opacity: 0; } 30% { opacity: .5; } 100% { transform: translateY(-60px) translateX(-14px) scale(1.6); opacity: 0; } } /* Snow */ .hmtc-snowdrift { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, rgba(247,251,255,0), var(--hmtc-snow)); border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 4; } .hmtc-snow { position: absolute; inset: 0; overflow: hidden; z-index: 3; } .hmtc-flake { position: absolute; top: -10px; color: #fff; opacity: .9; user-select: none; will-change: transform; animation: hmtc-fall linear infinite; } @keyframes hmtc-fall { 0% { transform: translateY(-10px) translateX(0) rotate(0deg); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(105vh) translateX(40px) rotate(360deg); opacity: .2; } } /* ---- Village layout + original cartoon characters ---- */ .hmtc-village { gap: 8px; flex-wrap: nowrap; } .hmtc-char { align-self: flex-end; } .hmtc-cabin-wrap { position: relative; display: inline-flex; align-items: flex-end; } /* Shared idle motions */ @keyframes hmtc-wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-24deg); } 55% { transform: rotate(10deg); } 80% { transform: rotate(-6deg); } } @keyframes hmtc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes hmtc-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.12); } } @keyframes hmtc-hatsway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } } @keyframes hmtc-flap { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg); } } /* Blinking eyes (shared) */ .hmtc-blink { transform-box: fill-box; transform-origin: center; animation: hmtc-blink 5s ease-in-out infinite; } /* Hat tip + pom sway (shared) */ .hmtc-hat-tip, .hmtc-hat-pom { transform-box: fill-box; transform-origin: 0% 100%; animation: hmtc-hatsway 3.6s ease-in-out infinite; } /* Snowman: gentle bob, waving twig, flapping scarf */ .hmtc-snowman { animation: hmtc-bob 4.6s ease-in-out infinite; } .hmtc-snowman__wave { transform-box: fill-box; transform-origin: 0% 100%; animation: hmtc-wave 2.3s ease-in-out infinite; } .hmtc-scarf { transform-box: fill-box; transform-origin: 50% 0%; animation: hmtc-flap 2.9s ease-in-out infinite; } /* Gift-wrapping elf that peeks up + ties a bow */ .hmtc-elf { animation: hmtc-peek 6s ease-in-out infinite; } .hmtc-elf__body { transform-box: fill-box; transform-origin: 50% 100%; } @keyframes hmtc-peek { 0%, 20%, 100% { transform: translateY(16px); } 34%, 80% { transform: translateY(0); } } .hmtc-elf__arm { transform-box: fill-box; transform-origin: 100% 0%; animation: hmtc-tie 1.5s ease-in-out infinite; } .hmtc-elf__arm--2 { transform-origin: 0% 0%; animation-delay: .2s; } @keyframes hmtc-tie { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-16deg); } } /* Waving Santa */ .hmtc-santa { animation: hmtc-bob 5.2s ease-in-out infinite .5s; } .hmtc-santa__wave { transform-box: fill-box; transform-origin: 0% 100%; animation: hmtc-wave 2.5s ease-in-out infinite .3s; } /* Reindeer + Santa's arm in the flying sleigh */ .hmtc-reindeer { transform-box: fill-box; transform-origin: 50% 100%; animation: hmtc-bob 1.3s ease-in-out infinite; } .hmtc-sleigh-santa-arm { transform-box: fill-box; transform-origin: 0% 100%; animation: hmtc-wave 1.8s ease-in-out infinite; } /* ---- Personalized countdown ---- */ .hmtc-personalize { margin: 1.5rem auto 1.8rem; max-width: 480px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: var(--hmtc-radius); padding: 18px 20px; box-shadow: var(--hmtc-shadow-sm); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hmtc-personalize.is-personalized { border-color: var(--hmtc-gold); box-shadow: 0 0 0 2px rgba(240,193,75,.35), var(--hmtc-shadow-sm); } .hmtc-personalize__greeting { margin: 0 0 14px; font-weight: 800; font-size: 1.15rem; color: #fff; } .hmtc-personalize.is-personalized .hmtc-personalize__greeting { color: var(--hmtc-gold); } .hmtc-personalize__label { display: block; font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 8px; } .hmtc-personalize__row { display: flex; gap: 8px; flex-wrap: wrap; } .hmtc-personalize__input { flex: 1 1 150px; min-width: 0; border: 0; border-radius: 999px; padding: 11px 16px; font-size: 1rem; background: #fff; color: var(--hmtc-ink); } .hmtc-personalize__btn, .hmtc-personalize__clear { border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 800; cursor: pointer; font-size: .95rem; } .hmtc-personalize__btn { background: var(--hmtc-red); color: #fff; } .hmtc-personalize__btn:hover, .hmtc-personalize__btn:focus { background: #a81f1f; } .hmtc-personalize__clear { background: rgba(255,255,255,.2); color: #fff; } /* ---- Scroll reveal (added by JS; no-JS shows everything) ---- */ .hmtc-reveal { opacity: 0; transform: translateY(24px); } .hmtc-reveal.is-visible { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; } /* ========================================================================= Time-of-day atmosphere (colors only; toggled by JS class on ) ========================================================================= */ body.hmtc-time-morning { --hmtc-sky-top: #7ba7d9; --hmtc-sky-bottom: #cfe3f7; } body.hmtc-time-morning .hmtc-hero { color: #0b1e3f; } body.hmtc-time-morning .hmtc-hero__description { color: #1a3454; } body.hmtc-time-afternoon { --hmtc-sky-top: #3f83d6; --hmtc-sky-bottom: #a9d3f5; } body.hmtc-time-afternoon .hmtc-hero { color: #0b1e3f; } body.hmtc-time-afternoon .hmtc-hero__description { color: #16324f; } body.hmtc-time-evening { --hmtc-sky-top: #3a2c66; --hmtc-sky-bottom: #7b5ea6; } body.hmtc-time-night { --hmtc-sky-top: #071433; --hmtc-sky-bottom: #12315f; } /* Stars fade during bright daytime */ body.hmtc-time-morning .hmtc-stars, body.hmtc-time-afternoon .hmtc-stars, body.hmtc-time-morning .hmtc-moon, body.hmtc-time-afternoon .hmtc-moon { opacity: 0; } /* ========================================================================= Responsive ========================================================================= */ @media (max-width: 900px) { .hmtc-footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 782px) { .hmtc-nav-toggle { display: inline-flex; order: 3; margin-left: auto; } .hmtc-nav { margin-left: 0; } .hmtc-header__inner { flex-wrap: wrap; } .hmtc-menu { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--hmtc-deep-blue); padding: 8px; max-height: 0; overflow: hidden; transition: max-height .25s ease; } .hmtc-menu a { padding: 12px 14px; border-radius: 8px; } .hmtc-nav.is-open .hmtc-menu { max-height: 60vh; overflow: auto; } .hmtc-footer__inner { grid-template-columns: 1fr; text-align: center; } .hmtc-footer__menu { columns: 2; text-align: left; max-width: 320px; margin: 0 auto; } .hmtc-social-links { justify-content: center; } } @media (max-width: 560px) { .hmtc-hero { min-height: 560px; padding: 40px 16px 100px; } .hmtc-countdown { grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 340px; } .hmtc-section { padding: 44px 0; } .hmtc-moon { width: 52px; height: 52px; top: 24px; } /* Reduce decorative density on small screens: keep snowman, cabin, one tree */ .hmtc-tree--2, .hmtc-elf, .hmtc-santa { display: none; } .hmtc-village { gap: 4px; } } @media (max-width: 380px) { .hmtc-snowman { display: none; } } @media (max-width: 380px) { .hmtc-card__num { font-size: 1.7rem; } } /* ========================================================================= Reduced motion + manual animation-off ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hmtc-scene *, .hmtc-card__num.is-flip, .hmtc-progress__fill { animation: none !important; transition: none !important; transform: none !important; } .hmtc-flake, .hmtc-sleigh { display: none !important; } /* Scroll-reveal must never hide content when motion is reduced. */ .hmtc-reveal { opacity: 1 !important; transform: none !important; } } body.hmtc-motion-off .hmtc-scene *, body.hmtc-motion-off .hmtc-card__num.is-flip { animation: none !important; } body.hmtc-motion-off .hmtc-flake, body.hmtc-motion-off .hmtc-sleigh { display: none !important; } body.hmtc-motion-off .hmtc-reveal { opacity: 1 !important; transform: none !important; }