/* ===================================================================== LMS — Authentication screens, in the public-site register Governu Timor-Leste · IGEADI National OHS Licensing System Sign-in, the OTP challenge and registration share the identity of the public website at /lms: government bar, THE OHS masthead, warm paper, Barlow Semi Condensed headings and the single state red — but every surface is glass, matching the rest of the application. This file is self-contained: it carries its own tokens rather than inheriting app.css, so the auth screens keep their look even if the application theme changes. Load order on those three views is: app.css → auth-site.css → glass.css ===================================================================== */ /* --------------------------------------------------------------------- Tokens — taken from the public site so the two match exactly --------------------------------------------------------------------- */ .auth { --a-ink: #16130f; --a-ink-2: #463f35; --a-ink-3: #7c7466; --a-paper: #f6f2ea; --a-paper-2: #ffffff; --a-paper-3: #efe9dc; --a-line: #e2dccd; --a-red: #b5121b; --a-red-dk: #8c0d15; --a-gold: #c79a1e; --a-ok: #1f7a4d; --a-ok-bg: #e6f2e9; --a-bad: #b5121b; --a-bad-bg: #fbe7e7; --a-warn: #a6600a; --a-warn-bg: #faf0dc; --a-fd: "Barlow Semi Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --a-fb: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --a-fm: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --a-max: 1180px; --a-r: 14px; --a-glass: rgba(255, 255, 255, .74); --a-glass-2: rgba(255, 255, 255, .88); --a-edge: rgba(255, 255, 255, .9); --a-hair: rgba(22, 19, 15, .09); --a-blur: saturate(180%) blur(20px); --a-blur-2: saturate(180%) blur(28px); --a-shadow: 0 2px 4px rgba(22,19,15,.03), 0 16px 38px -16px rgba(22,19,15,.22); --a-shadow-lg: 0 6px 12px rgba(22,19,15,.04), 0 34px 70px -24px rgba(22,19,15,.32); --a-glow: 0 8px 22px -10px rgba(181, 18, 27, .70); } /* Border-box everywhere inside the auth shell: several containers set width:100% AND horizontal padding, which otherwise overflows the viewport by exactly that padding (44px) on narrow screens. */ .auth, .auth *, .auth *::before, .auth *::after { box-sizing: border-box; } /* --------------------------------------------------------------------- Page surface --------------------------------------------------------------------- */ body.auth { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--a-fb); font-size: 15px; line-height: 1.6; color: var(--a-ink); background: var(--a-paper); -webkit-font-smoothing: antialiased; } body.auth::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 640px at 4% -8%, rgba(181, 18, 27, .11), transparent 62%), radial-gradient(780px 560px at 97% 2%, rgba(199, 154, 30, .13), transparent 62%), radial-gradient(840px 580px at 58% 105%, rgba( 31, 95, 139, .09), transparent 60%), linear-gradient(168deg, #fdfdfb 0%, #f5f2ea 46%, #f8f5ef 100%); } .auth a { color: var(--a-red); text-decoration: none; } .auth a:hover { text-decoration: underline; } .auth-in { max-width: var(--a-max); margin: 0 auto; width: 100%; } /* --------------------------------------------------------------------- Government bar --------------------------------------------------------------------- */ .auth-govbar { background: rgba(22, 19, 15, .88); -webkit-backdrop-filter: var(--a-blur); backdrop-filter: var(--a-blur); color: #cfc7b8; font-size: 11.5px; letter-spacing: .4px; } .auth-govbar .auth-in { display: flex; align-items: center; gap: 12px; padding: 7px 22px; } .auth-govbar b { color: #efe9dc; } .auth-govbar .flag { display: inline-flex; width: 22px; height: 14px; flex: none; } .auth-lang { margin-left: auto; display: flex; gap: 2px; } .auth-lang button { background: none; border: 1px solid transparent; color: #a89e8c; font: 600 10.5px var(--a-fb); letter-spacing: .8px; padding: 2px 8px; border-radius: 4px; cursor: pointer; } .auth-lang button:hover { color: #efe9dc; } .auth-lang button.on { color: #fff; border-color: #5a5344; } /* --------------------------------------------------------------------- Masthead --------------------------------------------------------------------- */ .auth-mast { background: rgba(255, 255, 255, .70); -webkit-backdrop-filter: var(--a-blur-2); backdrop-filter: var(--a-blur-2); border-bottom: 1px solid var(--a-hair); box-shadow: 0 1px 26px -10px rgba(22, 19, 15, .30); position: sticky; top: 0; z-index: 50; } .auth-mast .auth-in { display: flex; align-items: center; gap: 26px; padding: 13px 22px; } .auth-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .auth-brand img { height: 34px; width: auto; display: block; } .auth-brand .s { font: 600 9.5px var(--a-fb); letter-spacing: 1.6px; text-transform: uppercase; color: var(--a-ink-3); margin-top: 3px; } .auth-mast .sep { width: 1px; height: 30px; background: var(--a-hair); } .auth-mast .by { font-size: 11.5px; color: var(--a-ink-3); line-height: 1.35; } .auth-mast .by b { color: var(--a-ink); font-weight: 700; } .auth-mast .spacer { margin-left: auto; } /* --------------------------------------------------------------------- Icons These three views do not load Tailwind, so the `h-4 w-4` classes the icon() helper emits carry no size. Size every inline icon here — the flag in the government bar keeps its own aspect ratio. --------------------------------------------------------------------- */ .auth svg { width: 16px; height: 16px; flex: none; } .auth .flag { width: 22px; height: 14px; } .auth .auth-figure svg, .auth .auth-figure img { width: 100%; height: auto; } /* --------------------------------------------------------------------- Buttons --------------------------------------------------------------------- */ .auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 13.5px var(--a-fb); padding: 11px 20px; border-radius: 10px; border: 1px solid rgba(22, 19, 15, .12); cursor: pointer; white-space: nowrap; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: var(--a-blur); backdrop-filter: var(--a-blur); color: var(--a-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(22,19,15,.04), 0 6px 16px -8px rgba(22,19,15,.18); transition: transform .14s, box-shadow .14s, background .14s, border-color .14s; } .auth-btn:hover { transform: translateY(-1px); text-decoration: none; border-color: rgba(22,19,15,.24); } /* `.auth a` sets the link colour to red; an anchor styled as a button must win that, or a primary button renders red-on-red. */ .auth a.auth-btn { color: var(--a-ink); } .auth a.auth-btn--pri, .auth a.auth-btn--pri:hover { color: #fff; } .auth-btn:active { transform: translateY(0); } .auth-btn--pri { background: linear-gradient(135deg, var(--a-red), var(--a-red-dk)); border-color: transparent; color: #fff; box-shadow: var(--a-glow); } .auth-btn--pri:hover { color: #fff; box-shadow: 0 12px 28px -10px rgba(181, 18, 27, .82); } .auth-btn--block { width: 100%; } .auth-btn--sm { padding: 7px 14px; font-size: 12.5px; } .auth-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; } /* --------------------------------------------------------------------- Page head + content bands Mirrors the public site's own account page: a white band carrying the eyebrow, headline and lead, then a paper band with the two-column grid. --------------------------------------------------------------------- */ .auth-pagehead { background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: var(--a-blur); backdrop-filter: var(--a-blur); border-bottom: 1px solid var(--a-hair); padding: 46px 0 38px; } .auth-pagehead .auth-in { padding: 0 22px; } .auth-eyebrow { font: 700 11px var(--a-fb); letter-spacing: 2.2px; text-transform: uppercase; color: var(--a-red); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .auth-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--a-red); } .auth-pagehead h1 { font: 800 clamp(30px, 4vw, 44px)/1.04 var(--a-fd); letter-spacing: -.5px; text-transform: uppercase; margin: 0; } .auth-pagehead .lead { font-size: 16.5px; color: var(--a-ink-2); max-width: 600px; margin: 12px 0 0; } .auth-body { flex: 1; padding: 44px 0 64px; } .auth-body .auth-in { padding: 0 22px; } .auth-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .auth-stack { display: grid; gap: 20px; align-content: start; } /* --------------------------------------------------------------------- The card --------------------------------------------------------------------- */ .auth-card { background: var(--a-glass-2); -webkit-backdrop-filter: var(--a-blur-2); backdrop-filter: var(--a-blur-2); border: 1px solid var(--a-edge); border-radius: 18px; box-shadow: var(--a-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .95); padding: 30px 30px 26px; border-top: 4px solid var(--a-red); } .auth-card + .auth-card { margin-top: 20px; } /* Right-hand column: same glass, no red top edge, quieter type. */ .auth-cardlite { background: var(--a-glass); -webkit-backdrop-filter: var(--a-blur); backdrop-filter: var(--a-blur); border: 1px solid var(--a-edge); border-radius: var(--a-r); box-shadow: var(--a-shadow), inset 0 1px 0 rgba(255, 255, 255, .9); padding: 22px; } .auth-cardlite h3 { font: 700 17px var(--a-fb); margin: 0 0 8px; } .auth-cardlite p { font-size: 13.5px; color: var(--a-ink-3); margin: 0; line-height: 1.7; } .auth-cardlite .auth-btn { margin-top: 14px; } .auth-card h2 { font: 700 27px/1.05 var(--a-fd); margin: 4px 0 6px; letter-spacing: .2px; } .auth-card .sub { color: var(--a-ink-3); font-size: 13px; margin: 0 0 22px; } .auth-kicker { font: 500 11px var(--a-fm); letter-spacing: 1.2px; text-transform: uppercase; color: var(--a-red); } /* --------------------------------------------------------------------- Fields --------------------------------------------------------------------- */ .auth-field { margin-bottom: 15px; } .auth-label { display: block; font: 700 10.5px var(--a-fb); letter-spacing: .9px; text-transform: uppercase; color: var(--a-ink-2); margin-bottom: 6px; } .auth-label .q { font-family: var(--a-fm); color: var(--a-red); letter-spacing: .4px; } .auth-inputwrap { position: relative; display: block; } .auth-inputwrap > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--a-ink-3); pointer-events: none; } .auth-input { width: 100%; box-sizing: border-box; padding: 12px 14px 12px 36px; font: 400 14px var(--a-fb); color: var(--a-ink); background: rgba(255, 255, 255, .84); border: 1px solid rgba(22, 19, 15, .14); border-radius: 10px; box-shadow: 0 1px 2px rgba(22,19,15,.04); transition: border-color .14s, box-shadow .14s, background .14s; } .auth-input::placeholder { color: #a9a294; } .auth-input:focus { outline: none; background: #fff; border-color: var(--a-red); box-shadow: 0 0 0 3px rgba(181, 18, 27, .13); } .auth-input.is-bad { border-color: var(--a-bad); box-shadow: 0 0 0 3px rgba(181,18,27,.10); } .auth-err { color: var(--a-bad); font-size: 12px; margin-top: 5px; } .auth-mono { font-family: var(--a-fm); letter-spacing: 2px; text-align: center; padding-left: 14px; } /* --------------------------------------------------------------------- Notices and flashes --------------------------------------------------------------------- */ .auth-note { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 11px 14px; font-size: 12.5px; border: 1px solid var(--a-hair); background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--a-ink-2); margin-bottom: 14px; } .auth-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } .auth-note b { color: var(--a-ink); } .auth-note--bad { background: rgba(251, 231, 231, .72); border-color: rgba(181, 18, 27, .22); color: #7d1119; } .auth-note--ok { background: rgba(230, 242, 233, .72); border-color: rgba(31, 122, 77, .22); color: #14603a; } .auth-note--warn { background: rgba(250, 240, 220, .78); border-color: rgba(166, 96, 10, .22); color: #7d4a08; } /* --------------------------------------------------------------------- Card footer row --------------------------------------------------------------------- */ .auth-cardfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--a-hair); font-size: 12.5px; color: var(--a-ink-3); } .auth-cardfoot .right { margin-left: auto; } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ .auth-foot { background: rgba(22, 19, 15, .90); -webkit-backdrop-filter: var(--a-blur); backdrop-filter: var(--a-blur); color: #a89e8c; font-size: 11.5px; } .auth-foot .auth-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 22px; } .auth-foot a { color: #cfc7b8; } .auth-foot .right { margin-left: auto; } /* --------------------------------------------------------------------- Responsive --------------------------------------------------------------------- */ @media (max-width: 1000px) { /* minmax(0,1fr) — a plain 1fr track has min-width:auto, so the long uppercase words in the headline can push the grid wider than the viewport on small phones. */ .auth-grid2 { grid-template-columns: minmax(0, 1fr); gap: 18px; } .auth-pagehead { padding: 34px 0 28px; } .auth-body { padding: 30px 0 44px; } .auth-pagehead h1 { overflow-wrap: anywhere; } .auth-hero { order: 2; } .auth-formcol { order: 1; } .auth-hero h1 { font-size: 36px; } .auth-figure img { height: 210px; } } @media (max-width: 560px) { .auth-card { padding: 24px 20px 20px; border-radius: 16px; } .auth-mast .by, .auth-mast .sep { display: none; } .auth-hero h1 { font-size: 30px; } /* Brand + actions no longer fit on one line — wrap instead of pushing the buttons past the right edge of the viewport. */ .auth-mast .auth-in { flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; } .auth-mast .spacer { display: none; } .auth-brand { flex: 1 1 100%; } .auth-mast .auth-btn { flex: 1 1 0; } .auth-govbar .auth-in { padding: 7px 16px; flex-wrap: wrap; } .auth-govbar span { flex: 1 1 100%; order: 2; } .auth-lang { order: 1; margin-left: 0; } .auth-body .auth-in, .auth-pagehead .auth-in { padding-left: 16px; padding-right: 16px; } .auth-foot .auth-in { padding: 14px 16px; } } /* Browsers without backdrop-filter get solid surfaces, never grey text. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .auth-card, .auth-cardlite, .auth-btn, .auth-note { background: #fff; } .auth-mast { background: #fdfcf9; } .auth-govbar, .auth-foot { background: #16130f; } } /* --------------------------------------------------------------------- Single-column variant — the OTP challenge and registration have nothing to sit beside, so the card is centred instead of split. --------------------------------------------------------------------- */ .auth-grid2--single { grid-template-columns: minmax(0, 560px); justify-content: center; } @media (max-width: 1000px) { .auth-grid2--single { grid-template-columns: minmax(0, 1fr); } } /* Two fields side by side (registration). */ .auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 560px) { .auth-row { grid-template-columns: 1fr; } } /* A