/* ══════════════════════════════════════════════════════════════════════ /css/pages/index.css — NMMI · ai | Login + Register pages @layer page.index Shared between: • /index.html (login) • /register.html (registration) Load order: globals → reset → tokens → base → components → utilities → THIS Being last in the @layer stack means page-specific rules win the cascade cleanly — no !important needed anywhere in this file. ── Scope ────────────────────────────────────────────────────────────── This file owns ALL visual overrides for index.html and register.html. components.css defines .appnav, .sidebar, .sidebar-right base rules; this layer re-declares only the surface/background properties that differ on these pages. ── State attributes on (set by js/index.js, NOT shell.js) ── data-ix-drawer = "open" | "closed" data-ix-rdrawer = "open" (absent → closed) ── INDEX/REGISTER PAGE DRAWER TOKENS (--ix-*) ─────────────────────── Scoped exclusively here; never collide with shell.js tokens. ── Spec requirements ────────────────────────────────────────────────── • dots + glow → rgba(var(--theme-rgb), …) • overlay/body → var(--bg-body) • appnav → fully transparent background, border, shadow • sidebar → 10% bg-body + blur(6px); borders/hairlines transparent; shadow restored • sidebar-right → fully transparent background; no border; no shadow; icon-only controls • login/register card → fully transparent background and border • input boxes → var(--bg-body) at rest and on focus; no shadow • toggle-vis → icon-only; no border, no background • No !important anywhere in this file • Breakpoints aligned to MD3 / Gold-Standard responsive layout doc ══════════════════════════════════════════════════════════════════════ */ /* ── INDEX/REGISTER PAGE DRAWER TOKENS — outside @layer so custom properties resolve at parse time before layer ordering is applied. */ :root { /* Left drawer */ --ix-drawer-w: 260px; --ix-drawer-z: 70; --ix-drawer-dur: 320ms; --ix-drawer-ease: cubic-bezier(.4,0,.2,1); /* Right drawer — icon-only column. Width: 12px padding-inline + 40px button + 12px padding-inline = 64px. */ --ix-rdrawer-w: 64px; --ix-rdrawer-z: 60; --ix-rdrawer-dur: 280ms; --ix-rdrawer-ease: cubic-bezier(.4,0,.2,1); /* Info-icon floating trigger */ --ix-trigger-top: calc(var(--nav-h, 56px) + 8px); --ix-trigger-left: 8px; --ix-trigger-size: 36px; --ix-trigger-z: 71; /* ── Isometric dot geometry ──────────────────────────────────────────── Triangular lattice: two dots per tile, offset by (col/2, row/2). */ --dot-col: 12px; --dot-row: 10.4px; --dot-radius: 0.5px; --dot-glow-r: 72px; --dot-glow-r-sm: 52.8px; --dot-rest: 0.09; --dot-hi: 0.48; --dot-hi-light: 0.51; } @layer page.index { /* ── 1. Transparent body so dot plane shows through ──────────────────── */ body { background: transparent; } .content-area { background: transparent; } /* ── 2. APP-NAV — fully transparent ───────────────────────────────────── */ .appnav { background: transparent; border-bottom-color: transparent; box-shadow: none; padding-inline: max(env(safe-area-inset-left, 0px), 0.75rem) max(env(safe-area-inset-right, 0px), 0.75rem); } .appnav.scrolled { box-shadow: none; border-bottom-color: transparent; } /* ── 3. DOT BACKGROUND LAYER — isometric (hexagonal) lattice ────────── Two radial-gradient layers share a single background-size tile. */ .dot-bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( circle, rgba(var(--theme-rgb), var(--dot-rest)) var(--dot-radius), transparent var(--dot-radius) ) 6px 10.4px / var(--dot-col) calc(2 * var(--dot-row)), radial-gradient( circle, rgba(var(--theme-rgb), var(--dot-rest)) var(--dot-radius), transparent var(--dot-radius) ) 0 0 / var(--dot-col) calc(2 * var(--dot-row)), var(--bg-body); transition: background var(--transition-layout, 400ms ease); } .dot-bg-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle, rgba(var(--theme-rgb), 1) var(--dot-radius), transparent var(--dot-radius) ) 6px 10.4px / var(--dot-col) calc(2 * var(--dot-row)), radial-gradient( circle, rgba(var(--theme-rgb), 1) var(--dot-radius), transparent var(--dot-radius) ) 0 0 / var(--dot-col) calc(2 * var(--dot-row)); mask-image: radial-gradient( var(--dot-glow-r) at var(--glow-x, 50%) var(--glow-y, 50%), rgba(var(--theme-rgb), var(--dot-hi)) 0%, rgba(var(--theme-rgb), var(--dot-hi)) 15%, rgba(var(--theme-rgb), 0.21) 45%, rgba(var(--theme-rgb), 0.048) 65%, transparent 100% ); -webkit-mask-image: radial-gradient( var(--dot-glow-r) at var(--glow-x, 50%) var(--glow-y, 50%), rgba(var(--theme-rgb), var(--dot-hi)) 0%, rgba(var(--theme-rgb), var(--dot-hi)) 15%, rgba(var(--theme-rgb), 0.21) 45%, rgba(var(--theme-rgb), 0.048) 65%, transparent 100% ); } html[data-mode="light"] .dot-bg-layer::after { mask-image: radial-gradient( var(--dot-glow-r) at var(--glow-x, 50%) var(--glow-y, 50%), rgba(var(--theme-rgb), var(--dot-hi-light)) 0%, rgba(var(--theme-rgb), var(--dot-hi-light)) 15%, rgba(var(--theme-rgb), 0.24) 45%, rgba(var(--theme-rgb), 0.06) 65%, transparent 100% ); -webkit-mask-image: radial-gradient( var(--dot-glow-r) at var(--glow-x, 50%) var(--glow-y, 50%), rgba(var(--theme-rgb), var(--dot-hi-light)) 0%, rgba(var(--theme-rgb), var(--dot-hi-light)) 15%, rgba(var(--theme-rgb), 0.24) 45%, rgba(var(--theme-rgb), 0.06) 65%, transparent 100% ); } /* ── 4. LEFT SIDEBAR ──────────────────────────────────────────────────── */ .sidebar { z-index: var(--ix-drawer-z); width: 0; min-width: 0; max-width: var(--ix-drawer-w); overflow: hidden; background: color-mix(in srgb, var(--bg-body) 10%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-right-width: 0; border-right-color: transparent; box-shadow: var(--shadow-md); padding-inline-start: max(env(safe-area-inset-left, 0px), 0px); padding-block-end: max(env(safe-area-inset-bottom, 0px), 0.5rem); transition: width var(--ix-drawer-dur) var(--ix-drawer-ease), border-right-width var(--ix-drawer-dur) var(--ix-drawer-ease); } html[data-ix-drawer="open"] .sidebar { width: var(--ix-drawer-w); min-width: var(--ix-drawer-w); border-right-width: var(--hairline, 1px); border-right-color: transparent; overflow-y: auto; } .sidebar > nav { flex: 1 1 auto; } .sidebar-footer { padding-block: var(--space-sm); padding-inline: var(--space-sm); margin-top: auto; display: flex; flex-direction: column; gap: 2px; border-top: var(--hairline) solid transparent; } /* ── 4a. NAV SECTION HEADING ──────────────────────────────────────────── Non-interactive label above nav groups. Fades in with drawer. */ .nav-section-heading-item { list-style: none; } .nav-section-heading { display: block; padding-inline: var(--space-sm); padding-block: var(--space-sm) 2px; font-size: var(--t-xs, 0.7rem); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-mid); white-space: nowrap; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity var(--ix-drawer-dur) var(--ix-drawer-ease); } html[data-ix-drawer="open"] .nav-section-heading { opacity: 1; pointer-events: none; } #ix-scrim { position: fixed; inset: 0; z-index: calc(var(--ix-drawer-z) - 1); background: rgba(0, 0, 0, 0.22); opacity: 0; pointer-events: none; transition: opacity var(--ix-drawer-dur) var(--ix-drawer-ease); } html[data-ix-drawer="open"] #ix-scrim:not([hidden]) { opacity: 1; pointer-events: auto; } .sidebar .nav-item .lbl, .sidebar-footer .nav-item--inert .lbl { opacity: 0; pointer-events: none; transition: opacity var(--ix-drawer-dur) var(--ix-drawer-ease); } html[data-ix-drawer="open"] .sidebar .nav-item .lbl, html[data-ix-drawer="open"] .sidebar-footer .nav-item--inert .lbl { opacity: 1; pointer-events: auto; } /* ── 5. SIDEBAR FOOTER NAV ITEMS ──────────────────────────────────────── */ .nav-item--inert { display: flex; align-items: center; gap: var(--space-sm); height: 40px; padding-block: 0; padding-inline: var(--space-sm); border-radius: var(--radius-lg); border: 1px solid transparent; color: var(--text-low); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-decoration: none; -webkit-tap-highlight-color: transparent; opacity: 0.7; cursor: pointer; pointer-events: auto; user-select: none; -webkit-user-select: none; transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast); } .nav-item--inert:hover { background: var(--bg-surface); color: var(--text); opacity: 1; } .nav-item--inert:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-lg); } /* ── 6. INFO-ICON FLOATING TRIGGER (dead code — element removed from HTML) */ #ix-info-trigger { position: fixed; top: var(--ix-trigger-top); left: var(--ix-trigger-left); z-index: var(--ix-trigger-z); display: flex; align-items: center; justify-content: center; width: var(--ix-trigger-size); height: var(--ix-trigger-size); padding: 0; border: none; background: transparent; color: var(--text-low); cursor: pointer; opacity: 0.55; pointer-events: auto; transition: opacity var(--transition-fast, 180ms ease), color var(--transition-fast, 180ms ease); } html[data-ix-drawer="open"] #ix-info-trigger { opacity: 0; pointer-events: none; } #ix-info-trigger:hover { opacity: 1; color: var(--theme); } #ix-info-trigger:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-lg); } /* ── 7. RIGHT DRAWER ──────────────────────────────────────────────────── */ .sidebar-right { position: fixed; top: 0; right: 0; bottom: 0; width: var(--ix-rdrawer-w); z-index: var(--ix-rdrawer-z); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-left-width: 0; border-left-color: transparent; box-shadow: none; padding-block-start: calc(var(--nav-h, 56px) + 20px); padding-inline: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translateX(100%); transition: transform var(--ix-rdrawer-dur) var(--ix-rdrawer-ease); } html[data-ix-rdrawer="open"] .sidebar-right { transform: translateX(0); border-left-color: transparent; } .sidebar-right .rdrawer-section { border-bottom: none; } .sidebar-right .rdrawer-row { display: flex; justify-content: center; width: 100%; } #ix-scrim-right { position: fixed; inset: 0; z-index: calc(var(--ix-rdrawer-z) - 1); background: rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transition: opacity var(--ix-rdrawer-dur) var(--ix-rdrawer-ease); } html[data-ix-rdrawer="open"] #ix-scrim-right { opacity: 1; pointer-events: auto; } /* ── 8. LOGIN/REGISTER CONTENT — full-viewport centring wrapper ──── */ .login-content { position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); pointer-events: none; } /* ── 9. LOGIN/REGISTER CARD — fully transparent ──────────────────── */ .login-card { pointer-events: auto; width: min(420px, 100%); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-xl); border: var(--hairline) solid transparent; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; display: flex; flex-direction: column; gap: var(--space-md); transition: background var(--transition-layout), border-color var(--transition-layout); } /* ── 10. LOGO ──────────────────────────────────────────────────────── */ .login-logo { display: flex; justify-content: center; } .login-logo img { height: 120px; width: auto; } /* ── 11. SUBTITLE ──────────────────────────────────────────────────── */ .login-subtitle { text-align: center; font-size: var(--t-lg); font-weight: 500; letter-spacing: .2em; margin: 0; cursor: default; transition: color var(--transition-fast), text-shadow var(--transition-fast); } html[data-mode="dark"] .login-subtitle { color: rgba(var(--theme-rgb), 0.450); text-shadow: 0 0 4px rgba(var(--theme-rgb), 0.55); } html[data-mode="dark"] .login-subtitle:hover { color: rgba(var(--theme-rgb), 0.65); text-shadow: 0 0 8px rgba(var(--theme-rgb), 0.55), 0 0 18px rgba(var(--theme-rgb), 0.85); } html[data-mode="light"] .login-subtitle { color: rgba(var(--theme-rgb), 0.65); text-shadow: 0 0 4px rgba(var(--theme-rgb), 0.55); } html[data-mode="light"] .login-subtitle:hover { color: rgba(var(--theme-rgb), 1.00); text-shadow: 0 0 8px rgba(var(--theme-rgb), 0.55), 0 0 18px rgba(var(--theme-rgb), 0.35); } .register-subtitle { text-align: center; color: var(--text); font-size: var(--t-lg); font-weight: 400; letter-spacing: .2em; margin: 0; cursor: default; } /* ── 12. ALERT ─────────────────────────────────────────────────────── */ .alert { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: var(--hairline) solid var(--err-bd); background: var(--err-bg); color: var(--err); font-size: var(--t-sm); } .alert.hidden { display: none; } /* ── 13. FORM ──────────────────────────────────────────────────────── */ .login-form { display: flex; flex-direction: column; gap: var(--space-md); } .login-form .form-group input { background: var(--bg-body); border: var(--hairline) solid var(--border); color: var(--text); outline: none; box-shadow: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .login-form .form-group input:focus { border-color: var(--theme-border); background: var(--bg-body); color: var(--text); outline: none; box-shadow: none; } .login-form .form-group input:-webkit-autofill, .login-form .form-group input:-webkit-autofill:hover, .login-form .form-group input:-webkit-autofill:focus, .login-form .form-group input:-webkit-autofill:active { transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s; box-shadow: 0 0 0 1000px var(--bg-body) inset, none; -webkit-box-shadow: 0 0 0 1000px var(--bg-body) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); border-color: var(--border); } .login-form .form-group input:-webkit-autofill:focus { border-color: var(--theme-border); } /* ── 13a. FIELD HINT (register page — .professionalRegNo small) ──── */ .field-hint { display: block; margin-top: 3px; font-size: var(--t-xs, 0.72rem); color: var(--text-faint); } /* ── 13b. PASSWORD STRENGTH METER ──────────────────────────────────── */ .pw-strength-bar { height: 3px; border-radius: 2px; margin-top: 4px; transition: width 0.3s, background 0.3s; width: 0%; } .pw-strength-label { font-size: var(--t-xs, 0.72rem); margin-top: 2px; min-height: 1em; } /* ── 14. TOGGLE-VIS (eye icon inside password input) ──────────────── */ .toggle-vis { display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; box-shadow: none; color: var(--text-low); cursor: pointer; line-height: 1; -webkit-tap-highlight-color: transparent; transition: color var(--transition-fast), opacity var(--transition-fast); } .toggle-vis:hover { color: var(--text); } .toggle-vis:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } .toggle-vis .ic-eye-slash { display: none; } .toggle-vis[aria-pressed="true"] .ic-eye { display: none; } .toggle-vis[aria-pressed="true"] .ic-eye-slash { display: block; } /* ── 15. SUBMIT BUTTON ─────────────────────────────────────────────── */ #login-btn, #reg-btn { width: 100%; } /* ── 16. FOOTER ────────────────────────────────────────────────────── */ .login-footer { text-align: center; font-size: var(--t-xs); color: var(--text-faint); display: flex; flex-direction: column; gap: var(--space-xs); } .login-footer p { margin: 0; max-width: none; } .login-footer a { color: var(--theme-dim); font-weight: 600; text-decoration: none; transition: color var(--transition-fast); } .login-footer a:hover { color: var(--theme); } /* ── 17. RESPONSIVE — MD3 / Gold-Standard breakpoints ────────────── */ @media (max-width: 599px) { .login-content { padding: max(var(--space-md), env(safe-area-inset-top, 0px)) max(var(--space-md), env(safe-area-inset-right, 0px)) max(var(--space-md), env(safe-area-inset-bottom, 0px)) max(var(--space-md), env(safe-area-inset-left, 0px)); } .login-card { width: 100%; padding: var(--space-lg) var(--space-md); } .login-logo img { height: 44px; } .dot-bg-layer::after { mask-image: radial-gradient( var(--dot-glow-r-sm) at var(--glow-x, 50%) var(--glow-y, 50%), rgba(var(--theme-rgb), var(--dot-hi)) 0%, rgba(var(--theme-rgb), var(--dot-hi)) 15%, rgba(var(--theme-rgb), 0.18) 45%, rgba(var(--theme-rgb), 0.036) 65%, transparent 100% ); -webkit-mask-image: radial-gradient( var(--dot-glow-r-sm) at var(--glow-x, 50%) var(--glow-y, 50%), rgba(var(--theme-rgb), var(--dot-hi)) 0%, rgba(var(--theme-rgb), var(--dot-hi)) 15%, rgba(var(--theme-rgb), 0.18) 45%, rgba(var(--theme-rgb), 0.036) 65%, transparent 100% ); } } @media (min-width: 600px) and (max-width: 839px) { .login-card { width: min(400px, 90%); } } @media (min-width: 840px) { .login-content { padding: var(--space-xl); } .login-card { width: min(420px, 80%); } } @media (min-width: 1200px) { :root { --dot-glow-r: 96px; } } @media (orientation: landscape) and (max-height: 500px) { .login-content { padding-block: var(--space-sm); } .login-card { padding: var(--space-md) var(--space-lg); gap: var(--space-sm); } .login-logo img { height: 34px; } } /* ── 18. REDUCED MOTION ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .dot-bg-layer, .dot-bg-layer::after { transition: none; } .sidebar { transition: none; } .sidebar-right { transition: none; } #ix-info-trigger { transition: none; } #ix-scrim, #ix-scrim-right { transition: none; } .login-card { transition: none; } .login-form .form-group input { transition: none; } .toggle-vis { transition: none; } .nav-section-heading { transition: none; } .pw-strength-bar { transition: none; } .login-form .form-group input:-webkit-autofill, .login-form .form-group input:-webkit-autofill:hover, .login-form .form-group input:-webkit-autofill:focus, .login-form .form-group input:-webkit-autofill:active { transition: background-color 0.01ms ease 0s, color 0.01ms ease 0s; } } } /* end @layer page.index */