/* MENU: πιο “premium” bar */ nav{ background: rgba(240,246,250,.92) !important; border: 1px solid rgba(0,0,0,.06) !important; box-shadow: 0 10px 24px rgba(0,0,0,.10) !important; } /* MENU buttons: φαίνεται στο hover */ nav a, nav .dropdown button{ border-radius: 10px !important; transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important; } nav a:hover, nav .dropdown button:hover{ background: rgba(255,255,255,.85) !important; box-shadow: 0 8px 18px rgba(0,0,0,.10) !important; transform: translateY(-1px) !important; } /* Dropdown panel: πιο “καθαρό” */ nav .dropdown-content, nav .sub-dropdown-content{ background: rgba(240,246,250,.98) !important; border: 1px solid rgba(0,0,0,.10) !important; border-radius: 14px !important; padding: 8px !important; box-shadow: 0 22px 45px rgba(0,0,0,.22) !important; } /* Dropdown items: divider + πιο έντονο hover */ nav .dropdown-content a, nav .sub-dropdown-content a{ border-radius: 10px !important; padding: 11px 12px !important; } nav .dropdown-content a + a, nav .sub-dropdown-content a + a{ border-top: 1px solid rgba(0,0,0,.06) !important; } nav .dropdown-content a:hover, nav .sub-dropdown-content a:hover{ background: rgba(169,14,14,.14) !important; color: #a90e0e !important; transform: translateX(4px) !important; } /* Mobile: sub menu κάτω */ @media (max-width: 600px){ nav .sub-dropdown-content{ left:0 !important; top:100% !important; } } /* SLIDER: λίγο πιο “card” αλλά οι εικόνες ΜΕΝΟΥΝ τεντωμένες */ #recent-slider{ width: 100% !important; max-width: 990px !important; height: 420px !important; margin: 15px auto !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 12px 26px rgba(0,0,0,.12) !important; } #recent-slider .slide img{ object-fit: fill !important; /* τέντωμα όπως θες */ } #recent-slider .slide-title{ background: rgba(240,246,250,.96) !important; border-top: 1px solid rgba(0,0,0,.06) !important; } /* 1) ΚΟΨΙΜΟ ΜΟΝΟ ΠΑΝΩ: τράβα το header προς τα πάνω */ #header{ margin-top: 10px !important; /* αν θες λιγότερο: -10px */ margin-bottom: 0 !important; padding-top: 0 !important; /* ΜΟΝΟ top */ padding-left: 0 !important; padding-right: 0 !important; } /* 2) ΜΗΝ μηδενίζεις όλο το padding των wrappers (αυτό σου έκοψε το κάδρο) */ .Header, .header-widget{ margin: 0 !important; padding-top: 1 !important; /* ΜΟΝΟ top */ /* αφήνουμε τα υπόλοιπα όπως είναι */ } /* 3) ΕΠΑΝΕΦΕΡΕ το “πλαίσιο/αέρα” γύρω από τον τίτλο/εικόνα */ #Header1 .widget-content, #header .header-inner, #header .Header-inner{ padding: 10px 12px 0 !important; /* πάνω/πλάγια αέρας = πλαίσιο */ border-radius: 12px !important; } /* 4) Η εικόνα να κάθεται σωστά χωρίς κενά */ #header img, .Header img{ display: block !important; margin: 0 auto !important; } /* ===== Dropdown πάνω απ’ όλα (ticker από πίσω) — ΟΛΕΣ οι συσκευές ===== */ /* 1) Το menu να δημιουργεί “στρώση” και να είναι πάντα πάνω */ nav{ position: relative !important; z-index: 2147483000 !important; } /* 2) Τα dropdown panels να είναι πάνω από ΟΤΙΔΗΠΟΤΕ */ nav .dropdown-content, nav .sub-dropdown-content{ position: absolute !important; z-index: 2147483647 !important; } /* 3) Το ticker να περνάει από πίσω (όχι freeze) */ #ticker-outer{ z-index: 10 !important; /* χαμηλά, πίσω από το nav */ } /* MOBILE: σήκωσε ΟΛΑ τα στοιχεία μαζί (για να μη φαίνεται “glass” από πίσω) */ @media (max-width: 768px){ :root{ --lift: 36px; } /* δοκίμασε 10px, 12px, 16px */ body{ position: relative !important; top: calc(-1 * var(--lift)) !important; } } /* ===== OPTION 3: Category accents ===== */ nav{ background:#F0F6FA !important; border:1px solid rgba(0,0,0,.08); border-radius:16px !important; padding:10px 12px !important; gap:10px !important; box-shadow:0 12px 26px rgba(0,0,0,.10) !important; } nav a, .dropdown button{ border-radius:14px !important; padding:10px 14px !important; font-size:17px !important; border:1px solid rgba(0,0,0,.07) !important; background: rgba(255,255,255,.65) !important; box-shadow: 0 10px 18px rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } nav a:hover, .dropdown button:hover{ transform: translateY(-2px); box-shadow: 0 16px 26px rgba(0,0,0,.12); filter: saturate(1.05); } /* 4 βασικές κατηγορίες με “accent bar” (χωρίς να ουρλιάζει) */ .dropdown.school > button{ border-left:6px solid rgba(169,14,14,.85) !important; color:#a90e0e !important; } .dropdown.classes > button{ border-left:6px solid rgba(0,120,212,.75) !important; color:#084a7a !important; } .dropdown.actions > button{ border-left:6px solid rgba(0,150,90,.70) !important; color:#07533a !important; } .dropdown.useful > button{ border-left:6px solid rgba(255,140,0,.70) !important; color:#7a3f00 !important; } /* Dropdown panel */ .dropdown-content, .sub-dropdown-content{ background:#F0F6FA !important; border:1px solid rgba(0,0,0,.08); border-radius:16px !important; padding:10px; box-shadow:0 22px 50px rgba(0,0,0,.18) !important; display:block; opacity:0; visibility:hidden; transform: translateY(10px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; } .dropdown:hover > .dropdown-content, .dropdown:focus-within > .dropdown-content{ opacity:1; visibility:visible; transform: translateY(0); } .sub-dropdown:hover > .sub-dropdown-content, .sub-dropdown:focus-within > .sub-dropdown-content{ opacity:1; visibility:visible; transform: translateY(0); } .dropdown-content a{ border-radius:14px !important; margin:6px 4px; background: rgba(255,255,255,.65); border:1px solid rgba(0,0,0,.05); } .dropdown-content a:hover{ background: rgba(255,255,255,.95); transform: translateX(3px); } /* --- Fix: διαφορετικό χρώμα για το 2ο .dropdown.useful (Βιβλιοθήκη) --- */ nav .dropdown.useful:nth-of-type(5) > button{ border-left: 6px solid rgba(128, 0, 128, .70) !important; /* μωβ */ color: #4b1b5a !important; } /* Επικοινωνία: δικό του accent ώστε να μη φαίνεται “άδειο” */ nav a[href*="blog-page_90"]{ border-left: 6px solid rgba(90, 60, 160, .70) !important; /* π.χ. μωβ/indigo */ color: #2f245a !important; } /* Αρχική: accent bar + χρώμα */ nav a[href="https://dimperist.blogspot.com/"]{ border-left: 6px solid rgba(0,120,212,.75) !important; /* μπλε */ color: #084a7a !important; } /* ===== Menu: μικρό “shrink” (λίγο) ===== */ nav{ padding: 8px 10px !important; gap: 8px !important; } nav a, .dropdown button{ padding: 10px 14px !important; /* από 10x14 */ font-size: 17px !important; /* από 17 */ border-radius: 12px !important; /* από 14 */ } /* λίγο μικρότερα dropdown items */ .dropdown-content a{ padding: 9px 11px !important; font-size: 16px !important; /* αν θες 15, πες μου */ margin: 5px 4px !important; } /* panels λίγο πιο “σφιχτά” */ .dropdown-content, .sub-dropdown-content{ padding: 8px !important; border-radius: 14px !important; } /* accent bar λίγο πιο λεπτό */ .dropdown.school > button, .dropdown.classes > button, .dropdown.actions > button, .dropdown.useful > button, nav .dropdown.useful:nth-of-type(5) > button, nav a[href*="blog-page_90"], nav a[href="https://dimperist.blogspot.com/"]{ border-left-width: 5px !important; /* από 6px */ } /* ===== Dropdown items: παίρνουν χρώμα από την βασική κατηγορία ===== */ /* 1) Ορίζουμε “accent” χρώμα ανά dropdown (με CSS variables) */ .dropdown.school{ --accent: rgba(169,14,14,.85); --accentText:#a90e0e; } .dropdown.classes{ --accent: rgba(0,120,212,.75); --accentText:#084a7a; } .dropdown.actions{ --accent: rgba(0,150,90,.70); --accentText:#07533a; } .dropdown.useful{ --accent: rgba(255,140,0,.70); --accentText:#7a3f00; } /* 2) Το 2ο useful (Βιβλιοθήκη) να έχει δικό του accent */ nav .dropdown.useful:nth-of-type(5){ --accent: rgba(128, 0, 128, .70); --accentText:#4b1b5a; } /* 3) Εφαρμογή του accent σε ΟΛΑ τα links μέσα (και submenus) */ .dropdown .dropdown-content a, .dropdown .sub-dropdown-content a{ border-left: 5px solid var(--accent) !important; color: var(--accentText) !important; background: rgba(255,255,255,.65) !important; } /* hover: λίγο πιο έντονο */ .dropdown .dropdown-content a:hover, .dropdown .sub-dropdown-content a:hover{ background: rgba(255,255,255,.95) !important; transform: translateX(3px); } /* 4) Accent στον τίτλο των sub-dropdowns */ .sub-dropdown > a { border-left: 5px solid var(--accent) !important; color: var(--accentText) !important; background: rgba(255, 255, 255, 0.55) !important; border-radius: 14px !important; margin: 6px 4px !important; display: block; } .sub-dropdown > a:hover{ background: rgba(255,255,255,.90) !important; } /* Αρχική: διαφορετικό χρώμα από τις Τάξεις */ nav a[href="https://dimperist.blogspot.com/"]{ border-left: 5px solid rgba(60, 60, 60, .70) !important; /* γκρι */ color: #222 !important; } /* ===== Mobile shrink (μόνο κινητό) ===== */ @media (max-width: 600px){ nav{ padding: 6px 6px !important; gap: 6px !important; border-radius: 14px !important; } nav a, .dropdown button{ font-size: 16px !important; padding: 10px 5px !important; border-radius: 11px !important; } /* πιο μικρό “accent bar” στο κινητό */ .dropdown.school > button, .dropdown.classes > button, .dropdown.actions > button, .dropdown.useful > button, nav .dropdown.useful:nth-of-type(5) > button, nav a[href*="blog-page_90"], nav a[href="https://dimperist.blogspot.com/"]{ border-left-width: 4px !important; } /* dropdown panels πιο στενά */ .dropdown-content, .sub-dropdown-content{ min-width: 180px !important; padding: 6px !important; border-radius: 12px !important; } /* dropdown links πιο “σφιχτά” */ .dropdown-content a, .sub-dropdown-content a{ font-size: 15px !important; padding: 8px 10px !important; margin: 4px 3px !important; } } /* Ξεκλείδωμα για να φαίνονται όλες οι σειρές (3+) */ #recent-slider .slide-title { display: block !important; /* Καταργεί το flex/grid που περιόριζε τις γραμμές */ -webkit-line-clamp: unset !important; /* Καταργεί το όριο των 2 γραμμών */ max-height: none !important; /* Επιτρέπει στη λεζάντα να μεγαλώσει όσο θέλει */ height: auto !important; overflow: visible !important; text-overflow: clip !important; } /* Η εικόνα προσαρμόζεται αυτόματα στο κενό που μένει */ #recent-slider .slide img { flex: 1 1 auto !important; min-height: 0 !important; /* Κρίσιμο: επιτρέπει στην εικόνα να μικρύνει αν η λεζάντα είναι μεγάλη */ object-fit: fill !important; } /* 1. Κατάργηση Justify & Καθαρισμός Περιθωρίων Αναρτήσεων */ .post-body { text-align: left !important; hyphens: none !important; word-wrap: break-word; } /* 2. Διόρθωση Διαστημάτων Παραγράφων */ .post-body p { margin: 0 0 1.2em 0 !important; /* Μειωμένο κάτω περιθώριο */ line-height: 1.5 !important; max-width: 75ch; } /* Αφαίρεση κενού από την τελευταία παράγραφο για να μην προστίθεται στο τέλος της ανάρτησης */ .post-body p:last-child { margin-bottom: 0 !important; } /* 3. Συμμαζεμένα Blockquotes */ .post-body blockquote { font-style: normal !important; font-weight: 500; border-left: 5px solid #a90e0e !important; background: rgba(0, 0, 0, 0.03); padding: 15px 20px !important; margin: 15px 0 !important; /* Μειωμένο κενό πάνω/κάτω */ } /* 4. Εικόνες χωρίς περιττά κενά */ .post-body img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; display: block; margin: 10px auto !important; /* Μειωμένο κενό και κεντράρισμα */ } /* 5. Keyboard Focus */ .post-body a:focus { outline: 3px solid #1e6cff !important; outline-offset: 2px; } /* ========================================= HEADER IMAGE STRETCH (MOBILE ONLY) ========================================= */ @media screen and (max-width: 768px) { /* Στοχεύουμε την εικόνα του τίτλου στο Blogger */ #Header1 img, .Header img, .header-inner img { /* "Απλώνουμε" την εικόνα 1px προς κάθε κατεύθυνση */ margin: -9px !important; /* Αυξάνουμε το πλάτος και το ύψος κατά 2px για να καλύψουμε το άπλωμα */ width: calc(100% + 18px) !important; max-width: none !important; /* Διασφαλίζουμε ότι η εικόνα παραμένει κεντραρισμένη και ευθυγραμμισμένη */ display: block !important; position: relative !important; z-index: 5 !important; } /* Αφαιρούμε τυχόν περιορισμούς από το container για να επιτρέψουμε το 1px overflow */ #header-inner, .header-inner { overflow: visible !important; } } @media screen and (max-width: 768px) { #Header1 img, .Header img { /* Steel Blue λάμψη: Έντονη αλλά πιο "ήσυχη" */ filter: drop-shadow(0 0 8px rgba(70, 130, 180, 0.6)) !important; width: 106% !important; margin: -10px !important; } } /* Αφαίρεση κενού ανάμεσα στις αναρτήσεις (Post Spacing) */ .post-outer, .post { margin-bottom: 15px !important; /* Από 40-50px που είναι συνήθως, το πάμε στα 5px */ padding-bottom: 5px !important; } /* Αφαίρεση κενού από το "more-link" αν υπάρχει */ .jump-link { margin-top: 0 !important; margin-bottom: -14px !important; } /* Αν το θέμα σου έχει διαχωριστική γραμμή ή κενό στο main-wrapper */ .main-inner .post-outer { margin-bottom: 5px !important; } /* Μείωση απόστασης ανάμεσα στην ημερομηνία και την ανάρτηση */ .date-header, h2.date-header { margin-bottom: 9px !important; /* Σχεδόν μηδενίζει το κενό από κάτω */ padding-bottom: 0 !important; } .post-outer { margin-top: 0 !important; /* Αφαιρεί το κενό πάνω από την ανάρτηση */ padding-top: 0 !important; } /* Αν υπάρχει κενό στο εσωτερικό του post */ .post { margin-top: 10 !important; } /* ========================================= SIMPLE MOBILE LIFT & GLASS FIX (ΔΟΚΙΜΗ -ΕΚΔΟΣΗ 2) ========================================= */ @media screen and (max-width: 1500px) and (pointer: coarse) { /* 1. ΣΒΗΝΟΥΜΕ ΜΟΝΟ ΤΟ NAVBAR ΤΟΥ BLOGGER (Το "γυαλί" της κορυφής) */ /* Αφαιρέσαμε το .tabs και το .PageList από εδώ για να μην "σπάνε" τα slides και το μενού */ #navbar-iframe, .navbar, #navbar { display: none !important; visibility: hidden !important; height: 0 !important; } /* 2. ΑΝΕΒΑΣΜΑ ΠΕΡΙΕΧΟΜΕΝΟΥ */ /* Τραβάει τον τίτλο και το περιεχόμενο προς τα πάνω */ .content-outer, .main-inner, #header { position: relative !important; top: -4px !important; /* ΑΛΛΑΞΕ ΑΥΤΟ: π.χ. -30px, -45px για να εξαφανιστεί το φόντο */ } } .post-outer { opacity: 0; transform: translateY(30px); animation: fadeUpModern 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* Χωρίς delay για να "πρασινίσει" το PageSpeed */ } @keyframes fadeUpModern { to { opacity: 1; transform: translateY(0); } } @keyframes zoomFromDepth { to { opacity: 1; transform: scale(1) translateZ(0); } } /* <--- Αυτή την αγκύλη εννοούσες, σωστά; Κλείνει όλο το animation */ /* ΡΥΘΜΙΣΗ ΑΠΟΚΛΕΙΣΤΙΚΑ ΓΙΑ ΚΙΝΗΤΑ (κάτω από 768px) */ @media screen and (max-width: 768px) { .post-outer { /* Κατεβάζουμε τον χρόνο από 7.5s σε 1.2s για να είναι πιο "ζωντανό" */ animation-duration: 1.2s !important; /* Μειώνουμε και την καθυστέρηση έναρξης */ animation-delay: 0.1s !important; /* Προαιρετικά: Μειώνουμε το βάθος (translateZ) για να μην "ζαλίζει" στην μικρή οθόνη */ transform: scale(0.3) translateZ(-1500px); } } /* --- FIXED CALENDAR ICON ΓΙΑ ΚΙΝΗΤΑ --- */ @media screen and (max-width: 768px) { .date-header::before, h2.date-header::before { content: "" !important; display: inline-block !important; /* Μικρό και κομψό μέγεθος */ width: 14px !important; height: 14px !important; vertical-align: -2px !important; margin-right: 6px !important; /* Καθαρό SVG χωρίς μπερδέματα - Μπλε καπάκι και Γκρι σώμα */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231e6cff' d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z'/%3E%3Cpath fill='%23ffffff' d='M5 10h14v10H5z'/%3E%3Cpath fill='%23BDBDBD' d='M7 12h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zm-8 4h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; background-color: transparent !important; } /* Μικρή βελτίωση στο ημερολόγιο για να δέσει το γλυκό */ #calendar-container .fc-day-today .fc-daygrid-day-number { background: #a90e0e !important; color: #ffffff !important; border-radius: 4px !important; padding: 1px 4px !important; } } /* ========================================= ΣΤΟΧΕΥΜΕΝΗ ΡΥΘΜΙΣΗ ΜΕΓΕΘΟΥΣ ΜΕΝΟΥ ========================================= */ :root { --menu-pc: 16px; /* Ρύθμιση για PC (π.χ. 21px, 22px) */ --menu-mobile: 13px; /* Ρύθμιση για ΚΙΝΗΤΟ (π.χ. 15px, 16px) */ } /* 1. ΕΦΑΡΜΟΓΗ ΓΙΑ PC */ @media screen and (min-width: 1024px) { nav a, nav .dropdown button { font-size: var(--menu-pc) !important; padding: 10px 4px !important; } /* Εσωτερικά μενού PC (λίγο μικρότερα από τα έξω) */ .dropdown-content a { font-size: calc(var(--menu-pc) - 0px) !important; } } /* 2. ΕΦΑΡΜΟΓΗ ΓΙΑ ΚΙΝΗΤΟ */ @media screen and (max-width: 768px) { nav a, nav .dropdown button { font-size: var(--menu-mobile) !important; padding: 8px 2px !important; } /* Εσωτερικά μενού Κινητού */ .dropdown-content a { font-size: calc(var(--menu-mobile) - 0px) !important; } } /* ΔΙΟΡΘΩΣΗ ΑΠΟΚΛΕΙΣΤΙΚΑ ΓΙΑ ΤΟ ΜΕΝΟΥ ΔΡΑΣΕΙΣ ΣΤΟ ΚΙΝΗΤΟ */ @media screen and (max-width: 768px) { /* Στοχεύουμε μόνο το πλαίσιο που κατεβαίνει από τις Δράσεις */ nav .actions .dropdown-content { position: absolute !important; left: auto !important; right: 0 !important; /* ΤΟ ΜΥΣΤΙΚΟ: Ανοίγει προς τα ΑΡΙΣΤΕΡΑ αντί για δεξιά */ width: 0px !important; max-width: 85vw !important; box-shadow: -5px 8px 20px rgba(0,0,0,0.2) !important; /* Σκιά από την άλλη πλευρά */ } /* Διόρθωση για τα υπο-μενού μέσα στις Δράσεις (Περισσότερες Δρ.) */ nav .actions .sub-dropdown-content { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; border-left: 3px solid #a90e0e !important; } } nav { /* ... όλα τα άλλα τα αφήνεις όπως είναι ... */ z-index: 10 !important; } /* ΤΕΛΙΚΗ ΔΙΟΡΘΩΣΗ: ΑΡΙΘΜΟΙ ΤΕΡΜΑ ΑΡΙΣΤΕΡΑ ΧΩΡΙΣ ΚΕΝΟ */ .post-body ol { counter-reset: custom-counter; list-style-type: none !important; padding-left: 0 !important; /* Μηδενισμός εσωτερικού κενού */ margin-left: 0 !important; /* Μηδενισμός εξωτερικού κενού για να κολλήσει αριστερά */ } .post-body ol li { position: relative !important; margin-bottom: 18px !important; padding-left: 38px !important; /* Μόνο όσο χώρο χρειάζεται ο κύκλος */ text-align: left !important; } .post-body ol li::before { counter-increment: custom-counter; content: counter(custom-counter) !important; position: absolute !important; left: 0 !important; /* Κλείδωμα στο απόλυτο 0 αριστερά */ top: 2px !important; width: 26px !important; /* Σταθερό μέγεθος κύκλου */ height: 26px !important; background-color: var(--accent) !important; color: #ffffff !important; border-radius: 50% !important; font-weight: 800 !important; font-size: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important; } /* Διόρθωση και για τις απλές λίστες (ul) */ .post-body ul { list-style-type: none !important; padding-left: 0 !important; margin-left: 0 !important; } .post-body ul li { padding-left: 30px !important; } .post-body ul li::before { left: 0 !important; } /* 4. Μικρή ρύθμιση για το Widget στο Tablet για να μη "χάνεται" */ .eortologio-widget { max-width: 100% !important; box-sizing: border-box !important; }/* Κρύψε ΟΛΟ το gadget (μαζί με το κουτί/γυαλί του) σε desktop */ @media (min-width: 768px){ #HTML15 { display: none !important; } } /* --- TABLET ONLY CALENDAR FIX (769px - 1024px) --- */ @media screen and (min-width: 769px) and (max-width: 1224px) { .date-header::before, h2.date-header::before { /* Διώχνει το κείμενο Jul 17 αν έχει ξεμείνει */ content: "" !important; display: inline-block !important; /* Μέγεθος και Θέση εικονιδίου */ width: 22px !important; height: 22px !important; vertical-align: middle !important; margin-right: 8px !important; /* Το εικονίδιο σε SVG για να φαίνεται πεντακάθαρα στην οθόνη του tablet */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e6cff'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; background-color: transparent !important; /* Επαναφορά ορατότητας αν κάποιος άλλος κανόνας το έκρυβε */ visibility: visible !important; opacity: 1 !important; } } /* --- ΑΠΟΛΥΤΟ OVERRIDE: ΚΟΥΜΠΙ ΚΟΙΝΟΠΟΙΗΣΗΣ ΚΙΝΗΤΟΥ --- */ html body #mobile-share-button { text-align: center !important; display: block !important; width: 100% !important; background: transparent !important; border: none !important; box-shadow: none !important; margin: 20px 0 !important; } html body.mobile #mobile-share-button a, html body #mobile-share-button a { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; /* Καθαρό λευκό φόντο */ color: #2c3e50 !important; /* Σκούρο γκρι/μπλε κείμενο */ font-weight: 800 !important; font-size: 15px !important; padding: 12px 28px !important; border-radius: 50px !important; /* Στρογγυλό */ border: 2px solid #e2e8f0 !important; /* Ξεκάθαρο περίγραμμα */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06) !important; /* Τρισδιάστατη σκιά */ text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; backdrop-filter: none !important; /* Σβήνει τα παλιά θολώματα */ -webkit-backdrop-filter: none !important; width: auto !important; transition: all 0.2s ease !important; } /* Το εικονίδιο */ html body.mobile #mobile-share-button a::before, html body #mobile-share-button a::before { content: "📤" !important; font-size: 20px !important; margin-right: 10px !important; } /* Όταν το πατάς με το δάχτυλο */ html body.mobile #mobile-share-button a:active, html body #mobile-share-button a:active { transform: scale(0.94) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; background: #f8fafc !important; } * { box-sizing: border-box; margin: 0; padding: 0; } @keyframes slideDown { from { transform: translate(-50%, -100%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } /* === ΜΕΓΑΛΕΣ ΟΘΟΝΕΣ (Από 784px και πάνω) === */ @media screen and (min-width: 784px) { body.nav-is-fixed { padding-top: 65px !important; } .nav-fixed { position: fixed !important; top: 15px !important; left: 50% !important; transform: translateX(-50%) !important; width: 89% !important; max-width: 1000px !important; z-index: 5 !important; background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(0px) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important; border-radius: 50px !important; animation: slideDown 0.8s ease-out; border: 1px solid rgba(255, 255, 255, 0.3) !important; } } /* === ΚΙΝΗΤΑ ΚΑΙ ΜΙΚΡΑ TABLETS (Έως 783px) === */ @media screen and (max-width: 783px) { body.nav-is-fixed { padding-top: 90px !important; } .nav-fixed { position: fixed !important; top: 15px !important; left: 50% !important; transform: translateX(-50%) !important; width: 95% !important; z-index: 30 !important; background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(0px) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important; border-radius: 50px !important; animation: slideDown 0.8s ease-out; border: 1px solid rgba(255, 255, 255, 0.3) !important; } } /* ========================================= ΚΕΝΤΡΙΚΟ MENU (NAV) ========================================= */ nav a, .dropdown button, .dropdown, .selected { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* Ακύρωση του στυλ που επιβάλλει το θέμα Simple στις ενεργές σελίδες */ .tabs-inner .widget li.selected a, .tabs-inner .widget li.selected { background: transparent !important; background-image: none !important; } nav { background: #F0F6FA; padding: 3px 10px; display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; border-radius: 8px; font-family: Arial, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); position: relative; z-index: 30 !important; } nav a, .dropdown button { color: #000; font-weight: bold; text-decoration: none; padding: 10px 16px; font-size: 19px; border: none; background: none; cursor: pointer; border-radius: 6px; transition: background 0.2s, color 0.2s; } nav a:hover, .dropdown button:hover { background: #f2f2f2; } .school button, .classes button, .actions button, .useful button { color: #a90e0e; } .school button:hover, .classes button:hover, .actions button:hover, .useful button:hover { color: #8b0b0b; } /* === DROPDOWNS === */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background: #F0F6FA; min-width: 220px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); border-radius: 6px; z-index: 30 !important; } .dropdown-content a { color: #000; padding: 10px 14px; display: block; font-size: 18px; transition: all 0.2s; } .dropdown-content a:hover { background: #f1f1f1; font-weight: bold; } .dropdown:hover > .dropdown-content { display: block; } .sub-dropdown { position: relative; } .sub-dropdown-content { display: none; position: absolute; left: 100%; top: 0; background: #F0F6FA; min-width: 220px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); border-radius: 6px; z-index: 25; } .sub-dropdown:hover .sub-dropdown-content { display: block; } .disabled { color: #999; pointer-events: none; cursor: not-allowed; } @media (max-width: 868px) { nav { padding: 3px; gap: 3px; } nav a, .dropdown button { font-size: 16px; padding: 8px 12px; } .dropdown-content, .sub-dropdown-content { min-width: 150px; } .sub-dropdown-content { left: 0; top: 100%; } } /* === ΜΕΙΩΣΗ ΚΕΝΩΝ ΓΙΑ ΜΙΚΡΑ ΚΙΝΗΤΑ (Έως 392px) === */ @media screen and (max-width: 392px) { nav { gap: 0px !important; padding: 0px 0px !important; } nav a, .dropdown button { padding: 0px 0px !important; } } /* Ρυθμίσεις για οθόνες έως 1460px με εξαναγκασμένη προτεραιότητα */ @media screen and (max-width: 1460px) { .dropdown-content, .sub-dropdown-content { min-width: 240px !important; width: auto !important; } .dropdown-content a, .sub-dropdown-content a { font-size: 16px !important; padding: 5px 5px !important; line-height: 1.4 !important; } .sub-dropdown > a { display: flex !important; justify-content: space-between !important; align-items: center !important; } /* Ρύθμιση για το μενού Τάξεις */ .classes .dropdown-content { right: -70px !important; left: auto !important; } .classes .sub-dropdown-content { right: 100% !important; left: auto !important; } } /* ========================================= SLIDER ΑΝΑΡΤΗΣΕΩΝ ========================================= */ #recent-slider { width: 80%; max-width: 800px; height: 430px; margin: 5px auto 1px auto; border-radius: 1px; position: relative; box-shadow: 0 3px 8px rgba(0,0,0,0.2); background: #F0F6FA; z-index: 1; text-align: center; overflow: visible !important; left: 0; } #recent-slider .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; } #recent-slider .slide.active { opacity: 1; visibility: visible; } .slide img { width: 100% !important; height: 95% !important; object-fit: fill !important; border-radius: 10px; display: block !important; margin: 0 auto; } .slide-title { background: #F0F6FA; color: #a90e0e; font-size: 16px; font-weight: bold; padding: 1px 1px; text-align: center; font-family: Arial, sans-serif; border-radius: 0 0 10px 10px; width: 100%; box-sizing: border-box; } #recent-slider .no-images { padding: 20px; text-align: center; color: #666; font-family: Arial, sans-serif; } @media screen and (min-width: 869px) and (max-width: 1460px) { #recent-slider { max-width: 100% !important; height: 700px !important; } .slide-title { font-size: 19px; } } @media screen and (min-width: 1461px) { #HTML1 { width: 80vw !important; max-width: 945px !important; position: relative !important; left: -30px !important; top: 15px !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } #recent-slider { height: 600px !important; } } /* === ΑΥΣΤΗΡΗ ΡΥΘΜΙΣΗ ΓΙΑ LAPTOPS & ΟΘΟΝΕΣ FULL HD === */ @media screen and (min-width: 1200px) and (max-width: 1520px) { #recent-slider { width: 105vw !important; max-width: 840px !important; height: 480px !important; margin: 20px auto !important; left: 0 !important; } #recent-slider .slide img { width: 100% !important; height: 90% !important; object-fit: cover !important; object-position: center !important; border-radius: 10px 10px 0 0 !important; } .slide-title { max-height: 40px !important; } .slide-title strong { font-size: 20px !important; } } /* === BEΛΑΚΙΑ SLIDER ΚΑΙ PROGRESS BAR === */ .slider-arrow { position: absolute; top: 41%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.6); color: #333; border: none; font-size: 26px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; z-index: 20; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s, background 0.3s; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .slider-arrow:hover { background: rgba(255, 255, 255, 0.95); color: #a90e0e; } .slider-arrow.left { left: 10px; } .slider-arrow.right { right: 10px; } #recent-slider.show-arrows .slider-arrow { opacity: 1; visibility: visible; } #progress-bar { position: absolute; bottom: 0; left: 0; height: 2px; background-color: #a90e0e; width: 0%; z-index: 25; pointer-events: none; } .new-badge { position: absolute; top: 15px; right: 15px; background: #a90e0e; color: white; padding: 5px 12px; font-size: 14px; font-weight: bold; border-radius: 5px; z-index: 10; font-family: Arial, sans-serif; box-shadow: 0 2px 5px rgba(0,0,0,0.3); pointer-events: none; animation: pulseNew 2s infinite; } @keyframes pulseNew { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } /* ========================================= ZOOM ΕΙΚΟΝΙΔΙΟ & LIGHTBOX ========================================= */ .zoom-icon { position: absolute; bottom: 45px; right: 15px; background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,0.4); transition: all 0.3s ease; line-height: 1; font-family: "Segoe UI Symbol", "Apple Color Emoji", "Arial", sans-serif; padding-left: 2px; } .zoom-icon:hover { background: #a90e0e; transform: scale(1.1); } #custom-lightbox { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.92); z-index: 999999; align-items: center; justify-content: center; flex-direction: column; } #custom-lightbox.active { display: flex; } #lightbox-img { max-width: 90vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.6); object-fit: contain; } .lightbox-close { position: absolute; top: 20px; right: 30px; font-size: 50px; color: #fff; cursor: pointer; z-index: 100000; transition: color 0.3s; } .lightbox-close:hover { color: #a90e0e; } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; color: #fff; background: rgba(0,0,0,0.4); border: none; padding: 10px 20px; cursor: pointer; z-index: 100000; border-radius: 5px; transition: background 0.3s; } .lightbox-prev:hover, .lightbox-next:hover { background: rgba(169, 14, 14, 0.8); } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-counter { position: absolute; bottom: 25px; color: #fff; font-size: 18px; font-weight: bold; font-family: Arial, sans-serif; background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 15px; } #lightbox-video { display: none; max-width: 90vw; width: 800px; height: 450px; max-height: 80vh; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.6); z-index: 10000; } /* === ΚΟΥΜΠΙ ΛΗΨΗΣ & ΜΙΚΡΟΓΡΑΦΙΕΣ === */ #lightbox-download { position: absolute; top: 25px; left: 30px; font-size: 38px; color: #fff; text-decoration: none; z-index: 100000; transition: transform 0.3s ease; } #lightbox-download:hover { transform: scale(1.15); } .lightbox-thumbnails { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; max-width: 90vw; overflow-x: auto; padding: 5px; z-index: 100000; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #a90e0e transparent; } .lightbox-thumbnails::-webkit-scrollbar { height: 6px; } .lightbox-thumbnails::-webkit-scrollbar-thumb { background: #a90e0e; border-radius: 10px; } .thumb-img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: 0.5; border: 2px solid transparent; transition: all 0.3s; flex-shrink: 0; } .thumb-img.active { opacity: 1; border-color: #a90e0e; transform: scale(1.1); } .my-custom-lightbox-thumbnails { position: relative !important; margin-top: auto !important; margin-bottom: 10px !important; z-index: 10 !important; display: flex !important; justify-content: center !important; } #custom-lightbox img { max-width: 100vw; max-height: 60vh !important; object-fit: contain; margin-bottom: 40px !important; } /* ========================================= ΣΥΜΠΥΚΝΩΜΕΝΟΣ ΤΙΤΛΟΣ ΚΑΙ ΑΝΑΓΝΩΣΤΗΣ ========================================= */ .slide-title { display: block !important; position: relative !important; background: #F0F6FA !important; color: #a90e0e; padding: 0px 8px !important; width: 100%; max-height: 35px; transition: max-height 0.4s ease-in-out !important; overflow: hidden; z-index: 10; text-align: center !important; border-radius: 0 0 10px 10px; box-sizing: border-box; } .slide-title strong { display: block !important; font-size: 16px; font-weight: 600; line-height: 1.1 !important; margin: 0 !important; padding: 0px 0 !important; } .slide:hover .slide-title { max-height: 250px !important; } /* === ΕΞΥΠΝΟΣ ΑΝΑΓΝΩΣΤΗΣ (SMART EXPAND) === */ .slide-desc-container { display: none; text-align: left; margin-top: 0px; margin-bottom: 2px; align-items: center; justify-content: space-between; width: 100%; } .slide:hover .slide-desc-container { display: flex !important; } .slide-desc { display: inline-block !important; font-size: 13.5px !important; color: #333 !important; font-weight: normal !important; line-height: 1.25 !important; margin: 0 !important; padding: 0 !important; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } .slide-desc .fake-link { color: #a90e0e !important; text-decoration: underline !important; font-weight: bold; pointer-events: none !important; } .snippet-pagination { display: inline-flex !important; align-items: center; gap: 3px; margin-left: 5px; margin-right: 1px; flex-shrink: 0; } .snippet-btn { background: #a90e0e; color: white; border: none; border-radius: 4px; width: 26px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; transition: background 0.2s; pointer-events: auto; } .snippet-btn:hover { background: #8b0b0b; } .snippet-btn.disabled { background: #ccc; cursor: not-allowed; } /* Ειδική ρύθμιση μόνο για μεγάλες οθόνες (> 900px) */ @media screen and (min-width: 901px) { .slide:hover .slide-title { max-height: 450px !important; } .slide-title strong { font-size: 18px !important; margin-bottom: 5px !important; } .slide-desc-container { position: relative !important; display: none !important; } .slide:hover .slide-desc-container { display: block !important; } .slide-desc { font-size: 16px !important; line-height: 1.4 !important; padding: 2px 2px !important; padding-right: 70px !important; display: block !important; } .snippet-pagination { position: absolute !important; bottom: 5px !important; right: 5px !important; margin: 0 !important; z-index: 15; } } /* ========================================= FLOATING REACTIONS ========================================= */ .floating-reactions { position: absolute; right: 0px; top: 60%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; z-index: 25; background: transparent; padding: 4px 2px; border-radius: 6px 0 0 6px; } .floating-btn { background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: #111; font-family: Arial, sans-serif; font-weight: bold; font-size: 9px; transition: transform 0.2s; pointer-events: auto; } .floating-btn span:first-child { font-size: 20px; margin-bottom: -1px; } .floating-btn:hover { transform: scale(1.2); } .floating-reactions.voted .floating-btn, .floating-reactions.is-voting .floating-btn { opacity: 0.5; pointer-events: none !important; } @media screen and (min-width: 1900px) { .floating-reactions { top: 65% !important; gap: 5px; right: 5px; } .floating-btn span:first-child { font-size: 24px !important; } .floating-btn { font-size: 14px !important; } } @media screen and (min-width: 1000px) and (max-width: 1899px) { .floating-reactions { top: 65% !important; gap: 5px; right: 5px; } .floating-btn span:first-child { font-size: 34px !important; } .floating-btn { font-size: 14px !important; } } @media (max-width: 1468px) { .floating-reactions.hidden-reactions { opacity: 0 !important; visibility: hidden !important; transition: opacity 0.5s ease, visibility 0.5s !important; pointer-events: none !important; } .floating-reactions { transition: opacity 0.5s ease, visibility 0.5s !important; } } /* ========================================= MEGA MENU ========================================= */ .mega-content { width: 600px !important; display: flex !important; flex-direction: row; padding: 15px !important; left: 0 !important; border: 1px solid #dcdcdc !important; box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; border-radius: 0 0 12px 12px !important; } .mega-column { flex: 1; padding: 0 10px; } .mega-title { font-weight: bold; color: #a90e0e; display: block; padding: 5px 0; border-bottom: 1px solid #ddd; margin-bottom: 5px; } .classes .mega-content, .useful .mega-content { width: 360px !important; min-width: 200px !important; max-width: 370px !important; } /* ========================================= MOBILE & TABLET FIXES (Max-width 868px) ========================================= */ @media screen and (max-width: 868px) { #recent-slider { max-width: 100% !important; height: 460px !important; margin: 0 auto !important; padding: 0 !important; left: 0; } #recent-slider .slide img { flex: 1 1 auto !important; height: 1px !important; width: 100% !important; object-fit: fill !important; border-radius: 0 !important; margin: 0 !important; } #recent-slider .slide { padding: 8px 0 0 0 !important; justify-content: flex-end !important; } .slide-title { font-size: 15px; margin-top: 0 !important; margin-bottom: 0 !important; padding: 2px 0 0 0 !important; line-height: 1.2 !important; width: 100%; box-sizing: border-box; pointer-events: auto !important; cursor: pointer; max-height: 35px; } .slide:active .slide-title, .slide:focus .slide-title, .slide:hover .slide-title { max-height: 250px !important; } .slide:active .slide-desc-container, .slide:focus .slide-desc-container, .slide:hover .slide-desc-container { display: flex !important; align-items: center; justify-content: space-between; width: 100%; } .slide-desc { flex: 1; text-align: left; } .snippet-pagination { margin: 0 0 0 1px !important; padding: 0 !important; gap: 3px !important; flex-shrink: 0; } .snippet-btn { width: 22px !important; height: 18px !important; padding: 0 !important; margin: 0 !important; font-size: 9px !important; } .slider-arrow { width: 30px; height: 30px; font-size: 14px; top: 40%; } .slider-arrow.left { left: 0px !important; } .slider-arrow.right { right: 0px !important; } .zoom-icon { right: 0px !important; bottom: 57px !important; width: 35px !important; height: 35px !important; font-size: 20px !important; } .mega-content { flex-direction: column; width: 100% !important; } .classes .mega-content { position: absolute !important; top: 100% !important; left: -55px !important; right: auto !important; width: 100px !important; margin: 5px 0 0 0 !important; transform: none !important; } .useful .mega-content { position: absolute !important; top: 100% !important; left: -15px !important; right: auto !important; width: 100px !important; margin: 5px 0 0 0 !important; transform: none !important; } /* Στοχεύουμε την κλάση classes */ .classes .mega-content { right: -65px !important; left: auto !important; width: auto !important; max-width: 300px !important; } .classes { position: relative !important; } /* Ελεγχόμενο Cover (Slider Images) */ #recent-slider .slide:not(.pinned-contain) img { object-fit: fill !important; width: 120% !important; height: 100% !important; max-width: none !important; margin-left: -10% !important; } #recent-slider .slide.pinned-contain img { object-fit: fill !important; width: 100% !important; height: 100% !important; max-width: 100% !important; margin-left: 0 !important; } .floating-reactions { width: max-content !important; min-width: auto !important; right: 5px !important; left: auto !important; padding: 6px 3px !important; background: rgba(0, 0, 0, 0.5) !important; border-radius: 10px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; } .floating-reactions .floating-btn { width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; } .floating-reactions .floating-btn span:first-child { font-size: 20px !important; display: block !important; line-height: 1 !important; } .floating-reactions .floating-btn span:last-child { font-size: 9px !important; color: #ffffff !important; margin-top: -2px !important; } } /* Ρύθμιση για τα βελάκια του Lightbox στο κινητό */ @media screen and (max-width: 768px) { .lightbox-prev, .lightbox-next { font-size: 22px !important; padding: 8px 12px !important; background: rgba(0, 0, 0, 0.4) !important; border-radius: 50% !important; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; } .lightbox-prev { left: 10px !important; } .lightbox-next { right: 10px !important; } .lightbox-close { top: 15px; right: 20px; font-size: 40px !important; } .lightbox-counter { font-size: 14px !important; bottom: 40px !important; bottom: 85px !important; /* Εδώ είχες ένα δεύτερο rule πιο κάτω, το μαζέψαμε */ } #lightbox-download { top: 15px; left: 15px; font-size: 32px; } .lightbox-thumbnails { bottom: 5px; max-width: 95vw; } .thumb-img { width: 50px; height: 50px; } } /* === ΔΙΑΦΟΡΕΣ ΡΥΘΜΙΣΕΙΣ (Touch, Lightbox Fixes, κλπ) === */ @media (hover: none) { nav a:hover, .dropdown button:hover, .dropdown-content a:hover, .slide:hover { background: transparent !important; transition: none !important; } } .nav-hidden-active { background: transparent !important; box-shadow: none !important; border: none !important; transition: all 0.8s ease-in-out; } .nav-hidden-active > a, .nav-hidden-active > .dropdown > button { opacity: 0 !important; pointer-events: none !important; } .nav-hidden-active .dropdown:hover .dropdown-content { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } body.lb-active { zoom: 1 !important; -webkit-zoom: 1 !important; transform: none !important; -webkit-transform: none !important; -moz-transform: none !important; } body.lb-active #custom-lightbox { transform: none !important; zoom: 1 !important; } /* Ειδική ρύθμιση για tablet με οθόνη αφής (landscape) */ @media screen and (min-width: 768px) and (max-width: 1300px) and (orientation: landscape) and (pointer: coarse) { body.lb-active #custom-lightbox { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: block !important; transform: none !important; } #custom-lightbox img { position: relative !important; top: 70px !important; left: 50% !important; transform: translateX(-50%) !important; max-width: 100vw !important; max-height: 90vh !important; width: auto !important; height: auto !important; object-fit: contain !important; margin-bottom: 10px !important; display: block !important; } #custom-lightbox .thumbnail-wrapper img, #custom-lightbox [class*="thumb"] img, #custom-lightbox img[class*="thumb"], .thumbnail-wrapper img { width: 75px !important; height: 65px !important; min-width: 35px !important; min-height: 25px !important; position: static !important; transform: none !important; display: inline-block !important; margin: 2px !important; border: 1px solid white !important; object-fit: cover !important; opacity: 1 !important; visibility: visible !important; } .thumbnail-wrapper, [class*="thumb"] { display: block !important; text-align: center !important; margin-top: 5px !important; height: auto !important; min-height: 30px !important; width: 100% !important; } } .lb-hidden { opacity: 0 !important; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s; } .lightbox-prev, .lightbox-next, .lightbox-close, .lightbox-counter { transition: opacity 0.3s ease; opacity: 1; } /* === ΔΙΟΡΘΩΣΗ ΒΙΝΤΕΟ ΣΤΟ LIGHTBOX (ΟΡΙΖΟΝΤΙΑ ΘΕΣΗ) === */ #custom-lightbox img[style*="display: none"] { display: none !important; } #custom-lightbox iframe[style*="display: none"] { display: none !important; } @media screen and (max-width: 1300px) and (orientation: landscape) and (pointer: coarse) { #custom-lightbox iframe#lightbox-video { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 80vw !important; height: 75vh !important; margin: 0 !important; max-width: 900px !important; } #custom-lightbox iframe#lightbox-video[style*="display: none"] { display: none !important; } } /* === ΔΙΟΡΘΩΣΗ ΓΙΑ ΤΑ THUMBNAILS (ΑΝΑΒΑΘΜΙΣΜΕΝΟΣ ΚΩΔΙΚΑΣ / TABLET LANDSCAPE) === */ @media screen and (min-width: 768px) and (max-width: 1300px) and (orientation: landscape) and (pointer: coarse) { /* Σταθεροποιούμε το container στο κάτω μέρος */ .lightbox-thumbnails { display: flex !important; flex-direction: row !important; justify-content: center !important; position: absolute !important; bottom: 15px !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; width: 90vw !important; z-index: 100000 !important; } /* Ακυρώνουμε το λάθος πλάτος (100%) από τον παλιό κανόνα */ #custom-lightbox button.thumb-img { display: inline-block !important; width: 75px !important; height: 65px !important; margin: 0 5px !important; padding: 0 !important; min-height: auto !important; flex: 0 0 auto !important; background: transparent !important; } /* Προσαρμόζουμε την εικόνα μέσα στο κουμπί */ #custom-lightbox button.thumb-img img { width: 100% !important; height: 100% !important; margin: 0 !important; position: static !important; object-fit: cover !important; display: block !important; } } @media screen and (min-width: 1000px) and (pointer: fine) { #HTML1 { width: 100% !important; max-width: 945px !important; /* Η όποιο μέγιστο πλάτος θέλεις */ position: relative !important; left: 0 !important; /* Αλλαγή από -30px σε 0 */ margin: 0 auto !important; /* Αυτόματο κεντράρισμα */ } #HTML1, #recent-slider { width: 100% !important; max-width: 100% !important; /* Καταργεί τα 840px / 945px */ } #recent-slider { width: 100% !important; max-width: 100% !important; } #recent-slider .slide { width: 100% !important; max-width: 100% !important; } #recent-slider .slide img { width: 100% !important; max-width: 100% !important; object-fit: fill !important; } } @media screen and (min-width: 800px){ nav { gap: 21px !important; /* Αυξάνει ΜΟΝΟ την απόσταση μεταξύ των κουμπιών (το αρχικό ήταν 2px) */ } /* Διορθώθηκε το > σε > */ nav > a, nav div.dropdown > button, nav .mega-menu > button, #HTML1 nav button { font-size: 17px !important; } @supports (-moz-appearance: none) { nav { gap: 20px !important; } } } /* === ΚΑΝΟΝΑΣ ΜΟΝΟ ΓΙΑ TABLET (Οθόνες Αφής από 800px έως 1800px) === */ @media screen and (min-width: 900px) and (max-width: 1500px) and (pointer: coarse) { nav { gap: 1px !important; } /* Παράδειγμα 2: Αλλαγή στο μέγεθος των γραμμάτων των βασικών κουμπιών */ nav > a, nav div.dropdown > button, nav .mega-menu > button, #HTML1 nav button { font-size: 18px !important; } } /* ========================================= ΑΝΕΞΑΡΤΗΤΟ TOP NEWS TICKER (ΤΕΛΙΚΗ ΜΟΡΦΗ ΜΕ ΕΙΣΟΔΟ ΑΠΟ ΔΕΞΙΑ) ========================================= */ #unique-top-ticker-outer { margin-top: -20px !important; margin-bottom: -8px !important; margin-left: auto !important; margin-right: auto !important; width: 95% !important; max-width: 1000px; min-width: 320px; position: relative; z-index: 9999 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: hidden !important; white-space: nowrap; pointer-events: none; line-height: 1 !important; /* Ομαλή εμφάνιση χωρίς να αναβοσβήνει κείμενο */ opacity: 0; transition: opacity 0.5s ease-in-out; /* MASTER TRICK: Λέμε στο CSS να υπολογίζει το ακριβές πλάτος αυτού του κουτιού */ container-type: inline-size; } #unique-top-ticker-outer.ticker-loaded { opacity: 1 !important; } #unique-top-ticker-scroll { display: inline-block; will-change: transform; } /* ΚΙΝΗΣΗ 1: Η Πρώτη Ανάρτηση ξεκινάει ακριβώς από το δεξί άκρο (100cqi) */ @keyframes ticker-entrance { 0% { transform: translateX(100vw); transform: translateX(100cqi); } 100% { transform: translateX(0); } } /* ΚΙΝΗΣΗ 2: Όταν μπει, συνεχίζει να κυλάει ασταμάτητα χωρίς κενό (-50%) */ @keyframes ticker-loop { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .unique-top-ticker-link { display: inline-block; vertical-align: middle; margin-top: -5px !important; pointer-events: auto; color: #0b3c5d !important; font-weight: 700; font-size: 18px; line-height: 1 !important; padding: 0px 24px; text-decoration: none !important; background: transparent !important; } .unique-top-ticker-link:hover { color: #145da0 !important; } .unique-top-ticker-link::after { content: "|"; margin-left: 24px; color: #145da0; opacity: .5; font-weight: 700; } #unique-top-ticker-outer:hover #unique-top-ticker-scroll, #unique-top-ticker-outer:focus-within #unique-top-ticker-scroll { animation-play-state: paused !important; } /* =============================== ΡΥΘΜΙΣΕΙΣ & ΜΕΤΑΒΛΗΤΕΣ ==================== =========== */ :root { --search-size: 39px; --search-offset-y: 40px; --search-offset-x: 120px; --search-z: 1; --lib-color: #27ae60; --a11y-blue: #0056b3; } /* =============================== ΜΗΔΕΝΙΣΜΟΣ ΧΩΡΟΥ GADGET =============================== */ .widget:has(#tools-mount), .section:has(#tools-mount), .HTML:has(#tools-mount), .widget-content:has(#tools-mount) { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; overflow: visible !important; } #tools-mount { position: relative !important; height: 0 !important; overflow: visible !important; font-family: Arial, sans-serif; } /* ========================================================= DESKTOP ΣΤΟΙΧΕΙΑ (Κοινά) ========================================================= */ #search-fab { display: none !important; position: absolute !important; top: var(--search-offset-y) !important; left: calc(50% + var(--search-offset-x)) !important; transform: translateX(-50%) !important; width: var(--search-size); height: var(--search-size); border-radius: 999px; align-items: center; justify-content: center; background: rgba(240,246,250,.92); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 22px rgba(0,0,0,.14); cursor: pointer; z-index: var(--search-z) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } #search-fab:hover { transform: translateX(-50%) scale(1.05) !important; box-shadow: 0 12px 26px rgba(0,0,0,.2); } #search-fab svg { width: 22px; height: 22px; fill: #2c3e50; } #search-pop { position: absolute !important; top: calc(var(--search-offset-y) + var(--search-size) + 10px) !important; left: calc(50% + var(--search-offset-x)) !important; transform: translateX(-50%) translateY(10px) !important; width: min(92vw, 360px); padding: 10px; border-radius: 14px; background: rgba(240,246,250,.96); backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,.10); box-shadow: 0 18px 40px rgba(0,0,0,.30); z-index: 2147483647 !important; opacity: 0; visibility: hidden; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1); } #search-pop.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) !important; } .desktop-fab { display: flex !important; position: absolute !important; top: calc(var(--search-offset-y) + 3px) !important; transform: translateX(-50%) !important; width: 37px !important; height: 37px !important; z-index: var(--search-z) !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; cursor: pointer !important; text-decoration: none !important; transition: transform 0.2s ease !important; } .desktop-fab:hover { transform: translateX(-50%) scale(1.1) !important; } #yt-fab { left: calc(50% + var(--search-offset-x) - 87px) !important; background: white !important; } #yt-fab svg { width: 24px; height: 24px; transform: scale(1.3); flex-shrink: 0; } #contact-master-fab { left: calc(50% + var(--search-offset-x) - 130px) !important; background: #2c3e50 !important; color: white !important; font-size: 18px !important; border: none !important; } #lib-fab { left: calc(50% + var(--search-offset-x) - 176px) !important; background: var(--lib-color) !important; } #lib-fab svg { width: 30px !important; height: 30px !important; fill: white; transform: scale(2.0) !important; transition: transform 0.2s ease; } #share-master-fab { left: calc(50% + var(--search-offset-x) - 1px) !important; background: #607d8b !important; color: white !important; border: none !important; } /* ========================================================= ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ (Επικοινωνία & Βιβλιοθήκη) - Desktop ========================================================= */ #contact-options, #lib-options { position: absolute !important; top: calc(var(--search-offset-y) + 37px + 15px) !important; background: white !important; border-radius: 12px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important; flex-direction: column !important; z-index: 2147483647 !important; border: 1px solid #ddd !important; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-10px) !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex !important; } #contact-options { width: max-content !important; left: calc(50% + var(--search-offset-x) - 120px) !important; overflow: visible !important; } #lib-options { width: 168px !important; left: calc(50% + var(--search-offset-x) - 160px) !important; overflow: hidden !important; } #contact-options.show, #lib-options.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) !important; } .menu-opt { padding: 12px 15px !important; text-decoration: none !important; color: #333 !important; font-size: 16px !important; font-weight: bold !important; display: flex !important; align-items: center !important; gap: 10px !important; border-bottom: 1px solid #eee !important; transition: background 0.2s; } .menu-opt:last-child { border-bottom: none !important; } .menu-opt:active, .menu-opt:hover { background: #f0f0f0 !important; } .desk-only { display: flex !important; } .mob-only { display: none !important; } /* ========================================================= ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ (Desktop & Global Effects) ========================================================= */ #a11y-fab { position: fixed !important; top: 40px !important; right: 20px !important; width: 44px; height: 44px; border-radius: 50%; background: var(--a11y-blue); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.3); cursor: pointer; z-index: 1 !important; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; } #a11y-fab:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.4); } #a11y-fab svg { width: 26px; height: 26px; fill: #fff; } #a11y-menu { position: fixed !important; top: 95px !important; right: 20px !important; background: #f4f7f6; border: 1px solid #dcdcdc; border-radius: 16px; padding: 15px; width: min(90vw, 300px); box-shadow: 0 12px 40px rgba(0,0,0,0.2); z-index: 2147483647 !important; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } #a11y-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .a11y-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #e0e0e0; padding-bottom: 8px; margin-bottom: 12px; } .a11y-title { font-weight: 900; font-size: 15px; color: var(--a11y-blue); margin: 0; } .a11y-close { background: transparent; border: none; font-size: 22px; cursor: pointer; color: #666; transition: color 0.2s;} .a11y-close:hover { color: #d32f2f; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-grid button { background: #fff; border: 1px solid #ced4da; border-radius: 10px; padding: 10px 5px; font-size: 12px; font-weight: bold; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.2s; } .a11y-grid button:hover { background: #e9ecef; } .a11y-grid button.is-active { background: #cce5ff; border-color: var(--a11y-blue); color: #004085; } .a11y-grid button .icon { font-size: 20px; } #a11y-btn-reset { background: var(--a11y-blue); color: #fff; border: none; border-radius: 10px; padding: 10px; font-weight: bold; margin-top: 12px; cursor: pointer; transition: background 0.2s; } html.a11y-contrast { filter: invert(1) hue-rotate(180deg) contrast(110%) !important; background-color: #111 !important; } html.a11y-contrast img, html.a11y-contrast video { filter: invert(1) hue-rotate(180deg) !important; } html.a11y-large-text body { font-size: 125% !important; } html.a11y-links a { text-decoration: underline !important; color: #0056b3 !important; font-weight: bold !important; } html.a11y-spacing * { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html.a11y-lineheight p, html.a11y-lineheight li { line-height: 2 !important; } html.a11y-dyslexia * { font-family: "Comic Sans MS", cursive, sans-serif !important; } html.a11y-noimages img { opacity: 0 !important; } html.a11y-grayscale { filter: grayscale(100%) !important; } html.a11y-reading-mode .sidebar, html.a11y-reading-mode .header-wrapper, html.a11y-reading-mode .footer-wrapper, html.a11y-reading-mode .nav, html.a11y-reading-mode #recent-slider, html.a11y-reading-mode .comments { display: none !important; } html.a11y-reading-mode .main-wrapper { width: 100% !important; max-width: 800px !important; margin: 0 auto !important; float: none !important; } .goog-te-banner-frame.skiptranslate { display: none !important; } body { top: 0px !important; } #google_translate_element { margin-top: 10px; text-align: center; width: 100%; } .goog-te-gadget .goog-te-combo { width: 100% !important; padding: 10px !important; border-radius: 8px !important; border: 1px solid #ced4da !important; font-size: 15px !important; background: #fff !important; color: #333 !important; outline: none !important; } iframe.goog-te-menu-frame { z-index: 2147483650 !important; } /* ========================================================= ΕΞ ΑΠΟΣΤΑΣΕΩΣ ΜΑΘΗΣΗ (Accordion - Ανοίγει κάτω ΠΑΝΤΟΥ) ========================================================= */ .distance-learning-toggle { display: var(--show-dist-learning) !important; position: relative !important; padding: 0 !important; cursor: pointer; flex-direction: column !important; /* Στοιβάζει το υπομενού από κάτω */ align-items: stretch !important; width: 100% !important; } .distance-learning-toggle .main-title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 3px; font-size: 17px; font-weight: bold; transition: background 0.2s; } .distance-learning-toggle .main-title span:first-child { font-size: 20px !important; } .distance-learning-toggle .main-title:hover { background: #f0f0f0; } .submenu-container { display: none; position: static !important; /* Τέλος το πέταγμα στα δεξιά, μένει στη θέση του! */ width: 100% !important; margin-left: 0 !important; margin-top: 5px !important; background-color: #e2e8f0 !important; box-shadow: inset 0 2px 8px rgba(0,0,0,0.05) !important; border: none !important; border-left: 3px solid var(--a11y-blue) !important; border-radius: 8px !important; padding: 15px !important; max-height: none !important; box-sizing: border-box !important; } .submenu-container::-webkit-scrollbar { width: 5px; } .submenu-container::-webkit-scrollbar-track { background: transparent; } .submenu-container::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 10px; } /* Εμφάνιση στο Hover */ .distance-learning-toggle:hover .submenu-container, .distance-learning-toggle:focus-within .submenu-container { display: flex; flex-direction: column; } .classes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .classes-grid .submenu-opt { justify-content: center; background: #ffffff !important; border: 1px solid #cbd5e1 !important; padding: 10px !important; } .classes-grid .submenu-opt:hover { background: #f8fafc !important; border-color: #a0aec0 !important; } .collapsible-group { margin-bottom: 5px !important; } .collapsible-group summary { list-style: none !important; cursor: pointer !important; color: #555 !important; font-weight: 900 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; text-transform: uppercase !important; border-radius: 6px !important; transition: background 0.2s !important; user-select: none !important; font-size: 13px !important; padding: 12px 15px !important; } .collapsible-group summary::-webkit-details-marker { display: none !important; } .collapsible-group summary:hover { background: #e2e8f0 !important; } .collapsible-group .title-left { display: flex !important; align-items: center !important; gap: 6px !important; } .collapsible-group summary .title-left span { font-size: 20px !important; } .collapsible-group summary .arrow { transition: transform 0.3s ease !important; font-size: 18px !important; } .collapsible-group[open] summary .arrow { transform: rotate(180deg) !important; } .collapsible-content { padding-left: 10px !important; margin-top: 5px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } /* ========================================================= ΕΠΑΓΓΕΛΜΑΤΙΚΟ MOBILE SPEED DIAL (Κινητό) ========================================================= */ /* Overlay (Σκοτείνιασμα οθόνης - ΔΙΟΡΘΩΜΕΝΟ ΓΙΑ ΝΑ ΝΙΚΑΕΙ ΤΟ ZOOM) */ #fab-overlay { position: fixed !important; top: -50vh !important; /* Ξεκινάει πολύ πιο πάνω */ left: -50vw !important; /* Ξεκινάει πολύ πιο αριστερά */ width: 200vw !important; /* Γίνεται διπλάσιο σε πλάτος */ height: 200vh !important; /* Γίνεται διπλάσιο σε ύψος */ background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(2px) !important; z-index: 80 !important; /* Κάτω από το dial, πάνω από τη σελίδα */ opacity: 0; visibility: hidden; transition: all 0.3s ease !important; } #fab-overlay.is-active { opacity: 1; visibility: visible; } /* Container Speed Dial τέρμα αριστερά */ #mobile-speed-dial { position: fixed !important; bottom: 55px !important; left: 15px !important; z-index: 85 !important; display: flex; flex-direction: column; align-items: center; transition: transform 0.8s ease, opacity 0.8s ease !important; pointer-events: none !important; } /* Κρύψιμο στο Scroll */ .fabs-hidden { opacity: 0 !important; pointer-events: none !important; transform: translateY(80px) !important; } /* Η Λίστα των 6 Κουμπιών */ .sub-fabs-list { display: flex; flex-direction: column-reverse; /* Στοιβάζονται προς τα πάνω */ gap: 12px; margin-bottom: 15px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(30px) scale(0.5); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } .sub-fabs-list.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } /* Κεντρικό Κουμπί (Trigger) */ #main-master-fab { width: 80px; height: 80px; border-radius: 50%; background: #2c3e50; border: 2px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s ease, background 0.3s; pointer-events: auto !important; outline: none !important; -webkit-tap-highlight-color: transparent !important; } #main-master-fab.is-open { transform: rotate(135deg); background: #e74c3c; } /* Γίνεται "X" και κόκκινο */ #main-master-fab svg { fill: #fff; width: 32px; height: 32px; } /* Τα 6 Υπο-Κουμπιά */ .sub-fab { width: 48px !important; height: 48px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; cursor: pointer !important; text-decoration: none !important; border: 2px solid #fff !important; transition: transform 0.2s ease !important; outline: none !important; -webkit-tap-highlight-color: transparent !important; } .sub-fab:hover { transform: scale(1.1) !important; } /* Εξειδικευμένα χρώματα για κάθε ένα */ #lib-fab-mob { background: var(--lib-color) !important; } #lib-fab-mob svg { width: 28px !important; height: 28px !important; fill: white !important; } #contact-master-fab-mob { background: #2c3e50 !important; color: white !important; font-size: 20px !important; padding: 0 !important;} #fb-fab-mob { background: #fff !important; padding: 0 !important; border: 1px solid #ccc !important; } #fb-fab-mob svg { width: 48px !important; height: 48px !important; } #yt-fab-mob { background: white !important; padding: 0 !important; border: 1px solid #ccc !important; } #yt-fab-mob svg { width: 44px !important; height: 44px !important; } #share-master-fab-mob { background: #607d8b !important; color: white !important; font-size: 20px !important; padding: 0 !important;} #a11y-fab-mob { background: var(--a11y-blue) !important; } #a11y-fab-mob svg { width: 24px !important; height: 24px !important; fill: #fff !important; } /* Θέσεις Μενού για Κινητά (Ενεργοποιούνται δυναμικά) */ #a11y-menu.mobile-pos, #search-pop.mobile-pos, #contact-options.mobile-pos, #lib-options.mobile-pos { position: fixed !important; top: auto !important; left: 20px !important; right: auto !important; bottom: 70px !important; transform: translateY(20px) !important; z-index: 2147483647 !important; } #a11y-menu.mobile-pos.is-open, #search-pop.mobile-pos.is-open, #contact-options.mobile-pos.show, #lib-options.mobile-pos.show { transform: translateY(0) !important; } #contact-options.mobile-pos { width: 280px !important; max-height: 70vh !important; overflow-y: auto !important; } #lib-options.mobile-pos { width: 250px !important; } #search-pop.mobile-pos { width: max-content !important; max-width: 90vw !important; } /* ========================================================= ΟΡΓΑΝΩΜΕΝΑ MEDIA QUERIES ========================================================= */ @media (min-width: 1369px) { #contact-options { border-radius: 16px !important; } #contact-options .menu-opt { padding: 15px 20px !important; font-size: 18px !important; gap: 15px !important; } #contact-options .menu-opt span { font-size: 25px !important; } #lib-options { width: 280px !important; } #lib-options .menu-opt { padding: 15px 20px !important; font-size: 18px !important; gap: 12px !important; } #lib-options .menu-opt span { font-size: 24px !important; } .distance-learning-toggle .main-title { padding: 10px 3px !important; font-size: 18px !important; } .distance-learning-toggle .main-title span:first-child { font-size: 25px !important; } .submenu-container { width: 340px !important; padding: 15px 20px !important; } .collapsible-group summary, .submenu-opt { font-size: 17px !important; padding: 14px 18px !important; } .collapsible-group summary .title-left span, .submenu-opt span { font-size: 24px !important; } #mobile-speed-dial, #fab-overlay { display: none !important; } } @media (min-width: 4369px) { #a11y-btn-translate { display: none !important; } .collapsible-content { max-height: 45vh !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 5px !important; } .collapsible-content::-webkit-scrollbar { width: 4px; } .collapsible-content::-webkit-scrollbar-track { background: transparent; } .collapsible-content::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 10px; } } @media (max-width: 5368px) { .desk-only { display: none !important; } .mob-only { display: flex !important; } #lib-fab, #contact-master-fab, #yt-fab, #share-master-fab { display: none !important; } } @media (max-width: 1379px) { .distance-learning-toggle { flex-direction: column !important; align-items: stretch !important; width: 100% !important; } .submenu-container { position: static !important; width: 100% !important; margin-left: 0 !important; margin-top: 5px !important; box-shadow: inset 0 2px 8px rgba(0,0,0,0.05) !important; border: none !important; border-left: 3px solid var(--a11y-blue) !important; border-radius: 8px !important; padding: 15px !important; max-height: none !important; box-sizing: border-box !important; } } @media (max-width: 868px) { #contact-options .menu-opt, #lib-options .menu-opt { padding: 10px 15px !important; font-size: 17px !important; } #contact-options .menu-opt span, #lib-options .menu-opt span { font-size: 20px !important; } #search-pop input { padding: 12px !important; font-size: 16px !important; } #search-pop button { padding: 12px 15px !important; } .submenu-container { display: none; } .distance-learning-toggle:hover .submenu-container { display: block !important; } } /* ΠΡΟΣΘΗΚΗ: Λεζάντες (Labels) στα Κουμπιά */ .sub-fab { position: relative !important; overflow: visible !important; } .fab-label { position: absolute; left: 60px; /* Σπρώχνει τη λεζάντα στα δεξιά του κουμπιού */ background: rgba(255, 255, 255, 0.95); color: #2c3e50; padding: 6px 14px; border-radius: 8px; font-size: 14px; font-weight: 900; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.15); pointer-events: none; /* Για να μην μπλοκάρει τα κλικ */ border: 1px solid #e0e0e0; } /* Εφέ Ντόμινο (Staggered Animation) στα Υπο-κουμπιά */ .sub-fabs-list .sub-fab { opacity: 0; transform: translateY(20px) scale(0.8); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important; } .sub-fabs-list.is-open .sub-fab { opacity: 1; transform: translateY(0) scale(1); } /* Διαδοχική καθυστέρηση από κάτω προς τα πάνω */ .sub-fabs-list.is-open .sub-fab:nth-child(1) { transition-delay: 0.05s !important; } .sub-fabs-list.is-open .sub-fab:nth-child(2) { transition-delay: 0.10s !important; } .sub-fabs-list.is-open .sub-fab:nth-child(3) { transition-delay: 0.15s !important; } .sub-fabs-list.is-open .sub-fab:nth-child(4) { transition-delay: 0.20s !important; } .sub-fabs-list.is-open .sub-fab:nth-child(5) { transition-delay: 0.25s !important; } .sub-fabs-list.is-open .sub-fab:nth-child(6) { transition-delay: 0.30s !important; } /* Όταν κλείνει, φεύγουν όλα μαζί γρήγορα */ .sub-fabs-list .sub-fab { transition-delay: 0s !important; } @media (max-width: 768px) { #mobile-speed-dial { bottom: 12px !important; left: 9px !important; } #main-master-fab { width: 53px !important; height: 53px !important; } } #fab-welcome-tooltip { position: absolute; left: 75px; /* Το σπρώχνει στα δεξιά του Speed Dial */ bottom: 14px; background: #2c3e50; color: white; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: bold; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.2); pointer-events: none; /* Δεν μπλοκάρει τα κλικ */ opacity: 0; transform: translateX(-15px); /* Ξεκινάει λίγο πιο αριστερά */ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 84; } /* Το μικρό τριγωνάκι που δείχνει προς το κουμπί */ #fab-welcome-tooltip::before { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border-width: 6px 6px 6px 0; border-style: solid; border-color: transparent #2c3e50 transparent transparent; } /* Η κλάση που το εμφανίζει */ #fab-welcome-tooltip.show-tooltip { opacity: 1; transform: translateX(0); } @media (min-width: 768px) and (max-width: 1400px) and (pointer: coarse) { /* Εμφανίζει το κυκλικό μενού (Speed Dial) και το σκοτείνιασμα */ #mobile-speed-dial { display: flex !important; } #fab-overlay { display: block !important; } /* Κρύβει τα παλιά μεμονωμένα κουμπιά, εκτός της Προσβασιμότητας */ #lib-fab, #contact-master-fab, #yt-fab, #share-master-fab, #search-fab { display: none !important; } /* Κρατάει ορατό το κουμπί Προσβασιμότητας (πάνω δεξιά) που έχει και το Translate */ #a11y-fab { display: flex !important; } } @media (min-width: 768px) and (max-width: 1300px) and (pointer: coarse) { #mobile-speed-dial { display: flex !important; transform: scale(1.2) !important; /* 👈 ΑΥΤΟΣ Ο ΑΡΙΘΜΟΣ! (1.2 = +20% μέγεθος) */ transform-origin: bottom left !important; /* Κρατάει τη βάση κάτω αριστερά */ } #a11y-menu.mobile-pos, #search-pop.mobile-pos, #contact-options.mobile-pos, #lib-options.mobile-pos { bottom: 160px !important; /* 👈 Αν πάλι βρίσκουν, μεγάλωσε αυτόν τον αριθμό (π.χ. 170px) */ } /* Αφήνει ΚΑΙ τη Βιβλιοθήκη ΚΑΙ την Επικοινωνία να πάρουν όσο πλάτος χρειάζεται */ #lib-options.mobile-pos, #contact-options.mobile-pos { width: max-content !important; min-width: 240px !important; } /* Απαγορεύει στις λέξεις να σπάνε στη μέση και να αλλάζουν γραμμή */ .menu-opt { white-space: nowrap !important; padding-right: 25px !important; /* Δίνει λίγο παραπάνω αέρα στα δεξιά */ } #a11y-menu.mobile-pos, #search-pop.mobile-pos, #contact-options.mobile-pos, #lib-options.mobile-pos { transform: scale(1.4) translateY(20px) !important; transform-origin: bottom left !important; /* Μεγαλώνουν από κάτω αριστερά προς τα πάνω */ } /* Κατάσταση εμφάνισης (όταν ανοίγουν) */ #a11y-menu.mobile-pos.is-open, #search-pop.mobile-pos.is-open, #contact-options.mobile-pos.show, #lib-options.mobile-pos.show { transform: scale(1.4) translateY(0) !important; } #fab-welcome-tooltip.show-tooltip { opacity: 1; transform: translateX(15px); } } @media (min-width: 1025px) and (hover: hover) and (pointer: fine) { #mobile-speed-dial { display: flex !important; transform: scale(0.9) !important; /* 👈 ΑΥΤΟΣ Ο ΑΡΙΘΜΟΣ! (1.2 = +20% μέγεθος) */ transform-origin: bottom left !important; /* Κρατάει τη βάση κάτω αριστερά */ } #a11y-menu.mobile-pos, #search-pop.mobile-pos, #contact-options.mobile-pos, #lib-options.mobile-pos { bottom: 130px !important; /* 👈 Αν πάλι βρίσκουν, μεγάλωσε αυτόν τον αριθμό (π.χ. 170px) */ } /* Αφήνει ΚΑΙ τη Βιβλιοθήκη ΚΑΙ την Επικοινωνία να πάρουν όσο πλάτος χρειάζεται */ #lib-options.mobile-pos, #contact-options.mobile-pos { width: max-content !important; min-width: 270px !important; } /* Απαγορεύει στις λέξεις να σπάνε στη μέση και να αλλάζουν γραμμή */ .menu-opt { white-space: nowrap !important; padding-right: 25px !important; /* Δίνει λίγο παραπάνω αέρα στα δεξιά */ } #a11y-menu.mobile-pos, #search-pop.mobile-pos, #contact-options.mobile-pos, #lib-options.mobile-pos { transform: scale(1) translateY(20px) !important; transform-origin: bottom left !important; /* Μεγαλώνουν από κάτω αριστερά προς τα πάνω */ } /* Κατάσταση εμφάνισης (όταν ανοίγουν) */ #a11y-menu.mobile-pos.is-open, #search-pop.mobile-pos.is-open, #contact-options.mobile-pos.show, #lib-options.mobile-pos.show { transform: scale(1) translateY(0) !important; } #fab-welcome-tooltip.show-tooltip { opacity: 1; transform: translateX(15px); } } /* ========================================================= ΕΛΑΦΡΥ HOVER ΣΤΟ ΚΕΝΤΡΙΚΟ ΚΟΥΜΠΙ (ΜΟΝΟ ΜΕ ΠΟΝΤΙΚΙ) ========================================================= */ @media (hover: hover) and (pointer: fine) { #main-master-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.4); } /* Να διατηρείται το εφέ της μεγέθυνσης και όταν είναι ανοιχτό (περιστραμμένο σε Χ) */ #main-master-fab.is-open:hover { transform: rotate(135deg) scale(1.08); } } @media (max-width: 4768px) { /* ΠΡΟΣΘΗΚΗ: Κρύβει το desktop κουμπί προσβασιμότητας στα κινητά */ #a11y-fab { display: none !important; } } @media (max-width: 370px) { #a11y-menu.mobile-pos.is-open { transform: scale(0.8) translateY(0) !important; transform-origin: bottom left !important; } } @media (min-width: 371px) and (max-width: 410px) { #a11y-menu.mobile-pos.is-open { transform: scale(0.96) translateY(0) !important; transform-origin: bottom left !important; } } @media (min-width: 1100px) and (max-width: 1500px) and (pointer: fine) { #a11y-menu.mobile-pos.is-open { transform: scale(0.85) translateY(0) !important; transform-origin: bottom left !important; } } html.a11y-focus p:hover, html.a11y-focus li:hover, html.a11y-focus h1:hover, html.a11y-focus h2:hover, html.a11y-focus h3:hover { background-color: #fff3cd !important; color: #212529 !important; border-radius: 6px !important; box-shadow: 0 0 0 3px #ffc107 !important; transition: all 0.2s ease; cursor: crosshair !important; } /* ========================================================= ΧΑΡΑΚΑΣ ΑΝΑΓΝΩΣΗΣ (READING RULER) ========================================================= */ #reading-ruler-mask { display: none; position: fixed; left: 0; width: 100vw; height: 120px; /* Το πάχος της φωτεινής λωρίδας */ transform: translateY(-50%); /* Για να είναι το ποντίκι ακριβώς στη μέση της λωρίδας */ pointer-events: none; /* Επιτρέπει τα κλικ στα άρθρα, δεν μπλοκάρει τίποτα! */ z-index: 2147483640; /* Κάτω από το μενού σου, αλλά πάνω από τη σελίδα */ box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65); /* Σκοτεινιάζει τα πάντα γύρω του */ transition: top 0.05s linear; /* Απαλή κίνηση */ } html.a11y-ruler #reading-ruler-mask { display: block; } /* Κρύβουμε και τα δύο εξ ορισμού */ #smart-btn-cursor, #smart-btn-animations { display: none !important; } /* Αν η συσκευή έχει ποντίκι με ακρίβεια (PC / Laptop) -> Δείχνει Κέρσορα */ @media (pointer: fine) { #smart-btn-cursor { display: flex !important; } } /* Αν η συσκευή λειτουργεί με αφή (Κινητό / Tablet) -> Δείχνει Κινήσεις */ @media (pointer: coarse) { #smart-btn-animations { display: flex !important; } } /* ΛΕΙΤΟΥΡΓΙΑ 1: Μεγάλος Κέρσορας Υψηλής Ορατότητας (Για PC) */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,2 L2,26 L8,20 L14,31 L18,29 L12,18 L21,18 Z' fill='%23FFEB3B' stroke='%23111' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E"), auto !important; } /* ΛΕΙΤΟΥΡΓΙΑ 2: Παύση Κινήσεων (Για Κινητά) */ html.a11y-no-animations * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ========================================================= Μενού Κοινοποίησης (Ενοποιημένο Στυλ με τα άλλα Μενού) ========================================================= */ #share-options { display: none; flex-direction: column !important; /* --- ΙΔΙΟ ΣΤΥΛ ΜΕ ΤΑ ΑΛΛΑ MENU --- */ background: white !important; border: 1px solid #ddd !important; border-radius: 12px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important; padding: 0 !important; /* Αφαιρέθηκε για να πηγαίνουν τα κουμπιά από άκρη σε άκρη */ overflow: hidden !important; /* Κρατάει το hover μέσα στις στρογγυλές γωνίες */ min-width: 240px; z-index: 2147483647 !important; font-family: inherit; /* --- ΘΕΣΗ ΓΙΑ DESKTOP --- */ position: absolute !important; top: calc(var(--search-offset-y) + 37px + 15px) !important; left: calc(50% + var(--search-offset-x) - 1px) !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; } #share-options.show { display: flex !important; } /* --- ΘΕΣΗ ΓΙΑ ΚΙΝΗΤΑ (Speed Dial) --- */ #share-options.mobile-pos, .custom-action-menu.mobile-pos { position: fixed !important; top: auto !important; bottom: 70px !important; left: 20px !important; right: auto !important; transform: none !important; } @media (max-width: 1400px) { #share-options { position: fixed !important; top: auto !important; bottom: 140px !important; left: 20px !important; right: auto !important; transform: none !important; } } /* --- ΣΤΥΛ ΓΙΑ ΤΑ ΚΟΥΜΠΙΑ ΜΕΣΑ ΣΤΟ MENU (Ίδιο με .menu-opt) --- */ .action-menu-btn { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 15px !important; border: none !important; border-bottom: 1px solid #eee !important; /* Η ΔΙΑΧΩΡΙΣΤΙΚΗ ΓΡΑΜΜΗ */ background: transparent !important; border-radius: 0 !important; /* Αφαιρέθηκε για να είναι edge-to-edge */ cursor: pointer; font-size: 18px !important; font-weight: bold !important; color: #333 !important; width: 100%; text-align: left; transition: background 0.2s !important; } /* Αφαίρεση γραμμής από το τελευταίο κουμπί */ .action-menu-btn:last-child { border-bottom: none !important; } /* Εφέ όταν περνάς το ποντίκι (Hover) ίδιο με τα άλλα */ .action-menu-btn:active, .action-menu-btn:hover { background: #f0f0f0 !important; color: #333 !important; } /* Στυλ για τα εικονίδια μέσα στα κουμπιά */ .action-menu-btn svg, .action-menu-btn i { font-size: 18px !important; color: #333 !important; /* Πιο έντονα για να ταιριάζουν με το bold κείμενο */ transition: color 0.2s ease; } @media (min-width: 1025px) and (hover: hover) and (pointer: fine) { #share-options.mobile-pos { bottom: 130px !important; } #share-options.mobile-pos { width: max-content !important; min-width: 230px !important; } .menu-opt, .action-menu-btn { white-space: nowrap !important; padding-right: 25px !important; } #share-options.mobile-pos { transform: scale(1.2) translateY(20px) !important; transform-origin: bottom left !important; } #share-options.mobile-pos.show { transform: scale(1.2) translateY(0) !important; } } /* ========================================================= ΕΞΥΠΝΟ ΛΕΞΙΚΟ (SMART GLOSSARY - WIKIPEDIA API) ========================================================= */ #smart-glossary-tooltip { position: fixed !important; z-index: 2147483650 !important; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 12px 16px; width: max-content; max-width: 320px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #333; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } #smart-glossary-tooltip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; /* Επιτρέπει να κάνεις κλικ μέσα του, π.χ. σε link */ } /* Το τριγωνάκι που δείχνει προς τα κάτω */ #smart-glossary-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; border-color: #ffffff transparent transparent transparent; } .glossary-title { font-weight: 900; color: var(--a11y-blue); margin-bottom: 6px; font-size: 16px; border-bottom: 1px solid #eee; padding-bottom: 4px; display: block; } .glossary-loading { display: flex; align-items: center; gap: 8px; color: #666; font-style: italic; font-weight: bold; } .glossary-error { color: #d32f2f; font-weight: bold; } /* Αλλάζει τον κέρσορα σε ερωτηματικό όταν το Λεξικό είναι ενεργό */ html.a11y-glossary body { cursor: help !important; } html.a11y-glossary a { cursor: pointer !important; } /* ========================================================================== SENIOR UX: PRINTER-FRIENDLY CSS (Οικονομία Μελανιού) ========================================================================== */ @media print { /* 1. Κρύβουμε Μενού, Sidebars, Popups, Κουμπιά και Iframes */ nav, .tabs-outer, .column-left-outer, .column-right-outer, footer, #mobile-speed-dial, #a11y-fab, #gt-floating-btn, .toTopBtn, #unique-top-ticker-outer, .glass-modal-overlay, #tidio-chat, #recent-slider, .jukebox-container, .school-stats-wrapper, iframe { display: none !important; } /* 2. Το άρθρο να πιάνει όλο το πλάτος του χαρτιού (Α4) */ .main-outer, .main-inner, .columns, .column-center-outer, .post-outer { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border: none !important; } /* 3. Μαύρα γράμματα σε λευκό χαρτί, χωρίς σκιές & backgrounds */ body, .post-body, .post-title, .post-body * { background: #fff !important; color: #000 !important; text-shadow: none !important; } /* 4. Εμφάνιση του URL δίπλα στα links για να ξέρει ο γονιός πού να μπει */ .post-body a::after { content: " (" attr(href) ")"; font-size: 12px; color: #555; } } /* ======================================================================== 1. ΚΕΝΤΡΙΚΟ ΠΛΕΓΜΑ WIDGET (Στατιστικά Σχολείου) ======================================================================== */ .school-stats-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; width: 100%; max-width: 990px; margin: 35px auto 0px auto; font-family: 'Inter', Arial, sans-serif; } .stat-glass-card { background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 18px; padding: 20px 5px; text-align: center; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; box-sizing: border-box; text-decoration: none !important; } .stat-glass-card:hover { transform: translateY(-8px); border-color: #a90e0e; box-shadow: 0 15px 35px rgba(169, 14, 14, 0.15); background: rgba(255, 255, 255, 0.7); } .stat-icon { font-size: 42px; margin-bottom: 5px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); } .stat-number { font-size: 32px; font-weight: 900; color: #a90e0e; line-height: 1; margin-bottom: 5px; } .stat-label { font-size: 11px; font-weight: 800; color: #2c3e50; text-transform: uppercase; letter-spacing: 0.2px; white-space: nowrap; } /* --- Ρυθμίσεις για τη διπλή κάρτα (Βιβλιοθήκη & Υλικό) --- */ .stat-split-container { display: flex; width: 100%; align-items: center; justify-content: space-evenly; } .stat-link { text-decoration: none !important; display: flex; flex-direction: column; align-items: center; flex: 1; color: inherit; transition: opacity 0.3s ease; cursor: pointer; } .stat-link:hover { opacity: 0.7; } .stat-split-divider { width: 1px; height: 50px; background: rgba(44, 62, 80, 0.15); } .stat-link .stat-icon { font-size: 32px; } .stat-link .stat-number { font-size: 31px; } .stat-link .stat-label { font-size: 10px; } /* Ειδοποίηση ("Εξερευνήστε...") */ .stats-notice { margin-top: 5px; margin-bottom: -30px; } /* Responsive για το πλέγμα και την ειδοποίηση */ @media screen and (max-width: 768px) { .school-stats-wrapper { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 2px; margin-bottom: 0px; } .stat-label { white-space: normal; } .stats-notice { margin-top: 1px; margin-bottom: 2px; } } /* ======================================================================== 2. SENIOR MASTER GLASSMORPHISM MODAL (ΤΟ ΣΥΝΝΕΦΑΚΙ) ======================================================================== */ /* 1. Το Overlay (Σκοτεινιάζει και θολώνει την πίσω σελίδα) */ .glass-modal-overlay { position: fixed; inset: 0; /* 👇 ΕΠΙΣΤΡΕΦΕΙ ΤΟ ΣΚΟΤΕΙΝΙΑΣΜΑ (50%) ΚΑΙ Η ΘΟΛΟΥΡΑ 👇 */ background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: flex-start; padding-top: 50vh; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 2147483647; } .glass-modal-overlay.active { opacity: 1; visibility: visible; } /* 2. Το Modal Box (Γίνεται ξανά ημιδιάφανο και Γυάλινο) */ .glass-modal-box { /* 👇 ΗΜΙΔΙΑΦΑΝΟ ΣΚΟΥΡΟ ΜΠΛΕ 👇 */ background: rgba(30, 41, 59, 0.85); /* 👇 ΘΟΛΟΥΡΑ ΣΤΟ ΙΔΙΟ ΤΟ ΚΟΥΤΙ (Glass effect) 👇 */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); border-top: 1px solid rgba(255, 255, 255, 0.3); /* Λάμψη στο πάνω μέρος */ border-radius: 20px; padding: 30px 20px; text-align: center; width: 90%; max-width: 370px; margin: 0; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); transform: translateY(-15vh) scale(0.95); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; font-family: 'Inter', Arial, sans-serif; } /* Όταν ανοίγει το Modal, η κάρτα έρχεται ομαλά στη θέση της */ .glass-modal-overlay.active .glass-modal-box { transform: translateY(-15vh) scale(1); } .glass-modal-close { position: absolute; top: 12px; right: 18px; font-size: 28px; font-weight: bold; color: #94a3b8; cursor: pointer; line-height: 1; transition: color 0.2s; } .glass-modal-close:hover { color: #f87171; } .glass-modal-icon { font-size: 50px; margin-bottom: 12px; } .glass-modal-text { font-size: 16px; color: #f1f5f9; margin-bottom: 25px; line-height: 1.6; font-weight: 500; } /* Το div για τα κουμπιά (Αντικαθιστά το style="..." του HTML) */ .glass-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .glass-modal-btn { display: inline-block; padding: 12px 28px; background: #a90e0e; color: #fff !important; text-decoration: none !important; border-radius: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(169, 14, 14, 0.4); transition: background 0.3s, transform 0.2s; } .glass-modal-btn:hover { background: #c91414; transform: translateY(-2px); } /* --- 1. ΚΡΥΒΟΥΜΕ ΤΟ WIDGET ΚΑΙ ΤΟ ΚΕΝΟ ΤΟΥ ΠΑΝΤΟΥ ΑΡΧΙΚΑ --- */ #mobile-newsletter-wrapper { display: none !important; } .widget:has(#mobile-newsletter-wrapper) { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; } /* --- 2. ΕΜΦΑΝΙΣΗ ΜΟΝΟ ΣΤΑ ΚΙΝΗΤΑ ΚΑΙ ΜΟΝΟ ΑΝ ΕΙΝΑΙ ΑΡΧΙΚΗ --- */ @media screen and (max-width: 767px) { /* Η κλάση .show-on-home μπαίνει αυτόματα από το script παρακάτω μόνο στην αρχική */ #mobile-newsletter-wrapper.show-on-home { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; } /* Επαναφορά του widget container για να φανεί το newsletter */ .widget:has(#mobile-newsletter-wrapper.show-on-home) { display: block !important; } /* --- 3. ΣΤΥΛ ΤΟΥ NEWSLETTER (ΓΙΑ ΚΙΝΗΤΑ) - Ανανεωμένο με Glassmorphism --- */ .custom-newsletter-box { background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 20px; padding: 25px 20px; text-align: center; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); margin-bottom: 20px; font-family: 'Inter', Arial, sans-serif; } .custom-newsletter-icon { font-size: 36px; margin-bottom: 8px; line-height: 1; } .custom-newsletter-title { color: #a90e0e; font-size: 20px; font-weight: 800; margin-bottom: 5px; line-height: 1.3; } .custom-newsletter-subtitle { color: #333333; font-size: 12px; margin-bottom: 18px; } .custom-newsletter-input { width: 100%; padding: 12px 15px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 15px; font-family: inherit; font-size: 14px; text-align: left; box-sizing: border-box; outline: none; background: rgba(255, 255, 255, 0.8); transition: all 0.3s ease; } .custom-newsletter-input:focus { border-color: #a90e0e; box-shadow: 0 4px 12px rgba(169, 14, 14, 0.15); background: #ffffff; } .custom-newsletter-notice { font-size: 12px; color: #2c3e50; background: rgba(255, 255, 255, 0.5); /* Ελαφρώς λευκό για να ξεχωρίζει πάνω στο γυαλί */ border-left: 3px solid #a90e0e; border-radius: 6px; padding: 10px 12px; margin-bottom: 15px; text-align: left; line-height: 1.4; } .custom-newsletter-notice strong { color: #a90e0e; font-weight: 700; } .custom-newsletter-btn { background-color: #a90e0e; color: #ffffff; border: none; border-radius: 12px; padding: 12px 25px; width: 100%; font-size: 15px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; font-family: inherit; display: flex; justify-content: center; align-items: center; gap: 8px; } .custom-newsletter-btn:hover { background-color: #8c0a0a; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(169, 14, 14, 0.25); } } /* Βασικές ρυθμίσεις */ * { box-sizing: border-box; } /* Κεντρικό Γυάλινο Πλαίσιο */ .jukebox-container { width: 100%; max-width: 600px; margin: 5px auto; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 10px; padding: 15px; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); font-family: 'Inter', Arial, sans-serif; transition: transform 0.3s ease, border-color 0.3s ease; } .jukebox-container:hover { transform: translateY(-2px); border-color: #a90e0e; } /* Επικεφαλίδα */ .juke-header { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; } .juke-icon { font-size: 34px; animation: jukePulse 2.5s infinite ease-in-out; } @keyframes jukePulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.1); opacity: 1; } } .juke-title { font-size: 20px; font-weight: 600; color: #a90e0e; text-transform: none; letter-spacing: 0.5px; margin: 0; } /* Δυναμικός Τίτλος Κομματιού */ .current-track-title { font-size: 12px; color: #2c3e50; margin-bottom: 12px; font-weight: 700; min-height: 16px; transition: color 0.3s ease; } /* Ο HTML5 Player */ .juke-player { width: 100%; height: 34px; border-radius: 25px; margin-bottom: 10px; outline: none; } .juke-player:focus-visible { outline: 2px solid #a90e0e; outline-offset: 2px; } .juke-player::-webkit-media-controls-enclosure { background-color: rgba(255, 255, 255, 0.6); } /* Λίστα Επιλογών */ .juke-playlist { display: flex; flex-direction: row; flex-wrap: wrap; /* ΑΛΛΑΓΗ: Επιτρέπει στα κουμπιά να πέσουν σε 2η γραμμή */ justify-content: space-between; gap: 6px; } /* Κουμπιά Επιλογής */ .playlist-btn { flex: 1 1 auto; min-width: 0; min-height: 36px; justify-content: center; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; padding: 4px 6px; font-size: 11.5px; font-weight: 700; color: #34495e; cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; transition: all 0.25s ease; } .btn-emoji { font-size: 14px; flex-shrink: 0; } .playlist-btn:hover { background: #a90e0e; color: #ffffff; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(169, 14, 14, 0.15); } .playlist-btn.track-active { background: #2c3e50; color: #ffffff; border-color: #2c3e50; box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); } /* Μήνυμα Καθοδήγησης */ .juke-hint { font-size: 11.5px; color: #34495e; margin-top: -2px; margin-bottom: 10px; font-weight: 500; opacity: 0.85; animation: subtleBounce 2.5s infinite ease-in-out; } @keyframes subtleBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* --- Αναδυόμενη Λίστα "Περισσότερα" --- */ .extra-tracks-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out; } .extra-tracks-wrapper.open { max-height: 350px; margin-top: 10px; } .extra-tracks-list { display: flex; flex-direction: column; gap: 6px; background: rgba(255, 255, 255, 0.4); border-radius: 12px; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.06); } .extra-track-btn { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 8px; padding: 8px 12px; font-size: 11.5px; font-weight: 600; color: #34495e; cursor: pointer; text-align: left; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; } .extra-track-btn:hover { background: #a90e0e; color: #ffffff; transform: translateX(4px); } .extra-track-btn.track-active { background: #2c3e50; color: #ffffff; border-color: #2c3e50; } /* --- ΒΕΛΤΙΣΤΟΠΟΙΗΣΗ ΓΙΑ ΚΙΝΗΤΑ (SMARTPHONES) --- */ @media (max-width: 480px) { .jukebox-container { padding: 10px 6px; /* Μικραίνουμε ελάχιστα τα εσωτερικά περιθώρια του κουτιού */ } .playlist-btn { flex: 1 1 auto; /* Επιτρέπει στα κουμπιά να συρρικνωθούν ελαστικά όσο χρειάζεται */ font-size: 11px; /* Κατεβαίνουμε μισό pixel για να κερδίσουμε πολύτιμο χώρο */ padding: 6px 3px; /* Λιγότερο περιθώριο αριστερά/δεξιά μέσα στο κουμπί */ gap: 2px; /* Μειώνουμε την απόσταση emoji και κειμένου */ min-height: 38px; } .btn-emoji { font-size: 11px; } .juke-header { display: block; text-align: center; } .juke-icon { display: inline-block; vertical-align: middle; margin-right: 4px; } } /* Κουμπί Επανάληψης (Loop) */ .loop-btn { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 4px 8px; font-size: 10px; font-weight: 600; color: #34495e; cursor: pointer; transition: all 0.3s ease; } .loop-btn:hover { background: rgba(255, 255, 255, 0.9); } /* Χρώματα όταν είναι ενεργό το Loop */ .loop-btn.active-loop-all { background: #2c3e50; color: #ffffff; border-color: #2c3e50; } .loop-btn.active-loop-one { background: #a90e0e; color: #ffffff; border-color: #a90e0e; } /* Απενεργοποίηση του κουμπιού download στον player */ .juke-player::-webkit-media-controls-enclosure { overflow: hidden; } /* Premium Glassmorphism Design */ .glass-bell-tracker { background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.7); border-radius: 28px; padding: 10px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); text-align: center; font-family: 'Inter', Arial, sans-serif; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); margin-bottom: 5px; z-index: 0; } .glass-bell-tracker:hover { transform: translateY(-5px) scale(1.02); border-color: rgba(169, 14, 14, 0.4); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } /* Εφέ Λάμψης (Shine Effect) */ .glass-bell-tracker::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); transform: skewX(-25deg); transition: 0.7s ease; pointer-events: none; z-index: 2; } .glass-bell-tracker:hover::after { left: 150%; } /* Καρτελάκι Τίτλου */ .tracker-header { display: inline-flex; align-items: center; justify-content: center; background-color: rgba(169, 14, 14, 0.08); padding: 6px 16px; border-radius: 20px; margin-bottom: 15px; } /* --- ΝΕΟ ΕΦΕ: Το μυστικό που χοροπηδάει --- */ .bouncing-secret { display: inline-block; /* Απαραίτητο για να πιάσει το transform */ animation: bounce-jump 2.5s infinite; /* Το 2.5s καθορίζει τον ρυθμό */ cursor: pointer; /* Δείχνει ότι μπορείς να το πατήσεις */ } @keyframes bounce-jump { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); /* Πόσο ψηλά θα πηδάει (αρνητικό = πάνω) */ } 60% { transform: translateY(-4px); /* Το δεύτερο, μικρότερο πηδηματάκι */ } } /* ------------------------------------------- */ /* Ρυθμίσεις Κουκκίδας */ .live-dot { width: 10px; height: 10px; background-color: #f22c2c; /* Ένα πιο φωτεινό κόκκινο */ border-radius: 50%; margin-right: 8px; /* ΠΡΟΣΘΗΚΗ ΜΟΝΙΜΗΣ ΛΑΜΨΗΣ (GLOW): */ /* Χρησιμοποιούμε drop-shadow που είναι ασφαλές για το blur του φόντου */ filter: drop-shadow(0 0 4px #f22c2c) drop-shadow(0 0 2px #ffffff); animation: pulse-theme-red 1.8s infinite ease-in-out; /* Ελαφρώς πιο γρήγορο */ } /* Όταν το σχολείο είναι κλειστό για διακοπές, η κουκκίδα γίνεται γκρι και σταματά να αναβοσβήνει */ .live-dot.paused { background-color: #7f8c8d; animation: none; filter: none; } /* Το animation πλέον αλλάζει μόνο το scale και το drop-shadow */ @keyframes pulse-theme-red { 0% { transform: scale(0.9); filter: drop-shadow(0 0 3px #f22c2c); /* Πιο μικρή λάμψη */ } 50% { transform: scale(1.25); /* Λίγο μεγαλύτερο μεγέθυνση */ filter: drop-shadow(0 0 8px #f22c2c) drop-shadow(0 0 2px #ffffff); /* Έντονη λάμψη */ } 100% { transform: scale(0.9); filter: drop-shadow(0 0 3px #f22c2c); } } .tracker-title { color: #a90e0e; font-size: 0.9em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .bell-main { font-size: 20px; font-weight: 800; color: #2c3e50; margin-bottom: 6px; line-height: 1.3; } .bell-sub { font-size: 14px; font-weight: 600; color: rgba(17, 17, 17, 0.68); } /* Μπάρα Προόδου */ .bell-progress-bg { margin-top: 18px; height: 6px; background: rgba(0, 0, 0, 0.08); border-radius: 10px; overflow: hidden; display: none; } .bell-progress-fill { height: 100%; background: linear-gradient(to right, #1e6cff, #a90e0e); width: 0%; border-radius: 10px; transition: width 1s ease-in-out; } /* --- 1. ΑΠΟΚΡΥΨΗ ΣΕ PC (ΕΞΑΦΑΝΙΖΕΙ ΚΑΙ ΤΟ ΚΟΥΤΙ ΤΟΥ WIDGET) --- */ @media screen and (min-width: 768px) { #history-wrapper-container-mobile { display: none !important; } /* Εξαφανίζει τελείως το ίδιο το widget του Blogger για να μην αφήνει κενό */ .widget:has(#history-wrapper-container-mobile) { display: none !important; background: transparent !important; box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; } } /* --- 2. CSS ΓΙΑ ΚΙΝΗΤΑ --- */ @media screen and (max-width: 767px) { .history-modern-card-mobile { display: block !important; background: var(--glass) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); border-left: 4px solid #a90e0e; border-radius: var(--r); padding: 25px; box-shadow: var(--shadow); margin-bottom: 10px; position: relative; overflow: hidden; } .history-header-mobile { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; position: relative; z-index: 1; } .history-icon-mobile { background: rgba(169, 14, 14, 0.08); padding: 8px 10px; border-radius: 8px; font-size: 16px; display: flex; align-items: center; justify-content: center; } .history-header-mobile h3 { margin: 0; color: var(--text); font-size: 24px; font-weight: 700; letter-spacing: -0.5px; } .history-content-mobile { font-size: 14px; color: var(--text); line-height: 1.5; font-weight: 500; text-align: left; position: relative; z-index: 1; } } /* 3. ΑΝΑΓΚΑΣΤΙΚΗ ΕΜΦΑΝΙΣΗ ΤΟΥ WIDGET ΣΤΟ ΚΙΝΗΤΟ */ @media screen and (max-width: 767px) { /* Χρησιμοποιούμε το ID του wrapper για να εξαναγκάσουμε το Blogger να το δείξει */ .widget:has(#history-wrapper-container-mobile), #history-wrapper-container-mobile { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; max-height: none !important; overflow: visible !important; } } /* Ευθυγράμμιση και οδηγία για το κινητό */ .history-title-group-mobile { display: flex; flex-direction: column; } .history-hint-mobile { font-size: 13px; color: #a90e0e; font-weight: 600; margin-top: 2px; opacity: 0.85; } /* Το κρυφό πλαίσιο της αποστολής (Mobile) */ .mission-container-mobile { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 0 15px; margin-top: 0; border-left: 3px solid #3b82f6; } .mission-container-mobile.open { max-height: 150px; opacity: 1; padding: 12px 15px; margin-top: 15px; } .mission-header-mobile { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .mission-icon-mobile { font-size: 16px; } .mission-header-mobile h4 { margin: 0; font-size: 13px; font-weight: 700; color: #3b82f6; text-transform: uppercase; letter-spacing: 0.5px; } #mission-text-mobile { margin: 0; font-size: 13px; color: var(--text); line-height: 1.5; font-style: italic; } /* --- 1. ΑΠΟΚΡΥΨΗ ΣΕ PC --- */ @media screen and (min-width: 768px) { #mobile-flip-wrapper { display: none !important; } /* Η απόκρυψη όλου του widget */ .widget:has(#mobile-flip-wrapper) { display: none !important; background: transparent !important; box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; } } /* --- 2. CSS ΓΙΑ ΚΙΝΗΤΑ --- */ @media screen and (max-width: 767px) { /* Εξαναγκασμός εμφάνισης σε Blogger */ div#HTML15, #HTML15 .widget-content, #mobile-flip-wrapper { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; max-height: none !important; overflow: visible !important; } #mobile-flip-wrapper { margin: 15px 0; } /* --- ΕΦΕ ΠΑΛΜΟΥ ΛΑΜΠΑΣ --- */ @keyframes pulsatingLightMob { 0% { text-shadow: 0 0 5px rgba(255, 223, 0, 0.4); transform: scale(1); } 50% { text-shadow: 0 0 20px rgba(255, 223, 0, 1), 0 0 30px rgba(255, 223, 0, 0.8); transform: scale(1.1); } 100% { text-shadow: 0 0 5px rgba(255, 223, 0, 0.4); transform: scale(1); } } #mobile-flip-wrapper .pulsating-lamp { font-size: 45px; margin-bottom: 5px; display: inline-block; animation: pulsatingLightMob 2s infinite ease-in-out; } /* --- ΒΑΣΙΚΟ CSS ΤΗΣ ΚΑΡΤΑΣ --- */ #mobile-flip-wrapper .flip-container { perspective: 1000px; width: 100%; max-width: 320px; height: 220px; /* Κλείδωμα Ύψους: Αποτρέπει το Layout Shift */ margin: auto; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; } #mobile-flip-wrapper .flip-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; border-radius: 15px; cursor: pointer; outline: none; will-change: transform; /* PRO ΠΙΝΕΛΙΑ: Αναθέτει την κίνηση στην κάρτα γραφικών του κινητού */ } #mobile-flip-wrapper .flip-inner.is-flipped { transform: rotateY(180deg); } /* GLASSMORPHISM EFFECTS */ #mobile-flip-wrapper .flip-front, #mobile-flip-wrapper .flip-back { position: absolute; width: 100%; height: 100%; border-radius: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15); overflow-y: auto; /* PRO ΠΙΝΕΛΙΑ: Ασφάλεια αν το κείμενο βγει μεγαλύτερο από τα 220px */ -webkit-backface-visibility: hidden; /* Κρίσιμο για τα κινητά! */ backface-visibility: hidden; } /* Κρύβουμε την μπάρα κύλισης για πιο καθαρό look (αν ενεργοποιηθεί το overflow) */ #mobile-flip-wrapper .flip-front::-webkit-scrollbar, #mobile-flip-wrapper .flip-back::-webkit-scrollbar { display: none; } #mobile-flip-wrapper .flip-front { background: rgba(255, 255, 255, 0.4); color: #333; border: 1px solid rgba(255, 255, 255, 0.6); } #mobile-flip-wrapper .flip-back { background: rgba(15, 157, 88, 0.78); color: #fff; transform: rotateY(180deg); border: 1px solid rgba(255, 255, 255, 0.4); } /* --- ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ --- */ #mobile-flip-wrapper .flip-inner:focus-visible { box-shadow: 0 0 0 4px rgba(15, 157, 88, 0.35), 0 8px 32px 0 rgba(0, 0, 0, 0.15); border-radius: 15px; } #mobile-flip-wrapper .flip-back > * { opacity: 0; transition: opacity 0.1s; } #mobile-flip-wrapper .is-flipped .flip-back > * { opacity: 1; transition: opacity 0.3s ease 0.40s; } @media (prefers-reduced-motion: reduce) { #mobile-flip-wrapper .flip-inner { transition: none; } #mobile-flip-wrapper .pulsating-lamp { animation: none !important; } } } /* --- ΑΠΟΛΥΤΗ ΑΠΟΚΡΥΨΗ ΣΕ PC (Κουτί & Περιεχόμενο) --- */ @media screen and (min-width: 769px) { #slider-wrapper-mobile { display: none !important; } .widget:has(#slider-wrapper-mobile) { display: none !important; background: transparent !important; box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; } } /* --- CSS ΓΙΑ ΚΙΝΗΤΑ --- */ @media screen and (max-width: 768px) { #slider-wrapper-mobile { display: block !important; margin: 0 auto 25px auto !important; width: 100%; max-width: 530px; } .slider-main-title { text-align: center; font-weight: 800; font-size: 14px; color: #a90e0e; font-family: 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; display: table; margin: 0 auto 5px auto; padding: 3px 8px; background: #f8f8f8; border: 1px solid #eeeeee; border-radius: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); } .slider-main-title::before { content: '🔥 '; font-size: 16px; margin-right: 4px; } /* ΑΛΛΑΓΗ 1: Σταθερό ύψος 300px (ίδιο με την εικόνα) και ένα απαλό γκρι φόντο */ #custom-post-slider-mobile { position: relative; width: 100%; height: 300px; margin: 0 auto; overflow: hidden; border-radius: 12px; background: #f4f4f4; } /* ΑΛΛΑΓΗ 2: Τα slides μπαίνουν το ένα πάνω στο άλλο, και κρύβονται με opacity */ #custom-post-slider-mobile .slide-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transform: scale(0.98); transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s; border-radius: 12px; overflow: hidden; } /* ΑΛΛΑΓΗ 3: Το ενεργό slide εμφανίζεται ομαλά από πάνω */ #custom-post-slider-mobile .slide-item.active { opacity: 1 !important; visibility: visible !important; z-index: 2; transform: scale(1); } #custom-post-slider-mobile a.slide-link, #custom-post-slider-mobile a.slide-link:hover { background: none !important; text-decoration: none !important; border: none !important; padding: 0 !important; display: block !important; } #custom-post-slider-mobile .slide-item img { width: 100% !important; height: 300px !important; object-fit: fill !important; display: block !important; border-radius: 12px !important; margin: 0 !important; transition: transform 0.4s ease !important; } .slide-title-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0px; box-sizing: border-box; z-index: 2; } .slide-title { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: #a90e0e !important; padding: 2px 2px !important; font-size: 15px !important; font-weight: 700 !important; font-family: 'Inter', Arial, sans-serif !important; text-align: center !important; border-radius: 10px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; word-wrap: break-word !important; line-height: 1.4 !important; max-height: 3.6em !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; margin: 0 !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; transform: translateZ(0) !important; } #custom-post-slider-mobile .slider-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(255, 255, 255, 0.7) !important; color: #333 !important; border: none !important; cursor: pointer !important; width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: 50% !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 20 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; opacity: 1 !important; visibility: visible !important; } .arrow-prev { left: 4px !important; } .arrow-next { right: 4px !important; } .hidden-arrow { display: none !important; } /* (Το @keyframes slideFadeMob διαγράφηκε τελείως) */ .video-badge { position: absolute; top: 4px; left: 4px; background: rgba(169, 14, 14, 0.85) !important; color: #ffffff !important; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-size: 13px; padding-left: 2px; box-sizing: border-box; pointer-events: none; } .slide-counter { position: absolute; top: 4px; right: 4px; background: rgba(17, 17, 17, 0.7); color: #ffffff; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; font-family: 'Inter', Arial, sans-serif; z-index: 10; pointer-events: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 2px 6px rgba(0,0,0,0.3); } } /* --- 1. ΚΡΥΒΟΥΜΕ ΤΟ WIDGET ΚΑΙ ΤΟ ΚΕΝΟ ΤΟΥ ΠΑΝΤΟΥ ΑΡΧΙΚΑ --- */ #mobile-quiz-wrapper { display: none !important; } .widget:has(#mobile-quiz-wrapper) { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; } /* --- 2. ΕΜΦΑΝΙΣΗ ΜΟΝΟ ΣΤΑ ΚΙΝΗΤΑ (Οθόνες < 767px) ΚΑΙ ΜΟΝΟ ΑΝ ΕΙΝΑΙ ΑΡΧΙΚΗ --- */ @media screen and (max-width: 767px) { #mobile-quiz-wrapper.show-on-home { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; } .widget:has(#mobile-quiz-wrapper.show-on-home) { display: block !important; } } /* --- 3. ΤΟ ΣΤΥΛ ΤΟΥ QUIZ (Glassmorphism) --- */ .glass-quiz-widget { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 24px; padding: 15px; text-align: center; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); margin-bottom: 25px; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease; box-sizing: border-box; } .glass-quiz-widget:hover { transform: translateY(-6px); border-color: #a90e0e; box-shadow: 0 18px 45px rgba(169, 14, 14, 0.15); } .q-header { margin-bottom: 15px; position: relative; } .emoji-glow { position: relative; display: inline-block; min-width: 120px; height: 65px; margin-bottom: 4px; } .emoji-glow::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110px; height: 60px; background: radial-gradient(circle, rgba(169,14,14,0.35) 0%, rgba(255,255,255,0) 75%); border-radius: 50%; z-index: 0; } .q-memoji { font-size: 52px; display: inline-block; position: relative; z-index: 1; letter-spacing: -2px; filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.25)); animation: floatMemoji 3s ease-in-out infinite; } @keyframes floatMemoji { 0% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-5px) scale(1.03) rotate(2deg); } 100% { transform: translateY(0px) scale(1); } } .q-title { font-family: 'Inter', Arial, sans-serif; font-size: 17px !important; font-weight: 900; margin: 0; text-transform: uppercase; letter-spacing: 0.8px; background: linear-gradient(90deg, #a90e0e, #2c3e50); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .q-body p { font-family: Arial, sans-serif; font-size: 14px; color: #222; font-weight: 600; line-height: 1.5; margin-bottom: 18px; padding: 12px 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.6); border-left: 5px solid #a90e0e; text-align: justify; box-shadow: 0 4px 15px rgba(0,0,0,0.04); } .form-container { border-radius: 14px; overflow: hidden; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: inset 0 2px 8px rgba(0,0,0,0.04); position: relative; height: 375px; transition: box-shadow 0.3s ease; } .form-container:hover { box-shadow: inset 0 2px 12px rgba(169, 14, 14, 0.08); } .form-container iframe { display: block; position: absolute; top: -405px; left: 0; width: 100%; height: 820px; } #quiz-trigger-mobile button:hover { transform: scale(1.05); background: #8c0a0a !important; transition: 0.3s; } /* Πρόσθεσε αυτό στο CSS σου (αν δεν έχεις ήδη το transition) */ #google-form-iframe-mobile { top: -300px; /* Αρχική κρυφή θέση */ transition: top 0.4s ease-in-out; /* Ομαλή κίνηση */ } /* Η κλάση που βάζει πλέον η JavaScript */ #google-form-iframe-mobile.is-submitted { top: 0px; } /* ========================================================= ΡΥΘΜΙΣΕΙΣ DESKTOP (ΜΟΝΟ ΓΙΑ PC) ========================================================= */ :root { --fb-size: 40px; /* μέγεθος εικονιδίου */ --fb-offset-x: -130px; /* δεξιά/αριστερά από το σημείο */ --fb-offset-y: 1px; /* πάνω/κάτω από το σημείο */ --fb-z: 30; /* να είναι από πάνω */ } /* ΜΗΔΕΝΙΖΟΥΜΕ ΤΟΝ ΧΩΡΟ ΤΟΥ GADGET (να μην αφήνει κενό) */ .widget:has(#fb-mount), .section:has(#fb-mount), .HTML:has(#fb-mount), .widget-content:has(#fb-mount) { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; overflow: visible !important; } /* “άγκυρα” στο σημείο του gadget */ #fb-mount { position: relative !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; overflow: visible !important; line-height: 0 !important; font-size: 0 !important; } /* DESKTOP: το εικονίδιο στο σημείο του gadget */ #fb-outer { position: absolute !important; top: var(--fb-offset-y) !important; left: var(--fb-offset-x) !important; z-index: var(--fb-z) !important; width: var(--fb-size) !important; height: var(--fb-size) !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; line-height: 0 !important; } #fb-outer a { display: block !important; width: 100% !important; height: 100% !important; text-decoration: none !important; } #fb-outer svg { display: block !important; width: 100% !important; height: 100% !important; } /* ΚΡΥΒΟΥΜΕ ΤΟΝ ΜΙΚΡΟ ΚΩΔΙΚΑ ΣΤΑ ΚΙΝΗΤΑ (για να μη διπλασιάζει) */ @media (max-width: 1368px) { #fb-outer { display: none !important; } } .combined-widget { background-color: #F0F6FA; border-radius: 24px; padding: 15px; text-align: center; font-family: 'Inter', sans-serif; border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); max-width: 400px; margin: 0 auto; transition: transform 0.3s ease; } .combined-widget:hover { transform: translateY(-3px); } .eortologio-title { font-size: 1.15em; font-weight: 800; color: #2c3e50; margin: 0 0 4px 0; text-transform: uppercase; letter-spacing: 0.5px; } .eortologio-date { font-size: 0.9em; color: #666; margin-bottom: 15px; font-weight: 600; text-transform: capitalize; } .info-box { display: none; font-size: 0.85em; font-weight: 700; padding: 8px; border-radius: 10px; border: 1px dashed; margin-bottom: 10px; } .world-day { color: #004085; background: #cce5ff; border-color: #b8daff; } .holiday { color: #155724; background: #d4edda; border-color: #c3e6cb; animation: pulseHoliday 2s infinite; } .school { color: #856404; background: #fff3cd; border-color: #ffeeba; } .names { display: block; color: #a90e0e; background: rgba(255, 255, 255, 0.25); /* Πολύ διάφανο λευκό για να φαίνεται το γκρι από πίσω */ border: 1px solid rgba(255, 255, 255, 0.4); /* Απαλό περίγραμμα γυαλιού */ padding: 12px; border-radius: 14px; /* Στρογγυλεμένο για να ταιριάζει με το στυλ του widget */ backdrop-filter: blur(5px); /* Προαιρετικό: θολώνει ελαφρώς το υπόβαθρο για πιο premium εφέ */ } @keyframes pulseHoliday { 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } } .weather-section { padding-top: 15px; margin-top: 10px; border-top: 1px solid rgba(0,0,0,0.05); } .hub-weather-tag { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 255, 255, 0.6); color: #a90e0e; font-size: 11px; font-weight: 900; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 15px; } .compact-weather-row { display: flex; justify-content: space-between; gap: 8px; } .c-day-card { flex: 1; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 14px; padding: 10px 4px; text-align: center; } /* ΕΔΩ ΤΟΠΟΘΕΤΕΙΣ ΤΟΝ ΚΑΙΝΟΥΡΓΙΟ ΚΑΝΟΝΑ: */ .c-day-card.today { border: 1px solid #a90e0e; background: rgba(169, 14, 14, 0.05); } .c-day-card.today .c-day-name { color: #a90e0e; } .c-day-name { font-size: 11px; font-weight: 900; color: #2c3e50; text-transform: uppercase; margin-bottom: 4px; display: block; } .c-day-icon { font-size: 26px; margin-bottom: 4px; display: block; } .c-day-temps { font-size: 13px; font-weight: 900; color: #000; } .c-max { color: #a90e0e; } /* ΕΞΑΥΛΩΣΗ ΜΟΝΟ ΣΤΟ ΚΙΝΗΤΟ ΓΙΑ ΤΟ HTML 7 */ @media screen and (max-width: 768px) { #HTML7, #HTML7 .widget-content, #HTML7 .widget { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; overflow: hidden !important; } } /* ΣΤΟ PC ΕΠΑΝΑΦΟΡΑ ΓΙΑ ΤΟ HTML 7 */ @media screen and (min-width: 769px) { #HTML7 { display: block !important; visibility: visible !important; } } /* 3D Περιστροφή Κάρτας - Διόρθωση Τρέμουλου */ .c-day-card { flex: 1; background: transparent; perspective: 1000px; height: 105px; position: relative; } .c-day-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; } /* Το Hover πιάνει όλο το κουτί σταθερά */ .c-day-card:hover .c-day-inner { transform: rotateX(180deg); /* Αλλαγή σε rotateX για οριζόντιες κάρτες */ } .c-day-front, .c-day-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 14px; padding: 6px 2px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; pointer-events: none; /* Αποτρέπει το τρέμουλο όταν το ποντίκι αγγίζει το κείμενο */ } /* Μπροστινή Όψη */ .c-day-front { background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); } .c-day-card.today .c-day-front { border: 1px solid #a90e0e; background: rgba(169, 14, 14, 0.05); } /* Πίσω Όψη */ .c-day-back { background: #E6F0FA; border: 1px solid #a90e0e; transform: rotateX(180deg); /* Ευθυγράμμιση με το rotateX */ color: #2c3e50; } .c-day-card.today .c-day-back { background: #FFF3F3; } /* Στυλ Κειμένων */ .sch-time { font-size: 10px; font-weight: 800; display: block; margin: 1px 0; color: #2c3e50; white-space: nowrap; } .sch-msg { font-size: 11px; font-weight: 900; color: #a90e0e; text-transform: uppercase; display: block; margin-top: 2px; } /* 1. Το εξωτερικό κουτί για το Σήμερα παίρνει το κόκκινο περίγραμμα */ .c-day-card.today { border: 2px solid #a90e0e; /* Πιο καθαρό, σταθερό περίγραμμα */ border-radius: 14px; background: rgba(169, 14, 14, 0.03); /* Πολύ απαλό κόκκινο φόντο */ } /* 2. Αφαιρούμε το εσωτερικό κόκκινο περίγραμμα από την μπροστινή όψη */ .c-day-card.today .c-day-front { border: none !important; background: transparent !important; } /* 3. Αφαιρούμε το εσωτερικό κόκκινο περίγραμμα και από την πίσω όψη */ .c-day-card.today .c-day-back { border: none !important; background: transparent !important; } /* Σιγουρεύουμε ότι όλες οι μπροστινές όψεις έχουν καθαρό φόντο χωρίς διπλά περιγράμματα */ .c-day-front { background: transparent; border: none; } .rain-list { display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; margin-top: 4px; } .rain-badge { background: rgba(169, 14, 14, 0.1); color: #a90e0e; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(169, 14, 14, 0.2); display: inline-block; } .snow-list { display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; margin-top: 4px; } .snow-badge { background: rgba(30, 108, 255, 0.1); color: #1e6cff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(30, 108, 255, 0.2); display: inline-block; } .sch-msg { font-size: 11px; font-weight: 900; color: #a90e0e; text-transform: uppercase; display: block; margin-top: 2px; hyphens: auto; -webkit-hyphens: auto; word-wrap: break-word; overflow-wrap: break-word; } /* --- ΑΠΟΛΥΤΗ ΕΠΑΝΑΦΟΡΑ ΗΜΕΡΟΛΟΓΙΟΥ --- */ .eortologio-icon { width: 55px !important; height: 60px !important; margin: 0 auto 12px auto !important; background-color: rgba(255, 255, 255, 0.7) !important; background-image: none !important; /* ΑΥΤΟ ΣΚΟΤΩΝΕΙ ΤΟ ΜΠΛΕ SVG */ backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 12px !important; display: flex !important; flex-direction: column !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; overflow: hidden !important; padding: 0 !important; } .eort-icon-header { background-color: #a90e0e !important; background-image: none !important; height: 18px !important; width: 100% !important; min-height: 18px !important; margin: 0 !important; padding: 0 !important; } .eort-icon-body { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #2c3e50 !important; font-weight: 900 !important; font-size: 26px !important; line-height: 1 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } /* Ειδικός κανόνας ΜΟΝΟ για τον Mozilla Firefox - Διόρθωση κάρτας καιρού */ @-moz-document url-prefix() { .c-day-card:hover .c-day-inner .c-day-front { opacity: 0; /* Εξαφανίζεται ακαριαία στα 0.3s (ακριβώς στη μέση της περιστροφής) */ transition: opacity 0s 0.3s; } .c-day-inner .c-day-front { /* Επανεμφανίζεται ακριβώς στη μέση όταν η κάρτα επιστρέφει */ transition: opacity 0s 0.3s; } } @media screen and (min-width: 769px) { /* Προσαρμοσμένο στυλ Newsletter με Glassmorphism και αρχικά μεγέθη */ .custom-newsletter-box { background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 20px; padding: 25px 15px; text-align: center; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); margin: 20px auto; max-width: 420px; font-family: 'Inter', Arial, sans-serif; } .custom-newsletter-icon { font-size: 36px; margin-bottom: 8px; line-height: 1; } .custom-newsletter-title { color: #a90e0e; font-size: 18px; font-weight: 800; margin-bottom: 5px; line-height: 1.3; } .custom-newsletter-subtitle { color: #333333; font-size: 12px; margin-bottom: 18px; } .custom-newsletter-input { width: 100%; padding: 12px 10px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 15px; font-family: inherit; font-size: 15px; text-align: left; box-sizing: border-box; outline: none; background: rgba(255, 255, 255, 0.8); transition: all 0.3s ease; } .custom-newsletter-input:focus { border-color: #a90e0e; box-shadow: 0 4px 12px rgba(169, 14, 14, 0.15); background: #ffffff; } .custom-newsletter-notice { font-size: 12px; color: #2c3e50; background: rgba(255, 255, 255, 0.5); /* Ελαφρώς λευκό για να ξεχωρίζει πάνω στο γυαλί */ border-left: 3px solid #a90e0e; border-radius: 6px; padding: 10px 12px; margin-bottom: 15px; text-align: left; line-height: 1.4; } .custom-newsletter-notice strong { color: #a90e0e; font-weight: 700; } .custom-newsletter-btn { background-color: #a90e0e; color: #ffffff; border: none; border-radius: 12px; padding: 12px 25px; width: 100%; font-size: 15px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; font-family: inherit; display: flex; justify-content: center; align-items: center; gap: 8px; } .custom-newsletter-btn:hover { background-color: #8c0a0a; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(169, 14, 14, 0.25); } } #calendar-container { touch-action: pan-y; user-select: none; -webkit-user-drag: none; padding-left: 0px; /* 👈 Κενό από αριστερά (άλλαξε τα 15px όπως θες) */ padding-right: 0px; /* 👈 Κενό από δεξιά */ } #calendar-widget-wrapper { width: 330px; height: 510px; overflow: hidden; transform: scale(0.84); transform-origin: top left; margin: 0 auto; margin-bottom: -100px !important; padding: 0 0px; } @media (max-width: 768px) { #calendar-widget-wrapper { width: 100% !important; height: 530px; max-width: 550px; max-height: 530px !important; transform: scale(0.88); transform-origin: top center; margin: 0 auto !important; margin-bottom: -60px !important; padding: 0 0px; } #calendar-container { width: 369px !important; margin-left: 55%; transform: translateX(-50%); padding-left: 0px; /* 👈 Κενό από αριστερά (άλλαξε τα 15px όπως θες) */ padding-right: 0px; /* 👈 Κενό από δεξιά */ } #calendar { width: 100% !important; } } @media (max-width: 392px) { #calendar-widget-wrapper { width: 100% !important; max-width: 550px; max-height: 510px !important; transform: scale(0.88); transform-origin: top center; margin: 0 auto !important; margin-bottom: -60px !important; } #calendar-container { width: 330px !important; margin-left: 56%; transform: translateX(-50%); } #calendar { width: 100% !important; } } .mobile-only-title { display: none; } @media (max-width: 768px) { .mobile-only-title { display: block !important; text-align: center; font-weight: bold; font-size: 18px; margin-bottom: 0px; color: #333; width: 100%; } #calendar-widget-wrapper { margin-top: 0px !important; } } @media screen and (min-width: 784px) and (max-width: 1399px) and (orientation: landscape) { #calendar-widget-wrapper { transform: scale(0.93) !important; margin-bottom: 0px !important; width: 330px !important; } #calendar .fc-col-header-cell-cushion { font-size: 9px !important; } } @media screen and (min-width: 1400px) and (max-width: 1599px) and (orientation: landscape) { #calendar-widget-wrapper { transform: scale(0.93) !important; margin-bottom: 0px !important; } #calendar .fc-col-header-cell-cushion { font-size: 10px !important; } } @media screen and (min-width: 1600px) and (max-width: 1920px) and (orientation: landscape) { #calendar-widget-wrapper { transform: scale(0.93) !important; margin-bottom: -20px !important; } #calendar .fc-col-header-cell-cushion { font-size: 10px !important; } } @media screen and (min-width: 784px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) { #calendar-widget-wrapper { margin: 20px auto !important; display: block !important; } } #calendar .fc-scrollgrid { border-radius: 8px; overflow: hidden; } #calendar .fc-theme-standard td, #calendar .fc-theme-standard th { border-color: #eaeaea; } #calendar .fc-day-today { background-color: #f0f8ff !important; font-weight: bold; } #prevBtn, #nextBtn { transition: color 0.2s ease, transform 0.2s ease; color: #555; } #prevBtn:hover, #nextBtn:hover { color: #000; transform: scale(1.2); } #monthLabel { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; color: #333; letter-spacing: 0.5px; } #calendar .fc-col-header-cell { border: none !important; padding-bottom: 5px; } #calendar .fc-col-header-cell-cushion { text-transform: uppercase; font-size: 11px !important; color: #888; font-weight: 600; } /* --- ΝΕΑ CSS ΓΙΑ ΔΙΑΔΡΑΣΤΙΚΟΤΗΤΑ --- */ /* Αφαιρούμε το pointer events από την τελεία για να πιάνει το κλικ όλο το κελί */ #calendar .fc-event { pointer-events: none; transition: transform 0.2s ease, background 0.2s ease; } /* Το κελί γίνεται κουμπί */ .fc-daygrid-day-frame.has-posts { cursor: pointer !important; } /* --- ΣΚΟΤΕΙΝΗ ΟΘΟΝΗ ΚΑΙ TOOLTIP --- */ #calendar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9998; opacity: 0; transition: opacity 0.3s ease; } #calendar-tooltip { display: none; position: absolute; background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 9999; min-width: 220px; max-width: 300px; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: auto; } .tooltip-title-link { display: block; padding: 12px 15px; margin-bottom: 8px; background: #f4f7f6; border-radius: 8px; text-decoration: none; color: #333; font-weight: bold; font-size: 14px; text-align: center; border: 1px solid #e0e0e0; transition: all 0.2s; } .tooltip-title-link:last-child { margin-bottom: 0; } .tooltip-title-link:hover { background: #4A90E2; color: #ffffff; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3); } /* --- ΣΤΥΛ ΓΙΑ ΤΗ ΓΡΑΜΜΗ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ --- */ .post-dot { position: absolute; bottom: 12px; /* 👈 Σηκώθηκε πιο πάνω για να έχει «αέρα» από το κάτω περιθώριο */ left: 20%; /* 👈 Έξυπνο κεντράρισμα χωρίς transform */ right: 20%; /* 👈 Μαζί με το left, ορίζει αυτόματα το πλάτος στο 60% */ height: 3px; /* 👈 Πιο λεπτή και κομψή γραμμή */ background: #e74c3c; /* Το κόκκινο χρώμα σου */ border-radius: 4px; transition: all 0.3s ease; } /* --- ΕΦΕ ΛΑΜΨΗΣ (GLOW) ΣΤΟ HOVER --- */ .fc-daygrid-day-frame.has-posts:hover .post-dot { background: #4A90E2; box-shadow: 0 0 10px 3px rgba(74, 144, 226, 0.6); transform: scale(1.15); /* 👈 Μεγαλώνει ομαλά από το κέντρο της χωρίς να «πηδάει» αριστερά */ } /* Προαιρετικό: Ελαφρύς φωτισμός σε όλο το background του κελιού στο hover */ .fc-daygrid-day-frame.has-posts:hover { background-color: rgba(74, 144, 226, 0.04); border-radius: 4px; } #calendar-tooltip { display: none; position: absolute; /* Ημιδιάφανο λευκό για το εφέ γυαλιού */ background: rgba(255, 255, 255, 0.7); /* Θολώνει το background πίσω από το συννεφάκι */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; padding: 18px; /* Απαλή σκιά και ένα πολύ λεπτό λευκό περίγραμμα */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.6); z-index: 9999; min-width: 220px; max-width: 300px; opacity: 0; transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); pointer-events: auto; } .tooltip-title-link { display: block; padding: 12px 15px; margin-bottom: 10px; /* Ελαφρώς πιο σκούρο λευκό για αντίθεση */ background: rgba(255, 255, 255, 0.8); border-radius: 10px; text-decoration: none; color: #2c3e50; font-weight: 600; font-size: 14px; text-align: center; transition: all 0.3s ease; } .tooltip-title-link:last-child { margin-bottom: 0; } .tooltip-title-link:hover { background: #4A90E2; color: #ffffff; transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 15px rgba(74, 144, 226, 0.4); } /* 1. Μηδενίζουμε το παλιό inline margin-left του αριστερού βέλους */ #prevBtn { margin-left: 0 !important; } /* 2. Μετακινούμε όλο το μπλοκ (Βέλη + Μήνας) όσο δεξιά θέλουμε στο PC */ #calendar-container > div:first-child { position: relative !important; left: -40px !important; /* 👈 ΑΥΤΟ ΑΛΛΑΖΕΙΣ! Βάλε 10px, 15px, 30px κλπ. για να πάει ακριβώς εκεί που θες */ } /* 3. Στα κινητά το επαναφέρουμε στο κέντρο για να μην βγαίνει εκτός οθόνης */ @media (max-width: 768px) { #calendar-container > div:first-child { left: -20px !important; } } .holiday-widget { background-color: #F0F6FA; border-radius: 24px; padding: 20px; text-align: center; font-family: 'Inter', sans-serif; border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); max-width: 400px; margin: 10px auto; transition: transform 0.3s ease; } .holiday-widget:hover { transform: translateY(-3px); } .holiday-icon { font-size: 2.2em; margin-bottom: 10px; display: block; animation: bounce 2s infinite; } .holiday-text { font-size: 1.1em; font-weight: 800; color: #2c3e50; margin: 0; line-height: 1.4; } .holiday-days { color: #a90e0e; font-size: 1.2em; display: block; margin-bottom: 4px; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } } /* ΕΞΑΥΛΩΣΗ ΜΟΝΟ ΣΤΟ ΚΙΝΗΤΟ ΓΙΑ ΤΟ HTML 18 */ @media screen and (max-width: 768px) { #HTML18, #HTML18 .widget-content, #HTML18 .widget { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } } /* ΣΤΟ PC (ΠΑΝΩ ΑΠΟ 769px) ΕΠΑΝΑΦΟΡΑ ΣΤΗ SIDEBAR ΓΙΑ ΤΟ HTML 18 */ @media screen and (min-width: 769px) { #HTML18 { display: block !important; visibility: visible !important; } } /* --- ΣΤΥΛ ΓΙΑ ΤΗ ΜΠΑΤΑΡΙΑ ΚΑΙ ΤΑ ΜΗΝΥΜΑΤΑ --- */ .battery-wrapper { margin-top: 15px; display: flex; flex-direction: column; align-items: center; cursor: pointer; } /* Νέα, πιο γεμάτη 3D μπαταρία */ .battery-box { width: 180px; height: 28px; background-color: #eef5fa; /* Απαλό φόντο όταν αδειάζει */ border: 3px solid #2c3e50; border-radius: 8px; position: relative; padding: 3px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05); } /* Ο πόλος της μπαταρίας (πιο σωστά κεντραρισμένος) */ .battery-box::after { content: ''; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); width: 6px; height: 12px; background: #2c3e50; border-radius: 0 4px 4px 0; } /* Η γέμιση με γυαλάδα και σκιές */ .battery-fill { height: 100%; border-radius: 4px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease; position: relative; overflow: hidden; } /* 3D Γυαλάδα πάνω στη γέμιση */ .battery-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 50%; background: rgba(255, 255, 255, 0.25); } .battery-text { font-size: 0.8em; font-weight: 800; margin-top: 8px; color: #34495e; text-transform: uppercase; letter-spacing: 0.5px; } .holiday-content { transition: opacity 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .click-hint { font-size: 14px; color: #888; font-style: italic; margin-top: 10px; } /* Εφέ για χαμηλή μπαταρία με πιο έντονο κόκκινο */ .battery-low-alert { animation: batteryBlink 1s infinite alternate; } @keyframes batteryBlink { 0% { background: linear-gradient(90deg, #ff0844 0%, #ffb199 100%); box-shadow: 0 0 5px rgba(255, 8, 68, 0.5); } 100% { background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%); box-shadow: 0 0 15px rgba(231, 76, 60, 0.8); } } /* Το κρυφό μήνυμα που εμφανίζεται στο κλικ */ .secret-message { display: none; font-size: 1.15em; /* Ιδανικό μέγεθος για να διαβάζεται άνετα */ font-weight: 600; /* Πιο ζωντανό και έντονο χωρίς να κουράζει */ color: #1a252f; /* Πολύ σκούρο μπλε για τέλεια αντίθεση */ line-height: 1.6; /* Άνετο κενό ανάμεσα στις γραμμές */ padding: 20px 15px; background: linear-gradient(135deg, #ffffff 0%, #eef5fa 100%); /* Απαλό ντεγκραντέ (λευκό προς γαλάζιο) */ border: 2px dashed #b2d0e6; /* Παιχνιδιάρικο διακεκομμένο περίγραμμα */ border-radius: 20px; /* Αρκετά στρογγυλεμένο για μοντέρνο look */ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Απαλή αλλά πιο βαθιά σκιά για 3D αίσθηση */ font-family: 'Inter', sans-serif; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Εφέ αναπήδησης (bounce) */ margin-top: 15px; } /* Νέο, πιο παιχνιδιάρικο εφέ εμφάνισης (αντικαθιστά το fadeIn) */ @keyframes popIn { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } /* Εικονίδιο Φόρτισης Μπαταρίας ⚡ */ .charging-icon { color: #f39c12; display: inline-block; margin-left: 4px; animation: chargePulse 0.8s infinite alternate; } @keyframes chargePulse { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.3); opacity: 1; text-shadow: 0 0 6px rgba(241, 196, 15, 0.8); } } /* ========================= ΡΥΘΜΙΣΕΙΣ (CSS Variables) ========================= */ :root { --arrowWeight: 3px; /* Πάχος γραμμής κύκλου & βέλους */ --btnSize: 60px; /* Συνολικό μέγεθος κουμπιού */ --arrowIconSize: 66px; /* Μέγεθος του εσωτερικού βέλους */ --blogMaxWidth: 1070px; /* Μέγιστο πλάτος blog */ --gapFromBlog: 35px; /* Απόσταση από την άκρη του blog */ --btnTop: 80%; /* Κάθετη θέση (50% = κέντρο) */ --mainColor: #a90e0e; /* Χρώμα (Κόκκινο) */ } /* ========================= Κουμπί (floating container) ========================= */ .toTopBtn { position: fixed !important; top: var(--btnTop) !important; /* Δυναμικός υπολογισμός θέσης δεξιά */ right: calc(max(0px, 49vw - (var(--blogMaxWidth) / 2) - var(--gapFromBlog))) !important; transform: translateY(-50%) !important; width: var(--btnSize) !important; height: var(--btnSize) !important; border-radius: 50% !important; /* Τέλειος κύκλος */ /* Glassmorphism Εφέ */ border: 1px solid rgba(255,255,255,.3) !important; background: rgba(255,255,255,.1) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: 0 8px 32px rgba(0,0,0,.15) !important; color: var(--mainColor) !important; cursor: pointer !important; /* Flexbox για τέλειο κεντράρισμα των SVG */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Αρχικά κρυμμένο */ opacity: 0 !important; visibility: hidden !important; /* Ομαλές μεταβάσεις */ transition: opacity .3s ease, visibility .3s ease, border-color .3s ease, background-color .3s ease !important; z-index: 9999 !important; padding: 0 !important; outline: none !important; overflow: hidden !important; /* Κρατάει τα πάντα μέσα */ } /* Εμφάνιση κουμπιού */ .toTopBtn.show { opacity: 1 !important; visibility: visible !important; } /* Hover Εφέ στο κουμπί */ .toTopBtn:hover { border-color: var(--mainColor) !important; background-color: rgba(255,255,255,.2) !important; } /* ========================= SVG Δομή & Progress ========================= */ /* Κοινές ρυθμίσεις για όλα τα SVG μέσα στο κουμπί */ .toTopBtn svg { position: absolute !important; /* Στοιβάζονται το ένα πάνω στο άλλο */ fill: none !important; } /* 1. Το SVG του Κύκλου Προόδου */ .progress-svg { width: 100% !important; height: 100% !important; /* Περιστροφή για να ξεκινά η πρόοδος από πάνω */ transform: rotate(-90deg) !important; z-index: 1; } /* Ο αχνός κύκλος-φόντο */ .bg-circle { stroke: var(--mainColor) !important; opacity: 0.1 !important; stroke-width: var(--arrowWeight) !important; } /* Ο κύκλος που γεμίζει */ .progress-circle { stroke: var(--mainColor) !important; stroke-width: var(--arrowWeight) !important; stroke-linecap: round !important; /* Ομαλή κίνηση γεμίσματος */ transition: stroke-dashoffset 0.1s linear !important; } /* 2. Το SVG του Βέλους */ .arrow-icon { width: var(--arrowIconSize) !important; height: var(--arrowIconSize) !important; stroke: var(--mainColor) !important; stroke-width: var(--arrowWeight) !important; stroke-linecap: round !important; stroke-linejoin: round !important; /* Σημαντικό: Κεντράρισμα του absolute στοιχείου */ top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; transition: transform 0.2s ease, stroke 0.2s ease !important; z-index: 2; /* Πάνω από τον κύκλο */ } /* Εφέ στο βέλος όταν κάνουμε hover στο κουμπί */ .toTopBtn:hover .arrow-icon { /* Μετακινείται ελαφρώς προς τα πάνω, παραμένοντας κεντραρισμένο οριζόντια */ transform: translate(-50%, -62%) !important; } /* ========================= Mobile Ρυθμίσεις ========================= */ @media (max-width: 768px) { :root { --btnSize: 50px; --arrowIconSize: 24px; } .toTopBtn { top: auto !important; bottom: 20px !important; right: 20px !important; transform: none !important; /* Καταργούμε το translateY centering */ } } /* ΚΑΡΤΑ VIDEO - CLEAN VERSION (NO LINES) */ .video-glass-card { width: 100%; max-width: 350px; /* Αντικατάσταση blur με solid glass effect για αποφυγή γραμμών */ background: rgba(245, 245, 245, 0.9); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 15px; padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); text-align: center; box-sizing: border-box; margin: 10px auto 20px auto; position: relative; /* FORCE FLAT RENDERING - Σταματάει τον διαχωρισμό σε pixels */ -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; overflow: hidden; } .video-glass-card:hover { transform: translateY(-5px); } .video-glass-title { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; color: #a90e0e; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; } .video-wrapper { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #000; /* Δημιουργεί ένα "τείχος" ανάμεσα στο βίντεο και το background */ z-index: 1; } .video-zoom-fix { width: 100%; position: relative; padding-bottom: 80.25%; height: 0; } .video-zoom-fix iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .video-sub-action { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%) translateY(10px); background: #c80000; color: #ffffff !important; border-radius: 8px; font-size: 11px; font-weight: bold; text-decoration: none; padding: 8px 14px; z-index: 10; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .video-glass-card:hover .video-sub-action { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ΑΥΤΟΜΑΤΗ ΔΙΑΧΩΡΙΣΤΙΚΗ ΓΡΑΜΜΗ - ΜΟΝΟ ΓΙΑ ΚΙΝΗΤΑ */ .widget-separator { display: none; /* Κρυφή από προεπιλογή (σε PC/Tablet) */ } @media screen and (max-width: 768px) { .widget-separator { display: block; /* Εμφανίζεται μόνο σε οθόνες έως 768px */ width: 107%; /* Ρυθμίζεις το μήκος */ height: 7px; /* Πάχος γραμμής */ background-color: #eaeaea; border: none; margin: 20px 0; box-sizing: border-box; /* ΣΤΟΙΧΙΣΗ ΑΚΡΙΒΩΣ ΑΡΙΣΤΕΡΑ (ΤΩΡΑ ΜΕΣΑ ΣΤΗΝ ΑΓΚΥΛΗ) */ position: relative; left: -10px; /* Μην ξεχνάς το px! Αν θες κι άλλο αριστερά, κάντο -10px, -15px κλπ */ } } /* ΒΙΒΛΙΟΘΗΚΗ - CLEAR SEPARATION */ .library-container { width: 100%; margin-top: 15px; border: none; /* Μεταφέρουμε το rendering σε δικό του layer για να μην "χτυπάει" με την κάρτα */ transform: translate3d(0,0,0); } .library-container iframe { width: 100%; height: 260px; border: none; } /* ========================================= */ /* ΕΞΑΥΛΩΣΗ ΜΟΝΟ ΣΤΟ ΚΙΝΗΤΟ ΓΙΑ ΤΟ HTML 6 */ /* ========================================= */ @media screen and (max-width: 768px) { #HTML6, #HTML6 .widget-content, #HTML6 .widget { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } } /* ΣΤΟ PC (ΠΑΝΩ ΑΠΟ 769px) ΕΠΑΝΑΦΟΡΑ ΣΤΗ SIDEBAR ΓΙΑ ΤΟ HTML 6 */ @media screen and (min-width: 769px) { #HTML6 { display: block !important; visibility: visible !important; } } /* ΕΞΩΤΕΡΙΚΟ ΚΟΥΜΠΙ FULLSCREEN ΒΙΒΛΙΟΘΗΚΗΣ */ .lib-fullscreen-btn { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px; padding: 8px; background: #333; color: #fff; border: none; border-radius: 8px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .lib-fullscreen-btn:hover { background: #a90e0e; } /* Ρύθμιση τίτλου video-glass ΜΟΝΟ για κινητά */ @media screen and (max-width: 768px) { html body .video-glass-title { font-size: 19px !important; } } @media (hover: none) { .video-sub-action { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; } } /* 2. Κλάση που θα προσθέτει η Javascript για να εξαφανίσει το κουμπί */ .video-sub-action.is-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; /* Απενεργοποιεί τα κλικ όταν είναι κρυφό */ } #stc-widget { position: relative; max-width: 100%; /* Αντί για 420px, βάλε 100% για να προσαρμόζεται μόνο του */ margin: 15px 0; font-family: 'Poppins', sans-serif; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 10px 0px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); overflow: hidden; text-align: center; } /* Header */ .stc-header { color: #4a4a4a; font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(255,255,255,0.6); position: relative; z-index: 2; } /* Polaroid Container (3D Perspective) */ .stc-perspective { perspective: 1000px; position: relative; z-index: 2; } /* The Polaroid Card */ .stc-polaroid { background: #fdfcf6; /* Κιτρινισμένο χαρτί */ padding: 12px 12px 45px 12px; border-radius: 2px; box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.15), inset 0 0 20px rgba(184, 134, 11, 0.05); transform: rotate(-3deg) translateZ(0); transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.9s ease-in-out, background 0.9s ease; position: relative; cursor: pointer; /* ΑΥΤΕΣ ΟΙ 3 ΓΡΑΜΜΕΣ ΔΙΟΡΘΩΝΟΥΝ ΤΟ PC */ max-width: 340px; /* Δεν θα επιτρέπει στην κάρτα να ξεχειλώσει στο PC */ margin: 0 auto; /* Κεντράρει την κάρτα στην οθόνη */ width: calc(100% - 30px); /* Κρατάει σωστά περιθώρια στα δεξιά/αριστερά */ opacity: 0; /* Αρχικά κρυφό μέχρι να φορτώσει το API */ animation: fadeInWidget 1s forwards 0.5s; } @keyframes fadeInWidget { to { opacity: 1; } } /* Tape Effect */ .stc-tape { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(2deg); width: 90px; height: 30px; background: rgba(255, 255, 230, 0.6); box-shadow: 0 1px 3px rgba(0,0,0,0.2); opacity: 0.8; z-index: 5; transition: opacity 0.9s ease; } /* Photo Wrapper */ /* Photo Wrapper */ .stc-photo-wrapper { position: relative; width: 100%; height: 316px; /* Από 240px, το κάνουμε 316px για να γίνει τετράγωνη η φωτογραφία */ overflow: hidden; background: #222; } /* Faded Image */ .stc-img { width: 100%; height: 100%; min-height: 100%; /* Αναγκάζει την εικόνα να καλύψει όλο το ύψος */ display: block; object-fit: cover; /* Κόβει ομοιόμορφα τα πλάγια αντί να αφήνει μαύρα κενά */ filter: sepia(0.6) grayscale(0.3) contrast(0.8) brightness(0.9); transition: filter 0.9s ease-in-out, transform 0.9s ease; } /* Film Grain & Scratches Overlay */ .stc-overlay-fx { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.3) 100%), repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px); pointer-events: none; transition: opacity 0.9s ease; mix-blend-mode: multiply; } /* Caption Info */ .stc-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 70%, transparent 100%); color: #fff; padding: 30px 15px 15px 15px; text-align: left; opacity: 0; transform: translateY(10px); transition: opacity 0.8s ease, transform 0.8s ease; display: flex; flex-direction: column; gap: 8px; } .stc-caption h4 { margin: 0; font-size: 1.1rem; font-weight: 600; } .stc-caption p { margin: 0; font-size: 0.85rem; font-weight: 300; line-height: 1.3; } .stc-btn { align-self: flex-start; background: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.5); color: #fff; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s ease; margin-top: 5px; text-decoration: none; } .stc-btn:hover { background: rgba(255,255,255,0.4); color: #fff;} /* Bottom Polaroid Details */ .stc-bottom-details { position: absolute; bottom: 10px; left: 15px; right: 15px; display: flex; justify-content: space-between; align-items: center; } .stc-badge { background: #ff6b6b; color: white; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; box-shadow: 0 2px 5px rgba(255, 107, 107, 0.4); } .stc-date { font-family: 'Caveat', cursive; font-size: 1.2rem; color: #333; opacity: 0.8; } /* === HOVER EFFECTS === */ .stc-polaroid:hover { transform: rotate(0deg) scale(1.05) translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 0 20px rgba(255, 255, 255, 0.5); background: #ffffff; } .stc-polaroid:hover .stc-img { filter: sepia(0) grayscale(0) contrast(1.05) brightness(1); transform: scale(1.03); } .stc-polaroid:hover .stc-overlay-fx { opacity: 0; } .stc-polaroid:hover .stc-caption { opacity: 1; transform: translateY(0); } .stc-polaroid:hover .stc-tape { opacity: 0.4; } /* Floating Dust Particles */ .stc-dust { position: absolute; background: rgba(255, 255, 255, 0.8); border-radius: 50%; pointer-events: none; z-index: 1; animation: floatDust linear infinite; } @keyframes floatDust { 0% { transform: translateY(0) translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-100px) translateX(20px); opacity: 0; } } /* Responsive */ @media (max-width: 480px) { #stc-widget { max-width: 100%; padding: 20px 0px; } .stc-polaroid { max-width: 100%; margin: 0 auto; transform: rotate(0deg); } } /* 1. Κεντρικό Panel */ #smart-hub { font-family: 'Inter', Arial, sans-serif; background: var(--glass, rgba(255, 255, 255, 0.18)); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.7); border-radius: 24px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); padding: 10px; overflow: hidden; margin-bottom: 25px; } .hub-divider { display: flex; align-items: center; text-align: left; /* Αλλαγή από center σε left */ justify-content: flex-start; /* Σπρώχνει το περιεχόμενο αριστερά */ font-family: 'Inter', Arial, sans-serif; font-size: 16px; font-weight: 800; color: #000; letter-spacing: 0.5px; margin-bottom: 20px; cursor: pointer; user-select: none; } /* Η γραμμή αριστερά (Μικραίνει για να κολλήσει το κείμενο αριστερά) */ .hub-divider::before { content: ''; width: 16px; /* Σταθερό μικρό μήκος για την αριστερή γραμμή */ flex: none; /* Σταματάει να μεγαλώνει */ border-bottom: 1px solid rgba(0,0,0,0.15); margin-right: 5px; /* Απόσταση από το κείμενο */ } /* Η γραμμή δεξιά (Μεγαλώνει για να γεμίσει το υπόλοιπο κενό) */ .hub-divider::after { content: ''; flex: 1; /* Αυτή η γραμμή παίρνει όλο τον υπόλοιπο χώρο */ border-bottom: 1px solid rgba(0,0,0,0.15); margin-left: 15px; } /* 3. Links - ΜΑΥΡΑ ΓΡΑΜΜΑΤΑ & ORIGINAL DESIGN */ .hub-links { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 12px; } .hub-links a { display: flex; align-items: center; gap: 15px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); border-left: 5px solid transparent; border-radius: 14px; padding: 1px 1px; color: #000 !important; /* ΚΑΘΑΡΟ ΜΑΥΡΟ */ font-weight: 700 !important; /* ΕΝΤΟΝΑ */ font-size: 15px !important; line-height: 1.4 !important; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ΠΡΟΣΘΕΣΕ ΑΥΤΑ: */ -webkit-hyphens: auto !important; /* Για Chrome και Safari */ -ms-hyphens: auto !important; /* Για παλιούς Edge */ hyphens: auto !important; /* ική ρύθμιση συλλαβισμού */ word-break: break-word !important; /* Εξασφαλίζει ότι η λέξη θα σπάσει αν είναι πολύ μεγάλη */ } .hub-ic { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255, 255, 255, 0.9); /* Λευκό "συννεφάκι" */ border-radius: 10px; font-size: 16px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* ΠΡΟΣΘΗΚΕΣ ΓΙΑ ΝΑ ΚΡΑΤΑΝΕ ΤΑ EMOJI ΤΟ ΧΡΩΜΑ ΤΟΥΣ: */ color: initial !important; /* Λέει στο emoji να αγνοήσει το μαύρο χρώμα του link */ font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; /* Κλειδώνει την εμφάνισή τους ως "χρωματιστά εικονίδια" */ } .hub-links a:hover { background: rgba(255, 255, 255, 0.95); border-left: 5px solid #a90e0e; transform: translateX(6px) scale(1.02); color: #a90e0e !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .hub-links a:hover .hub-ic { transform: scale(1.15) rotate(-5deg); background: #fff; } /* Το κουμπί που ανοιγοκλείνει */ .hub-divider { cursor: pointer; user-select: none; } /* Το βελάκι */ .hub-toggle-icon { display: inline-block; margin-left: 10px; font-size: 12px; vertical-align: middle; transition: transform 0.4s ease; } /* Όταν ανοίγει, το βελάκι γυρίζει */ .hub-divider.active .hub-toggle-icon { transform: rotate(180deg); } /* Το "κρυφό" περιτύλιγμα που ανοιγοκλείνει */ .hub-content-wrapper { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.7s ease-in-out, opacity 0.5s ease; } /* Η κατάσταση όταν είναι ανοιχτό */ .hub-content-wrapper.open { max-height: 5000px; opacity: 1; margin-top: 20px; } @media (min-width: 701px) { /* Κάνει το συρτάρι πάντα ανοιχτό σε PC */ .hub-content-wrapper { max-height: none !important; opacity: 1 !important; margin-top: 20px !important; } .mobile-only { display: none !important; } /* Κρύβει το βελάκι γιατί είναι περιττό σε PC */ .hub-toggle-icon { display: none !important; } /* Αφαιρεί το "χεράκι" στον τίτλο αφού δεν χρειάζεται κλικ */ .hub-divider { cursor: default !important; } } /* ΕΞΑΥΛΩΣΗ ΜΟΝΟ ΣΤΟ ΚΙΝΗΤΟ ΓΙΑ ΤΟ HTML 13 */ @media screen and (max-width: 768px) { #HTML13, #HTML13 .widget-content, #HTML13 .widget { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; overflow: hidden !important; } } /* ΣΤΟ PC ΕΠΑΝΑΦΟΡΑ ΓΙΑ ΤΟ HTML 13 */ @media screen and (min-width: 769px) { #HTML13 { display: block !important; visibility: visible !important; } } /* ΜΕΓΕΘΥΝΣΗ ΤΙΤΛΟΥ ΚΑΙ ΚΕΙΜΕΝΟΥ ΜΟΝΟ ΣΤΑ ΚΙΝΗΤΑ */ @media screen and (max-width: 768px) { /* Μεγαλώνει ο τίτλος "Έξυπνες Σελίδες" */ .hub-divider { font-size: 15px !important; /* Από 16px το πάμε 24px */ font-weight: 900 !important; letter-spacing: 0px !important; padding: 10px 5px !important; display: flex !important; align-items: center !important; } /* Μεγαλώνει το βελάκι */ .hub-toggle-icon { font-size: 18px !important; margin-left: 15px !important; } /* Μεγαλώνει η γραμμή δεξιά για να γεμίσει το κενό */ .hub-divider::after { flex: 1 !important; border-bottom: 2px solid rgba(0,0,0,0.2) !important; /* Πιο παχιά γραμμή */ margin-left: 1px !important; margin-right: 1px !important; } /* Μεγαλώνει το κείμενο μέσα στα κουμπιά (links) */ .hub-links a { font-size: 18px !important; /* Πιο ευανάγνωστο στο χέρι */ padding: 8px !important; /* Πιο "παχύ" κουμπί για να πατιέται εύκολα */ } /* Μεγαλώνουν τα εικονίδια (emoji) */ .hub-ic { width: 45px !important; height: 45px !important; font-size: 22px !important; } } /* ΜΕΓΕΘΥΝΣΗ ΚΑΙ ΧΡΩΜΑ #a90e0e ΜΟΝΟ ΣΤΑ ΚΙΝΗΤΑ */ @media screen and (max-width: 768px) { /* Τίτλος: Μέγεθος και Χρώμα */ .hub-divider { font-size: 15px !important; font-weight: 900 !important; color: #a90e0e !important; /* ΕΔΩ ΤΟ ΧΡΩΜΑ ΣΟΥ */ padding: 20px 1px !important; } /* Το βελάκι δίπλα στον τίτλο */ .hub-toggle-icon { font-size: 18px !important; color: #a90e0e !important; } /* Η γραμμή δεξιά από τον τίτλο */ .hub-divider::after { border-bottom: 1px solid #a90e0e !important; /* ΕΔΩ ΤΟ ΧΡΩΜΑ ΣΟΥ */ opacity: 0.4; } .hub-divider::before { border-bottom: 1px solid #a90e0e !important; /* ΕΔΩ ΤΟ ΧΡΩΜΑ ΣΟΥ */ opacity: 0.4; } /* Τα κουμπιά (links) όταν τα πατάς */ .hub-links a { font-size: 18px !important; padding: 8px !important; } .hub-links a:hover { color: #a90e0e !important; border-left: 5px solid #a90e0e !important; } #smart-hub { /* 2. ΚΑΘΕΤΗ ΘΕΣΗ (Πάνω-Κάτω) */ /* Αν είναι πολύ πάνω, αύξησε το πρώτο νούμερο (π.χ. 30px) */ margin-top: 5px !important; margin-bottom: 5px !important; /* 3. ΕΣΩΤΕΡΙΚΕΣ ΑΠΟΣΤΑΣΕΙΣ */ padding: 5px !important; /* 4. ΕΞΑΣΦΑΛΙΣΗ ΣΩΣΤΩΝ ΔΙΑΣΤΑΣΕΩΝ */ display: block !important; box-sizing: border-box !important; float: none !important; /* Ακυρώνει τυχόν παλιά layouts που το σπρώχνουν πλάγια */ } /* ———————————— ΤΟ ΑΠΟΛΥΤΟ MODERN GLASS WIDGET ———————————— */ /* 1. Όλο το πλαίσιο (Το Κυρίως Γυαλί) */ #smart-hub { background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%) !important; backdrop-filter: blur(25px) saturate(180%) !important; -webkit-backdrop-filter: blur(25px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-top: 1px solid rgba(255, 255, 255, 0.9) !important; /* Έντονο φως από πάνω */ border-left: 1px solid rgba(255, 255, 255, 0.8) !important; /* Φως από αριστερά */ border-radius: 32px !important; /* Πιο μεγάλες, μοντέρνες καμπύλες */ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255,255,255,0.2) !important; padding: 15px !important; margin-top: 15px !important; position: relative; overflow: hidden !important; } /* 2. Εφέ "Χρωματιστής Αύρας" στο background του πλαισίου (Creative πινελιά) */ #smart-hub::before { content: ""; position: absolute; top: -50px; right: -20px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(169, 14, 14, 0.15) 0%, transparent 70%); filter: blur(30px); z-index: -1; pointer-events: none; } /* 3. Ο Τίτλος - Σαν ξεχωριστό, "παχύ" κουμπί μέσα στο γυαλί */ .hub-divider { background: rgba(255, 255, 255, 0.6) !important; box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.8), 0 4px 15px rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; border-radius: 20px !important; padding: 15px 5px !important; font-size: 24px !important; font-weight: 900 !important; color: #1a1a1a !important; text-shadow: 0 1px 2px rgba(255,255,255,0.9) !important; margin: 0 !important; justify-content: space-between !important; /* Σπρώχνει το κείμενο αριστερά και το βελάκι δεξιά */ display: flex !important; align-items: center !important; } /* Καθαρίζουμε τις παλιές γραμμές */ .hub-divider::before, .hub-divider::after { display: none !important; } /* 4. Το Βελάκι - Γίνεται ένα όμορφο κυκλικό κουμπάκι */ .hub-toggle-icon { background: #ffffff !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important; color: #a90e0e !important; /* Το κόκκινό σου */ font-size: 14px !important; margin: 0 !important; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Bouncy άνοιγμα */ } /* 5. Τα Links μέσα στο συρτάρι (όταν ανοίγει) - Modern Glass Cards */ .hub-links a { background: rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-top: 1px solid rgba(255, 255, 255, 0.8) !important; border-radius: 18px !important; padding: 12px 15px !important; margin-bottom: 10px !important; box-shadow: 0 6px 16px rgba(0,0,0,0.04) !important; transform: none !important; } /* Εφέ πατήματος στα κινητά (Active state) */ .hub-links a:active { transform: scale(0.97) !important; background: rgba(255, 255, 255, 0.6) !important; } /* 3. Ο Τίτλος - Καθαρός και μεγάλος ΜΟΝΟ στα κινητά */ .hub-divider { background: transparent !important; /* Εξαφανίζει το εσωτερικό πλαίσιο */ box-shadow: none !important; /* Αφαιρεί τη σκιά του πλαισίου */ border: none !important; /* Αφαιρεί το περίγραμμα */ border-radius: 0 !important; padding: 30px 5px !important; font-size: 24px !important; /* Μεγαλώνει τη γραμματοσειρά για να χωράει και να φαίνεται */ font-weight: 900 !important; color: #a90e0e !important; /* Κρατάει το κόκκινο χρώμα σου */ text-shadow: none !important; margin: 0 !important; justify-content: space-between !important; display: flex !important; align-items: center !important; } } /* 2. CSS - FIXED POSITION ΚΟΥΜΠΙΟΥ */ #gt-floating-btn { position: fixed !important; top: 43px !important; right: 92px !important; width: 43px !important; /* Το μεγάλωσα λίγο για το PC για να χωράει το 35px icon */ height: 43px !important; border-radius: 50% !important; background: #ffffff !important; border: 3px solid #a90e0e !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; /* ΚΕΝΤΡΑΡΙΣΜΑ */ display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; cursor: pointer !important; z-index: 10 !important; transition: transform 0.2s !important; overflow: hidden !important; /* Για να μην εξέχει το icon */ } #gt-floating-btn:hover { transform: scale(1.1) !important; } .gt-icon { font-size: 32px !important; /* Το κατέβασα ελάχιστα από 35 για να κεντράρει καλύτερα */ display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; line-height: 1 !important; /* ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ: Μηδενίζει το κενό κάτω από το emoji */ margin-top: 0px !important; /* Μικρή διόρθωση προς τα πάνω αν χρειάζεται */ } /* 3. ΤΟ ΜΕΝΟΥ ΚΑΤΩ ΑΠΟ ΤΟ ΚΟΥΜΠΙ */ .gt-dropdown-menu { display: none; position: fixed !important; top: 95px !important; /* Κάτω από το κουμπί (95px + 44px + 6px κενό) */ right: 70px !important; width: 260px !important; max-height: 400px !important; background: #f4f7f6 !important; border: 1px solid #dcdcdc !important; border-radius: 16px !important; box-shadow: 0 12px 40px rgba(0,0,0,0.2) !important; z-index: 2147483647 !important; flex-direction: column !important; overflow: hidden !important; font-family: Arial, sans-serif !important; } .gt-menu-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 15px !important; border-bottom: 2px solid #e0e0e0 !important; } .gt-menu-title { font-weight: 900 !important; font-size: 14px !important; color: #a90e0e !important; } .gt-close-small { background: transparent !important; border: none !important; font-size: 20px !important; cursor: pointer !important; color: #666 !important; } /* ΛΙΣΤΑ ΜΕ ΓΛΩΣΣΕΣ ΜΙΑ ΚΑΤΩ ΑΠΟ ΤΗΝ ΑΛΛΗ */ .gt-lang-list { overflow-y: auto !important; padding: 10px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .gt-group-title { font-weight: bold !important; color: #a90e0e !important; margin-top: 12px !important; margin-bottom: 5px !important; font-size: 11px !important; text-align: left !important; border-bottom: 1px solid #eee !important; padding-bottom: 2px !important; } .gt-lang-list button { width: 100% !important; text-align: left !important; padding: 10px 12px !important; border: 1px solid #eee !important; background: #fff !important; border-radius: 8px !important; cursor: pointer !important; font-weight: 600 !important; font-size: 13px !important; color: #333 !important; transition: all 0.2s !important; display: block !important; } .gt-lang-list button:hover { background: #a90e0e !important; color: white !important; border-color: #a90e0e !important; } /* Google Bar Cleanup */ .goog-te-banner-frame, .skiptranslate, #goog-gt-tt { display: none !important; } body { top: 0px !important; } /* ΡΥΘΜΙΣΕΙΣ ΜΟΝΟ ΓΙΑ ΤΑΜΠΛΕΤ / ΜΙΚΡΑ LAPTOP (800px - 1200px) */ @media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1500px) { #gt-floating-btn { display: flex !important; /* Διασφαλίζει ότι φαίνεται */ top: 110px !important; /* Κατεβαίνει λίγο πιο κάτω από το αρχικό */ right: 19px !important; /* Λίγο πιο μέσα από την άκρη */ width: 42px !important; /* Μεγαλύτερο κουμπί */ height: 42px !important; /* Μεγαλύτερο κουμπί */ border: 3px solid #a90e0e !important; } .gt-icon { font-size: 45px !important; /* Μεγαλύτερο εικονίδιο υδρογείου */ } .gt-dropdown-menu { display: none; /* Παραμένει κρυφό μέχρι το κλικ */ top: 168px !important; /* Προσαρμογή για να ξεκινά κάτω από το νέο μέγεθος κουμπιού */ right: 25px !important; width: 280px !important; /* Ελαφρώς πιο πλατύ μενού */ max-height: 550px !important; } /* ΜΕΓΕΘΟΣ ΚΕΙΜΕΝΟΥ & ΚΟΥΜΠΙΩΝ ΜΕΣΑ ΣΤΟ ΜΕΝΟΥ */ .gt-lang-list button { padding: 14px 18px !important; /* Πιο μεγάλα κουμπιά για εύκολο πάτημα με το δάχτυλο */ font-size: 16px !important; /* Πιο μεγάλα γράμματα στις γλώσσες */ } .gt-menu-title { font-size: 18px !important; /* Πιο μεγάλος τίτλος "ΕΠΙΛΟΓΗ ΓΛΩΣΣΑΣ" */ } .gt-group-title { font-size: 14px !important; /* Πιο μεγάλοι τίτλοι κατηγοριών (ΔΗΜΟΦΙΛΕΙΣ κλπ) */ } } /* ΕΞΑΦΑΝΙΣΗ ΣΤΑ ΚΙΝΗΤΑ (ΚΑΤΩ ΑΠΟ 800px) */ @media screen and (max-width: 850px) { #gt-floating-btn, #gt-languages-modal { display: none !important; } } #gt-floating-btn { transition: opacity 0.8s ease, transform 0.8s ease; } #gt-floating-btn.is-hidden { opacity: 0 !important; pointer-events: none !important; transform: scale(0.5) !important; } #HTML20, #HTML20 .widget-content, #HTML20 .widget { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; } /* ========================================================================== 2. SMART FEEDBACK (Γενικό στυλ για τα άρθρα) ========================================================================== */ .smart-feedback-container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 0 auto !important; width: fit-content !important; padding: 2px 15px !important; background-color: #f9f9f9 !important; border-radius: 6px !important; font-family: sans-serif !important; clear: both !important; } /* Όταν ψηφίσει ο χρήστης */ .smart-feedback-container.voted { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 auto !important; } .smart-feedback-buttons { display: flex !important; flex-direction: row !important; gap: 6px !important; } /* Απενεργοποιεί τα κλικ αφού ψηφίσει ο χρήστης για αποφυγή spam */ .smart-feedback-container.voted .smart-feedback-buttons { opacity: 0.8; pointer-events: none; } .smart-feedback-btn { background: #fff !important; border: 1px solid #ddd !important; border-radius: 8px !important; padding: 4px 8px !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 4px !important; transition: 0.2s !important; } .smart-feedback-btn span:first-child { font-size: 18px !important; } @media (max-width: 700px) { .smart-feedback-container { padding: 22px 10px !important; } } /* Μεγαλύτερα κουμπιά μόνο για μεγάλες οθόνες (Desktop) */ @media (min-width: 901px) { .smart-feedback-btn { padding: 4px 8px !important; font-size: 16px !important; } .smart-feedback-btn span:first-child { font-size: 24px !important; } } /* ========================================================================== 3. CUSTOM READ MORE BUTTON ========================================================================== */ div.custom-read-more, body .post-body .custom-read-more { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; background: #0056b3 !important; background-color: #0056b3 !important; color: #ffffff !important; padding: 10px 25px !important; border-radius: 27px !important; font-weight: 700 !important; font-size: 13px !important; cursor: pointer !important; margin: 10px auto 0 auto !important; width: fit-content !important; border: none !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important; transition: all 0.3s ease !important; text-decoration: none !important; } .custom-read-more .icon { font-size: 13px !important; } div.custom-read-more:hover, .custom-read-more:hover { background: #004494 !important; background-color: #004494 !important; transform: translateY(-2px) !important; } /* Επιβολή λευκού χρώματος στα πάντα μέσα στο κουμπί */ .custom-read-more, .custom-read-more *, .custom-read-more span, .custom-read-more .icon { color: #ffffff !important; fill: #ffffff !important; } /* Lightbox & Spinner για το κουμπί */ .custom-read-more.is-loading .icon { display: inline-block !important; animation: spin 1s linear infinite !important; } @keyframes spin { 100% { transform: rotate(360deg); } } /* ========================================================================== 4. FETCHED CONTENT (Το συρτάρι που ανοίγει) ========================================================================== */ .fetched-content-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1); background: #ffffff !important; } .fetched-content-inner { overflow: hidden; } .fetched-content-wrapper.is-open { grid-template-rows: 1fr; margin-bottom: 25px; border-top: 2px solid #0056b3 !important; } .scrollable-article-area { max-height: 500px; overflow-y: auto; padding: 15px; } /* Κρύβουμε ΜΟΝΟ το παλιό Jump Link (Read More) */ .jump-link, .post-outer .jump-link { display: none !important; } /* Επαναφορά για τα βέλη/κουμπιά Επόμενο-Προηγούμενο */ .mobile-index-arrow, .mobile-link-button, .blog-pager { display: block !important; visibility: visible !important; opacity: 1 !important; } /* ========================================================================== 5. CUSTOM LIGHTBOX (Εικόνες & Video + Thumbnails + Swipe) ========================================================================== */ /* JS-based Lightbox Fix: Εφαρμογή reset στο body */ body.lb-active { zoom: 1 !important; transform: none !important; -webkit-transform: none !important; perspective: none !important; overflow: hidden !important; } .my-custom-lightbox { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-color: rgba(0, 0, 0, 0.95) !important; z-index: 99999999 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; opacity: 0; transition: opacity 0.3s ease; touch-action: none; zoom: 1 !important; transform: none !important; } .my-custom-lightbox.show { opacity: 1; } .my-custom-lightbox-img-container { position: relative !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 75vh !important; transform: none !important; transition: opacity 0.2s ease; } img.my-lb-media { max-width: 90vw !important; max-height: 75vh !important; border: 3px solid #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); object-fit: contain !important; user-select: none; transform: scale(1) !important; } /* Στυλ αυστηρό για Βίντεο στο Lightbox */ iframe.my-lb-media { width: 85vw !important; height: 48vw !important; max-height: 70vh !important; max-width: 1000px !important; background: #000; border: 3px solid #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } .my-custom-lightbox-close { position: absolute; top: 15px; right: 25px; color: #fff; font-size: 45px; font-weight: bold; cursor: pointer; user-select: none; z-index: 10; line-height: 1; } .my-custom-lightbox-prev, .my-custom-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; user-select: none; padding: 20px; transition: color 0.3s; z-index: 10; } .my-custom-lightbox-prev { left: 5px; } .my-custom-lightbox-next { right: 5px; } .my-custom-lightbox-prev:hover, .my-custom-lightbox-next:hover { color: #bbb; } .my-custom-lightbox-counter { position: absolute; top: 25px; left: 25px; color: #ccc; font-size: 16px; font-family: sans-serif; } /* Μικρογραφίες (Thumbnails) */ .my-custom-lightbox-thumbnails { display: flex; gap: 10px; margin-top: 15px; max-width: 90vw; height: 15vh; min-height: 70px; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: #888 #222; transform: none !important; zoom: 1 !important; } .my-custom-lightbox-thumbnails::-webkit-scrollbar { height: 6px; } .my-custom-lightbox-thumbnails::-webkit-scrollbar-thumb { background-color: #888; border-radius: 3px; } .thumb-wrapper { position: relative; width: 60px; height: 60px; flex-shrink: 0; cursor: pointer; border: 2px solid transparent; border-radius: 6px; overflow: hidden; opacity: 0.4; transition: all 0.2s ease; } .thumb-wrapper.active { opacity: 1; border-color: #fff; transform: scale(1.05); } .thumb-wrapper:hover { opacity: 0.8; } .my-lb-thumb { width: 100%; height: 100%; object-fit: cover; } /* Λύση για χρήση ασφαλούς Unicode κωδικού */ .thumb-wrapper.is-video-thumb::after { content: "\25B6"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.9); font-size: 22px; text-shadow: 0 0 8px rgba(0,0,0,0.8); pointer-events: none; } /* ========================================================================== 6. MEDIA QUERIES ΓΙΑ LIGHTBOX (Tablet & Mobile) ========================================================================== */ /* Tablet Landscape Optimization */ @media screen and (min-width: 768px) and (max-width: 1300px) and (orientation: landscape) and (pointer: coarse) { .my-custom-lightbox-thumbnails { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; padding-left: 20px !important; padding-right: 20px !important; height: auto !important; min-height: 80px !important; margin-top: auto !important; margin-bottom: 35px !important; width: 100% !important; } .thumb-wrapper { width: 60px !important; height: 60px !important; flex: 0 0 auto !important; border-width: 1px !important; margin-right: 8px !important; } .my-custom-lightbox-img-container { height: 90vh !important; margin-top: 60px !important; display: flex !important; align-items: flex-start !important; } img.my-lb-media { max-height: 90vh !important; width: auto !important; object-fit: contain !important; vertical-align: top !important; } .my-custom-lightbox-prev, .my-custom-lightbox-next { font-size: 28px !important; padding: 8px !important; top: 45% !important; } } /* Mobile Lightbox Thumbnails Fix */ @media screen and (max-width: 1467px) { .my-custom-lightbox-thumbnails { justify-content: flex-start !important; display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; padding-left: 15px !important; padding-right: 15px !important; -webkit-overflow-scrolling: touch !important; } .thumb-wrapper { flex: 0 0 auto !important; width: 55px !important; height: 55px !important; } } /* --- ΕΜΦΑΝΙΣΗ ΓΙΑ PC --- */ .history-modern-card-pc { background: var(--glass) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); border-left: 6px solid #a90e0e; border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); margin-bottom: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .history-modern-card-pc:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(169, 14, 14, 0.15); } .history-header-pc { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; position: relative; z-index: 1; } .history-icon-pc { background: rgba(169, 14, 14, 0.08); padding: 8px 10px; border-radius: 12px; font-size: 18px; display: flex; align-items: center; justify-content: center; } .history-header-pc h3 { margin: 0; color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: -0.5px; } .history-content-pc { font-size: 15px; color: var(--text); line-height: 1.6; font-weight: 500; text-align: left; position: relative; z-index: 1; } /* Ευθυγράμμιση για τον τίτλο και την οδηγία */ .history-title-group-pc { display: flex; flex-direction: column; } /* Το μικρό επεξηγηματικό κείμενο */ .history-hint-pc { font-size: 12px; color: #a90e0e; font-weight: 600; margin-top: 2px; opacity: 0.85; } /* Το κρυφό πλαίσιο της αποστολής που ανοίγει ομαλά */ .mission-container-pc { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 0 15px; margin-top: 0; border-left: 3px solid #3b82f6; } /* Όταν η JS προσθέτει την κλάση .open, το πλαίσιο εμφανίζεται */ .mission-container-pc.open { max-height: 350px; opacity: 1; padding: 12px 15px; margin-top: 15px; } .mission-header-pc { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .mission-icon-pc { font-size: 16px; } .mission-header-pc h4 { margin: 0; font-size: 13px; font-weight: 700; color: #3b82f6; text-transform: uppercase; letter-spacing: 0.5px; } #mission-text-pc { margin: 0; font-size: 14px; color: var(--text); line-height: 1.5; font-style: italic; } .history-modern-card-pc { background: var(--glass) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); border-left: 6px solid #a90e0e; border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); margin-bottom: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; /* ΠΡΟΣΘΕΣΕ ΑΥΤΗ ΤΗ ΓΡΑΜΜΗ ΕΔΩ */ cursor: pointer; } /* --- ΕΦΕ ΠΑΛΜΟΥ ΛΑΜΠΑΣ --- */ @keyframes pulsatingLight { 0% { text-shadow: 0 0 5px rgba(255, 223, 0, 0.4); transform: scale(1); } 50% { /* Κορύφωση λάμψης και μεγέθους */ text-shadow: 0 0 20px rgba(255, 223, 0, 1), 0 0 30px rgba(255, 223, 0, 0.8); transform: scale(1.1); } 100% { text-shadow: 0 0 5px rgba(255, 223, 0, 0.4); transform: scale(1); } } .pulsating-lamp { font-size: 45px; margin-bottom: 5px; display: inline-block; /* Απαραίτητο για να λειτουργήσει το animation scale */ animation: pulsatingLight 2s infinite ease-in-out; } /* --- ΒΑΣΙΚΟ CSS ΤΗΣ ΚΑΡΤΑΣ --- */ #desktop-flip-wrapper .flip-container { perspective: 1000px; width: 100%; max-width: 320px; height: 220px; margin: auto; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; } #desktop-flip-wrapper .flip-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; border-radius: 15px; cursor: pointer; outline: none; } /* Hover μόνο σε συσκευές που έχουν πραγματικό hover (PC) */ @media (hover: hover) and (pointer: fine) { #desktop-flip-wrapper .flip-container:hover .flip-inner { transform: rotateY(180deg); } } /* Tap/keyboard toggle */ #desktop-flip-wrapper .flip-inner.is-flipped { transform: rotateY(180deg); } /* GLASSMORPHISM EFFECTS */ #desktop-flip-wrapper .flip-front, #desktop-flip-wrapper .flip-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15); } #desktop-flip-wrapper .flip-front { background: rgba(255, 255, 255, 0.4); color: #333; border: 1px solid rgba(255, 255, 255, 0.6); /* Διόρθωση για Firefox: Ορίζουμε ρητά τη θέση 0 και σπρώχνουμε 1px μπροστά */ transform: rotateY(0deg) translateZ(1px); } #desktop-flip-wrapper .flip-back { background: rgba(15, 157, 88, 0.78); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); /* Διόρθωση για Firefox: Σπρώχνουμε 1px την πίσω πλευρά για να μην υπάρχει σύγκρουση (Z-fighting) */ transform: rotateY(180deg) translateZ(1px); } /* Focus style for keyboard */ #desktop-flip-wrapper .flip-inner:focus-visible { box-shadow: 0 0 0 4px rgba(15, 157, 88, 0.35), 0 8px 32px 0 rgba(0, 0, 0, 0.15); } @media (prefers-reduced-motion: reduce) { #desktop-flip-wrapper .flip-inner { transition: none; } .pulsating-lamp { animation: none !important; } } /* Η ΝΕΑ ΒΑΣΗ ΣΤΟ ΚΙΝΗΤΟ */ .mobile-glass-shelf { padding: 15px !important; margin-top: 15px !important; margin-bottom: 15px !important; /* ΠΡΟΣΘΕΣΕ ΑΥΤΑ ΓΙΑ ΝΑ ΦΑΙΝΕΤΑΙ ΤΟ ΓΥΑΛΙ */ background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* ΣΤΟ PC (ΠΑΝΩ ΑΠΟ 769px) ΕΠΑΝΑΦΟΡΑ ΣΤΗ SIDEBAR */ @media screen and (min-width: 369px) { #HTML17 { display: block !important; visibility: visible !important; } } .blur-box { background: #2c3e50; color: white; padding: 20px; border-radius: 15px; text-align: center; max-width: 300px; margin: auto; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; cursor: pointer; outline: none; } .blur-box:focus-visible { box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.5); } .blur-answer { font-size: 22px; font-weight: bold; color: #f1c40f; filter: blur(12px); transition: filter 0.6s ease; margin-top: 15px; user-select: none; } @media (hover: hover) and (pointer: fine) { .blur-box:hover .blur-answer { filter: blur(0); user-select: auto; } } .blur-box.is-clear .blur-answer { filter: blur(0); user-select: auto; } /* Εμφάνιση ΜΟΝΟ σε PC */ #slider-wrapper-desktop { display: block; } @media (max-width: 768px) { #slider-wrapper-desktop { display: none !important; } } @media screen and (min-width: 769px) { .slider-main-title { text-align: center; font-weight: 800; font-size: 18px; margin: 0 0 15px 0; color: #a90e0e; font-family: 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; display: table; margin: 0 auto 15px auto; padding: 6px 18px; background: #f8f8f8; border: 1px solid #eeeeee; border-radius: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); } .slider-main-title::before { content: '🔥 '; font-size: 16px; margin-right: 4px; } } @media (min-width: 769px) { .slider-main-title { font-size: 30px !important; padding: 5px 13px !important; margin-bottom: 11px !important; } .slider-main-title::before { font-size: 18px !important; } } @media screen and (min-width: 769px) { #custom-post-slider-desktop { position: relative; width: 100%; height: 230px; /* Βάζουμε σταθερό ύψος ίδιο με τις εικόνες σου */ margin: 0 auto; overflow: hidden; border-radius: 12px; background: #f4f4f4; /* Ένα απαλό γκρι placeholder φόντο */ } .slide-item { position: absolute; /* Μπαίνουν το ένα πάνω στο άλλο */ top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transform: scale(0.98); transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s; border-radius: 12px; overflow: hidden; } .slide-item.active { opacity: 1; visibility: visible; z-index: 2; /* Η τρέχουσα εικόνα έρχεται σε πρώτο πλάνο */ transform: scale(1); } #custom-post-slider-desktop a.slide-link, #custom-post-slider-desktop a.slide-link:hover { background: none !important; text-decoration: none !important; border: none !important; padding: 0 !important; display: block !important; } #custom-post-slider-desktop .slide-item img { width: 100% !important; height: 230px !important; object-fit: fill !important; display: block !important; border-radius: 12px !important; margin: 0 !important; transition: transform 0.4s ease !important; } .slide-item:hover img { transform: scale(1.04) !important; } .slide-title-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; box-sizing: border-box; z-index: 2; } .slide-title { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: #a90e0e !important; padding: 2px 4px !important; font-size: 12px !important; font-weight: 700 !important; font-family: 'Inter', Arial, sans-serif !important; text-align: center !important; border-radius: 10px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; word-wrap: break-word !important; line-height: 1.4 !important; max-height: 4.2em !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; transition: all 0.3s ease !important; margin: 0 !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; transform: translateZ(0) !important; } .slide-item:hover .slide-title { background: #a90e0e !important; color: #ffffff !important; border-color: #a90e0e !important; } #custom-post-slider-desktop .slider-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(255, 255, 255, 0.6) !important; color: #333 !important; border: none !important; cursor: pointer !important; width: 28px !important; height: 28px !important; padding: 0 !important; border-radius: 50% !important; font-size: 14px ; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 20 !important; transition: background 0.3s, color 0.3s, transform 0.2s !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; opacity: 1 !important; visibility: visible !important; } #custom-post-slider-desktop .slider-arrow:hover { background: rgba(255, 255, 255, 0.95) !important; color: #a90e0e !important; transform: translateY(-50%) scale(1.1) !important; } .arrow-prev { left: 2px !important; } .arrow-next { right: 2px !important; } .hidden-arrow { display: none !important; } @keyframes slideFade { from { opacity: 0.4; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } .video-badge { position: absolute; top: 4px; left: 4px; background: rgba(169, 14, 14, 0.85) !important; color: #ffffff !important; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-size: 13px; padding-left: 2px; box-sizing: border-box; pointer-events: none; transition: all 0.3s ease !important; } .slide-item:hover .video-badge { background: rgba(17, 11, 11, 0.95) !important; transform: scale(1.08); } .slide-counter { position: absolute; top: 4px; right: 4px; background: rgba(17, 17, 17, 0.7); color: #ffffff; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; font-family: 'Inter', Arial, sans-serif; z-index: 10; pointer-events: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 2px 6px rgba(0,0,0,0.3); } /* Καθαρός τίτλος με τσαχπινιά & κίνηση */ #slider-wrapper-desktop .slider-main-title { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; font-size: 14px !important; position: relative !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } /* Η διακριτική γραμμή που εμφανίζεται από κάτω */ #slider-wrapper-desktop .slider-main-title::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 50%; background-color: #a90e0e; transition: width 0.3s ease; transform: translateX(-50%); opacity: 0.7; } #slider-wrapper-desktop:hover .slider-main-title::after, #slider-wrapper-desktop .slider-main-title:hover::after { width: 100%; } #slider-wrapper-desktop .slider-main-title::before { display: inline-block; transition: transform 0.3s ease !important; } #slider-wrapper-desktop:hover .slider-main-title::before, #slider-wrapper-desktop .slider-main-title:hover::before { transform: scale(1.05) rotate(5deg) !important; } } /* Το κυρίως κουτί - ΜΕ ΣΩΣΤΟ GLASSMORPHISM (Ημιδιαφανές) */ .fb-breakout-card { background: rgba(255, 255, 255, 0.15) !important; /* Πολύ πιο διαφανές για να παίρνει το χρώμα του blog */ backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Απαλό γυάλινο περίγραμμα */ border-radius: 20px !important; padding: 45px 20px 25px 20px !important; /* Μεγάλο padding πάνω για να χωρέσει το εικονίδιο */ text-align: center !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; /* Ίδια σκιά με τα άλλα widgets σου */ font-family: 'Inter', Arial, sans-serif !important; max-width: 320px !important; margin: 45px auto 20px auto !important; position: relative !important; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important; } .fb-breakout-card:hover { transform: translateY(-5px) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important; border-color: rgba(24, 119, 242, 0.3) !important; /* Ελαφριά μπλε απόχρωση στο hover */ } /* Το εικονίδιο που "σπάει" τα όρια του κουτιού */ .fb-float-icon { position: absolute !important; top: -35px !important; left: 50% !important; transform: translateX(-50%) !important; background: linear-gradient(135deg, #1877f2, #166fe5) !important; width: 70px !important; height: 70px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4) !important; border: 4px solid rgba(255, 255, 255, 0.6) !important; /* Ημιδιαφανές λευκό για να δένει με το γυαλί */ transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } /* Παιχνιδιάρικο Hover στο εικονίδιο */ .fb-breakout-card:hover .fb-float-icon { transform: translateX(-50%) scale(1.1) rotate(5deg) !important; } /* Ένδειξη "Live" / Επίσημο */ .fb-live-indicator { display: inline-flex !important; align-items: center !important; background: rgba(24, 119, 242, 0.1) !important; padding: 4px 12px !important; border-radius: 20px !important; margin-bottom: 15px !important; border: 1px solid rgba(24, 119, 242, 0.15) !important; } /* Το κινούμενο κυκλάκι */ .fb-pulse { width: 8px !important; height: 8px !important; background-color: #1877f2 !important; border-radius: 50% !important; margin-right: 6px !important; box-shadow: 0 0 0 0 rgba(24, 119, 242, 0.7) !important; animation: fb-pulsing 1.5s infinite cubic-bezier(0.66, 0, 0, 1) !important; } @keyframes fb-pulsing { to { box-shadow: 0 0 0 10px rgba(24, 119, 242, 0) !important; } } .fb-live-text { font-size: 11px !important; font-weight: 700 !important; color: #1877f2 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } /* Τυπογραφία */ .fb-breakout-title { color: #111 !important; font-size: 18px !important; font-weight: 800 !important; margin: 0 0 8px 0 !important; letter-spacing: -0.5px !important; } .fb-breakout-desc { color: #444 !important; font-size: 13px !important; line-height: 1.5 !important; margin: 0 0 20px 0 !important; } /* Κουμπί Ghost που γεμίζει στο Hover */ .fb-breakout-btn { display: block !important; background: rgba(24, 119, 242, 0.05) !important; color: #1877f2 !important; text-decoration: none !important; font-size: 14px !important; font-weight: 700 !important; padding: 12px 20px !important; border-radius: 12px !important; border: 2px solid rgba(24, 119, 242, 0.6) !important; transition: all 0.3s ease !important; } .fb-breakout-btn:hover { background: #1877f2 !important; color: #ffffff !important; border-color: #1877f2 !important; box-shadow: 0 5px 15px rgba(24, 119, 242, 0.3) !important; } /* Βασικό Wrapper & Γραμματοσειρά (Native System Fonts για μέγιστη ταχύτητα) */ #glass-quiz-wrapper { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; display: flex; justify-content: center; padding: 5px; } /* Glassmorphism Card */ .quiz-card { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; padding: 20px; width: 100%; max-width: 330px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Τίτλος & Εικονίδιο */ .glass-sparkle { font-size: 35px; display: inline-block; margin-bottom: 10px; } #q-title { margin: 0 0 15px; font-size: 18px; color: #2c3e50; text-transform: uppercase; font-weight: 800; } /* Ερώτηση με min-height για αποτροπή αναπηδήσεων (Layout Shift) */ #question-container { min-height: 80px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; } #question-display { font-size: 15px; font-weight: 600; color: #111; line-height: 1.4; margin: 0; } /* 3D Κουμπιά Απάντησης */ .buttons-row { display: flex; gap: 10px; } .quiz-btn { flex: 1; padding: 12px; border: none; border-radius: 12px; font-weight: 800; color: white; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 0 rgba(0,0,0,0.2); } .btn-true { background: #27ae60; } .btn-false { background: #e74c3c; } /* ΝΕΟ: Hover effects για Desktop UX */ .btn-true:hover { background: #2ecc71; } .btn-false:hover { background: #e74c3c; filter: brightness(1.1); } .quiz-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.2); } /* Κουτί Εξήγησης & Κουμπί Επόμενο */ #explanation-box { background: rgba(255, 255, 255, 0.8); padding: 15px; border-radius: 12px; margin-top: 15px; border: 1px solid rgba(255, 255, 255, 0.9); } #explanation-text { font-size: 14px; font-weight: 500; color: #333; margin: 0 0 12px 0; line-height: 1.4; } .next-btn { background: #3498db; color: white; border: none; padding: 10px 18px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: background 0.2s; } .next-btn:hover { background: #2980b9; } /* Feedback & Στατιστικά */ #quiz-feedback { margin-top: 12px; font-weight: 800; font-size: 16px; } #quiz-stats { margin-top: 10px; font-size: 13px; color: #555; font-weight: 600; } /* Animations (Με will-change για GPU Hardware Acceleration) */ .fade-in { animation: fadeIn 0.4s ease forwards; will-change: opacity; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .question-anim { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; will-change: transform, opacity; } @keyframes popIn { 0% { opacity: 0; transform: scale(0.9) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Hack Απόκρυψης του Παλιού Blogger Widget στα κινητά */ @media screen and (max-width: 768px) { #HTML23, #HTML23 .widget-content, #HTML23 .widget { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; overflow: hidden !important; } } /* --- 1. ΚΡΥΒΟΥΜΕ ΤΟ WIDGET ΚΑΙ ΤΟ ΚΕΝΟ ΤΟΥ ΠΑΝΤΟΥ ΑΡΧΙΚΑ --- */ #pc-quiz-wrapper { display: none !important; } .widget:has(#pc-quiz-wrapper) { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; } /* --- 2. ΕΜΦΑΝΙΣΗ ΜΟΝΟ ΣΤΑ PC (Οθόνες > 768px) ΚΑΙ ΜΟΝΟ ΑΝ ΕΙΝΑΙ ΑΡΧΙΚΗ --- */ @media screen and (min-width: 768px) { #pc-quiz-wrapper.show-on-home { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; } .widget:has(#pc-quiz-wrapper.show-on-home) { display: block !important; } } /* --- 3. ΤΟ ΣΤΥΛ ΤΟΥ QUIZ (Glassmorphism) --- */ .glass-quiz-widget-pc { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 24px; padding: 18px; text-align: center; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); margin-bottom: 25px; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease; box-sizing: border-box; } .glass-quiz-widget-pc:hover { transform: translateY(-6px); border-color: #a90e0e; box-shadow: 0 18px 45px rgba(169, 14, 14, 0.15); } .q-header-pc { margin-bottom: 15px; position: relative; } .emoji-glow-pc { position: relative; display: inline-block; min-width: 120px; height: 65px; margin-bottom: 4px; } .emoji-glow-pc::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110px; height: 60px; background: radial-gradient(circle, rgba(169,14,14,0.35) 0%, rgba(255,255,255,0) 75%); border-radius: 50%; z-index: 0; } .q-memoji-pc { font-size: 52px; display: inline-block; position: relative; z-index: 1; letter-spacing: -2px; filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.25)); animation: floatMemojiPC 3s ease-in-out infinite; } @keyframes floatMemojiPC { 0% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-5px) scale(1.03) rotate(2deg); } 100% { transform: translateY(0px) scale(1); } } .q-title-pc { font-family: 'Inter', Arial, sans-serif; font-size: 17px !important; font-weight: 900; margin: 0; text-transform: uppercase; letter-spacing: 0.8px; background: linear-gradient(90deg, #a90e0e, #2c3e50); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .q-body-pc p { font-family: Arial, sans-serif; font-size: 14px; color: #222; font-weight: 600; line-height: 1.5; margin-bottom: 18px; padding: 12px 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.6); border-left: 5px solid #a90e0e; text-align: justify; box-shadow: 0 4px 15px rgba(0,0,0,0.04); } .form-container-pc { border-radius: 14px; overflow: hidden; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: inset 0 2px 8px rgba(0,0,0,0.04); position: relative; height: 385px; transition: box-shadow 0.3s ease; } .form-container-pc:hover { box-shadow: inset 0 2px 12px rgba(169, 14, 14, 0.08); } .form-container-pc iframe { display: block; position: absolute; top: -335px; left: 0; width: 100%; height: 820px; } #quiz-trigger-pc button:hover { transform: scale(1.05); background: #8c0a0a !important; transition: 0.3s; } /* 1. Κεντρικό Panel - Original PC Design */ #smart-hub2 { font-family: 'Inter', Arial, sans-serif; background: var(--glass, rgba(255, 255, 255, 0.18)); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.7); border-radius: 24px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); padding: 10px; overflow: hidden; margin-bottom: 25px; } /* 2. Τίτλος (Divider) - Original PC Design */ #smart-hub2 .hub-divider { display: flex; align-items: center; text-align: left; justify-content: flex-start; font-family: 'Inter', Arial, sans-serif; font-size: 16px; /* Επανήλθε στο 16px */ font-weight: 800; color: #000; letter-spacing: 0.5px; margin-bottom: 20px; cursor: default; /* Όχι "χεράκι" στο PC αφού είναι πάντα ανοιχτό */ user-select: none; } /* Οι γραμμές αριστερά και δεξιά από τον τίτλο επανήλθαν */ #smart-hub2 .hub-divider::before { content: ''; width: 16px; flex: none; border-bottom: 1px solid rgba(0,0,0,0.15); margin-right: 5px; } #smart-hub2 .hub-divider::after { content: ''; flex: 1; border-bottom: 1px solid rgba(0,0,0,0.15); margin-left: 15px; } /* 3. Το συρτάρι πάντα ανοιχτό στο PC */ #smart-hub2 .hub-content-wrapper { max-height: none !important; opacity: 1 !important; margin-top: 0; display: block; } /* 4. Links - Original PC Design */ #smart-hub2 .hub-links { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 12px; } #smart-hub2 .hub-links a { display: flex; align-items: center; gap: 15px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); border-left: 5px solid transparent; border-radius: 14px; padding: 1px 1px; /* Επανήλθε το στενό padding */ color: #000 !important; font-weight: 700 !important; font-size: 15px !important; /* Επανήλθε στο 15px */ line-height: 1.4 !important; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-hyphens: auto !important; -ms-hyphens: auto !important; hyphens: auto !important; word-break: break-word !important; } /* 5. Εικονίδια - Original PC Design */ #smart-hub2 .hub-ic { display: flex; align-items: center; justify-content: center; width: 38px; /* Επανήλθαν οι αρχικές διαστάσεις */ height: 38px; background: rgba(255, 255, 255, 0.9); border-radius: 10px; font-size: 16px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.08); color: initial !important; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; } /* 6. Hover Effects */ #smart-hub2 .hub-links a:hover { background: rgba(255, 255, 255, 0.95); border-left: 5px solid #a90e0e; transform: translateX(6px) scale(1.02); color: #a90e0e !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } #smart-hub2 .hub-links a:hover .hub-ic { transform: scale(1.15) rotate(-5deg); background: #fff; } /* 7. Απόκρυψη Περιττών Στοιχείων για PC */ #smart-hub2 .hub-toggle-icon, #smart-hub2 .mobile-only { display: none !important; } .featured-box { text-align: center; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 10px !important; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: var(--shadow); display: block; text-decoration: none; color: inherit; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; margin: 10px 0; } .featured-box:hover { transform: translateY(-5px); border-color: #a90e0e; box-shadow: 0 12px 25px rgba(169, 14, 14, 0.15); } .featured-title { font-size: 17px; font-weight: 800; font-family: Arial, sans-serif; margin: 0 0 8px 0; color: #a90e0e; } .featured-box img { width: 100%; border-radius: 10px; display: block; transition: transform 0.4s ease; } .featured-action { max-height: 0; opacity: 0; overflow: hidden; background: #a90e0e; color: #fff !important; border-radius: 20px; font-size: 13px; font-weight: bold; margin-top: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .featured-box:hover .featured-action { max-height: 40px; opacity: 1; margin-top: -22px; padding: 8px 0; } .featured-box-lib { text-align: center; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 12px; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: var(--shadow); display: block; text-decoration: none; color: inherit; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; margin: 10px 0; } .featured-box-lib:hover { transform: translateY(-5px); border-color: #a90e0e; box-shadow: 0 12px 25px rgba(169, 14, 14, 0.15); } .featured-title-lib { font-size: 16px; font-weight: bold; font-family: Arial, sans-serif; margin: 0 0 8px 0; color: #a90e0e; } .featured-box-lib img { max-width: 130px; height: auto; border-radius: 8px; display: block; margin: 0 auto; transition: transform 0.4s ease; } .featured-action-lib { max-height: 0; opacity: 0; overflow: hidden; background: #a90e0e; color: #fff !important; border-radius: 20px; font-size: 13px; font-weight: bold; margin-top: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .featured-box-lib:hover .featured-action-lib { max-height: 40px; opacity: 1; margin-top: -22px; padding: 8px 0; } /* Κλείδωμα της μπάρας τέρμα επάνω */ #school-alert-bar { position: relative; width: 100%; background: #e63946; color: #ffffff; font-family: 'Inter', Arial, sans-serif; font-size: 13.5px; font-weight: 600; text-align: center; padding: 10px 45px 10px 15px; box-sizing: border-box; z-index: 99999; box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; } .alert-bar-content { display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.4; } .alert-icon { font-size: 16px; animation: alertBellRing 2s infinite ease-in-out; } .alert-close-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #ffffff; font-size: 22px; line-height: 1; cursor: pointer; opacity: 0.75; transition: opacity 0.2s ease, transform 0.2s ease; padding: 0 5px; } .alert-close-btn:hover { opacity: 1; transform: translateY(-50%) scale(1.15); } @keyframes alertBellRing { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(15deg); } 20% { transform: rotate(-15deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-10deg); } 50% { transform: rotate(0); } } @media (max-width: 600px) { #school-alert-bar { font-size: 12.5px; padding: 8px 35px 8px 10px; } } /* Διόρθωση για την επικεφαλίδα (Κουμπί) */ .accordion-header { background-color: #f8fbff !important; color: #2c3e50 !important; } .accordion-header:hover { background-color: #eef5ff !important; color: #3498db !important; } .accordion-header.active { background-color: #990000 !important; /* ΕΠΙΒΑΛΛΟΥΜΕ το κόκκινο φόντο */ color: #ffffff !important; /* ΕΠΙΒΑΛΛΟΥΜΕ το λευκό κείμενο */ } /* Σιγουρεύουμε ότι το κείμενο (span) ακούει πάντα το κουμπί */ .accordion-header span { color: inherit !important; } .glass-modal-box, .stat-glass-card, .glass-quiz-widget, .glass-quiz-widget-pc, .custom-newsletter-box, .video-glass-card, .jukebox-container, #smart-hub, #smart-hub2 { backface-visibility: hidden !important; contain: paint !important; } /* Δεσμεύει μνήμη VRAM ΜΟΝΟ όταν ο χρήστης ακουμπάει το στοιχείο (Τεράστια εξοικονόμηση RAM) */ .glass-modal-box:hover, .stat-glass-card:hover, .glass-quiz-widget:hover, .glass-quiz-widget-pc:hover, .custom-newsletter-box:hover, .video-glass-card:hover, .jukebox-container:hover, #smart-hub:hover, #smart-hub2:hover { will-change: transform, opacity, backdrop-filter !important; } @media (prefers-reduced-transparency: reduce) { .glass-modal-box, .stat-glass-card, .glass-quiz-widget, #smart-hub { backdrop-filter: none !important; background-color: rgba(240, 246, 250, 0.98) !important; } } a, button, .action-menu-btn, .playlist-btn, .sub-fab { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } *:focus:not(:focus-visible) { outline: none !important; } *:focus-visible { outline: 3px solid #1e6cff !important; outline-offset: 4px !important; border-radius: 6px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================================== PERFORMANCE FIX 3: PREVENT NESTED BLUR OVERLOAD ========================================================================== */ #sidebar-wrapper .widget, #sidebar .widget, .sidebar .widget { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ========================================================================== MASTER SENIOR TABLET TYPOGRAPHY 900px ews 1500px Dynamic Scaling: 35 tois ekato panw apo ta arxika megethi tou PC Desktop ========================================================================== */ @media screen and (min-width: 900px) and (max-width: 1500px) and (pointer: coarse) and (orientation: portrait) { /* KATHOLIKOS SYLLAVISMOS Prostasia Layout */ .post-body, .widget, .hub-links a, .slide-title, .sch-msg, .q-body p, .q-body-pc p, .stc-caption p, .fb-breakout-desc, .menu-opt, .history-content-pc, .mission-text-pc, .custom-newsletter-notice { -webkit-hyphens: auto !important; -ms-hyphens: auto !important; hyphens: auto !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* Slider Fix kai Drop Cap */ .post-body::first-letter { font-size: 2.9em !important; } /* VASIKA KEIMENA ARTHRWN (PC 16px -> 22px / PC 18px -> 25px) */ .post-body, .post-body p, .post-body span, .post-body div, .post-body li { font-size: 22px !important; line-height: 1.6 !important; } h3.post-title, .entry-title { font-size: 30px !important; line-height: 1.3 !important; } .date-outer .date-header, .date-header, h2.date-header, h2.date-header span { font-size: 18px !important; padding: 3px 8px !important; } .post-footer, .post-labels a, .post-timestamp { font-size: 15px !important; } /* KENTRIKO MENOU NAV (PC 17px -> 23px) */ nav { gap: 15px !important; padding: 14px !important; } nav a, nav > a, nav div.dropdown > button, nav .mega-menu > button, #HTML1 nav button { font-size: 28px !important; padding: 13px 8px !important; } .dropdown-content a, .sub-dropdown-content a { font-size: 22px !important; padding: 8px !important; } /* TITLOI WIDGETS KAI KOUMPIA DRASEWN (PC 22px -> 30px) */ div.widget h2, div.widget > h2.title, .slider-main-title { font-size: 25px !important; padding: 8px 15px !important; } .glass-modal-btn, .custom-read-more, .custom-newsletter-btn, .quiz-btn, .fb-breakout-btn, .action-menu-btn, .lib-fullscreen-btn, #quiz-trigger-pc button { font-size: 20px !important; padding: 14px 25px !important; } #slider-wrapper-desktop .slider-main-title { font-size: 22px !important; padding: 8px 15px !important; } /* STATISTIKA SXOLEIOU (PC 42px -> 57px / 32px -> 43px) */ .stat-icon { font-size: 48px !important; } .stat-number { font-size: 43px !important; } .stat-label { font-size: 15px !important; } /* EORTOLOGIO KAI KAIROS */ .eortologio-title { font-size: 22px !important; } .eort-icon-body { font-size: 35px !important; } .eortologio-date { font-size: 20px !important; } .c-day-temps { font-size: 18px !important; } .c-day-name { font-size: 15px !important; } .info-box, #eort-world-day, #eort-holiday, #eort-names, #eort-school { font-size: 19px !important; line-height: 1.4 !important; padding: 10px !important; } /* JUKEBOX */ .juke-title { font-size: 27px !important; } .juke-icon { font-size: 46px !important; } .playlist-btn, .extra-track-btn { font-size: 16px !important; padding: 8px 12px !important; } .juke-hint { font-size: 16px !important; } /* EXYPNES SELIDES Smart Hub */ .hub-divider { font-size: 22px !important; padding: 18px 8px !important; } .hub-links a { font-size: 20px !important; padding: 12px 14px !important; } .hub-ic { width: 51px !important; height: 51px !important; font-size: 22px !important; } #smart-hub2 .hub-links a { font-size: 20px !important; padding: 12px 14px !important; } #smart-hub2 .hub-ic { width: 51px !important; height: 51px !important; font-size: 22px !important; } #smart-hub2 .hub-divider { font-size: 22px !important; padding: 0 !important; margin-bottom: 20px !important; } /* QUIZ HISTORY NEWSLETTER FB WIKI */ .q-title, .q-title-pc, .fb-breakout-title, .custom-newsletter-title, .stc-header, .history-header-pc h3 { font-size: 24px !important; } .q-body p, .q-body-pc p, #question-display, #daily-riddle-question, .fb-breakout-desc, .custom-newsletter-subtitle, #history-fact-pc, #mission-text-pc, .mission-header-pc h4, .history-content-pc { font-size: 19px !important; line-height: 1.5 !important; } .wiki-search-input { font-size: 19px !important; } .wiki-search-btn { font-size: 18px !important; } .wiki-search-icon { font-size: 24px !important; } .featured-title, .featured-title-lib { font-size: 23px !important; } .featured-action, .featured-action-lib { font-size: 18px !important; } #recent-slider .slide-title strong { font-size: 22px !important; } .slide-desc { font-size: 19px !important; } .alert-bar-content { font-size: 18px !important; } /* TICKER EIDISEWN KAI INLINE OVERRIDES */ #unique-top-ticker-outer .unique-top-ticker-link { font-size: 24px !important; } .stats-notice { font-size: 19px !important; } .bouncing-secret { font-size: 19px !important; line-height: 1.5 !important; } html body .video-glass-title { font-size: 19px !important; } #custom-post-slider-desktop .slide-title { font-size: 17px !important; line-height: 1.4 !important; padding: 5px 8px !important; } .custom-newsletter-notice { font-size: 17px !important; line-height: 1.5 !important; padding: 14px 18px !important; } #hub-weather-container + div { font-size: 17px !important; line-height: 1.4 !important; margin-top: 15px !important; } .history-hint-pc { font-size: 17px !important; margin-top: 5px !important; } #daily-riddle-answer + p { font-size: 17px !important; margin-top: 18px !important; } /* LIVE WRARIO KAI GLASS MODALS */ .bell-main { font-size: 27px !important; line-height: 1.4 !important; } .bell-sub { font-size: 19px !important; } .tracker-title { font-size: 1.2em !important; } .glass-bell-tracker.active { transform: scale(1.35) !important; z-index: 9999 !important; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } .glass-modal-box { max-width: 500px !important; padding: 40px 25px !important; } .glass-modal-icon { font-size: 68px !important; margin-bottom: 20px !important; } .glass-modal-text { font-size: 22px !important; line-height: 1.5 !important; margin-bottom: 25px !important; } .glass-modal-close { font-size: 38px !important; top: 15px !important; right: 25px !important; } /* CARDS FLIP HOLIDAY KAI CHRONOCAPSULA */ #desktop-flip-wrapper .pulsating-lamp { font-size: 61px !important; } #desktop-flip-wrapper .flip-front h3 { font-size: 25px !important; line-height: 1.4 !important; } #desktop-flip-wrapper .flip-front p { font-size: 19px !important; } #fact-text-desk { font-size: 23px !important; line-height: 1.5 !important; } #desktop-flip-wrapper .flip-back p { font-size: 17px !important; } .holiday-icon { font-size: 47px !important; } .holiday-text { font-size: 24px !important; } .battery-box { width: 243px !important; height: 38px !important; } .battery-text { font-size: 18px !important; margin-top: 12px !important; } .click-hint { font-size: 19px !important; margin-top: 14px !important; } .secret-message { font-size: 25px !important; line-height: 1.5 !important; padding: 25px 20px !important; } .stc-caption p { font-size: 18px !important; line-height: 1.4 !important; } .stc-header { font-size: 24px !important; } .stc-caption h4 { font-size: 24px !important; } /* ARXEIO THIKI KAI HMEROLOGIO */ #BlogArchive1 .archivedate, #BlogArchive1 .archivedate a { font-size: 19px !important; } #BlogArchive1 ul.posts li a { font-size: 17px !important; line-height: 1.4 !important; } .post-count { font-size: 14px !important; } .zippy { font-size: 19px !important; } #monthLabel { font-size: 23px !important; } .fc-col-header-cell-cushion { font-size: 19px !important; } .fc-daygrid-day-number { font-size: 21px !important; padding: 6px !important; } .fc-day-today .fc-daygrid-day-number { width: 35px !important; height: 35px !important; line-height: 29px !important; font-size: 21px !important; } /* SXOLIA KAI SMART FEEDBACK Kardoules */ .comments h4 { font-size: 30px !important; } .comment-body p { font-size: 21px !important; line-height: 1.6 !important; } .comment-author { font-size: 19px !important; } .comment-timestamp { font-size: 17px !important; } .smart-feedback-btn { padding: 6px 12px !important; font-size: 25px !important; } .smart-feedback-btn span:first-child { font-size: 33px !important; } /* SMART GLOSSARY KAI LIGHTBOX Media Viewer */ .glossary-title { font-size: 22px !important; } #smart-glossary-tooltip { font-size: 19px !important; max-width: 450px !important; padding: 18px 25px !important; } .my-custom-lightbox-close { font-size: 61px !important; top: 20px !important; right: 30px !important; } .my-custom-lightbox-prev, .my-custom-lightbox-next { font-size: 54px !important; padding: 25px !important; } .my-custom-lightbox-counter { font-size: 22px !important; top: 30px !important; left: 30px !important; } #lightbox-download { font-size: 52px !important; top: 30px !important; left: 40px !important; } /* --- ΓΡΙΦΟΣ ΤΗΣ ΗΜΕΡΑΣ (+35% Scaling) --- */ .blur-box { font-size: 19px !important; padding: 28px !important; max-width: 450px !important; } .blur-answer { font-size: 25px !important; margin-top: 20px !important; /* Έδωσα λίγο παραπάνω αέρα από τα 15px */ } .dropdown.useful .dropdown-content { right: -30px !important; left: auto !important; } .dropdown.actions .dropdown-content { left: -100px !important; } }