/* * MIND THE DEV — builder skin. * * WHY THIS FILE EXISTS (and why it is not "custom CSS per element"): * the design needs three things Elementor's FREE editor cannot express through its own controls — * variable-font axes (Commissioner's FLAR/VOLM), diagonal clip-path cuts, and decorative absolutes. * All three are Elementor PRO features (custom fonts, custom CSS per element). The way through, on * the free engine, is the "CSS Classes" field that free Elementor already puts on every container and * widget (includes/elements/container.php `css_classes`, includes/widgets/common-base.php * `_css_classes`): the operator types a class name, this stylesheet supplies the look. * * The consequence that matters for the owner: text, images, spacing, colours and layout stay NATIVE * Elementor controls, so the page keeps being editable and new elements dropped in inherit the site's * typography. Only the bespoke "skin" comes from here. * * Loaded on wp_head by Modules\EasyElements, so it applies to the public page AND the editor canvas. */ /* ---------------------------------------------------------------- fonts (SIL OFL, see public/fonts/mindthedev/OFL-*.txt) ⛔ `.greek-latin` είναι μέρος του ΟΝΟΜΑΤΟΣ: subsets, ADR 0211. Ίδιοι άξονες, ίδιο σχέδιο, λιγότερα από τα μισά bytes. Τα ίδια αρχεία δηλώνονται στο θέμα (`resources/css/themes/ mindthedev.css`) και στο `partials/tokens.blade.php` — τα τρία αλλάζουν ΜΑΖΙ, και το `tests/Feature/Theme/DeclaredFontFilesExistTest.php` το επιβάλλει. */ @font-face { font-family: "Commissioner"; src: url("/fonts/mindthedev/Commissioner-VF.greek-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Literata"; src: url("/fonts/mindthedev/Literata-VF.greek-latin.woff2") format("woff2-variations"); font-weight: 200 900; font-display: swap; } /* ⛔ Η ΠΡΟΕΠΙΛΟΓΗ ΤΗΣ ΜΗΧΑΝΗΣ ΓΙΑ ΚΕΙΜΕΝΟ ΕΙΝΑΙ #7A7A7A ΚΑΙ ΔΕΝ ΔΙΑΒΑΖΕΤΑΙ. Μετρήθηκε 3,58–3,90 πάνω στις ανοιχτές επιφάνειες του ιστότοπου, εκεί που το πρότυπο ζητά 4,5. Την κληρονομεί ΚΑΘΕ στοιχείο που δεν ονομάζει δικό του χρώμα — δηλαδή και το επόμενο που θα προστεθεί, σιωπηλά. Μπαίνει το γκρι του ίδιου του ιστότοπου, που είναι ΠΙΟ ΣΚΟΥΡΟ: η αντίθεση μόνο ανεβαίνει, ποτέ δεν πέφτει (5,29–5,77 στα τρία ανοιχτά φόντα), και στα σκούρα μπλοκ το χρώμα το ορίζει ούτως ή άλλως το `.mtd-on-ink`. ⛔ ΚΑΙ ΟΧΙ ΣΤΟ `:root` — ΤΟ ΔΟΚΙΜΑΣΑ ΚΑΙ ΔΕΝ ΕΚΑΝΕ ΤΙΠΟΤΑ. Η μηχανή ορίζει το ίδιο σύμβολο στο `.elementor-kit-1`, που κάθεται στο ``: για κάθε απόγονο κερδίζει εκείνο, όχι το `:root`. Ο μόνος τρόπος να το δεις είναι να μετρήσεις το χρώμα ΣΤΟ ΣΤΟΙΧΕΙΟ — το `:root` έδειχνε το νέο χρώμα και η σελίδα εξακολουθούσε να βάφει με το παλιό. ⚠️ Η μόνιμη θέση αυτού είναι η παλέτα του kit (Site Settings › Global Colors), ώστε να μπορεί να την αλλάξει ο ιδιοκτήτης από τον πίνακα. Εδώ μπαίνει σαν φραγμός, όχι σαν σχεδιαστική επιλογή. */ body[class*="elementor-kit-"] { --e-global-color-text: #5C6063; } /* ⛔ ΤΟ ΜΕΝΟΥ ΚΑΙ ΤΑ ΚΟΥΜΠΙΑ ΑΠΟΔΙΔΟΝΤΑΝ ΣΕ ROBOTO — ΣΕ ΚΑΘΕ ΣΕΛΙΔΑ. Το δέρμα βάζει την Commissioner στο `body` με χαμηλή προτεραιότητα, επίτηδες, ώστε ο ιδιοκτήτης να μπορεί να αλλάξει τύπο από τον επεξεργαστή. Η μηχανή όμως γράφει τη γραμματοσειρά **πάνω στο ίδιο το κουμπί** (`.elementor-button { font-family: var(--e-global-typography-accent-font-family) }`), που κερδίζει την κληρονομιά — και το σύμβολο δείχνει στην προεπιλογή «Roboto». Μετρήθηκε 2026-08-31 ρωτώντας τον browser ποια γραμματοσειρά αποδίδει ΣΤΟ ΣΤΟΙΧΕΙΟ. Η πρώτη διόρθωση κάλυψε μόνο το σύμβολο «τονισμού» (τα κουμπιά) — και η επαναμέτρηση έδειξε ότι το πρόβλημα ήταν τριπλάσιο: **είκοσι** στοιχεία, ανάμεσά τους **ΟΛΟΚΛΗΡΟ ΤΟ ΚΥΡΙΩΣ ΜΕΝΟΥ**. Γι' αυτό ρυθμίζονται εδώ και τα τέσσερα σύμβολα, όχι ένα. ⚠️ Δεν φαινόταν σε κανένα από τα screenshots της νύχτας: σε κεφαλαία οι δύο γραμματοσειρές μοιάζουν αρκετά ώστε το μάτι να προσπερνά. Διορθώνεται στο σύμβολο, όχι στο κουμπί: έτσι ισχύει και για ό,τι άλλο δείχνει στη γραμματοσειρά «τονισμού», και ο επεξεργαστής εξακολουθεί να μπορεί να την αλλάξει από τις ρυθμίσεις του kit. */ body[class*="elementor-kit-"] { --e-global-typography-primary-font-family: "Commissioner"; --e-global-typography-text-font-family: "Commissioner"; --e-global-typography-accent-font-family: "Commissioner"; /* Η σερίφ της μάρκας, στη θέση της Roboto Slab της μηχανής. */ --e-global-typography-secondary-font-family: "Literata"; } /* ---------------------------------------------------------------- brand tokens (from the design) */ :root { --mtd-ink: #17181A; --mtd-lime: #C7F04A; --mtd-paper: #F5F4F1; --mtd-canvas: #DCD9D3; --mtd-blue: #1F4A7A; --mtd-grey: #5C6063; --mtd-reading: #3E4245; --mtd-cream: #F2E8C9; --mtd-card: #F0EEEA; --mtd-rule: #C9C6BF; --mtd-olive: #3F5A12; --mtd-cut: 34px; /* diagonal cut depth; override per element with a modifier class */ } /* Base typography for builder-rendered pages. Low specificity on purpose: the kit's global fonts and any Theme Style setting still win, so the owner can change type from the editor. */ body { margin: 0; font-family: "Commissioner", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------------- display type (the variable axes) */ .mtd-display, .mtd-display .elementor-heading-title { font-family: "Commissioner", system-ui, sans-serif; font-variation-settings: "wght" 900, "FLAR" 62, "VOLM" 38; letter-spacing: -0.036em; line-height: 0.93; text-wrap: balance; /* ⛔ A LONG GREEK WORD MUST WRAP, NOT BE CUT. Measured at 390: «Δήλωση Προσβασιμότητας» ran 49px past its box and the tail of the word simply disappeared — no scrollbar, no ellipsis, nothing to tell the reader a word had been amputated, on the page whose subject is accessibility. Display type is set large by design, and Greek compounds are long; the two meet on every narrow screen. `hyphens` breaks it properly where the browser knows the language (the SEO layer stamps ``), and `overflow-wrap` is the floor: break somewhere rather than cut. Neither changes a single line where the words already fit. */ hyphens: auto; overflow-wrap: break-word; } .mtd-display-800, .mtd-display-800 .elementor-heading-title { font-variation-settings: "wght" 800, "FLAR" 62, "VOLM" 38; } .mtd-display-900, .mtd-display-900 .elementor-heading-title { font-variation-settings: "wght" 900, "FLAR" 62, "VOLM" 38; } .mtd-serif, .mtd-serif .elementor-heading-title { font-family: "Literata", Georgia, serif; } .mtd-strong { font-variation-settings: "wght" 800; } .mtd-medium { font-variation-settings: "wght" 500; } /* Eyebrow / label text: small, wide-tracked, heavy. */ .mtd-eyebrow, .mtd-eyebrow .elementor-heading-title { font-size: 0.94rem; letter-spacing: 0.09em; font-variation-settings: "wght" 800; text-transform: uppercase; } /* ---------------------------------------------------------------- the diagonal cuts */ .mtd-cut-b { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--mtd-cut))); } .mtd-cut-t { clip-path: polygon(0 0, 100% var(--mtd-cut), 100% 100%, 0 100%); } .mtd-cut-tb { clip-path: polygon(0 0, 100% var(--mtd-cut), 100% 100%, 0 calc(100% - var(--mtd-cut))); } .mtd-cut-sm { --mtd-cut: 22px; } /* A notched CORNER, not a sloped edge: the cut takes only the bottom-right corner off. */ .mtd-cut-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--mtd-cut)), calc(100% - var(--mtd-cut)) 100%, 0 100%); } .mtd-cut-lg { --mtd-cut: 56px; } /* ---------------------------------------------------------------- surfaces */ .mtd-on-ink { background: var(--mtd-ink); color: var(--mtd-paper); } .mtd-on-lime { background: var(--mtd-lime); color: var(--mtd-ink); } .mtd-on-paper { background: var(--mtd-paper); color: var(--mtd-ink); } .mtd-on-canvas { background: var(--mtd-canvas); color: var(--mtd-ink); } .mtd-on-ink :is(h1, h2, h3, h4, h5, h6, p, li, .elementor-heading-title) { color: inherit; } /* The menu button. Hidden on wide screens, where the five items sit in the bar as the design draws them; on a narrow screen it is the only thing left and the nav opens underneath it. ⛔ WHY A CHECKBOX AND NOT A SCRIPT. The skin ships no JavaScript at all, on purpose, and a menu that needs a script is a menu that vanishes when the script does. A checkbox with a label is operable by mouse, touch AND keyboard with nothing loaded. ⛔ AND WHY THE @supports GUARD IS NOT OPTIONAL. The open/closed state reaches the nav through `:has()`, because Elementor wraps every widget in a div of its own, so the input is not a sibling of the nav and `~` cannot see it. Where `:has()` is missing, hiding the nav would leave the visitor with a button that does nothing and no way to reach any page. So the nav is hidden ONLY where the selector that reopens it is known to work; everywhere else the site keeps the wrapped two-row menu it had — plainer than the design, and navigable, which matters more. */ /* «Παράλειψη στο περιεχόμενο» — WCAG 2.4.1 (επίπεδο Α). Αόρατος όσο δεν τον χρειάζεται κανείς, ορατός τη στιγμή που τον πιάνει το πληκτρολόγιο. ⛔ ΟΧΙ `display:none` και ΟΧΙ `visibility:hidden`: και τα δύο τον βγάζουν από τη σειρά του Tab, δηλαδή τον κάνουν ακριβώς τόσο άχρηστο όσο η απουσία του — απλώς με κώδικα από πάνω που δείχνει ότι κάποιος ασχολήθηκε. Μένει στη ροή, 1×1 και αποκομμένος, και ξαναγίνεται κανονικός σύνδεσμος στο :focus. Ο περιέκτης δεν πρέπει να τον κόβει, γι' αυτό δεν του δίνεται δικό του πλάτος. */ /* ⛔ ΕΚΤΟΣ ΡΟΗΣ, ΟΧΙ ΑΠΛΩΣ ΜΗΔΕΝΙΚΟΥ ΠΛΑΤΟΥΣ. Με `width:0` το περιτύλιγμα παρέμενε παιδί του flex και η κεφαλίδα του χρέωνε ολόκληρο το `gap` της: μετρήθηκε το λογότυπο να μετακινείται ~60px δεξιά σε κάθε σελίδα. Απόλυτη θέση σημαίνει ότι δεν συμμετέχει καθόλου στη διάταξη — ούτε κενό. (Το `display:contents` θα το έλυνε επίσης, αλλά είναι λάθος εργαλείο για χειριστήριο προσβασιμότητας: έχει ιστορικό να βγάζει στοιχεία από το δέντρο προσιτότητας.) */ .mtd-skipwrap.elementor-widget { position: absolute; width: 0; height: 0; margin: 0; padding: 0; } .mtd-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mtd-skip:focus { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; width: auto; height: auto; clip-path: none; z-index: 1000; padding: 12px 18px; background: var(--mtd-lime); color: var(--mtd-ink); font-weight: 800; letter-spacing: 0.07em; text-decoration: none; outline: 3px solid var(--mtd-ink); outline-offset: 2px; } .mtd-navtoggle { display: none; } .mtd-navtoggle__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mtd-navtoggle__button { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; color: var(--mtd-paper); font-size: 0.94rem; letter-spacing: 0.09em; font-variation-settings: "wght" 800; cursor: pointer; user-select: none; } .mtd-navtoggle__glyph { font-size: 1.35rem; line-height: 1; } /* The keyboard must be able to see where it is: the input is off-screen, so the ring goes on the label it controls. */ .mtd-navtoggle__input:focus-visible + .mtd-navtoggle__button { outline: 3px solid var(--mtd-lime); outline-offset: 2px; } @media (max-width: 767px) { /* Between the mark and the call-to-action, on the SAME row — the header above already orders its children, and a widget with no order of its own would sit in front of the logo. Measured: it did, and the bar came out three rows tall. */ .mtd-navtoggle { display: block; order: 2; width: auto; margin-inline-start: auto; } .mtd-actions { order: 3; margin-inline-start: 0; } @supports selector(:has(*)) { .mtd-header .mtd-nav { display: none; } .mtd-header:has(.mtd-navtoggle__input:checked) .mtd-nav { display: flex; order: 4; flex-basis: 100%; justify-content: flex-start; } } } /* A chip: the dark pill that sits above a hero heading. Elementor wraps every widget, so the pill has to be the INNER title element and the widget itself must stop stretching to full width. */ .mtd-chip { width: fit-content; } .mtd-chip .elementor-heading-title { display: inline-flex; align-items: center; gap: 9px; background: var(--mtd-ink); color: var(--mtd-lime); padding: 7px 14px; font-size: 0.94rem; letter-spacing: 0.09em; font-variation-settings: "wght" 800; /* ⛔ THE DESIGN DECLARES NO LINE-HEIGHT HERE, AND «NONE» IS NOT THE SAME AS «1». Elementor's own frontend stylesheet sets `line-height: 1` on every `.elementor-heading-title`, which made the pill 29px tall against the design's 33 — measured side by side at 1440. Four pixels, on the first element under the header, and the whole hero came out 17px short of the mockup. The same trap the theme hit from the other side (its docs record a body line-height of 1.5 pushing the page 28px LONGER); the lesson is identical — an undeclared line-height must stay undeclared. */ line-height: normal; } /* The oversized translucent numeral in the hero corner. Decorative only — generated content, so it is a background layer that never reaches a screen reader and never becomes text the owner can break. The year is fixed here rather than read from a data attribute: Elementor's panel has no field for a custom attribute, so an attr() version would be a look nobody could actually apply. */ .mtd-ghost { position: relative; overflow: hidden; } .mtd-ghost::after { content: "2008"; position: absolute; right: 2%; top: -0.18em; font-size: clamp(9rem, 22vw, 20rem); line-height: 0.72; font-variation-settings: "wght" 900, "FLAR" 100, "VOLM" 100; letter-spacing: -0.05em; opacity: 0.07; pointer-events: none; white-space: nowrap; } /* Hairline rule used between list rows in the design. */ .mtd-rule { border-top: 2px solid var(--mtd-rule); } .mtd-rule-ink { border-top: 2px solid var(--mtd-ink); } /* Client-logo strip: greyscale until hover, uniform optical height. */ .mtd-logos img { max-height: 46px; width: auto; filter: grayscale(1); opacity: 0.72; transition: opacity 140ms linear, filter 140ms linear; } .mtd-logos img:hover { filter: grayscale(0); opacity: 1; } /* Links inside builder content follow the brand. */ .mtd-body a { color: var(--mtd-blue); text-underline-offset: 3px; font-variation-settings: "wght" 600; } @media (prefers-reduced-motion: reduce) { .mtd-logos img { transition: none; } } /* ---------------------------------------------------------------- header / nav The nav items are text widgets in a flex row. Elementor gives each one a block wrapper, so without this they collide: the links need their own hit area (48px, per the design) and must not wrap mid-label. */ .mtd-navlink { width: fit-content; } .mtd-navlink p { margin: 0; } /* Both, because a menu item whose page is not published yet renders as a (no dead link) and must still occupy the same box — otherwise the menu visibly collapses as pages are added. */ .mtd-navlink a, .mtd-navlink span { display: flex; align-items: center; min-height: 48px; padding: 0 11px; color: var(--mtd-paper); text-decoration: none; white-space: nowrap; letter-spacing: 0.07em; font-variation-settings: "wght" 700; } .mtd-navlink a:hover { color: var(--mtd-lime); } .mtd-navlink span { cursor: default; } .mtd-cta { width: fit-content; } .mtd-logo img { display: block; height: 32px; width: auto; } /* The hero heading is measured in characters in the design (max-width:18ch), which keeps the line breaks where they were drawn regardless of viewport. */ .mtd-hero .mtd-display .elementor-heading-title { max-width: 18ch; } /* Measure (line length) is given in `ch` all through the design — 44ch, 46ch, 52ch, 62ch, 70ch — and it is what keeps the line breaks where they were drawn. It needs this much specificity because Elementor ships `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` (0,4,0), so a plain class rule silently loses and the paragraph runs the full width of the screen. It did: the home hero has been full-bleed since it was built, and four rounds of eyeballing did not catch it. */ /* ⛔ The cap goes on the TEXT, not on the widget. `ch` is resolved on the element the property is applied to, and the widget box sits at a different font size than the paragraph inside it — so capping the widget made 42ch come out 516px where the design draws 596px. Every measure on every page was ~13% too narrow, which is a different line break in every paragraph of the site. */ .elementor.elementor.elementor .e-con > .elementor-widget[class*="mtd-measure-"] :is(p, li, .elementor-heading-title) { max-width: var(--mtd-measure); } .mtd-measure-42 { --mtd-measure: 42ch; } .mtd-measure-44 { --mtd-measure: 44ch; } .mtd-measure-46 { --mtd-measure: 46ch; } .mtd-measure-52 { --mtd-measure: 52ch; } .mtd-measure-56 { --mtd-measure: 56ch; } .mtd-measure-62 { --mtd-measure: 62ch; } .mtd-measure-70 { --mtd-measure: 70ch; } /* Footer link columns. The design leaves these as plain anchors — underline included — so they read as links in a block of small print. Only the phone number opts out (see .mtd-tel). */ .mtd-footcol a { color: var(--mtd-paper); } .mtd-footcol a:hover { color: var(--mtd-lime); } /* Quote cards and project cards sit flush; images fill their card width. */ .mtd-quote img, .mtd-work img { display: block; width: 100%; height: auto; } .mtd-avatar img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; } /* ---------------------------------------------------------------- header row behaviour Elementor's container wrap control did not survive into the rendered CSS, so the row behaviour is pinned here. The header shows on EVERY page, so a break here is a break everywhere. Three bands, because the nav genuinely cannot fit at full size on a narrow laptop: ≥1100 one row at design size; 900–1099 one row, tightened (smaller logo, tighter padding/tracking — the same moves the design itself makes at its middle size); <900 two CLEAN rows (logo + call-to-action, then the nav) instead of a ragged three. Below 900 the design switches to a ΜΕΝΟΥ toggle; that needs a real widget with JS, so until it exists this is the honest fallback rather than a button that does nothing. */ @media (min-width: 1100px) { .mtd-header, .mtd-nav { flex-wrap: nowrap; } .mtd-nav { width: auto; flex: 1 1 auto; } .mtd-actions { width: auto; flex: 0 0 auto; } } @media (min-width: 900px) and (max-width: 1099.98px) { .mtd-header, .mtd-nav { flex-wrap: nowrap; } .mtd-nav { width: auto; flex: 1 1 auto; } .mtd-actions { width: auto; flex: 0 0 auto; } .mtd-header { padding-inline: 40px !important; } .mtd-logo img { height: 26px; } .mtd-navlink a, .mtd-navlink span { padding: 0 7px; letter-spacing: 0.03em; font-size: 0.86rem; } .mtd-cta .elementor-button { padding: 12px 14px !important; font-size: 0.86rem; } } @media (max-width: 899.98px) { /* Two clean rows: logo + call-to-action, then the nav across the full width. */ .mtd-header { flex-wrap: wrap; row-gap: 10px; padding-inline: 28px !important; } .mtd-logo { order: 1; } .mtd-actions { order: 2; width: auto; margin-inline-start: auto; } .mtd-nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .mtd-navlink a, .mtd-navlink span { padding: 0 14px 0 0; min-height: 40px; } } /* ---------------------------------------------------------------- Έργα (/erga) Everything here is a look the free editor has no control for: a decorative pseudo-element, the variable-font axes on the year, and a three-track grid whose first two tracks are fixed widths. Text, colours, spacing and images stay Elementor controls, so the page is still editable. */ /* The hero ghost numeral is per-page content; .mtd-ghost draws "2008", this overrides it. */ .mtd-ghost-18::after { content: "18"; } /* The registry row: year | mark | what it was. Fixed tracks at the design's desktop size, because a proportional grid lets a four-digit year and a wide logo push the description around. */ .mtd-workrow { display: grid; grid-template-columns: 150px 200px 1fr; gap: 32px; align-items: center; border-top: 1px solid #3A3E41; padding-block: 30px; } .mtd-workyear .elementor-heading-title { font-variation-settings: "wght" 200, "FLAR" 62, "VOLM" 38; font-variant-numeric: tabular-nums; } /* Left-aligned in its track, as drawn. Needs the widget class as well: Elementor centres every image widget through `.elementor-widget-image { text-align: center }`, which outranks a lone class. */ .mtd-workmark.elementor-widget-image { text-align: start; } .mtd-workmark img { margin-inline: 0; max-height: 48px; max-width: 170px; width: auto; height: auto; display: block; /* The marks are dark-on-transparent files; on the ink surface they need inverting to be visible. */ filter: invert(1) brightness(1.6) grayscale(1); } .mtd-caselink p { margin: 0; } .mtd-caselink a { color: var(--mtd-lime); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .mtd-caselink a:hover { text-decoration: underline; } @media (max-width: 1099.98px) { .mtd-workrow { grid-template-columns: 120px 1fr; gap: 14px 28px; align-items: start; padding-block: 26px; } /* The mark shares the first row with the year rather than claiming a track of its own. */ /* ⛔ …AND THE COPY MUST THEN BE TOLD TO SPAN. Three children, two tracks: the third one wrapped into the NEXT row's FIRST track — the 120px one meant for a year — and every client's description was squeezed into 120px and cut. Measured at 768: eighteen clipped blocks on «Έργα», overflowing by up to 107px, with no sideways scrollbar to give it away because the text was simply cut off. The comment above described the intent; nothing implemented it. */ .mtd-workrow > *:nth-child(3) { grid-column: 1 / -1; } /* Left-aligned in its track, as drawn. Needs the widget class as well: Elementor centres every image widget through `.elementor-widget-image { text-align: center }`, which outranks a lone class. */ .mtd-workmark.elementor-widget-image { text-align: start; } .mtd-workmark img { margin-inline: 0; max-height: 40px; max-width: 150px; } } @media (max-width: 599.98px) { .mtd-workrow { grid-template-columns: 1fr; gap: 10px; padding-block: 22px; } /* Left-aligned in its track, as drawn. Needs the widget class as well: Elementor centres every image widget through `.elementor-widget-image { text-align: center }`, which outranks a lone class. */ .mtd-workmark.elementor-widget-image { text-align: start; } .mtd-workmark img { margin-inline: 0; max-height: 34px; max-width: 130px; } } /* Decorations. Both are pointer-events:none pseudo-elements so nothing in the editor can grab them. */ .mtd-skew-square { position: relative; overflow: hidden; } /* `left: auto` is not decoration: Elementor's container already owns ::before (the background-overlay layer) and sets inset:0 on it. With left:0 still in force the box is over-constrained, the browser drops `right`, and the square lands on the WRONG SIDE — which is exactly what it did. */ .mtd-skew-square::before { content: ""; position: absolute; left: auto; bottom: auto; right: -110px; top: -80px; width: 340px; height: 340px; background: var(--mtd-blue); transform: rotate(24deg); opacity: 0.45; pointer-events: none; } .mtd-ring { position: relative; overflow: hidden; } .mtd-ring::before { content: ""; position: absolute; left: auto; bottom: auto; right: -90px; top: -90px; width: 280px; height: 280px; border: 3px solid var(--mtd-ink); border-radius: 50%; opacity: 0.16; pointer-events: none; } .mtd-skew-square > *, .mtd-ring > * { position: relative; } @media (max-width: 1099.98px) { .mtd-skew-square::before { right: -70px; top: -50px; width: 230px; height: 230px; } .mtd-ring::before { right: -60px; top: -60px; width: 190px; height: 190px; } } @media (max-width: 599.98px) { .mtd-skew-square::before { right: -46px; top: -30px; width: 150px; height: 150px; } .mtd-ring::before { right: -40px; top: -40px; width: 130px; height: 130px; } } /* ---------------------------------------------------------------- copy rhythm Every paragraph in the design carries margin:0 and the spacing comes from the layout gaps around it. Elementor keeps the browser default 1em top+bottom, which quietly added ~36px to every text widget — enough to make each registry row half again as tall as it was drawn. Outer margins go; the space BETWEEN paragraphs of a multi-paragraph block stays, because there it is the spacing. */ .elementor-widget-text-editor p:first-child { margin-top: 0; } .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------- footer The footer is on every screen, so its measurements are load-bearing: 44px hit areas on every link (the design draws them that way, and it is also the accessible minimum), the hairline above the small print, and the one oversized element — the phone number, which is the point of the block. */ .mtd-footlinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mtd-footlinks li { margin: 0; } .mtd-footlinks :is(a, span) { display: inline-flex; align-items: center; min-height: 44px; color: var(--mtd-paper); } /* Underlined, as drawn: in the design these are plain anchors and keep the browser's underline. Only the item with no page yet drops it, because it is not a link. */ .mtd-footlinks span { text-decoration: none; } .mtd-footlinks a:hover { color: var(--mtd-lime); } .mtd-footlinks span { color: var(--mtd-paper); cursor: default; } .mtd-tel p, .mtd-footlink p { margin: 0; } .mtd-tel a, .mtd-footlink a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mtd-paper); } /* The size lives here rather than in the widget's typography control because Elementor's generated per-element CSS did not come out for the second office: two phone widgets with identical settings rendered at different sizes. Same root cause as the grid container above — seeder-written elements cannot rely on that stylesheet being emitted. */ .mtd-tel a { font-size: 1.75rem; font-variation-settings: "wght" 800; text-decoration: none; } .mtd-footlink a { font-size: 1.125rem; } .mtd-tel a:hover, .mtd-footlink a:hover { color: var(--mtd-lime); } /* The logo sits at the start of the footer, not centred (same Elementor default as above). */ .mtd-footer > .elementor-widget-image.elementor-widget-image { text-align: start; } .mtd-footer > .elementor-widget-image img { margin-inline: 0; } /* The last two lines share a row in the design and only stack when there is no room. */ .mtd-footsign p { margin: 0; } .mtd-footsign { display: flex; flex-wrap: wrap; gap: 8px 24px; } .mtd-footrule { border-top: 1px solid #3A3E41; } .mtd-reach .elementor-heading-title { letter-spacing: 0.11em; } /* The platform's own address is not settled yet, so its name is set as text, not as a link. */ .mtd-osonupo { color: var(--mtd-lime); font-variation-settings: "wght" 700; } /* ---------------------------------------------------------------- column sets Elementor's own grid container is driven by a CSS variable (`display: var(--display)`) that its generated per-element stylesheet is supposed to set. It does not do so reliably for containers a seeder writes: two containers with IDENTICAL settings in the same document came out one grid and one flex, and its grid also defaults to TWO rows, which silently wrapped three columns into six cells. These classes state the design's column sets outright. The container stays a real, editable Elementor container; only how many columns it shows comes from here. */ .mtd-cols-2, .mtd-cols-3 { display: grid; } .mtd-cols-2 { grid-template-columns: repeat(2, 1fr); } .mtd-cols-3 { grid-template-columns: repeat(3, 1fr); } /* Columns start at the top. Without this a grid cell stretches and Elementor's container centres its own content inside it, so a short column pushed its label 76px down the page. */ .mtd-cols-3 { align-items: start; } .mtd-cols-3 > .e-con { justify-content: flex-start; } @media (max-width: 1099.98px) { .mtd-cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599.98px) { .mtd-cols-2, .mtd-cols-3 { grid-template-columns: 1fr; } } /* The closing panel pairs a short heading with a paragraph + button; the design centres them against each other rather than aligning their tops. */ .mtd-close.mtd-cols-2 { align-items: center; } /* The design puts 76px between the office block and the small print, while the footer's own rhythm between its parts is 42px — so the rule carries the difference. */ .mtd-footrule { margin-top: 34px; } /* Hit areas, as drawn: the menu's call-to-action is 48px tall and a primary button 58px. They are stated as min-heights rather than padding so a longer label never shrinks the target. */ .mtd-cta .elementor-button { min-height: 48px; } .mtd-btn .elementor-button { min-height: 58px; } /* ---------------------------------------------------------------- the brand type must WIN ⛔ On a site whose kit still holds the engine's factory defaults, the design came out in ROBOTO. The engine emits `.elementor-widget-heading .elementor-heading-title { font-family: var(--e-global- typography-primary-font-family) }` per document — same specificity as the plain class rules above, but loaded AFTER this file, so it won on order alone. Anding in the widget class puts the brand font ahead of the kit default without touching the kit, which the owner may want to set later. This is the same shape of bug as the blank page (ADR 0136): invisible on a machine whose kit was once edited, wrong on every freshly provisioned site. */ .elementor-widget.mtd-display .elementor-heading-title, .elementor-widget.mtd-display-800 .elementor-heading-title, .elementor-widget.mtd-eyebrow .elementor-heading-title, .elementor-widget.mtd-chip .elementor-heading-title, .elementor-widget.mtd-workyear .elementor-heading-title, .elementor-widget.mtd-reach .elementor-heading-title { font-family: "Commissioner", system-ui, sans-serif; } .elementor-widget.mtd-serif .elementor-heading-title, .mtd-quote .elementor-widget.mtd-serif p { font-family: "Literata", Georgia, serif; } /* Body copy too, and for the same reason as the headings above — the kit's Roboto was winning on cascade order. Scoped to the design's own surfaces (never to every builder page on the install): a customer's site keeps whatever font its kit says, which is the point of the kit. */ .mtd-on-ink .elementor-widget-text-editor p, .mtd-on-lime .elementor-widget-text-editor p, .mtd-on-paper .elementor-widget-text-editor p, .mtd-on-canvas .elementor-widget-text-editor p, .mtd-body .elementor-widget-text-editor p, .mtd-on-ink .elementor-widget-text-editor li, .mtd-on-lime .elementor-widget-text-editor li, .mtd-on-paper .elementor-widget-text-editor li, .mtd-on-canvas .elementor-widget-text-editor li, .mtd-body .elementor-widget-text-editor li { font-family: "Commissioner", system-ui, sans-serif; } /* …except where the design asks for the serif. */ .mtd-quote .mtd-serif p, .mtd-serif .elementor-widget-text-editor p, .elementor-widget.mtd-serif p { font-family: "Literata", Georgia, serif; } /* ---------------------------------------------------------------- Υποστήριξη (/ypostirixi) */ /* The hero's ghost mark is an infinity sign here — the page is about what "unlimited" really costs. */ .mtd-ghost-infinity::after { content: "∞"; font-size: clamp(9rem, 24vw, 22rem); font-variation-settings: "wght" 200, "FLAR" 100, "VOLM" 100; letter-spacing: -0.04em; opacity: 0.08; line-height: 0.7; top: -0.1em; } /* The design's asymmetric split: the argument gets the wider half. */ .mtd-split { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: start; } .mtd-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; } @media (max-width: 1099.98px) { .mtd-split { grid-template-columns: 1fr; } .mtd-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599.98px) { .mtd-cols-4 { grid-template-columns: 1fr; } } /* The pricing cards carry a shallower cut than a full-width band. */ .mtd-cut-26 { --mtd-cut: 26px; } .mtd-tiers { align-items: stretch; } .mtd-tier { height: 100%; } .mtd-tierprice .elementor-heading-title { font-variation-settings: "wght" 300; font-variant-numeric: tabular-nums; } .mtd-tierclaim .elementor-heading-title { font-style: italic; font-variation-settings: "wght" 800; } /* The hours table: hairlines made of the grid gap, exactly as the design builds it. */ .mtd-pricetable { display: grid; grid-template-columns: 1fr auto; gap: 1px; background: var(--mtd-rule); border: 1px solid var(--mtd-rule); font-variant-numeric: tabular-nums; } .mtd-pricerow { display: contents; } .mtd-pricerow > span:first-child { background: #F0EEEA; padding: 11px 12px; font-size: 1.125rem; } .mtd-pricerow > span:last-child { background: #F0EEEA; padding: 11px 14px; font-size: 1.125rem; text-align: right; font-variation-settings: "wght" 800; } .mtd-pricetable-w p { margin: 0; } /* Measures this page asks for. */ .mtd-measure-16 { --mtd-measure: 16ch; } .mtd-measure-19 { --mtd-measure: 19ch; } .mtd-measure-22 { --mtd-measure: 22ch; } .mtd-measure-24 { --mtd-measure: 24ch; } .mtd-measure-26 { --mtd-measure: 26ch; } .mtd-measure-40 { --mtd-measure: 40ch; } .mtd-measure-50 { --mtd-measure: 50ch; } /* A button is a box with its label centred in it — Elementor leaves the text at the top once a min-height is imposed, which reads as a typo rather than a button. */ .mtd-btn .elementor-button, .mtd-cta .elementor-button { display: inline-flex; align-items: center; justify-content: center; } /* The pledge on the diagnostic section is set off by a rule, not by a box. */ .mtd-quoterule p { border-inline-start: 3px solid var(--mtd-ink); padding-inline-start: 16px; margin: 0; } .mtd-measure-34 { --mtd-measure: 34ch; } /* The six always-done items are ONE table with hairline rules, not six separate cards: the design makes the gap itself the line, so the cells must keep their own background to sit on top of it. */ .mtd-caregrid { background: #3A3E41; border: 1px solid #3A3E41; } .mtd-carecell { min-height: 92px; } .mtd-measure-68 { --mtd-measure: 68ch; } /* A bordered box, not a filled card: the design keeps the paper showing through. */ .mtd-boxed { border: 2px solid var(--mtd-ink); } /* The four things that DO count as a critical incident, each on its own ink bar. */ .mtd-critical p { margin: 0; background: var(--mtd-ink); color: var(--mtd-lime); padding: 11px 14px; } .mtd-measure-18 { --mtd-measure: 18ch; } /* Stacked rules on ink, separated by a hairline the gap itself draws. */ .mtd-rulestack { background: #3A3E41; gap: 2px; } .mtd-answergrid { background: rgba(245, 244, 241, 0.28); } .mtd-fixgrid { background: var(--mtd-rule); border: 1px solid var(--mtd-rule); } /* The oversized ordinal on each of the four questions — decorative weight, tabular figures. */ .mtd-qcard { border-top: 3px solid var(--mtd-ink); } .mtd-qnumber .elementor-heading-title { font-variation-settings: "wght" 200, "FLAR" 62, "VOLM" 38; font-variant-numeric: tabular-nums; } /* ⛔ ΙΔΙΑ ΠΑΓΙΔΑ ΜΕ ΤΟ «ΠΡΟΣΧΕΔΙΟ»: το Elementor βάζει `min-width: 0` στα widgets ενός container, και ο αριθμός της ερώτησης —ένα κουτί 20px για 24px ψηφίων— έβγαινε κομμένος. Μετρημένο στα 1024: δώδεκα στοιχεία, 4px το καθένα, δηλαδή ΚΑΘΕ αριθμός και των έξι ερωτήσεων. Χρειάζεται και την κλάση του widget για να νικήσει. */ .mtd-qnumber.elementor-widget { min-width: fit-content; } .mtd-measure-30 { --mtd-measure: 30ch; } .mtd-measure-32 { --mtd-measure: 32ch; } .mtd-measure-48 { --mtd-measure: 48ch; } /* ⛔ Cells that carry their own background MUST stretch to the row height. The column sets default to `align-items: start` (a short column should not stretch its content), but in these grids the background IS the design: a cell that stops early leaves a gap in what should read as one table. */ .mtd-answergrid > *, .mtd-caregrid > *, .mtd-fixgrid > *, .mtd-rulestack > * { align-self: stretch; } /* ---------------------------------------------------------------- Κατασκευή ιστοσελίδας */ .mtd-ghost-500::after { content: "500"; } .mtd-pkg { border-top: 3px solid var(--mtd-ink); } .mtd-pkgprice .elementor-heading-title { font-variation-settings: "wght" 300, "FLAR" 62, "VOLM" 38; font-variant-numeric: tabular-nums; } /* An outlined button, filling in on hover — the design's secondary action. */ .mtd-ghostbtn .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 2px solid var(--mtd-ink); background: transparent; } .mtd-ghostbtn .elementor-button:hover { background: var(--mtd-ink); color: var(--mtd-paper); } /* The comparison table. Scrolls inside its own box on a narrow screen — the page never scrolls sideways, which is one of the design's stated acceptance widths. ⛔ THAT SENTENCE WAS NOT TRUE UNTIL 2026-08-31, AND THE WRAPPER ALONE NEVER MADE IT TRUE. Measured on «Κατασκευή eshop» at a 375px layout viewport: `documentElement.scrollWidth` was 650 against a clientWidth of 375 — the page really did drag sideways by 275px — while every one of the seven tables was correctly inside a `.mtd-tablewrap` that was itself only 255px wide with `overflow-x: auto`. The wrapper scrolls its own content, but the overflow still reached the document through the Elementor widget box around it, which establishes no containment of its own. Proved by elimination: hiding the wrappers dropped the document to 375; `min-width: 0` and `max-width: 100%` on the widget changed nothing; `overflow-x` on the widget dropped it to 375. `clip`, not `hidden`: `hidden` would compute `overflow-y` to `auto` on the same box (a visible axis next to a non-visible one becomes auto), quietly turning every comparison section into a vertical scroll container. `clip` leaves the other axis alone. */ .mtd-rule-hair { border-top: 1px solid var(--mtd-rule); } .mtd-tablewrap { overflow-x: auto; } .mtd-cmpwrap { overflow-x: clip; } .mtd-cmp { min-width: 640px; width: 100%; border-collapse: collapse; font-size: 1rem; } .mtd-cmp thead th { text-align: center; padding: 0 10px 12px; border-bottom: 2px solid var(--mtd-ink); font-size: 0.94rem; letter-spacing: 0.05em; font-variation-settings: "wght" 800; white-space: nowrap; } .mtd-cmp thead th:first-child { text-align: start; padding-inline-start: 0; letter-spacing: 0.07em; } .mtd-cmp tbody th { text-align: start; padding: 13px 10px 13px 0; border-bottom: 1px solid #E2DFD9; font-variation-settings: "wght" 600; } .mtd-cmp tbody td { text-align: center; padding: 13px 10px; border-bottom: 1px solid #E2DFD9; } .mtd-cmp .mtd-no { color: var(--mtd-grey); } .mtd-cmpwrap p { margin: 0; } .mtd-cmpwrap h3 { font-size: 1.35rem; line-height: 1.1; margin: 34px 0 12px; font-variation-settings: "wght" 900, "FLAR" 62, "VOLM" 38; } /* The disclosure is the browser's own — keyboard-operable and printable without a line of script. */ .mtd-more > summary { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px; border: 2px solid var(--mtd-ink); font-size: 1.125rem; font-variation-settings: "wght" 800; cursor: pointer; list-style: none; margin-top: 22px; } .mtd-more > summary::-webkit-details-marker { display: none; } .mtd-more > summary::before { content: "+"; font-size: 1.5rem; line-height: 1; } .mtd-more[open] > summary::before { content: "−"; } .mtd-more > summary:hover { background: var(--mtd-ink); color: var(--mtd-paper); } /* Visually hidden, still read aloud: a bare "—" tells a screen reader nothing. */ .mtd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mtd-measure-76 { --mtd-measure: 76ch; } /* The mirror of the top cut: this one rises to the right, so the Custom Made panel reads as a different plane from the table above it rather than a continuation. */ .mtd-cut-tl { clip-path: polygon(0 var(--mtd-cut), 100% 0, 100% 100%, 0 100%); } /* The blue surface — used once, for the price objection. */ .mtd-on-blue { background: var(--mtd-blue); color: var(--mtd-paper); } .mtd-on-blue :is(h1, h2, h3, h4, p, li, .elementor-heading-title) { color: inherit; } .mtd-on-blue .elementor-widget-text-editor p { font-family: "Commissioner", system-ui, sans-serif; } /* A lime rule instead of an ink one, for the same job on a dark surface. */ .mtd-quoterule-lime p { border-inline-start: 3px solid var(--mtd-lime); padding-inline-start: 18px; margin: 0; } .mtd-ghostbtn-lime .elementor-button { border-color: var(--mtd-lime); } .mtd-ghostbtn-lime .elementor-button:hover { background: var(--mtd-lime); color: var(--mtd-ink); } /* The exclusions read as one stack with hairlines, not four bullets. */ .mtd-exclstack { background: var(--mtd-canvas); } .mtd-exclrow p { margin: 0; background: var(--mtd-paper); padding: 12px 14px; } /* Two proofs: the mark sits in a light box, then the year and the client on one baseline. */ .mtd-proofmark.elementor-widget-image { text-align: start; } .mtd-proofmark img { height: 170px; width: 100%; max-width: none; object-fit: contain; background: #F0EEEA; padding: 26px; box-sizing: border-box; margin-inline: 0; } .mtd-proofline p { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .mtd-proofyear { font-size: 2rem; line-height: 0.9; font-variation-settings: "wght" 200, "FLAR" 62, "VOLM" 38; letter-spacing: -0.03em; color: var(--mtd-blue); font-variant-numeric: tabular-nums; } .mtd-proofname { font-size: 1.35rem; line-height: 1.15; font-variation-settings: "wght" 800, "FLAR" 62, "VOLM" 38; } /* The brief panel: a lime ring on blue, and links that stay legible on it. */ .mtd-ring-lime { position: relative; overflow: hidden; } .mtd-ring-lime::before { content: ""; position: absolute; left: auto; bottom: auto; right: -90px; top: -90px; width: 280px; height: 280px; border: 3px solid var(--mtd-lime); border-radius: 50%; opacity: 0.2; pointer-events: none; } .mtd-ring-lime > * { position: relative; } .mtd-body-light a { color: var(--mtd-paper); } .mtd-body-light a:hover { color: var(--mtd-lime); } .mtd-rule-light { border-top: 1px solid rgba(245, 244, 241, 0.3); } .mtd-measure-38 { --mtd-measure: 38ch; } @media (max-width: 1099.98px) { .mtd-ring-lime::before { right: -60px; top: -60px; width: 190px; height: 190px; } } /* ---------------------------------------------------------------- the form, on the design's terms Scoped to the MTD surfaces on purpose: the Forms module ships its own look for everyone else, and a customer's form must not inherit this site's brand. Here the design asks for light labels on the blue panel and a lime submit that reads as the primary action. */ .mtd-on-blue .fp-label { color: #BFD3E8; font-size: 0.94rem; } /* ⛔ ΤΟ ΑΣΤΕΡΑΚΙ «ΥΠΟΧΡΕΩΤΙΚΟ» ΔΕΝ ΔΙΑΒΑΖΟΤΑΝ ΠΑΝΩ ΣΤΑ ΑΝΟΙΧΤΑ ΦΟΝΤΑ. Το κόκκινο της πλατφόρμας (#EF4444) μετρήθηκε 31/08 σε **3,42** πάνω στο χαρτί — το πρότυπο ζητά 4,5 — και είναι το ΜΟΝΟ σημάδι για το ποια πεδία είναι υποχρεωτικά. Βρέθηκε σε πέντε σελίδες, σε τελικό έλεγχο παλινδρόμησης· δεν είναι δικό μας χρώμα, ζει στο κοινό CSS των φορμών. Διορθώνεται ΕΔΩ και όχι εκεί, γιατί αφορά τα δικά μας φόντα: το `#B91C1C` περνά και στις τρεις ανοιχτές επιφάνειες (4,59 / 5,58 / 5,88) και παραμένει καθαρά κόκκινο. Στα μπλε μπλοκ ισχύει ο επόμενος κανόνας, που ήταν ήδη σωστός. ⛔ ΚΑΙ ΟΧΙ ΣΚΕΤΟ `.fp-required { color: … }` — ΤΟ ΔΟΚΙΜΑΣΑ ΚΑΙ ΔΕΝ ΕΚΑΝΕ ΤΙΠΟΤΑ. Η φόρμα φορτώνει το δικό της φύλλο στυλ **μαζί με το μπλοκ της**, δηλαδή ΜΕΤΑ το δέρμα· με ίδια ειδικότητα κερδίζει το τελευταίο. Ρυθμίζεται το ΣΥΜΒΟΛΟ σε ειδικότητα που κερδίζει το `:root` — ίδιο μοτίβο με το χρώμα κειμένου της μηχανής, και ίδιο μάθημα: η δήλωση επαληθεύεται ΣΤΟ ΣΤΟΙΧΕΙΟ, όχι στο αρχείο. */ body[class*="elementor-kit-"] { --fp-color-error: #B91C1C; } .mtd-on-blue .fp-required { color: var(--mtd-lime); } .mtd-on-blue .fp-input { width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid rgba(245, 244, 241, 0.35); background: rgba(245, 244, 241, 0.06); color: var(--mtd-paper); font: inherit; font-size: 1.125rem; border-radius: 0; box-sizing: border-box; } .mtd-on-blue .fp-textarea { min-height: 140px; } .mtd-on-blue .fp-input:focus { outline: 3px solid var(--mtd-lime); outline-offset: 2px; } .mtd-on-blue .fp-input::placeholder { color: rgba(245, 244, 241, 0.55); } .mtd-on-blue select.fp-input option { color: var(--mtd-ink); } .mtd-on-blue :is(button[type="submit"], .fp-submit, input[type="submit"]) { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 32px; border: 0; border-radius: 0; background: var(--mtd-lime); color: var(--mtd-ink); font: inherit; font-size: 1.35rem; font-variation-settings: "wght" 800; cursor: pointer; } .mtd-on-blue :is(button[type="submit"], .fp-submit):hover { background: var(--mtd-paper); } .mtd-ghost-1000::after { content: "1000"; } /* The same stack of items, on ink instead of paper. */ .mtd-exclstack-ink { background: #3A3E41; } .mtd-exclrow-ink p { margin: 0; background: var(--mtd-ink); padding: 12px 14px; } /* ---------------------------------------------------------------- Ανακατασκευή */ .mtd-ghost-question::after { content: "?"; } .mtd-qcard-ink { border-top-color: #3A3E41; } .mtd-keeprow { border-top: 1px solid var(--mtd-rule); } .mtd-ghost-arrow::after { content: "→"; } .mtd-proofmark-tall img { height: 320px; } .mtd-ghost-aa::after { content: "AA"; } .mtd-price-extra { font-size: 1.75rem; font-variation-settings: "wght" 300; color: var(--mtd-blue); font-variant-numeric: tabular-nums; } /* A flowing list of short labels: they wrap like text, not like a table. */ .mtd-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .mtd-chips > span { background: #3A3E41; padding: 8px 12px; } .mtd-chipwrap p { margin: 0; } /* A numbered line: the ordinal sits beside the text, so four of them stay compact. */ .mtd-numline { margin: 0; display: flex; align-items: baseline; gap: 14px; } .mtd-num { font-size: 2rem; line-height: 0.9; font-variation-settings: "wght" 200, "FLAR" 62, "VOLM" 38; letter-spacing: -0.03em; color: var(--mtd-rule); font-variant-numeric: tabular-nums; flex: none; } /* ---------------------------------------------------------------- Συχνές ερωτήσεις */ .mtd-ghost-seven::after { content: "7"; } /* The question keeps the narrower column; the answer gets the room, as the design draws it. */ .mtd-faqcols { display: grid; grid-template-columns: 0.75fr 1fr; align-items: start; } .mtd-faqrow + .mtd-faqrow { border-top: 1px solid var(--mtd-rule); } .mtd-faqanswer p { margin: 0 0 12px; } /* The design keeps the trailing space under the last answer paragraph; Elementor's text-editor reset strips it at (0,2,1), so the class is doubled to outrank it rather than shout !important. */ .mtd-faqanswer.mtd-faqanswer p:last-child { margin-bottom: 12px; } .mtd-faq-lead { font-size: 1.35rem; line-height: 1.35; color: var(--mtd-blue); font-variation-settings: "wght" 800; } .mtd-faqanswer .mtd-strong { font-size: 1.25rem; color: var(--mtd-blue); font-variation-settings: "wght" 800; } .mtd-faq-li { display: flex; gap: 10px; } .mtd-faq-li > span { color: var(--mtd-blue); font-variation-settings: "wght" 900; } .mtd-faq-link a { color: var(--mtd-blue); font-variation-settings: "wght" 600; } /* The structured data is data, not layout — it must never occupy space. */ .mtd-jsonld { display: none !important; } @media (max-width: 899.98px) { .mtd-faqcols { grid-template-columns: 1fr; } } /* -------------------------------------------------------- WooCommerce ή PrestaShop */ .mtd-ghost-i::after { content: "ή"; } /* The four cases are paper cards with a cut corner and an outlined diamond in the corner — the diamond is a pseudo-element so nothing in the editor can select or move it. */ .mtd-fitcard { position: relative; overflow: hidden; } .mtd-fitcard::after { content: ""; position: absolute; left: auto; bottom: auto; right: -26px; top: -26px; width: 78px; height: 78px; border: 3px solid var(--mtd-lime); transform: rotate(45deg); pointer-events: none; } .mtd-fitrow { display: flex; gap: 16px; align-items: flex-start; margin: 0; } /* The design sets these four in the oblique cut of the variable face. */ .mtd-fitcard p { font-variation-settings: "wght" 600, "slnt" -8; } .mtd-tri { flex: 0 0 auto; width: 26px; height: 26px; background: var(--mtd-ink); clip-path: polygon(0 0, 100% 0, 0 100%); margin-top: 5px; } /* The verdict cell of a comparison row: darker and heavier, so the winner is visible without having to read both sides. */ .mtd-cmp td.mtd-wins, .mtd-cmp-prose .mtd-cmp tbody td.mtd-wins { color: var(--mtd-ink); font-variation-settings: "wght" 800; } .mtd-cmp caption { text-align: start; font-size: 1rem; line-height: 1.5; color: var(--mtd-grey); padding-bottom: 14px; max-width: 60ch; } /* A prose comparison, not a grid of ticks: the cells carry sentences, so they read from the start of the line and get the design's roomier rhythm. Kept as a modifier — the ✓/— tables on the package pages are centred on purpose and must not change. */ .mtd-cmp-prose .mtd-cmp thead th { text-align: start; letter-spacing: 0.06em; } .mtd-cmp-prose .mtd-cmp thead th:last-child { padding-inline-end: 0; } .mtd-cmp-prose .mtd-cmp tbody th { padding: 16px 14px 16px 0; line-height: 1.5; font-variation-settings: "wght" 700; } .mtd-cmp-prose .mtd-cmp tbody td { text-align: start; padding: 16px 14px; line-height: 1.5; color: var(--mtd-reading); font-variation-settings: "wght" 400; } .mtd-cmp-prose .mtd-cmp tbody td:last-child { padding-inline-end: 0; } .mtd-measure-60 { --mtd-measure: 60ch; } .mtd-measure-64 { --mtd-measure: 64ch; } /* The design sets the closing thought off with a rule down its side, not a box. */ .mtd-quoterule-stack { border-inline-start: 3px solid var(--mtd-ink); padding-inline-start: 20px; } /* The design leaves 18px between these paragraphs, not the page's usual 12. */ .mtd-gap-18 p { margin-block-end: 18px; } .mtd-gap-18.mtd-gap-18 p:last-child { margin-block-end: 0; } /* The "when it is not" list runs flush to the column edge — the hairline is the whole frame. */ .mtd-exclrow-flush p { padding: 14px 0; } /* On ink and on blue the design links in lime, not in paper — the link has to win against the text. */ .mtd-link-lime a { color: var(--mtd-lime); font-variation-settings: "wght" 600; } /* `text-wrap: balance` belongs to the hero headline only. Section headings in the design fill the measure and break where they run out — balancing them moves the break and changes the shape. */ .mtd-fill, .mtd-fill .elementor-heading-title { text-wrap: wrap; } /* ------------------------------------------------- Ποιος γράφει τον κώδικα */ .mtd-ghost-1999::after { content: "1999"; font-size: clamp(8rem, 19vw, 17rem); right: -18px; top: -34px; } /* Text left, portrait right at its drawn width — not two equal halves. */ .mtd-portraitcols { display: grid; grid-template-columns: 1fr 320px; } .mtd-portrait img { width: 320px; max-width: 100%; height: auto; object-fit: cover; display: block; } .mtd-portrait { justify-self: end; } /* The chip and the headline carry the design's own spacing, which is wider than the column gap. */ .mtd-chipgap { margin-block-end: 18px; } .mtd-h1gap { margin-block-end: 16px; } .mtd-measure-14 { --mtd-measure: 14ch; } /* Two dates lifted out of the sentence — the page's only claim to a track record. */ .mtd-hi { color: var(--mtd-lime); font-variation-settings: "wght" 800; } .mtd-hi-paper { color: var(--mtd-paper); font-variation-settings: "wght" 800; } .mtd-quoterule-lime-stack { border-inline-start: 3px solid var(--mtd-lime); padding-inline-start: 22px; } /* The ink band bites into the lime hero above it, as the design draws the join. */ .mtd-pullup { margin-block-start: -58px; } .mtd-rule-bottom { border-bottom: 1px solid var(--mtd-rule); } .mtd-proofyear-big .elementor-heading-title { font-variant-numeric: tabular-nums; } .mtd-proofmark-tall img { max-height: 60px; max-width: 150px; width: auto; height: auto; } @media (max-width: 899.98px) { .mtd-portraitcols { grid-template-columns: 1fr; } .mtd-portrait { justify-self: start; } } /* ------------------------------------------------------------- Νομικές σελίδες */ /* The band that says «this is a draft». It is load-bearing: without it the page reads as a published policy, which is the one thing an unfinished policy must never do. */ .mtd-draft { border-top: 3px solid var(--mtd-ink); border-bottom: 3px solid var(--mtd-ink); } /* ⛔ `min-width` AS WELL, NOT ONLY `width`. Measured at 768 on the legal pages: the chip's box came out 86px against 117px of text and «ΠΡΟΣΧΕΔΙΟ» was cut — `fit-content` sizes a box to its content but does not stop a flex/grid parent from shrinking it below that. One word, on the three pages whose whole point is to say they are not final yet. */ .mtd-draftchip { width: fit-content; } /* The widget class as well, exactly like .mtd-workmark above: Elementor sets `min-width: 0` on the widgets inside a container, and a lone class loses to it — measured, the computed min-width stayed 0px and the chip stayed 86px against 117px of text. */ .mtd-draftchip.elementor-widget { min-width: fit-content; } /* 64ch in the design's own face; in pixels so the note stays on one line here too. */ .mtd-draftnote p { max-width: 781px; margin: 0; } .mtd-draftchip .elementor-heading-title { display: inline-flex; background: var(--mtd-ink); color: var(--mtd-cream); padding: 6px 11px; } /* Legal copy is one column at a readable measure, not the page width. The design says 76ch, which in ITS font is 793.5px of text — copied in pixels, because `ch` is not portable between faces. Box = 794 of text + the 60px padding on each side; left-aligned, as the design draws it. */ /* The SECTION stays full width — it carries the page's paper background and a short section would leave a dark band beside it. Only the CONTENT is capped, at the design's 794px of text (76ch in its own face), and it starts at the left padding rather than centring. */ .mtd-legalcol > .e-con, .mtd-legalcol > .elementor-widget { max-width: 794px; margin-inline-end: auto; } .mtd-legalparas p { margin: 0 0 14px; } .mtd-legalparas.mtd-legalparas p:last-child { margin-bottom: 0; } /* Each gap the owner still has to close gets its own box, so it cannot be skimmed past. */ .mtd-fillp { background: var(--mtd-cream); padding: 14px 16px; border-inline-start: 3px solid var(--mtd-ink); font-variation-settings: "wght" 600; } .mtd-legallist, .mtd-legalcontacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mtd-legallist { gap: 1px; background: var(--mtd-rule); } .mtd-legallist li { background: var(--mtd-paper); padding: 13px 0; } /* ⛔ AN EMAIL ADDRESS IS ONE UNBREAKABLE WORD. Measured at 375: «info@mindthedev.com» at 24px ran 11px past its column and the tail was cut — on the accessibility page's own contact block, which is the one place a visitor goes when something else on the site has already failed them. `anywhere` rather than `break-word`: the address has no spaces at all, so there is no other break to prefer. */ .mtd-legalcontacts { gap: 2px; overflow-wrap: anywhere; } /* Each way to reach us is a 48px touch target at 24px — this is the accessibility page's own contact block, so the target size is part of what it is claiming. */ .mtd-legalcontacts a { min-height: 48px; display: inline-flex; align-items: center; font-size: 1.5rem; font-variation-settings: "wght" 800; font-variant-numeric: tabular-nums; color: var(--mtd-ink); text-decoration: none; } .mtd-legalcontacts a:hover { color: var(--mtd-blue); } .mtd-cookietable { width: 100%; border-collapse: collapse; border: 2px solid var(--mtd-ink); } .mtd-cookietable thead th { background: var(--mtd-ink); color: var(--mtd-paper); text-align: start; padding: 12px 14px; font-size: 0.94rem; letter-spacing: 0.07em; font-variation-settings: "wght" 800; } .mtd-cookietable tbody td { padding: 12px 14px; border-top: 1px solid var(--mtd-ink); font-size: 1.0625rem; } .mtd-legalupdated p { border-top: 2px solid var(--mtd-ink); padding-top: 20px; margin: 0; } /* ------------------------------------------------------------- Σελίδες έργου */ /* The ghost year is the case's own year, so it comes from the page's data, not from a class per client: Elementor's panel has no field for a custom attribute, so the year is set as text in a hidden element the pseudo-element cannot read. The four-digit shape is what matters visually. */ .mtd-ghost-year::after { content: ""; } .mtd-casehero .mtd-caseyear { display: none; } .mtd-backlink { margin: 0; } .mtd-backlink a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mtd-ink); text-decoration: none; } .mtd-backlink a:hover { color: var(--mtd-blue); } .mtd-casemark img { width: auto; height: auto; display: block; } .mtd-casemark-square img { max-height: 132px; max-width: 132px; } .mtd-casemark-wide img { max-height: 60px; max-width: 260px; } .mtd-chip-lg .elementor-heading-title { padding: 9px 16px; font-variant-numeric: tabular-nums; } /* The numbered parts: ordinal beside the line, on its baseline, blue and tabular. */ .mtd-partrow { display: flex; gap: 14px; align-items: baseline; margin: 0; } .mtd-partnum { flex: 0 0 auto; font-size: 1.125rem; color: var(--mtd-blue); font-variation-settings: "wght" 900; font-variant-numeric: tabular-nums; } .mtd-selfstart { align-self: start; } /* Portrait column at the design's fixed width, quote taking the rest. */ .mtd-voicecols { display: grid; grid-template-columns: 250px 1fr; } .mtd-casepic img { width: 140px; height: 140px; object-fit: cover; object-position: center top; display: block; background: var(--mtd-card); } /* ⚠️ No stock portrait and no empty column: an open task, drawn as one. */ .mtd-picpending { width: 140px; height: 140px; margin: 0; background: #EDEAE4; border: 2px dashed #A8A49C; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; } /* Το γκρι του ιστότοπου, όχι πιο ανοιχτό: το #8A8781 μετρήθηκε 2,98 πάνω στην κάρτα «εκκρεμεί». */ .mtd-picpending-note { font-size: 0.875rem; color: var(--mtd-grey); font-variation-settings: "wght" 400; } .mtd-personrole { color: var(--mtd-grey); font-size: 0.94rem; } .mtd-casequote blockquote { margin: 0; } @media (max-width: 899.98px) { .mtd-voicecols { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------- osonupo */ .mtd-ghost-eight::after { content: "€8"; font-size: clamp(8rem, 19vw, 17rem); right: -20px; top: -38px; } .mtd-measure-17 { --mtd-measure: 17ch; } .mtd-measure-28 { --mtd-measure: 28ch; } .mtd-measure-36 { --mtd-measure: 36ch; } /* The price and its period sit on one baseline; the figure is thin and tabular. */ .mtd-priceline { display: flex; align-items: baseline; gap: 8px; margin: 0; } .mtd-priceamount { font-size: 4rem; line-height: 0.9; font-variation-settings: "wght" 200, "FLAR" 62, "VOLM" 38; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .mtd-priceper { font-size: 1.125rem; color: #9A9D9F; } /* Rent-or-buy: each side set off by its own rule, in its own colour. */ .mtd-siderule-lime { border-inline-start: 3px solid var(--mtd-lime); padding-inline-start: 20px; } .mtd-siderule-paper { border-inline-start: 3px solid var(--mtd-paper); padding-inline-start: 20px; } .mtd-arrowlink { margin: 0; } .mtd-arrowlink a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mtd-blue); font-variation-settings: "wght" 600; }