/* ============================================================ PRESTO — DESIGN TOKENS Το ΜΟΝΟ αρχείο με σκληρές τιμές χρώματος, απόστασης και ακτίνας. Αν βρεις #0B5CD6 σε άλλο αρχείο, είναι bug. Κλίμακα αποστάσεων: πολλαπλάσια του 4. Καμία άλλη τιμή. ============================================================ */ :root{ /* ── Χρώμα · κύριο ───────────────────────────────────────── Βαθύ μπλε. Ουδέτερο: στέκει το ίδιο καλά σε πλυντήριο αυτοκινήτων και σε κομμωτήριο. Τα παστέλ που υπήρχαν εδώ έγερναν προς μία αισθητική και δεν κάθονταν παντού. */ --brand: #0B5CD6; --brand-d: #0847A8; --brand-l: #E3EDFD; --brand-xl: #F2F7FE; /* ── Χρώμα · κείμενο ────────────────────────────────────── Καθαρά ουδέτερα γκρι, χωρίς απόχρωση. */ --ink: #17181B; --ink-2: #5A5D66; /* ── ΑΝΤΙΘΕΣΗ: μετρημένη, όχι εκτιμημένη ────────────────── Το παλιό --ink-3 (#8B8F99) έβγαζε 3.24:1 πάνω σε λευκό. Το πρότυπο για κείμενο είναι 4.5:1 — και το χρησιμοποιούσαν 304 κομμάτια κειμένου σε όλο το site: υπότιτλοι καρτών, βοηθητικά κείμενα φορμών, ημερομηνίες, «X κριτικές». Δηλαδή ακριβώς τα μικρά γράμματα, εκεί που η αντίθεση μετράει περισσότερο. Ένας εβδομηντάχρονος πελάτης — που είναι ρητά μέσα στο κοινό μας — δεν τα διάβαζε καθόλου σε φωτεινό περιβάλλον. Η απόχρωση μένει η ίδια (γκρι με μπλε νότα)· αλλάζει μόνο η φωτεινότητα, όσο χρειάζεται ακριβώς για να περάσει: --ink-3 #727682 → 4.54:1 (κείμενο) --ink-4 #8F95A1 → 3.01:1 (μόνο περιγράμματα και σύμβολα, ποτέ κείμενο· 3:1 είναι το όριο για μη-κειμενικά στοιχεία) */ --ink-3: #727682; --ink-4: #8F95A1; /* ── Χρώμα · επιφάνειες ───────────────────────────────── */ --bg: #FFFFFF; --surf: #FFFFFF; --soft: #F4F5F7; --line: #E4E6EA; --line-2: #EFF0F3; /* ── Χρώμα · καταστάσεις ──────────────────────────────── */ --ok: #17803D; --ok-l: #DCFCE7; --warn: #B45309; --warn-l: #FEF3C7; --err: #C62828; --err-l: #FEE2E2; --star: #F5A623; /* Περιγράμματα των ενημερωτικών πλαισίων. Ήταν γραμμένα απευθείας μέσα στους κανόνες (#A7E8CE, #FDE68A, #FECACA), οπότε δεν μπορούσαν να αλλάξουν από ένα σημείο — και κανείς δεν ήξερε ότι είναι μέρος της παλέτας. */ --ok-b: #A7E8CE; --warn-b: #FDE68A; --err-b: #FECACA; /* Πιο σκούρες αποχρώσεις για κείμενο πάνω σε ανοιχτό φόντο */ --warn-ink: #92400E; --warn-2: #D97706; /* Δεύτερο χρώμα του βαθμιδωτού στα «έξυπνα» σημεία και η ζεστή νότα του φόντου εισόδου — και τα δύο ήταν σκόρπια hex. */ --brand-2: #A78BFA; /* Μπάρα μεταμφίεσης (admin μέσα σε panel καταστήματος). Μοβ ΕΠΙΤΗΔΕΣ εκτός της υπόλοιπης παλέτας: όσο φαίνεται, δεν είσαι ο έμπορος — και τίποτα άλλο στο panel δεν μοιάζει έτσι. */ --imp-1: #4C3D8F; --imp-2: #6D5BD0; --warm-wash: #FDF3E7; /* ── Φόντο κάρτας χωρίς φωτογραφία ──────────────────────── Ουδέτερα, χαμηλού κορεσμού. Το χρώμα δεν πρέπει να διεκδικεί προσοχή — η φωτογραφία και το όνομα την έχουν. Προσθήκη κατηγορίας = μία τριάδα εδώ, τίποτε άλλο. */ --p-wash-1:#DDE6F0; --p-wash-2:#EDF2F7; --p-wash-ink:#2C4159; --p-hair-1:#E8E4E0; --p-hair-2:#F3F1EF; --p-hair-ink:#4A423C; --p-nail-1:#E6E3EC; --p-nail-2:#F2F0F5; --p-nail-ink:#453C56; --p-food-1:#EDE4DA; --p-food-2:#F6F1EC; --p-food-ink:#57432F; --p-spa-1: #DEE8E3; --p-spa-2: #EFF4F1; --p-spa-ink: #2F4A3E; --p-gym-1: #E1E4EA; --p-gym-2: #F0F1F5; --p-gym-ink: #383D4A; --p-pet-1: #EBE7DC; --p-pet-2: #F5F3EC; --p-pet-ink: #4F452C; /* ── Αποστάσεις · κλίμακα 4px ─────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* ── Ακτίνες ──────────────────────────────────────────── */ --r-4: 8px; --r-3: 12px; --r-2: 16px; --r-1: 20px; --r: 26px; --r-x: 32px; --r-f: 999px; /* ── Σκιές · η απόχρωση είναι του brand, όχι μαύρη ────── */ --sh-1: 0 1px 2px rgba(20,22,26,.05); --sh-2: 0 2px 4px rgba(20,22,26,.05), 0 8px 16px -8px rgba(20,22,26,.10); --sh-3: 0 4px 8px rgba(20,22,26,.05), 0 16px 32px -12px rgba(20,22,26,.14); --sh-4: 0 8px 16px rgba(20,22,26,.06), 0 32px 64px -24px rgba(20,22,26,.18); /* ── Τυπογραφία ─────────────────────────────────────────── Manrope. Γεωμετρική, με ίσιους ώμους και ανοιχτά μάτια: δεν γέρνει ούτε προς το «τεχνικό» ούτε προς το «κομψό», οπότε στέκει και σε συνεργείο και σε κομμωτήριο. Έχει ελληνικό subset με πλήρη τονισμό — ελεγμένο, δεν υποθέτω· χωρίς αυτό θα έπεφτε σε fallback στα ελληνικά. ΠΡΟΣΟΧΗ: το όνομα είναι --font. Ήταν --f και 37 δηλώσεις ζητούσαν --font, δηλαδή 37 δηλώσεις πετιόνταν ολόκληρες από τον browser. Το _tests/css-vars.php το πιάνει πλέον. */ --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f: var(--font); /* παλιό όνομα, μένει για συμβατότητα */ --fs-10: 10px; /* ετικέτα micro — ΤΟ ΜΙΚΡΟΤΕΡΟ ΤΗΣ ΚΛΙΜΑΚΑΣ. Τίποτα δεν γράφεται κάτω από αυτό, και μόνο για ετικέτες με κεφαλαία και αραιά γράμματα, ποτέ για πρόταση. Υπήρχαν 9px και 9.5px σκορπισμένα σε panel.css — μεγέθη εκτός κλίμακας, που κανείς δεν είχε αποφασίσει και κανείς δεν μπορούσε να αλλάξει από ένα σημείο. */ --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; /* μετα-πληροφορία κάρτας */ --fs-15: 15px; /* σώμα κειμένου — όχι 13, ώστε να διαβάζεται από όλους */ --fs-16: 16px; /* όνομα καρτας */ --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; /* επικεφαλίδα ενότητας */ --fs-20: 20px; /* λεκτικό λογότυπου — ήταν γραμμένο απευθείας */ --fs-21: 21px; /* ερώτηση βήματος */ --fs-24: 24px; /* τίτλος σελίδας */ --fs-26: 26px; --fs-32: 32px; /* τίτλος σελίδας, desktop */ --fs-40: 40px; /* τίτλος ήρωα, desktop */ /* ── Στόχοι αφής ──────────────────────────────────────── */ --tap: 48px; /* ελάχιστο, χωρίς εξαίρεση */ --tap-cta: 52px; --tap-lg: 56px; /* ── Κίνηση ───────────────────────────────────────────── */ --ease: cubic-bezier(.2,.8,.2,1); --dur: .22s; /* ── Διάταξη ────────────────────────────────────────────── Το πλέγμα βγαίνει από τρεις αριθμούς και μόνο: --maxw πλάτος σελίδας --gut περιθώριο αριστερά/δεξιά --gap κενό ανάμεσα σε κάρτες 1300 − 2×24 = 1252 περιεχόμενο (1252 − 3×16) / 4 = 301 ανά κάρτα· το ύψος εξωφύλλου το κρατά ακριβές το aspect-ratio 16/9 του CSS, όχι η αριθμητική. Το 1300 είναι ΑΠΟΦΑΣΗ προϊόντος (πλάτος σελίδας σε desktop, παντού) — μην το αλλάξεις χωρίς λόγο: το μετράει ο έλεγχος ακρίβειας σε κάθε build. Το --cell είναι το πλάτος κάρτας στην οριζόντια ράγα και αλλάζει μαζί με τις στήλες του πλέγματος, ώστε ράγα και πλέγμα να ευθυγραμμίζονται κάθετα. */ --maxw: 1300px; --gut: 16px; --gap: 12px; --cell: calc(100% - 56px); /* κινητό: η επόμενη κάρτα ξεμυτίζει */ --header-h: 64px; --bottomnav: 72px; /* Λευκό φύλλο — φόντο πεδίων και καρτών μέσα στο panel */ --paper: #FFFFFF; /* Ψευδώνυμα των παραπάνω. Ορίζονταν ξανά εδώ με ΑΛΛΕΣ τιμές (#15803D έναντι #17803D κ.λπ.) και νικούσε ό,τι ήταν πιο κάτω — δύο πηγές αλήθειας για το ίδιο χρώμα. Τώρα δείχνουν στη μία. */ --brand-wash: var(--brand-xl); --ok-wash: var(--ok-l); --warn-wash: var(--warn-l); --err-wash: var(--err-l); } /* Από tablet και πάνω το περιθώριο και το κενό μεγαλώνουν μία φορά, εδώ. Κανένα άλλο αρχείο δεν ξέρει αυτούς τους αριθμούς. */ @media (min-width:640px){ :root{ --gut:24px; --gap:16px; } } /* ── Δημόσιες σελίδες: η κλίμακα ανεβαίνει ΕΝΑ σκαλί ───────── Το σώμα ήταν 15px και η δευτερεύουσα πληροφορία 12-13px — σωστό για το πυκνό panel, μικρό για επισκέπτη που διαβάζει από κινητό. Μόνο το δημόσιο layout γράφει το data-big στο (με «0» ή «1»), οπότε ο επιλογέας [data-big] πιάνει ΜΟΝΟ τις δημόσιες σελίδες: panel και Διαχείριση μένουν ως έχουν. Η σειρά της κλίμακας μένει αυστηρά αύξουσα — καμία αντιστροφή ιεραρχίας. */ html[data-big]{ --fs-11:12px; --fs-12:13px; --fs-13:14px; --fs-14:15px; --fs-15:16px; --fs-16:17px; --fs-17:18px; --fs-18:19px; --fs-19:20px; --fs-20:21px; --fs-21:22px; --fs-24:25px; } /* ── Ρύθμιση «Μεγάλα γράμματα» ──────────────────────────────── ΟΛΑ τα μεγέθη, όχι μερικά. Έλειπαν τα --fs-10, --fs-11, --fs-14, --fs-16, --fs-18, --fs-20 και --fs-32. Το αποτέλεσμα δεν ήταν απλώς «λιγότερο μεγάλα»: η ιεραρχία ΑΝΤΙΣΤΡΕΦΟΤΑΝ. Το σώμα κειμένου (--fs-15) πήγαινε στα 17, ενώ το όνομα της κάρτας (--fs-16) έμενε 16 — δηλαδή το κείμενο γινόταν ΜΕΓΑΛΥΤΕΡΟ από τον τίτλο του. Και το --fs-13 έφτανε το --fs-14, που δεν κουνιόταν: δύο διαφορετικά επίπεδα γίνονταν ένα. Ακριβώς ο χρήστης που ανάβει αυτή τη ρύθμιση — αυτός που δυσκολεύεται να διαβάσει — έχει τη μεγαλύτερη ανάγκη από καθαρή ιεραρχία, και ήταν ο μόνος που την έχανε. Η κλίμακα ανεβαίνει ~15% και διατηρεί ΑΥΣΤΗΡΑ τη σειρά. */ /* Πατά ΠΑΝΩ στο δημόσιο σκαλί: για να σημαίνει κάτι η ρύθμιση, μένει ~ένα σκαλί ψηλότερα από το νέο δημόσιο προεπιλεγμένο. */ html[data-big="1"]{ --fs-10:11px; --fs-11:13px; --fs-12:14px; --fs-13:15px; --fs-14:16px; --fs-15:18px; --fs-16:19px; --fs-17:20px; --fs-18:21px; --fs-19:22px; --fs-20:23px; --fs-21:24px; --fs-24:27px; --fs-26:29px; --fs-32:35px; --fs-40:44px; } /* Σεβασμός στη ρύθμιση μειωμένης κίνησης */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }