/* ========================================================================== CHRISTMAS LIGHTING MAGAZINE, /christmas-install-examples/ Loads after christmas-lights.css. Every rule is scoped to body.layout-christmas.cl-page-magazine so nothing reaches another page. The flip book is St.PageFlip (page-flip 2.0.7, MIT), which injects its own base .stf__* rules; christmas-magazine.js builds it from the plain stack. ========================================================================== */ /* Page proportions, width over height, measured from the rendered pages. */ body.layout-christmas.cl-page-magazine { --mag-r: 0.7727; } /* NAV. There is no photo hero here, so christmas-lead.js never adds .cl-nav-stuck; the nav wears the stuck state from the first pixel. */ body.layout-christmas.cl-page-magazine #nav { background-color: rgba(5, 10, 22, 0.92); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); box-shadow: 0 1px 0 rgba(157, 180, 232, 0.18); } @supports not (backdrop-filter: blur(1px)) { body.layout-christmas.cl-page-magazine #nav { background-color: #060d1e; } } /* HERO. A short text header that clears the fixed nav. Framework rules neutralized here: header.container{min-height:400px;overflow:hidden} and header h1{text-shadow;margin-bottom:0}. */ body.layout-christmas.cl-page-magazine header.cl-mag-hero { min-height: 0; overflow: visible; padding: calc(var(--cl-nav-h) + clamp(1.75rem, 3.5vw, 2.5rem)) 0 clamp(0.5rem, 1.5vw, 1rem); background-color: var(--cl-night-900); } body.layout-christmas.cl-page-magazine .cl-mag-hero h1 { font-family: var(--cl-font-display); font-size: clamp(2.25rem, 5.4vw, 4.4rem); font-weight: 600; line-height: 0.94; letter-spacing: 0.005em; text-transform: none; text-shadow: none; color: var(--cl-head); max-width: none; margin: 0 0 0.75rem; } body.layout-christmas.cl-page-magazine .cl-mag-hero .cl-deck { max-width: 64ch; margin: 0 0 0.85rem; } body.layout-christmas.cl-page-magazine .cl-mag-hero .cl-crumbs { width: auto; margin: 0; padding: 0; } /* THE BOOK BAND */ body.layout-christmas.cl-page-magazine .cl-mag { padding: clamp(1rem, 2.5vw, 1.75rem) 0 clamp(2.75rem, 6vw, 4.5rem); } /* THE STACK. What every visitor gets without JavaScript or when the library fails: the eight pages in order, one per row, at a readable width. */ body.layout-christmas.cl-page-magazine .cl-mag-frame { width: 100%; margin: 0 auto; } body.layout-christmas.cl-page-magazine .cl-mag-book { display: grid; gap: 1.25rem; max-width: 760px; margin: 0 auto; } body.layout-christmas.cl-page-magazine .cl-mag-page img { display: block; width: 100%; height: auto; margin: 0; background-color: var(--cl-night-800); box-shadow: var(--cl-shadow-photo); } /* THE BOOK. The frame is capped so the whole book fits the viewport height under the nav and the controls; the library sizes the pages to the frame. A spread on screens wider than they are tall, one page on upright screens (the same (orientation: portrait) test christmas-magazine.js uses). html.cl-mag-js (set in ) reserves the same box before the library arrives, with the pages hidden, so the stack never flashes and collapses. */ html.cl-mag-js body.layout-christmas.cl-page-magazine .cl-mag-frame, body.layout-christmas.cl-page-magazine .cl-mag-frame.is-book { max-width: max(280px, calc((100vh - var(--cl-nav-h) - 9rem) * var(--mag-r) * 2)); max-width: max(280px, calc((100svh - var(--cl-nav-h) - 9rem) * var(--mag-r) * 2)); } html.cl-mag-js body.layout-christmas.cl-page-magazine .cl-mag-frame:not(.is-book) .cl-mag-book { display: block; max-width: none; aspect-ratio: calc(var(--mag-r) * 2); background: radial-gradient(40% 60% at 50% 45%, rgba(255, 200, 110, 0.08), transparent 70%); } html.cl-mag-js body.layout-christmas.cl-page-magazine .cl-mag-frame:not(.is-book) .cl-mag-page { display: none; } @media (orientation: portrait) { html.cl-mag-js body.layout-christmas.cl-page-magazine .cl-mag-frame, body.layout-christmas.cl-page-magazine .cl-mag-frame.is-book { max-width: max(260px, calc((100vh - var(--cl-nav-h) - 9rem) * var(--mag-r))); max-width: max(260px, calc((100svh - var(--cl-nav-h) - 9rem) * var(--mag-r))); } html.cl-mag-js body.layout-christmas.cl-page-magazine .cl-mag-frame:not(.is-book) .cl-mag-book { aspect-ratio: var(--mag-r); } } body.layout-christmas.cl-page-magazine .cl-mag-frame.is-book .cl-mag-book { max-width: none; gap: 0; } /* The library writes its minWidth and minHeight settings onto the book as inline sizes. Here minWidth only chooses one page or two (see the JS), so the inline sizes are cancelled and the frame alone sets the size. */ body.layout-christmas.cl-page-magazine .cl-mag-book.stf__parent { min-width: 0 !important; min-height: 0 !important; } /* The library's own sheet misspells this class (.sft__wrapper). */ body.layout-christmas.cl-page-magazine .cl-mag-frame.is-book .stf__wrapper { position: relative; width: 100%; box-sizing: border-box; } /* In a spread the cover (right half) and the back page (left half) stand alone, so the book slides half a page toward the middle to center them. christmas-magazine.js sets the classes and --mag-shift, and adds .is-glide after the first placement so the page never slides in on load. */ body.layout-christmas.cl-page-magazine .cl-mag-frame.is-book .cl-mag-book.is-solo-front { transform: translateX(calc(var(--mag-shift, 25%) * -1)); } body.layout-christmas.cl-page-magazine .cl-mag-frame.is-book .cl-mag-book.is-solo-back { transform: translateX(var(--mag-shift, 25%)); } body.layout-christmas.cl-page-magazine .cl-mag-frame.is-book .cl-mag-book.is-glide { transition: transform 0.35s ease; } body.layout-christmas.cl-page-magazine .cl-mag-frame.is-book .cl-mag-page { background-color: var(--cl-night-800); } body.layout-christmas.cl-page-magazine .cl-mag-frame.is-book .cl-mag-page img { width: 100%; height: 100%; object-fit: cover; box-shadow: none; -webkit-user-drag: none; user-select: none; } /* CONTROLS. Navigation, not a price action, so never orange. */ body.layout-christmas.cl-page-magazine .cl-mag-bar { display: flex; align-items: center; justify-content: center; gap: 0.75rem; max-width: 520px; margin: 1.25rem auto 0; } body.layout-christmas.cl-page-magazine .cl-mag-bar[hidden], body.layout-christmas.cl-page-magazine .cl-mag-hint[hidden] { display: none; } body.layout-christmas.cl-page-magazine .cl-mag-btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 0.3rem; min-width: 96px; min-height: 48px; margin: 0; padding: 0.55rem 0.9rem; font-family: var(--cl-font-display); font-size: 1.3rem; font-weight: 600; line-height: 1; letter-spacing: 0.045em; text-transform: uppercase; color: #ffffff; background-color: var(--cl-night-600); border: 1px solid rgba(157, 180, 232, 0.4); border-radius: var(--cl-r-2); cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease; } body.layout-christmas.cl-page-magazine .cl-mag-btn span { padding-top: 0.12em; /* Teko sits high in its box */ } body.layout-christmas.cl-page-magazine .cl-mag-btn svg { flex: 0 0 auto; width: 20px; height: 20px; } body.layout-christmas.cl-page-magazine .cl-mag-btn:hover, body.layout-christmas.cl-page-magazine .cl-mag-btn:focus-visible { background-color: #1d3465; border-color: var(--cl-bulb); } body.layout-christmas.cl-page-magazine .cl-mag-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; } body.layout-christmas.cl-page-magazine .cl-mag-btn[aria-disabled="true"]:hover { background-color: var(--cl-night-600); border-color: rgba(157, 180, 232, 0.4); } body.layout-christmas.cl-page-magazine .cl-mag .cl-mag-count { flex: 1 1 auto; max-width: none; margin: 0; font-family: var(--cl-font-text); font-size: 1rem; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap; color: var(--cl-text-lead); } body.layout-christmas.cl-page-magazine .cl-mag .cl-mag-hint { max-width: none; margin: 0.75rem auto 0; font-size: 0.9rem; line-height: 1.5; text-align: center; color: var(--cl-text-dim); } /* Touch screens have no arrow keys to mention. */ @media (hover: none) { body.layout-christmas.cl-page-magazine .cl-mag-keys { display: none; } } /* THE NEXT STEP. The hub scopes these two rows to .cl-page-hub. */ body.layout-christmas.cl-page-magazine .cl-close .cl-citypick { margin: 0 0 1rem; } body.layout-christmas.cl-page-magazine .cl-callrow { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; max-width: none; margin: 0 0 0.6rem; } body.layout-christmas.cl-page-magazine .cl-callrow .cl-callpair { margin: 0; } /* FOOTER. As on the hub: the single-branch button row is hidden and the two labeled phone lines carry both branches. */ body.layout-christmas.cl-page-magazine #app > footer.container .company .buttons { display: none; } /* One amber ring on everything focusable, restated from the hub's scope. */ body.layout-christmas.cl-page-magazine :is(#app, #nav, #mobile-cta-bar, #cl-callsheet, .modal-deep-lawn) *:focus-visible { outline: 3px solid var(--cl-amber-hot) !important; outline-offset: 3px !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { body.layout-christmas.cl-page-magazine .cl-mag-btn, body.layout-christmas.cl-page-magazine .cl-mag-frame.is-book .cl-mag-book.is-glide { transition: none; } }