/* Aikyat Forge — sign-in skin (Apple-restraint direction) * Applies only to auth pages. JS (body_outer_pre.tmpl) adds .aikyat-auth on * once an auth page-content is detected and moves #aikyat-brand into * the page. Everything below is gated on .aikyat-auth so the rest of Gitea * is untouched. * * Design: plain ground (no gradient blobs, no glass), one colorful brand * mark as the sole flourish, staged reveal (logo -> wordmark -> tagline -> * username -> password-on-type), gold tagline/name accents. Honors * prefers-reduced-motion. */ :root { --aikyat-accent: #c21f86; --aikyat-gold: #c9a227; --ak-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter", system-ui, "Segoe UI", Roboto, sans-serif; --ak-mono: ui-monospace, "SF Mono", Menlo, monospace; } .aikyat-auth { --ak-bg: #ffffff; --ak-text: #1d1d1f; --ak-text-dim: #6e6e73; --ak-border: #d2d2d7; --ak-field-bg: #ffffff; --ak-accent: var(--aikyat-accent); --ak-accent-ring: rgba(194, 31, 134, 0.25); --ak-btn-bg: #1d1d1f; --ak-btn-text: #ffffff; --ak-gold: var(--aikyat-gold); --ak-red: #b42318; --ak-red-halo: rgba(180, 35, 24, 0.30); --ak-gold-halo: rgba(154, 123, 28, 0.28); } /* Theme follows the visitor's system preference only — no manual toggle. */ @media (prefers-color-scheme: dark) { .aikyat-auth { --ak-bg: #000000; --ak-text: #f5f5f7; --ak-text-dim: #86868b; --ak-border: #424245; --ak-field-bg: #1c1c1e; --ak-accent-ring: rgba(255, 98, 189, 0.28); --ak-btn-bg: #f5f5f7; --ak-btn-text: #1d1d1f; --ak-gold: #e4bc48; --ak-red: #f0443a; --ak-red-halo: rgba(240, 68, 58, 0.45); --ak-gold-halo: rgba(228, 188, 72, 0.40); } } /* ---- Hide Gitea chrome on auth pages for a clean branded shell ---- */ .aikyat-auth #navbar, .aikyat-auth .page-footer, .aikyat-auth footer { display: none !important; } /* h4-qualified deliberately: the bare class set also matches the webauthn * segment (div.ui.attached.segment.header.top), which must stay in flow so * Gitea can reveal #webauthn-error inside it after a failed passkey attempt. */ .aikyat-auth .page-content.user h4.ui.top.attached.header { display: none !important; } /* Passkey stays (reverses the earlier removal, per this PR's sign-off). The * link itself is moved into the form by body_outer_pre JS and restyled below; * this container keeps only the webauthn error block, so strip its chrome. */ .aikyat-auth .page-content.user .ui.attached.segment.header.top { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* ---- Full-height, centered, responsive auth shell ---- */ .aikyat-auth .page-content.user.signin, .aikyat-auth .page-content.user.signup, .aikyat-auth .page-content.user.activate, .aikyat-auth .page-content.user.forgot_password, .aikyat-auth .page-content.user.reset_password, .aikyat-auth .page-content.user.link-account, .aikyat-auth .page-content.user.twofa, .aikyat-auth .page-content.user.webauthn { font-family: var(--ak-font); color: var(--ak-text); background: var(--ak-bg); min-height: 100dvh; display: flex; flex-direction: column; align-items: center; /* Centering comes from paired auto margins (#aikyat-brand top, .ak-product * top) so the credit pins to the bottom while the composition stays * centered; justify-content would fight those margins. */ gap: clamp(1.25rem, 4vh, 2rem); padding: max(env(safe-area-inset-top), clamp(1.25rem, 5vh, 3rem)) clamp(1rem, 5vw, 2rem) max(env(safe-area-inset-bottom), clamp(1rem, 3vh, 1.5rem)); box-sizing: border-box; overflow-y: auto; text-align: center; } .aikyat-auth .page-content.user .ui.page.grid, .aikyat-auth .page-content.user .ui.middle.page.grid { margin: 0 !important; padding: 0 !important; width: 100%; max-width: min(340px, 100%); } .aikyat-auth .page-content.user .ui.page.grid > .column { width: 100% !important; padding: 0 !important; } .aikyat-auth .page-content.user .ui.container.fluid { width: 100%; } /* ---- Brand block (mark + wordmark + gold tagline), staged reveal ---- */ #aikyat-brand[hidden] { display: none !important; } #aikyat-brand { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: auto auto 8px; width: 100%; font-family: var(--ak-font); } .ak-mark { width: 76px; height: auto; margin-bottom: 20px; opacity: 0; transform: translateY(10px); animation: akFade .6s cubic-bezier(.16,1,.3,1) forwards 0s; } .ak-title-group { opacity: 0; transform: translateY(10px); animation: akFade .6s cubic-bezier(.16,1,.3,1) forwards .3s; } .ak-wordmark { margin: 0; font-size: clamp(1.9rem, 6vw, 2.35rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; color: var(--ak-text); } .ak-subtitle { margin: 10px 0 0; font-size: 1.02rem; color: var(--ak-text-dim); font-weight: 400; } .ak-tagline { margin: 8px 0 0; font-family: var(--ak-mono); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--ak-gold); opacity: 0; transform: translateY(8px); animation: akFade .5s cubic-bezier(.16,1,.3,1) forwards .62s; } @keyframes akFade { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ak-mark, .ak-title-group, .ak-tagline, .aikyat-auth .ak-product, .aikyat-auth .ui.form .required.field:first-of-type, .aikyat-auth .ak-stage2 { animation: none !important; opacity: 1 !important; transform: none !important; } .aikyat-auth .page-content.user.ak-leave-in { animation: none !important; } #ak-tiles { display: none !important; } } /* ---- The card (Semantic-UI attached segment) — solid, no glass ---- */ .aikyat-auth .page-content.user .ui.attached.segment { background: var(--ak-field-bg) !important; border: 1px solid var(--ak-border) !important; border-radius: 14px !important; color: var(--ak-text) !important; box-shadow: 0 20px 50px -24px rgba(0,0,0,.18) !important; padding: 1.75rem !important; margin: 0 !important; } /* ---- Form fields ---- */ /* text-align: left stops labels inheriting the shell's centered alignment */ .aikyat-auth .page-content.user .ui.form { width: 100%; text-align: left; } .aikyat-auth .ui.form .field > label, .aikyat-auth .ui.form label { font-family: var(--ak-font); font-weight: 600; font-size: 0.84rem; color: var(--ak-text) !important; } .aikyat-auth .ui.form input[type="text"], .aikyat-auth .ui.form input[type="email"], .aikyat-auth .ui.form input[type="password"] { font-family: var(--ak-font); /* Hard 16px floor: Gitea's root font-size is 14px, so 1rem here would be * 14px — below the threshold at which iOS Safari zooms the page on focus. */ font-size: 16px; height: 2.85rem; border-radius: 12px !important; background: var(--ak-bg) !important; border: 1px solid var(--ak-border) !important; color: var(--ak-text) !important; padding: 0 0.9rem !important; transition: border-color .16s ease, box-shadow .16s ease; } .aikyat-auth .ui.form input:focus { border-color: var(--ak-accent) !important; box-shadow: 0 0 0 4px var(--ak-accent-ring) !important; } /* Fomantic keeps the native checkbox absolutely positioned (top: 1px), so * center it against the flexed row explicitly. */ .aikyat-auth .ui.form .ui.checkbox input { accent-color: var(--ak-accent); width: 1.05rem; height: 1.05rem; top: 50%; transform: translateY(-50%); } .aikyat-auth .ui.form .ui.checkbox label { color: var(--ak-text-dim) !important; } .aikyat-auth .page-content a:not(.button):not(.item) { color: var(--ak-accent); } .aikyat-auth .page-content a:not(.button):not(.item):hover { text-decoration: underline; } /* ---- Touch targets + visible keyboard focus ---- */ .aikyat-auth .ui.form .inline.field .ui.checkbox { display: flex; align-items: center; min-height: 2.4rem; } .aikyat-auth .ui.form a[href*="forgot_password"] { padding: 0.25rem 0 0.25rem 0.5rem; } .aikyat-auth .ui.form button.ui.primary.button:focus-visible, .aikyat-auth .page-content a:focus-visible, .aikyat-auth .ak-eye:focus-visible, .aikyat-auth .ui.checkbox input:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; } /* ---- Show-password toggle (button injected by body_outer_pre JS) ---- */ .aikyat-auth .ak-passwrap { position: relative; display: block; } /* Must tie the base input rule's (0,4,1) specificity — both are !important, * and this one wins on source order for either input type after toggling. */ .aikyat-auth .ui.form .ak-passwrap input { padding-right: 2.9rem !important; } .aikyat-auth .ak-eye { position: absolute; top: 0; right: 0; height: 100%; width: 2.85rem; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; color: var(--ak-text-dim); cursor: pointer; border-radius: 0 12px 12px 0; } .aikyat-auth .ak-eye:hover { color: var(--ak-text); } .aikyat-auth .ak-eye svg { width: 1.15rem; height: 1.15rem; } .aikyat-auth .ak-hide { display: none; } /* ---- Passkey as the secondary action (moved into the form by JS) ---- */ .aikyat-auth .ak-or { display: flex; align-items: center; gap: 0.7rem; margin: 1.05rem 0; color: var(--ak-text-dim); font-size: 0.72rem; letter-spacing: 0.04em; } .aikyat-auth .ak-or::before, .aikyat-auth .ak-or::after { content: ""; flex: 1; height: 1px; background: var(--ak-border); } .aikyat-auth .ui.form a.signin-passkey { display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; height: 2.9rem; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--ak-border); color: var(--ak-text); font-family: var(--ak-font); font-weight: 600; font-size: 0.95rem; cursor: pointer; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .aikyat-auth .ui.form a.signin-passkey:hover { border-color: var(--ak-accent); color: var(--ak-accent); text-decoration: none; } .aikyat-auth .ui.form a.signin-passkey svg { width: 1.05rem; height: 1.05rem; } /* ---- Sign In button: solid, no gradient loop ---- */ .aikyat-auth .ui.form button.ui.primary.button { font-family: var(--ak-font); height: 2.9rem; border-radius: 999px !important; background: var(--ak-btn-bg) !important; border: none !important; color: var(--ak-btn-text) !important; font-weight: 600 !important; font-size: 1rem; transition: opacity .15s ease, transform .1s ease; } .aikyat-auth .ui.form button.ui.primary.button:hover { opacity: .88; } .aikyat-auth .ui.form button.ui.primary.button:active { transform: scale(.985); } /* ---- Staged reveal: username shows first, password stage on typing ---- */ .aikyat-auth .ui.form .required.field:first-of-type { opacity: 0; transform: translateY(8px); animation: akFade .5s cubic-bezier(.16,1,.3,1) forwards .9s; } .aikyat-auth .ak-stage2 { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .35s ease, margin-top .5s cubic-bezier(.16,1,.3,1); } .aikyat-auth .ak-stage2.ak-revealed { /* Roomy cap so future content inside the stage is never clipped by the * reveal transition (the login error flash itself renders above the form). */ max-height: 340px; opacity: 1; margin-top: 2px; } /* ---- "A Product of Aikyat Platform" — glowing red-and-gold credit ---- * margin-top: auto pairs with #aikyat-brand's margin-top: auto so the * composition stays centered while the credit pins near the bottom. */ .aikyat-auth .ak-product { margin: auto 0 0; padding-top: 1.25rem; font-family: var(--ak-font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ak-red); background: linear-gradient(90deg, var(--ak-red), var(--ak-gold), var(--ak-red)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px var(--ak-red-halo)) drop-shadow(0 0 12px var(--ak-gold-halo)); opacity: 0; transform: translateY(6px); animation: akFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.15s, akShimmer 6s linear 1.65s infinite; } @keyframes akShimmer { from { background-position: 0 0; } to { background-position: 200% 0; } } /* ---- Mosaic-zoom exit on Sign In (armed by body_outer_pre JS) ---- */ .aikyat-auth .page-content.user.ak-leave-in { transform-origin: 50% 45%; animation: akZoomThru 0.65s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards; } @keyframes akZoomThru { to { transform: scale(1.12); opacity: 0; } } /* Tile layer sits just under the welcome overlay (z 2147483647) so the two * black surfaces hand off seamlessly. */ #ak-tiles { position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; overflow: hidden; } #ak-tiles .ak-tile { position: absolute; background: #000; transform: scale(0); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } #ak-tiles.go .ak-tile { transform: scale(1); } @media (max-width: 480px) { .aikyat-auth .page-content.user .ui.attached.segment { border-radius: 12px !important; } } @media (max-width: 360px) { .aikyat-auth .page-content.user .ui.attached.segment { padding: 1.35rem !important; } } /* ---- Compact layout for short viewports (landscape phones) ---- */ @media (max-height: 660px) { .aikyat-auth .page-content.user.signin, .aikyat-auth .page-content.user.signup, .aikyat-auth .page-content.user.activate, .aikyat-auth .page-content.user.forgot_password, .aikyat-auth .page-content.user.reset_password, .aikyat-auth .page-content.user.link-account, .aikyat-auth .page-content.user.twofa, .aikyat-auth .page-content.user.webauthn { gap: 0.9rem; } .ak-mark { width: 44px; margin-bottom: 6px; } .ak-wordmark { font-size: 1.45rem; } .ak-subtitle { margin-top: 4px; font-size: 0.92rem; } .ak-tagline { margin-top: 4px; font-size: 0.8rem; } .aikyat-auth .page-content.user .ui.attached.segment { padding: 1rem 1.25rem !important; } .aikyat-auth .ui.form input[type="text"], .aikyat-auth .ui.form input[type="email"], .aikyat-auth .ui.form input[type="password"] { height: 2.5rem; } .aikyat-auth .ui.form button.ui.primary.button { height: 2.6rem; } .aikyat-auth .ui.form .inline.field .ui.checkbox { min-height: 2rem; } .aikyat-auth .ui.form a.signin-passkey { height: 2.6rem; } .aikyat-auth .ak-or { margin: 0.8rem 0; } .aikyat-auth .ak-product { padding-top: 0.6rem; } }