/* Theme Name: Eftychia Education Theme URI: https://eftychiaeducation.gr Author: Istos Studio Author URI: https://istos.studio Description: Custom theme for Eftychia Education — κέντρο μελέτης και δημιουργικής απασχόλησης στον Πειραιά. Ported from the approved static build; no page builder, no ACF. The booking form posts directly to the Istos Engine Edge Function. Version: 1.0.5 Requires at least: 6.4 Requires PHP: 8.0 License: Proprietary — Istos Studio Text Domain: eftychia */ /* ============================================================ ΤΟ ΥΠΟΛΟΙΠΟ ΑΡΧΕΙΟ ΕΙΝΑΙ ΤΟ site.css ΤΟΥ ΕΓΚΕΚΡΙΜΕΝΟΥ BUILD, ΑΥΤΟΥΣΙΟ. Μην το επεξεργάζεσαι εδώ — επεξεργάσου το build/demo/assets/site.css και ξανακάνε το port, αλλιώς οι δύο εκδοχές θα αποκλίνουν. ============================================================ */ /* ============================================================ Eftychia Education — demo v1 Tokens below port directly into the WordPress theme stylesheet. ============================================================ */ :root{ /* ------------------------------------------------------------------ Παλέτα — τα τέσσερα χρώματα που ζήτησε η πελάτισσα (2026-08-06): ροζ · γαλάζιο · λαχανί · φιστικί/μέντα. Τα παστέλ δεν διαβάζονται ως κείμενο (contrast ~1.3 σε κρεμ), οπότε ζουν ΜΟΝΟ ως γεμίσματα με σκούρο μελάνι από πάνω. Κάθε χρώμα που κουβαλάει κείμενο ή εικονίδιο είναι η βαθιά εκδοχή του, μετρημένη. ------------------------------------------------------------------ */ --cream:#FDF7EF; --cream-2:#F7EFE3; --paper:#FFFFFF; --ink:#122A3E; /* 13.83 σε κρεμ */ --ink-soft:#4A5568; /* βαθιές εκδοχές — επιτρέπεται κείμενο & εικονίδια */ --blue:#176B99; /* γαλάζιο · 5.48 σε κρεμ · λευκό πάνω 5.83 */ --pink:#C2185B; /* ροζ, ΜΟΝΟ για δράση · 5.52 · λευκό πάνω 5.87 */ --pink-dark:#A81450; --green:#587218; /* λαχανί · 5.14 · λευκό πάνω 5.48 */ --teal:#0F7566; /* μέντα · 5.25 · λευκό πάνω 5.59 */ --blue-deep:#0E4A6B; /* Ιδιαίτερα — βαθιά εκδοχή του γαλάζιου · 8.39 · λευκό πάνω 9.50 */ /* παστέλ γεμίσματα — ΠΟΤΕ κείμενο, πάντα --ink από πάνω (≥11.5) */ --blue-soft:#D9EBF7; --pink-soft:#FBDCE7; --green-soft:#E8F2C6; --teal-soft:#D9F0E7; --line:rgba(18,42,62,.13); --font-display:"M PLUS Rounded 1c",system-ui,sans-serif; --font-body:"Commissioner",system-ui,sans-serif; --font-hand:"Playpen Sans",cursive; --r-sm:12px; --r-md:20px; --r-lg:30px; --r-pill:999px; --pad:clamp(20px,5vw,64px); --maxw:1200px; --sec:clamp(64px,9vw,120px); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--cream);color:var(--ink); font-family:var(--font-body);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.06; letter-spacing:-.02em;margin:0} p{margin:0} a{color:inherit} img,svg{max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- sticker: the one playful device, used sparingly ---------- */ .sticker{ display:inline-block;font-family:var(--font-hand);font-weight:600; font-size:clamp(13px,1.5vw,16px);color:var(--paper); padding:.42em 1.05em;border-radius:46% 54% 51% 49%/57% 43% 57% 43%; transform:rotate(-3.5deg);white-space:nowrap; } .sticker--pink{background:var(--pink)} .sticker--green{background:var(--green)} .sticker--mint{background:var(--teal)} .sticker--blue{background:var(--blue)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.55em; font-family:var(--font-body);font-weight:700;font-size:16px; padding:15px 28px;border-radius:var(--r-pill);border:2px solid transparent; text-decoration:none;cursor:pointer;min-height:52px; transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease; } .btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px} .btn--primary{background:var(--pink);color:#fff;box-shadow:0 3px 0 var(--pink-dark)} .btn--primary:hover{background:var(--pink-dark);transform:translateY(1px);box-shadow:0 2px 0 var(--pink-dark)} .btn--primary:active{transform:translateY(3px);box-shadow:none} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:var(--cream)} .btn .plus{font-size:1.25em;line-height:0;margin-top:-2px} /* ---------- header ---------- */ .hdr{position:sticky;top:0;z-index:50;background:rgba(253,247,239,.93); backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)} .hdr__in{display:flex;align-items:center;gap:clamp(14px,2vw,24px); padding-block:9px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .brand{font-family:var(--font-hand);font-weight:700;font-size:clamp(21px,2.4vw,27px); text-decoration:none;line-height:1;white-space:nowrap; display:inline-flex;align-items:center;gap:10px;padding-block:4px} /* ΤΟ ΛΟΓΟΤΥΠΟ ΤΗΣ, κομμένο στον χρυσό του δακτύλιο (Byron, 2026-08-25 — η προηγούμενη εκδοχή έδειχνε μόνο το έμβλημα). Γιατί δίσκος και όχι το τετράγωνο αρχείο: έξω από τον δακτύλιο υπάρχουν ακουαρέλες που σε αυτό το μέγεθος γίνονται θολούρα και τρώνε την άκρη. Μέσα στον δακτύλιο υπάρχουν ΚΙ ΕΚΕΙ τα τέσσερα χρώματά της, οπότε το κόψιμο δεν χάνει χρώμα — κερδίζει καθαρό περίγραμμα. Είναι 62px, όχι 40px: ο κύκλος κουβαλάει τρεις σειρές ψιλά γράμματα. Ακόμη και στα 62px η τρίτη σειρά ΔΕΝ διαβάζεται — γι' αυτό το «Ευτυχία Education» δίπλα του μένει: αυτό κουβαλάει το όνομα, ο δίσκος το χρώμα. Το alt είναι κενό γιατί είναι διακοσμητικό μέσα σε lockup που ήδη γράφει το όνομα σε κείμενο. Έξω από τον κύκλο είναι διάφανο: η κεφαλίδα είναι ημιδιάφανη και ένα τετράγωνο θα φαινόταν μπάλωμα όταν κυλάει περιεχόμενο από κάτω. */ .brand__mark{width:62px;height:62px;flex:0 0 auto;border-radius:50%; /* Το εσωτερικό του δίσκου είναι κρεμ, όπως και η κεφαλίδα — χωρίς άκρη «βουλιάζει» στο φόντο. Η χρυσή τρίχα δίνει το περίγραμμα (ίδιο χρυσό με τον δακτύλιο του ίδιου του λογοτύπου) και η σκιά το σηκώνει λίγο. */ box-shadow:0 0 0 1px rgba(176,141,87,.5), 0 2px 8px rgba(18,42,62,.15); transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease} .brand:hover .brand__mark{transform:rotate(-6deg) scale(1.06); box-shadow:0 0 0 1px rgba(176,141,87,.75), 0 4px 14px rgba(18,42,62,.2)} @media(max-width:600px){.brand__mark{width:54px;height:54px}.brand{gap:8px}} .brand span{display:inline-block;transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .brand:hover .b1{transform:rotate(-4deg)} .brand:hover .b2{transform:rotate(3deg)} .brand .b1{color:var(--blue)} .brand .b2{color:var(--pink)} /* nowrap: με το μεγαλύτερο σήμα στην κεφαλίδα το «Η Ευτυχία» έσπαγε σε δύο σειρές και χάλαγε το ύψος της μπάρας. */ .nav{display:none;gap:clamp(16px,2vw,26px);margin-inline:auto;font-weight:600;font-size:15.5px;white-space:nowrap} .nav a{text-decoration:none;padding:11px 2px; background-image:linear-gradient(var(--pink),var(--pink));background-repeat:no-repeat; background-position:0 100%;background-size:0% 3px; transition:color .2s ease,background-size .3s cubic-bezier(.22,.7,.28,1)} .nav a:hover{color:var(--pink);background-size:100% 3px} .hdr__cta{display:flex;align-items:center;gap:16px;margin-left:auto} .tel{display:none;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap} .tel span{display:block;font-weight:500;font-size:12px;color:var(--ink-soft)} .hdr__cta .btn{white-space:nowrap} @media(min-width:1000px){ .nav{display:flex}.tel{display:block}.hdr__cta{margin-left:0} } .burger{display:none;place-items:center;margin-left:auto;width:46px;height:46px; border:1.5px solid var(--line);border-radius:13px;background:var(--paper);cursor:pointer} /* below 1000px the sticky bottom bar carries the CTA, so the header shows a menu */ @media(max-width:999px){ .hdr__cta .btn{display:none} .burger{display:grid} } .burger:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .burger .ico{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px; position:relative;transition:transform .22s ease,background-color .22s ease} .burger .ico::before,.burger .ico::after{content:"";position:absolute;left:0;width:19px;height:2px; background:var(--ink);border-radius:2px;transition:transform .22s ease} .burger .ico::before{top:-6px} .burger .ico::after{top:6px} .burger[aria-expanded="true"] .ico{background:transparent} .burger[aria-expanded="true"] .ico::before{transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] .ico::after{transform:translateY(-6px) rotate(-45deg)} #mnav{display:none;border-top:1px solid var(--line);background:var(--cream)} #mnav.open{display:block} #mnav ul{list-style:none;margin:0;padding:10px var(--pad) 20px;display:grid;gap:2px} #mnav a{display:block;text-decoration:none;font-weight:600;font-size:17px; padding:14px 4px;border-bottom:1px solid var(--line)} #mnav li:last-child a{border-bottom:0} @media(min-width:1000px){#mnav{display:none!important}} /* ---------- decorative blobs (CSS only, no imagery) ---------- */ .blob{position:absolute;border-radius:44% 56% 62% 38%/49% 42% 58% 51%; filter:blur(.5px);opacity:.13;pointer-events:none;z-index:0; animation:blob-float 12s ease-in-out infinite} .blob:nth-of-type(2){animation-duration:14s;animation-delay:-4s} .blob:nth-of-type(3){animation-duration:10s;animation-delay:-7s} @keyframes blob-float{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-14px,10px) scale(1.045)} } /* ---------- hero ---------- */ .hero{position:relative;text-align:center;padding-block:clamp(30px,4vw,52px) clamp(48px,6vw,84px);overflow:hidden} .hero__in{position:relative;z-index:1;max-width:960px;margin:0 auto} .hero h1{font-size:clamp(34px,5.5vw,64px);margin:16px 0 0} .hero h1 .u{position:relative;white-space:nowrap} .hero h1 .u::after{content:"";position:absolute;left:-1%;right:-1%;bottom:.06em;height:.17em; background:var(--pink);opacity:.22;border-radius:var(--r-pill);z-index:-1} .hero__lede{font-size:clamp(17px,1.8vw,19.5px);color:var(--ink-soft); max-width:56ch;margin:20px auto 0} .hero__acts{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:26px} .hero__facts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px} .fact{display:inline-flex;align-items:center;gap:8px;background:var(--paper); border:1px solid var(--line);border-radius:var(--r-pill); padding:9px 17px;font-size:14.5px;font-weight:600} .fact svg{width:17px;height:17px;flex:none} /* ---------- section furniture ---------- */ .sec{padding-block:var(--sec);position:relative} .sec--paper{background:var(--paper);border-block:1px solid var(--line)} .sec__head{max-width:660px;margin-bottom:clamp(34px,4vw,54px)} .sec__head--c{margin-inline:auto;text-align:center} .sec__head h2{font-size:clamp(30px,4.6vw,52px);margin-top:14px} .sec__head p{color:var(--ink-soft);margin-top:16px;font-size:17.5px} /* ---------- trust / person ---------- */ .person{display:grid;gap:clamp(28px,4vw,56px);align-items:start} @media(min-width:900px){.person{grid-template-columns:.82fr 1.18fr}} .person__card{background:var(--blue);color:var(--cream);border-radius:var(--r-lg); padding:clamp(28px,3.4vw,42px);position:relative;overflow:hidden; min-height:290px;display:flex;flex-direction:column;justify-content:flex-end} .person__mono{position:absolute;top:-18px;right:6px;font-family:var(--font-display); font-weight:800;font-size:clamp(150px,19vw,220px);line-height:.8; color:rgba(253,247,239,.13);pointer-events:none;user-select:none} .person__name{font-family:var(--font-hand);font-weight:700; font-size:clamp(27px,3.4vw,38px);line-height:1.1;position:relative} .person__role{margin-top:10px;font-size:16px;opacity:.9;position:relative} .person__body p+p{margin-top:16px} .person__body p{color:var(--ink-soft);font-size:17.5px} .creds{display:grid;gap:12px;margin-top:28px} @media(min-width:560px){.creds{grid-template-columns:1fr 1fr}} .cred{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-sm); padding:15px 17px} .cred b{display:block;font-family:var(--font-display);font-weight:700; font-size:15.5px;line-height:1.25} .cred span{display:block;color:var(--ink-soft);font-size:13.5px;margin-top:4px} /* ---------- services ---------- */ .svcs{display:grid;gap:18px} @media(min-width:660px){.svcs{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.svcs{grid-template-columns:repeat(3,1fr)}} .svc{position:relative;display:flex;flex-direction:column;gap:11px; background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md); padding:26px 24px 24px;text-decoration:none; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} .sec--paper .svc{background:var(--cream)} .svc:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(20,36,61,.09); border-color:transparent} .svc:focus-visible{outline:3px solid var(--blue);outline-offset:3px} .svc__ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none} .svc__ico svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .svc h3{font-size:20.5px;letter-spacing:-.01em;position:relative;display:inline-block} .svc h3::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2.5px; border-radius:2px;background:currentColor;opacity:.3;transform:scaleX(0);transform-origin:left; transition:transform .32s cubic-bezier(.22,.7,.28,1)} .svc:hover h3::after{transform:scaleX(1)} .svc p{color:var(--ink-soft);font-size:15.5px;line-height:1.6} .svc__go{margin-top:auto;padding-top:8px;font-weight:700;font-size:15px; display:inline-flex;align-items:center;gap:7px; background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat; background-position:0 100%;background-size:0% 2px; transition:background-size .3s cubic-bezier(.22,.7,.28,1)} .svc__go svg{width:16px;height:16px;stroke-width:2.2;fill:none;stroke:currentColor; transition:transform .2s ease} .svc:hover .svc__go{background-size:100% 2px} .svc:hover .svc__go svg{transform:translateX(4px)} /* Ένα χρώμα ανά υπηρεσία, από τα τέσσερα που ζήτησε + το μελάνι ως πέμπτο. Πειθαρχία: το ροζ ως ΓΕΜΑΤΟ pill σημαίνει πάντα δράση· το ροζ ως μικρό τετράγωνο εικονιδίου σημαίνει Δημιουργική απασχόληση. Ποτέ το αντίστροφο. */ .i-blue{background:var(--blue)} .t-blue{color:var(--blue)} /* Μελέτη */ .i-pink{background:var(--pink)} .t-pink{color:var(--pink)} /* Δημιουργική */ .i-green{background:var(--green)}.t-green{color:var(--green)} /* Φύλαξη */ .i-teal{background:var(--teal)} .t-teal{color:var(--teal)} /* Συμβουλευτική */ .i-ink{background:var(--ink)} .t-ink{color:var(--ink)} /* Online */ .i-deep{background:var(--blue-deep)} .t-deep{color:var(--blue-deep)} /* Ιδιαίτερα */ /* ---------- services: sticky stack ---------- Desktop/tablet: each card is position:sticky with an increasing top offset, so as you scroll each new card slides up and pins a little lower than the one before it — the "peek of the previous card" effect. Το πάνελ κρατάει το banner της υπηρεσίας ολόκληρο (βλ. σχόλιο στο .svc-stack__panel img παρακάτω) και είναι η κυρίαρχη στήλη της κάρτας. Mobile: sticky is switched off entirely — cards just read top to bottom. */ .svc-stack{display:grid;gap:18px;counter-reset:svcstack} .svc-stack__card{counter-increment:svcstack} .svc-stack__inner{display:grid;border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--line);background:var(--paper); box-shadow:0 18px 40px rgba(20,36,61,.1);transition:box-shadow .25s ease} .svc-stack__card:hover .svc-stack__inner{box-shadow:0 22px 52px rgba(20,36,61,.17)} @media(min-width:640px){.svc-stack__inner{grid-template-columns:1.25fr .75fr;align-items:stretch}} /* Το --ar έρχεται inline από κάθε κάρτα και είναι οι ΠΡΑΓΜΑΤΙΚΕΣ διαστάσεις του banner. Έτσι το πάνελ έχει ακριβώς την αναλογία της εικόνας: φαίνεται ολόκληρη, χωρίς περικοπή και χωρίς κενές μπάρες. Αίτημα της πελάτισσας, 2026-08-20. */ .svc-stack__panel{position:relative;overflow:hidden;background:var(--cream-2); aspect-ratio:var(--ar,1600/854); /* ΤΟ width:100% ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ — μη το βγάλεις. Χωρίς αυτό το πλάτος του πάνελ μένει «αυτόματο». Το πάνελ τεντώνεται κατακόρυφα στο ύψος της γραμμής (align-items:stretch), και τότε ο browser υπολογίζει το ΠΛΑΤΟΣ από το ύψος για να κρατήσει το aspect-ratio. Αν το κείμενο της κάρτας είναι ψηλότερο από την εικόνα, το πάνελ βγαίνει έξω από το κελί του και σκεπάζει το κείμενο. Μετρήθηκε 2026-08-28 στο WordPress: κανάλι 669px, πάνελ 748px. Με ρητό πλάτος το πλάτος γίνεται οριστικό, η αναλογία δίνει μόνο το ύψος, και αν η γραμμή είναι ψηλότερη το object-fit:contain αφήνει μια διακριτική κρεμ λωρίδα — ποτέ περικοπή της εικόνας της. */ width:100%} /* Τα στοιχεία του grid δεν συρρικνώνονται κάτω από το περιεχόμενό τους αν δεν το πεις ρητά. Ασφάλεια, να μη σπάσει ξανά η στοίχιση. */ .svc-stack__inner > *{min-width:0} .svc-stack__mono{position:absolute;font-family:var(--font-display);font-weight:800; font-size:clamp(90px,15vw,160px);line-height:.8;color:rgba(255,255,255,.16); user-select:none;pointer-events:none} .svc-stack__body{padding:clamp(24px,3.6vw,44px);display:flex;flex-direction:column; justify-content:center} .svc-stack__num{font-family:var(--font-hand);font-weight:600;font-size:14.5px;color:var(--ink-soft)} /* Hover στον τίτλο: ΜΕΓΕΘΥΝΣΗ, όχι υπογράμμιση (Byron, 2026-08-28). Η γραμμή διαβαζόταν σαν σύνδεσμος και μπέρδευε — ολόκληρη η κάρτα είναι ήδη σύνδεσμος, και από κάτω υπάρχει το «Δείτε την υπηρεσία» που ΕΧΕΙ υπογράμμιση. Δύο υπογραμμίσεις στην ίδια κάρτα ήταν μία παραπάνω. Το transform-origin είναι αριστερά, ώστε ο τίτλος να μη μετακινείται. */ .svc-stack__body h3{font-size:clamp(23px,2.6vw,29px);margin-top:8px; display:inline-block;transform-origin:left center; transition:transform .32s cubic-bezier(.22,.7,.28,1),color .25s ease} .svc-stack__card:hover .svc-stack__body h3{transform:scale(1.045)} .svc-stack__card:nth-child(1):hover .svc-stack__body h3{color:var(--blue)} .svc-stack__card:nth-child(2):hover .svc-stack__body h3{color:var(--blue-deep)} .svc-stack__card:nth-child(3):hover .svc-stack__body h3{color:var(--pink)} .svc-stack__card:nth-child(4):hover .svc-stack__body h3{color:var(--green)} .svc-stack__card:nth-child(5):hover .svc-stack__body h3{color:var(--teal)} .svc-stack__card:nth-child(6):hover .svc-stack__body h3{color:var(--ink)} @media(prefers-reduced-motion:reduce){ .svc-stack__card:hover .svc-stack__body h3{transform:none} } .svc-stack__body p{color:var(--ink-soft);font-size:16.5px;line-height:1.65;margin-top:13px;max-width:44ch} .svc-stack__go{margin-top:22px;align-self:flex-start;font-weight:700;font-size:15px; text-decoration:none;display:inline-flex;align-items:center;gap:7px; background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat; background-position:0 100%;background-size:0% 2px; transition:background-size .3s cubic-bezier(.22,.7,.28,1)} .svc-stack__go svg{transition:transform .2s ease} .svc-stack__go:hover{background-size:100% 2px} .svc-stack__go:hover svg{transform:translateX(4px)} .svc-stack__go:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px} /* Το sticky stacking ήταν ΜΟΝΟ desktop/tablet (απόφαση 2026-08-09). Ο Byron το ζήτησε πίσω και στο κινητό (2026-08-28): εκεί χανόταν εντελώς και οι έξι κάρτες διαβάζονταν σαν άψυχη λίστα. Οι αποστάσεις είναι μικρότερες, γιατί η κεφαλίδα στο κινητό είναι ~90px και η οθόνη ρηχή — με τα βήματα των 26px του desktop θα έτρωγε μισή οθόνη. */ @media(max-width:859px){ .svc-stack{gap:0} .svc-stack__card{position:sticky} .svc-stack__card:nth-child(1){top:96px;z-index:1} .svc-stack__card:nth-child(2){top:108px;z-index:2} .svc-stack__card:nth-child(3){top:120px;z-index:3} .svc-stack__card:nth-child(4){top:132px;z-index:4} .svc-stack__card:nth-child(5){top:144px;z-index:5} .svc-stack__card:nth-child(6){top:156px;z-index:6} } @media(min-width:860px){ .svc-stack{gap:0} .svc-stack__card{position:sticky} .svc-stack__card:nth-child(1){top:96px;z-index:1} .svc-stack__card:nth-child(2){top:122px;z-index:2} .svc-stack__card:nth-child(3){top:148px;z-index:3} .svc-stack__card:nth-child(4){top:174px;z-index:4} .svc-stack__card:nth-child(5){top:200px;z-index:5} .svc-stack__card:nth-child(6){top:226px;z-index:6} } .svc-prompt{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:16px; justify-content:space-between;background:var(--cream-2);border:1px solid var(--line); border-radius:var(--r-md);padding:24px 26px} .svc-prompt p{margin:0} .svc-prompt strong{font-family:var(--font-display);font-size:17px;display:block;margin-bottom:4px} .svc-prompt span{color:var(--ink-soft);font-size:15px} /* ---------- modes ---------- */ .modes{display:grid;gap:18px} @media(min-width:760px){.modes{grid-template-columns:repeat(3,1fr)}} .mode{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 26px; transition:transform .22s ease,box-shadow .22s ease} .mode:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(20,36,61,.11)} .sec--paper .mode{background:var(--cream)} /* τα παστέλ της πελάτισσας, ως γέμισμα κάρτας — το κείμενο μένει --ink */ .sec--paper .mode:nth-child(1){background:var(--blue-soft);border-color:transparent} .sec--paper .mode:nth-child(2){background:var(--green-soft);border-color:transparent} .sec--paper .mode:nth-child(3){background:var(--teal-soft);border-color:transparent} .mode svg{width:30px;height:30px;stroke:var(--blue);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;transition:transform .28s cubic-bezier(.22,.7,.28,1)} .mode:hover svg{transform:scale(1.12) rotate(-6deg)} .mode h3{font-size:19.5px;margin:16px 0 9px;position:relative;display:inline-block} .mode h3::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2.5px; border-radius:2px;background:var(--blue);opacity:.4;transform:scaleX(0);transform-origin:left; transition:transform .32s cubic-bezier(.22,.7,.28,1)} .mode:hover h3::after{transform:scaleX(1)} .mode p{color:var(--ink-soft);font-size:15.5px} /* ---------- steps ---------- */ .steps{display:grid;gap:20px;counter-reset:s} @media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}} .step{position:relative;padding:30px 26px 26px;border-radius:var(--r-md); background:var(--cream-2);border:1px solid var(--line); transition:transform .22s ease,box-shadow .22s ease} .step:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(20,36,61,.11)} .step:nth-child(1){background:var(--pink-soft);border-color:transparent} .step:nth-child(2){background:var(--blue-soft);border-color:transparent} .step:nth-child(3){background:var(--green-soft);border-color:transparent} .step__n{font-family:var(--font-display);font-weight:800;font-size:56px; line-height:.85;color:var(--pink);opacity:.28;display:inline-block; transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .step:hover .step__n{transform:scale(1.1) rotate(-4deg)} /* το νούμερο παίρνει το χρώμα της κάρτας του — αλλιώς το «1» χάνεται στο ροζ */ .step:nth-child(1) .step__n{color:var(--pink);opacity:.42} .step:nth-child(2) .step__n{color:var(--blue);opacity:.42} .step:nth-child(3) .step__n{color:var(--green);opacity:.46} .step h3{font-size:19.5px;margin:12px 0 9px} .step p{color:var(--ink-soft);font-size:15.5px} /* ---------- faq ---------- */ .faq{max-width:820px;margin:0 auto;display:grid;gap:11px} .faq details{background:var(--paper);border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden;transition:border-color .2s ease} .faq details:hover{border-color:var(--pink)} .sec--paper .faq details{background:var(--cream)} .faq summary{cursor:pointer;list-style:none;padding:19px 54px 19px 22px; font-family:var(--font-display);font-weight:700;font-size:17.5px;position:relative; transition:color .2s ease} .faq details:hover summary{color:var(--pink)} .faq summary::-webkit-details-marker{display:none} .faq summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px} .faq summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px; border-right:2.5px solid var(--pink);border-bottom:2.5px solid var(--pink); transform:translateY(-70%) rotate(45deg);transition:transform .22s ease} .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .faq .a{padding:0 22px 20px;color:var(--ink-soft);font-size:16px} /* ---------- final cta ---------- */ .cta{background:linear-gradient(120deg,#0d2032 0%,var(--ink) 55%,#2a1830 100%); color:var(--cream);border-radius:var(--r-lg); padding:clamp(38px,5.5vw,72px) var(--pad);text-align:center; position:relative;overflow:hidden;isolation:isolate} .cta::before,.cta::after{content:"";position:absolute;z-index:-1;border-radius:50%; background:rgba(253,247,239,.07)} .cta::before{width:19rem;height:19rem;top:-7rem;right:-5rem} .cta::after{width:13rem;height:13rem;bottom:-6rem;left:-3rem;background:rgba(194,24,91,.14)} .cta h2{font-size:clamp(29px,4.6vw,50px)} .cta p{color:rgba(253,247,239,.78);max-width:52ch;margin:18px auto 0;font-size:17.5px} .cta .btn--ghost{border-color:var(--cream);color:var(--cream)} .cta .btn--ghost:hover{background:var(--cream);color:var(--ink)} .cta__acts{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:30px} /* ---------- footer ---------- Bookends the dark CTA panel above with the same ink-toned gradient and a soft curtain curve at the top, so the two read as one closing block rather than a dark card sitting on the light page. */ .ftr{position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(120deg,#0d2032 0%,var(--ink) 50%,#241a2c 100%); color:rgba(253,247,239,.82); border-start-start-radius:min(64px,7vw);border-start-end-radius:min(64px,7vw); margin-top:clamp(28px,5vw,52px); padding-block:clamp(48px,6vw,72px) 110px;font-size:15.5px} @media(min-width:900px){.ftr{padding-bottom:56px}} .ftr::before{content:"";position:absolute;z-index:-1;width:22rem;height:22rem; top:-8rem;right:-7rem;border-radius:50%;background:rgba(253,247,239,.04)} .ftr .brand .b1{color:#8fc4e6} .ftr .brand .b2{color:#f294bd} .ftr__grid{display:grid;gap:30px} @media(min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}} .ftr h4{font-family:var(--font-display);font-weight:700;font-size:15px; text-transform:uppercase;letter-spacing:.06em;color:rgba(253,247,239,.55);margin:0 0 13px} .ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} .ftr ul li{padding-block:4px;color:rgba(253,247,239,.72)} .ftr a{color:inherit;text-decoration:none;display:inline-block;padding-block:6px; background-image:linear-gradient(var(--cream),var(--cream));background-repeat:no-repeat; background-position:0 88%;background-size:0% 2px; transition:color .2s ease,background-size .3s cubic-bezier(.22,.7,.28,1)} .ftr a:hover{color:var(--cream);background-size:100% 2px} .ftr__bot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(253,247,239,.14); display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between; color:rgba(253,247,239,.6);font-size:14px} /* ---------- sticky mobile bar ---------- */ .bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px; padding:11px 14px calc(11px + env(safe-area-inset-bottom)); background:rgba(253,247,239,.96);backdrop-filter:blur(8px); border-top:1px solid var(--line)} .bar .btn{flex:1;justify-content:center;padding:13px 12px;font-size:15px} @media(min-width:900px){.bar{display:none}} /* ---------- motion ---------- */ .rise{opacity:0;transform:translateY(14px); transition:opacity .55s ease-out,transform .55s ease-out} .rise.in{opacity:1;transform:none} /* per-word heading reveal: each word is its own span with --bw-i set inline. Headings are short (2-6 words), so a per-word blur+lift reads as the heading "resolving into focus" rather than sliding in — a calmer effect for a child-safeguarding-conscious brand than a slide/bounce would be. */ .blur-text{--bw-blur:9px;--bw-lift:7px} h1 .blur-text,h2 .blur-text{--bw-blur:13px;--bw-lift:9px} .blur-text .bw{display:inline-block} /* Both states below share the exact same selector shape (.blur-text.X .bw) so they carry equal specificity and the later rule always wins on cascade order — the heading-size difference lives in the --bw-blur/--bw-lift variables above, never in a heavier selector, or .is-blurred could lose to .will-blur on h1/h2 and leave the text permanently blurred. */ .blur-text.will-blur .bw{opacity:0;filter:blur(var(--bw-blur));transform:translateY(var(--bw-lift))} .blur-text.is-blurred .bw{ opacity:1;filter:blur(0);transform:none; transition:opacity .5s ease-out,filter .5s ease-out,transform .5s ease-out; transition-delay:min(calc(var(--bw-i,0) * 55ms),650ms); } /* marker-pen highlight sweep: an oversized skewed block behind a phrase, drawn by default (no-JS / reduced-motion visitors always see the mark), only animated once JS confirms it can run. */ .mark{position:relative;z-index:0;display:inline-block;color:var(--ink); padding-inline:.32em;margin-inline:.03em} .mark::before{content:"";position:absolute;inset:-.1em 0;z-index:-1; border-radius:.4em;background:var(--mark-color,var(--pink)); transform:skewY(-1.5deg) scaleX(1);transform-origin:left center; transition:transform .55s cubic-bezier(.22,.7,.28,1)} .mark.will-mark::before{transform:skewY(-1.5deg) scaleX(0)} .mark.is-marked::before{transform:skewY(-1.5deg) scaleX(1)} .mark--pink{--mark-color:var(--pink);color:#fff} .mark--blue{--mark-color:var(--blue);color:#fff} .mark--green{--mark-color:var(--green);color:#fff} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} .rise{opacity:1;transform:none} .blur-text .bw{opacity:1;filter:blur(0);transform:none} .mark::before,.mark.will-mark::before{transform:skewY(-1.5deg) scaleX(1);transition:none} } /* ============================================================ ΣΕΛΙΔΑ «Η ΕΥΤΥΧΙΑ» — η πλήρης διαδρομή ως αφήγηση ============================================================ */ .phero{padding-block:clamp(38px,5vw,64px) clamp(30px,4vw,50px);position:relative;overflow:hidden} .phero__in{position:relative;z-index:1;max-width:780px} .phero h1{font-size:clamp(34px,6vw,64px);margin:16px 0 0} .phero__lede{font-size:clamp(17px,1.9vw,20px);color:var(--ink-soft);margin-top:20px;max-width:60ch} /* γραμμή χρόνου */ .tl{position:relative;max-width:820px;margin:0 auto;display:grid;gap:clamp(26px,3.4vw,42px)} .tl::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px; background:var(--line);border-radius:2px} @media(min-width:760px){.tl::before{left:23px}} .ch{position:relative;padding-left:56px} @media(min-width:760px){.ch{padding-left:68px}} .ch__dot{position:absolute;left:0;top:2px;width:40px;height:40px;border-radius:50%; display:grid;place-items:center;font-family:var(--font-display);font-weight:800; font-size:17px;color:var(--paper);border:4px solid var(--cream)} @media(min-width:760px){.ch__dot{width:48px;height:48px;font-size:19px}} .sec--paper .ch__dot{border-color:var(--paper)} .ch__when{font-family:var(--font-body);font-weight:700;font-size:13.5px; letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft); display:block;margin-bottom:7px} .ch h2{font-size:clamp(23px,3vw,31px);margin-bottom:14px} .ch p{color:var(--ink-soft);font-size:17px} .ch p+p{margin-top:14px} .ch__note{margin-top:18px;padding:16px 19px;border-radius:var(--r-sm);font-size:15.5px; color:var(--ink)} .ch__note b{font-family:var(--font-display);font-weight:700} /* λίστες προσόντων */ .rows{display:grid;gap:10px;margin-top:22px} .row{display:grid;gap:3px 18px;background:var(--paper);border:1px solid var(--line); border-radius:var(--r-sm);padding:15px 18px} .sec--paper .row{background:var(--cream)} @media(min-width:620px){.row{grid-template-columns:112px 1fr;align-items:baseline}} .row time{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink-soft); white-space:nowrap} .row b{font-family:var(--font-display);font-weight:700;font-size:16.5px;line-height:1.3;display:block} .row span{display:block;color:var(--ink-soft);font-size:14.5px;margin-top:3px} .row--mark{background:var(--green-soft);border-color:transparent} .sec--paper .row--mark{background:var(--green-soft)} .row--mark b::after{content:"Εκπαίδευση";display:inline-block;margin-left:9px; font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.05em; text-transform:uppercase;color:var(--green);vertical-align:middle} /* μικρά ζευγάρια στοιχείων */ .pairs{display:grid;gap:12px;margin-top:22px} @media(min-width:620px){.pairs{grid-template-columns:1fr 1fr}} .pair{background:var(--cream-2);border-radius:var(--r-sm);padding:15px 18px} .pair b{display:block;font-family:var(--font-display);font-weight:700;font-size:15.5px} .pair span{display:block;color:var(--ink-soft);font-size:14.5px;margin-top:4px} /* ============================================================ ΣΕΛΙΔΕΣ ΥΠΗΡΕΣΙΩΝ — προσθήκες 2026-08-20 Νέο υλικό πελάτισσας: banner ανά υπηρεσία + τα δικά της κείμενα. ============================================================ */ /* ---------- banner υπηρεσίας ---------- Τα banner που έστειλε η πελάτισσα έχουν τον τίτλο ζωγραφισμένο ΜΕΣΑ στην εικόνα. Αν εμφανιστούν ολόκληρα, ο τίτλος διπλογράφεται δίπλα στον πραγματικό

, δεν διαβάζεται σε κινητό και δεν τον βλέπει η Google. Γι' αυτό δείχνουμε το ΕΙΚΑΣΤΙΚΟ μισό: object-position σπρώχνει το πλαίσιο προς τα δεξιά, όπου βρίσκεται η φωτογραφία σε κάθε ένα από τα έξι. Ρύθμιση ανά σελίδα με --bpos. Το .banner--full δείχνει το πλήρες banner, αν η πελάτισσα το ζητήσει — μία κλάση, καμία άλλη αλλαγή. */ .banner{position:relative;margin:clamp(28px,4vw,46px) auto 0;max-width:940px; border-radius:var(--r-lg);overflow:hidden;background:var(--cream-2); box-shadow:0 18px 44px rgba(20,36,61,.10)} .banner img{display:block;width:100%;height:auto} /* .banner--crop: εναλλακτική αν χρειαστεί ποτέ να κοπεί το εικαστικό μισό. Δουλεύει μόνο σε πλαίσιο πιο ΣΤΕΝΟ από την αναλογία της πηγής (1.87), αλλιώς το cover κόβει κάθετα και ο ζωγραφισμένος τίτλος μένει μέσα. */ .banner--crop img{height:clamp(215px,32vw,400px);object-fit:cover; object-position:var(--bpos,72% 32%)} .banner figcaption{position:absolute;inset-inline:0;bottom:0; padding:34px 24px 16px;font-size:13.5px;color:#fff; background:linear-gradient(transparent,rgba(13,32,50,.62))} /* ---------- κείμενο πελάτισσας ---------- Δικό της περιεχόμενο, δική μας τυπογραφία: μεγαλύτερο μέγεθος και πιο ανοιχτό ύψος γραμμής από το γενικό body, με μέτρο ~66ch ώστε το μάτι να μη χάνει σειρά. Αυτό ζήτησε όταν είπε «βάλε εσύ τη γραμματοσειρά και το μέγεθος, να φαίνεται επαγγελματικό». */ .prose{max-width:66ch;font-size:17.5px;line-height:1.78;color:var(--ink-soft)} .prose p+p{margin-top:19px} .prose strong{color:var(--ink);font-weight:700} /* ΠΡΟΣΟΧΗ: λέγεται .prose__lead, ΟΧΙ .lead. Το .lead ανήκει στη φόρμα κράτησης (.lead{display:grid}) και έσπαγε την εισαγωγική παράγραφο των σελίδων υπηρεσιών σε δύο στήλες — το γινόταν ξεχωριστό κελί. */ .prose .prose__lead{font-size:19.5px;line-height:1.65;color:var(--ink);font-weight:500} /* ---------- λίστα σημείων ---------- Οι λίστες της είναι γραμμένες με emoji ως κουκκίδες. Σε ιστοσελίδα τα emoji αλλάζουν σχήμα ανά συσκευή και ο screen reader τα διαβάζει δυνατά, οπότε γίνονται εικονίδιο του συστήματος. Το χρώμα εναλλάσσεται στα τέσσερα δικά της — έτσι κρατάμε το παιχνιδιάρικο χωρίς emoji. */ .plist{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px} @media(min-width:680px){.plist{grid-template-columns:1fr 1fr}} .plist li{display:flex;gap:12px;align-items:flex-start; background:var(--paper);border:1px solid var(--line); border-radius:var(--r-sm);padding:15px 17px;font-size:16px;line-height:1.5} .sec--paper .plist li{background:var(--cream)} .plist svg{width:20px;height:20px;flex:none;margin-top:1px;fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .plist li:nth-child(4n+1) svg{stroke:var(--blue)} .plist li:nth-child(4n+2) svg{stroke:var(--pink)} .plist li:nth-child(4n+3) svg{stroke:var(--green)} .plist li:nth-child(4n) svg{stroke:var(--teal)} /* ---------- πού γίνεται ---------- Η πελάτισσα διευκρίνισε γραπτά (2026-08-20) ότι δημιουργική απασχόληση και φύλαξη γίνονται ΑΠΟΚΛΕΙΣΤΙΚΑ στον χώρο της. Αυτή η ζώνη υπάρχει για να λέγεται ρητά σε κάθε σελίδα, αντί να το συμπεραίνει ο γονιός. */ .where{margin-top:clamp(30px,4vw,44px);padding:clamp(22px,3vw,30px); border-radius:var(--r-md);background:var(--cream-2);border:1px solid var(--line)} .sec--paper .where{background:var(--cream)} .where h3{font-size:17px;letter-spacing:.02em} .where__list{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px} .where__item{display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-pill); padding:10px 19px;font-weight:700;font-size:15.5px;color:var(--ink)} .where__item svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink); stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .where__item:nth-child(1){background:var(--blue-soft)} .where__item:nth-child(2){background:var(--green-soft)} .where__item:nth-child(3){background:var(--teal-soft)} .where--only .where__item{background:var(--pink-soft)} .where__note{margin-top:14px;font-size:15px;color:var(--ink-soft)} /* ---------- social στο footer ---------- */ .soc{display:flex;gap:10px;margin-top:18px} .ftr .soc a{width:40px;height:40px;padding:0;display:grid;place-items:center; border-radius:13px;background-image:none;background-color:rgba(253,247,239,.10); transition:background-color .2s ease,transform .2s ease} .ftr .soc a:hover{background-color:rgba(253,247,239,.22);transform:translateY(-2px)} .soc svg{width:19px;height:19px;fill:currentColor} /* ============================================================ ΦΩΤΟΓΡΑΦΙΕΣ ΣΤΗΝ ΑΡΧΙΚΗ — 2026-08-20 Η αρχική έδειχνε μονογράμματα εκεί που περίμενε εικόνες. Τώρα που υπάρχει υλικό, οι θέσεις αυτές παίρνουν πραγματικές φωτογραφίες. ============================================================ */ /* ---------- κάρτα εμπιστοσύνης: το πορτρέτο της ---------- */ .person__card{padding:0;justify-content:flex-end;margin:0;min-height:0} .person__card img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 22%} .person__card figcaption{position:relative;z-index:1;width:100%; padding:clamp(26px,3.2vw,38px); background:linear-gradient(transparent,rgba(9,24,38,.30) 32%,rgba(9,24,38,.80))} /* Η κάρτα είναι στήλη δίπλα σε πολύ κείμενο· χωρίς αναλογία θα κατέρρεε σε λωρίδα. Πορτρέτο 4:5 στο κινητό, λίγο ψηλότερο σε μεγάλη οθόνη. */ .person__card{aspect-ratio:4/5} @media(min-width:900px){.person__card{aspect-ratio:auto;min-height:520px}} /* ---------- κάρτες υπηρεσιών: το banner ΟΛΟΚΛΗΡΟ στο πάνελ ---------- contain, όχι cover: η πελάτισσα ζήτησε ρητά να φαίνονται ολόκληρες οι εικόνες της, με τον ζωγραφισμένο τίτλο μέσα τους. Το σκούρο gradient και το εικονίδιο της υπηρεσίας αφαιρέθηκαν — πατούσαν πάνω στο σχέδιό της. Το χρώμα της υπηρεσίας μένει στο υπογράμμισμα του τίτλου (h3::after). */ .svc-stack__panel img{position:absolute;inset:0;width:100%;height:100%; object-fit:contain} /* ============================================================ MEGA MENU — 2026-08-20 Έξι σελίδες υπηρεσιών δεν χωρούν σε γραμμική πλοήγηση. Ανοίγει με hover, με click και με πληκτρολόγιο· κλείνει με Escape και με κλικ έξω. ============================================================ */ .nav{align-items:center} .nav__item{position:relative;display:flex;align-items:center} .nav__trigger{font:inherit;font-weight:600;color:inherit;cursor:pointer; background:transparent;border:0;padding:11px 2px; display:inline-flex;align-items:center;gap:7px; background-image:linear-gradient(var(--pink),var(--pink));background-repeat:no-repeat; background-position:0 100%;background-size:0% 3px; transition:color .2s ease,background-size .3s cubic-bezier(.22,.7,.28,1)} .nav__item:hover .nav__trigger, .nav__trigger[aria-expanded="true"]{color:var(--pink);background-size:100% 3px} .nav__trigger:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px} .nav__chev{width:13px;height:13px;transition:transform .24s ease} .nav__item:hover .nav__chev, .nav__trigger[aria-expanded="true"] .nav__chev{transform:rotate(180deg)} .mega{position:absolute;top:calc(100% + 15px);left:50%;translate:-50% 0; width:min(720px,88vw);z-index:70; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:0 26px 64px rgba(20,36,61,.20);padding:16px; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .2s ease,transform .24s cubic-bezier(.22,.7,.28,1),visibility .2s} /* γέφυρα πάνω από το κενό, αλλιώς το hover χάνεται στη διαδρομή προς το μενού */ .mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} .nav__item:hover .mega, .nav__item:focus-within .mega, .nav__item.is-open .mega{opacity:1;visibility:visible;transform:none} .mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px} .nav .mega__item{display:flex;gap:13px;align-items:flex-start; padding:12px;border-radius:var(--r-sm);text-decoration:none; background-image:none;background-size:auto; transition:background-color .18s ease} .nav .mega__item:hover{background-color:var(--cream-2);color:inherit} .nav .mega__item:focus-visible{outline:3px solid var(--blue);outline-offset:-2px} .mega__ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none} .mega__ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .mega__item b{display:block;font-family:var(--font-display);font-weight:700; font-size:15.5px;line-height:1.25} .mega__item span span{display:block;color:var(--ink-soft);font-size:13px; line-height:1.45;margin-top:3px;font-weight:500} .mega__item[aria-current="page"]{background-color:var(--cream-2)} .mega__foot{margin-top:12px;padding-top:13px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px; font-size:14.5px;color:var(--ink-soft)} .nav .mega__cta{display:inline-flex;align-items:center;gap:7px;font-weight:700; color:var(--pink);text-decoration:none;background-image:none;background-size:auto} .nav .mega__cta svg{width:16px;height:16px;transition:transform .2s ease} .nav .mega__cta:hover svg{transform:translateX(4px)} /* ---------- το ίδιο, μέσα στο μενού του κινητού ---------- */ .mnav__label{display:block;font-family:var(--font-display);font-weight:700; font-size:13px;text-transform:uppercase;letter-spacing:.07em; color:var(--ink-soft);padding:16px 4px 8px} #mnav .mnav__sub{padding:0 0 10px;gap:0;border-bottom:1px solid var(--line)} #mnav .mnav__sub a{font-size:16px;font-weight:600;padding:11px 4px 11px 16px; border-bottom:0;position:relative} #mnav .mnav__sub a::before{content:"";position:absolute;left:2px;top:50%; width:6px;height:6px;border-radius:50%;background:var(--pink); transform:translateY(-50%);opacity:.45} #mnav a[aria-current="page"]{color:var(--pink)} /* ---------- hero: σειρά φωτογραφιών ---------- Το hero ήταν αμιγώς τυπογραφικό όσο δεν υπήρχε υλικό. Τώρα που υπάρχει, τέσσερις εικόνες κλείνουν το κενό κάτω από τα κουμπιά και δείχνουν παιδιά εν δράσει πριν ο γονιός σκρολάρει. Η εναλλασσόμενη κλίση είναι το ίδιο μοτίβο με τα stickers — δεν εισάγεται καινούργια ιδέα. */ .hero__rail{display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.5vw,18px);max-width:940px; margin:clamp(28px,3.4vw,40px) auto 0;padding-bottom:18px} .hero__rail figure{margin:0;overflow:hidden;border-radius:var(--r-md); aspect-ratio:1/1;background:var(--cream-2); box-shadow:0 16px 36px rgba(20,36,61,.14); transition:transform .3s cubic-bezier(.22,.7,.28,1),box-shadow .3s ease} .hero__rail img{width:100%;height:100%;object-fit:cover;object-position:50% 38%; display:block} .hero__rail figure:nth-child(odd){transform:translateY(-13px) rotate(-1.5deg)} .hero__rail figure:nth-child(even){transform:translateY(13px) rotate(1.5deg)} .hero__rail figure:hover{transform:translateY(0) rotate(0) scale(1.03); box-shadow:0 22px 48px rgba(20,36,61,.20)} @media(max-width:720px){ .hero__rail{grid-template-columns:1fr 1fr;max-width:420px;gap:12px} .hero__rail figure{aspect-ratio:4/5} .hero__rail figure:nth-child(odd){transform:translateY(-7px) rotate(-1.2deg)} .hero__rail figure:nth-child(even){transform:translateY(7px) rotate(1.2deg)} } /* ============================================================ MOBILE PASS — 2026-08-20 Μετρημένο audit σε 375px έβγαλε τέσσερα πραγματικά προβλήματα: στόχους αφής κάτω από 44px, κείμενο κάτω από 15px, καθόλου ανάδραση στο άγγιγμα, και εφέ που ζουν μόνο σε hover — δηλαδή αόρατα σε κινητό. Τα παρακάτω τα λύνουν ένα-ένα. ============================================================ */ /* ---------- 1. βασικά αφής ---------- */ html{-webkit-text-size-adjust:100%} body{touch-action:manipulation; /* κόβει την καθυστέρηση 300ms */ -webkit-tap-highlight-color:rgba(194,24,91,.12)} /* ---------- 2. ορατό focus παντού, όχι μόνο στα κουμπιά ---------- Χωρίς αυτό, η πλοήγηση με πληκτρολόγιο χάνεται σε footer και λίστες. */ a:focus-visible,button:focus-visible,summary:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:3px; border-radius:8px} /* ---------- 3. στόχοι αφής ≥ 44px ---------- Οι σύνδεσμοι του footer μετρήθηκαν 38px, τα social 40px. */ .ftr a{min-height:44px;display:inline-flex;align-items:center; padding-block:10px;background-position:0 82%} /* 44px ύψος χωρίς κενό σημαίνει διπλανοί στόχοι σε επαφή· το grid gap της λίστας ήταν 2px και έπρεπε να γίνει τουλάχιστον 8px */ .ftr ul{gap:8px} .ftr ul li{padding-block:0} .ftr .soc a{width:46px;height:46px;min-height:46px} .brand{padding-block:8px} /* το σήμα είναι πλέον 46px· 8+46+8=62px στόχος αφής */ /* ο σύνδεσμος της κάρτας υπηρεσίας ήταν 25px ψηλός */ .svc-stack__go{padding-block:11px;min-height:44px;align-items:center} /* σύνδεσμοι μέσα σε παράγραφο — δεν γίνονται 44px χωρίς να σπάσει η ροή, αλλά παίρνουν μεγαλύτερη περιοχή αφής και ορατή υπογράμμιση */ .pair a,.prose a{display:inline-block;padding-block:11px; text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px} /* ---------- 4. τυπογραφία σε μικρή οθόνη ---------- Στα 375px μετρήθηκαν κείμενα 13–14.5px. Κάτω από 15px το διάβασμα κουράζει και το iOS τείνει να κάνει auto-zoom. */ @media(max-width:600px){ body{font-size:17px} .fact{font-size:15px;padding:10px 16px} .pair span,.cred span{font-size:15px} .cred b{font-size:16px} .svc p,.mode p,.step p{font-size:16px} .svc-prompt span{font-size:15.5px} .where__note{font-size:15px} .faq .a{font-size:16.5px} .ftr{font-size:16px} .ftr__bot{font-size:15px} .row span,.tl__body p,.tl span{font-size:15.5px} .banner figcaption{font-size:14px} .prose{font-size:17.5px;line-height:1.72} .plist li{font-size:16.5px} } /* ---------- 5. ανάδραση στο άγγιγμα ---------- Σε συσκευή χωρίς δείκτη το hover δεν υπάρχει· χωρίς :active ο χρήστης δεν παίρνει καμία επιβεβαίωση ότι πάτησε. Η κλίμακα μένει μικρή ώστε να μη μετακινείται το γύρω περιεχόμενο. */ @media(hover:none){ .btn:active{transform:scale(.97)} .svc:active,.mode:active,.step:active,.hero__rail figure:active, .svc-stack__inner:active{transform:scale(.985)} .faq details:active summary{color:var(--pink)} /* τα underline-on-hover θα ήταν αόρατα — μένουν μόνιμα ορατά */ .svc-stack__go,.svc__go{background-size:100% 2px} /* Το mega ΔΕΝ κρύβεται εδώ: σε tablet με αφή (π.χ. iPad 1024px) η πλοήγηση εμφανίζεται και το dropdown πρέπει να ανοίγει με tap. Σε τηλέφωνο είναι ήδη άφαντο, γιατί το .nav κρύβεται κάτω από 1000px. */ } /* το ίδιο, για συσκευές που στέλνουν ψευδο-hover */ .btn:active{transform:scale(.97)} /* ---------- 6. η κάτω μπάρα δεν κρύβει περιεχόμενο ---------- */ @media(max-width:899px){ body{padding-bottom:0} .ftr{padding-bottom:calc(104px + env(safe-area-inset-bottom))} } /* ---------- 7. αγκυρώσεις κάτω από το sticky header ---------- Μετρήθηκε: πατώντας «Υπηρεσίες» η ενότητα προσγειωνόταν στο 1px, δηλαδή κάτω από ένα header 75px — ο χρήστης έβλεπε τη μέση της, όχι την αρχή. Το scroll-margin κρατά τον χώρο του header σε κάθε άλμα. */ [id]{scroll-margin-top:96px} @media(min-width:1000px){[id]{scroll-margin-top:104px}} /* ============================================================ ΦΟΡΜΑ ΔΩΡΕΑΝ ΓΝΩΡΙΜΙΑΣ — 2026-08-20 Μέχρι τώρα κάθε CTA του site κατέληγε σε ένα κουμπί τηλεφώνου και ένα mailto. Ο γονιός που δεν θέλει να τηλεφωνήσει — και για συμβουλευτική γονέων οι περισσότεροι δεν θέλουν — δεν είχε κανέναν τρόπο. Η φόρμα κάθεται μέσα στο σκούρο closing block: αριστερά το κείμενο, δεξιά λευκή κάρτα, ώστε τα πεδία να έχουν κανονική αντίθεση. ============================================================ */ .cta--form{text-align:left;display:grid;gap:clamp(28px,4vw,48px); padding:clamp(28px,4vw,54px)} @media(min-width:960px){.cta--form{grid-template-columns:1fr 1.05fr;align-items:center}} .cta--form h2{font-size:clamp(28px,3.6vw,44px)} .cta--form .cta__copy p{margin-inline:0;max-width:40ch} .cta__points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px} .cta__points li{display:flex;gap:11px;align-items:flex-start; color:rgba(253,247,239,.86);font-size:15.5px;line-height:1.5} .cta__points svg{width:19px;height:19px;flex:none;margin-top:2px;fill:none; stroke:#7fd6bd;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .cta__or{margin-top:26px!important;font-size:14.5px; text-transform:uppercase;letter-spacing:.07em;color:rgba(253,247,239,.55)!important} .cta--form .cta__copy .btn{margin-top:10px} /* ---------- η λευκή κάρτα ---------- */ .cta__form{background:var(--paper);border-radius:var(--r-md); padding:clamp(22px,3vw,32px);color:var(--ink);position:relative} .lead__intro{font-size:15.5px;color:var(--ink-soft);margin-bottom:18px} /* περιορισμένο σε form: το .lead είναι η φόρμα, όχι οποιοδήποτε "lead" κείμενο */ form.lead{display:grid;gap:15px} .fld{display:grid} .fld label{font-weight:700;font-size:15px;margin-bottom:7px} .req{color:var(--pink)} .opt{font-weight:500;font-size:13.5px;color:var(--ink-soft)} .fld input,.fld select,.fld textarea{ font-family:inherit;font-size:16.5px; /* ≥16px, αλλιώς το iOS κάνει zoom στο focus */ color:var(--ink);background:var(--cream); border:1.5px solid var(--line);border-radius:var(--r-sm); padding:13px 15px;min-height:50px;width:100%; transition:border-color .18s ease,box-shadow .18s ease} .fld textarea{min-height:92px;resize:vertical;line-height:1.55} .fld select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:17px; padding-right:44px} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,107,153,.18)} .fld__hint{font-size:13.5px;color:var(--ink-soft);margin-top:6px} .fld__err{font-size:14px;color:var(--pink-dark);margin-top:6px;font-weight:600;display:none} .fld.is-invalid .fld__err{display:block} .fld.is-invalid input,.fld.is-invalid select,.fld.is-invalid textarea{ border-color:var(--pink-dark);box-shadow:0 0 0 3px rgba(168,20,80,.14)} /* checkbox συγκατάθεσης — ο στόχος αφής είναι ολόκληρη η ετικέτα */ .fld--check{grid-template-columns:auto 1fr;gap:0 12px;align-items:start;margin-top:4px} .fld--check input{width:24px;height:24px;min-height:24px;margin-top:2px;accent-color:var(--pink);cursor:pointer} .fld--check label{font-weight:500;font-size:14.5px;line-height:1.5;margin:0;cursor:pointer} .fld--check .fld__err{grid-column:1/-1} /* παγίδα bot: εκτός οθόνης, όχι display:none — τα bots αγνοούν το δεύτερο */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .lead__submit{margin-top:6px;justify-content:center;width:100%;position:relative} .lead__submit:disabled{opacity:.72;cursor:progress} .lead__submit .spin{display:none;width:17px;height:17px;border-radius:50%; border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff; animation:spin .7s linear infinite} .lead__submit.is-busy .spin{display:inline-block} .lead__submit.is-busy .plus{display:none} @keyframes spin{to{transform:rotate(360deg)}} .form__status{font-size:14.5px;font-weight:600;margin-top:4px} .form__status--err{color:var(--pink-dark)} .form__status--busy{color:var(--ink-soft)} /* ---------- επιτυχία & εφεδρεία ---------- */ .lead__ok,.lead__fb{text-align:center;padding:8px 0} .lead__ok:focus,.lead__fb:focus{outline:none} .ok__ico{width:58px;height:58px;border-radius:50%;background:var(--teal-soft); display:grid;place-items:center;margin:0 auto 16px} .ok__ico svg{width:28px;height:28px;fill:none;stroke:var(--teal);stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} .lead__ok h3,.lead__fb h3{font-size:23px;margin-bottom:10px} .lead__ok p,.lead__fb p{color:var(--ink-soft);font-size:16px} .ok__ref{font-size:13.5px!important;margin-top:12px;color:var(--ink-soft)} .fb__acts{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:20px} @media(max-width:600px){ .cta--form{text-align:left} .fld label{font-size:15.5px} .fld__hint{font-size:14px} .fld--check label{font-size:15px} } /* Σε μεγάλη οθόνη η φόρμα ήταν επτά πεδία στη σειρά — πολύ ψηλή στήλη. Τα σύντομα ζευγαρώνουν· email, μήνυμα και συγκατάθεση μένουν πλήρη. */ @media(min-width:960px){ form.lead{grid-template-columns:1fr 1fr;column-gap:14px} .lead__intro,.fld--full,.fld--check,.lead__submit,.form__status{grid-column:1 / -1} } /* ---------- διορθώσεις μέσα στη λευκή κάρτα ---------- Το σκούρο .cta ορίζει `.cta p{color:rgba(253,247,239,.78)}` — δηλαδή σχεδόν λευκό. Ίσχυε και για τις παραγράφους ΜΕΣΑ στη λευκή κάρτα, άρα το intro, τα hints και τα μηνύματα ήταν πρακτικά αόρατα. Το ίδιο και το ghost button, που κληρονομούσε κρεμ περίγραμμα σε λευκό φόντο. */ .cta .cta__form p{color:var(--ink-soft)} .cta .cta__form .lead__intro{color:var(--ink-soft)} .cta .cta__form .fld__err{color:var(--pink-dark)} .cta .cta__form .form__status--err{color:var(--pink-dark)} .cta .cta__form .btn--ghost{border-color:var(--ink);color:var(--ink)} .cta .cta__form .btn--ghost:hover{background:var(--ink);color:var(--cream)} .cta .cta__form h3{color:var(--ink)} /* Τα ζευγαρωμένα πεδία είχαν άνισο ύψος: το τηλέφωνο κουβαλά hint, οπότε η γραμμή του grid τέντωνε και το διπλανό input γινόταν δυσανάλογα ψηλό. */ .fld{align-content:start} .fld input,.fld select{align-self:start} /* το footer heading ήταν h4 μετά από h2 — έγινε h3 και κρατά την ίδια όψη */ .ftr__h{font-family:var(--font-display);font-weight:700;font-size:15px; text-transform:uppercase;letter-spacing:.06em;color:rgba(253,247,239,.55);margin:0 0 13px} /* Το checkbox είναι 24px οπτικά· η περιοχή αφής πρέπει να φτάνει τα 44. Ψευδοστοιχείο ΔΕΝ δουλεύει σε — replaced elements δεν αποδίδουν ::before/::after. Οπότε το τετράγωνο τυλίγεται σε μια δεύτερη