/* * ============================================================================ * contact.css — Contact page (com_contact) premium dark skin * ============================================================================ * * PURPOSE * ------- * Joomla's core com_contact "Single Contact" view ships Cassiopeia/Bootstrap * defaults: white form fields, a transparent ghost submit button, and a legacy * `.well` wrapper that — nested inside `.com-contact__form` — renders as a flat * "double box" on the Neural-LLM dark surface. This sheet repaints /contact * into a single, atmospheric, on-brand contact card: one elevated panel on a * violet→cyan glow field, recessed dark fields, a signature-gradient CTA, and * an invisible-reCAPTCHA trust note — all from the --nllm-* brand tokens. * * ARCHITECTURE * ------------ * Skin-only — NO template override. The "double box" is collapsed by stripping * the inner `form.well` of its surface and promoting the outer * `.com-contact__form` div to the single card. Scoped to `.com-contact` so it * never leaks to other components. Registered with WAM in templates/nllm/ * index.php (gated on com_contact, filemtime cache-bust, depends on * nllm.tokens + nllm.template). Token-pure: every value resolves to a --nllm-* * custom property (spacing / shadow / radius / colour) so the form stays in * lock-step with the brand system; raw rgba() appears only inside gradients * and the ambient glow, where no token exists. * * SURFACE MODEL (deep → glow → elevated → recessed) * ------------------------------------------------- * page --nllm-surface-deep (slate-900) * glow field radial violet + cyan, low alpha (ambient light behind card) * card --nllm-surface (elevated, signature gradient top edge) * fields --nllm-surface-deep (recessed inside the card) * accents --nllm-violet / --nllm-cyan (CTA fill + card top rule) * * [claude:opus-4.8-1m][client:2.1.177][hurc:v0.11.366] * @copyright (C) 2026 Neural LLM. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt * ============================================================================ */ /* ── §1 Layout + ambient glow ───────────────────────────────────────────── * The single-contact view is a narrow form; bare on the wide dark shell it * looks unanchored. Constrain to a readable measure, centre it, and lay a soft * violet→cyan glow behind it (a non-interactive pseudo bled well past the * column) so the card reads as lit, not floating on flat slate. */ .com-contact { position: relative; max-width: 600px; margin-inline: auto; padding: var(--nllm-space-xl, 2rem) var(--nllm-space-md, 1rem) var(--nllm-space-2xl, 3rem); z-index: 0; } .com-contact::before { content: ""; position: absolute; inset: -8% -45% auto; height: 460px; background: radial-gradient(620px circle at 28% 8%, rgba(124, 58, 237, 0.22), transparent 60%), radial-gradient(540px circle at 82% 22%, rgba(6, 182, 212, 0.16), transparent 58%); z-index: -1; pointer-events: none; } /* Brand typeface. Cassiopeia/Bootstrap hard-set font-family on headings and * form controls to its own `-apple-system…Roboto` system stack, which beats * inheritance from and renders the contact view in a foreign (and, on * some fallbacks, wide-spaced) font. Re-assert the brand Inter stack on every * text element of the view so /contact matches the rest of the site. */ .com-contact, .com-contact h1, .com-contact h2, .com-contact h3, .com-contact legend, .com-contact label, .com-contact .form-text, .com-contact input, .com-contact select, .com-contact textarea, .com-contact button { font-family: var(--nllm-font-sans, "Inter", "Helvetica Neue", system-ui, sans-serif); } /* ── §2 Headings — keep the hero, drop the duplicates ───────────────────── * Core stacks up to three near-identical headings (page heading, contact name, * "Email a Contact" label). Keep ONE — the page hero — and let it inherit the * global h1 type scale (size/weight/leading from template.css); we only centre * it and tighten the gap to the card. */ .com-contact > h1, .com-contact .page-header h1 { text-align: center; margin: 0 0 var(--nllm-space-sm, 0.5rem); } .com-contact__container > h2, .com-contact__container > h3, .com-contact > h2, .com-contact > h3 { display: none; } .com-contact__container { color: var(--nllm-text-muted, #cbd5e1); text-align: center; margin-bottom: var(--nllm-space-lg, 1.5rem); } /* ── §3 The card — promote the outer div, dissolve the inner `.well` ────── * THE DOUBLE-BOX FIX. Core wraps the form twice (`.com-contact__form` div + * a legacy `.well` on the

). Make `.com-contact__form` the one card and * strip `.well` of every surface property so it becomes a pass-through. */ .com-contact__form { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(30, 41, 59, 0.94) 0%, rgba(20, 28, 46, 0.94) 100%); border: 1px solid var(--nllm-surface-edge, #475569); border-radius: var(--nllm-radius-lg, 20px); padding: var(--nllm-space-xl, 2rem); box-shadow: var(--nllm-shadow-lg, 0 12px 40px rgba(124, 58, 237, 0.3)); animation: nllm-contact-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Signature gradient rule across the top edge of the card. */ .com-contact__form::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--nllm-gradient, linear-gradient(135deg, #7c3aed 0%, #5b21b6 55%, #06b6d4 100%)); } /* Collapse the inner `.well` — this is what kills the second box. */ .com-contact form.well { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; } .com-contact fieldset { border: 0; margin: 0; padding: 0; } /* The form fieldset's ("Send an Email") — restyled from a bare default * into a small brand eyebrow at the top of the card instead of a redundant * second heading under the "Contact Us" hero. */ .com-contact legend { display: block; width: 100%; margin: 0 0 var(--nllm-space-md, 1rem); font-size: var(--nllm-text-sm, 0.875rem); font-weight: var(--nllm-font-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.09em; color: var(--nllm-violet-soft, #a855f7); } .com-contact .control-group { margin-bottom: var(--nllm-space-md, 1rem); } .com-contact .control-group:last-of-type { margin-bottom: 0; } .com-contact label, .com-contact .control-label label { display: inline-block; margin-bottom: var(--nllm-space-xs, 0.25rem); font-weight: var(--nllm-font-weight-semibold, 600); font-size: var(--nllm-text-sm, 0.875rem); letter-spacing: 0.01em; color: var(--nllm-text, #f8fafc); } /* Required-field asterisk + the "Required field" legend — cyan accent. */ .com-contact .star, .com-contact .required .star, .com-contact .form-text strong { color: var(--nllm-cyan-bright, #22d3ee); } /* ── §4 Dark-on-dark fields (the proven core fix, retained) ─────────────── * Recessed deep-surface inputs inside the elevated card. Exclusion list keeps * checkboxes/radios/buttons native. */ .com-contact input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]):not([type="file"]), .com-contact select, .com-contact textarea { width: 100%; box-sizing: border-box; background-color: var(--nllm-surface-deep, #0f172a); /* !important overrides template.css's global `.required { color:#a78bfa !important }` * (meant for the asterisk) so field VALUE text isn't painted purple. */ color: var(--nllm-text, #f8fafc) !important; border: 1px solid var(--nllm-surface-edge, #475569); border-radius: var(--nllm-radius-sm, 6px); padding: calc(var(--nllm-space-sm, 0.5rem) + var(--nllm-space-xs, 0.25rem)) var(--nllm-space-md, 1rem); font-size: var(--nllm-text-sm, 0.9375rem); outline: none; transition: border-color var(--nllm-transition-fast, 0.15s ease), box-shadow var(--nllm-transition-fast, 0.15s ease), background-color var(--nllm-transition-fast, 0.15s ease); } .com-contact textarea { min-height: 9.5rem; resize: vertical; } /* Focus — brand violet border + a soft brand glow. * * background-color + color are RE-ASSERTED here on purpose. Bootstrap's own * `.form-control:focus { background-color: var(--body-bg); color: var(--body-color); }` * lives in the late-loading core `template.min.css`; it ties our nllm * `.form-control:focus` on specificity (both 0,2,0) and wins on source order, * repainting the field WHITE on focus (`--body-bg` = #fff). Combined with the * §4 base rule's `color: … !important` (which keeps the VALUE text white), that * produced an invisible white-on-white textarea the moment it was focused. * Our `.com-contact …:focus` selectors are specificity 0,2,1 — one notch above * Bootstrap's 0,2,0 — so naming the dark surface here cleanly wins WITHOUT * needing `!important`. A subtle lighten (surface vs surface-deep) signals focus. */ .com-contact input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]):not([type="file"]):focus, .com-contact select:focus, .com-contact textarea:focus { background-color: var(--nllm-surface, #1e293b); border-color: var(--nllm-violet, #7c3aed); box-shadow: var(--nllm-shadow-sm, 0 2px 8px rgba(124, 58, 237, 0.15)); color: var(--nllm-text, #f8fafc); } .com-contact input::placeholder, .com-contact textarea::placeholder { color: var(--nllm-text-subtle, #64748b); opacity: 1; } /* ── §5 Submit — gradient-filled CTA with a hover lift + arrow ──────────── * Core paints the submit as a transparent ghost on the dark page. Fill it with * the signature gradient and add a CSS arrow that nudges on hover. */ .com-contact .btn-primary, .com-contact button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: var(--nllm-space-sm, 0.5rem); margin-top: var(--nllm-space-lg, 1.5rem); padding: calc(var(--nllm-space-sm, 0.5rem) + var(--nllm-space-xs, 0.25rem)) var(--nllm-space-xl, 2rem); background: var(--nllm-gradient, linear-gradient(135deg, #7c3aed 0%, #5b21b6 55%, #06b6d4 100%)); background-size: 160% 160%; background-position: 0% 50%; color: var(--nllm-text, #f8fafc); border: 0; border-radius: var(--nllm-radius-sm, 6px); font-weight: var(--nllm-font-weight-bold, 700); letter-spacing: 0.01em; cursor: pointer; box-shadow: var(--nllm-shadow-md, 0 6px 20px rgba(124, 58, 237, 0.2)); transition: background-position var(--nllm-transition-base, 0.22s ease), transform var(--nllm-transition-fast, 0.15s ease), box-shadow var(--nllm-transition-fast, 0.15s ease); } .com-contact .btn-primary::after, .com-contact button[type="submit"]::after { content: "→"; transition: transform var(--nllm-transition-fast, 0.15s ease); } .com-contact .btn-primary:hover, .com-contact button[type="submit"]:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: var(--nllm-shadow-lg, 0 12px 40px rgba(124, 58, 237, 0.3)); } .com-contact .btn-primary:hover::after, .com-contact button[type="submit"]:hover::after { transform: translateX(3px); } .com-contact .btn-primary:active, .com-contact button[type="submit"]:active { transform: translateY(0); } /* ── §6 reCAPTCHA trust note + system messages ──────────────────────────── * The v3 widget is invisible, so a quiet reassurance line at the card foot is * the only signal the form is protected. Rendered as a pseudo — no override. */ .com-contact__form::after { content: "🔒 Protected by Google reCAPTCHA"; display: block; margin-top: var(--nllm-space-lg, 1.5rem); padding-top: var(--nllm-space-md, 1rem); border-top: 1px solid rgba(71, 85, 105, 0.45); text-align: center; font-size: var(--nllm-text-sm, 0.875rem); letter-spacing: 0.01em; color: var(--nllm-text-subtle, #64748b); } /* Joomla .alert blocks repainted onto the dark surface (no white flash). */ .com-contact .alert { border-radius: var(--nllm-radius-sm, 6px); border: 1px solid var(--nllm-surface-edge, #475569); background: var(--nllm-surface, #1e293b); color: var(--nllm-text, #f8fafc); padding: calc(var(--nllm-space-sm, 0.5rem) + var(--nllm-space-xs, 0.25rem)) var(--nllm-space-md, 1rem); margin-bottom: var(--nllm-space-lg, 1.5rem); } .com-contact .alert-success { border-color: var(--pc-save-border, #16a34a); } .com-contact .alert-danger, .com-contact .alert-error { border-color: var(--pc-status-blocked, #dc2626); } .com-contact .invalid { border-color: var(--pc-status-blocked, #dc2626) !important; } /* ── §7 Motion — one orchestrated entrance, reduced-motion aware ──────────*/ @keyframes nllm-contact-rise { from { transform: translateY(14px); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .com-contact__form { animation: none; } .com-contact .btn-primary, .com-contact button[type="submit"], .com-contact .btn-primary::after, .com-contact button[type="submit"]::after, .com-contact input, .com-contact select, .com-contact textarea { transition: none; } } /* ── §8 Wider screens — CTA shrinks to content (mobile-first base) ────────*/ @media (min-width: 576px) { .com-contact .btn-primary, .com-contact button[type="submit"] { width: auto; } }