/* ═══════════════════════════════════════════════════════════════════════════ EXIT BUS — ΚΟΙΝΟ ΚΕΛΥΦΟΣ ΤΟΥ SITE (topbar · header · footer · mobile bar) ΓΙΑΤΙ ΥΠΑΡΧΕΙ ΑΥΤΟ ΤΟ ΑΡΧΕΙΟ Μέχρι τώρα υπήρχαν ΤΕΣΣΕΡΑ διαφορετικά headers και ΔΥΟ διαφορετικά footers: · index.html → σκούρα μπάρα με 6 συνδέσμους + πλούσιο footer 5 στηλών · page.php → άλλη μπάρα, άλλα ύψη, μονόγραμμο footer μιας γραμμής · tours.php → τρίτη εκδοχή · tour.php → τέταρτη Γι' αυτό οι εσωτερικές σελίδες έμοιαζαν «ξένες»: δεν ήταν η ίδια σελίδα με άλλο περιεχόμενο, ήταν άλλο site. Εδώ ζει ΜΙΑ φορά το κέλυφος και το φορτώνουν και οι τέσσερις. ΟΝΟΜΑΤΟΛΟΓΙΑ: κάθε κλάση ξεκινάει με «exs-» (exit-site). Δεν είναι καπρίτσιο — οι σελίδες έχουν ήδη δικά τους .btn, .wrap, header{}, footer{} με ΔΙΑΦΟΡΕΤΙΚΕΣ τιμές (π.χ. .wrap είναι 1200px στην αρχική και 1080px στο page.php). Χωρίς πρόθεμα, το κέλυφος θα άλλαζε εμφάνιση ανάλογα με τη σελίδα που το φιλοξενεί — δηλαδή θα ξαναγυρίζαμε στο ίδιο πρόβλημα από την πίσω πόρτα. ΓΙΑΤΙ «exs-» ΚΑΙ ΟΧΙ «exb-», ΠΟΥ ΗΤΑΝ Η ΠΡΩΤΗ ΕΠΙΛΟΓΗ: το πρόθεμα «exb-» το χρησιμοποιεί ΗΔΗ η μηχανή κρατήσεων (assets/embed.js). Και δεν το χρησιμοποιεί σε παιδιά κάποιας ρίζας — γράφει ΓΥΜΝΟΥΣ κανόνες στο τη στιγμή που φορτώνει: .exb-brand{font-family:'Barlow Condensed';font-size:22px;…} .exb-foot{font-size:11.5px;color:#8A8E82;text-align:center;padding:10px} Δύο ονόματα που θα χρειαζόμασταν κι εμείς: το λογότυπο της κεφαλίδας και ΟΛΟΚΛΗΡΟ το υποσέλιδο. Επειδή το embed.js μπαίνει στο ΜΕΤΑ από αυτό το φύλλο και οι δύο κανόνες έχουν την ίδια βαρύτητα, θα κέρδιζε εκείνο — και το υποσέλιδο πέντε στηλών θα γινόταν κεντραρισμένο κείμενο 11,5px. Το πρόθεμα άλλαξε πριν προλάβει να συμβεί. ΤΟ ΚΕΛΥΦΟΣ ΕΙΝΑΙ ΠΑΝΤΑ ΣΚΟΥΡΟ, ανεξάρτητα από το αν το σώμα της σελίδας είναι λευκό (page.php) ή μαύρο (αρχική). Έτσι το «πλαίσιο» είναι το ίδιο και αλλάζει μόνο το περιεχόμενο μέσα του. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --green:#2E9E4F; --green-bright:#4fdf85; --green-deep:#1F7A3D; --tint:#EDF6E9; /* --green-btn: ΤΟ ΠΡΑΣΙΝΟ ΤΩΝ ΚΟΥΜΠΙΩΝ, ΟΧΙ ΤΩΝ ΦΟΝΤΩΝ. Λευκό κείμενο πάνω στο --green (#2E9E4F) δίνει λόγο αντίθεσης 3,43:1 — κάτω από το 4,5:1 που ζητάει το πρότυπο για κανονικό κείμενο. Στον ήλιο ή σε φθηνή οθόνη κινητού το κείμενο του κουμπιού «σβήνει», και μιλάμε για τα κουμπιά που οδηγούν σε κράτηση. Το #1d7a3d δίνει 5,1:1 και οπτικά είναι σχεδόν ταυτόσημο. ΔΕΝ αντικαθιστά το --green: τα φόντα, τα διακοσμητικά και οι γεμάτες επιφάνειες μένουν στο φωτεινό πράσινο της μάρκας. */ --green-btn:#1d7a3d; --ink:#121212; --ink2:#1A1A1A; --line-d:#2c2f2d; --t-hi:#E9EDEA; --t-mid:#b3bcb6; --t-low:#7d8781; --grey:#6B7280; --line:#e5e9e6; --soft:#F7F8F7; --amber:#F59E0B; --r:16px; --sh:0 20px 55px -22px rgba(0,0,0,.5); --sh-sm:0 10px 26px -14px rgba(0,0,0,.35); } .exs-wrap{max-width:1200px;margin:0 auto;padding:0 22px} /* ── ΕΝΔΕΙΞΗ ΕΣΤΙΑΣΗΣ ──────────────────────────────────────────────────── Καμία σελίδα δεν έδειχνε πού βρίσκεται ο χρήστης που πλοηγεί με Tab: το δείγμα έδινε 8 στα 8 links χωρίς ορατό δακτύλιο. Πρακτικά όλο το site ήταν μη πλοηγήσιμο με πληκτρολόγιο. Το :focus-visible ΔΕΝ φαίνεται σε χρήση με ποντίκι — ο browser το ανάβει μόνο όταν η εστίαση ήρθε από πληκτρολόγιο. Άρα ο χρήστης του ποντικιού δεν βλέπει καμία διαφορά. Πάνω στο σκούρο κέλυφος το ματ πράσινο χάνεται, γι' αυτό εκεί χρησιμοποιείται το φωτεινό. */ :focus-visible{outline:2px solid var(--green);outline-offset:2px} .exs-topbar :focus-visible,.exs-nav :focus-visible,.exs-foot :focus-visible, .exs-mbar :focus-visible,.exs-flag :focus-visible{outline-color:var(--green-bright)} /* ── ΣΥΝΔΕΣΜΟΣ ΠΑΡΑΚΑΜΨΗΣ ──────────────────────────────────────────────── Πρώτο στοιχείο κάθε σελίδας, ορατό μόνο όταν πάρει εστίαση. Χωρίς αυτόν, ο χρήστης αναγνώστη οθόνης περνάει σε ΚΑΘΕ φόρτωση topbar, λογότυπο, πέντε στοιχεία μενού, WhatsApp, κουμπί κράτησης και διακόπτη γλώσσας πριν φτάσει στο περιεχόμενο. Κρύβεται με μετατόπιση προς τα ΠΑΝΩ, όχι με left:-9999px: η μετατόπιση προς τα πάνω δεν έχει κατεύθυνση, δουλεύει ίδια σε ελληνικά και εβραϊκά και δεν δημιουργεί ποτέ οριζόντια κύλιση. (Το ίδιο μοτίβο με το tours.php, από όπου αντιγράφηκε — εκεί το left:-9999px είχε βγάλει τη σελίδα 11.279px πλατιά.) */ .exs-skip{position:absolute;inset-inline-start:0;top:0;transform:translateY(-200%); background:var(--green-btn);color:#fff;padding:10px 16px;border-end-end-radius:8px; z-index:99;font:600 14px 'Inter',system-ui,sans-serif;text-decoration:none; transition:transform .12s} .exs-skip:focus{transform:translateY(0)} /* Κουμπιά του κελύφους. Ξεχωριστά από τα .btn της κάθε σελίδας γιατί ζουν πάντα πάνω σε σκούρο φόντο, ακόμη κι όταν η σελίδα είναι λευκή. */ .exs-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font:600 15px 'Inter',system-ui,sans-serif;padding:12px 22px;border-radius:12px;border:0; cursor:pointer;white-space:nowrap;text-decoration:none; transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,color .2s} .exs-btn:active{transform:scale(.98)} .exs-btn-g{background:var(--green-bright);color:#07230f;box-shadow:0 12px 30px -12px rgba(79,223,133,.5)} .exs-btn-g:hover{background:#6ceb99;transform:translateY(-1px)} .exs-btn-o{background:transparent;border:1.5px solid var(--line-d);color:var(--t-hi)} .exs-btn-o:hover{border-color:var(--green-bright);color:var(--green-bright)} /* ── TOPBAR ─────────────────────────────────────────────────────────────── */ .exs-topbar{background:#0c0d0c;border-bottom:1px solid #1f2220;font:400 13px 'Inter',system-ui,sans-serif;color:var(--t-mid)} .exs-topbar .exs-wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:14px} .exs-topbar .l{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .exs-topbar .r{display:flex;gap:12px;align-items:center;flex:0 0 auto} .exs-topbar a{color:inherit;text-decoration:none;position:relative} .exs-topbar a:hover{color:#fff} /* ΠΕΡΙΟΧΗ ΑΦΗΣ ΧΩΡΙΣ ΑΛΛΑΓΗ ΜΕΓΕΘΟΥΣ. Το τηλέφωνο του topbar μετρήθηκε 142×15, το email 103×15, το «Η κράτησή μου» 112×15 — δηλαδή στόχοι 15 pixel ύψος σε κινητό. Δεν μεγαλώνει το κείμενο ούτε το ύψος της μπάρας: ένα διάφανο ψευδοστοιχείο επεκτείνει ΜΟΝΟ την περιοχή που δέχεται το δάχτυλο, κάθετα, σε ~41px. Οριζόντια μένει ακριβώς στο πλάτος του συνδέσμου, οπότε δύο διπλανοί σύνδεσμοι δεν αλληλοκαλύπτονται ποτέ. Προς τα κάτω περνάει κάτω από την κεφαλίδα, που είναι sticky με z-index:60 και άρα κερδίζει τα δικά της κλικ. */ .exs-topbar a::after{content:"";position:absolute;inset-block:-13px;inset-inline:0} .exs-ico{width:14px;height:14px;vertical-align:-2px;margin-inline-end:5px} /* ΤΟ ΤΗΛΕΦΩΝΟ ΔΕΝ ΣΠΑΕΙ ΠΟΤΕ ΣΕ 2–3 ΓΡΑΜΜΕΣ: το «+30 2311 110 929» έχει κενά, οπότε σε στενό topbar τυλιγόταν λέξη-λέξη (μετρημένο: 3 γραμμές στα 390px μαζί με τα υπόλοιπα στοιχεία). Ένας αριθμός σε δύο γραμμές διαβάζεται σαν δύο αριθμοί. */ .exs-topbar a[href^="tel:"]{white-space:nowrap} /* Το κοινό εικονίδιο SVG του κελύφους (αντικαθιστά emoji σε badges/κουμπιά): ίδια οπτική με το .exs-ico, ευθυγράμμιση στο κείμενο, χρώμα του γονέα. */ .exs-svgico{vertical-align:-3px;margin-inline-end:5px;flex:none} /* «Η κράτησή μου» — υπήρχε μόνο στο page.php και έδειχνε σε διεύθυνση που δεν υπήρχε (/account, χωρίς κανόνα στο .htaccess → 404). Τώρα ζει στο κέλυφος, άρα φαίνεται σε ΚΑΘΕ σελίδα, και δείχνει σε σελίδα που υπάρχει. */ .exs-acct{font-weight:600;white-space:nowrap} /* ── ΔΙΑΚΟΠΤΗΣ ΓΛΩΣΣΑΣ — DROPDOWN ΜΕ ΠΛΗΡΗ ΟΝΟΜΑΤΑ ─────────────────────── Ιστορία: πρώτα ήταν