/* ============================================================ GLOBAL ROOT LAYOUT (fix split layout, width overflow, globals) ============================================================ */ /* Clean reset only inside the abtesting page */ .abtesting-page, .abtesting-page * { box-sizing: border-box; font-family: 'Inter', sans-serif; margin: 0; padding: 0; } /* Root wrapper (the element has this class) */ .abtesting-wrapper { background: #0d0d0d; color: #f0f0f0; width: 100%; max-width: 100%; height: 100vh; overflow-x: hidden !important; /* CRITICAL FIX */ overflow-y: hidden; position: relative; } /* Fix any container under the wrapper */ .abtesting-page, .abtesting-page .container, .abtesting-page .slides-wrapper { width: 100%; max-width: 100%; height: 100%; overflow: hidden !important; /* CRITICAL FIX */ } /* ============================================================ CONTAINER (main) ============================================================ */ .abtesting-page .container { display: flex; flex-direction: column; height: 100%; background: #0d0d0d; position: relative; z-index: 1; } /* ============================================================ SLIDES WRAPPER ============================================================ */ .abtesting-page .slides-wrapper { position: relative; flex: 1; height: 100%; overflow: hidden; } /* ============================================================ SLIDE BASE ============================================================ */ /* ============================================================ FIX SLIDE CLIPPING FOR ALL SLIDES ============================================================ */ .abtesting-page .slide { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transform: translateX(100%); transition: opacity 0.4s ease, transform 0.6s ease; pointer-events: none; overflow-x: hidden; overflow-y: hidden !important; /* 100% FIX */ } .abtesting-page .slide.active { opacity: 1; transform: translateX(0); pointer-events: auto; z-index: 10; } /* Slide text */ .abtesting-page .slide h1 { font-size: 2rem; color: #4ade80; margin-bottom: 0.8rem; } .abtesting-page .slide p { font-size: 1.1rem; color: #ddd; text-align: center; max-width: 760px; line-height: 1.5; } /* ============================================================ SLIDE 1 — Welcome ============================================================ */ .abtesting-page #slide1 { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 1rem; } .abtesting-page #slide1 h1 { font-size: 2.4rem; color: #4ade80; margin-bottom: 1rem; } .abtesting-page #slide1 p { font-size: 1.3rem; color: #ddd; max-width: 650px; text-align: center; line-height: 1.6; } /* ============================================================ SLIDE 2 — Visits Chart ============================================================ */ .abtesting-page #slide2 { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: 100%; padding-top: 1rem; } .abtesting-page #slide2 .chart-comment-wrapper { display: flex; flex-direction: column; width: 90%; height: 85%; background: #111; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; overflow: hidden; } /* TOP CHART AREA */ .abtesting-page #visitsChartContainer { flex: 6; display: flex; justify-content: center; align-items: center; background: #1a1a1a; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } /* BOTTOM COMMENT AREA */ .abtesting-page #commentVisitsChart { flex: 4; padding: 1rem; background: #0d0d0d; color: #ccc; font-size: 0.9rem; line-height: 1.4; overflow-y: auto; } .abtesting-page #commentVisitsChart p { text-align: justify; max-width: 1100px; margin: 0 auto; } /* scrollbar */ .abtesting-page #commentVisitsChart::-webkit-scrollbar { width: 6px; } .abtesting-page #commentVisitsChart::-webkit-scrollbar-thumb { background: #444; border-radius: 6px; } /* ============================================================ SLIDE 3 — A/B Screens ============================================================ */ .abtesting-page #slide3 { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; padding-top: 1rem; } .abtesting-page #slide3 .layout { display: flex; flex-direction: row; width: 90%; height: 90%; gap: 1rem; } /* Left + Right Columns */ .abtesting-page #slide3 .col { display: flex; flex-direction: column; width: 50%; justify-content: space-between; align-items: center; } /* Left column image boxes */ .abtesting-page #slide3 .col.left .img-box { flex: 1; display: flex; justify-content: center; align-items: center; } .abtesting-page #slide3 .col.left .img-box img { max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* === FIX SLIDE 3 RIGHT COLUMN (final) === */ #abButtons { flex: 0 0 auto; /* DO NOT grow, DO NOT shrink */ border: 1px dotted gray; } #abButtons img { max-height: 300px !important; /* force small */ width: auto; } /* Make the right column allow children to flow normally */ #slide3 .col.right { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: visible !important; /* CRITICAL FIX */ height: 100%; gap: 1rem; } #abComment { display: flex; /* allow vertical centering */ flex-direction: column; justify-content: center; /* CENTER vertically */ align-items: center; /* CENTER horizontally */ width: auto; max-width: 85%; align-self: center; flex: 1; /* fill remaining vertical height */ overflow-y: auto; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 1.2rem; color: #ddd; font-size: 0.95rem; line-height: 1.6; } #abComment p { max-width: 90%; text-align: justify; /* or center */ margin: 0 auto; /* ensures perfect center alignment */ } /* ============================================================ SLIDE 4 — Experiment Setup Parameters ============================================================ */ .abtesting-page #slide4 { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; padding-top: 1rem; } .abtesting-page #slide4 .layout { display: flex; flex-direction: row; width: 90%; height: 85%; gap: 1rem; } /* LEFT column — two stacked images */ .abtesting-page #slide4 .col-left { display: flex; flex-direction: column; width: 40%; gap: 0.7rem; } .abtesting-page #slide4 .col-left .img-box-small { flex: 1; display: flex; justify-content: center; align-items: center; } .abtesting-page #slide4 .col-left img { max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 6px; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); cursor: pointer; } .abtesting-page #slide4 .col-left img:hover { transform: scale(1.03); box-shadow: 0 0 18px rgba(0, 255, 128, 0.4); } /* RIGHT column — big image + comment */ .abtesting-page #slide4 .col-right { display: flex; flex-direction: column; width: 60%; gap: 1.2rem; } .abtesting-page #slide4 .col-right .img-box { flex: 4; display: flex; justify-content: center; align-items: center; } .abtesting-page #slide4 .col-right img { max-width: 70%; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.8); cursor: pointer; } .abtesting-page #slide4 .col-right img:hover { transform: scale(1.03); box-shadow: 0 0 25px rgba(0, 255, 128, 0.8); } .abtesting-page #slide4 .comment-box { flex: 6; padding: 1rem; background: rgba(255, 255, 255, 0.06); border-radius: 10px; color: #ddd; font-size: 1rem; line-height: 1.5; overflow-y: auto; } /* Responsive */ /* @media (max-width: 1024px) { .abtesting-page #slide4 .layout { flex-direction: column; height: auto; } .abtesting-page #slide4 .col-left, .abtesting-page #slide4 .col-right { width: 100%; } } */ /* ============================================================ SLIDE 5 — Power Simulation ============================================================ */ .abtesting-page #slide5 { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; padding-top: 1rem; } .abtesting-page #slide5 .chart-comment-wrapper-ver-2 { display: flex; flex-direction: column; width: 100%; height: 90%; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; overflow: hidden; } /* TOP area (UI + chart) */ .abtesting-page #powerChartContainer { flex: 6; display: flex; justify-content: center; align-items: center; gap: 2.5rem; background: #909090; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } /* UI Panel */ .abtesting-page .power-ui { flex: 3; display: flex; flex-direction: column; gap: 1rem; padding: 0 1rem; color: #eee; } .abtesting-page .power-ui .slider { width: 100%; } .abtesting-page .power-ui .controls { display: flex; gap: 0.5rem; } .abtesting-page .power-ui .controls button { flex: 1; padding: 0.5rem; background: #444; border-radius: 6px; border: 1px solid #666; color: white; cursor: pointer; transition: 0.25s ease; } .abtesting-page .power-ui .controls button:hover { background: #555; } /* SVG chart container */ .abtesting-page #powerChartCanvas { flex: 6; display: flex; justify-content: center; align-items: center; } /* Bottom comment */ .abtesting-page #commentPowerChart { flex: 4; display: flex; /* enable flexbox */ flex-direction: column; /* vertical layout */ justify-content: center; /* ⬆⬇ center vertically */ align-items: center; /* ⬅➡ center horizontally */ padding: 1rem; background: rgba(255, 255, 255, 0.08); color: #ddd; font-size: 0.95rem; line-height: 1.4; overflow-y: auto; } /* Keep your paragraph formatting */ .abtesting-page #commentPowerChart p { max-width: 1100px; text-align: justify; margin: 0 auto; } /* ============================================================ SLIDE 6 — Days Required ============================================================ */ .abtesting-page #slide6 { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; padding-top: 1rem; } .abtesting-page #slide6 .chart-comment-wrapper { display: flex; flex-direction: column; width: 90%; height: 85%; gap: 1rem; background: rgba(255, 255, 255, 0.04); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; } /* TOP chart */ .abtesting-page #chart6Container { flex: 6; display: flex; justify-content: center; align-items: center; } .abtesting-page #chart6Container img { max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* Bottom comment */ .abtesting-page #commentSlide6 { flex: 4; /* ⭐ enable vertical centering */ display: flex; flex-direction: column; justify-content: center; /* vertical center */ align-items: center; /* horizontal center */ padding: 1rem; background: rgba(255, 255, 255, 0.05); color: #ddd; font-size: 1rem; line-height: 1.5; overflow-y: auto; text-align: center; } .abtesting-page #commentSlide6 p { max-width: 1000px; margin: 0 auto; text-align: justify; } /* ============================================================ SLIDE 7 — A/B Test Period & Sample Size ============================================================ */ .abtesting-page #slide7 { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; padding-top: 1rem; } .abtesting-page #slide7 .chart-comment-wrapper { display: flex; flex-direction: column; width: 90%; height: 90%; gap: 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; overflow: hidden; } /* TOP IMAGE */ .abtesting-page #chart7Container { flex: 6; display: flex; justify-content: center; align-items: center; padding: 1rem; } .abtesting-page #chart7Container img { max-width: 50%; /* max-height: 95%; */ object-fit: contain; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); transition: 0.25s ease; } .abtesting-page #chart7Container img:hover { transform: scale(1.03); box-shadow: 0 0 26px rgba(0, 255, 128, 0.8); } /* BOTTOM COMMENT */ .abtesting-page #commentSlide7 { flex: 4; padding: 1rem 1.2rem; background: rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.1); color: #ddd; overflow-y: auto; text-align: center; } .abtesting-page #commentSlide7 p { max-width: 1100px; margin: 0 auto; font-size: 1.1rem; text-align: justify; line-height: 1.6; } /* ============================================================ SLIDE 8 — Parametric A/B p-value (MATCHED TO SLIDE 7) ============================================================ */ .abtesting-page #slide8 { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; padding-top: 1rem; } .abtesting-page #slide8 .chart-comment-wrapper { display: flex; flex-direction: column; width: 90%; height: 90%; gap: 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; overflow: hidden; /* just like slide 7 */ } /* TOP IMAGE AREA */ .abtesting-page #chart8Container { flex: 6; /* same ratio as slide 7 */ display: flex; justify-content: center; align-items: center; padding: 1rem; /* same spacing as slide 7 */ } /* Image itself */ .abtesting-page #chart8Container img { max-width: 50%; /* SAME AS SLIDE 7 */ object-fit: contain; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); transition: 0.25s ease; } .abtesting-page #chart8Container img:hover { transform: scale(1.03); box-shadow: 0 0 26px rgba(0, 255, 128, 0.8); } /* BOTTOM COMMENT */ .abtesting-page #commentSlide8 { flex: 4; /* NEW: flexbox centering */ display: flex; flex-direction: column; justify-content: center; /* vertical centering */ align-items: center; /* horizontal centering */ padding: 1rem 1.2rem; background: rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.1); color: #ddd; overflow-y: auto; text-align: center; } .abtesting-page #commentSlide8 p { max-width: 1100px; margin: 0 auto; font-size: 1.2rem; text-align: justify; line-height: 1.6; } /* ============================================================ SLIDE 9 — Conclusion ============================================================ */ .abtesting-page #slide9 { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; padding-top: 1rem; } .abtesting-page #slide9 .chart-comment-wrapper { display: flex; justify-content: center; align-items: center; width: 80%; padding: 2rem; margin-top: 1rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; text-align: center; } .abtesting-page #conclusionBox { max-width: 900px; } .abtesting-page #conclusionBox p { font-size: 1.05rem; color: #ddd; line-height: 1.6; text-align: justify; } .abtesting-page .github-link { margin-top: 2rem; text-align: center; font-size: 1.2rem; } .abtesting-page .github-link a { color: #4ade80; text-decoration: none; font-weight: 600; transition: 0.25s ease; } .abtesting-page .github-link a:hover { color: #7ef5a0; text-shadow: 0 0 10px rgba(150, 255, 200, 0.6); } /* ============================================================ LIGHTBOX OVERLAY ============================================================ */ .abtesting-page #lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; /* shown via JS */ justify-content: center; align-items: center; z-index: 999999; padding: 1rem; } .abtesting-page #lightbox-img { max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 10px; box-shadow: 0 0 30px rgba(0, 255, 150, 0.4); } .abtesting-page #lightbox .close { position: absolute; top: 20px; right: 30px; font-size: 3rem; color: #fff; cursor: pointer; font-weight: 600; text-shadow: 0 0 10px rgba(0, 255, 150, 0.7); transition: 0.25s ease; } .abtesting-page #lightbox .close:hover { color: #4ade80; text-shadow: 0 0 14px rgba(122, 255, 180, 0.8); } /* ============================================================ NAVIGATION BAR — HOME / PREV / NEXT ============================================================ */ .abtesting-page .nav { height: 70px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 1.2rem; background: rgba(18, 18, 18, 0.75); border-top: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3); } .abtesting-page .nav button { padding: 0.55rem 1.2rem; background: #222; color: #eee; border: 1px solid #555; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: 0.25s ease; } .abtesting-page .nav button:hover { background: #333; color: #4ade80; border-color: #4ade80; } /* ============================================================ SCREEN SIZE WARNING OVERLAY ============================================================ */ .abtesting-wrapper #screenWarning { position: fixed; inset: 0; width: 100vw; height: 100vh; display: none; /* JS toggles */ justify-content: center; align-items: center; background: #0f0f0f; color: #fff; padding: 30px; z-index: 9999999; } .abtesting-wrapper .screen-warning-box { max-width: 600px; text-align: center; background: #1e1e1e; padding: 40px; border: 2px solid #4ade80; border-radius: 12px; box-shadow: 0 0 25px rgba(0, 255, 150, 0.3); } .abtesting-wrapper .screen-warning-box h1 { font-size: 32px; margin-bottom: 20px; } .abtesting-wrapper .screen-warning-box p { font-size: 18px; line-height: 1.5; } /* ============================================================ FINAL SLIDE — SlideEnd ============================================================ */ .abtesting-page #slideEnd { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; } .abtesting-page #slideEnd h1 { color: #4ade80; font-size: 2.4rem; margin-bottom: 1.5rem; text-shadow: 0 0 14px rgba(0, 255, 150, 0.5); } .abtesting-page #slideEnd p { font-size: 1.3rem; color: #ccc; max-width: 800px; text-align: center; line-height: 1.6; }