/* ========================================================= KINETIX — DARK CINEMATIC MULTIPURPOSE THEME Living particle network · smooth scroll · scroll-driven motion ========================================================= */ :root { --bg: #05060e; --bg2: #0a0e1b; --bg3: #0f1626; --panel: rgba(255,255,255,.035); --panel-2: rgba(255,255,255,.06); --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.16); --ink: #eef2fb; /* headings / strong */ --body: #a2aec6; /* body text */ --muted: #6c789a; /* muted */ --cyan: #2ee6ff; --blue: #5b8cff; --indigo: #8b5cf6; --violet: #c084fc; --green: #34e29a; /* terminal / code accent */ --grad: linear-gradient(120deg, #2ee6ff 0%, #5b8cff 38%, #9b6bff 100%); --grad2: linear-gradient(120deg, #34e29a, #2ee6ff); --glow-cyan: 0 0 36px rgba(46,230,255,.5); --glow-blue: 0 0 44px rgba(91,140,255,.55); --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --body-f: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, "SFMono-Regular", Consolas, monospace; --container: 1380px; --pad: clamp(20px, 5vw, 76px); --section: clamp(80px, 11vw, 170px); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); } html { scroll-snap-type: y proximity; scroll-padding-top: 64px; } .hero, .snap-panel { scroll-snap-align: start; } .snap-panel { min-height: 100vh; display: flex; align-items: center; } @media (max-width: 900px) { html { scroll-snap-type: none; } .snap-panel { min-height: 0; display: block; } } body { margin: 0; font-family: var(--body-f); font-weight: 400; font-size: 17px; line-height: 1.7; color: var(--body); background: radial-gradient(120% 80% at 80% -10%, rgba(79,140,255,.18), transparent 55%), radial-gradient(100% 70% at 0% 10%, rgba(139,140,255,.14), transparent 50%), var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; cursor: none; } @media (hover: none) { body { cursor: auto; } } img { max-width: 100%; height: auto; display: block; } a { color: var(--ink); text-decoration: none; } button { font-family: inherit; cursor: none; } h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; color: var(--ink); margin: 0; line-height: 1.06; letter-spacing: -0.025em; } p { margin: 0 0 1.1em; } section[id], .anchor { scroll-margin-top: 100px; } ::selection { background: rgba(46,230,255,.3); color: #fff; } .site-header, .site-main, .site-footer { position: relative; z-index: 2; } .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--pad); width: 100%; } .section-pad { padding-block: var(--section); } /* ========================================================= GLOBAL FX LAYERS ========================================================= */ /* living molecular network canvas */ #net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .9; } /* grain */ .grain { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* glow orbs */ .orb { position: fixed; border-radius: 50%; filter: blur(80px); z-index: 1; pointer-events: none; opacity: .5; } .orb--1 { width: 46vmax; height: 46vmax; background: radial-gradient(circle, rgba(46,230,255,.4), transparent 60%); top: -10vmax; right: -12vmax; } .orb--2 { width: 40vmax; height: 40vmax; background: radial-gradient(circle, rgba(139,140,255,.34), transparent 60%); bottom: -14vmax; left: -10vmax; } /* scroll progress */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; z-index: 300; background: var(--grad); box-shadow: var(--glow-cyan); } /* custom cursor */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none; border-radius: 50%; transform: translate(-50%,-50%); will-change: transform; } .cursor-dot { width: 7px; height: 7px; background: var(--cyan); box-shadow: var(--glow-cyan); } .cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(46,230,255,.6); transition: width .25s, height .25s, background .25s, border-color .25s; } body.cursor-hover .cursor-ring { width: 64px; height: 64px; background: rgba(46,230,255,.08); border-color: var(--cyan); } @media (hover: none) { .cursor-dot, .cursor-ring { display: none; } } /* ========================================================= TYPOGRAPHY HELPERS ========================================================= */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); text-transform: uppercase; letter-spacing: .26em; font-size: .72rem; font-weight: 600; color: var(--cyan); margin: 0 0 1.2rem; } .eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--grad); border-radius: 2px; box-shadow: var(--glow-cyan); } .eyebrow--center { justify-content: center; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* line-mask reveal for headings */ .reveal-text { } html.ntc-js .reveal-text .ln { display: block; overflow: hidden; } html.ntc-js .reveal-text .ln > span { display: block; transform: translateY(110%); transition: transform .9s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--l,0) * .09s); } html.ntc-js .reveal-text.is-visible .ln > span { transform: none; } /* ========================================================= BUTTONS ========================================================= */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 600; line-height: 1; padding: 18px 36px; border: 1px solid transparent; border-radius: 100px; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, color .4s, background .4s, border-color .4s; } .btn--grad { background: var(--grad); color: #04080f; box-shadow: 0 10px 34px -8px rgba(79,140,255,.7), inset 0 0 0 1px rgba(255,255,255,.2); font-weight: 700; } .btn--grad:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -10px rgba(79,140,255,.85), var(--glow-cyan); } .btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.02); backdrop-filter: blur(6px); } .btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-3px); box-shadow: var(--glow-cyan); } .btn--dark { border: 1px solid var(--line-2); color: #fff; background: var(--panel); } .btn--dark:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-3px); } .btn--block { width: 100%; } .btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); transition: left .7s ease; } .btn:hover::after { left: 140%; } .link-arrow { display: inline-flex; align-items: center; gap: .7em; font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 600; color: #fff; } .link-arrow__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--cyan); transition: transform .4s, background .4s, border-color .4s; } .link-arrow:hover .link-arrow__icon { transform: translateX(6px); background: var(--grad); color: #04080f; border-color: transparent; } /* ========================================================= HEADER ========================================================= */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .45s, box-shadow .45s, backdrop-filter .45s; } .site-header.is-scrolled { background: rgba(5,10,20,.72); backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 1px 0 var(--line), 0 24px 50px -30px rgba(0,0,0,.8); } .topbar { border-bottom: 1px solid var(--line); max-height: 60px; overflow: hidden; transition: max-height .4s, opacity .3s, border-color .4s; } .site-header.is-scrolled .topbar { max-height: 0; opacity: 0; border-color: transparent; } .topbar__inner { display: flex; justify-content: space-between; align-items: center; padding-block: 9px; } .topbar__text, .topbar a { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; color: rgba(255,255,255,.7); } .topbar__right { display: flex; gap: 22px; } .topbar a:hover { color: var(--cyan); } .header-main__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 16px; } .brand { flex-shrink: 0; } .brand__wordmark { display: flex; align-items: center; gap: 12px; color: inherit; } .brand__mark { width: 40px; height: 40px; border-radius: 12px; background: var(--grad); display: grid; place-items: center; box-shadow: var(--glow-blue); flex-shrink: 0; } .brand__mark svg { width: 22px; height: 22px; } .brand__text { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-family: var(--display); font-size: 1.32rem; font-weight: 700; color: #fff; } .brand__sub { font-family: var(--display); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 5px; color: rgba(255,255,255,.6); white-space: nowrap; } .primary-nav { flex: 1; display: flex; justify-content: center; } .primary-nav__menu { display: flex; align-items: center; gap: clamp(10px,1.6vw,28px); list-style: none; margin: 0; padding: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; font-weight: 500; } .primary-nav__menu a { position: relative; padding: 8px 0; color: rgba(255,255,255,.85); } .primary-nav__menu a:hover { color: #fff; } .primary-nav__menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--grad); border-radius: 2px; box-shadow: var(--glow-cyan); transition: width .35s; } .primary-nav__menu a:hover::after, .primary-nav__menu .current-menu-item > a::after { width: 100%; } .primary-nav__menu .sub-menu { display: none; } .header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .icon-btn { background: none; border: 0; color: #fff; padding: 6px; display: inline-flex; } .icon-btn:hover { color: var(--cyan); } .header-cta { padding: 13px 28px; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; } .nav-toggle span { width: 24px; height: 2px; background: #fff; transition: transform .3s, opacity .3s; } body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; } body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 200; background: rgba(4,8,15,.96); backdrop-filter: blur(10px); transform: translateX(100%); transition: transform .55s cubic-bezier(.7,0,.2,1); padding: 110px var(--pad) 50px; overflow-y: auto; } body.menu-open .mobile-menu { transform: none; } .mobile-menu__list { list-style: none; margin: 0; padding: 0; } .mobile-menu__list a { display: block; font-family: var(--display); font-weight: 600; font-size: 1.9rem; color: #fff; padding: 12px 0; border-bottom: 1px solid var(--line); } .mobile-menu__meta { margin-top: 30px; display: flex; flex-direction: column; gap: 8px; } .mobile-menu__meta a { color: var(--muted); } .search-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(4,8,15,.97); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; } .search-overlay.is-open { opacity: 1; visibility: visible; } .search-overlay__inner { width: min(680px,86vw); } .search-overlay__close { position: absolute; top: 28px; right: 36px; background: none; border: 0; color: #fff; font-size: 2.4rem; } .search-overlay .search-form { display: flex; border-bottom: 2px solid var(--line-2); } .search-overlay .search-form__field { flex: 1; background: transparent; border: 0; color: #fff; font-family: var(--display); font-size: 2rem; padding: 12px 0; } .search-overlay .search-form__field::placeholder { color: rgba(255,255,255,.35); } .search-overlay .search-form__submit { background: none; border: 0; color: var(--cyan); text-transform: uppercase; letter-spacing: .14em; font-family: var(--display); } /* ========================================================= ANIMATED BACKDROPS ========================================================= */ .mesh-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .mesh-bg::before, .mesh-bg::after { content: ""; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: .5; mix-blend-mode: screen; } .mesh-bg::before { background: radial-gradient(circle, rgba(46,230,255,.5), transparent 60%); top: -20%; left: -10%; animation: nt-mesh1 22s ease-in-out infinite alternate; } .mesh-bg::after { background: radial-gradient(circle, rgba(139,140,255,.5), transparent 60%); bottom: -25%; right: -10%; animation: nt-mesh2 26s ease-in-out infinite alternate; } @keyframes nt-mesh1 { from { transform: translate(0,0) scale(1);} to { transform: translate(18vw,12vh) scale(1.3);} } @keyframes nt-mesh2 { from { transform: translate(0,0) scale(1.1);} to { transform: translate(-16vw,-10vh) scale(1.4);} } .flowlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: .6; } .flowlines path { fill: none; stroke: url(#ntFlow); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 14 22; animation: nt-flow 9s linear infinite; filter: drop-shadow(0 0 6px rgba(46,230,255,.5)); } .flowlines path:nth-child(2){animation-duration:13s;opacity:.7}.flowlines path:nth-child(3){animation-duration:17s;opacity:.5}.flowlines path:nth-child(4){animation-duration:11s;opacity:.6} @keyframes nt-flow { to { stroke-dashoffset: -360; } } .particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .particles span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px 2px rgba(46,230,255,.7); opacity: .5; animation: nt-drift linear infinite; } @keyframes nt-drift { 0%{transform:translateY(20px);opacity:0} 15%{opacity:.7} 100%{transform:translateY(-140px);opacity:0} } /* ========================================================= HERO (sticky-pinned content, scroll-scaled media) ========================================================= */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; color: #fff; overflow: hidden; } .hero__media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; } .hero__media img { width: 100%; height: 100%; object-fit: cover; animation: nt-kenburns 26s ease-in-out infinite alternate; } @keyframes nt-kenburns { from { transform: scale(1.06) translate(0,0);} to { transform: scale(1.2) translate(-2%,-2%);} } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,8,15,.62) 0%, rgba(4,8,15,.35) 35%, rgba(4,8,15,.96) 100%), radial-gradient(90% 70% at 12% 50%, rgba(4,8,15,.7), transparent 70%); } .hero .flowlines, .hero .particles { z-index: 2; } .hero__inner { position: relative; z-index: 3; width: 100%; padding-top: 120px; } .hero__eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: .3em; font-size: .78rem; font-weight: 600; color: var(--cyan); margin-bottom: 1.6rem; display: inline-flex; align-items: center; gap: 12px; } .hero__eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--grad); box-shadow: var(--glow-cyan); } .hero__title { color: #fff; font-weight: 600; font-size: clamp(2.9rem, 7vw, 6.8rem); line-height: .98; letter-spacing: -0.035em; max-width: 16ch; text-shadow: 0 8px 40px rgba(0,0,0,.5); } .hero__title .grad-text { background: linear-gradient(120deg,#6ff3ff,#7aa8ff,#b6a0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 26px rgba(46,230,255,.45)); } .hero__text { color: rgba(255,255,255,.84); max-width: 46ch; font-size: 1.14rem; margin: 1.6rem 0 2.4rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; } .hero__stats { display: flex; gap: clamp(28px,4vw,68px); margin-top: clamp(40px,6vw,76px); flex-wrap: wrap; } .hero__stat b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(2rem,3vw,3rem); color: #fff; line-height: 1; } .hero__stat span { font-size: .82rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .12em; } .hero__scroll { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3; width: 26px; height: 42px; border: 1px solid rgba(255,255,255,.45); border-radius: 14px; } .hero__scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; background: var(--cyan); border-radius: 2px; transform: translateX(-50%); box-shadow: var(--glow-cyan); animation: nt-scroll 1.7s ease-in-out infinite; } @keyframes nt-scroll { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,13px)} 100%{opacity:0} } .hero__title .word { display: inline-block; } html.ntc-js .hero__title .word { opacity: 0; transform: translateY(40px) rotate(2deg); } html.ntc-js .hero.is-in .hero__title .word { animation: nt-wordup .9s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--w) * .08s); } @keyframes nt-wordup { to { opacity: 1; transform: none; } } /* ========================================================= MARQUEE ========================================================= */ .marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 24px 0; background: rgba(7,15,28,.5); } .marquee__track { display: flex; gap: 56px; width: max-content; animation: nt-marquee 34s linear infinite; } .marquee__track span { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: .04em; color: rgba(255,255,255,.5); display: inline-flex; align-items: center; gap: 56px; white-space: nowrap; } .marquee__track span::after { content: "◆"; color: var(--cyan); font-size: .7em; filter: drop-shadow(0 0 6px rgba(46,230,255,.7)); } @keyframes nt-marquee { to { transform: translateX(-50%); } } /* ========================================================= SECTION HEADINGS ========================================================= */ .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: clamp(40px,5vw,68px); } .section-head--center { flex-direction: column; align-items: center; text-align: center; } .section-head__title { font-size: clamp(2.1rem,4.4vw,3.8rem); } .section-head__title .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .section-head__text { color: var(--body); margin-top: .9rem; max-width: 54ch; } .section-head--center .section-head__text { margin-inline: auto; } /* ========================================================= FEATURE BLOCKS (scroll-parallax media) ========================================================= */ .feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px,6vw,110px); max-width: var(--container); margin: 0 auto; padding: clamp(54px,8vw,120px) var(--pad); } .feature--reverse .feature__media { order: 2; } .feature__media { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0,0,0,.8); border: 1px solid var(--line); } .feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 50%, rgba(4,8,15,.5)); pointer-events: none; } .feature__media-inner { overflow: hidden; } .feature__media img { width: 100%; height: clamp(420px,48vw,680px); object-fit: cover; will-change: transform; transform: scale(1.18); } .feature__index { position: absolute; top: 22px; left: 22px; z-index: 2; font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; color: #fff; padding: 9px 17px; border-radius: 100px; background: rgba(4,8,15,.5); backdrop-filter: blur(8px); border: 1px solid var(--line-2); } .feature__title { font-size: clamp(2rem,3.6vw,3.3rem); margin: .5rem 0 1.1rem; } .feature__body { color: var(--body); max-width: 46ch; margin-bottom: 1.6rem; } .feature__list { list-style: none; padding: 0; margin: 0 0 1.9rem; display: grid; gap: 12px; } .feature__list li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: #fff; } .feature__list li::before { content: ""; width: 24px; height: 24px; border-radius: 8px; background-image: var(--grad); flex-shrink: 0; box-shadow: 0 0 16px rgba(46,230,255,.4); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4L19 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4L19 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; } /* ========================================================= HORIZONTAL SHOWCASE (big images move with scroll) ========================================================= */ .showcase { position: relative; height: 320vh; } .showcase__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; } .showcase__head { position: absolute; top: clamp(60px,10vh,120px); left: var(--pad); z-index: 3; max-width: 40ch; } .showcase__track { display: flex; gap: clamp(20px,2.4vw,40px); padding-inline: var(--pad); will-change: transform; } .showcase__item { position: relative; flex: 0 0 clamp(320px,42vw,640px); height: clamp(360px,62vh,640px); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); } .showcase__item img { width: 100%; height: 100%; object-fit: cover; } .showcase__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,8,15,.85), transparent 55%); } .showcase__cap { position: absolute; left: 24px; bottom: 22px; z-index: 2; } .showcase__cap b { font-family: var(--display); font-size: 1.5rem; color: #fff; display: block; } .showcase__cap span { color: var(--cyan); font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; } /* fallback when JS/headless: normal horizontal scroll strip */ html:not(.fx-on) .showcase { height: auto; } html:not(.fx-on) .showcase__sticky { position: relative; height: auto; padding-block: var(--section); } html:not(.fx-on) .showcase__track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; } html:not(.fx-on) .showcase__head { position: static; margin: 0 auto clamp(30px,4vw,50px); max-width: var(--container); padding-inline: 0; } /* ========================================================= STATS BAND ========================================================= */ .stats { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: rgba(7,15,28,.4); padding-block: clamp(96px,14vw,190px); } .stats__grid { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(24px,3vw,48px); } .stat { text-align: center; padding: 18px 10px; position: relative; } .stat + .stat::before { content: ""; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: linear-gradient(180deg, transparent, var(--line-2), transparent); } .stat b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(3.8rem,8.5vw,7.6rem); line-height: .92; letter-spacing: -.035em; } .stat b .grad-text { background: linear-gradient(120deg,#7df7ff,#5b8cff 55%,#b6a0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 34px rgba(46,230,255,.6)); } .stat > span { display: block; margin-top: 18px; color: rgba(255,255,255,.66); text-transform: uppercase; letter-spacing: .18em; font-size: .82rem; font-family: var(--display); } /* ========================================================= PRODUCT CARDS (glass + glow) ========================================================= */ .products { position: relative; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: clamp(20px,2.4vw,32px); } .product-card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s, background .5s; } .product-card::before { content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .5s; pointer-events: none; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 50px 80px -40px rgba(0,0,0,.9); background: var(--panel-2); } .product-card:hover::before { opacity: 1; } .product-card__media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: radial-gradient(120% 120% at 30% 0%, #102339, #060d18); } .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); } .product-card:hover .product-card__media img { transform: scale(1.09); } .product-card__mol { position: absolute; inset: 0; display: grid; place-items: center; } .product-card__mol .mol-svg { width: 74%; height: auto; overflow: visible; opacity: .97; } .mol-rot { transform-box: fill-box; transform-origin: center; animation: mol-rot 46s linear infinite; } @keyframes mol-rot { to { transform: rotate(360deg); } } .mol-bond-base { fill: none; stroke: rgba(120,180,255,.3); stroke-width: 2.4; stroke-linecap: round; } .mol-bond-flow { fill: none; stroke: #8be9ff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 3 11; filter: drop-shadow(0 0 5px rgba(46,230,255,.9)); animation: mol-flow 2.2s linear infinite; } @keyframes mol-flow { to { stroke-dashoffset: -28; } } .mol-ring { fill: none; stroke: rgba(46,230,255,.45); stroke-width: 1.6; stroke-dasharray: 4 6; animation: mol-flow 7s linear infinite; } .mol-atoms .atom { fill: url(#atomGrad); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 7px rgba(46,230,255,.8)); animation: atom-pulse 3.2s ease-in-out infinite; } .mol-atoms .atom:nth-child(2n) { animation-delay: -1.1s; } .mol-atoms .atom:nth-child(3n) { animation-delay: -2.2s; } @keyframes atom-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .mol-svg--v .mol-atoms .atom { fill: url(#atomGradV); filter: drop-shadow(0 0 7px rgba(167,139,250,.85)); } .mol-svg--v .mol-bond-flow { stroke: #c8a8ff; filter: drop-shadow(0 0 5px rgba(167,139,250,.9)); } .mol-svg--v .mol-ring { stroke: rgba(167,139,250,.5); } .product-card:hover .mol-rot { animation-duration: 16s; } .product-card:hover .mol-bond-flow { animation-duration: 1.1s; } @keyframes nt-spin { to { transform: rotate(360deg); } } .product-card__tag { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--display); font-weight: 600; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: 7px 13px; border-radius: 100px; background: rgba(4,8,15,.55); backdrop-filter: blur(6px); border: 1px solid var(--line-2); } .product-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; } .product-card__cas { font-family: var(--display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin: 0 0 .5rem; } .product-card__name { font-size: 1.34rem; font-weight: 600; line-height: 1.15; margin: 0 0 .5rem; } .product-card__name a { color: #fff; } .product-card__name a:hover { color: var(--cyan); } .product-card__desc { font-size: .92rem; color: var(--muted); margin: 0 0 1.1rem; } .product-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--line); } .product-card__view { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-weight: 600; color: var(--cyan); } .product-card__chip { font-size: .7rem; color: var(--muted); } /* 3D flip-to-specs */ .product-card { perspective: 1500px; } .product-card__flip { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .product-card.is-flipped .product-card__flip { transform: rotateY(180deg); } .product-card__face { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .product-card__front { position: relative; display: flex; flex-direction: column; } .product-card__back { position: absolute; inset: 0; transform: rotateY(180deg); background: linear-gradient(160deg, #102338, #060d18); padding: 24px; display: flex; flex-direction: column; } .product-card__flipbtn { pointer-events: auto; font-family: var(--display); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--cyan); background: rgba(46,230,255,.08); border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 12px; cursor: none; transition: background .25s, color .25s, border-color .25s; } .product-card__flipbtn:hover { background: var(--grad); color: #04080f; border-color: transparent; } .product-card__backhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .product-card__backhead h3 { font-size: 1.18rem; color: #fff; line-height: 1.1; } .product-card__backhead .product-card__flipbtn { width: 34px; height: 34px; padding: 0; font-size: 1rem; flex-shrink: 0; display: inline-grid; place-items: center; } .product-card__specs { margin: 0; display: grid; gap: 0; flex: 1; align-content: start; } .product-card__specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); } .product-card__specs dt { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .62rem; font-family: var(--display); white-space: nowrap; } .product-card__specs dd { margin: 0; color: #fff; font-size: .82rem; font-weight: 500; text-align: right; } .product-card__backcta { margin-top: 14px; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 600; color: var(--cyan); } .product-card__backcta:hover { color: #fff; } /* ========================================================= CAPABILITIES ========================================================= */ .cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.4vw,32px); } .cap { position: relative; padding: 36px 32px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; transition: transform .45s, box-shadow .45s, border-color .45s, background .45s; } .cap:hover { transform: translateY(-8px); border-color: var(--line-2); background: var(--panel-2); box-shadow: 0 40px 70px -40px rgba(0,0,0,.85); } .cap::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 0%, rgba(46,230,255,.1), transparent 60%); opacity: 0; transition: opacity .45s; } .cap:hover::after { opacity: 1; } .cap__icon { position: relative; width: 58px; height: 58px; border-radius: 16px; background: var(--grad); display: grid; place-items: center; margin-bottom: 22px; box-shadow: var(--glow-blue); } .cap__icon svg { width: 28px; height: 28px; stroke: #04080f; } .cap__title { font-size: 1.32rem; margin: 0 0 .6rem; color: #fff; } .cap__text { color: var(--body); font-size: .96rem; margin: 0; } .cap__num { position: absolute; top: 22px; right: 26px; font-family: var(--display); font-weight: 700; font-size: 2.6rem; color: rgba(255,255,255,.05); } /* ========================================================= CAMPAIGN ========================================================= */ .cta-band { position: relative; overflow: hidden; border-block: 1px solid var(--line); } .cta-band__media { position: absolute; inset: 0; z-index: 0; } .cta-band__media img { width: 100%; height: 100%; object-fit: cover; opacity: .4; animation: nt-kenburns 30s ease-in-out infinite alternate; } .cta-band__inner { position: relative; z-index: 3; text-align: center; } .cta-band__title { color: #fff; font-size: clamp(2.4rem,5vw,4.6rem); margin: .6rem 0 1rem; } .cta-band__text { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0 auto 2rem; } /* ========================================================= ABOUT ========================================================= */ .about { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; } .about__media { position: relative; min-height: 560px; overflow: hidden; } .about__media img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; will-change: transform; transform: scale(1.12); } .about__badge { position: absolute; bottom: 30px; left: 30px; z-index: 2; background: rgba(4,8,15,.6); backdrop-filter: blur(12px); border: 1px solid var(--line-2); border-radius: 18px; padding: 24px 28px; color: #fff; box-shadow: var(--glow-blue); } .about__badge b { font-family: var(--display); font-size: 2.6rem; font-weight: 700; display: block; line-height: 1; } .about__badge span { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.7); } .about__text { padding: clamp(54px,8vw,130px) clamp(28px,6vw,96px); display: flex; flex-direction: column; justify-content: center; } .about__title { font-size: clamp(2.1rem,3.8vw,3.4rem); margin: .4rem 0 1.1rem; } .about__body { color: var(--body); margin-bottom: 1.6rem; } /* ========================================================= PAGE HERO / GENERIC ========================================================= */ .page-hero { position: relative; overflow: hidden; padding-top: clamp(160px,22vh,250px); padding-bottom: clamp(54px,8vw,100px); border-bottom: 1px solid var(--line); } .page-hero__inner { position: relative; z-index: 3; } .page-hero__title { color: #fff; font-size: clamp(2.3rem,5.4vw,4.6rem); } .page-hero__title span { color: var(--cyan); } .filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(36px,4vw,56px); } .filter-tab { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 600; padding: 12px 26px; border-radius: 100px; border: 1px solid var(--line); color: rgba(255,255,255,.8); transition: .3s; } .filter-tab.is-active, .filter-tab:hover { background: var(--grad); color: #04080f; border-color: transparent; box-shadow: var(--glow-blue); } /* ========================================================= SINGLE PRODUCT ========================================================= */ .product-hero { position: relative; overflow: hidden; padding-top: 160px; padding-bottom: clamp(44px,5vw,80px); border-bottom: 1px solid var(--line); } .product-hero__inner { position: relative; z-index: 3; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px,5vw,70px); align-items: center; } .product-hero__title { color: #fff; font-size: clamp(2.6rem,5.4vw,4.8rem); } .product-hero__cas { color: var(--cyan); font-family: var(--display); letter-spacing: .12em; } .product-hero__visual { border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; background: radial-gradient(120% 120% at 30% 0%, #102339, #060d18); display: grid; place-items: center; border: 1px solid var(--line); box-shadow: 0 50px 90px -40px rgba(0,0,0,.85); } .product-hero__visual img { width: 100%; height: 100%; object-fit: cover; } .product-hero__visual .mol-svg { width: 58%; } .product-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px,6vw,80px); align-items: start; } .spec-table { margin: 0; border-top: 1px solid var(--line); } .spec-table__row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); } .spec-table__row dt { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-family: var(--display); } .spec-table__row dd { margin: 0; color: #fff; font-weight: 600; } .product-aside { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: clamp(26px,3vw,38px); position: sticky; top: 100px; } .product-aside h3 { font-size: 1.34rem; margin: 0 0 1rem; color: #fff; } .related { border-top: 1px solid var(--line); } /* ========================================================= BLOG / PROSE ========================================================= */ .post-list { display: grid; gap: clamp(28px,4vw,48px); } .post-card { display: grid; grid-template-columns: 360px 1fr; gap: clamp(22px,3vw,44px); align-items: center; } .post-card__media img { border-radius: 18px; aspect-ratio: 4/3; object-fit: cover; width: 100%; border: 1px solid var(--line); } .post-card__meta { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--cyan); margin: 0 0 .6rem; } .post-card__title { font-size: clamp(1.5rem,2.4vw,2.2rem); margin: 0 0 .7rem; } .post-card__title a { color: #fff; } .prose { color: var(--body); font-size: 1.06rem; line-height: 1.85; max-width: 760px; } .prose h2 { font-size: 1.9rem; margin: 2rem 0 .8rem; color: #fff; } .prose h3 { font-size: 1.4rem; margin: 1.6rem 0 .6rem; color: #fff; } .prose a { color: var(--cyan); border-bottom: 1px solid currentColor; } .pagination { margin-top: clamp(40px,5vw,70px); } .pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); color: #fff; font-family: var(--display); font-weight: 600; } .pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--grad); color: #04080f; border-color: transparent; } /* ========================================================= FOOTER ========================================================= */ .site-footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: rgba(4,8,15,.6); } .footer-cta { position: relative; z-index: 3; text-align: center; padding-block: clamp(70px,10vw,140px); border-bottom: 1px solid var(--line); } .footer-cta__title { color: #fff; font-size: clamp(2.2rem,4.4vw,3.8rem); max-width: 20ch; margin: .6rem auto 1.4rem; } .footer-cta__text { color: rgba(255,255,255,.7); max-width: 50ch; margin: 0 auto 2rem; } .footer-main { position: relative; z-index: 3; padding-block: clamp(56px,8vw,96px); } .footer-main__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(24px,3vw,52px); } .footer-col__title { color: #fff; font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 600; margin: 0 0 1.2rem; } .footer-menu { list-style: none; margin: 0; padding: 0; } .footer-menu a { color: var(--muted); font-size: .94rem; line-height: 2.2; } .footer-menu a:hover { color: var(--cyan); } .footer-brand .brand__wordmark { margin-bottom: 1rem; } .footer-contact { font-size: .94rem; line-height: 1.9; margin: 1rem 0; color: var(--body); } .footer-contact a { color: rgba(255,255,255,.78); } .social-list { display: flex; gap: 12px; list-style: none; padding: 0; margin: 1.3rem 0 0; } .social-list a { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; color: rgba(255,255,255,.7); font-family: var(--display); font-size: .68rem; transition: .3s; } .social-list a:hover { background: var(--grad); color: #04080f; border-color: transparent; transform: translateY(-3px); box-shadow: var(--glow-blue); } .footer-bottom { position: relative; z-index: 3; border-top: 1px solid var(--line); } .footer-bottom__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 24px; } .footer-copy { margin: 0; font-size: .78rem; color: var(--muted); } .footer-legal-menu { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; } .footer-legal-menu a { color: var(--muted); font-size: .78rem; } .footer-legal-menu a:hover { color: #fff; } .widget-title { font-size: 1.2rem; margin-bottom: 1rem; color: #fff; } /* ========================================================= REVEAL ========================================================= */ @keyframes nt-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } @keyframes nt-clip { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } html.ntc-js .reveal.is-visible { animation: nt-rise 1s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i,0) * .09s); } html.ntc-js .reveal-clip.is-visible { animation: nt-clip 1.1s cubic-bezier(.16,1,.3,1) both; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.ntc-js .reveal.is-visible, html.ntc-js .reveal-clip.is-visible { animation: none; } html.ntc-js .reveal-text .ln > span { transform: none !important; } .hero__media img, .cta-band__media img, .mesh-bg::before, .mesh-bg::after, .flowlines path, .marquee__track, .particles span, .hero__scroll span { animation: none !important; } } /* ========================================================= ANIMATED BACKGROUND FIELD (glyphs · particles · node forms) ========================================================= */ .chem-field { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: .54; } .chem-field--hero { position: absolute; z-index: 2; opacity: .85; } .chem-item { position: absolute; will-change: transform, opacity; opacity: var(--o,.5); animation: chem-bob var(--d,14s) ease-in-out var(--delay,0s) infinite alternate; } @keyframes chem-bob { from { transform: translateY(9px); } to { transform: translateY(-17px); } } .chem-el { width: clamp(52px,5vw,82px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); border-radius: 12px; background: linear-gradient(160deg, rgba(40,82,132,.24), rgba(10,22,40,.08)); display: grid; grid-template-rows: auto 1fr auto; padding: 7px 9px; color: #d4eeff; box-shadow: inset 0 0 28px color-mix(in srgb, var(--cyan) 14%, transparent), 0 0 34px color-mix(in srgb, var(--cyan) 7%, transparent); backdrop-filter: blur(1px); } .chem-el .num { font-family: var(--mono); font-size: .5rem; opacity: .72; line-height: 1; color: color-mix(in srgb, var(--violet) 85%, transparent); } .chem-el .sym { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem,1.8vw,1.8rem); text-align: center; align-self: center; line-height: 1; text-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 60%, transparent); } .chem-el .nm { font-family: var(--mono); font-size: .4rem; text-align: right; opacity: .6; text-transform: lowercase; letter-spacing: .02em; line-height: 1; } .chem-formula { font-family: var(--mono); font-weight: 500; font-size: clamp(.74rem,1.2vw,1.18rem); color: color-mix(in srgb, var(--violet) 52%, transparent); letter-spacing: 0; white-space: nowrap; text-shadow: 0 0 18px color-mix(in srgb, var(--violet) 40%, transparent); } .chem-mol { color: color-mix(in srgb, var(--cyan) 60%, transparent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cyan) 45%, transparent)); } .chem-mol svg { display: block; animation: nt-spin var(--spin,46s) linear infinite; } @media (prefers-reduced-motion: reduce) { .chem-item, .chem-mol svg { animation: none !important; } } @media (max-width: 620px) { .chem-field { opacity: .3; } .chem-field--hero { opacity: .6; } } /* ========================================================= FLOWING STREAMLINES + FLUID IMAGE MOTION ========================================================= */ /* flow-field canvas (glowing fluid streamlines, screen-blended) */ #fluid { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .92; } /* flowing light sweep over images */ .feature__media, .showcase__item, .about__media, .product-hero__visual { position: relative; } .feature__media::before, .showcase__item::before, .about__media::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 38%, rgba(46,230,255,.16) 47%, rgba(255,255,255,.24) 50%, rgba(46,230,255,.16) 53%, transparent 62%); transform: translateX(-130%) skewX(-12deg); animation: img-sweep 7s ease-in-out infinite; } .feature--reverse .feature__media::before { animation-delay: 1.4s; } .showcase__item:nth-child(2n)::before { animation-delay: 1.3s; } .showcase__item:nth-child(3n)::before { animation-delay: 2.6s; } @keyframes img-sweep { 0% { transform: translateX(-130%) skewX(-12deg); } 55%, 100% { transform: translateX(130%) skewX(-12deg); } } /* animated flowing-line overlay inside media */ .media-flow { position: absolute; inset: 0; z-index: 2; opacity: .55; pointer-events: none; } .media-flow path { fill: none; stroke: url(#ntFlow); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 12 20; animation: nt-flow 8s linear infinite; filter: drop-shadow(0 0 5px rgba(46,230,255,.55)); } .media-flow path:nth-child(2) { animation-duration: 12s; opacity: .7; } .media-flow path:nth-child(3) { animation-duration: 16s; opacity: .5; } /* keep product-card art alive (not only on hover) */ /* product-card art animated via .mol-* rules (see Product Cards section) */ /* reaction-equation ticker */ .marquee--rx { background: rgba(4,8,15,.5); } .marquee--rx .marquee__track { animation-duration: 48s; animation-direction: reverse; } .marquee--rx .marquee__track span { color: rgba(125,200,255,.62); font-size: 1.16rem; } .marquee--rx .marquee__track span::after { content: "\21CC"; color: var(--cyan); } /* interactive constellation canvas (cursor links to nearby items) */ #chemlink { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; mix-blend-mode: screen; } .chem-item { transition: opacity .35s, color .35s, box-shadow .35s, border-color .35s, text-shadow .35s, filter .35s; } .chem-item.lit { opacity: 1 !important; } .chem-el.lit { border-color: var(--cyan); box-shadow: inset 0 0 34px rgba(46,230,255,.35), 0 0 48px rgba(46,230,255,.45); } .chem-el.lit .sym { color: #eafdff; text-shadow: 0 0 26px rgba(46,230,255,.95); } .chem-el.lit .num, .chem-el.lit .nm { color: #d8f6ff; } .chem-formula.lit { color: #aef0ff; text-shadow: 0 0 26px rgba(46,230,255,.85); } .chem-mol.lit { color: var(--cyan); filter: drop-shadow(0 0 18px rgba(46,230,255,.9)); } @media (prefers-reduced-motion: reduce) { .feature__media::before, .showcase__item::before, .about__media::before, .media-flow path, .mol-rot, .mol-bond-flow, .mol-ring, .mol-atoms .atom { animation: none !important; } } /* ========================================================= REFINEMENT — cohesive grade · intro · statement · certs ========================================================= */ /* unify all photography with a cinematic grade (ties mismatched stock together) */ .hero__media img, .feature__media img, .showcase__item img, .about__media img, .cta-band__media img, .product-card__media img, .post-card__media img { filter: saturate(.72) contrast(1.07) brightness(.9); } .feature__media::after { background: linear-gradient(160deg, rgba(8,22,38,.2) 0%, transparent 38%, rgba(4,8,15,.55) 100%), linear-gradient(0deg, rgba(9,24,42,.3), rgba(9,24,42,.04)); } /* custom branded scrollbar */ html { scrollbar-width: thin; scrollbar-color: rgba(46,230,255,.45) rgba(255,255,255,.04); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #060d18; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2ee6ff, #6366f1); border-radius: 20px; border: 2px solid #060d18; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2ee6ff, #8b8cff); } /* page vignette for cinematic depth */ .vignette { position: fixed; inset: 0; z-index: 6; pointer-events: none; box-shadow: inset 0 0 260px 50px rgba(0,0,0,.5), inset 0 0 70px rgba(0,0,0,.35); } /* intro / preloader */ .intro { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(120% 100% at 50% 40%, #0a1626, #04080f 70%); display: grid; place-items: center; transition: opacity .9s ease, visibility .9s; } .intro.is-done { opacity: 0; visibility: hidden; } .intro__in { display: flex; flex-direction: column; align-items: center; gap: 22px; } .intro__mark { width: 66px; height: 66px; border-radius: 19px; background: var(--grad); display: grid; place-items: center; box-shadow: var(--glow-blue); animation: intro-pulse 1.7s ease-in-out infinite; } .intro__mark svg { width: 36px; height: 36px; } @keyframes intro-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 30px rgba(79,140,255,.4); } 50% { transform: scale(1.07); box-shadow: 0 0 64px rgba(46,230,255,.7); } } .intro__word { font-family: var(--display); font-weight: 700; letter-spacing: .36em; text-transform: uppercase; font-size: .84rem; color: #fff; opacity: 0; animation: intro-fade .8s ease .25s forwards; padding-left: .36em; } .intro__bar { width: 210px; height: 2px; background: rgba(255,255,255,.1); overflow: hidden; border-radius: 2px; } .intro__bar i { display: block; height: 100%; width: 0; background: var(--grad); box-shadow: var(--glow-cyan); animation: intro-load 1.35s cubic-bezier(.6,0,.2,1) forwards; } @keyframes intro-load { to { width: 100%; } } @keyframes intro-fade { to { opacity: 1; } } /* hero 3D node form */ .hero__mol { position: absolute; top: 50%; right: clamp(-60px, 1vw, 40px); transform: translateY(-50%); width: clamp(380px, 46vw, 760px); height: clamp(380px, 66vh, 720px); z-index: 2; pointer-events: none; } .mol-ui { position: absolute; right: clamp(20px, 4vw, 70px); bottom: clamp(96px, 14vh, 168px); z-index: 4; text-align: right; opacity: 0; animation: intro-fade 1s ease 1s forwards; } .mol-ui__label b { display: block; font-family: var(--display); font-size: 1.1rem; color: #fff; letter-spacing: .04em; } .mol-ui__label span { font-family: var(--display); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--cyan); } .mol-switch { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; } .mol-switch button { pointer-events: auto; cursor: none; font-family: var(--display); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: rgba(255,255,255,.72); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 100px; padding: 8px 14px; transition: .3s; } .mol-switch button:hover { color: #fff; border-color: var(--line-2); } .mol-switch button.is-active { background: var(--grad); color: #04080f; border-color: transparent; box-shadow: var(--glow-cyan); } @media (max-width: 980px) { .hero__mol { opacity: .3; right: -16%; } .mol-ui { display: none; } } /* big editorial statement */ .statement { position: relative; text-align: center; padding-block: clamp(90px,13vw,190px); } .statement__text { font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem,4vw,3.5rem); line-height: 1.22; letter-spacing: -.02em; max-width: 20ch; margin: 0 auto; color: #eef6ff; } .statement__text em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .statement__by { margin-top: 1.7rem; color: var(--muted); font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; } /* certifications strip */ .certs { border-block: 1px solid var(--line); background: rgba(7,15,28,.35); } .certs__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px,4vw,58px); padding-block: 32px; } .cert { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: rgba(255,255,255,.6); } .cert::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: var(--glow-cyan); flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .intro__mark, .intro__bar i { animation: none !important; } .intro__bar i { width: 100%; } } /* ========================================================= LANGUAGE TOGGLE · COMPARE · MODALS · HOTKEYS ========================================================= */ .lang-toggle { padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: #fff; font-family: var(--display); font-weight: 700; font-size: .66rem; letter-spacing: .04em; cursor: none; transition: border-color .25s, color .25s; } .lang-toggle:hover { border-color: var(--cyan); color: var(--cyan); } .lang-toggle span:nth-child(2) { display: none; } html.zh .lang-toggle span:nth-child(1) { display: none; } html.zh .lang-toggle span:nth-child(2) { display: inline; } .product-card__cmp { position: absolute; top: 14px; right: 14px; z-index: 3; font-family: var(--display); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #fff; background: rgba(4,8,15,.55); border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 11px; cursor: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: .25s; } .product-card__cmp::before { content: "+ "; } .product-card__cmp:hover { border-color: var(--cyan); color: var(--cyan); } .product-card.is-comparing .product-card__cmp { background: var(--grad); color: #04080f; border-color: transparent; } .product-card.is-comparing .product-card__cmp::before { content: "\2713 "; } .product-card__backfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; } .product-card__enquire { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; font-weight: 700; color: #04080f; background: var(--grad); border: 0; border-radius: 100px; padding: 8px 16px; cursor: none; } .cmp-bar { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 160%); z-index: 340; display: flex; align-items: center; gap: 16px; padding: 11px 14px 11px 22px; border-radius: 100px; background: rgba(10,18,30,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line-2); box-shadow: 0 24px 56px -22px rgba(0,0,0,.85); transition: transform .45s cubic-bezier(.2,.7,.2,1); } .cmp-bar.show { transform: translate(-50%, 0); } .cmp-bar__count { font-family: var(--display); font-size: .72rem; letter-spacing: .04em; color: #fff; } .cmp-bar__count b { color: var(--cyan); } .cmp-bar__btn { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-weight: 700; color: #04080f; background: var(--grad); border: 0; border-radius: 100px; padding: 11px 20px; cursor: none; } .cmp-bar__clear { background: none; border: 0; color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; cursor: none; } .cmp-bar__clear:hover { color: #fff; } .modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; } .modal.show { opacity: 1; visibility: visible; } .modal__scrim { position: absolute; inset: 0; background: rgba(4,8,15,.66); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); } .modal__box { position: relative; z-index: 2; width: min(720px, 94vw); max-height: 88vh; overflow: auto; background: linear-gradient(160deg, rgba(18,32,52,.92), rgba(8,14,24,.96)); border: 1px solid var(--line-2); border-radius: 24px; padding: clamp(24px,4vw,40px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 40px 90px -30px rgba(0,0,0,.85); transform: translateY(16px) scale(.98); transition: transform .4s cubic-bezier(.16,1,.3,1); } .modal.show .modal__box { transform: none; } .modal__close { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 1.9rem; line-height: 1; cursor: none; z-index: 3; } .modal__title { font-size: clamp(1.4rem,2.6vw,2rem); color: #fff; margin: 0 0 .4rem; } .modal__sub { color: var(--muted); margin: 0 0 1.6rem; font-size: .92rem; } .iform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .iform .full { grid-column: 1 / -1; } .iform label { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; color: var(--muted); margin-bottom: 6px; } .iform input, .iform textarea { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: #fff; font-family: var(--body-f); font-size: .95rem; } .iform input:focus, .iform textarea:focus { outline: none; border-color: var(--cyan); } .iform textarea { min-height: 92px; resize: vertical; } .iform .btn { grid-column: 1 / -1; } .iform__ok { text-align: center; padding: 26px 0; } .iform__ok b { display: block; font-family: var(--display); font-size: 1.4rem; color: #fff; margin-bottom: .5rem; } .cmp-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .cmp-table th, .cmp-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .cmp-table thead th { color: #fff; font-family: var(--display); font-size: .92rem; } .cmp-table tbody th { color: var(--muted); font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .6rem; white-space: nowrap; } .cmp-table td { color: #dfe9f3; } .help__list { display: grid; gap: 4px; } .help__row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); } .help__row em { color: var(--body); font-size: .92rem; font-style: normal; } .kbd { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); font-family: var(--display); font-size: .72rem; font-weight: 600; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); } @media (max-width: 560px) { .iform { grid-template-columns: 1fr; } .cmp-bar { width: calc(100% - 28px); justify-content: space-between; padding-left: 18px; } } /* ========================================================= GLASSMORPHISM — frosted panels + light-edge borders ========================================================= */ .product-card, .bento-cell, .product-aside { background: linear-gradient(150deg, rgba(150, 195, 245, .14), rgba(40, 62, 95, .04) 34%, rgba(8, 15, 28, .16)); -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.08); backdrop-filter: blur(40px) saturate(200%) brightness(1.08); border: 1px solid rgba(200, 230, 255, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .08), 0 36px 72px -44px rgba(0, 0, 0, .82); } /* refractive glass edge — bright top-left rim, like light on a glass pane */ .product-card::after, .bento-cell::after, .product-aside::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 6; pointer-events: none; opacity: 1; background: linear-gradient(142deg, rgba(255, 255, 255, .95) 0%, rgba(180, 220, 255, .35) 24%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 72%, rgba(46, 230, 255, .28) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* soft glass sheen sweeping across the card surface */ .product-card__front::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(122deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(170,215,255,.06) 100%); } .product-card:hover, .bento-cell:hover { background: rgba(20, 33, 53, .55); border-color: rgba(255, 255, 255, .2); } .product-aside { background: rgba(17, 30, 50, .6); } /* media / image cells stay opaque (no blur over photos) */ .product-card__media, .bento--img { -webkit-backdrop-filter: none; backdrop-filter: none; } /* flipped specs sit on a translucent panel that reveals the card's frost */ .product-card__back { background: linear-gradient(160deg, rgba(22, 40, 62, .5), rgba(8, 15, 26, .42)); } /* a crisper frosted edge highlight on the prime panels */ .bento-cell::after, .product-aside::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .7; } /* refresh other glass surfaces */ .about__badge, .feature__index, .product-card__tag, .filter-tab, .demo-btn, .demo-badge, .newsletter, .yacht-pricecard, .cmp-bar, .modal__box, .lang-toggle { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } .filter-tab { background: rgba(255, 255, 255, .04); } /* low-end devices: drop the blur, keep readable solid panels */ html.low .product-card, html.low .bento-cell, html.low .product-aside, html.low .about__badge, html.low .feature__index, html.low .product-card__tag, html.low .filter-tab, html.low .demo-btn, html.low .demo-badge, html.low .newsletter { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.low .product-card, html.low .bento-cell, html.low .product-aside { background: rgba(12, 22, 38, .92); } /* ========================================================= TRADE-SHOW DEMO MODE (auto-tour) ========================================================= */ .demo-btn { position: fixed; left: 22px; bottom: 22px; z-index: 350; pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #fff; background: rgba(8,16,28,.6); border: 1px solid var(--line-2); border-radius: 100px; padding: 11px 18px; backdrop-filter: blur(10px); transition: border-color .3s, color .3s; } .demo-btn:hover, body.demo-on .demo-btn { border-color: var(--cyan); color: var(--cyan); } .demo-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: var(--glow-cyan); } .demo-badge { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 350; pointer-events: none; font-family: var(--display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); background: rgba(8,16,28,.55); border: 1px solid var(--line); border-radius: 100px; padding: 7px 16px; opacity: 0; transition: opacity .5s; } body.demo-on .demo-badge { opacity: 1; } .demo-caption { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%) translateY(12px); z-index: 350; pointer-events: none; text-align: center; opacity: 0; transition: opacity .6s, transform .6s; max-width: 80vw; } .demo-caption.show { opacity: 1; transform: translateX(-50%) translateY(0); } .demo-caption span { display: block; font-family: var(--display); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; } .demo-caption b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem,2.6vw,2rem); color: #fff; } .demo-cursor { position: fixed; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cyan); box-shadow: var(--glow-cyan); z-index: 360; pointer-events: none; opacity: 0; transform: translate(-50%,-50%); transition: opacity .3s; } body.demo-on .demo-cursor { opacity: 1; } body.demo-on .cursor-dot, body.demo-on .cursor-ring { display: none; } @media (max-width: 720px) { .demo-btn { left: 14px; bottom: 14px; } .demo-caption { bottom: 54px; } } /* ========================================================= HUD — lab-instrument framing ========================================================= */ .hud { position: fixed; inset: 16px; z-index: 7; pointer-events: none; } .hud b { position: absolute; width: 20px; height: 20px; } .hud b::before, .hud b::after { content: ""; position: absolute; background: rgba(46,230,255,.4); } .hud b::before { width: 100%; height: 1px; } .hud b::after { width: 1px; height: 100%; } .hud b:nth-child(1) { top: 0; left: 0; } .hud b:nth-child(1)::before, .hud b:nth-child(1)::after { top: 0; left: 0; } .hud b:nth-child(2) { top: 0; right: 0; } .hud b:nth-child(2)::before { top: 0; right: 0; } .hud b:nth-child(2)::after { top: 0; right: 0; } .hud b:nth-child(3) { bottom: 0; left: 0; } .hud b:nth-child(3)::before { bottom: 0; left: 0; } .hud b:nth-child(3)::after { bottom: 0; left: 0; } .hud b:nth-child(4) { bottom: 0; right: 0; } .hud b:nth-child(4)::before { bottom: 0; right: 0; } .hud b:nth-child(4)::after { bottom: 0; right: 0; } .hud__tag { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 7; pointer-events: none; font-family: var(--display); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(140,200,255,.45); } .hud__scan { position: fixed; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(46,230,255,.35), transparent); z-index: 7; pointer-events: none; opacity: 0; animation: hud-scan 9s linear infinite; } @keyframes hud-scan { 0% { top: 0; opacity: 0; } 6% { opacity: .7; } 80% { opacity: .5; } 100% { top: 100%; opacity: 0; } } @media (max-width: 720px) { .hud, .hud__tag { display: none; } } @media (prefers-reduced-motion: reduce) { .hud__scan { display: none; } } /* ========================================================= BENTO GRID ========================================================= */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, 1fr); gap: 16px; grid-template-areas: "a a b img" "a a d img" "e f f img"; } .bento--a { grid-area: a; } .bento--b { grid-area: b; } .bento--d { grid-area: d; } .bento--img { grid-area: img; } .bento--e { grid-area: e; } .bento--f { grid-area: f; } .bento-cell { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); padding: 26px; display: flex; flex-direction: column; transition: border-color .4s, background .4s, transform .4s; } .bento-cell:hover { border-color: var(--line-2); background: var(--panel-2); } .bento-cell .cap__icon { width: 50px; height: 50px; border-radius: 14px; margin-bottom: 16px; } .bento__title { font-size: 1.3rem; color: #fff; margin: 0 0 .5rem; } .bento__text { color: var(--body); font-size: .95rem; margin: 0; } .bento--a { padding: 36px; justify-content: space-between; } .bento--a .bento__title { font-size: clamp(1.6rem, 2.4vw, 2.3rem); } .bento__head { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 2; } .bento__head .cap__icon { margin-bottom: 0; } .bento__tag { font-family: var(--display); font-weight: 700; font-size: 2.2rem; color: rgba(255,255,255,.07); line-height: 1; } .bento__body { position: relative; z-index: 2; } .bento__deco { position: absolute; right: -8%; top: -16%; width: 64%; opacity: .55; pointer-events: none; z-index: 0; } .bento__deco .product-card__mol { position: static; display: block; } .bento__deco .mol-svg { width: 100%; } .bento--img { padding: 0; } .bento--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.07) brightness(.88); } .bento--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,8,15,.92), transparent 55%); z-index: 1; } .bento--img figcaption { position: relative; z-index: 2; margin-top: auto; padding: 26px; } .bento--img figcaption span { color: var(--cyan); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-family: var(--display); } .bento--img figcaption b { display: block; font-family: var(--display); font-size: 1.4rem; color: #fff; margin-top: 4px; } .bento--stat { align-items: center; justify-content: center; text-align: center; } .bento--stat b { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1; } .bento--stat b .grad-text, .bento--stat b { background: linear-gradient(120deg,#7df7ff,#8b8cff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bento--stat span { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; margin-top: 12px; -webkit-text-fill-color: initial; } @media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b d" "img img" "e f"; grid-auto-rows: minmax(150px, auto); } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "d" "img" "e" "f"; } } /* ========================================================= CUTTING-EDGE — view transitions · @property · 3D tilt · scroll-driven ========================================================= */ /* Cross-document View Transitions (Chrome 126+): pages morph on navigation */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out .42s cubic-bezier(.4,0,.2,1) both; } ::view-transition-new(root) { animation: vt-in .55s cubic-bezier(.16,1,.3,1) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-16px) scale(.99); filter: blur(4px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(18px) scale(1.01); filter: blur(4px); } } .site-header { view-transition-name: site-header; } /* @property registered angle → smoothly animatable conic gradients */ @property --ang { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes ang-spin { to { --ang: 360deg; } } .product-card::before { background: conic-gradient(from var(--ang), #2ee6ff, #6366f1, #b87bff, #2ee6ff); } .product-card:hover::before { animation: ang-spin 4s linear infinite; } .product-hero__visual::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang), rgba(46,230,255,.85), rgba(99,102,241,.5), rgba(184,123,255,.85), rgba(46,230,255,.85)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ang-spin 6s linear infinite; pointer-events: none; z-index: 4; } /* 3D tilt + glare */ [data-tilt] { will-change: transform; } .tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; mix-blend-mode: screen; background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(140,225,255,.28), transparent 46%); z-index: 6; } [data-tilt]:hover .tilt-glare { opacity: 1; } /* Native CSS scroll-driven progress (no JS where supported) */ @supports (animation-timeline: scroll()) { .scroll-progress { animation: sp-grow linear both; animation-timeline: scroll(root block); } @keyframes sp-grow { to { transform: scaleX(1); } } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } .product-card:hover::before, .product-hero__visual::before { animation: none !important; } } /* ========================================================= INNER-GLOW BORDERS (neon rim from within) ========================================================= */ .product-card, .bento-cell, .product-aside { border-color: rgba(46,230,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(46,230,255,.12), inset 0 0 38px rgba(46,230,255,.2), 0 32px 64px -44px rgba(0,0,0,.8); } .product-card:hover, .bento-cell:hover { border-color: rgba(46,230,255,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(46,230,255,.5), inset 0 0 64px rgba(46,230,255,.5), 0 0 30px rgba(46,230,255,.35), 0 44px 84px -44px rgba(0,0,0,.85); } .product-card.is-comparing { border-color: rgba(46,230,255,.6); box-shadow: inset 0 0 38px rgba(46,230,255,.32), 0 0 0 1px rgba(46,230,255,.55), 0 32px 64px -44px rgba(0,0,0,.8); } .modal__box { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 50px rgba(46,230,255,.1), 0 40px 90px -30px rgba(0,0,0,.85); } .cmp-bar { box-shadow: inset 0 0 26px rgba(46,230,255,.16), 0 24px 56px -22px rgba(0,0,0,.85); } .product-hero__visual { box-shadow: inset 0 0 46px rgba(46,230,255,.14), 0 50px 90px -40px rgba(0,0,0,.85); } .about__badge, .feature__index, .product-card__tag { box-shadow: inset 0 0 18px rgba(46,230,255,.2), 0 8px 24px -10px rgba(0,0,0,.6); } .btn--ghost:hover, .btn--dark:hover, .filter-tab:hover, .lang-toggle:hover { box-shadow: inset 0 0 22px rgba(46,230,255,.28), 0 0 26px rgba(46,230,255,.4); } .search-overlay .search-form, .newsletter { box-shadow: inset 0 0 24px rgba(46,230,255,.08); } .iform input:focus, .iform textarea:focus { box-shadow: inset 0 0 20px rgba(46,230,255,.2); } .cap__icon, .brand__mark { box-shadow: 0 14px 30px -10px rgba(59,130,246,.6), inset 0 0 16px rgba(255,255,255,.35); } .mol-switch button.is-active { box-shadow: inset 0 0 16px rgba(255,255,255,.5), var(--glow-cyan); } .site-header.is-scrolled { box-shadow: inset 0 -1px 0 rgba(46,230,255,.12), 0 1px 0 var(--line), 0 24px 50px -30px rgba(0,0,0,.8); } /* a gentle breathing inner glow on the hero node-form frame & selected cards */ @keyframes inner-pulse { 0%,100% { box-shadow: inset 0 0 38px rgba(46,230,255,.28), 0 0 0 1px rgba(46,230,255,.5), 0 32px 64px -44px rgba(0,0,0,.8); } 50% { box-shadow: inset 0 0 54px rgba(46,230,255,.42), 0 0 0 1px rgba(46,230,255,.7), 0 32px 64px -44px rgba(0,0,0,.8); } } .product-card.is-comparing { animation: inner-pulse 2.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .product-card.is-comparing { animation: none; } } html.low .product-card:hover, html.low .bento-cell:hover { box-shadow: inset 0 0 30px rgba(46,230,255,.18), 0 0 0 1px rgba(46,230,255,.3); } /* ========================================================= REFINED PRODUCT CARDS ========================================================= */ .product-card { border-radius: 24px; } .product-card__media { background: radial-gradient(125% 120% at 32% 6%, rgba(52, 100, 162, .55), #070e1b 72%); } .product-card__mol svg { filter: drop-shadow(0 0 16px rgba(46, 230, 255, .45)); } .product-card__body { padding: 24px 24px 26px; } .product-card__cas { letter-spacing: .14em; opacity: .92; } .product-card__name { letter-spacing: -.012em; } .product-card__name a { transition: color .25s; } .product-card__desc { line-height: 1.55; } .product-card__foot { border-top: 0; position: relative; padding-top: 1.1rem; margin-top: 1.05rem; } .product-card__foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(180, 220, 255, .18), transparent); } .product-card__cmp { top: 13px; right: 13px; font-size: .54rem; padding: 5px 11px; background: rgba(8, 14, 24, .5); } .product-card__tag { top: 13px; left: 13px; letter-spacing: .16em; } .product-card__chip { font-size: .68rem; letter-spacing: .02em; } .product-card__flipbtn { font-size: .6rem; padding: 6px 13px; } /* refined hover: a cleaner lift, brighter glass */ .product-card:hover .product-card__media img { transform: scale(1.06); } .product-card:hover .product-card__name a { color: #eafdff; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1024px) { body { cursor: auto; } .cursor-dot, .cursor-ring { display: none; } .primary-nav, .header-cta { display: none; } .nav-toggle { display: flex; } .feature { grid-template-columns: 1fr; gap: 32px; } .feature--reverse .feature__media { order: 0; } .about { grid-template-columns: 1fr; } .stats__grid { grid-template-columns: repeat(2,1fr); row-gap: 40px; } .stat:nth-child(odd)::before { display: none; } .cap-grid { grid-template-columns: 1fr 1fr; } .product-hero__inner, .product-body { grid-template-columns: 1fr; } .product-aside { position: static; } .footer-main__grid { grid-template-columns: 1fr 1fr; } .post-card { grid-template-columns: 1fr; } .showcase { height: auto; } .showcase__sticky { position: relative; height: auto; padding-block: var(--section); } .showcase__track { overflow-x: auto; } .showcase__head { position: static; margin-bottom: 30px; } } @media (max-width: 620px) { body { font-size: 16px; } .section-head { flex-direction: column; align-items: flex-start; } .cap-grid { grid-template-columns: 1fr; } .stats__grid { grid-template-columns: 1fr 1fr; } .footer-main__grid { grid-template-columns: 1fr 1fr; } .topbar__text { display: none; } .stat::before { display: none !important; } } /* ============================================================ Mobile polish — declutter decoration + contain width ============================================================ */ @media (max-width: 900px) { /* Belt-and-suspenders horizontal-overflow guard. */ html { overflow-x: hidden; } /* The mesh backdrop bleeds -8% + scale(1.1) beyond the hero; on phones that bleed pushed body content past the viewport. Pin it flush on small screens (descendant selector so it wins over the base .mesh-bg rule). */ .page-hero .mesh-bg, .cta-band .mesh-bg { inset: 0; transform: none; } /* The page-wide floating "chem" field sits behind every section; on a narrow screen its words land on top of the text. Keep only the hero's field. */ .chem-field[data-chem="global"] { display: none; } .orb { opacity: .3; } /* Stop the (hidden) full-screen search overlay's wide input from forcing a layout wider than the viewport (which drifts the header off-edge). */ .search-overlay { overflow: hidden; } .search-overlay__inner { width: 100%; max-width: 100%; padding-inline: clamp(20px,6vw,40px); box-sizing: border-box; } .search-overlay .search-form, .search-overlay .search-form__field { width: 100%; max-width: 100%; box-sizing: border-box; } } @media (max-width: 600px) { /* Dim the hero field so the headline stays crisp on small screens. */ .chem-field--hero { opacity: .34; } /* Long unbroken tokens (URLs, code, CamelCase) must wrap, never overflow. */ .prose, .post-card__excerpt, .page-hero__desc, .about__body, .feature__body, .entry-content, .comment-text { overflow-wrap: break-word; word-break: break-word; } /* Guard: media and embeds never exceed the column. */ img, svg, video, iframe, .wp-block-embed { max-width: 100%; height: auto; } .page-hero__title { font-size: clamp(2rem, 9vw, 3rem); } } /* ============================================================ Kinetix — blog components (topics grid, hero label, cards) ============================================================ */ /* Hero static label badge over the 3D node form. */ .mol-ui--static .mol-ui__label b { font-family: var(--display); } .mol-ui--static .mol-ui__label span { font-family: var(--mono); letter-spacing: .04em; } /* Topics section background. */ .topics { position: relative; } .topics > .container { position: relative; z-index: 2; } /* Top-categories grid — exquisite glass cards with code aesthetic. */ .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .topic-card { --ring: rgba(94,226,154,.5); position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 22px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(1.08); backdrop-filter: blur(22px) saturate(160%) brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 24px rgba(46,230,255,.05), 0 18px 40px -28px rgba(0,0,0,.8); color: var(--ink); overflow: hidden; transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .5s, background .5s; transform-style: preserve-3d; } .topic-card::before { /* rotating conic-gradient border, revealed on hover (modern @property animation) */ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ntc-spin, 0deg), transparent 0deg, var(--cyan) 70deg, transparent 150deg, transparent 210deg, var(--indigo) 290deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .5s; pointer-events: none; } .topic-card::after { /* light that follows the cursor inside the card */ content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(280px 220px at var(--mx,50%) var(--my,0%), rgba(46,230,255,.18), transparent 60%); background: radial-gradient(280px 220px at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--cyan) 22%, transparent), transparent 60%); opacity: 0; transition: opacity .45s; pointer-events: none; } .topic-card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 30px rgba(46,230,255,.10), 0 30px 60px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(46,230,255,.10); } .topic-card:hover::before { opacity: 1; animation: ntc-spin360 4.5s linear infinite; } .topic-card:hover::after { opacity: 1; } .topic-card__icon { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--cyan); background: linear-gradient(160deg, rgba(46,230,255,.16), rgba(91,140,255,.06)); border: 1px solid rgba(46,230,255,.26); box-shadow: inset 0 0 18px rgba(46,230,255,.14); transition: transform .5s, color .4s; } .topic-card__icon svg { width: 26px; height: 26px; } .topic-card:nth-child(3n+2) .topic-card__icon { color: var(--indigo); background: linear-gradient(160deg, rgba(139,92,246,.18), rgba(192,132,252,.05)); border-color: rgba(139,92,246,.3); box-shadow: inset 0 0 18px rgba(139,92,246,.16); } .topic-card:nth-child(3n+3) .topic-card__icon { color: var(--green); background: linear-gradient(160deg, rgba(52,226,154,.16), rgba(46,230,255,.04)); border-color: rgba(52,226,154,.28); box-shadow: inset 0 0 18px rgba(52,226,154,.14); } .topic-card:hover .topic-card__icon { transform: scale(1.06) translateZ(20px); } .topic-card__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .topic-card__name { font-family: var(--display); font-weight: 600; font-size: 1.16rem; letter-spacing: -.01em; line-height: 1.1; } .topic-card__count { font-family: var(--mono); font-size: .74rem; color: var(--muted); letter-spacing: .01em; } .topic-card__arrow { margin-left: auto; font-size: 1.2rem; color: var(--muted); transform: translateX(-4px); opacity: .5; transition: transform .45s cubic-bezier(.2,.7,.2,1), color .4s, opacity .4s; } .topic-card:hover .topic-card__arrow { transform: translateX(2px); color: var(--cyan); opacity: 1; } html.low .topic-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg2); } /* Latest-article cards: foot row (date + read-more). */ .product-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; gap: 12px; } .product-card__chip { font-family: var(--mono); font-size: .76rem; color: var(--muted); letter-spacing: 0; } .product-card__readmore { font-family: var(--display); font-weight: 600; font-size: .82rem; color: var(--cyan); white-space: nowrap; transition: color .3s, transform .3s; } .product-card:hover .product-card__readmore { color: #9bf0ff; transform: translateX(2px); } .topic-card, .product-card__readmore { cursor: none; } /* ============================================================ Tech card art — animated programming graphics (no-thumbnail fallback) ============================================================ */ .product-card__mol .card-art { width: 86%; height: auto; overflow: visible; } .card-art.acc-c { color: #5fe6ff; --gl: rgba(46,230,255,.75); } .card-art.acc-v { color: #b58bff; --gl: rgba(167,139,250,.82); } .card-art.acc-g { color: #5ee29a; --gl: rgba(52,226,154,.78); } .card-art .ca-panel { fill: rgba(10,18,32,.55); stroke: rgba(255,255,255,.15); stroke-width: 1.4; } .card-art .ca-divider { stroke: rgba(255,255,255,.12); stroke-width: 1.2; } .card-art .ca-dot { fill: currentColor; opacity: .78; } .card-art .ca-line { fill: currentColor; opacity: .9; transform-box: fill-box; transform-origin: left center; animation: ca-type 3.6s ease-in-out infinite; filter: drop-shadow(0 0 4px var(--gl)); } .card-art .ca-line.dim { opacity: .42; color: #9fb2cf; filter: none; } .card-art .ca-line.l2 { animation-delay: .45s; } .card-art .ca-line.l3 { animation-delay: .9s; } .card-art .ca-line.l4 { animation-delay: 1.35s; } .card-art .ca-line.l5 { animation-delay: 1.7s; } .card-art .ca-line.l6 { animation-delay: 2.1s; } @keyframes ca-type { 0%, 7% { transform: scaleX(.06); opacity: .25; } 16%, 88% { transform: scaleX(1); opacity: .92; } 100% { transform: scaleX(1); opacity: .92; } } .card-art .ca-caret { fill: currentColor; filter: drop-shadow(0 0 5px var(--gl)); animation: ca-blink 1s steps(1) infinite; } .card-art .ca-cursor { fill: currentColor; filter: drop-shadow(0 0 6px var(--gl)); animation: ca-blink 1.1s steps(1) infinite; } @keyframes ca-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .card-art .ca-pmt { fill: currentColor; font: 700 16px/1 var(--mono); } .card-art .ca-float { transform-box: fill-box; transform-origin: center; animation: ca-float 6s ease-in-out infinite; } @keyframes ca-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .card-art .ca-chip { fill: rgba(10,18,32,.6); stroke: currentColor; stroke-width: 1.8; filter: drop-shadow(0 0 9px var(--gl)); } .card-art .ca-core { fill: currentColor; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 9px var(--gl)); animation: ca-pulse 2.4s ease-in-out infinite; } @keyframes ca-pulse { 0%, 100% { transform: scale(.82); opacity: .82; } 50% { transform: scale(1.12); opacity: 1; } } .card-art .ca-trace { stroke: rgba(255,255,255,.2); stroke-width: 2; } .card-art .ca-node { fill: currentColor; opacity: .85; filter: drop-shadow(0 0 5px var(--gl)); } .card-art .ca-flow line { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 12; filter: drop-shadow(0 0 5px var(--gl)); animation: ca-traceflow 1.8s linear infinite; } @keyframes ca-traceflow { to { stroke-dashoffset: -28; } } .card-art .ca-circuit { transform-box: fill-box; transform-origin: center; animation: ca-float 7s ease-in-out infinite; } .card-art .ca-brace { fill: currentColor; font: 700 64px/1 var(--mono); text-anchor: middle; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 8px var(--gl)); } .card-art .ca-brace.bl { animation: ca-braceL 3s ease-in-out infinite; } .card-art .ca-brace.br { animation: ca-braceR 3s ease-in-out infinite; } @keyframes ca-braceL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } } @keyframes ca-braceR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } } .card-art .ca-orb { fill: currentColor; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 5px var(--gl)); } .card-art .ca-orb.o1 { animation: ca-orb1 4s ease-in-out infinite; } .card-art .ca-orb.o2 { animation: ca-orb2 5s ease-in-out infinite; } .card-art .ca-orb.o3 { animation: ca-orb3 4.5s ease-in-out infinite; } @keyframes ca-orb1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } } @keyframes ca-orb2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-6px,-5px); } } @keyframes ca-orb3 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(5px,-6px); } } .card-art .ca-mid { fill: currentColor; font: 700 27px/1 var(--mono); text-anchor: middle; filter: drop-shadow(0 0 8px var(--gl)); } .card-art .ca-tag { fill: currentColor; font: 700 12px/1 var(--mono); text-anchor: end; opacity: .92; filter: drop-shadow(0 0 5px var(--gl)); } .product-card:hover .card-art .ca-core { animation-duration: 1.3s; } .product-card:hover .card-art .ca-flow line { animation-duration: 1s; } /* --- additional archetypes: git · neural · binary · database · equalizer · analytics --- */ .card-art .ca-flow.ca-flow-p path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 12; filter: drop-shadow(0 0 5px var(--gl)); animation: ca-traceflow 1.8s linear infinite; } .card-art .ca-beat { transform-box: fill-box; transform-origin: center; animation: ca-beat 2.2s ease-in-out infinite; } @keyframes ca-beat { 0%, 100% { transform: scale(.78); opacity: .72; } 50% { transform: scale(1.18); opacity: 1; } } .card-art .ca-netlinks line { stroke: currentColor; stroke-width: 1; opacity: .22; } .card-art .ca-pnode { fill: currentColor; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px var(--gl)); animation: ca-beat 2.4s ease-in-out infinite; } .card-art .ca-bin { fill: currentColor; font: 700 17px/1 var(--mono); text-anchor: middle; opacity: .15; filter: drop-shadow(0 0 4px var(--gl)); animation: ca-binflow 2.6s ease-in-out infinite; } @keyframes ca-binflow { 0%, 100% { opacity: .1; } 50% { opacity: .9; } } .card-art .ca-cyl { fill: rgba(10,18,32,.5); stroke: currentColor; stroke-width: 1.9; filter: drop-shadow(0 0 7px var(--gl)); } .card-art .ca-cyl.ca-cyl-line { fill: none; stroke-width: 1.4; opacity: .7; } .card-art .ca-wbar { fill: currentColor; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 5px var(--gl)); animation: ca-eq 1.1s ease-in-out infinite; } @keyframes ca-eq { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1.5); } } .card-art .ca-abar { fill: currentColor; opacity: .55; transform-box: fill-box; transform-origin: 50% 100%; animation: ca-grow 2.4s ease-out infinite; } @keyframes ca-grow { 0% { transform: scaleY(0); } 38%, 100% { transform: scaleY(1); } } .card-art .ca-axis { stroke: rgba(255,255,255,.16); stroke-width: 1.5; } .card-art .ca-trend { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--gl)); stroke-dasharray: 320; stroke-dashoffset: 320; animation: ca-draw 2.8s ease-out infinite; } @keyframes ca-draw { 0% { stroke-dashoffset: 320; } 55%, 100% { stroke-dashoffset: 0; } } .product-card:hover .card-art .ca-pnode, .product-card:hover .card-art .ca-beat { animation-duration: 1.4s; } .product-card:hover .card-art .ca-wbar { animation-duration: .7s; } /* --- archetypes 10-15: sine · progress ring · code diff · pods · radar · wireframe cube --- */ .card-art .ca-sine { fill: none; stroke: currentColor; stroke-width: 2; opacity: .35; } .card-art .ca-sine-flow { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 4 11; filter: drop-shadow(0 0 5px var(--gl)); animation: ca-traceflow 1.4s linear infinite; } .card-art .ca-ring-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 8; } .card-art .ca-ring { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 276; stroke-dashoffset: 276; filter: drop-shadow(0 0 6px var(--gl)); animation: ca-ringfill 3s ease-in-out infinite; } @keyframes ca-ringfill { 0% { stroke-dashoffset: 276; } 55%, 100% { stroke-dashoffset: 74; } } .card-art .ca-diffrow.add { fill: rgba(52,226,154,.1); } .card-art .ca-diffrow.del { fill: rgba(255,107,107,.1); } .card-art .ca-diff { font: 700 14px/1 var(--mono); } .card-art .ca-diff.add { fill: #34e29a; } .card-art .ca-diff.del { fill: #ff6b6b; } .card-art .ca-line.add { fill: rgba(52,226,154,.62); } .card-art .ca-line.del { fill: rgba(255,107,107,.55); } .card-art .ca-pod { transform-box: fill-box; transform-origin: center; animation: ca-pod 2.6s ease-in-out infinite; } .card-art .ca-pod rect { fill: rgba(10,18,32,.5); stroke: currentColor; stroke-width: 1.4; } .card-art .ca-pod circle { fill: currentColor; filter: drop-shadow(0 0 4px var(--gl)); } @keyframes ca-pod { 0%, 100% { opacity: .32; } 50% { opacity: 1; } } .card-art .ca-radar-ring { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.2; } .card-art .ca-radar-sweep { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--gl)); transform-box: view-box; transform-origin: 120px 90px; animation: nt-spin 2.6s linear infinite; } .card-art .ca-cube { transform-box: fill-box; transform-origin: center; animation: ca-tumble 7s ease-in-out infinite; } .card-art .ca-edge { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--gl)); } .card-art .ca-edge-back { opacity: .4; } @keyframes ca-tumble { 0%, 100% { transform: rotate(-5deg) scale(.95); } 50% { transform: rotate(5deg) scale(1); } } /* --- archetypes 16-21: browser · cloud · shield · json-tree · binary-tree · phone --- */ .card-art .ca-urlbar { fill: rgba(255,255,255,.08); } .card-art .ca-cloudpath { fill: none; stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 0 6px var(--gl)); } .card-art .ca-shield { fill: currentColor; fill-opacity: .08; stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 0 7px var(--gl)); } .card-art .ca-check { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--gl)); stroke-dasharray: 72; stroke-dashoffset: 72; animation: ca-check 2.6s ease-out infinite; } @keyframes ca-check { 0% { stroke-dashoffset: 72; } 55%, 100% { stroke-dashoffset: 0; } } .card-art .ca-colon { fill: currentColor; font: 700 13px/1 var(--mono); opacity: .6; } .card-art .ca-pmt.ca-sm { font-size: 13px; } .card-art .ca-phone { fill: rgba(10,18,32,.5); stroke: currentColor; stroke-width: 1.8; filter: drop-shadow(0 0 7px var(--gl)); } .card-art .ca-phone-notch { fill: currentColor; opacity: .5; } /* --- archetypes 22-29: gauge · server-rack · globe · hex-mesh · donut · layers · rocket · atom --- */ .card-art .ca-gauge-bg { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 9; stroke-linecap: round; } .card-art .ca-gauge-arc { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--gl)); stroke-dasharray: 220; stroke-dashoffset: 220; animation: ca-draw 3s ease-out infinite; } .card-art .ca-tick { stroke: rgba(255,255,255,.32); stroke-width: 2; stroke-linecap: round; } .card-art .ca-needle { stroke: currentColor; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--gl)); transform-box: view-box; transform-origin: 120px 124px; animation: ca-needle 3.2s cubic-bezier(.5,0,.5,1) infinite; } @keyframes ca-needle { 0%, 100% { transform: rotate(-58deg); } 50% { transform: rotate(56deg); } } .card-art .ca-led { fill: currentColor; filter: drop-shadow(0 0 5px var(--gl)); animation: ca-led 1.5s steps(1) infinite; } @keyframes ca-led { 0%, 42% { opacity: 1; } 42.01%, 100% { opacity: .16; } } .card-art .ca-slot { fill: currentColor; opacity: .24; } .card-art .ca-globe { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .42; } .card-art .ca-globe.ca-globe-edge { opacity: .72; stroke-width: 1.8; filter: drop-shadow(0 0 6px var(--gl)); } .card-art .ca-orbit { transform-box: view-box; transform-origin: 120px 90px; animation: nt-spin 7s linear infinite; } .card-art .ca-hex { fill: rgba(10,18,32,.5); stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--gl)); transform-box: fill-box; transform-origin: center; animation: ca-hexpulse 2.8s ease-in-out infinite; } @keyframes ca-hexpulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } .card-art .ca-dseg { fill: none; stroke: currentColor; stroke-width: 14; filter: drop-shadow(0 0 5px var(--gl)); } .card-art .ca-dseg.s1 { stroke-dasharray: 113 139; } .card-art .ca-dseg.s2 { stroke-dasharray: 80 172; stroke-dashoffset: -113; opacity: .6; } .card-art .ca-dseg.s3 { stroke-dasharray: 58 194; stroke-dashoffset: -193; opacity: .38; } .card-art .ca-donut { transform-box: view-box; transform-origin: 120px 90px; animation: nt-spin 9s linear infinite; } .card-art .ca-layer { fill: rgba(10,18,32,.5); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--gl)); transform-box: fill-box; transform-origin: center; animation: ca-layerfloat 3.4s ease-in-out infinite; } @keyframes ca-layerfloat { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-3px); opacity: 1; } } .card-art .ca-rocket { transform-box: fill-box; transform-origin: center; animation: ca-rocketbob 3.2s ease-in-out infinite; } @keyframes ca-rocketbob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-6px); } } .card-art .ca-rbody { fill: rgba(10,18,32,.6); stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--gl)); } .card-art .ca-rfin { fill: currentColor; opacity: .55; } .card-art .ca-flame { fill: currentColor; transform-box: fill-box; transform-origin: top center; filter: drop-shadow(0 0 9px var(--gl)); animation: ca-flame .34s ease-in-out infinite alternate; } @keyframes ca-flame { 0% { transform: scaleY(.65) scaleX(.88); opacity: .6; } 100% { transform: scaleY(1.15); opacity: .95; } } .card-art .ca-aorbit { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .5; filter: drop-shadow(0 0 5px var(--gl)); } .card-art .ca-atom { transform-box: view-box; transform-origin: 120px 90px; animation: nt-spin 16s linear infinite; } .product-card:hover .card-art .ca-needle { animation-duration: 1.8s; } .product-card:hover .card-art .ca-donut, .product-card:hover .card-art .ca-atom, .product-card:hover .card-art .ca-orbit { animation-duration: 4s; } @media (prefers-reduced-motion: reduce) { .card-art * { animation: none !important; } } html.low .product-card__mol svg.card-art { filter: none; } /* Optional footer legal / compliance links */ .footer-copy .beian { margin-left: 16px; color: var(--muted); transition: color .3s; white-space: nowrap; } .footer-copy .beian:hover { color: var(--cyan); } @media (max-width: 620px) { .footer-copy .beian { display: inline-block; margin: 6px 12px 0 0; } } /* ============================================================ Two-level nav — hover dropdowns (glass) ============================================================ */ .primary-nav__menu > li { position: relative; } .primary-nav__menu .menu-item-has-children > a { padding-right: 16px; } .primary-nav__menu .menu-item-has-children > a::before { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .55; transition: transform .3s, opacity .3s; } .primary-nav__menu > li.menu-item-has-children:hover > a::before, .primary-nav__menu > li.menu-item-has-children:focus-within > a::before { opacity: 1; transform: translateY(-30%) rotate(225deg); } .primary-nav__menu .sub-menu { display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(12px); min-width: 196px; margin: 0; padding: 10px; list-style: none; background: rgba(9,14,26,.78); -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(1.06); backdrop-filter: blur(26px) saturate(170%) brightness(1.06); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 26px rgba(46,230,255,.05), 0 30px 64px -28px rgba(0,0,0,.88); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility .3s; z-index: 130; } .primary-nav__menu .sub-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 16px; } .primary-nav__menu > li:hover > .sub-menu, .primary-nav__menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(8px); } .primary-nav__menu .sub-menu li { display: block; } .primary-nav__menu .sub-menu a { display: block; padding: 9px 14px; border-radius: 10px; font-size: .82rem; letter-spacing: .02em; text-transform: none; font-weight: 500; color: rgba(233,240,251,.82); white-space: nowrap; } .primary-nav__menu .sub-menu a::after { display: none; } .primary-nav__menu .sub-menu a:hover { background: linear-gradient(120deg, rgba(46,230,255,.14), rgba(139,92,246,.12)); color: #fff; } html.low .primary-nav__menu .sub-menu { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0a0e1b; } /* Mobile menu — show second level indented */ .mobile-menu__list .sub-menu { list-style: none; margin: 4px 0 10px; padding: 0 0 0 16px; border-left: 1px solid var(--line); } .mobile-menu__list .sub-menu a { font-size: 1rem; color: var(--body); padding: 8px 0; } /* ============================================================ Breadcrumbs (SEO + nav) ============================================================ */ .breadcrumbs { font-family: var(--display); font-size: .76rem; letter-spacing: .04em; color: var(--muted); margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .breadcrumbs a { color: var(--body); transition: color .25s; } .breadcrumbs a:hover { color: var(--cyan); } .breadcrumbs .sep { opacity: .5; } .breadcrumbs span[aria-current] { color: var(--ink); } .page-hero .breadcrumbs { justify-content: center; margin-bottom: 1rem; } /* ============================================================ Related posts (internal linking on single) ============================================================ */ .related { margin-top: clamp(40px,6vw,76px); } .related__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; } .related__head h2 { font-family: var(--display); font-size: clamp(1.3rem,2.4vw,1.9rem); font-weight: 700; } .related__head span { font-family: var(--mono); font-size: .8rem; color: var(--muted); } .related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: clamp(18px,2vw,26px); } /* ── Post tags ── */ .post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; } .tag-pill { font-family: var(--mono); font-size: .78rem; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 50px; padding: 4px 14px; text-decoration: none; transition: color .2s, border-color .2s; } .tag-pill:hover { color: var(--accent); border-color: var(--accent); } /* ── Portfolio (Projects CPT) ── */ .post-list--folio { grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px,3vw,40px); } @media (max-width: 960px) { .post-list--folio { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 620px) { .post-list--folio { grid-template-columns: 1fr; } } .project-meta { display: flex; flex-wrap: wrap; gap: clamp(24px,4vw,64px); padding-bottom: clamp(26px,4vw,40px); margin-bottom: clamp(28px,4vw,44px); border-bottom: 1px solid var(--line); } .project-meta__item { display: flex; flex-direction: column; gap: 6px; } .project-meta__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .project-meta__value { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink); } a.project-meta__value { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } a.project-meta__value:hover { color: var(--cyan); } /* ============================================================ Level-up FX — @property gradients, kinetic type, color-mix, magnetics ============================================================ */ @property --ntc-spin { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes ntc-spin360 { to { --ntc-spin: 360deg; } } /* Animated gradient ring on the primary button (revealed on hover) */ .btn { position: relative; } .btn--grad::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ntc-spin, 0deg), transparent 0deg, #fff 36deg, transparent 96deg, transparent 250deg, var(--cyan) 320deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .4s; pointer-events: none; } .btn--grad:hover::after { opacity: .95; animation: ntc-spin360 2.4s linear infinite; } /* Magnetic buttons — JS sets transform; this smooths the spring-back */ .hero__actions .btn, .header-cta, .cta-band__inner .btn, .footer-cta .btn, .lang-toggle, [data-magnetic] { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .4s, background .4s, color .4s; will-change: transform; } /* Kinetic marquee — skews with scroll velocity (JS sets --vel-skew on .marquee) */ .marquee { transform: skewX(var(--vel-skew, 0deg)); transition: transform .35s cubic-bezier(.2,.8,.2,1); } /* Flowing gradient text (shimmer) */ .grad-text { background-size: 220% 100%; } @media (prefers-reduced-motion: no-preference) { .grad-text { animation: ntc-grad-flow 7s ease-in-out infinite; } } @keyframes ntc-grad-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Modern typography — balanced headings, tidy body rags */ .hero__title, .section-head__title, .feature__title, .about__title, .cta-band__title, .bento__title, .statement__text, .page-hero__title, .post-card__title, .product-card__name, .related__head h2, .footer-cta__title { text-wrap: balance; } .hero__text, .feature__body, .about__body, .product-card__desc, .cta-band__text, .prose p, .post-card__excerpt { text-wrap: pretty; } /* color-mix() ties hovers to the live Customizer accent colors */ @supports (color: color-mix(in srgb, red, blue)) { .primary-nav__menu .sub-menu a:hover { background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 18%, transparent), color-mix(in srgb, var(--indigo) 16%, transparent)); } .product-card__readmore:hover { color: color-mix(in srgb, var(--cyan) 75%, #fff); } ::selection { background: color-mix(in srgb, var(--cyan) 36%, transparent); color: #fff; } } @media (prefers-reduced-motion: reduce) { .btn--grad:hover::after, .topic-card:hover::before, .grad-text { animation: none !important; } .marquee { transform: none !important; } } /* ============================================================ Aurora mesh — richer flowing gradient backdrop (compositor-driven) ============================================================ */ .mesh-bg { inset: -8%; background: radial-gradient(38% 48% at 20% 24%, rgba(46,230,255,.30), transparent 70%), radial-gradient(42% 46% at 82% 70%, rgba(139,92,246,.30), transparent 70%), radial-gradient(48% 56% at 58% 116%, rgba(91,140,255,.26), transparent 70%); background: radial-gradient(38% 48% at 20% 24%, color-mix(in srgb, var(--cyan) 30%, transparent), transparent 70%), radial-gradient(42% 46% at 82% 70%, color-mix(in srgb, var(--indigo) 30%, transparent), transparent 70%), radial-gradient(48% 56% at 58% 116%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 70%); } @media (prefers-reduced-motion: no-preference) { .mesh-bg { animation: ntc-mesh-drift 32s ease-in-out infinite alternate; } } @keyframes ntc-mesh-drift { 0% { transform: translate3d(0,0,0) scale(1) rotate(0deg); } 100% { transform: translate3d(3%,-2.5%,0) scale(1.1) rotate(2.5deg); } } html.low .mesh-bg { animation: none; background: none; inset: 0; } /* ============================================================ Scroll-stacking feature cards (JS-driven; .feature-stack added on desktop) ============================================================ */ @media (min-width: 1000px) { .feature-stack { padding-bottom: 14vh; } .feature-stack .feature { position: sticky; top: 84px; max-width: 1180px; margin-inline: auto; padding: clamp(40px,4vw,72px); border-radius: 30px; background: linear-gradient(165deg, #0c1424 0%, #070b14 100%); border: 1px solid var(--line-2); box-shadow: 0 50px 100px -45px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.07); transform-origin: 50% 0%; will-change: transform, filter; } .feature-stack .feature::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 40%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--indigo) 40%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .5; } } @media (prefers-reduced-motion: reduce) { .feature-stack .feature { position: static; transform: none !important; filter: none !important; } } /* ============================================================ Iridescent GLSL shader backdrop (statement section) ============================================================ */ .statement { position: relative; overflow: hidden; } .statement .container { position: relative; z-index: 2; } .shader-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; opacity: 0; transition: opacity 1.4s ease; } .shader-bg.shader-on { opacity: .92; } .statement__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 85% at 50% 50%, rgba(5,6,14,.30), rgba(5,6,14,.84) 78%); } html.low .shader-bg, .statement__scrim:only-child { display: none; } @media (prefers-reduced-motion: reduce) { .shader-bg { display: none; } } /* ============================================================ Archive layout (content + sidebar) + richer post cards ============================================================ */ .archive-layout { display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: clamp(30px, 3.5vw, 56px); align-items: start; } .archive-main { min-width: 0; } .post-card__media { position: relative; display: block; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(125% 120% at 32% 6%, rgba(52,100,162,.5), #070e1b 72%); } .post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .post-card:hover .post-card__media img { transform: scale(1.06); } .post-card__tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--display); font-weight: 600; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: 6px 12px; border-radius: 100px; background: rgba(4,8,15,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line-2); } .post-card__excerpt { font-size: .95rem; color: var(--muted); line-height: 1.6; margin: 0 0 1.1rem; } /* ============================================================ Sidebar widgets ============================================================ */ .sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); } .widget { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .widget-title, .widget .widget-title { font-family: var(--display); font-size: 1.04rem; font-weight: 700; color: var(--ink); margin: 0 0 16px; padding-left: 12px; position: relative; } .widget-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 1.05em; border-radius: 3px; background: var(--grad); box-shadow: var(--glow-cyan); } .widget .wlist { list-style: none; margin: 0; padding: 0; } .widget .wlist li { border-bottom: 1px dashed var(--line); } .widget .wlist li:last-child { border-bottom: 0; } .widget .wlist a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; color: var(--body); font-size: .9rem; transition: color .25s, padding .25s; } .widget .wlist a:hover { color: var(--cyan); padding-left: 9px; } .widget .wlist b { font-family: var(--mono); font-size: .76rem; color: var(--muted); font-weight: 500; } .widget .warchive a { justify-content: flex-start; } .widget .wposts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .widget .wposts a { display: flex; flex-direction: column; gap: 3px; padding: 9px 4px; border-radius: 8px; transition: background .25s; } .widget .wposts a:hover { background: rgba(255,255,255,.04); } .widget .wp-title { font-size: .9rem; color: var(--body); line-height: 1.45; transition: color .25s; } .widget .wposts a:hover .wp-title { color: #fff; } .widget .wp-date { font-family: var(--mono); font-size: .7rem; color: var(--muted); } .tagcloud2 { display: flex; flex-wrap: wrap; gap: 8px; } .tagcloud2 a, .widget .tagcloud a { font-size: .76rem !important; color: var(--body); padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: color .25s, border-color .25s, background .25s; } .tagcloud2 a:hover, .widget .tagcloud a:hover { color: #04080f; background: var(--cyan); border-color: var(--cyan); } .widget--search .search-form, .widget--search form { display: flex; gap: 8px; } .widget--search input[type="search"], .widget--search .search-field { flex: 1; min-width: 0; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; color: var(--ink); font-size: .9rem; } .widget--search input[type="search"]:focus { outline: none; border-color: var(--cyan); } .widget--search button, .widget--search .search-submit { background: var(--grad); color: #04080f; border: 0; border-radius: 10px; padding: 0 16px; font-weight: 700; cursor: none; } /* ============================================================ Comments — modern dark UI ============================================================ */ .comments { max-width: 820px; margin: clamp(48px,7vw,90px) 0 0; } .comments__title { font-family: var(--display); font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight: 700; margin: 0 0 28px; display: flex; align-items: baseline; gap: 8px; } .comments__title .comments__count { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .comment-list { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; gap: 18px; } .comment-list .children { list-style: none; margin: 18px 0 0; padding: 0 0 0 clamp(20px,3vw,52px); display: flex; flex-direction: column; gap: 18px; border-left: 1px solid var(--line); } .comment-item { margin: 0; } .comment-body { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 20px 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .comment-avatar img { width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--line-2); display: block; } .comment-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .comment-author { font-family: var(--display); font-weight: 700; color: var(--ink); } .comment-date { font-family: var(--mono); font-size: .74rem; color: var(--muted); } .comment-text { color: var(--body); line-height: 1.7; font-size: .96rem; } .comment-text p { margin: 0 0 .7em; } .comment-text p:last-child { margin-bottom: 0; } .comment-actions { display: flex; gap: 14px; margin-top: 10px; font-family: var(--display); font-size: .76rem; } .comment-actions a { color: var(--cyan); } .comment-actions a:hover { color: #9bf0ff; } .comment-pending { display: inline-block; margin-bottom: 8px; font-size: .76rem; color: var(--violet); font-style: normal; } .bypostauthor > .comment-body { border-color: rgba(46,230,255,.35); box-shadow: inset 0 0 28px rgba(46,230,255,.06); } .comment-respond { background: linear-gradient(165deg, rgba(13,19,34,.7), rgba(7,11,20,.85)); border: 1px solid var(--line-2); border-radius: 22px; padding: clamp(26px,3.5vw,40px); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .comment-form__title, #reply-title { font-family: var(--display); font-size: 1.3rem; font-weight: 700; margin: 0 0 6px; color: var(--ink); } #reply-title small { font-weight: 400; font-size: .8rem; margin-left: 10px; } #reply-title small a { color: var(--violet); } .comment-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 20px; } .cf-row { margin: 0; display: flex; flex-direction: column; gap: 7px; } .cf-row.cf-full, .comment-form > p.cf-full, .comment-form .form-submit { grid-column: 1 / -1; margin: 0; } .comment-form label { font-family: var(--display); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .comment-form input, .comment-form textarea { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; color: var(--ink); font-family: var(--body-f); font-size: .95rem; transition: border-color .3s, box-shadow .3s; } .comment-form textarea { resize: vertical; min-height: 120px; line-height: 1.6; } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(46,230,255,.12); } .comment-form .comment-form-cookies-consent { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted); } .comment-form .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; } .comment-form .form-submit { display: flex; } .comments__closed { color: var(--muted); font-size: .9rem; margin: 0 0 30px; } @media (max-width: 980px) { .archive-layout { grid-template-columns: 1fr; } .sidebar { position: static; flex-direction: row; flex-wrap: wrap; } .sidebar .widget { flex: 1 1 260px; } .comment-form { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .comment-form { grid-template-columns: 1fr; } .comment-body { grid-template-columns: 40px 1fr; gap: 12px; padding: 16px; } .comment-avatar img { width: 40px; height: 40px; } } /* ============================================================ Authoritative footer (entity blurb, trust stats, rich links) ============================================================ */ .site-footer { background: rgba(4,8,15,.95); } /* opaque enough that background code-tokens don't bleed through */ .footer-about { font-size: .9rem; line-height: 1.75; color: var(--muted); margin: 1.1rem 0 1.3rem; max-width: 44ch; } .footer-stats { display: flex; gap: clamp(18px,2vw,30px); margin: 0 0 1.4rem; flex-wrap: wrap; } .footer-stat b { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 700; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .footer-stat span { font-size: .7rem; color: var(--muted); letter-spacing: .04em; } .footer-contact { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; line-height: 1.6; margin: 0 0 1.2rem; } .footer-contact span { color: var(--body); } .footer-contact a { color: rgba(255,255,255,.78); } .footer-contact a:hover { color: var(--cyan); } .footer-menu li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; line-height: 1.4; transition: color .25s, padding-left .25s; } .footer-menu li a:hover { padding-left: 5px; } .footer-menu li a i { font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--muted); opacity: .65; } .footer-brand { position: relative; z-index: 2; } @media (max-width: 980px) { .footer-stats { gap: 22px; } .footer-about { max-width: none; } } /* Accessibility skip-link — visually hidden until keyboard-focused (was showing as stray text). */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); border: 0; white-space: nowrap; } .skip-link.screen-reader-text:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; clip-path: none; margin: 0; padding: 12px 22px; background: #fff; color: #050f1c; font-weight: 700; border-radius: 10px; z-index: 100000; box-shadow: 0 10px 30px rgba(0,0,0,.45); white-space: nowrap; } /* ========== WordPress standard content classes (required by Theme Check) ========== */ .alignleft { float: left; margin: 0 1.5rem 1rem 0; } .alignright { float: right; margin: 0 0 1rem 1.5rem; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; } .alignfull { max-width: none; } .entry-content--full { max-width: none; margin-inline: auto; padding-inline: clamp(20px,5vw,80px); } .entry-content--full > .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; } .wp-caption { max-width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 8px; padding: 6px; } .wp-caption img { display: block; width: 100%; height: auto; } .wp-caption-text { margin: 6px 0 2px; font-size: .8rem; color: var(--muted); text-align: center; } .sticky { position: relative; } .sticky::before { content: ''; display: block; width: 4px; height: 100%; position: absolute; left: -18px; top: 0; background: var(--cyan); border-radius: 2px; } .gallery-caption { display: block; font-size: .8rem; color: var(--muted); text-align: center; margin-top: 4px; } .bypostauthor > .comment-body { border-left: 3px solid var(--cyan); padding-left: 14px; } /* ============================================================ * LAYOUT VARIANTS * Body class .ntc-v-{name} is added by PHP per active preset. * Each variant controls: hero alignment · grid cols · btn shape * · type scale · card radius · spacing. Clients can change via * Customizer → Global · Colors & Fonts → Layout style. * ============================================================ */ /* ── SaaS / IT (default — minimal overrides) ── */ .ntc-v-saas .btn { border-radius: 8px; } .ntc-v-saas .product-grid { grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); } /* ── Editorial / Blog — left-aligned, 2-col, square buttons ── */ .ntc-v-editorial .hero__inner, .ntc-v-editorial .page-hero__inner { text-align: left; } .ntc-v-editorial .hero__title { font-size: clamp(3.2rem,7.5vw,6.4rem); max-width: 20ch; } .ntc-v-editorial .hero__eyebrow { letter-spacing: .18em; } .ntc-v-editorial .hero__eyebrow::before { width: 28px; } .ntc-v-editorial .hero__actions, .ntc-v-editorial .hero__stats { justify-content: flex-start; } .ntc-v-editorial .breadcrumbs { justify-content: flex-start; } .ntc-v-editorial .page-hero .breadcrumbs { justify-content: flex-start; } .ntc-v-editorial .post-list { grid-template-columns: repeat(2,1fr); gap: clamp(24px,3vw,40px); } .ntc-v-editorial .product-grid { grid-template-columns: repeat(2,1fr); } .ntc-v-editorial .btn { border-radius: 4px; } .ntc-v-editorial .product-card, .ntc-v-editorial .post-card { border-radius: 6px; } .ntc-v-editorial .product-card__media, .ntc-v-editorial .post-card__media { border-radius: 6px 6px 0 0; } .ntc-v-editorial .section-head__title { font-size: clamp(2.2rem,5vw,4rem); letter-spacing: -.025em; } @media (max-width: 700px) { .ntc-v-editorial .post-list, .ntc-v-editorial .product-grid { grid-template-columns: 1fr; } } /* ── Creative Studio — oversized type, sharp edges, airy grid ── */ .ntc-v-creative .hero__title { font-size: clamp(3.8rem,9vw,8rem); letter-spacing: -.055em; max-width: 14ch; line-height: .9; } .ntc-v-creative .hero__eyebrow::before { display: none; } .ntc-v-creative .hero__eyebrow { letter-spacing: .5em; font-size: .66rem; } .ntc-v-creative .btn { border-radius: 0; letter-spacing: .18em; } .ntc-v-creative .product-card, .ntc-v-creative .post-card { border-radius: 0; } .ntc-v-creative .product-card__media, .ntc-v-creative .post-card__media { border-radius: 0; } .ntc-v-creative .product-grid { grid-template-columns: repeat(2,1fr); gap: clamp(2px,0.4vw,6px); } .ntc-v-creative .section-head__title { font-size: clamp(2.6rem,6vw,5.5rem); letter-spacing: -.04em; } @media (max-width: 700px) { .ntc-v-creative .hero__title { font-size: clamp(2.8rem,7vw,5rem); } .ntc-v-creative .product-grid { grid-template-columns: 1fr; gap: 3px; } } /* ── Finance / Trust — left-aligned, 4-col compact, rectangular ── */ .ntc-v-trust .hero__inner { text-align: left; } .ntc-v-trust .hero__title { font-size: clamp(2.8rem,5.5vw,5rem); letter-spacing: -.02em; } .ntc-v-trust .hero__eyebrow { letter-spacing: .22em; } .ntc-v-trust .hero__actions, .ntc-v-trust .hero__stats { justify-content: flex-start; } .ntc-v-trust .breadcrumbs { justify-content: flex-start; } .ntc-v-trust .page-hero .breadcrumbs { justify-content: flex-start; } .ntc-v-trust .product-grid { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); } .ntc-v-trust .post-list { grid-template-columns: repeat(2,1fr); } .ntc-v-trust .btn { border-radius: 6px; } .ntc-v-trust .product-card, .ntc-v-trust .post-card { border-radius: 6px; } .ntc-v-trust .product-card__media, .ntc-v-trust .post-card__media { border-radius: 6px 6px 0 0; } .ntc-v-trust .section-head__title { letter-spacing: -.015em; } @media (max-width: 700px) { .ntc-v-trust .post-list { grid-template-columns: 1fr; } } /* ── Wellness / Health — centred, very rounded, airy spacing ── */ .ntc-v-wellness .hero__title { font-size: clamp(2.8rem,6vw,5.4rem); font-weight: 300; letter-spacing: -.01em; max-width: 22ch; } .ntc-v-wellness .hero__eyebrow { letter-spacing: .35em; } .ntc-v-wellness .btn { border-radius: 50px; } .ntc-v-wellness .product-card, .ntc-v-wellness .post-card { border-radius: 20px; } .ntc-v-wellness .product-card__media, .ntc-v-wellness .post-card__media { border-radius: 20px 20px 0 0; } .ntc-v-wellness .product-grid { grid-template-columns: repeat(2,1fr); } .ntc-v-wellness .section-pad { padding-block: calc(var(--section) * 1.2); } .ntc-v-wellness .section-head__title { font-weight: 300; letter-spacing: -.008em; } @media (max-width: 700px) { .ntc-v-wellness .product-grid { grid-template-columns: 1fr; } } /* ── Industrial / Heavy — left-aligned, bold weight, sharp ── */ .ntc-v-heavy .hero__inner { text-align: left; } .ntc-v-heavy .hero__title { font-size: clamp(2.9rem,6.5vw,5.8rem); font-weight: 700; letter-spacing: -.04em; } .ntc-v-heavy .hero__eyebrow { letter-spacing: .3em; } .ntc-v-heavy .hero__actions, .ntc-v-heavy .hero__stats { justify-content: flex-start; } .ntc-v-heavy .breadcrumbs { justify-content: flex-start; } .ntc-v-heavy .page-hero .breadcrumbs { justify-content: flex-start; } .ntc-v-heavy .btn { border-radius: 4px; font-weight: 700; letter-spacing: .14em; } .ntc-v-heavy .product-card, .ntc-v-heavy .post-card { border-radius: 4px; } .ntc-v-heavy .product-card__media, .ntc-v-heavy .post-card__media { border-radius: 4px 4px 0 0; } .ntc-v-heavy .post-list { grid-template-columns: repeat(2,1fr); } .ntc-v-heavy .section-head__title { font-weight: 700; letter-spacing: -.03em; } @media (max-width: 700px) { .ntc-v-heavy .post-list { grid-template-columns: 1fr; } }