/* ============================================================================ ICS 2026 — design system v2 Integrate Comfort Systems · icshvac.com One stylesheet. Page bodies are semantic HTML inside .ics-page. Built from the approved reference: ICS red and royal blue on white, deep navy sections carrying a faint blueprint grid. Archivo for display, Barlow for body. Every colour is a token; no page ever declares one. Changes from the reference, and why: · Icons come from one SVG sprite instead of being inlined at every use. Saves roughly 4KB per page and means an icon can never drift. · The 100vw full-bleed hack is a modifier (.ics-page--bleed), not the default. It exists for pasting into an Elementor HTML widget; the theme does not need it and it breaks when .ics-page sits on . · Focus states, reduced-motion and 44px tap targets added throughout. · Stat figures use tabular numerals so columns line up. ========================================================================= */ /* ------------------------------------------------------------- 1. tokens Declared on :root, not .ics-page, because the site chrome (header, nav, footer) renders outside the page wrapper and needs the same values. */ :root{ /* navy — structure and grounds */ --ink: #0e1c44; --ink-2: #15265c; --ink-3: #1f3a86; /* surfaces */ --paper: #f2f5fb; --white: #ffffff; --line: #dfe5f1; /* brand blue */ --blue: #1d3f8f; --blue-dk: #142d66; --blue-lt: #6d8fe0; /* signal red — CTA, emergency, urgency. never a heading colour */ --red: #d81f26; --red-dk: #b0161c; /* text */ --text: #232b3a; --muted: #5e6a82; /* semantic, separate from brand */ --ok: #0f7a52; --warn: #b4750a; /* type */ --fd: "Archivo", "Helvetica Neue", Arial, sans-serif; --fb: "Barlow", "Helvetica Neue", Arial, sans-serif; /* geometry */ --r: 12px; --r-s: 8px; --sh: 0 10px 34px rgba(10,22,52,.10); --sh2: 0 24px 64px rgba(10,22,52,.24); /* rhythm */ --sec: 84px; --gut: 24px; --max: 1200px; } @media (max-width: 768px){ :root{ --sec: 58px } } .ics-page{ font-family: var(--fb); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; } .ics-page *, .ics-page *::before, .ics-page *::after{ box-sizing: border-box } .ics-page img, .ics-page video{ max-width: 100%; height: auto; display: block } .ics-page a{ text-decoration: none; color: inherit } .ics-page h1, .ics-page h2, .ics-page h3, .ics-page h4{ margin: 0 } .ics-page p, .ics-page ul, .ics-page ol{ margin: 0 } /* Full-bleed escape. Only for pasting a page body into a constrained builder column — never when .ics-page is on . */ .ics-page--bleed{ width: 100vw; position: relative; left: 50%; margin-left: -50vw; overflow-x: hidden } /* The icon sprite itself is never rendered. */ .ics-sprite{ display: none } /* ------------------------------------------------- 2. layout primitives */ .ics-wrap{ max-width: var(--max); margin-inline: auto; padding-inline: var(--gut) } .ics-sec{ padding-block: var(--sec) } .ics-sec--tight{ padding-block: calc(var(--sec) * .72) } .ics-sec--paper{ background: var(--paper) } /* Blueprint grid over navy. Two hairline grids plus two coloured pools, so the ground reads as drafting paper rather than a flat block. */ .ics-sec--ink{ position: relative; color: rgba(255,255,255,.78); background: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px), radial-gradient(ellipse 60% 80% at 88% 8%, rgba(216,31,38,.16) 0%, transparent 60%), radial-gradient(ellipse 70% 80% at 4% 92%, rgba(29,63,143,.34) 0%, transparent 60%), var(--ink); background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%, 100% 100%; } /* --------------------------------------------------------- 3. typography */ .ics-page h1, .ics-page h2, .ics-page h3, .ics-page h4, .ics-h1, .ics-h2, .ics-h3{ font-family: var(--fd); text-wrap: balance; letter-spacing: -.01em; color: var(--ink); } .ics-page h1, .ics-h1{ font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 5.2vw, 66px); line-height: .98; letter-spacing: -.015em; } .ics-page h2, .ics-h2{ font-weight: 800; text-transform: uppercase; font-size: clamp(29px, 3.6vw, 46px); line-height: 1.05; } .ics-page h3, .ics-h3{ font-weight: 700; font-size: 20px; line-height: 1.25; text-transform: uppercase } .ics-figure-inner h3, .ics-figure-inner .ics-h3{ color: #fff } .ics-page h4{ font-weight: 700; font-size: 17px; line-height: 1.35 } .ics-page p{ margin-bottom: 15px } .ics-page p:last-child{ margin-bottom: 0 } .ics-lead{ font-size: 18px; line-height: 1.7; color: var(--muted); max-width: 680px } /* Light variants for use on --ink grounds. Scoped under .ics-page deliberately: a bare .ics-h2--light is specificity (0,1,0) and loses to `.ics-page h2` at (0,1,1), which paints it navy on a navy ground. Found on staging, not in review — worth remembering. */ .ics-page .ics-h1--light, .ics-page .ics-h2--light, .ics-page .ics-h3--light{ color: var(--white) } .ics-page .ics-lead--light{ color: rgba(255,255,255,.76) } /* Belt and braces: anything heading-shaped directly inside an ink section. */ .ics-page .ics-sec--ink > .ics-wrap > .ics-hdr h2, .ics-page .ics-sec--ink > .ics-wrap > .ics-hdr h3{ color: var(--white) } /* The one place a second colour enters display type. */ .ics-h1 .grad{ background: linear-gradient(90deg, var(--blue-lt) 0%, #fff 55%, #ffb3b6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ics-eyebrow{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--fb); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; } .ics-eyebrow::before{ content: ""; width: 28px; height: 3px; background: var(--red); border-radius: 2px; flex-shrink: 0 } .ics-eyebrow--red{ color: var(--red) } .ics-eyebrow--light{ color: var(--blue-lt) } .ics-hdr{ margin-bottom: 52px } .ics-hdr--c{ text-align: center } .ics-hdr--c .ics-eyebrow{ justify-content: center } .ics-hdr--c .ics-lead{ margin-inline: auto } .ics-hdr .ics-h2{ margin-bottom: 18px } .ics-prose > * + *{ margin-top: 15px } .ics-prose h2{ margin-top: 40px } .ics-prose h3{ margin-top: 30px } .ics-prose ul, .ics-prose ol{ padding-left: 22px } .ics-prose li{ margin-bottom: 8px } .ics-prose a{ color: var(--blue-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 2px } /* ------------------------------------------------------------ 4. buttons */ .ics-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--fb); font-weight: 700; font-size: 15.5px; line-height: 1; padding: 16px 28px; min-height: 48px; border: none; border-radius: var(--r-s); cursor: pointer; white-space: nowrap; letter-spacing: .01em; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; } .ics-btn .ics-i{ flex-shrink: 0 } .ics-btn--red{ background: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(216,31,38,.32) } .ics-btn--red:hover{ background: var(--red-dk); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(216,31,38,.42) } .ics-btn--blue{ background: var(--blue); color: #fff; box-shadow: 0 8px 22px rgba(29,63,143,.30) } .ics-btn--blue:hover{ background: var(--blue-dk); transform: translateY(-2px) } .ics-btn--ghost{ background: rgba(255,255,255,.07); color: #fff; border: 1.5px solid rgba(255,255,255,.45) } .ics-btn--ghost:hover{ background: rgba(255,255,255,.15); border-color: #fff; transform: translateY(-2px) } .ics-btn--dark{ background: var(--ink); color: #fff } .ics-btn--dark:hover{ background: var(--ink-2); transform: translateY(-2px) } .ics-btns{ display: flex; flex-wrap: wrap; gap: 13px } .ics-btns--c{ justify-content: center } /* Colour has to survive a host theme's anchor rules. */ .ics-page a.ics-btn--red, .ics-page a.ics-btn--red:hover, .ics-page a.ics-btn--blue, .ics-page a.ics-btn--blue:hover, .ics-page a.ics-btn--ghost, .ics-page a.ics-btn--ghost:hover, .ics-page a.ics-btn--dark, .ics-page a.ics-btn--dark:hover{ color: #fff } /* --------------------------------------------------------- 5. breadcrumb */ .ics-bc{ background: var(--ink); padding-block: 12px; font-size: 13px } .ics-bc ol{ display: flex; flex-wrap: wrap; gap: 8px; list-style: none; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); color: rgba(255,255,255,.55); } .ics-bc li{ margin: 0 } .ics-bc li:not(:last-child)::after{ content: "›"; margin-left: 8px; color: rgba(255,255,255,.35) } .ics-page .ics-bc a{ color: var(--blue-lt); font-weight: 600 } .ics-page .ics-bc a:hover{ color: #fff } .ics-page .ics-bc [aria-current]{ color: #fff; font-weight: 600 } /* --------------------------------------------------------------- 6. hero */ .ics-hero{ position: relative; overflow: hidden; padding: 80px 0 90px; background: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px), radial-gradient(ellipse 80% 70% at 92% 0%, rgba(216,31,38,.24) 0%, transparent 55%), radial-gradient(ellipse 90% 90% at 0% 100%, rgba(29,63,143,.30) 0%, transparent 55%), linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink-3) 100%); background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%, 100% 100%; } .ics-hero-inner{ position: relative; z-index: 2; display: grid; grid-template-columns: 1.18fr .82fr; gap: 54px; align-items: center } .ics-hero--wide .ics-hero-inner{ grid-template-columns: 1fr; max-width: 900px } .ics-hero--slim{ padding: 56px 0 60px } .ics-pill{ display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 8px 16px; border-radius: 6px; margin-bottom: 22px; } .ics-pill .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(216,31,38,.28); flex-shrink: 0 } .ics-hero .ics-h1{ color: #fff; margin-bottom: 20px } .ics-hero-sub{ color: rgba(255,255,255,.82); font-size: 18.5px; line-height: 1.65; max-width: 560px; margin-bottom: 30px; font-weight: 500 } .ics-hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px } .ics-hero-cats{ display: flex; flex-wrap: wrap; gap: 10px } .ics-cat{ display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); font-size: 13.5px; font-weight: 600; padding: 9px 15px; border-radius: 7px; transition: background .16s, border-color .16s, transform .16s; } .ics-page .ics-cat{ color: rgba(255,255,255,.92) } .ics-cat:hover{ background: rgba(255,255,255,.13); border-color: var(--blue-lt); transform: translateY(-2px) } .ics-page .ics-cat:hover{ color: #fff } .ics-cat .ics-i{ color: var(--red) } /* stat card — the hero's right column */ .ics-statcard{ position: relative; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 30px; backdrop-filter: blur(8px); box-shadow: var(--sh2); } .ics-statcard h3, .ics-statcard .ics-h3{ color: #fff; font-size: 18px; margin-bottom: 4px } .ics-statcard > p{ color: rgba(255,255,255,.60); font-size: 13.5px; margin-bottom: 22px } .ics-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px } .ics-stat{ border-radius: 11px; padding: 18px 16px; background: linear-gradient(160deg, rgba(29,63,143,.28), rgba(29,63,143,.06)); border: 1px solid rgba(109,143,224,.32); } .ics-stat:nth-child(2), .ics-stat:nth-child(3){ background: linear-gradient(160deg, rgba(216,31,38,.20), rgba(216,31,38,.05)); border-color: rgba(216,31,38,.32); } .ics-stat b{ display: block; font-family: var(--fd); font-size: 28px; font-weight: 900; color: #fff; line-height: 1; font-variant-numeric: tabular-nums } .ics-stat span{ display: block; margin-top: 6px; color: rgba(255,255,255,.66); font-size: 12px; font-weight: 600 } .ics-statcard-foot{ margin-top: 20px; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.72); font-size: 12.5px; font-weight: 600 } .ics-statcard-foot .ics-i{ color: #7fe0a6; flex-shrink: 0 } /* -------------------------------------------------------------- 7. trust */ .ics-trust{ background: var(--white); border-bottom: 1px solid var(--line); padding-block: 22px } .ics-trust-inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px } .ics-trust-item{ display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13.5px; color: var(--ink) } .ics-trust-item .ics-i{ color: var(--blue); flex-shrink: 0 } .ics-trust-sep{ width: 1px; height: 22px; background: var(--line) } @media (max-width: 768px){ .ics-trust-sep{ display: none } } /* -------------------------------------------------------- 8. split + figure */ .ics-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center } .ics-split--flip > :first-child{ order: 2 } .ics-checklist{ list-style: none; display: grid; gap: 11px; margin: 22px 0 26px; padding: 0 } .ics-checklist li{ display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; font-weight: 600; color: var(--text) } .ics-checklist .ics-i{ color: var(--red); flex-shrink: 0; margin-top: 3px } .ics-figure{ border-radius: 16px; overflow: hidden; position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh); background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(150deg, var(--ink) 0%, var(--ink-3) 100%); background-size: 38px 38px, 38px 38px, 100% 100%; } .ics-figure::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 80% 20%, rgba(216,31,38,.24), transparent 60%), radial-gradient(ellipse 60% 70% at 15% 85%, rgba(29,63,143,.34), transparent 60%); } .ics-figure-inner{ position: relative; z-index: 2; padding: 34px; width: 100% } .ics-figure-inner h3{ color: #fff; font-size: 22px; margin-bottom: 18px } .ics-vals{ display: grid; gap: 12px } .ics-val{ display: flex; gap: 13px; align-items: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 15px 16px } .ics-val .ics-i{ color: var(--blue-lt); flex-shrink: 0; margin-top: 2px } .ics-val b{ display: block; font-family: var(--fd); font-size: 15px; font-weight: 700; color: #fff } .ics-val span{ color: rgba(255,255,255,.62); font-size: 13px } /* ------------------------------------------------------- 9. card grid */ .ics-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px } .ics-grid--2{ grid-template-columns: repeat(2, 1fr) } .ics-grid--4{ grid-template-columns: repeat(4, 1fr) } .ics-card{ position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; transition: transform .2s, box-shadow .2s, border-color .2s; } .ics-card::after{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform .26s; } .ics-card:hover{ transform: translateY(-5px); box-shadow: var(--sh); border-color: transparent } .ics-card:hover::after{ transform: scaleY(1) } .ics-card .ic{ width: 52px; height: 52px; border-radius: 12px; margin-bottom: 17px; display: flex; align-items: center; justify-content: center; background: rgba(29,63,143,.10); color: var(--blue); } .ics-card.is-red .ic{ background: rgba(216,31,38,.10); color: var(--red) } .ics-card.is-red::after{ background: var(--red) } .ics-card h3{ margin-bottom: 8px } .ics-card p{ font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; flex-grow: 1 } .ics-card .links{ display: flex; flex-wrap: wrap; gap: 6px 14px } .ics-page .ics-card .links a{ font-size: 13px; font-weight: 700; color: var(--blue-dk); display: inline-flex; align-items: center; gap: 5px } .ics-page .ics-card.is-red .links a{ color: var(--red-dk) } .ics-card .links a:hover{ text-decoration: underline } /* ----------------------------------------------------- 10. benefits (dark) */ .ics-benefits{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px } .ics-benefit{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: var(--r); padding: 26px 22px } .ics-benefit .ic{ width: 46px; height: 46px; border-radius: 11px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; background: rgba(109,143,224,.14); color: var(--blue-lt); } .ics-benefit h3{ color: #fff; font-size: 17px; margin-bottom: 7px } .ics-benefit p{ color: rgba(255,255,255,.62); font-size: 13.5px; line-height: 1.55 } /* --------------------------------------------------------- 11. process */ .ics-steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; counter-reset: ics-step } .ics-step{ position: relative; counter-increment: ics-step; margin: 0 } .ics-step::before{ content: counter(ics-step); font-family: var(--fd); font-weight: 900; font-size: 16px; width: 46px; height: 46px; border-radius: 10px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(29,63,143,.30); } .ics-step:nth-child(even)::before{ background: var(--red); box-shadow: 0 6px 16px rgba(216,31,38,.30) } .ics-step h3{ font-size: 17px; margin-bottom: 8px } .ics-step p{ font-size: 14px; color: var(--muted); line-height: 1.55 } .ics-sec--ink .ics-step h3{ color: #fff } .ics-sec--ink .ics-step p{ color: rgba(255,255,255,.62) } /* ------------------------------------------------------- 12. CTA band */ .ics-band{ position: relative; overflow: hidden; background: linear-gradient(120deg, var(--blue-dk) 0%, var(--blue) 50%, var(--red) 130%) } .ics-band::after{ content: ""; position: absolute; right: -40px; top: -40px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(216,31,38,.45), transparent 65%); pointer-events: none; } .ics-band-inner{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding-block: 54px } .ics-band h2{ color: #fff; font-size: clamp(26px, 3.1vw, 40px); line-height: 1.08 } .ics-band p{ color: rgba(255,255,255,.92); font-size: 17px; margin-top: 8px; font-weight: 500; max-width: 540px } .ics-band-btns{ display: flex; flex-wrap: wrap; gap: 13px } /* ------------------------------------------------------------- 13. FAQ */ .ics-faq{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start } .ics-faq-item{ background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden } .ics-faq-item summary{ list-style: none; cursor: pointer; padding: 20px 24px; min-height: 44px; font-family: var(--fb); font-weight: 700; font-size: 15.5px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 14px; } .ics-faq-item summary::-webkit-details-marker{ display: none } .ics-faq-item summary .ics-i{ color: var(--red); transition: transform .25s; flex-shrink: 0 } .ics-faq-item details[open] summary .ics-i{ transform: rotate(45deg) } .ics-faq-item:has(details[open]){ border-color: var(--blue) } .ics-faq-ans{ padding: 0 24px 22px; font-size: 14.5px; color: var(--muted); line-height: 1.65 } .ics-page .ics-faq-ans a{ color: var(--blue-dk); font-weight: 700 } /* --------------------------------------------------- 14. service areas */ .ics-areas{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px } .ics-area{ display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--r-s); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); font-size: 13.5px; font-weight: 600; transition: background .16s, border-color .16s; } .ics-page .ics-area{ color: rgba(255,255,255,.86) } .ics-area:hover{ background: rgba(29,63,143,.22); border-color: var(--blue-lt) } .ics-page .ics-area:hover{ color: #fff } .ics-area .ics-i{ color: var(--red); flex-shrink: 0 } /* Towns that are not linked — the same chip, without the affordance. */ .ics-area--plain{ cursor: default } .ics-area--plain:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10) } /* --------------------------------------------- 15. spec / comparison table */ .ics-spec{ overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--white) } .ics-spec table{ border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px } .ics-spec th{ text-align: left; padding: 14px 16px; background: var(--paper); font-family: var(--fd); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line); } .ics-spec td{ padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--text) } .ics-spec tr:last-child td{ border-bottom: 0 } .ics-spec tbody tr:hover{ background: var(--paper) } /* ------------------------------------------------- 16. form + contact */ .ics-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start } .ics-form-shell{ background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh); overflow: hidden; padding: 8px } .ics-form-shell iframe{ width: 100%; border: none; border-radius: var(--r-s); display: block } .ics-contact-info{ background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 30px } .ics-ci-row{ display: flex; gap: 14px; align-items: flex-start; padding-block: 14px; border-bottom: 1px solid var(--line) } .ics-ci-row:last-of-type{ border-bottom: none } .ics-ci-row .ics-i{ color: var(--blue); flex-shrink: 0; margin-top: 3px } .ics-ci-row b{ display: block; font-family: var(--fd); font-weight: 700; font-size: 15px; color: var(--ink) } .ics-ci-row span{ display: block; color: var(--muted); font-size: 13.5px } .ics-page .ics-ci-row a{ color: var(--blue-dk); font-weight: 600 } .ics-ci-cta{ margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px } /* Google Business Profile map. */ .ics-map{ border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh); aspect-ratio: 16 / 10; background: var(--paper) } .ics-map iframe{ width: 100%; height: 100%; border: 0; display: block } /* ------------------------------------------------------------ 17. video */ .ics-video-wrap{ max-width: 880px; margin-inline: auto } .ics-video{ position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; box-shadow: var(--sh2); background: var(--ink); border: 1px solid var(--line) } .ics-video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block } .ics-video-cap{ margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted) } .ics-video-cap .ics-i{ color: var(--red); flex-shrink: 0 } .ics-vid-feature{ display: grid; grid-template-columns: 1.55fr .85fr; gap: 46px; align-items: center } .ics-vid-feature .ics-video-wrap{ max-width: none; margin: 0 } .ics-vid-feature .ics-video-cap{ justify-content: flex-start } .ics-vid-copy .ics-eyebrow{ margin-bottom: 12px } .ics-vid-copy .ics-h2{ margin-bottom: 14px } .ics-vid-copy .ics-lead{ margin-bottom: 24px } /* --------------------------------------------------------- 18. related */ .ics-related{ border-top: 1px solid var(--line); padding-top: 32px } .ics-related ul{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; list-style: none; padding: 0; margin-top: 14px } .ics-related li{ margin: 0 } .ics-page .ics-related a{ color: var(--blue-dk); font-weight: 700; font-size: 15px } .ics-related a:hover{ text-decoration: underline } /* Section 19 held the authoring placeholder component (.ics-imgslot) — a dashed box carrying a description of the photo that ought to go there. Every slot and the component itself were removed before launch: a placeholder is a note to ourselves, and there is no version of it that belongs on a live site. */ /* ------------------------------------------ 20. accessibility + motion */ .ics-page a:focus-visible, .ics-page button:focus-visible, .ics-page summary:focus-visible, .ics-page iframe:focus-visible{ outline: 3px solid var(--blue-lt); outline-offset: 3px; border-radius: 4px } .ics-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap } @media (prefers-reduced-motion: reduce){ .ics-page *, .ics-page *::before, .ics-page *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .ics-btn:hover, .ics-card:hover, .ics-cat:hover{ transform: none } } /* ------------------------------------------------------- 21. responsive */ @media (max-width: 1024px){ .ics-hero-inner{ grid-template-columns: 1fr; gap: 40px } .ics-vid-feature{ grid-template-columns: 1fr; gap: 30px } .ics-grid, .ics-grid--4{ grid-template-columns: repeat(2, 1fr) } .ics-benefits{ grid-template-columns: repeat(2, 1fr) } .ics-steps{ grid-template-columns: repeat(2, 1fr) } .ics-areas{ grid-template-columns: repeat(3, 1fr) } } @media (max-width: 768px){ .ics-hero{ padding: 56px 0 64px } .ics-split{ grid-template-columns: 1fr; gap: 36px } .ics-split--flip > :first-child{ order: 0 } .ics-grid, .ics-grid--2, .ics-grid--4{ grid-template-columns: 1fr } .ics-benefits{ grid-template-columns: 1fr } .ics-steps{ grid-template-columns: 1fr } .ics-faq{ grid-template-columns: 1fr } .ics-areas{ grid-template-columns: repeat(2, 1fr) } .ics-form-grid{ grid-template-columns: 1fr } .ics-hdr{ margin-bottom: 36px } .ics-figure{ min-height: 320px } } /* ============================================================ 22. call tracking Every phone number on the site is wrapped in .ics-tel with the same markup and the same format, so a dynamic-number-insertion snippet (CallRail and equivalents) can find and swap all of them with one selector: document.querySelectorAll('a.ics-tel') The href is the source of truth; .ics-tel__n holds the display text so a swap can replace the digits without disturbing an icon or a label beside it. Never hard-code a number anywhere else. ========================================================================= */ .ics-tel__n{ font-variant-numeric: tabular-nums } /* Site-wide link reset. This used to live in the old header block and went out with it, which left every link in the header, homepage and footer underlined — .ics-page a{text-decoration:none} only covers authored page content, and none of the theme-rendered templates have that ancestor. Post bodies keep their underlines: .ics-site .post-body a is more specific. */ .ics-site a{ text-decoration: none; color: inherit } .ics-site a:hover{ text-decoration: none } /* ============================================================ 23. site chrome The header this section used to style is gone — replaced in §25 by a faithful rebuild of the client's real header. Only the skip link and the footer survive here; the old .ics-header / .ics-utility / .ics-nav rules were removed because they were still matching the new markup. One of them, `.ics-nav ul{ gap: 22px }`, was silently adding 220px across the eleven nav items and pushing the last two off the screen. */ .ics-skip{ position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: 14px 20px; font-weight: 700; } .ics-skip:focus{ left: 0 } /* footer */ .ics-footer{ background: var(--ink); color: #a9b8d8; padding-block: 64px 32px; font-size: 14.5px } .ics-footer h4{ font-family: var(--fd); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8fa3cd; margin-bottom: 14px } .ics-footer__cols{ display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px } @media (max-width: 900px){ .ics-footer__cols{ grid-template-columns: 1fr 1fr } } @media (max-width: 560px){ .ics-footer__cols{ grid-template-columns: 1fr } } .ics-footer ul{ list-style: none; margin: 0; padding: 0 } .ics-footer li{ margin-bottom: 9px } .ics-site .ics-footer a{ color: #a9b8d8 } .ics-site .ics-footer a:hover{ color: #fff } .ics-footer address{ font-style: normal; margin-bottom: 12px; line-height: 1.7 } .ics-footer__badge{ display: inline-block; font-family: var(--fd); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(216,31,38,.22); border: 1px solid rgba(216,31,38,.4); border-radius: 5px; padding: 4px 9px; margin-bottom: 10px } /* licence numbers are legally required in NJ advertising — never remove */ .ics-footer__lic{ font-family: var(--fb); font-size: 13px; color: #8fa3cd; margin-top: 22px } .ics-footer__legal{ margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 12.5px; color: #8fa3cd; } .ics-site a:focus-visible, .ics-site button:focus-visible{ outline: 3px solid var(--blue-lt); outline-offset: 3px; border-radius: 4px } /* ------------------------------------------------------------ 24. blog The archive at /blogs/ and the single post. These render outside .ics-page — the post body is editor HTML, not authored page markup — so every rule here is scoped to .ics-site or to its own component class, never to a bare tag. That is the same trap as the .ics-h2--light collision: a bare `h2` rule here would reach into 155 posts of legacy markup and repaint half of it. */ /* --- archive grid --- */ .ics-site .ics-postgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px } @media (max-width: 980px){.ics-site .ics-postgrid{ grid-template-columns: repeat(2, 1fr) } } @media (max-width: 640px){.ics-site .ics-postgrid{ grid-template-columns: 1fr } } .ics-site .ics-postcard{ position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); transition: transform .2s, box-shadow .2s, border-color .2s; } .ics-site .ics-postcard::after{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform .26s; } .ics-site .ics-postcard:hover{ transform: translateY(-5px); box-shadow: var(--sh); border-color: transparent } .ics-site .ics-postcard:hover::after{ transform: scaleY(1) } /* The whole card is the target — 44px minimum is met by the card, not the link. */ .ics-site .ics-postcard__link{ display: flex; flex-direction: column; height: 100%; padding: 26px 24px 24px; color: inherit } .ics-site .ics-postcard__date{ font-family: var(--fd); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .ics-site .ics-postcard__title{ font-family: var(--fd); font-size: 20px; line-height: 1.25; color: var(--ink); margin: 0 0 10px; font-weight: 700; } .ics-site .ics-postcard__excerpt{ font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0 0 18px } .ics-site .ics-postcard__more{ margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--fd); font-size: 13.5px; font-weight: 600; color: var(--blue); } .ics-site .ics-postcard__more .ics-i{ width: 15px; height: 15px; transition: transform .2s } .ics-site .ics-postcard:hover .ics-postcard__more{ color: var(--red) } .ics-site .ics-postcard:hover .ics-postcard__more .ics-i{ transform: translateX(4px) } /* --- pagination --- */ .ics-site .ics-pager{ margin-top: 44px } .ics-site .ics-pager ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center } .ics-site .ics-pager a,.ics-site .ics-pager span{ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; font-family: var(--fd); font-size: 14.5px; font-weight: 600; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--white); color: var(--ink); } .ics-site .ics-pager a:hover{ border-color: var(--blue); color: var(--blue) } .ics-site .ics-pager .current{ background: var(--blue); border-color: var(--blue); color: #fff } .ics-site .ics-pager .dots{ border-color: transparent; background: transparent; color: var(--muted); min-width: 24px; padding: 0 4px } /* --- single post --- */ .ics-site .ics-hero--post{ padding: 64px 0 68px } .ics-site .ics-hero--post h1{ font-family: var(--fd); color: var(--white); font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1.1; max-width: 20ch; max-width: 900px; } .ics-site .ics-hero--post .ics-label{ display: inline-block; font-family: var(--fd); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-lt); margin-bottom: 14px; } /* Post body. Legacy editor HTML — headings, lists, tables and images that no one is going to re-author. Constrain the measure and set the rhythm; do not try to restyle what the old editor produced. */ .ics-site .post-body{ max-width: 760px; font-size: 17.5px; line-height: 1.75; color: var(--text) } .ics-site .post-body > * + *{ margin-top: 1.1em } .ics-site .post-body h2{ font-family: var(--fd); font-size: clamp(23px, 2.5vw, 30px); line-height: 1.2; color: var(--ink); font-weight: 700; margin-top: 1.9em; } .ics-site .post-body h3{ font-family: var(--fd); font-size: clamp(19px, 2vw, 23px); line-height: 1.25; color: var(--ink); font-weight: 700; margin-top: 1.6em; } .ics-site .post-body h4{ font-family: var(--fd); font-size: 18px; color: var(--ink); font-weight: 700; margin-top: 1.4em } .ics-site .post-body a{ color: var(--blue); text-decoration: underline; text-underline-offset: 2px } .ics-site .post-body a:hover{ color: var(--red) } .ics-site .post-body ul,.ics-site .post-body ol{ padding-left: 1.35em } .ics-site .post-body li + li{ margin-top: .5em } .ics-site .post-body img{ max-width: 100%; height: auto; border-radius: var(--r-s) } .ics-site .post-body blockquote{ margin-inline: 0; padding: 18px 24px; border-left: 4px solid var(--red); background: var(--paper); border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--ink); } .ics-site .post-body table{ width: 100%; border-collapse: collapse; font-size: 15.5px } .ics-site .post-body th,.ics-site .post-body td{ border: 1px solid var(--line); padding: 10px 12px; text-align: left } .ics-site .post-body th{ background: var(--paper); font-family: var(--fd); color: var(--ink) } /* Wide legacy tables must scroll rather than push the page sideways. */ .ics-site .post-body .ics-scroll,.ics-site .post-body figure.wp-block-table{ overflow-x: auto } /* Authored posts: the monthly video article. Two components only — the embed and a closing CTA. Both are scoped under .ics-site .post-body rather than .ics-page, because a post has no .ics-page ancestor and the modifiers that live there would silently not apply. Same collision as the archive hero and the 404. */ .ics-site .post-body .ics-video-wrap{ margin-block: 1.7em } .ics-site .post-body .ics-postcta{ margin-top: 2.4em; padding: 24px 26px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 0 var(--r-s) var(--r-s) 0; } .ics-site .post-body .ics-postcta > * + *{ margin-top: .8em } .ics-site .post-body .ics-postcta__t{ font-family: var(--fd); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink); } .ics-site .post-body .ics-postcta__a{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-family: var(--fd); font-size: 16.5px; font-weight: 700; } /* The link reset in .ics-site .post-body a lands at (0,2,1) and underlines everything, which is right for prose and wrong for these two. */ .ics-site .post-body .ics-postcta__a a{ display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; } .ics-site .post-body .ics-postcta__a a:hover{ text-decoration: underline } .ics-site .post-body .ics-postcta__a .ics-i{ color: var(--red); flex-shrink: 0 } /* Archive hero. Self-contained on purpose — see the note in blog-archive.php. The --light modifiers live under .ics-page and this template has no such ancestor, so nothing here may depend on them. */ .ics-site .ics-hero--tpl{ padding: 58px 0 62px } .ics-site .ics-hero--tpl .ics-eyebrow{ color: var(--blue-lt) } .ics-site .ics-hero--tpl h1{ font-family: var(--fd); font-weight: 800; color: var(--white); font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; margin: 10px 0 0; } .ics-site .ics-tpl-lead{ margin-top: 14px; max-width: 62ch; font-size: 17.5px; line-height: 1.6; color: rgba(255,255,255,.76) } /* --- theme-rendered templates: case study, 404 --- */ /* .ics-pill and .ics-hero-ctas are defined under .ics-page only, so they get a self-contained copy here for the templates that have no .ics-page ancestor. */ .ics-site .ics-hero--tpl .ics-pill{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--fd); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 8px 15px; margin-bottom: 16px; } .ics-site .ics-hero--tpl .ics-pill .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(216,31,38,.28); flex-shrink: 0; } .ics-site .ics-hero--tpl .ics-hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px } .ics-site .ics-band .ics-hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px } /* Breadcrumb outside .ics-page. */ .ics-site .ics-bc--tpl{ background: var(--paper); border-bottom: 1px solid var(--line) } .ics-site .ics-bc--tpl ol{ max-width: var(--max); margin-inline: auto; padding: 13px var(--gut); list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); } .ics-site .ics-bc--tpl li + li::before{ content: "/"; margin-right: 8px; color: var(--line) } .ics-site .ics-bc--tpl a{ color: var(--blue) } .ics-site .ics-bc--tpl a:hover{ color: var(--red) } .ics-site .ics-bc--tpl [aria-current]{ color: var(--ink) } .ics-site .ics-backlink{ display: inline-flex; align-items: center; min-height: 44px; font-family: var(--fd); font-size: 15px; font-weight: 600; color: var(--blue); } .ics-site .ics-backlink:hover{ color: var(--red) } /* Case-study images sit inline in legacy markup with no wrapper. */ .ics-site .case-study .post-body img{ border-radius: var(--r); box-shadow: var(--sh) } /* Buttons inside theme-rendered templates. .ics-btn--red and --ghost set their colour at (0,1,0), and Elementor's global kit styles links as .elementor-kit-N a at (0,1,1) — so on any template without a .ics-page ancestor the kit wins and the button text renders near-black on a dark ground. Third time this exact collision has come up; scoping to the template context takes these to (0,3,0). */ .ics-site .ics-hero--tpl .ics-btn--ghost, .ics-site .ics-hero--tpl .ics-btn--ghost:hover, .ics-site .ics-band .ics-btn--ghost, .ics-site .ics-band .ics-btn--ghost:hover, .ics-site .ics-hero--tpl .ics-btn--red, .ics-site .ics-hero--tpl .ics-btn--red:hover, .ics-site .ics-band .ics-btn--red, .ics-site .ics-band .ics-btn--red:hover{ color: #fff } .ics-site .ics-hero--tpl .ics-btn .ics-i, .ics-site .ics-band .ics-btn .ics-i{ color: #fff } /* ============================================================ 25. site header Rebuilt to match the header the client has used for years. Three bands: latest-post banner, gradient brand bar, dark navigation. Everything is scoped under .ics-site so Elementor's global kit cannot repaint it — the kit styles `a` at (0,1,1) and would otherwise win. */ /* --- 1. latest post banner --- */ .ics-site .ics-topbanner{ background: var(--white); text-align: center; padding: 13px 20px; border-bottom: 1px solid var(--line) } .ics-site .ics-topbanner a{ font-family: var(--fd); font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--text); text-transform: uppercase; } .ics-site .ics-topbanner a:hover{ color: var(--red) } /* --- 2. brand bar --- The original gradient is an image the client owns, so it is reused rather than approximated. The linear-gradient behind it is a fallback with the same endpoints, for the moment before the image paints. */ .ics-site .ics-brandbar{ background-color: #8f93c8; background-image: linear-gradient(90deg, #8f93c8 0%, #a878b0 45%, #c0392b 100%); background-size: cover; background-position: center; } .ics-site .ics-brandbar--img{ background-image: var(--ics-brandbar-img) } .ics-site .ics-brandbar__inner{ max-width: 1400px; margin-inline: auto; padding: 14px var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 94px; } .ics-site .ics-brandbar__logo img{ width: 190px; height: auto; display: block } .ics-site .ics-brandbar__right{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end } .ics-site .ics-brandbar__247{ width: 172px; height: auto; display: block } .ics-site .ics-hbtn{ display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 11px 22px; border-radius: 999px; font-family: var(--fd); font-size: 15.5px; font-weight: 600; white-space: nowrap; transition: transform .18s, box-shadow .18s, background .18s; } .ics-site .ics-hbtn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10,22,52,.22) } .ics-site .ics-hbtn--phone, .ics-site .ics-hbtn--phone .ics-tel__n{ color: #fff } .ics-site .ics-hbtn--phone{ background: #123a8f; border: 1px solid rgba(255,255,255,.25) } .ics-site .ics-hbtn--phone .ics-i{ color: #fff } .ics-site .ics-hbtn--store{ background: var(--white); color: var(--red) } .ics-site .ics-hbtn--store .ics-i{ color: var(--red) } .ics-site .ics-hbtn--store:hover{ color: var(--red-dk) } /* --- 3. navigation --- */ .ics-site .ics-navbar{ background: #313131; position: relative; z-index: 40 } .ics-site .ics-navbar__inner{ max-width: 1480px; margin-inline: auto; padding-inline: 14px } .ics-site .ics-nav > ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; /* Something upstream sets gap:22px on flex lists. Eleven items plus ten 22px gaps overflowed the bar by exactly 220px, which read as "the nav is too wide" and was really "the nav has gaps nobody asked for". */ gap: 0; } .ics-site .ics-nav li{ position: relative; margin: 0; padding: 0; list-style: none } .ics-site .ics-nav ul{ list-style: none } /* Eleven top-level items have to sit on one row down to the mobile breakpoint, exactly as they do on the live site. Fixed sizes wrapped to a second row at 1512px, so type and padding scale with the viewport instead. */ .ics-site .ics-nav > ul{ flex-wrap: nowrap } .ics-site .ics-nav > ul > li > a{ display: flex; align-items: center; height: 64px; padding: 0 clamp(6px, .72vw, 13px); font-family: var(--fd); font-size: clamp(11.5px, .92vw, 14px); font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: #fff; white-space: nowrap; } .ics-site .ics-nav > ul > li > a:hover{ color: var(--red) } /* current page: red with the original underline */ .ics-site .ics-nav > ul > li.current-menu-item > a, .ics-site .ics-nav > ul > li.current-page-ancestor > a, .ics-site .ics-nav > ul > li.current-menu-parent > a{ color: var(--red); box-shadow: inset 0 -3px 0 var(--red) } /* submenu caret */ .ics-site .ics-nav > ul > li.menu-item-has-children > a::after{ content: ""; margin-left: 8px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; } .ics-site .ics-nav .sub-menu{ list-style: none; margin: 0; padding: 8px 0; position: absolute; left: 0; top: 100%; min-width: 268px; background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--r-s) var(--r-s); box-shadow: var(--sh); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 50; } .ics-site .ics-nav li:hover > .sub-menu, .ics-site .ics-nav li:focus-within > .sub-menu{ opacity: 1; visibility: visible; transform: none } .ics-site .ics-nav .sub-menu a{ display: flex; align-items: center; min-height: 42px; padding: 8px 18px; font-family: var(--fb); font-size: 15px; color: var(--ink); line-height: 1.35; } .ics-site .ics-nav .sub-menu a:hover{ background: var(--paper); color: var(--red) } /* --- mobile --- */ .ics-site .ics-navtoggle{ display: none; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; min-height: 52px; padding: 0 4px; color: #fff; font-family: var(--fd); font-size: 15px; font-weight: 700; text-transform: uppercase; } .ics-site .ics-navtoggle__bars{ position: relative; width: 20px; height: 2px; background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff } @media (max-width: 1200px){ .ics-site .ics-brandbar__logo img{ width: 160px } .ics-site .ics-brandbar__247{ width: 140px } } @media (max-width: 1024px){ .ics-site .ics-navtoggle{ display: inline-flex } .ics-site .ics-nav{ display: none; padding-bottom: 10px } .ics-site .ics-nav.is-open{ display: block } .ics-site .ics-nav > ul{ flex-direction: column; align-items: stretch; flex-wrap: wrap } .ics-site .ics-nav > ul > li > a{ height: auto; padding: 13px 4px } /* On touch there is no hover, so submenus are always visible and indented. */ .ics-site .ics-nav .sub-menu{ position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; padding: 0 0 6px 16px; min-width: 0; } .ics-site .ics-nav .sub-menu a{ color: rgba(255,255,255,.82); min-height: 40px; padding: 6px 4px } .ics-site .ics-nav .sub-menu a:hover{ background: transparent; color: #fff } .ics-site .ics-nav > ul > li.menu-item-has-children > a::after{ margin-left: auto } } @media (max-width: 760px){ .ics-site .ics-brandbar__inner{ flex-wrap: wrap; justify-content: center; text-align: center; gap: 12px } .ics-site .ics-brandbar__right{ justify-content: center; width: 100% } .ics-site .ics-topbanner a{ font-size: 13.5px } } /* ============================================================ 26. homepage A faithful rebuild of the live homepage, so the proportions and colour placement follow the original rather than the rest of the design system. Scoped under .ics-site throughout — Elementor's kit is still installed for the remaining builder pages and would otherwise win on every heading. */ .ics-site .ics-sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- hero --- */ .ics-site .ics-home-hero{ position: relative; overflow: hidden; text-align: center; background: #1c4fa1 center/cover no-repeat; padding: 66px 0 0; } .ics-site .ics-home-hero::after{ /* the white sweep the original curves across the bottom of the banner */ content: ""; position: absolute; left: -5%; right: -5%; bottom: -64px; height: 130px; background: var(--white); border-radius: 50% 50% 0 0; } .ics-site .ics-home-hero__inner{ position: relative; z-index: 2 } .ics-site .ics-home-hero__h1{ margin: 0; font-family: var(--fd); line-height: 1 } .ics-site .ics-home-hero__kicker{ display: block; color: var(--red); font-weight: 700; font-size: clamp(30px, 4.6vw, 58px); text-shadow: 0 2px 12px rgba(0,0,0,.28); } .ics-site .ics-home-hero__since{ display: block; color: #fff; font-weight: 800; letter-spacing: .01em; font-size: clamp(44px, 7.4vw, 92px); text-shadow: 0 3px 18px rgba(0,0,0,.32); } .ics-site .ics-home-hero__sub{ margin: 18px auto 0; max-width: 60ch; color: rgba(255,255,255,.92); font-size: 17.5px; line-height: 1.55; text-shadow: 0 1px 8px rgba(0,0,0,.35); } .ics-site .ics-home-hero .ics-hero-ctas{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px } .ics-site .ics-home-hero .ics-btn--ghost, .ics-site .ics-home-hero .ics-btn--ghost .ics-tel__n, .ics-site .ics-home-hero .ics-btn--red{ color: #fff } .ics-site .ics-home-hero .ics-btn .ics-i{ color: #fff } .ics-site .ics-home-hero__van{ position: relative; z-index: 3; margin: 8px auto -10px; max-width: min(760px, 92%); height: auto } /* --- service cards --- */ .ics-site .ics-home-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px } @media (max-width: 900px){ .ics-site .ics-home-cards{ grid-template-columns: repeat(2, 1fr) } } @media (max-width: 560px){ .ics-site .ics-home-cards{ grid-template-columns: 1fr } } .ics-site .ics-home-card{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 210px; padding: 30px 24px; border-radius: var(--r); background: #3c4f9b; color: #fff; transition: transform .2s, box-shadow .2s, background .2s; } .ics-site .ics-home-card:nth-child(3n){ background: #1e3a8f } .ics-site .ics-home-card:hover{ transform: translateY(-5px); box-shadow: var(--sh2); background: #2c3f8b } .ics-site .ics-home-card .ics-i{ color: rgba(255,255,255,.9) } .ics-site .ics-home-card h3{ margin: 0; font-family: var(--fd); font-size: clamp(21px, 2.3vw, 28px); font-weight: 700; line-height: 1.15; color: #fff } .ics-site .ics-home-card__more{ margin-top: 6px; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 20px; border-radius: var(--r-s); background: var(--red); color: #fff; font-family: var(--fd); font-size: 14.5px; font-weight: 600; } .ics-site .ics-home-card:hover .ics-home-card__more{ background: var(--red-dk) } .ics-site .ics-home-cards__ctas{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px } .ics-site .ics-btn--ghostdark{ background: var(--white); color: var(--ink); border: 1.5px solid var(--line) } .ics-site .ics-btn--ghostdark:hover{ border-color: var(--blue); color: var(--blue) } /* --- The ICS Difference --- */ .ics-site .ics-home-diff{ background: #1e4fa8 center/cover no-repeat; color: #fff } .ics-site .ics-home-diff__h2{ color: #fff; font-family: var(--fd); font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 30px } .ics-site .ics-home-value{ align-items: center; text-align: center } /* Fixed box so the four headings line up — the source icons differ in height. */ .ics-site .ics-home-value img{ margin: 0 auto 14px; width: auto; max-width: 84px; height: 72px; object-fit: contain } .ics-site .ics-home-value h3{ min-height: 2.1em; display: flex; align-items: center; justify-content: center } .ics-site .ics-home-value h3{ font-family: var(--fd); font-size: 23px; color: var(--blue); margin-bottom: 10px } .ics-site .ics-home-value p{ color: var(--muted); font-size: 15.5px; line-height: 1.6 } .ics-site .ics-home-value__more{ margin-top: 16px; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: var(--r-s); background: var(--red); color: #fff; font-family: var(--fd); font-size: 14px; font-weight: 600; } .ics-site .ics-home-value__more:hover{ background: var(--red-dk); color: #fff } /* --- comfort / stats --- */ .ics-site .ics-home-kicker{ font-family: var(--fd); font-size: 19px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin: 14px 0 10px } .ics-site .ics-statcard-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px } @media (max-width: 640px){ .ics-site .ics-statcard-row{ grid-template-columns: repeat(2, 1fr) } } .ics-site .ics-statcard-row .ics-statcard{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: 16px 14px; text-align: center; } .ics-site .ics-statcard-row .ics-statcard strong{ display: block; font-family: var(--fd); font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums } .ics-site .ics-statcard-row .ics-statcard span{ font-size: 13.5px; color: var(--muted) } /* --- brands --- */ .ics-site .ics-home-brands{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px 46px } .ics-site .ics-home-brands img{ height: 46px; width: auto; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s } .ics-site .ics-home-brands img:hover{ filter: none; opacity: 1 } /* --- NJ Devils --- */ .ics-site .ics-home-devils{ background: linear-gradient(100deg, #a3161f 0%, #c62b2b 60%, #a3161f 100%); color: #fff } .ics-site .ics-h2--onred{ color: #fff; font-family: var(--fd); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12 } .ics-site .ics-home-devils p{ color: rgba(255,255,255,.92) } .ics-site .ics-home-devils .ics-figure img{ border-radius: var(--r) } /* A figure holding a real photograph rather than the decorative panel. .ics-figure is a dark textured panel — 400px minimum, navy gradient, grid texture and two radial glows — designed to *contain* .ics-figure-inner. Used as a wrapper for an image it shows through wherever the image does not reach. On the Devils badge that was 34% of the box, around artwork that carries its own navy ground, so it read as a broken container. The other two homepage figures were only saved by their photos happening to match the box exactly; they get the modifier too, so a future image swap cannot bring the panel back. */ .ics-site .ics-figure--photo{ min-height: 0; background: none } .ics-site .ics-figure--photo::before{ content: none } .ics-site .ics-figure--photo img{ display: block; width: 100%; height: auto } /* --- request a service --- */ .ics-site .ics-home-bighead{ font-family: var(--fd); font-weight: 800; font-size: clamp(34px, 5vw, 62px); line-height: 1.02; color: var(--ink) } .ics-site .ics-home-form{ background: #262626; border-radius: var(--r); padding: 26px 22px } .ics-site .ics-home-form h3{ color: #fff; font-family: var(--fd); font-size: 26px; text-align: center; margin-bottom: 16px } .ics-site .ics-home-form iframe{ width: 100%; border: 0; border-radius: var(--r-s); display: block } /* Third-party embeds carried over from the live site. Both render their own markup, so the theme only gives them a container and a measure — it must not try to restyle their internals, which change when the vendor ships. */ .ics-site .ics-reviews-embed{ min-height: 220px } .ics-site .ics-fbfeed{ border-top: 1px solid var(--line) } .ics-site .ics-fbfeed__h{ font-family: var(--fd); font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; color: var(--ink); text-align: center; margin-bottom: 22px; } .ics-site .ics-fbfeed .cff-wrapper{ max-width: 100% } .ics-site .ics-split--flip .ics-figure{ order: -1 } @media (max-width: 900px){ .ics-site .ics-split--flip .ics-figure{ order: 0 } } /* ============================================================ 27. portfolio The Projects page carries the client's own photographs and their own descriptions, brought over from the live site. Scoped under .ics-page because this markup lives in authored page content. */ .ics-page .ics-projgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px } @media (max-width: 980px){ .ics-page .ics-projgrid{ grid-template-columns: repeat(2, 1fr) } } @media (max-width: 620px){ .ics-page .ics-projgrid{ grid-template-columns: 1fr } } .ics-page .ics-projcard{ display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); transition: transform .2s, box-shadow .2s, border-color .2s; } .ics-page .ics-projcard:hover{ transform: translateY(-4px); box-shadow: var(--sh); border-color: transparent } .ics-page .ics-projcard img{ width: 100%; height: 220px; object-fit: cover; display: block } .ics-page .ics-projcard__body{ padding: 22px 22px 26px } .ics-page .ics-projcard h3{ font-family: var(--fd); font-size: 21px; color: var(--ink); margin-bottom: 10px } .ics-page .ics-projcard p{ font-size: 15.5px; line-height: 1.6; color: var(--muted) } /* Two classes were used in page bodies but never defined — harmless-looking, but .ics-wrap--prose is a measure constraint on the privacy and terms pages, so without it those two ran the full 1200px width. Found by auditing page bodies against the stylesheet, the same check that catches template classes. */ .ics-page .ics-wrap--prose{ max-width: 820px } .ics-page .ics-small{ font-size: 14px; color: var(--muted) } .ics-page .ics-projgrid--2{ grid-template-columns: repeat(2, 1fr) } @media (max-width: 780px){ .ics-page .ics-projgrid--2{ grid-template-columns: 1fr } } .ics-page .ics-projcard__more{ display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--fd); font-size: 14.5px; font-weight: 600; color: var(--blue) } .ics-page .ics-projcard:hover .ics-projcard__more{ color: var(--red) } .ics-page a.ics-projcard{ color: inherit }