inside a wrapper that sets a light/dark text colour follows it */ :where(.text-white,.text-black,[class*="text-white\/"],[class*="text-black\/"],.text-gray-100,.text-gray-200,.text-gray-300,.text-neutral-200,.text-neutral-300) p{color:inherit} } /* -------------------------------------------------------------------------- 2. MISSING "bronze" PALETTE ~2,300 uses of text-/bg-/border-/from-/to-bronze across 269 pages, but the built CSS defines none of them: eyebrows render grey, buttons have no fill, gradient headings (bg-clip-text text-transparent from-bronze) are invisible. Map bronze onto the brand orange so every page shares one accent. -------------------------------------------------------------------------- */ @layer utilities{ .text-bronze{color:var(--eg-orange)} .text-bronze-light{color:var(--eg-orange-light)} .text-bronze\/30{color:#fd81034d} .bg-bronze{background-color:var(--eg-orange)} .bg-bronze-light{background-color:var(--eg-orange-light)} .bg-bronze\/5{background-color:#fd81030d} .bg-bronze\/10{background-color:#fd81031a} .bg-bronze\/20{background-color:#fd810333} .bg-bronze\/90{background-color:#fd8103e6} .border-bronze{border-color:var(--eg-orange)} .border-bronze-light{border-color:var(--eg-orange-light)} .border-bronze\/10{border-color:#fd81031a} .border-bronze\/20{border-color:#fd810333} .border-bronze\/30{border-color:#fd81034d} .border-bronze\/40{border-color:#fd810366} .border-bronze\/50{border-color:#fd810380} .border-bronze\/60{border-color:#fd810399} .shadow-bronze\/20{--tw-shadow-color:#fd810333} .shadow-bronze\/30{--tw-shadow-color:#fd81034d} .shadow-bronze\/50{--tw-shadow-color:#fd810380} .from-bronze,.from-bronze\/5,.from-bronze\/10,.from-bronze\/20,.from-bronze\/30{ --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))} .from-bronze{--tw-gradient-from:var(--eg-orange)} .from-bronze\/5{--tw-gradient-from:#fd81030d} .from-bronze\/10{--tw-gradient-from:#fd81031a} .from-bronze\/20{--tw-gradient-from:#fd810333} .from-bronze\/30{--tw-gradient-from:#fd81034d} .to-bronze,.to-bronze\/5,.to-bronze\/20,.to-bronze-light,.to-bronze-light\/10{ --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))} .to-bronze{--tw-gradient-to:var(--eg-orange)} .to-bronze\/5{--tw-gradient-to:#fd81030d} .to-bronze\/20{--tw-gradient-to:#fd810333} .to-bronze-light{--tw-gradient-to:var(--eg-orange-light)} .to-bronze-light\/10{--tw-gradient-to:#ff9a3d1a} .via-bronze-light,.via-bronze\/5,.via-bronze\/10{ --tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops:var(--tw-gradient-via-stops)} .via-bronze-light{--tw-gradient-via:var(--eg-orange-light)} .via-bronze\/5{--tw-gradient-via:#fd81030d} .via-bronze\/10{--tw-gradient-via:#fd81031a} .before\:bg-bronze::before{content:var(--tw-content);background-color:var(--eg-orange)} .hover\:text-bronze:hover,.group:hover .group-hover\:text-bronze{color:var(--eg-orange)} .hover\:text-bronze-light:hover{color:var(--eg-orange-light)} .hover\:bg-bronze:hover{background-color:var(--eg-orange)} .hover\:bg-bronze-light:hover{background-color:var(--eg-orange-light)} .hover\:border-bronze\/40:hover{border-color:#fd810366} .hover\:border-bronze\/60:hover{border-color:#fd810399} .hover\:shadow-bronze\/20:hover{--tw-shadow-color:#fd810333} } /* Second accent: the Montreal landing pages use a gold (#E8B14F/#d4a347) that appears nowhere else. Fold it into the brand orange. */ .text-\[\#E8B14F\]{color:var(--eg-orange)} .bg-\[\#E8B14F\]{background-color:var(--eg-orange)} .border-\[\#E8B14F\]{border-color:var(--eg-orange)} .from-\[\#E8B14F\]{--tw-gradient-from:var(--eg-orange)} .to-\[\#d4a347\]{--tw-gradient-to:var(--eg-orange-dark)} .hover\:bg-\[\#d4a347\]:hover{background-color:var(--eg-orange-dark)} /* -------------------------------------------------------------------------- 3. HEADER: one solid bar, one height, nothing wraps Was 160px tall and transparent: white nav text vanished over light page heads (Services, Industries) and the logo sat on top of the H1; at 1440px the phone number wrapped to 3 lines, "ISO 9001" to 2, EN/FR stacked 88px tall, and "Get Quote" ran off the right edge. -------------------------------------------------------------------------- */ header.fixed > nav{background:#141414 !important;background-image:none !important; border-bottom:1px solid #fd810333;box-shadow:0 1px 0 #0000004d} header.fixed > nav > .container > div:first-child{height:var(--eg-header-h) !important} header.fixed > nav > .container > div:first-child > a:first-child img{height:calc(var(--eg-header-h) - .75rem) !important;width:auto} header.fixed nav a,header.fixed nav button{white-space:nowrap} header.fixed .flex-col.text-xs.leading-tight{flex-direction:row;align-items:center;gap:.125rem} header.fixed .flex-col.text-xs.leading-tight > button{min-height:0;min-width:0;padding:.25rem .375rem} header.fixed .flex-col.text-xs.leading-tight > button + button{border-left:1px solid #ffffff33} /* menu sits right after the logo (left), phone / language / quote stay on the right */ header.fixed > nav > .container{max-width:110rem;padding-left:1.5rem;padding-right:1.5rem} @media (min-width:1536px){header.fixed > nav > .container{padding-left:2.5rem;padding-right:2.5rem}} header.fixed > nav > .container > div:first-child{justify-content:flex-start;gap:0} header.fixed > nav > .container > div:first-child > a:first-child{margin-left:0;margin-right:1.75rem} header.fixed > nav > .container > div:first-child > .lg\:flex:not(.gap-4){margin-right:auto} header.fixed > nav > .container > div:first-child > .lg\:flex.gap-4{gap:1rem} header.fixed nav .lg\:flex > .relative > a{padding-left:.75rem;padding-right:.75rem} header.fixed .flex-col.text-xs.leading-tight > button:not(.text-\[\#FD8103\]){color:#ffffff99} @media (min-width:1024px) and (max-width:1535px){ header.fixed a[href^="tel:"] > span{display:none} header.fixed nav .lg\:flex > .relative > a{padding-left:.5rem;padding-right:.5rem} header.fixed > nav > .container > div:first-child > a:first-child{margin-right:1rem} } @media (min-width:1024px) and (max-width:1279px){ header.fixed > nav > .container{padding-left:1rem;padding-right:1rem} header.fixed > nav > .container > div:first-child > a:first-child{margin-right:.5rem} header.fixed > nav > .container > div:first-child > a:first-child img{height:calc(var(--eg-header-h) - 1.5rem) !important} header.fixed nav .lg\:flex > .relative > a{padding-left:.3rem;padding-right:.3rem;font-size:.78rem} header.fixed nav .lg\:flex > .relative > a.gap-1{gap:.15rem} header.fixed a[href^="tel:"]{display:none} header.fixed nav .lg\:flex > .relative > a > svg{width:.75rem;height:.75rem} header.fixed > nav > .container > div:first-child > .lg\:flex.gap-4{gap:.4rem} header.fixed button[title] > span{display:none} header.fixed .lg\:flex.gap-4 > a.inline-flex{padding-left:.75rem;padding-right:.75rem;font-size:.8125rem} } /* "ISO 9001" was styled as an active tab (orange + underline) on every page */ header.fixed a[href*="quality-control"]{ border-bottom:0;color:#ffffffe6;font-weight:500} header.fixed a[href*="quality-control"]:hover{color:var(--eg-orange)} /* content starts below the fixed bar on every page */ body > main{padding-top:var(--eg-header-h)} body > main > :first-child.min-h-screen{min-height:calc(100vh - var(--eg-header-h))} /* -------------------------------------------------------------------------- 4. HOME HERO: remove the 45px black letterbox bars above/below the video -------------------------------------------------------------------------- */ body > main > :first-child > .absolute.inset-0 > video{ position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover} /* the 10rem top padding existed to clear the old transparent 160px header; with the bar outside the hero it only pushed the CTAs down into the video's burned-in caption ("we engineer the components that...") */ body > main > :first-child > .container.pt-40{padding-top:1.5rem;padding-bottom:9rem} @media (max-width:767px){body > main > :first-child > .container.pt-40{padding-top:1rem;padding-bottom:7rem}} /* -------------------------------------------------------------------------- 5. BUTTONS: brand-orange fill, dark label (white on #FD8103 = 2.52:1, fails) -------------------------------------------------------------------------- */ :is(a,button).bg-\[\#FD8103\],:is(a,button).bg-\[\#FD8104\],:is(a,button).bg-bronze, :is(a,button).bg-\[\#E8B14F\],.btn-primary{color:var(--eg-ink) !important} :is(a,button).bg-\[\#FD8103\]:hover,:is(a,button).bg-\[\#FD8104\]:hover,:is(a,button).bg-bronze:hover{background-color:var(--eg-orange-light)} /* small orange badges ("NEW", "24/7", "Selected") */ span.bg-\[\#FD8103\],div.bg-\[\#FD8103\].text-white:not(section){color:var(--eg-ink)} /* the hero's secondary button: same height/weight as primary, no glare */ body > main > :first-child a.bg-white\/95{background:#ffffff1a;color:#fff;border:1px solid #ffffffb3;backdrop-filter:blur(4px)} body > main > :first-child a.bg-white\/95:hover{background:#fff;color:var(--eg-ink)} /* -------------------------------------------------------------------------- 6. ORANGE TEXT ON LIGHT BACKGROUNDS -> darker "ink" orange (2.52:1 -> 5.15:1) Orange stays for fills, icons and borders; only link/label TEXT on light surfaces changes. Dark surfaces keep #FD8103 (6.9-8.3:1). -------------------------------------------------------------------------- */ body > main :is(.bg-white,.bg-gray-50,.bg-gray-100,.bg-neutral-50,.bg-neutral-100,.card-epiroc,.category-card) :is(a,p,span).text-\[\#FD8103\]:not([class*="bg-"]), body > main :is(.bg-white,.bg-gray-50,.bg-gray-100,.bg-neutral-50,.bg-neutral-100) .link-primary, body > main :is(.bg-white,.bg-gray-50,.bg-gray-100,.bg-neutral-50,.bg-neutral-100) :is(a,p,span).text-bronze{color:var(--eg-orange-ink)} body > main :is(.bg-white,.bg-gray-50,.bg-gray-100) a.text-\[\#FD8103\]:hover{color:#8a4400} /* a dark band nested in a light wrapper keeps the bright orange */ body > main :is(.bg-black,.bg-\[\#1a1a1a\],.bg-\[\#0d0d0d\],.bg-gray-900) :is(a,p,span).text-\[\#FD8103\]:not([class*="bg-"]){color:var(--eg-orange)} /* white button inside the orange CTA band */ section.bg-\[\#FD8103\] a.bg-white{color:var(--eg-orange-ink);align-self:center} /* -------------------------------------------------------------------------- 7. INLINE LINKS IN BODY COPY: always underlined (WCAG 1.4.1), one colour -------------------------------------------------------------------------- */ main :is(p,li,dd,td,blockquote) > a:not([class*="bg-"]):not(.inline-flex):not(.flex){ color:var(--eg-orange-ink);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:.2em;text-decoration-color:currentColor;font-weight:500;min-height:0;min-width:0} main :is(p,li,dd,td,blockquote) > a:not([class*="bg-"]):not(.inline-flex):not(.flex):hover{text-decoration-thickness:2px} main :is(.bg-black,.bg-\[\#1a1a1a\],.bg-\[\#0d0d0d\],.bg-\[\#0a0a0a\],.bg-neutral-900,.bg-neutral-950,.bg-gray-900,.article-content) :is(p,li,dd,td,blockquote) > a:not([class*="bg-"]):not(.inline-flex):not(.flex){color:var(--eg-orange)} main :is(.bg-white,.bg-gray-50,.bg-gray-100) :is(p,li,dd,td,blockquote) > a:not([class*="bg-"]):not(.inline-flex):not(.flex){color:var(--eg-orange-ink)} /* -------------------------------------------------------------------------- 8. BLOG POSTS + ARTICLES (.article-content) Markup asks for Tailwind Typography (prose prose-invert prose-p:text-neutral-400 prose-a:text-bronze ...), but the plugin is not compiled: body text was #4a4a4a on black (2.37:1), lead-ins like "Key practices:" were grey, links unstyled. Re-implement what the class list asks for. -------------------------------------------------------------------------- */ .article-content{font-size:1.125rem;line-height:1.8;color:#a3a3a3} .article-content p,.article-content li,.article-content ul,.article-content ol{color:#b5b5b5;font-weight:400} .article-content p{margin:0 0 1.5rem} .article-content :is(h2,h3,h4){color:#fff;letter-spacing:-.01em;line-height:1.25} .article-content h2{margin:3rem 0 1rem} .article-content h3{color:#e5e5e5;margin:2.5rem 0 1rem} .article-content :is(strong,b){color:#fff;font-weight:600} .article-content ul,.article-content ol{margin:1.25rem 0 1.75rem;padding-left:0;list-style:none} /* markup already draws its own orange dot at left:0 (prose-li:relative pl-6) */ .article-content li{margin:.6rem 0;padding-left:1.5rem;position:relative} .article-content a{color:var(--eg-orange);text-decoration:underline;text-decoration-color:#fd810380; text-underline-offset:.2em;text-decoration-thickness:1px;font-weight:500} .article-content a:hover{text-decoration-color:var(--eg-orange)} .article-content blockquote{border-left:2px solid var(--eg-orange);padding-left:1.5rem;font-style:italic;color:#d4d4d4;margin:2rem 0} .article-content table{width:100%;border-collapse:collapse;font-size:1rem;margin:1.5rem 0} .article-content :is(th,td){border-bottom:1px solid #ffffff1f;padding:.6rem .75rem;text-align:left;color:#d4d4d4} .article-content th{color:#fff;font-weight:600} /* -------------------------------------------------------------------------- 9. HOMEPAGE / SECTION RHYTHM 12 bands in 5 background tones (black, #0d0d0d, #1a1a1a, gray-50, gray-100, white) plus three identical 80vh photo panels. Collapse to 2 neutrals and shorten the photo panels so the page reads as one system. -------------------------------------------------------------------------- */ body > main > section.bg-gray-100{background-color:var(--eg-light)} body > main > section.bg-\[\#0d0d0d\]{background-color:var(--eg-dark)} @media (min-width:768px){ body > main > section.bg-cover.md\:min-h-\[80vh\]{min-height:56vh} } /* dark text panels over photos: body copy was #4a4a4a on #000 (2.37:1) - fixed by section 1; give the panel a consistent, slightly lighter edge */ body > main > section.bg-cover .bg-black\/80,body > main > section.bg-cover .bg-black\/70{border:1px solid #ffffff14} /* orange CTA band: white heading on orange = 2.52:1 -> dark ink 7.5:1 */ section.bg-\[\#FD8103\] :is(h2,h3){color:var(--eg-ink) !important} section.bg-\[\#FD8103\] p{color:#1a1a1ae6 !important} section.bg-\[\#FD8103\] a.border-white,section.bg-\[\#FD8103\] a[class*="border-white"]{border-color:var(--eg-ink) !important;color:var(--eg-ink) !important} section.bg-\[\#FD8103\] a[class*="border-white"]:hover{background:var(--eg-ink);color:#fff !important} section.bg-\[\#FD8103\] .text-white,section.bg-\[\#FD8103\] .text-white\/80{color:var(--eg-ink) !important} /* -------------------------------------------------------------------------- 10. FOOTER: legible secondary text, real-size logo -------------------------------------------------------------------------- */ footer :is(.text-gray-500,.text-gray-600,.text-neutral-500,.text-neutral-600){color:#a3a3a3} footer p{color:#a3a3a3} footer img[src*="EuroGearLogo"]{height:auto !important;width:13rem !important;max-width:100%} /* -------------------------------------------------------------------------- 11. MOBILE -------------------------------------------------------------------------- */ @media (max-width:767px){ body > main > :first-child h1{text-wrap:balance} /* hero buttons: one row of equal-weight, not two stacked slabs */ body > main > :first-child .flex.flex-col.sm\:flex-row{gap:.625rem} }