είναι inline από προεπιλογή και ως flex item γίνεται μπλοκ — αλλιώς το max-width και το text-wrap:balance δεν έπιαναν ποτέ. Σε rem και όχι σε em: το em εδώ μετράει το 17px του γονέα, όχι το μέγεθος του αποφθέγματος, και η στήλη έβγαινε 340px. */ display:flex; flex-direction:column; gap:.9rem; max-width:38rem; } .tenet + .tenet{ margin-top:1.4rem; } /* Δεν είναι display τίτλος. Δοκιμάστηκε στα 3.6rem — και ο κοντύτερος κανόνας της εποχής («Λιγότερο, σωστά.», αφαιρέθηκε αργότερα) έμενε μία γραμμή μέσα σε κουτί τεσσάρων, με τρύπα που διαβαζόταν σαν σπασμένο layout. Στην κλίμακα της παλιάς ενότητας τα αποφθέγματα είναι συγκρίσιμα, και η εξήγηση από κάτω κλείνει ό,τι απομένει. */ .tenet q{ font-family:var(--serif); font-weight:400; font-size:clamp(1.45rem,2.6vw,2rem); line-height:1.34; text-wrap:balance; quotes:none; } /* Πεζή παράγραφος, όχι ετικέτα: το --muted την κρατούσε στο 5.4:1 και ήταν το πιο σβηστό κείμενο της αρχικής ενώ έπρεπε να διαβαστεί. */ .tenet p{ font-size:.94rem; color:var(--ink-2); line-height:1.62; } /* --- ο διακόπτης της εναλλαγής --- Όλα εδώ κρέμονται από το .rot, που το προσθέτει ΜΟΝΟ το site.js και μόνο μέσα στον έλεγχο wantsAnim. Χωρίς JavaScript —ή με prefers-reduced-motion— η κλάση δεν μπαίνει ποτέ και οι δύο κανόνες μένουν ο ένας κάτω από τον άλλο, ακριβώς όπως πάνω. Είναι η ίδια απόφαση με το :root.anim .rv παρακάτω: ό,τι κρύβεται από κίνηση πρέπει να κρύβεται μόνο όταν η κίνηση θα συμβεί όντως. */ .tenets.rot .tenet{ /* Και οι δύο στο ΙΔΙΟ κελί: το ύψος του πλέγματος γίνεται του ψηλότερου κανόνα, οπότε η εναλλαγή δεν κουνάει το hero. Χωρίς position:absolute, άρα χωρίς μετρήσεις ύψους από το JS. */ grid-area:1/1; margin-top:0; /* Το κελί κλειδώνει στο ύψος του ΜΑΚΡΥΤΕΡΟΥ κανόνα, ενώ ο κοντύτερος είναι σαφώς πιο ρηχός. Στοιχισμένοι στην κορυφή, το «Λιγότερο, σωστά.» —ο τότε κοντύτερος, που έχει πια αφαιρεθεί— άφηνε 183px τρύπα μέχρι τις τελίτσες και διαβαζόταν σαν σπασμένο layout. Κεντραρισμένοι, ο αέρας μοιράζεται και στις δύο πλευρές — η φράση κάθεται, δεν κρέμεται. */ justify-content:center; opacity:0; transform:translateY(18px); /* ΚΑΜΙΑ μετάβαση πριν από το .ready. Τη στιγμή που το site.js προσθέτει το .rot, και οι δύο κανόνες είναι ακόμη ορατοί από τη στοίβα: με ενεργές μεταβάσεις θα έσβηναν με fade μπροστά στον επισκέπτη, και οι δύο μαζί, τυπωμένοι ο ένας πάνω στον άλλο. */ transition:none; pointer-events:none; } .tenets.rot .tenet.on{ opacity:1; transform:none; pointer-events:auto; } /* Διαδοχή, όχι διασταύρωση: ο κανόνας που φεύγει σβήνει ΠΡΩΤΑ, ο επόμενος μπαίνει μετά. Ένα κοινό cross-fade αφήνει δύο κείμενα διαβαστά το ένα πάνω στο άλλο για μισό δευτερόλεπτο — το ίδιο easing με το .rv, αλλά μοιρασμένο στον χρόνο αντί για ταυτόχρονο. */ .tenets.rot.ready .tenet{ transition:opacity .35s ease, transform .35s ease; } .tenets.rot.ready .tenet.on{ transition:opacity .55s ease .3s, transform .7s cubic-bezier(.2,.7,.2,1) .3s; } .rot-dots{ display:flex; gap:.35rem; align-items:center; } .rot-dots button{ /* 24px στόχος αφής, 7px τελίτσα: το μικρό σχήμα δεν πρέπει να σημαίνει και μικρό κουμπί. */ width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; } .rot-dots button::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:background .3s ease, transform .3s ease; } .rot-dots button:hover::before{ background:var(--bone-dim); } .rot-dots button[aria-current="true"]::before{ background:var(--bone); transform:scale(1.3); } .hero-sig{ display:flex; flex-direction:column; gap:.3rem; padding-left:1.15rem; border-left:1px solid var(--line-2); } .hero-sig .name{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); } .hero-sig .role{ font-size:.85rem; color:var(--muted); } /* Οι πόλεις, όχι δεύτερη περιγραφή: μικρότερες και σε κεφαλαία διαστήματα ώστε να διαβάζονται ως στοιχείο επικοινωνίας κάτω από το .role, όχι ως συνέχειά του. */ .hero-sig .loc{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--line-2); margin-top:.15rem; } .hero-plate{ min-height:52vh; } /* Το πλαίσιο μέσα στο πλαίσιο φεύγει ΜΟΝΟ εδώ. Πάνω από τα placeholder ντεγκραντέ η λεπτή γραμμή διαβάζεται ως πρόθεση· πάνω από πραγματικό πορτραίτο διαβάζεται ως αδέσποτο ορθογώνιο. Στις κάρτες και στα περιστατικά μένει. Το ::after ελευθερώνεται έτσι για το σβήσιμο. */ .hero-plate::after{ inset:0; border:0; /* Η αιχμηρή ραφή: ο φωτισμένος τοίχος της φωτογραφίας ακουμπούσε το σχεδόν μαύρο της στήλης με τη μέγιστη δυνατή αντίθεση, χωρίς κανένα ενδιάμεσο. Το ντεγκραντέ δίνει στη φωτογραφία περιθώριο να σβήσει μέσα στο μαύρο αντί να το χτυπήσει. Δεν είναι mix-blend-mode: το ::before κρατά ήδη τον κόκκο με overlay, και ένα overlay ντεγκραντέ δεν σβήνει προς το μαύρο — χρειάζεται δικό του, αδιαφανές στρώμα. */ /* rgba του --sunken (#0C0F10) γραμμένο ρητά: το ντεγκραντέ χρειάζεται ενδιάμεσες στάσεις με άλφα, και το χρώμα είναι έτσι κι αλλιώς σχεδόν μαύρο — το σβήσιμο προς `transparent` δεν περνά από γκρι. */ background:linear-gradient( to right, rgba(12,15,16,1) 0%, rgba(12,15,16,.55) 6%, rgba(12,15,16,0) 14% ); } .btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; } .btn{ font-size:.73rem; letter-spacing:.16em; text-transform:uppercase; padding:1.05rem 1.9rem; border:1px solid var(--bone); background:var(--bone); color:#0A0C0D; font-weight:600; transition:background .25s, color .25s; cursor:pointer; } .btn:hover{ background:transparent; color:var(--bone); } .btn.ghost{ background:transparent; color:var(--ink-2); border-color:var(--line-2); font-weight:500; } .btn.ghost:hover{ color:var(--ink); border-color:var(--bone-dim); } /* --- μετρητές: συνέχεια του hero, όχι δική τους ενότητα --- Χωρίς .rv εδώ, σκόπιμα: το μέτρημα ΕΙΝΑΙ η αποκάλυψη. Ένα fade-in από πάνω του θα ήταν δεύτερη κίνηση για το ίδιο πράγμα, ακριβώς στο σημείο που ο επισκέπτης πρωτοκυλάει. */ .stats{ display:grid; grid-template-columns:repeat(2,1fr); border-bottom:1px solid var(--line); } .stat{ display:flex; flex-direction:column; gap:.6rem; padding:clamp(2.25rem,4.5vw,3.5rem) var(--pad); } .stat + .stat{ border-left:1px solid var(--line); } .stat .num{ font-family:var(--serif); font-size:clamp(2.6rem,6vw,4.4rem); line-height:1; letter-spacing:-.015em; color:var(--bone); /* Χωρίς tabular-nums τα ψηφία αλλάζουν πλάτος καθώς τρέχει ο μετρητής και η ετικέτα από κάτω χοροπηδάει σε κάθε καρέ. */ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .stat .lbl{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:600; } /* ============================================================ SECTIONS ============================================================ */ /* Ήταν clamp(4.5rem,9vw,8.5rem): περίπου 130px πάνω ΚΑΙ κάτω σε οθόνη γραφείου, άρα ~260px κενού ανάμεσα σε δύο ενότητες. Σε σελίδα επέμβασης με πέντε ενότητες αυτό είναι πάνω από 1300px μαύρου χωρίς τίποτα μέσα του — το μεγαλύτερο μέρος της αίσθησης ότι «δεν τελειώνει». */ .sect{ padding:clamp(3.25rem,5.5vw,5.5rem) var(--pad); } .sect + .sect{ border-top:1px solid var(--line); } /* Πρώτη ενότητα κάτω από το fixed header σε πρότυπα χωρίς hero (404, επεμβάσεις, ιατρείο, κόμβος, αναζήτηση, περιστατικό) — ίδιο padding-top σε 6 πρότυπα, μία κλάση αντί για inline style αντιγραμμένο έξι φορές. */ .sect.sect-top{ padding-top:calc(clamp(3.25rem,5.5vw,5.5rem) + 3rem); } /* Ο παλμός της σελίδας. Χωρίς αυτό κάθε ενότητα είχε ΤΗΝ ΙΔΙΑ αξία και τις χώριζε μόνο μια τρίχα στο 16% — μια στήλη χωρίς ορόσημα, όσο κι αν κυλούσε. Το nth-of-type μετράει ανάμεσα στα αδέλφια, οπότε διαδοχικά .sect παίρνουν διαδοχικούς δείκτες και η εναλλαγή κρατά ακόμη κι όταν λείπουν ενότητες υπό όρους (rail, περιστατικά): αλλάζει η φάση, όχι ο ρυθμός. Το .sect-flat είναι η έξοδος όπου δεν το θέλουμε — με διπλή κλάση, γιατί σκέτο .sect-flat (0,1,0) δεν νικά το (0,2,0) εδώ. */ .sect:nth-of-type(even){ background:var(--ground-2); } .sect.sect-flat{ background:transparent; } /* --- φύλλο ανάγνωσης --- Οι 52 σελίδες επεμβάσεων είναι ΑΝΑΓΝΩΣΜΑ: κείμενο, πίνακας δεδομένων, καταλληλότητα, χρονοδιάγραμμα, ερωτήσεις. Τις σέρβιρε η ίδια μεταχείριση που έχει η αρχική — τυπογραφία που αιωρείται στο κενό. Ανεβασμένες πάνω σε μία κοινή επιφάνεια, η σελίδα διαβάζεται σε τρεις πράξεις: σκοτεινό hero → φύλλο ανάγνωσης → σκοτεινό υποσέλιδο. Χωρίς περίγραμμα: η αλλαγή αξίας κάνει ήδη τη ραφή, και το hero από πάνω φέρνει δικό του border. */ .readsheet{ background:var(--raised); } /* Ίδια ειδικότητα (0,2,0) με το :nth-of-type(even) παραπάνω, άρα κερδίζει με τη σειρά δήλωσης: μέσα στο φύλλο δεν εναλλάσσεται τίποτα. */ .readsheet .sect{ background:transparent; } /* Τα πλακίδια της καταλληλότητας είναι ήδη --raised· μέσα στο φύλλο, που είναι κι αυτό --raised, εξαφανίζονταν μέσα του και οι δύο στήλες διαβάζονταν ως ένα κείμενο. Ένα σκαλί πάνω. */ .readsheet .fit > div{ background:var(--raised-2); } .wrap{ max-width:var(--max); margin-inline:auto; } /* Shared two-column editorial layout. Kept in CSS so it can collapse cleanly on tablets and phones; inline grid declarations cannot be overridden by the responsive rules below without resorting to !important. */ .content-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,5rem); } .content-grid--profile{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } /* Οι δύο στήλες είναι υπό όρους στο PHP (facts/cv μπορεί να λείπουν). Χωρίς αυτό, μια σελίδα με μόνο κείμενο αφήνει μισό wrap (έως 1320px) κενό δεξιά — το grid κρατά τη δεύτερη στήλη ό,τι κι αν υπάρχει μέσα της. Κεντράρουμε αντί να αφήσουμε το κείμενο κολλημένο αριστερά με ένα χάσμα δίπλα του: ίδιο ελάττωμα, διαφορετικό σχήμα. */ .content-grid > .rv:only-child{ grid-column:1 / -1; max-width:46rem; /* Το width:100% ΔΕΝ είναι πλεονασμός δίπλα στο margin-inline:auto. Ένα στοιχείο πλέγματος με αυτόματα οριζόντια περιθώρια παύει να τεντώνεται στη γραμμή του και παίρνει μέγεθος fit-content — στις σελίδες της ομάδας Β που δεν έχουν στήλη δεδομένων, το κείμενο μάζευε σε 201px μέσα σε γραμμή 350px στο κινητό (το mobile-audit το έπιανε ως narrowContent σε /brotox/ και /nimata-prosopou/). Με width:100% το στοιχείο γεμίζει ώς το max-width και τα auto περιθώρια κεντράρουν ό,τι περισσεύει, που ήταν και η πρόθεση του κανόνα. */ width:100%; margin-inline:auto; } .content-grid > .rv:only-child .body-w{ max-width:none; } .sect-head{ display:flex; flex-direction:column; gap:1.1rem; margin-bottom:clamp(2.5rem,5vw,4.5rem); max-width:44rem; } /* --- τρεις πόρτες: η δομική απάντηση στο «η αρχική μπουκώνει» --- */ /* Το --doors το γράφει το front-page.php: η τρίτη πόρτα εμφανίζεται μόνο όταν η σελίδα της είναι δημοσιευμένη. Με σταθερό repeat(3,1fr) η τρίτη στήλη θα έμενε κενή λωρίδα σε χρώμα --line, ύψους .door. */ .doors{ display:grid; grid-template-columns:repeat(var(--doors,3),1fr); gap:1px; background:var(--line); } /* Το ύψος ακολουθεί το περιεχόμενο. Ήταν clamp(320px,42vw,470px) — διαστάσεις φωτογραφίας — ενώ η πόρτα δεν δείχνει ποτέ φωτογραφία: το ::before είναι υφή, όχι θέση για εικόνα. Με το .note κρυμμένο (βλ. παρακάτω) το ορατό περιεχόμενο ήταν ~90px μέσα σε 470, και με την τρίτη πόρτα σε draft οι δύο που μένουν γίνονταν λωρίδες 870×470 με μία φράση στη γωνία. */ .door{ position:relative; overflow:hidden; /* Ίδια αξία με την ενότητα που τις φιλοξενεί (.sect:nth-of-type(even)). Αδιαφανές και όχι transparent: το .doors έχει background:var(--line) για να χαράζει τις τρίχες μέσα από το gap:1px — διάφανη πόρτα θα άφηνε το χρώμα της τρίχας να γεμίσει ολόκληρο το πλακίδιο. */ background:var(--ground-2); min-height:clamp(260px,26vw,330px); padding:2.2rem 2rem; display:flex; flex-direction:column; justify-content:flex-end; gap:1rem; transition:background .4s ease; /* Ίδιος λόγος με το .plate: ο κόκκος του ::before είναι mix-blend-mode, και χωρίς δικό του πλαίσιο στοίβαξης θα ανακατευόταν με ό,τι βρίσκεται πίσω από την πόρτα αντί μόνο με την πόρτα. */ isolation:isolate; } /* Μόνο υφή, καμία μεταβολή αξίας. Το ντεγκραντέ ήταν #232829 στην κορυφή προς #14181A στη βάση, πάνω σε ενότητα --ground-2 (#171B1D): η πιο ανοιχτή αξία της σελίδας καθόταν στο ΑΔΕΙΟ πάνω μισό της πόρτας, με ένα radial «φως» στο 30% 15% από πάνω της. Δηλαδή ο σχεδιασμός έστρεφε προβολέα στο κενό — ακριβώς το σήμα «εδώ έλειψε μια φωτογραφία». Η πόρτα δεν κρατά ποτέ φωτογραφία· είναι πεδίο κειμένου. Ισόπεδη με την ενότητα, το πλέγμα το χαράζουν οι τρίχες του .doors (gap:1px). */ .door::before{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.4; mix-blend-mode:overlay; z-index:0; } /* Οι παραλλαγές nth-child(2)/(3) έφυγαν μαζί με το ντεγκραντέ: υπήρχαν για να μη διαβάζονται οι τρεις πόρτες ως τρεις ίδιες φωτογραφίες. Με ισόπεδα πεδία δεν υπάρχει τίποτα να διαφοροποιηθεί — τις ξεχωρίζει το κείμενό τους. */ /* Η ανύψωση συμβαίνει στο hover, όχι μονίμως: η πόρτα απαντά όταν τη δείχνεις, αντί να στέκει φωτισμένη και άδεια. Το transition υπάρχει ήδη στο .door. */ .door:hover{ background:var(--raised); } .door > *{ position:relative; z-index:1; } /* Μέτρο ανάγνωσης, όχι πλάτος στήλης: με δύο πόρτες η καθεμιά πιάνει ~870px και η φράση απλωνόταν σε όλο το φάρδος. Τα δύο max-width βγαίνουν και τα δύο ~420px, ώστε ερώτηση και απάντηση να στοιχίζονται σε κοινή δεξιά ακμή. */ .door .ask{ font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.28; max-width:16em; } .door .go{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); display:flex; align-items:center; gap:.6rem; } .door .go::after{ content:""; height:1px; width:26px; background:currentColor; transition:width .35s ease; } .door:hover .go::after{ width:52px; } /* Πάντα ορατό. Ήταν max-height:0/opacity:0 με αποκάλυψη στο hover — και είναι ακριβώς το κείμενο που απαντά «γιατί να πατήσω εδώ». Κρυμμένο, άφηνε την πόρτα να δείχνει μόνο την ερώτηση και δεν υπήρχε καθόλου σε συσκευή αφής πάνω από 1080px, όπου δεν υπάρχει hover να το φέρει. Το hover κρατά τη δουλειά που του αναλογεί: η υφή πλησιάζει και η γραμμή του .go μακραίνει. */ .door .note{ font-size:.88rem; color:var(--ink-2); line-height:1.6; max-width:30em; } /* --- rail (το ένα και μόνο carousel) --- */ .rail-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:1.7rem; } .rail{ display:flex; gap:1rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:thin; scrollbar-color:var(--bone-dim) transparent; } .rail::-webkit-scrollbar{ height:2px; } .rail::-webkit-scrollbar-thumb{ background:var(--bone-dim); } .card{ flex:0 0 clamp(230px,25vw,315px); scroll-snap-align:start; display:flex; flex-direction:column; } .card .plate{ aspect-ratio:3/4; } /* ΤΟ ΣΗΜΕΙΟ ΕΣΤΙΑΣΗΣ ΤΗΣ ΚΑΡΤΑΣ (front-page.php: VASALOS_RAIL_FOCUS). Η κάρτα είναι η μόνη κατακόρυφη θέση του site (3/4) και οι φωτογραφίες των επεμβάσεων είναι όλες οριζόντιες 3/2 — δηλαδή το cover πετάει το μισό πλάτος του καρέ. Και είναι stock φωτογραφίες, με σκόπιμα άδειο φόντο στη μία πλευρά για κείμενο: κόβοντας από το κέντρο, η κάρτα έδειχνε το κενό αντί για το θέμα — η αυξητική στήθους έναν αγκώνα σε γαλάζιο, το face lift μισό πρόσωπο κολλημένο στην άκρη. Κανόνας που να τις σώζει όλες δεν υπάρχει: άλλες έχουν το θέμα δεξιά, άλλες αριστερά. Γι' αυτό η θέση έρχεται ανά φωτογραφία από το πρότυπο. Χωρίς μεταβλητή μένει το κέντρο, όπως πριν — το rail των κειμένων από κάτω μοιράζεται το ίδιο .card και δεν την ορίζει. */ .card .plate img{ object-position:var(--plate-focus,50%) 50%; } .card .meta{ padding:1rem 0 0; display:flex; flex-direction:column; gap:.3rem; } .card .ttl{ font-family:var(--serif); font-size:1.14rem; } .card .grp{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); } .card:hover .ttl{ color:var(--bone); } /* --- band: δύο θέματα σε μία θέση (το ένα τολμηρό σημείο) --- Απώλεια βάρους και στήθος. Ήταν δύο διαδοχικές ζώνες· τώρα κατέχουν την ίδια και εναλλάσσονται, με τον ίδιο εναλλάκτη που κινεί τους δύο κανόνες στο hero. Το .band-alt (δεύτερη φορά κλίσης) έφυγε μαζί με τη διαδοχή: υπήρχε επειδή δύο ταυτόσημες ζώνες σε σειρά διαβάζονταν ως λάθος αντιγραφή — με μία θέση δεν υπάρχει τίποτα να ξεχωρίσει, και το φόντο θα άλλαζε κατεύθυνση κάθε δέκα δευτερόλεπτα. */ .band{ position:relative; padding:clamp(4.5rem,8vw,7.5rem) var(--pad); background:linear-gradient(105deg,#241F18 0%,#181A1C 44%,#0F1214 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; } .band::before{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.3; pointer-events:none; } .band-grid{ position:relative; max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,6vw,5rem); align-items:center; } /* --- ο περιέκτης των δύο πάνελ --- Το πλάτος και το κεντράρισμα ανεβαίνουν εδώ: τα πάνελ γεμίζουν πια τον περιέκτη, αλλιώς το καθένα θα κεντραριζόταν χωριστά μέσα στο ίδιο κελί και το ένα θα κουνιόταν κατά το πλάτος του άλλου. */ .bands{ position:relative; max-width:var(--max); margin-inline:auto; display:grid; gap:clamp(3.5rem,7vw,6rem); } .bands > .band-grid{ max-width:none; margin-inline:0; } /* --- ο διακόπτης της εναλλαγής --- Ίδια συμφωνία με τους κανόνες της φιλοσοφίας παραπάνω, ίδια σειρά σκέψης: όλα κρέμονται από το .rot, που το προσθέτει ΜΟΝΟ το site.js και μόνο μέσα στον έλεγχο wantsAnim. Χωρίς JavaScript —ή με prefers-reduced-motion— η κλάση δεν μπαίνει ποτέ και οι δύο ζώνες μένουν η μία κάτω από την άλλη, όπως ήταν πάντα. */ .bands.rot > .band-grid{ /* Και οι δύο στο ΙΔΙΟ κελί: το ύψος γίνεται του ψηλότερου πάνελ, οπότε η εναλλαγή δεν κουνάει τη σελίδα κάτω από τα μάτια του επισκέπτη. */ grid-area:1/1; opacity:0; transform:translateY(18px); /* ΚΑΜΙΑ μετάβαση πριν από το .ready — τη στιγμή που μπαίνει το .rot και τα δύο πάνελ είναι ακόμη ορατά από τη στοίβα. */ transition:none; pointer-events:none; } .bands.rot > .band-grid.on{ opacity:1; transform:none; pointer-events:auto; } /* Διαδοχή, όχι διασταύρωση: το πάνελ που φεύγει σβήνει ΠΡΩΤΑ, το επόμενο μπαίνει μετά. Ίδιοι χρόνοι με τη φιλοσοφία. */ .bands.rot.ready > .band-grid{ transition:opacity .35s ease, transform .35s ease; } .bands.rot.ready > .band-grid.on{ transition:opacity .55s ease .3s, transform .7s cubic-bezier(.2,.7,.2,1) .3s; } /* Οι τελίτσες τις προσθέτει το site.js ως αδελφό ΜΕΤΑ το #bands, δηλαδή ακόμη μέσα στο . Το ίδιο max-width με τα πάνελ και στοίχιση αριστερά: κάθονται κάτω από την επικεφαλίδα, όπως και οι τελίτσες της φιλοσοφίας στο hero. Κεντραρισμένες έπεφταν ακριβώς στη ραφή των δύο στηλών — ούτε με το κείμενο, ούτε με τον πίνακα. */ .band > .rot-dots{ position:relative; max-width:var(--max); margin:clamp(2rem,4vw,3rem) auto 0; } /* Το κουμπί είναι 24px με 7px τελίτσα στο κέντρο του: χωρίς αυτό η πρώτη τελίτσα κάθεται εννιά pixel δεξιότερα από το «Μ» της ετικέτας από πάνω της, και η στοίχιση διαβάζεται ως ατύχημα. Στο κουμπί και όχι στον περιέκτη — ο περιέκτης πρέπει να μείνει κεντραρισμένος στο --max. */ .band > .rot-dots button:first-child{ margin-inline-start:-8px; } .stages{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .stages li{ display:grid; grid-template-columns:5.5rem 1fr; gap:1.2rem; padding:1.05rem 0; border-top:1px solid var(--line); align-items:baseline; } .stages li:last-child{ border-bottom:1px solid var(--line); } .stages .when{ font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); font-variant-numeric:tabular-nums; } .stages .what{ font-family:var(--serif); font-size:1.06rem; } /* Η στήλη της ετικέτας φαρδαίνει μόνο στο πάνελ του στήθους: εκεί οι ετικέτες είναι φράσεις («Έχασε όγκο», «Και τα δύο») και όχι περίοδοι δύο λέξεων («Μήνας 0»). Στα 5.5rem έσπαγαν και οι τέσσερις σε δύο γραμμές, με τον τίτλο δίπλα τους να κρέμεται. Η κλάση κρέμεται από το ΠΑΝΕΛ και όχι από την ενότητα: η ενότητα είναι πλέον μία και κοινή για τα δύο θέματα — ένα .band .stages εδώ θα φάρδαινε και τους «Μήνες» της απώλειας βάρους. */ .band-panel--stithos .stages li{ grid-template-columns:7.5rem 1fr; } .stages .what small{ display:block; font-family:var(--sans); font-size:.84rem; color:var(--muted); margin-top:.15rem; } /* --- consent badge --- */ .consent{ display:flex; align-items:flex-start; gap:.85rem; border:1px solid var(--line-2); padding:1.1rem 1.3rem; max-width:40rem; background:rgba(203,187,164,.04); } .consent .key{ flex:none; width:1.5rem; height:1.5rem; border:1px solid var(--bone-dim); display:grid; place-items:center; color:var(--bone); font-size:.8rem; } .consent p{ font-size:.9rem; color:var(--ink-2); } /* --- before / after --- */ .cases{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); } .case .pair{ display:grid; grid-template-columns:1fr 1fr; gap:2px; } .case .pair .plate{ aspect-ratio:4/5; } .case .pair .plate figcaption{ left:.9rem; bottom:.75rem; right:.9rem; font-size:.54rem; } .case .cmeta{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; padding-top:.85rem; font-size:.78rem; color:var(--muted); } .case .cmeta strong{ color:var(--ink-2); font-weight:600; } /* --- γκαλερί περιστατικών (σελίδα επέμβασης) --- Ξεχωριστό από το .cases παραπάνω, που κρατά ΔΥΟ εικόνες ανά περιστατικό (_vas_before/_vas_after) και ζει στην αρχική. Εδώ το αρχείο είναι ένα και περιέχει ήδη ολόκληρο το πριν/μετά. Καμία κορνίζα, κανένα border, κανένα eyebrow: η παραδομένη εικόνα κουβαλά δικό της χρυσό πλαίσιο και δική της τυπογραφία. Ό,τι βάλουμε γύρω της γίνεται δεύτερο πλαίσιο γύρω από πρώτο. ΤΡΕΙΣ στήλες, μετρημένο και όχι υποτιθέμενο: στα 1320px το πλακίδιο βγαίνει 408px, άρα το κάθε μισό του σύνθετου 204px — αρκετά για να διαβαστεί το πριν/μετά. Δοκιμάστηκαν πρώτα δύο στήλες (626px το πλακίδιο) και ήταν χειρότερες για τον λόγο που μετράει εδώ: με έξι περιστατικά η ενότητα γινόταν έξι αφίσες σε ατέλειωτο scroll, και ο χρυσός του παραδομένου πλαισίου κυριαρχούσε στη σελίδα. Στις τρεις στήλες διαβάζεται ως φύλλο επαφής κλινικού αρχείου — που είναι και ο ρυθμός των υπόλοιπων πλεγμάτων του θέματος. */ .pcases{ display:grid; gap:clamp(1rem,2.2vw,1.75rem); grid-template-columns:repeat(3,minmax(0,1fr)); } /* Η καρτέλα δανείζεται τον ΣΚΕΛΕΤΟ ενός post — κεφαλίδα με λογαριασμό, τετράγωνη εικόνα, υποσημείωση — χωρίς να αντιγράφει τα χρώματα της Meta. Στόχος είναι να αναγνωρίσει ο επισκέπτης τη φόρμα, όχι να νομίσει ότι βλέπει το ίδιο το Instagram μέσα στη σελίδα. Γι' αυτό ο σκελετός μένει στα tokens του site. */ .pcase{ margin:0; } .pcase-in{ display:flex; flex-direction:column; background:var(--raised); border:1px solid var(--line); color:inherit; text-decoration:none; transition:border-color .2s; } a.pcase-in:hover{ border-color:var(--bone-dim); } a.pcase-in:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; } .pcase-top{ display:flex; align-items:center; gap:.5rem; padding:.7rem .85rem; } .pcase-ig{ width:1rem; height:1rem; flex:none; fill:var(--bone); } .pcase-who{ font-size:.72rem; letter-spacing:.06em; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } a.pcase-in:hover .pcase-who{ color:var(--ink); } .pcase-in img{ /* ΤΟ ΠΛΑΚΙΔΙΟ ΠΑΙΡΝΕΙ ΤΟ ΣΧΗΜΑ ΤΗΣ ΕΙΚΟΝΑΣ, δεν της το επιβάλλει. Εδώ ήταν aspect-ratio:1/1 με object-fit:contain, γραμμένο πάνω στην πεποίθηση ότι τα σύνθετα είναι σχεδόν τετράγωνα (0,86–1,07). Δεν είναι: 6 από τα 24 είναι κατακόρυφες αφίσες 1013×1801 (λόγος 0,56) — λογότυπο και τίτλος πάνω, ΠΡΙΝ/ΜΕΤΑ στη μέση, τηλέφωνα κάτω. Και το τετράγωνο δεν ερχόταν από εδώ: το parts/peristatika.php ζητούσε το μέγεθος `vasalos-case`, που ο πυρήνας κόβει σκληρά σε 900×900 από το κέντρο. Στις έξι αφίσες αυτό έτρωγε το 22% πάνω και το 22% κάτω — τον τίτλο και τα μισά «ΜΕΤΑ». Το contain δεν είχε τι να σώσει: το αρχείο έφτανε εδώ ήδη κομμένο, ακριβώς τετράγωνο. Τώρα σερβίρεται το `large` (χωρίς κόψιμο) και το πλακίδιο ακολουθεί. Το πλέγμα βγαίνει ανισοϋψές: οι έξι αφίσες γίνονται ψηλές κάρτες. Αυτό είναι το τίμημα, και είναι μικρότερο από το να λείπει το μισό αποτέλεσμα — απόφαση του ιατρού, 29 Αυγούστου 2026. Το height:auto ΔΕΝ είναι διακοσμητικό: η wp_get_attachment_image() τυπώνει height ως attribute, και χωρίς αυτό το ύψος του αρχείου είναι ήδη οριστικό. Τα δύο attributes (width/height) δίνουν στον φυλλομετρητή τον λόγο εκ των προτέρων, οπότε η σελίδα δεν αναπηδά στη φόρτωση χωρίς να χρειάζεται aspect-ratio εδώ. */ width:100%; height:auto; display:block; background:var(--sunken); } .pcase-go{ padding:.65rem .85rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); } a.pcase-in:hover .pcase-go{ color:var(--bone); } /* --- chips --- */ .chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; } .chip{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; padding:.55rem 1rem; border:1px solid var(--line); color:var(--muted); cursor:pointer; background:none; font-family:inherit; transition:color .2s, border-color .2s; } .chip:hover{ color:var(--ink); border-color:var(--line-2); } .chip.on{ color:var(--bone); border-color:var(--bone-dim); } /* --- clinics --- */ .clinics{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); } .clinic{ background:var(--raised); padding:0; display:flex; flex-direction:column; } .clinic .plate{ aspect-ratio:16/10; } .clinic .cbody{ padding:2rem 2rem 2.4rem; display:flex; flex-direction:column; gap:.9rem; } .clinic dl{ margin:0; display:grid; grid-template-columns:7.5rem 1fr; gap:.45rem 1rem; font-size:.9rem; } .clinic dt{ color:var(--muted); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding-top:.18rem; } .clinic dd{ margin:0; color:var(--ink-2); } /* --- facts table (σελίδα επέμβασης) --- */ .facts{ border-top:1px solid var(--line); } .facts div{ display:grid; grid-template-columns:minmax(9rem,14rem) 1fr; gap:1.5rem; padding:1.05rem 0; border-bottom:1px solid var(--line); } .facts dt{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); padding-top:.2rem; } .facts dd{ margin:0; color:var(--ink); font-size:1.02rem; } /* --- fit / no-fit --- */ .fit{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); } /* --raised και όχι --ground: τα πλακίδια πρέπει να διαβάζονται ανεβασμένα ό,τι κι αν έχουν από κάτω τους, αφού η ενότητα-γονιός εναλλάσσεται. */ .fit > div{ background:var(--raised); padding:2rem; } .fit ul{ margin:1rem 0 0; padding:0 0 0 1.1rem; display:flex; flex-direction:column; gap:.6rem; } .fit li{ color:var(--ink-2); font-size:.95rem; } .fit li::marker{ color:var(--bone-dim); } .fit .no li::marker{ color:var(--muted); } /* --- timeline (πραγματική σειρά = φέρει πληροφορία) --- */ .tl{ list-style:none; margin:0; padding:0; } .tl li{ display:grid; grid-template-columns:minmax(6rem,8rem) 1fr; gap:1.6rem; padding:1.4rem 0; border-top:1px solid var(--line); } .tl li:last-child{ border-bottom:1px solid var(--line); } .tl .t{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); padding-top:.25rem; } .tl .d h4{ font-family:var(--serif); margin-bottom:.35rem; } .tl .d p{ color:var(--ink-2); font-size:.93rem; } /* --- faq / qna: κοινό accordion πρότυπο. Το .qna είναι το ίδιο σχήμα εφαρμοσμένο στο σώμα του «Τι είναι στην πράξη» (page-epemvasi.php) — κάθε H2/H3 του παλιού/νέου κειμένου γίνεται πτυσσόμενη ενότητα αντί για έναν αδιάκοπο τοίχο κειμένου. --- */ .faq,.qna,.pgroups{ border-top:1px solid var(--line); } .faq details,.qna details,.pgroups details{ border-bottom:1px solid var(--line); } .faq summary,.qna summary,.pgroups summary{ cursor:pointer; padding:1.3rem 2.5rem 1.3rem 0; position:relative; font-family:var(--serif); font-size:1.1rem; list-style:none; } .faq summary::-webkit-details-marker,.qna summary::-webkit-details-marker,.pgroups summary::-webkit-details-marker{ display:none; } .faq summary::after,.qna summary::after,.pgroups summary::after{ content:"+"; position:absolute; right:.4rem; top:1.25rem; color:var(--bone); font-family:var(--sans); font-size:1.1rem; } .faq details[open] summary::after,.qna details[open] summary::after,.pgroups details[open] summary::after{ content:"–"; } .faq .ans{ padding:0 0 1.5rem; color:var(--ink-2); max-width:36em; font-size:.96rem; } .qna .ans{ padding:0 0 1.6rem; max-width:none; } .qna .ans > :first-child{ margin-top:0; } /* Το πλέγμα φωτογραφιών χρειάζεται μόνο απόσταση από κάτω πριν το επόμενο όνομα της λίστας — το summary πάνω του δίνει ήδη τη δική του. */ .pgroups .pcases{ padding:0 0 1.75rem; } /* --- procedure index --- */ .pgroup{ margin-top:3.5rem; } .pgroup > .eyebrow{ padding-bottom:1.1rem; border-bottom:1px solid var(--line-2); } .plist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1px; background:var(--line); } .pitem{ background:var(--raised); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.4rem; transition:background .3s; } .pitem:hover{ background:var(--raised-2); } .pitem .n{ font-family:var(--serif); font-size:1.16rem; } /* Τρεις γραμμές και τέλος. ΔΙΚΛΕΙΔΑ, όχι σχεδιαστική επιλογή: το .plist είναι grid, άρα κάθε σειρά ψηλώνει όσο το πιο φλύαρο πλακίδιό της — ένα lede 728 χαρακτήρων (η «Θεραπεία για ραγάδες», πριν την επιμέλεια) τέντωνε τους γείτονές του στα 600px και μαζί τους τις φωτογραφίες τους. Τα ίδια τα κείμενα κρατιούνται πλέον στους 70–120 χαρακτήρες από το content/keimena.mjs· αυτό εδώ είναι το δίχτυ για ό,τι γραφτεί αργότερα κατευθείαν στο meta box της σελίδας, όπου κανένας έλεγχος δεν φτάνει. */ .pitem .x{ font-size:.85rem; color:var(--muted); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } .pitem:hover .n{ color:var(--bone); } /* --- η φωτογραφία της επέμβασης ως φόντο πλακιδίου (parts/pitem.php) --- Η εικόνα μπαίνει ως και ΟΧΙ ως background-image. Οπτικά ταυτόσημο, αλλά το ευρετήριο δείχνει 52 πλακίδια σε μία σελίδα και μόνο το
δέχεται loading="lazy": με background-image το κινητό θα κατέβαζε και τα 52 αρχεία πριν ζωγραφίσει την πρώτη οθόνη. */ .pitem{ position:relative; overflow:hidden; isolation:isolate; } .pitem-shot{ min-height:210px; justify-content:flex-end; } .pitem-bg{ position:absolute; inset:0; z-index:0; display:block; } /* Το --pitem-focus το γράφει το parts/pitem.php μόνο για τις δύο επεμβάσεις που το χρειάζονται (VASALOS_TILE_FOCUS, inc/setup.php). Η σειρά μένει πάντα κατακόρυφα στο κέντρο: το `vasalos-tile` είναι ήδη κομμένο στα 800×560 και ό,τι ήταν να χαθεί από πάνω και από κάτω χάθηκε στον server — εδώ μένει να μετακινηθεί μόνο ο οριζόντιος άξονας. */ .pitem-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pitem-focus,50%) 50%; transition:transform .7s cubic-bezier(.2,.7,.3,1); } /* Το σκίαστρο. Οι τιμές δεν είναι διακοσμητικές — είναι το όριο κάτω από το οποίο το κείμενο δεν διαβάζεται. Χειρότερη περίπτωση, stock φωτογραφία με λευκό φόντο (πολλά από τα 43 αρχεία είναι ακριβώς αυτό). Το σκίαστρο μένει στο παλιό near-black επίτηδες — είναι πέπλο πάνω σε φωτογραφία, όχι επιφάνεια της σελίδας, και η δουλειά του είναι να σβήνει το άσπρο. Με τη νέα κλίμακα μελανιού οι λόγοι ανέβηκαν: .94 στη βάση → --ink-2 πάνω σε #191B1C = 10.3:1 (το lede, ήταν 9.1) .82 στη ζώνη του τίτλου → --ink πάνω σε #36383A = 8.8:1 (ήταν 9.8) Και τα δύο περνούν άνετα το 4.5:1 του WCAG 1.4.3. Με το --muted που κρατούν τα πλακίδια χωρίς φωτογραφία ο λόγος είναι πλέον 6.1:1 (ήταν 4.8:1, οριακό) — το lede μένει σε --ink-2 εδώ για τον ίδιο λόγο. */ .pitem-shot::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(10,12,13,.94) 0%, rgba(10,12,13,.82) 38%, rgba(10,12,13,.58) 72%, rgba(10,12,13,.44) 100%); } .pitem-shot .n, .pitem-shot .x{ position:relative; z-index:2; } .pitem-shot .x{ color:var(--ink-2); } .pitem-shot:hover .pitem-bg img{ transform:scale(1.045); } /* Χωρίς φωτογραφία: οι ίδιες τέσσερις κλίσεις που φοράνε τα .plate, ώστε το πλακίδιο να μη διαβάζεται ως σπασμένο δίπλα σε γείτονες που έχουν εικόνα. */ .pitem-plain.v1{ background: radial-gradient(120% 90% at 25% 8%, rgba(203,187,164,.10), transparent 58%), linear-gradient(168deg,#232829 0%,#14181A 55%,#1A1F21 100%); } .pitem-plain.v2{ background: radial-gradient(110% 85% at 80% 16%, rgba(203,187,164,.08), transparent 55%), linear-gradient(202deg,#21262A 0%,#14181A 60%,#1F2427 100%); } .pitem-plain.v3{ background: radial-gradient(130% 100% at 50% 108%, rgba(127,137,135,.15), transparent 62%), linear-gradient(152deg,#1D2326 0%,#12161A 50%,#232829 100%); } .pitem-plain.v4{ background: radial-gradient(100% 80% at 12% 92%, rgba(203,187,164,.09), transparent 60%), linear-gradient(186deg,#262B2D 0%,#14181A 58%,#1A1F21 100%); } /* --- cv timeline (Ο ιατρός) --- */ .cv{ list-style:none; margin:0; padding:0; } .cv li{ display:grid; grid-template-columns:minmax(5rem,7rem) 1fr; gap:1.6rem; padding:1.15rem 0; border-bottom:1px solid var(--line); } .cv .yr{ color:var(--bone-dim); font-size:.86rem; font-variant-numeric:tabular-nums; } .cv .ev{ color:var(--ink-2); font-size:.97rem; } .cv .ev strong{ color:var(--ink); font-weight:600; } .cv .ev small{ display:block; font-family:var(--sans); font-size:.84rem; color:var(--muted); margin-top:.15rem; } /* --- ζώνη συνεργαζόμενων νοσοκομείων (parts/nosokomeia.php) --- ΤΑ ΑΡΧΕΙΑ ΕΙΝΑΙ ΗΔΗ ΛΕΥΚΑ. Καμία μετατροπή χρώματος εδώ — ούτε grayscale, ούτε invert, ούτε brightness(0). Το προηγούμενο σχέδιο έδειχνε τα λογότυπα στα χρώματά τους πάνω σε ανοιχτό πλακίδιο· ο ιατρός ζήτησε λευκά μονόχρωμα, και η μετατροπή έγινε ΜΙΑ ΦΟΡΑ στο αρχείο (tools/nosokomeia-logos.py). Με CSS filter θα ήταν αδύνατη: το ένα από τα έξι λογότυπα ήταν JPG με αδιαφανές λευκό φόντο, και κάθε filter θα το έδειχνε ως λευκό ορθογώνιο. Η ΔΙΑΦΑΝΕΙΑ ΕΙΝΑΙ Ο ΤΟΝΟΣ. Καθαρό λευκό στο 100% πάνω στο --sunken χτυπά πιο δυνατά από τις επικεφαλίδες της ίδιας σελίδας (--ink, #DCE0DF): έξι σήματα τρίτων θα ήταν το φωτεινότερο πράγμα στο υποσέλιδο. Το .62 τα φέρνει στην περιοχή του --muted, όπου ανήκουν. */ .nosok-vp{ overflow:hidden; } .nosok-track{ display:flex; } .nosok .nosok-row{ list-style:none; margin:0; padding:0; display:flex; flex-direction:row; align-items:center; gap:clamp(2.2rem,4.5vw,4.2rem); } .nosok-logo{ height:clamp(24px,3.2vw,38px); width:auto; opacity:.62; transition:opacity .35s ease; } .nosok:hover .nosok-logo{ opacity:.85; } /* --- η κυλιόμενη εκδοχή (υποσέλιδο) --- ΤΟ -50% ΔΕΝ ΕΙΝΑΙ ΑΥΘΑΙΡΕΤΟ. Η λωρίδα κουβαλά δύο ΤΑΥΤΟΣΗΜΕΣ σειρές, οπότε το μισό πλάτος της είναι ακριβώς μία σειρά: το τέλος του κύκλου πέφτει πάνω στην αρχή του και η ραφή δεν φαίνεται ποτέ. Με μία σειρά θα άνοιγε κενό στο τέλος, με σταθερά pixel θα έσπαγε σε κάθε πλάτος οθόνης. Το padding-inline-end στη σειρά είναι η ΠΡΟΫΠΟΘΕΣΗ αυτού του -50%: χωρίς αυτό οι δύο σειρές κολλάνε μεταξύ τους και το τελευταίο λογότυπο ακουμπά το πρώτο, ενώ όλα τα άλλα έχουν ανάσα. */ .nosok-run .nosok-track{ width:max-content; animation:nosok-run 48s linear infinite; } .nosok-run .nosok-row{ flex:0 0 auto; padding-inline-end:clamp(2.2rem,4.5vw,4.2rem); } .nosok-run:hover .nosok-track{ animation-play-state:paused; } @keyframes nosok-run{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* Σβήσιμο στις άκρες: χωρίς αυτό τα λογότυπα εμφανίζονται και χάνονται με κοφτή ακμή πάνω στο --sunken, σαν να τα κόβει αόρατο ψαλίδι. */ .nosok-run .nosok-vp{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } /* --- η ακίνητη εκδοχή (σελίδα «Ο ιατρός») --- */ .nosok:not(.nosok-run) .nosok-row{ flex-wrap:wrap; row-gap:2rem; } /* --- οι δύο ζώνες του υποσελίδου --- */ .foot-nosok{ max-width:var(--max); margin:3.5rem auto 0; padding-top:2.5rem; border-top:1px solid var(--line); } .foot-nosok h5{ text-align:center; margin-bottom:1.5rem; } /* --- η ίδια λωρίδα, στην αρχική, κάτω από τους αριθμούς --- Δεν είναι δεύτερο αντίγραφο: στην αρχική το footer.php παραλείπει τη ζώνη και τη δείχνει ΜΟΝΟ εδώ. Καμία γραμμή πάνω — τη δίνει ήδη το border-bottom των .stats· δεύτερη θα ήταν διπλή ραφή στο ίδιο σημείο. Το border-bottom κλείνει την ενότητα απέναντι στο λευκό κείμενο του «Πείτε μου γιατί είστε εδώ» από κάτω. */ .front-nosok{ padding:clamp(2.25rem,4.5vw,3.25rem) var(--pad); border-bottom:1px solid var(--line); } /* Η .eyebrow δεν δηλώνει γραμματοσειρά — δεν χρειαζόταν ποτέ, ζούσε πάντα σε
. Σε
κληρονομεί τη σερίφ του h1,h2,h3,h4 και η ετικέτα βγαίνει σερίφ κεφαλαία, μόνη της σε όλη τη σελίδα. */ .front-nosok h2{ font-family:var(--sans); text-align:center; margin:0 0 1.5rem; } /* Η περιοχή κάτω από τηλέφωνο και email. Δεν είναι σύνδεσμος και δεν πρέπει να μοιάζει με έναν: το --bone-dim τη βγάζει από τη στήλη των κλικαρίσιμων χωρίς να τη σβήνει. */ .foot .perioxes{ margin-top:.45rem; color:var(--bone-dim); font-size:.84rem; } /* --- κουμπιά προφίλ (parts/social.php) --- Η ειδικότητα .foot .social δεν είναι υπερβολή: το .foot ul παραπάνω ορίζει flex-direction:column για τις στήλες του υποσελίδου και θα στοίβαζε τους έξι κύκλους κάθετα. 44px επειδή τόσο είναι το ελάχιστο μέγεθος στόχου που μπορεί να πατήσει αξιόπιστα ένας αντίχειρας — το εικονίδιο μέσα είναι 19px, αλλά ο κύκλος που το κρατά δεν μικραίνει μαζί του. */ .foot .social{ list-style:none; margin:2.6rem auto 0; padding:0; max-width:var(--max); display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:.9rem; } .soc{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); color:var(--muted); transition:color .3s ease, border-color .3s ease, transform .3s ease; } .soc svg{ display:block; width:19px; height:19px; fill:currentColor; } .soc:hover,.soc:focus-visible{ color:var(--bone); border-color:var(--bone); transform:translateY(-2px); } /* --- form --- */ /* --- η άγκυρα της φόρμας (parts/rantevou-form.php) --- Το .top είναι position:fixed, οπότε ένα σκέτο href="#rantevou" κυλά τη φόρμα ακριβώς από κάτω του: ο επισκέπτης προσγειώνεται με την επικεφαλίδα σκεπασμένη και τη φόρμα να ξεκινά από τη μέση. Το scroll-margin-top είναι το ύψος της κεφαλίδας συν ανάσα. Το smooth ζει στο html και ΟΧΙ μέσα σε @media (prefers-reduced-motion: no-preference) γραμμένο ανάποδα: το reduce block στο τέλος του αρχείου δεν αγγίζει το scroll-behavior — το *{animation/transition-duration} δεν έχει καμία ισχύ πάνω του — οπότε η επαναφορά δηλώνεται ρητά εκεί. */ html{ scroll-behavior:smooth; } #rantevou{ scroll-margin-top:6rem; } .form{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; max-width:42rem; } .field{ display:flex; flex-direction:column; gap:.45rem; } .field.full{ grid-column:1 / -1; } .field label{ font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); } .field input,.field select,.field textarea{ background:var(--raised); border:1px solid var(--line); color:var(--ink); font-family:inherit; font-size:.97rem; padding:.85rem .95rem; border-radius:0; transition:border-color .2s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--bone-dim); } .field textarea{ min-height:7rem; resize:vertical; } .check{ grid-column:1 / -1; display:flex; gap:.75rem; align-items:flex-start; font-size:.85rem; color:var(--muted); line-height:1.5; } .check input{ margin-top:.25rem; accent-color:var(--bone); } /* Ο σύνδεσμος της πολιτικής απορρήτου ήταν ΑΟΡΑΤΟΣ ως σύνδεσμος: το γενικό a{color:inherit;text-decoration:none} τον έκανε ίδιο χρώμα, ίδιο βάρος και χωρίς υπογράμμιση με την πρόταση γύρω του. Δεν φαινόταν μόνο επειδή το σπασμένο flex τον πετούσε σε δική του στήλη — μόλις η πρόταση ξαναέγινε πρόταση (βλ. parts/rantevou-form.php), ο σύνδεσμος εξαφανίστηκε μέσα της. Σε γραμμή συναίνεσης αυτό δεν είναι αισθητικό θέμα: ο επισκέπτης πρέπει να μπορεί να φτάσει στο κείμενο που δηλώνει ότι διάβασε. Υπογράμμιση όπως στο .byline a, και το χρώμα ανεβαίνει στο --bone μόνο στο hover, όπως κάνει η υπόλοιπη σελίδα. */ .check a{ text-decoration:underline; text-underline-offset:.18em; } .check a:hover{ color:var(--bone); } .quiet{ font-size:.85rem; color:var(--muted); border-left:1px solid var(--line-2); padding-left:1.1rem; max-width:32em; } /* ============================================================ FOOTER ============================================================ */ .foot{ border-top:1px solid var(--line); padding:clamp(3.5rem,6vw,5.5rem) var(--pad) 2rem; background:var(--sunken); } .foot-grid{ max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; } /* Η δεύτερη φωτογραφία του ιατρού, πάνω από το όνομα — η υπογραφή του υποσελίδου. ΔΕΝ είναι .plate, παρότι είναι φωτογραφία σε πλαίσιο: το .plate::after χαράζει εσωτερικό περίγραμμα σε απόσταση .6rem, που πάνω σε 110px αφήνει κουτάκι 91px μέσα σε κουτί 110px, και το .plate::before ρίχνει κόκκο φτιαγμένο για hero. Διακόσμηση σε κλίμακα που δεν υπάρχει εδώ. Μία γραμμή αρκεί, η ίδια που χωρίζει τις στήλες από πάνω. 110px και όχι μεγαλύτερο: το υποσέλιδο επαναλαμβάνεται σε κάθε σελίδα. Ένα πρόσωπο σε πλάτος στήλης θα τραβούσε κάθε φορά περισσότερο βλέμμα από τους συνδέσμους δίπλα του, που είναι ο λόγος ύπαρξης του πλέγματος. object-position:center top και όχι center: το αρχείο είναι ήδη κομμένο 4:5, άρα σήμερα το cover δεν κόβει τίποτα. Αλλά η φωτογραφία αλλάζει από τις Ρυθμίσεις χωρίς deploy — και σε οριζόντιο αρχείο το «center» θα έκοβε το κεφάλι στο μέτωπο. Το «top» κρατά το πρόσωπο σε κάθε αναλογία που μπορεί να ανέβει αύριο. */ .foot-portrait{ position:relative; overflow:hidden; width:110px; aspect-ratio:4/5; margin:0 0 1.5rem; border:1px solid var(--line-2); background:var(--ground); } .foot-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; } .foot h5{ margin:0 0 1.1rem; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); font-weight:600; } .foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; } .foot a,.foot li{ font-size:.9rem; color:var(--muted); } .foot a:hover{ color:var(--ink); } .foot-base{ max-width:var(--max); margin:3.5rem auto 0; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; font-size:.75rem; color:var(--muted); } .disclaimer{ max-width:44em; font-size:.78rem; color:var(--muted); line-height:1.55; } /* ============================================================ VIEWS / DRAFT PILL ============================================================ */ .view{ display:none; } .view.live{ display:block; animation:in .5s ease both; } @keyframes in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .pill{ position:fixed; right:1rem; bottom:1rem; z-index:95; display:flex; align-items:center; gap:.7rem; background:rgba(20,24,26,.94); backdrop-filter:blur(8px); border:1px solid var(--line-2); padding:.6rem .75rem .6rem 1rem; font-size:.7rem; letter-spacing:.06em; color:var(--ink-2); max-width:min(23rem,calc(100vw - 2rem)); } .pill b{ color:var(--bone); font-weight:600; letter-spacing:.14em; } .pill button{ background:none; border:0; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1; padding:.2rem .3rem; } .pill button:hover{ color:var(--ink); } .tbd{ color:var(--bone-dim); font-style:italic; } /* ============================================================ REVEAL + RESPONSIVE ============================================================ */ /* Ορατά by default. Κρύβονται μόνο αν το JS δηλώσει ότι μπορεί να τα εμφανίσει. */ :root.anim .rv{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); } :root.anim .rv.seen{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } /* Το scroll-behavior δεν είναι ούτε animation ούτε transition: το *{...duration} παραπάνω δεν το αγγίζει καθόλου. Χωρίς αυτή τη γραμμή το κουμπί της επέμβασης θα εξακολουθούσε να κυλά ομαλά ολόκληρη τη σελίδα σε όποιον έχει ζητήσει ρητά να μην κινείται τίποτα. */ html{ scroll-behavior:auto; } /* Δεύτερο δίχτυ ΜΕ πραγματικά δόντια: ίδια ειδικότητα (0,3,0) με το :root.anim .rv παραπάνω, άρα κερδίζει με τη σειρά δήλωσης αν ο φρουρός του site.js:85 προσθέσει ποτέ .anim ενώ ισχύει prefers-reduced-motion (π.χ. μελλοντικό bug στον έλεγχο JS). Το σκέτο `.rv{opacity:1}` (ειδικότητα 0,1,0) δεν είχε ποτέ δόντια εναντίον του :root.anim .rv — διαβαζόταν ως άμυνα χωρίς να είναι. */ :root.anim .rv{ opacity:1; transform:none; } /* Ίδιο δίχτυ για τον εναλλάκτη της φιλοσοφίας. Το *{transition-duration} παραπάνω σβήνει το fade, ΑΛΛΑ δεν αγγίζει το opacity:0 — αν το .rot βρεθεί ποτέ στη σελίδα ενώ ισχύει prefers-reduced-motion, ο ένας από τους δύο κανόνες θα ήταν απλώς αόρατος, για πάντα. Το grid-area:auto τους ξαναβάζει στη ροή: στοιβαγμένοι και οι δύο, ο ένας κάτω από τον άλλο. Το margin ξαναγράφεται με ειδικότητα 0,4,0 γιατί το .tenets.rot .tenet το μηδενίζει για τη στοίβαξη στο ίδιο κελί. */ .tenets.rot .tenet{ grid-area:auto; opacity:1; transform:none; pointer-events:auto; } .tenets.rot .tenet + .tenet{ margin-top:1.4rem; } /* Ίδιο δίχτυ, ίδιος λόγος, για τον εναλλάκτη των δύο ζωνών: αν το .rot βρεθεί ποτέ στη σελίδα ενώ ισχύει prefers-reduced-motion, ολόκληρη η ζώνη του στήθους —επικεφαλίδα, κείμενο, κουμπί, τέσσερις γραμμές— θα ήταν απλώς αόρατη, για πάντα. Το grid-area:auto τις ξαναβάζει στη ροή, τη μία κάτω από την άλλη· το gap του .bands τις κρατά χωριστές. */ .bands.rot > .band-grid{ grid-area:auto; opacity:1; transform:none; pointer-events:auto; } .rot-dots{ display:none; } /* Ίδιο δίχτυ για την κυλιόμενη ζώνη — και εδώ το *{animation-duration} ΔΕΝ αρκεί: δεν σταματά το animation, το τερματίζει ακαριαία. Η λωρίδα θα κάθεται μόνιμα στο transform:translateX(-50%), δηλαδή θα δείχνει το ΑΝΤΙΓΡΑΦΟ (aria-hidden) αντί για την πραγματική σειρά. Το animation:none είναι η μόνη διατύπωση που την αφήνει στη θέση της. Και επειδή χωρίς κίνηση τα έξι λογότυπα δεν χωρούν σε μία γραμμή σε στενή οθόνη, η σειρά αναδιπλώνεται όπως στη σελίδα του ιατρού. */ .nosok-run .nosok-track{ animation:none; width:auto; } .nosok-run .nosok-row[aria-hidden="true"]{ display:none; } .nosok-run .nosok-row{ flex-wrap:wrap; row-gap:2rem; justify-content:center; padding-inline-end:0; } .nosok-run .nosok-vp{ -webkit-mask-image:none; mask-image:none; } } /* --- ΤΡΕΙΣ ΖΩΝΕΣ, ΟΧΙ ΔΥΟ --- Ήταν ένα μπλοκ στα 1080px που έκανε ΟΛΑ όσα ακολουθούν ταυτόχρονα: έκρυβε την πλοήγηση, διέλυε το δίστηλο hero και ίσιωνε κάθε πλέγμα σε μία στήλη. Το όριο των 1080 δεν είναι όμως το όριο του κινητού — είναι ακριβώς το πλάτος του iPad 10.2" σε landscape (1080×810), και δίπλα του κάθεται το iPad 9.7"/Air (1024×768). Δηλαδή τα δύο πιο κοινά tablet, κρατημένα οριζόντια, έπαιρναν layout τηλεφώνου: το πορτραίτο έφευγε κάτω από το πρώτο κάδρο, το μισό πλάτος έμενε άδειο μαύρο, και η πλοήγηση κρυβόταν πίσω από burger έχοντας 294px περίσσευμα. (Αναφέρθηκε από τον ιατρό, Σεπτέμβριος 2026, με φωτογραφία οθόνης.) Τώρα κάθε όριο δηλώνει τον δικό του λόγο: 1080 — πυκνότητα πλακιδίων (υποσέλιδο, περιστατικά) 900 — εκεί που η στήλη κειμένου του hero πέφτει κάτω από ~380px 760 — εκεί που σήμα + πλοήγηση + κουμπί δεν χωρούν πια σε μία σειρά Οι μετρήσεις είναι πραγματικές, από το ζωντανό site: σήμα 197px, πλοήγηση 292px (τρία λεκτικά), κουμπί 107px. Στα 768px μένουν 40px ανάμεσα σε κάθε ζευγάρι — άνετα. ΑΝ ΠΡΟΣΤΕΘΕΙ ΤΕΤΑΡΤΟ ΛΕΚΤΙΚΟ στην πλοήγηση (~+120px), το 760 πρέπει να ανέβει αναλόγως. */ @media (max-width:1080px){ /* 3px. Τόσο έλειπαν: τα δύο κουμπιά του hero θέλουν 430px (197+221+12) και η στήλη τους δίνει 427. Το flex-wrap τα έριχνε το ένα κάτω από το άλλο, που διαβάζεται ως λάθος και όχι ως επιλογή. Λιγότερο περιθώριο μέσα στο κουμπί κερδίζει 20px — το λεκτικό δεν αγγίζει το πλαίσιο. Κάτω από τα 560 ο δικός τους κανόνας τα κάνει ούτως ή άλλως ολόκληρου πλάτους. */ .hero-copy .btn{ padding-inline:1.5rem; } .foot-grid{ grid-template-columns:1fr 1fr; } /* Δύο στήλες στο ενδιάμεσο: κάτω από τα 1080px οι τρεις στήλες ρίχνουν το κάθε μισό του σύνθετου κάτω από τα 160px. */ .pcases{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Κάτω από εδώ το δίστηλο δεν αξίζει πια: στα 900px η στήλη κειμένου του hero βγαίνει 473px μείον τα δύο περιθώρια, δηλαδή ~383px — το όνομα στα 41px χωράει ακόμη ακέραιο. Πιο κάτω αρχίζει να σπάει. */ @media (max-width:900px){ .hero{ grid-template-columns:1fr; min-height:0; } .hero-copy{ padding-top:7.5rem; } /* ΟΧΙ σκέτο 58vh. Σε μονή στήλη το πλαίσιο παίρνει όλο το πλάτος, οπότε το ύψος του ορίζει την αναλογία: σε landscape 880×560 το 58vh έδινε 325px ύψος για 865px πλάτος (2.66:1) πάνω σε φωτογραφία 1254×1050 (1.19:1) — το object-fit:cover έκοβε κάθετα, δηλαδή έκοβε το κεφάλι του ιατρού. Το 75vw είναι το δάπεδο που κρατά το πλαίσιο ποτέ πιο πλακουτσωτό από 4:3 (η αναλογία και του vasalos-plate, 1400×1050). Σε ψηλή οθόνη κερδίζει το 58vh και το κινητό μένει ακριβώς όπως ήταν — 375×490 στα 390px πλάτος. */ .hero-plate{ min-height:max(58vh, 75vw); } /* Μονή στήλη: η φωτογραφία δεν είναι πια δίπλα στο κείμενο αλλά από κάτω του, οπότε η ραφή που πρέπει να σβήσει είναι η ΠΑΝΩ ακμή. Το ίδιο ντεγκραντέ, στραμμένο 90°. */ .hero-plate::after{ background:linear-gradient( to bottom, rgba(12,15,16,1) 0%, rgba(12,15,16,.55) 5%, rgba(12,15,16,0) 12% ); } .doors{ grid-template-columns:1fr; } /* Το .door .note{max-height:6rem;opacity:1} έφυγε από εδώ: ήταν το μπάλωμα που επανέφερε στο κινητό ό,τι έκρυβε το hover στο desktop. Τώρα το .note είναι ορατό εξαρχής παντού και το μπάλωμα περισσεύει. */ .door{ min-height:0; } .band-grid{ grid-template-columns:1fr; } .content-grid,.content-grid--profile{ grid-template-columns:minmax(0,1fr); } .clinics,.fit,.form{ grid-template-columns:1fr; } } /* Η πλοήγηση κρύβεται μόνο όταν πραγματικά δεν χωράει. */ @media (max-width:760px){ .nav{ display:none; } .burger{ display:block; } } @media (max-width:560px){ body{ font-size:16px; } h1{ font-size:clamp(2rem,10vw,2.4rem); overflow-wrap:anywhere; } /* Μονή στήλη: 52 πλακίδια × 210px είναι σελίδα που δεν τελειώνει ποτέ με τον αντίχειρα. Χαμηλότερο πλακίδιο, ίδιο σκίαστρο. */ .pitem-shot{ min-height:158px; } .facts div,.tl li,.cv li,.stages li{ grid-template-columns:1fr; gap:.35rem; } /* «Χειρουργικές επεμβάσεις» σε μισή οθόνη τηλεφώνου, με .22em letter-spacing, σπάει σε τρεις γραμμές. Καλύτερα ο ένας κάτω από τον άλλο. */ .stats{ grid-template-columns:1fr; } .stat + .stat{ border-left:0; border-top:1px solid var(--line); } /* Μονή στήλη: σε δύο στήλες πάνω σε τηλέφωνο, το κάθε μισό του σύνθετου πέφτει κάτω από τα 90px — το πριν/μετά γίνεται δύο αδιάκριτες κηλίδες, δηλαδή η ενότητα χάνει τον λόγο της. */ .pcases{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr; } .cta-top{ display:none; } .rail-head{ flex-direction:column; align-items:stretch; } .rail-head .btn{ width:100%; max-width:100%; padding-inline:1rem; text-align:center; } .btn-row{ width:100%; } .btn-row .btn{ flex:0 0 100%; width:100%; max-width:100%; padding-inline:1rem; text-align:center; } } /* ΕΔΩ ΗΤΑΝ ΤΟ @media (max-width:340px){ .mark .sub{display:none} }, που έκρυβε την ειδικότητα στα πολύ στενά τηλέφωνα για να μη στριμώχνει το κουμπί του μενού. Δεν χρειάζεται πια: η ειδικότητα έφυγε από την κεφαλίδα εντελώς, και το σήμα πιάνει 190px στα 320px. */ /* Υπογραφή άρθρου: ο συγγραφέας και η φρεσκάδα είναι μέρος της αξιοπιστίας ενός κλινικού κειμένου, όχι μεταδεδομένα σε υποσημείωση. */ .byline { margin-top: 1.25rem; font-size: .9rem; opacity: .8; } .byline a { text-decoration: underline; }