/* Colligence Research — Forge sign-in skin * Applies only to auth pages. JS adds .colligence-auth on once an auth * page-content is detected. That lets us gate everything cleanly, including * hiding Gitea's navbar/footer for a clean branded shell. */ :root { --colligence-pink: #DD2A96; --colligence-purple: #7A00C5; --colligence-gradient: linear-gradient(90deg, #DD2A96 0%, #7A00C5 100%); --cb-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---- Hide Gitea chrome on auth pages ---- */ .colligence-auth #navbar, .colligence-auth .page-footer, .colligence-auth footer { display: none !important; } .colligence-auth .page-content.user.signin > h4, .colligence-auth .page-content.user.signup > h4, .colligence-auth .page-content.user.forgot_password > h4, .colligence-auth .page-content.user.reset_password > h4, .colligence-auth .page-content.user.link-account > h4, .colligence-auth .page-content.user.twofa > h4, .colligence-auth .page-content.user.webauthn > h4, .colligence-auth .page-content.user .ui.form h4.ui.top.attached.header { display: none !important; } /* ---- Brand block ---- */ #colligence-brand[hidden] { display: none !important; } #colligence-brand { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin: 1rem auto 2rem; padding: 0 1rem; width: 100%; max-width: 520px; } #colligence-brand .cb-logo { width: 220px; max-width: 70vw; height: auto; margin-bottom: 0.5rem; opacity: 0; transform: scale(0.85); animation: cbLogoIn 0.9s var(--cb-ease) 0.1s forwards; } #colligence-brand .cb-title { margin: 0; font-size: clamp(3.5rem, 10vw, 6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; background: var(--colligence-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; opacity: 0; transform: translateY(24px); animation: cbFadeUp 0.8s var(--cb-ease) 0.55s forwards; } #colligence-brand .cb-subtitle { margin: 0.4rem 0 0; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.25em; text-transform: lowercase; opacity: 0; transform: translateY(12px); animation: cbFadeUp 0.7s var(--cb-ease) 0.95s forwards; } /* Form reveal after the brand block settles */ .colligence-auth .page-content.user.signin .ui.form, .colligence-auth .page-content.user.signup .ui.form, .colligence-auth .page-content.user.forgot_password .ui.form, .colligence-auth .page-content.user.reset_password .ui.form, .colligence-auth .page-content.user.twofa .ui.form, .colligence-auth .page-content.user.webauthn .ui.form, .colligence-auth .page-content.user.activate .ui.form, .colligence-auth .page-content.user.link-account .ui.form { opacity: 0; transform: translateY(16px); animation: cbFadeUp 0.8s var(--cb-ease) 1.3s forwards; } .colligence-auth .page-content.user .divider, .colligence-auth .signin-passkey, .colligence-auth button.signin-passkey { opacity: 0; transform: translateY(12px); animation: cbFadeUp 0.7s var(--cb-ease) 1.55s forwards; } @keyframes cbLogoIn { to { opacity: 1; transform: scale(1); } } @keyframes cbFadeUp { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { #colligence-brand .cb-logo, #colligence-brand .cb-title, #colligence-brand .cb-subtitle, .colligence-auth .page-content.user .ui.form, .colligence-auth .page-content.user .divider, .colligence-auth .signin-passkey { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ---- Theme toggle (fixed top-right) ---- */ #colligence-theme-toggle { position: fixed; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(128, 128, 128, 0.3); border-radius: 999px; background: rgba(128, 128, 128, 0.08); color: inherit; cursor: pointer; padding: 0; backdrop-filter: blur(6px); transition: transform 0.18s var(--cb-ease), border-color 0.18s var(--cb-ease), background 0.18s var(--cb-ease); z-index: 1000; opacity: 0; animation: cbFadeUp 0.6s var(--cb-ease) 0.3s forwards; } #colligence-theme-toggle:hover { transform: translateY(-1px); border-color: var(--colligence-pink); background: rgba(221, 42, 150, 0.1); } #colligence-theme-toggle .cb-icon { width: 1.15rem; height: 1.15rem; display: none; transition: opacity 0.2s var(--cb-ease); } #colligence-theme-toggle[data-theme="gitea-auto"] .cb-icon-auto { display: block; } #colligence-theme-toggle[data-theme="gitea-light"] .cb-icon-sun { display: block; } #colligence-theme-toggle[data-theme="gitea-dark"] .cb-icon-moon { display: block; } #colligence-theme-toggle:not([data-theme]) .cb-icon-auto { display: block; } /* ---- Auth page layout ---- */ .colligence-auth .page-content.user.signin, .colligence-auth .page-content.user.signup, .colligence-auth .page-content.user.activate, .colligence-auth .page-content.user.forgot_password, .colligence-auth .page-content.user.reset_password, .colligence-auth .page-content.user.link-account, .colligence-auth .page-content.user.twofa, .colligence-auth .page-content.user.webauthn { padding-top: 3rem !important; } /* ---- Form styling ---- */ .colligence-auth .ui.form button.ui.primary.button { background: var(--colligence-gradient) !important; border: none !important; color: #fff !important; font-weight: 600 !important; letter-spacing: 0.02em; transition: filter 0.18s var(--cb-ease), transform 0.18s var(--cb-ease); } .colligence-auth .ui.form button.ui.primary.button:hover { filter: brightness(1.1); transform: translateY(-1px); } .colligence-auth .ui.form input:focus { border-color: var(--colligence-pink) !important; box-shadow: 0 0 0 2px rgba(221, 42, 150, 0.18) !important; } .colligence-auth .page-content a:not(.button):not(.item) { color: var(--colligence-pink); } .colligence-auth .page-content a:not(.button):not(.item):hover { color: var(--colligence-purple); } .colligence-auth .signin-passkey, .colligence-auth button.signin-passkey { border: 1px solid rgba(128, 128, 128, 0.3) !important; background: transparent !important; color: inherit !important; transition: border-color 0.18s var(--cb-ease), color 0.18s var(--cb-ease); } .colligence-auth .signin-passkey:hover, .colligence-auth button.signin-passkey:hover { border-color: var(--colligence-pink) !important; color: var(--colligence-pink) !important; } /* ---- 1.26 compat: ensure form has sensible width inside the flex-column page-content ---- */ .colligence-auth .page-content.user .ui.form { width: 100%; max-width: 440px; } .colligence-auth .page-content.user form.ui.form, .colligence-auth .page-content.user .signin-passkey { width: 100%; max-width: 440px; }