/*
Theme Name: Destination.chat
Theme URI: https://designontime.gr
Author: DOT — Design on Time
Author URI: https://designontime.gr
Description: Ελαφρύ θέμα για το destination.chat. Αναπαράγει πιστά τη σελίδα Carrd:
19 ενότητες που εναλλάσσονται με hash, ίδια τυπογραφία, ίδια κουμπιά, ίδιο φόντο.
Χωρίς page builder, χωρίς βιβλιοθήκες, χωρίς εξωτερικά αιτήματα.
Version: 1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: dot-destination
*/
/* ═══════════════════════════════════════════════════════════════════════════
ΟΛΑ ΤΑ ΝΟΥΜΕΡΑ ΕΔΩ ΕΙΝΑΙ ΜΕΤΡΗΜΕΝΑ, ΟΧΙ ΕΚΤΙΜΗΜΕΝΑ.
Πηγή: πραγματικός browser πάνω στο ζωντανό gr.destination.chat, 21/08/2026,
πλάτος 1280. Τα αποτελέσματα στο yliko/stil-metrimena.json.
Η ρίζα του Carrd είναι 17,3333px· κάθε μέγεθος παρακάτω είναι το μετρημένο
px διά 17,3333, δηλαδή ακριβώς το ίδιο αποτέλεσμα σε rem.
═══════════════════════════════════════════════════════════════════════════ */
:root {
--dc-keimeno: #fff;
--dc-keimeno-apalo: #fffcfd; /* μετρημένο στα κουμπιά style-4 */
--dc-radius: 1rem; /* 17,3333px */
/* Το φόντο κάτω από τη φωτογραφία. ΗΤΑΝ rgb(109,155,209).
Μετρημένο 21/08: το PageSpeed έβγαζε προσβασιμότητα 96 σε ΚΑΙ ΤΙΣ ΠΕΝΤΕ
σελίδες, με μοναδική αποτυχία «ανεπαρκής αντίθεση χρωμάτων» — λευκό κείμενο
πάνω σε αυτό το γαλάζιο δίνει 2,92:1, ενώ το πρότυπο θέλει 4,5:1.
Η διόρθωση είναι το ΙΔΙΟ χρώμα με το σκούρο πέπλο 31,4% ήδη περασμένο πάνω
του: 109×0,686=75, 155×0,686=106, 209×0,686=143. Δίνει 5,63:1.
Δηλαδή ακριβώς ό,τι βλέπει ήδη το μάτι κάτω από τη φωτογραφία — καμία
ορατή αλλαγή, μετρήσιμη διαφορά. */
--dc-fonto: rgb(75, 106, 143);
}
html { font-size: 17.3333px; -webkit-text-size-adjust: 100%; }
/* ── Η ΚΛΙΜΑΚΑ ΤΟΥ CARRD — ΤΡΙΑ ΜΕΓΕΘΗ ΡΙΖΑΣ, ΟΧΙ ΔΥΟ ────────────────────────
🔴 Βρέθηκε 11/09/2026 από παράπονο του πελάτη: «γράμματα πολύ μικρά, κουμπιά
γλώσσας πολύ χαμηλά». Μετρημένο στο αρχείο του Carrd (elegxos/palio) σε 20
πλάτη: η ρίζα είναι 24px πάνω από 1680, 17,3333px ώς 1680, 14,6667px ώς 980.
Εμείς είχαμε μόνο 17,3333 — και 14,6667 στα 736. Σε οθόνη 1920, τη συνηθέστερη,
όλα έβγαιναν 28% μικρότερα και η κεντραρισμένη στήλη 139px πιο χαμηλά.
Η σύγκριση της 23/08 έτρεξε μόνο σε 1440 και 412, όπου όντως ταίριαζε.
Έλεγχος σε ΚΑΘΕ σκαλί: node tools/sygkrisi-hero.mjs */
@media (min-width: 1681px) { html { font-size: 24px; } }
@media (max-width: 980px) { html { font-size: 14.6667px; } }
body {
margin: 0;
background-color: var(--dc-fonto);
color: var(--dc-keimeno);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 0.875rem; /* 15,1667px */
line-height: 1.625; /* 24,6458px */
font-weight: 300;
-webkit-font-smoothing: antialiased;
overflow-wrap: break-word;
}
/* Η φωτογραφία. Στο Carrd ζει σε body::before, σταθερή, με πέπλο 31,4% μαύρο.
Ίδιο εδώ — μαζί με το ίδιο z-index 0, ώστε το περιεχόμενο να πατάει από πάνω. */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
background-image:
linear-gradient(to top, rgba(0, 0, 0, 0.314), rgba(0, 0, 0, 0.314)),
var(--dc-bg-image);
background-size: auto, cover;
/* 🔴 36% και όχι κέντρο — ζητήθηκε από τον πελάτη 11/09/2026:
«η φιγούρα μπερδεύεται με το κουμπί Απαραίτητα για το ταξίδι».
ΜΕΤΡΗΜΕΝΟ: σε ΚΑΘΕ οθόνη υπολογιστή η εικόνα (2000×1266) γεμίζει ακριβώς το
πλάτος — οριζόντιο περιθώριο 0 — άρα εκεί η τιμή δεν αλλάζει τίποτα. Στο
κινητό όμως (390×844) η εικόνα απλώνεται σε 1334px, δηλαδή 944px περιθώριο,
και η γυναίκα έπεφτε πάνω στα κουμπιά. Δοκιμάστηκαν 50/42/36/30:
50% → επικάλυψη · 42% → ακόμη επικάλυψη
36% → η φιγούρα και τα κτήρια στην άκρη, κουμπιά πάνω σε θάλασσα ✅
30% → η φιγούρα φεύγει τελείως, μένει άδεια θάλασσα
Από 12/09/2026 η τιμή έρχεται από την Προσαρμογή (inc/fontou.php) — εδώ
μένει η μετρημένη προεπιλογή, για την περίπτωση που λείψει η μεταβλητή. */
background-position: var(--dc-bg-thesi-x, 55%) var(--dc-bg-thesi-y, 50%);
background-repeat: no-repeat;
pointer-events: none;
}
/* ── Η ΦΩΤΟΓΡΑΦΙΑ ΣΕ ΥΠΟΛΟΓΙΣΤΗ ΚΑΙ ΤΑΜΠΛΕΤΑ ───────────────────────────────
Ζητήθηκε 14/09/2026: «η κοπέλα σε PC να πάει όσο δεξιότερα γίνεται, και για
tablets το ίδιο — για να εκμεταλλευτώ το μπλε ως φόντο για το λευκό κείμενο.
Σε κινητό το φόντο να μείνει ως έχει.»
🔴 ΓΙΑΤΙ ΔΕΝ ΑΡΚΕΙ Η ΘΕΣΗ: μετρημένο 14/09 σε πέντε πλάτη, με την αναλογία
της φωτογραφίας (2000×1266 = 1,58):
1920×1080 → απλώνεται σε 1920px → οριζόντιο περιθώριο **0px**
1440×900 → 1440px → **0px**
1024×768 → 1213px → 189px
820×1180 → 1864px → 1044px
390×844 → 1333px → 943px
Δηλαδή σε φαρδιά οθόνη η εικόνα γεμίζει ΑΚΡΙΒΩΣ το πλάτος και δεν υπάρχει
τίποτα να μετακινηθεί — όποια τιμή κι αν βάλεις. Η λύση είναι να μεγαλώσει
ελάχιστα η εικόνα ώστε να δημιουργηθεί περιθώριο.
Το `min-aspect-ratio: 158/100` είναι ακριβώς η αναλογία της φωτογραφίας: η
μεγέθυνση μπαίνει ΜΟΝΟ όταν η οθόνη είναι πιο φαρδιά από αυτήν, δηλαδή μόνο
όταν όντως χρειάζεται. Στα 1920 το 115% δίνει πλάτος 2048px από πηγή 2000px —
μεγέθυνση 2,4%, αόρατη. */
@media (min-width: 737px) {
body::before { background-position: var(--dc-bg-thesi-x-pc, 20%) var(--dc-bg-thesi-y, 50%); }
}
/* 🔴 ΔΙΟΡΘΩΣΗ 14/09/2026, ΤΗΝ ΙΔΙΑ ΜΕΡΑ: το `auto 115%` ΕΣΠΑΣΕ σε πραγματικό
παράθυρο. Υπολογίζεται από το ΥΨΟΣ, και το παράθυρο ενός browser είναι πιο
κοντό από την οθόνη (μπάρα διευθύνσεων, καρτέλες, γραμμή εργασιών). Μετρημένο:
1920×1080 (δοκιμή μου) → εικόνα 1962px ≥ 1920 ✓ γι' αυτό δεν το είδα
1920×950 (αληθινό) → εικόνα 1726px σε οθόνη 1920 → **κενή λωρίδα δεξιά**
1366×625 → 1135px σε 1366 · 1280×600 → 1090px σε 1280 — ίδιο σπάσιμο
Ο πελάτης το είδε πρώτος, σε όλες τις σελίδες του, και είχε δίκιο.
Η σωστή διατύπωση είναι «cover, μεγεθυμένο κατά 15%»: το cover δίνει πλάτος
`max(100vw, 158vh)` — άρα ×1,15 → `max(115vw, 181,7vh)`. Καλύπτει ΠΑΝΤΑ και
στις δύο διαστάσεις, ό,τι σχήμα κι αν έχει το παράθυρο, και αφήνει περιθώριο
για να μετακινηθεί. Αν ο browser δεν ξέρει `max()`, η δήλωση αγνοείται και
μένει το `cover` της βάσης — δηλαδή η προηγούμενη συμπεριφορά, όχι κενό. */
@media (min-width: 981px) {
/* 130% και όχι 115%: ζητήθηκε 14/09 «η κοπέλα να πάει κι άλλο στα δεξιά».
Το περιθώριο διπλασιάζεται (288px → 576px σε οθόνη 1920), άρα η εικόνα
μετακινείται πραγματικά και ο δείκτης της Προσαρμογής αποκτά νόημα.
205,4 = 130 × 1,58 (η αναλογία της φωτογραφίας) — «cover ×1,30». */
body::before { background-size: auto, max(130vw, 205.4vh) auto; }
}
/* Το .site-main του Carrd είναι flex με align-items:center και
justify-content:center — γι' αυτό το περιεχόμενο κάθεται στη ΜΕΣΗ της οθόνης
και όχι στην κορυφή. Μετρημένο 22/08. */
.dc-main {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: flex-start;
min-height: 100vh; min-height: 100svh;
}
/* ── Η στήλη ────────────────────────────────────────────────────────────────
Μετρημένο: πλάτος 832px = 48rem, γέμισμα 32,5px 69,3333px = 1,875rem 4rem. */
.dc-inner {
width: 48rem;
max-width: 100%;
padding: 1.5rem 4rem; /* 26px 69,3333px */
box-sizing: border-box;
text-align: left;
}
/* ── Ενότητες ───────────────────────────────────────────────────────────────
Μία ορατή τη φορά, όπως σήμερα. ΧΩΡΙΣ JavaScript μένουν όλες ορατές: η
σελίδα δουλεύει ούτως ή άλλως, που σήμερα δεν ισχύει. */
.dc-section { display: block; }
.js .dc-section { display: none; }
.js .dc-section.dc-energi { display: block; }
/* ── Η ΔΕΥΤΕΡΗ ΕΣΟΧΗ — 2rem μέσα σε κάθε ενότητα ─────────────────────────────
🔴 Ήταν η μεγαλύτερη οπτική διαφορά όλου του έργου, και δεν φαινόταν.
ΜΕΤΡΗΜΕΝΟ 23/08/2026 με πραγματικό Chromium, ταυτόχρονα στο ζωντανό Carrd και
στην προεπισκόπηση: το `div.inner` του Carrd έχει `padding: 2rem` — δηλαδή
29,3333px στο κινητό (ρίζα 14,6667) και 34,6667px στον υπολογιστή (ρίζα
17,3333). Και τα δύο βγάζουν ακριβώς 2,000rem. Εμείς είχαμε 0.
ΤΙ ΣΗΜΑΙΝΕ: η στήλη κειμένου μας ήταν 353px αντί 295px στο κινητό και 693px
αντί 624px στον υπολογιστή — **+20% πλάτος**. Κάθε παράγραφος έσπαγε σε άλλα
σημεία, σε κάθε ενότητα και κάθε γλώσσα, και οι σελίδες έβγαιναν 10–13% πιο
κοντές. Το πλαίσιο της ενότητας, η ρίζα, η οικογένεια και τα μεγέθη
γραμματοσειράς ταίριαζαν ήδη ώς το τέταρτο δεκαδικό — έλειπε μόνο αυτό.
ΤΕΣΣΕΡΙΣ ΕΞΑΙΡΕΣΕΙΣ, ΚΑΙ ΔΕΝ ΕΙΝΑΙ ΑΥΘΑΙΡΕΤΕΣ:
- `home`: το Carrd δίνει και σε αυτήν `.inner` με 2rem, αλλά εκεί το `.inner`
πιάνει ΟΛΟ το πλάτος της οθόνης, οπότε το κείμενο καταλήγει στην ίδια θέση
με τη δική μας ενότητα. Μετρημένη εσοχή: 0 και στις δύο πλευρές.
- `work`, `about`, `contact`: στο Carrd **δεν έχουν καθόλου `div.inner`**.
Μετρημένη εσοχή: 0 και στις δύο πλευρές.
Άρα οι τέσσερις ταιριάζουν ΗΔΗ. Αν τους βάλουμε padding, τις χαλάμε.
Κατακόρυφα το Carrd βάζει 2rem στις 15 και 1,5rem στην αρχική· η αρχική το
παίρνει ήδη από το .dc-inner (γραμμή 83), γι' αυτό δεν επαναλαμβάνεται εδώ. */
.dc-section > .wp-block-group__inner-container { padding: 2rem; }
[id="home-section"] > .wp-block-group__inner-container,
[id="work-section"] > .wp-block-group__inner-container,
[id="about-section"] > .wp-block-group__inner-container,
[id="contact-section"] > .wp-block-group__inner-container { padding: 0; }
/* ── Τυπογραφία ─────────────────────────────────────────────────────────────
Μετρήθηκαν και οι 19 ενότητες. Υπάρχουν ΤΕΣΣΕΡΑ μεγέθη σε όλο το site, όχι
ένα ανά ενότητα. Οι περισσότερες επικεφαλίδες έχουν το ΙΔΙΟ μέγεθος με το
κείμενο — έτσι είναι σχεδιασμένο, δεν είναι παράλειψη. */
.dc-section h1,
.dc-section h2,
.dc-section h3,
.dc-section h4 {
font-weight: 300;
font-size: 0.875rem;
line-height: 1.625;
margin: 0 0 1.375rem;
color: var(--dc-keimeno);
}
[id="home-section"] h1 { font-size: 1.625rem; font-weight: 400; line-height: 1.375; }
[id="book-section"] h2 { font-size: 1.25rem; line-height: 1.75; }
[id="work-section"] h2,
[id="about-section"] h2,
[id="contact-section"] h2 { font-size: 1.375rem; line-height: 1.375; }
.dc-section p { margin: 0 0 1.375rem; }
.dc-section p:last-child { margin-bottom: 0; }
.dc-section a { color: inherit; }
/* ── Κουμπιά ────────────────────────────────────────────────────────────────
Μετρήθηκαν ΟΛΑ τα κουμπιά και των 19 ενοτήτων με browser, 22/08. Οι εννιά
εμφανίσεις ανάγονται σε τέσσερις: δράση, γλώσσα, λίστα, επιστροφή. Οι δύο
αποχρώσεις λευκού (#fff και #fffcfd) είναι του Carrd και κρατιούνται. */
.dc-buttons { list-style: none; margin: 0 0 1.375rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dc-buttons .wp-block-button { margin: 0; }
/* ⚠️ ΓΙΑΤΙ ΔΕΝ ΥΠΑΡΧΕΙ ΠΙΑ `height` ΕΔΩ — ΤΟ ΚΕΙΜΕΝΟ ΕΒΓΑΙΝΕ ΕΞΩ ΑΠΟ ΤΟ ΚΟΥΜΠΙ.
Ήταν `height: 3rem` (κλειστό ύψος) με `line-height: calc(3rem - 2px)`, δηλαδή
ΜΙΑ γραμμή σε κουτί 52px. Ετικέτα που δεν χωράει σε μία γραμμή τυλίγεται, και
η δεύτερη γραμμή τυπώνεται ΕΞΩ από το περίγραμμα — δεν την κρατάει τίποτα.
Το αρχικό Carrd δεν το παθαίνει επειδή βάζει `white-space: nowrap` σε κάθε
κουμπί (`.buttons-component > li > a`, palio/es.html) και σώζεται με
`overflow: hidden; text-overflow: ellipsis`. Εκεί όμως το κουμπί της «more»
είναι 17,25rem = 299px (`.buttons-component.instance-2 > li > a`), με μονόχωρη
Source Code Pro και letter-spacing -0,15rem, οπότε η ισπανική ετικέτα χωράει
ολόκληρη. Στη δική μας διάταξη η στήλη είναι 190,67px με Inter, άρα η ίδια
λύση θα έκοβε το κείμενο σε «Política de privaci…» — απαράδεκτο σε κουμπί
πλοήγησης. Γι' αυτό αφήνουμε το κείμενο να τυλιχτεί και το κουτί το ΧΩΡΑΕΙ:
το ύψος γίνεται κατώτατο αντί για κλειστό, οπότε σήμερα μένει ολόιδιο (οι δύο
γραμμές χωράνε στα 52px — ο λογαριασμός παρακάτω) και μεγαλώνει μόνο αν κάποτε
μπει ακόμη μακρύτερη ετικέτα. Καμία περίπτωση δεν βγάζει κείμενο απ' έξω.
Μετρημένο 23/08/2026 πάνω στα ΙΔΙΑ αρχεία γραμματοσειράς (assets/fonts/
inter-latin-normal.woff2 στα 300, 0,875rem = 15,17px), διαθέσιμο πλάτος
190,67 − 1rem γέμισμα − 2px περίγραμμα = 171,33px:
es «Política de privacidad y cookies» 222,0px → 2 γραμμές («…y» / «cookies»)
en «Privacy & Cookies Policy» 174,2px → 2 γραμμές («…Cookies» / «Policy»)
fr «Confidentialité & cookies» 174,0px → 2 γραμμές («…&» / «cookies»)
de «Datenschutz & Cookies» 163,6px → 1 γραμμή
gr «Απόρρητο & Cookies» 146,2px → 1 γραμμή
Ακριβώς οι τρεις γλώσσες και ακριβώς οι λέξεις που φαίνονται ξεκρέμαστες στα
στιγμιότυπα elegxos/neo/shots/{es,en,fr}-more-desktop.png.
Η ΑΛΛΑΓΗ ΔΕΝ ΜΕΤΑΚΙΝΕΙ ΤΙΠΟΤΑ. `min-height` αντί για `height` κρατάει το ίδιο
ύψος 3rem· το flex κεντράρει το κείμενο εκεί που το κεντράριζε το line-height.
Υπολογισμένο με τα πραγματικά μέτρα της Inter (ascent 0,9688 / descent 0,2412):
η γραμμή βάσης πέφτει στα 31,517px από την κορυφή ΚΑΙ πριν ΚΑΙ μετά — διαφορά
0,0000px. Δύο γραμμές πιάνουν 41,71px + 2px περίγραμμα = 43,71px, χωράνε μέσα
στα 52px, άρα ούτε το κουμπί ψηλώνει ούτε η σειρά ξεχαρβαλώνεται.
Το 1,375 δεν είναι καινούργιο νούμερο: είναι το line-height που έχουν ήδη οι
επικεφαλίδες #home-section h1 και #work/#about/#contact h2 παρακάτω. Με το
1,625 του σώματος οι δύο γραμμές θα έβγαζαν 51,29px σε κουτί 52px — θα χωρούσαν
με περιθώριο 0,71px, δηλαδή θα κρέμονταν από μια στρογγυλοποίηση. */
.dc-buttons a {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-decoration: none;
text-align: center;
border-radius: var(--dc-radius);
background-color: transparent;
color: var(--dc-keimeno-apalo);
border: 1px solid var(--dc-keimeno-apalo);
font-size: 0.875rem;
font-weight: 300;
min-height: 3rem;
line-height: 1.375;
padding: 0 0.5rem;
transition: background-color .15s ease, color .15s ease;
}
.dc-buttons a:hover,
.dc-buttons a:focus-visible { background-color: rgba(255, 255, 255, .16); }
/* Δράση — τα κουμπιά της αρχικής. ΛΕΥΚΟ φόντο, κείμενο rgb(184,70,15),
χωρίς περίγραμμα, 0,75rem, ύψος 2,75rem. Μετρημένο, όχι εκτιμημένο. */
.dc-buttons.dc-cta a {
background-color: #fff;
color: rgb(184, 70, 15);
border: 0;
font-size: 0.75rem;
font-weight: 400;
/* Ίδια λογική με τη βάση: κλειστό ύψος → κατώτατο ύψος, ώστε μακριά ετικέτα να
μεγαλώνει το κουμπί αντί να ξεφεύγει. Το line-height το δίνει πλέον η βάση
(1,375)· η γραμμή βάσης μένει στα 28,562px από την κορυφή, όση ήταν και με
το `line-height: 2.75rem` — διαφορά 0,0000px, καμία οπτική μετακίνηση.
Εδώ σήμερα ΔΕΝ τυλίγεται καμία ετικέτα: η μακρύτερη είναι η γαλλική
«Comparer & réserver un hôtel», 181,7px σε κουμπί 242,67px (min-width 14rem)
— μετρημένο 23/08. Μπαίνει ως δικλείδα, όχι ως διόρθωση. */
min-height: 2.75rem;
padding: 0 0.5rem 0 0.6rem;
}
.dc-buttons.dc-cta a:hover,
.dc-buttons.dc-cta a:focus-visible { background-color: rgba(255, 255, 255, .88); }
/* Το εσωτερικό κουμπί της ομάδας δράσης (#book) είναι ΓΕΜΑΤΟ τυρκουάζ με λευκό
κείμενο, όχι λευκό σαν τα άλλα τρία. Μετρημένο rgb(57,112,120) — λευκό πάνω
του δίνει 5,58:1, περνάει άνετα. */
.dc-buttons.dc-cta .dc-cta-esot a {
background-color: rgb(57, 112, 120);
color: #fff;
}
.dc-buttons.dc-cta .dc-cta-esot a:hover,
.dc-buttons.dc-cta .dc-cta-esot a:focus-visible { background-color: rgb(47, 95, 102); }
/* Επιστροφή — περίγραμμα 3px, 1rem.
Το `line-height: calc(3rem - 6px)` έφυγε: κεντράριζε τη μία γραμμή γεμίζοντας
ολόκληρο το εσωτερικό ύψος, δουλειά που κάνει τώρα το flex της βάσης. Η γραμμή
βάσης μένει στα 32,305px από την κορυφή, ίδια με πριν — διαφορά 0,0000px.
Οι ετικέτες εδώ είναι μονόλεκτες σε όλες τις γλώσσες (Back, Αρχική, Zurück,
Retour, Volver), οπότε δεν τυλίγεται τίποτα ούτως ή άλλως. */
.dc-buttons.dc-s10 a {
border: 3px solid var(--dc-keimeno);
color: var(--dc-keimeno);
font-size: 1rem;
font-weight: 400;
padding: 0 1.5rem;
}
/* 🔴 ΕΙΧΕ ΕΣΟΧΗ 3rem ΠΟΥ ΔΕΝ ΥΠΑΡΧΕΙ ΣΤΟ CARRD — διορθώθηκε 14/09/2026.
Το παλιό σχόλιο έλεγε «ξεκινούν στο x=122 ενώ το κείμενο στο x=69». Το 69 όμως
είναι η άκρη της ΣΤΗΛΗΣ, όχι του κειμένου: μετρημένο στο ίδιο αρχείο Carrd,
στην ενότητα hotels, **το κείμενο ξεκινά κι αυτό στο 122**. Δηλαδή στο Carrd
κείμενο, κουμπιά παρόχων και «Back» είναι ΟΛΑ στην ίδια κατακόρυφη.
Η εσοχή μας τα έσπρωχνε στο 156 ενώ το «Back» έμενε στο 104 — 52px διαφορά
μέσα στην ίδια ενότητα. Ο πελάτης το είδε: «η ομοιόμορφη στοίχιση κερδίζει
το μάτι». Η εσοχή φεύγει ΜΟΝΟ σε υπολογιστή και ταμπλέτα: ζήτησε ρητά
«η στοίχιση στα κινητά να μείνει ως έχει». */
.dc-buttons.dc-s4 { padding: 0 3rem; }
@media (min-width: 737px) {
.dc-buttons.dc-s4 { padding: 0; }
}
/* Τα κουμπιά του Carrd έχουν ΙΣΟ πλάτος και μπαίνουν ΤΡΙΑ ανά σειρά.
⚠️ Το `auto-fit` με ελάχιστο 10,5rem έβγαζε **δύο** ανά σειρά (256px το καθένα),
όχι τρία: μετρημένο 14/09/2026 στην ενότητα hotels, 1440px —
Carrd Booking@122/182 Aviasales@320/182 Hotels.com@518/182 (τρία, κενό 16px)
εμείς Booking@156/256 Aviasales@420/256 (δύο)
Σε υπολογιστή και ταμπλέτα μπαίνουν ρητά τρεις στήλες. Κάτω από 737px μένει το
`auto-fit`, δηλαδή η συμπεριφορά που έχει σήμερα το κινητό — αμετάβλητη. */
.dc-buttons.dc-s4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
gap: 0.5rem;
}
@media (min-width: 737px) {
.dc-buttons.dc-s4 { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
.dc-buttons.dc-s4 a { width: 100%; }
/* Οι σειρές δράσης της αρχικής ήταν ΚΕΝΤΡΑΡΙΣΜΕΝΕΣ στο Carrd (μετρημένο 22/08,
και επιβεβαιωμένο 14/09: Carrd και εμείς ξεκινούσαμε στο ίδιο pixel, 165).
🔴 Ο πελάτης ζήτησε ρητά 14/09 να πάνε ΑΡΙΣΤΕΡΑ: «δεν στοιχίζεις τα 4 μεγάλα
κουμπιά στα αριστερά». Είναι συνειδητή απόκλιση από το Carrd, δική του επιλογή,
για ομοιόμορφη στοίχιση με τον τίτλο και το κείμενο. Στο κινητό δεν αλλάζει
τίποτα — το είχε ζητήσει με κεφαλαία. */
.dc-buttons.dc-cta { justify-content: center; }
@media (min-width: 737px) {
.dc-buttons.dc-cta { justify-content: flex-start; }
}
/* Στην αρχική το μετρημένο πλάτος είναι 243px ≈ 14rem, δύο ανά σειρά. */
.dc-buttons.dc-cta a { min-width: 14rem; }
/* ── Το hero ΑΝΑ ΓΛΩΣΣΑ ────────────────────────────────────────────────────
🔴 Κάθε γλώσσα ήταν ΞΕΧΩΡΙΣΤΟ site στο Carrd, με δική του μορφοποίηση. Το
πρώτο πέρασμα της 11/09 έβαλε σε όλες τις τιμές της ελληνικής — και η ελληνική
είναι ακριβώς η εξαίρεση. Μετρημένο 11/09 στα elegxos/palio/{en,gr,de,fr,es}
σε 1440 και 412 (τιμές σε rem, ίδιες σε κάθε ρίζα):
en gr de fr es
τίτλος διάστιχο 1,125 1,375 1,125 1,125 1,125
τίτλος → κείμ. 1 1,375 1 1 1
κείμ. → CTA 2,5 2,125 2,125 2,125 2,125
CTA γράμματα 0,875 0,75 0,875 0,875 0,875
CTA αραίωση 0,1 0,1 0 −0,1 −0,05
CTA θόλωμα 0,875 0,5 0,875 0,875 0,875
CTA → εικον. 3,5625 2,125 2,125 2,125 2,125
copyright 0,75 0,625 0,625 0,875 0,75
Κοινά σε όλες: πλάτος CTA 14rem, ύψος 2,75rem, κενό 1rem, σκιά 0 0,5rem.
Γι' αυτό μεταβλητές: οι κανόνες γράφονται ΜΙΑ φορά, οι γλώσσες αλλάζουν τιμές.
⚠️ ΙΕΡΑΡΧΙΑ: το `:lang(xx) #home-section` νικάει το σκέτο `#home-section`
ακόμη και μέσα σε media query. Όποια γλώσσα δίνει δική της τιμή για τον
υπολογιστή, ΠΡΕΠΕΙ να δίνει δική της και για το κινητό (βλ. κάτω). */
[id="home-section"] { /* de — και βάση για en, fr, es */
--dc-h1-lh: 1.125;
--dc-keim-mb: 1rem;
--dc-cta-mt: 2.125rem;
--dc-cta-mb: 2.125rem;
--dc-cta-fs: 0.875rem;
--dc-cta-ls: 0;
--dc-cta-blur: 0.875rem;
--dc-links-fs: 0.625rem;
}
:lang(el) [id="home-section"] { --dc-h1-lh: 1.375; --dc-keim-mb: 1.375rem; --dc-cta-fs: 0.75rem; --dc-cta-ls: 0.1rem; --dc-cta-blur: 0.5rem; }
:lang(en) [id="home-section"] { --dc-cta-ls: 0.1rem; --dc-cta-mt: 2.5rem; --dc-cta-mb: 3.5625rem; --dc-links-fs: 0.75rem; }
:lang(fr) [id="home-section"] { --dc-cta-ls: -0.1rem; --dc-links-fs: 0.875rem; }
:lang(es) [id="home-section"] { --dc-cta-ls: -0.05rem; --dc-links-fs: 0.75rem; }
[id="home-section"] h1 { line-height: var(--dc-h1-lh); margin-bottom: var(--dc-keim-mb); }
[id="home-section"] p { margin-bottom: var(--dc-keim-mb); }
[id="home-section"] .dc-buttons.dc-cta { gap: 1rem; margin: var(--dc-cta-mt) 0 var(--dc-cta-mb); }
[id="home-section"] .dc-buttons.dc-cta a {
font-size: var(--dc-cta-fs);
letter-spacing: var(--dc-cta-ls);
box-shadow: 0 0.5rem var(--dc-cta-blur) 0 rgba(0, 0, 0, 0.25);
}
[id="home-section"] .dc-links { font-size: var(--dc-links-fs); }
/* ── Ο διακόπτης γλώσσας ────────────────────────────────────────────────────
ΔΕΝ είναι λευκό πλήκτρο: περίγραμμα 1px λευκό, διάφανο φόντο, λευκό κείμενο,
0,875rem/400, ύψος 2,5rem. Μετρημένο 22/08. */
.dc-glosses { list-style: none; margin: 0 0 1.375rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dc-glosses a {
display: inline-block; box-sizing: border-box; text-decoration: none; text-align: center;
background: transparent; color: var(--dc-keimeno);
border: 1px solid var(--dc-keimeno);
border-radius: var(--dc-radius);
font-size: 0.875rem; font-weight: 400;
height: 2.5rem; line-height: calc(2.5rem - 2px);
padding: 0 0.5rem; min-width: 2.5rem;
}
.dc-glosses a:hover, .dc-glosses a:focus-visible { background: rgba(255, 255, 255, .16); }
/* Στην αρχική είναι του Carrd ΑΚΡΙΒΩΣ, μετρημένο 11/09: μονόχωρη Source Code Pro,
ΣΤΑΘΕΡΟ πλάτος 3,625rem (όχι όσο το κείμενο — εμείς βγάζαμε 43px, το Carrd 63),
κενό 1rem, 2,125rem κάτω από τη σειρά.
⚠️ Μόνο #home-section: ο ίδιος διακόπτης υπάρχει και στο #blog-section, που
ΔΕΝ μετρήθηκε. Μην το γενικεύσεις χωρίς μέτρηση εκεί. */
[id="home-section"] .dc-glosses { gap: 1rem; margin-bottom: 2.125rem; }
[id="home-section"] .dc-glosses a {
font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
width: 3.625rem;
min-width: 0;
}
/* ── Κοινωνικά ──────────────────────────────────────────────────────────────
Το Carrd κρύβει την ετικέτα (display:none) και χρωματίζει κάθε εικονίδιο με
το δικό του χρώμα. Και τα επτά μετρήθηκαν. Η ετικέτα μένει στο σήμα για τους
αναγνώστες οθόνης, αλλά δεν φαίνεται. */
.dc-icons { list-style: none; margin: 0 0 2.0625rem; padding: 0; display: flex; flex-wrap: wrap; gap: 1.375rem; }
/* Χωρίς line-height 0 η γραμμή κειμένου του li άφηνε 8px κάτω από τα εικονίδια:
η σειρά μετρήθηκε 36px ενώ του Carrd είναι 28 (όσο το ίδιο το εικονίδιο). */
.dc-icons li { margin: 0; line-height: 0; }
.dc-icons a { display: inline-flex; align-items: center; text-decoration: none; }
.dc-icons span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dc-icons svg { width: 1.625rem; height: 1.625rem; }
/* ⚠️ ΤΟ ΧΡΩΜΑ ΔΕΝΕΤΑΙ ΣΤΟ ΔΙΚΤΥΟ, ΟΧΙ ΣΤΗ ΘΕΣΗ.
Η σειρά αλλάζει ανά γλώσσα: ελληνική → Snapchat 6ο, Blogger 7ο·
γερμανική → ανάποδα. Με nth-child τα δύο τελευταία έβγαιναν με
ανεστραμμένα χρώματα. Βρέθηκε 22/08 στη σύγκριση 190 στιγμιότυπων. */
.dc-icons .dc-ic-facebook svg { fill: rgb(0, 56, 255); }
.dc-icons .dc-ic-instagram svg { fill: rgb(255, 61, 0); }
.dc-icons .dc-ic-tiktok svg { fill: rgb(255, 255, 255); }
.dc-icons .dc-ic-youtube svg { fill: rgb(255, 46, 0); }
.dc-icons .dc-ic-pinterest svg { fill: rgb(255, 15, 0); }
.dc-icons .dc-ic-snapchat svg { fill: rgb(255, 229, 0); }
.dc-icons .dc-ic-blogger svg { fill: rgb(255, 138, 0); }
/* ── Εικόνα ─────────────────────────────────────────────────────────────────
⚠️ ΤΟ `aspect-ratio` ΚΡΑΤΑΕΙ ΤΗ ΘΕΣΗ ΤΟΥ ΛΟΓΟΤΥΠΟΥ ΟΣΟ ΚΑΤΕΒΑΙΝΕΙ.
Το ![]()
του λογότυπου βγαίνει ΧΩΡΙΣ width/height — δες elegxos/neo/es.html:
, κανένα από τα δύο. Με μόνο `height: auto`, ο browser δεν
ξέρει τι σχήμα έχει η εικόνα πριν φτάσουν τα bytes: κρατάει ύψος 0 και μόλις
φορτώσει σπρώχνει τη στήλη κάτω.
🔴 ΔΙΟΡΘΩΣΗ ΠΡΟΗΓΟΥΜΕΝΟΥ ΣΧΟΛΙΟΥ (23/08/2026, από αντιπαραθετικό έλεγχο):
εδώ έγραφε ότι ΑΥΤΗ η εικόνα προκάλεσε το `cls 0,3147` της αγγλικής στο
elegxos/psi-neo.json. **Δεν μπορεί.** Το λογότυπο ζει ΜΟΝΟ μέσα στο
`#contact-section` (επαληθεύτηκε στα elegxos/neo/*.html: μία μόνο εμφάνιση σε
ενότητα, και μία ακόμη μέσα στο JSON-LD, που δεν ζωγραφίζεται). Στη φόρτωση
της αρχικής η ενότητα αυτή είναι `display: none`, οπότε δεν συμμετέχει καθόλου
στη διάταξη. **Η αιτία εκείνης της μίας μέτρησης δεν έχει βρεθεί** και δεν
πρέπει να αποδίδεται εδώ.
Ο κανόνας μένει γιατί στέκει μόνος του: μια εικόνα χωρίς δηλωμένες διαστάσεις
ΘΑ μετακινήσει το περιεχόμενο κάτω της, στην ενότητα όπου εμφανίζεται.
Το CLS ήταν 0 σε 14 από τις 15 μετρήσεις και η διάμεσος είναι 0 και στις πέντε
γλώσσες — άρα δεν είναι επείγον, είναι σωστό.
Το 1/1 ΔΕΝ είναι μαντεψιά: το theme/assets/img/logo.jpg είναι 308×308 px
(διαβασμένο από τον δείκτη SOF0 του ίδιου του αρχείου) και το logo.webp
επίσης 308×308 (κεφαλίδα VP8). Λόγος ακριβώς 1:1, άρα το δεσμευμένο κουτί
είναι ίδιο με το τελικό και δεν κουνιέται ούτε pixel όταν φορτώσει:
5,125rem = 88,83px στον υπολογιστή, 75,17px στο κινητό — και στις δύο
περιπτώσεις τετράγωνο, γιατί ο λόγος δεν εξαρτάται από τη ρίζα.
Το `object-fit` δεν κάνει τίποτα σήμερα (τετράγωνη εικόνα σε τετράγωνο κουτί).
Μπαίνει για να μη ΠΑΡΑΜΟΡΦΩΘΕΙ σιωπηλά το λογότυπο αν κάποτε ανέβει αρχείο με
άλλον λόγο πλευρών: θα χωρέσει ολόκληρο μέσα αντί να τεντωθεί.
Το σήμα του κατασκευαστή παρακάτω ΔΕΝ έχει το ίδιο πρόβλημα και δεν το
πειράζουμε: το δικό του ![]()
βγαίνει ήδη με width="57" height="26". */
.dc-image img {
display: block;
width: 5.125rem;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
margin: 0 0 1.375rem;
}
/* ── Copyright ──────────────────────────────────────────────────────────── */
.dc-links { list-style: none; margin: 1.375rem 0 0; padding: 0; font-size: 0.625rem; }
.dc-links a { color: var(--dc-keimeno); text-decoration: underline; }
/* Το ΒΑΡΟΣ και η ΓΡΑΜΜΑΤΟΣΕΙΡΑ της γραμμής, ανά γλώσσα — ήταν η τελευταία
διαφορά από το Carrd, και είχε υποσχεθεί γραπτά στον πελάτη.
ΜΕΤΡΗΜΕΝΟ 12/09/2026, ίδιο κείμενο, πλάτος 1440, πλάτος 1ου συνδέσμου:
Carrd πριν μετά
en Inter 200 266px Inter 300 271 → 265,5 (−0,5px)
gr Inter 400 231px Inter 300 226 → 231 (±0)
de Reddit Mono 400 329px Inter 300 298 → 329 (±0)
fr Inter 300 502px Inter 300 502 → 502 (±0, ήδη σωστό)
es Reddit Mono 500 439px Inter 300 371 → 438 (−1px)
⚠️ Το 200 του en ΔΕΝ έπιανε με τη δήλωση `font-weight:300 400` της fonts.css:
ο browser το στρογγύλευε στο 300 και το πλάτος έμενε 271px, ενώ το computed
style έδειχνε κανονικά «200». Τα αρχεία μας είναι μεταβλητά 100–900, οπότε το
εύρος άνοιξε σε 200–400 — χωρίς κανένα νέο αρχείο.
Η fr δεν χρειάζεται κανόνα: 300 και Inter είναι ήδη η βάση μας. */
:lang(en) [id="home-section"] .dc-links { font-weight: 200; }
:lang(el) [id="home-section"] .dc-links { font-weight: 400; }
:lang(de) [id="home-section"] .dc-links,
:lang(es) [id="home-section"] .dc-links { font-family: 'Reddit Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
:lang(de) [id="home-section"] .dc-links { font-weight: 400; }
:lang(es) [id="home-section"] .dc-links { font-weight: 500; }
/* Η ΔΟΜΗ της γραμμής, όπως στο Carrd. ΜΕΤΡΗΜΕΝΟ 13/09/2026 στα 412px:
Carrd ul flex + wrap, κενό 7,33px (0,5rem), a block, διάστιχο 1,5
εμείς ul block, a inline, διάστιχο 1,625 (της σελίδας)
Αποτέλεσμα: ύψος γραμμής fr 38→42 · es 33→36 · de 14→15 — ίδιο κείμενο,
ίδια γραμματοσειρά, μόνο το διάστιχο. Το «πλάτος» που έβγαζε η σύγκριση
(fr 353→284) ήταν ψεύτικη διαφορά: inline στοιχείο σε δύο γραμμές μετράει
στενότερο κουτί από το block, ενώ το κείμενο σπάει στο ίδιο σημείο. */
[id="home-section"] .dc-links { display: flex; flex-wrap: wrap; gap: 0.5rem; line-height: 1.5; }
[id="home-section"] .dc-links a { display: block; }
/* ── Προτιμήσεις cookies ────────────────────────────────────────────────────
Ο σύνδεσμος που ξανανοίγει το παράθυρο συγκατάθεσης.
⚠️ Και οι δύο κλάσεις: η νέα (dc-cookies) και η παλιά (dc-termly), γιατί ζουν
μέσα στο ΠΕΡΙΕΧΟΜΕΝΟ των πέντε σελίδων. Έτσι, ό,τι σειρά κι αν έχουν οι
αλλαγές, η γραμμή δεν μένει ποτέ χωρίς μορφοποίηση. */
.dc-cookies, .dc-termly { margin: 0 0 1.375rem; font-size: 0.875rem; }
.dc-cookies a, .dc-termly a { color: var(--dc-keimeno); text-decoration: underline; cursor: pointer; }
/* ── Σελίδα εργαλείου (page-ergaleio.php) ───────────────────────────────────
Ζητήθηκε 12/09/2026: «η σελίδα κληρονομεί το hero φόντο, το περιεχόμενο
κάθεται πάνω στη φωτογραφία. Υπάρχει template για απλές σελίδες εργαλείων,
με καθαρό φόντο και κανονική στοίχιση;»
⚠️ Ο ΕΠΙΛΟΓΕΑΣ: το WordPress βάζει μόνο του στο την κλάση
`page-template-page-ergaleio` (και σε άλλες εκδόσεις `…-php`). Το
`[class*=…]` πιάνει και τις δύο μορφές, ώστε να μη σπάσει σιωπηλά.
Το ::before ΔΕΝ αρκεί να χάσει την εικόνα: μένει το σκούρο πέπλο του
gradient, οπότε φεύγει ολόκληρο. */
/* ⚠️ `~=` και ΟΧΙ `*=`: ταιριάζει ΑΚΡΙΒΗ λέξη στη λίστα κλάσεων. Με `*=` θα
έπιανε και το `page-template-page-ergaleio-foto`, δηλαδή το πρότυπο ΜΕ τη
φωτογραφία θα την έχανε σιωπηλά. Μετρημένες κλάσεις στη σελίδα 84:
`page-template page-template-page-ergaleio page-template-page-ergaleio-php`. */
body[class~="page-template-page-ergaleio"]::before { display: none; }
.dc-ergaleio { align-items: flex-start; min-height: 0; }
.dc-ergaleio .dc-inner { padding-top: 3rem; padding-bottom: 3rem; }
.dc-ergaleio-titlos { font-size: 1.625rem; font-weight: 400; line-height: 1.375; margin: 0 0 1.375rem; }
/* Από 14/09/2026 είναι το ΔΙΚΟ ΤΟΥ κουμπί «Back», ίδιο με των ενοτήτων: παίρνει
τη μορφή του από το `.dc-buttons.dc-s10`. Εδώ μένει μόνο η απόσταση — καμία
υπογράμμιση, κανένα δεύτερο μέγεθος γραμμάτων. */
.dc-ergaleio-piso { margin: 2.125rem 0 0; }
/* Ό,τι βάλει μέσα ο πελάτης να μη ξεφεύγει από τη στήλη — τα widget τρίτων
έρχονται συχνά με σταθερό πλάτος σε pixel. */
.dc-ergaleio .dc-inner iframe,
.dc-ergaleio .dc-inner img,
.dc-ergaleio .dc-inner table { max-width: 100%; }
.dc-ergaleio .dc-inner table { display: block; overflow-x: auto; }
/* ── Το παράθυρο συγκατάθεσης ───────────────────────────────────────────────
Δικό μας, ~4 KB μαζί με τα κείμενα των πέντε γλωσσών. Μπαίνει ΕΔΩ και όχι σε
δικό του φύλλο: το φύλλο θα ήταν δεύτερο αίτημα σε κάθε φόρτωση, και όλη η
δουλειά μας στην ταχύτητα ήταν να λιγοστέψουν τα αιτήματα.
Η λογική και το γιατί έφυγε το Termly: assets/js/synainesi.js */
.dc-syn {
position: fixed;
z-index: 9999;
left: 1rem; right: 1rem; bottom: 1rem;
display: flex; justify-content: flex-start;
pointer-events: none;
}
.dc-syn-kouti {
pointer-events: auto;
box-sizing: border-box;
width: 100%; max-width: 26rem;
max-height: calc(100vh - 2rem);
overflow-y: auto;
padding: 1.25rem;
border-radius: var(--dc-radius);
background: rgb(52, 74, 100);
color: var(--dc-keimeno);
box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
font-size: 0.8125rem;
line-height: 1.5;
}
.dc-syn--full { align-items: center; justify-content: center; }
.dc-syn--full .dc-syn-kouti { max-width: 32rem; }
.dc-syn-titlos { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 400; line-height: 1.3; }
.dc-syn-keimeno { margin: 0 0 0.875rem; }
.dc-syn-perissotera { margin: 0.75rem 0 0; font-size: 0.75rem; }
.dc-syn-perissotera a { color: var(--dc-keimeno); text-decoration: underline; }
/* Οι κατηγορίες, στις ρυθμίσεις */
.dc-syn-kat { margin: 0 0 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem;
background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.dc-syn-kat-t { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; cursor: pointer; }
.dc-syn-kat-t input { width: 1rem; height: 1rem; accent-color: #fff; cursor: pointer; }
.dc-syn-kat-t input:disabled { cursor: default; opacity: 0.6; }
.dc-syn-kat-k { margin: 0.375rem 0 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.82); }
/* Τα κουμπιά. Ίδιο σχήμα με τα κουμπιά του site, μικρότερα. */
.dc-syn-koumpia { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.dc-syn-btn {
flex: 1 1 auto;
min-height: 2.25rem;
padding: 0.375rem 0.875rem;
border-radius: 0.5rem;
font: inherit; font-size: 0.8125rem;
cursor: pointer;
border: 1px solid transparent;
}
.dc-syn-btn--kyrio { background: #fff; color: rgb(40, 58, 80); border-color: #fff; }
.dc-syn-btn--kyrio:hover { background: rgba(255, 255, 255, 0.88); }
.dc-syn-btn--defterevon { background: transparent; color: var(--dc-keimeno); border-color: rgba(255, 255, 255, 0.55); }
.dc-syn-btn--defterevon:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.dc-syn-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* ⚠️ ΜΕΤΑ τους βασικούς κανόνες — με ίδια ειδικότητα κερδίζει ο ΤΕΛΕΥΤΑΙΟΣ.
Μπήκε πρώτα πιο πάνω και δεν έπιανε: το `max-width: 26rem` της βάσης το
ακύρωνε, και στα 1920 το κουτί έβγαινε 624px αντί για 504.
Ζητήθηκε 14/09: «το pop-up των cookies πιο μικρό και να εμφανίζεται κατά δεξιά
και όχι αριστερά». Σε μεγάλη οθόνη πάει δεξιά και μαζεύεται· στο κινητό μένει
όπως είναι, γιατί εκεί πιάνει όλο το πλάτος ούτως ή άλλως. */
@media (min-width: 737px) {
.dc-syn { justify-content: flex-end; }
.dc-syn-kouti { max-width: 21rem; padding: 0.875rem 1rem; font-size: 0.75rem; }
.dc-syn-titlos { font-size: 0.875rem; }
.dc-syn-btn { min-height: 2rem; padding: 0.25rem 0.75rem; font-size: 0.75rem; }
.dc-syn--full { justify-content: center; }
.dc-syn--full .dc-syn-kouti { max-width: 32rem; padding: 1.25rem; font-size: 0.8125rem; }
}
/* Στο κινητό πιάνει όλο το πλάτος και τα κουμπιά μπαίνουν σε στήλη όταν
χρειάζεται — τα γερμανικά και τα γαλλικά κείμενα είναι τα πιο μακριά. */
/* ⚠️ ΣΤΟ ΚΙΝΗΤΟ ΤΟ ΠΑΡΑΘΥΡΟ ΕΚΡΥΒΕ ΤΗ ΦΩΤΟΓΡΑΦΙΑ.
Μετρημένο 13/09/2026 σε 390×844: το κουτί έπιανε ~278px, δηλαδή το 33% της
οθόνης, και σκέπαζε ακριβώς τη γωνία όπου στέκεται η κοπέλα — ο πελάτης το
ανέφερε ως «η κοπέλα δεν φαίνεται πλέον ολόκληρη». Τα τρία κουμπιά σε στήλη
ήταν η μισή αιτία. Εδώ μπαίνουν σε μία σειρά και τα γράμματα μικραίνουν. */
@media (max-width: 480px) {
.dc-syn { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
.dc-syn-kouti { max-width: none; padding: 0.75rem 0.875rem; font-size: 0.75rem; line-height: 1.45; }
.dc-syn-titlos { font-size: 0.875rem; margin-bottom: 0.375rem; }
.dc-syn-keimeno { margin-bottom: 0.625rem; }
.dc-syn-perissotera { margin-top: 0.5rem; font-size: 0.6875rem; }
.dc-syn-koumpia { gap: 0.375rem; margin-top: 0.625rem; }
.dc-syn-btn { flex: 1 1 auto; min-height: 2rem; padding: 0.3125rem 0.5rem; font-size: 0.75rem; }
/* Οι ρυθμίσεις έχουν τρεις κατηγορίες και θέλουν χώρο — εκεί μόνο, στήλη. */
.dc-syn--full .dc-syn-btn { flex: 1 1 100%; }
}
/* ── Σήμα κατασκευαστή ──────────────────────────────────────────────────── */
/* ⚠️ Είχε opacity .75 και ΕΠΕΦΤΕ στο 3,95:1 — ήταν η ΜΟΝΗ αποτυχία
προσβασιμότητας του νέου site, μετρημένη από το PageSpeed στις 22/08 00:33.
Λευκό στο ίδιο φόντο δίνει 5,63:1. */
.dc-sima { margin: 1.375rem 0 0; }
.dc-sima a {
display: inline-flex; align-items: center; gap: 0.5rem;
color: var(--dc-keimeno); text-decoration: none;
font-size: 0.8rem; line-height: 1;
}
.dc-sima img { height: 1.5rem; width: auto; display: block; border: 0; }
.dc-sima a:hover span, .dc-sima a:focus-visible span { text-decoration: underline; }
/* ── Κινητό ─────────────────────────────────────────────────────────────── */
/* ── Κινητό ─────────────────────────────────────────────────────────────────
⚠️ Το Carrd ΜΙΚΡΑΙΝΕΙ τη ρίζα σε μικρή οθόνη: 17,3333px → 14,6667px.
Μετρημένο 22/08 σε πλάτος 412. Χωρίς αυτό το κείμενο έβγαινε μεγαλύτερο,
έπιανε περισσότερες γραμμές, και η στήλη ψήλωνε — ήταν η μεγαλύτερη οπτική
διαφορά στη σύγκριση των 190 στιγμιότυπων (έως 21%).
Επειδή ΟΛΑ τα μεγέθη είναι σε rem, αρκεί αυτή η μία γραμμή. */
@media (max-width: 736px) {
/* Η ρίζα 14,6667 δεν μπαίνει πια εδώ — το Carrd την αλλάζει ήδη στα 980
(βλ. την κλίμακα στην κορυφή). Εδώ μένει ό,τι αλλάζει όντως στα 736. */
.dc-inner { padding: 1.5rem 2rem; } /* 22px 29,3333px */
/* Στο κινητό το Carrd ΣΦΙΓΓΕΙ τις αποστάσεις του hero κατά ×0,75 στα κουμπιά
και στα εικονίδια. Μετρημένο 11/09 σε 736, 600, 480 και 360. */
[id="home-section"] .dc-glosses { margin-bottom: 1.59375rem; } /* 2,125 × 0,75 */
[id="home-section"] { --dc-cta-mt: 1.59375rem; --dc-cta-mb: 1.59375rem; }
/* Η αγγλική έχει δικές της αποστάσεις και ΔΕΝ σφίγγουν ×0,75 — μετρημένο 412. */
:lang(en) [id="home-section"] { --dc-cta-mt: 2.375rem; --dc-cta-mb: 3.047rem; }
[id="home-section"] .dc-icons { margin-bottom: 1.546875rem; } /* 2,0625 × 0,75 */
}
/* Κάτω από 480 σφίγγει και το κείμενο: ×0,875, και κάτω από 360 ×0,75. */
@media (max-width: 480px) {
[id="home-section"] { --dc-keim-mb: 0.875rem; } /* 1 × 0,875 */
:lang(el) [id="home-section"] { --dc-keim-mb: 1.203125rem; } /* 1,375 × 0,875 */
}
@media (max-width: 360px) {
.dc-inner { padding-left: 1.5rem; padding-right: 1.5rem; } /* Carrd: 22px */
[id="home-section"] { --dc-keim-mb: 0.75rem; } /* 1 × 0,75 */
:lang(el) [id="home-section"] { --dc-keim-mb: 1.03125rem; } /* 1,375 × 0,75 */
[id="home-section"] h1 { font-size: 1.5rem; } /* Carrd: 22px, όχι 23,8 */
[id="home-section"] .dc-glosses, [id="home-section"] .dc-buttons.dc-cta { gap: 0.75rem; }
/* Η αγγλική έχει ΔΙΚΑ ΤΗΣ κενά γύρω από τα κουμπιά δράσης, και στα 360 το
Carrd τα ρίχνει κι άλλο. ΜΕΤΡΗΜΕΝΟ 12/09/2026 (ρίζα 14,67px):
Carrd εμείς πριν
πριν τα κουμπιά 28px 35px (2,5 × 0,75 = 1,875rem)
κουμπιά → εικονίδια 39px 45px (3,5625 × 0,75 = 2,672rem)
Στα 412 οι τιμές του Carrd είναι όντως 35/45 — γι' αυτό ο κανόνας των 736
μένει ως είναι και η διόρθωση μπαίνει ΜΟΝΟ εδώ. Οι άλλες τέσσερις γλώσσες
δεν έχουν διαφορά σε κενά ούτε στα 412 ούτε στα 360. */
:lang(en) [id="home-section"] { --dc-cta-mt: 1.875rem; --dc-cta-mb: 2.671875rem; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ELEMENTOR — η ίδια εμφάνιση πάνω στη δομή του Elementor (16/09/2026)
═══════════════════════════════════════════════════════════════════════════
Ο πελάτης ζήτησε Elementor· οι σελίδες μετατράπηκαν αυτόματα
(tools/elementor/metatropi.php). Οι κανόνες πιο πάνω γράφτηκαν για τα μπλοκ
του WordPress· εδώ μπαίνουν ΜΟΝΟ όσα αλλάζουν επειδή το Elementor τυλίγει
αλλιώς τα ίδια στοιχεία. Η ισοδυναμία μετριέται στοιχείο προς στοιχείο με
το tools/elementor/sygkrisi.mjs (θέση, μέγεθος, χρώμα), όχι με το μάτι.
── Η ΙΕΡΑΡΧΙΑ ΠΟΥ ΚΡΑΤΑΕΙ ΤΟΝ ΠΕΛΑΤΗ ΑΦΕΝΤΙΚΟ ──
Το Elementor έχει τρία επίπεδα κανόνων:
1. βασικοί του (π.χ. `.e-con`, `.elementor-button`) ειδικότητα 0,1,0–0,2,0
2. ΑΥΤΟΙ ΕΔΩ — η εμφάνιση του site ως αφετηρία 0,2,0–0,3,1
3. ό,τι αλλάζει ο πελάτης στο πάνελ ανά στοιχείο 0,3,0 και πάνω
Γι' αυτό οι αποστάσεις των containers δίνονται ως ΜΕΤΑΒΛΗΤΕΣ του Elementor
(--padding-top κλπ.) και όχι ως padding: το πάνελ γράφει τις ίδιες
μεταβλητές, άρα μια αλλαγή με το ποντίκι πιάνει αμέσως. */
/* Η ενότητα: 2rem γύρω γύρω, όπως το .wp-block-group__inner-container πιο
πάνω — και 0 στις τέσσερις που δεν το έχουν ούτε στο Carrd. */
.dc-section.e-con {
--padding-top: 2rem; --padding-right: 2rem; --padding-bottom: 2rem; --padding-left: 2rem;
--gap: 0px; --row-gap: 0px; --column-gap: 0px;
}
.dc-section.e-con:where([id="home-section"], [id="work-section"], [id="about-section"], [id="contact-section"]) {
--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
}
/* Ομάδα κουμπιών: το περιθώριο και το κενό της βάσης (.dc-buttons), ως
μεταβλητές. Όπου πιο πάνω δίνεται απευθείας τιμή με μεγαλύτερη ειδικότητα
(#home-section .dc-cta, .dc-s4), εκείνη νικά όπως και στα μπλοκ. */
.dc-buttons.e-con {
--margin-bottom: 1.375rem;
--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
--gap: 0.5rem; --row-gap: 0.5rem; --column-gap: 0.5rem;
--flex-wrap: wrap;
}
/* Το κείμενο: κάθε widget τυλίγει τις παραγράφους του, άρα η τελευταία είναι
πάντα :last-child. Στα μπλοκ δεν ήταν — ακολουθούσαν κουμπιά. Ισχύει για το
κείμενο ΚΑΙ για το κομμάτι HTML (το «Consent Preferences» της πολιτικής
απορρήτου έχανε 20px, μετρημένο). Το μηδέν μένει μόνο όταν το widget κλείνει
την ενότητα. */
.dc-section .elementor-widget p:last-child { margin-bottom: 1.375rem; }
.dc-section > .elementor-widget:last-child p:last-child { margin-bottom: 0; }
/* Οι σύνδεσμοι μέσα στο κείμενο: το Elementor σβήνει την υπογράμμιση ΣΕ ΟΛΟΥΣ
(`.elementor a{text-decoration:none}`). Στα μπλοκ ήταν υπογραμμισμένοι: το
email, το «Consent Preferences», η γραμμή copyright. Μετρημένο pixel προς
pixel, 16/09. Επιστρέφει ΜΟΝΟ σε αυτούς· κουμπιά, γλώσσες και εικονίδια
μένουν χωρίς, όπως ήταν. */
.elementor .elementor-widget-text-editor a,
.elementor .dc-links a,
.elementor .dc-cookies a { text-decoration: underline; }
/* Η εικόνα: το Elementor την κάνει inline-block (κενό κάτω από τη γραμμή). */
.dc-image.elementor-widget-image img { display: block; }
/* 🔴 Το Elementor βάζει ΛΕΥΚΟ κείμενο σε κάθε κουμπί που έχει πατηθεί ή έχει
τον δείκτη από πάνω (`.elementor-button:visited/:hover/:focus`). Στα λευκά
κουμπιά της αρχικής το κείμενο θα εξαφανιζόταν μετά το πρώτο κλικ. Εδώ κάθε
κουμπί κρατά το χρώμα του — όπως και στα μπλοκ, όπου στο hover αλλάζει μόνο
το φόντο. */
.dc-buttons a.elementor-button:is(:hover, :focus, :visited) { color: var(--dc-keimeno-apalo); }
.dc-buttons.dc-cta a.elementor-button:is(:hover, :focus, :visited) { color: rgb(184, 70, 15); }
.dc-buttons.dc-cta .dc-cta-esot a.elementor-button:is(:hover, :focus, :visited) { color: #fff; }
.dc-buttons.dc-s10 a.elementor-button:is(:hover, :focus, :visited) { color: var(--dc-keimeno); }
/* ── Μέσα στον επεξεργαστή του Elementor ──
Εκεί φαίνονται ΟΛΕΣ οι ενότητες, η μία κάτω από την άλλη, για να μπορεί ο
πελάτης να τις επεξεργαστεί χωρίς να ψάχνει το σωστό #. Το παράθυρο
cookies κρύβεται: δεν έχει θέση πάνω στο περιεχόμενο που γράφει. */
.elementor-editor-active .dc-section { display: var(--display, flex) !important; }
.elementor-editor-active [class*="dc-syn"] { display: none !important; }
/* ── Σελίδες εργαλείων με χειροποίητο CSS του πελάτη ─────────────────────────
Στη σελίδα του μετατροπέα ο πελάτης τοποθετεί μόνος του κάθε κομμάτι, με
απόλυτες θέσεις μέσα στο `.dc-inner` (Προσαρμογή → Πρόσθετο CSS):
body.page-id-84 .dc-inner { position: relative; min-height: 950px }
body.page-id-84 .dc-faq { position: absolute; top: 180px; left: 520px }
Το Elementor δίνει σε ΚΑΘΕ widget `position: relative`, οπότε το «απόλυτα»
άρχιζε να μετριέται από το widget και όχι από τη στήλη: το κουτί έπεφτε στα
153px πλάτος αντί για 312 και το κείμενο έσπαγε ανά δύο λέξεις (μετρημένο
16/09/2026). Εδώ τα widgets των σελίδων εργαλείου γίνονται πάλι ουδέτερα,
ώστε το CSS του πελάτη να δουλεύει όπως το έγραψε. */
.dc-ergaleio .elementor-widget { position: static; }
/* ⚠️ ΚΑΙ ο container: το Elementor του δίνει `position: relative` μέσω της
μεταβλητής --position. Με μόνο τα widgets ουδέτερα, το «απόλυτα» μετριόταν
πλέον από τον container — ίδιο πρόβλημα, 173px αντί 153. */
.dc-ergaleio .e-con {
--position: static;
/* Και η προεπιλεγμένη εσοχή 10px του Elementor: στη σελίδα Schengen μετακινούσε
όλα τα κουτιά κατά 10px δεξιά και κάτω (μετρημένο). Στα μπλοκ δεν υπήρχε. */
--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
}