/* ============================================================ OneStreaming 2026 — Design tokens Κατεύθυνση «Σήμα» / παλέτα «Σέλας» · άγκυρα το χρώμα του λογοτύπου: σκούρη βάση με λευκές ζώνες. Όλα τα ζεύγη κειμένου/φόντου ελέγχθηκαν για WCAG AA. ============================================================ */ :root{ /* ---------- ΣΚΟΥΡΕΣ ΕΠΙΦΑΝΕΙΕΣ (ink) ---------- */ --ink-900:#080B12; /* φόντο σελίδας */ --ink-800:#0D1220; /* ανυψωμένο panel */ --ink-700:#121A2B; /* κάρτα */ --ink-line:rgba(255,255,255,.08); --ink-line-strong:rgba(255,255,255,.16); --on-ink-1:#E8EDF7; /* κύριο κείμενο 16.8:1 AAA */ --on-ink-2:#93A3BE; /* δευτερεύον 7.7:1 AAA */ --on-ink-3:#7386A0; /* ετικέτες, βοηθητικά 4.7:1 AA */ /* ---------- ΛΕΥΚΕΣ ΕΠΙΦΑΝΕΙΕΣ (paper) ---------- */ --paper-000:#FFFFFF; /* φόντο σελίδας */ --paper-050:#F7F8FB; /* εναλλακτική ζώνη */ --paper-100:#EEF1F7; /* γέμισμα, disabled */ --paper-line:#E2E7F0; --paper-line-strong:#CBD4E3; --on-paper-1:#0C1220; /* κύριο κείμενο 18.7:1 AAA */ --on-paper-2:#47536B; /* δευτερεύον 7.7:1 AAA */ --on-paper-3:#66728A; /* ετικέτες, βοηθητικά 4.8:1 AA */ /* ---------- BRAND ---------- Άγκυρα: το ΧΡΩΜΑ ΤΟΥ ΛΟΓΟΤΥΠΟΥ, #2945C0, στις 229°. Δεν αλλάζει. Τα βαθιά σκαλιά κρατούν την ίδια απόχρωση. Τα φωτεινά στρέφονται σταδιακά προς cobalt (229° → 221°), γιατί το ίδιο μοβ-μπλε σε υψηλή φωτεινότητα πάνω σε σκούρο διαβάζεται βιολετί και «καίει». Η στροφή απόχρωσης κατά τη φωτεινότητα είναι συνήθης τεχνική — κρατάει το σήμα αυθεντικό και τα φώτα καθαρά. */ --brand-900:#101B4C; --brand-800:#17276D; /* σκούρα μπλοκ, πατημένη κατάσταση */ --brand-700:#1F3593; --brand-600:#2945C0; /* ΧΡΩΜΑ ΛΟΓΟΤΥΠΟΥ · CTA σε λευκό — λευκό πάνω 7,76:1 AAA */ --brand-500:#2E5AEA; /* CTA σε σκούρο — λευκό πάνω 5,58:1 AA */ --brand-400:#759CFF; /* σύνδεσμοι & τονισμοί σε σκούρο — 7,46:1 AAA */ --brand-300:#ADC7FF; /* έντονος τονισμός σε σκούρο — 11,61:1 AAA */ --brand-100:#D9E4FC; --brand-050:#ECF2FE; /* απαλή ζώνη σε λευκό */ /* ---------- AURORA — το ίχνος του μοβ ---------- Δεν είναι χρώμα κειμένου ούτε κουμπιού. Ζει μόνο μέσα στις βαθμώσεις του σκούρου, εκεί που το μπλε συναντά το πράσινο — όπως στο σέλας. Αν εμφανιστεί σαν συμπαγής επιφάνεια, το σύστημα χάνει την ισορροπία του. */ --aurora-600:#522FC6; /* κείμενο σε λευκό, σπάνια — 8,14:1 AAA */ --aurora-500:#7653EA; /* πυρήνας βάθμωσης */ --aurora-400:#9C80FA; /* τονισμός σε σκούρο — 6,45:1 AA */ /* ---------- SIGNAL ---------- Το πρασινοκύανο σημαίνει «ζωντανό δεδομένο»: uptime, status, μετρήσεις. ΠΟΤΕ διακοσμητικά — αν μπει παντού, παύει να σημαίνει κάτι. */ --signal-400:#56E6BD; /* σε ink-900 — 12,61:1 AAA */ --signal-600:#087D5C; /* η ίδια σημασία σε λευκή επιφάνεια — 5,12:1 AA */ /* ---------- Η ΒΑΘΜΩΣΗ «ΣΕΛΑΣ» ---------- Μοβ → cobalt → πρασινοκύανο, πάντα σε πολύ χαμηλή ένταση, πάντα πάνω σε ink-900. Χρησιμοποιείται στο hero και στο τελικό CTA — πουθενά αλλού. */ --aurora-wash: radial-gradient(720px 330px at 80% -22%, rgba(86,230,189,.15), transparent 60%), radial-gradient(620px 320px at 46% -26%, rgba(118,83,234,.20), transparent 60%), radial-gradient(950px 400px at 8% -12%, rgba(46,90,234,.30), transparent 62%); --aurora-line: linear-gradient(90deg, var(--aurora-500), var(--brand-500) 46%, var(--signal-400)); /* ---------- ΣΗΜΑΣΙΟΛΟΓΙΚΑ ---------- */ --ok:#34C77B; --warn:#E8A93C; --bad:#E8544F; /* ---------- ΤΥΠΟΓΡΑΦΙΑ ---------- */ --font-ui:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --font-mono:"JetBrains Mono","Mono Fallback",ui-monospace,Menlo,Consolas,monospace; /* Και οι δύο έχουν πλήρη ελληνική υποστήριξη. Η mono χρησιμοποιείται για νούμερα, τιμές, bitrate, GB, χρόνους — ό,τι στοιχίζεται σε στήλη. */ --t-display:60px; --lh-display:1.04; --ls-display:-.04em; --t-h1:46px; --lh-h1:1.08; --ls-h1:-.035em; --t-h2:36px; --lh-h2:1.14; --ls-h2:-.03em; --t-h3:28px; --lh-h3:1.2; --ls-h3:-.025em; --t-h4:22px; --lh-h4:1.3; --ls-h4:-.015em; --t-lead:18px; --lh-lead:1.6; --t-body:16px; --lh-body:1.65; --t-small:14px; --lh-small:1.6; --t-micro:12px; --lh-micro:1.5; --ls-micro:.02em; --t-label:11px; --ls-label:.14em; /* uppercase, weight 700 */ --w-regular:400; --w-medium:500; --w-semi:600; --w-bold:800; /* ---------- ΑΠΟΣΤΑΣΕΙΣ (βάση 4) ---------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; /* ---------- ΑΚΤΙΝΕΣ ---------- */ --r-sm:6px; /* ετικέτες, μικρά πεδία */ --r-md:9px; /* κουμπιά, inputs */ --r-lg:14px; /* κάρτες, panels */ --r-full:999px; /* ---------- ΠΛΑΤΗ & ΓΡΑΜΜΕΣ ---------- */ --measure:72ch; /* μέγιστο πλάτος τρεχούμενου κειμένου */ --container:1180px; --gutter:24px; /* ---------- ΒΑΘΟΣ ---------- Στις σκούρες ζώνες το βάθος γίνεται με φωτεινότητα και hairlines, όχι με σκιές. Οι σκιές υπάρχουν μόνο σε λευκές επιφάνειες. */ --shadow-sm:0 1px 2px rgba(12,18,32,.06); --shadow-md:0 8px 24px -8px rgba(12,18,32,.14); /* ---------- ΚΙΝΗΣΗ ---------- */ --ease:cubic-bezier(.2,.7,.3,1); --dur-fast:120ms; --dur:200ms; } /* Σεβασμός στην προτίμηση μειωμένης κίνησης — ο ισοσταθμιστής του hero και κάθε άλλη επανάληψη σταματούν. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ============================================================ ΕΠΙΦΑΝΕΙΕΣ Κάθε ζώνη της σελίδας παίρνει .surface-ink ή .surface-paper. Τα components διαβάζουν --fg-1/2/3, --bg, --line — άρα γράφονται μία φορά και δουλεύουν και στις δύο επιφάνειες. ============================================================ */ .surface-ink{ --bg:var(--ink-900); --bg-raised:var(--ink-800); --bg-card:var(--ink-700); --fg-1:var(--on-ink-1); --fg-2:var(--on-ink-2); --fg-3:var(--on-ink-3); --line:var(--ink-line); --line-strong:var(--ink-line-strong); --accent:var(--brand-400); --cta-bg:var(--brand-500); --cta-fg:#fff; --signal:var(--signal-400); background:var(--bg); color:var(--fg-1); } .surface-paper{ --bg:var(--paper-000); --bg-raised:var(--paper-050); --bg-card:var(--paper-000); --fg-1:var(--on-paper-1); --fg-2:var(--on-paper-2); --fg-3:var(--on-paper-3); --line:var(--paper-line); --line-strong:var(--paper-line-strong); --accent:var(--brand-600); --cta-bg:var(--brand-600); --cta-fg:#fff; --signal:var(--signal-600); background:var(--bg); color:var(--fg-1); }