/* ════════════════════════════════════════════════════════════════════ ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ ΤΗΣ ΜΑΡΚΑΣ — τοπικά αρχεία, ΠΟΤΕ CDN (NIS2) Brand Book, «Typefaces»: Display = Roboto Condensed (ΜΟΝΟ κεφαλαία), Text = Inter, Data = Roboto Mono. Και οι τρεις SIL OFL με πλήρη ελληνικά. Κατέβηκαν μία φορά και σερβίρονται από το static/fonts/. ════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/RobotoCondensed-700-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: 700; font-display: swap; src: url("/fonts/RobotoCondensed-700-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 Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/RobotoMono-400-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 Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/RobotoMono-400-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 Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/RobotoMono-500-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 Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/RobotoMono-500-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; } /* ════════════════════════════════════════════════════════════════════ VERNILAC — TOKENS Η ΜΟΝΑΔΙΚΗ πηγή χρώματος όλης της εφαρμογής. Πηγή: «VERNILAC Product Assistant — Colour rules for the front page» v1.0 (§3 φωτεινά, §4/§6 σκούρα), παράγωγο του VERNILAC Brand Book, κεφ. 05 (Colour) & 08 (Digital). ΚΑΝΟΝΑΣ: κανένα hex δεν γράφεται πουθενά αλλού. Αν χρειαστεί τιμή που δεν υπάρχει εδώ, ΔΕΝ εφευρίσκεται — ζητείται έγκριση. ΘΕΜΑ: ΦΩΤΕΙΝΟ εξ ορισμού (απόφαση Στέφανου 27/08/2026, σύμφωνη με τη σύσταση του §2). Ο λόγος είναι λειτουργικός, όχι αισθητικός: ο βοηθός προτείνει χρώματα, και μια απόχρωση πάνω σε σχεδόν μαύρο φαίνεται πιο ανοιχτή, πιο ψυχρή και πιο κορεσμένη απ' ό,τι είναι. Το σκούρο μένει ΕΤΟΙΜΟ: . ════════════════════════════════════════════════════════════════════ */ :root { /* ── Φάσμα μάρκας (τα μόνα πέντε χρώματα έμφασης) ──────────────── Λευκό κείμενο ΠΟΤΕ πάνω σε Sky / Lime / Sun / Amber — όλα πέφτουν κάτω από 3:1 με λευκό. Το κείμενο πάνω τους είναι πάντα ink. */ --v-sky: #21BBEF; --v-lime: #AFCB08; --v-sun: #FFED00; --v-amber: #F07D00; --v-flame: #E30613; --drop-water: #21BBEF; /* 16/09 θ: σταγόνα «νερού» — Sky του φάσματος, ΣΤΑΘΕΡΟ (το --v-sky γίνεται πορτοκαλί στην ATLACOLL) */ --drop-solvent: #E30613; /* σταγόνα «διαλύτου» — Spectrum Red */ /* ── Σημασιολογικά χρώματα ΔΕΔΟΜΕΝΩΝ του Credit Control Cockpit ──── (10/09/2026, εντολή Στέφανου: «να ακολουθεί και το design του cockpit»). ΞΕΧΩΡΙΣΤΟ σύστημα από το φάσμα της μάρκας — καλό/προσοχή/πρόβλημα πάνω σε υπόλοιπα και ληξιπρόθεσμα. Ίδιες τιμές με το Cockpit (Design System v3, ≥4,5:1 σε λευκό) ώστε ένα «κόκκινο» να σημαίνει το ίδιο και στις δύο εφαρμογές. Ισχύουν και στις δύο πόρτες. */ --cc-good: #10693F; --cc-good-bg: #E6F2EC; --cc-good-line: #A8D4BC; --cc-warn: #9A5300; --cc-warn-bg: #FCF0E2; --cc-warn-line: #EDCFA5; --cc-bad: #C00E12; --cc-bad-bg: #FBE8E9; --cc-bad-line: #EFBEC0; --cc-ink-2: #3F3F46; /* δευτερεύον κείμενο του Cockpit (10,4:1) */ /* ── Το αριστερό μενού του dashboard (10/09/2026, και στις ΔΥΟ βιτρίνες) ── VERNILAC: ουδέτερα του Brand Book (900 φόντο, 600 γραμμές, 200 κείμενο) και το Sky ως ενεργή γραμμή — το μόνο χρώμα αλληλεπίδρασης. */ --side-bg: #1A1A1A; --side-line: #5A5F63; --side-text: #D9DCDE; --side-accent: var(--v-sky); --cc-chip: #EBEBEE; /* Γραμματοσειρά «δεδομένων» του Cockpit: Roboto Mono στη VERNILAC, Roboto Condensed στην ATLACOLL (ορίζεται παρακάτω). */ --cc-data: "Roboto Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; --cc-th: #000000; /* κεφαλίδα πίνακα: μαύρη (ATLACOLL: atl-ink) */ /* ── ΦΩΤΕΙΝΟ ΘΕΜΑ — ενεργό (§3) ───────────────────────────────── Ταυτότητα VERNILAC: λευκό έδαφος, μαύρα γράμματα, το χρώμα είναι περιεχόμενο. Οι επιφάνειες θέλουν ΓΡΑΜΜΗ, όχι μόνο γέμισμα — η γραμμή είναι αυτό που κάνει την επιφάνεια να υπάρχει. */ --v-canvas: #FFFFFF; /* Primer White — «πρωταρισμένη επιφάνεια» */ --v-surface-1: #F7F8F8; /* neutral 050 — κάρτες, πεδία, πλοήγηση */ --v-surface-2: #EFF1F2; /* neutral 100 — hover, ανυψωμένο */ --v-line: #D9DCDE; /* neutral 200 — γραμμές, διαχωριστικά */ --v-line-hover: #9AA0A6; /* neutral 400 */ --v-text: #1A1A1A; /* neutral 900 — 15,9:1· ΟΧΙ καθαρό μαύρο: σε φωτιζόμενη οθόνη «καίει» (Brand Book) */ --v-text-muted: #5A5F63; /* neutral 600 — 6,4:1 */ --v-text-faint: #5A5F63; --v-steel: #9AA0A6; /* neutral 400 — placeholder, ανενεργό */ /* ── Λευκές επιφάνειες αναφοράς (ισχύουν σε ΚΑΘΕ θέμα) ────────── Κάθε δείγμα απόχρωσης ζει εδώ, με ≥24px λευκό περιθώριο. Το λευκό δεν είναι διακόσμηση — είναι το πεδίο αναφοράς. */ --v-ink: #1A1A1A; --v-paper: #FFFFFF; --v-primer: #F7F8F8; --v-hairline: #D9DCDE; --v-muted: #5A5F63; /* ── Σκίαστρο συρταριού: ΠΑΝΤΑ ink, ποτέ το χρώμα του καμβά (σε φωτεινό θέμα ένα λευκό σκίαστρο δεν σκιάζει τίποτα). */ --v-scrim: rgba(26, 26, 26, .55); /* Πιο βαθύ πέπλο για την προβολή φωτογραφίας: η εικόνα πρέπει να κρίνεται χωρίς να την επηρεάζει ό,τι φαίνεται από πίσω. */ --v-scrim-photo: rgba(26, 26, 26, .92); --v-scrim-photo-btn: rgba(26, 26, 26, .55); /* ── Δαχτυλίδι εστίασης ──────────────────────────────────────── Brand Book: «visible keyboard focus in Spectrum Red on light grounds, white on dark». Το Flame είναι το ΜΟΝΟ χρώμα του φάσματος που περνά AA σε λευκό (4,88:1) — γι' αυτό ακριβώς το ορίζει. */ --v-focus: var(--v-flame); /* ── Κίνηση (πολιτική Emil Kowalski) ─────────────────────────── Ισχυρό ease-out, καμία διάρκεια πάνω από 200ms, ποτέ ease-in, ποτέ «transition: all». */ --ease-snap: cubic-bezier(0.23, 1, 0.32, 1); --t-fast: 120ms; --t-base: 160ms; --t-slow: 200ms; /* ── Ακτίνες: ΜΗΔΕΝ ──────────────────────────────────────────── Brand Book, μη διαπραγματεύσιμο: «Square corners everywhere. Border radius is 0. This is a decision, not an omission.» Τα κουτιά της μπογιάς, τα δείγματα αποχρώσεων, οι φανοί και τα πλακίδια του φάσματος είναι όλα κομμένα τετράγωνα — το ίδιο και η οθόνη. ⚠️ Τα ονόματα μένουν ως έχουν ώστε να μην αγγιχτεί ούτε ένας επιλογέας· αλλάζει ΜΟΝΟ η τιμή. */ --r-edge: 0; --r-badge: 0; --r-bubble: 0; --r-pill: 0; /* ── Τυπογραφία ──────────────────────────────────────────────── Inter, τοπικό αρχείο (InterVariable.woff2), ποτέ CDN (NIS2). Έχει πλήρη ελληνικά και είναι μεταβλητή (100-900) — άρα δέχεται ΟΠΟΙΟΔΗΠΟΤΕ βάρος, κάτι που το εκμεταλλεύεται η οπτική διόρθωση του σκούρου θέματος παρακάτω. */ --font: "InterVariable", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Display: ηχώ του λεκτικού λογότυπου — βαρύ, στενό, τετραγωνισμένο. ΜΟΝΟ κεφαλαία, ποτέ για τρεχούμενο κείμενο (Brand Book). */ --display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif; /* Data: κωδικοί, ποσοστά, αριθμοί αιτημάτων, ετικέτες-eyebrow. Τα σταθερά πλάτη κρατούν τις στήλες στοιχισμένες, και ένας κωδικός σε mono ΦΑΙΝΕΤΑΙ κωδικός και όχι λέξη. */ --mono: "Roboto Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* ── Βάρη γραμμάτων ──────────────────────────────────────────── Σε ΦΩΤΕΙΝΟ φόντο (σκούρα γράμματα σε ανοιχτό) τα κανονικά βάρη. Βλ. το μπλοκ του σκούρου θέματος για το γιατί αλλάζουν. */ --w-med: 550; --w-semi: 650; --w-bold: 700; } /* ── ΣΚΟΥΡΟ ΘΕΜΑ — έτοιμο, ανενεργό (§4/§6) ──────────────────────── Ενεργοποίηση με . Ουδέτερο ink, ΟΧΙ μπλε απόχρωση: το μπλε κληρονομιάς ανήκει αποκλειστικά στη σφραγίδα. Αντίθεση των χρωμάτων έμφασης πάνω στο #0B0B0B: Sun 15,4:1 · Lime 10,1:1 · Sky 8,4:1 · Amber 6,8:1 · Flame 3,8:1 Το Flame ΜΟΝΟ για γραμμές 3px+ και μεγάλα γράμματα — ποτέ σώμα. */ :root[data-theme="dark"] { --v-canvas: #0B0B0B; --cc-good: #5FBF8A; --cc-good-bg: rgba(16, 105, 63, .22); --cc-good-line: rgba(16, 105, 63, .5); --cc-warn: #E8A44A; --cc-warn-bg: rgba(154, 83, 0, .22); --cc-warn-line: rgba(154, 83, 0, .5); --cc-bad: #FF6B6E; --cc-bad-bg: rgba(192, 14, 18, .22); --cc-bad-line: rgba(192, 14, 18, .5); --drop-solvent: #FF6B6E; /* σκούρο θέμα: το Flame σβήνει σε σκούρο φόντο (3,8:1) */ --cc-ink-2: rgba(255, 255, 255, .72); --cc-chip: rgba(255, 255, 255, .10); --v-surface-1: #16181A; --v-surface-2: #1F2225; --v-line: rgba(255, 255, 255, .14); --v-line-hover: rgba(255, 255, 255, .24); --v-text: #FFFFFF; --v-text-muted: rgba(255, 255, 255, .68); /* ~9:1 */ --v-text-faint: rgba(255, 255, 255, .45); /* ~4,6:1 */ --v-steel: #9AA1A5; --v-scrim: rgba(11, 11, 11, .72); --v-scrim-photo: rgba(11, 11, 11, .94); --v-scrim-photo-btn: rgba(11, 11, 11, .6); /* Brand Book: λευκό δαχτυλίδι εστίασης σε σκούρο έδαφος. */ --v-focus: #FFFFFF; /* ── ΟΠΤΙΚΗ ΔΙΟΡΘΩΣΗ ΓΡΑΜΜΑΤΩΝ ΣΤΟ ΣΚΟΥΡΟ ───────────────────── Ανοιχτά γράμματα πάνω σε σκούρο φόντο «φουσκώνουν»: το φως απλώνεται στο σκοτάδι και το ίδιο βάρος δείχνει πιο χοντρό και πιο θολό απ' ό,τι σε λευκό. Γι' αυτό ΚΑΘΕ βάρος κατεβαίνει ένα σκαλί — η Inter είναι μεταβλητή, οπότε δέχεται τα ενδιάμεσα νούμερα και δεν «πηδάει» σε επόμενη αρχή. Μαζί, εξομάλυνση σε επίπεδο υποεικονοστοιχείου → γκρίζας κλίμακας (βλ. body στο style.css), που κόβει το ίδιο φούσκωμα. */ --w-med: 480; --w-semi: 560; --w-bold: 620; } /* ════════════════════════════════════════════════════════════════════ ΒΙΤΡΙΝΑ ATLACOLL — θέμα εταιρείας (Πλάνο Ε, 09/09/2026) Μπαίνει με από το /api/me (brandUI, login). Πηγή: ATLACOLL Brand Book 2026 (skill atlacoll-brand). Οι έξι κανόνες: ένα πορτοκαλί #EF7D00 (τονισμός, όχι φόντο) · ακτίνα 0 · Roboto Condensed + Open Sans · 60 λευκό / 30 μαύρο / 10 πορτοκαλί. ⚠️ ΜΟΝΟ τα tokens αλλάζουν — τα σημασιολογικά χρώματα κατάστασης (Amber=περιμένει, Lime=απαντήθηκε, Flame=πρόβλημα) ΔΕΝ αλλάζουν με την εταιρεία (μάθημα Credit Control). Οι γραμματοσειρές τοπικά, ποτέ CDN. ═══════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/OpenSans-400-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: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/OpenSans-400-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: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/OpenSans-600-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: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/OpenSans-600-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; } :root[data-co="atlacoll"] { --atl-orange: #EF7D00; --atl-orange-hover: #C96500; --atl-ink: #1A191F; --atl-black: #0C0C10; --atl-steel: #4C4F54; --atl-concrete: #DEDEDE; --atl-mist: #F3F3F3; --atl-aqua: #01A6D2; /* ATLATHERM (Ομάδα 45): σοβάδες — μόνο ως τονισμός καρτέλας */ --v-sky: var(--atl-orange); /* το ΜΟΝΟ χρώμα αλληλεπίδρασης εδώ είναι το πορτοκαλί */ --v-focus: var(--atl-orange); --v-text: var(--atl-ink); --v-ink: var(--atl-ink); --v-text-muted: var(--atl-steel); --v-line: var(--atl-concrete); --v-line-hover: var(--atl-steel); --v-surface-2: var(--atl-mist); --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --cc-data: "Roboto Condensed", "Arial Narrow", Arial, sans-serif; /* όπως στο Cockpit ATLACOLL */ --cc-th: var(--atl-ink); --cc-chip: #EDEDED; --side-bg: var(--atl-black); --side-line: var(--atl-steel); --side-text: var(--atl-concrete); --side-accent: var(--atl-orange); } :root[data-theme="dark"][data-co="atlacoll"] { --v-canvas: var(--atl-black); --v-focus: #FFFFFF; --v-text: #F2F2F2; --v-text-muted: #B8BBC0; --v-line: #33353A; --v-surface-2: #17181C; }