/* Membership + Join PLU ------------------------------------------------- Loaded by the join templates via {% block page_css %}. Everything here is scoped to .plu-join so it cannot reach another session's pages; the shared form controls in plu.css stay owned by the chrome session. Mirrors wp-content/mu-plugins/plu-membership/assets/membership.css. */ /* Join wizard ------------------------------------------------------------ Scoped to .plu-join so the shared .plu-grid and .plu-field rules used by other pages keep their own breakpoints. Mirrors the WordPress signup styling in mu-plugins/plu-membership/assets/membership.css. */ /* Banner, measured on the live reference at 1440 ------------------------- Built first from the theme's BASE rule (style.css:1310), which is a yellow panel with black text. That was wrong: the live page carries `plu-banner-media plu-banner-overlay--light`, which replaces the ground with a photograph behind a dark overlay and inverts the text. Measured on the reference: background rgb(5,5,5), eyebrow rgb(255,242,0), paragraph rgba(255,255,255,.78), h1 82px/83.64px/900, min-height 300px, padding `86px 64px 54px` at 1440, full-bleed to the viewport. The photograph itself is not reproduced here - it comes from post meta via plu_core_banner_data(), and wiring that needs CMS banner support rather than CSS. The dark ground is the same, so the image drops in on top when that exists. See the handover. */ .plu-join-banner { /* Break out of .plu-shell: the reference banner spans the viewport. */ width: 100vw; margin-left: calc(50% - 50vw); max-width: none; min-height: 300px; display: flex; align-items: end; /* The reference's calc resolves against the body; this banner's containing block is the narrower shell, so `100%` would pick the 56px floor and sit 8px shy. 100vw reproduces the reference's own arithmetic. */ padding: 86px max(56px, calc((100vw - 1360px) / 2 + 24px)) 54px; background: #050505; color: #fff; border-bottom: 4px solid #050505; } .plu-join-banner h1 { margin: 0; font-size: clamp(54px, 6vw, 82px); line-height: 1.02; font-weight: 900; letter-spacing: normal; } .plu-join-banner .plu-eyebrow { color: var(--plu-yellow); } .plu-join-banner p:not(.plu-eyebrow) { margin: 22px 0 0; max-width: none; color: rgba(255,255,255,.78); font-size: 19px; font-weight: 400; line-height: 1.5; } .plu-join .plu-card { border-top: 4px solid var(--plu-yellow); } .plu-join .plu-location-card { margin-top: 18px; border: 1px solid #d8d8d2; background: #fff; } .plu-join .plu-location-card__head { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 13px 16px; border-bottom: 1px solid #d8d8d2; background: #f7f7f3; } .plu-join .plu-location-card__head strong { color: #111; font-size: 12px; font-weight: 900; text-transform: uppercase; } .plu-join .plu-location-card__head small { color: #666a72; font-size: 12px; line-height: 1.35; text-align: right; } .plu-join .plu-location-card__body { padding: 16px; } .plu-join .plu-location-card__body .plu-field:last-child { margin-bottom: 0; } .plu-join .plu-location-card--official { border-left: 5px solid #111; } .plu-join .plu-location-card--official select { border-color: #111; background-color: #fffdf0; } .plu-join .plu-location-card--local { border-left: 5px solid var(--plu-yellow); } .plu-join .plu-location-card--local input::placeholder { color: #858585; } .plu-join [data-location-region] { background: #f7f7f3; color: #444; cursor: default; } .plu-join [data-residency-panel][hidden] { display: none; } /* WordPress stacks the signup grid at 780px, not at the 640px the shared .plu-grid uses elsewhere. */ @media (max-width: 780px) { .plu-join .plu-grid { grid-template-columns: 1fr; } .plu-join .plu-location-card__head { display: grid; gap: 4px; } .plu-join .plu-location-card__head small { text-align: left; } } @media (max-width: 420px) { .plu-join .plu-location-card__body { padding: 13px; } } /* Measured on the reference: padding 18px 20px on a GREY ground (rgb(247,247,243)), not the cream I had. */ .plu-join .plu-registration-basis { margin: 0 0 24px; padding: 18px 20px; background: #f7f7f3; border-left: 4px solid var(--plu-yellow); } .plu-join .plu-registration-basis strong { display: block; margin-bottom: 6px; font-size: 14px; } .plu-join .plu-registration-basis p { margin: 0 0 8px; color: var(--plu-muted); font-size: 14px; line-height: 1.55; } .plu-join .plu-registration-basis p:last-child { margin-bottom: 0; } /* Container geometry, measured against WordPress at 1440/1024/768/320 ------- WordPress gives the signup its own shell (`.plu-signup-shell`), wider than the generic content container and effectively full-bleed below ~780px: 978px at 1440, 766 at 768, 318 at 320. The shared `.plu-card` is 820px and sits inside `.plu-shell`'s 20px gutter, which left the form 158px narrower at 1440 and 76px narrower at 320. Scoped here rather than widening `.plu-card` for the whole site: in WordPress it is the signup that is special, not cards in general. */ .plu-join { margin-inline: -20px; } /* cancel .plu-shell's gutter, as WP does */ /* 980, not 978: WordPress's shell is borderless, while .plu-card carries a 1px side border under border-box, so 978 would leave 976px of content and each grid column 1px short. 980 puts the columns at WP's 443px exactly. The card then paints 2px wider than WP's shell - kept deliberately, because the border is the site's card language and dropping it here would make the join page the only borderless card on the site. */ .plu-join .plu-card { max-width: 980px; } /* WP: .plu-signup-grid gap is 18px/20px; the shared .plu-grid is 18px/18px. */ .plu-join .plu-grid { column-gap: 20px; } @media (max-width: 420px) { } /* Section padding, measured on WordPress: .plu-signup-section is 36px and .plu-signup-head 36px 36px 34px at 1440, both 24px 14px at 320. Replaces the inline 30px/32px the templates carried. */ .plu-join-head { background: #fffdf0; padding: 36px 36px 34px; border-bottom: 2px solid var(--plu-red); } .plu-join-section { padding: 36px; } .plu-join-section--tight { padding: 36px 36px 24px; } /* Measured on WordPress: .plu-signup-section/.plu-signup-head are 24px 18px at 768 and 24px 14px at 320, not the 36px they carry at desktop. */ @media (max-width: 780px) { .plu-join-head, .plu-join-section, .plu-join-section--tight { padding: 24px 18px; } } @media (max-width: 420px) { .plu-join-head, .plu-join-section, .plu-join-section--tight { padding: 24px 14px; } } /* Step buttons, measured against the reference at 1440 ---------------------- The reference styles its signup buttons with signup-specific classes (.plu-signup-navigation button / .plu-submit), so scoping here is the same call as the shell width: it is the signup that is special, not buttons in general. The shared .plu-btn keeps its own look for the rest of the site. Measured, WP vs Django before this block: the primary CTA was colour INVERTED - the reference is black with yellow text (.is-next, membership.css:31), the port was yellow with black text. Also 12px/900 vs 13px/800, radius 0 vs 2px, padding `0 20px` vs `13px 26px`, letter-spacing normal vs 0.91px. */ .plu-join .plu-btn { min-height: 45px; padding: 0 20px; border: 1px solid #111; border-radius: 0; background: #111; color: var(--plu-yellow); font-size: 12px; font-weight: 900; letter-spacing: normal; } /* The reference's terminal action (.plu-submit, style.css:1101) is a solid black bar with white text, full width, and inherits the 16px body size because it sets no font-size of its own. Django's step 2 is the terminal action - it is where the member is created - so it takes that treatment. */ .plu-join .plu-btn--submit { width: 100%; min-height: 46px; border: 0; background: #050505; color: #fff; font-size: 16px; } /* Manual location fallback, honeypots and the draft line ------------------- The honeypot rule is load-bearing: these two inputs must never be visible or reachable. The reference hides them with `display:none !important`. */ .plu-honeypot { display: none !important; } .plu-join .plu-location-fallback { margin-top: 14px; padding: 9px 14px; border: 1px dashed var(--plu-line); background: #fff; font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; color: #444; cursor: pointer; } .plu-join .plu-location-fallback:hover, .plu-join .plu-location-fallback:focus-visible { border-style: solid; border-color: #111; } .plu-join .plu-location-manual { margin-top: 14px; padding: 16px; border: 1px solid var(--plu-line); border-left: 4px solid var(--plu-red); background: #fff; } .plu-join .plu-location-manual[hidden] { display: none; } .plu-join .plu-location-note { margin: 4px 0 0; color: var(--plu-muted); font-size: 12px; line-height: 1.5; } .plu-join .plu-conduct { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 4px; font-size: 14px; color: #444; } .plu-join .plu-conduct input { margin-top: 3px; } .plu-join .plu-draft-status { margin-top: 14px; color: var(--plu-muted); font-size: 12px; } .plu-join .plu-signin-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--plu-line); font-size: 14px; } .plu-join .plu-signin-note a { font-weight: 900; } /* The reference gives its step headings 22px and caps the NIN field at 470px (.plu-wide-field). Ours ran 19px and spanned the full 906px section. */ .plu-join .plu-join-section h3 { font-size: 22px; } .plu-join .plu-wide-field { max-width: 470px; }