/* ===== Identity auth pages — new design shell ===== The vertical rhythm here is budgeted, not chosen by feel: Register is the tallest page on this layout (6 inputs + Turnstile + submit) and it has to clear a laptop viewport and a phone viewport without scrolling. Every value below is what it is because the sum has to stay under roughly 730px. Loosen one and Register starts scrolling again. */ /* align-items:flex-start + margin:auto on the card, not align-items:center. Centring a flex item that is taller than its container clips it at BOTH ends -- on a 13" laptop that put the logo and the first field above the top of the page, unreachable, because you cannot scroll up past a container's start. `margin:auto` centres while it fits and degrades to top-pinned when it doesn't. */ /* box-sizing is load-bearing, not housekeeping: is content-box by default, so min-height:100dvh + 24px of padding measured 100dvh + 48px and every auth page scrolled by exactly its own padding, however short the card was. */ .b4u-auth { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--b4u-hero-gradient); display: flex; align-items: flex-start; justify-content: center; padding: 24px 20px; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; color: var(--b4u-text); } .b4u-auth-card { width: 100%; max-width: 440px; margin: auto; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 24px; padding: 26px 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .b4u-auth-logo { text-align: center; margin-bottom: 14px; } .b4u-auth-logo img { height: 34px; } .b4u-auth-head { text-align: center; margin-bottom: 18px; } .b4u-auth-head h1, .b4u-auth-head h2 { font-size: 22px; font-weight: 700; color: var(--b4u-text); margin: 0 0 4px; font-family: var(--b4u-font-display, 'Plus Jakarta Sans', sans-serif); } .b4u-auth-head p { font-size: 13.5px; color: var(--b4u-text-muted); margin: 0; } .b4u-auth-msg { text-align: center; font-size: 14px; color: var(--b4u-text-muted); margin: 0 0 16px; } .b4u-auth-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .b4u-auth-field > label { font-size: 13px; font-weight: 600; color: var(--b4u-text); } .b4u-auth-input { width: 100%; box-sizing: border-box; padding: 10px 14px; font-size: 14px; background: var(--b4u-bg-input, var(--b4u-bg-card)); color: var(--b4u-text); border: 1px solid var(--b4u-border); border-radius: 12px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } /* Two fields on one line. Only for pairs whose labels are one line in every supported language — first/last name. Password + confirm stay stacked: "Confirmer le mot de passe" wraps in half a card, and a two-line label on one side alone drops that input below its neighbour. */ .b4u-auth-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; } @media (max-width: 340px) { .b4u-auth-row { grid-template-columns: 1fr; } } /* Label beside the control instead of above it. For a two-option radio group the stacked label was buying a whole row of height to caption something already self-evident from its two words. The error keeps its own line (flex-basis:100%) so it never squeezes the options. */ .b4u-auth-field--inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 18px; } .b4u-auth-field--inline > label { flex: 0 0 auto; } .b4u-auth-field--inline > .b4u-auth-error { flex-basis: 100%; } .b4u-auth-input::placeholder { color: var(--b4u-text-muted); } .b4u-auth-input:focus { border-color: var(--b4u-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b4u-primary) 22%, transparent); } select.b4u-auth-input { appearance: none; cursor: pointer; } .b4u-auth-check { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: var(--b4u-text); } .b4u-auth-check input { width: 16px; height: 16px; accent-color: var(--b4u-primary); margin: 0; } .b4u-auth-check label { margin: 0; cursor: pointer; } /* margin-bottom:0, not 16px: this sits inside a .b4u-auth-field that already carries the row's bottom margin, so the two stacked and left a visibly wider gap under Gender than under any other field. */ .b4u-auth-radios { display: flex; gap: 20px; align-items: center; margin-bottom: 0; } .b4u-auth-radios label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--b4u-text); margin: 0; cursor: pointer; } .b4u-auth-radios input { accent-color: var(--b4u-primary); margin: 0; } .b4u-auth-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 12px 24px; margin-top: 4px; font-size: 15px; font-weight: 600; font-family: inherit; color: #fff; background: var(--b4u-primary); border: none; border-radius: 12px; cursor: pointer; text-decoration: none; transition: filter .15s, transform .05s; } .b4u-auth-btn:hover { filter: brightness(1.07); color: #fff; } .b4u-auth-btn:active { transform: translateY(1px); } /* One row while they fit. Two providers stacked cost a full extra button of height on a page that is already fighting for it, and a social button is wide enough to read at half width. flex-wrap returns them to a stack if a third provider is ever added. */ .b4u-auth-socials { display: flex; flex-wrap: wrap; gap: 10px; } .b4u-auth-social { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; padding: 10px 14px; font-size: 14px; font-weight: 600; font-family: inherit; border-radius: 12px; cursor: pointer; border: 1px solid var(--b4u-border); background: var(--b4u-bg-card); color: var(--b4u-text); text-decoration: none; transition: filter .15s; } .b4u-auth-social:hover { filter: brightness(1.05); } .b4u-auth-social.is-google { color: #db4437; } .b4u-auth-social.is-facebook { color: #1877f2; } .b4u-auth-social i { font-size: 16px; } .b4u-auth-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; } .b4u-auth-divider::before, .b4u-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--b4u-border); } .b4u-auth-divider span { font-size: 12px; color: var(--b4u-text-muted); white-space: nowrap; } /* A wrapped row, not a stack. Login carries three of these; stacked they were three full lines of secondary navigation under the primary action, which is both a lot of height and more emphasis than they deserve. */ .b4u-auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 14px; text-align: center; } .b4u-auth-link, .b4u-auth-links a { color: var(--b4u-primary); font-size: 13.5px; text-decoration: none; font-weight: 600; } .b4u-auth-link:hover, .b4u-auth-links a:hover { text-decoration: underline; } /* The "other door": the one link in the footer that is a destination rather than a footnote. Given its own line and its own shape, because among three identically styled links the middle one reads as the least important of the three — which is exactly backwards for Register on a login page. An outlined control is a stronger separator than any colour change would be, and it survives translation length. */ .b4u-auth-alt { margin-top: 12px; text-align: center; } .b4u-auth-altbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 20px; border: 1px solid var(--b4u-border); border-radius: 10px; color: var(--b4u-primary); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .15s, background .15s; } .b4u-auth-altbtn:hover { border-color: var(--b4u-primary); background: var(--b4u-primary-light); color: var(--b4u-primary); text-decoration: none; } /* Where a page offers an alternative path below them, the links above it are utilities — mute them so the alternative is the only primary-coloured thing in the footer. Scoped by :has() so the pages whose only action lives in .b4u-auth-links keep it emphasised; browsers without :has() simply leave them primary, which is the old look. */ .b4u-auth-links:has(+ .b4u-auth-alt) a { color: var(--b4u-text-muted); font-weight: 500; } .b4u-auth-links:has(+ .b4u-auth-alt) a:hover { color: var(--b4u-primary); } .b4u-auth-error, .b4u-auth .text-danger { color: var(--b4u-danger); font-size: 12.5px; } .b4u-auth-summary { color: var(--b4u-danger); font-size: 13px; margin-bottom: 12px; } .b4u-auth-summary ul { margin: 0; padding-left: 18px; } .b4u-auth-status { padding: 12px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 16px; } .b4u-auth-status.is-success { background: color-mix(in srgb, var(--b4u-success, #16a34a) 14%, transparent); color: var(--b4u-success, #16a34a); } .b4u-auth-status.is-error { background: color-mix(in srgb, var(--b4u-danger) 14%, transparent); color: var(--b4u-danger); } /* Top-right controls: language dropdown + dark/light toggle. */ .b4u-auth-topbar { position: fixed; top: 18px; right: 22px; z-index: 30; display: flex; align-items: center; gap: 10px; } /* CSS-only language dropdown (native

). */ .b4u-auth-lang { position: relative; } .b4u-auth-lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--b4u-border); background: var(--b4u-bg-card); color: var(--b4u-text); } .b4u-auth-lang > summary::-webkit-details-marker { display: none; } .b4u-auth-lang > summary .fa-chevron-down { font-size: 11px; opacity: .65; transition: transform .15s; } .b4u-auth-lang[open] > summary .fa-chevron-down { transform: rotate(180deg); } .b4u-auth-lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 184px; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.24); padding: 6px; } .b4u-auth-lang-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--b4u-text); text-decoration: none; font-size: 14px; white-space: nowrap; } .b4u-auth-lang-item:hover { background: var(--b4u-bg-input, rgba(127,127,127,.12)); } .b4u-auth-lang-item.is-active { font-weight: 700; } .b4u-auth-lang-item .b4u-auth-lang-check { margin-left: auto; color: var(--b4u-primary); display: inline-flex; } /* Theme toggle button (the dark/light icon swap rules live in theme.css). */ .b4u-auth-topbar .b4u-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--b4u-border); background: var(--b4u-bg-card); color: var(--b4u-text); cursor: pointer; font-size: 15px; transition: filter .15s; } .b4u-auth-topbar .b4u-theme-toggle:hover { filter: brightness(1.06); } /* Phones. The shell's side padding and the card's own inset were charging twice for the same margin, so the form got ~300px of a 375px screen. Trimming both is worth two fields of height on Register. 16px inputs are not a style choice: iOS Safari zooms the page when a focused input is under 16px, which throws the layout off-screen the moment the user taps a field -- exactly the "doesn't fit" problem, arrived at from the other direction. Vertical padding drops to keep the taller text from costing any height. */ @media (max-width: 560px) { .b4u-auth { padding: 16px 14px; align-items: flex-start; } .b4u-auth-card { padding: 22px 18px; border-radius: 20px; } .b4u-auth-logo { margin-bottom: 10px; } .b4u-auth-logo img { height: 30px; } .b4u-auth-head { margin-bottom: 14px; } .b4u-auth-head h1, .b4u-auth-head h2 { font-size: 20px; } .b4u-auth-input { font-size: 16px; padding: 9px 12px; } .b4u-auth-field { margin-bottom: 10px; } .b4u-auth-topbar { top: 12px; right: 12px; } .b4u-auth-divider { margin: 12px 0; } .b4u-auth-links { margin-top: 10px; } .b4u-auth-alt { margin-top: 8px; } .b4u-auth-altbtn { padding: 8px 18px; } }