/* ekΜάθησις — site v1 (παιδικό, marketing). Design: bright/off-white, dominant teal, αισθητική Stripe/Apple. Fluid type scale με clamp() — καμία σταθερή px τιμή σε heading/body. Τυπογραφία: Manrope (τίτλοι) + Inter (σώμα) — και τα δύο πλήρες Greek+Latin, self-hosted. */ /* ---------- Fonts (self-hosted VARIABLE, greek+latin subsets — CSP-ready, font-src 'self') ---------- v4: όλα τα αρχεία είναι variable (τα ίδια URLs σερβίρονται από το css2 API για wght@100..900) → δηλώνονται με range, ξεκλειδώνοντας τα ΛΕΠΤΑ βάρη (200-400) που ζήτησε ο Αντώνης. Display = Commissioner (λεπτό, μοντέρνο grotesk, πλήρη ελληνικά — Κ. Μπαρτσόκας)· body = Inter. */ @font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/commissioner-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/commissioner-var-greek.woff2') format('woff2'); unicode-range: U+0370-03FF; } /* Syne (variable 400-800) — διακριτικό, design-forward grotesk για τίτλους («όχι basic», αίτημα 3/7) */ @font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/syne-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/syne-var-greek.woff2') format('woff2'); unicode-range: U+0370-03FF; } /* ═══ ACTUAL — γραμματοσειρά ΤΙΤΛΩΝ (απόφαση Αντώνη 21/8) ═══ Πέτρος Βασιάδης, CC BY 4.0 (cynfonts.blogspot.com, 2014) — η αναφορά δημιουργού ζει στο privacy.html. Μονογραμμική/γεωμετρική: ομοιοκαταληκτεί με τη γραμμή του showreel (σταθερό πάχος, round caps), κάτι που η Inter — ουμανιστική, φτιαγμένη για UI — δεν κάνει. ΔΙΟΡΘΩΜΕΝΗ ΕΚΔΟΣΗ (21/8, επιτρεπτό από την άδεια): το πρωτότυπο είχε ΜΗΔΕΝ kerning και του έλειπαν τα – — … (7 τίτλοι χρησιμοποιούν το «—»). Προστέθηκαν: 392 ζεύγη kerning υπολογισμένα οπτικά πάνω στους πραγματικούς τίτλους του site, και οι 3 χαρακτήρες σχεδιασμένοι με το πάχος της ίδιας (πηγές/εργαλεία: assets/fonts/actual-src/). Ένα αρχείο ανά βάρος (100/200/400) — δεν είναι variable. Καλύπτει greek+latin μαζί. */ @font-face { font-family: 'Actual'; font-style: normal; font-weight: 100; font-display: swap; src: url('../fonts/actual-thin.woff2?v=7') format('woff2'); } @font-face { font-family: 'Actual'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/actual-extralight.woff2?v=7') format('woff2'); } @font-face { font-family: 'Actual'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/actual-book.woff2?v=7') format('woff2'); } @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+2000-206F, U+20AC, U+2122; } @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-03FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/manrope-greek.woff2') format('woff2'); unicode-range: U+0370-03FF; } /* Roboto (variable 100-900) — κύρια γραμματοσειρά (camps), self-hosted αντί για Google Fonts (perf: −1 εξωτερικό round-trip· GDPR: καμία IP επισκέπτη προς Google). greek + latin subsets. */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/roboto-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/roboto-var-greek.woff2') format('woff2'); unicode-range: U+0370-03FF; } /* ---------- Design tokens ---------- */ :root{ /* Χρώματα — Lusion-style ουδέτερα γκρι (απόφαση 17/7: όλο γκρι, subtle διαβαθμίσεις· έφυγαν το off-white και οι πρασινωπές αποχρώσεις). Teal μένει ΜΟΝΟ ως brand accent σε CTAs/links. */ /* ═══ ΠΑΛΕΤΑ v2 — ΚΛΕΙΔΩΘΗΚΕ 22/8/2026 (επιλογή Αντώνη στο _palette.html) ═══ Η οικογένεια βγήκε από τη ΓΡΑΜΜΗ του showreel (#94FFFB → #29A8D6): ήταν ήδη το πιο χαρακτηριστικό στοιχείο του site και το μόνο κυανό μέσα σε τέσσερις άσχετες οικογένειες (teal-πράσινο 173°, λαχανί 74°, κυανό 178°, μπλε 234°). Τώρα μία οικογένεια, τρεις ρόλοι: ΚΥΡΙΟ #4BECE7 (178°) — γεμίσματα (κουμπιά, σήματα) + ό,τι κάθεται σε ΣΚΟΥΡΟ ΚΕΙΜΕΝΟ #00807D (179°) — το ίδιο χρώμα, αρκετά βαθύ για γράμματα σε ΑΝΟΙΧΤΟ ΤΟΝΙΣΜΟΣ #C6F135 — σπάνια, σε συγκεκριμένα σημεία (μένει ως --c-volt) ⚠ ΓΙΑΤΙ ΔΥΟ ΤΙΜΕΣ ΓΙΑ ΤΟ ΙΔΙΟ ΧΡΩΜΑ: το #4BECE7 σε ανοιχτό φόντο μετριέται 1,37:1 — αόρατο ως κείμενο. Σε γέμισμα όμως δίνει 12,10:1 με μαύρα γράμματα. Δεν φταίει το χρώμα, φταίει το έδαφος. Απόσταση απόχρωσης κυρίου↔κειμένου: 1° — το μάτι τα διαβάζει ως ένα. ΠΑΛΙΕΣ ΤΙΜΕΣ ΓΙΑ «ΓΥΡΝΑ ΠΙΣΩ»: bg #F0F1FA · tint #E4E6EF · ράμπα 173°: 50 #EAF6F4 · 100 #CFEBE7 · 400 #1FA394 · 500 #0E8C7D · 600 #0B7568 · 700 #095F55 */ --c-bg: #F7F8FC; /* ήταν #F0F1FA — φωτεινότητα 88,3% → 93,9%, ίδια κρύα οικογένεια */ --c-surface: #FFFFFF; --c-surface-tint: #E4E8F5; /* ήταν #E4E6EF (ουδέτερο γκρι, 9 μονάδες κάτω — έκανε ορατή ραφή) */ --c-accent: #4BECE7; /* ΚΥΡΙΟ — μόνο σε γεμίσματα & σκούρο έδαφος */ --c-accent-hover: #21E8E1; /* το ίδιο, ένα σκαλί κάτω, για hover γεμάτου κουμπιού */ --c-teal-50: #E4F7F6; --c-teal-100: #C2EFEE; --c-teal-400: #12A8A5; --c-teal-500: #068B88; /* ═══ ΔΥΟ ΤΟΚΕΝ, ΟΧΙ ΕΝΑ (απόφαση Αντώνη 22/8) ═══ Το χρώμα κειμένου χωρίστηκε κατά ΡΟΛΟ, όχι κατά αισθητική: teal-600 #00B3B0 → ΔΙΑΚΟΣΜΗΤΙΚΑ & ΜΕΓΑΛΑ (eyebrows, ρόλοι, em σε τίτλους, ο 67px αριθμός στο προφίλ, tags). Μετριέται 2,45:1 — κάτω από το όριο, αλλά είναι ετικέτες που ΔΕΝ κουβαλάνε λειτουργία: το νόημα το δίνει ο τίτλος από κάτω. Επιλογή Αντώνη, με γνώση του αριθμού. cta #00807D → ΛΕΙΤΟΥΡΓΙΚΑ (σύνδεσμοι, εικονίδιο FAQ). Εκεί η ανάγνωση δεν είναι διακόσμηση: αν δεν φανεί ο σύνδεσμος, χάνεται η ενέργεια. 4,51:1. ⚠ Αν αλλάξει το ένα, ΔΕΝ αλλάζει το άλλο — αυτός ακριβώς είναι ο σκοπός. */ --c-teal-600: #00B3B0; /* διακοσμητικό — ήταν #00807D, πριν #0B7568 */ --c-teal-700: #006B68; --c-ink: #17191E; /* ουδέτερο σκούρο (ήταν πρασινωπό #10201D) */ --c-ink-soft: #474C56; --c-ink-mute: #72777F; --c-border: #D7DAE0; --c-border-soft: #E1E3E8; --c-cta: #00807D; /* ΛΕΙΤΟΥΡΓΙΚΟ — σύνδεσμοι & εικονίδια, 4,51:1 στο φόντο */ --c-cta-hover: #006B68; /* ήταν #095F55 */ /* ΤΟ FOCUS ΑΝΕΒΗΚΕ ΣΚΑΛΙ (μετρημένο): το teal-400 δίνει 2,76:1 στο νέο φόντο, κάτω από το 3:1 που θέλει ένα περίγραμμα εστίασης. Το teal-500 δίνει 3,91:1. */ --c-focus: #068B88; /* Lusion accents (απόφαση 17/7 — reference lusion.co): electric blue = η γραμμή του hero video (ανοίγει προς το τελείωμα)· ribbon = η τιρκουάζ→πράσινη γραμμή πίσω από τη μεγάλη τυπογραφία. */ --c-elec: #2B3BFF; --c-elec-light: #7A85FF; --c-ribbon-a: #17D9C0; --c-ribbon-b: #62E874; /* VOLT-style accent (lime) — ζητήθηκε ρητά για το κίτρινο shutter + giant hero wordmark accents. REVIEWABLE: η παλέτα δεν έχει κλειδώσει· αν αποφασιστεί άλλο accent, αλλάζει ΜΟΝΟ εδώ. */ --c-volt: #C6F135; --c-volt-ink: #0C1400; /* container-aligned άκρη (ώστε το fixed wordmark να ευθυγραμμίζεται με το nav logo σε φαρδιές οθόνες) */ --gutter: max((100vw - var(--container-max)) / 2, 0px); --pad-x: clamp(1.25rem, 1rem + 2vw, 2.5rem); /* Τυπογραφία — v7 (αίτημα 3/7: «όχι basic» + «ακόμα πιο λεπτή»): · display = Syne (διακριτικό grotesk) για τίτλους/panels/footer · hero = Commissioner ExtraLight (200) για την ποιητική ατάκα — πολύ λεπτή, elegant · body = Inter. Όλα self-hosted, πλήρη ελληνικά. Τα βάρη = tokens (αλλαγή από ΕΝΑ σημείο). */ /* ΚΑΘΟΛΙΚΗ ΓΡΑΜΜΑΤΟΣΕΙΡΑ: Manrope (απόφαση Αντώνη 11/8) — επιλέχθηκε από δείγματα, έχει πραγματικά ελληνικά glyphs. Η Roboto μένει εφεδρική. ⚠ ΠΡΟΣ ΕΛΕΓΧΟ Β' ΦΑΣΗΣ: η Manrope δεν έχει πλάγια· όπου χρειαστεί italic ο browser θα το «γείρει» τεχνητά. Στο site τα είναι ήδη font-style: normal (μόνο το .tl-note στο προφίλ είναι italic). Αν το σώμα κειμένου δεν διαβάζεται άνετα, ζευγαρώνουμε δεύτερη γραμματοσειρά ΜΟΝΟ για τρέχον κείμενο — τα tokens είναι ήδη χωριστά γι' αυτόν τον λόγο. */ /* ΤΙΤΛΟΙ → INTER 200 (απόφαση Αντώνη 18/8, δοκιμή στο _font-test.html). Οι ΤΙΤΛΟΙ και το hero παίρνουν Inter ExtraLight· το ΚΥΡΙΩΣ ΚΕΙΜΕΝΟ μένει Manrope — αυτό ήταν ρητός όρος. Το Inter είναι ήδη self-hosted ΚΑΙ variable (100–900): το βάρος 200 δεν χρειάστηκε κανένα νέο αρχείο (επαληθεύτηκε με μέτρηση πλάτους ανά βάρος). Το -0.02em tracking είναι απαραίτητο: χωρίς αυτό το 200 «διαλύεται» σε μεγάλο μέγεθος (τιμές από την πλατφόρμα, frost.css .fr-hello h1). Fallback σε Manrope, όχι Roboto, ώστε αν λείψει το Inter να πέσει στη γραμματοσειρά που ήδη φορτώνει η σελίδα. */ /* 21/8 (απόφαση Αντώνη): τίτλοι → ACTUAL. Fallback: Inter (ίδιο πνεύμα, ήδη φορτωμένη) → Manrope. ΜΕΤΡΗΜΕΝΟ: η Actual είναι +24% φαρδύτερη από την Inter στους τίτλους του site· με το kerning που της χτίσαμε και tracking -0.05em η διαφορά πέφτει στο ~+9% — αποδεκτή, αλλά ΠΡΟΣΟΧΗ στα nowrap σημεία (λίστα προγραμμάτων: το 6.5vw έγινε 6vw, βλ. εκεί). */ --f-display: 'Actual', 'Inter', 'Manrope', system-ui, sans-serif; --f-hero: 'Actual', 'Inter', 'Manrope', system-ui, sans-serif; /* ΓΙΑ ΤΑ ΒΑΡΙΑ display στοιχεία (600-800: μενού overlay, ΚΑΘΕ ΜΕΡΑ, ΕΤΟΙΜΟΣ…, αριθμοί βημάτων, FAQ). Η Actual έχει ΜΟΝΟ 100/200/400 — και το CSS ΔΕΝ πέφτει στην επόμενη οικογένεια όταν λείπει το βάρος (μόνο όταν λείπει ο χαρακτήρας): θα έδινε Actual 400, δηλαδή ΛΕΠΤΟ εκεί που το σχέδιο θέλει ΒΑΡΥ. Αυτά μένουν ρητά σε Inter. */ --f-display-ui: 'Inter', 'Manrope', system-ui, sans-serif; --f-body: 'Manrope', 'Roboto', system-ui, sans-serif; /* ΚΕΙΜΕΝΟ — δεν αλλάζει */ /* ΑΡΙΘΜΟΙ (25/8). ΓΙΑΤΙ ΞΕΧΩΡΙΣΤΟ ΤΟΚΕΝ: η Actual έχει ΜΟΝΟ oldstyle ψηφία — το «9», το «3», το «4», το «7» πέφτουν κάτω από τη γραμμή βάσης και τα ύψη διαφέρουν. Μετρήθηκε στο αρχείο: «9» βάθος −10 και ύψος 71, «0» βάθος 0 και ύψος 80. Και τα πρωτότυπα .otf δεν έχουν καμία OpenType feature, άρα ΔΕΝ διορθώνεται με font-variant-numeric. Όπου ένας αριθμός πρέπει να «στέκεται» (μετρητές, χρονολογίες, αρίθμηση) → --f-num. */ --f-num: 'Manrope', 'Inter', system-ui, sans-serif; /* tracking τίτλων. 21/8 ΑΝΑΘΕΩΡΗΣΗ: ήταν -0.05em και ΣΤΟΙΒΑΖΟΤΑΝ πάνω στο kerning — το «ελ» σφιγγόταν συνολικά -141 μονάδες και τα γράμματα κολλούσαν. Το kerning διορθώνει πλέον ΜΟΝΟ τις εξαιρέσεις (φυσικός ρυθμός 100), οπότε εδώ αρκεί το ίδιο -0.02em που είχε και η Inter — καθαρός διαχωρισμός ρόλων: kerning = εξαιρέσεις, tracking = ρυθμός. */ --ls-display: -0.02em; --fw-display: 200; /* τίτλοι section — Actual ExtraLight */ --fw-display-strong: 600; /* panel labels / footer headings — πέφτει σε Inter (η Actual δεν έχει 600) */ --fw-hero: 200; /* ατάκα hero — Actual ExtraLight */ /* Fluid type scale — clamp(min, preferred-vw, max). 6 βαθμίδες: display/h1/h2/h3/body/small. Ref: 375px mobile → 1440px desktop viewport. */ --fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); /* 36px → 72px */ --fs-h1: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem); /* 30px → 52px */ --fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);/* 24px → 38px */ --fs-h3: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem); /* 18px → 24px */ --fs-body: clamp(1rem, 0.94rem + 0.24vw, 1.125rem);/* 16px → 18px */ --fs-small: clamp(0.8125rem,0.78rem + 0.14vw, 0.9375rem);/* 13px → 15px */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.65; /* Spacing — fluid, τιμωρεί σταθερά px */ --sp-section: clamp(3.5rem, 2.4rem + 4.4vw, 8rem); --sp-block: clamp(1.75rem, 1.4rem + 1.4vw, 3rem); --sp-gap: clamp(1rem, 0.85rem + 0.6vw, 1.75rem); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(21,23,29,.06), 0 1px 1px rgba(21,23,29,.04); --shadow-md: 0 8px 24px -8px rgba(21,23,29,.14); --shadow-lg: 0 24px 48px -12px rgba(21,23,29,.18); --container-max: 1180px; --dur-fast: 180ms; --dur-med: 320ms; --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset (thin) ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body{ margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } img, video{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul{ margin: 0; padding: 0; list-style: none; } h1,h2,h3,p,dl,dd{ margin: 0; } input, select{ font: inherit; } h1,h2,h3{ font-family: var(--f-display); font-weight: var(--fw-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } /* ΕΞΑΙΡΕΣΗ h3 (18/8): το βάρος 200 δουλεύει σε μεγάλα μεγέθη· στα 18–24px του --fs-h3 γίνεται εύθραυστο, ιδίως σε tablet μέσα σε φωτεινή αίθουσα. Μένει 300. Αλλάζει από ΕΔΩ αν κριθεί. */ h3{ font-weight: 400; } /* 21/8: η Actual δεν έχει 300· στο 18-24px το 200 είναι εύθραυστο (δίδαγμα 18/8) → Book */ .eyebrow{ font-family: var(--f-body); font-weight: 600; font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: var(--c-teal-600); } /* Focus states — visible, ΠΟΤΕ outline:none χωρίς αντικατάσταση */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; } /* ---------- Layout ---------- */ .container{ max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(1.25rem, 1rem + 2vw, 2.5rem); } .section{ padding-block: var(--sp-section); } .section-head{ max-width: 46rem; margin-bottom: var(--sp-block); } .section-head h2{ font-size: var(--fs-h2); margin-top: .6rem; } /* ---------- Header ---------- */ .site-header{ position: sticky; top: 0; z-index: 50; background: rgba(237,238,241,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: background-color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); } .site-header.is-scrolled{ border-bottom-color: var(--c-border); box-shadow: var(--shadow-sm); } .site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; } .site-logo{ display: flex; align-items: center; } /* 6/8 (αίτημα Αντώνη): ο μαύρος δίσκος ΔΕΝ είναι συμπαγής — ημιδιαφανής (95%) με θόλωμα από πίσω (glass) και ελαφριά σκιά προς τα κάτω. */ .mu-logo{ display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: rgba(23, 25, 30, .95); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); overflow: hidden; } .mu-logo__glyph{ width: 61.5%; height: auto; display: block; filter: brightness(0) invert(1); } .site-logo .mu-logo{ width: clamp(60px, 52px + 1.6vw, 80px); height: clamp(60px, 52px + 1.6vw, 80px); } /* ΟΡΙΖΟΝΤΙΟ NAV ΚΑΤΑΡΓΗΘΗΚΕ (απόφαση Αντώνη 19/8, ενοποίηση breakpoints): burger με τις 3 γραμμές σε ΟΛΑ τα πλάτη, και στις εσωτερικές σελίδες — το πλήρες μενού ζει στο overlay. Μετρημένο πριν την απόφαση: το nav στη σειρά ήθελε 661-735px μόνο του (914px μαζί με λογότυπο+κουμπί) και στα 900-1010 έσπαγε ήδη σε 2 γραμμές (62px ύψος αντί 44). */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: var(--fs-small); min-height: 44px; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); cursor: pointer; } /* ΤΟ ΓΕΜΑΤΟ ΚΟΥΜΠΙ ΠΑΙΡΝΕΙ ΤΟ ΚΥΡΙΟ ΧΡΩΜΑ (22/8 — απόφαση Αντώνη στον δοκιμαστή παλέτας: «σε κουμπιά που έχουν έτσι μεγάλο [γέμισμα] είναι ωραίο να φαίνεται»). ΓΙΑΤΙ ΕΠΡΕΠΕ: με σκούρο γέμισμα το site φαινόταν ΑΜΕΤΑΒΛΗΤΟ. Το παλιό #0B7568 και το νέο #00807D απέχουν 6 μοίρες απόχρωσης και ΜΗΔΕΝ φωτεινότητας — ο λόγος αντίθεσης ΜΕΤΑΞΥ τους είναι 1,17:1, δηλαδή για το μάτι είναι το ίδιο χρώμα. Η ταυτότητα φαίνεται μόνο εκεί που το χρώμα μπαίνει ΑΝΟΙΧΤΟ: σε γέμισμα. Μαύρα γράμματα πάνω του: 12,10:1. */ .btn-primary{ background: var(--c-accent); color: var(--c-ink); box-shadow: var(--shadow-sm); } .btn-primary:hover{ background: var(--c-accent-hover); box-shadow: var(--shadow-md); } .btn-ghost{ background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border); } .btn-ghost:hover{ border-color: var(--c-teal-400); color: var(--c-teal-700); } .btn-header{ display: none; } @media (min-width: 700px){ .btn-header{ display: inline-flex; } } /* burger — σε ΟΛΑ τα πλάτη (19/8, μαζί με την κατάργηση του οριζόντιου nav) */ .burger{ display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; } .burger:hover{ background: var(--c-surface-tint); } .burger span, .burger::before, .burger::after{ content: ''; display: block; width: 20px; height: 2px; background: var(--c-ink); border-radius: 2px; position: relative; } .burger{ flex-direction: column; gap: 5px; } .mobile-nav{ position: fixed; inset: 0; z-index: 60; background: var(--c-bg); display: flex; flex-direction: column; padding: 1.1rem clamp(1.25rem,1rem + 2vw,2.5rem); transform: translateY(-100%); transition: transform var(--dur-med) var(--ease); } .mobile-nav.is-open{ transform: translateY(0); } .mobile-nav-top{ display: flex; align-items: center; justify-content: space-between; } .mobile-nav-top .mu-logo{ width: 56px; height: 56px; } .mobile-nav ul{ display: flex; flex-direction: column; gap: 1.6rem; margin-top: 3rem; } .mobile-nav a{ font-family: var(--f-display-ui); font-size: var(--fs-h2); font-weight: 700; } .mobile-nav .btn{ margin-top: 2rem; align-self: flex-start; } /* ---------- HERO ---------- */ .hero{ position: relative; padding-top: clamp(2rem, 1rem + 4vw, 4rem); padding-bottom: var(--sp-section); overflow: clip; } /* Row 1: λογότυπο ΜΕΓΑΛΟ αριστερά | ατάκα δεξιά (mobile: στοίβα — λογότυπο πάνω, ατάκα κάτω, σειρά = DOM order) */ .hero-top{ display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); grid-template-columns: 1fr; align-items: center; margin-bottom: clamp(2rem, 1.4rem + 3vw, 4rem); } .hero-logo-wrap{ display: flex; } .hero-logo-wrap img{ width: clamp(160px, 100px + 22vw, 340px); height: auto; } .hero-line{ font-family: var(--f-display); font-size: var(--fs-display); font-weight: 300; letter-spacing: -0.015em; color: var(--c-ink); } .hero-line em{ font-style: normal; color: var(--c-teal-600); } /* Row 2: video, full-width, κάτω από το row 1 */ .hero-media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21/9; background: linear-gradient(160deg,#12302B,#0B2320 60%,#081714); box-shadow: var(--shadow-lg); } .hero-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.12) 45%, transparent 70%); } .media-placeholder{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; z-index: 1; } .media-placeholder-label{ font-family: var(--f-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.92); text-transform: uppercase; border: 1px dashed rgba(255,255,255,.45); border-radius: var(--radius-sm); padding: .9rem 1.2rem; backdrop-filter: blur(2px); } /* πλαίσιο placeholder ΕΚΤΟΣ σκούρων media (πάνω σε ανοιχτό φόντο) */ .media-placeholder.on-light{ position: static; inset: auto; height: 100%; } .media-placeholder.on-light .media-placeholder-label{ color: var(--c-ink-mute); border-color: var(--c-border); background: var(--c-surface-tint); } /* ---------- Sticky-shrink λογότυπο header ---------- Το μεγάλο λογότυπο του hero «μαζεύεται» στο μικρό sticky του header καθώς σκρολάρεις (GSAP ScrollTrigger τσιμπάει .is-logo-visible στο header). ΧΩΡΙΣ JS: το header logo είναι ΠΑΝΤΑ ορατό (no-js/no-motion fallback ασφαλές — ποτέ κρυφό brand στοιχείο). */ .site-header .site-logo{ transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); } /* Το header logo είναι πλέον ΠΑΝΤΑ ορατό by default (v3)· κρύβεται ΜΟΝΟ στην homepage (body[data-home]) όπου το ταξιδεμένο giant wordmark αναλαμβάνει τον ρόλο του — βλ. VOLT layer. */ /* ---------- Τι κάνουμε ---------- */ .intro-copy{ max-width: 42rem; } .intro-copy h2{ font-size: var(--fs-h1); } .intro-copy p{ margin-top: 1.25rem; color: var(--c-ink-soft); font-size: var(--fs-body); } /* ---------- Η καθημερινή μελέτη (4 βήματα + Χάρτης Μάθησης) ---------- */ .steps-row{ display: grid; grid-template-columns: 1fr; gap: var(--sp-gap); margin-bottom: var(--sp-block); } @media (min-width: 700px){ .steps-row{ grid-template-columns: repeat(4,1fr); } } .step{ display: flex; flex-direction: column; gap: .6rem; } .step-num{ font-family: var(--f-display-ui); font-weight: 800; font-size: 1.5rem; color: var(--c-teal-400); } .step h3{ font-size: var(--fs-h3); } .step p{ color: var(--c-ink-soft); font-size: var(--fs-small); } .map-panel{ display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); align-items: center; margin-top: clamp(2rem, 1.5rem + 2vw, 4rem); } @media (min-width: 700px){ .map-panel{ grid-template-columns: 1fr 1fr; } } .map-copy h3{ font-size: var(--fs-h2); } .map-copy p{ margin-top: 1rem; color: var(--c-ink-soft); } .map-bullets{ margin-top: 1.5rem; display: flex; flex-direction: column; gap: .9rem; } .map-bullets li{ display: flex; gap: .75rem; font-size: var(--fs-small); color: var(--c-ink-soft); } .map-bullets strong{ color: var(--c-ink); font-family: var(--f-display-ui); } .map-bullets .dot{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal-500); margin-top: .55rem; } .map-closing{ margin-top: 1.5rem; font-weight: 600; color: var(--c-teal-700); } .map-shot{ border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--shadow-md); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .cta-row{ margin-top: var(--sp-block); } /* ---------- Εκπαιδευτικοί ---------- */ .people-intro{ max-width: 46rem; color: var(--c-ink-soft); margin-top: .75rem; } .people-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-gap); margin-top: var(--sp-block); } /* 4 στήλες από τα 700 (ίδια διάταξη με desktop, συμπιεσμένη — 19/8)· μετρημένο στα 700: κάρτα 147px, ονόματα/ρόλοι αναδιπλώνουν χωρίς κόψιμο. Κινητό ≤699: 1 στήλη (βάση). */ @media (min-width: 700px){ .people-grid{ grid-template-columns: repeat(4,1fr); } } .person-card{ display: flex; flex-direction: column; gap: .9rem; } /* momentum-hover: ο εσωτερικός wrapper είναι ο target που κινείται με inertia (x/y/rotation) */ .person-card__inner{ display: flex; flex-direction: column; gap: .9rem; will-change: transform; } .person-photo{ aspect-ratio: 1/1; border-radius: var(--radius-md); background: var(--c-surface-tint); border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .person-photo .media-placeholder-label{ color: var(--c-ink-mute); border-color: var(--c-border); font-size: .7rem; padding: .6rem .8rem; } .person-card h3{ font-size: var(--fs-h3); } .person-role{ font-size: var(--fs-small); color: var(--c-teal-600); font-weight: 600; } .person-bio{ font-size: var(--fs-small); color: var(--c-ink-mute); } /* ---------- Προγράμματα ---------- */ .programs-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-gap); margin-top: var(--sp-block); } .program-card{ display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); } .program-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .program-media{ aspect-ratio: 4/3; background: var(--c-surface-tint); position: relative; display: flex; align-items: center; justify-content: center; } .program-media .media-placeholder-label{ color: var(--c-ink-mute); border-color: var(--c-border); font-size: .7rem; padding: .6rem .8rem; } .program-body{ padding: clamp(1.25rem,1rem + 1vw,1.75rem); display: flex; flex-direction: column; gap: .75rem; flex: 1; } .program-num{ font-family: var(--f-display-ui); font-weight: 800; color: var(--c-teal-400); font-size: var(--fs-small); } .program-body h3{ font-size: var(--fs-h3); } .program-body p{ color: var(--c-ink-soft); font-size: var(--fs-small); flex: 1; } .program-link{ font-size: var(--fs-small); font-weight: 600; color: var(--c-cta); display: inline-flex; align-items: center; gap: .4rem; } .program-link svg{ transition: transform var(--dur-fast) var(--ease); } .program-card:hover .program-link svg{ transform: translateX(3px); } /* ---------- FAQ ---------- */ .faq-list{ margin-top: var(--sp-block); border-top: 1px solid var(--c-border); max-width: 52rem; } .faq-item{ border-bottom: 1px solid var(--c-border); } .faq-q{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; text-align: left; font-family: var(--f-display-ui); font-weight: 600; font-size: var(--fs-h3); } .faq-q .icon{ flex: none; width: 22px; height: 22px; transition: transform var(--dur-med) var(--ease); color: var(--c-cta); } .faq-item[data-open="true"] .faq-q .icon{ transform: rotate(45deg); } .faq-a{ overflow: hidden; height: 0; transition: height var(--dur-med) var(--ease); } .faq-a-inner{ padding-bottom: 1.5rem; color: var(--c-ink-soft); max-width: 42rem; } /* ---------- Φόρμα ---------- */ .form-wrap{ display: grid; grid-template-columns: 1fr; gap: clamp(2rem,1.5rem + 2vw,4rem); } .form-copy p{ margin-top: 1rem; color: var(--c-ink-soft); } .interest-form{ background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: clamp(1.5rem,1.2rem + 1.4vw,2.5rem); box-shadow: var(--shadow-md); display: grid; grid-template-columns: 1fr; gap: 1.1rem; } .form-field{ display: flex; flex-direction: column; gap: .4rem; } .form-field.full{ grid-column: 1 / -1; } .form-field label{ font-size: var(--fs-small); font-weight: 600; color: var(--c-ink-soft); } .form-field input, .form-field select{ border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: .8rem .9rem; background: var(--c-bg); font-size: var(--fs-body); min-height: 44px; transition: border-color var(--dur-fast) var(--ease); } .form-field input:focus, .form-field select:focus{ border-color: var(--c-teal-400); } .form-submit{ grid-column: 1 / -1; margin-top: .5rem; } .form-note{ grid-column: 1 / -1; font-size: var(--fs-small); color: var(--c-ink-mute); } .form-note a{ color: var(--c-cta); text-decoration: underline; text-underline-offset: 2px; } .form-status{ grid-column: 1 / -1; font-size: var(--fs-small); font-weight: 600; color: var(--c-teal-700); display: none; } .form-status.is-visible{ display: block; } /* ---------- Παραρτήματα ---------- */ .locations-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-gap); margin-top: var(--sp-block); } .location-card{ background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: clamp(1.25rem,1rem + 1vw,1.75rem); display: flex; flex-direction: column; gap: .5rem; } .location-card h3{ font-size: var(--fs-h3); } .location-card .addr{ color: var(--c-ink-soft); font-size: var(--fs-small); } .location-card .tag{ font-size: var(--fs-small); color: var(--c-teal-600); font-weight: 600; } .location-card .tel{ margin-top: .5rem; font-size: var(--fs-small); color: var(--c-ink-mute); } .map-embed{ margin-top: var(--sp-block); aspect-ratio: 21/9; border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: var(--c-surface-tint); display: flex; align-items: center; justify-content: center; } .map-embed .media-placeholder-label{ color: var(--c-ink-mute); border-color: var(--c-border); } /* ---------- Footer ---------- */ .site-footer{ border-top: 1px solid var(--c-border); background: var(--c-surface); padding-block: var(--sp-block); } .footer-top{ display: grid; grid-template-columns: 1fr; gap: 2.5rem; } .footer-brand img{ height: 30px; margin-bottom: .9rem; } .footer-brand p{ color: var(--c-ink-mute); font-size: var(--fs-small); max-width: 22rem; } .footer-col h4{ font-family: var(--f-body); font-size: var(--fs-small); font-weight: 600; color: var(--c-ink-mute); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .9rem; } .footer-col ul{ display: flex; flex-direction: column; gap: .65rem; } .footer-col a{ font-size: var(--fs-small); color: var(--c-ink-soft); transition: color var(--dur-fast) var(--ease); } .footer-col a:hover{ color: var(--c-teal-600); } .footer-bottom{ margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border-soft); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; font-size: var(--fs-small); color: var(--c-ink-mute); } /* ---------- Skeleton pages (meleti/protypa/κλπ) ---------- */ .page-hero{ padding-block: clamp(3rem,2rem + 5vw,6rem); background: var(--c-surface-tint); border-bottom: 1px solid var(--c-border); } .page-hero h1{ font-size: var(--fs-h1); max-width: 40rem; } .page-hero p{ margin-top: 1rem; color: var(--c-ink-soft); max-width: 34rem; } .page-body{ padding-block: var(--sp-section); } .placeholder-block{ border: 1px dashed var(--c-border); border-radius: var(--radius-md); background: var(--c-surface-tint); padding: clamp(2rem,1.5rem + 2vw,4rem); text-align: center; color: var(--c-ink-mute); font-size: var(--fs-small); } /* ---------- Scroll reveal (GSAP τσιμπάει .is-visible· CSS = fallback/no-js state) ---------- */ [data-reveal]{ opacity: 0; transform: translateY(18px); } [data-reveal].is-visible{ opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); } /* ---------- prefers-reduced-motion: ΟΛΑ τα εφέ off ---------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } [data-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; } .program-card, .btn, .faq-q .icon, .mobile-nav, .site-header{ transition: none !important; } .program-card:hover{ transform: none !important; } } /* No-JS fallback: αν δεν τρέξει καθόλου JS, δείξε τα πάντα (μη κρύβεις περιεχόμενο) */ .no-js [data-reveal]{ opacity: 1; transform: none; } /* ════════════════════════════════════════════════════════════════════════════ VOLT-STYLE LAYER v3 (3/7/2026) — πιστότερη αναπαραγωγή voltlites.com Μοτίβα αλληλεπίδρασης (full-bleed hero, logo-travel, shutter, expanding cards) με ΔΙΚΟ ΜΑΣ λογότυπο/κείμενα/χρώματα. Χρώματα ΜΟΝΟ από tokens. ════════════════════════════════════════════════════════════════════════════ */ /* ---------- Header v7 — ΜΑΥΡΟ nav (αίτημα 3/7) ---------- Homepage: ΟΛΟ το nav κρύβεται όσο παίζει το hero (motion.js: yPercent -100)· εμφανίζεται στο τέλος (αφού φύγει το βίντεο) με εφέ + pop του στρογγυλού «Μ». Χωρίς JS / reduced-motion = ΠΑΝΤΑ ορατό. */ .site-header{ position: fixed; left: 0; right: 0; top: 0; z-index: 50; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; box-shadow: none; will-change: transform; } .site-header.is-nav-solid{ background: rgba(237,238,241,.6); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border-bottom-color: rgba(21,23,29,.08); box-shadow: 0 6px 22px -14px rgba(21,23,29,.14); } .site-header .site-nav a{ color: var(--c-ink); } .site-header .site-nav a:hover{ color: var(--c-teal-600); } .site-header .burger span, .site-header .burger::before, .site-header .burger::after{ background: var(--c-ink); } .site-header .btn-header{ background: var(--c-volt); color: var(--c-volt-ink); box-shadow: none; } .site-header .btn-header:hover{ background: #d4fb52; } .site-header .site-logo .mu-logo{ width: clamp(64px, 56px + 1.6vw, 80px); height: clamp(64px, 56px + 1.6vw, 80px); } /* «Μ»+κύκλος */ /* Full-width nav (Volt): το logo στοιχίζεται στην ΑΡΙΣΤΕΡΗ άκρη του ΠΑΡΑΘΥΡΟΥ (pad-x), όχι σε κεντραρισμένο container — ώστε να ταιριάζει με το viewport-aligned giant wordmark (handoff). */ .site-header .container{ max-width: none; } /* Σκελετοί (χωρίς hero): header ορατό εξ αρχής + padding ώστε το περιεχόμενο να μη μπαίνει από κάτω. */ body:not([data-home="true"]){ padding-top: 6.75rem; } body:not([data-home="true"]) .site-header{ background: rgba(237,238,241,.6); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border-bottom-color: rgba(21,23,29,.08); box-shadow: 0 6px 22px -14px rgba(21,23,29,.14); } /* Tablet/mobile perf: κάτω από 1024px (όλο το tablet — 19/8) το fixed header ΧΩΡΙΣ backdrop-blur (ακριβό ανά scroll frame σε αδύναμα tablets) — αντ' αυτού πιο αδιαφανές solid bg ώστε να παραμένει αναγνώσιμο. */ @media (max-width: 1023.98px){ .site-header.is-nav-solid, body:not([data-home="true"]) .site-header{ backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(237,238,241,.94); } } /* ---------- HERO full-bleed (viewport) ---------- v6: pinned scrollytelling — το βίντεο κάνει zoom-out & στο τέλος ανεβαίνει/φεύγει (motion.js initHeroTravel). Το bg = off-white ώστε η αποκάλυψη στο τέλος (όταν ανεβαίνει το βίντεο) να ενώνεται με τις Υπηρεσίες. */ /* ΣΤΑΘΕΡΟ HERO (απόφαση Αντώνη 15/8): το βίντεο ΔΕΝ φεύγει και ΔΕΝ κουνιέται — μένει κολλημένο στην κορυφή και το επόμενο μπλοκ ανεβαίνει και το ΚΑΛΥΠΤΕΙ. Γι' αυτό sticky και όχι pin: με sticky η σελίδα συνεχίζει κανονικά να κυλάει (καμία αίσθηση κολλήματος στην αφή), ενώ με pin το scroll «σταματούσε». Επιβεβαιώθηκε ότι κανένας πρόγονος (html/body/main) δεν έχει overflow — αλλιώς το sticky θα ήταν άκυρο. */ .vhero{ position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 34rem; overflow: clip; background: var(--c-bg); } .vhero__media{ position: absolute; inset: 0; z-index: 0; } /* φύλλο βάθους: 110% ύψος (5% τζόγος πάνω-κάτω) ώστε το parallax drift να μην ξεσκεπάζει ποτέ κενό */ .vhero__medial{ position: absolute; left: 0; right: 0; top: -5%; height: 110%; will-change: transform; } .vhero__media video, .vhero__media img{ width: 100%; height: 100%; object-fit: cover; } /* ΠΡΟΣΩΡΙΝΟ hero video — overlay πάνω από το gradient placeholder· ελαφρύ σκούρο φίλτρο (brightness) για αναγνωσιμότητα λογοτύπου/ατάκας (πέρα από το scrim). Ρύθμισε το brightness για πιο σκούρο/φωτεινό. */ .vhero__video{ position: absolute; inset: 0; z-index: 1; filter: brightness(.8) saturate(1.03); } /* placeholder μέχρι να μπει πραγματικό video */ .vhero__ph{ position: absolute; inset: 0; background: radial-gradient(120% 90% at 65% 25%, #1b6f63 0%, #0d3b34 45%, #06110E 80%), linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); } .vhero__ph-label{ position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); text-align: center; font-family: var(--f-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6); border: 1px dashed rgba(255,255,255,.3); border-radius: var(--radius-sm); padding: .9rem 1.2rem; } /* σκίαση για αναγνωσιμότητα — v4: ΕΛΑΦΡΥΤΕΡΗ (αίτημα 3/7: «να μην είναι πάρα πολύ σκοτεινό») */ .vhero__scrim{ position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4,10,8,.38) 0%, rgba(4,10,8,.03) 24%, rgba(4,10,8,.06) 58%, rgba(4,10,8,.55) 100%); } /* Tagline block — δεξιά, εμφανίζεται καθώς μικραίνει το wordmark (scrubbed από motion.js· #heroTagline = το wrapper) */ .vhero__copy{ position: absolute; z-index: 2; right: var(--pad-x); bottom: clamp(7rem, 6rem + 8vh, 12rem); left: auto; max-width: min(50vw, 40rem); text-align: right; } .vhero__tagline{ margin: 0; font-family: var(--f-hero); font-weight: var(--fw-hero); line-height: 1.14; letter-spacing: -0.02em; font-size: clamp(1.7rem, 1rem + 3.8vw, 3.9rem); color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); letter-spacing: var(--ls-display); } /* «μάθηση» / «γνώση»: από λαχανί (74°) σε ΚΥΡΙΟ (178°) — 104° μετακίνηση, η μεγαλύτερη αλλαγή της παλέτας. Κάθεται σε βίντεο, δηλαδή σκούρο έδαφος: 9,27:1. */ .vhero__tagline em{ font-style: normal; font-weight: 400; color: var(--c-accent); } /* (22/8) ΤΡΕΙΣ ΣΤΑΘΕΡΕΣ ΓΡΑΜΜΕΣ — ίδιες παντού. ΑΡΙΣΤΕΡΗ στοίχιση ΜΕΣΑ στο μπλοκ ακόμη κι όταν το μπλοκ κάθεται δεξιά: μόνο έτσι μπορούν τα δύο «μάθηση» να πέσουν το ένα κάτω από το άλλο (με δεξιά στοίχιση κάθε γραμμή θα τελείωνε στο ίδιο σημείο και οι λέξεις δεν θα ευθυγραμμίζονταν). nowrap: η γραμμή ΔΕΝ σπάει ποτέ — προσαρμόζεται το μέγεθος, όχι η δομή. */ .vhero__tagline .vh-line{ display: block; white-space: nowrap; text-align: left; } /* ΤΟ ΤΑΒΑΝΙ ΠΛΑΤΟΥΣ ΦΕΥΓΕΙ: με nowrap, το max-width δεν αναδιπλώνει — απλώς ΞΕΧΕΙΛΙΖΕΙ. Μετρήθηκε σε 1440: η γραμμή «Η καθημερινή μελέτη» έβγαινε έξω από την οθόνη δεξιά. Το μπλοκ μαζεύεται στο πλάτος της μακρύτερης γραμμής, και το ΜΕΓΕΘΟΣ το προσαρμόζει το JS (χώρεσεΑτάκα). */ /* ΤΟ ΠΛΑΤΟΣ ΤΟΥ ΜΠΛΟΚ ΔΕΝ ΠΡΕΠΕΙ ΝΑ ΕΞΑΡΤΑΤΑΙ ΑΠΟ ΤΗ ΘΕΣΗ ΤΟΥ (22/8 — αιτία σφάλματος): με shrink-to-fit και δεξιά αγκύρωση, κάθε φορά που το JS μετακινούσε το μπλοκ δεξιά, ΜΙΚΡΑΙΝΕ ο διαθέσιμος χώρος και άλλαζε το πλάτος του — ο βρόχος κυνηγούσε την ουρά του και σταματούσε στα 34px αντί για 10. Με width: max-content στην ατάκα, το πλάτος ορίζεται ΜΟΝΟ από το κείμενο και η θέση γίνεται ανεξάρτητη μεταβλητή. */ .vhero__tagline{ width: max-content; } .vhero__copy{ display: inline-block; max-width: none; } /* Ο υπότιτλος ΔΕΝ επεκτείνει το μπλοκ: δένεται στο πλάτος της ατάκας και μοιράζεται την ίδια αριστερή ακμή με τις τρεις γραμμές. */ /* 30px αέρας ανάμεσα στο «γνώση» και τον υπότιτλο (22/8, εντολή Αντώνη) — ήταν 13,6px */ .vhero__subtitle{ text-align: left; max-width: 100%; } .vhero__subtitle .vs-line{ display: block; } /* Η ΠΡΩΤΗ ΓΡΑΜΜΗ ΣΕ ΜΙΑ ΣΕΙΡΑ — ΑΛΛΑ ΟΧΙ ΣΕ ΚΙΝΗΤΟ (22/8, μετρημένο): σε 390px, για να χωρέσει ολόκληρη («…Δημοτικού και Γυμνασίου.», 64 χαρακτήρες) χρειάζεται 11px γραμματοσειρά — κάτω από το αναγνώσιμο. Από 700px και πάνω υπάρχει χώρος και μένει μία σειρά, όπως ζητήθηκε. */ @media (min-width: 700px){ .vhero__subtitle .vs-nowrap{ white-space: nowrap; } } /* Υπότιτλος — μικρότερος, κάτω από την ατάκα (κείμενο κλειδωμένο από chat) */ .vhero__subtitle{ margin: 30px 0 0; font-family: var(--f-body); font-weight: 400; font-size: clamp(.9rem, .78rem + .6vw, 1.2rem); line-height: 1.42; color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(0,0,0,.4); } @media (max-width: 699.98px){ .vhero__copy{ left: var(--pad-x); right: var(--pad-x); max-width: none; text-align: left; bottom: 9rem; } } /* Giant wordmark — fixed, κάτω-αριστερά· ταξιδεύει στο nav με scroll (motion.js). v9: ΑΡΙΣΤΕΡΗ ΣΤΟΙΧΙΣΗ στο ΠΑΡΑΘΥΡΟ (left = pad-x, όχι container gutter) — αυτό ήταν το ζητούμενο. Το ΜΕΓΕΘΟΣ επέστρεψε στο προηγούμενο («ωραίο») min(82vw, 44rem) — το 88vw ήταν υπερβολικό & χάλαγε το μίκρυναμα. Μικραίνει/μεγαλώνει με το πλάτος όπως πριν, απλά στοιχισμένο στο παράθυρο. */ /* v10 (17/7): ΑΝΑΛΟΓΙΚΟ πλάτος (48vw) ώστε σε κάθε μέγεθος παραθύρου να πιάνει το ίδιο ποσοστό — πριν κλείδωνε στα 48.4rem πολύ νωρίς και σε maximized φαινόταν ΜΙΚΡΟΤΕΡΟ αναλογικά. Κλειδώνει πλέον ΜΟΝΟ σε πολύ φαρδιές οθόνες (>~2060px → 62rem cap). */ .vhero__wordmark{ position: fixed; z-index: 60; left: var(--pad-x); bottom: clamp(1.5rem, 1rem + 3vh, 3rem); width: clamp(18rem, 48vw, 62rem); will-change: transform; pointer-events: none; } .vhero__wordmark .wm-full{ position: relative; z-index: 2; width: 100%; height: auto; display: block; filter: brightness(0) invert(1); } .vhero__wordmark .wm-mu{ position: absolute; inset: 0; z-index: 3; width: 100%; height: auto; display: block; filter: brightness(0) invert(1); clip-path: inset(0% 61% 0% 23.4%); } .vhero__wordmark .wm-disc{ position: absolute; z-index: 1; left: 31.2%; top: 35.7%; height: 112%; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(23, 25, 30, .95); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transform: translate(-50%, -50%); } /* όταν έχει «προσγειωθεί» πάνω στο φωτεινό nav (motion.js τσιμπάει .is-dark) → μαύρο ξανά */ .vhero__wordmark.is-dark img{ filter: none; } /* (21/8) Η δοκιμή «μαύρο λογότυπο σε όλο το hero» ΑΠΟΣΥΡΘΗΚΕ — μετρήθηκε: σε 8/10 πλάνα του κάθετου βίντεο το μαύρο έσβηνε (αντίθεση 0,9–1,7:1 στη ζώνη του λογοτύπου). Απόφαση Αντώνη: ΛΕΥΚΟ στην αρχή, και γίνεται ΜΑΥΡΟ μόλις μείνει μόνο του (φύγει η ατάκα) — το κάνει το motion.js με την κλάση .is-dark (βλ. initHeroTravel). Η λευκή εκδοχή + σκίαση ισχύουν ξανά. */ /* Χωρίς JS (fallback): το giant wordmark είναι motion-only (travel) → κρύψ' το· φαίνεται το κανονικό μικρό nav logo, ώστε το brand να υπάρχει πάντα στη μπάρα. */ html:not(.js) .vhero__wordmark, html:not(.js) .wm-darklayer{ display: none; } html:not(.js) body[data-home="true"] .site-header .site-logo{ opacity: 1; } /* ---------- METHOD mini-FAQ (17/7): απορίες της μεθόδου, κάτω από τα 4 βήματα ---------- */ .method-faq{ max-width: 46rem; margin: clamp(2.5rem, 2rem + 2vw, 4.5rem) auto 0; } .method-faq__head{ font-family: var(--f-display); font-weight: var(--fw-display); font-size: var(--fs-h3); color: var(--c-ink-soft); margin-bottom: .75rem; } /* ---------- CONFETTI playground (Lusion, 17/7): σχήματα πίσω από τη φόρμα ---------- Layer z-0 πίσω από το container (z-1)· τα σχήματα γεννιούνται από το motion.js (initConfetti). Διακοσμητικό: χωρίς JS δεν υπάρχει καθόλου — καμία επίπτωση σε περιεχόμενο/προσβασιμότητα. */ .section--confetti{ position: relative; overflow: clip; } .section--confetti .container{ position: relative; z-index: 1; } .confetti{ position: absolute; inset: 0; z-index: 0; pointer-events: none; } .confetti i{ position: absolute; display: block; will-change: transform; } .confetti svg{ display: block; width: 100%; height: 100%; } /* ---------- SHOWREEL (Lusion, 17/7 — ΞΕΧΩΡΙΣΤΟ section): βίντεο μικρό→fullscreen ---------- Pinned scrub (motion.js initShowreel): το frame μεγαλώνει από καρτάκι σε πλήρη οθόνη, η μπλε γραμμή «γυρίζει» γύρω του. Placeholder = ΜΠΛΕ (lusion) — όχι το πράσινο του hero. Χωρίς JS / reduced-motion: στατικό κεντραρισμένο καρτάκι + πλήρης γραμμή (τίποτα κρυφό). */ /* overflow-y: visible ώστε η ΠΡΟΕΚΤΑΣΗ της μπλε γραμμής να μπορεί να φανεί πάνω από το section. Το οριζόντιο κλιπ (ο λόγος που υπήρχε το overflow) μένει αυτούσιο. Έγκυρος συνδυασμός. Σημ.: η προέκταση φαίνεται ΜΟΝΟ πριν πιάσει το καρφίτσωμα — μόλις καρφιτσωθεί, η κορυφή του section είναι στην κορυφή της οθόνης κι ό,τι είναι πιο πάνω βρίσκεται εκτός οθόνης. */ /* z-index: 2 στο ΙΔΙΟ ΤΟ SECTION — Η ΡΙΖΑ ΤΟΥ ΣΦΑΛΜΑΤΟΣ (βρέθηκε 15/8 με απομόνωση). Αφού ενεργοποιηθεί ΜΙΑ φορά το καρφίτσωμα, το GSAP αφήνει στο section transform: matrix(1,0,0,1,0,0). ΟΠΟΙΟΔΗΠΟΤΕ transform — ακόμη και ταυτοτικό — δημιουργεί στοίβα σχεδίασης (stacking context). Έτσι το z-index της γραμμής εγκλωβιζόταν ΜΕΣΑ στο section, και το section (z-index auto = 0) ζωγραφιζόταν ΚΑΤΩ από την .proglist-sec που έχει z-index 1 και αδιαφανές φόντο. Αποτέλεσμα: το κομμάτι της γραμμής που περνά στα προγράμματα κρυβόταν — ΜΟΝΟ αφού είχες περάσει μία φορά από το καρφίτσωμα, δηλαδή μόνο στο ανέβασμα. Αυτό εξηγεί γιατί κάθε μέτρηση (dasharray, γεωμετρία, θέση) έβγαινε ΣΩΣΤΗ ενώ τα pixel έλειπαν, και γιατί στη γυμνή σελίδα χωρίς άλλο section δεν αναπαραγόταν ποτέ. Δεν σκεπάζει τα προγράμματα: τα δύο sections δεν επικαλύπτονται ποτέ στη ροή. */ .showreel{ position: relative; z-index: 2; height: 100svh; min-height: 30rem; overflow-x: clip; overflow-y: visible; background: var(--c-bg); display: grid; place-items: center; } /* z-σειρά (lusion): γράμματα 0 (πίσω) → γραμμή 1 (ΠΙΣΩ από το βίντεο) → βίντεο 2 (μπροστά) */ /* overflow: visible στο ΙΔΙΟ το (15/8 — μετρημένη αιτία): ένα κόβει ΕΞ ΟΡΙΣΜΟΥ ό,τι ξεφεύγει από το πλαίσιό του. Μετρήθηκε ότι η αρχή της διαδρομής βρισκόταν 72px ΠΑΝΩ από το κουτί του svg — άρα κοβόταν. Οι μετρήσεις γεωμετρίας έβγαιναν σωστές (το path ΥΠΑΡΧΕΙ εκεί), αλλά τα pixel δεν ζωγραφίζονταν. */ /* z-index 2 και ΟΧΙ 1 (15/8 — Η ΑΙΤΙΑ ΤΟΥ ΣΦΑΛΜΑΤΟΣ, βρέθηκε με απομόνωση): η .proglist-sec έχει z-index 1 και ΑΔΙΑΦΑΝΟ φόντο (το χρειάζεται για να σκεπάζει το sticky hero). Η γραμμή είχε ΚΑΙ ΑΥΤΗ z-index 1, οπότε το κομμάτι της που περνά μέσα στα προγράμματα ζωγραφιζόταν ΠΙΣΩ από εκείνο το φόντο και ήταν αόρατο. Επιβεβαιώθηκε πειραματικά: με background: transparent στη .proglist-sec η γραμμή εμφανίστηκε ΟΛΟΚΛΗΡΗ, χωρίς καμία άλλη αλλαγή. Γι' αυτό όλες οι μετρήσεις (dasharray, γεωμετρία, θέση) έβγαιναν ΣΩΣΤΕΣ ενώ τα pixel έλειπαν — το σχέδιο υπήρχε, απλώς ήταν από κάτω. Το 2 δεν το φέρνει μπροστά από το βίντεο: ο καμβάς και το κάδρο έχουν επίσης 2 και έρχονται ΜΕΤΑ στο DOM, άρα ζωγραφίζονται από πάνω — η γραμμή μένει πίσω τους, όπως ήταν πάντα. */ .showreel__line{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; } /* ΠΑΧΟΣ (μόνη αλλαγή που ζητήθηκε, 15/8): 30 → 22. Το attribute stroke-width="30" μένει στο HTML ως fallback· το CSS υπερισχύει, ώστε η τιμή να ζει σε ΕΝΑ σημείο. Ρύθμιση: ?tune=line */ .showreel__line [data-showreel-line]{ stroke-width: var(--line-w, 22); } .showreel__canvas{ position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* Τεράστια «PLAY REEL»-style γράμματα — λευκά, πίσω από το βίντεο */ .showreel__word{ position: absolute; z-index: 0; top: 50%; transform: translateY(-50%); font-family: var(--f-display-ui); font-weight: 700; text-transform: uppercase; color: #fff; font-size: clamp(3.5rem, 2rem + 12vw, 15rem); line-height: .85; letter-spacing: -0.01em; pointer-events: none; user-select: none; } .showreel__word--l{ left: clamp(1rem, 3vw, 4rem); } .showreel__word--r{ right: clamp(1rem, 3vw, 4rem); } /* Κείμενο πάνω-δεξιά (lusion «We combine design...») — z-1 (πάνω από γράμματα, ΠΙΣΩ από βίντεο)· φεύγει προς τα πάνω μαζί με τη γραμμή όταν ξεδιπλώνει το βίντεο (motion.js). */ .showreel__copy{ position: absolute; z-index: 1; top: clamp(7rem, 17vh, 11rem); right: clamp(1.25rem, 4vw, 4.5rem); /* 18/7: πιο χαμηλά (αίτημα Αντώνη) */ max-width: 26rem; margin: 0; font-family: var(--f-body); font-size: clamp(.95rem, .85rem + .35vw, 1.1rem); line-height: 1.55; } @media (max-width: 699.98px){ .showreel__copy{ display: none; } } /* κινητό: δικό του σχέδιο, χωρίς copy (19/8: το GL gate 900 καταργήθηκε — tablet+desktop το δείχνουν) */ /* Το frame = ΣΤΑΤΙΚΟ fallback (χωρίς JS / reduced-motion)· με JS το κρύβει το initShowreel και τη δουλειά κάνει το canvas (κυματιστό ξεδίπλωμα, φόρμουλα videoVert). */ .showreel__frame{ position: relative; z-index: 2; width: min(80vw, 70rem); aspect-ratio: 16 / 9; border-radius: 20px; /* lusion --global-border-radius */ overflow: clip; box-shadow: var(--shadow-lg); } /* ΚΑΘΕΤΟ ΚΑΔΡΟ ΣΕ ΚΙΝΗΤΟ (Αντώνης 15/8): το 16:9 είναι σχεδιασμένο για οθόνη υπολογιστή· στο τηλέφωνο το βίντεο θέλει portrait. 4:5 και όχι 9:16 — αφήνει χώρο να φανεί το εφέ ξεδιπλώματος γύρω του και δεν γεμίζει όλη την οθόνη. */ @media (max-width: 699.98px){ .showreel__frame{ width: 62vw; aspect-ratio: 9 / 16; } /* 15/8: πλήρες κάθετο, όπως reel */ .showreel__word{ font-size: clamp(3rem, 12vw, 6rem); } } /* Ο καμβάς WebGL ΤΡΕΧΕΙ πλέον και σε κινητό (15/8): ο Αντώνης ζήτησε το πραγματικό ξεδίπλωμα, όχι προσέγγιση. Χωρίς καρφίτσωμα — βλ. SHOWREEL_NOPIN στο motion.js. Ο παλιός κανόνας που τον έκρυβε κάτω από 700px αφαιρέθηκε. */ .showreel__frame video, .showreel__frame img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* ΑΟΡΑΤΟ ΑΛΛΑ ΖΩΝΤΑΝΟ (26/8). Οταν τρεχει ο WebGL, το καδρο δεν χρειαζεται να φαινεται — ομως το