so it never
navigates away from a half-completed registration form; styled back to
look like the link it behaves as. */
.opc-policy-link {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--opc-primary);
text-decoration: underline;
cursor: pointer;
}
.opc-policy-link:hover,
.opc-policy-link:focus-visible {
color: var(--opc-primary-dark, var(--opc-primary));
}
/* Mobile: a full-height sheet. A centred 720px dialog on a phone leaves a
cramped reading column with the gate at the bottom of it — the one place
the user actually has to reach. */
@media (max-width: 575.98px) {
.opc-policy-modal {
padding: 0;
align-items: stretch;
}
.opc-policy-dialog {
max-width: none;
max-height: none;
height: 100%;
border-radius: 0;
}
.opc-policy-body {
padding: 1rem;
}
.opc-policy-footer {
/* Keeps the close control clear of the iOS home indicator. */
padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}
.opc-policy-footer .opc-policy-close {
width: 100%;
}
.opc-policy-hint {
flex-basis: 100%;
text-align: center;
}
}
/* "Already have an account? Log in" — plain text under the wizard, not a
button, on both auth pages. */
.opc-auth-switch {
text-align: center;
margin: 1.25rem 0 0;
font-size: .9rem;
color: var(--opc-text-faint);
display: none;
}
.opc-auth-switch a {
/* No accent colour here either — explicit, repeated "no teal, EVER"
requirement, same as the field labels. NOT --opc-primary: that token
(#1f3c88 navy) has no dark-mode override anywhere in this file, so it
reads as low-contrast on this dark background — which is what made
this link look uninviting in the first place. Plain, high-contrast
and unmistakably a link from weight + underline alone, no colour
coding needed. */
color: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: .15em;
}
/* The leftover-fields fallback section in registration/default.php still
used the old 2-column .opc-edit-grid from before the 3.27.0 single-column
redesign — the only field that ever lands there is Captcha, so it sat in
a 2-up grid with an empty, awkward second column. Full width keeps it
consistent with every other field on this page. */
.opc-register-page .opc-edit-grid {
grid-template-columns: 1fr;
}
/* No outer card any more (3.30) — .opc-edit-section's card-oriented
horizontal padding would just read as unexplained indentation without
one, so it's zeroed here. The hairline border-bottom between sections is
ALSO removed (explicit ask: "all these break lines... look tacky") — Step
3 in particular stacks Review summary / Captcha / Consent as three
sibling .opc-edit-section blocks, so that border was firing three times
down one step. */
.opc-register-page .opc-edit-section {
padding-left: 0;
padding-right: 0;
border-bottom: none;
}
/* Comfortable tap targets on phones; 16px prevents iOS Safari zoom-on-focus.
Colour/size are repeated here with a scoped !important:
confirmed live (3.29.32) that the typed value was rendering both too dark
and too small on these two pages — a Bootstrap/dark-mode cascade these
overrides sit downstream of was winning on specificity even though this
block comes later in the file. Same fix category as the dark-mode
.form-control hotfix elsewhere in this file (see its own comment). */
.opc-register-page .form-control,
.opc-register-page .form-select,
.opc-login-page .form-control,
.opc-login-page .form-select {
min-height: 3rem;
/* Symmetric, so the typed value sits dead centre in the box. It used to
be deliberately top-heavy (1.05rem / .35rem) purely to reserve room
for the floating label that sat inside the box; the label is now a
normal element ABOVE the box, so that reserved space had nothing left
in it and just pushed the value low. */
padding-top: .5rem;
padding-bottom: .5rem;
font-size: 1rem !important;
color: var(--opc-text) !important;
}
/* 3.34.45: registration-only bump, layered on top of the block above rather
than edited in place — login's 1rem is untouched (never part of the
complaint). Needs its own !important for the same reason the block above
does (see its comment): without one, this loses to the very rule it's
trying to override, same specificity or not. */
.opc-register-page .form-control,
.opc-register-page .form-select {
font-size: 1.0625rem !important;
}
/* Login's two fields (username/password) centered on request — floating
label positioning above is unaffected since that's vertical padding,
this is only the typed value's horizontal alignment. login/default.php
(a separate, competing full-page rewrite with its own #form-login id)
is gone — core's own trivial login/default.php dispatcher now delegates
straight to this override's default_login.php, whose actual form id is
#com-users-login__form. Scoped to that id rather than .opc-register-page
so this never bleeds onto the registration page. */
/* #com-users-login__form .form-control {
text-align: center;
} */
.opc-register-page .opc-edit-field,
.opc-login-page .opc-edit-field {
/* Login's own fields also render inside .opc-edit-field (confirmed live
via DevTools — NOT the .control-group structure this file's login
section assumed), so the floating label's absolute positioning had no
correct anchor here at all — it was positioning against whatever
positioned ancestor it found further up the tree, not this field. */
position: relative;
margin-bottom: 1rem;
}
/* 3.34.45: Step 1's field rhythm opened up on request ("space it a little
more... name from surname from username from email from mobile") — 1rem
read as cramped once the page was seen live. Registration-only override
(login keeps the tighter 1rem — its two fields were never the complaint)
layered on top of the shared rule above rather than editing it, so this
doesn't also affect login or the profile page reusing the same class. */
.opc-register-page .opc-edit-field {
margin-bottom: 1.5rem;
}
/* Edge/Chromium's native password reveal + clear icons render INSIDE the
input's own box, on top of our floating-label overlay and padding —
confirmed live as garbled overlapping text ("Hide"/"Passwo…" with the
ambient background showing through). Registration/Profile provide no
custom reveal toggle of their own, so the native one is simply disabled
rather than fought with z-index tricks. Login is untouched/out of scope
(see this file's own login section) even though its password field could
show the same native artifact — not this pass's problem to fix. */
.opc-register-page input[type="password"]::-ms-reveal,
.opc-register-page input[type="password"]::-ms-clear,
.opc-profile-page input[type="password"]::-ms-reveal,
.opc-profile-page input[type="password"]::-ms-clear {
display: none;
}
/* Login has no per-field .opc-edit-field wrapper — its two fields
(username/password) come straight out of core's own
$form->renderFieldset('credentials', …). Ground-truthed from the 6.1.2
core source (see default_login.php's header comment): despite this being
Joomla 6, $field->renderField() still uses the LEGACY B/C layout
(joomla.form.renderfield — Bootstrap 2/3's `.control-group` >
`.control-label` + `.controls`, not the Bootstrap5 `.mb-3`/`.form-label`
shape used elsewhere on this site), because Cassiopeia (and this fork)
ships no site-side override of that layout — only the admin Atum
template does. That wrapper — .control-group — is reused here as the
floating-label positioning context instead of introducing a parallel
markup convention for a two-field form. Registration's Joomla-rendered
fields (username/e-mail/password/confirm) get the same .control-group
treatment below; only First name/Surname are our own hand-written
.form-label markup. */
.opc-login-page .control-group {
position: relative;
margin-bottom: 1rem;
}
/* --- Static labels above the input -------------------------------------
NOT a floating label any more. The floating version was absolutely
positioned over the input and vertically anchored to its wrapper
(.opc-edit-field / .control-group) — but that wrapper GROWS whenever an
inline feedback or error is appended below the input ("Looks good.",
"Please include an '@'…"), so the label kept sliding out of position the
moment a field gained a message. Every attempt to pin it (line-height
matched to the box, top:50%, a fixed half-height offset) fixed one state
and broke another, because the label's position was coupled to markup
that changes at runtime.
A label in NORMAL FLOW above its input cannot drift: nothing rendered
after the input can move it, there is no overlap with the typed value to
tune, and no focus/filled/autofill state has to be tracked at all. This
is option (a) from the brief ("labels sit cleanly ABOVE the input box
with adequate spacing").
Two label shapes are covered: our own hand-written `.form-label` (First
name/Surname), and core's `.control-group > .control-label > label`
(Joomla-rendered fields on both pages). Consent checkboxes / remember-me
use `.form-check-label`, so they are untouched by this block. */
.opc-register-page .opc-edit-field .form-label,
.opc-register-fields .opc-edit-field .control-label label,
.opc-login-page .control-group .control-label label,
.opc-login-page .opc-edit-field .form-label {
display: block;
margin: 0 0 .35rem;
padding: 0;
font-size: .8125rem;
font-weight: 500;
line-height: 1.3;
color: var(--opc-text-faint);
}
/* 3.34.45: "a little more size on the text" — registration-only, same
reasoning as the spacing override above (login untouched). Labels up one
step (.8125rem -> .9rem) and the typed value up from 1rem -> 1.0625rem
(overrides the shared !important rule below by matching its own
specificity + coming later in source order, not by adding a second
!important). */
.opc-register-page .opc-edit-field .form-label {
font-size: .9rem;
}
/* No focus / filled / autofill / reduced-motion state rules any more — a
static label has no states to track and nothing to animate, which is the
entire point of moving off the floating version. The required "*" inside
the label markup inherits the colour above. */
/* Core's own `.control-label` div (login/registration's Joomla-rendered
fields) and `.controls` div carry no Bootstrap CSS of their own on this
Bootstrap5-only site — they're unstyled generic wrapper divs — so
`.controls` needs nothing extra; the label above simply leaves it as the
only thing occupying normal flow. Scoped to `.opc-register-fields`, not
the whole page, so the leftover-fieldset fallback (Captcha, rendered in
`.opc-edit-grid` outside this container — the only field that ever lands
there) never gets its label wrenched out of flow and laid over the
widget; it keeps Joomla's plain default look instead. */
.opc-register-fields .opc-edit-field .control-label,
.opc-login-page .control-group .control-label {
margin: 0;
}
/* Password1's "Minimum Requirements — Characters: 12, …" line — confirmed
live (3.29.33) this is NOT the field's .form-text description at all.
registration.xml sets rules="true" on password1, which makes Joomla's
password field LAYOUT (layouts/joomla/form/field/password.php, ground-
truthed from the 6.1.2 core source) render a wholly separate
`
Minimum Requirements —
…
` BEFORE the actual `.password-group` (input), both still inside
the same `.controls` div. That div sitting in normal flow at the top of
`.controls` — the exact spot the floated-out label overlays — is what
caused the visible text collision; hiding the wrong selector (.form-text)
left it untouched and also pushed the real input down below it. Matched
by its `-rules`-suffixed id rather than `.small.text-muted`, which are
generic enough to risk matching something unrelated later. */
.opc-password1-field [id$="-rules"],
[data-opc-pw-field] [id$="-rules"] {
display: none;
}
/* --- Ambient background (3.29.31) --------------------------------------
Slow-drifting blurred colour blobs behind the card on both auth pages —
the "2026 feels alive" touch. `.opc-ambient-bg` is `position: fixed` and
sits BEFORE the sticky shy header in document order but is deliberately
never made a positioning/overflow ancestor of anything — `position:
fixed` needs no positioned or overflow:hidden container to work, which
matters here specifically because an overflow:hidden ancestor is exactly
what would break the registration page's `position: sticky` shy header.
`z-index: -1` keeps it behind all real content without needing every
other element on the page to be pulled into a stacking context.
Token-driven (--opc-primary/--opc-accent mixed with transparent), no
literal colours, so it reads correctly in dark mode. `filter: blur()` is
cheap here since only `transform` is animated, not the blur radius
itself. */
.opc-ambient-bg {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.opc-ambient-bg span {
position: absolute;
width: 42vmax;
height: 42vmax;
border-radius: 50%;
filter: blur(70px);
opacity: .28;
will-change: transform;
}
[data-bs-theme="dark"] .opc-ambient-bg span {
opacity: .16;
}
.opc-ambient-bg span:nth-child(1) {
top: -18vmax;
left: -12vmax;
background: var(--opc-primary);
animation: opc-orb-drift-a 26s ease-in-out infinite;
}
.opc-ambient-bg span:nth-child(2) {
bottom: -20vmax;
right: -14vmax;
background: var(--opc-primary);
animation: opc-orb-drift-b 32s ease-in-out infinite;
}
.opc-ambient-bg span:nth-child(3) {
top: 40%;
left: 60%;
width: 30vmax;
height: 30vmax;
background: var(--opc-success, #2e9e57);
animation: opc-orb-drift-c 22s ease-in-out infinite;
}
@keyframes opc-orb-drift-a {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(6vmax, 8vmax) scale(1.12); }
}
@keyframes opc-orb-drift-b {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-7vmax, -5vmax) scale(1.08); }
}
@keyframes opc-orb-drift-c {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-5vmax, 6vmax) scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
.opc-ambient-bg span {
animation: none;
}
}
/* Hidden on narrow phones — at that viewport the blobs' 30-42vmax radius is
large enough relative to the card that the blur reads as a colour cast
over the whole screen rather than an ambient background detail. */
@media (max-width: 480px) {
.opc-ambient-bg {
display: none;
}
}
/* Registration-only dampener (3.30): the redesign asks for the background
to stay subtle and never compete with the (now un-boxed) content. A new
override layered on top of the shared rule above — .opc-ambient-bg's own
base opacity is untouched so login's identical background is unaffected. */
.opc-register-page .opc-ambient-bg span {
opacity: .16;
}
[data-bs-theme="dark"] .opc-register-page .opc-ambient-bg span {
opacity: .09;
}
/* --- Entrance motion (3.29.31) ------------------------------------------
Each field row fades/slides up on load, staggered by a short delay per
row — `animation-fill-mode: backwards` holds the 0% state during the
delay so nothing flashes at full opacity before its turn. Pure CSS (no
JS): it only needs to run once, on initial paint, which is exactly what
a plain `animation` on page load already does without any trigger logic.
Registration's rows are `.opc-field-pair` / `.opc-edit-field` /
`.opc-pw-checklist-wrap` direct children of `.opc-register-fields`, plus
the consent card and the action row below the card, which sit outside it;
login's rows are the `.control-group` fields inside `.com-users-login__input`
(see the .control-group comment above — core's legacy field layout, not
`.mb-3`), plus the remember-me row and submit row. Both lists are covered
explicitly rather than with a generic `> *` — a generic selector would
also catch the hidden CSRF/return input Joomla's renderControlFields()
appends, animating something invisible for no reason. */
@keyframes opc-field-enter {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.opc-register-fields > .opc-field-pair,
.opc-register-fields > .opc-edit-field,
.opc-register-fields > .opc-pw-checklist-wrap,
.opc-consent-card,
.opc-register-page .opc-edit-actions-bottom,
.com-users-login__input > .control-group,
.com-users-login__remember,
.com-users-login__submit {
animation: opc-field-enter .5s cubic-bezier(.16, 1, .3, 1) backwards;
}
.opc-register-fields > :nth-child(1) { animation-delay: .02s; }
.opc-register-fields > :nth-child(2) { animation-delay: .08s; }
.opc-register-fields > :nth-child(3) { animation-delay: .14s; }
.opc-register-fields > :nth-child(4) { animation-delay: .20s; }
.opc-register-fields > :nth-child(5) { animation-delay: .26s; }
.opc-register-fields > :nth-child(6) { animation-delay: .32s; }
.opc-register-fields > :nth-child(n+7) { animation-delay: .36s; }
.opc-consent-card { animation-delay: .40s; }
.opc-register-page .opc-edit-actions-bottom { animation-delay: .46s; }
.com-users-login__input > :nth-child(1) { animation-delay: .02s; }
.com-users-login__input > :nth-child(2) { animation-delay: .1s; }
.com-users-login__remember { animation-delay: .18s; }
.com-users-login__submit { animation-delay: .26s; }
.opc-login-fields { animation: opc-field-enter .45s cubic-bezier(.16, 1, .3, 1) backwards; }
.opc-login-remind { animation: opc-field-enter .45s cubic-bezier(.16, 1, .3, 1) .32s backwards; }
@media (prefers-reduced-motion: reduce) {
.opc-register-fields > .opc-field-pair,
.opc-register-fields > .opc-edit-field,
.opc-register-fields > .opc-pw-checklist-wrap,
.opc-consent-card,
.opc-register-page .opc-edit-actions-bottom,
.com-users-login__input > .control-group,
.com-users-login__remember,
.com-users-login__submit,
.opc-login-fields,
.opc-login-remind {
animation: none;
}
}
/* --- Login page ----------------------------------------------------------
big_goose/html/com_users/login/default_login.php. No outer card (aligned,
by explicit request, with registration's own 3.30 card removal — login
was previously deliberately EXCLUDED from that redesign; that exclusion
is now reversed, so the old LOGIN-ONLY glassmorphic-card rule that used
to live here is gone, not just hidden). Reuses the floating-label block
above for username/password and .opc-ambient-bg/.opc-field-enter for the
same motion language as registration — built to feel like the same
product, not a reskinned Joomla core page next to a bespoke one. */
.opc-login-page {
max-width: 460px;
margin-inline: auto;
}
.opc-login-page .com-users-login__input .control-group {
margin-bottom: 1rem;
}
/* Remember-me + "Forgot password?" on one row (3.29.34) — previously
remember-me sat in the card while reset/remind lived in a visually
separate list-group panel below it, flagged live as "disconnected
floating elements". */
.opc-login-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin: .25rem 0 1.1rem;
}
.opc-login-page .com-users-login__remember {
margin: 0;
}
.opc-login-page .com-users-login__remember .form-check-input:checked {
background-color: var(--opc-primary);
border-color: var(--opc-primary);
}
.opc-login-forgot {
font-size: .875rem;
color: var(--opc-primary);
white-space: nowrap;
}
.opc-login-submit {
width: 100%;
min-height: 2.75rem;
}
.opc-login-page .com-users-login__submit + .com-users-login__submit {
margin-top: .5rem;
}
/* "Forgot your username?" — relocated inside the card (3.29.34), directly
under the submit button, rather than a separate panel below it. */
.opc-login-remind {
margin: .9rem 0 0;
text-align: center;
font-size: .8125rem;
}
.opc-login-remind a {
color: var(--opc-text-faint);
}
@media (max-width: 575.98px) {
.opc-login-page {
max-width: none;
}
}
/* --- Consent (3.30: flattened) -----------------------------------------
Previously a boxed, blue-left-bordered "card" — explicitly one of the
nested boxes the redesign asks to remove. Now a plain section, same
treatment as any other .opc-edit-section (a hairline top border, no
background/box), so it reads as part of the one continuous form. */
.opc-consent-card {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--opc-border-light);
}
.opc-consent-title {
margin: 0 0 .75rem;
color: var(--opc-text);
font-weight: 600;
}
.opc-consent-check {
display: flex;
align-items: flex-start;
gap: .65rem;
margin: 0;
padding: .4rem 0;
min-height: 2.5rem;
}
.opc-consent-check + .opc-consent-check {
border-top: 1px solid color-mix(in srgb, var(--opc-primary) 14%, transparent);
}
/* Bootstrap floats .form-check-input and pads the label; this row is flex
instead, so both are reset to sit on the shared baseline. */
.opc-consent-check .form-check-input {
float: none;
margin: .15rem 0 0;
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
}
.opc-consent-check .form-check-label {
padding-left: 0;
line-height: 1.45;
cursor: pointer;
}
.opc-consent-check .form-check-input.is-invalid {
border-color: var(--opc-danger);
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--opc-danger) 25%, transparent);
}
.opc-consent-error {
margin: .6rem 0 0;
color: var(--opc-danger);
font-size: .875rem;
font-weight: 500;
}
/* --- Password strength meter ----------------------------------------- */
.opc-pw-strength {
display: flex;
align-items: center;
gap: .6rem;
margin-top: -.35rem;
margin-bottom: .5rem;
}
.opc-pw-strength-track {
flex: 1 1 auto;
height: 5px;
border-radius: 999px;
background: var(--opc-border);
overflow: hidden;
}
.opc-pw-strength-bar {
display: block;
width: 0;
height: 100%;
border-radius: 999px;
background: var(--opc-danger);
transition: width .18s ease, background-color .18s ease;
}
.opc-pw-strength-label {
flex: 0 0 auto;
min-width: 4.5rem;
font-size: .8rem;
color: var(--opc-text-faint);
}
.opc-pw-strength[data-score="2"] .opc-pw-strength-bar { background: #d98324; }
.opc-pw-strength[data-score="3"] .opc-pw-strength-bar { background: #b0a02b; }
.opc-pw-strength[data-score="4"] .opc-pw-strength-bar { background: var(--opc-success, #2e9e57); }
@media (prefers-reduced-motion: reduce) {
.opc-pw-strength-bar { transition: none; }
}
/* --- Inline field feedback ------------------------------------------- */
.opc-inline-feedback {
margin: .3rem 0 0;
font-size: .8125rem;
min-height: 1.1em;
color: var(--opc-text-faint);
}
/* No message yet (page just loaded, or the field hasn't been touched) means
nothing to reserve space for — the min-height above only earns its keep
once there's actually a line of text to hold steady. */
.opc-inline-feedback:empty {
margin: 0;
min-height: 0;
}
.opc-inline-feedback.is-ok { color: var(--opc-success, #2e9e57); }
.opc-inline-feedback.is-bad { color: var(--opc-danger); }
.opc-required-note {
margin-top: .85rem;
font-size: .8125rem;
color: var(--opc-text-faint);
}
/* Sits above the form instead of below it (3.27.33) — tighter bottom margin
than the trailing-note spacing above, no top margin since the shy header
already carries its own bottom margin. */
.opc-required-note-top {
margin: 0 0 1rem;
}
/* Full-width, stacked actions on phones — a 50/50 split leaves both buttons
too narrow for their labels. */
@media (max-width: 575.98px) {
.opc-register-page .opc-edit-actions-bottom {
display: flex;
flex-direction: column;
gap: .6rem;
}
.opc-register-page .opc-edit-actions-bottom .btn {
width: 100%;
}
.opc-consent-card {
padding: .9rem 1rem;
}
}
/* ==========================================================================
Mandatory profile completion (3.27.0)
Address / consent / communication-preference sections on the profile edit
page, plus the callout shown when the gate has redirected the user here.
Tokens only — no colour literals, so this themes correctly in dark mode.
========================================================================== */
/* The "why am I here" callout. Bootstrap's .alert-warning sets its own
--bs-alert-* custom properties on the element itself, which shadow any
ancestor theme variables regardless of !important — so the palette is
restated here on the element rather than inherited. */
/* Sits INSIDE .opc-profile-scroll (see the template) so it scrolls away as
the user moves down to the fields, instead of permanently occupying the top
of the viewport. Deliberately compact: at five outstanding requirements the
old full-size version (an .h6 plus default alert padding) filled most
of a phone screen and left almost nothing to scroll in — reported live. */
.opc-gate-callout {
margin-bottom: 1rem;
padding: .75rem .9rem;
border-radius: var(--opc-radius, .5rem);
}
/* A
, not a heading element, because this is a UI notice rather than a
document section — and it must not compete with the page's real