/* ============================================================================ fitVibe · FV Chrome — Token Layer (Φάση 0) ---------------------------------------------------------------------------- Ενιαία tokens για ΟΛΟ το navigation chrome (headers, context bars, bottom nav). ΚΑΝΟΝΑΣ: αυτό το αρχείο δηλώνει ΜΟΝΟ custom properties. Δεν περιέχει κανέναν κανόνα που βάφει element — άρα η φόρτωσή του δεν αλλάζει τίποτα οπτικά. Οι φάσεις 1-6 καταναλώνουν αυτά τα tokens. Πηγή αληθείας για τις τιμές: css/design-system.css. Ό,τι υπάρχει ήδη εκεί ΔΕΝ ξαναγράφεται — γίνεται alias με fallback, ώστε μια μελλοντική αλλαγή παλέτας να ταξιδεύει αυτόματα. Τα τρία επίπεδα (βλ. docs/design/fv-chrome.md): L1 · Brand bar — «πού είμαι» (πάντα ορατό, ποτέ δεν ξαναστήνεται) L2 · Context bar — «τι κάνω εδώ» (το μόνο που εναλλάσσεται ανά σελίδα) L3 · Primary nav — «πού μπορώ να πάω» (desktop pills / mobile bottom nav) ============================================================================ */ :root { /* ── Χρώματα ──────────────────────────────────────────────────────────── Aliases πάνω στο design system. Μην ορίζεις hex εδώ αν υπάρχει token. */ --fv-chrome-bg: var(--main-white-pure-color, #ffffff); --fv-chrome-bg-page: #f3f5fb; --fv-chrome-border: var(--border-silver-color, #d5d9e7); --fv-chrome-border-soft: #e7eaf3; --fv-chrome-text: #1f2937; --fv-chrome-text-muted: var(--secondary-metallic-blue, #5f6e95); --fv-chrome-text-inverse: var(--main-white-pure-color, #ffffff); --fv-chrome-accent: var(--main-primary-color, #325de6); --fv-chrome-accent-hover: var(--main-primary-hover-color, #1739a6); --fv-chrome-accent-soft: #eef2fe; /* Badges / counters (κρατήσεις, ειδοποιήσεις, ενεργά φίλτρα) */ --fv-chrome-badge-bg: var(--alert-danger-color, #d62424); --fv-chrome-badge-text: var(--main-white-pure-color, #ffffff); /* Scrim πάνω από hero εικόνες (studio L2 σε mobile) */ --fv-chrome-scrim: linear-gradient(180deg, rgba(15, 23, 42, 0.22) 0%, rgba(15, 23, 42, 0) 100%); /* Condensed: το L2 αποκτά επιφάνεια όταν το hero έχει κυλήσει από κάτω. */ --fv-chrome-l2-condensed-bg: rgba(255, 255, 255, 0.96); --fv-chrome-l2-condensed-border: rgba(213, 217, 231, 0.82); --fv-chrome-l2-blur: blur(14px); /* ── Διαστάσεις ───────────────────────────────────────────────────────── Οι τιμές ταιριάζουν με το σημερινό 70px header ώστε η Φάση 1 να μπορεί να μεταπέσει χωρίς layout shift, και μειώνονται σε 64px μόνο όταν το νέο component αναλάβει πλήρως. */ --fv-chrome-l1-h: 70px; /* Brand bar — desktop */ --fv-chrome-l1-h-target: 64px; /* στόχος Φάσης 1 */ --fv-chrome-l2-h: 56px; /* Context bar — desktop */ --fv-chrome-l1-h-mobile: 56px; /* L2 fits a 44px touch target with 6px of breathing room. Before this the two context bars disagreed: Search used 60px, the studio sheet 68px. */ --fv-chrome-l2-h-mobile: 56px; --fv-chrome-bottom-h: 64px; /* bottom nav, χωρίς safe area */ /* Συνολικό offset που πρέπει να αφήνει το περιεχόμενο από πάνω/κάτω. Χρησιμοποίησέ τα αντί για hardcoded padding σε κάθε σελίδα. */ --fv-chrome-offset-top: var(--fv-chrome-l1-h); --fv-chrome-offset-bottom: 0px; /* Ελάχιστο tap target (WCAG / iOS HIG) */ --fv-chrome-tap: 44px; --fv-chrome-icon-btn: 40px; --fv-chrome-icon: 24px; --fv-chrome-icon-stroke: 1.7; /* Inline mask για το compact search control (δεν φορτώνει FontAwesome). */ --fv-chrome-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E"); --fv-chrome-logo-w: 166px; --fv-chrome-logo-w-mobile: 34px; --fv-chrome-avatar: 40px; /* ── Safe area (iOS notch / home indicator, native app shell) ───────── */ --fv-chrome-safe-top: env(safe-area-inset-top, 0px); --fv-chrome-safe-bottom: env(safe-area-inset-bottom, 0px); --fv-chrome-safe-left: env(safe-area-inset-left, 0px); --fv-chrome-safe-right: env(safe-area-inset-right, 0px); /* ── Spacing ────────────────────────────────────────────────────────── */ --fv-chrome-gap-xs: 4px; --fv-chrome-gap-sm: 8px; --fv-chrome-gap: 14px; --fv-chrome-gap-lg: 28px; --fv-chrome-pad-x: 34px; /* desktop side padding */ --fv-chrome-pad-x-mobile: 16px; /* ── Radii ──────────────────────────────────────────────────────────── */ --fv-chrome-radius-pill: 999px; --fv-chrome-radius: 16px; --fv-chrome-radius-sm: 10px; --fv-chrome-radius-sheet: 24px; /* mobile sheet top corners */ /* ── Elevation ──────────────────────────────────────────────────────── */ --fv-chrome-shadow-none: none; --fv-chrome-shadow-rest: 0 1px 0 0 var(--fv-chrome-border-soft); --fv-chrome-shadow-scrolled: 0 6px 20px rgba(20, 30, 60, 0.08); --fv-chrome-shadow-float: 0 20px 50px rgba(15, 23, 42, 0.08); /* ── z-index κλίμακα ──────────────────────────────────────────────────── Το repo σήμερα έχει τιμές από 20 έως 2147482999 χωρίς κλίμακα (header 20, member host 52, mobile sheet 70, popups 10040+). Κάθε ΝΕΟ chrome element παίρνει τιμή ΜΟΝΟ από εδώ. */ --fv-chrome-z-content: 1; --fv-chrome-z-l2: 40; /* context bar — κάτω από το L1 */ --fv-chrome-z-l1: 50; /* brand bar */ --fv-chrome-z-bottom: 55; /* bottom nav */ --fv-chrome-z-dropdown: 60; /* search suggestions, nav menus */ --fv-chrome-z-sheet: 70; /* mobile SPA sheet (studio) */ /* A sheet's own context bar rides above its content but below drawers. The studio bar previously sat at 90, i.e. modal level. */ --fv-chrome-z-sheet-context: 75; --fv-chrome-z-drawer: 80; /* burger drawer / sidebar */ --fv-chrome-z-backdrop: 79; /* πάντα drawer - 1 */ --fv-chrome-z-modal: 90; /* search popup, auth popup */ /* ── Motion ───────────────────────────────────────────────────────────── Μία καμπύλη για όλο το chrome (native iOS feel), τρεις ταχύτητες. */ --fv-chrome-ease: cubic-bezier(0.22, 1, 0.36, 1); --fv-chrome-ease-in-out: cubic-bezier(0.32, 0.72, 0, 1); --fv-chrome-dur-fast: 140ms; /* hover, focus, χρώμα */ --fv-chrome-dur: 200ms; /* L2 enter/exit, search collapse */ --fv-chrome-dur-slow: 320ms; /* mobile sheet slide */ /* ── Τυπογραφία chrome ──────────────────────────────────────────────── */ --fv-chrome-font: var(--ff-manrope, "Manrope", "Roboto Flex", sans-serif); --fv-chrome-fs-nav: 14.5px; --fv-chrome-fs-action: 13.5px; --fv-chrome-fs-bottom: 11px; --fv-chrome-fs-eyebrow: 11px; --fv-chrome-fw-nav: 600; --fv-chrome-fw-nav-active: 800; } /* ── Breakpoints ──────────────────────────────────────────────────────────── Τα custom properties ΔΕΝ δουλεύουν μέσα σε @media prelude, οπότε οι τιμές γράφονται κυριολεκτικά. Ολόκληρο το chrome χρησιμοποιεί ΜΟΝΟ αυτά τα τρία σημεία — όχι τα 34 διαφορετικά max-width που έχει σήμερα το css/header.css. @media (max-width: 599px) → compact mobile @media (max-width: 899px) → mobile / tablet chrome (bottom nav ενεργό) @media (min-width: 900px) → desktop chrome (L1 pills ενεργά) @media (min-width: 1200px) → wide desktop Τα παρακάτω tokens υπάρχουν για χρήση σε JS (getComputedStyle) και ως εκτελέσιμη τεκμηρίωση της κλίμακας. */ :root { --fv-chrome-bp-compact: 599px; --fv-chrome-bp-mobile: 899px; --fv-chrome-bp-desktop: 900px; --fv-chrome-bp-wide: 1200px; } /* Στο mobile chrome το περιεχόμενο πρέπει να αφήνει χώρο για το bottom nav. */ @media (max-width: 899px) { :root { --fv-chrome-offset-top: var(--fv-chrome-l1-h-mobile); --fv-chrome-offset-bottom: calc(var(--fv-chrome-bottom-h) + var(--fv-chrome-safe-bottom)); --fv-chrome-pad-x: var(--fv-chrome-pad-x-mobile); } } /* Χρήστες που ζητούν λιγότερη κίνηση: μηδενίζουμε στην πηγή, ώστε κανένα chrome component να μη χρειάζεται δικό του prefers-reduced-motion block. */ @media (prefers-reduced-motion: reduce) { :root { --fv-chrome-dur-fast: 0ms; --fv-chrome-dur: 0ms; --fv-chrome-dur-slow: 0ms; } }