/* ═══════════════════════════════════════════════════════════════ GLD SYSTEMS — σχεδιαστικό σύστημα «Κλινικό Ανθρακί» Η παλέτα ΔΕΝ είναι επινοημένη: προέρχεται από το ίδιο το επίσημο έντυπο της εταιρείας (Presentation Dermaqual, εξώφυλλο/οπισθόφυλλο): #444141 το ανθρακί φόντο πάνω στο οποίο κάθεται το λογότυπο #ED1C24 το κόκκινο τετράγωνο μέσα στο «E» του SYSTEMS #FFFFFF το wordmark Τυπογραφία: Manrope + Inter. Και οι δύο έχουν επιβεβαιωμένη ελληνική κάλυψη στο Google Fonts (unicode-range greek) — ελέγχθηκε. ΚΑΝΟΝΑΣ: καμία text-transform:uppercase σε ελληνικό κείμενο. Χάνει τους τόνους. Όπου χρειάζονται κεφαλαία, γράφονται κεφαλαία. ═══════════════════════════════════════════════════════════════ */ /* ΜΕΤΡΗΜΕΝΗ ΑΝΤΙΘΕΣΗ, ΟΧΙ ΕΚΤΙΜΩΜΕΝΗ. Τέσσερις δείκτες άλλαξαν επειδή υπολογίστηκε ο λόγος αντίθεσης πάνω στην ΠΡΑΓΜΑΤΙΚΗ επιφάνεια που έχουν από κάτω — που δεν είναι πάντα το φόντο της σελίδας: --ink-3 #7C828C → #868C96 Πάνω στη σελίδα (--bg) μετρούσε 4,85:1 και περνούσε. Αλλά το ΙΔΙΟ χρώμα γράφει και την περιγραφή μέσα στην κάρτα (--panel, ανοιχτότερο φόντο): εκεί μετρήθηκε 4,27:1 — κάτω από το 4,5:1. Τώρα 4,94:1 στην κάρτα, 4,54:1 και στην κάρτα σε hover (--panel-2), 5,59:1 στη σελίδα. --line-3 (νέος) #60666F Το --line-2 (#383D45) έντυνε ΠΕΡΙΓΡΑΜΜΑΤΑ ΣΤΟΙΧΕΙΩΝ ΕΛΕΓΧΟΥ — πεδία φόρμας, chip φίλτρων, ghost κουμπιά, burger. Μετρήθηκε 1,72:1, έναντι ορίου 3:1 (WCAG 1.4.11). Το --line-2 μένει ως ΔΙΑΚΟΣΜΗΤΙΚΗ γραμμή (διαχωριστικά), όπου δεν ισχύει το όριο. Η ΠΡΩΤΗ ΤΙΜΗ ΗΤΑΝ ΛΑΘΟΣ: υπολογίστηκε πάνω στο φόντο της ΣΕΛΙΔΑΣ (3,24:1) — αλλά τα chip των σειρών κάθονται μέσα σε ΚΑΡΤΑ (--panel), που είναι ανοιχτότερη, και εκεί μετρήθηκαν 2,86:1. Κάθε δείκτης πρέπει να μετριέται πάνω στην πιο ανοιχτή επιφάνεια όπου εμφανίζεται, όχι στη συνηθέστερη. Το #6A707A δίνει 3,32:1 στην κάρτα και 3,55:1 στη σελίδα. --red-btn / --red-btn-hi Λευκά γράμματα πάνω στο εταιρικό #ED1C24 δίνουν 4,38:1. Το κείμενο των κουμπιών είναι 12,96–14,4px έντονο, δηλαδή ΔΕΝ πιάνει το όριο «μεγάλο κείμενο» (18,66px έντονο) και άρα θέλει 4,5:1. Το #D9141B δίνει 5,16:1 και είναι οπτικά το ίδιο κόκκινο. Στο hover ανεβαίνει σε #EA1219 (4,57:1) — δηλαδή ΑΚΡΙΒΩΣ το εταιρικό κόκκινο. Το #ED1C24 μένει άθικτο παντού όπου δεν κουβαλά κείμενο: τετράγωνο του eyebrow, κουκκίδες λίστας, λάμψη της ζώνης CTA, υπογράμμιση συνδέσμων. */ :root{ /* ΦΩΤΕΙΝΟ ΘΕΜΑ (v0.10.0) — απόφαση πελάτη 18/09: «λευκό φόντο, μαύρα γράμματα, κόκκινο για τονισμό, διακριτικές γκρι αποχρώσεις ώστε να μην είναι κατάλευκο». Μετρημένη αντίθεση WCAG σε ΚΑΘΕ επιφάνεια όπου κάθεται το κάθε χρώμα (η πιο σκούρα επιφάνεια είναι το --plate-2 #E6E8EB): --ink 17,96 λευκό · 16,61 --bg-2 · 14,63 --plate-2 --ink-2 8,52 · 7,88 · 6,94 --ink-3 5,53 · 5,11 · 4,50 ← το όριο, ΟΧΙ πιο ανοιχτό Οι ΕΠΙΦΑΝΕΙΕΣ είναι λευκές ή ψυχρό γκρι· το ανθρακί #444141 του εντύπου μένει ως --brand για τα λίγα σημεία-άγκυρες. */ --ink:#15171A; --ink-2:#474D56; --ink-3:#636973; --bg:#FFFFFF; --bg-2:#F5F6F8; --panel:#FFFFFF; --panel-2:#F1F2F4; --brand:#444141; --line:#E6E8EB; --line-2:#D6D9DE; --line-3:#8E949D; --red:#ED1C24; --red-hi:#C8111A; --red-btn:#D9141B; --red-btn-hi:#B80F17; /* ΤΟ ΣΗΜΑ ΚΑΙ ΤΟ ΚΕΙΜΕΝΟ ΔΕΝ ΜΠΟΡΟΥΝ ΝΑ ΕΙΝΑΙ ΤΟ ΙΔΙΟ ΚΟΚΚΙΝΟ (v0.8.2). Το --red είναι φτιαγμένο για ΕΠΙΦΑΝΕΙΕΣ (κουμπιά, τετραγωνάκια, γραμμές), όπου το όριο είναι 3:1. Ως ΚΕΙΜΕΝΟ πάνω στο --panel μετρήθηκε 3,77:1 και το όριο για 11,2px είναι 4,5:1 — αστοχία WCAG 1.4.3 στα «01/02/03» των τριών λόγων. Ίδια απόχρωση (357,7°) και ίδιος κορεσμός (0,853), μόνο φωτεινότητα 0,520 → 0,610· μετρημένο και στα τέσσερα φόντα του θέματος: --panel 4,62 · --bg-2 4,92 · --bg 5,23 · --panel-2 4,25 ΜΗΝ το βάλεις σε στοιχείο με φόντο --panel-2: εκεί δεν φτάνει. */ /* Κείμενο σε κόκκινο πάνω σε ανοιχτό φόντο: 5,91 λευκό · 4,82 --plate-2. */ --red-txt:#C8111A; --plate:#F4F5F7; --plate-2:#E6E8EB; --plate-ink:#15171A; /* Σκιά καρτών: στο φωτεινό θέμα το βάθος το δίνει σκιά, όχι φωτεινότητα. */ --shadow-1:0 1px 2px rgba(21,23,26,.05),0 2px 8px rgba(21,23,26,.05); --shadow-2:0 2px 4px rgba(21,23,26,.06),0 12px 28px rgba(21,23,26,.10); --r:14px; --r-lg:20px; --pad:clamp(20px,4vw,64px); --maxw:1240px; --f-display:"Manrope","Manrope Fallback",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --f-body:"Inter","Inter Fallback",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; /* ΤΟ ΘΕΜΑ ΕΙΝΑΙ ΣΚΟΤΕΙΝΟ ΚΑΙ Ο ΦΥΛΛΟΜΕΤΡΗΤΗΣ ΔΕΝ ΤΟ ΗΞΕΡΕ. Χωρίς color-scheme, ό,τι ζωγραφίζει ΤΟ ΛΕΙΤΟΥΡΓΙΚΟ και όχι το CSS βγαίνει φωτεινό: το ΥΠΟΧΡΕΩΤΙΚΟ κουτάκι συγκατάθεσης στην Επικοινωνία ήταν ΛΕΥΚΟ τετράγωνο πάνω σε σκοτεινή φόρμα, ακριβώς πάνω από το «Αποστολή» (μετρήθηκε accent-color:auto, color-scheme:normal). Μαζί διορθώνονται η μπάρα κύλισης, η λαβή αλλαγής μεγέθους του textarea, το αναδυόμενο του «ΙΔΙΟΤΗΤΑ» 46 από 46 pixel κρυμμένο στα 390px. Ο χρήστης πατούσε «επόμενο» στο πληκτρολόγιο και πληκτρολογούσε σε πεδίο που δεν έβλεπε. */ @media(max-width:700px),(max-height:500px){ html{scroll-padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))} } /* ΒΑΘΟΣ ΣΤΟ ΕΔΑΦΟΣ, ΣΕ ΤΡΙΑ ΣΤΡΩΜΑΤΑ. ⚠ ΤΟ background-color ΜΕΝΕΙ ΔΗΛΩΜΕΝΟ ΧΩΡΙΣΤΑ, ΔΕΝ ΓΙΝΕΤΑΙ shorthand: ο έλεγχος διαβάζει getComputedStyle(body).backgroundColor, και ένα `background:` shorthand με εικόνες θα κρατούσε μεν το χρώμα, αλλά κάθε μελλοντική προσθήκη στρώματος θα το έσβηνε σιωπηλά. ⚠ ΚΑΜΙΑ background-attachment:fixed: σε iOS Safari το fixed φόντο σε σελίδα 12.000px τρεμοπαίζει στην κύλιση. Τα ντεγκραντέ κάθονται στην ΚΟΡΥΦΗ της σελίδας (εκεί που είναι το βλέμμα στην πρώτη οθόνη) και ο κόκκος πλακώνεται. */ body{ margin:0;color:var(--ink); background-color:var(--bg); background-image: /* 1. φως από πάνω — η πρώτη οθόνη δεν είναι επίπεδη */ radial-gradient(1180px 640px at 50% -240px,rgba(214,217,222,.45),transparent 70%), /* 2. υπόνοια μάρκας στη γωνία, όχι κηλίδα */ radial-gradient(820px 560px at 103% -80px,rgba(237,28,36,.03),transparent 64%), none; background-repeat:no-repeat; background-size:auto; font-family:var(--f-body);font-size:16px;line-height:1.62; -webkit-font-smoothing:antialiased;overflow-x:hidden; /* Σε αφή, το πάτημα κάρτας άναβε το προεπιλεγμένο γκρι ορθογώνιο του Android/iOS πάνω από τη δική μας ανάδραση (.card:active{scale}). */ -webkit-tap-highlight-color:rgba(237,28,36,.16); } /* Η επιλογή κειμένου ήταν το μπλε του φυλλομετρητή — το μόνο χρώμα στη σελίδα που δεν ανήκε στη μάρκα. Το κόκκινο στο 30% πάνω στο --bg αφήνει το --ink στα 9,8:1, δηλαδή διαβάζεται καλύτερα από το προεπιλεγμένο. */ ::selection{background:rgba(237,28,36,.18);color:var(--ink)} /* ΠΛΕΓΜΑ ΟΡΓΑΝΟΥ — ΞΕΧΩΡΙΣΤΟ ΣΤΡΩΜΑ, ΓΙΑΤΙ ΠΡΕΠΕΙ ΝΑ ΣΒΗΝΕΙ. Ως στρώμα του body θα επαναλαμβανόταν σε 12.000px ύψος, δηλαδή ταπετσαρία. Εδώ είναι fixed, σβήνει προς τα κάτω και προς τα πλάγια, και ζει ΜΟΝΟ στο πάνω μέρος της οθόνης — υφή εκεί που κοιτάς, καθαρό εκεί που διαβάζεις. ⚠ z-index:-1 ΚΑΙ ΤΙΠΟΤΑ ΠΑΝΩ ΑΠΟ ΤΟ body ΜΕ transform/filter/opacity: οτιδήποτε από αυτά φτιάχνει πλαίσιο στοίβαξης και το ψευδοστοιχείο θα εξαφανιζόταν πίσω από το φόντο. Το background-color του body μένει ως έχει, οπότε η μέτρηση αντίθεσης (που διαβάζει CSS χρώμα) δεν αλλάζει. */ body::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:var(--grid);background-size:64px 64px; -webkit-mask-image:radial-gradient(120% 78% at 50% 0%,#000 0%,transparent 72%); mask-image:radial-gradient(120% 78% at 50% 0%,#000 0%,transparent 72%); } @media print{body::before{display:none}} /* Σε «αυξημένη αντίθεση» η διακόσμηση φεύγει: ο χρήστης ζήτησε καθαρότητα. */ @media(prefers-contrast:more){body::before{display:none}} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0} /* Δακτύλιος εστίασης ΔΙΠΛΟΣ: σκούρος μέσα (box-shadow), ανοιχτός έξω (outline). Ο μονός κόκκινος μετρήθηκε 2.31:1 πάνω στη ζώνη CTA (--brand #444141) — κάτω από το 3:1 του WCAG 1.4.11, και ακριβώς εκεί κάθονται τα δύο κουμπιά. Με τους δύο δακτυλίους η χειρότερη μέτρηση σε ΟΠΟΙΑΔΗΠΟΤΕ επιφάνεια του θέματος είναι 9.10:1: ό,τι επιφάνεια κι αν υπάρχει από κάτω, ο ένας από τους δύο δακτυλίους έχει πάντα αντίθεση. */ :focus-visible{ outline:2px solid var(--ink);outline-offset:2px;border-radius:3px; box-shadow:0 0 0 2px var(--bg); } .skip{position:absolute;left:-9999px} /* Η δεύτερη παράκαμψη οδηγεί στη μπάρα ενεργειών, που πάνω από 700px είναι display:none — σύνδεσμος προς το πουθενά. Κρύβεται μαζί της. */ .skip-actions{display:none} @media(max-width:700px){.skip-actions{display:inline}} .skip:focus{left:var(--pad);top:10px;z-index:200;background:var(--red);color:#fff;padding:10px 16px;border-radius:8px} /* ── τυπογραφία ────────────────────────────────────────────── */ /* text-wrap:balance — 78 από τις επικεφαλίδες 89 σελίδων άφηναν ΜΙΑ λέξη μόνη στην τελευταία γραμμή («…και προληπτική κρέμα / προσώπου»). Δεν προσθέτει γραμμές, μόνο τις ισοσταθμίζει· ο Chromium παύει να ισοσταθμίζει πάνω από ~6 γραμμές, οπότε οι ελάχιστες πολύ μακριές μένουν ως έχουν. */ h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.022em;line-height:1.12;margin:0; text-wrap:balance} h1{font-size:clamp(2.05rem,5.2vw,3.85rem);font-weight:800;letter-spacing:-.034em} h2{font-size:clamp(1.58rem,3.3vw,2.6rem);letter-spacing:-.028em} h3{font-size:clamp(1.1rem,1.7vw,1.4rem)} h4{font-size:1.02rem;font-weight:600;letter-spacing:-.01em} p{margin:0 0 1.05em} .lead{font-size:clamp(1.01rem,1.45vw,1.18rem);color:var(--ink-2);line-height:1.72;max-width:40.38em} .small{font-size:.855rem;line-height:1.6;color:var(--ink-3)} .muted{color:var(--ink-3)} /* eyebrow — το κείμενο γράφεται ΗΔΗ με κεφαλαία στο markup */ .eyebrow{ font-family:var(--f-display);font-size:.7rem;font-weight:700; letter-spacing:.19em;color:var(--ink-3); display:inline-flex;align-items:center;gap:.62em;margin:0 0 1.05rem; /* Ρητό, επειδή το «ΑΝΑΛΥΤΙΚΑ» είναι πλέον h2: χωρίς αυτό θα κληρονομούσε το line-height:1.12 του κανόνα h1..h4 και θα κουνούσε το κόκκινο τετραγωνάκι σε σχέση με τα υπόλοιπα eyebrow. */ line-height:1.62; } /* Το --eb επιτρέπει στο τετραγωνάκι να πάρει το χρώμα της σειράς (σελίδα προϊόντος). Χωρίς μεταβλητή έμενε πάντα κόκκινο, και δίπλα του υπήρχε ΔΕΥΤΕΡΟ σημάδι με το σωστό χρώμα — δύο δείκτες για το ίδιο πράγμα. */ .eyebrow::before{content:"";width:6px;height:6px;background:var(--eb,var(--red));flex:none} /* ── κέλυφος ───────────────────────────────────────────────── */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .section{padding-block:clamp(52px,7.5vw,110px)} .section-sm{padding-block:clamp(36px,5vw,68px)} /* ── πλοήγηση ──────────────────────────────────────────────── */ .nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92); backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .nav-in{max-width:var(--maxw);margin:0 auto;padding:15px var(--pad); display:flex;align-items:center;gap:clamp(12px,2.2vw,32px)} .brand{display:flex;align-items:center;gap:10px;flex:none} /* Το λογότυπο είναι στοιβαγμένο (GLD / γραμμή / SYSTEMS). Κάτω από ~40px το «SYSTEMS» γίνεται μουτζούρα, γι' αυτό η κεφαλίδα κρατά ύψος γι' αυτό. */ .brand img{height:44px;width:auto} .brand-txt{display:flex;flex-direction:column;line-height:1} .brand-txt b{font-family:var(--f-display);font-size:1.24rem;font-weight:800;letter-spacing:.02em} .brand-txt span{font-family:var(--f-display);font-size:.56rem;font-weight:700;letter-spacing:.34em;color:var(--ink-3);margin-top:3px} .brand-txt em{font-style:normal;color:var(--red)} .nav .nav-links{display:flex;gap:clamp(8px,1.4vw,20px);margin-inline-start:auto; align-items:center;list-style:none;margin-block:0;padding:0} .nav .nav-links a{font-family:var(--f-display);font-size:.81rem;font-weight:600;letter-spacing:.05em; color:var(--ink-2);padding:7px 2px;border-bottom:2px solid transparent; transition:color .18s,border-color .18s;white-space:nowrap;display:block} .nav .nav-links a:hover{color:var(--ink)} .nav .nav-links .current-menu-item>a,.nav .nav-links a.on{color:var(--ink);border-bottom-color:var(--red)} .nav-cta{font-family:var(--f-display);font-size:.81rem;font-weight:700; background:var(--red-btn);color:#fff;padding:9px 17px;border-radius:999px;white-space:nowrap; transition:background .18s,transform .18s;flex:none} .nav-cta:hover{background:var(--red-btn-hi);transform:translateY(-1px)} .burger{display:none;border:1px solid var(--line-3); border-radius:10px;padding:9px 11px;cursor:pointer;line-height:0} .burger span{display:block;width:17px;height:2px;background:var(--ink);margin:3px 0;transition:.2s} /* ── ΤΡΕΙΣ ΔΗΛΩΜΕΝΕΣ ΜΕΤΑΒΑΣΕΙΣ, ΔΥΟ ΝΕΚΡΕΣ ────────────────────── Μετρήθηκε ηρεμία vs κατάσταση σε κάθε χειριστήριο της κεφαλίδας: .nav-search δηλώνει color/border-color/background — αλλάζουν ΚΑΙ ΤΑ ΤΡΙΑ. ✓ .nav-cta δηλώνει background/transform — το transform ΔΕΝ εφαρμόζεται ποτέ, ενώ το αδελφό του .btn-red σηκώνεται translateY(-1px). Το ίδιο κουμπί, δύο συμπεριφορές, επειδή λείπει μία γραμμή. .burger span δηλώνει transition:.2s και οι τρεις γραμμές μετρήθηκαν ΤΑΥΤΟΣΗΜΕΣ ανοιχτό/κλειστό (transform none, opacity 1, y 28/36/44 και στις δύο καταστάσεις): το συρτάρι άνοιγε και το εικονίδιο έμενε τρεις γραμμές. Το aria-expanded ΗΤΑΝ ήδη σωστό από τη JavaScript — έλειπε μόνο ο κανόνας που το βλέπει, άρα μηδέν νέα JavaScript. Το βήμα είναι 8px, ΜΕΤΡΗΜΕΝΟ και όχι εικασμένο: γραμμή 2px + margin 3+3, κέντρα στα y=28/36/44. Με 5px οι γραμμές δεν θα συναντιόνταν. */ .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* Η υπογράμμιση ΔΕΝ κοστίζει διάταξη: το border-bottom:2px υπάρχει ήδη δεσμευμένο ως transparent σε κάθε σύνδεσμο — μόνο το χρώμα ανάβει. Γκρι στο πέρασμα, ΚΟΚΚΙΝΟ στην τρέχουσα σελίδα. ⚠ ΤΟ ΔΕΥΤΕΡΟ ΖΕΥΓΟΣ ΔΕΝ ΕΙΝΑΙ ΠΛΕΟΝΑΣΜΑ — ΜΕΤΡΗΘΗΚΕ. Υπολόγισα ότι ο κανόνας της τρέχουσας σελίδας θα κέρδιζε μόνος του και ΕΚΑΝΑ ΛΑΘΟΣ: οι δύο επιλογείς είναι ΙΣΟΒΑΘΜΟΙ (0,3,1 — η ψευδοκλάση :hover μετρά όσο μια κλάση, ακριβώς όπως το .current-menu-item), οπότε κέρδιζε ο τελευταίος γραμμένος, δηλαδή ο δικός μου. Μετρήθηκε ζωντανά: περνώντας πάνω από την τρέχουσα σελίδα η υπογράμμιση γύριζε από κόκκινο (237,28,36) σε γκρι (106,112,122) — ο δείκτης «είσαι εδώ» ΕΣΒΗΝΕ ακριβώς όταν ο επισκέπτης στόχευε εκεί. Η επαναβεβαίωση στο (0,4,1) τον κρατά. Στο συρτάρι του κινητού ο .nav-links.open a (0,4,1) κερδίζει το hover, άρα η αφή δεν κληρονομεί εφέ ποντικιού. */ .nav .nav-links a:hover{border-bottom-color:var(--line-3)} .nav .nav-links .current-menu-item>a:hover,.nav .nav-links a.on:hover{border-bottom-color:var(--red)} /* ── κουμπιά ───────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-display); font-weight:700;font-size:.9rem;padding:13px 24px;border-radius:999px; border:1px solid transparent;cursor:pointer;text-align:center; transition:background .18s,border-color .18s,color .18s,transform .18s} .btn-red{background:var(--red-btn);color:#fff} .btn-red:hover{background:var(--red-btn-hi);transform:translateY(-1px)} .btn-ghost{border-color:var(--line-3);color:var(--ink)} .btn-ghost:hover{border-color:var(--ink-3);background:var(--panel)} .btn .arw{transition:transform .18s} .btn:hover .arw{transform:translateX(3px)} /* ── ήρωας ─────────────────────────────────────────────────── */ .hero{position:relative;overflow:hidden;padding-block:clamp(44px,6.5vw,92px) clamp(44px,6.5vw,84px)} .hero::before{content:"";position:absolute;inset:-30% -8% auto auto;width:min(720px,84vw);aspect-ratio:1; background:radial-gradient(circle,rgba(237,28,36,.055),transparent 62%);filter:blur(30px);pointer-events:none} .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4.5vw,64px);align-items:center;position:relative} /* Ο ΡΥΘΜΟΣ ΗΤΑΝ ΑΝΑΠΟΔΟΣ. Μετρημένο ΜΕΛΑΝΙ (όχι πλαίσια) σε τέσσερα πλάτη: 390 → 27,0/21,5/25,5 · 768 → 28,5/24,5/35,5 · 1440 → 31,5/25,5/37,0 · 1920 → 32,5/25,5/37,0. Παντού eyebrow→h1 ΜΕΓΑΛΥΤΕΡΟ από h1→lead: η ετικέτα απέχει περισσότερο από τον τίτλο απ' ό,τι ο τίτλος από την παράγραφο, άρα διαβάζεται ως ξεχωριστό στοιχείο αντί για καπέλο του τίτλου. Αιτία: δύο ΔΙΑΦΟΡΕΤΙΚΕΣ σχέσεις είχαν και οι δύο την τιμή 1.05rem (γραμμή 209 και εδώ), χωρίς κανένα σχόλιο να την υπερασπίζεται. ΤΟ ΑΘΡΟΙΣΜΑ ΜΕΝΕΙ: desktop -1,6px, κινητό -0,3px — η πτυχή στα 360×780, που είναι ο λόγος ύπαρξης του μπλοκ στη γραμμή 1382, δεν κουνιέται. Το περιθώριο είναι ΣΧΕΣΗ ΔΙΑΤΑΞΗΣ, όχι ιδιότητα τύπου: το μέγεθος και το tracking του .eyebrow μένουν καθολικά, αλλιώς θα είχαμε δύο αλήθειες για το ίδιο στοιχείο σε 20+ σημεία. */ .hero .eyebrow{margin-bottom:.55rem} .hero h1{margin-bottom:1.45rem} /* ΜΟΝΟ ΒΑΡΟΣ, ΟΧΙ ΧΡΩΜΑ. Ήταν 300 + --ink-2 πάνω στο ΔΕΥΤΕΡΟ μισό: έσβηνε ακριβώς τη φράση που ξεχωρίζει την εταιρεία. Η αντιστροφή με το χρώμα μέσα δοκιμάστηκε και απορρίφθηκε — έσβηνε το «Μηχανήματα», δηλαδή το ουσιαστικό που σαρώνει ο γιατρός. Με σκέτο βάρος 400→800 η ιεραρχία ακούγεται και τα δύο μισά μένουν στο --ink. Ο άξονας της Manrope μετρήθηκε γραμμικός σε κάθε βήμα 200→800 (17,8px ανά 100 στα 200px), άρα το 400 είναι αληθινό βάρος και όχι συνθετικό. */ .hero h1 .soft{font-weight:400} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.85rem} /* ── ΛΩΡΙΔΑ ΟΝΟΜΑΤΩΝ ΠΙΣΩ ΑΠΟ ΤΟΝ ΗΡΩΑ ───────────────────────── ΓΙΑΤΙ ΟΧΙ Remotion/React. Το ζητούμενο εφέ είναι perspective + μία μετατόπιση. Το `@remotion/player` θα έφερνε React + ReactDOM + τη βιβλιοθήκη (εκατοντάδες KB) και θα έτρεχε ΣΥΝΕΧΗ βρόχο καρέ με useCurrentFrame() — για διακόσμηση, πάνω σε site που έχει σήμερα LCP 192ms/96ms και συνολικά 48KB χειρόγραφης JavaScript. Εδώ: 0 KB. Η ΚΙΝΗΣΗ ΕΙΝΑΙ transform, ΟΧΙ left/margin: μένει στον συνθέτη και δεν προκαλεί ανακατανομή σε κάθε καρέ. ΤΟ ΣΒΗΣΙΜΟ ΓΙΝΕΤΑΙ ΜΕ mask ΚΑΙ ΟΧΙ ΜΕ ΕΠΙΣΤΡΩΣΗ ΧΡΩΜΑΤΟΣ. Το πρωτότυπο σβήνει βάζοντας από πάνω βαθμίδες σε συμπαγές χρώμα φόντου. Εδώ το φόντο ΔΕΝ είναι συμπαγές — είναι δύο ακτινικές βαθμίδες συν το πλέγμα — οπότε επίστρωση σε σκέτο --bg θα έσβηνε και το βάθος που χτίστηκε στο v0.8.5. */ .hero-mq{position:absolute;inset:0;z-index:0;overflow:hidden; pointer-events:none;user-select:none;-webkit-user-select:none; perspective:1200px; -webkit-mask-image:radial-gradient(118% 88% at 50% 50%,#000 22%,transparent 76%); mask-image:radial-gradient(118% 88% at 50% 50%,#000 22%,transparent 76%)} .hero-mq-plane{position:absolute;top:50%;left:-12%;width:124%; display:flex;flex-direction:column;gap:.26em; transform:translateY(-50%) rotateX(8deg) rotateY(-28deg);transform-style:preserve-3d} .hero-mq-row{display:flex;width:max-content;white-space:nowrap; animation:gld-mq 104s linear infinite} /* ΕΝΑΛΛΑΞ ΚΑΤΕΥΘΥΝΣΗ ΚΑΙ ΤΑΧΥΤΗΤΑ. Με τρεις σειρές στην ίδια φορά και ταχύτητα, το επίπεδο διαβάζεται ως ΕΝΑ φύλλο που γλιστράει — η αίσθηση βάθους χάνεται. Οι διαφορετικοί χρόνοι δίνουν παράλλαξη. */ .hero-mq-row:nth-child(2){animation-duration:138s;animation-direction:reverse} .hero-mq-row:nth-child(3){animation-duration:119s} .hero-mq-row span{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em; font-size:clamp(24px,2.4vw,34px);line-height:1.06; color:rgba(21,23,26,.045)} @keyframes gld-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Το περιεχόμενο ΠΑΝΩ από τη λωρίδα. Χωρίς αυτό ο τίτλος μοιράζεται επίπεδο με κείμενο που κινείται, και η στοίχιση τρεμοπαίζει. */ .hero-grid{z-index:1} /* Ο χρήστης ζήτησε ακινησία — η λωρίδα μένει, σταματά. */ @media(prefers-reduced-motion:reduce){.hero-mq-row{animation:none}} @media(prefers-contrast:more){.hero-mq{display:none}} @media print{.hero-mq{display:none}} /* ── ΗΡΩΑΣ ΣΕΛΙΔΑΣ ΠΡΟΪΟΝΤΟΣ ────────────────────────────────── ΤΡΙΑ ΠΑΙΔΙΑ ΣΤΗ ΡΟΗ, ΔΥΟ ΣΤΗΛΕΣ ΣΤΗΝ ΟΘΟΝΗ. Στο τηλέφωνο διαβάζονται με τη σειρά του σήματος — σειρά, όνομα, ΕΙΚΟΝΑ, περιγραφή, κουμπί — γιατί σε κατάλογο καλλυντικών η συσκευασία είναι η ταυτότητα και ήταν στο y=699 σε οθόνη 390×844, δηλαδή κάτω από το τσάκισμα. Στον υπολογιστή τα δύο κείμενα ξανασμίγουν αριστερά και η εικόνα πιάνει ολόκληρη τη δεξιά στήλη. ΧΩΡΙΣ JavaScript, χωρίς διπλό σήμα. */ .hero-prod{row-gap:0} /* Υπότιτλος προϊόντος — κεφαλαία του πελάτη, ως επιγραφή (v0.10.0). */ .hp-sub{margin:.7rem 0 0;font-family:var(--f-display);font-size:.78rem;font-weight:700; letter-spacing:.06em;line-height:1.55;color:var(--ink-2)} .hp-tech{margin-top:.75rem;font-family:var(--f-display);letter-spacing:.11em;color:var(--ink-2)} .hp-media{margin-block:1.4rem} .hp-body>.lead{margin-top:0} .hp-prose{margin-top:1.2rem} /* ⚠ 901, ΟΧΙ 701. Το .hero-grid γίνεται ΜΟΝΗ ΣΤΗΛΗ στα ≤900 (βλ. τον κανόνα «.hero-grid,.band-grid,.cta{grid-template-columns:1fr}» πιο κάτω). Με τις περιοχές δηλωμένες από τα 701, στα 768 το πλέγμα προσπαθούσε να τοποθετήσει δύο ονόματα περιοχών σε μία στήλη και η εικόνα έπεφτε ΤΕΛΕΥΤΑΙΑ: μετρήθηκε y=798, χειρότερα από τα 560 που ήταν πριν την αλλαγή. Οι περιοχές ισχύουν ΜΟΝΟ εκεί που υπάρχουν όντως δύο στήλες· από 701 ως 900 η σειρά του σήματος (κεφαλή → εικόνα → σώμα) είναι ήδη η σωστή. */ @media(min-width:901px){ .hero-prod{grid-template-areas:"head media" "body media";align-items:start; grid-template-rows:auto 1fr} .hero-prod .hp-head{grid-area:head} .hero-prod .hp-body{grid-area:body} /* Η εικόνα κεντράρεται ΣΤΟ ΥΨΟΣ ΤΩΝ ΔΥΟ ΣΕΙΡΩΝ ΜΑΖΙ — αλλιώς κολλάει στην κορυφή και το κείμενο κρέμεται δίπλα της. */ .hero-prod .hp-media{grid-area:media;align-self:center;margin-block:0} .hero-prod .hp-body>.lead{margin-top:1.1rem} } /* ΣΥΝΤΟΜΑ ΓΕΓΟΝΟΤΑ ΔΙΠΛΑ ΣΤΟ ΚΕΙΜΕΝΟ, όχι ζώνη πλήρους πλάτους για 28px. Αφορά ~125 από τα 145 προϊόντα: 74 έχουν μόνο πρωτόκολλο, και άλλα 53 έχουν «ενεργά συστατικά» που στην πραγματικότητα είναι μία-δύο λέξεις χωρίς δράση. */ .facts{margin:1.5rem 0 0;display:grid;grid-template-columns:auto 1fr; gap:.2rem 1rem;align-items:baseline; border-inline-start:2px solid var(--line-2);padding-inline-start:1rem} .facts dt{font-family:var(--f-display);font-size:.7rem;font-weight:700; letter-spacing:.19em;color:var(--ink-3);text-transform:uppercase;white-space:nowrap} .facts dd{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.66} /* Δύο ζεύγη στη σειρά θέλουν αέρα ανάμεσά τους, όχι μόνο στο εσωτερικό. */ .facts dd+dt{margin-top:.75rem} @media(max-width:520px){ /* Στα στενά, η ετικέτα και το κείμενο σε δύο γραμμές: με 12 χαρακτήρες ετικέτας η στήλη του κειμένου έμενε 180px και έσπαγε σε 5 γραμμές. */ .facts{grid-template-columns:1fr} } .facts+.note-fine{margin-top:.55rem;padding-inline-start:1rem} /* ⚠ ΤΟ width:100% ΕΙΝΑΙ Ο ΦΡΕΝΟ ΣΤΟ aspect-ratio, ΟΧΙ ΔΙΑΚΟΣΜΗΣΗ. Χωρίς αυτό, το aspect-ratio δένεται με το max-height παρακάτω (44vh/410px σε κοντές οθόνες, 56vh/540px αλλού): μόλις το ταβάνι κόψει το ΥΨΟΣ, μαζεύεται αναλογικά και το ΠΛΑΤΟΣ, και η φωτογραφία συρρικνώνεται μέσα στη στήλη της αφήνοντας νεκρό κενό στα δεξιά — μετρημένο: 1081×800 φωτό 320 σε στήλη 488 → 168px νεκρά 1280×800 φωτό 320 σε στήλη 508 → 239px νεκρά (47%) 1366×768 φωτό 307 σε στήλη 503 → 250px νεκρά (50%) 1440×790 φωτό 316 σε στήλη 499 → 240px νεκρά 1920×1080 φωτό 491 σε στήλη 737 → 310px νεκρά Δηλαδή στα τρία πιο συνηθισμένα μεγέθη φορητού η φωτογραφία ήταν 307-320px — ΜΙΚΡΟΤΕΡΗ από τα 350px που έχει σε τηλέφωνο 390px — και η δεξιά της ακμή δεν έπεφτε πάνω στη στήλη που τηρούν κεφαλίδα, μετρητές και υποσέλιδο. Με width:100% το πλάτος είναι ρητό, το ταβάνι κόβει μόνο το ύψος και το object-fit:cover αναλαμβάνει το κάδρο. Τα νεκρά πέφτουν σε 43-64px, που είναι το κανονικό περιθώριο της σελίδας. ΚΑΤΩ ΑΠΟ 1081px ΔΕΝ ΑΛΛΑΖΕΙ ΤΙΠΟΤΑ: εκεί δεν πιάνει ταβάνι, η αναλογία μένει 0,91:1 και τα νούμερα είναι πανομοιότυπα (μετρημένο σε 901 και 1024). Δώρο: η λεζάντα μέσα στη φωτογραφία πέφτει από 4 γραμμές σε 2. */ .hero-fig{position:relative;border-radius:var(--r-lg);overflow:hidden;width:100%; border:1px solid var(--line);aspect-ratio:4/4.4;background:var(--panel)} .hero-fig img{width:100%;height:100%;object-fit:cover;object-position:52% 20%} .hero-fig::after{content:"";position:absolute;inset:0; background:linear-gradient(192deg,transparent 42%,rgba(17,18,20,.9) 100%)} .hero-cap{position:absolute;left:18px;right:18px;bottom:15px;z-index:2; display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap} /* Κάθεται πάνω στο ΣΚΟΥΡΟ ντεγκραντέ της φωτογραφίας, όχι στη σελίδα: κρατά ανοιχτό χρώμα ανεξάρτητα από το θέμα. */ .hero-cap .t{font-family:var(--f-display);font-size:.68rem;font-weight:700;letter-spacing:.15em;color:#E4E6E9;max-width:60%} /* ── μετρητές ──────────────────────────────────────────────── */ /* Η ΖΩΝΗ ΜΕΝΕΙ FULL-BLEED, ΤΑ ΝΟΥΜΕΡΑ ΜΠΑΙΝΟΥΝ ΣΤΗ ΣΤΗΛΗ. Το πλέγμα πέρασε στο εσωτερικό .wrap ώστε το «17» να στοιχίζεται με τον τίτλο και το υποσέλιδο (πριν: 340px απόκλιση στα 1920, 660px στα 2560). ΟΙ ΓΡΑΜΜΕΣ ΕΓΙΝΑΝ BORDER, ΟΧΙ GAP: με gap:1px το χρώμα ερχόταν από το φόντο του γονέα — μέσα σε .wrap αυτό θα έβαφε και τις δύο λωρίδες padding δεξιά κι αριστερά. */ .stats{background:var(--bg);border-block:1px solid var(--line)} .stats-in{display:grid;grid-template-columns:repeat(4,1fr)} .stat{background:var(--bg);padding:clamp(19px,2.5vw,30px) clamp(14px,2vw,26px); border-inline-start:1px solid var(--line)} .stats-in .stat:first-child{border-inline-start:0} /* ΤΑ ΑΚΡΑΙΑ ΚΕΛΙΑ ΧΩΡΙΣ ΕΣΩΤΕΡΙΚΟ ΠΕΡΙΘΩΡΙΟ. Το .wrap βάζει ήδη το περιθώριο της σελίδας· αν το κρατήσει και το κελί, το «17» ξεκινά 26px δεξιότερα από κάθε τίτλο της σελίδας — μετρήσιμη, ορατή απόκλιση σε κάθε πλάτος. Τα εσωτερικά κελιά κρατούν το δικό τους περιθώριο, γιατί εκεί χωρίζει γραμμή. */ .stats-in .stat:first-child{padding-inline-start:0} .stats-in .stat:last-child{padding-inline-end:0} /* ΙΣΟΠΛΑΤΕΙΣ ΑΡΙΘΜΟΙ. Μετρημένο στη Manrope 800: αναλογικά το «1» πιάνει 45,4px και το «0» 67,4px — διαφορά 48%. Με μετρητή που ανεβαίνει, κάθε αλλαγή ψηφίου θα μετακινούσε ό,τι ακολουθεί («χρόνια», «οίκοι») δεξιά κι αριστερά σε κάθε καρέ. Με tabular-nums κάθε ψηφίο είναι ακριβώς 62px, άρα το πλάτος είναι σταθερό από το «0» ως το «17». Είναι ούτως ή άλλως η σωστή τυπογραφία για ζώνη μεγεθών. */ .stat b{font-variant-numeric:tabular-nums;display:block;font-family:var(--f-display);font-size:clamp(1.45rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.03em;line-height:1} /* ⚠ ΑΜΕΣΟ ΠΑΙΔΙ, ΚΑΙ ΟΧΙ ΤΟ ΚΡΥΦΟ. Ο κανόνας ήταν «.stat span» και έπιανε ΚΑΘΕ span μέσα στον μετρητή. Όταν ο μετρητής που ανεβαίνει τύλιξε τα ψηφία σε δικό του span, ο αριθμός αποδόθηκε 12,4px γκρι block αντί για 23,2px λευκό — και το κείμενο παρέμενε σωστό, οπότε κάθε έλεγχος σε innerText περνούσε. Το «17» έσπαγε σε δική του γραμμή από τη λέξη που ακολουθεί. Το :not() εξαιρεί το αντίγραφο για τον αναγνώστη οθόνης, που είναι επίσης άμεσο παιδί. */ .stat > span:not(.screen-reader-text){display:block;margin-top:.5rem;font-size:.775rem;color:var(--ink-3);line-height:1.45} /* ── κεφαλίδα ενότητας ─────────────────────────────────────── */ .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px; flex-wrap:wrap;margin-bottom:clamp(24px,3.4vw,46px)} /* min-width:0 ΜΑΖΙ με το overflow-wrap. Το .sec-head είναι flex: χωρίς το min-width:0 το παιδί αρνείται να συρρικνωθεί κάτω από το πλάτος της μεγαλύτερης λέξης, όσο overflow-wrap κι αν βάλεις. Φάνηκε στην αναζήτηση, όπου ο όρος τυπώνεται μέσα στον τίτλο: μια κολλημένη λέξη 120 χαρακτήρων έδινε 2.339px οριζόντιας κύλισης στο κινητό — έξι οθόνες κενό πλάι. */ /* ΤΟ ΠΛΑΤΟΣ ΤΗΣ ΣΤΗΛΗΣ ΔΕΝ ΠΡΕΠΕΙ ΝΑ ΕΞΑΡΤΑΤΑΙ ΑΠΟ ΤΗ ΓΡΑΜΜΑΤΟΣΕΙΡΑ. Ήταν 64ch. Το ch ισούται με το πλάτος του ψηφίου «0» ΤΗΣ ΤΡΕΧΟΥΣΑΣ γραμματοσειράς — άρα όσο έπαιζε η εφεδρική, η στήλη ήταν 588px αντί 646px. Μετρημένο 14/09/2026 στο /proionta/: αυτά τα 58px έριχναν τον τίτλο από 2 σε 3 γραμμές και την εισαγωγή από 3 σε 4, δηλαδή 125px μετατόπιση σε όλη τη σελίδα από κάτω. Για σύγκριση, όλη η ρύθμιση μετρικών στο fonts.css κερδίζει ~1px. Το 40.375rem είναι ΑΚΡΙΒΩΣ όσο ήταν το 64ch με το Inter (646px στα 16px ρίζας) — ίδια εμφάνιση, αλλά σταθερή. */ .sec-head .txt{max-width:40.38em;min-width:0} .sec-head h1,.sec-head .lead{overflow-wrap:anywhere} /* ΕΝΑΣ κανόνας για το κενό κάτω από τον h1, σε ΟΛΑ τα σημεία που ο τίτλος ακολουθείται από κείμενο. Ήταν δύο inline styles σε δύο πρότυπα και τίποτα στα υπόλοιπα πέντε — δηλαδή τρεις διαφορετικές αλήθειες. ΟΧΙ στο .hero-grid: εκεί το κενό το δίνει ήδη η διάταξη. */ .sec-head h1, .band-txt h1, .wrap > h1{margin-bottom:1.05rem} .sec-head h2{margin-bottom:.65rem} .sec-head p{margin:0} /* ── ΠΛΑΚΕΤΑ: η λύση για packshot σε λευκό φόντο ──────────── */ /* Η ΓΡΑΜΜΗ minmax(0,1fr) ΔΕΝ ΕΙΝΑΙ ΔΙΑΚΟΣΜΗΤΙΚΗ — χωρίς αυτήν κόβονται τα μηχανήματα. Το grid με υπονοούμενη γραμμή «auto» δεν δίνει ΟΡΙΣΤΙΚΟ ύψος, οπότε το max-height:100% της εικόνας δεν έχει τι να επιλύσει, συμπεριφέρεται σαν none, η εικόνα στρώνεται στο φυσικό της ύψος και το overflow:hidden την κόβει. Μετρήθηκε: διάμεση ορατότητα packshot 39,4%, χειρότερη 27,3% (CAM-Sterilizer: πλακέτα 358×269, εικόνα 314×904). Με τη ρητή γραμμή: 100%. Δοκιμάστηκε και το height:100%+object-fit — ΑΠΕΤΥΧΕ, που επιβεβαιώνει ότι η αιτία είναι η auto γραμμή και όχι το object-fit. */ /* ΧΡΩΜΑ ΚΕΙΜΕΝΟΥ ΓΙΑ ΤΗ ΜΙΑ ΦΟΡΑ ΠΟΥ ΘΑ ΧΡΕΙΑΣΤΕΙ. Η πλακέτα είναι λευκή μέσα σε σκούρο θέμα, οπότε κληρονομούσε ανοιχτό κείμενο: όταν μια εικόνα δεν φόρτωνε, το ελληνικό alt τυπωνόταν με αντίθεση 1,03:1 — αόρατο. Το --plate-ink υπήρχε ήδη στο :root και δεν το χρησιμοποιούσε κανείς. */ .plate{background:linear-gradient(168deg,var(--plate) 0%,var(--plate-2) 100%); display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr); place-items:center;padding:22px;position:relative;overflow:hidden; color:var(--plate-ink)} .plate::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 50% 4%,rgba(255,255,255,.92),transparent 58%)} .plate img{position:relative;z-index:1} /* Κομμένο packshot: κάθεται μέσα στην πλακέτα με αέρα γύρω του. */ .plate.is-cutout img{max-height:100%;max-width:100%;width:auto;height:auto;min-height:0; object-fit:contain;mix-blend-mode:multiply} /* Φωτογραφία με δικό της φόντο: γεμίζει την πλακέτα, χωρίς blend — αλλιώς το φόντο της εμφανίζεται ως ορατό γκρι κουτί μέσα στο λευκό. */ .plate.is-photo{padding:0} .plate.is-photo img{width:100%;height:100%;object-fit:cover} .plate.is-photo::after{display:none} /* Φωτογραφία με ομοιόμορφο ΑΝΟΙΧΤΟ φόντο: μπαίνει ΟΛΟΚΛΗΡΗ αντί να κοπεί. ΔΕΝ προσπαθούμε να «σβήσουμε» το φόντο της βάφοντας την πλακέτα με το δειγματοληπτημένο χρώμα: το φόντο αυτών των φωτογραφιών είναι απαλή ΔΙΑΒΑΘΜΙΣΗ (spread έως 45), οπότε καμία επίπεδη τιμή δεν ταιριάζει και έμενε ορατή ραφή — ένα γκρι ορθογώνιο μέσα σε λευκή πλακέτα. Αντ' αυτού το δηλώνουμε: η φωτογραφία είναι πλακίδιο ΠΑΝΩ στην πλακέτα, με στρογγυλεμένη γωνία και απαλή σκιά. Η ραφή γίνεται περίγραμμα. */ .plate.is-photo.is-fit{background:linear-gradient(168deg,var(--plate) 0%,var(--plate-2) 100%);padding:10px} .plate.is-photo.is-fit img{width:auto;height:auto;max-width:100%;max-height:100%; object-fit:contain;mix-blend-mode:normal;border-radius:var(--tile-r,5px); box-shadow:0 1px 3px rgba(20,24,28,.10),0 6px 18px rgba(20,24,28,.10)} /* ΛΕΥΚΟ ΦΟΝΤΟ ΦΩΤΟΓΡΑΦΙΑΣ (v0.10.1): η πλακέτα παίρνει το ΙΔΙΟ χρώμα και το προϊόν κάθεται κατευθείαν πάνω της — χωρίς πλακίδιο, σκιά ή γκρι κορνίζα. Μέσα σε κάρτα μια λεπτή γραμμή χωρίζει τη φωτογραφία από το κείμενο. */ .plate.is-photo.is-fit.is-white{background:var(--plate-bg,#FFFFFF);padding:clamp(12px,1.6vw,20px)} .plate.is-white::after{display:none} .plate.is-photo.is-fit.is-white img{border-radius:0;box-shadow:none} .card .plate.is-white{border-bottom:1px solid var(--line)} /* ΜΕΓΕΘΥΝΣΗ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ. Οι φωτογραφίες της Summe είναι ένα έγχρωμο τετράγωνο τυπωμένο πάνω σε λευκό καμβά· χωρίς αυτό το προϊόν έπιανε το ένα τέταρτο της κάρτας μέσα σε τρία ομόκεντρα ορθογώνια. Η ΣΕΙΡΑ ΕΧΕΙ ΣΗΜΑΣΙΑ: translate ΠΡΩΤΑ, scale ΜΕΤΑ — γραμμένο ανάποδα, η μετατόπιση πολλαπλασιάζεται με τον συντελεστή και το προϊόν φεύγει εκτός. */ .plate.is-trim img{ transform:translate(var(--plate-dx,0),var(--plate-dy,0)) scale(var(--plate-k,1)); transform-origin:center center} /* Το πλαίσιο και η σκιά ήταν για να διαβαστεί η φωτογραφία ως πλακίδιο. Όταν κόβουμε το περιθώριο δεν υπάρχει πια περιθώριο για να πλαισιωθεί. */ .plate.is-photo.is-fit.is-trim img{border-radius:0;box-shadow:none} /* ── Η ΑΥΤΟΝΟΜΗ ΠΛΑΚΕΤΑ ΗΤΑΝ Η ΜΟΝΗ ΤΕΤΡΑΓΩΝΗ ΕΠΙΦΑΝΕΙΑ ΤΗΣ ΣΕΛΙΔΑΣ ── Μετρημένο στη σελίδα προϊόντος στα 1440 (κάθε επιφάνεια >60×40 με φόντο ή περίγραμμα): κάρτες 14px · ζώνη CTA 20px · κουμπιά 999px · ΦΩΤΟΓΡΑΦΙΑ 0px. Δεν ήταν απόφαση, ήταν κενό — και δύο ανεξάρτητες μετρήσεις το δείχνουν: α) Η ΙΔΙΑ πλακέτα μέσα σε κάρτα διαβάζεται ΗΔΗ στρογγυλή, επειδή την κόβει το overflow:hidden της .card στα 14px. Ίδιο στοιχείο, δύο αναγνώσεις, ανάλογα με το πού κάθεται. β) Στην ΑΡΧΙΚΗ η φωτογραφία-ήρωας (.hero-fig) είναι ήδη --r-lg, και στο κινητό το ίδιο --r-lg περνά στο . Ίδιος ρόλος, άλλη ακτίνα. Μπαίνει --r-lg και όχι --r: αυτές οι πλακέτες είναι 499×623 (προϊόν) και 499×339 (μηχάνημα) — μεγέθους πάνελ, δηλαδή στη βαθμίδα του .hero-fig και του .cta, όχι της κάρτας των 263px. ⛔ ΔΕΝ ΜΠΑΙΝΕΙ ΣΤΟ .plate ΓΕΝΙΚΑ. Μέσα σε κάρτα οι ΠΑΝΩ γωνίες θα έπεφταν πάνω στην ήδη κομμένη γωνία της κάρτας (αδιάφορο), αλλά οι ΚΑΤΩ γωνίες θα στρογγύλευαν πάνω στο σώμα της κάρτας και θα άνοιγαν δύο ορατές εγκοπές φόντου. Ο κανόνας στοχεύει ΜΟΝΟ τις δύο αυτόνομες θέσεις. */ .hp-media .plate,.plate-hero{border-radius:var(--r-lg);--tile-r:10px} /* ΟΜΟΚΕΝΤΡΕΣ ΑΚΤΙΝΕΣ: εσωτερική = εξωτερική − padding. Η .is-fit κρατά το πλακίδιο με padding:10px μέσα στην πλακέτα· με εξωτερική 20 και εσωτερική 5 η γωνία του πλακιδίου έμπαινε ΜΕΣΑ στην καμπύλη της πλακέτας. 20−10=10. Περνά ως μεταβλητή και όχι ως νέος επιλογέας ΕΠΙΤΗΔΕΣ: ο κανόνας .plate.is-photo.is-fit.is-trim img{border-radius:0} πιο κάτω πρέπει να συνεχίσει να κερδίζει — εκεί δεν υπάρχει περιθώριο για να πλαισιωθεί. */ .plate-empty{display:block;width:52px;height:52px;border:2px dashed #C6CACE;border-radius:8px} .print-id{display:none} /* ── κάρτες ────────────────────────────────────────────────── */ .grid{display:grid;gap:clamp(13px,1.6vw,22px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} /* ⛔ ΔΟΚΙΜΑΣΤΗΚΕ ΦΩΤΙΣΜΕΝΗ ΑΚΜΗ ΣΤΗΝ ΚΑΡΤΑ ΚΑΙ ΑΦΑΙΡΕΘΗΚΕ: ΔΕΝ ΖΩΓΡΑΦΙΖΕΙ. Η πλακέτα της εικόνας πιάνει ΟΛΟΚΛΗΡΗ την πάνω ακμή, οπότε και το inset highlight και η λάμψη των πρώτων 96px μένουν από κάτω της. Μετρημένο στις τρεις πρώτες σειρές εικονοστοιχείων μιας κάρτας προϊόντος: με ακμή 44,3 / 239,6 / 244,1 χωρίς 44,3 / 239,6 / 244,1 — πανομοιότυπα. Το βάθος της κάρτας το δίνει ήδη η φωτεινή πλακέτα πάνω σε --panel. */ /* ΤΟ ΣΗΚΩΜΑ ΚΙΝΕΙ `translate`, ΟΧΙ `transform` — ΚΑΙ ΑΥΤΟ ΕΙΝΑΙ Η ΔΙΟΡΘΩΣΗ. Το σύστημα αποκάλυψης (.js .reveal / .in) ΚΑΤΕΧΕΙ το transform: το δηλώνει με ειδικότητα (0,3,0) και το κρατά ΜΟΝΙΜΑ αφού τελειώσει η είσοδος. Όσο το σήκωμα ήταν κι αυτό transform, ο ένας κανόνας έσβηνε τον άλλον — μετρημένο στην ίδια σελίδα δύο φορές: χωρίς JavaScript hover → matrix(1,0,0,1,0,-3)· με JavaScript hover → none. ΚΑΘΕ κάρτα του site είχε χάσει το σήκωμά της. Το `translate` είναι ΞΕΧΩΡΙΣΤΗ ιδιότητα από το `transform` και συνθέτονται: η ΕΙΣΟΔΟΣ κρατά το transform, η ΑΛΛΗΛΕΠΙΔΡΑΣΗ παίρνει το translate. Καμία μάχη ειδικότητας, τίποτα να ξεχαστεί την επόμενη φορά. */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column;position:relative; box-shadow:var(--shadow-1); transition:background .2s,border-color .2s,translate .2s,box-shadow .2s} .card:hover{border-color:var(--line-2);translate:0 -3px;box-shadow:var(--shadow-2)} /* ΤΕΤΡΑΓΩΝΗ ΠΛΑΚΕΤΑ ΣΤΑ ΠΡΟΪΟΝΤΑ. Οι 132 από τις 146 φωτογραφίες προϊόντος είναι τετράγωνες (960×960 ή 2362×2362). Μέσα σε πλακέτα 4/3 μια τετράγωνη εικόνα άφηνε μπάρες δεξιά-αριστερά: μετρήθηκε εικόνα 165×165 σε πλακέτα 263×197, δηλαδή το προϊόν έπιανε το 53% της πλακέτας. Με 1/1 πιάνει 100%. Τα μηχανήματα μένουν 4/3: οι φωτογραφίες τους είναι κάθετες και ανομοιογενείς. */ .card .plate{aspect-ratio:4/3} .card-prod .plate{aspect-ratio:1} .card-b{padding:16px 18px 19px;display:flex;flex-direction:column;gap:.4rem;flex:1} /* ΗΤΑΝ ΚΟΚΚΙΝΟ ΚΕΙΜΕΝΟ: #ED1C24 πάνω στο --panel μετρήθηκε 3,77:1. Κόκκινο που περνά 4,5:1 πάνω σε σχεδόν μαύρο είναι αναγκαστικά ροζ κοραλί — δηλαδή δεν είναι πια το χρώμα της εταιρείας. Αντ' αυτού το κόκκινο γίνεται ΣΗΜΑΔΙ και το κείμενο ουδέτερο (7,94:1), ίδιο μοτίβο με το .eyebrow. */ /* ΑΝΑΔΙΠΛΩΣΗ, ΟΧΙ ΜΙΑ ΓΡΑΜΜΗ: «ΣΩΜΑ — ΑΝΑΔΙΑΜΟΡΦΩΣΗ, ΛΙΠΟΛΥΣΗ ΚΑΙ ΚΥΤΤΑΡΙΤΙΔΑ» είναι 46 χαρακτήρες με letter-spacing .15em — σε κάρτα 168px ξεχειλίζει οριζόντια, στον άξονα που καμία μέτρηση «ύψους» δεν βλέπει. */ /* ΟΡΙΟ ΔΥΟ ΓΡΑΜΜΩΝ. Με το overflow-wrap:anywhere (που ΠΡΕΠΕΙ να μείνει — αλλιώς οι μακριές κεφαλαίες λέξεις ξεχειλίζουν οριζόντια και ψαλιδίζονται χωρίς σημάδι) μια ετικέτα σαν «ΣΩΜΑ — ΑΝΑΔΙΑΜΟΡΦΩΣΗ, ΛΙΠΟΛΥΣΗ ΚΑΙ ΚΥΤΤΑΡΙΤΙΔΑ» έπιανε 5–6 γραμμές μέσα σε στενή κάρτα, δηλαδή περισσότερο χώρο από τον ίδιο τον τίτλο του προϊόντος. */ .card-cat{font-family:var(--f-display);font-size:.645rem;font-weight:700;letter-spacing:.15em; color:var(--ink-2);display:flex;align-items:flex-start;gap:.6em;line-height:1.4; min-width:0;overflow-wrap:anywhere} .card-cat > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-width:0} /* ── ΜΙΚΤΟ ΠΛΕΓΜΑ: ΑΠΟΤΕΛΕΣΜΑΤΑ ΑΝΑΖΗΤΗΣΗΣ ────────────────── Είναι το ΜΟΝΟ σημείο όπου μηχάνημα και προϊόν στέκονται δίπλα-δίπλα, και οι δύο τύποι έχουν διαφορετική πλακέτα (4/3 έναντι 1/1) και ετικέτα μιας ή δύο γραμμών. Αποτέλεσμα: οι τίτλοι της ΙΔΙΑΣ γραμμής προσγειώνονταν 113px χώρια και το μάτι δεν έβρισκε πού να σαρώσει. Η εξίσωση γίνεται ΜΟΝΟ εδώ — στους καταλόγους η τετράγωνη πλακέτα δίνει στο packshot 100% κάλυψη και δεν θυσιάζεται. */ /* 27/09: ΜΟΝΟ σε μικτό πλέγμα και από 701px. Σε μία στήλη ή σε αποτελέσματα μόνο προϊόντων η κάρτα κοβόταν πιο στενά από την ίδια κάρτα στον κατάλογο. */ @media(min-width:701px){ .search .grid:has(.card-prod):has(.card:not(.card-prod)) .card .plate{aspect-ratio:4/3} } /* v0.7.8 — ΜΕ ΤΟΝ ΙΔΙΟ ΦΥΛΑΚΑ ΠΟΥ ΕΧΕΙ ΚΑΙ Ο ΚΑΤΑΛΟΓΟΣ. Το ίδιο μοτίβο στο .grid .card-cat είναι κλεισμένο σε @media(min-width:701px), επειδή σε στενή οθόνη δεσμεύει δύο γραμμές ύψους για ετικέτα μίας γραμμής. Εδώ είχε ξεφύγει αφύλαχτο και χρέωνε ~19px σε κάθε κάρτα αποτελέσματος στο κινητό. */ @media(min-width:701px){ .search .grid .card-cat{min-height:calc(2 * 1.4em)} } /* ΙΔΙΟ ΠΡΟΒΛΗΜΑ, ΚΑΙ ΣΤΟΥΣ ΚΑΤΑΛΟΓΟΥΣ. Όταν η ετικέτα μιας κάρτας τυλίγεται σε δεύτερη γραμμή και της διπλανής όχι, οι δύο τίτλοι της ίδιας σειράς ξεκινούν ώς 23,9px χώρια — το μάτι που σαρώνει 24 ονόματα χάνει τη βάση του. Η εξίσωση είχε γίνει ΜΟΝΟ για τα αποτελέσματα αναζήτησης. Μόνο από 701px και πάνω: σε μία στήλη δεν υπάρχει διπλανή κάρτα να στοιχιστείς μαζί της, και το ύψος θα ήταν καθαρό κόστος. */ @media(min-width:701px){ .grid .card-cat{min-height:calc(2 * 1.4em)} } .card-cat::before{content:"";width:5px;height:5px;margin-top:.5em;background:var(--red);flex:none} /* Περικοπή και στον ΤΙΤΛΟ, όχι μόνο στην περιγραφή — αλλά στις ΤΡΕΙΣ γραμμές, όχι στις δύο. Ο μακρύτερος πραγματικός τίτλος του καταλόγου είναι 69 χαρακτήρες («2 Ισχυρή αποτοξινωτική και ανανεωτική μάσκα προσώπου κατά της ρύπανσης») και στις 2 γραμμές κοβόταν το όνομα του ίδιου του προϊόντος. Χωρίς min-height: οι κάρτες ισοϋψώνονται ήδη από το grid και το «Δείτε →» κάθεται στον πάτο με margin-top:auto. */ /* overflow-wrap ΚΑΙ ΕΔΩ, όχι μόνο στο .card-cat. Το line-clamp κόβει μόνο ΓΡΑΜΜΕΣ· μια λέξη πλατύτερη από την κάρτα ξεχειλίζει ΟΡΙΖΟΝΤΙΑ και το overflow:hidden την ψαλιδίζει ΧΩΡΙΣ αποσιωπητικά — «DERMAÉCLA» αντί για «DERMAÉCLAT». 11 στις 24 κάρτες στα 320px. Το «…» εμφανίζεται μόνο όταν κοπεί γραμμή, ποτέ όταν κοπεί πλάτος. */ .card h3{font-size:1.04rem;letter-spacing:-.015em; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; min-width:0;overflow-wrap:anywhere} .card h3 a::after{content:"";position:absolute;inset:0;z-index:2} /* ΔΑΚΤΥΛΙΟΣ ΕΣΤΙΑΣΗΣ ΣΤΗΝ ΚΑΡΤΑ, ΟΧΙ ΣΤΟΝ ΤΙΤΛΟ. Ο υπολογιστής έλεγε «outline 2px solid» — στην εικόνα υπήρχαν 42 λευκά pixel από τα 2.880 της ζώνης (1,5%). Το overflow:hidden του h3 έκοβε τρεις από τις τέσσερις ακμές, γιατί το outline-offset πέφτει ΕΞΩ από το κουτί περικοπής. Ο σύνδεσμος καλύπτει ούτως ή άλλως όλη την κάρτα (h3 a::after, inset:0), οπότε το σωστό περίγραμμα είναι της κάρτας. ΘΕΤΙΚΟ offset υποχρεωτικά: η .card έχει και αυτή overflow:hidden, άρα αρνητικό offset θα ξανακοβόταν. */ .card h3 a:focus-visible{outline:none} .card:has(h3 a:focus-visible){outline:2px solid var(--ink);outline-offset:3px; box-shadow:0 0 0 2px var(--bg)} /* Περικοπή σε 3 γραμμές: τα κείμενα του πελάτη έχουν πολύ άνισο μήκος και χωρίς όριο οι κάρτες γίνονται σκάλα. */ .card p{margin:0;font-size:.85rem;color:var(--ink-3);line-height:1.55; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .card .more{margin-top:auto;padding-top:.7rem;font-family:var(--f-display);font-size:.755rem; font-weight:700;letter-spacing:.05em;color:var(--ink-2);display:flex;align-items:center;gap:.4em;flex-wrap:wrap} .card:hover .more{color:var(--ink)} /* ΝΕΚΡΗ ΖΩΝΗ ΠΑΝΩ ΑΠΟ ΤΟΝ ΣΥΝΔΕΣΜΟ. Και τα δύο διακριτικά κάθονται με z-index:3 πάνω στην επικάλυψη-σύνδεσμο της κάρτας: σε αφή, το πάτημα στην πάνω γωνία της φωτογραφίας δεν έκανε ΤΙΠΟΤΑ, χωρίς καμία ένδειξη. Είναι καθαρές ενδείξεις (το ένα είναι ήδη aria-hidden), άρα δεν χάνεται τίποτα. */ .card-award,.card-step{pointer-events:none} .card-award{position:absolute;top:10px;inset-inline-end:10px;z-index:3;height:44px;width:auto; filter:drop-shadow(0 2px 7px rgba(0,0,0,.2))} /* ── βήμα πρωτοκόλλου ──────────────────────────────────────── */ /* Οι σειρές Cell C, De-Pollution και Nicely είναι ΡΟΥΤΙΝΕΣ με σειρά χρήσης. Ο αριθμός ήταν κολλημένος μπροστά στον τίτλο· εδώ γίνεται σήμα. */ /* Λωρίδα προδιαγραφών στο hero μηχανήματος: τρία νούμερα, με την ετικέτα από κάτω. Η ετικέτα είναι μικρή αλλά στο --ink-2 (7,4:1) — όχι στο --ink-3 που κόβεται στο 4,3:1 όπως είχε συμβεί στο σήμα βήματος. */ .specstrip{display:flex;flex-wrap:wrap;gap:0;margin:1.6rem 0 0;padding:0;list-style:none; border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden} .specstrip li{flex:1 1 140px;min-width:0;padding:14px 18px; border-inline-start:1px solid var(--line-2)} .specstrip li:first-child{border-inline-start:0} .specstrip b{display:block;font-family:var(--f-display);font-weight:800; font-size:clamp(1rem,1.5vw,1.22rem);letter-spacing:-.01em;color:var(--ink); overflow-wrap:anywhere} .specstrip span{display:block;margin-top:5px;font-size:.72rem;letter-spacing:.08em; text-transform:none;color:var(--ink-2)} @media(max-width:560px){ /* Σε τηλέφωνο τρεις στήλες δίνουν ~100px η καθεμία — μία στήλη ανά γραμμή. */ .specstrip{flex-direction:column} /* Σε στήλη το flex-basis γίνεται ΥΨΟΣ. Χωρίς αυτό, τα τρία στοιχεία μοιράζονταν σταθερό ύψος και η λωρίδα έπιανε 422px σε οθόνη 800px, με 185px κενά μέσα της. */ .specstrip li{flex:0 0 auto} .specstrip li{border-inline-start:0;border-top:1px solid var(--line-2)} .specstrip li:first-child{border-top:0} /* ΤΙΜΗ ΚΑΙ ΕΤΙΚΕΤΑ ΣΤΗΝ ΙΔΙΑ ΓΡΑΜΜΗ. Στοιβαγμένες, οι τρεις σειρές έτρωγαν 237px από 844 — το 28% της πρώτης οθόνης για τρία νούμερα. */ .specstrip li{display:flex;align-items:baseline;justify-content:space-between; gap:14px;padding:12px 16px} .specstrip b{flex:0 1 auto} .specstrip span{margin-top:0;flex:0 1 auto;text-align:end} } /* ΚΑΨΟΥΛΑ, ΟΧΙ ΚΥΚΛΟΣ. Η λέξη «ΒΗΜΑ» μετράει 31,2px και κάθεται 10,7px κάτω από το κέντρο· εκεί η χορδή ενός δίσκου 38px είναι 31,4px και στο κάτω άκρο των γραμμάτων μόλις 22,3px — τα ακραία γράμματα έβγαιναν έξω από το σκούρο φόντο και έπεφταν πάνω στη λευκή πλακέτα. Το ίδιο μοτίβο κάψουλας χρησιμοποιεί ήδη το .card-award. */ .card-step{position:absolute;top:10px;inset-inline-start:10px;z-index:3; display:grid;place-items:center;line-height:1; width:auto;min-width:38px;height:auto;padding:5px 9px;border-radius:999px; background:rgba(255,255,255,.92);backdrop-filter:blur(6px); border:1px solid var(--line-2)} .card-step b{font-family:var(--f-display);font-size:.95rem;font-weight:800;color:var(--ink)} /* ΗΤΑΝ 6,72px στο #868C96 = 4,30:1 πάνω στο #28292b της κάρτας — κάτω από το όριο. Το --ink-2 δίνει ~7,4:1 και το μέγεθος ανεβαίνει σε ~9,3px. ΤΟ ΜΙΣΟ ΑΥΤΗΣ ΤΗΣ ΔΙΟΡΘΩΣΗΣ ΕΙΧΕ ΜΕΙΝΕΙ ΣΤΟ ΣΧΟΛΙΟ: το μέγεθος είχε ανέβει, το χρώμα είχε μείνει --ink-3, δηλαδή 4,30:1 — το σχόλιο περιέγραφε αλλαγή που δεν είχε γίνει ποτέ. */ .card-step span{font-family:var(--f-display);font-size:.58rem;font-weight:700; letter-spacing:.12em;color:var(--ink-2);margin-top:1px} .step-tag{margin-inline-start:.9em;padding:2px 8px;border-radius:999px; background:var(--panel-2);border:1px solid var(--line-3);color:var(--ink-2);letter-spacing:.12em} /* ── φίλτρα ────────────────────────────────────────────────── */ .filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(20px,2.8vw,32px)} /* v0.7.7 — Ο ΠΕΡΙΤΥΛΙΓΜΕΝΟΣ ΦΟΡΕΑΣ: chip αριστερά, ζωντανό πλήθος δεξιά. Υπάρχει επειδή κάτω από 700px τα chip μπαίνουν σε διάδρομο που κυλά, και το «17 μηχανήματα» ΔΕΝ πρέπει να ταξιδεύει μαζί τους. Στον υπολογιστή η διάταξη μένει αυτή που ήταν. */ .filterbar{display:flex;align-items:center;gap:16px;margin-bottom:clamp(20px,2.8vw,32px)} .filterbar > .filters{flex:1 1 auto;min-width:0;margin-bottom:0} .filterbar > [data-count]{flex:none} @media(max-width:700px){ .filterbar{display:block} .filterbar > [data-count]{display:block;margin-top:10px} } .chip{font-family:var(--f-display);font-size:.79rem;font-weight:600; padding:8px 15px;border-radius:999px;border:1px solid var(--line-3);color:var(--ink-2); cursor:pointer;transition:background .16s,border-color .16s,color .16s} .chip:hover{color:var(--ink);border-color:var(--ink-3)} .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} /* ── ζώνη οίκου ────────────────────────────────────────────── */ /* ΒΑΘΟΣ ΜΕΣΑ ΣΤΗΝ ΕΠΙΦΑΝΕΙΑ, ΟΧΙ ΔΕΥΤΕΡΗ ΓΡΑΜΜΗ ΣΤΗΝ ΑΚΜΗ. Η πρώτη δοκιμή έβαλε inset highlight· μετρήθηκε ότι ανεβάζει τη σειρά 1 από 24,8 σε 32,8 — ορατό, αλλά ακριβώς από πάνω υπάρχει ΗΔΗ το περίγραμμα στο 45,6. Δύο γραμμές στη σειρά διαβάζονται ως αστοχία απόδοσης, όχι ως ανάγλυφο. Το ντεγκραντέ δίνει πτώση φωτός στα πρώτα 220px: η ζώνη παύει να είναι ένα επίπεδο 24,8 για εκατοντάδες εικονοστοιχεία. */ .band{background-color:var(--bg-2);border-block:1px solid var(--line); background-image:linear-gradient(180deg,rgba(255,255,255,.024),transparent 220px)} .band-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4vw,58px);align-items:center} /* ══════════════════════════════════════════════════════════════════ Η ΚΑΡΤΑ ΟΙΚΟΥ ΕΧΕΙ ΤΑΒΑΝΙ (v0.8.2) Οι τέσσερις κάρτες κάθε οίκου ζουν σε ΔΥΟ σταθερές στήλες μέσα σε μια στήλη-κλάσμα. Ο κατάλογος προσθέτει ΣΤΗΛΕΣ όσο μεγαλώνει η οθόνη και κρατά την κάρτα στα 240-303px· η ζώνη κρατά δύο στήλες και μεγαλώνει την ΚΑΡΤΑ γραμμικά. Μετρημένο, κάρτα ζώνης προς κάρτα καταλόγου: 561-850 (στοιβαγμένη) 252→384px 1,53× ← 407px στα 900 901-1024 207→235px 0,78× 1100-1440 253→283px 1,05× ← ΕΔΩ είναι σωστή 1600-2560 345→414px 1,63× Δηλαδή ένα μπουκαλάκι ζωγραφιζόταν 414px σε οθόνη όπου ο κατάλογος το δείχνει 254px, και 407px στα 900 όπου ο κατάλογος λέει 273px. Το ταβάνι είναι το ΠΑΝΩ ΑΚΡΟ ΤΗΣ ΙΔΙΑΣ ΤΗΣ ΖΩΝΗΣ στο εύρος όπου μετρήθηκε σωστή (283px), στρογγυλεμένο: 290px. Δεν είναι breakpoint — δένει κάτω από τα 580px διαθέσιμα και αφήνει το τηλέφωνο ανέγγιχτο (στα 390 οι δύο στήλες βγαίνουν 169px, ίδιο με τον κατάλογο). ⚠ ΤΟ .band-grid ΖΕΙ ΣΕ ΤΡΙΑ ΠΡΟΤΥΠΑ (αρχική, σελίδα μηχανήματος, επικοινωνία) ΚΑΙ ΤΟ .grid.g-2 ΣΕ ΤΡΙΑ ΑΛΛΑ. Δεν υποτέθηκε — μετρήθηκε σε 15 τύπους σελίδας ζωντανά: ο επιλογέας πιάνει ΑΚΡΙΒΩΣ 2 στοιχεία, και τα δύο στην αρχική. Η σελίδα μηχανήματος έχει και .band-grid και .grid.g-2 αλλά ΔΕΝ είναι φωλιασμένα (0 ταιριάσματα), και η επικοινωνία έχει .band-grid χωρίς κανένα g-2. Το :has(.card-prod) είναι η τρίτη δικλείδα: κελιά πίνακα δεν πιάνονται ποτέ. ══════════════════════════════════════════════════════════════════ */ .band-grid .grid.g-2:has(.card-prod){grid-template-columns:repeat(2,minmax(0,290px))} .band-grid.flip .band-txt{order:2} .brandmark{height:40px;width:auto;margin-bottom:1.3rem} .pill-list{display:flex;flex-wrap:wrap;gap:8px;margin:1.35rem 0 0;padding:0;list-style:none} .pill{font-family:var(--f-display);font-size:.75rem;font-weight:600; padding:6px 13px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink-2)} /* ── λόγοι / υποστήριξη ────────────────────────────────────── */ .reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .reason{background:var(--panel);padding:clamp(21px,2.7vw,34px)} .reason .n{font-family:var(--f-display);font-size:.7rem;font-weight:700;letter-spacing:.16em; color:var(--red-txt);display:block;margin-bottom:1rem} .reason h3{margin-bottom:.55rem;font-size:1.08rem} .reason p{margin:0;font-size:.88rem;color:var(--ink-3);line-height:1.62} /* ── βραβεία ───────────────────────────────────────────────── */ .awards{display:flex;gap:clamp(14px,3vw,40px);align-items:flex-start;flex-wrap:wrap;justify-content:center} .award{display:flex;flex-direction:column;align-items:center;gap:.65rem;max-width:156px;text-align:center} .award img{height:76px;width:auto} .award span{font-size:.705rem;color:var(--ink-3);line-height:1.42} /* ── specs ─────────────────────────────────────────────────── */ /* Ο πίνακας κυλά ΜΕΣΑ στο δικό του κουτί. Το body έχει overflow-x:hidden, που θα ΕΚΡΥΒΕ την υπερχείλιση αντί να τη λύσει: το «755nm / 808nm / 1064nm» απλώς θα κοβόταν αθόρυβα σε στενή οθόνη. */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0} /* ΧΩΡΙΣ ΑΥΤΟ ΤΟ overflow-x:auto ΔΕΝ ΕΝΕΡΓΟΠΟΙΕΙΤΑΙ ΠΟΤΕ: τα παιδιά ενός grid έχουν εξ ορισμού min-width:auto, δηλαδή ΜΕΓΑΛΩΝΟΥΝ για να χωρέσουν το περιεχόμενό τους αντί να αφήσουν το παιδί τους να κυλήσει. Μετρήθηκε: πλέγμα 350px, παιδί 504px — και το body{overflow-x:hidden} έκρυβε τη διαφορά, οπότε καμία μέτρηση «πλάτους σελίδας» δεν το έδειχνε ποτέ. */ .band-grid>*,.hero-grid>*,.grid>*{min-width:0} .specs{width:100%;min-width:min(430px,100%);border-collapse:collapse;font-size:.885rem} .specs tr{border-bottom:1px solid var(--line)} .specs tr:last-child{border-bottom:0} .specs th{text-align:start;font-family:var(--f-display);font-weight:600;color:var(--ink-3); padding:11px 18px 11px 0;width:40%;min-width:170px;vertical-align:top;font-size:.83rem} .specs td{padding:11px 0;color:var(--ink);vertical-align:top;font-variant-numeric:tabular-nums} /* ΣΕ ΤΗΛΕΦΩΝΟ Η ΕΤΙΚΕΤΑ ΔΕΝ ΚΡΑΤΑΕΙ ΣΤΑΘΕΡΟ ΠΛΑΤΟΣ. Το th είναι 170px σε κάθε πλάτος· στα 360px αυτό είναι ΠΛΑΤΥΤΕΡΟ από τη στήλη τιμών, οπότε οι τιμές τυλίγονταν σε 150px και ο πίνακας διπλασίαζε ύψος (frf 641px αντί για 504). Σταθερή αναλογία δεν λύνει: στο CAM-Sterilizer οι ετικέτες είναι μακρύτερες από τις τιμές και κάθε ποσοστό το χειροτέρευε (+80px). Με width:auto η κάθε στήλη παίρνει όσο θέλει το ΔΙΚΟ της κείμενο. */ @media(max-width:464px){ .specs th{width:auto;min-width:0} } /* ── λίστες με τικ ─────────────────────────────────────────── */ .ticks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .ticks li{position:relative;padding-inline-start:1.5rem;font-size:.9rem;color:var(--ink-2);line-height:1.6} .ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:7px;height:7px; background:var(--red);border-radius:1px} /* ── ΣΕΙΡΑ: κεφαλίδα, υπο-ομάδες, κάρτα (v0.10.0) ────────────────── Η σειρά είναι πλέον η ΠΥΛΗ προς τα προϊόντα (αίτημα πελάτη): η κεφαλίδα της κουβαλά ό,τι λέει ο ίδιος για τη σειρά — το κεφαλαίο μότο του και την περιγραφή — δίπλα στη φωτογραφία της σειράς. */ .series-head{padding-bottom:clamp(20px,2.6vw,34px)} .series-grid-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center; margin-bottom:clamp(22px,3vw,36px)} .series-grid-head.no-photo{grid-template-columns:1fr} .series-grid-head h1{margin-bottom:.8rem} /* ΤΟ ΜΟΤΟ ΕΙΝΑΙ ΓΡΑΜΜΕΝΟ ΜΕ ΚΕΦΑΛΑΙΑ ΣΤΑ ΑΡΧΕΙΑ ΤΟΥ ΠΕΛΑΤΗ και μένει έτσι — τα ελληνικά κεφαλαία δεν έχουν τόνους, άρα αυτόματη μετατροπή σε πεζά θα έβγαζε ανορθόγραφο κείμενο. Το τυπώνουμε ως αυτό που είναι: επιγραφή. */ .series-tag{font-family:var(--f-display);font-size:.8rem;font-weight:700;letter-spacing:.06em; line-height:1.55;color:var(--ink-2);margin:0 0 1.1rem;max-width:44em} .series-desc{color:var(--ink-2)} .series-desc p:last-child{margin-bottom:.6rem} .series-photo .plate{aspect-ratio:1;border-radius:var(--r-lg);border:1px solid var(--line)} @media(max-width:900px){ .series-grid-head{grid-template-columns:1fr} /* Στο τηλέφωνο η φωτογραφία ΠΡΙΝ από το κείμενο δεν βοηθά — ο επισκέπτης ήρθε για τα προϊόντα· μικρότερη, μετά τον τίτλο. */ .series-photo{max-width:420px} } .series-group{display:flex;align-items:center;gap:14px;font-size:.78rem;letter-spacing:.19em; color:var(--ink-3);margin:clamp(26px,3.4vw,44px) 0 clamp(14px,1.8vw,22px)} .series-group::after{content:"";flex:1;height:1px;background:var(--line)} /* v0.10.1: ήταν «:first-of-type{margin-top:0}» — αλλά η ετικέτα ομάδας δεν είναι ποτέ πρώτη (πριν από αυτήν υπάρχει το πλέγμα χωρίς ομάδα), οπότε κολλούσε 0px κάτω από τις κάρτες. Μηδέν μόνο όταν είναι όντως το πρώτο παιδί. */ .series-items > .wrap > .series-group:first-child{margin-top:0} .card-series .plate{aspect-ratio:4/3} .card-series h3{font-size:clamp(1.05rem,1.4vw,1.22rem)} /* Το μότο μέσα στην κάρτα: 4 γραμμές, όχι 3 — τα μότο του πελάτη είναι μακριά και το «ΣΕΙΡΑ ΠΕΡΙΠΟΙΗΣΗΣ ΠΡΟΣΩΠΟΥ ΣΧΕΔΙΑΣΜΕΝΗ ΓΙΑ…» κοβόταν πριν πει τι κάνει η σειρά. */ .card-series p{-webkit-line-clamp:4} /* ── ΓΚΑΛΕΡΙ ΜΗΧΑΝΗΜΑΤΟΣ (v0.10.0) ───────────────────────────── Χωρίς JS όλες οι διαφάνειες φαίνονται η μία κάτω από την άλλη — η απόκρυψη ισχύει ΜΟΝΟ κάτω από το .js, ώστε καμία φωτογραφία να μη χάνεται. */ .mgal{display:grid;gap:12px;min-width:0} .mgal-slide+.mgal-slide{margin-top:0} .js .mgal[data-gal] .mgal-slide:not(.is-on){display:none} .mgal-thumbs{display:flex;flex-wrap:wrap;gap:8px} .js .mgal-thumbs{display:flex} html:not(.js) .mgal-thumbs{display:none} .mgal-th{width:64px;height:64px;padding:0;border-radius:10px;overflow:hidden;cursor:pointer; border:1px solid var(--line-2);background:var(--plate);transition:border-color .16s,box-shadow .16s} .mgal-th img{width:100%;height:100%;object-fit:cover} .mgal-th:hover{border-color:var(--ink-3)} .mgal-th[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)} /* ── ΖΩΝΗ ΕΜΠΕΙΡΙΑΣ (Τεχνική υποστήριξη) ────────────────────── Ο αριθμός σε κόκκινο κείμενο (--red-txt 5,91:1 σε λευκό), ΟΧΙ στο εταιρικό #ED1C24 (4,38:1) — εδώ είναι κείμενο, όχι επιφάνεια. Η ζώνη κάθεται σε --bg-2 με κόκκινη ακμή: η «διακριτική γκρι απόχρωση» που ζήτησε ο πελάτης, όχι ακόμη ένα λευκό κουτί. */ .xp{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);align-items:center; margin:clamp(20px,2.6vw,30px) 0 clamp(26px,3.4vw,40px);padding:clamp(20px,2.6vw,32px); background:var(--bg-2);border:1px solid var(--line);border-inline-start:3px solid var(--red); border-radius:var(--r);max-width:52em} .xp-n{margin:0;display:flex;flex-direction:column;align-items:flex-start;min-width:7.5em} .xp-n b{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,6vw,4.6rem); line-height:.95;letter-spacing:-.04em;color:var(--red-txt);font-variant-numeric:tabular-nums} /* Πεζά ελληνικά: ΧΩΡΙΣ αραίωση — το letter-spacing των eyebrow είναι για κεφαλαία· σε πεζά σκόρπιζε τη φράση σε γράμματα. */ .xp-n span{font-family:var(--f-display);font-size:.84rem;font-weight:600;letter-spacing:0; color:var(--ink-2);margin-top:.45rem;max-width:11.5em;line-height:1.35} .xp-t h2{font-size:clamp(1.15rem,1.9vw,1.5rem);margin-bottom:.5rem} /* Το `sup_text` είναι προαιρετικό (20/09). Όταν λείπει, ο τίτλος μένει μόνος μέσα στην κάρτα και το περιθώριό του γίνεται κενός αέρας κάτω από αυτόν — το `.xp{align-items:center}` δεν το κρύβει, το κεντράρει μαζί του. */ .xp-t h2:last-child{margin-bottom:0} .xp-t p{margin:0;color:var(--ink-2);line-height:1.65} @media(max-width:560px){.xp{grid-template-columns:1fr}.xp-n{min-width:0}} /* ── CTA ───────────────────────────────────────────────────── */ .cta{background:var(--brand);border-radius:var(--r-lg);padding:clamp(28px,4.4vw,58px); display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,42px); align-items:center;position:relative;overflow:hidden} .cta::before{content:"";position:absolute;inset:auto auto -55% -12%;width:min(520px,70%);aspect-ratio:1; background:radial-gradient(circle,rgba(237,28,36,.32),transparent 66%);filter:blur(26px)} .cta>*{position:relative} .cta h2{margin-bottom:.7rem} .cta p{color:#DCDEE1;margin:0} /* Η ΖΩΝΗ CTA ΜΕΝΕΙ ΑΝΘΡΑΚΙ ΣΤΟ ΦΩΤΕΙΝΟ ΘΕΜΑ (v0.10.0). Είναι το ένα σημείο κάθε σελίδας που πρέπει να τραβήξει το βλέμμα — «Ζητήστε επίδειξη» — και το #444141 είναι το χρώμα του ίδιου του εντύπου της εταιρείας, όχι μαύρο. Επειδή τα --ink/--ink-3 έγιναν σκούρα, κάθε κείμενο εδώ μέσα δηλώνεται ρητά. Μετρημένα πάνω στο #444141: λευκό 9,94 · #DCDEE1 7,32 · #C9CCD1 6,20. Το περίγραμμα των ghost κουμπιών ήταν inline style σε 3 πρότυπα — πέρασε εδώ, στο 50% ώστε το όριο του κουμπιού να φαίνεται (3,1:1). */ .cta,.cta h2{color:#FFFFFF} .cta .eyebrow{color:#C9CCD1} .cta .btn-ghost{color:#F2F3F5;border-color:rgba(255,255,255,.5)} .cta .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.75)} .cta :focus-visible{outline-color:#FFFFFF;box-shadow:0 0 0 2px var(--brand)} .cta-actions{display:flex;flex-direction:column;gap:11px} .cta-actions .btn{justify-content:center} /* v0.10.1 — email και υποστήριξη ως ΣΥΝΔΕΣΜΟΙ κάτω από τα κουμπιά, όχι τρίτο/τέταρτο χάπι. */ .cta-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.2rem;margin:.35rem 0 0;font-size:.9rem} .cta .cta-links a{color:#F2F3F5;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px} .cta .cta-links a:hover{text-decoration-color:#FFFFFF} /* Γραμμή κάτω από τα κουμπιά ήρωα: τηλέφωνο + φύλλο προδιαγραφών. */ .hero-alt{margin:.95rem 0 0;font-size:.93rem;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem} .hero-alt a,.hero-alt .linkish{color:var(--ink);font-weight:600;text-decoration:underline; text-decoration-color:var(--line-3);text-underline-offset:3px} .hero-alt a:hover,.hero-alt .linkish:hover{text-decoration-color:var(--red)} .linkish{background:none;border:0;padding:0;font:inherit;cursor:pointer} .hero-alt:has([data-print][hidden]) .hero-alt-sep{display:none} .hero-alt-sep{color:var(--line-3)} /* Στο κινητό το τηλέφωνο είναι ήδη στη μπάρα ενεργειών. */ @media(max-width:700px){ .hero-alt-tel,.hero-alt-sep{display:none} .hero-alt.no-print{display:none} } /* ── άρθρο / περιεχόμενο συντάκτη ──────────────────────────── */ .prose{max-width:44.16em} .prose p{color:var(--ink-2)} .prose h2{margin:2.2rem 0 .9rem} .prose h3{margin:1.7rem 0 .7rem} /* ΚΕΝΗ ΠΑΡΑΓΡΑΦΟΣ ΑΠΟ ΤΟΝ ΣΥΝΤΑΚΤΗ = 17px ΝΕΚΡΟ ΚΕΝΟ. Στην «Τεχνική υποστήριξη» το περιεχόμενο περιέχει ένα σχόλιο-υπενθύμιση προς τον πελάτη («ΕΚΚΡΕΜΕΙ: όροι εγγύησης, χρόνοι απόκρισης…»), και η WordPress το τυλίγει σε

. Το σχόλιο ΔΕΝ διαγράφεται — είναι χρήσιμο, και είναι αόρατο στον επισκέπτη· απλώς δεν πρέπει να πιάνει ύψος. Ο επιλογέας :empty ΑΓΝΟΕΙ τα σχόλια, άρα πιάνει ακριβώς αυτή την περίπτωση — και κάθε άλλη κενή παράγραφο που αφήνει ο συντάκτης. ⚠ ΔΕΝ πιάνει παράγραφο με σκέτα κενά (είναι κόμβος κειμένου) ούτε με · αυτά ΘΕΛΟΥΜΕ να μένουν. Μετρημένο: 1 κενή παράγραφος σε 4 σελίδες, κόστος 17px. */ .prose p:empty{display:none} .prose ul,.prose ol{color:var(--ink-2);padding-inline-start:1.2rem} .prose li{margin-bottom:.45rem} .prose a{color:var(--ink);border-bottom:1px solid var(--red)} .prose img{border-radius:var(--r);margin:1.6rem 0} /* ── ΚΕΙΜΕΝΟ ΠΡΟΪΟΝΤΟΣ ΑΠΟ ΤΑ ΑΡΧΕΙΑ ΤΟΥ ΠΕΛΑΤΗ (v0.10.0) ───────────── Οι επικεφαλίδες του («ΔΡΑΣΗ», «ΕΝΕΡΓΑ ΣΥΣΤΑΤΙΚΑ») είναι γραμμένες με κεφαλαία. Στο μέγεθος h2 της σελίδας (2,6rem) φώναζαν δίπλα στον τίτλο του προϊόντος — εδώ γίνονται ΕΤΙΚΕΤΕΣ ενότητας, ίδιες με τα eyebrow του site. Στα μηχανήματα οι ενότητες είναι πολλές και μεγάλες (ABAS FIT: 8) — εκεί μένουν επικεφαλίδες, αλλά ένα σκαλί μικρότερες. */ .hp-prose h2{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--ink); margin:1.9rem 0 .75rem;display:flex;align-items:center;gap:.6em;line-height:1.4} .hp-prose h2::before{content:"";width:6px;height:6px;background:var(--red);flex:none} .hp-prose ul{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.5rem} .hp-prose ul li{position:relative;padding-inline-start:1.25rem;margin:0;line-height:1.6} .hp-prose ul li::before{content:"";position:absolute;inset-inline-start:0;top:.66em;width:6px;height:6px; background:var(--red);border-radius:1px} .single-gld_machine .prose h2{font-size:clamp(1.2rem,1.9vw,1.55rem)} /* Πίνακας μέσα στο κείμενο (πρωτόκολλο Dermaqual, ζεύγη «Ετικέτα: Τιμή» των μηχανημάτων): στοιχισμένος αριστερά, ετικέτα στη στήλη της. Ο προεπιλεγμένος ήταν ΚΕΝΤΡΑΡΙΣΜΕΝΟΣ και το «ΠΟΣΟΤΗΤΑ/ ΣΥΝΕΔΡΙΑ» έβγαινε αριστερότερα από όλα τα άλλα. */ .specs-inline{width:100%;border-collapse:collapse;font-size:.9rem;margin:.2rem 0 .6rem} .specs-inline th,.specs-inline td{text-align:start;vertical-align:top;padding:.55rem .9rem .55rem 0; border-bottom:1px solid var(--line)} .specs-inline th{font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.1em; color:var(--ink-3);width:38%;padding-top:.7rem} .specs-inline td{color:var(--ink-2)} .specs-inline tr:last-child th,.specs-inline tr:last-child td{border-bottom:0} /* ── ψίχουλα ───────────────────────────────────────────────── */ .crumb{font-size:.785rem;color:var(--ink-3);padding-top:26px} .crumb a:hover{color:var(--ink)} .crumb .sep{margin-inline:.5em;opacity:.5} /* ── φόρμα ─────────────────────────────────────────────────── */ .form{display:grid;gap:13px;max-width:560px} .field{display:grid;gap:6px} .field label{font-family:var(--f-display);font-size:.735rem;font-weight:600;letter-spacing:.09em;color:var(--ink-3)} .field input,.field select,.field textarea{ background:var(--bg-2);border:1px solid var(--line-3);border-radius:9px;padding:11px 13px; color:var(--ink);font-family:var(--f-body);font-size:.92rem;width:100%} .field textarea{min-height:120px;resize:vertical} /* Το placeholder ήταν το ΠΡΟΕΠΙΛΕΓΜΕΝΟ γκρι του περιηγητή (#757575): 3,82:1 πάνω στο --bg-2, δηλαδή η οδηγία «πώς να συμπληρώσω» ήταν πιο σβηστή από την ετικέτα της (5,54:1). Το --ink-3 δίνει 5,22:1 στο --bg-2 και 4,91:1 στην ανοιχτότερη επιφάνεια όπου μπορεί να σταθεί πεδίο. Το opacity:1 δεν είναι διακοσμητικό: ο Firefox βάζει μόνος του .54. */ .field input::placeholder,.field textarea::placeholder, .form input::placeholder,.form textarea::placeholder{color:var(--ink-3);opacity:1} /* ΤΟ ΑΣΤΕΡΑΚΙ «ΥΠΟΧΡΕΩΤΙΚΟ». Το --red στα 11,76px μετρήθηκε 4,28:1 και, με την εξομάλυνση, ο πυρήνας του γλύφου έπεφτε στο 3,28:1. Το --red-hi υπάρχει ήδη στο :root ακριβώς γι' αυτό: κρατά το κόκκινο ως σήμα χωρίς να γίνει ουδέτερο κείμενο. */ .req{color:var(--red-hi);font-weight:700} .row2{display:grid;grid-template-columns:1fr 1fr;gap:13px} .searchform{max-width:none} .searchrow{display:flex;gap:9px} .searchrow input{flex:1;min-width:0} .searchrow .btn{flex:none;white-space:nowrap} /* v0.7.8 — ΣΤΟΙΒΑΖΕΤΑΙ ΣΤΑ 389, ΟΧΙ ΣΤΑ 520. Το κατώφλι ήταν 131px πλατύτερο απ' όσο χρειαζόταν και κόστιζε 55px ΠΑΝΩ από τα αποτελέσματα σε κάθε οθόνη 390 και 430 — ακριβώς εκεί που η πρώτη κάρτα έχανε το τσάκισμα για 13,5px. Στα 390 το πεδίο σε μία γραμμή βγαίνει 213,6px με 186,0px εσωτερικό κείμενο και χωρά την υπόδειξη με 21px περίσσευμα· στα 360 δεν χωρά τίποτα, γι' αυτό εκεί συνεχίζει να στοιβάζεται. Σε μία γραμμή το πεδίο ψηλώνει 46,0→51,3px, δηλαδή πάνω από το δάπεδο αφής των 44px. */ @media(max-width:389px){ .searchrow{flex-direction:column} .searchrow .btn{justify-content:center} } /* ── υποσέλιδο ─────────────────────────────────────────────── */ /* ΠΛΗΡΕΣ ΠΕΡΙΓΡΑΜΜΑ, ΟΧΙ ΜΟΝΟ ΠΑΝΩ — ΑΛΛΙΩΣ Η ΚΑΜΠΥΛΗ ΣΒΗΝΕΙ ΟΠΟΥ ΦΑΙΝΕΤΑΙ. Το γέμισμα #F5F6F8 πάνω σε λευκό είναι 1,081:1: πρακτικά αόρατο. Αυτό που ζωγραφίζει το σχήμα είναι η γραμμή (1,228:1). Με border-radius και μηδενικά πλάγια περιγράμματα, ο browser κλιμακώνει το πάχος της πάνω γραμμής από 1px σε 0 ΜΕΣΑ στο τόξο — δηλαδή η γραμμή σβήνει ακριβώς εκεί που υπάρχει η γωνία, και μένει μουτζούρα. Το κάτω μένει 0, άρα το ΥΨΟΣ δεν αλλάζει· το .wrap μέσα είναι max-width:1240px;margin:0 auto, άρα τα 2px είναι συμμετρικά και δεν μετατοπίζουν τίποτα. ΓΙΑΤΙ clamp ΚΑΙ ΟΧΙ ΣΤΑΘΕΡΟ: δύο τόξα των 20px πιάνουν 11,1% της ακμής στα 360 (διαβάζεται ως κάρτα, όχι ως σελίδα) και 2,1% στα 1920 (πρακτικά ευθεία). ⚠ ΚΑΜΙΑ overflow:hidden εδώ: το .f-mark svg είναι overflow:visible. Από πάνω υπάρχουν ήδη 36px (κινητό) έως 68px (desktop) λευκού σε ΚΑΙ ΤΟΥΣ 7 τύπους σελίδας, άρα η καμπύλη έχει φόντο να πατήσει χωρίς νέο margin. */ .footer{background-color:var(--bg-2);border:1px solid var(--line);border-bottom:0; border-radius:clamp(14px,2.2vw,32px) clamp(14px,2.2vw,32px) 0 0; padding-block:clamp(38px,5vw,64px) 24px; background-image:linear-gradient(180deg,rgba(255,255,255,.024),transparent 220px)} .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(20px,3vw,42px)} /* h2, όχι h4 (v0.10.3): σε ΚΑΘΕ σελίδα το υποσέλιδο πηδούσε από h2 σε h4 και έσπαγε τη σειρά επικεφαλίδων για τους αναγνώστες οθόνης. Η εμφάνιση ΔΕΝ αλλάζει — ίδιο μέγεθος, ίδιο χρώμα, ίδια αραίωση. */ .f-grid .f-h{font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.16em; line-height:1.12;color:var(--ink-3);margin:0 0 1rem} .f-grid ul{list-style:none;margin:0;padding:0} .f-grid a,.f-grid p,.f-grid li{font-size:.86rem;color:var(--ink-2);margin:0 0 .5rem;line-height:1.55} /* Η υπογράμμιση γίνεται με text-decoration και ΟΧΙ με border-bottom: εδώ, σε αντίθεση με την κεφαλίδα, δεν υπάρχει δεσμευμένο διάφανο περίγραμμα, οπότε ένα border θα πρόσθετε 1px ύψος τη στιγμή ακριβώς του περάσματος. */ .f-grid a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .f-bot{margin-top:clamp(26px,4vw,44px);padding-top:20px;border-top:1px solid var(--line); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.775rem;color:var(--ink-3)} /* ── υπογραφή κατασκευής ───────────────────────────────────── */ /* Πιο μικρή και πιο σβηστή από τη νομική γραμμή από πάνω: είναι υπογραφή, δεν διεκδικεί προσοχή από το ΑΦΜ ή την Πολιτική Απορρήτου. Το όνομα ζωντανεύει μόνο στο hover. */ /* Ο ΜΟΝΙΜΟΣ ΔΡΟΜΟΣ ΑΝΑΚΛΗΣΗΣ. Μοιάζει με τον σύνδεσμο δίπλα του, όχι με .btn: είναι τρίτο νομικό κείμενο στην ίδια γραμμή, όχι κάλεσμα δράσης. Στο κινητό αποκτά ζώνη αφής 44px — ΜΟΝΟ εκεί, ώστε η γραμμή του desktop να μη μεγαλώσει. */ /* ⚠ ΤΟ `display:inline-flex` ΕΦΑΓΕ ΤΑ ΚΕΝΑ ΓΥΡΩ ΑΠΟ ΤΗΝ ΤΕΛΕΙΑ. Το footer.php βάζει τα κενά ΜΕΣΑ στο κείμενο του διαχωριστή (« · ») — σωστή πρόθεση, γραμμένη ρητά σε σχόλιο. Μέσα όμως σε flex δοχείο κάθε παιδί γίνεται block, και το πρωτεύον κενό στην αρχή/τέλος ΚΟΒΕΤΑΙ. ΜΕΤΡΗΜΕΝΟ: πλάτος διαχωριστή 3,6px, κενό αριστερά 0, κενό δεξιά 0 — «Πολιτική Απορρήτου·Ρυθμίσεις απορρήτου» κολλητά. Το innerText δείχνει τρία ξεχωριστά αντικείμενα χωρίς κενά ανάμεσα. Ο αναγνώστης οθόνης ΔΕΝ επηρεάστηκε ποτέ (η τελεία είναι aria-hidden και εκατέρωθεν υπάρχουν δύο ξεχωριστά χειριστήρια), άρα η ζημιά ήταν ΜΟΝΟ οπτική — γι' αυτό δεν την έπιασε κανένας έλεγχος κειμένου. Το .34em είναι η ΙΔΙΑ τιμή που ήδη χρησιμοποιεί το .f-credit .sep. */ .f-legal{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.34em} /* ΔΥΟ ΧΕΙΡΙΣΤΗΡΙΑ ΔΙΠΛΑ-ΔΙΠΛΑ ΠΡΕΠΕΙ ΝΑ ΜΟΙΑΖΟΥΝ — ΚΑΙ ΔΕΝ ΜΟΙΑΖΑΝ. Το σχόλιο από πάνω λέει «Μοιάζει με τον σύνδεσμο δίπλα του». Μετρήθηκε το αντίθετο: το κουμπί είχε ΜΟΝΙΜΗ υπογράμμιση 1px var(--line-2), ο σύνδεσμος border-bottom-width 0 και text-decoration none. Ίδια γραμμή, ίδια δουλειά (απόρρητο), το ένα φαινόταν πατήσιμο και το άλλο όχι. Γίνονται ταυτόσημα: ΚΑΝΕΝΑ στην ηρεμία, ΚΑΙ ΤΑ ΔΥΟ στο πέρασμα — το ίδιο μοτίβο δεσμευμένου διάφανου περιγράμματος με το .f-credit a, άρα μηδέν μετατόπιση διάταξης. */ .f-consent{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit} .f-legal a,.f-consent{border-bottom:1px solid transparent; transition:color .18s ease,border-color .18s ease} .f-legal a:hover,.f-consent:hover{color:var(--ink);border-bottom-color:var(--line-3)} .f-legal .sep{color:var(--line-3)} @media(max-width:900px){ .f-legal a,.f-consent{display:inline-flex;align-items:center;min-height:44px} } .f-credit{margin:13px 0 0;text-align:right;font-size:.75rem;letter-spacing:.015em; color:var(--ink-3)} .f-credit a{display:inline-block;color:var(--ink-2);text-decoration:none;padding:4px 0; border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease} .f-credit a:hover{color:var(--ink);border-bottom-color:var(--line-3)} .f-credit .sep{color:var(--line-3);margin:0 .34em} @media(max-width:700px){.f-credit{text-align:left;margin-top:16px}} /* ── σημείωση draft (αφαιρείται πριν το go-live) ──────────── */ .draftnote{background:rgba(237,28,36,.07);border:1px solid rgba(237,28,36,.3); border-radius:11px;padding:14px 17px;font-size:.83rem;color:var(--ink-2);line-height:1.6} .draftnote b{color:var(--ink)} /* Η κολλητή κεφαλίδα είναι 75px: χωρίς αυτό η άγκυρα προσγειώνει το μήνυμα ακριβώς από κάτω της και κόβεται η πρώτη του γραμμή. */ #gld-status{scroll-margin-top:92px;scroll-margin-bottom:80px} #gld-status:focus{outline:none} /* v0.7.8 — ΙΔΙΟΣ ΛΟΓΟΣ, ΔΥΟ ΑΚΟΜΗ ΣΤΟΧΟΙ. Το #main και η μπάρα ενεργειών πήραν tabindex="-1" ώστε οι σύνδεσμοι παράκαμψης να μετακινούν ΟΝΤΩΣ την εστίαση· χωρίς αυτό το σβήσιμο, θα ζωγραφιζόταν δακτύλιος γύρω από όλο το κύριο περιεχόμενο. */ #main:focus,#gld-actions:focus{outline:none} /* ── μόνο για αναγνώστες οθόνης ────────────────────────────── */ /* ΔΕΝ ΗΤΑΝ ΟΡΙΣΜΕΝΗ. Η κεφαλίδα έγραφε ήδη μέσα στον σύνδεσμο του λογότυπου, και ο πυρήνας τη χρησιμοποιεί σε φόρμες και σελιδοποίηση — χωρίς κανόνα, όλα αυτά τυπώνονταν ΟΡΑΤΑ στη σελίδα. ΟΧΙ display:none: αυτό τα κρύβει και από τους αναγνώστες οθόνης. */ .screen-reader-text{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap; margin:-1px;padding:0;border:0; } .screen-reader-text:focus{ position:static!important;width:auto;height:auto;clip:auto;clip-path:none;margin:0; } /* ── εργαλεία κεφαλίδας: αναζήτηση + burger ────────────────── */ .nav-tools{display:flex;align-items:center;gap:8px;flex:none} /* Τηλέφωνο και κουμπί αιτήματος υπάρχουν ΜΕΣΑ στο