/* ══ NQ-ZONE all ══ */ /* Header — Porto 1 — στυλ ΜΟΝΟ αυτού του part. Φορτώνεται μόνο του σε κάθε σελίδα όπου είναι τοποθετημένο. Διαδρομή: /theme/css/parts/header/header-porto-1.css ΔΟΜΗ — δύο λωρίδες, κατά το Porto Header Type 1: Top bar σύνδεσμοι · email + τηλέφωνο Main head LOGO · ΚΕΝΤΡΙΚΟ ΜΕΝΟΥ · social + εικονίδιο αναζήτησης ── ΟΙ ΑΡΙΘΜΟΙ ΕΙΝΑΙ ΜΕΤΡΗΜΕΝΟΙ, ΟΧΙ ΕΚΤΙΜΗΜΕΝΟΙ ──────────────────────── Όλα τα μεγέθη παρακάτω βγήκαν με getComputedStyle πάνω στο ίδιο το portotheme.com/wordpress/porto/classic-color/ στις 2026-08-12: Top bar ύψος 52 bg #f7f7f7 κείμενο #777 12.6px/24px Top links 11.34px uppercase ls -0.5px #999 Main head ύψος 100 ελάχ. 68 bg #fff Λογότυπο ύψος 48 Menu link padding 40/16 13px/20px weight 600 uppercase ls -0.5px Social 28×28 εικονίδιο 12.8px #333 Αναζήτηση 19×24 εικονίδιο 16px #444 Κουμπί μενού padding 7/13 radius 4 bg #0088cc εικονίδιο 13px #fff 🔴 ΤΟ ΥΨΟΣ ΤΗΣ MAIN HEAD ΔΕΝ ΕΙΝΑΙ PADDING ΤΗΣ ΛΩΡΙΔΑΣ. Το φτιάχνουν τα ΙΔΙΑ ΤΑ LINKS του μενού (padding 40px πάνω/κάτω). Έτσι το hover/active καλύπτει ΟΛΟ το ύψος της λωρίδας — αν έβαζα padding στη λωρίδα, τα link θα ήταν χαμηλά κουτάκια στη μέση και το ενεργό δεν θα «γέμιζε» ποτέ. ⚠️ ΚΑΜΙΑ ΟΡΙΖΟΝΤΙΑ ΤΟΠΟΘΕΤΗΣΗ ΜΕ CSS. Το «αριστερά/δεξιά/κέντρο» κάθε στήλης το ορίζει το πεδίο h_align του builder — μόνιμος κανόνας του έργου. */ /* ══ ΧΡΩΜΑΤΑ — ΠΡΟΕΠΙΛΟΓΕΣ, ΟΧΙ ΑΠΟΦΑΣΕΙΣ ═════════════════════════════════ Όλα μέσα σε :where(), που έχει ΜΗΔΕΝΙΚΗ ειδικότητα. Ό,τι ορίσεις από το Theme → Skin ή από το popup του builder ΤΑ ΝΙΚΑΕΙ ΑΥΤΟΜΑΤΑ — χωρίς !important, χωρίς να ξανανοίξεις αυτό το αρχείο. */ /* βλ. σημείωση αντίθεσης στους συνδέσμους */ :where(#Top_header) { background: #f7f7f7; color: #666666; border-bottom: 1px solid #e7e7e7; } /* Το φόντο της main head ζει σε ΜΕΤΑΒΛΗΤΗ ώστε να το μοιράζονται η λωρίδα ΚΑΙ τα dropdown της: αλλάζεις ένα σημείο και ακολουθούν και τα δύο. Το Theme μπορεί να ορίσει τη μεταβλητή και να τα αλλάξει μαζί. */ header { --nqh-main-bg: #ffffff; } :where(#header) { background: var(--nqh-main-bg); color: #333333; } /* 🔴 ΤΟ ΥΠΟΜΕΝΟΥ ΑΚΟΛΟΥΘΕΙ ΤΟ ΧΡΩΜΑ ΤΗΣ ΚΕΦΑΛΙΔΑΣ. Το `theme.css` δίνει `.nq-subnav {background: #0f1424}` — σκούρο dropdown φτιαγμένο για σκούρη κεφαλίδα (ειδικότητα 0,1,0). Πάνω σε λευκή κεφαλίδα έβγαινε μαύρο κουτί. Το `header .nq-subnav` είναι 0,1,1 και κερδίζει, ενώ μένει αρκετά χαμηλά ώστε να το νικά ρύθμιση του Theme. */ header .nq-subnav { background: var(--nqh-main-bg); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 8px 24px rgba(0, 0, 0, .10); } :where(#header .nq-search-btn) { color: #444444; background: none; } :where(#header .nq-search-toggle) { color: #444444; } :where(#header .nq-search-toggle:hover) { color: #0088cc; } :where(#header .nq-search-pop) { background: var(--nqh-main-bg); border: 1px solid #e7e7e7; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); } :where(#header .nq-search-pop .nq-search-in) { border: 1px solid #e0e0e0; border-radius: 3px; background: #fff; color: #333; } /* 🔴 ΤΑ ΧΡΩΜΑΤΑ ΤΩΝ ΣΥΝΔΕΣΜΩΝ ΘΕΛΟΥΝ ΤΟ `a` ΕΞΩ ΑΠΟ ΤΟ :where(). Το bootstrap έχει `a { color: var(--bs-link-color) }` — ειδικότητα 0,0,1. Γραμμένο ως `:where(#Top_header a)` όλος ο επιλογέας μηδενίζεται, χάνει, και οι σύνδεσμοι έβγαιναν ΜΠΛΕ BOOTSTRAP (13,110,253) αντί για γκρι. Με τον γονιό μέσα στο :where() και το `a` έξω, η ειδικότητα γίνεται 0,0,1 — ισοβαθμεί με το bootstrap και κερδίζει επειδή φορτώνεται ΜΕΤΑ, ενώ μένει αρκετά χαμηλή ώστε να τη νικά οποιαδήποτε ρύθμιση του Theme. */ /* ⚠️ #666 ΚΑΙ ΟΧΙ #999 — ΣΚΟΠΙΜΗ ΑΠΟΚΛΙΣΗ ΑΠΟ ΤΟ PORTO. Το #999 είναι η μετρημένη τιμή του portotheme.com, αλλά πάνω στο #f7f7f7 της μπάρας δίνει αντίθεση ~2.8:1 — κάτω από το ελάχιστο 4.5:1 για κείμενο αυτού του μεγέθους (11.34px). Στη δική μας γραμματοσειρά τα γράμματα έβγαιναν ξεθωριασμένα, «σαν φάντασμα». Το #666 δίνει ~5.7:1 και διαβάζεται κανονικά, κρατώντας την ίδια διακριτική αίσθηση δευτερεύουσας μπάρας. ➡️ Όπου το Porto συγκρούεται με την αναγνωσιμότητα, κερδίζει η αναγνωσιμότητα. */ :where(#Top_header) a { color: #666666; } :where(#Top_header) a:hover { color: #0088cc; } /* Το περίγραμμα των κυκλιδίων είναι `inset box-shadow` (βλ. σημείωση παρακάτω), οπότε το χρώμα του ορίζεται εδώ — όχι με `border-color`. */ /* 🔴 ΑΠΑΛΟ ΦΟΝΤΟ ΜΑΖΙ ΜΕ ΤΟ ΠΕΡΙΓΡΑΜΜΑ — ΓΙΑ ΚΑΘΑΡΟ ΚΥΚΛΟ. Το layout ολόκληρο ξεκινά σε ΜΙΣΟ pixel: το `.container` (1320px) κεντράρεται σε viewport 1905px (1920 μείον scrollbar) → (1905−1320)/2 = 292.5. Μετρημένο: το κυκλάκι κάθεται στο x=1439.5. Σε κλασματική θέση, μια καμπύλη πάχους 1px σχεδιάζεται με antialiasing που τη δείχνει ανομοιόμορφη — «σπασμένη». Δεν διορθώνεται από εδώ: είναι το κέντρο του container, όχι το κυκλάκι. Λύση: γεμάτο απαλό φόντο πολύ κοντά στον τόνο του περιγράμματος. Το σχήμα ορίζεται πλέον από την επιφάνεια και όχι από μια λεπτή γραμμή, οπότε το antialiasing δεν έχει πού να φανεί. */ :where(.nq-phead-social) a { color: #333333; background: #f2f2f2; box-shadow: inset 0 0 0 1px #e7e7e7; } :where(.nq-phead-social) a:hover { color: #ffffff; background: #0088cc; box-shadow: inset 0 0 0 1px #0088cc; } /* ══ ΛΩΡΙΔΑ 1 — TOP BAR ════════════════════════════════════════════════════ */ #Top_header { min-height: 52px; padding: 0; font-size: 12.6px; line-height: 24px; } /* Ίδιο με τη main head: οι στήλες έχουν διαφορετικά φυσικά ύψη και ΔΕΝ τεντώνονται, οπότε χωρίς `align-self` οι σύνδεσμοι αριστερά και τα στοιχεία επικοινωνίας δεξιά κάθονταν σε διαφορετικό ύψος μέσα στη λωρίδα. */ #Top_header .pb-col { align-self: center; justify-content: center; } #Top_header .pb-row { align-items: center; min-height: 52px; } #Top_header a { text-decoration: none; } /* Σύνδεσμοι αριστερά — με το χαρακτηριστικό «›» του Porto. Μπαίνει με ::before και ΟΧΙ ως χαρακτήρας μέσα στο HTML, ώστε να μην τον διαβάζει ο αναγνώστης οθόνης ως περιεχόμενο. */ .nq-ptop-nav { display: flex; align-items: center; } /* 🔴 ΧΩΡΙΣ `letter-spacing: -0.5px` ΚΑΙ ΜΕ ΑΚΕΡΑΙΟ font-size — ΣΚΟΠΙΜΑ. Το Porto δίνει 11.34px με ls -0.5px· και τα δύο είναι ΚΛΑΣΜΑΤΙΚΑ και έσπρωχναν κάθε χαρακτήρα σε μισό pixel (μετρημένο: το κείμενο ξεκινούσε στο x=304.5). Ο browser τότε κάνει subpixel rendering και τα γράμματα βγαίνουν θολά, «σαν φάντασμα» — ακριβώς αυτό που φαινόταν. Ακέραιες τιμές = καθαρά γράμματα. */ .nq-ptop-nav a { padding-right: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: normal; } .nq-ptop-nav a::before { content: "›"; margin-right: 6px; opacity: .6; } /* Επικοινωνία δεξιά — εικονίδιο + κείμενο. */ .nq-ptop-contact { display: flex; align-items: center; gap: 22px; } .nq-ptop-contact a { display: inline-flex; align-items: center; gap: 7px; } .nq-ptop-contact i { font-size: 15px; color: #0088cc; } /* ══ ΛΩΡΙΔΑ 2 — MAIN HEAD ══════════════════════════════════════════════════ */ /* το ύψος το δίνουν τα links — βλ. πάνω */ #header { min-height: 68px; padding: 0; } /* ⚠️ ΠΡΟΣΟΧΗ ΣΤΟΝ ΑΞΟΝΑ. Οι στήλες με h_align παίρνουν `.pb-col-h` και είναι `flex-direction: column` — η ΟΡΙΖΟΝΤΙΑ στοίχιση του builder γίνεται με align-items. Άρα το ΚΑΤΑΚΟΡΥΦΟ κεντράρισμα θέλει justify-content. 🔴 ΧΩΡΙΣ `>`: με full_width="stretch_row" ο renderer παρεμβάλλει wrapper και κάθε `#header > .pb-row > .pb-col` σπάει σιωπηλά. */ /* `align-self: center`: οι τρεις στήλες έχουν διαφορετικά φυσικά ύψη (λογότυπο 48 · μενού 100 · social 28) και ΔΕΝ τεντώνονται στη γραμμή — ξεκινούσαν όλες από την κορυφή, οπότε το λογότυπο καθόταν 26px ψηλότερα από το μενού. Κεντράροντας κάθε στήλη ως προς τη λωρίδα, και τα τρία πέφτουν στο ίδιο οπτικό κέντρο. Το ύψος της λωρίδας το ορίζει η ψηλότερη στήλη, δηλαδή τα links του μενού — όπως στο Porto. */ #header .pb-col { align-self: center; justify-content: center; padding-top: 0; padding-bottom: 0; } #header .nq-h1-logo img, #header .nq-brand img { display: block; max-height: 48px; } /* ── Το μενού, μέσα στη main head ────────────────────────────────────────── 🔴 ΟΛΟΙ ΟΙ ΕΠΙΛΟΓΕΙΣ ΞΕΚΙΝΟΥΝ ΑΠΟ `header`. Η υποδοχή του μενού βγάζει πραγματικό