/* ═══════════════════════════════════════════════════════════════════════ ΥΠΟΨΗΦΙΕΣ ΓΙΑ ΤΙΤΛΟΥΣ ΑΡΘΡΩΝ (βημα 044 - 30/09/2026) Ζητηθηκε κατι κοντα στην Akzidenz-Grotesk Pro Medium (Berthold 1896). Δεν εχει ελληνικα και δεν ειναι δωρεαν. Οι δυο πλησιεστερες που εχουν: Inter — συγχρονη ουδετερη γκροτεσκ. R με ισιο ποδι, G με σπιρουνι, κλειστα ανοιγματα: ολα κατευθειαν απο την Akzidenz. Εχει και αξονα opsz (14-32) που ρυθμιζει το σχεδιο αναλογα με το μεγεθος — το κανει μονος του ο browser. Arimo — μετρικα ιδια με Arial, αρα Helvetica, αρα Akzidenz. Πιο «ουδετερη γραφειου», λιγοτερο editorial. Αλλαζεις ΜΟΝΟ τη γραμμη --pg-font-title πιο κατω. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Commissioner — βημα 093 · 06/10/2026. Variable 100-900, ΜΕ ελληνικο subset. Ιδιο μοτιβο με το Inter: ξεχωριστο αρχειο ανα αλφαβητο και unicode-range, ωστε ο browser να κατεβαζει ΜΟΝΟ οσα χρειαζεται — μια ελληνικη σελιδα δεν αγγιζει καν το latin-ext (30KB). */ @font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/commissioner-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/commissioner-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/commissioner-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Literata — βημα 095 · 07/10/2026. Editorial serif ΜΕ ελληνικα ΚΑΙ αληθινα πλαγια. Variable 400-800. ΓΙΑΤΙ ΟΧΙ PLAYFAIR DISPLAY (η προφανης για Pitchfork-look): ΔΕΝ ΕΧΕΙ ΕΛΛΗΝΙΚΑ. Ουτε η Bodoni Moda. Το μετρησα, δεν το υπεθεσα. ΓΙΑΤΙ ΧΩΡΙΣ αξονα opsz: με opsz+wght τα τεσσερα αρχεια ζυγιζαν 306.952 B. Μονο με wght: 108.348 B — το ΕΝΑ ΤΡΙΤΟ, για αξονα που δεν χρησιμοποιουμε πουθενα. Τα πλαγια ειναι ΞΕΧΩΡΙΣΤΟ αρχειο, οχι συνθεση: το font-synthesis ειναι κλειστο στο θεμα, αρα ψευτικη κλιση δεν θα εβγαινε καν. */ @font-face { font-family: 'Literata'; font-style: italic; font-weight: 400 800; font-display: swap; src: url(../fonts/literata-greek-italic.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Literata'; font-style: italic; font-weight: 400 800; font-display: swap; src: url(../fonts/literata-latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/literata-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/literata-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* GFS Didot — βημα 100 · 08/10/2026. Greek Font Society, Αθηνα. Didone σχεδιασμενη ΠΡΩΤΑ ΓΙΑ ΕΛΛΗΝΙΚΑ — τα λατινικα ηρθαν μετα, το αντιστροφο απ' οτι συνηθως. ΜΟΝΟ ΒΑΡΟΣ 400, ΧΩΡΙΣ ΠΛΑΓΙΑ. Το Google Fonts δινει μια κοψη. Η πληρης οικογενεια (Italic, Bold) υπαρχει στο greekfontsociety-gfs.gr με χειροκινητο κατεβασμα. Δεν ειναι ελλειψη για εμας: το font-synthesis ειναι κλειστο, αρα ψευτικο bold η ψευτικη κλιση δεν θα εβγαινε ποτε — θα επεφτε σιωπηλα στο 400. Με ρητο 400 ξερουμε τι βλεπουμε. */ @font-face { font-family: 'GFS Didot'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gfsdidot-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } @font-face { font-family: 'GFS Didot'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gfsdidot-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'GFS Didot'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gfsdidot-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/arimo-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/arimo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/arimo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══════════════════════════════════════════════════════════════════════ AKT — γκροτεσκ, μεταβλητη 100-900 (βημα 043 - 30/09/2026) Για τους τιτλους αρθρων. Το πιο κοντινο δωρεαν ΜΕ ΕΛΛΗΝΙΚΑ στη Founders Grotesk, που δεν εχει ελληνικα καθολου. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Akt'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/akt-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Akt'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/akt-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Akt'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/akt-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══════════════════════════════════════════════════════════════════════ FIRA SANS — Η ΓΡΑΜΜΑΤΟΣΕΙΡΑ ΤΗΣ ΣΚΑΛΩΣΙΑΣ (βημα 160 - 13/10/2026) Επιλογη του χρηστη, μετα απο συγκριση οκτω υποψηφιων σε πραγματικα μεγεθη. Αντικαθιστα τη Sofia Sans Condensed στο --pg-font-cond: κατηγοριες, υπογραφη, ημερομηνια, μπαρα header, pager, footer. ΤΟ ΓΙΑΤΙ ΕΦΥΓΕ Η SOFIA CONDENSED Το στενεμα διαλεχτηκε στο βημα 044 για να λυσει προβλημα ΠΛΑΤΟΥΣ — 18% στενοτερη απο την PF Spekk, ωστε να χωρανε οι μακριες ελληνικες κατηγοριες. Αυτο το προβλημα ΔΕΝ υπαρχει πια: η σκαλωσια μετακινηθηκε σε δικες της γραμμες με δικο της πλατος. Εμεινε μονο η παρενεργεια — στενα γραμματα ΜΑΖΙ με letter-spacing .17em τραβανε αντιθετα, και αυτο ειναι που ενοχλουσε. ───────────────────────────────────────────────────────────────────── ΠΡΟΣΟΧΗ: ΔΕΝ ΕΙΝΑΙ VARIABLE. ΤΕΣΣΕΡΑ ΧΩΡΙΣΤΑ ΒΑΡΗ. Ολες οι αλλες οικογενειες εδω ειναι μεταβλητες (font-weight: 100 900 σε ενα αρχειο). Η Fira Sans ΔΕΝ εχει variable εκδοση — ουτε στο Google ουτε upstream. Επιβεβαιωθηκε: το αιτημα `family=Fira+Sans:wght@300..700` επιστρεφει «400: Font family not found». Αρα: 4 βαρη × 3 subsets = 12 αρχεια, ενα @font-face το καθενα. Υπαρχουν 400 / 500 / 600 / 700 — και ΜΟΝΟ αυτα. Σε χρηση σημερα ειναι το 600 (υπογραφη, ημερομηνια, footer) και το 700 (κατηγοριες, μπαρα header, επικεφαλιδες ενοτητων). Το 400 και το 500 μπαινουν ΤΩΡΑ ωστε να μη χρειαστει να επαναληφθει ολη η δουλεια για ενα βαρος· ο browser ΔΕΝ τα κατεβαζει αν δεν τα ζητησει κανεις κανονας — το unicode-range και το weight matching το εγγυωνται. ΑΝ ζητηθει βαρος που δεν υπαρχει (300, 800, 900), ο browser ΔΕΝ αφηνει κενο: φτιαχνει ΨΕΥΤΙΚΟ bold, που μουτζουρωνει τους ελληνικους τονους σε 14px γκρι. Γραφε μονο 400/500/600/700, η βαλε font-synthesis: none για να φανει το λαθος αντι να κρυφτει. ───────────────────────────────────────────────────────────────────── ΚΟΣΤΟΣ: 268KB στον δισκο, ~18KB στο δικτυο. Ο χρηστης κατεβαζει ΜΟΝΟ fira-greek-600 (8,9KB) + fira-greek-700 (9,0KB), γιατι το unicode-range αποκλειει τα latin αρχεια για ελληνικο κειμενο. ═══════════════════════════════════════════════════════════════════════ */ /* ── 400 — regular. Κληρονομειται οπου δεν οριζεται βαρος: .search-advanced summary, .search-result__info, .siteFooter__bottom, .headerSearch__field ───────────────────── */ @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/fira-greek-400.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/fira-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/fira-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── 500 — medium. Καμια χρηση σημερα· εφεδρεια. ─────────────────── */ @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/fira-greek-500.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/fira-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/fira-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── 600 — semibold. ΥΠΟΓΡΑΦΗ + ΗΜΕΡΟΜΗΝΙΑ + footer. sections.css: .article__info, .siteFooter links ────────────── */ @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/fira-greek-600.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/fira-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/fira-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── 700 — bold. ΚΑΤΗΓΟΡΙΕΣ + ΜΠΑΡΑ HEADER + επικεφαλιδες ενοτητων. header.css: .header__cats · front-grid.css: .category__title sections.css: .article__category, .article__parentCategory ─── */ @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/fira-greek-700.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/fira-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/fira-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══════════════════════════════════════════════════════════════════════ GIDOLE — μινιμαλ γεωμετρικη (βημα 042 - 30/09/2026) ΠΡΟΣΟΧΗ: ΕΝΑ μονο βαρος, το 400. Δεν υπαρχει bold. Οπου την χρησιμοποιουμε ΠΡΕΠΕΙ font-weight: 400 και font-synthesis: none — αλλιως ο browser φτιαχνει ψευτικο bold που μουτζουρωνει, ιδιως τους ελληνικους τονους. Η ιεραρχια στηριζεται σε ΜΕΓΕΘΟΣ και ΧΡΩΜΑ. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Gidole'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gidole-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Gidole'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gidole-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Gidole'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gidole-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══════════════════════════════════════════════════════════════════════ SOFIA SANS — κανονικο πλατος (βημα 042 - 30/09/2026) Ιδια οικογενεια με τη Condensed, αλλο πλατος. Για τους τιτλους αρθρων. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(../fonts/sofia-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(../fonts/sofia-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(../fonts/sofia-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══════════════════════════════════════════════════════════════════════ SOFIA SANS CONDENSED — variable, self-hosted (βημα 034 - 30/09/2026) Στενη γροτεσκ για τους τιτλους ενοτητων. Βαρος 100-1000 (οχι 900) — στο 800-900 στενο δινει την πυκνοτητα που θελαμε απο το RA. Ελληνικα επαληθευμενα. Self-hosted για τον ιδιο λογο με τη Geologica. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(../fonts/sofia-cond-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(../fonts/sofia-cond-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(../fonts/sofia-cond-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══════════════════════════════════════════════════════════════════ GEOLOGICA — variable, self-hosted (βημα 018 - 29/09/2026) ΟΧΙ απο το CDN της Google: το site ειναι ελληνικο/ΕΕ και το fonts.googleapis.com στελνει IP του επισκεπτη στις ΗΠΑ. Γερμανικο δικαστηριο το εκρινε παραβιαση GDPR (LG Munchen, 20.01.2022). Τοπικα ειναι και ταχυτερο — μια συνδεση λιγοτερη. Ενα αρχειο ανα subset, με unicode-range: ο browser κατεβαζει ΜΟΝΟ οσα χρειαζεται. Ελληνικη σελιδα -> greek (19KB) + latin (48KB). Το latin-ext (42KB) μπαινει μονο αν εμφανιστει χαρακτηρας του. Ειναι ΜΙΑ variable: 100-900 βαρος και οι αξονες SHRP/CRSV, ολα απο το ιδιο αρχειο. ═══════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Geologica'; font-style: oblique 0deg 12deg; font-weight: 100 900; font-display: swap; src: url(../fonts/geologica-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Geologica'; font-style: oblique 0deg 12deg; font-weight: 100 900; font-display: swap; src: url(../fonts/geologica-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geologica'; font-style: oblique 0deg 12deg; font-weight: 100 900; font-display: swap; src: url(../fonts/geologica-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══════════════════════════════════════════════════════════════════════ ROBOTO CONDENSED — στενη γκροτεσκ, μεταβλητη 100-900 (βημα 050 - 01/10/2026) Η επιλογη για τους τιτλους αρθρων. Στενη, αρα οι ελληνικοι τιτλοι — που ειναι μακρυτεροι απο τους αγγλικους — σπανε σε λιγοτερες σειρες μεσα στο πλεγμα των 3 στηλων. Ελεγχθηκε με fontTools: 75 ελληνικα codepoints, ολοι οι τονοι και τα διαλυτικα παροντα, upm 2048, cap height 1456/2048 = 0.711em. ΠΡΟΣΟΧΗ: το Google δηλωνει font-weight: 400 700 στο CSS του, αλλα ο αξονας μεσα στο αρχειο ειναι 100-900 — γι' αυτο δηλωνουμε ολο το ευρος. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/robotocond-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/robotocond-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/robotocond-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══════════════════════════════════════════════════════════════════ popup.gr — design tokens για το dark redesign ΔΕΝ πειράζει τα υπάρχοντα tokens (--lightColor, --regularColor κ.λπ.). Νέο namespace --pg-*, ώστε οι 22.400 γραμμές του mainsite.css να συνεχίσουν να δουλεύουν ακριβώς όπως τώρα. Η μετάβαση γίνεται σταδιακά, component-component. Οι λόγοι αντίθεσης είναι υπολογισμένοι κατά WCAG 2.1 πάνω σε #121212. ═══════════════════════════════════════════════════════════════════ */ /* html:root αντί :root — έχει μεγαλύτερη specificity (0,1,1 έναντι 0,1,0), άρα κερδίζει ανεξάρτητα από τη σειρά φόρτωσης των stylesheets. */ html:root { /* ── Επιφάνειες ──────────────────────────────────────────────── Elevation με φωτεινότητα, όχι με σκιά: στο σκούρο οι σκιές δεν διαβάζονται. */ --pg-bg: #121212; /* βάση σελίδας */ --pg-surface-1: #1a1a1a; /* κάρτες */ --pg-surface-2: #222222; /* ανυψωμένα */ --pg-border: #2e2e2e; /* περιγράμματα */ /* ── Κείμενο ────────────────────────────────────────────────── ΠΟΤΕ #ffffff: 21:1 προκαλεί halation, τα γράμματα «δονούνται» σε αστιγματισμό (~30% του πληθυσμού). */ --pg-text: #e8e8e8; /* 15.3:1 AAA */ --pg-text-muted: #a0a0a0; /* 7.2:1 AAA */ --pg-text-faint: #6e6e6e; /* 3.7:1 μόνο ≥24px */ /* ── Brand ─────────────────────────────────────────────────── Το #dc2833 δίνει 3.92:1 σε σκούρο — ΚΟΒΕΤΑΙ στο AA για κείμενο. Το --pg-brand-on-dark κρατά ακριβώς το ίδιο hue (356.3°) και saturation (72%), μόνο η φωτεινότητα ανεβαίνει 51% → 63%. */ --pg-brand: #dc2833; /* γεμίσματα, γραφικά — αρκεί 3:1 */ --pg-brand-on-dark: #e55d65; /* κείμενο & links σε σκούρο — 5.43:1 AA */ --pg-brand-hover: #ea7b81; /* Λευκό κείμενο πάνω σε --pg-brand γέμισμα: 4.78:1 — περνάει AA. */ /* ── Τυπογραφία — PF Spekk, η brand γραμματοσειρά ───────────── Σε σκούρο φόντο το λευκό φαίνεται βαρύτερο: χρησιμοποιούμε Medium εκεί που σε λευκό θα βάζαμε SemiBold/Bold. */ --pg-font-body: PFSpekkVARRegular, Arial, sans-serif; --pg-font-medium: PFSpekkVARMedium, Arial, sans-serif; --pg-font-display: Geologica, PFSpekkVARSemiBold, Arial, sans-serif; /* ── Η «σκαλωσια»: κατηγοριες, υπογραφη, ημερομηνια, μπαρα header ── ΒΗΜΑ 160 (13/10/2026): Fira Sans, αντι Sofia Sans Condensed. Επιλογη του χρηστη μετα απο συγκριση οκτω υποψηφιων. ΤΟ ΟΝΟΜΑ --pg-font-cond ΜΕΝΕΙ ΛΑΘΟΣ ΕΠΙΤΗΔΕΣ. Το «cond» σημαινε condensed, και η Fira Sans ΔΕΝ ειναι στενη. Το σωστο ονομα θα ηταν --pg-font-meta. ΔΕΝ μετονομαζεται τωρα: ο token διαβαζεται απο 13 σημεια σε 3 αρχεια, και μια μισοτελειωμενη μετονομασια θα αφηνε καποια να πεφτουν στο inline fallback 'Sofia Sans Condensed' — δηλαδη ΔΥΟ γραμματοσειρες στη σκαλωσια, σιωπηλα. Οταν μετονομαστει, μετονομαζονται ΚΑΙ τα 13 fallbacks στην ιδια κινηση. ΤΟ FALLBACK ΕΙΝΑΙ Arial, ΟΧΙ Sofia Condensed — ΕΠΙΤΗΔΕΣ. Η Sofia Condensed ειναι ακομα φορτωμενη και θα ηταν «ομαλοτερο» fallback. Ακριβως γι' αυτο δεν μπαινει: αν τα 12 αρχεια fira-* δεν ανεβουν σωστα, με Sofia fallback το site θα εδειχνε ΑΠΑΡΑΛΛΑΚΤΟ και θα κυνηγουσαμε φαντασματα (μας εχει συμβει: block_13, βημα 119). Με Arial, η αποτυχια ειναι ΟΡΑΤΗ αμεσως. */ --pg-font-cond: 'Fira Sans', Arial, sans-serif; /* ── Τιτλοι αρθρων: ROBOTO CONDENSED ─────────────────────────── Επιλογη του χρηστη, βημα 050. Στενη γκροτεσκ, μεταβλητη 100-900, ελεγμενα ελληνικα (75 codepoints, ολοι οι τονοι). Το ΓΙΑΤΙ: οι ελληνικοι τιτλοι ειναι μακρυτεροι απο τους αγγλικους για το ιδιο νοημα. Μια στενη γραμματοσειρα χωραει περισσοτερους χαρακτηρες στη σειρα, αρα λιγοτερο σπασιμο μεσα στο πλεγμα των 3 στηλων — χωρις να μικρυνει το μεγεθος. Fallback: PF Spekk (η αρχικη του site) πριν την Arial, ωστε αν καποτε λειψει το woff2 να πεσει σε κατι σχεδιασμενο για ελληνικα κι οχι σε Arial. ΔΟΚΙΜΑΣΕ αλλο — ολες ηδη κατεβασμενες, αλλαζεις μονο εδω: 'Inter' · 'Arimo' · 'Akt' · 'Gidole' · 'Sofia Sans' PFSpekkVARSemiBold (η αρχικη) · Geologica (του hero) */ /* βημα 113 — ΟΛΟΙ οι τιτλοι Geologica. Ητανε 'Roboto Condensed'. Δειχνει στο --pg-font-display, αρα carousel, επικεφαλιδες ενοτητων, κριτικες και καρτες ειναι ΜΙΑ οικογενεια, μια ρυθμιση. Η μεταβλητη μενει ξεχωριστη ωστε να μπορουν να ξαναχωρισουν. */ --pg-font-title: var(--pg-font-display, Geologica, Arial, sans-serif); /* Editorial serif — τιτλοι σε πλαγια, τυπου περιοδικου (βημα 095) */ --pg-font-serif: 'Literata', SourceSerifProRegular, Georgia, serif; /* 600 και οχι 400: οι στενες γραμματοσειρες δειχνουν πιο αδυνατες στο ιδιο βαρος, γιατι το ιδιο παχος κορμου μοιραζεται σε μικροτερο πλατος. Ο αξονας ειναι 100-900, αρα δοκιμασε ελευθερα 500 ή 700. */ /* Βαρος τιτλων αρθρων. Η Roboto Condensed ειναι variable 100-900, αρα καθε τιμη ειναι ΠΡΑΓΜΑΤΙΚΟ σχεδιο — οχι συνθεση. βημα 099: 600 → 500. Σε σκουρο φοντο τα γραμματα δειχνουν πιο βαρια απ' οσο ειναι (ο φωτεινος παλμος «φουσκωνει» τις γραμμες), αρα το ιδιο βαρος που ειναι σωστο σε λευκο βγαινει χοντρο εδω. */ --pg-title-wght: 500; /* ── Οι αξονες της Geologica — εδω ειναι το «custom» ────────── Σχεδον κανεις δεν τους πειραζει, γι' αυτο δεν μοιαζει με στοκ γραμματοσειρα. Αλλαζε ΜΟΝΟ εδω. */ --pg-display-shrp: 100; /* 0 στρογγυλες γωνιες … 100 κοφτερες */ --pg-display-crsv: 0; /* 0 ορθια … 1 καλλιγραφικα α/ε/ν */ --pg-display-wght: 700; /* 100 … 900 */ /* ── Μεγέθη ────────────────────────────────────────────────── ≥17px στο σώμα: οι ελληνικοί τόνοι θέλουν χώρο. */ --pg-text-body: 1.0625rem; /* 17px */ --pg-text-article: var(--articleFontSize, 20px); --pg-text-meta: 0.875rem; /* 14px */ /* ── Διαστάσεις ────────────────────────────────────────────── Δανείζονται τα υπάρχοντα όπου υπάρχουν. */ --pg-wrap: 1280px; --pg-measure: var(--contentMaxWidth, 708px); /* πλάτος ανάγνωσης */ --pg-header-h: var(--headerHeight, 48px); /* Hero: 100svh = full screen. 88svh αφήνει την επόμενη σειρά να ξεμυτίζει. ΟΧΙ vh — σπάει με τη μπάρα URL στα κινητά. */ --pg-hero-h: 100svh; } /* ── Ad slots ───────────────────────────────────────────────────── Σε σκούρο site τα creatives (φτιαγμένα για λευκό) λάμπουν σαν φακοί. Ανοιχτόχρωμο panel → δείχνει σκόπιμο, όχι σπασμένο. */ html:root { --pg-ad-bg: #f4f1ea; --pg-ad-ink: #6b6355; --pg-ad-border: #c3bcac; } /* ═══════════════════════════════════════════════════════════════════════ ΤΟ TOKEN ΝΑ ΕΛΕΓΧΕΙ ΟΝΤΩΣ ΤΗ ΣΕΛΙΔΑ (βημα 033 - 30/09/2026) Β32 — Το --pg-bg ητανε διακοσμητικο. Το οριζαμε #121212, αλλα το φοντο της σελιδας το εβαζε το mainsite.css: body.lookLayout { background-color: rgb(21,21,21); } (0,1,1) = #151515 Αρα η σελιδα ηταν #151515 και το hero ελιωνε σε #121212 — τρεις μοναδες αποκλιση, ορατη ραφη ακριβως εκει που δεν την θελαμε. Χρειαζεται (0,1,2) για να κερδισει: html + μια κλαση + body. Σκετο "html body" (0,0,2) ΧΑΝΕΙ απο το (0,1,1) — η κλαση μετραει περισσοτερο απο δυο στοιχεια. Το body.darkBgPage (#404040) ΔΕΝ πειραζεται: ειναι σκοπιμη παραλλαγη για συγκεκριμενες σελιδες. ═══════════════════════════════════════════════════════════════════════ */ html body, html body.lookLayout { background-color: var(--pg-bg); } /* ═══════════════════════════════════════════════════════════════════════ ΕΞΟΜΑΛΥΝΣΗ ΓΡΑΜΜΑΤΩΝ ΣΕ ΣΚΟΥΡΟ (βημα 045 - 30/09/2026) Το macOS κανει subpixel antialiasing. Σε ΛΕΥΚΑ γραμματα πανω σε ΣΚΟΥΡΟ αυτο τα παχαινει, και οχι ομοιομορφα: καποια «φουσκωνουν» περισσοτερο αναλογα με το που πεφτουν στο pixel grid. Το αποτελεσμα μοιαζει με «μερικα γραμματα ειναι πιο χοντρα». Το antialiased/grayscale γυριζει σε εξομαλυνση κλιμακας του γκρι: ολα τα γραμματα παχαινουν το ΙΔΙΟ, δηλαδη καθολου. ΠΡΟΣΟΧΗ: σε ΑΝΟΙΧΤΟ φοντο κανει το αντιθετο — αδυνατιζει το κειμενο και το κανει δυσαναγνωστο. Μπαινει ΜΟΝΟ επειδη το site ειναι σκουρο. ═══════════════════════════════════════════════════════════════════════ */ html body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* ΒΑΣΙΚΗ ΓΡΑΜΜΑΤΟΣΕΙΡΑ ΣΩΜΑΤΟΣ (βημα 064 - 02/10/2026) Το mainsite.css:2901 εχει body { font-family: SourceSerifProRegular, Georgia, serif } κληρονομια του παλιου θεματος. Οτιδηποτε ΔΕΝ οριζει δικη του γραμματοσειρα — standfirst, φορμες, υποσελιδο — εβγαινε σεριφ. (0,0,2) εναντι (0,0,1). ΔΕΝ πειραζουμε το mainsite: · αν σβηνοταν ο κανονας, το body θα επεφτε σε Times, οχι σε εμας · υπαρχει και δευτερο αντιγραφο, «mainsite 2.css» (ευρημα Β03) · αλλαγη μεσα σε ξενο 400KB αρχειο δεν καταγραφεται και δεν επαναφερεται ΠΡΟΣΟΧΗ: αγγιζει ΚΑΙ το σωμα των αρθρων. Αν καποτε θελησεις σεριφ εκει — που ειναι συνηθης επιλογη σε μακρυ κειμενο, το κανει και το Pitchfork — η εξαιρεση ειναι: body.textPage .articleBody { font-family: SourceSerifProRegular, Georgia, serif; } */ font-family: var(--pg-font-body, PFSpekkVARRegular, Arial, sans-serif); /* ΒΑΣΙΚΟ ΧΡΩΜΑ ΚΕΙΜΕΝΟΥ (βημα 076 - 05/10/2026) Το mainsite.css:2902 εχει body { color: #171717 } — σχεδον μαυρο, κληρονομια του φωτεινου θεματος. Στην αρχικη δεν φαινοταν, γιατι καθε στοιχειο εκει παιρνει χρωμα απο το sections.css. Στις σελιδες αρθρου ομως το κειμενο ΚΛΗΡΟΝΟΜΕΙ — αρα ολο το σωμα του αρθρου ηταν μαυρο σε σκουρο. (0,0,2) εναντι (0,0,1). ΠΡΟΣΟΧΗ: οτι εχει inline style color δεν πιανεται απο εδω. Το «Σχετικο Αρθρο» που χτιζεται με PHP στο popup_v1.theme εχει inline color:#000000 στον τιτλο και #888888 στα μετα — χρειαζεται ξεχωριστη αντιμετωπιση. */ color: var(--pg-text, #e8e8e8); }