/* ------------------------------------------------------------------------ */ /* ZPCS Public Registry — namespaced styles for WordPress/Astra integration */ /* */ /* Every rule in this file is scoped beneath .zpcs-registry-app, including */ /* the custom-property design tokens (never :root) — so nothing here can */ /* leak onto the surrounding Astra theme, Elementor content, or any other */ /* plugin's markup. The one deliberate exception is the single */ /* `body.zpcs-registry-route` rule at the end of this file: the page's own */ /* background sits on , outside .zpcs-registry-app's reach, so it is */ /* instead scoped via a body class the plugin only ever adds on its own two */ /* routes (see ZPCS_Routes::add_body_class()) — never on any other page. */ /* Content width: templates wrap this in Astra's own .ast-container for */ /* native padding, but that alone was NOT sufficient in production — this */ /* custom template bypasses Astra's normal page template entirely (no */ /* #primary/#content wrapper, no sidebar-layout body classes), so Astra's */ /* own width/centering rules for .ast-container did not reliably apply in */ /* this non-standard context (observed: content left-aligned in a narrow */ /* column instead of centered). .zpcs-registry-app therefore takes explicit, */ /* self-contained control of its own max-width and centering below, so it */ /* renders correctly regardless of exactly what the surrounding wrapper does.*/ /* */ /* Typography deliberately inherits the theme's real, currently-active body */ /* font (font-family: inherit) rather than naming a specific external font */ /* — naming "Bricolage Grotesque" directly previously risked a mismatch */ /* against exactly what Astra had loaded, and as a variable font referenced */ /* by bare name at font-weight 700, risked the browser falling back to */ /* faux-bold synthesis (a common cause of "ghosted/doubled" glyph */ /* rendering) if the resolved instance had no true 700 weight. Headings */ /* also explicitly neutralize text-shadow/-webkit-text-stroke, since the */ /* site's Elementor Global Kit (confirmed present via the elementor-kit-487 */ /* body class) can apply its own sitewide heading effects that would */ /* otherwise bleed through onto this content. */ /* ------------------------------------------------------------------------ */ .zpcs-registry-app { /* Colors (unchanged ZPCS brand palette, scoped locally instead of :root) */ --navy: #122039; --navy-2: #1b2e4f; --green: #6ba539; --green-deep: #4e7e27; --green-bright: #7fbf3f; --paper: #f6f7f2; --paper-2: #edefe7; --card: #ffffff; --ink: #16212f; --muted: #5c6675; --line: rgba(18, 32, 57, 0.12); --line-strong: rgba(18, 32, 57, 0.22); --danger: #b3261e; --danger-bg: rgba(179, 38, 30, 0.1); --danger-line: rgba(179, 38, 30, 0.35); --amber: #8a6400; --amber-bg: rgba(184, 134, 11, 0.14); --amber-line: rgba(184, 134, 11, 0.35); --slate-blue: #3d5a80; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Radii */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* Shadows — still restrained (never glassmorphism/heavy elevation), but given a little more presence than before so cards read clearly against the page's now-white background, which no longer provides natural contrast on its own. */ --shadow-card: 0 2px 8px rgba(18, 32, 57, 0.08); --shadow-hover: 0 8px 20px rgba(18, 32, 57, 0.12); display: block; /* Inherit Astra's real, currently-active body font rather than naming one. */ font-family: inherit; font-size: 1.05rem; line-height: 1.6; color: var(--ink); /* Subtle paper tint, not flat white — individual cards (.registry-card, .profile-section, etc.) stay pure white so they read with real depth against this background, rather than blending into a uniformly white page. */ background: var(--paper); /* Explicit, self-contained width + centering (matches Astra's own ~1200px content width) — does not depend on the surrounding .ast-container wrapper behaving any particular way, since that could not be relied on in this non-standard template. */ max-width: 1200px; width: 100%; margin: 0 auto; /* Horizontal padding is a safety net independent of the wrapper — guarantees a comfortable minimum gutter even at the max-width boundary. */ padding: var(--space-6) var(--space-5) var(--space-8); } .zpcs-registry-app, .zpcs-registry-app * { /* Must include the element itself, not just descendants — .zpcs-registry-app has its own width:100%/padding combination, which overflowed its container without this. */ box-sizing: border-box; } .zpcs-registry-app [hidden] { display: none !important; } .zpcs-registry-app h1, .zpcs-registry-app h2, .zpcs-registry-app h3 { font-family: inherit; font-weight: 700; font-synthesis: none; line-height: 1.25; letter-spacing: normal; text-shadow: none; -webkit-text-stroke: 0; color: var(--ink); margin: 0 0 var(--space-2); } .zpcs-registry-app h1 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); } .zpcs-registry-app a { color: var(--green-deep); } .zpcs-registry-app a:focus-visible, .zpcs-registry-app button:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; border-radius: 6px; } .zpcs-registry-app .subtitle { margin: 0 0 var(--space-5); color: var(--muted); max-width: 60ch; } .zpcs-registry-app .visually-hidden-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------------- */ /* Buttons and form controls */ /* ---------------------------------------------------------------------- */ .zpcs-registry-app input, .zpcs-registry-app select, .zpcs-registry-app textarea { width: 100%; font-family: inherit; font-size: 1rem; line-height: 1.4; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); } .zpcs-registry-app input:focus, .zpcs-registry-app select:focus, .zpcs-registry-app textarea:focus { outline: 3px solid var(--green-bright); outline-offset: 1px; border-color: var(--green-deep); } .zpcs-registry-app input:disabled, .zpcs-registry-app select:disabled, .zpcs-registry-app textarea:disabled { opacity: 0.6; cursor: not-allowed; } /* ---------------------------------------------------------------------- */ /* Registration form — fieldsets, labels, checkboxes, field errors */ /* ---------------------------------------------------------------------- */ /* Sections read as separated regions within one continuous card (a thin top border, generous spacing) rather than nested boxes-within-a-box — the modern "standards application" pattern the registration redesign calls for. Each fieldset is its own 2-column grid so paired fields (e.g. Country | City) can sit side by side on desktop; .form-group--full spans both columns for fields that should stay full width. */ .zpcs-registry-app fieldset { border: none; border-top: 1px solid var(--line); border-radius: 0; padding: var(--space-6) 0 0; margin: 0 0 var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); } .zpcs-registry-app fieldset:first-of-type { border-top: none; padding-top: 0; } .zpcs-registry-app legend { grid-column: 1 / -1; font-family: inherit; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; padding: 0; color: var(--navy); } .zpcs-registry-app .fieldset-intro { grid-column: 1 / -1; margin: var(--space-1) 0 0; color: var(--muted); font-size: 0.9rem; } .zpcs-registry-app .form-group { margin-top: var(--space-4); } .zpcs-registry-app .form-group--full { grid-column: 1 / -1; } .zpcs-registry-app .form-group label { margin-top: 0; } .zpcs-registry-app label { display: block; margin-top: var(--space-3); font-size: 0.9rem; font-weight: 600; color: var(--ink); } .zpcs-registry-app label.checkbox { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.9rem; font-weight: 400; margin-top: 0; } .zpcs-registry-app label.checkbox input { width: auto; margin-top: 0.2rem; } /* Consent — an intentionally-designed panel rather than two bare checkboxes trailing off the end of a long form. */ .zpcs-registry-app .consent-panel { grid-column: 1 / -1; background: color-mix(in srgb, var(--green) 6%, var(--card)); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); } .zpcs-registry-app .consent-panel label.checkbox + label.checkbox { margin-top: 0; } /* Submit — a clear final action area, separated from the fields above it. */ .zpcs-registry-app .submit-row { grid-column: 1 / -1; margin-top: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--line); } .zpcs-registry-app #zpcs-registration-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 var(--space-6); font-size: 1.05rem; box-shadow: var(--shadow-card); } .zpcs-registry-app #zpcs-registration-submit:hover:not(:disabled) { box-shadow: var(--shadow-hover); transform: translateY(-1px); } .zpcs-registry-app .field-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.2rem; } .zpcs-registry-app #zpcs-form-status { min-height: 1.2rem; margin-top: var(--space-4); font-size: 0.95rem; color: var(--muted); } .zpcs-registry-app #zpcs-form-status.success { color: var(--green-deep); } .zpcs-registry-app #zpcs-form-status.error { color: var(--danger); } .zpcs-registry-app button { display: inline-block; padding: var(--space-3) var(--space-5); font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.4; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--green); /* Dark ink text, not white — white-on-this-green fails WCAG AA contrast (~2.97:1); ink-on-green passes comfortably (~5.5:1). */ color: var(--ink); cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .zpcs-registry-app button:hover:not(:disabled) { background: color-mix(in srgb, var(--green) 75%, var(--green-deep) 25%); } .zpcs-registry-app button:disabled { opacity: 0.6; cursor: not-allowed; } /* ---------------------------------------------------------------------- */ /* Registry introduction — a compact, restrained tinted surface (not a */ /* marketing hero) grouping the eyebrow, heading, description, and search. */ /* ---------------------------------------------------------------------- */ .zpcs-registry-app .registry-intro { background: color-mix(in srgb, var(--green) 5%, var(--card)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6); } .zpcs-registry-app .registry-intro .profile-tag { margin-bottom: var(--space-2); } .zpcs-registry-app .registry-intro .search-form { margin-bottom: 0; } /* ---------------------------------------------------------------------- */ /* Registration — narrower content column, form card + "What Happens Next" */ /* */ /* A data-entry page reads better narrower and cleaner than the Registry's */ /* browsing pages — scoped via the compound ".zpcs-registry-app.zpcs- */ /* registration-page" selector (only the /register/ template carries both */ /* classes) so /registry/ and /registry/{number} keep their previously */ /* approved 1200px width and paper-tinted background exactly as they are. */ /* ---------------------------------------------------------------------- */ .zpcs-registry-app.zpcs-registration-page { max-width: 960px; /* Matches the body.zpcs-registration-route background below exactly, so there is no visible seam between the page background and this container. */ background: #faf9f5; } /* A compact, non-tinted intro — no card chrome, just a small green accent rule above a navy heading and a short muted description, so the page opens with clear hierarchy instead of the Registry's tinted browsing-page intro treatment. */ .zpcs-registry-app .registration-intro { background: none; border: none; padding: 0; margin-bottom: var(--space-7); } .zpcs-registry-app .registration-intro::before { content: ""; display: block; width: 56px; height: 4px; border-radius: var(--radius-pill); background: var(--green); margin-bottom: var(--space-4); } .zpcs-registry-app .registration-intro h1 { font-size: clamp(1.9rem, 3.5vw, 2.4rem); } .zpcs-registry-app .registration-intro .subtitle { font-size: 1.05rem; margin-bottom: 0; } .zpcs-registry-app .registration-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 2.5rem; margin-bottom: var(--space-6); } /* ---------------------------------------------------------------------- */ /* Official Verification Body page — a simple, static directory entry: */ /* a centered logo, company name, tagline, and one external link. Width and */ /* background are scoped the same way /register/'s are — via a compound */ /* class only this template carries — so /registry/, /registry/{number}, */ /* and /register/ are completely unaffected. */ /* ---------------------------------------------------------------------- */ .zpcs-registry-app.zpcs-verification-body-page { max-width: 1140px; background: #faf9f5; } .zpcs-registry-app .vb-page-title { text-align: center; margin-bottom: var(--space-6); } /* The Verification Body card is the page's sole focal point — a "premium" certification-programme treatment (large centered logo, name, tagline) rather than a plain stacked card. */ .zpcs-registry-app .vb-card--premium { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); padding: 3.5rem var(--space-6); margin-bottom: var(--space-6); text-align: center; } .zpcs-registry-app .vb-card__logo { display: block; /* max-height + max-width: 100% (rather than a fixed height) lets the browser scale the logo down proportionally on narrow viewports — a fixed height combined with a fixed px max-width does not shrink together, and previously overflowed the card at 375px. */ max-height: 88px; width: auto; max-width: 100%; height: auto; object-fit: contain; margin: 0 auto var(--space-5); } .zpcs-registry-app .vb-card__name { margin: 0 0 var(--space-4); font-size: clamp(1.5rem, 3.5vw, 1.9rem); color: var(--navy); } .zpcs-registry-app .vb-card__tagline { max-width: 40ch; margin: 0 auto; color: var(--muted); font-size: 1.05rem; line-height: 1.6; } /* A real , styled identically to the existing