/**
* Theme Name: Blocksy Child
* Description: DIAL-NET — design tokens and global refinements on top of Blocksy.
* Author: Creative Themes
* Template: blocksy
* Text Domain: blocksy
*/
/* ---------------------------------------------------------------------------
Brand tokens.
Blocksy's global palette (colour 1-8) carries the UI colours. These are the
values Blocksy has no slot for: the logo's own orange, which is too light for
text but right for graphics, and the support accent.
--------------------------------------------------------------------------- */
:root {
--dn-orange: #EE7326; /* the logo's orange — icons, rules, graphics */
--dn-orange-soft: #FDF1E8; /* tinted bands and card hovers */
--dn-grey: #8A8F94; /* the logo's companion grey */
--dn-charcoal: #2A2724; /* support band, footer - charcoal, never navy */
--dn-support: #0E7C5A; /* "call us" / support affordances */
--dn-radius: 8px;
--dn-radius-sm: 6px;
--dn-section-y: 96px;
--dn-section-y-sm: 56px;
--dn-card-gap: 24px;
}
/* ---------------------------------------------------------------------------
Focus. Blocksy's default ring is faint; a keyboard user has to be able to see
where they are on every control, including inside the dark bands.
--------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--dn-orange);
outline-offset: 2px;
border-radius: 2px;
}
.dn-band-dark :where(a, button, input, select, textarea):focus-visible {
outline-color: #FFFFFF;
}
/* ---------------------------------------------------------------------------
Greek typography. Long compounds ("ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ", "ΔΟΜΗΜΕΝΗ ΚΑΛΩΔΙΩΣΗ")
break badly when tracked tight or forced uppercase in a narrow column.
--------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
text-wrap: balance;
hyphens: none;
}
p, li {
text-wrap: pretty;
}
@media (max-width: 480px) {
h1, h2 { letter-spacing: -0.01em; }
}
/* ---------------------------------------------------------------------------
Touch targets — the old menu had 25 flat items at desktop sizes.
--------------------------------------------------------------------------- */
@media (max-width: 999px) {
.ct-panel-content .menu > li > a { min-height: 52px; font-size: 18px; }
.ct-header [data-id="menu"] a { min-height: 44px; }
}
/* ---------------------------------------------------------------------------
Cards: flat and bordered at rest, lifting only on hover. No shadow pile-up.
--------------------------------------------------------------------------- */
.dn-card {
background: var(--theme-palette-color-8);
border: 1px solid var(--theme-palette-color-5);
border-radius: var(--dn-radius);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dn-card:hover {
transform: translateY(-2px);
border-color: var(--dn-orange);
box-shadow: 0 6px 20px rgba(42, 39, 36, .08);
}
/* Equipment imagery is landscape; never crop it to a portrait tile. */
.dn-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (prefers-reduced-motion: reduce) {
.dn-card, .dn-card:hover { transition: none; transform: none; }
}
/* ---------------------------------------------------------------------------
Staging only: a hairline so nobody mistakes this for production.
Removed when the redesign is migrated.
--------------------------------------------------------------------------- */
body.dn-staging { border-top: 3px solid #B91C1C; }
/* ---------------------------------------------------------------------------
Logo. The SVG carries the swoosh, so its box is ~2.1:1 — constrain by height
and let width follow, or the header inherits a 179px-tall image.
Final header sizing is Wave 2; this keeps it sane in the meantime.
--------------------------------------------------------------------------- */
.site-logo-container .default-logo,
.site-logo-container .sticky-logo {
height: 52px;
width: auto;
max-width: 190px;
}
@media (max-width: 689px) {
.site-logo-container .default-logo,
.site-logo-container .sticky-logo { height: 40px; max-width: 150px; }
}
/* ---------------------------------------------------------------------------
Header: phone number and the enquiry CTA.
--------------------------------------------------------------------------- */
.dn-header-tel {
font-family: 'Inter Tight', sans-serif;
font-weight: 600;
font-size: 18px;
color: var(--theme-palette-color-4);
text-decoration: none;
white-space: nowrap;
}
.dn-header-tel:hover { color: var(--theme-palette-color-1); }
@media (max-width: 689px) {
.dn-header-tel { font-size: 0; } /* icon-sized tap target on phones */
.dn-header-tel::before {
content: "☎";
font-size: 22px;
line-height: 1;
display: inline-block;
padding: 11px;
color: var(--theme-palette-color-1);
}
}
/* ---------------------------------------------------------------------------
Mobile action bar. Phones only, revealed after a short scroll.
--------------------------------------------------------------------------- */
.dn-actionbar { display: none; }
@media (max-width: 689px) {
.dn-actionbar {
display: grid;
grid-template-columns: repeat(3, 1fr);
position: fixed;
inset: auto 0 0 0;
z-index: 90;
background: var(--theme-palette-color-8);
border-top: 1px solid var(--theme-palette-color-5);
box-shadow: 0 -4px 16px rgba(42, 39, 36, .08);
transform: translateY(100%);
transition: transform .22s ease;
padding-bottom: env(safe-area-inset-bottom);
}
.dn-actionbar.is-visible { transform: none; }
.dn-actionbar__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 58px;
padding: 8px 4px;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
color: var(--theme-palette-color-4);
}
.dn-actionbar__item + .dn-actionbar__item {
border-left: 1px solid var(--theme-palette-color-5);
}
.dn-actionbar__item--primary { color: var(--theme-palette-color-1); }
.dn-actionbar__item:focus-visible { outline-offset: -3px; }
/* Keep the bar from covering the end of the page. */
body { padding-bottom: 58px; }
}
@media (prefers-reduced-motion: reduce) {
.dn-actionbar { transition: none; }
}
/* ===========================================================================
ΑΡΧΙΚΗ — ενότητες
Αναλογία: ~75% λευκό/θερμό ουδέτερο · ~15% charcoal · ~10% πορτοκαλί.
Το πορτοκαλί είναι accent. Μία μόνο σκούρα λωρίδα σε όλη τη σελίδα.
=========================================================================== */
.dn-section { padding: var(--dn-section-y) 0; }
.dn-section--tint { background: var(--theme-palette-color-6); }
.dn-section--tight { padding: calc(var(--dn-section-y) * .66) 0; }
.dn-section__head { max-width: 660px; margin: 0 0 40px; }
.dn-section__head p { color: var(--theme-palette-color-3); margin: 10px 0 0; }
.dn-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 13px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--dn-orange);
margin: 0 0 10px;
}
@media (max-width: 689px) {
.dn-section { padding: var(--dn-section-y-sm) 0; }
.dn-section__head { margin-bottom: 28px; }
}
/* --- HERO ---------------------------------------------------------------- */
.dn-hero {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 48px;
align-items: center;
padding: 72px 0 84px;
}
.dn-hero h1 { margin: 0 0 18px; }
.dn-hero__lead {
font-size: 20px; line-height: 1.55;
color: var(--theme-palette-color-3);
max-width: 30em; margin: 0 0 30px;
}
.dn-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.dn-hero__note {
margin: 26px 0 0; font-size: 15px; color: var(--theme-palette-color-3);
display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.dn-hero__note span { display: inline-flex; align-items: center; gap: 7px; }
.dn-hero__note span::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--dn-orange); flex: none;
}
.dn-hero__media {
position: relative;
background: var(--theme-palette-color-6);
border-radius: 14px;
padding: 28px;
display: flex; align-items: center; justify-content: center;
}
.dn-hero__media img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.dn-hero__media::after {
content: ""; position: absolute; inset: auto -10px -10px auto;
width: 96px; height: 96px; border-radius: 14px;
background: var(--dn-orange); opacity: .1; z-index: -1;
}
@media (max-width: 899px) {
.dn-hero { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 52px; }
.dn-hero__media { order: -1; padding: 18px; }
.dn-hero__lead { font-size: 17px; margin-bottom: 24px; }
.dn-hero__actions .ct-button, .dn-hero__actions .dn-btn { width: 100%; justify-content: center; }
}
/* --- Κουμπιά -------------------------------------------------------------- */
.dn-btn {
display: inline-flex; align-items: center; gap: 9px;
min-height: 48px; padding: 12px 24px;
border-radius: var(--dn-radius-sm);
font-weight: 600; font-size: 16px; line-height: 1;
text-decoration: none; transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.dn-btn--primary { background: var(--theme-palette-color-1); color: #fff; }
.dn-btn--primary:hover { background: var(--theme-palette-color-2); color: #fff; }
.dn-btn--ghost {
background: transparent; color: var(--theme-palette-color-4);
border: 1.5px solid var(--theme-palette-color-4);
}
.dn-btn--ghost:hover { background: var(--theme-palette-color-4); color: #fff; }
.dn-btn--light { background: #fff; color: var(--theme-palette-color-4); }
.dn-btn--light:hover { background: var(--theme-palette-color-6); color: var(--theme-palette-color-4); }
.dn-btn--outline-light { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.dn-btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
/* --- Πλέγματα ------------------------------------------------------------- */
.dn-grid { display: grid; gap: var(--dn-card-gap); }
.dn-grid--cats { grid-template-columns: repeat(3, 1fr); }
.dn-grid--solutions { grid-template-columns: repeat(4, 1fr); }
.dn-grid--three { grid-template-columns: repeat(3, 1fr); }
.dn-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1099px) {
.dn-grid--solutions { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
.dn-grid--cats, .dn-grid--three { grid-template-columns: repeat(2, 1fr); }
.dn-grid--solutions, .dn-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.dn-grid--cats, .dn-grid--three, .dn-grid--four { grid-template-columns: 1fr; }
.dn-grid--solutions { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
/* --- Κατηγορίες ----------------------------------------------------------- */
.dn-cat {
display: flex; flex-direction: column; gap: 6px;
padding: 26px 24px 22px;
text-decoration: none;
min-height: 148px;
}
.dn-cat__title {
font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 21px;
color: var(--theme-palette-color-4); line-height: 1.25;
}
.dn-cat__sub { font-size: 14px; color: var(--theme-palette-color-3); line-height: 1.5; }
.dn-cat__count {
margin-top: auto; font-size: 13px; font-weight: 600; color: var(--dn-orange);
}
/* --- Κάρτες λύσεων -------------------------------------------------------- */
.dn-solution { display: flex; flex-direction: column; overflow: hidden; }
.dn-solution__media {
display: block; background: var(--theme-palette-color-7);
padding: 16px; aspect-ratio: 4 / 3;
}
.dn-solution__media img,
.dn-solution__img {
width: 100%; height: 100%;
object-fit: contain; /* εξοπλισμός: ποτέ crop */
mix-blend-mode: multiply;
aspect-ratio: auto;
}
.dn-solution__placeholder { display: block; width: 100%; height: 100%; }
.dn-solution__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dn-solution__label {
margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .05em;
text-transform: uppercase; color: var(--dn-orange);
}
.dn-solution__title { margin: 0; font-size: 17px; line-height: 1.32; }
.dn-solution__title a { color: var(--theme-palette-color-4); text-decoration: none; }
.dn-solution__title a:hover { color: var(--theme-palette-color-1); }
.dn-solution__more {
margin: auto 0 0; padding-top: 10px;
font-size: 14px; font-weight: 600; color: var(--theme-palette-color-1);
}
.dn-solution:hover .dn-solution__more span { margin-left: 4px; }
/* --- Πυλώνας τηλεφωνίας --------------------------------------------------- */
.dn-brandcard {
display: flex; flex-direction: column; gap: 8px;
padding: 28px 26px; text-decoration: none;
}
.dn-brandcard__name {
font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 23px;
color: var(--theme-palette-color-4);
}
.dn-brandcard__desc { font-size: 15px; color: var(--theme-palette-color-3); line-height: 1.55; }
.dn-brandcard__more { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--theme-palette-color-1); }
/* --- Βήματα --------------------------------------------------------------- */
.dn-steps { counter-reset: dn-step; }
.dn-step { padding: 26px 24px; }
.dn-step__n {
counter-increment: dn-step;
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
background: var(--dn-orange-soft); color: var(--theme-palette-color-1);
font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 16px;
margin-bottom: 14px;
}
.dn-step__n::before { content: counter(dn-step); }
.dn-step h3 { margin: 0 0 6px; font-size: 19px; }
.dn-step p { margin: 0; font-size: 15px; color: var(--theme-palette-color-3); line-height: 1.55; }
/* --- Σκούρα λωρίδα υποστήριξης (η μόνη σκούρα της σελίδας) ---------------- */
.dn-band-dark {
background: var(--dn-charcoal);
color: #fff;
padding: 72px 0;
}
.dn-band-dark h2 { color: #fff; margin: 0 0 14px; }
.dn-band-dark p { color: rgba(255,255,255,.78); }
.dn-support__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.dn-support__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.dn-support__tags li {
border: 1px solid rgba(255,255,255,.28); border-radius: 100px;
padding: 8px 16px; font-size: 14px; font-weight: 500;
}
.dn-support__actions { display: flex; flex-direction: column; gap: 12px; }
.dn-support__phone {
font-family: 'Inter Tight', sans-serif; font-weight: 700;
font-size: 34px; color: #fff; text-decoration: none; line-height: 1.1;
display: inline-flex; align-items: center; gap: 12px;
}
.dn-support__phone:hover { color: var(--dn-orange); }
@media (max-width: 899px) {
.dn-band-dark { padding: 52px 0; }
.dn-support__grid { grid-template-columns: 1fr; gap: 26px; }
.dn-support__phone { font-size: 27px; }
}
/* --- Μάρκες --------------------------------------------------------------- */
.dn-brands {
display: flex; flex-wrap: wrap; gap: 14px 40px;
align-items: center; justify-content: center;
padding: 6px 0;
}
.dn-brands span {
font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 20px;
color: var(--dn-grey); letter-spacing: .01em;
}
/* --- Τελικό CTA ----------------------------------------------------------- */
.dn-final { text-align: center; }
.dn-final h2 { margin: 0 0 12px; }
.dn-final p { max-width: 44em; margin: 0 auto 26px; color: var(--theme-palette-color-3); }
.dn-final__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 480px) {
.dn-final__actions .dn-btn { width: 100%; justify-content: center; }
}
/* --- Σημείωση αναζήτησης --------------------------------------------------- */
.dn-search-note {
background: var(--dn-orange-soft);
border-left: 3px solid var(--dn-orange);
padding: 12px 16px; margin: 0 0 24px; font-size: 15px;
}
/* ===========================================================================
ΔΙΟΡΘΩΣΕΙΣ QA — 2026-09-20
=========================================================================== */
/* --- ΚΡΙΣΙΜΟ: οι εικόνες των καρτών έβγαιναν 1500px ύψος σε ΚΑΘΕ ανάλυση.
Αιτία: `height:100%` σε ![]()
μέσα σε block γονέα που παίρνει ύψος από
`aspect-ratio`. Το ποσοστό δεν έχει βάση να λυθεί, γίνεται `auto`, και η
εικόνα επιβάλλει το εγγενές της ύψος — οπότε το aspect-ratio αγνοείται.
Λύση: ο γονέας κρατά την αναλογία, η εικόνα τοποθετείται απόλυτα μέσα του. */
.dn-solution__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
padding: 0;
}
.dn-solution__media img,
.dn-solution__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 14px;
object-fit: contain; /* εξοπλισμός: ποτέ crop */
aspect-ratio: auto;
}
/* Ίδιο ύψος τίτλου ώστε ένας μακρύς ελληνικός τίτλος να μη σπάει τη σειρά. */
.dn-solution__title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(3 * 1.32em);
}
/* Στα μικρά τηλέφωνα μία κάρτα ανά σειρά — δύο στηλάκια των 140px είναι άχρηστα. */
@media (max-width: 430px) {
.dn-grid--solutions { grid-template-columns: 1fr; }
.dn-solution { flex-direction: row; }
.dn-solution__media { flex: 0 0 38%; aspect-ratio: 1 / 1; }
.dn-solution__title { min-height: 0; -webkit-line-clamp: 2; }
.dn-solution__body { padding: 14px 16px; }
}
/* ===========================================================================
QA ΓΥΡΟΣ 2 — hero κινητού, στόχοι αφής, πλωτά widgets
=========================================================================== */
/* --- HERO: στο κινητό είναι δική του σύνθεση, όχι σμίκρυνση του desktop ----
Σειρά: eyebrow → H1 → περιγραφή → κύριο CTA → δευτερεύον → εικόνα → μάρκες.
Στόχος συνολικού ύψους ~600-700px στα 390 (ήταν 854). */
.dn-hero__eyebrow { margin-bottom: 12px; }
@media (max-width: 899px) {
.dn-hero {
grid-template-columns: 1fr;
gap: 0;
padding: 26px 0 36px;
}
.dn-hero__text { display: contents; } /* τα παιδιά μπαίνουν στο grid */
.dn-hero__eyebrow { order: 1; margin: 0 0 8px; }
.dn-hero h1 { order: 2; margin: 0 0 12px; font-size: clamp(30px, 8.6vw, 36px); line-height: 1.14; }
.dn-hero__lead { order: 3; font-size: 16.5px; line-height: 1.55; margin: 0 0 18px; }
.dn-hero__actions { order: 4; margin: 0 0 22px; gap: 10px; }
.dn-hero__media { order: 5; margin: 0 0 18px; }
.dn-hero__note { order: 6; margin: 0; }
/* Κύριο CTA πλήρους πλάτους — είναι η κύρια ενέργεια.
Δευτερεύον στο φυσικό του πλάτος: δύο ίδια κουμπιά μπερδεύουν την ιεραρχία. */
.dn-hero__actions { display: flex; flex-direction: column; align-items: stretch; }
.dn-hero__actions .dn-btn--primary { width: 100%; justify-content: center; }
.dn-hero__actions .dn-btn--ghost { align-self: flex-start; width: auto; padding: 12px 22px; }
/* Η εικόνα δεν επιτρέπεται να καταπιεί την οθόνη. */
.dn-hero__media { padding: 14px; }
.dn-hero__media img { max-height: 210px; width: auto; margin: 0 auto; }
.dn-hero__media::after { display: none; } /* κοβόταν στην άκρη της οθόνης */
.dn-hero__note { font-size: 13.5px; gap: 6px 14px; }
}
@media (max-width: 380px) {
.dn-hero__media img { max-height: 176px; }
.dn-hero__lead { font-size: 16px; }
}
/* --- ΣΤΟΧΟΙ ΑΦΗΣ: 44px όπου είναι πρακτικό --------------------------------- */
@media (max-width: 899px) {
.dn-solution__title a,
.dn-cat,
.dn-brandcard { min-height: 44px; }
.dn-solution__more { min-height: 44px; display: flex; align-items: center; }
.ct-footer a,
.dn-footer a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.dn-support__tags li { min-height: 40px; display: inline-flex; align-items: center; }
.dn-header-tel::before { padding: 13px 11px; } /* 48px στόχος */
}
/* --- ΠΛΩΤΑ WIDGETS: Translate + reCAPTCHA ---------------------------------
Κάλυπταν το CTA του hero και την κάτω μπάρα. Δεν κρύβονται — μετακινούνται
πάνω από τη μπάρα ενεργειών και μικραίνουν στα μικρά τηλέφωνα. */
.grecaptcha-badge {
z-index: 80 !important; /* κάτω από την μπάρα (90) */
}
@media (max-width: 899px) {
.grecaptcha-badge {
bottom: 72px !important; /* πάνω από την 58px μπάρα */
transform: scale(.72);
transform-origin: bottom right;
}
}
@media (max-width: 380px) {
.grecaptcha-badge { transform: scale(.62); }
}
/* --- Στόχοι αφής, γύρος 2 --------------------------------------------------- */
/* Τα εικονίδια αναζήτησης/μενού ήταν 15px και 18px ύψος. */
.ct-header-search.ct-toggle,
.ct-header-trigger.ct-toggle {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Το τηλέφωνο στη σκούρα λωρίδα είναι από τα σημαντικότερα links της σελίδας. */
.dn-support__phone { min-height: 48px; align-items: center; }
/* Ολόκληρη η κάρτα γίνεται ο στόχος, αντί για έναν μικρό τίτλο 20px.
Ο τίτλος παραμένει το προσβάσιμο όνομα του συνδέσμου. */
.dn-solution { position: relative; }
.dn-solution__title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.dn-solution__media { position: relative; } /* παραμένει κάτω από το overlay */
/* --- Hero: λίγο πιο κοντό ώστε να πέσει στο 600-700 ------------------------ */
@media (max-width: 899px) {
.dn-hero { padding: 22px 0 30px; }
.dn-hero__lead { margin-bottom: 16px; }
.dn-hero__actions { margin-bottom: 18px; }
.dn-hero__media { margin-bottom: 14px; padding: 12px; }
.dn-hero__media img { max-height: 186px; }
}
@media (max-width: 380px) {
.dn-hero__media img { max-height: 160px; }
}
/* ===========================================================================
FOOTER — σκούρο τελικό block μετά τη φωτεινή σελίδα
=========================================================================== */
.ct-footer {
background: var(--dn-charcoal);
color: #F2EFEC;
}
.ct-footer [data-row="middle"] { padding: 56px 0 44px; }
.ct-footer [data-row="bottom"] {
background: #1E1C1A; /* λίγο πιο σκούρο = κλείσιμο */
padding: 16px 0;
font-size: 14px;
color: #A8A29C;
}
.ct-footer [data-row="bottom"] a { color: #C9C4BE; }
.ct-footer [data-row="bottom"] a:hover { color: var(--dn-orange); }
.dn-foot-h {
font-family: 'Inter Tight', sans-serif;
font-size: 14px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--dn-orange);
margin: 0 0 16px;
}
.dn-foot-list { list-style: none; margin: 0; padding: 0; }
.dn-foot-list li { margin: 0; }
.dn-foot-list a, .dn-foot-list span {
display: inline-flex; align-items: center; min-height: 40px;
color: #DED9D4; text-decoration: none; font-size: 15.5px; line-height: 1.4;
}
.dn-foot-list a:hover { color: var(--dn-orange); }
.dn-foot-brand img { width: 190px; height: auto; margin: 0 0 16px; display: block; }
.dn-foot-brand p { color: #B5AFA9; font-size: 15px; line-height: 1.6; margin: 0; max-width: 30ch; }
.dn-foot-tel { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 21px !important; color: #fff !important; }
.dn-foot-tel:hover { color: var(--dn-orange) !important; }
.dn-foot-contact span { color: #B5AFA9; }
.dn-foot-cta { margin-top: 14px; }
.ct-footer :where(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* --- Κινητό: στοίβα, όχι τέσσερις στριμωγμένες στήλες --------------------- */
@media (max-width: 999px) {
.ct-footer [data-row="middle"] [data-column] { margin-bottom: 26px; }
}
@media (max-width: 689px) {
.ct-footer [data-row="middle"] { padding: 36px 0 26px; }
/* Σειρά: επωνυμία → επικοινωνία → λύσεις → υπηρεσίες */
.ct-footer [data-row="middle"] [data-column] { display: block; }
.ct-footer [data-column]:nth-child(1) { order: 1; }
.ct-footer [data-column]:nth-child(4) { order: 2; }
.ct-footer [data-column]:nth-child(2) { order: 3; }
.ct-footer [data-column]:nth-child(3) { order: 4; }
.ct-footer [data-row="middle"] > * { display: flex; flex-direction: column; }
.dn-foot-list a, .dn-foot-list span { min-height: 44px; }
.dn-foot-cta { width: 100%; justify-content: center; }
.dn-foot-brand p { max-width: none; }
}
/* --- Footer grid & φόντο ---------------------------------------------------
Η Blocksy παρήγαγε μονόστηλο grid για τη σειρά (1240px ανά στήλη), οπότε οι
τέσσερις περιοχές στοιβάζονταν και σε desktop. Ορίζονται ρητά εδώ. */
.ct-footer [data-row],
.ct-footer { background: var(--dn-charcoal) !important; }
.ct-footer [data-row="bottom"] { background: #1E1C1A !important; }
.ct-footer [data-row="middle"] > .ct-container {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
gap: 40px;
align-items: start;
}
.ct-footer [data-row="middle"] [data-column] { display: block; }
@media (max-width: 999px) {
.ct-footer [data-row="middle"] > .ct-container {
grid-template-columns: 1fr 1fr;
gap: 30px 36px;
}
}
@media (max-width: 689px) {
.ct-footer [data-row="middle"] > .ct-container {
grid-template-columns: 1fr;
gap: 26px;
}
/* επωνυμία → επικοινωνία → λύσεις → υπηρεσίες: τηλέφωνο/email ψηλά */
.ct-footer [data-row="middle"] [data-column="widget-area-1"] { order: 1; }
.ct-footer [data-row="middle"] [data-column="widget-area-4"] { order: 2; }
.ct-footer [data-row="middle"] [data-column="widget-area-2"] { order: 3; }
.ct-footer [data-row="middle"] [data-column="widget-area-3"] { order: 4; }
.ct-footer [data-row="middle"] [data-column] { margin-bottom: 0; }
}
.ct-footer .ct-widget { margin-bottom: 0; }
/* Κινητό: οι δύο λίστες δίπλα-δίπλα. 11 σύνδεσμοι σε μία στήλη έκαναν
τον footer 1200px — υπερβολικό ύψος για τηλέφωνο. */
@media (max-width: 689px) {
.ct-footer [data-row="middle"] > .ct-container {
grid-template-columns: 1fr 1fr;
gap: 22px 20px;
}
.ct-footer [data-row="middle"] [data-column="widget-area-1"] { grid-column: 1 / -1; order: 1; }
.ct-footer [data-row="middle"] [data-column="widget-area-4"] { grid-column: 1 / -1; order: 2; }
.ct-footer [data-row="middle"] [data-column="widget-area-2"] { order: 3; }
.ct-footer [data-row="middle"] [data-column="widget-area-3"] { order: 4; }
.dn-foot-list a, .dn-foot-list span { min-height: 42px; font-size: 15px; }
.dn-foot-brand img { width: 160px; }
.dn-foot-h { margin-bottom: 8px; }
}
@media (max-width: 359px) {
.ct-footer [data-row="middle"] > .ct-container { grid-template-columns: 1fr; }
.ct-footer [data-row="middle"] [data-column] { grid-column: 1 / -1; }
}
/* ===========================================================================
ΑΝΑΖΗΤΗΣΗ
=========================================================================== */
.dn-searchpage { padding: 48px 0 72px; }
.dn-searchpage__head { max-width: 720px; margin: 0 0 36px; }
.dn-searchpage__head h1 { margin: 0 0 10px; }
.dn-searchpage__q { color: var(--theme-palette-color-3); margin: 0 0 20px; font-size: 17px; }
.dn-searchpage__q em { font-style: normal; color: var(--theme-palette-color-4); font-weight: 600; }
.dn-searchform { display: flex; gap: 10px; flex-wrap: wrap; }
.dn-searchform input[type="search"] {
flex: 1 1 260px;
min-height: 48px;
padding: 12px 16px;
border: 1.5px solid var(--theme-palette-color-5);
border-radius: var(--dn-radius-sm);
background: #fff;
font-size: 16px; /* <16px κάνει zoom στο iOS */
color: var(--theme-palette-color-4);
}
.dn-searchform input[type="search"]:focus-visible {
outline: 2px solid var(--dn-orange); outline-offset: 1px; border-color: var(--dn-orange);
}
.dn-searchform .dn-btn { flex: 0 0 auto; }
.dn-searchpage__nav { margin-top: 36px; display: flex; gap: 8px; flex-wrap: wrap; }
.dn-searchpage__nav .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px; padding: 0 12px;
border: 1px solid var(--theme-palette-color-5); border-radius: var(--dn-radius-sm);
text-decoration: none; color: var(--theme-palette-color-4);
}
.dn-searchpage__nav .page-numbers.current { background: var(--theme-palette-color-1); color: #fff; border-color: transparent; }
.dn-noresults {
background: var(--theme-palette-color-6);
border-radius: var(--dn-radius);
padding: 32px 28px;
max-width: 760px;
}
.dn-noresults__lead { font-size: 19px; margin: 0 0 8px; color: var(--theme-palette-color-4); }
.dn-noresults p { color: var(--theme-palette-color-3); }
.dn-noresults em { font-style: normal; font-weight: 600; color: var(--theme-palette-color-4); }
.dn-noresults__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
@media (max-width: 689px) {
.dn-searchpage { padding: 28px 0 48px; }
.dn-searchform .dn-btn { width: 100%; justify-content: center; }
.dn-noresults { padding: 24px 20px; }
.dn-noresults__links .dn-btn { width: 100%; justify-content: center; }
}
/* Το πεδίο αναζήτησης μέσα στο off-canvas μενού: πρώτο και ευδιάκριτο. */
.ct-panel-content [data-id="search"] { margin-bottom: 18px; }
.ct-panel-content [data-id="search"] input[type="search"] { min-height: 48px; font-size: 16px; }
/* --- Translate widget vs footer bottom bar --------------------------------
Έκοβε το copyright στα τηλέφωνα. Ο footer αποκτά χώρο από κάτω αντί να
κρυφτεί το widget. */
@media (max-width: 899px) {
.ct-footer [data-row="bottom"] { padding-bottom: 60px; }
.ct-footer [data-row="bottom"] .ct-container { padding-right: 8px; }
}
/* Πεδίο αναζήτησης στο off-canvas μενού */
.dn-oc-search {
display: flex;
gap: 8px;
margin: 0 0 18px;
}
.dn-oc-search input[type="search"] {
flex: 1;
min-height: 48px;
padding: 12px 14px;
font-size: 16px; /* <16px προκαλεί zoom στο iOS */
border: 1.5px solid var(--theme-palette-color-5);
border-radius: var(--dn-radius-sm);
background: #fff;
color: var(--theme-palette-color-4);
}
.dn-oc-search input[type="search"]:focus-visible {
outline: 2px solid var(--dn-orange); outline-offset: 1px;
}
.dn-oc-search button {
min-width: 48px; min-height: 48px;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--dn-radius-sm);
background: var(--theme-palette-color-1); color: #fff; cursor: pointer;
}
.dn-oc-search button:hover { background: var(--theme-palette-color-2); }
/* ===========================================================================
ΝΟΜΙΚΕΣ ΣΕΛΙΔΕΣ
=========================================================================== */
.dn-lead { font-size: 18.5px; line-height: 1.6; color: var(--theme-palette-color-3); }
/* Τα σημεία που περιμένουν στοιχεία από την επιχείρηση πρέπει να ΦΑΙΝΟΝΤΑΙ
στο staging, ώστε να μη δημοσιευτούν κατά λάθος ως οριστικό κείμενο. */
.dn-todo {
background: #FFF6E8;
border-left: 4px solid #C25410;
padding: 14px 16px;
border-radius: 0 var(--dn-radius-sm) var(--dn-radius-sm) 0;
font-size: 15.5px;
color: #6B4415;
}
.dn-todo strong { color: #8A3D00; }
/* Οι πίνακες cookies πρέπει να διαβάζονται και στα 320px. */
.entry-content table {
width: 100%;
border-collapse: collapse;
margin: 22px 0;
font-size: 15px;
}
.entry-content th, .entry-content td {
border: 1px solid var(--theme-palette-color-5);
padding: 10px 12px;
text-align: left;
vertical-align: top;
}
.entry-content thead th {
background: var(--theme-palette-color-6);
font-family: 'Inter Tight', sans-serif;
font-weight: 600;
}
.entry-content td code { font-size: 13.5px; word-break: break-word; }
@media (max-width: 767px) {
/* Ο πίνακας γίνεται κάρτες: το οριζόντιο scroll σε πίνακα 6 στηλών
στα 320px είναι πρακτικά αδιάβαστο. */
.entry-content table, .entry-content thead, .entry-content tbody,
.entry-content tr, .entry-content th, .entry-content td { display: block; }
.entry-content thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.entry-content tbody tr {
border: 1px solid var(--theme-palette-color-5);
border-radius: var(--dn-radius-sm);
margin: 0 0 14px;
padding: 6px 4px;
}
.entry-content tbody td { border: 0; padding: 7px 12px; }
.entry-content tbody td::before {
content: attr(data-label);
display: block;
font-size: 12px; font-weight: 600; letter-spacing: .05em;
text-transform: uppercase; color: var(--dn-orange);
margin-bottom: 2px;
}
.dn-lead { font-size: 17px; }
}
/* ===========================================================================
ΛΩΡΙΔΑ ΤΕΧΝΙΚΗΣ ΥΠΟΣΤΗΡΙΞΗΣ — polish
Ήταν σκούρο κουτί 1240px μέσα σε 1440px viewport, με λευκά περιθώρια
δεξιά/αριστερά. Γίνεται πραγματική λωρίδα από άκρη σε άκρη.
=========================================================================== */
/* `clip` αντί για `hidden`: δεν δημιουργεί scroll container, άρα το full-bleed
δεν μπορεί να γεννήσει οριζόντιο scroll ούτε με κλασική μπάρα κύλισης. */
body { overflow-x: clip; }
.dn-band-dark {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50% + 0px);
padding-right: calc(50vw - 50% + 0px);
padding-top: 76px;
padding-bottom: 76px;
position: relative;
}
/* Λεπτή πορτοκαλί γραμμή στην κορυφή: δένει τη λωρίδα με την ταυτότητα
χωρίς να γεμίσει πορτοκαλί ολόκληρο το block. */
.dn-band-dark::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--dn-orange);
}
.dn-band-dark .dn-eyebrow { color: var(--dn-orange); }
.dn-band-dark h2 { max-width: 16ch; }
.dn-support__grid {
gap: 56px;
align-items: center;
}
/* Τα pills ευθυγραμμίζονται σε καθαρές σειρές αντί για τυχαίο wrap. */
.dn-support__tags { gap: 10px 10px; margin-top: 26px; }
.dn-support__tags li {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .18);
padding: 9px 16px;
}
/* Δεξιά στήλη: το τηλέφωνο και τα κουμπιά ως ένα συνεκτικό block, όχι
δύο στοιχεία που αιωρούνται. */
.dn-support__actions {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 12px;
padding: 26px 24px;
gap: 14px;
align-items: flex-start;
}
.dn-support__actions::before {
content: "Τηλεφωνική υποστήριξη";
font-size: 13px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255, 255, 255, .6);
}
.dn-support__phone { margin: 0; }
.dn-support__actions .dn-btn { width: 100%; justify-content: center; }
@media (max-width: 899px) {
.dn-band-dark { padding-top: 46px; padding-bottom: 46px; }
.dn-band-dark h2 { max-width: none; }
.dn-support__grid { gap: 26px; }
.dn-support__actions { padding: 20px 18px; }
.dn-support__tags { margin-top: 20px; }
.dn-support__tags li { font-size: 13.5px; padding: 8px 13px; }
}
/* Ο επιλογέας γλώσσας στον footer, αφού βγήκε από τον αέρα. */
.dn-foot-lang {
margin-top: 18px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.dn-foot-lang__label {
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #8F8A85;
}
.dn-foot-lang .goog-te-gadget,
.dn-foot-lang select { font-size: 14px !important; }
/* Το `.is-layout-constrained > :where(...)` του WordPress έβαζε auto margins
(100px στα 1440) και κρατούσε τη λωρίδα μέσα στο container. Το `:where()`
έχει μηδενική ειδικότητα, οπότε αρκεί ένας πιο συγκεκριμένος επιλογέας. */
.entry-content.is-layout-constrained > .dn-band-dark,
.entry-content > .dn-band-dark {
max-width: none;
width: auto;
margin-left: 0;
margin-right: 0;
/* το περιεχόμενο παραμένει κεντραρισμένο στα 1240, η λωρίδα απλώνεται */
padding-left: max(20px, calc(50% - 620px));
padding-right: max(20px, calc(50% - 620px));
}
@media (max-width: 689px) {
.entry-content.is-layout-constrained > .dn-band-dark,
.entry-content > .dn-band-dark {
padding-left: 20px;
padding-right: 20px;
}
}
/* ===========================================================================
BREADCRUMBS
=========================================================================== */
.dn-crumbs { margin: 0 0 16px; }
.dn-crumbs ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center;
gap: 2px 0;
font-size: 14px; line-height: 1.5;
}
.dn-crumbs li { display: inline-flex; align-items: center; }
.dn-crumbs li + li::before {
content: "›";
margin: 0 9px;
color: var(--dn-grey);
flex: none;
}
.dn-crumbs a { color: var(--theme-palette-color-3); text-decoration: none; }
.dn-crumbs a:hover { color: var(--theme-palette-color-1); text-decoration: underline; }
.dn-crumbs [aria-current] {
color: var(--theme-palette-color-4);
font-weight: 600;
/* Ο τίτλος προϊόντος είναι μακρύς· δεν επιτρέπεται να σπάσει τη γραμμή σε 5 σειρές. */
max-width: 34ch;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 689px) {
.dn-crumbs { font-size: 13px; }
.dn-crumbs [aria-current] { max-width: 20ch; }
.dn-crumbs li + li::before { margin: 0 6px; }
}
/* ===========================================================================
CATALOG SIDEBAR
=========================================================================== */
.dn-catnav { display: flex; flex-direction: column; gap: 26px; }
.dn-catnav__block {
background: var(--theme-palette-color-8);
border: 1px solid var(--theme-palette-color-5);
border-radius: var(--dn-radius);
padding: 20px 18px;
}
.dn-catnav__h {
font-family: 'Inter Tight', sans-serif;
font-size: 13px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--dn-orange);
margin: 0 0 14px;
}
/* --- αναζήτηση --- */
.dn-catnav__search { display: flex; gap: 8px; }
.dn-catnav__search input[type="search"] {
flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px;
font-size: 16px; /* κανένα iOS zoom */
border: 1.5px solid var(--theme-palette-color-5);
border-radius: var(--dn-radius-sm);
background: var(--theme-palette-color-7);
color: var(--theme-palette-color-4);
}
.dn-catnav__search input:focus-visible { outline: 2px solid var(--dn-orange); outline-offset: 1px; }
.dn-catnav__search button {
min-width: 44px; min-height: 44px; border: 0; cursor: pointer;
border-radius: var(--dn-radius-sm);
background: var(--theme-palette-color-1); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
.dn-catnav__search button:hover { background: var(--theme-palette-color-2); }
/* --- δέντρο κατηγοριών --- */
.dn-catnav__details > summary { cursor: default; list-style: none; }
.dn-catnav__details > summary::-webkit-details-marker { display: none; }
.dn-catnav__tree, .dn-catnav__sub { list-style: none; margin: 0; padding: 0; }
.dn-catnav__sub { margin: 2px 0 6px 14px; padding-left: 10px; border-left: 1px solid var(--theme-palette-color-5); }
.dn-catnav__item > a {
display: block;
padding: 9px 10px;
border-radius: var(--dn-radius-sm);
font-size: 15px; line-height: 1.35;
color: var(--theme-palette-color-4);
text-decoration: none;
}
.dn-catnav__item > a:hover { background: var(--theme-palette-color-6); color: var(--theme-palette-color-1); }
.dn-catnav__item.is-current > a {
background: var(--dn-orange-soft);
color: var(--theme-palette-color-2);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--dn-orange);
}
/* --- σχετικά --- */
.dn-catnav__related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dn-catnav__related a {
display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center;
padding: 8px; border-radius: var(--dn-radius-sm);
text-decoration: none; min-height: 44px;
}
.dn-catnav__related a:hover { background: var(--theme-palette-color-6); }
.dn-catnav__thumb {
display: block; width: 52px; height: 52px;
background: var(--theme-palette-color-7); border-radius: 6px; overflow: hidden;
}
.dn-catnav__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.dn-catnav__ph { display: block; width: 100%; height: 100%; }
.dn-catnav__rtitle {
font-size: 14px; line-height: 1.35; color: var(--theme-palette-color-4);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dn-catnav__related a:hover .dn-catnav__rtitle { color: var(--theme-palette-color-1); }
/* --- επικοινωνία --- */
.dn-catnav__contact { background: var(--theme-palette-color-6); border-color: transparent; }
.dn-catnav__contact .dn-catnav__h { text-transform: none; letter-spacing: 0; font-size: 17px; color: var(--theme-palette-color-4); }
.dn-catnav__tel {
display: block; margin: 0 0 12px;
font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 24px;
color: var(--theme-palette-color-4); text-decoration: none; min-height: 44px;
}
.dn-catnav__tel:hover { color: var(--theme-palette-color-1); }
.dn-catnav__contact .dn-btn { width: 100%; justify-content: center; }
/* --- sticky: μόνο συμπαγές block, όχι ολόκληρη στήλη 1000px --- */
@media (min-width: 1000px) {
.ct-sidebar .dn-catnav { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
.ct-sidebar .dn-catnav::-webkit-scrollbar { width: 6px; }
.ct-sidebar .dn-catnav::-webkit-scrollbar-thumb { background: var(--theme-palette-color-5); border-radius: 3px; }
}
/* --- κινητό: συμπαγή χειριστήρια, όχι ολόκληρο desktop sidebar --- */
@media (max-width: 999px) {
.dn-catnav { gap: 14px; margin-top: 34px; }
.dn-catnav__block { padding: 16px 14px; }
.dn-catnav__summary {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; margin: 0; min-height: 44px;
font-size: 15px; letter-spacing: .02em; text-transform: none;
color: var(--theme-palette-color-4);
}
.dn-catnav__summary::after {
content: "＋"; color: var(--dn-orange); font-weight: 700; font-size: 18px;
}
.dn-catnav__details[open] > .dn-catnav__summary { margin-bottom: 10px; }
.dn-catnav__details[open] > .dn-catnav__summary::after { content: "−"; }
.dn-catnav__item > a { padding: 11px 10px; min-height: 44px; }
.dn-catnav__tel { font-size: 22px; }
}
/* ---------------------------------------------------------------------------
Γραμμή meta σε καταχωρίσεις καταλόγου.
Ο συγγραφέας και μια ημερομηνία του 2014 είναι θόρυβος όταν η σελίδα
λειτουργεί ως καρτέλα προϊόντος. Μένει η κατηγορία, ως ετικέτα τύπου.
Σημείωση: το theme mod `single_blog_post_meta` αποθηκεύεται σωστά αλλά δεν
επηρεάζει το hero της Blocksy, που κρατά δική του λίστα στοιχείων. Η
απόκρυψη γίνεται εδώ, παρουσιαστικά — τα δεδομένα παραμένουν στο markup
και στα structured data.
--------------------------------------------------------------------------- */
.single-post .entry-meta .meta-author,
.single-post .entry-meta .meta-date,
.single-post .ct-meta .meta-author,
.single-post .ct-meta .meta-date { display: none; }
.single-post .entry-meta,
.single-post .ct-meta { gap: 0; }
.single-post .meta-categories {
font-size: 12.5px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
}
.single-post .meta-categories a { color: var(--dn-orange); text-decoration: none; }
.single-post .meta-categories a:hover { color: var(--theme-palette-color-2); text-decoration: underline; }
/* ---------------------------------------------------------------------------
Καμία ημερομηνία δημοσίευσης, πουθενά στο front end.
Σε κατάλογο εξοπλισμού το «30 Αυγούστου 2024» δεν προσθέτει πληροφορία και
κάνει τα προϊόντα να μοιάζουν εγκαταλελειμμένα. Ομοίως ο συγγραφέας.
Το `blog_archive_order` καθάρισε τη μία γραμμή meta· τα αρχεία κατηγοριών
χρησιμοποιούν δικό τους option, οπότε η απόκρυψη γίνεται εδώ. Τα δεδομένα
παραμένουν στο markup και στα structured data.
--------------------------------------------------------------------------- */
.meta-date,
.meta-author,
.ct-meta-element-date,
.ct-meta-element-author,
.entry-meta .posted-on,
.entry-meta .byline { display: none !important; }
/* Αν μείνει μόνο η κατηγορία, να μη μένει ορφανός διαχωριστής. */
.entry-meta > li:only-child::after,
.entry-meta > li:last-child::after { content: none !important; }
/* Social στον footer: δύο εικονίδια, όχι τοίχος. */
.dn-foot-social { display: flex; gap: 10px; margin-top: 18px; }
.dn-foot-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--dn-radius-sm);
color: #DED9D4;
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.dn-foot-social a:hover {
background: var(--dn-orange);
border-color: var(--dn-orange);
color: #fff;
}
/* Honeypot: αόρατο για ανθρώπους και για screen readers, ορατό για bots.
Δεν χρησιμοποιείται display:none — αρκετά bots το ανιχνεύουν. */
.dn-hp {
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* ===========================================================================
BANNER VISUALS — placeholders
Προέρχονται από το concept collage /tmp/DIALNET.png. Η καθαρή φωτογραφική
περιοχή κάθε panel είναι 230–302px πλάτος, οπότε τα max-width παρακάτω
κρατούν την προβολή κοντά στο φυσικό τους μέγεθος (έως ~1.4×). Μόλις
έρθουν full-res εξαγωγές, αλλάζουν μόνο τα αρχεία — όχι το layout.
=========================================================================== */
.dn-hero__media--photo {
padding: 0;
overflow: hidden;
background: var(--theme-palette-color-6);
}
.dn-hero__media--photo img {
width: 100%;
max-width: 420px; /* 302px φυσικό → ~1.4× */
height: auto;
display: block;
margin: 0 auto;
mix-blend-mode: normal; /* πραγματική φωτογραφία, όχι cut-out */
border-radius: 14px;
}
@media (max-width: 899px) {
.dn-hero__media--photo img { max-height: 210px; width: auto; border-radius: 10px; }
}
/* Εικόνα ενότητας, δεξιά από την επικεφαλίδα */
.dn-sectionfig {
margin: 0 0 -46px;
float: right;
max-width: 360px; /* 264px φυσικό → ~1.36× */
width: 34%;
shape-outside: inset(0 round 12px);
}
.dn-sectionfig img { width: 100%; height: auto; display: block; border-radius: 12px; }
@media (max-width: 899px) {
.dn-sectionfig { float: none; width: 100%; max-width: none; margin: 0 0 22px; }
.dn-sectionfig img { max-height: 200px; object-fit: cover; object-position: center 30%; }
}
/* Εικόνα μέσα στη σκούρα λωρίδα υποστήριξης */
.dn-support__fig { margin: 0 0 16px; max-width: 300px; }
.dn-support__fig img {
width: 100%; height: auto; display: block;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .14);
}
@media (max-width: 899px) { .dn-support__fig { max-width: 100%; } }
/* Εικόνα κορυφής σε σελίδα υπηρεσίας */
.dn-pagefig { margin: 0 0 26px; max-width: 390px; }
.dn-pagefig img { width: 100%; height: auto; display: block; border-radius: 12px; }
@media (max-width: 689px) { .dn-pagefig { max-width: 100%; } }
/* ===========================================================================
ΕΣΩΤΕΡΙΚΕΣ ΣΕΛΙΔΕΣ — κοινό hero
Οι σελίδες περιεχομένου ήταν τοίχοι κειμένου χωρίς καμία δομή. Το ίδιο
πρότυπο με το /diktya-kalodiosi/, αλλά με hero που κρατά τα breadcrumbs.
=========================================================================== */
.entry-content.is-layout-constrained > .dn-pagehero,
.entry-content > .dn-pagehero {
max-width: none; width: auto; margin-left: 0; margin-right: 0;
padding-left: max(20px, calc(50% - 620px));
padding-right: max(20px, calc(50% - 620px));
}
.dn-pagehero {
background: var(--dn-charcoal);
color: #fff;
padding-top: 52px; padding-bottom: 56px;
position: relative;
}
.dn-pagehero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 3px; background: var(--dn-orange);
}
.dn-pagehero__inner { max-width: 760px; }
.dn-pagehero h1 { color: #fff; margin: 0 0 12px; font-size: clamp(29px, 4.4vw, 46px); line-height: 1.12; }
.dn-pagehero__lead { font-size: 17.5px; line-height: 1.65; color: rgba(255,255,255,.82); margin: 0; max-width: 40em; }
.dn-pagehero .dn-eyebrow { color: var(--dn-orange); }
/* Τα breadcrumbs μεταφέρονται μέσα στο hero, οπότε αλλάζουν χρώματα */
.dn-pagehero .dn-crumbs a { color: rgba(255,255,255,.66); }
.dn-pagehero .dn-crumbs a:hover { color: var(--dn-orange); }
.dn-pagehero .dn-crumbs li + li::before { color: rgba(255,255,255,.4); }
.dn-pagehero .dn-crumbs [aria-current] { color: #fff; }
/* --- Δομικά στοιχεία σελίδας ---------------------------------------------- */
.dn-prose { max-width: 760px; }
.dn-prose h2 { margin: 0 0 14px; }
.dn-prose p { font-size: 17px; line-height: 1.75; color: var(--theme-palette-color-3); }
.dn-prose > * + h2 { margin-top: 36px; }
.dn-speclist { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.dn-speclist li {
background: #fff; border: 1px solid var(--theme-palette-color-5, #E6E7E9);
border-left: 3px solid var(--dn-orange); border-radius: var(--dn-radius-sm);
padding: 11px 16px; font-size: 15.5px; line-height: 1.55;
}
.dn-speclist--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 799px) { .dn-speclist--2 { grid-template-columns: 1fr; } }
.dn-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dn-card-gap); }
@media (max-width: 999px) { .dn-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .dn-tiles { grid-template-columns: 1fr; } }
.dn-tile {
display: flex; flex-direction: column; gap: 7px;
padding: 24px 22px; background: #fff;
border: 1px solid var(--theme-palette-color-5, #E6E7E9);
border-top: 3px solid transparent; border-radius: var(--dn-radius);
text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease;
}
a.dn-tile:hover { border-top-color: var(--dn-orange); box-shadow: 0 6px 22px rgba(42,39,36,.08); }
.dn-tile__k { font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--dn-orange); }
.dn-tile__t { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 18.5px; color: var(--theme-palette-color-1); line-height: 1.25; }
.dn-tile__d { font-size: 15px; line-height: 1.6; color: var(--theme-palette-color-3); }
.dn-tile__m { margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--dn-orange); }
/* Κάρτα προϊόντος/μοντέλου με τεχνικά χαρακτηριστικά */
.dn-model { border: 1px solid var(--theme-palette-color-5, #E6E7E9); border-radius: var(--dn-radius); background: #fff; overflow: hidden; }
.dn-model + .dn-model { margin-top: 22px; }
.dn-model__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 18px 22px; border-bottom: 1px solid var(--theme-palette-color-5, #E6E7E9); background: var(--dn-orange-soft); }
.dn-model__head h3 { margin: 0; font-size: 19px; }
.dn-model__tag { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dn-orange); }
.dn-model__body { padding: 20px 22px 22px; }
.dn-model__body .dn-speclist { margin-top: 0; }
/* Τελική κλήση σε δράση */
.dn-cta { background: var(--dn-charcoal); color: #fff; }
.dn-cta h2 { color: #fff; margin: 0 0 12px; }
.dn-cta p { color: rgba(255,255,255,.82); font-size: 17px; margin: 0 0 22px; max-width: 46em; }
.dn-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 599px) { .dn-cta__actions .dn-btn { width: 100%; justify-content: center; } }
@media (max-width: 689px) {
.dn-pagehero { padding-top: 34px; padding-bottom: 38px; }
.dn-pagehero__lead { font-size: 16.5px; }
}
/* Χωρίς κενή λωρίδα ανάμεσα σε κεφαλίδα και hero σελίδας */
.dn-has-pagehero .ct-container-full,
.dn-has-pagehero .ct-container { padding-top: 0 !important; }
/* Οι σελίδες περιεχομένου δεν χρειάζονται τον ρυθμό της αρχικής: δύο γειτονικές
ενότητες έδιναν 96+96=192px κενό. Η αρχική μένει ως έχει. */
.dn-has-pagehero .dn-section { padding: 62px 0; }
.dn-has-pagehero .dn-section--tight { padding: 46px 0; }
.dn-has-pagehero .dn-section__head { margin-bottom: 28px; }
.dn-has-pagehero .dn-section + .dn-section--tint,
.dn-has-pagehero .dn-section--tint + .dn-section { }
@media (max-width: 689px) {
.dn-has-pagehero .dn-section { padding: 42px 0; }
.dn-has-pagehero .dn-section--tight { padding: 34px 0; }
}
/* Κάρτα μοντέλου: εικόνα αριστερά, χαρακτηριστικά δεξιά — αντί για εικόνα
με μεγάλο κενό δίπλα της. */
@media (min-width: 800px) {
.dn-model__body { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; }
.dn-model__body .dn-pagefig { margin: 0; }
.dn-model__body .dn-speclist--2 { grid-template-columns: 1fr; }
}
.dn-model__body .dn-pagefig img { width: 100%; height: auto; display: block; }
@media (max-width: 799px) {
.dn-model__body .dn-pagefig { max-width: 190px; margin: 0 0 16px; }
}
/* --- CTA block: ολοκληρωμένη ενότητα, όχι H2 + δύο γραμμές ---------------- */
.dn-cta { position: relative; overflow: hidden; }
.dn-cta__inner { max-width: 720px; position: relative; z-index: 2; }
.dn-cta .dn-eyebrow--light {
color: var(--dn-orange); letter-spacing: .1em; text-transform: uppercase;
font-size: 13px; font-weight: 600; margin: 0 0 12px;
}
.dn-cta h2 { font-size: clamp(24px, 3.1vw, 34px); line-height: 1.2; }
.dn-cta p { font-size: 17.5px; line-height: 1.7; }
.dn-cta__actions { margin-top: 26px; }
/* διακριτικό γεωμετρικό στοιχείο, ώστε να μη μοιάζει μισοτελειωμένο */
.dn-cta::after {
content: ""; position: absolute; right: -80px; top: 50%; translate: 0 -50%;
width: 380px; height: 380px; border-radius: 50%;
background: radial-gradient(circle at 36% 36%, rgba(238,115,38,.22), rgba(238,115,38,0) 68%);
pointer-events: none;
}
.dn-has-pagehero .dn-cta { padding-top: 66px; padding-bottom: 70px; }
@media (max-width: 899px) {
.dn-cta::after { width: 260px; height: 260px; right: -110px; }
}
@media (max-width: 599px) {
.dn-cta::after { display: none; }
.dn-cta__actions .dn-btn { width: 100%; justify-content: center; }
.dn-cta__actions .dn-btn + .dn-btn { margin-top: 10px; }
}
/* ===========================================================================
ΑΡΧΕΙΟ ΚΑΤΗΓΟΡΙΑΣ ΩΣ ΚΑΤΑΛΟΓΟΣ
Σειρά Blocksy: meta → τίτλος → εικόνα → excerpt → συγγραφέας/ημερομηνία.
Για κατάλογο θέλουμε: εικόνα → κατηγορία → τίτλος → excerpt → «Περισσότερα».
=========================================================================== */
/* 1. Συγγραφέας και ημερομηνία δεν έχουν νόημα σε καταχώριση προϊόντος */
.entries [data-id="meta_2"] { display: none !important; }
/* 2. Εικόνα πρώτη */
.entries .entry-card { display: flex; flex-direction: column; }
.entries .entry-card > .ct-media-container { order: 1; margin-bottom: 16px; }
.entries .entry-card > [data-id="meta_1"] { order: 2; margin-bottom: 6px; }
.entries .entry-card > .entry-title { order: 3; margin-bottom: 10px; }
.entries .entry-card > .entry-excerpt { order: 4; }
/* 3. Μία ετικέτα κατηγορίας — η πιο ειδική. Το κόμμα είναι text node,
οπότε μηδενίζεται το font-size του γονέα και επαναφέρεται στον σύνδεσμο. */
.entries .meta-categories { font-size: 0; }
.entries .meta-categories a { display: none; }
.entries .meta-categories a:last-child {
display: inline; font-size: 12.5px; font-weight: 600;
letter-spacing: .07em; text-transform: uppercase;
color: var(--dn-orange); text-decoration: none;
}
.entries .meta-categories a:last-child:hover { text-decoration: underline; }
/* 4. Τίτλος προϊόντος */
.entries .entry-title { font-size: 18.5px; line-height: 1.3; }
.entries .entry-title a { text-decoration: none; }
/* 5. Excerpt σε σταθερό ύψος ώστε οι κάρτες να ευθυγραμμίζονται */
.entries .entry-excerpt p {
font-size: 15px; line-height: 1.6; margin: 0;
color: var(--theme-palette-color-3);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
/* 6. Κλήση σε δράση στο κάτω μέρος κάθε κάρτας */
.entries .entry-card > .entry-excerpt::after {
content: "Περισσότερα →";
display: block; margin-top: 14px;
font-size: 14.5px; font-weight: 600; color: var(--dn-orange);
}
/* 7. Η εικόνα του προϊόντος σε σταθερή αναλογία, χωρίς κόψιμο */
.entries .ct-media-container { background: #fff; border-radius: var(--dn-radius-sm); overflow: hidden; }
.entries .ct-media-container img {
aspect-ratio: 4/3 !important; width: 100%; height: auto;
object-fit: contain; padding: 10px;
}
/* 8. Κεφαλίδα αρχείου + πιο ευδιάκριτα breadcrumbs */
.hero-section .page-title .ct-title-label { display: none; }
.dn-crumbs { font-size: 14.5px; }
.dn-crumbs a { color: var(--theme-palette-color-3); }
.dn-crumbs a:hover { color: var(--dn-orange); }
.dn-crumbs [aria-current] { font-weight: 600; color: var(--theme-palette-color-1); }
/* ===========================================================================
CTA ΚΑΤΑΛΟΓΟΥ — ΦΩΤΕΙΝΟ
Το υποσέλιδο είναι ήδη σκούρο. Σκούρο CTA ακριβώς από πάνω διαβάζεται ως
ένα ενιαίο μαύρο σώμα και χάνεται η ιεραρχία. Εδώ κλείνουμε φωτεινά.
=========================================================================== */
.dn-cta--light {
background: var(--theme-palette-color-6, #F5F4F2);
color: var(--theme-palette-color-1);
border-top: 3px solid var(--dn-orange);
}
.dn-cta--light::after { display: none; } /* χωρίς το άδειο διακοσμητικό */
.dn-cta--light h2 { color: var(--theme-palette-color-1); }
.dn-cta--light p { color: var(--theme-palette-color-3); }
.dn-cta--light .dn-eyebrow--light { color: var(--dn-orange); }
.dn-cta--light .dn-ctagrid {
display: grid; grid-template-columns: 1.55fr 1fr;
gap: 48px; align-items: center;
max-width: none;
}
.dn-cta--light .dn-cta__inner { max-width: 620px; }
.dn-ctagrid__fig { margin: 0; line-height: 0; position: relative; }
.dn-ctagrid__fig img {
width: 100%; height: auto; display: block;
border-radius: var(--dn-radius);
background: #fff;
}
/* λεπτή πορτοκαλί γωνία αντί για κενό κύκλο */
.dn-ctagrid__fig::before {
content: ""; position: absolute; left: -14px; top: -14px;
width: 92px; height: 92px;
border-left: 3px solid var(--dn-orange);
border-top: 3px solid var(--dn-orange);
border-radius: 6px 0 0 0; opacity: .7;
}
/* το φωτεινό CTA χρειάζεται λευκό «ανάσασμα» πριν το σκούρο υποσέλιδο */
.dn-cta--light { padding-top: 72px; padding-bottom: 78px; }
/* σημείωμα καταλόγου, πριν το CTA */
.dn-catnote {
max-width: 760px; margin: 0 auto;
padding: 22px 26px;
background: #fff; border: 1px solid var(--theme-palette-color-5, #E6E7E9);
border-left: 3px solid var(--dn-orange);
border-radius: var(--dn-radius-sm);
}
.dn-catnote h3 { margin: 0 0 8px; font-size: 18px; }
.dn-catnote p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--theme-palette-color-3); }
@media (max-width: 899px) {
.dn-cta--light .dn-ctagrid { grid-template-columns: 1fr; gap: 30px; }
.dn-cta--light .dn-cta__inner { order: 1; max-width: none; }
.dn-ctagrid__fig { order: 2; max-width: 460px; }
.dn-ctagrid__fig::before { display: none; }
.dn-cta--light { padding-top: 48px; padding-bottom: 52px; }
}
@media (max-width: 599px) {
.dn-cta--light .dn-cta__actions .dn-btn { width: 100%; justify-content: center; }
.dn-cta--light .dn-cta__actions .dn-btn + .dn-btn { margin-top: 10px; }
}
/* το φωτεινό CTA δεν θέλει το outline-light κουμπί (είναι για σκούρο φόντο) */
.dn-cta--light .dn-btn--outline-light {
border-color: var(--theme-palette-color-5, #D9D9DC);
color: var(--theme-palette-color-1); background: #fff;
}
.dn-cta--light .dn-btn--outline-light:hover { border-color: var(--dn-orange); color: var(--dn-orange); }
/* Διόρθωση: το --theme-palette-color-1 είναι το ΠΟΡΤΟΚΑΛΙ (#C25410), όχι το
ανθρακί. Το φωτεινό CTA πρέπει να έχει ανθρακί επικεφαλίδα, αλλιώς ο τίτλος
βγαίνει πορτοκαλί και ανταγωνίζεται το κουμπί. */
.dn-cta--light h2 { color: var(--dn-charcoal) !important; }
.dn-cta--light p { color: var(--theme-palette-color-3); }
.dn-cta--light .dn-btn--outline-light { color: var(--dn-charcoal); }
.dn-catnote h3 { color: var(--dn-charcoal); }
/* ===========================================================================
ΤΕΣΣΕΡΙΣ ΤΟΜΕΙΣ — φωτογραφική ενότητα αρχικής
Οι φωτογραφίες προέρχονται από το αρχικό banner set. Εμφανίζονται σε 210px,
κάτω από την ανάλυση της πηγής, ώστε να μένουν ευκρινείς.
=========================================================================== */
.dn-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.dn-fourcard {
display: flex; flex-direction: column; align-items: flex-start;
text-decoration: none; height: 100%;
}
.dn-fourcard__fig {
margin: 0 0 20px; width: 100%; aspect-ratio: 1/1;
border-radius: var(--dn-radius); overflow: hidden;
position: relative; background: var(--theme-palette-color-6, #F6F3EF);
}
.dn-fourcard__fig img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s ease;
}
.dn-fourcard:hover .dn-fourcard__fig img { transform: scale(1.05); }
/* λεπτή πορτοκαλί βάση — δένει τη φωτογραφία με την ταυτότητα */
.dn-fourcard__fig::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
background: var(--dn-orange); transform: scaleX(0); transform-origin: left;
transition: transform .35s ease;
}
.dn-fourcard:hover .dn-fourcard__fig::after { transform: scaleX(1); }
.dn-fourcard__k {
font-size: 12.5px; font-weight: 600; letter-spacing: .09em;
text-transform: uppercase; color: var(--dn-orange); margin-bottom: 7px;
}
.dn-fourcard__t {
font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 20px;
line-height: 1.25; color: var(--dn-charcoal); margin-bottom: 9px;
}
.dn-fourcard__d {
font-size: 15.5px; line-height: 1.6; color: var(--theme-palette-color-3);
margin-bottom: 14px;
}
.dn-fourcard__m {
margin-top: auto; font-size: 14.5px; font-weight: 600; color: var(--dn-orange);
}
.dn-fourcard:hover .dn-fourcard__m { text-decoration: underline; }
@media (max-width: 999px) { .dn-four { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 559px) { .dn-four { grid-template-columns: 1fr; gap: 22px; }
.dn-fourcard__fig { aspect-ratio: 16/10; } }
@media (prefers-reduced-motion: reduce) {
.dn-fourcard__fig img, .dn-fourcard__fig::after { transition: none; }
.dn-fourcard:hover .dn-fourcard__fig img { transform: none; }
}
/* ===========================================================================
ΔΙΟΡΘΩΣΗ CTA ΣΕ ΟΛΕΣ ΤΙΣ ΣΕΛΙΔΕΣ
Το σκούρο CTA ακριβώς πάνω από το σκούρο υποσέλιδο διαβαζόταν ως ένα μαύρο
σώμα, και ο κενός κύκλος άφηνε το 40% άδειο ώστε να μοιάζει μισοτελειωμένο.
Όλα τα CTA γίνονται φωτεινά. Χωρίς εικόνα -> μία στήλη, κανένα κενό.
=========================================================================== */
.dn-cta {
background: var(--theme-palette-color-6, #F6F3EF) !important;
color: var(--dn-charcoal);
border-top: 3px solid var(--dn-orange);
padding-top: 66px; padding-bottom: 70px;
}
.dn-cta::after { display: none !important; } /* τέλος ο κενός κύκλος */
.dn-cta h2 { color: var(--dn-charcoal) !important; }
.dn-cta p { color: var(--theme-palette-color-3) !important; }
.dn-cta .dn-eyebrow--light { color: var(--dn-orange) !important; }
.dn-cta .dn-btn--outline-light {
border-color: var(--theme-palette-color-5, #D9D9DC) !important;
color: var(--dn-charcoal) !important; background: #fff !important;
}
.dn-cta .dn-btn--outline-light:hover {
border-color: var(--dn-orange) !important; color: var(--dn-orange) !important;
}
/* χωρίς εικόνα: το κείμενο κρατά αναγνώσιμο πλάτος, χωρίς άδεια δεξιά ζώνη */
.dn-cta > .dn-cta__inner { max-width: 760px; }
@media (max-width: 599px) {
.dn-cta { padding-top: 46px; padding-bottom: 50px; }
.dn-cta .dn-cta__actions .dn-btn { width: 100%; justify-content: center; }
.dn-cta .dn-cta__actions .dn-btn + .dn-btn { margin-top: 10px; }
}
/* ===========================================================================
EDITORIAL BANDS — τέσσερις θεματικές ζώνες
Πηγή: BANNER_DIAL-NET.png, 768×512 ανά panel, καθαρή φωτογραφία.
Η στήλη εικόνας δεν ξεπερνά τα 768px ώστε να μη γίνεται upscale σε 1×.
=========================================================================== */
.entry-content.is-layout-constrained > .dn-band,
.entry-content > .dn-band {
max-width: none; width: auto; margin-left: 0; margin-right: 0;
padding-left: max(20px, calc(50% - 620px));
padding-right: max(20px, calc(50% - 620px));
}
.dn-band { padding-top: 0; padding-bottom: 0; }
.dn-band__grid {
display: grid; grid-template-columns: 1fr 1fr;
align-items: center; gap: 56px;
min-height: 420px;
}
.dn-band__text { padding: 64px 0; max-width: 520px; }
.dn-band__fig { margin: 0; line-height: 0; position: relative; }
.dn-band__fig img {
width: 100%; height: auto; display: block;
border-radius: var(--dn-radius);
max-width: 768px; /* ποτέ πάνω από την πηγή */
}
/* εναλλαγή πλευρών */
.dn-band--reverse .dn-band__text { order: 2; }
.dn-band--reverse .dn-band__fig { order: 1; }
.dn-band h2 { margin: 0 0 14px; font-size: clamp(25px, 3.2vw, 36px); line-height: 1.2; }
.dn-band p { font-size: 17px; line-height: 1.72; margin: 0 0 22px; }
.dn-band .dn-eyebrow { margin-bottom: 10px; }
/* φωτεινές ζώνες */
.dn-band--light { background: #fff; }
.dn-band--tint { background: var(--theme-palette-color-6, #F6F3EF); }
/* σκοτεινή ζώνη — δίκτυα */
.dn-band--dark { background: var(--dn-charcoal); }
.dn-band--dark h2 { color: #fff; }
.dn-band--dark p { color: rgba(255,255,255,.82); }
.dn-band--dark .dn-eyebrow { color: var(--dn-orange); }
.dn-band--dark .dn-btn--ghost {
border-color: rgba(255,255,255,.34); color: #fff;
}
.dn-band--dark .dn-btn--ghost:hover { border-color: var(--dn-orange); color: var(--dn-orange); }
@media (max-width: 899px) {
.dn-band__grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
.dn-band__text { padding: 34px 0 44px; max-width: none; order: 2 !important; }
.dn-band__fig { order: 1 !important; margin: 0 calc(-1 * max(20px, calc(50% - 620px))); }
.dn-band__fig img { border-radius: 0; max-width: none; }
.dn-band h2 { font-size: clamp(23px, 6vw, 30px); }
}
@media (max-width: 599px) {
.dn-band .dn-btn { width: 100%; justify-content: center; }
.dn-band .dn-btn + .dn-btn { margin-top: 10px; }
}
/* Οι εικόνες είναι πλέον 1536×1024 — η στήλη μπορεί να μεγαλώσει με ασφάλεια */
.dn-band__fig img { max-width: none; }
.dn-band__grid { min-height: 460px; }
@media (min-width: 900px) { .dn-band__fig img { aspect-ratio: 3/2; object-fit: cover; } }
/* Τα κουμπιά των bands στοιχίζονται με το κείμενο, όχι στο κέντρο
(το .dn-final__actions είναι κεντραρισμένο για το τελικό CTA). */
.dn-band .dn-final__actions {
display: flex; flex-wrap: wrap; gap: 12px;
justify-content: flex-start; text-align: left; margin: 0;
}
@media (max-width: 599px) { .dn-band .dn-final__actions { flex-direction: column; } }
/* 6 επιλεγμένα προϊόντα: 3+3 αντί για 4+2, ώστε το πλέγμα να είναι ισορροπημένο */
@media (min-width: 1000px) {
.dn-grid--solutions { grid-template-columns: repeat(3, 1fr); }
}
/* ===========================================================================
HERO — ελεγχόμενο χρώμα μάρκας
Ήταν διάφανο πάνω σε #FAF8F5, δηλαδή τελείως επίπεδο. Προστίθεται ζεστή
βάση, διακριτική πορτοκαλί λάμψη πίσω από το οπτικό, και λεπτή γραμμή στη
βάση. Καμία συμπαγής πορτοκαλί επιφάνεια — η τυπογραφία μένει ανθρακί.
=========================================================================== */
.entry-content.is-layout-constrained > .dn-hero,
.entry-content > .dn-hero {
max-width: none; width: auto; margin-left: 0; margin-right: 0;
padding-left: max(20px, calc(50% - 620px));
padding-right: max(20px, calc(50% - 620px));
}
.dn-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding-top: 86px; padding-bottom: 96px;
background:
/* λάμψη μάρκας πίσω από το οπτικό, δεξιά */
radial-gradient(58% 78% at 76% 42%, rgba(238,115,38,.17) 0%, rgba(238,115,38,0) 70%),
/* πολύ αχνή δεύτερη λάμψη για ισορροπία, αριστερά-πάνω */
radial-gradient(42% 60% at 6% 8%, rgba(238,115,38,.07) 0%, rgba(238,115,38,0) 72%),
/* ζεστή βάση */
linear-gradient(168deg, #FDFBF8 0%, #F7F5F2 58%, #F3F0EB 100%);
}
/* λεπτή γραμμή μάρκας στη βάση — κλείνει το hero και το χωρίζει από το λευκό band */
.dn-hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: linear-gradient(90deg,
var(--dn-orange) 0%, var(--dn-orange) 26%,
rgba(238,115,38,.35) 52%, rgba(238,115,38,0) 88%);
}
/* διακριτικό γεωμετρικό στοιχείο, χαμηλής αντίθεσης */
.dn-hero::before {
content: ""; position: absolute; z-index: -1;
right: -140px; top: -120px; width: 520px; height: 520px;
border-radius: 50%;
border: 1.5px solid rgba(238,115,38,.18);
}
/* το οπτικό σηκώνεται από τη χρωματισμένη επιφάνεια */
.dn-hero__media--photo img {
border-radius: 14px;
box-shadow: 0 18px 46px rgba(42,39,36,.13), 0 2px 6px rgba(42,39,36,.06);
}
/* eyebrow με πορτοκαλί κουκκίδα */
.dn-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.dn-hero__eyebrow::before {
content: ""; width: 20px; height: 2px; background: var(--dn-orange); border-radius: 2px;
}
/* τα chips κατασκευαστών παίρνουν λευκή επιφάνεια για να ξεχωρίζουν */
.dn-hero__note span {
background: rgba(255,255,255,.72);
border: 1px solid rgba(42,39,36,.07);
border-radius: 999px;
padding: 6px 13px;
}
@media (max-width: 899px) {
.dn-hero { padding-top: 48px; padding-bottom: 56px; }
.dn-hero::before { right: -190px; top: -170px; width: 380px; height: 380px; }
.dn-hero {
background:
radial-gradient(70% 42% at 72% 76%, rgba(238,115,38,.15) 0%, rgba(238,115,38,0) 72%),
linear-gradient(168deg, #FDFBF8 0%, #F6F3EF 100%);
}
}
/* ══════════════════════════════════════════════════════════════════════
ΔΙΟΡΘΩΣΕΙΣ 2026-09-23
══════════════════════════════════════════════════════════════════════ */
/* ── 1. Τελικό CTA κάτω από πλέγμα: χρειάζεται αέρα ──
Το της αρχικής δεν βρίσκεται μέσα σε .dn-final,
άρα δεν έπαιρνε το margin του .dn-final p και κόλλαγε στο περιεχόμενο
από πάνω του (κάρτες προϊόντων / κείμενο). */
.dn-section > .dn-final__actions,
.dn-section__body > .dn-final__actions {
margin: 40px 0 0;
}
@media (max-width: 599px) {
.dn-section > .dn-final__actions,
.dn-section__body > .dn-final__actions { margin-top: 28px; }
}
/* ── 2. Hero στο κινητό: η εικόνα αποσύρεται ──
Στα 390px το μωσαϊκό έπεφτε στα 210px ύψους (max-height) μέσα σε πάνελ
350px πλάτους με χρώμα φόντου, αφήνοντας γκρι μπάρες αριστερά/δεξιά.
Σε αυτό το μέγεθος η εικόνα δεν διαβάζεται και δεν προσθέτει πληροφορία·
το κινητό οδηγεί κατευθείαν τίτλος → κείμενο → CTA. */
@media (max-width: 767px) {
.dn-hero__media { display: none; }
}
/* ── 3. Tablet 768–899px: η εικόνα μένει, αλλά χωρίς πάνελ και χωρίς
περικοπή ύψους, ώστε να μην σχηματίζονται μπάρες γύρω της. */
@media (min-width: 768px) and (max-width: 899px) {
.dn-hero__media,
.dn-hero__media--photo { background: transparent; padding: 0; }
.dn-hero__media--photo img {
max-height: none;
width: 100%;
max-width: 520px;
}
}
/* ── 4. Τα CTA των editorial bands είχαν margin:0 (για τη στοίχιση) και
κρατούσαν μόνο τα 22px του από πάνω
. Λίγο περισσότερος αέρας, χωρίς
να χαθεί η στοίχιση στα αριστερά. */
.dn-band .dn-final__actions { margin: 26px 0 0; }
/* ══════════════════════════════════════════════════════════════════════
ΕΤΙΚΕΤΕΣ (post_tag) — 2026-09-24
══════════════════════════════════════════════════════════════════════ */
/* Διακριτικός διαχωρισμός από τις προδιαγραφές που προηγούνται. */
.dn-tags {
margin: 44px 0 0;
padding-top: 26px;
border-top: 1px solid rgba(42, 39, 36, .10);
}
.dn-tags__label {
margin: 0 0 14px;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--theme-palette-color-3);
}
.dn-tags__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Δευτερεύουσα ενέργεια — ΟΧΙ σαν κύριο κουμπί. */
.dn-tag {
display: inline-block;
padding: 7px 13px;
border-radius: 999px;
font-size: 13.5px;
line-height: 1.35;
text-decoration: none;
color: var(--dn-charcoal);
background: var(--theme-palette-color-6);
border: 1px solid rgba(42, 39, 36, .09);
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dn-tag:hover {
background: rgba(238, 115, 38, .09);
border-color: rgba(238, 115, 38, .42);
color: var(--dn-orange);
}
/* Ορατή εστίαση για πλοήγηση με πληκτρολόγιο. */
.dn-tag:focus-visible {
outline: 2px solid var(--dn-orange);
outline-offset: 2px;
background: rgba(238, 115, 38, .09);
color: var(--dn-orange);
}
@media (max-width: 599px) {
.dn-tags { margin-top: 34px; padding-top: 22px; }
.dn-tag { font-size: 13px; padding: 6px 12px; }
}
/* Eyebrow στο αρχείο ετικέτας — το αρχείο αλλιώς είναι δυσδιάκριτο
από αρχείο κατηγορίας. */
.dn-tagheader__eyebrow {
margin: 0 0 6px;
}
/* ══════════════════════════════════════════════════════════════════════
ΛΟΓΟΤΥΠΟ — πλήρες lockup (2026-09-24)
══════════════════════════════════════════════════════════════════════
Το προηγούμενο αρχείο ήταν κομμένο: είχε μόνο τα ΠΑΝΩ γκρι τόξα και
κανένα tagline. Το πλήρες λογότυπο έχει και τα ΚΑΤΩ τόξα που κλείνουν
τον κύκλο, συν το tagline «ΤΗΛΕΠΙΚΟΙΝΩΝΙΕΣ-ΣΥΣΤΗΜΑΤΑ ΑΣΦΑΛΕΙΑΣ».
Αναλογία 803,7:521,7 = 1,541:1. Το tagline πιάνει 26 από τις 521,7
μονάδες ύψους, δηλαδή 4,98%.
Μετρημένο κατώφλι αναγνωσιμότητας: στα 64px το tagline βγαίνει 3,2px
και είναι θολό· στα 88px βγαίνει 4,4px και διαβάζεται. Στα 88px το
πλάτος είναι 136px — στενότερο από το προηγούμενο λογότυπο, οπότε η
κεφαλίδα ΔΕΝ πλαταίνει.
══════════════════════════════════════════════════════════════════════ */
.site-logo-container .default-logo,
.site-logo-container .sticky-logo {
height: 98px;
width: auto;
max-width: 166px;
}
@media (max-width: 999px) {
.site-logo-container .default-logo,
.site-logo-container .sticky-logo { height: 84px; max-width: 146px; }
}
/* Κινητό: κάτω από αυτό το μέγεθος το tagline γίνεται διακοσμητικό, όχι
αναγνώσιμο. Δεν υπάρχει ύψος που να το σώζει χωρίς να φάει την κεφαλίδα·
προτεραιότητα να μένει καθαρό το wordmark και τα τόξα. */
@media (max-width: 689px) {
.site-logo-container .default-logo,
.site-logo-container .sticky-logo { height: 68px; max-width: 116px; }
}
@media (max-width: 379px) {
.site-logo-container .default-logo,
.site-logo-container .sticky-logo { height: 62px; max-width: 104px; }
}
/* Υποσέλιδο: το ίδιο πλήρες λογότυπο, ανεστραμμένο για το σκούρο φόντο.
Εδώ υπάρχει χώρος, οπότε το tagline βγαίνει ~6,5px και διαβάζεται άνετα. */
.dn-foot-brand img {
width: 100%;
max-width: 230px;
height: auto;
margin-bottom: 16px;
}
@media (max-width: 689px) {
.dn-foot-brand img { max-width: 190px; }
}
/* Το .site-logo-container κρατά δικό του ύψος (50px από τις επιλογές της
Blocksy) ενώ η εικόνα είναι πολύ ψηλότερη — το λογότυπο ξεχείλιζε 15px
κάτω από την κεφαλίδα. Το δοχείο πρέπει να ακολουθεί την εικόνα. */
.site-logo-container {
height: auto;
display: inline-flex;
align-items: center;
}
.site-logo-container .default-logo,
.site-logo-container .sticky-logo { display: block; }
/* Η γραμμή της κεφαλίδας έχει min-height 70px από τη Blocksy — το μεγαλύτερο
λογότυπο δεν χωρούσε και ξεχείλιζε 8px πάνω/κάτω στα tablet. Ανεβαίνει
ώστε να μένει αέρας γύρω του. */
@media (max-width: 999px) {
}
@media (max-width: 689px) {
}
/* ══════════════════════════════════════════════════════════════════════
ΟΠΤΙΚΗ ΣΤΟΙΧΙΣΗ ΛΟΓΟΤΥΠΟΥ + ΥΨΟΣ ΓΡΑΜΜΗΣ
══════════════════════════════════════════════════════════════════════
Τα τόξα εκτείνονται πολύ πιο κάτω από τα γράμματα, οπότε το ΓΕΩΜΕΤΡΙΚΟ
κέντρο του SVG δεν είναι το ΟΠΤΙΚΟ κέντρο: η ζώνη των γραμμάτων έχει
κέντρο στο y=354 ενός καμβά 521,7 αντί για 259 — μετατόπιση 18,2%.
Μετρημένο πριν: το wordmark κάθεται 18px ΧΑΜΗΛΟΤΕΡΑ από το κέντρο του
μενού. Το ανεβάζουμε κατά 18,2% του ύψους ΚΑΙ ψηλώνουμε τη γραμμή, αλλιώς
η κορυφή του τόξου βγαίνει έξω από το viewport (μετρήθηκε: -5px στο
desktop, -19px στα 768).
⚠️ Το ύψος γραμμής ΔΕΝ αλλάζει με min-height: η Blocksy το ορίζει ως
μεταβλητή --height στο [data-header*="type-1"] .ct-header [data-row*="middle"].
Ακόμη κι ο ΙΔΙΟΣ selector δεν αρκεί: το dynamic CSS της Blocksy τυπώνεται
inline στο
ΜΕΤΑ το child stylesheet, οπότε κερδίζει στη σειρά.
Το !important στη custom property είναι ο μόνος αξιόπιστος τρόπος.
══════════════════════════════════════════════════════════════════════ */
.site-logo-container .default-logo,
.site-logo-container .sticky-logo {
position: relative;
top: -18px; /* 98px × 18,2% */
}
[data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 136px !important; }
@media (max-width: 999px) {
.site-logo-container .default-logo,
.site-logo-container .sticky-logo { top: -15px; } /* 84px × 18,2% */
[data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 116px !important; }
}
@media (max-width: 689px) {
.site-logo-container .default-logo,
.site-logo-container .sticky-logo { top: -12px; } /* 68px × 18,2% */
[data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 96px !important; }
}
@media (max-width: 379px) {
.site-logo-container .default-logo,
.site-logo-container .sticky-logo { top: -11px; } /* 62px × 18,2% */
[data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 88px !important; }
}
/* ══════════════════════════════════════════════════════════════════════
MEGA MENU — χωρητικότητα σε χαμηλά laptop (2026-09-24)
══════════════════════════════════════════════════════════════════════
Αναφορά χρήστη: σε laptop χαμηλής ανάλυσης «σπάει» το μενού και τα κάτω
στοιχεία (Rack, UPS) δεν εμφανίζονται για επιλογή.
Μετρήθηκε στα 1280×720: το dropdown τελείωνε στο y=742 με viewport 720 —
ολόκληρη η δεύτερη σειρά ήταν εκτός οθόνης, και επειδή είναι hover menu
δεν υπήρχε τρόπος να τη φτάσει ο χρήστης. Στα 1366×768 περίσσευαν μόλις
26px, που εξαφανίζονται με τη γραμμή σελιδοδεικτών.
Αιτία: πλέγμα 3×2 — σειρά 1 = 372px (την ορίζει η στήλη με 6 παιδιά),
σειρά 2 = 231px. Τα Racks και UPS δεν έχουν παιδιά αλλά έπιαναν κελί 231px.
Τρεις διορθώσεις:
1. 3 -> 4 στήλες: η σειρά 2 κρατά μόνο τα δύο μονά στοιχεία.
2. Πιο σφιχτά κενά μέσα στο mega menu.
3. Δίχτυ ασφαλείας: max-height δεμένο στο viewport + κύλιση, ώστε να μην
μπορεί ΠΟΤΕ να μείνει στοιχείο άπιαστο σε καμία ανάλυση.
══════════════════════════════════════════════════════════════════════ */
nav > ul > [class*="ct-mega-menu"] > .sub-menu {
--columns-padding: 15px 24px;
max-height: calc(100vh - 160px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* Πιο σφιχτά τα στοιχεία: 13px padding ανά σύνδεσμο × 6 παιδιά είναι το
μεγαλύτερο μέρος του ύψους της ψηλότερης στήλης. */
nav > ul > [class*="ct-mega-menu"] > .sub-menu .sub-menu > li > .ct-menu-link {
padding-top: 8px;
padding-bottom: 8px;
}
/* Διακριτική μπάρα κύλισης, μόνο αν χρειαστεί. */
nav > ul > [class*="ct-mega-menu"] > .sub-menu::-webkit-scrollbar { width: 8px; }
nav > ul > [class*="ct-mega-menu"] > .sub-menu::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.22); border-radius: 4px;
}
/* Σε κοντά παράθυρα το dropdown ξεκινά ψηλότερα, άρα έχει λίγο περισσότερο χώρο. */
@media (max-height: 760px) {
nav > ul > [class*="ct-mega-menu"] > .sub-menu {
--columns-padding: 12px 22px;
max-height: calc(100vh - 150px);
}
}
/* Πολύ κοντά παράθυρα (netbook, laptop με σελιδοδείκτες + taskbar):
στα 1024×600 έλειπαν 19px και ενεργοποιούνταν κύλιση για δύο μόνο
στοιχεία. Λίγο πιο σφιχτά και χωρούν όλα χωρίς κύλιση. */
@media (max-height: 660px) {
nav > ul > [class*="ct-mega-menu"] > .sub-menu {
--columns-padding: 10px 20px;
max-height: calc(100vh - 142px);
}
nav > ul > [class*="ct-mega-menu"] > .sub-menu .sub-menu > li > .ct-menu-link {
padding-top: 6px;
padding-bottom: 6px;
}
nav > ul > [class*="ct-mega-menu"] > .sub-menu > li [class*="children"]:not(:first-child) {
padding-top: 12px;
}
}