/* ====================================================================== Sign-in shell — "Design A · Split clinical" (TB-049). Source: Trinote Redesign canvas, boards Main.dc.html (desktop) and MainMobile.dc.html (phone). DO NOT put AdminLTE's `login-page` class back on : it forces `height: 100vh` + vertical centering, which clips the top of the column on short/phone viewports so it can't be scrolled to. This shell uses its own `tn-auth` class and simply grows with its content. ====================================================================== */ :root { --tn-ground: #F7F6F1; --tn-mint: #E7F3EF; --tn-mint-line: #D4E7E1; --tn-card-line: #EAEDE7; --tn-field-line: #E0E7E4; --tn-field-bg: #FBFCFB; --tn-teal: #17A398; --tn-teal-hover: #128C82; --tn-teal-deep: #15736B; --tn-link: #0C7A70; --tn-link-hover: #0A5F57; --tn-ink: #10403C; --tn-ink-2: #3A524E; --tn-muted: #5E7B76; --tn-muted-2: #6B807C; --tn-placeholder: #9FADA9; } html { -webkit-text-size-adjust: 100%; } body.tn-auth { margin: 0; min-height: 100vh; /* fallback for browsers without dvh */ min-height: 100dvh; display: flex; flex-direction: column; background: var(--tn-ground); font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tn-ink); } .tn-auth a { color: var(--tn-link); text-decoration: none; } .tn-auth a:hover { color: var(--tn-link-hover); text-decoration: underline; } /* ---- Non-production banner (in flow, so it never covers the page) ---- */ .tn-env-banner { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 6px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); padding-top: max(6px, env(safe-area-inset-top)); background: #FDF1DF; border-bottom: 1px solid #F2DFBE; color: #8A6019; font-size: 12.5px; font-weight: 600; text-align: center; } /* ---- Two-panel shell ---- */ .tn-shell { flex: 1 0 auto; display: flex; gap: 16px; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); } .tn-env-banner + .tn-shell { padding-top: 16px; } /* ---- Brand panel: the app's mint chrome ---- */ .tn-brand { position: relative; flex: 0 0 40%; max-width: 576px; min-height: 560px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px 48px; background: var(--tn-mint); border: 1px solid var(--tn-mint-line); border-radius: 20px; overflow: hidden; } .tn-brand > * { position: relative; } .tn-brand-glow { position: absolute !important; border-radius: 50%; pointer-events: none; } .tn-brand-glow--teal { left: -200px; bottom: -240px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(23,163,152,.16) 0%, rgba(23,163,152,0) 66%); } .tn-brand-glow--amber { right: -140px; top: -150px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(240,160,89,.15) 0%, rgba(240,160,89,0) 68%); } .tn-brand-rings { position: absolute !important; left: -160px; bottom: -210px; opacity: .1; pointer-events: none; } .tn-logo { display: flex; align-items: center; gap: 12px; } .tn-logo-mark { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--tn-teal-deep); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(21,115,107,.3); } .tn-logo-word { font-size: 22px; font-weight: 700; color: var(--tn-ink); letter-spacing: -.3px; } .tn-headline { margin: 0 0 18px 0; max-width: 442px; font-family: Newsreader, Georgia, serif; font-size: 43px; line-height: 1.18; font-weight: 400; color: var(--tn-ink); letter-spacing: -.4px; } .tn-subhead { margin: 0; max-width: 442px; font-size: 16.5px; line-height: 1.6; color: var(--tn-muted); } .tn-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .tn-points li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: #3F5C57; } .tn-chip { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; } .tn-chip--teal { background: #CFEAE4; color: #0F6B63; } .tn-chip--amber { background: #FAE0C6; color: #96591A; } .tn-chip--blue { background: #D8E4F4; color: #2E5A8E; } /* ---- Form panel: white card ---- */ .tn-form-panel { flex: 1 1 auto; min-width: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 40px; background: #ffffff; border: 1px solid var(--tn-card-line); border-radius: 20px; } .tn-form-inner { width: 100%; max-width: 396px; } .tn-title { margin: 0 0 8px 0; font-size: 29px; font-weight: 700; color: var(--tn-ink); letter-spacing: -.5px; line-height: 1.2; } .tn-lede { margin: 0 0 28px 0; font-size: 15.5px; color: var(--tn-muted-2); } /* ---- Flash messages ---- */ .tn-auth .alert.tn-alert { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 0 0 24px 0; padding: 12px 40px 12px 14px; border-radius: 10px; border: 1px solid #F0E0C2; background: #FDF6E9; color: #7D5A1B; font-size: 14px; line-height: 1.45; } .tn-alert-icon { flex-shrink: 0; margin-top: 1px; } .tn-auth .alert.tn-alert--danger { background: #FCEDEB; border-color: #F2CCC6; color: #8E2F22; } .tn-auth .alert.tn-alert--success { background: #E8F5F0; border-color: #C7E6DA; color: #1F6446; } .tn-auth .alert.tn-alert--info { background: #EAF1FA; border-color: #CCDCF0; color: #2E5A8E; } .tn-auth .alert.tn-alert .close { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border-radius: 8px; color: inherit; opacity: .6; text-shadow: none; font-size: 20px; line-height: 36px; } .tn-auth .alert.tn-alert .close:hover { opacity: 1; background: rgba(0,0,0,.04); } /* ---- Form controls ---- */ .tn-group { margin-bottom: 18px; } .tn-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; } .tn-label { display: block; margin: 0 0 7px 0; font-size: 13.5px; font-weight: 600; color: var(--tn-ink-2); } .tn-label-row .tn-label { margin: 0; } .tn-label-row a { font-size: 13px; font-weight: 500; } .tn-field { display: block; width: 100%; height: 48px; box-sizing: border-box; margin: 0; padding: 0 14px; border: 1px solid var(--tn-field-line); border-radius: 10px; background: var(--tn-field-bg); font-family: inherit; font-size: 15px; color: var(--tn-ink); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } .tn-field::placeholder { color: var(--tn-placeholder); } .tn-field:focus { border-color: var(--tn-teal); background: #ffffff; box-shadow: 0 0 0 3px rgba(23,163,152,.15); } .tn-pass-wrap { position: relative; } .tn-pass-wrap .tn-field { padding-right: 50px; } .tn-eye { position: absolute; right: 5px; top: 5px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #778A86; cursor: pointer; } .tn-eye:hover { background: #F0F4F2; color: var(--tn-link); } .tn-eye:focus-visible { outline: 2px solid var(--tn-teal); outline-offset: 1px; } .tn-check { display: flex; align-items: center; gap: 9px; min-height: 44px; margin-bottom: 14px; } .tn-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--tn-teal); cursor: pointer; } .tn-check label { margin: 0; font-size: 14px; font-weight: 400; color: #5F736F; cursor: pointer; } .tn-primary, .tn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border-radius: 10px; font-family: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s, border-color .15s; } .tn-primary { border: 0; background: var(--tn-teal); color: #ffffff; box-shadow: 0 2px 6px rgba(21,115,107,.2); } .tn-primary:hover { background: var(--tn-teal-hover); box-shadow: 0 6px 18px rgba(21,115,107,.26); } .tn-primary:active { transform: translateY(1px); } .tn-secondary { border: 1px solid #BFE0D9; background: #ffffff; color: var(--tn-link); } .tn-secondary:hover { background: var(--tn-mint); border-color: var(--tn-teal); } .tn-primary:focus-visible, .tn-secondary:focus-visible { outline: 2px solid var(--tn-teal-deep); outline-offset: 2px; } .tn-primary:disabled, .tn-secondary:disabled { opacity: .65; cursor: default; transform: none; } .tn-forgot { margin-top: 20px; padding: 18px; border-radius: 12px; background: var(--tn-field-bg); border: 1px solid var(--tn-card-line); } .tn-forgot p { margin: 0 0 12px 0; font-size: 14px; color: var(--tn-muted-2); } .tn-footnote { margin: 28px 0 0 0; font-size: 13.5px; color: #7E8F8B; text-align: center; } /* Cards rendered inside the form panel (emergency login) — flatten them so they don't look like a card floating in a card. */ .tn-form-inner > .card { margin: 0; border: 1px solid var(--tn-card-line); border-radius: 14px; box-shadow: none; overflow: hidden; } /* ---- Short desktop windows: tighten the brand panel, never clip ---- */ @media (min-width: 992px) and (max-height: 760px) { .tn-brand { min-height: 0; padding: 32px 40px; gap: 28px; } .tn-headline { font-size: 36px; margin-bottom: 12px; } .tn-form-panel { padding: 28px 40px; } } /* ---- Tablet & phone: stacked, brand panel becomes a compact card ---- */ @media (max-width: 991.98px) { .tn-shell { flex-direction: column; gap: 14px; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); } .tn-env-banner + .tn-shell { padding-top: 14px; } .tn-brand { flex: 0 0 auto; max-width: none; min-height: 0; gap: 16px; padding: 22px 20px 24px; border-radius: 18px; } .tn-brand-glow--teal, .tn-brand-rings, .tn-subhead, .tn-points { display: none; } .tn-brand-glow--amber { right: -90px; top: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(23,163,152,.18) 0%, rgba(23,163,152,0) 68%); } .tn-logo { gap: 11px; } .tn-logo-mark { width: 38px; height: 38px; border-radius: 12px; } .tn-logo-word { font-size: 20px; } .tn-headline { margin: 0; font-size: 24px; line-height: 1.22; letter-spacing: 0; } .tn-form-panel { flex: 0 0 auto; display: block; padding: 22px 20px 24px; border-radius: 18px; } .tn-form-inner { max-width: 480px; margin: 0 auto; } .tn-title { font-size: 22px; letter-spacing: -.3px; } .tn-lede { margin-bottom: 20px; font-size: 15px; } .tn-auth .alert.tn-alert { margin-bottom: 20px; } /* 16px inputs: anything smaller and iOS Safari zooms on focus. */ .tn-field { font-size: 16px; } .tn-eye { width: 40px; height: 40px; top: 4px; } .tn-check input { width: 19px; height: 19px; } .tn-primary, .tn-secondary { font-size: 16px; } } /* Tablets get the brand line back — there's room for it. */ @media (min-width: 600px) and (max-width: 991.98px) { .tn-shell { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } .tn-headline { font-size: 30px; } .tn-form-panel { padding: 36px 32px; } } @media (prefers-reduced-motion: reduce) { .tn-field, .tn-primary, .tn-secondary { transition: none; } }