.
============================================================ */
/* Ο τίτλος/εικόνα της κάρτας είναι crawlable σύνδεσμος αντί για JS click handler. */
.wcard-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.wcard-link:hover { color: inherit; }
/* Προδιαγραφές μέσα στην κάρτα — ορατό κείμενο που διαβάζουν και τα LLM. */
.wcard .wspecs { font-size: 12px; color: #9AA3AF; line-height: 1.5; margin-top: 2px; }
/* Ο πίνακας specs κρατά την εμφάνιση των παλιών */
.pd-specs { width: 100%; border-collapse: collapse; }
.pd-specs tr.row { display: flex; justify-content: space-between; gap: 20px; }
.pd-specs th { font-weight: 400; color: var(--body); text-align: left; }
.pd-specs td { text-align: right; }
/* Ορατό μόνο σε screen readers — για captions/labels που δεν πρέπει να φαίνονται. */
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ============================================================
Φόρμα αιτήματος προσφοράς (αντικατέστησε το mailto:)
============================================================ */
.dcap-modal {
position: fixed; inset: 0; z-index: 9999; display: none;
align-items: center; justify-content: center;
background: rgba(10, 20, 40, .55); padding: 20px;
overflow-y: auto;
}
.dcap-modal-box {
background: #fff; border-radius: 14px; max-width: 460px; width: 100%;
overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
max-height: 92vh; display: flex; flex-direction: column;
}
.dcap-modal-head {
background: var(--navy); color: #fff; padding: 16px 20px;
font-size: 16px; font-weight: 600;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex: none;
}
.dcap-modal-x {
background: none; border: none; color: #fff; font-size: 26px; line-height: 1;
cursor: pointer; opacity: .8; padding: 0 2px;
}
.dcap-modal-x:hover { opacity: 1; }
.dcap-modal-body { padding: 18px 20px; overflow-y: auto; display: grid; gap: 4px; }
.dcap-modal-sub { color: #4E4B66; font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; }
/* Λίστα προϊόντων μέσα στη φόρμα — ο πελάτης βλέπει τι στέλνει */
.dcap-qf-list {
display: flex; flex-direction: column; gap: 6px;
max-height: 150px; overflow-y: auto; margin-bottom: 14px;
}
.dcap-qf-item {
display: flex; align-items: center; gap: 10px;
border: 1px solid #eef1f5; border-radius: 8px; padding: 7px 10px; font-size: 13px;
}
.dcap-qf-item img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.dcap-qf-item b { color: var(--navy); font-weight: 600; }
.dcap-qf-l { font-size: 12.5px; color: #6B7686; margin-top: 8px; }
.dcap-modal-body input[type=email],
.dcap-modal-body input[type=text],
.dcap-modal-body input[type=tel],
.dcap-modal-body textarea {
width: 100%; padding: 10px 12px; border: 1px solid #d5dae3; border-radius: 8px;
font: inherit; font-size: 14px; color: #24303F; background: #fff;
}
.dcap-modal-body input:focus, .dcap-modal-body textarea:focus {
outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy);
}
.dcap-modal-body textarea { resize: vertical; min-height: 64px; }
.dcap-qf-consent {
display: flex; gap: 8px; align-items: flex-start;
font-size: 12.5px; color: #4E4B66; line-height: 1.5; margin: 14px 0 4px;
cursor: pointer;
}
.dcap-qf-consent input { margin-top: 2px; flex: none; }
.dcap-qf-err {
display: none; color: #b3261e; font-size: 13px; margin: 8px 0 0;
background: #fcf0ef; border-radius: 6px; padding: 8px 10px;
}
.dcap-modal-body .btn { margin-top: 14px; justify-content: center; width: 100%; }
.dcap-qf-done { display: none; padding: 34px 24px; text-align: center; }
.dcap-qf-done .dcap-qf-tick {
width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
background: var(--navy); color: #fff; font-size: 26px;
display: flex; align-items: center; justify-content: center;
}
.dcap-qf-done h3 { color: var(--navy); font-size: 19px; margin-bottom: 8px; }
.dcap-qf-done p { color: #4E4B66; font-size: 14px; line-height: 1.6; }
@media (max-width: 30rem) {
.dcap-modal { padding: 10px; }
.dcap-modal-box { max-height: 96vh; }
}
/* ============================================================
Φόρμα λήψης καταλόγου
Μία δομή, δύο εμφανίσεις: --card (λευκή) και --gate (navy).
============================================================ */
.dcap-lf { --lf-gap: 14px; }
.dcap-lf .lf-fields { display: grid; gap: var(--lf-gap); }
.dcap-lf[hidden], .dcap-lf .lf-fields[hidden], .dcap-lf .lf-done[hidden] { display: none; }
.dcap-lf .lf-title { font-size: 20px; line-height: 1.25; margin: 0; }
.dcap-lf .lf-sub { font-size: 14px; line-height: 1.55; margin: -6px 0 4px; }
.dcap-lf .lf-row { display: grid; gap: 6px; }
.dcap-lf .lf-label {
font-size: 12px; font-weight: 500; letter-spacing: .1em;
text-transform: uppercase; display: flex; align-items: center; gap: 4px;
}
.dcap-lf .lf-req { font-weight: 600; }
/* 46px ύψος: πάνω από το ελάχιστο 44px για στόχους αφής, και 16px γραμματοσειρά
ώστε το iOS να μην κάνει auto-zoom στο πεδίο. */
.dcap-lf .lf-input {
width: 100%; min-height: 46px; padding: 12px 14px;
font-family: inherit; font-size: 16px; line-height: 1.3;
border-radius: 4px; outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.dcap-lf .lf-input:focus-visible { box-shadow: 0 0 0 3px rgba(0, 52, 121, .28); }
/* Το σφάλμα δεν δηλώνεται μόνο με χρώμα — έχει και κείμενο δίπλα στο πεδίο. */
.dcap-lf .lf-err { font-size: 13px; line-height: 1.45; margin: 0; min-height: 0; }
.dcap-lf .lf-err:empty { display: none; }
.dcap-lf .lf-err--form { margin-top: 4px; }
.dcap-lf .lf-consent {
display: flex; gap: 10px; align-items: flex-start;
font-size: 12.5px; line-height: 1.55; cursor: pointer;
margin-top: 2px;
}
.dcap-lf .lf-consent input {
margin: 2px 0 0; flex: none;
width: 18px; height: 18px; accent-color: var(--navy); cursor: pointer;
}
.dcap-lf .lf-consent input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.dcap-lf .lf-submit { width: 100%; justify-content: center; min-height: 48px; margin-top: 4px; }
.dcap-lf .lf-submit[disabled] { opacity: .55; cursor: not-allowed; }
.dcap-lf .lf-note { font-size: 12px; margin: 0; text-align: center; }
.dcap-lf .lf-done { text-align: center; padding: 26px 0 10px; }
.dcap-lf .lf-done:focus { outline: none; }
.dcap-lf .lf-tick {
width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.dcap-lf .lf-tick svg { width: 26px; height: 26px; }
.dcap-lf .lf-done h3 { font-size: 19px; margin-bottom: 8px; }
.dcap-lf .lf-done-msg { font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.dcap-lf .lf-done-link { font-size: 14px; font-weight: 500; text-decoration: none; }
/* ---------- Εμφάνιση «card»: λευκή κάρτα σε σκούρο φόντο ---------- */
.dcap-lf--card { background: #fff; padding: 34px 32px; color: var(--body);
box-shadow: 0 30px 70px -20px rgba(0,10,25,.55); }
.dcap-lf--card .lf-title { color: var(--navy-darker, var(--navy)); }
.dcap-lf--card .lf-sub,
.dcap-lf--card .lf-note { color: #8A93A3; }
.dcap-lf--card .lf-label { color: #5B6472; }
.dcap-lf--card .lf-req { color: #B7352C; }
.dcap-lf--card .lf-input { border: 1px solid #D3D9E2; background: #fff; color: #24303F; }
.dcap-lf--card .lf-input:hover { border-color: #AEB8C6; }
.dcap-lf--card .lf-input:focus { border-color: var(--navy); }
.dcap-lf--card .lf-input.is-invalid { border-color: #B7352C; background: #FDF6F5; }
.dcap-lf--card .lf-err { color: #A32A22; }
.dcap-lf--card .lf-consent { color: #6E7684; }
.dcap-lf--card .lf-consent.is-invalid { color: #A32A22; }
.dcap-lf--card .lf-tick { background: var(--navy); color: #fff; }
.dcap-lf--card .lf-done h3 { color: var(--navy); }
.dcap-lf--card .lf-done-msg { color: #6E7684; }
.dcap-lf--card .lf-done-link { color: var(--navy); }
@media (max-width: 30rem) {
.dcap-lf--card { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
.dcap-lf .lf-input { transition: none; }
}
/* ============================================================
Cookiebot — ευθυγράμμιση με το brand
------------------------------------------------------------
Τα ΚΕΙΜΕΝΑ, οι κατηγορίες και οι γλώσσες ρυθμίζονται στο Cookiebot Manager
(manage.cookiebot.com), όχι εδώ. Το CSS αγγίζει μόνο χρώμα και τυπογραφία.
Σκόπιμα ΔΕΝ αλλάζουμε διάταξη ή μεγέθη: το markup του Cookiebot αλλάζει μεταξύ
εκδόσεων, και επιθετικές παρεμβάσεις σπάνε σιωπηλά σε κάθε ενημέρωσή τους.
============================================================ */
#CybotCookiebotDialog {
font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
/* Κύριο κουμπί αποδοχής → navy */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogBodyLevelButtonAccept {
background-color: var(--navy) !important;
border-color: var(--navy) !important;
color: #fff !important;
}
/* Δευτερεύοντα κουμπιά: περίγραμμα navy, λευκό φόντο — οπτικά υποδεέστερα */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogBodyLevelButtonCustomize {
border-color: var(--navy) !important;
color: var(--navy) !important;
background-color: #fff !important;
}
/* Σύνδεσμοι & ενεργή καρτέλα */
#CybotCookiebotDialog a,
#CybotCookiebotDialogBodyContentText a { color: var(--navy) !important; }
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
border-bottom-color: var(--navy) !important;
color: var(--navy) !important;
}
/* Διακόπτες κατηγοριών */
#CybotCookiebotDialog input[type="checkbox"][class*="CybotCookiebotDialogBodyLevelButton"]:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
background-color: var(--navy) !important;
}
/* Το μικρό αιωρούμενο εικονίδιο επαναφοράς συγκατάθεσης */
#CookiebotWidget .CookiebotWidget-logo circle { fill: var(--navy) !important; }
/* Ορατό focus — το Cookiebot το αφαιρεί σε κάποιες εκδόσεις */
#CybotCookiebotDialog button:focus-visible,
#CybotCookiebotDialog a:focus-visible {
outline: 2px solid var(--navy) !important;
outline-offset: 2px !important;
}
/* ============================================================
Σελίδα προϊόντος — φωτογραφία & τεχνικό σχέδιο
============================================================ */
.pd-thumbs { display: flex; gap: 10px; margin-top: 14px; }
.pd-thumb {
width: 74px; height: 74px; padding: 6px; cursor: pointer;
background: #fff; border: 1px solid var(--line); border-radius: 4px;
display: flex; align-items: center; justify-content: center;
transition: border-color .15s ease;
}
.pd-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-thumb:hover { border-color: #AEB8C6; }
.pd-thumb.is-on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.pd-thumb:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* Στις κάρτες: το σχέδιο αντικαθιστά τη φωτογραφία σε hover.
Το .hint λέει στον επισκέπτη ότι υπάρχει κάτι να δει — αλλιώς δεν το ανακαλύπτει. */
.wcard .imgwrap { position: relative; }
.wcard .imgwrap img.tx {
position: absolute; inset: 24px; margin: auto;
max-width: calc(100% - 48px); max-height: calc(100% - 48px);
object-fit: contain; opacity: 0; transition: opacity .25s ease;
}
.wcard:hover .imgwrap img.ph.has-tx { opacity: 0; }
.wcard:hover .imgwrap img.tx { opacity: 1; }
.wcard .hint {
position: absolute; bottom: 6px; left: 0; right: 0;
font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
color: transparent; text-align: center; transition: color .2s ease; pointer-events: none;
}
.wcard:hover .hint { color: var(--navy); }
/* Σε αφή δεν υπάρχει hover — δείξε το σχέδιο σε εναλλαγή αντί να μένει κρυφό. */
@media (hover: none) {
.wcard .imgwrap img.tx { position: static; inset: auto; opacity: 1; display: none; }
.wcard .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pd-thumb, .wcard .imgwrap img.tx, .wcard .hint { transition: none; }
}
/* ============================================================
«Όλα από έναν προμηθευτή» — αμέσως κάτω από το hero
------------------------------------------------------------
Αντικατέστησε τη ζώνη B2B και την παλιά navy ενότητα, που έλεγαν το ίδιο
πράγμα σε δύο σημεία. Λιτή απόδοση: ανοιχτό φόντο, χωρίς πλαίσια, κάρτες ή
σκιές — τα τρία σημεία χωρίζονται μόνο με μια λεπτή γραμμή στην κορυφή τους.
============================================================ */
.supplier { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 72px 0; }
.supplier-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
/* Η γραμμή στην κορυφή κάθε σημείου αντικαθιστά κάρτα/πλαίσιο: δίνει δομή χωρίς βάρος.
Πιο σκούρα από το --line, γιατί πάνω στο --bg-soft η ανοιχτή γραμμή εξαφανιζόταν
και τα τρία σημεία διαβάζονταν ως ασύνδετο κείμενο. */
.sp { border-top: 2px solid var(--navy); padding-top: 22px; }
.sp .n {
display: block; font-size: 12px; font-weight: 600; letter-spacing: .2em;
color: var(--navy); opacity: .45; margin-bottom: 14px;
}
.sp h3 { font-size: 18px; font-weight: 500; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.sp p { font-size: 15px; line-height: 1.7; color: var(--body); margin: 0; }
@media (max-width: 60rem) {
.supplier { padding: 40px 0; }
.supplier-points { grid-template-columns: 1fr; gap: 26px; }
}
/* Δευτερεύον κουμπί πάνω σε σκούρο hero */
.btn.outline.light {
background: transparent; color: #fff; border-color: rgba(255,255,255,.55);
}
.btn.outline.light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
/* ===== Ένωση «Όλα από έναν προμηθευτή» → «Λάβετε τον κατάλογο» =====
Στην αρχική οι δύο ενότητες είναι πλέον διαδοχικές και οι δύο navy. Χωρίς
παρέμβαση διαβάζονται ως δύο ασύνδετες πλάκες με ~174px κενό navy ανάμεσα.
Τις δένουμε σε μία σκούρα ζώνη δύο μερών: μικρότερο κενό στη ραφή και μια
λεπτή γραμμή που δηλώνει «συνέχεια», όχι «νέα ενότητα».
Ο επιλογέας γειτονικού αδελφού αφορά μόνο την αρχική — στη σελίδα προϊόντων
το .catalog-band στέκεται μόνο του και κρατά το κανονικό του padding. */
.band:has(+ .catalog-band) { padding-bottom: 56px; }
.band + .catalog-band { padding-top: 0; }
.band + .catalog-band > .container { border-top: 1px solid rgba(255,255,255,.12); padding-top: 64px; }
@media (max-width: 1024px) {
.band:has(+ .catalog-band) { padding-bottom: 44px; }
.band + .catalog-band > .container { padding-top: 48px; }
}
/* ===== CTA επικοινωνίας στον κατάλογο =====
Αντικατέστησε το banner που παρέπεμπε στις σελίδες-οδηγούς. Ολόκληρη η μπάρα είναι
ο σύνδεσμος, όχι μόνο το κείμενο στα δεξιά — μεγαλύτερος στόχος, ίδια συμπεριφορά
όπου κι αν πατήσει ο επισκέπτης. */
.help-cta {
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
background: var(--bg-soft); border: 1px solid var(--line);
padding: 20px 24px; margin-bottom: 34px;
color: inherit; text-decoration: none;
transition: border-color var(--trans-fast), background var(--trans-fast);
}
.help-cta:hover { border-color: var(--navy); background: #fff; color: inherit; }
.help-cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.help-cta-text { display: grid; gap: 3px; }
.help-cta-text strong { font-size: 15.5px; font-weight: 500; color: var(--navy); }
.help-cta-text span { font-size: 14px; color: #6E7684; }
.help-cta-go { flex-shrink: 0; font-size: 15px; font-weight: 500; color: var(--navy); }
@media (max-width: 640px) {
.help-cta { padding: 18px 20px; gap: 14px; }
}
/* Το προαιρετικό checkbox marketing: οπτικά υποδεέστερο από το υποχρεωτικό, ώστε να
φαίνεται με μια ματιά ότι δεν χρειάζεται για να σταλεί ο κατάλογος. */
.dcap-lf .lf-consent--optional { margin-top: -4px; }
.dcap-lf--card .lf-consent--optional { color: #8A93A3; }
/* ============================================================
Το καπάκι που ακολουθεί το scroll
------------------------------------------------------------
Σταθερό κάτω δεξιά, γυρίζει όσο κατεβαίνει η σελίδα και επιστρέφει στην κορυφή
με ένα κλικ. Εμφανίζεται μόνο αφού ο επισκέπτης έχει κατέβει αρκετά, ώστε να μην
καλύπτει το hero από την πρώτη στιγμή.
============================================================ */
.cap-follow {
position: fixed; z-index: 90; right: 26px; bottom: 26px;
width: 62px; height: 62px; padding: 0;
border: 0; background: none; cursor: pointer;
opacity: 0; transform: translateY(10px);
transition: opacity .3s ease, transform .3s ease;
}
.cap-follow[hidden] { display: none; }
.cap-follow.is-on { opacity: 1; transform: translateY(0); }
.cap-follow img {
width: 100%; height: auto; display: block;
/* --turn: μοίρες περιστροφής, τις γράφει η JS από τη θέση του scroll. */
transform: rotate(calc(var(--turn, 0) * 1deg));
/* Λεπτό λευκό περίγραμμα ΠΡΙΝ τη σκιά: το καπάκι είναι μαύρο και περνά πάνω από
navy ενότητες, όπου χωρίς αυτό εξαφανιζόταν. Κρατά το σχήμα του καπακιού, σε
αντίθεση με ένα κυκλικό πλαίσιο που θα το έκανε γενικό κουμπί. */
filter:
drop-shadow(0 0 1px rgba(255,255,255,.95))
drop-shadow(0 0 3px rgba(255,255,255,.55))
drop-shadow(0 6px 14px rgba(0,10,30,.35));
}
.cap-follow:hover img {
filter:
drop-shadow(0 0 1px rgba(255,255,255,.95))
drop-shadow(0 0 4px rgba(255,255,255,.7))
drop-shadow(0 8px 18px rgba(0,10,30,.5));
}
.cap-follow:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 50%; }
@media (max-width: 40rem) {
.cap-follow { right: 16px; bottom: 16px; width: 50px; height: 50px; }
}
/* Χωρίς κίνηση: κανένα γύρισμα, αλλά το κουμπί παραμένει χρήσιμο. */
@media (prefers-reduced-motion: reduce) {
.cap-follow { transition: none; }
.cap-follow img { transform: none; }
}