/* ========================================================================== Signed-out screens — shared ground for login and registration Colours come in two layers: 1. Neutrals per base theme, keyed on . 2. Accent, page ground and tint per skin, keyed on data-auth-skin and written inline by layouts/partials/auth_theme.blade.php from config/skins.php - so these screens follow the Theme mode chosen in Business Settings. Every wash, ring and glow below is mixed from --rg-accent, so a skin only has to name its accent to recolour the page. ========================================================================== */ /* Skin layer defaults - the stock dark theme, for a page with scripting off. Plain :root so the inline html[data-auth-skin] blocks always outrank them. */ :root { --rg-accent: #34D399; --rg-accent-2: #3B8BFF; --rg-on-accent: #06120F; --rg-bg: #080B15; --rg-tint: #2B3240; } :root, html[data-auth-theme="dark"] { --rg-ink: #eef2fb; --rg-heading: #ffffff; --rg-ink-2: #c6cee2; --rg-muted: #8f99b3; --rg-faint: #5d6782; --rg-line: rgba(255, 255, 255, .08); --rg-line-2: rgba(255, 255, 255, .14); --rg-glass: rgba(255, 255, 255, .035); --rg-glass-2: rgba(255, 255, 255, .065); --rg-field: rgba(255, 255, 255, .035); --rg-field-hover: rgba(255, 255, 255, .06); --rg-pop: #0d1324; --rg-card-a: rgba(255, 255, 255, .05); --rg-card-b: rgba(255, 255, 255, .018); --rg-mock: rgba(14, 19, 36, .9); --rg-mock-a: rgba(20, 26, 46, .92); --rg-mock-b: rgba(9, 13, 26, .95); --rg-rail-a: rgba(10, 16, 34, .72); --rg-rail-b: rgba(5, 8, 18, .6); --rg-bar: color-mix(in srgb, var(--rg-bg) 72%, transparent); --rg-grid: rgba(255, 255, 255, .04); --rg-shadow: rgba(0, 0, 0, .75); --rg-danger: #ff6b8a; --rg-headline: linear-gradient(180deg, #ffffff 30%, #9fb0d6 100%); --rg-blob-a: .24; --rg-blob-b: .16; --rg-blob-c: .12; --rg-grain: .06; color-scheme: dark; } html[data-auth-theme="light"] { --rg-ink: #0b1324; --rg-heading: #0b1324; --rg-ink-2: #334155; --rg-muted: #5b6780; --rg-faint: #94a0b4; --rg-line: rgba(15, 23, 42, .09); --rg-line-2: rgba(15, 23, 42, .16); --rg-glass: rgba(255, 255, 255, .7); --rg-glass-2: #ffffff; --rg-field: #ffffff; --rg-field-hover: #ffffff; --rg-pop: #ffffff; --rg-card-a: rgba(255, 255, 255, .94); --rg-card-b: rgba(255, 255, 255, .8); --rg-mock: rgba(255, 255, 255, .94); --rg-mock-a: #ffffff; --rg-mock-b: #f7f9fc; --rg-rail-a: color-mix(in srgb, var(--rg-tint) 45%, #ffffff); --rg-rail-b: color-mix(in srgb, var(--rg-tint) 20%, #ffffff); --rg-bar: color-mix(in srgb, var(--rg-bg) 80%, transparent); --rg-grid: rgba(15, 23, 42, .05); --rg-shadow: rgba(15, 23, 42, .2); --rg-danger: #e11d48; --rg-headline: linear-gradient(180deg, var(--rg-heading) 35%, color-mix(in srgb, var(--rg-heading) 55%, var(--rg-accent)) 100%); --rg-blob-a: .18; --rg-blob-b: .12; --rg-blob-c: .5; --rg-grain: .035; color-scheme: light; } :root { --rg-accent-soft: color-mix(in srgb, var(--rg-accent) 13%, transparent); --rg-accent-line: color-mix(in srgb, var(--rg-accent) 45%, transparent); --rg-accent-glow: color-mix(in srgb, var(--rg-accent) 55%, transparent); --rg-ring: 0 0 0 4px color-mix(in srgb, var(--rg-accent) 16%, transparent); --rg-grad: linear-gradient(100deg, var(--rg-accent) 0%, var(--rg-accent-2) 100%); --rg-r: 22px; --rg-r-sm: 16px; --rg-r-xs: 12px; --rg-ease: cubic-bezier(.2, .8, .2, 1); --rg-font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rg-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; } /* The auth layout paints an indigo gradient on ; it shows on overscroll. */ html:has(> body.auth-page) { background: var(--rg-bg) !important; } body.auth-page { background: var(--rg-bg) !important; color: var(--rg-ink); font-family: var(--rg-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.auth-page ::selection { background: color-mix(in srgb, var(--rg-accent) 30%, transparent); } /* The layout's column: no padding, and the logo / links it pins to the viewport corners are hidden - each page lays those pieces out itself. */ .reg-flush { padding: 0 !important; } .reg-flush > .row { margin: 0; } .reg-flush > .row > .tw-absolute { display: none; } /* -------------------------------------------------------------------------- Ambient light -------------------------------------------------------------------------- */ .reg-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .reg-ambient::after { content: ""; position: absolute; inset: 0; opacity: var(--rg-grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .reg-blob { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; } .reg-blob--1 { width: 620px; height: 620px; left: -180px; top: -220px; background: var(--rg-accent-2); opacity: var(--rg-blob-a); animation: rg-drift-a 22s ease-in-out infinite alternate; } .reg-blob--2 { width: 520px; height: 520px; right: -160px; top: 30%; background: var(--rg-accent); opacity: var(--rg-blob-b); animation: rg-drift-b 26s ease-in-out infinite alternate; } .reg-blob--3 { width: 480px; height: 480px; left: 20%; bottom: -260px; background: var(--rg-tint); opacity: var(--rg-blob-c); animation: rg-drift-a 30s ease-in-out infinite alternate-reverse; } @keyframes rg-drift-a { to { transform: translate(120px, 80px) scale(1.15); } } @keyframes rg-drift-b { to { transform: translate(-100px, 100px) scale(.9); } } /* -------------------------------------------------------------------------- Brand, language picker, buttons Links are scoped under .reg-shell: app.css colours every `.right-col a` white, which would vanish on the light theme. -------------------------------------------------------------------------- */ .reg-shell a.reg-brand, .reg-shell a.reg-brand:hover, .reg-shell a.reg-brand:focus { display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--rg-heading); text-decoration: none; } .reg-brand img { display: block; width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 0 0 1px var(--rg-line-2); } .reg-shell a.reg-signin, .reg-shell a.reg-signin:focus { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px; background: var(--rg-glass-2); box-shadow: inset 0 0 0 1px var(--rg-line-2); font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--rg-ink); text-decoration: none; transition: box-shadow .2s ease, transform .2s var(--rg-ease), color .2s ease; } .reg-shell a.reg-signin:hover { box-shadow: inset 0 0 0 1px var(--rg-accent-line), 0 10px 24px -14px var(--rg-accent-glow); color: var(--rg-heading); text-decoration: none; transform: translateY(-1px); } /* The shared language picker is built for the layout's gradient. */ .reg-lang > details { margin: 0 !important; } .reg-lang > details > summary { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--rg-line); font-size: 14px; font-weight: 500; color: var(--rg-muted) !important; cursor: pointer; list-style: none; transition: box-shadow .2s ease, color .2s ease; } .reg-lang > details > summary::-webkit-details-marker { display: none; } .reg-lang > details > summary:hover { box-shadow: inset 0 0 0 1px var(--rg-line-2); color: var(--rg-heading) !important; } .reg-lang > details > ul { background: var(--rg-pop) !important; box-shadow: inset 0 0 0 1px var(--rg-line-2), 0 24px 50px -16px var(--rg-shadow) !important; max-height: 60vh; overflow-y: auto; flex-wrap: nowrap; } .reg-shell .reg-lang > details > ul a { font-size: 14px; font-weight: 500; color: var(--rg-ink-2) !important; border-radius: 8px; cursor: pointer; } .reg-shell .reg-lang > details > ul a:hover { background: var(--rg-accent-soft) !important; color: var(--rg-heading) !important; } /* Primary action. */ .reg-btn-go { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--rg-grad); font-family: var(--rg-font); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--rg-on-accent); cursor: pointer; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 36px -12px var(--rg-accent-glow); transition: box-shadow .25s var(--rg-ease), transform .25s var(--rg-ease); } .reg-btn-go::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: rg-shine 4.5s var(--rg-ease) infinite; } @keyframes rg-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .reg-btn-go:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 16px 44px -12px var(--rg-accent-glow); } .reg-btn-go:active { transform: translateY(0); } .reg-btn-go:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 3px; } .reg-btn-go svg { width: 17px; height: 17px; transition: transform .25s var(--rg-ease); } .reg-btn-go:hover svg { transform: translateX(3px); } .reg-btn-ghost { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--rg-glass-2); box-shadow: inset 0 0 0 1px var(--rg-line-2); font-family: var(--rg-font); font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--rg-ink); cursor: pointer; transition: box-shadow .2s ease, transform .25s var(--rg-ease); } .reg-btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--rg-accent-line); transform: translateY(-2px); } .reg-btn-ghost:active { transform: translateY(0); } .reg-btn-ghost svg { width: 16px; height: 16px; transition: transform .25s var(--rg-ease); } .reg-btn-ghost:hover svg { transform: translateX(-3px); } /* -------------------------------------------------------------------------- Theme picker (layouts/partials/auth_theme_picker.blade.php) Skin previews paint with the skin's own registry colours (--p-*), not the page tokens, so every card shows what it will turn into. -------------------------------------------------------------------------- */ .at-picker { position: relative; font-family: var(--rg-font); } .at-picker svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .at-trigger { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: var(--rg-glass-2); box-shadow: inset 0 0 0 1px var(--rg-line-2); font-size: 14px; font-weight: 500; color: var(--rg-ink); cursor: pointer; transition: box-shadow .2s ease, transform .2s var(--rg-ease); } .at-trigger:hover, .at-trigger[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--rg-accent-line), 0 10px 24px -14px var(--rg-accent-glow); } .at-trigger:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; } /* The live theme as a split disc: page ground and accent. */ .at-trigger-swatch { position: relative; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--rg-bg); box-shadow: inset 0 0 0 1px var(--rg-line-2); transform: rotate(-45deg); } .at-trigger-swatch i { position: absolute; inset: 0 0 50% 0; background: var(--rg-grad); } .at-trigger-swatch i + i { inset: 50% 0 0 0; background: var(--rg-bg); } .at-trigger-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .at-trigger-chev { width: 15px; height: 15px; color: var(--rg-muted); transition: transform .25s var(--rg-ease); } .at-trigger[aria-expanded="true"] .at-trigger-chev { transform: rotate(180deg); } .at-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 80; display: flex; flex-direction: column; width: min(460px, calc(100vw - 24px)); max-height: min(74vh, 660px); border-radius: 20px; background: var(--rg-pop); box-shadow: inset 0 0 0 1px var(--rg-line-2), 0 40px 80px -24px var(--rg-shadow); text-align: left; overflow: hidden; animation: at-pop .28s var(--rg-ease); } .at-panel[hidden] { display: none; } @keyframes at-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } } .at-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--rg-line); } .at-head b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--rg-heading); } .at-head small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--rg-muted); } .at-close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--rg-muted); cursor: pointer; } .at-close:hover { background: var(--rg-glass-2); color: var(--rg-heading); } .at-close svg { width: 16px; height: 16px; } .at-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 18px; } .at-group-title { position: sticky; top: -6px; z-index: 1; margin: 0 -18px; padding: 12px 18px 8px; background: var(--rg-pop); font-family: var(--rg-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rg-accent); } .at-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .at-card { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 7px; border: 0; border-radius: 13px; background: transparent; box-shadow: inset 0 0 0 1px var(--rg-line); font-family: var(--rg-font); text-align: left; color: var(--rg-ink-2); cursor: pointer; transition: box-shadow .2s ease, background .2s ease, transform .2s var(--rg-ease); } .at-card:hover { background: var(--rg-glass); box-shadow: inset 0 0 0 1px var(--rg-line-2); transform: translateY(-1px); } .at-card:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; } .at-card.is-on { background: var(--rg-accent-soft); box-shadow: inset 0 0 0 1.5px var(--rg-accent); } /* A miniature window in the skin's colours. */ .at-prev { position: relative; display: block; height: 58px; border-radius: 8px; overflow: hidden; background: var(--p-body); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .at-grid--stock .at-prev { height: 70px; } .at-prev i { position: absolute; display: block; } .at-prev-bar { left: 0; right: 0; top: 0; height: 12px; background: var(--p-top); } .at-prev-side { left: 0; top: 12px; bottom: 0; width: 22%; background: var(--p-top); opacity: .55; } .at-prev-line { left: 30%; right: 12%; top: 22px; height: 5px; border-radius: 3px; background: var(--p-sel); } .at-prev-line--short { right: 34%; top: 32px; opacity: .7; } .at-prev-btn { right: 10%; bottom: 8px; width: 26%; height: 9px; border-radius: 5px; background: var(--p-accent); } /* "Follow device": half light, half dark. */ .at-prev--system { background: linear-gradient(135deg, #FCFDFD 0 50%, #0B111E 50% 100%); } .at-prev--system .at-prev-bar, .at-prev--system .at-prev-side { background: linear-gradient(135deg, #F1F3F6 0 50%, #2B3240 50% 100%); } .at-prev--system .at-prev-btn { background: #6366F1; } .at-name { display: flex; flex-direction: column; min-width: 0; padding: 0 2px 2px; font-size: 12.5px; font-weight: 500; line-height: 1.25; } .at-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rg-ink); } .at-name em { margin-top: 2px; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--rg-accent); } .at-tick { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--rg-accent); color: var(--rg-on-accent); box-shadow: 0 4px 10px -3px var(--rg-accent-glow); opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.5, .5, 1); } .at-tick svg { width: 12px; height: 12px; stroke-width: 3.2; } .at-card.is-on .at-tick { opacity: 1; transform: scale(1); } .at-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--rg-line); font-size: 12.5px; color: var(--rg-muted); } .at-foot b { font-weight: 600; color: var(--rg-ink); } .at-reset { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--rg-accent-soft); box-shadow: inset 0 0 0 1px var(--rg-accent-line); font-family: var(--rg-font); font-size: 12.5px; font-weight: 600; color: var(--rg-accent); cursor: pointer; } .at-reset:hover { background: var(--rg-accent); color: var(--rg-on-accent); } @media (max-width: 560px) { .at-trigger-label { display: none; } .at-trigger { padding: 0 8px; } .at-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .at-foot { flex-direction: column; align-items: stretch; text-align: center; } } /* Pulsing status dot. */ .reg-live { width: 8px; height: 8px; border-radius: 50%; background: var(--rg-accent); animation: rg-pulse 2s infinite; } @keyframes rg-pulse { 0% { box-shadow: 0 0 0 0 var(--rg-accent-glow); } 100% { box-shadow: 0 0 0 10px transparent; } } /* Browser autofill would otherwise paint its own pale box on the field. */ body.auth-page input:-webkit-autofill, body.auth-page input:-webkit-autofill:hover, body.auth-page input:-webkit-autofill:focus { -webkit-text-fill-color: var(--rg-ink); -webkit-box-shadow: inset 0 0 0 1px var(--rg-line-2), inset 0 0 0 100px var(--rg-pop); caret-color: var(--rg-ink); transition: background-color 9999s ease-in-out 0s; } @media (prefers-reduced-motion: reduce) { .reg-blob, .reg-btn-go::after, .reg-live, .at-panel { animation: none !important; } .at-card, .at-tick, .at-trigger-chev { transition: none !important; } .reg-btn-go, .reg-btn-ghost, .reg-btn-go svg, .reg-btn-ghost svg { transition: none !important; } }