/** * Psy Core — Registration / Signup form * * One graphic system for all 8 CPT signup forms. Per-category differences * stay in the field list (PHP); CSS treats every form identically. * * Brand tokens come from theme tokens.css (loaded site-wide). Fallback * literals are included where critical so the plugin still renders even if * tokens.css is missing. * * Layout: 12-column grid. FormRenderer emits `data-cols="N"` on each * `.psy-field` from `attrs['cols']`; this stylesheet maps that to grid spans. */ /* ===================================================== 1. Page background — homepage recipe applied to Activated by `psy-has-signup` body class which FormShortcode + SignupCompleteShortcode add via the `body_class` filter when their shortcode is on the page. Painting on body bypasses every theme container/padding/template quirk that would otherwise show as a visible band between the header and the signup wrapper. ===================================================== */ body.psy-has-signup { background: var(--psy-navy, #050033) !important; } /* Override routes.css when this is a /register/* virtual route — routes.css uses bck-scaled.png (purple cloud) with !important; the signup pages must match the homepage exactly (ff.png Aztec). */ body.psy-route.psy-has-signup { background: var(--psy-navy, #050033) !important; } body.psy-has-signup .psy-route-main { padding: 0 !important; min-height: 0 !important; background: transparent !important; } body.psy-has-signup::before { content: ''; position: fixed; inset: 0; background-image: var(--asset-home-bg, url('https://psytranceartist.com/wp-content/uploads/2026/06/ff.png')); background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 0.85; pointer-events: none; z-index: 0; } body.psy-has-signup::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(229, 74, 218, 0.10) 0%, transparent 55%), linear-gradient(to bottom, transparent 0%, rgba(5, 0, 51, 0.6) 60%, var(--psy-navy, #050033) 100%); pointer-events: none; z-index: 0; } /* Footer + signup content sit above the bg layers (z-index 0) but stay at a low stacking level so the theme's sticky header (base z-index 100) naturally paints on top and the Explore dropdown opens over the hero title. Do NOT redeclare .psy-header here — earlier revisions dropped it to z-index: 10 which put it too close to `.psy-signup`'s local stacking and the drop-shadow filter on `.psy-signup__title` kept swallowing the submenu. Leaving the base sticky/100 alone is enough. */ body.psy-has-signup .psy-footer, body.psy-has-signup .psy-signup { position: relative; z-index: 1; /* isolation: isolate forces this element into a fresh stacking context that TRAPS the drop-shadow filter layer on `.psy-signup__title` inside. Without it Chrome sometimes promotes the filter to a compositor layer that ignores the parent's z-index and paints over the header dropdown. */ isolation: isolate; } /* Strip theme singular wrapper chrome so the wrapper sits flush with the header. The shortcode owns the hero — no duplicate page title. */ body.psy-has-signup .psy-container--singular { max-width: none !important; padding: 0 !important; margin: 0 !important; } body.psy-has-signup .psy-post { margin: 0 !important; padding: 0 !important; background: transparent !important; } body.psy-has-signup .psy-post__header { display: none !important; } body.psy-has-signup .psy-post__body { margin: 0 !important; padding: 0 !important; } /* Wrapper itself: no bg, no full-bleed tricks — body handles bg now. */ .psy-signup { color: var(--color-text, #F2F2F2); background: transparent; min-height: 100vh; padding-bottom: 80px; } .psy-signup__inner { max-width: var(--container-max, 1440px); margin: 0 auto; padding: 80px var(--container-pad-desk, 50px) 120px; box-sizing: border-box; } /* ===================================================== 2. Hero — gradient-stroke title + intro ===================================================== */ .psy-signup__hero { text-align: center; margin-bottom: 48px; } /* Mirrors theme `.psy-home__title` recipe: white fill + gradient stroke via background-clip:text + transparent text-stroke + neon glow. The glow used to come from `filter: drop-shadow(...)` but Chrome would promote that to its own compositor layer that painted OVER the header's Explore + account dropdowns even with the header at z-index 100 and `.psy-signup` at z-index 1 + `isolation: isolate`. Swapped to `text-shadow` which reproduces the same neon halo but stays a normal paint step so stacking / isolation are honoured. */ .psy-signup__title { display: block; margin: 0 0 18px; font-family: 'Yacota Display Sans', 'Yacote Display Sans', 'Yacote', 'Audiowide', system-ui, sans-serif; font-weight: 400; font-size: clamp(48px, 8.2vw, 86px); line-height: 1; letter-spacing: -0.05em; text-transform: uppercase; -webkit-text-stroke: 10px transparent; background: linear-gradient(90deg, #E54ADA, #2D1CA3, #2EE577); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: #fff; text-shadow: 0 0 12px rgba(229, 74, 218, 0.55), 0 0 28px rgba(46, 229, 119, 0.30); } .psy-signup__title-line { display: block; } .psy-signup__intro { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; font-family: 'Open Sans', system-ui, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--color-text, #F2F2F2); } .psy-signup__intro p { margin: 0; } .psy-signup__intro a { color: var(--psy-pink, #E54ADA); font: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; transition: opacity 0.15s ease; } .psy-signup__intro a:hover, .psy-signup__intro a:focus-visible { opacity: 0.75; } /* ---------- Guide callouts (signup hero — compact, no icon) ---------- */ .psy-signup__callouts { display: flex; flex-direction: column; gap: 10px; max-width: 900px; margin: 20px auto 0; } .psy-callout--guide { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 8px; border: 1px solid var(--psy-pink, #E54ADA); background: rgba(229, 74, 218, 0.06); color: #F2F2F2; text-align: center; } .psy-callout__title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; } .psy-callout__text { margin: 0; font-size: 12px; line-height: 1.4; color: rgba(242, 242, 242, 0.75); } .psy-callout__link { align-self: center; margin-top: 4px; font: inherit; font-size: 12px; font-weight: 700; color: var(--psy-pink, #E54ADA); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: opacity 0.15s ease; } .psy-callout__link:hover, .psy-callout__link:focus-visible { opacity: 0.75; color: var(--psy-pink, #E54ADA); } /* ===================================================== 3. Card — single source of form aesthetic ===================================================== */ .psy-form { max-width: 900px; margin: 0 auto; box-sizing: border-box; background: #0C0548; border: 1px solid var(--color-border, #1A0F5C); border-radius: 20px; padding: 48px 44px 48px 60px; color: var(--color-text, #F2F2F2); font-family: var(--font-body, 'Open Sans', sans-serif); } .psy-form__category { margin: 0 0 24px; font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent, #E54ADA); } /* Messages bar (success / error) — populated by JS after submit */ .psy-form__messages { margin: 0; padding: 0; background: transparent; } .psy-form__messages:not(:empty) { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; } .psy-form__messages--success { background: rgba(46, 229, 119, 0.12); border: 1px solid var(--psy-green, #2EE577); color: var(--psy-green, #2EE577); } .psy-form__messages--error { background: rgba(229, 74, 218, 0.12); border: 1px solid var(--color-accent, #E54ADA); color: var(--color-accent, #E54ADA); } /* ===================================================== 4. 12-col grid layout ===================================================== */ .psy-form__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; } .psy-field { display: flex; flex-direction: column; gap: 8px; grid-column: span 12; min-width: 0; } .psy-field[data-cols="1"] { grid-column: span 1; } .psy-field[data-cols="2"] { grid-column: span 2; } .psy-field[data-cols="3"] { grid-column: span 3; } .psy-field[data-cols="4"] { grid-column: span 4; } .psy-field[data-cols="5"] { grid-column: span 5; } .psy-field[data-cols="6"] { grid-column: span 6; } .psy-field[data-cols="7"] { grid-column: span 7; } .psy-field[data-cols="8"] { grid-column: span 8; } .psy-field[data-cols="9"] { grid-column: span 9; } .psy-field[data-cols="10"] { grid-column: span 10; } .psy-field[data-cols="11"] { grid-column: span 11; } .psy-field[data-cols="12"] { grid-column: span 12; } /* Hidden inputs (honeypot, captcha_token) take no grid space */ .psy-field--hidden { display: none; } /* Conditional fields (organizer-only rows toggled by the org_mode radio in OrganizerForm) — HTML5 [hidden] alone is overridden by the .psy-field display:flex above, so force it here. */ .psy-field[hidden] { display: none; } /* ===================================================== 5. Field label, help, error ===================================================== */ .psy-field__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text, #F2F2F2); } .psy-field__label [aria-hidden="true"] { color: var(--color-accent, #E54ADA); margin-left: 2px; } .psy-field__label-hint { margin-left: 4px; font-size: 10px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: rgba(242, 242, 242, 0.55); } .psy-field__help { margin: 0; font-size: 12px; line-height: 1.4; color: var(--color-accent, #E54ADA); } .psy-field--note { margin-block: 4px 8px; } .psy-form-note__title { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text, #F2F2F2); } .psy-form-note__body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-accent, #E54ADA); } .psy-field__error { margin: 0; font-size: 12px; color: var(--color-accent, #E54ADA); } .psy-field--error input, .psy-field--error textarea, .psy-field--error select, .psy-field--error .psy-file__zone { border-color: var(--color-accent, #E54ADA) !important; box-shadow: 0 0 0 2px rgba(229, 74, 218, 0.25); } .psy-file__error { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--color-accent, #E54ADA); font-weight: 600; } .psy-field-cta { display: inline-block; margin-top: 6px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, #ff43c8 0%, #b328ff 100%); color: #fff !important; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; } .psy-field-cta:hover { color: #fff !important; filter: brightness(1.08); } .psy-field-cta--muted { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85) !important; } /* ===================================================== 6. Text / number / date / email / password / url inputs ===================================================== */ .psy-field input[type="text"], .psy-field input[type="email"], .psy-field input[type="password"], .psy-field input[type="tel"], .psy-field input[type="url"], .psy-field input[type="number"], .psy-field input[type="date"], .psy-field textarea, .psy-field select { width: 100%; box-sizing: border-box; padding: 12px 16px; background: rgba(15, 8, 82, 0.60); border: 1px solid var(--color-border, #1A0F5C); border-radius: 10px; color: var(--color-text, #F2F2F2); font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 14px; line-height: 1.4; transition: border-color 120ms ease; } .psy-field textarea { min-height: 120px; resize: vertical; } .psy-field input::placeholder, .psy-field textarea::placeholder { color: var(--color-text-faint, rgba(242, 242, 242, 0.45)); } .psy-field input:focus, .psy-field textarea:focus, .psy-field select:focus { outline: none; border-color: var(--color-accent, #E54ADA); } /* Date input: keep native picker icon visible but tint to brand */ .psy-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); cursor: pointer; } /* ===================================================== 7. Select — brand chevron + custom multi-select look ===================================================== */ .psy-field select { padding-right: 40px; appearance: none; -webkit-appearance: none; background-image: var(--asset-arrow-png, url('https://psytranceartist.com/wp-content/uploads/2026/06/freccia.png')); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px auto; cursor: pointer; } /* JS upgrades select[multiple] into a custom dropdown — hide native fallback */ .psy-multi__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* Pre-enhancement fallback (no JS): native multi-select stays usable */ .psy-field select[multiple]:not(.psy-multi__native) { min-height: 48px; background-image: none; padding-right: 16px; } .psy-field select[multiple]:not(.psy-multi__native) option { padding: 6px 10px; margin: 2px 0; border-radius: 6px; } .psy-field select[multiple]:not(.psy-multi__native) option:checked { background: var(--color-accent, #E54ADA) linear-gradient(0deg, var(--color-accent, #E54ADA), var(--color-accent, #E54ADA)); color: var(--psy-navy, #050033); } /* ===================================================== 7b. Custom multi-select dropdown (JS-upgraded) ===================================================== */ .psy-multi { position: relative; } .psy-multi__trigger { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; box-sizing: border-box; padding: 8px 40px 8px 14px; background: rgba(15, 8, 82, 0.60); border: 1px solid var(--color-border, #1A0F5C); border-radius: 10px; color: var(--color-text, #F2F2F2); font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 14px; text-align: left; cursor: pointer; transition: border-color 120ms ease; } .psy-multi__trigger:hover, .psy-multi.is-open .psy-multi__trigger { border-color: var(--color-accent, #E54ADA); } .psy-multi__chips { display: inline-flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; } .psy-multi__placeholder { color: var(--color-text-faint, rgba(242, 242, 242, 0.45)); flex: 1 1 auto; } .psy-multi__caret { position: absolute; right: 14px; top: 50%; width: 12px; height: 12px; background-image: var(--asset-arrow-png, url('https://psytranceartist.com/wp-content/uploads/2026/06/freccia.png')); background-repeat: no-repeat; background-position: center; background-size: contain; transform: translateY(-50%); transition: transform 150ms ease; pointer-events: none; } .psy-multi.is-open .psy-multi__caret { transform: translateY(-50%) rotate(180deg); } .psy-multi__chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 10px; border-radius: 999px; background: rgba(229, 74, 218, 0.18); border: 1px solid var(--color-accent, #E54ADA); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2; } .psy-multi__chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; } .psy-multi__chip-x:hover { color: var(--color-accent, #E54ADA); } .psy-multi__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow-y: auto; padding: 6px; background: #0C0548; border: 1px solid var(--color-border, #1A0F5C); border-radius: 10px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); z-index: 50; } .psy-multi__opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--color-text, #F2F2F2); cursor: pointer; user-select: none; } .psy-multi__opt:hover { background: rgba(229, 74, 218, 0.10); } .psy-multi__opt input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent, #E54ADA); cursor: pointer; } .psy-multi__opt:has(input:checked) { color: #fff; background: rgba(229, 74, 218, 0.14); } .psy-multi__opt:has(input:disabled) { opacity: 0.4; cursor: not-allowed; } .psy-multi__hint { margin: 6px 2px 0; font-size: 12px; color: rgba(242, 242, 242, 0.65); transition: color 200ms ease; } .psy-multi.is-max-reached .psy-multi__hint { color: var(--color-accent, #E54ADA); } .psy-multi__hint.is-flash { animation: psy-multi-hint-flash 320ms ease-out; } @keyframes psy-multi-hint-flash { 0% { color: var(--color-accent, #E54ADA); transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } 100% { transform: translateX(0); } } /* ===================================================== 8. Pill controls — radio + checkbox groups ===================================================== */ .psy-field--pill .psy-field__options { display: flex; flex-wrap: wrap; gap: 12px; } .psy-field--pill .psy-field__option { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--color-border, #1A0F5C); background: rgba(15, 8, 82, 0.60); color: var(--color-text, #F2F2F2); font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; transition: border-color 120ms ease, background 120ms ease; text-align: center; } .psy-field--pill .psy-field__option input[type="radio"], .psy-field--pill .psy-field__option input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .psy-field--pill .psy-field__option:hover { border-color: var(--color-accent, #E54ADA); } .psy-field--pill .psy-field__option:has(input:checked) { border-color: var(--color-accent, #E54ADA); background: rgba(229, 74, 218, 0.18); color: #fff; } .psy-field--pill .psy-field__option small { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; opacity: 0.7; margin-left: 4px; } /* Sex (F / M) pills sit at the end of a narrow column — keep tight */ .psy-field[data-cols="2"].psy-field--pill .psy-field__options { gap: 8px; } .psy-field[data-cols="2"].psy-field--pill .psy-field__option { padding: 10px 0; min-width: 44px; } /* Single inline checkbox (never_performed) — no pill */ .psy-field__option--single, .psy-field--checkbox:not(.psy-field--pill) .psy-field__option { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--color-text-muted, rgba(242, 242, 242, 0.65)); font-size: 13px; cursor: pointer; } .psy-field--checkbox:not(.psy-field--pill) .psy-field__option input[type="checkbox"], .psy-field__option--single input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent, #E54ADA); cursor: pointer; } /* ===================================================== 9. File upload — dropzone aesthetic ===================================================== */ .psy-field--dropzone .psy-file { position: relative; } .psy-field--dropzone .psy-file__native { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .psy-field--dropzone .psy-file__zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 96px; padding: 24px 16px; background: rgba(15, 8, 82, 0.60); border: 1px solid var(--color-border, #1A0F5C); border-radius: 10px; color: var(--color-text-muted, rgba(242, 242, 242, 0.65)); font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .psy-field--dropzone .psy-file__zone:hover { border-color: var(--color-accent, #E54ADA); background: rgba(15, 8, 82, 0.80); } .psy-field--dropzone .psy-file__icon { width: 28px; height: 22px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } .psy-field--dropzone .psy-file__label.has-file { color: var(--color-text, #F2F2F2); } .psy-field--dropzone .psy-file__native:focus + .psy-file__zone { outline: 2px solid var(--color-accent, #E54ADA); outline-offset: 2px; } .psy-file__clear { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; background: rgba(229, 74, 218, 0.85); border: 0; border-radius: 50%; color: #fff; font-size: 16px; line-height: 1; font-weight: 700; cursor: pointer; z-index: 2; transition: background 120ms ease, transform 120ms ease; } .psy-file__clear:hover { background: var(--color-accent, #E54ADA); transform: scale(1.08); } .psy-file__hint { margin: 6px 0 0; font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 11px; line-height: 1.4; color: var(--color-text-muted, rgba(242, 242, 242, 0.55)); letter-spacing: 0.02em; } /* ===================================================== Events repeater (Recent events, all signup forms) ===================================================== */ .psy-events { display: flex; flex-direction: column; gap: 10px; } .psy-events__rows { display: flex; flex-direction: column; gap: 10px; } .psy-events__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } .psy-events__input { width: 100%; box-sizing: border-box; } .psy-events__remove { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(242, 242, 242, 0.25); background: transparent; color: var(--color-text, #F2F2F2); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color 120ms ease, color 120ms ease, background 120ms ease; padding: 0; display: flex; align-items: center; justify-content: center; } .psy-events__remove:hover, .psy-events__remove:focus-visible { border-color: var(--color-accent, #E54ADA); color: var(--color-accent, #E54ADA); outline: none; } .psy-events__add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: transparent; color: var(--color-accent, #E54ADA); border: 1px dashed var(--color-accent, #E54ADA); border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .psy-events__add:hover, .psy-events__add:focus-visible { background: rgba(229, 74, 218, 0.12); outline: none; } .psy-events__add[hidden] { display: none; } /* ===================================================== Releases repeater (Music Artist signup) ===================================================== */ .psy-releases { display: flex; flex-direction: column; gap: 14px; } .psy-release-row { display: grid; grid-template-columns: 108px 1fr; gap: 12px; padding: 12px; background: rgba(15, 8, 82, 0.35); border: 1px solid var(--color-border, #1A0F5C); border-radius: 12px; } .psy-release-row__cover.psy-file { position: relative; width: 108px; height: 108px; } .psy-release-row__cover .psy-file__native { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .psy-release-row__cover .psy-file__zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; padding: 8px; background: rgba(15, 8, 82, 0.60); border: 1px solid var(--color-border, #1A0F5C); border-radius: 10px; color: var(--color-text-muted, rgba(242, 242, 242, 0.65)); font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .psy-release-row__cover .psy-file__zone:hover, .psy-release-row__cover .psy-file__native:focus + .psy-file__zone { border-color: var(--color-accent, #E54ADA); background: rgba(15, 8, 82, 0.85); } .psy-release-row__cover .psy-file__icon { width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .psy-release-row__cover .psy-file__label.has-file { color: var(--color-text, #F2F2F2); font-size: 11px; word-break: break-all; line-height: 1.2; } .psy-release-row__fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .psy-release-row__fields input { width: 100%; box-sizing: border-box; padding: 10px 14px; background: rgba(15, 8, 82, 0.60); border: 1px solid var(--color-border, #1A0F5C); border-radius: 10px; color: var(--color-text, #F2F2F2); font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 14px; line-height: 1.4; transition: border-color 120ms ease; } .psy-release-row__fields input::placeholder { color: var(--color-text-faint, rgba(242, 242, 242, 0.45)); } .psy-release-row__fields input:focus { outline: none; border-color: var(--color-accent, #E54ADA); } .psy-release-row__fields input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); cursor: pointer; } @media (max-width: 640px) { .psy-release-row { grid-template-columns: 88px 1fr; } .psy-release-row__cover.psy-file { width: 88px; height: 88px; } } /* ===================================================== 10. Consent + submit ===================================================== */ .psy-field--consent { margin-top: 4px; } .psy-field__consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 12px; line-height: 1.4; color: var(--color-text-muted, rgba(242, 242, 242, 0.65)); cursor: pointer; } .psy-field__consent a:hover { opacity: 0.8; } .psy-field__consent input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--color-accent, #E54ADA); cursor: pointer; } .psy-field__consent a { color: var(--color-accent, #E54ADA); text-decoration: underline; } .psy-form__captcha { margin: 20px 0 0; display: flex; justify-content: center; } .psy-form__submit { margin: 28px 0 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; border: 0; border-radius: 999px; background: var(--color-accent, #E54ADA); color: var(--psy-navy, #050033); font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; } .psy-form__submit:hover { outline: none; transform: translateY(-1px); box-shadow: 0 0 24px rgba(229, 74, 218, 0.45); } .psy-form__submit:focus-visible { outline: 2px solid var(--psy-pink, #E54ADA); outline-offset: 3px; transform: translateY(-1px); box-shadow: 0 0 24px rgba(229, 74, 218, 0.45); } .psy-form__submit[disabled] { opacity: 0.6; cursor: progress; transform: none; } .psy-form__submit-check { font-size: 14px; } /* Honeypot — hidden from humans + assistive tech */ .psy-field input[name="psy_hp"] { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ===================================================== 11b. Signup success card (/welcome/ landing) ===================================================== */ .psy-signup__inner--centered { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 200px); padding-top: 120px; padding-bottom: 120px; } .psy-signup__success { width: 100%; max-width: 520px; box-sizing: border-box; padding: 40px 32px; background: rgba(12, 5, 72, 0.92); border: 1px solid var(--color-border, #1A0F5C); border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .psy-signup__success-icon { width: 84px; height: 84px; border-radius: 999px; background: rgba(200, 239, 58, 0.12); border: 1px solid rgba(200, 239, 58, 0.40); display: flex; align-items: center; justify-content: center; color: var(--psy-lime, #C8EF3A); } /* Pink variant — used by the contact-form success card. Same geometry, brand-pink ring + glyph instead of lime. */ .psy-signup__success-icon--pink { background: rgba(229, 74, 218, 0.10); border-color: rgba(229, 74, 218, 0.55); color: var(--color-accent, #E54ADA); } .psy-signup__success-title { margin: 0; font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-text, #F2F2F2); } .psy-signup__success-body { margin: 0; max-width: 380px; font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 14px; line-height: 1.55; color: var(--color-text-muted, rgba(242, 242, 242, 0.65)); } .psy-signup__success-cta { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; width: calc(100% - 32px); margin-inline: auto; padding: 14px 24px; border: 0; border-radius: 999px; background: var(--color-accent, #E54ADA); color: var(--psy-navy, #050033); font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; } .psy-signup__success-cta:hover { outline: none; transform: translateY(-1px); box-shadow: 0 0 24px rgba(229, 74, 218, 0.45); } .psy-signup__success-cta:focus-visible { outline: 2px solid var(--psy-pink, #E54ADA); outline-offset: 3px; transform: translateY(-1px); box-shadow: 0 0 24px rgba(229, 74, 218, 0.45); } .psy-signup__success-resend { background: transparent; border: 0; padding: 0; font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 13px; font-weight: 700; color: var(--color-accent, #E54ADA); cursor: pointer; text-decoration: none; } .psy-signup__success-resend:hover { outline: none; text-decoration: underline; } .psy-signup__success-resend:focus-visible { outline: 2px solid var(--psy-pink, #E54ADA); outline-offset: 2px; border-radius: 2px; text-decoration: underline; } .psy-signup__success-resend[disabled] { opacity: 0.6; cursor: progress; } .psy-signup__success-feedback { margin: 0; font-size: 12px; font-weight: 600; color: var(--psy-green, #2EE577); } .psy-signup__success-feedback.is-error { color: var(--color-accent, #E54ADA); } /* ===================================================== 12. Responsive ===================================================== */ @media (max-width: 1024px) { .psy-form { padding: 36px 28px; } } @media (max-width: 720px) { .psy-signup__inner { padding: 48px var(--container-pad-mobile, 20px) 80px; } .psy-signup__inner--centered { padding-top: 64px; padding-bottom: 64px; min-height: calc(100vh - 160px); } .psy-signup__success { padding: 32px 24px; } .psy-signup__hero { margin-bottom: 32px; } .psy-signup__title { letter-spacing: -0.04em; -webkit-text-stroke-width: 6px; } .psy-signup__intro { font-size: 16px; } .psy-form { padding: 24px 20px; border-radius: 16px; } /* Collapse all grid cols to full width */ .psy-field[data-cols] { grid-column: span 12 !important; } /* Pill rows stack on mobile (Producer/DJ/Live Band, Travel To) */ .psy-field--pill .psy-field__options { gap: 8px; } /* Sex F/M stays inline on mobile too */ .psy-field--radio .psy-field__option { flex: 1 1 calc(50% - 4px); } }