/* Theme Name: Nutech Group Theme URI: https://nutech-group.com/ Author: Nutech Group Author URI: https://nutech-group.com/ Description: Cinematic corporate theme for Nutech Group — technology, energy, mobility and intelligence. Ported from the approved designs: homepage and Vendors & Products, with further page templates added incrementally. Version: 0.3.1 Requires at least: 6.2 Tested up to: 6.6 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: nutech Tags: business, corporate, technology, one-column, custom-logo, custom-menu, featured-images, translation-ready, theme-options */ /* ============================================================ The design is inline-styled section by section, so this file carries only what an inline style attribute cannot express: document resets, link and focus states, and the keyframes the inline animations reference. Taken verbatim from the design. ============================================================ */ /* ---------------------------------------------------------------- Poppins, site-wide. The designs name three families inline on hundreds of elements, so remapping them here is the only single-point change. The mono family stays mono — Poppins has no monospace cut, and the technical labels depend on even character widths. ---------------------------------------------------------------- */ [style*="Space Grotesk"], [style*="IBM Plex Sans"], [style*="Sora"], body, button, input, select, textarea { font-family: 'Poppins', system-ui, sans-serif !important; } [style*="IBM Plex Mono"], [style*="JetBrains Mono"] { font-family: 'JetBrains Mono', ui-monospace, monospace !important; } /* ---------------------------------------------------------------- Page gutters, site-wide. Every ported section sets its horizontal padding inline as clamp(18px,4.5vw,40px). Overriding the two longhands widens the gutter without disturbing the vertical padding in the same shorthand. Raise the last value to go wider still. ---------------------------------------------------------------- */ [style*="clamp(18px,4.5vw,40px)"], [data-ref="heroInner"], [data-ref="heroInner"] { padding-left: clamp(24px, 6vw, 96px) !important; padding-right: clamp(24px, 6vw, 96px) !important; } /* Poppins sets wider than Space Grotesk, so the display tracking the designs use reads as too tight. Relaxing it keeps the headlines from looking cramped. */ h1, h2, h3 { letter-spacing: -0.015em !important; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: #05070B; } body { -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } /* ------------------------------------------------------------ Full bleed. The design is edge to edge, so neutralise any wrapper a plugin, child theme or migrated layout puts between and the sections — those wrappers are what pull the page into a narrow white column. ------------------------------------------------------------ */ body > #page, body > .site, body > .site-content, body > .wrapper, body > .container, body > main, #page, .site, .site-content, .site-main, .content-area, .wp-site-blocks, .entry-content, .page-content { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* The navigation is fixed, so it must clear the admin bar. */ body.admin-bar .nu-header, body.admin-bar header[data-ref="navRef"] { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .nu-header, body.admin-bar header[data-ref="navRef"] { top: 46px; } } /* ---------------------------------------------------------------- Hover states written as an attribute rather than a class. Some ported sections carry data-nu-hover="nu-hv-N" instead of class="nu-hv-N", which no .nu-hv-N rule can ever match. Mirroring the rules onto the attribute fixes those without editing markup. ---------------------------------------------------------------- */ [data-nu-hover="nu-hv-1"]:hover { background:#fff !important; } [data-nu-hover="nu-hv-2"]:hover { border-color:rgba(255,255,255,.5) !important; background:rgba(255,255,255,.05) !important; } [data-nu-hover="nu-hv-3"]:hover { border-color:rgba(150,195,255,.7) !important; background:rgba(255,255,255,.04) !important; } [data-nu-hover="nu-hv-4"]:hover { background:rgba(255,255,255,.06) !important; } [data-nu-hover="nu-hv-5"]:hover { background:#0C121B !important; } [data-nu-hover="nu-hv-6"]:hover { color:#3B6FC0 !important; border-color:#3B6FC0 !important; } [data-nu-hover="nu-hv-7"]:hover { background:rgba(255,255,255,.07) !important; } [data-nu-hover="nu-hv-8"]:hover { background:#0D131C !important; } [data-nu-hover="nu-hv-9"]:hover { background:#0B1017 !important; } [data-nu-hover="nu-hv-10"]:hover { border-color:rgba(143,187,255,.7) !important; background:rgba(255,255,255,.05) !important; } [data-nu-hover="nu-hv-11"]:hover { background:rgba(14,22,34,.85) !important; } [data-nu-hover="nu-hv-12"]:hover { background:#EDF1F7 !important; } [data-nu-hover="nu-hv-13"]:hover { border-color:rgba(255,255,255,.45) !important; } [data-nu-hover="nu-hv-14"]:hover { background:rgba(14,22,34,.9) !important; } [data-nu-hover="nu-hv-15"]:hover { border-color:rgba(150,195,255,.8) !important; background:rgba(40,85,170,.35) !important; color:#fff !important; } [data-nu-hover^="nu-hv-"] { transition: background 320ms, border-color 320ms, color 320ms, box-shadow 320ms; } /* Nothing in the design may push a horizontal scrollbar. */ canvas { display: block; } img, svg, video, canvas { max-width: 100%; } a { color: #6FA8FF; text-decoration: none; } a:hover { color: #B9D4FF; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 1px solid #8FBBFF; outline-offset: 3px; } ::selection { background: #1B4FA8; color: #fff; } textarea, input, select, button { font-family: inherit; } .nu-skip { position: absolute; left: -9999px; } .nu-skip:focus { position: fixed; left: 20px; top: 20px; z-index: 999; background: #fff; color: #05070B; padding: 12px 18px; } /* WordPress core output that can appear inside ported sections */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .alignwide { max-width: 1600px; margin-left: auto; margin-right: auto; } .wp-caption-text { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #66798F; } /* ---------- hover states, verbatim from the design ---------- */ .nu-hv-1:hover { background:#fff !important; } .nu-hv-2:hover { border-color:rgba(255,255,255,.5) !important; background:rgba(255,255,255,.05) !important; } .nu-hv-3:hover { border-color:rgba(150,195,255,.7) !important; background:rgba(255,255,255,.04) !important; } .nu-hv-4:hover { background:rgba(255,255,255,.06) !important; } .nu-hv-5:hover { background:#0C121B !important; } .nu-hv-6:hover { color:#3B6FC0 !important; border-color:#3B6FC0 !important; } .nu-hv-7:hover { background:rgba(255,255,255,.07) !important; } .nu-hv-8:hover { background:#0D131C !important; } .nu-hv-9:hover { background:#0B1017 !important; } .nu-hv-10:hover { border-color:rgba(143,187,255,.7) !important; background:rgba(255,255,255,.05) !important; } .nu-hv-11:hover { background:rgba(14,22,34,.85) !important; } .nu-hv-12:hover { background:#EDF1F7 !important; } .nu-hv-13:hover { border-color:rgba(255,255,255,.45) !important; } .nu-hv-14:hover { background:rgba(14,22,34,.9) !important; } .nu-hv-15:hover { border-color:rgba(150,195,255,.8) !important; background:rgba(40,85,170,.35) !important; color:#fff !important; } /* Group Companies mega menu — card hover. Keyed on the attribute rather than the generated nu-hv-* number, so a renumbered export cannot silently drop the state. */ a[data-hover="onCompanyHover"] { transition: background 320ms, box-shadow 320ms; } a[data-hover="onCompanyHover"]:hover { background: #0E141D !important; box-shadow: inset 0 0 0 1px rgba(143,187,255,.28) !important; } a[data-hover="onCompanyHover"] > div:nth-child(2) { transition: color 320ms; } a[data-hover="onCompanyHover"]:hover > div:nth-child(2) { color: #FFFFFF !important; } /* ---------------------------------------------------------------- Industries rail. Pinned for the height of the panel column. Requires the page wrapper to use overflow-x:clip, not hidden — hidden makes it a scroll container and cancels sticky entirely. ---------------------------------------------------------------- */ #industries [style*="position:sticky"] { top: 104px; align-self: start; z-index: 2; } body.admin-bar #industries [style*="position:sticky"] { top: 136px; } @media (max-width: 900px) { #industries [style*="position:sticky"] { position: static; } } /* Three families, always balanced: 3-up while there is room, 1-up when there is not. auto-fit with a 300px floor drops to 2+1 as soon as the container falls under ~940px, which leaves an orphan card; explicit tracks avoid that. minmax(0,1fr) lets tracks shrink below their content rather than overflowing. */ .nu-fam-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1000px) { .nu-fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .nu-fam-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- Solutions — families and the core sticky rail. The rail is position:sticky, which any ancestor that clips overflow would cancel; parts/solutions.php uses overflow-x:clip on its wrapper for exactly that reason. Do not change it back to hidden. ---------------------------------------------------------------- */ .nu-tailor:hover { background: rgba(16,25,37,.9) !important; } #solutions [data-ref="coreSticky"] { top: 104px; } body.admin-bar #solutions [data-ref="coreSticky"] { top: 136px; } @media screen and (max-width: 782px) { body.admin-bar #solutions [data-ref="coreSticky"] { top: 150px; } } /* ---------------------------------------------------------------- Homepage vendor wall. The artwork is a dark mark on a white plate. At rest the plate is inverted, so it reads as a white mark sitting on the dark strip; on hover the filter is dropped, which reveals both the white plate and the mark's true brand colour in one move. ---------------------------------------------------------------- */ .nu-vw:hover { border-color: rgba(143,187,255,.32) !important; transform: translateY(-3px); } .nu-vw:hover .nu-vw-img { filter: none !important; } /* Vendors & Products page hover states, verbatim from that design */ .nu-vp-vendor:hover { background:#FFFFFF !important; transform:translateY(-4px); } .nu-vp-vendor:hover .nu-vp-vname { color:#0B1017 !important; } .nu-vp-prod:hover { background:#FFFFFF !important; transform:translateY(-5px); box-shadow:0 26px 50px -32px rgba(11,16,23,.45); } .nu-vp-wa:hover { background:rgba(53,208,138,.28) !important; color:#fff !important; } /* Business Solutions page hover states, verbatim from that design */ .nu-sol-card:hover { background:#FFFFFF !important; transform:translateY(-3px); } .nu-sol-conn:hover { background:rgba(16,25,37,.94) !important; } .nu-sol-port:hover { background:#111A26 !important; } /* ---------- focus states, verbatim from the design ---------- */ .nu-fc-1:focus { border-color:rgba(120,170,255,.6) !important; outline:none !important; } /* ---------- about page hover / focus states, verbatim from the design ---------- */ .nu-abh-3:hover { background:#fff !important; } .nu-abh-4:hover { border-color:rgba(255,255,255,.5) !important; background:rgba(255,255,255,.05) !important; } .nu-abh-5:hover { background:#FFFFFF !important; } .nu-abh-6:hover { transform:translateX(6px) !important; box-shadow:-6px 0 0 0 #3B6FC0 !important; } .nu-abh-7:hover { background:#111A26 !important; } .nu-abh-8:hover { background:rgba(15,23,34,.94) !important; } .nu-abh-9:hover { border-color:rgba(190,150,255,.7) !important; background:linear-gradient(120deg,rgba(164,107,245,.22),rgba(9,14,22,.94) 55%) !important; } .nu-abh-10:hover { background:rgba(255,255,255,.07) !important; } .nu-abh-11:hover { border-color:rgba(255,255,255,.45) !important; } .nu-abh-12:hover { background:rgba(14,22,34,.9) !important; } .nu-abf-1:focus { border-color:rgba(120,170,255,.6) !important; outline:none !important; } /* ---------- careers page hover / focus states, verbatim from the design ---------- */ .nu-cah-3:hover { background:#fff !important; } .nu-cah-4:hover { border-color:rgba(255,255,255,.5) !important; background:rgba(255,255,255,.05) !important; } .nu-cah-5:hover { background:#FFFFFF !important; transform:translateY(-4px) !important; } .nu-cah-6:hover { background:#FFFFFF !important; transform:translateY(-3px) !important; } .nu-cah-7:hover { border-color:rgba(143,187,255,.7) !important; background:rgba(255,255,255,.05) !important; } .nu-cah-8:hover { background:rgba(14,22,34,.9) !important; } .nu-caf-1:focus { border-color:rgba(120,170,255,.6) !important; outline:none !important; } /* ---------- contact page hover / focus states, verbatim from the design ---------- */ .nu-coh-3:hover { background:#fff !important; } .nu-coh-4:hover { border-color:rgba(255,255,255,.5) !important; background:rgba(255,255,255,.05) !important; } .nu-coh-5:hover { background:#0E1622 !important; transform:translateY(-4px) !important; } .nu-coh-6:hover { border-color:rgba(143,187,255,.7) !important; background:rgba(255,255,255,.05) !important; color:#fff !important; } .nu-coh-7:hover { background:rgba(255,255,255,.07) !important; } .nu-coh-8:hover { border-color:rgba(255,255,255,.45) !important; } .nu-coh-9:hover { background:#111A26 !important; } .nu-coh-10:hover { background:rgba(16,25,37,.94) !important; } .nu-cof-1:focus { border-color:rgba(120,170,255,.6) !important; outline:none !important; } /* ---------- Group Companies hover / focus states, verbatim from the design ---------- */ .nu-gch-3:hover { background:#fff !important; } .nu-gch-4:hover { border-color:rgba(255,255,255,.5) !important; background:rgba(255,255,255,.05) !important; } .nu-gch-5:hover { background:#FFFFFF !important; transform:translateY(-6px) !important; box-shadow:0 24px 50px -30px rgba(11,16,23,.45) !important; } .nu-gch-6:hover { background:rgba(27,63,134,.05) !important; } .nu-gch-7:hover { background:rgba(16,25,37,.94) !important; } .nu-gch-8:hover { background:rgba(14,22,34,.9) !important; } .nu-gcf-1:focus { border-color:rgba(120,170,255,.6) !important; outline:none !important; } /* ---------- keyframes (verbatim from the design) ---------- */ @keyframes nuRise { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } } @keyframes nuFade { from { opacity: 0; } to { opacity: 1; } } @keyframes nuLine { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes nuMask { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(0, 14px, 0); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } } @keyframes nuScroll { 0% { transform: translateY(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } } @keyframes nuBar { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } @keyframes nuSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(220%); } } @keyframes nuSpinSlow { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes nuSpin { to { transform: rotate(360deg); } } @keyframes nuScan { 0% { transform: translateY(-120%); } 100% { transform: translateY(320%); } } @keyframes nuAurora { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(5%,-4%,0) scale(1.14); } 66% { transform: translate3d(-5%,4%,0) scale(.92); } } @keyframes nuFloorPan { from { transform: perspective(760px) rotateX(74deg) translateY(0); } to { transform: perspective(760px) rotateX(74deg) translateY(90px); } } @keyframes nuBeam { 0% { transform: translateX(-40%) skewX(-14deg); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateX(420%) skewX(-14deg); opacity: 0; } } @keyframes nuWordUp { from { transform: translate3d(0,108%,0); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes nuBars { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } } @keyframes nuRing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes nuFloat { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-12px,0); } } @keyframes nuShine { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } } @keyframes nuMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @keyframes nuPop { from { opacity: 0; transform: translate3d(0,26px,0) scale(.985); } to { opacity: 1; transform: none; } } @keyframes nuDriftX { from { transform: translateX(0); } to { transform: translateX(-30px); } } @keyframes nuDriftY { from { transform: translateY(0); } to { transform: translateY(26px); } } @keyframes nuOrb { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-14px,-12px,0); } } @keyframes nuPulseDot { 0%, 100% { transform: scale(1); opacity: .65; } 50% { transform: scale(1.9); opacity: 1; } } @keyframes nuSweepVP { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(210%); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------------------------------------------------------------- Vendors & Products — vendor cells. Each cell now carries a logo plate and a row of product pills, so the tracks need more room than the old 170px name-only cells. The logo art is a dark mark on a white plate (same files as the homepage wall): inverted and screen-blended it reads as a white mark with the plate dropped out, and on hover the filter and blend are both removed to reveal the true brand colour. ---------------------------------------------------------------- */ .nu-vp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1240px) { .nu-vp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .nu-vp-grid { grid-template-columns: minmax(0, 1fr); } } .nu-vp-vendor:hover { background: #0E141D !important; } .nu-vp-vendor:hover .nu-vp-logo { filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; } .nu-vp-vendor:hover .nu-vp-vname { color: #FFFFFF; } .nu-vp-pill:hover { border-color: rgba(143,187,255,.6) !important; background: rgba(143,187,255,.12) !important; color: #FFFFFF !important; } /* Mega-menu division marks: the frame brightens with the card. */ a[data-hover="onCompanyHover"] .nu-cmark { transition: border-color 320ms, background 320ms; } a[data-hover="onCompanyHover"]:hover .nu-cmark { border-color: rgba(255,255,255,.4) !important; background: rgba(255,255,255,.04); } /* ---------------------------------------------------------------- Mobile navigation. The panel is a sibling of the mega menu, never a child: megaRef is height-collapsed when closed and would clip it to zero. Open state is the header's data-open attribute — one source of truth, so the bars, the label and the panel can never disagree. ---------------------------------------------------------------- */ header[data-ref="navRef"] [data-ref="mobileNav"] { display: none; } @media (max-width: 1259px) { .nu-nav-cta { display: none !important; } header[data-ref="navRef"] { background: rgba(5,7,11,.92); backdrop-filter: blur(18px); } header[data-ref="navRef"] button[data-nav-toggle] { display: flex !important; flex: 0 0 auto !important; margin-left: auto !important; order: 9; } header[data-ref="navRef"] > div:first-child { gap: 12px !important; justify-content: space-between; } header[data-ref="navRef"][data-open="1"] [data-ref="mobileNav"] { display: flex; } } /* Bars rotate into a cross about the box centre. */ header[data-ref="navRef"][data-open="1"] .nu-burger > span:first-child { top: 5px; transform: rotate(45deg); } header[data-ref="navRef"][data-open="1"] .nu-burger > span:last-child { top: 5px; transform: rotate(-45deg); } header[data-ref="navRef"][data-open="1"] .nu-burger-label::after { content: ''; } [data-ref="megaLinks"] a:active, [data-ref="mobileNav"] a:active { background: rgba(255,255,255,.05); } @media(max-width:768px){ .nu-hud{ display:none !important; } } @media(max-width:720px){ .industries-sticky-bar{ display:none !important; } }