/* ============================================================ BIX THEME — gemensam tokengrund för hela webben. Källa: docs/handover/BIX-DESIGN-SYSTEM-v1.0.md + chef-beslut 2026-07-02 (varm canvas + tre-kanvas-rytm). En sanning: alla sidor länkar denna fil FÖRE sina egna stylesheets. Inga :root-paletter någon annanstans. /inbjudan/business/ får behålla sina medvetet varmare undantag som page-scoped overrides. Ytorna är varm mörker på riktigt: R > G > B i varje steg. Bix är ett bebott rum, inte ett datorgränssnitt. ============================================================ */ :root { /* ── SURFACES — varm mörker (R > G > B), exakt enligt docs/handover/BIX-DESIGN-SYSTEM-v1.0.md §2.1. background/surface/elevated/border är dokumentets egna hex; surface-card/surface-raised är web-egna mellansteg interpolerade efter samma R-G/G-B-progression (dokumentet definierar bara 4 nivåer). */ --bg: #151311; /* Background — alla skärmbakgrunder */ --surface: #1A1715; /* Cards, inputs, sheets */ --surface-card: #1E1B18; /* Booking card, rotation-zon */ --surface-elevated: #221E1B; /* Modaler, popovers, bottom sheets */ --surface-raised: #2A2622; /* Date pills, raised chips */ --border: #2E2A26; /* Linjer, dividers, kontur */ /* ── TEXT — ivory palette ── */ --text-primary: #F0EDE8; --text-secondary: #9A9790; --text-tertiary: #807D79; --text-faint: #5A5754; /* eyebrows, footer — svagast */ /* ── ACCENT — primary CTA = ivory fill, mörk text. En sanning. ── */ --accent: #F0EDE8; --accent-text: #0A0A0A; --accent-brand-subtle: rgba(240, 237, 232, 0.08); /* ── SAGE — heligt försvarad, max en användning per skärm ── */ --sage: #7BAF96; --sage-subtle: rgba(123, 175, 150, 0.15); --sage-glow: rgba(123, 175, 150, 0.08); /* ── SEMANTIK ── */ --error: #C45C5C; --error-subtle: rgba(196, 92, 92, 0.15); --warning: #C4995C; --warning-subtle: rgba(196, 153, 92, 0.15); /* ── FAMILY PALETTE ── */ --family-0: #7BAF96; --family-1: #C4A87C; --family-2: #9080B0; --family-3: #A86850; --family-4: #6878A0; --family-5: #8090A0; --overlay: rgba(12, 10, 8, 0.6); /* ── ALIASER — signup-flödets kortnamn (styles.css m.fl.) ── */ --text: var(--text-primary); --sub: var(--text-secondary); --dim: var(--text-tertiary); --dimmer: var(--text-faint); --ivory: var(--accent); --elevated: var(--surface-elevated); /* ============================================================ TYPOGRAPHY — Inter Tight. 6 storlekar, fasta. ============================================================ */ --font-sans: 'Inter Tight', system-ui, sans-serif; --font-serif: 'EB Garamond', Georgia, serif; --display-size: 56px; --display-weight: 600; --display-track: -0.02em; --display-lh: 1.05; --title-size: 28px; --title-weight: 600; --title-track: -0.015em; --title-lh: 1.10; --heading-size: 20px; --heading-weight: 500; --heading-track: -0.01em; --heading-lh: 1.20; --body-size: 16px; --body-weight: 400; --body-track: -0.005em; --body-lh: 1.40; --caption-size: 13px; --caption-weight: 400; --caption-track: 0; --caption-lh: 1.35; --micro-size: 11px; --micro-weight: 500; --micro-track: 0.01em; --micro-lh: 1.20; /* Reserved — endast för BIX. ordmärket. */ --wordmark-weight: 700; --wordmark-tracking: -0.04em; /* ============================================================ SPACING — 4px grid ============================================================ */ --space-4xs: 2px; --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 20px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --screen-margin: 20px; --card-padding: 16px; --between-cards: 12px; --between-sections: 24px; --bottom-cta-padding: 32px; --touch-min: 44px; --touch-recommended: 48px; /* ============================================================ RADIUS — 14px är Bix-radien ============================================================ */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; --radius-card: 14px; --radius-button: 14px; --radius-input: 10px; /* ============================================================ MOTION — BixCurve. Inga linear. ============================================================ */ --curve-ambient: cubic-bezier(0.4, 0.0, 0.6, 1.0); --curve-growth: cubic-bezier(0.2, 0.8, 0.4, 1.0); --curve-materialize: cubic-bezier(0.0, 0.0, 0.2, 1.0); --curve-settle: cubic-bezier(0.4, 0.0, 0.0, 1.0); --curve-text-fade: cubic-bezier(0.25, 0.1, 0.25, 1.0); --curve-cross-fade: cubic-bezier(0.25, 0.1, 0.25, 1.0); --curve-card-enter: cubic-bezier(0.0, 0.0, 0.2, 1.0); /* kort/rad glider in — 0.32s (iOS cardEnter) */ --curve-confirm-lock: cubic-bezier(0.34, 1.4, 0.5, 1.0); /* bekräfta-lås overshoot — 0.5s (iOS momentConfirmLock) */ --press-spring: cubic-bezier(0.22, 1, 0.36, 1); --ease: var(--press-spring); /* legacy-alias (signup-flödet) */ /* ============================================================ SHADOWS — sparsamt. Mörker hanteras med surface-nivåer. ============================================================ */ --shadow-glow-accent: 0 0 24px rgba(240, 237, 232, 0.04); --shadow-glow-sage: 0 0 16px rgba(123, 175, 150, 0.15); --shadow-card-hover: 0 0 12px rgba(240, 237, 232, 0.04); /* Rad-hover + emfascell — skopas om av .canvas-ivory. RGB matchar --surface/--surface-elevated. */ --row-hover: rgba(26, 23, 21, 0.5); --cell-emphasis: rgba(34, 30, 27, 0.45); } /* ============================================================ IVORY-KANVAS — tre-kanvas-rytmens mittband. Samma bläck, inverterat papper. Sektionens befintliga regler fortsätter fungera eftersom de läser tokens. ============================================================ */ .canvas-ivory { --bg: #F0EDE8; --surface: #E9E5DE; --surface-card: #EDE9E2; --surface-elevated: #E4DFD7; --surface-raised: #DDD7CE; --border: rgba(23, 19, 14, 0.14); --text-primary: #17140F; --text-secondary: #5E594F; --text-tertiary: #6F6959; /* 4.5:1 mot ivory — WCAG AA för liten text */ --text-faint: #948C7C; /* Mörkaste pixeln är CTA:n på papper */ --accent: #17140F; --accent-text: #F0EDE8; --accent-brand-subtle: rgba(23, 19, 14, 0.08); --overlay: rgba(23, 19, 14, 0.35); --shadow-glow-accent: 0 12px 32px rgba(23, 19, 14, 0.08); --shadow-card-hover: 0 12px 32px rgba(23, 19, 14, 0.10); --row-hover: rgba(23, 19, 14, 0.05); --cell-emphasis: rgba(23, 19, 14, 0.07); background: var(--bg); color: var(--text-primary); } /* ============================================================ NATIVE-FEEL — gör webben app-lik i TWA (Android WebView) + iOS-PWA. Tar bort webbläsar-tells som avslöjar "sajt i ett skal": tap-blink, långtrycks-kontextmeny, gummiband/pull-to-refresh, dubbeltap-zoom, iOS text-inflation. Formfält behåller markering + callout. ============================================================ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* iOS blåser inte upp text */ -webkit-tap-highlight-color: transparent; /* ingen grå blink vid tryck */ overscroll-behavior: none; /* ingen pull-to-refresh / gummiband */ } body { overscroll-behavior: none; -webkit-touch-callout: none; /* inget långtrycks-kontextmeny på länkar/bilder */ -webkit-user-select: none; user-select: none; /* app-lik: tryck markerar inte text */ touch-action: manipulation; /* ingen dubbeltap-zoom / 300ms tap-delay */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Formfält + medvetet kopierbart innehåll (.selectable) får markering + callout tillbaka */ input, textarea, select, [contenteditable], .selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* App-lika sidövergångar: cross-document View Transitions gör /hitta→/b→/boka→/konto till en mjuk crossfade i st.f. vit sidladdnings-blink (Android WebView/Chrome 126+). Degraderar tyst till instant nav i browsers utan stöd. Rör ej SPA-stegen i /boka (de är innerHTML-swappar, inte dokument-nav). Reduced-motion respekteras nedan. */ /* ============================================================ BIX.-ORDMÄRKETS PUNKT = RUND CIRKEL (låst lockup-spec 2026-07-05, amendment till DEL 1.1). Aldrig fontens punktglyf. Ø 0,087em, gap 0,0298em efter X, currentColor. text-indent+overflow döljer "."-glyfen utan markup-ändring. OBS SCOPE: gäller ENDAST varumärket (.wordmark/.nav-logo/.qr-wm). Titel- signaturens kursiva punkt (.bk-dot, .pl-h1 .d, .pl-soon-t .d) berörs ALDRIG. */ .wordmark .d, .nav-logo .dot, .footer-logo .dot, .f-logo .dot, .qr-wm > span { display: inline-block; width: .087em; height: .087em; border-radius: 50%; background: currentColor; margin-left: .0298em; vertical-align: baseline; overflow: hidden; text-indent: 100%; white-space: nowrap; } /* Tangentbords-fokus (skrivbord): en enda ring i textPrimary (= appens accent, DEL 2.1 — ingen egen fokus-färg). Bara :focus-visible, inte :focus, så ringen syns för tangentbordsnavigering men inte vid musklick (Vercel/Linear-mönster). OBS: home.css:615 har en äldre sage-ring (6:e sage-platsen utöver DEL 2.4:s 5 sanktionerade) — inte replikerad hit, flaggad separat. */ :focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; } @view-transition { navigation: auto; } ::view-transition-group(root) { animation-duration: 0.28s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }