/* ============================================================================ tokens.css — Το οπτικό σύστημα. Ξαναρυθμίστηκε στη λογική του «example of simple booking form»: ήσυχες επιφάνειες, λεπτές γραμμές αντί για σκιές, ελαφριά τυπογραφία, μικρότερες γωνίες. Το ναυτικό μπλε είναι η κύρια ενέργεια, το χρυσό μένει ΜΟΝΟ για τονισμό — αριθμοί ενοτήτων, επιλεγμένη κατάσταση, το σήμα της εταιρείας. Κάθε οθόνη διαβάζει από εδώ. Αλλάζεις τιμή εδώ, αλλάζει όλη η εφαρμογή. ========================================================================== */ :root { /* ⚠ ΑΥΤΗ Η ΓΡΑΜΜΗ ΕΙΝΑΙ Ο ΛΟΓΟΣ ΠΟΥ ΤΑ ΚΟΥΤΙΑ ΗΤΑΝ ΑΣΠΡΑ ΣΤΗ ΝΥΧΤΑ. Χωρίς `color-scheme`, ο browser ζωγραφίζει ΟΛΑ τα δικά του χειριστήρια στο ανοιχτό: το ημερολόγιο του και το εικονίδιό του, το κουμπί «Choose File», το × της αναζήτησης, τα βελάκια του number, και κάθε checkbox χωρίς στυλ. Το δικό μας CSS δεν τα φτάνει — μόνο αυτό. */ color-scheme: light; /* ── Brand ─ Athenian Heritage Executive (από το esdocs.html) ────────── */ /* ── Η ΚΥΡΙΑ ΕΝΕΡΓΕΙΑ ΕΙΝΑΙ ΧΡΥΣΗ ──────────────────────────────────────── Αποφασίστηκε 30.08.2026. Ήταν ναυτικό μπλε και δεν ξεχώριζε από το υπόλοιπο chrome· ζητήθηκε πρώτα κόκκινο, αλλά το κόκκινο ΕΙΝΑΙ ΗΔΗ η διαγραφή (`--crit`, 28 σημεία) και «Αποθήκευση» δίπλα σε «Διαγραφή» στο ίδιο χρώμα είναι λάθος που κοστίζει δεδομένα. Χρυσό: το χρώμα της μάρκας, δεν συγκρούεται με τίποτα. ⚠ ΤΟ ΚΕΙΜΕΝΟ ΕΙΝΑΙ ΝΑΥΤΙΚΟ, ΟΧΙ ΛΕΥΚΟ. Μετρημένη αντίθεση: λευκό σε χρυσό 2,46:1 (κόβεται), ναυτικό σε χρυσό 7,16:1 (περνάει). Στη νύχτα 1,82:1 και 9,65:1 αντίστοιχα. Το λευκό ΔΕΝ διαβάζεται. */ /* ⚠ ΓΕΜΙΣΜΑ ≠ ΜΕΛΑΝΙ — Ο ΚΑΝΟΝΑΣ ΠΟΥ ΕΜΑΘΕ Η ΕΦΑΡΜΟΓΗ ΜΕ ΤΟΝ ΔΥΣΚΟΛΟ ΤΡΟΠΟ. Δοκιμάστηκε φωτεινό χρυσό #f5b753 (04.09.2026) και ΑΠΟΡΡΙΦΘΗΚΕ από τον ιδιοκτήτη: «δεν ταιριάζει με την υπόλοιπη εφαρμογή». Τα μαθηματικά συμφωνούν. Σε OKLCH: τα δύο κρεμ της παλέτας H 84,6° · C 0,006-0,011 το ναυτικό H 258° · C 0,048 ΤΟ ΧΡΥΣΟ #c5a059 H 82,3° · C 0,100 ← δύο μοίρες από τα κρεμ το απορριφθέν #f5b753 H 76,6° · C 0,136 ← οκτώ μοίρες, +36% καθαρότητα Δηλαδή δύο λάθη μαζί: λάθος κατεύθυνση απόχρωσης (προς το πορτοκαλί) ΚΑΙ υπερβολικός κορεσμός σε παλέτα όπου όλα τα άλλα είναι μουντά. Το χρυσό είναι το ΜΟΝΟ χρωματικό πράγμα εδώ· πάνω από ~0,11 σταματά να είναι τονισμός και γίνεται φωνή. ⚠ Αν ξαναδοκιμάσεις χρυσό, κράτα H 81-85 και C 0,09-0,115. ⚠ Ο ΚΑΝΟΝΑΣ ΠΟΥ ΕΜΕΙΝΕ ΑΠΟ ΕΚΕΙΝΗ ΤΗ ΔΟΚΙΜΗ, ΚΑΙ ΙΣΧΥΕΙ ΓΙΑ ΚΑΘΕ ΧΡΩΜΑ: το `--gold` είναι ΜΟΝΟ γέμισμα και περίγραμμα. Κάθε `color:` περνά από `--gold-ink` (εικονίδια, έντονο) ή `--gold-text` (μικρό κείμενο), που είναι ΣΚΟΥΡΑ στο φως και ΑΝΟΙΧΤΑ στη νύχτα. Δέκα κανόνες έβαφαν εικονίδια με `var(--gold)` και μετρούσαν 2,38:1 σε κρεμ — κάτω από το όριο 3:1 για εικονίδια. Με το `--gold-ink` μετρούν 3,96:1. */ /* ⚠ ΚΟΚΚΙΝΗ ΑΠΟ ΤΙΣ 06.09.2026 — ΑΠΟΦΑΣΗ ΤΟΥ ΑΦΕΝΤΙΚΟΥ, ΟΧΙ ΣΧΕΔΙΑΣΤΙΚΗ. Λόγια του ιδιοκτήτη: «i know it's not a good choice but my boss wants it that way, he says it is so that he notices and doesn't forget to click it». Ό,τι γράφει παραπάνω για το γιατί η κύρια ενέργεια ήταν χρυσή ΙΣΧΥΕΙ ΑΚΟΜΗ ως συλλογισμός — απλώς νικήθηκε από τον άνθρωπο που πληρώνει. Το χρυσό μένει παντού αλλού (--gold*). Το κόκκινο εδώ είναι ΜΟΝΟ η κύρια ενέργεια: `.btn-primary` (Καταχώρηση, Αποθήκευση, Νέα κράτηση…) και ο πλωτήρας «+». Το `--crit` (σφάλματα, διαγραφή) είναι άλλο κόκκινο και άλλη σημασία — ΜΗΝ τα ενώσεις σε ένα token. Γράμματα ΛΕΥΚΑ: λευκό σε #d32f2f = 4,98:1 (AA)· το ναυτικό θα μετρούσε 3,5:1. Η σκιά/λάμψη (--action-glow) ακολουθεί το χρώμα, όπως πριν η χρυσή. Η απόχρωση #d32f2f (ίδια μέρα και νύχτα) ΔΙΑΛΕΧΤΗΚΕ από τον ιδιοκτήτη ανάμεσα σε 5 δείγματα (06.09.2026) — δεν είναι προσωρινή. */ --action: #d32f2f; --action-d: #b71c1c; /* πέρασμα: πιο σκούρο */ --action-ink: #ffffff; --action-ring: rgba(211,47,47,.36); --action-glow: rgba(211,47,47,.70); --gold: #d0ab64; /* ΓΕΜΙΣΜΑ και περίγραμμα — ποτέ κείμενο σε ανοιχτό */ --gold-l: #e3c88b; --gold-ink: #a8843f; /* εικονίδια + έντονο κείμενο· 3,37:1 σε κρεμ */ --gold-soft: rgba(208,171,100,.07); --gold-glow: rgba(208,171,100,.30); /* η λάμψη πίσω από το πλακίδιο */ --gold-soft2: rgba(208,171,100,.14); --navy: #0a192f; --navy-l: #0d1c32; /* Η κύρια ενέργεια. Ένα κουμπί ανά οθόνη το φοράει. */ --primary: #0a192f; --primary-d: #11233e; /* ── Ουδέτερα ─────────────────────────────────────────────────────────── */ --ink: #1a1a1a; --ink-2: #3d4650; --muted: #56606e; /* Ήταν #8a93a0 — 3.0:1 πάνω στο γυαλί, έπεφτε κάτω από το AA. Οι μικρές ετικέτες (.nav-label, .tw-head) είναι οι πρώτες που χάνονται. */ --faint: #667080; --line: rgba(10,25,47,.13); --line-2: rgba(10,25,47,.07); --bg1: #fdfbf7; --bg2: #f6f2ea; /* Οι επιφάνειες είναι ΔΙΑΦΑΝΕΙΣ όπως στο esdocs — το φρεσκάρισμα το δίνει το backdrop-filter του δοχείου. Τα -solid μένουν για τα a11y overrides. */ --card: rgba(255,255,255,.62); --card-2: rgba(238,229,207,.55); --field: rgba(255,253,249,.68); --card-solid: #ffffff; --card2-solid: #f6f2ea; --field-solid: #fffdf9; --overlay: rgba(10,25,47,.44); /* ── Γυαλί — το «liquid glass» του esdocs (esdocs.html 19-25, 33-35) ─── ⚠ ΠΡΟΣΟΧΗ ΣΤΗ ΜΕΤΑΦΡΑΣΗ: στο esdocs το --line είναι το ΑΧΝΟ (.07) και το --line-2 το δυνατό (.13). Εδώ ισχύει το ΑΝΤΙΣΤΡΟΦΟ. Κάθε κανόνας που έρχεται από το esdocs και λέει `var(--line)` γράφεται εδώ `var(--line-2)`. */ --glass: rgba(255,255,255,.58); /* υπο-επιφάνειες μέσα σε κάρτα */ --glass-2: rgba(255,255,255,.72); /* μπάρες, sidebar, ghost κουμπιά */ --glass-strong: rgba(255,255,255,.86); /* modal / αναδυόμενο φύλλο */ --card-glass: rgba(255,255,255,.60); /* η κάρτα — το --card του esdocs */ --hair: rgba(255,255,255,.85); /* η φωτισμένη πάνω ακμή */ --blur: saturate(140%) blur(20px); --blur-lg: saturate(150%) blur(34px); /* ΠΛΑΚΑ — υπόστρωμα για ΠΥΚΝΕΣ γραμμές δεδομένων. Από 01.09.2026 κι αυτή διαφανής (απόφαση ιδιοκτήτη: «γυαλί ΠΑΝΤΟΥ όπως στο esdocs») — λίγο πιο αδιαφανής από την κάρτα, και το θόλωμα του δοχείου κρατά την ανάγνωση. */ --plate: rgba(255,255,255,.66); --plate-2: rgba(246,240,228,.60); /* hover / zebra της πλάκας */ --plate-solid: #ffffff; --plate2-solid: #f8f5ef; /* Χρυσό που κουβαλάει ΛΕΞΕΙΣ. Το --gold-ink μένει για δαχτυλίδια, κουκκίδες και περιγράμματα — εκεί δεν χρειάζεται αναγνωσιμότητα κειμένου. */ --gold-text: #8c6c2e; /* μικρό κείμενο· 4,73:1 σε κρεμ */ /* ── Σημασιολογικά ────────────────────────────────────────────────────── */ --ok: #4d7c57; --ok-soft: rgba(77,124,87,.12); --warn: #b07d1a; --warn-soft: rgba(176,125,26,.14); --crit: #ba1a1a; --crit-soft: rgba(186,26,26,.10); --info: #3a5f9e; --info-soft: rgba(58,95,158,.12); /* ── Η λωρίδα προόδου της μεταφοράς ─────────────────────────────────────── ΞΕΧΩΡΙΣΤΑ χρώματα, όχι τα σημασιολογικά. Η λωρίδα είναι 3px: το `--gold` και το `--warn` (#b07d1a) είναι και τα δύο κιτρινωπά και σε τόσο λεπτή γραμμή ΔΕΝ ξεχωρίζουν — ενώ εδώ σημαίνουν «δεν ξεκίνησε τίποτα» και «ο πελάτης δεν ήρθε», δηλαδή τα δύο άκρα. Καθαρό κίτρινο vs καθαρό πορτοκαλί, με τη μόνη δουλειά να διαβάζονται με μια ματιά. */ --st-wait: #eec200; /* κίτρινο — δημιουργήθηκε, τίποτα ακόμη */ --st-enroute: #2f6fd0; /* μπλε — ξεκίνησε ο οδηγός */ --st-onsite: #7c53c9; /* μοβ — έφτασε, περιμένει */ --st-onboard: #2e8b57; /* πράσινο — επιβάτης μέσα */ /* ΕΝΑ κόκκινο για τα δύο «δεν έγινε»: ακύρωση και no-show. Ξεχωρίζουν από το ΣΩΜΑ της κάρτας — η ακυρωμένη ξεθωριάζει και τσακίζεται, όχι από τη λωρίδα. Η «άχρωμη» δεν έχει token: είναι κυριολεκτικά διαφανής. */ --st-stop: #ba1a1a; /* κόκκινο — ακυρώθηκε ή δεν ήρθε */ /* ── Χρώμα ανά τρόπο είσπραξης (εικονίδια κεφαλίδας ημέρας) ────────────── Ο ιδιοκτήτης τα ζήτησε ονομαστικά: πράσινο μετρητά, πορτοκαλί POS, μπλε γραφείο, κόκκινο δωρεάν. ΔΕΝ είναι τα `--pay-*` που χρωματίζουν τα σήματα πληρωμής μέσα στην κάρτα — εκείνα είναι ξεθωριασμένα επίτηδες («δεν είναι σημαία»), ενώ εδώ το χρώμα ΕΙΝΑΙ ο τρόπος που ξεχωρίζεις τα κουτιά. */ --ic-cash: #1f8a4c; --ic-pos: #d97706; --ic-office: #2563c9; --ic-prepaid: #6b5aa8; --ic-later: #0f7d86; --ic-free: #c62828; /* ── «ΧΩΡΙΣ ΟΔΗΓΟ» — το πορτοκαλί τσιπ του Ημερολογίου (27.09.2026) ─────── Ο ιδιοκτήτης το ζήτησε ΠΟΡΤΟΚΑΛΙ. ΔΙΚΟ ΤΟΥ token, επίτηδες: • ΟΧΙ `--ic-pos`: το πορτοκαλί του POS κάθεται ΑΚΡΙΒΩΣ από κάτω, στα πλακίδια της ημέρας — ίδιο χρώμα θα έλεγε «αυτά είναι τα POS». • ΟΧΙ `--warn`: μουσταρδί, διαβάζεται σαν το χρυσό της επιλογής. • ΟΧΙ ΚΟΚΚΙΝΟΤΕΡΟ: τα ΚΟΚΚΙΝΑ της εφαρμογής κάθονται ΔΙΠΛΑ — τα Έξοδα / Κόστος στα πλακίδια (`--ic-free`) και ο πλωτήρας (`--action`). Καμένο πορτοκαλί (OKLCH h≈47°): ανάμεσα στο κόκκινο (h≈27°) και στο POS (h≈58°), σκούρο όσο χρειάζεται για 10px γράμματα. ⚠ Η ΠΡΩΤΗ ΤΙΜΗ ΗΤΑΝ #c2410c (h≈38°) ΚΑΙ ΑΠΟΡΡΙΦΘΗΚΕ ΣΤΟΝ ΕΛΕΓΧΟ: ΔE 4,5 από το `--ic-free` και 4,9 από το `--action` — στα 375px, δίπλα στα κόκκινα «20 €» των πλακιδίων, διαβαζόταν σκουριά-κόκκινο, όχι πορτοκαλί. Είχαν μετρηθεί μόνο POS/warn/χρυσό — ΜΕΤΡΑ ΚΑΙ ΤΟΥΣ ΓΕΙΤΟΝΕΣ. Μετρημένο (OKLab ΔE×100, μέτρο: POS↔warn = 7,1, που η παλέτα ήδη ξεχωρίζει): --ic-free 7,6 · --action 8,4 · --crit 8,3 · POS 12,4 · warn 11,0 · --gold-text 9,1 · χρυσό 23. Αντίθεση: στην κάρτα 5,03-5,17:1, σκέτο φόντο 4,69-5,07:1 (≥4,5 → ΚΑΙ για το όνομα 10px) · λευκά γράμματα στο χαπάκι 5,24:1 · εικονίδιο πάνω στο `-soft` ≥4,14:1 (όριο 3:1). */ --nodriver: #b34e03; --nodriver-ink: #ffffff; /* γράμματα ΠΑΝΩ στο πορτοκαλί (αριθμός) */ --nodriver-soft: rgba(179,78,3,.14); /* ο δίσκος πίσω από το εικονίδιο */ --nodriver-line: rgba(179,78,3,.45); /* η λεπτή ακμή του δίσκου */ /* ── Οι μπάρες του Analytics (06.09.2026) ───────────────────────────────── Ίδιες οικογένειες με τα `--ic-*` της κεφαλίδας (πράσινο μετρητά, μπλε γραφείο, πορτοκαλί POS — εντολή ιδιοκτήτη), αλλά ΔΙΚΑ ΤΟΥΣ tokens: στη νύχτα τα `--ic-*` είναι σωστά για ΕΙΚΟΝΙΔΙΑ (φωτεινά, πάνω σε σκούρο) και λάθος για ΓΕΜΙΣΜΑΤΑ δίπλα-δίπλα — μετρημένα με τον ελεγκτή παλέτας: L 0,73-0,78 έξω από τη ζώνη 0,48-0,67 της νύχτας. Οι νυχτερινές τιμές παρακάτω περνούν και τους έξι ελέγχους (φωτεινότητα, χρώμα, αχρωματοψία ΔE≥8, αντίθεση). ⚠ Η ΣΕΙΡΑ ΣΤΗ ΜΠΑΡΑ ΕΙΝΑΙ ΠΡΑΣΙΝΟ → ΜΠΛΕ → ΠΟΡΤΟΚΑΛΙ, όχι πράσινο → πορτοκαλί: πράσινο δίπλα σε πορτοκαλί είναι ΔE 5 για πρωτανωπία (αόρατη αλλαγή). Με το μπλε ανάμεσα, κάθε γειτονικό ζευγάρι είναι ΔE ≥ 19. */ --anl-cash: #1f8a4c; --anl-account: #2563c9; --anl-pos: #d97706; --anl-other: #8a93a0; /* Τρόποι πληρωμής — ξεθωριασμένοι, δεν είναι σημαία */ --pay-account: #3a5f9e; --pay-cash: #4d7c57; --pay-pos: #b07d1a; --pay-prepaid: #6b5aa8; --pay-free: #8a93a0; /* ── Χρώμα ονόματος οδηγού ──────────────────────────────────────────────── Ο δισπάτσερ αναγνωρίζει τον οδηγό από το χρώμα πριν διαβάσει το όνομα. ΔΕΝ είναι τα ίδια με τα χρώματα του avatar: εκείνα είναι ΦΟΝΤΟ με λευκά αρχικά και θέλουν να είναι σκούρα· αυτά είναι ΚΕΙΜΕΝΟ και πρέπει να ξεχωρίζουν από την κάρτα — άρα αντιστρέφονται στη νύχτα. */ /* Τα δύο χρυσά ήταν πολύ ανοιχτά για ΚΕΙΜΕΝΟ σε λευκή κάρτα (3.1:1 και 3.9:1). Σκουραίνουν όσο χρειάζεται για να διαβάζονται, μένοντας χρυσά. */ --av-0: #16223f; --av-1: #8a6d21; --av-2: #3b4a6b; --av-3: #7e6320; --av-4: #2c3a57; --av-5: #8f6f1e; --av-6: #46506b; --av-7: #735b1c; /* ── Τυπογραφία ───────────────────────────────────────────────────────── */ /* Οι γραμματοσειρές του esdocs (01.09.2026): Outfit στους τίτλους, Inter στο σώμα — αυτές δίνουν το «premium» που ζήτησε ο ιδιοκτήτης. Τα system fonts μένουν ως δίχτυ για συσκευή χωρίς δίκτυο. */ --serif: 'Outfit', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --doc-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif; /* ── Η ΚΛΙΜΑΚΑ ΜΕΓΕΘΩΝ — ΕΝΝΕΑ ΣΚΑΛΟΠΑΤΙΑ, ΚΑΝΕΝΑ ΕΝΔΙΑΜΕΣΟ ──────────────── Καθαρίστηκε 03.09.2026. Το CSS έγραφε ΕΠΙΠΛΕΟΝ με το χέρι δεκαπέντε μεγέθη — 8, 8.5, 9, 9.5, 10, 10.5, 11.5, 12.5, 13, 14.5, 16, 18, 19, 20, 26 — σε 72 σημεία. Δεν ήταν κλίμακα, ήταν ό,τι έτυχε τη στιγμή που γράφτηκε ο κανόνας, και το μάτι το διαβάζει ως ακαταστασία ακόμη κι όταν δεν ξέρει γιατί. ⚠ ΤΟ ΠΑΤΩΜΑ ΑΝΕΒΗΚΕ ΑΠΟ ΤΑ 8px ΣΤΑ 10px. Σαράντα ένα σημεία έγραφαν κάτω από 11px — «Πεμ» στην κεφαλίδα της μέρας, η διάρκεια της μεταφοράς, οι ετικέτες των πλακιδίων, τα γράμματα των ημερών στο ημερολόγιο. Στα 8,5px σε iPhone αυτά δεν διαβάζονται· δεν είναι πυκνότητα, είναι απώλεια. Η ΠΥΚΝΟΤΗΤΑ ΜΕΝΕΙ: το κέρδος σε ύψος από 8,5 σε 10px είναι ελάχιστο, γιατί τα περισσότερα από αυτά ζουν δίπλα σε μεγαλύτερο κείμενο που ορίζει ήδη το ύψος της γραμμής. ⚠ ΕΞΑΙΡΟΥΝΤΑΙ ΟΣΑ ΔΕΝ ΕΙΝΑΙ ΚΕΙΜΕΝΟ: τα αρχικά μέσα σε κύκλο (.av-sm, .car-thumb, .logo-pick .ini) είναι σχήμα μέσα σε σχήμα και δένονται με τη διάμετρό τους, όχι με την κλίμακα. Και το 16px του `.docexp .inp` μένει: κάτω από 16px το Safari κάνει zoom σε ΟΛΗ τη σελίδα στο focus. */ --fs-2xs: .625rem; /* 10px — το πάτωμα: σήματα, μετρητές, γράμματα ημερών */ --fs-xs: .69rem; /* 11px */ --fs-sm: .78rem; /* 12.5px */ --fs-base: .885rem; /* 14px — το σώμα */ --fs-md: .95rem; /* 15px */ /* Ήταν 1.08rem (17,3px). Οι τίτλοι καρτών έγραφαν 18 και 19 με το χέρι και δεν συμφωνούσαν μεταξύ τους· στα 18px συμφωνούν όλοι, και οι τέσσερις παλιοί χρήστες του token μεγαλώνουν κατά 0,7px — αόρατο. */ --fs-lg: 1.125rem; /* 18px — τίτλος κάρτας, επικεφαλίδα οθόνης */ --fs-xl: 1.32rem; /* 21px */ --fs-2xl: 1.7rem; /* 27px */ --fs-3xl: 2.1rem; /* 34px */ /* Οι επικεφαλίδες είναι ΕΛΑΦΡΙΕΣ. Εκεί κρέμεται όλο το ύφος. */ --h-weight: 400; --h-track: -.018em; /* ── ΚΙΝΗΣΗ ───────────────────────────────────────────────────────────── ⚠ ΚΑΜΙΑ `linear`, ΚΑΜΙΑ `ease-in-out`. Και οι δύο κινούν με σταθερή ή συμμετρική ταχύτητα — τίποτα στον φυσικό κόσμο δεν το κάνει αυτό, και το μάτι το διαβάζει ως «μηχανικό». Η καμπύλη από κάτω ξεκινά γρήγορα και σταματά μαλακά: έτσι κινείται κάτι που έχει ΜΑΖΑ. Είναι η ίδια που χρησιμοποιεί ήδη το φύλλο της φόρμας (`sheet-up`). Το πάτημα είναι ΞΕΧΩΡΙΣΤΑ γρήγορο (80ms): η απόκριση σε άγγιγμα πρέπει να νιώθεται ακαριαία, ενώ η επαναφορά μπορεί να αργήσει. */ --spring: cubic-bezier(.22,.7,.3,1); --t-btn: .22s; --t-press: .08s; --t-sheen: .62s; /* ── ΟΙ ΑΠΑΓΟΡΕΥΜΕΝΕΣ ΖΩΝΕΣ ΤΟΥ iPHONE ─────────────────────────────────── Το `index.html` γράφει `viewport-fit=cover`: λέει στο Safari «ζωγράφισε από άκρη σε άκρη, μπες κάτω από το Dynamic Island και κάτω από τη μπάρα του home». Σωστό — έτσι το φόντο γεμίζει την οθόνη αντί να μείνουν λευκές λωρίδες. ΑΛΛΑ έρχεται με υποχρέωση: το ΠΕΡΙΕΧΟΜΕΝΟ πρέπει να σπρωχτεί πίσω. Μέχρι τις 04.09.2026 δεν υπήρχε ΚΑΜΙΑ χρήση `env(safe-area-*)` σε κανένα από τα οκτώ αρχεία CSS — πήραμε το πλεονέκτημα χωρίς το κόστος. ΤΙ ΕΣΠΑΓΕ, μετρημένο σε iPhone 375×812 (η ζώνη είναι 34px): • το «+» ξεκινούσε 22px από το χείλος → 12px του (23%) μέσα στη ζώνη • το «Αποθήκευση» 17px → 17px του (43%) μέσα στη ζώνη Δεν είναι μόνο οπτικό: στα κάτω ~20px το iOS θεωρεί ότι ξεκινάς τη χειρονομία εξόδου, οπότε το πάτημα ΔΕΝ φτάνει στο κουμπί. Ο οδηγός πατά «Αποθήκευση», η εφαρμογή φεύγει στο παρασκήνιο, και δεν καταλαβαίνει γιατί. ⚠ ΣΕ ΥΠΟΛΟΓΙΣΤΗ ΚΑΙ ΣΕ ΠΑΛΙΟ iPHONE ΕΙΝΑΙ 0px — τίποτα δεν μετακινείται εκεί. Η εφεδρεία `, 0px` καλύπτει και browser που δεν ξέρει καθόλου `env()`. */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); /* ── Σχήμα & βάθος ────────────────────────────────────────────────────── */ --r: 14px; --r-md: 10px; --r-sm: 8px; --r-xs: 6px; --r-pill: 980px; /* Λεπτές γραμμές αντί για βαριές σκιές. Η σκιά μπαίνει μόνο σε ό,τι πραγματικά επιπλέει (modal, dropdown, sticky bar). */ /* Η σκιά ΞΕΚΙΝΑ με το --hair: η 1px φωτισμένη ακμή στην κορυφή είναι αυτό που κάνει το γυαλί να μοιάζει με τζάμι κι όχι με ημιδιαφανές ορθογώνιο. Έτσι ακριβώς είναι στο esdocs (34-35). */ /* ⚠ ΣΚΙΑ ΕΠΑΦΗΣ (24.09.2026, «Βάθος με μπλε σκιές»): 1-2px σφιχτή σκιά κάτω από την απαλή, ώστε η κάρτα να ΚΑΘΕΤΑΙ στο φόντο αντί να αιωρείται θολή. Ναυτική απόχρωση, όχι γκρι — ίδιο φως με το υπόλοιπο σύστημα. */ --shadow: 0 1px 0 var(--hair) inset, 0 1px 3px rgba(10,25,47,.06), 0 14px 34px -14px rgba(10,25,47,.16); --shadow-sm: 0 1px 0 var(--hair) inset, 0 1px 2px rgba(10,25,47,.06), 0 6px 20px -8px rgba(10,25,47,.12); --shadow-lg: 0 2px 6px rgba(28,28,32,.05), 0 30px 64px -28px rgba(28,28,32,.3); --shadow-up: 0 -1px 0 var(--line-2), 0 -8px 24px -18px rgba(28,28,32,.3); /* ── «Επιλεγμένο» = ΧΡΥΣΗ ΣΤΕΦΑΝΗ (24.09.2026) ───────────────────────── Όπως το πορτρέτο στις κάρτες της εταιρείας: δαχτυλίδι ΜΕ ΚΕΝΟ γύρω από τη φωτογραφία, ανασηκωμένη πλάκα στο μενού, όχι κίτρινο φόντο. */ --sel-plate: #ffffff; --sel-edge: rgba(176,137,76,.34); --sel-lift: 0 1px 1px rgba(10,25,47,.06), 0 2px 6px -3px rgba(10,25,47,.16); --bezel-gap: #ffffff; /* το κενό ανάμεσα σε φωτογραφία και στεφάνη */ --pimg-edge: inset 0 0 0 1px rgba(10,25,47,.10); --enamel: inset 0 0 0 1px rgba(255,255,255,.20), inset 0 -6px 8px -6px rgba(0,0,0,.16); /* ── Πεδία φόρμας (24.09.2026) ────────────────────────────────────────── Το πεδίο «βυθίζεται» και η εστίαση είναι ΧΡΥΣΗ: το ναυτικό δαχτυλίδι έσβηνε στη νύχτα και δεν ήξερες πού γράφεις. */ --field-inset: inset 0 1px 2px rgba(10,25,47,.07); --field-halo: 0 0 0 3px rgba(208,171,100,.24); --field-hover: rgba(176,137,76,.55); --field-lbl-focus: #836324; /* 4,83:1 στο γυαλί του παραθύρου */ --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2356606e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Μπάρα κύλισης: ήσυχη αλλά ΟΡΑΤΗ εκεί που φαίνεται πάντα (Windows) — με το --line (13%) έβγαινε 1,3:1 και χανόταν η ένδειξη «υπάρχουν κι άλλες στήλες». */ --scroll-thumb: rgba(10,25,47,.30); /* ── Απόσταση ─────────────────────────────────────────────────────────── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 30px; --s7: 40px; --s8: 56px; --sidebar: 236px; --topbar: 62px; --maxw: 1240px; /* ⚠ ΤΟ ΣΤΕΝΟΤΕΡΟ ΠΟΥ ΑΝΤΕΧΕΙ ΕΝΑ `input[type=date]`. Το χειριστήριο το ζωγραφίζει το ΣΥΣΤΗΜΑ. Το Chrome το αφήνει να συρρικνωθεί ως τα 26px (κόβοντας το κείμενο)· το Safari ΟΧΙ — μετρημένο 194px στα 16px γραμματοσειράς, και δεν υπακούει ούτε σε `min-width: 0` ούτε σε `width`. Σε στενότερη στήλη ΞΕΧΕΙΛΙΖΕΙ πάνω στο διπλανό πεδίο: αυτό ήταν το «η ημερομηνία και η ώρα πέφτουν η μία πάνω στην άλλη». Μετρημένο ΠΡΙΝ τη διόρθωση, με το μενού ανοιχτό: το πλέγμα εξόδων έδινε 146px ανά στήλη σε οθόνη 1280 και 179px στα 1440 — και οι δύο κάτω από το όριο. Κάθε πλέγμα που κρατά ημερομηνία δουλεύει πλέον με αυτό το πάτωμα. ΜΗΝ ΤΟ ΚΑΤΕΒΑΣΕΙΣ χωρίς μέτρηση σε ΑΛΗΘΙΝΟ Safari — στο Chrome το λάθος δεν φαίνεται ποτέ. */ --date-w: 200px; --t-fast: .14s cubic-bezier(.3,.7,.3,1); /* Η ΔΙΑΡΚΕΙΑ ΞΕΧΩΡΙΣΤΑ: τη χρειάζεται το `.sidebar` ως ΚΑΘΥΣΤΕΡΗΣΗ για το `visibility` (βλ. base.css). Δύο χωριστοί αριθμοί θα ξέφευγαν ο ένας από τον άλλον — εδώ το `--t` χτίζεται ΠΑΝΩ στη διάρκεια. */ --t-dur: .24s; --t: var(--t-dur) cubic-bezier(.22,.7,.3,1); } /* ── Σκούρο θέμα ────────────────────────────────────────────────────────── */ /* ⚠ `screen and` — ΤΟ ΧΑΡΤΙ ΔΕΝ ΕΧΕΙ ΣΚΟΥΡΟ ΘΕΜΑ (03.09.2026). Χωρίς αυτό, όποιος δούλευε στη νύχτα και πατούσε εκτύπωση έπαιρνε τα ΝΥΧΤΕΡΙΝΑ μελάνια σε λευκό χαρτί: `--ink: #e9eef7`, δηλαδή σχεδόν λευκό σε λευκό — κενή σελίδα. Έτσι η παλέτα γυρίζει ΜΟΝΗ ΤΗΣ στις ημερήσιες τιμές όταν τυπώνεις, χωρίς να αντιγραφούν 75 tokens σε δεύτερο σημείο που θα ξέφευγε στην πρώτη αλλαγή. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* ── obsidian (από το esdocs.html) ─────────────────────────────────── */ /* Η κύρια ενέργεια ΚΟΚΚΙΝΗ (βλ. το φως). Στη νύχτα το ίδιο κόκκινο: λευκό 4,98:1, και 3,5:1 απέναντι στο ναυτικό φόντο (όριο 3:1 για στοιχεία διεπαφής). Πιο ανοιχτό κόκκινο θα ξεχώριζε περισσότερο από το φόντο, αλλά το λευκό πάνω του πέφτει κάτω από 4,5:1. */ --action: #d32f2f; --action-d: #b71c1c; --action-ink: #ffffff; --action-ring: rgba(211,47,47,.42); --action-glow: rgba(211,47,47,.75); --gold: #e1c177; --gold-l: #f2d692; --gold-ink: #ebcd7f; /* στη νύχτα ανοίγει· το μελάνι ακόμη πιο ανοιχτό */ --gold-soft: rgba(225,193,119,.08); --gold-soft2: rgba(225,193,119,.16); --gold-glow: rgba(225,193,119,.34); --navy: #24405f; --navy-l: #1b3149; /* Στη νύχτα η κύρια ενέργεια ΜΕΝΕΙ ναυτικό μπλε με λευκά γράμματα, όπως στο esdocs — δεν γίνεται σχεδόν λευκό. Γι' αυτό έφυγαν και οι κανόνες που γύριζαν το κείμενο σκούρο. */ --primary: #24405f; --primary-d: #2d5077; --ink: #e9eef7; --ink-2: #c6d0de; --muted: #a2b2c9; --faint: #7a8aa1; --line: rgba(255,255,255,.17); --line-2: rgba(255,255,255,.10); --bg1: #0a1428; --bg2: #0c1a33; --card: rgba(16,28,48,.62); --card-2: rgba(20,36,61,.62); --field: rgba(22,39,63,.68); --card-solid: #101c30; --card2-solid: #14243d; --field-solid: #16273f; /* ── Γυαλί στη νύχτα — δικό μας· το esdocs δεν έχει καθόλου σκούρο θέμα ── Το .62 δεν κατεβαίνει άλλο: κάτω από .55 η κάρτα παύει να ξεχωρίζει από τη σελίδα. Το --hair στο .10 (όχι .13) είναι ακμή, όχι άσπρη γραμμή. */ --glass: rgba(20,36,61,.55); --glass-2: rgba(20,36,61,.72); --glass-strong: rgba(16,28,48,.90); --card-glass: rgba(24,42,68,.62); --hair: rgba(255,255,255,.10); --plate: rgba(16,28,48,.66); --plate-2: rgba(20,36,61,.62); --plate-solid: #101c30; --plate2-solid: #14243d; --gold-text: var(--gold-ink); --overlay: rgba(0,0,0,.62); --ok: #5fce8e; --ok-soft: rgba(95,206,142,.15); --warn: #eab74a; --warn-soft: rgba(234,183,74,.16); --crit: #f0776a; --crit-soft: rgba(240,119,106,.15); --info: #86a9e0; --info-soft: rgba(134,169,224,.15); --st-wait: #ffd11a; --st-enroute: #4da3ff; --st-onsite: #b06bff; --st-onboard: #34d17f; --st-stop: #ff4d4d; --ic-cash: #4ecb7e; --ic-pos: #f5a24b; --ic-office: #7ba7f0; --ic-prepaid: #a99ae0; --ic-free: #f0776a; --ic-later: #4ec4d0; /* Μπάρες Analytics: σκοτεινότερες από τα εικονίδια, βλ. σχόλιο στη μέρα. */ --anl-cash: #2a9c5a; --anl-account: #5a86d6; --anl-pos: #c97d22; --anl-other: #7a8aa1; /* «Χωρίς οδηγό» στη νύχτα: ανοίγει, όπως όλα τα χρώματα-σήματα. ΔE από το POS της νύχτας (#f5a24b) 8,8 · από το κόκκινο (#f0776a) 7,6. Στην κάρτα 4,99-6,01:1 · ναυτικά γράμματα στο χαπάκι 6,62:1. ⚠ ΙΔΙΕΣ ΤΙΜΕΣ και στο μπλοκ `[data-theme="dark"]` πιο κάτω — δες εκεί γιατί. */ --nodriver: #fe7802; --nodriver-ink: #0a192f; --nodriver-soft: rgba(254,120,2,.14); --nodriver-line: rgba(254,120,2,.50); --pay-account: #86a9e0; --pay-cash: #5fce8e; --pay-pos: #eab74a; --pay-prepaid: #a99ae0; --pay-free: #7a8aa1; /* Ίδιες οικογένειες χρωμάτων, ανοιχτές — σε σκούρο φόντο. */ --av-0: #9db4d4; --av-1: #e2c988; --av-2: #aebbd6; --av-3: #d8bd80; --av-4: #a8bcd8; --av-5: #dcc48c; --av-6: #b6c0d8; --av-7: #cbb478; /* ⚠ ΣΚΙΕΣ ΒΑΘΥ ΝΑΥΤΙΚΟ, ΟΧΙ ΜΑΥΡΟ (24.09.2026). Το καθαρό μαύρο rgba(0,0,0,.4-.85) γκρίζαρε το ναυτικό σαν αιθάλη. Λεπτό περίγραμμα επαφής + φωτισμένη πάνω ακμή: η κάρτα διαβάζεται σαν τζάμι που φωτίζεται από πάνω. */ --shadow-sm: 0 1px 0 rgba(255,255,255,.07) inset, 0 0 0 1px rgba(2,7,20,.5), 0 1px 1px rgba(2,7,20,.35), 0 8px 18px -8px rgba(2,7,20,.7); --shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 0 0 1px rgba(2,7,20,.5), 0 2px 4px rgba(2,7,20,.3), 0 18px 40px -14px rgba(2,7,20,.75); --shadow-lg: 0 0 0 1px rgba(2,7,20,.55), 0 2px 6px rgba(2,7,20,.45), 0 30px 64px -24px rgba(2,7,20,.9); --shadow-up: 0 -1px 0 var(--line-2), 0 -8px 24px -18px rgba(2,7,20,.85); --sel-plate: rgba(255,255,255,.085); --sel-edge: rgba(225,193,119,.30); --sel-lift: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px -3px rgba(0,0,0,.6); --bezel-gap: #13223a; --pimg-edge: inset 0 0 0 1px rgba(255,255,255,.12); --enamel: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -6px 8px -6px rgba(0,0,0,.26); --field-inset: inset 0 1px 2px rgba(0,0,0,.38); --field-halo: 0 0 0 3px rgba(225,193,119,.22); --field-hover: rgba(225,193,119,.45); --field-lbl-focus: var(--gold-text); --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a2b2c9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --scroll-thumb: rgba(255,255,255,.28); } } /* Ίδιος λόγος με το από πάνω: ο διακόπτης «Νύχτα» αφορά ΟΘΟΝΗ, όχι χαρτί. */ @media screen { :root[data-theme="dark"] { color-scheme: dark; /* ── obsidian (από το esdocs.html) ─────────────────────────────────── */ /* Η κύρια ενέργεια ΚΟΚΚΙΝΗ (βλ. το φως και το μπλοκ από πάνω). */ --action: #d32f2f; --action-d: #b71c1c; --action-ink: #ffffff; --action-ring: rgba(211,47,47,.42); --action-glow: rgba(211,47,47,.75); --gold: #e1c177; --gold-l: #f2d692; --gold-ink: #ebcd7f; /* στη νύχτα ανοίγει· το μελάνι ακόμη πιο ανοιχτό */ --gold-soft: rgba(225,193,119,.08); --gold-soft2: rgba(225,193,119,.16); --gold-glow: rgba(225,193,119,.34); --navy: #24405f; --navy-l: #1b3149; /* Στη νύχτα η κύρια ενέργεια ΜΕΝΕΙ ναυτικό μπλε με λευκά γράμματα, όπως στο esdocs — δεν γίνεται σχεδόν λευκό. Γι' αυτό έφυγαν και οι κανόνες που γύριζαν το κείμενο σκούρο. */ --primary: #24405f; --primary-d: #2d5077; --ink: #e9eef7; --ink-2: #c6d0de; --muted: #a2b2c9; --faint: #7a8aa1; --line: rgba(255,255,255,.17); --line-2: rgba(255,255,255,.10); --bg1: #0a1428; --bg2: #0c1a33; --card: rgba(16,28,48,.62); --card-2: rgba(20,36,61,.62); --field: rgba(22,39,63,.68); --card-solid: #101c30; --card2-solid: #14243d; --field-solid: #16273f; /* ── Γυαλί στη νύχτα — δικό μας· το esdocs δεν έχει καθόλου σκούρο θέμα ── Το .62 δεν κατεβαίνει άλλο: κάτω από .55 η κάρτα παύει να ξεχωρίζει από τη σελίδα. Το --hair στο .10 (όχι .13) είναι ακμή, όχι άσπρη γραμμή. */ --glass: rgba(20,36,61,.55); --glass-2: rgba(20,36,61,.72); --glass-strong: rgba(16,28,48,.90); --card-glass: rgba(24,42,68,.62); --hair: rgba(255,255,255,.10); --plate: rgba(16,28,48,.66); --plate-2: rgba(20,36,61,.62); --plate-solid: #101c30; --plate2-solid: #14243d; --gold-text: var(--gold-ink); --overlay: rgba(0,0,0,.62); --ok: #5fce8e; --ok-soft: rgba(95,206,142,.15); --warn: #eab74a; --warn-soft: rgba(234,183,74,.16); --crit: #f0776a; --crit-soft: rgba(240,119,106,.15); --info: #86a9e0; --info-soft: rgba(134,169,224,.15); --st-wait: #ffd11a; --st-enroute: #4da3ff; --st-onsite: #b06bff; --st-onboard: #34d17f; --st-stop: #ff4d4d; --pay-account: #86a9e0; --pay-cash: #5fce8e; --pay-pos: #eab74a; --pay-prepaid: #a99ae0; --pay-free: #7a8aa1; /* ⚠ ΑΥΤΕΣ ΟΙ ΔΥΟ ΟΙΚΟΓΕΝΕΙΕΣ ΕΛΕΙΠΑΝ ΑΠΟ ΕΔΩ ΜΕΧΡΙ ΤΙΣ 03.09.2026 — ΚΑΙ ΞΕΡΟΥΜΕ ΓΙΑΤΙ: ήταν γραμμένες ΔΥΟ ΦΟΡΕΣ, αυτούσιες, μέσα στο μπλοκ του `@media (prefers-color-scheme: dark)`. Η μία επικόλληση προοριζόταν για ΕΔΩ και έπεσε στο διπλανό μπλοκ. Η διπλοεγγραφή δεν έβγαζε κανένα λάθος — το CSS δέχεται την ίδια δήλωση δύο φορές — οπότε τίποτα δεν το πρόδιδε. ΤΙ ΕΣΠΑΓΕ: όποιος έχει το λειτουργικό στο ΦΩΣ και πατά «Νύχτα» από τον διακόπτη παίρνει `data-theme="dark"`, το media query ΔΕΝ ταιριάζει, και τα ονόματα των οδηγών κρατούν τα ΗΜΕΡΗΣΙΑ χρώματά τους πάνω σε σκούρο φόντο. Μετρήθηκε: 1,02 · 1,41 · 1,81 · 2,00 · 2,47 · 2,82 · 3,27 · 3,40 — και οι ΟΚΤΩ κάτω από το 4,5:1, το πρώτο κυριολεκτικά αόρατο. Με τις σωστές τιμές: 7,5-8,3:1. Το ίδιο και τα έξι εικονίδια πληρωμής στην κεφαλίδα της μέρας. Με το λειτουργικό ΣΤΗ ΝΥΧΤΑ δεν φαινόταν ποτέ: εκεί ταιριάζει το media query. Γι' αυτό επέζησε — δοκιμαζόταν πάντα στη λάθος συνθήκη. */ --ic-cash: #4ecb7e; --ic-pos: #f5a24b; --ic-office: #7ba7f0; --ic-prepaid: #a99ae0; --ic-free: #f0776a; --ic-later: #4ec4d0; /* Μπάρες Analytics: σκοτεινότερες από τα εικονίδια, βλ. σχόλιο στη μέρα. */ --anl-cash: #2a9c5a; --anl-account: #5a86d6; --anl-pos: #c97d22; --anl-other: #7a8aa1; /* «Χωρίς οδηγό» — ΙΔΙΕΣ τιμές με το μπλοκ `prefers-color-scheme` από πάνω. Χωρίς αυτή τη γραμμή, όποιος πατά «Νύχτα» με το λειτουργικό στο φως θα έπαιρνε το σκούρο πορτοκαλί της μέρας (3,3-3,5:1 στο ναυτικό) — το ίδιο λάθος που περιγράφει το σχόλιο λίγο πιο πάνω. */ --nodriver: #fe7802; --nodriver-ink: #0a192f; --nodriver-soft: rgba(254,120,2,.14); --nodriver-line: rgba(254,120,2,.50); /* Ίδιες οικογένειες χρωμάτων, ανοιχτές — σε σκούρο φόντο. */ --av-0: #9db4d4; --av-1: #e2c988; --av-2: #aebbd6; --av-3: #d8bd80; --av-4: #a8bcd8; --av-5: #dcc48c; --av-6: #b6c0d8; --av-7: #cbb478; /* ⚠ ΣΚΙΕΣ ΒΑΘΥ ΝΑΥΤΙΚΟ, ΟΧΙ ΜΑΥΡΟ (24.09.2026). Το καθαρό μαύρο rgba(0,0,0,.4-.85) γκρίζαρε το ναυτικό σαν αιθάλη. Λεπτό περίγραμμα επαφής + φωτισμένη πάνω ακμή: η κάρτα διαβάζεται σαν τζάμι που φωτίζεται από πάνω. */ --shadow-sm: 0 1px 0 rgba(255,255,255,.07) inset, 0 0 0 1px rgba(2,7,20,.5), 0 1px 1px rgba(2,7,20,.35), 0 8px 18px -8px rgba(2,7,20,.7); --shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 0 0 1px rgba(2,7,20,.5), 0 2px 4px rgba(2,7,20,.3), 0 18px 40px -14px rgba(2,7,20,.75); --shadow-lg: 0 0 0 1px rgba(2,7,20,.55), 0 2px 6px rgba(2,7,20,.45), 0 30px 64px -24px rgba(2,7,20,.9); --shadow-up: 0 -1px 0 var(--line-2), 0 -8px 24px -18px rgba(2,7,20,.85); --sel-plate: rgba(255,255,255,.085); --sel-edge: rgba(225,193,119,.30); --sel-lift: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px -3px rgba(0,0,0,.6); --bezel-gap: #13223a; --pimg-edge: inset 0 0 0 1px rgba(255,255,255,.12); --enamel: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -6px 8px -6px rgba(0,0,0,.26); --field-inset: inset 0 1px 2px rgba(0,0,0,.38); --field-halo: 0 0 0 3px rgba(225,193,119,.22); --field-hover: rgba(225,193,119,.45); --field-lbl-focus: var(--gold-text); --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a2b2c9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --scroll-thumb: rgba(255,255,255,.28); } } /* ══ ΤΟ ΓΥΑΛΙ ΤΗΣ ΑΙΩΡΟΥΜΕΝΗΣ ΜΠΑΡΑΣ (05.10.2026, όλα τα πλάτη) — πιο διάφανο από το --glass-2 (.72), όπως στο esdocs· ΔΙΚΟ ΤΗΣ token ώστε να μην αλλάζει το πλαϊνό μενού στον υπολογιστή. */ :root { --bar-glass: rgba(255,255,255,.56); } :root[data-theme="dark"] { --bar-glass: rgba(20,36,61,.56); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bar-glass: rgba(20,36,61,.56); } } /* ══ ΚΙΝΗΤΟ: ΠΙΟ ΔΙΑΦΑΝΕΣ ΓΥΑΛΙ, ΟΠΩΣ ΤΟ esdocs (05.10.2026) ═══════════════════════════════ Ιδιοκτήτης: «on esdocs … the liquid glass effect is more transparent, it looks more like a glass, i like it» — ΜΟΝΟ στο κινητό, μπάρα + κάρτες. Η κάρτα γίνεται ΚΛΙΣΗ φωτός (πάνω πιο λευκή, κάτω πιο διάφανη) όπως το --card του esdocs· κάθε χρήση της είναι `background:` (ελεγμένο). Η ανάγνωση κρατιέται από το θόλωμα που παίρνουν οι κάρτες στο κινητό (components.css). */ @media screen and (max-width: 719px) { :root { --glass-2: rgba(255,255,255,.56); --card-glass: linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.38)); } :root[data-theme="dark"] { --glass-2: rgba(20,36,61,.56); --card-glass: linear-gradient(180deg, rgba(30,50,80,.52), rgba(20,36,61,.34)); } } @media screen and (max-width: 719px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass-2: rgba(20,36,61,.56); --card-glass: linear-gradient(180deg, rgba(30,50,80,.52), rgba(20,36,61,.34)); } }