/* Theme Name: ZeroPest Theme URI: https://zeropest.ae Author: Built for ZeroPest Description: Bilingual (English / Arabic) pest control theme. One stylesheet serves both text directions because every directional value uses CSS logical properties. Do not introduce margin-left, padding-right, text-align:left or border-left anywhere - it will break the Arabic site. Version: 1.0.0 Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: zeropest Tags: rtl-language-support, translation-ready, custom-menu, custom-logo */ /* ===================================================================== ZeroPest.ae — shared stylesheet --------------------------------------------------------------------- ONE stylesheet serves both English (LTR) and Arabic (RTL). This only works because every directional value below uses CSS LOGICAL PROPERTIES (inline-start / inline-end) instead of left/right. DO NOT introduce `margin-left`, `padding-right`, `text-align: left` or `border-left` anywhere. If you do, the Arabic site breaks and retro-fitting it later is a full rewrite. ===================================================================== */ :root{ --brand: #0E7C5A; --brand-dark: #0A5C43; --brand-tint: #E6F2ED; --ink: #10201A; --ink-soft: #3D5148; --muted: #5F726A; --line: #E1E8E4; --bg: #FFFFFF; --bg-soft: #F4F8F6; --wa: #25D366; --amber: #E8A33D; --danger: #B3261E; --radius: 10px; --shadow-sm: 0 1px 2px rgba(16,32,26,.06); --shadow-md: 0 4px 16px rgba(16,32,26,.09); --maxw: 1140px; --font-latin: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-arabic: "IBM Plex Sans Arabic", "Noto Kufi Arabic", system-ui, sans-serif; --font: var(--font-latin); } /* Arabic pages set lang="ar" dir="rtl" on ; font swaps automatically. */ html[lang="ar"]{ --font: var(--font-arabic); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } html[lang="ar"] body{ line-height:1.85; } /* Arabic needs more leading */ img{ max-width:100%; height:auto; display:block; } a{ color:var(--brand); } .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:20px; } /* ---------- typography ---------- */ h1,h2,h3,h4{ margin:0 0 .5em; font-weight:800; line-height:1.2; text-wrap:balance; letter-spacing:-.02em; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{ font-weight:700; letter-spacing:0; line-height:1.4; } h1{ font-size:clamp(1.85rem,4.6vw,2.7rem); } h2{ font-size:clamp(1.4rem,3vw,1.9rem); } h3{ font-size:1.1rem; } p{ margin:0 0 1em; max-width:68ch; } .lede{ font-size:1.08rem; color:var(--ink-soft); } /* Keep +971 numbers LTR inside RTL text. Always wrap phone numbers in . */ bdi{ unicode-bidi:isolate; direction:ltr; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:var(--radius); font-weight:700; font-size:.97rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .15s ease, box-shadow .15s ease; } .btn--primary{ background:var(--brand); color:#fff; } .btn--primary:hover{ background:var(--brand-dark); } .btn--wa{ background:var(--wa); color:#07301A; } .btn--wa:hover{ box-shadow:var(--shadow-md); } .btn--ghost{ background:transparent; color:var(--brand); border-color:var(--line); } .btn--ghost:hover{ background:var(--brand-tint); } .btn svg{ flex:none; } /* ---------- header ---------- */ .site-header{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(8px); border-block-end:1px solid var(--line); } .site-header .bar{ display:flex; align-items:center; gap:18px; min-height:66px; } .brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:800; font-size:1.12rem; } .brand .mark{ inline-size:30px; block-size:30px; border-radius:8px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:800; } .nav{ display:none; gap:20px; margin-inline-start:auto; } .nav a{ color:var(--ink-soft); text-decoration:none; font-size:.93rem; font-weight:600; } .nav a:hover{ color:var(--brand); } .header-cta{ margin-inline-start:auto; display:flex; align-items:center; gap:10px; } .lang-switch{ font-size:.85rem; font-weight:700; text-decoration:none; color:var(--ink-soft); border:1px solid var(--line); padding:7px 12px; border-radius:8px; } .lang-switch:hover{ border-color:var(--brand); color:var(--brand); } @media (min-width:900px){ .nav{ display:flex; } .header-cta{ margin-inline-start:0; } } /* ---------- breadcrumbs ---------- */ .crumbs{ font-size:.82rem; color:var(--muted); padding-block:14px 0; } .crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; } .crumbs a{ color:var(--muted); text-decoration:none; } .crumbs a:hover{ color:var(--brand); text-decoration:underline; } .crumbs li+li::before{ content:"›"; margin-inline-end:6px; color:var(--line); } /* ---------- hero ---------- */ .hero{ padding-block:34px 44px; } .hero-grid{ display:grid; gap:28px; } @media (min-width:920px){ .hero-grid{ grid-template-columns:1.05fr .95fr; align-items:center; gap:44px; } } .eyebrow{ display:inline-flex; align-items:center; gap:7px; background:var(--brand-tint); color:var(--brand-dark); font-size:.78rem; font-weight:700; padding:6px 11px; border-radius:999px; margin-block-end:14px; } .hero-actions{ display:flex; flex-wrap:wrap; gap:11px; margin-block:20px 18px; } .hero-points{ list-style:none; padding:0; margin:0; display:grid; gap:8px; } .hero-points li{ display:flex; gap:9px; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); } .hero-points li::before{ content:"✓"; flex:none; color:var(--brand); font-weight:800; inline-size:20px; block-size:20px; border-radius:50%; background:var(--brand-tint); display:grid; place-items:center; font-size:.72rem; margin-block-start:2px; } /* quote card */ .quote-card{ background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow-sm); } .quote-card h2{ font-size:1.15rem; margin-block-end:4px; } .quote-card .sub{ font-size:.87rem; color:var(--muted); margin-block-end:16px; } .field{ margin-block-end:13px; } .field label{ display:block; font-size:.81rem; font-weight:700; margin-block-end:5px; color:var(--ink-soft); } .field input,.field select{ inline-size:100%; padding:11px 13px; font:inherit; font-size:.93rem; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); } .field input:focus,.field select:focus{ outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); } .form-note{ font-size:.76rem; color:var(--muted); margin-block-start:10px; } .hp{ position:absolute; inset-inline-start:-9999px; } /* honeypot */ /* ---------- trust strip ---------- */ .trust{ background:var(--bg-soft); border-block:1px solid var(--line); padding-block:16px; } .trust ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 20px; } @media (min-width:760px){ .trust ul{ grid-template-columns:repeat(4,1fr); } } .trust li{ font-size:.86rem; font-weight:600; color:var(--ink-soft); display:flex; gap:8px; align-items:center; } .trust .n{ font-size:1.25rem; font-weight:800; color:var(--brand); } /* ---------- sections ---------- */ section.block{ padding-block:44px; } section.block.alt{ background:var(--bg-soft); border-block:1px solid var(--line); } .section-head{ margin-block-end:26px; max-width:60ch; } .section-head p{ color:var(--ink-soft); margin:0; } /* ---------- cards ---------- */ .cards{ display:grid; gap:16px; grid-template-columns:1fr; } @media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } } @media (min-width:980px){ .cards--3{ grid-template-columns:repeat(3,1fr); } } .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:7px; text-decoration:none; color:inherit; } a.card:hover{ border-color:var(--brand); box-shadow:var(--shadow-md); } .card h3{ margin:0; font-size:1.02rem; } .card p{ margin:0; font-size:.9rem; color:var(--ink-soft); } .card .price{ margin-block-start:auto; padding-block-start:10px; font-size:.83rem; color:var(--muted); font-weight:700; } /* ---------- process (ordered — the numbers mean sequence) ---------- */ .steps{ counter-reset:step; display:grid; gap:18px; grid-template-columns:1fr; margin:0; padding:0; list-style:none; } @media (min-width:820px){ .steps{ grid-template-columns:repeat(4,1fr); } } .steps li{ padding-block-start:14px; border-block-start:2px solid var(--brand); } .steps li::before{ counter-increment:step; content:counter(step,decimal-leading-zero); display:block; font-size:.75rem; font-weight:800; color:var(--brand); margin-block-end:6px; } html[lang="ar"] .steps li::before{ content:counter(step,arabic-indic); } .steps h3{ font-size:.98rem; margin-block-end:4px; } .steps p{ font-size:.88rem; color:var(--ink-soft); margin:0; } /* ---------- areas ---------- */ .chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; } .chips a{ display:inline-block; padding:7px 13px; border:1px solid var(--line); border-radius:999px; font-size:.86rem; text-decoration:none; color:var(--ink-soft); background:#fff; } .chips a:hover{ border-color:var(--brand); color:var(--brand); } /* ---------- reviews ---------- */ .review{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; } .stars{ color:var(--amber); font-size:.9rem; letter-spacing:2px; } .review p{ font-size:.92rem; margin:8px 0; } .review .who{ font-size:.82rem; color:var(--muted); font-weight:700; } /* ---------- FAQ ---------- */ .faq details{ border-block-end:1px solid var(--line); padding-block:14px; } .faq summary{ cursor:pointer; font-weight:700; font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; color:var(--brand); font-size:1.3rem; font-weight:400; flex:none; } .faq details[open] summary::after{ content:"−"; } .faq details p{ margin-block:10px 0; color:var(--ink-soft); font-size:.94rem; } /* ---------- footer ---------- */ .site-footer{ background:var(--ink); color:#C9D6D0; padding-block:40px 24px; margin-block-start:20px; } .site-footer a{ color:#C9D6D0; text-decoration:none; font-size:.88rem; } .site-footer a:hover{ color:#fff; text-decoration:underline; } .foot-grid{ display:grid; gap:26px; grid-template-columns:1fr; } @media (min-width:760px){ .foot-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } } .site-footer h4{ color:#fff; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-block-end:12px; } html[lang="ar"] .site-footer h4{ letter-spacing:0; text-transform:none; } .site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; } .legal{ border-block-start:1px solid #22362E; margin-block-start:28px; padding-block-start:18px; font-size:.78rem; color:#8CA096; display:flex; flex-wrap:wrap; gap:8px 20px; } /* ---------- sticky mobile CTA (UAE traffic is overwhelmingly mobile) ---------- */ .sticky-cta{ position:fixed; inset-inline:0; inset-block-end:0; z-index:50; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); box-shadow:0 -2px 12px rgba(16,32,26,.14); } .sticky-cta a{ padding:14px 8px; text-align:center; font-weight:800; font-size:.93rem; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:7px; } .sticky-cta .call{ background:#fff; color:var(--brand-dark); } .sticky-cta .wa{ background:var(--wa); color:#07301A; } @media (min-width:900px){ .sticky-cta{ display:none; } } @media (max-width:899px){ body{ padding-block-end:56px; } } /* ---------- a11y ---------- */ :focus-visible{ outline:3px solid var(--brand); outline-offset:2px; } .skip{ position:absolute; inset-block-start:-60px; inset-inline-start:12px; z-index:100; background:#fff; padding:10px 16px; border-radius:8px; font-weight:700; } .skip:focus{ inset-block-start:12px; } .sr-only{ position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ===================================================================== WordPress-specific additions ===================================================================== */ .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .admin-bar .site-header{top:32px} @media (max-width:782px){.admin-bar .site-header{top:46px}} /* editor content inside page templates */ .entry-content{max-width:72ch} .entry-content h2{margin-block:1.6em .5em} .entry-content h3{margin-block:1.4em .4em} .entry-content ul,.entry-content ol{margin-block-end:1em} .entry-content img{border-radius:var(--radius);margin-block:1.2em} .entry-content table{inline-size:100%;border-collapse:collapse;font-size:.92rem} .entry-content th,.entry-content td{padding:10px 12px;border-block-end:1px solid var(--line);text-align:start} .entry-content blockquote{margin:1.4em 0;padding-inline-start:18px;border-inline-start:3px solid var(--brand);color:var(--ink-soft)} /* language switcher rendered by Polylang in the menu */ .lang-item a{font-weight:700} /* form states */ .form-status{padding:12px 14px;border-radius:8px;font-size:.9rem;margin-block-end:14px} .form-status.ok{background:var(--brand-tint);color:var(--brand-dark)} .form-status.err{background:#FDECEA;color:var(--danger)} .field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--danger)} .field .err-msg{color:var(--danger);font-size:.78rem;margin-block-start:4px;display:block} /* pagination / archive */ .page-header{padding-block:34px 10px} .archive-grid{display:grid;gap:16px;grid-template-columns:1fr} @media (min-width:640px){.archive-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:980px){.archive-grid{grid-template-columns:repeat(3,1fr)}} /* 404 */ .notfound{padding-block:70px;text-align:center} .notfound h1{font-size:clamp(2rem,6vw,3rem)} .notfound .btn{margin-block-start:14px}