/* ============================================================================
ikh-signin-modal-fix.css
----------------------------------------------------------------------------
Three jobs:
1. WIDTH — widen the modal on desktop so the register form (now 8 role
cards) fits without the cramped 460px column.
2. SINGLE VIEWPORT — on desktop, lay the REGISTER tab out in two columns
(identity fields | role picker) so the whole form is visible without
vertical scrolling. Sign-in / forgot stay single-column + centered.
3. STYLES for the new elements: "Forgot password?" link, the forgot form,
the sent-confirmation, the role-card subtitles and wide grid.
LOAD ORDER — AFTER the base modal stylesheet, in _Layout.cshtml :
============================================================================ */
/* ── 1. WIDTH ──────────────────────────────────────────────────────────────
Sign-in / forgot are narrow; register is wide. We widen the shell only when
the register form is the one on screen, so sign-in keeps its tight, focused
look. JS toggles [hidden] on the forms; we key off :has() with a graceful
fallback (older browsers just get the wider shell always — still fine). */
@media (min-width: 720px) {
.ikh-modal-shell {
width: min(460px, 100%);
transition: width .28s cubic-bezier(.21,.86,.36,1.04);
}
/* When the register form is visible, go wide + two-column. */
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) {
width: min(840px, 100%);
}
}
/* ── 2. SINGLE-VIEWPORT REGISTER LAYOUT (desktop) ─────────────────────────── */
@media (min-width: 720px) {
/* Two-column body only while registering. */
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) .ikh-modal-body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"google google"
"divider divider"
"error error"
"signin signin"
"register register";
column-gap: 26px;
align-items: start;
}
/* The register form itself becomes the two-column canvas. */
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) [data-ikh-form="register"] {
grid-area: register;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 26px;
row-gap: 14px;
align-items: start;
}
/* Left column: the identity fields (name row, email, phone, password). */
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) [data-ikh-form="register"] > .ikh-modal-row-2,
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) [data-ikh-form="register"] > .ikh-modal-field:not(:nth-last-child(-n+4)) {
grid-column: 1;
}
/* Right column: the role picker spans the right side; terms + submit + foot
run full width underneath. We target the role field (the one containing
the journey grid), the terms row, the submit, and the foot link. */
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) .ikh-journey-grid-wide {
grid-template-columns: repeat(2, 1fr);
}
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) [data-ikh-form="register"] > .ikh-modal-field:has(.ikh-journey-grid-wide) {
grid-column: 2;
grid-row: 1 / span 6; /* sit alongside the left-column stack */
}
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) [data-ikh-form="register"] > .ikh-modal-terms,
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) [data-ikh-form="register"] > .ikh-modal-submit,
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) [data-ikh-form="register"] > .ikh-modal-foot {
grid-column: 1 / -1;
}
/* Keep it inside the viewport without an inner scrollbar where possible. */
.ikh-modal-shell:has([data-ikh-form="register"]:not([hidden])) {
max-height: calc(100vh - 32px);
}
}
/* Center sign-in + forgot content within the wider shell so they don't look
stranded on the left when the shell happens to be wide. */
.ikh-modal-shell [data-ikh-form="signin"],
.ikh-modal-shell [data-ikh-form="forgot"] {
max-width: 420px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* ── 3a. WIDE ROLE GRID (all viewports) ───────────────────────────────────── */
.ikh-journey-grid-wide {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
@media (max-width: 900px) {
.ikh-journey-grid-wide {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 560px) {
.ikh-journey-grid-wide {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 360px) {
.ikh-journey-grid-wide {
grid-template-columns: 1fr;
}
}
/* Role-card subtitle under the title. */
.ikh-journey-card .ikh-journey-sub {
display: block;
font-size: 0.66rem;
line-height: 1.2;
color: #8a8f9c;
margin-top: 2px;
}
.ikh-journey-card {
text-align: center;
}
/* ── 3b. FORGOT-PASSWORD LINK + FORM ──────────────────────────────────────── */
.ikh-modal-forgot-row {
display: flex;
justify-content: flex-end;
margin-top: 6px;
}
.ikh-modal-forgot-link {
font-size: 0.78rem;
color: #F58220;
text-decoration: none;
font-weight: 600;
}
.ikh-modal-forgot-link:hover {
text-decoration: underline;
}
.ikh-modal-forgot-blurb {
margin: 0 0 14px;
font-size: 0.88rem;
color: #4a4d57;
line-height: 1.5;
}
.ikh-modal-forgot-sent {
display: flex;
gap: 10px;
align-items: flex-start;
background: #effaf1;
border: 1px solid #c9ecd2;
color: #1c6b34;
border-radius: 12px;
padding: 14px 16px;
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 14px;
}
.ikh-modal-forgot-sent svg {
flex-shrink: 0;
margin-top: 1px;
color: #2e9e54;
}
/* Respect the hidden attribute everywhere (belt-and-braces). */
[hidden] {
display: none !important;
}
/* ── 4. EXPANDED ACCOUNT MENU (added with the Account Hub) ──────────────────
The authed dropdown now carries the full hub (Dashboard, Saved, Listings,
Alerts, Products, Profile + portal jumps). These rules give the new item
states a premium, brand-aligned treatment and keep the taller menu usable
on short viewports. They layer on top of the base .ikh-auth-menu styles. */
/* Let a long menu scroll inside the viewport instead of overflowing it. */
.ikh-auth-menu[data-ikh-menu-variant="authed"] {
max-height: min(76vh, 560px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.ikh-auth-menu[data-ikh-menu-variant="authed"]::-webkit-scrollbar {
width: 8px;
}
.ikh-auth-menu[data-ikh-menu-variant="authed"]::-webkit-scrollbar-thumb {
background: rgba(14,14,17,0.14);
border-radius: 8px;
}
/* Dashboard — the primary destination. Soft sunset wash + warm accent rail. */
.ikh-auth-menu-item.is-dashboard {
font-weight: 700;
color: #1A1A1F;
background: linear-gradient(90deg, rgba(245,130,32,0.10), rgba(245,130,32,0.02));
border: 1px solid rgba(245,130,32,0.18);
border-radius: 12px;
margin: 2px 0 6px;
position: relative;
}
.ikh-auth-menu-item.is-dashboard::before {
content: "";
position: absolute;
left: 0;
top: 18%;
bottom: 18%;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, #F58220, #F89622);
}
.ikh-auth-menu-item.is-dashboard:hover {
background: linear-gradient(90deg, rgba(245,130,32,0.16), rgba(245,130,32,0.04));
}
.ikh-auth-menu-item.is-dashboard svg {
color: #F58220;
}
/* Portal jump — cyan accent to echo the sky-blue brand mark. */
.ikh-auth-menu-item.is-portal {
color: #2b7fa6;
}
.ikh-auth-menu-item.is-portal svg {
color: #3FA9D9;
}
.ikh-auth-menu-item.is-portal:hover {
background: rgba(86,196,248,0.08);
}
/* Subtle separator above the portal/admin tail so the menu reads in groups. */
.ikh-auth-menu-item.is-portal,
.ikh-auth-menu-item[href="/admin"] {
margin-top: 6px;
}