/* ============================================================================ fitVibe · FV Chrome — L1 Brand bar, desktop (Φάση 1) ---------------------------------------------------------------------------- Ένα header για guest ΚΑΙ member. Οι ζώνες είναι σταθερές: [logo] [nav pills] [adaptive search] [actions] Ό,τι αλλάζει, αλλάζει ως STATE πάνω στο .fv-chrome host — ποτέ ως διαφορετικό markup. Έτσι SSR και SPA δίνουν πάντα το ίδιο αποτέλεσμα: data-chrome-search = hidden | pill data-chrome-auth = guest | member data-chrome-scroll = top | scrolled (γράφεται από τον controller) Ο βασικός κανόνας που διορθώνει το legacy: το nav ΔΕΝ κρύβεται ποτέ. Το παλιό header έκανε swap nav↔search, αφήνοντας τον member χωρίς πλοήγηση σε Search και Studio. Όλες οι τιμές έρχονται από css/chrome/chrome-tokens.css. ============================================================================ */ /* ── Host & bar ─────────────────────────────────────────────────────────── */ .fv-chrome--desktop { position: sticky; top: 0; z-index: var(--fv-chrome-z-l1); display: block; background: var(--fv-chrome-bg); } .fv-chrome__bar { display: flex; align-items: center; gap: var(--fv-chrome-gap-lg); width: 100%; height: var(--fv-chrome-l1-h); padding: 0 var(--fv-chrome-pad-x); background: var(--fv-chrome-bg); box-shadow: var(--fv-chrome-shadow-rest); transition: box-shadow var(--fv-chrome-dur) var(--fv-chrome-ease); } /* Ο controller γράφει data-chrome-scroll στο . Μία ιδιότητα, ένα state — αντί για τα τρία ασύνδετα συστήματα (hide / solid / is-scrolled). */ html[data-chrome-scroll="scrolled"] .fv-chrome__bar { box-shadow: var(--fv-chrome-shadow-scrolled); } /* ── Logo ───────────────────────────────────────────────────────────────── */ .fv-chrome__logo { display: inline-flex; align-items: center; flex: none; } .fv-chrome__logo img { display: block; width: var(--fv-chrome-logo-w); height: auto; } /* ── L3 · nav pills — ΠΑΝΤΑ ΟΡΑΤΑ ──────────────────────────────────────── */ .fv-chrome__nav { display: flex; align-items: center; gap: var(--fv-chrome-gap-xs); flex: none; } .fv-chrome__nav-item { padding: 9px 14px; border-radius: var(--fv-chrome-radius-pill); color: var(--fv-chrome-text-muted); font-family: var(--fv-chrome-font); font-size: var(--fv-chrome-fs-nav); font-weight: var(--fv-chrome-fw-nav); line-height: 1.2; white-space: nowrap; text-decoration: none; transition: color var(--fv-chrome-dur-fast) var(--fv-chrome-ease), background-color var(--fv-chrome-dur-fast) var(--fv-chrome-ease); } .fv-chrome__nav-item:hover { color: var(--fv-chrome-text); background: var(--fv-chrome-accent-soft); } .fv-chrome__nav-item.is-active { color: var(--fv-chrome-accent); background: var(--fv-chrome-accent-soft); font-weight: var(--fv-chrome-fw-nav-active); } .fv-chrome__nav-item:focus-visible { outline: 2px solid var(--fv-chrome-accent); outline-offset: 2px; } /* Στενές οθόνες: το nav συρρικνώνεται πριν θυσιαστεί οτιδήποτε άλλο, αλλά ΔΕΝ εξαφανίζεται. */ @media (max-width: 1200px) { .fv-chrome__bar { gap: var(--fv-chrome-gap); padding: 0 var(--fv-chrome-gap-lg); } .fv-chrome__nav-item { padding: 9px 10px; font-size: 13.5px; } } /* ── Adaptive search ──────────────────────────────────────────────────────── hidden → η σελίδα (Home hero) κρατά το search pill → compact search μέσα στο header, ΧΩΡΙΣ να διώχνει το nav */ .fv-chrome__search { display: flex; align-items: center; /* flex-basis 320px so the zone actually claims room. With `auto` the shared search partial kept its legacy min-width:320px while the flex box shrank the zone to ~18px, and the form painted straight over the actions. */ flex: 1 1 320px; justify-content: center; min-width: 0; /* The shared partial ships position:relative; top:10px; height:60px for the legacy header. Inside the chrome bar it is vertically centred instead. */ top: 0; height: auto; transition: opacity var(--fv-chrome-dur) var(--fv-chrome-ease), transform var(--fv-chrome-dur) var(--fv-chrome-ease); } /* Let the shared form shrink with its zone instead of overflowing it. */ .fv-chrome__search .search-large-area { min-width: 0; } .fv-chrome__search .main-search-input-container { padding: 0; } .fv-chrome[data-chrome-search="hidden"] .fv-chrome__search { opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; } .fv-chrome[data-chrome-search="pill"] .fv-chrome__search { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* Compact μορφή της κοινής φόρμας αναζήτησης μέσα στο header. --------------------------------------------------------------------------- The shared form grows in place when its suggestion panel opens — measured at 54px closed, 412px open. The zone is a flex item centred in a 70px bar, so that growth was distributed above and below and pushed the whole field 171px off the top of the screen, with the pill radius rendering the overflow as a circle. The field is pinned to a fixed-height zone and the panel is taken out of flow, so opening it can no longer resize anything above it. */ .fv-chrome__search { position: relative; height: var(--fv-chrome-icon-btn); } .fv-chrome__search .main-search-input-container { position: absolute; top: 0; left: 50%; width: 100%; max-width: 460px; transform: translateX(-50%); } .fv-chrome__search .search-large-area { max-width: 460px; padding: 6px 12px; border: 1px solid var(--fv-chrome-border); border-radius: var(--fv-chrome-radius-pill); box-shadow: none; /* The panel is positioned against this box and must escape it. */ overflow: visible; } /* Open state: a pill radius on a 400px-tall box reads as a circle. */ .fv-chrome__search .search-large-area:has(.fv-discovery-collapse-area:not([hidden])), .fv-chrome__search .search-large-area:has(.search-collapse-area:not([hidden])) { border-radius: var(--fv-chrome-radius); } .fv-chrome__search .fv-discovery-collapse-area, .fv-chrome__search .search-collapse-area { position: absolute; top: calc(100% + 10px); right: 0; left: 0; z-index: var(--fv-chrome-z-dropdown); max-height: min(60vh, 520px); overflow-y: auto; padding: 10px; border: 1px solid var(--fv-chrome-border); border-radius: var(--fv-chrome-radius); background: var(--fv-chrome-bg); box-shadow: var(--fv-chrome-shadow-float); } /* Η ζώνη search δεν πρέπει ποτέ να σπρώξει έξω το nav ή τα actions. */ .fv-chrome[data-chrome-search="hidden"] .fv-chrome__search { flex: 0 0 0; } /* ── Search pill fallback (900-1599px) ────────────────────────────────────── Μετρημένο: logo 166 + nav 421 + actions 524 + padding/gaps 152 = 1263px. Η δίπεδη φόρμα θέλει τουλάχιστον 320px, άρα χωράει άνετα μόνο από ~1600px και πάνω. Κάτω από αυτό συμπτύσσεται σε pill που ανοίγει το ήδη υπάρχον search popup μέσω του .mobileSearch trigger του κοινού partial. Αυτό που ΔΕΝ θυσιάζεται ποτέ για να χωρέσει το search είναι το nav — ήταν ακριβώς το λάθος του legacy header. */ .fv-chrome__search .mobile-search-btn { display: none; } @media (max-width: 1599px) { /* In pill mode the zone is exactly one control wide, so it can no longer be squeezed below the button by the flex distribution. */ .fv-chrome__search { flex: 0 0 var(--fv-chrome-icon-btn); justify-content: flex-end; } .fv-chrome__search .search-large-area { display: none; } .fv-chrome__search .mobile-search-btn { /* Το partial το στέλνει ως .visually-hidden· εδώ γίνεται ορατό control. Icon-only: το κουμπί κρατά το aria-label του partial, οπότε παραμένει προσβάσιμο χωρίς να χρειαστεί αλλαγή στο κοινό markup. */ position: static; display: grid; place-items: center; overflow: visible; flex: none; width: var(--fv-chrome-icon-btn); height: var(--fv-chrome-icon-btn); margin: 0; padding: 0; clip: auto; clip-path: none; border: 1px solid var(--fv-chrome-border); border-radius: var(--fv-chrome-radius-pill); background: var(--fv-chrome-bg); color: var(--fv-chrome-text-muted); cursor: pointer; transition: border-color var(--fv-chrome-dur-fast) var(--fv-chrome-ease), color var(--fv-chrome-dur-fast) var(--fv-chrome-ease); } .fv-chrome__search .mobile-search-btn::before { content: ""; display: block; width: 19px; height: 19px; background-color: currentColor; -webkit-mask: var(--fv-chrome-search-icon) center / contain no-repeat; mask: var(--fv-chrome-search-icon) center / contain no-repeat; } .fv-chrome__search .mobile-search-btn:hover { border-color: var(--fv-chrome-accent); color: var(--fv-chrome-accent); } .fv-chrome__search .mobile-search-btn:focus-visible { outline: 2px solid var(--fv-chrome-accent); outline-offset: 2px; } } /* ── Actions zone ───────────────────────────────────────────────────────── */ .fv-chrome__actions { display: flex; align-items: center; gap: var(--fv-chrome-gap); margin-left: auto; flex: none; } .fv-chrome__partner { color: var(--fv-chrome-text); font-family: var(--fv-chrome-font); font-size: var(--fv-chrome-fs-action); font-weight: 700; white-space: nowrap; text-decoration: none; } .fv-chrome__partner:hover { color: var(--fv-chrome-accent); } @media (max-width: 1200px) { .fv-chrome__partner { display: none; } } /* Guest actions */ .fv-chrome__packages, .fv-chrome__signin { min-height: var(--fv-chrome-icon-btn); padding: 9px 18px; border-radius: var(--fv-chrome-radius-pill); font-family: var(--fv-chrome-font); font-size: var(--fv-chrome-fs-action); font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--fv-chrome-dur-fast) var(--fv-chrome-ease), border-color var(--fv-chrome-dur-fast) var(--fv-chrome-ease), color var(--fv-chrome-dur-fast) var(--fv-chrome-ease); } .fv-chrome__packages { border: 1px solid var(--fv-chrome-border); background: var(--fv-chrome-bg); color: var(--fv-chrome-text); } .fv-chrome__packages:hover { border-color: var(--fv-chrome-accent); color: var(--fv-chrome-accent); } .fv-chrome__signin { border: 1px solid var(--fv-chrome-accent); background: var(--fv-chrome-accent); color: var(--fv-chrome-text-inverse); } .fv-chrome__signin:hover { border-color: var(--fv-chrome-accent-hover); background: var(--fv-chrome-accent-hover); } .fv-chrome__lang { display: inline-flex; align-items: center; } /* Member actions */ .fv-chrome__coins { display: inline-flex; align-items: center; gap: 7px; min-height: var(--fv-chrome-icon-btn); padding: 8px 14px 8px 9px; border: 1px solid var(--fv-chrome-border); border-radius: var(--fv-chrome-radius-pill); background: var(--fv-chrome-bg); color: var(--fv-chrome-text); font-family: var(--fv-chrome-font); font-size: var(--fv-chrome-fs-action); font-weight: 800; cursor: pointer; transition: border-color var(--fv-chrome-dur-fast) var(--fv-chrome-ease); } .fv-chrome__coins:hover { border-color: var(--fv-chrome-accent); } .fv-chrome__coin, .fv-chrome__coin svg, .fv-chrome__coin img { display: block; width: 20px; height: 20px; } .fv-chrome__icon-btn { position: relative; display: grid; place-items: center; flex: 0 0 var(--fv-chrome-icon-btn); width: var(--fv-chrome-icon-btn); height: var(--fv-chrome-icon-btn); padding: 0; border: 1px solid var(--fv-chrome-border); border-radius: var(--fv-chrome-radius-pill); background: var(--fv-chrome-bg); color: var(--fv-chrome-text); cursor: pointer; transition: border-color var(--fv-chrome-dur-fast) var(--fv-chrome-ease); } .fv-chrome__icon-btn:hover { border-color: var(--fv-chrome-accent); color: var(--fv-chrome-accent); } .fv-chrome__icon-btn svg { width: 21px; height: 21px; } .fv-chrome__avatar { display: grid; place-items: center; overflow: hidden; flex: 0 0 var(--fv-chrome-avatar); width: var(--fv-chrome-avatar); height: var(--fv-chrome-avatar); padding: 0; border: 1px solid var(--fv-chrome-bg); border-radius: var(--fv-chrome-radius-pill); background: linear-gradient(135deg, #ff8e72, #d24a6a); color: var(--fv-chrome-text-inverse); font-family: var(--fv-chrome-font); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(210, 74, 106, 0.2); } .fv-chrome__avatar--photo { border-color: var(--fv-chrome-border); background: var(--fv-chrome-bg); box-shadow: 0 2px 8px rgba(20, 30, 60, 0.08); } .fv-chrome__avatar img { display: block; width: 100%; height: 100%; border-radius: var(--fv-chrome-radius-pill); object-fit: cover; } .fv-chrome__coins:focus-visible, .fv-chrome__icon-btn:focus-visible, .fv-chrome__avatar:focus-visible, .fv-chrome__packages:focus-visible, .fv-chrome__signin:focus-visible { outline: 2px solid var(--fv-chrome-accent); outline-offset: 2px; } /* ── Narrow desktop (900-1023px) ──────────────────────────────────────────── Το τελευταίο σκαλί πριν παραδώσει στο mobile chrome. Μετρημένο overflow στα 940px ήταν 53px, οπότε συμπιέζονται logo, nav και actions — με σειρά προτεραιότητας που αφήνει το nav άθικτο ως λειτουργία. Ο language switcher φεύγει από το bar (παραμένει στο footer και στο burger menu). */ @media (max-width: 1023px) { .fv-chrome__bar { gap: var(--fv-chrome-gap-sm); padding: 0 var(--fv-chrome-gap); } .fv-chrome__logo img { width: 124px; } .fv-chrome__nav-item { padding: 8px 8px; font-size: 13px; } .fv-chrome__lang { display: none; } .fv-chrome__actions { gap: var(--fv-chrome-gap-sm); } .fv-chrome__packages, .fv-chrome__signin { padding: 9px 13px; font-size: 13px; } } /* ── Viewport ownership ───────────────────────────────────────────────────── Ακριβώς ένα site header ορατό ανά viewport. Το desktop chrome σταματά στα 899px και παραδίδει στο mobile chrome (Φάση 2). */ @media (max-width: 899px) { .fv-chrome--desktop { display: none; } }