/* ============================================================ EpiFlow — ενημερωτικό site (www.epiflow.gr) Χωρίς build βήμα και χωρίς εξωτερικά αιτήματα: ένα CSS, ένα HTML, τα assets του λογοτύπου δίπλα τους. Οι γραμματοσειρές είναι του συστήματος επίτηδες — ένα site που φορτώνει Google Fonts στέλνει την IP κάθε επισκέπτη σε τρίτη χώρα, και η υπηρεσία απευθύνεται σε γραφεία που ρωτούν πρώτα για GDPR. Η παλέτα είναι υποσύνολο του clientapp/src/styles/tokens.css και κρατά τα ίδια ονόματα, ώστε μια αλλαγή ταυτότητας να βρίσκεται με grep και στα δύο σημεία. **Μόνο light.** Σε αντίθεση με το app, εδώ δεν υπάρχει σκούρο θέμα — ούτε από ρύθμιση, ούτε από το prefers-color-scheme του λειτουργικού. Το `color-scheme: light` στο το δηλώνει και στον browser, ώστε να μη «γυρίσει» μόνος του φόρμες και scrollbars. Το navy της κεφαλίδας, του hero και του υποσέλιδου δεν είναι σκούρο θέμα: είναι σταθερή επιφάνεια της ταυτότητας. ============================================================ */ :root { /* Και στο CSS, όχι μόνο στο : το meta το διαβάζουν οι browsers σε διαφορετικές στιγμές, ενώ αυτό ισχύει από τη στιγμή που φορτώνει το φύλλο στυλ. */ color-scheme: light; --navy-900: #0b2534; --navy-950: #081c28; --accent-300: #5eead4; --color-bg: #f8fafc; --color-surface: #ffffff; --color-surface-2: #f1f5f9; --color-border: #e2e8f0; --color-text: #0f172a; --color-text-secondary: #475569; --color-text-muted: #64748b; --color-primary: #0e7490; --color-primary-hover: #155e75; --color-primary-subtle: #ecfeff; --color-on-primary: #ffffff; --color-focus-ring: #0e7490; /* Σταθερή επιφάνεια της ταυτότητας: κεφαλίδα, hero, κλείσιμο, υποσέλιδο. */ --color-navy: var(--navy-900); --color-on-navy: #f1f5f9; /* Το κείμενο των εισαγωγών: σκούρο πετρόλ αντί για ουδέτερο γκρι, ώστε η παράγραφος κάτω από τον τίτλο να ανήκει στην ταυτότητα και όχι στο πλαίσιο. 7.1:1 στο --color-bg. */ --color-text-brand: #2c5265; --shadow-card: 0 1px 2px rgb(20 22 40 / 0.06), 0 8px 24px -12px rgb(20 22 40 / 0.12); --shadow-card-hover: 0 2px 4px rgb(20 22 40 / 0.07), 0 18px 36px -16px rgb(14 116 144 / 0.35); --radius: 12px; --measure: 68ch; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } /* Χωρίς κίνηση, το hover μένει: σκιά και περίγραμμα, όχι μετατόπιση. */ .card:hover { transform: none !important; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.5em; } h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); } h3 { font-size: 1.125rem; } p { margin: 0 0 1em; max-width: var(--measure); } a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--color-primary-hover); } :where(a, button, summary):focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; border-radius: 4px; } img, svg { max-width: 100%; height: auto; } .wrap { width: min(100% - 2.5rem, 1120px); margin-inline: auto; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--color-surface); color: var(--color-text); padding: 0.6rem 1rem; border-radius: 8px; } /* ---------- Κουμπιά ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.35rem; border-radius: 10px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease; } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); } /* Πάνω στο navy της κεφαλίδας και του hero το πετρόλ δεν έχει αντίθεση· εκεί το κουμπί ενέργειας γίνεται teal με σκούρο κείμενο — η ίδια λύση που δίνει το app όπου το primary κάθεται σε σκούρα επιφάνεια. */ .on-navy .btn-primary { background: var(--accent-300); color: var(--navy-950); } .on-navy .btn-primary:hover { background: #99f6e4; color: var(--navy-950); } .btn-ghost { border-color: rgb(241 245 249 / 0.35); color: var(--color-on-navy); } .btn-ghost:hover { border-color: var(--accent-300); color: var(--accent-300); } /* ---------- Κεφαλίδα ---------- */ .site-header { background: var(--color-navy); color: var(--color-on-navy); position: sticky; top: 0; z-index: 5; } .site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; padding-block: 0.75rem; flex-wrap: wrap; } .brand img { height: 30px; display: block; } .site-nav { display: flex; gap: 1.25rem; margin-inline-start: auto; align-items: center; flex-wrap: wrap; } .site-nav a { color: var(--color-on-navy); text-decoration: none; font-size: 0.95rem; } .site-nav a:hover { color: var(--accent-300); } .site-nav .btn { font-size: 0.95rem; padding: 0.5rem 1rem; } /* ---------- Hero ---------- */ .hero { background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 60%, #06303f 100%); color: var(--color-on-navy); padding-block: clamp(3rem, 8vw, 5.5rem); } /* Δύο στήλες: το μήνυμα αριστερά, δείγμα δρομολογίου δεξιά. Η λωρίδα με τα στοιχεία πιάνει και τις δύο, από κάτω. */ .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; } .hero-message { min-width: 0; } .hero .hero-facts { grid-column: 1 / -1; } .hero h1 { color: #ffffff; max-width: 18ch; } .hero .lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: rgb(241 245 249 / 0.86); max-width: 56ch; } .hero-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.75rem; } .hero-note { margin-top: 1.1rem; font-size: 0.9rem; color: rgb(241 245 249 / 0.7); } .hero-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 2rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgb(241 245 249 / 0.16); } .hero-facts strong { display: block; color: var(--accent-300); font-size: 1.05rem; } .hero-facts span { color: rgb(241 245 249 / 0.75); font-size: 0.92rem; } /* ---------- Δείγμα δρομολογίου (hero) ---------- Σχεδιασμένο με HTML, όχι screenshot: δεν παλιώνει με το επόμενο deploy, δεν κατεβάζει εικόνα μερικών εκατοντάδων KB, και διαβάζεται και σε στενή οθόνη. Είναι διακοσμητικό (aria-hidden) — ό,τι λέει, το λέει ήδη το κείμενο δίπλα του. ΣΗΜΕΙΩΣΗ: προορίζεται να αντικατασταθεί από πραγματικό screenshot της εφαρμογής όταν υπάρξει ένα που να αντέχει σε δημόσια θέα (χωρίς αληθινά ονόματα και διευθύνσεις). */ .route-mock { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(241 245 249 / 0.16); border-radius: 14px; padding: 1.25rem; } .route-mock .mock-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid rgb(241 245 249 / 0.14); padding-bottom: 0.75rem; margin-bottom: 0.5rem; } .route-mock .mock-head strong { color: #ffffff; font-size: 0.98rem; } .route-mock .mock-head span { color: var(--accent-300); font-size: 0.82rem; white-space: nowrap; } .route-mock .stop { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0 0.85rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid rgb(241 245 249 / 0.08); } .route-mock .stop:last-child { border-bottom: none; } .route-mock .n { width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; background: rgb(94 234 212 / 0.16); color: var(--accent-300); } .route-mock .addr { color: #f1f5f9; font-size: 0.92rem; min-width: 0; } .route-mock .addr small { display: block; color: rgb(241 245 249 / 0.6); font-size: 0.8rem; } /* Οι καταστάσεις κρατούν τα σημασιολογικά χρώματα του app, σε εκδοχή για σκούρο φόντο. */ .route-mock .badge { font-size: 0.74rem; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; } .route-mock .b-served { background: rgb(74 222 128 / 0.16); color: #86efac; } .route-mock .b-now { background: rgb(94 234 212 / 0.18); color: var(--accent-300); } .route-mock .b-next { background: rgb(241 245 249 / 0.1); color: rgb(241 245 249 / 0.7); } .route-mock .b-urgent { background: rgb(248 113 113 / 0.16); color: #fca5a5; } @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 2.5rem; } } /* ---------- Ενότητες ---------- */ section { padding-block: clamp(3rem, 6vw, 4.5rem); } section:nth-of-type(even) { background: var(--color-surface-2); } .section-head { max-width: var(--measure); margin-bottom: 2.5rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; color: var(--color-primary); margin: 0 0 0.5rem; } .section-head p { color: var(--color-text-brand); margin-bottom: 0; } .grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-card); /* Το transform μπαίνει από τώρα ώστε η κάρτα να ζει σε δικό της layer και το hover να μη ζητά επανασχεδίαση της σελίδας. */ transform: translateY(0); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } /* Μόνο σε συσκευές με πραγματικό δείκτη. Στο κινητό ένα :hover «κολλάει» μετά το tap και η κάρτα μένει σηκωμένη χωρίς λόγο. */ @media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--color-primary); } } /* Οι κάρτες που περιέχουν σύνδεσμο (τα πλάνα) σηκώνονται και όταν ο σύνδεσμος πάρει εστίαση από πληκτρολόγιο — αλλιώς η ένδειξη υπάρχει μόνο για το ποντίκι. */ .card:focus-within { box-shadow: var(--shadow-card-hover); border-color: var(--color-primary); } .card h3 { margin-bottom: 0.35rem; } .card p { color: var(--color-text-secondary); margin-bottom: 0; font-size: 0.97rem; } /* ---------- Βήματα: κάθετη γραμμή χρόνου ---------- Και όχι κάρτες δίπλα-δίπλα: τέσσερα ισότιμα κουτιά διαβάζονται ως λίστα χαρακτηριστικών, ενώ εδώ η σειρά *είναι* το νόημα. Ο άξονας τη δείχνει χωρίς να την εξηγεί, το κείμενο κάθε βήματος μπορεί να έχει διαφορετικό μήκος χωρίς να χαλάσει τίποτα, και στο κινητό η μορφή είναι ήδη η σωστή — απλώς στενεύει. Οι αριθμοί βγαίνουν από counter και όχι από το markup: η σειρά ζει σε ένα σημείο, οπότε ένα βήμα που θα μπει στη μέση δεν αφήνει πίσω του λάθος νούμερα. */ .timeline { counter-reset: step; max-width: 900px; } .timeline article { display: grid; grid-template-columns: 3rem 1fr; gap: 0 1.5rem; padding-bottom: 2.25rem; } .timeline article:last-child { padding-bottom: 0; } /* Η γραμμή που ενώνει τα βήματα, με ένταση που φθίνει προς τα κάτω — το ίδιο νεύμα με το «Triple Fade» του λογοτύπου. Ξεκινά κάτω από τον κύκλο, γι' αυτό το margin. */ .timeline article::before { content: ""; grid-column: 1; grid-row: 1 / -1; justify-self: center; width: 2px; margin-top: 3rem; background: linear-gradient(to bottom, var(--color-primary), rgb(14 116 144 / 0.15)); } .timeline article:last-child::before { display: none; } .timeline .num { counter-increment: step; grid-column: 1; grid-row: 1; width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center; background: var(--color-surface); border: 2px solid var(--color-primary); color: var(--color-primary); font-weight: 700; font-size: 1.1rem; transition: background-color 0.18s ease, color 0.18s ease; } .timeline .num::after { content: counter(step); } .timeline .body { grid-column: 2; padding-top: 0.35rem; } .timeline h3 { margin-bottom: 0.3rem; } .timeline p { color: var(--color-text-secondary); margin: 0; } @media (hover: hover) and (pointer: fine) { .timeline article:hover .num { background: var(--color-primary); color: var(--color-on-primary); } } @media (max-width: 560px) { .timeline article { grid-template-columns: 2.25rem 1fr; gap: 0 1rem; } .timeline .num { width: 2.25rem; height: 2.25rem; font-size: 0.95rem; } } /* ---------- Δυνατότητες: λίστα δύο στηλών ---------- Χωρίς κουτιά, επίτηδες. Από πάνω η γραμμή χρόνου, από κάτω οι κάρτες των ρόλων· ένα τρίτο πλέγμα από περιγράμματα θα έκανε τη σελίδα τρεις παραλλαγές του ίδιου πράγματος. Εδώ μένουν εικονίδιο, τίτλος, κείμενο και μια λεπτή γραμμή — και οι έξι δυνατότητες χωρούν σε μία ματιά. */ .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3.5rem; max-width: 980px; } .features article { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; padding: 1.5rem 0; border-top: 1px solid var(--color-border); } /* Οι πρώτες γραμμές των δύο στηλών δεν θέλουν γραμμή από πάνω τους: εκεί τελειώνει ήδη η εισαγωγή της ενότητας. */ .features article:nth-child(-n + 2) { border-top: none; padding-top: 0; } .features h3 { margin: 0 0 0.3rem; } .features p { margin: 0; color: var(--color-text-secondary); font-size: 0.97rem; } /* Τα εικονίδια είναι γραμμικά και παίρνουν χρώμα από το currentColor του γονέα, ώστε ένα `color` να αρκεί για να αλλάξουν όλα μαζί. */ .icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .features .icon { color: var(--color-primary); margin-top: 0.2rem; transition: transform 0.18s ease; } @media (hover: hover) and (pointer: fine) { .features article:hover .icon { transform: scale(1.12); } } @media (max-width: 760px) { .features { grid-template-columns: 1fr; gap: 0; } /* Σε μία στήλη μόνο η πρώτη γραμμή είναι πρώτη — η δεύτερη ξαναποκτά διαχωριστικό. */ .features article:nth-child(2) { border-top: 1px solid var(--color-border); padding-top: 1.5rem; } } /* ---------- Για ποιον: καρτέλες ρόλων ---------- Χωρίς JavaScript: τρία radio του ίδιου name κρατούν την επιλογή και το `:checked ~` δείχνει το αντίστοιχο πάνελ. Έτσι η εναλλαγή δουλεύει με πληκτρολόγιο (βελάκια, όπως κάθε radio group), δουλεύει με κλειστό JS, και δεν χρειάζεται ούτε μία γραμμή κώδικα που θα μπορούσε να σπάσει. Γιατί καρτέλες: τρεις στήλες με κουκκίδες επαναλάμβαναν όσα λέει ήδη η λίστα των δυνατοτήτων από πάνω. Ένα κοινό τη φορά αφήνει χώρο για μια πραγματική παράγραφο για τον καθένα, στο ένα τρίτο του ύψους. */ .roles { max-width: 980px; } .roles input { position: absolute; opacity: 0; pointer-events: none; } .roles-tablist { display: flex; gap: 0.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); margin-bottom: 1.75rem; } .roles-tablist label { cursor: pointer; padding: 0.7rem 1.1rem; border-radius: 10px 10px 0 0; font-weight: 600; color: var(--color-text-muted); border: 1px solid transparent; border-bottom: none; /* Κάθεται πάνω στη γραμμή του tablist, ώστε η ενεργή καρτέλα να την «σπάει». */ margin-bottom: -1px; transition: color 0.18s ease, background-color 0.18s ease; } .roles-tablist label:hover { color: var(--color-primary); } /* Η εστίαση φαίνεται στην ετικέτα: το ίδιο το radio είναι κρυμμένο. */ .roles input:focus-visible + label { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } #role-secretary:checked ~ .roles-tablist label[for="role-secretary"], #role-bailiff:checked ~ .roles-tablist label[for="role-bailiff"], #role-firm:checked ~ .roles-tablist label[for="role-firm"] { color: var(--color-primary); background: var(--color-surface); border-color: var(--color-border); } .roles-panel { display: none; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; } #role-secretary:checked ~ .roles-panels #panel-secretary, #role-bailiff:checked ~ .roles-panels #panel-bailiff, #role-firm:checked ~ .roles-panels #panel-firm { display: grid; } .roles-panel h3 { font-size: 1.35rem; } .roles-panel > div p { color: var(--color-text-secondary); margin-bottom: 0; } .roles-panel ul { margin: 0; padding: 0; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; } .roles-panel li { position: relative; padding: 0.85rem 1.1rem 0.85rem 2.6rem; border-bottom: 1px solid var(--color-border); font-size: 0.95rem; } .roles-panel li:last-child { border-bottom: none; } .roles-panel li::before { content: ""; position: absolute; left: 1.1rem; top: 1.25rem; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--color-primary); } @media (max-width: 760px) { .roles-panel { grid-template-columns: 1fr; } } /* Σε στενή οθόνη οι τρεις ετικέτες τυλίγονται σε τρεις σειρές, και τότε η μεταφορά της «καρτέλας» που ακουμπά σε μια γραμμή δεν στέκει: γίνονται κουμπιά επιλογής. */ @media (max-width: 620px) { .roles-tablist { display: grid; gap: 0.5rem; border-bottom: none; margin-bottom: 1.5rem; } .roles-tablist label { border-radius: 10px; border: 1px solid var(--color-border); margin-bottom: 0; background: var(--color-surface); } #role-secretary:checked ~ .roles-tablist label[for="role-secretary"], #role-bailiff:checked ~ .roles-tablist label[for="role-bailiff"], #role-firm:checked ~ .roles-tablist label[for="role-firm"] { border-color: var(--color-primary); background: var(--color-primary-subtle); } } /* ---------- Συνδρομή: μία προσφορά, ένα κουμπί ---------- Και όχι πίνακας τιμολόγησης: τιμή δεν υπάρχει ακόμη να δειχθεί, οπότε τρεις στήλες σε στοίχιση σύγκρισης υπόσχονταν μια σύγκριση που δεν γινόταν — και η τρίτη («τα δεδομένα μένουν δικά σας») δεν ήταν καν πλάνο, ήταν όρος. Εδώ μένει μία πρόσκληση και, δίπλα της, οι όροι της: τι γίνεται μετά τη δοκιμή και τι γίνεται αν δεν συνεχίσετε. */ .offer { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.25rem; align-items: stretch; } .offer .offer-main { background: linear-gradient(150deg, var(--navy-900), #0d3d52); color: var(--color-on-navy); border-radius: var(--radius); padding: 2.25rem; display: flex; flex-direction: column; justify-content: center; } .offer .kicker { color: var(--accent-300); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.5rem; } .offer .offer-main h3 { color: #ffffff; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); margin-bottom: 0.5rem; } .offer .offer-main p { color: rgb(241 245 249 / 0.85); } .offer .offer-main .btn { align-self: flex-start; margin-top: 0.75rem; } .offer .offer-main small { display: block; margin-top: 0.9rem; color: rgb(241 245 249 / 0.65); font-size: 0.85rem; } .offer .offer-terms { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.75rem; } .offer .offer-terms h3 { margin: 0 0 0.75rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); } .offer .offer-terms h3 + ul { margin-bottom: 1.5rem; } .offer .offer-terms ul { list-style: none; margin: 0; padding: 0; } .offer .offer-terms li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--color-text-secondary); font-size: 0.95rem; } .offer .offer-terms li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--color-primary); } .offer .offer-terms p { margin: 1.5rem 0 0; font-size: 0.95rem; } @media (max-width: 860px) { .offer { grid-template-columns: 1fr; } } /* ---------- Συχνές ερωτήσεις ---------- Ανοιχτές, όχι accordion. Οι απαντήσεις είναι δύο-τρεις σειρές η καθεμία: ένα accordion θα έκρυβε λιγότερο κείμενο απ' όσο κόπο ζητούσε σε κλικ, και θα ανάγκαζε τον επισκέπτη να μαντέψει ποια ένσταση απαντιέται πού. Σε δύο στήλες χωρούν και οι έξι σε μία ματιά. */ .qa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3.5rem; max-width: 1000px; } .qa h3 { font-size: 1.02rem; margin: 0 0 0.4rem; padding-left: 1.75rem; position: relative; } .qa h3::before { content: "?"; position: absolute; left: 0; top: -0.05em; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--color-primary-subtle); color: var(--color-primary); font-size: 0.8rem; font-weight: 700; display: grid; place-items: center; } .qa p { margin: 0; padding-left: 1.75rem; color: var(--color-text-secondary); font-size: 0.95rem; } /* Η ερώτηση που δεν απαντήθηκε πρέπει να έχει πού να πάει — αλλιώς ο επισκέπτης φεύγει με αυτήν στο χέρι. */ .ask { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; max-width: 1000px; margin-top: 2.5rem; padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); } .ask div { flex: 1 1 340px; } .ask h3 { margin: 0 0 0.25rem; } .ask p { margin: 0; color: var(--color-text-secondary); font-size: 0.95rem; max-width: 60ch; } @media (max-width: 760px) { .qa { grid-template-columns: 1fr; gap: 1.5rem; } .ask .btn { width: 100%; } } /* ---------- Κλείσιμο & υποσέλιδο ---------- */ .cta { background: var(--color-navy); color: var(--color-on-navy); text-align: center; } .cta h2 { color: #ffffff; } .cta p { color: rgb(241 245 249 / 0.82); margin-inline: auto; } .cta .hero-actions { justify-content: center; } .site-footer { background: var(--navy-950); color: rgb(241 245 249 / 0.75); padding-block: 2.5rem; font-size: 0.9rem; } .site-footer .wrap { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .site-footer a { color: var(--accent-300); } .site-footer img { height: 26px; margin-bottom: 0.75rem; } .site-footer p { margin: 0 0 0.35rem; max-width: 40ch; } .site-footer h3 { color: #ffffff; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.07em; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 0.35rem; } .colophon { grid-column: 1 / -1; border-top: 1px solid rgb(241 245 249 / 0.14); padding-top: 1.25rem; font-size: 0.85rem; }