/* * The anonymous entrance pages — login, the one-time code, the passkey pages * and allauth's own built-in views. Loaded by base_without_login.html and * scoped to the `entrance-page` class the entrance layouts put on , so * nothing here reaches the logged-in UI or the invitation pages. * * The layout is the "Kirjautumissivun uudistus" handoff: one 416 px column on * a tinted page, a white (or near-black) card, 46 px buttons. Its measurements * are lifted from that file rather than rounded. The colours and the typeface * are no longer its own — they follow the admin palette in theme.css, so the * door and the room behind it look like one product; see * notes/design/hallinnan-graafinen-ohjeistus.md. It does not use Bootstrap's * buttons, cards or form controls: their sizes and radii are not the design's, * and overriding them costs more than these ~120 lines. * * Bootstrap is still loaded on these pages for its reboot and for the few * utility classes the markup uses. */ .entrance-page { /* light */ --entrance-bg: #f1efea; --entrance-text: #1c1b18; --entrance-header-bg: #ffffff; --entrance-header-border: #dfdad0; --entrance-header-text: #4a4740; --entrance-ghost: #6b675e; --entrance-ghost-hover-bg: #f1efea; --entrance-ghost-hover: #1c1b18; --entrance-card-bg: #ffffff; --entrance-card-border: #dfdad0; --entrance-heading: #1c1b18; --entrance-muted: #4a4740; --entrance-faint: #6b675e; --entrance-divider: #e6e1d8; --entrance-primary-bg: #1f4d5a; --entrance-primary-border: #1f4d5a; --entrance-primary-hover: #163a44; --entrance-primary-active: #12313a; --entrance-primary-text: #ffffff; --entrance-secondary-bg: #ffffff; --entrance-secondary-border: #c9c2b6; --entrance-secondary-text: #1c1b18; --entrance-secondary-hover-bg: #f1efea; --entrance-secondary-hover-border: #b0a89a; --entrance-inset-bg: #f7f6f3; --entrance-inset-border: #e6e1d8; --entrance-label: #6b675e; --entrance-input-bg: #ffffff; --entrance-input-border: #c9c2b6; --entrance-input-text: #1c1b18; --entrance-link: #1f4d5a; --entrance-link-hover: #2e6b7c; --entrance-focus: #1f4d5a; --entrance-footer-border: #e6e1d8; --entrance-footer-text: #6b675e; --entrance-danger-bg: #fdf2f2; --entrance-danger-border: #f0c9c9; --entrance-danger-text: #a12d2d; --entrance-info-bg: #f7f6f3; --entrance-info-border: #e6e1d8; } [data-bs-theme='dark'] .entrance-page { --entrance-bg: #141513; --entrance-text: #e9e7e1; --entrance-header-bg: #0f100e; --entrance-header-border: #2e312d; --entrance-header-text: #c6c3bb; --entrance-ghost: #a5a29a; --entrance-ghost-hover-bg: #1e201c; --entrance-ghost-hover: #e9e7e1; --entrance-card-bg: #1a1c1a; --entrance-card-border: #2e312d; --entrance-heading: #f2f1ed; --entrance-muted: #a5a29a; --entrance-faint: #8b887f; --entrance-divider: #2e312d; --entrance-primary-bg: #7fb3be; --entrance-primary-border: #7fb3be; --entrance-primary-hover: #9ac5ce; --entrance-primary-active: #a6cbd3; --entrance-primary-text: #0f1a1d; --entrance-secondary-bg: transparent; --entrance-secondary-border: #3d6f79; --entrance-secondary-text: #e9e7e1; --entrance-secondary-hover-bg: #1e201c; --entrance-secondary-hover-border: #4f8791; --entrance-inset-bg: #1a1c1a; --entrance-inset-border: #2e312d; --entrance-label: #a5a29a; --entrance-input-bg: #1a1c1a; --entrance-input-border: #3a3d38; --entrance-input-text: #e9e7e1; --entrance-link: #7fb3be; --entrance-link-hover: #a6cbd3; --entrance-focus: #7fb3be; --entrance-footer-border: #2e312d; --entrance-footer-text: #8b887f; --entrance-danger-bg: #2a1b1d; --entrance-danger-border: #4a2b2f; --entrance-danger-text: #eda3a3; --entrance-info-bg: #1a1c1a; --entrance-info-border: #2e312d; } /* * The frame. base_without_login.html gives `d-flex flex-column * min-vh-100` and the footer `mt-auto`;
grows so the card sits 88px * below the header on a tall window and the footer stays at the bottom. */ .entrance-page { background: var(--entrance-bg); color: var(--entrance-text); font-family: var(--app-font-sans); -webkit-font-smoothing: antialiased; text-align: start; } .entrance-page a { color: var(--entrance-link); text-decoration: none; } .entrance-page a:hover { color: var(--entrance-link-hover); text-decoration: underline; } .entrance-page input:focus-visible, .entrance-page button:focus-visible, .entrance-page a:focus-visible { outline: 2px solid var(--entrance-focus); outline-offset: 2px; } .entrance-navbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 24px; background: var(--entrance-header-bg); border-bottom: 1px solid var(--entrance-header-border); } .entrance-page .entrance-navbar__title { font-size: 14.5px; font-weight: 500; letter-spacing: 0.005em; line-height: 1.2; color: var(--entrance-header-text); } .entrance-page .entrance-navbar__title:hover { color: var(--entrance-header-text); text-decoration: none; } .entrance-navbar__toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--entrance-ghost); font-size: 15px; cursor: pointer; } .entrance-navbar__toggle:hover { background: var(--entrance-ghost-hover-bg); color: var(--entrance-ghost-hover); } .entrance-page main { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 88px 24px 48px; } .entrance-page main > * { width: 100%; max-width: 416px; } /* * allauth's own built-in pages (adding a passkey, re-authentication, the * password-reset chain) write bare elements into base_without_login's * .page-content, with no card of their own; ours put an .entrance-column * there and bring their own. One rule gives the first group the same card * without touching the second. */ .entrance-page .page-content:not(:has(.entrance-column)) { background: var(--entrance-card-bg); border: 1px solid var(--entrance-card-border); border-radius: 12px; padding: 36px 34px 30px; } .entrance-column { display: flex; flex-direction: column; gap: 24px; } .entrance-card { background: var(--entrance-card-bg); border: 1px solid var(--entrance-card-border); border-radius: 12px; padding: 36px 34px 30px; } .entrance-card__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; } .entrance-card__head--tight { margin-bottom: 20px; } .entrance-title { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -0.015em; color: var(--entrance-heading); } .entrance-subtitle { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--entrance-heading); } .entrance-rule { margin: 20px 0; border: 0; border-top: 1px solid var(--entrance-divider); opacity: 1; } .entrance-lead { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--entrance-muted); text-wrap: pretty; } .entrance-actions { display: flex; flex-direction: column; gap: 10px; } .entrance-actions--spaced { margin-top: 18px; } /* Buttons. 46px is the page's own control height; 42px belongs to the panels inside the card, where the design steps everything down one notch. */ .entrance-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; padding: 0 14px; border-radius: 8px; font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.005em; line-height: 1.25; text-align: center; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .entrance-btn--small { height: 42px; border-radius: 7px; font-size: 14.5px; letter-spacing: normal; } .entrance-page .entrance-btn--primary { border: 1px solid var(--entrance-primary-border); background: var(--entrance-primary-bg); color: var(--entrance-primary-text); } .entrance-page .entrance-btn--primary:hover { background: var(--entrance-primary-hover); color: var(--entrance-primary-text); text-decoration: none; } .entrance-page .entrance-btn--primary:active { background: var(--entrance-primary-active); } .entrance-page .entrance-btn--danger { border: 1px solid var(--entrance-danger-border); background: var(--entrance-danger-bg); color: var(--entrance-danger-text); } .entrance-page .entrance-btn--danger:hover { border-color: var(--entrance-danger-text); color: var(--entrance-danger-text); text-decoration: none; } .entrance-page .entrance-btn--secondary { border: 1px solid var(--entrance-secondary-border); background: var(--entrance-secondary-bg); color: var(--entrance-secondary-text); } .entrance-page .entrance-btn--secondary:hover { background: var(--entrance-secondary-hover-bg); border-color: var(--entrance-secondary-hover-border); color: var(--entrance-secondary-text); text-decoration: none; } /* The inset panel: the code request folded into the login page, and the same surface wherever a page needs a quieter block inside the card. */ .entrance-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 16px; background: var(--entrance-inset-bg); border: 1px solid var(--entrance-inset-border); border-radius: 8px; } .entrance-label { font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--entrance-label); } .entrance-input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--entrance-input-border); border-radius: 7px; background: var(--entrance-input-bg); color: var(--entrance-input-text); font-family: inherit; font-size: 14.5px; } .entrance-input--code { height: 46px; font-size: 20px; letter-spacing: 0.35em; text-align: center; } .entrance-help { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--entrance-faint); } .entrance-note { margin: 0; padding: 0 6px; font-size: 12.5px; line-height: 1.6; color: var(--entrance-faint); text-wrap: pretty; } .entrance-page .entrance-quiet { align-self: flex-start; padding: 0; border: 0; background: transparent; color: var(--entrance-ghost); font-family: inherit; font-size: 13.5px; cursor: pointer; } .entrance-page .entrance-quiet:hover { color: var(--entrance-secondary-text); text-decoration: none; } .entrance-divider { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--entrance-divider); } .entrance-alert { margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; font-size: 13.5px; line-height: 1.5; } .entrance-alert--danger { background: var(--entrance-danger-bg); border: 1px solid var(--entrance-danger-border); color: var(--entrance-danger-text); } .entrance-alert--info { background: var(--entrance-info-bg); border: 1px solid var(--entrance-info-border); color: var(--entrance-muted); } .entrance-footer { display: flex; justify-content: center; padding: 24px; background: var(--entrance-bg); border-top: 1px solid var(--entrance-footer-border); } .entrance-footer span { font-size: 12px; letter-spacing: 0.02em; color: var(--entrance-footer-text); } /* A list of things that belong to the account — the member's passkeys. */ .entrance-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; } .entrance-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid var(--entrance-inset-border); border-radius: 7px; background: var(--entrance-inset-bg); } .entrance-list__name { font-size: 14px; font-weight: 500; } .entrance-list__meta { font-size: 12.5px; color: var(--entrance-faint); } .entrance-list__tools { display: flex; gap: 6px; } .entrance-page .entrance-tool { padding: 4px 10px; border: 1px solid var(--entrance-secondary-border); border-radius: 6px; background: var(--entrance-secondary-bg); color: var(--entrance-secondary-text); font-family: inherit; font-size: 12.5px; cursor: pointer; } .entrance-page .entrance-tool:hover { background: var(--entrance-secondary-hover-bg); border-color: var(--entrance-secondary-hover-border); color: var(--entrance-secondary-text); text-decoration: none; } /* * The floor under allauth's own built-in pages. Every selector here is scoped * to the wrapper that has no .entrance-column in it — that is exactly the set * of pages whose markup this project does not write — so it can never reach * our own classes above, which are less specific and would otherwise lose. */ .entrance-page .page-content:not(:has(.entrance-column)) h1 { margin: 0 0 20px; font-size: 25px; font-weight: 600; letter-spacing: -0.015em; color: var(--entrance-heading); } .entrance-page .page-content:not(:has(.entrance-column)) h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--entrance-heading); } .entrance-page .page-content:not(:has(.entrance-column)) p { font-size: 14.5px; line-height: 1.55; color: var(--entrance-muted); } .entrance-page .page-content:not(:has(.entrance-column)) label { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--entrance-label); } .entrance-page .page-content:not(:has(.entrance-column)) input[type='text'], .entrance-page .page-content:not(:has(.entrance-column)) input[type='email'], .entrance-page .page-content:not(:has(.entrance-column)) input[type='password'], .entrance-page .page-content:not(:has(.entrance-column)) input[type='tel'], .entrance-page .page-content:not(:has(.entrance-column)) input[type='number'], .entrance-page .page-content:not(:has(.entrance-column)) input[type='url'], .entrance-page .page-content:not(:has(.entrance-column)) select, .entrance-page .page-content:not(:has(.entrance-column)) textarea { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--entrance-input-border); border-radius: 7px; background: var(--entrance-input-bg); color: var(--entrance-input-text); font-family: inherit; font-size: 14.5px; } .entrance-page .page-content:not(:has(.entrance-column)) textarea { padding: 10px 12px; } .entrance-page .page-content:not(:has(.entrance-column)) .errorlist { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--entrance-danger-text); } .entrance-page .page-content:not(:has(.entrance-column)) hr { margin: 20px 0; border: 0; border-top: 1px solid var(--entrance-divider); opacity: 1; } @media (max-width: 575.98px) { .entrance-page main { padding: 40px 16px 32px; } .entrance-card { padding: 28px 22px 24px; } .entrance-navbar { padding: 0 16px; } .entrance-navbar__title { font-size: 13.5px; } /* * 16px is the threshold below which iOS Safari zooms the page in when a * field takes focus, and it does not zoom back out: on a phone every tap * into the address field left the login card wider than the screen and * the member pinching to get back. The design's 14.5px stays everywhere * the browser does not do that. */ .entrance-input, .entrance-page .page-content:not(:has(.entrance-column)) input, .entrance-page .page-content:not(:has(.entrance-column)) select, .entrance-page .page-content:not(:has(.entrance-column)) textarea { font-size: 16px; } }