/* ============================================================ LAYOUT — Page structure, containers, flexbox grids Mobile-first approach ============================================================ */ /* ---- Wrapper: page shell ---- */ /* Applied to — makes footer stick to the bottom on short pages */ body, .page { display: flex; flex-direction: column; min-height: 100vh; } /* ---- Main content area ---- */ .main-content { flex: 1 1 auto; width: 100%; max-width: var(--container-max); margin-inline: auto; padding: var(--space-6) var(--container-pad-x); } @media (min-width: 768px) { .main-content { padding: var(--space-8) var(--space-6); } } /* ---- Container: centered max-width wrapper ---- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; } /* ---- Page header bar (title + optional actions) ---- */ .page-header { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); } .page-header__title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-neutral-900); line-height: var(--leading-tight); letter-spacing: -0.02em; } .page-header__subtitle { font-size: var(--text-sm); color: var(--color-text-subtle); margin-top: calc(-1 * var(--space-2)); } .page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } @media (min-width: 640px) { .page-header { flex-direction: row; align-items: center; justify-content: space-between; } .page-header__title { font-size: var(--text-3xl); } } /* ---- Section ---- */ .section { margin-bottom: var(--space-8); } .section__title { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); margin-bottom: var(--space-3); } /* ---- Flex row / col helpers ---- */ .flex-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .flex-col { display: flex; flex-direction: column; gap: var(--space-4); } .flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } /* ---- Two-column content grid ---- */ .content-grid { display: flex; flex-direction: column; gap: var(--space-6); } .content-grid__main { flex: 1 1 0; min-width: 0; } .content-grid__sidebar { flex-shrink: 0; } @media (min-width: 1024px) { .content-grid { flex-direction: row; align-items: flex-start; } .content-grid__sidebar { width: 280px; } } /* ---- Auth layout — vertically centered card ---- */ .auth-layout { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-6) var(--container-pad-x); background-color: var(--color-bg); } .auth-layout__brand { text-align: center; margin-bottom: var(--space-8); } .auth-layout__logo { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-brand); letter-spacing: -0.03em; } .auth-layout__tagline { font-size: var(--text-sm); color: var(--color-text-subtle); margin-top: var(--space-1); } .auth-layout__card { width: 100%; max-width: 420px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-lg); } .auth-layout__card-title { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-neutral-900); margin-bottom: var(--space-6); text-align: center; } .auth-layout__footer { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-subtle); } .auth-layout__footer a { color: var(--color-brand); font-weight: var(--font-medium); } .auth-layout__footer a:hover { text-decoration: underline; } @media (min-width: 480px) { .auth-layout__card { padding: var(--space-10) var(--space-8); } }