/* ============================================================ DigiKuhla Printworx — main stylesheet ============================================================ */ :root { --ink: #0a0b0d; --ink-2: #101115; --paper: #f4f3f1; --white: #ffffff; --text: #e9ecf2; --text-dim: #aab2c0; --text-dark: #23252b; --text-dark-dim: #5b5f68; --pink: #e0218a; --pink-deep: #c2186f; --blue: #1a86d0; --orange: #f5921e; --green: #7ab648; --purple: #7b2fbe; --radius: 14px; --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55); --font-head: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Manrope', 'Helvetica Neue', sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { overflow-x: clip; background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* height:auto is required — the width/height attributes on exist to give the browser an aspect-ratio hint (prevents layout shift). Without this, that height attribute becomes the used height and images stretch vertically. */ img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* Headings */ h1, h2, h3, .h-style { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.12; color: var(--white); } .accent-pink { color: var(--pink); } .accent-blue { color: var(--blue); } .accent-orange { color: var(--orange); } /* Subtle halftone dot texture */ .dots-bg { position: relative; } .dots-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.2px, transparent 1.3px); background-size: 18px 18px; pointer-events: none; } /* Full-width layout variant: add class "layout-full" to */ .layout-full .wrap, .layout-full .header-inner { max-width: none; padding-left: clamp(24px, 4vw, 64px); padding-right: clamp(24px, 4vw, 64px); } .layout-full .header-inner { padding-left: 12px; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; padding: 13px 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-pink { background: var(--pink); color: var(--white); box-shadow: 0 14px 30px -12px rgba(224, 33, 138, 0.55); } .btn-pink:hover { background: var(--pink-deep); } .btn-outline-light { border-color: rgba(255, 255, 255, 0.55); color: var(--white); background: transparent; } .btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); } .btn-outline-pink { border-color: var(--pink); color: var(--pink); background: transparent; } .btn-outline-pink:hover { background: var(--pink); color: var(--white); } .btn-dark { background: var(--ink); color: var(--white); } .btn-dark:hover { background: #1c1e24; } /* ============================================================ Header ============================================================ */ .site-header { position: relative; z-index: 50; background: var(--ink); } /* B-BBEE strip above the header */ .topbar { background: linear-gradient(95deg, #d6249f 0%, #7b2fbe 35%, #1a86d0 75%, #f5921e 100%); background-size: 180% 180%; animation: gradient-drift 12s ease-in-out infinite alternate; color: var(--white); text-align: center; padding: 8px 16px; font-family: var(--font-head); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; } .topbar svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 7px; } .header-bar { background: var(--white); border-radius: 0 0 28px 0; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.65); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px 24px 14px 12px; max-width: 1180px; margin: 0 auto; } /* The logo overflows below the bar (bar height never grows). A white tab hugs the logo: the bar's bottom edge curves down around it and back up to the straight line on both sides. */ .brand-logo { position: relative; display: block; z-index: 3; } .brand-logo img { height: 200px; width: auto; margin-bottom: -90px; /* keep a 60px flow height so the bar stays slim */ position: relative; z-index: 1; } /* Organic white wave sweeping down around the logo and back up to the bar's straight bottom edge (drawn as an inline SVG shape). The wave starts and ends tangent to the bar line, so it blends seamlessly. */ .brand-logo::before { content: ""; position: absolute; z-index: -1; top: calc(100% + 14px); /* the bar's bottom edge: anchor bottom + 14px bar padding — tracks any logo size */ left: -130px; right: -130px; height: 100px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C40,4 60,22 74,46 C86,67 95,87 120,92 C155,97 245,97 280,92 C305,87 314,67 326,46 C340,22 360,4 400,0 Z' fill='%23ffffff'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .main-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; } .main-nav a.nav-link { position: relative; font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; color: var(--text-dark); padding: 6px 2px; transition: color 0.15s ease; } .main-nav a.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .main-nav a.nav-link:hover { color: var(--pink); } .main-nav a.nav-link:hover::after, .main-nav a.nav-link.active::after { transform: scaleX(1); } .main-nav a.nav-link.active { color: var(--text-dark); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 26px; height: 3px; background: var(--text-dark); border-radius: 2px; margin: 5px 0; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ============================================================ Hero (landing) ============================================================ */ .hero { position: relative; overflow: hidden; padding: 72px 0 88px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 2; } .hero h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 700; } .hero p.lead { margin-top: 22px; font-size: 17px; color: var(--text-dim); max-width: 46ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; } .hero-visual { position: relative; } .hero-visual img { width: 100%; border-radius: 18px; box-shadow: var(--shadow); } .hero-visual::after { content: ""; position: absolute; inset: -40px -60px; background: radial-gradient(circle at 20% 20%, rgba(26, 134, 208, 0.22), transparent 55%), radial-gradient(circle at 85% 30%, rgba(245, 146, 30, 0.2), transparent 55%), radial-gradient(circle at 60% 90%, rgba(224, 33, 138, 0.22), transparent 55%); filter: blur(20px); z-index: -1; } /* ============================================================ Feature strip (white) ============================================================ */ .feature-strip { background: var(--paper); border-radius: 18px; padding: 42px 20px; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 2; } .feature-item { text-align: center; padding: 0 22px; border-right: 1px solid rgba(0, 0, 0, 0.09); } .feature-item:last-child { border-right: 0; } .feature-item .f-icon { width: 58px; height: 58px; margin: 0 auto 16px; display: grid; place-items: center; color: var(--pink); } .feature-item .f-icon svg { width: 46px; height: 46px; } .feature-item h3 { color: var(--text-dark); font-size: 16px; margin-bottom: 8px; } .feature-item p { color: var(--text-dark-dim); font-size: 14px; line-height: 1.55; } /* ============================================================ What we do ============================================================ */ .section { padding: 84px 0; position: relative; } .section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; } .section-head-row h2 { font-size: clamp(28px, 3.4vw, 40px); } .section-head-row p { color: var(--text-dim); margin-top: 8px; max-width: 44ch; } .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .service-card { background: var(--ink-2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, border-color 0.2s ease; } .service-card:hover { transform: translateY(-5px); border-color: rgba(224, 33, 138, 0.55); } .service-card img { width: 100%; aspect-ratio: 9 / 8; object-fit: cover; transition: transform 0.55s ease; } .service-card:hover img { transform: scale(1.06); } .service-card .card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; } .service-card h3 { font-size: 18px; margin-bottom: 10px; } .service-card p { font-size: 14px; color: var(--text-dim); flex: 1; } .card-link { margin-top: 16px; font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: var(--pink); display: inline-flex; align-items: center; gap: 7px; } .card-link:hover { color: var(--white); } /* ============================================================ Gradient CTA band ============================================================ */ .cta-band { background: linear-gradient(95deg, #d6249f 0%, #7b2fbe 30%, #1a86d0 60%, #f5921e 100%); background-size: 180% 180%; animation: gradient-drift 9s ease-in-out infinite alternate; border-radius: 18px; padding: 46px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; box-shadow: 0 30px 70px -30px rgba(214, 36, 159, 0.5); } .cta-band h2 { font-size: clamp(22px, 3vw, 34px); } .cta-band p { color: rgba(255, 255, 255, 0.9); margin-top: 6px; } /* ============================================================ Production facility ============================================================ */ .facility { text-align: center; } .facility h2 { font-size: clamp(26px, 3.2vw, 38px); } .facility .sub { color: var(--text-dim); margin-top: 10px; } .facility-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(5, 1fr); } .facility-item { padding: 0 20px; border-right: 1px solid rgba(255, 255, 255, 0.1); } .facility-item:last-child { border-right: 0; } .facility-item .f-icon { width: 54px; height: 54px; margin: 0 auto 14px; display: grid; place-items: center; color: var(--orange); } .facility-item .f-icon svg { width: 42px; height: 42px; } .facility-item h3 { font-size: 15px; margin-bottom: 6px; } .facility-item p { font-size: 13.5px; color: var(--text-dim); } .facility-item.pink-icons .f-icon { color: var(--pink); } /* ============================================================ Page title block (inner pages) ============================================================ */ .page-title { text-align: center; padding: 64px 0 52px; position: relative; } .page-title h1 { font-size: clamp(32px, 4.4vw, 52px); } .page-title p { color: var(--text-dim); margin-top: 12px; font-size: 17px; } /* ============================================================ Services page ============================================================ */ .services-panel { background: var(--paper); border-radius: 20px; padding: 34px; box-shadow: var(--shadow); } .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; } .service-block { display: grid; grid-template-columns: 200px 1fr; gap: 26px; padding: 32px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.09); } .services-grid .service-block:nth-last-child(-n + 2) { border-bottom: 0; } .service-block .block-img img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: 12px; } .block-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--white); margin-bottom: 14px; } .block-icon svg { width: 26px; height: 26px; } .block-icon.blue { background: var(--blue); } .block-icon.pink { background: var(--pink); } .block-icon.orange { background: var(--orange); } .block-icon.green { background: var(--green); } .block-icon.purple { background: var(--purple); border-radius: 14px; } .service-block h2 { color: var(--text-dark); font-size: 22px; margin-bottom: 10px; } .service-block .desc { color: var(--text-dark-dim); font-size: 14.5px; margin-bottom: 14px; } .service-block ul { margin-bottom: 20px; } .service-block ul li { color: var(--text-dark); font-size: 14px; padding: 3px 0 3px 16px; position: relative; } .service-block ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); } .service-block-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: center; padding: 36px 0 6px; } .service-block-wide .block-img img { width: 100%; border-radius: 14px; object-fit: cover; } /* ============================================================ Brands page ============================================================ */ .brand-card { background: var(--paper); border-radius: 20px; padding: 44px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: center; box-shadow: var(--shadow); } .brand-card + .brand-card { margin-top: 34px; } .brand-card .brand-info { text-align: center; } .brand-card .brand-info img.brand-logo-img { margin: 0 auto 22px; max-height: 190px; max-width: 100%; width: auto; object-fit: contain; } /* Dark tile for brand artwork that lives on a black background */ .brand-tile-dark { background: #050607; border-radius: 14px; overflow: hidden; display: grid; place-items: center; } .brand-tile-dark img { width: 78%; } .brand-card .brand-info p { color: var(--text-dark-dim); font-size: 15.5px; max-width: 34ch; margin: 0 auto 24px; } .brand-card .brand-products { overflow: hidden; border-radius: 14px; } .brand-card .brand-products img { width: 100%; border-radius: 14px; transition: transform 0.6s ease; } .brand-card:hover .brand-products img { transform: scale(1.04); } /* ============================================================ Completed projects ============================================================ */ .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .project-card { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09); background: var(--ink-2); transition: transform 0.25s ease, border-color 0.25s ease; } .project-card:hover { transform: translateY(-5px); border-color: rgba(224, 33, 138, 0.55); } .project-card img { width: 100%; } /* ============================================================ Quote page ============================================================ */ .quote-panel { background: var(--paper); border-radius: 20px; padding: 44px; max-width: 860px; margin: 0 auto; box-shadow: var(--shadow); } .quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-field { display: flex; flex-direction: column; gap: 7px; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12.5px; color: var(--text-dark); } .form-field input, .form-field select, .form-field textarea { font-family: var(--font-body); font-size: 15px; color: var(--text-dark); background: var(--white); border: 1.5px solid rgba(0, 0, 0, 0.14); border-radius: 10px; padding: 13px 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; width: 100%; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(224, 33, 138, 0.15); } .form-field textarea { min-height: 130px; resize: vertical; } .form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; } .btn-whatsapp { background: #25d366; color: #04220f; } .btn-whatsapp:hover { background: #2ee673; } .form-note { grid-column: 1 / -1; font-size: 13px; color: var(--text-dark-dim); } /* ============================================================ Ready-to-start CTA (centered) ============================================================ */ .ready-cta { text-align: center; padding: 76px 0 84px; } .ready-cta h2 { font-size: clamp(28px, 3.6vw, 42px); } .ready-cta p { color: var(--text-dim); margin: 14px 0 28px; font-size: 17px; } /* ============================================================ Footer ============================================================ */ .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.09); background: #060708; } .footer-bar { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 18px 34px; padding: 30px 0; } .footer-item { display: inline-flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text-dim); transition: color 0.15s ease; } a.footer-item:hover { color: var(--white); } .footer-item .fi-icon { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(224, 33, 138, 0.6); color: var(--pink); display: grid; place-items: center; flex-shrink: 0; } .footer-item .fi-icon svg { width: 17px; height: 17px; } .footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 18px 0; text-align: center; font-size: 12.5px; color: #5a6478; } .footer-legal a { color: #8f99ad; font-weight: 600; } .footer-legal a:hover { color: var(--white); } /* ============================================================ Animations ============================================================ */ @keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes gradient-drift { to { background-position: 100% 50%; } } @keyframes nav-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } /* Entrance animations for top-of-page content */ .hero h1 { animation: fade-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .hero p.lead { animation: fade-up 0.8s 0.15s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .hero-actions { animation: fade-up 0.8s 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .hero-visual { animation: fade-up 0.9s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .hero-visual img { animation: float-soft 7s ease-in-out 1.6s infinite; } .page-title h1 { animation: fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .page-title p { animation: fade-up 0.7s 0.12s cubic-bezier(0.22, 0.61, 0.36, 1) both; } /* Scroll reveals — js/main.js tags elements and flips them on when they enter the viewport. Without JS nothing is ever hidden. */ .will-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .will-reveal.revealed { opacity: 1; transform: none; } /* Micro-interactions */ .f-icon { transition: transform 0.3s ease; } .feature-item:hover .f-icon, .facility-item:hover .f-icon { transform: translateY(-4px) scale(1.08); } .card-link { transition: color 0.15s ease, transform 0.2s ease; } .card-link:hover { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .will-reveal { opacity: 1; transform: none; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1020px) { .card-grid { grid-template-columns: repeat(2, 1fr); } .facility-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 0; } .facility-item:nth-child(3n) { border-right: 0; } .services-grid { grid-template-columns: 1fr; } .services-grid .service-block:nth-last-child(2) { border-bottom: 1px solid rgba(0,0,0,0.09); } .footer-bar { grid-template-columns: repeat(2, auto); } } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .feature-strip { grid-template-columns: repeat(2, 1fr); gap: 34px 0; } .feature-item:nth-child(2n) { border-right: 0; } .brand-card { grid-template-columns: 1fr; padding: 30px; } .service-block-wide { grid-template-columns: 1fr; } .projects-grid { grid-template-columns: 1fr; } .nav-toggle { display: block; } .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0 18px; border-radius: 0 0 20px 20px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.5); display: none; } .main-nav.open { display: flex; animation: nav-drop 0.25s ease both; } .main-nav a.nav-link { padding: 13px 28px; border-bottom: 0; } .main-nav a.nav-link::after { display: none; } .main-nav a.nav-link.active { color: var(--pink); } .main-nav .btn { margin: 12px 28px 0; } .header-inner { position: relative; } } @media (max-width: 640px) { .section { padding: 60px 0; } .btn { white-space: normal; text-align: center; } .cta-band { padding: 34px 24px; } .card-grid { grid-template-columns: 1fr; } .facility-grid { grid-template-columns: 1fr 1fr; } .facility-item { border-right: 0 !important; } .service-block { grid-template-columns: 1fr; } .service-block .block-img img { min-height: 0; max-height: 260px; } .services-panel { padding: 22px; } .quote-panel { padding: 26px; } .quote-form { grid-template-columns: 1fr; } .cta-band { justify-content: center; text-align: center; } .footer-bar { grid-template-columns: 1fr; justify-content: start; } .brand-logo img { height: 72px; margin-bottom: 0; } .brand-logo::before, .brand-logo::after { display: none; } .header-bar { border-radius: 0 0 20px 20px; } .feature-strip { grid-template-columns: 1fr; } .feature-item { border-right: 0 !important; } } /* ============================================================ Accessibility, breadcrumbs & footer navigation ============================================================ */ /* Keyboard users can jump straight past the header nav. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 20px; background: var(--pink); color: var(--white); font-weight: 700; font-size: 14px; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; outline: 2px solid var(--white); outline-offset: -4px; } /* Visible breadcrumb trail — mirrors the BreadcrumbList JSON-LD. */ .breadcrumb { margin-bottom: 18px; animation: fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .breadcrumb ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .breadcrumb li { display: inline-flex; align-items: center; gap: 8px; } .breadcrumb li + li::before { content: "/"; color: rgba(170, 178, 192, 0.45); } .breadcrumb a { color: var(--text-dim); transition: color 0.15s ease; } .breadcrumb a:hover { color: var(--pink); } .breadcrumb [aria-current="page"] { color: var(--white); font-weight: 600; } /* Secondary text nav in the footer — helps crawlers reach every page. */ .footer-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 22px; font-size: 14px; } .footer-nav a { color: var(--text-dim); transition: color 0.15s ease; } .footer-nav a:hover { color: var(--pink); } @media (max-width: 640px) { .footer-nav { justify-content: center; } .breadcrumb { margin-bottom: 14px; } } /* ------------------------------------------------------------ Trust-feature row (Brands page) — 4 across, collapsing down. This used to be an inline grid-template-columns, which beat every media query and forced 4 columns even on phones, pushing the page wider than the screen. Kept as a class so the cascade can do its job. minmax(0, 1fr) lets the columns shrink instead of overflowing. ------------------------------------------------------------ */ .facility-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .facility-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; } @media (max-width: 1020px) { .facility-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .facility-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facility-grid-4 .facility-item { border-right: 0; } } @media (max-width: 640px) { .facility-grid, .facility-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ Quote form — spam honeypot, submit status, thank-you page ============================================================ */ /* Honeypot. Must stay reachable in the DOM (bots read it) but never be visible or focusable for a real visitor — so no display:none. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Inline result message under the submit buttons. */ .form-status { grid-column: 1 / -1; margin-top: 2px; padding: 12px 16px; border-radius: 10px; font-size: 14.5px; font-weight: 600; border: 1px solid transparent; } .form-status.is-pending { color: var(--text-dark-dim); background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); font-weight: 500; } .form-status.is-ok { color: #2f6b1f; background: rgba(122, 182, 72, 0.14); border-color: rgba(122, 182, 72, 0.45); } .form-status.is-error { color: #a3134f; background: rgba(224, 33, 138, 0.09); border-color: rgba(224, 33, 138, 0.38); } .quote-form button[disabled] { opacity: 0.65; cursor: not-allowed; } /* Confirmation tick on /thank-you */ .thanks-tick { width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; color: var(--white); background: linear-gradient(135deg, var(--green), #4e9c2b); box-shadow: 0 18px 40px -16px rgba(122, 182, 72, 0.75); animation: fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .thanks-tick svg { width: 38px; height: 38px; } /* ============================================================ reCAPTCHA v3 ============================================================ */ /* The floating badge clashes with the layout, so it is hidden. Google's terms allow that only if the attribution text is shown instead — see the .recaptcha-note paragraph under the quote form. visibility (not display) keeps the widget functional while taking it out of sight. */ .grecaptcha-badge { visibility: hidden; } .recaptcha-note { grid-column: 1 / -1; margin-top: -6px; font-size: 11.5px; line-height: 1.5; color: var(--text-dark-dim); opacity: 0.85; } .recaptcha-note a { color: var(--text-dark-dim); text-decoration: underline; text-underline-offset: 2px; } .recaptcha-note a:hover { color: var(--pink); }