116 lines
5.8 KiB
CSS
116 lines
5.8 KiB
CSS
/* eazy – mobile adaptation (applies under 820px; desktop untouched)
|
||
NOTE: selectors appear twice — with and without a space after ':' — because
|
||
the DC runtime serializes inline styles with a space, while the static export keeps the authored form. */
|
||
@media (max-width: 820px) {
|
||
header[data-screen-label="Header"] nav { display: none !important; }
|
||
header[data-screen-label="Header"] > div:last-of-type:not(:first-child) { display: none !important; }
|
||
header[data-screen-label="Header"] > span[dir="ltr"] { display: none !important; }
|
||
header[data-screen-label="Header"] { padding: 10px 16px !important; }
|
||
|
||
section, footer, article { padding-left: 20px !important; padding-right: 20px !important; }
|
||
div[style*="padding:"][style*="64px"],
|
||
div[style*="padding: "][style*="64px"] { padding-left: 20px !important; padding-right: 20px !important; }
|
||
|
||
h1 { font-size: 38px !important; line-height: 1.1 !important; }
|
||
h2 { font-size: 26px !important; }
|
||
h1, h2 { text-align: center !important; }
|
||
section > p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
|
||
section[data-screen-label] { scroll-margin-top: 72px; }
|
||
|
||
/* readable minimum: nothing under 20px on mobile */
|
||
[style*="font-size:12"],
|
||
[style*="font-size: 12"],
|
||
[style*="font-size:13"],
|
||
[style*="font-size: 13"],
|
||
[style*="font-size:14"],
|
||
[style*="font-size: 14"],
|
||
[style*="font-size:15"],
|
||
[style*="font-size: 15"],
|
||
[style*="font-size:16"],
|
||
[style*="font-size: 16"],
|
||
[style*="font-size:17"],
|
||
[style*="font-size: 17"],
|
||
[style*="font-size:18"],
|
||
[style*="font-size: 18"],
|
||
[style*="font-size:19"],
|
||
[style*="font-size: 19"] {
|
||
font-size: 20px !important; line-height: 1.55 !important;
|
||
}
|
||
/* footer + privacy note: footer-heading size */
|
||
footer span, footer a, footer [style] { font-size: 16px !important; }
|
||
label[style*="font-size:13px"], label[style*="font-size: 13px"],
|
||
label[style*="font-size:13px"] span, label[style*="font-size: 13px"] span,
|
||
label[style*="font-size:13px"] a, label[style*="font-size: 13px"] a { font-size: 16px !important; line-height: 1.5 !important; }
|
||
label[style*="font-size:13px"] i, label[style*="font-size: 13px"] i { font-size: 12px !important; }
|
||
|
||
/* grids collapse to one column */
|
||
[style*="grid-template-columns:repeat(3"],
|
||
[style*="grid-template-columns: repeat(3"],
|
||
[style*="grid-template-columns:repeat(6"],
|
||
[style*="grid-template-columns: repeat(6"],
|
||
[style*="grid-template-columns:1fr 1fr"],
|
||
[style*="grid-template-columns: 1fr 1fr"],
|
||
[style*="grid-template-columns:1fr 1px 1fr"],
|
||
[style*="grid-template-columns: 1fr 1px 1fr"],
|
||
[style*="grid-template-columns:1fr 260px"],
|
||
[style*="grid-template-columns: 1fr 260px"],
|
||
[style*="grid-template-columns:1.05fr"],
|
||
[style*="grid-template-columns: 1.05fr"],
|
||
[style*="grid-template-columns:1.1fr"],
|
||
[style*="grid-template-columns: 1.1fr"],
|
||
[style*="grid-template-columns:1.15fr"],
|
||
[style*="grid-template-columns: 1.15fr"],
|
||
[style*="grid-template-columns:1.2fr"],
|
||
[style*="grid-template-columns: 1.2fr"],
|
||
[style*="grid-template-columns:1.25fr"],
|
||
[style*="grid-template-columns: 1.25fr"],
|
||
[style*="grid-template-columns:.9fr 1.1fr"],
|
||
[style*="grid-template-columns: .9fr 1.1fr"],
|
||
[style*="grid-template-columns:0.9fr 1.1fr"],
|
||
[style*="grid-template-columns: 0.9fr 1.1fr"],
|
||
[style*="grid-template-columns:auto 1fr"],
|
||
[style*="grid-template-columns: auto 1fr"],
|
||
[style*="grid-template-columns:70px"],
|
||
[style*="grid-template-columns: 70px"] { grid-template-columns: 1fr !important; }
|
||
[style*="grid-template-columns:repeat(4"],
|
||
[style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
|
||
[style*="grid-template-columns:repeat(10"],
|
||
[style*="grid-template-columns: repeat(10"] { grid-template-columns: repeat(5, 1fr) !important; }
|
||
|
||
img { max-width: 100%; height: auto; }
|
||
img[src*="dot-cluster"] { display: none !important; }
|
||
img[style*="height:360px"], img[style*="height: 360px"] { height: auto !important; width: 64vw !important; margin: 0 auto; }
|
||
img[style*="width:400px"], img[style*="width: 400px"] { width: 64vw !important; }
|
||
img[style*="width:340px"], img[style*="width: 340px"] { width: 58vw !important; }
|
||
[style*="min-height:360px"],
|
||
[style*="min-height: 360px"] { min-height: 0 !important; }
|
||
|
||
section [style*="display:flex"], section [style*="display: flex"],
|
||
footer [style*="display:flex"], footer [style*="display: flex"] { flex-wrap: wrap; }
|
||
aside { display: none !important; }
|
||
|
||
table { display: block; overflow-x: auto; white-space: nowrap; }
|
||
|
||
a[aria-label="וואטסאפ"][style*="position:fixed"], a[aria-label="וואטסאפ"][style*="position: fixed"] { display: none !important; }
|
||
|
||
/* product paths: separate cards on mobile */
|
||
[style*="1fr 1px 1fr"] > div[style*="background:var(--ez-line)"],
|
||
[style*="1fr 1px 1fr"] > div[style*="background: var(--ez-line)"] { display: none !important; }
|
||
#products [style*="1fr 1px 1fr"] > div:first-child { border: 1px solid var(--ez-line); border-radius: 12px; padding: 22px; background: #fff; }
|
||
#products [style*="1fr 1px 1fr"] > div:last-child { border: 1px solid var(--ez-line); border-radius: 12px; padding: 22px; background: var(--ez-lavender-tint); }
|
||
|
||
/* compare page: table becomes stacked cards on mobile */
|
||
section[data-screen-label="השוואה"] div:has(> table) { display: none !important; }
|
||
[data-ez-mobile-compare] { display: grid !important; gap: 14px; }
|
||
|
||
/* popups breathe on small screens */
|
||
#ez-exit-popup { padding: 16px !important; }
|
||
#ez-exit-popup > div { padding: 26px 20px 22px !important; }
|
||
|
||
html, body { overflow-x: hidden !important; }
|
||
body { padding-bottom: 78px; font-size: 20px; }
|
||
|
||
/* footer link columns: two per row instead of five squeezed */
|
||
footer [style*="grid-template-columns:auto 1fr 1fr"], footer [style*="grid-template-columns: auto 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
|
||
}
|