/** * Sign In / Register modal + header trigger button. * Colors/fonts match theme.json (gold #ddb890 / gold-dark #a67c4a / * ink #1d1916) and the "Development Gating Modal" pattern's tab/input * treatment; the header button's hover glow matches the outline button * in reference/genesis-combined-build/landing.html's nav. */ /* --- Header trigger button --- The [wpc_auth_trigger] shortcode block wraps its output in a

(core Shortcode block behavior) — reset that wrapper's margin so it doesn't throw off the header's flex alignment. */ header p:has(> .wpc-auth-header-btn){margin:0; display:flex;} .wpc-auth-header-btn{ display:inline-flex; align-items:center; gap:.5em; padding:.8em 1.5em; border-radius:100px; border:1px solid rgba(255,255,255,.5); background:transparent; color:#ffffff; font-family:inherit; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:all .25s ease; text-decoration:none; white-space:nowrap; flex-shrink:0; } .wpc-auth-header-btn:hover{ background:rgba(221,184,144,.08); border-color:#ddb890; box-shadow:0 0 8px rgba(221,184,144,.25); color:#ecd3b4; } /* --- Landing-page trigger buttons (gold / dark variants) --- Reusing Spectra's own button classes (see auth.php's wpc_auth_trigger "style" attribute) gets the right background/hover behavior, but not the real padding/font-size/letter-spacing — those come from CSS Spectra generates per-block, scoped to that block's own data-spectra-id, which a shared class list can't pick up. Pinned explicitly here instead, matching the actual hero/section buttons' computed values. Only matches .wp-block-spectra-button, so the nav button (no such class) is untouched. */ .wpc-auth-trigger.wp-block-spectra-button{ padding:17px 25px !important; font-size:14px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; border-radius:100px !important; } /* Dark/transparent variant: border stays #59504b at 1px in both states — Spectra's --spectra-background-color-hover only swaps the background, but pin the border explicitly too so nothing here can shift it on hover. */ .wpc-auth-trigger.wp-block-spectra-button.has-background, .wpc-auth-trigger.wp-block-spectra-button.has-background:hover{ border:1px solid #59504b !important; } /* Hover states pinned explicitly rather than relying on Spectra's own --spectra-text/background-color-hover custom properties, since those depend on generated per-block CSS the same way padding/font-size did — not guaranteed to apply just from the shared class list. */ .wpc-auth-trigger.wp-block-spectra-button:hover{ color:#ffffff !important; } .wpc-auth-trigger.wp-block-spectra-button.has-background:hover{ background-color:#59504b !important; color:#ffffff !important; } /* --- Modal shell --- */ .wpc-auth-modal-backdrop{ position:fixed; inset:0; z-index:999999; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .25s ease; } .wpc-auth-modal-backdrop.open{opacity:1; pointer-events:auto;} .wpc-auth-modal-backdrop[hidden]{display:none !important;} .wpc-auth-modal{ background:#ffffff; width:100%; max-width:680px; max-height:92vh; overflow-y:auto; border-radius:10px; padding:40px; position:relative; } .wpc-auth-modal-close{ position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:none; background:#f4f2f0; color:#1d1916; display:flex; align-items:center; justify-content:center; cursor:pointer; } .wpc-auth-modal-close:hover{background:#e9e5e1;} /* --- Tabs --- content-sized, not stretched to fill the width. */ .wpc-auth-tabs{display:flex; gap:15px; margin-bottom:0;} .wpc-auth-tab{ flex:none; padding:.85em 1.5em; border:none; border-radius:10px 10px 0 0; background:#e9e5e1; color:#686460; font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:all .2s ease; } .wpc-auth-tab:hover{background:#ecd3b4; color:#59504b;} .wpc-auth-tab.active{background:#ddb890; color:#1d1916;} /* Bottom padding at 30px — flush (0) read as no breathing room at all once the wpautop bug was gone. The Sign In form's switch line has its own margin-bottom below, tuned down to match so that form's total bottom space stays the same as before. */ .wpc-auth-panel{border:1px solid #ddb890; border-radius:0 10px 10px 10px; padding:32px 28px 30px;} .wpc-auth-heading{ font-family:"Cormorant","Iowan Old Style",serif; font-size:2rem; font-weight:500; color:#1d1916; margin:0 0 4px; } /* No own margin-bottom — .wpc-auth-form's gap (below) already spaces it from the next element; adding both here double-counts the space. */ .wpc-auth-intro{font-size:.85rem; color:#59504b; line-height:1.5; margin:0;} /* --- Form fields --- */ .wpc-auth-form{display:flex; flex-direction:column; gap:16px;} .wpc-auth-field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;} .wpc-auth-field label{display:block; font-size:.82rem; font-weight:600; color:#1d1916; margin-bottom:6px;} .wpc-auth-field-input{position:relative; display:flex; align-items:center;} .wpc-auth-field-icon{ position:absolute; left:14px; display:flex; align-items:center; justify-content:center; color:#a67c4a; pointer-events:none; } .wpc-auth-field-input input{ width:100%; padding:12px 16px 12px 42px; border:1px solid #ddd; border-radius:4px; font-family:inherit; font-size:14px; line-height:1.5; color:#1d1916; background:#ffffff; box-sizing:border-box; } .wpc-auth-field-input input:focus{border-color:#a67c4a; outline:none; box-shadow:0 0 0 3px rgba(221,184,144,.15);} .wpc-auth-field-input--no-icon input{padding-left:16px;} .wpc-auth-field-toggle{ position:absolute; right:12px; border:none; background:none; padding:4px; color:#a3a3a3; cursor:pointer; display:flex; align-items:center; } .wpc-auth-field-toggle:hover{color:#59504b;} .wpc-auth-field-toggle.is-visible{color:#a67c4a;} .wpc-auth-phone-field{display:flex; gap:8px;} .wpc-auth-phone-field select{ flex:none; width:82px; padding:12px 16px 12px 8px; border:1px solid #ddd; border-radius:4px; font-family:inherit; font-size:14px; background:#ffffff; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a67c4a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 6px center; } .wpc-auth-phone-field .wpc-auth-field-input{flex:1; min-width:0;} .wpc-auth-honeypot{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;} .wpc-auth-checkbox{display:flex; align-items:flex-start; gap:9px; font-size:.78rem; color:#59504b; line-height:1.4; cursor:pointer;} .wpc-auth-checkbox input{margin-top:3px; width:16px; height:16px; accent-color:#ddb890; flex-shrink:0;} .wpc-auth-checkbox a{color:#a67c4a; text-decoration:underline;} .wpc-auth-checkbox input.is-invalid{outline:2px solid #c0392b; outline-offset:2px; border-radius:3px;} .wpc-required-asterisk{color:#c0392b; font-weight:700;} .wpc-field-error{display:block; color:#c0392b; font-size:.72rem; line-height:1.4; margin-top:5px;} .wpc-field-error:empty{display:none;} /* Sits right under the checkbox text, not the checkbox's own left edge — matches the "line-height:1.4" text it belongs to, and closer than the default 5px since there's no field/box below it pushing it down. */ .wpc-auth-checkbox + .wpc-field-error{margin-top:-2px; margin-bottom:6px; margin-left:25px;} .wpc-auth-field-input.is-invalid input, .wpc-auth-phone-field.is-invalid .wpc-auth-field-input input{border-color:#c0392b !important;} /* +4px on top of the base 16px gap (20px total) — 10px more than the -6px used elsewhere, per explicit request to increase this one further. */ .wpc-auth-remember{align-items:center; margin-top:4px;} .wpc-auth-remember input{margin-top:0;} /* Consent checkbox (Register): 20px gap on each side instead of the form's base 16px. Bottom is 0 (vs +4 on top) to cancel out .wpc-auth-submit's own +4px margin-top just below it, so the visual result is symmetric even though the two margins aren't. */ .wpc-auth-checkbox:not(.wpc-auth-remember){margin-top:4px; margin-bottom:0;} .wpc-auth-submit{ margin-top:4px; width:100%; padding:calc(.667em + 2px) calc(1.333em + 2px); border:none; border-radius:.375em; background:#ddb890; color:#1d1916; font-family:inherit; font-size:.9rem; font-weight:500; cursor:pointer; transition:background .2s ease; } .wpc-auth-submit:hover{background:#a67c4a; color:#ffffff;} .wpc-auth-submit:disabled{opacity:.6; cursor:not-allowed;} /* These and .wpc-auth-switch below are flex items of .wpc-auth-form, which already applies a 16px gap between them — the margins here are deliberate adjustments on top of/against that base gap, not the whole space (see each rule's comment for the resulting total). */ .wpc-auth-forgot{ display:block; text-align:center; margin-top:8px; font-size:.8rem; color:#a67c4a; text-decoration:none; } .wpc-auth-forgot:hover{text-decoration:underline;} .wpc-auth-switch{text-align:center; margin:0; font-size:.82rem; color:#59504b;} .wpc-auth-switch a{color:#a67c4a; font-weight:600; text-decoration:none;} .wpc-auth-switch a:hover{text-decoration:underline;} /* Sign In: keep the switch line closer to Forgot Password than the base 16px gap, but slightly looser than before (16px base - 4px = 12px total). Also makes up for .wpc-auth-panel's trimmed bottom padding so this form's total bottom space stays the same as before that change. */ #wpcSignInForm .wpc-auth-switch{margin-top:-4px; margin-bottom:2px;} /* Register: 30px above "Already have an account?" instead of the base 16px gap. */ #wpcRegisterForm .wpc-auth-switch{margin-top:14px;} .wpc-auth-msg{font-size:.82rem; margin:0; min-height:0;} .wpc-auth-msg:empty{display:none;} .wpc-auth-msg.is-error{color:#a6382e;} .wpc-auth-msg.is-success{color:#3e7050;} /* Replaces the register form entirely on success — same slot/width as the form it swaps out, so the modal doesn't jump in size. */ .wpc-auth-success{text-align:center; padding:32px 8px 8px;} .wpc-auth-success .wpc-auth-heading{margin:0; font-size:1.6rem;} .wpc-auth-success .wpc-auth-intro{text-align:center; margin-top:14px;} @media (max-width:520px){ /* Full-screen takeover instead of a floating card — no backdrop margin/dimmed edges, modal fills the viewport with square corners. */ .wpc-auth-modal-backdrop{padding:0;} .wpc-auth-modal{ width:100%; height:100%; max-width:none; max-height:none; border-radius:0; padding:28px 20px; } .wpc-auth-field-row{grid-template-columns:1fr;} } /* Gated Spectra container links (includes/auth.php's render_block_spectra/container filter, e.g. the residence cards) get swapped from to