/* ============================================================== VOLTCORE AFRICA FINAL READABILITY / RESPONSIVE DISPLAY ============================================================== */ /* ============================================================ BASIC RESET ============================================================ */ html, body { width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; overflow-x:hidden !important; } /* ============================================================ MAIN PAGE ============================================================ */ main { width:100% !important; max-width:100% !important; margin:0 auto !important; } /* ============================================================ OUTER WEBSITE CONTAINER ============================================================ */ /* The current design is sitting too far inside the screen. Give it much more usable width. */ main > div, main > section, main .container, main .wrapper, main .content, main .site-container, main .homepage-container, main .home-container { max-width: 1700px !important; } /* ============================================================ LARGE DESKTOP ============================================================ */ @media (min-width:1400px) { main > div, main > section, main .container, main .wrapper, main .content, main .site-container, main .homepage-container, main .home-container { width: calc(100% - 32px) !important; max-width: 1700px !important; margin-left: auto !important; margin-right: auto !important; } } /* ============================================================ LARGE PRESENTATION / HERO ============================================================ */ /* If the current homepage uses an image as the large presentation artwork, make that artwork use the available width instead of leaving large black borders around it. */ main img { max-width: 100% !important; } /* ============================================================ COMMON HERO IMAGE CONTAINERS ============================================================ */ .hero, .hero-section, .hero-container, .hero-image, .banner, .banner-image, .home-hero { width: 100% !important; } /* ============================================================ HERO IMAGE ============================================================ */ .hero img, .hero-section img, .hero-container img, .hero-image img, .banner img, .banner-image img, .home-hero img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; } /* ============================================================ SECTION WIDTH ============================================================ */ section { width: 100% !important; } /* ============================================================ SECTION HEADINGS ============================================================ */ section h1 { font-size: clamp( 40px, 4vw, 68px ) !important; line-height: 1 !important; } section h2 { font-size: clamp( 30px, 3vw, 42px ) !important; line-height: 1.1 !important; } section h3 { font-size: 19px !important; line-height: 1.25 !important; } /* ============================================================ NORMAL WEBSITE TEXT ============================================================ */ section p { font-size: 15px !important; line-height: 1.6 !important; } /* ============================================================ SERVICE TEXT ============================================================ */ .service-card h3, .services-card h3, .service h3, .services h3 { font-size: 18px !important; line-height: 1.25 !important; } .service-card p, .services-card p, .service p, .services p { font-size: 14px !important; line-height: 1.55 !important; } /* ============================================================ PRODUCT TEXT ============================================================ */ .product-card h3, .products-card h3, .product h3, .products h3 { font-size: 18px !important; } .product-card p, .products-card p, .product p, .products p { font-size: 14px !important; line-height: 1.55 !important; } /* ============================================================ BUTTONS ============================================================ */ button, .btn, .button, .cta, a.button, a.btn { font-size: 12px !important; min-height: 40px !important; padding: 11px 17px !important; } /* ============================================================ OUTER HEADER ============================================================ */ header { min-height: 76px !important; } header nav a, nav a { font-size: 13px !important; } /* ============================================================ GREEN BRAND ============================================================ */ .green, .highlight, .accent, .kicker { color: #62ff20 !important; } /* ============================================================ TABLET ============================================================ */ @media (max-width:1100px) { main > div, main > section, main .container, main .wrapper, main .content, main .site-container { width: calc(100% - 24px) !important; } section h2 { font-size: 31px !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width:768px) { html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } main { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } main > div, main > section, main .container, main .wrapper, main .content, main .site-container, main .homepage-container, main .home-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 10px !important; padding-right: 10px !important; } /* Images must use the available phone width. */ main img { width: 100% !important; max-width: 100% !important; height: auto !important; } .hero, .hero-section, .hero-container, .hero-image, .banner, .banner-image, .home-hero { width: 100% !important; margin: 0 !important; } .hero h1, .hero-title, .hero-heading { font-size: clamp( 32px, 9vw, 46px ) !important; } .hero p, .hero-description, .hero-text { font-size: 14px !important; line-height: 1.6 !important; } section h2 { font-size: 27px !important; } section h3 { font-size: 18px !important; } section p { font-size: 14px !important; } /* Service cards become one per row. */ .services, .service-grid, .services-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; width: 100% !important; } /* Product cards become one per row. */ .products, .product-grid, .products-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; width: 100% !important; } .service-card p, .services-card p, .service p { font-size: 14px !important; } .product-card p, .products-card p, .product p { font-size: 14px !important; } /* Mobile buttons must be easy to tap. */ button, .btn, .button, .cta { min-height: 44px !important; padding: 12px 16px !important; } } /* ============================================================ SMALL PHONES ============================================================ */ @media (max-width:480px) { main > div, main > section, main .container, main .wrapper, main .content, main .site-container { padding-left: 8px !important; padding-right: 8px !important; } .hero h1, .hero-title, .hero-heading { font-size: 33px !important; } section h2 { font-size: 25px !important; } section p { font-size: 13px !important; } }