/* Slides Application Styles */ /* Note: Loading indicator styles are inlined in deck.html.erb to prevent flash of unstyled content during initial page load. This matches Next.js behavior where critical CSS loads before external stylesheets. */ /* ===== Typography Import (must be first) ===== */ @import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&display=swap"); /* ===== CSS Reset ===== */ * { box-sizing: border-box; } /* ===== Root Variables ===== */ :root { --color-primary: #7059e7; --color-old-primary: #5135cc; --color-text: #585858; --color-text-header: #000000; --color-text-subtext: #333333; --color-progress-completed: #f1c54a; --color-progress-remaining: #f9eecc; --color-white: #ffffff; --color-bg: #f5f5f5; } a { color: var(--color-primary); transition: all 0.3s; } /* ===== Main Layout ===== */ .deck { width: 100%; height: 100%; } .deck__header { display: none; } /* ===== Swiper Container ===== */ .swiper { width: 100%; height: calc(100svh - 4px); background: transparent; overflow: hidden; } .swiper-wrapper { height: 100%; } .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) { visibility: hidden; pointer-events: none; content-visibility: hidden; } .swiper-slide-prev, .swiper-slide-next { pointer-events: none; } .swiper-resizing .swiper-slide:not(.swiper-slide-active) { visibility: hidden; opacity: 0; transition: none; } /* Hide intermediate slides during non-sequential navigation */ /* Disabling transforms/transitions prevents visual glitches during jumps */ .swiper-slide.swiper-slide-hidden { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transform: none !important; transition: none !important; } /* ===== Slide Content ===== */ .deck__slide { width: 100%; padding: 3rem; text-align: center; opacity: 0; transform: translateY(30px); } .swiper-slide-active .deck__slide { animation: sl-drop-in 0.7s ease 0.3s forwards; } /* Keep outgoing slide content visible during transition */ .swiper-slide-prev .deck__slide, .swiper-slide-next .deck__slide { opacity: 1; transform: none; animation: none; } /* ===== Swiper Pagination ===== */ .swiper-pagination { display: none; } @keyframes sl-drop-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Fade-in animation for non-sequential slide transitions */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ===== Error Messages ===== */ .sl-error-msg { opacity: 0; animation: sl-error 0.4s ease 0.1s forwards; color: #ef4444; margin-top: 8px; font-size: 14px; } /* ===== Other Choice Input ===== */ .sl-choice-input { width: 100%; margin-top: 8px; padding: 10px 16px; border: 1px solid rgba(112, 89, 231, 0.2); border-radius: 8px; font-size: 18px; color: var(--color-text); outline: none; } .sl-choice-input:focus { border-color: var(--color-primary); } /* ===== Attachment/Media Styles ===== */ .sl-attachment { width: 100%; }