/* ==========================================================================
layout.css
Handyman Services Marketplace — Layout System
Phase 2: CSS Design System
Depends on: base.css (all tokens below are defined there)
Table of contents
-----------------
1. Layout Tokens (extends base.css :root)
2. Container System
3. 12-Column Grid System
3a. Grid container
3b. Column spans
3c. Column start positions
3d. Gap modifiers
4. Page Section Utility
5. Page Layout Templates
5a. Homepage — Dual Entry Point
5b. Search Results — Sidebar + Results Grid
5c. Microsite — Hero + Content + Sidebar
5d. Dashboard — Sidebar + Main
6. Site Header
6a. Header shell & brand
6b. Navigation links
6c. Mobile hamburger & slide drawer
6d. Nav overlay backdrop
7. Site Footer
7a. Column grid
7b. Individual columns
7c. Bottom bar
========================================================================== */
/* ==========================================================================
1. Layout Tokens
==========================================================================
Extends the :root token set from base.css with layout-specific values.
Every raw value here references an existing spacing token so the system
stays consistent if spacing tokens ever change.
========================================================================== */
:root {
/* Sticky header height — referenced by sticky sidebars and scroll offsets */
--header-height-mobile: var(--space-10); /* 80px on mobile */
--header-height-desktop: var(--space-12); /* 96px on desktop */
--header-height: var(--header-height-mobile); /* current value */
/* Sidebar widths — each layout template uses its own value */
--sidebar-search: 280px; /* search filter panel */
--sidebar-microsite: 320px; /* profile booking / contact */
--sidebar-dashboard: 240px; /* dashboard side navigation */
/* Mobile nav drawer */
--nav-drawer-width: min(320px, 80vw);
/* Section vertical rhythm */
--section-pad-sm: var(--space-6); /* 48px — compact / mobile */
--section-pad-md: var(--space-10); /* 80px — standard desktop */
--section-pad-lg: var(--space-16); /* 128px — hero / large blocks */
}
/* Header grows slightly on tablet and up */
@media (min-width: 768px) {
:root {
--header-height: var(--header-height-desktop);
}
}
/* ==========================================================================
2. Container System
==========================================================================
Three width variants, all centred with auto margins.
Horizontal padding is supplied by --container-pad, which base.css
makes responsive (16px → 32px → 48px → 64px across breakpoints).
.container standard page content (1280px max)
.container--narrow article / form pages ( 720px max)
.container--full no max-width, padding only (e.g. full-bleed heroes)
Usage:
…
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max); /* 1280px — defined in base.css */
margin-inline: auto;
padding-inline: var(--container-pad); /* responsive via base.css §3 */
}
.container--narrow {
max-width: 720px;
}
.container--full {
max-width: none;
}
/* ==========================================================================
3. 12-Column Grid System
==========================================================================
Mobile-first: a single fluid column on small screens, 12 equal columns
on tablet and above. Children declare their span with .col-N classes
that only activate at the 768px breakpoint, so they fill the 1-column
layout automatically on mobile without extra markup.
========================================================================== */
/* --------------------------------------------------------------------------
3a. Grid container
-------------------------------------------------------------------------- */
.grid {
display: grid;
grid-template-columns: 1fr; /* 1 column — mobile */
gap: var(--space-4); /* 32px default gap */
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(12, 1fr); /* 12 columns — tablet+ */
}
}
/* --------------------------------------------------------------------------
3b. Column spans
--------------------------------------------------------------------------
Apply to direct children of .grid.
On mobile every child implicitly fills the single column;
these classes only take effect at 768px+.
Usage:
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
}
/* --------------------------------------------------------------------------
3c. Column start positions
--------------------------------------------------------------------------
Pair with a .col-N class to place a child at a specific grid line.
Useful for centring (e.g. col-6 + col-start-4) or right-aligning.
Usage:
…
← centres a 4-col block
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
}
/* --------------------------------------------------------------------------
3d. Gap modifiers
--------------------------------------------------------------------------
Override the default 32px gap when the layout calls for tighter
or looser spacing between grid cells.
-------------------------------------------------------------------------- */
.grid--gap-none { gap: 0; }
.grid--gap-sm { gap: var(--space-2); } /* 16px — compact / card grids */
.grid--gap-lg { gap: var(--space-6); } /* 48px — spacious feature rows */
/* ==========================================================================
4. Page Section Utility
==========================================================================
.section wraps a full-width horizontal band of content (hero, features,
testimonials, CTA strip, etc.) and applies consistent vertical breathing
room so all pages share the same vertical rhythm.
Modifiers
---------
.section--hero larger top/bottom padding for landmark sections
.section--tinted subtle background tint for alternating sections
.section--dark primary-900 background with inverse text
Usage:
========================================================================== */
.section {
padding-block: var(--section-pad-sm); /* 48px on mobile */
}
@media (min-width: 768px) {
.section {
padding-block: var(--section-pad-md); /* 80px on desktop */
}
}
.section--hero {
padding-block: var(--section-pad-md);
}
@media (min-width: 768px) {
.section--hero {
padding-block: var(--section-pad-lg); /* 128px on desktop */
}
}
.section--tinted {
background-color: var(--color-bg-subtle);
}
.section--dark {
background-color: var(--color-primary-900);
color: var(--color-text-inverse);
}
/* ==========================================================================
5. Page Layout Templates
==========================================================================
Each template uses CSS Grid with named areas so the structure is
self-documenting. Area names are prefixed (home-, search-, micro-,
dash-) to prevent collisions when templates are composed on the same page.
Named area elements use BEM modifiers that mirror the area names,
keeping HTML and CSS in sync:
========================================================================== */
/* --------------------------------------------------------------------------
5a. Homepage — Dual Entry Point Layout
--------------------------------------------------------------------------
Vertical stack of full-width sections. The entry zone splits the page
into two equally weighted paths at tablet width:
Left — homeowner: "I need a handyman"
Right — handyman: "I want to find work"
Grid areas (stacked vertically, no column splitting at top level):
home-hero full-width hero + primary search bar
home-entry two-path entry split (hire / work)
home-categories scrollable service category grid
home-trust stats, reviews, trust badges
home-cta secondary call-to-action strip
-------------------------------------------------------------------------- */
.layout-home {
display: grid;
grid-template-areas:
"home-hero"
"home-entry"
"home-categories"
"home-trust"
"home-cta";
}
.layout-home__hero { grid-area: home-hero; }
.layout-home__entry { grid-area: home-entry; }
.layout-home__categories { grid-area: home-categories; }
.layout-home__trust { grid-area: home-trust; }
.layout-home__cta { grid-area: home-cta; }
/*
* Dual entry point — two equal-width audience cards inside .layout-home__entry.
* Single column on mobile (card A above card B); side-by-side on tablet+.
*/
.entry-split {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 768px) {
.entry-split {
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
}
/*
* Service category grid — inside .layout-home__categories.
* 2 columns on mobile, expanding to 6 on wide desktop.
*/
.category-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
@media (min-width: 768px) {
.category-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.category-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
.category-grid { grid-template-columns: repeat(6, 1fr); }
}
/* --------------------------------------------------------------------------
5b. Search Results — Sidebar + Results Grid
--------------------------------------------------------------------------
Mobile: Filter controls stack above the results list (full width).
Desktop: Fixed-width filter panel on the left, results grid on the right.
The filter panel sticks so it stays in view while results scroll.
Grid areas:
search-header search bar row + result count + sort controls
search-filters filter panel (collapsible on mobile, sticky on desktop)
search-results responsive card grid of matching profiles / services
-------------------------------------------------------------------------- */
.layout-search {
display: grid;
grid-template-areas:
"search-header"
"search-filters"
"search-results";
gap: var(--space-4);
align-items: start;
}
@media (min-width: 1024px) {
.layout-search {
grid-template-areas:
"search-header search-header"
"search-filters search-results";
grid-template-columns: var(--sidebar-search) 1fr;
column-gap: var(--space-6);
row-gap: var(--space-4);
}
}
.layout-search__header { grid-area: search-header; }
.layout-search__filters { grid-area: search-filters; }
.layout-search__results { grid-area: search-results; }
/*
* Filter panel is sticky on desktop: scrolls with the page until the header
* clears, then stays fixed in view while results continue to scroll.
* max-height + overflow-y:auto handles tall filter lists gracefully.
*/
@media (min-width: 1024px) {
.layout-search__filters {
position: sticky;
top: calc(var(--header-height) + var(--space-2));
max-height: calc(100vh - var(--header-height) - var(--space-4));
overflow-y: auto;
}
}
/* Results inner grid — responsive columns within the search-results area */
.results-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 768px) {
.results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
.results-grid { grid-template-columns: repeat(3, 1fr); }
}
/* --------------------------------------------------------------------------
5c. Microsite — Hero + Content + Sidebar
--------------------------------------------------------------------------
Used for handyman profile pages and service-category landing pages.
The hero banner spans the full width. Below it, the main content column
sits beside the booking / contact sidebar.
Mobile ordering: sidebar appears ABOVE content so the booking widget
is visible before the user has to scroll through the bio — this
matches the mobile buying pattern (conversion action above the fold).
Grid areas:
micro-hero profile header / category banner (full width)
micro-content bio, portfolio, reviews, service list
micro-sidebar booking widget, pricing, availability, contact
-------------------------------------------------------------------------- */
.layout-microsite {
display: grid;
grid-template-areas:
"micro-hero"
"micro-sidebar" /* sidebar before content on mobile */
"micro-content";
gap: var(--space-4);
align-items: start;
}
@media (min-width: 1024px) {
.layout-microsite {
grid-template-areas:
"micro-hero micro-hero"
"micro-content micro-sidebar";
grid-template-columns: 1fr var(--sidebar-microsite);
column-gap: var(--space-8);
row-gap: var(--space-4);
}
}
.layout-microsite__hero { grid-area: micro-hero; }
.layout-microsite__content { grid-area: micro-content; }
.layout-microsite__sidebar { grid-area: micro-sidebar; }
/* Booking sidebar sticks while the content column scrolls on desktop */
@media (min-width: 1024px) {
.layout-microsite__sidebar {
position: sticky;
top: calc(var(--header-height) + var(--space-3));
max-height: calc(100vh - var(--header-height) - var(--space-6));
overflow-y: auto;
}
}
/* --------------------------------------------------------------------------
5d. Dashboard — Sidebar + Main Content
--------------------------------------------------------------------------
Full-viewport authenticated layout for homeowners and handymen.
Mobile: Side nav is hidden off-screen (toggled by ui.js); the main
content fills the screen with a top bar above it.
Desktop: Persistent left sidebar occupies the full viewport height;
the right side has a fixed top bar over a scrollable main area.
The outer .layout-dashboard is viewport-height so the page itself
never scrolls — only .layout-dashboard__main scrolls independently.
Grid areas:
dash-nav side navigation (role-specific links, logo)
dash-header top bar (breadcrumb, search, notifications, avatar)
dash-main primary work area (tables, forms, charts, etc.)
-------------------------------------------------------------------------- */
.layout-dashboard {
display: grid;
grid-template-areas:
"dash-header"
"dash-main";
grid-template-rows: var(--header-height) 1fr;
height: 100vh;
overflow: hidden; /* page-level scroll disabled; only dash-main scrolls */
}
@media (min-width: 1024px) {
.layout-dashboard {
grid-template-areas:
"dash-nav dash-header"
"dash-nav dash-main";
grid-template-columns: var(--sidebar-dashboard) 1fr;
grid-template-rows: var(--header-height) 1fr;
}
}
.layout-dashboard__header { grid-area: dash-header; }
.layout-dashboard__nav { grid-area: dash-nav; }
.layout-dashboard__main { grid-area: dash-main; }
/* Dashboard top bar */
.layout-dashboard__header {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--space-4);
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-border);
z-index: var(--z-raised);
}
/* Dashboard side nav — dark background, scrollable for long nav lists */
.layout-dashboard__nav {
background-color: var(--color-primary-900);
color: var(--color-text-inverse);
overflow-y: auto;
/* Mobile: hidden off-screen to the left; ui.js toggles .is-open */
position: fixed;
inset-block: 0;
left: 0;
width: var(--nav-drawer-width);
z-index: var(--z-modal);
transform: translateX(-100%);
visibility: hidden;
transition:
transform var(--duration-slow) var(--ease-out),
visibility var(--duration-slow) step-end;
}
.layout-dashboard__nav.is-open {
transform: translateX(0);
visibility: visible;
transition:
transform var(--duration-slow) var(--ease-out),
visibility var(--duration-slow) step-start;
}
@media (min-width: 1024px) {
/* Reset mobile drawer; CSS Grid places it as a normal grid area */
.layout-dashboard__nav {
position: static;
width: auto;
transform: none;
visibility: visible;
transition: none;
z-index: auto;
}
}
/* Dashboard main content — the only scrolling region in the viewport */
.layout-dashboard__main {
overflow-y: auto;
background-color: var(--color-bg);
padding: var(--space-4);
}
@media (min-width: 768px) {
.layout-dashboard__main {
padding: var(--space-6);
}
}
/* ==========================================================================
6. Site Header
==========================================================================
Sticky top bar used on all public-facing pages.
The dashboard uses .layout-dashboard__header instead.
Structure (all within a .container):
.site-header
.site-header__inner
.site-header__brand ← logo + wordmark
.site-nav ← primary nav (drawer on mobile)
.site-nav__header ← close button row (mobile only)
.site-nav__list
.site-nav__item
.site-nav__link
.site-header__actions ← sign-in / register buttons
.nav-toggle ← hamburger button (mobile only)
========================================================================== */
/* --------------------------------------------------------------------------
6a. Header shell & brand
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
height: var(--header-height);
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: var(--space-3);
}
/* Logo + wordmark link */
.site-header__brand {
display: flex;
align-items: center;
gap: var(--space-1);
flex-shrink: 0; /* never shrink; nav can compress instead */
font-size: var(--text-md);
font-weight: var(--font-bold);
color: var(--color-primary-600);
transition: var(--transition-colors);
}
.site-header__brand:hover {
color: var(--color-primary-500);
text-decoration: none;
}
.site-header__brand img,
.site-header__brand svg {
width: var(--space-5); /* 40px logo mark */
height: var(--space-5);
}
/* CTA buttons on the right edge of the header */
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-1-5);
flex-shrink: 0;
}
/*
* Anchor targets below the sticky header need top scroll margin so the
* header does not overlap the heading when jumping to an in-page section.
*/
[id] {
scroll-margin-top: calc(var(--header-height) + var(--space-2));
}
/* --------------------------------------------------------------------------
6b. Navigation links
-------------------------------------------------------------------------- */
.site-nav__list {
list-style: none;
padding: 0;
display: flex;
flex-direction: column; /* vertical inside mobile drawer */
gap: 0;
}
@media (min-width: 1024px) {
.site-nav__list {
flex-direction: row;
align-items: center;
gap: var(--space-0-5);
}
}
.site-nav__link {
display: block;
padding: var(--space-1-5) var(--space-2);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text);
border-radius: var(--radius-md);
transition: var(--transition-colors);
white-space: nowrap;
}
.site-nav__link:hover {
color: var(--color-primary-600);
background-color: var(--color-primary-50);
text-decoration: none;
}
/* Active / current page */
.site-nav__link[aria-current="page"],
.site-nav__link.is-active {
color: var(--color-primary-600);
background-color: var(--color-primary-50);
font-weight: var(--font-semibold);
}
/* Larger tap targets inside the mobile drawer */
@media (max-width: 1023px) {
.site-nav__link {
padding: var(--space-2) var(--space-2);
font-size: var(--text-base);
}
}
/* --------------------------------------------------------------------------
6c. Mobile hamburger & slide drawer
--------------------------------------------------------------------------
The .nav-toggle button opens the drawer. JS in ui.js toggles:
• aria-expanded="true/false" on .nav-toggle
• .is-open on .site-nav and .nav-overlay
The three-bar icon is drawn in pure CSS (no image, no icon font).
Bars 1 and 3 rotate 45° into an × shape when open; bar 2 fades out.
Geometry (icon is 20px tall, each bar is 2px, gaps are 7px):
Bar 1 center = 1px → translateY(+9px) reaches the 10px midpoint.
Bar 3 center = 19px → translateY(-9px) reaches the 10px midpoint.
-------------------------------------------------------------------------- */
/* Hamburger button — visible on mobile, hidden on desktop */
.nav-toggle {
display: flex;
align-items: center;
justify-content: center;
width: var(--space-5); /* 40px min touch target */
height: var(--space-5);
padding: var(--space-0-5);
border: none;
background: none;
cursor: pointer;
color: var(--color-text);
border-radius: var(--radius-md);
transition: var(--transition-colors);
flex-shrink: 0;
}
.nav-toggle:hover {
background-color: var(--color-neutral-100);
color: var(--color-primary-600);
}
@media (min-width: 1024px) {
.nav-toggle { display: none; }
}
/* Three-bar icon */
.nav-toggle__icon {
display: flex;
flex-direction: column;
justify-content: space-between;
width: var(--space-3); /* 24px */
height: var(--space-2-5); /* 20px */
pointer-events: none;
}
.nav-toggle__bar {
display: block;
width: 100%;
height: 2px;
background-color: currentColor;
border-radius: var(--radius-full);
transform-origin: center;
transition:
transform var(--duration-base) var(--ease-in-out),
opacity var(--duration-base) var(--ease-in-out);
}
/* Animate to × when open */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* --- Nav slide drawer ----------------------------------------------------- */
.site-nav {
/* Mobile: slide-in panel from the right */
position: fixed;
inset-block: 0;
right: 0;
width: var(--nav-drawer-width);
background-color: var(--color-surface);
z-index: var(--z-modal);
padding: var(--space-6) var(--space-4) var(--space-4);
overflow-y: auto;
box-shadow: var(--shadow-2xl);
/* Closed state: off-screen to the right, inaccessible to assistive tech */
transform: translateX(100%);
visibility: hidden;
transition:
transform var(--duration-slow) var(--ease-out),
visibility var(--duration-slow) step-end; /* snap hidden at end */
}
.site-nav.is-open {
transform: translateX(0);
visibility: visible;
transition:
transform var(--duration-slow) var(--ease-out),
visibility var(--duration-slow) step-start; /* snap visible at start */
}
/* Drawer header row: brand + close button (mobile only) */
.site-nav__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
/* Close (×) button inside the drawer */
.site-nav__close {
display: flex;
align-items: center;
justify-content: center;
width: var(--space-5);
height: var(--space-5);
border: none;
background: none;
cursor: pointer;
color: var(--color-text-muted);
border-radius: var(--radius-md);
font-size: var(--text-md);
transition: var(--transition-colors);
}
.site-nav__close:hover {
color: var(--color-text);
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
/* Reset drawer positioning; become an inline flex element in the header */
.site-nav {
position: static;
inset: auto;
width: auto;
background: none;
box-shadow: none;
padding: 0;
overflow: visible;
transform: none;
visibility: visible;
transition: none;
flex: 1; /* fills space between brand and actions */
display: flex;
align-items: center;
justify-content: center; /* centres nav links in the available room */
}
.site-nav__header { display: none; } /* drawer header not needed on desktop */
}
/* --------------------------------------------------------------------------
6d. Nav overlay backdrop
--------------------------------------------------------------------------
A semi-transparent scrim behind the open mobile drawer.
Clicking it closes the nav (event handled in ui.js).
Never rendered on desktop.
-------------------------------------------------------------------------- */
.nav-overlay {
position: fixed;
inset: 0;
background-color: rgb(0 0 0 / 0.50);
backdrop-filter: blur(2px); /* frosted-glass on supporting browsers */
z-index: var(--z-overlay);
/* Closed state */
opacity: 0;
visibility: hidden;
transition:
opacity var(--duration-slow) var(--ease-out),
visibility var(--duration-slow) step-end;
}
.nav-overlay.is-open {
opacity: 1;
visibility: visible;
transition:
opacity var(--duration-slow) var(--ease-out),
visibility var(--duration-slow) step-start;
}
@media (min-width: 1024px) {
.nav-overlay { display: none; } /* never shown on desktop */
}
/* ==========================================================================
7. Site Footer
==========================================================================
Dark footer present on all public-facing pages.
Multi-column on desktop, single column on mobile.
Structure:
.site-footer
.container
.site-footer__grid
.site-footer__col.site-footer__col--brand (brand + tagline)
.site-footer__col ×3 (link columns)
.site-footer__bottom
p.site-footer__copy
nav.site-footer__legal
========================================================================== */
/* --------------------------------------------------------------------------
7a. Column grid
-------------------------------------------------------------------------- */
.site-footer {
background-color: var(--color-primary-900);
color: var(--color-neutral-300);
padding-block: var(--space-10);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.site-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.site-footer__grid {
/* Brand column is twice as wide as each link column */
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-8);
}
}
/* --------------------------------------------------------------------------
7b. Individual columns
-------------------------------------------------------------------------- */
.site-footer__col {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* Brand column spans full row on mobile and the first cell on desktop */
.site-footer__col--brand {
grid-column: 1 / -1; /* full width on mobile */
}
@media (min-width: 1024px) {
.site-footer__col--brand {
grid-column: auto; /* flows normally in the 4-column desktop grid */
}
}
/* Column heading — small, uppercase, maximum contrast */
.site-footer__heading {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-neutral-0);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
margin-bottom: var(--space-0-5);
}
/* Footer nav link list */
.site-footer__links {
display: flex;
flex-direction: column;
gap: var(--space-1);
list-style: none;
padding: 0;
}
.site-footer__links a {
font-size: var(--text-sm);
color: var(--color-neutral-400);
transition: var(--transition-colors);
}
.site-footer__links a:hover {
color: var(--color-neutral-0);
text-decoration: none;
}
/* Brand tagline below logo */
.site-footer__tagline {
font-size: var(--text-sm);
color: var(--color-neutral-500);
max-width: 28ch;
line-height: var(--leading-relaxed);
}
/* Social icon row */
.site-footer__social {
display: flex;
gap: var(--space-2);
margin-top: var(--space-1);
}
.site-footer__social a {
display: flex;
align-items: center;
justify-content: center;
width: var(--space-5);
height: var(--space-5);
border-radius: var(--radius-full);
background-color: rgb(255 255 255 / 0.10);
color: var(--color-neutral-300);
transition: var(--transition-colors);
}
.site-footer__social a:hover {
background-color: var(--color-primary-500);
color: var(--color-neutral-0);
}
/* --------------------------------------------------------------------------
7c. Bottom bar
--------------------------------------------------------------------------
Copyright + legal links, separated from the column grid by a faint rule.
Stacks vertically on mobile, becomes a flex row on tablet+.
-------------------------------------------------------------------------- */
.site-footer__bottom {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-8);
padding-top: var(--space-4);
border-top: 1px solid rgb(255 255 255 / 0.12);
font-size: var(--text-sm);
color: var(--color-neutral-500);
}
@media (min-width: 768px) {
.site-footer__bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
/* Legal nav links (Privacy, Terms, Cookies) */
.site-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.site-footer__legal a {
color: var(--color-neutral-500);
transition: var(--transition-colors);
}
.site-footer__legal a:hover {
color: var(--color-neutral-300);
text-decoration: none;
}