/* Theme Name: ORTEM Hellas Theme URI: https://www.ortemhellas.gr Author: ORTEM Hellas A.E. Author URI: https://www.ortemhellas.gr Description: Custom dark theme για την ORTEM Hellas — Social Robots at their finest! One-page αρχική με hero video, marquee, scroll-reveal animations και πλήρη υποστήριξη WooCommerce. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ortem-hellas */ /* ---------- ΠΑΛΕΤΑ ---------- Σε παρένθεση ο λόγος αντίθεσης (WCAG) πάνω στο --bg. Το φόντο βάθυνε και τα ανοιχτά στοιχεία ανέβηκαν, ώστε κάρτες/γραμμές/κείμενα να ξεχωρίζουν καθαρά αντί να «λιώνουν» μέσα στο φόντο (πριν: panel 1.15:1, γραμμές 1.57:1). */ :root{ --bg:#26363b; /* βασικό φόντο — βαθύτερο slate */ --bg-2:#1b282c; /* μπάρες/footer — ακόμη βαθύτερο, ξεχωρίζει από το --bg */ --rail:#0a1013; /* το ΒΑΘΥΤΕΡΟ της παλέτας — πλαϊνή μπάρα & τρύπες via */ --panel:#3b5259; /* κάρτες (1.52:1 πάνω στο --bg — ήταν 1.15:1) */ --line:#5f7d87; /* περιγράμματα (2.85:1 — ήταν 1.57:1) */ --ink:#f4f9fa; /* βασικό κείμενο (16.9:1) */ --muted:#c9d6d9; /* δευτερεύον κείμενο (8.4:1 — ήταν 5.0:1) */ --accent:#5fd0c6; /* τιρκουάζ (6.8:1 — ήταν 3.5:1, κάτω από το όριο AA) */ --accent-dim:#3f9f97; --cyan:#7ce6db; --brand-deep:#0c313d; /* σκούρο κείμενο πάνω σε λευκό (13.4:1) */ --ease: cubic-bezier(.16,.84,.44,1); /* Πλάτος πλαϊνής μπάρας. Μία τιμή — τη διαβάζουν σώμα, μπάρα, λογότυπο, διαδρομή πλακέτας και συρτάρι. Στα 1920px μένει 120px (ό,τι ίσχυε), σε 2K ανεβαίνει, ώστε η μπάρα να μη μικραίνει οπτικά σε μεγάλη οθόνη. */ --rail-w: clamp(120px, 6.2vw, 158px); /* ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ — αλλάζουν από Εμφάνιση → Προσαρμογή → Γραμματοσειρές. Οι τιμές εδώ είναι το προεπιλεγμένο· ο Προσαρμογέας τις αντικαθιστά με inline κανόνα. Όλο το θέμα χρησιμοποιεί ΜΟΝΟ αυτές τις δύο μεταβλητές, οπότε μία αλλαγή περνάει παντού. */ /* Το TASA Orbiter δεν έχει ελληνικά γλυφά (μόνο latin + latin-ext), οπότε το Manrope μένει ΥΠΟΧΡΕΩΤΙΚΑ δεύτερο: τα ελληνικά πέφτουν εκεί. Μην το βγάλεις. */ --font-display: 'TASA Orbiter', 'Manrope', sans-serif; /* τίτλοι, κουμπιά, μενού */ --font-body: 'Inter', sans-serif; /* τρεχούμενο κείμενο */ } *{box-sizing:border-box;} /* Το overflow-x:hidden ΠΡΕΠΕΙ να είναι και στο , όχι μόνο στο : σκέτο στο body δεν εμποδίζει την κύλιση του παραθύρου. Μετρημένο σε οθόνη 390px, το documentElement.scrollWidth ήταν 451px — δηλαδή 61px οριζόντια κύλιση — και μηδενίστηκε μόλις μπήκε εδώ. Προστατεύει και από πρόσθετα (το banner cookies έβγαινε κι αυτό στα 451px). */ html{scroll-behavior:smooth; overflow-x:hidden;} body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Ο custom δείκτης ζωγραφίζεται από JS· χωρίς JS πρέπει να μένει ο κανονικός. */ .oa-js body{cursor:none;} h1,h2,h3{font-family:var(--font-display); margin:0; letter-spacing:-.02em;} p{line-height:1.75; color:var(--muted); margin:0 0 14px;} a{color:inherit; text-decoration:none;} ul{margin:0; padding:0; list-style:none;} img,video{max-width:100%; display:block;} button{font-family:inherit;} ::selection{background:var(--accent); color:#08191e;} .oa-js button, .oa-js a, .oa-js .cursor-pointer{cursor:none;} /* ---------- CUSTOM CURSOR ---------- Εμφανίζεται μόνο με ενεργή JS (.oa-js) και μόνο σε ποντίκι/desktop. */ .cursor-dot, .cursor-ring{display:none;} .cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; will-change:transform; transform:translate(-100px,-100px); } @media (min-width:881px) and (min-height:521px){ .oa-js .cursor-dot, .oa-js .cursor-ring{display:block;} } .cursor-dot{ width:13px; height:13px; background:#7ff2e6; box-shadow:0 0 8px 2px rgba(98,210,200,.9), 0 0 18px 5px rgba(98,210,200,.5); transition:width .2s var(--ease), height .2s var(--ease); } .cursor-ring{ width:40px; height:40px; border:1.5px solid #62d2c8; box-shadow:0 0 12px rgba(98,210,200,.35); transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease); } .cursor-ring.hover{ width:66px; height:66px; background:rgba(98,210,200,.14); } @media (max-width:880px), (max-height:520px){ .oa-js body, .oa-js a, .oa-js button{cursor:auto;} } .wrap{max-width:1200px; margin:0 auto; padding:0 32px;} /* ---------- NAV ---------- */ header.nav{ position:fixed; top:0; left:0; right:0; z-index:65; transition:background .4s var(--ease), border-color .4s var(--ease); border-bottom:1px solid transparent; } header.nav.solid{ background:rgba(38,54,59,.9); backdrop-filter:blur(14px); border-color:var(--line); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:20px 32px; max-width:1200px; margin:0 auto; } .logo-mark{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:19px; letter-spacing:.02em; font-family:var(--font-display); opacity:0; transform:translateY(-10px); animation:dropIn .7s var(--ease) .1s forwards; } .logo-mark .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px 2px rgba(95,208,198,.6);} .logo-brand{display:inline-flex; align-items:center; opacity:0; transform:translateY(-10px); animation:dropIn .7s var(--ease) .1s forwards;} .logo-brand img{height:48px; width:auto; display:block;} @media (max-width:880px){ .logo-brand img{height:40px;} } nav.links{display:flex;} nav.links ul{display:flex; gap:30px; margin:0; padding:0; list-style:none;} nav.links a{ color:var(--muted); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; position:relative; padding:6px 0; display:inline-block; opacity:0; transform:translateY(-10px); transition:color .3s var(--ease); } nav.links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent); transition:width .3s var(--ease); } nav.links a:hover{color:#fff;} nav.links a:hover::after{width:100%;} nav.links li.current-menu-item > a{color:#fff;} nav.links li.current-menu-item > a::after{width:100%;} @keyframes dropIn{ to{opacity:1; transform:translateY(0);} } /* ---------- SIDE RAIL (κάθετη μπάρα αριστερά) ---------- */ @media (min-width:881px) and (min-height:521px){ body{ padding-left:var(--rail-w); } } .side-rail{ position:fixed; top:0; left:0; bottom:0; z-index:65; width:var(--rail-w); height:100vh; height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:96px 0 40px; overflow:hidden; /* Το βαθύτερο χρώμα της παλέτας: η μπάρα είναι το σημείο αναφοράς απ' όπου ξεκινά το κύκλωμα, οπότε πρέπει να διαβάζεται ως η πιο «βαθιά» επιφάνεια. */ background:var(--rail); border-right:1px solid var(--line); box-shadow:inset -1px 0 0 rgba(150,210,215,.10), 8px 0 30px -8px rgba(0,0,0,.6); } body.admin-bar .side-rail{top:32px;} /* Το ύψος ΜΟΝΟ στην κάθετη μπάρα: χωρίς το φράγμα, η ειδικότητα του body.admin-bar νικούσε το height:auto του τηλεφώνου και η οριζόντια μπάρα έπιανε όλη την οθόνη σε συνδεδεμένο διαχειριστή. */ @media (min-width:881px) and (min-height:521px){ body.admin-bar .side-rail{height:calc(100vh - 32px); height:calc(100dvh - 32px);} } .side-rail::-webkit-scrollbar{width:0; display:none;} /* ---------- ΔΙΑΔΡΟΜΗ ΠΛΑΚΕΤΑΣ ΣΤΗ ΜΠΑΡΑ (PCB trace) ---------- Αντικατέστησε την οργανική «ρωγμή». Γλώσσα σχεδίασης: χαλκός σε πλακέτα — ευθείες διαδρομές, τετράγωνες απολήξεις, via σε κάθε στροφή. Το ρεύμα ακολουθεί το scroll και ΦΤΑΝΕΙ στο κάτω pad στο τέρμα της σελίδας. */ .side-rail-logo, .side-rail-bottom{z-index:1;} .nav-toggle{position:relative; z-index:1;} /* Ζώνη αποκλεισμού: ο χαλκός δεν περνά πίσω από το χάμπουργκερ, όπως δεν περνά trace κάτω από εξάρτημα. Σβήνει απαλά αντί να κόβεται απότομα, και πιάνει όλο το εύρος x της διαδρομής σε κάθε ύψος παραθύρου. */ @media (min-width:881px) and (min-height:521px){ .nav-toggle::before{ content:''; position:absolute; left:50%; top:50%; pointer-events:none; width:calc(var(--rail-w) * .95); height:96px; transform:translate(-50%,-50%); background:radial-gradient(50% 50% at 50% 50%, #0a1013 42%, rgba(10,16,19,.94) 63%, rgba(10,16,19,0) 100%); } } /* Το ΚΟΥΤΙ ορίζει τα άκρα, όχι μάσκα. Το λογότυπο τελειώνει στα 24px + το ύψος του, που είναι .883 × .352 = .311 του πλάτους της μπάρας — γι' αυτό το top είναι τύπος και όχι σταθερό 61px: αλλιώς σε 2K το λογότυπο μεγάλωνε και η διαδρομή ξεκινούσε από μέσα του. Ο διακόπτης γλώσσας ξεκινά 30+54=84px από κάτω. Με αυτά τα insets το y=0 του viewBox ΕΙΝΑΙ το ORTEM και το y=1000 ΕΙΝΑΙ το ΓΛΩΣΣΑ — σε κάθε ύψος οθόνης. Η παλιά μάσκα μετρούσε σε px ενώ η διαδρομή κλιμακωνόταν με το ύψος, οπότε έκοβε αλλού σε κάθε παράθυρο και το ρεύμα «ξεκινούσε» στη μέση. */ .rail-crack{position:absolute; left:0; right:0; top:calc(24px + var(--rail-w) * .311); bottom:84px; z-index:0; pointer-events:none; overflow:visible; /* Fade στο load, μετά το λογότυπο (.1s) και τον διακόπτη (.25s): η πλακέτα «τροφοδοτείται» τελευταία. ΠΡΟΣΟΧΗ στο «backwards» αντί για «forwards»: η βασική opacity μένει 1 και το 0 ζει ΜΟΝΟ μέσα στο keyframe. Με opacity:0 + forwards, αν το animation δεν έτρεχε ποτέ (μπλοκαρισμένο, σφάλμα, παλιό engine) η πλακέτα έμενε μόνιμα αόρατη — ίδια λογική με το failsafe του .oa-js στο header.php. */ animation:railFade 1.1s var(--ease) .35s backwards;} @keyframes railFade{ from{opacity:0;} to{opacity:1;} } .rail-crack svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible;} .rail-crack .rc-h{display:none;} .rc-charge-h{stroke:url(#rcGradH);} /* Χαλκός χωρίς ρεύμα: σβηστός, τετράγωνες απολήξεις όπως σε πραγματικό trace. */ .rc-line, .rc-stub{fill:none; stroke:rgba(140,190,190,.22); stroke-width:2; stroke-linecap:butt; stroke-linejoin:miter;} .rc-stub{stroke-width:1.6;} /* Το ρεύμα: γεμίζει από πάνω προς τα κάτω με το scroll. */ .rc-charge{fill:none; stroke:url(#rcGrad); stroke-width:2.4; stroke-linecap:butt; stroke-linejoin:miter; filter:drop-shadow(0 0 5px rgba(95,208,198,.85)) drop-shadow(0 0 14px rgba(95,208,198,.45)); /* ΧΩΡΙΣ dashoffset. Με pathLength="1", ένα dash μήκους --scroll ξεκινά πάντα στη θέση 0 της διαδρομής — δηλαδή ΣΤΗΝ ΚΟΡΥΦΗ — και το κενό (2) είναι μεγαλύτερο από ό,τι απομένει, οπότε δεν ξαναεμφανίζεται. Το προηγούμενο «dasharray:1 1 + dashoffset» εξαρτιόταν από το αν ο engine μετράει (p+offset) ή (p−offset): οι δύο συμβάσεις δίνουν ΑΝΤΙΘΕΤΗ φορά, και στην πράξη γέμιζε από κάτω προς τα πάνω. Εδώ δεν υπάρχει offset να αντιστραφεί. */ stroke-dasharray:var(--scroll, 0) 2; stroke-dashoffset:0; transition:stroke-dasharray .1s linear;} /* Via: δακτύλιος με σκούρο κέντρο, όπως τρύπα μεταλλωμένη. Ανάβει όταν το ρεύμα περάσει από πάνω του. */ .rc-via{fill:var(--rail); stroke:var(--cyan); stroke-width:2; transition:stroke .2s linear, filter .2s linear; stroke-opacity:clamp(.2, calc(.2 + (var(--scroll,0) - var(--t,0)) * 12), 1);} .rc-via[style*="--t"]{filter:drop-shadow(0 0 calc(6px * clamp(0, calc((var(--scroll,0) - var(--t,0)) * 12), 1)) var(--cyan));} /* Pad στο τέλος των stub: γεμάτος χαλκός. */ .rc-pad{fill:var(--cyan); transition:opacity .2s linear; opacity:clamp(.18, calc(.18 + (var(--scroll,0) - var(--t,0)) * 12), 1);} /* Pad αρχής/τέλους της κύριας διαδρομής — λίγο μεγαλύτερα. */ .rc-end{fill:var(--rail); stroke:var(--cyan); stroke-width:2.4; stroke-opacity:clamp(.25, calc(.25 + (var(--scroll,0) - var(--t,0)) * 14), 1);} /* ΤΗΛΕΦΩΝΟ: η μπάρα γίνεται οριζόντια, οπότε ο χαλκός γίνεται λωρίδα κατά μήκος της κάτω ακμής της. Το ρεύμα γεμίζει αριστερά→δεξιά με το ίδιο --scroll. */ @media (max-width:880px), (max-height:520px){ /* Η πλακέτα πιάνει ΟΛΗ τη μπάρα, όχι λωρίδα 22px στον πάτο: τα τρία χειριστήρια κάθονται πάνω της σαν εξαρτήματα και ο χαλκός περνά απέναντι στα κενά ανάμεσά τους. */ .rail-crack{top:0; bottom:0; left:0; right:0; height:auto;} .rail-crack .rc-v{display:none;} .rail-crack .rc-h{display:block;} } @media (prefers-reduced-motion: reduce){ .rc-charge{transition:none;} .rail-crack{opacity:1; animation:none;} } .side-rail-logo{ position:absolute; top:24px; left:0; right:0; display:flex; align-items:center; justify-content:center; flex:none; opacity:0; animation:dropIn .7s var(--ease) .1s forwards; } .side-rail-logo img{width:calc(var(--rail-w) * .883); height:auto; display:block;} .nav-toggle{flex:none;} .side-rail-bottom{position:absolute; bottom:30px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:12px;} .side-rail-lang{display:flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none; opacity:0; animation:dropIn .7s var(--ease) .25s forwards;} .side-rail-lang-flag{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; font-size:16px; line-height:1; transition:background .3s var(--ease),border-color .3s var(--ease);} .side-rail-lang-label{font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:color .3s var(--ease);} .side-rail-lang:hover .side-rail-lang-flag{background:var(--accent); border-color:var(--accent);} .side-rail-lang:hover .side-rail-lang-label{color:var(--accent);} body.admin-bar .side-rail{top:32px;} @media screen and (max-width:782px){ body.admin-bar .side-rail{top:46px; height:auto;} } @media (max-width:880px), (max-height:520px){ body{padding-left:0;} .side-rail{ flex-direction:row; width:100%; height:auto; left:0; right:0; bottom:auto; /* Συμμετρικό padding και ελάχιστο ύψος 96px: τα χειριστήρια πιάνουν τη μεσαία ζώνη (27-73%) και μένουν δύο διάδρομοι 26px για τον χαλκό. */ padding:26px 18px 26px; min-height:96px; justify-content:space-between; align-items:center; gap:12px; /* Ίδιο βαθύ χρώμα με το desktop — εδώ είχε μείνει --bg-2, οπότε στο τηλέφωνο η μπάρα δεν ξεχώριζε από το φόντο της σελίδας. */ background:var(--rail); border-right:none; border-bottom:1px solid var(--line); } .side-rail-bottom{position:static; flex-direction:row; align-items:center; gap:14px; order:1; margin-left:0;} .side-rail-lang{flex-direction:row; gap:7px;} /* Κεντράρισμα στη ΓΡΑΜΜΑ ΠΕΡΙΕΧΟΜΕΝΟΥ, όχι στο κουτί: το top:50% μετρούσε και το padding-bottom των 32px της πλακέτας, οπότε το λογότυπο καθόταν 10px χαμηλότερα από τη σημαία και το χάμπουργκερ. */ .side-rail-logo{order:2; position:absolute; left:50%; right:auto; top:26px; bottom:26px; margin-left:0; width:auto; height:auto; border:none; background:none; box-shadow:none; transform:translateX(-50%); animation:none; opacity:1;} .side-rail-logo img{width:auto; height:34px;} .nav-toggle{order:3;} } /* ---------- MOBILE NAV (προσθήκη για WP) ---------- */ .nav-toggle{ display:flex; background:none; border:none; padding:8px; flex-direction:column; gap:6px; z-index:62; } .nav-toggle span{ position:relative; display:block; width:26px; height:2px; background:#fff; border-radius:2px; transition:transform .35s var(--ease), opacity .3s var(--ease); } .nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg);} .nav-toggle.open span:nth-child(2){opacity:0;} .nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} .menu-backdrop{ position:fixed; inset:0; background:rgba(8,12,14,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; transition:opacity .4s var(--ease); z-index:59; } .menu-backdrop.open{opacity:1;} /* ---------- ΜΕΝΟΥ: ΕΥΡΕΤΗΡΙΟ ΣΕ ΠΛΑΚΕΤΑ ---------- Ίδια επιφάνεια με τη μπάρα (--bg-2), ώστε να διαβάζεται ως συνέχειά της. Κάθε γραμμή είναι μια διαδρομή χαλκού με via στην αρχή· το via ανάβει και η διαδρομή «ρευματίζεται» από αριστερά στο hover. Χωρίς αρίθμηση: το μενού δεν είναι ακολουθία, οπότε το 01/02/03 διακοσμούσε αντί να πληροφορεί. */ .mobile-menu{ position:fixed; top:0; left:var(--rail-w); bottom:0; right:auto; z-index:60; width:min(clamp(560px, 40vw, 820px), calc(100vw - var(--rail-w))); height:100%; background:var(--rail); border-right:1px solid var(--line); transform:translateX(-101%); transition:transform .5s var(--ease); overflow-y:auto; box-shadow:40px 0 90px rgba(0,0,0,.55); /* ΟΡΑΤΗ μπάρα κύλισης: κρυμμένη, σε οθόνη 1080p το μενού έκοβε στο «Κατάστημα» χωρίς καμία ένδειξη ότι συνεχίζει. */ scrollbar-width:thin; scrollbar-color:var(--line) transparent; } .mobile-menu::-webkit-scrollbar{width:6px;} .mobile-menu::-webkit-scrollbar-track{background:transparent;} .mobile-menu::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;} .mobile-menu::-webkit-scrollbar-thumb:hover{background:var(--accent);} .mobile-menu.open{transform:translateX(0);} .mobile-menu-close{ position:absolute; top:30px; right:30px; z-index:2; width:46px; height:46px; border-radius:0; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .mobile-menu-close:hover{border-color:var(--accent); color:var(--accent); background:rgba(95,208,198,.08);} .mobile-menu-inner{padding:clamp(56px, 7vh, 104px) clamp(30px, 4vw, 56px) clamp(30px, 4.4vh, 60px); min-height:100%; box-sizing:border-box; display:flex; flex-direction:column;} .mobile-menu-logo{width:auto; height:clamp(24px, 2.9vh, 38px); display:block; align-self:flex-start; margin-bottom:clamp(14px, 3.6vh, 56px); opacity:.9;} .mobile-menu ul{display:flex; flex-direction:column; gap:0; list-style:none; margin:0; padding:0;} .mobile-menu > .mobile-menu-inner > .menu{width:100%; text-align:left;} /* Η γραμμή-διαδρομή κάτω από κάθε στοιχείο. */ .mobile-menu > .mobile-menu-inner > .menu > li{position:relative; border-bottom:1px solid rgba(140,190,190,.16);} .mobile-menu > .mobile-menu-inner > .menu > li:first-child{border-top:1px solid rgba(140,190,190,.16);} /* Το «ρεύμα» που τρέχει πάνω στη γραμμή στο hover. */ .mobile-menu > .mobile-menu-inner > .menu > li::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--cyan); box-shadow:0 0 8px rgba(95,208,198,.8); transform:scaleX(0); transform-origin:left center; transition:transform .45s var(--ease); } .mobile-menu > .mobile-menu-inner > .menu > li:hover::after{transform:scaleX(1);} .mobile-menu > .mobile-menu-inner > .menu > li > a{ position:relative; display:flex; align-items:center; gap:22px; font-family:var(--font-display); /* Κλίμακα 32/24/20 με ελάχιστα 22/18/16 (ήταν 28/20/18 με 18/14/13): το υπομενού διαβαζόταν σαν ψιλά γράμματα. Το μέτρο είναι το ΥΨΟΣ (vh): με vw το μενού είχε το ίδιο ύψος σε 1080p και σε 2K, οπότε στη μικρή οθόνη δεν χωρούσε. Σε 768px το μενού θέλει πλέον περισσότερη κύλιση. */ font-size:clamp(22px, 2.35vh, 32px); font-weight:800; line-height:1.15; color:#fff; letter-spacing:-.015em; padding:clamp(8px, 1.85vh, 30px) 0; transition:color .3s var(--ease), transform .35s var(--ease); } /* Via: δακτύλιος που γεμίζει στο hover — ίδιο λεξιλόγιο με τη μπάρα. */ .mobile-menu > .mobile-menu-inner > .menu > li > a::before{ content:''; flex:none; width:11px; height:11px; border-radius:50%; border:2px solid var(--line); background:transparent; transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } /* ΤΙΤΛΟΙ ΟΜΑΔΑΣ: ίδια τυπογραφία με τα υπόλοιπα, αλλά χωρίς σύνδεσμο. Παίρνουν default cursor ώστε να μη «λένε ψέματα» ότι πατιούνται. */ .mobile-menu > .mobile-menu-inner > .menu > li > .menu-title{ position:relative; display:flex; align-items:center; gap:22px; font-family:var(--font-display); font-size:clamp(22px, 2.35vh, 32px); font-weight:800; line-height:1.15; color:#fff; letter-spacing:-.015em; cursor:default; padding:30px 0; transition:color .3s var(--ease); } .mobile-menu > .mobile-menu-inner > .menu > li > .menu-title::before{ content:''; flex:none; width:11px; height:11px; border-radius:50%; border:2px solid var(--line); background:transparent; transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } /* Ο τίτλος ανάβει όταν ο κέρσορας είναι ΟΠΟΥΔΗΠΟΤΕ μέσα στη λίστα του — όχι μόνο πάνω στις ίδιες τις λέξεις. Το :hover στο

πιάνει και το υπομενού. */ .mobile-menu > .mobile-menu-inner > .menu > li:hover > .menu-title{color:var(--cyan);} .mobile-menu > .mobile-menu-inner > .menu > li:hover > .menu-title::before{ border-color:var(--cyan); background:var(--cyan); box-shadow:0 0 12px var(--cyan); } .mobile-menu .sub-menu .menu-title{color:#fff; font-weight:700; cursor:default;} .mobile-menu .sub-menu li:hover > .menu-title{color:var(--cyan);} .mobile-menu > .mobile-menu-inner > .menu > li > a:hover{color:var(--cyan); transform:translateX(10px);} .mobile-menu > .mobile-menu-inner > .menu > li > a:hover::before{ border-color:var(--cyan); background:var(--cyan); box-shadow:0 0 12px var(--cyan); } .mobile-menu > .mobile-menu-inner > .menu > li.current-menu-item > a{color:var(--cyan);} .mobile-menu > .mobile-menu-inner > .menu > li.current-menu-item > a::before{border-color:var(--cyan); background:var(--cyan);} /* Είσοδος με κλιμάκωση — μόνο όταν ανοίγει το πάνελ. */ .mobile-menu > .mobile-menu-inner > .menu > li{opacity:0; transform:translateX(-18px); transition:opacity .5s var(--ease), transform .5s var(--ease);} .mobile-menu.open > .mobile-menu-inner > .menu > li{opacity:1; transform:none;} .mobile-menu.open > .mobile-menu-inner > .menu > li:nth-child(1){transition-delay:.10s;} .mobile-menu.open > .mobile-menu-inner > .menu > li:nth-child(2){transition-delay:.16s;} .mobile-menu.open > .mobile-menu-inner > .menu > li:nth-child(3){transition-delay:.22s;} .mobile-menu.open > .mobile-menu-inner > .menu > li:nth-child(4){transition-delay:.28s;} .mobile-menu.open > .mobile-menu-inner > .menu > li:nth-child(5){transition-delay:.34s;} .mobile-menu.open > .mobile-menu-inner > .menu > li:nth-child(6){transition-delay:.40s;} .mobile-menu.open > .mobile-menu-inner > .menu > li:nth-child(n+7){transition-delay:.46s;} @media (max-width:880px), (max-height:520px){ .mobile-menu{left:0; width:100vw;} .mobile-menu-inner{padding:96px 26px 48px;} .mobile-menu > .mobile-menu-inner > .menu > li > a{font-size:clamp(24px, 5.4vw, 28px); padding:24px 0; gap:16px;} } @media (prefers-reduced-motion: reduce){ .mobile-menu > .mobile-menu-inner > .menu > li{opacity:1; transform:none; transition:none;} } .mobile-menu > .mobile-menu-inner > .menu > li > a:hover::before{opacity:1;} /* Υπομενού: δίαυλος με λήψεις. Η κάθετη γραμμή είναι η μητρική διαδρομή, κάθε στοιχείο παίρνει ένα μικρό stub που τερματίζει σε pad — έτσι δουλεύει ένα bus σε πλακέτα. Αντικατέστησε την παύλα, που δεν σήμαινε τίποτα. */ .mobile-menu .sub-menu{ list-style:none; margin:clamp(9px, 1.2vh, 16px) 0 clamp(11px, 1.7vh, 26px) 5px; padding:2px 0 2px 20px; display:flex; flex-direction:column; gap:clamp(7px, 1.1vh, 18px); border-left:1px solid rgba(140,190,190,.20); } .mobile-menu .sub-menu a{ position:relative; padding-left:6px; font-size:clamp(18px, 1.75vh, 24px); font-weight:600; color:var(--muted); transition:color .25s var(--ease), padding-left .25s var(--ease); } .mobile-menu .sub-menu a::before{ content:''; position:absolute; left:-20px; top:.66em; width:13px; height:1px; background:rgba(140,190,190,.34); transition:background .25s var(--ease); } .mobile-menu .sub-menu a::after{ content:''; position:absolute; left:-9px; top:.66em; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--line); transition:background .25s var(--ease), box-shadow .25s var(--ease); } .mobile-menu .sub-menu a:hover{color:#fff; padding-left:10px;} .mobile-menu .sub-menu a:hover::before{background:var(--cyan);} .mobile-menu .sub-menu a:hover::after{background:var(--cyan); box-shadow:0 0 10px var(--cyan);} .mobile-menu .sub-menu .sub-menu{margin:clamp(9px, 1.2vh, 16px) 0 6px 3px; padding-left:18px;} .mobile-menu .sub-menu .sub-menu a{font-size:clamp(16px, 1.55vh, 20px);} body.menu-open{overflow:hidden;} @media (max-width:880px), (max-height:520px){ /* πλήρης οθόνη κάτω από τη μπάρα, χωρίς το διπλό λογότυπο */ .mobile-menu{width:100%; max-width:none; left:0; border-right:none; box-shadow:none;} .mobile-menu-logo{display:none;} .mobile-menu-inner{padding:82px 26px 40px;} body.admin-bar .mobile-menu-inner{padding-top:116px;} .mobile-menu > .mobile-menu-inner > .menu > li > a{font-size:27px; padding:14px 0 14px 18px;} .mobile-menu .sub-menu a{font-size:20px;} } @media (max-width:782px){ body.admin-bar .mobile-menu-inner{padding-top:122px;} } /* ---------- HERO ---------- */ .hero{ position:relative; height:100vh; min-height:680px; overflow:hidden; display:flex; align-items:center; } .hero .bg{position:absolute; inset:0; overflow:hidden;} .hero .bg video, .hero .bg img{width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:grayscale(.25) brightness(.55);} .hero::after{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 20% 30%, rgba(95,208,198,.12), transparent 55%), linear-gradient(180deg, rgba(15,24,27,.58) 0%, rgba(24,36,40,.42) 40%, rgba(38,54,59,.97) 100%); } .hero-content{position:relative; z-index:2; max-width:1200px; margin:0 auto; width:100%; padding:0 32px;} .eyebrow{ display:flex; align-items:center; gap:10px; color:var(--accent); font-size:13.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; margin-bottom:22px; opacity:0; transform:translateY(16px); animation:riseIn .8s var(--ease) .5s forwards; } .eyebrow::before{content:''; width:26px; height:1px; background:var(--accent);} .hero h1{ color:#fff; font-size:clamp(42px,7vw,84px); font-weight:800; line-height:.98; opacity:0; transform:translateY(30px); animation:riseIn .9s var(--ease) .65s forwards; } /* Τιρκουάζ ΜΟΝΟ το του markup («HELLAS»). Το :not(.oa-w) χρειάζεται επειδή η split() στο ortem-anim.js τυλίγει κάθε λέξη σε , οπότε χωρίς αυτό έβαφε τιρκουάζ και το «ORTEM» μόλις έτρεχε το animation. */ .hero h1 span:not(.oa-w){color:var(--accent);} .hero-title-oneline{white-space:nowrap; font-size:clamp(28px,9vw,90px); letter-spacing:-.03em;} .hero .tagline{ color:var(--muted); font-size:20px; font-weight:500; margin-top:22px; max-width:480px; opacity:0; transform:translateY(22px); animation:riseIn .9s var(--ease) .82s forwards; } .hero .cta-row{margin-top:34px; opacity:0; animation:riseIn .9s var(--ease) 1s forwards;} .hero .scroll-cue{ position:absolute; left:32px; bottom:36px; z-index:2; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:0; animation:riseIn .8s var(--ease) 1.2s forwards; } .scroll-cue .line{width:1px; height:40px; background:var(--line); position:relative; overflow:hidden;} .scroll-cue .line::after{ content:''; position:absolute; top:0; left:0; width:1px; height:40px; background:var(--accent); animation:scrollLine 2s ease-in-out infinite; } @keyframes scrollLine{ from{transform:translateY(-40px);} to{transform:translateY(40px);} } @keyframes riseIn{ to{opacity:1; transform:translateY(0);} } /* ---------- MARQUEE ---------- */ .marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; overflow:hidden; background:var(--bg-2); white-space:nowrap; } .marquee-track{display:inline-flex; animation:marquee 22s linear infinite;} .marquee-track span{ font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:0 28px; display:inline-flex; align-items:center; gap:28px; } .marquee-track span::after{content:'✷'; color:var(--accent); font-size:14px;} @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ---------- SECTION LABEL ---------- */ .section-label{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .section-label .num{ font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--accent); } .section-label .txt{ font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); } .section-label .rule{flex:1; height:1px; background:var(--line);} /* Ο ρυθμός των ενοτήτων ακολουθεί το ύψος του παραθύρου. */ section{padding:clamp(56px, 7.4vh, 112px) 0;} /* ---------- REVEAL ---------- Η κρυφή αρχική κατάσταση ισχύει ΜΟΝΟ με .oa-js στο (βλ. header.php). Χωρίς JavaScript το περιεχόμενο είναι εξ αρχής ορατό. */ /* Το will-change ΜΟΝΟ όσο το στοιχείο δεν έχει αποκαλυφθεί ακόμη. Κάθε will-change δεσμεύει μόνιμο GPU layer· μετρήθηκαν 53 ενεργά στην αρχική, που κρατούσαν μνήμη GPU και επιβάρυναν τη σύνθεση για πάντα. Με το :not(.in) το layer απελευθερώνεται μόλις τελειώσει το animation. */ .oa-js .reveal{opacity:0; transform:perspective(1300px) rotateX(-36deg) translateY(60px); transform-origin:50% 100%; transition:opacity 1.15s var(--ease), transform 1.15s var(--ease); backface-visibility:hidden;} .oa-js .reveal:not(.in){will-change:opacity, transform;} .oa-js .reveal.in{opacity:1; transform:perspective(1300px) rotateX(0deg) translateY(0);} .oa-js .reveal.d1{transition-delay:.12s;} .oa-js .reveal.d2{transition-delay:.24s;} .oa-js .reveal.d3{transition-delay:.36s;} @media (prefers-reduced-motion: reduce){ .reveal, .oa-js .reveal{opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;} } /* ---------- ΣΥΡΟΜΕΝΕΣ ΠΟΡΤΕΣ: οι μπάρες «ενώνονται» με τιρκουάζ φώτα από αριστερά+δεξιά ---------- */ .bar-reveal{ position:relative; transition:opacity .9s var(--ease), transform .9s var(--ease); } /* Κρύψιμο ΜΟΝΟ όταν το ενεργοποιεί το JS (fail-visible: χωρίς JS η μπάρα φαίνεται κανονικά) */ .bar-reveal.bar-hide{ opacity:0; transform:scaleY(.94); } /* Τιρκουάζ λάμψη/σκιά πίσω από τη μπάρα (σαν τη ρωγμή) */ .bar-reveal.bar-lit{ filter:drop-shadow(0 8px 22px rgba(0,0,0,.3)) drop-shadow(0 0 30px rgba(98,210,200,.26)); } /* Overlay με τις δύο φωτεινές τιρκουάζ «πόρτες» */ .bar-doors{ position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; } .bar-doors i{ position:absolute; top:0; bottom:0; width:4px; opacity:0; background:#9af5ea; box-shadow:0 0 20px 6px rgba(98,210,200,.9), 0 0 46px 16px rgba(98,210,200,.5); } .bar-doors .dl{ left:0; } .bar-doors .dr{ right:0; } .bar-doors.run .dl{ animation:doorL 1s var(--ease) forwards; } .bar-doors.run .dr{ animation:doorR 1s var(--ease) forwards; } @keyframes doorL{ 0%{ left:0; opacity:0; } 12%{ opacity:1; } 86%{ opacity:1; } 100%{ left:calc(50% - 2px); opacity:0; } } @keyframes doorR{ 0%{ right:0; opacity:0; } 12%{ opacity:1; } 86%{ opacity:1; } 100%{ right:calc(50% - 2px); opacity:0; } } @media (prefers-reduced-motion: reduce){ .bar-reveal.bar-hide{ opacity:1; transform:none; } .bar-doors{ display:none; } } /* ---------- FANCY: scroll progress + parallax + hover polish ---------- */ .scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:55; background:linear-gradient(90deg, var(--accent), var(--cyan)); box-shadow:0 0 14px rgba(95,208,198,.6); transition:width .1s linear; pointer-events:none;} body.admin-bar .scroll-progress{top:32px;} /* hero content subtle parallax handled in JS */ .hero-content{will-change:transform; position:relative;} /* section labels: the little rule line draws itself in */ .section-label.reveal.in .rule, .reveal.in .section-label .rule{animation:ruleGrow 1s var(--ease) .15s both;} @keyframes ruleGrow{from{transform:scaleX(0); transform-origin:left; opacity:0;} to{transform:scaleX(1); opacity:1;}} /* card lift on hover */ .value-card, .post-card, .wf-step, .job-card, .stat, .client-card, .iso-badge, .robot-media, .proj-card{ transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease); } .value-card, .post-card, .job-card, .client-card, .stat, .wf-step{ box-shadow:0 2px 5px rgba(0,0,0,.22), 0 18px 40px -14px rgba(0,0,0,.45); } .value-card:hover, .post-card:hover, .wf-step:hover, .job-card:hover{ transform:translateY(-9px); border-color:var(--accent); box-shadow:0 4px 10px rgba(0,0,0,.28), 0 30px 60px -16px rgba(0,0,0,.6); } .client-card:hover{box-shadow:0 6px 14px rgba(0,0,0,.3), 0 26px 50px -16px rgba(0,0,0,.55);} .stat:hover{transform:translateY(-6px);} .client-card:hover, .iso-badge:hover{transform:translateY(-5px) scale(1.04);} /* floating glow behind hero */ .hero-content::before{content:""; position:absolute; inset:-20% -10% auto -10%; height:60%; background:radial-gradient(60% 60% at 50% 40%, rgba(98,210,200,.16), transparent 70%); filter:blur(30px); z-index:-1; pointer-events:none; animation:floaty 9s ease-in-out infinite;} /* buttons: shine sweep on hover */ .btn{position:relative; overflow:hidden;} .btn::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); transition:left .6s var(--ease);} .btn:hover::after{left:140%;} /* gentle stagger baseline for JS-added delays */ .reveal[style*="--st"]{transition-delay:calc(var(--st) * 115ms);} /* ---------- MORE ANIMATION: word-rise headings + directional slide + micro-parallax ---------- */ /* headings reveal word-by-word, rising from behind a mask */ .rise .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em;} .rise .w > span{display:inline-block; transform:translateY(118%); opacity:0; transition:transform .82s var(--ease), opacity .82s var(--ease); transition-delay:calc(var(--wi, 0) * 46ms); will-change:transform;} .rise.in .w > span{transform:none; opacity:1;} /* split columns slide in from opposite sides */ .slide-l{opacity:0; transform:translateX(-64px); transition:opacity .95s var(--ease), transform .95s var(--ease); will-change:transform;} .slide-r{opacity:0; transform:translateX(64px); transition:opacity .95s var(--ease), transform .95s var(--ease); will-change:transform;} .slide-l.in, .slide-r.in{opacity:1; transform:none;} /* scrubbed «σκηνοθεσία» με το scroll — τα transforms τα οδηγεί το JS */ .scene{transition:none; will-change:transform, opacity;} /* decorative numbers drift with scroll (JS sets transform) */ .section-label .num, .page-head .num, .wf-step .n, .value-card .n{will-change:transform;} @media (prefers-reduced-motion: reduce){ .rise .w > span, .slide-l, .slide-r{opacity:1 !important; transform:none !important; transition:none !important;} } @media (max-width:700px){ /* λιγότερη πλάγια μετακίνηση σε κινητά ώστε να μη βγαίνει οριζόντιο scroll */ .slide-l{transform:translateX(-28px);} .slide-r{transform:translateX(28px);} /* * ΧΩΡΙΣ 3D στο τηλέφωνο. Το perspective()+rotateX() μεγαλώνει το ΟΠΤΙΚΟ * πλαίσιο του στοιχείου, όχι το πλαίσιο διάταξης: μετρημένο στο κινητό, ένα * .copy με offsetWidth 326px αποδιδόταν σε 511px και ξέφευγε 61px αριστερά. * Μένει μόνο fade + άνοδος, που δεν αλλάζει πλάτος — και είναι ελαφρύτερο * για τις GPU των τηλεφώνων. */ .oa-js .reveal{transform:translateY(30px);} .oa-js .reveal.in{transform:none;} } /* ---------- CIRCUIT BACKDROP: διαγώνιες τιρκουάζ γραμμές + glowing streaks ---------- */ .circuit-bg{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; opacity:.55; /* Δικό του επίπεδο σύνθεσης: οι παλμοί δεν ξαναζωγραφίζουν τη σελίδα. */ transform:translateZ(0); contain:layout paint; -webkit-mask-image:radial-gradient(125% 115% at 0% 42%, #000 6%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.22) 68%, transparent 92%); mask-image:radial-gradient(125% 115% at 0% 42%, #000 6%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.22) 68%, transparent 92%);} .circuit-svg{position:relative; z-index:1; width:100%; height:100%; display:block;} .circuit-line{fill:none; stroke:rgba(98,210,200,.5); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;} .circuit-line.bright{stroke:#8af0e6; stroke-width:1.9; opacity:.9;} .circuit-dot{fill:#c2fff5;} .circuit-dot.blink{animation:cbBlink 3s ease-in-out infinite;} @keyframes cbBlink{0%,100%{opacity:.45;} 50%{opacity:1;}} /* Κάθε δέσμη σε δικό της svg — ο παλμός συντίθεται στη GPU. */ .circuit-beam-layer{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; opacity:.5; will-change:opacity; animation:beamPulse 5.5s ease-in-out infinite;} .circuit-beam{fill:none; stroke:var(--cyan); stroke-linecap:round; filter:blur(6px); opacity:1;} @keyframes beamPulse{0%,100%{opacity:.26;} 50%{opacity:.6;}} .hero{position:relative; z-index:2;} .wrap, .hero-content, footer{position:relative; z-index:2;} /* ΤΗΛΕΦΩΝΟ: το κύκλωμα ΜΕΝΕΙ — απλώς έρχεται από πάνω, εκεί που κάθεται πια η μπάρα, και χαμηλώνει ώστε να μην πνίγει το κείμενο. Το display:none που ήταν εδώ άφηνε το τηλέφωνο με σκέτο --bg. */ @media (max-width:880px){ .circuit-bg{opacity:.38; -webkit-mask-image:radial-gradient(150% 100% at 50% 0%, #000 4%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.18) 60%, transparent 88%); mask-image:radial-gradient(150% 100% at 50% 0%, #000 4%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.18) 60%, transparent 88%);} .circuit-line{stroke-width:1.1;} .circuit-line.bright{stroke-width:1.5;} } @media (prefers-reduced-motion: reduce){ .circuit-dot.blink, .circuit-beam-layer{animation:none;} } /* ---------- 3D CUBE ACCENT (τονίζει κάθε ενότητα) ---------- */ .cube3d-wrap{display:inline-block; width:40px; height:40px; vertical-align:middle; flex:none;} .cube3d{position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:cubeSpin 8s linear infinite;} .cube3d .cf{position:absolute; top:5px; left:5px; width:30px; height:30px; border:1.6px solid var(--cyan); background:rgba(98,210,200,.10); box-shadow:inset 0 0 12px rgba(98,210,200,.28);} .cube3d .f1{transform:translateZ(15px);} .cube3d .f2{transform:rotateY(180deg) translateZ(15px);} .cube3d .f3{transform:rotateY(90deg) translateZ(15px);} .cube3d .f4{transform:rotateY(-90deg) translateZ(15px);} .cube3d .f5{transform:rotateX(90deg) translateZ(15px);} .cube3d .f6{transform:rotateX(-90deg) translateZ(15px);} @keyframes cubeSpin{ 0%{transform:perspective(340px) rotateX(-22deg) rotateY(0deg);} 50%{transform:perspective(340px) rotateX(16deg) rotateY(180deg);} 100%{transform:perspective(340px) rotateX(-22deg) rotateY(360deg);} } @media (max-width:820px){ .cube3d-wrap{width:30px; height:30px;} .cube3d .cf{top:3px; left:3px; width:24px; height:24px;} .cube3d .f1{transform:translateZ(12px);} .cube3d .f2{transform:rotateY(180deg) translateZ(12px);} .cube3d .f3{transform:rotateY(90deg) translateZ(12px);} .cube3d .f4{transform:rotateY(-90deg) translateZ(12px);} .cube3d .f5{transform:rotateX(90deg) translateZ(12px);} .cube3d .f6{transform:rotateX(-90deg) translateZ(12px);} } @media (prefers-reduced-motion: reduce){ .cube3d{animation:none; transform:perspective(340px) rotateX(-24deg) rotateY(-36deg);} } /* ---------- WHO WE ARE ---------- */ .split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;} h2.big,h1.big{font-size:clamp(32px,4.2vw,47px); font-weight:800; color:#fff; margin-bottom:22px;} /* Τίτλος μέσα σε στήλη μισού πλάτους: μικρότερος. Με το μέγεθος του πλήρους πλάτους, ένας τίτλος 12-15 λέξεων έσπαγε σε πέντε και έξι γραμμές και η εικόνα δίπλα του έμενε να κρέμεται. */ .split .copy h2.big, .split .copy h1.big{font-size:clamp(25px,2.5vw,34px); line-height:1.2; margin-bottom:18px;} .split .copy p{font-size:17px;} .feature-list{margin:20px 0 30px; display:flex; flex-direction:column; gap:12px;} .feature-list li{ display:flex; align-items:center; gap:14px; font-size:16px; color:var(--ink); font-weight:500; padding-bottom:12px; border-bottom:1px solid var(--line); } .feature-list li:last-child{border-bottom:none;} .feature-list{counter-reset:ortem-fl;} .feature-list li{counter-increment:ortem-fl;} .feature-list li::before{content:'0'attr(data-i); font-family:var(--font-display); font-weight:800; color:var(--accent); font-size:14px; flex:none;} /* Λίστες φτιαγμένες από τον επεξεργαστή μπλοκ δεν έχουν data-i: χωρίς αυτό εμφανιζόταν σκέτο «0» μπροστά από κάθε γραμμή. */ .feature-list li:not([data-i])::before{content:counter(ortem-fl, decimal-leading-zero);} .btn{ display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:#08191e; padding:15px 28px; border-radius:100px; border:none; font-size:14.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .btn:hover{background:#fff; color:var(--brand-deep); transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.28);} .btn.ghost{ background:transparent; color:#fff; border:1.5px solid var(--line); } .btn.ghost:hover{background:#fff; color:var(--brand-deep); border-color:#fff; transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.28);} .media-frame{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); } .media-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(27,40,44,.55)); } .media-frame img{width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.05); transition:filter .5s var(--ease), transform .6s var(--ease);} .media-frame:hover img{filter:grayscale(0) contrast(1.05); transform:scale(1.04);} /* ---------- STATS ---------- */ .stats{position:relative; z-index:2; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:64px 0;} .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:left;} .stat h3{font-size:clamp(34px,4vw,52px); font-weight:800; color:#fff;} .stat h3 span{color:var(--accent);} .stat p{font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:6px;} /* ---------- ACTIONS ---------- */ .action-tag{ display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; } .action-tag::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--accent);} /* ---------- WORKFLOW ---------- */ .workflow-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;} .wf-step{ border:1px solid var(--line); border-radius:16px; padding:28px 22px; background:var(--panel); transition:border-color .4s var(--ease), transform .4s var(--ease); } .wf-step:hover{border-color:var(--accent); transform:translateY(-6px);} .wf-step .n{font-family:var(--font-display); font-size:34px; font-weight:800; color:var(--accent); opacity:.85;} .wf-step h4{font-size:19px; font-weight:700; color:#fff; margin:14px 0 8px;} .wf-step p{font-size:16px; line-height:1.6; margin:0;} /* ---------- PARTNERS MARQUEE ---------- */ .partners{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:70px 0;} .logo-row{overflow:hidden; margin-top:12px;} .logo-track{display:inline-flex; gap:0; animation:logoScroll 26s linear infinite;} .logo-card{ flex:none; width:180px; height:96px; margin:0 12px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:12px; padding:16px; opacity:.9; transition:opacity .4s var(--ease), transform .4s var(--ease); } .logo-card:hover{opacity:1; transform:translateY(-4px);} .logo-card svg{width:80%; height:50px;} .logo-card img{max-height:58px; max-width:100%; width:auto; object-fit:contain;} @keyframes logoScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ---------- CERTS ---------- */ .certs h2.big{margin-bottom:36px;} .cert-row{display:flex; gap:22px; flex-wrap:wrap;} .cert-badge{ width:74px; height:74px; border-radius:50%; background:var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:transform .4s var(--ease), border-color .4s var(--ease); } .cert-badge:hover{transform:translateY(-4px) scale(1.05); border-color:var(--accent);} .cert-badge svg{width:36px; height:36px;} /* ---------- CTA ---------- */ .cta{ position:relative; text-align:center; padding:clamp(64px, 8.6vh, 130px) 0; background: radial-gradient(ellipse at 50% 0%, rgba(95,208,198,.10), transparent 60%), var(--bg); } .cta h2{font-size:clamp(34px,5vw,64px); font-weight:800; color:#fff; max-width:760px; margin:0 auto 30px;} .cta h2 span{color:var(--accent);} /* ---------- FOOTER ---------- */ footer.site-footer{background:var(--bg-2); color:var(--muted); padding:64px 0 28px; border-top:1px solid var(--line);} .footer-logo{height:54px; width:auto; display:block; margin-bottom:16px;} .footer-grid{display:grid; grid-template-columns:1fr 1.5fr; gap:54px; padding-bottom:40px; border-bottom:1px solid var(--line); align-items:start;} .footer-certs h4{font-size:13px; color:#fff; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px;} /* Πιστοποιήσεις και βραβεύσεις: δύο ξεχωριστές ομάδες, με λεπτή διαχωριστική γραμμή ώστε να μη διαβάζονται ως ένα ενιαίο σύνολο σημάτων. */ .footer-certs .cert-group + .cert-group{margin-top:26px; padding-top:22px; border-top:1px solid rgba(140,190,190,.16);} .footer-certs .cert-group h4{margin:0 0 2px;} .cert-note{margin:0 0 14px; font-size:13px; letter-spacing:.04em; color:var(--muted); opacity:.75;} .footer-badges{display:flex; flex-wrap:wrap; gap:26px; align-items:center;} .footer-badges .iso-badge img{height:66px;} .footer-brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:19px; margin-bottom:14px; font-family:var(--font-display);} .footer-brand .dot{width:9px; height:9px; border-radius:50%; background:var(--accent);} .footer-grid p{font-size:15px; max-width:260px;} .footer-col h4{font-size:13px; color:#fff; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px;} .footer-col ul{display:flex; flex-direction:column; gap:11px; list-style:none; margin:0; padding:0;} .footer-col a{font-size:15px; transition:color .25s var(--ease), padding-left .25s var(--ease);} .footer-col a:hover{color:var(--accent); padding-left:4px;} .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:14px; flex-wrap:wrap; gap:14px;} .socials{display:flex; gap:14px;} .socials a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .socials a:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-3px);} .socials svg{width:14px; height:14px; fill:#fff;} .socials a:hover svg{fill:#08191e;} /* ---------- ΒΙΝΤΕΟ ΣΤΙΣ ΣΕΛΙΔΕΣ ΡΟΜΠΟΤ ---------- */ .robot-video video{width:100%; height:auto; display:block; border-radius:inherit;} .robot-video.robot-embed{padding:0;} .robot-embed iframe{width:100%; aspect-ratio:16/9; height:auto; display:block; border:0;} .media-frame.light.robot-video{padding:0; overflow:hidden;} /* ---------- INTERREG / EU — ΥΠΟΧΡΕΩΤΙΚΗ ΔΗΜΟΣΙΟΤΗΤΑ ---------- */ .interreg-banner{position:relative; z-index:2; background:#fff; padding:22px 0; border-bottom:1px solid rgba(0,0,0,.08);} .interreg-banner .wrap{display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:center; text-align:left;} .interreg-logo{flex:none; display:block;} .interreg-logo img{height:64px; width:auto; display:block;} .interreg-funding{margin:0; color:#1b282c; font-size:14px; line-height:1.6; max-width:760px; font-weight:500;} @media (max-width:700px){ .interreg-banner .wrap{justify-content:center; text-align:center;} .interreg-logo img{height:52px;} .interreg-funding{font-size:13px;} } .interreg-foot{border-top:1px solid var(--line); margin-top:34px; padding-top:26px;} .interreg-links{display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 16px; padding:0; list-style:none;} .interreg-links a{color:var(--accent); font-size:14px; font-weight:600;} .interreg-links a:hover{color:#fff; text-decoration:underline;} .interreg-disclaimer{margin:0; font-size:13px; line-height:1.7; color:var(--muted); max-width:960px;} /* ---------- ΜΠΛΟΚ (Gutenberg) ---------- Κανονικά πλάτη WordPress: τα απλά μπλοκ κεντράρονται, τα «alignwide» και «alignfull» απλώνουν, ώστε να χτίζονται ενότητες από άκρη σε άκρη. */ .entry-content > *{max-width:1136px; margin-left:auto; margin-right:auto;} .entry-content > .alignwide{max-width:1240px;} .entry-content > .alignfull{max-width:none; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);} .entry-content > .alignfull > .wp-block-group__inner-container, .entry-content > .alignfull .wrap{max-width:1200px; margin:0 auto; padding:0 32px;} .entry-content .alignleft{float:left; margin:6px 28px 18px 0;} .entry-content .alignright{float:right; margin:6px 0 18px 28px;} .entry-content .aligncenter{margin-left:auto; margin-right:auto;} .entry-content .wp-block-image img, .entry-content .wp-block-media-text__media img{border-radius:14px; height:auto;} .entry-content .wp-block-media-text{gap:40px; align-items:center;} .entry-content .wp-block-columns{gap:26px;} .entry-content .wp-block-gallery img{border-radius:12px; background:#fff;} .entry-content .wp-block-video video{width:100%; border-radius:16px;} .entry-content .wp-block-file{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; } .entry-content .wp-block-file a:not(.wp-block-file__button){color:var(--ink); font-weight:600;} .entry-content .wp-block-file__button{ background:var(--accent); color:#08191e; border-radius:100px; padding:8px 18px; font-weight:700; font-size:14px; } .entry-content .wp-block-button__link{ background:var(--accent); color:#08191e; border-radius:100px; padding:15px 30px; font-weight:700; font-size:15px; letter-spacing:.02em; } .entry-content .btn.ghost .wp-block-button__link{background:transparent; color:#fff; border:1.5px solid var(--line);} /* Στα μπλοκ η κλάση .btn κάθεται στο ΠΕΡΙΒΛΗΜΑ του κουμπιού, οπότε το στυλ του θέματος ζωγράφιζε δεύτερο οβάλ γύρω από το πραγματικό κουμπί. */ .entry-content .wp-block-button.btn, .entry-content .wp-block-button.btn.ghost{ background:none !important; border:0 !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible; } .entry-content .wp-block-button.btn::after{display:none !important;} .entry-content .wp-block-quote{border-left:3px solid var(--accent); padding-left:20px; margin:26px 0;} .entry-content .wp-block-table td, .entry-content .wp-block-table th{border-color:var(--line); padding:10px 14px;} .entry-content .wp-block-cover{border-radius:0;} .entry-content .wp-block-cover .wp-block-cover__inner-container{max-width:1200px; margin:0 auto; padding:0 32px;} .entry-content .wp-block-cover h1, .entry-content .wp-block-cover h2{font-size:clamp(34px,6vw,68px); line-height:1.02;} /* ---------- ΠΕΡΙΕΧΟΜΕΝΟ ΣΕΛΙΔΑΣ ΣΤΗΝ ΑΡΧΙΚΗ ---------- Ό,τι γράφεται στον επεξεργαστή της Αρχικής (Ρυθμίσεις → Ανάγνωση). */ .page-content-section{position:relative; z-index:2; padding:90px 0;} .page-content-section .entry-content{max-width:none; margin:0 auto;} .page-content-section .entry-content > *:first-child{margin-top:0;} .page-content-section img, .page-content-section .wp-block-image img{border-radius:14px; height:auto;} .page-content-section .wp-block-columns{gap:32px;} .page-content-section figure{margin:26px 0;} .page-content-section figcaption{color:var(--muted); font-size:14px; margin-top:8px;} /* ---------- ΕΣΩΤΕΡΙΚΕΣ ΣΕΛΙΔΕΣ (page.php, home.php, single.php, WooCommerce) ---------- */ .inner-main{padding:clamp(60px, 7.4vh, 112px) 0 clamp(54px, 6.6vh, 100px); min-height:60vh;} .inner-main .page-head{margin-bottom:44px;} .inner-main .page-head .section-label{margin-bottom:14px;} .entry-content{max-width:820px;} .entry-content p{font-size:17px;} .entry-content h2,.entry-content h3{color:#fff; margin:34px 0 14px;} .entry-content h2{font-size:28px;} .entry-content h3{font-size:21px;} .entry-content a{color:var(--accent);} .entry-content ul{list-style:disc; padding-left:22px; color:var(--muted); margin:0 0 14px;} .entry-content ol{color:var(--muted); padding-left:22px; margin:0 0 14px;} .entry-content li{margin-bottom:6px; line-height:1.7;} .entry-content img{border-radius:14px; border:1px solid var(--line);} .entry-content blockquote{border-left:2px solid var(--accent); margin:20px 0; padding:6px 0 6px 20px; color:var(--ink);} /* ---------- ΝΕΑ & ΑΡΘΡΑ ---------- */ .post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} .post-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); transition:border-color .4s var(--ease), transform .4s var(--ease); } .post-card:hover{border-color:var(--accent); transform:translateY(-6px);} .post-card .thumb{aspect-ratio:16/10; overflow:hidden; background:var(--bg-2);} .post-card .thumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(.3); transition:filter .5s var(--ease), transform .6s var(--ease);} .post-card:hover .thumb img{filter:grayscale(0); transform:scale(1.05);} .post-card .body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1;} .post-card .date{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);} .post-card h3{font-size:19px; font-weight:700; color:#fff; line-height:1.35;} .post-card p{font-size:15px; margin:0; flex:1;} .post-card .more{font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);} .post-meta{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;} .single-hero-img{border-radius:18px; overflow:hidden; border:1px solid var(--line); margin:30px 0;} .pagination-row{display:flex; gap:8px; margin-top:44px;} .pagination-row .page-numbers{ min-width:40px; height:40px; padding:0 12px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--muted); font-size:14px; font-weight:700; } .pagination-row .page-numbers.current, .pagination-row .page-numbers:hover{border-color:var(--accent); color:var(--accent);} /* ---------- WOOCOMMERCE (dark overrides) ---------- */ .woocommerce-wrap{color:var(--ink);} .woocommerce-wrap .woocommerce-products-header__title{font-size:clamp(32px,4.2vw,47px); font-weight:800; color:#fff; margin-bottom:26px;} .woocommerce ul.products{margin-top:20px;} .woocommerce ul.products li.product{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 16px 20px; text-align:left; transition:border-color .4s var(--ease), transform .4s var(--ease); } .woocommerce ul.products li.product:hover{border-color:var(--accent); transform:translateY(-6px);} .woocommerce ul.products li.product img{border-radius:10px;} .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-category__title{ font-family:var(--font-display); font-size:17px; font-weight:700; color:#fff; padding-top:12px; } .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--accent); font-weight:800; font-family:var(--font-display); } .woocommerce div.product .product_title{color:#fff; font-weight:800;} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--panel); border-color:var(--line);} .woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--muted);} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff;} .woocommerce div.product .woocommerce-tabs .panel{color:var(--muted);} .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit{ background:var(--accent); color:#08191e; border-radius:100px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:13.5px; padding:12px 22px; transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{ background:#fff; color:var(--brand-deep); transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.25); } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-breadcrumb{color:var(--muted);} .woocommerce .woocommerce-ordering select, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row select, .woocommerce .quantity .qty{ background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:10px 12px; } .woocommerce form .form-row label{color:var(--muted);} .woocommerce table.shop_table{border:1px solid var(--line); border-radius:14px; color:var(--ink);} .woocommerce table.shop_table th{color:#fff;} .woocommerce table.shop_table td, .woocommerce table.shop_table th{border-color:var(--line);} .woocommerce-cart .cart-collaterals .cart_totals h2, .woocommerce-checkout h3{color:#fff;} .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error{ background:var(--panel); color:var(--ink); border-top-color:var(--accent); } .woocommerce .woocommerce-message a, .woocommerce .woocommerce-info a{color:var(--accent);} .woocommerce #payment{background:var(--panel); border-radius:14px;} .woocommerce #payment div.payment_box{background:var(--bg-2); color:var(--muted);} .woocommerce #payment div.payment_box::before{border-bottom-color:var(--bg-2);} .woocommerce nav.woocommerce-pagination ul{border-color:var(--line);} .woocommerce nav.woocommerce-pagination ul li{border-color:var(--line);} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{color:var(--muted);} .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover{ background:var(--panel); color:var(--accent); } .woocommerce .star-rating span::before{color:var(--accent);} /* ---------- ΣΕΛΙΔΑ ΡΟΜΠΟΤ (page-robots.php) ---------- */ .robots-intro{max-width:720px; margin-bottom:50px;} .robot-block{padding:70px 0; border-top:1px solid var(--line);} /* Το πρώτο ΟΡΑΤΟ ρομπότ — η σειρά ορίζεται πλέον από τη Διάταξη σελίδας. */ .robot-block.first, .robot-block:first-of-type{border-top:none; padding-top:30px;} .robot-name{font-size:clamp(28px,3.2vw,38px); font-weight:800; color:#fff; margin-bottom:14px; font-family:var(--font-display);} .robot-media{ position:relative; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:28px; min-height:340px; } .robot-media img{max-height:430px; width:auto; max-width:100%; object-fit:contain;} .robot-specs{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px;} .robot-specs span{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:100px; padding:8px 14px; } .robot-cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px;} .robot-name a{color:inherit; transition:color .3s var(--ease);} .robot-name a:hover{color:var(--accent);} a.robot-media{display:block;} /* Ατομική σελίδα ρομπότ — hero σε στυλ αρχικής */ .robot-hero{ position:relative; padding:90px 0 70px; overflow:hidden; background:radial-gradient(ellipse at 72% 18%, rgba(95,208,198,.14), transparent 60%), var(--bg); } .back-link{ display:inline-block; margin-bottom:26px; color:var(--muted); font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; transition:color .3s var(--ease), transform .3s var(--ease); } .back-link:hover{color:var(--accent); transform:translateX(-3px);} .robot-hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center;} .robot-hero-name{font-size:clamp(46px,7vw,86px); font-weight:800; color:#fff; line-height:1; margin:12px 0 16px; font-family:var(--font-display); letter-spacing:-.02em;} .robot-hero-tagline{font-size:20px; color:var(--muted); max-width:460px; margin-bottom:26px;} .robot-hero-media .media-frame{min-height:360px;} @media (max-width:880px){ .robot-hero{padding:120px 0 50px;} .robot-hero-grid{grid-template-columns:1fr; gap:34px;} } /* Λευκή παραλλαγή media-frame για product shots σε σκούρο φόντο */ .media-frame.light{background:#fff;} .media-frame.light::after{display:none;} .media-frame.light img{filter:none; object-fit:contain; padding:20px;} /* ---------- FOOTER CONTACT ---------- */ .footer-contact{margin-top:16px; display:flex; flex-direction:column; gap:8px; font-size:15px;} .footer-contact a{transition:color .25s var(--ease);} .footer-contact a:hover{color:var(--accent);} /* ---------- ΣΕΛΙΔΕΣ: ΤΟΜΕΙΣ / ΥΠΗΡΕΣΙΕΣ (value cards) ---------- */ .value-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px;} .value-card{border:1px solid var(--line); border-radius:16px; padding:30px 26px; background:var(--panel); display:flex; flex-direction:column; gap:10px; transition:border-color .4s var(--ease), transform .4s var(--ease);} .value-card:hover{border-color:var(--accent); transform:translateY(-6px);} .value-card .n{font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--accent); opacity:.9;} .value-card h3{font-size:21px; font-weight:700; color:#fff; line-height:1.3;} .value-card p{font-size:17px; line-height:1.65; margin:0; flex:1;} .value-card .more{font-size:14.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-top:6px;} /* ---------- ΣΕΛΙΔΑ ΕΤΑΙΡΕΙΑ: sectors + ISO ---------- */ .sector-list{display:grid; grid-template-columns:1fr 1fr; gap:0 40px;} .sector-list li{display:flex; align-items:center; gap:14px; font-size:16px; color:var(--ink); font-weight:500; padding:16px 0; border-bottom:1px solid var(--line);} .sector-list li::before{content:'→'; color:var(--accent); font-weight:800; flex:none;} .iso-row{display:flex; flex-wrap:wrap; gap:32px; align-items:center;} .iso-badge{display:inline-flex; align-items:center; justify-content:center; background:none; padding:0; border:none; border-radius:0; transition:transform .4s var(--ease), filter .4s var(--ease);} .iso-badge:hover{transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 12px 26px rgba(0,0,0,.4));} .iso-badge img{height:112px; width:auto; object-fit:contain; display:block;} .iso-badge span{display:none;} /* ---------- ΣΧΕΤΙΚΑ ΝΕΑ ---------- */ .related-news{padding:90px 0; border-top:1px solid var(--line); background:var(--bg-2);} /* ---------- ΣΕΛΙΔΑ ΕΡΓΑ (πελάτες) ---------- */ .client-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:22px;} .client-card{background:#fff; border-radius:16px; height:150px; display:flex; align-items:center; justify-content:center; padding:26px; transition:transform .4s var(--ease), box-shadow .4s var(--ease);} .client-card:hover{box-shadow:0 16px 34px rgba(0,0,0,.25);} .client-card:hover{transform:translateY(-5px);} .client-card img{max-height:92px; max-width:100%; width:auto; object-fit:contain;} /* ---------- ΣΕΛΙΔΑ ΕΠΙΚΟΙΝΩΝΙΑ ---------- */ .contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:stretch;} .contact-item{padding:18px 0; border-bottom:1px solid var(--line);} .contact-item:last-child{border-bottom:none;} .contact-item .lbl{display:block; font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;} .contact-item p{margin:0; color:var(--ink); font-size:17px; line-height:1.7;} .contact-item a{color:var(--ink);} .contact-item a:hover{color:var(--accent);} .contact-socials{display:flex; flex-wrap:wrap; gap:10px;} .contact-socials a{border:1px solid var(--line); border-radius:100px; padding:8px 16px; font-size:14px; font-weight:600; color:var(--muted);} .contact-socials a:hover{border-color:var(--accent); color:var(--accent);} .contact-map{min-height:440px; border-radius:18px; overflow:hidden; border:1px solid var(--line);} .contact-map iframe{width:100%; height:100%; min-height:440px; display:block;} /* ---------- CAROUSEL ΔΡΑΣΕΩΝ/ΝΕΩΝ (αρχική) ---------- */ .news-section{padding:clamp(56px, 7.4vh, 112px) 0;} .carousel-head{display:flex; align-items:center; justify-content:space-between; gap:20px;} .carousel-nav-row{display:flex; gap:10px; flex:none;} .carousel-nav{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:#fff; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .carousel-nav:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);} .carousel-stage{ display:contents; } .carousel-nav-row{ display:none; } .carousel-track{ position:relative; z-index:2; display:flex; gap:26px; overflow-x:auto; overflow-y:hidden; perspective:1600px; max-width:1200px; margin:0 auto; padding:48px 32px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .carousel-track::-webkit-scrollbar{display:none;} .carousel-card{ flex:0 0 300px; max-width:80vw; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:border-color .4s var(--ease); /* Χωρίς will-change: οι κάρτες είναι 20 (διπλασιάζονται από το coverflow) και κρατούσαν 20 μόνιμα GPU layers — το μεγαλύτερο μέρος των 53 που μετρήθηκαν. Ο browser προωθεί μόνος του ό,τι κινείται· εδώ δεν χρειάζεται υπόδειξη. */ transform-origin:center center; } .carousel-card:hover{border-color:var(--accent);} .carousel-card h3{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .carousel-card p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;} .carousel-card .thumb{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bg);} .carousel-card .thumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(.3); transition:filter .5s var(--ease), transform .6s var(--ease);} .carousel-card:hover .thumb img{filter:grayscale(0); transform:scale(1.05);} .carousel-card .thumb-empty{background:linear-gradient(135deg, var(--panel), var(--bg-2));} .carousel-card .body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1;} .carousel-card .date{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);} .carousel-card h3{font-size:19px; font-weight:700; color:#fff; line-height:1.35;} .carousel-card p{font-size:15px; margin:0; flex:1;} .carousel-card .more{font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);} /* ---------- SIDEBAR ΕΠΙΚΟΙΝΩΝΙΑΣ ---------- */ .contact-backdrop{ position:fixed; inset:0; background:rgba(4,20,25,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .35s var(--ease); z-index:80; } .contact-backdrop.open{opacity:1;} .contact-sidebar{ position:fixed; top:0; right:0; height:100%; width:400px; max-width:90vw; background:var(--bg-2); border-left:1px solid var(--line); z-index:81; transform:translateX(100%); transition:transform .4s var(--ease); overflow-y:auto; box-shadow:-20px 0 60px rgba(0,0,0,.4); } .contact-sidebar.open{transform:translateX(0);} .contact-sidebar-close{ position:absolute; top:16px; right:20px; background:none; border:none; color:var(--muted); font-size:30px; line-height:1; cursor:pointer; transition:color .3s var(--ease); } .contact-sidebar-close:hover{color:var(--accent);} .contact-sidebar-inner{padding:70px 34px 44px;} .contact-sidebar-inner .eyebrow{animation:none; opacity:1; transform:none;} .contact-sidebar-inner h3{font-size:30px; font-weight:800; color:#fff; margin:12px 0 12px; font-family:var(--font-display);} .cs-item{padding:16px 0; border-bottom:1px solid var(--line);} .cs-item .lbl{display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:6px;} .cs-item p{margin:0; color:var(--ink); font-size:16px; line-height:1.6;} .cs-item a{color:var(--ink); transition:color .25s var(--ease);} .cs-item a:hover{color:var(--accent);} .contact-sidebar-inner .btn{margin:26px 0 22px;} .cs-socials{display:flex; flex-wrap:wrap; gap:16px;} .cs-socials a{font-size:14px; font-weight:600; color:var(--muted); transition:color .25s var(--ease);} .cs-socials a:hover{color:var(--accent);} body.sidebar-open{overflow:hidden;} /* ---------- MEGA MENU (click, ενιαία μπάρα) ---------- */ nav.links .mega-menu{display:flex; gap:30px; margin:0; padding:0; list-style:none; align-items:center;} .mega-toggle{ background:none; border:none; font-family:inherit; cursor:none; color:var(--muted); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:6px 0; position:relative; opacity:0; transform:translateY(-10px); transition:color .3s var(--ease); } .mega-toggle::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent); transition:width .3s var(--ease);} .mega-toggle:hover, .mega-toggle.active{color:#fff;} .mega-toggle:hover::after, .mega-toggle.active::after{width:100%;} .mega-panel{ position:absolute; left:0; right:0; top:100%; background:rgba(38,54,59,.99); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 30px 60px rgba(0,0,0,.45); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; z-index:59; } .mega-panel.open{opacity:1; visibility:visible; transform:translateY(0);} .mega-grid{display:flex; gap:64px; padding:38px max(32px, calc((100vw - 1200px) / 2 + 32px)); align-items:flex-start;} .mega-col{opacity:.5; transition:opacity .35s var(--ease); min-width:210px;} .mega-col.active{opacity:1;} .mega-col h4{font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; transition:color .35s var(--ease);} .mega-col.active h4{color:var(--accent);} .mega-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;} .mega-col a{display:inline-block; padding:8px 0; font-size:15px; font-weight:600; color:var(--muted); transition:color .25s var(--ease), padding-left .25s var(--ease);} .mega-col a:hover{color:#fff; padding-left:6px;} .mega-col a.mega-parent{color:#fff; font-weight:700;} .mega-sub{list-style:none; margin:6px 0 8px 16px; padding:0 0 0 14px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:1px;} .mega-sub a{font-size:14px; padding:5px 0;} /* ---------- ΣΕΛΙΔΑ ΚΑΡΙΕΡΑΣ ---------- */ .jobs-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;} .job-card{border:1px solid var(--line); border-radius:18px; padding:34px 30px; background:var(--panel); transition:border-color .4s var(--ease), transform .4s var(--ease);} .job-card:hover{border-color:var(--accent); transform:translateY(-6px);} .job-card .robot-name{margin:12px 0 14px;} .job-sub{font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:22px 0 12px;} .job-reqs{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:10px;} .job-reqs li{position:relative; padding-left:22px; color:var(--ink); font-size:15.5px; line-height:1.5;} .job-reqs li::before{content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:800;} .job-offer{font-size:15px; color:var(--muted); font-style:italic; margin:14px 0 22px;} /* ---------- FLOAT ANIMATION (ρομπότ) ---------- */ @keyframes floaty{0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(0,-12px,0);}} .robot-hero-media .media-frame, #about .media-frame.light{animation:floaty 6s ease-in-out infinite;} @media (prefers-reduced-motion:reduce){ .robot-hero-media .media-frame, #about .media-frame.light{animation:none;} } /* ---------- PROJECTS MARQUEE (γραμμή) ---------- */ .proj-marquee{ overflow:hidden; margin-top:16px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .proj-track{display:inline-flex; gap:22px; align-items:center; animation:projScroll 70s linear infinite;} .proj-marquee:hover .proj-track{animation-play-state:paused;} .proj-card{ flex:none; width:190px; height:110px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; padding:15px 18px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .proj-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.28);} /* Το λογότυπο γεμίζει το πλακίδιο: με max-height 74px σε κουτί 70px, τα φαρδιά και χαμηλά λογότυπα έβγαιναν μικροσκοπικά. */ .proj-card img{max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain;} @keyframes projScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ---------- RESPONSIVE ---------- */ @media (max-width:880px){ .sector-list{grid-template-columns:1fr;} .contact-grid{grid-template-columns:1fr;} .contact-map{min-height:320px;} .contact-map iframe{min-height:320px;} nav.links{display:none;} .split{grid-template-columns:1fr; gap:40px;} .stats-grid{grid-template-columns:1fr 1fr;} .workflow-grid{grid-template-columns:1fr 1fr;} .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;} .post-grid{grid-template-columns:1fr;} .inner-main{padding:130px 0 70px;} } @media (min-width:881px) and (max-width:1100px){ .post-grid{grid-template-columns:1fr 1fr;} } /* ---------- PETROL 3D CUBES (κάρτες + στατιστικά, αδιαφανή, με πλαϊνή σκιά) ---------- */ .value-card, .post-card, .job-card, .carousel-card, .wf-step, .stat{ background:linear-gradient(152deg, #223840 0%, #172830 58%, #101e24 100%); border:1px solid #46626d; box-shadow: inset 0 1px 0 rgba(150,210,215,.18), 7px 8px 16px -3px rgba(98,210,200,.5), 0 26px 44px -16px rgba(0,0,0,.68), 0 0 26px -6px rgba(98,210,200,.42); } .stat{padding:26px 24px; border-radius:14px;} .value-card:hover, .post-card:hover, .job-card:hover, .wf-step:hover, .stat:hover{ transform:translateY(-9px); border-color:var(--accent); box-shadow: inset 0 1px 0 rgba(150,210,215,.24), 10px 12px 22px -3px rgba(98,210,200,.62), 0 36px 56px -16px rgba(0,0,0,.72), 0 0 38px -4px rgba(98,210,200,.6); } /* ---------- ΕΝΟΤΗΤΕΣ ΧΤΙΣΤΗ ---------- */ .ortem-sec{position:relative; z-index:2; padding:100px 0;} .ortem-sec--tight{padding:56px 0;} .ortem-sec--roomy{padding:140px 0;} .ortem-sec--dark{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .ortem-sec--panel{background:var(--panel);} .ortem-sec--richtext .entry-content{max-width:820px;} .ortem-sec--w-narrow .entry-content{max-width:640px;} .ortem-sec--w-wide .entry-content{max-width:1100px;} .split--media-left{direction:rtl;} .split--media-left>*{direction:ltr;} .split--60-40{grid-template-columns:1.5fr 1fr;} .split--40-60{grid-template-columns:1fr 1.5fr;} .split--vtop{align-items:start;} .split--vbottom{align-items:end;} .hero--h60{height:60vh; min-height:420px;} .hero--h80{height:80vh; min-height:520px;} /* η ΠΡΟΕΠΙΛΟΓΗ του μητρώου — χωρίς αυτόν τον κανόνα το hero έπαιρνε το σταθερό 100vh του .hero και η επιλογή «80% οθόνης» δεν έκανε τίποτα ορατό. */ .hero--h100{height:100vh;} .hero--center .hero-content{text-align:center;} .hero::after{opacity:var(--hero-dim,.6);} .cta--left .wrap{text-align:left;} @media (max-width:880px){ .ortem-sec--hide-mobile{display:none!important;} } /* ========================================================================== ΤΗΛΕΦΩΝΟ — διορθώσεις από μετρήσεις στο πραγματικό site σε πλάτος 390px. Δύο κατηγορίες: στόχοι αφής κάτω από 44px (22 στοιχεία) και κείμενα κάτω από 13px (30 στοιχεία). Και τα δύο κάνουν τη σελίδα δύσχρηστη στο χέρι. ========================================================================== */ @media (max-width:700px){ /* --- Στόχοι αφής: 44px είναι το ελάχιστο που συστήνουν Apple και Google. Το χάμπουργκερ ήταν 42×34 — το βασικότερο κουμπί της σελίδας. --- */ .nav-toggle{min-width:44px; min-height:44px; padding:11px 8px; justify-content:center;} .side-rail-lang{min-height:44px; justify-content:center;} .side-rail-logo{min-height:44px;} /* Οι σύνδεσμοι του υπομενού ήταν 21-22px ψηλοί: αδύνατο να τους πετύχεις. Γίνονται flex ώστε το padding να μετράει σε ύψος αφής. */ .mobile-menu .sub-menu a{ display:flex; align-items:center; min-height:44px; padding:6px 0 6px 6px; } .mobile-menu .sub-menu{gap:6px;} /* Κουμπιά και σύνδεσμοι σε κάρτες/footer/πλαϊνό επικοινωνίας */ .btn, .footer-contact a, .socials a, .cs-socials a, .cs-item a, .carousel-card .more, a.more{min-height:44px; display:inline-flex; align-items:center;} .contact-sidebar-close{min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;} /* --- Ελάχιστο αναγνώσιμο μέγεθος. Κάτω από 13px το κείμενο δεν διαβάζεται άνετα στο χέρι και το iOS κάνει auto-zoom σε πεδία φόρμας. Οι επιλογείς είναι σκόπιμα ειδικοί: με σκέτα .txt/.date/.lbl τους υπερίσχυαν οι υπάρχοντες κανόνες και δεν άλλαζε τίποτα. --- */ .eyebrow, .cert-note, .side-rail-lang-label, .footer-contact span, .footer-bottom span, .section-label .txt, .carousel-card .date, .cs-item .lbl, .carousel-card .more, a.more, span.date{ font-size:14px; } input, select, textarea{font-size:17px;} /* εμποδίζει το zoom του iOS στο focus */ /* Η επικεφαλίδα του hero σε στενή οθόνη: μικρότερο ελάχιστο ώστε να μη σπάει άσχημα σε 360px. */ .hero h1{font-size:clamp(34px, 11vw, 56px);} } /* ========================================================================== ΤΗΛΕΦΩΝΟ ΣΕ ΟΡΙΖΟΝΤΙΑ ΘΕΣΗ — κρίνει το ΥΨΟΣ, όχι το πλάτος. Σε landscape τα περισσότερα τηλέφωνα ξεπερνούν τα 880px πλάτος (892, 926, 932), οπότε η μπάρα γύριζε στην κάθετη μορφή των 120px μέσα σε ύψος ~400px και έτρωγε και 120px padding από το σώμα. Κάτω από 520px ύψος μένει οριζόντια — και χαμηλώνει στα 68px, γιατί τα 96px της κατακόρυφης θέσης είναι το ένα τέταρτο μιας οθόνης 400px. ========================================================================== */ @media (max-height:520px){ .side-rail{padding:12px 16px 12px; min-height:68px;} .side-rail-logo{top:12px; bottom:12px;} .side-rail-logo img{height:26px;} /* Στόχοι αφής: ο κανόνας των 700px δεν πιάνει σε landscape, το χέρι όμως είναι το ίδιο. */ .nav-toggle{min-width:44px; min-height:44px; padding:8px; justify-content:center;} .side-rail-lang{min-height:44px;} /* Καθαρή ζώνη κάτω από τη μπάρα των 68px (12 + 44 + 12). */ .inner-main{padding-top:104px;} .robot-hero{padding-top:100px;} /* Το συρτάρι σε 400px ύψος: μικρότερα σκαλιά ώστε να χωράει το μενού. */ .mobile-menu-inner{padding:88px 26px 32px;} .mobile-menu > .mobile-menu-inner > .menu > li > a, .mobile-menu > .mobile-menu-inner > .menu > li > .menu-title{font-size:22px; padding:11px 0 11px 18px;} .mobile-menu .sub-menu{margin:10px 0 16px 5px; gap:10px;} .mobile-menu .sub-menu a{font-size:19px; min-height:38px;} } /* ========================================================================== ΕΡΓΑ — η κάρτα ως εξάρτημα πάνω στην πλακέτα. Επίπεδη επιφάνεια με σήμανση silkscreen, σε αντίθεση με τις ανάγλυφες κάρτες του blog: ένα έργο δεν είναι άρθρο και δεν πρέπει να το μοιάζει. ========================================================================== */ .ergo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:22px;} .ergo-card{ position:relative; display:flex; flex-direction:column; gap:12px; padding:26px 22px 22px; text-decoration:none; background:linear-gradient(158deg,#16242a 0%,#101c21 62%,#0b1417 100%); border:1px solid #35505a; border-radius:14px; transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } /* Σήμανση silkscreen σε δύο αντιδιαμετρικές γωνίες. */ .ergo-card::before, .ergo-card::after{ content:''; position:absolute; width:13px; height:13px; pointer-events:none; border-color:var(--line); transition:border-color .35s var(--ease); } .ergo-card::before{top:9px; left:9px; border-top:1px solid; border-left:1px solid;} .ergo-card::after{bottom:9px; right:9px; border-bottom:1px solid; border-right:1px solid;} .ergo-card:hover{ border-color:var(--accent); transform:translateY(-6px); box-shadow:0 24px 44px -18px rgba(0,0,0,.7), 0 0 24px -8px rgba(98,210,200,.45); } .ergo-card:hover::before, .ergo-card:hover::after{border-color:var(--accent);} .ergo-card:focus-visible{outline:2px solid var(--accent); outline-offset:3px;} .ergo-code{ position:absolute; top:14px; right:16px; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--accent); opacity:.75; } /* Λευκό πλακίδιο: 24 από τα 34 λογότυπα ΔΕΝ έχουν διαφάνεια, οπότε σε σκούρο φόντο θα έδειχναν ως ορθογώνια. */ .ergo-logo{ display:flex; align-items:center; justify-content:center; flex:none; height:78px; padding:12px 16px; border-radius:10px; background:#fff; } .ergo-logo img{max-height:100%; max-width:100%; width:auto; object-fit:contain; display:block;} /* Έργα χωρίς λογότυπο στο live: γυμνή πλακέτα αντί για κενό. */ .ergo-logo--none{ background:repeating-linear-gradient(135deg, rgba(140,190,190,.10) 0 6px, transparent 6px 12px), var(--rail); border:1px dashed rgba(140,190,190,.28); } .ergo-client{ font-family:var(--font-display); font-size:16px; font-weight:800; line-height:1.3; color:#fff; } .ergo-title{font-size:14px; line-height:1.55; color:var(--muted);} /* Το «Δείτε το έργο» ως διαδρομή χαλκού που επεκτείνεται. */ .ergo-more{ display:inline-flex; align-items:center; gap:10px; margin-top:auto; padding-top:6px; font-family:var(--font-display); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); } .ergo-more::before{ content:''; width:14px; height:1px; background:var(--accent); transition:width .35s var(--ease), box-shadow .35s var(--ease); } .ergo-card:hover .ergo-more::before{width:30px; box-shadow:0 0 8px rgba(95,208,198,.9);} /* ---------- ΕΡΓΑ: αναλυτική προβολή ---------- */ .ergo-back{ display:inline-flex; align-items:center; min-height:44px; margin-bottom:14px; font-family:var(--font-display); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); } .ergo-back:hover{color:var(--cyan);} .ergo-detail{max-width:900px;} .ergo-detail-head{display:flex; align-items:center; gap:26px; margin-bottom:30px; flex-wrap:wrap;} .ergo-logo--lg{height:112px; padding:16px 22px; border-radius:12px;} .ergo-detail .ergo-code{position:static; display:block; margin-bottom:10px; font-size:13px; opacity:1;} .ergo-detail .ergo-client{font-size:clamp(20px,2.6vw,30px); line-height:1.25;} .ergo-detail .ergo-title{font-size:16px; line-height:1.7; color:var(--ink); margin:0 0 34px;} .ergo-scope-head{ font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; } /* Δίαυλος με λήψεις — ίδια γλώσσα με το υπομενού. */ .ergo-scope{ list-style:none; margin:0; padding:2px 0 2px 24px; display:flex; flex-direction:column; gap:16px; border-left:1px solid rgba(140,190,190,.22); } .ergo-scope li{position:relative; font-size:15.5px; line-height:1.6; color:var(--ink);} .ergo-scope li::before{ content:''; position:absolute; left:-24px; top:.7em; width:16px; height:1px; background:rgba(140,190,190,.34); } .ergo-scope li::after{ content:''; position:absolute; left:-11px; top:.7em; width:7px; height:7px; margin-top:-3px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(95,208,198,.5); } @media (max-width:700px){ .ergo-grid{gap:16px;} .ergo-card{padding:22px 18px 18px;} .ergo-logo{height:66px;} .ergo-logo--lg{height:88px;} .ergo-detail-head{gap:18px;} } /* ---------- ΛΩΡΙΔΑ ΠΛΑΚΕΤΑΣ ΣΤΟ ΤΗΛΕΦΩΝΟ: στρογγυλά via και pad ---------- Μέσα στο SVG με preserveAspectRatio="none" κάθε κύκλος γινόταν πλακουτσωτή έλλειψη. Εδώ είναι στοιχεία CSS πάνω από τη λωρίδα: το --x τα τοποθετεί κατά μήκος, το --t κρατά την ίδια λογική ανάμματος με τη διαδρομή. */ .rc-h-dots{display:none;} @media (max-width:880px), (max-height:520px){ .rc-h-dots{position:absolute; inset:0; display:block; pointer-events:none;} .rc-h-dots i{ position:absolute; left:var(--x); top:var(--y, 50%); transform:translate(-50%,-50%); border-radius:50%; box-sizing:border-box; transition:opacity .2s linear, box-shadow .2s linear; } .rc-h-via{ width:9px; height:9px; background:var(--rail); border:2px solid var(--cyan); opacity:clamp(.25, calc(.25 + (var(--scroll,0) - var(--t,0)) * 12), 1); box-shadow:0 0 calc(6px * clamp(0, calc((var(--scroll,0) - var(--t,0)) * 12), 1)) var(--cyan); } .rc-h-pad{ width:6px; height:6px; background:var(--cyan); opacity:clamp(.18, calc(.18 + (var(--scroll,0) - var(--t,0)) * 12), 1); } /* Χωρίς pad άκρων: γεμάτα με το χρώμα της μπάρας, έτρωγαν 18px χαλκού σε κάθε πλευρά και η διαδρομή έμοιαζε να μην πιάνει τα άκρα. Ο δίαυλος βγαίνει τώρα έξω από την οθόνη — γι' αυτό είναι δίαυλος. */ .rc-h .rc-line{stroke:rgba(140,190,190,.34);} /* ΤΟ ΡΕΥΜΑ ΣΤΟ ΤΗΛΕΦΩΝΟ: αποκάλυψη με clip, όχι με stroke-dasharray. Το οριζόντιο SVG έχει viewBox 1000×100 σε ~400px πλάτος — κλίμακα 10:1 — και με vector-effect="non-scaling-stroke" το dash δεν μετριέται σε μονάδες pathLength, οπότε η γραμμή δεν γέμιζε ποτέ: άναβαν μόνο τα via, που είναι απλά στοιχεία CSS. Το clip κόβει από δεξιά ό,τι απομένει και ακολουθεί ακριβώς τη διαδρομή, σκαλοπάτια και όλα. */ .rc-charge-h{ stroke-dasharray:none; clip-path:inset(0 calc((1 - var(--scroll, 0)) * 100%) 0 0); transition:clip-path .1s linear; } } @media (prefers-reduced-motion: reduce){ .rc-charge-h{transition:none;} } /* Πολύ στενή οθόνη (<=360px): η ετικέτα «ΓΛΩΣΣΑ» ακουμπούσε το λογότυπο — 115px η μία, 111px το άλλο. Μένει η σημαία· ο σύνδεσμος έχει ήδη aria-label. */ @media (max-width:360px){ .side-rail-lang-label{display:none;} .side-rail-logo img{height:28px;} } /* ---------- ΤΗΛΕΦΩΝΟ: ζώνη αποκλεισμού γύρω από κάθε εξάρτημα ---------- Η διαδρομή περνά τώρα μέσα από τη ζώνη των χειριστηρίων, όπως ακριβώς περνά πίσω από το χάμπουργκερ στην κάθετη μπάρα. Ο χαλκός σβήνει απαλά καθώς πλησιάζει το καθένα — καμία διαδρομή δεν περνά κάτω από εξάρτημα. */ @media (max-width:880px), (max-height:520px){ .side-rail-lang{position:relative; z-index:1;} .side-rail-logo::before, .side-rail-lang::before, .nav-toggle::before{ content:''; position:absolute; left:50%; top:50%; z-index:-1; width:calc(100% + 30px); height:calc(100% + 18px); transform:translate(-50%,-50%); pointer-events:none; background:radial-gradient(50% 50% at 50% 50%, #0a1013 54%, rgba(10,16,19,.9) 74%, rgba(10,16,19,0) 100%); } } /* ========================================================================== ΥΠΟΣΕΛΙΔΟ ΣΕ ΤΗΛΕΦΩΝΟ — μία στήλη. Οι δύο στήλες κρατούσαν το κενό των 54px του desktop, οπότε σε οθόνη 390px έμεναν 136px η καθεμία (326px ωφέλιμα − 54). Εκεί μέσα: · τα δύο βραβεία των 66px χρειάζονταν 158px και έμπαιναν το ένα κάτω από το άλλο — αυτό που φαινόταν ως «στοιβαγμένες εικόνες» · η διεύθυνση και το κείμενο έσπαγαν στα ~16 γράμματα ανά σειρά ========================================================================== */ @media (max-width:700px){ .footer-grid{grid-template-columns:1fr; gap:34px; padding-bottom:30px;} .footer-grid p{max-width:none;} footer.site-footer{padding:44px 0 24px;} .footer-logo{height:44px; margin-bottom:14px;} /* Σε 52px ύψος τα τέσσερα ISO πιάνουν 216px — χωρούν σε μία σειρά. */ .footer-badges{gap:16px;} .footer-badges .iso-badge img{height:52px;} .footer-certs h4{margin-bottom:12px;} .footer-certs .cert-group + .cert-group{margin-top:20px; padding-top:18px;} .footer-bottom{justify-content:center; text-align:center;} .interreg-links{gap:8px 18px; justify-content:center;} .interreg-foot{margin-top:26px; padding-top:20px;} } /* ========================================================================== ΛΙΣΤΑ ΑΠΟ ΚΑΡΤΕΣ ΚΑΙ ΕΙΚΟΝΑ-ΑΝΤΙΚΑΤΑΣΤΑΤΗΣ ========================================================================== */ /* -------------------------------------------------------------------------- ΛΙΣΤΑ ΜΕ ΚΟΜΒΟΥΣ Τα στοιχεία δεν είναι βήματα — είναι σημεία του ίδιου συστήματος. Ο δείκτης είναι κόμβος (τετράγωνο σήμα) με τον κωδικό μέσα, όχι αριθμός ακολουθίας. -------------------------------------------------------------------------- */ .feature-list{ position:relative; padding-left:44px; margin:24px 0 32px; display:flex; flex-direction:column; gap:0; } /* Καμία κάθετη γραμμή που να ενώνει τους κόμβους: περνούσε μέσα από τα ημιδιαφανή κουτιά και διαβαζόταν σαν λάθος. Ο διαχωρισμός γίνεται με λεπτή γραμμή κάτω από κάθε στοιχείο. */ .feature-list li{ position:relative; /* άγκυρα του κόμβου — χωρίς αυτό στοιβάζονται όλοι */ display:grid; grid-template-columns:1fr; row-gap:5px; align-items:start; padding:15px 0; border-bottom:1px solid color-mix(in srgb, var(--line) 42%, transparent); font-size:16px; color:var(--ink); font-weight:500; } .feature-list li:last-child{border-bottom:none;} /* Ο κόμβος: τετράγωνο περιγράμματος με τον κωδικό μέσα. */ .feature-list li::before{ content:'0'attr(data-i); /* top: ώστε το κέντρο του κόμβου να πέφτει στη μεσαία γραμμή του τίτλου. */ position:absolute; left:-44px; top:10px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:12px; font-weight:800; letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--accent); /* Ημιδιαφανές, όχι --bg: η λίστα ζει και μέσα σε κάρτα, όπου το φόντο αλλάζει. */ background:color-mix(in srgb, var(--accent) 9%, transparent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:9px; transition:border-color .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease); } .feature-list li:not([data-i])::before{content:counter(ortem-fl, decimal-leading-zero);} /* Ο κόμβος «συνδέεται» στο hover — ένα LED αισθητήρα, τίποτα παραπάνω. */ .feature-list li:hover::before{ border-color:var(--accent); color:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); } .feature-list li>strong{ color:var(--ink); font-weight:700; font-size:18px; line-height:1.4; letter-spacing:-.005em; } .feature-list .fl-txt{ font-weight:400; color:var(--muted); font-size:16.5px; line-height:1.65; max-width:62ch; } /* Στα φαρδιά, τίτλος και κείμενο σε δύο στήλες — ο τίτλος σε σταθερό πλάτος ώστε τα κείμενα να ξεκινούν όλα από την ίδια γραμμή. */ @media (min-width:1024px){ .feature-list li{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); column-gap:28px; row-gap:0; } .feature-list li>strong{grid-column:1;} .feature-list .fl-txt{grid-column:2;} /* Χωρίς κείμενο, ο τίτλος παίρνει όλο το πλάτος αντί να μένει στριμωγμένος. */ .feature-list li:not(:has(.fl-txt))>strong{grid-column:1 / -1;} } @media (prefers-reduced-motion:reduce){ .feature-list li::before{transition:none;} } /* Σήμα ORTEM στη θέση φωτογραφίας — μόνο μέσα σε .media-frame, ώστε να μην πιάνει τα λογότυπα της πλαϊνής μπάρας, του συρταριού και του υποσέλιδου. */ .media-frame img[src*="ortem-logo-white"], .media-frame img[src*="ortem-placeholder"]{ object-fit:contain; padding:12%; opacity:.55; background:var(--panel); } /* -------------------------------------------------------------------------- Ο ΚΟΜΒΟΣ ΣΤΙΣ ΚΑΡΤΕΣ Ίδιο σήμα με τη λίστα, σε μεγαλύτερο μέγεθος: η κάρτα και η γραμμή λίστας είναι η ΙΔΙΑ μονάδα σε δύο μορφές, όχι δύο άσχετα σχέδια. -------------------------------------------------------------------------- */ .value-card .n, .wf-step .n{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--accent); opacity:1; border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius:10px; background:color-mix(in srgb, var(--accent) 7%, transparent); transition:border-color .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease); } .value-card:hover .n, .wf-step:hover .n{ border-color:var(--accent); color:var(--cyan); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); } /* Το ✦ των «Αξιών» δεν είναι κωδικός σημείου: σύμβολο, όχι πλαίσιο κόμβου. */ .value-card .n.is-mark{ width:auto; height:auto; border:none; background:none; font-size:26px; line-height:1; justify-content:flex-start; } .value-card .n{flex:none;} @media (prefers-reduced-motion:reduce){ .value-card .n, .wf-step .n{transition:none;} } /* ========================================================================== ΕΦΑΡΜΟΓΕΣ ΣΕΙΡΑΣ Z — η αναλυτική σελίδα Κάθε εφαρμογή ένα μπλοκ με σήμα «Z», όνομα και τομέα. Το anchor της κάθε μιας δέχεται τις κάρτες της Αρχικής. ========================================================================== */ .app-block{padding:44px 0; border-top:1px solid var(--line); scroll-margin-top:110px;} .app-block:first-of-type{border-top:none; padding-top:20px;} .app-block-head{display:flex; align-items:center; gap:18px; margin-bottom:18px;} .app-mark{ flex:none; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent); border:1px solid color-mix(in srgb, var(--accent) 38%, transparent); } .app-name{font-size:clamp(24px,2.8vw,32px); font-weight:800; color:#fff; line-height:1.15;} /* Χωρίς κεφαλαία και αραίωση: τομείς σαν «Συνέδρια και επαγγελματικές εκδηλώσεις» θα ξεχείλιζαν σε δεύτερη γραμμή. */ .app-sector{ display:block; margin-top:5px; font-size:16px; font-weight:600; letter-spacing:0; color:var(--accent); } .app-intro{font-size:17.5px; line-height:1.75; max-width:74ch; margin:0 0 12px;} .app-origin{ font-size:15.5px; line-height:1.7; max-width:74ch; margin:0; color:var(--muted); padding-left:16px; border-left:2px solid color-mix(in srgb, var(--accent) 30%, transparent); } @media (max-width:640px){ .app-block{padding:32px 0;} .app-block-head{gap:14px;} .app-mark{width:40px; height:40px; font-size:18px;} } /* ========================================================================== ΠΡΟΕΠΙΛΕΓΜΕΝΗ ΣΤΟΙΧΙΣΗ — πλήρης, όπως το Ctrl+J του Word ========================================================================== */ /* Ισχύει στις στήλες κειμένου κάθε σελίδας: στήλη split, σώμα άρθρου/σελίδας, κεφαλίδα. ΟΧΙ σε στενά πλαίσια (υποσέλιδο, κάρτες, λίστες, tagline) — κάτω από ~30 χαρακτήρες στη γραμμή, η πλήρης στοίχιση ανοίγει τρύπες. Το :where() δεν προσθέτει βάρος, οπότε κάθε κλάση που στοιχίζει ήδη ρητά (.cta, .hero--center, .oc-align-*) κερδίζει και μένει ως ήταν. */ :where(.copy,.entry-content,.page-head){text-align:justify;} /* Μέσα στη στήλη μένουν έξω οι τίτλοι, οι λίστες, οι κάρτες και τα πεδία. */ :where(.copy,.entry-content,.page-head) :where(h1,h2,h3,h4,h5,h6, ul,ol,li,dl,dt,dd, .value-card,.wf-step,.stat,.post-card,.carousel-card,.proj-card, .ergo-card,.job-card,.client-card,.logo-card, input,textarea,select,button){text-align:left;} /* Ρητή στοίχιση ενότητας: τίτλοι και λίστες ακολουθούν το πλαίσιο, όπως πριν. */ .oc-align-center :where(h1,h2,h3,h4,ul,ol,li,dl,dt,dd), .oc-align-right :where(h1,h2,h3,h4,ul,ol,li,dl,dt,dd){text-align:inherit;} /* Ρητή πλήρης στοίχιση ενότητας: πιάνει τα κείμενα, ΠΟΤΕ τίτλους, λίστες και κάρτες. */ .oc-align-justify :where(h1,h2,h3,h4,h5,h6, ul,ol,li,dl,dt,dd, .value-card,.wf-step,.stat,.post-card,.carousel-card,.proj-card, .ergo-card,.job-card,.client-card,.logo-card){text-align:left;} /* ========================================================================== ΡΥΘΜΙΣΕΙΣ ΑΠΟ ΤΗ ΔΙΑΤΑΞΗ ΣΕΛΙΔΑΣ — στοίχιση και θέση τίτλου ========================================================================== */ /* Στοίχιση κειμένου. Οι κάρτες και τα πλέγματα ακολουθούν κι αυτά, ώστε η επιλογή να μη μοιάζει να «πιάνει» μόνο μισή ενότητα. */ .oc-align-left, .oc-align-left .copy, .oc-align-left .value-card, .oc-align-left .wf-step, .oc-align-left .stat{text-align:left;} .oc-align-center,.oc-align-center .copy, .oc-align-center .value-card, .oc-align-center .wf-step, .oc-align-center .stat{text-align:center;} .oc-align-right, .oc-align-right .copy, .oc-align-right .value-card, .oc-align-right .wf-step, .oc-align-right .stat{text-align:right;} /* Πλήρης στοίχιση, όπως το Ctrl+J του Word: και τα δύο άκρα ίσια. Οι κάρτες και οι λίστες εξαιρούνται — πιάνουν μόνο τα κείμενα της ενότητας. */ .oc-align-justify,.oc-align-justify .copy{text-align:justify;} /* Στο κέντρο και δεξιά, τα στοιχεία μιας κάρτας πρέπει να ακολουθήσουν — αλλιώς ο αριθμός και τα κουμπιά μένουν κολλημένα αριστερά. */ .oc-align-center .value-card, .oc-align-center .wf-step{align-items:center;} .oc-align-right .value-card, .oc-align-right .wf-step{align-items:flex-end;} .oc-align-center .robot-cta-row, .oc-align-center .cta-row{justify-content:center;} .oc-align-right .robot-cta-row, .oc-align-right .cta-row{justify-content:flex-end;} .oc-align-center .section-label{justify-content:center;} .oc-align-right .section-label{justify-content:flex-end;} /* Η γραμμή της ετικέτας τραβάει όλο τον χώρο· στο κέντρο/δεξιά περισσεύει. */ .oc-align-center .section-label .rule, .oc-align-right .section-label .rule{display:none;} /* Τίτλος πάνω από την εικόνα: βγαίνει έξω από το split και πιάνει όλο το πλάτος. Εδώ έχει χώρο, οπότε επανέρχεται στο κανονικό μέγεθος τίτλου. */ .oc-head-top .oc-head{ font-size:clamp(32px,4.2vw,47px); line-height:1.12; max-width:26ch; margin-bottom:36px; } .oc-align-center.oc-head-top .oc-head{max-width:none;} .oc-align-right.oc-head-top .oc-head{max-width:none;} @media (max-width:880px){ .oc-head-top .oc-head{max-width:none; margin-bottom:26px;} } /* Θέση λίστας. Μετακινείται ΟΛΟ το πλαίσιο, όχι τα γράμματα: η λίστα μαζεύεται στο πλάτος του περιεχομένου της και σπρώχνεται με αυτόματα περιθώρια, ώστε να πέφτει πάνω από το κουμπί. Ανεξάρτητο από τη στοίχιση κειμένου. */ .oc-list-center .feature-list, .oc-list-right .feature-list{ width:fit-content; max-width:100%; } .oc-list-center .feature-list{margin-left:auto; margin-right:auto;} .oc-list-right .feature-list{margin-left:auto; margin-right:0;} /* Στα στενά δεν περισσεύει χώρος για μετακίνηση — η λίστα ξαναπιάνει το πλάτος. */ @media (max-width:880px){ .oc-list-center .feature-list, .oc-list-right .feature-list{width:auto; margin-left:0; margin-right:0;} } /* ---------- ΜΕΝΟΥ ΣΕ ΚΑΡΤΕΣ (inc/menu-settings.php) ---------- Το συρτάρι είναι πλακέτα: κάθε εγγραφή ένα άρθρωμα με λεπτό περίγραμμα χαλκού, χωρίς εικονίδιο. Φωτογραφία έχουν ΜΟΝΟ τα ρομπότ — είναι το ένα σημείο όπου το μενού δείχνει αντί να ονομάζει. */ .mobile-menu.is-cards{ background: radial-gradient(130% 42% at 50% -4%, rgba(95,208,198,.13), transparent 70%), linear-gradient(180deg, rgba(18,58,74,.55), rgba(10,36,48,.55)), var(--rail); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .mobile-menu.is-cards .mobile-menu-inner{ padding:clamp(46px,6vh,92px) clamp(16px,3vw,44px) clamp(30px,5vh,60px); } .om-eyebrow{margin:0 0 clamp(14px,2.4vh,26px);} .om-eyebrow span{ display:block; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); } .om-eyebrow i{ display:block; width:30px; height:2px; margin-top:9px; background:var(--accent); box-shadow:0 0 10px rgba(95,208,198,.55); } .ortem-menu{ --om-fill:rgba(95,208,198,.075); --om-edge:rgba(95,208,198,.22); --om-edge-hi:rgba(124,230,219,.62); list-style:none; margin:0; padding:0; max-width:620px; display:flex; flex-direction:column; gap:10px; } .om-item{ border:1px solid var(--om-edge); border-radius:12px; background:var(--om-fill); } .om-item:hover{border-color:var(--om-edge-hi); background:rgba(95,208,198,.11);} .om-item.is-current{border-color:var(--om-edge-hi); background:rgba(95,208,198,.13);} .om-card{ position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:56px; margin:0; padding:15px 16px; background:none; border:0; border-radius:12px; text-align:left; cursor:pointer; color:#fff; text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.25; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .om-item.is-current > .om-card{color:var(--cyan);} .om-card:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;} /* Pad χαλκού στην αριστερή ακμή: το ένα και μοναδικό στολίδι της κάρτας. */ .om-card::before{ content:''; position:absolute; left:-1px; top:50%; width:2px; height:0; background:var(--accent); border-radius:0 2px 2px 0; transform:translateY(-50%); transition:height .3s var(--ease), box-shadow .3s var(--ease); } .om-item:hover > .om-card::before, .om-card:focus-visible::before, .om-item.is-open > .om-card::before{height:22px; box-shadow:0 0 10px rgba(95,208,198,.6);} .om-item.is-current > .om-card::before{height:26px; box-shadow:0 0 12px rgba(95,208,198,.75);} .om-label{flex:1 1 auto; min-width:0; overflow-wrap:break-word;} .om-chev{ flex:none; width:17px; height:17px; color:var(--accent); opacity:.7; transition:transform .3s var(--ease), opacity .3s var(--ease); } .om-chev svg{width:100%; height:100%; display:block;} .om-leaf:hover .om-chev{transform:translateX(3px); opacity:1;} .om-group:hover .om-caret{opacity:1;} .om-item.is-open > .om-head .om-caret{transform:rotate(180deg); opacity:1;} /* Πτυσσόμενο χωρίς μέτρημα ύψους σε JavaScript: 0fr → 1fr. */ .om-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease);} .om-item.is-open > .om-panel{grid-template-rows:1fr;} .om-panel-in{overflow:hidden; min-height:0;} /* Μορφή «Λίστα με κουκκίδες» */ .om-list{list-style:none; margin:0; padding:0 14px 12px 18px; display:flex; flex-direction:column;} .om-list a{ display:flex; align-items:center; gap:11px; min-height:42px; padding:8px 4px; color:var(--muted); text-decoration:none; font-size:15px; font-weight:600; transition:color .25s var(--ease), transform .25s var(--ease); } .om-dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent-dim); transition:background .25s var(--ease), box-shadow .25s var(--ease); } .om-list a:hover, .om-list a.is-current{color:#fff; transform:translateX(4px);} .om-list a:hover .om-dot, .om-list a.is-current .om-dot{background:var(--cyan); box-shadow:0 0 9px var(--cyan);} /* Μορφή «Κάρτες» */ .om-subcards{display:flex; flex-direction:column; gap:8px; padding:2px 12px 12px;} .om-subcard{ display:flex; align-items:center; gap:12px; min-height:52px; padding:11px 13px; border:1px solid rgba(95,208,198,.18); border-radius:10px; background:rgba(95,208,198,.05); color:#e9f4f5; text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:14.5px; line-height:1.3; transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); } .om-subcard:hover, .om-subcard.is-current{border-color:var(--om-edge-hi); background:rgba(95,208,198,.10); color:#fff;} .om-subcard .om-chev{width:15px; height:15px;} .om-subcard:hover .om-chev{transform:translateX(3px); opacity:1;} /* Μορφή «Πλακίδια με φωτογραφία» — μόνο εδώ μπαίνουν εικόνες. */ .om-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px; padding:2px 12px 12px; } .om-tile{ display:flex; align-items:center; gap:10px; min-height:64px; padding:9px 10px; border:1px solid rgba(95,208,198,.18); border-radius:10px; background:rgba(95,208,198,.05); text-decoration:none; transition:border-color .25s var(--ease), background .25s var(--ease); } .om-tile:hover, .om-tile.is-current{border-color:var(--om-edge-hi); background:rgba(95,208,198,.10);} .om-tile.is-plain{justify-content:center; text-align:center;} .om-tile-img{flex:none; width:40px; height:48px; display:flex; align-items:center; justify-content:center;} .om-tile-img img{ max-width:100%; max-height:100%; width:auto; height:auto; display:block; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); } .om-tile-name{ min-width:0; overflow-wrap:break-word; color:#fff; font-family:var(--font-display); font-weight:600; font-size:13.5px; line-height:1.25; } /* Είσοδος με κλιμάκωση. Η καθυστέρηση δίνεται ΜΟΝΟ στα δύο πρώτα properties, αλλιώς θα καθυστερούσε και το hover του περιγράμματος. */ .mobile-menu.is-cards .om-eyebrow, .mobile-menu.is-cards .om-item{ opacity:0; transform:translateX(-16px); transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); } .mobile-menu.is-cards.open .om-eyebrow, .mobile-menu.is-cards.open .om-item{ opacity:1; transform:none; transition-delay:calc(.08s + var(--om-i,0) * .055s), calc(.08s + var(--om-i,0) * .055s), 0s, 0s; } /* Τηλέφωνο & οριζόντια μπάρα: το πρώτο κουτί ξεκινά κάτω από τα 96px της. */ @media (max-width:880px), (max-height:520px){ .mobile-menu.is-cards .mobile-menu-inner{padding:112px 16px 40px;} body.admin-bar .mobile-menu.is-cards .mobile-menu-inner{padding-top:146px;} .ortem-menu{max-width:none;} .om-tiles{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:782px){ body.admin-bar .mobile-menu.is-cards .mobile-menu-inner{padding-top:158px;} } /* Χαμηλή οθόνη (τηλέφωνο σε landscape): τα πάντα πιο σφιχτά, ώστε να χωρούν. */ @media (max-height:520px){ .mobile-menu.is-cards .mobile-menu-inner{padding-top:106px; padding-bottom:26px;} .ortem-menu{gap:7px;} .om-card{min-height:46px; padding:11px 14px; font-size:15px;} .om-list a{min-height:36px; padding:6px 4px; font-size:14px;} .om-subcard{min-height:44px; padding:9px 12px; font-size:13.5px;} .om-tile{min-height:52px;} .om-tile-img{width:32px; height:38px;} } @media (prefers-reduced-motion: reduce){ .mobile-menu.is-cards .om-eyebrow, .mobile-menu.is-cards .om-item{opacity:1; transform:none; transition:none;} .om-panel, .om-card::before, .om-chev, .om-list a, .om-dot, .om-subcard, .om-tile{transition:none;} } /* ---------- ΔΕΙΚΤΗΣ ΚΥΛΙΣΗΣ ΣΤΗ ΣΕΛΙΔΑ ΡΟΜΠΟΤ ---------- Το ίδιο στοιχείο με την αρχική (.scroll-cue): χωρίς αυτόν το hero διαβαζόταν ως ολόκληρη η σελίδα και η «Γνωριμία» από κάτω δεν βρισκόταν ποτέ. Εδώ είναι σύνδεσμος, ώστε στο τηλέφωνο να δουλεύει και με πάτημα. */ .robot-hero .scroll-cue{ position:absolute; left:clamp(20px,4vw,48px); bottom:26px; z-index:2; display:flex; align-items:center; gap:10px; width:fit-content; color:var(--muted); font-size:12px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; opacity:0; animation:riseIn .8s var(--ease) 1.1s forwards; transition:color .3s var(--ease); } .robot-hero .scroll-cue:hover{color:var(--accent);} .robot-hero .scroll-cue:hover .line{background:var(--accent-dim);} .robot-hero .scroll-cue:focus-visible{outline:2px solid var(--cyan); outline-offset:6px;} /* Στο τηλέφωνο το hero είναι ψηλότερο από την οθόνη: ο δείκτης μπαίνει στη ροή, στο τέλος του, αντί να κάθεται πάνω στη φωτογραφία. */ @media (max-width:880px){ .robot-hero .scroll-cue{position:static; margin:26px auto 0;} } @media (prefers-reduced-motion: reduce){ .robot-hero .scroll-cue{animation:none; opacity:1;} }