/* ========================================================================== Auth — brand panel (split layout) Opt-in companion to auth.css. A page joins the split layout by adding the `auth-split` class to (see refactor/layouts/auth.blade.php); pages that do not opt in keep the original centered card untouched. All colours and spacing come from variables.css so the panel follows the theme, including dark mode. ========================================================================== */ @import url('variables.css'); /* The centred layout leaves the card floating in a large empty page. In split mode the card sits beside a brand panel instead, so the two share the width. Only rules scoped under .auth-split apply — nothing here changes the default layout. */ .auth-split .auth-main { align-items: stretch; justify-content: stretch; padding: 0; } /* Float the topbar over the layout so the brand panel runs to the very top of the viewport instead of starting below a strip of page background. The topbar's only controls (theme, language) sit flush right, which is over the light form column — so they keep their contrast. */ .auth-split .auth-topbar { position: absolute; top: 0; left: 0; right: 0; } .auth-split .auth-footer { /* Footer belongs to the form side, not under the photograph. */ margin-left: auto; width: 100%; max-width: 48%; } @media (max-width: 60rem) { .auth-split .auth-topbar { position: relative; } .auth-split .auth-footer { max-width: none; } } .auth-split-grid { display: grid; grid-template-columns: 1.05fr 1fr; width: 100%; min-height: 100%; } /* ---- Brand panel ---- */ .auth-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-10); overflow: hidden; isolation: isolate; color: #FFFFFF; } /* Photograph sits underneath a brand-coloured wash. The image is decorative, so it is a background rather than an — nothing is lost to a screen reader if it fails to load, and the text stays legible because the gradient below is opaque enough on its own. */ .auth-brand-photo { position: absolute; inset: 0; z-index: -2; background-image: url('../../images/marketing/team-collaboration.jpg'); background-size: cover; background-position: center; } .auth-brand-wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, rgba(0, 77, 84, 0.94) 0%, rgba(0, 124, 137, 0.88) 55%, rgba(0, 95, 105, 0.94) 100%); } .auth-brand-mark { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: -0.01em; } /* logo_light.svg is the light-on-dark variant (cyan + white artwork), which is what the dark theme uses — the right choice against the teal wash. No filter: knocking it out to white flattened the badge and the glyph into one solid shape. */ .auth-brand-mark img { height: var(--space-9); width: auto; } .auth-brand-body { max-width: 30rem; } .auth-brand-title { font-size: clamp(1.75rem, 2.4vw, 2.375rem); line-height: 1.2; font-weight: var(--weight-semibold); letter-spacing: -0.02em; margin-bottom: var(--space-4); } .auth-brand-lede { font-size: var(--text-base); line-height: var(--leading-relaxed); color: rgba(255, 255, 255, 0.88); margin-bottom: var(--space-7); } .auth-brand-points { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); } .auth-brand-points li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: rgba(255, 255, 255, 0.92); } .auth-brand-points .material-symbols-rounded { font-size: 20px; flex-shrink: 0; color: #FFFFFF; opacity: 0.9; } .auth-brand-foot { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.7); } /* ---- Card side ---- */ .auth-split-form { display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-6); background: var(--color-page-bg); } /* The card already carries its own border and shadow, which read as a second box inside the split panel. Flatten it here only. */ .auth-split .auth-card { border: none; box-shadow: none; background: transparent; max-width: 26rem; padding: 0; } /* The brand panel already shows the logo; repeating it above the form is the same mark twice on one screen. Hidden only at widths where the panel is actually visible — the media query below restores it. */ .auth-split .auth-card-logo { display: none; } /* ---- Responsive ---- Below this width the panel would squeeze the form into an unusable column, so it is dropped entirely and the original centred card returns. */ @media (max-width: 60rem) { .auth-split-grid { grid-template-columns: 1fr; } .auth-brand { display: none; } .auth-split-form { padding: var(--space-8) var(--space-5); } .auth-split .auth-card { background: var(--color-card-bg); border: var(--space-px) solid var(--color-border); box-shadow: var(--shadow-card); padding: var(--space-9) var(--space-8); border-radius: var(--radius-card); } /* Panel is gone, so the form needs the logo back. */ .auth-split .auth-card-logo { display: flex; } } /* The dot-grid page texture is drawn on body::before. In split mode the panel and form supply their own backgrounds, and the grid showed through in the strip beside the footer. `.auth-split` IS the body element, so this has to be `body.auth-split::before` — a descendant selector matches nothing. */ body.auth-split::before { display: none; }