/* Theme Name: Karasoulos Cars Theme URI: https://karasouloscars.gr Author: Karasoulos Cars Dev Description: Custom WordPress theme για το Soulos Unique Cars — μεταχειρισμένα αυτοκίνητα στην Πάτρα. Premium navy + gold design system. Version: 0.5.3 Requires at least: 6.0 Requires PHP: 8.1 License: Proprietary Text Domain: karasoulos */ /* ========================================================================= AGGRESSIVE Overrides + defensive fixes πάνω στο assets/css/design.css Targets: phone wrap, h1 size, hero column alignment, overflow control ========================================================================= */ /* --- Phone in header: μένει σε μία γραμμή και δεν συμπιέζεται --- */ .header__phone { white-space: nowrap; flex-shrink: 0; } .header__phone span { white-space: nowrap; } /* --- Hero layout: FORCE single column, full width, left-aligned --- */ .hero { overflow-x: hidden; } .hero__inner { display: block !important; width: 100% !important; text-align: left !important; } .hero__copy { width: 100% !important; max-width: 100% !important; margin: 0 !important; text-align: left !important; } @media (min-width: 1024px) { .hero__copy { max-width: 860px !important; } } /* Αφήνουμε χώρο δεξιά για το section-watermark — όπως κάνει το .page-head */ @media (min-width: 901px) { .hero__copy { padding-right: clamp(180px, 22vw, 360px) !important; } } @media (max-width: 900px) { /* Στο mobile το watermark είναι πάνω κεντραρισμένο — αφήνουμε top padding */ .hero__copy { padding-top: clamp(140px, 32vw, 210px) !important; } } /* Πιο διακριτικό watermark στο hero για να μην ανταγωνίζεται το text */ .hero .section-watermark { opacity: 0.16 !important; } /* ========================================================================= Form fields — fix για labels και textareas στις contact/sell σελίδες ========================================================================= */ /* Το μέσα σε παίζει ρόλο label — μικρό + dim */ .field > span { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-faint); display: block; font-weight: 600; } /* Textarea στα forms — ίδιο styling με input */ .field textarea { appearance: none; background: transparent; border: 0; padding: 0; font-size: 15px; font-weight: 500; color: var(--ivory); outline: none; resize: vertical; min-height: 80px; line-height: 1.5; font-family: inherit; width: 100%; } .field input::placeholder, .field textarea::placeholder { color: var(--ivory-faint); } /* Section titles σε contact/sell όταν λείπει η class */ .contact-page h2, .section h2 { color: var(--ivory); } /* ========================================================================= Quick search (homepage) — defensive: τα κουμπιά να είναι πάντα clickable ========================================================================= */ .search { pointer-events: auto !important; } .search__card, .search__card * { pointer-events: auto !important; } .search__tab, .search__submit, .search__card button, .budget-chips button { cursor: pointer; position: relative; z-index: 2; } .search__tab:disabled, .search__submit:disabled { cursor: not-allowed; } /* --- H1: aggressive size cap + overflow protection --- */ .hero h1 { font-size: clamp(28px, 4.5vw, 56px) !important; line-height: 1.1 !important; overflow-wrap: break-word !important; word-break: normal; max-width: 100% !important; margin-block: 20px !important; } .hero h1 .serif { display: block !important; overflow-wrap: break-word !important; } /* --- Hero meta: don't overflow --- */ .hero__lede, .hero__meta { max-width: 100% !important; } /* --- Global overflow guard --- */ html, body { overflow-x: hidden; max-width: 100vw; } /* --- Extension guard: ορισμένα Chrome extensions (Smart Unit Converter κ.ά.) εφαρμόζουν display: grid στο , σπάζοντας όλο το layout. Force block. --- */ body { display: block !important; } /* --- Mobile header tweaks --- */ @media (max-width: 900px) { .site-header__inner { gap: 12px; } .header__phone { padding: 8px 14px; font-size: 12px; } .header__phone svg { width: 12px; height: 12px; } .brand { gap: 10px; min-width: 0; } .brand__mark { width: 38px; height: 38px; flex-shrink: 0; } .brand__name { font-size: 13px; letter-spacing: 0.12em; } .brand__tag { font-size: 11px; } } /* Very small screens — hide brand text, keep only the circular logo */ @media (max-width: 480px) { .brand__text { display: none; } .header__phone span { display: none; } /* keep only icon */ .header__phone { padding: 8px; } .header__phone svg { width: 16px; height: 16px; } } /* --- Tiny screens --- */ @media (max-width: 640px) { .hero h1 { font-size: clamp(24px, 7vw, 40px) !important; } .hero { padding-block: clamp(40px, 9vw, 80px) clamp(48px, 11vw, 90px); } .hero__meta { gap: 20px !important; } } /* ========================================================================= Cookie banner ========================================================================= */ .cookie-banner { position: fixed; bottom: 20px; left: 20px; right: 20px; z-index: 1000; background: var(--ink); border: 1px solid var(--hair); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); padding: 24px; max-width: 760px; margin: 0 auto; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .cookie-banner.is-pending { transform: translateY(40px); opacity: 0; pointer-events: none; } .cookie-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .cookie-banner.is-hidden { display: none; } .cookie-banner__inner { display: grid; gap: 16px; } .cookie-banner__copy h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; } .cookie-banner__copy p { color: var(--ivory-muted); font-size: 13px; margin: 0; line-height: 1.55; } .cookie-banner__copy a { color: var(--gold-bright); text-decoration: underline; } .cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie-banner__actions .btn { flex: 1; min-width: 140px; padding: 12px 18px; } @media (min-width: 760px) { .cookie-banner__inner { grid-template-columns: 1fr auto; align-items: center; gap: 28px; } .cookie-banner__actions .btn { flex: 0 0 auto; } } /* ========================================================================= Form privacy-consent checkbox ========================================================================= */ .form-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 13px; color: var(--ivory-muted); line-height: 1.5; } .form-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; } .form-consent a { color: var(--gold-bright); text-decoration: underline; } /* ========================================================================= Legal pages — readable prose ========================================================================= */ .legal-prose { max-width: 760px; margin: 0 auto; color: var(--ivory-muted); line-height: 1.7; } .legal-prose h2 { color: var(--ivory); font-size: 22px; margin: 32px 0 12px; } .legal-prose h3 { color: var(--ivory); font-size: 16px; margin: 20px 0 8px; } .legal-prose p { margin: 0 0 14px; } .legal-prose ul, .legal-prose ol { margin: 0 0 14px; padding-left: 22px; } .legal-prose li { margin-bottom: 6px; } .legal-prose strong { color: var(--ivory); } .legal-prose a { color: var(--gold-bright); text-decoration: underline; } .legal-prose .last-updated { color: var(--ivory-faint); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 24px; }