/* ============================================================ GLOBAL HEADER — teal gradient bottom border on all pages ============================================================ */ #bringer-header .bringer-logo img { height: 42px !important; width: auto !important; } #bringer-header::after { background: linear-gradient( to right, transparent 0%, rgba(56,188,164,0.0) 10%, rgba(56,188,164,0.50) 35%, rgba(56,188,164,0.50) 65%, rgba(56,188,164,0.0) 90%, transparent 100% ) !important; height: 1px !important; } /* ============================================================ TRIGRD MEDIA — LIQUID GLASS SYSTEM Replicates the multi-ring convex glass effect: dark outer frame → bright teal rim → soft secondary ring → strong top shine → heavy bottom depth ============================================================ */ /* ── 1. CTA / action buttons ── */ a.bringer-button, button.bringer-button, .bringer-button { background: linear-gradient( 180deg, rgba(28, 55, 48, 0.96) 0%, rgba(7, 13, 11, 0.99) 42%, rgba(2, 5, 4, 1.00) 100% ) !important; border: none !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: /* Floating depth */ 0 20px 56px rgba(0,0,0,0.92), 0 6px 16px rgba(0,0,0,0.72), /* Outer dark containment ring */ 0 0 0 1px rgba(0,0,0,0.95), /* Primary bright teal rim */ 0 0 0 2.5px rgba(56,188,164,0.92), /* Softer secondary ring */ 0 0 0 4px rgba(56,188,164,0.32), /* Outer dark frame */ 0 0 0 5.5px rgba(0,0,0,0.75), /* Convex top shine */ inset 0 2px 0 rgba(255,255,255,0.58), inset 0 5px 12px rgba(255,255,255,0.10), /* Bottom depth shadow */ inset 0 -4px 12px rgba(0,0,0,0.92), /* Centre vignette */ inset 0 0 48px rgba(0,0,0,0.38) !important; color: rgba(218,238,234,0.96) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 20px rgba(56,188,164,0.28) !important; transition: all 0.25s ease !important; } a.bringer-button:hover, .bringer-button:hover { box-shadow: 0 24px 64px rgba(0,0,0,0.95), 0 8px 20px rgba(0,0,0,0.76), 0 0 0 1px rgba(0,0,0,0.95), 0 0 0 2.5px rgba(56,188,164,1.00), 0 0 0 4px rgba(56,188,164,0.48), 0 0 0 5.5px rgba(0,0,0,0.80), inset 0 2px 0 rgba(255,255,255,0.65), inset 0 5px 12px rgba(255,255,255,0.13), inset 0 -4px 12px rgba(0,0,0,0.95), inset 0 0 48px rgba(0,0,0,0.40), 0 0 32px rgba(56,188,164,0.30) !important; transform: translateY(-1px) !important; } /* ── 2. Square / icon buttons ── */ a.bringer-square-button, .bringer-square-button { background: linear-gradient( 145deg, rgba(28,55,48,0.96) 0%, rgba(7,13,11,0.99) 50%, rgba(2, 5, 4,1.00) 100% ) !important; border: none !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: 0 12px 36px rgba(0,0,0,0.88), 0 0 0 1px rgba(0,0,0,0.95), 0 0 0 2.5px rgba(56,188,164,0.88), 0 0 0 4px rgba(56,188,164,0.28), 0 0 0 5.5px rgba(0,0,0,0.72), inset 0 2px 0 rgba(255,255,255,0.52), inset 0 4px 10px rgba(255,255,255,0.09), inset 0 -4px 10px rgba(0,0,0,0.88), inset 0 0 40px rgba(0,0,0,0.35) !important; transition: all 0.25s ease !important; } a.bringer-square-button:hover, .bringer-square-button:hover { box-shadow: 0 16px 44px rgba(0,0,0,0.92), 0 0 0 1px rgba(0,0,0,0.95), 0 0 0 2.5px rgba(56,188,164,1.00), 0 0 0 4px rgba(56,188,164,0.44), 0 0 0 5.5px rgba(0,0,0,0.78), inset 0 2px 0 rgba(255,255,255,0.60), inset 0 4px 10px rgba(255,255,255,0.11), inset 0 -4px 10px rgba(0,0,0,0.92), inset 0 0 40px rgba(0,0,0,0.38), 0 0 28px rgba(56,188,164,0.28) !important; transform: translateY(-1px) !important; } /* ── 3. Glass cards ── */ .bringer-block { background: linear-gradient( 145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100% ) !important; backdrop-filter: blur(22px) saturate(1.5) !important; -webkit-backdrop-filter: blur(22px) saturate(1.5) !important; border: 1px solid rgba(255,255,255,0.11) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.20), 0 18px 52px rgba(0,0,0,0.38) !important; transition: border-color 0.25s ease, box-shadow 0.25s ease !important; } .bringer-block:hover { border-color: rgba(56,188,164,0.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.22), 0 0 0 1px rgba(56,188,164,0.16), 0 22px 60px rgba(0,0,0,0.44), 0 0 40px rgba(56,188,164,0.13) !important; } .bringer-block.is-accented { background: linear-gradient( 145deg, rgba(56,188,164,0.36) 0%, rgba(56,188,164,0.13) 100% ) !important; border: 1px solid rgba(56,188,164,0.48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -1px 0 rgba(0,0,0,0.24), 0 0 0 1px rgba(56,188,164,0.22), 0 0 56px rgba(56,188,164,0.24), 0 22px 60px rgba(0,0,0,0.44) !important; } /* ── 4. Social icon circles ── */ .bringer-socials-list a { background: linear-gradient( 180deg, rgba(28,55,48,0.95) 0%, rgba(5,10, 8,0.99) 100% ) !important; border: none !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.90), 0 0 0 2px rgba(56,188,164,0.75), 0 0 0 3.5px rgba(56,188,164,0.22), 0 0 0 4.5px rgba(0,0,0,0.65), inset 0 1.5px 0 rgba(255,255,255,0.48), inset 0 -2px 6px rgba(0,0,0,0.80), 0 6px 18px rgba(0,0,0,0.60) !important; transition: all 0.25s ease !important; } .bringer-socials-list a:hover { box-shadow: 0 0 0 1px rgba(0,0,0,0.90), 0 0 0 2px rgba(56,188,164,1.00), 0 0 0 3.5px rgba(56,188,164,0.38), 0 0 0 4.5px rgba(0,0,0,0.70), inset 0 1.5px 0 rgba(255,255,255,0.55), inset 0 -2px 6px rgba(0,0,0,0.85), 0 8px 24px rgba(0,0,0,0.65), 0 0 20px rgba(56,188,164,0.28) !important; transform: translateY(-1px) !important; } /* ── 5. Square accent dots on heading endings ── */ /* For headings that end with . */ h1 span.bringer-accent:last-child, h2 span.bringer-accent:last-child, h3 span.bringer-accent:last-child, h4 span.bringer-accent:last-child, h5 span.bringer-accent:last-child, h6 span.bringer-accent:last-child, .bringer-page-title span.bringer-accent:last-child, .bringer-cta-title span.bringer-accent:last-child { display: inline-block !important; width: 0.13em !important; height: 0.13em !important; background: rgba(56,188,164,1) !important; color: transparent !important; border-radius: 0 !important; vertical-align: baseline !important; margin-left: 0.07em !important; position: relative !important; top: -0.05em !important; overflow: hidden !important; } /* For non-split headings with no trailing .bringer-accent span (e.g. "Our Services"). Excludes .trigrd-footer-heading — those use their own ::after underline bar. */ h1:not([data-split-appear]):not(:has(span.bringer-accent:last-child))::after, h2:not([data-split-appear]):not(:has(span.bringer-accent:last-child))::after, h3:not([data-split-appear]):not(:has(span.bringer-accent:last-child))::after, h4:not([data-split-appear]):not(:has(span.bringer-accent:last-child))::after, h5:not([data-split-appear]):not(:has(span.bringer-accent:last-child))::after, h6:not([data-split-appear]):not(.trigrd-footer-heading):not(:has(span.bringer-accent:last-child))::after { content: ''; display: inline-block; width: 0.13em; height: 0.13em; background: rgba(56,188,164,1); border-radius: 0; vertical-align: baseline; margin-left: 0.07em; position: relative; top: -0.05em; } /* For split-appear headings: SplitType wraps each line in .line divs, which pushes .bringer-accent spans below the text. Fix: hide those spans and add the dot to the last .line div instead (inline with the last word). */ h2[data-split-appear] span.bringer-accent, h3[data-split-appear] span.bringer-accent, h4[data-split-appear] span.bringer-accent, h5[data-split-appear] span.bringer-accent, h6[data-split-appear] span.bringer-accent { display: none !important; } h2[data-split-appear] .line:last-child::after, h3[data-split-appear] .line:last-child::after, h4[data-split-appear] .line:last-child::after, h5[data-split-appear] .line:last-child::after, h6[data-split-appear] .line:last-child::after { content: ''; display: inline-block; width: 0.13em; height: 0.13em; background: rgba(56,188,164,1); border-radius: 0; vertical-align: baseline; margin-left: 0.07em; position: relative; top: -0.05em; } /* ── Image rendering: sharp on high-DPI mobile screens ── */ img { image-rendering: -webkit-optimize-contrast; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { img { image-rendering: auto; } } /* ── CTA icon logo: bigger on mobile, flush left ── */ @media only screen and (max-width: 739px) { .bringer-cta-text img { width: 80px !important; height: 80px !important; max-width: none !important; min-width: 80px !important; } .bringer-cta-text .stg-row > div:first-child { margin-left: 4% !important; } } /* ── Suppress dots on icon-link button headings and marquee headings ── */ .bringer-icon-link h1::after, .bringer-icon-link h2::after, .bringer-icon-link h3::after, .bringer-icon-link h4::after, .bringer-icon-link h5::after, .bringer-icon-link h6::after, .bringer-marquee h1::after, .bringer-marquee h2::after, .bringer-marquee h3::after, .bringer-marquee h4::after, .bringer-marquee h5::after, .bringer-marquee h6::after { content: none !important; } /* ── Dot for split-appear CTA form titles (contacts, faq, pricing, etc.) ── */ .bringer-cta-form-title[data-split-appear] .line:last-child::after { content: ''; display: inline-block; width: 0.13em; height: 0.13em; background: rgba(56,188,164,1); border-radius: 0; vertical-align: baseline; margin-left: 0.07em; position: relative; top: -0.05em; }