.elementor-kit-5{--e-global-color-primary:#05070A;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#2C3138;--e-global-color-accent:#17DBE6;--e-global-color-e348e25:#E7ECF1;--e-global-color-fcbdaf9:#B7C6D6;--e-global-color-0196178:#114151;--e-global-color-39a7911:#0E1F33;--e-global-color-fffbb8c:#0B1522;--e-global-typography-primary-font-family:"Noto Sans";--e-global-typography-primary-font-size:22px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Bebas Neue";--e-global-typography-secondary-font-size:31px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Noto Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Noeris Mainfont";--e-global-typography-accent-font-size:22px;--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-primary );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================= NOERIS BLACK GLASS + CHROME BUTTON --------------------------------------------------------- Elementor Button widget CSS class: nrs-btn ========================================================= */ /* ---------- NOERIS COLOURS ---------- */ :root { --nrs-chrome-white: #ffffff; --nrs-chrome-silver: #b9cbd8; --nrs-chrome-dark: #05070A; --nrs-glow-cyan: #5ce6ff; --nrs-glow-blue: #617dff; --nrs-glow-violet: #b26fff; --nrs-glow-pink: #ff70cf; --nrs-glow-gold: #ffbd76; } /* ========================================================= MAIN BUTTON ========================================================= */ body .elementor-widget-button.nrs-btn .elementor-button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.65em; min-height: 50px; padding: 14px 29px; box-sizing: border-box; border: 2px solid transparent !important; border-radius: 999px !important; color: #f8fcff !important; /* First gradient: black glass interior Second gradient: iridescent chrome border */ background: linear-gradient( 180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.035) 18%, rgba(8, 12, 19, 0.90) 44%, rgba(0, 2, 6, 0.97) 100% ) padding-box, linear-gradient( 115deg, var(--nrs-chrome-dark) 0%, var(--nrs-chrome-white) 8%, var(--nrs-glow-cyan) 17%, var(--nrs-chrome-silver) 25%, #ffffff 34%, var(--nrs-glow-violet) 45%, var(--nrs-glow-pink) 55%, var(--nrs-glow-gold) 64%, #ffffff 73%, var(--nrs-chrome-dark) 83%, var(--nrs-glow-cyan) 93%, #ffffff 100% ) border-box !important; background-size: 100% 100%, 240% 240% !important; background-position: center, 0% 50% !important; -webkit-backdrop-filter: blur(14px) saturate(145%); backdrop-filter: blur(14px) saturate(145%); box-shadow: /* Inner glass reflections */ inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 12px 18px rgba(255, 255, 255, 0.025), inset 0 -12px 18px rgba(0, 0, 0, 0.82), /* Chrome edge definition */ 0 0 0 1px rgba(255, 255, 255, 0.09), /* Exterior glow */ 0 0 8px rgba(92, 230, 255, 0.28), 0 0 20px rgba(97, 125, 255, 0.14), 0 0 30px rgba(178, 111, 255, 0.08), /* Depth shadow */ 0 10px 25px rgba(0, 0, 0, 0.55) !important; font-family: inherit; font-size: 14px; font-weight: 650; line-height: 1; letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(193, 236, 255, 0.22); cursor: pointer; transform: translateY(0) scale(1) translateZ(0); transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 380ms ease, background-position 850ms cubic-bezier(0.2, 0.8, 0.2, 1), color 250ms ease; } /* ========================================================= GLASS REFLECTION INSIDE THE BUTTON ========================================================= */ body .elementor-widget-button.nrs-btn .elementor-button::after { content: ""; position: absolute; z-index: 1; pointer-events: none; inset: 2px; border: 1px solid rgba(255, 255, 255, 0.045); border-radius: inherit; background: radial-gradient( ellipse at 50% -20%, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.055) 30%, transparent 64% ); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10), inset 0 -1px 1px rgba(0, 0, 0, 0.60); opacity: 0.85; transition: opacity 350ms ease, background 350ms ease; } /* ========================================================= LIGHT SWEEP ACROSS THE BLACK GLASS ========================================================= */ body .elementor-widget-button.nrs-btn .elementor-button::before { content: ""; position: absolute; z-index: 2; pointer-events: none; top: -70%; bottom: -70%; left: -40%; width: 25%; background: linear-gradient( 90deg, transparent 0%, rgba(92, 230, 255, 0.05) 20%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 112, 207, 0.10) 70%, transparent 100% ); filter: blur(1px); opacity: 0; transform: skewX(-19deg) translateX(-150%); transition: transform 850ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease; } /* ---------- KEEP TEXT AND ICON ABOVE THE EFFECTS ---------- */ body .elementor-widget-button.nrs-btn .elementor-button-content-wrapper, body .elementor-widget-button.nrs-btn .elementor-button-text, body .elementor-widget-button.nrs-btn .elementor-button-icon { position: relative; z-index: 4; color: inherit !important; } /* ========================================================= HOVER AND KEYBOARD FOCUS ========================================================= */ body .elementor-widget-button.nrs-btn .elementor-button:hover, body .elementor-widget-button.nrs-btn .elementor-button:focus-visible { color: #ffffff !important; background-position: center, 100% 50% !important; box-shadow: /* Stronger glass reflections */ inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 14px 20px rgba(255, 255, 255, 0.04), inset 0 -12px 18px rgba(0, 0, 0, 0.88), /* Bright chrome definition */ 0 0 0 1px rgba(255, 255, 255, 0.16), /* Chrome glow */ 0 0 10px rgba(255, 255, 255, 0.18), 0 0 18px rgba(92, 230, 255, 0.42), 0 0 34px rgba(97, 125, 255, 0.24), 0 0 48px rgba(178, 111, 255, 0.15), /* Lifted shadow */ 0 14px 30px rgba(0, 0, 0, 0.64) !important; transform: translateY(-2px) scale(1.018) translateZ(0); } /* ---------- ACTIVATE LIGHT SWEEP ---------- */ body .elementor-widget-button.nrs-btn .elementor-button:hover::before, body .elementor-widget-button.nrs-btn .elementor-button:focus-visible::before { opacity: 0.80; transform: skewX(-19deg) translateX(600%); } /* ---------- BRIGHTEN GLASS REFLECTION ---------- */ body .elementor-widget-button.nrs-btn .elementor-button:hover::after, body .elementor-widget-button.nrs-btn .elementor-button:focus-visible::after { opacity: 1; background: radial-gradient( ellipse at 50% -20%, rgba(255, 255, 255, 0.22) 0%, rgba(110, 234, 255, 0.07) 32%, transparent 66% ); } /* ---------- ACCESSIBLE FOCUS OUTLINE ---------- */ body .elementor-widget-button.nrs-btn .elementor-button:focus-visible { outline: 2px solid rgba(110, 234, 255, 0.95); outline-offset: 5px; } /* ========================================================= CLICK / PRESS ========================================================= */ body .elementor-widget-button.nrs-btn .elementor-button:active { transform: translateY(1px) scale(0.985) translateZ(0); box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 8px rgba(92, 230, 255, 0.22), 0 5px 12px rgba(0, 0, 0, 0.55) !important; } /* ========================================================= ICON MOVEMENT ========================================================= */ body .elementor-widget-button.nrs-btn .elementor-button-icon { transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1); } body .elementor-widget-button.nrs-btn .elementor-button:hover .elementor-button-icon, body .elementor-widget-button.nrs-btn .elementor-button:focus-visible .elementor-button-icon { transform: translateX(3px); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { body .elementor-widget-button.nrs-btn .elementor-button { min-height: 46px; padding: 12px 22px; font-size: 13px; letter-spacing: 0.09em; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { body .elementor-widget-button.nrs-btn .elementor-button, body .elementor-widget-button.nrs-btn .elementor-button::before, body .elementor-widget-button.nrs-btn .elementor-button::after, body .elementor-widget-button.nrs-btn .elementor-button-icon { transition-duration: 1ms; } body .elementor-widget-button.nrs-btn .elementor-button::before { display: none; } } /* ========================================================= NOERIS LANDING-PAGE SECTION SYSTEM — UPDATED --------------------------------------------------------- Full black-glass panel: nrs-section-panel Chrome Elementor divider: nrs-divider-top Container rails: nrs-container-rail-left nrs-container-rail-right Both container rails: nrs-container-rail-left nrs-container-rail-right ========================================================= */ /* ========================================================= COLOURS ========================================================= */ :root { --nrs-section-white: #ffffff; --nrs-section-silver: #b9cbd8; --nrs-section-dark-silver: #43515e; --nrs-section-cyan: #5ce6ff; --nrs-section-blue: #617dff; --nrs-section-violet: #b26fff; --nrs-section-pink: #ff70cf; --nrs-section-gold: #ffbd76; } /* ========================================================= FULL BLACK-GLASS SECTION PANEL Class: nrs-section-panel ========================================================= */ body .nrs-section-panel { position: relative; isolation: isolate; border: 1.5px solid transparent !important; border-radius: 32px !important; /* First layer: atmospheric cyan light Second layer: black glass Third layer: iridescent chrome border */ background: radial-gradient( circle at 15% 0%, rgba(92, 230, 255, 0.065) 0%, rgba(97, 125, 255, 0.025) 24%, transparent 42% ) padding-box, linear-gradient( 180deg, rgba(255, 255, 255, 0.055) 0%, rgba(10, 15, 23, 0.91) 18%, rgba(2, 5, 10, 0.96) 62%, rgba(0, 2, 6, 0.98) 100% ) padding-box, linear-gradient( 115deg, var(--nrs-section-dark-silver) 0%, var(--nrs-section-white) 8%, var(--nrs-section-cyan) 17%, var(--nrs-section-silver) 26%, #ffffff 35%, var(--nrs-section-violet) 46%, var(--nrs-section-pink) 56%, var(--nrs-section-gold) 65%, #ffffff 74%, var(--nrs-section-dark-silver) 84%, var(--nrs-section-cyan) 94%, #ffffff 100% ) border-box !important; background-size: 100% 100%, 100% 100%, 220% 220% !important; background-position: center, center, 12% 50% !important; -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 18px 35px rgba(255, 255, 255, 0.018), inset 0 -24px 40px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.045), 0 0 8px rgba(92, 230, 255, 0.14), 0 0 22px rgba(97, 125, 255, 0.07), 0 0 34px rgba(178, 111, 255, 0.045), 0 24px 55px rgba(0, 0, 0, 0.42) !important; transition: box-shadow 450ms ease, background-position 900ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* ---------- PANEL HOVER ---------- */ body .nrs-section-panel:hover { background-position: center, center, 82% 50% !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 18px 35px rgba(255, 255, 255, 0.022), inset 0 -24px 40px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 10px rgba(92, 230, 255, 0.18), 0 0 27px rgba(97, 125, 255, 0.09), 0 0 42px rgba(178, 111, 255, 0.055), 0 26px 60px rgba(0, 0, 0, 0.46) !important; } /* ========================================================= MULTICOLOURED CHROME DIVIDER Apply to a normal Elementor Divider widget: nrs-divider-top ========================================================= */ /* ---------- DIVIDER WIDGET ALIGNMENT ---------- */ body .elementor-widget-divider.nrs-divider-top .elementor-divider { display: flex; align-items: center; justify-content: center; padding: 18px 0 !important; } /* ---------- REPLACE THE ORIGINAL DIVIDER LINE ---------- */ body .elementor-widget-divider.nrs-divider-top .elementor-divider-separator { display: block !important; width: min(92%, 1240px) !important; height: 2px !important; margin: 0 auto !important; border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; border-style: none !important; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.10) 5%, var(--nrs-section-dark-silver) 10%, #ffffff 17%, var(--nrs-section-cyan) 26%, var(--nrs-section-silver) 35%, #ffffff 44%, var(--nrs-section-violet) 55%, var(--nrs-section-pink) 65%, var(--nrs-section-gold) 75%, #ffffff 84%, var(--nrs-section-dark-silver) 91%, rgba(255, 255, 255, 0.10) 96%, transparent 100% ) !important; box-shadow: 0 0 4px rgba(255, 255, 255, 0.30), 0 0 9px rgba(92, 230, 255, 0.30), 0 0 18px rgba(97, 125, 255, 0.16), 0 0 28px rgba(178, 111, 255, 0.09) !important; } /* ========================================================= DIVIDER FALLBACK This also allows nrs-divider-top to be added directly to an Elementor container instead of a Divider widget. ========================================================= */ body .nrs-divider-top:not(.elementor-widget-divider) { position: relative; isolation: isolate; } body .nrs-divider-top:not(.elementor-widget-divider)::before { content: ""; position: absolute; z-index: 5; pointer-events: none; top: 0; left: 50%; width: min(92%, 1240px); height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.10) 5%, var(--nrs-section-dark-silver) 10%, #ffffff 17%, var(--nrs-section-cyan) 26%, var(--nrs-section-silver) 35%, #ffffff 44%, var(--nrs-section-violet) 55%, var(--nrs-section-pink) 65%, var(--nrs-section-gold) 75%, #ffffff 84%, var(--nrs-section-dark-silver) 91%, rgba(255, 255, 255, 0.10) 96%, transparent 100% ); box-shadow: 0 0 4px rgba(255, 255, 255, 0.30), 0 0 9px rgba(92, 230, 255, 0.30), 0 0 18px rgba(97, 125, 255, 0.16), 0 0 28px rgba(178, 111, 255, 0.09); transform: translateX(-50%); } /* ========================================================= LEFT CONTAINER RAIL Apply directly to an Elementor container: nrs-container-rail-left ========================================================= */ body .nrs-container-rail-left { position: relative; isolation: isolate; } body .nrs-container-rail-left::before { content: ""; position: absolute; z-index: 5; pointer-events: none; top: 0; bottom: 0; left: 0; width: 3px; border-radius: 999px; background: linear-gradient( 180deg, var(--nrs-section-dark-silver) 0%, #ffffff 7%, var(--nrs-section-cyan) 17%, var(--nrs-section-silver) 28%, #ffffff 39%, var(--nrs-section-violet) 52%, var(--nrs-section-pink) 64%, var(--nrs-section-gold) 75%, #ffffff 87%, var(--nrs-section-cyan) 94%, var(--nrs-section-dark-silver) 100% ); box-shadow: 0 0 4px rgba(255, 255, 255, 0.25), 0 0 9px rgba(92, 230, 255, 0.32), 0 0 18px rgba(97, 125, 255, 0.16), 0 0 28px rgba(178, 111, 255, 0.09); } /* ========================================================= RIGHT CONTAINER RAIL Apply directly to an Elementor container: nrs-container-rail-right ========================================================= */ body .nrs-container-rail-right { position: relative; isolation: isolate; } body .nrs-container-rail-right::after { content: ""; position: absolute; z-index: 5; pointer-events: none; top: 0; right: 0; bottom: 0; width: 3px; border-radius: 999px; background: linear-gradient( 180deg, var(--nrs-section-dark-silver) 0%, #ffffff 7%, var(--nrs-section-cyan) 17%, var(--nrs-section-silver) 28%, #ffffff 39%, var(--nrs-section-violet) 52%, var(--nrs-section-pink) 64%, var(--nrs-section-gold) 75%, #ffffff 87%, var(--nrs-section-cyan) 94%, var(--nrs-section-dark-silver) 100% ); box-shadow: 0 0 4px rgba(255, 255, 255, 0.25), 0 0 9px rgba(92, 230, 255, 0.32), 0 0 18px rgba(97, 125, 255, 0.16), 0 0 28px rgba(178, 111, 255, 0.09); } /* ========================================================= OPTIONAL SECTION LABEL Apply to a Heading: nrs-section-label ========================================================= */ body .nrs-section-label { display: inline-flex; align-items: center; gap: 0.65em; width: fit-content; color: #f7fbff; font-size: 12px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 0 8px rgba(92, 230, 255, 0.20); } body .nrs-section-label::before { content: ""; display: block; width: 28px; height: 1.5px; background: linear-gradient( 90deg, var(--nrs-section-cyan), #ffffff, var(--nrs-section-violet) ); box-shadow: 0 0 7px rgba(92, 230, 255, 0.34); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* ---------- PANEL ---------- */ body .nrs-section-panel { border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -18px 30px rgba(0, 0, 0, 0.44), 0 0 7px rgba(92, 230, 255, 0.12), 0 0 18px rgba(97, 125, 255, 0.055), 0 18px 36px rgba(0, 0, 0, 0.38) !important; } /* ---------- DIVIDER ---------- */ body .elementor-widget-divider.nrs-divider-top .elementor-divider-separator { width: 90% !important; } body .nrs-divider-top:not(.elementor-widget-divider)::before { width: 90%; } /* ---------- KEEP RAILS VERTICAL ---------- */ body .nrs-container-rail-left::before, body .nrs-container-rail-right::after { top: 8px; bottom: 8px; width: 2px; box-shadow: 0 0 4px rgba(255, 255, 255, 0.18), 0 0 8px rgba(92, 230, 255, 0.24), 0 0 16px rgba(178, 111, 255, 0.07); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { body .nrs-section-panel { transition-duration: 1ms; } } /* * NOERIS — hero logo and heading effects * * Elementor classes: * Inner container around logo + reflection + subtitle: nrs-logo-stage * Main logo Image widget: nrs-logo-main * Existing reflected Image widget: nrs-logo-reflection * "CREATIVE STUDIO" Heading widget: nrs-logo-subtitle * Main section Heading widgets: nrs-heading-chrome * Small technical Heading/Text widgets: nrs-heading-tech * * Add the class names in Advanced > CSS Classes, without the leading dot. * Paste this complete stylesheet into Elementor Site Settings > Custom CSS * or WordPress Appearance > Customize > Additional CSS. */ :root { --nrs-logo-mask: url("https://noeris.studio/wp-content/uploads/2026/07/iridescent-chrome-NOERIS-logo-text-scaled-e1785166147830.png"); --nrs-ice: #eaf8ff; --nrs-cyan: #8de8ff; --nrs-blue: #8da8ff; --nrs-violet: #c18cff; --nrs-pink: #ff9ed8; --nrs-gold: #ffd49a; --nrs-reflection-opacity: 0.27; --nrs-scan-strength: 0.58; --nrs-scan-mid: 0.22; } /* ========================================================================== HERO LOGO COMPOSITION ========================================================================== */ .nrs-logo-stage { position: relative; isolation: isolate; overflow: visible; transform-origin: 50% 45%; animation: nrs-logo-arrive 1100ms cubic-bezier(.16, 1, .3, 1) both; } /* Static atmospheric light behind the complete lockup. */ .nrs-logo-stage::before { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 43%; left: 50%; width: min(78vw, 1100px); aspect-ratio: 4 / 1; transform: translate(-50%, -50%); background: radial-gradient( ellipse at center, rgba(141, 232, 255, 0.10) 0%, rgba(193, 140, 255, 0.065) 34%, rgba(255, 158, 216, 0.025) 56%, transparent 74% ); filter: blur(24px); } .nrs-logo-main { position: relative; z-index: 3; isolation: isolate; } .nrs-logo-main img { position: relative; z-index: 1; display: block; filter: drop-shadow(0 0 3px rgba(234, 248, 255, 0.24)) drop-shadow(0 0 14px rgba(141, 232, 255, 0.10)) drop-shadow(0 0 24px rgba(193, 140, 255, 0.055)); } /* * The moving light is masked by the transparent PNG, so the highlight appears * on the NOERIS letters rather than across the image's rectangular widget. */ .nrs-logo-main::after { content: ""; position: absolute; z-index: 2; pointer-events: none; inset: 0; background-image: linear-gradient( 108deg, transparent 39%, rgba(141, 232, 255, 0.14) 44%, rgba(255, 255, 255, 0.88) 49%, rgba(193, 140, 255, 0.48) 52%, rgba(255, 158, 216, 0.16) 56%, transparent 62% ); background-repeat: no-repeat; background-size: 260% 100%; background-position: 180% 50%; -webkit-mask-image: var(--nrs-logo-mask); mask-image: var(--nrs-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; mask-mode: alpha; mix-blend-mode: screen; opacity: 0; animation: nrs-logo-light-scan 9s ease-in-out infinite; } /* ========================================================================== EXISTING REFLECTED IMAGE ========================================================================== */ .nrs-logo-reflection { position: relative; z-index: 1; opacity: var(--nrs-reflection-opacity); isolation: isolate; transform: none !important; /* * The fade lives on the widget wrapper rather than on the flipped image. * It therefore follows the visible, on-screen direction: strongest beside * the source logo, then progressively softer farther down. */ -webkit-mask-image: linear-gradient( to bottom, #000000 0%, rgba(0, 0, 0, 0.96) 10%, rgba(0, 0, 0, 0.78) 30%, rgba(0, 0, 0, 0.48) 52%, rgba(0, 0, 0, 0.18) 74%, transparent 94% ); mask-image: linear-gradient( to bottom, #000000 0%, rgba(0, 0, 0, 0.96) 10%, rgba(0, 0, 0, 0.78) 30%, rgba(0, 0, 0, 0.48) 52%, rgba(0, 0, 0, 0.18) 74%, transparent 94% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .nrs-logo-reflection img { /* * The reflected flip is applied to the image itself, leaving the outer * widget in normal screen coordinates so its fade always runs downward. */ transform: scaleY(-1) !important; transform-origin: center !important; filter: saturate(0.78) blur(0.55px) !important; opacity: 1 !important; } /* * A second, vertically reflected light scan is masked to the transparent logo * pixels. It uses the same timing and horizontal position as the source logo. */ .nrs-logo-reflection::after { content: ""; position: absolute; z-index: 2; pointer-events: none; inset: 0; background-image: linear-gradient( 108deg, transparent 39%, rgba(141, 232, 255, 0.14) 44%, rgba(255, 255, 255, 0.88) 49%, rgba(193, 140, 255, 0.48) 52%, rgba(255, 158, 216, 0.16) 56%, transparent 62% ); background-repeat: no-repeat; background-size: 260% 100%; background-position: 180% 50%; -webkit-mask-image: var(--nrs-logo-mask); mask-image: var(--nrs-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; mask-mode: alpha; transform: scaleY(-1); transform-origin: center; mix-blend-mode: screen; opacity: 0; animation: nrs-logo-light-scan 9s ease-in-out infinite; } /* ========================================================================== HERO SUBTITLE ========================================================================== */ .nrs-logo-subtitle { position: relative; z-index: 4; } .nrs-logo-subtitle .elementor-heading-title { color: var(--nrs-ice); background: linear-gradient( 180deg, #ffffff 0%, #dce9f7 28%, #8793a4 48%, #f7fbff 70%, #9ca8b8 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(141, 232, 255, 0.16), 0 0 22px rgba(141, 168, 255, 0.08); } /* ========================================================================== MAIN SECTION HEADINGS — ADD nrs-heading-chrome TO A HEADING WIDGET ========================================================================== */ .nrs-heading-chrome .elementor-heading-title { color: var(--nrs-ice); background: linear-gradient( 104deg, #ffffff 0%, #929dac 14%, #eafcff 27%, #8de8ff 37%, #c18cff 49%, #ff9ed8 60%, #ffd49a 72%, #b6f2ff 84%, #ffffff 100% ); background-size: 220% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(141, 232, 255, 0.12)) drop-shadow(0 0 18px rgba(193, 140, 255, 0.06)); transition: background-position 900ms cubic-bezier(.16, 1, .3, 1), filter 450ms ease, letter-spacing 450ms cubic-bezier(.16, 1, .3, 1); } @media (hover: hover) { .nrs-heading-chrome:hover .elementor-heading-title { background-position: 100% 50%; letter-spacing: 0.025em; filter: drop-shadow(0 0 10px rgba(141, 232, 255, 0.20)) drop-shadow(0 0 24px rgba(193, 140, 255, 0.11)); } } /* ========================================================================== SMALL TECHNICAL LABELS — ADD nrs-heading-tech TO A HEADING/TEXT WIDGET ========================================================================== */ .nrs-heading-tech .elementor-heading-title, .nrs-heading-tech p { color: #f4f7ff; text-transform: uppercase; letter-spacing: 0.14em; text-shadow: 0.7px 0 rgba(141, 232, 255, 0.50), -0.7px 0 rgba(255, 158, 216, 0.32), 0 0 12px rgba(141, 232, 255, 0.10); transition: letter-spacing 450ms cubic-bezier(.16, 1, .3, 1), text-shadow 450ms ease; } @media (hover: hover) { .nrs-heading-tech:hover .elementor-heading-title, .nrs-heading-tech:hover p { letter-spacing: 0.18em; text-shadow: 1px 0 rgba(141, 232, 255, 0.66), -1px 0 rgba(255, 158, 216, 0.45), 0 0 16px rgba(141, 232, 255, 0.16); } } /* ========================================================================== ANIMATION ========================================================================== */ @keyframes nrs-logo-arrive { from { opacity: 0; transform: translateY(10px) scale(0.992); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes nrs-logo-light-scan { 0%, 58% { opacity: 0; background-position: 180% 50%; } 64% { opacity: var(--nrs-scan-mid); } 77% { opacity: var(--nrs-scan-strength); background-position: -80% 50%; } 83%, 100% { opacity: 0; background-position: -80% 50%; } } /* ========================================================================== MOBILE + ACCESSIBILITY ========================================================================== */ @media (max-width: 767px) { :root { --nrs-reflection-opacity: 0.22; --nrs-scan-strength: 0.46; --nrs-scan-mid: 0.18; } .nrs-logo-stage::before { width: 96vw; filter: blur(18px); } .nrs-heading-tech .elementor-heading-title, .nrs-heading-tech p { letter-spacing: 0.10em; } } @media (prefers-reduced-motion: reduce) { .nrs-logo-stage, .nrs-logo-main::after, .nrs-logo-reflection::after { animation: none !important; } .nrs-logo-main::after, .nrs-logo-reflection::after { display: none; } .nrs-heading-chrome .elementor-heading-title, .nrs-heading-tech .elementor-heading-title, .nrs-heading-tech p { transition: none !important; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Noeris Mainfont'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://noeris.studio/wp-content/uploads/2026/07/Noerismainfont-Regular.ttf') format('truetype'); } /* End Custom Fonts CSS */