/* * FrenchIRL — Try-It Inline Drawer * * This file handles ONLY the drawer mechanism (wrapper, button, open/close animation). * All quiz styling (card, button gradients, audio player, completion card, dropdown) * comes from try-it.css — the same stylesheet used on /try-it/. */ /* ── Wrapper ─────────────────────────────────────────────────────────────── */ .tryit-inline { display: block !important; width: 100% !important; text-align: center; box-sizing: border-box; } /* ── CTA row ─────────────────────────────────────────────────────────────── */ .tryit-inline__cta { display: flex; flex-direction: column; align-items: center; gap: 8px; } /* ── Trigger button ──────────────────────────────────────────────────────── */ #tryit-hp-trigger { cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease; } #tryit-hp-trigger:hover { opacity: 0.88; transform: translateY(-1px); } #tryit-hp-trigger:active { transform: translateY(0); } /* ── Sub-note ────────────────────────────────────────────────────────────── */ .tryit-inline__note { font-size: 0.8rem; color: #9CA3AF; margin: 0; font-style: italic; } /* ── Drawer animation: opacity + translateY (NO overflow:hidden) ─────────── */ /* * IMPORTANT: We use opacity/transform instead of max-height + overflow:hidden. * * The max-height approach required overflow:hidden to clip content during * animation — but that same overflow:hidden ALSO clipped the quiz slot's * full-bleed breakout, causing the narrow-card bug on mobile. * * opacity + translateY gives a smooth reveal with zero overflow clipping. */ .tryit-inline__drawer { display: none; overflow: visible !important; opacity: 0; transform: translateY(-8px); transition: opacity 350ms ease, transform 350ms ease; } .tryit-inline__drawer.is-open { display: block; opacity: 1; transform: translateY(0); } /* ── Scope the try-it experience inside the drawer ───────────────────────── */ /* try-it.css .tryit-quiz-slot.is-active provides the card styling. Add a bit of top margin so the card doesn't sit flush against the button. */ #tryit-inline-drawer #tryit-experience { margin-top: 16px; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* ── Suppress page-level elements try-it.js appends to ────────────── */ /* #tryit-top-bar and #tryit-mobile-bar are position:fixed and work fine — they show during practice and give the user audio controls. We only suppress things that don't make sense in a drawer. */ /* Level nav (prev/next level buttons) — not relevant for single-quiz drawer */ #tryit-inline-drawer .tryit-level-nav, #tryit-inline-drawer .tryit-level-selector, #tryit-inline-drawer .tryit-level-note { display: none !important; } /* Sticky CTA footer — position:fixed, would overlap page. Suppress in drawer. */ #tryit-inline-drawer .tryit-sticky-cta { display: none !important; } /* ── Completion card — drawer-specific spacing ───────────────────────────── */ #tryit-inline-drawer .tryit-completion { margin-top: 8px; } @media (max-width: 600px) { #tryit-inline-drawer #tryit-experience { margin-top: 8px; } } /* ── Mobile: full-bleed breakout ─────────────────────────────────────────── */ /* * Strategy: .tryit-inline is the ONE breakout element on mobile. * We use the SAME retail technique from front.css (.tw-bs4): * position:relative + left:50% + margin-left:-50vw * This works regardless of how much padding Kadence adds to the parent, * and regardless of whether the parent is centered or starts at x:0. * * Everything inside the drawer (.tryit-inline__drawer, .tryit-quiz-slot, * .tw-bs4) must NOT attempt its own breakout — it just fills 100% width. */ @media (max-width: 768px) { /* ① Break .tryit-inline out to full viewport width */ .tryit-inline { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box !important; } /* ② Drawer fills 100% of the now-viewport-wide .tryit-inline */ .tryit-inline__drawer { width: 100% !important; box-sizing: border-box !important; } /* ③ CTA trigger stays centered at a reasonable width */ .tryit-inline__cta { width: 100% !important; max-width: 500px !important; margin: 0 auto !important; padding: 0 20px !important; box-sizing: border-box !important; } /* ④ Quiz container and slot fill parent with no horizontal padding. .tw-bs4 provides the 14px gutters (same as retail). */ #tryit-inline-drawer .tryit-quiz-container { padding-left: 0 !important; padding-right: 0 !important; } #tryit-inline-drawer .tryit-quiz-slot.is-active { width: 100% !important; position: static !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ⑤ front.css applies its own breakout to ALL .tw-bs4 on mobile. Cancel it inside the drawer — the slot is already full-width. */ #tryit-inline-drawer .tw-bs4 { position: static !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: visible !important; } /* ⑥ Completion card gets horizontal padding since it's inside a full-width container */ #tryit-inline-drawer #tryit-completion { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } }