/* ============================================================ Snabbservice — main.css Single stylesheet. No framework, no build step. Sections are numbered; search for "── N." to jump. Visual language: white dominates, pink attracts, green reassures — roughly 90/5/5. Soft hairline borders, small diffuse shadows, generous whitespace, rounded corners. Values and rationale: docs/technical/design-system.md Mobile-first throughout. That is not cosmetic: providers tap On the way / Arrived / Started / Completed from a phone while standing outside a customer's door, so those controls are sized for thumbs first and widened for desktop after. ============================================================ */ /* ── 1. THEME (set before body renders via JS) ─────── */ /* ⚠ CONTRAST — do not "simplify" these back to the brief's two pinks. #f43f7e with white text is 3.59:1 and FAILS WCAG AA at button sizes (16px/600 is NOT "large text" — that needs >=18.66px bold or >=24px). So #f43f7e is the DECORATIVE pink (borders, dots, underlines, icon strokes) and never carries small text, while --primary-fill #e11d68 (4.59:1) is the button/badge background. Same split for green. Full table: docs/technical/design-system.md §3.3 Suffixes are roles, not lightness, because lightness inverts between themes and roles don't: (none) decorative — borders, dots, icon strokes -fill a background carrying WHITE text -ink coloured TEXT on a light surface -soft a tinted background -soft-ink text sitting on -soft */ :root { color-scheme: light dark; } [data-theme="light"] { /* surfaces — white is the page AND the card */ --bg: #ffffff; --surface: #ffffff; --bg2: #fdf7f9; /* the one tinted band / hover wash */ --bg3: #fdeef4; /* deeper wash, avatar placeholder */ /* text */ --heading: #1f2937; --text: #4b5563; --text-m: #6b7280; --text-d: #9ca3af; /* lines */ --border: #f1dce5; --border-s: #f7ebf0; --border-str: #e7c9d6; /* pink */ --primary: #f43f7e; --primary-fill: #e11d68; --primary-fill-h: #c51a5c; --primary-on: #ffffff; --primary-ink: #c51a5c; --primary-soft: #fde7ef; --primary-soft-ink: #9d174d; /* status */ --green: #22c55e; --green-fill: #166534; --green-ink: #15803d; --green-soft: #dcfce7; --red: #dc2626; --red-soft: #fee2e2; --warn: #b45309; --warn-line: #f59e0b; --warn-soft: #fef3c7; --blue: #2563eb; --blue-soft: #dbeafe; --star: #f59e0b; --focus: #9d174d; --scrim: rgba(31,41,55,.38); --shadow: 0 2px 10px rgba(31,41,55,.05); } [data-theme="dark"] { /* warm plum-charcoal, never neutral grey — the same brand at night */ --bg: #171114; --surface: #201820; --bg2: #241b23; --bg3: #2e2430; --heading: #fce7f3; --text: #ddd0d7; --text-m: #b09fa9; --text-d: #8a7883; --border: #3a2c36; --border-s: #2b212a; --border-str: #4a3843; --primary: #fb7185; --primary-fill: #e11d68; --primary-fill-h: #f43f7e; --primary-on: #ffffff; --primary-ink: #fda4c0; --primary-soft: #3b1e2b; --primary-soft-ink: #fbcfe8; --green: #4ade80; --green-fill: #15803d; --green-ink: #86efac; --green-soft: #17281d; --red: #f87171; --red-soft: #2d1a1a; --warn: #fcd34d; --warn-line: #f59e0b; --warn-soft: #2b2114; --blue: #60a5fa; --blue-soft: #172138; --star: #fbbf24; --focus: #fbcfe8; --scrim: rgba(0,0,0,.62); --shadow: 0 2px 10px rgba(0,0,0,.40); } /* ── 2. SCALES (theme-independent) ────────────────────────── */ :root { --font-h: 'Poppins', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* Genuine tabular data only — booking references, timeline timestamps, cookie names. System stack, so no webfont download. Never used for labels. */ --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --r-sm: 8px; --r: 12px; /* buttons, inputs */ --r-lg: 16px; /* cards */ --r-xl: 24px; /* hero, panels */ --r-full: 999px; --sh-sm: 0 1px 2px rgba(31,41,55,.04); --sh: var(--shadow); --sh-md: 0 8px 24px rgba(31,41,55,.06); --sh-lg: 0 16px 40px rgba(31,41,55,.08); --sh-pink: 0 6px 18px rgba(225,29,104,.22); --stack: var(--s4); /* the gap between two rows of a form */ --tr-fast: 120ms cubic-bezier(.4,0,.2,1); --tr: 180ms cubic-bezier(.4,0,.2,1); --tr-slow: 280ms cubic-bezier(.4,0,.2,1); --z-nav: 40; --z-scrim: 45; --z-drawer: 46; --z-flash: 60; --z-skip: 100; --wrap: 1180px; --wrap-narrow: 760px; --ctl-h: 48px; /* minimum touch target */ --ctl-h-sm: 40px; } /* ── 2b. PHONE DENSITY ────────────────────────────────────── */ /* The spacing scale, re-cut for a screen where vertical space is the scarce resource. ONE change that reaches every section, card, stack and gap on the site, because they all measure themselves in these tokens. Only the four LARGE steps move. s1–s4 are the tight gaps — the space between a label and its input, between two chips — and shrinking those makes things look broken rather than dense. It is the 48s and 64s that were spending a third of a phone screen on nothing. --s5 24 → 20 --s7 48 → 32 --s6 32 → 24 --s8 64 → 40 Measured on the provider home page: the first card below the hero starts 474px down, and 426px after — 48px earlier at every section boundary, on every page, for four lines of CSS. ⚠ TOUCH TARGETS ARE NOT ON THIS SCALE. --ctl-h stays 48px and --ctl-h-sm stays 40px, deliberately, so nothing here can shrink a tap target. Density comes out of the space BETWEEN controls, never out of the controls. That is the rule this whole block rests on — if a future edit reaches for --s* to size a button, it is on the wrong scale. ⚠ --s* is also used for HORIZONTAL padding in places (.wrap is `0 var(--s5)`). That is a bonus, not a side effect: a narrower gutter is more line length on the screen that needs it most. */ @media (max-width: 559px) { :root { --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --stack: 10px; /* form rows sit closer than the 16px desktop gap */ } } /* ── 3. RESET ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } main { flex: 1 0 auto; } hr { border: 0; border-top: 1px solid var(--border-s); margin: var(--s5) 0; } strong, b { color: var(--heading); font-weight: 600; } /* ⚠ MUST stay. The browser's built-in [hidden] rule is `display: none` at UA-stylesheet strength, so ANY class rule that sets `display` beats it — which silently defeats the `hidden` attribute. That is exactly what happened to .nav-dropdown and .nav-drawer (both `display: flex`): they were never actually hidden, so the account menu looked permanently stuck open and the mobile drawer rendered on top of page content on desktop. Keep this rule ABOVE any component that toggles visibility via `hidden`. This now also covers every [data-panel] driven by initTabs(). */ [hidden] { display: none !important; } /* Anything a redirect or an in-page link jumps to. The navbar is position:sticky, so a bare anchor jump parks the target underneath it and you land looking at the row ABOVE the one you wanted. 88px clears it with a little air; it is the same figure § 34 uses for #cal, and apps/seo/tests.py fails the build if a new target invents its own number. */ .anchor-target { scroll-margin-top: 88px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-skip); background: var(--primary-fill); color: var(--primary-on); padding: var(--s3) var(--s4); border-radius: var(--r); font-weight: 600; } .skip-link:focus { left: var(--s2); top: var(--s2); } /* Visible keyboard focus everywhere — never remove without a replacement. --focus is chosen to stay legible on white, on --primary-soft, AND on a solid pink button. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* The brief commits to WCAG AA, so this is required, not a nicety. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── 4. DECORATION ────────────────────────────────────────── */ /* Replaces the old dotted `.grid-bg` texture, which was the single most brutalist thing on the page. Pure CSS — no assets, nothing for the prod static manifest to resolve. */ .deco { position: relative; overflow: hidden; isolation: isolate; } .deco-blob { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px); opacity: .55; } .deco-blob-a { width: 460px; height: 460px; top: -180px; right: -120px; background: var(--primary-soft); } .deco-blob-b { width: 380px; height: 380px; bottom: -220px; left: -140px; background: var(--green-soft); opacity: .38; } .deco-wash { background: linear-gradient(180deg, var(--primary-soft) 0%, var(--bg) 62%); } /* ── 5. TYPOGRAPHY ────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 700; line-height: 1.2; color: var(--heading); margin: 0 0 .5em; letter-spacing: -.01em; } .t-display { font-size: clamp(2rem, 5vw, 2.625rem); letter-spacing: -.025em; line-height: 1.12; } .t-section { font-size: clamp(1.5rem, 3.2vw, 2rem); } .t-h3 { font-size: 1.5rem; } .t-card { font-size: 1.125rem; font-family: var(--font-h); font-weight: 600; } /* Eyebrow labels — replaces the old uppercase mono treatment. The brief forbids all-uppercase text, so nothing here sets text-transform. */ .t-eyebrow { font-size: .8125rem; font-weight: 600; color: var(--primary-ink); letter-spacing: .01em; } /* Genuine monospace for genuine tabular data only. */ .t-mono { font-family: var(--font-mono); font-size: .875rem; font-variant-numeric: tabular-nums; } .t-num { font-variant-numeric: tabular-nums; } .t-muted { color: var(--text-m); } .t-dim { color: var(--text-m); font-size: .875rem; } .t-lead { font-size: 1.0625rem; color: var(--text-m); max-width: 62ch; line-height: 1.65; } .text-pink { color: var(--primary-ink); } /* ── 6. LAYOUT ────────────────────────────────────────────── */ /* Reading-width containers. These exist so page templates stop reaching for style="max-width:…", which beats every stylesheet rule including media queries — see conventions.md §7. */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); } .wrap-mid { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 var(--s5); } .wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--s5); } .wrap-tight { width: 100%; max-width: 620px; margin: 0 auto; padding: 0 var(--s5); } .section { padding: var(--s8) 0; } .section-tight { padding: var(--s6) 0; } .band { background: var(--bg2); } .stack > * + * { margin-top: var(--stack); } .row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; } .row-center { justify-content: center; } /* For a row where one item hangs something below it (a reason disclosure under a Reject button): without this the short item stretches to match the tall one. */ .row-top { align-items: flex-start; } .row-between { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; justify-content: space-between; } /* A divided list of rows inside a card — saved addresses, settings lists. */ .row-divided { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--s3) 0; border-bottom: 1px solid var(--border-s); } .row-divided:last-child { border-bottom: 0; } .grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; } @media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* Three across from the smallest screen, for short cards that are a NAME and one line of meta. A separate class from .grid on purpose: .grid is one column on a phone and that is right for the cards that carry real content — a provider card, a booking. This is for tiles. Anything marked .tile-more is advisory and goes below 560px, where a third of the width is ~100px and a category chip is wider than the card it sits in. */ .tile-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(3, 1fr); } @media (min-width: 560px) { .tile-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4); } } .tile { display: block; } .tile-name { margin: 0; text-wrap: balance; } @media (max-width: 559px) { .tile { padding: var(--s3) var(--s2); text-align: center; } .tile-more { display: none !important; } .tile-name { font-size: .8125rem; line-height: 1.25; } .tile-meta { font-size: .6875rem; margin-top: 2px; } } @media (min-width: 560px) { .tile-name { margin-top: var(--s2); } } /* Sidebar + content. Serves the search filter rail and the booking summary. */ .split { display: grid; gap: var(--s5); grid-template-columns: 1fr; } @media (min-width: 900px) { .split { grid-template-columns: 300px 1fr; align-items: start; } } @media (min-width: 900px) { .split-end { grid-template-columns: 1fr 320px; } } /* ── 7. UTILITIES ─────────────────────────────────────────── */ /* Deliberately tiny. Anything the set doesn't cover wants a real component, not another utility — see docs/technical/design-system.md §5. */ .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-8 { margin-top: var(--s2); } .mt-16 { margin-top: var(--s4); } .mt-24 { margin-top: var(--s5); } .mt-32 { margin-top: var(--s6); } .mb-16 { margin-bottom: var(--s4); } .full { width: 100%; } .hide { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Add alongside .sr-only when the hidden thing is FOCUSABLE — it comes back on screen the moment keyboard focus lands inside it, so the control is never a trap. This is why the avatar row is .sr-only and not display:none, which would drop it out of the tab order and the accessibility tree entirely. */ .sr-only.sr-focusable:focus-within { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* ── 8. ICONS ─────────────────────────────────────────────── */ /* Inline SVG from templates/includes/icon.html. Stroke-only outline set; colour comes from currentColor so an icon inherits its context — including inside a pink button and in dark mode. That is why emoji were replaced: they are full-colour glyphs that ignore currentColor. */ .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; } .ic-sm { width: 16px; height: 16px; } .ic-lg { width: 26px; height: 26px; } .ic-xl { width: 32px; height: 32px; stroke-width: 1.5; } .ic-fill { fill: currentColor; stroke: none; } .ic-badge { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); } /* ── 9. NAVBAR ────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--surface); border-bottom: 1px solid var(--border); transition: box-shadow var(--tr); } .nav.is-scrolled { box-shadow: var(--sh); } .nav-inner { max-width: var(--wrap); margin: 0 auto; padding: var(--s3) var(--s5); display: flex; align-items: center; gap: var(--s4); } .nav-logo { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-h); font-weight: 700; } .nav-logo-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: none; background: var(--primary-fill); color: var(--primary-on); border-radius: var(--r); } .nav-logo-mark .ic { width: 20px; height: 20px; } .nav-logo-text { font-size: 1.0625rem; letter-spacing: -.02em; color: var(--heading); } .nav-links { display: flex; gap: var(--s5); margin-left: var(--s3); } .nav-links a { font-size: .9375rem; font-weight: 500; color: var(--text-m); transition: color var(--tr-fast); } .nav-links a:hover { color: var(--primary-ink); } .nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); } .nav-icon-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-m); transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast); } .nav-icon-btn:hover { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary); } .nav-bell { position: relative; width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; color: var(--text-m); transition: background var(--tr-fast), color var(--tr-fast); } .nav-bell:hover { background: var(--primary-soft); color: var(--primary-ink); } .nav-badge { position: absolute; top: 5px; right: 5px; background: var(--primary-fill); color: var(--primary-on); font-size: .6875rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: var(--r-full); display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--surface); } /* The theme toggle renders BOTH glyphs and CSS picks one, driven by the attribute the guard already stamped — so the correct icon is right before main.js loads. Safe to set `display` here: neither span is toggled via the `hidden` attribute. */ [data-theme="light"] .theme-ic-sun { display: none; } [data-theme="dark"] .theme-ic-moon { display: none; } .nav-account { position: relative; } .nav-dropdown { position: absolute; right: 0; top: calc(100% + var(--s2)); min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s2); display: flex; flex-direction: column; box-shadow: var(--sh-md); opacity: 0; transform: translateY(-4px); transition: opacity var(--tr), transform var(--tr); } .nav-dropdown.is-open { opacity: 1; transform: none; } .nav-dropdown a { padding: 10px var(--s3); border-radius: var(--r-sm); font-size: .9375rem; color: var(--text); } .nav-dropdown a:hover { background: var(--primary-soft); color: var(--primary-ink); } /* ⚠ A VISIBILITY UTILITY MAY ONLY EVER HIDE. Never give one the visible state. This is the same incident as the `[hidden]` rule in § 3, between two classes instead of a class and an attribute, and it shipped: .nav-desktop { display: none; } ← here, line ~383 .btn-f, .btn-g { display: inline-flex; } ← § 10, declared LATER Equal specificity, later wins, so the Log in and Sign up buttons rendered on every phone. The navbar then overflowed the viewport and the whole document scrolled sideways and rocked on any touch — on every page of the site. `.nav-links.nav-desktop` escaped only because .nav-links happens to be declared earlier, which is luck and not a design. The queries below are inverted so these classes never set a visible display: they only remove. Off the other side of the breakpoint the element's own display applies naturally and there is no cascade race left to lose. `!important` because a hiding utility must outrank the component it is hiding — that is the whole job. Guarded by apps/seo/tests.py. */ @media (max-width: 899px) { .nav-desktop { display: none !important; } } @media (min-width: 900px) { .nav-mobile-only { display: none !important; } } /* Mobile drawer. ⚠ .nav-scrim and .nav-drawer are toggled by the `hidden` attribute. Their .is-open class animates opacity/transform ONLY — it must never set `display`, or [hidden] stops working. See §3 and conventions.md §7. */ .nav-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-scrim); opacity: 0; transition: opacity var(--tr-slow); } .nav-scrim.is-open { opacity: 1; } .nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(82vw, 320px); z-index: var(--z-drawer); background: var(--surface); border-right: 1px solid var(--border); padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s1); overflow-y: auto; box-shadow: var(--sh-lg); transform: translateX(-100%); transition: transform var(--tr-slow); } .nav-drawer.is-open { transform: none; } .nav-drawer a { padding: var(--s3) var(--s3); border-radius: var(--r-sm); font-weight: 500; color: var(--text); } .nav-drawer a:hover { background: var(--primary-soft); color: var(--primary-ink); } .drawer-rule { width: 100%; } /* ── 10. BUTTONS ──────────────────────────────────────────── */ .btn-f, .btn-g, .btn-social { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--ctl-h); padding: 12px var(--s5); border-radius: var(--r); border: 1px solid transparent; font-family: var(--font-body); font-weight: 600; font-size: .9375rem; text-align: center; line-height: 1.2; transition: background var(--tr), border-color var(--tr), color var(--tr), box-shadow var(--tr), transform var(--tr-fast); } .btn-f { background: var(--primary-fill); color: var(--primary-on); box-shadow: var(--sh-sm); } .btn-f:hover { background: var(--primary-fill-h); box-shadow: var(--sh-pink); transform: translateY(-1px); } .btn-f:active { transform: none; box-shadow: var(--sh-sm); } .btn-g { background: var(--surface); color: var(--primary-ink); border-color: var(--primary); } .btn-g:hover { background: var(--primary-soft); border-color: var(--primary-fill); transform: translateY(-1px); } .btn-g:active { transform: none; } .btn-sm { min-height: var(--ctl-h-sm); padding: 8px var(--s4); font-size: .875rem; } .btn-lg { min-height: 56px; padding: var(--s4) var(--s6); font-size: 1.0625rem; } .btn-full { width: 100%; } .btn-pill { border-radius: var(--r-full); } /* Danger is an OUTLINE button per the brief. .btn-danger-solid stays for the handful of places a filled destructive action is the honest signal. */ .btn-danger { background: var(--surface); color: var(--red); border-color: var(--red); } .btn-danger:hover { background: var(--red-soft); transform: translateY(-1px); } .btn-danger-solid { background: var(--red); color: #fff; border-color: var(--red); } .btn-ok { background: var(--green-fill); color: #fff; border-color: var(--green-fill); } .btn-ok:hover { filter: brightness(1.12); transform: translateY(-1px); } .btn-f[disabled], .btn-g[disabled], .btn-ok[disabled], .btn-danger[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .btn-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--text-m); transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast); } .btn-icon:hover { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary); } /* Switch-shaped SUBMIT button, for a one-row POST toggle inside a table. Deliberately not a checkbox: there is no form to save, so the click itself must post. State lives in aria-checked and the CSS styles on that attribute — there is no is-on class to fall out of sync with the announced state. Track and knob match .sched-slider exactly so the two switches on the provider's own pages read as one control. */ .switch-btn { position: relative; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; } .switch-btn::before { content: ""; flex: none; width: 44px; height: 26px; border-radius: var(--r-full); background: var(--bg3); border: 1px solid var(--border); transition: background var(--tr), border-color var(--tr); } .switch-btn::after { content: ""; position: absolute; left: 3px; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transform: translateY(-50%); transition: transform var(--tr); } /* Green only in the on state — this is an availability signal, which is what green is reserved for. */ .switch-btn[aria-checked="true"]::before { background: var(--green); border-color: var(--green); } .switch-btn[aria-checked="true"]::after { transform: translateY(-50%) translateX(18px); } .switch-btn:hover::before { border-color: var(--text-d); } .switch-btn:focus-visible { outline: none; } .switch-btn:focus-visible::before { outline: 3px solid var(--focus); outline-offset: 2px; } .switch-btn[disabled] { opacity: .45; cursor: not-allowed; } /* Provider job-action buttons: big thumb targets, stacked on phones. */ .job-actions { display: grid; gap: var(--s3); grid-template-columns: 1fr; } .job-actions .btn-f, .job-actions .btn-g, .job-actions .btn-ok, .job-actions .btn-danger { min-height: 56px; font-size: 1.0625rem; } @media (min-width: 640px) { .job-actions { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } } /* ── 11. CHIPS / BADGES ───────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--s3); border-radius: var(--r-full); font-size: .8125rem; font-weight: 600; border: 1px solid var(--border); background: var(--bg2); color: var(--text-m); line-height: 1.4; } .chip .ic { width: 14px; height: 14px; } .chip-green { background: var(--green-soft); border-color: var(--green); color: var(--green-ink); } .chip-orange { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } .chip-red { background: var(--red-soft); border-color: var(--red); color: var(--red); } .chip-blue { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); } .chip-pink { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-soft-ink); } .chip-verified { background: var(--green-fill); border-color: var(--green-fill); color: #fff; } .chip-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; } /* ── 12. CARDS ────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh); } .card-flat { background: var(--bg2); box-shadow: none; } .card-tint { background: var(--primary-soft); border-color: var(--primary); } .card-warn { background: var(--warn-soft); border-color: var(--warn-line); } .card-pad-sm { padding: var(--s4); } .card-link { display: block; transition: transform var(--tr-slow), box-shadow var(--tr-slow), border-color var(--tr-slow); } .card-link:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--primary); } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--sh); } .stat-card .n { font-family: var(--font-h); font-weight: 700; font-size: 1.75rem; color: var(--heading); font-variant-numeric: tabular-nums; } .stat-card .l { font-size: .8125rem; color: var(--text-m); } /* Call-to-action band: copy on the left, button on the right, stacking on phones. Replaces an inline flex:1 / min-width pair on the home page. */ .cta-copy { flex: 1; min-width: 260px; } /* ── 13. PROVIDER CARD ────────────────────────────────────── */ /* Bigger than a list row on purpose: people book people, so the face is the first thing that has to land. */ .pcard { display: flex; gap: var(--s3); align-items: flex-start; } .pcard-media { flex: none; width: 96px; } .pcard-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border); background: var(--primary-soft); color: var(--primary-ink); display: grid; place-items: center; font-family: var(--font-h); font-weight: 600; font-size: 2rem; } .pcard-avatar-lg { width: 120px; height: 120px; font-size: 2.5rem; } .pcard-body { flex: 1; min-width: 0; } /* ⚠ The name, the price and the heart share ONE row, in the flow. They used to compete for the same corner — .pcard-save was absolutely positioned top/right and the price block was rendered into the same space, so a 40px circle sat on top of "25 kr" and only the word "from" escaped. Two things wanting one corner is not a nudge problem. */ .pcard-head { display: flex; align-items: flex-start; gap: var(--s2); } .pcard-name { flex: 1; min-width: 0; } .pcard-name h3 { text-wrap: balance; } .pcard-price { font-family: var(--font-h); font-weight: 700; font-size: 1.0625rem; color: var(--heading); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; line-height: 1.3; } .pcard-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .6875rem; color: var(--text-m); } .pcard-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: .8125rem; color: var(--text-m); align-items: center; } .pcard-meta .ic { width: 15px; height: 15px; color: var(--primary); } /* ⚠ A 4px gap and a tighter chip, so a row FILLS before it wraps. With .row's --s3 gap and full-size chips, five languages in a narrow column came out one per row — five rows to say four words. */ .pcard-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .chip-sm { padding: 1px 8px; font-size: .6875rem; } /* ⚠ One line, always. "Next: Tue 11 Aug, 04:04" wrapped after the comma, so the card stated a date and then a time as if they were separate facts. */ .pcard-next { font-size: .75rem; color: var(--text-m); white-space: nowrap; } /* Portfolio thumbnails under the avatar, filling the column the face leaves empty. Two across at 96px; a third row appears only if there is work to show. DECORATION, not a control: the card is already one big link to the profile, and a second tap target inside it is how people open the wrong thing. The point is only "this person has photographed their work", which is the single most common reason someone opens a profile at all. */ .pcard-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin-top: 6px; pointer-events: none; } .pcard-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-s); background: var(--bg2); } .pcard-wrap { position: relative; } .pcard-save { flex: none; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; color: var(--text-d); transition: color var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast); } .pcard-save:hover { color: var(--primary-fill); border-color: var(--primary); } .pcard-save.is-on { color: var(--primary-fill); border-color: var(--primary); } .pcard-save:active { transform: scale(1.15); } /* ⚠ The narrow column WAS the bug behind both the wrapping languages and the split date. At 360px a 96px avatar plus a third price column left the body ~135px, which is one chip wide — so the fix is width, not white-space. 64px here buys the body ~65px back, enough for three language chips or a whole date on one line. */ @media (max-width: 559px) { .pcard-media { width: 64px; } .pcard-avatar { width: 64px; height: 64px; font-size: 1.5rem; border-width: 2px; } .pcard-thumbs { gap: 2px; } .pcard-price { font-size: .9375rem; } .pcard-save { width: 32px; height: 32px; } .pcard-save .ic { width: 16px; height: 16px; } } /* ── 13b. PROFILE IDENTITY CARD ───────────────────────────── */ /* The pencil is a