/* ========================================================================== IdealEnvironmental 2026 — page styles Used only by template-environmental-2026.php (body.ie-body). Design tokens taken 1:1 from "IdealEnvironmental Homepage.html". ========================================================================== */ :root { --ie-orange: #ff6600; --ie-orange-dark: #cc5200; --ie-dark: #242424; --ie-darker: #1a1a1a; --ie-black: #111; --ie-grey: #f5f5f5; --ie-line: #e8e8e8; --ie-muted: #939598; --ie-head: 'Barlow Condensed', sans-serif; --ie-body: 'Inter', sans-serif; } /* -------------------------------------------------------------------------- RESET + BASE — reproduces the design's cascade exactly. The design layers two stylesheets and then inline styles: 1. a design-system sheet with element rules -> specificity (0,0,1) 2. the page's own *{margin:0;padding:0} -> specificity (0,0,0) 3. inline styles on every element -> always wins Because (1) is an element selector it survives (2). So headings really do inherit line-height 1.12 / letter-spacing -0.015em / margin-bottom 8px, and paragraphs really do inherit margin-bottom 12px, unless an inline style says otherwise. THE #ie-page PREFIX IS LOAD-BEARING — DO NOT REMOVE IT. This page renders inside the theme's header.php / footer.php, so bootstrap and the theme's style.css are loaded too. Everything here is prefixed with the #ie-page ID, which does two jobs at once: a) it keeps the design contained — nothing leaks onto the site header, the footer, or any other page; b) the ID makes every rule (1,x,y), so it outranks bootstrap's reboot (p, h1-h6, ul … all (0,0,1)) and the theme's style.css, including its ~25 Gravity Forms rules scoped with #page, e.g. "#page .gfield input[type='text']" (1,1,1) vs ours (1,2,1). Inside #ie-page the cascade then falls out naturally, no :where() needed: #ie-page * (1,0,0) reset #ie-page p (1,0,1) base element default -> beats the reset #ie-page .ie-lead (1,1,0) component -> beats the base Known exception: "#page .gfield input[type=checkbox]:checked:before" (1,3,1) still wins over our input rules (1,2,1). The shared homepage form has no checkbox field, so this does not bite today. Add a #ie-page rule with an extra class if a checkbox is ever added to the form. -------------------------------------------------------------------------- */ #ie-page *, #ie-page *::before, #ie-page *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Element defaults carried over from the design's design-system sheet. */ #ie-page h1, #ie-page h2, #ie-page h3, #ie-page h4, #ie-page h5, #ie-page h6 { line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 8px; } #ie-page p { margin: 0 0 12px; } #ie-page ul, #ie-page ol { list-style: none; } #ie-page img { display: block; max-width: 100%; } #ie-page figure { margin: 0; } /* font-weight: inherit is required — the theme's style.css has "a{text-decoration:none;color:#ec5b09;font-weight:700}", which would otherwise make every link on this page bold. */ #ie-page a { text-decoration: none; color: inherit; font-weight: inherit; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } /* In the design every carries an inline colour, so this generic hover rule is always overridden and links keep their colour on hover; only the elements with an explicit hover state (buttons, cards, FAQ rows, inputs) react. Here the component rules come later in the file and win for the same reason. */ #ie-page a:hover { color: var(--ie-orange); } /* Smooth anchor scrolling. The class is added to by js/env-2026.js, because header.php prints the tag and its class list. */ html.ie-html { scroll-behavior: smooth; } /* * Page typography. * * These live on #ie-page, NOT on body: the theme's header and footer render * outside this element and must keep their own font, size and colour. * font-size 15px / line-height 1.55 are the design's inherited base — the * button heights depend on that line-height. */ #ie-page { position: relative; font-family: var(--ie-body); font-size: 15px; line-height: 1.55; font-weight: 400; color: var(--ie-dark); background: #fff; -webkit-font-smoothing: antialiased; } /* Defensive: contains any horizontal overflow from the full-bleed sections. Deliberately NOT on body — the theme sets html,body{height:100%}, and adding overflow-x there turns body into a scroll container and breaks page scrolling. */ #ie-page { overflow-x: hidden; } #ie-page :focus-visible { outline: 2px solid var(--ie-orange); outline-offset: 2px; } #ie-page ::selection { background: rgba(255, 102, 0, 0.22); } #ie-page summary::-webkit-details-marker { display: none; } #ie-page .ie-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Shared building blocks -------------------------------------------------------------------------- */ #ie-page .ie-wrap { max-width: 1200px; margin: 0 auto; } #ie-page .ie-sec { padding: 64px 5%; } #ie-page .ie-sec--white { background: #fff; } #ie-page .ie-sec--grey { background: var(--ie-grey); } #ie-page .ie-sec--dark { background: var(--ie-dark); } #ie-page .ie-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ie-orange); font-family: var(--ie-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 12px; } #ie-page .ie-eyebrow::before { content: ''; width: 28px; height: 3px; background: var(--ie-orange); display: block; flex-shrink: 0; } #ie-page .ie-h2 { font-family: var(--ie-head); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; line-height: 1.05; color: var(--ie-dark); margin-bottom: 16px; } #ie-page .ie-h2--light { color: #fff; } /* The Contact heading is deliberately smaller than the other h2s. */ #ie-page .ie-h2--contact { font-size: clamp(2rem, 3.6vw, 2.9rem); } #ie-page .ie-h2 .ie-or { color: var(--ie-orange); } /* Commercial & Industrial body copy. */ #ie-page .ie-lead { color: #555; font-size: 0.98rem; line-height: 1.75; margin-bottom: 26px; } /* IdealCorp Advantage body copy — 24px in the design, not 26px. */ #ie-page .ie-lead--adv { margin-bottom: 24px; } /* Contact intro — .95rem / 32px in the design. */ #ie-page .ie-lead--light { color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; margin-bottom: 32px; } #ie-page .ie-note { font-size: 0.8rem; color: var(--ie-muted); margin-top: 18px; } #ie-page .ie-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } #ie-page .ie-grid2--center { align-items: center; } #ie-page .ie-grid2 > * { min-width: 0; } /* Buttons ------------------------------------------------------------------ */ /* No line-height here: the design's buttons inherit the base 1.55, which is what gives them their height. Setting 1.2 makes every button ~6px shorter. */ #ie-page .ie-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 4px; font-family: var(--ie-head); font-weight: 700; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; border: none; cursor: pointer; } #ie-page .ie-btn--sm { padding: 11px 24px; } #ie-page .ie-btn--primary { background: var(--ie-orange); color: #fff; } #ie-page .ie-btn--primary:hover { background: var(--ie-orange-dark); color: #fff; } /* Outline on dark background — label is white. */ #ie-page .ie-btn--ghost { background: transparent; color: #fff; border: 2px solid var(--ie-orange); padding: 11px 26px; } #ie-page .ie-btn--ghost:hover { background: var(--ie-orange); color: #fff; } /* Outline on light background — label is orange until hover. */ #ie-page .ie-btn--outline { background: transparent; color: var(--ie-orange); border: 2px solid var(--ie-orange); padding: 11px 24px; } #ie-page .ie-btn--outline:hover { background: var(--ie-orange); color: #fff; } /* Media frame -------------------------------------------------------------- */ #ie-page .ie-media { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ie-darker); } #ie-page .ie-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Only the two big side-by-side images get a min-height when the grid stacks (the design's .om-hero-img). Service panel images must NOT get it. */ #ie-page .ie-media--tall { border-radius: 8px; } #ie-page .ie-media__tag { position: absolute; top: 16px; right: 16px; background: var(--ie-orange); color: #fff; font-family: var(--ie-head); font-weight: 800; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-radius: 3px; pointer-events: none; } /* Example / CMS-placeholder badge ------------------------------------------ */ #ie-page .ie-badge { font-family: var(--ie-head); font-weight: 700; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ie-orange-dark); background: rgba(255, 102, 0, 0.12); border: 1px dashed rgba(255, 102, 0, 0.4); padding: 5px 10px; border-radius: 3px; display: inline-block; } /* -------------------------------------------------------------------------- 1. Announcement bar -------------------------------------------------------------------------- */ #ie-page .ie-announce { background: var(--ie-darker); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 10px 5%; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; text-align: center; } #ie-page .ie-announce__text { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); } #ie-page .ie-announce__link { font-family: var(--ie-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ie-orange); } /* -------------------------------------------------------------------------- 3. Hero -------------------------------------------------------------------------- */ #ie-page .ie-hero { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; padding: 64px 5%; background: var(--ie-darker); } #ie-page .ie-hero__bg { position: absolute; inset: 0; } #ie-page .ie-hero__bg img { width: 100%; height: 100%; object-fit: cover; } #ie-page .ie-hero__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(20, 20, 20, 0.93) 0%, rgba(20, 20, 20, 0.82) 45%, rgba(20, 20, 20, 0.45) 75%, rgba(20, 20, 20, 0.2) 100%); } #ie-page .ie-hero__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ie-orange); pointer-events: none; } #ie-page .ie-hero__inner { position: relative; z-index: 2; max-width: 680px; } #ie-page .ie-hero__badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 102, 0, 0.15); border: 1px solid rgba(255, 102, 0, 0.4); padding: 6px 14px; border-radius: 2px; color: var(--ie-orange); font-family: var(--ie-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 22px; } #ie-page .ie-hero__h1 { font-family: var(--ie-head); font-weight: 800; font-size: clamp(3rem, 6.4vw, 5.4rem); line-height: 0.93; color: #fff; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 14px; } #ie-page .ie-hero__h1 span { color: var(--ie-orange); } #ie-page .ie-hero__sub { font-family: var(--ie-head); font-size: clamp(1rem, 2.2vw, 1.3rem); color: rgba(255, 255, 255, 0.7); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 32px; max-width: 44ch; } #ie-page .ie-hero__stats { display: flex; margin-bottom: 40px; border-left: 3px solid var(--ie-orange); flex-wrap: wrap; } #ie-page .ie-hero__stat { padding: 8px 28px; border-right: 1px solid rgba(255, 255, 255, 0.12); } #ie-page .ie-hero__stat:first-child { padding: 8px 28px 8px 20px; } #ie-page .ie-hero__stat:last-child { border-right: none; } #ie-page .ie-hero__stat-num { font-family: var(--ie-head); font-weight: 800; font-size: 2.3rem; color: var(--ie-orange); line-height: 1; } #ie-page .ie-hero__stat-label { font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; } #ie-page .ie-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 4. Trust strip -------------------------------------------------------------------------- */ #ie-page .ie-trust { background: var(--ie-grey); padding: 18px 5%; border-bottom: 1px solid var(--ie-line); } #ie-page .ie-trust__inner { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; } #ie-page .ie-trust__item { display: flex; align-items: center; gap: 10px; font-family: var(--ie-head); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #555; } #ie-page .ie-trust__item::before { content: ''; width: 8px; height: 8px; background: var(--ie-orange); border-radius: 50%; flex-shrink: 0; } /* -------------------------------------------------------------------------- 5. Who we help -------------------------------------------------------------------------- */ #ie-page .ie-aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 40px; } #ie-page .ie-aud { background: #fff; border-radius: 6px; padding: 32px 24px; border-top: 4px solid var(--ie-orange); transition: transform 0.25s ease, box-shadow 0.25s ease; } #ie-page .ie-aud:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); } #ie-page .ie-aud__num { width: 52px; height: 52px; background: var(--ie-orange); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-family: var(--ie-head); font-weight: 800; font-size: 1.5rem; color: #fff; } #ie-page .ie-aud__title { font-family: var(--ie-head); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; margin-bottom: 10px; color: var(--ie-dark); } #ie-page .ie-aud__body { font-size: 0.9rem; color: #666; line-height: 1.6; } /* -------------------------------------------------------------------------- 6. Problems we solve -------------------------------------------------------------------------- */ #ie-page .ie-probbox { background: var(--ie-dark); border-radius: 8px; padding: 32px; color: #fff; } #ie-page .ie-probbox h3 { font-family: var(--ie-head); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 12px; } #ie-page .ie-probbox p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; line-height: 1.7; margin-bottom: 20px; } #ie-page .ie-problems { display: flex; flex-direction: column; } #ie-page .ie-problem { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--ie-line); } #ie-page .ie-problem__n { min-width: 28px; height: 28px; background: rgba(255, 102, 0, 0.12); border: 1px solid rgba(255, 102, 0, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ie-head); font-weight: 800; font-size: 0.85rem; color: var(--ie-orange); flex-shrink: 0; } #ie-page .ie-problem__t { font-size: 0.95rem; line-height: 1.6; color: var(--ie-dark); font-weight: 500; } /* -------------------------------------------------------------------------- 7. Services — desktop tabs + mobile accordion -------------------------------------------------------------------------- */ #ie-page .ie-svc-desk { display: grid; grid-template-columns: minmax(230px, 290px) 1fr; gap: 32px; margin-top: 40px; align-items: start; } #ie-page .ie-svc-tabs { display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; overflow: hidden; } #ie-page .ie-svc-tab { display: flex; gap: 12px; align-items: baseline; text-align: left; width: 100%; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: rgba(255, 255, 255, 0.55); padding: 16px 20px; cursor: pointer; font-family: var(--ie-head); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.2; transition: background 0.22s ease, color 0.22s ease; } #ie-page .ie-svc-tab__n { font-family: var(--ie-head); font-weight: 800; font-size: 0.8rem; opacity: 0.7; } #ie-page .ie-svc-tab[aria-selected='true'] { background: var(--ie-orange); color: #fff; } #ie-page .ie-svc-panel[hidden] { display: none; } #ie-page .ie-svc-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; min-width: 0; align-items: center; } #ie-page .ie-svc-panel > * { min-width: 0; } #ie-page .ie-svc-panel h3 { font-family: var(--ie-head); font-weight: 800; font-size: clamp(1.7rem, 2.8vw, 2.2rem); color: #fff; text-transform: uppercase; margin-bottom: 12px; line-height: 1.05; } #ie-page .ie-svc-panel__lead { color: rgba(255, 255, 255, 0.7); line-height: 1.7; font-size: 0.95rem; margin-bottom: 22px; } #ie-page .ie-svc-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; } #ie-page .ie-svc-list li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; line-height: 1.5; } #ie-page .ie-svc-list li::before { content: ''; min-width: 8px; height: 8px; background: var(--ie-orange); border-radius: 50%; margin-top: 6px; flex-shrink: 0; } #ie-page .ie-svc-panel .ie-media { aspect-ratio: 4 / 3; border-radius: 6px; } #ie-page .ie-svc-mob { display: none; margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.15); } #ie-page .ie-acc { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } #ie-page .ie-acc__sum { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 20px 0; cursor: pointer; list-style: none; } #ie-page .ie-acc__label { display: flex; gap: 12px; align-items: baseline; min-width: 0; } #ie-page .ie-acc__n { font-family: var(--ie-head); font-weight: 800; font-size: 0.8rem; color: var(--ie-orange); } #ie-page .ie-acc__title { font-family: var(--ie-head); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; color: #fff; line-height: 1.2; } #ie-page .ie-acc__body { padding: 0 0 26px; } #ie-page .ie-acc__body p { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; line-height: 1.7; margin-bottom: 16px; } /* The accordion list and CTA are slightly tighter than the desktop panel. */ #ie-page .ie-acc__body .ie-svc-list { margin-bottom: 20px; } #ie-page .ie-acc__body .ie-btn { font-size: 0.95rem; } #ie-page .ie-plus { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ie-orange); color: var(--ie-orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; line-height: 1; transition: transform 0.22s ease, background 0.22s ease; } #ie-page details[open] > summary .ie-plus { transform: rotate(45deg); background: var(--ie-orange); border-color: var(--ie-orange); color: #fff; } /* -------------------------------------------------------------------------- 8. Commercial & industrial — tags -------------------------------------------------------------------------- */ #ie-page .ie-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; } #ie-page .ie-tag { background: rgba(255, 102, 0, 0.1); border: 1px solid rgba(255, 102, 0, 0.25); color: var(--ie-orange-dark); padding: 6px 14px; border-radius: 4px; font-size: 0.85rem; font-weight: 700; font-family: var(--ie-head); text-transform: uppercase; letter-spacing: 0.5px; } /* -------------------------------------------------------------------------- 9. IdealCorp advantage -------------------------------------------------------------------------- */ #ie-page .ie-advlist { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; } #ie-page .ie-advitem { display: flex; align-items: flex-start; gap: 14px; } #ie-page .ie-advitem__n { width: 40px; height: 40px; background: rgba(255, 102, 0, 0.1); border: 1px solid rgba(255, 102, 0, 0.25); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--ie-head); font-weight: 800; color: var(--ie-orange); font-size: 1rem; } #ie-page .ie-advitem h4 { font-family: var(--ie-head); font-weight: 700; font-size: 0.98rem; text-transform: uppercase; margin-bottom: 3px; color: var(--ie-dark); } #ie-page .ie-advitem p { font-size: 0.88rem; color: #666; line-height: 1.6; } #ie-page .ie-brandlinks { display: flex; gap: 20px; flex-wrap: wrap; } #ie-page .ie-brandlinks a { font-family: var(--ie-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ie-orange); } /* -------------------------------------------------------------------------- 10. How it works — process steps -------------------------------------------------------------------------- */ #ie-page .ie-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px 0; margin-top: 40px; position: relative; } #ie-page .ie-steps__line { position: absolute; top: 32px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--ie-orange), var(--ie-orange-dark)); z-index: 0; } #ie-page .ie-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; position: relative; z-index: 1; } #ie-page .ie-step__n { width: 64px; height: 64px; border-radius: 50%; background: var(--ie-orange); display: flex; align-items: center; justify-content: center; font-family: var(--ie-head); font-weight: 800; font-size: 1.6rem; color: #fff; margin-bottom: 20px; border: 4px solid var(--ie-dark); box-shadow: 0 0 0 2px var(--ie-orange); flex-shrink: 0; } #ie-page .ie-step h4 { font-family: var(--ie-head); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; color: #fff; } #ie-page .ie-step p { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); line-height: 1.5; } /* -------------------------------------------------------------------------- 11. Testimonials -------------------------------------------------------------------------- */ #ie-page .ie-tst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 36px; } #ie-page .ie-tst { background: var(--ie-grey); border-radius: 6px; padding: 30px 26px; border-top: 4px solid var(--ie-orange); display: flex; flex-direction: column; gap: 14px; } #ie-page .ie-tst .ie-badge { align-self: flex-start; } #ie-page .ie-tst__stars { color: var(--ie-orange); font-size: 1rem; letter-spacing: 3px; line-height: 1; } #ie-page .ie-tst__quote { font-size: 0.95rem; line-height: 1.7; color: #555; } #ie-page .ie-tst__foot { margin-top: auto; border-top: 1px solid #e2e2e2; padding-top: 14px; font-size: 0.88rem; color: #666; } #ie-page .ie-tst__foot strong { font-family: var(--ie-head); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; color: var(--ie-dark); display: block; } #ie-page .ie-tst__src { font-size: 0.8rem; color: var(--ie-muted); } /* -------------------------------------------------------------------------- 12. Sectors -------------------------------------------------------------------------- */ #ie-page .ie-sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 32px; } #ie-page .ie-sector { background: #fff; border-radius: 6px; padding: 22px 20px; border-left: 3px solid var(--ie-orange); font-family: var(--ie-head); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; color: var(--ie-dark); transition: box-shadow 0.22s ease; } #ie-page .ie-sector:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07); } /* -------------------------------------------------------------------------- 13. Project experience -------------------------------------------------------------------------- */ #ie-page .ie-proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 40px; } #ie-page .ie-proj { background: var(--ie-grey); border-radius: 6px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } #ie-page .ie-proj:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); } #ie-page .ie-proj__img { position: relative; height: 190px; background: var(--ie-dark); } #ie-page .ie-proj__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #ie-page .ie-proj__body { padding: 24px; } #ie-page .ie-proj__body .ie-badge { margin-bottom: 12px; } #ie-page .ie-proj__body h3 { font-family: var(--ie-head); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; margin-bottom: 10px; color: var(--ie-dark); line-height: 1.2; } #ie-page .ie-proj__body p { font-size: 0.88rem; color: #666; line-height: 1.6; margin-bottom: 16px; } #ie-page .ie-proj__meta { display: flex; gap: 16px; flex-wrap: wrap; } #ie-page .ie-proj__meta span { font-size: 0.78rem; color: var(--ie-orange); font-weight: 600; } /* -------------------------------------------------------------------------- 14. Service coverage -------------------------------------------------------------------------- */ #ie-page .ie-cov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 36px; } #ie-page .ie-cov { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--ie-orange); border-radius: 6px; padding: 26px 24px; } #ie-page .ie-cov h4 { font-family: var(--ie-head); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; margin-bottom: 8px; color: #fff; } #ie-page .ie-cov p { font-size: 0.88rem; color: rgba(255, 255, 255, 0.55); line-height: 1.6; } #ie-page .ie-cov a { color: var(--ie-orange); font-weight: 700; font-size: 0.9rem; display: block; margin-top: 10px; } /* -------------------------------------------------------------------------- 15. FAQ -------------------------------------------------------------------------- */ #ie-page .ie-faqs { max-width: 820px; margin: 36px auto 0; display: flex; flex-direction: column; gap: 2px; } #ie-page .ie-faq { background: #fff; border-radius: 4px; border-bottom: 1px solid #ddd; } #ie-page .ie-faq__q { width: 100%; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; list-style: none; font-family: var(--ie-head); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; color: var(--ie-dark); } #ie-page .ie-faq__q:hover { color: var(--ie-orange); } #ie-page .ie-faq__a { font-size: 0.92rem; color: #555; line-height: 1.75; padding: 0 24px 22px; } #ie-page .ie-faq-cta { text-align: center; margin-top: 32px; } /* -------------------------------------------------------------------------- 16. Contact -------------------------------------------------------------------------- */ #ie-page .ie-contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; } #ie-page .ie-contact-grid > * { min-width: 0; } #ie-page .ie-cds { display: flex; flex-direction: column; gap: 20px; } #ie-page .ie-cd { display: flex; gap: 14px; align-items: flex-start; } #ie-page .ie-cd__icon { width: 40px; height: 40px; background: rgba(255, 102, 0, 0.15); border: 1px solid var(--ie-orange); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #ie-page .ie-cd__icon svg { width: 18px; height: 18px; stroke: var(--ie-orange); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ie-page .ie-cd__label { font-size: 0.78rem; color: var(--ie-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; } #ie-page .ie-cd__value, #ie-page .ie-cd__value a { color: #fff; font-size: 0.95rem; font-weight: 500; } #ie-page .ie-formcard { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 40px; min-width: 0; } #ie-page .ie-formcard h3 { font-family: var(--ie-head); font-weight: 700; font-size: 1.4rem; color: #fff; text-transform: uppercase; margin-bottom: 6px; } #ie-page .ie-formcard__sub { font-size: 0.78rem; color: var(--ie-muted); margin-bottom: 24px; } #ie-page .ie-formcard__note { font-size: 0.78rem; color: var(--ie-muted); margin-top: 14px; } #ie-page .ie-form-missing { color: #ffb27a; font-size: 0.9rem; background: rgba(255, 102, 0, 0.08); border: 1px dashed rgba(255, 102, 0, 0.4); padding: 14px 16px; border-radius: 4px; } /* -------------------------------------------------------------------------- 18. Sticky mobile CTA -------------------------------------------------------------------------- */ #ie-page .ie-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: none; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ie-black); border-top: 2px solid var(--ie-orange); } #ie-page .ie-sticky a { font-family: var(--ie-head); font-weight: 700; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; padding: 16px 12px; text-align: center; color: #fff; } #ie-page .ie-sticky a:first-child { background: var(--ie-dark); } #ie-page .ie-sticky a:last-child { background: var(--ie-orange); } /* -------------------------------------------------------------------------- 19. GRAVITY FORMS — dark theme to match the design. Scoped with the #ie-page ID on purpose. Gravity Forms' own gravity-theme stylesheet (assets/css/dist/theme.min.css) reaches (0,4,1) on labels and (0,5,1) on footer buttons, so a class-only scope like ".ie-page .ie-gf" (0,3,0) would lose to it depending on enqueue order. One ID puts these rules above anything Gravity Forms ships, without needing !important. This is the same approach the 2026 homepage uses via "#page .ig-home .ig-gf". Still fully scoped: nothing outside this page is affected. Written for the "gravity-theme" markup (the shortcode sets theme="gravity"). -------------------------------------------------------------------------- */ #ie-page .ie-gf .gform_wrapper { margin: 0; font-family: var(--ie-body); } /* The theme has "form,fieldset{font:100% 'DIN Next LT Pro'...}", which would cascade into every form element that does not set its own font. */ #ie-page .ie-gf form { font-family: var(--ie-body); } #ie-page .ie-gf .gform_heading, #ie-page .ie-gf .gform_required_legend { display: none; } /* Honeypot + the referral/UTM tracking fields must never take a grid row. Form 37 carries 8 hidden sup-gf-referral-tracking fields. */ #ie-page .ie-gf .gform_validation_container, #ie-page .ie-gf .gfield--type-honeypot, #ie-page .ie-gf .gfield_visibility_hidden { display: none !important; } /* Gravity Forms renders "(Required)" as text; the design uses an asterisk. */ #ie-page .ie-gf .gfield_required_text { font-size: 0; } #ie-page .ie-gf .gfield_required_text::after { content: '*'; font-size: 0.8rem; } #ie-page .ie-gf .gform_fields { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: 16px; grid-row-gap: 16px; margin: 0; padding: 0; } #ie-page .ie-gf .gfield { grid-column: span 12; list-style: none; margin: 0; padding: 0; max-width: 100%; } #ie-page .ie-gf .gfield--width-half { grid-column: span 6; } #ie-page .ie-gf .gfield--width-third { grid-column: span 4; } #ie-page .ie-gf .gfield--width-full { grid-column: span 12; } #ie-page .ie-gf .gfield_label, #ie-page .ie-gf .gform-field-label { display: block; font-family: var(--ie-body); font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; } #ie-page .ie-gf .gfield_required { color: var(--ie-orange); margin-left: 2px; } #ie-page .ie-gf input[type='text'], #ie-page .ie-gf input[type='email'], #ie-page .ie-gf input[type='tel'], #ie-page .ie-gf input[type='url'], #ie-page .ie-gf input[type='number'], #ie-page .ie-gf select, #ie-page .ie-gf textarea { width: 100%; padding: 11px 14px; border: 1.5px solid rgba(255, 255, 255, 0.12); border-radius: 4px; font-family: var(--ie-body); font-size: 0.9rem; color: #fff; background: rgba(255, 255, 255, 0.05); outline: none; box-shadow: none; transition: border-color 0.2s ease, background 0.2s ease; -webkit-appearance: none; appearance: none; } #ie-page .ie-gf input::placeholder, #ie-page .ie-gf textarea::placeholder { color: rgba(255, 255, 255, 0.3); opacity: 1; } #ie-page .ie-gf input:focus, #ie-page .ie-gf select:focus, #ie-page .ie-gf textarea:focus { border-color: var(--ie-orange); background: rgba(255, 255, 255, 0.07); color: #fff; } /* Gravity Forms sizes textareas with .small/.medium/.large; the design wants a fixed minimum and free vertical resize instead. */ #ie-page .ie-gf textarea, #ie-page .ie-gf textarea.small, #ie-page .ie-gf textarea.medium, #ie-page .ie-gf textarea.large { resize: vertical; height: auto; min-height: 110px; } #ie-page .ie-gf select { background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.55) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.55) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; } #ie-page .ie-gf select option { background: var(--ie-dark); color: #fff; } #ie-page .ie-gf .gfield_description, #ie-page .ie-gf .gform_fileupload_rules { font-size: 0.75rem; color: rgba(255, 255, 255, 0.35); padding: 6px 0 0; } /* File upload / drag & drop */ #ie-page .ie-gf .gform_drop_area { border: 2px dashed rgba(255, 255, 255, 0.18); border-radius: 8px; padding: 28px 20px; text-align: center; background: transparent; transition: border-color 0.2s ease, background 0.2s ease; } #ie-page .ie-gf .gform_drop_area:hover, #ie-page .ie-gf .gform_drop_area.gform_drop_area_hover { border-color: var(--ie-orange); background: rgba(255, 102, 0, 0.06); } #ie-page .ie-gf .gform_drop_instructions { display: block; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 10px; } #ie-page .ie-gf .gform_button_select_files { background: transparent; color: #fff; border: 2px solid var(--ie-orange); border-radius: 4px; padding: 9px 20px; font-family: var(--ie-head); font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } #ie-page .ie-gf .gform_button_select_files:hover { background: var(--ie-orange); } #ie-page .ie-gf .ginput_preview, #ie-page .ie-gf .gform_delete, #ie-page .ie-gf .ginput_preview_list .gfield_fileupload_filename { color: rgba(255, 255, 255, 0.8); font-size: 0.89rem; } #ie-page .ie-gf .gform_progress_bar_wrapper .gform_progress_bar { background: rgba(255, 255, 255, 0.08); } #ie-page .ie-gf .gform_progress_bar > span { background: var(--ie-orange); } /* Submit row. The design puts the submit button and the reassurance note on one row (space-between); the note is injected into the GF footer by ie_gf_submit_note() in inc/ig-env-2026.php. */ #ie-page .ie-gf .gform_footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; padding: 0; } #ie-page .ie-gf .gform_footer .ie-formcard__note { margin: 0; } #ie-page .ie-gf .gform_button, #ie-page .ie-gf input[type='submit'] { background: var(--ie-orange); color: #fff; border: none; border-radius: 4px; padding: 13px 26px; font-family: var(--ie-head); font-weight: 700; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; width: auto; } #ie-page .ie-gf .gform_button:hover, #ie-page .ie-gf input[type='submit']:hover { background: var(--ie-orange-dark); transform: translateY(-1px); } #ie-page .ie-gf .gform_ajax_spinner { filter: brightness(3); margin-left: 10px; } /* Validation + confirmation */ #ie-page .ie-gf .gform_validation_errors { background: rgba(255, 102, 0, 0.1); border: 1px solid var(--ie-orange); border-radius: 4px; box-shadow: none; padding: 14px 16px; margin-bottom: 20px; } #ie-page .ie-gf .gform_validation_errors > h2, #ie-page .ie-gf .gform_validation_errors .gform_submission_error { color: var(--ie-orange); font-family: var(--ie-head); font-weight: 700; font-size: 1rem; text-transform: uppercase; } #ie-page .ie-gf .gfield_error input, #ie-page .ie-gf .gfield_error select, #ie-page .ie-gf .gfield_error textarea { border-color: #ff8a4c; } #ie-page .ie-gf .gfield_validation_message, #ie-page .ie-gf .validation_message { background: transparent; border: none; color: #ffb27a; font-size: 0.8rem; padding: 6px 0 0; } #ie-page .ie-gf .gform_confirmation_message, #ie-page .ie-gf .gform_confirmation_wrapper { color: #fff; font-size: 0.88rem; line-height: 1.6; background: rgba(255, 102, 0, 0.1); border: 1px solid rgba(255, 102, 0, 0.3); border-radius: 4px; padding: 14px 16px; margin-top: 18px; } /* hCaptcha / Turnstile / reCAPTCHA holders */ #ie-page .ie-gf .h-captcha, #ie-page .ie-gf .cf-turnstile, #ie-page .ie-gf .ginput_recaptcha { margin-top: 8px; transform-origin: 0 0; } /* -------------------------------------------------------------------------- 20. Responsive -------------------------------------------------------------------------- */ /* Breakpoints below are exactly the design's: 1024 / 940 / 760. Nothing else. */ @media (max-width: 1024px) { #ie-page .ie-grid2, #ie-page .ie-contact-grid, #ie-page .ie-svc-panel { grid-template-columns: 1fr; } #ie-page .ie-media--tall { min-height: 320px; } } @media (max-width: 940px) { #ie-page .ie-svc-desk { display: none; } #ie-page .ie-svc-mob { display: block; } #ie-page .ie-steps__line { display: none; } } @media (max-width: 760px) { #ie-page .ie-sticky { display: grid; } /* On the body, not on #ie-page: the sticky bar floats over the theme footer too, so the whole document needs the clearance. */ body.ie-body { padding-bottom: 76px; } /* The design's .om-form2 -> single column. */ #ie-page .ie-gf .gfield--width-half, #ie-page .ie-gf .gfield--width-third { grid-column: span 12; } } @media (max-width: 420px) { #ie-page .ie-gf .h-captcha, #ie-page .ie-gf .cf-turnstile, #ie-page .ie-gf .ginput_recaptcha { transform: scale(0.85); } } @media (prefers-reduced-motion: reduce) { #ie-page *, #ie-page *::before, #ie-page *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }