:root { /* Φωτεινή, σύγχρονη «botanical» παλέτα — κανένα σχεδόν-μαύρο, το βαθύτερο τόνο τον κρατάει ένα ζωντανό κυπαρισσί (--green-dark) αντί για ανθρακί. */ --paper: #FCFDFA; --paper-2: #F2F6EF; --paper-3: #E6EDE2; --mint: #E9F5E1; --ink: #14241C; --ink-soft: #4C5C53; --ink-mute: #86958C; --green: #2E7D4F; --green-deep: #1C5B39; --green-dark: #143A2B; --lime: #A6D63C; --copper: #B0702E; --sage-line: #DEE8D8; /* Roboto Slab: ίσιες, τετράγωνες πατούρες, μηδέν καλλιγραφία — και τα ελληνικά είναι σχεδιασμένα μαζί με τα λατινικά, οπότε ένας τίτλος με τα δύο ανακατεμένα δεν «σπάει». Καμία πλάγια γραφή στην οικογένεια: ο τονισμός γίνεται με βάρος και χρώμα. */ --serif: 'Roboto Slab', Georgia, 'Times New Roman', serif; --sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --wrap: 1200px; --hh: 88px; --gut: clamp(24px, 6vw, 80px); --radius: 20px; --radius-sm: 10px; /* Δεμένα στις μεταβλητές, όχι σε hardcoded rgba — αλλιώς ξεμένουν στην παλιά παλέτα κάθε φορά που αλλάζει το χρώμα (π.χ. η κάψουλα του header έβγαινε ελαφρώς άλλο άσπρο από τη σελίδα). */ /* Το «τζάμι» της κάψουλας και της μπάρας καλλιεργειών: χαρτί με μια ανάσα μέντα, ώστε πάνω από τη φωτογραφία να διαβάζεται σαν χρώμα της μάρκας και όχι σαν ουδέτερο άσπρο θόλωμα. Ένα var, για να μη ξεφύγουν τα δύο μεταξύ τους. */ --glass: color-mix(in srgb, var(--mint) 34%, var(--paper)); --shadow-soft: 0 12px 32px -12px color-mix(in srgb, var(--ink) 6%, transparent); --shadow-float: 0 20px 48px -16px color-mix(in srgb, var(--ink) 10%, transparent); /* Πιο γρήγορο easing effect για άμεση ανταπόκριση */ --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; } ::selection { background: var(--lime); color: var(--ink); } /* ---------- Typography ---------- */ h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -0.022em; text-wrap: balance; } .wrap { width: min(100% - calc(var(--gut) * 2), var(--wrap)); margin-inline: auto; } .lead { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ink-soft); line-height: 1.5; max-width: 56ch; } .section { padding: clamp(96px, 14vw, 180px) 0; position: relative; z-index: 10; } .section-head { max-width: 720px; margin-bottom: clamp(48px, 8vw, 80px); } .section-title { font-size: clamp(2.5rem, 5.2vw, 4.1rem); letter-spacing: -0.028em; } /* Ο τονισμός μέσα σε τίτλο: χρώμα + βάρος. Χωρίς πλάγια, τα ελληνικά italic βγάζουν καλλιγραφικό τόνο που δεν ταιριάζει στο brand. */ h1 .it, h2 .it, h3 .it { color: var(--green); font-weight: 700; } /* ---------- Reveal Animations ---------- */ /* Κρύβουμε ΜΟΝΟ αν έχει τρέξει JS (.js μπαίνει inline στο ). Αλλιώς, αν το app.js αργήσει ή σκάσει στο δίκτυο, ολόκληρη η σελίδα έμενε στο opacity:0 — ο χρήστης το βλέπει σαν "δεν φόρτωσε τίποτα". Fails open. */ .js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease), transform 1s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.1s; } .reveal.d2 { transition-delay: 0.2s; } .reveal.d3 { transition-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } } /* ============================================================ HEADER ============================================================ */ /* Σύνδεσμος παράκαμψης (WCAG 2.4.1 «Bypass Blocks»). Είναι το πρώτο εστιάσιμο στοιχείο κάθε σελίδας και μένει εντελώς αόρατος μέχρι να πάρει εστίαση από πληκτρολόγιο — οπότε κατεβαίνει από πάνω σαν κανονικό κουμπί. ΔΕΝ κρύβεται με display:none ούτε visibility:hidden: και τα δύο το βγάζουν από τη σειρά εστίασης και ο σύνδεσμος γίνεται άχρηστος γι' αυτόν ακριβώς που τον χρειάζεται. */ .skip-link { position: fixed; top: 0; left: 50%; z-index: 100; transform: translate(-50%, -120%); padding: 12px 24px; border-radius: 0 0 14px 14px; background: var(--green); color: var(--paper); font-family: var(--sans); font-size: 0.92rem; font-weight: 500; box-shadow: var(--shadow-soft); transition: transform 0.25s var(--ease); } .skip-link:focus-visible { transform: translate(-50%, 0); outline: 2px solid var(--lime); outline-offset: -4px; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } .site-header { position: sticky; top: 0; z-index: 60; height: var(--hh); display: flex; align-items: center; padding-inline: var(--gut); transition: transform 0.4s var(--ease), background 0.25s var(--ease); } /* Στις οθόνες με το μενού-χάμπουργκερ η κάψουλα αποσύρεται όσο κατεβαίνεις και επιστρέφει μόλις ανέβεις ή φτάσεις πάνω πάνω: σε κινητό το ύψος της οθόνης είναι το πιο ακριβό πράγμα. Με ανοιχτό μενού μένει πάντα ορατή, αλλιώς θα έφευγε μαζί της και το κουμπί που το κλείνει. */ @media (max-width: 1024px) { .site-header.header-away { transform: translateY(calc(-100% - 10px)); } .menu-open .site-header.header-away { transform: none; } } /* Η τελική θέση μένει ίδια, φεύγει μόνο η κίνηση — όπως παντού στο site. */ @media (prefers-reduced-motion: reduce) { .site-header { transition: background 0.25s var(--ease); } } .nav { width: min(100%, var(--wrap)); margin-inline: auto; height: 68px; display: flex; align-items: center; gap: 32px; padding: 0 12px 0 24px; background: color-mix(in srgb, var(--glass) 84%, transparent); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); border: 1px solid color-mix(in srgb, var(--sage-line) 75%, transparent); border-radius: 100px; transition: background 0.2s, box-shadow 0.2s, border-color 0.2s; } .site-header.scrolled .nav { background: color-mix(in srgb, var(--glass) 96%, transparent); box-shadow: var(--shadow-soft); border-color: var(--sage-line); } .brand { display: flex; align-items: center; gap: 14px; flex: none; } .brand-logo { height: 62px; width: auto; display: block; } @media (max-width: 420px) { .brand-logo { height: 48px; } } .nav-links { display: flex; gap: 32px; margin-inline: auto; } .nav-links a { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-soft); position: relative; padding: 10px 0; transition: color 0.2s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } .nav-cta { font-size: 0.9rem; font-weight: 500; color: #fff; letter-spacing: 0.02em; background: var(--green); padding: 14px 28px; border-radius: 100px; transition: background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .nav-cta:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: var(--shadow-soft); } /* ---------- Burger ---------- */ .nav-toggle { display: none; margin-left: auto; padding: 12px; } .burger { display: block; width: 24px; height: 16px; position: relative; } .burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s linear; } .burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 7px; } .burger i:nth-child(3) { top: 14px; } .nav-toggle[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; transform: scaleX(.2); } .nav-toggle[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .burger i { transition: none; } } .mobile-backdrop { display: none; position: fixed; inset: 0; z-index: 54; background: color-mix(in srgb, var(--green-dark) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .mobile-backdrop.open { display: block; animation: fadeIn .25s var(--ease); } @keyframes fadeIn { from { opacity: 0; } } .menu-open { overflow: hidden; } /* Με ανοιχτό μενού, header και panel γίνονται μία ενιαία λευκή επιφάνεια: η κάψουλα χάνει περίγραμμα και σκιά, και το χαρτί συνεχίζει αδιάκοπα στο panel από κάτω. */ .menu-open .site-header { background: var(--paper); } .menu-open .site-header .nav { background: var(--paper); border-color: transparent; box-shadow: none; } /* Η ανοιχτή κατάσταση ΔΕΝ εξαρτάται από transition. Πριν, το panel καθόταν μόνιμα σε translateY(-102%) και το έφερνε μέσα το transition — αν αυτό δεν ξεκινούσε (συμβαίνει όταν αλλάζει visibility/display στο ίδιο frame), το menu έμενε εκτός οθόνης και ο χρήστης έβλεπε μόνο το backdrop. Τώρα η ανοιχτή θέση είναι η φυσική θέση του στοιχείου και το keyframe κάνει μόνο την είσοδο: αν δεν παίξει, το menu είναι απλώς εκεί. Το display:none το κρύβει και από πληκτρολόγιο/screen readers. */ .mobile-menu { display: none; position: fixed; inset: var(--hh) 0 auto 0; z-index: 55; background: var(--paper); border-radius: 0 0 var(--radius) var(--radius); padding: 4px var(--gut) calc(26px + env(safe-area-inset-bottom)); max-height: calc(100dvh - var(--hh)); overflow-y: auto; overscroll-behavior: contain; } .mobile-menu.open { display: block; box-shadow: var(--shadow-float); animation: menuIn .35s var(--ease); } @keyframes menuIn { from { transform: translateY(-102%); } } @media (prefers-reduced-motion: reduce) { .mobile-menu.open, .mobile-backdrop.open { animation: none; } } .mm-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--paper-3); transition: color 0.2s; } .mm-link::after { content: ""; width: 7px; height: 7px; flex: none; border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute); transform: rotate(-45deg); transition: transform .2s var(--ease), border-color .2s; } .mm-link:hover, .mm-link[aria-current] { color: var(--green); } .mm-link:hover::after { border-color: var(--green); transform: rotate(-45deg) translate(2px, 2px); } .mm-contact { margin-top: 22px; display: grid; gap: 10px; } .mm-cta { width: 100%; justify-content: center; margin-top: 6px; } /* Στο desktop δεν υπάρχουν καθόλου — ούτε καν κρυμμένα. Πρέπει να ταιριάζει με το breakpoint του burger (1024) και με το matchMedia του app.js. */ @media (min-width: 1025px) { .mobile-menu, .mobile-backdrop { display: none; } } /* ============================================================ HERO ============================================================ */ .hero-wrap { position: relative; overflow: hidden; min-height: 100dvh; margin-top: calc(var(--hh) * -1); padding-top: var(--hh); display: flex; flex-direction: column; background: transparent; } /* Το βίντεο ΔΕΝ είναι καρφωμένο (σε αντίθεση με το .leafband πιο κάτω, που είναι επίτηδες ακίνητο): κυλά μαζί με τη σελίδα, αλλά πιο αργά. Είναι absolute μέσα στο .hero-wrap (overflow: hidden), με 124% ύψος και -12% top ώστε να έχει περιθώριο να μετακινηθεί χωρίς να ξεμυτίσει άκρη. Το overlay παίρνει ΤΗΝ ΙΔΙΑ κίνηση, αλλιώς το άσπρο πέπλο ξεκολλά από το κάδρο και χαλά η αναγνωσιμότητα. */ .hero-video, .hero-overlay { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; } .hero-video { object-fit: cover; z-index: -2; /* Το still είναι background και όχι poster="" ώστε να μπορεί να αλλάξει με media query — σε κινητό (που δεν παίζει καθόλου βίντεο) φορτώνει το μικρό. */ background: url('assets/field.jpg') center / cover no-repeat; } .hero-overlay { z-index: -1; background: linear-gradient(110deg, color-mix(in srgb, var(--paper) 88%, transparent) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 45%, color-mix(in srgb, var(--paper) 6%, transparent) 100%); } /* Η μετατόπιση γίνεται από το ίδιο το scroll (scroll-driven animation), χωρίς JS και χωρίς listener: τρέχει στον compositor, οπότε δεν κουνάει το κυρίως νήμα. Όπου δεν υποστηρίζεται (παλιοί browsers) το βίντεο απλώς κυλά κανονικά μαζί με το hero — δηλαδή fail-open, ποτέ κολλημένο. */ @keyframes heroDrift { from { transform: translateY(0); } to { transform: translateY(12%); } } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .hero-video, .hero-overlay { animation: heroDrift linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; } } } .hero { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding: clamp(48px, 8vh, 96px) 0; } .hero-inner { max-width: 840px; } .hero-tag { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 32px; display: flex; align-items: center; gap: 20px; } .hero-tag::before { content: ""; width: 48px; height: 1px; background: var(--green); } /* Η Roboto Slab είναι πιο πλατιά και πιο «βαριά» οπτικά από τη Literata στο ίδιο μέγεθος: το ταβάνι του clamp κατεβαίνει άλλο ένα σκαλί, αλλιώς ο τίτλος τρώει ολόκληρο το hero σε laptop. */ .hero h1 { font-size: clamp(2.7rem, 5.9vw, 5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; } .hero h1 .it { color: var(--green); font-weight: 700; } .hero h1 .leaf-accent { color: var(--green-deep); font-weight: 700; } .hero p.lead { margin-top: 40px; font-size: clamp(1.2rem, 2vw, 1.45rem); color: var(--ink-soft); } .hero-actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 56px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; padding: 18px 40px; border-radius: 100px; transition: all 0.2s var(--ease); } .btn-primary { background: var(--green); color: #fff; } .btn-primary:hover { background: var(--green-deep); transform: translateY(-3px); box-shadow: var(--shadow-soft); } .btn-ghost { background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid var(--sage-line); color: var(--ink); } .btn-ghost:hover { border-color: var(--green); color: var(--green); background: var(--mint); } .btn svg { width: 20px; height: 20px; transition: transform 0.2s var(--ease); } .btn:hover svg { transform: translateX(4px); } .hero-stat { margin-top: clamp(48px, 8vh, 80px); display: inline-flex; align-items: center; gap: 24px; border-top: 1px solid var(--sage-line); padding-top: 32px; } .hero-stat .num { font-family: var(--serif); font-size: clamp(3rem, 5.5vw, 4.5rem); font-weight: 500; color: var(--green); line-height: 1; letter-spacing: -0.02em; } .hero-stat .txt { font-size: 1.05rem; color: var(--ink-soft); max-width: 32ch; line-height: 1.5; } .hero-stat .txt b { color: var(--ink); font-weight: 500; } /* Marquee καλλιεργειών — κάθε όνομα είναι κουμπί που ανοίγει τον οδηγό θρέψης */ .crop-strip { flex: none; border-top: 1px solid color-mix(in srgb, var(--green) 18%, var(--sage-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--glass) 88%, transparent), var(--glass)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; position: relative; z-index: 10; } /* width: max-content είναι απαραίτητο. Χωρίς αυτό το .track είναι flex container σε επίπεδο block, δηλαδή πλάτος = πλάτος οθόνης, και το -50% του keyframe μετατόπιζε μισή ΟΘΟΝΗ αντί για μισό ΠΕΡΙΕΧΟΜΕΝΟ: το loop έκανε reset στα 5 chips σε desktop και στα 2 σε κινητό, αντί να ολοκληρώνει τον κύκλο των 12. */ .crop-strip .track { display: flex; width: max-content; align-items: center; gap: var(--marquee-gap); white-space: nowrap; padding: 14px 0; animation: slide 60s linear infinite; will-change: transform; --marquee-gap: 14px; } /* Δεν σταματά στο hover σε καμία ανάλυση. Το focus-within μένει: αν κάποιος έχει φτάσει με πληκτρολόγιο σε ένα chip, ο στόχος δεν πρέπει να του φεύγει. */ .crop-strip:focus-within .track { animation-play-state: paused; } .crop-strip .track .dup { display: contents; } .crop-chip { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); background: transparent; border: 1px solid transparent; border-radius: 100px; padding: 9px 18px; display: inline-flex; align-items: center; gap: 12px; flex: none; transition: color .2s, background .2s, border-color .2s; } .crop-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none; } .crop-chip:hover, .crop-chip:focus-visible { color: var(--green-deep); background: var(--mint); border-color: var(--sage-line); } /* Τα δύο σετ είναι 24 chips με 23 κενά, άρα το 50% πέφτει μισό κενό πριν από την αρχή του δεύτερου σετ. Το +gap/2 κλείνει τη ραφή: το chip 13 προσγειώνεται ακριβώς εκεί που ξεκίνησε το chip 1 και ο κύκλος δένει αόρατα. */ @keyframes slide { to { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); } } @media (prefers-reduced-motion: reduce) { .crop-strip .track { animation: none; } } /* Σε κινητό τρέχει το ίδιο marquee. Χωρίς οριζόντιο padding στο track: το translateX(-50%) του loop υποθέτει ότι τα δύο σετ είναι ακριβώς ισομερή. */ @media (max-width: 860px) { /* Πιο γρήγορο σε κινητό: η οθόνη χωράει 2-3 chips αντί για 9, οπότε με τον ρυθμό του desktop περίμενες πολλή ώρα μέχρι να ξαναπεράσει η καλλιέργεια που ήθελες. ΝΒ: μετά τη διόρθωση του loop η διαδρομή είναι 1656px αντί για 195px, άρα τα δευτερόλεπτα δεν συγκρίνονται με τις προηγούμενες τιμές — 25s εδώ είναι ~5× πιο γρήγορο από το desktop, όχι πιο αργό. */ .crop-strip .track { padding: 12px 0; animation-duration: 25s; } .crop-chip { background: var(--paper-2); border-color: var(--sage-line); padding: 11px 18px; } } /* ============================================================ COMPANY ============================================================ */ .company { background: var(--paper); } .company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 120px); align-items: start; } .company-lead h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: -0.02em; } .company-copy { margin-top: clamp(10px, 2vw, 28px); } .company-copy p { color: var(--ink-soft); margin: 0 0 24px; font-size: 1.1rem; } .company-copy p:first-child { font-size: 1.35rem; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; } .vision { margin-top: 48px; padding-left: 32px; border-left: 2px solid var(--lime); } .vision .k { font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--green); } .vision p { font-family: var(--serif); font-size: 1.8rem; font-weight: 400; margin: 16px 0 0; color: var(--ink); line-height: 1.3; } .values-modern { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: clamp(64px, 10vw, 100px); } @media (min-width: 768px) { .values-modern { grid-template-columns: 1fr 1fr; gap: 56px 40px; } } .val-mod { display: flex; gap: 20px; align-items: flex-start; } .val-mod .v-mark { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--green); transition: background .25s var(--ease), color .25s; } .val-mod .v-mark svg { width: 19px; height: 19px; } .val-mod:hover .v-mark { background: var(--lime); color: var(--green-deep); } .val-mod h3 { font-size: 1.6rem; margin: 0 0 8px; transition: color 0.2s; } .val-mod p { margin: 0; font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6; } .val-mod:hover h3 { color: var(--green); } /* ============================================================ LEAF PARALLAX BAND ============================================================ */ /* Καρφωμένη εικόνα: η σελίδα κυλά από πάνω της, αυτή μένει ακίνητη. Το background-attachment: fixed το αγνοεί το iOS, οπότε αντί για αυτό η εικόνα είναι position: fixed σε δικό της στρώμα. Το clip-path στη ζώνη κάνει δύο δουλειές: την κόβει στα όρια της ζώνης και την κρατά προσδεδεμένη στο viewport — δουλεύει και σε iOS/Android, σε αντίθεση με το fixed. */ /* Το margin-block:-1px κλείνει τη λεπτή λευκή γραμμή που εμφανιζόταν στα όρια της ζώνης κατά την κύλιση: το clip-path τελειώνει σε κλάσμα pixel και σε ορισμένα DPR έμενε μια σειρά όπου δεν ζωγράφιζε ούτε αυτή ούτε η επόμενη ενότητα, οπότε περνούσε το ανοιχτό φόντο της σελίδας. Με 1px επικάλυψη πάνω-κάτω δεν μένει ποτέ κενό. */ .leafband { position: relative; z-index: 10; margin-block: -1px; clip-path: inset(0); padding: clamp(120px, 16vh, 220px) 0; background: var(--green-dark); } .leafband-bg { position: fixed; inset: 0; z-index: 0; background: url('assets/field.jpg') center / cover no-repeat; } .leafband::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(20,58,43,0.94) 0%, rgba(20,58,43,0.12) 100%); } .leafband-quote { max-width: 900px; margin: 0; position: relative; z-index: 2; } .leafband-quote p { font-family: var(--serif); font-weight: 400; color: var(--paper); font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .leafband-quote .it { color: var(--lime); font-weight: 700; } .leafband-quote cite { display: inline-flex; align-items: center; gap: 20px; margin-top: 40px; font-family: var(--mono); font-style: normal; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); } .leafband-quote cite::before { content: ""; width: 48px; height: 1px; background: var(--lime); } /* ============================================================ ADVANTAGES ============================================================ */ .adv { background: radial-gradient(120% 80% at 15% 0%, rgba(166,214,60,.14) 0%, rgba(166,214,60,0) 60%), var(--green-dark); color: var(--paper); } .adv .section-title { color: var(--paper); } .adv .section-title .it { color: var(--lime); } .adv .lead { color: rgba(253,253,253,0.6); } .adv-modern { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 56px; } @media (min-width: 800px) { .adv-modern { grid-template-columns: 1fr 1fr; gap: 56px; } } .adv-card { position: relative; padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.1); transition: border-color 0.2s var(--ease); } .adv-card:hover { border-color: var(--lime); } .adv-card h3 { font-size: clamp(1.6rem, 3vw, 2rem); color: var(--paper); margin: 0 0 12px; } .adv-card p { color: rgba(253,253,253,0.6); font-size: 1.05rem; margin: 0; line-height: 1.6; } /* Absorption meter */ .meter { margin-top: 32px; } .meter-row { margin-bottom: 20px; } .meter-row .ml { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.8rem; color: rgba(253,253,253,0.8); margin-bottom: 8px; letter-spacing: 0.06em; text-transform: uppercase; } .meter-row .ml .mv { color: var(--lime); font-weight: 500; } .meter-track { height: 8px; background: rgba(255,255,255,0.08); border-radius: 100px; overflow: hidden; } .meter-fill { height: 100%; width: 100%; border-radius: 100px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); } .meter-fill.foliar { background: var(--lime); } .meter-fill.root { background: rgba(255,255,255,0.3); } .adv-card.in .meter-fill.foliar { transform: scaleX(0.60); } .adv-card.in .meter-fill.root { transform: scaleX(0.06); } @media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } } /* ============================================================ PRODUCTS TEASER (Index) & PRODUCTS APP (React) ============================================================ */ .products-teaser { background: var(--paper-2); } .products { background: var(--paper-2); } .prod-teasers { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 56px; } .pt-card { flex: 1 1 240px; padding: 32px 24px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-soft); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .pt-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); } .pt-card h3 { font-size: 1.5rem; color: var(--ink); margin-bottom: 8px; transition: color 0.2s; } /* Κάθε σειρά αναγνωρίζεται από το λογότυπό της. Κλειδώνουμε το ΥΨΟΣ και όχι το πλάτος: τα τέσσερα σήματα έχουν διαφορετική αναλογία και μόνο έτσι δείχνουν ισοβαρή το ένα δίπλα στο άλλο. */ .pt-logo { height: 40px; width: auto; max-width: 100%; display: block; margin-bottom: 18px; } .pt-card:hover h3 { color: var(--green); } .pt-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; line-height: 1.5; } /* Ο πελάτης δίνει δύο γραμμές ανά σειρά: τι είναι, και τι κάνει. Η πρώτη κρατιέται πράσινη και λίγο βαρύτερη ώστε να διαβάζεται σαν υπότιτλος. */ .pt-card .pt-lead { color: var(--green-deep); font-weight: 600; margin-bottom: 8px; } .products-more { margin-top: 40px; } /* Φίλτρα και Grid για το Products App */ .filter-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; } .chip { font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); background: transparent; border: 1px solid var(--sage-line); padding: 10px 20px; border-radius: 100px; transition: all 0.2s var(--ease); } .chip:hover { border-color: var(--green); color: var(--green); background: var(--mint); } .chip.active { background: var(--green); color: #fff; border-color: var(--green); } .chip .c { font-family: var(--mono); opacity: 0.5; margin-left: 8px; font-size: 0.85em; } .chip.active .c { opacity: 0.8; } .cat-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: -20px 0 32px; } /* Τα PNG είναι διάφανα (white-to-alpha), οπότε κάθονται καθαρά σε κάθε φόντο. */ .cat-logo { height: 58px; width: auto; max-width: 100%; display: block; } .cat-head p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; max-width: 58ch; line-height: 1.55; } .cat-head .cat-lead { color: var(--green-deep); font-weight: 600; margin-bottom: -4px; } .cat-soon { margin: 28px 0 0; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--mint); border: 1px solid var(--sage-line); color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; } .cat-soon p { margin: 0; } .cat-soon b { color: var(--green-deep); font-weight: 600; } /* Όταν το σκεύασμα που έρχεται έχει ήδη φωτογραφία, η ανακοίνωση τη δείχνει. */ .cat-soon.has-shot { display: flex; align-items: center; gap: 18px; padding: 14px 20px; } .cat-soon.has-shot img { height: 74px; width: auto; flex: none; filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--ink) 18%, transparent)); } @media (max-width: 640px) { .cat-logo { height: 44px; } } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } @keyframes cardIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .product-grid .pcard { animation: cardIn 0.6s var(--ease) both; } .product-grid .pcard:nth-child(2) { animation-delay: 0.05s; } .product-grid .pcard:nth-child(3) { animation-delay: 0.1s; } .product-grid .pcard:nth-child(n+4) { animation-delay: 0.15s; } @media (prefers-reduced-motion: reduce) { .product-grid .pcard { animation: none; } } .pcard { background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius); padding: 32px 24px; display: flex; flex-direction: column; position: relative; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s; } .pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: transparent; } /* Το βάθρο του σκευάσματος. Ίδιο ύψος σε κάθε κάρτα, με φωτογραφία ή χωρίς: έτσι η σειρά μένει ευθυγραμμισμένη ενώ έρχονται σταδιακά οι φωτογραφίες. Η βαθμίδα δίνει το φως του στούντιο, το drop-shadow ακολουθεί το περίγραμμα του μπουκαλιού (τα PNG είναι διάφανα) και το γειώνει αντί να το αφήνει να αιωρείται. */ .pcard-stage { position: relative; height: 250px; margin-bottom: 24px; border-radius: 14px; background: radial-gradient(112% 88% at 50% 12%, var(--paper) 0%, var(--paper-2) 72%); border: 1px solid var(--sage-line); display: grid; place-items: center; padding: 20px; overflow: hidden; } /* Ρητό 100%×100% με object-fit αντί για max-height:100%: σε grid item το ποσοστιαίο ύψος δεν λύνεται (η περιοχή θεωρείται αόριστη) και η φωτογραφία έβγαινε στο φυσικό της μέγεθος, κομμένη στη μέση. Το inset:0 πιάνει το padding box του βάθρου, οπότε το περιθώριο το δίνει το padding της ίδιας της εικόνας — `width:auto` δεν τεντώνει replaced element. */ .pcard-stage img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 20px; object-fit: contain; filter: drop-shadow(0 14px 16px color-mix(in srgb, var(--ink) 20%, transparent)); transition: transform 0.35s var(--ease); } .pcard:hover .pcard-stage img { transform: translateY(-4px) scale(1.05); } @media (prefers-reduced-motion: reduce) { .pcard:hover .pcard-stage img { transform: none; } } /* Χωρίς φωτογραφία: η σύνθεση του σκευάσματος κρατά τη θέση — για τα Grow Plant ο λόγος N·P·K είναι ούτως ή άλλως η ταυτότητά τους. */ .pcard-stage.is-spec { background: var(--paper-2); } .pcard-stage .stage-spec { font-family: var(--mono); font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 500; letter-spacing: 0.01em; color: var(--green-deep); text-align: center; line-height: 1.3; overflow-wrap: break-word; } .pcard .spec { align-self: flex-start; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; color: var(--green); background: var(--paper-2); border-radius: var(--radius-sm); padding: 6px 12px; margin-bottom: 24px; transition: background 0.2s, color 0.2s; } .pcard:hover .spec { background: var(--green); color: var(--paper); } /* Κρατάει τη θέση του πλακιδίου στις κάρτες χωρίς φωτογραφία, ώστε οι τίτλοι όλης της σειράς να πέφτουν στην ίδια γραμμή. visibility και όχι display: το display:none θα έδινε πίσω το ύψος και θα ξαναχάλαγε η ευθυγράμμιση. */ .pcard .spec.is-ghost { visibility: hidden; } .pcard h2 { font-size: 1.8rem; margin: 0 0 10px; letter-spacing: -0.02em; } .pcard .pcat { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--copper); margin-bottom: 16px; } .pcard p { font-size: 0.95rem; color: var(--ink-mute); margin: 0 0 24px; flex: 1; line-height: 1.6; } .pcard .phase { display: flex; flex-wrap: wrap; gap: 8px; } .pcard .phase span { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-soft); background: var(--paper-2); padding: 4px 10px; border-radius: var(--radius-sm); } .product-note { margin-top: 48px; font-family: var(--mono); font-size: 0.85rem; color: var(--ink-mute); text-align: center; } /* ============================================================ CROPS ============================================================ */ .crops { background: var(--paper); } .crop-tools { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 40px; } .crop-search { position: relative; flex: 1; min-width: 300px; } .crop-search input { width: 100%; font-family: var(--sans); font-size: 1.05rem; color: var(--ink); background: var(--paper-2); border: 1px solid transparent; border-radius: 100px; padding: 16px 20px 16px 48px; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .crop-search input:focus { outline: none; background: var(--paper); border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent); } .crop-search svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; stroke: var(--ink-mute); } .crop-count { font-family: var(--mono); font-size: 0.9rem; color: var(--ink-mute); white-space: nowrap; } .cat-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; } .crop-cats { display: flex; flex-direction: column; gap: 48px; } .crop-cat h3 { font-size: 1.1rem; font-family: var(--mono); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 24px; display: flex; align-items: center; gap: 16px; } .crop-cat h3::after { content: ""; flex: 1; height: 1px; background: var(--sage-line); } .crop-list { display: flex; flex-wrap: wrap; gap: 12px; } .crop-item { display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--ink); background: var(--paper-2); border: 1px solid transparent; border-radius: 100px; padding: 10px 20px 10px 14px; transition: all 0.2s var(--ease); } /* Το εικονίδιο αντικατέστησε την κουκκίδα και κουβαλάει και το σήμα «έχει οδηγό»: γεμάτο πράσινο = υπάρχει πρόγραμμα θρέψης, ξεθωριασμένο = ετοιμάζεται. */ .crop-item .crop-ico { width: 22px; height: 22px; flex: none; fill: currentColor; color: var(--green); transition: transform 0.2s, color 0.2s; } .crop-item:hover { background: var(--green); color: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow-soft); } .crop-item:hover .crop-ico { color: var(--lime); transform: scale(1.12); } .crop-item mark { background: var(--lime); color: var(--ink); padding: 0 4px; border-radius: 3px; } .crop-empty { font-family: var(--mono); color: var(--ink-mute); padding: 48px 0; text-align: center; } /* Όλη η κάρτα είναι πατήσιμη (βλ. app.js) — το χέρι το δηλώνει. */ .pcard { cursor: pointer; } .pcard-more { margin-top: 20px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--green); transition: gap 0.2s var(--ease), color 0.2s; } .pcard-more svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); } .pcard-more:hover { color: var(--green-deep); gap: 12px; } .crop-item { font-family: inherit; cursor: pointer; text-align: left; } /* Ολα τα εικονιδια καλλιεργειων πρασινα - χωρις γκρι διακριση για οσες δεν εχουν ακομη οδηγο. */ /* ============================================================ MODAL ============================================================ */ .modal-open { overflow: hidden; } .modal-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 40px); background: rgba(10,14,12,0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: ovIn 0.3s ease; } .modal { position: relative; width: min(880px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-float); animation: modIn 0.4s var(--ease); } .modal:focus { outline: none; } .modal-body { padding: clamp(28px, 5vw, 48px); } .modal-x { position: sticky; top: 16px; float: right; margin: 16px 16px -32px 0; z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--paper-2) 92%, transparent); color: var(--ink-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--sage-line); transition: background 0.2s, color 0.2s, transform 0.2s; } .modal-x:hover { background: var(--green); color: #fff; border-color: var(--green); transform: scale(1.05); } .modal-x svg { width: 20px; height: 20px; } @keyframes ovIn { from { opacity: 0; } } @keyframes modIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } } @keyframes sheetIn { from { transform: translateY(100%); } } /* Σε κινητό το modal γίνεται bottom sheet — φυσικότερο και πιάνεται με τον αντίχειρα */ @media (max-width: 640px) { .modal-overlay { padding: 0; align-items: flex-end; } .modal { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; animation: sheetIn 0.35s var(--ease); } .modal-body { padding: 26px 18px calc(32px + env(safe-area-inset-bottom)); } .modal-x { top: 10px; margin: 12px 12px -36px 0; } } @media (prefers-reduced-motion: reduce) { .modal-overlay, .modal { animation: none; } } /* Δελτίο με φωτογραφία: το σκεύασμα αριστερά, η ταυτότητά του δεξιά. Χωρίς φωτογραφία το δελτίο μένει μονόστηλο, όπως ήταν. */ /* Η στήλη κρατιέται στενή και το ύψος κοντά σε αυτό του κειμένου: το μπουκάλι είναι 1:2,8, οπότε μια φαρδιά κολόνα θα άφηνε κενό γύρω του και θα ξέφευγε κάτω από την περιγραφή. */ .pm-top { display: grid; grid-template-columns: 206px 1fr; gap: 32px; align-items: start; margin-bottom: 32px; } .pm-shot { border-radius: 16px; padding: 24px 20px; display: grid; place-items: center; background: radial-gradient(112% 88% at 50% 12%, var(--paper) 0%, var(--paper-2) 72%); border: 1px solid var(--sage-line); } .pm-shot img { max-height: 264px; max-width: 100%; width: auto; display: block; filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--ink) 22%, transparent)); } .pm-intro .pm-name { margin-top: 14px; } .pm-intro .pm-long { margin-bottom: 0; } @media (max-width: 720px) { .pm-top { grid-template-columns: 1fr; gap: 22px; } .pm-shot { padding: 18px; } .pm-shot img { max-height: 210px; } } .pm-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .pm-head .spec { margin-bottom: 0; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--green); background: var(--paper-2); padding: 6px 12px; border-radius: var(--radius-sm); } .pm-head .pcat { margin-bottom: 0; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--copper); } .pm-name { font-size: clamp(2.2rem, 4vw, 2.8rem); margin: 16px 0 16px; letter-spacing: -0.02em; } .pm-long { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 32px; line-height: 1.6; } .pm-sect { margin-bottom: 32px; } .pm-k { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 16px; } .pm-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 32px; } .pm-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--paper-3); font-size: 0.95rem; color: var(--ink-soft); } .pm-row b { font-family: var(--mono); font-weight: 500; color: var(--ink); } .pm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; } .pm-fact { background: var(--paper-2); border-radius: var(--radius-sm); padding: 16px; } .pm-fact span { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; } .pm-fact b { font-family: var(--mono); font-weight: 500; font-size: 1.05rem; color: var(--ink); } .pm-ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 1rem; } .pm-ul li { margin-bottom: 8px; } .pm-note { font-size: 0.9rem; color: var(--ink-mute); margin: 16px 0 0; line-height: 1.6; } .pm-note a { color: var(--green); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; } .pm-actions { margin-top: 40px; } /* ---------- Οδηγός θρέψης: χρονογραμμή φάσεων αντί για πλατύ πίνακα ---------- Ο πίνακας του ecoplant.gr είναι 5-14 στήλες· σε κινητό δεν διαβάζεται. Εδώ κάθε στήλη γίνεται ένα βήμα με τα σκευάσματα και τη δόση του. */ /* Φωτογραφία καλλιέργειας — γεμίζει την κορυφή του modal (αναιρεί το padding του .modal-body). Μπαίνει στο DOM μόνο όταν ανοίγει ο οδηγός, οπότε η σελίδα δεν κατεβάζει ούτε ένα byte εικόνας μέχρι να τη ζητήσει ο χρήστης. */ .cg-photo { --cg-pad: clamp(28px, 5vw, 48px); margin: calc(-1 * var(--cg-pad)) calc(-1 * var(--cg-pad)) 30px; background: var(--paper-2); /* sticky, ώστε να μένει ορατή όσο διαβάζεις τις φάσεις από κάτω. Το z-index μένει κάτω από το .modal-x (3), για να μη σκεπάζει το κουμπί κλεισίματος. */ position: sticky; top: 0; z-index: 2; /* ΣΤΑΘΕΡΟ ύψος, επίτηδες. Είχε δοκιμαστεί header που μάζευε με το scroll: κάθε αλλαγή ύψους μίκραινε το scrollHeight (3166→2998), ο browser διόρθωνε το scrollTop (ζητούσες 120, έπαιρνες 11) και η εικόνα πηδούσε. */ height: clamp(180px, 22vw, 230px); } /* Οι στρώσεις είναι στοιβαγμένες και εναλλάσσονται με opacity — καμία δεν μπαίνει στη ροή, οπότε το float του .modal-x δεν τις στενεύει (η είναι block-level replaced και θα το απέφευγε). */ .cg-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); } .cg-layer.is-on { opacity: 1; z-index: 1; } .cg-layer img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Αργό, ατέρμονο ζουμ: όταν 2+ διαδοχικές φάσεις είναι το ίδιο βιολογικό στάδιο (π.χ. «5-7 Φύλλα» → «7-9 Φύλλα»), η ίδια φωτογραφία μένει ενεργή για ώρα — χωρίς κίνηση θα έμοιαζε κολλημένη σελίδα. Πολύ αργό ώστε να μην ενοχλεί. */ .cg-layer.is-on img { animation: cgDrift 22s ease-in-out infinite alternate; } @keyframes cgDrift { from { transform: scale(1); } to { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .cg-layer.is-on img { animation: none; } } /* Το .modal-x είναι ανοιχτόχρωμη κάψουλα και πατάει πάνω στη φωτογραφία· χωρίς αυτό το σκίαστρο χάνεται σε φωτογραφίες με ουρανό. */ .cg-photo::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 92px; z-index: 1; background: linear-gradient(to bottom, rgba(8,14,10,0.3), rgba(8,14,10,0)); pointer-events: none; } /* Βελάκια χειροκίνητης πλοήγησης — πάντα σωστά, αντίθετα με το scroll που σε κοντό οδηγό ή σε δυνατό swipe μπορεί να «πηδήξει» φάσεις. */ .cg-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, #0a0e0c 38%, transparent); color: #fff; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.2s, transform 0.2s, opacity 0.2s; } .cg-nav svg { width: 20px; height: 20px; } .cg-nav:hover:not(:disabled) { background: var(--green); border-color: var(--green); } .cg-nav:disabled { opacity: 0; pointer-events: none; } .cg-nav-prev { left: 12px; } .cg-nav-next { right: 12px; } @media (max-width: 640px) { .cg-nav { width: 32px; height: 32px; } .cg-nav svg { width: 18px; height: 18px; } .cg-nav-prev { left: 8px; } .cg-nav-next { right: 8px; } } .cg-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 38px clamp(18px, 5vw, 48px) 13px; background: linear-gradient(to top, rgba(8,14,10,0.8), rgba(8,14,10,0.26) 55%, rgba(8,14,10,0)); color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,0.45); pointer-events: none; z-index: 2; } .cg-cap-row { display: flex; align-items: baseline; gap: 12px; } .cg-cap-row b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.02rem, 2.3vw, 1.3rem); line-height: 1.22; /* «Άλλες 2-3 εφαρμογές κάθε 10 ημέρες (Ανάλογα την καρποφορία)» δεν χωρά — 2 σειρές αρκούν. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; } .cg-cap-n { margin-left: auto; flex: none; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em; } .cg-cap-n i { font-style: normal; opacity: 0.55; } /* Δείκτης προόδου: μία λωρίδα ανά φάση, γεμίζει όσο κατεβαίνεις. */ .cg-steps { display: flex; gap: 4px; } .cg-steps i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); transition: background 0.45s var(--ease); } .cg-steps i.on { background: rgba(255,255,255,0.95); } @media (max-width: 640px) { .cg-photo { margin: -26px -18px 22px; height: clamp(140px, 38vw, 170px); } .cg-cap { padding: 30px 18px 10px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .cg-layer, .cg-steps i { transition: none; } } .cg-note { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); margin: 0 0 28px; line-height: 1.5; } .cg-sub { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 28px; } .cg-prog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .cg-phase { position: relative; padding: 0 0 28px 44px; } /* κάθετη γραμμή χρονογραμμής */ .cg-phase::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: -6px; width: 2px; background: linear-gradient(180deg, var(--sage-line), rgba(222,232,216,0)); } .cg-phase:last-child { padding-bottom: 0; } .cg-phase:last-child::before { display: none; } .cg-ph { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; min-height: 32px; } .cg-step { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; background: var(--mint); color: var(--green-deep); border: 1px solid var(--sage-line); transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .cg-phase h4 { font-family: var(--sans); font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--green-deep); margin: 0; text-wrap: balance; background: var(--mint); border: 1px solid var(--sage-line); border-radius: 100px; padding: 7px 16px; } /* minmax(0,·) και min-width:0: χωρίς αυτά το min-width:auto των grid/flex items αφήνει μια μεγάλη δόση («80ml/στρ, μόνο στις μισές εφαρμογές») να φαρδύνει τη στήλη πέρα από το modal — οριζόντιο scroll και κομμένες δόσεις στο κινητό. */ /* Η φάση που οδηγεί τη φωτογραφία. Χωρίς αυτό η αλλαγή της εικόνας μοιάζει αυθαίρετη — τώρα φαίνεται ακριβώς ποια γραμμή τη ζήτησε. */ .cg-phase.is-live .cg-step { background: var(--green); color: #fff; border-color: var(--green); } .cg-phase.is-live > .cg-ph h4 { color: var(--green-deep); } .cg-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } .cg-item { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; background: var(--paper-2); border: 1px solid transparent; border-radius: 12px; padding: 11px 14px; transition: border-color .2s, background .2s; } .cg-item:hover { background: var(--mint); border-color: var(--sage-line); } .cg-prod { min-width: 0; overflow-wrap: anywhere; font-size: 0.95rem; font-weight: 500; color: var(--ink); line-height: 1.35; } .cg-prod .brand { color: var(--green); font-weight: 600; } /* Ονόματα προϊόντων με δικό τους δελτίο ανοίγουν το ProductModal — ίδιο μέγεθος κειμένου με τα μη-πατήσιμα (.cg-prod span), μόνο με ένδειξη ότι πατιέται. */ .cg-prod-link { appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; border-radius: 4px; } .cg-prod-link:hover, .cg-prod-link:focus-visible { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; } .cg-prod-link:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; } .cg-dose { font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--green-deep); background: rgba(166,214,60,.22); border-radius: 100px; padding: 4px 10px; flex: 0 1 auto; min-width: 0; text-align: right; line-height: 1.4; } .cg-extra { display: block; font-size: 0.82rem; color: var(--ink-mute); font-weight: 400; margin-top: 4px; line-height: 1.45; } /* γραμμές χωρίς δοσολογία = σημείωση/υποδιαίρεση μέσα στη φάση */ .cg-item.is-note { grid-column: 1 / -1; background: transparent; border: 0; border-top: 1px dashed var(--sage-line); border-radius: 0; padding: 12px 2px 2px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .cg-item.is-note:hover { background: transparent; } @media (min-width: 720px) { .cg-items { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } } /* ============================================================ TRAINING band ============================================================ */ /* Φωτεινή ζώνη εκπαίδευσης — ήταν σκούρο πράσινο, τώρα mint με πράσινο κείμενο */ .training { background: linear-gradient(150deg, var(--mint) 0%, #DCEFC6 55%, #EFF7E4 100%); color: var(--ink); } .training-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(40px, 8vw, 80px); align-items: center; } .training h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--ink); } .training h2 .it { color: var(--green); font-weight: 700; } .training p { color: var(--ink-soft); margin: 24px 0 0; font-size: 1.15rem; max-width: 48ch; line-height: 1.6; } .training .btn-lime { background: var(--green); color: #fff; margin-top: 40px; } .training .btn-lime:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: var(--shadow-float); } .training-aside { border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius); padding: clamp(28px, 4vw, 40px); background: rgba(255,255,255,.72); box-shadow: var(--shadow-soft); } .training-aside .ti { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); } .training-aside ul { list-style: none; margin: 24px 0 0; padding: 0; } .training-aside li { padding: 16px 0; border-bottom: 1px solid var(--paper-3); font-size: 1.05rem; display: flex; align-items: center; gap: 16px; color: var(--ink); } .training-aside li:last-child { border-bottom: 0; padding-bottom: 0; } .training-aside li svg { width: 18px; height: 18px; stroke: var(--green); flex: none; } /* ============================================================ CONTACT ============================================================ */ .contact { background: var(--paper-2); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 100px); } .contact-info h2 { font-size: clamp(2.4rem, 5vw, 4rem); } .contact-info .lead { margin-top: 24px; } .info-list { margin-top: 48px; display: flex; flex-direction: column; gap: 8px; } .info-row { display: flex; gap: 24px; padding: 16px 0; } .info-row .il { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute); width: 100px; flex: none; padding-top: 4px; } .info-row .iv { font-size: 1.05rem; } .info-row .iv a { color: var(--green); font-weight: 500; transition: color 0.2s; } .info-row .iv a:hover { color: var(--ink); } .info-row .iv .sub { color: var(--ink-mute); font-size: 0.9rem; display: block; margin-top: 4px; } .contact-form { background: var(--paper); border-radius: var(--radius); padding: clamp(32px, 4vw, 56px); box-shadow: var(--shadow-soft); } .contact-form .fh { font-family: var(--serif); font-size: 1.8rem; margin-bottom: 8px; font-weight: 500; } .contact-form .fsub { font-size: 0.95rem; color: var(--ink-mute); margin-bottom: 32px; } .field { margin-bottom: 24px; } .field label { display: block; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: 8px; } .field input, .field textarea, .field select { width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--paper-2); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 16px; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); background: var(--paper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent); } .field textarea { resize: vertical; min-height: 140px; } .contact-form button[type=submit] { width: 100%; background: var(--green); color: #fff; padding: 18px; border-radius: 100px; font-weight: 500; font-size: 1rem; transition: background 0.2s, transform 0.2s var(--ease); margin-top: 20px; } .contact-form button[type=submit]:hover { background: var(--green-deep); transform: translateY(-2px); } .form-note { font-size: 0.85rem; color: var(--ink-mute); margin-top: 20px; text-align: center; } .field label .opt { font-family: var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink-mute); font-size: 0.8rem; margin-left: 6px; } /* Το honeypot πρέπει να είναι αόρατο για ανθρώπους αλλά υπαρκτό στο DOM ώστε τα bots να το γεμίσουν. Off-screen και όχι display:none — τα καλύτερα bots αγνοούν ό,τι είναι display:none. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); cursor: pointer; } .form-consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); cursor: pointer; } .form-consent a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; } .form-status { border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 24px; font-size: 0.95rem; line-height: 1.5; } .form-status.ok { background: var(--mint); color: var(--green-dark); } .form-status.err { background: color-mix(in srgb, #C0392B 10%, var(--paper-2)); color: #8E2A1F; } /* ============================================================ FOOTER ============================================================ */ /* Σκούρο footer, στο ίδιο βαθύ πράσινο με την ενότητα Πλεονεκτήματα. Το λογότυπο έχει σκουροπράσινα γράμματα, οπότε κάθεται πάνω σε λευκή πλάκα για να διαβάζεται. */ .site-footer { background: radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--lime) 10%, transparent) 0%, transparent 62%), var(--green-dark); color: color-mix(in srgb, var(--paper) 62%, transparent); padding: clamp(64px, 10vw, 120px) 0 32px; } /* Grid αντί για space-between: το παλιό flex άφηνε μια τεράστια τρύπα στη μέση */ .footer-inner { display: grid; gap: clamp(32px, 5vw, 56px); margin-bottom: 56px; grid-template-columns: minmax(240px, 1.3fr) repeat(3, minmax(150px, 1fr)); align-items: start; } .footer-brand .brand-logo { height: 46px; margin-bottom: 20px; background: #fff; padding: 11px 15px; border-radius: 14px; box-sizing: content-box; } .footer-brand p { margin: 0; font-size: 0.98rem; line-height: 1.65; max-width: 34ch; } .footer-social { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 72%, transparent); border: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); border-radius: 100px; padding: 9px 16px; transition: color .2s, border-color .2s, background .2s; } .footer-social svg { width: 17px; height: 17px; } .footer-social:hover { color: var(--green-dark); background: var(--lime); border-color: var(--lime); } .footer-links { display: contents; } .footer-col h2 { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--lime); margin: 0 0 18px; font-weight: 500; } .footer-col a { display: block; padding: 7px 0; font-size: 0.98rem; color: color-mix(in srgb, var(--paper) 68%, transparent); transition: color 0.2s ease; } .footer-col a span { display: block; font-size: 0.78rem; color: color-mix(in srgb, var(--paper) 40%, transparent); margin-top: 1px; } .footer-col a:hover { color: var(--lime); } .footer-note { margin: 16px 0 0; font-size: 0.85rem; line-height: 1.6; color: color-mix(in srgb, var(--paper) 48%, transparent); } .footer-cookie-btn { display: block; padding: 7px 0; font-family: var(--sans); font-size: 0.98rem; text-align: left; color: color-mix(in srgb, var(--paper) 68%, transparent); transition: color .2s; } .footer-cookie-btn:hover { color: var(--lime); } @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } /* Σε κινητό το footer έμενε σε μία στήλη και ξεδιπλωνόταν σε μισή οθόνη σκρολ. Τίποτα δεν κόβεται — οι τρεις στήλες μένουν δύο-δύο και σφίγγουν τα κενά. */ @media (max-width: 560px) { .site-footer { padding: 56px 0 24px; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 26px 18px; margin-bottom: 30px; } /* Ρητή τοποθέτηση: τα δύο κοντά μπλοκ (Πλοήγηση, Νομικά) στοιβάζονται αριστερά και η ψηλή Επικοινωνία πιάνει και τις δύο σειρές δεξιά. Με αυτόματο 2×2 grid έμενε ένα κενό κελί, και με columns:2 ο browser έριχνε δύο μπλοκ στην ίδια κολόνα. */ .footer-brand { grid-column: 1 / -1; grid-row: 1; } .footer-col:nth-child(1) { grid-column: 1; grid-row: 2; } .footer-col:nth-child(2) { grid-column: 2; grid-row: 2 / span 2; } .footer-col:nth-child(3) { grid-column: 1; grid-row: 3; } /* Το email είναι μακρύτερο από τη μισή οθόνη — σπάει αντί να ξεχειλίζει. */ .footer-col a { overflow-wrap: anywhere; } .footer-brand .brand-logo { height: 36px; margin-bottom: 14px; padding: 9px 12px; } .footer-brand p { font-size: 0.9rem; line-height: 1.55; max-width: none; } .footer-social { margin-top: 14px; padding: 8px 14px; } .footer-col h2 { margin-bottom: 8px; } .footer-col a, .footer-cookie-btn { padding: 5px 0; font-size: 0.92rem; } .footer-note { margin-top: 12px; font-size: 0.8rem; } .footer-bottom { padding-top: 18px; gap: 4px; font-size: 0.72rem; } } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); font-family: var(--mono); font-size: 0.78rem; color: color-mix(in srgb, var(--paper) 42%, transparent); } /* Νομική ταυτοποίηση φορέα (Π.Δ. 131/2003 άρ. 4, Ν.4919/2022 άρ. 44): επωνυμία, ΑΦΜ και ΓΕΜΗ πρέπει να φαίνονται στο ίδιο το site — όχι μόνο θαμμένα μέσα στις νομικές σελίδες. Μπαίνει στη μέση της κάτω γραμμής, στον ίδιο σβηστό τόνο με το copyright ώστε να μη διεκδικεί προσοχή. Σε κινητό πέφτει σε δική του σειρά. */ .footer-id { letter-spacing: 0.03em; } @media (max-width: 860px) { .footer-bottom { justify-content: center; text-align: center; } .footer-id { flex-basis: 100%; order: 3; } } .footer-bottom a { color: inherit; transition: color 0.2s; } .footer-bottom a:hover { color: var(--lime); } /* ============================================================ BREADCRUMB / BACK ============================================================ */ .crumb-back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 32px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); padding: 10px 18px 10px 14px; border-radius: 100px; border: 1px solid var(--sage-line); background: var(--paper); transition: color .2s, border-color .2s, background .2s, gap .2s var(--ease); } .crumb-back svg { width: 18px; height: 18px; flex: none; } .crumb-back:hover { color: var(--green); border-color: var(--green); background: var(--mint); gap: 14px; } /* ============================================================ ΑΡΘΡΟΓΡΑΦΙΑ (blog) ============================================================ */ /* Χωρίς δικό της background: το gradient ξεκινούσε κάτω από το sticky header και έβγαζε μια ορατή ρίγα στην κορυφή. Ίδιο χαρτί με όλη τη σελίδα. */ .blog-hero { padding-top: clamp(56px, 9vw, 96px); } .post-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 5vw, 48px); } .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } .post-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; } .post-card[hidden] { display: none; } a.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: transparent; } .post-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--mint); overflow: hidden; } .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } a.post-card:hover .post-thumb img { transform: scale(1.05); } .post-thumb .ptag { position: absolute; left: 12px; bottom: 12px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); background: color-mix(in srgb, var(--paper) 92%, transparent); border-radius: 100px; padding: 6px 12px; } .post-body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .post-meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; } .post-card h2 { font-size: 1.5rem; line-height: 1.15; margin: 0 0 10px; text-wrap: balance; transition: color .2s; } a.post-card:hover h3 { color: var(--green); } .post-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.6; flex: 1; } .post-more { font-size: 0.9rem; font-weight: 500; color: var(--green); display: inline-flex; align-items: center; gap: 8px; } .post-more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); } a.post-card:hover .post-more svg { transform: translateX(4px); } /* κάρτες που δεν έχουν ακόμη άρθρο */ .post-card.soon { border-style: dashed; background: transparent; } .post-card.soon .post-thumb { background: var(--paper-2); display: grid; place-items: center; } .post-card.soon .post-thumb span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .post-card.soon h3 { color: var(--ink-soft); } /* ---------- 404 ---------- */ .notfound { padding-top: clamp(64px, 11vw, 128px); min-height: 62vh; } .nf-inner { max-width: 720px; } .nf-code { display: block; font-family: var(--mono); font-size: clamp(3.4rem, 11vw, 5.6rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--lime); margin-bottom: clamp(16px, 3vw, 24px); } .notfound h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); line-height: 1.02; margin: 0 0 20px; text-wrap: balance; } .notfound .lead { margin-bottom: clamp(28px, 5vw, 40px); } .nf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(48px, 8vw, 72px); } .nf-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .nf-links a { display: block; padding: 20px 22px; background: var(--paper-2); border: 1px solid transparent; border-radius: var(--radius-sm); transition: border-color .2s, background .2s, transform .25s var(--ease); } .nf-links a:hover { border-color: var(--green); background: var(--paper); transform: translateY(-3px); } .nf-links strong { display: block; font-weight: 500; color: var(--green-deep); margin-bottom: 4px; } .nf-links span { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; } /* ---------- σελίδα άρθρου ---------- */ .article { padding-top: clamp(40px, 6vw, 72px); } .article-head { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 48px); } .article-head h1 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); letter-spacing: -0.03em; text-wrap: balance; margin-bottom: 20px; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--lime); } .article-cover { max-width: 980px; margin: 0 auto clamp(40px, 6vw, 64px); border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 9; } .article-cover img { width: 100%; height: 100%; object-fit: cover; } .prose { max-width: 68ch; margin-inline: auto; font-size: 1.08rem; line-height: 1.75; color: var(--ink-soft); } /* Ένα margin-owner: όλα τα παιδιά μηδέν, το κενό το δίνει μόνο ο lobotomized owl. (Αν το margin-block έμπαινε στο .prose p, θα νικούσε σε specificity και θα κολλούσαν.) */ .prose > * { margin-block: 0; } .prose > * + * { margin-top: 26px; } .prose h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--ink); letter-spacing: -0.02em; } .prose > h2 + * { margin-top: 20px; } .prose > * + h2 { margin-top: 56px; } .prose h3 { font-family: var(--sans); font-size: 1.12rem; font-weight: 600; color: var(--ink); letter-spacing: 0; } .prose > * + h3 { margin-top: 36px; } .prose > h3 + * { margin-top: 14px; } .prose strong { color: var(--ink); font-weight: 600; } .prose ul, .prose ol { padding-left: 22px; } .prose li + li { margin-top: 10px; } .prose li::marker { color: var(--green); } .prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } .prose .lede { font-size: 1.25rem; line-height: 1.6; color: var(--ink); } .prose > .lede + * { margin-top: 32px; } .prose blockquote { padding: 4px 0 4px 28px; border-left: 3px solid var(--lime); font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.4; color: var(--ink); } .prose blockquote p { margin: 0; } .callout { background: var(--mint); border: 1px solid var(--sage-line); border-radius: var(--radius); padding: clamp(22px, 3vw, 30px); } /* πιο αέρας γύρω από τα «βαριά» μπλοκ */ .prose > * + blockquote, .prose > blockquote + *, .prose > * + .callout, .prose > .callout + * { margin-top: 40px; } .callout .ck { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 12px; } .callout p:last-child, .callout ul:last-child { margin-bottom: 0; } .article-foot { max-width: 68ch; margin: clamp(48px, 7vw, 80px) auto 0; padding-top: 32px; border-top: 1px solid var(--sage-line); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } /* ============================================================ RESPONSIVE ============================================================ */ /* Το burger εμφανίζεται στα 1024 και όχι στα 960: με πέντε στοιχεία πλοήγησης, CTA και (στο κατάστημα) καλάθι, η κάψουλα ξεχείλιζε ακόμη 88px στα 960. Στα 1025 χρειάζεται 863px από τα 903 διαθέσιμα, με τα σφιχτά κενά παρακάτω να ξεκινούν από το ίδιο σημείο. Χωριστό breakpoint από τα grid παρακάτω, που δεν έχουν λόγο να αλλάξουν μαζί. */ @media (max-width: 1024px) { .brand { margin-right: auto; } .nav-links { display: none; } .nav-toggle { display: block; margin-left: 10px; } } /* Στη στενή ζώνη πριν το burger, η κάψουλα του καταστήματος κουβαλάει και το καλάθι· με το μεγαλύτερο λογότυπο τα 22px κενά ξεχείλιζαν κατά 3px στα 1025. Σφίγγουν τα κενά, δεν μικραίνει το λογότυπο. */ @media (min-width: 1025px) and (max-width: 1320px) { .nav { gap: 16px; } .nav-links { gap: 18px; } .nav-cta { padding: 14px 20px; } } @media (max-width: 960px) { .company-grid, .training-grid, .contact-grid { grid-template-columns: 1fr; } .adv-modern { grid-template-columns: 1fr; } } /* Χαμηλές οθόνες laptop: το hero ξεχείλιζε και το marquee έπεφτε κάτω από το fold. Το marquee είναι πλέον πλοήγηση, πρέπει να φαίνεται. */ @media (min-width: 861px) and (max-height: 920px) { .hero { padding: 28px 0; } .hero h1 { font-size: clamp(2.8rem, 5.2vw, 4.4rem); } .hero-tag { margin-bottom: 20px; } .hero p.lead { margin-top: 24px; font-size: 1.15rem; } .hero-actions { margin-top: 32px; } .hero-stat { margin-top: 32px; padding-top: 20px; } .hero-stat .num { font-size: 3.2rem; } } /* ---------- Tablet ---------- */ @media (max-width: 860px) { :root { --hh: 86px; --gut: clamp(18px, 5vw, 40px); } .section { padding: clamp(72px, 12vw, 110px) 0; } .section-title { font-size: clamp(2.4rem, 8vw, 3.6rem); } /* το πλάγιο gradient αφήνει το κείμενο πάνω στο βίντεο — κάθετο σε στενή οθόνη */ .hero-overlay { background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 88%, transparent) 0%, color-mix(in srgb, var(--paper) 74%, transparent) 50%, color-mix(in srgb, var(--paper) 34%, transparent) 100%); } .prod-teasers { gap: 14px; } .pt-card { flex: 1 1 100%; padding: 26px 22px; } .crop-tools { gap: 14px; } .crop-search { min-width: 0; flex: 1 1 100%; } /* Τα φίλτρα σπάνε σε σειρές αντί να κυλούν οριζόντια. Η κρυμμένη μπάρα κύλισης δεν έδινε καμία ένδειξη ότι υπάρχουν κι άλλες κατηγορίες δεξιά. */ .cat-filter, .filter-bar, .post-filters { gap: 8px; margin-bottom: clamp(28px, 5vw, 36px); } .cat-filter .chip, .filter-bar .chip, .post-filters .chip { font-size: 0.9rem; padding: 12px 16px; } .crop-cats { gap: 36px; } .footer-inner { gap: 36px; margin-bottom: 44px; } } /* ---------- Κινητό ---------- */ @media (max-width: 560px) { body { font-size: 16px; } .values-modern { gap: 32px; } .nav-cta { display: none; } .nav { padding: 0 8px 0 16px; height: 62px; } .hero { padding: 24px 0; } .hero h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 1; } .hero-tag { margin-bottom: 16px; font-size: 0.7rem; letter-spacing: 0.16em; gap: 12px; } .hero-tag::before { width: 28px; } .hero p.lead { margin-top: 20px; font-size: 1.05rem; } .hero-actions { margin-top: 32px; flex-direction: column; width: 100%; gap: 12px; } .hero-actions .btn { justify-content: center; width: 100%; padding: 17px 28px; } .hero-stat { display: flex; width: 100%; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: 32px; padding-top: 20px; } .hero-stat .num { font-size: 3.2rem; } /* Ήταν γυμνή λίστα με ετικέτα πάνω από τιμή: δέκα σειρές για πέντε στοιχεία. Γίνεται κάρτα με λεπτούς διαχωριστές, ετικέτα και τιμή στην ίδια γραμμή. */ .info-list { margin-top: 28px; gap: 0; background: var(--paper); border: 1px solid var(--sage-line); border-radius: var(--radius); padding: 2px 16px; } .info-row { align-items: baseline; gap: 14px; padding: 14px 0; } .info-row + .info-row { border-top: 1px solid var(--paper-3); } .info-row .il { width: 68px; font-size: 0.6rem; letter-spacing: 0.1em; padding-top: 3px; } .info-row .iv { flex: 1; min-width: 0; font-size: 0.98rem; line-height: 1.5; } .info-row .iv a { font-weight: 600; } /* Το όνομα δίπλα στο τηλέφωνο αντί για δική του σειρά. */ .info-row .iv .sub { display: inline; margin: 0 0 0 8px; font-size: 0.82rem; } .pm-rows { grid-template-columns: 1fr; } .pm-name { font-size: 2rem; } .product-grid, .post-grid { grid-template-columns: 1fr; gap: 16px; } .vision { padding-left: 20px; margin-top: 32px; } .vision p { font-size: 1.2rem; } .val-mod { gap: 14px; } .adv-card { padding-left: 18px; } /* στόχοι αφής >= 44px */ .crop-item { padding: 13px 20px 13px 15px; font-size: 1.02rem; } .chip { padding: 12px 18px; } .mobile-menu a { padding: 17px 0; font-size: 1.35rem; } .contact-form { padding: 26px 20px; } .article-cover { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); } .prose { font-size: 1.05rem; } .prose blockquote { font-size: 1.25rem; padding-left: 20px; margin: 32px 0; } /* Τίτλοι και παράγραφοι έμεναν σε κλίμακα desktop: 5-6 λέξεις ανά γραμμή και 11.400px συνολικό ύψος (13,4 οθόνες). Μία σκάλα πιο κάτω, ίδια ιεραρχία. Τα mono labels μένουν ως έχουν — είναι ήδη στο όριο αναγνωσιμότητας. */ body { line-height: 1.55; } .section { padding: 56px 0; } .section-head { margin-bottom: 30px; } .section-title { font-size: clamp(1.95rem, 8.4vw, 2.4rem); } .company-lead h2 { font-size: 2rem; } .company-copy p { font-size: 1rem; margin-bottom: 18px; } .company-copy p:first-child { font-size: 1.12rem; } .val-mod h3 { font-size: 1.28rem; } .val-mod p, .adv-card p { font-size: 0.98rem; } .adv-card h3 { font-size: 1.3rem; } .leafband-quote p { font-size: clamp(1.5rem, 7vw, 2rem); } .pcard h2 { font-size: 1.45rem; } .pcard p { font-size: 0.92rem; } /* Μονόστηλη κάρτα σε κινητό: το βάθρο χαμηλώνει για να μη σπρώχνει το κείμενο εκτός οθόνης, το μπουκάλι μένει το ίδιο ευανάγνωστο. */ .pcard-stage { height: 210px; margin-bottom: 20px; } .crop-cats { gap: 26px; } .crop-cat h3 { font-size: 0.95rem; margin-bottom: 14px; } .training h2, .contact-info h2 { font-size: 2rem; } .training p { font-size: 1rem; } .training-aside li { padding: 13px 0; font-size: 0.98rem; } .contact-form .fh { font-size: 1.4rem; } .contact-form .fsub { margin-bottom: 22px; } } /* ---------- Εισαγωγή σελίδας προϊόντων ---------- Ήταν σκέτος τίτλος πάνω από τα φίλτρα. Τώρα ο τίτλος κρατά το αριστερό μισό και δεξιά κάθεται μια στήλη με τα τρία νούμερα που δίνουν μέγεθος στον κατάλογο. */ /* Η σελίδα ξεκινούσε με το padding ενός εσωτερικού section, δηλαδή με μισή οθόνη κενό κάτω από το header. Ίδιο ύψος με την αρθρογραφία. */ .products-page { min-height: 80vh; padding-top: clamp(48px, 8vw, 88px); } .products-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.55fr); gap: clamp(28px, 6vw, 72px); align-items: end; padding-bottom: clamp(32px, 5vw, 52px); margin-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--sage-line); } .products-intro .section-head { margin-bottom: 0; } /* Το .callout αντλεί τα margin του από τους κανόνες `.prose > * + .callout`, που στη σελίδα καταστήματος δεν ισχύουν — εδώ δεν υπάρχει .prose γονέας. Τα δηλώνουμε ρητά, αλλιώς η δήλωση κατάστασης κολλάει πάνω στο lead. */ .shop-status { margin-top: clamp(24px, 3vw, 32px); } .shop-status p { margin: 0; } .pi-kicker { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin: 0 0 20px; display: flex; align-items: center; gap: 16px; } .pi-kicker::before { content: ""; width: 40px; height: 1px; background: var(--lime); flex: none; } .pi-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .pi-facts li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--paper-3); } .pi-facts li:last-child { border-bottom: 0; padding-bottom: 0; } .pi-facts .k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); max-width: 12ch; line-height: 1.4; } .pi-facts b { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 600; color: var(--green); line-height: 1; letter-spacing: -0.02em; } @media (max-width: 860px) { .products-intro { grid-template-columns: 1fr; align-items: start; gap: 30px; } .pi-facts { grid-template-columns: repeat(3, 1fr); gap: 16px; } .pi-facts li { flex-direction: column; gap: 6px; border-bottom: 0; padding-bottom: 0; } .pi-facts .k { max-width: none; } } @media (max-width: 460px) { .pi-facts { grid-template-columns: 1fr 1fr; } } /* ============================================================ ΚΑΤΑΣΤΗΜΑ — κατάλογος, καλάθι, ταμείο ============================================================ */ /* Ίδιο ξεκίνημα με τη σελίδα προϊόντων — αλλιώς η σελίδα άνοιγε με μισή οθόνη κενό. */ .shop-page { min-height: 80vh; padding-top: clamp(48px, 8vw, 88px); } .nav-cart { position: relative; flex: none; margin-left: 8px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); border: 1px solid var(--sage-line); background: var(--paper); transition: color .2s, border-color .2s, background .2s; } .nav-cart svg { width: 21px; height: 21px; } .nav-cart:hover { color: var(--green); border-color: var(--green); background: var(--mint); } .cart-badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 100px; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; background: var(--green); color: #fff; } .cart-badge[hidden] { display: none; } /* ---------- Όσο ο κατάλογος είναι άδειος ---------- Η σελίδα ήταν ένα κουτί με διακεκομμένο περίγραμμα σε λευκό κενό. Τώρα κρατάει ένα πραγματικό μήνυμα πάνω και από κάτω ολόκληρο τον κατάλογο σε προεπισκόπηση, ώστε να μοιάζει με κατάστημα και όχι με placeholder. Όταν μπουν τιμές στο SHOP_PRODUCTS, και τα δύο εξαφανίζονται μόνα τους. */ .shop-soon { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--mint), var(--paper-2) 70%); border: 1px solid var(--sage-line); border-radius: var(--radius); padding: clamp(30px, 5vw, 56px) clamp(24px, 4vw, 56px); margin-bottom: clamp(48px, 7vw, 80px); } /* Διακοσμητικοί δακτύλιοι — κρατούν το πλάτος του πάνελ ζωντανό χωρίς εικόνα. */ .shop-soon::after { content: ""; position: absolute; right: -110px; top: -90px; width: 330px; height: 330px; border-radius: 50%; border: 1px solid var(--lime); opacity: 0.45; pointer-events: none; box-shadow: 0 0 0 40px color-mix(in srgb, var(--lime) 8%, transparent); } .shop-soon-in { position: relative; max-width: 56ch; } .shop-soon h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.02em; margin: 12px 0 14px; } .shop-soon p { color: var(--ink-soft); margin: 0 0 28px; line-height: 1.65; } .shop-soon-actions { display: flex; flex-wrap: wrap; gap: 12px; } .shop-preview-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--sage-line); } .shop-preview-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; letter-spacing: -0.02em; } .shop-preview-head p { margin: 0; max-width: 52ch; font-size: 0.95rem; color: var(--ink-mute); } .pcard .shop-ask { margin-top: 18px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); } /* Οι τρεις σιγουριές της παραγγελίας — αποστολή, πληρωμή, υποστήριξη. */ .shop-trust { list-style: none; margin: clamp(48px, 7vw, 84px) 0 0; padding: clamp(28px, 4vw, 44px) 0 0; border-top: 1px solid var(--sage-line); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(22px, 3vw, 44px); } .shop-trust li { display: flex; gap: 14px; align-items: flex-start; } .shop-trust svg { width: 24px; height: 24px; flex: none; color: var(--green); margin-top: 3px; } .shop-trust strong { display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; margin-bottom: 4px; } .shop-trust span { color: var(--ink-mute); font-size: 0.92rem; line-height: 1.55; } .shop-price { font-family: var(--mono); font-size: 1.35rem; font-weight: 500; color: var(--green-deep); margin: 8px 0 20px; } .shop-add { width: 100%; padding: 14px 20px; font-size: 0.95rem; margin-top: auto; } /* ---------- Συρτάρι καλαθιού ---------- */ .cart-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; justify-content: flex-end; background: rgba(10,14,12,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: ovIn .25s ease; } .cart-panel { width: min(460px, 100%); height: 100%; display: flex; flex-direction: column; background: var(--paper); box-shadow: var(--shadow-float); animation: cartIn .3s var(--ease); } @keyframes cartIn { from { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .cart-overlay, .cart-panel { animation: none; } } .cart-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; padding: 22px clamp(18px, 4vw, 28px); border-bottom: 1px solid var(--paper-3); } .cart-head h2 { font-size: 1.4rem; } .cart-head .modal-x { position: static; float: none; margin: 0; } .cart-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(18px, 4vw, 28px); } .cart-empty, .cart-done { text-align: center; padding: 40px 0; color: var(--ink-soft); } .cart-empty p { margin: 0 0 20px; } .cart-done p { margin: 0 0 16px; line-height: 1.6; text-align: left; } .cart-done-k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); text-align: left; } .cart-done .btn { margin-top: 12px; } .cart-lines { list-style: none; margin: 0; padding: 0; } .cart-line { display: grid; grid-template-columns: 1fr auto auto; gap: 12px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--paper-3); } .cl-name { display: block; font-weight: 500; color: var(--ink); } .cl-pack { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-mute); margin-top: 3px; } .cl-qty { display: flex; align-items: center; gap: 4px; border: 1px solid var(--sage-line); border-radius: 100px; padding: 3px; } .cl-qty button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; color: var(--ink-soft); transition: background .2s, color .2s; } .cl-qty button:hover { background: var(--mint); color: var(--green-deep); } .cl-qty span { min-width: 22px; text-align: center; font-family: var(--mono); font-size: 0.9rem; } .cl-sum { font-family: var(--mono); font-size: 0.95rem; color: var(--ink); white-space: nowrap; } .cart-foot { flex: none; padding: 20px clamp(18px, 4vw, 28px) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--paper-3); background: var(--paper-2); } .cart-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 0.95rem; color: var(--ink-soft); } .cart-row b { font-family: var(--mono); font-weight: 500; color: var(--ink); } .cart-row.is-total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--sage-line); font-size: 1.05rem; color: var(--ink); } .cart-row.is-total b { font-size: 1.2rem; color: var(--green-deep); } .cart-hint { margin: 4px 0 0; font-size: 0.8rem; color: var(--ink-mute); } .cart-cta { width: 100%; margin-top: 16px; } /* ---------- Ταμείο ---------- */ .ck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .ck-grid .field:first-child, .ck-grid .field:nth-child(4) { grid-column: 1 / -1; } .ck-sect { margin: 8px 0 24px; } .ck-radio, .ck-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; cursor: pointer; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; } .ck-check { border-top: 1px solid var(--paper-3); } .ck-radio input, .ck-check input { margin-top: 3px; accent-color: var(--green); flex: none; width: 17px; height: 17px; } .ck-radio span { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .ck-radio b { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; color: var(--green-deep); } .ck-radio.is-off { opacity: .5; cursor: not-allowed; } .ck-radio.is-off b { color: var(--ink-mute); } .ck-check a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } .ck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .ck-actions .btn { flex: 1 1 150px; justify-content: center; padding: 15px 22px; font-size: 0.95rem; } @media (max-width: 480px) { .ck-grid { grid-template-columns: 1fr; } } /* ============================================================ COOKIE BANNER ============================================================ */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 0 var(--gut) calc(16px + env(safe-area-inset-bottom)); animation: cookieIn .4s var(--ease); } .cookie-banner[hidden] { display: none; } /* Το μπάνερ (z-index 90) κάθεται πάνω από το ανοιχτό menu (55) και σκέπαζε το CTA «Επικοινωνία». Όσο το menu είναι ανοιχτό φεύγει· επιστρέφει μόλις κλείσει. */ .menu-open .cookie-banner { display: none; } @keyframes cookieIn { from { transform: translateY(110%); } } @media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } } .cookie-inner { width: min(100%, var(--wrap)); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; background: var(--paper); border: 1px solid var(--sage-line); border-radius: var(--radius); box-shadow: var(--shadow-float); padding: 20px clamp(20px, 3vw, 28px); } .cookie-text { flex: 1 1 320px; } .cookie-text strong { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; } .cookie-text p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); } .cookie-text a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; } .cookie-actions .btn { padding: 13px 24px; font-size: 0.92rem; } @media (max-width: 620px) { .cookie-banner { padding-inline: 12px; } .cookie-inner { padding: 18px; gap: 16px; } .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1 1 0; justify-content: center; } } /* focus visibility */ :focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; } /* ============================================================ ΑΠΟΔΟΣΗ ΣΕ ΚΙΝΗΤΟ Το backdrop-filter είναι το ακριβότερο πράγμα στη σελίδα: η κάψουλα του header είναι sticky πάνω από περιεχόμενο που κυλά, οπότε το blur(24px) ξαναϋπολογίζεται σε ΚΑΘΕ frame scroll — σε μεσαίο Android αυτό μόνο του τρώει το budget των 16ms. Το ίδιο και το blur(10px) της μπάρας καλλιεργειών, που κάθεται πάνω σε ένα marquee που τρέχει συνέχεια. Σε desktop δεν φαίνεται· σε κινητό είναι το "κολλάει". Σε κινητό τα κάνουμε αδιαφανή: οπτικά σχεδόν ίδιο (το header ούτως ή άλλως γίνεται 95% opaque μόλις κυλήσεις), αλλά μηδέν GPU δουλειά ανά frame. ============================================================ */ @media (max-width: 1024px) { .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--glass) 95%, transparent); } .site-header.scrolled .nav { background: var(--glass); } .crop-strip { backdrop-filter: none; -webkit-backdrop-filter: none; } .mobile-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Το will-change κρατά μόνιμο compositor layer· χρειάζεται μόνο όσο κυλά. */ .crop-strip .track { will-change: auto; } } /* Η αρχική είναι ~10.300px σε κινητό: ο browser έκανε layout + paint και για τα 10.300 ενώ φαίνονται 844. Με content-visibility παραλείπει ό,τι είναι εκτός οθόνης και το ζωγραφίζει μόλις πλησιάσει. Τρία πράγματα που κρατούν το μηδέν-οπτική-αλλαγή: 1) `section.section` — το element selector αποκλείει από μόνο του τα `main.section` των υπόλοιπων σελίδων, που είναι ΟΛΗ η σελίδα και ξεκινούν μέσα στο viewport (μηδέν όφελος, σκέτο ρίσκο στο scrollHeight). 2) Το .leafband ΔΕΝ μπαίνει: έχει position:fixed παιδί, και το containment θα το έκανε containing block και θα σκότωνε το καρφωμένο parallax. 3) contain-intrinsic-size = πραγματικά μετρημένα ύψη στα 390px, όχι στρογγυλά νούμερα — αλλιώς τα anchor jumps (#crops, #contact, το marquee) προσγειώνονται λάθος στην πρώτη κύλιση. Το `auto` κρατά το αληθινό ύψος μετά το πρώτο render. ΠΡΟΣΟΧΗ: το contain-intrinsic-size είναι **content box** — τα μετρημένα offsetHeight θέλουν αφαίρεση του padding (112px σε κινητό), αλλιώς κάθε ενότητα υπερεκτιμάται και η σελίδα βγαίνει 600px ψηλότερη απ' όσο είναι. */ section.section, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 1000px; } .section.company { contain-intrinsic-size: auto 1224px; } .section.adv { contain-intrinsic-size: auto 1110px; } .section.products-teaser { contain-intrinsic-size: auto 1246px; } .section.crops { contain-intrinsic-size: auto 2238px; } .section.training { contain-intrinsic-size: auto 934px; } .section.contact { contain-intrinsic-size: auto 1501px; } .site-footer { contain-intrinsic-size: auto 838px; } /* Η field.jpg είναι 1920×1080 — σε οθόνη 390px κατεβάζει και αποκωδικοποιεί 5× περισσότερα pixel από όσα δείχνει. Ίδιο κάδρο, μισό βάρος (203KB → 64KB). */ @media (max-width: 900px) { .leafband-bg { background-image: url('assets/field-m.jpg'); } .hero-video { background-image: url('assets/field-m.jpg'); } } /* Το Safari σε iOS δεν κρατά αξιόπιστα το clip-path πάνω σε position:fixed παιδί κατά το rubber-band overscroll: στα άκρα του scroll (πάνω από την κορυφή, κάτω από το τέλος) η .leafband-bg ξεφεύγει στιγμιαία από τη ζώνη της και ζωγραφίζεται πάνω σε ολόκληρο το viewport — φαίνεται σαν το header να "τρυπάει" και σαν η φωτογραφία να είναι background ολόκληρου του site. Σε κινητό/αφή δεν έχει νόημα το καρφωμένο parallax ούτως ή άλλως (η μπάρα του Safari αλλάζει συνέχεια το ύψος viewport), οπότε absolute αντί για fixed: κυλά μαζί με τη ζώνη σαν κανονικό περιεχόμενο, μηδέν πιθανότητα να ξεφύγει. */ @media (max-width: 900px), (pointer: coarse) { .leafband-bg { position: absolute; } }