/** * Disclaimer modal — overlay, dialog, scrollable body, Continue button. * * Hidden by default; shown only when * is set by the head script in inc/disclaimer-modal.php BEFORE the page paints, * so users who've already accepted don't see a flash. * * Inside the dialog, the acf/modal-content block renders: * .c-modal-content * ├── .c-modal-content__intro (fixed top: header + title + subtitle) * └── .c-modal-content__body (the scrollable region: legal text) * This file makes the body scroll while the intro stays in place; on the * standalone disclaimer page the same block renders without these * constraints, so everything flows naturally. */ /* ---- show/hide gate ----------------------------------------------------- */ .rulematch-disclaimer-modal { display: none; } html.rulematch-needs-disclaimer .rulematch-disclaimer-modal { display: block; } /* Lock background page scroll while the modal is up. */ html.rulematch-needs-disclaimer, html.rulematch-needs-disclaimer body { overflow: hidden; } /* ---- overlay ------------------------------------------------------------ */ .rulematch-disclaimer-modal__overlay { position: fixed; inset: 0; background: rgba(14, 26, 46, 0.6); /* Rulematch dark blue, ~60% */ backdrop-filter: blur(4px); z-index: 9998; } /* ---- dialog ------------------------------------------------------------- */ .rulematch-disclaimer-modal__dialog { position: fixed; inset: 0; margin: auto; width: min(92vw, 1080px); max-height: 60vh; background: #ffffff; z-index: 9999; display: flex; flex-direction: column; padding: 40px 48px 24px 48px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); } /* Left accent line, spans the dialog's full height inside its left padding. */ .rulematch-disclaimer-modal__accent { position: absolute; left: 24px; top: 24px; bottom: 24px; width: 5px; background: #4277CC; /* Highlight Blue */ } /* ---- block layout inside the dialog ------------------------------------- */ /* * The block render produces .block-modal-content wrapping .c-modal-content. * Both need to fill the available height so .c-modal-content__body can * actually become scrollable (without an explicit height ancestor, the * intrinsic content height would just expand the dialog). */ .rulematch-disclaimer-modal__content { flex: 1; min-height: 0; /* allow the flex child to shrink */ display: flex; flex-direction: column; margin-top: 8px; } .rulematch-disclaimer-modal__content .block-modal-content, .rulematch-disclaimer-modal__content .c-modal-content { flex: 1; min-height: 0; display: flex; flex-direction: column; } .rulematch-disclaimer-modal__content .c-modal-content__body { flex: 1; min-height: 0; overflow-y: auto; /* browser-default scrollbar, per spec */ padding-right: 16px; /* breathing room before the scrollbar */ } /* ---- footer + buttons -------------------------------------------------- */ /* * Footer holds two buttons: Decline (left, secondary outline style) and * Confirm (right, primary filled style). `space-between` pushes them to * opposite ends; DOM order in template-parts/disclaimer-modal.php is * Decline first, Confirm second. */ .rulematch-disclaimer-modal__footer { margin-top: 16px; display: flex; justify-content: space-between; gap: 16px; /* breathing room when the dialog is narrow */ } /* * Shared dimensions for the two buttons so they stay visually balanced * regardless of label width. */ .rulematch-disclaimer-modal__continue, .rulematch-disclaimer-modal__decline { display: inline-block; min-width: 146px; padding: 7px 16px; font-weight: 500; font-size: 18px; line-height: 1.25; text-align: center; border-radius: 0; transition: background-color 0.15s, color 0.15s; } /* --- Confirm — primary, filled. Disabled until scrolled to bottom. ----- */ .rulematch-disclaimer-modal__continue { background: rgba(66, 119, 204, 0.54); /* disabled state: 54% opacity */ color: #ffffff; border: 0; cursor: not-allowed; } .rulematch-disclaimer-modal__continue:not([disabled]) { background: #4277CC; cursor: pointer; } .rulematch-disclaimer-modal__continue:not([disabled]):hover { filter: brightness(1.1); } /* --- Decline — secondary, outline. Always enabled. -------------------- */ /* * Border-only "secondary" treatment scoped to the disclaimer modal — the * theme's site-wide button styles (.btn-gradient) bring a gradient * background that would feel too heavy against a flat-white modal, so we * keep this self-contained next to __continue. If a secondary button is * ever needed elsewhere, factor this out into a shared component class * (e.g. .btn-outline-blue is already defined by Bootstrap in main.css, * but it pulls in a lot of base .btn styling that we don't need here). */ .rulematch-disclaimer-modal__decline { background: transparent; color: #4277CC; border: 1px solid #4277CC; cursor: pointer; } .rulematch-disclaimer-modal__decline:hover { background: rgba(66, 119, 204, 0.08); /* faint fill on hover */ } /* ---- small screens ----------------------------------------------------- */ @media (max-width: 640px) { .rulematch-disclaimer-modal__dialog { width: 100vw; /* `svh` (small viewport height) excludes mobile browser chrome * (URL bar, nav bar) from the height value, so the dialog * doesn't extend behind those bars and clip the Confirm button. * Fallback to `vh` for old browsers (would render the old broken * way, but that's no worse than current). */ height: 100vh; height: 100svh; max-height: 100vh; max-height: 100svh; /* Reset desktop padding then expand to respect notches + home * indicators on iOS / Android curved displays. `env(...)` returns * 0 if not supported, so `max(..., 0)` keeps the base padding. */ padding-top: max(20px, env(safe-area-inset-top)); padding-right: max(24px, env(safe-area-inset-right)); padding-bottom: max(16px, env(safe-area-inset-bottom)); padding-left: max(24px, env(safe-area-inset-left)); } .rulematch-disclaimer-modal__accent { left: 8px; top: 16px; bottom: 16px; } }