/* port-se.css — Astro-port companion stylesheet for the two Special Edition * single pages (/special-editions/christmas/ + /special-editions/home/). * Loaded AFTER styles-se.css and the per-edition CSS (01_christmas.css / * 02_home.css), which are kept verbatim. These rules replace the 2012 jQuery * subsystems (se.js inline scripts, curtain.1.4.1.js, biggerlink) with modern * CSS per spec/special.md §2.5; the leftover runtime lives in * src/scripts/se.js (loader flip, index toggle, carousel arrows). */ /* --------------------------------------------------------------------------- * §2.5 #1 — Loading screen gating. The .loader is static markup now (the live * site injected it with inline jQuery and hid #SEarticlecontent/#SEindex via * two inline scripts). With JS (html.js from the head shim) the content stays * hidden until src/scripts/se.js flips body.se-loaded on window load; the * loader then fades out and the content fades in (original: fadeOut + 500 ms * fadeIn on desktop). Without JS the loader never renders and the content is * simply visible — strictly better than live's blank page. */ .loader.circle { display: none; z-index: 900; } html.js body:not(.se-loaded) .loader.circle { display: block; } html.js #SEarticlecontent, html.js #SEindex { transition: opacity 0.5s ease; } html.js body:not(.se-loaded) #SEarticlecontent, html.js body:not(.se-loaded) #SEindex { visibility: hidden; opacity: 0; } /* --------------------------------------------------------------------------- * §2.5 #2 — Curtain page-transition replacement (curtain.1.4.1.js dropped). * Sticky full-viewport panels inside the normally-flowing .curtains: as the * page scrolls, #index slides over the pinned #cover — the modern equivalent * of the plugin's fixed-panel "curtain" reveal. Desktop no-touch only, same * gate as the original (screenSize == 'desktop' && .no-touch); tablet, touch * and no-JS stay plain flow, exactly like live's non-curtained rendering. * * body{overflow:hidden} (styles-se.css) would make the sticky * scrollport and break pinning, so it is lifted while the curtain is active — * safe here because at ≥1025px #SEheader and .se-controls are position:fixed * (they were the reason for the overflow clip at smaller widths). * * Selector weight note: the 1-id prefix keeps these above the per-edition * `#index { position:relative }` / `.christmas-cover { background:#e5f7e1 }` * rules — the same relationships curtain.css's `.curtained .curtains > .pg` * had live (panels went white while curtained). * * Unconditional positioning context: curtain.1.4.1.js's init() calls * `self.$pg.css({position:'relative'})` on EVERY `.pg` panel regardless of * screen size or touch — it is not gated behind the desktop/no-touch curtain * activation. That is load-bearing even in "plain flow" mode: 02_home.css's * `.cover-title { position:absolute; top:50%; ... }` needs a positioned * ancestor to center over the cover photo, and on live that ancestor is * `#cover` via this always-on inline style. Reproduce it here, unscoped by * media query, so mobile/tablet keep a correctly centered cover title; the * ≥1025px rule below upgrades the same panels to `position:sticky`, which is * itself a positioning context, so no conflict. */ #SEarticlecontent .curtains > .pg { position: relative; } @media only screen and (min-width: 1025px) { html.js.no-touch body { overflow: visible; } html.js.no-touch #SEarticlecontent .curtains > .pg { position: -webkit-sticky; position: sticky; top: 0; display: block; width: 100%; min-height: 100vh; overflow: hidden; background: #fff; } /* 02_home.css zeroes the styles-se.css 136px at ≥768 and restores it only under .curtained — the port restores it whenever the curtain is active so the last panel can scroll clear of the fixed .se-controls bar. */ html.js.no-touch #SEmain #SEarticlecontent { padding-bottom: 136px; } /* The "scroll down" pill is static markup now (curtain.js appended it on no-touch machines only); per-edition CSS shows it ≥1025px — re-hide it where the curtain never activates. */ html.touch .cover-scroll-mssg { display: none; } } /* --------------------------------------------------------------------------- * §2.5 #5 — Index toggle. se.js showed the (base display:none) toggle at * ≥768px and jQuery-animated #SEheader's bottom over 500 ms; the port keeps * the measurements in src/scripts/se.js and does the movement with a CSS * transition. JS-gated: without JS the toggle is inert, so it stays hidden. */ @media only screen and (min-width: 768px) { html.js .se-index_toggle { display: inline-block; } #SEheader { transition: bottom 0.5s ease; } } /* Resize safety (replaces se.js's doneResizing forcing): if the header was * toggled at ≥768px (inline bottom/visibility styles present) and the window * shrinks to phone width, the static in-flow header must win again. */ @media only screen and (max-width: 767px) { #SEheader[style] { bottom: auto !important; visibility: visible !important; transition: none; } } /* --------------------------------------------------------------------------- * §2.5 #6 — Edition-index carousel (desktop). Original: FlexSlider carousel, * itemWidth:400 / maxItems:3 / autoplay (autoplay + paging dots dropped — * EXCLUSIONS.md). Port: a scroll-snap row of the same 400px cards plus * prev/next arrows (src/scripts/se.js) reusing the .flex-prev/.flex-next * classes styles-se.css already styles as dark rounded buttons. Tablet keeps * the live 2-up float grid, mobile the stacked list (pure styles-se.css). */ #SEheader .se-flex-wrapper .flex-direction-nav { display: none; list-style: none; margin: 0; padding: 0; } @media only screen and (min-width: 1025px) { #SEheader .se-flex-wrapper { position: relative; } #SEheader .se-flex-wrapper .flex-direction-nav { display: block; } #SEheader .se-flex-wrapper .slides { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; /* the live carousel clipped, no scrollbar */ } #SEheader .se-flex-wrapper .slides::-webkit-scrollbar { display: none; } #SEheader .se-flex-wrapper .slides > li { float: none; width: 400px; flex: 0 0 400px; scroll-snap-align: start; } } /* --------------------------------------------------------------------------- * §2.5 #4 — biggerlink replacement: the whole .se-subitem card is clickable * via a stretched title link, and the .bl-hover title recolor becomes a real * :hover on the card (same #00548c styles-se.css used). */ #SEheader .se-subitem { position: relative; } #SEheader .se-subitem .se-subitem-title a::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #SEheader .se-subitem:hover h1.se-subitem-title a:link, #SEheader .se-subitem:hover h1.se-subitem-title a:visited, #SEheader .se-subitem:hover h1.se-subitem-title a:hover, #SEheader .se-subitem:hover h1.se-subitem-title a:active { color: #00548c; } /* --------------------------------------------------------------------------- * §2.5 #7 follow-up (visual-audit fix 2026-07-11) — the breadcrumb-bar * "Comments (0)" was an colorbox trigger on live and * picked up the styles-se.css `a { color:#f86015 }` orange. The port freezes * it as an inert (both editions have 0 comments, * modal dropped), which inherited the dark body color. Restore the live * link color for pixel parity. */ span.se-comments { color: #f86015; }