/* ========================================================================== Kape — the auth card ========================================================================== ONE layout behind every sign-in and sign-up: the public site's login, signup and forgot-password, and all four admin logins. Before this the site used a Bootstrap 5 split panel with a decorative SVG divider and the admin used its purchased theme's dark-navy `account-body` card with English "Username" / "Password" labels — five screens, three visual languages, one brand. Deliberately written in plain CSS with NO Bootstrap classes. The public site is on Bootstrap 5 and the admin theme is on Bootstrap 4, where the form and grid class names differ (`mb-3` vs `form-group`, `btn-block`, different input-group markup). Anything built on those classes would render differently on the two sides, which is the whole thing this file exists to stop. Everything here is `.kape-auth*`, so both sides get pixel-identical output from the same source. THIS FILE IS DUPLICATED, on purpose: tehumbura-www/css/kape-auth.css — public site adm-www/shared/kape-auth.css — all four admin panels The two docroots deploy as separate vhosts with no shared parent on the server, so a single file cannot serve both. Edit one, copy to the other. Same rule as auth-shell.php, which sits beside each copy. Not part of the SCSS build: the site's kape_main.css is compiled from scss/custom.scss, and this has to stay byte-identical to the admin copy, which has no SCSS build at all. The token values below are the same ones custom.scss defines, restated as custom properties. ========================================================================== */ .kape-auth { /* -- tokens, mirroring scss/custom.scss ---------------------------------- */ --kape-auth-blue: #0062fe; --kape-auth-blue-dark: #0053d6; /* shade-color($primary, 18%) */ --kape-auth-cyan: #0cbffc; --kape-auth-ink: #1b2027; /* $gray-900, the body colour */ --kape-auth-muted: #6b7688; /* $gray-600 */ --kape-auth-label: #4a5462; /* $gray-700 */ --kape-auth-line: #dbe2ec; /* $gray-300 */ --kape-auth-line-soft: #eaeff6; /* $gray-200 */ --kape-auth-bg: #f2f6fc; /* $light */ --kape-auth-danger: #e5484d; --kape-auth-success: #0bab6d; /* Radii and motion. Three durations and one curve, as custom.scss says. */ --kape-auth-radius: .75rem; /* $border-radius */ --kape-auth-radius-lg: 1.25rem; /* $border-radius-xl */ --kape-auth-fast: .12s; /* $motion-fast */ --kape-auth-base: .18s; /* $motion-base */ --kape-auth-ease: cubic-bezier(.2, 0, .2, 1); } /* -- page ------------------------------------------------------------------ The admin theme paints its login screen dark navy on itself, so these need to win against app.min.css rather than merely follow it. */ body.kape-auth-body { min-height: 100vh; margin: 0; background-color: var(--kape-auth-bg) !important; color: #1b2027; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* A wash rather than a flat fill — brand colour without a slab of it. The blue is at 10%, so the card still reads as the brightest thing on screen. */ .kape-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2.5rem 1rem; box-sizing: border-box; /* The admin theme sets `body { display: flex }`, which makes this a flex ITEM as well as a flex container — and a flex item shrinks to its content. Without these the card centres inside its own shrunk-to-fit width and sits left of centre on any viewport wider than the card. No effect on the public site, where body is not a flex container. */ flex: 1 1 auto; width: 100%; background: radial-gradient(60rem 32rem at 50% -12%, rgba(12, 191, 252, .14), transparent 70%), radial-gradient(48rem 30rem at 50% 112%, rgba(0, 98, 254, .10), transparent 70%); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* The site draws a navbar above the card, so there the card centres in what is left rather than in the viewport — otherwise it sits visibly low. */ .kape-auth--below-nav { min-height: calc(100vh - 8rem); } .kape-auth *, .kape-auth *::before, .kape-auth *::after { box-sizing: border-box; } /* -- card ------------------------------------------------------------------ */ .kape-auth__card { width: 100%; max-width: 26rem; padding: 2.25rem 2rem 1.75rem; background: #fff; border: 1px solid var(--kape-auth-line-soft); border-radius: var(--kape-auth-radius-lg); box-shadow: 0 1px 2px rgba(27, 32, 39, .04), 0 12px 32px -12px rgba(27, 32, 39, .18); } /* Signup carries four fields and a captcha; at 26rem it reads as a column of cramped boxes, so that one form gets more room. */ .kape-auth__card--wide { max-width: 32rem; } /* -- header ---------------------------------------------------------------- */ .kape-auth__brand { display: block; text-align: center; margin-bottom: 1.5rem; line-height: 0; } .kape-auth__brand img { height: 34px; width: auto; max-width: 100%; } .kape-auth__title { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2; text-align: center; color: var(--kape-auth-ink); letter-spacing: -.01em; } .kape-auth__subtitle { margin: .5rem 0 0; font-size: .95rem; line-height: 1.5; text-align: center; color: var(--kape-auth-muted); } .kape-auth__form { margin-top: 1.75rem; } /* -- fields ---------------------------------------------------------------- */ .kape-auth__field { margin-bottom: 1rem; } /* Password + phone sit side by side on signup, and stack on a phone. */ .kape-auth__row { display: flex; flex-wrap: wrap; gap: 0 1rem; } .kape-auth__row .kape-auth__field { flex: 1 1 12rem; min-width: 0; } .kape-auth__label { display: block; margin-bottom: .35rem; font-size: .875rem; font-weight: 500; color: var(--kape-auth-label); } .kape-auth__input { display: block; width: 100%; padding: .7rem .9rem; font-family: inherit; font-size: 1rem; line-height: 1.5; color: var(--kape-auth-ink); background-color: #fff; background-image: none; border: 1px solid var(--kape-auth-line); border-radius: var(--kape-auth-radius); box-shadow: none; appearance: none; transition: border-color var(--kape-auth-base) var(--kape-auth-ease), box-shadow var(--kape-auth-base) var(--kape-auth-ease); } .kape-auth__input::placeholder { color: #97a2b3; opacity: 1; } .kape-auth__input:hover { border-color: #c2cbd9; } /* :focus-visible, not :focus — the site's rule. A text input always matches :focus-visible while focused (it takes keyboard input), so clicking one still draws the ring; a clicked button does not, which is the point. */ .kape-auth__input:focus-visible { outline: 0; border-color: #66a0ff; box-shadow: 0 0 0 .2rem rgba(0, 98, 254, .18); } /* -- submit ---------------------------------------------------------------- */ .kape-auth__submit { display: block; width: 100%; margin-top: 1.25rem; padding: .8rem 1rem; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.5; color: #fff; text-align: center; background-color: var(--kape-auth-blue); border: 1px solid var(--kape-auth-blue); border-radius: var(--kape-auth-radius); cursor: pointer; appearance: none; transition: background-color var(--kape-auth-base) var(--kape-auth-ease), border-color var(--kape-auth-base) var(--kape-auth-ease), box-shadow var(--kape-auth-base) var(--kape-auth-ease), transform var(--kape-auth-fast) var(--kape-auth-ease); } .kape-auth__submit:hover { background-color: var(--kape-auth-blue-dark); border-color: var(--kape-auth-blue-dark); color: #fff; } .kape-auth__submit:active { transform: translateY(1px); } .kape-auth__submit:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 98, 254, .35); } /* -- links ----------------------------------------------------------------- */ .kape-auth__aside { margin: .25rem 0 0; text-align: right; font-size: .875rem; } .kape-auth__foot { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--kape-auth-line-soft); text-align: center; font-size: .925rem; color: var(--kape-auth-muted); } .kape-auth__foot + .kape-auth__foot { margin-top: .5rem; padding-top: 0; border-top: 0; } .kape-auth a { color: var(--kape-auth-blue); font-weight: 500; text-decoration: none; border-radius: .25rem; transition: color var(--kape-auth-fast) var(--kape-auth-ease); } .kape-auth a:hover { color: var(--kape-auth-blue-dark); text-decoration: underline; } .kape-auth a:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 98, 254, .35); } /* -- alerts ---------------------------------------------------------------- */ .kape-auth__alert { display: flex; gap: .625rem; margin-bottom: 1rem; padding: .8rem .9rem; font-size: .9rem; line-height: 1.45; border: 1px solid transparent; border-radius: var(--kape-auth-radius); } .kape-auth__alert i { flex: none; line-height: 1.45; } .kape-auth__alert--danger { color: #a8272b; background: rgba(229, 72, 77, .08); border-color: rgba(229, 72, 77, .28); } .kape-auth__alert--success { color: #077a4c; background: rgba(11, 171, 109, .09); border-color: rgba(11, 171, 109, .3); } /* -- extras ---------------------------------------------------------------- */ /* reCAPTCHA renders a fixed 304px iframe; below that it would overflow the card, so it is scaled from its left edge rather than allowed to clip. */ .kape-auth__captcha { margin-bottom: 1rem; } @media (max-width: 25rem) { .kape-auth__card { padding: 1.75rem 1.25rem 1.5rem; } .kape-auth__captcha { transform: scale(.87); transform-origin: 0 0; height: 66px; } } /* The phone field is wrapped by intl-tel-input at runtime, which injects its own container around the input; it needs to fill the field either way. */ .kape-auth .iti { display: block; width: 100%; } /* -- reduced motion -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .kape-auth__input, .kape-auth__submit, .kape-auth a { transition-duration: .01ms; } .kape-auth__submit:active { transform: none; } } /* ========================================================================== The error page ========================================================================== Shared by tehumbura-www/pages/error-404.php and adm-www/shared/pages/error-404.php. It lives in this file, rather than in either SCSS build, for the same reason the auth card does: this file is already duplicated byte-for-byte across the two docroots, so putting the error page here means one style instead of a second pair of files to keep in sync. The admin used to render the purchased theme's version — a 250px JPEG of a broken robot inside `.auth-card`, with a btn-gradient-primary underneath. ========================================================================== */ .kape-error { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4rem 1rem; } .kape-error__code { margin: 0; font-family: inherit; font-size: clamp(4rem, 14vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; /* The number is scenery, not information — the sentence under it is the message. Tinted rather than solid so it does not shout over the heading. */ color: rgba(0, 98, 254, .16); } .kape-error__title { margin: .5rem 0 0; font-size: 1.5rem; font-weight: 700; color: #1b2027; } .kape-error__text { margin: .625rem 0 0; max-width: 34rem; font-size: .975rem; line-height: 1.6; color: #6b7688; } .kape-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: 1.75rem; } /* The site puts a search box here; the admin does not. */ .kape-error__slot { width: 100%; max-width: 34rem; margin-top: 1.75rem; }