/* 99-modes.css Architecture: exactly ONE mode is active at a time via set by assets/js/mode-manager.js This file intentionally contains only safe scaffolding + debug chip styling. Move per-mode overrides here gradually, under html[data-mode="..."] selectors, to keep modes isolated. */ /* Debug chip (click to toggle) */ #lzk-modechip{ position:fixed; top:10px; left:10px; z-index:999999; padding:6px 10px; font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; border-radius: 10px; background: rgba(0,0,0,.72); color:#fff; border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); user-select:none; cursor:pointer; } #lzk-modechip small{ display:block; opacity:.75; margin-top:2px; } /* If user hides it */ html[data-modechip="off"] #lzk-modechip{ display:none; } /* ===== Mode scaffolding (empty by design) ===== */ html[data-mode="mobile-portrait"]{} html[data-mode="mobile-landscape"]{} html[data-mode="tablet-portrait"]{ /* MIGRATION #1 (proof): HOME — "Proceso de trabajo" must stay 4 columns in tablet portrait */ } /* HOME — Proceso de trabajo: force 4 columns on larger modes (override legacy MQs) */ html[data-mode="tablet-portrait"] #proceso .process-icons, html[data-mode="tablet-portrait"] .section.process .process-icons, html[data-mode="tablet-landscape"] #proceso .process-icons, html[data-mode="tablet-landscape"] .section.process .process-icons, html[data-mode="laptop"] #proceso .process-icons, html[data-mode="laptop"] .section.process .process-icons, html[data-mode="desktop"] #proceso .process-icons, html[data-mode="desktop"] .section.process .process-icons{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } /* ============================================================ LAB — CTA rail alignment (iPad 13 portrait / tablet-portrait) Goal: align CTA content to the same inner (narrow) rail used across text-heavy sections for readability. ============================================================ */ html[data-mode="tablet-portrait"] .lab-page .lab-cta-inner.container{ max-width: 860px; } /* Autoplay overlay (center-center) to fully cover Vimeo endscreen during auto-advance */ .lzk-autonext-overlay{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; display:none; /* hidden by default */ align-items:center; justify-content:center; background:#000 !important; /* 100% black */ opacity:1 !important; /* never translucent */ z-index:999; /* above iframe + controls */ pointer-events:none; /* switched on when visible */ user-select:none; -webkit-user-select:none; touch-action:none; } .lzk-autonext-overlay, .lzk-autonext-overlay *{ user-select:none !important; -webkit-user-select:none !important; -ms-user-select:none !important; -webkit-tap-highlight-color: transparent; } /* Even if some browser ends up selecting text, never show selection highlight */ .lzk-autonext-overlay ::selection{ background: transparent !important; color: inherit !important; } .lzk-autonext-overlay ::-moz-selection{ background: transparent !important; color: inherit !important; } .lzk-autonext-overlay.is-visible{ display:flex; pointer-events:auto; /* block taps/clicks */ } /* When the autonext overlay is active, force the video frame itself to be pure black. This avoids any browser-specific highlight/selection-looking artifacts over light frame backgrounds (white skin). */ .modal__frame.lzk-autonext-active{ background:#000 !important; } .lzk-autonext-overlay__inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px 20px; border-radius:16px; background:transparent; } .lzk-autonext-overlay__label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#fff; opacity:.92; } .lzk-autonext-overlay__count{ font-size:34px; line-height:1; letter-spacing:.02em; color:#fff; } /* End-of-playlist panel (CTA buttons) */ .lzk-autonext-overlay__msg{ font-size:14px; line-height:1.35; color:#fff; opacity:.9; text-align:center; max-width: 26ch; } .lzk-autonext-overlay__actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top: 6px; } .lzk-autonext-btn{ appearance:none; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); color:#fff; font-size:13px; padding:10px 14px; border-radius:999px; cursor:pointer; outline:none; box-shadow:none; } .lzk-autonext-btn:focus, .lzk-autonext-btn:focus-visible{ outline:none !important; box-shadow:none !important; } .lzk-autonext-btn:hover{ background: rgba(255,255,255,.14); } .lzk-autonext-btn--ghost{ background: transparent; border-color: rgba(255,255,255,.12); opacity:.9; } /* Prevent accidental text selection while overlays/panels are shown (fixes "selected text" look in white skin) */ .lzk-no-select, .lzk-no-select *{ user-select:none !important; -webkit-user-select:none !important; -ms-user-select:none !important; -webkit-tap-highlight-color: transparent; } .lzk-no-select *:focus{ outline:none !important; }