/* ========================================================================== Sociyaar authentication screen — the split login page -------------------------------------------------------------------------- HAND-AUTHORED. This is NOT a build output. Edit it directly and commit it. (Same rule as sociyaar.css: nothing here goes into style.css, which is a cssnano-minified gulp build whose node_modules no longer exists.) Loaded by resources/views/auth/login.blade.php, which is a STANDALONE document — it does not @include auth/layout/header.blade.php and therefore loads neither bootstrap, style.css, own.css nor jQuery. That is deliberate: * own.css forces `::placeholder { color:#000 !important }` and `body.login .form-group input { border:1px solid #cfc2fb }`, which this design would have to fight with more !important rules; * the vendor header renders a top nav bar with Login / Sign up buttons, and this design has no top nav — the brand sits inside the left panel and the sign-up link sits under the button; * with nothing else loaded, every rule below can be a plain selector. So this file is the WHOLE stylesheet for that page. It has no dependencies and nothing depends on it. THEME TINTING — NOT USED HERE, ON PURPOSE. sociyaar.css tints against var(--color-global), the accent set by the .color-N class the admin puts on . That variable is declared in fundraiser/css/custom_new.css, which only the logged-in frontend loads, and the class is only applied there too. On the login page --color-global is undefined, so `color-mix(in srgb, var(--color-global) ...)` would resolve to nothing and every accent would fall back to black. The brand colours below are therefore literal. If the login page is ever brought under the theme switcher, load custom_new.css here first and only then swap these. ========================================================================== */ :root { --sy-blue: #1b63f0; --sy-blue-strong: #1450cc; --sy-blue-soft: #eef3fe; --sy-green: #2fa84f; --sy-ink: #0f1720; --sy-body: #454f5b; --sy-muted: #6b7683; --sy-line: #e4e8ee; --sy-field-line: #d7dce4; --sy-danger: #d13438; } /* This page loads no bootstrap and no normalize, so it has to bring its own border-box. Without it the inputs are `width:100%` PLUS 48px of padding either side and overflow the panel, while the submit button below them -- which has no horizontal padding -- sits at the honest 400px. The two ended up ~100px apart in width. */ .sy-auth-page *, .sy-auth-page *::before, .sy-auth-page *::after { box-sizing: border-box; } .sy-auth-page { margin: 0; background: #fff; color: var(--sy-ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* -------------------------------------------------------------------------- 1. The split -------------------------------------------------------------------------- Two panels with a single hairline between them. The rule is a border on the right panel rather than a gap, so it runs the full height of whichever panel is taller without needing a separate element. */ /* The form only ever needs room for a 400px column plus its padding, so it is sized in absolute terms and the showcase takes everything left over. Two proportional tracks (1.12fr 1fr) gave the form 680px of slack on a 1600px screen while squeezing the artwork into a strip. */ .sy-auth { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 560px); min-height: 100vh; } .sy-auth__showcase { display: flex; flex-direction: column; padding: 40px clamp(28px, 4vw, 64px) 48px; } .sy-auth__panel { display: flex; align-items: center; justify-content: center; padding: 48px clamp(24px, 3.5vw, 56px); border-left: 1px solid var(--sy-line); } /* -------------------------------------------------------------------------- 2. Brand -------------------------------------------------------------------------- */ /* The brand is deliberately large here -- roughly 400x115 against the header's 155x44. It is the only branding on the page and the design gives it the top quarter of the panel. Two caps rather than one, because the logo is an admin upload of unknown proportions (this install's is 1000x286, but nothing guarantees that). The percentage is what keeps it sane at the narrow end: at 1920px the 400px cap governs, and at 992px -- where the panel is barely 500px wide -- 45% brings it down to ~230px instead of swallowing half the panel. */ .sy-auth__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; max-width: min(400px, 45%); } .sy-auth__brand img { max-height: 130px; max-width: 100%; width: auto; object-fit: contain; } /* -------------------------------------------------------------------------- 3. Showcase — copy on the left, artwork on the right -------------------------------------------------------------------------- Two columns rather than one image, because the headline and the paragraph are real text again (see auth/layout/split.blade.php for why). The artwork gets the slightly larger share: it is portrait 5:6, and the copy only needs about 34ch. This replaced a three-slide carousel. Nothing rotates and nothing on this panel runs javascript, so there is no stacked-slide grid, no orbit and no dots -- the copy is simply the first column. min-height:0 is not decoration. The stage is a flex child, and a flex child's default min-height:auto refuses to shrink below its content, so without it a tall image pushes the panel past the viewport instead of scaling down inside it. */ .sy-auth__stage { flex: 1; display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(20px, 3vw, 48px); min-height: 0; padding: 8px 0; } .sy-auth__headline { margin: 0 0 24px; font-size: clamp(32px, 3.1vw, 48px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; } /* The lockup is set line by line in the markup; see the comment there. */ .sy-auth__headline > span { display: block; } .sy-auth__headline .sy-blue { color: var(--sy-blue); } .sy-auth__headline .sy-green { color: var(--sy-green); } .sy-auth__lede { margin: 0; max-width: 34ch; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.75; color: var(--sy-body); } .sy-auth__lede .sy-brand-word { color: var(--sy-blue); } /* width:auto with both caps, rather than width:100% plus object-fit: the image then sizes itself to whichever limit bites first -- the column on a wide screen, the viewport height on a short one -- and never letterboxes inside a box larger than the picture. */ .sy-auth__hero { display: block; width: auto; max-width: 100%; max-height: 72vh; margin-inline: auto; } /* -------------------------------------------------------------------------- 6. The form -------------------------------------------------------------------------- */ .sy-auth__form { width: 100%; max-width: 400px; } .sy-auth__form-brand { display: none; /* only shown once the showcase collapses away */ margin-bottom: 32px; } .sy-auth__title { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.015em; } .sy-auth__subtitle { margin: 0 0 28px; font-size: 15px; color: var(--sy-muted); } .sy-auth__alert { margin-bottom: 20px; padding: 12px 14px; border: 1px solid #f5d9a8; border-radius: 10px; background: #fdf6e7; font-size: 14px; line-height: 1.5; color: #7a5a10; } .sy-field { position: relative; margin-bottom: 14px; } .sy-field__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; color: var(--sy-muted); pointer-events: none; } .sy-field input { width: 100%; height: 58px; padding: 0 48px; border: 1px solid var(--sy-field-line); border-radius: 10px; background: #fff; font: inherit; font-size: 15px; color: var(--sy-ink); transition: border-color .2s ease, box-shadow .2s ease; } .sy-field input::placeholder { color: var(--sy-muted); opacity: 1; } .sy-field input:focus { outline: 0; border-color: var(--sy-blue); box-shadow: 0 0 0 3px rgba(27, 99, 240, .16); } .sy-field.has-error input { border-color: var(--sy-danger); } .sy-field__toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; padding: 10px; border: 0; border-radius: 8px; background: none; color: var(--sy-muted); cursor: pointer; } .sy-field__toggle:hover { color: var(--sy-ink); } .sy-field__toggle:focus-visible { outline: 2px solid var(--sy-blue); outline-offset: 1px; } .sy-error { margin: -8px 0 12px; font-size: 13px; color: var(--sy-danger); } .sy-auth__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 22px; font-size: 14px; } .sy-remember { display: inline-flex; align-items: center; gap: 8px; color: var(--sy-body); cursor: pointer; } .sy-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--sy-blue); cursor: pointer; } /* The terms row wraps to two lines at this column width, so unlike the single-line "Remember me" it aligns the box to the first line of text rather than to the centre of the block. */ .sy-terms { margin: 4px 0 22px; font-size: 14px; } .sy-terms .sy-remember { align-items: flex-start; line-height: 1.5; } .sy-terms input { margin-top: 2px; flex: 0 0 auto; } .sy-terms.has-error input { outline: 2px solid var(--sy-danger); outline-offset: 2px; } .sy-link { color: var(--sy-blue); text-decoration: none; font-weight: 500; } .sy-link:hover { text-decoration: underline; } .sy-auth__submit { display: block; width: 100%; height: 54px; border: 0; border-radius: 10px; background: var(--sy-blue); font: inherit; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; transition: background .2s ease; } .sy-auth__submit:hover { background: var(--sy-blue-strong); } /* Sign-up holds this until the terms box is ticked. It has to read as deliberately waiting rather than broken, hence the cursor and the retained brand hue rather than a flat grey. */ .sy-auth__submit:disabled { background: #aac2f5; cursor: not-allowed; } .sy-auth__submit:disabled:hover { background: #aac2f5; } .sy-auth__submit:focus-visible { outline: 2px solid var(--sy-blue); outline-offset: 3px; } .sy-auth__switch { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--sy-muted); } /* -------------------------------------------------------------------------- 6b. Terms modal -------------------------------------------------------------------------- Markup is built by sociyaar-auth.js, so nothing here is referenced from a Blade template. The dialog is capped in height with only the BODY scrolling, so the title and the close button stay reachable through a 40KB document -- scrolling the whole dialog would put the close button 40KB away. The body styles the terms markup itself. That markup comes from the `term` settings row, which the migration restricts to h2/p/ul/li/strong, so those are the only elements that need rules here. */ .sy-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 32, .55); } .sy-modal[hidden] { display: none; } .sy-modal__dialog { display: flex; flex-direction: column; width: 100%; max-width: 760px; max-height: 100%; border-radius: 12px; background: #fff; box-shadow: 0 24px 60px rgba(15, 23, 32, .3); } .sy-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--sy-line); } .sy-modal__title { margin: 0; font-size: 18px; font-weight: 600; } .sy-modal__close { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--sy-muted); cursor: pointer; } .sy-modal__close:hover { color: var(--sy-ink); } .sy-modal__body { flex: 1; overflow-y: auto; padding: 20px 24px; font-size: 14px; line-height: 1.7; color: var(--sy-body); } .sy-modal__body:focus-visible { outline: 2px solid var(--sy-blue); outline-offset: -2px; } .sy-modal__body h2 { margin: 26px 0 10px; font-size: 16px; font-weight: 600; color: var(--sy-ink); } .sy-modal__body h2:first-child { margin-top: 0; } .sy-modal__body p { margin: 0 0 12px; } .sy-modal__body ul { margin: 0 0 14px; padding-left: 20px; } .sy-modal__body li { margin-bottom: 6px; } .sy-modal__body strong { color: var(--sy-ink); } .sy-modal__status { color: var(--sy-muted); } .sy-modal__foot { display: flex; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--sy-line); } .sy-modal__btn { padding: 10px 22px; border: 0; border-radius: 8px; background: var(--sy-blue); font: inherit; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; } .sy-modal__btn:hover { background: var(--sy-blue-strong); } @media (max-width: 480px) { .sy-modal { padding: 0; } .sy-modal__dialog { max-height: 100%; border-radius: 0; } } /* -------------------------------------------------------------------------- 6c. Status pages — verify-email -------------------------------------------------------------------------- auth/verify-email.blade.php extends the same split shell but has no fields: it is a message and two POST forms (resend, log out). Everything below is what that page needs and the two form pages do not. -------------------------------------------------------------------------- */ /* The envelope plate above the title. The page would otherwise open with a heading and nothing else in the top third of a 400px column, which reads as an error screen rather than an expected step. */ .sy-auth__mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 14px; background: var(--sy-blue-soft); color: var(--sy-blue); } /* Body copy under the subtitle. .sy-auth__subtitle is muted and sits directly under the title; this is the readable paragraph beneath it. */ .sy-auth__note { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--sy-body); } /* The address the link went to. Bold + ink so it can be checked at a glance for a typo, which is the single most useful thing this page can tell you. `break-all` because a long address in a 400px column otherwise runs past the panel edge. */ .sy-auth__note strong { color: var(--sy-ink); font-weight: 600; word-break: break-all; } .sy-auth__alert--success { border-color: #b7e0c2; background: #eef8f1; color: #1d6b34; } /* Two separate

s, one button each — they cannot share a flex row inside one form, so the gap lives on the wrapper. */ .sy-auth__actions { display: flex; flex-direction: column; gap: 12px; } /* Log out is the way out of this screen, not the thing to do on it, so it keeps the button's size and hit area but drops to an outline. */ .sy-auth__submit--ghost { border: 1px solid var(--sy-field-line); background: #fff; color: var(--sy-body); } .sy-auth__submit--ghost:hover { background: #f7f8fa; border-color: var(--sy-muted); } /* -------------------------------------------------------------------------- 6d. Password pages — forgot, reset, confirm -------------------------------------------------------------------------- Login and sign-up always have a row between the last field and the button -- remember-me, or the terms checkbox -- and that row carries the 22px gap above the button. The password pages have no such row, so the button would otherwise sit on the field's own 14px and read as attached to it. These two rules restore the same 22px, whether the last thing above the button is a field or the error message under one. -------------------------------------------------------------------------- */ .sy-field + .sy-auth__submit { margin-top: 8px; } .sy-error + .sy-auth__submit { margin-top: 10px; } /* -------------------------------------------------------------------------- 7. Narrower viewports -------------------------------------------------------------------------- Below the breakpoint the showcase is dropped rather than stacked. Stacking would put a wide landscape artwork above the form on exactly the devices with the least room, and its baked-in copy is unreadable at phone widths anyway. The brand then reappears above the form so the page is still identifiably ours. */ @media (max-width: 991.98px) { .sy-auth { grid-template-columns: 1fr; } .sy-auth__showcase { display: none; } .sy-auth__panel { border-left: 0; min-height: 100vh; } /* .sy-auth__form-brand reuses .sy-auth__brand, whose caps are sized for the showcase panel. Over the 400px form column those would render a logo half the width of the screen, so it keeps the old size. */ .sy-auth__form-brand { display: block; max-width: 260px; } .sy-auth__form-brand img { max-height: 52px; } } @media (max-width: 480px) { .sy-auth__panel { padding: 32px 20px; } .sy-auth__title { font-size: 26px; } } /* No reduced-motion block any more: the showcase used to auto-advance and had to be told to stop. Nothing on this page moves on its own now. */