/* ============================================================================ OKTOBERFEST STICKER PROMO ---------------------------------------------------------------------------- Advertises /oktoberfest on every page except that one, only while the event is running (ends Oct 10 — gated in js/oktoberfest-promo.js, not here). Keeps its own fixed Oktoberfest blue/cream regardless of the host page's own theme accent — it reads as a badge stuck onto the page, not a themed page component. One presentation at every width: a small sticker pinned to the bottom-left corner, persisting while the page scrolls. position:sticky, not position:fixed — Mobile Safari has a long-standing bug where bottom-anchored position:fixed elements can flicker or vanish during momentum scroll (confirmed on this site: the UserWay accessibility widget, a third-party fixed element this can't touch, shows the exact same symptom — it's a platform quirk, not something in this sticker's own CSS). Forcing a compositing layer didn't fix it, so this sidesteps position:fixed entirely instead of continuing to work around it: .okt-sticker-anchor spans the full page height (position:absolute, inset:0, on a position:relative body) and pushes .okt-sticker to its own bottom edge with flex. Because that "natural" position is off the bottom of the viewport on any page taller than one screen, .okt-sticker's bottom:gutter sticky constraint holds it there from the very first frame — reading as pinned to the viewport's bottom-left the same way position:fixed did, but built as an in-flow element Safari's compositor doesn't fumble the same way. It only lets go of that constraint at the true end of the page, where margin-bottom below keeps it at the same gutter distance instead of jumping flush to the bottom edge. Self-contained on purpose: this whole file goes away in one delete once the event is over, the same way oktoberfest.css is self-contained from styles.css. Deleting it leaves body's position:relative behind harmlessly (nothing else on these pages depends on body being static). ========================================================================= */ body { position: relative; } .okt-sticker-anchor { position: absolute; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; /* The anchor only exists to give .okt-sticker somewhere to be sticky within — it has no visible box of its own, and shouldn't intercept clicks over the rest of the page. */ pointer-events: none; } .okt-sticker-anchor:has(.okt-sticker[hidden]) { display: none; } .okt-sticker { position: sticky; bottom: var(--gutter, clamp(1.1rem, 4vw, 3rem)); /* Same horizontal inset as .topnav-container's own margin, so the sticker lines up with the nav bar's edge instead of sitting on its own rhythm. */ margin-left: var(--gutter, clamp(1.1rem, 4vw, 3rem)); margin-bottom: var(--gutter, clamp(1.1rem, 4vw, 3rem)); width: min(30vw, 170px); pointer-events: auto; } .okt-sticker[hidden] { display: none; } /* .okt-sticker__frame is square on purpose (not the badge's own 1.18:1 shape) — that keeps the oval behind it and the badge itself concentric regardless of the badge's own proportions, and centering the badge inside a square frame via flex means the oval and the badge share one center point instead of each centering against a different box. .okt-sticker__close positions against this same frame. */ .okt-sticker__frame { position: relative; width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } /* A paper oval behind the badge, like it's mounted on a coaster, peeking out past the badge's own edges on every side. inset takes two values here (vertical horizontal) rather than one, so it's wider than tall on the square frame — -6% top/bottom, -16% left/right — an oval, not a perfect circle. Colour + texture match the regular page stock exactly (styles.css body{}) — #F3E8CE with the same paper-grain multiply — not the Oktoberfest page's own cooler #F5F4EF override, which is what was reading as plain white here: every page this sticker actually shows on is a regular cream page, not /oktoberfest itself. */ .okt-sticker__frame::before { content: ""; position: absolute; inset: -6% -16%; z-index: -1; border-radius: 50%; border: 3px solid #0F3D91; background-color: #F3E8CE; background-image: url('images/paper-grain.webp'); background-size: 150px 150px; background-blend-mode: multiply; box-shadow: 0 2px 3px rgba(58, 42, 22, 0.14), 0 8px 18px rgba(58, 42, 22, 0.18); } @media (prefers-reduced-motion: no-preference) { .okt-sticker { animation: okt-sticker-in 0.35s ease both; } } @keyframes okt-sticker-in { from { opacity: 0; transform: translateY(14px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } /* aspect-ratio matches images/oktoberfest-popup.svg's own viewBox (844 10.44 859.55 730.95 — the source file's right-hand badge only, cropped out of the two-badge original). The left edge is pinned to 844: the left badge's own ink runs up to x=835.55 in that file, so anything past ~836 starts showing a sliver of it — an earlier, more "centered" crop pushed left to 789.16 and clipped straight into it (the cut-off second badge edge on the left). 844 stays clear of that with a small buffer, at the cost of slightly less padding on the left than the other three sides. .okt-sticker__art below sits at inset:0 with no further cropping. Sized to 94% of the (square) frame, leaving a hair of room inside the now-smaller circle rather than touching its own overhang. filter: drop-shadow (not box-shadow) so the shadow follows the artwork's own silhouette instead of its rectangular box. */ .okt-sticker__link { position: relative; display: block; width: 94%; aspect-ratio: 859.55 / 730.95; filter: drop-shadow(0 2px 3px rgba(15, 61, 145, 0.18)) drop-shadow(0 8px 18px rgba(15, 61, 145, 0.24)); transition: transform 0.16s ease; } .okt-sticker__link:hover, .okt-sticker__link:focus-visible { transform: translateY(-3px); } /* A brief teeter, not a held tilt — rocks a few times and settles back to 0deg on its own (last keyframe), rather than looping for as long as the cursor stays put. Layered on top of the plain lift above via a media query, same pattern as .okt-sticker's own entrance animation, so reduced-motion still gets the lift with no rotation at all. */ @media (prefers-reduced-motion: no-preference) { .okt-sticker__link:hover, .okt-sticker__link:focus-visible { animation: okt-sticker-teeter 0.6s ease-in-out; } } @keyframes okt-sticker-teeter { 0%, 100% { transform: translateY(-3px) rotate(0deg); } 20% { transform: translateY(-3px) rotate(-6deg); } 40% { transform: translateY(-3px) rotate(5deg); } 60% { transform: translateY(-3px) rotate(-3deg); } 80% { transform: translateY(-3px) rotate(2deg); } } .okt-sticker__art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; } /* Close bubble — an "x" chip sitting on the oval's own rim (top-right, 45°) rather than the badge's corner. On the square .okt-sticker__frame, the oval's horizontal radius is 66% of the frame (50% + 16% overhang) and vertical radius 56% (50% + 6%), so its rim at 45° sits at center ± radius×cos/sin45° ≈ ±46.7% horizontally, ±39.6% vertically — expressed here as top/left off the frame with a self-centering transform, since top/left percentages are safe once the frame is square (equal % of width and height resolve to the same px value). */ .okt-sticker__close { position: absolute; top: 10.4%; left: 96.7%; transform: translate(-50%, -50%); z-index: 1; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 2px solid #0F3D91; border-radius: 50%; background: #0F3D91; color: #F5F4EF; font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(15, 61, 145, 0.3); transition: background 0.15s ease, color 0.15s ease; } .okt-sticker__close:hover, .okt-sticker__close:focus-visible { background: #F5F4EF; color: #0F3D91; }