/* ============================================================ ΤΣΑΒΑΡΗΣ — Αποφράξεις | Landing page styles (below the fold) Critical CSS (tokens, header, hero, sticky bar, buttons) is inlined in of index.html. This file styles the rest. ============================================================ */ /* ---------- Sections & typography ---------- */ .section { padding: 52px 0; } .section-alt { background: var(--color-bg-alt); } h2 { margin: 0 0 28px; font-size: clamp(28px, 5vw, 40px); font-weight: 800; line-height: 1.2; color: var(--color-primary); } h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.3; } p { margin: 0 0 16px; } .btn-wide { width: 100%; max-width: 640px; margin: 0 auto; } /* Stacked call CTA — phone number over label, like the sticky bar, so the wide "ΚΑΛΕΣΤΕ ΤΩΡΑ" buttons never wrap awkwardly on narrow mobile screens. */ .btn-stack { flex-direction: column; gap: 3px; line-height: 1.15; } .btn-stack .cta-phone { display: inline-flex; align-items: center; gap: 8px; } .btn-stack .dni-phone { font-size: 27px; font-weight: 800; letter-spacing: .5px; } .btn-stack .cta-label { font-size: 18px; font-weight: 700; letter-spacing: .05em; } /* Viber button (enable in index.html — see README) */ .btn-viber { background: #7360F2; color: #fff; margin-top: 12px; box-shadow: 0 6px 18px rgba(115, 96, 242, .35); } .btn-viber:hover { background: #5B4AD0; } /* ---------- 3. Services ---------- */ .services-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .service-card { background: #fff; border: 1px solid #E4E9F0; border-radius: 14px; padding: 24px 22px; box-shadow: 0 2px 10px rgba(24, 32, 81, .06); } .service-icon { width: 48px; height: 48px; color: var(--color-brand-cyan); margin-bottom: 12px; } .service-card p { font-size: 18px; margin-bottom: 14px; } .service-card a { display: inline-block; min-height: 44px; font-size: 18px; font-weight: 700; color: var(--color-cta-text); text-decoration: underline; text-underline-offset: 4px; } .service-card a:hover { color: var(--color-primary); } @media (min-width: 640px) { .services-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 980px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- 4. Πώς δουλεύουμε ---------- */ .steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 22px; counter-reset: step; } .steps-list li { position: relative; background: #fff; border-radius: 14px; padding: 24px 22px 18px 22px; border: 1px solid #E4E9F0; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 26px; font-weight: 800; } .steps-list p { font-size: 18px; margin: 0; } @media (min-width: 820px) { .steps-list { grid-template-columns: repeat(3, 1fr); } } /* ---------- 5. Trust block ---------- */ .trust-cols { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; margin-bottom: 36px; } .trust-photo img, .trust-map { border-radius: 14px; box-shadow: 0 4px 18px rgba(24, 32, 81, .12); } .trust-map { margin: 6px 0 20px; } .trust-text p { font-size: 20px; } .trust-call .btn { max-width: 420px; } @media (min-width: 820px) { .trust-cols { grid-template-columns: 1fr 1fr; gap: 40px; } } .stats-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 26px 22px; background: var(--color-primary); border-radius: 14px; color: #fff; text-align: center; } .stat dt { font-size: 17px; font-weight: 400; opacity: .85; order: 2; } .stat dd { margin: 0 0 4px; font-size: 40px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat { display: flex; flex-direction: column; position: relative; } .stat-star { color: var(--color-accent); } /* Clickable "Κριτικές στο Google" stat — whole tile links out via a stretched anchor */ .stat-link { color: #fff; text-decoration: none; } .stat-link::after { content: ''; position: absolute; inset: 0; } .stat-link .stat-star { color: var(--color-accent); } .stat-ext { font-size: .55em; vertical-align: super; opacity: .85; } .stat-reviews:hover .stat-link, .stat-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 640px) { .stats-row { grid-template-columns: repeat(3, 1fr); } } /* ---------- 6. Reviews ---------- */ .rating-badge { display: inline-block; margin-left: 10px; padding: 4px 14px; border-radius: 999px; background: var(--color-primary); color: var(--color-accent); font-size: 22px; font-weight: 800; vertical-align: middle; white-space: nowrap; } .reviews-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .review-card { margin: 0; background: #fff; border: 1px solid #E4E9F0; border-radius: 14px; padding: 22px; box-shadow: 0 2px 10px rgba(24, 32, 81, .06); } .review-stars { margin: 0 0 10px; color: #D97706; /* darker gold on white — passes 3:1 non-text contrast */ font-size: 24px; letter-spacing: 3px; } .review-card blockquote { margin: 0 0 12px; font-size: 19px; line-height: 1.55; } .review-card figcaption { font-size: 17px; font-weight: 700; color: var(--color-primary); } .review-source { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .review-source:hover { text-decoration-thickness: 2px; } .ext-arrow { font-size: .85em; } .reviews-cta { text-align: center; margin: 28px 0 0; } .reviews-cta-link { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 12px 26px; border: 2px solid var(--color-primary); border-radius: 10px; color: var(--color-primary); font-size: 19px; font-weight: 700; text-decoration: none; } .reviews-cta-link:hover { background: var(--color-primary); color: #fff; } @media (min-width: 820px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- 7. Video / work (κάθετο 9:16 reel) ---------- */ .work-lead { font-size: 19px; margin: 0 0 20px; } .work-video-wrap { max-width: 340px; margin: 0 auto 26px; } .work-video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; background: var(--color-primary-dark); object-fit: cover; box-shadow: 0 12px 32px rgba(24, 32, 81, .20); } .work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .work-grid img { border-radius: 10px; width: 100%; } @media (min-width: 820px) { .work-grid { grid-template-columns: repeat(4, 1fr); } .work-video-wrap { max-width: 380px; } } /* ---------- 8. Coverage ---------- */ .areas-list { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; } .areas-list li { padding: 6px 14px; background: #fff; border: 1px solid #DDE4EC; border-radius: 999px; font-size: 17px; } .areas-list li.area-active { order: -1; font-weight: 800; border-color: var(--color-brand-cyan); border-width: 2px; box-shadow: inset 0 -3px 0 var(--color-brand-cyan); } .mid-cta { text-align: center; } .mid-cta .live-badge { margin-top: 14px; color: var(--color-live-text); } /* ---------- 9. FAQ ---------- */ .faq-item { border: 1px solid #E4E9F0; border-radius: 12px; margin-bottom: 12px; background: #fff; overflow: hidden; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 16px 20px; font-size: 20px; font-weight: 700; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; content: '+' / ''; /* alt-text syntax: keep the glyph out of the accessible name */ flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-primary); font-size: 26px; font-weight: 700; } .faq-item[open] summary::after { content: '−'; content: '−' / ''; } .faq-item[open] summary { border-bottom: 1px solid #EEF2F7; } .faq-item p { padding: 16px 20px; margin: 0; font-size: 19px; } /* ---------- 10. Contact form ---------- */ .contact-form { max-width: 640px; } .form-field { margin-bottom: 18px; } .form-field label { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 700; } .form-field input, .form-field textarea { width: 100%; padding: 14px 16px; min-height: 58px; border: 2px solid #5B6B7F; /* 5.4:1 — visible field boundary (WCAG 1.4.11) */ border-radius: 10px; background: #fff; font-family: var(--font); font-size: 19px; color: var(--color-text); } .form-field textarea { min-height: 120px; resize: vertical; } .form-field input:focus, .form-field textarea:focus { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 0; } /* Honeypot: visually removed, still in the DOM for bots */ .form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: 17px; margin-top: 12px; text-align: center; } .form-error { padding: 14px 16px; border-radius: 10px; background: #FDECEA; border: 1px solid #E5B4AE; color: #8C2318; font-size: 18px; font-weight: 700; } .form-error a { color: #8C2318; } .form-success { max-width: 640px; padding: 26px 22px; border-radius: 14px; background: #EAF9F0; border: 2px solid var(--color-live); font-size: 22px; font-weight: 700; color: #14532D; } .form-success p { margin: 0; } .success-check { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 8px; border-radius: 50%; background: var(--color-live); color: #fff; font-size: 22px; } .contact-alt { margin-top: 26px; font-size: 20px; font-weight: 700; } .contact-phone { color: var(--color-primary); font-size: 26px; font-weight: 800; text-decoration: none; white-space: nowrap; } .contact-phone:hover { text-decoration: underline; } /* ---------- Final CTA ---------- */ .final-cta { background: var(--color-primary); color: #fff; text-align: center; } .final-cta h2 { color: #fff; } .final-cta .live-badge { margin-top: 14px; color: #fff; } /* ---------- 11. Footer ---------- */ .site-footer { background: var(--color-primary-dark); color: #fff; padding: 40px 0 30px; text-align: center; font-size: 18px; } .footer-logo { height: 64px; width: auto; margin: 0 auto 14px; background: #fff; border-radius: 12px; padding: 6px; } .footer-address { opacity: .9; } .footer-phone a { color: #fff; font-size: 28px; font-weight: 800; text-decoration: none; } .footer-email a { color: #fff; } .footer-legal { margin-top: 18px; font-size: 17px; opacity: .75; } .footer-legal a { color: #fff; } /* ---------- Consent bar (above the sticky call bar, never covering it) ---------- */ .consent-bar[hidden] { display: none !important; } .consent-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom)); z-index: 49; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 12px 16px; background: #fff; border-top: 1px solid #DDE4EC; box-shadow: 0 -3px 14px rgba(0, 0, 0, .12); } .consent-bar p { margin: 0; font-size: 17px; } .consent-actions { display: flex; gap: 10px; } .consent-btn { min-height: 44px; padding: 8px 20px; border-radius: 8px; border: 2px solid var(--color-primary); font-family: var(--font); font-size: 17px; font-weight: 700; cursor: pointer; } .consent-accept { background: var(--color-primary); color: #fff; } .consent-decline { background: #fff; color: var(--color-primary); } @media (min-width: 900px) { .consent-bar { bottom: 0; } } /* ---------- Animations (progressive enhancement, JS adds classes) ---------- */ /* Section reveal: fade-up 12px. Armed only when script.js runs (html.enhanced) AND motion is allowed — so a failed script load can never hide content. Hero is excluded (must paint instantly for LCP). */ @media (prefers-reduced-motion: no-preference) { .enhanced .section { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; } .enhanced .section.revealed { opacity: 1; transform: translateY(0); } /* Gold star shimmer: one sweep when the hero trust cluster enters the viewport */ .stars::after { content: ''; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); } .js-shimmer.shimmer-run .stars::after { animation: starShine 1.1s ease-out 1 forwards; } @keyframes starShine { from { transform: translateX(-110%); } to { transform: translateX(110%); } } } /* ---------- Reduced motion: kill everything (also covers inline-CSS animations) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .enhanced .section { opacity: 1; transform: none; } html { scroll-behavior: auto; } }