/* breadcrumbs */ .breadcrumbs{ display: flex; flex-wrap: wrap; gap: 6px; } .breadcrumbs a, .breadcrumbs span { font-family: "Manrope", Sans-serif; font-size: 14px; line-height: 100%; text-wrap-mode: nowrap; font-weight: 600; color: #323434; transition: 0.3s all; } .breadcrumbs a:hover { color: #0F366F; } .breadcrumbs .current { /* font-weight: 700 !important; */ } /* breadcrumbs end */ .hero-banner.e-con { /* height: 580px; */ position: relative; overflow: hidden; display: flex; align-items: center; background: radial-gradient(circle at 78% 32%, rgba(57, 200, 238, 0.15), transparent 26%), radial-gradient(circle at 87% 73%, rgba(232, 92, 155, 0.09), transparent 25%), linear-gradient(128deg, rgb(3, 17, 29) 0%, rgb(8, 36, 58) 55%, rgb(11, 49, 83) 100%); } .hero-banner.e-con:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 90%); } .banner-img.elementor-widget-image { right: 4%; width: min(40%, 560px); height: auto; z-index: 2; } .e-con.nti-finder-section { background: radial-gradient(circle at 78% 18%, rgba(57, 200, 238, 0.11), transparent 27%), radial-gradient(circle at 20% 88%, rgba(86, 103, 245, 0.08), transparent 30%), linear-gradient(132deg, rgb(3, 17, 29), rgb(8, 36, 58) 58%, rgb(11, 49, 83) 118%); } .scene-number { width: 100%; position: relative; bottom: -48px; font-size: clamp(48px, 5.1vw, 80px); line-height: 1; font-weight: 900; letter-spacing: -.065em; color: rgba(255, 255, 255, .12); text-align: center; pointer-events: none; white-space: nowrap; } .product-ov.neon-scene.e-con { --scene-bg: radial-gradient(circle at 18% 18%, rgba(47, 209, 255, .34), transparent 31%), radial-gradient(circle at 83% 22%, rgba(143, 83, 255, .30), transparent 31%), radial-gradient(circle at 78% 80%, rgba(255, 88, 183, .28), transparent 31%), linear-gradient(128deg, #101b39, #232c6f 44%, #6a2d75 78%, #150f25); --accent: #7fe8ff; --copy: #eef6ff; --surface: conic-gradient(from 218deg, #38dcff, #3a74ff, #8a5cff, #ff5fb7, #54f0a7, #38dcff); --glow: rgba(126, 102, 255, .48); --haze: linear-gradient(90deg, #2ce4ff, #8c5eff, #ff62bd); --spectrum: linear-gradient(90deg, #38dcff, #3a74ff, #8a5cff, #ff5fb7, #54f0a7); } .product-ov.e-con::before { background: radial-gradient(circle at 14% 20%, rgba(61, 205, 255, .18), transparent 27%), radial-gradient(circle at 82% 22%, rgba(215, 173, 75, .31), transparent 30%), linear-gradient(128deg, #132643, #3b2c14 55%, #8a641d 120%) !important; } .hero-banner.hard-caoting.e-con { background: radial-gradient(circle at 78% 28%, rgba(199, 166, 59, .14), transparent 25%), radial-gradient(circle at 24% 76%, rgba(108, 152, 184, .08), transparent 34%), linear-gradient(135deg, #07182B 0%, #0D2A47 56%, #123553 112%); } .hero-banner.hard-caoting.e-con:before { content: none; } .hard-caoting .e-con.insight-card { /* --cardGlow: rgba(54,207,255,.32); */ background: linear-gradient(135deg, #EDF1F3, #C1CDD7); } .coatingTech.e-con { background: linear-gradient(135deg, rgb(10, 33, 58), rgb(13, 42, 71) 56%, rgb(18, 53, 83)); } .fh-hero-tech { opacity: 0.3; } .fh-hero-tech:before { content: ""; position: absolute; inset: 8% 0; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(255, 255, 255, .005)); clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); } .e-con.protect-card { border-width: 4px 1px 1px; border-style: solid; border-color: rgb(216, 173, 66) rgb(216, 222, 230) rgb(216, 222, 230); border-image: none; border-radius: 12px; } .e-con.protect-card:nth-child(1) { border-color: rgb(216, 173, 66) rgb(216, 222, 230) rgb(216, 222, 230); } .e-con.protect-card:nth-child(2) { border-color: rgb(145, 183, 201) rgb(216, 222, 230) rgb(216, 222, 230); } .e-con.protect-card:nth-child(3) { border-color: rgb(57, 200, 238) rgb(216, 222, 230) rgb(216, 222, 230); } .e-con.cinematic { background: radial-gradient(circle at 80% 35%, rgba(216, 173, 66, .11), transparent 27%), linear-gradient(132deg, #04131f, #0a2639 58%, #0a1c2b); } .hero-banner.dlc-coating.e-con { background: radial-gradient(circle at 73% 34%, rgba(58, 197, 239, .2), transparent 26%), linear-gradient(135deg, #080d11 0%, #151f26 58%, #0a1015 100%); } .hero-banner.dlc-coating.e-con:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to right, #000, transparent 84%); } .icp-evidence.e-con { background: radial-gradient(circle at 88% 12%, rgba(58, 197, 239, .17), transparent 30%), linear-gradient(135deg, #071019 0%, #0b2639 56%, #07141f 100%); } .routes.e-con { background: radial-gradient(circle at 82% 12%, rgba(36, 112, 154, .24), transparent 30%), linear-gradient(135deg, #071019 0%, #0b2234 48%, #07141f 100%); } .hero-banner.tac-caoting.e-con { background: radial-gradient(circle at 76% 28%, rgba(55, 192, 235, .25), transparent 24%), radial-gradient(circle at 28% 76%, rgba(77, 135, 199, .17), transparent 30%), linear-gradient(135deg, #03101b 0%, #081d2e 54%, #0f366f 120%); } .tac-coating.e-con { background: radial-gradient(circle at 82% 18%, rgba(55, 192, 235, .14), transparent 28%), radial-gradient(circle at 18% 82%, rgba(77, 135, 199, .12), transparent 34%), linear-gradient(135deg, #061827 0%, #0b2942 58%, #0f366f 125%); } .tac-coating.e-con .insight-card { background: radial-gradient(circle at 78% 16%,rgba(55,192,235,.10),transparent 30%),linear-gradient(145deg,#082036 0%,#0c2d49 64%,#0f366f 135%); } .MiCC-coating.e-con { background: linear-gradient(135deg, rgb(10, 33, 58), rgb(13, 42, 71) 56%, rgb(18, 53, 83)); } .MiCC-coating.e-con .insight-card { background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); } .MiCC-coating.e-con .insight-card h2 span { font-size: 22px; } .nti-sub-counter span.elementor-counter-number-suffix { font-size: 26px; line-height: 26px; display: inline-flex; align-items: flex-end; } .fh-hero { position: relative; overflow: hidden; height: 580px; display: flex; align-items: center; } .fh-hero:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 90%); } .fh-hero-stage { position: absolute; inset: 0; pointer-events: none; z-index: 1; perspective: 1300px; } .fh-hero-beam { position: absolute; right: -10%; top: 18%; width: 58%; height: 44%; background: linear-gradient(112deg, transparent, rgba(255, 255, 255, .22) 34%, transparent 54%); filter: blur(20px); transform: rotate(-14deg); opacity: .58; } .fh-hero-panel { position: absolute; border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 45px 110px rgba(0, 0, 0, .25); backdrop-filter: blur(5px); transform-style: preserve-3d; animation: fhHeroFloat 11s ease-in-out infinite; } .fh-hero-panel:before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, .48), transparent 22%, transparent 65%, rgba(255, 255, 255, .09)); mix-blend-mode: screen; } .fh-hero-panel.neon { right: -3%; top: 16%; width: 27vw; max-width: 410px; aspect-ratio: .86; border-radius: 30% 34% 28% 36%; background: conic-gradient(from 210deg, #31d7ff, #3f75ff, #8a5cff, #ff65bd, #52f2a6, #31d7ff); transform: rotateY(-22deg) rotateZ(8deg); } .fh-hero-panel.metallic { right: 21%; top: 7%; width: 20vw; max-width: 300px; aspect-ratio: .88; border-radius: 35% 28% 33% 29%; background: radial-gradient(circle at 25% 20%, #fff 0 5%, #c7d0d6 20%, #65747f 43%, #f3f5f6 62%, #8a765c 82%, #4f6b7c); transform: rotateY(20deg) rotateZ(-7deg); animation-delay: -2.6s; } .fh-hero-panel.gold { right: 7%; bottom: -10%; width: 23vw; max-width: 360px; aspect-ratio: 1; border-radius: 32%; background: radial-gradient(circle at 27% 20%, #fff7ce 0 7%, #e9c76e 23%, #b67c1d 54%, #76500d 82%); transform: rotateY(-15deg) rotateZ(-12deg); animation-delay: -5.2s; } .fh-hero-panel.black { right: 31%; bottom: -14%; width: 18vw; max-width: 280px; aspect-ratio: 1; border-radius: 36%; background: radial-gradient(circle at 27% 20%, #6d7785 0 4%, #252c36 28%, #050607 68%, #000); transform: rotateY(18deg) rotateZ(10deg); animation-delay: -7.8s; } .fh-hero-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(5, 16, 35, .82) 0%, rgba(5, 16, 35, .7) 45%, rgba(5, 16, 35, .42) 66%, rgba(5, 16, 35, .1) 82%, transparent 92%); } .fh-hero-text-scrim { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 620px 480px at 8% 42%, rgba(5, 16, 35, .55), transparent 72%); } /* --------------------- NTI Finish portfolio scenes --------------------- */ .e-con.finish-scene { position: relative !important; min-height: 100vh !important; isolation: isolate; display: flex !important; align-items: center !important; } .e-con.finish-scene:before { content: ""; position: absolute; inset: 0; background: var(--scene-bg, transparent); z-index: -3; } .e-con.finish-scene:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .14), transparent 30%, rgba(0, 0, 0, .20)); z-index: -2; } .neon-scene { --scene-bg: radial-gradient(circle at 18% 18%, rgba(47, 209, 255, .34), transparent 31%), radial-gradient(circle at 83% 22%, rgba(143, 83, 255, .30), transparent 31%), radial-gradient(circle at 78% 80%, rgba(255, 88, 183, .28), transparent 31%), linear-gradient(128deg, #101b39, #232c6f 44%, #6a2d75 78%, #150f25); --accent: #7fe8ff; --copy: #eef6ff; --surface: conic-gradient(from 218deg, #38dcff, #3a74ff, #8a5cff, #ff5fb7, #54f0a7, #38dcff); --glow: rgba(126, 102, 255, .48); --haze: linear-gradient(90deg, #2ce4ff, #8c5eff, #ff62bd); --spectrum: linear-gradient(90deg, #38dcff, #3a74ff, #8a5cff, #ff5fb7, #54f0a7); } .metallic-scene { --scene-bg: radial-gradient(circle at 16% 18%, rgba(255,255,255,.85), transparent 24%), radial-gradient(circle at 86% 28%, rgba(64,111,139,.28), transparent 28%), radial-gradient(circle at 75% 82%, rgba(180,109,75,.24), transparent 28%), linear-gradient(132deg, #dce3e7, #657681 45%, #263844 75%, #17222c); --accent: #e7f0f5; --copy: #d2dde3; --surface: radial-gradient(circle at 28% 20%, #fff 0 4%, #d8dfe3 18%, #70808a 37%, #f6f8f9 51%, #a4835c 68%, #4b718a 83%, #202f38); --glow: rgba(210,226,236,.34); --haze: linear-gradient(90deg, #fff, #8096a3, #b77b57); --spectrum: linear-gradient(90deg, #f7f9fa, #8d9aa2, #b0915a, #b46d4b, #4b718a); } .gold-scene { --scene-bg: radial-gradient(circle at 17% 17%, rgba(255,248,209,.62), transparent 28%), radial-gradient(circle at 82% 26%, rgba(240,193,85,.38), transparent 31%), radial-gradient(circle at 76% 82%, rgba(122,73,8,.38), transparent 31%), linear-gradient(130deg, #33230a, #7c5311 43%, #b27b21 68%, #2b1c08); --accent: #ffe39b; --copy: #eadcbf; --surface: radial-gradient(circle at 28% 20%, #fffbdc 0 5%, #f0d57c 22%, #d0a044 44%, #9a6615 68%, #4f3107 92%); --glow: rgba(235,187,78,.46); --haze: linear-gradient(90deg, #fff1b5, #d7a944, #84520c); --spectrum: linear-gradient(90deg, #fff0b0, #e0bc62, #c08a24, #8a5a11); } .black-scene { --scene-bg: radial-gradient(circle at 15% 18%, rgba(85,192,235,.15), transparent 29%), radial-gradient(circle at 78% 18%, rgba(180,180,180,.12), transparent 28%), radial-gradient(circle at 75% 80%, rgba(10,60,95,.14), transparent 31%), linear-gradient(132deg, #151c27, #080b10 48%, #020304 86%); --accent: #8ddfff; --copy: #b9c6d7; --surface: radial-gradient(circle at 28% 20%, #7b8592 0 3%, #3b424d 19%, #15191f 45%, #050607 72%, #000 100%); --glow: rgba(85,192,235,.18); --haze: linear-gradient(90deg, #546677, #151b23, #000); --spectrum: linear-gradient(90deg, #555d68, #2b3038, #111318, #030304); } .ceo-scene-img img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain; display: block; filter: drop-shadow(rgba(0, 0, 0, 0.34) 0px 34px 60px); margin-bottom: 48px; } #dream.finish-scene { --scene-bg: radial-gradient(circle at 78% 30%, rgba(114, 165, 220, .2), transparent 28%), radial-gradient(circle at 20% 80%, rgba(77, 134, 201, .1), transparent 24%), linear-gradient(132deg, #123e62, #0f3654 22%, #0a2943 56%, #04131f); --accent: #72a5dc; } #titan.finish-scene { --scene-bg: radial-gradient(circle at 18% 34%, rgba(79, 142, 232, .2), transparent 28%), radial-gradient(circle at 84% 16%, rgba(132, 191, 255, .11), transparent 24%), linear-gradient(132deg, #15476f, #123b5d 24%, #0b2741 54%, #051423); --accent: #84bfff; } #renew.finish-scene { --scene-bg: radial-gradient(circle at 18% 34%, rgba(143, 199, 217, .18), transparent 27%), radial-gradient(circle at 82% 18%, rgba(93, 157, 214, .11), transparent 24%), linear-gradient(132deg, #113b58, #0e3048 26%, #0a2233 54%, #06151f); --accent: #8fc7d9; } #vault.finish-scene { --scene-bg: radial-gradient(circle at 82% 34%, rgba(57, 200, 238, .18), transparent 28%), radial-gradient(circle at 18% 16%, rgba(108, 169, 231, .12), transparent 24%), linear-gradient(132deg, #0a2f4b, #0c3b59 24%, #08253b 58%, #04131f); --accent: #39c8ee; } .scene-visual { position: relative !important; z-index: 2; width: 100%; aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; } .visual-haze { position: absolute; width: 82%; height: 26%; border-radius: 50%; background: var(--haze); filter: blur(32px); opacity: .7; transform: rotate(-18deg); } .visual-ring { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 0 80px rgba(255, 255, 255, .03); animation: ringTurn 18s linear infinite; } .visual-ring:before, .visual-ring:after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .11); } .visual-ring:before { inset: 11%; } .visual-ring:after { inset: 23%; } .visual-sweep { position: absolute; width: 90%; height: 18%; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent); filter: blur(14px); transform: rotate(-28deg) translateY(-120%); opacity: .45; animation: sweep 6.5s ease-in-out infinite; } .surface-form { position: relative; width: 58%; aspect-ratio: 1; border-radius: 50%; z-index: 2; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30), inset -42px -54px 110px rgba(0, 0, 0, .33), 0 64px 140px rgba(0, 0, 0, .38), 0 0 110px var(--glow); transform: rotate(-8deg); animation: surfaceBreathe 7s ease-in-out infinite; } .surface-form:before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 27% 20%, rgba(255, 255, 255, .88) 0 4%, rgba(255, 255, 255, .25) 12%, transparent 25%), linear-gradient(128deg, rgba(255, 255, 255, .26), transparent 35%, rgba(0, 0, 0, .12) 70%); mix-blend-mode: screen; } .micro-spectrum { position: absolute; left: 50%; bottom: 7%; width: 58%; height: 5px; border-radius: 99px; background: var(--spectrum); transform: translateX(-50%); box-shadow: 0 0 30px var(--glow); opacity: .85; } @keyframes ringTurn { 100% {transform: rotate(360deg);} } @keyframes sweep { 0%, 15% {translate: -25% -25%; opacity: 0;} 45% {opacity: .6;} 75%, 100% {translate: 35% 45%; opacity: 0;} } @keyframes surfaceBreathe { 0%, 100% {transform: rotate(-8deg) translateY(0);} 50% {transform: rotate(-5deg) translateY(-14px);} } @keyframes fhHeroFloat { 0%, 100% {translate: 0 0;} 50% {translate: 0 -18px;} } /* Brand watermark near the top of the circle (v6 design, 2026-10-12). Sized from the visual's own width so it keeps the design's proportion at every breakpoint; the clamp() is the fallback. */ .scene-brand { position: absolute; left: 50%; top: 9%; z-index: 0; transform: translateX(-50%); width: max-content; max-width: 100%; text-align: center; font-size: clamp(48px, 5.5vw, 80px); font-size: clamp(68px, 7.5vw, 120px); line-height: 1; font-weight: 800; letter-spacing: -.045em; word-spacing: .08em; color: rgba(255, 255, 255, .25); white-space: nowrap; pointer-events: none; } .scene-brand sup { position: static; font-size: .28em; line-height: 0; letter-spacing: 0; vertical-align: super; margin-left: .08em; } .metallic-scene .scene-brand { font-size: clamp(43px, 4.5vw, 66px); color: rgba(13, 38, 54, .40); } .gold-scene .scene-brand { color: rgba(255, 245, 201, .29); } .black-scene .scene-brand { color: rgba(228, 242, 255, .26); } @supports selector(:has(*)) { .scene-visual:has(> .scene-brand) { container-type: inline-size; } .scene-brand { font-size: 12.5cqi; } } .e-con.nti-reveal { --accent: #d2a33a; --tile-fill: #886213; position: relative; isolation: isolate; background-color: rgba(255, 255, 255, .45); transition: background-color .22s, color .22s, transform .22s, box-shadow .22s; } .e-con.nti-reveal[href="#Protect"] { --accent: #34373c; --tile-fill: #34373c; } .e-con.nti-reveal[href="#Control"] { --accent: #5667f5; --tile-fill: #4b59d1; } .e-con.nti-reveal[href="#Clarity"] { --accent: #8b79f4; --tile-fill: #6752bc; } .e-con.nti-reveal[href="#Repel"] { --accent: #25bfd1; --tile-fill: #087989; } .e-con.nti-reveal[href="#Bio"] { --accent: #e85c9b; --tile-fill: #af326b; } .e-con.nti-reveal[href="#SydroCOAT"] { --accent: #2f97b7; --tile-fill: #1b728e; } .e-con.nti-reveal:before { content: ""; position: absolute; top: 0; left: -1px; right: -1px; width: auto; height: 4px; border: 0; border-radius: 0; background: var(--accent); opacity: 1; mix-blend-mode: normal; pointer-events: none; z-index: 1; } .e-con.nti-reveal:hover, .e-con.nti-reveal:focus-visible, .e-con.nti-reveal.is-selected { background-color: var(--tile-fill); transform: translateY(-4px); box-shadow: 0 15px 32px rgba(7, 24, 39, .14); z-index: 2; } /* Elementor colours the heading/text per widget (0,4,0), hence !important */ .e-con.nti-reveal:hover .elementor-heading-title, .e-con.nti-reveal:hover .elementor-widget-text-editor, .e-con.nti-reveal:focus-visible .elementor-heading-title, .e-con.nti-reveal:focus-visible .elementor-widget-text-editor, .e-con.nti-reveal.is-selected .elementor-heading-title, .e-con.nti-reveal.is-selected .elementor-widget-text-editor { color: #ffffff !important; } .e-con.nti-reveal:focus-visible { outline: 3px solid #071827; outline-offset: 4px; } /* .e-con.nti-reveal.is-selected:after { content: "\2197"; position: absolute; right: 14px; bottom: 12px; font-size: 18px; line-height: 1; color: #ffffff; } */ .e-con.nti-reveal:active { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .e-con.nti-reveal { transition: none; } } /* --------------------- NTI Finish portfolio scenes end --------------------- */ /* --------------------- NTI Finish / Neon Colors --------------------- */ .neon-colors .fh-hero { background: radial-gradient(circle at 15% 18%, rgba(54, 207, 255, .34), transparent 30%), radial-gradient(circle at 76% 24%, rgba(138, 92, 255, .26), transparent 28%), radial-gradient(circle at 82% 72%, rgba(255, 102, 199, .22), transparent 28%), radial-gradient(circle at 34% 86%, rgba(83, 240, 166, .20), transparent 26%), linear-gradient(135deg, #fff 0%, #eefaff 42%, #fff5fe 100%); } .neon-colors .fh-hero:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(15, 54, 111, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 54, 111, .04) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .56), rgba(0, 0, 0, .06)); } .hero-orb { position: absolute; right: -7%; top: 11%; width: 660px; height: 660px; border-radius: 50%; background: conic-gradient(from 210deg, #36cfff, #387cff, #8a5cff, #ff66c7, #53f0a6, #caff67, #36cfff); opacity: .70; box-shadow: inset 0 0 130px rgba(255, 255, 255, .62), 0 0 140px rgba(138, 92, 255, .22); filter: saturate(1.08); } .hero-orb:before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .36) 28%, rgba(255, 255, 255, .72) 61%, rgba(255, 255, 255, .92) 100%); } .hero-orb:after { content: ""; position: absolute; inset: -1%; border-radius: 50%; background: linear-gradient(110deg, transparent 12%, rgba(255, 255, 255, .95) 28%, transparent 48%); mix-blend-mode: screen; opacity: .65; transform: rotate(-18deg); } .e-con.insight-card { background: rgba(255, 255, 255, .82); border: 1px solid rgba(224, 233, 247, .96); border-radius: 12px; padding: 24px; box-shadow: 0 20px 44px rgba(30, 46, 76, .06); position: relative; overflow: hidden; min-height: 200px; } .e-con.insight-card:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 9%, var(--cardGlow), transparent 40%); opacity: .75; } .market-demand-sec .e-con.insight-card:nth-child(1) { --cardGlow: #36cfff52; } .market-demand-sec .e-con.insight-card:nth-child(2) { --cardGlow: #8a5cff42; } .market-demand-sec .e-con.insight-card:nth-child(3) { --cardGlow: #ff66c73d; } .market-demand-sec .e-con.insight-card:nth-child(4) { --cardGlow: #53f0a647; } .e-con.preview-panel { min-height: 740px; background: var(--panelBg); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); } .e-con.preview-panel.NeonBlue { --panelBg: radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .72), transparent 25%), linear-gradient(135deg, #e9fbff, #eef4ff 58%, #ffffff); --currentFinish: #2F7DFF; --currentGlow: rgba(66, 221, 255, .36); } .e-con.preview-panel.NeonViolet { --panelBg: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .72), transparent 25%), linear-gradient(135deg, #f4eeff, #fbf3ff 58%, #ffffff); --currentFinish: #8A5CFF; --currentGlow: rgba(138, 92, 255, .32); } .e-con.preview-panel.NeonCyan { --panelBg: radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .72), transparent 25%), linear-gradient(135deg, #e9feff, #f1fff9 58%, #ffffff); --currentFinish: #2DDAD1; --currentGlow: rgba(55, 232, 255, .34); } .e-con.preview-panel.NeonGreen { --panelBg: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .72), transparent 25%), linear-gradient(135deg, #effff7, #f8fff1 58%, #ffffff); --currentFinish: #4BE7B4; --currentGlow: rgba(83, 240, 166, .34); } .e-con.preview-panel.NeonPink { --panelBg: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .72), transparent 25%), linear-gradient(135deg, #fff0f8, #fff6fb 58%, #ffffff); --currentFinish: #FF9BBB; --currentGlow: rgba(255, 102, 199, .34); } .e-con.preview-panel.NeonGradient { --panelBg: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .72), transparent 25%), linear-gradient(135deg, #effcff, #f6f0ff 48%, #fff1fb 78%, #ffffff); --currentFinish: conic-gradient(from 30deg, #36cfff, #8a5cff, #ff66c7, #36cfff); --currentGlow: rgba(138, 92, 255, .34); } /* ------------- NTI Neon Finish Color Studio: shade preview ------------- */ .preview-panel > .elementor-widget-html, .preview-panel > .elementor-widget-html > .elementor-widget-container { display: contents; } .surface-demo { position: relative; z-index: 1; display: grid; place-items: center; min-height: 260px; flex: 1; } .neon-object { width: min(80%, 315px); aspect-ratio: 1 / 1; border-radius: 50%; /* v16 design: lighter highlight and shading over the solid shade colour */ background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .68), rgba(255, 255, 255, .13) 17%, transparent 38%), linear-gradient(150deg, rgba(255, 255, 255, .08), transparent 35%, rgba(20, 30, 52, .22)), var(--currentFinish); box-shadow: inset -16px -25px 60px rgba(18, 28, 52, .12), 0 28px 65px rgba(30, 46, 76, .16), 0 0 55px var(--currentGlow); transition: background .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1); } .shade-spectrum, .gradient-builder, .shade-control { position: relative; z-index: 1; min-height: 190px; box-sizing: border-box; padding: 24px; border: 1px solid rgba(224, 233, 247, .96); border-radius: 6px; background: rgba(255, 255, 255, .76); backdrop-filter: blur(16px); box-shadow: 0 14px 40px rgba(30, 46, 76, .08); } .spectrum-head, .shade-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .spectrum-head b, .shadeName b { font-size: 17px; font-weight: 800; letter-spacing: -.04em; color: #101827; } .spectrum-head span, .shadeName span { font-size: 14px; font-weight: 600; color: #66758B; } .spectrum-note { margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.45; color: #66758B; } .shade-range { width: 100%; height: 16px; border-radius: 999px; background: var(--spectrumGrad); -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; position: relative; z-index: 2; touch-action: manipulation; -webkit-user-drag: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 8px 22px rgba(30, 46, 76, .1); } .shade-spectrum, .gradient-builder, .shade-control { -webkit-user-drag: none; } .shade-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border: 3px solid #152034; border-radius: 50%; background: #ffffff; box-shadow: 0 9px 22px rgba(30, 46, 76, .22); cursor: pointer; } .shade-range::-moz-range-thumb { width: 30px; height: 30px; border: 3px solid #152034; border-radius: 50%; background: #ffffff; box-shadow: 0 9px 22px rgba(30, 46, 76, .22); cursor: pointer; } .shade-range:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 0 0 3px rgba(15, 54, 111, .45); } .slider-end-labels { display: flex; justify-content: space-between; margin-top: 7px; color: #64737d; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } /* Neon Gradient tab only - multi-select colour chips */ .gradient-palette { display: flex; flex-wrap: wrap; gap: 12px; } .gradient-palette .gradient-chip, .gradient-palette .gradient-chip:hover, .gradient-palette .gradient-chip:focus { position: relative; width: 42px; height: 42px; padding: 0; border: 2px solid rgba(255, 255, 255, .95); border-radius: 50%; background: var(--chip); box-shadow: 0 10px 24px rgba(30, 46, 76, .16); cursor: pointer; } .gradient-palette .gradient-chip.active:after { content: "\2713"; position: absolute; right: -5px; top: -5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #152034; color: #ffffff; font-size: 11px; font-weight: 900; } .gradient-palette .gradient-chip:focus-visible { outline: 3px solid rgba(15, 54, 111, .45); outline-offset: 2px; } .gradient-line { height: 16px; margin-top: 16px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: var(--gradientLine); box-shadow: 0 0 22px rgba(138, 92, 255, .18); } /* "Shade range" dots in the right-hand spec table */ .swatch-row { display: flex; flex-wrap: wrap; gap: 12px; } .mini-swatch { display: inline-block; width: 34px; height: 34px; border-radius: 50%; background: var(--sw); } #Benefits { background: radial-gradient(circle at 14% 12%, rgba(83, 240, 166, 0.22), transparent 30%), radial-gradient(circle at 90% 28%, rgba(202, 255, 103, 0.16), transparent 28%), linear-gradient(rgb(250, 255, 255), rgb(244, 255, 249)); } #ProductionOptions { background: radial-gradient(circle at 10% 18%, rgba(54, 207, 255, 0.22), transparent 30%), radial-gradient(circle at 86% 22%, rgba(255, 102, 199, 0.16), transparent 30%), linear-gradient(rgb(255, 255, 255), rgb(245, 251, 255)); } /* .e-con.preview-panel:before { content: ""; position: absolute; inset: -50%; width: auto; height: auto; border-radius: 0; background: conic-gradient(from var(--angle, 30deg), transparent 0 10%, rgba(255, 255, 255, .58) 12%, transparent 20%, rgba(255, 255, 255, .24) 32%, transparent 46%); animation: slowspin 15s linear infinite; opacity: .52; pointer-events: none; } */ @keyframes slowspin { 100% {transform: rotate(360deg);} } /*----------------------------- Metallic Colors -----------------------------*/ .e-con.metallic-colors { background: radial-gradient(circle at 14% 12%, rgba(255, 255, 255, .98), transparent 26%), radial-gradient(circle at 82% 18%, rgba(67, 111, 139, .34), transparent 28%), radial-gradient(circle at 82% 78%, rgba(180, 109, 75, .30), transparent 24%), radial-gradient(circle at 42% 90%, rgba(176, 145, 90, .22), transparent 23%), linear-gradient(130deg, #f9fbfc 0%, #cfd7dc 42%, #8f9da5 73%, #e9edef 100%); display: flex; align-items: center; position: relative; overflow: hidden; } .e-con.metallic-colors:before { background-image: repeating-linear-gradient(100deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 7px), linear-gradient(rgba(45, 59, 69, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 59, 69, .04) 1px, transparent 1px); background-size: auto, 74px 74px, 74px 74px; content: ""; position: absolute; inset: 0; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, .06)); } .e-con.metallic-colors .hero-disc { position: absolute; right: -8%; top: 9%; width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle at 27% 20%, #fff 0 5%, #e9edef 6% 17%, #8f9aa2 29%, #f8fafb 43%, #60717b 60%, #c9d0d5 76%, #7f8c94 100%); box-shadow: inset 28px 28px 88px rgba(255, 255, 255, .58), inset -38px -45px 100px rgba(49, 69, 80, .34), 0 50px 140px rgba(49, 69, 80, .24); opacity: .88; } .e-con.metallic-colors .hero-disc:before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: conic-gradient(from 12deg, #f7f9fa, #9faab1, #b08d57, #d8dde0, #b46d4b, #4b718a, #f7f9fa); opacity: .78; filter: saturate(.85); } .e-con.metallic-colors .hero-disc:after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .12) 28%, rgba(49, 69, 80, .25) 68%, rgba(255, 255, 255, .64)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); } .e-con.metallic-colors .hero-sheen { position: absolute; /* right: 5%; */ right: 125px; top: 25%; width: 500px; height: 100px; border-radius: 50%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .96) 38%, transparent 66%); transform: rotate(-26deg); filter: blur(7px); opacity: .75; } .e-con.silverwash { background: radial-gradient(circle at 8% 8%, rgba(255, 255, 255, .9), transparent 26%), repeating-linear-gradient(104deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 9px), linear-gradient(145deg, #f6f8f9, #c9d2d7 58%, #e9edef); } .e-con.silverwash .insight-card:before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, var(--glow), transparent 56%); opacity: .9; } .e-con.silverwash .insight-card:nth-child(1) { --glow: rgba(210, 218, 222, .78); } .e-con.silverwash .insight-card:nth-child(2) { --glow: rgba(75, 113, 138, .20); } .e-con.silverwash .insight-card:nth-child(3) { --glow: rgba(180, 109, 75, .22); } .e-con.silverwash .insight-card:nth-child(4) { --glow: rgba(176, 145, 90, .25); } .e-con.chromewash { background: radial-gradient(circle at 12% 12%, rgba(255, 255, 255, .98), transparent 28%), radial-gradient(circle at 86% 26%, rgba(75, 113, 138, .20), transparent 30%), repeating-linear-gradient(102deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 8px), linear-gradient(145deg, #d7dfe3, #fbfcfd 46%, #aebbc2); } .e-con.chromewash .surface-demo { display: grid; place-items: center; min-height: 320px; } /* metal-object: smoothed sphere (2026-09-30; highlight/shadow/size to the v16 design 2026-10-13). The metallic finishes are light -> dark -> light gradients, whose middle stop draws a hard 45deg line, so the finish is painted on a blurred ::before and Neon's light/shade layers + inset rim on an ::after above it. Colours still come from --currentFinish / --currentGlow (metallicStudio, per shade). */ .e-con.chromewash .metal-object { position: relative; width: min(82%, 330px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; isolation: isolate; background: var(--currentFinish); /* v16 design (2026-10-13): softer drop shadow, no coloured glow */ box-shadow: 0 24px 48px rgba(43, 58, 69, .2); transition: box-shadow .45s cubic-bezier(.2, .8, .2, 1); } .e-con.chromewash .metal-object:before, .e-con.chromewash .metal-object:after { content: ""; position: absolute; pointer-events: none; } .e-con.chromewash .metal-object:before { inset: -18%; background: var(--currentFinish); filter: blur(28px); z-index: 0; } .e-con.chromewash .metal-object:after { inset: 0; border-radius: inherit; /* v16 design highlight + shading, no inset rim */ background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .15) 18%, transparent 32%), linear-gradient(135deg, rgba(255, 255, 255, .25), transparent 42%, rgba(31, 48, 58, .18)); box-shadow: inset -20px -26px 50px rgba(35, 50, 60, .12); z-index: 1; } /* Metallic Colors only (v16 design): plate padding and the slate slider thumb. .shade-range itself is shared with Neon / Gold / Bio, so this is scoped to the page's section. */ .e-con.metallic-color .surface-demo { padding: 26px 0; } .e-con.metallic-color .shade-range:not(:focus-visible) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 8px 22px rgba(43, 58, 69, .1); } .e-con.metallic-color .shade-range::-webkit-slider-thumb { border-color: #354853; box-shadow: 0 9px 22px rgba(43, 58, 69, .22); } .e-con.metallic-color .shade-range::-moz-range-thumb { border-color: #354853; box-shadow: 0 9px 22px rgba(43, 58, 69, .22); } .e-con.preview-panel.MetallicSilver { --panelBg: radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .90), transparent 25%), linear-gradient(135deg, #edf1f3, #c3ccd1 58%, #f8fafb); --currentFinish: linear-gradient(135deg,#ffffff,#aeb8bd 50%,#eef1f3); --currentGlow: rgba(214, 221, 225, .52); --spectrumGrad: linear-gradient(90deg, #f8fafb, #dce1e4, #aab4ba, #87949b, #697880); } .e-con.preview-panel.MetallicBrass { --panelBg: radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .78), transparent 25%), linear-gradient(135deg, #e9e6de, #c3b18b 58%, #f1f0ec); --currentFinish: linear-gradient(135deg,#eadfbe,#b18d53 52%,#d1b77d); --currentGlow: rgba(176, 145, 90, .46); --spectrumGrad: linear-gradient(90deg, #ddcfaa, #c3aa76, #ad8a52, #907043, #6f5739); } .e-con.preview-panel.MetallicCopper { --panelBg: radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .70), transparent 25%), linear-gradient(135deg, #eee4df, #c8957f 58%, #f4efec); --currentFinish: linear-gradient(135deg,#efb18c,#b75d3c 50%,#d7835c); --currentGlow: rgba(180, 109, 75, .48); --spectrumGrad: linear-gradient(90deg, #e3a17b, #c67752, #b96846, #9c573d, #744232); } .e-con.preview-panel.MetallicBronze { --panelBg: radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .62), transparent 25%), linear-gradient(135deg, #ebe6e0, #b69f88 58%, #f1eeeb); --currentFinish: linear-gradient(135deg,#cfb58f,#8d6b48 52%,#aa855e); --currentGlow: rgba(146, 112, 78, .46); --spectrumGrad: linear-gradient(90deg, #bca17c, #a1825c, #896b4d, #74583f, #5f4937); } .e-con.preview-panel.DarkMetallic { --panelBg: radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .60), transparent 25%), linear-gradient(135deg, #dfe4e6, #86949b 58%, #eef1f2); --currentFinish: linear-gradient(135deg,#aab4ba,#586a74 52%,#849198); --currentGlow: rgba(70, 89, 99, .48); --spectrumGrad: linear-gradient(90deg, #929da3, #7c8990, #66757e, #566873, #465963); } .e-con.preview-panel.MetallicBlue { --panelBg: radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .64), transparent 25%), linear-gradient(135deg, #dfe7eb, #8aa1ae 58%, #edf1f3); --currentFinish: linear-gradient(135deg,#a9bbc5,#55768a 52%,#829cab); --currentGlow: rgba(75, 113, 138, .50); --spectrumGrad: linear-gradient(90deg, #8da5b4, #69879a, #52748a, #41647b, #345268); } .e-con.enhance-section { background: radial-gradient(circle at 16% 12%, rgba(255, 255, 255, .96), transparent 25%), radial-gradient(circle at 88% 24%, rgba(75, 113, 138, .22), transparent 30%), radial-gradient(circle at 82% 82%, rgba(180, 109, 75, .23), transparent 24%), repeating-linear-gradient(103deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 9px), linear-gradient(140deg, #d7dfe3, #f7f9fa 48%, #aebcc4); } .e-con.enhance-shell { border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(191, 202, 208, .78)); border-color: rgba(102, 123, 136, .52); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 30px 90px rgba(43, 58, 69, .19); overflow: hidden; backdrop-filter: blur(16px); } /* -------------- Content toggle button styles -------------- */ .enhance-cont { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-size: 12px; font-weight: 800; line-height: 100%; text-transform: uppercase; } .label { height: 40px; width: 100px; background: #bdc8ce; border-radius: 30px; display: flex; align-items: center; cursor: pointer; position: relative; transition: transform 0.4s; } .nti-finish-checkbox {display: none;} .nti-finish-checkbox:checked ~ .label { background: linear-gradient(135deg, #90a4af, #4b718a 60%, #b46d4b); } .nti-finish-checkbox:checked ~ .label::before { left: 64px; background-color: #ffffff; /* background-image: linear-gradient(225deg, #37C0EB 0%, #0F366F 100%); */ transition: 0.4s; } .label::before { position: absolute; content: ""; height: 32px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #000000; /* background-image: linear-gradient(225deg, #edf1f3 0%, #323434 100%); */ background-image: linear-gradient(130deg, #757272 10%, #ffffff 11%, #726f6f 62%); left: 4px; transition: 0.4s; } /* -------------- Content toggle button styles end -------------- */ .e-con.enhance-visual { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(105, 125, 137, .52); background: radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .92), transparent 22%), linear-gradient(145deg, #e9edef, #8d9ca5 66%, #cbd4d9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .58), 0 24px 60px rgba(43, 58, 69, .18); } .enhanced-on .e-con.enhance-visual { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 30px 72px rgba(43, 58, 69, .22), 0 0 58px rgba(75, 113, 138, .16); } /* .visual-badge { background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .82); backdrop-filter: blur(14px); box-shadow: 0 16px 38px rgba(43, 58, 69, .14); } */ .e-con.benefit { background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(197, 207, 212, .62)); border-color: rgba(103, 125, 137, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85); transform: translateY(-2px); border-radius: 12px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s } .enhanced-on .e-con.benefit { background: linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(210, 224, 231, .90) 58%, rgba(204, 187, 178, .52)); border-color: rgba(75, 113, 138, .34); box-shadow: 0 18px 46px rgba(53, 76, 90, .16), 0 0 0 1px rgba(255, 255, 255, .56) inset; transform: translateY(-2px); } /* .e-con.enhancement-cta:before { content: ""; width: 200%; position: absolute; left: -48px; top: 0; border-top: 1px solid #5A707D61; } */ .visual-badge h6.elementor-heading-title { text-transform: unset !important; } .e-con.benefit h3.elementor-heading-title, .visual-badge h3.elementor-heading-title { font-weight: 800 !important; } .e-con.benefit .elementor-widget-text-editor p { font-size: var(--e-global-typography-9579317-font-size); font-weight: var(--e-global-typography-9579317-font-weight); line-height: var(--e-global-typography-9579317-line-height); } /* ---------------- Enhancement toggle (FinishGuard / WearGuard / Oleo Repel) ---------------- */ .e-con.enhance-shell .e-con.enhanced-on { display: none; } .e-con.enhance-shell.is-enhanced .e-con.enhanced-off { display: none; } .e-con.enhance-shell.is-enhanced .e-con.enhanced-on { display: var(--display, flex); } .enhance-cont .enhance-status.checked { display: none; } .enhance-shell.is-enhanced .enhance-cont .enhance-status { display: none; } .enhance-shell.is-enhanced .enhance-cont .enhance-status.checked { display: block; } .bluewash { background: radial-gradient(circle at 12% 18%, rgba(75, 113, 138, .25), transparent 29%), repeating-linear-gradient(102deg, rgba(255, 255, 255, .15) 0 1px, transparent 1px 8px), linear-gradient(145deg, #edf1f3, #bfcbd1 55%, #e2e8eb); } .e-con.validation-visual { position: relative; min-height: 360px; border-radius: 12px 0 0 12px; background: radial-gradient(circle at 24% 20%, rgba(255, 255, 255, .78), transparent 22%), var(--valBg); border: 1px solid rgba(178, 189, 196, .92); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .44); } .acc-tab .e-con.validation-visual { --valBg: linear-gradient(135deg, #edf1f3, #aab5bb); --valGrad: linear-gradient(135deg, #f8fafb, #9aa6ad 52%, #4b718a); } .cwmd-tab .e-con.validation-visual { --valBg: linear-gradient(135deg, #e9ecee, #8d9aa1); --valGrad: linear-gradient(135deg, #dce1e4, #5c707a 52%, #b46d4b); } .eccr-tab .e-con.validation-visual { --valBg: linear-gradient(135deg, #e5eaed, #8398a4); --valGrad: linear-gradient(135deg, #b0915a, #7d8990 52%, #4b718a); } .e-con.outcome-card { background: rgba(255, 255, 255, .78); border: 1px solid rgba(120, 136, 146, .52); box-shadow: 0 16px 48px rgba(43, 58, 69, .10) !important; } .e-con.challenge-card, .e-con.outcome-card, .e-con.scale-card, .e-con.studio-shell, .e-con.validation-shell { background: linear-gradient(145deg, rgba(255, 255, 255, .91), rgba(209, 217, 222, .78)); border-color: rgba(120, 136, 146, .52); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 22px 58px rgba(43, 58, 69, .13) !important; } .e-con.warmwash { background: radial-gradient(circle at 10% 16%, rgba(180, 109, 75, .24), transparent 28%), radial-gradient(circle at 88% 18%, rgba(176, 145, 90, .24), transparent 27%), repeating-linear-gradient(102deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 9px), linear-gradient(150deg, #e7eaeb, #bcc6cb 57%, #e8ecee); } /*----------------------------- Metallic Colors End -----------------------------*/ /*----------------------------- Gold Colors -----------------------------*/ .e-con.gold-colors { display: flex; align-items: center; background: radial-gradient(circle at 72% 22%, rgba(255, 255, 255, .72), transparent 20%), radial-gradient(circle at 16% 20%, rgba(244, 228, 188, .72), transparent 28%), radial-gradient(circle at 78% 72%, rgba(212, 168, 73, .28), transparent 30%), linear-gradient(135deg, #fffaf0 0%, #f7e8c5 48%, #dcb357 100%); position: relative; overflow: hidden; color: #1e1607; } .e-con.gold-colors:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .38) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .28) 1px, transparent 1px); background-size: 74px 74px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .62), rgba(0, 0, 0, .12)); } .e-con.gold-colors:after { content: ""; position: absolute; right: -10%; top: 5%; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff8d7 0 8%, #f5d983 9% 19%, #c58d24 20% 44%, rgba(146, 91, 12, .20) 45% 63%, transparent 68%); filter: blur(2px); opacity: .95; box-shadow: inset 40px 40px 120px rgba(255, 255, 255, .45), inset -50px -60px 120px rgba(108, 68, 13, .28); } .e-con.gold-colors .hero-sheen { position: absolute; inset: auto 5% 8% auto; width: 320px; height: 120px; border-radius: 50%; background: linear-gradient(115deg, transparent, #fff8c9 28%, rgba(255, 255, 255, .08) 48%, transparent); transform: rotate(-20deg); filter: blur(10px); opacity: .85; } .e-con.goldwash { background: linear-gradient(180deg, #fffdf8, #fff7e8); } .e-con.collection { background: linear-gradient(180deg, #fffaf0, #fffdf8 52%, #fff7e7); } .e-con.challenge-tile { background: rgba(255, 255, 255, .76); border: 1px solid #eadfc7; border-radius: 12px; padding: 24px; box-shadow: 0 16px 50px rgba(96,65,12,.09); position: relative; overflow: hidden; min-height: 250px; } .e-con.challenge-tile:before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(229, 191, 104, .18), transparent 58%); opacity: .9; } /* gold-object: smoothed Neon sphere (2026-09-30), same as .metal-object — shape, highlight, shading and shadow of .neon-object; colour from var(--currentFinish) on a blurred ::before so a light -> dark -> light finish cannot draw a hard 45deg line. */ .elementor-widget-html .gold-object { position: relative; width: min(82%, 340px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; isolation: isolate; background: var(--currentFinish); /* v26 design (2026-10-13): soft warm drop shadow, no glow */ box-shadow: 0 24px 48px rgba(94, 61, 13, .18); transition: box-shadow .45s cubic-bezier(.2, .8, .2, 1); } .elementor-widget-html .gold-object:before, .elementor-widget-html .gold-object:after { content: ""; position: absolute; pointer-events: none; } .elementor-widget-html .gold-object:before { inset: -18%; border: 0; border-radius: 0; background: var(--currentFinish); filter: blur(28px); z-index: 0; } .elementor-widget-html .gold-object:after { inset: 0; border: 0; border-radius: inherit; /* v26 design highlight + warm shading, no inset rim */ background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .58), transparent 30%), linear-gradient(140deg, rgba(255, 255, 255, .08) 40%, rgba(58, 37, 8, .24)); box-shadow: none; z-index: 1; } .HardGold .elementor-widget-html .shade-control { position: relative; z-index: 2; background: rgba(255, 255, 255, .68); border: 1px solid rgba(234, 223, 199, .9); border-radius: 12px; padding: 16px; backdrop-filter: blur(16px); } .HardGold .elementor-widget-html .stage-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .HardGold .elementor-widget-html .stage-info { display: flex; flex-direction: column; } .HardGold .elementor-widget-html .stage-info span { display: block; font-size: 14px; } .HardGold .elementor-widget-html .stage-swatch { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: var(--currentFinish); box-shadow: 0 6px 16px rgba(96, 65, 12, .12); } .HardGold .elementor-widget-html .hardgold-axis-stack { display: grid; gap: 8px; margin-top: 12px; } .HardGold .elementor-widget-html .hardgold-axis { background: rgba(255, 250, 240, .86); border: 1px solid rgba(196, 151, 62, .24); border-radius: 12px; padding: 12px; } .HardGold .elementor-widget-html .axis-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 5px; } .HardGold .elementor-widget-html .axis-head small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9b6411; font-weight: 900; } .HardGold .elementor-widget-html .axis-head b { display: none; } .HardGold .elementor-widget-html .axis-slider { position: relative; z-index: 2; cursor: pointer; touch-action: manipulation; -webkit-user-drag: none; width: 100%; accent-color: #c08a24; min-height: 24px; } .HardGold .elementor-widget-html .axis-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: #7a6f5e; font-weight: 900; margin-top: 2px; } /* Gold Colors only (v26 design): slider thumb in the gold accent the design uses (#c08a24). */ .e-con.gold-color .shade-range::-webkit-slider-thumb { border-color: #c08a24; } .e-con.gold-color .shade-range::-moz-range-thumb { border-color: #c08a24; } .e-con.preview-panel.GoldTone { --panelBg: radial-gradient(circle at 24% 18%,rgba(255,255,255,.9),transparent 20%), radial-gradient(circle at 80% 68%,rgba(212,168,73,.16),transparent 28%), linear-gradient(135deg,#fffaf1,#f4e0b2 70%,#e7c978); --currentFinish: #E6D3A3; --spectrumGrad: linear-gradient(90deg, #E6D3A3, #DDBB64, #D4A62D, #C98579, #B86448, #7A382D); } .e-con.preview-panel.HardGold { --panelBg: radial-gradient(circle at 24% 18%,rgba(255,255,255,.9),transparent 20%), radial-gradient(circle at 80% 68%,rgba(212,168,73,.16),transparent 28%), linear-gradient(135deg,#fffaf1,#f4e0b2 70%,#e7c978); --currentFinish: #D0A858; } .e-con.gold.enhance-section { background: linear-gradient(180deg, #fffdf8 0%, #fff5dc 48%, #f7e3b4 100%); position: relative; overflow: hidden; } .gold .e-con.enhance-visual { position: relative; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #fff9e9, #e8c36b); border: 1px solid rgba(203, 154, 51, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); } .gold .e-con.enhance-shell { background: rgba(255, 255, 255, .68); box-shadow: 0 28px 90px rgba(96,65,12,.14); } .gold .e-con.benefit { background: rgba(255, 255, 255, .72); border: 1px solid rgba(208, 162, 65, .25); transition: .25s ease; } .gold .label::before { background-color: #ffffff; background-image: unset; } .gold .label { background: #d7c6a0; } .gold .nti-finish-checkbox:checked ~ .label { background: linear-gradient(135deg, #d4a849, #9a6615); } .gold .enhanced-on .e-con.benefit { background: linear-gradient(135deg, #fffdf5, #fff0c7); box-shadow: 0 18px 48px rgba(205, 154, 43, .22), 0 0 0 1px rgba(212, 168, 73, .22) inset; } .gold.validation-section { background: linear-gradient(180deg, #fffaf0 0%, #fff7e8 58%, #fffdf8 100%); } .gold.validation-section:before { content: ""; position: absolute; left: -220px; top: -260px; width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 228, 188, .68), rgba(212, 168, 73, .18) 38%, transparent 70%); } .gold.validation-section:after { content: ""; position: absolute; right: -260px; bottom: -300px; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .72), rgba(212, 168, 73, .20) 42%, transparent 72%); } .gold .e-con.validation-visual { --valBg: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .92), transparent 28%), linear-gradient(135deg, #fffaf0, #f1dba4 58%, #d7ad52); } .goldwash .e-con.outcome-card { background: #ffffff; background-color: #ffffff; } .e-con.explore-section { background: linear-gradient(180deg, #fffdf8 0%, #fff7e8 100%); } .e-con.gold-cta-wrap { background: linear-gradient(180deg, #fff7e8, #fffdf8); } /*----------------------------- Gold Colors End -----------------------------*/ /*----------------------------- Black Colors -----------------------------*/ .e-con.black-breadcrumbs { background: linear-gradient(180deg, #0b0f17 0%, #080a0f 100%); } .e-con.black-breadcrumbs .breadcrumbs a, .e-con.black-breadcrumbs .breadcrumbs span { color: #ffffff; transition: 0.3s all; } .e-con.black-colors { display: flex; align-items: center; background: radial-gradient(circle at 18% 18%, rgba(85, 192, 235, .18), transparent 26%), radial-gradient(circle at 80% 22%, rgba(216, 189, 126, .12), transparent 30%), linear-gradient(135deg, #080d16 0%, #0e1724 45%, #050507 100%); position: relative; overflow: hidden; } .e-con.black-colors:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 74px 74px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25)); } .e-con.black-colors:after { content: ""; position: absolute; right: -12%; top: 10%; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 45%, transparent 70%); filter: blur(10px); } .e-con.demand-black { background: linear-gradient(180deg, #0b0f17 0%, #080a0f 100%); } .e-con.black-card { background: rgba(255, 255, 255, .065); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .28); position: relative; overflow: hidden; min-height: 250px; } .e-con.dark { background: #080a0f; } .e-con.refined-studio { border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 26px 80px rgba(10,20,35,.14); background: linear-gradient(145deg, #111824, #050507); } .e-con.preview-panel.Anthracite:before, .e-con.preview-panel.Black:before, .e-con.preview-panel.SuperBlack:before { display: none; } .e-con.preview-panel.Anthracite, .e-con.preview-panel.Black, .e-con.preview-panel.SuperBlack { background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .12), transparent 22%), radial-gradient(circle at 78% 60%, rgba(85, 192, 235, .12), transparent 26%), linear-gradient(145deg, #1c2430, #080a0f 62%, #020203); border-color: rgba(255, 255, 255, .18); } .e-con.preview-panel .shade-stage { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 20px; align-items: center; margin: 24px 0; } .l-readout { text-align: center; } .l-readout b { color: #ffffff; display: block; font-size: 54px; line-height: 1; letter-spacing: -.06em; } .l-readout span { color: #C5CFDF; font-weight: 700; } .slider-wrap { position: relative; z-index: 2; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 24px; } .slider-wrap input[type=range] { width: 100%; accent-color: #55c0eb; } .slider-meta { display: flex; justify-content: space-between; font-size: 12px; color: #C5CFDF; margin-top: 8px; } .slider-note { font-size: 12px; color: #C5CFDF; margin-top: 12px; line-height: 1.45; } /* shade-object: smoothed sphere (2026-09-30; highlight/shadow/size to the v23 design 2026-10-13); colour from var(--currentShade) on a blurred ::before so a light -> dark -> light finish cannot draw a hard 45deg line. */ .shade-object { position: relative; width: min(100%, 292px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; isolation: isolate; background: var(--currentShade); /* v23 design (2026-10-13): plain dark drop shadow, no glow */ box-shadow: 0 28px 64px rgba(0, 0, 0, .45); transition: box-shadow .45s cubic-bezier(.2, .8, .2, 1); } .shade-object:before, .shade-object:after { content: ""; position: absolute; pointer-events: none; } .shade-object:before { inset: -18%; border: 0; border-radius: 0; background: var(--currentShade); filter: blur(28px); z-index: 0; } .shade-object:after { inset: 0; border: 0; border-radius: inherit; /* v23 design: soft highlight + dark shading, no white rim */ background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .27), transparent 27%), linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 44%, rgba(0, 0, 0, .38)); box-shadow: none; z-index: 1; } .dark .e-con.enhance-shell { background: radial-gradient(circle at 16% 12%, rgba(85, 192, 235, .16), transparent 30%), linear-gradient(135deg, #111824, #050507); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 26px 80px rgba(10,20,35,.14); } .dark .label { background: #293141; border: 1px solid rgba(255, 255, 255, .2); } .dark .nti-finish-checkbox:checked ~ .label { background: #37C0EB; } .dark .enhance-status { color: #C5CFDF; } .dark .e-con.enhance-visual { background: linear-gradient(145deg, #151c27, #050609); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); } .dark .e-con.benefit { box-shadow: unset; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .055); } .dark .enhanced-on .e-con.benefit { border-color: rgba(85, 192, 235, .42); background: rgba(85, 192, 235, .08); box-shadow: 0 15px 42px rgba(85, 192, 235, .06); } .dark.validation-section.e-con { background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .08), transparent 24%), linear-gradient(180deg, #0d121b, #080a0f); } .dark .e-con.validation-visual { background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .15), transparent 20%), linear-gradient(145deg, #151c27, #050609); } .alt.e-con { background: linear-gradient(180deg, #101620 0%, #0a0d12 100%); } .alt .e-con.outcome-card { background: rgba(255, 255, 255, .065); border-color: rgba(255, 255, 255, .12); box-shadow: 0 20px 60px rgba(0, 0, 0, .28); } .alt .e-con.app-visual { inset: 0; background: linear-gradient(135deg, #1b222e, #050507); } .black.e-con.explore-section { background: radial-gradient(circle at 12% 8%, rgba(85, 192, 235, .08), transparent 24%), linear-gradient(180deg, #0a0d12, #101620); } .black.e-con.request-section { background: linear-gradient(180deg, #111722, #07090d); } /*----------------------------- Black Colors End -----------------------------*/ .benefits-mid.e-con { background: radial-gradient(circle at 18% 34%, rgba(145, 183, 201, 0.12), transparent 27%), linear-gradient(132deg, rgb(6, 21, 31), rgb(16, 39, 53) 54%, rgb(7, 19, 29)); } .cert-standards.e-con { background: linear-gradient(135deg, rgba(55, 195, 235, 0.1), rgba(15, 54, 111, 0.18)); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; } .hc-hero-photo.e-con:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 26, 52, .92) 0%, rgba(7, 26, 52, .72) 45%, rgba(7, 26, 52, .34) 100%); } .validation.e-con { background: radial-gradient(circle at 78% 10%, rgba(55, 192, 235, 0.1), transparent 24%), linear-gradient(135deg, rgb(7, 16, 29), rgb(10, 26, 44) 52%, rgb(16, 40, 68)); } .hc-aside p { line-height: 1.5; } /* .hc-copy > .hc-desc { font-weight: 800; } .hc-copy > .hc-desc ~ .hc-desc { font-weight: 500; } */ .hc-col .hc-note { margin: 0 0 32px !important; } .hsfc-Step .hsfc-Step__Content { padding: 0; } .anchor-btn a.active .elementor-button-text { color: #0F366F; } .anchor-btn a.active:after { content: ""; width: 100%; position: absolute; left: 0; bottom: 0px; border-bottom: 2px solid #0F366F; } .nti-subpage-acc .e-n-accordion-item-title { border: none; } .nti-subpage-acc .e-n-accordion-item { background-color: #ffffff; border-radius: 24px; } .nti-fcva-table table { table-layout: fixed; border-collapse: collapse; } .nti-faq-acc .e-n-accordion-item .e-n-accordion-item-title { background: linear-gradient(195deg, #0F366F, #1C1A52) border-box; } .sub-approach-4:after { content: ""; width: 78%; height: 80px; position: absolute; left: 50%; bottom: -80px; z-index: 0; transform: translateX(-50%); background: url('/wp-content/themes/hello-theme-child-master/theme/default/imges/Group%2018994.svg') no-repeat center / contain; } .sub-approach-1:after { content: ""; width: 100%; height: 40px; position: absolute; left: 50%; bottom: -35px; z-index: 0; transform: translateX(-50%); background: url('/wp-content/themes/hello-theme-child-master/theme/default/imges/Line%2058.svg') no-repeat center / contain; } /* ------------------------ Hotspot ------------------------*/ .nti-global-footprint .e-hotspot__button { cursor: auto; } @keyframes hotspot-soft-beat { 0% {transform: scale(1);} 100% {transform: scale(1.3);} } .nti-global-footprint .e-hotspot__button .e-hotspot__icon { animation: hotspot-soft-beat .7s infinite alternate; animation-timing-function: ease; } /* Prevent hotspot SVG edges from being clipped at fractional sizes */ .nti-global-footprint .e-hotspot__button, .nti-global-footprint .e-hotspot__icon, .nti-global-footprint .e-hotspot__icon svg { overflow: visible !important; } /* ------------------------ News ------------------------*/ /* Matches .nti-pill exactly - kit tokens (accent background, white 7543a8e text, Caption/Tag typography 38dd119) instead of the old literal cyan/white/12px values, plus the same flex centering. */ .term-bubble .elementor-post-info__terms-list-item { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 3px 12px; background-color: var(--e-global-color-accent); border-radius: 100px; font-family: var(--e-global-typography-38dd119-font-family), sans-serif; font-size: var(--e-global-typography-38dd119-font-size); font-weight: var(--e-global-typography-38dd119-font-weight); line-height: var(--e-global-typography-38dd119-line-height); letter-spacing: var(--e-global-typography-38dd119-letter-spacing); color: var(--e-global-color-7543a8e); } .elementor-widget-loop-grid .e-loop__load-more a.elementor-button { } .nti-news-filters .e-filter .e-filter-item { border-radius: 12px; padding: 4px 8px; white-space: nowrap; } .nti-news-filters .e-filter .e-filter-item[aria-pressed="true"] { background-color: #37C0EB; color: white; } .tax-filter-toggle { width: 100%; } .tax-filter-dropdown { position: relative; width: fit-content !important; min-width: 150px !important; } .tax-filter-dropdown .tax-filter-toggle a { width: 100%; } .tax-filter-dropdown .tax-filter-toggle a .elementor-button-content-wrapper { justify-content: space-between; } .tax-filter-dropdown .elementor-widget-taxonomy-filter { display: none; position: absolute; top: calc(100% + 5px); min-width: 100% !important; border-radius: 12px !important; left: 0; z-index: 2; } .tax-filter-dropdown.active .elementor-widget-taxonomy-filter { display: block; max-width: 90vw !important; width: max-content; } .news-article h2 { color: var(--nanofilm-blue); } .fy-highlights a { color: #323434; } .fy-highlights a:not([href]) { opacity: 0.5; } /* --------------------------- Company (Sustainability Page) --------------------------- */ /* Sustainability Card - Title: Forces 2-line height alignment using em units */ .sustainability-card .elementor-widget-heading h2, .sustainability-card .elementor-widget-heading h3 { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(2 * 1.3em) !important; /* Preserves 2-line height based on heading font size */ } /* Sustainability Card - Body Text: Forces 3-line height alignment with text truncation */ .sustainability-card .elementor-widget-text-editor p { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(3 * 1.55em) !important; /* Preserves 3-line height based on body font size */ } /* Sustainability Card - Action Button: Pushes button to the bottom for horizontal alignment */ .sustainability-card .elementor-widget-button { margin-top: auto !important; } /* ========================================================= NTI Certificates Pages ========================================================= */ .nti-certificate-tabs { --cert-blue: #0F366F; --cert-cyan: #37C3EB; --cert-dark: #323434; --cert-light: #EDF1F3; --cert-line: #E3E3E3; --n-tabs-gap: 0 !important; --n-tabs-title-gap: 0 !important; } .nti-certificate-tabs .e-n-tabs-content { min-width: 0; } .nti-certificate-tabs .e-n-tab-title { border: 0 !important; font-family: "Manrope", sans-serif !important; font-size: 16px !important; cursor: pointer; transition: background .2s ease, color .2s ease; } /* ========================================================= Desktop tabs ========================================================= */ @media (min-width: 1025px) { .nti-certificate-tabs .e-n-tabs { display: grid !important; grid-template-columns: 260px minmax(0, 1fr) !important; gap: 0 56px !important; align-items: start !important; } .nti-certificate-tabs .e-n-tabs-heading { display: flex !important; flex-direction: column !important; align-items: stretch !important; position: sticky; top: 24px; width: 260px !important; box-sizing: border-box; padding-right: 24px !important; overflow: visible !important; } .nti-certificate-tabs .e-n-tabs-heading::before { content: "Locations"; display: block; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--cert-line); color: var(--cert-dark); font: 800 17px/1.3 "Manrope", sans-serif; } .nti-certificate-tabs .e-n-tab-title { justify-content: flex-start !important; width: 100% !important; padding: 14px !important; border-radius: 8px !important; background: transparent !important; color: var(--cert-dark) !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: left !important; } @media (hover: hover) { .nti-certificate-tabs .e-n-tabs[data-touch-mode="false"] .e-n-tab-title:hover { background: linear-gradient( 190deg, var(--cert-cyan), var(--cert-blue) ) !important; color: #FFFFFF !important; } } .nti-certificate-tabs .e-n-tab-title[aria-selected="true"], .nti-certificate-tabs .e-n-tab-title[aria-selected="true"]:hover { background: var(--cert-light) !important; color: var(--cert-blue) !important; font-weight: 800 !important; } .nti-certificate-tabs .e-n-tabs-content { position: relative; width: auto !important; } .nti-certificate-tabs .e-n-tabs-content::before { content: ""; position: absolute; top: 0; bottom: 0; left: -28px; width: 1px; background: var(--cert-line); pointer-events: none; } body.admin-bar .nti-certificate-tabs .e-n-tabs-heading { top: 56px; } } /* ========================================================= Tablet and Mobile tabs ========================================================= */ @media (max-width: 1024px) { .nti-certificate-tabs .e-n-tabs { display: flex !important; flex-direction: column !important; gap: 32px !important; } .nti-certificate-tabs .e-n-tabs-heading { --n-tabs-heading-justify-content: flex-start !important; display: flex !important; flex-flow: row nowrap !important; justify-content: flex-start !important; align-items: center !important; align-self: center !important; width: fit-content !important; max-width: 100% !important; box-sizing: border-box; margin-inline: auto !important; padding: 2px !important; border-radius: 100px !important; background: #FFFFFF !important; box-shadow: inset 0 0 0 1px var(--cert-blue); overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nti-certificate-tabs .e-n-tabs-heading::-webkit-scrollbar { display: none; } .nti-certificate-tabs .e-n-tabs-heading::before { display: none !important; } .nti-certificate-tabs .e-n-tab-title { flex: 0 0 auto !important; justify-content: center !important; width: auto !important; min-width: max-content !important; height: 42px !important; padding: 0 24px !important; border-radius: 100px !important; background: transparent !important; color: var(--cert-blue) !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; } .nti-certificate-tabs .e-n-tab-title[aria-selected="true"] { background: linear-gradient( 72.7deg, var(--cert-blue), var(--cert-cyan) ) !important; color: #FFFFFF !important; } .nti-certificate-tabs .e-n-tabs-content { width: 100% !important; } } /* ========================================================= Mobile adjustments ========================================================= */ @media (max-width: 767px) { .nti-certificate-tabs .e-n-tabs { gap: 24px !important; } .nti-certificate-tabs .e-n-tab-title { padding-inline: 20px !important; } } /* ========================================================= Certificate cards ========================================================= */ .nti-certificate-tabs .cert-card-grid { align-items: stretch !important; } .nti-certificate-tabs .cert-card { display: flex; flex-direction: column; height: 100%; } .nti-certificate-tabs .cert-card-body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; gap: 24px !important; } .nti-certificate-tabs .cert-download-btn { align-self: flex-start !important; margin-top: auto !important; } .nti-certificate-tabs .cert-card-image img { display: block; max-width: 100%; } /* ========================================================= CTA buttons — normal ========================================================= */ .nti-certificate-tabs .cert-overview-cta .elementor-button, .nti-certificate-tabs .cert-download-btn .elementor-button { border: 0 !important; background: linear-gradient( 190deg, var(--cert-cyan), var(--cert-blue) ) !important; color: #FFFFFF !important; box-shadow: none !important; transition: background .2s ease, color .2s ease, box-shadow .2s ease; } /* ========================================================= CTA buttons — hover ========================================================= */ @media (hover: hover) { .nti-certificate-tabs .cert-overview-cta .elementor-button:hover, .nti-certificate-tabs .cert-download-btn .elementor-button:hover { border: 0 !important; background: #FFFFFF !important; color: var(--cert-blue) !important; box-shadow: inset 0 0 0 1px var(--cert-blue) !important; } } /* ========================================================= Keyboard accessibility ========================================================= */ .nti-certificate-tabs .e-n-tab-title:focus-visible, .nti-certificate-tabs .cert-overview-cta .elementor-button:focus-visible, .nti-certificate-tabs .cert-download-btn .elementor-button:focus-visible { outline: 3px solid var(--cert-cyan) !important; outline-offset: 3px; } /* ========================================================= Reduced motion ========================================================= */ @media (prefers-reduced-motion: reduce) { .nti-certificate-tabs .e-n-tab-title, .nti-certificate-tabs .elementor-button { transition: none !important; } } /* --------------------------- Breakpoints For Mobile Devices --------------------------- */ @media (max-width: 1600px) {} @media (max-width: 1024px) { .slider-wrap { position: relative; z-index: 2; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 24px; } } @media (max-width: 830px) { .table-overflow-wrapper { overflow-x: auto; } .sub-approach-4:after { content: ""; width: 80%; height: 80px; position: absolute; left: 50%; bottom: -62px; z-index: 0; transform: translateX(-50%); background: url('/wp-content/themes/hello-theme-child-master/theme/default/imges/Group%2018994.svg') no-repeat center / contain; } .scene-visual { width: min(80vw, 420px); margin: 0 auto; } .nti-border-btn.app-cards-toggle.elementor-widget-button { margin-top: 24px !important; } .scene-number { bottom: -24px; } } @media (max-width: 480px) { .sub-approach-4:after { content: unset; display: none; } .sub-approach-1:after { content: unset; display: none; } } /* Careers page - Moments strip marquee (2026-08-13, careers rebuild; reworked to real CSS classes 2026-08-20) Containers 9b6c187 / b7677f6 carry Advanced tab -> CSS Classes "nti-moments-viewport" / "nti-moments-track". Container elements use the control key `css_classes` (no underscore) - widgets use `_css_classes` (with underscore). The original build set the underscore key on these containers, which is the widget-only key, so it silently did nothing; that was misread as Document::save() stripping the value. Confirmed both classes render in the live frontend HTML alongside Elementor's own elementor-element- class. !important on width/flex-wrap: Elementor's own per-element generated CSS (.elementor-7856 .elementor-element.elementor-element-, 3 classes) outranks our bare 1-class selector and was forcing width:100%. flex-direction is forced because Elementor containers default to column, not row, when unconfigured - that default was what actually collapsed the strip into a tall stack of one image per row. */ .nti-moments-viewport { position: relative; overflow: hidden; width: 100%; } .nti-moments-track { display: flex; flex-direction: row !important; gap: 24px; width: max-content !important; flex-wrap: nowrap !important; animation: ntiMomentsScroll 60s linear infinite; } .nti-moments-track:hover { animation-play-state: paused; } .nti-moments-track img { width: 480px; height: 320px; object-fit: cover; border-radius: 12px; flex-shrink: 0; } @keyframes ntiMomentsScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } } @media (max-width: 1024px) { .nti-moments-track img { width: 360px; height: 240px; } .e-con.validation-visual { border-radius: 12px 12px 0 0; } .dark.e-con .e-tabs-mobile-dropdown select, .cus-tab-1 .e-tabs-mobile-dropdown select, .validation .e-tabs-mobile-dropdown select { color: #ffffff; border: 1px solid #ffffff; } .dark.e-con .e-tabs-mobile-dropdown::after, .cus-tab-1 .e-tabs-mobile-dropdown::after, .validation .e-tabs-mobile-dropdown::after { border: solid #ffffff; border-width: 0 3px 3px 0; } } @media (max-width: 767px) { .nti-moments-track img { width: 280px; height: 187px; } .gold.validation-section:before { top: 0; } } @media (prefers-reduced-motion: reduce) { .nti-moments-track { animation: none; } } /* ----------------------------------------------------------------------- Success Stories tag pills (Industry/Product chips on the featured-large card and the compact row cards - templates 8406 and 8407, 4 widgets total). Previously each pill widget duplicated the same 8 Style/Advanced settings (background, radius, padding, typography, color, width, align-self) individually. Consolidated here into one reusable class, applied via each widget's Advanced tab -> CSS Classes ("nti-pill") instead of per-widget bindings. Change the look once here. Uses kit tokens (accent background, white 7543a8e text, the Caption/Tag typography token 38dd119) rather than literals. */ .nti-pill { display: inline-flex; align-self: flex-start; align-items: center; justify-content: center; width: auto; min-height: 27px; padding: 3px 12px; background-color: var(--e-global-color-accent); border-radius: 100px; } /* .elementor-heading-title renders as a
or a depending on each instance's HTML Tag setting (both used across the site - job page 813020a uses div, Success Stories cards use span with a further nested span inside), so this can't rely on block-level centering. Forcing it flex regardless of its own tag centers whatever is inside on both axes, through any further nested span. */ .nti-pill .elementor-heading-title { display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--e-global-typography-38dd119-font-family), sans-serif; font-size: var(--e-global-typography-38dd119-font-size); font-weight: var(--e-global-typography-38dd119-font-weight); line-height: var(--e-global-typography-38dd119-line-height); letter-spacing: var(--e-global-typography-38dd119-letter-spacing); color: var(--e-global-color-7543a8e); } /* ---- General Industries [12968]: "Show all 24 applications" ---- The grid carries .app-cards-collapse; cards after the 8th stay hidden until wpLContent.appCardsToggle (content.js) adds .is-expanded. Hidden in CSS, not by the script, so they never flash in on load. Never in the Elementor editor, so every card stays editable there. The 8 must match `limit` in content.js. */ body:not(.elementor-editor-active) .e-con.app-cards-grid.app-cards-collapse:not(.is-expanded) > .e-con.app-card:nth-child(n+9) { display: none; } /* the design's 32px gap above the button; .nti-border-btn sets margin-top: auto !important */ .nti-border-btn.app-cards-toggle.elementor-widget-button { margin-top: 32px !important; } /* after a click the button keeps focus, and Elementor (and the kit) paint :focus like :hover — white with navy text — until you click elsewhere. Keep the normal gradient for mouse/tap focus; keyboard focus (:focus-visible) still gets the hover look as its focus indicator */ .app-cards-toggle.elementor-widget-button a.elementor-button:focus:not(:focus-visible):not(:hover) { background-color: transparent; background-image: linear-gradient(190deg, var(--e-global-color-accent) 0%, var(--e-global-color-primary) 100%); color: var(--e-global-color-7543a8e); } @media (max-width: 768px) { .nti-border-btn.app-cards-toggle.elementor-widget-button { margin-top: 24px !important; } } /* --------------------------------------------------------------------------- Industry pages --------------------------------------------------------------------------- */ /* Card images keep the mockup 462:300 ratio at every width. Sections carry .nti-auto-v2, the image widgets .nti-auto-media */ .nti-auto-v2 .nti-auto-media img { display: block; width: 100%; height: auto; aspect-ratio: 462 / 300; object-fit: cover; } /* Hero: the content container (class .nti-hero-content) is position: absolute over the 580px banner. On mobile long copy (CE) spilled over the header and the bottom edge, so there it flows normally and the banner grows with it. */ @media (max-width: 767px) { .e-con.nti-hero-content { position: relative !important; } } /* Application detail popups - class .nti-detail-popup on the popup's top container ("Application Detail"), .nti-detail-image on its image widget. Popup settings: Content Position = Top, Prevent Page Scroll = off. The whole box scrolls rather than .dialog-message, so the close button (absolutely positioned in .dialog-widget-content) scrolls away with the content */ .elementor-popup-modal:has(.nti-detail-popup) .dialog-widget-content { max-height: calc(100vh - 120px); /* 60px clear above and below on desktop/tablet */ overflow-y: auto; overscroll-behavior: contain; } /* logged in: the 32px WP admin bar covers the top of the overlay, so centre the box in the space below it (the popup's own flex alignment centres it). Mobile keeps its own rule below */ @media (min-width: 768px) { body.admin-bar .elementor-popup-modal:has(.nti-detail-popup) { padding-top: 32px; } body.admin-bar .elementor-popup-modal:has(.nti-detail-popup) .dialog-widget-content { max-height: calc(100vh - 152px); } } .elementor-popup-modal:has(.nti-detail-popup) .dialog-message { max-height: none; overflow: visible; } @media (max-width: 767px) { .elementor-popup-modal:has(.nti-detail-popup) .dialog-widget-content { max-height: calc(100dvh - 48px); } } /* Every Elementor popup: Elementor fetches its dialog stylesheet (elementor/assets/css/conditionals/ dialog.min.css) only when the first popup opens. Until it arrives the popup is inserted as an ordinary block at the end of and the page jumps (386px measured on CE; constant with DevTools "Disable cache"). Same positioning values as dialog.min.css, here from page load. */ .elementor-popup-modal.dialog-type-lightbox { position: fixed; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .elementor-popup-modal .dialog-widget-content { position: absolute; } /* logged in, >=1024px: Elementor's common.min.css (loaded only with the admin bar) sets body.admin-bar .dialog-lightbox-widget { height: calc(100vh - 32px) } but keeps top: 0, so the overlay stopped 32px short of the bottom. Full height again; the box is offset below the bar by the admin-bar padding further down */ body.admin-bar .elementor-popup-modal.dialog-type-lightbox { height: 100%; } .nti-detail-popup .nti-detail-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* ----------------------------- Industry pages end ----------------------------- */ /* --------------------------------------------------------------------------- Hydrogen pages (28 Hydrogen Solutions Overview [13312] first; Sydrogen subpages 29-35 next) Sections carry .nti-h2-v2. Moved here from the page's styles widget once the design was approved (2026-10-09). --------------------------------------------------------------------------- */ /* ---- Paragraph gaps ---- base.css sets p { margin-block-end: 0 !important }, which also cancels Elementor's Paragraph Spacing, so consecutive paragraphs in one text editor are spaced from above instead */ .nti-h2-v2 .elementor-widget-text-editor p + p, .nti-detail-popup .elementor-widget-text-editor p + p { margin-top: 16px; } /* ---- Headings: the mockup breaks two-line titles with
; on phones that gives ragged breaks, so the line breaks only apply from tablet up (titles keep a space before each
) ---- */ @media (max-width: 767px) { .nti-h2-v2 .elementor-heading-title br { display: none; } } /* A coloured span in a title is its second line ("Reduce Platinum Use …"); keep it on its own line when the
s are hidden */ .nti-h2-v2 .elementor-heading-title span[style*="color"] { display: block; } /* ---- Capability pill tabs: the Homepage pill style (.nti-subpage-tab), grouped in one outlined capsule ---- */ .nti-h2-pills .e-n-tabs-heading { width: fit-content; margin-inline: auto; padding: 2px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--e-global-color-primary); gap: 0; } /* ---- Left-aligned capsule variant (29 SydroCoatings: the value tabs sit in the left column) ---- */ /* (0,5,0): base.css centres every .nti-subpage-tab capsule with margin: 0 auto at (0,4,0) */ .nti-subpage-tab.main-tabs.nti-h2-pills-start > .e-n-tabs > .e-n-tabs-heading { margin-inline: 0; } /* ---- 29 Our Difference (desktop): the mockup puts the tab capsule and the copy in a left column, vertically centred beside the image, which spans the full row. Nested tabs render capsule and panel one above the other, so above 1024px the tabs widget becomes that grid; the active panel's wrappers are dissolved with display: contents so its copy and image become grid items (inactive panels stay display: none). Below 1025px the dropdown layout is kept ---- */ @media (min-width: 1025px) { /* (0,4,0)+: Elementor's nested-tabs CSS loads after content.css and sets these at (0,2,0) */ .nti-subpage-tab.main-tabs.nti-h2-split > .e-n-tabs { display: grid; grid-template-columns: 10fr 11fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 60px; } .nti-subpage-tab.main-tabs.nti-h2-split > .e-n-tabs > .e-n-tabs-heading { grid-column: 1; grid-row: 2; } .nti-subpage-tab.main-tabs.nti-h2-split > .e-n-tabs > .e-n-tabs-content, .nti-subpage-tab.main-tabs.nti-h2-split > .e-n-tabs > .e-n-tabs-content > .e-con.e-active, .nti-subpage-tab.main-tabs.nti-h2-split > .e-n-tabs > .e-n-tabs-content > .e-con.e-active > .e-con { display: contents; } .nti-subpage-tab.main-tabs.nti-h2-split .e-n-tabs-content > .e-con.e-active > .e-con > .e-con { grid-column: 1; grid-row: 3; margin-top: 40px; } .nti-subpage-tab.main-tabs.nti-h2-split .e-n-tabs-content > .e-con.e-active > .e-con > .elementor-widget-image { grid-column: 2; grid-row: 1 / 5; } } /* ---- 29 dark bands (Coating Solutions, Manufacturing Options): mockup radial glow + 3-stop gradient. Elementor's background control has neither, so the band colour lives here (no Elementor background set) ---- */ .e-con.nti-h2-dark { background-image: radial-gradient(circle at 18% 34%, rgba(145, 183, 201, .12), rgba(0, 0, 0, 0) 27%), linear-gradient(132deg, #06151F, #102735 54%, #07131D); } /* ---- 29 application tiles (mockup .cell-tile): the whole tile is the link to its product section; hover lightens the border and fill, the icon turns white and its down arrow drops 3px ---- */ .e-con.nti-h2-tile { border: 1px solid rgba(255, 255, 255, .18); border-radius: 4px; background-image: linear-gradient(135deg, rgba(55, 195, 235, .1), rgba(15, 54, 111, .18)); text-decoration: none; transition: border-color .2s, background .2s; } .e-con.nti-h2-tile:hover, .e-con.nti-h2-tile:focus-visible { border-color: #37C3EB; background-image: linear-gradient(135deg, rgba(55, 195, 235, .18), rgba(15, 54, 111, .26)); } .nti-h2-tile-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(45deg, #0F366F 0%, #37C3EB 100%); color: #FFFFFF; transition: background .2s, color .2s; } /* the house up-right arrow, turned to point down */ .nti-h2-tile-icon svg { transform: rotate(135deg); transition: transform .2s; } .nti-h2-tile:hover .nti-h2-tile-icon, .nti-h2-tile:focus-visible .nti-h2-tile-icon { background: #FFFFFF; color: #0F366F; } .nti-h2-tile:hover .nti-h2-tile-icon svg, .nti-h2-tile:focus-visible .nti-h2-tile-icon svg { transform: translateY(3px) rotate(135deg); } /* ---- 29 product scenes: reuse the NTI Finish scene (.finish-scene: 100vh, content centred, ::before paints --scene-bg, ::after the top/bottom shade); each scene only supplies the mockup's own background ---- */ .e-con.finish-scene.nti-h2-scene-1 { --scene-bg: radial-gradient(at 87% 45%, #16435F 0, rgba(0, 0, 0, 0) 44%), linear-gradient(117deg, #07172F, #0B2544 73%, #0B2F4D); } .e-con.finish-scene.nti-h2-scene-2 { --scene-bg: radial-gradient(at 12% 38%, #CEE4EF 0, rgba(0, 0, 0, 0) 44%), linear-gradient(120deg, #EAF3F7, #F7FAFC 74%); } .e-con.finish-scene.nti-h2-scene-3 { --scene-bg: radial-gradient(at 77% 27%, rgba(23, 101, 117, .314) 0, rgba(0, 0, 0, 0) 46%), linear-gradient(120deg, #062039, #123D51 83%, #113F50); } .e-con.finish-scene.nti-h2-scene-4 { --scene-bg: radial-gradient(at 7% 56%, #D1DDF1 0, rgba(0, 0, 0, 0) 50%), linear-gradient(119deg, #EEF2FA, #F7F9FC 70%); } /* Scene product shots are transparent PNGs; the mockup lifts them with a soft shadow */ .nti-h2-scene-img img, .nti-h2-duo img { filter: drop-shadow(rgba(0, 0, 0, .34) 0 34px 60px); } /* Electrolyser scenes: bipolar plate (upper left) + porous transport layer (lower right, in front), as in the mockup */ .e-con.nti-h2-duo { position: relative; aspect-ratio: 1200 / 920; width: 100%; } .e-con.nti-h2-duo > .nti-h2-duo-a, .e-con.nti-h2-duo > .nti-h2-duo-b { position: absolute; margin: 0; } .e-con.nti-h2-duo > .nti-h2-duo-a { top: 0; left: 0; width: 72%; } .e-con.nti-h2-duo > .nti-h2-duo-b { right: 0; bottom: 0; width: 62%; z-index: 2; } /* ---- Product names in a scene (SydroGEM™ SydroDIAMOND® SydroSTAR™): fixed gap, wraps cleanly ---- */ .nti-h2-namegap { display: inline-block; width: 24px; } /* ---- Portfolio tabs: full-width tab bar, title + caption per tab, white shell (mockup .studio-shell). The caption and a separator are spans in the tab title; the separator only shows in the mobile sits inside the shell; base.css gives it padding 24px 0, so it touched the shell border. Indented with margin (not padding) so base.css's arrow, positioned against this box, stays in place; sides match the tab panels below it (48 tablet, 16 phone), whose top padding is 0 below 1025px */ @media (max-width: 1024px) { .nti-h2-port .e-n-tabs > .e-tabs-mobile-dropdown { margin-inline: 48px; margin-top: 8px; /* 32px clear of the shell's top edge (base.css padding 24 + 8), as the 30–33 product rail */ width: auto; } } @media (max-width: 767px) { .nti-h2-port .e-n-tabs > .e-tabs-mobile-dropdown { margin-inline: 16px; } } .nti-h2-cap { font-size: 14px; font-weight: 600; line-height: 1.2; color: #737373; } .nti-h2-port .e-n-tab-title[aria-selected="true"] .nti-h2-cap { color: #37C3EB; } /* ---- Image ratios from the mockup (image widgets have no aspect-ratio control) ---- */ .nti-h2-media img, .nti-h2-cutaway img, .nti-h2-step img, .nti-h2-wide img { display: block; width: 100%; height: auto; object-fit: cover; } .nti-h2-media img { aspect-ratio: 431 / 205; } .nti-h2-wide img { aspect-ratio: 16 / 9; } .nti-h2-cutaway img { aspect-ratio: 4 / 3; } .nti-h2-step img { aspect-ratio: 3 / 4; } /* ---- Proof figures: the unit after a number is smaller (100 nm, 5.5 million) ---- */ .nti-h2-unit { font-size: 24px; font-weight: 800; } /* ---- Film cover play button (the whole cover is a link that opens the video popup) ---- */ .nti-h2-play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); backdrop-filter: blur(4px); transition: transform .3s ease; } .nti-h2-play svg { margin-left: 4px; } .nti-h2-film:hover .nti-h2-play, .nti-h2-film:focus-visible .nti-h2-play { transform: scale(1.08); } /* ---- Video popup ("Inside Sydrogen"): a 1100px 16:9 player is taller than short screens, which pushed the box and its close button under the admin bar. The box is capped so header (96px) + video always fit with 60px clear, and the close button is centred in the dark header ---- */ /* Elementor sets the popup width on .dialog-message, so the cap goes there */ .elementor-popup-modal:has(.nti-h2-video-pop) .dialog-message { width: min(1100px, 92vw, calc((100dvh - 216px) * 16 / 9)) !important; } body.admin-bar .elementor-popup-modal:has(.nti-h2-video-pop) .dialog-message { width: min(1100px, 92vw, calc((100dvh - 248px) * 16 / 9)) !important; } /* Plain white X, centred in the dark header. Elementor's own popup CSS (#elementor-popup-modal-, id specificity) sets the button to display:flex and the icon colour, hence the !important */ .elementor-popup-modal:has(.nti-h2-video-pop) .dialog-close-button { top: 17px; right: 12px; width: 44px; height: 44px; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; color: #FFFFFF !important; transition: opacity .2s ease; } .elementor-popup-modal:has(.nti-h2-video-pop) .dialog-close-button svg { width: 22px; height: 22px; fill: #FFFFFF !important; } .elementor-popup-modal:has(.nti-h2-video-pop) .dialog-close-button:hover, .elementor-popup-modal:has(.nti-h2-video-pop) .dialog-close-button:focus-visible { opacity: .75; } .nti-h2-video-pop .elementor-widget-video { width: 100%; } @media (max-width: 767px) { /* long button labels can wrap on phones; the global 100% line height packs the lines too tightly */ .nti-h2-v2 .elementor-button .elementor-button-text { line-height: 1.25; } .nti-h2-unit { font-size: 20px; } .elementor-popup-modal:has(.nti-h2-video-pop) .dialog-message { width: 94vw !important; } .elementor-popup-modal:has(.nti-h2-video-pop) .dialog-close-button { top: 10px; right: 6px; width: 40px; height: 40px; } } /* ---- 30 PEM Fuel Cell Coatings (the template for 31-33) ---- Backgrounds Elementor's background control can't express (radial glows, 3-stop gradients) */ /* Finder band: the mockup's #studio, two soft glows over a dark 3-stop gradient; the finder plugin draws its own shell inside */ .e-con.nti-h2-studio { background-image: radial-gradient(circle at 78% 18%, rgba(57, 200, 238, .11), rgba(0, 0, 0, 0) 27%), radial-gradient(circle at 20% 88%, rgba(86, 103, 245, .08), rgba(0, 0, 0, 0) 30%), linear-gradient(132deg, #03111D, #08243A 58%, #0B3153 118%); } /* Navy band (related content): the same gradient as the product rail shell */ .e-con.nti-h2-navy { background-image: linear-gradient(135deg, #0A213A, #0D2A47 56%, #123553); } /* ---- Product rail: native nested tabs drawn as the mockup's .studio-shell (the Hard Coating rail, without a snippet). Tab colours, padding, row lines and the 300px rail width are widget settings; the shell and the caption line live here. The caption is a span in the tab title, as in the 28 portfolio tabs (.nti-h2-cap); below 1025px the base.css .mobile-dropdown sits inside the shell: indent it to the panel edges (margin, so base.css's arrow stays in place); 8px on top makes it 32px clear of the shell's top edge (base.css padding 24 alone looked tight) */ @media (max-width: 1024px) { .nti-h2-rail .e-n-tabs > .e-tabs-mobile-dropdown { margin: 8px 48px 0; width: auto; } } @media (max-width: 767px) { .nti-h2-rail .e-n-tabs > .e-tabs-mobile-dropdown { margin: 8px 16px 0; } } /* Validation side tabs (light LS pills): the chevron sits at the pill's right edge as in the 30 mockup (space-between); Elementor packs title + icon to the start, so the title text takes the free space */ .nti-h2-vtabs .e-n-tab-title .e-n-tab-title-text { flex-grow: 1; } /* ---- 30 image ratios and the FCVA film card (image widgets / containers have no aspect-ratio control) ---- */ .nti-h2-app img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 459 / 219; } /* ---- Validation panel: capability lists (mockup: 16px items, 8px apart, 20px indent) ---- */ .nti-h2-list ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px; } /* ---- 34 SydroPLATE: image ratios. 3:2 for the split and capacity images (mockup 700:467 / 660:440), 1:1 for the capability thumbnails, which sit on the mockup's light #F2F4F8 ---- */ .nti-h2-32 img, .nti-h2-sq img { display: block; width: 100%; height: auto; object-fit: cover; } .nti-h2-32 img { aspect-ratio: 3 / 2; } .nti-h2-sq img { aspect-ratio: 1 / 1; background: #F2F4F8; } /* ---- 34 manufacturing models band (#scope): the mockup's deep 3-stop gradient ---- */ .e-con.nti-h2-deep { background-image: linear-gradient(135deg, #06111D, #0A2238 68%, #0B3150); } /* ---- Horizontal tabs in a shell (34 journey: navy shell; 34 models: dark glass shell). Native nested tabs; titles, colours and dividers are widget settings, the shell, equal columns and the caption line live here (as the rail) ---- */ .nti-h2-htabs > .e-n-tabs { border-radius: 12px; overflow: hidden; } .nti-h2-navyshell > .e-n-tabs { border: 1px solid rgba(224, 233, 247, .98); background-image: linear-gradient(135deg, #0A213A, #0D2A47 56%, #123553); box-shadow: 0 28px 90px rgba(30, 46, 76, .14); } .nti-h2-glassdark > .e-n-tabs { border: 1px solid rgba(255, 255, 255, .18); background-color: rgba(255, 255, 255, .06); box-shadow: 0 28px 90px rgba(4, 16, 30, .25); } @media (min-width: 1025px) { .nti-h2-htabs > .e-n-tabs > .e-n-tabs-heading { border-bottom: 1px solid rgba(255, 255, 255, .15); } /* (0,4,0): equal columns, whatever the label length */ .nti-h2-htabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title { flex: 1 1 0; } } .nti-h2-htabs .e-n-tab-title .e-n-tab-title-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start; } .nti-h2-htabs .nti-h2-cap { font-size: 14px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, .35); } .nti-h2-htabs .e-n-tab-title[aria-selected="true"] .nti-h2-cap { color: #37C3EB; } /* the mobile s sit inside the shell: same inset as the 30–34 rails (32px clear of the edge above) */ @media (max-width: 1024px) { .nti-h2-shell > .e-n-tabs > .e-tabs-mobile-dropdown, .nti-h2-models > .e-n-tabs > .e-tabs-mobile-dropdown { margin: 8px 48px 0; width: auto; } } @media (max-width: 767px) { .nti-h2-shell > .e-n-tabs > .e-tabs-mobile-dropdown, .nti-h2-models > .e-n-tabs > .e-tabs-mobile-dropdown { margin: 8px 16px 0; } } /* ---- 35 product-line images are product cut-outs (model artwork, ~300–850px), not scenes: show the whole unit on a white panel inside the same 16:9 frame instead of cover-cropping (and enlarging) it on the dark shell ---- */ .nti-h2-product img { object-fit: contain; background: #FFFFFF; padding: 24px; box-sizing: border-box; border-radius: 12px; } /* ---- QA v22 (2026-10-13): tab bars ---- */ /* Desktop: a 1px divider between tabs, none after the last (28 mockup: #D8D8D8 border-right). 35's dark line tabs get the same divider in the dark-shell colour, as 34's horizontal tabs */ @media (min-width: 1025px) { .nti-h2-port > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:not(:last-child) { border-right: 1px solid #D8D8D8 !important; /* Elementor's per-state tab borders (aria-selected=false) outrank a plain rule */ } .nti-h2-shell > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .12) !important; } } /* Tablet / phone: the tab