/* --- Customer-facing base --- Design direction: a trustworthy vault for receipts/warranties, not a marketing site or a playful consumer app. Deep navy carries trust and brand recognition in the header on every visit, unchanged across light/dark; a single consistent indigo accent (not the old day-of-year rotation) carries every interactive/primary-action moment, in the same spirit as the modern, confident SaaS look of trafex.io / login.properit.se / stripe.com. Plain confident sans-serif throughout, thin borders over heavy shadows, generous whitespace, solid (non-gradient) buttons. All colour lives in tokens below so the whole site — including this file's own later rules — only ever reads var(--x); the light block is the default, :root[data-theme="dark"] is an explicit user choice (persisted in localStorage, see theme-toggle.js), and the prefers-color-scheme block covers "auto" (no explicit choice stored) by mirroring the same dark values whenever the OS itself is in dark mode. */ /* --- Startsida-only typeface (STARTSIDA-SPEC.md) — self-hosted, not loaded from Google Fonts: this app has no third-party network dependency anywhere else (the wordmark logo is outlined to vector paths for the same reason, see wwwroot/img/wordmark-*.svg), so a webfont request would have been a new external call and a new CSP surface for one page. Files are subsetted to just the Latin + Swedish/Nordic characters actually used (å/ä/ö/Å/Ä/Ö etc.), ~7-8KB each. Scoped to body.startsida-fonts (set only by Index.cshtml) — every other page keeps the app's own system font stack (Peter, 2026-08-16: "ser inte ut som referensen", confirmed the gap was the typeface, chose self-hosting over Google Fonts CDN or staying on system fonts). */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/archivo-400.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/archivo-500.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/archivo-600.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/archivo-700.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/archivo-800.woff2") format("woff2"); } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dm-mono-400.woff2") format("woff2"); } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/dm-mono-500.woff2") format("woff2"); } body.startsida-fonts { font-family: "Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* Reserves the scrollbar's width on every page load, whether or not that page's content is actually tall enough to need one — without this, a page short enough to fit on screen (no scrollbar) renders its centered content ~7-8px wider than a page that scrolls (scrollbar takes space from the viewport), which visibly shifts the header sideways every time navigation moves between a scrolling and a non-scrolling page (e.g. "Add receipt" → "My account"). */ html { scrollbar-gutter: stable; } :root { /* Warm cream/paper family, not cool blue-gray — see DESIGNGRANSKNING.md #1. A cold canvas made the navy read as muddy and the category dots read as louder than intended; every neutral below is warm-grey (brown undertone), never blue-grey. */ --ink: #12143a; --ink-muted: #7c7a6c; --hairline: #e6e2d6; --surface: #ffffff; --surface-alt: #f2efe5; --border-inner: #f0ede3; --canvas: #faf8f3; --navy: #12143a; /* Was #0a0b28 — darkening an already near-black colour further is imperceptible (Peter, 2026-08-28: "'Lägg till kvitto' ... har inte heller hover effekt"). Lightening instead, same direction dark theme's own --navy-hover already takes and to the identical value, gives a hover state that's actually visible against both --navy itself and the page behind it. */ --navy-hover: #1f3563; /* Uppercase mono labels (stat-label, badge, etc.) — one tick lighter/warmer than --ink-muted's general secondary-text role, so labels recede a bit further than body-weight muted text. */ --text-label: #8a8878; /* Between --ink and --ink-muted — for content that's more prominent than a caption but shouldn't read as primary text either (category chips, etc.). */ --text-2: #4a4838; /* Zero-value numbers and inactive icon states — reads as "there's genuinely nothing here" (see .stat-value-zero), distinct from --ink-muted's "there's data, it's just not primary". */ --muted-value: #a3a091; /* Sampled from the real logo (symbol-reversed-white.svg's dot) rather than an arbitrary indigo — see logo-assets/. --accent-hover keeps the same darken ratio the old #4f46e5 -> #4338ca pair used (~85% of base). */ --accent: #5b5fe0; --accent-hover: #4548b8; --accent-ink: #ffffff; /* Same indigo value in both themes, unlike --accent (which pales for dark-mode legibility as inline text/focus rings) — for a FILLED button that needs to stay a vivid "press me" pop against a dark page rather than fade into a pale-lavender fill. See .receipts-add-button's dark-theme override. */ --accent-solid: #5b5fe0; --accent-solid-hover: #4548b8; /* Every primary button's colour (generic button/input[submit]/a.auth-submit, see that rule's own comment) — navy here, --accent-solid in dark mode (see :root[data-theme="dark"] below), same split .receipts-add-button already used. A token, not a per-theme selector override, specifically so the theme switch never has to raise that rule's specificity — see the rule's own comment for why that mattered (Peter, 2026-08-29). */ --primary-bg: var(--navy); --primary-bg-hover: var(--navy-hover); --primary-ink: #ffffff; --active-bg: var(--navy); --active-ink: #ffffff; --active-overlay: rgba(255, 255, 255, 0.25); --danger: #b3261e; --danger-bg: #fdf1f0; --danger-border: #f0cfc9; --success: #15803d; --success-bg: #f0fdf4; --success-border: #bbf7d0; --shadow-rgb: 18, 33, 59; --overlay-weak: rgba(18, 33, 59, 0.06); --overlay-medium: rgba(18, 33, 59, 0.08); --focus-ring: rgba(88, 94, 221, 0.22); /* List-row hover — one tick darker than --surface-alt/--canvas, used where a row needs to read as hoverable inside an already-tinted panel (space switcher, quick-jump — see design_handoff_spaces §4) rather than the plain --canvas most hover states already use. */ --list-hover: #f4f2ec; /* Pending/attention notice — a Viewer-role banner or a "Väntar" invite chip (design_handoff_spaces §4's "Varning/observera"). Deliberately amber, not --danger — nothing is wrong, it's just informational/waiting. */ --pending-border: #b9a24a; --pending-bg: #f7f0d8; --pending-ink: #7a6417; color-scheme: light; /* Landing page's three dark-surface levels (STARTSIDA-SPEC.md "Tre mörka ytnivåer, aldrig en") — the deadline band, the cards inside it, and the deeper Pris/CTA band all need to read as distinct depths, not one flat navy. */ --landing-band-bg: #12143a; --landing-band-card-bg: #1d2150; --landing-band-card-border: #2f3369; --landing-step-border: #dfdaca; /* The footer is the one surface that never flips with the theme — always the page's deepest level, page < .landing-cta-band < footer. Fixed literals instead of --ink/--ink-muted/etc (which are dark-on-light in light mode and would be invisible here), defined once at :root rather than scoped to .site-footer so nothing needs re-deriving them per theme block — that's the actual point of moving them up here (Claude Design, 2026-08-20). */ --footer-ink: #faf8f3; --footer-ink-muted: rgba(250, 248, 243, 0.72); --footer-ink-faint: rgba(250, 248, 243, 0.55); --footer-hairline: rgba(250, 248, 243, 0.12); /* Rceep Plus's tier colour in the plan chip/legend (Kontoadministration §5a/§5c, Claude Design 2026-08-28) — Free/Spaces/Custom all already map onto existing tokens (--surface-alt/--accent/ --ink respectively), Plus's olive-gold is the one genuinely new hue in that four-tier legend. */ --tier-plus-bg: #8a7a3f; --tier-plus-ink: #ffffff; } :root[data-theme="dark"] { --ink: #faf8f3; --ink-muted: rgba(250, 248, 243, 0.62); --hairline: rgba(250, 248, 243, 0.1); --surface: #1a1d45; --surface-alt: rgba(250, 248, 243, 0.08); --border-inner: rgba(250, 248, 243, 0.06); --canvas: #0f1330; --navy-hover: #1f3563; --text-label: rgba(250, 248, 243, 0.48); --text-2: rgba(250, 248, 243, 0.78); --muted-value: rgba(250, 248, 243, 0.34); /* Same logo-sampled hue as the light theme (symbol-primary-navy.svg's dot) — already almost identical to the old #818cf8, which is why dark mode barely changes with this swap. */ --accent: #a9abf5; --accent-hover: #c3c4f8; --accent-ink: #12143a; /* --accent-solid itself doesn't change between themes (see its own token comment) — only which token --primary-bg points at does, navy → the still-vivid accent-solid. */ --primary-bg: var(--accent-solid); --primary-bg-hover: var(--accent-solid-hover); --primary-ink: var(--ink); --active-bg: var(--accent); --active-ink: var(--accent-ink); --active-overlay: rgba(20, 18, 58, 0.18); --danger: #ff8783; --danger-bg: #34191b; --danger-border: #5c2b2a; --success: #6ee0a8; --success-bg: #10321f; --success-border: #1f5138; --shadow-rgb: 0, 0, 0; --overlay-weak: rgba(255, 255, 255, 0.06); --overlay-medium: rgba(255, 255, 255, 0.1); --focus-ring: rgba(126, 139, 255, 0.32); --list-hover: rgba(250, 248, 243, 0.06); --pending-border: #a68a3a; --pending-bg: #3a3116; --pending-ink: #e8d488; color-scheme: dark; --landing-band-bg: #171a3c; --landing-band-card-bg: #1f2350; --landing-band-card-border: #2e3268; --landing-step-border: var(--hairline); --tier-plus-bg: #b39c52; --tier-plus-ink: #1f1a0a; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ink: #faf8f3; --ink-muted: rgba(250, 248, 243, 0.62); --hairline: rgba(250, 248, 243, 0.1); --surface: #1a1d45; --surface-alt: rgba(250, 248, 243, 0.08); --border-inner: rgba(250, 248, 243, 0.06); --canvas: #0f1330; --navy-hover: #1f3563; --text-label: rgba(250, 248, 243, 0.48); --text-2: rgba(250, 248, 243, 0.78); --muted-value: rgba(250, 248, 243, 0.34); --accent: #a9abf5; --accent-hover: #c3c4f8; --accent-ink: #12143a; --primary-bg: var(--accent-solid); --primary-bg-hover: var(--accent-solid-hover); --primary-ink: var(--ink); --active-bg: var(--accent); --active-ink: var(--accent-ink); --danger: #ff8783; --danger-bg: #34191b; --danger-border: #5c2b2a; --success: #6ee0a8; --success-bg: #10321f; --success-border: #1f5138; --shadow-rgb: 0, 0, 0; --overlay-weak: rgba(255, 255, 255, 0.06); --overlay-medium: rgba(255, 255, 255, 0.1); --focus-ring: rgba(126, 139, 255, 0.32); --list-hover: rgba(250, 248, 243, 0.06); --pending-border: #a68a3a; --pending-bg: #3a3116; --pending-ink: #e8d488; color-scheme: dark; --landing-band-bg: #171a3c; --landing-band-card-bg: #1f2350; --landing-band-card-border: #2e3268; --landing-step-border: var(--hairline); --tier-plus-bg: #b39c52; --tier-plus-ink: #1f1a0a; } } /* Never removed without a replacement (DESIGNGRANSKNING.md #29/#60) — the browser's own default focus ring differs wildly across engines and themes; this one is themed, consistent, and always visible. :focus-visible (not :focus) so it only shows for keyboard/assistive-tech navigation, not every mouse click. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* One place to name the two easing curves the login-transition already established (DESIGNGRANSKNING.md #31), so any future motion in the app reaches for these instead of picking a new curve each time. Not applied broadly yet — almost nothing in the app animates beyond the login transition and a couple of hover fades, which are short/subtle enough that plain `ease` is indistinguishable from a custom curve. */ :root { --ease-in: cubic-bezier(0.33, 1, 0.68, 1); --ease-out: cubic-bezier(0.6, 0, 0.3, 1); } /* A global kill switch (DESIGNGRANSKNING.md #31) — every transition/animation in the app collapses to effectively-instant for anyone with the OS-level "reduce motion" preference set, rather than relying on each individual animated component remembering to check for it. The login-transition and queue-spinner already had their own explicit reduced-motion handling before this existed (see their own @media blocks) — this is the broader safety net underneath those specific cases, not a replacement for them. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Un-set, body text inherited the browser's ~1.15-1.2 UA default — comfortable for a single line of UI chrome, but cramped once actual paragraphs (FAQ answers, privacy policy, auth subtext) run past one line. 1.55 is the same reading-comfort figure most type systems settle on for body copy; headings override back down to something tighter below, since a big bold line doesn't need the same breathing room. */ line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--ink); background: var(--canvas); transition: background-color 0.15s ease, color 0.15s ease; /* Digits keep a fixed width everywhere — amounts, dates, counters — so a column of numbers never jitters sideways as its content changes (DESIGNGRANSKNING.md #32). Harmless on non-numeric text; only affects how digit glyphs themselves are drawn. */ font-variant-numeric: tabular-nums; } /* Marketing pages (Index landing + Faq/Privacy/Cookies — set via ViewData["Marketing"], see _Layout.cshtml) share the exact same --canvas/--surface tokens the app uses now, not a separate colder gradient — the whole point of Fas 1's palette work was one consistent product, and a visibly different "storefront" mood undid that the moment someone logged in (DESIGNGRANSKNING-2.md #39, #80). */ body.marketing-bg { min-height: 100dvh; background: var(--canvas); } .marketing-bg .card { box-shadow: 0 16px 40px -24px rgba(var(--shadow-rgb), 0.4); } /* Auth pages (login/register/forgot-reset password) vertically centre .auth-card between the header and footer instead of leaving it stranded in the top third with empty space below (DESIGNGRANSKNING-PUBLIK.md #48) — flex on body rather than a fixed min-height calc, so it still centres correctly regardless of exactly how tall the header/footer end up being. */ body.auth-page { display: flex; flex-direction: column; min-height: 100dvh; } body.auth-page .hero, body.auth-page .site-footer { flex-shrink: 0; } body.auth-page main.page { flex: 1; display: flex; align-items: center; justify-content: center; } /* --- Landing page — rebuilt per design_handoff_startsida/STARTSIDA-SPEC.md (2026-08-16). Same asymmetric-grid section rhythm and three-value vertical padding (6rem/6.5rem/6.75rem ≈ the spec's 96/104/108px) as the reference, adapted to this codebase's own tokens (they already map 1:1 to the spec's — --navy is --ink, --cream is --canvas, --accent is --accent, etc.) and its existing system-font stack rather than loading Archivo/DM Mono from Google Fonts: this app has no external font dependency anywhere else (the wordmark itself is outlined to vector paths for the same reason, see wwwroot/img/wordmark-*.svg), and a marketing-only web-font request would be a new CSP/privacy surface for one page. Where the spec calls for "DM Mono", the existing ui-monospace numeric stack (already used for amounts/badges elsewhere) stands in instead. Each section breaks out of .page's max-width via the same negative-margin full-bleed technique .hero (the header) uses one level up, then re-applies its own 1320px inner width to match the rest of the site (not the spec's 1200px, since .page/.hero-inner/.site-footer-inner already settled on 1320px — a landing page narrower than its own header/footer would look accidental). */ .landing-section-bleed { width: 100vw; margin-left: calc(50% - 50vw); } .landing-inner { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; } /* --- 1. Hero — grid 1.05fr/0.95fr, copy left, product-preview card right (spec §Hero). --- */ .landing-hero { padding: 4rem 0 6rem; } .landing-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; align-items: center; } .landing-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } .landing-eyebrow { font-family: "DM Mono", ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-label); } .landing-eyebrow-dark { /* Used on the two dark bands only ("Hela poängen"/deadline band, "Pris"/cta band), which never flip with the theme — var(--accent) paled to a barely-there lavender in light mode against that fixed-dark background (3.0:1, below AA), because it's tuned for a light *surface* like everywhere else --accent is used. Hardcoded to the dark-theme accent value unconditionally instead (Peter, 2026-08-20). */ color: #a9abf5; } .landing-title { margin: 0; /* Fixed 78px per spec, not a vw-scaled clamp() — Archivo 800 at full size is what gives the hero its scale; capping it early made it read as a generic headline (Peter, 2026-08-16). */ font-size: 4.875rem; font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; } .landing-subtitle { margin: 0; max-width: 30em; font-size: 1.1875rem; line-height: 1.55; color: var(--text-2); text-wrap: pretty; } .landing-cta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.25rem; } .landing-cta a.auth-submit, .landing-cta a.secondary-button { width: auto; min-width: 160px; } .landing-trust-row { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; padding-top: 0.4rem; font-size: 0.8125rem; color: var(--text-label); } .landing-trust-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-value); } /* --- Hero product-preview card — a static illustration of the real list view (DESIGNGRANSKNING-PUBLIK.md #36), reusing the actual .status-badge chips from Mina kvitton rather than a bespoke pill, so the one piece of "product" shown on the homepage matches what a new user will actually see. Flagged as illustrative (aria-hidden), not presented as a screenshot: swap for a real one once it exists. The offset cream shape behind it is the spec's only decorative flourish (§Hero) — everywhere else color carries meaning, not ornament. */ .landing-hero-preview-wrap { position: relative; } .landing-hero-preview-shape { position: absolute; inset: 1.75rem -1.25rem -1.75rem 1.25rem; border-radius: 20px; background: var(--surface-alt); } .landing-preview { position: relative; border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface); box-shadow: 0 24px 60px -28px rgba(var(--shadow-rgb), 0.28); overflow: hidden; } .landing-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--border-inner); font-weight: 700; font-size: 0.9375rem; } .landing-preview-header-note { font-family: "DM Mono", ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-label); font-weight: 500; } /* Decorative-only echo of the real countdown row (ReceiptsCountdown.cshtml's .countdown-row-*) — deliberately its own rule set, not a reuse, so this card never inherits the real view's layout changes. Only one row carries --countdown-row-urgent; the other two keep their own protection- type colour (warranty/statutory), same "urgency beats type, but only when it's actually urgent" split the real view uses — three orange rows with no type label would lose the "three different clocks" argument this page exists to make. */ .landing-countdown-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.35rem; border-bottom: 1px solid var(--border-inner); } .landing-countdown-row:last-of-type { border-bottom: none; } .landing-countdown-badge { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; font-family: "DM Mono", ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.6875rem; font-weight: 600; color: var(--countdown-openpurchase); background: var(--countdown-openpurchase-bg); } .landing-countdown-row-warranty .landing-countdown-badge { color: var(--countdown-warranty); background: var(--countdown-warranty-bg); } .landing-countdown-row-statutory .landing-countdown-badge { color: var(--countdown-statutory); background: var(--countdown-statutory-bg); } .landing-countdown-row-urgent .landing-countdown-badge { color: var(--countdown-urgent); background: color-mix(in srgb, var(--countdown-urgent) 14%, var(--surface)); } .landing-countdown-main { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; flex: 1 1 auto; } .landing-countdown-merchant { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .landing-countdown-sub { font-size: 0.75rem; color: var(--text-2); } .landing-countdown-progress { display: flex; flex-direction: column; gap: 0.3rem; } .landing-countdown-bar { height: 5px; border-radius: 3px; background: var(--surface-alt); overflow: hidden; } .landing-countdown-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--countdown-openpurchase); } .landing-countdown-row-warranty .landing-countdown-bar-fill { background: var(--countdown-warranty); } .landing-countdown-row-statutory .landing-countdown-bar-fill { background: var(--countdown-statutory); } .landing-countdown-row-urgent .landing-countdown-bar-fill { background: var(--countdown-urgent); } /* Two fixed widths for three fixed decorative rows — a discrete class per value rather than an inline style="width: X%", since the response's CSP is style-src 'self' with no unsafe-inline (see Program.cs) and silently drops inline style="" attributes entirely, no console error. Width = share of the window still remaining (daysLeft / totalDays, "andel kvar" — not andel förbrukad), same semantics the real view uses — an empty bar means "almost expired", not "urgent". The hero previously filled these in the opposite direction (an almost-empty bar for a row with plenty of time left), teaching visitors the wrong reading before they ever open the app. 5 of 14 dagar and 8 of 24 mån both round to 35%; 2 of 3 år rounds to 65%. */ .landing-countdown-bar-fill-35 { width: 35%; } .landing-countdown-bar-fill-65 { width: 65%; } .landing-countdown-days { font-family: "DM Mono", ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.75rem; color: var(--text-2); } .landing-countdown-row-urgent .landing-countdown-days { color: var(--countdown-urgent); } .landing-preview-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.35rem; font-size: 0.75rem; color: var(--muted-value); } .landing-preview-footer a { font-weight: 600; } /* --- 2. Deadline band — the app's one dark content section and its strongest argument (spec §Deadline-sektion): three "clocks" (öppet köp / omvänd bevisbörda / reklamationsrätt), each a different countdown, which is the whole reason the product exists. --- */ .landing-deadline-band { background: var(--landing-band-bg); color: #faf8f3; } .landing-deadline-inner { /* padding-top/bottom, not shorthand "padding: 6rem 0" — that shorthand set left/right to 0 too, which silently overwrote .landing-inner's own horizontal padding on this same element (equal specificity, later rule in the file wins outright, CSS doesn't merge the two). Desktop hid it (max-width+auto-margins still centered the box), mobile didn't — content ran edge to edge with no margin at all (Peter, 2026-08-16). Same fix applied to every .landing-inner-combined rule below. */ padding-top: 6rem; padding-bottom: 6rem; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; align-items: start; } .landing-deadline-copy { display: flex; flex-direction: column; gap: 1.35rem; } .landing-deadline-copy h2 { margin: 0; color: #faf8f3; font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.08; letter-spacing: -0.03em; } .landing-deadline-copy p { margin: 0; max-width: 34em; font-size: 1.0625rem; line-height: 1.6; color: rgba(250, 248, 243, 0.66); } .landing-clocks { display: flex; flex-direction: column; gap: 0.875rem; } .landing-clock { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 1.65rem; border: 1px solid var(--landing-band-card-border); border-radius: 15px; background: var(--landing-band-card-bg); } .landing-clock-ring { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-family: "DM Mono", ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.8125rem; font-weight: 500; } /* Decreasing ring brightness per clock (spec: #A9ABF5 / #8A8DC8 / #6B6FA8) — öppet köp reads as the most urgent/vivid, reklamationsrätt (the longest, least time-pressured window) the quietest, against the --landing-band-card-bg surface behind them. */ .landing-clock:nth-of-type(1) .landing-clock-ring { color: #a9abf5; } .landing-clock:nth-of-type(2) .landing-clock-ring { color: #8a8dc8; } .landing-clock:nth-of-type(3) .landing-clock-ring { color: #6b6fa8; } .landing-clock-copy { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .landing-clock-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: #faf8f3; } .landing-clock-body { font-size: 0.875rem; line-height: 1.5; color: rgba(250, 248, 243, 0.66); } /* --- 3. Så funkar det — three step cards, big muted index number (spec §Så funkar det). --- */ .landing-steps-section { padding-top: 6rem; padding-bottom: 6rem; } .landing-steps-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; margin-bottom: 2.5rem; } .landing-steps-heading-row h2 { margin: 0; max-width: 12em; } .landing-steps-tagline { font-size: 1rem; color: var(--text-label); max-width: 26em; text-align: right; } .landing-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .landing-step { min-width: 0; border: 1px solid var(--landing-step-border); border-top: 3px solid var(--ink); border-radius: 3px 3px 17px 17px; background: var(--surface); box-shadow: 0 18px 40px -30px rgba(18, 20, 58, 0.35); padding: 2rem 1.75rem 2.25rem; display: flex; flex-direction: column; gap: 0.9rem; min-height: 250px; } /* A small mono eyebrow-style label, not a big pale digit — a large numeral read as decorative filler rather than a step marker (STARTSIDA-SPEC.md "Avvikelser" #2). */ .landing-step-number { font-family: "DM Mono", ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.9375rem; letter-spacing: 0.12em; font-weight: 500; line-height: 1; color: var(--accent); } .landing-step h3 { margin: 0; font-size: 1.375rem; letter-spacing: -0.01em; color: var(--ink); } .landing-step p { margin: 0; color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; } /* --- 3b. Presentkort — a small standalone strip, one flex row (icon + copy), not a grid of cards like the trust-grid below — deliberately lighter weight than the sections either side. --- */ .landing-giftcard-band { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface-alt); } .landing-giftcard-inner { padding-top: 3.25rem; padding-bottom: 3.25rem; display: flex; align-items: center; gap: 2rem; } .landing-giftcard-icon { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); border: 1px solid var(--hairline); background: var(--surface); } .landing-giftcard-copy { display: flex; flex-direction: column; gap: 0.5rem; max-width: 42em; } .landing-giftcard-copy h2 { margin: 0; font-size: clamp(1.375rem, 1.8vw, 1.625rem); letter-spacing: -0.02em; } .landing-giftcard-copy p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-2); } /* --- 4. Integritet och säkerhet — cream-alt band, lines above/below (spec §5). --- */ .landing-privacy-band { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface-alt); } .landing-privacy-inner { padding-top: 5.5rem; padding-bottom: 5.5rem; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4.5rem; align-items: start; } .landing-privacy-copy { display: flex; flex-direction: column; gap: 1.1rem; } .landing-privacy-copy h2 { margin: 0; font-size: clamp(1.6rem, 2.3vw, 2rem); } .landing-privacy-copy p { margin: 0; max-width: 30em; font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); } .landing-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .landing-trust-grid > div { min-width: 0; padding-top: 1.1rem; border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: 0.5rem; } .landing-trust-grid h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; } .landing-trust-grid p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--text-2); max-width: none; text-wrap: pretty; } /* --- 5. Vanliga frågor — grid 0.8fr/1.2fr, accordion right (spec §6). Kept as native
/ rather than a bespoke JS accordion — every other disclosure control in this app (overflow menus, the "Rätta uppgifter" panel) already uses the same no-JS-required pattern, and a one-off custom accordion just for this page would be the odd one out. --- */ .landing-faq-section { padding-top: 6rem; padding-bottom: 6rem; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4.5rem; align-items: start; } /* Not a lone heading in an empty column (spec "Avvikelser" #3) — eyebrow + H2 + a line of support copy with a real contact address. Was position:sticky ("pinned in view as the visitor scrolls through the questions") — dropped: it read as broken rather than deliberate ("skrollar inte som övriga texter", Peter, 2026-08-16), and pinning a short three-line block while a much taller accordion scrolls past it isn't worth that confusion for what's a minor polish detail. */ .landing-faq-copy { display: flex; flex-direction: column; gap: 1rem; } .landing-faq-section h2 { margin: 0; } .landing-faq-copy p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); max-width: 26em; } .landing-faq-list { border-top: 1px solid var(--hairline); } .landing-faq-item { border-bottom: 1px solid var(--hairline); } .landing-faq-item summary { padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.015em; color: var(--ink); } .landing-faq-item summary::-webkit-details-marker { display: none; } .landing-faq-sign { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong, var(--hairline)); display: flex; align-items: center; justify-content: center; font-size: 1.0625rem; color: var(--text-2); } .landing-faq-item[open] .landing-faq-sign { transform: rotate(45deg); } .landing-faq-item p { margin: 0; padding: 0 3.5rem 1.6rem 0; font-size: 1rem; line-height: 1.65; color: var(--text-2); max-width: none; text-wrap: pretty; } /* --- 6. Pris + CTA — merged into one dark band, not two sections (spec §7 — "de ska inte vara två sektioner"). --- */ .landing-cta-band { /* Three surface levels, footer always deepest: page (--canvas) < this band (--landing-band-bg, theme-flipping) < footer (#08091a, fixed — see .site-footer). Was --landing-deep-bg here too — in dark mode that's darker than the page itself, so the band read as a hole punched in the page instead of a block; it also matched the footer's own background near-exactly in light mode (#12143a vs #0c0e24 read as one flat dark field, not two levels — Peter, 2026-08-20), which is why the footer's tone was pushed further down instead of the two sharing a token. */ background: var(--landing-band-bg); color: #faf8f3; } /* A lighter band against a dark page needs an edge or it reads as a light leak — light mode doesn't need this (dark-on-light already has a natural edge). */ :root[data-theme="dark"] .landing-cta-band { border-top: 1px solid var(--landing-band-card-border); border-bottom: 1px solid var(--landing-band-card-border); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .landing-cta-band { border-top: 1px solid var(--landing-band-card-border); border-bottom: 1px solid var(--landing-band-card-border); } } .landing-pricing-inner { padding-top: 5.5rem; padding-bottom: 5.5rem; } .landing-pricing-heading { display: flex; flex-direction: column; gap: 1rem; max-width: 38em; margin: 0 auto 3rem; text-align: center; } .landing-pricing-heading h2 { margin: 0; color: #faf8f3; font-size: clamp(1.75rem, 2.6vw, 2.375rem); letter-spacing: -0.03em; } .landing-pricing-heading p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: rgba(250, 248, 243, 0.66); } .landing-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; } .landing-pricing-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem 1.5rem; border: 1px solid var(--landing-band-card-border); border-radius: 15px; background: var(--landing-band-card-bg); } /* The one self-service tier meant to catch the most eyes — same accent-bordered "this one" pattern a pricing table needs somewhere, applied to Rceep Plus specifically since it's the mass-market upsell. Free/Spaces/Custom all look identical to each other, deliberately not competing for the same attention. */ .landing-pricing-card-highlight { border-color: #a9abf5; background: #232766; } .landing-pricing-card-badge { position: absolute; top: -0.7rem; left: 1.5rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: #a9abf5; color: #12143a; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .landing-pricing-card-name { font-size: 0.9375rem; font-weight: 700; color: #faf8f3; } .landing-pricing-card-price { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: #faf8f3; } .landing-pricing-card-price-unit { font-size: 1rem; font-weight: 500; color: rgba(250, 248, 243, 0.66); } .landing-pricing-card-price-monthly { font-size: 0.875rem; font-weight: 500; color: rgba(250, 248, 243, 0.5); } .landing-pricing-card-price-billing { margin-top: -0.7rem; font-size: 0.75rem; color: rgba(250, 248, 243, 0.5); } .landing-pricing-card-price-note { margin-top: -0.65rem; font-size: 0.8125rem; color: rgba(250, 248, 243, 0.62); } .landing-pricing-card-features { flex: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; } .landing-pricing-card-features li { padding-left: 1.35rem; position: relative; font-size: 0.875rem; line-height: 1.45; color: rgba(250, 248, 243, 0.82); } .landing-pricing-card-features li::before { content: "✓"; position: absolute; left: 0; color: #a9abf5; font-weight: 700; } .landing-pricing-card-cta { padding: 0.85rem 1.5rem; border-radius: 10px; background: transparent; border: 1px solid rgba(250, 248, 243, 0.3); color: #faf8f3; font-size: 0.9375rem; font-weight: 700; text-align: center; } .landing-pricing-card-cta:hover { background: rgba(250, 248, 243, 0.08); color: #faf8f3; } .landing-pricing-card-cta-highlight { background: #faf8f3; border-color: #faf8f3; color: var(--navy); } .landing-pricing-card-cta-highlight:hover { background: #ffffff; color: var(--navy); } @media (max-width: 900px) { .landing-hero-grid, .landing-deadline-inner, .landing-privacy-inner, .landing-faq-section { grid-template-columns: 1fr; gap: 2.5rem; } .landing-pricing-grid { grid-template-columns: repeat(2, 1fr); } .landing-steps-heading-row { flex-direction: column; align-items: flex-start; } .landing-steps-tagline { text-align: left; } .landing-giftcard-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; } /* The desktop offset (-1.25rem right) was sized for the space next to the hero's second grid column — once the grid collapses to one column here, that same negative inset ate almost all of .landing-inner's own right padding, leaving the card just a few px from the viewport edge (Peter, 2026-08-16: "vissa delar får inte plats... saknas lite marginal"). A smaller, near- symmetric offset keeps the depth effect without crowding the edge. */ .landing-hero-preview-shape { inset: 1rem -0.375rem -1rem 0.75rem; } } @media (max-width: 720px) { .landing-hero { padding: 2.5rem 0 3.5rem; } .landing-title { font-size: 2.25rem; } .landing-steps-section, .landing-faq-section, .landing-privacy-inner, .landing-deadline-inner, .landing-pricing-inner, .landing-giftcard-inner { padding-top: 3.5rem; padding-bottom: 3.5rem; } .landing-steps, .landing-trust-grid { grid-template-columns: 1fr; } .landing-pricing-grid { grid-template-columns: 1fr; } } h1, h2 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); } /* A global reset so any plain in page content (not just the specially-styled nav/footer/ pagination links below, which all use class selectors that already beat this tag rule) reads as a deliberate, branded link instead of the browser's default blue-and-underlined look. */ a { color: var(--accent); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; color: var(--accent-hover); } h1 { font-size: 1.65rem; margin: 0 0 1.25rem; text-wrap: balance; } /* Avoids a lone short word stranded on its own last line (an orphan) in longer paragraphs — DESIGNGRANSKNING-PUBLIK.md #62. Unsupported browsers just fall back to normal wrapping. */ p { text-wrap: pretty; } /* Uppercase reads fine as a short section label ("Rader", "Påminnelser") but shouts when a page (e.g. FAQ) uses h2 for full sentence-length questions — so this styles the label case, not the transform; content decides its own casing. */ h2 { font-size: 1rem; margin: 2rem 0 0.85rem; color: var(--ink-muted); letter-spacing: -0.005em; font-weight: 700; } .hero { position: relative; /* Matches the page body, not a fixed navy bar — light in light theme, dark in dark theme (see :root/:root[data-theme="dark"] tokens above). The wordmark and every nav control below read off var(--ink)/var(--ink-muted) instead of hardcoded white so they stay legible in both. */ background: var(--canvas); color: var(--ink); border-bottom: 1px solid var(--hairline); /* 21px top+bottom + the 30px logo below = 72px header, the target from DESIGNGRANSKNING.md #3 (was closer to 110px once the badge's inherited 1.55 body line-height and generous padding were accounted for). */ padding: 1.3125rem 2rem; } /* Sticky only on the public site (Peter, 2026-09-11) — visitors reach CTA/"Logga in" without scrolling back up, which matters most on the long scrollable marketing/auth pages this class scopes to (see .page's own body.marketing-bg rule above). Left off the signed-in app header on purpose: that surface already spends its scroll budget on the fixed bottom-tab-bar (mobile) and isn't part of what prompted this. Unlike the FAQ column's reverted sticky (see .landing-faq-copy's comment) this is the conventional persistent-nav pattern, not a short block pinned beside much taller scrolling content, so it doesn't carry the same "reads as broken" risk — the existing --canvas background + hairline border already gives it a clean edge against whatever scrolls underneath, no extra scroll-shadow JS needed. */ body.marketing-bg .hero { position: sticky; top: 0; z-index: 30; } .hero-inner { position: relative; /* Above body.nav-menu-open::after's scrim (z-index: 19) — .hero-inner establishes its own stacking context, so without this the whole header (hamburger panel included) would render BENEATH the scrim regardless of .nav-menu-panel's own higher z-index, since that z-index is only resolved relative to this context, not the page root. */ z-index: 20; max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; /* center, not baseline — baseline let the brand's text baseline and the nav row's pill/icon controls (which have no natural text baseline) drift out of vertical alignment with each other; center keeps brand, tagline and every nav control on one shared vertical midline. */ align-items: center; justify-content: space-between; gap: 0.5rem 2rem; } /* Plain layout row now, not a link itself — holds .brand-link plus the beta/env badges (see _Layout.cshtml). Badges moved out of the link on purpose (Peter, 2026-09-02): they used to sit inside it and pick up its hover underline/navigate-on-click, neither of which makes sense for a status label. */ .brand { display: inline-flex; align-items: center; } /* The actual link (to "/" — the landing page, or a signed-in user's capture page once IndexModel redirects them there), now scoped to just the logo images. */ .brand-link { display: inline-flex; align-items: center; } /* width auto keeps wordmark-white.svg's own aspect ratio, never distorts. 30px cap height is ~2.1x the nav text's 14px (DESIGNGRANSKNING.md #3) — big enough to read as the brand mark, not so big it dwarfs the controls sitting right next to it. See wordmark-white.svg itself for the icon/text proportions (icon height matches the wordmark's own cap height, not tied to this value). */ .brand-logo { display: block; height: 30px; width: auto; } /* Light theme (default): navy wordmark, matching the now-light header background. */ .brand-logo-dark { display: none; } :root[data-theme="dark"] .brand-logo-light { display: none; } :root[data-theme="dark"] .brand-logo-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand-logo-light { display: none; } :root:not([data-theme]) .brand-logo-dark { display: block; } } /* Non-production environment indicator (see _Layout.cshtml) — a quiet outline pill, not a filled amber one. It used to be the loudest thing on the page and read as part of the brand, sitting right next to the logo; an outline in the same neutral border/label tokens as everything else in the header keeps it legible without competing with the wordmark for attention. */ .env-badge { display: inline-flex; align-items: center; margin-left: 0.6rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; color: var(--text-label); white-space: nowrap; } /* Slightly higher-contrast border/text than the generic --hairline/--text-label dark values — the badge needs to stay readable as a deliberate "not production" signal even against the busier dark surface, not fade to the same near-invisible border every other hairline uses. */ :root[data-theme="dark"] .env-badge { border-color: rgba(250, 248, 243, 0.22); color: #a3a091; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .env-badge { border-color: rgba(250, 248, 243, 0.22); color: #a3a091; } } /* Same quiet outline-pill treatment as .env-badge right above, but in the brand accent color instead of the neutral hairline/label tokens — a deliberate small distinction so it reads as "about the product" rather than "about the deploy target" next to env-badge, without being any louder. --accent already carries its own light/dark values (see :root tokens above), so no separate dark-mode override is needed here the way .env-badge needs one for its neutral colors. */ .beta-badge { display: inline-flex; align-items: center; margin-left: 0.3rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; color: var(--accent); white-space: nowrap; } /* --- Space context switcher (design_handoff_spaces §5.1) --- Replaces the space-switching entries that used to live inside .nav-menu/.user-menu. Sits in .hero-inner right after the brand/env badge, separated by its own 1px divider — a permanent, always-visible control rather than something buried in the account menu. Renders nothing for a user with no spaces at all (see _SpaceContextSwitcher.cshtml's own early return). */ .space-switcher-divider { width: 1px; height: 22px; background: var(--hairline); margin: 0 0.2rem; flex-shrink: 0; } .space-switcher { position: relative; /* Same Chromium
quirk as .user-menu below (see its comment) — pin the height so opening the panel (position:absolute, out of flow) doesn't grow the whole header. 38px is the trigger's own 24px avatar plus its 6px top/bottom padding plus 1px border each side (Peter, 2026-08-25: this partial was added after that fix and never got it). Deliberately NOT display:flex + align-items:center the way .user-menu does it below — with this specific element, adding those two properties on top of the fixed height introduced a SECOND bug: opening the panel then shifted the trigger itself upward by 6px (confirmed via isolated testing — flex + a fixed height on a
containing a position:absolute panel makes Chromium re-run cross-axis alignment against the panel's unclamped content height while [open], even though the box's own rendered height stays correctly pinned at 38px). Plain block flow leaves the summary sitting at the top of the box regardless of [open], which needs no centering here anyway — 38px is only 0.67px taller than the trigger's own natural height. */ height: 38px; } .space-switcher-trigger { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 8px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.05); cursor: pointer; list-style: none; user-select: none; } .space-switcher-trigger::-webkit-details-marker { display: none; } .space-switcher-trigger svg { color: var(--text-label); flex-shrink: 0; } /* Shared avatar chip — color + initials, used everywhere a space is referenced (switcher, quick- jump, /Spaces, space detail, upload target picker). Radius ~25% of the box per the doc's own "Radie ≈ 25% av sidan" rule, not a fixed px value, so it scales consistently across the 24/30/ 32/36/46px sizes those views use. */ .space-avatar { display: grid; place-items: center; flex-shrink: 0; border-radius: 25%; color: #fff; font-weight: 700; line-height: 1; } .space-avatar-sm { width: 24px; height: 24px; font-size: 10px; } .space-avatar-row { width: 30px; height: 30px; font-size: 11px; } /* border-radius is already percentage-based on .space-avatar itself, so these three size variants only need to set width/height/font-size — no per-size radius override needed. */ .space-avatar-md { width: 36px; height: 36px; font-size: 12.5px; } .space-avatar-lg { width: 46px; height: 46px; font-size: 15px; } .space-avatar-preview { width: 38px; height: 38px; font-size: 12.5px; } .space-switcher-name { font-weight: 600; font-size: 0.84375rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .space-switcher-count { font-size: 0.6875rem; font-weight: 500; color: var(--text-label); } .space-switcher-panel { position: absolute; top: calc(100% + 0.5rem); left: 0; width: 400px; max-width: 90vw; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 18px 44px rgba(var(--shadow-rgb), 0.18); z-index: 25; overflow: hidden; } .space-switcher-search { display: flex; align-items: center; gap: 8px; margin: 12px 14px 8px; padding: 8px 11px; background: var(--canvas); border-radius: 9px; color: var(--text-label); } .space-switcher-search svg { flex-shrink: 0; } .space-switcher-search input { flex: 1; border: none; background: none; font-size: 0.78125rem; color: var(--ink); outline: none; } .space-switcher-group { padding: 4px 0; } .space-switcher-eyebrow { padding: 8px 14px 4px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.59375rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-label); } .space-switcher-row { display: flex; align-items: center; gap: 11px; padding: 8px 14px; color: inherit; } .space-switcher-row:hover { background: var(--list-hover); text-decoration: none; color: inherit; } .space-switcher-row.current { background: var(--list-hover); } .space-switcher-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .space-switcher-row-name { font-weight: 600; font-size: 0.8125rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .space-switcher-row-sub { font-size: 0.6875rem; color: var(--text-label); } .space-switcher-row-count { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.6875rem; font-weight: 500; color: var(--text-label); } .space-switcher-check { color: var(--accent); font-weight: 700; font-size: 0.75rem; } .space-switcher-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--hairline); background: var(--canvas); font-size: 0.71875rem; color: var(--ink-muted); } .space-switcher-footer-actions { display: flex; gap: 10px; } .space-switcher-footer a { font-weight: 600; color: var(--ink); } .space-switcher-footer-create { color: var(--accent) !important; } /* Mobile equivalent of the topbar pill (design_handoff_spaces §5.8) — same partial rendered a second time in .page instead of .hero, hidden here and shown only under the mobile media query below (which also hides the desktop .space-switcher pill instead). */ .space-switcher-mobile-row { display: none; } .bottom-tab-bar { display: none; } /* Upload page's swap-in for the context switcher (design_handoff_spaces §5.5) — "man navigerar inte här, man väljer mål". */ .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.35rem; /* .hero-inner's justify-content: space-between only has two flex items (.brand, .site-nav) to distribute — fine as long as both fit on one line. Below ~720px the nav's own content (page links + theme + language + account, before the hamburger collapse kicks in at 640px) is wide enough to wrap .site-nav onto its own line under the brand, where it's the sole item on that line — and per the flexbox spec, space-between with a single item degrades to flex-start, so it reads as stuck to the left instead of right (same root cause the .site-footer-inner mobile fix addresses for the footer, see below). margin-left: auto is a more robust fix than a breakpoint-specific override: an auto margin always consumes the line's leftover space, so .site-nav stays flush right whether it's sharing the line with .brand or wrapped alone. */ margin-left: auto; } .site-nav a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-muted); text-decoration: none; font-weight: 500; font-size: 0.875rem; /* 0.25rem, not 0.4rem — at 0.4rem this was the tallest thing in the header row (~34.5px vs the 30px every other control was brought down to, see .nav-menu/.lang-menu/.theme-menu/.user-menu's comment), which silently reopened the same header-height bug through a different element. */ padding: 0.25rem 0.7rem; border-radius: 6px; transition: background-color 0.15s ease, color 0.15s ease; } .site-nav a svg { flex-shrink: 0; opacity: 0.85; } .site-nav a:hover { color: var(--ink); background: var(--overlay-weak); text-decoration: none; } /* A plain text link, not a filled pill — the landing page's hero already has the real call to action ("Skapa konto", filled). A second filled CTA up here competed with it and, on the landing page itself, drew the eye before the page even said what the product does (DESIGNGRANSKNING-PUBLIK.md #41). */ .site-nav a.login-link { color: var(--text-2); font-weight: 600; } .site-nav a.login-link:hover { background: var(--overlay-weak); color: var(--ink); } /* A plain
/