/* hero.css — το hero της αρχικής (Webbox). Μπαίνει ως asset ΤΗΣ ΣΕΛΙΔΑΣ (Σελίδες → Αρχική → Assets), όχι καθολικά. ΚΑΤΕΥΘΥΝΣΗ: σκούρο, κεντραρισμένο, δύο pill κουμπιά — η αισθητική που ζήτησε ο ιδιοκτήτης. ΟΧΙ αντιγραφή ξένης ταυτότητας: το χρώμα τόνου είναι το δικό μας (--nq-accent, από τις Ρυθμίσεις) και το διακοσμητικό σχήμα είναι τετράγωνο — αναφορά στο «box» του ονόματος. Το πλάτος το δίνει η γραμμή του PageBuilder (stretch_row_content_no_spaces), γι' αυτό εδώ δεν υπάρχουν κόλπα με 100vw που φέρνουν οριζόντια κύλιση. */ /* ΑΤΜΟΣΦΑΙΡΑ: βάθος από δύο φωτισμούς αριστερά/δεξιά και ένα πλέγμα δαπέδου σε προοπτική. Όλα CSS — καμία εικόνα, κανένα request, τίποτα να φορτώσει. Το κέντρο μένει σκοτεινό επίτηδες: εκεί κάθεται το κείμενο. */ .nq-hero { /* ── Παλέτα του hero — ΜΙΑ πηγή ───────────────────────────────────── Ό,τι είναι ταυτότητα (τόνος, μελάνι, φόντο) έρχεται από το skin: αλλάζεις το χρώμα στις Γενικές Ρυθμίσεις, αλλάζει και εδώ. Το δεύτερο φως μένει ξεχωριστό ΕΠΙΤΗΔΕΣ (βλ. σχόλιο συμμετρίας πιο κάτω): αν γίνει ίδιο με το πρώτο, χάνεται το βάθος. */ --hero-glow-1-rgb: var(--volgh-primary-rgb); /* ακολουθεί τον τόνο */ --hero-glow-2-rgb: 56, 110, 255; /* σκόπιμα μπλε */ --hero-surface: color-mix(in srgb, var(--volgh-background) 94%, var(--nq-accent) 6%); position: relative; overflow: hidden; color: var(--nq-fg); padding: 104px 0 96px; text-align: center; background: /* ΣΥΜΜΕΤΡΙΑ: φως και στις δύο πλευρές, σκοτάδι στο κέντρο — «διάδρομος» με σημείο φυγής εκεί που κάθεται το κείμενο. Αριστερά βιολετί, δεξιά μπλε: η μικρή διαφορά τόνου δίνει βάθος, δύο ίδια θα έμοιαζαν με λάθος. */ radial-gradient(46% 60% at -4% 58%, rgba(var(--hero-glow-1-rgb), .42), transparent 66%), radial-gradient(46% 60% at 104% 58%, rgba(var(--hero-glow-2-rgb), .40), transparent 66%), radial-gradient(38% 34% at 12% 88%, rgba(var(--hero-glow-1-rgb), .22), transparent 70%), radial-gradient(38% 34% at 88% 88%, rgba(var(--hero-glow-2-rgb), .20), transparent 70%), var(--hero-surface); } /* Σκοτεινός πυρήνας πίσω από το κείμενο: κρατά τα γράμματα αναγνώσιμα ό,τι κι αν γίνεται στις άκρες, χωρίς να χρειάζεται σκίαση στο ίδιο το κείμενο. */ .nq-hero-in::before { content: ""; position: absolute; inset: -18% -10%; z-index: -1; background: radial-gradient(58% 74% at 50% 50%, color-mix(in srgb, var(--hero-surface) 94%, transparent), transparent 72%); pointer-events: none; } /* Πλέγμα δαπέδου: δύο επαναλαμβανόμενες γραμμές γερμένες με perspective, και σβήσιμο προς τα πάνω με mask ώστε να χάνεται στο σκοτάδι αντί να κόβεται. */ .nq-hero::after { content: ""; position: absolute; left: -34%; right: -34%; bottom: -14%; height: 70%; background: repeating-linear-gradient(90deg, rgba(var(--hero-glow-1-rgb), .22) 0 1px, transparent 1px 86px), repeating-linear-gradient(0deg, rgba(var(--hero-glow-1-rgb), .16) 0 1px, transparent 1px 64px); transform: perspective(540px) rotateX(75deg) translateY(calc(var(--par, 0) * 60px)); transform-origin: bottom center; -webkit-mask-image: linear-gradient(to top, #000 6%, transparent 78%); mask-image: linear-gradient(to top, #000 6%, transparent 78%); pointer-events: none; } /* Διακοσμητικό «box»: τεράστιο τετράγωνο περίγραμμα, γερμένο, σχεδόν αόρατο. Δεν είναι εικόνα — κανένα επιπλέον request, καμία μετακίνηση στο layout. */ .nq-hero::before { content: ""; position: absolute; left: -8%; top: 50%; width: 620px; height: 620px; transform: translateY(-50%) rotate(22deg); border: 74px solid color-mix(in srgb, var(--nq-fg) 2.8%, transparent); border-radius: 40px; pointer-events: none; } /* Υπερμεγέθης λεκτικός θυρεός πίσω από το περιεχόμενο: μόνο περίγραμμα, κομμένος από τις άκρες. Δίνει κλίμακα και «γραφιστική» υπογραφή χωρίς εικόνα και χωρίς να διαβάζεται ως κείμενο (aria-hidden στο markup). */ .nq-hero-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(120px, 20vw, 300px); line-height: 1; font-weight: 800; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--nq-fg) 7%, transparent); white-space: nowrap; pointer-events: none; user-select: none; } .nq-hero-in { position: relative; width: 100%; max-width: var(--nq-max, 1320px); margin-inline: auto; padding-inline: 16px; } /* ── PARALLAX ────────────────────────────────────────────────────────────── Το `--par` το γράφει το theme/js/modules/hero-parallax.js: 0 στην κορυφή, 1 όταν το hero έχει κυλήσει όλο. Κάθε στρώμα το πολλαπλασιάζει με δικό του συντελεστή, οπότε κινούνται με διαφορετική ταχύτητα: κείμενο +90px (πιο γρήγορο, «φεύγει» προς τα κάτω) θυρεός −140px (αντίθετη φορά — μεγαλώνει η αίσθηση βάθους) πλέγμα +60px Χωρίς το JS όλα μένουν στο 0: η σελίδα δείχνει κανονικά, απλώς ακίνητη. */ /* ⚠️ Η ΑΡΧΙΚΗ ΤΙΜΗ ΜΠΑΙΝΕΙ ΣΤΟΝ ΠΕΡΙΕΚΤΗ, ΟΧΙ ΣΤΟ HERO. Το JS γράφει το `--par` στο `.nq-hero-wrap` (για να το βλέπει και η πλακέτα που ζει έξω από το hero). Αν το `.nq-hero` ξαναδηλώσει `--par: 0`, η δική του δήλωση ΝΙΚΑΕΙ την κληρονομιά και το hero μένει ακίνητο για πάντα — ακριβώς αυτό είχε συμβεί. Η προεπιλογή δίνεται μία φορά, ψηλά, και παντού αλλού χρησιμοποιείται fallback `var(--par, 0)`. */ .nq-hero-wrap { --par: 0; } .nq-hero-in { transform: translate3d(0, calc(var(--par, 0) * 90px), 0); opacity: calc(1 - var(--par, 0) * .55); will-change: transform; } .nq-hero-mark { transform: translate(-50%, -50%) translate3d(0, calc(var(--par, 0) * -140px), 0); will-change: transform; } .nq-hero::after { will-change: transform; } @media (prefers-reduced-motion: reduce) { .nq-hero-in, .nq-hero-mark { transform: none; opacity: 1; } .nq-hero-mark { transform: translate(-50%, -50%); } .nq-hero-badge { transition: none; } } .nq-hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 24px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--nq-fg) 55%, transparent); } .nq-hero-eyebrow::before, .nq-hero-eyebrow::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; } .nq-hero h1 { margin: 0 auto 22px; max-width: 17ch; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; color: var(--nq-fg); text-wrap: balance; } /* Ο τόνος σε ΜΙΑ φράση — ανοιχτή απόχρωση του χρώματός μας, ώστε να διαβάζεται στο σκούρο. */ .nq-hero h1 em { font-style: normal; color: var(--nq-accent-2); } .nq-hero-sub { margin: 0 auto 36px; max-width: 60ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: color-mix(in srgb, var(--nq-fg) 72%, transparent); } .nq-hero-sub b { font-weight: 600; color: var(--nq-fg); } .nq-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .nq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: background-color .16s, border-color .16s, color .16s, transform .16s; } .nq-btn:hover { transform: translateY(-1px); } .nq-btn-primary { background: var(--nq-accent); color: var(--nq-on-accent); } .nq-btn-primary:hover { background: var(--nq-accent-2); color: var(--nq-on-accent); } .nq-btn-ghost { border-color: var(--nq-accent); color: var(--nq-accent); } .nq-btn-ghost:hover { border-color: var(--nq-accent-2); color: var(--nq-accent-2); } /* Το βελάκι μπαίνει σε κύκλο μόνο στο κύριο κουμπί. */ .nq-btn-primary svg { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: color-mix(in srgb, var(--nq-on-accent) 16%, transparent); } /* ── Πλακέτα κάτω αριστερά ──────────────────────────────────────────────── Πατάει στην αριστερή άκρη της οθόνης (bleed) και κάθεται στο κάτω μέρος του hero — γεμίζει τη γωνία που αλλιώς μένει άδεια και δίνει ένα δεύτερο σημείο στάσης για το μάτι, μετά τον τίτλο. ΠΡΟΣΟΧΗ: το `.nq-hero` έχει `overflow: hidden`, οπότε η πλακέτα ΔΕΝ μπορεί να ξεχειλίσει κάτω από το hero όπως σε άλλα templates. Κάθεται μέσα, με απόσταση από την κάτω ακμή. */ /* Ο ΠΕΡΙΕΚΤΗΣ είναι το κλειδί: η πλακέτα ΔΕΝ μπορεί να ζει μέσα στο `.nq-hero`, γιατί εκείνο έχει `overflow: hidden` (το χρειάζεται για το πλέγμα και τα σχήματα) και θα την έκοβε στο όριο. Ζει δίπλα του, μέσα σε αυτόν τον σχετικό περιέκτη, και κατεβαίνει κατά το μισό της ύψος ώστε να πατά και στα δύο. */ .nq-hero-wrap { position: relative; } /* Το κενό πρέπει να καλύπτει ΤΟ ΜΙΣΟ της πλακέτας (~80px) ΣΥΝ αέρα, αλλιώς το επόμενο τμήμα ξεκινά κολλητά από κάτω της (μετρήθηκε: 6px — φαινόταν λάθος). */ .nq-hero-wrap { margin-bottom: 130px; } /* ⚠ ΝΕΚΡΗ ΠΕΡΙΟΧΗ (2026-09-04): τα .nq-hero-badge / -stars / -clients / -client ΔΕΝ υπάρχουν στο τρέχον markup — 0 στοιχεία στο DOM. Τα χρώματα παρακάτω είναι του παλιού ΑΝΟΙΧΤΟΥ θέματος (#fff, #e7e9ef, ανοιχτές κάρτες) και ΔΕΝ πέρασαν σε tokens. Αν ξαναμπούν αυτά τα στοιχεία, θέλουν πέρασμα σχεδίασης πρώτα — μην τα εμπιστευτείς ως έχουν. */ .nq-hero-badge { position: absolute; left: 0; bottom: 0; z-index: 3; display: inline-block; text-align: left; padding: 30px 52px 32px; background: var(--nq-accent); color: #fff; border-radius: 0 20px 20px 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .42); /* translateY(50%) = μισό μέσα στο σκούρο hero, μισό στο λευκό από κάτω. Το parallax προστίθεται μετά, με μικρότερο συντελεστή από το κείμενο. */ transform: translateY(50%) translate3d(var(--badge-x, 0px), calc(var(--par, 0) * 34px), 0); opacity: var(--badge-opacity, 1); transition: transform .24s cubic-bezier(.22, .61, .36, 1), opacity .3s ease-out; will-change: transform, opacity; } .nq-hero-stars { display: flex; gap: 7px; margin: 0 0 14px; } .nq-hero-stars svg { width: 19px; height: 19px; fill: #fff; opacity: .95; } .nq-hero-badge b { display: block; font-size: clamp(21px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.025em; line-height: 1.18; } .nq-hero-badge span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .8); } /* Επιλεγμένα portfolio logos στο λευκό τμήμα κάτω δεξιά. Η σειρά αποκαλύπτεται ήρεμα μόλις μπει στο viewport, χωρίς μετατόπιση. */ .nq-hero-clients { display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 10px; align-items: end; } .nq-hero-clients-label { display: flex; align-items: center; justify-content: center; height: 78px; margin: 0; padding: 0 18px; border: 1px solid rgba(var(--volgh-primary-rgb), .3); border-radius: 14px; color: #fff; background: linear-gradient(145deg, #242149, #0c0f1c); box-shadow: 0 12px 30px rgba(18, 24, 40, .14); font-size: 9px; font-weight: 800; letter-spacing: .16em; line-height: 1.35; text-align: center; text-transform: uppercase; } @media (max-width: 767.98px) { /* Σε κινητό δεν «καβαλάει» τίποτα: γίνεται κανονική λωρίδα πλήρους πλάτους ακριβώς κάτω από το hero — αλλιώς θα έπεφτε πάνω στο κείμενο. */ .nq-hero-wrap { margin-bottom: 0; } .nq-hero-badge { position: static; display: block; padding: 24px 20px 26px; border-radius: 0; text-align: center; transform: none; } .nq-hero-stars { justify-content: center; } .nq-hero-clients { display: block; } .nq-hero-clients-label { width: 100%; height: 58px; margin-bottom: 10px; text-align: center; } } @media (min-width: 768px) and (max-width: 1099.98px) { .nq-hero-clients { grid-template-columns: 128px minmax(0, 1fr); } } /* Πού είμαστε — και για τον επισκέπτη και για την τοπική αναζήτηση. */ .nq-hero-where { margin: 54px 0 0; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--nq-fg) 42%, transparent); } .nq-hero-where b { font-weight: 600; color: color-mix(in srgb, var(--nq-fg) 70%, transparent); } /* Τρία σημεία — ΚΑΤΩ από το σκούρο, στο λευκό της σελίδας. Κάθε ένα: εικονίδιο σε κουτί, μεγάλος αριθμός-φάντασμα δεξιά, τίτλος, κείμενο και μια μικρή παύλα που κλείνει. Ο αριθμός είναι διακόσμηση (aria-hidden στο markup) — δεν διαβάζεται από αναγνώστες οθόνης. */ .nq-hero-points { width: 100%; max-width: var(--nq-max, 1320px); margin: 0 auto; padding: 56px 16px 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 44px; } .nq-hero-point { position: relative; } .nq-hero-point i { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 14px; background: rgba(var(--volgh-primary-rgb), .08); border: 1px solid rgba(var(--volgh-primary-rgb), .16); } .nq-hero-point i svg { width: 22px; height: 22px; stroke: var(--nq-accent); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Ο αριθμός κάθεται ΔΙΠΛΑ στο εικονίδιο, όχι στη δεξιά άκρη του κελιού: εκεί έπεφτε στο κενό ανάμεσα στις κάρτες και φαινόταν να ανήκει στην επόμενη. */ .nq-hero-point b { position: absolute; left: 68px; top: -14px; font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -.05em; color: rgba(17, 24, 39, .06); user-select: none; } .nq-hero-point h3 { margin: 0 0 9px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; } .nq-hero-point p { margin: 0 0 18px; font-size: 15px; line-height: 1.65; color: var(--nq-muted); max-width: 34ch; } .nq-hero-point p::after { content: ""; display: block; width: 26px; height: 2px; margin-top: 18px; background: var(--nq-line); } @media (max-width: 767.98px) { .nq-hero { padding: 72px 0 64px; } .nq-hero::before { width: 380px; height: 380px; border-width: 46px; left: -22%; } .nq-hero-where { margin-top: 40px; } .nq-hero-points { padding-top: 40px; gap: 24px; } } @media (max-width: 575.98px) { .nq-btn { width: 100%; } } /* ─────────── Βίντεο φόντου του hero ───────────────────────────────────── Τιμές μετρημένες από το mockup (Demo 5), όχι εφευρεμένες. Το βίντεο μπαίνει ως πρώτο παιδί του .nq-hero και κάθεται πίσω από όλο το περιεχόμενο. Τα z-index στα .nq-hero-mark / .nq-hero-in είναι απαραίτητα: χωρίς αυτά το ::before του .nq-hero-in (z-index:-1) θα έπεφτε πίσω από το βίντεο. */ /* Το φόντο μπαίνει πλέον από τη native ρύθμιση του section (Background → Hosted Video). Ο builder το εισάγει ΧΩΡΙΣ κλάση, ως πρώτο παιδί του section, με δικό του inline position/inset/object-fit. Άρα στοχεύουμε το ίδιο το