/* ========================================================================== MEGASWIPER - Responsive Swiper Styles Version: 2.11.0 FOUC PREVENTION: - .msw-unique-gato starts visibility:hidden (loaded in ) - JS sets visibility:visible on Swiper init callback - First slide image: loading="eager" + fetchpriority="high" HYBRID RESPONSIVE NAVIGATION: - Mobile/Tablet (< 1024px): Arrows HIDDEN, swipe gestures enabled - Desktop (>= 1024px): Arrows VISIBLE, swipe disabled READ ROOM FEATURES: - Mobile Safety Zone (3.75rem) for browser bars & notches - Font scaling: +20% body, +10% title on mobile - Solid black overlay (zero distractions) - German word hyphenation SMART HAND (V4): - Mobile/Tablet only, bottom 12vh, pointer-events:none CSS MODERNIZATION (v2.8.1): - All px values converted to rem (base 16px = 1rem) - Exceptions: box-shadow, outline, env()/max() safe-area values, keyframe translateX, letter-spacing ========================================================================== */ /* ========================================================================== FOUC GUARD – hides Swiper until JS initializes it The container keeps its 100vh height so nothing jumps. JS will flip visibility to visible inside Swiper on:{init}. ========================================================================== */ .msw-unique-gato { visibility: hidden; font-family: 'Noto Sans', sans-serif !important; /* Stability: horizontal flicks go to Swiper; prevent iOS bounce */ touch-action: pan-y; overscroll-behavior-x: none; } /* Block context menu and selection on images (discourage save) */ .msw-unique-gato img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* --- FONT AWESOME – JetEngine listing icons (Language Popup, etc.) Ensures icons render when Elementor "Load Font Awesome 4 Support" is OFF. Uses self-hosted FA5 from msw-asset-optimizer. --- */ .jet-listing-dynamic-field__inline-icon .fa, .jet-listing-dynamic-field__inline-icon .fas { font-family: "Font Awesome 5 Free" !important; font-weight: 900; } .jet-listing-dynamic-field__inline-icon .far { font-family: "Font Awesome 5 Free" !important; font-weight: 400; } .jet-listing-dynamic-field__inline-icon .fab { font-family: "Font Awesome 5 Brands" !important; font-weight: 400; } /* --- BASE SWIPER LAYOUT --- */ .msw-full-screen { width: 100vw !important; height: 100vh !important; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); overflow: hidden; position: relative; } .msw-unique-gato .swiper-slide { height: 100vh !important; padding: 3vh 10% 5rem 10% !important; /* 80px → 5rem */ display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; text-align: center !important; box-sizing: border-box; position: relative; /* v2.11.0: anchor for background layers */ overflow: hidden; /* v2.12.0: cut overflow on XXXL/4XL; prevents horizontal scrollbar that kills swipe */ word-break: break-word; /* Allow wrapping when possible; otherwise overflow:hidden clips */ } /* ========================================================================== BACKGROUND IMAGE + OVERLAY LAYERS (v2.11.0) Rendered by swiper-view.php when msw_lang_img_bg_final has a value. The .msw-bg-layer holds the fullscreen background image (cover). The .msw-bg-overlay sits on top with an rgba() color for tinting. All slide content (header, images, footer) sits above at z-index:10. ========================================================================== */ .msw-bg-layer { position: absolute; inset: 0; /* top:0 right:0 bottom:0 left:0 */ z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; /* Let touches pass through to Swiper (fixes touchReleaseOnEdges on mesh slides) */ } .msw-bg-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; /* Visual tint only – touches must reach Swiper for edge release */ } /* ========================================================================== MESH GRADIENT BACKGROUND (bg_c_type_final = 'mesh') .msw-mesh-canvas-container: positioned behind all content, fills slide. .msw-mesh-blob: 5 blurred radial-gradient circles, animated via keyframes. Base 80vmax; --msw-mesh-scale from bg_mesh_scale_final (2 = huge, 0.5 = dots). mix-blend-mode: normal for mobile performance (color-dodge is GPU-heavy). HYPERSPEED: display:none by default; only active slide renders mesh/gradient. GPU hints (will-change, translateZ) applied only to active slide to save memory. ========================================================================== */ .msw-mesh-canvas-container, .msw-gradient-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none !important; /* GPU layer for zoom stability (reduces jitter when user zooms) */ transform: translateZ(0); isolation: isolate; /* Hyperspeed: opacity 0 by default; GPU processes only ONE mesh at a time */ opacity: 0; transition: opacity 0.4s ease; } /* Mesh: ACTIVE ONLY – GPU processes single mesh to avoid mobile swipe lag */ .swiper-slide-active .msw-mesh-canvas-container { opacity: 1; will-change: opacity, transform; transform: translateZ(0); } /* Gradient: 3-slide window for smooth swipe (lighter than mesh blobs) */ .swiper-slide-active .msw-gradient-layer, .swiper-slide-next .msw-gradient-layer, .swiper-slide-prev .msw-gradient-layer { opacity: 1; will-change: opacity, transform; transform: translateZ(0); } /* Blob positioning: left/top place the CENTER via transform so the colored gradient core is visible. Without -50% offset, only transparent edges show. */ .msw-mesh-canvas-container .msw-mesh-blob { position: absolute; width: calc(80vmax * var(--msw-mesh-scale, 1)); height: calc(80vmax * var(--msw-mesh-scale, 1)); border-radius: 50%; filter: blur(var(--msw-mesh-blur, 120px)); mix-blend-mode: normal; opacity: 0.85; /* Center blob on left/top so colored core is in viewport */ transform: translate(-50%, -50%); /* GPU hint for smooth high-speed motion on mobile */ will-change: transform; } /* Default (ltr): diagonal drift */ @keyframes msw-mesh-float { 0%, 100% { transform: translate(-50%, -50%) translate(0, 0); } 25% { transform: translate(-50%, -50%) translate(10%, -5%); } 50% { transform: translate(-50%, -50%) translate(-5%, 10%); } 75% { transform: translate(-50%, -50%) translate(-10%, -10%); } } /* Wave: Ocean-smooth – 24 true sine points, Y ±20% (gentle), X ±10%. Zero stops. */ @keyframes msw-mesh-wave { 0%, 100% { transform: translate(-50%, -50%) translate(0%, 0); } 4.17% { transform: translate(-50%, -50%) translate(2.6%, -5.2%); } 8.33% { transform: translate(-50%, -50%) translate(5%, -10%); } 12.5% { transform: translate(-50%, -50%) translate(7.1%, -14.1%); } 16.67% { transform: translate(-50%, -50%) translate(8.7%, -17.3%); } 20.83% { transform: translate(-50%, -50%) translate(9.7%, -19.3%); } 25% { transform: translate(-50%, -50%) translate(10%, -20%); } 29.17% { transform: translate(-50%, -50%) translate(9.7%, -19.3%); } 33.33% { transform: translate(-50%, -50%) translate(8.7%, -17.3%); } 37.5% { transform: translate(-50%, -50%) translate(7.1%, -14.1%); } 41.67% { transform: translate(-50%, -50%) translate(5%, -10%); } 45.83% { transform: translate(-50%, -50%) translate(2.6%, -5.2%); } 50% { transform: translate(-50%, -50%) translate(0%, 0); } 54.17% { transform: translate(-50%, -50%) translate(-2.6%, 5.2%); } 58.33% { transform: translate(-50%, -50%) translate(-5%, 10%); } 62.5% { transform: translate(-50%, -50%) translate(-7.1%, 14.1%); } 66.67% { transform: translate(-50%, -50%) translate(-8.7%, 17.3%); } 70.83% { transform: translate(-50%, -50%) translate(-9.7%, 19.3%); } 75% { transform: translate(-50%, -50%) translate(-10%, 20%); } 79.17% { transform: translate(-50%, -50%) translate(-9.7%, 19.3%); } 83.33% { transform: translate(-50%, -50%) translate(-8.7%, 17.3%); } 87.5% { transform: translate(-50%, -50%) translate(-7.1%, 14.1%); } 91.67% { transform: translate(-50%, -50%) translate(-5%, 10%); } 95.83% { transform: translate(-50%, -50%) translate(-2.6%, 5.2%); } } /* Clockwise: 20% radius, 16 points – smooth circle (no octagon corners/stops) */ @keyframes msw-mesh-clockwise { 0%, 100% { transform: translate(-50%, -50%) translate(20%, 0); } 6.25% { transform: translate(-50%, -50%) translate(18.5%, 7.7%); } 12.5% { transform: translate(-50%, -50%) translate(14.1%, 14.1%); } 18.75% { transform: translate(-50%, -50%) translate(7.7%, 18.5%); } 25% { transform: translate(-50%, -50%) translate(0, 20%); } 31.25% { transform: translate(-50%, -50%) translate(-7.7%, 18.5%); } 37.5% { transform: translate(-50%, -50%) translate(-14.1%, 14.1%); } 43.75% { transform: translate(-50%, -50%) translate(-18.5%, 7.7%); } 50% { transform: translate(-50%, -50%) translate(-20%, 0); } 56.25% { transform: translate(-50%, -50%) translate(-18.5%, -7.7%); } 62.5% { transform: translate(-50%, -50%) translate(-14.1%, -14.1%); } 68.75% { transform: translate(-50%, -50%) translate(-7.7%, -18.5%); } 75% { transform: translate(-50%, -50%) translate(0, -20%); } 81.25% { transform: translate(-50%, -50%) translate(7.7%, -18.5%); } 87.5% { transform: translate(-50%, -50%) translate(14.1%, -14.1%); } 93.75% { transform: translate(-50%, -50%) translate(18.5%, -7.7%); } } /* Diagonal: seamless A→B→A loop (±15%) */ @keyframes msw-mesh-diagonal { 0%, 100% { transform: translate(-50%, -50%) translate(-15%, -15%); } 50% { transform: translate(-50%, -50%) translate(15%, 15%); } } /* Pulse: dramatic scale cycle (0.8 → 1.5) */ @keyframes msw-mesh-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; } 50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.9; } } .msw-mesh-canvas-container.msw-mesh-animated .msw-mesh-blob { animation: msw-mesh-float var(--msw-mesh-speed, 20s) ease-in-out infinite both; } /* Direction overrides: rtl reverses default; wave/clock use different keyframes */ .msw-mesh-canvas-container.msw-mesh-dir-rtl.msw-mesh-animated .msw-mesh-blob { animation: msw-mesh-float var(--msw-mesh-speed, 20s) ease-in-out infinite reverse both; } .msw-mesh-canvas-container.msw-mesh-dir-wave.msw-mesh-animated .msw-mesh-blob { animation: msw-mesh-wave var(--msw-mesh-speed, 20s) linear infinite both !important; } .msw-mesh-canvas-container.msw-mesh-dir-clockwise.msw-mesh-animated .msw-mesh-blob, .msw-mesh-canvas-container.msw-mesh-dir-clock.msw-mesh-animated .msw-mesh-blob { animation: msw-mesh-clockwise var(--msw-mesh-speed, 20s) linear infinite both; } /* Counter: perfect mirror of clockwise – same keyframes, reverse direction */ .msw-mesh-canvas-container.msw-mesh-dir-counter.msw-mesh-animated .msw-mesh-blob, .msw-mesh-canvas-container.msw-mesh-dir-counter-clockwise.msw-mesh-animated .msw-mesh-blob { animation: msw-mesh-clockwise var(--msw-mesh-speed, 20s) linear infinite reverse both !important; } .msw-mesh-canvas-container.msw-mesh-dir-diagonal.msw-mesh-animated .msw-mesh-blob { animation: msw-mesh-diagonal var(--msw-mesh-speed, 20s) linear infinite both; } .msw-mesh-canvas-container.msw-mesh-dir-pulse.msw-mesh-animated .msw-mesh-blob { animation: msw-mesh-pulse var(--msw-mesh-speed, 20s) ease-in-out infinite both; } /* Direction none: disable animation */ .msw-mesh-canvas-container.msw-mesh-dir-none .msw-mesh-blob { animation: none !important; } /* Performance guard: speed=0 disables animation to save GPU cycles */ .msw-mesh-canvas-container.msw-mesh-static .msw-mesh-blob { animation: none !important; } .msw-mesh-canvas-container .msw-mesh-blob:nth-child(1) { animation-delay: 0s; left: 10%; top: 20%; } .msw-mesh-canvas-container .msw-mesh-blob:nth-child(2) { animation-delay: -4s; left: 60%; top: 10%; } .msw-mesh-canvas-container .msw-mesh-blob:nth-child(3) { animation-delay: -8s; left: 30%; top: 60%; } .msw-mesh-canvas-container .msw-mesh-blob:nth-child(4) { animation-delay: -12s; left: 80%; top: 70%; } .msw-mesh-canvas-container .msw-mesh-blob:nth-child(5) { animation-delay: -16s; left: 50%; top: 40%; } /* ========================================================================== ULTRA HYPERSPEED (mobile < 768px): GPU hint on active mesh only - Next/prev mesh: hidden (opacity 0) – GPU processes ONE mesh at a time - Active blobs: will-change transform, opacity for compositor (pulse uses opacity) - Shorter opacity transition (0.2s) – snappier mesh/gradient fade during swipe - script.js: 3 blobs, blur 60px, scale 1.6, speed 250ms (desktop 400ms) ========================================================================== */ @media screen and (max-width: 767px) { .swiper-slide-active .msw-mesh-canvas-container .msw-mesh-blob { will-change: transform, opacity; } /* Shorter fade during swipe – reduces perceived lag on old phones */ .msw-mesh-canvas-container, .msw-gradient-layer { transition: opacity 0.2s ease; } } /* Ensure all slide content sits above the background layers */ .msw-unique-gato .msw-header, .msw-unique-gato .msw-img-box, .msw-unique-gato .msw-audio-wrapper, .msw-unique-gato .msw-video-wrapper, .msw-unique-gato .msw-pincode-engine, .msw-unique-gato .msw-footer-zone { position: relative; z-index: 10; } /* Reader trigger: fixed top-right, below HUD zone (DE + Bars). Same gap as DE–Bars. */ .msw-unique-gato .msw-reader-trigger { position: fixed; z-index: 10; } /* ========================================================================== SYNTH-LOCK ENGINE (Pincode Slide) CSS Grid 3x4 numpad, thematic skins via CSS variables, Shake/Fade In. ========================================================================== */ .msw-pincode-engine { width: 100%; max-width: 20rem; margin: 1rem auto 0; padding: 1rem; border-radius: 0.5rem; background: var(--msw-pincode-bg, rgba(0, 0, 0, 0.15)); font-family: var(--msw-pincode-font, inherit); } .msw-pincode-display { min-height: 2.5rem; margin-bottom: 1rem; padding: 0.5rem 1rem; border-radius: 0.35rem; background: var(--msw-pincode-display-bg, rgba(255, 255, 255, 0.9)); border: 2px solid var(--msw-pincode-display-border, rgba(0, 0, 0, 0.2)); font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; color: var(--msw-pincode-display-text, #333); } .msw-pincode-display.msw-pincode-shake { animation: msw-pincode-shake 0.4s ease-in-out; } .msw-pincode-numpad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0.5rem; touch-action: manipulation; } .msw-pincode-btn { min-height: 2.75rem; padding: 0.5rem; border: 2px solid var(--msw-pincode-btn-border, rgba(0, 0, 0, 0.3)); border-radius: 0.35rem; background: var(--msw-pincode-btn-bg, rgba(255, 255, 255, 0.95)); color: var(--msw-pincode-btn-text, #333); font-size: 1.25rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.1s; } .msw-pincode-btn:hover { background: var(--msw-pincode-btn-hover, rgba(0, 0, 0, 0.08)); } .msw-pincode-btn:active { transform: scale(0.97); } .msw-pincode-success { display: none; grid-column: span 1; touch-action: manipulation; } .msw-pincode-success.msw-pincode-fade-in { animation: msw-pincode-fade-in 0.5s ease-out forwards; } /* When unlocked: hide digit/clear buttons, keep display with correct answer; success button full width */ .msw-pincode-engine.msw-pincode-unlocked .msw-pincode-digit, .msw-pincode-engine.msw-pincode-unlocked .msw-pincode-clear { display: none !important; pointer-events: none; } .msw-pincode-engine.msw-pincode-unlocked .msw-pincode-success { display: block; grid-column: 1 / -1; grid-row: 1 / -1; min-height: 3.5rem; align-self: stretch; } @keyframes msw-pincode-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } } /* Read Room icon: rubber shake left – draws attention when slide becomes active (original working version) */ @keyframes msw-reader-attention { 0% { transform: translateX(0); } 20% { transform: translateX(-14px); } 35% { transform: translateX(-22px); } 50% { transform: translateX(-10px); } 65% { transform: translateX(-18px); } 80% { transform: translateX(-4px); } 100% { transform: translateX(0); } } @keyframes msw-reader-attention-rtl { 0% { transform: translateX(0); } 20% { transform: translateX(14px); } 35% { transform: translateX(22px); } 50% { transform: translateX(10px); } 65% { transform: translateX(18px); } 80% { transform: translateX(4px); } 100% { transform: translateX(0); } } /* Mobile: 50% gentler shake – less intrusive on small screens */ @keyframes msw-reader-attention-mobile { 0% { transform: translateX(0); } 20% { transform: translateX(-7px); } 35% { transform: translateX(-11px); } 50% { transform: translateX(-5px); } 65% { transform: translateX(-9px); } 80% { transform: translateX(-2px); } 100% { transform: translateX(0); } } @keyframes msw-reader-attention-rtl-mobile { 0% { transform: translateX(0); } 20% { transform: translateX(7px); } 35% { transform: translateX(11px); } 50% { transform: translateX(5px); } 65% { transform: translateX(9px); } 80% { transform: translateX(2px); } 100% { transform: translateX(0); } } @keyframes msw-pincode-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Skin: std (default) – uses base variables */ .msw-skin-std { /* defaults above */ } /* Skin: mtx – terminal, Courier New, neon green */ .msw-skin-mtx { --msw-pincode-font: 'Courier New', Courier, monospace; --msw-pincode-bg: rgba(0, 20, 0, 0.9); --msw-pincode-display-bg: rgba(0, 0, 0, 0.8); --msw-pincode-display-border: #00ff41; --msw-pincode-display-text: #00ff41; --msw-pincode-btn-bg: rgba(0, 40, 0, 0.9); --msw-pincode-btn-border: #00ff41; --msw-pincode-btn-text: #00ff41; --msw-pincode-btn-hover: rgba(0, 255, 65, 0.2); } /* Skin: fan – mechanical stone */ .msw-skin-fan { --msw-pincode-bg: rgba(80, 70, 60, 0.85); --msw-pincode-display-bg: rgba(100, 90, 80, 0.95); --msw-pincode-display-border: #8b7355; --msw-pincode-display-text: #4a4035; --msw-pincode-btn-bg: rgba(120, 110, 95, 0.95); --msw-pincode-btn-border: #6b5d4d; --msw-pincode-btn-text: #3d3529; --msw-pincode-btn-hover: rgba(0, 0, 0, 0.15); } /* Skin: hell – ominous dark red/black */ .msw-skin-hell { --msw-pincode-bg: rgba(30, 0, 0, 0.95); --msw-pincode-display-bg: rgba(50, 0, 0, 0.9); --msw-pincode-display-border: #8b0000; --msw-pincode-display-text: #ff4444; --msw-pincode-btn-bg: rgba(60, 0, 0, 0.9); --msw-pincode-btn-border: #8b0000; --msw-pincode-btn-text: #ff6666; --msw-pincode-btn-hover: rgba(255, 0, 0, 0.15); } /* Skin: bib – celestial soft blue/white */ .msw-skin-bib { --msw-pincode-bg: rgba(220, 235, 255, 0.9); --msw-pincode-display-bg: rgba(255, 255, 255, 0.95); --msw-pincode-display-border: #87ceeb; --msw-pincode-display-text: #4169e1; --msw-pincode-btn-bg: rgba(240, 248, 255, 0.95); --msw-pincode-btn-border: #87ceeb; --msw-pincode-btn-text: #4169e1; --msw-pincode-btn-hover: rgba(135, 206, 235, 0.4); } /* ========================================================================== FOOTER ZONE (v2.11.0) Rendered at the bottom-left of each slide for footer image + text. Uses msw_lang_img_btm_final and msw_lang_text_btm. Row: [Image] [Text]. z-index: 15 = above content (10) and bg (1) so footer stays on top. Bottom-right reserved for future buttons. ========================================================================== */ .msw-unique-gato .msw-footer-zone { position: absolute; bottom: 0.5rem; left: 1.5rem; display: flex; align-items: flex-end; /* Text at bottom, aligned with logo bottom (not centered) */ gap: 0.4rem; z-index: 15; pointer-events: none; /* Safe-area: prevents footer from being covered by iPhone/Android home indicator bar */ padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); } /* Desktop: footer closer to bottom – no safe-area needed, minimal padding */ @media screen and (min-width: 768px) { .msw-unique-gato .msw-footer-zone { bottom: 0.625rem; /* 10px – 4px higher than 0.375rem */ padding-bottom: 0; } } /* 2x Small: text 0.125rem (2px) closer to logo. */ .msw-unique-gato .msw-footer-zone.msw-footer-txt-S { gap: 0.275rem; } /* Mobile/tablet: footer-to-dots distance (px = easy to tune, absolute gap). Size-specific bottom values compensate for different footer heights (S/M/L) so the visual gap is the same: very close, as in Small screenshot. */ @media screen and (max-width: 767px) { .msw-unique-gato .msw-footer-zone { bottom: 6px; } /* Small: same as M/L – text at bottom, margin-bottom creates gap above dots */ .msw-unique-gato .msw-footer-zone.msw-footer-txt-S { bottom: 8px; } .msw-unique-gato .msw-footer-zone.msw-footer-txt-S .msw-footer-text { margin-bottom: 15px; } /* Medium: same approach */ .msw-unique-gato .msw-footer-zone.msw-footer-txt-M { bottom: 5px; } .msw-unique-gato .msw-footer-zone.msw-footer-txt-M .msw-footer-text { margin-bottom: 15px; } /* Large: text at bottom, margin-bottom creates gap above dots */ .msw-unique-gato .msw-footer-zone.msw-footer-txt-L { bottom: 4px; } .msw-unique-gato .msw-footer-zone.msw-footer-txt-L .msw-footer-text { margin-bottom: 15px; } } /* Children must be clickable: lightbox link and text selection */ .msw-unique-gato .msw-footer-zone > a, .msw-unique-gato .msw-footer-zone > .msw-footer-img, .msw-unique-gato .msw-footer-zone > .msw-footer-text { pointer-events: auto; } /* Menu Matrix (Stability v2.0) – content jump buttons. Style via Elementor if needed. */ .msw-unique-gato .msw-menu-matrix { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; position: relative; z-index: 10; } /* Menu colors/size come from inline styles (swiper-view.php _final fields); base styles below */ .msw-unique-gato .msw-menu-btn { cursor: pointer; padding: 0.35rem 0.75rem; font-size: 0.9rem; border-radius: 0.25rem; border: 1px solid currentColor; touch-action: manipulation; background: transparent; } .msw-unique-gato .msw-footer-img { width: auto; display: block; /* max-height from PHP inline style */ } .msw-unique-gato .msw-footer-text { line-height: 1.4; max-width: 80vw; margin: 0; /* No extra gap; align-items:flex-end controls vertical position */ } /* --- SLIM ALERT WARNING BAR (msw_lang_alert_active + msw_alert_templates) --- */ /* Bar: position absolute, top 0; parent .swiper-slide has position:relative (line ~68). */ .msw-alert-bar { position: absolute; top: 0; left: 0; right: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border-left: 5px solid var(--msw-alert-bd, #dd3333); background-color: var(--msw-alert-bg, #fff3cd); color: var(--msw-alert-text, #856404); z-index: 15; } /* When alert present, add padding-top so bar does not overlap slide title. */ .msw-has-alert .msw-header { padding-top: 2.5rem; } /* Icon: force color for custom domain reliability (FA may fail to load). */ .msw-alert-icon { color: var(--msw-alert-icon, #856404) !important; position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 1.2em; } /* Fallback ⚠ layered behind FA ::before; visible when FA fails or CCT icon empty. */ .msw-alert-fallback { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: inherit; } /* --- HEADER & TEXT --- */ .msw-header { z-index: 10; width: 100%; } /* Title font-size: controlled by inline style per slide (msw_lang_title_size_final). */ .msw-unique-gato h2 { font-weight: 800; line-height: 1 !important; margin: 0 0 1.25rem 0 !important; } .msw-desc { color: #333; font-size: 1.95rem; line-height: 1.5; max-width: 46.875rem; margin: 0 auto; } /* 750px → 46.875rem */ /* --- AUDIO PLAYER (native HTMLMediaElement, no external libs) --- */ /* Layout: [Play] [Progress Bar] [Total Time]. Slim height, minimal vertical space. */ .msw-unique-gato .msw-audio-wrapper { width: 90%; max-width: 320px; margin: 0.5rem auto 0; position: relative; z-index: 10; padding: 0.35rem 0.6rem; border: 1px solid color-mix(in srgb, var(--msw-hud-c1, #000) 25%, transparent 75%); border-radius: 0.35rem; background: color-mix(in srgb, var(--msw-hud-c1, #000) 6%, transparent 94%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .msw-unique-gato .msw-audio-ui { display: flex; align-items: center; gap: 0.5rem; } /* Prevent WordPress emoji replacement from hijacking play/pause icons (slow s.w.org SVG) */ .msw-unique-gato .msw-audio-wrapper img.emoji, .msw-unique-gato .msw-video-wrapper img.emoji { display: none !important; } .msw-unique-gato .msw-audio-play { pointer-events: auto; cursor: pointer; border: none; background: transparent; color: var(--msw-hud-c1, #000); padding: 0.1rem; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .msw-unique-gato .msw-audio-play .msw-audio-icon { color: var(--msw-hud-c1, #000); } .msw-unique-gato .msw-audio-icon { display: inline-block; font-size: 0.9rem; line-height: 1; } .msw-unique-gato .msw-audio-icon svg, .msw-unique-gato .msw-video-icon svg { display: block; width: 1em; height: 1em; } .msw-unique-gato .msw-audio-progress-wrap { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--msw-hud-c1, #000) 15%, transparent 85%); pointer-events: auto; cursor: pointer; } .msw-unique-gato .msw-audio-progress-bar { height: 100%; width: 0%; border-radius: 2px; background: var(--msw-hud-c1, #000); transition: width 0.1s linear; } .msw-unique-gato .msw-audio-time { font-size: 0.65rem; font-variant-numeric: tabular-nums; color: var(--msw-text-s-c1, #333); min-width: 9ch; } /* --- VIDEO PLAYER (native HTMLVideoElement, mirrors audio design) --- */ /* Panorama: 16:9 aspect-ratio, object-fit cover. Fills 95% of viewport on desktop. */ .msw-unique-gato .msw-video-wrapper { width: 100%; margin: 0.5rem auto 0; position: relative; z-index: 10; aspect-ratio: 16 / 9; overflow: hidden; pointer-events: none; border: 1px solid color-mix(in srgb, var(--msw-hud-c1, #000) 40%, transparent 60%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } @media screen and (min-width: 769px) { /* Fill 95% of viewport, centered relative to slide */ .msw-unique-gato .msw-video-wrapper { width: 95vw; max-width: 95vw; margin: 0.5rem auto 0; position: relative; left: 50%; transform: translateX(-50%); } } /* Desktop: pointer-events auto so mouseenter/mouseleave work for show-on-hover */ @media screen and (min-width: 1024px) { .msw-unique-gato .msw-video-wrapper { pointer-events: auto; } } .msw-unique-gato .msw-video-wrapper video { width: 100%; height: 100%; object-fit: cover; display: block; } .msw-unique-gato .msw-video-ui { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.35rem; /* Slim bar */ background: color-mix(in srgb, var(--msw-hud-c1, #000) 15%, transparent 85%); pointer-events: auto; opacity: 1; transition: opacity 0.4s ease; } /* Desktop only: fade out when playing – JS adds .msw-video-controls-hidden */ .msw-unique-gato .msw-video-wrapper.msw-video-controls-hidden .msw-video-ui { opacity: 0; pointer-events: none; } .msw-unique-gato .msw-video-play, .msw-unique-gato .msw-video-fullscreen { pointer-events: auto; cursor: pointer; border: none; background: transparent; color: var(--msw-hud-c1, #000); padding: 0.1rem; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .msw-unique-gato .msw-video-play .msw-video-icon, .msw-unique-gato .msw-video-fullscreen .msw-video-icon { color: var(--msw-hud-c1, #000); } .msw-unique-gato .msw-video-icon { display: inline-block; font-size: 0.9rem; line-height: 1; } /* Play button: big and visible like fullscreen */ .msw-unique-gato .msw-video-play .msw-video-icon { font-size: 1.2rem; color: #fff; filter: drop-shadow(0 0 1px rgba(0,0,0,0.9)) drop-shadow(0 1px 2px rgba(0,0,0,0.7)); } /* Fullscreen button: strong, visible */ .msw-unique-gato .msw-video-fullscreen { padding: 0.2rem; } .msw-unique-gato .msw-video-fullscreen .msw-video-icon { font-size: 1.1rem; color: #fff; filter: drop-shadow(0 0 1px rgba(0,0,0,0.9)) drop-shadow(0 1px 2px rgba(0,0,0,0.7)); } .msw-unique-gato .msw-video-fullscreen .msw-video-icon svg { fill: currentColor; /* Solid fill – not outline */ } .msw-unique-gato .msw-video-progress-wrap { flex: 1; height: 2.5px; /* Reduced ~40%: was 4px */ border-radius: 1.5px; background: color-mix(in srgb, var(--msw-hud-c1, #000) 15%, transparent 85%); pointer-events: auto; cursor: pointer; } .msw-unique-gato .msw-video-progress-bar { height: 100%; width: 0%; border-radius: 2px; background: var(--msw-hud-c1, #000); transition: width 0.1s linear; } .msw-unique-gato .msw-video-time { font-size: 0.7rem; font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.7); min-width: 9ch; } /* --- IMAGES --- */ /* Main slide image: max-height/max-width from inline style (msw_lang_img_size_final → S/M/L/XL/XXL/XXXL/4XL) */ .msw-img-box img { width: auto; border-radius: 0.9375rem; margin-top: 1.25rem; } /* 15px → 0.9375rem, 20px → 1.25rem */ /* Desktop: lightbox images show pointer cursor on hover – indicates clickable */ @media screen and (min-width: 1024px) { .msw-unique-gato img[data-msw-lb="on"] { cursor: pointer; } } /* --- READER TRIGGER BUTTON (ReadRoom) --- */ /* Same oval shape and alignment as Bars & Language (2.75rem × 2.5rem). C1 = background, C2 = icon. Top-right, below DE (0.5rem gap). */ /* Rubber shake animation: global trigger uses JS class; legacy in-slide uses .swiper-slide-active */ /* Desktop: full shake effect */ @media (min-width: 1024px) { .msw-reader-trigger-global.msw-reader-attention-on { animation: msw-reader-attention 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .msw-unique-gato[data-msw-rtl="1"] .msw-reader-trigger-global.msw-reader-attention-on { animation: msw-reader-attention-rtl 1s cubic-bezier(0.34, 1.56, 0.64, 1); } } .msw-reader-trigger { font-family: 'Font Awesome 5 Free'; font-weight: 900; width: 2.75rem; min-width: 2.75rem; height: 2.5rem; font-size: 1.5rem; padding: 0 0.75rem; box-sizing: border-box; border-radius: 1.25rem; background: color-mix(in srgb, var(--msw-hud-c1, #000) 80%, transparent 20%); color: var(--msw-hud-c2, #fff); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.85; transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; outline: none; box-shadow: none; touch-action: manipulation; position: fixed; /* Top: below HUD zone (1rem + 2.5rem Bars + 0.5rem gap + 2.5rem DE + 0.5rem gap = 7rem) */ top: 7rem; right: 1rem; z-index: 999999 !important; } /* ReadRoom inside zone: flows in flex column, moves up when lang button is hidden */ .msw-lang-switcher-zone .msw-reader-trigger-global { position: relative; top: auto; right: auto; } .msw-reader-trigger:hover { background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%); transform: scale(1.05); opacity: 1; } .msw-reader-trigger:active, .msw-reader-trigger:focus, .msw-reader-trigger:focus-visible { outline: none !important; background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%) !important; color: var(--msw-hud-c2, #fff) !important; -webkit-tap-highlight-color: transparent !important; } .msw-reader-trigger:active { transform: scale(0.97); opacity: 1; } /* Icon: C2 color (same as Bars & Language) */ .msw-reader-trigger .fas, .msw-reader-trigger .fa { color: inherit; font-family: inherit; font-weight: inherit; } /* Mobile: same oval as Bars/DE (2.5rem × 2.25rem); top aligns with HUD zone */ /* Mobile: 50% gentler shake for Read Room icon */ @media (max-width: 1023px) { .msw-reader-trigger-global.msw-reader-attention-on { animation: msw-reader-attention-mobile 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .msw-unique-gato[data-msw-rtl="1"] .msw-reader-trigger-global.msw-reader-attention-on { animation: msw-reader-attention-rtl-mobile 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .msw-reader-trigger { width: 2.5rem; min-width: 2.5rem; height: 2.25rem; padding: 0 0.625rem; font-size: 1.35rem; border-radius: 1.125rem; top: 6.25rem; right: 0.75rem; } } @media (max-width: 479px) { .msw-reader-trigger { top: 6rem; right: 0.5rem; } } @media (prefers-reduced-motion: reduce) { .msw-reader-trigger-global.msw-reader-attention-on, .msw-unique-gato[data-msw-rtl="1"] .msw-reader-trigger-global.msw-reader-attention-on { animation: none; } } /* --- READROOM CUE ARROW – real arrow SVG pointing to Read Room trigger, 1s display --- */ .msw-readroom-cue-arrow { position: fixed; z-index: 999999; width: 3rem; height: 3rem; pointer-events: none; animation: msw-readroom-cue-bounce 1s ease-out forwards; } .msw-readroom-cue-arrow svg { width: 100%; height: 100%; display: block; } @keyframes msw-readroom-cue-bounce { 0% { opacity: 0; transform: scale(0.8); } 20% { opacity: 1; transform: scale(1.05); } 40% { transform: scale(0.98); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .msw-readroom-cue-arrow { animation: none; opacity: 1; } } /* ========================================================================== NAVIGATION ARROWS - Responsive Hybrid Approach Mobile/Tablet (< 1024px): HIDDEN - use swipe gestures Desktop (>= 1024px): VISIBLE - click navigation ========================================================================== */ /* Base arrow styles (Desktop) */ .msw-nav-next, .msw-nav-prev { color: #dd3333 !important; position: absolute; top: 50%; transform: translateY(-50%); z-index: 110; cursor: pointer; /* Ensure arrows are always clickable */ pointer-events: auto; /* Prevent text selection */ user-select: none; -webkit-user-select: none; /* Smooth transitions */ transition: opacity 0.3s ease, transform 0.2s ease; } .msw-nav-next { right: 1.5625rem; } /* 25px → 1.5625rem */ .msw-nav-prev { left: 1.5625rem; } /* 25px → 1.5625rem */ /* Arrow hover effect (Desktop) */ .msw-nav-next:hover, .msw-nav-prev:hover { transform: translateY(-50%) scale(1.1); } /* Arrow focus state for accessibility */ .msw-nav-next:focus, .msw-nav-prev:focus { outline: 2px solid #dd3333; /* Keep px: accessibility standard */ outline-offset: 4px; /* Keep px: accessibility standard */ } /* Disabled state (blocked or at boundary – grayed out, not clickable) */ .msw-nav-next.msw-nav-disabled, .msw-nav-prev.msw-nav-disabled, .msw-nav-next.swiper-button-disabled, .msw-nav-prev.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } /* --- BLOCKED SHUTTER EFFECT --- Same visual feedback as hitting end of swiper: brief nudge when user tries to swipe in a blocked direction. JS adds .msw-shutter-blocked on touchEnd. */ @keyframes msw-shutter-blocked { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(6px); } 75% { transform: translateX(-6px); } } @keyframes msw-shutter-blocked-rtl { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .msw-shutter-blocked { animation: msw-shutter-blocked 0.15s ease-out; } .msw-unique-gato[data-msw-rtl="1"].msw-shutter-blocked { animation-name: msw-shutter-blocked-rtl; } /* ========================================================================== DESKTOP (>= 1025px) - Clean arrow hiding at first/last slide Uses Swiper's native isBeginning/isEnd. Does NOT affect "blocked" logic. ========================================================================== */ @media screen and (min-width: 1025px) { /* Hide left arrow on first slide */ .msw-unique-gato.msw-at-start .msw-nav-prev, .msw-unique-gato.msw-at-start .gato-prev { display: none !important; visibility: hidden !important; } /* Hide right arrow on last slide */ .msw-unique-gato.msw-at-end .msw-nav-next, .msw-unique-gato.msw-at-end .gato-next { display: none !important; visibility: hidden !important; } } /* Legacy class support (backwards compatibility) */ .gato-next, .gato-prev { color: #dd3333 !important; position: absolute; top: 50%; transform: translateY(-50%); z-index: 110; cursor: pointer; pointer-events: auto; } .gato-next { right: 1.5625rem; } /* 25px → 1.5625rem */ .gato-prev { left: 1.5625rem; } /* 25px → 1.5625rem */ /* ========================================================================== MOBILE & TABLET (< 1024px) - Hide arrows, use swipe only ========================================================================== */ @media screen and (max-width: 1023px) { /* Hide navigation arrows on mobile/tablet */ .msw-nav-next, .msw-nav-prev, .gato-next, .gato-prev, .msw-unique-gato .swiper-button-next, .msw-unique-gato .swiper-button-prev { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Adjust padding for mobile (more space since no arrows) */ .msw-unique-gato .swiper-slide { padding: 2vh 5% 3.75rem 5% !important; /* 60px → 3.75rem */ } } /* ========================================================================== READ ROOM / POPUP - Version 2.0.8 FEATURES: - Solid black background (zero distractions) - Mobile Safety Zone (3.75rem top) for browser bars & notches - Font scaling: +20% body text, +10% title on mobile - German word hyphenation support ========================================================================== */ /* --- OVERLAY (Solid black background for zero distractions) --- */ .msw-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000; /* SOLID BLACK - no transparency */ display: none; align-items: flex-start; /* Align to top for mobile safety zone */ justify-content: center; z-index: 999999 !important; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: 'Noto Sans', sans-serif !important; } /* Enforce Noto Sans on ALL elements inside popup overlay */ .msw-overlay *, .msw-overlay h1, .msw-overlay h5, .msw-overlay p { font-family: 'Noto Sans', sans-serif !important; } .msw-overlay.msw-visible { display: flex; } /* Lightbox mode: full-viewport image, no card chrome */ .msw-overlay.msw-lightbox-active .msw-popup-card { width: 100%; height: 100%; max-width: none; min-height: 100vh; margin: 0; border-radius: 0; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; } .msw-overlay.msw-lightbox-active #msw-popup-content img { max-width: 100%; max-height: 100vh; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; } /* --- POPUP CARD (Desktop) --- */ .msw-popup-card { background: #fff; width: 95%; max-width: 43.75rem; /* 700px → 43.75rem */ min-height: 50vh; max-height: none; /* No max-height - let it grow */ margin: 1.25rem auto; /* 20px → 1.25rem */ border-radius: 1rem; /* 16px → 1rem */ padding: 0.625rem 1.5625rem 2.5rem 1.5625rem; /* 10px 25px 40px 25px */ position: relative; text-align: left; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5); /* Keep px: shadow */ box-sizing: border-box; } /* --- CLOSE BUTTON (fa-times-circle) — Top-right of popup card, no circle background --- */ /* Icon: #3D3D3D for visibility on white card. TOFU fix: font-family !important overrides Elementor. */ .msw-close-popup { position: absolute; top: 0.25rem; right: 0.25rem; width: auto; height: auto; min-width: 2rem; min-height: 2rem; padding: 0.25rem; font-size: 1.75rem; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #3D3D3D; transition: transform 0.2s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; outline: none; box-shadow: none; z-index: 10; } /* No hover effect – only cursor: pointer. Lock colors to prevent Elementor/theme red hover box. */ .msw-close-popup:hover { background: none !important; background-color: transparent !important; color: #3D3D3D !important; box-shadow: none !important; outline: none !important; border: none !important; border-color: transparent !important; opacity: 1; transform: none; } .msw-close-popup:hover i { color: #3D3D3D !important; } /* Lock colors on click/focus – no red flash from Elementor/theme focus styles */ .msw-close-popup:active, .msw-close-popup:focus, .msw-close-popup:focus-visible { outline: none !important; -webkit-tap-highlight-color: transparent !important; background: none !important; background-color: transparent !important; color: #3D3D3D !important; box-shadow: none !important; border: none !important; border-color: transparent !important; } .msw-close-popup:active { transform: scale(0.95); } /* TOFU fix: Elementor/theme font-family: sans-serif !important breaks icon glyph */ .msw-close-popup i { color: inherit; font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; } /* Lock icon color on parent focus/active – prevents red inheritance */ .msw-close-popup:active i, .msw-close-popup:focus i, .msw-close-popup:focus-visible i { color: #3D3D3D !important; } /* --- POPUP TITLE (Desktop) --- */ .msw-popup-card h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 1.25rem 0; /* 20px → 1.25rem */ padding-right: 3.125rem; /* 50px → 3.125rem */ color: #222; line-height: 1.3; /* German word support */ hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; word-wrap: break-word; overflow-wrap: break-word; } /* --- BODY TEXT (Desktop) --- */ .msw-longtext { font-size: 1.1rem; line-height: 1.7; color: #333; margin-bottom: 1.25rem; /* 20px → 1.25rem */ /* German word support */ hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; word-wrap: break-word; overflow-wrap: break-word; } .msw-longtext:last-child { margin-bottom: 0; } /* --- IMAGES --- */ /* object-fit: contain prevents stretching when max-width + max-height are set inline */ .msw-pop-img { width: 100%; height: auto; object-fit: contain; border-radius: 0.625rem; /* 10px → 0.625rem */ margin: 1.25rem auto; /* 20px vertical; auto horizontal = centered */ display: block; } /* Top logo image in popup – constrain size, left-aligned */ .msw-popup-card .msw-pop-img:first-of-type { width: auto; max-width: 15.625rem; /* 250px → 15.625rem */ margin: 0 0 1.25rem 0 !important; /* 20px → 1.25rem */ } /* "Details" heading in popup – left-aligned, Y-aligned with close X */ .msw-popup-card h5 { text-align: left; margin: 0 0 0.625rem 0 !important; /* 10px → 0.625rem */ margin-top: 0 !important; padding-top: 0; font-family: 'Noto Sans', sans-serif !important; } /* --- READROOM LOADING SPINNER (Ghost Reader) Centered, visible on both light and dark slide backgrounds. Uses contrasting backdrop so spinner/text stand out. --- */ .msw-readroom-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 12rem; padding: 2rem; /* Subtle backdrop: visible on light slides (dark tint) and dark slides (light tint) */ background: rgba(128, 128, 128, 0.15); border-radius: 0.5rem; } .msw-readroom-spinner { display: block; width: 2.5rem; height: 2.5rem; border: 3px solid rgba(0, 0, 0, 0.15); border-top-color: #333; border-radius: 50%; animation: msw-readroom-spin 0.8s linear infinite; } .msw-readroom-loading-text { margin-top: 1rem; font-size: 1rem; color: #333; font-family: 'Noto Sans', sans-serif; } .msw-readroom-error .msw-readroom-loading-text { color: #c00; } @keyframes msw-readroom-spin { to { transform: rotate(360deg); } } /* ========================================================================== MOBILE & TABLET (< 1024px) - Safety Zone + Font Scaling Samsung A53 and similar devices with browser bars & notches ========================================================================== */ @media screen and (max-width: 1023px) { /* Overlay - Full screen, align content to top */ .msw-overlay { align-items: flex-start; padding: 0; } /* Popup Card - Full width with SAFETY ZONE at top */ .msw-popup-card { width: 100%; max-width: 100%; min-height: 100vh; margin: 0; border-radius: 0; /* SAFETY ZONE: fallback values before env() override */ padding-top: 4.375rem; /* 70px → 4.375rem */ padding-left: 1.25rem; /* 20px → 1.25rem */ padding-right: 1.25rem; /* 20px → 1.25rem */ padding-bottom: 2.5rem; /* 40px → 2.5rem */ /* Additional safe area support for notched devices */ /* Keep px inside max()/env(): device-specific calculations */ padding-top: max(5px, env(safe-area-inset-top, 30px)); padding-left: max(20px, env(safe-area-inset-left, 20px)); padding-right: max(20px, env(safe-area-inset-right, 20px)); padding-bottom: max(40px, env(safe-area-inset-bottom, 40px)); } /* Close Button - slightly larger tap target on mobile */ .msw-close-popup { top: max(0.25rem, env(safe-area-inset-top, 0.25rem)); right: max(0.25rem, env(safe-area-inset-right, 0.25rem)); font-size: 2rem; min-width: 2.5rem; min-height: 2.5rem; } /* Title - 10% larger on mobile, with word wrap */ .msw-popup-card h1 { font-size: 1.98rem; /* 1.8rem * 1.10 = 1.98rem (+10%) */ padding-right: 3.4375rem; /* 55px → 3.4375rem */ margin-bottom: 1.5625rem; /* 25px → 1.5625rem */ /* Critical for German words like "Kommunionempfang" */ hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; word-break: break-word; overflow-wrap: break-word; -webkit-line-clamp: unset; } /* Body Text - 20% larger on mobile */ .msw-longtext { font-size: 1.32rem; /* 1.1rem * 1.20 = 1.32rem (+20%) */ line-height: 1.8; /* German word support */ hyphens: auto; -webkit-hyphens: auto; word-break: break-word; overflow-wrap: break-word; } /* Images - Full width, smaller border radius; margin auto keeps horizontal centering */ .msw-pop-img { margin: 1.5625rem auto; /* 25px vertical; auto = centered on mobile */ border-radius: 0.5rem; /* 8px → 0.5rem */ } } /* ========================================================================== SMALL MOBILE (< 480px) - Extra adjustments for narrow screens ========================================================================== */ @media screen and (max-width: 479px) { /* msw-desc and h2: size comes from inline style per slide (clamp is responsive). */ .msw-popup-card { padding-left: 0.9375rem; /* 15px → 0.9375rem */ padding-right: 0.9375rem; /* 15px → 0.9375rem */ } .msw-popup-card h1 { font-size: 1.7rem; padding-right: 3.125rem; /* 50px → 3.125rem */ } .msw-longtext { font-size: 1.2rem; } .msw-close-popup { font-size: 1.75rem; } } /* ========================================================================== LANGUAGE SELECTOR TRIGGER BUTTON (v2.10.0) Fixed position, top-right corner. Opens the Elementor Language Popup. Shows the current language code (e.g. "DE", "EN", "AR") as a pill button. z-index 99997: below the ReadRoom overlay (99999) but above all slide content. Invisible to bots (no crawlable link, just a button element). Accessible: proper aria-label, focus ring, contrast ratio. ========================================================================== */ /* Language button: C1 for plane, C2 for "DE" text (same as bars button); synced via JS on slideChange. Oval: 2.75rem × 2.5rem. */ .msw-lang-trigger { position: fixed; top: 1rem; right: 1rem; z-index: 999999 !important; width: 2.75rem; min-width: 2.75rem; height: 2.5rem; padding: 0 0.75rem; box-sizing: border-box; border-radius: 1.25rem; background: color-mix(in srgb, var(--msw-hud-c1, #000) 80%, transparent 20%); color: var(--msw-hud-c2, #fff); border: none; cursor: pointer; font-weight: 700; font-size: 0.875rem; font-family: 'Noto Sans', sans-serif; text-transform: uppercase; letter-spacing: 1px; line-height: 2.5rem; transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; outline: none; box-shadow: none; opacity: 0.85; display: flex; align-items: center; justify-content: center; gap: 0.25rem; } .msw-lang-trigger:hover { background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%); transform: scale(1.05); opacity: 1; } /* Prevent red/focus flash on click – lock colors, no outline */ .msw-lang-trigger:focus, .msw-lang-trigger:focus-visible, .msw-lang-trigger:active { outline: none !important; background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%) !important; color: var(--msw-hud-c2, #fff) !important; -webkit-tap-highlight-color: transparent !important; } .msw-lang-trigger:active { transform: scale(0.97); opacity: 1; } /* Language Switcher Zone – stacks DE + Menu button */ .msw-lang-switcher-zone { position: fixed; top: 1rem; right: 1rem; z-index: 999999 !important; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; } /* Override: lang trigger no longer needs position fixed (inherits from zone) */ .msw-lang-switcher-zone .msw-lang-trigger { position: relative; top: auto; right: auto; } /* History Back button – inherits .msw-menu-global-btn; hidden when no msw_h */ .msw-history-back-btn { /* Same base as .msw-menu-global-btn – inherits all styles */ } .msw-history-back-btn.msw-history-hidden { display: none !important; } /* Global Menu Button – C1 for plane, C2 for bars icon. Same oval shape as Language (2.75rem × 2.5rem). */ .msw-menu-global-btn { font-family: 'Font Awesome 5 Free'; font-weight: 900; width: 2.75rem; min-width: 2.75rem; height: 2.5rem; padding: 0 0.75rem; box-sizing: border-box; border-radius: 1.25rem; background: color-mix(in srgb, var(--msw-hud-c1, #000) 80%, transparent 20%); color: var(--msw-hud-c2, #fff); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.85; transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; outline: none; box-shadow: none; } .msw-menu-global-btn:hover { background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%); transform: scale(1.05); opacity: 1; } .msw-menu-global-btn:focus, .msw-menu-global-btn:focus-visible, .msw-menu-global-btn:active { outline: none !important; background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%) !important; color: var(--msw-hud-c2, #fff) !important; -webkit-tap-highlight-color: transparent !important; } .msw-menu-global-btn:active { transform: scale(0.97); opacity: 1; } /* C2 for the "DE" text inside the language button */ .msw-lang-icon { display: inline-block; font-weight: 700; color: var(--msw-hud-c2, #fff); } /* Mobile: slightly smaller position, no overlap with browser UI */ @media (max-width: 1023px) { .msw-lang-switcher-zone { top: 0.75rem; right: 0.75rem; } .msw-lang-trigger { width: 2.5rem; min-width: 2.5rem; height: 2.25rem; line-height: 2.25rem; font-size: 0.8125rem; padding: 0 0.625rem; } .msw-menu-global-btn { width: 2.5rem; min-width: 2.5rem; height: 2.25rem; padding: 0 0.625rem; border-radius: 1.125rem; } } /* Small mobile: tighter */ @media (max-width: 479px) { .msw-lang-switcher-zone { top: 0.5rem; right: 0.5rem; } } /* ========================================================================== RTL (RIGHT-TO-LEFT) OVERRIDES (v2.10.0) Uses data-msw-rtl="1" (NOT dir="rtl") so Swiper stays in LTR swipe order. Only content gets RTL text alignment. HUD and navigation stay LTR. ========================================================================== */ /* RTL: Apply to content ONLY, not Swiper structure */ .msw-unique-gato[data-msw-rtl="1"] .msw-header, .msw-unique-gato[data-msw-rtl="1"] .msw-desc, .msw-unique-gato[data-msw-rtl="1"] .swiper-slide, .msw-unique-gato[data-msw-rtl="1"] .msw-footer-text, .msw-unique-gato[data-msw-rtl="1"] .msw-pincode-display { direction: rtl !important; text-align: right !important; } /* RTL: ReadRoom popup (sibling of swiper) */ .msw-unique-gato[data-msw-rtl="1"] ~ #msw-popup-overlay .msw-popup-card h1, .msw-unique-gato[data-msw-rtl="1"] ~ #msw-popup-overlay .msw-longtext { direction: rtl !important; text-align: right !important; } /* ========================================================================== LANGUAGE LINK STYLES (v2.10.0) Styles for language links inside JetEngine Listing Grids. Applied to .msw-lang-link elements created by [msw_lang_link] shortcode. ========================================================================== */ .msw-lang-link { display: inline-block; text-decoration: none; color: inherit; transition: opacity 0.2s ease; } .msw-lang-link:hover { opacity: 0.7; } /* ========================================================================== TOC Popup – [msw_toc] shortcode output. Dynamic sizing: fewer items = bigger font (3 items ~1.1rem, 12 items ~0.75rem). ========================================================================== */ .msw-toc-container { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; } .msw-toc-container .msw-toc-item { /* 3 items ~1.2rem, 6 items ~1rem, 12 items ~1rem min */ font-size: clamp(1rem, 4rem / var(--msw-toc-count, 4), 1.5rem); } .msw-toc-container .msw-toc-link { display: block; font-family: 'Noto Sans', sans-serif; color: inherit; text-decoration: none; padding: 0.5rem 1rem; transition: all 0.3s ease; } .msw-toc-container .msw-toc-link:hover { opacity: 0.85; } .msw-toc-empty { margin: 0.5rem 0; font-style: italic; opacity: 0.8; } /* Translation failed: strikethrough + dimmed (Dynamic Visibility via CSS class) */ .msw-lang-failed { text-decoration: line-through; opacity: 0.4; pointer-events: none; cursor: not-allowed; } /* ========================================================================== SMART HAND ANIMATION – V4 Original Design Version: 2.4.0 - Position: fixed, bottom 12vh (lower 20% of screen) - pointer-events: none – user can swipe THROUGH it - Hidden by default (display:none), JS adds .msw-hand-visible - NEVER on Desktop (>= 1024px) via CSS media query - FontAwesome fa-hand-pointer with realistic arc keyframes ========================================================================== */ /* Container – hidden by default, bottom-positioned */ .swipe-instruction { display: none; /* JS toggles via .msw-hand-visible */ position: fixed; bottom: 12vh; /* Lower 20% – does not block titles */ left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 0.625rem; /* 10px → 0.625rem */ padding: 1.25rem 1.875rem; /* 20px 30px → 1.25rem 1.875rem */ background: rgba(50, 50, 50, 0.92); border-radius: 1rem; /* 16px → 1rem */ box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4); /* Keep px: shadow */ z-index: 99998; opacity: 0; transition: opacity 0.4s ease; pointer-events: none !important; /* Swipe THROUGH the animation */ } /* Visible state – added/removed by JS */ .swipe-instruction.msw-hand-visible { display: flex; opacity: 1; } /* Fading-out state */ .swipe-instruction.msw-hand-fading { opacity: 0; } /* Icon row – chevrons + hand */ .swipe-icons { display: flex; gap: 1.5625rem; /* 25px → 1.5625rem */ font-size: 2.8125rem; /* 45px → 2.8125rem */ color: white; align-items: center; pointer-events: none !important; } /* Chevron arrows – subtle */ .swipe-arrow-left, .swipe-arrow-right { opacity: 0.3; font-size: 2.5rem; /* 40px → 2.5rem */ } /* Hand wrapper – carries the arc animation */ .moving-hand { display: inline-block; animation: swipeRealisticArc 2.625s ease-in-out infinite; /* 75% longer */ transform-origin: center bottom; } /* Hand icon */ .moving-hand i { font-size: 3.125rem; /* 50px → 3.125rem */ color: white; } /* "SWIPEN!" label – exact V4 styling */ .swipe-text { color: white; font-family: sans-serif; margin: 0.3125rem 0 0 0; /* 5px → 0.3125rem */ font-size: 1rem; /* 16px → 1rem */ font-weight: bold; text-transform: uppercase; letter-spacing: 2px; /* Keep px: letter-spacing convention */ } /* V4 realistic arc keyframes */ /* Keep px in translateX: physical pixel movement for animation precision */ @keyframes swipeRealisticArc { 0% { transform: translateX(0) rotate(0deg); opacity: 1; } 15% { transform: translateX(-8px) rotate(-10deg); opacity: 1; } 30% { transform: translateX(-25px) rotate(-18deg); opacity: 0.85; } 50% { transform: translateX(0) rotate(0deg); opacity: 1; } 65% { transform: translateX(25px) rotate(18deg); opacity: 0.85; } 80% { transform: translateX(8px) rotate(10deg); opacity: 1; } 100% { transform: translateX(0) rotate(0deg); opacity: 1; } } /* ===== DESKTOP: NEVER show hand ===== */ @media screen and (min-width: 1024px) { .swipe-instruction { display: none !important; visibility: hidden !important; pointer-events: none !important; } } /* ===== SMALL MOBILE: tighter spacing ===== */ @media screen and (max-height: 600px) { .swipe-instruction { bottom: 5vh; padding: 0.75rem 1.25rem; /* 12px 20px → 0.75rem 1.25rem */ } .swipe-icons { font-size: 2.1875rem; gap: 0.9375rem; } /* 35px → 2.1875rem, 15px → 0.9375rem */ .moving-hand i { font-size: 2.5rem; } /* 40px → 2.5rem */ .swipe-text { font-size: 0.8125rem; } /* 13px → 0.8125rem */ }