/* ------------------------------------------------------------------------- * * OCHBS age gate — split panel * * Deployed to: wp-content/uploads/ochbs-assets/ochbs-age-gate.css * Loaded by: mu-plugins/ochbs-age-gate.php (dependency: the `age-gate` handle, * so these custom properties land after the plugin's own :root * block and win on source order at equal specificity). * * The Age Gate plugin is entirely custom-property driven, so most of this is * variables rather than rule overrides. Only the geometry — splitting the fixed * full-screen background layer and the card into two columns — needs real rules. * * Markup this targets (rendered client-side from #tmpl-age-gate): * .age-gate__wrapper * .age-gate__loader * .age-gate__background-color fixed, full screen, z-index 1 * .age-gate__background fixed, full screen, z-index 2 <- the photo * .age-gate the card <- the panel * form.age-gate__form * .age-gate__heading > img--logo * .ochbs-ag-meta <- injected by the mu-plugin * .age-gate__headline * .age-gate__subheadline * .age-gate__fields > .age-gate__challenge + .age-gate__buttons * .age-gate__remember-wrapper * .age-gate__errors * ------------------------------------------------------------------------- */ :root { /* Brand, matching the hero this gate opens onto. */ --ochbs-ink: #0c0f0d; --ochbs-cream: #f3efe6; --ochbs-muted: #b8b2a4; --ochbs-green: #1f7a4d; --ochbs-green-bright: #2a9a64; /* Width of the gate panel; the photo takes whatever is left. */ --ochbs-ag-panel: clamp(400px, 42vw, 600px); /* --- plugin overrides ------------------------------------------------ */ /* The stock blur exists to obscure the page behind a translucent overlay. The photo is opaque, so it would only cost GPU time. */ --ag-blur: 0px; /* Sits *behind* the photo (z-index 1 vs 2), so it is only visible in the moment before the image paints. Match the panel so that is not a flash. */ --ag-background-color: var(--ochbs-ink); /* Desktop half-panel is portrait-ish, but this is the same file the hero loads immediately afterwards — reusing it makes the gate's image free. */ --ag-background-image: url("/wp-content/uploads/ochbs-hero/scene1.webp"); --ag-background-image-position: center center; --ag-background-image-opacity: 1; --ag-form-background: var(--ochbs-ink); --ag-text-color: var(--ochbs-cream); /* Card becomes a full-height panel, so every constraint on it has to go. */ --ag-wrapper-padding: 0; --ag-form-max-width: none; --ag-form-max-height: none; --ag-form-margin: 0; --ag-form-radius: 0; --ag-form-padding: clamp(28px, 3.4vw, 56px); --ag-logo-max-width: 132px; --ag-text-heading-margin: 0 0 1.75rem; --ag-text-headline-size: clamp(1.35rem, 2.2vw, 1.75rem); --ag-text-headline-weight: 800; --ag-text-headline-margin: 0 0 .75rem; --ag-text-subheadline-size: .82rem; --ag-text-subheadline-weight: 400; --ag-text-subheadline-margin: 0 0 1.75rem; --ag-fields-margin: 0; --ag-button-gap: 12px; --ag-button-radius: 999px; /* .95rem vertical + 1rem text clears 44px comfortably. */ --ag-button-padding: .95rem 2.4rem; --ag-button-size: 1rem; --ag-button-weight: 700; --ag-button-margin: 0; --ag-button-color-background: var(--ochbs-green); --ag-button-color-hover: var(--ochbs-green-bright); --ag-button-color-text: var(--ochbs-cream); --ag-button-color-text-hover: #fff; --ag-remember-size: .82rem; --ag-remember-margin: 1.5rem 0 0; } /* The plugin resets `.age-gate *` — descendants only, never the card itself. So `.age-gate` keeps whatever box-sizing it inherits, and its `width: 100%` plus horizontal padding overflowed the viewport on mobile, clipping the right edge of every line. Set it explicitly rather than relying on a theme-wide reset that may or may not reach markup injected at the end of . */ .age-gate, .age-gate__wrapper { box-sizing: border-box; max-width: 100vw; } /* --- the photo panel ----------------------------------------------------- */ /* A scrim, so the seam between photo and panel is a gradient rather than a hard edge, and so anything ever placed over the photo stays legible. */ .age-gate__background::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(12, 15, 13, 0.15) 0%, rgba(12, 15, 13, 0.45) 62%, rgba(12, 15, 13, 0.85) 100% ); } /* --- the event meta the mu-plugin injects -------------------------------- */ .ochbs-ag-meta { margin: 0 0 1.5rem; padding: 0 0 1.25rem; border-bottom: 1px solid rgba(243, 239, 230, 0.14); } .ochbs-ag-meta__dates { display: block; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 800; letter-spacing: 0.01em; color: var(--ochbs-cream); } .ochbs-ag-meta__venue { display: block; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochbs-muted); } /* --- panel contents ------------------------------------------------------ */ .age-gate__subheadline { color: var(--ochbs-muted); line-height: 1.5; } .age-gate__challenge { margin: 0 0 1.25rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochbs-muted); } /* The buttons cannot be styled through the plugin's --ag-button-* variables. Elementor's kit stylesheet carries .elementor-kit-16738 button { background-color: …; font-size: .9rem; … } which is specificity (0,1,1) — identical to the plugin's own `button.age-gate__submit--yes` — and loads after it. The kit therefore wins the declarations outright, and a variable the plugin's losing rule would have read is never consulted. Real properties, at (0,2,1), are the only thing that answers it; that also holds if the kit CSS is regenerated in a different order later. */ .age-gate button.age-gate__submit, .age-gate button.age-gate__submit--yes, .age-gate button.age-gate__submit--no { min-height: 48px; padding: 0.85rem 2.4rem; border-radius: 999px; border-style: solid; border-width: 1px; font-size: 0.95rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .age-gate button.age-gate__submit--yes { background-color: var(--ochbs-green); border-color: var(--ochbs-green); color: var(--ochbs-cream); } .age-gate button.age-gate__submit--yes:hover, .age-gate button.age-gate__submit--yes:focus, .age-gate button.age-gate__submit--yes:active { background-color: var(--ochbs-green-bright); border-color: var(--ochbs-green-bright); color: #fff; } /* "No" is a real choice, not a mistake — present it as secondary, not hostile. */ .age-gate button.age-gate__submit--no { background-color: transparent; border-color: rgba(243, 239, 230, 0.28); color: var(--ochbs-muted); } .age-gate button.age-gate__submit--no:hover, .age-gate button.age-gate__submit--no:focus, .age-gate button.age-gate__submit--no:active { background-color: rgba(243, 239, 230, 0.08); border-color: rgba(243, 239, 230, 0.5); color: var(--ochbs-cream); } /* The plugin's own :focus styling only swaps background colour, which is not a visible focus indicator on the outlined "No". Give both a real ring. */ .age-gate button:focus-visible, .age-gate input:focus-visible { outline: 2px solid var(--ochbs-cream); outline-offset: 3px; } .age-gate__remember-text { color: var(--ochbs-muted); } /* Same contest as the buttons: the kit's .elementor-kit-16738 input:not([type="button"]):not([type="submit"]) is (0,3,1) thanks to the two attribute selectors inside :not(), and it sets a white background and 12px padding that would balloon a checkbox. Matched at (0,3,1) and won on source order. */ .age-gate .age-gate__remember input.age-gate__remember-field { width: 16px; height: 16px; min-height: 0; padding: 0; border-radius: 3px; background-color: transparent; accent-color: var(--ochbs-green-bright); } /* --- desktop: photo left, panel right ------------------------------------ */ @media screen and (min-width: 900px) { :root { --ag-text-align: left; --ag-remember-align: flex-start; } .age-gate__wrapper { align-items: stretch; } /* Both background layers are position:fixed, so they are laid out against the viewport rather than the flex wrapper — constrain them by width. */ .age-gate__background, .age-gate__background-color { width: calc(100% - var(--ochbs-ag-panel)); } .age-gate { width: var(--ochbs-ag-panel); height: 100%; margin-left: auto; display: flex; } .age-gate__form { width: 100%; align-items: flex-start; } .age-gate__buttons { justify-content: flex-start; } } /* --- mobile: photo on top, panel below ----------------------------------- */ @media screen and (max-width: 899px) { :root { --ag-text-align: center; /* Portrait crop of the same scene — lighter, and the file the hero preloads on mobile, so again no extra download. */ --ag-background-image: url("/wp-content/uploads/ochbs-hero/scene1-m.webp"); --ag-background-image-position: center 30%; --ag-form-padding: 28px 22px 40px; --ag-text-headline-size: 1.3rem; --ag-logo-max-width: 104px; --ag-button-gap: 10px; } .age-gate button.age-gate__submit, .age-gate button.age-gate__submit--yes, .age-gate button.age-gate__submit--no { padding: 0.85rem 1rem; } .age-gate__wrapper { display: block; } .age-gate__background, .age-gate__background-color { height: 38vh; } .age-gate__background::after { background: linear-gradient( 180deg, rgba(12, 15, 13, 0.1) 0%, rgba(12, 15, 13, 0.35) 60%, rgba(12, 15, 13, 0.9) 100% ); } /* Starts 4vh above the photo's bottom edge, so the rounded corners read as a panel lifting over the image rather than two stacked blocks. */ .age-gate { width: 100%; margin: 34vh 0 0; min-height: 66vh; border-radius: 20px 20px 0 0; } .age-gate__form { justify-content: flex-start; } .age-gate__buttons { width: 100%; } .age-gate__buttons button { flex: 1 1 0; } } /* --- motion -------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --ag-transition-duration: 0s; } }