/* ========================================================================= ΣΠΦΣΚ — design system Κάθε απόφαση (μεγέθη, αποστάσεις, γωνίες, ταχύτητες) είναι μεταβλητή εδώ πάνω. Αλλάζεις την τιμή μία φορά, αλλάζει παντού — δεν κυνηγάς νούμερα μέσα στο αρχείο. ========================================================================= */ :root{ color-scheme: light; /* Κλίμακα τυπογραφίας: κάθε βήμα ~1.25x το προηγούμενο. Τα clamp() κάνουν τα μεγάλα μεγέθη να συρρικνώνονται μόνα τους στο κινητό. */ --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-md: 1.125rem; --t-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); --t-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); --t-2xl: clamp(2.2rem, 1.6rem + 2.8vw, 3.5rem); --t-3xl: clamp(3rem, 1.8rem + 5.5vw, 6.5rem); /* Αποστάσεις, σε βήματα 4px. --s-8/9/10 μειώθηκαν (ζητήθηκε ρητά "λίγο πιο κοντά, λιγότερο scroll") — ήταν 4rem/6rem/8rem, χρησιμοποιούνται σε .section padding + μεγάλα margins/gaps παντού στο site, άρα η μείωση εδώ σφίγγει ομοιόμορφα ΟΛΕΣ τις σελίδες χωρίς να αλλάξει περιεχόμενο. */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 3rem; --s-9: 4.5rem; --s-10: 6rem; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 2px 10px rgba(0,0,0,.35); --shadow-md: 0 12px 40px rgba(0,0,0,.45); --shadow-lg: 0 30px 80px rgba(0,0,0,.6); --ease: cubic-bezier(.22,.61,.36,1); --dur-fast: .18s; --dur: .32s; --dur-slow: .6s; --wrap: 1180px; --wrap-narrow: 720px; --wrap-wide: 1560px; /* Παράγωγα χρώματα. Το color-mix γλιτώνει το να ορίζουμε δεκάδες παραλλαγές με το χέρι — αν αλλάξει το --accent, ακολουθούν όλα. */ --line: color-mix(in srgb, var(--text) 12%, transparent); --line-strong: color-mix(in srgb, var(--text) 24%, transparent); --text-dim: color-mix(in srgb, var(--text) 92%, transparent); --text-faint: color-mix(in srgb, var(--text) 74%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); } *,*::before,*::after{ box-sizing: border-box; } /* scroll-behavior ΟΧΙ smooth: παίζει κακό με το ανά-καρέ scrollTo του smooth-scroll.js (βλ. σχόλιο εκεί) — οι δύο ταυτόχρονες ομαλοποιήσεις πάλευαν μεταξύ τους και "έτρωγαν" εντελώς τα anchor links (#contact κ.λπ. δεν έκαναν καθόλου scroll). Το smooth-scroll.js αναλαμβάνει μόνο του το animated scroll για τα anchor clicks· η αρχική (πλοήγηση από άλλη σελίδα ή απευθείας hash) μένει instant, που είναι σωστό/λειτουργικό αντί για σπασμένο. */ /* background και στο html (όχι μόνο στο body): χωρίς αυτό, το elastic/ rubber-band bounce του trackpad πέρα από κάθε άκρη της σελίδας άφηνε να φανεί το προεπιλεγμένο λευκό του browser για μια στιγμή — ζητήθηκε ρητά να διορθωθεί. */ html{ scroll-behavior: auto; scroll-padding-top: 90px; background: var(--ink); } body{ margin:0; background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: var(--t-base); line-height: 1.65; -webkit-font-smoothing: antialiased; /* clip (όχι hidden): κόβει το οριζόντιο ξεχείλισμα χωρίς να κάνει το body ξεχωριστό scroll container — το hidden έσπαγε το κλείδωμα scroll στο modal σε παλιότερο project. */ overflow-x: clip; } img{ max-width:100%; height:auto; display:block; } a{ color: inherit; } button{ font: inherit; color: inherit; } h1,h2,h3{ font-family: var(--font-display); font-weight: 600; line-height: 1.05; margin: 0; letter-spacing: -.01em; } ::selection{ background: var(--accent); color: #14110A; } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background: var(--accent); color:#14110A; padding: var(--s-3) var(--s-5); font-weight:600; text-decoration:none; } .skip-link:focus{ left:0; } .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .wrap{ width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .wrap-narrow{ width: min(100% - 2.5rem, var(--wrap-narrow)); } .wrap-wide{ width: min(100% - 2.5rem, var(--wrap-wide)); } .muted{ color: var(--text-faint); } /* ---------- Επαναλαμβανόμενα δομικά ---------- */ .section{ padding: var(--s-10) 0; position: relative; } .section-head{ max-width: 46rem; margin-bottom: var(--s-8); } .eyebrow{ font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; letter-spacing: .2em; color: var(--accent); margin: 0 0 var(--s-3); text-transform: uppercase; } .section-title{ font-size: var(--t-2xl); text-transform: uppercase; letter-spacing: -.015em; } .section-title-sm{ font-size: var(--t-xl); } .section-intro{ color: var(--text-dim); font-size: var(--t-md); margin: var(--s-4) 0 0; max-width: 42rem; } .section-intro-lead{ font-size: var(--t-lg); color: var(--text); } /* ---------- Κουμπιά ---------- */ /* :not([hidden]) — χωρίς αυτό, ένα