/* ekΜάθησις — motion layer v2 (Osmo-level). Στρώνεται ΠΑΝΩ στο style.css — καμία αλλαγή στα :root tokens, ΚΑΘΕ χρώμα εδώ είναι var(--...). Δεν αγγίζει layout/design tokens, μόνο ό,τι απαιτούν τα effects (νέα στοιχεία/states). Δες motion.js για τη λογική. ΟΛΑ τα FOUC-guards είναι scoped σε html.js — χωρίς JS, τίποτα δεν κρύβεται ποτέ. */ /* ---------- 3α. Hero heading — SplitText masked reveal (μετά το font load) ---------- Κρύβεται ΜΟΝΟ όταν υπάρχει .js στο (βλ. inline script στο ) — αν το JS αποτύχει να τρέξει καθόλου, το html δεν παίρνει ποτέ .js και το heading μένει ορατό. */ html.js [data-split="heading"] { visibility: hidden; } /* ---------- 4. Highlight marker (Χάρτης Μάθησης δεν είναι εδώ — «τι κάνουμε» section) ---------- */ html.js [data-highlight-marker-reveal] { visibility: hidden; } [data-highlight-marker-reveal] .highlight-marker-line { display: inline-block !important; margin: -0.05em 0; } .highlight-marker-bar { position: absolute; inset: -0.05em 0; z-index: 1; pointer-events: none; background-color: var(--c-teal-100); } /* ---------- 3γ. Hero media — quiet single-layer parallax ---------- */ .hero-media [data-parallax-layers] { position: absolute; inset: 0; width: 100%; height: 118%; top: -9%; } .hero-media [data-parallax-layer] { position: absolute; inset: 0; width: 100%; height: 100%; } /* ---------- 5. 4 βήματα — sticky pinned module (desktop ≥960px, φλαγκ-ελεγχόμενο) ---------- Default: κρυμμένο. Το motion.js ενεργοποιεί .is-motion-active ΜΟΝΟ αν STICKY_STEPS_ENABLED είναι true ΚΑΙ ≥960px ΚΑΙ όχι reduced-motion ΚΑΙ φόρτωσε το GSAP. Χωρίς αυτό, μένει ορατό το κανονικό .steps-row grid (ασφαλές no-js/no-motion state). */ .sticky-steps { display: none; } .sticky-steps.is-motion-active { display: block; } .steps-row.is-motion-replaced { display: none; } .sticky-steps__container { display: flex; /* ΠΑΝΩ, ΟΧΙ ΚΕΝΤΡΟ (24/8): ο μετρητής πρέπει να πέφτει στο ΙΔΙΟ ύψος με την κορυφή της εικόνας και ο τίτλος ακριβώς από κάτω του. Με stretch/center η στήλη του κειμένου κεντραριζόταν και ο μετρητής κρεμόταν κάπου στη μέση. */ align-items: flex-start; justify-content: center; gap: var(--sp-gap); width: 100%; max-width: var(--container-max); margin-inline: auto; } /* ΠΑΝΩ, ΟΧΙ ΚΕΝΤΡΟ (26/8, αίτημα Αντώνη «να πατάει στην ίδια γραμμή με το λογότυπο»). ΜΕΤΡΗΘΗΚΕ: το ταξιδεμένο Μ κουμπώνει σε top 10px με ύψος 124 → η βάση του στα 134. Με κεντράρισμα η κεφαλίδα καθόταν στα 90 και ο τίτλος ξεκινούσε στα 120 — δηλαδή ΚΑΤΩ από το λογότυπο. Με flex-start + 3rem γέμισμα ο τίτλος (μία γραμμή, 52px) κάθεται στα ~78-134: πατάει ακριβώς στην ίδια γραμμή. */ .sticky-steps__scroll { display: flex; align-items: stretch; justify-content: center; min-height: 100vh; padding-top: 21px; } /* 🔴 48 → 21px (26/8 — ΤΟ ΠΡΩΤΟ ΝΟΥΜΕΡΟ ΗΤΑΝ ΛΑΘΟΣ ΜΕΤΡΗΣΗ, ΟΧΙ ΛΑΘΟΣ ΜΑΤΙ). Είχα συγκρίνει ΚΟΥΤΙΑ: κάτω άκρο του κουτιού του λογότυπου (130px) με κάτω άκρο του κουτιού του τίτλου — έβγαινε διαφορά μηδέν και το ανέφερα ως πετυχημένο. Ο Αντώνης έβλεπε ότι δεν πατούσαν στην ίδια γραμμή, και είχε δίκιο. ΤΟ ΣΩΣΤΟ ΜΕΤΡΟ ΕΙΝΑΙ ΤΟ ΜΕΛΑΝΙ: σάρωσα τα pixel του ίδιου του αρχείου του λογότυπου μέσα στη ζώνη του clip (23,4%-39% του πλάτους) — το «Μ» τελειώνει στη σειρά 380 από 540, δηλαδή στα 94px της οθόνης, ΟΧΙ στα 130. Το κουτί κουβαλά 36px κενό για τον υπόλοιπο λογότυπο. Η βάση του τίτλου ήταν στα 121 → 27px χαμηλά. 48 − 27 = 21. ⚠ ΑΝ ΑΛΛΑΞΕΙ ΤΟ ΑΡΧΕΙΟ ΤΟΥ ΛΟΓΟΤΥΠΟΥ ή το docked μέγεθός του, ξαναμέτρησέ το ΕΤΣΙ. */ /* Η ΚΕΦΑΛΙΔΑ ΤΑΞΙΔΕΥΕΙ ΜΕ ΤΟ ΚΑΡΦΙΤΣΩΜΕΝΟ (26/8) — έξω από εδώ έφευγε πάνω από την οθόνη. */ .sticky-steps__inner{ width: 100%; max-width: var(--container-max); margin-inline: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(1.1rem, 2.2vh, 1.9rem); } /* Η ΚΕΦΑΛΙΔΑ ΚΑΡΦΩΝΕΙ ΠΑΝΩ, ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΚΕΝΤΡΑΡΕΙ ΣΤΟ ΥΠΟΛΟΙΠΟ (26/8). ΓΙΑΤΙ: μόλις ο τίτλος ανέβηκε στη γραμμή του λογότυπου, όλο το μπλοκ ανέβηκε μαζί του και άφησε ~425px νεκρό κενό στον πάτο (μετρήθηκε σε οθόνη 875px). Το auto περιθώριο μοιράζει αυτό το κενό πάνω-κάτω από την εικόνα και το κείμενο: ο τίτλος μένει καρφωμένος στη γραμμή του λογότυπου, το υπόλοιπο ισορροπεί. */ .sticky-steps__inner > .sticky-steps__container{ margin-block: auto; } .sticky-steps__head{ margin: 0; } /* Ο ΤΙΤΛΟΣ ΤΕΡΜΑ ΠΑΝΩ ΚΑΙ ΜΕΓΑΛΥΤΕΡΟΣ (26/8): πριν ήταν --fs-h2, ΙΔΙΟ μέγεθος με τον τίτλο της κάρτας — δεν ξεχώριζε ως επικεφαλίδα ενότητας. */ /* ΜΙΑ ΓΡΑΜΜΗ (26/8, εντολή Αντώνη «θα το πούμε με το 4… σε μια γραμμή»). ΤΟ 46rem ΤΗΣ .section-head ΤΟΝ ΕΣΠΑΓΕ ΣΤΑ ΔΥΟ: μετρήθηκε πλάτος 736px για 34 χαρακτήρες. Στα 52px Actual ExtraLight ο τίτλος θέλει ~795px — χωράει άνετα στα 1100 του container. */ /* 🔴 ΧΩΡΟΣ ΓΙΑ ΤΟ «Μ» (26/8 — ΠΡΟΕΚΥΨΕ ΜΟΛΙΣ Ο ΤΙΤΛΟΣ ΑΝΕΒΗΚΕ ΣΤΗ ΓΡΑΜΜΗ ΤΟΥ). ΜΕΤΡΗΘΗΚΕ σε οθόνη 1310px: το μελάνι του «Μ» τελειώνει στα 119px, ο τίτλος ξεκινούσε στα 97 — έπεφταν ο ένας πάνω στον άλλο. Όσο ο τίτλος καθόταν ΧΑΜΗΛΟΤΕΡΑ δεν φαινόταν. Το λογότυπο είναι fixed στα αριστερά της ΟΘΟΝΗΣ, ενώ ο τίτλος ακολουθεί το κεντραρισμένο container: όσο στενεύει η οθόνη, το container πλησιάζει το λογότυπο. Πάνω από ~1390px δεν συναντιούνται ποτέ και το γέμισμα είναι 0. ΓΙΑΤΙ ΜΟΝΟ Η ΚΕΦΑΛΙΔΑ ΚΑΙ ΟΧΙ ΟΛΟ ΤΟ ΜΠΛΟΚ: αν σπρώξω και την εικόνα με το κείμενο, η στήλη κειμένου στενεύει 70px, το κείμενο ψηλώνει και σπάει ο μετρημένος τύπος ύψους από κάτω. Η στοίχιση που ζήτησε ο Αντώνης είναι τίτλος↔«Γιατί», και οι δύο ζουν ΕΔΩ. */ .sticky-steps__head{ max-width: none; padding-left: clamp(0px, calc(150px - max(80px, (100vw - 1100px) / 2)), 70px); } .sticky-steps__head h2{ margin: 0; line-height: 1.08; white-space: nowrap; max-width: none; /* ΦΡΟΥΡΟΣ ΓΙΑ ΤΟ ΚΟΥΜΠΙ ΤΟΥ ΜΕΝΟΥ. Με nowrap ο τίτλος ΔΕΝ σπάει — άρα σε στενή οθόνη θα περνούσε από κάτω του. ΜΕΤΡΗΘΗΚΕ: το κείμενο πιάνει 18,97 φορές το μέγεθος της γραμμα- τοσειράς (986px στα 52px), ξεκινά το νωρίτερο στα 150px, και το κουμπί κάθεται 99px από το δεξί άκρο. Λύνοντας ως προς το μέγεθος: (100vw − 280px) / 19. Πάνω από ~1290px ο τύπος δίνει μεγαλύτερο νούμερο από το --fs-h1, άρα ΔΕΝ αλλάζει τίποτα· κάτω από εκεί ο τίτλος μικραίνει όσο χρειάζεται για να μη συναντηθούν. */ font-size: min(var(--fs-h1), calc((100vw - 280px) / 19)); } .sticky-steps__head .eyebrow{ margin-bottom: .35rem; } .sticky-steps__inner .sticky-steps__container{ max-width: none; margin-inline: 0; } /* ΤΟ ΚΕΙΜΕΝΟ ΠΑΕΙ ΑΡΙΣΤΕΡΑ (24/8, αίτημα Αντώνη). ΓΙΑΤΙ: η λίστα προγραμμάτων από πάνω είναι στοιχισμένη δεξιά· με το κείμενο των λόγων επίσης δεξιά, το μάτι έβρισκε δύο φορές στη σειρά κείμενο στην ίδια πλευρά και η σελίδα «έγερνε». Με row-reverse αλλάζει ΜΟΝΟ η οπτική σειρά — στο DOM η εικόνα παραμένει πρώτη, άρα σε κινητό (όπου η στήλη γίνεται μία) δεν αλλάζει τίποτα. */ .sticky-steps__container { flex-direction: row-reverse; } /* Η ΚΑΡΤΕΛΑ ΜΕΓΑΛΩΣΕ 22→26rem: ο αριθμός είναι το κύριο οπτικό στοιχείο και ήθελε χώρο. */ /* 24 → 19,2rem = ΑΚΡΙΒΩΣ 20% μικρότερη (26/8, αίτημα Αντώνη). Μετρημένα: 384px → 307px. */ .sticky-steps__visual { flex: none; position: relative; width: 19.2rem; max-width: 19.2rem; } .sticky-steps__num-list { aspect-ratio: 1; width: 100%; position: relative; } .sticky-steps__num-item { position: absolute; inset: 0; clip-path: inset(50% round var(--radius-lg)); display: flex; align-items: center; justify-content: center; background: var(--c-teal-50); border: 1px solid var(--c-teal-100); border-radius: var(--radius-lg); font-family: var(--f-num); /* ΚΑΙ ΕΔΩ 200 — για να «δένει» με τον μικρό μετρητή και με όλη τη σελίδα. ⚠ ΤΟ ΡΙΣΚΟ: πάνω σε φωτογραφία, γραμμή πάχους ExtraLight είναι εύθραυστη — γι' αυτό υπάρχει η διαβάθμιση σκίασης από κάτω και η σκιά κειμένου. Αν σε ανοιχτόχρωμη φωτογραφία φανεί αδύναμος, το 300 είναι η ασφαλής εναλλακτική (η Actual ΔΕΝ έχει 300 — θα πέσει σε Inter· τότε καλύτερα 400 της ίδιας). */ /* Ο μεγάλος μένει στο 200 ενώ ο μικρός πήγε στο 300 — ΕΠΙΤΗΔΕΣ, δεν είναι ασυνέπεια: στα 112px ένα 200 «ζυγίζει» οπτικά όσο ένα 300 στα 50px. Ίδιο βάρος σε διαφορετικά μεγέθη θα έδειχνε τον μικρό αδύναμο και τον μεγάλο βαρύ. */ font-weight: 200; /* ΤΟ ΝΟΥΜΕΡΟ ΟΣΟ ΜΕΓΑΛΟ ΣΗΚΩΝΕΙ Η ΚΑΡΤΕΛΑ (24/8). ΤΟ ΟΡΙΟ ΤΟ ΒΑΖΕΙ Η ΓΕΩΜΕΤΡΙΑ, ΟΧΙ ΤΟ ΓΟΥΣΤΟ: η καρτέλα είναι τετράγωνη 26rem (416px) και ο μεγαλύτερος αριθμός είναι διψήφιος. Στα 15rem (240px) δύο ψηφία πιάνουν ~270px πλάτος — χωράνε με περιθώριο. Πιο πάνω θα ακουμπούσαν τις άκρες. Ήταν 7rem· τώρα 15rem, δηλαδή ΥΠΕΡΔΙΠΛΑΣΙΟ. Δεν μπορεί να βγει ΕΞΩ από την καρτέλα: το clip-path που κάνει το άνοιγμα («κουρτίνα» από τη μέση) κόβει ό,τι περισσεύει — γι' αυτό μεγάλωσε η καρτέλα αντί να βγει ο αριθμός απ' έξω. */ /* ΕΠΑΝΗΛΘΕ ΣΤΟ ΑΡΧΙΚΟ (24/8): το μεγάλωσα σε 15rem και ο Αντώνης το βρήκε υπερβολικό — «μου άρεσε, ήταν πιο καλό». Μένει μέσα στην εικόνα, ως σφραγίδα, όχι ως πρωταγωνιστής. Τον ρόλο του μετρητή τον έχει πλέον ο μικρός αριθμός πάνω από τον τίτλο. */ font-size: clamp(4rem, 3rem + 5vw, 7rem); color: var(--c-teal-500); } .sticky-steps__num-item:first-of-type { clip-path: inset(0% round var(--radius-lg)); } /* ΕΙΚΟΝΑ ΜΕΣΑ ΣΤΗΝ ΑΚΙΝΗΤΗ ΚΑΡΤΕΛΑ (24/8, αίτημα Αντώνη «εκεί θα βάλουμε εικόνες»). Ο αριθμός μένει από πάνω, με σκίαση από κάτω ώστε να διαβάζεται σε κάθε φωτογραφία. Αν το αρχείο λείπει, το onerror βγάζει το και μένει σκέτος ο αριθμός στο teal φόντο. */ .sticky-steps__num-item { overflow: hidden; } .sticky-steps__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .sticky-steps__num { position: relative; z-index: 1; } .sticky-steps__num-item:has(.sticky-steps__img) .sticky-steps__num{ color: #fff; text-shadow: 0 2px 24px rgba(10,20,40,.55); } /* Σκίαση ΜΟΝΟ όταν υπάρχει φωτογραφία — ένας τόσο μεγάλος αριθμός σε λευκό πρέπει να πατάει σε κάτι, αλλιώς σε ανοιχτόχρωμη εικόνα εξαφανίζεται. Χωρίς εικόνα δεν μπαίνει καθόλου. */ .sticky-steps__num-item:has(.sticky-steps__img)::after{ content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10,20,40,.10) 0%, rgba(10,20,40,.42) 100%); } .sticky-steps__progress-w { position: absolute; left: 0; right: 0; bottom: -1.25rem; height: 5px; background: rgba(23,25,30,.22); /* σκούρα τροχιά για το κίτρινο */ border-radius: 3px; overflow: hidden; } .sticky-steps__progress-bar { width: 100%; height: 100%; /* --c-cta: το δηλωμένο λειτουργικό χρώμα. Το teal-500 ήταν ενδιάμεσο σκαλί που ήρθε με το ξένο module. Το κίτρινο ΔΕΝ κάνει εδώ: 1,07:1 πάνω στη γκρι τροχιά του. */ /* ΚΙΤΡΙΝΗ (26/8). Είχα γράψει «το κίτρινο δεν κάνει εδώ» — 1,07:1 πάνω στη ΓΚΡΙ τροχιά. Το θέλει κίτρινο, οπότε λύνω το πρόβλημα από την άλλη μεριά: σκουραίνω την τροχιά. Πάνω της το #C6F135 ξεχωρίζει καθαρά. */ background: var(--c-volt); transform: scaleX(0); transform-origin: 0% 50%; } /* Ο ΜΕΤΡΗΤΗΣ ΠΑΕΙ ΑΡΙΣΤΕΡΑ ΑΠΟ ΤΟΝ ΤΙΤΛΟ (26/8, εντολή Αντώνη) — ήταν από πάνω του. Αλλάζει ΜΟΝΟ η φορά αυτού του flex: το markup μένει ίδιο (μετρητής, μετά λίστα κειμένων). ΠΛΑΤΟΣ 30 → 48rem: ο Αντώνης ζήτησε «να μεγαλώσει το πλάτος για το κείμενο ώστε να χωράει περίπου με το ύψος της εικόνας». Πλατύτερη γραμμή = λιγότερες γραμμές = κοντύτερη στήλη. Το 48rem είναι ό,τι περισσεύει: 1100 − 307 (εικόνα) − 23 (κενό) ≈ 768px. */ .sticky-steps__text { flex: 1; position: relative; max-width: 48rem; display: flex; flex-direction: row; align-items: flex-start; gap: 1.25rem; } /* Ο ΜΕΤΡΗΤΗΣ — σταθερή θέση, αλλάζει μόνο το ψηφίο. tabular-nums: χωρίς αυτό το «1» είναι στενότερο από το «8» και ο αριθμός θα «χοροπηδούσε» οριζόντια σε κάθε αλλαγή. Με σταθερό πλάτος ψηφίου κάθεται ακίνητος, όπως ένα ρολόι. */ /* ═══ Ο ΜΕΤΡΗΤΗΣ: ΣΚΟΥΡΟΣ ΑΡΙΘΜΟΣ + ΚΙΤΡΙΝΗ ΥΠΟΓΡΑΜΜΙΣΗ (26/8, πρόταση Αντώνη) ═══ ΓΙΑΤΙ ΟΧΙ ΣΚΕΤΟ ΚΙΤΡΙΝΟ ΓΡΑΜΜΑ: μετρήθηκε 1,23:1 σε ανοιχτό φόντο — αόρατο. ΓΙΑΤΙ ΟΧΙ ΠΛΑΚΕΤΑ (η δική μου πρώτη πρόταση): η υπογράμμιση είναι ΗΔΗ γλώσσα του site (τίτλοι προγραμμάτων) — επεκτείνει υπάρχον σχήμα αντί να εισάγει νέο. ΠΑΧΟΣ 5px, ΟΧΙ 2: το κίτρινο σε ανοιχτό φόντο χρειάζεται μάζα για να διαβαστεί ως σχήμα. Ο ΑΡΙΘΜΟΣ σκούρος → απόλυτα ευανάγνωστος· το κίτρινο μένει καθαρός τονισμός. */ .sticky-steps__counter{ /* ΒΑΡΟΣ 200, ΟΧΙ 800 (24/8 — παρατήρηση Αντώνη «μήπως πρέπει να είναι πιο λεπτή»). ΔΕΝ ΕΙΝΑΙ ΓΟΥΣΤΟ, ΕΙΝΑΙ ΚΑΝΟΝΑΣ ΤΟΥ SITE: όλη η τυπογραφία τίτλων είναι Actual ExtraLight (--fw-display: 200, --fw-hero: 200). Υπάρχει ΗΔΗ ακριβώς αντίστοιχο στοιχείο, το .tl-year του Προφίλ (η χρονολογία δίπλα σε κάθε σταθμό): ίδια γραμματοσειρά, βάρος 200, teal-600. Ο μετρητής το αντιγράφει αυτούσιο. ΓΙΑΤΙ ΗΤΑΝ 800: το sticky-steps ήρθε από ξένο module (OSMO) και κράτησε τα δικά του βάρη — είναι προγενέστερο της απόφασης για ExtraLight. */ /* Manrope (--f-num): ευθύγραμμα ψηφία. Βάρος 300 και όχι 200 — αίτημα Αντώνη «μην τα κάνετε τόσο λεπτά». Η Manrope είναι variable 100-900, άρα το 300 υπάρχει πραγματικά (η Actual δεν είχε 300 και θα πήγαινε στο 400, που θα ήταν βαρύ δίπλα στον ExtraLight τίτλο). ΜΕΓΕΘΟΣ: ανέβηκε ~36px → ~50px στα 1454px πλάτος («να μεγαλώσετε ακόμα λίγο»). */ font-family: var(--f-num); font-weight: 300; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1; /* teal-500 και ΟΧΙ teal-600. ΤΟ ΜΕΤΡΗΣΑ: το teal-600 (#00B3B0) δίνει αντίθεση 2,45:1 σε ανοιχτό φόντο — κάτω από το ελάχιστο 3:1 ακόμη και για μεγάλα γράμματα, και στον ίδιο τον κώδικά μας είναι σημειωμένο ως «διακοσμητικό». Το teal-500 (#068B88) δίνει 3,91:1. Σε βάρος ExtraLight η χαμηλή αντίθεση πονάει διπλά, γιατί οι γραμμές είναι λεπτές. */ color: var(--c-ink); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; /* ΗΤΑΝ margin-bottom (καθόταν ΠΑΝΩ από τον τίτλο)· τώρα κάθεται ΔΙΠΛΑ του, οπότε το κενό πάει δεξιά. Το .18em είναι μικροευθυγράμμιση: το ψηφίο ξεκινά λίγο ψηλότερα από το κεφαλαίο του τίτλου, γιατί η Manrope έχει πιο ρηχό ύψος κεφαλαίων από την Actual. */ /* ΒΑΣΗ ΜΕ ΒΑΣΗ (26/8, «να πατάει στην ίδια γραμμή η πρώτη σειρά του τίτλου»). ΜΕΤΡΗΘΗΚΕ με ανιχνευτή γραμμής: μετρητής 1021, τίτλος 1004 → 17px χαμηλά. Το .18em (+8,6px) γίνεται −0,17em (−8,2px): σύνολο 16,8px πάνω. ΓΙΑΤΙ em ΚΑΙ ΟΧΙ px: και ο μετρητής και ο τίτλος μικραίνουν με την οθόνη· σε em η διόρθωση μικραίνει μαζί τους. ΓΙΑΤΙ ΟΧΙ align-items:baseline (που θα το έλυνε μόνο του): η λίστα κειμένων έχει απόλυτα τοποθετημένα παιδιά, άρα δεν έχει δική της γραμμή βάσης — το flexbox θα κατέβαζε τον μετρητή στο κάτω άκρο της. */ margin-bottom: 0; margin-top: -.17em; flex: none; width: fit-content; padding-bottom: .18em; border-bottom: 5px solid var(--c-volt); } /* ΤΟ ΥΨΟΣ ΑΚΟΛΟΥΘΕΙ ΤΟ ΚΕΙΜΕΝΟ (26/8 — ΜΕΤΡΗΘΗΚΕ). Τα προηγούμενα κείμενα ήταν ~40 λέξεις και χωρούσαν σε 16rem. Τα κείμενα του Αντώνη είναι 60-80 λέξεις με ΔΥΟ παραγράφους: μετρήθηκαν 586px σε καρτέλα 256px — υπερχείλιζαν. ΔΥΟ αλλαγές μαζί: πιο πλατιά γραμμή (30ch → 46ch, δηλαδή λιγότερες γραμμές) και μεγαλύτερο ελάχιστο ύψος. Τα στοιχεία είναι απόλυτα τοποθετημένα το ένα πάνω στο άλλο, άρα το ύψος πρέπει να χωράει το ΜΕΓΑΛΥΤΕΡΟ (η κάρτα 2, 80 λέξεις). */ /* ΤΟ ΥΨΟΣ ΔΕΝΕΙ ΜΕ ΤΗΝ ΕΙΚΟΝΑ (26/8, αίτημα Αντώνη «να χωράει περίπου με το ύψος της εικόνας»). ΜΕΤΡΗΘΗΚΕ στα 1498px: με τη φαρδύτερη στήλη (690px) το ψηλότερο κείμενο — η κάρτα 2, 80 λέξεις — έπεσε από 528 σε 382px. Η εικόνα είναι 307px. ΓΙΑΤΙ ΟΧΙ ΣΤΑΘΕΡΟ ΝΟΥΜΕΡΟ: τα στοιχεία είναι απόλυτα τοποθετημένα το ένα πάνω στο άλλο, οπότε ο γονιός δεν παίρνει ύψος από μόνος του — και όσο στενεύει η οθόνη, η στήλη στενεύει και το κείμενο ΨΗΛΩΝΕΙ. Ένα σταθερό 24rem θα ξεχείλιζε στα 1024. Ο τύπος δίνει 500px στα 1024 και 400px στα 1498, με φρουρούς 24-33rem εκατέρωθεν. ⚠ Αν προστεθεί ΠΙΟ ΜΑΚΡΥ κείμενο, ξαναμέτρησέ το εδώ: λίγο = κενό, πολύ = ξεχείλισμα. */ .sticky-steps__text-list { position: relative; flex: 1; /* ΜΕΤΡΗΜΕΝΑ ΣΗΜΕΙΑ (ύψος ψηλότερης κάρτας ανά πλάτος στήλης): 1024→512px · 1100→439 · 1200→410 · ≥1280→353 (εκεί το container κλειδώνει στο μέγιστο). Η ευθεία περνά από (1024, 525) και (1280, 400) — δηλαδή κλίση 0,488. Πρώτη δοκιμή με κλίση 0,211 ξεχείλιζε 12px στα 1024· μετρήθηκε και διορθώθηκε πριν φτάσει στην οθόνη. */ min-height: clamp(24rem, calc(525px - (100vw - 1024px) * 0.488), 33rem); } .sticky-steps__text-item { position: absolute; inset: 0; /* flex-start: ο τίτλος κάθεται ΑΜΕΣΩΣ κάτω από τον μετρητή. Με center «κολυμπούσε» ανάλογα με το πόσο μακρύ ήταν το κείμενο του κάθε λόγου — δηλαδή ο τίτλος άλλαζε θέση σε κάθε βήμα, ενώ ο Αντώνης ζήτησε ΣΤΑΘΕΡΗ θέση. */ display: flex; flex-direction: column; justify-content: flex-start; gap: .75rem; visibility: hidden; } .sticky-steps__text-item:first-of-type { visibility: visible; } .sticky-steps__tag { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-small); color: var(--c-teal-400); width: fit-content; } /* ΒΑΡΟΣ 400 → 200 (26/8, «τον τίτλο τον θέλω με πιο λεπτή γραμματοσειρά»). Ο γενικός κανόνας h3{font-weight:400} υπάρχει επειδή στα 18-24px η Actual ExtraLight γίνεται εύθραυστη. ΕΔΩ ΔΕΝ ΙΣΧΥΕΙ: ο τίτλος είναι --fs-h2, δηλαδή 38px — διπλάσιος. */ .sticky-steps__text-item h3 { font-size: var(--fs-h2); font-weight: var(--fw-display); } /* 52 → 68ch: μαζί με τη φαρδύτερη στήλη, αυτό κονταίνει το κείμενο ώστε να πλησιάζει το ύψος της εικόνας. Το 68 είναι το πάνω όριο αναγνωσιμότητας (65-75 χαρακτήρες). */ .sticky-steps__text-item p { color: var(--c-ink-soft); font-size: var(--fs-body); max-width: 68ch; line-height: 1.6; } .sticky-steps__text-item p + p { margin-top: .7rem; } @media (max-width: 1023.98px) { .sticky-steps { display: none !important; } .steps-row.is-motion-replaced { display: grid !important; } } /* ---------- 6. Χάρτης Μάθησης — διακριτικό 3D tilt στο screenshot placeholder ---------- */ [data-3d-hover-target] { transform: perspective(60vw); transform-style: preserve-3d; will-change: transform; } /* ---------- 7. Νήμα sections — draw-path-on-scroll (desktop ≥960 μόνο, αφαιρετική καμπύλη) ---------- */ .motion-thread { position: relative; } /* ═══ Η ΚΟΡΔΕΛΑ (26/8) — ξαναζωντάνεψε, με άλλη διαδρομή και άλλο στυλ ═══ ΗΤΑΝ: λεπτό κατακόρυφο νήμα 150px πλάτος, teal, 4px, ΣΒΗΣΤΟ με εντολή Αντώνη («δεν εννοούσα αυτή τη γραμμή»). ΤΩΡΑ: καμβάς σε ΟΛΟ το wrapper, και τη διαδρομή τη χτίζει το motion.js από μετρημένες θέσεις — γι' αυτό εδώ δεν υπάρχουν συντεταγμένες. z-index 3 ΚΑΙ ΟΧΙ 0: το τελευταίο σκέλος περνά πάνω από τον Όμιλο, που έχει ΑΔΙΑΦΑΝΟ φόντο στο z-index 2 για να σκεπάζει τον χάρτη. Στο 0 η κορδέλα θα χανόταν ακριβώς εκεί. Το ότι είναι μπροστά δεν ενοχλεί: η διαδρομή περνά από μετρημένους διαδρόμους χωρίς κείμενο, και το pointer-events: none την κάνει διάφανη στο ποντίκι. */ .motion-thread__svg{ position: absolute; inset: 0; width: 100%; height: 100%; /* overflow: hidden (26/8) — η κορδέλα τώρα ΜΠΑΙΝΕΙ από έξω δεξιά (αφετηρία 60px πέρα από το άκρο), ώστε να μην «ξεκινάει στο πουθενά». Με visible, αυτό το κομμάτι θα μεγάλωνε το πλάτος της σελίδας και θα εμφανιζόταν οριζόντια μπάρα. */ overflow: hidden; pointer-events: none; z-index: 3; } .motion-thread__svg path{ fill: none; stroke-linecap: round; stroke-linejoin: round; } .motion-thread > .section { position: relative; z-index: 1; } /* 🔴 ΕΞΑΙΡΕΣΗ — Ο ΟΜΙΛΟΣ ΠΑΕΙ ΜΠΡΟΣΤΑ ΑΠΟ ΤΟΝ ΧΑΡΤΗ (26/8). Ο κανόνας από πάνω (δύο κλάσεις, και το motion.css φορτώνει ΜΕΤΑ το style.css) κέρδιζε το z-index: 2 που είχα βάλει στο style.css — μετρήθηκε: έμενε 1 και ο χάρτης ξανακάλυπτε το ιστορικό. Εδώ, με τρεις κλάσεις, ισχύει. ΤΟ ΦΟΝΤΟ ΕΙΝΑΙ ΤΟ ΙΔΙΟ ΑΝΟΙΧΤΟ — οπτικά ενιαίο, αλλά αδιαφανές, ώστε η ενότητα να ξεδιπλώνεται ΠΑΝΩ από τον καρφωμένο χάρτη. */ .motion-thread > .section.omilos-sec { z-index: 2; background: var(--c-bg); } @media (max-width: 767.98px) { .motion-thread__svg { display: none; } } /* ---------- 8. Προγράμματα — hover scale placeholder (μέχρι να έρθουν τα video loops) ---------- */ .program-media { transition: transform var(--dur-med) var(--ease); overflow: hidden; } .program-card:hover .program-media { transform: scale(1.03); } .program-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-med) var(--ease); } [data-video-on-hover="active"] .program-media video { opacity: 1; } .program-num { display: inline-block; } /* ---------- 9α. Χειρόγραφη υπογράμμιση (draw-random-underline, stroke-dasharray — χωρίς DrawSVG plugin) ---------- */ [data-draw-line] { position: relative; } [data-draw-line-box] { position: absolute; left: 0; right: 0; bottom: -0.2em; height: 0.4em; pointer-events: none; } [data-draw-line-box] svg { width: 100%; height: 100%; overflow: visible; color: var(--c-teal-500); } /* ---------- 9β. Magnetic buttons — position:relative host για το GSAP x/y ---------- */ .btn-primary[data-magnetic-strength] { will-change: transform; } /* ---------- 9γ. FAQ icon bounce — αφαιρούμε το CSS transition, το αναλαμβάνει το GSAP ---------- */ html.js .faq-q .icon { transition: none; } /* ---------- 10. Φόρμα — live validation states (tokens υπάρχοντες, ΚΑΝΕΝΑ νέο "error" hex — η παλέτα δεν έχει ακόμα αφιερωμένο σημασιολογικό χρώμα λάθους, βλ. σημείωση σε build-spec) ---------- */ .form-field.is-invalid input, .form-field.is-invalid select { border-color: var(--c-ink); } .form-field.is-valid input, .form-field.is-valid select { border-color: var(--c-teal-400); } /* ---------- 11. Footer — αποκαλύπτεται από κάτω (footer-parallax-effect) ---------- */ .footer-parallax-wrap { position: relative; overflow: clip; } /* ---------- 12. prefers-reduced-motion: ΟΛΑ τα νέα εφέ off, τίποτα κρυφό ---------- */ @media (prefers-reduced-motion: reduce) { html.js [data-split="heading"], html.js [data-highlight-marker-reveal] { visibility: visible !important; } [data-3d-hover-target] { transform: none !important; } .program-card:hover .program-media { transform: none !important; } .sticky-steps { display: none !important; } .steps-row.is-motion-replaced { display: grid !important; } .motion-thread__svg { display: none !important; } html.lenis, html.lenis body { height: auto !important; } }