) ---- */ .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } .page-header__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .page-header__eyebrow { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-accent-strong); } .page-header__title { font-size: var(--font-size-2xl); } .page-header__subtitle { color: var(--color-text-secondary); max-width: var(--measure); } .page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); } .breadcrumbs a { color: var(--color-text-secondary); } .breadcrumbs .icon { width: var(--icon-xs); height: var(--icon-xs); } .breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: var(--font-weight-medium); } .section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .section-title h2, .section-title h3 { font-size: var(--font-size-lg); } /* ========================================================================== PUBLIC LAYOUT ========================================================================== */ body[data-layout="public"] { display: flex; flex-direction: column; } body[data-layout="public"] > main { flex: 1; } .site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(var(--space-3)); border-bottom: var(--border-width) solid transparent; transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site-header.is-scrolled { border-bottom-color: var(--color-border); box-shadow: var(--shadow-xs); } .site-header__inner { display: flex; align-items: center; gap: var(--space-6); height: var(--topbar-height); } .site-header__nav { display: none; align-items: center; gap: var(--space-1); margin-right: auto; } .site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; } .site-header__actions .btn--desktop { display: none; } .site-nav__link { display: inline-flex; align-items: center; height: var(--control-height); padding-inline: var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .site-nav__link:hover { background: var(--color-bg-muted); color: var(--color-text); text-decoration: none; } .site-nav__link[aria-current="page"] { color: var(--color-heading); background: var(--color-primary-soft); } .logo { display: inline-flex; align-items: center; flex: none; color: var(--color-heading); } .logo svg { height: var(--logo-height); width: auto; } .logo--lg svg { height: var(--logo-height-lg); } .logo__accent { fill: var(--color-accent); } .logo__ink { fill: currentColor; } .logo--mono .logo__accent { fill: currentColor; } @media (min-width: 64em) { .site-header__nav { display: flex; } .site-header__actions { margin-left: 0; } .site-header__actions .btn--desktop { display: inline-flex; } .site-header .site-header__menu { display: none; } } .site-footer { margin-top: var(--space-20); background: var(--chrome-bg); color: var(--chrome-text); } .site-footer__inner { display: grid; gap: var(--space-10); padding-block: var(--space-16) var(--space-10); grid-template-columns: minmax(0, 1fr); } .site-footer .logo { color: var(--chrome-text-strong); } .site-footer__about { max-width: 32ch; margin-top: var(--space-4); font-size: var(--font-size-sm); } .site-footer__heading { margin-bottom: var(--space-4); color: var(--chrome-text-strong); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .site-footer__list { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--font-size-sm); } .site-footer__list a { color: var(--chrome-text); } .site-footer__list a:hover { color: var(--chrome-text-strong); } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-6); border-top: var(--border-width) solid var(--chrome-border); font-size: var(--font-size-xs); } @media (min-width: 48em) { .site-footer__inner { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); } } /* Slim footer used by app / auth / focus layouts */ .mini-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); padding: var(--space-6) var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-xs); } .mini-footer a { color: var(--color-text-muted); } /* ---- Marketing sections ---- */ .section { padding-block: var(--space-16); } .section--muted { background: var(--color-bg-muted); } .section--tight { padding-block: var(--space-10); } .section__header { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--container-sm); margin-bottom: var(--space-10); } .section__header--center { margin-inline: auto; text-align: center; align-items: center; } .section__eyebrow { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-accent-strong); } .section__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); } .section__lead { font-size: var(--font-size-md); color: var(--color-text-secondary); } .hero { position: relative; overflow: hidden; padding-block: var(--space-12) var(--space-16); } .hero__inner { position: relative; display: grid; gap: var(--space-10); align-items: center; } .hero__title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-tight); } .hero__title em { font-style: normal; color: var(--color-accent-strong); } .hero__lead { max-width: 52ch; font-size: var(--font-size-md); color: var(--color-text-secondary); } .hero__inner > .stack { position: relative; z-index: var(--z-base); max-width: var(--container-md); } .hero__mark { position: absolute; right: 0; top: 50%; width: var(--hero-mark-size); transform: translateY(-50%); color: var(--color-primary-soft); pointer-events: none; } .hero__mark .logo { display: block; color: inherit; } .hero__mark .logo__accent { fill: var(--color-accent-soft); } .hero__mark .logo svg { width: 100%; height: auto; } .entry-cards { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); } .entry-card { position: relative; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out); } .entry-card:hover { transform: translateY(var(--lift-md)); border-color: var(--color-accent-soft-border); box-shadow: var(--shadow-lg); text-decoration: none; } .entry-card:active { transform: scale(var(--press-scale)); } .entry-card__icon { display: grid; place-items: center; width: var(--touch-target-lg); height: var(--touch-target-lg); flex: none; border-radius: var(--radius-lg); background: var(--color-primary); color: var(--color-on-primary); } .entry-card--accent .entry-card__icon { background: var(--color-accent-strong); color: var(--color-on-accent); } .entry-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-heading); } .entry-card__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .entry-card__arrow { margin-left: auto; color: var(--color-text-muted); transition: transform var(--duration) var(--ease-out), color var(--duration) var(--ease-out); } .entry-card:hover .entry-card__arrow { transform: translateX(var(--space-1)); color: var(--color-accent-strong); } .steps { display: grid; gap: var(--space-6); counter-reset: step; grid-template-columns: minmax(0, 1fr); } .step { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); border: var(--border-width) solid var(--color-border); } .step__number { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: var(--font-weight-semibold); } .step__title { font-size: var(--font-size-lg); } .step__text { color: var(--color-text-secondary); } .trust-strip { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); } .trust-item { display: flex; gap: var(--space-4); align-items: flex-start; } .trust-item__icon { display: grid; place-items: center; width: var(--control-height-lg); height: var(--control-height-lg); flex: none; border-radius: var(--radius-lg); background: var(--color-primary-soft); color: var(--color-heading); } .trust-item__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-heading); } .trust-item__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .cta-band { position: relative; overflow: hidden; display: grid; gap: var(--space-6); align-items: center; padding: var(--space-10) var(--space-6); border-radius: var(--radius-2xl); background: var(--chrome-bg); color: var(--chrome-text); } .cta-band__title { color: var(--chrome-text-strong); font-size: var(--font-size-2xl); } .cta-band__text { max-width: 56ch; } .cta-band__glow { position: absolute; inset: auto calc(var(--space-24) * -1) calc(var(--space-24) * -1) auto; width: var(--hero-mark-size); height: var(--hero-mark-size); border-radius: var(--radius-full); background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-accent) 60%, transparent), transparent); pointer-events: none; } .cta-band > *:not(.cta-band__glow) { position: relative; } .feature-list { display: flex; flex-direction: column; gap: var(--space-3); } .feature-list li { display: flex; gap: var(--space-3); align-items: flex-start; } .feature-list .icon { margin-top: var(--space-0-5); color: var(--color-success); } @media (min-width: 48em) { .hero { padding-block: var(--space-20) var(--space-24); } .hero__title { font-size: var(--font-size-4xl); } .hero__lead { font-size: var(--font-size-lg); } .entry-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps, .trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cta-band { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-12); } .section__title { font-size: var(--font-size-3xl); } } @media (min-width: 80em) { .hero__title { font-size: var(--font-size-5xl); } } @media (max-width: 79.99em) { .hero__mark { display: none; } } /* ========================================================================== APP LAYOUT (customer / provider / admin) ========================================================================== */ body[data-layout="app"] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--topbar-height) minmax(0, 1fr) auto; grid-template-areas: "topbar" "main" "footer"; background: var(--color-page); } body[data-layout="app"] > main { grid-area: main; min-width: 0; padding: var(--space-5) var(--space-4) var(--space-10); } body[data-layout="app"] > main > .container { padding-inline: 0; } body[data-layout="app"] .mini-footer { grid-area: footer; } .topbar { grid-area: topbar; position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; gap: var(--space-2); height: var(--topbar-height); padding-inline: var(--space-3); background: color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter: saturate(1.4) blur(var(--space-3)); border-bottom: var(--border-width) solid var(--color-border); } .topbar__title { min-width: 0; margin-right: auto; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar__search { display: none; align-items: center; gap: var(--space-2); height: var(--control-height); min-width: var(--menu-min); padding-inline: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-size-sm); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .topbar__search:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); } .topbar__search kbd { margin-left: auto; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer); display: flex; flex-direction: column; width: var(--drawer-width); max-width: 86vw; background: var(--chrome-bg); color: var(--chrome-text); transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease-out); } body.is-nav-open .sidebar { transform: none; box-shadow: var(--shadow-xl); } .sidebar__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--topbar-height); padding-inline: var(--space-5); flex: none; } .sidebar__brand .logo { color: var(--chrome-text-strong); } .sidebar__brand .logo--mark { display: none; } .sidebar__nav { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-5); } .sidebar__group { display: flex; flex-direction: column; gap: var(--space-0-5); } .sidebar__group-label { padding: 0 var(--space-3) var(--space-2); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: color-mix(in srgb, var(--chrome-text) 70%, transparent); } .sidebar__link { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--chrome-text); font-weight: var(--font-weight-medium); transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .sidebar__link:hover { background: var(--chrome-bg-hover); color: var(--chrome-text-strong); text-decoration: none; } .sidebar__link[aria-current="page"] { background: var(--chrome-bg-active); color: var(--chrome-text-strong); } .sidebar__link[aria-current="page"]::before { content: ""; position: absolute; left: calc(var(--space-3) * -1); top: 22%; bottom: 22%; width: var(--border-width-heavy); border-radius: var(--radius-full); background: var(--color-accent); } .sidebar__link-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__badge { min-width: var(--space-5); padding-inline: var(--space-1-5); border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-on-accent); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); line-height: var(--space-5); text-align: center; } .sidebar__footer { flex: none; padding: var(--space-3); border-top: var(--border-width) solid var(--chrome-border); } .sidebar__user { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2); border-radius: var(--radius-md); color: var(--chrome-text-strong); text-align: left; transition: background var(--duration-fast) var(--ease-out); } .sidebar__user:hover { background: var(--chrome-bg-hover); } .sidebar__user-text { flex: 1; min-width: 0; } .sidebar__user-name { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__user-role { display: block; font-size: var(--font-size-xs); color: var(--chrome-text); } .sidebar__close { color: var(--chrome-text); } .nav-overlay { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--color-overlay); opacity: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--ease-out); } body.is-nav-open .nav-overlay { opacity: 1; pointer-events: auto; } /* Bottom tab bar — customer & provider on phones (thumb reach; no native app yet) */ .bottom-nav { position: fixed; inset: auto 0 0 0; z-index: var(--z-header); display: flex; height: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--color-surface); border-top: var(--border-width) solid var(--color-border); } .bottom-nav__link { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5); color: var(--color-text-muted); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .bottom-nav__link:hover { text-decoration: none; color: var(--color-text); } .bottom-nav__link:active { transform: scale(var(--press-scale)); } .bottom-nav__link[aria-current="page"] { color: var(--color-accent-strong); } .bottom-nav__dot { position: absolute; top: var(--space-2); left: calc(50% + var(--space-2)); width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-accent); } body[data-layout="app"][data-bottom-nav="true"] > main { padding-bottom: calc(var(--bottomnav-height) + var(--space-10)); } @media (min-width: 48em) { body[data-layout="app"] { grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr); grid-template-areas: "sidebar topbar" "sidebar main" "sidebar footer"; } body[data-layout="app"] > main { padding: var(--space-8) var(--space-6) var(--space-12); } body[data-layout="app"][data-bottom-nav="true"] > main { padding-bottom: var(--space-12); } .topbar { padding-inline: var(--space-6); } .topbar .topbar__menu, .bottom-nav, .nav-overlay, .sidebar .sidebar__close { display: none; } .topbar__search { display: inline-flex; } .sidebar { grid-area: sidebar; position: sticky; top: 0; height: 100dvh; width: auto; max-width: none; transform: none; transition: none; } /* rail: icons only */ .sidebar__brand { justify-content: center; padding-inline: 0; } .sidebar__brand .logo--full { display: none; } .sidebar__brand .logo--mark { display: inline-flex; } .sidebar__group-label, .sidebar__link-label, .sidebar__user-text { display: none; } .sidebar__link { justify-content: center; padding-inline: 0; } .sidebar__link[aria-current="page"]::before { left: calc(var(--space-3) * -1); } .sidebar__badge { position: absolute; top: var(--space-1); right: var(--space-2); } .sidebar__user { justify-content: center; } } @media (min-width: 64em) { html:not([data-sidebar="rail"]) body[data-layout="app"] { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); } html:not([data-sidebar="rail"]) .sidebar__brand { justify-content: space-between; padding-inline: var(--space-5); } html:not([data-sidebar="rail"]) .sidebar__brand .logo--full { display: inline-flex; } html:not([data-sidebar="rail"]) .sidebar__brand .logo--mark { display: none; } html:not([data-sidebar="rail"]) .sidebar__group-label { display: block; } html:not([data-sidebar="rail"]) .sidebar__link-label { display: block; } html:not([data-sidebar="rail"]) .sidebar__user-text { display: block; } html:not([data-sidebar="rail"]) .sidebar__link { justify-content: flex-start; padding-inline: var(--space-3); } html:not([data-sidebar="rail"]) .sidebar__badge { position: static; } html:not([data-sidebar="rail"]) .sidebar__user { justify-content: flex-start; } body[data-layout="app"] > main { padding-inline: var(--space-8); } } /* ========================================================================== AUTH LAYOUT — form + brand panel ========================================================================== */ body[data-layout="auth"] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100dvh; } .auth-panel { display: none; position: relative; overflow: hidden; flex-direction: column; justify-content: space-between; gap: var(--space-10); padding: var(--space-12); background: var(--chrome-bg); color: var(--chrome-text); } .auth-panel .logo { color: var(--chrome-text-strong); } .auth-panel__title { color: var(--chrome-text-strong); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); } .auth-panel__list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); } .auth-panel__list li { display: flex; gap: var(--space-3); align-items: flex-start; } .auth-panel__list .icon { color: var(--color-accent-alt); margin-top: var(--space-0-5); } .auth-panel__glow { position: absolute; right: calc(var(--space-24) * -1); top: calc(var(--space-24) * -1); width: var(--hero-mark-size); height: var(--hero-mark-size); border-radius: var(--radius-full); background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-accent) 55%, transparent), transparent); pointer-events: none; } .auth-panel > *:not(.auth-panel__glow) { position: relative; } .auth-main__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-4); } body[data-layout="auth"] > main { display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4) var(--space-12); } .auth-card { width: 100%; max-width: var(--modal-sm); display: flex; flex-direction: column; gap: var(--space-6); } .auth-card--wide { max-width: var(--modal-md); } .auth-card__title { font-size: var(--font-size-2xl); } .auth-card__lead { color: var(--color-text-secondary); } .auth-card__footer { text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); } @media (min-width: 64em) { body[data-layout="auth"] { grid-template-columns: var(--auth-panel-width) minmax(0, 1fr); } .auth-panel { display: flex; grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 0; height: 100dvh; } .auth-main__top, body[data-layout="auth"] > main, body[data-layout="auth"] .mini-footer { grid-column: 2; } .auth-main__top .logo { visibility: hidden; } .auth-main__top { padding-inline: var(--space-8); } } /* ========================================================================== FOCUS LAYOUT — wizards (request a service, provider onboarding) ========================================================================== */ body[data-layout="focus"] { display: flex; flex-direction: column; background: var(--color-page); } .focus-bar { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-bg); border-bottom: var(--border-width) solid var(--color-border); } .focus-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--topbar-height); } body[data-layout="focus"] > main { flex: 1; padding-block: var(--space-6) var(--space-16); } .wizard-actions { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); padding-block: var(--space-4); background: linear-gradient(to top, var(--color-bg-subtle) 70%, transparent); } .wizard-actions .btn { min-width: var(--grid-min-xs); } @media (min-width: 48em) { body[data-layout="focus"] > main { padding-block: var(--space-10) var(--space-16); } } /* ========================================================================== BARE LAYOUT — 403 / 404 / 500 / restricted / how-to-run ========================================================================== */ body[data-layout="bare"] { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-6); background: var(--color-page); } .bare-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); max-width: var(--modal-md); text-align: center; } .bare-card__code { font-size: var(--font-size-5xl); font-weight: var(--font-weight-extrabold); line-height: 1; color: var(--color-accent-strong); letter-spacing: var(--letter-spacing-tight); } .bare-card__icon { display: grid; place-items: center; width: var(--avatar-xl); height: var(--avatar-xl); border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent-strong); }