with class `validation-summary-errors` (when there are errors) or `validation-summary-valid` (when valid). The visible state we care about is the errors state — the .secuura-form-summary-errors class applied by the page picks up the same look. The default valid state is hidden by Bootstrap. */ /* ---------- Primary CTA (LOGIN-01) ---------- */ .secuura-form-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0.5rem 1.25rem; font-family: var(--font-sans); font-weight: 500; font-size: 1rem; line-height: 1.5; background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border: 1px solid hsl(var(--primary)); border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; text-decoration: none; /* anchor variant */ } .secuura-form-cta:hover, .secuura-form-cta:focus { background-color: hsl(var(--primary) / 0.9); border-color: hsl(var(--primary) / 0.9); color: hsl(var(--primary-foreground)); text-decoration: none; } .secuura-form-cta:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } .secuura-form-cta:disabled { opacity: 0.6; cursor: not-allowed; } .secuura-form-cta--secondary { background-color: hsl(var(--secondary)); border-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .secuura-form-cta--secondary:hover, .secuura-form-cta--secondary:focus { background-color: hsl(var(--secondary) / 0.9); border-color: hsl(var(--secondary) / 0.9); color: hsl(var(--secondary-foreground)); } /* ---------- External login button (per D-06) ---------- Outline-secondary variant + icon-aware layout. Used by "Continue with Microsoft" on Login/Register/ ExternalLogin/ExternalSignup. */ .secuura-btn-outline-secondary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0.5rem 1.25rem; font-family: var(--font-sans); font-weight: 500; font-size: 1rem; line-height: 1.5; background-color: transparent; color: hsl(var(--secondary)); border: 1px solid hsl(var(--secondary)); border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; text-decoration: none; } .secuura-btn-outline-secondary:hover, .secuura-btn-outline-secondary:focus { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: hsl(var(--secondary)); text-decoration: none; } .secuura-btn-outline-secondary:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* Disabled placeholder state for the outline button — used for the Google and Apple "Continue with X" placeholders that don't yet have a backend handler. Cursor signals non-interactivity; hover/focus colour changes are suppressed so the button reads as inactive. */ .secuura-btn-outline-secondary:disabled, .secuura-btn-outline-secondary[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .secuura-btn-outline-secondary:disabled:hover, .secuura-btn-outline-secondary[aria-disabled="true"]:hover, .secuura-btn-outline-secondary:disabled:focus, .secuura-btn-outline-secondary[aria-disabled="true"]:focus { background-color: transparent; color: hsl(var(--secondary)); border-color: hsl(var(--secondary)); } /* Small inline "Soon" pill that sits at the right end of a placeholder CTA. margin-left:auto pushes it to the trailing edge inside the flex row. */ .secuura-btn-coming-soon { margin-left: auto; padding: 2px 8px; border: 1px solid hsl(var(--secondary) / 0.5); border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: hsl(var(--muted-foreground)); background: transparent; line-height: 1; } /* Inline info notice — used above sections that are temporarily disabled (e.g. the email signup block on Register). Sits inside the form card so it picks up the card's foreground/background tokens. */ .secuura-form-notice { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; padding: 12px 14px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); font-size: 0.875rem; line-height: 1.45; } .secuura-form-notice > i { flex-shrink: 0; margin-top: 2px; color: hsl(var(--primary)); } /* Reset default fieldset chrome and visually dim a disabled fieldset.

already prevents interaction with all child form controls — this rule just makes the dimming explicit so the section reads as inactive at a glance. */ .secuura-form-fieldset--disabled { border: 0; padding: 0; margin: 0; min-width: 0; /* override the legacy fieldset min-content min-width */ opacity: 0.55; } .secuura-form-fieldset--disabled .secuura-form-cta, .secuura-form-fieldset--disabled .form-control, .secuura-form-fieldset--disabled input, .secuura-form-fieldset--disabled select, .secuura-form-fieldset--disabled button { cursor: not-allowed; } /* Visually hidden text for screen readers — used so AT users hear "Continue with Google, coming soon" without sighted users seeing the redundant phrase next to the visible "Soon" pill. */ .secuura-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .secuura-btn-with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .secuura-btn-with-icon > i { font-size: 1rem; line-height: 1; flex-shrink: 0; } /* ---------- Secondary links ---------- */ .secuura-form-link { color: hsl(var(--primary)); text-decoration: none; text-underline-offset: 4px; } .secuura-form-link:hover, .secuura-form-link:focus { text-decoration: underline; color: hsl(var(--primary) / 0.85); } .secuura-form-link:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 2px; } .secuura-form-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } /* When the form-card has no lede paragraph (e.g. simplified Login card), give the actions block a full line of breathing room below the heading. */ .secuura-form-card__header + .secuura-form-actions { margin-top: 24px; } .secuura-form-meta { margin-top: 16px; text-align: center; font-size: 0.875rem; color: hsl(var(--muted-foreground)); } .secuura-form-meta__inline { display: inline; } /* Label-row: label on the left, helper link (e.g. "Forgot password?") on the right, sitting above the input. Used by the GitHub-style consolidated Login layout. */ .secuura-form-group__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* "or" divider — separates local-form from external-providers cluster on the Login card. A token-colored hairline with the word inset into a card-bg pill so it reads as a divider, not a chip. */ .secuura-form-divider { position: relative; text-align: center; margin: 20px 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); } .secuura-form-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: hsl(var(--border)); } .secuura-form-divider > span { position: relative; padding: 0 12px; background-color: hsl(var(--card)); } /* Button-as-link: lets a POST form (e.g. EntraIDSignUp) present as an anchor without inheriting any browser