.elementor-kit-6{--e-global-color-primary:#0B4457;--e-global-color-secondary:#2C8FA1;--e-global-color-text:#0C333F;--e-global-color-accent:#FF6E32;--e-global-color-645e821:#0E6076;--e-global-color-eebb6cc:#041C26;--e-global-color-7f89702:#7BD3D8;--e-global-color-8019ac4:#4A6B76;--e-global-color-7550acd:#EBF2F4;--e-global-color-7f071c7:#FFFFFF;--e-global-color-0d475d6:#0B445721;--e-global-color-f1594ff:#E85D24;--e-global-color-db9f508:#C4530F;--e-global-typography-primary-font-family:"Geologica";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Geologica";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Geologica";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Geologica";--e-global-typography-accent-font-weight:500;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-6 p{margin-block-end:0px;}.elementor-kit-6 a{color:#2C8FA1;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-6 a:hover{color:var( --e-global-color-primary );}.elementor-kit-6 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-6 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-6 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-6 img{border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6 a{font-size:var( --e-global-typography-accent-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 a{font-size:var( --e-global-typography-accent-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ViewPoint · mobile fix · 07/09/2026 Nothing changes above 768px. Desktop stays as it is. */ @media (max-width:767px){ /* 1. Headings still used the desktop size on phones */ .elementor-widget-heading h1.elementor-heading-title{font-size:2rem!important;line-height:1.18!important} .elementor-widget-heading h2.elementor-heading-title{font-size:1.55rem!important;line-height:1.22!important} .elementor-widget-heading h3.elementor-heading-title{font-size:1.15rem!important;line-height:1.3!important} .vp-np-head h2,.vp-epag-head h2{font-size:1.55rem!important;line-height:1.24!important} /* 2. Long Greek words must not run off the right edge */ .elementor-heading-title,.vp-srv h3,.vp-step b,.vp-obj-q,.vp-np-head h2,.vp-epag-head h2{overflow-wrap:break-word} /* 3. The big step number */ .vp-step-n{font-size:2.75rem!important} /* 4. A widget set to part width on desktop stayed narrow on the phone */ .elementor-widget__width-initial{width:100%!important;max-width:100%!important} /* 5. Button pairs sat side by side at 143px wide and wrapped to three lines */ .e-con:has(> .elementor-widget-button){flex-direction:column!important;align-items:stretch!important} .elementor-widget-button .elementor-button{width:100%!important;justify-content:center!important;text-align:center} /* 6. Phone and e-mail links were 20-24px tall. A thumb needs 44px. */ a[href^="tel:"],a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px} } /* ViewPoint · mobile nav · 07/09/2026 ADD this under the block you already pasted. Do not delete the first one. Nothing changes above 768px. */ @media (max-width:767px){ /* 1. The open menu could not scroll, so «Ποιοι Είμαστε», «Benefit Club» and «Δωρεάν Εκτίμηση» sat below the screen with no way to reach them. */ .e-n-menu-wrapper{overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background-color:var(--e-global-color-7f071c7)!important} /* 2. The Υπηρεσίες panel was 55% white with a 24px blur. The page underneath read straight through it. Now solid white. */ .e-n-menu-content>*{background-color:var(--e-global-color-7f071c7)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} /* 3. The hamburger was 25x25px. A thumb needs 44x44. */ .e-n-menu-toggle{min-width:44px!important;min-height:44px!important} /* 4. The top menu rows were 24px tall. */ .e-n-menu-title{min-height:44px!important;display:flex!important;align-items:center!important} /* 5. The Υπηρεσίες submenu links were 36px tall. */ .e-n-menu-content a{min-height:44px;display:flex;align-items:center} } /* ═════════════════════════════════════════════════════════════════════ ViewPoint · v9 · 08/09/2026 This block is ADDED under the two blocks already in Site Settings. Nothing already there is deleted. Every number below was measured on stag1ng.viewpointins.gr on 08/09, 53 pages, 375px and 1440px. ═════════════════════════════════════════════════════════════════════ */ @media (max-width:767px){ /* ── v9-1 · SPACE ON THE SIDES ───────────────────────────────────────── Measured: 647 top-level containers across all 53 pages. Every single one has padding-left 0 and padding-right 0, at both widths. Text sat at 0px from the screen edge in 433 places. Padding on the container keeps colour bands and photos full width. It only moves content in. The rule is aimed at the page body and the footer only. It must NOT be written as .e-con.e-parent with a header override to 0: measured 08/09, that stripped the nav row's own 12px and pushed the logo to x=0. */ .elementor[data-elementor-type="wp-page"] > .e-con.e-parent, .elementor-location-footer .e-con.e-parent{ padding-left:16px!important; padding-right:16px!important; } /* ── v9-2 · THE ΥΠΗΡΕΣΙΕΣ PANEL: ONE SCROLLBAR ──────────────────────── Measured with the menu open at 375px: TWO scroll boxes. .e-n-menu-wrapper 850 tall in a 718 box (this one stays) the panel container 955 tall in a 583 box (this one goes) Three panel links could not be reached by scrolling either box. The panel also still carried the desktop glass frame: a 20px radius, a 1px white border and a 40px shadow, on a full-width white sheet. */ .e-n-menu-content > .e-con{ overflow:visible!important; overflow-x:visible!important; overflow-y:visible!important; max-height:none!important; height:auto!important; width:100%!important; max-width:100%!important; border:0!important; border-radius:0!important; box-shadow:none!important; background-color:#FFFFFF!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } /* ── v9-3 · THE HERO BAR COMES BACK ON THE PHONE ────────────────────── CORRECTED 08/09 after re-measuring. The first version of this block was wrong: it only un-hid .vpbar-mail and .vpbar-addr. Measured at 375px: the WHOLE bar widget is display:none, and it is hidden by Elementor's own "hide on tablet / hide on mobile" switch on the widget (classes elementor-hidden-tablet elementor-hidden-mobile), not by CSS. So all FOUR links were off screen, not two, and the empty strip still ate 32px of the 113px header. The bar comes back with the two long links as their icons, so four links fit one row. The nav row below gives up padding so the header stays under 120px with a 44px tap row. */ .vp-topbar .elementor-widget{ display:block!important; } .vp-topbar, .vp-topbar > .e-con-inner{ padding-top:0!important; padding-bottom:0!important; } .elementor-location-header .vp-topbar ~ .e-con.e-parent{ padding-top:6px!important; padding-bottom:6px!important; } /* The logo is 69px tall. With the contact bar back, 69px + the pill padding pushes the header to 151px. Measured budget at 375px: bar 46 + nav row 68 = 114, under the 120 cap, with the logo at 56px and the swoosh no longer cropped by the rounded pill. */ .elementor-location-header .elementor-widget-theme-site-logo img{ max-height:56px!important; height:auto!important; width:auto!important; } .vpbar{ gap:0!important; justify-content:space-between!important; padding:0 10px!important; } /* .vpbar-l holds three of the four links and .vpbar-addr is its sibling, so space-between on the bar alone left a 61px hole before the pin. Measured by the verifier 08/09. display:contents dissolves the group, so all FOUR links become direct children of the bar and share the row evenly. */ .vpbar .vpbar-l{ display:contents!important; } .vpbar a{ min-height:44px; } .vpbar .vpbar-mail, .vpbar .vpbar-addr{ display:inline-flex!important; font-size:0!important; line-height:0!important; min-width:44px; min-height:44px; align-items:center; justify-content:center; flex:none; } .vpbar .vpbar-mail svg, .vpbar .vpbar-addr svg{ width:18px; height:18px; flex:none; opacity:.85; } /* ── v9-7 · THE OPEN MENU COVERED THE LOGO ──────────────────────────── Measured at 375px with the menu open, and true before v9 as well: the white drawer starts at y=102 while the logo ends at y=108 and the header ends at y=114, so the drawer cut «INSURANCE AGENCY» in half. The drawer is position:absolute inside .e-n-menu, whose box ends at 102. Under v9 the header is a fixed 114px (top bar 46 + nav row 68), so the drawer needs the last 12px. */ .e-n-menu-wrapper{ top:calc(100% + 12px)!important; } /* ── v9-6 · THE MENU ROWS THEMSELVES ────────────────────────────────── Measured with the menu open at 375px: the rows are 44px from the 07/09 fix, but the link INSIDE each row is 24px, so the thumb target is 24px. Αρχική 24 · Ποιοι Είμαστε 24 · Benefit Club 24 · Δωρεάν Εκτίμηση 43.19 · the Υπηρεσίες chevron button 24 tall and 0 wide. */ .e-n-menu-title-container, .e-n-menu-title a, .e-n-menu-title-text{ min-height:44px; display:flex!important; align-items:center; } .e-n-menu-dropdown-icon{ min-width:44px!important; min-height:44px!important; justify-content:center; } /* ── v9-8 · THE FOOTER BOTTOM BAR ───────────────────────────────────── Measured at 375px: the three bottom lines each land at a different x (16, 46, 139) because their container is flex-wrap:wrap with justify-content:flex-end, so every wrapped line hugs the right. And the three links are 20px tall, under the 44px thumb size. Found by the verifier, 08/09. Pre-existing, not caused by v9. */ .elementor-location-footer .e-con.e-parent:last-of-type .e-con-full{ flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; text-align:center!important; } .elementor-location-footer a{ min-height:44px; display:inline-flex; align-items:center; } /* ── v9-9 · THE LAST MENU ROW ───────────────────────────────────────── Measured with the menu open at 375px: «Δωρεάν Εκτίμηση» ends at exactly y=812, the bottom of the screen, with 0px to spare. */ .e-n-menu-wrapper{ padding-bottom:24px!important; } /* ── v9-5 · THE FORM GUTTER, PHONE ONLY ────────────────────────────── Measured on all 53 pages, both widths: FORM.elementor-form is 7px wider than its own box (312 in 305 on the phone, 488 in 481 on the desktop). It is Elementor's own column gutter on a form that has only one column, so the gutter buys nothing and only overflows. CORRECTED 08/09 by the verifier: the first version of this block sat OUTSIDE the media query and moved the desktop form fields from 233.4px to 240.4px. Kostas's clause is "nothing above 768px changes". So it is phone-only now, and the 7px on the desktop stays. It is invisible and causes no scroll. */ .elementor-form .elementor-form-fields-wrapper{ margin-left:0!important; margin-right:0!important; } .elementor-form .elementor-field-group{ padding-left:0!important; padding-right:0!important; } } /* end @media (max-width:767px) */ /* ── v9-4 · THE FLOATING NOTE ON THE «ΣΥΝΟΛΙΚΗ ΕΙΚΟΝΑ» CARD ──────────── This is the ONE change above 768px in v9, and it fixes two measured faults on 10 pages: 1. .vp-gap-note is position:absolute with right:-14px, so the widget is 504px wide inside a 490px box. Measured on 10 pages at 1440px, 1280px and 1100px: always 14px over. 2. The note is 126px tall and .vp-gap only reserves 56px under the card, so the note sits ON TOP of the last rows. Measured overlap: 70px, and the «ΚΕΝΟ» pill is covered on 4 pages. The fix is Kostas's own rule from the same widget: below 1024px the note is already static under the card. v9 uses that at every width. */ .vp-gap{padding-bottom:0!important} .vp-gap-note{ position:static!important; right:auto!important; bottom:auto!important; max-width:none!important; margin-top:14px!important; }/* End custom CSS */