/* hehopro — registration page UX * * Implements the "Particulier / Professionnel" tab layout and decorative * background defined in hehodev/frontend/theme-analysis/auth/auth.md. * The active theme already provides the page-level gradient + form card. * * Sizing is in rem (root font = 16px); the few literal px values that remain * are intentional hairlines (borders/shadows) where sub-pixel rounding would * blur the line. Theme tokens (`--heho-radius-*`, `--heho-border-*`) are used * where defined in heho.css. */ /* Decorative plug icons flanking the registration form card. * Rendered as ::before / ::after pseudo-elements of `.register-form` (the * theme-owned form wrapper) so they follow the card vertically and stay * centered on its midline. Image swaps to the Pro variant under * [data-heho-theme="pro"] — that attribute is toggled on by * registration.js when the active tab changes. Hidden under 1024px where the * card fills the row. */ body#registration .register-form { position: relative; } body#registration .register-form::before, body#registration .register-form::after { content: ""; position: absolute; top: 50%; width: 31.25rem; /* 500px */ height: 31.25rem; /* 500px */ background-image: var(--hehopro-img-plug); background-repeat: no-repeat; background-size: contain; background-position: center; opacity: 0.6; pointer-events: none; z-index: 0; } body#registration .register-form::before { left: 0; transform: translate(-100%, -50%) rotate(180deg); } body#registration .register-form::after { right: 0; transform: translate(100%, -50%); } body#registration[data-heho-theme="pro"] .register-form::before, body#registration[data-heho-theme="pro"] .register-form::after { background-image: var(--hehopro-img-plug-pro); } @media (max-width: 1024px) { body#registration .register-form::before, body#registration .register-form::after { display: none; } } .hehopro-register-tabs { position: relative; z-index: 1; margin: 0 auto 0.875rem; /* 14px */ } @media (max-width: 1024px) { .hehopro-register-tabs { max-width: none; margin-inline: 0.9375rem; /* 15px */ } } .hehopro-register-tabs__list { display: flex; flex-direction: row; gap: 0; } @media (max-width: 500px) { .hehopro-register-tabs__list { flex-direction: column; } } .hehopro-register-tabs__tab { position: relative; flex: 1 1 50%; height: 4.4375rem; /* 71px */ display: flex; align-items: center; justify-content: center; font-weight: var(--heho-font-weight-semibold); font-size: 0.9375rem; /* 15px */ background: transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .hehopro-register-tabs__tab--particulier { color: #A30E25; border-radius: var(--heho-radius-md) 0 0 var(--heho-radius-md); border: var(--heho-border-medium) solid #A30E25; } .hehopro-register-tabs__tab--particulier.is-active { background-color: #A30E25; color: #fff; } .hehopro-register-tabs__tab--particulier::before { content: ''; position: absolute; top: calc(var(--heho-border-medium) * -1); /* -2px */ right: -1rem; /* -16px */ width: 1.875rem; /* 30px */ height: 4.4375rem; /* 71px */ background-color: inherit; transform: skew(-20deg); z-index: 1; pointer-events: none; } .hehopro-register-tabs__tab--pro { color: #207F99; border-radius: 0 var(--heho-radius-md) var(--heho-radius-md) 0; border: var(--heho-border-medium) solid #207F99; } .hehopro-register-tabs__tab--pro.is-active { background-color: #207F99; color: #fff; } .hehopro-register-tabs__tab--pro::before { content: ''; position: absolute; top: calc(var(--heho-border-medium) * -1); /* -2px */ left: -1rem; /* -16px */ width: 1.875rem; /* 30px */ height: 4.4375rem; /* 71px */ background-color: inherit; transform: skew(20deg); z-index: 0; pointer-events: none; } /* Active tab's skewed bookend must paint on top of the inactive one so the * filled colour band overlaps the neighbour's outline (and not the other way * round, which exposes a thin ugly border line over the active band). */ .hehopro-register-tabs__tab.is-active::before { z-index: 2; } @media (max-width: 500px) { .hehopro-register-tabs__tab { flex-basis: 100%; height: 2.5rem; /* 40px */ } .hehopro-register-tabs__tab--particulier { border-radius: var(--heho-radius-md) var(--heho-radius-md) 0 0; } .hehopro-register-tabs__tab--pro { border-radius: 0 0 var(--heho-radius-md) var(--heho-radius-md); } .hehopro-register-tabs__tab--particulier::before, .hehopro-register-tabs__tab--pro::before { display: none; } } .hehopro-register-banner { margin-top: 1.25rem; /* 20px */ margin-bottom: 1.25rem; /* 20px */ border-radius: var(--heho-radius-md); overflow: hidden; } .hehopro-register-banner__img { display: block; width: 100%; height: auto; } /* Company-related form fields — hidden by default, JS reveals on "Pro" tab. */ .hehopro-hidden { display: none !important; } /* Autocomplete dropdown */ .hehopro-autocomplete { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin: 0.25rem 0 0; /* 4px */ padding: 0.25rem 0; /* 4px */ list-style: none; background: #fff; border: var(--heho-border-thin) solid #d6d6d6; border-radius: var(--heho-radius-sm); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08); /* 0 8px 24px */ max-height: 20rem; /* 320px */ overflow-y: auto; } .hehopro-autocomplete[hidden] { display: none; } .hehopro-autocomplete__item { padding: 0.5rem 0.75rem; /* 8px 12px */ cursor: pointer; display: flex; flex-direction: column; gap: 0.125rem; /* 2px */ transition: background-color 0.15s ease; } .hehopro-autocomplete__item:hover, .hehopro-autocomplete__item.is-active { background-color: var(--heho-color-bg-soft); } .hehopro-autocomplete__name { font-weight: var(--heho-font-weight-semibold); font-size: var(--heho-font-size-sm); /* 14px */ color: var(--heho-color-text); } .hehopro-autocomplete__meta { font-size: var(--heho-font-size-xs); /* 12px */ color: var(--heho-color-text-muted); }