/* ========================================================================== ADDRESS PAGE STYLES — fully scoped under .address-page WHY THIS SCOPING EXISTS: Multiple address/city pages (Dubai, Abu Dhabi, Sharjah, etc.) reuse the same generic class names (.hero, .button, .container, .section, .card...). If more than one of these stylesheets — or this stylesheet and the global site stylesheet from the header/footer includes — end up loaded on the same page, unscoped rules silently override each other. FIX: every rule below is nested under ".address-page". Add that class to the wrapping element in the PHP template, e.g.:
Nothing else in the HTML needs to change — all existing class names (.hero, .dealer-card, .operations-grid, etc.) stay exactly the same. They just no longer leak outside this wrapper, and nothing from outside can leak in and override them either. ========================================================================== */ /* ========================================================================== 1. ROOT VARIABLES & RESET (scoped to .address-page instead of :root) ========================================================================== */ .address-page { --ink: #171b15; --muted: #667061; --olive: #405c2e; --olive-dark: #2f4821; --olive-light: #70855d; --sage: #dfe6d8; --ivory: #faf8f3; --warm: #f3eee6; --line: #e8e2d9; --white: #ffffff; --shadow: 0 18px 55px rgba(48, 63, 38, 0.1); --serif: Georgia, "Times New Roman", serif; --sans: var(--font-geist-sans), Arial, Helvetica, sans-serif; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; } .address-page, .address-page *, .address-page *::before, .address-page *::after { box-sizing: border-box; } /* Anchor-link smooth scrolling needs to live on ; it's a harmless, page-wide behavior so it's left unscoped on purpose. */ html { scroll-behavior: smooth; } .address-page a { color: inherit; text-decoration: none; } .address-page button, .address-page input, .address-page select, .address-page textarea { font: inherit; } .address-page button, .address-page a, .address-page summary, .address-page input, .address-page select, .address-page textarea { outline-color: var(--olive); outline-offset: 3px; } .address-page svg { stroke-width: 1.65; } /* ========================================================================== 2. LAYOUT CONTAINERS & SECTION SPACING ========================================================================== */ .address-page .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; } .address-page .narrow { width: min(940px, calc(100% - 40px)); } .address-page .section { padding: 96px 0; } /* ========================================================================== 3. TYPOGRAPHY (headings, eyebrow labels) ========================================================================== */ .address-page .eyebrow { margin: 0 0 11px; color: var(--olive); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.25; text-transform: uppercase; } .address-page .eyebrow.light { color: #dfead6; } .address-page h1, .address-page h2, .address-page h3, .address-page p { margin-top: 0; } .address-page h1, .address-page h2, .address-page h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; line-height: 1.08; } .address-page h1 { margin-bottom: 24px; font-size: clamp(3rem, 5.5vw, 5.35rem); } .address-page h2 { margin-bottom: 18px; font-size: clamp(2.3rem, 4vw, 3.6rem); } .address-page h3 { font-size: 1.35rem; } /* ========================================================================== 4. SITE HEADER & NAVIGATION Intentionally left commented out — the global site stylesheet (loaded via the header/footer PHP includes) already styles these elements. Kept here only for reference so future edits know these rules exist and why they're disabled. ========================================================================== */ /*.address-page .site-header {*/ /* position: sticky;*/ /* z-index: 100;*/ /* top: 0;*/ /* border-bottom: 1px solid rgba(225, 219, 209, 0.8);*/ /* background: rgba(255, 255, 255, 0.92);*/ /* backdrop-filter: blur(16px);*/ /*}*/ /*.address-page .nav-wrap {*/ /* display: grid;*/ /* grid-template-columns: 190px 1fr 150px;*/ /* align-items: center;*/ /* min-height: 82px;*/ /*}*/ /*.address-page .brand {*/ /* display: inline-flex;*/ /* align-items: center;*/ /* width: max-content;*/ /* color: #4d6237;*/ /* line-height: 1;*/ /*}*/ /*.address-page .brand-mark {*/ /* position: relative;*/ /* display: grid;*/ /* width: 34px;*/ /* height: 38px;*/ /* margin-right: 7px;*/ /* place-items: center;*/ /*}*/ /*.address-page .brand-mark::after {*/ /* position: absolute;*/ /* width: 15px;*/ /* height: 24px;*/ /* border-radius: 100% 0 100% 0;*/ /* background: linear-gradient(135deg, #819a5b, #3f652d);*/ /* content: "";*/ /* transform: rotate(22deg) translate(8px, -7px);*/ /*}*/ /*.address-page .brand-mark svg {*/ /* width: 25px;*/ /* height: 25px;*/ /*}*/ /*.address-page .brand strong,*/ /*.address-page .brand small {*/ /* display: block;*/ /*}*/ /*.address-page .brand strong {*/ /* font-family: var(--serif);*/ /* font-size: 1.45rem;*/ /* font-weight: 400;*/ /* letter-spacing: 0.04em;*/ /*}*/ /*.address-page .brand small {*/ /* margin-top: 6px;*/ /* padding-left: 2px;*/ /* font-size: 0.53rem;*/ /* letter-spacing: 0.32em;*/ /*}*/ /*.address-page .main-nav {*/ /* display: flex;*/ /* align-items: center;*/ /* justify-content: center;*/ /* gap: clamp(18px, 2.7vw, 38px);*/ /*}*/ /*.address-page .main-nav a {*/ /* display: inline-flex;*/ /* align-items: center;*/ /* gap: 4px;*/ /* font-size: 0.77rem;*/ /* font-weight: 650;*/ /* letter-spacing: 0.015em;*/ /* text-transform: uppercase;*/ /*}*/ /*.address-page .main-nav a:hover,*/ /*.address-page .site-footer a:hover {*/ /* color: var(--olive-light);*/ /*}*/ /*.address-page .nav-actions {*/ /* display: flex;*/ /* justify-content: flex-end;*/ /* gap: 18px;*/ /*}*/ /*.address-page .nav-actions a {*/ /* position: relative;*/ /* display: grid;*/ /* place-items: center;*/ /*}*/ /*.address-page .nav-actions a span {*/ /* position: absolute;*/ /* top: -9px;*/ /* right: -9px;*/ /* display: grid;*/ /* width: 16px;*/ /* height: 16px;*/ /* border-radius: 50%;*/ /* background: var(--olive);*/ /* color: var(--white);*/ /* font-size: 0.61rem;*/ /* place-items: center;*/ /*}*/ /*.address-page .menu-button {*/ /* display: none;*/ /* border: 0;*/ /* background: transparent;*/ /* color: var(--ink);*/ /*}*/ /* ========================================================================== 5. HERO SECTION ========================================================================== */ .address-page .hero { overflow: hidden; background: radial-gradient(circle at 18% 8%, rgba(230, 224, 210, 0.6), transparent 28%), var(--ivory); } .address-page .breadcrumbs { display: flex; gap: 11px; align-items: center; padding-top: 26px; color: var(--muted); font-size: 0.78rem; } .address-page .breadcrumbs a:hover { color: var(--olive); } .address-page .breadcrumbs strong { color: var(--ink); } .address-page .hero-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; min-height: 650px; align-items: center; } .address-page .hero-copy { position: relative; z-index: 2; padding: 80px 56px 90px 0; } .address-page .hero-copy::before { position: absolute; z-index: -1; top: 15px; left: -170px; width: 320px; height: 320px; border: 1px solid rgba(74, 96, 55, 0.12); border-radius: 50%; content: ""; } .address-page .hero-lead { margin-bottom: 34px; color: var(--muted); font-size: 1.12rem; } .address-page .button-row { display: flex; flex-wrap: wrap; gap: 14px; } .address-page .button { display: inline-flex; min-height: 52px; padding: 0 23px; border: 1px solid var(--olive); border-radius: 3px; align-items: center; justify-content: center; gap: 15px; background: var(--olive); color: var(--white); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.045em; text-transform: uppercase; transition: 180ms ease; } .address-page .button:hover { background: var(--olive-dark); transform: translateY(-2px); } .address-page .button-secondary { background: var(--white); color: var(--olive-dark); } .address-page .button-secondary:hover { background: #eef2e9; } .address-page .hero-image { position: relative; align-self: stretch; min-height: 580px; border-radius: 48% 0 0 0; background: linear-gradient(90deg, rgba(250, 248, 243, 0.08), rgba(250, 248, 243, 0)), url("shams-dubai-hero.png"); background-position: center; background-size: cover; box-shadow: inset 14px 0 30px rgba(255, 255, 255, 0.28); } .address-page .hero-image::after { position: absolute; right: -110px; bottom: -75px; width: 430px; height: 160px; border-radius: 50%; background: rgba(244, 237, 225, 0.82); content: ""; filter: blur(1px); } .address-page .image-placeholder { position: absolute; right: 18px; bottom: 18px; padding: 8px 12px; border-radius: 2px; background: rgba(255, 255, 255, 0.82); color: var(--olive-dark); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================================== 6. TRUST STRIP (badges row below hero) ========================================================================== */ .address-page .trust-strip { border-block: 1px solid var(--line); background: #fffdf9; } .address-page .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .address-page .trust-grid > div { display: flex; min-height: 118px; padding: 25px 28px; border-right: 1px solid var(--line); align-items: center; gap: 15px; } .address-page .trust-grid > div:first-child { border-left: 1px solid var(--line); } .address-page .trust-grid svg { width: 30px; height: 30px; color: var(--olive); } .address-page .trust-grid strong, .address-page .trust-grid small { display: block; } .address-page .trust-grid strong { margin-bottom: 4px; font-family: var(--serif); font-size: 1rem; font-weight: 400; } .address-page .trust-grid small { color: var(--muted); font-size: 0.7rem; line-height: 1.4; } /* ========================================================================== 7. OFFICE / ABOUT SECTION ========================================================================== */ .address-page .office-section { background: var(--white); } .address-page .office-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 70px; align-items: center; } .address-page .office-image { position: relative; min-height: 460px; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg, rgba(46, 73, 34, 0.12), rgba(255, 255, 255, 0)), url("shams-dubai-office.png"); background-position: center; background-size: cover; box-shadow: var(--shadow); } .address-page .office-copy > p:not(.eyebrow) { max-width: 560px; color: var(--muted); } .address-page .contact-card { display: grid; margin-top: 30px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; gap: 14px; background: var(--ivory); box-shadow: 0 10px 35px rgba(44, 55, 34, 0.05); font-style: normal; } .address-page .contact-card a, .address-page .contact-card > span { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 11px; font-size: 0.9rem; } .address-page .contact-card svg { width: 18px; color: var(--olive); } /* ========================================================================== 8. SHARED SECTION HEADINGS ========================================================================== */ .address-page .section-heading { margin-bottom: 45px; } .address-page .section-heading.centered { text-align: center; } .address-page .section-heading.centered > p:not(.eyebrow) { max-width: 650px; margin-inline: auto; color: var(--muted); } /* ========================================================================== 9. OPERATIONS / SERVICES CARDS ========================================================================== */ .address-page .operations-section { background: #fbfaf6; } .address-page .operations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .address-page .operation-card { min-height: 320px; padding: 35px 25px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); text-align: center; transition: 180ms ease; } .address-page .operation-card:hover { border-color: #bdc9b2; box-shadow: var(--shadow); transform: translateY(-5px); } .address-page .icon-box { display: inline-grid; width: 58px; height: 58px; margin-bottom: 24px; border: 1px solid #cdd7c6; border-radius: 50%; color: var(--olive); place-items: center; } .address-page .icon-box svg { width: 28px; } .address-page .operation-card h3 { min-height: 58px; margin-bottom: 14px; } .address-page .operation-card p { color: var(--muted); font-size: 0.84rem; } /* ========================================================================== 10. INDUSTRIES BAND (dark olive strip) ========================================================================== */ .address-page .industries { padding: 75px 0; overflow: hidden; background: radial-gradient(circle at 5% 115%, rgba(255, 255, 255, 0.13), transparent 28%), linear-gradient(120deg, var(--olive-dark), #4f6b3a); color: var(--white); text-align: center; } .address-page .industries h2 { margin-bottom: 42px; font-size: clamp(2rem, 3.2vw, 3.2rem); } .address-page .industry-grid { display: grid; grid-template-columns: repeat(6, 1fr); } .address-page .industry-grid > div { display: grid; min-height: 100px; border-right: 1px solid rgba(255, 255, 255, 0.18); align-content: center; gap: 11px; } .address-page .industry-grid > div:last-child { border-right: 0; } .address-page .industry-grid svg { width: 30px; height: 30px; margin-inline: auto; } .address-page .industry-grid span { font-size: 0.8rem; } /* ========================================================================== 11. DEALER DIRECTORY SECTION (search + cards + map) ========================================================================== */ .address-page .dealer-section { background: var(--white); } .address-page .dealer-heading { display: flex; margin-bottom: 38px; align-items: end; justify-content: space-between; gap: 28px; } .address-page .dealer-heading h2 { margin-bottom: 0; } .address-page .dealer-search { display: flex; width: 290px; height: 48px; padding: 0 15px; border: 1px solid var(--line); border-radius: 4px; align-items: center; gap: 9px; background: var(--ivory); } .address-page .dealer-search svg { color: var(--olive); } .address-page .dealer-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 0.83rem; } .address-page .dealer-layout { display: grid; grid-template-columns: 1.55fr 0.45fr; gap: 35px; } .address-page .dealer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .address-page .dealer-card { display: flex; min-height: 300px; padding: 24px; border: 1px solid var(--line); border-radius: 9px; flex-direction: column; background: #fffdf9; } .address-page .dealer-title { display: flex; margin-bottom: 22px; align-items: flex-start; gap: 10px; } .address-page .dealer-title > svg { flex: 0 0 auto; color: var(--olive); } .address-page .dealer-card h3 { margin-bottom: 7px; font-size: 1.1rem; } .address-page .dealer-card p { color: var(--muted); font-size: 0.78rem; } .address-page .dealer-card > a:not(.text-link) { display: flex; margin: 6px 0; align-items: flex-start; gap: 7px; overflow-wrap: anywhere; font-size: 0.72rem; } .address-page .dealer-card > a svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--olive); } .address-page .text-link { display: flex; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); align-items: center; justify-content: space-between; color: var(--olive-dark); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; } .address-page .no-results { grid-column: 1 / -1; padding: 32px; border: 1px dashed var(--line); color: var(--muted); } /* -- Dealer sidebar: decorative UAE map with pins -- */ .address-page .uae-map { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .address-page .map-shape { position: relative; width: 210px; height: 150px; border-radius: 68% 18% 62% 28% / 55% 35% 65% 45%; background: #ece8df; clip-path: polygon(0 41%, 18% 50%, 35% 48%, 54% 34%, 70% 38%, 83% 20%, 95% 0, 100% 20%, 89% 40%, 95% 57%, 73% 58%, 60% 78%, 41% 100%, 21% 86%, 6% 74%); } .address-page .map-shape .pin { position: absolute; z-index: 2; width: 24px; color: var(--olive); fill: var(--olive); stroke: var(--white); } .address-page .pin-one { left: 55px; bottom: 32px; } .address-page .pin-two { top: 56px; right: 61px; } .address-page .pin-three { top: 17px; right: 28px; } .address-page .uae-map p { max-width: 210px; margin: 20px 0 0; color: var(--muted); font-size: 0.73rem; } .address-page .dealer-note { margin: 22px 0 0; color: #7f7a70; font-size: 0.7rem; } /* ========================================================================== 12. DEALER REGISTRATION SECTION (copy + form) ========================================================================== */ .address-page .registration-section { padding: 90px 0; overflow: hidden; background: radial-gradient(circle at 14% 86%, rgba(115, 139, 91, 0.15), transparent 28%), var(--warm); } .address-page .registration-grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 90px; align-items: center; } .address-page .registration-copy > p:not(.eyebrow) { color: var(--muted); } .address-page .registration-copy ul { display: grid; margin: 30px 0 0; padding: 0; gap: 16px; list-style: none; } .address-page .registration-copy li { display: flex; align-items: center; gap: 11px; font-size: 0.87rem; } .address-page .registration-copy li svg { width: 19px; color: var(--olive); } .address-page .registration-form { padding: 42px; border: 1px solid rgba(222, 213, 199, 0.8); border-radius: 16px; background: var(--white); box-shadow: var(--shadow); } .address-page .form-heading { display: flex; margin-bottom: 28px; align-items: center; gap: 17px; } .address-page .form-heading .icon-box { width: 52px; height: 52px; margin: 0; } .address-page .form-heading h3 { margin: 0; font-size: 1.8rem; } .address-page .form-heading .eyebrow { margin-bottom: 5px; } .address-page .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; } .address-page .form-grid label { display: grid; gap: 7px; } .address-page .form-grid label > span { color: #4d554a; font-size: 0.72rem; font-weight: 650; } .address-page .form-grid input, .address-page .form-grid select, .address-page .form-grid textarea { width: 100%; border: 1px solid #dedbd4; border-radius: 4px; background: #fffefd; color: var(--ink); } .address-page .form-grid input, .address-page .form-grid select { height: 48px; padding: 0 13px; } .address-page .form-grid textarea { padding: 13px; resize: vertical; } .address-page .form-grid input:focus, .address-page .form-grid select:focus, .address-page .form-grid textarea:focus { border-color: var(--olive); box-shadow: 0 0 0 3px rgba(82, 111, 62, 0.11); outline: 0; } .address-page .full-width { grid-column: 1 / -1; } .address-page .checkbox { display: flex; margin: 20px 0; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 0.72rem; } .address-page .checkbox input { margin-top: 4px; accent-color: var(--olive); } .address-page .submit-button { border: 0; cursor: pointer; } .address-page .form-status { display: none; margin: 15px 0 0; color: var(--olive); font-size: 0.82rem; font-weight: 650; } .address-page .form-status.is-visible { display: block; } /* ========================================================================== 13. SEO CONTENT SECTION (long-form text + topic links) ========================================================================== */ .address-page .seo-section { background: var(--white); } .address-page .seo-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; color: var(--muted); } .address-page .seo-columns p { margin-bottom: 0; } .address-page .topic-links { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 45px; gap: 12px; } .address-page .topic-links a { display: flex; min-height: 46px; padding: 0 15px; border: 1px solid #bcc9b2; align-items: center; justify-content: space-between; color: var(--olive-dark); font-size: 0.72rem; font-weight: 650; } .address-page .topic-links a:hover { background: #f1f4ed; } .address-page .topic-links svg { width: 15px; } /* ========================================================================== 14. FAQ SECTION (accordion) ========================================================================== */ .address-page .faq-section { padding-top: 0; background: var(--white); } .address-page .faq-list { display: grid; gap: 9px; } .address-page .faq-list details { border: 1px solid var(--line); border-radius: 5px; background: var(--ivory); } .address-page .faq-list summary { display: flex; padding: 18px 20px; align-items: center; justify-content: space-between; cursor: pointer; font-size: 0.9rem; font-weight: 600; list-style: none; } .address-page .faq-list summary::-webkit-details-marker { display: none; } .address-page .faq-list summary svg { width: 18px; transition: 180ms ease; } .address-page .faq-list details[open] summary svg { transform: rotate(180deg); } .address-page .faq-list details p { margin: 0; padding: 0 20px 19px; color: var(--muted); font-size: 0.86rem; } /* ========================================================================== 15. BOTTOM CTA BANNER ========================================================================== */ .address-page .cta-wrap { padding: 0 0 85px; background: var(--white); } .address-page .cta-banner { display: flex; min-height: 225px; padding: 48px 58px; border-radius: 12px; align-items: center; justify-content: space-between; gap: 40px; overflow: hidden; background: radial-gradient(circle at 92% 105%, rgba(255, 255, 255, 0.12), transparent 28%), linear-gradient(115deg, var(--olive-dark), #506d3b); color: var(--white); } .address-page .cta-banner h2 { max-width: 650px; margin: 0; font-size: clamp(2rem, 3.4vw, 3.15rem); } .address-page .cta-banner .button { border-color: #dbe5d3; white-space: nowrap; } .address-page .cta-banner .button:not(.button-secondary) { background: rgba(255, 255, 255, 0.12); } /* ========================================================================== 16. NEWSLETTER SIGNUP STRIP ========================================================================== */ .address-page .newsletter { border-block: 1px solid var(--line); background: #f2f1ec; } .address-page .newsletter-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 115px; align-items: center; gap: 55px; } .address-page .newsletter-grid > div { display: flex; align-items: center; gap: 15px; } .address-page .newsletter-icon { display: grid; width: 45px; height: 45px; border: 1px solid var(--olive); border-radius: 50%; color: var(--olive); place-items: center; } .address-page .newsletter-icon svg { width: 21px; } .address-page .newsletter-grid strong, .address-page .newsletter-grid small { display: block; } .address-page .newsletter-grid strong { font-family: var(--serif); font-weight: 400; } .address-page .newsletter-grid small { color: var(--muted); font-size: 0.72rem; } .address-page .newsletter form { display: grid; grid-template-columns: 1fr auto; } .address-page .newsletter input { min-width: 0; height: 49px; padding: 0 15px; border: 1px solid var(--line); border-radius: 4px 0 0 4px; outline: 0; background: var(--white); } .address-page .newsletter button { display: flex; padding: 0 20px; border: 0; border-radius: 0 4px 4px 0; align-items: center; gap: 9px; background: var(--olive); color: var(--white); cursor: pointer; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } .address-page .newsletter button svg { width: 15px; } /* ========================================================================== 17. SITE FOOTER Kept commented in section 4's spirit is N/A here — footer classes below (.site-footer, .footer-grid, etc.) are page-content footer-styling that is separate from the global site footer include and stays active. ========================================================================== */ .address-page .site-footer { padding: 70px 0 25px; background: #fffdf9; } .address-page .footer-grid { display: grid; grid-template-columns: 1.45fr 0.7fr 0.9fr 1.25fr; gap: 65px; } .address-page .footer-brand p { max-width: 245px; margin-top: 24px; color: var(--muted); font-size: 0.78rem; } .address-page .footer-grid h3 { margin-bottom: 20px; color: var(--olive); font-family: var(--sans); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; } .address-page .footer-grid > div:not(.footer-brand) > a { display: flex; margin: 9px 0; align-items: flex-start; gap: 8px; font-size: 0.76rem; } .address-page .footer-grid > div > a svg { width: 15px; flex: 0 0 auto; color: var(--olive); } .address-page .social-links { display: flex; margin-top: 18px; gap: 10px; } .address-page .social-links a { display: grid; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--olive); place-items: center; } .address-page .social-links svg { width: 16px; } .address-page .copyright { display: flex; margin-top: 58px; padding-top: 20px; border-top: 1px solid var(--line); align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.7rem; } .address-page .copyright a { display: grid; width: 34px; height: 34px; border-radius: 50%; background: #9aa18f; color: var(--white); font-size: 1rem; place-items: center; } /* ========================================================================== 18. UTILITIES ========================================================================== */ .address-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; border: 0; clip: rect(0, 0, 0, 0); margin: -1px; white-space: nowrap; } /* ========================================================================== 19. RESPONSIVE BREAKPOINTS ========================================================================== */ /* -- Large tablets / small desktops (<= 1080px) -- */ @media (max-width: 1080px) { .address-page .nav-wrap { grid-template-columns: 170px 1fr 120px; } .address-page .main-nav { gap: 18px; } .address-page .hero-grid { grid-template-columns: 1fr 1fr; } .address-page .trust-grid { grid-template-columns: 1fr 1fr; } .address-page .trust-grid > div:nth-child(3) { border-left: 1px solid var(--line); } .address-page .trust-grid > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } .address-page .operations-grid { grid-template-columns: 1fr 1fr; } .address-page .operation-card { min-height: 285px; } .address-page .dealer-layout { grid-template-columns: 1fr; } .address-page .uae-map { display: none; } .address-page .registration-grid { grid-template-columns: 0.65fr 1.35fr; gap: 50px; } .address-page .topic-links { grid-template-columns: 1fr 1fr; } .address-page .cta-banner { display: grid; } .address-page .footer-grid { gap: 35px; } } /* -- Tablets / mobile nav toggle (<= 860px) -- */ @media (max-width: 860px) { .address-page .section { padding: 74px 0; } .address-page .nav-wrap { grid-template-columns: 1fr auto auto; } .address-page .menu-button { display: grid; margin-right: 16px; cursor: pointer; place-items: center; } .address-page .main-nav { position: absolute; top: 82px; right: 0; left: 0; display: none; padding: 24px 20px 30px; border-bottom: 1px solid var(--line); align-items: flex-start; flex-direction: column; background: var(--white); box-shadow: 0 20px 35px rgba(45, 55, 36, 0.08); } .address-page .main-nav.is-open { display: flex; } .address-page .hero-grid { grid-template-columns: 1fr; } .address-page .hero-copy { padding: 70px 0 58px; } .address-page .hero-image { min-height: 500px; border-radius: 44% 0 0 0; } .address-page .office-grid { grid-template-columns: 1fr; gap: 50px; } .address-page .industry-grid { grid-template-columns: repeat(3, 1fr); gap: 26px 0; } .address-page .industry-grid > div:nth-child(3) { border-right: 0; } .address-page .dealer-grid { grid-template-columns: 1fr; } .address-page .dealer-card { min-height: 260px; } .address-page .registration-grid { grid-template-columns: 1fr; } .address-page .seo-columns { grid-template-columns: 1fr; gap: 20px; } .address-page .newsletter-grid { grid-template-columns: 1fr; padding-block: 28px; gap: 22px; } .address-page .footer-grid { grid-template-columns: 1fr 1fr; } } /* -- Mobile phones (<= 600px) -- */ @media (max-width: 600px) { .address-page .container, .address-page .narrow { width: min(100% - 28px, 1180px); } .address-page h1 { font-size: clamp(2.75rem, 13vw, 4rem); } .address-page h2 { font-size: clamp(2rem, 10vw, 3rem); } .address-page .site-header .brand strong { font-size: 1.15rem; } .address-page .site-header .brand small { font-size: 0.42rem; } .address-page .nav-actions { gap: 11px; } .address-page .nav-actions a:first-child { display: none; } .address-page .breadcrumbs { padding-top: 18px; } .address-page .hero-copy { padding-top: 55px; } .address-page .hero-image { min-height: 360px; } .address-page .button-row, .address-page .button { width: 100%; } .address-page .trust-grid { grid-template-columns: 1fr; } .address-page .trust-grid > div, .address-page .trust-grid > div:first-child, .address-page .trust-grid > div:nth-child(3) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); } .address-page .operations-grid { grid-template-columns: 1fr; } .address-page .industry-grid { grid-template-columns: 1fr 1fr; } .address-page .industry-grid > div:nth-child(3) { border-right: 1px solid rgba(255, 255, 255, 0.18); } .address-page .industry-grid > div:nth-child(even) { border-right: 0; } .address-page .dealer-heading { align-items: stretch; flex-direction: column; } .address-page .dealer-search { width: 100%; } .address-page .registration-section { padding: 70px 0; } .address-page .registration-form { padding: 25px 19px; } .address-page .form-grid { grid-template-columns: 1fr; } .address-page .full-width { grid-column: auto; } .address-page .topic-links { grid-template-columns: 1fr; } .address-page .cta-banner { padding: 38px 25px; } .address-page .newsletter form { grid-template-columns: 1fr; gap: 8px; } .address-page .newsletter input, .address-page .newsletter button { min-height: 49px; border-radius: 4px; } .address-page .newsletter button { justify-content: center; } .address-page .footer-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .address-page *, .address-page *::before, .address-page *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }